/* ChainLine POS — consolidated stylesheet.
 * Built 2026-06-12 from the six generation files, concatenated in their
 * exact previous <link> order so the cascade is byte-for-byte equivalent:
 *   pos-tokens.css -> pos-components.css -> pos-styles.css -> pos-styles-v2.css -> pos-styles-v3.css -> pos-styles-unify.css
 * Google-fonts @import moved to a <link> in index.html (an @import is
 * ignored unless it appears before all rules).
 */

/* ============================================================
 * SECTION: pos-tokens.css
 * ============================================================ */
/* ============================================================================
   CHAINLINE POS — v2 DESIGN TOKENS
   ----------------------------------------------------------------------------
   The single source of truth for every color, space, radius, shadow, type
   size and motion value in the app. No component rule may use a raw hex,
   px-soup, or !important — if a value isn't here, it doesn't exist.

   Themes:
     :root                          → LIGHT (pure-white surfaces, counter use)
     [data-theme="dark"]            → DARK  (explicit user choice)
     @media (prefers-color-scheme)  → DARK auto, unless user forced light

   Density:
     [data-density="compact"]       → tighter rows/controls (desktop counter)
     default                        → comfortable (mobile / bench)

   Naming:
     --surface-N   backgrounds, 0 = app canvas … 3 = highest inset/raised
     --ink-N       text, 1 = primary … 4 = faintest
     --line-N      borders, 1 = hairline … 3 = strong
     --status-X-*  the ONE status color system (chips, dots, calendar, rows)
   ========================================================================== */

:root {
  /* ----- Brand ----------------------------------------------------------- */
  /* ChainLine red. The ONLY accent. Used for: primary buttons, active nav,
     focus-adjacent emphasis. Never for decoration. */
  --accent:        #c8392c;
  --accent-hover:  #b53227;
  --accent-down:   #9e2b21;
  --accent-soft:   rgba(200, 57, 44, 0.08);  /* tinted fills, active-nav wash */
  --accent-line:   rgba(200, 57, 44, 0.35);
  --on-accent:     #ffffff;

  /* ----- Surfaces (LIGHT: pure white, calm warm-neutral chrome) ---------- */
  --surface-0: #f6f5f3;   /* app canvas behind cards            */
  --surface-1: #ffffff;   /* card / panel / table body          */
  --surface-2: #f1efec;   /* inset: table header, wells, code   */
  --surface-3: #e9e6e2;   /* pressed / deeper inset             */
  --scrim:     rgba(20, 18, 16, 0.44);  /* behind modals/sheets */

  /* ----- Ink ------------------------------------------------------------- */
  --ink-1: #191715;       /* primary text                        */
  --ink-2: #55514c;       /* secondary text                      */
  --ink-3: #8a857e;       /* labels, placeholders                */
  --ink-4: #b5b0a9;       /* faintest: disabled, watermarks      */
  --ink-inverse: #ffffff;

  /* ----- Lines ------------------------------------------------------------ */
  --line-1: #e8e5e1;      /* hairline dividers, table rows       */
  --line-2: #d9d5cf;      /* card borders, inputs                */
  --line-3: #b9b4ac;      /* strong: focused-adjacent, steppers  */

  /* ----- Focus ring (keyboard + scanner-field emphasis) ------------------- */
  --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);

  /* ----- Status system — ONE palette for every chip/dot/badge -------------
     WO:       estimate=gray  booked=purple  open=blue  inprogress=amber
               waiting/parts=orange  ready=green  done=gray  overdue=red
     PO:       draft=gray  sent=blue  partial=amber  received=green
     Payments: paid=green  partial=amber  refund=orange  void=red
     Stock:    ok=green  low=amber  out=red  ------------------------------- */
  --status-gray-fg:    #5d5953;
  --status-gray-bg:    rgba(93, 89, 83, 0.10);
  --status-gray-line:  rgba(93, 89, 83, 0.30);

  --status-blue-fg:    #2563ad;
  --status-blue-bg:    rgba(37, 99, 173, 0.10);
  --status-blue-line:  rgba(37, 99, 173, 0.32);

  --status-purple-fg:  #6d4fb6;
  --status-purple-bg:  rgba(109, 79, 182, 0.10);
  --status-purple-line:rgba(109, 79, 182, 0.32);

  --status-amber-fg:   #8f6400;
  --status-amber-bg:   rgba(176, 128, 16, 0.12);
  --status-amber-line: rgba(176, 128, 16, 0.34);

  --status-orange-fg:  #ad5314;
  --status-orange-bg:  rgba(192, 98, 31, 0.10);
  --status-orange-line:rgba(192, 98, 31, 0.32);

  --status-green-fg:   #1d7a44;
  --status-green-bg:   rgba(36, 138, 80, 0.10);
  --status-green-line: rgba(36, 138, 80, 0.32);

  --status-red-fg:     #bb3327;
  --status-red-bg:     rgba(200, 57, 44, 0.09);
  --status-red-line:   rgba(200, 57, 44, 0.32);

  /* Semantic money/delta colors (inline computed values: margins, deltas) */
  --pos: var(--status-green-fg);   /* gains, in-stock, reconciled         */
  --neg: var(--status-red-fg);     /* losses, shortfall, overdue          */

  /* ----- Shadows (light theme carries real elevation; dark uses lines) --- */
  --shadow-1: 0 1px 2px rgba(25, 23, 21, 0.06);
  --shadow-2: 0 2px 8px rgba(25, 23, 21, 0.08), 0 1px 2px rgba(25, 23, 21, 0.05);
  --shadow-3: 0 12px 32px rgba(25, 23, 21, 0.16), 0 2px 8px rgba(25, 23, 21, 0.08);
  --shadow-nav: 0 -4px 24px rgba(25, 23, 21, 0.10);  /* glass bottom nav    */

  /* ----- Glass (mobile bottom nav, command palette backdrop) ------------- */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-line: rgba(25, 23, 21, 0.10);

  /* ======================================================================
     NON-COLOR TOKENS — identical in both themes
     ====================================================================== */

  /* ----- Type ------------------------------------------------------------ */
  --font-ui:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Ramp: sizes / line-heights. Mono is used for ALL digits, codes, SKUs,
     prices, dates — always with tabular-nums (see .num in COMPONENTS.css). */
  --fs-2xs: 10px;  --lh-2xs: 14px;   /* mono micro-labels, kbd            */
  --fs-xs:  11px;  --lh-xs:  16px;   /* table headers, chip text          */
  --fs-sm:  12px;  --lh-sm:  17px;   /* secondary cells, captions         */
  --fs-md:  13px;  --lh-md:  19px;   /* BODY DEFAULT — dense UI text      */
  --fs-lg:  15px;  --lh-lg:  22px;   /* emphasized rows, mobile body      */
  --fs-xl:  18px;  --lh-xl:  25px;   /* panel titles, modal titles        */
  --fs-2xl: 22px;  --lh-2xl: 28px;   /* page titles                       */
  --fs-3xl: 28px;  --lh-3xl: 34px;   /* KPI numbers, register total       */
  --fs-4xl: 40px;  --lh-4xl: 46px;   /* register grand total, EOD count   */

  --fw-regular: 450;   /* Manrope reads light; 450 is the body weight     */
  --fw-medium:  550;
  --fw-semibold:650;
  --fw-bold:    750;

  /* ----- Spacing — 4px base, no off-scale values ------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ----- Radii — softened squares; never pill cards ----------------------- */
  --r-1: 4px;    /* chips, kbd, inputs, small buttons            */
  --r-2: 6px;    /* buttons, table wrappers, segmented controls  */
  --r-3: 8px;    /* cards, panels, modals, sheets — the MAX      */
  --r-round: 999px; /* status DOTS and avatar circles ONLY       */

  /* ----- Control metrics (density-aware) ---------------------------------- */
  --control-h:    36px;   /* inputs, buttons, filter pills (desktop)  */
  --control-h-lg: 44px;   /* primary actions, mobile minimum target   */
  --row-h:        44px;   /* data-table row (desktop comfortable)     */
  --row-h-mobile: 56px;   /* collapse-to-card rows on phone           */
  --stepper-h:    46px;   /* cart qty stepper — shipped, DO NOT SHRINK */
  --touch-min:    44px;   /* nothing tappable below this on mobile    */
  --bottomnav-h:  64px;   /* glass bottom nav — shipped, keep         */
  --sidebar-w:    232px;
  --rail-w:       300px;  /* register totals rail / record analytics rail */

  /* ----- Motion ------------------------------------------------------------
     Fast and matter-of-fact. Respect prefers-reduced-motion (components do). */
  --t-fast: 120ms;  /* hovers, presses                  */
  --t-base: 180ms;  /* chips, rows, toggles             */
  --t-slow: 280ms;  /* sheets, modals, palette          */
  --ease:   cubic-bezier(0.2, 0, 0, 1);

  /* ----- Z scale ----------------------------------------------------------- */
  --z-sticky: 10;   /* sticky table headers              */
  --z-chrome: 50;   /* sidebar, topbar, bottom nav       */
  --z-sheet:  80;   /* sheets, drawers                   */
  --z-modal:  90;   /* modals                            */
  --z-palette:95;   /* command palette                   */
  --z-toast:  99;
}

/* ============================================================================
   DARK THEME — explicit. Staff-default at the bench; near-black, not navy.
   Elevation = lighter surface + line, not shadow.
   ========================================================================== */
[data-theme="dark"] {
  --accent:        #d6453a;          /* one step brighter for dark contrast */
  --accent-hover:  #e05448;
  --accent-down:   #c0392e;
  --accent-soft:   rgba(214, 69, 58, 0.12);
  --accent-line:   rgba(214, 69, 58, 0.40);
  --on-accent:     #ffffff;

  --surface-0: #0c0c0c;
  --surface-1: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #242424;
  --scrim:     rgba(0, 0, 0, 0.60);

  --ink-1: #ededeb;
  --ink-2: #b3b0ac;
  --ink-3: #7d7a75;
  --ink-4: #54524e;
  --ink-inverse: #141414;

  --line-1: #222222;
  --line-2: #2d2d2d;
  --line-3: #3d3d3d;

  --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);

  --status-gray-fg:    #a8a49e;
  --status-gray-bg:    rgba(168, 164, 158, 0.10);
  --status-gray-line:  rgba(168, 164, 158, 0.30);

  --status-blue-fg:    #6ba3e8;
  --status-blue-bg:    rgba(107, 163, 232, 0.12);
  --status-blue-line:  rgba(107, 163, 232, 0.34);

  --status-purple-fg:  #a78ae0;
  --status-purple-bg:  rgba(167, 138, 224, 0.12);
  --status-purple-line:rgba(167, 138, 224, 0.34);

  --status-amber-fg:   #d9a83e;
  --status-amber-bg:   rgba(217, 168, 62, 0.12);
  --status-amber-line: rgba(217, 168, 62, 0.34);

  --status-orange-fg:  #dd8049;
  --status-orange-bg:  rgba(221, 128, 73, 0.12);
  --status-orange-line:rgba(221, 128, 73, 0.34);

  --status-green-fg:   #4cba79;
  --status-green-bg:   rgba(76, 186, 121, 0.12);
  --status-green-line: rgba(76, 186, 121, 0.34);

  --status-red-fg:     #e3594d;
  --status-red-bg:     rgba(227, 89, 77, 0.12);
  --status-red-line:   rgba(227, 89, 77, 0.36);

  --pos: var(--status-green-fg);
  --neg: var(--status-red-fg);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-nav: 0 -4px 24px rgba(0, 0, 0, 0.5);

  --glass-bg: rgba(16, 16, 16, 0.82);
  --glass-line: rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   OS-DEFAULT DARK — same block as [data-theme="dark"], applied automatically
   when the OS prefers dark AND the user hasn't explicitly forced light.
   (Duplicated by necessity: no preprocessor. Keep in sync with the block
   above — it is byte-identical.)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:        #d6453a;
    --accent-hover:  #e05448;
    --accent-down:   #c0392e;
    --accent-soft:   rgba(214, 69, 58, 0.12);
    --accent-line:   rgba(214, 69, 58, 0.40);
    --on-accent:     #ffffff;

    --surface-0: #0c0c0c;
    --surface-1: #141414;
    --surface-2: #1c1c1c;
    --surface-3: #242424;
    --scrim:     rgba(0, 0, 0, 0.60);

    --ink-1: #ededeb;
    --ink-2: #b3b0ac;
    --ink-3: #7d7a75;
    --ink-4: #54524e;
    --ink-inverse: #141414;

    --line-1: #222222;
    --line-2: #2d2d2d;
    --line-3: #3d3d3d;

    --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);

    --status-gray-fg:    #a8a49e;
    --status-gray-bg:    rgba(168, 164, 158, 0.10);
    --status-gray-line:  rgba(168, 164, 158, 0.30);

    --status-blue-fg:    #6ba3e8;
    --status-blue-bg:    rgba(107, 163, 232, 0.12);
    --status-blue-line:  rgba(107, 163, 232, 0.34);

    --status-purple-fg:  #a78ae0;
    --status-purple-bg:  rgba(167, 138, 224, 0.12);
    --status-purple-line:rgba(167, 138, 224, 0.34);

    --status-amber-fg:   #d9a83e;
    --status-amber-bg:   rgba(217, 168, 62, 0.12);
    --status-amber-line: rgba(217, 168, 62, 0.34);

    --status-orange-fg:  #dd8049;
    --status-orange-bg:  rgba(221, 128, 73, 0.12);
    --status-orange-line:rgba(221, 128, 73, 0.34);

    --status-green-fg:   #4cba79;
    --status-green-bg:   rgba(76, 186, 121, 0.12);
    --status-green-line: rgba(76, 186, 121, 0.34);

    --status-red-fg:     #e3594d;
    --status-red-bg:     rgba(227, 89, 77, 0.12);
    --status-red-line:   rgba(227, 89, 77, 0.36);

    --pos: var(--status-green-fg);
    --neg: var(--status-red-fg);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-nav: 0 -4px 24px rgba(0, 0, 0, 0.5);

    --glass-bg: rgba(16, 16, 16, 0.82);
    --glass-line: rgba(255, 255, 255, 0.08);
  }
}

/* ============================================================================
   DENSITY — compact is for the desktop counter (200×/day muscle memory).
   It tightens controls and rows. It NEVER shrinks mobile touch targets:
   compact only applies at ≥768px (the chrome JS strips it on small screens,
   and the guard below makes it harmless regardless).
   ========================================================================== */
@media (min-width: 768px) {
  [data-density="compact"] {
    --control-h: 32px;
    --control-h-lg: 40px;
    --row-h: 40px;
    --fs-md: 12.5px; --lh-md: 18px;
  }
}

/* ============================================================
 * SECTION: pos-components.css
 * ============================================================ */
/* ============================================================================
   CHAINLINE POS — v2 COMPONENTS
   ----------------------------------------------------------------------------
   The ONE component layer. Replaces pos-styles.css / -v2 / -v3 / -unify.
   Rules:
     • Every value comes from DESIGN-TOKENS.css custom properties.
     • Zero !important. Zero raw hex. Zero off-scale px.
     • One definition per component. Variants are data-attrs or modifier
       classes on the SAME block — never a parallel second component.
   Index:
     1. Base & utilities          7. Status chips         13. Record shell
     2. App shell (sidebar/top)   8. Forms                14. Qty stepper
     3. Glass bottom nav          9. Segmented & tabs     15. Totals rail
     4. Page header              10. Modal / Sheet        16. Command palette
     5. Cards & panels           11. Toast / Empty / Skel 17. Offline banner
     6. Data table               12. Filter pills         18. KPI stat
   ========================================================================== */

/* ---- 1. BASE & UTILITIES ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface-0);
  color: var(--ink-1);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Digits, prices, SKUs, dates, codes: always mono + tabular. */
.num, .sku, .kbd, .wo-id {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.num-pos { color: var(--pos); }
.num-neg { color: var(--neg); }
.right { text-align: right; }
.muted { color: var(--ink-3); }

/* Mono micro-label: section eyebrows, table headers, meta rows. */
.microlabel {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.kbd {
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-1);
  padding: 1px 5px;
  background: var(--surface-2);
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }

/* hidden always wins (overlays set display:flex) */
[hidden] { display: none; }
.overlay[hidden], .sheet-overlay[hidden], .palette-overlay[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; animation-iteration-count: 1; }
}

/* ---- 2. APP SHELL ---------------------------------------------------------
   Desktop: sidebar + topbar + content. Mobile (<768px): topbar + content +
   glass bottom nav. Same markup both — CSS switches.                        */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}
.app-main {
  grid-area: main;
  padding: var(--sp-6);
  min-width: 0;
}

/* Sidebar — zone groups, not a flat list. */
.sidebar {
  grid-area: sidebar;
  background: var(--surface-1);
  border-right: 1px solid var(--line-1);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  overflow-y: auto;
  z-index: var(--z-chrome);
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}
.brand-mark { width: 22px; height: 22px; background: var(--accent); border-radius: var(--r-1); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; inset: 5px; background: var(--surface-1); border-radius: 1px; }
.brand-mark::before { content: ""; position: absolute; inset: 9px; background: var(--accent); z-index: 1; }
.brand-name { font-weight: var(--fw-bold); font-size: var(--fs-md); letter-spacing: 0.04em; text-transform: uppercase; }
.brand-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }

.nav-zone { padding: var(--sp-3) var(--sp-2) var(--sp-1); }
.nav-zone + .nav-zone { border-top: 1px solid var(--line-1); }
.nav-zone-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 34px; padding: 0 var(--sp-2);
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--ink-1); }
.nav-item[aria-current="page"], .nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.nav-item .nav-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; opacity: 0.9; }
.nav-item .nav-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--ink-3);
  background: var(--surface-2);
  border-radius: var(--r-1);
  padding: 0 var(--sp-1);
  min-width: 18px; text-align: center;
}
.nav-item.active .nav-count { background: var(--accent-soft); color: var(--accent); }
.sidebar-foot {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-1);
  display: flex; align-items: center; gap: var(--sp-3);
}
.avatar {
  width: 28px; height: 28px; border-radius: var(--r-round); flex: none;
  background: var(--surface-3); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
}

/* Topbar — breadcrumb, global search, status cluster. */
.topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: var(--sp-4);
  height: 52px; padding: 0 var(--sp-6);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-1);
  position: sticky; top: 0; z-index: var(--z-chrome);
}
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-sm); }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink-1); }
.breadcrumb .crumb-sep { color: var(--ink-4); }
.breadcrumb .crumb-current { color: var(--ink-1); font-weight: 600; }

.global-search {
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--control-h);
  margin-left: auto;
  padding: 0 var(--sp-3);
  width: 280px;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  color: var(--ink-3);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.global-search:hover { border-color: var(--line-3); color: var(--ink-2); }
.global-search .kbd { margin-left: auto; }

