/* ============================================================================
   phone.css — narrow-screen layout for PlantIQ.

   EVERY rule in this file is prefixed with `.phone`, a class added to <html>
   by the gate in index.html when the DEVICE's short side is <= 550px. The gate
   reads screen.width/height, not the window, so dragging a desktop browser
   narrow can never add the class and nothing here can ever apply to a desktop
   or a shop-floor kiosk. This file loads everywhere and is inert everywhere
   but a phone. Do not add an unprefixed rule.

   The phone keeps the kiosk's fixed-viewport model — body does not scroll, the
   inner panes do. This file's job is to make content REFLOW to the width, not
   to make the page pannable.

   Sections:
     A1   canvas
     A2   header
     A2b  splash tiles
     A3   modals
     A4   grids and wide tables
     A5   Open Orders Trend strip
     A6   Active WO's department picker
     A7   Manager Hub sub-views
     A8   Task Hub board

   A4 collapses every grid-cols-N to two columns at specificity (0,3,0), and
   two sections need a different count. They escape it in DIFFERENT ways, so
   copy the right one: A2b sits BEFORE A4 and is spared only by A4's explicit
   :not(.splash-tiles); A5 sits AFTER A4 and wins on source order plus extra
   weight. Writing a new override without doing one or the other leaves a rule
   that looks correct and does nothing.
   ========================================================================= */


/* ── A1 · canvas ──────────────────────────────────────────────────────────
   100dvh, not Tailwind's h-screen (100vh): on a phone 100vh is the LARGE
   viewport, measured as if the URL bar were hidden, so the bottom of the app
   sits behind the browser chrome and cannot be reached. dvh tracks the bar as
   it shows and hides. The plain vh line is the fallback for anything
   predating dvh. */
.phone body,
.phone #app { height: 100vh; height: 100dvh; }
.phone body { -webkit-text-size-adjust: 100%; }


/* ── A2 · header ──────────────────────────────────────────────────────────
   Ten controls in one non-wrapping row, sized for a 1080p kiosk. On a phone
   it is tightened, the least useful controls are dropped, and wrap is left on
   as a safety valve so a long role name can never push a button off-screen.

   The hooks (.hdr-*) are plain marker classes added in partials/header.html.
   They carry NO desktop styling — nothing in this file or anywhere else
   targets them without the .phone prefix — so adding them changed nothing on
   the kiosk. */
.phone header { padding: 0.375rem 0.5rem; flex-wrap: nowrap; gap: 0.25rem; }
.phone header > div { gap: 0.25rem; flex-wrap: nowrap; min-width: 0; }

/* Icon buttons: the kiosk's p-3 + w-8 h-8 is a finger target on a 24" screen
   and a third of the width on a phone. They must not shrink — the search box
   is the only flexible item, so it absorbs whatever is left over and the row
   never needs a second line. */
.phone header button { padding: 0.375rem; flex-shrink: 0; }
.phone header button svg { width: 1.125rem; height: 1.125rem; }

/* Search is the reason to open this app on a phone, so it survives and takes
   the leftover width. min-width:0 is required or the flex item refuses to
   shrink below the input's intrinsic size and forces a sideways scroll. */
.phone .hdr-search { flex: 1 1 0; min-width: 2.5rem; }
.phone .hdr-search input { width: 100%; min-width: 0; }
.phone .hdr-search input:focus { width: 100%; }

/* Dropped on a phone: the clock (the OS shows one), the "Syncing..." caption
   next to its spinner, the button word-labels whose icons already say it, and
   the quick-compose pencil — the mail icon opens Messages, where composing is
   one tap away, so the pencil is a duplicate route that costs a slot in a row
   that has to stay on ONE line. */
.phone .hdr-compose,
.phone .hdr-clock,
.phone .hdr-sync-label,
.phone .hdr-undo-label,
.phone .hdr-signout-label { display: none; }

/* Undo keeps its icon but stops reserving room for a description. */
.phone .hdr-undo { padding: 0.5rem; gap: 0; }


