/* ===================================================================
   PO Reconciliation — Truckers Supply Co.
   Brand: blue #33489A · light blue #9CCCEE · red #ED1C24 · black · white
   =================================================================== */

:root {
  --blue:        #33489A;
  --blue-deep:   #24336F;
  --blue-ink:    #17224D;
  --blue-lift:   #4459B4;
  --sky:         #9CCCEE;
  --sky-pale:    #E6F2FA;
  --red:         #ED1C24;
  --red-deep:    #B8141B;
  --red-pale:    #FDE9EA;

  --good:        #0F7B4F;
  --good-pale:   #E4F4EC;
  --warn:        #B45309;
  --warn-pale:   #FDF1E3;

  --paper:       #F1F4FA;
  --surface:     #FFFFFF;
  --line:        #D3DAE9;
  --line-soft:   #E8EDF6;
  --ink:         #12172B;
  --ink-2:       #46506B;
  --ink-3:       #77819B;

  --r:  6px;
  --r-lg: 10px;
  --shadow: 0 1px 2px rgba(23,34,77,.06), 0 6px 18px rgba(23,34,77,.07);
  --focus: 0 0 0 3px rgba(51,72,154,.32);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must win over any display rule below. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 600; letter-spacing: .01em; }

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .9em; background: var(--sky-pale);
  padding: 1px 5px; border-radius: 3px;
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 3px solid var(--blue);
  padding: 12px 24px;
  display: flex; align-items: center; gap: 22px;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 1px 12px rgba(23,34,77,.08);
}
.brand { display: block; flex-shrink: 0; }
.brand img { display: block; height: 42px; width: auto; }
.topbar-title { border-left: 1px solid var(--line); padding-left: 22px; }
.topbar-title h1 { font-size: 24px; line-height: 1.1; color: var(--blue-ink); }
.topbar-title p { font-size: 13px; color: var(--ink-3); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Save bar ────────────────────────────────────────────────────── */
.savebar {
  background: var(--sky-pale);
  border-bottom: 1px solid var(--sky);
  padding: 9px 24px;
  font-size: 14px; color: var(--blue-ink);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--blue); text-decoration: underline;
  text-underline-offset: 2px;
}
.link:hover { color: var(--red); }