.conn { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.conn-dot { width: 7px; height: 7px; border-radius: var(--r-round); background: var(--status-green-fg); }
.conn[data-state="online"]  { color: var(--status-green-fg); }
.conn[data-state="offline"] { color: var(--status-amber-fg); }
.conn[data-state="offline"] .conn-dot { background: var(--status-amber-fg); }

/* ---- 3. GLASS BOTTOM NAV (mobile) ---------------------------------------- */
.bottomnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--glass-line);
  box-shadow: var(--shadow-nav);
  z-index: var(--z-chrome);
}
.bottomnav-inner { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--bottomnav-h); }
.bn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); text-decoration: none;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  position: relative;
  min-width: var(--touch-min);
}
.bn-item .nav-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
.bn-item.active { color: var(--accent); }
.bn-item.active::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 2px;
  background: var(--accent); border-radius: 0 0 2px 2px;
}
.bn-badge {
  position: absolute; top: 8px; right: calc(50% - 18px);
  min-width: 15px; height: 15px; padding: 0 4px;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-round);
  font-family: var(--font-mono); font-size: 9px; line-height: 15px; text-align: center;
}

@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .sidebar { display: none; }
  .bottomnav { display: block; }
  .app-main { padding: var(--sp-4) var(--sp-4) calc(var(--bottomnav-h) + var(--sp-8)); }
  .topbar { padding: 0 var(--sp-4); }
  .global-search { width: auto; flex: 1; min-width: 0; }
  .global-search .kbd { display: none; }
}

/* ---- 4. PAGE HEADER --------------------------------------------------------
   ONE page header: mono eyebrow + title + actions. Primary action lives here
   and nowhere else on the page.                                              */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.page-title { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-bold); margin: 0; letter-spacing: -0.01em; }
.page-header .microlabel { display: block; margin-bottom: var(--sp-1); }
.page-actions { display: flex; gap: var(--sp-2); flex: none; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions .btn { flex: 1; }
}

/* ---- 5. CARDS & PANELS -------------------------------------------------- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.card-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); }
.card-body { padding: 0 var(--sp-4) var(--sp-4); }
.card-body.flush { padding: 0; }

/* Panel: titled section INSIDE a record shell grid (smaller chrome). */
.panel { background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--r-3); }
.panel-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-1);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
}
.panel-body { padding: var(--sp-4); }

/* ---- 6. DATA TABLE ---------------------------------------------------------
   ONE table. Sticky mono header, hover rows, right-aligned .num columns.
   Mobile: rows collapse to cards via [data-collapse] + per-cell labels.      */
.dt-wrap { overflow: auto; border-radius: var(--r-3); }
.card .dt-wrap, .panel .dt-wrap { border-radius: 0 0 var(--r-3) var(--r-3); }
table.dt { width: 100%; border-collapse: collapse; }
.dt thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface-2);
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 0 var(--sp-3);
  height: 32px;
  border-bottom: 1px solid var(--line-1);
  white-space: nowrap;
}
.dt thead th.right { text-align: right; }
.dt thead th[aria-sort] { cursor: pointer; color: var(--ink-2); }
.dt thead th[aria-sort="descending"]::after { content: " ↓"; }
.dt thead th[aria-sort="ascending"]::after { content: " ↑"; }
.dt tbody td {
  height: var(--row-h);
  padding: var(--sp-1) var(--sp-3);
  border-bottom: 1px solid var(--line-1);
  vertical-align: middle;
  white-space: nowrap;
}
.dt tbody tr { transition: background var(--t-fast) var(--ease); }
.dt tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.dt tbody tr:last-child td { border-bottom: 0; }
.cell-main { font-weight: var(--fw-medium); }
.cell-sub { display: block; font-size: var(--fs-sm); color: var(--ink-3); }
/* Urgency edge: overdue / flagged rows get a 2px left bar, not a tinted row. */
.dt tr[data-flag] td:first-child { box-shadow: inset 2px 0 0 var(--status-red-fg); }

/* Mobile collapse-to-card */
@media (max-width: 767px) {
  .dt[data-collapse] { display: block; }
  .dt[data-collapse] thead { display: none; }
  .dt[data-collapse] tbody { display: grid; gap: var(--sp-3); padding: var(--sp-3); }
  .dt[data-collapse] tbody tr {
    display: block;
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-3);
    padding: var(--sp-3) var(--sp-4);
  }
  .dt[data-collapse] tbody tr[data-flag] { border-left: 2px solid var(--status-red-fg); }
  .dt[data-collapse] tbody tr[data-flag] td:first-child { box-shadow: none; }
  .dt[data-collapse] tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    height: auto; min-height: 28px;
    padding: var(--sp-1) 0;
    border-bottom: 0;
    white-space: normal;
  }
  .dt[data-collapse] tbody td[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: var(--fs-2xs);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-3);
  }
  .dt[data-collapse] tbody td.card-lead { justify-content: flex-start; min-height: var(--touch-min); }
}

/* ---- 7. STATUS CHIP ---------------------------------------------------------
   ONE chip. Tone via data-tone. dot + mono label. Used for WO/PO/payment/
   stock states. Never invent a new tone — extend the token palette.         */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
  background: var(--status-gray-bg); color: var(--status-gray-fg);
  border: 1px solid var(--status-gray-line);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-round); background: currentColor; }
.chip[data-tone="blue"]   { background: var(--status-blue-bg);   color: var(--status-blue-fg);   border-color: var(--status-blue-line); }
.chip[data-tone="purple"] { background: var(--status-purple-bg); color: var(--status-purple-fg); border-color: var(--status-purple-line); }
.chip[data-tone="amber"]  { background: var(--status-amber-bg);  color: var(--status-amber-fg);  border-color: var(--status-amber-line); }
.chip[data-tone="orange"] { background: var(--status-orange-bg); color: var(--status-orange-fg); border-color: var(--status-orange-line); }
.chip[data-tone="green"]  { background: var(--status-green-bg);  color: var(--status-green-fg);  border-color: var(--status-green-line); }
.chip[data-tone="red"]    { background: var(--status-red-bg);    color: var(--status-red-fg);    border-color: var(--status-red-line); }

/* ---- 8. BUTTONS -------------------------------------------------------------
   Hierarchy: primary (red, ≤1 per view) / secondary (outline) / ghost /
   destructive. Size: default = --control-h; .btn-lg = --control-h-lg.       */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-4);
  border-radius: var(--r-2);
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--ink-1);
  font-family: var(--font-ui); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--line-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .kbd { background: transparent; border-color: currentColor; opacity: 0.55; color: inherit; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active { background: var(--accent-down); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--ink-1); }

.btn-destructive { background: transparent; border-color: var(--status-red-line); color: var(--status-red-fg); }
.btn-destructive:hover { background: var(--status-red-bg); border-color: var(--status-red-fg); }

.btn-lg { height: var(--control-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-lg); }
.btn-sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
.btn-icon { width: var(--control-h); padding: 0; flex: none; }
@media (max-width: 767px) { .btn { min-height: var(--touch-min); } .btn-sm { min-height: 36px; } }

/* ---- 9. FORMS ----------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }
.field-help { font-size: var(--fs-sm); color: var(--ink-3); }
.field-error { font-size: var(--fs-sm); color: var(--status-red-fg); }
.input, .select, .textarea {
  height: var(--control-h);
  padding: 0 var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  color: var(--ink-1);
  font-family: var(--font-ui); font-size: var(--fs-md);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease);
}
.textarea { height: auto; min-height: 72px; padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: var(--lh-md); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input[aria-invalid="true"] { border-color: var(--status-red-fg); }
.input.num { font-family: var(--font-mono); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: var(--sp-8);
}
@media (max-width: 767px) { .input, .select { min-height: var(--touch-min); } }

/* Search input with leading icon (list screens, register scan bar). */
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search .search-icon { position: absolute; left: var(--sp-3); color: var(--ink-3); pointer-events: none; display: inline-flex; }
.search .input { padding-left: var(--sp-8); }
/* Scan-priority variant: the always-focused register bar. */
.search.scan .input { border-color: var(--accent-line); }
.search.scan .input:focus { border-color: var(--accent); }

.checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-md); min-height: 24px; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }

/* Renamed .toggle → .switch: legacy app Toggle component owns `.toggle`
   (track + labels inside); this kit variant's fixed 36px width was
   clobbering it and stacking the labels. */
.switch { position: relative; display: inline-flex; width: 36px; height: 22px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-round); transition: background var(--t-base) var(--ease); }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--r-round); background: var(--surface-1); box-shadow: var(--shadow-1); transition: transform var(--t-base) var(--ease); }
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track::after { transform: translateX(14px); }

/* ---- 10. SEGMENTED CONTROL & TABS ---------------------------------------- */
.segmented {
  display: inline-flex; align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 2px; gap: 2px;
}
.segmented button {
  border: 0; background: transparent; color: var(--ink-2);
  height: calc(var(--control-h) - 6px); padding: 0 var(--sp-3);
  border-radius: var(--r-1);
  font-family: var(--font-ui); font-size: var(--fs-md); font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.segmented button:hover { color: var(--ink-1); }
.segmented button[aria-pressed="true"] { background: var(--surface-1); color: var(--ink-1); font-weight: var(--fw-semibold); box-shadow: var(--shadow-1); }

/* Tabs: underline style, with mono counts. Status-filter rows + record sub-nav. */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line-1); overflow-x: auto; }
.tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3); height: 38px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-2); font-family: var(--font-ui); font-size: var(--fs-md); font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.tab:hover { color: var(--ink-1); }
.tab[aria-selected="true"] { color: var(--ink-1); font-weight: var(--fw-semibold); border-bottom-color: var(--accent); }
.tab .tab-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); background: var(--surface-2); border-radius: var(--r-1); padding: 1px 5px; }
@media (max-width: 767px) { .tab { height: var(--touch-min); } }

/* ---- 11. MODAL / SHEET ---------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6); z-index: var(--z-modal);
}
.modal {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  width: 100%; max-width: 480px; max-height: 85vh;
  display: flex; flex-direction: column;
  animation: modal-in var(--t-slow) var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-1); }
.modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-1); }

/* Sheet: bottom on mobile, right-side on desktop. */
.sheet-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-sheet); display: flex; align-items: flex-end; }
.sheet {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  width: 100%; max-height: 82vh;
  border-radius: var(--r-3) var(--r-3) 0 0;
  display: flex; flex-direction: column;
  animation: sheet-up var(--t-slow) var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.sheet-grip { width: 36px; height: 4px; border-radius: var(--r-round); background: var(--line-3); margin: var(--sp-2) auto 0; flex: none; }
.sheet-header { padding: var(--sp-3) var(--sp-5); display: flex; align-items: center; justify-content: space-between; }
.sheet-body { padding: 0 var(--sp-5) var(--sp-5); overflow-y: auto; }
@media (min-width: 768px) {
  .sheet-overlay { align-items: stretch; justify-content: flex-end; }
  .sheet { width: 420px; max-height: none; border-radius: 0; border-top: 0; animation: sheet-side var(--t-slow) var(--ease); }
  @keyframes sheet-side { from { transform: translateX(24px); opacity: 0; } }
  .sheet-grip { display: none; }
}

/* ---- 12. TOAST / EMPTY STATE / SKELETON ----------------------------------- */
.toast-stack { position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--sp-2); z-index: var(--z-toast); }
@media (max-width: 767px) { .toast-stack { bottom: calc(var(--bottomnav-h) + var(--sp-4)); width: calc(100% - var(--sp-8)); } }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  animation: toast-in var(--t-slow) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-round); background: var(--status-green-fg); flex: none; }
.toast[data-tone="error"]::before { background: var(--status-red-fg); }
.toast[data-tone="info"]::before { background: var(--status-blue-fg); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--ink-3);
}
.empty .microlabel { color: var(--ink-4); }
.empty-title { font-size: var(--fs-lg); color: var(--ink-2); font-weight: var(--fw-medium); }

.skeleton {
  border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s linear infinite;
  color: transparent; user-select: none;
}
@keyframes skeleton-wave { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- 13. FILTER PILLS -------------------------------------------------------
   Facet row under list search. key · value; active = ink border.            */
.filter-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 767px) { .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1); } }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  border-radius: var(--r-round);
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pill:hover { border-color: var(--line-3); color: var(--ink-1); }
.pill .pill-value { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.pill[data-active] { border-color: var(--ink-1); color: var(--ink-1); }
.pill[data-active] .pill-value { color: var(--accent); }
@media (max-width: 767px) { .pill { min-height: 38px; } }

/* ---- 14. RECORD SHELL --------------------------------------------------------
   The unifying detail-screen template (item / customer / WO / PO):
   identity header + pager + action bar + sub-nav tabs + panel grid +
   read-only analytics rail (desktop right; mobile stat-strip + sheet).      */
.record { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--sp-5); align-items: start; }
.record-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-3); }
.record-identity { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.record-title { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: var(--fw-bold); margin: 0; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.record-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-sm); }
.pager { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.pager .num { font-size: var(--fs-xs); color: var(--ink-3); }
.record-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.record-body { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.record-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }

/* Analytics rail: read-only, computed. Visually quieter than the work area. */
.rail { display: grid; gap: var(--sp-4); align-content: start; position: sticky; top: calc(52px + var(--sp-5)); }
.rail .panel-body { display: grid; gap: var(--sp-2); }
.rail-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-md); }
.rail-row .rail-key { color: var(--ink-3); }
.rail-row .num { font-weight: var(--fw-semibold); }
.rail-row.rail-total { border-top: 1px solid var(--line-1); padding-top: var(--sp-2); margin-top: var(--sp-1); }
.rail-row.rail-total .num { font-size: var(--fs-xl); font-weight: var(--fw-bold); }

/* Mobile: rail → horizontal stat-chip strip under the record header.
   Tap “stats” chip → bottom sheet with the full rail. Never a buried tab.  */
.stat-strip { display: none; }
@media (max-width: 1023px) {
  .record { grid-template-columns: 1fr; }
  .rail { display: none; }
  .stat-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
  .stat-chip {
    flex: none; display: flex; flex-direction: column; gap: 1px;
    min-height: var(--touch-min);
    border: 1px solid var(--line-2); border-radius: var(--r-2);
    background: var(--surface-1);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
  }
  .stat-chip .microlabel { font-size: 9px; }
  .stat-chip .num { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
}

/* Vertical status edge on WO detail (at-a-glance state from across a bench) */
.record-statusbar { display: flex; align-items: center; gap: var(--sp-3); }

/* ---- 15. QTY STEPPER ----------------------------------------------------------
   Shipped & loved. 46px, 16px bold mono digits. DO NOT SHRINK.              */
.stepper { display: inline-flex; align-items: stretch; height: var(--stepper-h); border: 1px solid var(--line-2); border-radius: var(--r-2); overflow: hidden; background: var(--surface-1); }
.stepper button {
  width: var(--stepper-h);
  border: 0; background: transparent; color: var(--ink-2);
  font-size: 20px; font-family: var(--font-mono); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.stepper button:hover { background: var(--surface-2); color: var(--ink-1); }
.stepper button:active { background: var(--surface-3); }
.stepper .stepper-value {
  min-width: 46px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 700;
  border-left: 1px solid var(--line-1); border-right: 1px solid var(--line-1);
  background: var(--surface-2);
  padding: 0 var(--sp-2);
}
.stepper.stepper-sm { height: 32px; }
.stepper.stepper-sm button { width: 32px; font-size: 16px; }
.stepper.stepper-sm .stepper-value { min-width: 36px; font-size: var(--fs-md); }

/* ---- 16. TOTALS RAIL (register) ---------------------------------------------
   Fixed right rail: lines, tax split, grand total, one-tap payments.        */
.totals { display: grid; gap: var(--sp-2); }
.totals-row { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-md); }
.totals-row .totals-key { color: var(--ink-2); }
.totals-grand {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--line-2);
  padding-top: var(--sp-3); margin-top: var(--sp-1);
}
.totals-grand .num { font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 700; letter-spacing: -0.02em; }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
.pay-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 56px;
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--surface-1); color: var(--ink-1);
  font-family: var(--font-ui); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pay-btn:hover { background: var(--surface-2); border-color: var(--line-3); }
.pay-btn .kbd { font-size: 9px; }
.pay-btn.pay-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pay-btn.pay-primary:hover { background: var(--accent-hover); }
.pay-btn.pay-primary .kbd { border-color: rgba(255,255,255,0.4); color: var(--on-accent); }

/* ---- 17. COMMAND PALETTE (phase 2) ----------------------------------------- */
.palette-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-palette); display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--sp-4) var(--sp-4); }
.palette {
  width: 100%; max-width: 560px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: modal-in var(--t-slow) var(--ease);
}
.palette-input {
  width: 100%; border: 0; background: transparent; color: var(--ink-1);
  font-family: var(--font-ui); font-size: var(--fs-xl);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--glass-line);
}
.palette-input:focus { outline: none; }
.palette-list { max-height: 50vh; overflow-y: auto; padding: var(--sp-2); }
.palette-group { padding: var(--sp-2) var(--sp-3) var(--sp-1); }
.palette-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-3); height: var(--control-h-lg);
  border-radius: var(--r-2); cursor: pointer;
  font-size: var(--fs-md);
}
.palette-item:hover, .palette-item[data-selected] { background: var(--accent-soft); }
.palette-item[data-selected] { box-shadow: inset 2px 0 0 var(--accent); }
.palette-item .palette-hint { margin-left: auto; display: flex; gap: var(--sp-1); align-items: center; color: var(--ink-3); font-size: var(--fs-sm); }

/* ---- 18. OFFLINE BANNER ------------------------------------------------------ */
.offline-banner {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--status-amber-bg);
  border-bottom: 1px solid var(--status-amber-line);
  color: var(--status-amber-fg);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-4);
  text-transform: uppercase;
}

/* ---- 19. KPI STAT -------------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.kpi { padding: var(--sp-4); display: grid; gap: var(--sp-1); align-content: start; }
.kpi .kpi-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: 700; letter-spacing: -0.02em; }
.kpi .kpi-sub { font-size: var(--fs-sm); color: var(--ink-3); }
.kpi[data-tone="red"] .kpi-value { color: var(--status-red-fg); }
.kpi[data-tone="green"] .kpi-value { color: var(--status-green-fg); }

/* ============================================================
 * SECTION: pos-styles.css
 * ============================================================ */
/* ChainLine POS — Nuclear Design Pass
 * Aesthetic: Precision instrument meets darkroom.
 * Tokens: §6 design spec (exact). Manrope + JetBrains Mono.
 * Radius: 0 everywhere EXCEPT .badge = 999px.
 * No shadows. No gradients. No decorative curves.
 */

/* fonts @import hoisted to index.html <link> */

