/* ====================================================================
   DIADORN ERP – Mobile Stylesheet
   Additive only. Scoped to max-width: 768px (and a 480px sub-tier).
   Must NEVER change desktop (>768px) rendering.
   ==================================================================== */

/* --------------------------------------------------------------
   Hamburger button + overlay: hidden on desktop by default
   -------------------------------------------------------------- */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 8px;
    background: var(--diadorn-black, #0a0a0a);
    color: var(--diadorn-gold, #c9a55c);
    border: none;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45; /* below sidebar (50), above content */
}
.mobile-overlay.active { display: block; }

@media (max-width: 768px) {

    /* ---------------- Layout shell ---------------- */
    body { overflow-x: hidden; }

    .mobile-menu-btn { display: inline-flex; }

    /* Sidebar becomes an off-canvas drawer */
    .sidebar {
        transform: translateX(-100%);
        width: 78vw;
        max-width: 300px;
        transition: transform 0.25s ease;
        overflow-y: auto;
        padding-bottom: 140px; /* keep bottom user-panel from covering last nav items */
    }
    .sidebar.mobile-open { transform: translateX(0); }
    /* Ignore desktop collapsed state while in mobile drawer mode */
    .sidebar.collapsed { width: 78vw; max-width: 300px; }
    .sidebar.collapsed .nav-text,
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .nav-badge { display: inline; }
    .sidebar.collapsed .nav-item { justify-content: flex-start; padding-left: 20px; padding-right: 20px; }
    .sidebar.collapsed .nav-item i { margin: 0 0 0 0; }
    .sidebar.collapsed .nav-subitems .nav-item { padding-left: 32px; margin-left: 24px; }

    .main-content,
    .main-content.expanded {
        margin-left: 0;
    }

    /* ---------------- Header ---------------- */
    .header {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        gap: 10px;
    }
    .header-title-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #pageTitle { font-size: 18px; }
    .header .flex.items-center.gap-6 { gap: 8px; }
    .header .flex.items-center.gap-2.text-sm.text-gray-500 span { display: none; } /* long date text hidden on small screens */

    /* ---------------- Page content ---------------- */
    #pageContent.p-8,
    .p-8 { padding: 14px !important; }
    .p-6 { padding: 12px !important; }

    /* ---------------- Grids (stat cards, forms etc.) ----------------
       2-column layouts (e.g. Rechnungsadresse | Lieferadresse) are too
       narrow side-by-side on a phone -> stack to 1 column.
       3/4/5/6-column layouts (mostly stat-card rows) -> 2 columns, still
       readable and denser than a full single-column stack. */
    .grid-cols-2 {
        /* minmax(0, 1fr), not plain 1fr: a bare 1fr still lets the column
           grow to its content's min-content width (e.g. a nowrap table),
           which overflowed the viewport (Statistik "Top Gewinner/Verlierer"
           side-by-side tables bled ~215px past the screen edge). */
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    /* A child with col-span-N (N > the collapsed column count above) still
       requests N explicit tracks. CSS Grid then silently creates implicit
       extra columns to satisfy it -- and since a grid's columns are shared
       across every row, ALL sibling cards get re-packed 2-up into those
       resurrected columns and visually overlap (seen on Import: 5 cards,
       last one col-span-2, collapsed the other 4 into 2 overlapping pairs).
       "1 / -1" always spans exactly the columns that actually exist. */
    .grid-cols-2 > .col-span-2, .grid-cols-2 > .col-span-3, .grid-cols-2 > .col-span-4,
    .grid-cols-3 > .col-span-2, .grid-cols-3 > .col-span-3, .grid-cols-3 > .col-span-4,
    .grid-cols-4 > .col-span-2, .grid-cols-4 > .col-span-3, .grid-cols-4 > .col-span-4,
    .grid-cols-5 > .col-span-2, .grid-cols-5 > .col-span-3, .grid-cols-5 > .col-span-4,
    .grid-cols-6 > .col-span-2, .grid-cols-6 > .col-span-3, .grid-cols-6 > .col-span-4 {
        grid-column: 1 / -1 !important;
    }

    /* Order-detail modal header: title/badges + action buttons must wrap
       on narrow screens instead of overflowing the card. */
    .order-modal-toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Edit-order modal: hand-rolled with inline styles (no Tailwind grid
       classes), so it needs its own hook class to be overridden on mobile. */
    .edit-order-address-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---------------- Tables ---------------- */
    /* Catch-all: any table becomes horizontally scrollable, wrapped or not */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table thead, table tbody, table tr { display: table; width: 100%; table-layout: auto; }
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ---------------- Orders list as cards ----------------
       The central orders table has 14 columns — horizontal scrolling hides
       status and amount, which defeats the point of the list. On mobile each
       row becomes a tap-able card: order no. + amount, customer + date,
       payment + delivery status. Row background classes (overdue/delivered/
       storno) keep working since they sit on the tr. Column indexes follow
       the thead in renderOrders(): 1 Bestellnr, 2 Kunde, 4 Datum, 7 Umsatz,
       11 Zahlungsstatus, 14 Lieferstatus. */
    #ordersTable { white-space: normal; overflow-x: visible; }
    #ordersTable thead { display: none; }
    #ordersTable, #ordersTable tbody { display: block; width: 100%; }
    #ordersTable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 10px 4px;
        border-bottom: 1px solid #e5e7eb;
        align-items: center;
    }
    #ordersTable tbody td { display: none; padding: 0; border: none; }
    #ordersTable tbody td:nth-child(1) { /* Bestellnr + RE-Nr */
        display: block; grid-column: 1; grid-row: 1;
        font-size: 13px; overflow-wrap: anywhere;
    }
    #ordersTable tbody td:nth-child(7) { /* Umsatz */
        display: block; grid-column: 2; grid-row: 1;
        text-align: right; font-size: 14px; font-weight: 700;
    }
    #ordersTable tbody td:nth-child(2) { /* Kunde */
        display: block; grid-column: 1; grid-row: 2;
        color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #ordersTable tbody td:nth-child(4) { /* Datum */
        display: block; grid-column: 2; grid-row: 2;
        text-align: right; color: #6b7280;
    }
    #ordersTable tbody td:nth-child(11) { /* Zahlungsstatus badge */
        display: block; grid-column: 1; grid-row: 3; padding-top: 4px;
    }
    #ordersTable tbody td:nth-child(14) { /* Lieferstatus/Tracking */
        display: block; grid-column: 2; grid-row: 3;
        text-align: right; padding-top: 4px;
    }

    /* ---------------- Finanzen: dashboard tables as cards ----------------
       Same reasoning as #ordersTable: horizontal scroll would hide the
       amount (Betrag), which is the one number these lists exist to show.
       Column indexes follow the theads in renderFinanzen()/loadBankTransaktionen(). */
    #finanzenFaelligkeitenTable, #finanzenDebitorenTable, #bankTxTable { white-space: normal; overflow-x: visible; }
    #finanzenFaelligkeitenTable thead, #finanzenDebitorenTable thead, #bankTxTable thead { display: none; }
    #finanzenFaelligkeitenTable, #finanzenFaelligkeitenTable tbody,
    #finanzenDebitorenTable, #finanzenDebitorenTable tbody,
    #bankTxTable, #bankTxTable tbody { display: block; width: 100%; }
    #finanzenFaelligkeitenTable tbody tr, #finanzenDebitorenTable tbody tr, #bankTxTable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 10px 12px;
        align-items: center;
    }
    #finanzenFaelligkeitenTable tbody td, #finanzenDebitorenTable tbody td, #bankTxTable tbody td { display: none; padding: 0; border: none; }

    /* Zahlungsziele Kreditoren: 1 Beschreibung, 2 Kategorie, 3 Betrag, 4 Fällig am */
    #finanzenFaelligkeitenTable tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; }
    #finanzenFaelligkeitenTable tbody td:nth-child(3) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
    #finanzenFaelligkeitenTable tbody td:nth-child(2) { display: block; grid-column: 1; grid-row: 2; color: #6b7280; font-size: 12px; }
    #finanzenFaelligkeitenTable tbody td:nth-child(4) { display: block; grid-column: 2; grid-row: 2; text-align: right; color: #6b7280; font-size: 12px; }

    /* Offene Debitoren: 1 Bestellung, 2 Kunde, 3 Betrag, 4 Rechnungsdatum, 5 Mahnung */
    #finanzenDebitorenTable tbody td:nth-child(2) { display: block; grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; }
    #finanzenDebitorenTable tbody td:nth-child(3) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
    #finanzenDebitorenTable tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 2; color: #6b7280; font-size: 12px; }
    #finanzenDebitorenTable tbody td:nth-child(4) { display: block; grid-column: 2; grid-row: 2; text-align: right; color: #6b7280; font-size: 12px; }
    #finanzenDebitorenTable tbody td:nth-child(5) { display: block; grid-column: 1 / -1; grid-row: 3; padding-top: 2px; }

    /* Bank-Buchungen: 1 Datum, 2 Gegenpartei, 3 Verwendungszweck, 4 Betrag, 5 Beleg */
    #bankTxTable tbody td:nth-child(2) { display: block; grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #bankTxTable tbody td:nth-child(4) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
    #bankTxTable tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 2; color: #6b7280; font-size: 12px; white-space: nowrap; }
    #bankTxTable tbody td:nth-child(5) { display: block; grid-column: 2; grid-row: 2; text-align: right; font-size: 12px; }
    #bankTxTable tbody td:nth-child(3) { display: block; grid-column: 1 / -1; grid-row: 3; color: #9ca3af; font-size: 12px; padding-top: 2px; max-width: 100% !important; white-space: normal !important; }
    #bankTxTable tbody tr { border-bottom: 1px solid #e5e7eb; }

    /* ---------------- Debitoren / Kreditoren: open-items tables as cards ----------------
       Same reasoning again: these lists exist to show an outstanding
       amount at a glance, and horizontal scroll pushed Betrag off-screen.
       Column indexes follow the theads in renderDebitoren()/renderKreditoren(). */
    #debitorenOposTable, #debitorenEingaengeTable, #kreditorenOposTable { white-space: normal; overflow-x: visible; }
    #debitorenOposTable thead, #debitorenEingaengeTable thead, #kreditorenOposTable thead { display: none; }
    #debitorenOposTable, #debitorenOposTable tbody,
    #debitorenEingaengeTable, #debitorenEingaengeTable tbody,
    #kreditorenOposTable, #kreditorenOposTable tbody { display: block; width: 100%; }
    #debitorenOposTable tbody tr, #debitorenEingaengeTable tbody tr, #kreditorenOposTable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 10px 12px;
        align-items: center;
    }
    #debitorenOposTable tbody td, #debitorenEingaengeTable tbody td, #kreditorenOposTable tbody td { display: none; padding: 0; border: none; }

    /* Debitoren – Offene Posten: 1 Bestellung, 2 Kunde, 3 Kanal, 4 Rechnung, 5 Fällig, 6 Betrag, 7 Mahnung */
    #debitorenOposTable tbody td:nth-child(2) { display: block; grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #debitorenOposTable tbody td:nth-child(6) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
    #debitorenOposTable tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 2; color: #6b7280; font-size: 12px; }
    #debitorenOposTable tbody td:nth-child(5) { display: block; grid-column: 2; grid-row: 2; text-align: right; }
    #debitorenOposTable tbody td:nth-child(7) { display: block; grid-column: 1 / -1; grid-row: 3; padding-top: 2px; }

    /* Debitoren – Letzte Zahlungseingänge: 1 Gebucht, 2 Bestellung, 3 Kunde, 4 Betrag, 5 Art · von */
    #debitorenEingaengeTable tbody td:nth-child(3) { display: block; grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; }
    #debitorenEingaengeTable tbody td:nth-child(4) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
    #debitorenEingaengeTable tbody td:nth-child(2) { display: block; grid-column: 1; grid-row: 2; color: #6b7280; font-size: 12px; }
    #debitorenEingaengeTable tbody td:nth-child(1) { display: block; grid-column: 2; grid-row: 2; text-align: right; color: #6b7280; font-size: 12px; white-space: nowrap; }
    #debitorenEingaengeTable tbody td:nth-child(5) { display: block; grid-column: 1 / -1; grid-row: 3; color: #9ca3af; font-size: 12px; }

    /* Kreditoren – Zahlungsziele: 1 Posten, 2 Kategorie, 3 RE-Nr., 4 Fällig, 5 Betrag */
    #kreditorenOposTable tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #kreditorenOposTable tbody td:nth-child(5) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
    #kreditorenOposTable tbody td:nth-child(2) { display: block; grid-column: 1; grid-row: 2; color: #6b7280; font-size: 12px; }
    #kreditorenOposTable tbody td:nth-child(4) { display: block; grid-column: 2; grid-row: 2; text-align: right; }

    /* Kreditoren-Buch (async-reloaded 9-column ledger, loadKreditorenBuch()):
       Brutto amount + Status were scrolled off-screen (the whole point of
       the list). Column indexes: 1 Wer, 2 Was, 3 RE-Nr., 4 Datum, 5 Netto,
       6 USt, 7 Brutto, 8 Zahlungsziel, 9 Status. */
    #kreditorenBuchTable { white-space: normal; overflow-x: visible; }
    #kreditorenBuchTable thead { display: none; }
    #kreditorenBuchTable, #kreditorenBuchTable tbody { display: block; width: 100%; }
    #kreditorenBuchTable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
        padding: 10px 12px;
        align-items: center;
    }
    #kreditorenBuchTable tbody td { display: none; padding: 0; border: none; max-width: none !important; }
    #kreditorenBuchTable tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #kreditorenBuchTable tbody td:nth-child(7) { display: block; grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
    #kreditorenBuchTable tbody td:nth-child(2) { display: block; grid-column: 1 / -1; grid-row: 2; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #kreditorenBuchTable tbody td:nth-child(4) { display: block; grid-column: 1; grid-row: 3; color: #9ca3af; white-space: nowrap; }
    #kreditorenBuchTable tbody td:nth-child(9) { display: block; grid-column: 2; grid-row: 3; text-align: right; white-space: nowrap; }

    /* ---------------- Artikel list as cards ----------------
       #artikelTable has 12 columns (checkbox, Artikel#, Bezeichnung,
       Bestand, Ø/Mon, Reichweite, Reicht bis, VK, BW EK, BW VK, Marge,
       Aktion) — horizontal scroll hid Bestand/VK, the two numbers you
       actually look up an article for. Same card treatment as #ordersTable.
       Column indexes follow the thead in renderArtikel()/renderArtikelRow(). */
    #artikelTable { white-space: normal; overflow-x: visible; }
    #artikelTable thead, #artikelTable tfoot { display: none; }
    #artikelTable, #artikelTable tbody { display: block; width: 100%; }
    #artikelTable tbody tr {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) auto;
        gap: 3px 8px;
        padding: 10px 4px;
        border-bottom: 1px solid #e5e7eb;
        align-items: start;
    }
    #artikelTable tbody td { display: none; padding: 0; border: none; }
    #artikelTable tbody td:nth-child(1) { display: block; grid-column: 1; grid-row: 1 / span 3; align-self: center; }
    #artikelTable tbody td:nth-child(3) {
        display: block; grid-column: 2; grid-row: 1;
        font-weight: 600; font-size: 13px;
        white-space: normal !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important;
    }
    #artikelTable tbody td:nth-child(4) { display: block; grid-column: 3; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
    #artikelTable tbody td:nth-child(2) { display: block; grid-column: 2; grid-row: 2; color: #6b7280; font-size: 12px; }
    #artikelTable tbody td:nth-child(8) { display: block; grid-column: 3; grid-row: 2; text-align: right; color: #374151; font-size: 12px; }
    #artikelTable tbody td:nth-child(6) { display: block; grid-column: 2; grid-row: 3; text-align: left; padding-top: 2px; }
    #artikelTable tbody td:nth-child(12) { display: block; grid-column: 3; grid-row: 3; text-align: right; }

    /* ---------------- CRM header ----------------
       Icon + title + campaign-select are a nested flex row with an inline
       min-width:250px on the <select>; that alone doesn't fit next to the
       icon/title on a phone and doesn't wrap (only the outer row does),
       so it pushed the page ~175px past the viewport edge. */
    #crmHeaderLeft { flex-wrap: wrap; row-gap: 8px; }
    #crmKampagneSelect { width: 100% !important; min-width: 0 !important; }

    /* ---------------- Analytics (GA4) nav pills ----------------
       .ga4-nav is a `display:flex; gap:4px` strip of 5 text+icon buttons
       (Übersicht/Traffic-Quellen/Seiten/Länder/Geräte) with no wrap --
       it pushed the page ~120px past the viewport edge. Make it a
       horizontally swipeable tab strip instead (same idea as the mail
       client panes) rather than wrapping the pills into a ragged block. */
    .ga4-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .ga4-nav .ga4-nav-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* .ga4-funnel is 4 flex:1 steps (Nutzer/Sessions/Conversions/Umsatz) in
       one row with overflow:hidden -- on a phone the 4th step's value gets
       silently clipped (no scrollbar, no wrap) instead of just looking
       tight. 2x2 grid instead, and drop the connector arrows (they're
       drawn to point at the next step in a single row, meaningless once
       wrapped). */
    .ga4-funnel { flex-wrap: wrap; }
    .ga4-funnel-step { flex: 1 1 50%; min-width: 50%; padding: 14px 10px; box-sizing: border-box; }
    .ga4-funnel-step::after { display: none !important; }

    /* ---------------- Google Ads nav (ads-nav, ads.js) ----------------
       Reported by Fabian as "unreadable" on mobile. Root causes:
       1) .ads-nav is a no-wrap flex row of ~9 items (some with dropdown
          groups) -- pushed the page ~690px past the viewport edge.
       2) .kpi-grid is a hard-coded 6-column grid (only breakpoint is
          max-width:1200px -> 3 columns) with no phone handling at all --
          KPI cards got clipped/unreadable well before that breakpoint.
       3) The "Suchbegriffe / Analyse / Ausschlüsse" dropdown groups only
          open on CSS :hover, which never fires on touch -- 12 sub-views
          were completely unreachable on mobile (see ads.js
          initAdsNavTouchDropdowns() for the click-toggle fallback that
          adds/removes the .open class this CSS reacts to). */
    .ads-nav { flex-wrap: wrap; row-gap: 6px; }
    .ads-nav-btn { white-space: nowrap; }
    .ads-nav-group.open {
        flex-basis: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .ads-nav-group.open .ads-nav-group-trigger { width: 100%; justify-content: space-between; }
    .ads-nav-group.open .ads-nav-menu {
        position: static;
        display: flex !important;
        width: 100%;
        max-width: none;
        min-width: 0;
        box-shadow: none;
        margin-top: 4px;
        box-sizing: border-box;
    }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .camp-detail-overlay { width: 100% !important; padding: 16px !important; }
    /* Several "add rule" / filter rows are hand-rolled `display:flex;gap:8px`
       with 2-3 inputs/selects each capped at max-width:200-300px + a button
       -- combined that's 550-780px, no wrap. Stack them; hook added in
       ads.js next to each row (adsLoadAutoExclude/adsLoadProtected/
       adsLoadSearchTerms/adsLoadWasted). */
    .ads-form-row { flex-wrap: wrap; }
    .ads-form-row input, .ads-form-row select { max-width: 100% !important; flex: 1 1 100% !important; }
    .ads-form-row button, .ads-form-row label, .ads-form-row span { flex: 1 1 auto; }
    /* Diagnose view: Markt-/Channel-Performance cards side-by-side via a
       plain inline `grid-template-columns:1fr 1fr` -- the 2nd card ended up
       positioned starting past x=380, almost entirely off the 390px
       viewport (its own table was correctly scroll-contained, just placed
       off-screen). */
    .ads-2col-grid { grid-template-columns: minmax(0, 1fr) !important; }

    /* ---------------- Toolbars / action bars ----------------
       Tailwind "flex justify-between" rows (title+button, search+filters, …)
       are used all over the app. On narrow screens they must wrap instead
       of squeezing / overlapping their children. Only activates when
       content doesn't fit, so it's a no-op wherever it already fits. */
    .justify-between {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* ---------------- Support / Mail client ----------------
       Apple-Mail-style 3-column layout (folders | list | detail) is built
       with fixed inline widths (220px / 350px / flex) plus a negative
       margin sized for the desktop 24px padding. On a phone this both
       squeezes all 3 columns unreadable AND bleeds past the viewport edge
       (the source of the horizontal page scroll). Keep the row layout
       (each pane already stretches to full height and manages its own
       internal scroll) but make each pane full-width and let the user
       swipe between folders -> list -> detail. */
    .mail-client {
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        border-radius: 0 !important;
    }
    .mail-sidebar, .mail-list, .mail-detail {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex: none !important;
        scroll-snap-align: start;
    }
    /* Compose view (rendered inside .mail-detail): template picker (280px)
       + editor form is itself a 2-column flex row that no longer fits once
       .mail-detail is squeezed to 100vw. Stack it. */
    .compose-view-layout { flex-direction: column !important; height: auto !important; }
    .compose-template-panel { width: 100% !important; max-height: 220px; }

    /* ---------------- Modals ---------------- */
    .modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* ---------------- Forms ---------------- */
    input[type="text"], input[type="email"], input[type="number"], input[type="password"],
    input[type="search"], input[type="date"], input[type="tel"], textarea, select {
        max-width: 100%;
        font-size: 16px; /* avoid iOS auto-zoom on focus */
    }

    /* ---------------- Touch targets ---------------- */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    .filter-btn, .tab { min-height: 40px; display: inline-flex; align-items: center; }

    /* ---------------- Login screen ---------------- */
    #loginScreen > div {
        width: 90% !important;
        max-width: 360px;
        padding: 32px 24px !important;
    }
}

@media (max-width: 480px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #pageContent.p-8,
    .p-8 { padding: 10px !important; }
}