/* ── A2b · splash tiles ───────────────────────────────────────────────────
   Sized for a kiosk: level 0 is a wrapping flex row of w-80 (320px) tiles
   with w-14 icons and text-4xl labels, so exactly ONE tile fits across a
   phone; levels 1 and 2 are grids of min-h-[13rem] p-8 tiles. Every one of
   them is forced to a 3-up grid of small tiles here.

   display:grid on the container handles level 0 and levels 1-2 with one rule
   — the flex row and the grids collapse to the same shape — which is why the
   .splash-tiles hook is on all six containers rather than a per-level class. */
.phone .splash-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
/* DESCENDANT, not child. The two shipping tiles in the Production sub-menu
   are nested inside a `col-span-2 flex flex-col` wrapper, so a `> button`
   selector misses them and they keep their kiosk min-h-[11rem] and p-8 —
   which is exactly why they rendered as two huge blocks beside tiles a third
   their size. Every button inside a tile grid IS a tile, at any depth. */
.phone .splash-tiles button {
    width: auto;          /* kills level 0's w-80 */
    min-height: 0;        /* kills min-h-[13rem] and the shipping min-h-[11rem] */
    padding: 0.625rem 0.25rem;
    gap: 0.25rem;
    border-radius: 0.75rem;
}
.phone .splash-tiles button svg { width: 1.5rem; height: 1.5rem; }
.phone .splash-tiles button img { height: 1.75rem; }

/* Flatten that wrapper so its two buttons become grid items of the tile grid
   itself and line up with everything else. display:contents removes only the
   box, and the wrapper carries no background or border to lose. */
.phone .splash-tiles .col-span-2 { display: contents; }

/* "Thorntown, IN" is marked whitespace-nowrap for the kiosk's two-line label.
   At a third of a phone's width that forces the tile wider than its column. */
.phone .splash-tiles .whitespace-nowrap { white-space: normal; }

/* Labels only. :not(.absolute) spares the count badges, which are positioned
   pills that already carry their own text-xs. */
.phone .splash-tiles button span:not(.absolute) {
    font-size: 0.6875rem;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;   /* "CUSTOMER SERVICE" must not widen the tile */
}

/* The level-0 WRAPPER (the .origin-center parent, not the tile row itself)
   carries scale-90 / scale-[0.97] to fit a kiosk screen. Compounding that
   with tiles already shrunk here just blurs the text. */
.phone .origin-center { transform: none; }

.phone .splash-head h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.phone .splash-head p  { font-size: 0.8125rem; }


/* ── A3 · modals ──────────────────────────────────────────────────────────
   All 57 modals share one shape: a `fixed inset-0 ... flex items-center
   justify-center` backdrop wrapping a single `max-w-*` panel. On a phone a
   centred panel with a max-width wastes the screen and puts its own scroll
   inside a letterboxed box. These rules turn every one of them into a
   full-screen sheet — one rule pair instead of 57 edits.

   Scoped to `.flex` so it only catches the centring backdrops. Fixed overlays
   that are NOT modals (the dm-alert flash, the task-return pill) do not use
   items-center/justify-center and are excluded by the :not() below. */