/* ════════════════════════════════════════════
   DESIGN TOKENS — §6 exact
   ════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --bg:   #0f0f0f;
  --bg2:  #161616;
  --bg3:  #1c1c1c;

  /* Legacy token aliases — pos-payments.js (Request Payment / Quote / Card /
     Cash / Tip / Refund modals) was authored against a token set that was
     never defined here, so its modal backgrounds/text resolved to transparent
     and invisible. Map them onto the real tokens so the modals are opaque. */
  --surface:    var(--bg2);
  --card:       var(--bg2);
  --border:     var(--line3);
  --text-dim:   var(--text2);
  --text-muted: var(--text3);
  --green:      var(--green-fg);
  --red:        var(--red-fg);
  --red-dim:    var(--red-bg);
  --blue:       var(--blue-fg);
  --yellow:     #e0a92e;

  /* Hyphen-number aliases — scattered code uses the --text-1/--bg-2 form.
     NOTE v2 migration: --line-1/2/3 and --font-mono are now DEFINED by
     pos-tokens.css (loads first); their legacy alias lines were removed here
     to avoid circular var() (legacy --line now points AT the v2 token). */
  --bg-1:   var(--bg);
  --bg-2:   var(--bg2);
  --bg-3:   var(--bg3);
  --text-1: var(--text);
  --text-2: var(--text2);
  --text-3: var(--text3);

  /* ── v2 TOKEN ALIAS SHIM (design/v2/MIGRATION.md step 1) ──
     Every legacy name resolves to a pos-tokens.css value, so legacy rules
     read the v2 palette. Values are near-identical in dark; the light-theme
     block below still overrides with full-white until step 2. */
  --bg:   var(--surface-0);
  --bg2:  var(--surface-1);
  --bg3:  var(--surface-2);
  --line:  var(--line-1);
  --line2: var(--line-2);
  --line3: var(--line-3);
  --text:  var(--ink-1);
  --text2: var(--ink-2);
  --text3: var(--ink-3);

  /* Brand — --accent itself now lives in pos-tokens.css */
  --accent-dim:  var(--accent-down);
  --accent-glow: var(--accent-soft);

  /* Semantic → v2 status system */
  --green-fg:   var(--status-green-fg);
  --green-bg:   var(--status-green-bg);
  --green-line: var(--status-green-line);
  --blue-fg:   var(--status-blue-fg);
  --blue-bg:   var(--status-blue-bg);
  --blue-line: var(--status-blue-line);
  --amber-fg:   var(--status-amber-fg);
  --amber-bg:   var(--status-amber-bg);
  --amber-line: var(--status-amber-line);
  --red-fg: var(--status-red-fg);
  --red-bg: var(--status-red-bg);

  /* Type families — --font-mono/--font-ui live in pos-tokens.css */
  --mono: var(--font-mono);
  --ui:   var(--font-ui);

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h:  48px;
  --strip-h:   28px;
}

/* Light theme overrides */
[data-theme="light"] {
  /* Full-white light mode (owner request 2026-06-10): every surface is pure
     white — separation comes from the border tokens, not surface tints. */
  --bg:    #ffffff;
  --bg2:   #ffffff;
  --bg3:   #ffffff;
  --line:  rgba(0,0,0,0.07);
  --line2: rgba(0,0,0,0.11);
  --line3: rgba(0,0,0,0.17);
  --text:  #1a1916;
  --text2: #4a4844;
  --text3: #6a6864;
}

/* With all surfaces white, hover states that rely on the bg2/bg3 step in dark
   mode become invisible — give them an explicit tint in light mode. */
[data-theme="light"] .data-table tr:hover td,
[data-theme="light"] .tbl tbody tr:hover td,
[data-theme="light"] .activity-item:hover,
[data-theme="light"] .feed-item:hover,
[data-theme="light"] .item-row:hover,
[data-theme="light"] .line-row:not(.head):hover { background: #f5f5f5; }

/* Skeleton shimmers: .skel-line blends --bg3↔--bg2 (white-on-white now) and
   .pos-skeleton-* hardcodes dark greys — both need a light-grey gradient here. */
[data-theme="light"] .skel-line,
[data-theme="light"] .pos-skeleton-line,
[data-theme="light"] .pos-skeleton-shimmer-bg {
  background: linear-gradient(90deg, #ececec 25%, #f7f7f7 50%, #ececec 75%);
  background-size: 800px 100%;
}

/* ════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { cursor: pointer; font-family: var(--ui); font-size: inherit; background: none; border: none; }
/* Inputs: 16px on touch devices to prevent iOS Safari zoom-on-focus.
   Desktop keeps the tighter 13px UI density via @media(hover:hover). */
input, select, textarea { font-family: var(--ui); font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  input, select, textarea { font-size: 13px; }
}
table { border-collapse: collapse; width: 100%; }
ul, ol { list-style: none; }

/* Mono utility — ALL numbers/SKUs/codes/prices/IDs/dates */
.mono, .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════
   APP SHELL
   ════════════════════════════════════════════ */
#app, .app {
  display: flex;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

/* ════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════ */
#sidebar, .sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid var(--line2);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  height: 100dvh;
  overflow: hidden;
}

/* Scrollable nav area — brand and foot stay pinned */
.sidebar-nav-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.sidebar-nav-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-nav-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }

/* Brand lockup */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line2);
  flex-shrink: 0;
}

/* Geometric brand mark — nested squares, accent/bg alternating */
.brand-mark {
  width: 22px;
  height: 22px;
  background: var(--accent);
  flex-shrink: 0;
  position: relative;
}
.brand-mark::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--bg);
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: 7px;
  background: var(--accent);
}

.sidebar-logo, .brand-name {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-top: 1px;
}

/* Nav sections */
.nav-section {
  padding: 10px 0;
}
.nav-section + .nav-section {
  border-top: 1px solid var(--line);
}

.nav-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 4px 16px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color 80ms, background 80ms;
  user-select: none;
}
.nav-item:hover {
  color: var(--text);
  background: var(--bg2);
}
.nav-item.active {
  color: var(--text);
  border-left-color: var(--accent);
  padding-left: 14px;
  background: rgba(200,57,44,0.06);
}
.nav-item.active .nav-count { color: var(--text2); }
.nav-item-label-mobile { display: none; }

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  color: inherit;
}
.nav-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}

.nav-grow { flex: 1; }

/* Sidebar footer — logged-in user */
.sidebar-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 13px; font-weight: 500; color: var(--text); }
.user-role {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════
   MAIN AREA
   ════════════════════════════════════════════ */
#main, .main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
}

/* ════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════ */
.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line2);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--bg);
}

.crumbs {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.crumb { color: var(--text2); }
.crumb.last { color: var(--text); font-weight: 500; }
.crumb-sep { color: var(--text3); padding: 0 6px; }

.topbar-spacer { flex: 1; }

/* Topbar search widget */
.topbar-search {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  padding: 4px 8px;
  width: 280px;
  height: 30px;
  color: var(--text2);
}
.topbar-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 12px;
  width: 100%;
  font-family: var(--ui);
}
.topbar-search input::placeholder { color: var(--text3); }

.station {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px solid var(--line2);
  height: 30px;
  display: flex;
  align-items: center;
}
.station b { color: var(--text); font-weight: 600; }

/* ════════════════════════════════════════════
   CONTENT AREA
   ════════════════════════════════════════════ */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Page wrapper */
.page { padding: 28px 32px 60px; }

/* Page header */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.page-title {
  font-family: var(--ui);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.page-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 4px;
}
/* Legacy alias */
.page-sub.above { margin-top: 0; margin-bottom: 2px; }
.page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* ════════════════════════════════════════════
   STATUS STRIP — bottom bar
   ════════════════════════════════════════════ */
.status-strip {
  height: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  flex-shrink: 0;
  background: var(--bg2);
}
.status-strip .spacer { flex: 1; }
.status-strip span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}

.status-dot, .dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-fg);
  box-shadow: 0 0 6px var(--green-fg);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ════════════════════════════════════════════
   STATUS BADGES — ONLY rounded element (999px)
   ════════════════════════════════════════════ */
.badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* Badge variants */
.badge.ready, .badge-ready {
  background: var(--green-bg);
  color: var(--green-fg);
  border-color: var(--green-line);
}
.badge.open, .badge-open {
  background: var(--blue-bg);
  color: var(--blue-fg);
  border-color: var(--blue-line);
}
/* In Progress = amber (work happening) */
.badge.inprogress, .badge-inprogress {
  background: var(--amber-bg);
  color: var(--amber-fg);
  border-color: var(--amber-line);
}
/* Booked = violet/blue (scheduled) */
.badge.booked, .badge-booked {
  background: var(--blue-bg);
  color: var(--blue-fg);
  border-color: var(--blue-line);
}
.badge.overdue, .badge-overdue {
  background: var(--red-bg);
  color: var(--red-fg);
  border-color: rgba(214,70,58,0.32);
}
/* Closed/Picked Up/Finished = gray (done) */
.badge.closed, .badge-closed,
.badge.finished, .badge-finished,
.badge.pickedup, .badge-pickedup {
  background: var(--bg3);
  color: var(--text3);
  border-color: var(--line2);
}
/* Waiting for parts = orange-red (urgent) */
.badge.waitingpart, .badge-waitingpart {
  background: #fff4ed;
  color: #c2410c;
  border-color: rgba(194,65,12,0.28);
}
/* Estimate = neutral gray-blue */
.badge.estimate, .badge-estimate {
  background: #f3f4f6;
  color: #6b7280;
  border-color: rgba(107,114,128,0.25);
}
/* Warranty = amber-yellow */
.badge.warranty, .badge-warranty {
  background: #fef3c7;
  color: #92400e;
  border-color: rgba(146,64,14,0.25);
}
/* Storage = violet */
.badge.storage, .badge-storage {
  background: #ede9fe;
  color: #7c3aed;
  border-color: rgba(124,58,237,0.25);
}
/* Consignment/Special = pink */
.badge.special, .badge-special {
  background: #fce7f3;
  color: #9d174d;
  border-color: rgba(157,23,77,0.25);
}

/* Quick-action icon buttons on WO rows */
.btn-icon {
  padding: 4px 6px;
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qa-quick {
  opacity: 0.6;
  transition: opacity 0.1s;
}
.qa-quick:hover { opacity: 1; }
.qa-ready:hover { color: var(--green-fg); border-color: var(--green-line); }

/* Service type estimator chip */
.service-estimate {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--blue-fg);
}
.se-time {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-weight: 600;
}
.se-price {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--green-fg);
}
.se-desc {
  width: 100%;
  color: var(--text2);
  font-size: 11px;
  line-height: 1.4;
}

/* Misc text tokens */
.overdue-text {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.prio-flag { color: var(--accent); display: flex; align-items: center; }

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 80ms;
  border-radius: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

/* Primary */
.btn-primary, .btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover, .btn.primary:hover {
  background: #a62e23;
  border-color: #a62e23;
}

/* Secondary / default */
.btn-secondary, .btn:not(.primary):not(.ghost) {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--line3);
}
.btn-secondary:hover, .btn:not(.primary):not(.ghost):hover {
  background: var(--bg2);
  border-color: var(--text3);
}

/* Ghost */
.btn-ghost, .btn.ghost {
  background: transparent;
  color: var(--text2);
  border-color: transparent;
}
.btn-ghost:hover, .btn.ghost:hover {
  color: var(--text);
  background: var(--bg2);
  border-color: transparent;
}

/* Sizes */
.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-lg, .btn.lg { padding: 10px 20px; font-size: 13px; }

/* Disabled */
.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* KBD chips inside buttons */
.btn .kbd { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.18); }
.btn:not(.primary) .kbd, .btn-ghost .kbd {
  color: var(--text3);
  border-color: var(--line2);
}

/* Icon-only button */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  transition: color 80ms;
}
.icon-btn:hover { color: var(--red-fg); }

/* ════════════════════════════════════════════
   KBD SHORTCUT CHIPS
   ════════════════════════════════════════════ */
.kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  border: 1px solid var(--line2);
  padding: 1px 5px;
  line-height: 1.4;
  border-radius: 0;
}

/* ════════════════════════════════════════════
   STAT GRID — Dashboard
   ════════════════════════════════════════════ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line2);
}
.stat-cell, .stat {
  padding: 18px 20px;
  border-right: 1px solid var(--line2);
  background: var(--bg);
  min-height: 110px;
}
.stat-cell:last-child, .stat:last-child { border-right: none; }
/* Legacy: sibling border via + selector */
.stat-grid .stat + .stat { border-left: 1px solid var(--line2); }

.stat-value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}
.stat-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.stat-delta-up, .delta-up   { color: var(--green-fg); display: flex; align-items: center; }
.stat-delta-down, .delta-down { color: var(--red-fg); display: flex; align-items: center; }

/* ════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════ */
.card, .aside-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  overflow: hidden;
}
.card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-head h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.card-head-label, .card-head .sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 500;
}
.card-head .right { margin-left: auto; }
.card-body { padding: 18px; }

/* ════════════════════════════════════════════
   TABLES — dense, information-rich
   ════════════════════════════════════════════ */
.data-table, .tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th, .tbl th {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 500;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line2);
  white-space: nowrap;
  background: var(--bg);
}

.data-table td, .tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
  font-size: 12px;
}

.data-table tr:hover td, .tbl tbody tr:hover td {
  background: var(--bg2);
  cursor: pointer;
}
.data-table tr:hover td:first-child, .tbl tbody tr:hover td:first-child {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
.data-table tbody tr:last-child td,
.tbl tbody tr:last-child td { border-bottom: none; }

/* Table cell type helpers */
.data-table .mono, .tbl .num   { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.data-table .dim, .tbl .muted  { color: var(--text2); }

/* Customer cell stack */
.cell-customer .name  { color: var(--text); font-size: 13px; }
.cell-customer .phone {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════ */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 0;
}
.field label, .field-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
}
.field-label .req { color: var(--accent); margin-left: 2px; }
.field-hint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

/* Base input / select / textarea */
.input, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background: var(--bg);
  border: 1px solid var(--line3);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 100ms;
  appearance: none;
  -webkit-appearance: none;
}
.input:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus {
  border-color: var(--accent);
}
.input::placeholder, input::placeholder { color: var(--text3); }
.input.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

input[type="date"], .mono-input {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.select, select {
  background: var(--bg);
  border: 1px solid var(--line3);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  padding: 8px 32px 8px 10px;
  outline: none;
  border-radius: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%235a5856' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 100ms;
}
.select:focus, select:focus { border-color: var(--accent); }

.textarea, textarea {
  background: var(--bg);
  border: 1px solid var(--line3);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  border-radius: 0;
  width: 100%;
  min-height: 92px;
  resize: vertical;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 100ms;
}
.textarea:focus, textarea:focus { border-color: var(--accent); }
.textarea::placeholder, textarea::placeholder { color: var(--text3); }

/* 2-col form grid */
.grid-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.grid-form .span-2 { grid-column: 1 / -1; }

/* ════════════════════════════════════════════
   SEARCH INPUT WITH ICON
   ════════════════════════════════════════════ */
.search-wrap, .search-field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--line2);
  transition: border-color 100ms;
}
.search-wrap:focus-within, .search-field:focus-within {
  border-color: var(--line3);
  background: var(--bg3);
}
.search-wrap .ico, .search-field .ico {
  display: flex;
  align-items: center;
  padding: 0 8px 0 10px;
  color: var(--text3);
  flex-shrink: 0;
}
.search-wrap input, .search-field .input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  padding: 9px 32px 9px 0;
  width: 100%;
  border-radius: 0;
}
.search-wrap input:focus, .search-field .input:focus { border-color: transparent; }
.search-wrap input::placeholder, .search-field .input::placeholder { color: var(--text3); }
.search-field .kbd-hint {
  position: absolute;
  right: 9px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  border: 1px solid var(--line2);
  padding: 1px 5px;
  pointer-events: none;
}
.filters .search-field, .filters .search-wrap { max-width: 340px; flex: 0 0 340px; }

/* ════════════════════════════════════════════
   FILTER PILLS
   ════════════════════════════════════════════ */
.filter-pills, .filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
}
.pill:hover {
  background: var(--bg3);
  border-color: var(--line3);
  color: var(--text);
}
.pill.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
}
.pill .mono { color: var(--text3); }

