:root{--press-scale:.97;--press-opacity:.82;--bg:#121417;--panel:#1B1F24;--border:#2A2F36;--border-h:#3A3F46;--text:#E6E8EB;--text2:#A1A7B3;--muted:#6B7280;--blue:#3B82F6;--blue-bg:rgba(59,130,246,.08);--green:#22C55E;--green-bg:rgba(34,197,94,.08);--red:#EF4444;--red-bg:rgba(239,68,68,.08);--amber:#F59E0B;--amber-bg:rgba(245,158,11,.08);--purple:#8B5CF6;--purple-bg:rgba(139,92,246,.08);--stripe:rgba(255,255,255,.015);--hover:rgba(255,255,255,.04);--font:'Inter',-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;overflow:hidden}

.shell{display:grid;grid-template-columns:240px 1fr;height:100vh}
.shell.collapsed{grid-template-columns:64px 1fr}

.sidebar{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;z-index:10}
.sidebar::-webkit-scrollbar{width:0}
.side-header{padding:20px 16px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.side-logo{width:36px;height:36px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;flex-shrink:0}
.side-brand{font-size:15px;font-weight:700}
.side-brand small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.collapsed .side-brand{display:none}
.side-nav{padding:12px 8px;flex:1}
.nav-section{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:16px 12px 6px}
.collapsed .nav-section{display:none}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--text2);font-size:14px;font-weight:500;transition:all .15s;margin-bottom:2px}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item.active{background:var(--blue-bg);color:var(--blue)}
.nav-item svg{width:20px;height:20px;flex-shrink:0}
.collapsed .nav-label{display:none}
.side-footer{padding:12px 8px;border-top:1px solid var(--border)}
.collapse-btn{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:13px;background:none;border:none;width:100%;font-family:var(--font)}
.collapse-btn:hover{background:var(--hover);color:var(--text)}
.collapse-btn svg{width:20px;height:20px;flex-shrink:0;transition:transform .2s}
.collapsed .collapse-btn svg{transform:rotate(180deg)}

.main{display:grid;grid-template-rows:60px auto 1fr;overflow:hidden}
.topbar{background:var(--panel);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;gap:16px}
.topbar-title{font-size:16px;font-weight:600}
.topbar-search{flex:1;max-width:400px;position:relative}
.topbar-search input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:8px 12px 8px 36px;border-radius:8px;font-family:var(--font);font-size:13px;outline:none}
.topbar-search input:focus{border-color:var(--blue)}
.topbar-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.topbar-sep{flex:1}
.topbar-wh{font-size:13px;color:var(--text2);display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg);border-radius:6px;border:1px solid var(--border)}
.topbar-wh svg{width:16px;height:16px}
.topbar-time{font-size:13px;color:var(--text2);font-variant-numeric:tabular-nums;min-width:80px}
.topbar-user{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 10px;border-radius:8px}
.topbar-user:hover{background:var(--hover)}
.topbar-avatar{width:32px;height:32px;border-radius:50%;background:var(--blue-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--blue)}
.topbar-user-info .name{font-size:13px;font-weight:600}
.topbar-user-info .role{font-size:11px;color:var(--muted)}

.page{overflow-y:auto;padding:24px;display:none;flex-direction:column;gap:20px}
.page.active{display:flex}
/* Flex children shrink by default. In a scrolling flex COLUMN that means any page
   whose content is taller than the viewport has its blocks squashed BELOW their
   natural height — and .card{overflow:hidden} then clips the title and buttons
   clean off. It showed up on Settings (two short cards crushed to empty bars),
   but it was latent on every page: add enough content and things start collapsing.
   Children keep their height; the PAGE scrolls. */
.page > *{flex-shrink:0;}
.page::-webkit-scrollbar{width:5px}
.page::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px;transition:border-color .2s}
.kpi:hover{border-color:var(--border-h)}
.kpi-label{font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.kpi-val{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;margin-bottom:4px}
.kpi-delta{font-size:12px;color:var(--text2)}

.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.card-title{font-size:14px;font-weight:600}
.card-badge{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin-left:auto}

.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:12px 16px;text-align:left;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;line-height:1.5}
.data-table tr:nth-child(even) td{background:var(--stripe)}
.data-table tr:hover td{background:var(--hover)}
.data-table th.right,.data-table td.right{text-align:right}

.chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;display:inline-block}
.chip-new{background:rgba(255,140,0,.15);color:#ffa657;border:1px solid rgba(255,140,0,.45);font-weight:700}
.chip-active{background:var(--blue-bg);color:var(--blue)}
.chip-success{background:var(--green-bg);color:var(--green)}
.chip-warning{background:var(--amber-bg);color:var(--amber)}
.chip-danger{background:var(--red-bg);color:var(--red)}

.btn{padding:10px 20px;border-radius:8px;font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#2563EB}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-h);color:var(--text)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.form-input,.form-select{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:8px;font-family:var(--font);font-size:14px;outline:none}
.form-input:focus{border-color:var(--blue)}
.form-row{display:grid;gap:16px}
.form-row-2{grid-template-columns:1fr 1fr}
.form-row-3{grid-template-columns:1fr 1fr 1fr}
.form-row-4{grid-template-columns:1fr 1fr 1fr 1fr}

.lp-badge{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px}
.lp-original{background:var(--blue-bg);color:var(--blue)}
.lp-child{background:var(--amber-bg);color:var(--amber)}

.detail-panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:20px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-label{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
.detail-value{font-size:14px;font-weight:600}

.grid-2{display:grid;grid-template-columns:1fr 380px;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

.page-header{display:flex;align-items:center;gap:16px}
.page-title{font-size:20px;font-weight:700}
.page-subtitle{font-size:13px;color:var(--text2);margin-top:2px}

.empty-state{padding:40px;text-align:center;color:var(--muted);font-size:13px}

.scroll-area{max-height:320px;overflow-y:auto}
.scroll-area::-webkit-scrollbar{width:4px}
.scroll-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.workflow-step{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;margin-bottom:4px;font-size:13px;font-weight:500}
.workflow-step.done{color:var(--green)}
.workflow-step.current{background:var(--blue-bg);color:var(--blue)}
.workflow-step.pending{color:var(--muted)}
.workflow-icon{width:22px;text-align:center;font-size:14px}
.wf-current-label{margin-left:auto;font-size:11px;font-weight:600;color:var(--blue)}

.bar-chart{display:flex;align-items:flex-end;gap:6px;height:70px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar{width:100%;border-radius:4px 4px 0 0;cursor:pointer;transition:opacity .15s}
.bar:hover{opacity:.7}
.bar-day{font-size:11px;color:var(--muted)}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kpi{animation:fadeIn .3s both}
.kpi:nth-child(1){animation-delay:.03s}
.kpi:nth-child(2){animation-delay:.06s}
.kpi:nth-child(3){animation-delay:.09s}
.kpi:nth-child(4){animation-delay:.12s}
.kpi:nth-child(5){animation-delay:.15s}
.kpi:nth-child(6){animation-delay:.18s}

.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:90vw;max-height:85vh;display:flex;flex-direction:column;animation:fadeIn .2s ease}
.modal-head{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.modal-title{font-size:16px;font-weight:700}
.modal-body{padding:24px;overflow-y:auto;flex:1}
.modal-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}

.cb-wrap{position:relative;width:100%}
.cb-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:10px 32px 10px 14px;border-radius:8px;font-family:var(--font);font-size:14px;outline:none;cursor:pointer;text-align:left;transition:border-color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-input:focus,.cb-input.open{border-color:var(--blue)}
.cb-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:11px;transition:transform .15s}
.cb-input.open+.cb-arrow{transform:translateY(-50%) rotate(180deg)}
.cb-drop{position:fixed;background:var(--panel);border:1px solid var(--border);border-radius:8px;z-index:99999;max-height:220px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.cb-search{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.cb-search input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:6px;font-family:var(--font);font-size:13px;outline:none}
.cb-search input:focus{border-color:var(--blue)}
.cb-list{overflow-y:auto;flex:1}
.cb-opt{padding:9px 14px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px}
.cb-opt:hover,.cb-opt.focused{background:var(--hover)}
.cb-opt.selected{color:var(--blue);font-weight:600}
.cb-opt-empty{padding:12px 14px;font-size:13px;color:var(--muted);text-align:center}
.sku-lots{background:rgba(0,0,0,.2)}

/* === Portal mode (Phase 3) ================================================ */
/* body.portal-mode is added by bootPortal() in js/portal.js when the JWT
   carries userType='client'. It hides the ops sidebar block + ops-only
   buttons, and reveals the portal sidebar block + portal-only buttons. */
.nav-portal-only{display:none}
.portal-only{display:none !important}
body.portal-mode .nav-ops-only{display:none}
body.portal-mode .nav-portal-only{display:block}
body.portal-mode .ops-only{display:none !important}
body.portal-mode .btn.portal-only,
body.portal-mode .ui-btn.portal-only{display:inline-flex !important}
/* Defensive: if a portal user ever lands on page-dashboard (e.g. browser
   back/forward, hand-typed nav), keep the ops Dashboard widgets — KPIs,
   Pick Waves, Performance, Alerts, Dock Schedule, etc. — completely hidden.
   The page is also kept inert because portal-mode never calls loadDashboard. */
body.portal-mode #page-dashboard{display:none !important}

/* Portal banner — big client name shown at the top of every portal page.
   Hidden by default; revealed only when body.portal-mode is set. The banner
   sits between the topbar and the page content (3-row grid in .main). */
.portal-banner{display:none}
body.portal-mode .portal-banner{
  display:flex;align-items:center;gap:14px;
  padding:18px 28px;
  background:linear-gradient(180deg, var(--blue-bg) 0%, transparent 100%);
  border-bottom:1px solid var(--border);
}
.portal-banner-name{font-size:30px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.portal-banner-sub {font-size:13px;color:var(--text2);margin-top:2px}

/* ---- Orders detail (D3a) ---- */
.ord-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start;}
.ord-info{padding:18px 20px;margin-bottom:16px;}
.ord-shipto{border-top:1px solid var(--border);margin-top:14px;padding-top:14px;}
.ord-shipto-name{font-weight:600;font-size:15px;margin-bottom:4px;}
.ord-shipto-addr{color:var(--text2);font-size:13px;line-height:1.7;}
/* Workflow action stack: primary actions full-width, secondary side by side,
   destructive fenced below a divider. */
.ord-actions{padding:0 16px 16px;}
.ord-act-primary{display:flex;width:100%;justify-content:center;padding:11px;
  font-size:var(--fs-ui);font-weight:700;margin-bottom:8px;}
.ord-act-blocked{opacity:.5;cursor:not-allowed;}
.ord-act-row{display:flex;gap:6px;margin-top:4px;}
.ord-act-row .ui-btn{flex:1;justify-content:center;}
.ord-act-danger-zone{border-top:1px solid var(--border);margin-top:14px;padding-top:10px;}
.ord-act-danger-zone .ui-btn{display:flex;width:100%;justify-content:center;
  background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn);}
/* Print menu */
.ord-print-wrap{position:relative;}
.ord-print-menu{display:none;position:absolute;top:100%;right:0;margin-top:4px;z-index:100;
  background:var(--panel);border:1px solid var(--border-h);border-radius:var(--radius);
  padding:6px;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.45);}
.ord-print-menu.open{display:block;}
.ord-print-menu .ui-btn{display:flex;width:100%;justify-content:flex-start;border:none;background:none;}
.ord-print-menu .ui-btn:hover{background:var(--hover);}
/* Pick list */
.ord-pick-track{width:140px;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;}
.ord-pick-bar{height:100%;width:0%;background:var(--st-ok);transition:width .25s;}
.ord-pick-foot{padding:12px 16px;border-top:1px solid var(--border);}
/* Sized inputs inside tables/rows.
   NOTE THE `.ui-input` IN EVERY SELECTOR. These rules live BEFORE the design
   system block, and `.ui-input { width:100% }` has the same specificity — so a
   bare `.ord-pick-qty { width:96px }` loses on source order and the input
   stretches to fill its cell, swallowing the columns next to it. Pairing the
   classes wins on specificity regardless of order. */
.ui-input.ord-pick-qty{width:96px;padding:4px 8px;display:inline-block;margin-right:6px;
  font-variant-numeric:tabular-nums;text-align:right;}
.ord-pick-handling{margin:6px 0 0;padding:5px 8px;font-size:12px;}

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

/* ---- Print menu section label ---- */
.ord-print-sep{font-size:var(--fs-caps);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding:8px 12px 4px;
  border-top:1px solid var(--border);margin-top:4px;}

/* ---- Dashboard (D6c) ---- */
.dash-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 20px;
  border-bottom:1px solid var(--border);font-size:var(--fs-body);}
.dash-alert-body{display:flex;flex-direction:column;gap:2px;}
.dash-alert-title{font-weight:600;}
.dash-row{display:flex;align-items:center;gap:10px;padding:10px 20px;
  border-bottom:1px solid var(--border);font-size:var(--fs-body);}
.dash-bar-row{display:flex;align-items:center;gap:12px;padding:10px 20px;
  border-bottom:1px solid var(--border);font-size:var(--fs-body);}
.dash-bar-label{width:64px;font-weight:600;}
.dash-bar-track{flex:1;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;}
.dash-bar-fill{display:block;height:100%;background:var(--blue);border-radius:3px;}
.dash-bar-val{width:48px;text-align:right;color:var(--text2);}

/* ---- Severity chips (hazmat handling tier) ----
   These classes were referenced by severityChip() but NEVER DEFINED — the badge
   was legible only because it carried an emoji. A hazmat tier is not decoration:
   it tells a picker what PPE to wear. Colour AND word, so it survives a
   colour-blind picker and a black-and-white pick slip. */
.sev-chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:99px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid;white-space:nowrap;vertical-align:middle;}
.sev-chip-critical{background:rgba(204,31,31,.14);color:#ff7b7b;border-color:#cc1f1f;}
.sev-chip-high    {background:rgba(204,102,0,.14);color:#ffab5e;border-color:#cc6600;}
.sev-chip-moderate{background:rgba(214,167,0,.14);color:#e8c14a;border-color:#d6a700;}
.sev-chip-standard{background:rgba(58,138,58,.14);color:#7fd07f;border-color:#3a8a3a;}
.sev-chip-lg{font-size:13px;padding:3px 12px;letter-spacing:.06em;}

/* ---- Reports (D6b / R-B) ----
   The catalog is a working index: grouped rows, dense, no decoration. You come
   here to run a report, not to look at it. */
.rep-search{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:16px 20px;}
.rep-group{margin-bottom:16px;}
.rep-row{display:grid;grid-template-columns:280px 1fr auto;align-items:center;gap:16px;
  width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--border);
  padding:12px 20px;cursor:pointer;font-family:var(--font);color:var(--text);}
.rep-row:hover{background:var(--hover);}
.rep-row-title{font-size:var(--fs-ui);font-weight:600;}
.rep-row-desc{font-size:var(--fs-body);color:var(--text2);line-height:1.5;}
.rep-row-go{font-size:var(--fs-body);font-weight:600;color:var(--blue);white-space:nowrap;}
@media (max-width: 900px){
  .rep-row{grid-template-columns:1fr;gap:4px;}
  .rep-row-go{display:none;}
}

/* ---- User certifications (D6a) ---- */
.cert-card{border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:8px;background:var(--panel);}
.cert-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;
  font-size:var(--fs-body);}

/* ---- Compliance (D5d) ---- */
.cmp-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;
  font-size:var(--fs-body);}
.cmp-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12px;color:var(--text2);margin-bottom:4px;}
.cmp-clear{text-align:center;padding:40px 20px;}
.cmp-clear-mark{font-size:44px;color:var(--st-ok);margin-bottom:10px;}
.cmp-clear-title{font-size:16px;font-weight:600;}

