/* Local KDS — shared styles
   Theme: "Modern Leaf" — vivid cannabis green on a near-black operational base.
   Dark, large, touch-friendly, data-dense. Tuned for always-on KDS / dispatch
   screens, TVs and tablets. All class names are preserved for the JS that
   renders the DOM; this file changes presentation only. */

:root {
  /* ---- Surfaces ---- */
  --bg: #0a0f0d;          /* near-black forest */
  --panel: #131a17;       /* chrome: topbar / sidebar */
  --card: #18211c;        /* primary card surface */
  --card-2: #212d26;      /* raised / interactive surface */
  --card-3: #2b3a31;      /* hover-raise surface (secondary-button hover) */
  --text: #e6f0ea;        /* soft white-green */
  --muted: #8fa399;       /* sage gray (>=4.5:1 on --bg) */
  --border: #28362d;      /* green-tinted hairline */
  --border-strong: #36493d;

  /* ---- Brand / accents ---- */
  --accent: #22c55e;      /* vivid cannabis green — the hero */
  --accent-2: #16a34a;    /* deeper green */
  --accent-ink: #04140b;  /* near-black text on green/lime surfaces */
  --lime: #a3e635;        /* lime highlight + focus ring */
  --lime-ink: #1a2e05;
  --accent-soft: rgba(34, 197, 94, 0.13);  /* subtle green wash */
  --accent-glow: rgba(34, 197, 94, 0.28);

  /* ---- Shape / radius ---- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* ---- Elevation (DESIGN.md §Elevation) — tonal-first: reach for the next surface
     step before a shadow; shadows lift only detached surfaces or the primary action ---- */
  --elev-resting: 0 1px 2px rgba(0, 0, 0, 0.45);   /* cards, tables, toasts (was --shadow-1) */
  --elev-raised:  0 8px 24px rgba(0, 0, 0, 0.45);  /* dropdown panels, hover/focus lift (was --shadow-2) */
  --elev-overlay: 0 16px 40px rgba(0, 0, 0, 0.5);  /* modals — the one detached surface */
  --glow-accent:  0 6px 16px -8px rgba(34, 197, 94, 0.28);  /* primary-button halo */
  --glow-danger:  0 6px 16px -8px rgba(185, 28, 28, 0.6);   /* danger-button halo */
  --ring-focus:   0 0 0 2px #a3e635;              /* lime focus ring (box-shadow form) */
  --ring-overdue: inset 0 0 0 2px #ff4d4d;        /* overdue state, layered over resting */
  /* Back-compat aliases so existing var(--shadow-*) refs resolve to the new tokens. */
  --shadow-1: var(--elev-resting);
  --shadow-2: var(--elev-raised);

  /* ---- Motion (DESIGN.md §Motion) — 120–240ms, state-only ---- */
  --dur-fast: 120ms;   /* hover/press feedback */
  --dur-base: 160ms;   /* default: toasts, dropdowns, most state changes (was --speed) */
  --dur-slow: 240ms;   /* larger reveals (drawer, modal) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* exponential ease-out; no bounce */
  --speed: var(--dur-base);   /* back-compat alias for existing var(--speed) refs */

  /* ---- Spacing grid (DESIGN.md §Spacing) — 4px base; defined now, broadly adopted
     into table/card density in the type/hierarchy follow-up (Plan B) ---- */
  --space-05: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Z-index ladder (DESIGN.md §Z-index) — one semantic scale; never author raw
     999. Preserves stacking intent: banner > toast > modal > overlay > dropdown > sticky ---- */
  --z-sticky: 100;          /* sticky top nav + table headers */
  --z-dropdown: 200;        /* nav dropdowns, native-select menus */
  --z-overlay: 300;         /* fullscreen / expanded-map overlays */
  --z-modal-backdrop: 400;  /* modal scrim */
  --z-modal: 500;           /* modal surface */
  --z-toast: 600;           /* transient toasts (appear above a modal) */
  --z-banner: 700;          /* offline/stale + approval strips (visible over all content) */
  --z-tooltip: 800;

  /* ---- Control heights (DESIGN.md §Controls) ---- */
  --control-h: 48px;        /* secondary button, input, select */
  --control-h-lg: 56px;     /* primary/danger CTA */
  --control-h-touch: 64px;  /* .big — wall-tablet fingertip target */

  /* ---- Type scale — INTENTIONALLY UNCHANGED this round; owned by the type/hierarchy
     follow-up (Plan B). Values are still pre-DESIGN.md; do not migrate the ramp here. ---- */
  --fs-display: 1.6rem;   /* display-board banners */
  --fs-heading: 1.3rem;   /* form / mode headings, order-card customer name */
  --fs-title:   1.15rem;  /* section headings, order-total row */
  --fs-body:    0.95rem;  /* field labels, table cells, detail lines */
  --fs-input:   1rem;     /* inputs, buttons, base body */
  --fs-sm:      0.85rem;  /* help text, meta, inline errors, badges */
  --fs-label:   0.72rem;  /* uppercase micro-labels */
  --lh-tight:   1.2;      /* headings */
  --lh-body:    1.4;      /* prose / multi-line help */

  /* ---- Feedback (DESIGN.md §Color) ---- */
  --danger: #b91c1c;       /* destructive actions + offline/stale banner family */
  --danger-deep: #7f1d1d;  /* darker banner/border red (app extension; not a DESIGN.md token) */
  --error-text: #ff4d4d;   /* inline field errors (= --overdue); 5.04:1 on card (AA) */

  /* ---- Order-stage status colors (kept functionally distinct; 3 hues shifted to
     -600 so white badge text clears AA — DESIGN.md §Status) ---- */
  --status-received:           #dc2626; /* red    (was #ef4444; white 4.83:1 AA) */
  --status-working:            #eab308; /* yellow */
  --status-ready-for-packing:  #22c55e; /* green  */
  --status-packed:             #14b8a6; /* teal   */
  --status-ready-for-delivery: #06b6d4; /* cyan   */
  --status-out-for-delivery:   #4f46e5; /* indigo (was #6366f1; white 6.29:1 AA) */
  --status-en-route:           #7c3aed; /* violet (was #8b5cf6; white 5.70:1 AA) */
  --status-complete:           #6b7280; /* gray   */
  --status-waiting:            #f97316; /* orange */
  --overdue: #ff4d4d;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px; min-height: 100vh; overscroll-behavior: none;
  accent-color: var(--accent);
}
input, select, textarea, button { font-family: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Base content links (anchors without a component class). Component anchors
   — nav links, button-styled links — set their own color and win on specificity. */
a { color: var(--accent); text-decoration-color: var(--accent-2); }
a:hover { color: var(--lime); }

/* Quiet, on-brand scrollbars for the always-on dark UI. */
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

/* ---------- Top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky);
}

/* ---------- Admin shell (top horizontal nav) ---------- */
:root {
  --topbar-h: 60px;
}
.admin-shell {
  display: block;
  min-height: 100vh;
}

/* Brand */
.nav-brand {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--text); text-decoration: none;
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.3px;
  white-space: nowrap;
}
.nav-brand .sub {
  font-size: 0.68rem; color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
}

/* Hamburger (shown by the <1024px breakpoint) */
.nav-toggle {
  display: none;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; cursor: pointer;
  min-height: 40px; align-items: center; justify-content: center;
}
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ----- Horizontal dropdown nav ----- */
/* min-width defaults to auto (NOT 0): with nowrap children the nav holds its
   intrinsic width and can never be compressed below content, so .nav-list cannot
   spill past the shrunken box into the New Order button. .topbar-spacer (flex:1 1
   auto) absorbs slack when wide and collapses first when tight. */
.admin-top-nav { flex: 0 1 auto; }
.admin-top-nav .nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 1px; flex-wrap: nowrap;
}
.admin-top-nav .nav-item { position: relative; }
.admin-top-nav .nav-item.open { z-index: 5; }
.admin-top-nav .nav-link,
.admin-top-nav .nav-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text); text-decoration: none;
  background: transparent; border: 1px solid transparent;
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-sm);
  min-height: 40px; white-space: nowrap;
  transition: background-color var(--speed) ease, color var(--speed) ease;
}
.admin-top-nav .nav-link:hover,
.admin-top-nav .nav-trigger:hover,
.admin-top-nav .nav-link:focus-visible,
.admin-top-nav .nav-trigger:focus-visible { background: var(--card-2); }
.admin-top-nav .nav-item.active > .nav-trigger,
.admin-top-nav .nav-link.active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.admin-top-nav .nav-caret {
  font-size: 0.6rem; color: var(--muted); transition: transform 120ms ease;
}
.admin-top-nav .nav-item.open .nav-caret { transform: rotate(180deg); }

