:root {
  /* Light, neutral, one accent — modelled on Shopify's admin (Polaris):
   * white cards on a soft grey page, quiet borders, colour reserved for
   * meaning (status, action) rather than decoration. */
  --bg: #f1f1f1;
  --bg-alt: #ebebeb;
  --card: #ffffff;
  --card-edge: #e3e3e3;
  --text: #303030;
  --muted: #616161;
  --accent: #047857;
  --accent-dark: #065f46;
  --pick: #a3530b;
  --stow: #1d4ed8;
  --danger: #b42318;
  --surface-sunk: #f7f7f7;
  --hover: #f3f3f3;
  --shadow: 0 1px 0 rgba(26,26,26,.07), 0 1px 2px rgba(26,26,26,.06);
  --shadow-pop: 0 4px 6px -2px rgba(26,26,26,.2), 0 12px 24px -8px rgba(26,26,26,.18);
  /* The device's own UI font — SF Pro on iPhone and Mac, Segoe UI on Windows,
   * Roboto on Android. No web font: the signed-in console contacts nobody
   * but its own origin (tests/performance.spec.js). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none !important; }

.layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
/* A grid item's default `min-width: auto` refuses to shrink below its contents,
 * so on a phone — where the sidebar becomes the single full-width column — a
 * long company name in .tenant widened the grid past the viewport and the whole
 * console scrolled sideways. Nothing here may push the page wider than the
 * screen; text wraps instead. */
.layout > * { min-width: 0; }

/* Sidebar */
/* `overflow-y: auto` is load-bearing, not tidiness. The nav is fourteen items
 * plus a footer; on a 1280×720 laptop that is taller than 100vh, and without a
 * scroller the last three — Activity Log, Proof & Receipts, Import Data — sat
 * below the fold of a pane that could not scroll. They were not hidden or
 * disabled: they were unreachable, which is indistinguishable from a button
 * that doesn't work. */
.sidebar { background: var(--bg-alt); border-right: 1px solid var(--card-edge); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--text); }
.brand-mark { color: var(--accent); letter-spacing: -2px; }
/* Company names are whatever the customer types — "Al Noor General Trading and
 * Contracting LLC" is an ordinary UAE trade-licence name, not an edge case. It
 * wraps; it never widens the sidebar. */
.tenant { font-size: .85rem; background: var(--card); border: 1px solid var(--card-edge); border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; }
.tenant small { color: var(--muted); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.nav-group-title { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; padding: 4px 12px 2px; opacity: .7;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; user-select: none; }
.nav-group-title:hover { opacity: 1; color: var(--text); }
.nav-group-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* A small triangle: points down when the section is open, right when folded. */
.nav-caret { flex: none; width: 0; height: 0; border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); transition: transform .15s ease; }
.nav-group.collapsed .nav-caret { transform: rotate(0deg); }
.nav-group.collapsed .nav-btn { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-caret { transition: none; } }

/* ---------- Warehouse Setup structure ----------
 * The page was seven equal navy panels in a 3,700px wall; these give it two
 * clearly-bounded chapters and fold the explainer diagrams away so the actual
 * wizard inputs lead. */
.setup-part { margin: 30px 0 14px; padding-top: 18px; border-top: 2px solid var(--card-edge); }
.setup-part h2 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; color: var(--text); margin-bottom: 6px; }
.setup-part .hint { margin-bottom: 0; }
details.wz-guide summary {
  cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: 8px; user-select: none;
}
details.wz-guide summary::-webkit-details-marker { display: none; }
details.wz-guide summary::before {
  content: ""; width: 0; height: 0; border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s ease; flex: none;
}
details.wz-guide[open] summary::before { transform: rotate(90deg); }
details.wz-guide summary:hover { color: var(--text); }
details.wz-guide[open] summary { margin-bottom: 12px; }
/* The diagrams shrink to illegible strips on a phone; keep them readable and
   let them scroll sideways inside the card instead. */
details.wz-guide { overflow-x: auto; }
@media (max-width: 620px) { details.wz-guide svg { min-width: 640px; } }
@media (prefers-reduced-motion: reduce) { details.wz-guide summary::before { transition: none; } }

/* Storage modes. Each kind of location can be off independently: .bins-only
   furniture drops when bins are off, .pallets-only when pallets are off, and
   .directed-only (things that need any directed storage, like the put-away
   queue) drops only in full simple mode. Dynamic content gates in its render
   function instead. */
.bins-off .bins-only { display: none !important; }
.pallets-off .pallets-only { display: none !important; }
.simple-mode .directed-only { display: none !important; }
.mode-simple-note { display: none; }
.simple-mode .mode-simple-note { display: block; }
.mode-switch { display: flex; align-items: center; gap: 10px; font-size: .95rem; margin: 12px 0 4px; cursor: pointer; }
.mode-switch input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
/* Pallet cards share the bin-card layout, with a warm edge so the two kinds of
   location read apart at a glance in a mixed warehouse. */
.pallet-card { border-left: 3px solid var(--pick); }
/* Header row for location cards: an optional kind glyph beside the code. */
.loc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.loc-head h3 { margin: 0; }
.loc-ico { width: 24px; height: 16px; flex: none; fill: none; stroke: var(--pick);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wz-actions { margin-top: 12px; }
/* Simple-mode scan actions: the buttons that DO things, since a bare scan only looks up. */
.sm-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

.nav-btn { text-align: left; background: none; border: none; color: var(--muted); font: inherit; font-size: .95rem; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.nav-btn:hover { background: var(--card); color: var(--text); }
.nav-btn.active { background: var(--card); color: var(--accent); font-weight: 600; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.sidebar-foot small { color: var(--muted); font-size: .72rem; }

/* A company at its seat ceiling. admin.js has emitted this class since seat
 * tiers shipped and nothing styled it, so "25 / 25" looked exactly like
 * "8 / 10" — the one row an operator needs to notice was the one that looked
 * ordinary. */
.seats-full { color: var(--pick); font-weight: 700; }

/* Operator business dashboard. Money first, everything else supporting it. */
.biz { margin-bottom: 18px; }
.biz h2 { font-size: 1.05rem; }
.kpi-sub { color: var(--muted); font-size: .72rem; margin-top: 2px; }
/* Six money cards, not the five the default grid assumes — and "AED 86,880"
 * wrapped mid-number at the inherited size, which turns a figure into a
 * puzzle. Let the row reflow and keep every amount on one line. */
#biz-kpis { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
#biz-kpis .num { font-size: 1.35rem; white-space: nowrap; }
.biz-mix { margin-top: 14px; overflow-x: auto; }
.biz-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; }
.biz-table th, .biz-table td { text-align: left; padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--card-edge); }
.biz-table thead th { color: var(--muted); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .6px; }
.biz-table td { color: var(--muted); }
.biz-table tbody th { font-weight: 600; color: var(--text); }
.biz-table td strong { color: var(--text); }

/* Customer-chosen company names run to 120 characters and notes to 200, and
 * neither table container scrolled — one long name pushed the whole console,
 * money cards included, into horizontal scroll. */
#admin-list, #pay-list { overflow-x: auto; }
#admin-list td, #admin-list th, #pay-list td, #pay-list th { word-break: break-word; }
/* Grid items refuse to shrink below their content's min-content width unless
 * told otherwise, so on a phone the company table inflated <main> past the
 * viewport and every other panel's buttons landed off-screen — the scroll
 * containers above never got the chance to scroll. Same fix as .two-col. */
.admin-layout > * { min-width: 0; }

.pay-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; align-items: end; margin: 14px 0 18px; padding: 14px;
  background: rgba(0,0,0,.03); border-radius: 10px; }
.pay-form label { display: flex; flex-direction: column; gap: 5px;
  font-size: .8rem; color: var(--muted); }
.pay-actions { display: flex; gap: 8px; align-items: center; }

/* "Add this to your home screen." Sits above the save pill, asked once. */
.install-tip { background: rgba(4,120,87,.1); border: 1px solid rgba(4,120,87,.35);
  border-radius: 8px; padding: 12px; font-size: .78rem; color: var(--text); }
.install-tip p { margin: 0 0 8px; line-height: 1.45; }
.install-how { color: var(--muted); }
.install-actions { display: flex; gap: 8px; align-items: center; }
.install-actions .btn-primary { padding: 6px 14px; font-size: .78rem; }

/* Save state. Three states worth distinguishing on a warehouse floor: it's
 * saved, it's in flight, or it is sitting on this phone and nowhere else. Only
 * the last one is urgent, so only the last one is loud — a pill that shouts on
 * every successful save teaches people to ignore it. */
