/* ============================================================
   IMD Supplier Tracker — standalone design system (no framework)
   ============================================================ */
/* ============================================================
   Design tokens — generated from the hand-written palette.

   Every value below is byte-identical to the literal it replaced; this layer is
   a pure rename, proven by test_ui_tokens.py, which expands every var() and
   diffs the result against docs/ui_baseline/app.pre-token.css.

   Families are assigned by hue: neutral (structure//text), info (blue, links and
   selection), ok (green, delivered/paid), warn (amber, missing information),
   danger (red, financial + integrity alerts), freight (teal, other-shipping rows),
   alloc (violet, payment allocations). Within a family the scale runs light -> dark.

   NEXT STEP (deliberately not done here): ~19 of these are near-identical
   barely-tinted whites. Collapsing them is a real visual change and needs to be
   reviewed on the live page, so it is a separate stage.
   ============================================================ */
:root {
  /* neutral */
  --t-neutral-01: #ffffff;  /* x33 */
  --t-neutral-02: #fbfcff;  /* x2 */
  --t-neutral-03: #fbfcfd;  /* x3 */
  --t-neutral-04: #f8fbff;  /* x5 */
  --t-neutral-05: #f7fdff;  /* x1 */
  --t-neutral-06: #fff6f6;  /* x1 */
  --t-neutral-07: #f8fafc;  /* x20 */
  --t-neutral-08: #fffdf4;  /* x1 */
  --t-neutral-09: #f7fcf8;  /* x1 */
  --t-neutral-10: #f8f9fb;  /* x3 */
  --t-neutral-11: #f3f7ff;  /* x1 */
  --t-neutral-12: #f5f3ff;  /* x1 */
  --t-neutral-13: #f6f8fb;  /* x1 */
  --t-neutral-14: #f7f8fa;  /* x4 */
  --t-neutral-15: #fef2f2;  /* x4 */
  --t-neutral-16: #fff1f2;  /* x3 */
  --t-neutral-17: #f5fbf7;  /* x1 */
  --t-neutral-18: #fffaf0;  /* x1 */
  --t-neutral-19: #eff6ff;  /* x6 */
  --t-neutral-20: #eef5ff;  /* x1 */
  --t-neutral-21: #f0fdf4;  /* x4 */
  --t-neutral-22: #eef4ff;  /* x9 */
  --t-neutral-23: #f0fdfa;  /* x1 */
  --t-neutral-24: #fff7ed;  /* x33 */
  --t-neutral-25: #fff8ed;  /* x1 */
  --t-neutral-26: #fffbeb;  /* x6 */
  --t-neutral-27: #ecfdf5;  /* x3 */
  --t-neutral-28: #eaf2ff;  /* x3 */
  --t-neutral-29: #f3f4f6;  /* x2 */
  --t-neutral-30: #edf3fb;  /* x1 */
  --t-neutral-31: #ffe9e9;  /* x1 */
  --t-neutral-32: #fefce8;  /* x1 */
  --t-neutral-33: #eef2f7;  /* x3 */
  --t-neutral-34: #edf7ef;  /* x7 */
  --t-neutral-35: #edf1f5;  /* x1 */
  --t-neutral-36: #e6f7eb;  /* x1 */
  --t-neutral-37: #e2e8f0;  /* x3 */
  --t-neutral-38: #dbe3ed;  /* x1 */
  --t-neutral-39: #d8e0ea;  /* x1 */
  --t-neutral-40: #d7dee8;  /* x1 */
  --t-neutral-41: #cfd8e4;  /* x1 */
  --t-neutral-42: #cbd5e1;  /* x7 */
  --t-neutral-43: #c2c7cf;  /* x2 */
  --t-neutral-44: #9ca3af;  /* x4 */
  --t-neutral-45: #6b7280;  /* x1 */
  --t-neutral-46: #111827;  /* x1 */
  /* info */
  --t-info-01: #e7efff;  /* x1 */
  --t-info-02: #dbeafe;  /* x13 */
  --t-info-03: #ddd6fe;  /* x1 */
  --t-info-04: #cfe0ff;  /* x1 */
  --t-info-05: #bfdbfe;  /* x14 */
  --t-info-06: #93c5fd;  /* x5 */
  --t-info-07: #8fb4ff;  /* x1 */
  --t-info-08: #aebdce;  /* x1 */
  --t-info-09: #60a5fa;  /* x1 */
  --t-info-10: #94a3b8;  /* x1 */
  --t-info-11: #2563eb;  /* x3 */
  --t-info-12: #718096;  /* x1 */
  --t-info-13: #1d4fd8;  /* x1 */
  --t-info-14: #1d4ed8;  /* x7 */
  --t-info-15: #64748b;  /* x8 */
  --t-info-16: #1e40af;  /* x4 */
  --t-info-17: #1746a2;  /* x1 */
  --t-info-18: #475569;  /* x6 */
  --t-info-19: #1e3a8a;  /* x2 */
  --t-info-20: #0369a1;  /* x1 */
  --t-info-21: #3f4b5f;  /* x1 */
  --t-info-22: #123b88;  /* x1 */
  --t-info-23: #374151;  /* x5 */
  --t-info-24: #334155;  /* x7 */
  --t-info-25: #172554;  /* x1 */
  /* ok */
  --t-ok-01: #dcfce7;  /* x6 */
  --t-ok-02: #d9f2dc;  /* x1 */
  --t-ok-03: #bbf7d0;  /* x8 */
  --t-ok-04: #86efac;  /* x7 */
  --t-ok-05: #bef264;  /* x1 */
  --t-ok-06: #4ade80;  /* x1 */
  --t-ok-07: #22c55e;  /* x2 */
  --t-ok-08: #16a34a;  /* x4 */
  --t-ok-09: #15803d;  /* x11 */
  --t-ok-10: #047857;  /* x2 */
  --t-ok-11: #166534;  /* x9 */
  --t-ok-12: #14532d;  /* x1 */
  /* warn */
  --t-warn-01: #fff6d8;  /* x1 */
  --t-warn-02: #ffedd5;  /* x9 */
  --t-warn-03: #fef9c3;  /* x1 */
  --t-warn-04: #fed7aa;  /* x21 */
  --t-warn-05: #fde68a;  /* x1 */
  --t-warn-06: #fdba74;  /* x14 */
  --t-warn-07: #fcd34d;  /* x2 */
  --t-warn-08: #fb923c;  /* x2 */
  --t-warn-09: #f97316;  /* x2 */
  --t-warn-10: #f59e0b;  /* x10 */
  --t-warn-11: #eab308;  /* x1 */
  --t-warn-12: #d97706;  /* x1 */
  --t-warn-13: #c2410c;  /* x2 */
  --t-warn-14: #b45309;  /* x22 */
  --t-warn-15: #a16207;  /* x1 */
  --t-warn-16: #92400e;  /* x4 */
  --t-warn-17: #854d0e;  /* x2 */
  --t-warn-18: #78350f;  /* x1 */
  /* danger */
  --t-danger-01: #fee2e2;  /* x16 */
  --t-danger-02: #fecaca;  /* x12 */
  --t-danger-03: #fca5a5;  /* x5 */
  --t-danger-04: #ef4444;  /* x1 */
  --t-danger-05: #dc2626;  /* x4 */
  --t-danger-06: #b91c1c;  /* x16 */
  --t-danger-07: #991b1b;  /* x8 */
  --t-danger-08: #9a3412;  /* x22 */
  --t-danger-09: #7f1d1d;  /* x2 */
  --t-danger-10: #7c2d12;  /* x3 */
  /* freight */
  --t-freight-01: #ccfbf1;  /* x3 */
  --t-freight-02: #a5f3fc;  /* x1 */
  --t-freight-03: #99f6e4;  /* x4 */
  --t-freight-04: #5eead4;  /* x2 */
  --t-freight-05: #0f766e;  /* x11 */
  /* alloc */
  --t-alloc-01: #6d28d9;  /* x1 */

  /* semantic aliases kept from the original palette */
  --bg: #f3f5f8;
  --card: var(--t-neutral-01);
  --border: var(--t-neutral-42);
  --border-soft: var(--t-neutral-38);
  --text: var(--t-neutral-46);
  --muted: var(--t-info-18);
  --accent: var(--t-info-14);
  --accent-soft: var(--t-info-02);
  --danger: var(--t-danger-06);
  --ok: var(--t-ok-09);
  --empty-bg: var(--t-neutral-07);
  --empty-line: var(--t-info-10);
  --empty-border: var(--t-neutral-42);
  --radius: 8px;
  --shadow: 0 1px 3px rgba(15, 23, 42, .09);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 13px/1.45 -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h3, h4, h5 { margin: 0.4em 0; }
small, .muted { color: var(--muted); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 0 .75rem; height: 48px; position: sticky; top: 0; z-index: 50;
}
.brand { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.brand .dot { width: 8px; height: 8px; border-radius: 3px; background: var(--accent); display: inline-block; }
.environment-pill {
  display: inline-flex; align-items: center; padding: .08rem .4rem; border: 1px solid;
  border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .06em;
}
.environment-pill.live { color: var(--t-ok-11); background: var(--t-ok-01); border-color: var(--t-ok-04); }
.environment-pill.local { color: var(--t-danger-08); background: var(--t-warn-02); border-color: var(--t-warn-06); }
.supplier-approval-guide {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 36px; padding: .38rem .75rem; border-bottom: 1px solid var(--t-info-06);
  background: var(--t-neutral-19); color: var(--t-info-19); text-align: center;
}
.supplier-approval-guide strong { white-space: nowrap; }
.supplier-approval-guide > span { min-width: 0; }
.supplier-approval-guide b {
  display: inline-block; padding: 0 .25rem; border: 1px solid var(--t-danger-02); border-radius: 999px;
  background: var(--t-danger-01); color: var(--t-danger-06); font-size: 10px; text-transform: uppercase;
}
.tabs { display: flex; gap: .25rem; flex: 0 0 auto; }
.tabs a {
  padding: .28rem .65rem; border-radius: 8px; color: var(--muted); font-weight: 500;
}
.tabs a:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.tabs a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tabs a.tab-review {
  display: inline-flex; align-items: center; gap: .32rem; white-space: nowrap;
}
.tabs a.tab-review.has-stale {
  background: var(--t-neutral-24); color: var(--t-danger-08); font-weight: 800;
}
.tabs a.tab-review.has-stale.active {
  background: var(--t-warn-04); color: var(--t-danger-08);
}
.tab-alert {
  display: inline-flex; align-items: center;
  padding: 0 .3rem; border: 1px solid var(--t-warn-06); border-radius: 999px;
  background: var(--t-warn-02); color: var(--t-danger-08);
  font-size: 10px; font-weight: 850; line-height: 1.35;
}
.topbar-ledger {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; gap: .72rem;
  max-width: calc(100vw - 680px); min-width: 0;
  min-height: 34px; padding: .25rem .85rem; border: 1px solid var(--t-neutral-38); border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
  backdrop-filter: blur(8px);
}
.topbar-ledger-item {
  display: grid; align-items: center; gap: .03rem;
  min-width: 0; color: var(--muted);
  white-space: nowrap; line-height: 1.05;
}
.topbar-ledger-item span {
  color: var(--muted); font-size: 9.5px; font-weight: 850;
  text-transform: uppercase; letter-spacing: .03em;
}
.topbar-ledger-item b {
  color: var(--text); font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums;
}
.topbar-ledger-item + .topbar-ledger-item {
  padding-left: .72rem; border-left: 1px solid var(--border-soft);
}
.topbar-ledger-item.supplier b {
  color: var(--t-danger-08);
}
.topbar-ledger-item.shipping b {
  color: var(--t-info-20);
}
.topbar-ledger-item.paid b {
  color: var(--t-ok-11);
}
.userbox { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.user-chip {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: .12rem .6rem; font-weight: 600; font-size: 12px;
}
.view-as-form {
  display: inline-flex; align-items: center; gap: .3rem; min-width: 0;
  padding: .18rem .28rem .18rem .48rem; border: 1px solid var(--t-info-05);
  border-radius: 8px; background: var(--t-neutral-19);
}
.view-as-form label {
  color: var(--t-info-16); font-size: 10px; font-weight: 850; text-transform: uppercase;
  letter-spacing: .035em; white-space: nowrap;
}
.view-as-form select {
  width: auto; max-width: 220px; min-height: 28px; padding: .2rem 1.6rem .2rem .35rem;
  border: 1px solid var(--t-info-06); border-radius: 6px; background: var(--t-neutral-01); color: var(--t-info-25);
  font: inherit; font-weight: 700;
}
.view-as-form .view-as-submit { padding: .2rem .45rem; }
.view-as-banner {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 38px; padding: .35rem .75rem; border-bottom: 1px solid var(--t-warn-10);
  background: var(--t-neutral-26); color: var(--t-warn-18); text-align: center;
}
.view-as-banner strong { font-size: 10px; letter-spacing: .055em; }
.view-as-banner form { margin: 0; }
.view-as-banner button { background: var(--t-neutral-01); border-color: var(--t-warn-10); color: var(--t-warn-16); }

main { padding: .5rem .6rem; }

@media (max-width: 1450px) {
  .topbar {
    height: auto; min-height: 48px; flex-wrap: wrap; gap: .35rem .55rem;
    padding: .3rem .55rem;
  }
  .topbar-ledger {
    position: static; transform: none; order: 4; flex: 1 0 100%;
    max-width: none; justify-content: center; margin: .02rem 0 .12rem;
  }
  .tabs { order: 3; flex: 1 1 auto; }
  .userbox { order: 2; margin-left: auto; }
}

/* ---------- buttons ---------- */
button, .btn {
  font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); padding: .4rem .85rem; font-weight: 600;
  transition: background .12s, border-color .12s;
}
button:hover, .btn:hover { background: var(--bg); text-decoration: none; }
button:disabled, .btn:disabled { opacity: .55; cursor: wait; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: var(--t-neutral-01); }
.btn.primary:hover, button.primary:hover { background: var(--t-info-13); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--bg); color: var(--text); }
button.danger {
  background: transparent; border-color: transparent; color: var(--t-neutral-43);
  padding: .1rem .35rem; font-size: 13px; line-height: 1;
}
button.danger:hover { color: var(--danger); background: var(--t-neutral-15); }
button.slim, .btn.slim { padding: .3rem .7rem; font-size: 12px; }
.payment-allocation-cell { display: grid; grid-template-columns: minmax(92px, 1fr) 78px; gap: .25rem; align-items: center; }
.payment-allocation-cell .applied-cny { min-width: 0; font-size: 11px; }
.btn.add-unavailable {
  background: var(--t-neutral-07); border-color: var(--border); color: var(--muted);
}
.btn.add-unavailable:hover {
  background: var(--t-neutral-33); color: var(--text);
}
button.closed-add {
  border-color: var(--t-ok-04);
  background: var(--t-ok-08);
}
button.closed-add:hover {
  border-color: var(--t-ok-06);
  background: var(--t-ok-09);
}
.icon-btn {
  width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center;
  border-radius: 6px; line-height: 1; font-size: 16px;
}

/* ---------- generic inputs (login, toolbar, forms) ---------- */
input:not(.cell), select:not(.cell) {
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: .3rem .5rem;
}
input:not(.cell):focus, select:not(.cell):focus {
  outline: 2px solid var(--accent-soft); border-color: var(--accent);
}

/* ---------- toolbar ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 .4rem; flex-wrap: wrap; }
.toolbar .hint { color: var(--muted); font-size: 12px; }
.mobile-hint-extra { display: none; }
.inline-form { display: flex; gap: .45rem; align-items: center; margin: 0; }
.inline-form input[type="search"] { width: 260px; }
.quick-filter-select {
  height: 30px; min-width: 132px; max-width: 210px;
  padding: .22rem 1.45rem .22rem .5rem !important;
  font-size: 12px; font-weight: 700; color: var(--t-info-23); background-color: var(--t-neutral-01);
}
.quick-filter-select.compact { min-width: 118px; max-width: 160px; }
.ai-view-btn {
  border-color: var(--t-info-05);
  background: var(--t-neutral-19);
  color: var(--t-info-14);
  white-space: nowrap;
}
.ai-view-btn:hover {
  background: var(--t-info-02);
  color: var(--t-info-16);
  text-decoration: none;
}
.ai-row-mini {
  width: 28px; color: var(--t-info-14); border-color: var(--t-info-05);
  background: var(--t-neutral-19); font-size: 10px; font-weight: 850; text-decoration: none;
}
.ai-row-mini:hover { background: var(--t-info-02); color: var(--t-info-16); text-decoration: none; }
.runtime-data { display: none !important; }

/* ---------- cards ---------- */
article, .card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .55rem .75rem; margin: 0 0 .6rem;
}

