/* H&T 1.0 — application styles (matches dev-reference-images) */

/* NOTE ON COLOUR. Every value below that differs between light and dark is
   RE-DECLARED by assets/theme-modes.css, which loads after this file and
   therefore wins. The declarations here are the light values and are kept as
   the record of what each name means — but changing one here changes nothing.
   Edit setup/build_theme.php and re-run it instead. */
:root {
  --navy: #0e1a2e;
  --navy-2: #16233c;
  --navy-line: #24334f;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #dbeafe;
  --bg: #f1f5f9;
  --card: #ffffff;
  --line: #e2e8f0;
  --ink: #0f172a;
  --muted: #64748b;
  --green: #16a34a;  --green-soft: #dcfce7;
  --amber: #b45309;  --amber-soft: #fef3c7;
  --red: #dc2626;    --red-soft: #fee2e2;
  --violet: #7c3aed; --violet-soft: #ede9fe;
  --font: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", Menlo, monospace;

  /* Product colours — a fixed categorical order, assigned by slot and never
     recycled. The first four are validated all-pairs separable for colour
     blindness on a white surface; see the .qprod block for the full note. */
  --pc-1: #2a78d6;  --pc-2: #eb6834;  --pc-3: #1baf7a;  --pc-4: #4a3aa7;
  --pc-5: #eda100;  --pc-6: #e87ba4;  --pc-7: #008300;  --pc-8: #e34948;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 1px;
}

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex: 0 0 232px;
  background: var(--navy); color: #cbd5e1;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; border-bottom: 1px solid var(--navy-line); }
.brand .logo {
  width: 38px; height: 38px; border-radius: 10px; background: var(--blue);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px;
}
.brand .logo svg { width: 22px; height: 22px; }
.brand .t1 { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.1; }
.brand .t2 { font-size: 11px; color: var(--ink-7); }
.nav { padding: 10px 8px; flex: 1; }
.nav .group-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-6); padding: 12px 10px 4px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  color: #cbd5e1; padding: 9px 10px; border-radius: 8px; margin: 2px 0;
  font-size: 13.5px; text-decoration: none;
}
.nav a svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .8; }
.nav a:hover { background: var(--navy-2); color: #fff; text-decoration: none; }
.nav a.active { background: var(--blue); color: #fff; }
.nav a.active svg { opacity: 1; }
.side-user { border-top: 1px solid var(--navy-line); padding: 12px 14px; font-size: 12px; color: var(--ink-7); }
.side-user b { color: #e2e8f0; display: block; font-size: 13px; }
.online { color: #4ade80; font-size: 11.5px; margin-top: 4px; }

/* ---------- Main / topbar ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; position: sticky; top: 0; z-index: 20;
}
.menu-btn {
  display: none; align-items: center; justify-content: center;
  background: var(--sf-1); border: 1px solid var(--bd-4); border-radius: 8px;
  width: 38px; height: 38px; font-size: 19px; cursor: pointer; color: var(--ink); flex: 0 0 38px;
}
.backdrop { display: none; }
.topbar h1 { font-size: 19px; margin: 0; font-weight: 700; }
.topbar .crumb { font-size: 12px; color: var(--muted); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.datebox { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; color: var(--muted); background: var(--sf-2); }
/* ---------- Light / dark toggle ----------
   The button shows the icon for the theme you are NOT in, so it names its own
   action rather than its current state. Both icons are in the markup and CSS
   picks — doing it in JS would mean a frame of the wrong one on every load.
   The third rule set is for the reader who has not chosen and is being
   followed by prefers-color-scheme; without it the button would sit there
   offering "go dark" on an already-dark screen. */
.themebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 34px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--sf-2); color: var(--muted); cursor: pointer;
}
.themebtn:hover { background: var(--sf-7); color: var(--ink); }
.themebtn svg { width: 17px; height: 17px; display: block; }
.themebtn .th-light { display: none; }
.themebtn .th-dark  { display: block; }
:root[data-theme="dark"] .themebtn .th-dark  { display: none; }
:root[data-theme="dark"] .themebtn .th-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themebtn .th-dark  { display: none; }
  :root:not([data-theme="light"]) .themebtn .th-light { display: block; }
}

.userbox { text-align: right; font-size: 12px; color: var(--muted); }
.userbox b { display: block; font-size: 13px; color: var(--ink); }
.content { padding: 22px 24px 60px; }

/* ---------- Cards / grid ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.card h2 { font-size: 15.5px; margin: 0 0 12px; font-weight: 700; }
.card h3 { font-size: 13.5px; margin: 16px 0 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .cols-4, .cols-5 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } }
@media (max-width: 760px)  { .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: 1fr; } .content { padding: 14px; } }

/* ---------- KPI tiles ---------- */
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.kpi .k-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi .k-value { font-size: 26px; font-weight: 800; margin: 2px 0; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: 12px; color: var(--muted); }
.kpi .k-sub b { color: var(--ink); }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.pill.pending { background: var(--amber-soft); color: var(--amber-ink); }
.pill.active  { background: var(--blue-soft);  color: var(--blue-dark); }
.pill.done    { background: var(--green-soft); color: var(--green-ink); }
.pill.alert   { background: var(--red-soft);   color: var(--red-ink); }
.pill.neutral { background: var(--sf-10); color: var(--ink-2); }
.pill.violet  { background: var(--violet-soft); color: var(--violet-ink); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: 13px; }
table.data th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: var(--sf-2); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:hover td { background: var(--sf-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- Forms ---------- */
label.f { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
label.f .req { color: var(--red-ink); }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=datetime-local],
select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bd-4); border-radius: 8px;
  font-family: var(--font); font-size: 13.5px; background: var(--sf-1); color: var(--ink);
}
textarea { resize: vertical; min-height: 60px; }
.frow { display: grid; gap: 14px; margin-bottom: 14px; }
.frow.c2 { grid-template-columns: 1fr 1fr; }
.frow.c3 { grid-template-columns: repeat(3, 1fr); }
.frow.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .frow.c2, .frow.c3, .frow.c4 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blue); color: #fff; border: 1px solid var(--blue);
  padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--blue-hover); text-decoration: none; }
/* Full-size buttons need their icon sized too — only .btn.sm svg was set, so a
   plain .btn with an icon rendered an unsized SVG that pushed the label into a
   three-line wrap. The label never wraps: a button is as wide as its words. */
.btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.btn { white-space: nowrap; }
.btn.secondary { background: var(--sf-1); color: var(--ink); border-color: var(--bd-4); }
.btn.secondary:hover { background: var(--sf-7); }
.btn.green { background: var(--green); border-color: var(--green); }
.btn.green:hover { background: #15803d; }
.btn.red { background: var(--red); border-color: var(--red); }
.btn.red:hover { background: #b91c1c; }
.btn.amber { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.amber:hover { background: #92400e; }
.btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; gap: 5px; }
.btn.sm svg { width: 13px; height: 13px; flex: 0 0 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Dealer → sub-dealer grouped tree (Dealers master) */
.dtree-wrap { max-height: 620px; overflow-y: auto; }
.dtree-wrap th { position: sticky; top: 0; z-index: 5; }
#dealerTable tr.drow > td { background: var(--tint-blue-1); border-top: 2px solid var(--tint-blue-7); }
#dealerTable tr.drow:hover > td { background: var(--tint-blue-3); }
#dealerTable tr.drow.sel > td { background: var(--blue-soft); }
#dealerTable tr.srow > td { background: var(--sf-1); }
#dealerTable tr.srow:hover > td { background: var(--sf-2); }
#dealerTable tr.srow > td:first-child { border-left: 3px solid var(--tint-blue-13); }
.dtoggle { cursor: pointer; border: 1px solid var(--tint-blue-13); background: var(--sf-1); color: var(--link);
  border-radius: 6px; width: 22px; height: 22px; line-height: 1; font-size: 11px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; margin-right: 7px; vertical-align: middle; }
.dtoggle:hover { background: var(--blue-soft); }

/* Filter bar with checkbox dropdown (master lists) */
.flt-dd { position: relative; }
.flt-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; background: var(--sf-1);
  border: 1px solid var(--bd-4); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.14);
  padding: 8px; min-width: 250px; max-height: 250px; overflow: auto; display: none; }
.flt-panel.open { display: block; }
.flt-panel label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px;
  font-size: 13px; cursor: pointer; margin: 0; }
.flt-panel label:hover { background: var(--sf-7); }
.flt-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.flt-check input, .flt-panel input[type=checkbox] { accent-color: var(--blue); cursor: pointer; }

/* Row action group (View / Edit / Delete) in master tables */
.actions { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.actions form { display: inline; margin: 0; }
table.data tr.sel > td { background: var(--blue-soft); }
.card.editing { border: 1.5px solid var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

/* ---------- Flash messages ---------- */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600; }
.flash.success { background: var(--green-soft); color: var(--on-green-2); border: 1px solid var(--edge-green-1); }
.flash.error   { background: var(--red-soft);   color: var(--on-red-2); border: 1px solid var(--tint-red-5); }
.flash.info    { background: var(--blue-soft);  color: var(--on-blue-5); border: 1px solid var(--tint-blue-11); }

/* ---------- Pipeline (order details) ---------- */
.pipe { display: flex; align-items: flex-start; overflow-x: auto; padding: 6px 0 2px; }
.pipe .pstep { display: flex; flex-direction: column; align-items: center; min-width: 108px; text-align: center; position: relative; }
.pipe .pstep::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line);
}
.pipe .pstep:first-child::before { display: none; }
.pipe .pstep.on::before { background: var(--green); }
.pipe .dot {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sf-10); color: var(--ink-6);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  position: relative; z-index: 1; border: 2px solid var(--bd-2);
}
.pipe .pstep.on .dot { background: var(--green); border-color: var(--green); color: #fff; }
.pipe .pstep.now .dot { background: var(--sf-1); border-color: var(--blue); color: var(--link); }
.pipe .plabel { font-size: 11.5px; font-weight: 700; margin-top: 6px; }
.pipe .ptime { font-size: 10.5px; color: var(--muted); }

/* ---------- Detail blocks ---------- */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; }
.dl .item .t { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.dl .item .v { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.banner {
  border: 1px solid var(--edge-amber-4); background: var(--tint-amber-1); color: var(--on-orange-4);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px;
}
.banner b { display: block; }

/* ---------- Bars (dashboard mini chart) ---------- */
.bars { display: flex; align-items: flex-end; gap: 18px; height: 140px; padding: 8px 4px 0; }
.bars .bgroup { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.bars .bpair { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
.bars .bar { width: 20px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bars .bar.f { background: var(--green); }
.bars .bar.s { background: var(--blue); }
.bars .blabel { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy); }
.login-card { background: var(--card); border-radius: 14px; padding: 34px 34px 28px; width: 380px; max-width: 92vw; }
.login-card .logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-card h1 { font-size: 20px; margin: 0; }
.login-card .sub { color: var(--muted); font-size: 12.5px; }

/* ---------- Utility ---------- */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
.right { text-align: right; }
.big { font-size: 22px; font-weight: 800; }
.totalbox { background: var(--sf-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; }
.totalbox .t { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.totalbox .v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.totalbox.green { background: var(--green-soft); border-color: var(--edge-green-1); }
.totalbox.blue  { background: var(--blue-soft); border-color: var(--tint-blue-11); }
.totalbox.violet{ background: var(--violet-soft); border-color: var(--tint-violet-2); }

/* ---------- Icon KPI cards (reference dashboards) ---------- */
.kpi.kpi-ico { display: flex; align-items: center; gap: 12px; }
.k-ico {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
}
.k-ico svg { width: 22px; height: 22px; }
.k-ico.sm { width: 34px; height: 34px; flex: 0 0 34px; }
.k-ico.sm svg { width: 17px; height: 17px; }
.k-ico.blue   { background: var(--blue-soft);  color: var(--blue-dark); }
.k-ico.green  { background: var(--green-soft); color: var(--green-ink); }
.k-ico.orange { background: var(--tint-orange-1); color: var(--on-orange-6); }
.k-ico.purple { background: var(--violet-soft); color: var(--violet-ink); }
.k-ico.cyan   { background: var(--tint-teal-1); color: var(--on-teal-1); }
.k-ico.red    { background: var(--red-soft); color: var(--red-ink); }
.k-ico.slate  { background: var(--sf-10); color: var(--ink-1); }
.kpi .k-body { min-width: 0; }
.kpi.kpi-ico .k-value { font-size: 22px; }

/* ---------- Donut (conic-gradient) ---------- */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { border-radius: 50%; position: relative; flex: 0 0 auto; }
.donut::before { content: ""; position: absolute; inset: 22%; background: var(--card); border-radius: 50%; }
.donut .d-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; z-index: 1;
}
.donut .d-big { font-size: 22px; font-weight: 800; line-height: 1.1; }
.donut .d-sub { font-size: 11px; color: var(--muted); }
.d-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; min-width: 150px; }
.d-legend .d-item { display: flex; align-items: center; gap: 7px; }
.d-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }

/* ---------- Quick actions ---------- */
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.qa {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  background: var(--card); font-weight: 600; font-size: 13px; color: var(--ink);
}
.qa:hover { border-color: var(--blue); color: var(--blue-dark); text-decoration: none; background: var(--sf-2); }

/* A DOCUMENT'S ACTION PANEL — a form, not a chip.
   .qa above is a quick-action chip: an icon and a label, side by side, which is
   why it is a flex ROW. The document screens (inward, outward, adjustment,
   expense) reuse the class for <form> panels that carry a heading, a sentence
   of explanation and often a row of inputs. Laid out as a row those became
   columns: the sentence wrapped one word per line and the button was cut in
   half. A form is never a chip, so it stacks. */
form.qa { display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  font-weight: 400; padding: 14px; }
form.qa > b { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
form.qa p { margin: 0; line-height: 1.5; }
form.qa .frow { margin-bottom: 0; }
/* The button sits at the foot, so panels of different heights line their
   buttons up instead of floating each one mid-card. */
form.qa .btn { align-self: flex-start; margin-top: auto; }
/* Chips can be narrow; a panel with a sentence in it cannot. */
.qa-grid:has(form.qa) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: stretch; }
/* A panel that asks for the vehicle or the invoice needs the whole width — its
   inputs are the point of it, not an afterthought beside a button. */
.qa-grid form.qa:has(.frow) { grid-column: 1 / -1; }

/* ---------- Alerts list (dashboard) ---------- */
.alerts { display: flex; flex-direction: column; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.alert-row:last-child { border-bottom: none; }
.alert-row .a-txt { flex: 1; min-width: 0; }
.alert-row .a-txt b { display: block; font-size: 13px; }
.alert-row .a-txt .small { color: var(--muted); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  border-radius: 8px 8px 0 0; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs a:hover { color: var(--ink); background: var(--sf-2); }
.tabs a.active { color: var(--blue-dark); border-bottom-color: var(--blue); background: var(--sf-2); }

/* ---------- Movement pills (stock ledger) ---------- */
.pill.inward   { background: var(--green-soft); color: var(--green-ink); }
.pill.outward  { background: var(--red-soft); color: var(--red-ink); }
.pill.transfer { background: var(--blue-soft); color: var(--blue-dark); }
.pill.adjust   { background: var(--violet-soft); color: var(--violet-ink); }

/* ---------- Topbar bell + avatar chip ---------- */
.bellwrap { position: relative; display: inline-flex; }
.bellwrap svg { width: 20px; height: 20px; color: var(--muted); }
.bellwrap .bcount {
  position: absolute; top: -7px; right: -8px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 34px;
}
.userchip { display: flex; align-items: center; gap: 9px; }

/* ---------- Report picker (reports page) ---------- */
.rp-list { display: flex; flex-direction: column; gap: 4px; }
.rp-list a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--ink);
  border: 1px solid transparent; text-decoration: none;
}
.rp-list a b { display: block; }
.rp-list a .small { color: var(--muted); }
.rp-list a:hover { background: var(--sf-2); }
.rp-list a.active { background: var(--blue-soft); border-color: var(--tint-blue-11); color: var(--blue-dark); }
.rp-list a.active .small { color: var(--blue-dark); opacity: .75; }

/* ---------- Progress bar ---------- */
.pbar { background: var(--sf-10); border-radius: 999px; height: 8px; overflow: hidden; }
.pbar > span { display: block; height: 100%; border-radius: 999px; background: var(--blue); }

/* ---------- Selectable table row ---------- */
tr.sel td { background: var(--blue-soft) !important; }

/* ---------- Mobile: sidebar becomes an off-canvas drawer ---------- */
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: 256px; height: 100vh;
    transform: translateX(-105%);
    transition: transform .18s ease;
    box-shadow: 4px 0 18px rgba(15, 23, 42, .35);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .backdrop {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(15, 23, 42, .5);
  }
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar h1 { font-size: 16px; }
  .topbar .crumb { display: none; }
  .datebox { display: none; }
  .userbox { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* The plain-text twin of a control, for the printed page only — a register
   printed for the file should read "BAMPADA", not carry a dropdown. */
.only-print { display: none; }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .only-print { display: inline !important; }
  .content { padding: 0; }
  body { background: #fff; }
  .card { border: none; }
}

/* =========================================================================
   v2 — RH/Road Order Panel, tracker tiles, data-health banners
   ========================================================================= */

.k-ico.violet { background: var(--violet-soft); color: var(--violet-ink); }

.kpi-link { display: flex; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.kpi-link:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .10); transform: translateY(-1px); }

/* ---- Handler firm strip (Rake Management) --------------------------------
   The firms from the Handler Master, name only. Built from the .kpi card
   vocabulary so it reads as the same family as every other card in the app,
   only shrunk to a single line: there is no value and no sub-line, so no
   .k-value / .k-sub — just the master's icon and the firm's name.

   Every colour is a token, never a literal, so the strip follows the theme
   into dark mode with the rest of the app instead of needing its own block. */
.hstrip-h { font-size: 12px; font-weight: 800; color: var(--ink); margin: 0 0 8px; }
.hstrip-h .muted { font-weight: 600; }
.hstrip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.hcard {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px 15px 8px 9px; color: inherit; text-decoration: none;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.hcard:hover { text-decoration: none; border-color: var(--bd-4);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .10); transform: translateY(-1px); }
.hcard .hname { font-size: 13px; font-weight: 800; letter-spacing: .01em; }
/* The firm whose tree is open below. It keeps a ring in the app's blue and
   loses the hover lift — it is not somewhere to go, it is where you already
   are, and clicking it again closes the tree. */
.hcard.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.hcard.on:hover { transform: none; box-shadow: 0 0 0 2px var(--blue-soft); }
/* An inactive firm is still IN the master, so it is still on the strip —
   dimmed and struck through rather than quietly missing, which would leave the
   strip disagreeing with the master it claims to be showing. */
.hcard.off { opacity: .55; }
.hcard.off .hname { text-decoration: line-through; }

/* ---- banners ---- */
.banner.warn { background: var(--amber-soft); border-color: var(--edge-amber-4); color: var(--on-orange-3); }
.banner.ok   { background: var(--green-soft); border-color: var(--edge-green-5); color: var(--on-green-1); }

/* ---- compact tables ---- */
table.data.compact th, table.data.compact td { padding: 5px 8px; font-size: 12.5px; }
table.data.compact input, table.data.compact select { padding: 4px 6px; font-size: 12.5px; }
table.data tr.hi > td { background: var(--violet-soft); font-weight: 700; }

/* ---- real-time tracker tiles (workflow doc §14) ---- */
.tracker { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tk {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--sf-2);
  transition: box-shadow .15s, transform .15s, background .15s;
}
.tk:hover { background: var(--sf-1); box-shadow: 0 4px 14px rgba(15, 23, 42, .09); transform: translateY(-1px); }
.tk-body { display: flex; flex-direction: column; min-width: 0; }
.tk-v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tk-l { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ---- RH / Road order panel ---- */
.panel-card { padding-top: 10px; }
.panel-title {
  background: var(--tint-amber-3); border: 1px solid #fde047; color: var(--on-orange-2);
  font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 6px; margin-bottom: 12px;
}
.panel-title .btn { letter-spacing: normal; text-transform: none; }

.cat-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--sf-1); }
.cat-box.has-qty { border-color: var(--blue); background: var(--sf-2); }
.cat-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 8px;
}
.cat-head.fert { background: var(--green-soft); color: var(--on-green-1); border: 1px solid var(--edge-green-5); }
.cat-head.snd  { background: var(--blue-soft);  color: var(--on-blue-3); border: 1px solid var(--edge-blue-5); }
.cat-head .quote { font-family: var(--mono); font-size: 11px; font-weight: 700; opacity: .8; letter-spacing: 0; }
.cat-box .grand { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cat-box .grand b { font-size: 15px; font-variant-numeric: tabular-nums; }

.order-block { border-left: 4px solid var(--violet); }
.ob-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ob-label {
  background: var(--tint-orange-2); border: 1px solid var(--edge-orange-1); color: var(--on-red-1);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
}
.ob-head select.party { max-width: 340px; font-weight: 600; }
.ob-head .party-info { flex: 1 1 200px; }

/* Literal in both themes — see the note on these two in theme.css. */
.btn.add-order {
  background: #dcfce7; border: 1.5px solid var(--green); color: #14532d; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.btn.add-order:hover { background: #bbf7d0; }
.btn.submit-all {
  background: #fef08a; border: 2px solid #ca8a04; color: #713f12;
  font-weight: 900; font-size: 15px; letter-spacing: .07em; padding: 11px 26px;
}
.btn.submit-all:hover { background: #fde047; }

.batch-order { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--sf-1); }
.batch-order .big { font-size: 16px; }

@media (max-width: 1100px) {
  .ob-head select.party { max-width: 100%; }
  .cat-box { padding: 8px; }
}

/* ---- searchable auto-suggestion picker (select.searchable) ---- */
.ss { position: relative; }
.ss select.ss-hidden {           /* hidden but still focusable — display:none wedges form validation */
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
}
.ss-input { width: 100%; }
.ss-input.ss-empty { color: var(--muted); }
.ss-list {
  display: none; position: absolute; z-index: 90; left: 0; right: 0; top: 100%;
  margin-top: 3px; max-height: 260px; overflow-y: auto;
  background: var(--sf-1); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
}
.ss-list.open { display: block; }
.ss-item { padding: 7px 11px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--bd-1); }
.ss-item:last-child { border-bottom: none; }
.ss-item:hover { background: var(--blue-soft); }
.ss-item.on { background: var(--violet-soft); font-weight: 700; }
.ss-item.ss-none { color: var(--muted); cursor: default; }
.ss-item.ss-none:hover { background: var(--sf-1); }

/* ---- stage section tabs on the order lists ---- */
.tabs.stage-tabs { flex-wrap: wrap; gap: 2px; margin-bottom: 14px; }
.tabs.stage-tabs a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tabs.stage-tabs .tab-n {
  background: var(--sf-10); color: var(--ink-2); font-size: 11px; font-weight: 800;
  border-radius: 20px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.tabs.stage-tabs a.active .tab-n { background: var(--blue); color: #fff; }

/* ---- Print / CSV / Excel bar on the order lists — External and In-house kept separate ---- */
.export-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 14px; }
.export-bar .export-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.export-group {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px 5px 10px; background: var(--sf-2);
}
.export-group .export-kind { font-weight: 700; font-size: 12.5px; margin-right: 4px; display: inline-flex; align-items: center; gap: 6px; }
.export-group .export-kind .n {
  background: var(--sf-10); color: var(--ink-2); font-size: 11px; font-weight: 800;
  border-radius: 20px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.export-group.inhouse { border-color: var(--tint-violet-2); background: var(--sf-3); }
.export-group.inhouse .export-kind { color: var(--violet-ink); }
.export-group.inhouse .export-kind .n { background: var(--violet-soft); color: var(--violet-ink); }
.export-group.external { border-color: var(--tint-blue-11); background: var(--tint-blue-1); }
.export-group.external .export-kind { color: var(--blue-dark); }
.export-group.external .export-kind .n { background: var(--blue-soft); color: var(--blue-dark); }

/* ---- Settings screen ---- */
.settings-table td { vertical-align: middle; }
.settings-table select, .settings-table input[type=text], .settings-table input[type=number] { width: 100%; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 13px; }
.switch input { width: 16px; height: 16px; }

/* ---- Data Cleanup presets ---- */
.preset { border: 1px solid var(--line); border-radius: 11px; padding: 15px 16px; background: var(--sf-2); }
.preset.danger { border-color: var(--edge-red-2); background: var(--red-soft); }
.preset h3 { margin: 0 0 6px; font-size: 14.5px; }
.preset p { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.preset button:disabled { opacity: .45; cursor: not-allowed; }

/* =========================================================================
   Dashboard — one-screen control view
   Reading order: four numbers -> alerts -> current rake -> pipelines -> position
   Every colour carries meaning: grey = idle, blue = working, green = done,
   amber = waiting on us, red = needs a decision.
   ========================================================================= */

/* ---- Headline KPI tiles (accent bar identifies each one at a glance) ---- */
.dash-kpi .kpi { position: relative; overflow: hidden; transition: box-shadow .16s ease, transform .16s ease; }
.dash-kpi .kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; }
.dash-kpi .kpi:nth-child(1)::before { background: var(--green); }
.dash-kpi .kpi:nth-child(2)::before { background: var(--blue); }
.dash-kpi .kpi:nth-child(3)::before { background: var(--violet); }
.dash-kpi .kpi:nth-child(4)::before { background: #f59e0b; }
.dash-kpi .kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .09); text-decoration: none; }
.dash-kpi .k-value { font-size: 30px; letter-spacing: -.01em; }
.dash-kpi .k-label { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }

/* ---- Needs-attention chips ---- */
.card.attn { padding-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
/* A chip in a chip ROW may wrap; one used inline as a tag stays on its line.
   `nowrap` above is right for a tag beside a heading, and wrong inside .chips —
   there the row is the only thing bounding the width, so one long chip pushed
   the whole card past its own edge and set the page scrolling sideways. The
   text wraps instead; the dot is pinned so it cannot be squashed by it. */
.chips .chip { white-space: normal; max-width: 100%; min-width: 0; }
.chips .chip::before { flex: 0 0 7px; }
.chip:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, .10); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.alert   { background: var(--red-soft);   color: var(--on-red-3); border-color: var(--edge-red-2); }
.chip.pending { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--edge-amber-1); }
.chip.active  { background: var(--blue-soft);  color: var(--blue-dark); border-color: var(--tint-blue-11); }
.chip.neutral { background: var(--sf-7); color: var(--ink-2); border-color: var(--bd-3); }
.attn-none { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px;
  color: var(--green-ink); font-weight: 700; }
.attn-none::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* ---- Current-rake hero ---- */
.rake-hero { padding: 0; overflow: hidden; }
.hero-top {
  background: linear-gradient(120deg, #0e1a2e 0%, #16305c 55%, #1d4ed8 100%);
  color: #fff; padding: 15px 18px;
}
.hero-top h2 { color: #fff; margin: 0; font-size: 17px; letter-spacing: .01em; }
.hero-top .muted, .hero-top .small { color: #b9c8e6; }
.hero-top a.small { color: var(--tint-blue-4); }
.hero-top .k-ico { background: rgba(255,255,255,.14); color: #fff; }
.hero-body { padding: 16px 18px 18px; }

/* Arrival date and allocation — the two figures the rake header is read for.
   They sit in their own labelled chips rather than in the grey sub-line, and
   the allocation carries the amber of its PARTY ODR ALLOCATION tile below. */
.hero-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.hfact {
  display: flex; align-items: baseline; gap: 7px; padding: 5px 11px;
  border-radius: 9px; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.28);
}
.hero-top .hfact-t {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tint-blue-13); white-space: nowrap;
}
.hfact b { font-size: 14.5px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-top .hfact-s { font-size: 10.5px; color: var(--tint-blue-13);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.hfact.alloc { background: rgba(245,158,11,.26); border-color: rgba(251,191,36,.6); }
.hfact.alloc b { color: #fde68a; }
.hero-top .hfact.alloc .hfact-t, .hero-top .hfact.alloc .hfact-s { color: #fcd9a4; }

/* ---- Handler firms board ----
   A SMALL card per firm: who it is, what its work adds up to, and one line per
   company enrolled to it. The rake list lives at the top of the page, so this
   card carries only what that strip cannot say — the chain and the rollup — and
   folds the rakes away behind their company line. The firm carrying the rake
   open at the top is marked so the two halves of the screen read as one. */
.firmgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.firm { display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px 12px; background: var(--sf-1); }
.firm.owns { border-color: var(--edge-green-2); background: var(--green-soft); }
/* On the green card a green-soft pill would vanish into the background. */
.firm.owns .pill.done { background: var(--green); color: #fff; }
.firm-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.firm-h b { font-size: 13.5px; }
.firm-co-t { font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin: 9px 0 0; }

/* The rollup rides at the top of the card, between two hairlines: it is what
   the card is read for, so it must not sit below a tree that can grow. Six
   across on a wide card, three on a narrow one, never taller than two rows. */
/* However many figures the firm has, they share ONE row.
   auto-fit at a fixed minimum took five of six and stranded Godowns on a row of
   its own; a fixed three-across then cost every firm two rows even when it had
   two figures to show. grid-auto-flow:column takes whatever it is given — two
   wide cells or six narrow ones — and never wraps. */
.firm-figs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  margin-top: 8px; padding: 7px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.firm-figs > div { text-align: center; }
.firm-figs b { display: block; font-size: 13.5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.firm-figs span { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: 1px; }

/* firm → company → rake, drawn as one chain. The rail down the left is what
   makes it read as a tree rather than stacked lists: one continuous line with a
   dot per company and, once opened, that company's rakes hanging off it. The
   tree scrolls inside itself so one busy firm cannot stretch its neighbour. */
.cotree { margin: 4px 0 0 4px; max-height: 320px; overflow-y: auto; }
.co { position: relative; padding: 5px 0 5px 13px; border-left: 2px solid var(--tint-blue-12); }
.co.bare { border-left-color: var(--bd-2); }
.co + .co { border-top: 1px dashed var(--line); }
.co-h { display: flex; align-items: center; gap: 6px; }
.co-h b { font-size: 12px; overflow-wrap: anywhere; }
.co-dot { position: absolute; left: -5px; top: 11px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); }
.co-dot.snd { background: var(--blue); }
.co-n { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--blue-dark); background: var(--blue-soft); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap; }
/* A company with rakes is a <details>; the default triangle is replaced by one
   that sits inside the flex row and turns when the branch opens. */
details.co > summary.co-h { cursor: pointer; list-style: none; }
details.co > summary.co-h::-webkit-details-marker { display: none; }
details.co > summary.co-h::before { content: ""; flex: 0 0 auto; width: 0; height: 0;
  border-left: 4px solid var(--bd-5); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform .12s ease; }
details.co[open] > summary.co-h::before { transform: rotate(90deg); }
details.co > summary.co-h:hover b { color: var(--blue-dark); }

/* A rake is a ROW, not a card: number, date, what is still to lift, and how far
   it has got. Everything else about it is one click away at the top of the page,
   so the row stays one line and a hundred of them stay readable. */
.corow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 4px; padding: 4px 7px; border-radius: 7px; font-size: 11px;
  background: var(--sf-2); border: 1px solid transparent; color: inherit; text-decoration: none; }
.corow:hover { background: var(--sf-1); border-color: var(--edge-blue-2); text-decoration: none; }
.corow.sel { background: var(--sf-1); border-color: var(--blue); }
.corow .mono { font-size: 11px; font-weight: 700; }
.corow-n { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.corow-n b { color: var(--ink); }
.corow-p { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.corow-bar { flex: 0 0 40px; height: 3px; border-radius: 3px; background: var(--sf-9); overflow: hidden; }
.corow-bar > span { display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%); }
/* What the rows above could not carry, counted rather than drawn. */
.co-more { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
  font-size: 10.5px; color: var(--muted); margin-top: 5px; padding-left: 2px; }
.co-more a { margin-left: auto; font-weight: 700; }
.firmless { display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }

/* ---- The firm tree, drawn with its connectors (Rake Management) ----------
   The Dashboard's .cotree shows the same firm → company → rake nesting as a
   plain left rule per company, because there it is a side panel. On Rake
   Management the tree IS the content, so it gets real connectors: a trunk
   descending from the firm in the card header, an elbow into every company,
   and a dashed branch down to each rake.

   Every rule here is scoped to .cotree.roots — a class only this page sets —
   so the Dashboard's copy keeps the compact look it was designed for. Change
   nothing above this block and both screens stay as they are. */
.cotree.roots { max-height: 60vh; margin: 6px 0 0 6px; padding-left: 2px; }

/* One company = one segment of the trunk, plus an elbow out to its dot. The
   dashed rule that separates companies on the Dashboard comes off: between two
   connected branches it reads as a cut, not a separator. */
.cotree.roots .co {
  padding: 7px 0 7px 22px; margin-left: 7px; border-top: 0;
  border-left: 2px solid var(--tint-blue-12);
}
.cotree.roots .co::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 14px; height: 2px;
  background: var(--tint-blue-12); border-radius: 2px;
}
/* The last company blanks its own trunk segment and paints a stub down to its
   elbow instead, so the trunk ENDS at the final branch rather than running on
   past it into empty space — the difference between a tree and a stray line. */
.cotree.roots .co:last-child { border-left-color: transparent; }
.cotree.roots .co:last-child::after {
  content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: 17px;
  background: var(--tint-blue-12);
}
/* A company holding no rake is a dead end, and its branch says so before the
   words do: greyed line, greyed elbow, greyed dot. */
.cotree.roots .co.bare { border-left-color: var(--bd-2); }
.cotree.roots .co.bare::before,
.cotree.roots .co.bare:last-child::after { background: var(--bd-2); }
.cotree.roots .co.bare .co-dot { background: var(--bd-4); }

/* The dot moves out to the end of the elbow, where the branch actually lands —
   on the Dashboard it straddles the rule instead, which has no elbow to meet. */
.cotree.roots .co-dot { left: 12px; top: 13px; }
/* The Dashboard's company row never wraps because it carries a pill and a short
   figure. This one carries three digit cards as well, and company names here run
   to "Brahmaputra Valley Fertilizer Corporation Ltd" — so the row is allowed to
   wrap, and the name is the part that gives up width first. */
.cotree.roots .co-h { flex-wrap: wrap; row-gap: 5px; }
.cotree.roots .co-h > b { flex: 1 1 auto; min-width: 130px; }
/* Following one line out of a long list is easier if the line answers back. */
.cotree.roots .co:hover > .co-h .co-dot { box-shadow: 0 0 0 3px var(--blue-soft); }
.cotree.roots summary.co-h { cursor: pointer; }

/* The rakes under one company: a dashed branch with a tick into each row.
   Dashed, so the eye reads company → rake as a different kind of step from
   firm → company, which is the solid trunk. */
.cotree.roots .cokids {
  position: relative; margin: 3px 0 0 3px; padding-left: 15px;
  border-left: 2px dashed var(--edge-blue-2);
}
.cotree.roots .cokids .corow { position: relative; }
.cotree.roots .cokids .corow::before {
  content: ""; position: absolute; left: -15px; top: 50%; width: 11px; height: 2px;
  background: var(--edge-blue-2);
}
.cotree.roots .cokids .co-more { padding-left: 2px; }

/* Every company on the tree carries the same three digits, as small cards:
   how many rakes, how many still running, how many completed. The .kpi idea at
   tile size — digit on top, label under it — so a reader who has taken in the
   cards at the top of the page already knows how to read these.

   The two coloured cards are the split of the plain one, so they are tinted
   with the meanings the rest of the app already uses: blue for work in hand,
   green for work finished. A company holding no rake shows three dimmed zeros
   rather than a sentence — a row of words among rows of digits is what makes a
   strip like this hard to read down. */
.costats { display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: stretch; }
.costats.nil { opacity: .45; }
.costat {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 46px; padding: 3px 7px; border-radius: 8px; line-height: 1.1;
  background: var(--sf-2); border: 1px solid var(--line);
}
.costat b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.costat i { font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); font-style: normal; margin-top: 1px; white-space: nowrap; }
.costat.run    { background: var(--blue-soft);  border-color: var(--tint-blue-11); }
.costat.run b  { color: var(--blue-dark); }
.costat.done   { background: var(--green-soft); border-color: var(--edge-green-5); }
.costat.done b { color: var(--green-ink); }
/* The MT reading keeps its place at the end of the row, but it is the second
   glance now — the digits are the headline. It folds away first when the row
   runs out of width. */
.cotree.roots .comt { flex: 0 1 auto; text-align: right; }
@media (max-width: 900px) { .cotree.roots .comt { display: none; } }

/* Figure tiles — MT headline with BAG / TRUCK underneath */
.figs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.fig {
  position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px 9px;
  background: var(--sf-1); overflow: hidden; transition: box-shadow .16s ease;
}
.fig:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, .07); }
.fig::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fill-2); }
.fig .t { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }
.fig .mt { font-size: 20px; font-weight: 800; margin-top: 3px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fig .mt span { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 2px; }
.fig .sub { display: flex; justify-content: space-between; gap: 6px; margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed var(--line); font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fig.blue::before   { background: var(--blue); }
.fig.orange::before { background: #f59e0b; }
.fig.violet::before { background: var(--violet); }
.fig.green::before  { background: var(--green); }
.fig.blue   { background: linear-gradient(var(--sf-2), var(--sf-1)); }
.fig.orange { background: linear-gradient(var(--sf-5), var(--sf-1)); }
.fig.violet { background: linear-gradient(var(--sf-2), var(--sf-1)); }
.fig.green  { background: linear-gradient(var(--sf-2), var(--sf-1)); }
@media (max-width: 1240px) { .figs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .figs { grid-template-columns: repeat(2, 1fr); } }

/* Lifted bar: party / warehouse / still at RH */
.lift-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: var(--sf-9); margin: 16px 0 8px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .07); }
.lift-bar span { display: block; height: 100%; transition: width .4s ease; }
.lift-bar .p { background: linear-gradient(90deg, #fbbf24, #d97706); }
.lift-bar .w { background: linear-gradient(90deg, #a78bfa, #6d28d9); }
.lift-bar .r { background: repeating-linear-gradient(45deg, var(--fill-2) 0 6px, var(--fill-1) 6px 12px); }
.lift-key { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 11.5px; color: var(--muted); }
.lift-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lift-key i.p { background: #f59e0b; } .lift-key i.w { background: #8b5cf6; } .lift-key i.r { background: var(--fill-2); }
.lift-key b { color: var(--ink); }

/* Date-wise dispatch chips */
.daystrip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.day { border: 1px solid var(--line); border-left: 3px solid #f59e0b; border-radius: 9px; padding: 7px 12px; background: var(--sf-1); }
.day.wh { border-left-color: var(--violet); background: var(--sf-2); }
.day .t { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }
.day .v { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.day .v span { font-weight: 500; font-size: 11px; color: var(--muted); }

/* ---- Pipeline strip: one box per workflow stage, joined into a rail ---- */
.flow { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding: 2px 0 4px; }
.flow .step {
  position: relative; flex: 1 1 0; min-width: 108px; text-align: center; padding: 12px 8px 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--sf-1); color: var(--ink);
  transition: box-shadow .16s ease, transform .16s ease;
}
.flow .step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sf-10); border-radius: 11px 11px 0 0; }
.flow .step::after { content: ""; position: absolute; top: 0; right: -11px; width: 12px; height: 3px; background: var(--sf-10); z-index: 1; }
.flow .step:last-child::after { display: none; }
.flow .step:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .09); }
.flow .step .t { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-weight: 800; line-height: 1.3; min-height: 26px; }
.flow .step .n { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.flow .step .q { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 15px; }
.flow .step.on          { border-color: var(--tint-blue-11); background: linear-gradient(var(--sf-2), var(--sf-1)); }
.flow .step.on::before, .flow .step.on::after { background: var(--blue); }
.flow .step.on .n       { color: var(--blue-dark); }
.flow .step.on .t       { color: var(--blue-dark); }
.flow .step.done        { border-color: var(--edge-green-2); background: linear-gradient(var(--sf-6), var(--sf-1)); }
.flow .step.done::before, .flow .step.done::after { background: var(--green); }
.flow .step.done .n     { color: var(--green-ink); }
.flow .step.alert       { border-color: var(--edge-red-2); background: linear-gradient(var(--sf-5), var(--sf-1)); }
.flow .step.alert::before, .flow .step.alert::after { background: var(--red); }
.flow .step.alert .n    { color: var(--on-red-3); }
.flow .step.zero        { background: var(--sf-1); }
.flow .step.zero .n     { color: #cbd5e1; }
@media (max-width: 900px) {
  .flow { flex-wrap: wrap; }
  .flow .step { flex: 1 1 44%; }
  .flow .step::after { display: none; }
}

/* ---- Live activity timeline ---- */
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--fill-1); }
.tl-row { position: relative; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.tl-row:last-child { border-bottom: 0; }
.tl-row::before {
  content: ""; position: absolute; left: -20px; top: 13px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sf-1); border: 2.5px solid var(--blue); box-shadow: 0 0 0 3px #fff;
}
.tl-row.in::before  { border-color: var(--green); }
.tl-row.out::before { border-color: #f59e0b; }
.tl-row.adj::before { border-color: var(--red); }
.tl-head { display: flex; align-items: baseline; gap: 8px; }
.tl-act { font-size: 12.5px; font-weight: 800; }
.tl-qty { margin-left: auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-qty.in { color: var(--green-ink); } .tl-qty.out { color: var(--amber-ink); } .tl-qty.adj { color: var(--red-ink); }
.tl-qty span { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); text-align: right; }
.tl-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tl-sub b { color: var(--ink); font-weight: 700; }

/* ---- Section heading with a colour accent ---- */
.sec { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.sec h2 { margin: 0; font-size: 15.5px; }
.sec .bar { width: 4px; height: 17px; border-radius: 3px; background: var(--blue); flex: 0 0 4px; }
.sec .bar.violet { background: var(--violet); }
.sec .bar.green { background: var(--green); }
.sec .bar.amber { background: #f59e0b; }

/* ---- Rake picker: every rake as a small card, the chosen one opens below ----
   Built to stay tidy at 1 rake or 50 — the strip wraps, scrolls after two rows,
   and filters in the browser. */
.rk-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-filter input[type=search] {
  width: 210px; padding: 6px 10px; border: 1px solid var(--bd-4); border-radius: 8px;
  font-family: var(--font); font-size: 12.5px;
}
.fbtn {
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--sf-1);
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.fbtn:hover { border-color: var(--bd-5); color: var(--ink); }
.fbtn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.fbtn b { font-weight: 800; }

.rkbar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px;
  max-height: 340px; overflow-y: auto; padding: 2px;
}
.rkcard {
  position: relative; display: block; padding: 11px 12px 10px; color: var(--ink);
  border: 1px solid var(--line); border-left: 4px solid var(--bd-4); border-radius: 11px; background: var(--sf-1);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.rkcard:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .10); }
.rkcard.new     { border-left-color: var(--blue); }
.rkcard.running { border-left-color: #f59e0b; }
.rkcard.done    { border-left-color: var(--green); }
.rkcard.sel { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft), 0 8px 20px rgba(37, 99, 235, .12); background: var(--sf-2); }
.rkcard.sel::after {
  content: "OPEN"; position: absolute; top: 9px; right: 10px; font-size: 9px; font-weight: 800;
  letter-spacing: .08em; color: var(--blue-dark); background: var(--blue-soft); padding: 2px 6px; border-radius: 5px;
}
.rk-top { display: flex; align-items: center; gap: 6px; }
.rk-no { font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-top .pill { font-size: 8.5px; padding: 2px 6px; }
.rkcard .rk-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0 6px; }
.rk-nums span { display: block; }
.rk-nums i { display: block; font-style: normal; font-size: 8.5px; letter-spacing: .07em; color: var(--muted); font-weight: 800; }
.rk-nums b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rk-bar { height: 5px; border-radius: 4px; background: var(--sf-9); overflow: hidden; }
.rk-bar span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #16a34a); }
.rk-foot { font-size: 10px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---- Rake board: the sheet's DASHBOARD tab, rebuilt ---- */
.board-qty { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.qrow {
  position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px 8px;
  background: var(--sf-1); overflow: hidden;
}
.qrow::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fill-2); border-radius: 11px 11px 0 0; }
.qrow .ql { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-weight: 800; line-height: 1.3; min-height: 25px; }
.qrow .qv { font-size: 19px; font-weight: 800; line-height: 1.15; margin-top: 2px; font-variant-numeric: tabular-nums; }
.qrow .qv span { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.qrow .qs { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qrow .qs:first-of-type { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line); }
/* ---- The tiles wear their hue ----------------------------------------------
   A 3px line over a white card is not much of a colour code: five tiles read as
   five white boxes with a stripe on top. The accent now runs through the tile —
   a deeper top edge, a wash behind the heading block, and the LABEL in the hue.

   The figure itself stays near-black on purpose. theme.css's rule holds: colour
   lives on the chrome, because a board of tonnages is read, not admired, and a
   coloured number is a harder number to read.
   --------------------------------------------------------------------------- */
.qrow::before { height: 4px; }
.qrow.blue::before   { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.qrow.orange::before { background: linear-gradient(90deg, #fbbf24, #ea580c); }
.qrow.violet::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.qrow.green::before  { background: linear-gradient(90deg, #4ade80, #16a34a); }
.qrow.amber::before  { background: linear-gradient(90deg, #fcd34d, #b45309); }

.qrow.blue   { background: linear-gradient(var(--tint-blue-1),   var(--sf-1) 62%); }
.qrow.orange { background: linear-gradient(var(--tint-amber-1),  var(--sf-1) 62%); }
.qrow.violet { background: linear-gradient(var(--tint-violet-1), var(--sf-1) 62%); }
.qrow.green  { background: linear-gradient(var(--tint-green-1),  var(--sf-1) 62%); }
.qrow.amber  { background: linear-gradient(var(--tint-amber-2),  var(--sf-1) 62%); }

/* The label is the tile's name, and naming is chrome — so it takes the hue. */
.qrow.blue   > .qmain .ql { color: var(--blue-dark); }
.qrow.orange > .qmain .ql { color: var(--on-orange-5); }
.qrow.violet > .qmain .ql { color: var(--violet-ink); }
.qrow.green  > .qmain .ql { color: var(--on-green-2); }
.qrow.amber  > .qmain .ql { color: var(--amber-ink); }
/* The MT unit beside the figure follows it, so the pair reads as one thing. */
.qrow.blue   > .qmain .qv span { color: var(--blue-dark); }
.qrow.orange > .qmain .qv span { color: var(--on-orange-5); }
.qrow.violet > .qmain .qv span { color: var(--violet-ink); }
.qrow.green  > .qmain .qv span { color: var(--on-green-2); }

/* The added box: the ACTUAL figure sitting under its RR allocation. Inset and
   tinted so a glance separates "what the RR set aside" from "what really
   moved", with a signed chip when the two disagree. */
/* Product-wise split inside a tile: one line per product the rake carried, the
   same products in the same order in every tile so the board reads across.
   Names ellipsis rather than wrap — the full name and all three units are on
   the row's title.

   Each product carries its own colour, held across all five tiles, so the eye
   can follow one product down the board. The swatch carries the colour; the
   name and the figure stay in ordinary ink, and the name is spelled out on
   every line — colour is a reading aid here, never the thing that says which
   product a row is.

   Hues are the first four slots of the validated categorical order
   (blue · orange · aqua · violet). Those four clear the all-pairs
   colour-blind and normal-vision separation floors on a white surface; aqua
   sits under 3:1 contrast, which the always-visible product name relieves.
   Slots 5-8 continue the same fixed order and are never recycled — past four
   the hues are decorative and the name alone carries identity. Real rakes run
   to three products. */
.qprod { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--line); display: grid; gap: 1px; }
.qprod > div { display: flex; align-items: baseline; gap: 5px; font-size: 10px; line-height: 1.45;
  font-variant-numeric: tabular-nums; }
.qprod .pn { flex: 1 1 auto; min-width: 0; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.qprod b { flex: 0 0 auto; font-weight: 800; }
.qprod > div.nil { opacity: .45; }
.qprod > div.nil b { font-weight: 600; }
.qsub .qprod { border-top-color: rgba(15, 23, 42, .12); }

/* The product swatch is its own thing, so the same product wears the same
   colour wherever it appears — rake board tiles, Company Allocation columns. */
.pc { display: inline-block; width: 8px; height: 8px; border-radius: 2.5px; background: var(--pc-8);
  vertical-align: 0; margin-right: 5px; }
.pc.s0 { background: var(--pc-1); }  .pc.s4 { background: var(--pc-5); }
.pc.s1 { background: var(--pc-2); }  .pc.s5 { background: var(--pc-6); }
.pc.s2 { background: var(--pc-3); }  .pc.s6 { background: var(--pc-7); }
.pc.s3 { background: var(--pc-4); }  .pc.s7 { background: var(--pc-8); }
.qprod .pc { flex: 0 0 auto; align-self: center; margin-right: 0; }

.qrow.has-sub { display: flex; flex-direction: column; padding-bottom: 0; }
.qsub { margin: 8px -11px 0; padding: 6px 11px 8px; background: rgba(15, 23, 42, .045);
  border-top: 1px solid var(--line); margin-top: auto; }
/* A tile can carry more than one added box — FOR W.H carries both the dispatch
   and the godown's own inward entry. Only the FIRST takes the auto top margin:
   leave it on all of them and the free space is shared out BETWEEN the boxes,
   which pulls the stack apart and leaves each box floating on its own. The rest
   sit flush underneath, told apart by their own top border. */
.qrow a.qsub + a.qsub { margin-top: 0; }
.qsub .sl { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-weight: 800; display: flex; align-items: center; gap: 4px; }
.qsub .sv { font-size: 15px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.qsub .sv span { font-size: 9.5px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.qsub .ss { font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Its own class, NOT .chip — the global .chip is a pill with a leading dot,
   a border and a hover lift, none of which belong on a delta this small. */
.qsub .dchip { display: inline-block; font-size: 8.5px; font-weight: 800; padding: 1px 4px;
  border-radius: 4px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.qsub .dchip.over  { background: var(--amber-soft); color: var(--amber-ink); }
.qsub .dchip.short { background: var(--blue-soft); color: var(--blue-dark); }
/* ---- Every tile is the way in ------------------------------------------
   A tile and its added box are each a link back to this same screen with
   ?drill=<figure key>: the board stays where it is and the lines behind that
   one figure open underneath. A plain link, so the drill-down can be
   bookmarked, reloaded and backed out of — no script in it. */
.qrow .qmain, .qrow a.qsub { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.qrow .qmain:hover, .qrow a.qsub:hover { text-decoration: none; }
.qrow { transition: border-color .12s, box-shadow .12s; }
.qrow:hover { border-color: var(--bd-4); box-shadow: 0 3px 10px rgba(15, 23, 42, .09); }
.qrow a.qsub { position: relative; }
.qrow a.qsub:hover { background: rgba(15, 23, 42, .08); }
/* Room for the magnifier, so a label that wraps never runs under it. */
.qrow .ql, .qrow .sl { padding-right: 15px; }
/* The magnifier: faint until the pointer is on the tile, solid once open. */
.qzoom { position: absolute; top: 9px; right: 9px; width: 11px; height: 11px;
  opacity: 0; color: var(--muted); transition: opacity .12s; }
.qrow a.qsub .qzoom { top: 7px; right: 10px; }
.qzoom::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px;
  border: 1.5px solid currentColor; border-radius: 50%; }
.qzoom::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 5px; height: 1.5px;
  background: currentColor; transform: rotate(45deg); transform-origin: right center; }
.qrow:hover .qzoom, .qmain:focus-visible .qzoom, .qrow a.qsub:focus-visible .qzoom { opacity: .55; }
.qmain.on .qzoom, .qrow a.qsub.on .qzoom { opacity: 1; color: var(--blue-dark); }
/* The open tile keeps a ring while the panel below is showing its figure, in
   the tile's own colour — the panel underneath wears the same one, so the eye
   can see at a glance which figure it is reading. */
.qrow.open { border-color: var(--bd-5); box-shadow: 0 0 0 2px #e2e8f0; }
.qrow.blue.open   { border-color: var(--blue);   box-shadow: 0 0 0 2px var(--blue-soft); }
.qrow.orange.open { border-color: #f59e0b;       box-shadow: 0 0 0 2px var(--amber-soft); }
.qrow.violet.open { border-color: var(--violet); box-shadow: 0 0 0 2px var(--violet-soft); }
.qrow.green.open  { border-color: var(--green);  box-shadow: 0 0 0 2px var(--green-soft); }
.qrow.amber.open  { border-color: var(--amber);  box-shadow: 0 0 0 2px var(--amber-soft); }
.qrow a.qsub.on          { background: var(--sf-10); }
.qrow.blue a.qsub.on     { background: var(--blue-soft); }
.qrow.orange a.qsub.on   { background: var(--amber-soft); }
.qrow.violet a.qsub.on   { background: var(--violet-soft); }
.qrow.green a.qsub.on    { background: var(--green-soft); }

/* The board is always FIVE tiles, so the column count steps 5 → 3 → 2 and
   never 4.

   Four across is the one count that strands a tile: it leaves the fifth alone
   on a row with three empty columns beside it — a hundred and twenty-five
   pixels of card carrying one figure. Five is one clean row; three wraps 3 + 2,
   which reads as deliberate; two wraps 2 + 2 + 1, which is ordinary on a phone.
   auto-fit cannot be used here — it picks the most columns that fit, which at
   about 1180px is exactly the four this is avoiding. */
@media (max-width: 1400px) {
  .board-qty { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 1080px) {
  .board-qty { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .board-qty { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Each tile ends where its own content ends. Stretched to match the tallest —
   FOR W.H, which carries two sub-blocks — the others showed a hundred pixels of
   blank under their last line, which reads as data that failed to load. */
.board-qty { align-items: start; }

/* ---- The drill-down: the lines behind one tile -------------------------- */
.drill { position: relative; margin-top: 12px; padding: 13px 14px 14px; background: var(--sf-1);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.drill::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fill-2); }
.drill.blue::before   { background: var(--blue); }
.drill.orange::before { background: #f59e0b; }
.drill.violet::before { background: var(--violet); }
.drill.green::before  { background: var(--green); }
.drill.amber::before  { background: var(--amber); }
.drill-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.drill-id { min-width: 220px; flex: 1 1 320px; }
.drill-t { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.drill-s { font-size: 12px; color: var(--muted); max-width: 78ch; margin-top: 2px; }
.drill-tot { text-align: right; }
.drill-tot b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.drill-tot b span { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 3px; }
/* The working, left to right, ending on the tile's own figure. */
.drill-calc { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 13px; }
.drill-calc .term { border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; background: var(--sf-2); }
.drill-calc .term i { display: block; font-style: normal; font-size: 9px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-weight: 800; }
.drill-calc .term b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* The answer term wears the panel's colour, so the strip lands on the figure
   the reader clicked rather than on a stray blue box. */
.drill-calc .term.is        { background: var(--sf-10);            border-color: var(--bd-4); }
.drill.blue   .term.is      { background: var(--blue-soft);   border-color: var(--tint-blue-11); }
.drill.orange .term.is      { background: var(--amber-soft);  border-color: var(--edge-amber-1); }
.drill.violet .term.is      { background: var(--violet-soft); border-color: var(--tint-violet-2); }
.drill.green  .term.is      { background: var(--green-soft);  border-color: var(--edge-green-2); }
.drill.amber  .term.is      { background: var(--amber-soft);  border-color: var(--edge-amber-1); }
.drill-calc .op { align-self: center; font-size: 15px; font-weight: 800; color: var(--muted); }
/* Hundreds of trucks scroll inside the panel, with the header pinned. */
.drill-rows { max-height: 460px; overflow: auto; }
.drill-rows table.data tr:first-child th { position: sticky; top: 0; z-index: 1; }
table.data tr.tot > td { background: var(--sf-7); border-top: 1px solid var(--bd-4); }
table.data tr.dim > td { color: var(--muted); }

.board-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.note { font-size: 11.5px; padding: 5px 11px; border-radius: 8px; border: 1px solid transparent; }
.note.green { background: var(--green-soft); color: var(--on-green-2); border-color: var(--edge-green-2); }
.note.amber { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--edge-amber-1); }
.note.red   { background: var(--red-soft);   color: var(--red-ink);   border-color: var(--edge-red-2); }
.board-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 800; margin: 0 0 7px; }
table.data.compact th, table.data.compact td { padding: 6px 9px; font-size: 12px; }

.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 9px; }
.need { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--sf-2); }
.need .t { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }
.need .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.need .v span { font-size: 10px; font-weight: 700; color: var(--muted); margin-left: 3px; }

.tag { display:inline-block; font-size:8.5px; font-weight:800; letter-spacing:.07em; padding:2px 5px;
  border-radius:4px; background: var(--blue-soft); color: var(--blue-dark); margin-right:4px; vertical-align:1px; }
.rkcard.sel .rk-top { padding-right: 46px; }

/* ---- Rake details: identity strip, line bars, dispatch log ---- */
.idgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.idcell { border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; background: var(--sf-2); min-width: 0; }
.idcell .t { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }
.idcell .v { font-size: 13px; font-weight: 700; margin-top: 1px; overflow-wrap: anywhere; }
@media (max-width: 1200px) { .idgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .idgrid { grid-template-columns: repeat(2, 1fr); } }

.idnote {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px;
  border: 1px solid var(--tint-blue-11); background: var(--tint-blue-1); border-radius: 9px; font-size: 12px; color: var(--on-blue-3);
}
.idnote svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.qlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qlink {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--sf-1); font-size: 12.5px; font-weight: 700; color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.qlink:hover { text-decoration: none; border-color: var(--blue); color: var(--blue-dark);
  transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15, 23, 42, .08); }
.qlink svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Per stock-line "how much of it has gone" bar */
.linebar { height: 6px; border-radius: 4px; background: var(--sf-9); overflow: hidden; }
.linebar span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #16a34a); }

/* Dispatch log */
.dsum { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.dsum i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dsum i.p { background: #f59e0b; } .dsum i.w { background: var(--violet); }
.dsum b { color: var(--ink); }
.scroll-tbl { max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.scroll-tbl th { position: sticky; top: 0; z-index: 3; }
.scroll-tbl table.data td { border-bottom: 1px solid var(--bd-1); }

/* =====================================================================
   BY ROAD (warehouse & inventory) — in-row document panels.

   The module's rule is that the admin never has to open a second page to
   see a document or to move it along, so every list row can unfold into
   the whole document with its own action buttons. These styles are that
   panel, and are used by nothing outside app/Views/inv.
   ===================================================================== */

/* The ▸ that unfolds a row.
   Some real action buttons also unfold their own row — "📞 Delivery Call",
   "✔ Unloading Complete" — by carrying .xtog next to .btn. Those keep the
   button's own shape and colour: scoping the handle's 24px grey square to
   :not(.btn) is what stops their label going muted-on-green and their box
   collapsing to 24px. */
.xtog { cursor: pointer; transition: transform .16s ease, border-color .14s ease, color .14s ease; }
.xtog:not(.btn) {
  border: 1px solid var(--line); background: var(--sf-1); color: var(--muted);
  width: 24px; height: 24px; border-radius: 7px; line-height: 1;
  font-size: 12px; padding: 0;
}
.xtog:not(.btn):hover { border-color: var(--blue); color: var(--blue-dark); }
.xtog:not(.btn).open { transform: rotate(90deg); border-color: var(--blue); color: var(--blue-dark); background: var(--blue-soft); }
tr.xopen > td { background: var(--sf-2); }

/* The unfolded panel itself. */
tr.xrow > td { background: var(--sf-2); border-bottom: 2px solid var(--line); padding: 0; }
.xbox { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(340px, 2.1fr) minmax(230px, 1fr); gap: 0; }
/* DENSITY. This panel is read by somebody working a queue of fifty orders, not
   studying one, so every measurement in it is set for a dense sheet rather than
   a document: the whole thing has to be takeable in without scrolling past it
   to reach the next row. Padding, gaps and heading margins are all roughly
   two-thirds of what a page-level block would use. */
.xbox > * { padding: 10px 12px; border-right: 1px solid var(--line); min-width: 0; }
.xbox > *:last-child { border-right: 0; }
@media (max-width: 1100px) { .xbox { grid-template-columns: 1fr; } .xbox > * { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---- The open panel belongs to the window, not to the table's width ----
   An expanded row is a <td colspan> inside a table that scrolls sideways, so
   by default the panel scrolls with it: drag the list right to reach the
   Action column and the panel's first block — the order, the dealer, the
   party — slides out of the window, leaving unreadable slivers of address and
   phone stranded against the middle block. The row's cells SHOULD scroll,
   they are columns. The panel is not columns; it is one document about one
   order, and it should stay where it was opened.

   So it is pinned to the left edge of the scroller and sized to what is
   actually on screen. `.xpin` and `--xw` are set by inv.js, and only on a
   table that genuinely overflows — a list that already fits is untouched, and
   with no `--xw` the width declaration is invalid and falls back to auto. */
.table-wrap.xpin tr.xrow > td > .xbox {
  position: sticky; left: 0; width: var(--xw);
}

/* ---- Nothing in a panel column may leave it ----------------------------
   `.xbox > *` is `min-width: 0`, which lets these columns shrink past the
   width of what is in them. That is what keeps the grid honest, but it only
   works if the CONTENTS can shrink too, and two of them could not:

   · `.btn` is `inline-flex` with `white-space: nowrap`, so "📤 Upload Tally
     Bill" is a single 200px word as far as layout is concerned. It cannot
     wrap and it cannot shrink.
   · `input[type=file]` is the one control missing from the `width: 100%`
     rule near the top of this file, so it keeps the browser's own ~260px
     instead of filling its line.

   Put those two on one line in a ~360px column and the file box takes the
   left of it, the button rides up beside it, and the button's right half
   hangs outside the panel — which is exactly what it looks like: a button
   loose on the page instead of in its box. The `margin-top` each of those
   buttons carries says plainly they were meant to sit UNDER their input.

   So in a panel every control fills its column and every SUBMIT button is a
   block of its own. Only `button.btn` — a link that happens to be dressed as a
   button is not a step in the form and must stay where it was put: the dealer's
   `tel:` link sits on one line with their name inside the delivery-call form,
   and Full screen · Edit · Print challan share a line at the foot of the
   panel. */
.xbox input[type=file] { width: 100%; }
.xbox form button.btn { display: flex; width: 100%; justify-content: center; }

.xh {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 4px;
}
.xh + .xh, .xfacts + .xh, .xtab + .xh, .xtrack + .xh { margin-top: 9px; }

/* Label / value pairs — the document header, nothing hidden.

   EVERY BOX HERE NEEDS `min-width: 0`, and this is why. A grid item and a flex
   item both default to `min-width: auto`, which means "never narrower than my
   min-content". `.xbox > *` sets it to 0 so the three panel columns may shrink,
   but that only frees the TOP level: `.xfacts` is a nested grid, `.xf` a nested
   flex row, and each of those re-imposed the default on the level below. So a
   long value could not shrink, the row grew to fit it, and the row grew right
   out through the side of its column — a dealer's address ran across the middle
   column and printed on top of the delivery location; the timestamps in "What
   has happened" ran off the right-hand edge and were clipped.

   `flex-wrap` is the other half. `.l` is `flex: 0 0 42%` — it does not shrink,
   by design, so the labels line up. When the value cannot fit in the 58% left
   over it now drops to a line of its own instead of overflowing, which is what
   the log rows want anyway: a sentence, and its time underneath. */
/* `minmax(0, 1fr)`, not the implicit `auto` track. An `auto` track is floored
   by min-content and sized to max-content, so a long address made the track
   wider than the panel column and the whole row hung out of the side of it.
   `min-width: 0` on the ITEMS is not enough to stop that — the TRACK has to be
   told it may be narrower than what is in it. */
.xfacts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
.xf { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline;
      font-size: 12px; line-height: 1.4; min-width: 0; }
.xf > * { min-width: 0; }
.xf .l { color: var(--muted); flex: 0 0 42%; }
.xf .v { font-weight: 600; overflow-wrap: anywhere; }

/* ---- "What has happened" is a log, not a fact list -----------------------
   Ui::facts() is handed the entry as the LABEL and its timestamp as the value,
   which is the wrong shape for a 42% label column: every sentence wrapped, and
   with the value beside it each entry ran to two tall lines — 410px for six of
   them, the single biggest block in the panel and taller than either of the
   other two columns. Read as what it is, an entry is one sentence with its time
   under it in small muted type, and six of them fit in half the room. */
.xlog .xf { display: block; margin-bottom: 4px; line-height: 1.35; }
.xlog .xf .l { display: block; color: var(--ink-7); }
.xlog .xf .v { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.xf .v.mono { font-family: var(--mono); font-weight: 700; }

/* Line-item table inside the panel. */
table.xtab { border-collapse: collapse; width: 100%; font-size: 12px; }
table.xtab th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 3px 7px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.xtab td { padding: 4px 7px; border-bottom: 1px solid var(--bd-1); vertical-align: top; }
table.xtab tr:last-child td { border-bottom: 0; }
table.xtab .num, table.xtab th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.xtab tr.tot td { border-top: 1px solid var(--line); font-weight: 800; background: var(--sf-7); }

/* Where the document is in its life, and what comes next. */
.xtrack { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.xtrack .s {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--sf-7); color: var(--ink-7); white-space: nowrap;
}
.xtrack .s.done { background: var(--green-soft); color: var(--green-ink); }
.xtrack .s.now  { background: var(--blue); color: #fff; }
.xtrack .s.off  { background: var(--red-soft); color: var(--red-ink); }

/* The action column: real workflow buttons, fired without leaving the list. */
.xact { background: var(--sf-1); }
.xact form { margin: 0 0 8px; }
.xact .btn { width: 100%; justify-content: center; }
.xact input[type=text], .xact input[type=number], .xact input[type=date], .xact select, .xact textarea {
  width: 100%; margin-bottom: 5px;
}
.xact .note { font-size: 11.5px; color: var(--muted); margin: 0 0 8px; }
.xact .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.xact .actions .btn { width: auto; flex: 1 1 auto; }

/* Ageing, used on outstanding claims and stale documents. */
.age-warn { color: var(--amber-ink); font-weight: 700; }
.age-bad  { color: var(--red-ink); font-weight: 800; }

/* Module tab strip: the work waiting on each screen, as a badge. */
.tabs.inv-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.tabs.inv-tabs .tab-n {
  background: var(--sf-10); color: var(--ink-2); font-size: 10.5px; font-weight: 800;
  border-radius: 20px; padding: 0 7px; font-variant-numeric: tabular-nums;
}
.tabs.inv-tabs .tab-n.hot { background: var(--red); color: #fff; }
.tabs.inv-tabs a.active .tab-n { background: var(--blue); color: #fff; }

/* Small "do it from here" links under a stock line. */
.qact { display: flex; flex-wrap: wrap; gap: 6px; }
.qact a {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--line); color: var(--muted); background: var(--sf-1); white-space: nowrap;
}
.qact a:hover { text-decoration: none; border-color: var(--blue); color: var(--blue-dark); background: var(--blue-soft); }

/* A one-line explanation under a screen heading. */
.screen-note { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; max-width: 90ch; }

@media print {
  .xtog, .xact, .no-print { display: none !important; }
  tr.xrow > td { background: #fff; }
}

/* ---------------------------------------------------------------------
   By Road dashboard — the toolbar, the waiting queues and the godown
   bars. Everything else on that page reuses the rake dashboard's own
   components (.dash-kpi, .card.attn, .chips, .sec, .flow .step) so the
   two halves of the system read as one.
   --------------------------------------------------------------------- */

/* Toolbar: scope the page on the left, start a document on the right. */
/* The scope bar: one line of filters, one line of actions. Labels sit BESIDE
   their control rather than above it — four stacked two-line fields plus a
   caption over the buttons was most of this bar's height and none of its
   meaning. */
.rd-bar { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.rd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: 1 1 260px; }
.rd-f { display: flex; align-items: center; gap: 6px; }
.rd-f > i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rd-f select { min-width: 128px; }
.rd-new { justify-content: flex-end; }
.rd-new.qact a { padding: 5px 10px; font-size: 11.5px; }

/* ‹ month › as one control. The chevrons used to be loose buttons at the far
   end of the bar, past four other filters and next to "Clear" — nowhere near
   the month they step. */
.mstep { display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--sf-1); }
.mstep select { border: 0; border-radius: 0; min-width: 132px; background: transparent; }
.mstep select:focus-visible { outline-offset: -2px; }
.mstep > a {
  display: inline-flex; align-items: center; padding: 0 10px; font-size: 15px; line-height: 1;
  color: var(--muted); text-decoration: none; background: var(--sf-2);
}
.mstep > a:hover { background: var(--blue); color: #fff; text-decoration: none; }
.mstep > a:first-child { border-right: 1px solid var(--line); }
.mstep > a:last-child  { border-left: 1px solid var(--line); }

/* What the page is narrowed to — one removable chip per filter, so backing off
   one no longer means re-choosing the other three. */
.rd-active { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ra-t { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ra-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 9px;
  border: 1px solid var(--edge-blue-3); border-radius: 999px;
  background: var(--tint-blue-4); color: var(--on-blue-6);
  font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.ra-chip i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; opacity: .7; }
.ra-chip span { font-size: 10px; opacity: .65; }
.ra-chip:hover { background: var(--red-soft); border-color: var(--edge-red-2); color: var(--red-ink); text-decoration: none; }
.ra-chip:hover span { opacity: 1; }
.ra-clear { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-left: 4px; }

/* One queue of documents waiting on somebody. */
.rd-queue { border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; background: var(--sf-1); position: relative; overflow: hidden; }
.rd-queue::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fill-2); }
.rd-queue.alert::before   { background: var(--red); }
.rd-queue.pending::before { background: #f59e0b; }
.rd-queue.active::before  { background: var(--blue); }
.rd-queue.neutral::before { background: var(--violet); }
.rd-queue-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }

.rd-item {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr auto; gap: 4px 10px;
  align-items: baseline; padding: 5px 0; border-top: 1px solid var(--bd-1);
  font-size: 12px; color: var(--ink);
}
.rd-item:hover { text-decoration: none; background: var(--sf-2); }
.rd-item .mono { font-family: var(--mono); font-weight: 700; color: var(--blue-dark); white-space: nowrap; }
.rd-item .d { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-item .w { color: var(--ink-7); font-size: 11px; white-space: nowrap; }
.rd-all { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 700; }

/* Stock by godown group — a bar you can click into. */
.rd-group {
  display: block; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px; background: var(--sf-1); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.rd-group:hover { text-decoration: none; border-color: var(--blue); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07); }
.rd-group .pbar { margin: 6px 0 5px; }
.rd-group-n { font-weight: 800; font-variant-numeric: tabular-nums; }

/* The searchable picker replaces its select with a text box that is width:100%
   of its wrapper, and a flex item with no width has none to be 100% of. */
.rd-f .ss { flex: 0 0 auto; width: 150px; }

@media (max-width: 1100px) {
  .rd-bar { flex-direction: column; align-items: stretch; }
  .rd-new.qact { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   By Road headline tiles.

   The shared kpi_card() folds everything after the big number into one
   grey subtitle. These tiles keep the headline on top and list the
   supporting figures as aligned rows underneath, so four tiles can each
   carry four facts and still line up with one another.
   --------------------------------------------------------------------- */
.rd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }

.rd-kpi {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px 13px; color: var(--ink); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.rd-kpi:hover { text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, .10); border-color: var(--bd-4); }
.rd-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--fill-2); }
.rd-kpi { background-image: linear-gradient(180deg, rgba(37, 99, 235, .05), rgba(255, 255, 255, 0) 70px); }
.rd-kpi.green::before  { background: var(--green); }
.rd-kpi.blue::before   { background: var(--blue); }
.rd-kpi.violet::before, .rd-kpi.purple::before { background: var(--violet); }
.rd-kpi.orange::before { background: #f59e0b; }
.rd-kpi.red::before    { background: var(--red); }
.rd-kpi.slate::before  { background: var(--fill-3); }
.rd-kpi.green  { background-image: linear-gradient(180deg, rgba(22, 163, 74, .07), rgba(255, 255, 255, 0) 70px); }
.rd-kpi.violet, .rd-kpi.purple { background-image: linear-gradient(180deg, rgba(124, 58, 237, .07), rgba(255, 255, 255, 0) 70px); }
.rd-kpi.orange { background-image: linear-gradient(180deg, rgba(245, 158, 11, .10), rgba(255, 255, 255, 0) 70px); }
.rd-kpi.red    { background-image: linear-gradient(180deg, rgba(220, 38, 38, .07), rgba(255, 255, 255, 0) 70px); }

.rd-kpi-top { display: flex; align-items: center; gap: 9px; position: relative; }
.rd-kpi-top .k-ico { width: 32px; height: 32px; flex: 0 0 32px; }
.rd-kpi-top .k-ico svg { width: 16px; height: 16px; }
.rd-kpi-l { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rd-kpi-go { margin-left: auto; color: #cbd5e1; font-size: 15px; font-weight: 700; transition: color .16s, transform .16s; }
a.rd-kpi:hover .rd-kpi-go { color: var(--link); transform: translateX(2px); }

.rd-kpi-v {
  font-size: 27px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em;
  margin-top: 9px; font-variant-numeric: tabular-nums; word-break: break-word;
}
.rd-kpi-v .u { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.rd-kpi-s { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.rd-kpi-s b { color: var(--ink); }

.rd-kpi-rows { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 4px; }
.rd-kpi-r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted);
}
.rd-kpi-r b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-kpi-r.good b { color: var(--green-ink); }
.rd-kpi-r.warn b { color: var(--amber-ink); }
.rd-kpi-r.bad  b { color: var(--red-ink); }
.rd-kpi-f { margin-top: 9px; font-size: 11px; color: var(--muted); }

/* One position, split into its parts, as a single bar plus a legend. */
.rd-share { display: flex; height: 12px; border-radius: 7px; overflow: hidden; background: var(--sf-7); margin: 4px 0 8px; }
.rd-share span { display: block; height: 100%; }
.rd-share span:hover { filter: brightness(1.12); }
.rd-share-l { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.rd-share-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rd-share-i i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.rd-share-i b { color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) { .rd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .rd-kpis { grid-template-columns: 1fr; } }

/* The two actions a warehouse starts most often lead the toolbar. */
.rd-new .qact a.lead { font-weight: 800; }
.rd-new .qact a.lead.in  { border-color: var(--tint-blue-11); background: var(--blue-soft); color: var(--blue-dark); }
.rd-new .qact a.lead.in:hover  { background: var(--blue); color: #fff; border-color: var(--blue); }
.rd-new .qact a.lead.out { border-color: var(--edge-green-1); background: var(--green-soft); color: var(--green-ink); }
.rd-new .qact a.lead.out:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ---- Collapsible panel on the rake board: closed until asked for ---------
   A <details> so it needs no JavaScript and is shut on every page load.
   The sign is drawn from borders, so it never depends on a font having the
   glyph and it flips to a minus when the panel opens. */
.xpanel { margin-top: 10px; border: 1px solid var(--edge-green-2); border-radius: 10px; background: var(--green-soft); }
.xpanel > summary {
  list-style: none; cursor: pointer; padding: 8px 12px; font-size: 11.5px;
  color: var(--on-green-2); display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.xpanel > summary::-webkit-details-marker { display: none; }
.xpanel > summary:hover { background: var(--sf-8); border-radius: 9px; }
.xpanel > summary .muted { color: var(--ink-3); font-weight: 400; }
.xpanel .xsign {
  position: relative; flex: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--edge-green-6); background: var(--sf-1);
}
.xpanel .xsign::before, .xpanel .xsign::after {
  content: ""; position: absolute; background: #166534; border-radius: 1px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.xpanel .xsign::before { width: 8px; height: 2px; }
.xpanel .xsign::after  { width: 2px; height: 8px; }
.xpanel[open] .xsign::after { display: none; }          /* + becomes − when open */
.xpanel[open] > summary { border-bottom: 1px solid var(--edge-green-2); border-radius: 9px 9px 0 0; }
.xpanel-body { padding: 12px; background: var(--sf-1); border-radius: 0 0 9px 9px; }
@media print { .xpanel[open] > summary .muted { display: none; } }

/* The same panel in the board's own neutral colours — used for the truck
   movement half of the rake board, which is routine detail and should not
   read as an exception the way the green surplus panel does. */
.xpanel.plain { border-color: var(--line); background: var(--sf-2); }
.xpanel.plain > summary { color: var(--ink); }
.xpanel.plain > summary:hover { background: var(--sf-7); }
.xpanel.plain > summary .muted { color: var(--muted); }
.xpanel.plain .xsign { border-color: var(--bd-5); }
.xpanel.plain .xsign::before, .xpanel.plain .xsign::after { background: var(--ink); }
.xpanel.plain[open] > summary { border-bottom-color: var(--line); }
.xpanel.plain .xpanel-body > .lift-bar:first-child { margin-top: 2px; }

/* ---- The locked surplus strip ------------------------------------------
   Says a surplus exists and nothing else — no quantity, no bags — until the
   `surplus_password` is typed. Drawn as a shut padlock so it reads as locked
   at a glance rather than as an error. */
.lockbox {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--bd-4);
  border-radius: 10px; background: var(--sf-2);
}
.lockbox .lk-ico {
  position: relative; flex: none; width: 20px; height: 20px;
  border-radius: 5px; background: #64748b; align-self: flex-start; margin-top: 2px;
}
.lockbox .lk-ico::before {                        /* the shackle */
  content: ""; position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  width: 12px; height: 11px; border: 2px solid #64748b; border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.lockbox .lk-ico::after {                         /* the keyhole */
  content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 3px; height: 7px; border-radius: 2px; background: var(--sf-2);
}
.lockbox .lk-txt { flex: 1 1 240px; font-size: 12.5px; line-height: 1.45; }
.lockbox .lk-form { display: flex; align-items: center; gap: 8px; }
.lockbox .lk-form input {
  width: 150px; padding: 6px 9px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--sf-1);
}
.lk-relock { margin: 6px 0 0 2px; }
.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 11.5px; text-decoration: underline;
}
.linkbtn:hover { color: var(--ink); }
@media print { .lockbox, .lk-relock { display: none; } }

/* ---------------------------------------------------------------------
   Sidebar groups.

   Two pinned dashboards, then one collapsible group per area of work.
   Only the group you are working in is open, which keeps the menu short
   however many screens the app grows into.
   --------------------------------------------------------------------- */
.navg { margin: 2px 0; }
.navg-h {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: #cbd5e1; padding: 9px 10px; border-radius: 8px;
  font: 600 12.5px/1.2 var(--font); letter-spacing: .01em;
}
.navg-h:hover { background: var(--navy-2); color: #fff; }
.navg-h svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .75; }
.navg-h span { flex: 1; }
.navg-c {
  font-style: normal; font-size: 15px; line-height: 1; color: var(--ink-6);
  transition: transform .18s ease; flex: 0 0 auto;
}
.navg.open > .navg-h { color: #fff; }
.navg.open > .navg-h svg { opacity: 1; }
.navg.open .navg-c { transform: rotate(90deg); color: var(--ink-7); }

/* The children. Hidden when the group is shut — no height animation, so a
   long group never scrolls the sidebar while it is opening. */
.navg-b { display: none; margin: 2px 0 6px; padding-left: 10px; border-left: 1px solid var(--navy-line); }
.navg.open > .navg-b { display: block; }
.navg-b a { font-size: 13px; padding: 7px 10px; }
.navg-b a svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* A shut group still says it holds the page you are on. */
.navg:not(.open) > .navg-h.has-active { color: #fff; background: var(--navy-2); }
.navg:not(.open) > .navg-h.has-active::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: 0 0 6px;
}

/* ---------------------------------------------------------------------
   Numbered steps inside a group.

   Rake Management opens with the three screens of a rake in the order they
   are worked — the board, the rake, the allocation. The number replaces the
   icon rather than sitting beside it: a run of 1 · 2 · 3 down the rail is
   what says these screens FOLLOW one another, and an icon next to each one
   would only compete with the digit that carries that meaning.

   The hue is the group's own --g (theme.css sets it per group), so the run
   is coloured with the group it belongs to and not with a second palette.
   --------------------------------------------------------------------- */
.navg-b a.navg-step { font-weight: 600; }
/* 20px and FIXED, not sized to its contents: step 10 is two digits, and a chip
   that grew for it would shunt one label 5px right of the other nine. Tabular
   figures so 1 and 10 sit on the same centre line. */
.navg-n {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 10px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums;
  color: var(--g, var(--ink-7));
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--gs, var(--navy-line));
}
.navg-b a.navg-step:hover .navg-n { color: #fff; border-color: currentColor; }
/* On the step you are standing on the chip inverts: the row is already the
   group's colour, so the number has to come off it, not join it. */
.navg-b a.navg-step.active .navg-n { background: #fff; color: var(--g2, var(--blue)); border-color: #fff; }

/* No thread is drawn between the chips: .navg-b already carries a coloured
   left border down the whole group (theme.css), and a second vertical line
   9px to the right of it reads as a mistake rather than as a sequence.

   No divider inside the group either. Rake Management is the ten steps and
   nothing else — the records that used to sit under a divider in it are their
   own groups now — so there is nothing left in there to divide FROM. */

/* Said to a screen reader, shown to nobody. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =====================================================================
   GODOWN MONTH REGISTER (By Road → Godown Overview)
   The client's workbook, on screen: a card per company on the contents
   page, and one wide grid per company-month with the summary lines
   locked to the same columns as the dispatch lines under them.
   ===================================================================== */

/* ---- contents page: one card per company ---- */
.reg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-bottom: 14px; }
.reg-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.reg-card:hover { text-decoration: none; border-color: var(--bd-4); box-shadow: 0 6px 18px rgba(15,23,42,.08); transform: translateY(-1px); }
.reg-card.closed { border-left: 3px solid var(--green); }
.reg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.reg-name { font-weight: 800; font-size: 15px; line-height: 1.2; }

.reg-flow { display: flex; align-items: stretch; gap: 4px; }
.reg-step { flex: 1; min-width: 0; background: var(--sf-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.reg-step .l { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.reg-step b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.reg-step.in    { background: var(--green-soft);  border-color: var(--edge-green-1); }
.reg-step.out   { background: var(--red-soft);    border-color: var(--tint-red-5); }
.reg-step.close { background: var(--violet-soft); border-color: var(--tint-violet-2); }
.reg-op { align-self: center; font-weight: 800; color: var(--muted); font-size: 12px; }

.reg-bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--sf-7); margin: 10px 0 8px; }
.reg-bar .b-close { background: var(--violet); }
.reg-bar .b-out   { background: var(--red); opacity: .75; }

.reg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.reg-go { margin-left: auto; font-weight: 700; color: var(--link); }

/* ---- the register grid ---- */
.reg-grid th { vertical-align: bottom; }
.reg-grid th.reg-dmg { background: var(--red-soft); color: var(--on-red-2); }
.reg-mrp  { font-size: 10px; font-weight: 800; color: var(--blue-dark); letter-spacing: 0; }
.reg-cond { font-size: 9px; font-weight: 800; color: var(--on-red-2); letter-spacing: .04em; }

/* A summary line is a statement about the whole column, so it is ruled off
   from the truck lines rather than just shaded a different colour. */
.reg-grid tr.reg-sum > td { background: var(--sf-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.reg-grid tr.reg-sum:hover > td { background: var(--sf-7); }
.reg-grid tr.reg-sum .reg-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-1); }
.reg-grid tr.reg-sum.in > td     { background: var(--green-soft); }
.reg-grid tr.reg-sum.out > td    { background: var(--red-soft); }
.reg-grid tr.reg-sum.total > td  { background: var(--blue-soft); border-bottom: 2px solid var(--blue); }
.reg-grid tr.reg-sum.close > td  { background: var(--violet-soft); border-top: 2px solid var(--violet); }
.reg-grid tr.reg-sum.bags > td   { background: var(--sf-2); color: var(--muted); font-weight: 600; }
.reg-grid tr.reg-sum .tag { margin-left: 6px; }

@media print {
  .reg-card { break-inside: avoid; }
  .reg-grid { font-size: 10px; }
}

/* =====================================================================
   BY ROAD DASHBOARD — the company band and the drill-down
   ===================================================================== */

/* ---- company + handler cards ---- */
/* ---- Companies & Handlers: one LINE per company ----
   The workbook keeps a tab per company and reads it left to right — opening,
   received, dispatched, closing. As cards each of those four figures carried
   its own labelled box and the labels repeated on every company; as lines the
   heading says them once and twenty companies read down one column. The whole
   line is the link, which is what the card was for. */
/* ---- Company list: find one, order them ---- */
.co-tools { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.co-tools input[type="search"] { max-width: 300px; flex: 1 1 200px; }
.co-none { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* A heading you can sort by says so before it is clicked, not after. */
.co-rh .sortable { cursor: pointer; user-select: none; position: relative; }
.co-rh .sortable:hover { color: var(--ink); }
.co-rh .sortable::after { content: "↕"; opacity: .35; margin-left: 4px; font-size: 9px; }
.co-rh .sortable.on { color: var(--blue-dark); }
.co-rh .sortable.on::after { content: "↑"; opacity: 1; }
.co-rh .sortable.on.desc::after { content: "↓"; }

.co-rows { margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.co-rh, .co-row {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns:
    minmax(84px, 1fr)      /* handler   */
    minmax(140px, 1.7fr)   /* company   */
    minmax(96px, 1.1fr)    /* products  */
    repeat(5, minmax(66px, .72fr))  /* opening · received · booked · dispatched · closing */
    minmax(136px, 1.2fr);  /* action    */
  padding: 8px 12px;
}
/* Closing is right-aligned and Action is the next column along, so without a
   wider gutter the two headings read as one phrase. */
.co-rh > :last-child, .co-row > :last-child { padding-left: 8px; }
.co-rh { background: var(--sf-2); border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.co-rh .num { text-align: right; }
.co-row { border-top: 1px solid var(--line); color: inherit; background: var(--sf-1); }
.co-rh + .co-row { border-top: 0; }
/* The whole line opens the company, so the whole line has to look like it will. */
.co-row[data-href] { cursor: pointer; }
.co-row:hover { background: var(--sf-2); }
/* The chosen company keeps a left bar rather than a fill, so its figures stay
   as readable as every other line's. */
.co-row.on { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }

/* Handler and company are each their own column AND each the way in: the row is
   no longer one big anchor, because a row that is all link cannot also hold the
   action link at its end. */
.cr-hand, .cr-name { min-width: 0; color: inherit; text-decoration: none; }
a.cr-hand:hover, a.cr-name:hover { text-decoration: none; color: var(--blue-dark); }
.cr-hand { font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.cr-name b { font-size: 13px; font-weight: 800; }
.cr-name i { font-style: normal; font-size: 10.5px; color: var(--muted); flex: 1 1 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-prod { min-width: 0; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-prod b { font-weight: 800; color: var(--muted); margin-left: 3px; }
.co-row .num { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.co-row .num.in  { color: var(--green-ink); }
.co-row .num.bk  { color: var(--on-orange-5); }
.co-row .num.out { color: var(--red-ink); }
.co-row .num.cl  { color: var(--violet-ink); }

/* The bag reading under the MT one — the client's Sound Stock Summary prints
   both, and a shed is worked in bags. Quiet and grey: MT stays the headline,
   bags are the second glance. */
.cr-bag { display: block; font-style: normal; font-size: 10.5px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.35; }
.cr-bag:empty { display: none; }

/* The action: a shed below zero shouts, everything else is the quiet way into
   the godown-wise view. */
.cr-act { min-width: 0; text-align: right; }
.cr-alert { display: inline-block; font-size: 10.5px; font-weight: 800; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: var(--red-soft); color: var(--on-red-2); }
.cr-alert:hover { background: var(--red); color: #fff; text-decoration: none; }
.cr-alert.warn { background: var(--amber-soft); color: var(--amber-ink); }
.cr-alert.warn:hover { background: var(--amber); color: #fff; }
.cr-ok { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cr-ok:hover { color: var(--blue-dark); text-decoration: none; }

/* The totals are the last line, under the columns they add up. */
.co-row.tot { background: var(--sf-7); border-top: 1px solid var(--bd-4); }
/* Below this the nine columns stop being nine columns, so the row scrolls
   sideways with its heading rather than reflowing into something that no longer
   lines up with it. */
@media (max-width: 1200px) {
  .co-rows { overflow-x: auto; }
  .co-rh, .co-row { min-width: 960px; }
}
/* Narrow enough that side-scrolling a nine-column row is worse than stacking:
   the heading goes and every figure names itself again from its data-l. */
@media (max-width: 760px) {
  .co-rows { overflow-x: visible; }
  .co-rh { display: none; }
  .co-row { grid-template-columns: 1fr 1fr; row-gap: 4px; min-width: 0; }
  .co-row .cr-hand, .co-row .cr-name, .co-row .cr-prod, .co-row .cr-act { grid-column: 1 / -1; }
  .co-row .cr-act { text-align: left; }
  .co-row .num { text-align: left; }
  .co-row .num::before { content: attr(data-l); display: block; font-size: 9px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
}

/* ---- the drill-down ---- */
.drill { margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.drill details { border-top: 1px solid var(--line); }
.drill > details:first-child { border-top: 0; }

.drill summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 9px 12px; user-select: none;
}
.drill summary::-webkit-details-marker { display: none; }
/* The twisty is drawn rather than relying on the browser's marker, so every
   level lines up and the arrow turns with the row it belongs to. */
.drill summary::before {
  content: "▸"; flex: 0 0 12px; font-size: 11px; color: var(--muted);
  transition: transform .15s ease;
}
.drill details[open] > summary::before { transform: rotate(90deg); }
.drill summary:hover { background: var(--sf-2); }

.dl-nm   { flex: 1; min-width: 0; font-weight: 700; }
.dl-sub  { font-weight: 500; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.dl-mrp  { font-weight: 800; font-size: 10.5px; color: var(--blue-dark); margin-left: 5px; }
.dl-meta { flex: 0 0 auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.dl-q    { flex: 0 0 116px; text-align: right; font-variant-numeric: tabular-nums; }
.dl-q .u { font-size: 10px; color: var(--muted); font-weight: 700; }

/* Each level steps in and takes a quieter background, so depth is visible
   without needing to count the indents. */
.drill .dl-1 > summary { background: var(--sf-7); font-size: 14px; }
.drill .dl-1[open] > summary { border-bottom: 1px solid var(--line); }
.drill .dl-2 > summary { padding-left: 30px; background: var(--sf-2); }
.drill .dl-3 > summary { padding-left: 50px; }
.drill .dl-4 > summary { padding-left: 70px; }
.drill .dl-4 > summary .dl-nm { font-weight: 600; }
.drill .dl-2, .drill .dl-3, .drill .dl-4 { border-top: 1px solid var(--bd-1); }

.dl-trips { margin: 0 12px 10px 70px; width: auto; }
.dl-trips th { background: transparent; border-bottom: 1px solid var(--line); }

@media (max-width: 700px) {
  .dl-meta { display: none; }
  .drill .dl-2 > summary { padding-left: 22px; }
  .drill .dl-3 > summary { padding-left: 34px; }
  .drill .dl-4 > summary { padding-left: 46px; }
  .dl-trips { margin-left: 12px; }
}
@media print {
  .drill details { break-inside: avoid; }
  .drill summary::before { content: ""; }
}

/* =====================================================================
   DENSE PANELS — the lower half of the By Road dashboard
   Same facts, about a third of the height: tables instead of repeated
   blocks, label/value lines instead of tiles that mostly read 0.00.
   ===================================================================== */

/* A column of cards inside a .split grid cell. */
.stack > .card + .card { margin-top: 14px; }

/* A table that is read at a glance rather than studied. */
table.data.tight th { padding: 6px 9px; font-size: 10px; }
table.data.tight td { padding: 6px 9px; line-height: 1.35; }
table.data.tight td > div { line-height: 1.2; }

/* Share bar living inside its own table row. */
.minibar { position: relative; height: 15px; border-radius: 4px; background: var(--sf-7); overflow: hidden; }
.minibar > span { position: absolute; inset: 0 auto 0 0; background: var(--blue); opacity: .8; }
.minibar > i {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 5px; font-style: normal; font-size: 10px; font-weight: 800; color: var(--on-blue-2);
  font-variant-numeric: tabular-nums;
}

/* Three facts about three firms, on one line instead of in three cards. */
.factline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
}
.fl-t { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fl-i {
  display: flex; align-items: baseline; gap: 7px; text-decoration: none; color: inherit;
  background: var(--sf-2); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px;
}
.fl-i:hover { text-decoration: none; border-color: var(--blue); background: var(--blue-soft); }
.fl-i b { font-size: 12.5px; }
.fl-i span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* "Worth a second look": three tables under one heading, each with its
   explanation on the rule above it rather than in a paragraph of its own. */
.lookat .la-h {
  margin: 14px 0 6px; padding: 6px 10px; border-radius: 7px;
  background: var(--sf-2); border-left: 3px solid var(--line);
  font-size: 11.5px; font-weight: 600; color: var(--ink-1);
}
.lookat .la-h:first-of-type { margin-top: 10px; }
.lookat .la-h.bad { background: var(--red-soft); border-left-color: var(--red); color: var(--on-red-2); }
.lookat .la-h .muted { font-weight: 500; }

/* Right rail: a label and its figure on one line. */
.raillist { border-top: 1px solid var(--line); }
.rr {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--bd-1); font-size: 12.5px;
}
.rr:last-child { border-bottom: 0; }
.rr > span:first-child, .rr > a { color: var(--muted); }
.rr > a { text-decoration: none; }
.rr > a:hover { color: var(--link); text-decoration: underline; }
.rr-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-v.good b { color: var(--green-ink); }
.rr-v.warn b { color: var(--amber-ink); }
.rr-v.bad  b { color: var(--red-ink); }
.rr-v.zero b { color: var(--muted); font-weight: 600; }

/* ---- Company Allocation: the client's COMPANY ALLOCATION sheet ---------
   Three rows where the sheet had two, so "allocated" and "still to allocate"
   are separate figures instead of sharing one ambiguous cell. The dumping
   plan's total row repeats the allocated figures, which makes the two blocks
   visibly reconcile. */
table.data.alloc th .pc { margin-right: 5px; }
table.data.alloc tr.a-before td { background: var(--sf-2); }
table.data.alloc tr.a-alloc  td { background: var(--sf-5); }
table.data.alloc tr.a-after  td { background: var(--sf-2); }
table.data.alloc tr.a-after  td:first-child,
table.data.alloc tr.a-before td:first-child,
table.data.alloc tr.a-alloc  td:first-child { background: var(--sf-1); }
table.data.alloc tr.a-total td { background: var(--sf-2); border-top: 2px solid var(--line); }
table.data.alloc td.nilcell { color: var(--muted); opacity: .5; }
table.data.alloc .num b { font-variant-numeric: tabular-nums; }

/* The allocation tree that used to live here — #dumpTree's district, dealer and
   Edit rows — is gone. Company Allocation shows the plan as a district you pick
   and a box per dealer, and every rule those boxes need is on the page itself. */
.ebox table.data.compact th { background: var(--sf-7); }
.btn.ebtn-on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---- Picker trees on Single Party Order Entry ------------------------
   District > Dealer > Party, and Company > Product > MRP batch. They are
   pickers over the real fields, so they only ever set a value and fire a
   change; the form itself is unchanged. */
.ptree { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: var(--sf-1); margin-bottom: 14px; }
.ptree .tbody { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--sf-1); }
.ptree .tnode.lvl1 > .thead { background: var(--tint-blue-1); border-top: 1px solid var(--tint-blue-5); font-size: 12.5px; }
.ptree .tnode.lvl2 > .thead { background: var(--sf-2); padding-left: 22px; font-size: 12px; }
.ptree .thead { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; }
.ptree .thead:hover { background: var(--tint-blue-2); }
.ptree .tarrow { display: inline-block; width: 12px; color: var(--link); font-size: 10px; }
.ptree .tleaf { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 44px; font-size: 12px;
  cursor: pointer; border-top: 1px solid var(--bd-1); }
.ptree .tleaf:hover { background: var(--blue-soft); }
.ptree .thead .muted, .ptree .tleaf .muted { margin-left: auto; padding-left: 10px; }
.ptree .tsel { margin-top: 8px; font-size: 12px; color: var(--muted); }
.ptree .tsel.on { color: var(--ink); background: var(--green-soft); border: 1px solid var(--edge-green-2);
  border-radius: 8px; padding: 6px 10px; }

/* District heading in the Dealers master tree. */
#dealerTable tr.xrow > td { background: var(--tint-blue-2); border-top: 2px solid var(--tint-blue-9); padding: 7px 10px; }
#dealerTable tr.xrow:hover > td { background: var(--tint-blue-4); }

/* ---- Single Party Order Entry: work on the left, sticky summary right ---- */
.oform { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 16px; align-items: start; }
.omain { min-width: 0; }
.ostep { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--sf-1); }
.ohead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ohead > div > b { font-size: 14.5px; }
.onum { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff;
  font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }

/* ---- The order form as steps ----------------------------------------
   One step open, the rest folded to the line that says what was chosen in
   them. A folded step is HIDDEN, never disabled — its fields still post,
   which is what lets the whole thing stay one plain <form>. */
.ostep { transition: border-color .12s ease; scroll-margin-top: 78px; }   /* clears the sticky topbar */
.ostep > .ohead {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; text-align: left; cursor: pointer;
}
.ostep > .ohead .oh-t { flex: 1 1 auto; min-width: 0; }
.ostep > .ohead b { font-size: 14.5px; }
.ostep > .obody { margin-top: 10px; }

/* Open: the hint is the instruction, and there is no summary to show. */
.ostep.is-open { border-color: var(--edge-blue-3); box-shadow: 0 2px 12px rgba(37, 99, 235, .07); }
.ostep.is-open > .ohead { cursor: default; }
.ostep.is-open > .ohead .oh-go { display: none; }

/* Folded: the hint gives way to the answer, and the header offers the way back.

   And it is ONE line — the question and its answer side by side. The answer
   used to sit on a second line under the title, which cost a two-line header
   for every step that is not being worked on. Three of the four always are
   not, so the folded steps were spending most of their height restating a
   layout rather than an answer. They wrap back to two lines if the answer is
   long enough to need it. */
.ostep:not(.is-open) > .obody { display: none; }
.ostep:not(.is-open) { padding: 8px 14px; background: var(--sf-2); }
.ostep:not(.is-open) > .ohead .oh-hint { display: none; }
.ostep:not(.is-open) > .ohead .oh-t {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
}
.oh-sum { font-size: 13px; margin-top: 2px; }
.ostep:not(.is-open) > .ohead .oh-sum { margin-top: 0; }
.ostep.is-open .oh-sum { display: none; }
.oh-go {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--link);
  border: 1px solid var(--edge-blue-3); border-radius: 999px; padding: 3px 11px; margin-top: 1px;
}
.ostep > .ohead:hover .oh-go { background: var(--tint-blue-4); }

/* Done: a tick replaces the number, because the number is only useful while
   the step is still a thing to do. */
.ostep.is-done > .ohead .onum { background: var(--green); font-size: 0; }
.ostep.is-done > .ohead .onum::after { content: "✓"; font-size: 13px; }

/* Not reachable yet: greyed, and the header does not pretend to be a button. */
.ostep.is-locked { opacity: .58; }
.ostep.is-locked > .ohead { cursor: not-allowed; }
.ostep.is-locked > .ohead .onum { background: var(--fill-2); color: var(--muted); }
.ostep.is-locked > .ohead .oh-go { display: none; }

/* The way on to the next step. */
.ostep-go { display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--line); }

/* The three boxes that narrow the batch list: each under its own label,
   on a grid that wraps a whole field at a time rather than splitting a
   label from the control it names. */
.opick { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: 10px 12px; margin-bottom: 8px; }
.opick > div { min-width: 0; }
.opick select, .opick input { width: 100%; max-width: none; }
@media (max-width: 860px) { .opick { grid-template-columns: 1fr; } }

.orail { position: sticky; top: 14px; }
.ocard { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--sf-1);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05); }
.osum { border-top: 1px dashed var(--line); padding-top: 8px; }
.osum .orow { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--bd-1); }
.osum .orow:last-child { border-bottom: 0; }
.osum .orow span { flex: 1 1 auto; }
.osum .orow b { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.osum .orow i { font-style: normal; font-size: 10px; }
.osum .orow.big { padding: 8px 0; border-bottom: 1px solid var(--line); }
.osum .orow.big b { font-size: 21px; color: var(--blue-dark); }

/* The rail stands beside the form only while there is room for BOTH it and the
   item grid. The grid is nine columns wide on a party split and needs about
   830px; below roughly 1460px of viewport the rail was taking that width away
   and the last column — Truck, and the row's own ✕ — sat permanently off the
   right-hand edge. On a 1366×768 laptop, which is what most of these screens
   are, it was over by 85px. Under the threshold the rail drops beneath the
   form instead, where it costs a scroll rather than a column. */
@media (max-width: 1460px) {
  .oform { grid-template-columns: 1fr; }
  .orail { position: static; }

  /* …but "beneath the form" must not mean "at the bottom of a long scroll",
     which is where the total and the Submit button were on every laptop —
     the one thing the rail was built to prevent. Under the threshold a NEW
     order's rail becomes a bar pinned to the foot of the screen: the same
     figures and the same button, spending a strip of height instead of a
     column of width. Edit and share-out keep the old block (.orail-bar is
     only put on a fresh entry) because their rails carry decisions, not
     just totals. */
  .orail-bar { position: sticky; bottom: 0; z-index: 30; }
  .orail-bar .ocard {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    border-radius: 12px 12px 0 0; border-bottom: 0;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .22);
  }
  /* "5 · Review & submit" is the heading of a panel. A bar is not a panel, and
     the figures on it say what it is. */
  .orail-bar .ocard > .ohead { display: none; }
  /* Explicit order, because the bar wraps and the DOM order does not suit a
     strip: the button follows the figures, and the red reason the button is
     dead is LAST so that it — and only it — takes the second line when there
     is one. Left to source order the static note fell below the warning and
     the bar stood three rows tall on a 768px screen. */
  .orail-bar .osum {
    order: 1; flex: 1 1 340px; display: flex; flex-wrap: wrap; align-items: center;
    gap: 2px 18px; border-top: 0; padding-top: 0;
  }
  .orail-bar .osum .orow { border-bottom: 0; padding: 0; flex: 0 0 auto; }
  .orail-bar .osum .orow span { flex: 0 0 auto; }
  .orail-bar .osum .orow.big { padding: 0; border-bottom: 0; }
  .orail-bar .osum .orow.big b { font-size: 19px; }
  /* The button keeps its own width here; the inline styles that make it fill
     the rail are what have to be beaten. */
  .orail-bar #submitBtn { order: 3; width: auto !important; margin-top: 0 !important; flex: 0 0 auto; }
  /* What happens after Submit — kept, but at the size of an aside. */
  .orail-bar .ocard > .muted { order: 2; flex: 1 1 170px; margin-top: 0 !important; font-size: 10.5px; line-height: 1.35; }
  /* Why the button is dead: full width and last, so it is the only thing that
     ever takes a second row. */
  .orail-bar #submitWhy { order: 4; flex: 1 1 100%; margin-top: 0 !important; }
}

/* Picker trees rendered as tables (Plan for Dumping format). */
.ptree .tbody { max-height: 300px; overflow: auto; }
.ptree table.treetbl { margin: 0; }
.ptree table.treetbl th { position: sticky; top: 0; z-index: 1; background: var(--sf-7); }
.ptree tr.xrow > td { background: var(--tint-blue-2); border-top: 1px solid var(--tint-blue-9); }
.ptree tr.xrow:hover > td { background: var(--tint-blue-4); }
.ptree tr.drow > td { background: var(--sf-2); }
.ptree tr.drow:hover > td { background: var(--tint-blue-1); }
.ptree tr.srow > td { background: var(--sf-1); }
.ptree tr.srow:hover > td { background: var(--sf-2); }
.ptree tr.on > td { background: var(--green-soft) !important; }
.ptree tr[hidden] { display: none; }
.ptree .tarrow { display: inline-block; width: 13px; color: var(--link); font-size: 10px; }

/* "Both" export group — external + in-house in one list. */
.export-group.all .export-kind { color: var(--green-ink); }
.export-group.all { border-color: var(--edge-green-2); background: var(--green-soft); }

/* Delivery call is a DEALER task — the row names them and offers the number. */
.callwho { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
  padding: 7px 10px; border: 1px solid var(--tint-blue-11); background: var(--blue-soft); border-radius: 8px; }
.callwho b { font-size: 13px; }

/* One dealer, one call — the dealer's other trucks out of the same rake, ticked
   so a single submit settles the lot instead of the same call being marked over
   and over on identical orders. */
.callgrp { border: 1px solid var(--tint-blue-9); border-radius: 8px; background: var(--sf-1);
  padding: 7px 9px; margin-bottom: 8px; }
.callgrp-h { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.callgrp-i { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 12px; padding: 3px 0; cursor: pointer; }
.callgrp-i + .callgrp-i { border-top: 1px dashed var(--tint-blue-2); }
.callgrp-i .muted { font-size: 11.5px; }
.callgrp-i input[type=checkbox] { margin: 0; }
.callgrp .rq { margin: 2px 0 5px 21px; max-width: 250px; }

/* Company allocation budget on Single Party Order Entry.
   One bar per company: the whole railway receipt, cut into what is already
   spoken for, what this order claims, and what is still free to give out. */
.cbudget { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px;
  background: var(--sf-1); margin-bottom: 14px; }
.cbudget[hidden] { display: none; }
.cbrow + .cbrow { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.cbtop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cbname { font-size: 13.5px; }
.cbleft { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cbleft b { font-size: 15px; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.cbleft.bad { color: var(--red-ink); }
.cbleft.bad b { color: var(--red-ink); }

.cbbar { display: flex; height: 12px; margin: 8px 0 7px; border-radius: 6px;
  overflow: hidden; background: var(--sf-9); }
.cbseg { display: block; height: 100%; }
.cbseg.is-now, .cbseg.is-over { min-width: 6px; }  /* a sliver still has to be seen */
.cbseg + .cbseg { box-shadow: -2px 0 0 #fbfcfe; }   /* 2px surface gap between fills */

/* Fixed slots, never recycled: booked-to-dealers, booked-to-warehouse,
   this order, and the untouched remainder. */
.cbseg.is-party, .cbdot.is-party { background: var(--pc-1); }
.cbseg.is-wh,    .cbdot.is-wh    { background: var(--pc-4); }
.cbseg.is-now,   .cbdot.is-now   { background: var(--pc-2); }
.cbseg.is-over,  .cbdot.is-over  { background: var(--red); }
.cbdot.is-free { background: var(--sf-9); box-shadow: inset 0 0 0 1px #cbd5e1; }

.cbkeys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); }
.cbk { display: inline-flex; align-items: center; gap: 5px; }
.cbk b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cbdot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.cbcalc { margin-top: 6px; font-size: 11px; color: var(--muted); }
.cbcalc b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- Party-wise distribution on Single Party Order Entry --------------
   One bar per lorry, the parties riding on it underneath. The bar is
   against the TRUCK, not against the allocation — the company panel above
   already answers "is there enough", and the question here is the other
   one: is this lorry worth sending. A half-filled bar is the whole reason
   the panel exists, so it is coloured, not merely short. */
.dsplit { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px;
  background: var(--sf-1); margin-top: 12px; }
.dsplit[hidden] { display: none; }
.dsrow + .dsrow { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dstop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dsname { font-size: 13px; }
.dsmt { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dsmt b { font-size: 14.5px; color: var(--ink); }

.dsbar { display: flex; height: 10px; margin: 7px 0 6px; border-radius: 5px;
  overflow: hidden; background: var(--sf-9); }
.dsfill { display: block; height: 100%; background: var(--pc-2); min-width: 4px; }
.dsover { display: block; height: 100%; flex: 1 1 auto; background: var(--red); min-width: 8px; }

/* Under half a lorry is the case worth acting on, so it is amber rather than
   the same blue as a load that is fine. Full is green; over is red. */
.dsrow.is-thin .dsfill { background: var(--amber); }
.dsrow.is-full .dsfill { background: var(--green); }
.dsrow.is-over .dsfill { background: var(--red); }

.dsparts { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
.dspart { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; background: var(--sf-2); }
.dspart b { color: var(--ink); font-weight: 700; }
.dspart i { font-style: normal; opacity: .75; }
.dscalc { font-size: 11px; color: var(--muted); }
.dscalc b { font-variant-numeric: tabular-nums; }
.dscalc .bad { color: var(--red-ink); }
.dscalc .good { color: var(--green-ink); }

/* The two new item-row boxes. Kept narrow: they are choices from a short list,
   and a full-width select would push the quantity boxes off a laptop screen. */
#itemTable select.ipty { width: 100%; max-width: none; }
/* The truck box holds "#1", not "Truck 1" — the column above it is already
   headed Truck. It is sized to that content rather than to its column, because
   at a hundred pixels for two characters it pushed the row's own ✕ off the
   right-hand edge on any screen narrower than about 1600px. */
#itemTable select.itrk { width: 58px; min-width: 58px; max-width: none; }