/* ---- Intake (D5c) ---- */
.intake-legend{display:flex;gap:10px;font-size:11px;color:var(--text2);align-items:center;}
.intake-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;}

/* ---- Client KPI targets (D5b) ---- */
.ui-input.kpi-num{width:90px;display:inline-block;padding:3px 6px;
  text-align:right;font-variant-numeric:tabular-nums;}

/* ---- Receiving (D4e) ---- */
.rec-line{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;}
.rec-line-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-size:var(--fs-body);font-weight:600;}
.rec-line-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);}
.rec-line-fields .ui-field{margin-bottom:0;}
.ui-input.pl-lot{width:130px;}
.ui-input.pl-exp{width:160px;}
@media (max-width: 900px){ .rec-line-fields{grid-template-columns:1fr 1fr;} }

/* ---- Item-master form (D4d-2) ---- */
.item-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.item-checks{display:flex;gap:18px;flex-wrap:wrap;}
.ui-check{display:flex;align-items:center;gap:6px;font-size:var(--fs-body);cursor:pointer;}
.ui-check input{width:16px;height:16px;accent-color:var(--blue);}
.ui-check-warn{color:var(--st-warn);font-weight:600;}
.item-hazmat{border:1px solid var(--st-warn);border-radius:var(--radius);
  padding:14px;margin-top:14px;background:var(--bg);}
.item-sds-status{font-size:12px;margin:8px 0;}
.item-sds-intel{font-size:12px;margin:8px 0;border-radius:var(--radius-sm);
  padding:10px;border:1px solid var(--border);}
.item-sds-card{background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 12px;font-size:12px;margin:8px 0;}
.item-audit{font-size:12px;margin-top:10px;max-height:280px;overflow-y:auto;}

/* ---- Withdrawn document row (kept for audit, visibly retired) ---- */
.ui-file-gone{opacity:.55;}
.ui-file-gone .ui-file-name{text-decoration:line-through;}

/* ---- Inventory detail (D4c) ---- */
.inv-sec{margin-bottom:var(--sp-3);}
.inv-sec-body{padding:14px 18px;}
.inv-lp-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}

/* ---- Case break (D4b) ---- */
.cb-results{display:none;background:var(--bg);border:1px solid var(--border-h);
  border-radius:var(--radius);margin-bottom:var(--sp-3);max-height:220px;overflow-y:auto;}
.cb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--border);font-size:var(--fs-body);}
.cb-row:last-child{border-bottom:none;}
.cb-row:hover{background:var(--hover);}
.cb-row-name{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-lp{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:var(--sp-3);}
.cb-lp-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:var(--fs-body);}
.ui-err-text{color:var(--st-danger);}

/* ---- New-order modal (D3e) ---- */
.no-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
.no-section-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.no-search{max-width:260px;}
.no-results{display:none;background:var(--bg);border:1px solid var(--border-h);
  border-radius:var(--radius);margin-bottom:12px;max-height:340px;overflow-y:auto;}
.no-sku{border-bottom:1px solid var(--border);}
.no-sku:last-child{border-bottom:none;}
.no-sku-row{display:flex;align-items:center;gap:12px;padding:9px 14px;cursor:pointer;
  font-size:var(--fs-body);}
.no-sku-row:hover{background:var(--hover);}
.no-sku-arrow{color:var(--muted);font-size:10px;width:10px;}
.no-sku-name{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.no-sku-avail{color:var(--st-ok);font-weight:600;font-size:12px;white-space:nowrap;}
.no-lots{display:none;padding:0 14px 10px 24px;background:var(--stripe);}
.no-lots.open{display:block;}

/* ---- Edit-order modal (D3d) ---- */
.eo-section{border-top:1px solid var(--border);margin:16px 0;padding-top:14px;}
.eo-addr-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);}
.eo-lines-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.eo-line{display:flex;align-items:flex-start;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--border);}
.eo-line-info{flex:1;min-width:0;}
.eo-line-lock{font-size:11px;color:var(--st-warn);margin-top:2px;}
.ui-input.eo-line-qty{width:96px;flex:0 0 auto;text-align:right;padding:5px 8px;
  font-variant-numeric:tabular-nums;}
.eo-add-line{background:var(--bg);border-radius:var(--radius-sm);padding:12px;margin-top:8px;}
.eo-add-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:6px;}
.eo-add-sku{flex:2;min-width:180px;margin-bottom:0;position:relative;}
.ui-input.eo-add-qty{width:96px;flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums;}
.ui-input.eo-add-uom{width:90px;flex:0 0 auto;}
.eo-sku-results{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;
  background:var(--panel);border:1px solid var(--border-h);border-radius:var(--radius-sm);
  margin-top:4px;max-height:200px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.eo-sku-pick{padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;
  font-size:var(--fs-body);}
.eo-sku-pick:last-child{border-bottom:none;}
.eo-sku-pick:hover{background:var(--hover);}

/* ---- Ship modal (D3c) ---- */
.ship-dims{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);}
.ship-rates-bar{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-1) 0 var(--sp-3);}
.ship-rates{border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:var(--sp-3);max-height:220px;overflow-y:auto;}
.ship-rate{display:flex;align-items:center;gap:var(--sp-3);padding:9px 12px;
  border-bottom:1px solid var(--border);cursor:pointer;font-size:var(--fs-body);}
.ship-rate:last-child{border-bottom:none;}
.ship-rate:hover{background:var(--hover);}
.ship-rate input{accent-color:var(--blue);}
.ship-rate-svc{flex:1;}

/* ---- Allocation panel (D3b) ---- */
.alloc-line{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:12px;}
.alloc-line-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-size:var(--fs-body);font-weight:600;}
.alloc-line-tools{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.alloc-line-tools .ui-input{max-width:260px;}
.alloc-chk{width:16px;height:16px;accent-color:var(--blue);}
.ui-input.alloc-qty{width:96px;padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums;}
.alloc-foot{display:flex;gap:8px;margin-top:16px;}

/* ---- Portal home: card hub (D2c) ---- */
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.portal-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px;
  font-family:var(--font);cursor:pointer;transition:border-color .15s,transform .15s;}
.portal-card:hover{border-color:var(--blue);transform:translateY(-1px);}
.portal-card-go{margin-top:10px;font-size:var(--fs-body);font-weight:600;color:var(--blue);}
.portal-card-title{font-size:16px;font-weight:700;color:var(--text);}
.portal-card-desc{font-size:13px;color:var(--text2);line-height:1.5;}