/* ---------- spreadsheet ---------- */
.table-wrap {
  overflow: auto; max-height: calc(100vh - 108px);
  background: var(--card); border: 1px solid var(--t-neutral-40); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
}
table.sheet {
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
  width: 100%; min-width: 1080px; font-size: 12.5px;
}
table.order-sheet {
  width: 100%;
  min-width: var(--order-sheet-width, 1604px);
  --sticky-first-col: 96px;
}
table.sheet th {
  position: sticky; top: 0; z-index: 3;
  background: var(--t-neutral-13); color: var(--t-info-21); font-weight: 760; font-size: 11px;
  text-align: left; padding: .22rem .32rem; border-bottom: 1px solid var(--t-neutral-41);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.sheet th.has-filter {
  padding: .08rem .18rem;
  white-space: normal; overflow: visible; text-overflow: clip; vertical-align: middle;
  cursor: pointer;
}
table.sheet th.has-filter:hover {
  background: var(--t-neutral-28); color: var(--t-info-16);
}
table.sheet thead tr.column-head th { top: 0; z-index: 7; }
table.sheet td { border-bottom: 1px solid var(--t-neutral-37); padding: 0; }
table.sheet td + td { border-left: 1px solid var(--t-neutral-35); }
table.sheet tbody tr:hover td { background: var(--t-neutral-20); }
table.sheet tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--t-neutral-07); border-top: 1px solid var(--border); padding: .32rem .4rem;
  font-variant-numeric: tabular-nums;
}

.sub-label { color: var(--muted); font-size: 11.5px; }
table.sheet tr.empty-row td {
  position: static !important; box-shadow: none !important;
  background: var(--t-neutral-03); color: var(--muted); text-align: center;
  padding: 1.1rem .75rem !important; font-weight: 600;
}
table.sheet tr.empty-row:hover td { background: var(--t-neutral-03); }

.datecell { white-space: nowrap; padding: 2px 3px !important; }
.date-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.order-open-button {
  display: flex; align-items: center; justify-content: space-between; gap: .22rem;
  width: 100%; min-width: 0; min-height: 25px; padding: .12rem .28rem;
  border: 1px solid var(--t-info-04); border-radius: 5px;
  background: var(--t-neutral-11); color: var(--t-info-17);
  font: inherit; font-weight: 760; font-variant-numeric: tabular-nums;
  text-align: left; white-space: nowrap;
}
.order-open-arrow {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--t-info-02); color: var(--t-info-14); font-size: 16px; line-height: 1;
}
.order-open-button:hover {
  background: var(--t-info-01); border-color: var(--t-info-07); color: var(--t-info-22);
  text-decoration: none;
}
.order-open-button:hover .order-open-arrow { background: var(--t-info-14); color: var(--t-neutral-01); }
.order-open-button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; position: relative; z-index: 3;
}

.delcell { text-align: center; padding: 0 !important; }
.xdel {
  width: 24px; height: 24px; display: inline-grid; place-items: center;
  background: transparent; border: none; color: var(--t-neutral-43);
  padding: 0; font-size: 16px; line-height: 1; border-radius: 6px;
}
.xdel:hover { color: var(--danger); background: var(--t-neutral-15); }

.statbar {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .4rem .75rem; margin-bottom: .45rem; font-size: 12px; color: var(--muted);
}
.statbar b { color: var(--text); font-variant-numeric: tabular-nums; }
.statbar .sep { color: var(--border); }
.statbar .stat { display: inline-flex; align-items: baseline; gap: .35rem; }
.stat-label { color: var(--muted); font-weight: 700; }
.stat-values { display: inline-flex; flex-wrap: wrap; gap: .2rem .35rem; }
.stat-values .bit { white-space: nowrap; }
.stat-link {
  display: inline-flex; align-items: baseline; gap: .18rem; white-space: nowrap;
  border: 1px solid var(--t-warn-04); border-radius: 999px; padding: 0 .42rem;
  background: var(--t-neutral-24); color: var(--t-warn-14); font-weight: 700;
}
.stat-link b { color: inherit; }
.stat-link:hover { background: var(--t-warn-02); text-decoration: none; }
.stat-link.active { background: var(--t-warn-04); border-color: var(--t-warn-06); color: var(--t-danger-08); }
.stat-link.logistics-chip { background: var(--t-neutral-07); border-color: var(--border); color: var(--t-info-18); }
.stat-link.logistics-chip:hover { background: var(--t-neutral-33); color: var(--text); }
.stat-link.logistics-chip.active { background: var(--t-warn-04); border-color: var(--t-warn-06); color: var(--t-danger-08); }
.stat-link.danger { background: var(--t-neutral-15); border-color: var(--t-danger-02); color: var(--t-danger-06); }
.stat-link.danger:hover { background: var(--t-danger-01); }
.stat-link.danger.active { background: var(--t-danger-02); border-color: var(--t-danger-03); color: var(--t-danger-07); }
.stat-link.neutral { background: var(--t-neutral-07); border-color: var(--border); color: var(--muted); }
.stat-link.neutral:hover { background: var(--t-neutral-33); color: var(--text); }
.stat-link.stale { background: var(--t-neutral-24); border-color: var(--t-warn-04); color: var(--t-warn-14); }
.stat-link.stale:hover { background: var(--t-warn-02); color: var(--t-danger-08); }
.stat-link.stale.active { background: var(--t-warn-04); border-color: var(--t-warn-06); color: var(--t-danger-08); }
.review-triage, .audit-triage { border-color: var(--t-neutral-37); }
.balancebar {
  display: grid; grid-template-columns: .7fr 1.05fr 1.35fr 1.05fr .95fr;
  align-items: stretch; background: var(--t-neutral-02); border-color: var(--t-info-02); gap: .45rem;
}
.balancebar .stat { min-width: 0; }
.balancebar .balance-scope {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: .12rem;
}
.balancebar .balance-card {
  align-self: stretch; padding: .3rem .48rem; border: 1px solid var(--t-info-02);
  border-radius: 7px; background: var(--t-neutral-01); flex-direction: column; align-items: flex-start;
  gap: .12rem;
}
.balancebar .balance-card .stat-values { gap: .12rem .38rem; }
.balancebar .owed b { color: var(--t-warn-14); }
.balancebar .paid b { color: var(--t-ok-10); }
.balancebar.supplier-balance-list {
  grid-template-columns: minmax(150px, .72fr) repeat(auto-fit, minmax(210px, 1fr));
}
.supplier-ledger-card { position: relative; }
.supplier-ledger-card .supplier-policy { align-self: flex-start; }
.supplier-ledger-values { display: grid; grid-template-columns: 1fr; }
.supplier-policy {
  display: inline-flex; align-items: center; width: fit-content;
  padding: .08rem .38rem; border: 1px solid; border-radius: 999px;
  font-size: 10px; font-weight: 800; white-space: nowrap;
}
.supplier-policy.running_balance { color: var(--t-warn-16); background: var(--t-neutral-26); border-color: var(--t-warn-07); }
.supplier-policy.paid_at_order { color: var(--t-ok-11); background: var(--t-neutral-21); border-color: var(--t-ok-04); }

