/* ═══════════════════════════════════════════════════════════════════════════
   SHOPNC TECH MOBILE — responsive layer for tech-view (body.tv-mode)
   ───────────────────────────────────────────────────────────────────────────
   Loaded after shopnc-tv-ds.css. All selectors scoped to `body.tv-mode` so
   nothing in this file fires on advisor-mode screens.

   COMMITMENT TIER (from product policy May 2026):
     - Phone (≤520px) in tech mode → MUST work for every tech action.
       Job open, parts crosscheck, mark fitted, flag, clock off, done & send.
     - Tablet (521-1024px) → tech mode still works (subset of phone fixes
       apply at any width where they don't hurt).
     - Desktop (>1024px) → existing layout untouched.
   Advisor surfaces on phone are a separate concern handled elsewhere.

   ARCHITECTURE:
     - Utility classes (.r-stack-phone, .r-grow-phone, .r-tap-phone) for
       common patterns. Markup opts in with class names; rules in this
       file do the layout.
     - Per-surface blocks (xc-* for parts crosscheck, tv-topbar-* for
       the action bar) handle surface-specific quirks.
     - !important is used DELIBERATELY on every override because the
       JS files inline-style everything. Without !important the inline
       wins. The body.tv-mode scope guarantees these only fire when we
       want them to, so the !important blast is contained.

   ADDING A NEW PHONE-RESPONSIVE TECH SURFACE:
     1. In the JS that builds the markup, add classes to the elements
        you want to control (e.g. class="r-stack-phone" on a flex row).
     2. If your surface needs unique behaviour, add a per-surface block
        below using the existing patterns as a template.
     3. Test on a phone (or DevTools mobile mode at 390px viewport).
     ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1 · TAP-TARGET BASELINES — apply at any tech-mode width
   ─────────────────────────────────────────────────────────────────────────
   Tech mode often runs on touch devices regardless of size. Even on a
   tablet, finger-friendly targets matter. The 44×44px guideline is from
   Apple's HIG and the same logic applies anywhere. We apply at all widths,
   not just phone — desktop tech-mode users won't notice slightly chunkier
   buttons but touch users will. */
body.tv-mode button,
body.tv-mode .btn,
body.tv-mode input[type="checkbox"] {
  min-height: 36px;  /* baseline; phone bumps this to 44px in section 3 */
}


/* ─────────────────────────────────────────────────────────────────────────
   2 · UTILITY CLASSES — phone-width behaviour, opt-in via classname
   ─────────────────────────────────────────────────────────────────────────
   Add these classes to markup to get common phone-friendly patterns.
   The CSS only activates at ≤520px so the class is harmless at wider
   widths. Use them as building blocks; for surface-specific quirks,
   define the surface in section 4 below. */