/* ---- Portal new order (D2c) ---- */
.pno-grid{display:grid;grid-template-columns:minmax(360px,420px) 1fr;gap:20px;align-items:start;}
.pno-shipto{position:sticky;top:0;}
.pno-form{padding:16px 20px;}
.pno-form .ui-field:last-child{margin-bottom:0;}
.pno-lines{overflow:visible;position:relative;}
.pno-search{max-width:280px;}
.pno-lines-scroll{max-height:min(620px,55vh);overflow:auto;}
.pno-attach{padding:14px 20px 16px;}
.pno-results{display:none;position:absolute;top:62px;left:20px;right:20px;z-index:50;
  background:var(--bg);border:1px solid var(--border-h);border-radius:var(--radius);
  max-height:min(620px,60vh);overflow-y:auto;box-shadow:0 12px 32px rgba(0,0,0,.45);}
.pno-sku{border-bottom:1px solid var(--border);}
.pno-sku:last-child{border-bottom:none;}
.pno-sku-row{display:flex;align-items:center;gap:12px;padding:9px 14px;cursor:pointer;
  font-size:var(--fs-body);}
.pno-sku-row:hover{background:var(--hover);}
.pno-sku-arrow{color:var(--muted);font-size:10px;width:10px;}
.pno-sku-name{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pno-sku-avail{color:var(--st-ok);font-weight:600;font-size:12px;white-space:nowrap;}
.pno-lots{display:none;padding:0 14px 10px 24px;background:var(--stripe);}
.pno-lots.open{display:block;}
.pno-add{color:var(--blue);font-weight:600;font-size:12px;}
.ui-input.pno-qty{width:96px;padding:4px 8px;text-align:right;font-variant-numeric:tabular-nums;}
.pno-qty-over{border-color:var(--st-warn);color:var(--st-warn);}
.pno-submitbar{position:sticky;bottom:0;z-index:10;margin-top:auto;
  display:flex;align-items:center;gap:10px;
  background:var(--bg);border-top:1px solid var(--border);padding:14px 20px;}

/* Portal new-order page two-column layout — stack on narrow screens. */
@media (max-width: 1100px) {
  .pno-grid { grid-template-columns: 1fr; }
  .pno-shipto { position: relative; }
}

/* ===========================================================
   FLOOR MODE — phone-first stripped-down ops shell.
   Activated by setting body.floor-mode (auto on phones for ops
   users, opt-in via ?floor=1 URL param). Hides the desktop
   sidebar / topbar / dashboard pages; shows only the
   page-floor* pages.
=========================================================== */
body.floor-mode .sidebar,
body.floor-mode .topbar,
body.floor-mode .portal-banner,
body.floor-mode #portalBanner {
  display: none !important;
}
body.floor-mode .shell {
  grid-template-columns: 1fr !important;
  height: 100vh;      /* fallback */
  height: 100dvh;     /* wins where supported: tracks the Android URL bar, so .main's overflow:hidden never clips the bottom */
  padding-top:    env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
body.floor-mode .main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
body.floor-mode .page {
  padding: 0 !important;
  height: 100%;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background: var(--bg);
}
body.floor-mode .page.active {
  display: flex !important;
}
/* Big tappable cards on the floor home */
body.floor-mode .floor-card:active {
  transform: scale(0.98);
  border-color: var(--blue) !important;
}
body.floor-mode .floor-card { transition: transform .08s, border-color .08s; }

/* ===========================================================
   PHONE-SIZED PICKER (≤600px wide)
   The picker UI is sized for tablets by default. On a phone
   the cards / fonts / paddings need to compress so the picker
   line fits without scrolling. !important is needed because
   most picker styles are inline in picker.js render.
=========================================================== */
@media (max-width: 600px) {
  /* Picker shell — explicit viewport height so flex children + body
     overflow-y:auto behave correctly. 100dvh respects mobile browser
     chrome (URL bar etc) better than 100vh. box-sizing:border-box so
     the safe-area padding is included in the height (otherwise the
     shell ends up taller than viewport and the footer falls below). */
  #pickerShell {
    height: 100dvh !important;
    height: 100vh; /* fallback for browsers without dvh support */
    padding-top:    env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box !important;
  }
  /* Footer must NOT shrink — flex parent might try to compress it.
     flex-shrink:0 keeps it pinned at its natural height, body
     overflow-y:auto (set inline) handles the scroll. */
  #pickerFooter {
    flex-shrink: 0 !important;
  }
  /* Same protection for the banners up top */
  #pickerHazBanner, #pickerHandlingBanner, #pickerVerifyBanner, #pickerStatus {
    flex-shrink: 0 !important;
  }
  #pickerShell > div:first-child {
    flex-shrink: 0 !important;
  }
  /* Header: tighter, smaller text */
  #pickerShell > div:first-child {
    padding: 10px 12px !important;
  }
  #pickerOrderNum { font-size: 15px !important; }
  #pickerOrderSub { font-size: 11px !important; }
  #pickerProgress { font-size: 12px !important; }
  #pickerShell button { font-size: 13px !important; }

  /* Top banners (hazmat / handling) */
  #pickerHazBanner, #pickerHandlingBanner {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Body padding */
  #pickerBody { padding: 10px !important; }

  /* Cards inside the body — tighter padding, smaller corners */
  #pickerBody > div {
    padding: 10px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  /* Card labels */
  #pickerBody [style*="text-transform:uppercase"] {
    font-size: 9px !important;
  }
  /* Big location number — was 42px, way too big on phone */
  #pickerBody [style*="font-size:42px"] { font-size: 28px !important; }
  /* SKU code — was 24px */
  #pickerBody [style*="font-size:24px"] { font-size: 18px !important; }
  /* SKU name */
  #pickerBody [style*="font-size:16px"] { font-size: 13px !important; }
  /* LP / Lot values — were 18px */
  #pickerBody [style*="font-size:18px"] { font-size: 14px !important; }

  /* Quantity row — buttons + input. The 56×56 +/- becomes 44×44,
     the 36px input shrinks to 26px. */
  #pickerBody button[onclick*="adjustPickerQty"] {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }
  #pickerQtyInput {
    font-size: 26px !important;
    padding: 8px !important;
  }

  /* Footer (verify / skip / confirm) */
  #pickerFooter { padding: 10px !important; gap: 8px !important; }
  #pickerVerifyBtn, #pickerConfirmBtn, #pickerSkipBtn {
    padding: 14px !important;
    font-size: 14px !important;
  }
  #pickerSkipBtn { flex: 0 0 80px !important; }

  /* Verification result banner */
  #pickerVerifyBanner { padding: 8px 12px !important; font-size: 12px !important; }

  /* Override overlay — same compression */
  #pickerOverrideOverlay > div:first-child { padding: 10px 14px !important; font-size: 13px !important; }
  #pickerOverrideOverlay textarea, #pickerOverrideOverlay select {
    padding: 10px !important; font-size: 14px !important;
  }
  #pickerOvPin { font-size: 24px !important; padding: 14px !important; }
  #pickerOverrideOverlay button { padding: 14px !important; font-size: 14px !important; }
}

/* ===========================================================
   PHONE-SIZED DASHBOARD (≤600px wide)
   Hide the sidebar on phones (kicks user toward the picker
   which is the main mobile use case). Make tabs and cards
   stack and shrink fonts.

   Safe-area handling: when running as PWA on iOS the page
   extends under the status bar. env(safe-area-inset-top) is
   the iOS-reported height of the notch / status bar so we
   pad the topbar to clear it.
=========================================================== */
@media (max-width: 600px) {
  /* Push the entire grid down past the iOS notch / Android status bar */
  .shell {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    grid-template-columns: 56px 1fr !important;
  }
  .shell.collapsed { grid-template-columns: 56px 1fr !important; }

  /* Collapse sidebar to icons-only on small screens — keeps nav usable
     without eating half the viewport. */
  .nav-label, .side-brand, .side-header small { display: none !important; }
  .side-header { padding: 12px 8px !important; justify-content: center; }
  .side-logo { width: 30px !important; height: 30px !important; font-size: 13px !important; }
  .nav-item { justify-content: center; padding: 10px 0 !important; }
  .nav-item svg { margin: 0 !important; }
  .nav-item span { display: none !important; }
  .collapse-btn { display: none !important; }

  /* Topbar tighter, drop everything that doesn't matter on phone.
     Hide the user info entirely — sign out is in the sidebar. */
  .topbar {
    padding: 8px 10px !important;
    min-height: 44px !important;
  }
  .topbar-title { font-size: 14px !important; }
  .topbar-wh, .topbar-time, .topbar-user-info, .topbar-sep { display: none !important; }
  .topbar-avatar { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .topbar-user { padding: 0 !important; }
  #installAppBtn { padding: 6px 10px !important; font-size: 12px !important; margin-right: 6px !important; }

  /* Body / cards */
  .main { overflow-x: hidden; }
  .page { padding: 12px !important; }
  .page-header { padding: 0 0 12px !important; flex-wrap: wrap; gap: 8px !important; }
  .page-title { font-size: 18px !important; }
  .page-subtitle { font-size: 12px !important; }

  /* Card grids → stack */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .kpi { padding: 10px !important; }
  .kpi-label { font-size: 10px !important; }
  .kpi-val { font-size: 18px !important; }

  /* Tables — shrink + horizontal scroll */
  .data-table { font-size: 11px !important; }
  .data-table th, .data-table td { padding: 6px 8px !important; }

  /* Form inputs — bigger touch targets but smaller font on phone */
  .form-input { font-size: 14px !important; padding: 10px !important; }
  .btn { padding: 8px 12px !important; font-size: 13px !important; }
  .btn-primary { padding: 10px 14px !important; }

  /* Modals stretch full width */
  .modal { max-width: 95vw !important; max-height: 90vh !important; overflow-y: auto; }
  .modal-head { padding: 12px 14px !important; }
  .modal-title { font-size: 15px !important; }
  .modal-body { padding: 12px 14px !important; }

  /* Hide sidebar nav for portal users — they only need a back button */
  body.portal-mode .sidebar { display: none !important; }
  body.portal-mode .shell { grid-template-columns: 1fr !important; }
}


/* ============================================================================
   SEVERITY CHIPS — at-a-glance product handling tier (red/orange/yellow/green).
   See severityFor() / severityChip() in util.js for the rules.
   ============================================================================ */
.sev-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid;
  white-space: nowrap;
  vertical-align: middle;
}
.sev-chip-sm { font-size: 10px; padding: 1px 7px; line-height: 1.5; }
.sev-chip-lg { font-size: 13px; padding: 4px 12px; line-height: 1.4; }