/* ════════════════════════════════════════════
   SLIDE PANELS — details + forms
   ════════════════════════════════════════════ */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
}
.panel {
  width: 480px;
  height: 100%;
  background: var(--bg2);
  border-left: 1px solid var(--line3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn 180ms ease-out;
}
.panel-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.panel-foot {
  padding: 16px 20px;
  border-top: 1px solid var(--line2);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ════════════════════════════════════════════
   MECHANIC CHIPS
   ════════════════════════════════════════════ */
.chip-group, .mech-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip, .mech-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
  border-radius: 0;
}
.chip:hover, .mech-chip:hover {
  background: var(--bg3);
  border-color: var(--line3);
  color: var(--text);
}
.chip.active, .mech-chip.selected {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
}

/* ════════════════════════════════════════════
   MECHANIC AVATARS
   ════════════════════════════════════════════ */
.av-init {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  border-radius: 0;
}
/* Per-mechanic tone colors */
.av-init.am, .av-am { background: #1e2a32; color: #9ec3d6; border-color: #2a3d4a; }
.av-init.jk, .av-jk { background: #2a221d; color: #d6a98a; border-color: #3d2f25; }
.av-init.sr, .av-sr { background: #1f2a1f; color: #a8d6a8; border-color: #2b3d2b; }
.av-init.mb, .av-mb { background: #2a1e2a; color: #c79ad6; border-color: #3d2b3d; }
.av-init:not(.am):not(.jk):not(.sr):not(.mb) {
  background: var(--bg3);
  color: var(--text2);
  border-color: var(--line2);
}
/* Expanded staff tones */
.av-ja { background: #1e3a5f; color: #93c5fd; border-color: #2a4f7a; }
.av-fl { background: #1e3a5f; color: #93c5fd; border-color: #2a4f7a; }
.av-ph { background: #1e3a5f; color: #93c5fd; border-color: #2a4f7a; }
.av-st { background: #78350f; color: #fde68a; border-color: #9a4510; }
.av-ma { background: #831843; color: #fbcfe8; border-color: #a01e54; }
.av-da { background: #7c2d12; color: #fed7aa; border-color: #9a3915; }
.av-tc { background: #713f12; color: #fef08a; border-color: #8d5016; }
.av-be { background: #374151; color: #e5e7eb; border-color: #4b5563; }
.av-cu { background: #1e3a5f; color: #93c5fd; border-color: #2a4f7a; }
.av-dn { background: #1e3a5f; color: #93c5fd; border-color: #2a4f7a; }

/* ════════════════════════════════════════════
   ACTIVITY FEED
   ════════════════════════════════════════════ */
.activity-feed {
  display: flex;
  flex-direction: column;
}
.activity-item, .feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  transition: background 80ms;
}
.activity-item:last-child, .feed-item:last-child { border-bottom: none; }
.activity-item:hover, .feed-item:hover { background: var(--bg2); }

.feed-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  width: 38px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.feed-text {
  flex: 1;
  font-size: 12px;
}
.feed-text .who  { font-weight: 600; color: var(--text); }
.feed-text .what { color: var(--text2); }
.feed-text .obj  { font-family: var(--mono); font-size: 11px; color: var(--text); }
.feed-text .muted { color: var(--text2); font-size: 11px; }

/* ════════════════════════════════════════════
   QUICK ACTIONS GRID
   ════════════════════════════════════════════ */
.quick-grid, .qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.quick-action, .qa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 80ms;
  font-family: var(--ui);
}
.quick-action:nth-child(odd), .qa:nth-child(odd) {
  border-right: 1px solid var(--line);
}
.quick-action:hover, .qa:hover { background: var(--bg3); }
.qa-ico { color: var(--text2); margin-bottom: 4px; }
.qa-title { font-size: 13px; font-weight: 600; color: var(--text); }
.qa-sub { font-size: 11px; color: var(--text2); }

/* ════════════════════════════════════════════
   OPTIONS DROPDOWN
   ════════════════════════════════════════════ */
.options-menu {
  position: absolute;
  background: var(--bg3);
  border: 1px solid var(--line3);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
}
.options-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  transition: background 80ms, color 80ms;
  white-space: nowrap;
}
.options-item:hover {
  background: var(--bg2);
  color: var(--text);
}
.options-item.danger:hover {
  background: var(--red-bg);
  color: var(--red-fg);
}

/* ════════════════════════════════════════════
   SUB-TABS
   ════════════════════════════════════════════ */
.sub-tabs {
  display: flex;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 14px;
}
.sub-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 80ms;
}
.sub-tab:hover { color: var(--text); }
.sub-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.sub-tab .count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  background: var(--bg3);
  padding: 1px 5px;
}
.sub-tab.active .count { color: var(--text2); }

/* ════════════════════════════════════════════
   ASIDE ROWS — key/value pairs in panels
   ════════════════════════════════════════════ */
.aside-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.aside-row:last-child { border-bottom: none; }
.aside-row .k { color: var(--text2); }
.aside-row .k.strong { font-weight: 600; color: var(--text); }
.aside-row .v { color: var(--text); }
.aside-row .v.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════
   TOGGLE
   ════════════════════════════════════════════ */
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle .track {
  width: 32px;
  height: 18px;
  background: var(--bg3);
  border: 1px solid var(--line3);
  border-radius: 9px;
  flex-shrink: 0;
  position: relative;
  transition: background 150ms, border-color 150ms;
}
.toggle .thumb {
  width: 14px;
  height: 14px;
  background: var(--text3);
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: transform 150ms, background 150ms;
}
.toggle.on .track { background: var(--accent-glow); border-color: var(--accent-dim); }
.toggle.on .thumb { background: var(--accent); transform: translateX(14px); }
.toggle .lbl { font-size: 13px; color: var(--text); font-weight: 500; }
.toggle .lbl-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════
   COMBOBOX / CUSTOMER SUGGEST
   ════════════════════════════════════════════ */
.combobox-wrap { position: relative; }

.suggest-list {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-top: none;
  position: absolute;
  left: 0; right: 0;
  z-index: 1200; /* above .totals-sticky-card (z 10) and modals chrome */
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover { background: var(--bg3); }
.suggest-item .name  { font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.suggest-item .name.muted { color: var(--text2); }
.suggest-item .phone {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.suggest-item .meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.04em;
}
.suggest-create {
  border: 1px dashed var(--line2);
  margin: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text2);
  font-size: 12px;
  transition: background 80ms;
}
.suggest-create:hover { background: var(--bg3); }

/* ════════════════════════════════════════════
   SALES REGISTER
   ════════════════════════════════════════════ */
.item-results { border-bottom: 1px solid var(--line); }

.search-mode-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.search-mode-tabs .tab {
  flex: 1;
  padding: 6px 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.search-mode-tabs .tab:hover { color: var(--text); }
.search-mode-tabs .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.item-row {
  display: grid;
  grid-template-columns: 1fr 100px 80px;
  align-items: center;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text2);
}
.item-row:last-child  { border-bottom: none; }
.item-row:hover       { background: var(--bg2); }
.item-row .sku   { font-family: var(--mono); font-size: 10.5px; color: var(--text2); }
.item-row .stock { font-family: var(--mono); font-size: 11px; color: var(--text2); }
.item-row .stock.low { color: var(--amber-fg); }
.item-row .price {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.line-row {
  display: grid;
  /* qty column fits the 28+46+28 stepper (was 70px → input squeezed to 22px) */
  grid-template-columns: 1fr 110px 90px 90px 30px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
.line-row.head {
  background: var(--bg);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 6px 14px;
}
.line-row:not(.head):hover { background: var(--bg2); }
.line-row .name { font-size: 13px; color: var(--text); }
.line-row .sku  { font-family: var(--mono); font-size: 10.5px; color: var(--text2); }

/* ── Qty stepper ── */
.qty-stepper {
  display: flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--line2);
}
.qty-stepper button {
  width: 28px;
  height: 100%;
  background: var(--bg2);
  border: none;
  color: var(--text2);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background 80ms, color 80ms;
}
.qty-stepper button:hover { background: var(--bg3); color: var(--text); }
.qty-stepper input {
  flex: 0 0 46px; /* fixed — don't let the flex row squeeze the digits */
  width: 46px;
  height: 100%;
  background: var(--bg);
  border: none;
  border-left: 1px solid var(--line2);
  border-right: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--mono);
  /* !important: the global `input:not(...):not(...):not(...)` 13px rule has
     three :not() pseudo-classes = (0,3,1) specificity and wins otherwise */
  font-size: 16px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  padding: 0;
}

/* ── Totals panel ── */
.totals { padding: 0; }
.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.totals-row .label { color: var(--text2); }
.totals-row .val {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.totals-row.grand {
  border-top: 1px solid var(--line3);
  padding: 12px 16px;
}
.totals-row.grand .label { color: var(--text); font-weight: 600; }
.totals-row.grand .val   { font-size: 18px; font-weight: 600; }

/* ── Payment buttons ── */
/* Flex (not a fixed 3-col grid): with the Account button the row holds 4
   buttons — the grid wrapped the 4th onto its own row looking cut off. */
.pay-grid {
  display: flex;
  border-top: 1px solid var(--line);
}
.pay-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 52px;
  background: var(--bg2);
  border: none;
  border-right: 1px solid var(--line);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.pay-btn:last-child { border-right: none; }
.pay-btn:hover { background: var(--bg3); }
.pay-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.pay-btn.primary:hover { background: #a62e23; }
.pay-btn .kbd { font-family: var(--mono); font-size: 10px; border: 1px solid rgba(255,255,255,0.15); padding: 1px 4px; color: rgba(255,255,255,0.5); }
.pay-btn:not(.primary) .kbd { border-color: var(--line2); color: var(--text3); }

/* Toast styles moved to end of file — see TOAST upgraded section */

/* ════════════════════════════════════════════
   PIN LOGIN SCREEN
   ════════════════════════════════════════════ */
#login-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.login-logo {
  text-align: center;
  margin-bottom: 40px;
}
.brand-mark-lg {
  width: 36px;
  height: 36px;
  background: var(--accent);
  margin: 0 auto 14px;
  position: relative;
}
.brand-mark-lg::before { content: ''; position: absolute; inset: 6px; background: var(--bg); }
.brand-mark-lg::after  { content: ''; position: absolute; inset: 11px; background: var(--accent); }
.login-logo h1 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.login-logo p {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.staff-grid {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.staff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  cursor: pointer;
  transition: background 80ms, border-color 80ms, color 80ms;
  min-width: 90px;
}
.staff-btn:hover { background: var(--bg3); border-color: var(--line3); color: var(--text); }
.staff-btn.selected {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
}
.staff-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  background: var(--bg3);
  border: 1px solid var(--line2);
}
.staff-btn.selected .staff-avatar {
  background: var(--accent-glow);
  border-color: var(--accent-dim);
  color: var(--accent);
}
.staff-name { font-size: 13px; font-weight: 600; color: var(--text); }
.staff-role {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pin-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 220px;
}
.pin-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  min-height: 16px;
}
.pin-display { display: flex; gap: 10px; justify-content: center; }
.pin-dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line3);
  background: none;
  transition: background 100ms, border-color 100ms;
}
.pin-dot.filled { background: var(--text); border-color: var(--text); }
.pin-dot.error  { background: var(--accent); border-color: var(--accent); }
.pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 200px;
}
.pin-key {
  height: 44px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 80ms, color 80ms;
  border-radius: 0;
}
.pin-key:hover { background: var(--bg3); }
.pin-key.delete { font-size: 14px; color: var(--text2); }
.pin-error {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  min-height: 16px;
  text-align: center;
}

/* ════════════════════════════════════════════
   SKELETON LOADING
   ════════════════════════════════════════════ */
.skel {
  background: var(--bg3);
  background-image: linear-gradient(
    90deg,
    var(--bg3) 0%,
    rgba(255,255,255,0.04) 40%,
    var(--bg3) 80%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 0;
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skel-text  { height: 12px; width: 100%; margin-bottom: 6px; }
.skel-title { height: 20px; width: 60%; margin-bottom: 10px; }
.skel-stat  { height: 36px; width: 80px; }

/* ════════════════════════════════════════════
   PLACEHOLDER MODULE
   ════════════════════════════════════════════ */
.placeholder-screen {
  padding: 60px;
  text-align: center;
  color: var(--text2);
  border: 1px solid var(--line2);
  background: var(--bg2);
}
.placeholder-screen .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════
   LAYOUT HELPERS
   ════════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.col    { display: flex; flex-direction: column; }
.row    { display: flex; align-items: center; gap: 8px; }
.mb-22  { margin-bottom: 22px; }
.mb-16  { margin-bottom: 16px; }
.gap-16 { gap: 16px; }

/* ════════════════════════════════════════════
   PRINT — hide chrome, full content
   ════════════════════════════════════════════ */
@media print {
  #sidebar, .sidebar, .topbar, .status-strip,
  .panel-overlay, .toast-container { display: none !important; }
  #main, .main { height: auto; overflow: visible; }
  .content { overflow: visible; }
  body { background: #fff; color: #000; font-size: 11px; }
  .badge {
    color: #000 !important;
    background: transparent !important;
    border: 1px solid #999 !important;
  }
}

/* ════════════════════════════════════════════
   MOBILE — bottom navigation
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
  #sidebar, .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    /* height is auto — driven by content + safe-area padding */
    height: auto;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--line2);
    z-index: 200;
    /* Always keep clearance under the labels — env() is 0 in plain Safari,
       which left Home/WOs touching the screen edge ("cut off"). */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  /* Liquid-glass bar (same feel as chainline.ca): content scrolls behind it. */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #sidebar, .sidebar {
      background: color-mix(in srgb, var(--bg) 72%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(1.5);
      backdrop-filter: blur(16px) saturate(1.5);
    }
  }
  /* v2 zoned nav: pins live across zones — zones dissolve on mobile
     (display:contents) so pinned items flow into ONE bottom-bar row;
     per-item .mobile-hidden does the filtering (unify §M1). */
  .sidebar-brand, .sidebar-foot, .nav-label { display: none; }
  .sidebar-nav-scroll {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow-x: hidden;         /* 6 pinned tabs shrink to fit — no horizontal
                                   scroll, so tapping never shifts the bar */
    scrollbar-width: none;
    padding: 0;
  }
  .sidebar-nav-scroll::-webkit-scrollbar { display: none; }
  .nav-section { display: contents; }
  .nav-item {
    flex-direction: column;
    gap: 3px;
    padding: 9px 4px 10px;      /* bottom ≥ top so labels never kiss the edge */
    font-size: 10.5px;
    line-height: 1.2;
    min-width: 0;               /* let flex:1 divide width evenly (fits 6 tabs) */
    min-height: 52px;           /* WCAG touch target (height) */
    justify-content: center;
    align-items: center;
    border-left: none;
    border-top: 3px solid transparent;
    letter-spacing: 0.02em;
    flex: 1;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-item .nav-item-label-mobile {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-item.active {
    border-left: none;
    border-top: 3px solid var(--accent);
    color: var(--accent);
  }
  .nav-item svg { width: 24px; height: 24px; }  /* 24px icon */
  .nav-count { display: none; }
  .nav-item-label { display: none; }
  .nav-item-label-mobile { display: inline; font-size: 11px; }
  /* Reserve bottom-nav height (48px items + safe-area) */
  #main, .main { padding-bottom: max(64px, calc(env(safe-area-inset-bottom, 0px) + 64px)); }
  .page { padding: 16px 12px 80px; }
  .page-head { flex-direction: column; gap: 8px; align-items: stretch; }
  .page-head > .actions, .page-head > .row, .page-head > * { width: 100%; flex-wrap: wrap; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2,
  .grid-2.split { grid-template-columns: 1fr !important; }
  /* New Work Order + Customer forms — collapse 2-col grid to 1-col on mobile */
  .grid-form { grid-template-columns: 1fr !important; gap: 12px !important; }
  .grid-form .span-2 { grid-column: auto; }
  /* Inputs / selects / textareas — full-width touch targets */
  .grid-form input, .grid-form select, .grid-form textarea,
  .input, .select, textarea.input, .input-search {
    width: 100% !important; box-sizing: border-box; min-height: 44px;
    font-size: 16px; /* iOS Safari won't zoom on focus when font-size >= 16px */
  }
  /* Date / time / number inputs — force 44px even when browser overrides */
  input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="number"], input[type="tel"], input[type="email"], input[type="search"] {
    min-height: 44px;
    font-size: 16px;
    box-sizing: border-box;
  }
  .grid-form label { font-size: 12px; }
  /* Action button rows on form pages — wrap + full-width on narrow screens */
  .form-actions, .wo-actions, .action-row {
    flex-direction: column; gap: 8px; align-items: stretch;
  }
  .form-actions .btn, .wo-actions .btn, .action-row .btn { width: 100%; justify-content: center; }
  /* Customer suggestion dropdown — full width, escape sticky bars */
  .suggest-list {
    position: absolute; left: 0; right: 0;
    max-height: 280px; overflow-y: auto;
    z-index: 700;  /* above sticky page-head, parked-tray, sub-tabs */
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  }
  .combobox-wrap { position: relative; }
  .panel { width: 100%; }
  .topbar .topbar-search { display: none; }
  .topbar .station { display: none; }

  /* ── Sub-tabs (WO list status tabs) — horizontal scroll, no wrap ── */
  .sub-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tab {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    padding: 10px 14px;
  }
  /* Floor view toggle (Kanban/Floor Map) + filter chips were < 44px tall */
  .fm-tab, .floor-filter-bar button, .floor-filter-chip {
    min-height: 44px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .floor-filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .floor-filter-bar::-webkit-scrollbar { display: none; }

  /* ── Wide data tables scroll instead of clipping ──
     Bare <table class="tbl"> (dashboard, customers, reports, POs) have no
     scroll wrapper, so their right-hand columns were hidden by an ancestor's
     overflow-x:hidden — unreachable on a phone. Make the table its own
     horizontal scroll container. thead/tbody forced back to table-display so
     header and body columns stay aligned; min-width keeps the layout instead
     of crushing columns. (.inv-table-app already lives in .inv-scroll.) */
  .tbl:not(.inv-table-app) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .tbl:not(.inv-table-app) > thead,
  .tbl:not(.inv-table-app) > tbody {
    display: table;
    width: 100%;
    min-width: max-content;
    table-layout: auto;
  }

  /* ── Tables — touch-friendly rows ── */
  .data-table td, .tbl td {
    padding: 12px 10px;
    min-height: 44px;
  }
  .data-table tr, .tbl tbody tr { min-height: 44px; }
  /* Cells with embedded buttons (options menu, chevrons) — bigger tap target */
  .tbl tbody tr td:last-child { padding-right: 14px; }
  .tbl tbody tr td:last-child .options-menu-wrap button,
  .tbl tbody tr td:last-child button {
    min-width: 44px; min-height: 44px;
  }

  /* ── Filters — wrap chips, search full width ── */
  .filters { flex-wrap: wrap; gap: 8px; }
  .filters .search-field { flex: 1 1 100% !important; max-width: 100% !important; }
  .filters .pill { flex: 0 0 auto; min-height: 44px; }

  /* ── Modals — full-screen with sticky header + footer ──
     Targets:
       1. .modal-overlay → .modal-box (declared modals from this file)
       2. .pos-modal-backdrop → .pos-modal (pos-design.js DOM modals)
       3. Inline-styled overlays (ReceiptModal, LineEditModal) — match by
          attribute selector since they use style="...position:fixed...".
  */
  .modal-overlay {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  .modal-box,
  .pos-modal,
  .modal-overlay > div,
  div[style*="position:fixed"][style*="inset:0"] > div,
  div[style*="position: fixed"][style*="inset: 0"] > div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* The body becomes scrollable, header+footer stay fixed via natural flex layout */
  .modal-head, .pos-modal-header {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg-1, var(--bg));
    flex-shrink: 0;
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .modal-body, .pos-modal-body {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-foot, .pos-modal-footer {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--bg-1, var(--bg));
    border-top: 1px solid var(--line);
    flex-shrink: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  /* Close button — top right, big tap target */
  .modal-head .btn.ghost,
  .pos-modal-x {
    min-width: 44px; min-height: 44px;
    font-size: 22px;
  }

  /* ── Slide panel (Customer / Item detail) — full screen on mobile ── */
  .slide-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    border-left: 0 !important;
  }
  .panel-head {
    position: sticky; top: 0; z-index: 5;
    background: var(--bg-1, var(--bg));
    padding-top: max(18px, env(safe-area-inset-top));
  }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ── OptionsMenu ── */
.options-menu-wrap {
  position: relative;
  display: inline-block;
}
.options-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--bg2);
  border: 1px solid var(--line3);
  z-index: 500;
  min-width: 170px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.options-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--ui);
  transition: background 80ms;
}
.options-item:hover { background: var(--bg3); color: var(--text); }
.options-item.danger { color: var(--accent); }
.options-item.danger:hover { background: var(--accent-glow); }
.options-divider {
  height: 1px;
  background: var(--line2);
  margin: 3px 0;
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 800;
}
.modal-box {
  background: var(--bg2);
  border: 1px solid var(--line3);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.modal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* ── Slide Panel (right drawer) ── */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 600;
  display: flex;
  justify-content: flex-end;
}
.slide-panel {
  width: 520px;
  max-width: 100vw;
  height: 100%;
  background: var(--bg-1);
  border-left: 1px solid var(--line3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 32px;
}
.panel-section {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.panel-section:first-child { border-top: none; }
.panel-section-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 10px;
}

/* ── WO Detail specifics ── */
.wo-detail-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.wo-detail-info {}
.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text);
}
.task-row:last-of-type { border-bottom: none; }
.task-check {
  width: 18px;
  height: 18px;
  background: var(--bg2);
  border: 1px solid var(--line3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--green-fg);
  transition: background 80ms;
}
.task-check.done { background: var(--green-bg); border-color: var(--green-line); }
.task-check:hover { background: var(--bg3); }
.task-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.wo-line-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.wo-line-row:last-of-type { border-bottom: none; }
.line-add-wrap { margin-top: 8px; position: relative; }
.wo-totals { margin-top: 8px; border: 1px solid var(--line); }

/* ── Connection status ── */
.conn-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-left: auto;
}
.conn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conn-green { background: var(--green-fg); }
.conn-red { background: var(--accent); }

/* ── Global search results ── */
.global-search-result {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 80ms;
}
.global-search-result:hover,
.global-search-result.selected { background: var(--bg3); }
.gs-type {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}
.gs-label { font-size: 13px; color: var(--text); font-weight: 500; }
.gs-sub { font-family: var(--mono); font-size: 11px; color: var(--text2); }

/* ── End of Day modal ── */
.eod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin-bottom: 16px;
}
.eod-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eod-denom {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  width: 42px;
  flex-shrink: 0;
}
.eod-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  width: 68px;
  text-align: right;
  flex-shrink: 0;
}
.eod-summary {
  border: 1px solid var(--line);
  margin-top: 8px;
}

/* ── Reports SVG chart ── */
.chart-wrap { overflow: hidden; }

/* ════════════════════════════════════════════
   SKELETON LOADERS
   ════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skel-line {
  height: 12px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
td .skel-line {
  height: 11px;
  margin: 4px 0;
}
/* pulse kept for backward compat */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ════════════════════════════════════════════
   ERROR STATE
   ════════════════════════════════════════════ */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 8px;
}
.error-state-icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}
.error-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.error-state-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  max-width: 360px;
}

/* ════════════════════════════════════════════
   SLOW CONNECTION BANNER
   ════════════════════════════════════════════ */
.slow-conn-banner {
  background: rgba(210,154,58,0.08);
  border-bottom: 1px solid rgba(210,154,58,0.25);
  border-left: 3px solid var(--amber-fg);
  padding: 7px 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ════════════════════════════════════════════
   OFFLINE BANNER (upgraded)
   ════════════════════════════════════════════ */
.offline-banner {
  background: rgba(200,57,44,0.08);
  border-bottom: 1px solid rgba(200,57,44,0.25);
  border-left: 3px solid var(--accent);
  padding: 7px 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.offline-dot { color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.offline-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--text3);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 4px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════
   TOAST — upgraded
   ════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
@media (max-width: 680px) {
  .toast-container {
    top: 12px;
    left: 12px;
    right: 12px;
  }
}
.toast {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border: 1px solid var(--line3);
  background: var(--bg3);
  color: var(--text2);
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn 180ms ease-out;
  cursor: pointer;
  pointer-events: all;
  position: relative;
}
.toast-icon {
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.toast-msg { flex: 1; }
.toast-close {
  color: var(--text3);
  font-size: 14px;
  flex-shrink: 0;
  padding: 0 2px;
  opacity: 0.6;
}
.toast:hover .toast-close { opacity: 1; }
.toast.success {
  background: var(--green-bg);
  border-color: var(--green-line);
  color: var(--green-fg);
}
.toast.success .toast-icon { color: var(--green-fg); }
.toast.error {
  background: var(--red-bg);
  border-color: rgba(214,70,58,0.32);
  color: var(--red-fg);
}
.toast.error .toast-icon { color: var(--red-fg); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 680px) {
  @keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ════════════════════════════════════════════
   DUE DATE CHIPS (WO list)
   ════════════════════════════════════════════ */
.due-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  font-weight: 600;
}
.due-overdue {
  background: var(--red-bg);
  color: var(--red-fg);
  border: 1px solid rgba(214,70,58,0.3);
}
.due-today {
  background: var(--amber-bg);
  color: var(--amber-fg);
  border: 1px solid var(--amber-line);
}

/* ════════════════════════════════════════════
   QUICK-ADD CHIPS (Sales register)
   ════════════════════════════════════════════ */
.quick-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.quick-items-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  flex-shrink: 0;
  margin-right: 4px;
}
.quick-item-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 10px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--ui);
  font-size: 11px;
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
  min-height: 44px;
  justify-content: center;
}
.quick-item-chip:hover {
  background: var(--bg);
  border-color: var(--line3);
}
.quick-item-name { font-weight: 500; line-height: 1.2; }
.quick-item-price {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
}

/* ════════════════════════════════════════════
   BOTTOM NAV — safe area
   ════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav, #bottom-nav {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* ════════════════════════════════════════════
   TAP TARGETS — 44px minimum
   ════════════════════════════════════════════ */
.btn, .nav-item, .qa, .sub-tab, .pill,
.pay-btn, .quick-item-chip, .parked-chip {
  min-height: 44px;
}
/* options-btn gets proper hit area on mobile — no exception needed */
@media (max-width: 768px) {
  .options-menu-wrap > .options-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .topbar .btn.ghost {
    min-height: 44px;
  }
  /* Sales qty input */
  input[type="number"].qty-input,
  .cart-row input[type="number"] {
    min-height: 44px;
  }
}

/* ════════════════════════════════════════════
   VENDOR CATALOG SCREEN
   ════════════════════════════════════════════ */
.screen.vendor-catalog { display: flex; flex-direction: column; gap: 0; }

.vendor-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  overflow-x: auto;
}
.vendor-chips .chip { flex-shrink: 0; font-size: 11px; padding: 5px 10px; }
.vendor-chips .chip-count {
  background: var(--line3);
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  line-height: 1.4;
}
.vendor-chips .chip.active .chip-count {
  background: var(--accent);
  color: var(--bg);
}

.vendor-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  overflow-y: auto;
  flex: 1;
}

.vendor-item-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 80ms;
}
.vendor-item-card:hover { border-color: var(--line3); }