.phone .fixed.inset-0.items-center.justify-center {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
.phone .fixed.inset-0.items-center.justify-center > *:not(.pointer-events-none) {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    /* Safety net for the 21 of 55 panels that are NOT already flex flex-col
       and carry no inner scroll region — without this their content would run
       past the bottom of a now-full-height sheet with no way to reach it. A
       panel that already scrolls internally never triggers this, because its
       content fits. */
    overflow-y: auto;
}

/* A sheet's body scrolls; its header and footer stay put. Most panels already
   nest a scroll region, so this only catches the ones that relied on the
   panel itself being short enough to fit. */
.phone .fixed.inset-0.items-center.justify-center > * > .overflow-y-auto { flex: 1 1 auto; }


/* ── A4 · grids and wide tables ───────────────────────────────────────────
   Unprefixed grid-cols-N was written against a kiosk width. Anything from 3
   columns up is collapsed; 2 stays, since a 2-up tile grid reads fine on a
   phone and the splash already declares grid-cols-2 as its own base.

   The responsive prefixes already in the markup (lg:grid-cols-5 and friends)
   never match at phone width, so they cannot fight these rules.

   :not(.splash-tiles) is load-bearing, not defensive: A2b sets the splash to
   THREE columns at the same specificity as these selectors, and this block
   comes later in the file, so without the exclusion source order would quietly
   win and drag every splash back to 2-up. */
.phone .grid-cols-3:not(.splash-tiles),
.phone .grid-cols-4:not(.splash-tiles),
.phone .grid-cols-5:not(.splash-tiles),
.phone .grid-cols-6:not(.splash-tiles),
.phone .grid-cols-7:not(.splash-tiles),
.phone .grid-cols-8:not(.splash-tiles) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.phone .grid.gap-6 { gap: 0.75rem; }

/* Wide row grids (the Open Orders board declares min-w-[1800px]) keep their
   width and scroll sideways INSIDE their existing overflow-x-auto container.
   That is a small local scroll, not the whole app being panned — deliberate:
   an 18-column shipping board cannot be made to read at 390px, and squashing
   it would lose columns silently. Momentum scrolling makes it usable. */
.phone .overflow-x-auto { -webkit-overflow-scrolling: touch; }


/* ── A5 · Open Orders Trend strip (splash) ────────────────────────────────
   Four p-4 cards with text-4xl numbers, written as a full-width strip under
   a kiosk's tile grid. A4 collapses its grid-cols-4 to two columns, which is
   what turned it into the tall 2x2 block that pushed the guide buttons and
   the version line off the bottom of a phone.

   Restored to one row of four, at a size that reads as a status strip rather
   than the headline of the screen.

   MUST come after A4: `.phone .oo-trend .grid` and A4's
   `.phone .grid-cols-4:not(.splash-tiles)` are BOTH specificity (0,3,0) —
   :not() contributes its argument's weight — so source order is the only
   thing deciding the column count. The .grid-cols-4 in the selector below
   lifts it to (0,4,0) as well, belt and braces. */
.phone .oo-trend .grid.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
}
.phone .oo-trend .grid > div {
    padding: 0.375rem 0.125rem;
    border-radius: 0.5rem;
}
.phone .oo-trend .text-4xl { font-size: 1.0625rem; line-height: 1.1; }

/* Caption lines are already text-[10px]; the running-average sub-line ("over
   27 days") is the only one that wraps at a quarter width, so it goes. */
.phone .oo-trend .grid > div > div:nth-child(3) { display: none; }

/* Header: keep the title and the month, drop the explanatory clause. It is a
   full sentence of italics that wraps to three lines on a phone to explain a
   number that is not interactive. */
.phone .oo-trend-note { display: none; }
.phone .oo-trend > div:first-child {
    gap: 0.375rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}


/* ── A6 · Active WO's department picker ───────────────────────────────────
   The four department tiles (Fabrication, Welding, Trac Vac, Tru Cut) are the
   most-tapped control in the app on a shop phone, so they get TWO across
   instead of A2b's three — which both enlarges them and puts them in the
   order asked for.

   The column count IS the ordering fix. DOM order is Fab, Weld, Trac Vac,
   Tru Cut; at three across that reads Fab | Weld | Trac Vac, then Tru Cut
   alone on a second row. At two across it becomes

       Fabrication   |  Welding
       Trac Vac      |  Tru Cut

   so Trac Vac sits directly under Welding and beside Tru Cut, with no change
   to the markup order — which matters, because that order is shared with the
   kiosk layout.

   Must sit after A2b: `.phone .splash-tiles-dept` and `.phone .splash-tiles`
   are both specificity (0,2,0), so source order is what makes this win. */
.phone .splash-tiles-dept {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}
.phone .splash-tiles-dept button { padding: 1rem 0.5rem; gap: 0.375rem; }
.phone .splash-tiles-dept button span:not(.absolute) { font-size: 0.9375rem; }
.phone .splash-tiles-dept button img { height: 2.25rem; }

/* Quick Actions below it keeps A2b's three-up: those are secondary routes and
   the picker is what the screen is for. */


