/* MYtrak. GOGO's bones (tokens, light/dark, sidebar + sticky top bar, cards,
   pills, tabular figures, fixed button order) in MYtrak's own colours:
   engineering blue for actions, burnt orange as the second colour. No build step. */

:root {
  --ink:#171B21; --navy:#1F2A3A; --slate:#3D4756; --muted:#646E7C; --faint:#9AA3AF;
  --bg:#F4F6F8; --bg-soft:#EBEEF2; --surface:#FFFFFF; --line:#DDE2E8; --line-strong:#C3CAD3;
  --cta:#1D5FA6; --cta-dark:#164A82; --cta-soft:#E2EDF8; --cta-ink:#123A66;
  --glass:#CBD5E1; --glass-deep:#94A6BD;
  --plum:#C2571A; --plum-bg:#FBEEE5; --plum-line:#F0CDB6;
  --amber:#E8A317; --amber-deep:#7A5200;
  --up:#1B7F3B; --up-bg:#E6F5EA; --up-line:#B9E2C5;
  --down:#C2342E; --down-bg:#FBECEA; --down-line:#F3C6C2;
  --warn:#7A5200; --warn-bg:#FDF3D9; --warn-line:#F0DFA8;
  --grey:#5B6470; --grey-bg:#EEF1F4; --grey-line:#D5DBE2;
  --violet:#5B4B8A; --violet-bg:#EEEBF7; --violet-line:#D3CCEA;
  --radius:14px; --radius-sm:9px;
  --chart:#1D5FA6;
  --shadow-sm:0 1px 2px rgba(23,27,33,.06),0 1px 3px rgba(23,27,33,.05);
  --shadow:0 10px 30px -12px rgba(23,27,33,.18);
  --shadow-lg:0 24px 60px -20px rgba(23,27,33,.35);
  --ring:0 0 0 3px rgba(29,95,166,.28);
  --on-cta:#ffffff; --on-up:#ffffff; --on-down:#ffffff;
  --font-display:"Lexend",system-ui,sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --side:240px; --top:54px;
  color-scheme:light;
}
html[data-theme="dark"] {
  --ink:#E9ECF0; --navy:#F2F5F8; --slate:#C6CDD6; --muted:#98A2AF; --faint:#5C6673;
  --bg:#0F1216; --bg-soft:#161A20; --surface:#191E25; --line:#272E38; --line-strong:#37414E;
  --cta:#6FB1F2; --cta-dark:#A3CEF8; --cta-soft:#15283D; --cta-ink:#CDE4FB;
  --glass:#27364A; --glass-deep:#6FB1F2;
  --plum:#F0A06A; --plum-bg:#2E1D12; --plum-line:#4D311E;
  --amber:#F0B429; --amber-deep:#F4C95B;
  --chart:#4F97E0;
  --up:#4ADE80; --up-bg:#12251A; --up-line:#1E4029;
  --down:#F87171; --down-bg:#2B1417; --down-line:#4C1F24;
  --warn:#F4C95B; --warn-bg:#2A2210; --warn-line:#4A3C1A;
  --grey:#98A2AF; --grey-bg:#1D2229; --grey-line:#2E3641;
  --violet:#B7A8E6; --violet-bg:#221D33; --violet-line:#3A3157;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 10px 30px -12px rgba(0,0,0,.55); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(111,177,242,.35);
  --on-cta:#06131F; --on-up:#04130A; --on-down:#1F0707;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--bg); color:var(--ink); font:15.5px/1.5 var(--font-body); min-height:100vh; -webkit-font-smoothing:antialiased; }
a { color:var(--cta); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { font-family:var(--font-display); color:var(--navy); margin:0; letter-spacing:-.01em; }
h1 { font-size:24px; font-weight:700; }
h2 { font-size:17px; font-weight:600; }
h3 { font-size:14.5px; font-weight:600; }
code,.mono { font-family:var(--mono); font-size:.88em; }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:13.5px; } .tiny { font-size:12px; }
.nowrap { white-space:nowrap; } .right { text-align:right; } .center { text-align:center; }
.grow { flex:1; } .row { display:flex; align-items:center; gap:10px; } .wrap { flex-wrap:wrap; }
.stack > * + * { margin-top:14px; }
.hidden { display:none !important; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:6px; }

.money { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; font-size:13.5px; }
.money.big { font-size:24px; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:13.5px; }
.size { font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- shell ---------- */
.top { position:sticky; top:0; z-index:30; height:var(--top); display:flex; align-items:center; gap:14px; padding:0 18px;
  background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none !important; }
.brand img { width:30px; height:30px; }
.brand b { font:700 20px var(--font-display); letter-spacing:-.03em; }
.brand b i { font-style:normal; color:var(--cta); }
.brand .co { font-size:12.5px; color:var(--muted); border-left:1px solid var(--line); padding-left:10px; margin-left:2px; }
.icon-btn { border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px; width:34px; height:34px; cursor:pointer; font-size:15px; display:inline-grid; place-items:center; }
.icon-btn:hover { color:var(--ink); border-color:var(--line-strong); }
.burger { display:none; }

.gsearch { position:relative; flex:1; min-width:0; max-width:560px; }
.gsearch input { padding-left:34px; padding-right:36px; height:36px; border-radius:999px; background:var(--bg-soft); border-color:transparent; }
.gsearch input:focus { background:var(--surface); border-color:var(--cta); }
.gs-lens { position:absolute; left:12px; top:50%; transform:translateY(-52%); color:var(--faint); font-size:17px; pointer-events:none; }
.gs-key { position:absolute; right:10px; top:50%; transform:translateY(-50%); }
.gs-panel { position:absolute; left:0; right:0; top:42px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; z-index:40; }
.gs-panel a { display:flex; align-items:center; gap:10px; padding:9px 14px; color:var(--ink); border-bottom:1px solid var(--line); }
.gs-panel a:last-child { border-bottom:0; }
.gs-panel a:hover, .gs-panel a.on { background:var(--cta-soft); text-decoration:none; }
.gs-panel .k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); min-width:72px; }
.gs-panel .t { font-weight:600; }
.gs-panel .s { color:var(--muted); font-size:13px; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:50%; }
.gs-panel .none { padding:12px 14px; color:var(--muted); font-size:14px; }

.layout { display:grid; grid-template-columns:var(--side) 1fr; min-height:calc(100vh - var(--top)); }
.side { scrollbar-width:thin; border-right:1px solid var(--line); background:var(--surface); padding:14px 10px 30px; position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow:auto; }
.side .grp { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:14px 12px 5px; }
.side a { display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:var(--radius-sm); color:var(--slate); font-weight:600; font-size:14.5px; text-decoration:none; }
.side a .ic { width:22px; text-align:center; opacity:.75; font-size:17px; line-height:1; }
.side a:hover { background:var(--bg-soft); color:var(--ink); }
.side a.on { background:var(--cta-soft); color:var(--cta-ink); }
.side a.on .ic { opacity:1; }
.side a.primary { background:var(--cta); color:var(--on-cta); margin:4px 2px 8px; justify-content:center; }
.side a.primary:hover { background:var(--cta-dark); }
.side .foot { margin:22px 12px 0; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--faint); line-height:1.6; }
main { min-width:0; }
.view { padding:22px 26px 60px; max-width:1480px; }