@media (max-width: 520px) {

  /* .r-stack-phone — flex container that wraps to vertical stacking.
     Common case: a row of inputs/buttons that should collapse to a
     column on phone. Apply to the flex container; children automatically
     wrap because of flex-wrap. */
  body.tv-mode .r-stack-phone {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Children of .r-stack-phone marked with .r-stack-phone-full take the
     full width of the line (forcing a wrap before/after them). Use on
     the name/title element of a row that should sit alone on top. */
  body.tv-mode .r-stack-phone-full {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  /* .r-grow-phone — an input that's fixed-width on desktop should expand
     to fill the row on phone. Bare bones; if you need a min-width you can
     stack it with an inline style or another class. */
  body.tv-mode .r-grow-phone {
    flex: 1 1 auto !important;
  }
  body.tv-mode .r-grow-phone input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* .r-tap-phone — bumps a button to a finger-friendly 44px tap target.
     Apply to buttons that were fine at 28-32px on tablet but feel cramped
     on phone. */
  body.tv-mode .r-tap-phone {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* .r-tap-phone-icon — for icon-only buttons (×, ✎) that should grow
     proportionally without becoming text-buttons. Wider tap target with
     larger glyph, same role. */
  body.tv-mode .r-tap-phone-icon {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 18px !important;
    padding: 8px 12px !important;
  }

  /* .r-hide-phone / .r-only-phone — visibility utilities for cases where
     desktop wants more info than phone (e.g. "& Send to Advisor" on
     desktop, just "Send" on phone). Apply to elements that should appear
     on one side or the other. */
  body.tv-mode .r-hide-phone { display: none !important; }
  body.tv-mode .r-only-phone { display: initial !important; }

  /* Modal body in tech mode at phone width — fill more of the viewport,
     tighter horizontal padding so input rows have more room to breathe.
     NOTE: max-height removed from .modal-body — having a max-height
     here creates a nested scroll container under the .modal's own
     scroll, and on iOS Safari that breaks touch event routing to a
     position:fixed footer (the "ADD DAMAGE button untappable" report
     in May 2026). The outer .modal handles scrolling; .modal-body
     just provides padding. */
  body.tv-mode .modal-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.tv-mode .modal {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  body.tv-mode .modal-content,
  body.tv-mode #modal-content-generic {
    max-width: 100vw !important;
    width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* By default .r-only-phone is hidden. Phone media query above flips it on. */
body.tv-mode .r-only-phone { display: none; }


/* ─────────────────────────────────────────────────────────────────────────
   3 · TECH TOPBAR — action button row
   ─────────────────────────────────────────────────────────────────────────
   The topbar in tech mode is rebuilt by shopnc-jobs.js with My Jobs /
   Add Parts / Flag / Clock Off / Done & Send to Advisor. On phone these
   wrap to multiple rows because each button is ~100px wide at the tablet
   sizing.
   At ≤520px: shrink the buttons to fit one row, abbreviate the long
   "Done & Send to Advisor" label to "Send" via CSS pseudo-content (the
   JS doesn't need to know about this).
   Migrated from shopnc-tv-ds.css May 2026 — that file is for tech-mode
   styling at any width, this file is for tech-mode responsive overrides. */
@media (max-width: 520px) {
  body.tv-mode .topbar button {
    font-size: 11px !important;
    padding: 6px 8px !important;
    letter-spacing: 0 !important;
    min-height: 40px;  /* touch target while staying single-row */
  }
  /* Done & Send to Advisor → just "Send" on phone. Targets the button
     by onclick prefix because the markup has no class. CSS-only swap;
     no JS changes needed when this rule is in place. */
  body.tv-mode .topbar button[onclick^="tvMarkJobComplete"],
  body.tv-mode .topbar button[data-act="tvMarkJobComplete"] {
    font-size: 0 !important;
    padding: 6px 10px !important;
  }
  body.tv-mode .topbar button[onclick^="tvMarkJobComplete"]::after,
  body.tv-mode .topbar button[data-act="tvMarkJobComplete"]::after {
    content: "Send";
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
  }
  body.tv-mode #tv-job-title {
    font-size: 14px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   4 · PARTS CROSSCHECK MODAL — opened via openPartsXcheck
   ─────────────────────────────────────────────────────────────────────────
   The crosscheck modal is the main phone-pain point. Each per-part row
   is a flex container with: name | qty input | partnum input | fitted
   button | × button. At phone width the inputs sat on top of the part
   name because flex couldn't shrink anything further.

   Migrated from the inline <style> block previously injected by
   shopnc-inspection.js inside the modal innerHTML. The JS still adds
   the classes (.xc-row, .xc-row-name, etc) so this file can target
   them; the inline <style> block was removed from the JS.

   At ≤520px:
     - Row wraps; name takes 100% width on top, controls below
     - Partnum input grows to fill the second row
     - Fitted button gets a 44px tap target with bigger font
     - × button grows from cramped 14px to 18px font, 44×44 target
     - Add-Part panel inputs each take their own row */
@media (max-width: 520px) {
  body.tv-mode .xc-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  body.tv-mode .xc-row-name {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  body.tv-mode .xc-row-ctl,
  body.tv-mode .xc-row-fitted-btn,
  body.tv-mode .xc-row-remove-btn {
    flex-shrink: 0;
  }
  body.tv-mode .xc-row-ctl-pn {
    flex: 1 1 auto !important;
  }
  body.tv-mode .xc-row-ctl-pn input {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.tv-mode .xc-row-fitted-btn {
    padding: 11px 14px !important;
    font-size: 11px !important;
    min-height: 44px !important;
  }
  body.tv-mode .xc-row-remove-btn {
    font-size: 18px !important;
    padding: 8px 12px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Add-Part panel inputs stack vertically. Description on its own row,
     PartNum on its own, Qty on its own, +Add button full-width. Keeps
     each input readable at phone scale. */
  body.tv-mode .xc-add-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  body.tv-mode .xc-add-row > div {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  body.tv-mode .xc-add-row > button {
    flex: 1 1 100% !important;
    margin-top: 4px;
    padding: 12px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   5 · JOB CARD BODY IN TECH MODE — parts/labour/consumables sections
   ─────────────────────────────────────────────────────────────────────────
   When tech opens a job, they see the same renderJobDetail markup the
   advisor sees, just with the tech-mode topbar swapped in. The parts/
   labour rows use the same 8-column grid layout from buildPartsRow which
   was widened to 84px for the PO column earlier. On phone that grid
   blows past viewport width.
   PHASE 1 SCOPE: tech can SCROLL the page on phone without horizontal
   scroll. They don't typically EDIT parts/labour on phone (the modal
   crosscheck is the tech's input surface). So this section keeps the
   row visible/readable but doesn't optimise for editing.
   If we hit a case where tech needs to edit inline, expand this section. */
@media (max-width: 520px) {
  /* Parts/labour/consumables section grids — let them overflow with
     horizontal scroll INSIDE the section rather than blowing out the
     whole page. Tech can swipe-scroll a row to see the totals column.
     This is a pragmatic stopgap until tech-mode gets a phone-optimised
     job-card body in a later phase. */
  body.tv-mode .jd-line-cols,
  body.tv-mode .jd-line {
    overflow-x: auto !important;
    min-width: 0 !important;
  }
  /* Section headers (the "01 LABOUR" / "03 PARTS" style bars) — let
     them break onto two lines if needed. */
  body.tv-mode .jd-section-header {
    flex-wrap: wrap !important;
  }
  /* The audit trail row gets very wide with tech names + timestamps.
     Allow horizontal scroll on it specifically. */
  body.tv-mode .audit-row {
    overflow-x: auto;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   6 · WORKBENCH OVERLAY — the techview job stack
   ─────────────────────────────────────────────────────────────────────────
   The workbench is the lobby tech sees on entering tech mode. It's a
   stack of cards (one per assigned job) with start/resume actions. Was
   designed for tablet portrait; on phone the cards work but cramped.
   This section can grow as we test on real devices. For now, ensure
   the overlay scrolls correctly and cards don't blow out viewport width. */
@media (max-width: 520px) {
  body.tv-mode #techview-overlay {
    overflow-y: auto;
  }
  body.tv-mode .tv-card,
  body.tv-mode .tv-job-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   7 · NOTES & PHOTOS — tech surfaces that need finger-friendly upload
   ─────────────────────────────────────────────────────────────────────────
   Photo and note actions (arrival photo, inspection findings photo,
   damage shot) — the upload trigger buttons should be touch-friendly
   on phone. */
@media (max-width: 520px) {
  body.tv-mode .photo-upload-btn,
  body.tv-mode .note-add-btn,
  body.tv-mode .damage-add-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   8 · INSPECTION ROWS — phone-only vertical stack
   ─────────────────────────────────────────────────────────────────────────
   On desktop / tablet, each inspection item lays out as:
     [ ●●●● traffic lights ] [ item name + tech note + photos ]
   That works because there's enough horizontal room for both columns.

   On a 390px phone, the four 44×44 traffic-light circles + their gaps
   eat ~200px of horizontal width. Combined with row padding, the item
   name + tech note column ends up with ~150px to itself — wide enough
   for "Coolant Level &..." with a wrap, but tight enough that any
   meaningful tech note ("Black and extremely degraded") truncates to
   "Black and extr…" and the tech can't see what they typed without
   focusing the field to scroll it.

   Phone fix: flip the per-item inner row from `flex-direction: row` to
   `flex-direction: column-reverse`. The traffic-light cluster (which
   comes first in the DOM) renders BELOW the name+notes block (which
   comes second). Visually: title first, then notes, then traffic
   lights underneath. Notes get full width to breathe — the tech can
   see their full text as they type.

   Source order stays unchanged so screen-reader / keyboard nav still
   hits the lights early; only visual order flips. align-items:stretch
   lets the inner blocks span the full row width.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  body.tv-mode .insp-row-flex {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* Traffic-light cluster stays as a horizontal row, just under the
     name now. Justify to flex-start so the lights line up on the left
     under the title rather than centring or stretching weirdly. */
  body.tv-mode .insp-row-flex .insp-tl {
    justify-content: flex-start !important;
  }
  /* Inspection tech-note input — bump to 16px so iOS doesn't auto-zoom
     when the tech taps into it to type their finding. */
  body.tv-mode .insp-row-flex input,
  body.tv-mode .insp-row-flex textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   9 · MODAL FOOTER — always-reachable action buttons in tech mode
   ─────────────────────────────────────────────────────────────────────────
   In tech mode on phone, the same modal-footer pattern that bit advisor-
   mode (Add Damage, Confirm Complete, Raise Flag, Cancel) is in play.
   The base fixes live in shopnc.css (unscoped, so they fire in both
   advisor and tech mode); this section is the tech-mode-only layer
   that:
     - bumps button heights another notch (48 → 52px) since techs may
       be wearing gloves or working with greasy hands;
     - reinforces the sticky footer with body.tv-mode-specific
       selectors so any inline-styled JS-injected modal still gets it;
     - adds a consistent right-aligned "primary action" colouring even
       when JS forgets the class.
   Reported May 2026: "I CANT PRESS THE ADD DAMAGE BUTTON ON MY PHONE".
   Followup May 2026: modal layout switched from bottom-sheet (docked at
   viewport bottom) to centered card; footer changed from position:fixed
   (viewport-anchored) to position:sticky (modal-anchored). Tap targets
   below are unaffected by that change. */
@media (max-width: 520px) {
  body.tv-mode .modal-overlay.open .modal .modal-footer {
    /* shopnc.css sets position:sticky; this just bumps the
       tech-mode tap target. */
    min-height: 60px !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.tv-mode .modal-overlay.open .modal .modal-footer > .btn,
  body.tv-mode .modal-overlay.open .modal .modal-footer > button {
    min-height: 52px !important;
    font-size: 14px !important;
    padding: 14px 16px !important;
    /* Make sure long labels like "Confirm Complete" don't get squished
       below readable size — let them wrap rather than shrink. */
    white-space: normal !important;
    line-height: 1.2 !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   10 · FLAG ADVISOR MODAL — collapse 3-col pickers to a vertical stack
   ─────────────────────────────────────────────────────────────────────────
   tvFlagAdvisor (techview.ts:1638) renders two 3-column button grids:
     - "What kind of flag?"        Come Look / Parts / FYI
     - "What are you doing next?"  Paused / Stay / Next Job
   At 390px viewport, each button has ~115px and the "Parts / Auth"
   label wraps awkwardly. The Done & Send and Raise Flag actions both
   live inside m-generic, so this rule is keyed off the picker classes
   instead of a modal id.

   Phone: switch to a single-column stack so each option gets the full
   row width. Tap target jumps from ~80px (cramped) to ~280px wide ×
   60px tall — much more reliable on a 6" screen with gloves. */
@media (max-width: 520px) {
  body.tv-mode #flag-category-row,
  body.tv-mode #flag-state-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.tv-mode .tv-flag-cat,
  body.tv-mode .tv-flag-state {
    min-height: 56px !important;
    padding: 14px 16px !important;
    text-align: left !important;
    /* Two-line states (Stay on Job / Keep working) get a flex layout
       so the sub-label sits beside the main label, not below it. */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  /* Reason textarea — bump min-height so the on-screen keyboard
     doesn't shrink the visible writing area to one line. iOS reduces
     viewport when the keyboard opens; a generous textarea stays
     usable. */
  body.tv-mode #flag-reason {
    min-height: 120px !important;
    font-size: 16px !important;  /* prevent iOS focus-zoom */
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   11 · SND DAMAGE MODAL — Add Damage post-confirm + arrival diagram path
   ─────────────────────────────────────────────────────────────────────────
   The m-snd modal (index.html:1861) holds the damage-type picker
   (Scratch / Dent / Cracked / Damaged / Severely Damaged) plus a note
   field and photo strip. Cards already styled in shopnc.css; this
   section adds tech-mode tweaks:
     - snd-cards stack vertically (already do via flex-direction:column
       on #snd-modal-opts in index.html) but reinforce min-height for
       reliable tap targets;
     - bump the photo "+" button to a finger-friendly 60px (it already
       IS 60px from base CSS; this is belt-and-braces in case any
       inline style overrides it);
     - notes input → 16px font so iOS doesn't auto-zoom on focus.

   The Add Damage button itself is in the modal-footer, which Section 9
   handles. */
@media (max-width: 520px) {
  body.tv-mode #m-snd .snd-card {
    min-height: 60px !important;
    padding: 14px 14px !important;
  }
  body.tv-mode #snd-modal-note {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  body.tv-mode #m-snd .snd-photo-add {
    width: 64px !important;
    height: 64px !important;
    font-size: 26px !important;
  }
  body.tv-mode #m-snd .snd-photo-thumb {
    width: 64px !important;
    height: 64px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   12 · DONE & SEND / CONFIRM-COMPLETE MODAL — m-generic via tvMarkJobComplete
   ─────────────────────────────────────────────────────────────────────────
   tvMarkJobComplete (techview.ts:1491) builds its body inside
   m-generic. The modal is short (a paragraph of "Send X to advisor?"
   text + a confirm button) so layout-wise it's fine — but the buttons
   in the footer were cramped at min-height:40px. Section 9 handles
   the footer; this section just ensures the modal body content has
   readable sizing.

   Same modal scaffold is reused by tvFlagAdvisor (handled in section
   10) and a number of other one-shot confirmation modals. The rules
   here are generic enough to help any of them. */
@media (max-width: 520px) {
  /* Body text — JS injects inline font-size on some lines. Force a
     readable minimum. */
  body.tv-mode .modal-body div[style*="font-size:14px"] {
    font-size: 15px !important;
  }
  body.tv-mode .modal-body div[style*="font-size:12px"] {
    font-size: 13px !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   13 · PARTS / LABOUR / CONS POPUPS — quick-add panels on phone
   ─────────────────────────────────────────────────────────────────────────
   These are the floating popups (#lp-popup, #pp-popup, #cp-popup,
   #st-modal, #np-popup) used to add a labour line, a part, a
   consumable, or do a quick search. They live OUTSIDE .modal-overlay
   — they're standalone fixed-position popups with their own z-index
   stack (1200) and their own overlay (#np-overlay at z-index 1100).

   Each desktop popup is 500-600px wide. On phone the base CSS
   constrains max-width to 96vw but the internal grid layout was
   designed for the wider canvas — input rows that should stack
   stay side-by-side and get cramped.

   Phone fix: bottom-sheet style (anchored to bottom of viewport,
   full width, content scrolls). Stack form inputs vertically. Tap
   targets on the form fields and action buttons. */
@media (max-width: 520px) {
  body.tv-mode #lp-popup,
  body.tv-mode #pp-popup,
  body.tv-mode #cp-popup,
  body.tv-mode #st-modal,
  body.tv-mode #np-popup {
    /* Anchor to the bottom of the viewport, full width. dvh so we
       respect Safari's collapsing URL bar. */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    border-radius: 16px 16px 0 0 !important;
    /* Re-state the show state's transform so the open-state CSS
       doesn't accidentally shift the popup off-screen. */
  }
  /* When opened, the JS sets transform:translate(-50%,-50%) scale(1).
     Override that for the phone bottom-sheet position. The popup
     show-states use .show / .opening class — match either. */
  body.tv-mode #lp-popup.show,
  body.tv-mode #pp-popup.show,
  body.tv-mode #cp-popup.show,
  body.tv-mode #st-modal.show,
  body.tv-mode #np-popup.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  /* Inputs inside these popups need the standard mobile treatment. */
  body.tv-mode #lp-popup input:not([type="checkbox"]):not([type="radio"]),
  body.tv-mode #pp-popup input:not([type="checkbox"]):not([type="radio"]),
  body.tv-mode #cp-popup input:not([type="checkbox"]):not([type="radio"]),
  body.tv-mode #st-modal input:not([type="checkbox"]):not([type="radio"]),
  body.tv-mode #np-popup input:not([type="checkbox"]):not([type="radio"]),
  body.tv-mode #lp-popup select,
  body.tv-mode #pp-popup select,
  body.tv-mode #cp-popup select,
  body.tv-mode #st-modal select,
  body.tv-mode #np-popup select,
  body.tv-mode #lp-popup textarea,
  body.tv-mode #pp-popup textarea,
  body.tv-mode #cp-popup textarea,
  body.tv-mode #st-modal textarea,
  body.tv-mode #np-popup textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  /* Action buttons at the bottom of each popup — JS renders these
     directly in the popup body (not in a .modal-footer). Hit-targets
     should match the modal-footer rule. */
  body.tv-mode #lp-popup button,
  body.tv-mode #pp-popup button,
  body.tv-mode #cp-popup button,
  body.tv-mode #st-modal button,
  body.tv-mode #np-popup button {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   14 · WORKBENCH CARDS — the lobby that lists tech's jobs
   ─────────────────────────────────────────────────────────────────────────
   #techview-overlay shows a stack of cards (one per assigned job)
   when the tech is in tech mode but not yet inside a specific job.
   This is the FIRST thing a tech sees on phone, so it needs to feel
   right.

   Section 6 above already handles overlay scroll + card max-width.
   This section adds:
     - card vertical padding for fingers
     - Start/Resume action button reliable hit target
     - title text size scaling (Archivo can render too large on small
       screens). */
@media (max-width: 520px) {
  body.tv-mode .tv-job-card {
    padding: 14px 14px !important;
    margin-bottom: 10px !important;
  }
  body.tv-mode .tv-job-card button,
  body.tv-mode .tv-job-card .btn {
    min-height: 48px !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   END · shopnc-tech-mobile.css
   ───────────────────────────────────────────────────────────────────────────
   STATUS CHECKLIST (update as surfaces are tested on phone):

   ✓ Parts crosscheck modal (Section 4)
   ✓ Tech topbar action row (Section 3)
   ✓ Inspection row stack on phone (Section 8) — May 2026
   ~ Workbench overlay (Section 6) — coarse; needs real-device testing
   ~ Workbench cards (Section 14) — wired, needs real-device testing
   ~ Job-card body in tech mode (Section 5) — stopgap, scrolls horizontally
   ~ Inspection drawer in tech mode — covered by section 8 + section 7 photos
   ~ Flag advisor modal (Section 10) — wired, needs real-device testing
   ~ Clock off / pause confirmation — uses crosscheck precheck (section 4) +
     no separate confirm modal; clean path
   ~ Done & Send confirmation modal (Sections 9 + 12) — wired, needs testing
   ~ Add Damage post-confirm picker (Sections 9 + 11) — wired, needs testing
     (this is the May 2026 "I CANT PRESS THE ADD DAMAGE BUTTON" report)
   ~ Arrival report photos flow (Sections 7 + 11) — wired, needs testing
   ~ Parts/Labour/Cons popups (Section 13) — wired, needs testing

   Bulk pass May 2026: every ☐ became ~ when its surface was wired in this
   file. Mark ~ → ✓ once verified working on a real phone. If a surface
   has issues, leave as ~ and add a focused fix block above.

   When you test a surface and it works: change ~ → ✓.
   When you test a surface and it has issues: add or refine the section
   above and keep it as ~ until polished. */

/* ============================================================
   6 · PARTS LINES — VERTICAL RESTACK ON PHONE
   ------------------------------------------------------------
   .part-collapsed is the per-part row. Child cells get their
   grid-area names from shopnc.css (@media max-width:768px,
   ~lines 1560-1567):
     pnum  = .part-coll-pnum      name = .part-coll-name
     qty   = input[data-pf="qty"] po   = .part-po-badge
     sell  = .part-coll-sell      total= [id^="lt-"]
     pencil= .jd-pencil           del  = .jd-del

   Two distinct phone layouts:

   (a) ADVISOR  body:not(.tv-mode)  - full two-row strip
         row 1:  Part#   Description (wraps) + stock badge
         row 2:  Qty   Sell   = Total   [PO] [edit] [del]

   (b) TECH     body.tv-mode        - read-only, four cells, with
       the Description on its OWN full-width row so the green stock
       badge can never overlap the wrapped part name:
         row 1:  Part#                         Qty   [PO]
         row 2:  Description (wraps) / badge stacked under it

   Tech mode hides sell/total/pencil/del in shopnc.css
   (display:none) so those cells are out of grid flow here. We beat
   shopnc.css's single-row tech grid by loading later at equal
   specificity, and beat buildPartsRow's inline grid-template-columns
   and inline name-text flex with !important. Desktop is untouched
   (everything is inside @media max-width:520px).
   ============================================================ */
@media (max-width: 520px) {
  /* Horizontal column header gets clipped on phone - hide it; the
     restacked rows below are self-describing. */
  .jd-parts-colhead { display: none !important; }

  /* ---------- (a) ADVISOR phone: two-row strip ---------- */
  body:not(.tv-mode) .part-collapsed {
    grid-template-columns: auto 1fr auto auto auto auto !important;
    grid-template-areas:
      "pnum name name name name name"
      "qty  sell total po   edit  del" !important;
    gap: 8px 8px !important;
    align-items: center !important;
    padding: 12px 14px !important;
  }
  body:not(.tv-mode) .part-collapsed .part-coll-pnum  { grid-area: pnum  !important; font-weight: 700 !important; }
  body:not(.tv-mode) .part-collapsed .part-coll-name  {
    grid-area: name !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* Let the description show in full instead of truncating. */
  body:not(.tv-mode) .part-collapsed .part-coll-name-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  body:not(.tv-mode) .part-collapsed .part-coll-qty   { grid-area: qty   !important; text-align: center !important; }
  body:not(.tv-mode) .part-collapsed .part-coll-sell  { grid-area: sell  !important; }
  body:not(.tv-mode) .part-collapsed .part-coll-total {
    grid-area: total !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  body:not(.tv-mode) .part-collapsed .part-po-badge   { grid-area: po   !important; justify-self: start !important; }
  body:not(.tv-mode) .part-collapsed .jd-pencil       { grid-area: edit !important; }
  body:not(.tv-mode) .part-collapsed .jd-del          { grid-area: del  !important; }

  /* ---------- (b) TECH phone (tv-mode): description on its own row ---------- */
  body.tv-mode .part-collapsed {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    grid-template-areas:
      "pnum .    qty po"
      "name name name name" !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  body.tv-mode .part-collapsed .part-coll-pnum {
    justify-self: start !important;
    font-weight: 700 !important;
  }
  body.tv-mode .part-collapsed input[data-pf="qty"] {
    justify-self: end !important;
    width: 56px !important;
    max-width: 56px !important;
    text-align: right !important;
  }
  body.tv-mode .part-collapsed .part-po-badge {
    justify-self: end !important;
  }
  /* Name cell becomes a vertical stack: text first, badge under it.
     A column flex makes badge/name overlap physically impossible. */
  body.tv-mode .part-collapsed .part-coll-name {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.tv-mode .part-collapsed .part-coll-name-text {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: var(--text, #2b2b2b) !important;
  }
  body.tv-mode .part-collapsed .part-coll-stock-badge {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
}