/* Layout: fixed left rail of warehouse stations, work surface on the right; collapses to a top bar on phones. */
:root {
  --bg: #F1F4F6;
  --surface: #FFFFFF;
  --sunken: #E8EDF1;
  --ink: #15202A;
  --muted: #5B6977;
  --line: #D8DFE5;
  --primary: #1E5A8A;
  --primary-ink: #FFFFFF;
  --kraft: #B9772C;
  --kraft-soft: #F6E9D7;
  --ok: #1F7A4D;
  --ok-soft: #E1F2E8;
  --warn: #9A6200;
  --warn-soft: #FBF0D9;
  --bad: #B3261E;
  --bad-soft: #FBE4E2;
  --rail: #15202A;
  --rail-ink: #C9D3DC;
  --focus: #3B82C4;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E141A; --surface: #151D25; --sunken: #1B252F; --ink: #E4EAEF; --muted: #93A2B0; --line: #26323D;
    --primary: #6AA6D6; --primary-ink: #0B1A26; --kraft: #D9A25F; --kraft-soft: #2E2416;
    --ok: #5CC28C; --ok-soft: #12291D; --warn: #E2B04A; --warn-soft: #2B2210; --bad: #F08A80; --bad-soft: #2E1614;
    --rail: #0A0F14; --rail-ink: #A9B6C2; --focus: #8CC0EA; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E141A; --surface: #151D25; --sunken: #1B252F; --ink: #E4EAEF; --muted: #93A2B0; --line: #26323D;
  --primary: #6AA6D6; --primary-ink: #0B1A26; --kraft: #D9A25F; --kraft-soft: #2E2416;
  --ok: #5CC28C; --ok-soft: #12291D; --warn: #E2B04A; --warn-soft: #2B2210; --bad: #F08A80; --bad-soft: #2E1614;
  --rail: #0A0F14; --rail-ink: #A9B6C2; --focus: #8CC0EA; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-stretch: 85%; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: 26px; font-weight: 750; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
a { color: var(--primary); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Shell */
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100%; }
.rail { background: var(--rail); color: var(--rail-ink); padding: 20px 12px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: #fff; font-family: var(--display); font-weight: 800; font-size: 19px; font-stretch: 80%; letter-spacing: 0.01em; }
.brand svg { flex: none; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { color: var(--rail-ink); text-decoration: none; padding: 8px 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav a.on { background: rgba(255,255,255,0.1); color: #fff; box-shadow: inset 3px 0 0 var(--kraft); }
.nav svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 8px; font-size: 12px; }
.rail-foot button { background: none; border: 1px solid rgba(255,255,255,0.18); color: var(--rail-ink); border-radius: 6px; padding: 6px 10px; font: inherit; cursor: pointer; text-align: left; }
.rail-foot button:hover { color: #fff; border-color: rgba(255,255,255,0.35); }

main { min-width: 0; padding-block: 28px 64px; padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 22px; max-width: 1320px; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 65ch; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Panels & tables */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-body { padding: 16px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--sunken); }
td .sub { display: block; color: var(--muted); font-size: 12.5px; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stat { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--display); font-size: 28px; font-weight: 750; font-stretch: 85%; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat small { color: var(--muted); font-size: 12.5px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 22px; align-items: start; }

/* Controls */
button, .btn { font: 500 13.5px var(--body); border-radius: 7px; padding: 7px 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
button:hover, .btn:hover { border-color: var(--muted); }
button.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--bad); }
button.ghost { border-color: transparent; background: none; color: var(--primary); padding-inline: 6px; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button svg { width: 15px; height: 15px; }
input, select, textarea { font: 14px var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: transparent; }
input.qty { width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
input.dim { width: 62px; text-align: right; font-variant-numeric: tabular-nums; padding-inline: 6px; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; color: var(--ink); }
label.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 14px; }
.form-grid .wide { grid-column: 1 / -1; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar input[type=search] { max-width: 280px; }
.toolbar select { width: auto; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--sunken); color: var(--muted); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.pill.kraft { background: var(--kraft-soft); color: var(--kraft); }
.tag { font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--sunken); color: var(--muted); white-space: nowrap; }
.missing { color: var(--warn); font-weight: 600; font-size: 12.5px; }

/* Notices */
.notice { border-radius: 8px; padding: 10px 14px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.notice.warn { background: var(--warn-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.notice.ok { background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.notice.info { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.notice ul { margin: 4px 0 0; padding-left: 18px; }

/* Box packing grid */
.pack th.box { text-align: center; }
.pack td.box { text-align: center; }
.pack tfoot td { background: var(--sunken); font-size: 12.5px; }
.pack .boxed-ok { color: var(--ok); font-weight: 600; }
.pack .boxed-bad { color: var(--bad); font-weight: 600; }
.box-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.box-chip b { font-family: var(--display); font-stretch: 80%; font-size: 13px; color: var(--kraft); }

.shipment-card { border: 1px dashed var(--kraft); background: var(--kraft-soft); border-radius: 8px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.shipment-card b { font-family: var(--mono); font-size: 15px; }
.log { font-family: var(--mono); font-size: 12px; background: var(--sunken); border-radius: 8px; padding: 10px 12px; max-height: 220px; overflow: auto; white-space: pre-wrap; margin: 0; }

/* Modal */
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog::backdrop { background: rgba(10, 16, 22, 0.5); }
dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modal-body { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Login */
.login { min-height: 100%; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.login form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.login .brand { color: var(--ink); padding: 0; }
.err { color: var(--bad); font-size: 13px; min-height: 1em; margin: 0; }

#toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); z-index: 50; }
#toast.show { opacity: 1; transform: translateX(-50%); }
#toast.bad { background: var(--bad); color: #fff; }

/* Label previews (on screen) */
.label-preview { display: flex; flex-wrap: wrap; gap: 10px; }
.label-preview .fn-label { background: #fff; color: #000; border: 1px solid var(--line); }

/* Invoice */
.invoice { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 10px; padding: 32px; max-width: 820px; display: flex; flex-direction: column; gap: 20px; }
.invoice table th { background: #fff; color: #555; border-color: #ddd; }
.invoice table td { border-color: #eee; }
.invoice .total { font-family: var(--display); font-size: 24px; font-weight: 750; text-align: right; }
.invoice-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

/* Print: only the label sheet or invoice */
#print-area { display: none; }
.fn-label { width: 2.25in; height: 1.25in; padding: 0.06in 0.1in; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: Arial, sans-serif; color: #000; overflow: hidden; break-inside: avoid; }
.fn-label svg { width: 100%; height: 0.5in; }
.fn-label .code { font-size: 9pt; letter-spacing: 0.03em; }
.fn-label .title { font-size: 7pt; line-height: 1.15; text-align: center; max-height: 2.3em; overflow: hidden; width: 100%; }
.fn-label .cond { font-size: 7pt; font-weight: bold; align-self: flex-start; }
.box-label { width: 4in; height: 6in; padding: 0.12in 0.16in; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; color: #000; break-after: page; overflow: hidden; }
.box-label .bl-2d svg { display: block; width: 100%; height: auto; max-height: 1.55in; }
.box-label .bl-content { font-family: 'Courier New', monospace; font-size: 6.5pt; line-height: 1.2; text-align: center; word-break: break-all; margin-top: 3px; max-height: 3.6em; overflow: hidden; }
.box-label .bl-uncover { text-align: center; font-family: 'Courier New', monospace; font-weight: bold; font-size: 8pt; letter-spacing: 0.04em; margin: 5px 0 3px; }
.box-label .bl-fba { display: flex; align-items: center; justify-content: space-between; border-top: 2px solid #000; border-bottom: 1px solid #000; padding: 3px 0; }
.box-label .bl-fba b { font-family: 'Courier New', monospace; font-size: 12pt; }
.box-label .bl-black { width: 2in; height: 0.2in; background: #000; }
.box-label .bl-addr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px 0; font-size: 8pt; line-height: 1.25; min-height: 0.85in; }
.box-label .bl-k { font-size: 7.5pt; margin-bottom: 2px; }
.box-label .bl-fc { font-size: 13pt; font-weight: bold; margin-bottom: 1px; }
.box-label .bl-band { background: #000; color: #fff; font-weight: bold; font-size: 8.5pt; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.box-label .bl-black { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.box-label .bl-id { text-align: center; padding: 6px 0 2px; border-bottom: 2px solid #000; }
.box-label .bl-id svg { width: 78%; height: 0.95in; display: block; margin: 0 auto; }
.box-label .bl-id div { font-size: 9pt; margin-top: 2px; }
.box-label .bl-foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 7.5pt; padding-top: 4px; margin-top: auto; }
.box-label .bl-foot b { font-family: 'Courier New', monospace; font-size: 9pt; }
.sheet-30 { display: grid; grid-template-columns: repeat(3, 2.625in); grid-auto-rows: 1in; column-gap: 0.125in; padding: 0.5in 0.1875in 0; }
.sheet-30 .fn-label { width: 2.625in; height: 1in; }
.sheet-30 .fn-label svg { height: 0.4in; }

@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; }
  body { background: #fff; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: sticky; top: 0; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 10px; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); z-index: 5; }
  .nav { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .nav a { padding: 6px 9px; font-size: 13px; }
  .nav a.on { box-shadow: inset 0 -2px 0 var(--kraft); }
  .rail-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .rail-foot .mode-note { display: none; }
  main { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
td .mono, td.mono { white-space: nowrap; }
#plan-check:empty { display: none; }
.sku-cell { display: flex; gap: 10px; align-items: center; min-width: 0; }
.thumb { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.thumb-empty { display: grid; place-items: center; color: var(--muted); background: var(--sunken); }
.thumb-empty svg { width: 18px; height: 18px; }
.sku-title { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }

/* Plan steps */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; counter-reset: s; }
.stepper li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; }
.stepper li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--sunken); color: var(--muted); }
.stepper li.on { color: var(--ink); }
.stepper li.on span { background: var(--primary); color: var(--primary-ink); }
.stepper li.done span { background: var(--ok-soft); color: var(--ok); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: var(--surface); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--primary); color: var(--primary-ink); }
.option-card { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; }
.option-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.option-card input { width: auto; margin-top: 3px; }
.ship-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ship-chip { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 8px; background: var(--sunken); min-width: 150px; font-size: 13px; }
.ship-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.ship-tabs button { flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 14px; }
.ship-tabs button.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* Packing */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 18px; align-items: start; }
.sku-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; max-height: 70vh; overflow: auto; }
.sku-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); }
.sku-card[draggable="true"] { cursor: grab; }
.sku-card.complete { opacity: 0.6; }
.sku-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sku-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }
.sku-side button { padding: 4px 10px; }
.box-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; max-height: 70vh; overflow: auto; }
.box-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.box-card.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.box-card.drop, .drop-hint.drop { border-color: var(--kraft); background: var(--kraft-soft); }
.box-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.box-head b { font-family: var(--display); font-stretch: 85%; color: var(--kraft); }
.dims { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; }
.dims input.dim { width: 54px; }
input.dim.bad { border-color: var(--bad); color: var(--bad); }
.box-contents { padding: 6px 10px; display: flex; flex-direction: column; gap: 4px; }
.box-line { display: flex; align-items: center; gap: 8px; }
.box-line .thumb { width: 28px; height: 28px; }
.drop-hint { color: var(--muted); font-size: 12.5px; padding: 10px; text-align: center; border: 1px dashed var(--line); border-radius: 6px; }
.drop-hint.big { padding: 48px 16px; }
.ship-tabs button.needs-work { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
input.need { border-color: var(--warn); background: var(--warn-soft); }
.exp-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.exp-bar .sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* Bulk selection menu */
.bulk-bar { display: flex; align-items: center; gap: 10px; }
.bulk-bar > input { width: 16px; height: 16px; }
.bulk-menu { position: relative; }
.bulk-menu summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; color: var(--primary); font-weight: 600; font-size: 13px; white-space: nowrap; background: var(--surface); }
.bulk-menu summary::-webkit-details-marker { display: none; }
.bulk-menu .menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px; padding: 4px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(10, 16, 22, 0.16); }
.bulk-menu .menu button { border: 0; background: none; justify-content: flex-start; padding: 8px 10px; }
.bulk-menu .menu button:hover:not(:disabled) { background: var(--sunken); }
tr.sel td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.sku-card.sel { border-color: var(--primary); }
.sku-card > input[type=checkbox] { width: 16px; height: 16px; flex: none; }
.tag.danger { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable .sort-ind { margin-left: 4px; font-size: 10px; opacity: 0.45; }
th.sortable[aria-sort="ascending"] .sort-ind, th.sortable[aria-sort="descending"] .sort-ind { opacity: 1; color: var(--primary); }
.stock-total { cursor: help; border-bottom: 1px dotted var(--muted); font-weight: 600; }
input.qty.over { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.sh-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }

/* Tivexi logo: black artwork on a transparent background, shown white on the dark sidebar. */
.brand { flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; }
.brand-logo { display: block; height: 22px; width: auto; max-width: 100%; }
.brand-logo.on-dark { filter: brightness(0) invert(1); }
.brand-sub { font-family: var(--display); font-stretch: 85%; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rail-ink); }
.brand-login .brand-logo { height: 30px; }
.brand-login .brand-sub { color: var(--muted); }
:root[data-theme="dark"] .brand-login .brand-logo { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-login .brand-logo { filter: brightness(0) invert(1); } }
@media (max-width: 860px) { .brand { flex-direction: row; align-items: center; gap: 8px; } .brand-logo { height: 18px; } }

/* 2×1 in prep box label (before Amazon's 2D box labels exist) */
.prep-label { width: 2in; height: 1in; padding: 0.05in 0.08in; display: flex; flex-direction: column; justify-content: space-between; font-family: Arial, Helvetica, sans-serif; color: #000; overflow: hidden; break-after: page; }
.prep-label .pl-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 7pt; }
.prep-label .pl-top b { font-size: 11pt; letter-spacing: 0.02em; }
.prep-label svg { display: block; width: 100%; height: 0.32in; }
.prep-label .pl-row { font-size: 6pt; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ship-est { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; align-items: baseline; }
.pallet-box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.pallet-box summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.img-label { width: 4in; height: 6in; display: flex; align-items: center; justify-content: center; break-after: page; overflow: hidden; }
.img-label img { max-width: 100%; max-height: 100%; display: block; }
.cost-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.cost-tiles > div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cost-tiles span { font-size: 12px; color: var(--muted); }
.cost-tiles b { font-size: 20px; }
.cost-tiles small { font-size: 11.5px; color: var(--muted); }
.scan-status { border: 2px solid var(--line); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.scan-status b { font-size: 20px; }
.scan-status span { font-size: 14px; color: var(--muted); }
.scan-status.ok { border-color: #1F7A4D; background: rgba(31,122,77,.14); }
.scan-status.bad { border-color: #C0392B; background: rgba(192,57,43,.14); }
.scan-status.warn { border-color: #B7791F; background: rgba(183,121,31,.14); }
.scan-status.info { border-color: #3B6EA8; background: rgba(59,110,168,.12); }