.mobile-tabbar { display: none; }
.mobile-fab { display: none; }

@media (max-width: 768px) {
    /* Shell immer einspaltig — auch wenn (fälschlich) „collapsed" gesetzt wäre.
       Die schmale Rail darf mobil NIE erscheinen. */
    #appShell,
    #appShell.sidebar-collapsed { grid-template-columns: 1fr; }
    /* Einklapp-Umschalter mobil ausblenden (Off-Canvas statt Rail). */
    .sidebar-toggle { display: none !important; }

    .shell-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 320px;
        transform: translateX(-100%); transition: transform .22s ease; z-index: 1100;
    }
    /* Sicherheitsnetz: Falls „collapsed" je gesetzt ist, das Sheet trotzdem als
       volle (nicht zentrierte Rail-)Ansicht zeigen. */
    #appShell.sidebar-collapsed .shell-sidebar { width: 82vw; max-width: 320px; }
    #appShell.sidebar-collapsed .logo-text,
    #appShell.sidebar-collapsed .sb-toolbar,
    #appShell.sidebar-collapsed .sb-name,
    #appShell.sidebar-collapsed .sb-count,
    #appShell.sidebar-collapsed .sb-disc { display: revert; }
    #appShell.sidebar-collapsed .sb-client { justify-content: flex-start; padding: 5px 8px; }

    body.mobile-filter-open .shell-sidebar { transform: translateX(0); box-shadow: 8px 0 30px rgba(24,24,27,.2); }
    body.mobile-filter-open::after {
        content: ''; position: fixed; inset: 0; background: rgba(24,24,27,.4); z-index: 1099;
    }
    .shell-main { height: 100vh; height: 100dvh; }
    /* Platz für die fixe Tab-Bar inkl. iOS-Safe-Area unten. */
    .shell-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    /* Footer bleibt an den Boden gepinnt (margin-top:auto aus shell.css) → er
       sitzt direkt über der Tab-Bar, kein Leerraum darunter. */
    .footer { padding: var(--spacing-md) var(--spacing-lg); }
    .footer-row-main { gap: 6px 10px; }
    /* FAB nicht über die Footer-Links: etwas Platz rechts im Footer lassen. */
    .footer-content { padding-right: 56px; }

    /* ============================================================
       Konsolidierter Mobile-Feinschliff — diese Datei lädt ZULETZT,
       gewinnt also gegen alle anderen CSS bei gleicher Spezifität.
       ============================================================ */

    /* Kein horizontaler Page-Overflow / schwarzer Rand rechts (alle Ebenen). */
    html, body { overflow-x: hidden; max-width: 100%; }
    #appShell, .shell-main, .shell-content { max-width: 100vw; overflow-x: hidden; }

    /* — Auswertung: Periodenfilter kompakt (war mobil riesig) — */
    [data-view-panel="auswertung"] .filter-bar-redesign,
    [data-view-panel="auswertung"] .filter-bar-redesign.is-compact {
        padding: 8px 10px;
        gap: 8px;
        margin-bottom: 10px;
        flex-direction: column;
        align-items: stretch;
    }
    [data-view-panel="auswertung"] .period-nav {
        flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: 100%;
    }
    [data-view-panel="auswertung"] .period-label { flex: 0 1 auto; font-size: .85rem; white-space: nowrap; }
    [data-view-panel="auswertung"] .btn-nav { padding: 5px 8px; }
    [data-view-panel="auswertung"] .filter-actions { width: 100%; justify-content: center; gap: 6px; margin: 0; }
    [data-view-panel="auswertung"] .filter-toggle { flex: 1 1 0; min-width: 0; padding: 7px 8px; font-size: .78rem; }

    /* — Einstellungen: kein Überlauf — */
    #settingsView { padding: 12px; overflow-x: hidden; max-width: 100%; }
    #settingsView .settings-shell,
    #settingsView .settings-panes,
    #settingsView .settings-section { min-width: 0; max-width: 100%; }

    /* — Chart-Karten: Titel oben, Steuerung als ein sauberer horizontaler
       Swipe-Rail darunter (statt unruhigem Umbruch mehrerer Toggle-Gruppen). — */
    .analytics-charts .chart-card-header { flex-direction: column; align-items: stretch; gap: 8px; }
    .analytics-charts .chart-card-actions {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .analytics-charts .chart-card-actions::-webkit-scrollbar { display: none; }
    .analytics-charts .chart-toggle-group { flex-wrap: nowrap; flex: 0 0 auto; }
    .analytics-charts .chart-card-total { flex: 0 0 auto; margin-left: auto; }

    /* — Kunden & Projekte: Hero als normale Karte (kein Full-Bleed/Top-Clip) — */
    .config-detail-header { margin: 0 0 16px; border-radius: 14px; }
    .config-hero-inner { padding: 16px; max-width: none; }

    /* — Timer ist links angedockt → Collapse-Pfeil spiegeln — */
    .timer-dock-collapse i { transform: scaleX(-1); }

    /* Bottom-Tab-Bar */
    .mobile-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090;
        background: var(--white); border-top: 1px solid var(--gray-200);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    [data-theme="dark"] .mobile-tabbar { background: var(--dark-light); border-top: 1px solid rgba(64,64,64,.6); }
    .mtab {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 9px 0 10px; border: none; background: transparent; color: var(--gray-400);
        font-size: .62rem; cursor: pointer;
    }
    .mtab i { font-size: 1rem; }
    .mtab.active { color: var(--primary); }
    /* Icon wrapper mit relativem Kontext für das Notification-Badge */
    .mtab .mtab-icon-wrap {
        position: relative;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .mtab .mtab-icon-wrap i { font-size: 1rem; }
    /* Badge-Punkt auf dem Menü-Tab (spiegelt Bell-Badge) */
    .mtab-badge {
        position: absolute; top: -4px; right: -8px;
        min-width: 8px; height: 8px;
        border-radius: 999px;
        background: var(--error, #ef4444);
        border: 1.5px solid var(--white, #fff);
    }

    /* FAB */
    .mobile-fab {
        display: inline-flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px;
        border-radius: 16px; border: none; background: var(--primary); color: #fff;
        font-size: 1.1rem; box-shadow: 0 6px 18px rgba(124,58,237,.45); z-index: 1095; cursor: pointer;
    }
    [data-theme="dark"] .mobile-fab { box-shadow: 0 6px 18px rgba(124,58,237,.3); }

    /* ============================================================
       ERFASSUNG (Composer) — App-Feel statt Mobile-Website
       ============================================================ */

    /* App-Header (alle Bereiche): knapper Kopf statt großer Website-Überschrift.
       Der erklärende Untertitel frisst mobil nur Platz → ausgeblendet; Icon und
       Titel kompakter. Inhalt (Composer, Kennzahlen, Karten) rückt nach oben. */
    .view-hero .section-header { margin-bottom: 12px; }
    .view-hero .section-header p,
    [data-view-panel="export"] .section-header p { display: none; }
    .view-hero .section-header-icon,
    [data-view-panel="export"] .section-header-icon {
        width: 36px; height: 36px; font-size: 0.95rem;
    }
    .view-hero .section-header h2,
    [data-view-panel="export"] .section-header h2 { font-size: 1.15rem; }

    /* Pill-Reihe als horizontaler Swipe-Rail (iOS-Stil): eine saubere Zeile,
       die man seitwärts wischt — kein chaotischer Umbruch. Alle Chips inkl. der
       Schnellbuttons (15/30/60 Min) bleiben direkt erreichbar. Die Editoren
       öffnen als position:fixed Bottom-Sheet, werden vom Rail also nicht
       beschnitten. */
    .composer-v2-pills {
        gap: 8px;
        padding: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scroll-padding-inline: 12px;
        scrollbar-width: none;
    }
    .composer-v2-pills::-webkit-scrollbar { display: none; }
    .composer-v2-pills > .composer-pill,
    .composer-v2-pills > .composer-quick-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .composer-pill > summary {
        min-height: 40px; padding: 9px 14px; font-size: 0.85rem;
    }
    .composer-quick-btn { min-height: 40px; padding: 9px 14px; }

    /* Eintragsliste: weniger Innenabstand → spürbar mehr nutzbare Breite auf
       schmalen Screens (vorher 2rem links+rechts = 64px verschenkt). */
    [data-view-panel="entries"] .entries-list { padding: var(--spacing-md); }
    /* Full-Bleed-Filterleiste an das reduzierte Padding angleichen, damit die
       Trennlinie weiterhin bündig durch das Panel läuft. */
    [data-view-panel="entries"] .filter-bar-redesign {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* — Bottom-Sheet: echtes App-Sheet mit Greifer + abdunkelndem Scrim —
       Liegt über Tab-Bar (1090), FAB (1095) und Timer-Dock (1096). */
    .composer-pill-popover,
    .composer-pill-popover.composer-pill-popover-wide {
        z-index: 1110;
        padding-top: 22px;
        border-radius: 20px;
    }
    .composer-pill-popover::before {
        content: '';
        position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 999px;
        background: var(--gray-300);
    }
    body.composer-sheet-open::before {
        content: '';
        position: fixed; inset: 0;
        background: rgba(24, 24, 27, .42);
        z-index: 1100;
        animation: scrimFade .16s ease-out;
    }

    /* ============================================================
       EXPORT — App-typische Cards: Aktion volle Breite & gut greifbar
       ============================================================ */
    [data-view-panel="export"] .export-card .btn {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    /* ============================================================
       KUNDEN & PROJEKTE — Tab-Subnav als sauberer Swipe-Rail
       (Scrollbar verstecken, konsistent mit den übrigen Rails).
       ============================================================ */
    .config-subnav { scrollbar-width: none; }
    .config-subnav::-webkit-scrollbar { display: none; }
    .config-subnav-item { min-height: 40px; }

    /* ============================================================
       GENEHMIGUNGEN — angepinnte Bulk-Aktionsleiste + Touch-Größen
       ============================================================ */
    /* Freigeben/Ablehnen als app-typische Action-Bar, die über der Tab-Bar
       angepinnt bleibt — beim Scrollen durch die Queue immer erreichbar
       (vorher floss die Leiste am Listenende mit und war oft außer Sicht). */
    [data-view-panel="approvals"] .approval-bulk-bar {
        position: sticky;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 8px);
        z-index: 80;
        margin-top: 12px;
        padding: 10px 12px;
        gap: 10px;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(15, 12, 20, .16);
    }
    [data-theme="dark"] [data-view-panel="approvals"] .approval-bulk-bar {
        background: var(--dark-light);
        border-color: rgba(64, 64, 64, .6);
    }
    [data-view-panel="approvals"] .approval-bulk-actions { flex: 1; gap: 8px; }
    [data-view-panel="approvals"] .approval-bulk-actions .approval-action-btn {
        flex: 1; height: 44px; border-radius: 12px;
    }
    /* Toolbar-Bedienelemente (Alle / Filter) bequem antippbar */
    [data-view-panel="approvals"] .approval-select-all-row,
    [data-view-panel="approvals"] .approval-filter-toggle { min-height: 40px; }

    /* ============================================================
       EINTRAG BEARBEITEN (Modal) — App-Feinschliff
       ============================================================ */
    /* Zeit-Trio nicht zu drei vollen Zeilen stapeln (das tat die ≤540-Regel):
       Start + Ende nebeneinander, die berechnete Dauer darunter in voller
       Breite — konsistent mit dem Dauer-Editor im Composer. */
    #editEntryModal .form-row.cols-3 { grid-template-columns: 1fr 1fr; }
    #editEntryModal .form-row.cols-3 > .form-group:last-child { grid-column: span 2; }

    /* Lange „Nicht fakturierbar"-Beschriftung an der ersten Zeile ausrichten
       statt die Checkbox in der Mitte des umbrochenen Textes schweben zu lassen. */
    #editEntryModal .checkbox-label { align-items: flex-start; text-align: left; }
    #editEntryModal .checkbox-label input[type="checkbox"] { margin-top: 2px; }

    /* Sticky-Aktionsleiste aller Drawer/Sheets über die iOS-Home-Indicator-Zone
       heben — sonst klebt „Aktualisieren/Speichern" am unteren Rand. */
    .modal-actions {
        padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
    }
}

/* Vollbild-Modal auf kleinen Phones: dynamische Viewport-Höhe, damit die
   iOS-Adressleiste den Sticky-Footer nicht unter den sichtbaren Bereich schiebt. */
@media (max-width: 480px) {
    .modal-content { height: 100dvh; max-height: 100dvh; }
}

@keyframes scrimFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
   TABLET / iPad-Hochformat (klassisch 768px) & Phone-Querformat:
   Bottom-Sheet zentriert & begrenzt statt randlos breit gezogen.
   ============================================================ */
@media (min-width: 600px) and (max-width: 768px) {
    .composer-pill-popover,
    .composer-pill-popover.composer-pill-popover-wide {
        left: 0; right: 0;
        margin-inline: auto;
        max-width: 460px;
    }
}

/* ============================================================
   TOUCH-Tablets im Desktop-Layout (iPad Air/Pro im Hochformat ≥769px,
   die die Seitenleiste behalten): Tap-Ziele auf App-Niveau vergrößern.
   ============================================================ */
@media (hover: none) and (pointer: coarse) and (min-width: 769px) {
    .composer-pill > summary,
    .composer-quick-btn { min-height: 40px; }
    .composer-pill-quick button { min-height: 36px; }
    .composer-v2-recent .recent-project-btn { min-height: 38px; }
    .composer-pill-popover input,
    .composer-pill-popover select { min-height: 40px; }
    .entry-actions .btn-small { width: 38px; height: 38px; min-height: 38px; }
    .period-seg-btn { padding: 8px 14px; }
    .period-step .btn-nav { width: 38px; height: 38px; }
    .filter-toggle { min-height: 38px; }
    .view-toggle .btn { min-height: 38px; }
}