.sev-chip-critical { background:#3a0a0a; color:#ff8888; border-color:#cc1f1f; }
.sev-chip-high     { background:#3a1c00; color:#ffb380; border-color:#cc6600; }
.sev-chip-moderate { background:#3a2c00; color:#ffd591; border-color:#a07700; }
.sev-chip-standard { background:#0a2a0a; color:#a3ffb3; border-color:#3a8a3a; }


/* ============================================================================
   COMPLIANCE PAGE — tabs + queue cards + per-field reviewer cards.
   ============================================================================ */
.cmp-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cmp-tab:hover { color: var(--text); }
.cmp-tab-active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.cmp-queue-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.cmp-queue-card:hover { border-color: var(--blue); }

.cmp-band-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cmp-band-auto_applied { background: #1f4d2e; color: #a3ffb3; border: 1px solid #28a745; }
.cmp-band-review_high  { background: #3a2c00; color: #ffd591; border: 1px solid #d6a700; }
.cmp-band-review_low   { background: #3a1c00; color: #ffb380; border: 1px solid #cc6600; }
.cmp-band-rejected     { background: #3a0a0a; color: #ff8888; border: 1px solid #cc1f1f; }
.cmp-band-error        { background: #3a0a0a; color: #ff8888; border: 1px solid #cc1f1f; }
.cmp-band-pending      { background: #2a2a2a; color: #ddd;    border: 1px solid #444; }

.cmp-field-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.cmp-field-card.applied  { border-left: 3px solid #28a745; }
.cmp-field-card.rejected { border-left: 3px solid #cc1f1f; }
.cmp-field-card.review   { border-left: 3px solid #d6a700; }

.cmp-confbar {
  height: 4px;
  border-radius: 2px;
  background: #222;
  overflow: hidden;
  margin: 6px 0;
}
.cmp-confbar-fill { height: 100%; transition: width .2s; }

.cmp-source-quote {
  background: #1a1a1a;
  border-left: 2px solid var(--blue);
  padding: 6px 10px;
  font-size: 11px;
  color: #cfd8e3;
  font-style: italic;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.cmp-source-quote:hover { background: #232323; }



/* ===== Billing engine (S3b) ===== */
.bill-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.bill-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text2);
  font-size:14px;font-weight:600;padding:10px 16px;cursor:pointer;}
.bill-tab:hover{color:var(--text);}
.bill-tab.active{color:var(--text);border-bottom-color:var(--green);}
.be-k{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.be-v{display:block;font-size:15px;font-weight:600;margin-top:2px;}
.be-warn{background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid var(--amber);
  border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:12px;}
.be-unbilled{border:2px solid var(--red) !important;margin-bottom:12px;}
.be-unbilled-ok{border:1px solid var(--green) !important;margin-bottom:12px;}
.be-client-group{background:var(--card);border:1px solid var(--border);border-radius:12px;
  margin-bottom:10px;overflow:hidden;}
.be-client-group>summary{display:flex;align-items:center;gap:8px;padding:12px 18px;cursor:pointer;
  list-style:none;font-size:14px;}
.be-client-group>summary::-webkit-details-marker{display:none;}
.be-code-group{padding:0 12px 12px;}
.be-code-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--text2);padding:10px 6px 6px;}
.chip-muted{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--text2);}
.be-edit-row select,.be-edit-row input{padding:4px 6px;border:1px solid var(--border);
  border-radius:6px;background:var(--bg);color:var(--text);font-size:12px;}
.inv-grp-row td:first-child{color:var(--muted);}

/* =============================================================================
   DESIGN SYSTEM (D0) — TERMINAL LEDGER
   Terminal: density, mono identifiers, gray chrome, color = status + money.
   Ledger:   confident numerics, de-emphasized cents, stat tiles as heroes.
   Everything below is ADDITIVE — legacy classes untouched until their batch.
   ============================================================================ */
:root{
  /* type scale */
  --fs-caps:11px;        /* uppercase labels, table headers, tile labels */
  --fs-body:13px;        /* table cells, dense UI */
  --fs-ui:14px;          /* forms, buttons, nav (unchanged base) */
  --fs-emph:15px;
  --fs-display-sm:20px;  /* inline money emphasis */
  --fs-display:28px;     /* stat tiles */
  --fs-display-lg:34px;  /* page-hero money */
  /* identifier + numeric stack */
  --mono:ui-monospace,'JetBrains Mono','SF Mono','Cascadia Code',Consolas,monospace;
  /* spacing (4px grid) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  /* density */
  --row-h:32px;          /* Terminal table row */
  --row-h-relaxed:40px;
  --radius:8px;--radius-sm:6px;
  /* status taxonomy — the ONLY five tones. Map statuses in js/ui.js. */
  --st-ok:var(--green);      --st-ok-bg:var(--green-bg);
  --st-info:var(--blue);     --st-info-bg:var(--blue-bg);
  --st-warn:var(--amber);    --st-warn-bg:var(--amber-bg);
  --st-danger:var(--red);    --st-danger-bg:var(--red-bg);
  --st-neutral:var(--muted); --st-neutral-bg:rgba(107,114,128,.12);
}

/* ---- numerics + identifiers (Ledger/Terminal) ---- */
.ui-num{font-variant-numeric:tabular-nums;}
.ui-id{font-family:var(--mono);font-size:12px;letter-spacing:-.01em;}
.ui-money{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.ui-money-sym{color:var(--text2);font-weight:500;margin-right:1px;}
.ui-money-cents{color:var(--text2);font-weight:500;font-size:.82em;}
.ui-money-neg{color:var(--st-danger);}
.ui-money-display{font-size:var(--fs-display);font-weight:700;letter-spacing:-.02em;}
.ui-money-display .ui-money-sym{font-size:.6em;vertical-align:12%;}
.ui-money-display .ui-money-cents{font-size:.5em;}

/* ---- chips (frozen taxonomy) ---- */
.ui-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;
  font-size:var(--fs-caps);font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  line-height:1.6;white-space:nowrap;}
.ui-chip-ok{background:var(--st-ok-bg);color:var(--st-ok);}
.ui-chip-info{background:var(--st-info-bg);color:var(--st-info);}
.ui-chip-warn{background:var(--st-warn-bg);color:var(--st-warn);}
.ui-chip-danger{background:var(--st-danger-bg);color:var(--st-danger);}
.ui-chip-neutral{background:var(--st-neutral-bg);color:var(--text2);}

/* ---- table kit (Terminal) ---- */
.ui-table{width:100%;border-collapse:collapse;font-size:var(--fs-body);}
.ui-table th{position:sticky;top:0;background:var(--panel);z-index:1;text-align:left;
  font-size:var(--fs-caps);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:0 var(--sp-3);height:34px;border-bottom:1px solid var(--border);}
.ui-table td{padding:0 var(--sp-3);height:var(--row-h);border-bottom:1px solid var(--border);
  vertical-align:middle;white-space:nowrap;}
.ui-table th.right,.ui-table td.right{text-align:right;}
.ui-table tbody tr:nth-child(even){background:var(--stripe);}
.ui-row-click{cursor:pointer;}
.ui-row-click:hover{background:var(--hover) !important;}
/* sortable headers */
.ui-table th.ui-th-sort{cursor:pointer;user-select:none;}
.ui-table th.ui-th-sort:hover{color:var(--text);}
.ui-sort{margin-left:4px;font-size:8px;opacity:0;transition:opacity .12s;}
.ui-table th.ui-th-sort:hover .ui-sort{opacity:.45;}
.ui-sort-on{opacity:1 !important;color:var(--blue);}

/* ---- stat tiles (Ledger heroes) ---- */
.ui-tiles{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);}
.ui-tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5);min-width:150px;flex:1;}
.ui-tile-label{font-size:var(--fs-caps);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2);}
.ui-tile-num{font-size:var(--fs-display);font-weight:700;letter-spacing:-.02em;}
.ui-tile-sub{font-size:12px;color:var(--text2);margin-top:var(--sp-1);}
/* Identifier tile: LPs, locations, lots, statuses. Terminal type — they must
   not be rendered at money size, where they wrap and clip. */
.ui-tile-compact{min-width:130px;}
.ui-tile-id{display:block;font-family:var(--mono);font-size:14px;font-weight:600;
  line-height:1.35;letter-spacing:-.01em;overflow-wrap:anywhere;}
.ui-tile-danger{border-color:var(--st-danger);}
.ui-tile-warn{border-color:var(--st-warn);}
.ui-tile-ok{border-color:var(--st-ok);}
.ui-tile-info{border-color:var(--st-info);}

/* ---- tabs (the one system) ---- */
.ui-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:var(--sp-4);}
.ui-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--text2);
  font-family:var(--font);font-size:var(--fs-ui);font-weight:600;padding:10px 16px;cursor:pointer;}
.ui-tab:hover{color:var(--text);}
.ui-tab.active{color:var(--text);border-bottom-color:var(--blue);}

/* ---- buttons (normalized; legacy .btn stays until D7) ---- */
.ui-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;}
.ui-btn:hover{border-color:var(--border-h);background:var(--hover);}
.ui-btn:disabled{opacity:.5;cursor:default;}
.ui-btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.ui-btn-primary:hover{background:#2f6fd6;border-color:#2f6fd6;}
.ui-btn-danger{background:var(--red);border-color:var(--red);color:#fff;}
.ui-btn-danger:hover{background:#d63b3b;}

/* ---- overlay / dialog / modal ---- */
/* LAYERING — read this before changing any z-index.
   The design-system overlay MUST sit above every app shell, or a dialog opened
   from one is invisible and the screen just looks frozen:
       .ui-overlay   10050   dialogs + modals
       #uiToastHost  10100   toasts (always above a dialog)
       legacy modals 10000–10010 (the few that remain)
       #pickerShell   9999   full-screen picker takeover
       #floorShell    9990
   The overlay used to be z-index:1000 — BELOW the picker shell. Native dialogs
   masked it (the browser floats those above everything), so nothing broke until
   the picker was migrated. */
/* The overlay itself scrolls. Without this, a dialog taller than the viewport has
   its bottom — including the action buttons — clipped off-screen and UNREACHABLE,
   because a position:fixed element can't be scrolled. Never showed on desktop
   (always room); on a phone it made Confirm impossible to reach. */
.ui-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10050;
  display:flex;align-items:flex-start;justify-content:center;padding:12vh var(--sp-4) var(--sp-4);
  overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Cap the height and let the BODY scroll, so the title and the action buttons stay
   pinned and visible no matter how long the content is. */
.ui-dialog,.ui-modal{background:var(--panel);border:1px solid var(--border-h);
  border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.5);width:100%;max-width:440px;
  padding:var(--sp-5) var(--sp-5) var(--sp-4);animation:uiPop .14s ease-out;
  display:flex;flex-direction:column;max-height:calc(100vh - 16vh);max-height:calc(100dvh - 16vh);}
.ui-dialog .ui-dialog-body{overflow-y:auto;}
.ui-modal{max-width:520px;padding:0;}
@keyframes uiPop{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.ui-dialog-title{font-size:var(--fs-emph);font-weight:700;}
.ui-dialog-body{font-size:13px;color:var(--text2);margin-top:var(--sp-2);line-height:1.55;}
.ui-dialog-actions{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-5);}
.ui-modal-head{display:flex;align-items:center;padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border);}
.ui-modal-x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:14px;padding:4px 8px;border-radius:6px;}
.ui-modal-x:hover{background:var(--hover);color:var(--text);}
.ui-modal-body{padding:var(--sp-4) var(--sp-5);max-height:65vh;overflow:auto;}
.ui-modal .ui-dialog-actions{padding:var(--sp-3) var(--sp-5) var(--sp-4);margin-top:0;
  border-top:1px solid var(--border);}

/* Packages panel — markup row. A percentage is 1-3 characters; a full-width
   input for it looks like we're expecting an essay and it dwarfs the box list.
   NOTE the `.ui-input` in the width selector: `.ui-input{width:100%}` lives in
   the design-system block with the same specificity, so a bare `.pk-markup-input`
   loses on source order and the field stretches anyway. Same trap that made the
   pick-qty input swallow its neighbours. */
.pk-markup-row{display:flex;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-2);}
.pk-markup{flex:0 0 auto;margin-bottom:0;}
.ui-input.pk-markup-input{width:110px;}
.pk-markup-hint{flex:1;padding-bottom:8px;}

/* Override-form validation error, inside the picker shell (#pickerOvErr).
   Added in D6d and never styled — the fourth referenced-but-undefined class.
   It sits on the picker's dark takeover, so it needs to read as an ERROR at
   arm's length on a tablet, not as more body text. Sized for the picker's
   larger type, not the desktop's. */
.picker-ov-err{background:rgba(220,60,60,.14);border:1px solid rgba(220,60,60,.45);
  color:#ff9c9c;border-radius:8px;padding:10px 12px;margin-bottom:12px;
  font-size:14px;font-weight:600;line-height:1.4;}

/* Monospace inline text — tracking numbers, LP/lot codes, supervisor PINs, IDs.
   THIS CLASS WAS REFERENCED BY FIVE SHIPPED MODULES AND NEVER DEFINED
   (picker.js x7, compliance.js, password.js, printDocs.js, users.js). Every
   identifier that was supposed to be monospace has been rendering in the UI's
   proportional font since those batches shipped — which is precisely where a
   picker misreads 1/l and 0/O off a carrier label. Same class of bug as
   .sev-chip and .btn-link: markup pointing at a rule nobody ever wrote.
   Tabular figures so digits line up when stacked in a list. */
.ui-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;letter-spacing:.01em;}

/* Text-button. Looks like a link, is a <button> (so it's keyboard- and
   screen-reader-correct, and can't be middle-clicked into a dead tab). */
.btn-link{background:none;border:none;padding:4px;cursor:pointer;
  color:var(--blue);font-size:13px;font-weight:600;text-decoration:none;}
.btn-link:hover{text-decoration:underline;}

/* ---------------------------------------------------------------------------
   TOUCH / SMALL SCREEN — the picker and floor mode run on a tablet held in one
   hand, often with a scanner in the other. Desktop dialog metrics (13px body,
   compact side-by-side buttons) are unreadable and hard to hit there.
   Applies on narrow screens OR any coarse pointer, so a big warehouse tablet
   in landscape still gets touch sizing.
   --------------------------------------------------------------------------- */
@media (max-width:768px), (pointer:coarse){
  /* Sit the dialog nearer the top — 12vh of dead space is a lot of a phone. */
  .ui-overlay{padding:5vh var(--sp-3) var(--sp-3);align-items:flex-start;}
  .ui-dialog,.ui-modal{max-width:100%;max-height:calc(100vh - 8vh);
    max-height:calc(100dvh - 8vh);border-radius:14px;}
  .ui-dialog-title{font-size:19px;}
  .ui-dialog-body{font-size:15px;line-height:1.5;}
  .ui-modal-body{max-height:none;}   /* the dialog caps height now, not the body */
  /* Stack the actions full-width. Side-by-side buttons on a phone put Confirm
     and Cancel a thumb-width apart — on a pick confirmation that is a real
     mis-tap risk. Primary sits on top (column-reverse) so it's under the thumb. */
  .ui-dialog-actions{flex-direction:column-reverse;gap:10px;margin-top:var(--sp-4);}
  .ui-dialog-actions .ui-btn{width:100%;min-height:48px;font-size:16px;
    padding:13px 16px;justify-content:center;}
  /* 16px on inputs — anything smaller makes iOS auto-zoom the page on focus,
     which is what leaves the picker panning around a shifted screen. */
  .ui-input,.ui-select,.ui-field input,.ui-field select,.ui-field textarea{font-size:16px;min-height:44px;}
}

/* ---- form kit ---- */
.ui-field{margin-bottom:var(--sp-3);}
.ui-label{display:block;font-size:var(--fs-caps);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-1);}
.ui-input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:8px 10px;border-radius:var(--radius-sm);font-family:var(--font);font-size:13px;outline:none;}
.ui-input:focus{border-color:var(--blue);}
.ui-hint{font-size:12px;color:var(--muted);margin-top:var(--sp-1);}
.ui-field-err{font-size:12px;color:var(--st-danger);margin-top:var(--sp-1);}