.page-head { display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.page-head .sub { color:var(--muted); font-size:14px; margin-top:3px; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.crumb { font-size:13px; color:var(--muted); margin-bottom:4px; }
.crumb a { color:var(--muted); }

/* ---------- controls ---------- */
.btn { font:600 14.5px var(--font-body); border-radius:var(--radius-sm); padding:8px 15px; cursor:pointer; border:1px solid var(--cta);
  background:var(--cta); color:var(--on-cta); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none !important; line-height:1.25; }
.btn:hover { background:var(--cta-dark); border-color:var(--cta-dark); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.ghost { background:var(--surface); color:var(--slate); border-color:var(--line); }
.btn.ghost:hover { color:var(--ink); border-color:var(--line-strong); background:var(--bg-soft); }
.btn.good { background:var(--up); border-color:var(--up); color:var(--on-up); }
.btn.danger { background:var(--surface); color:var(--down); border-color:var(--down-line); }
.btn.danger:hover { background:var(--down-bg); }
.btn.sm { padding:5px 10px; font-size:13.5px; }
.kbd { font:600 11px var(--mono); padding:1px 5px; border-radius:4px; border:1px solid currentColor; opacity:.65; }
.linkish { background:none; border:0; color:var(--cta); cursor:pointer; font:inherit; padding:0; }
.linkish:hover { text-decoration:underline; }

input,select,textarea { font:inherit; font-size:14.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px; width:100%; min-width:0; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--cta); box-shadow:var(--ring); }
input[readonly],input:disabled,select:disabled,textarea:disabled { background:var(--bg-soft); color:var(--muted); }
textarea { resize:vertical; min-height:70px; }
input[type=checkbox], input[type=radio] { width:auto; height:auto; accent-color:var(--cta); transform:scale(1.15); }
.field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.field > span { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.check { display:flex; align-items:center; gap:9px; font-size:14.5px; cursor:pointer; }
.search { position:relative; }
.search input { padding-left:32px; }
.search::before { content:"⌕"; position:absolute; left:11px; top:50%; transform:translateY(-52%); color:var(--faint); font-size:17px; }

.seg { display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:2px; gap:2px; flex-wrap:wrap; }
.seg button,.seg a { border:0; background:none; font:600 13.5px var(--font-body); color:var(--muted); padding:5px 11px; border-radius:7px; cursor:pointer; text-decoration:none !important; white-space:nowrap; }
.seg button:hover,.seg a:hover { color:var(--ink); }
.seg .on, .seg button.on:hover, .seg a.on:hover { background:var(--navy); color:var(--surface); }
.seg .n { font-weight:400; opacity:.75; margin-left:3px; }

/* ---------- cards / kpis ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card > .hd { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); }
.card > .hd .more { margin-left:auto; font-size:13.5px; }
.card > .bd { padding:14px 16px; }
.card > .bd.flush { padding:0; overflow-x:auto; }
.grid { display:grid; gap:16px; }
.grid.kpis { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.grid.two { grid-template-columns:1fr 1fr; }
.grid.main { grid-template-columns:2fr 1fr; }
.kpi { padding:14px 16px; }
.kpi .lbl { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.kpi .val { font:700 26px/1.2 var(--font-display); color:var(--navy); margin-top:4px; letter-spacing:-.02em; }
.kpi .val small { font:600 13px var(--font-body); color:var(--muted); margin-left:6px; letter-spacing:0; }
.kpi .sub { font-size:13px; color:var(--muted); margin-top:2px; }
.kpi.attn .val { color:var(--amber-deep); }

/* ---------- tables ---------- */
table.list { width:100%; border-collapse:collapse; font-size:14.5px; }
table.list th { text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--line); background:var(--bg-soft); white-space:nowrap; }
table.list td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list tr:last-child td { border-bottom:0; }
table.list tr.link:hover td { background:var(--cta-soft); cursor:pointer; }
table.list td.right, table.list th.right { text-align:right; }
table.list .ref { font-weight:600; color:var(--navy); white-space:nowrap; }
table.list td.stage { white-space:nowrap; }
table.list td.desc { min-width:220px; }
table.list .ref a { color:inherit; }
.empty { padding:28px 16px; text-align:center; color:var(--muted); }
.empty b { display:block; color:var(--ink); font-family:var(--font-display); margin-bottom:4px; }
.pager { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted); }
.pager .grow { flex:1; }

/* pills: stages */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; border:1px solid var(--grey-line); background:var(--grey-bg); color:var(--grey); white-space:nowrap; letter-spacing:.02em; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
/* stage timeline on the order page */
.timeline { display:flex; gap:0; align-items:stretch; }
.timeline .step { flex:1; padding:8px 10px; border:1px solid var(--line); background:var(--bg-soft); font-size:13px; color:var(--muted); position:relative; }
.timeline .step:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.timeline .step:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.timeline .step + .step { border-left:0; }
.timeline .step b { display:block; color:var(--navy); font-family:var(--font-display); font-weight:600; }
.timeline .step.done { background:var(--cta-soft); color:var(--cta-ink); }
.timeline .step.done b { color:var(--cta-ink); }
.timeline .step.now { background:var(--cta); color:var(--on-cta); }
.timeline .step.now b { color:var(--on-cta); }

.addr { white-space:pre-line; line-height:1.4; }
.drop { position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); z-index:20; max-height:320px; overflow:auto; }
.drop div { padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line); font-size:14px; }
.drop div:last-child { border-bottom:0; }
.drop div.on, .drop div:hover { background:var(--cta-soft); }
.drop .s { color:var(--muted); font-size:12.5px; }
.drop .acc { font-family:var(--mono); font-size:12px; color:var(--muted); margin-right:6px; }
.drop .stop { color:var(--down); font-weight:700; font-size:12px; margin-left:6px; }
/* ---------- toasts ---------- */
.toasts { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast { background:var(--navy); color:var(--surface); padding:10px 14px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); font-size:14px; animation:tin .18s ease-out; }
.toast.bad { background:var(--down); color:var(--on-down); }
@keyframes tin { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .editor { grid-template-columns:1fr; }
  .editor .rail { position:static; }
  .grid.main { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns:1fr; }
  .side { position:fixed; left:0; top:var(--top); width:var(--side); transform:translateX(-100%); transition:transform .18s; z-index:25; box-shadow:var(--shadow-lg); }
  .side.open { transform:none; }
  .burger { display:inline-grid; }
  .view { padding:16px 16px 60px; }
  .brand .co { display:none; }
  .gsearch { max-width:none; }
  .grid.two { grid-template-columns:1fr; }
}
/* ---------- muscle memory: same places, same sizes ----------
   Page head sticks under the top bar so the action buttons never move while
   you scroll. Button order is fixed everywhere: destructive first (left),
   secondary ghosts, then the ONE primary action at the far right. */