/* Dropdown panels */
.admin-top-nav .nav-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 210px;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.admin-top-nav .nav-item.open > .nav-dropdown {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.admin-top-nav .nav-dropdown--right { left: auto; right: 0; }
/* Invisible hover bridge across the 6px trigger→panel gap so moving the pointer
   into the menu doesn't cross a dead zone and slam it shut. position:absolute is
   required — it keeps the pseudo out of flow so it never becomes a flex/grid item
   (which would break the megamenu grid). Inherits pointer-events:none while the
   panel is closed, so it can't interfere with hovering adjacent items. */
.admin-top-nav .nav-dropdown::before {
  content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
.admin-top-nav .nav-dropdown a {
  display: block; color: var(--muted); text-decoration: none;
  padding: 9px 12px; border-radius: 6px; font-size: 0.9rem; min-height: 40px;
  line-height: 1.3; white-space: nowrap;
  transition: background-color var(--speed) ease, color var(--speed) ease;
}
.admin-top-nav .nav-dropdown a:hover,
.admin-top-nav .nav-dropdown a:focus-visible { background: var(--card-2); color: var(--text); }
.admin-top-nav .nav-dropdown a.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.admin-top-nav .nav-dropdown .ext-icon { margin-left: 2px; opacity: 0.8; vertical-align: -2px; }

/* Grouped sub-section inside a dropdown (e.g. Settings > Logs) */
.admin-top-nav .nav-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.admin-top-nav .nav-group-label,
.admin-top-nav .nav-mm-label {
  display: block; padding: 4px 12px 2px; color: var(--muted);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
}

/* Inventory megamenu (2 columns). The grid + height cap live on the inner
   .nav-mm-scroll wrapper (not the panel) so .nav-dropdown stays overflow:visible
   and its negative-top hover-bridge ::before isn't clipped. */
.admin-top-nav .nav-megamenu .nav-mm-scroll {
  display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 8px;
  /* Never exceed the space from the sticky bar's real bottom to the viewport
     bottom, so a long Categories list scrolls internally instead of running off
     the bottom of the screen. --sticky-bar-h is measured at runtime by common.js
     (bar bottom, incl. any Wix banner); fall back to --topbar-h. */
  max-height: calc(100vh - var(--sticky-bar-h, var(--topbar-h)) - 20px);
  overflow-y: auto;
}
.admin-top-nav .nav-mm-col { display: flex; flex-direction: column; gap: 2px; }
.admin-top-nav .nav-mm-col + .nav-mm-col { border-left: 1px solid var(--border); padding-left: 8px; }
.admin-top-nav .nav-mm-empty { padding: 8px 12px; color: var(--muted); font-size: 0.85rem; }
.nav-cat-dim { opacity: 0.55; }

/* ----- "More ▾" overflow item (priority-plus nav) -----
   admin-nav.js measures the row and relocates trailing top-level <li> items that
   don't fit into .nav-more-panel, keeping the bar on one line from desktop down to
   the tablet breakpoint (below which the hamburger drawer takes over). The moved
   items keep their real DOM/panels; CSS just re-presents them statically as columns
   of a "flex mega menu", so no re-render and no per-item toggle wiring is needed. */
.admin-top-nav .nav-more[hidden] { display: none; }
.admin-top-nav .nav-more-panel {
  /* Anchor to the viewport (not the mid-bar More item) so a wide multi-column
     panel never runs off either edge. A DEFINITE width is required for flex-wrap
     to spread into columns — an absolutely-positioned panel would shrink-to-fit
     its min-content (one column) instead. Right-aligned below the sticky bar. */
  position: fixed; left: auto; right: 12px;
  top: var(--sticky-bar-h, var(--topbar-h));
  flex-direction: row; flex-wrap: wrap; align-items: flex-start;
  gap: 6px 12px; padding: 10px 12px;
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100vh - var(--sticky-bar-h, var(--topbar-h)) - 20px);
  overflow-y: auto;
}
/* Each relocated section becomes a labelled column. */
.admin-top-nav .nav-more-panel > .nav-item {
  position: static; display: flex; flex-direction: column;
  flex: 1 1 190px; min-width: 180px;
}
/* The section's trigger is now just a column header, not an interactive control. */
.admin-top-nav .nav-more-panel > .nav-item > .nav-trigger {
  cursor: default; pointer-events: none; background: none;
  justify-content: flex-start; min-height: 0; padding: 4px 12px 2px;
  color: var(--muted); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; box-shadow: none;
}
.admin-top-nav .nav-more-panel > .nav-item > .nav-trigger.active { color: var(--accent); }
.admin-top-nav .nav-more-panel .nav-caret { display: none; }
/* The relocated dropdown/megamenu flows inline (always expanded) inside More. */
.admin-top-nav .nav-more-panel .nav-dropdown {
  position: static; opacity: 1; visibility: visible; transform: none;
  pointer-events: auto; box-shadow: none; border: none; background: none;
  padding: 0; min-width: 0;
}
.admin-top-nav .nav-more-panel .nav-dropdown::before { display: none; }
/* A relocated megamenu (Inventory) keeps its 2-col grid but drops its own
   height cap + inner scroll — the whole More panel scrolls as one instead. */
.admin-top-nav .nav-more-panel .nav-megamenu { flex-basis: 100%; }
.admin-top-nav .nav-more-panel .nav-megamenu .nav-mm-scroll {
  max-height: none; overflow: visible;
}
/* When "More" is CLOSED its relocated inner dropdowns must NOT re-enable hit-testing:
   the container is opacity:0/visibility:hidden/pointer-events:none, but the rules above
   flip inner .nav-dropdowns back to visibility:visible + pointer-events:auto, turning the
   invisible closed panel into a click-catching sheet over page content. Re-inert until open. */
.admin-top-nav .nav-more:not(.open) .nav-dropdown {
  pointer-events: none;
  visibility: hidden;
}

/* ----- Drawer accordion (reused inside .nav-drawer on <1024px) ----- */
.admin-side-nav { padding: 10px 8px 24px; }
.admin-side-nav a.side-link,
.admin-side-nav button.side-section-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  color: var(--text); text-decoration: none;
  background: transparent; border: none;
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.95rem; min-height: 42px;
  transition: background-color var(--speed) ease, color var(--speed) ease;
}
.admin-side-nav a.side-link:hover,
.admin-side-nav button.side-section-btn:hover,
.admin-side-nav a.side-link:focus-visible,
.admin-side-nav button.side-section-btn:focus-visible {
  background: var(--card-2);
}
.admin-side-nav a.side-link.active {
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
}
.admin-side-nav .side-section-btn .caret {
  margin-left: auto; font-size: 0.7rem; color: var(--muted);
  transition: transform 120ms ease;
}
.admin-side-nav .side-section.open .side-section-btn .caret {
  transform: rotate(180deg);
}
.admin-side-nav .side-section-btn.active {
  color: var(--accent);
}
.admin-side-nav .side-sublinks {
  display: none;
  margin: 2px 0 6px 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.admin-side-nav .side-section.open > .side-sublinks { display: block; }
.admin-side-nav .side-sublinks a {
  display: block;
  color: var(--muted); text-decoration: none;
  padding: 8px 12px; border-radius: 6px;
  font-size: 0.92rem; min-height: 36px;
  line-height: 1.2;
  transition: background-color var(--speed) ease, color var(--speed) ease;
}
.admin-side-nav .side-sublinks a:hover { background: var(--card-2); color: var(--text); }
.admin-side-nav .side-sublinks a.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
/* Master-only nav items (e.g. Sign-in Log): hidden unless the current session was
   unlocked with the master admin code. admin-auth.js adds body.kds-master-admin. */
body:not(.kds-master-admin) [data-master-only] { display: none !important; }
.admin-side-nav .side-sub-label {
  padding: 8px 12px 2px; color: var(--muted);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px;
}
.admin-side-nav .side-sub-sep {
  height: 1px; background: var(--border); margin: 6px 8px;
}
/* Nested Categories accordion inside the Inventory section. */
.admin-side-nav .side-section-nested {
  margin: 6px 0 4px;
}
.admin-side-nav .side-section-nested .side-section-btn-nested {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 12px; min-height: 32px;
  color: var(--muted); font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  border-radius: 6px;
  transition: background-color var(--speed) ease, color var(--speed) ease;
}
.admin-side-nav .side-section-nested .side-section-btn-nested:hover {
  background: var(--card-2); color: var(--text);
}
.admin-side-nav .side-section-nested.open .side-section-btn-nested .caret {
  transform: rotate(180deg);
}
.admin-side-nav .side-sublinks-nested {
  display: none;
  margin: 2px 0 4px 6px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.admin-side-nav .side-section-nested.open .side-sublinks-nested { display: block; }
.admin-side-nav .side-external {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 4px 0;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.admin-side-nav .side-external a {
  flex: 1 1 100%;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 10px; font-size: 0.85rem; font-weight: 600;
  text-align: center;
  transition: border-color var(--speed) ease, color var(--speed) ease, background-color var(--speed) ease;
}
.admin-side-nav .side-external a:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

.admin-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: var(--topbar-h);
}
.admin-topbar .primary-new-order-button {
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: var(--radius-sm);
  padding: 10px 18px; font-size: 1rem; font-weight: 800;
  text-decoration: none; min-height: 42px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; letter-spacing: 0.2px;
  box-shadow: 0 0 0 1px var(--accent-2) inset, 0 6px 16px -6px var(--accent-glow);
  transition: filter var(--speed) ease, box-shadow var(--speed) ease;
}
.admin-topbar .primary-new-order-button:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 20px -6px var(--accent-glow); }
.admin-topbar .primary-new-order-button:active { filter: brightness(0.95); }
.admin-topbar .topbar-spacer { flex: 1 1 auto; }
.admin-topbar .clock { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.admin-content { padding: 16px; }

/* ----- Off-canvas drawer (reuses the .admin-side-nav accordion, <1024px) ----- */
.nav-drawer {
  position: fixed; top: var(--sticky-bar-h, 60px); left: 0; bottom: 0;
  width: min(84vw, 320px);
  background: var(--panel); border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 160ms ease;
  box-shadow: var(--shadow-2);
  overflow-y: auto; z-index: 58;
  display: none; flex-direction: column;
}
.nav-drawer .nav-drawer-brand {
  padding: 16px; border-bottom: 1px solid var(--border);
  font-size: 1.1rem; font-weight: 800; letter-spacing: 0.3px;
}
.nav-drawer .nav-drawer-brand .sub {
  display: block; font-size: 0.72rem; color: var(--accent);
  font-weight: 700; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.8px;
}
.admin-shell.drawer-open .nav-drawer { transform: none; }
.nav-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 56;
}
.admin-shell.drawer-open .nav-backdrop { display: block; }
/* While the drawer is open, recede the topbar's right-side action cluster so it dims WITH
   the backdrop instead of floating bright above it (topbar sits at z=100, above the z=56
   backdrop). Only the hamburger toggle + brand stay bright/tappable. Uses opacity +
   pointer-events ONLY — no display/box change — so the bar's rendered height (and the
   --sticky-bar-h that common.js:syncTopbarHeight feeds to the drawer top and CRM sticky
   headers) is identical open vs closed. .admin-auth-box covers both the "Signed in" span
   and the Lock button (siblings) in one go. */
.admin-shell.drawer-open .admin-topbar .primary-new-order-button,
.admin-shell.drawer-open .admin-topbar .clock,
.admin-shell.drawer-open .admin-topbar .conn-status,
.admin-shell.drawer-open .admin-topbar .admin-auth-box {
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 160ms ease;
}
body.nav-no-scroll { overflow: hidden; }

/* ----- Breakpoints ----- */
@media (min-width: 768px) and (max-width: 1279.98px) {
  /* Reclaim right-cluster width for the horizontal nav in the tight tablet/desktop
     band (the More-overflow nav absorbs the rest). */
  .admin-topbar .clock, .admin-topbar .conn-status { display: none; }
  .admin-topbar .admin-auth-user { display: none; }
  .nav-brand .sub { display: none; }
}
@media (max-width: 767.98px) {
  /* True mobile: the More-overflow horizontal nav gives way to the hamburger
     drawer. Above this (tablet + desktop) the top bar + "More ▾" absorbs overflow. */
  .admin-top-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-drawer { display: flex; }
}
@media (max-width: 480px) {
  .admin-topbar { gap: 8px; padding: 8px 10px; }
  .admin-topbar .primary-new-order-button { padding: 8px 12px; font-size: 0.85rem; }
  .admin-topbar .clock, .admin-topbar .conn-status { display: none; }
  .admin-topbar .admin-auth-user { display: none; }
  .nav-brand .sub { display: none; }
  .nav-brand { font-size: 0.95rem; }
}
.brand { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.3px; }
.brand .sub { font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-left: 6px; }

/* ---------- Deals UI ---------- */
.applied-deal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); color: #bbf7d0;
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 0.85rem; font-weight: 600;
  margin-right: 4px;
}
.applied-deal-remove {
  background: transparent; border: none; color: #fca5a5;
  font-size: 1rem; cursor: pointer; line-height: 1;
  /* Meet the 44px minimum touch target (WCAG 2.5.8) without enlarging the
     glyph — pad the hit area and centre the × within it. */
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.applied-deal-remove:hover { color: #ff5252; }
.deal-notify {
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.92rem;
}
.deal-notify.eligible {
  background: #06301f; border: 1px solid var(--accent-2); color: #d1fae5;
}
.deal-notify.near-threshold {
  background: #3a2a0a; border: 1px solid #b45309; color: #fed7aa;
}
.deal-notify .btn-primary {
  background: var(--accent); border: none; color: var(--accent-ink);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 700;
}
.deal-notify .btn-primary:hover { filter: brightness(1.08); }
.reward-item-tag {
  display: inline-block; background: var(--lime); color: var(--lime-ink);
  border-radius: var(--radius-pill); padding: 2px 8px; font-size: 0.7rem;
  font-weight: 700; margin-left: 6px;
}
.topbar nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.topbar nav a {
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 8px 14px; font-size: 0.95rem; min-height: 38px; font-weight: 600;
  display: inline-flex; align-items: center;
  transition: background-color var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease;
}
.topbar nav a.active, .topbar nav a:hover {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

/* Nav dropdown (Inventory). Hover-open and click-toggle, dark theme. */
.topbar nav .nav-dd {
  position: relative;
}
.topbar nav .nav-dd-btn {
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 8px 14px; font-size: 0.95rem; min-height: 38px; font-weight: 600;
  background: transparent; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease;
}
.topbar nav .nav-dd-btn .caret {
  font-size: 0.7rem; transform: translateY(1px);
}
.topbar nav .nav-dd-btn:hover,
.topbar nav .nav-dd.open .nav-dd-btn,
.topbar nav .nav-dd-btn.active {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.topbar nav .nav-dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px; min-width: 240px;
  box-shadow: var(--shadow-2);
  display: none; z-index: var(--z-dropdown);
  max-height: 70vh; overflow-y: auto;
}
.topbar nav .nav-dd:hover .nav-dd-menu,
.topbar nav .nav-dd.open .nav-dd-menu {
  display: block;
}
.topbar nav .nav-dd-menu a {
  display: block; border: none; border-radius: 6px;
  padding: 8px 12px; color: var(--text);
  font-size: 0.95rem; min-height: 0; white-space: nowrap; font-weight: 500;
}
.topbar nav .nav-dd-menu a:hover,
.topbar nav .nav-dd-menu a.active {
  background: var(--accent); color: var(--accent-ink);
}
.topbar nav .nav-dd-sep {
  height: 1px; background: var(--border); margin: 6px 4px;
}
.topbar nav .nav-dd-label {
  padding: 6px 12px 2px; color: var(--muted);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.6px;
}
.spacer { flex: 1; }
.conn-status {
  font-size: 0.85rem; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--card-2); color: var(--muted); white-space: nowrap;
  font-weight: 600; border: 1px solid var(--border);
}
.conn-status.online  { background: #06301f; color: #a7f3d0; border-color: var(--accent-2); }
.conn-status.offline { background: #3a1212; color: #fecaca; border-color: var(--danger); }
.conn-status.connecting { background: var(--card-2); color: var(--muted); }
.clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; }

main { padding: 16px; }

/* ---------- Grid ---------- */
.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

/* ---------- Order card ---------- */
.order-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 10px solid var(--status-received);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 260px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.order-card[data-status="Working"]            { border-left-color: var(--status-working);  }
.order-card[data-status="Ready for Packing"]  { border-left-color: var(--status-ready-for-packing); }
.order-card[data-status="Packed"]             { border-left-color: var(--status-packed); }
.order-card[data-status="Ready for Delivery"] { border-left-color: var(--status-ready-for-delivery); }
.order-card[data-status="Out for Delivery"]   { border-left-color: var(--status-out-for-delivery); }
.order-card[data-status="En Route"]           { border-left-color: var(--status-en-route); }
.order-card[data-status="Complete"]           { border-left-color: var(--status-complete); opacity: 0.85; }
.order-card[data-status="Waiting on Kitchen"]     { border-left-color: var(--status-waiting); }
.order-card[data-status="Waiting on Fulfillment"] { border-left-color: var(--status-waiting); }
.order-card.overdue { box-shadow: 0 0 0 2px var(--overdue) inset, var(--shadow-1); }
/* Clickable cards (dispatch / admin use role="button"); KDS cards don't, so this
   hover affordance is scoped away from the display screens. */
.order-card[role="button"] { cursor: pointer; }
.order-card[role="button"]:hover,
.order-card[role="button"]:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-2);
}

.card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.card-head .id { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; }
.customer {
  font-size: 1.3rem; font-weight: 700; line-height: 1.2; word-break: break-word;
  /* Clamp very long names to 2 lines (ellipsis) so they can't sprawl down the
     card head; the badges sit in a separate flex column so there's no collision. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
/* Preferred name (nickname) leads on order tickets/cards, with the legal name
   kept as a smaller muted "ID:" reference line beneath (customerTicketNameHtml).
   em-relative so it scales on both the large card name and smaller ticket views. */
.cust-preferred { display: block; }
.cust-idname {
  display: block; font-size: 0.62em; font-weight: 600; color: var(--muted);
  line-height: 1.25; letter-spacing: 0.2px;
}

.badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.badge {
  font-size: 0.78rem; padding: 4px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card-2); color: var(--text);
  font-weight: 700; white-space: nowrap;
}
.badge.cat-Shipping { background: #0c2b4a; color: #bae6fd; border-color: #1e5a8a; }
.badge.cat-Pickup   { background: #06301f; color: #d1fae5; border-color: #166534; }
.badge.cat-Delivery { background: #3a1e08; color: #fed7aa; border-color: #9a3412; }

.badge.status-Received           { background: var(--status-received); color: white; }
.badge.status-Working            { background: var(--status-working); color: #2a1f00; }
.badge.status-Ready-for-Packing  { background: var(--status-ready-for-packing);  color: #052e16; }
.badge.status-Ready-for-Delivery { background: var(--status-ready-for-delivery); color: #083344; }
.badge.status-Packed             { background: var(--status-packed); color: #042f2e; }
.badge.status-Out-for-Delivery   { background: var(--status-out-for-delivery); color: white; }
.badge.status-En-Route           { background: var(--status-en-route); color: white; }
.badge.status-Complete           { background: var(--status-complete); color: white; }
.badge.status-Waiting-on-Kitchen,
.badge.status-Waiting-on-Fulfillment { background: var(--status-waiting); color: #2a1500; }
.badge.route-kitchen     { background: #3a2607; color: #fde68a; border-color: #92400e; }
.badge.route-fulfillment { background: #07293f; color: #bae6fd; border-color: #075985; }
.badge.paid              { background: #06301f; color: #d1fae5; border-color: #166534; }
.badge.unpaid            { background: #3a1212; color: #fecaca; border-color: var(--danger); }
.badge.partial           { background: #3a2a06; color: #fde68a; border-color: #b45309; }
/* Brand badges (non-KDS order cards). Cannabake = pink, Gift Givers = green. */
.badge.brand-cannabake   { background: #3a0a23; color: #fbcfe8; border-color: #be185d; }
.badge.brand-gift-givers { background: #06301f; color: #d1fae5; border-color: #166534; }
/* Secondary chips (brand/paid) read lighter so the status badge stays primary. */
.badge.brand-cannabake, .badge.brand-gift-givers,
.badge.paid, .badge.unpaid, .badge.partial { font-weight: 600; }
/* Driver marked the delivery done on the public portal; awaiting admin approval. */
.badge[class*="Pending-Approval"] { background: #3a2e07; color: #fde68a; border-color: #a16207; }

.times {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 14px; font-size: 0.95rem; color: var(--muted);
}
.times strong { color: var(--text); font-weight: 600; }
.time-left { grid-column: span 2; font-size: 1.1rem; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.time-left.overdue { color: var(--overdue); }

.items-list { margin: 0; padding: 0; list-style: none; }
.items-list li {
  padding: 5px 0; font-size: 1.05rem;
  border-bottom: 1px dashed var(--border);
  display: flex; gap: 8px; align-items: baseline;
}
.items-list li:last-child { border-bottom: none; }
.qty { display: inline-block; min-width: 2.6em; color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.station-tag {
  font-size: 0.7rem; padding: 2px 6px; border-radius: 4px;
  background: var(--card-2); color: var(--muted); border: 1px solid var(--border);
  margin-left: auto;
}
.station-tag.kitchen     { color: #fde68a; border-color: #92400e; }
.station-tag.fulfillment { color: #bae6fd; border-color: #075985; }
.station-tag.both        { color: #c4b5fd; border-color: #5b21b6; }

.notes {
  background: var(--card-2); border-radius: 6px;
  padding: 8px 12px; font-size: 0.95rem; color: #d7e2db;
  white-space: pre-wrap; word-break: break-word;
  border-left: 3px solid var(--border-strong);
}
.notes.driver-note { border-left-color: var(--status-en-route); margin-top: 6px; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.action {
  flex: 1 1 calc(50% - 6px);
  min-height: 52px;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: background-color 80ms ease, color 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
.action:active { transform: translateY(1px); }
.action:hover:not(:disabled), .action:focus-visible:not(:disabled) {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.action.danger { background: #3a1212; color: #fecaca; border-color: var(--danger-deep); }
.action.danger:hover { background: #991b1b; color: #fff; border-color: #991b1b; }
.action.current { outline: 2px solid var(--accent); outline-offset: -2px; }
.action:disabled { opacity: 0.5; cursor: not-allowed; }
/* Driver-portal completion approval buttons. */
.action.approve { background: #06301f; color: #a7f3d0; border-color: #166534; }
.action.approve:hover:not(:disabled) { background: #166534; color: #fff; border-color: #166534; }
.action.reject  { background: #3a2007; color: #fed7aa; border-color: #9a3412; }
.action.reject:hover:not(:disabled)  { background: #9a3412; color: #fff; border-color: #9a3412; }

/* Banner on an admin card whose driver completed it on the public portal. */
.pending-approval {
  background: #2a2207; border: 1px solid #a16207; border-left: 3px solid #eab308;
  border-radius: 6px; padding: 8px 12px; font-size: 0.95rem; color: #fde68a;
}
.pending-approval strong { display: block; margin-bottom: 2px; }
.pending-approval .pa-detail { color: #e7d9a8; font-size: 0.88rem; font-weight: 400; line-height: 1.4; }

/* ---------- Forms ---------- */
.form-card {
  max-width: 820px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-1);
}
.form-title { margin: 0 0 4px; font-size: var(--fs-heading); font-weight: 700; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.form-row.three-col {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
}
@media (max-width: 640px) {
  .form-row.two-col, .form-row.three-col { grid-template-columns: 1fr; }
}

/* ---- Read-only-first order editor -----------------------------------------
   /orders/edit/:id and /dispatch/order/:id open in "view mode": every field
   renders as static text until the Edit button unlocks it. Scoped to
   .form-card.view-mode so /new-order (same widgets) is untouched.
   Text-like inputs/textarea use [readonly] (they stay in the a11y tree,
   focusable + announced); <select>/checkbox/radio — which ignore readonly —
   use :disabled. Both must de-chrome to read as static text. */
.form-card.view-mode input:disabled,
.form-card.view-mode select:disabled,
.form-card.view-mode textarea:disabled,
.form-card.view-mode input[readonly],
.form-card.view-mode textarea[readonly] {
  background: transparent; border-color: transparent; color: var(--text);
  opacity: 1; cursor: default; -webkit-text-fill-color: var(--text);
}
/* Text-like controls drop their chrome: no select arrow, flush-left value. */
.form-card.view-mode select:disabled {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.form-card.view-mode select:disabled,
.form-card.view-mode textarea:disabled,
.form-card.view-mode textarea[readonly],
.form-card.view-mode input:not([type="checkbox"]):not([type="radio"]):disabled,
.form-card.view-mode input:not([type="checkbox"]):not([type="radio"])[readonly] {
  padding-left: 0;
}
/* Checkboxes/radios keep their checked state visible (just non-interactive). */
.form-card.view-mode input[type="checkbox"]:disabled,
.form-card.view-mode input[type="radio"]:disabled { opacity: 1; cursor: default; }
/* The datetime-picker trigger reads as static text too (hide its calendar icon). */
.form-card.view-mode .dt-trigger:disabled {
  background: transparent; border-color: transparent; color: var(--text);
  opacity: 1; cursor: default; padding-left: 0;
}
.form-card.view-mode .dt-trigger:disabled .dt-trigger-icon { display: none; }
/* The applied-deals list is read-only in view mode: hide the remove buttons. */
.form-card.view-mode #appliedDeals .applied-deal-remove { display: none; }

/* ---- Order editor: section grouping, sticky actions, field errors ----------
   Additive classes used only by the shared order editor (order-edit.html). They
   never touch .form-card / .form-row, so /new-order and every other form that
   shares them is untouched. */
.form-head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* "Viewing — read only" state pill next to the mode heading. Neutral, not green
   (green is reserved for identity/action/live), so it reads as a state, not a CTA. */
.view-badge {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); background: var(--card-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 4px 12px; white-space: nowrap;
}
/* ~5 labeled groups so the form reads as sections, not a flat 20-row wall. The
   section head is the documented Label type (uppercase muted-sage), and adjacent
   sections get a quiet hairline divider (never the green accent). */
.form-section { display: flex; flex-direction: column; gap: 16px; }
.form-section + .form-section { border-top: 1px solid var(--border); padding-top: 18px; }
.form-section-head {
  margin: 0; color: var(--muted);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
}
/* Totals pulled out of the button row into their own emphasized summary block
   (reuses .rt-row / .rt-row.strong for the line math). */
.form-totals {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
/* Sticky action bar: the primary action stays reachable without scrolling to the
   very end. Spans the card padding via negative margins and rests flush at the
   card's bottom edge (so it never overlaps the last field at full scroll). */
.form-actions {
  position: sticky; bottom: 0;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 14px 22px; margin: 0 -22px -22px;
  background: var(--card); border-top: 1px solid var(--border);
  border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
}
/* Author display:flex would otherwise beat the UA [hidden] rule — restore it so
   the bar can be hidden in view mode. */
.form-actions[hidden] { display: none; }
.form-actions .btn-primary.big { flex: 1 1 220px; }
.form-actions .btn-secondary { flex: 0 0 auto; }
/* Field-level validation errors (P1-C): red text under the offending control,
   collapsed to zero height until populated so empty slots reserve no space. */
.field-err { color: var(--overdue); font-size: var(--fs-sm); margin-top: 4px; }
.field-err:empty { display: none; }
/* Field help text: one reusable "hint under a control" role. Replaces the
   scattered inline font-size:0.85rem spans on the order editor; capped measure
   + body line-height so multi-line notes (e.g. driver) read comfortably. */
.field-hint {
  margin-top: 4px; color: var(--muted);
  font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 62ch;
}
/* Order id + placed-time in the action bar are reconciled figures — tabular. */
#orderHeading, #orderPlaced { font-variant-numeric: tabular-nums; }
.form-card .field-invalid,
.form-card .field-invalid:hover {
  border-color: var(--overdue); box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.35);
}

/* ---- Multi-item receive: one card per line item ---- */
.receive-items { display: flex; flex-direction: column; gap: 12px; }
.receive-empty {
  color: var(--muted); font-size: 0.95rem; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 18px;
}
.receive-item {
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.receive-item-head { display: flex; align-items: flex-start; gap: 10px; }
.receive-item-name { font-weight: 600; color: var(--text); }
.receive-item-sub { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.receive-item-remove {
  margin-left: auto; flex: 0 0 auto;
  background: #3a1212; color: #fecaca; border: 1px solid var(--danger-deep);
  border-radius: var(--radius-sm); width: 34px; height: 34px; min-height: 0;
  cursor: pointer; font-size: 1.2rem; font-weight: 700; line-height: 1; padding: 0;
  transition: background-color var(--speed) ease;
}
.receive-item-remove:hover { background: #991b1b; color: #fff; }
label { font-size: 0.95rem; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
/* A label that DIRECTLY wraps a checkbox/radio must sit as a centered row, not the
   stacked flex-column above (which is meant for field labels). Without this, the native
   control is a flex item that WebKit/Safari stretches to the label's full width, deforming
   it into a rectangle with the text stacked below. Values match .checkbox-row label so the
   :has() specificity (0,1,2 — higher than .checkbox-row's 0,1,1) never regresses it. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
input, select, textarea {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px; font-size: 1rem; min-height: var(--control-h); width: 100%;
  transition: border-color var(--speed) ease, box-shadow var(--speed) ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--accent-2); }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--accent);
}
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
textarea { min-height: 90px; resize: vertical; }
/* Native checkbox/radio must opt out of the block-input sizing above (width:100%,
   min-height:48px, padding:12px) — otherwise Safari/WebKit renders a stretched, oversized
   box (visible on unstyled table selectors like #selAll / .row-sel and every loose filter
   toggle). Give them a consistent square size and the app's green accent on the dark theme.
   The .checkbox-row / .ka-card-sel / .ka-selall rules (0,2,1) still win their explicit sizes. */
input[type="checkbox"],
input[type="radio"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  min-height: 0; padding: 0; margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Normalize <select> across browsers. Without appearance:none, Safari (macOS)
   draws native dropdowns that are wider/taller than the styled ones Chrome/Edge
   render on Windows — the source of the All Products toolbar "shift". We draw a
   custom chevron (stroked in --muted #8fa399) so every platform matches. */
select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238fa399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
  text-overflow: ellipsis;
}
select::-ms-expand { display: none; }

.btn-primary {
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: var(--radius-sm); padding: 14px; font-size: 1.05rem; font-weight: 800;
  cursor: pointer; min-height: var(--control-h-lg); letter-spacing: 0.2px;
  box-shadow: var(--glow-accent);
  transition: filter var(--speed) ease;
}
.btn-primary.big { min-height: var(--control-h-touch); font-size: 1.15rem; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { filter: brightness(0.95); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary {
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 10px 16px; font-size: 1rem; cursor: pointer; min-height: var(--control-h); font-weight: 600;
  transition: background-color var(--speed) ease, border-color var(--speed) ease;
}
.btn-secondary:hover { background: var(--card-3); border-color: var(--accent-2); }
/* Danger button for destructive/high-consequence actions (delete, ban, cancel,
   force-complete). Shares the primary button's sizing/weight so it reads as a
   real CTA, but in a red accent. */
.btn-danger {
  background: var(--danger); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 14px; font-size: 1.05rem; font-weight: 800;
  cursor: pointer; min-height: var(--control-h-lg); letter-spacing: 0.2px;
  box-shadow: var(--glow-danger);
  transition: filter var(--speed) ease;
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:active { filter: brightness(0.95); }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }
/* Message paragraph inside the shared confirm dialog. */
.confirm-msg { margin: 0 0 4px; color: var(--text); line-height: 1.5; white-space: pre-line; }
/* Transient toast (KDS.toast) — non-blocking replacement for window.alert. */
.kds-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  z-index: var(--z-toast); max-width: min(92vw, 480px);
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px 18px; font-size: 0.98rem; line-height: 1.4;
  box-shadow: var(--shadow-1);
  opacity: 0; pointer-events: none;
  transition: opacity var(--speed) ease, transform var(--speed) ease;
}
.kds-toast.show { opacity: 1; transform: translate(-50%, 0); }
.kds-toast.err { border-color: var(--danger); color: #fca5a5; }
.kds-toast.ok  { border-color: var(--accent-2); color: #86efac; }
/* Persistent offline/stale-data banner for always-on real-time screens. */
.stale-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-banner);
  display: none; text-align: center;
  background: var(--danger-deep); color: #fff;
  padding: 10px 16px; font-size: 0.98rem; font-weight: 600;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.6);
}
.stale-banner.show { display: block; }

/* Wix order approval notification — a compact floating pill anchored bottom-right,
   shown on every internal screen while Wix orders await admin approval. Uses the
   same "needs attention" yellow as the Pending-Approval status badge. It reserves
   no layout space (fixed) so it never pushes tables/menus, and sits at z-index 90
   — above page content but BELOW the modal (100) / expanded-map overlay (200)
   tiers — so it can never cover an interactive control (behind a fullscreen
   overlay it is simply hidden). See common.js setupWixApprovalBanner. */
.wix-approval-pill {
  /* z-index intentionally OFF the --z-* ladder: must stay above page content yet
     below --z-overlay (300) and --z-modal (500) per its own contract. */
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  box-sizing: border-box; max-width: min(340px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #eab308; color: #2a1f00;
  border: 1px solid #a16207; border-radius: 12px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.65);
  font-size: 0.92rem; font-weight: 700;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--speed) ease, transform var(--speed) ease;
}
.wix-approval-pill.show { opacity: 1; transform: translateY(0); }
.wix-approval-pill[hidden] { display: none; }
.wix-approval-pill .wab-icon { flex: 0 0 auto; font-size: 0.7rem; line-height: 1; color: #7c2d12; }
.wix-approval-pill .wab-text { flex: 1 1 auto; letter-spacing: 0.2px; line-height: 1.25; }
.wix-approval-pill .wab-review {
  flex: 0 0 auto; cursor: pointer;
  background: #2a1f00; color: #fde68a;
  border: 1px solid #7c2d12; border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.3px;
}
.wix-approval-pill .wab-review:hover { background: #3a2e07; }
.wix-approval-pill .wab-dismiss {
  flex: 0 0 auto; cursor: pointer; line-height: 1;
  width: 28px; height: 28px; padding: 0;
  background: transparent; color: #2a1f00;
  border: 1px solid #a16207; border-radius: 50%;
  font-size: 1.15rem; font-weight: 700;
}
.wix-approval-pill .wab-dismiss:hover { background: rgba(124, 45, 18, 0.15); }
.wix-approval-pill .wab-review:focus-visible,
.wix-approval-pill .wab-dismiss:focus-visible {
  outline: 3px solid var(--lime); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .wix-approval-pill { transition: none; }
}

.item-row {
  display: grid; grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) 130px 110px 52px;
  gap: 8px; align-items: start; margin-bottom: 8px;
}
/* Order item rows (new-order / edit) have no station selector, so one fewer
   column than the shared 5-col grid used by the deal editor. */
#itemRows .item-row {
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) 110px 52px;
}
.item-row input, .item-row select { min-height: var(--control-h); }
.item-product-wrap { position: relative; }
.item-product-wrap .item-product-search { width: 100%; box-sizing: border-box; }
.item-product-results {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: var(--z-dropdown); max-height: 320px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); margin-top: 4px; box-shadow: var(--shadow-2);
}
.item-product-results .row {
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.item-product-results .row:last-child { border-bottom: none; }
.item-product-results .row:hover,
.item-product-results .row.focused { background: var(--card-2); }
.item-product-results .row.selected { outline: 1px solid var(--accent); outline-offset: -1px; }
.item-product-results .row.disabled { opacity: 0.55; cursor: not-allowed; }
.item-product-results .empty { padding: 10px 12px; color: var(--muted); }
.remove-item {
  background: #3a1212; color: #fecaca; border: 1px solid var(--danger-deep);
  border-radius: var(--radius-sm); min-height: var(--control-h); cursor: pointer;
  font-size: 1.3rem; font-weight: 700;
  transition: background-color var(--speed) ease;
}
.remove-item:hover { background: #991b1b; color: #fff; }
@media (max-width: 720px) {
  .item-row { grid-template-columns: 1fr 1fr 52px; grid-auto-rows: auto; }
  .item-row > :nth-child(1) { grid-column: 1 / -1; }
}

.checkbox-row { display: flex; gap: 18px; flex-wrap: wrap; }
.checkbox-row label {
  flex-direction: row; align-items: center; gap: 8px;
  background: var(--card-2); padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); cursor: pointer; min-height: var(--control-h);
  color: var(--text); font-weight: 600;
  transition: border-color var(--speed) ease;
}
.checkbox-row label:hover { border-color: var(--accent-2); }
.checkbox-row input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; cursor: pointer; accent-color: var(--accent); }

.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--muted); font-size: 1.1rem; line-height: 1.5;
}
/* Loading + error variants of the empty state. Loading reads as "in progress"
   so a slow fetch doesn't look broken; error uses the danger text colour and
   pairs with a Retry button rendered by the page JS. */
.empty-state.loading-state { color: var(--muted); }
.empty-state.error-state { color: #fca5a5; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state-icon { font-size: 2.2rem; line-height: 1; opacity: 0.7; }
.empty-state-msg { max-width: 40ch; }
.empty-state-cta { margin-top: 4px; text-decoration: none; }

/* ---------- KDS board tabs (shared by kitchen / fulfillment) ----------
   Promoted from the inline <style> in kitchen/index.html so both display
   boards render the Orders / Scheduled Orders (and kitchen's Daily Schedule) tabs
   identically. .kds-view.hidden is covered by the global .hidden rule above. */
.kds-tabs { display: flex; gap: 8px; padding: 8px 12px 0; }
.kds-tab {
  background: var(--card-2, #161b22); color: var(--text, #e6edf3);
  border: 1px solid var(--border, #2d3548); border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 12px 22px; font-size: 1.05rem;
  font-weight: 700; cursor: pointer; min-height: var(--control-h);
}
.kds-tab.active { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }

/* ---------- Spinner + skeleton (shared async affordances) ---------- */
.spinner {
  display: inline-block; width: 28px; height: 28px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%;
  animation: kds-spin 0.7s linear infinite;
  vertical-align: middle;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes kds-spin { to { transform: rotate(360deg); } }
.skeleton {
  position: relative; overflow: hidden;
  background: var(--card-2); border-radius: var(--radius-sm);
  min-height: 1em;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-100%);
  animation: kds-shimmer 1.3s ease-in-out infinite;
}
@keyframes kds-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
  .skeleton::after { animation: none; }
  .fulfill-item.item-removed .fulfill-item-name,
  .fulfill-item.item-qty-changed .fulfill-item-name { animation: none; color: var(--muted); }
}

/* Link-styled button — promoted from all-products page so it's available app-wide. */
.btn-link {
  background: none; border: none; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit;
  text-decoration: underline; text-decoration-color: var(--accent-2);
}
.btn-link:hover { color: var(--lime); }

.hidden { display: none !important; }
/* Visually hidden but available to screen readers (e.g. "(opens in new tab)"). */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.form-msg { font-size: 0.95rem; min-height: 1.2em; }
.form-msg.ok  { color: #86efac; }
.form-msg.err { color: #fca5a5; }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; font-size: 0.95rem; flex-wrap: wrap;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal-backdrop); padding: 16px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 24px; max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-2);
}
.modal h2 { margin: 0; font-size: 1.2rem; }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; }
/* Scrollable body for the read-only content modal (e.g. inventory log detail). */
.modal-content-body { min-height: 0; overflow: auto; }
.modal-content-body > p { margin: 0 0 10px; }
/* Inside the content modal there is no page topbar; park the sticky header at
   the modal body's own scroll top instead of offsetting by --sticky-bar-h
   (which is measured for the full-page topbar). Without this the header floats
   ~64px down and covers the first data row. Mirrors the mobile override at the
   .table-scroll rule below. */
.modal-content-body .crm-table thead th { top: 0; }
/* The detail table inside the modal is read-only — don't imply its rows click. */
.modal-content-body .crm-table tbody tr { cursor: default; }
.modal-content-body .crm-table tbody tr:hover,
.modal-content-body .crm-table tbody tr:hover td { background: transparent; }
/* Keyboard focus ring for the clickable operation rows in the log tables. */
#logTable tbody tr.log-group-row:focus-visible {
  outline: 2px solid var(--accent, #4ea1ff); outline-offset: -2px;
}
/* Read-only "Driver reported" block in the payment-entry dialog. */
.payment-reported {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card-2); padding: 10px 12px;
}
.payment-reported-title { font-weight: 800; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
.payment-reported dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; }
.payment-reported dt { color: var(--muted); }
.payment-reported dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* Auto-computed tip readout in the payment dialog */
.payment-tip-line { font-weight: 700; padding: 4px 0; }
.payment-tip-line #payTipCalc { font-variant-numeric: tabular-nums; }
.payment-tip-hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }

/* ---------- Display banner ---------- */
.display-banner {
  background: var(--panel); padding: 18px 20px; text-align: center;
  border-bottom: 1px solid var(--border);
}
.display-banner h1 { margin: 0; font-size: 1.6rem; letter-spacing: 1px; }
.display-banner .sub { color: var(--muted); margin-top: 4px; font-size: 0.95rem; }
.display-banner.kitchen     { background: linear-gradient(180deg, #3a2607 0%, var(--panel) 100%); }
.display-banner.fulfillment { background: linear-gradient(180deg, #07293f 0%, var(--panel) 100%); }

/* ---------- Tablet / TV scaling ---------- */
@media (min-width: 1400px) {
  body { font-size: 17px; }
  .customer { font-size: 1.5rem; }
  .items-list li { font-size: 1.2rem; }
  .time-left { font-size: 1.25rem; }
}
@media (min-width: 1800px) {
  body { font-size: 18px; }
  .customer { font-size: 1.7rem; }
  .items-list li { font-size: 1.3rem; }
  .order-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}
@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; }
  .order-grid { grid-template-columns: 1fr; }
}

/* ---------- CRM ---------- */
.crm-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  /* NOTE: no `overflow: hidden` here. It would make the table a scroll
     container, which becomes the sticky <thead>'s scrollport instead of the
     window — shifting the header down by `top: --sticky-bar-h` even at zero
     scroll, on top of row 1. Corners are clipped via corner-cell radii below. */
}
/* Round the card corners on the edge cells (replaces overflow:hidden clipping). */
.crm-table thead th:first-child { border-top-left-radius: var(--radius); }
.crm-table thead th:last-child { border-top-right-radius: var(--radius); }
.crm-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.crm-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }
.crm-table thead th {
  background: var(--panel); color: var(--muted);
  text-align: left; padding: 12px; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-strong);
  /* Park just below the sticky bar (.admin-topbar on shell pages, .topbar
     otherwise). Its rendered height varies (nav wrap, button sizing), so
     common.js measures the real bar into --sticky-bar-h at runtime; 64px is a
     safe fallback. A too-small value tucks the stuck header behind the bar
     (which has a higher z-index) and hides it. */
  position: sticky; top: var(--sticky-bar-h, 64px);
  /* Must stack ABOVE the positioned body cells below (z-index:2) and have an
     opaque background, so the header (a) is never painted over by the body —
     which previously hid the headers entirely — and (b) cleanly covers rows
     scrolling beneath it once it sticks. */
  z-index: 3;
}
.crm-table tbody td {
  padding: 12px; font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
  /* Opaque, positioned cells so rows don't bleed through one another (and so
     they slide cleanly under the sticky thead, which stacks above at z-index:3). */
  position: relative; z-index: 2; background: var(--card);
}
.crm-table tbody tr:last-child td { border-bottom: none; }
.crm-table tbody tr { cursor: pointer; transition: background 80ms ease; }
.crm-table tbody tr:hover { background: var(--card-2); }
.crm-table tbody tr:hover td { background: var(--card-2); }
.crm-table tbody tr.banned { opacity: 0.65; }
.crm-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Horizontal-scroll container for wide tables on narrow viewports, so the
   multi-column CRM/dispatch tables scroll within their card instead of forcing
   the whole page to scroll sideways. Wide layout is unchanged at tablet+. */
.table-scroll { width: 100%; }
@media (max-width: 640px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll .crm-table { min-width: 640px; }
  /* Kitchen admin tables (inventory / low-stock / analytics) are multi-column
     and would overflow the PIN-gated panel on phones; let them scroll within
     their .table-scroll wrapper instead of being clipped. */
  .table-scroll .ka-table { min-width: 720px; }
  /* overflow-x:auto makes .table-scroll the sticky scrollport on mobile, which
     would re-introduce the downward header shift. Stick the header to the
     container top instead of offsetting by the (page) topbar height. */
  .crm-table thead th { top: 0; }
}

.crm-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.crm-toolbar input[type="search"], .crm-toolbar select {
  min-height: 44px; max-width: 320px; flex: 1 1 220px;
}
.crm-toolbar .btn-primary { min-height: 44px; padding: 8px 16px; font-size: 1rem; }

/* Pager control for server-paginated lists (KDS.mountPager). Reuses the
   secondary-button + muted-text vocabulary so it reads as native chrome. */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 14px 0 4px; flex-wrap: wrap;
}
.pager .pager-info {
  font-size: 0.9rem; font-variant-numeric: tabular-nums;
  min-width: 10ch; text-align: center;
}
.pager .btn-secondary { min-height: 40px; padding: 8px 16px; min-width: 96px; }
.pager .btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

.badge.ban-active { background: #06301f; color: #d1fae5; border-color: #166534; }
.badge.ban-banned { background: #3a1212; color: #fecaca; border-color: var(--danger); }

/* Loyalty status — informational only (no points / discounts / pricing). */
.badge.loyalty-member     { background: #0c2b4a; color: #dbeafe; border-color: #1d4ed8; }
.badge.loyalty-non-member { background: var(--card-2); color: #cbd5e1; border-color: var(--border-strong); }

.crm-banner {
  background: #3a1212; color: #fecaca;
  padding: 14px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--danger); font-weight: 700;
  margin-bottom: 14px;
}

.crm-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}
.crm-section h2 { margin: 0 0 12px; font-size: 1.1rem; }
.crm-kvgrid {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px;
  font-size: 0.95rem;
}
.crm-kvgrid dt { color: var(--muted); }
.crm-kvgrid dd { margin: 0; color: var(--text); word-break: break-word; }

.crm-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.crm-stat {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px;
}
.crm-stat .label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.crm-stat .value { color: var(--text); font-size: 1.4rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

.crm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.customer-contact {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 0.85rem; color: var(--text);
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px;
}
.customer-contact dt { color: var(--muted); margin: 0; }
.customer-contact dd { margin: 0; word-break: break-word; }
.customer-contact .order-total { color: var(--accent); font-weight: 700; }

.crm-search-results {
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); margin-top: 4px; max-height: 280px; overflow-y: auto;
  box-shadow: var(--shadow-2);
}
.crm-search-results .row {
  padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.crm-search-results .row:last-child { border-bottom: none; }
.crm-search-results .row:hover, .crm-search-results .row.selected,
.crm-search-results .row.focused {
  background: var(--card-2);
}
.crm-search-results .row.banned { color: #fca5a5; }
.crm-search-results .empty { padding: 10px 12px; color: var(--muted); }

/* Searchable product picker dropdown (mountProductSearch). Absolutely
   positioned over the following form fields like the order-form item search. */
.product-search-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-dropdown);
}

.selected-customer {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.selected-customer.banned { border-color: var(--danger); background: #2a0f0f; color: #fecaca; }
.selected-customer .meta { color: var(--muted); font-size: 0.9rem; }

.modal.wide { max-width: 560px; }

/* ---------- Fulfillment display: per-item Fulfill rows ---------- */
.section-label {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
  margin-top: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.fulfill-items-list li.fulfill-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-radius: var(--radius-sm);
  border-bottom: 1px dashed var(--border);
  transition: background-color 120ms ease, opacity 120ms ease;
}
.fulfill-items-list li.fulfill-item:last-child { border-bottom: none; }
.fulfill-item-main {
  display: flex; gap: 8px; align-items: baseline; flex: 1; min-width: 0;
}
.fulfill-item-name { font-size: 1.05rem; word-break: break-word; }
.fulfill-item-action { flex: 0 0 auto; }
.fulfill-btn {
  min-height: 44px; padding: 10px 16px; flex: 0 0 auto;
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 700;
}
.fulfill-btn:hover:not(:disabled) { filter: brightness(1.08); }
.fulfill-item.fulfilled {
  background: #0b1410;
  opacity: 0.55;
}
.fulfill-item.fulfilled .fulfill-item-name {
  text-decoration: line-through;
  color: var(--muted);
}

/* ---------- Admin status block (kitchen / fulfillment / delivery / overall) ---------- */
.status-block {
  display: grid; gap: 4px;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 0.92rem;
}
.status-row { display: flex; justify-content: space-between; gap: 10px; }
.status-row .status-label { color: var(--muted); }
.status-row .status-value { color: var(--text); font-weight: 600; }
.status-row .status-value.strong { color: var(--accent); font-weight: 700; }

/* ============================================================
   Multi-step POS new-order flow
   ============================================================ */
.pos-steps {
  display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px;
  flex-wrap: wrap;
}
.pos-steps li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--muted); font-weight: 600; font-size: 0.9rem; background: var(--card);
}
.pos-steps li .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--card-2);
  color: var(--muted); font-size: 0.82rem; border: 1px solid var(--border);
}
.pos-steps li.active { color: var(--text); border-color: var(--accent); }
.pos-steps li.active .num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pos-steps li.done .num { background: var(--accent-2); color: var(--accent-ink); }

.pos-panel { animation: pos-fade var(--speed) ease; }
@keyframes pos-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.pos-actions {
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  margin-top: 16px; flex-wrap: wrap;
}
.pos-actions .btn-primary.big { min-width: 200px; }

/* Step 2 — three-column POS layout */
.pos-grid {
  display: grid; grid-template-columns: 200px 1fr 320px; gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) { .pos-grid { grid-template-columns: 160px 1fr 280px; } }
@media (max-width: 860px)  { .pos-grid { grid-template-columns: 1fr; } }

.pos-categories {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; max-height: 70vh; overflow-y: auto;
}
.pos-cat {
  text-align: left; padding: 8px 10px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 0.9rem;
}
.pos-cat:hover { background: var(--card-2); color: var(--text); }
.pos-cat.active { background: var(--accent-soft); color: var(--text); border-left: 3px solid var(--accent); }

.pos-products { display: flex; flex-direction: column; gap: 10px; }
.pos-search {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text); font-size: 0.95rem;
}
.pos-product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-height: 70vh; overflow-y: auto; padding-right: 2px;
}
.pos-product {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text); cursor: pointer; min-height: 86px;
  min-width: 0; /* allow grid item to shrink below content width — no horizontal scroll */
  transition: border-color var(--speed) ease, transform var(--speed) ease;
}
.pos-product:hover { border-color: var(--accent); transform: translateY(-1px); }
.pos-product.disabled { opacity: 0.45; cursor: not-allowed; }
.pos-product .pp-name { font-weight: 700; font-size: 0.92rem; line-height: 1.2; }
.pos-product .pp-cat { font-size: 0.78rem; }
.pos-product .pp-meta { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 0.8rem; }
.pos-product .pp-price { color: var(--accent); font-weight: 700; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-product .pp-stock { color: var(--muted); flex: 0 0 auto; white-space: nowrap; }
.pos-product .pp-stock.out { color: var(--overdue); }
.pos-product .pp-tier-btn {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; color: var(--accent);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1px 6px; background: var(--card-2); cursor: pointer; white-space: nowrap;
}
.pos-product .pp-tier-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Per-item pricing / quantity modal */
.item-pricing-modal { max-width: 380px; }
.item-pricing-body { max-height: 50vh; overflow-y: auto; }
.item-tier-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.item-tier-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.78rem; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.item-tier-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.item-tier-table tr.active td { background: var(--accent-soft); font-weight: 700; }
.item-pricing-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.item-pricing-total { font-size: 1.05rem; }
.item-pricing-total strong { color: var(--accent); }

.pos-cart {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; max-height: 74vh; position: sticky; top: 12px;
}
.pos-cart-head { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--border); }
.pos-cart-lines { padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.pos-cart-foot { padding: 12px 14px; border-top: 1px solid var(--border); }
.pos-subtotal { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.05rem; }
.pos-subtotal strong { color: var(--accent); }

.pos-cart-line { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; background: var(--card-2); }
.pos-cart-line.over { border-color: var(--overdue); }
.pcl-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pcl-name { font-weight: 600; font-size: 0.9rem; }
.pcl-remove { background: transparent; border: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.pcl-remove:hover { color: var(--overdue); }
.pcl-mid { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; }
.pcl-qty { display: flex; align-items: center; gap: 4px; }
.pcl-qty .qbtn { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); cursor: pointer; font-size: 1rem; }
.pcl-qinput { width: 56px; text-align: center; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text); }
.pcl-prices { display: flex; flex-direction: column; align-items: flex-end; }
.pcl-total { font-weight: 700; }
.pcl-problem { color: var(--overdue); font-size: 0.78rem; margin-top: 4px; }
/* Per-line batch picker (edit-order items page only). */
.pcl-batch-row { margin-top: 6px; }
.pcl-batch {
  width: 100%; padding: 5px 8px; font-size: 0.82rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
}

/* ---------- Edit-order: read-only item snapshot ---------- */
.item-snapshot-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.item-snapshot {
  margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-2); overflow: hidden;
}
.isnap-line {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.item-snapshot .isnap-line:last-child { border-bottom: 0; }
.isnap-name { font-weight: 600; font-size: var(--fs-body); }
.isnap-qty { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; margin-left: 6px; font-variant-numeric: tabular-nums; }
.isnap-price { font-size: var(--fs-body); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.isnap-price s { color: var(--muted); }
.isnap-line.is-ghost { opacity: 0.55; }
.isnap-line.is-ghost .isnap-name { font-weight: 400; text-decoration: line-through; }
.isnap-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 1px 7px; margin-left: 6px;
}
.item-snapshot .empty { padding: 12px; color: var(--muted); }

/* ---------- Edit-items page: order-context header ---------- */
.items-context {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 14px 16px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.items-context-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ic-order { font-size: 1.15rem; font-weight: 700; }
.ic-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.items-context-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ic-subtotal { color: var(--muted); font-size: 0.95rem; }
.ic-subtotal strong { color: var(--accent); font-size: 1.1rem; margin-left: 4px; }
.items-context-note { font-size: 0.88rem; margin: 0 0 12px; }

/* Step 3 — review */
.review-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin-bottom: 12px; }
.rs-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.rs-label { color: var(--muted); }
.rs-val { font-weight: 600; text-align: right; }
.review-items { display: flex; flex-direction: column; gap: 4px; }
.ri-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ri-total { font-weight: 700; min-width: 70px; text-align: right; }
.ri-unit { min-width: 64px; text-align: right; }
.review-totals { margin-top: 12px; border-top: 1px solid var(--border-strong); padding-top: 10px; }
.rt-row { display: flex; justify-content: space-between; padding: 3px 0; font-variant-numeric: tabular-nums; }
.rt-row.strong { font-size: var(--fs-title); font-weight: 700; color: var(--accent); border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.err-text { color: var(--overdue); }

/* ============================================================
   Holding Cell
   ============================================================ */
.holding-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.holding-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.holding-card .hc-cust { font-weight: 700; font-size: 1.05rem; }
.holding-card .hc-meta { color: var(--muted); font-size: 0.85rem; }
.holding-card .hc-sub { font-weight: 700; color: var(--accent); }
.holding-card .hc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.holding-step { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--card-2); border: 1px solid var(--border); font-size: 0.78rem; }

/* Orders sub-tabs */
.orders-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.orders-tab {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted); font-weight: 600; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 0.95rem; line-height: 1.2;
}
.orders-tab.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.orders-tab .tab-count { color: var(--accent); font-weight: 700; }

/* ============================================================
   Changed-order blink + item change styling (Fulfillment / admin)
   ============================================================ */
@keyframes change-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); border-color: var(--border); }
  50%      { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.55); border-color: #ef4444; }
}
/* Removed items → RED blink (needs a Confirm change). */
.order-card.changed, .order-card.changed-removed { animation: change-blink 1s ease-in-out infinite; }
/* Added / increased items → YELLOW blink (new items need fulfilling). */
@keyframes change-blink-added {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); border-color: var(--border); }
  50%      { box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.6); border-color: #eab308; }
}
.order-card.changed-added { animation: change-blink-added 1s ease-in-out infinite; }
/* Cancelled-and-awaiting-restock cards get a static (non-blinking) red outline. */
.order-card.canceled-card { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35); }
.changed-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  background: #ef4444; color: #fff; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em;
}
.changed-badge.added { background: #eab308; color: #1a1205; }
.canceled-banner {
  margin: 8px 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.12); border: 1px solid #ef4444; color: #fecaca;
  font-weight: 700;
}
.canceled-banner .cb-detail { font-weight: 500; font-size: 0.82rem; color: #fca5a5; margin-top: 2px; }
.fulfill-item.item-added { border-left: 3px solid var(--accent); }
.fulfill-item.item-added .fulfill-item-name::after { content: ' NEW'; color: var(--accent); font-size: 0.7rem; font-weight: 700; }
.fulfill-item.item-removed { opacity: 0.6; }
.fulfill-item.item-removed .fulfill-item-name { text-decoration: line-through; color: var(--muted); }
.fulfill-item.item-qty-changed { border-left: 3px solid var(--status-waiting); }
.fulfill-item.item-qty-changed .fulfill-item-name::after { content: ' QTY CHANGED'; color: var(--status-waiting); font-size: 0.68rem; font-weight: 700; }
/* Removed + quantity-changed line text blinks red so staff can't miss the change. */
@keyframes item-text-blink-red {
  0%, 100% { color: var(--muted); }
  50%      { color: #ef4444; }
}
.fulfill-item.item-removed .fulfill-item-name,
.fulfill-item.item-qty-changed .fulfill-item-name { animation: item-text-blink-red 1s ease-in-out infinite; }

/* Per-line "insufficient stock" blink — only the affected line item pulses red
   (never the whole card). Clears automatically once inventory is reconciled. */
@keyframes item-stock-blink {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.7); }
}
.fulfill-item.insufficient-stock,
.items-list li.insufficient-stock,
.item-row.stock-short { animation: item-stock-blink 1s ease-in-out infinite; border-radius: 6px; }

/* ---------- Scan-to-verify feedback (retail fulfillment) ----------
   One-shot green/red flash on a scanned line (crib of the item-stock-blink inset
   box-shadow pattern), a scan-target outline on the focused card, and the per-line
   "1/2" progress chip. Reuses the status palette tokens — no new colors. */
@keyframes scan-flash-ok {
  0%   { box-shadow: inset 0 0 0 3px var(--status-ready-for-packing); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
@keyframes scan-flash-bad {
  0%   { box-shadow: inset 0 0 0 3px #ef4444; }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
.fulfill-item.scan-flash-ok, .order-card.scan-flash-ok { animation: scan-flash-ok 0.65s ease-out; border-radius: 6px; }
.fulfill-item.scan-flash-bad, .order-card.scan-flash-bad { animation: scan-flash-bad 0.65s ease-out; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .fulfill-item.scan-flash-ok, .order-card.scan-flash-ok,
  .fulfill-item.scan-flash-bad, .order-card.scan-flash-bad { animation-duration: 0.01ms; }
}

.order-card.scan-target { outline: 2px solid var(--status-ready-for-delivery); outline-offset: 2px; }

.scan-progress {
  margin-left: auto; padding: 1px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: var(--muted);
  font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.scan-progress.done { background: var(--status-ready-for-packing); color: #052e16; }
.badge.scan-required { background: var(--status-ready-for-delivery); color: #083344; }
.scan-note { margin-left: 6px; font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Date/time picker (KDS.mountDeliverBy) ---------- */
.dt-picker { position: relative; display: inline-block; }
.dt-trigger {
  display: inline-flex; align-items: center; gap: 10px; justify-content: space-between;
  min-width: 230px; padding: 10px 12px;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font: inherit; cursor: pointer;
}
.dt-trigger:hover { border-color: var(--accent-2); }
.dt-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dt-trigger-icon { font-size: 0.95rem; }

.dt-pop {
  position: absolute; z-index: var(--z-dropdown); top: calc(100% + 6px); left: 0;
  width: 320px; max-width: 92vw; padding: 14px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--elev-overlay);
}
.dt-pop.hidden { display: none; }
.dt-pop.flip-up { top: auto; bottom: calc(100% + 6px); }

.dt-manual { margin-bottom: 12px; }
.dt-date-input {
  width: 100%; padding: 9px 10px;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit;
}
.dt-date-input:focus { outline: none; border-color: var(--accent-2); }

.dt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dt-cal-title { font-weight: 700; }
.dt-nav {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.dt-nav:hover { background: var(--accent-soft); border-color: var(--accent-2); }

.dt-cal-dow, .dt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dt-cal-dow { margin-bottom: 4px; }
.dt-cal-dow span { text-align: center; font-size: 0.72rem; color: var(--muted); padding: 2px 0; }

.dt-day {
  aspect-ratio: 1 / 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-size: 0.9rem; cursor: pointer;
}
.dt-day.empty { background: transparent; border: 0; cursor: default; }
.dt-day:not(.disabled):not(.empty):hover { background: var(--accent-soft); border-color: var(--accent-2); }
.dt-day.today:not(.selected) { border-color: var(--border-strong); }
.dt-day.disabled { color: var(--muted); opacity: 0.4; cursor: not-allowed; }
.dt-day.selected { background: var(--accent); color: var(--accent-ink); font-weight: 700; border-color: var(--accent); }

.dt-time {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.dt-time-label { font-weight: 700; margin-right: 4px; }
.dt-hh, .dt-mm {
  width: 58px; padding: 8px; text-align: center;
  background: var(--card-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit;
}
.dt-colon { color: var(--muted); }
.dt-ampm { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.dt-ampm button {
  padding: 8px 12px; background: var(--card-2); color: var(--muted);
  border: 0; font: inherit; cursor: pointer;
}
.dt-ampm button + button { border-left: 1px solid var(--border-strong); }
.dt-ampm button.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.dt-foot { margin-top: 14px; }
.dt-foot .dt-done { width: 100%; }

/* ---------- Kitchen admin panel (embedded on Kitchen Display) ---------- */
.kds-admin-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal-backdrop);
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: stretch; justify-content: center;
  padding: 2vh 2vw;
}
.kds-admin-overlay.hidden { display: none; }
/* Standalone Kitchen Admin page (non-overlay): the panel fills the page below
   the topbar instead of floating over the Kitchen Display. */
.kds-admin-page {
  display: flex; flex-direction: column;
  margin: 1rem auto; max-width: 1200px; width: calc(100% - 2rem);
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 14px; overflow: hidden;
}
.kds-admin-shell {
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 14px; width: 100%; max-width: 1200px; max-height: 96vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.kds-admin-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--border);
  background: var(--card-2);
}
.kds-admin-head h2 { margin: 0; font-size: 1.15rem; }
.kds-admin-head .spacer { flex: 1; }
.kds-admin-tabs { display: flex; gap: 0.25rem; padding: 0.5rem 0.75rem 0; border-bottom: 1px solid var(--border); background: var(--card-2); }
.ka-tab {
  background: transparent; color: var(--muted); border: none;
  border-bottom: 2px solid transparent; padding: 0.5rem 1rem;
  font-size: 0.95rem; cursor: pointer; border-radius: 6px 6px 0 0;
}
.ka-tab:hover { color: var(--text); }
.ka-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.kds-admin-body { padding: 1rem 1.1rem; overflow: auto; flex: 1; min-height: 0; }
.ka-pane.hidden { display: none; }

.ka-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.ka-toolbar .spacer { flex: 1; }
.ka-recon-toggle { color: var(--muted); font-size: 0.9rem; display: inline-flex; gap: 0.4rem; align-items: center; }
.ka-note { color: var(--muted); font-size: 0.88rem; margin-bottom: 0.6rem; }
.ka-note.err { color: #fca5a5; }
.ka-h3 { margin: 1.2rem 0 0.5rem; font-size: 1rem; }

.ka-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ka-table th, .ka-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.ka-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ka-table .ka-r { text-align: right; }
.ka-table tr:hover, .ka-table tbody tr:hover { background: var(--accent-soft); }
.ka-sub { color: var(--muted); font-size: 0.75rem; }
.ka-empty { text-align: center; color: var(--muted); padding: 1.2rem; }
.ka-low td { background: rgba(248, 113, 113, 0.08); }
.ka-actions { white-space: nowrap; }
.ka-actions .btn-secondary { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.ka-count { width: 90px; }
.ka-bulkbar { position: sticky; top: 0; z-index: 2; background: var(--card); padding: 0.5rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
.ka-selcount { color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.ka-bulkbar .btn-secondary, .ka-bulkbar .btn-primary { margin-left: 0.35rem; }
.btn-secondary.ka-danger { border-color: var(--danger-deep); color: #fca5a5; }
.btn-secondary.ka-danger:hover { background: var(--danger-deep); color: #fff; }
.ka-waste-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ka-waste-row > span { flex: 1; }
.ka-waste-row input { width: 8rem; }

.ka-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 0.5rem; }
.ka-stat { background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem; text-align: center; }
.ka-stat-val { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.ka-stat-lbl { color: var(--muted); font-size: 0.78rem; margin-top: 0.25rem; }

.ka-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.ka-field input, .ka-field select { font-size: 1rem; }

/* Bulk-actions dropdown in the inventory toolbar */
.ka-bulk-select { margin-left: 0.35rem; font-size: 0.9rem; padding: 0.4rem 0.5rem; background: var(--card-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }

/* Receive widget draft-line table */
.ka-recv-table { margin-top: 0.5rem; }

/* Reconcile widget: one group per product */
.ka-rec-group { margin-bottom: 0; }
.ka-rec-prod { font-weight: 700; color: var(--text); margin-bottom: 0.3rem; }
.ka-rec-count { width: 90px; }

/* Reconcile modal: wide, scrollable body, sticky head/footer (desktop + tablet).
   Reuses the scroll pattern from .ka-sheet; degrades to a full-screen sheet on phones. */
.modal.modal-recon {
  max-width: min(960px, 94vw); width: 100%;
  max-height: 88vh; padding: 0; gap: 0;
}
.modal-recon .modal-head {
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
}
.modal-recon .modal-body { padding: 18px 24px; overflow: auto; flex: 1; min-height: 0; }
.modal-recon .modal-foot {
  padding: 14px 24px; border-top: 1px solid var(--border);
  background: var(--card-2); display: flex; flex-direction: column; gap: 12px;
  border-radius: 0 0 var(--radius) var(--radius);
}
/* Product groups use the available width on desktop/large tablet */
.ka-rec-groups { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.ka-rec-foot-fields { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ka-rec-foot-fields .ka-field { margin-bottom: 0; }
@media (max-width: 640px) {
  .ka-rec-groups, .ka-rec-foot-fields { grid-template-columns: 1fr; }
  .modal-recon { max-width: 100%; width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .modal-backdrop:has(.modal-recon) { padding: 0; }
  .modal-recon .modal-head,
  .modal-recon .modal-body,
  .modal-recon .modal-foot { padding-left: 16px; padding-right: 16px; }
  .modal-recon .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ===========================================================================
   Kitchen Admin — touch-first redesign (small Android micro-touch device)
   Card list + drill-in sheet + bottom action bar. Reuses existing tokens.
   =========================================================================== */

/* Sticky header: segmented tabs + search filter stay pinned while cards scroll. */
.kds-admin-head-sticky {
  position: sticky; top: 0; z-index: 5;
  background: var(--card-2); border-bottom: 1px solid var(--border);
}
.ka-tab {
  min-height: 48px; padding: 0.6rem 1.15rem; font-size: 1rem;
  touch-action: manipulation;
}
.ka-search-row { padding: 0.5rem 0.75rem; }
.ka-search-row.hidden { display: none; }
.ka-search {
  width: 100%; min-height: 48px; font-size: 1rem;
  padding: 0.55rem 0.85rem; border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); border: 1px solid var(--border);
}
.ka-search:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--accent); }

/* Card grid — reflows from multi-column (landscape) to single (portrait). */
.ka-cardgrid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.ka-card {
  display: flex; align-items: center; gap: 0.65rem;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.7rem 0.8rem;
  cursor: pointer; touch-action: manipulation;
  transition: border-color var(--speed), background var(--speed);
}
.ka-card:hover { border-color: var(--border-strong); }
.ka-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.ka-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.ka-card-low { box-shadow: inset 3px 0 0 #f87171; }
.ka-card-sel {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin: -0.4rem 0; cursor: pointer;
}
.ka-card-sel input[type="checkbox"] {
  width: 24px; height: 24px; min-height: 0; accent-color: var(--accent); cursor: pointer;
}
.ka-card-main { flex: 1; min-width: 0; }
.ka-card-name {
  font-weight: 700; color: var(--text); font-size: 1rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.ka-card-sku { color: var(--muted); font-size: 0.78rem; margin-top: 0.1rem; }
.ka-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem;
  color: var(--muted); font-size: 0.8rem; margin-top: 0.35rem;
}
.ka-card-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.ka-card-avail { text-align: right; flex: 0 0 auto; }
.ka-card-availnum {
  font-size: 1.5rem; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ka-card-availlbl { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
.ka-card-chev { color: var(--muted); font-size: 1.5rem; flex: 0 0 auto; line-height: 1; }
.ka-card-low .ka-card-availnum { color: #fca5a5; }
.ka-badge-low {
  background: var(--danger-deep); color: #fecaca; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.05em; padding: 0.1rem 0.4rem; border-radius: 999px;
}

/* Bulk action bar — pinned to the bottom for thumb reach on touch devices. */
.ka-bulkbar {
  position: sticky; bottom: 0; top: auto; z-index: 3;
  flex-wrap: wrap; gap: 0.5rem;
  background: var(--card); border-top: 1px solid var(--border); border-bottom: none;
  padding: 0.6rem 0.2rem; margin: 0.75rem 0 0;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
}
.ka-bulkbar .btn-primary, .ka-bulkbar .ka-bulk-select {
  min-height: 48px; touch-action: manipulation;
}
.ka-selall {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text);
  font-size: 0.9rem; font-weight: 600; min-height: 44px;
}
.ka-selall input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--accent); }

/* Product detail bottom sheet (slide-up on narrow, centered card on wide). */
.ka-sheet-backdrop { align-items: flex-end; }
.ka-sheet {
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 16px 16px 0 0; width: 100%; max-width: 640px;
  max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-2);
  animation: kaSheetUp var(--speed) ease-out;
}
@keyframes kaSheetUp { from { transform: translateY(12%); opacity: 0.6; } to { transform: none; opacity: 1; } }
.ka-sheet-head {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.1rem 0.6rem; border-bottom: 1px solid var(--border);
}
.ka-sheet-title { flex: 1; font-size: 1.15rem; font-weight: 700; color: var(--text); display: flex; flex-direction: column; gap: 0.2rem; }
.ka-sheet-title .ka-badge-low { align-self: flex-start; }
.ka-sheet-close { min-width: 48px; min-height: 48px; padding: 0; font-size: 1.4rem; line-height: 1; }
.ka-sheet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.8rem 1.1rem; }
.ka-sheet-body { padding: 0 1.1rem 0.6rem; overflow: auto; flex: 1; min-height: 0; }
.ka-sheet-foot {
  display: flex; gap: 0.6rem; padding: 0.75rem 1.1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--card-2);
}
.ka-sheet-foot .btn-primary { flex: 1; min-height: 52px; }

/* Batch history rows inside the detail sheet. */
.ka-bh-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--border);
}
.ka-bh-row.ka-bh-depleted { opacity: 0.6; }
.ka-bh-main { flex: 1; min-width: 0; }
.ka-bh-name { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ka-bh-date { color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.ka-bh-tag {
  background: var(--card-2); color: var(--muted); border: 1px solid var(--border);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border-radius: 999px;
}
.ka-bh-nums { display: flex; gap: 1rem; text-align: right; }
.ka-bh-nums b { display: block; color: var(--text); font-variant-numeric: tabular-nums; }
.ka-bh-nums span { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Scroll-to-bottom FAB — only on touch/small screens (see media query below). */
.ka-scroll-fab {
  display: none; position: fixed; right: 16px; z-index: 4;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #0a0f0d; border: none;
  font-size: 1.5rem; line-height: 1; font-weight: 800; cursor: pointer;
  box-shadow: var(--shadow-2); touch-action: manipulation;
  align-items: center; justify-content: center;
}
.ka-scroll-fab[hidden] { display: none !important; }

/* Tablet / small-device tuning — engages in both orientations of the target. */
@media (max-width: 820px) {
  .ka-scroll-fab:not([hidden]) { display: inline-flex; }
  .ka-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .ka-matrix { grid-template-columns: 1fr; }
  .kds-admin-page { margin: 0.5rem auto; width: calc(100% - 1rem); }
  /* Analytics table stays a scrollable table at this width too. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll .ka-table { min-width: 720px; }
}

/* ---- Transfer workflow page ---- */
.tr-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.tr-tabs { display: inline-flex; gap: 0.25rem; background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.25rem; }
.tr-tab { background: transparent; border: 0; color: var(--muted); padding: 0.45rem 1rem; border-radius: 8px; cursor: pointer; font-weight: 600; }
.tr-tab.active { background: var(--accent); color: #0a0f0d; }
.tr-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.tr-table th, .tr-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.tr-table th { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.tr-table .tr-r { text-align: right; }
.tr-table .tr-recv { width: 7rem; }
.tr-sub { color: var(--muted); font-size: 0.78rem; }
.tr-empty { color: var(--muted); text-align: center; padding: 1.25rem; }
.tr-row:hover { background: var(--card-2); }
.tr-detail-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.tr-detail-head h2 { margin: 0; font-size: 1.2rem; }
.tr-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tr-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.6rem 0; font-size: 0.85rem; color: var(--muted); }
.tr-field input { font-size: 1rem; }
.tr-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border: 1px solid var(--border); }
.tr-badge.tr-requested { background: #1e3a5f; color: #93c5fd; }
.tr-badge.tr-incoming, .tr-badge.tr-fulfilled { background: #4a3a10; color: #fcd34d; }
.tr-badge.tr-received { background: #14532d; color: #86efac; }
.tr-badge.tr-completed { background: #14532d; color: #86efac; }
.tr-badge.tr-cancelled { background: #4c1d1d; color: #fca5a5; }
.tr-badge.tr-review { background: #4a3a10; color: #fcd34d; border-color: #eab308; }
.btn-secondary.tr-danger { border-color: var(--danger-deep); color: #fca5a5; }
.btn-secondary.tr-danger:hover { background: var(--danger-deep); color: #fff; }
/* Auto refill review rows/cards pulse yellow until approved. Background-based (not the
   box-shadow change-blink-added) so it renders on a <tr> too, same #eab308 hue. */
@keyframes tr-review-pulse {
  0%, 100% { background-color: transparent; }
  50%      { background-color: rgba(234, 179, 8, 0.18); }
}
tr.tr-review-blink, tr.tr-review-blink td { animation: tr-review-pulse 1.2s ease-in-out infinite; }
.tm-card.tr-review-blink { animation: tr-review-pulse 1.2s ease-in-out infinite; border-color: #eab308; }
/* New-transfer modal: keep it within the viewport and scroll only the item
   list, so the controls + Create/Cancel stay reachable for large categories
   (mirrors the mobile sheet in transfer-mobile.css). */
.modal.modal-wide { max-width: 640px; width: 92vw; max-height: calc(100dvh - 32px); }
.modal-wide #ntContent {
  min-height: 0;                 /* allow this flex child of .modal to shrink */
  display: flex; flex-direction: column; gap: 14px;
}
.modal-wide #ntItemsWrap {
  min-height: 0; overflow-y: auto;   /* the product table is the scroll region */
}

/* Analytics: ABC chips */
.ka-abc { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ka-abc-chip { flex: 1; min-width: 160px; border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; background: var(--card-2); display: flex; align-items: center; gap: 0.75rem; }
.ka-abc-letter { font-size: 1.6rem; font-weight: 800; width: 2rem; text-align: center; }
.ka-abc-meta { color: var(--muted); font-size: 0.82rem; }
.ka-abc-A .ka-abc-letter, .ka-badge.ka-abc-A { color: var(--accent); }
.ka-abc-B .ka-abc-letter, .ka-badge.ka-abc-B { color: #eab308; }
.ka-abc-C .ka-abc-letter, .ka-badge.ka-abc-C { color: var(--muted); }
.ka-badge { display: inline-block; min-width: 1.3rem; text-align: center; font-weight: 700; border: 1px solid var(--border); border-radius: 6px; padding: 0 0.35rem; font-size: 0.8rem; }

/* Analytics: profitability matrix */
.ka-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ka-quad { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem; background: var(--card-2); }
.ka-quad-h { font-weight: 700; margin-bottom: 0.4rem; }
.ka-quad ul { margin: 0; padding-left: 1.1rem; max-height: 160px; overflow: auto; }
.ka-quad li { margin: 0.15rem 0; font-size: 0.88rem; }
.ka-quad-Stars { border-color: var(--accent); }
.ka-quad-Workhorses { border-color: #3b82f6; }
.ka-quad-Niche { border-color: #eab308; }
.ka-quad-Dogs { border-color: var(--border-strong); }

/* Analytics: trend sparkline + direction */
.ka-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; vertical-align: middle; }
.ka-spark-bar { width: 5px; background: var(--accent-2); border-radius: 1px; display: inline-block; }
.ka-up { color: var(--accent); } .ka-down { color: #f87171; } .ka-flat { color: var(--muted); }
.ka-select, #kaWindow { font-size: 0.95rem; }

/* ---------- Retail packing board: compact cards + tap-in detail screen ---------- */
/* Compact card — the whole card is the tap target for the per-order screen. */
.order-card.compact-card { cursor: pointer; }
.order-card.compact-card .times { margin-bottom: 0; }
/* Detail overlay: reuses the modal scaffolding; wider + scrollable so a long
   item list packs comfortably on the station tablet. */
.order-detail-backdrop { z-index: var(--z-modal-backdrop); }
.order-detail-modal {
  max-width: 640px; max-height: 92vh; overflow: auto;
  box-shadow: var(--elev-overlay);
}
.order-detail-modal .detail-close {
  min-width: 40px; padding: 4px 10px; font-size: 1rem; line-height: 1;
}
.order-detail-modal .detail-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  position: sticky; bottom: 0; background: var(--card); padding-top: 10px;
}
.order-detail-modal .fulfill-item .unfulfill-btn { margin-left: 8px; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}