/* ---------- supplier settings ---------- */
.supplier-settings-head {
  display: flex; align-items: end; justify-content: space-between; gap: 1rem;
  margin-bottom: .75rem;
}
.supplier-settings-head h1 { margin: 0 0 .15rem; font-size: 20px; }
.supplier-add-form, .supplier-policy-form {
  display: flex; align-items: end; gap: .5rem; flex-wrap: wrap;
}
.supplier-add-form {
  padding: .55rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
}
.supplier-add-form label, .supplier-policy-form label {
  display: grid; gap: .18rem; color: var(--muted); font-size: 11px; font-weight: 750;
}
.supplier-add-form input, .supplier-add-form select, .supplier-policy-form select {
  min-height: 32px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--t-neutral-01); color: var(--text); padding: .3rem .48rem;
}
.supplier-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: .65rem;
}
.supplier-setting-card {
  display: grid; gap: .65rem; padding: .75rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
}
.supplier-setting-card header { display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.supplier-setting-card h2 { margin: 0 0 .2rem; font-size: 17px; }
.supplier-setting-totals {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: 0;
}
.supplier-setting-totals div {
  padding: .4rem .48rem; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--t-neutral-07);
}
.supplier-setting-totals dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.supplier-setting-totals dd { margin: .08rem 0 0; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; }
.supplier-setting-totals dd.owed { color: var(--t-warn-14); }
.supplier-setting-totals dd.credit { color: var(--t-ok-10); }
.supplier-policy-preview {
  display: grid; gap: .12rem; padding: .42rem .5rem; border-radius: 6px;
  background: var(--t-neutral-07); color: var(--muted); font-size: 11px;
}
.supplier-policy-form { padding-top: .55rem; border-top: 1px solid var(--border-soft); }

@media (max-width: 1100px) {
  .balancebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balancebar .balance-scope { grid-column: 1 / -1; }
}