.item-info { flex: 1; }
.item-name { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.35; margin-bottom: 3px; }
.item-sku  { font-family: var(--mono); font-size: 10px; color: var(--text3); }
.item-upc  { font-family: var(--mono); font-size: 10px; color: var(--text3); }

.item-pricing {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vendor-price { font-size: 10px; color: var(--text3); }
.our-price    { font-size: 12px; font-weight: 600; color: var(--text); }
.stock-badge  {
  font-size: 10px;
  font-family: var(--mono);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}
.stock-badge.in-stock { background: rgba(34,197,94,.12); color: #22c55e; }
.stock-badge.oos      { background: var(--line); color: var(--text3); }

.item-actions { display: flex; gap: 6px; }
.btn-sm {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--bg3);
  border: 1px solid var(--line2);
  color: var(--text2);
  cursor: pointer;
  transition: background 80ms, color 80ms;
  font-family: var(--ui);
}
.btn-sm:hover { background: var(--accent-glow); border-color: var(--accent); color: var(--text); }


/* ════════════════════════════════════════════
   MOBILE OPTIMIZATION PASS — 2026-05-30
   Covers: WO card list, swipe hints, pull-to-refresh,
   skeleton card, topbar safe-area, search full-width,
   settings grid, EOD grid, reports date row
   ════════════════════════════════════════════ */

/* ── Topbar: safe-area inset-top on notched phones ── */
@media (max-width: 768px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
  }
}

/* ── Search field: full-width on mobile ── */
@media (max-width: 768px) {
  .filters .search-field {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* ── WO Calendar (Apple-style multi-view) mobile ── */
@media (max-width: 768px) {
  .wo-cal-wrap { padding: 0 12px 60px !important; }
  .wo-cal-month > div { min-height: 64px !important; padding: 4px !important; }
  .wo-cal-month button { font-size: 9px !important; }
}
@media (max-width: 480px) {
  .wo-cal-month > div { min-height: 52px !important; }
}

/* ── Pull-to-refresh indicator ── */
.ptr-indicator {
  text-align: center;
  padding: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text2);
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.ptr-indicator.ptr-pulling { color: var(--accent); }

/* ── WO Mobile Card List ── */
.wo-card-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.wo-card-mobile {
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px 10px;
  cursor: pointer;
  position: relative;
  min-height: 88px;
  transition: background 80ms;
  user-select: none;
  -webkit-user-select: none;
}
.wo-card-mobile:active { background: var(--bg3); }
.wo-card-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.wo-card-mobile-id {
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 0.06em;
}
.wo-card-mobile-cust {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.wo-card-mobile-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.06em;
}
.wo-card-mobile-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.wo-card-mobile-actions .btn,
.wo-card-mobile-actions .btn-icon {
  min-height: 40px;
  min-width: 40px;
  padding: 0 10px;
}
.wo-card-swipe-hint {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
  padding-top: 6px;
  opacity: 0.6;
}
.wo-card-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text2);
}

/* ── SkeletonCard rows ── */
.skel-card-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.skel-card-main { flex: 1; }
.skel-card-side { flex-shrink: 0; }

/* ── Settings grid: override inline style on mobile ── */
@media (max-width: 768px) {
  /* Inline style uses gridTemplateColumns: '1fr 1fr' — force 1-col */
  .card > div[style*="grid-template-columns"][style*="1fr 1fr"],
  .card > div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
  }
  /* EOD modal 2-col grid → 1-col */
  .eod-grid {
    grid-template-columns: 1fr !important;
  }
  /* Reports custom date range — stack vertically */
  .reports-date-range {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .reports-date-range input { width: 100% !important; }
  /* Aside-row in settings: wrap on very narrow */
  .aside-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Pay buttons: stacked on mobile ── */
@media (max-width: 480px) {
  .pay-grid {
    flex-direction: column !important;
  }
  .pay-btn {
    border-right: none !important;
    border-bottom: 1px solid var(--line2);
    min-height: 56px;
  }
  .pay-btn:last-child { border-bottom: none; }
}

/* ── Bottom nav: taller touch targets, safe area ── */
@media (max-width: 768px) {
  #sidebar, .sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .nav-item {
    min-height: 52px;
    padding: 10px 6px 8px;
    flex: 1;
  }
  .nav-item svg {
    width: 26px !important;
    height: 26px !important;
  }
  .nav-item-label-mobile {
    font-size: 10px;
  }
}

/* ── Buttons: minimum 44px touch targets ── */
@media (max-width: 768px) {
  .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }
  .btn.ghost {
    min-height: 44px;
  }
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
  }
  /* Page head action buttons full-width stack */
  .page-head .actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .page-head .actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Safe overflow wrapper for tables not inside .card ── */
.tbl-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Table scroll: Customers / Inventory / POs on mobile ── */
@media (max-width: 768px) {
  /* Wrap tables in overflow-x scroll so they don't bust layout */
  .card > table.tbl,
  .card > .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  /* Ensure table resets to proper display inside overflow wrapper */
  .card > table.tbl thead,
  .card > table.tbl tbody,
  .card > table.tbl tr {
    display: table-row-group;
  }
  .card > table.tbl thead { display: table-header-group; }
  .card > table.tbl {
    display: table;
    min-width: 500px;
  }
  /* But for Customers/Inventory, show as card-style instead */
  .tbl-mobile-card {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .tbl-mobile-card thead { display: none; }
  .tbl-mobile-card tbody { display: flex; flex-direction: column; }
  .tbl-mobile-card tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--bg2);
  }
  .tbl-mobile-card td {
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    font-size: 13px;
    min-height: 0;
    white-space: normal;
  }
  .tbl-mobile-card td:first-child { flex: 1 1 100%; font-weight: 500; }
  .tbl-mobile-card td:last-child { margin-left: auto; }
}

/* ════════════════════════════════════════════
   MOBILE LAYOUT — iPad/tablet @max-width: 1024px
   ════════════════════════════════════════════ */

/* Sales 2-column layout → 1-column on tablet */
@media (max-width: 1024px) {
  .sales-2col {
    flex-direction: column;
    gap: 16px;
  }
  .sales-2col > .col:last-child {
    order: -1;
  }
  .sales-2col > .card:first-child {
    order: 1;
  }
}

/* Stack payment buttons vertically on mobile */
@media (max-width: 1024px) {
  .pay-grid {
    flex-direction: column;
    gap: 8px;
  }
  .pay-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 12px;
    min-height: 52px;
    border-bottom: 1px solid var(--line) !important;
  }
  .pay-btn:last-child { border-bottom: none !important; }
}

/* Hide secondary columns in cart table on small screens */
@media (max-width: 1024px) {
  .line-row span:nth-child(2),
  .line-row span:nth-child(3) {
    display: none;
  }
  .line-row.head span:nth-child(2),
  .line-row.head span:nth-child(3) {
    display: none;
  }
  .line-row {
    grid-template-columns: 1fr 80px;
  }
}

/* ════════════════════════════════════════════
   RETURN/REFUND WORKFLOW UI
   ════════════════════════════════════════════ */

.return-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 2000;
}

@media (min-width: 769px) {
  .return-modal-overlay {
    align-items: center;
    justify-content: center;
  }
}

.return-modal {
  background: var(--bg);
  border: 1px solid var(--line2);
  border-radius: 0;
  width: 100%;
  max-width: 600px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

@media (max-width: 768px) {
  .return-modal {
    border-radius: 12px 12px 0 0;
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.return-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.return-modal-title {
  font-size: 16px;
  font-weight: 700;
}

.return-modal-subtitle {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}

.return-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text3);
  flex-shrink: 0;
}

.return-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.return-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.return-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
}

.return-line-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
}

.return-line-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent);
}

.return-line-info {
  flex: 1;
  min-width: 0;
}

.return-line-name {
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 4px;
}

.return-line-sku {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--mono);
}

.return-line-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.return-line-qty-label {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.return-line-qty-input {
  width: 50px;
  padding: 4px 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  text-align: center;
}

.return-reason-select {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.return-reason-option {
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.return-reason-option:hover {
  background: var(--bg3);
  border-color: var(--line2);
}

.return-reason-option.selected {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.return-reason-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line2);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.return-reason-option.selected .return-reason-radio {
  border-color: var(--accent);
  background: var(--accent);
}

.return-reason-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--bg);
  border-radius: 50%;
  display: none;
}

.return-reason-option.selected .return-reason-radio::after {
  display: block;
}

.return-approval-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
}

.return-approval-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.return-approval-toggle-label {
  flex: 1;
  font-size: 13px;
  cursor: pointer;
}

.return-approval-toggle-sublabel {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

.return-method-select {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.return-method-option {
  padding: 10px 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.return-method-option:hover {
  background: var(--bg3);
  border-color: var(--line2);
}

.return-method-option.selected {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.return-method-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line2);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.return-method-option.selected .return-method-radio {
  border-color: var(--accent);
  background: var(--accent);
}

.return-method-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--bg);
  border-radius: 50%;
  display: none;
}

.return-method-option.selected .return-method-radio::after {
  display: block;
}

.return-modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .return-modal-footer {
    flex-direction: column;
    gap: 8px;
  }
  .return-modal-footer .btn {
    width: 100%;
  }
}

.return-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(214, 70, 58, 0.12);
  border: 1px solid var(--red-fg);
  color: var(--red-fg);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.approval-pending-badge {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(210, 154, 58, 0.12);
  border: 1px solid var(--amber-fg);
  color: var(--amber-fg);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════
   MOBILE OVERHAUL — 2026-06-07
   iOS auto-zoom prevention, overflow containment,
   spacing tightening, modal scroll, safe nav.
   ════════════════════════════════════════════ */

/* Belt-and-braces: ensure inputs never trigger iOS Safari zoom-on-focus.
   The hover:hover rule already gates this on desktop; this covers any
   edge-case where a component inlines a smaller font-size. */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Prevent any element from forcing horizontal overflow.
     Use overflow-x on .main and .page, not body (body-hidden hides bugs). */
  .main, #main {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .page, .page-inner, .page-body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Table overflow: wrap tables in a scrollable container.
     Tables already have .tbl-scroll-wrap in many places; this is a fallback
     for any bare table that escaped wrapping. */
  .tbl-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Cards: tighter padding on mobile */
  .card {
    padding: 12px;
  }
  .card-head {
    padding: 12px 12px 10px;
  }
  .card-body {
    padding: 12px;
  }

  /* Full-width buttons inside forms and modals */
  .modal-footer .btn,
  .form-actions .btn,
  .action-row .btn {
    width: 100%;
  }

  /* Modals: limit height, internal scroll */
  .modal-inner, .modal-content {
    max-height: 90dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Sticky action bars instead of buttons lost below fold */
  .wo-action-bar, .sale-action-bar, .form-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--bg);
    padding: 10px 14px;
    border-top: 1px solid var(--line2);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  /* Topbar title: truncate long crumbs */
  .topbar-crumb, .page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 80px);
  }
}

/* ============================================================
 * SECTION: pos-styles-v2.css
 * ============================================================ */
/**
 * ChainLine POS — Design System v2 Styles
 * Supplements pos-styles.css with: modals, toasts, command palette,
 * skeletons, stat cards, badges, avatars, kbd chips, print, mobile, animations.
 */

/* ─────────────────────────────────────────────
   KEYFRAMES
   ───────────────────────────────────────────── */

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

@keyframes slideUp {
  from { opacity: 1; transform: translateY(0)     scale(1);    }
  to   { opacity: 0; transform: translateY(-14px) scale(0.97); }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(110%); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes cpFadeIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)      scale(1);   }
}


/* ─────────────────────────────────────────────
   FOCUS STYLES — override browser default blue
   ───────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid #c8392c;
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}


/* ─────────────────────────────────────────────
   PAGE TRANSITIONS
   ───────────────────────────────────────────── */

.pos-page {
  animation: fadeSlideUp 0.15s ease both;
}


/* ─────────────────────────────────────────────
   MODAL
   ───────────────────────────────────────────── */

.pos-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.15s ease both;
}

.pos-modal-backdrop.pos-modal-backdrop-exit {
  animation: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.pos-modal {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255,255,255,0.04);
  animation: slideDown 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

.pos-modal.pos-modal-exit {
  animation: slideUp 0.15s ease both;
}

.pos-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
}

.pos-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #f5f4f2;
  letter-spacing: -0.01em;
}

.pos-modal-x {
  background: none;
  border: none;
  color: #8a8885;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 140ms, background 140ms;
}

.pos-modal-x:hover {
  color: #f5f4f2;
  background: #2a2a2a;
}

.pos-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  color: #c8c6c4;
  font-size: 14px;
  line-height: 1.6;
}

.pos-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid #2a2a2a;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   BUTTONS (used by Modal + general)
   ───────────────────────────────────────────── */

.pos-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 140ms, border-color 140ms, color 140ms;
  white-space: nowrap;
}

.pos-btn-primary {
  background: #c8392c;
  color: #fff;
  border-color: #c8392c;
}

.pos-btn-primary:hover {
  background: #e04436;
  border-color: #e04436;
}

.pos-btn-danger {
  background: transparent;
  color: #dc2626;
  border-color: #3a2020;
}

.pos-btn-danger:hover {
  background: rgba(220, 38, 38, 0.12);
  border-color: #dc2626;
}

.pos-btn-ghost {
  background: transparent;
  color: #8a8885;
  border-color: #2a2a2a;
}

.pos-btn-ghost:hover {
  background: #2a2a2a;
  color: #f5f4f2;
}


/* ─────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ───────────────────────────────────────────── */

#pos-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.pos-toast {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 380px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.pos-toast-enter {
  animation: toastSlideIn 0.22s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

.pos-toast-exit {
  animation: toastSlideOut 0.18s ease both;
}

.pos-toast-success {
  background: #0d2318;
  border-color: #16a34a;
  color: #4ade80;
}

.pos-toast-error {
  background: #220f0f;
  border-color: #dc2626;
  color: #f87171;
}

.pos-toast-info {
  background: #0f1a2e;
  border-color: #2563eb;
  color: #60a5fa;
}

.pos-toast-icon {
  font-size: 12px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: currentColor;
  color: #0a0a0a;
}

.pos-toast-msg {
  flex: 1;
}

.pos-toast-close {
  background: none;
  border: none;
  color: currentColor;
  opacity: 0.5;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: opacity 140ms;
}

.pos-toast-close:hover {
  opacity: 1;
}


/* ─────────────────────────────────────────────
   COMMAND PALETTE
   ───────────────────────────────────────────── */

.pos-command-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  animation: fadeIn 0.12s ease both;
}

.pos-command-palette {
  background: #141414;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  width: 100%;
  max-width: 580px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
  animation: cpFadeIn 0.16s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

.pos-cp-input {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  color: #f5f4f2;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  caret-color: #c8392c;
}

.pos-cp-input::placeholder {
  color: #5a5856;
}

.pos-cp-results {
  list-style: none;
  max-height: 340px;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}

.pos-cp-results::-webkit-scrollbar { width: 4px; }
.pos-cp-results::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }

.pos-cp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 80ms;
  color: #c8c6c4;
  font-size: 14px;
}

.pos-cp-item-active,
.pos-cp-item:hover {
  background: #2a2a2a;
  color: #f5f4f2;
}

.pos-cp-icon {
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
  opacity: 0.7;
}