/* ---- tab bar: tab strip + trailing context (hint, filters) on one rule ---- */
.ui-tabs-bar{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);
  border-bottom:1px solid var(--border);}
.ui-tabs-bar .ui-tabs{border-bottom:none;margin-bottom:0;}

/* ---- period stepper label (‹ July 2026 ›) ---- */
.ui-period{min-width:170px;text-align:center;font-size:var(--fs-ui);font-weight:600;
  font-variant-numeric:tabular-nums;}

/* ---- meta grid (record header key/values) ---- */
.ui-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-4) var(--sp-5);}
.ui-meta-k{display:block;font-size:var(--fs-caps);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);}
.ui-meta-v{display:block;font-size:var(--fs-body);margin-top:2px;}

/* ---- grouped disclosure (summary rows that open to their detail) ---- */
.ui-group{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:var(--sp-2);overflow:hidden;}
.ui-group>summary{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  cursor:pointer;font-size:var(--fs-body);font-weight:600;list-style:none;}
.ui-group>summary::-webkit-details-marker{display:none;}
.ui-group>summary:hover{background:var(--hover);}
.ui-group>summary::before{content:'▸';color:var(--muted);font-size:11px;}
.ui-group[open]>summary::before{content:'▾';}
.ui-group-body{padding:0 var(--sp-3) var(--sp-3);}
.ui-muted{color:var(--text2);font-weight:500;}

/* ---- pager ---- */
.ui-pager{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:10px var(--sp-4);border-top:1px solid var(--border);
  font-size:var(--fs-body);color:var(--text2);}
.ui-pager-count strong{color:var(--text);}
.ui-pager-page{font-variant-numeric:tabular-nums;padding:0 var(--sp-2);white-space:nowrap;}
.ui-pager-size{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.ui-pager-size .ui-input{width:auto;padding:4px 6px;}

/* ---- banners (page-level warnings above the content) ---- */
.ui-banner{padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:var(--sp-3);
  font-size:var(--fs-body);line-height:1.5;border-left:3px solid transparent;}
.ui-banner-danger{background:var(--st-danger-bg);color:var(--st-danger);border-left-color:var(--st-danger);}
.ui-banner-warn{background:var(--st-warn-bg);color:var(--st-warn);border-left-color:var(--st-warn);}
.ui-banner-info{background:var(--st-info-bg);color:var(--st-info);border-left-color:var(--st-info);}

/* ---- inline link ---- */
.ui-link{color:var(--blue);text-decoration:none;font-weight:600;}
.ui-link:hover{text-decoration:underline;}

/* ---- drop zone ---- */
.ui-drop{background:var(--panel);border:1px dashed var(--border-h);border-radius:var(--radius);
  padding:var(--sp-8);text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
  margin-bottom:var(--sp-4);}
.ui-drop:hover,.ui-drop-hot{border-color:var(--blue);background:var(--hover);}
.ui-drop-icon{font-size:26px;opacity:.5;margin-bottom:var(--sp-2);}
.ui-drop-title{font-size:var(--fs-emph);font-weight:600;margin-bottom:var(--sp-1);}

/* ---- staged file row ---- */
.ui-file{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;
  border-bottom:1px solid var(--border);font-size:var(--fs-body);}
.ui-file:last-child{border-bottom:none;}
.ui-file-ext{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:11px;font-weight:700;color:var(--text2);flex:0 0 auto;}
.ui-file-meta{flex:1;min-width:0;}
.ui-file-name{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- two-column field row ---- */
.ui-field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);}

/* ---- toasts ---- */
/* Above .ui-overlay (10050) — a toast reporting the result of a dialog action
   must not be hidden by the dialog it came from. */
#uiToastHost{position:fixed;top:16px;right:16px;z-index:10100;display:flex;
  flex-direction:column;gap:8px;align-items:flex-end;}
.ui-toast{background:var(--panel);border:1px solid var(--border-h);border-radius:10px;
  padding:10px 16px;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-6px);transition:all .2s;max-width:380px;}
.ui-toast-in{opacity:1;transform:none;}
.ui-toast-success{border-left:3px solid var(--st-ok);}
.ui-toast-error{border-left:3px solid var(--st-danger);}
.ui-toast-info{border-left:3px solid var(--st-info);}

/* ---- state triad ---- */
.ui-empty{padding:28px;text-align:center;color:var(--muted);font-size:13px;}
.ui-error{padding:20px;text-align:center;color:var(--st-danger);font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:12px;}
.ui-loading{padding:24px;text-align:center;color:var(--muted);font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:10px;}
.ui-spin{width:14px;height:14px;border:2px solid var(--border-h);border-top-color:var(--blue);
  border-radius:50%;display:inline-block;animation:uiSpin .7s linear infinite;}
@keyframes uiSpin{to{transform:rotate(360deg)}}
/* Press / busy / result feedback — every clickable control (see uiBusy in ui.js) */
.ui-btn:active:not(:disabled),button:active:not(:disabled),.floor-card:active,.ui-row-click:active{transform:scale(var(--press-scale));opacity:var(--press-opacity);}
.ui-busy{cursor:progress;opacity:var(--press-opacity);}
.ui-busy.ui-row-click{pointer-events:none;}
.ui-btn-spin{width:12px;height:12px;border-color:currentColor;border-top-color:transparent;opacity:.8;}
.ui-btn-primary .ui-btn-spin,.ui-btn-danger .ui-btn-spin{border-color:#fff;border-top-color:transparent;}
.ui-flash-ok{box-shadow:0 0 0 2px var(--st-ok);transition:box-shadow .15s;}
.ui-flash-ok.ui-row-click{background:var(--st-ok-bg);}
.ui-btn-err{display:inline-block;margin-left:var(--sp-2);font-size:var(--fs-caps);max-width:100%;overflow-wrap:anywhere;}
.floor-mode .ui-btn-spin{width:16px;height:16px;}
.floor-mode .ui-btn-err{display:block;margin:var(--sp-1) 0 0;font-size:var(--fs-body);}
.ui-skel{display:inline-block;width:70%;height:12px;border-radius:4px;
  background:linear-gradient(90deg,var(--border) 25%,var(--border-h) 50%,var(--border) 75%);
  background-size:200% 100%;animation:uiSkel 1.2s infinite;}
@keyframes uiSkel{to{background-position:-200% 0}}

/* ============================================================================
   SCAN INPUT + CAMERA (js/scan.js) and PROFILE BUILDER (js/scanProfiles.js)
   Layering: .scan-cam sits above .ui-overlay (10050) so a modal may host a
   ScanInput, and below #uiToastHost (10100). Fixed + scrollable (rule 3).
   ============================================================================ */
.scan-input{display:flex;flex-direction:column;gap:var(--sp-1);}
.scan-input-row{display:flex;gap:var(--sp-2);align-items:center;}
.scan-input-field{flex:1;font-family:var(--mono);font-size:var(--fs-emph);min-height:40px;}
.scan-input-cam{flex-shrink:0;}
.scan-input-flash{font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.04em;font-weight:600;
  min-height:14px;opacity:0;transition:opacity .15s;}
.scan-input-flash-on{opacity:1;}
.scan-input-flash-ok{color:var(--st-ok);}
.scan-input-flash-warn{color:var(--st-warn);}
.scan-input-flash-danger{color:var(--st-danger);}

.scan-cam{position:fixed;inset:0;z-index:10060;background:#000;color:#fff;display:flex;flex-direction:column;
  overflow-y:auto;}
.scan-cam-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);background:rgba(0,0,0,.6);flex-shrink:0;}
.scan-cam-title{font-size:var(--fs-emph);font-weight:600;}
.scan-cam-close{flex-shrink:0;}
.scan-cam-stage{position:relative;flex:1;min-height:240px;display:flex;align-items:center;justify-content:center;}
.scan-cam-video{width:100%;height:100%;max-height:calc(100vh - 120px);object-fit:cover;}
.scan-cam-reticle{position:absolute;left:50%;top:50%;width:min(70vw,360px);height:min(40vh,240px);
  transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.85);border-radius:var(--radius);
  box-shadow:0 0 0 9999px rgba(0,0,0,.35);pointer-events:none;}