.period-tabs {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 .45rem; padding-bottom: .05rem;
}
.order-quick-filters { display: grid; gap: .1rem; margin-bottom: .45rem; }
.period-tabs::-webkit-scrollbar { display: none; }
.period-tabs a {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: .4rem;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: 8px; padding: .3rem .55rem; font-size: 12px; font-weight: 700;
  text-decoration: none;
}
.period-tabs a:hover { background: var(--t-neutral-14); text-decoration: none; }
.period-tabs a.active { background: var(--t-neutral-22); border-color: var(--t-info-05); color: var(--accent); }
.period-tabs small {
  color: var(--muted); font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.payment-period-tabs a.closed {
  border-color: var(--t-ok-03); background: var(--t-neutral-34); color: var(--t-ok-09);
}
.month-close-panel {
  display: flex; align-items: center; justify-content: space-between; gap: .65rem;
  margin: 0 0 .45rem; padding: .42rem .55rem;
  border: 1px solid var(--t-info-02); border-radius: var(--radius);
  background: var(--t-neutral-02); box-shadow: var(--shadow);
}
.month-close-title {
  display: flex; align-items: baseline; gap: .42rem; flex: 0 0 150px; min-width: 0;
  color: var(--muted); font-size: 12px;
}
.month-close-title b {
  color: var(--text); white-space: nowrap;
}
.month-close-title span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.month-close-actions {
  display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; flex-wrap: wrap;
  gap: .28rem; margin: 0;
}
.month-close-card {
  display: grid; flex: 1 1 150px; gap: .12rem; min-width: 148px; align-content: start;
  padding: .35rem .45rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--t-neutral-01); box-shadow: 0 1px 1px rgba(15,23,42,.03);
}
.month-close-card.closed {
  border-color: var(--t-ok-03); background: var(--t-neutral-21);
}
.month-close-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
}
.month-close-main {
  font-weight: 800; white-space: nowrap;
}
.month-close-status {
  color: var(--muted); font-size: 10.5px; font-weight: 850; text-transform: uppercase;
  letter-spacing: .02em;
}
.month-close-card.closed .month-close-status {
  color: var(--t-ok-09);
}
.month-close-closed {
  color: var(--t-ok-09); font-size: 10.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.month-close-meta {
  color: var(--muted); font-size: 10.8px; font-weight: 750;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.month-close-issues {
  display: flex; flex-wrap: wrap; gap: .18rem .35rem;
  min-height: 18px; align-items: center; font-size: 10.5px; font-weight: 800;
}
.month-close-issues a {
  color: var(--t-warn-14); text-decoration: none; border-bottom: 1px solid var(--t-warn-06);
}
.month-close-issues a:hover {
  color: var(--t-danger-08); background: var(--t-neutral-24); text-decoration: none;
}
.month-close-issues.ready {
  color: var(--t-ok-09);
}
.month-close-button {
  justify-self: start; margin-top: .04rem;
}
.month-close-button.has-issues {
  color: var(--t-warn-14); border-color: var(--t-warn-06); background: var(--t-neutral-24);
}
.month-close-button.has-issues:hover {
  color: var(--t-danger-08); border-color: var(--t-warn-08); background: var(--t-warn-02);
}
.month-close-actions.muted {
  color: var(--muted); font-size: 11.5px; font-weight: 650;
}
.row-filter-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.row-filter-tabs a {
  display: inline-flex; align-items: center; gap: .28rem;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: .18rem .48rem; font-size: 11.5px; font-weight: 750;
  text-decoration: none;
}
.row-filter-tabs a:hover { background: var(--t-neutral-14); color: var(--text); text-decoration: none; }
.row-filter-tabs a.active { background: var(--t-neutral-22); border-color: var(--t-info-05); color: var(--accent); }
.row-filter-tabs b { color: inherit; font-variant-numeric: tabular-nums; }

.active-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .28rem;
  margin: -.12rem 0 .45rem; min-height: 28px;
}
.active-filter-title {
  color: var(--muted); font-size: 11.5px; font-weight: 800; margin-right: .08rem;
}
.active-filter-chip {
  display: inline-flex; align-items: center; gap: .28rem;
  max-width: 260px; min-height: 24px; padding: .18rem .46rem;
  border: 1px solid var(--t-info-05); border-radius: 999px;
  background: var(--t-neutral-22); color: var(--accent); font-size: 11.5px; font-weight: 750;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.active-filter-chip span {
  flex: 0 0 auto; color: var(--t-neutral-45); font-size: 12px; line-height: 1;
}
.active-filter-chip:hover {
  background: var(--t-info-02); border-color: var(--t-info-06); color: var(--t-info-14);
}
.active-filter-chip.sort-chip {
  border-color: var(--t-freight-03); background: var(--t-neutral-27); color: var(--t-freight-05);
}
.active-filter-chip.sort-chip:hover {
  border-color: var(--t-freight-04); background: var(--t-freight-01); color: var(--t-freight-05);
}
.active-filter-clear {
  display: inline-flex; align-items: center; min-height: 24px;
  padding: .18rem .46rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--t-neutral-01); color: var(--muted); font-size: 11.5px; font-weight: 750;
}
.active-filter-clear:hover {
  background: var(--t-neutral-14); color: var(--text); text-decoration: none;
}

.th-stack {
  display: grid; gap: .22rem; align-content: start; min-width: 0;
}
.th-title {
  display: block; color: inherit; font-weight: 700; line-height: 1.05;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-pop { position: relative; display: block; width: 100%; height: 100%; min-width: 0; }
.filter-pop[open] { z-index: 35; }
.filter-summary {
  display: flex; align-items: center; justify-content: space-between; gap: .22rem;
  width: 100%; min-height: 22px; min-width: 0; list-style: none; cursor: pointer; border-radius: 5px;
  padding: .06rem .18rem; color: var(--muted);
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary:hover, .filter-pop[open] .filter-summary { background: var(--t-neutral-22); color: var(--accent); }
.filter-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.filter-on .filter-summary { color: var(--accent); background: var(--t-neutral-22); }
.sort-on .filter-summary {
  color: var(--t-freight-05); background: var(--t-neutral-27);
}
.filter-label { display: grid; gap: .04rem; min-width: 0; }
.filter-value {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent); font-size: 10px; font-weight: 750; line-height: 1.05;
}
.sort-value {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--t-freight-05); font-size: 10px; font-weight: 800; line-height: 1.05;
}
.filter-caret { color: var(--t-neutral-44); font-size: 10px; line-height: 1; flex: 0 0 auto; margin-top: 0; }
.filter-on .filter-caret { color: var(--accent); }
.sort-on .filter-caret { color: var(--t-freight-05); }
.filter-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  display: grid; gap: .35rem; width: min(220px, 72vw);
  padding: .45rem; background: var(--t-neutral-01); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
  text-align: left; cursor: default;
}
.status-filter-panel { width: min(250px, 78vw); }
.filter-pop.align-right .filter-panel { left: auto; right: 0; }
.filter-panel button { justify-self: start; }
.filter-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.filter-clear { color: var(--muted); }
.filter-checks {
  display: grid; gap: .24rem;
  padding-bottom: .28rem; border-bottom: 1px solid var(--border-soft);
}
.filter-check {
  display: flex; align-items: center; gap: .4rem;
  min-height: 26px; padding: .18rem .35rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--t-neutral-01); color: var(--t-info-23); font-size: 11px; font-weight: 750;
  cursor: pointer;
}
.filter-check:hover { background: var(--t-neutral-07); border-color: var(--t-neutral-42); }
.filter-check input {
  width: 14px; height: 14px; margin: 0; flex: 0 0 auto; accent-color: var(--accent);
}
.filter-check input:checked + span { color: var(--accent); }
.sort-actions {
  display: flex; flex-wrap: wrap; gap: .28rem;
  padding-top: .28rem; border-top: 1px solid var(--border-soft);
}
.sort-choice {
  min-height: 24px; padding: .18rem .42rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--t-neutral-07); color: var(--t-info-18); font-size: 11px; font-weight: 750;
  cursor: pointer;
}
.sort-choice:hover { border-color: var(--t-freight-03); background: var(--t-neutral-27); color: var(--t-freight-05); }
.sort-choice.active {
  border-color: var(--t-freight-04); background: var(--t-freight-01); color: var(--t-freight-05);
}
.sort-choice.muted { color: var(--muted); background: var(--t-neutral-01); }
.head-filter {
  width: 100%; min-width: 0; height: 26px;
  padding: .12rem 1.35rem .12rem .35rem !important;
  border-radius: 6px !important; font-size: 11px !important; font-weight: 650;
  color: var(--t-info-23); background-color: var(--t-neutral-01) !important;
}
.head-chip {
  display: block; width: 100%; min-width: 0; height: 24px; line-height: 22px;
  padding: 0 .35rem; border: 1px solid var(--border); border-radius: 6px;
  color: var(--t-info-23); background: var(--t-neutral-01); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobile-sortbar { display: none; }

/* cells: invisible inputs that fill the cell */
.cell {
  font: inherit; color: var(--text);
  border: none; background: transparent; width: 100%; margin: 0;
  padding: .24rem .3rem; border-radius: 0; display: block;
}
.cell-wrap {
  position: relative; display: block; width: 100%; min-width: 0;
}
.cell-wrap.has-pending .cell {
  min-height: 39px;
  padding-right: .3rem;
  padding-bottom: 1.12rem;
}
.cell-wrap.has-pending select.cell {
  background-position: calc(100% - 12px) 30%, calc(100% - 7px) 30%;
}
.pending-inline {
  position: absolute; left: .22rem; right: auto; bottom: .12rem; top: auto; transform: none;
  z-index: 2; max-width: calc(100% - .56rem); overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; white-space: nowrap; line-height: 1.45;
  padding: 0 .34rem; border: 1px solid var(--t-danger-02); border-radius: 999px;
  background: var(--t-danger-01); color: var(--t-danger-06); font-size: 9.5px; font-weight: 850;
  text-transform: uppercase; letter-spacing: .02em;
}
.pending-inline.stale-pending {
  border-color: var(--t-warn-04); background: var(--t-neutral-24); color: var(--t-warn-14);
}
.cell-wrap.has-area .pending-inline {
  top: auto; bottom: .18rem; transform: none;
}
.cell:not(:disabled):not(.flagged) {
  box-shadow: inset 0 -1px 0 var(--t-neutral-42);
  cursor: text;
}
.cell:not(:disabled):hover {
  background: rgba(29, 78, 216, .08);
  box-shadow: inset 0 0 0 1px var(--t-info-06);
}
.cell.empty-cell:not(.missing-cell):not(.flagged):not(:focus) {
  background: rgba(248, 250, 252, .52);
  color: var(--t-info-12);
  box-shadow: inset 0 -1px 0 var(--t-neutral-39);
}
select.cell.empty-cell:not(.missing-cell):not(.flagged):not(:focus) {
  color: var(--t-info-15);
  font-style: italic;
}
.cell.empty-cell:not(:disabled):not(.missing-cell):not(.flagged):hover {
  background: var(--t-neutral-30);
  box-shadow: inset 0 0 0 1px var(--t-info-08);
}
.cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--t-neutral-01); position: relative; z-index: 1; }
input.cell::placeholder,
textarea.cell::placeholder { color: transparent; }
input.cell:focus::placeholder,
textarea.cell:focus::placeholder,
.drawer input.cell::placeholder,
.drawer textarea.cell::placeholder {
  color: var(--t-neutral-44); opacity: .7; font-style: italic;
}
.cell.missing-cell:not(.flagged):not(:focus) {
  background: var(--t-neutral-18) !important;
  box-shadow: inset 0 -2px 0 var(--t-warn-10);
}
input.cell.missing-cell::placeholder,
textarea.cell.missing-cell::placeholder {
  color: var(--t-warn-14); opacity: .9; font-style: normal; font-weight: 700;
}
select.cell.missing-cell { color: var(--t-warn-16); font-weight: 800; }
.cell:disabled { opacity: 1; cursor: default; }
select.cell {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--t-neutral-44) 50%),
                    linear-gradient(135deg, var(--t-neutral-44) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1rem;
}
select.cell:not(:disabled) { cursor: pointer; }
select.cell:disabled { background-image: none; cursor: default; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
input.cell.num { text-align: right; }
input.cell.receiving-awaiting:not(:focus),
input.cell.received-partial:not(:focus) {
  background: var(--t-neutral-24); color: var(--t-danger-08);
  box-shadow: inset 0 0 0 1px var(--t-warn-06), inset 3px 0 0 var(--t-warn-10);
  font-weight: 800;
}
input.cell.received-complete:not(:focus) {
  background: var(--t-neutral-34); color: var(--t-ok-11);
  box-shadow: inset 0 0 0 1px var(--t-ok-04), inset 3px 0 0 var(--t-ok-07);
  font-weight: 800;
}
.tracking-cost-cell { position: relative; min-width: 0; }
.tracking-cost-cell .cell-wrap.has-pending .cell { padding-right: .3rem; }
.tracking-cost-cell .cell-wrap:not(.has-pending) .duplicate-cost-input { padding-right: 2.2rem; }
.tracking-cost-alert-cell { background: var(--t-neutral-16) !important; }
.duplicate-cost-input:not(:focus) {
  color: var(--t-danger-07) !important; font-weight: 900;
  box-shadow: inset 0 0 0 1px var(--t-danger-04), inset 3px 0 0 var(--t-danger-06) !important;
}
.tracking-cost-flag {
  position: absolute; right: .22rem; top: 50%; transform: translateY(-50%);
  z-index: 2; padding: 0 .24rem; border: 1px solid var(--t-danger-03); border-radius: 4px;
  background: var(--t-danger-01); color: var(--t-danger-07); font-size: 8.5px; font-weight: 950;
  line-height: 1.45; pointer-events: none;
}
table.sheet tr.tracking-cost-duplicate td:first-child {
  box-shadow: inset 4px 0 0 var(--t-danger-06), 1px 0 0 var(--border-soft) !important;
}
.duplicate-cost-chip {
  border-color: var(--t-danger-03) !important; background: var(--t-danger-01) !important;
  color: var(--t-danger-07) !important;
}
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; }
.supplier-cell { font-weight: 700; color: var(--t-info-24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desc-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* strip number spinners + calm down date pickers */
input[type="number"].cell::-webkit-outer-spin-button,
input[type="number"].cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].cell { -moz-appearance: textfield; appearance: textfield; }
input[type="date"].cell { font-size: 11px; padding-left: .2rem; padding-right: .1rem; }
input[type="date"].cell::-webkit-calendar-picker-indicator {
  width: 12px; margin-left: -10px; padding: 0; opacity: .16;
}
tr:hover input[type="date"].cell::-webkit-calendar-picker-indicator { opacity: .7; }
input[type="date"].cell.empty-cell:not(:focus)::-webkit-datetime-edit { color: transparent; }
input[type="date"].cell.empty-cell:not(:focus)::-webkit-calendar-picker-indicator { opacity: .18; }

/* computed / read-only cells */
td.comp {
  background: var(--t-neutral-10); color: var(--muted); padding: .28rem .32rem;
  text-align: right; font-variant-numeric: tabular-nums;
}
td.comp[title] { text-align: left; }
td.comp.num { text-align: right; }
.goods-coverage-cell {
  position: relative; isolation: isolate; overflow: hidden;
  padding: .18rem .3rem !important; background: var(--t-neutral-25) !important;
}
.goods-coverage-cell::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0;
  width: var(--goods-covered-pct, 0%); background: var(--t-ok-01);
  border-right: 1px solid rgba(22, 163, 74, .24); pointer-events: none;
}
.goods-coverage-cell.goods-coverage-paid { background: var(--t-ok-01) !important; }
.goods-coverage-cell.goods-coverage-paid::before { border-right: 0; }
.goods-coverage-cell.goods-coverage-unpaid { background: var(--t-neutral-24) !important; }
.goods-proposal-cell {
  background: var(--t-neutral-16) !important;
  box-shadow: inset 3px 0 0 var(--t-danger-05);
  text-align: left !important;
  padding: .22rem .38rem !important;
}
.goods-proposal-cell.stale {
  background: var(--t-neutral-24) !important;
  box-shadow: inset 3px 0 0 var(--t-warn-10);
}
.goods-pending-label, .goods-approved-value {
  position: relative; z-index: 1; display: block; line-height: 1.12;
}
.goods-pending-label {
  color: var(--t-danger-06); font-size: 9.5px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .025em;
}
.goods-pending-label.stale { color: var(--t-warn-14); }
.goods-approved-value { margin-top: .08rem; color: var(--t-info-15); font-size: 9.5px; font-weight: 700; }
.goods-cost-value { position: relative; z-index: 1; display: block; }
.goods-cost-value { color: var(--t-info-24); font-weight: 800; line-height: 1.15; }
.goods-edit-button {
  position: relative; z-index: 1; display: block; width: 100%; min-height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  text-align: inherit; font: inherit; cursor: pointer;
}
.goods-edit-button:hover .goods-cost-value { color: var(--t-info-14); text-decoration: underline; }
.goods-edit-button:focus-visible { outline: 2px solid var(--t-info-11); outline-offset: 1px; border-radius: 4px; }
.goods-edit-button.missing-cell {
  padding: .18rem .28rem; background: var(--t-neutral-24); color: var(--t-danger-08);
  box-shadow: inset 0 0 0 1px var(--t-warn-06), inset 3px 0 0 var(--t-warn-10);
  text-align: left;
}
.goods-edit-button.missing-cell .goods-cost-value { color: var(--t-danger-08); }
.goods-missing-label {
  display: block; margin-top: .08rem; color: var(--t-warn-14);
  font-size: 9.5px; font-weight: 800; line-height: 1.05;
}
.goods-usd-cell { color: var(--muted); }
.goods-usd-val { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
table.sheet tr.cancelled td .goods-usd-val { text-decoration: line-through; }
.missing-core-cell { background: var(--t-neutral-26) !important; }
.goods-inline-cell { padding: 0 !important; position: relative; }
.goods-inline-cell .goods-inline-cost {
  position: relative; z-index: 1; min-height: 28px; font-weight: 800;
}
.goods-coverage-key { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; font-weight: 750; }
.coverage-swatch { width: 18px; height: 10px; border: 1px solid var(--t-neutral-42); border-radius: 3px; }
.coverage-swatch.paid { background: var(--t-ok-01); border-color: var(--t-ok-04); }
.coverage-swatch.partial { background: linear-gradient(90deg, var(--t-ok-01) 50%, var(--t-neutral-24) 50%); border-color: var(--t-ok-05); }
.coverage-swatch.unpaid { background: var(--t-neutral-24); border-color: var(--t-warn-04); }
.split-summary-cell {
  padding: .12rem !important;
  color: var(--t-info-18); background: var(--t-neutral-07);
  overflow: hidden;
}
.split-summary-action {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  width: 100%; min-height: 38px; margin: 0; padding: .22rem .8rem .2rem .28rem;
  border: 1px solid var(--t-info-05); border-radius: 6px;
  background: var(--t-neutral-19); color: var(--t-info-19); text-align: left; cursor: pointer;
  font: inherit; line-height: 1.05;
}
.split-summary-action strong,
.split-summary-action small {
  grid-column: 1; display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.split-summary-action strong {
  overflow: visible; white-space: normal; font-size: 10.2px; font-weight: 900; line-height: 1.05;
}
.split-summary-action small {
  margin-top: .1rem; color: var(--t-info-15); font-size: 8.6px; font-weight: 750; white-space: nowrap;
}
.split-summary-action.needs-entry {
  border-color: var(--t-warn-06); background: var(--t-neutral-24); color: var(--t-danger-08);
}
.split-summary-action.needs-entry small { color: var(--t-warn-14); }
.split-summary-action:hover { border-color: var(--t-info-09); background: var(--t-info-02); }
.split-summary-action.needs-entry:hover { border-color: var(--t-warn-09); background: var(--t-warn-02); }
.split-summary-action:focus-visible {
  outline: 2px solid var(--t-info-11); outline-offset: 1px;
}
.split-summary-arrow {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  color: currentColor; font-size: 16px; font-weight: 900;
}

tr.other-shipping td { background: var(--t-neutral-23); }
tr.other-shipping .cell { color: var(--t-freight-05); font-weight: 650; }
.type-other-shipping {
  border-color: var(--t-freight-03) !important;
  background: var(--t-freight-01) !important;
  color: var(--t-freight-05) !important;
}
.shipping-category-cell { color: var(--t-freight-05); }
.shipping-category-label {
  display: inline-block; padding: .08rem .38rem; border: 1px solid var(--t-freight-03);
  border-radius: 999px; font-weight: 800;
}
.shipping-category-cell small { display: block; margin-top: .1rem; color: var(--t-info-15); }
.shipping-not-applicable { color: var(--t-info-15); font-weight: 700; text-align: center; }
tr.draft td { background: var(--t-neutral-07); }
.draft-pill {
  display: inline-block; margin-right: .25rem; padding: 0 .32rem;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); background: var(--t-neutral-01); font-size: 10.5px; font-weight: 700;
}
.payment-draft-cell { padding-top: .12rem !important; }
.payment-draft-pill { margin: .05rem .35rem .12rem; }
table.payment-sheet tr.draft td { background: var(--t-neutral-07); }

.edit-guide-swatch {
  display: inline-block; width: 18px; height: 10px; border: 1px solid var(--t-neutral-42);
  border-radius: 3px; background: var(--t-neutral-01);
}
.edit-guide-swatch.missing { border-color: var(--t-warn-10); background: var(--t-neutral-24); }
.edit-guide-swatch.cost { border-color: var(--t-ok-04); background: var(--t-ok-01); }

/* save feedback */
@keyframes flash-ok { 0% { background: var(--t-ok-02); } 100% { background: transparent; } }
.cell.saved { animation: flash-ok .9s ease-out; }
.cell.savefail { background: var(--t-danger-01) !important; }
.save-status {
  position: fixed; right: .75rem; bottom: .75rem; z-index: 120;
  min-width: 104px; max-width: min(320px, calc(100vw - 1.5rem));
  padding: .45rem .65rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--t-neutral-46); color: var(--t-neutral-01); box-shadow: 0 10px 24px rgba(16, 24, 40, .18);
  font-size: 12px; font-weight: 700; line-height: 1.25;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.save-status.show { opacity: .96; transform: translateY(0); }
.save-status.ok { background: var(--t-ok-12); border-color: var(--t-ok-11); }
.save-status.pending { background: var(--t-danger-10); border-color: var(--t-danger-08); }
.save-status.fail { background: var(--t-danger-09); border-color: var(--t-danger-07); }

/* status pill select — traffic-light palette */
select.cell[name="status"], select.cell[name="method"], select.cell[name="goods_or_shipping"] {
  font-weight: 600; font-size: 12px; padding-left: .5rem;
}
select.st-production { color: var(--t-info-24); }
select.st-shipped { color: var(--t-warn-16); }
select.st-delivered { color: var(--t-ok-11); }
select.st-cancelled { color: var(--t-danger-06); text-decoration: line-through; }

/* cancelled orders: struck through + dimmed so the supplier sees it as dead, value excluded from totals */
table.sheet tr.cancelled td { text-decoration: line-through; color: var(--t-info-10); opacity: .75; }
table.sheet tr.cancelled td .order-chip.status,
table.sheet tr.cancelled td .goods-cost-value { text-decoration: line-through; }
table.sheet tr.cancelled td select.cell,
table.sheet tr.cancelled td input.cell,
table.sheet tr.cancelled td textarea.cell { text-decoration: line-through; }
table.sheet tr.cancelled td.delcell, table.sheet tr.cancelled td .xdel { text-decoration: none; }
.order-chip.status.st-cancelled { background: var(--t-danger-01); color: var(--t-danger-06); border-color: var(--t-danger-02); }

/* traffic-light row health: red = delayed/stuck, yellow = attention, green = done */
table.sheet tr.h-late td { background: var(--t-neutral-06); }
table.sheet tr.h-warn td { background: var(--t-neutral-08); }
table.sheet tr.h-ok td   { background: var(--t-neutral-17); }
table.sheet tr.h-late td:first-child { box-shadow: inset 4px 0 0 var(--t-danger-06); }
table.sheet tr.h-warn td:first-child { box-shadow: inset 4px 0 0 var(--t-warn-14); }
table.sheet tr.h-ok td:first-child   { box-shadow: inset 4px 0 0 var(--t-ok-09); }
table.sheet tr.h-late:hover td { background: var(--t-neutral-31); }
table.sheet tr.h-warn:hover td { background: var(--t-warn-01); }
table.sheet tr.h-ok:hover td   { background: var(--t-neutral-36); }
table.sheet tr.tracking-overdue td { background: var(--t-danger-01); }
table.sheet tr.tracking-overdue:hover td { background: var(--t-danger-02); }
table.sheet tr.tracking-overdue td:first-child { box-shadow: inset 5px 0 0 var(--t-danger-06); }
table.sheet tr.tracking-overdue [name="tracking_no"],
table.sheet tr.tracking-overdue .split-summary-action.needs-entry {
  background: var(--t-danger-02) !important; border-color: var(--t-danger-05) !important; color: var(--t-danger-07) !important;
}
/* pending-approval red on a cell must stay visible over any row tint */
table.sheet tr .cell.flagged { background: var(--t-danger-01) !important; }
table.sheet tr .cell-wrap.has-stale .cell.flagged {
  background: var(--t-neutral-24) !important;
  box-shadow: inset 2px 0 0 var(--t-warn-10);
}

table.sheet thead tr.column-head th:first-child,
table.sheet tbody tr:not(.sec) td:first-child,
table.sheet tfoot td:first-child {
  position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--border-soft);
}
table.sheet thead tr.column-head th:first-child { z-index: 9; background: var(--t-neutral-07); }
table.sheet tfoot td:first-child { z-index: 4; background: var(--t-neutral-07); }
table.sheet tbody tr:not(.sec):not(.sub):not(.h-late):not(.h-warn):not(.h-ok):not(.draft) td:first-child {
  background: var(--card);
}
table.order-sheet thead tr.column-head th:nth-child(2),
table.order-sheet tbody tr[id^="order-"] td:nth-child(2) {
  position: sticky; left: var(--sticky-first-col); z-index: 2;
  box-shadow: 1px 0 0 var(--border-soft);
}
table.order-sheet thead tr.column-head th:first-child { z-index: 11; }
table.order-sheet thead tr.column-head th:nth-child(2) { z-index: 10; background: var(--t-neutral-07); }
table.order-sheet tbody tr[id^="order-"]:not(.h-late):not(.h-warn):not(.h-ok):not(.draft) td:nth-child(2) {
  background: var(--card);
}
table.order-sheet tbody tr[id^="order-"]:not(.h-late):not(.h-warn):not(.h-ok):not(.draft):hover td:first-child,
table.order-sheet tbody tr[id^="order-"]:not(.h-late):not(.h-warn):not(.h-ok):not(.draft):hover td:nth-child(2) {
  background: var(--t-neutral-28);
}