.page-head { position:sticky; top:var(--top); z-index:20; background:var(--bg); padding:14px 0 12px; margin:-22px 0 14px; border-bottom:1px solid transparent; }
.page-head.stuck { border-bottom-color:var(--line); }
.page-head .actions { align-items:center; }
.page-head .actions form:not(.search) { display:contents; } /* search forms keep their box: the lens is anchored to it */
.btn { height:36px; padding:0 16px; }
.btn.sm { height:30px; padding:0 11px; }
.btn.danger { order:-2; }
.btn.ghost { order:-1; }
.page-head .actions .savebar .state { order:-3; }
.icon-btn { width:36px; height:36px; }
input:not([type=checkbox]):not([type=radio]),select { height:36px; }
textarea { height:auto; }
.seg button,.seg a { height:28px; display:inline-flex; align-items:center; }
.search input { height:36px; width:260px; }
.page-head .actions .search { flex:0 0 auto; }

/* numbers and dates are always the same width so columns line up page to page */
input.n { width:9ch; text-align:right; font-family:var(--mono); font-size:13.5px; }
input.n.short { width:6ch; }
input[type=date] { width:150px; }
table.list td.ref, table.list th.ref { width:132px; }
table.list td.stage, table.list th.stage { width:168px; }
table.list td.num, table.list th.num { width:72px; }
table.list td.money, table.list th.money { width:108px; }
table.list td.date, table.list th.date { width:92px; white-space:nowrap; }
table.list td.size { width:120px; }
/* shortcut cheat-sheet */
.keys { position:fixed; inset:0; background:rgba(11,31,34,.45); display:grid; place-items:center; z-index:70; }
.keys .box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:18px 22px; min-width:320px; }
.keys h3 { margin-bottom:10px; }
.keys dl { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0; font-size:14px; }
.keys dt { text-align:right; }
.keys dd { margin:0; color:var(--muted); }
@media (max-width: 820px) {
  .page-head { margin:-16px 0 12px; }
  .search input { width:100%; }
}
/* ---------- sign in & account ---------- */
.who { display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; color:var(--slate); padding:5px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.who:hover { text-decoration:none; color:var(--ink); border-color:var(--line-strong); }
.who .dot { width:8px; height:8px; border-radius:50%; background:var(--up); box-shadow:0 0 0 3px var(--up-bg); flex:none; }
.logout { display:contents; }
.notice { padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); font-size:14.5px; margin-bottom:14px; }
.notice.bad { background:var(--down-bg); border-color:var(--down-line); color:var(--down); }
.notice.good { background:var(--up-bg); border-color:var(--up-line); color:var(--up); }
.notice.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.notice code.pw { font-size:16px; font-weight:700; letter-spacing:.04em; padding:2px 8px; background:var(--surface); border:1px dashed var(--warn-line); border-radius:6px; user-select:all; }
.login-body { background:
  radial-gradient(900px 500px at 15% -10%, var(--cta-soft), transparent 60%),
  radial-gradient(700px 500px at 110% 110%, var(--glass), transparent 55%),
  var(--bg); }
.login { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.login-card { width:100%; max-width:380px; padding:30px 30px 22px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-lg); }
.login-card h1 { font-size:22px; margin-top:4px; }
.login-card .notice { margin:0; }
.login-brand { display:flex; align-items:center; gap:10px; color:var(--navy); }
.login-brand img { width:34px; height:34px; }
.login-brand b { font:700 22px var(--font-display); letter-spacing:-.03em; }
.login-brand b i { font-style:normal; color:var(--cta); }
.login-brand .co { font-size:12.5px; color:var(--muted); border-left:1px solid var(--line); padding-left:10px; }
.login-btn { justify-content:center; padding:10px 15px; margin-top:4px; }
.login-foot { text-align:center; font-size:12px; color:var(--faint); margin-top:6px; }
@media (max-width:720px) { .who { display:none; } }
form.inline { display:inline; margin:0; }
table.list tfoot th { text-align:left; font-size:13.5px; padding:9px 12px; border-top:2px solid var(--navy); background:var(--bg-soft); white-space:nowrap; }

/* ---------- MYtrak additions ---------- */

.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.filters select, .filters input { width:auto; }
dl.facts { display:grid; grid-template-columns:150px 1fr; gap:6px 14px; margin:0; font-size:14.5px; }
dl.facts dt { color:var(--muted); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding-top:2px; }
dl.facts dd { margin:0; }
.formgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px 16px; }
.formgrid .wide { grid-column:1 / -1; }