.pos-cp-label {
  flex: 1;
}

.pos-cp-meta {
  font-size: 11px;
  color: #5a5856;
}

.pos-cp-empty {
  padding: 20px 12px;
  text-align: center;
  color: #5a5856;
  font-size: 13px;
}

.pos-cp-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid #1f1f1f;
  font-size: 11px;
  color: #5a5856;
}

.pos-cp-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ─────────────────────────────────────────────
   STATUS BADGES
   ───────────────────────────────────────────── */

.pos-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}

.pos-status-READY {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
  border: 1px solid rgba(22, 163, 74, 0.3);
}

.pos-status-Open {
  background: rgba(37, 99, 235, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.pos-status-BOOKED {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.pos-status-Overdue {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.pos-status-Finished {
  background: rgba(75, 85, 99, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.pos-status-WAITING {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.pos-status-Cancelled {
  background: rgba(75, 85, 99, 0.1);
  color: #6b7280;
  border: 1px solid rgba(75, 85, 99, 0.2);
  text-decoration: line-through;
}

.pos-status-initials {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0 5px;
  font-size: 10px;
  letter-spacing: 0.02em;
}


/* ─────────────────────────────────────────────
   AVATAR
   ───────────────────────────────────────────── */

.pos-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.pos-avatar-sm { width: 26px; height: 26px; font-size: 10px; }
.pos-avatar-md { width: 34px; height: 34px; font-size: 12px; }
.pos-avatar-lg { width: 46px; height: 46px; font-size: 16px; }


/* ─────────────────────────────────────────────
   KBD CHIP
   ───────────────────────────────────────────── */

.pos-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  min-width: 22px;
  height: 20px;
  background: #1c1c1c;
  border: 1px solid #3a3a3a;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 11px;
  font-weight: 500;
  color: #c8c6c4;
  white-space: nowrap;
  box-shadow: 0 1px 0 #0a0a0a;
}


/* ─────────────────────────────────────────────
   KEYBOARD SHORTCUT HELP OVERLAY
   ───────────────────────────────────────────── */

.pos-shortcut-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.12s ease both;
}

.pos-shortcut-help {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
  overflow: hidden;
}

.pos-shortcut-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 13px;
  font-weight: 600;
  color: #f5f4f2;
}

.pos-sh-table {
  width: 100%;
  border-collapse: collapse;
  padding: 8px;
  display: block;
}

.pos-sh-table tr {
  display: flex;
  align-items: center;
  padding: 7px 16px;
  gap: 16px;
}

.pos-sh-table tr:hover { background: #1c1c1c; }

.pos-sh-keys {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 120px;
  flex-shrink: 0;
}

.pos-sh-desc {
  font-size: 13px;
  color: #8a8885;
}

.pos-sh-footer {
  padding: 10px 18px;
  font-size: 11px;
  color: #5a5856;
  border-top: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ─────────────────────────────────────────────
   SKELETON LOADER
   ───────────────────────────────────────────── */

.pos-skeleton-shimmer-bg {
  background: linear-gradient(
    90deg,
    #1c1c1c 0px,
    #252525 200px,
    #1c1c1c 400px
  );
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

.pos-skeleton-line {
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1c1c1c 0px, #252525 200px, #1c1c1c 400px);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}

.pos-skeleton-line.pos-skeleton-sm { height: 10px; }

.pos-skeleton-w-15  { width: 15%; }
.pos-skeleton-w-20  { width: 20%; }
.pos-skeleton-w-30  { width: 30%; }
.pos-skeleton-w-40  { width: 40%; }
.pos-skeleton-w-50  { width: 50%; }
.pos-skeleton-w-60  { width: 60%; }
.pos-skeleton-w-70  { width: 70%; }
.pos-skeleton-w-80  { width: 80%; }

.pos-skeleton-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(90deg, #1c1c1c 0px, #252525 200px, #1c1c1c 400px);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.pos-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}

.pos-skeleton-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pos-skeleton-lines {
  flex: 1;
}

.pos-skeleton-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
}

.pos-skeleton-table {
  padding: 4px 0;
}

.pos-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.pos-skeleton-card {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 16px;
}


/* ─────────────────────────────────────────────
   STAT CARD
   ───────────────────────────────────────────── */

.pos-stat-card {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 140ms;
}

.pos-stat-card:hover {
  border-color: #3a3a3a;
}

.pos-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pos-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: #8a8885;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pos-stat-icon {
  font-size: 15px;
  opacity: 0.6;
}

.pos-stat-body {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.pos-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: #f5f4f2;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pos-stat-delta {
  font-size: 12px;
  font-weight: 600;
  padding-bottom: 2px;
}

.pos-stat-delta-up   { color: #4ade80; }
.pos-stat-delta-down { color: #f87171; }


/* ─────────────────────────────────────────────
   MOBILE RESPONSIVE — 768px breakpoint
   ───────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Sidebar collapses to bottom nav */
  .pos-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100% !important;
    height: 56px;
    flex-direction: row;
    border-top: 1px solid var(--border, #2a2a2a);
    border-right: none;
    z-index: 500;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
  }

  .pos-sidebar-logo,
  .pos-sidebar-label,
  .pos-sidebar-footer {
    display: none;
  }

  .pos-sidebar-item {
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    font-size: 10px;
  }

  .pos-sidebar-item svg,
  .pos-sidebar-item .pos-sidebar-icon {
    font-size: 18px;
  }

  /* Main content clears bottom nav */
  .pos-main {
    padding-bottom: 64px !important;
  }

  .pos-header {
    padding: 0 14px;
  }

  /* Modals go full-screen on mobile */
  .pos-modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
  }

  .pos-modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  /* Toast stack from top-center */
  #pos-toast-container {
    top: 12px;
    left: 12px;
    right: 12px;
    align-items: center;
  }

  .pos-toast {
    max-width: 100%;
    width: 100%;
  }

  /* Command palette full width */
  .pos-command-palette {
    max-width: calc(100% - 24px);
  }

  .pos-command-palette-backdrop {
    padding-top: 8vh;
  }

  /* Stat grid — 2 columns */
  .pos-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ─────────────────────────────────────────────
   PRINT STYLES
   ───────────────────────────────────────────── */

@media print {
  .pos-no-print,
  .pos-sidebar,
  .pos-header,
  .pos-command-palette-backdrop,
  .pos-modal-backdrop,
  #pos-toast-container,
  .pos-shortcut-help-overlay {
    display: none !important;
  }

  .pos-print-only {
    display: block !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }

  .pos-main {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .pos-card,
  .pos-stat-card {
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .pos-badge {
    border: 1px solid #999 !important;
    background: none !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  a { text-decoration: none; color: inherit; }

  h1, h2, h3 { color: #000 !important; }

  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; color: #000; }
  thead { background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
 * SECTION: pos-styles-v3.css
 * ============================================================ */
/* ChainLine POS — Design system v3 additions
 * Tokens + classes for everything added in Round 3 (Lightspeed benchmark).
 * Load AFTER pos-styles-v2.css.
 *
 * In index.html, add:
 *   <link rel="stylesheet" href="/pos-styles-v3.css?v=1">
 */

/* ── New semantic colour: violet (for Estimate/Waiting/Consignment) ── */
:root {
  --violet-fg:   #a78bfa;
  --violet-bg:   rgba(167, 139, 250, 0.12);
  --violet-line: rgba(167, 139, 250, 0.32);

  --teal-fg:     #4dc6c6;
  --teal-bg:     rgba(77, 198, 198, 0.12);
  --teal-line:   rgba(77, 198, 198, 0.32);
}

/* ── Expanded badge variants — each status gets a distinct accent ──
 * Override base (.badge.open=blue, .badge.booked=amber, .badge.inprogress=grey)
 * to give every status its own colour so the floor + WO list read at a glance.
 * Mapping (post-Lightspeed parity):
 *   booked       → violet   (parked / scheduled)
 *   open         → amber    (intake done, queued)
 *   inprogress   → blue     (active work)
 *   ready        → green    (already in base)
 *   parts-ordered→ amber    (waiting on parts)
 *   so-arrived   → teal     (special-order arrived)
 *   ra           → red      (warranty / RA!)
 *   overdue      → red      (already in base)
 *   estimate     → yellow   (quote not yet a WO)
 *   waiting      → violet   (waiting on customer)
 *   consignment  → teal     (consignment bike)
 *   done         → muted    (finished work, not yet paid)
 *   done-paid    → muted    (finished + paid)
 *   finished     → muted    (closed)
 *   closed       → muted    (already in base)
 *   cancelled    → muted strikethrough
 */

/* booked → violet (override base amber) */
.badge.booked, .badge-booked {
  color: var(--violet-fg) !important;
  background: var(--violet-bg) !important;
  border-color: var(--violet-line) !important;
}

/* open → amber (override base blue) */
.badge.open, .badge-open {
  color: var(--amber-fg) !important;
  background: var(--amber-bg) !important;
  border-color: var(--amber-line) !important;
}

/* inprogress → blue (override base muted grey) */
.badge.inprogress, .badge-inprogress,
.badge.in-progress, .badge-in-progress {
  color: var(--blue-fg) !important;
  background: var(--blue-bg) !important;
  border-color: var(--blue-line) !important;
}

/* waiting / consignment / violet — kept */
.badge.violet, .badge-violet,
.badge.waiting, .badge-waiting {
  color: var(--violet-fg);
  background: var(--violet-bg);
  border-color: var(--violet-line);
}

.badge.consignment, .badge-consignment {
  color: var(--teal-fg);
  background: var(--teal-bg);
  border-color: var(--teal-line);
}

/* estimate → yellow (use amber tone) */
.badge.estimate, .badge-estimate {
  color: #facc15;
  background: rgba(250, 204, 21, 0.10);
  border-color: rgba(250, 204, 21, 0.30);
}

.badge.parts-ordered, .badge-parts-ordered {
  color: var(--amber-fg);
  background: var(--amber-bg);
  border-color: var(--amber-line);
}

.badge.so-arrived, .badge-so-arrived {
  color: var(--teal-fg);
  background: var(--teal-bg);
  border-color: var(--teal-line);
}

.badge.ra, .badge-ra {
  color: #ff6b5e;
  background: var(--accent-glow);
  border-color: var(--accent-dim);
}

.badge.done, .badge-done,
.badge.finished, .badge-finished {
  color: var(--green-fg);
  background: var(--green-bg);
  border-color: var(--green-line);
  opacity: 0.65;
}

.badge.done-paid, .badge-done-paid {
  color: var(--text3);
  background: var(--bg3);
  border-color: var(--line2);
}

.badge.cancelled, .badge-cancelled {
  color: var(--text3);
  background: var(--bg3);
  border-color: var(--line2);
  text-decoration: line-through;
}

/* ── Customer type chip (STAFF / WHOLESALE / FRIENDS) ── */
.customer-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--line3);
  vertical-align: middle;
}
.customer-chip-staff       { color: var(--amber-fg);  border-color: var(--amber-line); }
.customer-chip-wholesale   { color: var(--blue-fg);   border-color: var(--blue-line); }
.customer-chip-friends     { color: var(--violet-fg); border-color: var(--violet-line); }
.customer-chip-vip         { color: var(--accent);    border-color: var(--accent-dim); }

/* ── WO action bar buttons (Print Tag, Request Payment) ── */
.wo-action-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.wo-action-bar .btn {
  height: 32px;
  font-size: 12px;
}

/* ── Hook In/Out input — slightly emphasised ── */
.hook-input {
  background: var(--bg2) !important;
  border-color: var(--line3) !important;
  font-family: var(--mono) !important;
  font-size: 16px !important; /* prevent iOS zoom */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  min-height: 44px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.hook-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

/* ── Warranty/Save Parts inline toggles ── */
.wo-flags {
  display: flex;
  gap: 18px;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
}
.wo-flags .toggle { gap: 8px; }
.wo-flags .toggle .lbl { font-size: 12px; }
.wo-flags .toggle .lbl-sub { font-size: 9px; }

.wo-flag-warranty.is-on {
  background: rgba(214,70,58,0.06);
  border-color: rgba(214,70,58,0.32);
}

/* ── Mechanic timer (live ticker on WO) ── */
.wo-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  font-family: var(--mono);
}
.wo-timer .wo-timer-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text3);
}
.wo-timer.is-running .wo-timer-dot {
  background: var(--green-fg);
  box-shadow: 0 0 6px var(--green-fg);
  animation: pulse 2s ease-in-out infinite;
}
.wo-timer-elapsed {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.wo-timer-btn {
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--text);
  padding: 3px 9px;
  font-family: var(--ui);
  font-size: 11px;
  cursor: pointer;
}
.wo-timer-btn:hover { background: var(--bg3); }
.wo-timer-btn.is-stop { color: var(--red-fg); border-color: rgba(214,70,58,0.32); }

/* ── WO photos gallery ── */
.wo-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.wo-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg2);
  border: 1px solid var(--line2);
  overflow: hidden;
  cursor: pointer;
}
.wo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-photo .wo-photo-del {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.6);
  border: 0;
  color: #fff;
  font-family: var(--mono);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.wo-photo:hover .wo-photo-del { background: var(--red-fg); }
.wo-photo-add {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line3);
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.wo-photo-add:hover { color: var(--text); border-color: var(--text3); }

/* ── Cash denomination quick-buttons (port from EOD) ── */
.cash-denom-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.cash-denom-btn {
  padding: 12px 6px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
}
.cash-denom-btn:hover { background: var(--bg3); border-color: var(--line3); }
.cash-denom-btn:disabled,
.cash-denom-btn.is-empty {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Customer Items tab table ── */
.customer-items-tbl td {
  vertical-align: middle;
}
.customer-items-tbl .serial {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 0.04em;
}

/* ── Vendor sheet sidebar on PO ── */
.po-vendor-sheet {
  width: 320px;
  flex-shrink: 0;
}
.po-vendor-sheet .card-head h3 { font-size: 14px; }

/* ── Shop Floor (Kanban) ── */
.floor-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line2);
  border: 1px solid var(--line2);
  overflow-x: auto;
  min-height: calc(100vh - 200px);
}
.floor-column {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 260px;
}
.floor-column-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2);
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2);
  position: sticky; top: 0; z-index: 1;
}
.floor-column-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.floor-column-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  background: var(--bg);
  border: 1px solid var(--line2);
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.floor-column-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
}
.floor-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--text3);
  padding: 10px 12px;
  cursor: grab;
  transition: background 80ms;
  /* Allow native drag gestures on touch devices (HTML5 drag-and-drop) */
  touch-action: none;
  user-select: none;
}
.floor-card:active { cursor: grabbing; }
.floor-card:hover { background: var(--bg3); }
.floor-card.is-overdue { border-left-color: var(--red-fg); }
.floor-card.is-prio { border-left-color: var(--accent); }
.floor-card-id {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.floor-card-cust {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  margin-top: 2px;
}
.floor-card-bike {
  font-size: 11px;
  color: var(--text2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.floor-card-foot {
  display: flex; align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.floor-card-due {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
}
.floor-card-due.is-overdue { color: var(--red-fg); }
.floor-card-mech { margin-left: auto; }
.floor-card-hook {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--amber-fg);
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  padding: 1px 5px;
  text-transform: uppercase;
}

/* ── Kanban drag-and-drop ── */
.floor-card {
  user-select: none;
}
.floor-card[draggable="true"]:active { cursor: grabbing; }
.floor-card.is-dragging {
  opacity: 0.4;
  transform: rotate(-1deg);
}
body.floor-dragging .floor-column {
  transition: background 80ms, box-shadow 80ms;
}
body.floor-dragging .floor-column:not(.drop-target) {
  background: var(--bg);
}
.floor-column.drop-target {
  background: var(--accent-glow);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.floor-column.drop-target .floor-column-head {
  background: var(--accent-glow);
  color: var(--accent);
}

/* ── Mechanic top filter on floor view ── */
.floor-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.floor-mech-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  cursor: pointer;
}
.floor-mech-pill .av-init { width: 18px; height: 18px; font-size: 9px; }
.floor-mech-pill.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
}

/* ── Floor Map (bike storage location view) ── */
.fm-toggle-bar { gap: 6px; }
.fm-tab {
  padding: 6px 16px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.fm-tab.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.fm-wrap { padding: 16px 20px 40px; }
.fm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: var(--bg2);
  border: 1px solid var(--line2);
}
.fm-stat {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
}
.fm-stat b { color: var(--text); }
.fm-stat-warn { color: var(--amber-fg); }
.fm-stat-warn b { color: var(--amber-fg); }
.fm-section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 18px 0 10px;
}
.fm-rack-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.fm-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.fm-slot {
  min-height: 64px;
  border: 1px solid var(--line2);
  background: var(--bg2);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fm-slot.is-occupied {
  background: var(--green-bg);
  border-color: var(--green-line);
}
.fm-slot-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.06em;
}
.fm-slot.is-occupied .fm-slot-num { color: var(--green-fg); }
.fm-slot-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-family: var(--mono);
  opacity: 0.4;
}
.fm-slot-chips { display: flex; flex-direction: column; gap: 3px; }
.fm-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 3px 6px;
  background: var(--green-fg);
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: var(--ui);
}
.fm-chip:hover { filter: brightness(1.1); }
.fm-chip-name { font-size: 11px; font-weight: 700; line-height: 1.1; }
.fm-chip-bike {
  font-size: 9px;
  opacity: 0.85;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fm-decimal {
  border: 1px dashed var(--amber-line);
  background: var(--amber-bg);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 64px;
}
.fm-decimal-num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--amber-fg);
}
.fm-decimal .fm-chip { background: var(--amber-fg); color: #1a1916; }
.loc-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  background: var(--green-bg);
  border: 1px solid var(--green-line);
  color: var(--green-fg);
  font-size: 10px;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .fm-rack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fm-wrap { padding: 12px; }
}

/* ── Floor quick-actions (3-dot menu on WO cards) ── */
.floor-quick-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 16px;
  line-height: 1;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 80ms, background 80ms;
}
.floor-card:hover .floor-quick-btn,
.floor-quick-btn:focus { opacity: 1; }
.floor-quick-btn:hover { background: var(--bg3); color: var(--text); }

.floor-quick-menu {
  position: absolute;
  right: 0;
  top: 26px;
  z-index: 1000;
  min-width: 160px;
  background: var(--bg2);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 4px 0;
}
.floor-quick-item {
  display: block;
  width: 100%;
  padding: 7px 14px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.floor-quick-item:hover { background: var(--bg3); }
.floor-quick-item.danger { color: var(--red-fg); }
.floor-quick-divider {
  height: 1px;
  background: var(--line2);
  margin: 4px 0;
}

/* ── Touch drag ghost ── */
body.floor-dragging { cursor: grabbing; user-select: none; }

/* ── My Queue list ── */
.queue-empty {
  padding: 60px 16px;
  text-align: center;
  color: var(--text2);
  border: 1px solid var(--line2);
  background: var(--bg);
}
.queue-empty .glyph {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}

/* ── Hook column on WO list ── */
.tbl .cell-hook {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--amber-fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tbl .cell-hook.empty { color: var(--text3); font-weight: 400; }

/* ── Parked sales tray (Sales register) ── */
.parked-tray {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.parked-tray .label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-right: 6px;
}
.parked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--line3);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
}
.parked-chip:hover { background: var(--bg3); border-color: var(--accent); }
.parked-chip-wo { color: var(--amber-fg); border-color: var(--amber-line); }