.dot-late { background: var(--t-danger-05); } .dot-warn { background: var(--t-warn-11); } .dot-ok { background: var(--t-ok-08); }

/* receipt file input */
.cell-file {
  position: fixed; left: -100vw; top: -100vh;
  width: 1px !important; height: 1px !important; opacity: 0; overflow: hidden;
  padding: 0 !important; border: 0 !important; margin: 0 !important;
  pointer-events: none;
}
.receipt-upload, .receipt-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 62px; height: 24px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--card); color: var(--muted); font-size: 11px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.receipt-upload:hover, .receipt-link:hover {
  background: var(--bg); color: var(--text); text-decoration: none;
}
.receipt-upload.need-receipt {
  background: var(--t-neutral-24); border-color: var(--t-warn-04); color: var(--t-warn-14);
}
.receipt-upload.need-receipt:hover {
  background: var(--t-warn-02); color: var(--t-danger-08);
}
.receipt-upload.uploading {
  pointer-events: none; cursor: wait;
  background: var(--t-neutral-22); border-color: var(--t-info-05); color: var(--accent);
}
table.payment-sheet textarea.cell.payment-note-cell {
  min-height: 28px; height: 28px; resize: none; overflow: hidden;
  line-height: 1.25; white-space: nowrap;
}
table.payment-sheet textarea.cell.payment-note-cell:focus {
  min-height: 72px; height: 72px; resize: vertical; overflow: auto; white-space: normal;
  background: var(--t-neutral-01) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .16), inset 0 0 0 1px var(--accent);
  position: relative; z-index: 20;
}
table.payment-sheet tbody tr.month-closed td:first-child {
  box-shadow: inset 3px 0 0 var(--t-ok-08);
}
.payment-card-status { display: none; }