.scan-cam-status{padding:var(--sp-3) var(--sp-4);text-align:center;flex-shrink:0;}

.sp-host{padding:var(--sp-3) var(--sp-4) var(--sp-4);}
.sp-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3);}
.sp-toolbar-actions{display:flex;gap:var(--sp-2);flex-shrink:0;}
.sp-list{margin-bottom:var(--sp-4);}
.sp-editor-wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--sp-4);}
.sp-editor-wrap[hidden]{display:none;}
.sp-editor{min-width:0;}
.sp-map-field{min-width:0;}
.sp-editor-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3);border-bottom:1px solid var(--border);}
.sp-scope{display:flex;flex-wrap:wrap;gap:var(--sp-3);padding:var(--sp-1) 0;}
.sp-row-3{grid-template-columns:1fr 1fr 1fr;}
.sp-map{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-2);}
.sp-map-row{display:grid;grid-template-columns:90px auto 1fr auto;align-items:center;gap:var(--sp-2);}
.sp-map-key{font-family:var(--mono);}
.sp-tester .scan-input{margin-bottom:var(--sp-3);}
.sp-trace{display:flex;flex-direction:column;gap:var(--sp-2);}
.sp-trace-head{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body);}
.sp-step{display:grid;grid-template-columns:96px 1fr;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);}
.sp-step-name{font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.04em;color:var(--text2);
  font-weight:600;padding-top:2px;}
.sp-step-out{margin:0;white-space:pre-wrap;word-break:break-all;font-size:var(--fs-body);}
.sp-step-bad{border-color:var(--st-danger);}
.sp-step-bad .sp-step-out{color:var(--st-danger);}
.sp-step-final{font-weight:600;font-size:var(--fs-emph);}
.sp-step-ok{border-color:var(--st-ok);background:var(--st-ok-bg);}
.sp-step-ok .sp-step-out{color:var(--st-ok);}
.sp-step-final.sp-step-bad{background:var(--st-danger-bg);}
.sp-step-sub{font-size:var(--fs-body);font-weight:500;color:var(--st-warn);margin-top:var(--sp-1);}
.sp-errors{margin:var(--sp-2) 0 0;padding-left:var(--sp-4);}
@media (max-width:900px){.sp-editor-wrap{grid-template-columns:1fr;}.sp-row-3{grid-template-columns:1fr;}}

/* ---- floor mode: Scan test page + class-based card (no new inline styles) ---- */
.floor-card-flat{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px 18px;
  text-align:left;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:16px;width:100%;}
.floor-card-main{flex:1;min-width:0;}
.floor-card-title{font-size:18px;font-weight:700;}
.floor-card-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.floor-card-chev{font-size:22px;color:var(--text2);}
.floor-page-head{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
.floor-page-title{font-size:16px;font-weight:700;}
.floor-back{background:#3a3a3a;color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:14px;cursor:pointer;}
.floor-page-body{padding:18px;display:flex;flex-direction:column;gap:var(--sp-3);}
.scan-cam-decoder{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:var(--fs-caps);
  color:rgba(255,255,255,.75);background:rgba(0,0,0,.5);padding:2px 6px;border-radius:var(--radius-sm);pointer-events:none;}

/* ---- camera scanner controls (capture-first) ---- */
.scan-cam-controls{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);background:rgba(0,0,0,.6);flex-shrink:0;flex-wrap:wrap;}
.scan-cam-capture{width:84px;height:84px;border-radius:50%;border:4px solid #fff;background:var(--blue);color:#fff;
  font-weight:800;font-size:var(--fs-caps);letter-spacing:.06em;cursor:pointer;flex-shrink:0;
  box-shadow:0 0 0 6px rgba(255,255,255,.25);}
.scan-cam-capture:disabled{opacity:.5;cursor:default;}
.scan-cam-capture:active{transform:scale(.96);}
.scan-cam-torch{color:#fff;border-color:rgba(255,255,255,.5);background:transparent;}
.scan-cam-torch-on{background:var(--amber);border-color:var(--amber);color:#000;}
.scan-cam-zoom{display:flex;align-items:center;gap:var(--sp-2);color:#fff;min-width:140px;flex:1;max-width:260px;}
.scan-cam-zoom-range{flex:1;}
.scan-cam-status-ok{color:var(--st-ok);font-weight:600;}
.scan-cam-status-bad{color:var(--st-warn);font-weight:600;}

/* ---- scan-to-pick (js/pick.js) ---- */
.floor-scanpick{width:100%;margin:-4px 0 12px;justify-content:center;min-height:44px;font-size:var(--fs-ui);}
.fp-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-body);}
.fp-head-order{font-weight:600;}
.fp-head-n{color:var(--text2);font-weight:600;text-transform:uppercase;font-size:var(--fs-caps);letter-spacing:.04em;}
.fp-directive{border-radius:var(--radius);padding:var(--sp-4);text-align:center;border:2px solid var(--border);background:var(--panel);}
.fp-directive-loc{border-color:var(--st-info);background:var(--st-info-bg);}
.fp-directive-item{border-color:var(--st-ok);}
.fp-directive-label{font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.06em;color:var(--text2);font-weight:700;}
.fp-directive-loc-ok{color:var(--st-ok);margin-left:var(--sp-2);}
.fp-directive-main{font-family:var(--mono);font-size:34px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:var(--sp-2) 0;word-break:break-all;}
.fp-directive-sub{font-size:var(--fs-body);color:var(--text2);}
.fp-directive-qty{font-size:var(--fs-display);font-weight:800;margin-top:var(--sp-2);}
.fp-directive-carton{font-family:var(--mono);font-size:var(--fs-emph);font-weight:700;margin-top:var(--sp-1);overflow-wrap:anywhere;}
.fp-directive-carton-label{font-family:var(--font);font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.06em;color:var(--text2);font-weight:700;margin-right:var(--sp-1);}
.fp-queue-next{font-size:var(--fs-body);color:var(--text2);text-align:center;font-weight:600;}
.fp-flash{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);text-align:center;background:var(--st-ok-bg);border:2px solid var(--st-ok);border-radius:var(--radius);padding:var(--sp-6) var(--sp-4);}
.fp-flash-title{font-size:32px;font-weight:800;color:var(--st-ok);overflow-wrap:anywhere;}
.fp-flash-sub{color:var(--text2);font-size:var(--fs-body);}
.floor-card-go{border-color:var(--st-ok);}
.fs-line-carton{font-family:var(--mono);font-size:var(--fs-caps);color:var(--text2);overflow-wrap:anywhere;}
.fs-locked{width:100%;}
.ord-bulk-bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-2) 0;}
.ord-bulk-count{font-weight:600;}
.inv-show-inactive{white-space:nowrap;}
/* Units (js/units.js) */
.unit-list{display:flex;flex-direction:column;gap:2px;}
.unit-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:4px var(--sp-2);border-radius:var(--radius-sm);font-size:var(--fs-body);min-height:28px;}
.unit-row-click{cursor:pointer;}
.unit-row-click:hover{background:var(--hover);}
.unit-hl{background:var(--st-info-bg);box-shadow:0 0 0 1px var(--st-info) inset;}
.unit-uid{font-weight:600;}
.unit-carton{color:var(--text2);}
.unit-last{margin-left:auto;font-size:var(--fs-caps);}
.unit-empty{padding:var(--sp-2);}
.unit-count{margin-left:auto;font-size:var(--fs-caps);}
.unit-group{margin-bottom:var(--sp-3);}
.unit-group-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-weight:600;margin-bottom:4px;}
.unit-hist-label{margin-top:var(--sp-3);}
.inv-find-unit{max-width:200px;}
.inv-ships-as-is{gap:var(--sp-2);}
.inv-ships-as-is .ui-input{max-width:280px;}
.trace-units-row td{padding:0 var(--sp-3) var(--sp-3);}
.fp-photo{margin-top:var(--sp-3);}
.fp-photo-img{max-width:100%;max-height:180px;border-radius:var(--radius-sm);border:1px solid var(--border);}
.fp-counter{font-size:var(--fs-display);font-weight:800;text-align:center;font-variant-numeric:tabular-nums;padding:var(--sp-2) 0;}
.fp-counter-done{color:var(--st-ok);}
.fp-uids{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;}
.fp-uid{padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel);}
.fp-banner{padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);font-weight:700;font-size:var(--fs-emph);text-align:center;}
.fp-banner-danger{background:var(--st-danger);color:#fff;}
.fp-banner-warn{background:var(--st-warn-bg);color:var(--st-warn);border:1px solid var(--st-warn);}
.fp-banner-ok{background:var(--st-ok-bg);color:var(--st-ok);border:1px solid var(--st-ok);}
.fp-actions{display:flex;gap:var(--sp-2);}
.fp-actions .ui-btn{min-height:48px;}
.fp-confirm{flex:1;justify-content:center;font-size:var(--fs-emph);}
.fp-done{text-align:center;padding:var(--sp-8) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);align-items:center;}
.fp-done-mark{font-size:48px;color:var(--st-ok);}
.fp-done-title{font-size:var(--fs-emph);font-weight:700;}

/* ---- pick: tap-mode location step + client picking rules ---- */
.fp-here{width:100%;min-height:64px;justify-content:center;font-size:var(--fs-display-sm);font-weight:800;margin-top:var(--sp-3);letter-spacing:.04em;}
.cf-rules-label{margin-top:var(--sp-3);}