/* ── Internal note style: muted background to distinguish from receipt note ── */
.note-internal textarea {
  background: rgba(214,70,58,0.04);
  border-color: rgba(214,70,58,0.2);
}
.note-internal .field-hint { color: var(--red-fg); opacity: 0.7; }

/* ── RA! / Warranty workflow callout ── */
.ra-callout {
  padding: 12px 14px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  margin: 10px 0;
  font-size: 12px;
  color: var(--text);
}
.ra-callout-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

/* ── Top tab variant for customer detail (replaces left-rail) ── */
.detail-top-tabs {
  display: flex;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 16px;
  overflow-x: auto;
}
.detail-top-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 80ms;
}
.detail-top-tab:hover { color: var(--text); }
.detail-top-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.detail-top-tab-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  background: var(--bg3);
  padding: 1px 5px;
}
.detail-top-tab.active .detail-top-tab-count { color: var(--text); background: var(--bg2); }

/* ── Show kbd hints next to action labels ── */
.action-with-kbd {
  display: inline-flex; align-items: baseline; gap: 6px;
}
.action-with-kbd .kbd {
  font-size: 9px;
  padding: 1px 4px;
}

/* ── Workorder header customer block — make STAFF chip read well ── */
.wo-customer-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.wo-customer-header .label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
}
.wo-customer-header .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ── Public customer status page (wo-status.html) lives off this file too ── */


/* ════════════════════════════════════════════════════════════════════
   MOBILE — Round 3 module overrides (workorder presets, shop floor,
   sales register, customer detail tabs, parked tray)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Workorder preset bar — wrap categories, stack search ── */
  .wo-preset-top {
    flex-wrap: wrap;
    gap: 8px;
  }
  .wo-preset-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: -1;
  }
  .wo-preset-search .input { height: 40px !important; font-size: 16px !important; }
  .wo-preset-cat {
    height: 40px;
    padding: 0 12px;
    font-size: 12px;
    flex: 0 0 auto;
  }
  /* Preset grid — 2-up on narrow screens (cards stay tappable) */
  .wo-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .preset-btn { min-height: 64px; }

  /* ── Cash denomination buttons — at least 56px tall ── */
  .cash-denom-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
  .cash-denom-btn {
    min-height: 56px;
    font-size: 15px;
    padding: 10px 4px;
  }
  /* Form input inside cash modal — tall and touch-friendly */
  .form-input {
    min-height: 48px !important;
    font-size: 18px !important;
  }

  /* ── Customer detail top tabs — horizontal scroll (already overflow-x:auto, reinforce) ── */
  .detail-top-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .detail-top-tabs::-webkit-scrollbar { display: none; }
  .detail-top-tab {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* ── Parked sales tray — wrap chips, larger tap targets ── */
  .parked-tray {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }
  .parked-chip {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* ── Sales register — collapse 2-col cart/checkout on mobile ──
     The SalesScreen renders an inline grid: 1.5fr | 1fr. React serialises
     this as style="grid-template-columns:1.5fr 1fr". Stack to 1 col so
     the cart panel and totals/pay stack vertically (page scrolls). */
  div[style*="1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Also catch NewWO right-aside layout (gridTemplateColumns: 1fr 360px) */
  div[style*="1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  /* Pay buttons (Cash / Card / Other) — full-width grid, tall */
  .pay-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .pay-btn {
    min-height: 64px !important;
    font-size: 14px;
  }

  /* Cart line rows — at least 44px tappable; wrap qty stepper if needed */
  .line-row {
    padding: 10px 12px;
    min-height: 56px;
    gap: 8px;
  }
  .qty-stepper button {
    min-width: 36px;
    min-height: 36px;
    font-size: 16px;
  }
  .qty-stepper input {
    min-width: 48px;
    min-height: 40px;
    font-size: 17px; /* ≥16 also avoids iOS focus-zoom */
    font-weight: 600;
    text-align: center;
  }

  /* Item search results — bigger rows */
  .item-row {
    min-height: 56px;
    padding: 12px 14px;
  }

  /* ── Shop floor — single-column horizontal scroll (1 column visible at a time) ── */
  .floor-board {
    grid-template-columns: repeat(6, 84vw) !important;
    grid-auto-flow: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    background: transparent;
    border: 0;
    min-height: calc(100vh - 240px);
  }
  .floor-column {
    scroll-snap-align: start;
    min-width: 84vw;
    border: 1px solid var(--line2);
  }
  .floor-column-head { padding: 12px; }
  .floor-card {
    /* On touch devices, let users tap-to-move via long-press menu;
       keep drag enabled but make tap-target generous */
    padding: 12px 14px;
    min-height: 64px;
    touch-action: manipulation; /* override touch-action:none on touch — long-press still works for drag start */
  }
  .floor-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .floor-filter-bar::-webkit-scrollbar { display: none; }
  .floor-mech-pill {
    flex-shrink: 0;
    min-height: 38px;
  }

  /* ── WO action bar buttons — wrap, full-height ── */
  .wo-action-bar .btn {
    min-height: 40px;
    font-size: 13px;
  }

  /* ── New Work Order — sticky bottom action bar on mobile ──
     The .new-wo-mobile-foot is appended in pos-app.js NewWorkOrderScreen
     and contains the Create button. Hidden on desktop via the
     :not(@media max-width:768px) display:none above. */
  .new-wo-mobile-foot {
    display: flex;
    gap: 8px;
    position: sticky;
    bottom: 72px; /* sit above bottom nav (56px nav + safe-area buffer) */
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px));
    left: 0; right: 0;
    background: var(--bg-1, var(--bg));
    border-top: 1px solid var(--line2);
    padding: 10px 12px;
    margin: 16px -12px 0; /* extend to page edges */
    z-index: 50;
  }
  .new-wo-mobile-foot .btn {
    flex: 1;
    min-height: 48px;
    justify-content: center;
  }

  /* ── WO detail date/hook row responsive ── */
  .wo-datehook-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .wo-datehook-row > div {
    min-width: 0;
  }
  .wo-datehook-row input {
    font-size: 16px !important;
    min-height: 44px !important;
    max-width: none !important;
  }
  /* date takes remaining space, time stays fixed so neither value is clipped */
  .wo-datehook-row input[type="date"] {
    flex: 1 1 auto !important;
    min-width: 0;
  }
  .wo-datehook-row input[type="time"] {
    flex: 0 0 82px !important;
    width: 82px !important;
  }
}

/* Sticky action bar for new WO — always visible (mobile + desktop) */
.new-wo-mobile-foot {
  display: flex;
  gap: 8px;
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  background: var(--bg-1, var(--bg));
  border-top: 2px solid var(--line2);
  padding: 12px 16px;
  margin: 20px -4px 0;
  z-index: 50;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
}
.new-wo-mobile-foot .btn {
  flex: 1;
  min-height: 48px;
  justify-content: center;
  font-size: 15px;
}

/* Narrower phones — go single column for preset grid + denoms */
@media (max-width: 420px) {
  .wo-preset-grid { grid-template-columns: 1fr !important; }
  .cash-denom-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Mobile: simplify status + stop right-edge overflow (2026-06-09) ──
   The full ONLINE·TERMINAL READY·PRINTER READY footer strip is desktop-only;
   on mobile the Topbar shows a compact "Online" pill instead. The new-WO
   sticky action bar drops to sit just above the bottom nav (no big gap),
   and the main/content panes clip horizontal overflow so nothing runs off
   the right edge. */
@media (max-width: 768px) {
  .status-strip { display: none !important; }
  .topbar .station { display: none !important; }
  /* Pin the action bar to the viewport bottom, directly above the glass
     bottom-nav. MUST be position:fixed (not sticky): when the form is short,
     sticky leaves the bar at its natural mid-page spot with a big empty gap
     down to the nav (the "too high" bug). No transformed ancestor here, so
     fixed is viewport-relative and reliable. */
  .new-wo-mobile-foot {
    position: fixed !important;
    bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important; right: 0 !important;
    margin: 0 !important;
  }
  /* Reserve space so the last fields (Notes) aren't hidden behind the fixed
     bar + nav. */
  .new-wo-2col { padding-bottom: calc(var(--bottomnav-h) + 96px) !important; }
  .main, .content { overflow-x: hidden; max-width: 100%; }
  .page-head, .page-head-actions { max-width: 100%; }
  /* WO detail: collapse the secondary action buttons into the ⋯ menu on
     mobile (Print/PDF/Email/Reprint/Send Quote/Duplicate live there too).
     Keep Schedule, Request payment, Checkout, Delete, ⋯ visible. */
  .wo-act-2nd { display: none !important; }
  /* WO form card: was a 3-col grid (32px ribbon | body | 280px aside) that
     overflowed the right edge on phones — stack it to one column. */
  .wo-form-card { grid-template-columns: 1fr !important; }
  /* Thin the vertical status ribbon → horizontal bar across the top. */
  .wo-status-ribbon {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
  }
  /* Inventory item detail: info | 360px image aside → stack on mobile. */
  .item-detail-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  /* Calendar agenda is a dense 7-col grid; keep its shape but let the day
     group (header + rows) scroll horizontally inside its own panel instead
     of breaking the page width. */
  .sch-agenda-scroll { overflow-x: auto; }
  .sch-agenda-group { min-width: 520px; }
  /* Inventory has ~10 columns — let it scroll horizontally inside its panel
     so Price/Qty/Cost aren't clipped off the right on phones. */
  .inv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .inv-table, .inv-table-app { min-width: 560px; }
  /* New Work Order: the top Cancel/Save draft/Create buttons are redundant on
     mobile — the sticky bottom bar carries Cancel + Create. Hide the top set. */
  .wo-head-act { display: none !important; }

  /* WO detail action bar: on mobile the left buttons were left-aligned and the
     right ones right-floated → zigzag/"sprinkled". Lay everything out as full
     width, even rows. Primary actions = 2-col grid (Checkout spans full). */
  .wo-actionbar { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .wo-act-left {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%;
  }
  .wo-act-left > button { width: 100%; min-height: 44px; margin: 0 !important; }
  .wo-act-left > .wo-act-checkout { grid-column: 1 / -1; }
  .wo-act-right { width: 100%; align-items: stretch !important; }
  /* Duplicate / Archive grow; ⋯ stays compact */
  .wo-act-rrow1 { width: 100%; }
  .wo-act-rrow1 > button { flex: 1; min-height: 44px; }
  .wo-act-rrow1 > button:last-child { flex: 0 0 auto; }
  /* Edit Customer / Remove side by side, full width */
  .wo-act-rrow2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .wo-act-rrow2 > button { width: 100%; min-height: 44px; }

  /* ── Universal table overflow guard ──────────────────────────────────
     Wide data tables (.tbl on Dashboard/Customers/POs/Reports/etc, and the
     WO line-item tables) were running off the right edge. Let the card /
     line-box scroll horizontally and keep the table wide enough to stay
     legible, so columns are swipeable instead of clipped. */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
  .card .tbl { min-width: 480px; }
  /* Grid/flex columns must be allowed to shrink below their content's
     min-width, otherwise a wide table makes the whole column overflow the
     viewport instead of scrolling inside the card. */
  .grid-2 > .col, .grid-2 > div, .col { min-width: 0; }
  /* Quick-actions grid: let cells shrink to fit instead of forcing overflow */
  .qa-grid, .quick-grid { min-width: 0; }
  .qa, .quick-action { min-width: 0; padding: 12px !important; }
  .qa-title, .qa-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* WO detail form body: was a cramped 2-col grid on mobile (status chips got
     squeezed into a ~170px half and stacked vertically). Single column so each
     field — and the tap-to-switch status chip row — gets full width. */
  .wo-form-body { grid-template-columns: 1fr !important; }
  /* Status chips: bigger tap targets, sit on one full-width wrapping row */
  .status-quick-chip { min-height: 40px !important; font-size: 12px !important; }
}
.topbar-online { margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════
   FEATURES v2 — Global Search, Quick Items Grid, WO Timeline,
   Dashboard Alert/Ready strips                     (2026-05-30)
═══════════════════════════════════════════════════════════════ */

/* ── Global Search ── */
.gs-type {
  min-width: 80px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  flex-shrink: 0;
}

/* ── Quick Items Grid (Sales screen) ── */
.quick-items-grid-section {
  padding: 12px 14px 0;
  border-bottom: 1px solid var(--line);
}
.quick-items-grid-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}
.quick-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-bottom: 12px;
}
.quick-item-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
  color: var(--text);
  min-height: 52px;
}
.quick-item-btn:hover {
  background: var(--bg3);
  border-color: var(--line2);
}
.quick-item-btn.oos {
  opacity: 0.45;
  cursor: not-allowed;
}
.qi-name {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
  flex: 1;
}
.qi-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  width: 100%;
}
.qi-price {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.qi-stock {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
  margin-left: auto;
}
.qi-stock.low { color: #f59e0b; }

@media (max-width: 640px) {
  .quick-items-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .quick-items-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
}

/* ── Quick-key tiles ── */
.quick-key-tile { transition: opacity 0.1s, transform 0.08s; }
.quick-key-tile:active { transform: scale(0.96); }

/* ── Sticky totals card in sales right column ── */
.totals-sticky-card {
  position: sticky;
  bottom: 16px;
  z-index: 10;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
@media (max-width: 768px) {
  .totals-sticky-card { position: static; box-shadow: none; }
}

/* ── WO Timeline ── */
.wo-timeline {
  padding: 0;
}
.wo-timeline-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 8px 0 16px;
  overflow-x: auto;
}
.wo-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 80px;
  flex: 1;
}
.wo-tl-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line2);
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-size: 9px;
  color: #fff;
  flex-shrink: 0;
}
.wo-tl-line {
  position: absolute;
  top: 11px;
  left: calc(50% + 11px);
  right: calc(-50% + 11px);
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.wo-tl-step.last .wo-tl-line { display: none; }
.wo-tl-label {
  margin-top: 6px;
  text-align: center;
  padding: 0 4px;
}
.wo-tl-step.done .wo-tl-label > div:first-child { color: var(--text); }

/* ── Dashboard Overdue Alert Banner ── */
.dashboard-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(200, 57, 44, 0.08);
  border: 1px solid rgba(200, 57, 44, 0.28);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 12px;
}
.dab-icon { font-size: 16px; flex-shrink: 0; }