/* ── Layout ──────────────────────────────────────────────────────── */
main { flex: 1; width: 100%; max-width: 1560px; margin: 0 auto; padding: 22px 24px 64px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
button { font-family: inherit; cursor: pointer; }

.primary, .ghost {
  border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  padding: 9px 18px;
  transition: background .15s, border-color .15s, color .15s;
}
.primary { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.primary:hover { background: var(--blue-lift); border-color: var(--blue-lift); }
.primary:disabled { background: var(--ink-3); border-color: var(--ink-3); cursor: not-allowed; }

.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.ghost:hover { border-color: var(--blue); color: var(--blue); }
.ghost.danger:hover { border-color: var(--red); color: var(--red); }

.sm { padding: 6px 12px; font-size: 13px; }
.lg {
  padding: 13px 40px; font-size: 18px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .04em;
  background: var(--red); border-color: var(--red);
}
.lg:hover { background: var(--red-deep); border-color: var(--red-deep); }

.iconbtn {
  background: none; border: none; font-size: 26px; line-height: 1;
  color: var(--ink-3); padding: 2px 8px; border-radius: var(--r);
}
.iconbtn:hover { color: var(--red); background: var(--red-pale); }

/* ── Fields ──────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.field input, .field select, textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 10px; width: 100%;
  transition: border-color .15s;
}
.field input:focus, .field select:focus, textarea:focus { border-color: var(--blue); }
.inline { display: flex; align-items: center; gap: 6px; }
.inline .prefix, .inline .suffix { color: var(--ink-3); font-size: 14px; }

.check {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; color: var(--ink-2); margin: 10px 0; cursor: pointer;
}
.check input { margin-top: 3px; accent-color: var(--blue); flex-shrink: 0; }

.hint { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ── Reference strip ─────────────────────────────────────────────── */
.refstrip {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 18px; margin-bottom: 18px;
  display: grid; gap: 14px;
  grid-template-columns: 120px 140px minmax(160px, 1fr) 180px 160px 110px;
  box-shadow: var(--shadow);
}
.refstrip .grow { min-width: 0; }

/* ── Panels ──────────────────────────────────────────────────────── */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
.panels.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1240px) { .panels.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .panels.three { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
  min-width: 0;                 /* let grid/flex children shrink instead of overflowing */
}
.panel > * { min-width: 0; }
.panel-head {
  padding: 13px 18px; display: flex; align-items: baseline; gap: 10px;
  color: #fff;
}
.panel-po .panel-head { background: var(--blue); }
.panel-so .panel-head { background: var(--blue-ink); }
.panel-rc .panel-head { background: var(--good); }
.panel-head h2 { font-size: 19px; }
.panel-sub { font-size: 13px; color: rgba(255,255,255,.72); }
.count {
  margin-left: auto; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.16); padding: 2px 10px; border-radius: 20px;
}

/* ── Tabs ────────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--line); background: #FAFBFE; }
.tabs button {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--ink-3);
  transition: color .15s, border-color .15s;
}
.tabs button:hover { color: var(--blue); }
.tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--red); }

.tabpanel { padding: 16px 18px 4px; }

/* ── Drop zone ───────────────────────────────────────────────────── */
.drop {
  position: relative;
  border: 2px dashed var(--line); border-radius: var(--r);
  background: #FAFBFE; padding: 22px 16px; text-align: center;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--blue); background: var(--sky-pale); }
.drop input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.drop strong { display: block; font-size: 15px; color: var(--blue-ink); }
.drop span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.bar { height: 3px; background: var(--line-soft); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s; }

.status { font-size: 13px; font-weight: 500; margin-top: 10px; min-height: 18px; }
.status.work  { color: var(--blue); }
.status.ok    { color: var(--good); }
.status.bad   { color: var(--red-deep); }

textarea {
  resize: vertical; line-height: 1.45;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px;
}
.row-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ── Entry grid ──────────────────────────────────────────────────── */
.grid-wrap { padding: 8px 18px 16px; margin-top: 4px; }
.grid { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.grid col.c-part  { width: 27%; }
.grid col.c-desc  { width: auto; }
.grid col.c-qty   { width: 62px; }
.grid col.c-price { width: 88px; }
.grid col.c-del   { width: 30px; }
.grid thead th {
  font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: left;
  padding: 0 6px 6px; border-bottom: 1px solid var(--line);
}
.grid thead th.num { text-align: right; }
.grid td { padding: 3px 4px; border-bottom: 1px solid var(--line-soft); }
.grid td input {
  width: 100%; border: 1px solid transparent; border-radius: 4px;
  padding: 5px 6px; font: inherit; color: var(--ink); background: transparent;
}
.grid td input:hover { border-color: var(--line); }
.grid td input:focus { border-color: var(--blue); background: #fff; }
.grid td input.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid .del {
  background: none; border: none; color: var(--line);
  font-size: 19px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.grid .del:hover { color: var(--red); background: var(--red-pale); }
.grid .empty td { color: var(--ink-3); font-size: 13.5px; padding: 14px 6px; text-align: center; }

.grid-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ext {
  margin-left: auto; font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700; color: var(--blue-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Run bar ─────────────────────────────────────────────────────── */
.runbar {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 26px;
}
.runbar-note { font-size: 13px; color: var(--ink-3); }
.runbar-note b { color: var(--ink-2); }

/* ── Results ─────────────────────────────────────────────────────── */
#results {
  min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.result-head {
  background: var(--blue-ink); color: #fff;
  border-bottom: 3px solid var(--red);
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.result-head h2 { font-size: 22px; }
.result-head p { font-size: 13px; color: rgba(255,255,255,.7); }
.result-exports { display: flex; gap: 8px; flex-wrap: wrap; }
.result-exports .ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.result-exports .ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.result-exports .primary { background: var(--sky); color: var(--blue-ink); border-color: var(--sky); }
.result-exports .primary:hover { background: #fff; border-color: #fff; }

/* KPIs */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  border-bottom: 1px solid var(--line);
}
.kpi { padding: 15px 22px; border-right: 1px solid var(--line-soft); }
.kpi:last-child { border-right: none; }
.kpi dt { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.kpi dd {
  font-family: 'Barlow Condensed', sans-serif; font-size: 27px; font-weight: 700;
  line-height: 1.15; color: var(--blue-ink); font-variant-numeric: tabular-nums;
}
.kpi dd.up   { color: var(--red); }
.kpi dd.down { color: var(--good); }
.kpi small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; }

/* Verdict */
.verdict {
  margin: 0; padding: 13px 22px; font-size: 14.5px;
  border-bottom: 1px solid var(--line); border-left: 4px solid;
}
.verdict.clean { background: var(--good-pale); border-left-color: var(--good); color: #0B5738; }
.verdict.watch { background: var(--warn-pale); border-left-color: var(--warn); color: #7C3A06; }
.verdict.alert { background: var(--red-pale); border-left-color: var(--red); color: var(--red-deep); }
.verdict b { font-weight: 700; }

/* Bridge from PO total to acknowledged total */
.bridge {
  padding: 11px 22px; font-size: 13.5px; color: var(--ink-2);
  background: var(--sky-pale); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.bridge b { color: var(--blue-ink); font-weight: 700; }
.bridge .arrow { color: var(--ink-3); margin: 0 9px; }

/* Filters */
.filters {
  display: flex; gap: 8px; padding: 12px 22px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); background: #FAFBFE;
}
.filters button {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 4px 13px; font-size: 13px; font-weight: 600;
  color: var(--ink-2);
}
.filters button:hover { border-color: var(--blue); color: var(--blue); }
.filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Ledger */
.ledger-wrap { overflow-x: auto; min-width: 0; }
.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger thead th {
  background: #FAFBFE; border-bottom: 2px solid var(--line);
  padding: 10px 14px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-3); text-align: left; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.ledger th.num, .ledger td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger tbody td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.ledger tbody tr:hover { background: #FAFBFE; }
.ledger .part { font-weight: 600; color: var(--blue); white-space: nowrap; }
.ledger .desc { color: var(--ink-2); max-width: 300px; }
.ledger .nil { color: #B9C1D4; }

.r-price { background: #FFF7F7; }
.r-qty   { background: #FFFBF3; }
.r-both  { background: #FFF2F3; }
.r-noack { background: #F7F8FB; }
.r-nopo  { background: #FFFBF3; }

.up   { color: var(--red);  font-weight: 600; }
.down { color: var(--good); font-weight: 600; }
.zero { color: var(--ink-3); }

.tag {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tag-ok    { background: var(--good-pale); color: var(--good); }
.tag-price { background: var(--red-pale);  color: var(--red-deep); }
.tag-qty   { background: var(--warn-pale); color: var(--warn); }
.tag-both  { background: var(--red-pale);  color: var(--red-deep); }
.tag-noack { background: #EDEFF5; color: var(--ink-2); }
.recv-col { display: none; }
.showrecv .recv-col { display: table-cell; }
.tag-short { background: var(--warn-pale); color: var(--warn); }
.tag-missing { background: var(--red-pale); color: var(--red-deep); }
.tag-over { background: var(--sky-pale); color: var(--blue); }
.tag-received { background: var(--good-pale); color: var(--good); }
.tag-nopo  { background: var(--warn-pale); color: var(--warn); }
.linked { background: var(--warn-pale) !important; color: var(--warn) !important; }
.linksel {
  margin-top: 5px; font: inherit; font-size: 12px; max-width: 190px;
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px;
  color: var(--ink-2); background: #fff;
}
.linksel:focus { border-color: var(--blue); }
.unlink {
  margin-top: 5px; background: none; border: none; padding: 0;
  font: inherit; font-size: 12px; color: var(--blue);
  text-decoration: underline; text-underline-offset: 2px;
}
.unlink:hover { color: var(--red); }
@media print { .linksel, .unlink { display: none; } }

.loose {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600;
  color: var(--blue); background: var(--sky-pale); padding: 1px 6px; border-radius: 3px;
}

.ledger tfoot td {
  background: var(--blue-ink); color: #fff; padding: 12px 14px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700;
  border-top: 3px solid var(--red);
}
.ledger tfoot .up   { color: #FF9AA0; }
.ledger tfoot .down { color: #7BE2B4; }

.footnote { padding: 13px 22px; font-size: 12.5px; color: var(--ink-3); }

/* ── Drawers ─────────────────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(18,23,43,.45); display: flex; justify-content: flex-end; }
.drawer-panel {
  background: var(--surface); width: min(430px, 100%);
  display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(18,23,43,.22);
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: 21px; color: var(--blue-ink); }
.drawer-body { padding: 20px 22px 40px; overflow-y: auto; }
.drawer-body h3 {
  font-size: 16px; color: var(--blue-ink);
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.drawer-body h3:first-child { margin-top: 0; }
.drawer-body .field { margin-bottom: 12px; }

.histlist { list-style: none; }
.histlist li { border-bottom: 1px solid var(--line-soft); padding: 11px 0; }
.histlist .h-title { font-weight: 600; color: var(--blue-ink); }
.histlist .h-meta { font-size: 12.5px; color: var(--ink-3); }
.histlist .h-var { font-weight: 600; font-variant-numeric: tabular-nums; }
.histlist .h-row { display: flex; align-items: center; gap: 10px; }
.histlist .h-row .link { margin-left: auto; }
.histlist .none { color: var(--ink-3); font-size: 14px; padding: 8px 0; }

.pagefoot .build { color: var(--ink-3); }
.pagefoot .build .link { color: var(--ink-3); text-decoration: none; }
.pagefoot .build .link:hover { color: var(--blue); text-decoration: underline; }

.stats { margin: 0 0 14px; font-size: 13.5px; }
.stats div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.stats dt { color: var(--ink-2); }
.stats dd { font-weight: 600; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.summ { font-size: 13.5px; color: var(--blue); cursor: pointer; margin-bottom: 8px; }
.changelog { list-style: none; font-size: 13px; color: var(--ink-2); }
.changelog li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.changelog b { color: var(--blue-ink); }
.changelog span { color: var(--ink-3); }

.xrefs { margin-bottom: 14px; }
.xrefs h4 {
  font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--blue-ink); margin: 12px 0 4px; text-transform: none;
}
.xrefs div {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.xrefs code { font-size: 12px; }
.xrefs .arrow { color: var(--ink-3); }
.xrefs .drop-x {
  margin-left: auto; background: none; border: none; color: var(--line);
  font-size: 17px; line-height: 1; padding: 0 4px; border-radius: 3px; cursor: pointer;
}
.xrefs .drop-x:hover { color: var(--red); background: var(--red-pale); }
.xrefs .none { color: var(--ink-3); font-size: 13px; padding: 6px 0; }

/* Sign-off */
.signoff {
  border-top: 1px solid var(--line); background: #FAFBFE;
  padding: 13px 22px; display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.signoff-state { font-size: 13.5px; color: var(--ink-3); font-weight: 600; width: 100%; }
.signoff.done { background: var(--good-pale); border-top-color: var(--good); }
.signoff.done .signoff-state { color: #0B5738; }
.signoff-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; width: 100%; }
.signoff-form .field { min-width: 120px; }
.signoff-form .grow { flex: 1; min-width: 200px; }
@media print { .signoff-form { display: none; } .signoff { background: #fff !important; } }

#btn-pending.has-stale {
  border-color: var(--warn); color: var(--warn); font-weight: 700;
}
.histlist .h-meta.stale { color: var(--warn); font-weight: 600; }
.histlist .link.drop:hover { color: var(--red); }

.errlist { margin-bottom: 10px; }
.errlist div {
  font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2);
}
.errlist b { color: var(--red-deep); display: block; }
.errlist span { color: var(--ink-3); font-size: 11.5px; }
.errlist .none { color: var(--ink-3); padding: 6px 0; }

/* ── Toast ───────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--blue-ink); color: #fff;
  padding: 11px 20px; border-radius: var(--r); font-size: 14px;
  box-shadow: 0 8px 26px rgba(18,23,43,.3); z-index: 80; max-width: 90vw;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.pagefoot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 14px 24px; font-size: 12.5px; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

.printhead { display: none; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .refstrip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .panels { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; gap: 12px 18px; padding: 12px 16px; }
  .topbar-title { border-left: none; padding-left: 0; }
  .topbar-actions { width: 100%; }
  main { padding: 16px 14px 48px; }
  .refstrip { grid-template-columns: repeat(2, 1fr); padding: 14px; }
  .kpi { border-right: none; border-bottom: 1px solid var(--line-soft); }
}
@media (max-width: 640px) {
  .refstrip { grid-template-columns: 1fr; }
  .result-head { flex-direction: column; align-items: stretch; }
  .result-exports { display: grid; grid-template-columns: 1fr 1fr; }
  .result-exports .primary { grid-column: 1 / -1; }
  .result-exports button { padding: 9px 12px; }
  .lg { width: 100%; }
  .runbar { flex-direction: column; gap: 10px; }
  .runbar .ghost { width: 100%; }
  .brand img { height: 32px; }
  .topbar-title h1 { font-size: 20px; }
  .topbar-actions button { flex: 1; }

  /* Narrow the numeric columns instead of forcing the page to scroll sideways.
     Text that does not fit scrolls inside its own input. */
  .grid-wrap { padding: 8px 12px 16px; }
  .grid col.c-part  { width: 30%; }
  .grid col.c-qty   { width: 46px; }
  .grid col.c-price { width: 70px; }
  .grid col.c-del   { width: 26px; }
  .grid td input { padding: 5px 4px; }
  .grid thead th { font-size: 11px; }
  .tabpanel { padding: 14px 12px 4px; }
  .panel-head { flex-wrap: wrap; }
  .kpi { padding: 12px 16px; }
  .bridge, .verdict, .filters, .footnote { padding-left: 16px; padding-right: 16px; }
  .ledger thead th, .ledger tbody td { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  @page { size: landscape; margin: 12mm; }
  body { background: #fff; font-size: 10.5pt; }
  .topbar, .savebar, .refstrip, .panels, .runbar, .pagefoot,
  .drawer, .toast, .filters, .result-exports { display: none !important; }
  main { padding: 0; max-width: none; }
  #results { border: none; box-shadow: none; border-radius: 0; }
  .printhead {
    display: flex; align-items: center; gap: 16px;
    border-bottom: 2px solid #33489A; padding-bottom: 8px; margin-bottom: 12px;
  }
  .printhead img { height: 34px; }
  .printhead strong { display: block; font-size: 13pt; color: #17224D; }
  .printhead span { font-size: 9.5pt; color: #46506B; }
  .result-head { background: #fff !important; color: #17224D !important; border-bottom: 1px solid #D3DAE9; padding: 0 0 8px; }
  .result-head h2 { color: #17224D; }
  .result-head p { color: #46506B; }
  .kpis { border: 1px solid #D3DAE9; }
  .kpi { break-inside: avoid; }
  .ledger { font-size: 9pt; }
  .ledger thead th { background: #F1F4FA !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ledger tbody tr { break-inside: avoid; }
  .ledger tfoot td { background: #24336F !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .r-price, .r-qty, .r-both, .r-noack, .r-nopo,
  .tag, .verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ledger-wrap { overflow: visible; }
}