/* ============================================================================
   mobile-base.css — the mobile floor for pages OUTSIDE the rep-dashboard stack
   ============================================================================
   The rep-dashboard pages get their mobile behaviour from rep-dashboard.css.
   The rest of the platform — the six pages built on the .app-header /
   .app-header-right chrome (My AR, My Holds, Holds Report, Open Orders,
   Inventory Tower, Inv Forecast) plus anything added later — had no mobile
   layout at all. Measured 2026-08-27 at 375px: My AR overflowed 110px and My
   Holds 116px, both because .app-header is a non-wrapping flex row, and My
   Holds carried 18 inputs that trigger iOS zoom-on-focus.

   This file is the shared floor for those pages. It is deliberately SMALL and
   generic — header wrapping, input sizing, tap targets. Anything page-specific
   belongs in that page's own stylesheet.

   To adopt it on another page, add one line to its <head>:
       <link rel="stylesheet" href="/static/css/mobile-base.css?v=1">
   Adopted so far: my-ar-report, my-holds-report, hub.
   Not yet adopted (they share the same header and would benefit):
   holds-report, open-orders, inventory-tower, inv-forecast — those are
   exec/ops surfaces and have not been audited on mobile, so they are left
   alone rather than changed blind.
   ============================================================================ */

@media (max-width: 820px) {

    /* ── Header ──────────────────────────────────────────────────────────
       .app-header is `display:flex; justify-content:space-between` with no
       wrap, so on a phone its right-hand cluster (user name + Logout) runs
       past the viewport and scrolls the whole page sideways. Let both halves
       wrap and neither refuse to shrink. */
    .app-header {
        flex-wrap: wrap;
        padding-left: 12px;
        padding-right: 12px;
        row-gap: 8px;
    }
    .app-header-left,
    .app-header-right {
        flex-wrap: wrap;
        min-width: 0;
        flex-shrink: 1;
    }
    .app-header h1 { font-size: 16px; }
    /* The tagline is explanatory, not load-bearing, and costs a whole row. */
    .sub-tagline { display: none; }

    /* ── iOS zoom-on-focus ───────────────────────────────────────────────
       Safari zooms the page when a text-entry control under 16px takes focus
       and does not zoom back out. Same rule and reasoning as rep-dashboard.css
       — !important because most of these controls are styled by id or class,
       which outrank an element selector. Checkboxes, radios and buttons are
       excluded: they do not trigger zoom. */
    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="time"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* ── Tap targets ─────────────────────────────────────────────────────
       Buttons and selects only. Inline links inside clickable rows are left
       alone deliberately — on the rep pages the equivalent "problem" was 147
       anchors inside 75px clickable cells, where the row is already the target
       and inflating the text would only cost density. */
    button,
    select,
    .hub-crumb,
    .app-link {
        min-height: 44px;
    }
    button,
    .hub-crumb,
    .app-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* A button whose whole label is one glyph needs width too, or 44px of
       height just makes a tall sliver. */
    button { min-width: 44px; }

    /* ── Filter blocks ───────────────────────────────────────────────────
       .filter-grid is a wrapping flex row, so it already reflows — the problem
       on a phone is sheer height (My Holds carries 14 filters), which the
       page's own collapse handles. This just reclaims the horizontal padding
       and stops a long <select> forcing the row wider than the screen. */
    /* Card headers pack a title plus two or three action buttons into one
       non-wrapping flex row, which runs past a phone screen and clips the
       last button (Export on My Holds). The inner row carries an inline
       `display:flex` but no flex-wrap, so this still wins. */
    .card-head { flex-wrap: wrap; row-gap: 8px; }
    .card-head > div { flex-wrap: wrap; }

    .filters { padding-left: 12px; padding-right: 12px; }
    .filters select,
    .filters input { max-width: 100%; }
}