/* printing */
@media print {
  .top, .side, .page-head .actions, .noprint { display:none !important; }
  .layout { display:block; }
  .view { padding:0; max-width:none; }
  .page-head { position:static; }
  body { background:#fff; }
  .card { box-shadow:none; border-color:#ccc; }
}

/* what a record is: pills in the page head and on lists */
.pill.customer { background:var(--cta-soft); color:var(--cta-ink); border-color:var(--glass-deep); }
.pill.supplier { background:var(--plum-bg); color:var(--plum); border-color:var(--plum-line); }
.pill.prospect { background:var(--violet-bg); color:var(--violet); border-color:var(--violet-line); }
.pill.good { background:var(--up-bg); color:var(--up); border-color:var(--up-line); }
.pill.warn { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.pill.bad { background:var(--down-bg); color:var(--down); border-color:var(--down-line); }
.pills { display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle; margin-left:8px; }
h1 .pills { position:relative; top:-3px; }

/* sidebar entries for modules that are not built yet */
.side .soon { display:flex; align-items:center; gap:8px; padding:7px 10px 7px 12px; white-space:nowrap; color:var(--faint); font-weight:600; font-size:14.5px; cursor:default; }
.side .soon .ic { width:22px; text-align:center; font-size:17px; line-height:1; }
.side .soon em { margin-left:auto; flex:none; font:600 10px var(--font-body); font-style:normal; text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--line); border-radius:999px; padding:1px 6px; }

/* the flow of work on the home page: quote, order, make, buy, stock, send */
.flow { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.flow .stage { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:14px 16px; box-shadow:var(--shadow-sm); position:relative; }
.flow .stage .n { font:700 11px var(--mono); color:var(--muted); letter-spacing:.06em; }
.flow .stage h3 { margin:2px 0 6px; font-size:16px; }
.flow .stage p { margin:0 0 8px; font-size:13.5px; color:var(--muted); line-height:1.4; }
.flow .stage a.go { font-weight:600; font-size:14px; display:block; padding:2px 0; }
.flow .stage.todo { background:var(--bg-soft); box-shadow:none; border-style:dashed; }
.flow .stage.todo h3 { color:var(--muted); }
.flow .stage .tag { position:absolute; right:12px; top:12px; font:600 10px var(--font-body); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); border:1px solid var(--line); border-radius:999px; padding:1px 7px; }
.flow .stage.live .tag { color:var(--up); border-color:var(--up-line); background:var(--up-bg); }

/* address blocks */
.addrs { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.addrs .a { border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; font-size:14px; }
.addrs .a .k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:4px; }
.addrs .a .x { color:var(--muted); font-size:13px; margin-top:6px; }
.addrs .a.old { opacity:.6; }
.statusrow { display:flex; gap:6px 8px; flex-wrap:wrap; align-items:center; }
.statusrow .btn { order:0; }
details.more > summary { cursor:pointer; color:var(--cta); font-weight:600; font-size:14px; padding:6px 0; }
.kpi .val.neg { color:var(--down); }
.kpi .val.zero { color:var(--faint); }
table.list td.pn { font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--navy); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
table.list td.clip { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dim { opacity:.55; }
.section { margin-top:22px; }
.section > h2 { margin-bottom:10px; }

/* long emails and terms wrap instead of pushing the page wide */
.grid > * { min-width:0; }
dl.facts dd { min-width:0; overflow-wrap:anywhere; }
.addrs .a { overflow-wrap:anywhere; }

/* phones: the top bar keeps to what a thumb needs */
@media (max-width: 820px) {
  .top { gap:8px; padding:0 10px; }
  #keysBtn, .gs-key { display:none; }
  dl.facts { grid-template-columns:112px 1fr; }
  .filters .search, .filters .search input, .filters select { width:100%; }
}

/* ---------- edit forms ---------- */
.hint { font-size:12.5px; color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0; }
.field > .hint { margin-top:-1px; }
.checks { display:flex; gap:8px 22px; flex-wrap:wrap; align-items:center; min-height:36px; }
.check.wide { grid-column:1 / -1; }
.check .hint { margin-left:4px; }
.formfoot { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }
form.card { margin:0; }

/* type-to-find box for picking a customer, supplier or person */
.picker { position:relative; min-width:0; }
.picker .drop b { font-weight:600; }

table.prices { width:auto; min-width:min(100%, 460px); }
table.prices td { padding:6px 12px; }
table.prices td:last-child, table.prices th:last-child { width:100%; }
table.prices input.n { width:13ch; }

/* small things on record pages */
.card > .hd .more { font-weight:600; }
table.list td.acts { text-align:right; white-space:nowrap; }
table.list td.acts form + form { margin-left:10px; }
table.list td.when, table.list th.when { width:150px; white-space:nowrap; }
details.pad { padding:6px 14px 12px; border-top:1px solid var(--line); }
details.pad form { margin-top:6px; }
.h2link { font:600 13.5px var(--font-body); margin-left:10px; letter-spacing:0; }
.addrs .a .k { display:flex; justify-content:space-between; gap:8px; }
.addrs .a .k a { text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:600; }
@media (max-width: 820px) {
  .formfoot .btn { flex:1; justify-content:center; }
  .page-head .actions { margin-left:0; }
}

/* ---------- quotes and costings ---------- */
table.list td.wide { max-width:520px; }
table.list.tight td { padding:6px 12px; }
table.list.tight th { padding:7px 12px; }
table.list tr.main td { background:var(--cta-soft); }
table.list td.money.muted { color:var(--muted); }
.qline { margin-bottom:12px; }
.qline > .hd { align-items:flex-start; }
.qline .ln { flex:none; width:28px; height:28px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center; font:600 12.5px var(--mono); color:var(--muted); }
.qline .note { border-bottom:1px solid var(--line); font-size:14px; color:var(--slate); background:var(--bg-soft); }
.totals { max-width:420px; margin-left:auto; }
dl.facts.sums { grid-template-columns:1fr auto; }
dl.facts.sums dd { text-align:right; font-family:var(--mono); font-size:14px; }
dl.facts.sums .strong { font-weight:700; color:var(--navy); font-size:15px; padding-top:6px; border-top:1px solid var(--line); }

/* the build-up of a costing: step, what, how, set-up, each */
.bu-card { overflow:hidden; }
.bu-row { display:grid; grid-template-columns:34px minmax(0,1.25fr) minmax(0,1fr) 84px 100px; gap:4px 12px; padding:7px 14px; border-bottom:1px solid var(--line); align-items:baseline; font-size:14px; }
.bu-row .st { font:600 12px var(--mono); color:var(--muted); }
.bu-row .what { min-width:0; overflow-wrap:anywhere; }
.bu-row .what small { display:block; color:var(--muted); font-size:12.5px; }
.bu-row .how { color:var(--muted); font-size:13px; min-width:0; }
.bu-row .amt { text-align:right; font-family:var(--mono); font-size:13px; white-space:nowrap; }
.bu-row.op .what b { color:var(--navy); }
.bu-row.item .what { padding-left:14px; }
.bu-head { background:var(--bg-soft); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.bu-head .amt { font-family:var(--font-body); font-size:11.5px; }
.bu-foot { background:var(--bg-soft); border-bottom:0; }
.bu-sub > summary { list-style:none; cursor:pointer; }
.bu-sub > summary::-webkit-details-marker { display:none; }
.bu-sub > summary .what::before { content:"▸"; display:inline-block; width:14px; color:var(--cta); transition:transform .12s; }
.bu-sub[open] > summary .what::before { transform:rotate(90deg); }
.bu-sub > summary:hover { background:var(--cta-soft); }
.bu-sub[open] > summary { background:var(--bg-soft); }
.bu.nested { margin-left:20px; border-left:3px solid var(--glass); }
.flow .stage.live .tag { white-space:nowrap; }
@media (max-width: 820px) {
  .bu-row { grid-template-columns:22px minmax(0,1fr) 64px 78px; padding:7px 10px; }
  .bu-row .how { grid-column:2 / -1; grid-row:2; }
  .bu-head span:nth-child(3) { display:none; }
  .bu.nested { margin-left:8px; }
  .totals { max-width:none; }
}
@media print {
  .bu-sub > summary .what::before { display:none; }
  .notice.good, .noprint { display:none !important; }
}

/* ---------- changing a quote ---------- */
.qline > .hd .more { display:flex; gap:4px 14px; flex-wrap:wrap; justify-content:flex-end; font-size:13.5px; font-weight:600; }
.qline > .hd .more .linkish { font-size:13.5px; font-weight:600; color:var(--down); }
.addpart { margin-top:14px; }
.addpart .bd + .bd { padding-top:0; }
dl.facts dd form.row { flex-wrap:wrap; gap:6px; }
dl.facts dd form.row select { width:auto; min-width:170px; flex:1; }
table.prices td.tot { min-width:9ch; }
@media (max-width: 820px) {
  .addpart form.row { flex-wrap:wrap; }
  .addpart .picker { flex-basis:100%; order:2; }
  .addpart .btn { order:3; flex:1; justify-content:center; }
}

/* a notice above the page head: the head must not ride up over it */
.notice + .page-head { margin-top:0; padding-top:4px; }
/* the status picker reads left to right: the list, then the button */
dl.facts dd form.row .btn { order:0; }

/* ---------- changing a costing ---------- */
table.list tr.now td { background:var(--warn-bg); color:var(--warn); border-bottom-color:var(--warn-line); }
.rowlinks { display:block; margin-top:2px; font-size:12.5px; font-weight:600; }
.rowlinks a, .rowlinks .linkish { margin-right:12px; font-size:12.5px; font-weight:600; }
.rowlinks .danger, .linkish.danger { color:var(--down); }
.bu-sub > summary .rowlinks { padding-left:14px; }
.addrow { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.addrow .btn { order:0; }
[hidden] { display:none !important; }

/* ---------- sales orders ---------- */
table.list td.late { color:var(--down); font-weight:600; }
table.list td.small { font-size:13px; }
.kpi .val.zero { color:var(--faint); }
/* the lines of an order: number, part, quantity, price, total, when */
.ol-card { overflow:hidden; }
.ol-row { display:grid; grid-template-columns:28px minmax(0,1.7fr) 84px 96px 104px minmax(0,1fr); gap:2px 14px; padding:10px 14px; border-bottom:1px solid var(--line); align-items:baseline; font-size:14.5px; }
.ol-row:last-child { border-bottom:0; }
.ol-row .st { font:600 12.5px var(--mono); color:var(--muted); }
.ol-row .what { min-width:0; overflow-wrap:anywhere; }
.ol-row .what small { display:block; color:var(--muted); font-size:13px; }
.ol-row .what small.note { color:var(--slate); white-space:pre-line; }
.ol-row .what .pill { margin-left:6px; }
.ol-row .amt { text-align:right; font-family:var(--mono); font-size:13.5px; white-space:nowrap; }
.ol-row .amt small { display:block; font-family:var(--font-body); font-size:12px; color:var(--up); }
.ol-row .when { min-width:0; font-size:14px; }
.ol-row .when small { display:block; color:var(--muted); font-size:12.5px; }
.ol-row .when > div + div { margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); }
.ol-row.gone { background:var(--bg-soft); }
.ol-row.cancelled { color:var(--muted); }
.ol-row.cancelled .what b { text-decoration:line-through; }
.ol-head { background:var(--bg-soft); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding-top:8px; padding-bottom:8px; }
.ol-head .amt { font-family:var(--font-body); font-size:11.5px; }
.addpart label.inl { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
table.prices tr.locked td { color:var(--muted); background:var(--bg-soft); }
table.prices input[type=date] { width:150px; }
table.prices[data-deliveries] td:last-child input { min-width:140px; }
details.more > summary { cursor:pointer; font-weight:600; color:var(--muted); margin-bottom:10px; }
@media (max-width: 820px) {
  .ol-row { grid-template-columns:20px repeat(3, minmax(0,1fr)); gap:4px 10px; padding:10px; }
  .ol-row .what { grid-column:2 / -1; }
  .ol-row .amt { grid-row:2; text-align:left; }
  .ol-row .amt[data-l=Quantity] { grid-column:2; }
  .ol-row .amt[data-l=Each] { grid-column:3; }
  .ol-row .amt[data-l=Total] { grid-column:4; }
  .ol-row .amt::before { content:attr(data-l); display:block; font:600 10.5px var(--font-body); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
  .ol-row .when { grid-column:2 / -1; grid-row:3; }
  .ol-head { display:none; }
  .addpart label.inl { flex:1; }
  .side:not(.open) { box-shadow:none; } /* off screen: its shadow must not show at the edge */
  .addpart label.inl input { flex:1; width:auto; }
}
@media print {
  .ol-row.gone { background:none; }
}

/* ---------- paperwork for customers (order acknowledgement) ---------- */
.paper-body { background:var(--bg-soft); }
.paper-bar { display:flex; align-items:center; gap:12px; max-width:820px; margin:0 auto; padding:14px 16px; }
.paper-bar .grow { flex:1; }
.paper { max-width:820px; margin:0 auto 40px; background:#fff; color:#111; border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-sm); padding:40px 44px; font-size:13.5px; line-height:1.45; }
.paper-top { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:18px; border-bottom:2px solid #111; }
.paper .from .co { font:700 22px var(--font-display); letter-spacing:-.02em; margin-bottom:4px; }
.paper .doc h1 { font:700 19px var(--font-display); margin:0 0 8px; text-align:right; color:#111; }
.paper dl { display:grid; grid-template-columns:auto 1fr; gap:2px 14px; margin:0; }
.paper dt { color:#555; }
.paper dd { margin:0; }
.paper .doc dd { text-align:right; }
.paper-addrs { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0 16px; }
.paper .k { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#555; margin-bottom:3px; }
.paper .lead { margin:0 0 14px; }
.paper-lines { width:100%; border-collapse:collapse; }
.paper-lines th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#555; border-bottom:1px solid #111; padding:6px 8px; white-space:nowrap; }
.paper-lines td { padding:7px 8px; border-bottom:1px solid #ddd; vertical-align:top; }
.paper-lines .r { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.paper-lines .d { color:#444; font-size:12.5px; white-space:pre-line; }
.paper-lines td:last-child { white-space:nowrap; }
.paper-lines tr { break-inside:avoid; }
.paper-foot { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:18px; break-inside:avoid; }
.paper-foot .terms { flex:1; min-width:220px; }
.paper-foot .terms .k { margin-top:12px; }
.paper .sums { grid-template-columns:auto auto; gap:3px 28px; align-content:start; min-width:220px; }
.paper .sums dd { text-align:right; font-variant-numeric:tabular-nums; }
.paper .sums .t { font-weight:700; font-size:15px; border-top:1px solid #111; padding-top:5px; margin-top:3px; }
.paper-end { margin-top:26px; font-size:11.5px; color:#666; }
@media (max-width: 640px) {
  .paper { padding:20px 16px; border-radius:0; border-left:0; border-right:0; }
  .paper-addrs { grid-template-columns:1fr; gap:12px; }
  .paper .doc h1, .paper .doc dd { text-align:left; }
  .paper-lines { display:block; overflow-x:auto; }
  .paper-bar .muted { display:none; }
}
@media print {
  .paper-body { background:#fff; }
  .paper { border:0; box-shadow:none; margin:0; padding:0; max-width:none; }
  @page { margin:16mm 14mm; }
}

/* ---------- work orders ---------- */
/* the parts of a work order: each opens to show its steps; deeper parts sit further in */
.wo-card .wp { margin-left:calc(var(--lvl, 0) * 18px); border-bottom:1px solid var(--line); }
.wo-card .wp:last-child { border-bottom:0; }
.wp > summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) 84px 170px 70px; gap:2px 12px; padding:9px 14px; align-items:baseline; font-size:14.5px; }
.wp > summary::-webkit-details-marker { display:none; }
.wp > summary .what { min-width:0; overflow-wrap:anywhere; }
.wp > summary .what::before { content:"▸"; display:inline-block; width:14px; color:var(--cta); transition:transform .12s; }
.wp[open] > summary .what::before { transform:rotate(90deg); }
.wp > summary .what small { display:block; padding-left:14px; color:var(--muted); font-size:12.5px; }
.wp > summary .what small b { color:var(--cta-ink); }
.wp > summary .amt { text-align:right; font-family:var(--mono); font-size:13.5px; white-space:nowrap; }
.wp > summary .amt small { display:block; font-family:var(--font-body); font-size:12px; color:var(--muted); }
.wp > summary:hover { background:var(--cta-soft); }
.wp[open] > summary { background:var(--bg-soft); }
.wp > summary.done .what b { color:var(--muted); }
.wp .bu.nested { margin-left:14px; border-left:3px solid var(--glass); border-top:1px solid var(--line); }
.wp .bu-row .amt .pill { font-family:var(--font-body); }
.wp .bu-row .amt small { display:block; font-family:var(--font-body); font-size:12px; color:var(--muted); }
.wp-foot { background:var(--bg-soft); font-size:12.5px; color:var(--muted); border-bottom:0; }
.wp-foot .what { grid-column:2 / -1; }
@media (max-width: 820px) {
  .wo-card .wp { margin-left:calc(var(--lvl, 0) * 6px); }
  .wp > summary { grid-template-columns:minmax(0,1fr) auto; padding:9px 10px; }
  .wp > summary .what { grid-column:1 / -1; }
  .wp > summary .amt { text-align:left; }
  .wp > summary .amt::before { content:attr(data-l) " "; font:600 10.5px var(--font-body); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
  .wp > summary .where { text-align:right; }
  .wp .bu.nested { margin-left:6px; }
  /* a material gets the full width for its name; what has been issued goes beneath */
  .wp .bu-row.item .what { grid-column:2 / -1; padding-left:0; }
  .wp .bu-row.item .how { grid-row:2; }
  .wp .bu-row.item .amt { grid-row:3; text-align:left; }
  .wp .bu-row.item .amt:empty { display:none; }
}

/* ---------- the traveller: a sheet for each part, for the shop floor ---------- */
.barcode { display:block; max-width:100%; }
.paper.trav { margin-bottom:18px; padding:28px 32px; }
.trav-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:12px; border-bottom:2px solid #111; }
.trav .wo { font:700 24px var(--font-display); letter-spacing:-.02em; }
.trav .pg { color:#444; font-size:12.5px; }
.trav .code { text-align:center; font:600 10.5px var(--mono); color:#333; }
.trav .code .barcode { margin:0 auto 2px; }
.trav-part { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px; align-items:start; padding:12px 0; }
.trav-part .pn { grid-column:1; font:700 19px var(--mono); overflow-wrap:anywhere; }
.trav-part .pn small { font:500 13px var(--font-body); color:#444; }
.trav-part dl { grid-column:1; grid-template-columns:70px 1fr; }
.trav-part .code { grid-column:2; grid-row:1 / span 2; }
.trav-notes { white-space:pre-line; border:1px solid #111; padding:8px 10px; margin-bottom:10px; font-weight:600; }
.trav-steps { width:100%; border-collapse:collapse; }
.trav-steps th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#555; border-bottom:1px solid #111; padding:5px 6px; white-space:nowrap; }
.trav-steps td { padding:6px; vertical-align:middle; }
.trav-steps tr.op td { border-top:1px solid #999; }
.trav-steps tr.use td { padding-top:1px; padding-bottom:4px; font-size:12.5px; }
.trav-steps .r { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.trav-steps .d { color:#444; font-size:12px; white-space:pre-line; }
.trav-steps td.box { width:54px; border:1px solid #999; }
.trav-steps td.code { width:1%; white-space:nowrap; }
.trav .barcode { max-width:none; } /* a barcode squeezed narrower will not scan */
.trav-steps tr { break-inside:avoid; }
@media (max-width: 640px) {
  .paper.trav { padding:18px 14px; }
  .trav-steps { display:block; overflow-x:auto; }
  .trav-part { grid-template-columns:1fr; }
  .trav-part .code { grid-column:1; grid-row:auto; justify-self:start; }
}
@media print {
  .paper.trav { break-after:page; margin:0; padding:0; }
  .paper.trav:last-of-type { break-after:auto; }
}

/* ---------- purchasing ---------- */
/* goods in: a row for each line still to come */
.recv-row { display:grid; grid-template-columns:minmax(0,1fr) 110px 190px 110px auto; gap:6px 14px; padding:12px 16px; border-bottom:1px solid var(--line); align-items:end; }
.recv-row:last-child { border-bottom:0; }
.recv-row .what { min-width:0; overflow-wrap:anywhere; align-self:center; }
.recv-row .what small { display:block; color:var(--muted); font-size:13px; }
.recv-row .what .st { font:600 12.5px var(--mono); color:var(--muted); margin-right:6px; }
.recv-row .check { padding-bottom:8px; white-space:nowrap; }
.recv-row input.n { width:100%; }
.recv + datalist + .bd { border-top:1px solid var(--line); }
.paper .doc h1 .st { font:600 12px var(--font-body); letter-spacing:.04em; text-transform:uppercase; color:#444; margin-top:2px; }
.paper .fao { margin-top:6px; font-weight:600; }
.paper-lines .nw { white-space:nowrap; }
@media (max-width: 820px) {
  .recv-row { grid-template-columns:1fr 1fr; padding:12px 10px; }
  .recv-row .what { grid-column:1 / -1; }
}

/* ---------- stock ---------- */
/* a figure the records hold, shown beside the box for the true one */
.bigfact { font:700 22px/1.3 var(--font-display); color:var(--navy); letter-spacing:-.02em; padding:4px 0; }
.bigfact small { font:600 13px var(--font-body); color:var(--muted); letter-spacing:0; }
.bigfact.zero { color:var(--faint); }
/* in and out */
table.list td.in { color:var(--up); font-weight:600; }
table.list td.out { color:var(--down); font-weight:600; }
table.moves .pill { text-transform:capitalize; }
.pill.mv-received, .pill.mv-made { background:var(--up-bg); color:var(--up); border-color:var(--up-line); }
.pill.mv-issued, .pill.mv-sent { background:var(--cta-soft); color:var(--cta-ink); border-color:var(--glass-deep); }
.pill.mv-adjusted, .pill.mv-counted { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.card > .hd .more { display:flex; gap:14px; font-weight:600; }
/* choosing the place stock is taken from */
.places { display:flex; flex-direction:column; }
.place { display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.place:hover { background:var(--bg-soft); }
.place b { flex:1; min-width:0; overflow-wrap:anywhere; }
.place input { width:auto; margin:0; }
/* counting */
table.counts input.n { width:9ch; }
table.counts input.note { min-width:14ch; width:100%; }
table.counts td { vertical-align:middle; }
.bu-row .amt small { display:block; font-weight:600; font-size:12.5px; }
/* the state of a material (Received Partial) and the issue links need a little more room */
.wp .bu-row { grid-template-columns:34px minmax(0,1.25fr) minmax(0,1fr) 96px 124px; }
@media (max-width: 820px) {
  .wp .bu-row { grid-template-columns:22px minmax(0,1fr) 64px 78px; }
  .wp .bu-row.item { grid-template-columns:22px minmax(0,1fr) minmax(0,1fr); }
  .wp .bu-row.item .amt small { display:inline; margin-left:10px; }
}
/* a part number with its description under it; HDI's part numbers are long, so it wraps */
table.list td.item { min-width:16ch; overflow-wrap:anywhere; }
table.list td.item small { display:block; color:var(--muted); font-size:12.5px; }
@media print {
  table.counts input { border:0; border-bottom:1px solid #999; border-radius:0; background:none; }
}

/* ---------- dispatch and invoicing ---------- */
.card .bd .lbl { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.sums-row { border-top:1px solid var(--line); }
.sums-row dl.facts.sums { max-width:340px; margin-left:auto; }
.btn .count { display:inline-block; min-width:20px; padding:0 6px; margin-left:6px; border-radius:10px; background:rgba(255,255,255,.25); font-size:12px; text-align:center; }
table.list th.tick, table.list td.tick { width:34px; padding-right:0; }
table.list td.clip.sm { max-width:180px; }
table.list td.clip.md { max-width:230px; }
.kpi .sub { overflow-wrap:anywhere; }
table.list td.tick input, table.list th.tick input { width:auto; margin:0; }
/* what is going: the part, how many, and where it is taken from */
.recv-row.send-row { grid-template-columns:minmax(0,1fr) 110px 260px; }
.send-row select { width:100%; }
@media (max-width: 820px) {
  .recv-row.send-row { grid-template-columns:1fr 1fr; }
}
/* the delivery note: a box to tick as each line is checked, and somewhere to sign */
.paper-lines td.box { width:54px; }
.paper-lines td.box::after { content:""; display:block; width:16px; height:16px; border:1px solid #555; margin:0 auto; }
.paper-note { margin-top:16px; }
.paper-sign { display:grid; grid-template-columns:2fr 2fr 1fr; gap:28px; margin-top:44px; break-inside:avoid; }
.paper-sign .line { border-bottom:1px solid #111; height:34px; }
.paper-sign .under { font-size:11.5px; color:#666; margin-top:3px; }
.paper .foot-line { margin-top:8px; font-weight:600; }
@media (max-width: 640px) {
  .paper-sign { grid-template-columns:1fr; gap:10px; }
}

/* ---------- the shop floor screen ---------- */
/* Made to be read at arm's length and pressed with a gloved thumb: big type, big targets, one column. */
body.floor { background:var(--bg); font-size:17px; }
.fl-top { display:flex; align-items:center; gap:14px; padding:10px 18px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.fl-top .grow { flex:1; }
.fl-top form { margin:0; }
.fl-clock { font:600 18px var(--mono); color:var(--muted); }
.fl-who { font:700 18px var(--font-display); color:var(--navy); }
.fl-top .btn { font-size:16px; padding:10px 18px; }
.fl-main { max-width:860px; margin:0 auto; padding:18px 16px 60px; }
.fl-note { font-size:17px; padding:14px 16px; margin-bottom:16px; }
.fl-h { font:700 15px var(--font-body); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:22px 0 10px; }
.fl-head { margin-bottom:16px; }
.fl-head h1 { font:700 30px/1.15 var(--font-display); color:var(--navy); letter-spacing:-.02em; margin:6px 0 4px; }
.fl-head p { margin:0; color:var(--slate); overflow-wrap:anywhere; }
.fl-head a { font-weight:600; }
body.floor .btn { height:auto; min-height:50px; }
/* typing or scanning */
.fl-scan { display:flex; gap:10px; margin-bottom:16px; }
.fl-scan input { flex:1; min-width:0; font-size:19px; padding:14px 16px; border-radius:var(--radius); }
.fl-scan .btn { font-size:18px; padding:0 26px; }
.fl-sign { max-width:420px; margin:24px auto 0; text-align:center; }
.fl-sign h1 { font:700 32px var(--font-display); color:var(--navy); letter-spacing:-.02em; margin:0 0 4px; }
.fl-sign input { width:100%; font:700 34px var(--mono); text-align:center; letter-spacing:.2em; padding:14px; border-radius:var(--radius); margin:14px 0; }
.fl-pad { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.fl-pad button { font:700 28px var(--font-display); padding:18px 0; border-radius:var(--radius); border:1px solid var(--line-strong); background:var(--surface); color:var(--navy); cursor:pointer; touch-action:manipulation; }
.fl-pad button:active { background:var(--cta-soft); }
.fl-pad button.go { background:var(--cta); border-color:var(--cta); color:#fff; }
.fl-short { margin-top:18px; }
.fl-short .btn { font-size:16px; padding:10px 16px; margin:4px; }
/* a job, a batch, a material: what it is on the left, what to do with it on the right */
.fl-job { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--cta); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; color:inherit; text-decoration:none !important; }
.fl-job .what { flex:1; min-width:0; overflow-wrap:anywhere; font-size:18px; }
.fl-job .what b { font-family:var(--font-display); color:var(--navy); }
.fl-job .what small { display:block; color:var(--muted); font-size:14.5px; margin-top:2px; }
.fl-job form { margin:0; }
.fl-job .btn { font-size:17px; padding:14px 20px; white-space:nowrap; }
.fl-job.done { border-left-color:var(--line-strong); }
.fl-job.done .what b { color:var(--muted); }
.fl-job.paused { border-left-color:var(--amber); }
.fl-job.lvl1 { margin-left:18px; } .fl-job.lvl2 { margin-left:36px; } .fl-job.lvl3, .fl-job.lvl4, .fl-job.lvl5 { margin-left:54px; }
.fl-job.link:hover { border-color:var(--cta); }
.fl-n { font:700 24px var(--font-display); color:var(--navy); }
.fl-break { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.fl-break form { margin:0 0 0 auto; }
.fl-break .btn { font-size:17px; padding:12px 20px; }
/* the things you can do */
.fl-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:22px 0 14px; }
.fl-tiles.two { grid-template-columns:repeat(2, 1fr); }
.fl-tiles form { margin:0; display:contents; }
.fl-tile { display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:104px; padding:16px 18px; text-align:left; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--navy); text-decoration:none !important; cursor:pointer; font:inherit; touch-action:manipulation; width:100%; }
.fl-tile b { font:700 20px var(--font-display); }
.fl-tile span { color:var(--muted); font-size:14.5px; }
.fl-tile:hover, .fl-tile:active { border-color:var(--cta); background:var(--cta-soft); }
.fl-tile.go { background:var(--cta); border-color:var(--cta); color:#fff; }
.fl-tile.go span { color:rgba(255,255,255,.85); }
.fl-tile.wide { margin-bottom:8px; }
/* forms */
.fl-form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:16px; }
.fl-form label > span, .fl-pick > span { display:block; font-weight:700; color:var(--navy); margin-bottom:6px; }
.fl-form input:not([type=checkbox]):not([type=radio]), .fl-form select { width:100%; font-size:22px; padding:12px 14px; border-radius:var(--radius-sm); }
.fl-form label small { display:block; color:var(--muted); font-size:14.5px; margin-top:4px; }
.fl-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fl-check { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); cursor:pointer; }
.fl-check input { width:28px; height:28px; margin:0; flex:none; }
.fl-check span { margin:0 !important; }
.fl-check small { font-weight:400; }
.fl-pick label { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:6px; cursor:pointer; }
.fl-pick input { width:24px; height:24px; margin:0; flex:none; }
.fl-pick b { flex:1; min-width:0; overflow-wrap:anywhere; }
.fl-pick small { margin:0 !important; }
.fl-foot { display:flex; justify-content:flex-end; gap:12px; }
.fl-foot .btn { font-size:19px; padding:16px 28px; }
@media (max-width: 640px) {
  .fl-tiles, .fl-tiles.two { grid-template-columns:1fr 1fr; }
  .fl-top { padding:8px 12px; gap:10px; }
  .fl-top .co, .fl-clock { display:none; }
  .fl-job { flex-wrap:wrap; }
  .fl-job .btn { flex:1; text-align:center; justify-content:center; }
  .fl-two { grid-template-columns:1fr; }
  .fl-foot .btn { flex:1; justify-content:center; }
}

/* ---------- dashboard and reports ---------- */
.grid.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.grid.kpis.two-up { grid-template-columns:repeat(2, minmax(0, 1fr)); align-content:start; }
a.card.kpi { color:inherit; text-decoration:none !important; display:block; }
a.card.kpi:hover { border-color:var(--cta); }
.kpi.bad .val { color:var(--down); }
.charts { margin-top:14px; }
/* a chart: a caption that says what is drawn, then the marks; text stays in ink, only marks carry colour */
.chart { margin:0; padding:14px 16px 12px; min-width:0; }
.chart.wide { margin-top:14px; }
.chart figcaption { margin-bottom:10px; }
.chart figcaption b { display:block; font:700 15px var(--font-display); color:var(--navy); }
.chart figcaption span { display:block; font-size:12.5px; color:var(--muted); }
.cols { position:relative; display:flex; align-items:flex-end; gap:2px; height:132px; border-bottom:1px solid var(--line-strong); border-top:1px solid var(--line); }
.cols.tall { height:160px; }
.cols .top { position:absolute; left:0; top:2px; font:600 11px var(--mono); color:var(--muted); pointer-events:none; }
.col { flex:1; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; outline:0; cursor:default; }
.col i { display:block; width:100%; max-width:24px; min-height:1px; background:var(--chart); border-radius:4px 4px 0 0; }
.col.ahead i { opacity:.45; }
.col.late i { background:var(--down); }
.col:hover i, .col:focus i { filter:brightness(1.18); }
.col:focus-visible { box-shadow:inset 0 0 0 2px var(--cta); border-radius:4px; }
.col-labels { display:flex; gap:2px; margin-top:4px; }
.col-labels span { flex:1; min-width:0; text-align:center; font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; }
.col-labels span.now { color:var(--ink); font-weight:700; overflow:visible; }
.col-labels span.late { color:var(--ink); font-weight:600; }
.chart.wide .col-labels span { font-size:11.5px; }
/* rows: a name, a bar, its figure */
.rows { display:flex; flex-direction:column; gap:2px; }
.hrow { display:grid; grid-template-columns:minmax(0, 130px) minmax(0, 1fr) 62px minmax(0, 104px); gap:10px; align-items:center; padding:5px 0; color:inherit; text-decoration:none !important; border-radius:6px; }
.hrow:hover { background:var(--bg-soft); }
.hrow .name { font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hrow .track { display:block; height:14px; }
.hrow .track i { display:block; height:100%; min-width:2px; background:var(--chart); border-radius:0 4px 4px 0; }
.hrow .fig { font:600 13px var(--mono); text-align:right; }
.hrow .over { font-size:12px; color:var(--down); white-space:nowrap; }
.chart .foot { margin:10px 0 0; }
.tip { position:absolute; z-index:60; background:var(--navy); color:var(--surface); padding:6px 10px; border-radius:8px; font-size:12.5px; box-shadow:var(--shadow-lg); pointer-events:none; max-width:280px; }
.tip b { display:block; font:700 14px var(--font-display); }
.tip span { display:block; opacity:.85; }
/* reports */
td.rep-name { width:230px; white-space:nowrap; }
small.rep-mie { display:block; color:var(--muted); font-size:12.5px; margin-top:2px; }
.rep-filters { align-items:center; }
.rep-filters .picker { min-width:240px; flex:1; max-width:340px; }
.rep-filters input[type=search] { min-width:220px; flex:1; max-width:340px; }
.rep-filters label.inl { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.rep-note { margin:0 0 10px; }
table.report { font-size:13.5px; }
table.report th { white-space:normal; vertical-align:bottom; }
table.report th, table.report td { padding-left:9px; padding-right:9px; }
table.report td.wrap { overflow-wrap:anywhere; min-width:7ch; }
table.report td.bad { color:var(--down); font-weight:600; }
table.report tfoot td { font-weight:700; border-top:2px solid var(--line-strong); background:var(--bg-soft); }
@media (max-width: 1100px) {
  .grid.three { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  .hrow { grid-template-columns:minmax(0, 96px) minmax(0, 1fr) 54px; }
  .hrow .over { grid-column:1 / -1; }
  .chart.wide .col-labels span { font-size:10.5px; overflow:visible; }
  .chart.wide .col-labels span:nth-child(even):not(:last-child) { visibility:hidden; } /* every other week named: twelve do not fit a phone */
  td.rep-name { width:auto; white-space:normal; }
}
@media print {
  .col i, .hrow .track i { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}