/* =============================================================================
   RWD QM-Assistent – mobile.css   (App-artige Mobil-Shell, Muster Teamplanung)
   Regeln greifen nur ≤1023px; Desktop bleibt unberuehrt.
   ============================================================================= */

/* Mobile-Chrome auf dem Desktop ausblenden */
.qm-topbar, .qm-tabbar, .qm-drawer-overlay { display: none; }

@media (max-width: 1023px) {

    /* ── Grundlagen / App-Feel ── */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { -webkit-tap-highlight-color: transparent; }
    .app-shell { min-height: 100dvh; }
    input, select, textarea { font-size: 16px !important; }  /* iOS-Zoom verhindern */

    /* ── Inhaltsspalte: Platz fuer Top-Bar + Tab-Leiste ── */
    .main {
        margin-left: 0 !important;
        min-width: 0; max-width: 100vw; overflow-x: clip;
        padding: 14px 12px;
        padding-top: calc(60px + env(safe-area-inset-top));
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    /* ── Top-Bar (dunkelblau, Titel mittig) ── */
    .qm-topbar {
        display: flex; align-items: center; gap: 4px;
        position: fixed; top: 0; left: 0; right: 0;
        height: calc(52px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 6px 0;
        background: var(--rwd-blue-900);
        z-index: 120;
        box-shadow: 0 1px 6px rgba(0,0,0,0.18);
    }
    .qm-topbar-btn {
        flex: 0 0 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
        background: none; border: none; color: #fff; cursor: pointer;
        border-radius: 10px; padding: 0;
    }
    .qm-topbar-btn:active { background: rgba(255,255,255,0.14); }
    .qm-topbar-ghost { pointer-events: none; }
    .qm-topbar-title {
        flex: 1; text-align: center; color: #fff;
        font-size: 17px; font-weight: 700; letter-spacing: -0.2px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .qm-burger { position: relative; width: 22px; height: 16px; display: inline-block; }
    .qm-burger span {
        position: absolute; left: 0; width: 22px; height: 2px;
        background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s;
    }
    .qm-burger span:nth-child(1) { top: 0; }
    .qm-burger span:nth-child(2) { top: 7px; }
    .qm-burger span:nth-child(3) { top: 14px; }
    .qm-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .qm-burger.open span:nth-child(2) { opacity: 0; }
    .qm-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Bottom-Tab-Leiste ── */
    .qm-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0;
        background: #fff; border-top: 1px solid var(--border);
        padding: 4px 4px env(safe-area-inset-bottom);
        z-index: 120;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    }
    .qm-tab {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; padding: 6px 2px; min-height: 52px;
        background: none; border: none; cursor: pointer;
        color: #9aa0a6 !important; font-size: 11px; font-weight: 600;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: color .15s;
    }
    .qm-tab .qm-tab-ico { font-size: 21px; line-height: 1; }
    .qm-tab .qm-tab-lbl {
        line-height: 1.2; max-width: 100%;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .qm-tab.active { color: var(--rwd-blue-700) !important; }
    .qm-tab.active .qm-tab-ico { transform: scale(1.06); }
    .qm-tab:active .qm-tab-ico { transform: scale(0.88); transition: transform .08s ease; }

    /* ── Sidebar als Bottom-Sheet (Drawer) ── */
    .qm-drawer-overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
        z-index: 240;
    }
    .qm-drawer-overlay.open { opacity: 1; pointer-events: auto; }

    .sidebar {
        width: 100% !important;
        left: 0 !important; right: 0 !important;
        top: auto !important; bottom: 0 !important;
        height: auto !important; max-height: 84vh;
        border-radius: 18px 18px 0 0;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        transform: translateY(110%);
        transition: transform .28s cubic-bezier(.2,.8,.2,1);
        z-index: 250;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.open { transform: translateY(0); box-shadow: 0 -8px 28px rgba(0,0,0,0.28); }
    .sidebar-header { position: relative; }
    .sidebar-header::before {
        content: ''; display: block;
        width: 40px; height: 4px;
        background: rgba(255,255,255,0.32); border-radius: 3px;
        margin: 0 auto 12px;
    }
    .sidebar .nav-link { padding: 13px 14px; font-size: 15px; }
    .sidebar .nav-link:active { background: rgba(255,255,255,0.18); }

    /* "Zum Dashboard"-FAB ueber die Tab-Leiste heben */
    .back-to-dashboard {
        bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        right: 14px !important;
    }
    .back-to-dashboard span { display: none; }

    /* Buttons + Modals fingerfreundlich */
    .btn { min-height: 42px; }
    .modal { width: calc(100vw - 20px) !important; max-width: 100% !important; }
    .kpi-grid { gap: 12px; }

    /* ── KI-Chat mobil: Sitzungs-Spalte weg, volle Hoehe ── */
    .chat-sessions { display: none; }
    .chat-layout {
        height: calc(100dvh - 60px - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px);
        min-height: 300px;
    }
    .chat-msg { max-width: 92%; }
    .chat-verlauf { padding: 12px 10px 6px; }
    .chat-eingabe { padding: 8px; }
}

/* ── Sehr kleine Phones ── */
@media (max-width: 480px) {
    .main { padding-left: 10px; padding-right: 10px; }
    .qm-tab .qm-tab-lbl { font-size: 10px; }
    .qm-topbar-title { font-size: 16px; }
    h1 { font-size: 19px; }
}