/* ── A7 · Manager Hub sub-views ───────────────────────────────────────────
   These four screens are read on a phone but were laid out as wide tables and
   side-by-side columns, so each fails differently. Fixed per screen rather
   than with one blunt rule, because the causes are not the same. */

/* Priorities — the row is `flex items-center` with three columns, the last of
   which is shrink-0 and holds five 40px priority buttons, a note button and an
   operator <select>. shrink-0 means it never yields, so the row ran past the
   right edge and the WO number sat under the status pill. Stacked, the three
   parts each get the full width and nothing has to overlap.

   `> *` beats Tailwind's w-12 / items-end at (0,2,0) vs (0,1,0), so no
   !important is needed to undo them. */
.phone .mgr-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.625rem;
}
.phone .mgr-row > * {
    width: auto;
    align-items: flex-start;
}
/* The priority digit reads as a badge on its own line rather than a column. */
.phone .mgr-row > div:first-child { flex-direction: row; gap: 0.5rem; }

/* Delayed WOs — FOUR department columns side by side (flex gap-5, each
   flex-1). At phone width that is ~80px per column, which is why the screen
   looked empty: the content was there, compressed to nothing. Stacked, each
   department becomes a full-width section in the same order. */
.phone .mgr-cols { flex-direction: column; gap: 1rem; }

/* WO Problems — the layout is already a single column and readable; it is
   only sized for a kiosk. Scaled down, nothing restructured. */
.phone .mgr-compact { padding: 0.75rem; }
.phone .mgr-compact h2 { font-size: 1.25rem; }
.phone .mgr-compact .p-5 { padding: 0.625rem; }
.phone .mgr-compact .text-xl { font-size: 0.9375rem; }
.phone .mgr-compact .text-2xl { font-size: 1.125rem; }

/* Price adjustments — a six-column grid with named fr widths, so A4 never
   touched it (A4 only knows grid-cols-N). Three columns turns each part into
   TWO rows of three cells, which is the shape asked for; the header strip uses
   the same class so its labels stay aligned over the cells they name. */
.phone .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    row-gap: 0.125rem;
}


/* ── A8 · Task Hub board ──────────────────────────────────────────────────
   The board is already responsive: every cell carries "w-full 2xl:w-[...]"
   and the column-header strip is "hidden 2xl:flex", so below 2xl the row
   becomes a STACK of eight full-width cells, each with its own 2xl:hidden
   caption. That is correct on a tablet and far too tall on a phone — one task
   filled the screen.

   So the row becomes a two-column CARD here rather than a stack. Cells that
   hold a short control pair up; the ones that need the width span both:

       Linked to                          (span 2)
       Task title + badges                (span 2)
       Actions / status bubbles           (span 2, when shown)
       Next Action     |  Status
       Due Date        |  Notes
       Buttons                            (span 2)

   Six lines instead of eight, at roughly half the height.

   Per-cell hooks (.tc-*) rather than :nth-child, because the Actions cell is
   v-if="s.showActions" and disappears for whole sections — every positional
   selector after it would shift onto the wrong cell. */
.phone .tasks-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.5rem;
    padding: 0.5rem 0.625rem;
    align-items: start;
}
.phone .tasks-row > div { width: auto; min-width: 0; }

.phone .tc-link,
.phone .tc-task,
.phone .tc-actions,
.phone .tc-buttons { grid-column: 1 / -1; }

/* Controls are sized for a finger on a kiosk; at card scale they only need to
   be tappable, and the caption above each one already names it. */
.phone .tasks-row input,
.phone .tasks-row select,
.phone .tasks-row textarea {
    padding: 0.1875rem 0.375rem;
    font-size: 0.75rem;
}
.phone .tasks-row .tc-buttons button { padding: 0.25rem 0.5rem; font-size: 0.6875rem; }

/* The four status bubbles are a deliberate 4-across strip, not a data grid.
   A4 would fold them to 2x2, which reads as two unrelated pairs. Sits after
   A4 so it wins on source order, same as A5 and A6. */
.phone .tasks-bubbles { grid-template-columns: repeat(4, minmax(0, 1fr)); }