.sync-pill { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: .76rem;
  padding: 7px 10px; border-radius: 8px; border: 1px solid transparent; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sync-pill.saved { color: var(--muted); }
.sync-pill.saved .sync-dot { background: var(--accent); }
.sync-pill.saving { color: var(--muted); }
.sync-pill.saving .sync-dot { background: var(--muted); animation: sync-blink 1.1s ease-in-out infinite; }
.sync-pill.pending { color: #7a3e06; background: rgba(163,83,11,.12); border-color: rgba(163,83,11,.4); }
.sync-pill.pending .sync-dot { background: var(--pick); }
.sync-pill.readonly { color: var(--muted); background: rgba(0,0,0,.04); border-color: var(--card-edge); }
.sync-pill.readonly .sync-dot { background: var(--muted); }
.sync-pill .sync-retry { margin-left: auto; background: none; border: 0; color: inherit;
  text-decoration: underline; cursor: pointer; font-size: .74rem; padding: 0; }
@keyframes sync-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sync-pill.saving .sync-dot { animation: none; opacity: .6; } }

/* Main */
.main { padding: 28px 32px; min-width: 0; }
h1 { font-size: 1.6rem; margin-bottom: 16px; }
h2 { font-size: 1rem; margin-bottom: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.hint { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.view-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }
.view-head h1 { margin-bottom: 0; }

/* A panel holds tables that are wider than a phone. `overflow-x: auto` keeps
 * that width inside the card, where a sideways swipe reaches it, instead of
 * letting it widen the page — the console must never scroll sideways as a
 * whole, because then the nav scrolls away with it. */
.panel { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; overflow-x: auto; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Same `min-width: auto` trap as .layout: a grid child refuses to shrink below
 * its contents, so one wide table stretched its whole column past the screen. */
.two-col > *, .kpi-row > * { min-width: 0; }

/* KPIs */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 14px 16px; }
.kpi .num { font-size: 1.7rem; font-weight: 800; }
.kpi .lbl { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; }

/* Buttons & forms */
.btn-primary { background: var(--accent); color: #ffffff; border: none; font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 8px; cursor: pointer; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost-sm { background: none; border: 1px solid var(--card-edge); color: var(--muted); font: inherit; font-size: .85rem; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }
/* A control a role isn't allowed to use: dimmed, no hover lift, and a cursor
   that says "not for you" — the title attribute carries the why. */
.perm-locked, .perm-locked:hover { opacity: .45; cursor: not-allowed; border-color: var(--card-edge); color: var(--muted); }
/* Destructive actions read as destructive: danger-tinted, but the permission
   lock still wins (a picker sees it dimmed, not red). */
.btn-danger { color: var(--danger); border-color: rgba(180,35,24,.4); }
.btn-danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(180,35,24,.08); }
.btn-danger.perm-locked, .btn-danger.perm-locked:hover { color: var(--muted); border-color: var(--card-edge); background: none; }
.detail-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.order-head-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Every text-like input, not just the three that happened to exist when this
 * was written. A native date or email field renders light-on-white inside a
 * dark console and looks like a rendering fault. */
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], input[type="search"], select { background: var(--bg); border: 1px solid var(--card-edge); color: var(--text); font: inherit; padding: 9px 12px; border-radius: 8px; width: 100%; }
input:focus, select:focus { outline: none; border-color: var(--accent); }
.search { max-width: 360px; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-grid label, .block-label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }
.block-label { margin-bottom: 12px; max-width: 380px; }
.form-actions { display: flex; gap: 10px; margin-top: 14px; }

/* Scan station */
.scan-form { display: flex; gap: 10px; max-width: 560px; margin-bottom: 20px; }
.scan-form input { font-size: 1.15rem; padding: 14px 16px; letter-spacing: 1px; }
.camera-btn { margin-bottom: 18px; }
.camera-panel { position: relative; max-width: 560px; margin-bottom: 20px; border: 1px solid var(--card-edge); border-radius: 14px; overflow: hidden; background: #000; }
.camera-panel video { display: block; width: 100%; max-height: 420px; object-fit: cover; background: #000; }
.camera-reticle { position: absolute; top: 50%; left: 50%; width: 70%; height: 34%; transform: translate(-50%, -60%); border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 0 0 2000px rgba(0,0,0,.25); pointer-events: none; }
.camera-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--card); }
#camera-status { font-size: .88rem; color: var(--muted); }
.camera-panel.scanned .camera-reticle { border-color: var(--pick); }

.scan-result { margin-bottom: 20px; }
.directive { border-radius: 14px; padding: 24px 28px; border: 2px solid; margin-bottom: 14px; }
.directive.pick { border-color: var(--pick); background: rgba(163,83,11,.07); }
.directive.stow { border-color: var(--stow); background: rgba(29,78,216,.07); }
.directive.ok { border-color: var(--accent); background: rgba(4,120,87,.07); }
.directive.err { border-color: var(--danger); background: rgba(180,35,24,.07); }
.directive .d-type { font-size: 2.1rem; font-weight: 800; letter-spacing: 2px; }
.directive.pick .d-type { color: var(--pick); }
.directive.stow .d-type { color: var(--stow); }
.directive.ok .d-type { color: var(--accent); font-size: 1.4rem; }
.directive.err .d-type { color: var(--danger); font-size: 1.4rem; }
.directive .d-detail { font-size: 1.1rem; margin-top: 6px; }
.directive .d-detail strong { color: var(--text); }
.directive .d-next { color: var(--muted); margin-top: 10px; font-size: .92rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { background: var(--bg); border: 1px solid var(--card-edge); color: var(--text); font: inherit; font-size: .82rem; padding: 6px 11px; border-radius: 99px; cursor: pointer; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.bin-chip { border-style: dashed; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .6px; padding: 8px 10px; border-bottom: 1px solid var(--card-edge); }
td { padding: 9px 10px; border-bottom: 1px solid rgba(0,0,0,.5); }
tr:last-child td { border-bottom: none; }
.mono { font-family: "Cascadia Code", Consolas, monospace; font-size: .86rem; color: var(--accent); }
.qty-pill { background: var(--bg); border: 1px solid var(--card-edge); border-radius: 99px; padding: 2px 10px; font-size: .82rem; }
.muted { color: var(--muted); }

/* Bins grid */
#bins-grid, #pallets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
/* An empty utilisation bar needs a visible track, or 0% reads as a stray line. */
.util-bar { border: 1px solid var(--card-edge); }
.bin-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 14px 16px; }
.bin-card h3 { font-size: 1.05rem; margin-bottom: 2px; }
.bin-card .zone { color: var(--muted); font-size: .78rem; margin-bottom: 10px; }
.util-bar { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
.util-fill { height: 100%; background: var(--accent); }
.util-fill.warn { background: var(--pick); }
.util-fill.full { background: var(--danger); }
.bin-card ul { list-style: none; font-size: .82rem; color: var(--muted); }
.bin-card li { padding: 2px 0; }

/* Orders */
/* overflow-x so an unusually long customer name or SKU scrolls inside the card
   rather than ever widening the page. */
.order-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; overflow-x: auto; }
.order-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.order-head h3 { font-size: 1rem; }
.status { font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .5px; }
.status.open { background: rgba(163,83,11,.15); color: var(--pick); }
.status.completed, .status.closed { background: rgba(4,120,87,.15); color: var(--accent); }
.order-line-row { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; margin-bottom: 8px; align-items: center; }

/* Label studio */
.check-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.check-list label { display: flex; gap: 8px; align-items: center; font-size: .9rem; cursor: pointer; }
.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.label { background: #fff; color: #111; border-radius: 8px; padding: 12px 10px 8px; text-align: center; }
.label .label-name { font-size: .8rem; font-weight: 600; margin-bottom: 4px; color: #111; }
.label svg { max-width: 100%; }

/* Analytics charts */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.chart-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; padding: 16px 18px; }
.chart-card h3 { font-size: .95rem; margin-bottom: 10px; }
.chart { width: 100%; height: auto; display: block; }
.chart-pie { max-width: 160px; margin: 0 auto; }
.chart .ch-val { fill: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font); }
.chart .ch-lbl { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.chart .ch-left { text-anchor: start; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.ch-leg { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.ch-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Proof documents */
.doc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.doc-card { display: flex; gap: 12px; background: var(--bg); border: 1px solid var(--card-edge); border-radius: 10px; padding: 12px; }
.doc-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--card); border: 1px solid var(--card-edge); }
.doc-thumb.doc-file { display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--accent); letter-spacing: .5px; }
.doc-meta { min-width: 0; flex: 1; }
.doc-name { font-size: .9rem; font-weight: 600; word-break: break-word; }
.doc-sub { font-size: .78rem; margin: 2px 0 8px; }
.doc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-actions .btn-ghost-sm { text-decoration: none; }

/* AI recommendations */
.ai-panel { border-color: var(--accent); }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-loading { animation: aiPulse 1.4s ease-in-out infinite; }
@keyframes aiPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.ai-notice { background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px; padding: 10px 14px; font-size: .9rem; color: var(--muted); }
.ai-notice code { color: var(--accent); }
.ai-by { color: var(--accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; margin: 6px 0; }
.ai-summary { font-size: .95rem; margin-bottom: 14px; }
.rec-builtin-head { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; margin: 22px 0 12px; }

/* Inventory flags */
.tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-right: 4px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
/* Long item names wrap one word per line on a phone; clamp the cell instead. */
.item-name-cell { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 30ch; }

/* The "this is sample data" banner on the dashboard. */
.demo-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(29,78,216,.1); border: 1px solid rgba(29,78,216,.4);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: .9rem; }
.demo-banner .db-x { margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: 1rem; cursor: pointer; padding: 4px 8px; }

/* First-run checklist: the road from signup to a working warehouse. */
.fr-card { background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; }
.fr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fr-progress { color: var(--muted); font-size: .82rem; }
.fr-x { margin-left: auto; }
.fr-step { display: grid; grid-template-columns: 26px auto 1fr; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--card-edge);
  padding: 9px 2px; color: var(--text); font: inherit; cursor: pointer; }
.fr-step:hover:not(.done) .fr-label { text-decoration: underline; }
.fr-step.done { cursor: default; opacity: .55; }
.fr-step.done .fr-label { text-decoration: line-through; }
.fr-tick { width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .78rem;
  border: 1px solid var(--card-edge); color: var(--muted); }
.fr-step.done .fr-tick { background: rgba(4,120,87,.18); color: var(--accent);
  border-color: rgba(4,120,87,.4); }
.fr-label { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.fr-hint { color: var(--muted); font-size: .82rem; }
@media (max-width: 700px) {
  .fr-step { grid-template-columns: 26px 1fr; }
  .fr-hint { grid-column: 2; }
}
/* Simple-mode alternative copy: hidden unless simple mode is on. */
.simple-only { display: none; }
.simple-mode .simple-only { display: inline; }
.tag-value { background: rgba(163,83,11,.18); color: #8a4507; }
.tag-handling { background: rgba(29,78,216,.18); color: var(--stow); }
/* Item carries the maker's own barcode — no label to print. */
.tag-barcode { background: rgba(4,120,87,.16); color: #03634a; font-weight: 600; }
.d-actions { margin-top: 10px; }

/* Recommendations */
/* Three across on a desk, one or two on a phone. A fixed `repeat(3, 1fr)` here
 * had no mobile override, so the three summary tiles pushed the whole
 * Recommendations view past the edge of a 412px screen. */
.rec-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.rec-summary > * { min-width: 0; }
.rec-summary .kpi .num { color: var(--accent); }
.rec { background: var(--card); border: 1px solid var(--card-edge); border-left: 4px solid var(--card-edge); border-radius: 12px; padding: 16px 20px; margin-bottom: 14px; }
.rec-high { border-left-color: var(--pick); }
.rec-medium { border-left-color: var(--stow); }
.rec-low { border-left-color: var(--muted); }
.rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rec-icon { font-size: 1.15rem; }
.rec-cat { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .9px; font-weight: 600; }
.rec-sev { margin-left: auto; font-size: .68rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: .5px; }
.sev-high { background: rgba(163,83,11,.15); color: var(--pick); }
.sev-medium { background: rgba(29,78,216,.15); color: var(--stow); }
.sev-low { background: rgba(0,0,0,.15); color: #454545; }
.rec h3 { font-size: 1.02rem; margin-bottom: 6px; }
.rec-why { color: var(--muted); font-size: .9rem; margin-bottom: 8px; }
.rec-action { font-size: .92rem; margin-bottom: 12px; }
.rec-action strong { color: var(--accent); }
.rec-impact { display: inline-block; background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px; padding: 4px 11px; font-size: .8rem; }
.rec-note { color: var(--muted); font-size: .82rem; margin-top: 16px; line-height: 1.6; }
.rec-clear h2 { color: var(--accent); }

/* Warehouse setup wizard */
.wz-guide svg { width: 100%; height: auto; max-width: 880px; display: block; margin: 4px auto 14px; }
.wz-guide text { font-family: var(--font); }
.wz-guide .d-title { fill: var(--text); font-weight: 700; font-size: 14px; }
.wz-guide .d-cap { fill: var(--muted); font-size: 11px; }
.wz-guide .d-zlabel { fill: #ffffff; font-weight: 800; font-size: 18px; }
.wz-guide .d-tag { fill: var(--text); font-size: 11px; font-weight: 600; }
.wz-guide .d-dim { fill: var(--accent); font-weight: 800; font-size: 14px; }
.wz-guide .d-dimw { fill: var(--muted); font-weight: 400; font-size: 10px; }
/* Pallet picture guide */
.pg-figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; align-items: center; max-width: 900px; margin: 8px auto 16px; }
.wz-guide .pg-figs svg { margin: 0; max-width: none; }
.wz-guide .pg-figs svg { width: 100%; min-width: 0; }
@media (max-width: 720px) { .pg-figs { grid-template-columns: minmax(0, 1fr); gap: 8px; } .wz-guide .pg-figs .pg-top { max-width: 300px; margin: 0 auto; } }
.pg-shadow { fill: rgba(0,0,0,.08); }
.pg-wood-t { fill: #d9b47e; } .pg-wood-l { fill: #bf9358; } .pg-wood-r { fill: #a87c45; }
.pg-gap { fill: #4a3520; } .pg-plank { stroke: #8a6233; stroke-width: 1; }
.pg-box-t { fill: #ecd0a2; stroke: #b98a50; stroke-width: 1; } .pg-box-l { fill: #d6aa6c; stroke: #b98a50; stroke-width: 1; } .pg-box-r { fill: #c2955a; stroke: #a87c45; stroke-width: 1; }
.pg-seam { stroke: #9c7442; stroke-width: 1.2; } .pg-tape { stroke: #f2e3c4; stroke-width: 5; opacity: .8; }
.pg-arrow { stroke: var(--accent); stroke-width: 2; } .pg-ah { fill: var(--accent); }
.pg-ext { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.wz-guide .pg-val { fill: var(--text); font-weight: 600; font-size: 13px; }
.pg-kg { fill: #fff4e0; stroke: #e8961e; stroke-width: 2; }
.wz-guide .pg-kg-t { fill: #8a5a10; font-size: 11px; font-weight: 600; } .wz-guide .pg-kg-v { fill: #5c3c08; font-size: 15px; font-weight: 800; }
.pg-kg-arrow { stroke: #e8961e; stroke-width: 3; } .pg-kg-ah { fill: #e8961e; }
.pg-floor { fill: var(--bg); stroke: var(--card-edge); }
.pg-tape-floor { fill: none; stroke: #f5c518; stroke-width: 5; stroke-linecap: square; }
.pg-board { fill: #d9b47e; stroke: #a87c45; }
.pg-label { fill: #fff; stroke: #333; stroke-width: 1; } .pg-bar { fill: #111; }
.wz-guide .pg-code { fill: #111; font-size: 9px; font-weight: 700; }
.wz-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.wz-legend .leg { display: flex; gap: 10px; align-items: flex-start; }
.wz-legend .leg .ic { font-size: 1.4rem; line-height: 1; }
.wz-legend .leg p { margin: 0; color: var(--muted); font-size: .86rem; }
.wz-legend .leg b { color: var(--text); }

.wz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wz-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--text); }
.wz-eg { font-size: .74rem; color: var(--muted); font-weight: 400; }
.wz-check { display: flex; gap: 8px; align-items: center; margin: 16px 0; font-size: .9rem; color: var(--muted); cursor: pointer; }
.wz-check input { width: auto; }
.wz-preview { background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px; padding: 10px 14px; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.wz-preview strong { color: var(--text); }

/* Import data */
.import-tutorial ol { margin: 0 0 6px 18px; }
.import-tutorial li { color: var(--muted); font-size: .92rem; padding: 3px 0; }
.import-tutorial strong { color: var(--text); }
.import-block code { background: var(--bg); border: 1px solid var(--card-edge); border-radius: 5px; padding: 1px 6px; font-size: .82rem; color: var(--accent); }
.import-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.file-btn { display: inline-block; background: var(--accent); color: #ffffff; font-weight: 700; font-size: .85rem; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.file-btn:hover { background: var(--accent-dark); }
.file-btn input[type="file"] { display: none; }
.import-result { margin-top: 14px; }
.import-result p { font-size: .92rem; }
.import-err { color: var(--danger); }
.import-ok { color: var(--accent); font-weight: 600; }
.import-errs { margin: 6px 0 10px 18px; }
.import-errs li { color: var(--danger); font-size: .84rem; padding: 1px 0; }
.import-preview { margin: 8px 0 14px; border: 1px solid var(--card-edge); border-radius: 8px; }
.import-preview td, .import-preview th { padding: 6px 10px; }

/* Activity */
.act-type { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; }
.act-type.pick { background: rgba(163,83,11,.15); color: var(--pick); }
.act-type.stow { background: rgba(29,78,216,.15); color: var(--stow); }
.act-type.system { background: rgba(0,0,0,.15); color: var(--muted); }
.act-type.order { background: rgba(4,120,87,.15); color: var(--accent); }

/* ---------- Export buttons ---------- */
/* Sits beside the primary action in a view head, and wraps under it on a phone
   rather than squeezing both onto one line. */
.view-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Printed warehouse report ----------
 * A separate document, appended to <body> and shown only while printing. The
 * console's own print rules hide everything else, so the two never collide. */
#print-report { display: none; }
body.printing-report #print-report { display: block; }

@media print {
  body.printing-report .layout,
  body.printing-report .auth-gate { display: none !important; }
  body.printing-report { background: #fff; color: #111; }
  body.printing-report #print-report { display: block; }
}

#print-report {
  color: #111; background: #fff; font-size: 11pt; line-height: 1.45;
  padding: 0 4mm;
}
#print-report h1 { font-size: 20pt; margin: 0; color: #111; }
#print-report h2 { font-size: 12pt; margin: 0 0 4px; color: #111; }
.pr-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 14px;
}
.pr-sub { margin: 2px 0 0; font-size: 11pt; }
.pr-date { margin: 0; font-size: 9.5pt; color: #555; white-space: nowrap; }

.pr-kpis { display: flex; gap: 10px; margin-bottom: 16px; }
.pr-kpis div {
  flex: 1; border: 1px solid #bbb; border-radius: 4px; padding: 8px 10px; text-align: center;
}
.pr-kpis strong { display: block; font-size: 15pt; }
.pr-kpis span { font-size: 8.5pt; color: #555; text-transform: uppercase; letter-spacing: .4px; }

/* Charts are inline SVG built for a dark console. The data strokes and bars
   carry their own colours and read fine on white, but the axis and value labels
   are --muted and --text, chosen against a near-black background: on paper they
   come out as pale grey on pale grey. Re-colour them for ink. */
#print-report .ch-lbl { fill: #444; }
#print-report .ch-val { fill: #111; }
#print-report .chart line,
#print-report .chart .ch-grid { stroke: #ccc; }
.pr-chart { margin-bottom: 16px; break-inside: avoid; }
/* Width governs, not height. The charts are 660×470, so a max-height left them
   scaled down and floating in the middle of a wide empty box — the report is
   read on paper, where a small chart is simply unreadable. Two full-width
   charts push the tables onto a second page, which is what break-inside is for;
   a two-page warehouse report is normal, an illegible one-page report is not. */
.pr-chart svg {
  display: block; width: 100%; max-width: 165mm; height: auto;
  margin: 0 auto; background: #f7f8fa; border-radius: 4px;
}
.pr-note { margin: 0 0 6px; font-size: 9.5pt; color: #555; }

.pr-table { margin-bottom: 14px; break-inside: avoid; }
.pr-table table { width: 100%; border-collapse: collapse; font-size: 10pt; }
.pr-table th, .pr-table td { border: 1px solid #ccc; padding: 4px 7px; text-align: left; }
.pr-table th { background: #eef1f6; font-weight: 700; }

.pr-foot { margin-top: 18px; padding-top: 8px; border-top: 1px solid #ccc; font-size: 9pt; color: #555; }

/* ---------- Bin size, shelf by shelf ---------- */
.wz-note { margin-bottom: 12px; }
.wz-shelves { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; align-items: flex-start; }
.wz-shelf-row {
  display: grid; grid-template-columns: 150px repeat(3, 96px) 1fr;
  gap: 12px; align-items: end; width: 100%;
}
.wz-shelf-row > * { min-width: 0; }
.wz-shelf-name { font-size: .9rem; align-self: center; }
.wz-shelf-dims { font-size: .8rem; align-self: center; }
.wz-dim { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--text); }
.wz-size { width: 100%; background: var(--bg); border: 1px solid var(--card-edge);
  border-radius: 8px; color: var(--text); font: inherit; font-size: .88rem; padding: 6px 8px; }
@media (max-width: 620px) {
  .wz-shelf-row { grid-template-columns: repeat(3, 1fr); gap: 6px 8px; }
  .wz-shelf-name, .wz-shelf-dims { grid-column: 1 / -1; }
  .wz-shelf-dims { margin-bottom: 6px; }
}

/* ---------- Warehouse map ----------
 * Not to scale on purpose: a pallet bay can be sixteen times a small shelf bin,
 * and drawing that honestly makes the small bins too small to see or press. */
.wz-plan { display: flex; flex-direction: column; gap: 18px; overflow-x: auto; padding-bottom: 2px; }
.rack-zone-head { font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--muted); margin-bottom: 8px; }
.rack-bays { display: flex; gap: 14px; flex-wrap: wrap; }
.rack-bay {
  background: var(--surface-sunk); border: 1px solid var(--card-edge); border-radius: 8px;
  padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.rack-shelf { display: flex; align-items: center; gap: 6px; }
.rack-shelf-no { color: var(--muted); font-size: .68rem; width: 12px; text-align: right; flex: none; }
.rack-bins { display: flex; gap: 4px; }
.rack-pallets { flex-wrap: wrap; }
.rack-bin.rack-named { min-width: 56px; padding: 0 6px; font-family: var(--mono); }
.rack-bay-no { color: var(--muted); font-size: .7rem; text-align: center; margin-top: 4px; }

/* A bin: colour says how full it is, and the fill paints from the bottom up —
   the way stock actually accumulates in a bin. */
.rack-bin {
  position: relative; overflow: hidden; cursor: pointer; isolation: isolate;
  border: 1px solid var(--card-edge); border-radius: 3px; background: var(--card);
  color: var(--text); font: inherit; font-size: .62rem; font-weight: 700;
  min-width: 38px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.rack-bin::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: var(--fill, 0%); background: var(--rack-fill, transparent);
}
.rack-bin:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.rack-bin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fill-empty { color: var(--muted); font-weight: 500; }
.fill-some { --rack-fill: #b7e4d0; border-color: #8fd0b4; }
.fill-warn { --rack-fill: #fcd9a3; border-color: #f0b866; }
.fill-full { --rack-fill: #f6b4ab; border-color: #e88b7e; }
.rack-bin.fill-over { background: var(--danger); color: #fff; border-color: var(--danger); }
.rack-bin.fill-planned { cursor: default; background: var(--card); border-style: dashed; }
.rack-bin.fill-planned:hover { outline: none; }

.wz-plan-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px;
  font-size: .78rem; color: var(--muted); }
.rack-key { display: inline-flex; align-items: center; gap: 6px; }
.rack-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--card-edge); background: var(--card); }
.rack-swatch.fill-some { background: #b7e4d0; }
.rack-swatch.fill-warn { background: #fcd9a3; }
.rack-swatch.fill-full { background: #f6b4ab; }
.rack-swatch.fill-over { background: var(--danger); }
.bins-list-head { margin: 8px 0 2px; }
.bins-list-note { font-size: .82rem; margin-bottom: 10px; }
#bins-msg:empty { display: none; }
#bins-msg { margin-bottom: 12px; }

/* ---------- Detail drawer ---------- */
.detail {
  position: fixed; inset: 0; z-index: 90; display: flex;
  align-items: flex-start; justify-content: center; padding: 24px;
  background: rgba(26,26,26,.45); overflow-y: auto;
}
.detail-card {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px;
  padding: 20px 22px; width: min(760px, 100%); margin: auto 0;
}
.detail-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 14px; }
.detail-head h2 { margin: 0; color: var(--text); font-size: 1.15rem;
  text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.detail-grid { display: grid; grid-template-columns: 1fr minmax(0, 240px); gap: 20px; align-items: start; }
.detail-grid > * { min-width: 0; }
.detail-facts { width: 100%; border-collapse: collapse; font-size: .9rem; }
.detail-facts th { text-align: left; font-weight: 500; color: var(--muted);
  padding: 5px 12px 5px 0; white-space: nowrap; vertical-align: top;
  text-transform: none; letter-spacing: 0; font-size: .9rem; }
.detail-facts td { padding: 5px 0; overflow-wrap: anywhere; }
.detail-bar { margin-top: 12px; }
/* The barcode sits on white because that is what a scanner reads reliably. */
.detail-barcode { text-align: center; }
.detail-barcode svg { background: #fff; border-radius: 6px; width: 100%; height: auto; }
.detail-barcode p { font-size: .76rem; margin: 8px 0; }
.detail-sub { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin: 20px 0 10px; }
/* The per-item history: same badges as the activity feed, but the log text is
   the point, so give it the room and keep the timestamp from wrapping. */
.detail-history { font-size: .85rem; }
.detail-history td { vertical-align: top; padding: 6px 10px 6px 0; }
.detail-history td:first-child { color: var(--muted); white-space: nowrap; }
@media (max-width: 620px) { .detail-grid { grid-template-columns: 1fr; } }

/* History / audit trail */
.audit-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.audit-filters label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.audit-filters select, .audit-filters input { font: inherit; font-size: .88rem; padding: 7px 10px;
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--card-edge); border-radius: 8px; }
.audit-filters input { min-width: 220px; }
.audit-count { font-size: .78rem; margin-bottom: 10px; }
.audit-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.audit-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .6px; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--card-edge); }
.audit-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--card-edge); vertical-align: top; }
.audit-row.has-detail { cursor: pointer; }
.audit-row.has-detail:hover td { background: rgba(0,0,0,.04); }
/* The snapshot drawer is closed until its row is clicked. */
.audit-detail-row { display: none; }
.audit-detail-row.open { display: table-row; }
.audit-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 6px 0 12px; }
.audit-detail h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 6px; }
.snap-table { border-collapse: collapse; font-size: .82rem; }
.snap-table td { padding: 3px 12px 3px 0; border: 0; vertical-align: top; }
.snap-table td:first-child { color: var(--muted); white-space: nowrap; }
/* Action badges, sharing the pill shape of .act-type. */
.aud-action { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; }
.aud-action.create { background: rgba(4,120,87,.15); color: var(--accent); }
.aud-action.update { background: rgba(29,78,216,.15); color: var(--stow); }
.aud-action.delete { background: rgba(180,35,24,.15); color: var(--danger); }
.aud-action.reset { background: rgba(163,83,11,.15); color: var(--pick); }
@media (max-width: 620px) { .audit-detail { grid-template-columns: 1fr; } }

/* Rows and cards that open a detail have to look like they do. */
.item-row { cursor: pointer; }
.item-row:hover td { background: rgba(0,0,0,.04); }
.item-row:focus-visible, .bin-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bin-card[data-bin] { cursor: pointer; }
.bin-card[data-bin]:hover { border-color: var(--accent); }

/* Two small actions in a table cell — Move and Adjust — kept from cramming. */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Move stock ---------- */
.move-form {
  background: rgba(0,0,0,.04); border: 1px solid var(--card-edge);
  border-radius: 10px; padding: 14px 16px; margin: 6px 0;
}
.move-grid { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 12px; }
.move-grid label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.move-grid strong, .move-grid .mono { color: var(--text); }
.move-form input, .move-form select {
  background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px;
  color: var(--text); font: inherit; font-size: .9rem; padding: 7px 10px; min-width: 0;
}
.move-form .mv-qty { width: 84px; }
.move-form .mv-to { max-width: 320px; }
.move-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.move-actions .btn-primary { padding: 7px 14px; font-size: .88rem; }
.mv-msg { font-size: .82rem; }

/* The second leg of a split put-away, inside a scan directive. */
.d-split { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: .88rem; }

/* Print: only the label sheet */
@media print {
  body { background: #fff; }
  /* .tab-bar too: printing from a phone put the fixed bottom nav on the page. */
  .sidebar, .tab-bar, .no-print, .view.hidden { display: none !important; }
  /* Export buttons are chrome, not content: never on a printed label sheet or
     inside the warehouse report. */
  .view-actions, .detail { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; max-width: none; }
  .label-sheet { gap: 8px; }
  .label { border: 1px dashed #999; border-radius: 0; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  /* Stacked above the content on a phone, so it grows instead of scrolling
     inside itself — a scroller within a scroller is a trap on a touchscreen. */
  .sidebar { position: static; height: auto; overflow: visible; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  /* Room for the fixed bottom tab bar. */
  .main { padding-bottom: 76px; }
  .tab-bar { display: flex; }
}

/* ---------- Mobile bottom tab bar ----------
 * On a phone the stacked sidebar buries every screen under two viewports of
 * navigation. The picker's four screens get a fixed thumb-reach bar instead;
 * "Menu" jumps back to the full nav at the top. Hidden on desktop. */
.tab-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--bg-alt); border-top: 1px solid var(--card-edge);
  padding: 6px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom));
  justify-content: space-around; gap: 4px;
}
/* Shown on phones. Must come AFTER the base rule above: the copy inside the
 * earlier 900px block lost to the later `display: none`, so the bar never
 * appeared on any phone from the day it was added. */
@media (max-width: 900px) { .tab-bar { display: flex; } }
.tab-btn {
  flex: 1; background: none; border: none; color: var(--muted); font: inherit;
  font-size: .72rem; padding: 8px 2px; border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px;
}
.tab-btn .tab-ico { font-size: 1.15rem; line-height: 1; }
.tab-btn.active { color: var(--accent); background: var(--card); }

/* Touch ergonomics: the frequent small controls get real tap targets, and
 * text inputs stop iOS zoom-on-focus (needs ≥16px). */
@media (pointer: coarse) {
  .btn-ghost-sm { padding: 11px 14px; }
  .chip { padding: 10px 12px; }
  input, select, textarea { font-size: 16px; }
}

/* ---------- Auth gate ---------- */
body.pre-auth .layout { display: none; }
.auth-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--bg);
}
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px;
  padding: 30px 28px; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.auth-brand { font-size: 1.3rem; font-weight: 800; letter-spacing: .3px; }
.auth-brand .brand-mark { color: var(--accent); letter-spacing: -2px; margin-right: 4px; }
.auth-sub { color: var(--muted); font-size: .95rem; margin: 6px 0 20px; }

/* "Opening your warehouse…" — the gate holds here until the console is wired.
 * A pulsing dot rather than a spinner: this is a wait measured in seconds on
 * first run, and it should read as progress, not as a hang. */
.auth-busy { display: flex; align-items: center; gap: 10px; color: var(--text);
  font-size: .95rem; padding: 14px 0 4px; }
.auth-busy::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex: none; animation: auth-pulse 1.2s ease-in-out infinite; }
@keyframes auth-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .auth-busy::before { animation: none; } }
.auth-note { color: var(--muted); font-size: .88rem; margin-bottom: 8px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }
.auth-form input {
  background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px;
  color: var(--text); font: inherit; font-size: .95rem; padding: 10px 12px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form .btn { margin-top: 4px; text-align: center; cursor: pointer; }
.auth-switch { color: var(--muted); font-size: .85rem; text-align: center; margin-top: 4px; }
.auth-error {
  background: rgba(180,35,24,.12); border: 1px solid var(--danger); color: #7a1610;
  border-radius: 8px; padding: 10px 12px; font-size: .85rem; margin-bottom: 16px;
}

/* ---------- Company & warehouse profile ---------- */
/* Two columns on a desk, one on a scanner. The label column is sized to the
 * longest label so nothing wraps into its own field's row. */
.company-form {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 14px; align-items: center; margin-bottom: 14px;
}
.company-form label { font-size: .88rem; color: var(--muted); }
.company-form input, .company-form select {
  background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px;
  color: var(--text); font: inherit; font-size: .92rem; padding: 9px 12px;
  min-width: 0; /* without this a long placeholder pushes the grid wider than the panel */
  width: 100%;
}
.company-form input:focus, .company-form select:focus { outline: none; border-color: var(--accent); }
.company-form input:disabled, .company-form select:disabled { opacity: .6; cursor: not-allowed; }
.company-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.company-actions .team-msg { margin: 0; }
@media (max-width: 620px) {
  .company-form { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .company-form label { margin-top: 8px; }
}

/* ---------- Team & plan ---------- */
.plan-row { margin-bottom: 6px; font-size: .93rem; }
.plan-row a { color: var(--accent); }
.team-invite { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.team-invite input, .team-invite select {
  background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px;
  color: var(--text); font: inherit; font-size: .92rem; padding: 9px 12px;
}
.team-invite input { flex: 1; min-width: 220px; }
.team-invite input:focus, .team-invite select:focus { outline: none; border-color: var(--accent); }
.team-msg { font-size: .88rem; margin: 0 0 12px; min-height: 1.2em; color: var(--muted); }
.team-msg-ok { color: var(--accent); }
.team-msg-err { color: var(--danger); }
.team-roles { font-size: .8rem; margin-top: 12px; }
.tag-role { background: rgba(29,78,216,.18); color: var(--stow); text-transform: capitalize; }
.tm-role {
  background: var(--bg); border: 1px solid var(--card-edge); border-radius: 6px;
  color: var(--text); font: inherit; font-size: .85rem; padding: 4px 8px; text-transform: capitalize;
}

/* Plan state banner — deliberately hard to miss when writes are blocked. */
.plan-banner { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }
.plan-banner a { color: inherit; text-decoration: underline; }
.plan-banner.warn { background: rgba(163,83,11,.12); border: 1px solid var(--pick); color: #7a3e06; }
.plan-banner.stop { background: rgba(180,35,24,.12); border: 1px solid var(--danger); color: #7a1610; }
.plan-stop { color: var(--danger); }

/* ---------- Operator console (admin.html) ---------- */
.admin-layout { grid-template-columns: 1fr; }
/* width:100% is load-bearing: the auto margins switch the grid item from
 * stretch to fit-content sizing, and fit-content is floored by the widest
 * table's min-content — on a phone that let the company list inflate <main>
 * past the viewport and put other panels' buttons off-screen. An explicit
 * width pins it to the track; the tables scroll inside their own panels. */
.admin-layout .main { max-width: 1180px; margin: 0 auto; width: 100%; }
.admin-actions { display: flex; align-items: center; gap: 10px; }
.admin-kpis { grid-template-columns: repeat(5, 1fr); }
.admin-row-actions { display: flex; gap: 8px; white-space: nowrap; }
/* Status pills. nowrap because "Read-only" was breaking across two lines
 * inside the pill, which reads as a rendering fault rather than a status. */
.pill { display: inline-block; white-space: nowrap; font-size: .74rem; font-weight: 700;
  padding: 3px 10px; border-radius: 99px; letter-spacing: .3px; }
.pill-ok { background: rgba(4,120,87,.16); color: var(--accent); }
.pill-info { background: rgba(29,78,216,.16); color: var(--stow); }
.pill-warn { background: rgba(163,83,11,.16); color: #8a4507; }
.pill-stop { background: rgba(180,35,24,.16); color: var(--danger); }

/* ---------- Growth panel (admin.html) ----------
   Customers-over-time line/area on the left, trial→paid mix on the right.
   All marks take their colour from the theme tokens so both themes read. */
.gr-wrap { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; }
.gr-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .7px;
  color: var(--muted); font-weight: 700; margin: 0 0 10px; }
.gr-chart { position: relative; overflow-x: auto; }
.gr-svg { width: 100%; min-width: 340px; height: auto; display: block; }
.gr-grid { stroke: var(--card-edge); stroke-width: 1; }
.gr-line { fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.gr-dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.gr-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.gr-note { font-size: .78rem; margin-top: 8px; }

.gr-conv-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.gr-rate { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--accent); }
.gr-rate-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text); font-weight: 600; }
.gr-rate-lbl .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.gr-mix-svg { width: 100%; height: 30px; display: block; margin-bottom: 12px; }
.gr-seg-ok { fill: var(--accent); }
.gr-seg-info { fill: var(--stow); }
.gr-seg-warn { fill: var(--pick); }
.gr-seg-stop { fill: var(--danger); }

/* Visits KPI sparkline. */
.gr-spark { width: 100%; height: 26px; display: block; margin-top: 8px; }
.gr-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi .num.muted { color: var(--muted); }

@media (max-width: 820px) {
  .gr-wrap { grid-template-columns: 1fr; }
}

/* ---------- Analytics ----------
   The charts are the page, so this view breaks the console's reading width. */
.view-wide { max-width: none; }
.main:has(.view-wide:not(.hidden)) { max-width: none; }
.an-kpis { grid-template-columns: repeat(5, 1fr); }
/* The charts are the point of this view, so let them claim the screen: the
   grid takes whatever height is left and both panels match. */
#view-analytics:not(.hidden) { display: flex; flex-direction: column; min-height: calc(100vh - 56px); }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; flex: 1; }
.an-grid .an-panel { margin-bottom: 0; }
.an-panel { display: flex; flex-direction: column; }
/* Wraps, and the select shrinks. On a 390px phone the metric dropdown hung 66px
   outside its panel: "Warehouse utilisation by zone" read as "Warehouse
   utilisation by" with the arrow off-screen, so you could not tell which metric
   you were looking at. */
.an-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 6px; flex-wrap: wrap; }
.an-head > * { min-width: 0; }
.an-head h2 { margin-bottom: 2px; }
.an-sub { color: var(--muted); font-size: .82rem; }
.an-head select { width: auto; max-width: 100%; font-size: .85rem; padding: 7px 10px;  min-width: 0; }
/* The SVG scales by width, so on a tall panel it would sit at the top with a
   gap beneath. Centring it makes the space read as deliberate. */
/* The chart SVG is authored at 660px. On a phone panel (~280px) scaling it to
 * fit shrinks the axis and date labels to ~4px — illegible. Give it a readable
 * floor and let it scroll sideways inside its panel instead, the same pattern
 * every wide table uses. On a desktop panel it still fills the width. */
.an-chart { position: relative; margin-top: 12px; flex: 1; display: flex; align-items: center; overflow-x: auto; }
.an-chart > svg { width: 100%; min-width: 440px; }
.an-chart .chart { width: 100%; min-width: 440px; height: auto; display: block; }
.ch-lbl { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.ch-val { fill: var(--text); font-size: 11.5px; font-weight: 700; font-family: var(--font); }
.ch-hit { cursor: pointer; }
.ch-hit:hover { opacity: .85; }
/* Tooltip — values live here rather than on every mark, so the plot stays readable. */
.ch-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -130%); white-space: nowrap;
  background: var(--bg); border: 1px solid var(--card-edge); border-radius: 8px;
  padding: 7px 11px; font-size: .82rem; color: var(--text);
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
.ch-tip strong { color: var(--accent); }
@media (max-width: 1100px) {
  .an-grid { grid-template-columns: 1fr; }
  .an-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* The support-chat launcher (chat.css) must clear the mobile bottom tab bar. */
@media (max-width: 900px) {
  .chat-launcher { bottom: 84px; }
  .chat-panel { bottom: 84px; }
}

/* Pick Routes: several orders, one walk. */
.view-lede { color: var(--muted); margin-bottom: 14px; }
.rt-orders { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.rt-order { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.rt-summary { margin-bottom: 12px; }
.rt-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rt-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--card-edge); }
.rt-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--card-edge); vertical-align: top; }
.rt-short { margin-top: 12px; color: var(--pick); }
.rt-upsell h2 { margin-bottom: 8px; }
@media print {
  .rt-table th, .rt-table td { border-color: #999; color: #000; }
}

/* Replenishment */
.rp-qty { width: 84px; padding: 6px 8px; background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--card-edge); border-radius: 8px; font: inherit; }
.rp-note { margin-top: 12px; font-size: .85rem; }

/* Dispatch */
.dp-area { width: 160px; padding: 6px 8px; background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--card-edge); border-radius: 8px; font: inherit; font-size: .85rem; }
.dp-controls { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 6px; }
.dp-controls select, .dp-controls input { background: var(--bg-alt); color: var(--text);
  border: 1px solid var(--card-edge); border-radius: 8px; padding: 7px 9px; font: inherit; }
.dp-controls label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.dp-run { margin-top: 14px; }
.dp-fit-ok { background: rgba(4,120,87,.18); color: var(--accent); }

/* Warehouse picker — one account, several warehouses. */
.wh-picker { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center;
  justify-content: center; background: radial-gradient(1200px 600px at 50% -10%, #14204019, transparent), var(--bg);
  opacity: 1; transition: opacity .28s ease; overflow: auto; padding: 24px; }
.wh-picker.leaving { opacity: 0; }
.wh-picker-inner { text-align: center; max-width: 860px; width: 100%; }
.wh-picker-inner h1 { margin: 14px 0 4px; }
.wh-cards { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 26px; }
.wh-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 220px; max-width: 280px; text-align: left; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px;
  color: var(--text); font: inherit; cursor: pointer;
  opacity: 0; transform: translateY(14px);
  animation: whCardIn .45s cubic-bezier(.2, .8, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.wh-card:hover, .wh-card:focus-visible { transform: translateY(-4px); border-color: var(--accent);
  box-shadow: 0 12px 32px rgba(4,120,87,.12); outline: none; }
.wh-card.picked { transform: scale(.97); border-color: var(--accent); }
.wh-card-name { font-size: 1.5rem; font-weight: 800; letter-spacing: .5px; }
.wh-card-co { color: var(--muted); }
.wh-card-meta { color: var(--muted); font-size: .82rem; }
.wh-card .pill.wh-ok { background: rgba(4,120,87,.16); color: var(--accent); }
@keyframes whCardIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .wh-card { animation: none; opacity: 1; transform: none; transition: none; }
  .wh-picker { transition: none; }
}

/* The accounts table on a phone: wrap, don't scroll — a horizontal scroller
 * hid the Delete buttons off-screen (and smooth scrolling made them
 * unclickable for tests and thumbs alike). */
.acct-scroll table { width: 100%; }
.acct-scroll td, .acct-scroll th { word-break: break-word; }

/* Master select-all row at the top of long checkbox lists. */
.check-all { display: block; padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--card-edge); }

/* ---------- Batches & expiry ---------- */
.d-lot { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: .92rem;
  background: rgba(4,120,87,.08); border: 1px solid rgba(4,120,87,.3); }
.d-lot-expired { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .5); }
.lot-mini { font-size: .8rem; margin-top: 2px; }
.lot-exp { color: var(--danger); }
.exp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.exp-f.active { border-color: var(--accent); color: var(--accent); }
.exp-summary { margin: 0 0 10px; }
.exp-scroll { overflow-x: auto; }
.exp-table { width: 100%; }
.exp-table td, .exp-table th { word-break: break-word; }
.exp-table tr.exp-expired td { background: rgba(239, 68, 68, .06); }
@media print {
  .exp-filters, .exp-wo { display: none !important; }
  .exp-table th, .exp-table td { color: #000; border-color: #999; }
}

/* ---------- Where you are, and first-run questions ---------- */
.geo-chip { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px;
  padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: rgba(4,120,87,.12); color: var(--accent); vertical-align: middle; white-space: nowrap; }
.tailored-hidden { display: none !important; }
body.no-batches .batch-field { display: none !important; }
.su-terms, .ob-terms { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; line-height: 1.4; }
.su-terms input, .ob-terms input { margin-top: 3px; width: auto; flex: none; }
.onboard { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(26,26,26,.45); backdrop-filter: blur(3px); overflow-y: auto; }
.onboard.hidden { display: none; }
.onboard-card { width: min(640px, 100%); background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 16px; padding: 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); margin: auto; }
.onboard-card h2 { margin: 0 0 6px; }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.ob-grid label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--muted); }
.ob-grid input, .ob-grid select { font: inherit; color: var(--text); background: var(--bg-alt);
  border: 1px solid var(--card-edge); border-radius: 8px; padding: 9px 10px; }
.ob-ref { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--muted); max-width: 260px; margin: -4px 0 16px; }
.ob-ref input { font: inherit; color: var(--text); background: var(--bg-alt); border: 1px solid var(--card-edge); border-radius: 8px; padding: 9px 10px; }
.ob-storage { border: 0; padding: 0; margin: 4px 0 16px; min-width: 0; }
.ob-storage legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 4px; }
.ob-storage > p { margin: 0 0 10px; font-size: .82rem; }
.ob-storage-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .ob-storage-opts { grid-template-columns: 1fr; } }
.ob-opt { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--card-edge);
  border-radius: 8px; cursor: pointer; background: var(--card); }
.ob-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ob-opt input { margin-top: 3px; width: auto; flex: none; }
.ob-opt b { display: block; font-size: .88rem; }
.ob-opt small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; margin-top: 2px; }
.ob-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.alltools-switch { margin-top: 14px; }
@media print { .onboard, .geo-chip { display: none !important; } }

/* ---------- Clients (3PL) & units ---------- */
.tag-client { background: rgba(29,78,216,.15); color: #93c5fd; }
.inv-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inv-filters .search { flex: 1 1 260px; }
.inv-filters select { font: inherit; color: var(--text); background: var(--bg-alt);
  border: 1px solid var(--card-edge); border-radius: 8px; padding: 9px 10px; }
.clients-table td, .clients-table th { word-break: break-word; }
.cl-assign-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cl-assign-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.cl-assign-tools input { flex: 1 1 220px; }
.cl-assign-list { max-height: 360px; overflow-y: auto; border: 1px solid var(--card-edge); border-radius: 8px; }
.cl-assign-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--card-edge); cursor: pointer; }
.cl-assign-row:last-child { border-bottom: 0; }
.cl-assign-row.hidden { display: none; }
.cl-unassigned { margin-top: 10px; }

/* Line icons in place of emoji (tab bar, camera button, location chip). */
.tab-ico { display: inline-flex; }
.tab-svg { width: 22px; height: 22px; }
.btn-svg { width: 18px; height: 18px; vertical-align: -3px; }
.geo-pin { width: 11px; height: 11px; }

/* ---------- Guide button + illustrated tour ---------- */
.guide-btn { position: fixed; top: 14px; right: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px; border-radius: 999px; border: 1px solid var(--card-edge); cursor: pointer;
  background: var(--card); color: var(--text); font: inherit; font-weight: 600; font-size: .85rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.guide-btn svg { width: 18px; height: 18px; color: var(--accent); }
.guide-btn:hover { border-color: var(--accent); }
.guide-btn.guide-new { animation: gd-pulse 2.4s ease-in-out infinite; }
@keyframes gd-pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 0 rgba(4,120,87,.45); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 8px rgba(4,120,87,0); } }
body.pre-auth .guide-btn, body.onboarding .guide-btn, body.guide-open .guide-btn { display: none; }
/* Keep page titles clear of the floating button. */
.view > .view-head { padding-right: 110px; }

.guide { position: fixed; inset: 0; z-index: 450; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(26,26,26,.45); backdrop-filter: blur(3px); }
.guide.hidden { display: none; }
.guide-card { width: min(920px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card);
  border: 1px solid var(--card-edge); border-radius: 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.guide-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--card-edge); }
.guide-kicker { font-weight: 700; color: var(--accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.guide-count { color: var(--muted); font-size: .8rem; margin-inline-start: auto; }
.guide-x { background: none; border: none; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.gd-slide { display: none; grid-template-columns: 1.05fr 1fr; gap: 26px; padding: 24px; align-items: center; }
.gd-slide.active { display: grid; animation: gd-in .35s ease both; }
@keyframes gd-in { from { opacity: 0; transform: translateX(14px); } }
.gd-text h2 { font-size: 1.25rem; margin: 0 0 12px; text-transform: none; letter-spacing: 0; color: var(--text); }
/* Grid children may shrink below their content, so a wide drawing can never
 * push the step past a phone screen. */
.gd-slide > * { min-width: 0; }
.gd-text ol { margin: 0 0 16px; padding-inline-start: 20px; display: grid; gap: 9px; color: var(--muted); line-height: 1.5; }
.gd-text ol strong, .gd-text ol b { color: var(--text); }
.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--card-edge); }
.gd-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.gd-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--card-edge); }
.gd-dots span.on { background: var(--accent); width: 22px; border-radius: 4px; }

/* Drawn visuals */
.gd-visual { min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 18px;
  border-radius: 14px; background: radial-gradient(420px 260px at 50% 0%, rgba(4,120,87,.10), transparent 70%), var(--bg-alt);
  border: 1px solid var(--card-edge); }
.gd-row { gap: 10px; }
.gd-arrow { width: 22px; height: 2px; background: var(--accent); position: relative; flex: none; opacity: .8; }
.gd-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--accent); border-right: 0; }
.gd-phone { width: 110px; height: 190px; border: 3px solid var(--card-edge); border-radius: 18px; background: var(--surface-sunk); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; flex: none; }
.gd-phone::before { content: ""; position: absolute; top: 5px; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 3px; background: var(--card-edge); }
.gd-phone.gd-small { height: 120px; }
.gd-word { font-size: 1.05rem; letter-spacing: .08em; color: var(--accent); }
.gd-stow .gd-word { color: #60a5fa; } .gd-pick .gd-word { color: var(--pick); }
.gd-loc { font-size: 1.15rem; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.07); letter-spacing: .04em; }
.gd-cap { font-size: .68rem; text-align: center; } .gd-muted { color: var(--muted); }
.gd-pill { font-size: .62rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; text-align: center; }
.gd-ok { background: rgba(4,120,87,.16); color: var(--accent); } .gd-warn { background: rgba(163,83,11,.16); color: var(--pick); }
.gd-ck { width: 12px; height: 12px; flex: none; }
.gd-box { width: 58px; height: 46px; border-radius: 5px; background: linear-gradient(160deg, #c99a5b, #a87a3e); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.gd-bars { display: inline-block; width: 36px; height: 12px; background: repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 6px); border: 2px solid #fff; border-radius: 2px; }
.gd-scan { position: absolute; left: 18%; right: 18%; top: 54px; height: 2px; background: #f43f5e; box-shadow: 0 0 8px #f43f5e; animation: gd-sweep 2s ease-in-out infinite; }
@keyframes gd-sweep { 50% { transform: translateY(44px); } }
.gd-shelf { width: 80%; padding: 18px 0 6px; border-bottom: 3px solid #8a8a8a; text-align: center; font-weight: 700; font-size: .75rem; color: var(--muted); }
.gd-rack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 62%; }
.gd-rack span { font-size: .66rem; text-align: center; padding: 12px 2px; border-radius: 4px; background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.08); }
.gd-rack .gd-hl { background: rgba(29,78,216,.25); border-color: #60a5fa; color: #bfdbfe; font-weight: 700; }
.gd-label { margin-inline-start: 14px; background: #fff; color: #111; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: rotate(-4deg); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.gd-label .gd-bars { width: 70px; height: 22px; border: none; }
.gd-label b { font-size: .9rem; letter-spacing: .05em; } .gd-label i { font-style: normal; font-size: .58rem; color: #8a8a8a; }
.gd-sheet { display: grid; grid-template-columns: auto auto; gap: 3px; }
.gd-cell { font-size: .64rem; padding: 4px 6px; border-radius: 3px; background: rgba(0,0,0,.06); }
.gd-cell.gd-h { background: rgba(4,120,87,.2); color: var(--accent); font-weight: 700; }
.gd-form, .gd-count { width: min(260px, 100%); display: grid; gap: 8px; }
.gd-f { display: flex; flex-direction: column; gap: 3px; } .gd-f i { font-style: normal; font-size: .64rem; color: var(--muted); }
.gd-f b { font-size: .8rem; padding: 7px 9px; border-radius: 7px; background: var(--surface-sunk); border: 1px solid var(--card-edge); }
.gd-file { color: var(--accent); }
.gd-btn { justify-self: start; font-size: .75rem; font-weight: 700; padding: 7px 12px; border-radius: 7px; background: var(--accent); color: #ffffff; }
.gd-ticket { background: #f8fafc; color: var(--card); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: .64rem; min-width: 112px; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.gd-ticket b { font-size: .74rem; } .gd-ticket i { color: #64748b; font-style: normal; margin-bottom: 4px; }
.gd-list { width: min(320px, 100%); display: grid; gap: 7px; }
.gd-li { display: grid; grid-template-columns: 1fr auto; padding: 9px 11px; border-radius: 8px; background: rgba(0,0,0,.05); }
.gd-li b { font-size: .78rem; } .gd-li i { grid-column: 1; font-style: normal; font-size: .64rem; color: var(--muted); }
.gd-tag { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: .6rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.gd-tag.gd-warn { background: rgba(163,83,11,.16); color: var(--pick); } .gd-tag.gd-stop { background: rgba(239,68,68,.16); color: #f87171; }
.gd-tag.gd-good { background: rgba(4,120,87,.16); color: var(--accent); }
.gd-count { justify-items: start; } .gd-count .gd-loc { justify-self: start; }
.gd-dash { width: min(320px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gd-kpi { padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.05); display: flex; flex-direction: column; }
.gd-kpi b { font-size: .95rem; } .gd-kpi i { font-style: normal; font-size: .6rem; color: var(--muted); }
.gd-chart { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 6px; height: 70px; padding-top: 6px; }
.gd-chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--accent), rgba(4,120,87,.2)); }
.gd-roles { display: flex; gap: 6px; } .gd-roles em { font-style: normal; font-size: .7rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--card-edge); color: var(--muted); }
.gd-roles .gd-on { border-color: var(--accent); color: var(--accent); }
.gd-side { width: 200px; display: grid; gap: 5px; padding: 12px; border-radius: 10px; background: var(--surface-sunk); border: 1px solid var(--card-edge); }
.gd-side-logo { width: 70px; height: 10px; border-radius: 3px; background: var(--accent); opacity: .8; margin-bottom: 4px; }
.gd-nav { font-size: .7rem; padding: 6px 8px; border-radius: 6px; color: var(--muted); }
.gd-nav.gd-on { color: var(--text); background: rgba(4,120,87,.12); box-shadow: inset 3px 0 0 var(--accent); }
.gd-done { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(4,120,87,.14); color: var(--accent); }
.gd-done .gd-ck { width: 48px; height: 48px; }
body.no-batches .gd-batch, body.no-batches .gd-batch-only { display: none; }

@media (max-width: 760px) {
  .guide-btn { top: 10px; right: 10px; padding: 7px 11px 7px 9px; }
  .gd-slide { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .gd-visual { min-height: 0; }
  .gd-visual { padding: 12px 8px; }
  .gd-row { gap: 5px; }
  .gd-arrow { width: 12px; }
  .gd-phone { width: 84px; height: 150px; border-width: 2px; border-radius: 14px; padding: 8px 4px; }
  .gd-phone.gd-small { height: 100px; }
  .gd-loc { font-size: .9rem; padding: 2px 5px; } .gd-word { font-size: .85rem; }
  .gd-cap { font-size: .6rem; } .gd-pill { font-size: .56rem; padding: 3px 6px; }
  .gd-box { width: 46px; height: 38px; } .gd-scan { top: 44px; }
  .gd-ticket { min-width: 0; padding: 7px 8px; font-size: .56rem; }
  .gd-sheet .gd-cell { font-size: .56rem; padding: 3px 4px; }
  .gd-rack { width: 58%; } .gd-label { margin-inline-start: 8px; }
  .view-head { padding-right: 96px; }
}
@media (prefers-reduced-motion: reduce) { .guide-btn.guide-new, .gd-scan, .gd-slide.active { animation: none; } }
@media print { .guide-btn, .guide { display: none !important; } }
@media (max-width: 400px) {
  .gd-phone { width: 74px; } .gd-row { gap: 3px; } .gd-arrow { width: 9px; }
}
/* The slide-in glides 14px from the side; clip it so the card never flashes a
 * horizontal scrollbar mid-animation. */
.guide-slides { overflow-x: hidden; }

/* ---------- Picker mode (phone app frame) ---------- */
.picker-link { display: none; text-align: center; }
@media (max-width: 900px) { .picker-link { display: block; } }
body.picker-mode .sidebar, body.picker-mode .picker-link { display: none !important; }
body.picker-mode .layout { display: block; }
body.picker-mode .main { padding-top: 12px; padding-bottom: 86px; max-width: 760px; margin: 0 auto; }
body.picker-mode .tab-bar { display: flex !important; }
body.picker-mode .tab-btn[data-goto="dashboard"], body.picker-mode #tab-menu { display: none; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 116px 12px 2px; border-bottom: 1px solid var(--card-edge); margin-bottom: 12px; }
.ph-name { display: flex; flex-direction: column; line-height: 1.25; }
.ph-name small { color: var(--muted); font-size: .72rem; }

/* Analytics: two separate full-width sections, one chart each. */
.an-grid { grid-template-columns: 1fr !important; }
.an-kicker { display: block; color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
#view-analytics .an-chart { min-height: 300px; }

/* Stock-check confirmation */
.cc-modal { position: fixed; inset: 0; z-index: 460; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(26,26,26,.45); }
.cc-modal-card { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card);
  border: 1px solid var(--card-edge); border-radius: 16px; padding: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.cc-modal-card h2 { text-transform: none; letter-spacing: 0; font-size: 1.2rem; color: var(--text); margin: 0 0 8px; }
.cc-diff { width: 100%; margin: 12px 0; } .cc-diff td, .cc-diff th { word-break: break-word; }
.cc-note { font-size: .85rem; }
.cc-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* "Get the app" */
.get-app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.get-app-btn svg { width: 16px; height: 16px; color: var(--accent); }
.ins-ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--accent); }
.ins-modal { position: fixed; inset: 0; z-index: 470; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(26,26,26,.45); }
.ins-card { width: min(460px, 100%); background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; padding: 20px 22px; }
.ins-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ins-head h2 { margin: 0; font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.ins-x { background: none; border: none; color: var(--muted); font-size: 1.6rem; cursor: pointer; }
.ins-platforms { display: flex; gap: 8px; margin: 10px 0 12px; }
.ins-platforms span { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(4,120,87,.12); color: var(--accent); }
.ins-steps { margin: 0 0 10px; padding-inline-start: 20px; display: grid; gap: 8px; }
.ins-url { word-break: break-all; padding: 8px 10px; border-radius: 8px; background: var(--bg-alt); }
.ins-store { font-size: .8rem; margin-top: 12px; }

/* Reorder control */
.reorder-alert { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(202,138,4,.55);
  background: rgba(202,138,4,.1); }
.reorder-alert.hidden { display: none; }
.reorder-alert .ra-text { display: grid; gap: 3px; min-width: 0; flex: 1 1 260px; }
.reorder-alert .ra-text span { color: var(--muted); font-size: .9rem; }
.rc-wrap { overflow-x: auto; }
.rc-table { min-width: 860px; }
.rc-table td { vertical-align: top; }
.rc-table .rc-in[type="number"] { width: 90px; }
.rc-hint { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }
.rc-auto { display: flex; align-items: center; gap: 5px; font-size: .75rem; margin-top: 4px; color: var(--muted); }
.rc-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rc-due { margin: 0 0 12px; }
#lpo-modal .form-grid { margin: 12px 0; }

/* Refer a business */
.ref-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ref-row input { flex: 1 1 240px; min-width: 0; }
.ref-code { margin: 8px 0 0; }

/* API access */
.api-base { word-break: break-all; }
.api-fresh { margin: 10px 0; padding: 12px; border-radius: 10px; border: 1px solid rgba(202,138,4,.55); background: rgba(202,138,4,.08); display: grid; gap: 8px; }
.api-keys { margin: 8px 0 12px; }
.api-create { margin-top: 8px; }

/* =====================================================================
 * Design system — component layer
 *
 * The console used to be a dark-navy, neon-mint, uppercase-heading look. This
 * layer restyles the shared components after Shopify's admin (Polaris): a
 * soft grey page, white cards with a hairline border and a 1px drop, sentence
 * case everywhere, compact tables with a tinted header, quiet secondary
 * buttons and one solid primary. It is last in the file on purpose: it wins
 * over the earlier per-feature rules without editing each of them.
 * ===================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { font-size: 14px; line-height: 1.45; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
/* The logo is a link home, not a word in a sentence: no underline. */
.brand, .brand:hover, .brand:focus { text-decoration: none; }
::selection { background: rgba(4,120,87,.18); }

/* Type: sentence case, weight not size, no letter-spaced capitals. */
h1 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; color: #1a1a1a; margin-bottom: 14px; }
h2 { font-size: .95rem; font-weight: 650; color: #1a1a1a; text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
h3 { font-weight: 600; color: #1a1a1a; }
.hint, .view-lede { color: var(--muted); font-size: .875rem; }
.muted { color: var(--muted); }

/* Page frame */
/* Fills the screen: a phone gets the whole width, and a 27-inch monitor is
 * used rather than left half empty. Long prose keeps its own reading width
 * (.hint), so only the panels, grids and tables stretch. */
.main { padding: 24px clamp(16px, 2.2vw, 48px) 48px; max-width: none; min-width: 0; }
.view-head { margin-bottom: 14px; }

/* Sidebar: light, quiet; the active page is a white "raised" row. */
.sidebar { background: var(--bg-alt); border-right: 1px solid #dcdcdc; padding: 14px 10px; gap: 12px; }
.brand { font-size: 1rem; font-weight: 700; color: #1a1a1a; letter-spacing: -.01em; }
.brand-mark { color: var(--accent); }
.tenant { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow); border-radius: 10px; font-size: .82rem; }
.nav-btn { color: #303030; font-size: .86rem; font-weight: 500; padding: 7px 10px; border-radius: 8px; }
.nav-btn:hover { background: rgba(0,0,0,.05); color: #1a1a1a; }
.nav-btn.active { background: var(--card); color: #1a1a1a; font-weight: 650; box-shadow: var(--shadow); }
.nav-group { margin-top: 10px; }
.nav-group-title { text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 650; color: var(--muted); opacity: 1; padding: 4px 10px 2px; }
.sidebar-foot small { font-size: .72rem; line-height: 1.4; }

/* Cards */
.panel, .kpi, .bin-card, .order-card, .chart-card, .fr-card {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 12px; box-shadow: var(--shadow);
}
.panel { padding: 16px 18px; margin-bottom: 16px; }

/* Metrics: label first, then the figure — how Shopify and Stripe read. */
.kpi-row { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi .lbl { order: -1; text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 550; color: var(--muted); }
.kpi .num { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.kpi .kpi-sub { font-size: .75rem; }

/* Tables: tinted header row, hairline rows, numbers in tabular figures. */
table { font-size: .86rem; font-variant-numeric: tabular-nums; }
th { text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--surface-sunk); padding: 8px 10px; border-bottom: 1px solid var(--card-edge); }
th:first-child { border-top-left-radius: 8px; } th:last-child { border-top-right-radius: 8px; }
td { padding: 10px 10px; border-bottom: 1px solid #ebebeb; color: #303030; }
tr.item-row:hover td, tbody tr:hover td { background: var(--hover); }
.mono { font-family: var(--mono); font-size: .8rem; color: var(--muted); letter-spacing: 0; }
td.mono { white-space: nowrap; }
.biz-table thead th { text-transform: none; letter-spacing: 0; font-size: .78rem; }

/* Buttons: a white secondary with a subtle bottom edge, one solid primary. */
.btn-primary, .file-btn {
  background: var(--accent); color: #fff; font-weight: 600; font-size: .86rem; padding: 8px 14px; border-radius: 8px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.08);
}
.btn-primary:hover, .file-btn:hover { background: var(--accent-dark); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost-sm {
  background: var(--card); color: #303030; border: 1px solid #d4d4d4; font-weight: 550; font-size: .82rem;
  padding: 6px 12px; border-radius: 8px; box-shadow: inset 0 -1px 0 #d4d4d4;
}
.btn-ghost-sm:hover { background: var(--hover); color: #1a1a1a; border-color: #c7c7c7; text-decoration: none; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: #fef3f2; color: var(--danger); border-color: #f4b8b2; }
.perm-locked, .perm-locked:hover { opacity: .5; background: var(--card); }
button:focus-visible, a:focus-visible, .nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inputs */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"], select, textarea {
  background: var(--card); border: 1px solid #c9c9c9; color: #1a1a1a; border-radius: 8px; padding: 7px 10px; font-size: .88rem;
}
input:hover, select:hover { border-color: #a8a8a8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4,120,87,.15); }
input::placeholder { color: #9a9a9a; }
.form-grid label, .block-label { color: #303030; font-weight: 550; font-size: .82rem; }

/* Badges (Polaris "Badge"): tinted, sentence case, never shouting. */
.status, .tag, .pill { text-transform: none; letter-spacing: 0; font-weight: 550; font-size: .75rem; border-radius: 8px; padding: 2px 8px; }
.qty-pill { background: var(--surface-sunk); border-color: var(--card-edge); border-radius: 8px; font-variant-numeric: tabular-nums; }
.status.open { background: #fff1e3; color: #7a3e06; }
.status.completed, .status.closed { background: #e3f5ec; color: #0c5132; }

/* Banners: tinted surface, dark text, a coloured left rule for severity. */
.plan-banner, .demo-banner, .reorder-alert {
  border-radius: 12px; border: 1px solid var(--card-edge); box-shadow: var(--shadow); background: var(--card); color: #303030;
}
.plan-banner.warn, .reorder-alert { background: #fff8eb; border-color: #f5d9a6; color: #4a2d05; }
.plan-banner.stop { background: #fef3f2; border-color: #f4b8b2; color: #5c140e; }
.demo-banner { background: #eef4ff; border-color: #c7d7fe; color: #1e2a4a; }
.reorder-alert .ra-text span { color: #6b4a14; }

/* Scan directives keep their colour coding — it is the product — but on light. */
.directive { border-width: 1px; box-shadow: var(--shadow); background: var(--card); }
.directive.pick { background: #fff8eb; } .directive.stow { background: #eef4ff; }
.directive.ok { background: #effaf4; } .directive.err { background: #fef3f2; }
.directive .d-type { letter-spacing: .02em; }
.chip { background: var(--card); border-color: #d4d4d4; color: #303030; border-radius: 8px; }
.chip:hover { background: var(--hover); color: #1a1a1a; border-color: #bdbdbd; }

/* Modals */
.cc-modal, .ins-modal { background: rgba(26,26,26,.45); }
.cc-modal-card, .ins-card { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow-pop); border-radius: 14px; }

/* Utilisation bars */
.util-bar { background: #ebebeb; border: 0; height: 6px; }

/* Mobile tab bar */
.tab-bar { background: var(--card); border-top: 1px solid var(--card-edge); box-shadow: 0 -1px 3px rgba(0,0,0,.05); }

/* ---------- Analytics (rebuilt) ---------- */
#view-analytics .an-grid { display: grid; grid-template-columns: 1fr !important; gap: 16px; }
#view-analytics .an-panel { padding: 18px 20px 14px; margin: 0; }
#view-analytics .an-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
#view-analytics .an-head h2 { margin-bottom: 2px; font-size: 1rem; }
#view-analytics .an-sub { color: var(--muted); font-size: .82rem; margin: 0; }
#view-analytics .an-head select { width: auto; min-width: 200px; }
.an-figure { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 2px; }
.an-total { font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.an-delta { font-size: .8rem; font-weight: 600; padding: 2px 8px; border-radius: 8px; }
.an-delta.up { background: #e3f5ec; color: #0c5132; }
.an-delta.down { background: #fef3f2; color: #8e1f0b; }
.an-delta.flat { background: #f1f1f1; color: var(--muted); }
.an-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin: 8px 0 4px; }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; }
.an-legend i.lg-cur { border-color: #047857; }
.an-legend i.lg-prev { border-color: #b5b5b5; border-top-style: dashed; }
#an-bar-legend i { width: 10px; height: 10px; border: 0; border-radius: 3px; }
#view-analytics .an-chart { position: relative; margin-top: 8px; display: block; overflow: hidden; min-height: 0 !important; }
#view-analytics .an-chart > svg, #view-analytics .an-chart .chart { width: 100%; min-width: 0; height: auto; display: block; }
.chart .ch-lbl, .ch-lbl { fill: #616161; font-size: 12px; font-family: var(--font); }
.chart .ch-val, .ch-val { fill: #1a1a1a; font-size: 12px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .ch-cat { fill: #303030; font-size: 13px; }
.chart-bars .ch-hit:hover { fill: rgba(0,0,0,.025); }
.an-empty { position: absolute; inset: 0 0 30px 40px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; text-align: center; pointer-events: none; padding: 0 16px; }
.an-empty strong { font-size: .9rem; color: #1a1a1a; }
.an-empty span { font-size: .82rem; color: var(--muted); max-width: 380px; }
.an-foot { margin-top: 12px; }
.ch-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  background: #1a1a1a; color: #fff; font-size: .78rem; line-height: 1.35; padding: 6px 9px; border-radius: 8px;
  box-shadow: var(--shadow-pop); white-space: nowrap; }
.ch-tip strong { color: #fff; }

/* Segmented control (period picker) */
.seg { display: inline-flex; background: #e3e3e3; border-radius: 9px; padding: 2px; gap: 2px; }
.seg button { border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 550; color: #303030;
  padding: 5px 11px; border-radius: 7px; cursor: pointer; }
.seg button.on { background: #fff; box-shadow: var(--shadow); color: #1a1a1a; }
.seg button:hover:not(.on) { background: rgba(255,255,255,.5); }
#view-analytics .view-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  #view-analytics .an-head select { min-width: 0; width: 100%; }
  #view-analytics .an-panel { padding: 14px 14px 10px; }
}

/* The Guide button floats top-right; give it a clear header strip on desktop
   instead of letting it sit on top of the first banner. */
@media (min-width: 901px) { .main { padding-top: 62px; } }
.guide-btn { background: var(--card); color: #303030; border: 1px solid #d4d4d4; box-shadow: var(--shadow);
  font-weight: 550; font-size: .82rem; border-radius: 8px; }
.guide-btn:hover { background: var(--hover); border-color: #c7c7c7; }
@keyframes gd-pulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 4px rgba(4,120,87,.18); } }
/* Short codes (bins, orders, SKUs) never break mid-code. */
td.mono, .mono { white-space: nowrap; }
.qty-pill { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .78rem; }
.nowrap { white-space: nowrap; }

/* ---------- Simpler console ----------
 * The daily work carries icons; the folded groups below are plain text, so the
 * eye lands on Home / Scan / Receive / Orders / Items first. */
.nav-btn { display: flex; align-items: center; gap: 10px; }
.nav-ico { width: 18px; height: 18px; flex: none; color: #5c5c5c; }
.nav-btn.active .nav-ico { color: var(--accent); }
.nav-group .nav-btn { padding-inline-start: 38px; font-size: .84rem; }
.nav-group-title { padding-inline-start: 10px; margin-top: 2px; }

/* Sidebar footer: quiet text rows instead of a stack of five bordered buttons. */
.sidebar-foot { gap: 2px; padding-top: 10px; border-top: 1px solid #dcdcdc; }
.sidebar-foot .btn-ghost-sm, .sidebar-foot .picker-link {
  background: none; border: 0; box-shadow: none; text-align: start; justify-content: flex-start;
  padding: 6px 10px; font-size: .82rem; font-weight: 500; color: #4a4a4a; border-radius: 8px; width: 100%; }
.sidebar-foot .btn-ghost-sm:hover, .sidebar-foot .picker-link:hover { background: rgba(0,0,0,.05); color: #1a1a1a; text-decoration: none; }
.sidebar-foot #reset-demo { color: var(--danger); opacity: .85; }
.sidebar-foot small { display: none; } /* the storage note now lives in Settings → Team & plan */
.sidebar-foot .get-app-btn svg { margin-inline-end: 2px; }
.sidebar-foot .sync-pill { margin: 4px 0; }

/* Dashboard: four headline figures, the rest one tap away. */
#kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#kpis .kpi-more { display: none; }
#kpis.show-more .kpi-more { display: flex; }
.kpi-toggle { grid-column: 1 / -1; justify-self: start; background: none; border: 0; font: inherit; font-size: .84rem;
  font-weight: 600; color: var(--accent); cursor: pointer; padding: 2px 0; }
.kpi-toggle:hover { text-decoration: underline; }
@media (max-width: 900px) { #kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Import video */
.imp-video video { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--card-edge); background: #000; display: block; }

/* Chart readouts open BELOW the pointer: above it, the first row of a chart
   was cut off by the panel's top edge. The chart panels don't clip them. */
.ch-tip { transform: translate(-50%, 18px) !important; }
#view-analytics .an-panel, #view-analytics .an-chart { overflow: visible !important; }

/* The Guide button sits at the top of the page and scrolls away with it,
   instead of floating over whatever is at the top-right (e.g. the chart picker). */
.guide-btn { position: absolute; }
body.naming .guide-btn { display: none; }
.aud-who { font-weight: 600; color: #1a1a1a; }

/* Password strength (sign-up and reset) */
.pw-meter { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; margin: -2px 0 4px; }
.pw-bar { height: 6px; border-radius: 99px; background: #e5e5e5; overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .2s, background .2s; background: #b42318; }
.pw-bar span[data-score="1"] { background: #d97706; }
.pw-bar span[data-score="2"] { background: #ca8a04; }
.pw-bar span[data-score="3"], .pw-bar span[data-score="4"] { background: #047857; }
.pw-label { font-size: .78rem; font-weight: 600; color: var(--muted); min-width: 4.5em; text-align: end; }
.pw-checks { grid-column: 1 / -1; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--muted); }
.pw-checks li::before { content: "○ "; }
.pw-checks li.ok { color: #047857; }
.pw-checks li.ok::before { content: "✓ "; }
.pw-match { font-size: .78rem; min-height: 1em; margin-top: -4px; color: var(--muted); }
.pw-match.ok { color: #047857; } .pw-match.bad { color: #b42318; }
/* The terms checkbox sits beside its text (the column layout of the other
   auth labels was winning on specificity). */
.auth-form label.su-terms { flex-direction: row; align-items: flex-start; }

/* ---------- Wide screens ----------
 * Panels flow into columns as the screen allows: one on a phone, two on a
 * laptop, three on a 27-inch monitor. */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr));
  gap: 16px; align-items: start; }
.dash-grid > .panel { margin-bottom: 0; min-width: 0; overflow-x: auto; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 16px; align-items: start; }
.settings-grid > .panel { margin-bottom: 0; min-width: 0; }

/* ---------- Settings tabs ---------- */
.settings-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--card-edge); margin-bottom: 18px;
  overflow-x: auto; scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 14px; font: inherit; font-size: .92rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.settings-tab:hover { color: var(--text); }
.settings-tab[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.settings-empty { display: none; }
.settings-pane:has(#api-panel.hidden) .api-none,
.settings-pane:has(#referral-panel.hidden) .ref-none { display: block; }
@media (max-width: 620px) { .settings-tabs { justify-content: space-between; gap: 0; }
  .settings-tab { padding: 10px 4px; font-size: .82rem; } }

/* Item category: a search box over a grouped list. */
.cat-field { display: flex; flex-direction: column; gap: 6px; }
.cat-field > label { margin: 0; color: #303030; font-weight: 550; font-size: .82rem; }
.cat-hint { font-size: .78rem; line-height: 1.35; min-height: 1em; }
/* On a phone the item form is one column: two side by side cut off names. */
@media (max-width: 520px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Who picks an order. */
.no-assign { margin: 4px 0 12px; max-width: 420px; }
.no-assign-note { font-size: .82rem; margin: 4px 0 0; }
.order-assign { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.order-assign select { font: inherit; font-size: .82rem; padding: 4px 8px; border: 1px solid var(--card-edge); border-radius: 6px; background: var(--card); color: var(--text); max-width: 200px; }
.tag-picker { background: var(--surface-sunk); color: var(--text); }
.order-card.order-mine { box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }

/* One-file import. */
.qi-panel .import-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.file-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.file-btn-primary:hover { background: var(--accent-dark); }
.qi-note { font-size: .82rem; margin-top: 10px; }
.qi-box { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--card-edge); }
.qi-box h3 { font-size: 1rem; margin-bottom: 6px; }
.qi-map-wrap { overflow-x: auto; margin: 10px 0; }
.qi-map td, .qi-map th { vertical-align: middle; }
.qi-map select { font: inherit; font-size: .88rem; padding: 6px 8px; border: 1px solid var(--card-edge); border-radius: 8px; background: var(--card); color: var(--text); min-width: 170px; }
.qi-summary { font-size: 1.02rem; font-weight: 600; margin: 4px 0 8px; }
.qi-errors { background: #fff6e5; border: 1px solid #f0c674; border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: .88rem; }
.qi-errors ul { margin: 6px 0 0 18px; }
.import-advanced { margin-top: 8px; }
.import-advanced > summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--muted); }
.import-advanced[open] > summary { color: var(--text); }
/* Phones: room under the last thing on the page for the bottom tab bar.
 * Kept last — the full-width .main rule above set its own bottom padding and
 * had quietly overridden this, leaving each page's last control under the bar. */
@media (max-width: 900px) { .main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }

/* Plans and card payment. */
.bill-period { display: inline-flex; border: 1px solid var(--card-edge); border-radius: 8px; overflow: hidden; }
.bill-per { background: var(--card); border: 0; padding: 7px 12px; font: inherit; font-size: .84rem; cursor: pointer; color: var(--muted); }
.bill-per[aria-pressed="true"] { background: var(--text); color: #fff; }
.bill-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 12px; }
.bill-card { border: 1px solid var(--card-edge); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bill-card.bill-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bill-card h3 { font-size: 1rem; display: flex; gap: 8px; align-items: center; }
.bill-price { font-size: 1.5rem; font-weight: 700; }
.bill-price span { font-size: .85rem; font-weight: 500; color: var(--muted); }
.bill-card ul { margin: 0 0 6px 18px; color: var(--muted); font-size: .86rem; flex: 1; }
.bill-card .btn-primary, .bill-card .btn-ghost-sm { align-self: flex-start; }
.bill-test { background: #fff6e5; border: 1px solid #f0c674; border-radius: 8px; padding: 8px 12px; font-size: .86rem; }
.bill-note { font-size: .82rem; margin-top: 12px; }
.plan-banner.ok { background: #ecfdf5; border-color: #a7f3d0; }

.ni-lookup { display: block; font-size: .8rem; min-height: 1em; margin-top: 4px; }

/* Suppliers / Clients */
.sc-part { margin: 22px 0 10px; font-size: 1.15rem; }
.rp-sup-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.rp-sup-list li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--card-edge); }
.rp-sup-list li:last-child { border-bottom: 0; }
.export-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.export-company-label { font-size: 13px; color: var(--muted, #6b7280); }
.export-company { min-width: 200px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--line, #d1d5db); border-radius: 8px; background: var(--card, #fff); font: inherit; }

/* Equipment */
.equip-cta { margin: -4px 0 12px; font-size: .9rem; color: var(--muted); }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.equip-card { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.equip-card h2 { margin: 0; }
.equip-card label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.equip-card .btn-ghost-sm, .equip-card .btn-primary { align-self: flex-start; margin-top: auto; }
.equip-price { font-weight: 600; margin: 0; }
.equip-use { margin: -2px 0 0; font-size: .82rem; }
.equip-kit { border: 2px solid var(--accent); }
.equip-form { margin-top: 12px; }
.equip-cart-table input { width: 90px; }
.equip-req { border-bottom: 1px solid var(--card-edge); padding: 10px 0; }
.equip-req:last-child { border-bottom: 0; }
.equip-req ul { margin: 6px 0; padding-left: 18px; }

/* Labels on StowFlow sticker sheets: 3 × 8 pre-cut labels, 70 × 37 mm, A4. */
.label-paper label { display: flex; flex-direction: column; gap: 4px; max-width: 520px; font-size: .9rem; }
.label-sheet.sheet-24 { display: block; }
.sheet-24 .sheet-page { display: grid; grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37mm; width: 210mm; gap: 0;
  margin-bottom: 16px; background: #fff; outline: 1px solid var(--card-edge); padding-top: .5mm; }
.sheet-24 .label { border-radius: 0; padding: 2.5mm 2mm 1mm; overflow: hidden; outline: 1px dashed #ccc; }
.sheet-24 .label .label-name { font-size: 8pt; margin-bottom: 1mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-24 .label svg { max-height: 26mm; }
@media print {
  .label-sheet.sheet-24 .label { border: 0; outline: 0; }
  .sheet-24 .sheet-page { outline: 0; margin: 0; break-after: page; }
  .sheet-24 .sheet-page:last-child { break-after: auto; }
  body:has(.sheet-24) { margin: 0; }
}
@page { size: A4; }

/* Equipment: pictures first, tap to choose, English + Arabic */
.ar { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
h1 .ar, h2 .ar { color: var(--muted); font-weight: 600; margin-inline-start: 6px; }
.eq-lede .ar { display: block; margin-top: 2px; }
.eq-pic-wrap { background: var(--bg); border-radius: 10px; display: flex; justify-content: center; padding: 6px; }
.eq-pic { width: 100%; max-width: 220px; height: auto; display: block; }
.equip-card h2 { font-size: 1.15rem; }
.eq-line { margin: 0; color: var(--muted); font-size: .9rem; }
.eq-line .ar, .eq-q .ar { display: block; }
.eq-q { margin: 4px 0 0; font-weight: 600; font-size: .9rem; }
.eq-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-choices-4 { display: grid; grid-template-columns: repeat(2, 1fr); }
.eq-choice { flex: 1 1 0; min-width: 60px; min-height: 48px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; border: 2px solid var(--card-edge); border-radius: 10px; background: var(--card, #fff); cursor: pointer; font: inherit; color: inherit; }
.eq-choice .eq-pic { max-width: 70px; }
.eq-choice small { color: var(--muted); font-size: .72rem; }
.eq-choice.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.eq-big { font-size: 1.3rem; }
.eq-swatch { width: 26px; height: 14px; border-radius: 3px; }
.eq-swatch-wood { background: repeating-linear-gradient(90deg, #d2a466 0 7px, #8a5f2c 7px 9px); }
.eq-swatch-plastic { background: #4a5563; }
.eq-qty { display: flex; align-items: center; gap: 6px; }
.eq-qty button { width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--card-edge); background: var(--card, #fff); font-size: 1.4rem; font-weight: 700; cursor: pointer; color: inherit; }
.eq-qty input { width: 80px; height: 44px; text-align: center; font-size: 1.05rem; font-weight: 700; }
.eq-add { font-size: 1rem; padding: 10px 18px; }
.eq-add .ar, #eq-kit .ar { margin-inline-start: 4px; }
.eq-cart { display: grid; gap: 8px; }
.eq-cart-row { display: grid; grid-template-columns: 80px 1fr 80px 44px; gap: 10px; align-items: center; border-bottom: 1px solid var(--card-edge); padding-bottom: 8px; }
.eq-cart-row input { width: 80px; height: 40px; text-align: center; font-weight: 700; }
.eq-thumb .eq-pic { max-width: 80px; }
.eq-send-btn { font-size: 1.05rem; padding: 12px 22px; }
@media (max-width: 520px) { .eq-cart-row { grid-template-columns: 60px 1fr 64px 40px; } .eq-cart-row input { width: 64px; } }
.equip-price .ar { display: block; }
/* Equipment is UAE-only: everything that points at it hides elsewhere. */
body.no-equipment [data-open-equipment], body.no-equipment .equip-cta,
body.no-equipment .wz-sf, body.no-equipment #wz-sf-note { display: none !important; }
/* Delete this warehouse */
.danger-panel { border: 1px solid rgba(180,35,24,.35); }
.danger-panel h2 { color: var(--danger); }
.danger-confirm { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin: 10px 0; font-size: .9rem; }
.btn-danger-solid { background: var(--danger); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; }
/* Tap-to-scan: items with work waiting */
.chip-tag { font-size: .68rem; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-inline-start: 4px; }
.chip-stow { background: rgba(29,78,216,.14); color: #1d4ed8; }
.chip-pick { background: rgba(4,120,87,.16); color: #03634a; }
.chip-both { background: rgba(138,69,7,.14); color: #8a4507; }
.chips-recheck { width: 100%; margin: 8px 0 0; font-size: .85rem; }

/* Stock check coverage: red / amber / green by share of places counted. */
.cc-rag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .95rem; margin-bottom: 14px; }
.cc-rag::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.cc-rag-green { background: rgba(4,120,87,.14); color: #03634a; }
.cc-rag-amber { background: rgba(217,119,6,.16); color: #8a4507; }
.cc-rag-red { background: rgba(180,35,24,.13); color: #9b1c12; }