/* ---- pack & ship station (js/ship.js) + office packages card ---- */
.fs-opening{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-6) 0;}
.fs-opening-title{font-size:var(--fs-emph);font-weight:800;letter-spacing:.06em;text-align:center;color:var(--text2);}
.fs-wave{text-align:center;font-weight:600;color:var(--text2);}
.fs-wave-actions{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;}
.fs-wave-actions .ui-btn{min-height:44px;}
.fs-shipto{font-size:var(--fs-body);color:var(--text2);}
.fs-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);}
.fs-count{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-2);text-align:center;background:var(--panel);}
.fs-count-label{font-size:var(--fs-caps);letter-spacing:.06em;color:var(--text2);font-weight:700;}
.fs-count-num{font-size:var(--fs-display);font-weight:800;font-variant-numeric:tabular-nums;}
.fs-count-ok{border-color:var(--st-ok);}
.fs-count-ok .fs-count-num{color:var(--st-ok);}
.fs-count-warn{border-color:var(--st-warn);}
.fs-count-warn .fs-count-num{color:var(--st-warn);}
.fs-lines{display:flex;flex-direction:column;gap:var(--sp-1);}
.fs-line{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body);padding:var(--sp-1) 0;border-bottom:1px solid var(--border);}
.fs-line-n{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;}
.fs-line-done .fs-line-n{color:var(--st-ok);}
.fs-contents{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3);}
.fs-tracking{font-size:var(--fs-body);margin-bottom:var(--sp-3);}
.fs-scanrow{display:flex;gap:var(--sp-2);align-items:flex-start;margin-bottom:var(--sp-3);}
.fs-scan{flex:1;min-width:0;}
.fs-qty{display:flex;flex-direction:column;gap:2px;width:72px;flex-shrink:0;}
.fs-qty .ui-input{text-align:center;}
.fs-pkglist{display:flex;flex-direction:column;gap:var(--sp-2);}
.fs-pkgrow{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);color:var(--text);cursor:pointer;font-size:var(--fs-body);flex-wrap:wrap;}
.fs-shipbtn{width:100%;min-height:56px;justify-content:center;font-size:var(--fs-emph);font-weight:800;}
.fs-verified{text-align:center;font-weight:800;color:var(--st-ok);padding:var(--sp-3);}
.fs-checklist{display:flex;flex-direction:column;gap:var(--sp-2);}
.fs-check{display:flex;gap:var(--sp-2);align-items:flex-start;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);border:1px solid var(--border);font-size:var(--fs-body);}
.fs-check-ok{border-color:var(--st-ok);background:var(--st-ok-bg);}
.fs-check-bad{border-color:var(--st-danger);background:var(--st-danger-bg);}
.fs-check-mark{font-weight:800;}
.fs-check-ok .fs-check-mark{color:var(--st-ok);}
.fs-check-bad .fs-check-mark{color:var(--st-danger);}
.fs-rates{display:flex;flex-direction:column;gap:var(--sp-2);}
.fs-rate{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;}
.fs-rate-price{margin-left:auto;}
.fp-packmode{margin:var(--sp-1) 0;}
.ord-pack-body{padding:0 20px 16px;}
.ord-pack-list{display:flex;flex-direction:column;gap:var(--sp-2);}
.ord-pack{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);}
.ord-pack-head{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;font-size:var(--fs-body);margin-bottom:var(--sp-1);}
.ord-pack-contents{display:flex;flex-wrap:wrap;gap:var(--sp-1);}
.ord-pack-verif{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);}

.fs-pkg{margin-top:var(--sp-2);}

/* ---- item master: per-level barcodes + other codes (078) ---- */
.hu-codes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);}
.hu-code{display:inline-flex;align-items:center;gap:4px;}
.hu-code-rm{border:none;background:transparent;color:inherit;cursor:pointer;padding:0 2px;font-size:11px;}
.hu-code-add{display:inline-flex;gap:var(--sp-1);align-items:center;}
.hu-code-add .form-input{width:auto;min-width:120px;padding:4px 8px;font-size:12px;}

/* ---- Excalibur migration (js/migration.js) ---- */
.mg-status{margin-bottom:var(--sp-3);}
.mg-clients{display:flex;flex-direction:column;gap:var(--sp-3);}
.mg-client{margin-top:var(--sp-2);}
.mg-client-unmapped{border-color:var(--st-danger);}
.mg-caps{display:flex;flex-wrap:wrap;gap:var(--sp-1);padding-top:6px;}
.mg-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-3);}
.mg-rule{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-body);}
.mg-locs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3);}
.mg-loc{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body);}
.mg-loc .ui-input{flex:1;min-width:0;}
.mg-loc-code{font-family:var(--mono);color:var(--text2);margin-left:auto;}
.mg-locs-more{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-2);}
.mg-locs-more>summary{grid-column:1/-1;cursor:pointer;color:var(--text2);font-size:var(--fs-caps);text-transform:uppercase;letter-spacing:.04em;padding:var(--sp-1) 0;}
.mg-plan{margin:0 0 var(--sp-3);padding-left:18px;font-size:var(--fs-body);}
.mg-plan li{margin:2px 0;}

/* ===========================================================
   FLOOR MODE — narrow handhelds (Zebra TC-series, 320–400px).
   Nothing may sit outside the scrollable area: long identifiers
   wrap, grids collapse, flex children may shrink, tables stack.
=========================================================== */
body.floor-mode .page{overflow-wrap:anywhere;}
body.floor-mode .page *{min-width:0;}
body.floor-mode .page img,body.floor-mode .page video,body.floor-mode .page canvas{max-width:100%;height:auto;}
body.floor-mode .floor-page-body>*{max-width:100%;}
.fp-banner,.fp-uid,.fs-tracking,.fs-shipto,.scan-input-flash,.sp-step-out,.ui-id{overflow-wrap:anywhere;word-break:break-word;}
.fp-directive-main{overflow-wrap:anywhere;}
.fp-head,.sp-editor-head,.sp-toolbar-actions,.fp-actions,.fs-scanrow{flex-wrap:wrap;}
.fp-actions .ui-btn{flex:1 1 auto;justify-content:center;}
/* 1fr is minmax(auto,1fr): a long value blows the track out. Pin the floor to 0. */
.sp-step{grid-template-columns:96px minmax(0,1fr);}
.ui-field-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.sp-row-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.fs-counts{grid-template-columns:repeat(3,minmax(0,1fr));}
/* Touch targets: 44px minimum on the floor */
body.floor-mode .ui-btn,body.floor-mode .floor-back,body.floor-mode .btn,body.floor-mode .ui-input,body.floor-mode .ui-select,
body.floor-mode .ui-check,body.floor-mode .js-floor-pick-row{min-height:44px;}
body.floor-mode .ui-chip{min-height:0;}
.scan-input-type{flex-shrink:0;}
.scan-input-type-on{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn);}
/* Camera overlay: controls wrap instead of pushing off the edge */
.scan-cam-controls{flex-wrap:wrap;}
.scan-cam *{min-width:0;}
.scan-cam-status,.scan-cam-title{overflow-wrap:anywhere;}
.scan-cam-zoom{min-width:0;flex:1 1 140px;}
@media (max-width:480px){
  .sp-step{grid-template-columns:1fr;}
  .ui-field-row,.sp-row-3{grid-template-columns:1fr;}
  .fs-qty{width:64px;}
  body.floor-mode .ui-table,body.floor-mode .ui-table thead,body.floor-mode .ui-table tbody,
  body.floor-mode .ui-table tr,body.floor-mode .ui-table td{display:block;width:100%;height:auto;}
  body.floor-mode .ui-table thead{display:none;}
  body.floor-mode .ui-table tr{border-bottom:1px solid var(--border);padding:var(--sp-2) 0;}
  body.floor-mode .ui-table td{padding:2px var(--sp-3);border:0;text-align:left;}
  body.floor-mode .ui-table td.right{text-align:left;}
}
body.floor-mode button,body.floor-mode .cb-input,body.floor-mode .cb-wrap input{min-height:44px;}
body.floor-mode .ui-check{display:flex;align-items:center;gap:var(--sp-2);}
body.floor-mode .ui-check input[type=checkbox]{width:22px;height:22px;min-height:0;}
body.floor-mode .ui-chip,body.floor-mode .ui-chip *{min-height:0;}
body.floor-mode button{min-width:44px;}
.scan-input-row{flex-wrap:wrap;}
.scan-input-field{flex:1 1 160px;}
/* type=search without the browser's search chrome */
.scan-input-field{-webkit-appearance:none;appearance:none;}
.scan-input-field::-webkit-search-cancel-button,.scan-input-field::-webkit-search-decoration{-webkit-appearance:none;display:none;}
/* Bottom clearance on floor pages: the last card clears the Android nav bar */
body.floor-mode .floor-page-body,body.floor-mode #floorPickListBody,body.floor-mode #floorInboundBody,body.floor-mode #floorMoveBody{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));}
body.floor-mode #page-floorHome{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)) !important;}

/* ===========================================================
   FLOOR MODE — typography. Two sizes, toggled from the floor
   header (body.floor-text-large). Tokens are re-pointed so every
   ui-* component scales; the floor screens' own pieces are set
   explicitly. Everything still wraps at 320–400px.
=========================================================== */
body.floor-mode{
  --fl-base:16px; --fl-caps:12px; --fl-mono:16px; --fl-btn:16px; --fl-banner:16px; --fl-directive:28px; --fl-counter:26px;
  --fs-body:var(--fl-base); --fs-ui:var(--fl-base); --fs-emph:var(--fl-base); --fs-caps:var(--fl-caps);
  font-size:var(--fl-base); line-height:1.45;
}
body.floor-mode.floor-text-large{
  --fl-base:18px; --fl-caps:13px; --fl-mono:18px; --fl-btn:18px; --fl-banner:18px; --fl-directive:32px; --fl-counter:28px;
}
body.floor-mode .page{font-size:var(--fl-base);line-height:1.45;}
body.floor-mode .ui-btn,body.floor-mode .floor-back,body.floor-mode .btn,body.floor-mode .floor-scanpick{font-size:var(--fl-btn);}
body.floor-mode .ui-input,body.floor-mode .ui-select,body.floor-mode .cb-input,body.floor-mode .scan-input-field{font-size:var(--fl-base);}
body.floor-mode .ui-hint,body.floor-mode .ui-muted{font-size:calc(var(--fl-base) - 2px);}
body.floor-mode .ui-label{font-size:var(--fl-caps);}
body.floor-mode .ui-id,body.floor-mode .ui-mono{font-size:var(--fl-mono);}
body.floor-mode .ui-chip{font-size:var(--fl-caps);}
body.floor-mode .floor-card-title{font-size:calc(var(--fl-base) + 4px);}
body.floor-mode .floor-card-sub,body.floor-mode .floor-card-flat .floor-card-sub{font-size:calc(var(--fl-base) - 2px);}
body.floor-mode .floor-page-title{font-size:calc(var(--fl-base) + 2px);}
body.floor-mode .floor-textsize{flex-shrink:0;font-size:calc(var(--fl-base) - 3px);padding:6px 10px;}
/* scan trace: mono values large, key labels small uppercase */
body.floor-mode .sp-step-name{font-size:var(--fl-caps);text-transform:uppercase;letter-spacing:.06em;}
body.floor-mode .sp-step-out{font-family:var(--mono);font-size:var(--fl-mono);line-height:1.4;}
body.floor-mode .sp-step-final{font-size:var(--fl-mono);}
body.floor-mode .sp-trace-head{font-size:var(--fl-base);}
/* pick directive and counter */
body.floor-mode .fp-directive-label{font-size:var(--fl-caps);}
body.floor-mode .fp-directive-main{font-size:var(--fl-directive);font-weight:800;line-height:1.15;}
body.floor-mode .fp-directive-sub{font-size:var(--fl-base);}
body.floor-mode .fp-directive-qty{font-size:var(--fl-counter);}
body.floor-mode .fp-counter{font-size:var(--fl-counter);}
body.floor-mode .fp-head-order{font-size:var(--fl-base);}
body.floor-mode .fp-uid{font-size:var(--fl-mono);}
/* banners and flash */
body.floor-mode .fp-banner{font-size:var(--fl-banner);line-height:1.35;}
body.floor-mode .scan-input-flash{font-size:var(--fl-caps);}
/* pack & ship */
body.floor-mode .fs-count-num{font-size:var(--fl-counter);}
body.floor-mode .fs-count-label{font-size:var(--fl-caps);}
body.floor-mode .fs-line,body.floor-mode .fs-shipto,body.floor-mode .fs-tracking{font-size:var(--fl-base);}
body.floor-mode .ui-dialog-title{font-size:calc(var(--fl-base) + 2px);}
/* the inline-styled pick list rows */
body.floor-mode .js-floor-pick-row>div{font-size:var(--fl-base) !important;}
body.floor-mode .js-floor-pick-row>div>div:first-child{font-size:calc(var(--fl-base) + 1px) !important;}
/* floor header: brand stays on one line, the toggle stays compact */
body.floor-mode #page-floorHome>div:first-child{flex-wrap:wrap;row-gap:8px;}
body.floor-mode #page-floorHome>div:first-child>div:nth-child(2){flex:1 1 130px !important;min-width:130px !important;}  /* inline style="flex:1;min-width:0" on the div */
.floor-head-actions{display:flex;gap:8px;margin-left:auto;flex-shrink:0;}
body.floor-mode #page-floorHome>div:first-child>div:nth-child(2)>div:first-child{font-size:15px !important;line-height:1.2;}
body.floor-mode #page-floorHome>div:first-child>div:nth-child(2)>div:last-child{font-size:12px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.floor-mode .floor-textsize{padding:6px 8px;font-size:calc(var(--fl-base) - 4px);white-space:nowrap;}
body.floor-mode .js-signout{font-size:calc(var(--fl-base) - 4px) !important;white-space:nowrap;}