/* ── Dashboard Ready Strip ── */
.dashboard-ready-strip {
  padding: 10px 16px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 12px;
}
.ready-wo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}
.ready-wo-chip:hover { background: rgba(16, 185, 129, 0.2); }
.rwc-id { font-family: var(--mono); font-size: 10px; color: #10b981; font-weight: 600; }
.rwc-name { color: var(--text); font-weight: 500; }
.rwc-bike { color: var(--text3); font-size: 11px; }

/* ── CSV Import Screen ── */
.import-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.import-type-card {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.import-type-card:hover { border-color: var(--accent); }
.import-type-card.active { border-color: var(--accent); background: rgba(var(--accent-rgb,59,130,246),0.08); }
.import-type-label { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.import-type-desc { font-family: var(--mono); font-size: 10px; color: var(--text-2); word-break: break-all; }

.import-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
  background: var(--surface);
  transition: border-color 0.12s;
  margin-bottom: 4px;
}
.import-drop-zone:hover { border-color: var(--accent); }

.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.alert.success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}
.alert.error {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #ef4444;
}

/* ── Native date + time pickers — dark themed ── */
input[type="date"],
input[type="time"] {
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
  background: var(--bg-input, #1a1a1a);
  color: var(--text, #f0ede8);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--mono);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.9;
}
/* Dark mode (POS default): native glyph is dark → invert + brighten so the
   calendar/clock icon is clearly visible on the dark field. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ============================================================
 * SECTION: pos-styles-unify.css
 * ============================================================ */
/* ChainLine POS — Design system unification (Round 4 patch)
 * Loads AFTER pos-styles-v3.css.
 *
 * Purpose:
 *   Resolves the v1/v2/v3 cascade conflict identified in audit Round 4.
 *   - Strips border-radius > 0 from every modal / toast / palette / skeleton / stat-card / kbd
 *   - Strips box-shadow from same
 *   - Strips backdrop-filter
 *   - Maps pos-status-* + pos-toast-* to v1 color tokens (single palette)
 *   - Makes pos-avatar square + tone-palette-driven
 *   - Replaces accent focus ring with neutral, accent on actionable buttons only
 *   - Drops red wash on sidebar active state
 *   - Adds prefers-reduced-motion support
 *   - Adds light-theme variants for v3 tokens
 *   - Adds safe-area-inset handling on mobile bottom nav
 *
 * Apply by adding to index.html AFTER all other stylesheets:
 *   <link rel="stylesheet" href="/pos-styles-unify.css?v=1">
 *
 * Bump the v=1 on each iteration. Once visual parity is confirmed,
 * merge these rules into pos-styles.css and delete this file.
 */


/* ════════════════════════════════════════════════════════════════════
   1 · KILL ROUNDED CORNERS ON OVERLAYS / CARDS / SKELETONS / KBD
   Spec: 0 radius everywhere except .badge (999px) — already enforced
   by v1 but v2 reintroduced radii. Resetting them here.
   ════════════════════════════════════════════════════════════════════ */

.pos-modal,
.pos-modal-x,
.pos-modal-backdrop > .pos-modal,
.pos-toast,
.pos-toast-icon,
.pos-toast-close,
.pos-btn,
.pos-command-palette,
.pos-cp-input,
.pos-cp-item,
.pos-shortcut-help,
.pos-shortcut-help-overlay > .pos-shortcut-help,
.pos-skeleton-shimmer-bg,
.pos-skeleton-line,
.pos-skeleton-avatar,
.pos-skeleton-card,
.pos-stat-card,
.pos-kbd {
  border-radius: 0 !important;
}

/* Mobile bottom-sheet modal corner: pre-existing override `border-radius: 14px 14px 0 0` */
@media (max-width: 768px) {
  .pos-modal,
  .pos-modal-backdrop > .pos-modal {
    border-radius: 0 !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   2 · KILL DROP SHADOWS ON OVERLAYS / CARDS
   ════════════════════════════════════════════════════════════════════ */

.pos-modal,
.pos-toast,
.pos-command-palette,
.pos-shortcut-help,
.pos-kbd,
.options-dropdown {
  box-shadow: none !important;
}

/* pos-kbd had border-bottom-width: 2px for skeumorphic effect — flatten */
.pos-kbd {
  border-bottom-width: 1px !important;
}


/* ════════════════════════════════════════════════════════════════════
   3 · KILL BACKDROP-FILTER ON OVERLAYS
   Spec voice is "darkroom instrument" — backdrop blur is iOS aesthetic,
   not match.
   ════════════════════════════════════════════════════════════════════ */

.pos-modal-backdrop,
.pos-command-palette-backdrop,
.pos-shortcut-help-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   4 · UNIFY STATUS BADGE + TOAST COLOR PALETTE
   v2 had a second palette (#4ade80 / #60a5fa / #fbbf24). Reset to v1 tokens.
   ════════════════════════════════════════════════════════════════════ */

.pos-status-READY,
.pos-status-Ready,
.pos-status-ready {
  background: var(--green-bg) !important;
  color: var(--green-fg) !important;
  border-color: var(--green-line) !important;
}

.pos-status-Open,
.pos-status-OPEN,
.pos-status-open {
  /* In v3 we remap open → amber to free blue for inprogress */
  background: var(--amber-bg) !important;
  color: var(--amber-fg) !important;
  border-color: var(--amber-line) !important;
}

.pos-status-BOOKED,
.pos-status-Booked,
.pos-status-booked {
  background: var(--violet-bg) !important;
  color: var(--violet-fg) !important;
  border-color: var(--violet-line) !important;
}

.pos-status-Overdue,
.pos-status-OVERDUE,
.pos-status-overdue {
  background: var(--red-bg) !important;
  color: var(--red-fg) !important;
  border-color: rgba(214, 70, 58, 0.32) !important;
}

.pos-status-Finished,
.pos-status-Done,
.pos-status-done {
  background: var(--green-bg) !important;
  color: var(--green-fg) !important;
  border-color: var(--green-line) !important;
  opacity: 0.65 !important;
}

.pos-status-WAITING,
.pos-status-Waiting,
.pos-status-waiting {
  background: var(--violet-bg) !important;
  color: var(--violet-fg) !important;
  border-color: var(--violet-line) !important;
}

.pos-status-Cancelled,
.pos-status-cancelled {
  background: var(--bg3) !important;
  color: var(--text3) !important;
  border-color: var(--line2) !important;
  text-decoration: line-through;
}

.pos-status-initials {
  border-radius: 999px;
  background: var(--bg3);
}

/* Toasts — single palette */
.pos-toast-success {
  background: var(--green-bg) !important;
  color: var(--green-fg) !important;
  border-color: var(--green-line) !important;
}
.pos-toast-error {
  background: var(--red-bg) !important;
  color: var(--red-fg) !important;
  border-color: rgba(214, 70, 58, 0.32) !important;
}
.pos-toast-info {
  background: var(--blue-bg) !important;
  color: var(--blue-fg) !important;
  border-color: var(--blue-line) !important;
}

/* Toast icon — drop the emoji circle. If markup still has the glyph,
   render it as a small left-stripe instead of a colored disc. */
.pos-toast-icon {
  width: 3px !important;
  height: 14px !important;
  border-radius: 0 !important;
  background: currentColor !important;
  color: currentColor !important;
  font-size: 0 !important; /* hide the ✓ / ✕ / i glyphs in pos-design.js */
  align-self: stretch;
  flex-shrink: 0;
  padding: 0 !important;
  margin: -2px 6px -2px 0;
}


/* ════════════════════════════════════════════════════════════════════
   5 · AVATAR: square, tone-palette-driven, no text-shadow
   v2 made avatars circles with color-hashed backgrounds + text-shadow.
   v1 has square .av-init with tinted backgrounds. Unify on v1 style.
   ════════════════════════════════════════════════════════════════════ */

.pos-avatar {
  border-radius: 0 !important;
  text-shadow: none !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--line2) !important;
}

.pos-avatar-sm { width: 22px; height: 22px; font-size: 9px; }
.pos-avatar-md { width: 28px; height: 28px; font-size: 10px; }
.pos-avatar-lg { width: 40px; height: 40px; font-size: 13px; }


/* ════════════════════════════════════════════════════════════════════
   6 · FOCUS RING: neutral by default, accent only on actionable elements
   ════════════════════════════════════════════════════════════════════ */

*:focus-visible {
  outline: 1px solid var(--line3) !important;
  outline-offset: 1px !important;
}

/* Inputs handle their own focus through border-color (already in v1) */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
}

/* Actionable elements get the accent ring */
.btn:focus-visible,
.pos-btn:focus-visible,
.pay-btn:focus-visible,
.nav-item:focus-visible,
.preset-btn:focus-visible,
.pin-key:focus-visible,
.cash-denom-btn:focus-visible,
.floor-mech-pill:focus-visible,
.chip:focus-visible,
.wo-preset-cat:focus-visible {
  outline-color: var(--accent) !important;
  outline-width: 2px !important;
}


/* ════════════════════════════════════════════════════════════════════
   7 · SIDEBAR ACTIVE STATE — drop the red wash, keep the red border
   The 2px left accent border is the active signal. The 6% red wash
   was redundant and muddied small-screen rendering.
   ════════════════════════════════════════════════════════════════════ */

.nav-item.active {
  background: var(--bg2) !important;
}


/* ════════════════════════════════════════════════════════════════════
   8 · SUB-TABS: unify active indicator to accent
   v1 set this to var(--text). Inconsistent with detail-top-tab which
   uses accent. Pick one — accent — for both.
   ════════════════════════════════════════════════════════════════════ */

.sub-tab.active {
  border-bottom-color: var(--accent) !important;
}


/* ════════════════════════════════════════════════════════════════════
   9 · TABLE HOVER: replace border with inset shadow (no layout shift)
   ════════════════════════════════════════════════════════════════════ */

.data-table tr:hover td:first-child,
.tbl tbody tr:hover td:first-child {
  border-left: 0 !important;
  padding-left: 12px !important;
  box-shadow: inset 2px 0 0 var(--accent);
}


/* ════════════════════════════════════════════════════════════════════
   10 · PAGE TITLE: bump to 26px to hold against 30px stat values
   ════════════════════════════════════════════════════════════════════ */

.page-title {
  font-size: 26px !important;
  letter-spacing: -0.02em;
}


/* ════════════════════════════════════════════════════════════════════
   11 · TABLE CELL DEFAULT: truncate-with-ellipsis on overflow
   ════════════════════════════════════════════════════════════════════ */

.data-table td,
.tbl td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table td.wrap,
.tbl td.wrap,
.data-table td.cell-customer,
.tbl td.cell-customer {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}


/* ════════════════════════════════════════════════════════════════════
   12 · ICON BUTTONS — bigger hit target
   ════════════════════════════════════════════════════════════════════ */

.icon-btn {
  width: 36px !important;
  height: 36px !important;
}

@media (max-width: 768px) {
  .icon-btn {
    width: 44px !important;
    height: 44px !important;
  }
  .pos-modal-x,
  .pos-toast-close {
    min-width: 36px;
    min-height: 36px;
    font-size: 18px;
  }
  .qty-stepper button {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .options-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}


/* ════════════════════════════════════════════════════════════════════
   13 · MOBILE SAFE-AREA INSET FOR BOTTOM NAV + STICKY ACTION BARS
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* env() is 0 in plain Safari (only home-indicator devices report it), so
     always keep ≥8px under the labels or Home/WOs sit on the screen edge.
     Bar is 64px tall — 56px crammed icon+label against the border. */
  #sidebar, .sidebar {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    height: calc(64px + max(8px, env(safe-area-inset-bottom, 0px))) !important;
  }
  #main, .main {
    padding-bottom: calc(80px + max(8px, env(safe-area-inset-bottom, 0px))) !important;
  }
  .new-wo-mobile-foot {
    bottom: calc(64px + max(8px, env(safe-area-inset-bottom, 0px))) !important;
  }
  .status-strip {
    /* If your status strip sits above the bottom nav on mobile, push it up */
    bottom: calc(64px + max(8px, env(safe-area-inset-bottom, 0px)));
  }
}


/* ════════════════════════════════════════════════════════════════════
   14 · FLOOR CARDS: touch-action: pan-y instead of none
   Preserves vertical scroll within columns on touch, still allows
   longpress-drag for kanban moves.
   ════════════════════════════════════════════════════════════════════ */

.floor-card {
  touch-action: pan-y !important;
}


/* ════════════════════════════════════════════════════════════════════
   15 · LIGHT THEME — add variants for v3 tokens
   v3 declared --violet-fg + --teal-fg + customer-chip colors at :root
   only. Light theme has no overrides → washed-out colors on light.
   ════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --violet-fg:   #7c3aed;
  --violet-bg:   rgba(124, 58, 237, 0.10);
  --violet-line: rgba(124, 58, 237, 0.30);

  --teal-fg:     #0891b2;
  --teal-bg:     rgba(8, 145, 178, 0.08);
  --teal-line:   rgba(8, 145, 178, 0.30);
}

[data-theme="light"] .customer-chip {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text2);
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .customer-chip-staff       { color: #b45309; border-color: rgba(180, 83, 9, 0.30); }
[data-theme="light"] .customer-chip-wholesale   { color: #1e40af; border-color: rgba(30, 64, 175, 0.30); }
[data-theme="light"] .customer-chip-friends     { color: #6b21a8; border-color: rgba(107, 33, 168, 0.30); }


/* ════════════════════════════════════════════════════════════════════
   16 · PREFERS-REDUCED-MOTION
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
  .dot-live,
  .status-dot,
  .conn-dot,
  .wo-timer.is-running .wo-timer-dot {
    box-shadow: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   17 · PRESET BAR CATEGORY COLOR PER BIKE TYPE
   Tints the Mountain / Road category buttons so the bar reads at a
   glance even from peripheral vision.
   ════════════════════════════════════════════════════════════════════ */

.wo-preset-cat[data-cat="mountain"],
.wo-preset-cat-accent + .wo-preset-cat-accent[data-cat="mountain"] {
  background: rgba(167, 139, 250, 0.08);
  color: var(--violet-fg);
  border-color: var(--violet-line);
}
.wo-preset-cat[data-cat="mountain"]:hover {
  background: rgba(167, 139, 250, 0.16);
  color: var(--text);
}
.wo-preset-cat[data-cat="mountain"].is-active {
  background: var(--violet-fg);
  border-color: var(--violet-fg);
  color: #fff;
}

.wo-preset-cat[data-cat="road"] {
  background: rgba(77, 198, 198, 0.08);
  color: var(--teal-fg);
  border-color: var(--teal-line);
}
.wo-preset-cat[data-cat="road"]:hover {
  background: rgba(77, 198, 198, 0.16);
  color: var(--text);
}
.wo-preset-cat[data-cat="road"].is-active {
  background: var(--teal-fg);
  border-color: var(--teal-fg);
  color: #0a0a0a;
}

/* For this to take effect, in pos-workorder-presets.js:
   add `data-cat={cat.id}` to each category button render. */


/* ════════════════════════════════════════════════════════════════════
   18 · COUNT BADGE: cap display at "99+"
   Custom-detail tabs (and others) can overflow with large counts.
   ════════════════════════════════════════════════════════════════════ */

.detail-top-tab-count,
.sub-tab .count,
.nav-count {
  max-width: 36px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ════════════════════════════════════════════════════════════════════
   19 · STAT GRID — keep 2-col at <480, drop the 1-col rule
   The 1-col rule meant 4 stats × 110px = 440px of scrolling on phones
   just to read the dashboard summary. Two columns reads better.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   20 · MOBILE — CART LINE ROW stacks at narrow widths
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .line-row:not(.head) {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name name"
      "qty price"
      "qty trash";
    gap: 6px !important;
    padding: 12px 14px !important;
  }
  .line-row:not(.head) > *:nth-child(1) { grid-area: name; }
  .line-row:not(.head) > *:nth-child(2) { grid-area: qty; align-self: center; }
  .line-row:not(.head) > *:nth-child(3) { display: none; }  /* hide unit price; line total is enough */
  .line-row:not(.head) > *:nth-child(4) { grid-area: price; justify-self: end; font-size: 14px; font-weight: 600; }
  .line-row:not(.head) > *:nth-child(5) { grid-area: trash; justify-self: end; }
  .line-row.head { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   21 · MOBILE — INVENTORY ROW stacks
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .item-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name price"
      "sku stock";
    gap: 4px 8px !important;
    padding: 12px 14px !important;
  }
  .item-row > *:nth-child(1) { grid-area: name; }
  .item-row .sku { grid-area: sku; }
  .item-row .stock { grid-area: stock; justify-self: end; }
  .item-row .price { grid-area: price; justify-self: end; font-size: 14px; font-weight: 600; }
}


/* ════════════════════════════════════════════════════════════════════
   22 · LOGIN — 3-col staff grid on small phones (M8)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .staff-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 20px !important;
    gap: 8px !important;
  }
  .staff-btn {
    min-width: 0 !important;
    padding: 10px 8px !important;
  }
  .staff-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  .staff-role { display: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   23 · MOBILE TOPBAR — add a search icon (M2)
   The mobile media query already hides .topbar-search.
   When a search icon button is added (see pos-app.js patch), surface it.
   ════════════════════════════════════════════════════════════════════ */

.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex; }
  .desktop-only { display: none !important; }
}

.topbar .mobile-search-btn {
  width: 36px; height: 36px;
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line2);
  background: var(--bg2);
  color: var(--text);
}
.topbar .mobile-search-btn:hover { background: var(--bg3); }
@media (max-width: 768px) {
  .topbar .mobile-search-btn { display: flex; }
  .topbar .topbar-spacer { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   24 · BOTTOM NAV PINNED PROMINENT 5 + MORE (M1)
   Requires Sidebar JSX change — see pos-app.js patch below.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Hide overflow nav items; only first 5 + "More" remain visible */
  .nav-item.mobile-overflow {
    display: none;
  }
  .nav-item.mobile-more {
    display: flex;
  }
}
.nav-item.mobile-more {
  /* Only meaningful on mobile; hidden on desktop */
  display: none;
}

/* ── Round 4 audit C5/C6 + M13: Class-handle grids ─────────────── */
.sales-2col   { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: flex-start; }
.new-wo-2col  { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: flex-start; }
.wo-notes-2col{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 768px) {
  .sales-2col, .new-wo-2col, .wo-notes-2col { grid-template-columns: 1fr !important; }
}

/* ── Round 4 audit M1/M2: Mobile bottom-nav 5+More + mobile topbar search ── */
.mobile-only { display: none; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex; }
  /* Hide overflow nav items on mobile so only the 4 pins + More show */
  .nav-item.mobile-hidden { display: none !important; }
  /* More item only visible on mobile */
  .nav-item-more { display: flex !important; }
  /* Topbar mobile search button */
  .topbar-search-mobile {
    width: 44px; height: 44px; min-width: 44px; padding: 0;
    align-items: center; justify-content: center;
    margin-right: 4px;
  }
}
@media (min-width: 769px) {
  .nav-item-more { display: none !important; }
  .topbar-search-mobile { display: none !important; }
}

/* Mobile "More" bottom-sheet */
.mobile-more-sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 250;
  display: flex; align-items: flex-end;
}
.mobile-more-content {
  background: var(--bg);
  border-top: 1px solid var(--line2);
  width: 100%;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 70vh; overflow-y: auto;
}
.mobile-more-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text2);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.mobile-more-head button {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--line2);
  color: var(--text2); cursor: pointer; font-size: 20px;
}
.mobile-more-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.mobile-more-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; min-height: 76px;
  background: var(--bg2); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; cursor: pointer;
  text-align: center;
}
.mobile-more-item.active {
  background: var(--bg3);
  border-color: var(--accent);
  color: var(--accent);
}
.mobile-more-icon { display: flex; align-items: center; justify-content: center; }
.mobile-more-label {
  font-family: var(--ui); font-size: 11px; font-weight: 500;
  line-height: 1.25;
}

/* ── Round 4 audit M9/M11/M14: WO status quick chips + input padding + tab count overflow ── */
@media (max-width: 768px) {
  /* M9: Status quick-chip row */
  .status-quick-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
  }
  .status-quick-chip {
    min-height: 36px; padding: 6px 12px;
    background: var(--bg2); color: var(--text);
    border: 1px solid var(--line2);
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
  }
  .status-quick-chip.active {
    background: var(--bg3);
    border-color: var(--accent);
    color: var(--accent);
  }
  /* M11: Date/time + input padding bump to match 48px min-height */
  .input, input.input, select.input, textarea.input,
  input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="tel"], input[type="number"], input[type="email"], input[type="text"] {
    padding: 12px 14px !important;
  }
  /* M14: Customer detail tab counts — clamp width + ellipsis */
  .detail-top-tab-count {
    max-width: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3 mobile touch-target + coarse-pointer pass 2026-07-02
   ─────────────────────────────────────────────────────────────────────────
   ROOT CAUSE FIX: all prior mobile rules gate on @media (max-width: 767px),
   so an 844px-wide LANDSCAPE iPhone got desktop styles (13px inputs → iOS
   focus-zoom, 13px checkboxes, 28-32px tap targets). These rules key on
   @media (pointer: coarse) instead — any touch device, any orientation —
   and never fire on desktop mouse/trackpad. All rules are ADDITIVE; no
   existing rule above was modified. Review/revert = delete this section.
   ═══════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {

  /* ── V3-A. iOS focus-zoom guard, width-independent ──────────────────────
     Safari zooms the page when a focused control has font-size < 16px.
     The 767px block already fixes portrait; this covers landscape (844px)
     and tablets. !important: base rules (13px) + a few scoped overrides
     would otherwise win on specificity. */
  .input, .select, .textarea, textarea, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
    font-size: 16px !important;
  }

  /* ── V3-B. Checkboxes / radios — 13-16px native → 20x20 minimum ──────── */
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px;
    min-width: 20px; min-height: 20px;
  }
  /* Expanded hit area: the .checkbox label wrapper is the real tap target */
  .checkbox { min-height: 40px; }

  /* ── V3-C. Buttons + interactive chips ≥ 40px tall ──────────────────────
     Covers: .btn ghosts measured 25-31px, Reports date presets (.sub-tab),
     New-WO mechanic chips + PO vendor chips (rendered as button.chip, 22-24px),
     .mech-chip. Non-interactive status chips (span.chip) untouched. .btn is
     inline-flex so min-height just grows the box; flex rows (.page-actions,
     .form-actions, .filter-row) wrap/stretch and tolerate taller children. */
  .btn,
  button.chip,
  .mech-chip,
  .sub-tab {
    min-height: 40px;
    padding-top: 4px; padding-bottom: 4px;
  }
  .btn-sm { min-height: 40px; }

  /* ── V3-D. Cart qty steppers (28x32 on landscape) ─────────────────────── */
  .qty-stepper button { min-width: 36px; min-height: 40px; }
  .qty-stepper input  { min-height: 40px; }
  .stepper.stepper-sm { min-height: 40px; }
  .stepper.stepper-sm button { min-width: 40px; }

  /* ── V3-E. Modal / toast close buttons → 40x40 ──────────────────────────
     EOD modal close is a classless inline-styled 28x28 round button
     (pos-eod.js); min-width/min-height win over inline width/height in
     layout resolution, so the attribute selector below reaches it without
     touching JS. */
  .return-modal-close,
  .pos-modal-x,
  .toast-close,
  .pos-toast-close {
    min-width: 40px; min-height: 40px;
  }
  button[style*="border-radius: 50%"] {
    min-width: 40px; min-height: 40px;
  }

  /* ── V3-F. Small anchor actions → 40px tappable rows ────────────────────
     WO detail "↗ Find on chainline.ca" (102x14), Customer 360 tel:/mailto:
     links (18px), .aside-row value links. inline-flex + min-height grows
     the tap box; rows on touch devices get correspondingly taller. */
  .aside-row a,
  a[href^="tel:"],
  a[href^="mailto:"],
  a[href*="chainline.ca/search"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .aside-row:has(a) { align-items: center; }

  /* ── V3-G. Link-style classless buttons (login "Use recovery code"
     110x25, "Skip for now", "← Back to login" — inline styles, no class,
     all share text-decoration: underline). */
  button[style*="underline"] {
    min-height: 40px;
    min-width: 44px;
  }
}