/* ---------- read-only tables (audit / review) ---------- */
table.grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.grid.audit-grid { min-width: 1080px; }
table.grid.review-grid { min-width: 1120px; }
table.grid th {
  text-align: left; color: var(--t-info-24); font-weight: 750; font-size: 11.5px;
  padding: .45rem .55rem; border-bottom: 1px solid var(--border); background: var(--t-neutral-07);
}
table.grid td { padding: .4rem .55rem; border-bottom: 1px solid var(--border-soft); }
table.grid tbody tr:hover td { background: var(--t-neutral-28); }
table.grid tr.empty-row td {
  color: var(--muted); background: var(--t-neutral-03); font-weight: 600;
  padding: 1.1rem .75rem; text-align: left;
}
td.desc { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-context, .audit-context { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-links, .audit-links { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.review-links .btn.slim, .review-links button.slim,
.audit-links .btn.slim, .audit-links button.slim { padding: .18rem .45rem; font-size: 11px; }
.audit-revert {
  background: var(--t-neutral-24); border-color: var(--t-warn-04); color: var(--t-warn-14);
}
.audit-revert:hover {
  background: var(--t-warn-02); border-color: var(--t-warn-06); color: var(--t-danger-08);
}
.audit-tests-link, .audit-tests-note {
  display: inline-flex; align-items: center; margin-left: .35rem;
  border: 1px solid var(--t-neutral-37); border-radius: 999px; padding: .04rem .38rem;
  background: var(--t-neutral-07); color: var(--muted); font-size: 11px; font-weight: 750;
  white-space: nowrap;
}
.audit-tests-link:hover { background: var(--t-neutral-22); border-color: var(--t-info-05); color: var(--accent); }
.decision-cell { min-width: 156px; }
.decision-actions, .pend-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
}
.decision-actions .slim, .pend-actions .slim { padding: .2rem .46rem; font-size: 11px; }
.decision-actions button:disabled, .pend-actions button:disabled {
  opacity: .68; cursor: not-allowed;
}
.decision-hint {
  margin-top: .24rem; color: var(--muted); font-size: 10.5px; line-height: 1.25;
  max-width: 190px;
}
.review-stale-note {
  display: inline-flex; align-items: center; width: fit-content;
  margin-top: .2rem; padding: .08rem .38rem;
  border: 1px solid var(--t-warn-04); border-radius: 999px;
  background: var(--t-neutral-24); color: var(--t-warn-14);
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.review-stale-value {
  background: var(--t-neutral-24);
}
td.review-stale-value .hint {
  display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.review-change-row td:first-child { box-shadow: inset 3px 0 0 var(--t-neutral-42); }
.review-change-row.sev-row-CRITICAL td:first-child { box-shadow: inset 4px 0 0 var(--t-danger-05); }
.review-change-row.sev-row-HIGH td:first-child { box-shadow: inset 4px 0 0 var(--t-warn-09); }
.review-current-cell {
  background: var(--t-neutral-24); color: var(--t-danger-10);
  box-shadow: inset 3px 0 0 var(--t-warn-06);
}
.review-proposed-cell {
  position: relative; background: var(--t-neutral-21); color: var(--t-ok-11);
  box-shadow: inset 3px 0 0 var(--t-ok-07);
}
.review-change-arrow {
  display: inline-block; margin-right: .34rem; color: var(--t-ok-08); font-weight: 950;
}
.financial-impact {
  display: flex; flex-direction: column; gap: .12rem;
  margin-top: .36rem; padding: .28rem .42rem;
  border: 1px solid var(--t-warn-07); border-radius: 5px;
  background: var(--t-neutral-26); color: var(--t-warn-17);
  font-size: 10.5px; font-weight: 800; line-height: 1.25;
}
.financial-impact .increase { color: var(--t-danger-06); }
.financial-impact .decrease { color: var(--t-ok-11); }
.empty-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--muted); font-weight: 600; padding: 1rem;
}

/* severity + status badges */
.badge {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.sev-CRITICAL { background: var(--t-danger-01); color: var(--t-danger-06); }
.sev-HIGH     { background: var(--t-warn-02); color: var(--t-warn-13); }
.sev-MED      { background: var(--t-warn-03); color: var(--t-warn-15); }
.sev-LOW, .sev-INFO { background: var(--t-neutral-29); color: var(--muted); }
.sev-CRITICAL-text { color: var(--t-danger-06); }
.sev-HIGH-text { color: var(--t-warn-13); }

/* ---------- login ---------- */
.login-box { max-width: 360px; margin: 12vh auto; }
.login-box input { width: 100%; margin-bottom: .7rem; }
.login-box button { width: 100%; background: var(--accent); border-color: var(--accent); color: var(--t-neutral-01); }
.error { color: var(--danger); font-size: 12.5px; }

/* ---------- v2: approval flags, chips, drawer, resize, review ---------- */
.cell.flagged { background: var(--t-danger-01) !important; box-shadow: inset 2px 0 0 var(--danger); }
.cell-wrap.has-stale .cell.flagged {
  background: var(--t-neutral-24) !important;
  box-shadow: inset 2px 0 0 var(--t-warn-10);
}
.pflag {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 0 .34rem; border: 1px solid var(--t-danger-02); border-radius: 999px;
  background: var(--t-danger-01); color: var(--t-danger-06); font-size: 10px; font-weight: 850;
  line-height: 1.45; text-transform: uppercase; letter-spacing: .02em;
  vertical-align: middle; white-space: nowrap;
}
.pflag.stale-pending {
  border-color: var(--t-warn-04); background: var(--t-neutral-24); color: var(--t-warn-14);
}
.tab-review.has-pending { background: var(--t-danger-01); color: var(--t-danger-06); font-weight: 700; }

td.ro { cursor: pointer; }
.chip {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: .08rem .55rem; font-size: 11px; font-weight: 600;
}
.chip:hover { text-decoration: none; filter: brightness(.95); }
.muted-chip { background: var(--t-neutral-29); color: var(--muted); }

/* column resize grips */
th { position: relative; }
.col-grip {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 5;
}
.col-grip:hover { background: linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px); }
body.col-resizing { cursor: col-resize; user-select: none; }

/* detail drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .25); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: var(--card); border-left: 1px solid var(--border); z-index: 100;
  box-shadow: -12px 0 32px rgba(16, 24, 40, .12); display: flex; flex-direction: column;
  opacity: 1; animation: slide-in .16s ease-out;
}
@keyframes slide-in {
  from { transform: translateX(30px); }
  to { transform: translateX(0); }
}
.drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: .55rem .75rem .45rem; border-bottom: 1px solid var(--border);
}
.drawer-title { font-size: 15px; font-weight: 700; display: flex; gap: .5rem; align-items: center; }
.drawer-body { flex: 1 1 auto; min-height: 0; padding: .55rem .75rem .9rem; overflow-y: auto; }
.drawer-section {
  padding: 0 0 .55rem; margin: 0 0 .6rem; border-bottom: 1px solid var(--border-soft);
}
.drawer-section.pending-section {
  margin: 0 0 .7rem; padding: .5rem .55rem .35rem;
  border: 1px solid var(--t-warn-04); border-radius: 8px; background: var(--t-neutral-24);
}
.pending-change-card {
  margin: .34rem 0; padding: .44rem .48rem !important;
  border: 1px solid var(--t-danger-02) !important; border-radius: 8px;
  background: var(--t-neutral-01) !important;
}
.pending-change-card.stale {
  border-color: var(--t-warn-04) !important; background: var(--t-neutral-26) !important;
}
.pending-change-head {
  display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
}
.pending-value-compare {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .34rem; align-items: stretch; margin-top: .36rem;
}
.pending-value {
  min-width: 0; padding: .34rem .42rem; border: 1px solid; border-radius: 7px;
  overflow-wrap: anywhere;
}
.pending-value small {
  display: block; margin-bottom: .08rem; font-size: 9.5px; font-weight: 850;
  text-transform: uppercase;
}
.pending-value b { display: block; font-size: 12px; line-height: 1.25; }
.pending-value.approved { border-color: var(--t-warn-04); background: var(--t-neutral-24); color: var(--t-danger-08); }
.pending-value.proposed { border-color: var(--t-ok-04); background: var(--t-neutral-21); color: var(--t-ok-11); }
.pending-value-arrow { align-self: center; color: var(--t-info-15); font-size: 16px; font-weight: 900; }
.drawer-section.setup-section {
  margin: 0 0 .7rem; padding: .5rem .55rem .42rem;
  border: 1px solid var(--t-info-02); border-radius: 8px; background: var(--t-neutral-04);
}
.drawer-section.logistics-summary-section,
.drawer-section.shipment-detail-section,
.drawer-section.shipment-status-section,
.drawer-section.fulfillment-section,
.drawer-section.method-section,
.drawer-section.tracking-section,
.drawer-section.destination-section {
  margin: 0 0 .55rem; padding: .46rem .55rem .38rem;
  border: 1px solid var(--t-info-02); border-radius: 8px; background: var(--t-neutral-04);
}
.drawer-section.method-section {
  border-color: var(--t-ok-03); background: var(--t-neutral-09);
}
.drawer-section.fulfillment-section {
  border-color: var(--t-info-05); background: var(--t-neutral-04);
}
.drawer-section.tracking-section {
  border-color: var(--t-info-05); background: var(--t-neutral-04);
}
.drawer-section.destination-section {
  border-color: var(--t-freight-02); background: var(--t-neutral-05);
}
.drawer-section.last { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.drawer-section-title {
  margin: 0 0 .35rem; color: var(--muted); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em;
}
.drawer-section-heading-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .45rem; margin-bottom: .35rem;
}
.drawer-section-heading-row .drawer-section-title { margin-bottom: 0; }
.drawer .fld { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
.drawer .fld .cell, .drawer .fld select.cell {
  display: block; width: 100%; margin-top: .15rem; font-weight: 400; color: var(--text);
  border: 1px solid var(--border) !important; border-radius: 7px; padding: .28rem .45rem;
  background: var(--card) !important;
}
.drawer .fld .cell-wrap { margin-top: .15rem; }
.drawer .fld .cell-wrap .cell, .drawer .fld .cell-wrap select.cell { margin-top: 0; }
.drawer .cell-wrap.has-pending .cell { padding-right: .3rem; }
.drawer .pending-inline { right: .45rem; }
.drawer .fld .cell.flagged { background: var(--t-danger-01) !important; }
.drawer .fld .cell.missing-cell:not(.flagged):not(:focus) {
  background: var(--t-neutral-26) !important; box-shadow: inset 0 0 0 1px var(--t-warn-10), inset 3px 0 0 var(--t-warn-12);
}
.drawer .fld .cell:disabled { background: var(--t-neutral-10) !important; color: var(--muted); }
.drawer .two { display: grid; grid-template-columns: 1fr 1fr; gap: .05rem .55rem; }
.drawer .fld.wide { margin-top: .1rem; }
.drawer .two .fld.wide { grid-column: 1 / -1; }
.setup-progress, .shipment-progress {
  display: grid;
  gap: .28rem; margin: .05rem 0 .45rem;
}
.setup-progress {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); margin-bottom: .08rem;
}
.shipment-progress { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logistics-summary-section .shipment-progress { margin-bottom: 0; }
.setup-progress span, .shipment-progress span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 7px; padding: .18rem .32rem;
  background: var(--t-neutral-07); color: var(--muted); text-align: center;
  font-size: 10.5px; font-weight: 850; text-transform: uppercase; letter-spacing: .02em;
}
.setup-progress span.complete, .shipment-progress span.complete {
  background: var(--t-neutral-34); border-color: var(--t-ok-03); color: var(--t-ok-09);
}
.setup-progress span.missing, .shipment-progress span.missing {
  background: var(--t-neutral-24); border-color: var(--t-warn-04); color: var(--t-warn-14);
}
.shipment-detail-section .shipment-progress,
.shipment-status-section .shipment-progress {
  margin-bottom: .5rem;
}
.shipment-date-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(2, minmax(0, 1fr));
  gap: .05rem .45rem; margin: .05rem 0 .45rem;
}
.split-date-summary-grid {
  align-items: stretch;
}
.split-date-card {
  min-width: 0; padding: .32rem .42rem; border: 1px solid var(--border);
  border-radius: 7px; background: var(--t-neutral-01); color: var(--muted);
  font-size: 10.8px; font-weight: 750; line-height: 1.18;
}
.split-date-card span,
.split-date-card small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.split-date-card b {
  display: block; margin: .08rem 0; color: var(--text);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.split-date-card.complete {
  border-color: var(--t-ok-03); background: var(--t-neutral-34); color: var(--t-ok-09);
}
.split-date-card.missing {
  border-color: var(--t-warn-04); background: var(--t-neutral-24); color: var(--t-warn-14);
}
.fulfillment-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .28rem; margin: .05rem 0 .5rem;
}
.fulfillment-summary span {
  min-width: 0; padding: .24rem .34rem; border: 1px solid var(--border);
  border-radius: 7px; background: var(--t-neutral-01); color: var(--muted);
  font-size: 10.8px; font-weight: 750; line-height: 1.15;
}
.fulfillment-summary b {
  display: block; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums;
}
.fulfillment-summary span.complete {
  border-color: var(--t-ok-03); background: var(--t-neutral-34); color: var(--t-ok-09);
}
.fulfillment-summary span.missing {
  border-color: var(--t-warn-04); background: var(--t-neutral-24); color: var(--t-warn-14);
}
.shipment-record-guide {
  display: grid; gap: .12rem; margin: 0 0 .45rem; padding: .42rem .5rem;
  border: 1px solid var(--t-info-06); border-radius: 8px;
  background: var(--t-neutral-19); color: var(--t-info-24); font-size: 11px; line-height: 1.25;
}
.shipment-record-guide strong { color: var(--t-info-14); font-size: 11.5px; }
.shipment-record-guide small { color: var(--t-info-15); font-weight: 700; }
.shipment-split-list {
  display: grid; gap: .45rem;
}
.shipment-split-row {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--t-neutral-01); overflow: hidden;
}
@keyframes drawer-focus-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  20%, 70% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .2); }
}
.shipment-split-row.drawer-focus-pulse {
  border-color: var(--t-info-11);
  animation: drawer-focus-pulse 1.1s ease-in-out 2;
}
.shipment-split-head {
  display: flex; align-items: center; gap: .35rem;
  min-height: 34px; padding: .34rem .45rem;
  border-bottom: 1px solid var(--border-soft); background: var(--t-neutral-07);
}
.shipment-split-title {
  font-weight: 850; font-size: 12px; color: var(--t-info-24);
}
.shipment-split-meta {
  min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 11px; font-weight: 650;
}
.shipment-delete {
  flex: 0 0 auto;
}
.shipment-split-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .05rem .45rem; padding: .42rem .45rem .5rem;
}
.shipment-split-grid .fld {
  margin-bottom: .12rem;
}
.fld-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .35rem;
  min-width: 0;
}
.qty-limit {
  flex: 0 0 auto; color: var(--t-freight-05); font-size: 10.5px; font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.field-hint {
  display: block; margin-top: .14rem; color: var(--muted);
  font-size: 10.6px; font-weight: 700; line-height: 1.25;
}
.split-qty-hint {
  min-height: 14px;
}
.shipment-split-grid .fld.wide {
  grid-column: 1 / -1;
}
.empty-mini {
  padding: .55rem; border: 1px dashed var(--t-neutral-42); border-radius: 8px;
  color: var(--muted); background: var(--t-neutral-01); font-weight: 650; font-size: 12px;
}
.shipment-date-grid .fld {
  margin-bottom: 0;
}
.shipment-field {
  margin-top: .45rem;
}
.shipment-field:first-of-type {
  margin-top: 0;
}
.shipment-detail-section .fld.wide {
  margin-bottom: 0;
}
.drawer-section-heading-row .pending-inline {
  position: static; transform: none; flex: 0 0 auto; max-width: 150px;
}
.method-choice-group {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .28rem; margin-bottom: .48rem;
}
.method-choice {
  position: relative; display: grid; place-items: center; min-height: 32px; min-width: 0;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--t-neutral-01); color: var(--t-info-23); font-size: 11.5px; font-weight: 800;
  cursor: pointer; user-select: none; overflow: hidden;
}
.method-choice input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.method-choice span {
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 .25rem; pointer-events: none;
}
.method-choice:hover { background: var(--t-neutral-14); }
.method-choice.active {
  background: var(--t-neutral-22); border-color: var(--t-info-05); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--t-info-05);
}
.method-choice.missing:not(.active) {
  background: var(--t-neutral-24); border-color: var(--t-warn-04); color: var(--t-warn-14);
}
.method-choice.disabled {
  cursor: default; background: var(--t-neutral-10); color: var(--muted);
}
.method-choice.disabled input { cursor: default; }
.method-choice.custom { grid-column: 1 / -1; justify-content: start; justify-items: start; }
.method-choice.saved { animation: flash-ok .9s ease-out; }
.method-choice.savefail { background: var(--t-danger-01) !important; border-color: var(--t-danger-02); }
.method-section .method-choice-group,
.shipment-detail-section .method-choice-group { margin-bottom: .05rem; }
.tracking-section .hint,
.shipment-detail-section .hint {
  display: inline-flex; margin-top: .18rem; font-size: 11px; font-weight: 650;
}
.destination-section textarea.cell.area,
.shipment-detail-section textarea.cell.area { min-height: 5.6em; }
.cell.area { resize: vertical; min-height: 3.2em; font-family: inherit; }
table.order-sheet textarea.cell.address-cell,
table.order-sheet textarea.cell.notes-cell {
  min-height: 28px; height: 28px; resize: none; overflow: hidden;
  line-height: 1.25; white-space: nowrap; padding-top: .32rem; padding-bottom: .22rem;
}
table.order-sheet textarea.cell.address-cell:focus,
table.order-sheet textarea.cell.notes-cell:focus {
  min-height: 72px; height: 72px; resize: vertical; overflow: auto; white-space: normal;
  background: var(--t-neutral-01) !important;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .16), inset 0 0 0 1px var(--accent);
  position: relative; z-index: 20;
}
.row-shipment-check { display: none; }
.order-card-status { display: none; }
.pend-list, .hist { list-style: none; padding: 0; margin: .3rem 0 .8rem; }
.pending-section .pend-list { margin-bottom: .1rem; }
.pend-list li { padding: .35rem 0; border-bottom: 1px solid var(--border-soft); }
.pending-section .pend-list li:last-child { border-bottom: 0; }
.pend-actions { margin-top: .3rem; }
.hist li { padding: .2rem 0; border-bottom: 1px solid var(--border-soft); font-size: 12px; }
.drawer-foot {
  flex: 0 0 auto; border-top: 1px solid var(--border); padding: .55rem .75rem;
  background: var(--card); display: flex; justify-content: flex-end;
}
.tracking-cost-warning {
  border-color: var(--t-danger-03) !important; background: var(--t-neutral-16) !important; color: var(--t-danger-09);
}
.tracking-cost-warning .drawer-section-title { color: var(--t-danger-07); }
.tracking-cost-warning .btn { margin-top: .35rem; border-color: var(--t-danger-03); color: var(--t-danger-07); }
button.danger-solid { background: var(--t-neutral-15); border-color: var(--t-danger-02); color: var(--danger); }
button.danger-solid:hover { background: var(--danger); color: var(--t-neutral-01); }

@media (max-width: 700px) {
  .topbar {
    height: auto; min-height: 40px; flex-wrap: wrap; align-items: center;
    gap: .3rem .45rem; padding: .3rem .5rem;
  }
  .brand { font-size: 12.5px; gap: .35rem; }
  .tabs {
    order: 3; flex: 1 0 auto; min-width: 0; gap: .1rem;
    overflow-x: auto; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: .24rem .45rem; white-space: nowrap; }
  .tab-alert { padding: 0 .24rem; font-size: 9.5px; }
  .topbar-ledger {
    order: 4; flex: 1 0 100%; justify-content: flex-start;
    gap: .55rem; overflow-x: auto; scrollbar-width: none;
  }
  .topbar-ledger::-webkit-scrollbar { display: none; }
  .topbar-ledger-item {
    flex: 0 0 auto;
  }
  .topbar-ledger-item span { font-size: 9px; }
  .topbar-ledger-item b { font-size: 13.5px; }
  .supplier-approval-guide {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem .6rem; text-align: left;
  }
  .supplier-approval-guide strong { white-space: normal; }
  .supplier-approval-guide > span { grid-column: 1; }
  .supplier-approval-guide .note-dismiss { grid-column: 2; grid-row: 1 / span 2; }
  .userbox { flex: 0 0 auto; gap: .25rem; margin-left: auto; }
  .view-as-form { gap: .18rem; padding-left: .28rem; }
  .view-as-form label { display: none; }
  .view-as-form select { max-width: 145px; min-height: 26px; font-size: 11px; }
  .view-as-form .view-as-submit { display: none; }
  .userbox .btn { white-space: nowrap; padding: .24rem .35rem; }
  .user-chip { max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .view-as-banner { flex-wrap: wrap; gap: .25rem .45rem; padding: .3rem .5rem; }
  .view-as-banner span { flex: 1 1 210px; }
  main { padding: .45rem .45rem; }
  .toolbar { display: block; }
  .toolbar > .inline-form, .toolbar form.inline-form {
    width: 100%; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .35rem;
  }
  .inline-form input[type="search"] { width: auto; flex: 1 1 190px; min-width: 0; }
  .inline-form select:not(.cell) { max-width: calc(50vw - .6rem); }
  .quick-filter-select {
    flex: 1 1 132px; min-width: 0; max-width: none;
  }
  .quick-filter-select.compact {
    flex: 0 1 138px; min-width: 0; max-width: none;
  }
  .toolbar > .inline-form:last-child {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: .25rem .35rem;
  }
  .toolbar .hint {
    min-width: 0; flex: none; font-size: 11.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .desktop-hint-extra { display: none; }
  .mobile-hint-extra { display: inline; }
  .toolbar button.primary.slim,
  .toolbar .add-unavailable {
    margin-left: 0; justify-self: end; white-space: nowrap;
  }
  .statbar {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .45rem;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    padding: .38rem .55rem;
  }
  .statbar::-webkit-scrollbar { display: none; }
  .statbar .sep { display: none; }
  .statbar .stat {
    flex: 0 0 auto; display: grid; grid-template-columns: 1fr;
    align-items: start; gap: .12rem; min-width: max-content;
    padding-right: .45rem; border-right: 1px solid var(--border-soft);
  }
  .statbar .stat:last-of-type { border-right: 0; padding-right: 0; }
  .statbar .stat-label { font-size: 11px; line-height: 1.1; }
  .stat-values {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .22rem .32rem;
  }
  .stat-values .bit,
  .stat-values .stat-link {
    flex: 0 0 auto;
  }
  .order-statbar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .28rem; overflow: visible; align-items: stretch;
  }
  .order-statbar .stat {
    min-width: 0; border-right: 0; padding-right: 0;
  }
  .order-statbar .stat:first-of-type {
    grid-column: 1 / -1; padding-bottom: .28rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .order-statbar .stat:first-of-type .stat-values {
    flex-wrap: wrap; gap: .22rem .28rem; min-width: 0;
  }
  .order-statbar .stat:first-of-type .bit,
  .order-statbar .stat:first-of-type .stat-link {
    flex: 0 1 auto;
  }
  .order-statbar .stat:not(:first-of-type) {
    padding: .28rem .34rem; border: 1px solid var(--border-soft);
    border-radius: 7px; background: var(--t-neutral-01); gap: .16rem;
  }
  .order-statbar .stat:not(:first-of-type) .stat-values {
    flex-wrap: wrap; min-width: 0; gap: .08rem;
  }
  .order-statbar .stat:not(:first-of-type) .bit {
    white-space: normal; line-height: 1.12; font-size: 10.8px;
  }
  .balancebar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .28rem; overflow: visible; align-items: stretch;
  }
  .balancebar .stat {
    min-width: 0; border-right: 0; padding-right: 0;
  }
  .balancebar .stat:first-of-type {
    grid-column: 1 / -1; padding-bottom: .28rem;
    border-bottom: 1px solid var(--t-info-02);
  }
  .balancebar .stat:first-of-type .stat-values {
    flex-wrap: wrap; gap: .18rem .3rem; min-width: 0;
  }
  .balancebar .stat:not(:first-of-type) {
    padding: .28rem .34rem; border: 1px solid var(--t-info-02);
    border-radius: 7px; background: var(--t-neutral-01);
  }
  .balancebar .stat:not(:first-of-type) .stat-values {
    flex-wrap: wrap; min-width: 0; gap: .08rem;
  }
  .balancebar .stat:not(:first-of-type) .bit {
    white-space: normal; line-height: 1.12; font-size: 10.8px;
  }
  .balancebar.supplier-balance-list { grid-template-columns: 1fr; }
  .balancebar.supplier-balance-list .stat { grid-column: 1 / -1; }
  .supplier-settings-head { display: grid; align-items: stretch; }
  .supplier-add-form { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .supplier-settings-grid { grid-template-columns: 1fr; }
  .supplier-setting-card header { display: grid; }
  .supplier-policy-form { align-items: end; }
  .payment-statbar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .28rem; overflow: visible; align-items: stretch;
  }
  .payment-statbar .stat {
    min-width: 0; border-right: 0; padding-right: 0;
  }
  .payment-statbar .stat:first-of-type {
    grid-column: 1 / -1; padding-bottom: .28rem;
    border-bottom: 1px solid var(--border-soft);
  }
  .payment-statbar .stat:first-of-type .stat-values {
    flex-wrap: wrap; gap: .22rem .28rem; min-width: 0;
  }
  .payment-statbar .stat:first-of-type .bit,
  .payment-statbar .stat:first-of-type .stat-link {
    flex: 0 1 auto;
  }
  .payment-statbar .stat:not(:first-of-type) {
    padding: .28rem .34rem; border: 1px solid var(--border-soft);
    border-radius: 7px; background: var(--t-neutral-01); gap: .16rem;
  }
  .payment-statbar .stat:not(:first-of-type) .stat-values {
    flex-wrap: wrap; min-width: 0; gap: .08rem;
  }
  .payment-statbar .stat:not(:first-of-type) .bit {
    white-space: normal; line-height: 1.12; font-size: 10.8px;
  }
  .period-tabs { margin-bottom: .4rem; }
  .period-tabs a { display: grid; gap: .02rem; min-width: 104px; align-items: start; }
  .month-close-panel {
    display: grid; gap: .36rem; padding: .45rem .55rem;
  }
  .month-close-title {
    display: grid; gap: .04rem;
  }
  .month-close-actions {
    justify-content: stretch;
  }
  .month-close-actions button {
    flex: 1 1 96px;
  }
  .mobile-sortbar {
    display: flex; align-items: center; gap: .35rem; margin: .35rem 0 .4rem;
    padding: .38rem .5rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); box-shadow: var(--shadow);
  }
  .mobile-sort-label {
    color: var(--muted); font-size: 11px; font-weight: 800;
  }
  .mobile-sortbar select {
    min-width: 0; height: 30px; border: 1px solid var(--border);
    border-radius: 6px; background-color: var(--t-neutral-01); color: var(--text);
    font-size: 12px; font-weight: 700;
  }
  .mobile-sort-key { flex: 1 1 auto; }
  .mobile-sort-dir { flex: 0 0 116px; }
  .active-filters {
    align-items: flex-start; gap: .25rem;
  }
  .active-filter-title {
    flex: 0 0 100%; margin: 0 0 -.05rem;
  }
  .active-filter-chip {
    max-width: calc(100vw - 5.7rem);
  }
  table.order-sheet thead tr.column-head th:first-child,
  table.order-sheet thead tr.column-head th:nth-child(2),
  table.order-sheet tbody tr[id^="order-"] td:first-child,
  table.order-sheet tbody tr[id^="order-"] td:nth-child(2),
  table.order-sheet tfoot td:first-child {
    left: auto !important; box-shadow: none;
  }
  .drawer { width: 100vw; max-width: 100vw; }
  .drawer .two { grid-template-columns: 1fr; }
  .shipment-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipment-date-grid { grid-template-columns: 1fr; }
  .fulfillment-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipment-split-grid { grid-template-columns: 1fr; }
  .method-choice-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.sheet tr.empty-row td { text-align: left; }
  table.sheet.order-sheet {
    width: 100% !important; min-width: 0 !important; table-layout: auto; border-collapse: separate; border-spacing: 0 .45rem;
  }
  table.sheet.order-sheet colgroup, table.sheet.order-sheet thead { display: none; }
  table.sheet.order-sheet tbody, table.sheet.order-sheet tr,
  table.sheet.order-sheet td { display: block; }
  table.sheet.order-sheet tbody tr[id^="order-"] {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden; margin-bottom: .45rem;
  }
  table.sheet.order-sheet tbody tr[id^="order-"] td {
    border-left: 0 !important; border-bottom: 1px solid var(--border-soft);
    min-height: 32px; padding: .2rem .45rem .2rem 6.6rem; position: relative !important;
    left: auto !important; box-shadow: none !important; background: transparent;
  }
  table.sheet.order-sheet tbody tr[id^="order-"] td.goods-coverage-cell {
    padding: .28rem .45rem .28rem 6.6rem !important;
  }
  table.sheet.order-sheet tbody tr[id^="order-"] td.goods-coverage-cell::before {
    left: 6.1rem;
  }
  table.sheet.order-sheet tbody tr[id^="order-"] td:last-child { border-bottom: 0; }
  table.sheet.order-sheet tbody tr[id^="order-"] td.mobile-hide-empty {
    display: none;
  }
  table.sheet.order-sheet tbody tr[id^="order-"] td::before {
    content: attr(data-label); position: absolute; left: .55rem; top: .45rem;
    width: 5.7rem; color: var(--muted); font-size: 11px; font-weight: 700;
  }
  table.sheet.order-sheet tbody tr[id^="order-"] .datecell {
    min-height: 36px; padding-left: 6.6rem !important;
  }
  table.sheet.order-sheet .order-open-button {
    min-height: 30px; width: min(180px, 100%); padding: .2rem .4rem;
  }
  table.sheet.order-sheet .order-card-status {
    display: flex; flex-wrap: wrap; gap: .24rem; padding: 0 0 .14rem;
  }
  table.sheet.order-sheet .order-chip {
    display: inline-flex; align-items: center; min-height: 20px; max-width: 100%;
    padding: .08rem .38rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--t-neutral-07); color: var(--t-info-18); font-size: 10.5px; font-weight: 850;
    line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  table.sheet.order-sheet .order-chip.status.st-production {
    background: var(--t-neutral-24); border-color: var(--t-warn-04); color: var(--t-warn-14);
  }
  table.sheet.order-sheet .order-chip.status.st-shipped {
    background: var(--t-neutral-32); border-color: var(--t-warn-05); color: var(--t-warn-17);
  }
  table.sheet.order-sheet .order-chip.status.st-delivered,
  table.sheet.order-sheet .order-chip.complete {
    background: var(--t-neutral-34); border-color: var(--t-ok-03); color: var(--t-ok-09);
  }
  table.sheet.order-sheet .order-chip.status.st-cancelled {
    background: var(--t-danger-01); border-color: var(--t-danger-02); color: var(--t-danger-06); text-decoration: line-through;
  }
  table.sheet.order-sheet .order-chip.missing {
    background: var(--t-neutral-24); border-color: var(--t-warn-06); color: var(--t-danger-08);
  }
  table.sheet.order-sheet .cell {
    border: 1px solid transparent; border-radius: 6px; min-height: 28px;
    padding: .25rem .35rem;
  }
  table.sheet.order-sheet tbody tr[id^="order-"] td.split-summary-cell {
    padding: .25rem .45rem .25rem 6.6rem !important;
    white-space: normal;
  }
  table.sheet.order-sheet .cell:focus { border-color: var(--accent); outline: 0; }
  table.sheet.order-sheet textarea.cell.address-cell,
  table.sheet.order-sheet textarea.cell.notes-cell {
    min-height: 30px; height: 30px; white-space: normal; overflow: auto; resize: vertical;
  }
  table.sheet.order-sheet tr.h-late td,
  table.sheet.order-sheet tr.h-warn td,
  table.sheet.order-sheet tr.h-ok td,
  table.sheet.order-sheet tr.draft td {
    background: transparent;
  }
  table.sheet.order-sheet tbody tr:hover td { background: transparent; }
  table.sheet.order-sheet tfoot {
    display: block; margin-top: .35rem; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  }
  table.sheet.order-sheet tfoot tr, table.sheet.order-sheet tfoot td { display: block; }
  table.sheet.order-sheet tfoot td {
    position: static !important; border: 0; box-shadow: none; padding: .35rem .55rem;
  }
  table.sheet.order-sheet tfoot tr#orders-grand {
    display: flex; align-items: center; gap: .55rem; min-height: 38px;
  }
  table.sheet.order-sheet tfoot tr#orders-grand td.blank-total { display: none; }
  table.sheet.order-sheet tfoot tr#orders-grand td.sub-label { margin-right: auto; }
  table.sheet.order-sheet tfoot tr#orders-grand td.num {
    padding-left: .2rem; text-align: right; font-variant-numeric: tabular-nums;
  }
  table.sheet.order-sheet tfoot tr#orders-grand td.mobile-total-value::before {
    content: attr(data-total-label);
    display: block; margin-bottom: .08rem; color: var(--muted);
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  }
  table.sheet.payment-sheet {
    min-width: 0 !important; table-layout: auto; border-collapse: separate; border-spacing: 0 .45rem;
  }
  table.sheet.payment-sheet colgroup, table.sheet.payment-sheet thead { display: none; }
  table.sheet.payment-sheet tbody, table.sheet.payment-sheet tr,
  table.sheet.payment-sheet td { display: block; }
  table.sheet.payment-sheet tbody tr {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
  }
  table.sheet.payment-sheet tbody tr.empty-row {
    border: 0; box-shadow: none; background: transparent;
  }
  table.sheet.payment-sheet tbody tr.empty-row td {
    padding: 1rem .75rem !important; text-align: left;
  }
  table.sheet.payment-sheet td {
    border-left: 0 !important; border-bottom: 1px solid var(--border-soft);
    min-height: 32px; padding: .2rem .45rem .2rem 6rem; position: relative !important;
    left: auto !important; box-shadow: none !important; background: transparent;
  }
  table.sheet.payment-sheet tr.h-late td,
  table.sheet.payment-sheet tr.h-warn td,
  table.sheet.payment-sheet tr.h-ok td { background: transparent; }
  table.sheet.payment-sheet tbody tr:hover td { background: transparent; }
  table.sheet.payment-sheet td:last-child { border-bottom: 0; }
  table.sheet.payment-sheet td.mobile-hide-empty {
    display: none;
  }
  table.sheet.payment-sheet td::before {
    content: attr(data-label); position: absolute; left: .55rem; top: .45rem;
    width: 4.9rem; color: var(--muted); font-size: 11px; font-weight: 700;
  }
  table.sheet.payment-sheet .cell {
    border: 1px solid transparent; border-radius: 6px; min-height: 28px;
    padding: .25rem .35rem;
  }
  table.sheet.payment-sheet .cell:focus { border-color: var(--accent); outline: 0; }
  table.sheet.payment-sheet .payment-card-status {
    display: flex; flex-wrap: wrap; gap: .24rem; margin: .18rem 0 .06rem;
  }
  table.sheet.payment-sheet .payment-chip {
    display: inline-flex; align-items: center; min-height: 20px; max-width: 100%;
    padding: .08rem .38rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--t-neutral-07); color: var(--t-info-18); font-size: 10.5px; font-weight: 800;
    line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  table.sheet.payment-sheet .payment-chip.type-goods {
    background: var(--t-neutral-22); border-color: var(--t-info-05); color: var(--accent);
  }
  table.sheet.payment-sheet .payment-chip.type-shipping {
    background: var(--t-neutral-24); border-color: var(--t-warn-04); color: var(--t-warn-14);
  }
  table.sheet.payment-sheet .payment-chip.type-other {
    background: var(--t-neutral-12); border-color: var(--t-info-03); color: var(--t-alloc-01);
  }
  table.sheet.payment-sheet .payment-chip.warn {
    background: var(--t-neutral-24); border-color: var(--t-warn-06); color: var(--t-danger-08);
  }
  table.sheet.payment-sheet .payment-chip.ok {
    background: var(--t-neutral-34); border-color: var(--t-ok-03); color: var(--t-ok-09);
  }
  table.sheet.payment-sheet textarea.cell.payment-note-cell {
    min-height: 4.4em; height: auto; resize: vertical; overflow: auto; white-space: normal;
  }
  table.sheet.payment-sheet td.actions {
    display: flex; align-items: center; gap: .35rem; min-height: 34px;
  }
  table.sheet.payment-sheet td.actions.mobile-hide-empty {
    display: none;
  }
  table.sheet.payment-sheet tfoot {
    display: block; margin-top: .35rem; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  }
  table.sheet.payment-sheet tfoot tr, table.sheet.payment-sheet tfoot td { display: block; }
  table.sheet.payment-sheet tfoot td {
    position: static !important; border: 0; box-shadow: none; padding: .35rem .55rem;
  }
  table.sheet.payment-sheet tfoot tr#pay-grand {
    display: flex; align-items: center; gap: .55rem; min-height: 38px;
  }
  table.sheet.payment-sheet tfoot tr#pay-grand td.pay-total-label { margin-right: auto; }
  table.sheet.payment-sheet tfoot tr#pay-grand td.pay-total-note { display: none; }
  table.sheet.payment-sheet tfoot tr#pay-grand td.pay-total-value {
    padding-left: .2rem; text-align: right; font-variant-numeric: tabular-nums;
  }
  table.sheet.payment-sheet tfoot tr#pay-grand td.pay-total-value::before {
    content: attr(data-total-label);
    display: block; margin-bottom: .08rem; color: var(--muted);
    font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  }
  table.grid.audit-grid, table.grid.review-grid {
    min-width: 0; border-collapse: separate; border-spacing: 0 .45rem;
  }
  table.grid.audit-grid thead, table.grid.review-grid thead { display: none; }
  table.grid.audit-grid tbody, table.grid.review-grid tbody,
  table.grid.audit-grid tr, table.grid.review-grid tr,
  table.grid.audit-grid td, table.grid.review-grid td { display: block; }
  table.grid.audit-grid tr, table.grid.review-grid tr {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
  }
  table.grid.audit-grid td, table.grid.review-grid td {
    border-bottom: 1px solid var(--border-soft); padding: .35rem .55rem .35rem 6.2rem;
    min-height: 28px; position: relative; white-space: normal;
  }
  table.grid.audit-grid td.mobile-hide-empty,
  table.grid.review-grid td.mobile-hide-empty {
    display: none;
  }
  table.grid.audit-grid td:last-child, table.grid.review-grid td:last-child { border-bottom: 0; }
  table.grid.audit-grid td::before, table.grid.review-grid td::before {
    content: attr(data-label); position: absolute; left: .55rem; top: .38rem;
    width: 5rem; color: var(--muted); font-size: 11px; font-weight: 700;
  }
  table.grid.audit-grid td.desc {
    max-width: none; overflow: visible; text-overflow: clip; white-space: normal;
    overflow-wrap: anywhere;
  }
  table.grid.review-grid td.actions { display: block; padding-left: 6.2rem; }
  table.grid.review-grid td.actions::before { top: .48rem; }
  .decision-hint { max-width: none; }
}

/* ---------- toolbar help popover (replaces three stacked always-on legends) ---------- */
.help-pop { position: relative; display: inline-block; }
.help-summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--card); color: var(--muted);
  font-size: 12px; font-weight: 800; cursor: pointer; list-style: none;
}
.help-summary::-webkit-details-marker { display: none; }
.help-summary:hover { border-color: var(--accent); color: var(--accent); }
.help-pop[open] .help-summary { border-color: var(--accent); color: var(--accent); }
.help-panel {
  position: absolute; z-index: 40; top: 26px; left: 0; width: min(560px, 90vw);
  padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
  font-size: 11.5px; line-height: 1.4; color: var(--muted); text-align: left;
}
.help-panel p { margin: 0 0 .4rem; }
.help-panel p:last-child { margin-bottom: 0; }
.help-panel b { color: var(--text); }
.help-rule { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border-soft); }
.help-keys { display: flex; flex-wrap: wrap; gap: .25rem .85rem; }
.help-keys span { display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap; }
.help-keys [class^="dot-"] { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.note-dismiss { margin-left: auto; }
@media (max-width: 700px) {
  .help-panel { position: fixed; left: 3vw; right: 3vw; width: auto; top: auto; }
}