/* --- box catalog at the bench (js/ship.js fsBoxBlock) + Settings → Packaging (js/packaging.js) --- */
.fs-boxdir{margin-bottom:var(--sp-3);}
.fs-box{font-size:var(--fs-body);margin-bottom:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);}
.fs-box-name{font-weight:600;}
.fs-gross{display:flex;gap:var(--sp-2);align-items:flex-end;margin-bottom:var(--sp-3);}
.fs-gross-field{flex:1;margin:0;}
.fs-gross-input{font-size:1.25em;font-variant-numeric:tabular-nums;}
body.floor-mode .fs-gross-input{font-size:var(--fl-base);min-height:48px;}
.pkg-inactive{align-self:center;white-space:nowrap;}

/* --- report suite: generic runner toolbar, presets, drill-down, schedules (js/reports.js) --- */
.rep-field{min-width:170px;margin-bottom:0;}
.rep-field-wide{min-width:220px;}
.rep-spacer{flex:1;}
.rep-textarea{min-height:64px;font-family:var(--mono);resize:vertical;}
.rep-since{white-space:nowrap;align-self:center;}
.rep-presets{display:flex;gap:var(--sp-2);align-items:center;}
.rep-presets .ui-input{min-width:160px;}
.rep-hint{flex-basis:100%;}
.rep-drill{padding:2px 8px;font-size:var(--fs-body);}
.rep-portal-chip{margin-left:var(--sp-2);vertical-align:middle;}

/* --- Excalibur replay mirror (js/migration.js mmLoad, js/clients.js cliSorCell) --- */
.mg-mirror{margin-top:var(--sp-4);}
.mg-mirror-enabled{white-space:nowrap;align-self:center;}
.mg-mirror-interval{width:80px;text-align:right;}
.cli-sor-btn{margin-left:var(--sp-2);}

/* --- Identifiers & pack levels (js/inventory.js renderItemIdentifiers / renderCasePack / renderIdentifiersCard) --- */
.idn-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3);}
.idn-row{display:grid;grid-template-columns:150px minmax(180px,1fr) auto 28px;gap:var(--sp-2);align-items:center;}
.idn-row .ui-field-err{grid-column:1 / -1;margin-top:0;}
.idn-row.idn-ro .ui-input{opacity:.65;}
.idn-tags{display:inline-flex;gap:4px;min-width:0;}
.idn-tag{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);
  background:var(--st-neutral-bg);padding:1px 6px;border-radius:99px;white-space:nowrap;line-height:1.6;}
.idn-tag-primary{color:var(--st-info);background:var(--st-info-bg);}
.idn-rm{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:2px 6px;font-size:13px;line-height:1;}
.idn-rm:hover{color:var(--st-danger);}
.idn-empty{color:var(--muted);font-size:12px;padding:4px 0;}
.idn-case{border-top:1px dashed var(--border);padding-top:var(--sp-3);margin-top:var(--sp-2);}
.idn-case-row{display:grid;grid-template-columns:1fr 130px 1fr;gap:var(--sp-3);}
.idn-hu-note{margin-top:0;padding:10px 0;white-space:nowrap;}
.idn-codes{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);padding:6px 0;}
.idn-code{display:inline-flex;align-items:center;gap:6px;}
.idn-type{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--st-info);
  background:var(--st-info-bg);padding:1px 6px;border-radius:99px;white-space:nowrap;line-height:1.6;}
.idn-level{font-weight:600;letter-spacing:.03em;font-size:12px;}
@media (max-width:640px){
  .idn-row{grid-template-columns:1fr 1fr;}
  .idn-case-row{grid-template-columns:1fr;}
}

/* --- Filter bar (js/ui.js uiFilterBar — Inventory / Orders / Receiving headers) --- */
.ui-filterbar{flex-wrap:wrap;row-gap:var(--sp-2);}
.fb-spacer{flex:1;}
.fb-client{max-width:200px;}
.fb-search{max-width:240px;}
.fb-status{max-width:160px;}
.fb-extra{max-width:160px;}
.fb-refresh{flex:0 0 auto;}

/* --- Permissions (js/perms.js applyPermGates; js/roles.js grid) --- */
.perm-denied{display:none !important;}
.roles-toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:10px 16px;border-bottom:1px solid var(--border);}
.roles-grid-wrap{overflow:auto;max-height:70vh;}
.roles-grid td.roles-col,.roles-grid th.roles-col{text-align:center;width:120px;}
.roles-grid tr.roles-group td{background:var(--stripe);font-size:var(--fs-caps);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);height:28px;}
.roles-grid td{height:auto;padding-top:6px;padding-bottom:6px;}
.roles-cell{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;}
.roles-cell input{width:16px;height:16px;accent-color:var(--blue);}
.roles-lock{color:var(--st-ok);font-weight:700;}
.roles-lock-off{color:var(--muted);font-weight:500;}

/* --- Users page + per-user overrides (js/users.js) --- */
.usr-toolbar{gap:var(--sp-2);flex-wrap:wrap;}
.usr-toolbar .usr-search{max-width:260px;}
.usr-toolbar .usr-role{max-width:200px;}
.usr-actions{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap;}
.usr-ovr-summary{display:flex;flex-direction:column;gap:6px;}
.usr-ovr-summary .ui-label{display:inline-block;margin:0 6px 0 0;}
.usr-tag-removed{color:var(--st-danger);background:var(--st-danger-bg);}
.usr-ovr-sel{width:auto;padding:4px 8px;font-size:12px;}
.roles-head{font-weight:600;}
.roles-head .ui-hint{display:block;margin:0;font-weight:400;text-transform:none;letter-spacing:0;}
.roles-head-acts{display:flex;gap:4px;justify-content:center;margin-top:4px;}
.roles-head-acts .ui-btn{padding:2px 8px;font-size:11px;}
.side-user{padding:8px 14px 2px;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#shell.collapsed .side-user{display:none;}

/* --- Portal access switches (js/portalAccess.js) + portal roles section (js/roles.js) --- */
.roles-section-head{display:flex;align-items:flex-start;gap:var(--sp-3);padding:14px 16px 10px;border-top:1px solid var(--border);margin-top:var(--sp-3);}
.roles-section-head .card-title{margin-bottom:2px;}
.pa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-3);padding:12px 16px 16px;}
.pa-group{border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
.pa-group-title{font-size:var(--fs-caps);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.pa-switch{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--border);cursor:pointer;}
.pa-switch:first-of-type{border-top:0;}
.pa-switch input{position:absolute;opacity:0;width:0;height:0;}
.pa-switch-track{flex:0 0 auto;width:34px;height:18px;border-radius:9px;background:var(--border);position:relative;transition:background .15s;margin-top:2px;}
.pa-switch-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--panel);transition:left .15s;}
.pa-switch input:checked + .pa-switch-track{background:var(--blue);}
.pa-switch input:checked + .pa-switch-track .pa-switch-knob{left:18px;}
.pa-switch input:disabled + .pa-switch-track{opacity:.5;}
.pa-switch-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pa-switch-label{font-weight:500;}
.pa-switch-reserved .pa-switch-label{color:var(--muted);}

/* --- "View portal as client" bar (js/portal.js bootPortal) --- */
.portal-preview-bar{display:flex;align-items:center;gap:var(--sp-3);padding:8px 16px;background:var(--st-warn-bg);color:var(--text);border-bottom:1px solid var(--border);font-size:13px;font-weight:600;}
.portal-preview-bar[hidden]{display:none;}
body.portal-mode.portal-preview .main{grid-template-rows:auto 60px auto 1fr;}

/* --- Item Import wizard (js/itemImport.js) --- */
.ii-steps{display:flex;gap:4px;padding:0 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px;flex-wrap:wrap;}
.ii-step{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12px;color:var(--muted);}
.ii-step-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--border);font-weight:700;font-size:11px;}
.ii-step.active{color:var(--text);font-weight:600;background:var(--stripe);}
.ii-step.active .ii-step-n{background:var(--blue);color:#fff;}
.ii-step.done .ii-step-n{background:var(--st-ok);color:#fff;}
.ii-upload p{margin:0 0 12px;}
.ii-file-label{cursor:pointer;}
.ii-select{width:auto;min-width:220px;padding:4px 8px;font-size:12px;}
.ii-map-table td,.ii-val-table td{vertical-align:top;}
.ii-map-table tr.ii-required td:first-child{border-left:3px solid var(--blue);}
.ii-map-foot{display:flex;align-items:center;gap:var(--sp-2);padding-top:12px;margin-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;}
.ii-tpl-name{max-width:260px;}
.ii-mode{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;}
.ii-counts{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:8px 0 12px;}
.ii-chip-zero{opacity:.45;}
.ii-reasons{margin:0;padding-left:16px;color:var(--st-danger);}
.ii-reasons li{margin:0;}
tr.ii-row-error td{background:var(--st-danger-bg);}
.ii-commit p{margin:0 0 8px;}
.ii-history-wrap{padding:0 16px 16px;}
.ii-history td{vertical-align:top;font-size:12px;}
.ii-history-title{font-size:var(--fs-caps);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;}
.ii-history-empty{padding:10px 0 0;}
.ii-hist-acts{display:flex;gap:4px;flex-wrap:wrap;}
.ii-hist-acts .ui-btn{padding:2px 8px;font-size:11px;}
.ii-client-warn{margin-bottom:12px;}

/* --- Excalibur catch-up card (js/excalCatchup.js) --- */
.ec-table td{vertical-align:top;}
.ec-table input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);}
.ec-drift{padding:10px 16px;}
.ec-recent{padding:0 16px 12px;}
.ec-recent summary{cursor:pointer;font-size:12px;color:var(--muted);margin-bottom:6px;}
.ec-unmatched{padding:0 16px 8px;}
.ec-check{border-bottom:1px solid var(--border);}