:root{--navy:#0a2540;--navy-deep:#061a30;--navy-mid:#14365e;--navy-soft:#e8edf5;--navy-softer:#f3f6fb;--bg:#f6f6f3;--surface:#fff;--surface-2:#fbfaf6;--text:#0c1117;--text-soft:#4a5161;--text-muted:#858b97;--border:#e3e2dc;--border-mid:#d0cfc7;--border-strong:#b8b6ac;--warn:#a04a00;--warn-bg:#fbf0d9;--warn-bd:#e9c890;--good:#146c43;--good-bg:#e0f0e6;--good-bd:#a0cdb1;--danger:#8a1818;--danger-bg:#f7e0e0;--danger-bd:#e0a8a8;--info:#1d4a7a;--info-bg:#e3ecf6;--shadow-sm:0 1px 2px rgba(10,37,64,.05);--shadow-md:0 1px 3px rgba(10,37,64,.06),0 4px 12px rgba(10,37,64,.05);--shadow-lg:0 4px 14px rgba(10,37,64,.10),0 12px 32px rgba(10,37,64,.07);--radius:6px;--radius-lg:10px;--font-body:"Geist",system-ui,sans-serif;--font-mono:"Geist Mono",ui-monospace,monospace;--font-display:"Fraunces",Georgia,serif;--topbar-bg:var(--navy);--topbar-fg:#fff;--topbar-fg-dim:#c4d3e7;--topbar-accent:#93acce;--topbar-border:var(--navy-deep);--topbar-divider:#2a4365;--topbar-hover-bg:rgba(255,255,255,.08);--topbar-active-bg:rgba(255,255,255,.13);--topbar-field-bg:rgba(255,255,255,.10);--topbar-field-bd:rgba(255,255,255,.08);--topbar-pattern:none}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);font-size:14px;line-height:1.45;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none;padding:0}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum","zero"}
.tab{font-variant-numeric:tabular-nums}
#app{min-height:100vh;display:flex;flex-direction:column}
#app[hidden]{display:none}
.topbar{position:sticky;top:0;z-index:30;background:var(--topbar-bg);background-image:var(--topbar-pattern);color:var(--topbar-fg);border-bottom:1px solid var(--topbar-border);padding:0 18px;display:flex;align-items:center;gap:22px;height:56px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:22px;font-weight:600;font-style:italic;letter-spacing:-0.01em;color:var(--topbar-fg)}
.brand-sub{font-family:var(--font-body);font-style:normal;font-weight:500;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--topbar-accent);margin-left:4px;padding-left:12px;border-left:1px solid var(--topbar-divider)}
.brand-logo{height:32px;max-width:140px;display:block;border-radius:3px}
.nav{display:flex;gap:2px;flex:1;margin-left:8px}
.nav a{color:var(--topbar-fg-dim);padding:8px 12px;border-radius:6px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:6px;transition:background .12s,color .12s}
.nav a:hover{color:var(--topbar-fg);background:var(--topbar-hover-bg);text-decoration:none}
.nav a.active{color:var(--topbar-fg);background:var(--topbar-active-bg)}
/* The count pill. Was scoped to `.nav a .badge`, which silently excluded the one
   badge that is NOT inside an anchor - the roll-up on the .navgroup-btn <button>,
   the only badge visible while the dropdowns are closed. It matched no rule at all
   and rendered as a bare dim number. Scoped to .nav now, so anchors and the group
   button share it; per-theme `.badge` overrides still apply on top. */
.nav .badge{background:var(--warn);color:#fff;font-size:10.5px;padding:1px 6px;border-radius:999px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.35}
/* .badge-alert (unread job alerts) is declared down in the theme section, after the
   per-theme `.badge{color:#111}` rule it has to outrank - see "Badge legibility". */
/* === Grouped dropdown nav === */
.navgroup{position:relative;display:flex}
.navgroup-btn{display:flex;align-items:center;gap:6px;color:var(--topbar-fg-dim);padding:8px 12px;border-radius:6px;font-size:13.5px;font-weight:500;font-family:var(--font-body);transition:background .12s,color .12s;white-space:nowrap}
.navgroup-btn:hover{color:var(--topbar-fg);background:var(--topbar-hover-bg)}
.navgroup.open>.navgroup-btn,.navgroup.active>.navgroup-btn{color:var(--topbar-fg);background:var(--topbar-active-bg)}
.navgroup-caret{width:11px;height:11px;opacity:.65;transition:transform .12s;flex-shrink:0}
.navgroup.open .navgroup-caret{transform:rotate(180deg)}
.navdrop{position:absolute;top:calc(100% + 6px);left:0;min-width:212px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);padding:4px;z-index:60;display:flex;flex-direction:column;gap:1px}
.navdrop[hidden]{display:none}
/* #mainnav prefix keeps these winning over per-theme `.nav a` colour overrides (items sit on --surface, not the topbar) */
#mainnav .navdrop .navitem{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px;border-radius:6px;color:var(--text);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap;background:transparent}
#mainnav .navdrop .navitem:hover,#mainnav .navdrop .navitem:focus-visible{background:var(--navy-softer);color:var(--text);text-decoration:none;outline:none}
#mainnav .navdrop .navitem.on{background:var(--navy-soft);color:var(--text)}
/* inherit .badge bg/colour so per-theme badge overrides apply; only tweak size */
#mainnav .navdrop .navitem .badge{font-size:10px;flex-shrink:0}
@media (max-width:880px){.nav{overflow-x:auto;-webkit-overflow-scrolling:touch}.navdrop{position:fixed;top:52px;left:8px;right:8px;min-width:0}}
.topbar-right{display:flex;align-items:center;gap:6px}
/* === Search === */
/* Fixed width (reserves the expanded size permanently) so focusing/typing never reflows the flex topbar/nav. */
.searchwrap{position:relative;flex:0 0 auto;width:380px}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--topbar-field-bg);border:1px solid var(--topbar-field-bd);border-radius:6px;padding:0 10px;height:34px;color:var(--topbar-fg)}
.searchwrap.focus .searchbox{background:var(--topbar-field-bg);border-color:var(--topbar-fg-dim);filter:brightness(1.15)}
.searchbox svg{width:14px;height:14px;color:var(--topbar-accent);flex-shrink:0}
.searchbox .search-scope{background:transparent;border:0;border-right:1px solid var(--topbar-field-bd);outline:0;color:var(--topbar-fg);font-size:11px;font-family:var(--font-body);flex-shrink:0;width:66px;box-sizing:content-box;text-overflow:ellipsis;padding:0 6px 0 0;margin-right:-2px;cursor:pointer}
.searchbox .search-scope:focus{outline:1px solid var(--topbar-fg-dim);outline-offset:1px}
.searchbox .search-scope option{color:#111}
.searchbox input{background:transparent;border:0;outline:0;color:var(--topbar-fg);font-size:13.5px;flex:1;font-family:var(--font-body);min-width:0}
.searchbox input::placeholder{color:var(--topbar-accent)}
.searchbox kbd{background:var(--topbar-field-bg);border:1px solid var(--topbar-field-bd);border-bottom-width:2px;color:var(--topbar-fg-dim);font-size:10.5px;padding:1px 6px;border-radius:4px;font-family:var(--font-mono);line-height:1.4;flex-shrink:0}
.searchwrap.focus .searchbox kbd{display:none}
.searchresults{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;box-shadow:0 16px 48px rgba(15,30,55,.18),0 4px 12px rgba(15,30,55,.08);max-height:520px;overflow-y:auto;z-index:60;padding:4px 0}
.searchresults .group{padding:8px 14px 4px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}
.searchresults .item{display:block;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;color:var(--text);text-decoration:none}
.searchresults .item:hover,.searchresults .item.active{background:var(--navy-softer);border-left-color:var(--navy);text-decoration:none}
.searchresults .item .title{font-size:13.5px;font-weight:500;line-height:1.35;color:var(--text)}
.searchresults .item .meta{font-size:11.5px;color:var(--text-muted);margin-top:2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.searchresults .item .meta .mono{font-family:var(--font-mono)}
.searchresults .item .pill-line{font-size:10px;padding:1px 6px}
.searchresults mark{background:#ffe27a;color:inherit;padding:0 1px;border-radius:2px;font-weight:600}
.searchresults .empty{padding:18px 14px;color:var(--text-muted);font-size:13px;text-align:center}
.searchresults .hint{padding:6px 14px 8px;font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);margin-top:4px;display:flex;justify-content:space-between;gap:8px}
.searchresults .hint kbd{background:#eef2f7;border:1px solid var(--border);border-bottom-width:2px;font-size:10px;padding:1px 5px;border-radius:3px;font-family:var(--font-mono);color:var(--text-muted)}
@media (max-width:880px){.searchwrap{width:230px}.searchbox .search-scope{width:44px;font-size:10px}}
.iconbtn{height:34px;width:34px;display:flex;align-items:center;justify-content:center;color:var(--topbar-fg-dim);border-radius:6px;transition:background .12s,color .12s}
.iconbtn:hover{background:var(--topbar-hover-bg);color:var(--topbar-fg)}
.iconbtn svg{width:17px;height:17px}
.backup-pill{font-size:11.5px;padding:4px 10px 4px 8px;border-radius:999px;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;cursor:pointer;background:var(--topbar-field-bg);color:var(--topbar-fg-dim)}
.backup-pill:hover{background:var(--topbar-hover-bg)}
.backup-pill::before{content:"";width:6px;height:6px;border-radius:999px;background:#6dca8f}
.backup-pill.warn{background:rgba(245,180,80,.15);color:#f5d28a}
.backup-pill.warn::before{background:#f5b450}
.backup-pill.danger{background:rgba(240,130,130,.20);color:#f5b8b8}
.backup-pill.danger::before{background:#ec7878;animation:pulse 1.4s infinite ease-in-out}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
main{flex:1;padding:28px 32px 64px;max-width:1480px;width:100%;margin:0 auto}
.backup-banner{background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--radius-lg);padding:12px 16px;margin-bottom:24px;display:flex;align-items:center;gap:16px;color:var(--warn);font-weight:500}
.backup-banner.danger{background:var(--danger-bg);border-color:var(--danger-bd);color:var(--danger)}
.backup-banner svg{width:18px;height:18px;flex-shrink:0}
.backup-banner .text{flex:1;font-size:13.5px}
.backup-banner .actions{display:flex;gap:8px;flex-shrink:0}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.pagehead h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-0.018em}
.pagehead .crumb{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.pagehead .crumb a{color:var(--text-soft)}
.pagehead .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:6px;background:var(--surface);color:var(--text);font-size:13px;font-weight:500;border:1px solid var(--border-mid);box-shadow:var(--shadow-sm);transition:background .12s,border-color .12s;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 1px 2px rgba(10,37,64,.18)}
.btn-primary:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn-ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--navy-soft);border-color:transparent}
.btn-danger{color:var(--danger);border-color:var(--danger-bd);background:var(--danger-bg)}
.btn-danger:hover{background:#f3d0d0}
.btn-sm{padding:4px 10px;font-size:12px;gap:5px}
.btn-sm svg{width:12px;height:12px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=number],select,textarea{background:var(--surface);border:1px solid var(--border-mid);border-radius:6px;padding:7px 10px;font-size:13.5px;color:var(--text);transition:border-color .12s,box-shadow .12s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,37,64,.10)}
textarea{resize:vertical;min-height:70px;font-family:inherit}
label.field{display:block;margin-bottom:14px}
label.field>span{display:block;font-size:12px;font-weight:500;color:var(--text-soft);margin-bottom:5px}
label.field>span.req::after{content:" *";color:var(--danger)}
.help-text{font-size:12px;color:var(--text-muted);margin-top:4px;line-height:1.5}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-section{border-top:1px solid var(--border);margin-top:18px;padding-top:14px}
.field-section:first-of-type{border-top:none;margin-top:0;padding-top:0}
.field-section h4{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);font-weight:600;margin:0 0 12px 0}
/* Opt-in tinted section blocks (used by the order-line form) - reads as separated cards with a shaded header bar. Theme-safe: driven off existing bg variables via --fs-accent. */
.field-section.fs-tint{border-top:none;background:var(--fs-accent,var(--surface-2));border:1px solid var(--border);border-radius:var(--radius);padding:0 14px 12px;margin-top:12px;overflow:hidden}
.field-section.fs-tint:first-of-type{margin-top:0}
.field-section.fs-tint>h4{margin:0 -14px 12px;padding:8px 14px;background:rgba(0,0,0,0.06);border-bottom:1px solid rgba(0,0,0,.10);border-radius:0;color:var(--text-soft)}
/* At-a-glance serial indicator in the job lines table */
.serial-ind{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:12px;line-height:1;border:1px solid transparent;background:transparent;color:var(--text-muted);cursor:pointer;opacity:.45;padding:0}
.serial-ind:hover{opacity:1;border-color:var(--border-mid);background:var(--surface-2)}
.serial-ind.has{opacity:1;color:var(--good);background:var(--good-bg);border-color:var(--good-bd);font-weight:700}
/* Shipments panel inside line modal */
.shipments-panel .ship-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.shipments-panel .ship-empty{padding:18px;background:var(--surface-soft);border:1px dashed var(--border);border-radius:6px;text-align:center;color:var(--text-muted);font-size:13px}
.shipments-panel .ship-table{display:flex;flex-direction:column;gap:4px;font-size:13px}
.shipments-panel .ship-row{display:grid;grid-template-columns:60px 1fr 110px 130px 80px 130px 36px;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#fff}
.shipments-panel .ship-row.received{background:#f0faf4;border-color:#cfead6}
.shipments-panel .ship-row.overdue{background:#fff4ec;border-color:#ffd1b3}
.shipments-panel .ship-row.ship-hd{background:transparent;border:none;font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:600;padding:0 8px}
.shipments-panel .ship-row input[type=text],.shipments-panel .ship-row input[type=number],.shipments-panel .ship-row input[type=date],.shipments-panel .ship-row select{width:100%;padding:5px 8px;font-size:13px;font-family:var(--font-body);border:1px solid var(--border);border-radius:4px;background:#fff;font-family:var(--font-mono)}
.shipments-panel .ship-row select{font-family:var(--font-body)}
.shipments-panel .ship-row .ship-del{padding:4px;color:var(--text-muted);width:28px;height:28px}
.etasplit-table{display:flex;flex-direction:column;gap:4px;font-size:13px}
.etasplit-row{display:grid;grid-template-columns:90px 1fr 36px;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;border:1px solid var(--border);background:#fff}
.etasplit-row.es-hd{background:transparent;border:none;font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:600;padding:0 8px}
.etasplit-row input{width:100%;padding:5px 8px;font-size:13px;border:1px solid var(--border);border-radius:4px;background:#fff;font-family:var(--font-mono)}
.etasplit-summary{font-size:12px;margin-top:8px}
.shipments-panel .ship-row .ship-del:hover{color:var(--danger);background:#fde7ea}
.shipments-panel .ship-row .center{text-align:center;display:flex;justify-content:center}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
/* Dashboard table */
.dashtable tbody tr{cursor:pointer;transition:background .1s}
.dashtable tbody tr:hover{background:var(--navy-softer)}
.dashtable tbody tr.selected{background:#eaf2ff;border-left:3px solid var(--navy)}
.dashtable tbody tr.selected td:first-child{padding-left:7px}
/* Jobs with open alerts. Deliberately NOT a full-row colour wash - that would fight
   the status pills the row already carries. An inset shadow rather than border-left
   so it neither shifts the cells nor collides with .selected's real border-left. */
.dashtable tbody tr.has-alerts{box-shadow:inset 3px 0 0 var(--danger)}
.job-alert-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--danger);margin-left:7px;vertical-align:middle;flex-shrink:0}
.dashtable .jobname-cell{display:flex;align-items:center;gap:0;max-width:340px}
.dashtable .jobname-cell .jobname-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.dashtable .jobname-cell .job-type-tag{flex-shrink:0;margin-left:8px}
.dashtable th{position:sticky;top:0;z-index:1;background:var(--surface)}
.progmini{display:inline-flex;gap:3px}
.progmini .pdot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;font-size:9.5px;font-weight:700;background:#eef2f7;color:#a5b3c4;font-family:var(--font-mono)}
.progmini .pdot.on{background:#1f5630;color:#fff}
.ready-pill{background:#e8f6ec;color:#1f5630;padding:1px 7px;border-radius:4px;font-size:11px;font-weight:600;font-family:var(--font-mono)}
/* Job type tag - bold, distinct per type */
.job-type-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:2px 7px;border-radius:3px;margin-left:8px;vertical-align:middle;line-height:1.4;border:1px solid transparent}
.job-type-tag.jt-dropship{background:#e6f0ff;color:#1f4380;border-color:#bcd1ed}
.job-type-tag.jt-supplyonly{background:#fff1d8;color:#7a4a08;border-color:#f0d49a}
.job-type-tag.jt-install{background:#ece5f9;color:#3a2370;border-color:#cab8ec}
.job-type-tag.jt-dropshipinstall{background:#e0f2eb;color:#1a5a3a;border-color:#aed5c0}
.job-type-tag.jt-other{background:#eef2f7;color:var(--text);border-color:var(--border)}
/* Stock location chip on line rows */
.stock-loc-chip{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;background:#fdf3e1;color:#7a4a08;border:1px solid #f0d49a;margin-left:6px;letter-spacing:0.02em;font-family:var(--font-body);text-transform:uppercase}
.stock-loc-chip.client-stock{background:var(--info-bg);color:var(--info);border-color:#b0cceb}
.labour-chip{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;background:#ece5f9;color:#3a2370;border:1px solid #cab8ec;margin-left:6px;letter-spacing:0.04em;font-family:var(--font-body);text-transform:uppercase}
.line-tag-chip{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;background:#e3f6f3;color:#0f6656;border:1px solid #b6e3da;margin-left:6px;letter-spacing:0.04em;font-family:var(--font-body);text-transform:uppercase}
/* QTY cell: main number + breakdown of received/in-transit/owing */
.qty-cell{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.2}
.qty-cell .qty-main{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13.5px}
.qty-cell .qty-breakdown{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.qty-cell .qty-pip{display:inline-block;font-size:9.5px;font-weight:600;padding:0 5px;border-radius:2px;letter-spacing:0.02em;font-family:var(--font-body);white-space:nowrap}
.qty-cell .qty-pip.qty-rec{background:#e8f6ec;color:#1f5630;border:1px solid #cfead6}
.qty-cell .qty-pip.qty-ship{background:#eaf2ff;color:#1f4380;border:1px solid #cfdef7}
.qty-cell .qty-pip.qty-out{background:#fff1d8;color:#7a4a08;border:1px solid #f0d49a}
/* Stock view buckets */
.stock-bucket{margin-bottom:22px}
.stock-bucket-head{margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
.stock-bucket-head h3{margin:0;font-size:14px;font-weight:600;color:var(--navy);letter-spacing:-0.005em;display:flex;align-items:baseline;gap:8px}
.stock-loc-select{padding:4px 8px;font-size:12.5px;font-family:var(--font-body);border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text);cursor:pointer;max-width:160px}
.stock-loc-select:hover{border-color:var(--navy-mid)}
.stock-loc-select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 2px rgba(31,67,128,.12)}
/* Reports landing grid */
.reports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.report-tile{display:block;padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:var(--text);transition:border-color .12s,box-shadow .12s,transform .12s;position:relative}
.report-tile:hover{border-color:var(--navy);box-shadow:0 4px 14px rgba(15,30,55,.06);text-decoration:none;transform:translateY(-1px)}
.report-tile-head{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:6px;letter-spacing:-0.005em}
.report-tile-desc{font-size:12.5px;color:var(--text-muted);line-height:1.45;margin-bottom:14px}
.report-tile-cta{font-size:12px;color:var(--navy);font-weight:500}
/* Report common styles */
.report-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.rs-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.rs-tile.rs-ready{background:#e8f6ec;border-color:#cfead6}
.rs-tile.rs-mostly{background:#fefce6;border-color:#f0e6a3}
.rs-tile.rs-partial{background:#fff1d8;border-color:#f0d49a}
.rs-tile.rs-notyet{background:#fde7ea;border-color:#f0bcc4}
.rs-tile.rs-warn .rs-num{color:var(--danger)}
.rs-num{font-size:22px;font-weight:600;font-family:var(--font-mono);color:var(--text);letter-spacing:-0.01em;line-height:1.1}
.rs-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;font-weight:500;margin-top:4px}
.rs-tile.rs-ready .rs-num,.rs-tile.rs-ready .rs-lbl{color:#1f5630}
.rs-tile.rs-notyet .rs-num,.rs-tile.rs-notyet .rs-lbl{color:#7a1f1f}
/* Cash-Out Budget report */
.budget-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:900px){.budget-tiles{grid-template-columns:1fr}}
.budget-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}
.budget-tile .bt-label{font-size:13px;color:var(--navy);font-weight:600;letter-spacing:-0.005em}
.budget-tile .bt-sub{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-top:2px;margin-bottom:8px}
.budget-tile .bt-total{font-size:22px;font-weight:600;font-family:var(--font-mono);letter-spacing:-0.01em;color:var(--text)}
.budget-tile .bt-count{font-size:11px;color:var(--text-muted);margin-top:3px}
.budget-summary-strip{display:flex;flex-wrap:wrap;gap:18px;padding:10px 14px;background:var(--navy-softer);border-radius:var(--radius);font-size:12.5px;margin-bottom:14px}
.budget-summary-strip strong{color:var(--navy)}
.budget-nav{display:flex;gap:8px;margin-bottom:18px}
.budget-month-section{margin-bottom:24px;padding:14px 0;border-top:2px solid var(--border)}
.budget-month-section:first-of-type{border-top:none;padding-top:0}
.bms-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;font-size:17px;font-weight:600;color:var(--navy);letter-spacing:-0.01em}
.bms-head .bms-total{margin-left:auto;font-family:var(--font-mono);font-size:16px;color:var(--text)}
.budget-supplier-block{margin:0 0 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px}
.bsb-head{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:-0.005em}
.bsb-head .bsb-total{margin-left:auto;font-family:var(--font-mono);color:var(--text-soft)}
.budget-po-block{margin:0 0 8px;padding:6px 0 0 12px;border-left:2px solid var(--navy-softer)}
.budget-po-block:last-child{margin-bottom:0}
.bpb-head{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;font-size:12.5px;color:var(--text)}
.bpb-head .bpb-po{font-weight:600;color:var(--navy)}
.bpb-head .bpb-total{margin-left:auto;font-family:var(--font-mono);color:var(--text);font-weight:600}
.budget-due-input{font-family:var(--font-mono);font-size:12px;padding:3px 5px;border:1px solid var(--border);border-radius:4px;background:var(--surface)}
.budget-due-input:hover{border-color:var(--navy-mid)}
.src-chip{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;font-size:9.5px;text-transform:uppercase;letter-spacing:0.04em;font-weight:600;vertical-align:1px}
.src-chip-manual{background:#e8e2f0;color:#4a2d6e}
.budget-collapse{margin-top:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.budget-collapse summary{cursor:pointer;font-size:13px;color:var(--text)}
.budget-collapse summary:hover{color:var(--navy)}
.budget-collapse[open] summary{margin-bottom:10px}
.rp-tiles{display:flex !important;gap:8pt;margin-bottom:10pt}
.rp-tiles .budget-tile{border:1px solid #ddd;padding:6pt 8pt;flex:1}
.rp-tiles .bt-total{font-size:13pt}
/* Financial Snapshot - headline income/liability/net tiles */
.fin-headline{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:900px){.fin-headline{grid-template-columns:1fr}}
.fin-tile{padding:18px 20px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);position:relative}
.fin-tile.fin-income{background:#e8f6ec;border-color:#a8d8b8}
.fin-tile.fin-liability{background:#fff1d8;border-color:#dabb80}
.fin-tile.fin-net.fin-positive{background:#dbeaf7;border-color:#9cc1e0}
.fin-tile.fin-net.fin-negative{background:#fde7ea;border-color:#e0a0a8}
.fin-tile-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:6px}
.fin-tile-val{font-size:26px;font-weight:600;font-family:var(--font-mono);letter-spacing:-0.01em;line-height:1.1;font-variant-numeric:tabular-nums}
.fin-tile-sub{font-size:11.5px;color:var(--text-muted);margin-top:4px;font-weight:500}
.fin-tile.fin-income .fin-tile-val{color:#1f5630}
.fin-tile.fin-liability .fin-tile-val{color:#7a4308}
.fin-tile.fin-net.fin-positive .fin-tile-val{color:#27496d}
.fin-tile.fin-net.fin-negative .fin-tile-val{color:#7a1f1f}
.text-danger{color:var(--danger)}
/* Cashflow forecast buckets */
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px}
.cf-bucket{padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);border-left:3px solid var(--navy)}
.cf-bucket.cf-nodate{border-left-color:#bbb;background:var(--surface-2)}
.cf-bucket-head{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:6px}
.cf-bucket-val{font-size:18px;font-weight:600;font-family:var(--font-mono);color:var(--navy);letter-spacing:-0.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.cf-bucket-meta{font-size:11px;color:var(--text-muted);margin-top:3px}
.cf-bucket.cf-nodate .cf-bucket-val{color:var(--text)}
.report-section{margin-bottom:22px}
.report-section-head{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--navy);letter-spacing:-0.005em;display:flex;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
.readiness-cell{display:flex;flex-direction:column;gap:3px;align-items:stretch;min-width:140px}
.readiness-bar{height:6px;background:#eef2f7;border-radius:3px;overflow:hidden;position:relative}
.readiness-fill{height:100%;transition:width .2s}
.readiness-fill.rd-ready{background:#1f5630}
.readiness-fill.rd-mostly{background:#a78d2a}
.readiness-fill.rd-partial{background:#a05a1d}
.readiness-fill.rd-notyet{background:#a23737}
.readiness-fill.rd-empty{background:#aaa}
.readiness-label{font-size:11px;font-weight:600;letter-spacing:0.02em}
.readiness-label.rd-ready{color:#1f5630}
.readiness-label.rd-mostly{color:#7a6212}
.readiness-label.rd-partial{color:#7a4308}
.readiness-label.rd-notyet{color:#7a1f1f}
.readiness-label.rd-empty{color:var(--text-muted)}
.blocker-row{font-size:11.5px;line-height:1.6;color:var(--text-muted)}
/* Report print styles */
.printdoc .report-print-body{}
.printdoc .rp-title{font-size:14pt;color:#0a2540;margin:0 0 10pt 0;font-weight:600;border-bottom:1.5px solid #0a2540;padding-bottom:4pt}
.printdoc .rp-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6pt;margin:8pt 0 14pt;page-break-inside:avoid}
.printdoc .rp-summary .rs-tile{padding:6pt 8pt;border:1px solid #ccc;border-radius:3pt;background:#fafafa}
.printdoc .rp-summary .rs-tile.rs-ready{background:#e8f6ec;border-color:#a8d8b8}
.printdoc .rp-summary .rs-tile.rs-mostly{background:#fefce6;border-color:#d8d090}
.printdoc .rp-summary .rs-tile.rs-partial{background:#fff1d8;border-color:#dabb80}
.printdoc .rp-summary .rs-tile.rs-notyet{background:#fde7ea;border-color:#e0a0a8}
.printdoc .rp-summary .rs-tile.rs-warn{background:#ffe5e0;border-color:#e0a8a0}
.printdoc .rp-summary .rs-num{font-size:13pt;font-weight:600;color:#0a2540}
.printdoc .rp-summary .rs-lbl{font-size:8pt;color:#666;text-transform:uppercase;letter-spacing:0.04em;margin-top:2pt}
.dash-sort{padding:6px 28px 6px 12px;font-size:13px;border:1px solid var(--border);border-radius:6px;background:#fff;font-family:var(--font-body);color:var(--text);cursor:pointer}
.dash-hint{font-size:11.5px;margin-top:8px;text-align:right;padding:0 4px}
.dash-hint kbd{background:#eef2f7;border:1px solid var(--border);border-bottom-width:2px;font-size:10px;padding:1px 5px;border-radius:3px;font-family:var(--font-mono);color:var(--text-muted)}
/* Shipments view */
.shipments-table tbody tr.shiprow-overdue{background:#fff7f0}
.shipments-table tbody tr.shiprow-received{opacity:0.65}
.shipments-table tbody tr:hover{background:var(--navy-softer)}
.shipments-table tbody tr.shiprow-overdue:hover{background:#ffeedd}
.shipments-table .ship-inline-input{width:100%;padding:4px 6px;font-size:12px;border:1px solid transparent;background:transparent;border-radius:3px;font-family:var(--font-mono)}
.shipments-table .ship-inline-input:hover{border-color:var(--border);background:#fff}
.shipments-table .ship-inline-input:focus{border-color:var(--navy-mid);background:#fff;outline:none;box-shadow:0 0 0 2px rgba(31,67,128,.12)}
.shipments-table select.ship-inline-input{font-family:var(--font-body);font-size:12.5px}
.shipments-table .iconbtn{padding:5px;width:28px;height:28px}
.shipments-table .iconbtn svg{width:14px;height:14px}
.shipments-table .iconbtn:hover{background:var(--navy-softer);color:var(--navy)}
.shipments-table .ship-del-inline:hover{background:#fde7ea;color:var(--danger)}
/* Inbound view: line group headers + batch rows */
.shipments-table tr.ship-group td{background:var(--surface-soft);border-top:2px solid var(--border-strong);padding:9px 10px}
.shipments-table tr.ship-group:first-child td{border-top:none}
.shipgroup-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;min-height:24px}
.shipgroup-desc{font-size:13px;font-weight:600}
.shipgroup-pips{display:flex;gap:4px;margin-left:auto;align-items:center}
.shipgroup-pips .qty-pip{display:inline-block;font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:2px;letter-spacing:0.02em;white-space:nowrap;border:1px solid var(--border);background:#fff;color:var(--text-muted)}
.shipgroup-pips .qty-pip.qty-rec{background:#e8f6ec;color:#1f5630;border-color:#cfead6}
.shipgroup-pips .qty-pip.qty-ship{background:#eaf2ff;color:#1f4380;border-color:#cfdef7}
.shipgroup-pips .qty-pip.qty-out{background:#fff1d8;color:#7a4a08;border-color:#f0d49a}
.shipgroup-pips .qty-pip.qty-noeta{background:#fdeef0;color:#8a2330;border-color:#f3cdd3}
.weekmore.week-noeta{color:#8a2330;font-weight:600}
/* PO view */
.po-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:14px;overflow:hidden}
.po-group-head{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--navy-softer);border-bottom:1px solid var(--border);flex-wrap:wrap}
.po-group-head .po-num{font-family:var(--font-mono);font-weight:600;font-size:13.5px;color:var(--navy)}
.po-group-head .po-meta{font-size:12px;color:var(--text-soft);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.po-group-head .po-meta b{color:var(--text);font-weight:500}
.po-group-head .po-actions{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.po-group .po-bulkform{padding:10px 14px;background:#f8f7f1;border-bottom:1px solid var(--border);display:none;gap:8px;align-items:center;flex-wrap:wrap}
.po-group .po-bulkform.open{display:flex}
.po-group .po-bulkform label{font-size:11px;color:var(--text-soft);font-weight:500}
.po-group .po-bulkform input,.po-group .po-bulkform select{width:auto;min-width:140px}
.po-table{width:100%;border-collapse:collapse;font-size:13px}
.po-table th{padding:8px 10px;text-align:left;background:transparent;font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:600;border-bottom:1px solid var(--border)}
.po-table th.right{text-align:right}
.po-table th.center{text-align:center}
.po-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.po-table tr:last-child td{border-bottom:none}
.po-table tbody tr:hover{background:var(--navy-softer)}
.po-table tbody tr.po-row-overdue{background:#fff7f0}
.po-table tbody tr.po-row-overdue:hover{background:#ffeedd}
.po-table .po-inline-input{width:100%;padding:4px 6px;font-size:12px;border:1px solid transparent;background:transparent;border-radius:3px;font-family:var(--font-mono)}
.po-table .po-inline-input:hover{border-color:var(--border);background:#fff}
.po-table .po-inline-input:focus{border-color:var(--navy-mid);background:#fff;outline:none;box-shadow:0 0 0 2px rgba(31,67,128,.12)}
.po-table select.po-inline-input{font-family:var(--font-body);font-size:12.5px}
.po-table .po-shipped-readonly{font-size:11.5px;color:var(--text-soft);display:flex;align-items:center;gap:6px}
.po-table .po-shipped-readonly .mono{font-family:var(--font-mono)}
.po-table .iconbtn{padding:5px;width:28px;height:28px}
.po-table .iconbtn svg{width:14px;height:14px}
.po-table .iconbtn:hover{background:var(--surface-2);color:var(--navy)}
.po-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.po-toolbar .muted{font-size:12.5px}
.po-toorder-jobgroup{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:14px;overflow:hidden}
.po-toorder-jobgroup .po-group-head{background:#fbf7e8;border-bottom-color:#ead9a8}
.po-toorder-jobgroup .po-group-head .po-num{color:var(--warn)}
/* Job detail progress strip */
.job-progress-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.jp{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 12px;overflow:hidden}
.jp-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#eaf2ff 0%,#dde9ff 100%);transition:width .25s}
.jp.done .jp-fill{background:linear-gradient(180deg,#daf3e0 0%,#c5e9d0 100%)}
.jp-label{position:relative;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted)}
.jp-val{position:relative;font-size:18px;font-weight:600;font-family:var(--font-mono);color:var(--text);margin-top:2px}
.jp.done .jp-val{color:var(--good)}
.line-filterbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.line-filterbar .filters{margin-bottom:0}
.line-filterbar .line-suppfilter{flex-shrink:0}
/* Rooms: one job's PO divided between rooms (js/25-views-jobs.js, "Rooms") */
.room-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.room-bar .filters{margin-bottom:0;align-items:center}
.room-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:-2px 0 12px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);font-size:13px}
.room-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.room-chip{font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-soft);white-space:nowrap}
.room-chip b{font-weight:600;color:var(--text)}
.room-chip.on{background:var(--info-bg);border-color:var(--info);color:var(--info)}
.room-chip.on b{color:var(--info)}
.room-chip.un{border-style:dashed}
/* The job page's line table, one card per room (jobLinesTableHTML): a header strip over
   the room's own table. The table's own frame is dropped inside the card, so each room
   reads as one bubble with clear space between rooms. */
.room-cards{display:flex;flex-direction:column;gap:18px}
.room-card{background:var(--surface);border:1px solid var(--border-mid);border-left:4px solid var(--info);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.room-card-none{border-left-color:var(--border-strong);border-style:dashed;border-left-style:solid}
.room-card-head{display:flex;align-items:baseline;gap:10px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.room-card-name{font-weight:700;font-size:14px;color:var(--text)}
.room-card .tablewrap{border:0;border-radius:0;box-shadow:none}
.room-card-empty{padding:12px 14px;font-size:12.5px;font-style:italic}
.room-delivered{margin-left:auto;font-size:12px;font-weight:600;color:var(--info);white-space:nowrap}
.room-card-done{border-left-color:var(--good)}
.room-card-done .room-card-head{background:var(--good-bg)}
.room-card-done .room-delivered{color:var(--good)}
.room-qty{font-size:10.5px;color:var(--info);margin-top:2px;white-space:nowrap;font-family:var(--font-body)}
.room-name{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:13px}
@media (max-width:880px){.job-progress-strip{grid-template-columns:repeat(2,1fr)}}
/* Dashboard week panel */
.weekpanel{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin-bottom:20px}
.weekpanel-head{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.weekpanel-head h3{margin:0;font-size:13.5px;font-weight:600;letter-spacing:-0.005em;color:var(--navy)}
.weekpanel-head .muted{font-size:12px}
.weekpanel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:6px}
.weekitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--text);background:#fafbfd;border:1px solid #eef2f7;transition:background .12s,border-color .12s}
.weekitem:hover{background:#fff;border-color:var(--navy-soft);text-decoration:none}
.weekitem.wp-overdue{background:#fff4ec;border-color:#ffd1b3}
.weekitem.wp-overdue:hover{background:#ffe9d5}
.weekitem.wp-today{background:#fff8d6;border-color:#ffe994}
.weekitem .wi-day{flex-shrink:0;font-size:11px;font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);min-width:60px}
.weekitem.wp-overdue .wi-day{color:var(--danger)}
.weekitem.wp-today .wi-day{color:#a7740a}
.weekitem .wi-body{flex:1;min-width:0}
.weekitem .wi-desc{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.weekitem .wi-meta{font-size:11px;line-height:1.3;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weekitem .wi-eta{font-size:11.5px;color:var(--text-muted);flex-shrink:0}
.weekitem .wi-kind{display:inline-block;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;background:#eef2f7;color:var(--text-muted);padding:1px 6px;border-radius:3px;vertical-align:middle;margin-left:4px}
.weekitem.wp-overdue .wi-kind{background:#ffd7be;color:#7a3e00}
.weekmore{display:flex;align-items:center;justify-content:center;padding:8px;font-size:12px;color:var(--text-muted);text-decoration:none;border:1px dashed var(--border);border-radius:6px}
.weekmore:hover{color:var(--navy);text-decoration:none;border-color:var(--navy-soft)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px 16px;display:flex;flex-direction:column;position:relative;transition:border-color .12s,transform .12s,box-shadow .12s;cursor:pointer;text-align:left;width:100%}
.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card .cardhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.card .jobname{font-size:16px;font-weight:600;letter-spacing:-0.01em;margin:0 0 4px 0;line-height:1.3}
.card .jobnum{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:0.04em}
.card .client{margin-top:10px;font-size:13px;color:var(--text-soft)}
.card .client .label{color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:1px}
.card .po{margin-top:6px;font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.card .moneyrow{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border-mid)}
.card .money{font-family:var(--font-mono);font-size:22px;font-weight:500;letter-spacing:-0.01em}
.card .gp{font-family:var(--font-mono);font-size:13px;color:var(--text-soft)}
.progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.prog{background:var(--navy-softer);border:1px solid var(--border);border-radius:5px;padding:6px 8px;position:relative;overflow:hidden}
.prog .fill{position:absolute;inset:0;background:var(--navy-soft);width:0%;transition:width .4s ease}
.prog .lbl,.prog .val{position:relative}
.prog .lbl{font-size:9.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:500}
.prog .val{font-family:var(--font-mono);font-size:12.5px;font-weight:500;margin-top:1px}
.prog.done .fill{background:var(--good-bg)}
.prog.done .val{color:var(--good)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:5px;height:5px;border-radius:999px;background:currentColor}
.pill-active{background:var(--info-bg);color:var(--info);border-color:#c2d4e8}
.pill-hold{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.pill-complete{background:var(--good-bg);color:var(--good);border-color:var(--good-bd)}
.pill-cancel{background:#f0f0ec;color:var(--text-muted);border-color:var(--border-mid)}
.pill-overdue{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.pill-line{font-size:11px;padding:2px 7px;border-radius:4px;font-weight:500;font-variant-numeric:tabular-nums;display:inline-block}
.pill-line.s-toorder{background:#f0f0ec;color:var(--text-muted)}
.pill-line.s-onorder{background:var(--info-bg);color:var(--info)}
.pill-line.s-confirmed{background:var(--info-bg);color:var(--info)}
.pill-line.s-shipped{background:#ddebf3;color:#1a5279}
.pill-line.s-partial{background:var(--warn-bg);color:var(--warn)}
.pill-line.s-received{background:var(--good-bg);color:var(--good)}
.pill-line.s-installed{background:#d4e7df;color:#0d4a30}
.pill-line.s-hold{background:var(--warn-bg);color:var(--warn)}
.pill-line.s-cancel{background:#f0f0ec;color:var(--text-muted);text-decoration:line-through}
.pill-line.s-stocked{background:#e8e2f0;color:#4a2d6e}
.pill-line.s-backorder{background:#fde3e3;color:#a02828}
.pill-line.s-labour{background:#f0ebf9;color:#5a3f8c}
.history-list{display:flex;flex-direction:column;gap:0;max-height:60vh;overflow-y:auto}
.hist-row{display:flex;gap:16px;padding:10px 4px;border-bottom:1px solid var(--border);font-size:13px}
.hist-row:last-child{border-bottom:none}
.hist-when{flex:0 0 140px;color:var(--text-muted);font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:1px}
.hist-body{flex:1;min-width:0}
.hist-label{font-weight:500;color:var(--text)}
.hist-detail{font-size:12.5px;color:var(--text-soft);margin-top:2px;font-variant-numeric:tabular-nums}
.fixup-line{padding:14px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;background:var(--surface)}
.fixup-line .fl-head{font-weight:500;font-size:13.5px;margin-bottom:6px}
.fixup-line .fl-issue{font-size:12.5px;color:var(--text-soft);margin-bottom:8px}
.fixup-line .fl-acts{display:flex;gap:8px}
.tablewrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.tablescroll{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data thead th{text-align:left;font-weight:500;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);border-bottom:1px solid var(--border);padding:10px 14px;white-space:nowrap}
table.data tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--surface-2)}
table.data .right{text-align:right}
table.data .center{text-align:center}
table.data tr.selected{background:var(--navy-softer)}
table.data .total td{background:var(--surface-2);font-weight:600;border-top:1px solid var(--border-strong)}
.empty{padding:80px 24px;text-align:center;color:var(--text-muted)}
.empty .title{font-size:16px;color:var(--text-soft);font-weight:500;margin-bottom:4px}
.empty .sub{font-size:13px}
.empty .actions{margin-top:20px;display:flex;gap:10px;justify-content:center}
.jobdetail{display:grid;grid-template-columns:320px 1fr;gap:28px}
@media(max-width:1100px){.jobdetail{grid-template-columns:1fr}}
.metabox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px}
.metabox h3{margin:0 0 12px 0;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);font-weight:500;display:flex;justify-content:space-between;align-items:center}
.metabox h3 .edit-mini{font-size:11px;color:var(--navy-mid);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;padding:2px 6px;border-radius:4px}
.metabox h3 .edit-mini:hover{background:var(--navy-soft)}
.meta-row{padding:8px 0;border-bottom:1px solid var(--border)}
.meta-row:last-child{border-bottom:none}
.meta-row .label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px}
.meta-row .val{font-size:13.5px;word-break:break-word}
.meta-row .val.mono{font-size:12.5px}
.calwrap{display:grid;grid-template-columns:1fr 320px;gap:24px}
@media(max-width:1100px){.calwrap{grid-template-columns:1fr}}
.calendar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.cal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.cal-head h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.01em}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow{font-size:10.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.cal-day{border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-height:92px;padding:6px 8px 8px;display:flex;flex-direction:column;cursor:pointer;transition:background .12s;position:relative}
.cal-day:nth-child(7n+7){border-right:none}
.cal-day:hover{background:var(--surface-2)}
.cal-day.dim{background:var(--surface-2);color:var(--text-muted)}
.cal-day.today .daynum{background:var(--navy);color:#fff;border-radius:999px}
.cal-day.selected{background:var(--navy-soft)}
.cal-day .daynum{font-family:var(--font-mono);font-size:12.5px;font-weight:500;width:22px;height:22px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.cal-day .items{display:flex;flex-direction:column;gap:2px}
.cal-day .calitem{display:flex;align-items:center;gap:4px;font-size:10.5px;padding:1px 5px 1px 4px;border-radius:3px;background:var(--navy-soft);color:var(--navy-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;border-left-width:2px}
.cal-day .calitem-dot{width:5px;height:5px;border-radius:999px;flex-shrink:0;background:currentColor}
.cal-day .more{font-size:10px;color:var(--text-muted);margin-top:1px}
/* Calendar filter chips */
.cal-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;align-items:center}
.cal-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font-size:12px;color:var(--text);cursor:pointer;transition:background .12s,border-color .12s,opacity .12s;line-height:1.2}
.cal-chip .cal-chip-dot{width:8px;height:8px;border-radius:999px;background:var(--c)}
.cal-chip .cal-chip-count{font-size:10.5px;font-weight:600;color:var(--text-muted);background:var(--surface-2);padding:0 6px;border-radius:8px;font-family:var(--font-mono);min-width:18px;text-align:center}
.cal-chip:hover{border-color:var(--border-strong)}
.cal-chip.on{background:var(--bg);border-color:var(--bd);color:var(--c)}
.cal-chip.on .cal-chip-count{background:rgba(255,255,255,.6);color:var(--c)}
.cal-chip.off{opacity:.45}
.cal-chip.off .cal-chip-dot{background:#bbb}
.daypanel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;height:max-content}
.daypanel h3{margin:0 0 8px 0;font-size:14px;font-weight:600}
.daypanel .panel-group{margin-bottom:14px}
.daypanel .panel-group:last-child{margin-bottom:0}
.daypanel .panel-group-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.daypanel .panel-group-head .muted{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-muted);margin-left:auto}
.daypanel .panel-item{padding:8px 0;border-bottom:1px solid var(--border)}
.daypanel .panel-group .panel-item:last-child{border-bottom:none}
.daypanel .panel-item .top{display:flex;justify-content:space-between;gap:8px}
.daypanel .panel-item .name{font-size:13px;font-weight:500;line-height:1.35}
.daypanel .panel-item a.name{color:var(--text);text-decoration:none}
.daypanel .panel-item a.name:hover{color:var(--navy);text-decoration:underline}
.daypanel .panel-item .sub{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.modal-bg{position:fixed;inset:0;background:rgba(10,17,31,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.pulse{animation:modal-pulse .3s ease-out}
@keyframes modal-pulse{0%{transform:scale(1);box-shadow:var(--shadow-lg)}40%{transform:scale(1.015);box-shadow:0 8px 32px rgba(15,30,55,.25),0 0 0 4px rgba(31,67,128,.12)}100%{transform:scale(1);box-shadow:var(--shadow-lg)}}
.modal{background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-lg);width:100%;max-width:480px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal.lg{max-width:720px}
.modal.xl{max-width:920px}
.modal-head{padding:14px 20px 12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-shrink:0;background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.modal-head h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-0.01em}
.modal-head-text{flex:1;min-width:0}
.modal-subtitle{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:8px;align-items:center}
.modal-subtitle .ctx-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;background:var(--navy-softer);color:var(--text);padding:3px 8px;border-radius:4px;line-height:1.3;border:1px solid transparent;font-family:var(--font-mono)}
.modal-subtitle .ctx-pill.ctx-job{background:#eaf2ff;color:var(--navy-mid);border-color:#cfdef7;font-family:var(--font-body)}
.modal-subtitle .ctx-pill.ctx-job a{color:var(--navy);text-decoration:none;font-weight:600}
.modal-subtitle .ctx-pill.ctx-job a:hover{text-decoration:underline}
.modal-subtitle .ctx-pill.ctx-desc{background:transparent;color:var(--text-muted);font-family:var(--font-body);max-width:100%;border:none;padding:3px 0}
.modal-subtitle .ctx-lbl{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-family:var(--font-body)}
.modal-body{padding:20px;overflow-y:auto}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--surface-2)}
.modal-foot .left{margin-right:auto}
.toast-stack{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;font-size:13px;box-shadow:var(--shadow-lg);min-width:200px;max-width:360px;animation:slideup .2s ease}
.toast.error{background:var(--danger)}
.toast.success{background:var(--good)}
@keyframes slideup{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.chip{padding:4px 11px;background:var(--surface);border:1px solid var(--border-mid);border-radius:999px;font-size:12.5px;color:var(--text-soft);cursor:pointer}
.chip:hover{background:var(--surface-2)}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .count{font-family:var(--font-mono);font-size:11px;margin-left:6px;opacity:.7}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-grid .field{margin:0}
.calc-gst-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.calc-gst-lbl{font-size:13px;color:var(--text-soft)}
.calc-ex{color:var(--text-muted)}
.calc-line-readout{font-family:var(--font-mono);color:var(--text-muted);margin:-4px 0 8px}
.alert-composer{margin-bottom:20px}
.alert-composer-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.alert-jobpick{position:relative;flex:1;min-width:180px}
.alert-jobresults{position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--surface);border:1px solid var(--border-mid);border-radius:var(--radius);box-shadow:var(--shadow-md);margin-top:4px;max-height:240px;overflow-y:auto}
.alert-jobopt{display:block;width:100%;text-align:left;padding:7px 10px;font-size:13px;border-bottom:1px solid var(--border)}
.alert-jobopt:last-child{border-bottom:none}
.alert-jobopt:hover{background:var(--surface-2)}
.linkbtn{background:none;border:none;color:inherit;cursor:pointer;font-size:12px;padding:0 2px;line-height:1}
.alert-resolved-divider{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);font-weight:600;margin:18px 0 8px}
.alerts-layout{display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.alerts-sidebar{border-right:1px solid var(--border);padding:8px 0;background:var(--surface-2)}
.alerts-chan{display:flex;align-items:center;gap:8px;width:100%;padding:7px 16px;font-size:13px;cursor:pointer;color:var(--text);background:none;border:none;border-radius:0;transition:background .1s}
.alerts-chan:hover{background:var(--navy-softer)}
.alerts-chan.active{background:var(--navy-softer);color:var(--navy);font-weight:500}
.alerts-chan-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.alerts-chan-count{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--warn);color:#fff;flex-shrink:0}
.alerts-feed-col{min-width:0;padding:16px 20px}
.alert-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:10px}
.alert-card.resolved{opacity:.55}
.alert-head{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:6px}
.alert-author{font-weight:600;color:var(--text)}
.alert-time{font-size:11.5px;color:var(--text-muted)}
.alert-body{font-size:14px;line-height:1.5;color:var(--text);white-space:normal;word-break:break-word}
.alert-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.alert-actions{margin-left:auto;display:flex;gap:6px}
.job-alerts-banner{background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--radius);padding:8px 14px;margin-bottom:14px}
.jar-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.jar-row+.jar-row{border-top:1px solid var(--warn-bd)}
.jar-body{flex:1;font-size:13px;color:var(--warn);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.jar-meta{font-size:11.5px;color:var(--warn);opacity:.75;white-space:nowrap;flex-shrink:0}
.jar-more{font-size:12px;padding-top:6px;border-top:1px solid var(--warn-bd);margin-top:4px}
.jar-more a{color:var(--warn)}
.chip-type{display:inline-flex;align-items:center;gap:6px}
.chip-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.chip.active .chip-dot{box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.filter-label{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:500;margin-right:2px}
.muted{color:var(--text-muted)}
.soft{color:var(--text-soft)}
.right{text-align:right}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hstack{display:flex;align-items:center;gap:8px}
.vstack{display:flex;flex-direction:column;gap:8px}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--navy);cursor:pointer}
.statbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}
.stat .lbl{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:500;margin-bottom:4px}
.stat .val{font-family:var(--font-mono);font-size:22px;font-weight:500;letter-spacing:-0.01em}
.stat .val.warn{color:var(--warn)}
.stat .val.good{color:var(--good)}
.stat .sub{font-size:11px;color:var(--text-muted);margin-top:2px}
/* IOU stock (js/95-iou.js) */
.iou-filterbar .dash-sort{width:auto;flex:0 0 auto;min-width:190px}
.iou-filterbar .filters{align-items:center}
.iou-search{padding:6px 10px;border:1px solid var(--border);border-radius:6px;min-width:240px;font-family:var(--font-body);font-size:13px;background:var(--surface);color:var(--text)}
.iou-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft);cursor:pointer;white-space:nowrap}
.iou-count{font-size:12px;margin-left:auto;white-space:nowrap}
.iou-zero{color:var(--text-muted);opacity:.55}
.iou-avail{color:var(--good);font-weight:600}
.iou-sub{display:block;font-size:11.5px;color:var(--text-muted);margin-top:1px}
table.data tr.iou-done td{color:var(--text-muted)}
table.data tr.iou-done .iou-avail{color:inherit;font-weight:inherit}
.iou-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}
.iou-stats .stat{padding:8px 12px}
.iou-stats .stat .val{font-size:20px}
.iou-sechead{justify-content:space-between;align-items:center;gap:10px;margin:16px 0 6px}
.iou-sechead .report-section-head{margin:0}
.iou-sechead .iou-search{min-width:0;width:200px;padding:4px 8px}
.iou-picklbl{font-size:12px;font-weight:600;color:var(--text-soft)}
.iou-picklbl .muted{font-weight:400}
table.data.iou-pick tbody tr[data-sid]{cursor:pointer}
.iou-cl-name{width:100%;padding:5px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text);font-family:var(--font-body);font-size:13px}
.iou-cl-name:hover,.iou-cl-name:focus{border-color:var(--border);background:var(--surface)}
.job-iou-section:empty{display:none}
.job-iou-section .iou-js-count{text-transform:none;letter-spacing:0;font-size:12px;margin-left:6px;color:var(--text-soft)}
@media (max-width:640px){.iou-stats{grid-template-columns:repeat(3,1fr)}.iou-search{min-width:0;flex:1}.iou-count{margin-left:0}}
/* Heading between stacked blocks on a detail page (client detail: Contacts, Jobs). */
.section-title{margin:24px 0 10px;font-size:13px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted)}
.actmenu-wrap{position:relative;display:inline-block}
.actmenu-trigger{width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);border:1px solid transparent;transition:background .12s,color .12s,border-color .12s}
.actmenu-trigger:hover{background:var(--navy-soft);color:var(--navy);border-color:var(--border)}
.actmenu-trigger svg{width:16px;height:16px}
.actmenu-trigger.open{background:var(--navy-soft);color:var(--navy);border-color:var(--border)}
.actmenu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:200px;padding:4px;z-index:50;max-height:calc(100vh - 24px);overflow-y:auto}
.actmenu .item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;font-size:13px;cursor:pointer;white-space:nowrap;width:100%;text-align:left;color:var(--text)}
.actmenu .item:hover{background:var(--navy-soft)}
.actmenu .item.danger{color:var(--danger)}
.actmenu .item.danger:hover{background:var(--danger-bg)}
.actmenu .item.disabled{color:var(--text-muted);pointer-events:none;opacity:.5}
.actmenu .sep{height:1px;background:var(--border);margin:4px 0}
.actmenu .label-tag{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);padding:6px 10px 2px;font-weight:500}
.bulkbar{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:10px 14px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.bulkbar .actions{display:flex;gap:6px;margin-left:auto}
.bulkbar .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.bulkbar .btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.docket-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.docket-pick{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px}
.docket-pick table{width:100%;border-collapse:collapse;font-size:13px}
.docket-pick table th,.docket-pick table td{padding:7px 8px;border-bottom:1px solid var(--border);text-align:left}
.docket-pick table tr.disabled td{color:var(--text-muted)}
.serial-chip{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:11.5px;padding:2px 7px;border-radius:4px;background:#eef2f7;color:var(--text);margin:2px 3px 2px 0;border:1px solid var(--border)}
.serial-chip-del{background:none;border:none;cursor:pointer;padding:0 1px;color:var(--text-muted);font-size:12px;line-height:1}
.serial-chip-del:hover{color:var(--danger)}
.serial-chips-wrap{display:flex;flex-wrap:wrap;gap:2px}
.serial-entry-row td{border-top:2px solid var(--navy-softer)!important}
.docket-override-popover{position:fixed;z-index:200;background:var(--surface);border:1px solid var(--warn-bd);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:16px;width:300px}
.docket-history-row:hover td{background:var(--navy-softer)}
tr.docket-history-row.override-row td{background:var(--warn-bg)}
/* Docket landing search */
.docket-search-wrap{margin-bottom:14px}
.docket-search-wrap input{max-width:400px;font-size:13.5px}
.docket-results-groups{margin-top:10px}
.docket-results-group-head{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);padding:4px 0 6px}
.docket-results-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
.docket-results-table th{text-align:left;padding:6px 8px;font-size:11px;font-weight:600;color:var(--text-muted);border-bottom:1px solid var(--border)}
.docket-results-table td{padding:7px 8px;border-bottom:1px solid var(--border)}
.docket-results-table tr:hover td{background:var(--navy-softer)}
/* Blank docket pill */
.pill-blank{display:inline-block;font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;background:var(--info-bg);color:var(--info);border:1px solid #b0cceb;margin-left:4px;vertical-align:middle}
/* Job-view docket history */
.job-dockets-section{margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.job-dockets-section h3{font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);font-weight:500;margin:0 0 10px}
.job-dockets-detail-row td{background:var(--surface-2)!important}
.docket-int-note{margin-top:6px;padding:6px 8px;background:var(--warn-bg);border-radius:4px;font-size:12px;color:var(--warn);white-space:pre-wrap}
.docket-int-note .lbl{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:2px}
.print-only{display:none}
@media print{
  @page{size:A4;margin:14mm 14mm 16mm 14mm}
  html,body{margin:0!important;padding:0!important;background:#fff!important;min-height:0!important;height:auto!important}
  #app{display:none!important}
  .topbar,main,.modal-bg,.toast-stack{display:none!important}
  .print-only{display:block!important;margin:0!important;padding:0!important}
  .printdoc{margin:0!important;padding:0!important}
  .printdoc>*:first-child{margin-top:0!important;padding-top:0!important}
}
.printdoc{font-family:var(--font-body);color:#000;background:#fff;font-size:11pt;line-height:1.4}
.printdoc .doc-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #0a2540;padding-bottom:12px;margin-bottom:18px}
.printdoc .doc-head .brand-block{display:flex;align-items:center;gap:14px}
/* Shared by delivery docket, bulk docket, blank docket, job status report and every
   report header. Both bounds scaled by the same 1.36x so the aspect ratio is unchanged.
   .brand-block is a centred flex row, so on printJobReport/printReport - the two that
   put a name/web text block beside the logo - the header simply grows taller and the
   text stays vertically centred; it does not wrap. Widest case is still well inside A4:
   245px logo + 14px gap + ~150px text leaves roughly 270px for the right-hand block. */
.printdoc .doc-head img.print-logo{max-height:68px;max-width:245px}
.printdoc .doc-head .wordmark{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:26pt;color:#0a2540;letter-spacing:-0.01em;line-height:1}
.printdoc .doc-head .company{font-size:9pt;text-align:right;color:#333;line-height:1.5}
.printdoc .doc-head .company .name{font-weight:600;color:#0a2540;font-size:10.5pt}
.printdoc .doc-title{font-size:18pt;font-weight:600;letter-spacing:-0.01em;margin:0 0 4px 0;color:#0a2540}
.printdoc .doc-meta{font-size:10pt;color:#444;margin-bottom:16px}
.printdoc .twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.printdoc .infobox{border:1px solid #d6d3c8;padding:12px 14px;border-radius:4px}
.printdoc .infobox h4{font-size:9pt;text-transform:uppercase;letter-spacing:0.08em;color:#555;margin:0 0 8px 0;font-weight:500}
.printdoc .infobox .row{margin-bottom:4px;font-size:10pt}
.printdoc .infobox .row .l{color:#777;display:inline-block;min-width:80px}
.printdoc table.lines{width:100%;border-collapse:collapse;font-size:10pt;margin-bottom:18px}
.printdoc table.lines th{text-align:left;background:#0a2540;color:#fff;padding:7px 8px;font-weight:500;font-size:9.5pt}
.printdoc table.lines td{padding:7px 8px;border-bottom:1px solid #e0ddd2;vertical-align:top}
.printdoc table.lines tr:last-child td{border-bottom:1px solid #999}
.printdoc table.lines .right{text-align:right}
.printdoc table.lines tr.totals td{background:#f3f1ea;font-weight:600;border-top:2px solid #0a2540}
.printdoc .receipt{border:1px solid #cfccc0;padding:16px 18px;margin-top:18px;border-radius:4px;background:#fbfaf6;page-break-inside:avoid}
.printdoc .receipt h4{font-size:9pt;text-transform:uppercase;letter-spacing:0.08em;margin:0 0 18px 0;color:#555;font-weight:500}
.printdoc .receipt .lbl{font-size:8.5pt;color:#666;text-transform:uppercase;letter-spacing:0.04em;margin-top:6px}
.printdoc .receipt .sigblock{display:grid;grid-template-columns:1.4fr 1.4fr 1fr;gap:28px;align-items:end}
.printdoc .receipt .sigline{border-bottom:1px solid #555;height:34px}
.printdoc .footer-strip{margin-top:24px;padding-top:10px;border-top:1px solid #0a2540;font-size:9pt;color:#666;text-align:center}
.printdoc .special-box{border:1px dashed #999;padding:10px 12px;margin:12px 0;font-size:10pt;color:#444;min-height:50px}
.printdoc .special-box .lbl{font-size:8.5pt;text-transform:uppercase;letter-spacing:0.04em;color:#777;display:block;margin-bottom:4px}
.printdoc .statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:10px 0 16px 0}
.printdoc .stattile{border:1px solid #d6d3c8;border-radius:4px;padding:8px 10px}
.printdoc .stattile .lbl{font-size:8.5pt;color:#777;text-transform:uppercase;letter-spacing:0.05em}
.printdoc .stattile .val{font-size:14pt;font-weight:600;color:#0a2540;font-variant-numeric:tabular-nums}
.printdoc .eta-intro{font-size:10pt;color:#555;line-height:1.5;padding:10px 14px;margin:8px 0 18px 0;background:#f7f6f0;border-left:3px solid #0a2540;border-radius:0 4px 4px 0}
.printdoc .doc-head-simple{display:block;border-bottom:1.5px solid #0a2540;padding-bottom:8px;margin-bottom:14px}
.printdoc .doc-head-simple .company-line{font-size:9.5pt;color:#444;line-height:1.5}
.printdoc .doc-head-simple .company-line .name{font-weight:600;color:#0a2540;font-size:10.5pt}
.printdoc .eta-section{margin-bottom:20px;page-break-inside:avoid}
.printdoc .eta-section-title{font-size:12pt;font-weight:600;color:#0a2540;margin:18px 0 8px 0;padding-bottom:6px;border-bottom:1.5px solid #0a2540;display:flex;align-items:baseline;gap:10px}
.printdoc .eta-section-count{font-size:9.5pt;font-weight:400;color:#777;text-transform:none;letter-spacing:0}
.printdoc .eta-section table.lines{margin-top:4px}
.printdoc .eta-section table.lines th{background:#f7f6f0;color:#333;font-size:9pt;text-transform:uppercase;letter-spacing:0.04em}

/* ============================================================
   THEMES. Screen only. Print output (.printdoc) is untouched so
   reports and dockets always render in the house style.
   Default theme = :root, unchanged.
   ============================================================ */

/* ---- Mac Classic (System 7 / Platinum) ---- */
html[data-theme="mac"]{
  --navy:#000099;--navy-deep:#000066;--navy-mid:#000099;--navy-soft:#cfcfcf;--navy-softer:#e8e8e8;
  --bg:#a8a8a8;--surface:#ffffff;--surface-2:#f0f0f0;
  --text:#000000;--text-soft:#222222;--text-muted:#555555;
  --border:#000000;--border-mid:#000000;--border-strong:#000000;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:2px 2px 0 rgba(0,0,0,.45);--shadow-lg:3px 3px 0 rgba(0,0,0,.5);
  --font-display:"Silkscreen","Geist",sans-serif;
  --topbar-bg:#ffffff;--topbar-fg:#000000;--topbar-fg-dim:#000000;--topbar-accent:#555555;
  --topbar-border:#000000;--topbar-divider:#000000;
  --topbar-hover-bg:#dcdcdc;--topbar-active-bg:#c4c4c4;
  --topbar-field-bg:#ffffff;--topbar-field-bd:#000000;
}
html[data-theme="mac"] .brand{font-size:17px;font-style:normal;letter-spacing:0}
html[data-theme="mac"] .pagehead h1,html[data-theme="mac"] .metabox h3{font-family:var(--font-display);letter-spacing:0}
html[data-theme="mac"] .pagehead h1{font-size:18px}

/* ---- Amiga Workbench (2.0) ---- */
html[data-theme="amiga"]{
  --navy:#0858a8;--navy-deep:#063f7a;--navy-mid:#0858a8;--navy-soft:#cdd7e6;--navy-softer:#e4e9f0;
  --bg:#9a9a9a;--surface:#ffffff;--surface-2:#f2f2f2;
  --text:#000000;--text-soft:#222222;--text-muted:#555555;
  --border:#000000;--border-mid:#000000;--border-strong:#000000;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:2px 2px 0 rgba(0,0,0,.4);--shadow-lg:2px 2px 0 rgba(0,0,0,.45);
  --warn:#9a4a00;--warn-bg:#ffe6cc;--warn-bd:#ff8a00;
  --font-display:"VT323","Geist Mono",monospace;
  --topbar-bg:#0858a8;--topbar-fg:#ffffff;--topbar-fg-dim:#dbe6f5;--topbar-accent:#ff8a00;
  --topbar-border:#000000;--topbar-divider:#3f7fc0;
  --topbar-hover-bg:rgba(255,255,255,.16);--topbar-active-bg:#ff8a00;
  --topbar-field-bg:rgba(255,255,255,.18);--topbar-field-bd:rgba(255,255,255,.4);
}
html[data-theme="amiga"] .brand{font-size:26px;font-style:normal;letter-spacing:0}
html[data-theme="amiga"] .pagehead h1,html[data-theme="amiga"] .metabox h3{font-family:var(--font-display);letter-spacing:0.01em}
html[data-theme="amiga"] .pagehead h1{font-size:30px}
html[data-theme="amiga"] .nav a.active .badge{background:#000;color:#fff}
/* Beveled gadgets: white highlight top-left, grey shadow bottom-right */
html[data-theme="amiga"] .btn{border:1px solid #000;box-shadow:inset 1px 1px 0 rgba(255,255,255,.85),inset -1px -1px 0 rgba(0,0,0,.35)}
html[data-theme="amiga"] .btn:hover{box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),inset -1px -1px 0 rgba(0,0,0,.45)}
html[data-theme="amiga"] .btn-primary{box-shadow:inset 1px 1px 0 rgba(255,255,255,.4),inset -1px -1px 0 rgba(0,0,0,.4)}

/* ---- Commodore (breadbin beige + C64 boot blue) ---- */
html[data-theme="c64"]{
  --navy:#3b3aa8;--navy-deep:#2a2980;--navy-mid:#3b3aa8;--navy-soft:#d3d0ea;--navy-softer:#e7e6f3;
  --bg:#c7bd9e;--surface:#efe9d6;--surface-2:#e4ddc6;
  --text:#2a2566;--text-soft:#3a3570;--text-muted:#6b6750;
  --border:#a99e7c;--border-mid:#94895f;--border-strong:#6f6647;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:2px 2px 0 rgba(80,70,40,.3);--shadow-lg:3px 3px 0 rgba(80,70,40,.35);
  --info:#3b3aa8;--info-bg:#dedcf2;
  --font-display:"VT323","Geist Mono",monospace;
  --topbar-bg:#3b3aa8;--topbar-fg:#c5c2f0;--topbar-fg-dim:#aaa7e2;--topbar-accent:#8d8ad8;
  --topbar-border:#1f1e66;--topbar-divider:#5a59c0;
  --topbar-hover-bg:rgba(255,255,255,.12);--topbar-active-bg:rgba(255,255,255,.2);
  --topbar-field-bg:rgba(255,255,255,.14);--topbar-field-bd:rgba(255,255,255,.28);
}
html[data-theme="c64"] .brand{font-size:26px;font-style:normal;letter-spacing:0}
html[data-theme="c64"] .pagehead h1,html[data-theme="c64"] .metabox h3{font-family:var(--font-display);letter-spacing:0.01em}
html[data-theme="c64"] .pagehead h1{font-size:30px}

/* ---- Shared retro structural treatment: square corners + outlined chrome ---- */
:where(html[data-theme="mac"],html[data-theme="amiga"],html[data-theme="c64"],html[data-theme="bbc"],html[data-theme="dos"],html[data-theme="apple2"],html[data-theme="win95"],html[data-theme="matrix"],html[data-theme="lcars"],html[data-theme="teletext"],html[data-theme="gameboy"]) :is(.btn,.btn-sm,input,select,textarea,.pill,.pill-line,.badge,.nav a,.navgroup-btn,.navdrop,.navitem,.searchbox,.searchresults,.card,.metabox,.modal,.modal-card,.toast,.brand-logo,.job-type-tag,.labour-chip,.stock-loc-chip,.src-chip,.report-tile,.rs-tile,.fin-tile,.budget-tile,.weekpanel,.line-filterbar,.chip,.ready-pill,.progmini .pdot,.readiness-bar,.readiness-fill){border-radius:0}
/* Outline the backup pill so it stays visible on light retro topbars */
:where(html[data-theme="mac"],html[data-theme="amiga"],html[data-theme="c64"],html[data-theme="bbc"],html[data-theme="dos"],html[data-theme="apple2"],html[data-theme="win95"],html[data-theme="matrix"],html[data-theme="lcars"],html[data-theme="teletext"],html[data-theme="gameboy"]) .backup-pill{border-radius:0;border:1px solid var(--topbar-border)}
/* Badge legibility: the default .badge is white text on --warn; themes with a bright
   yellow/green --warn need dark badge text instead (counts, incl. the nav roll-ups). */
html[data-theme="bbc"] .badge,html[data-theme="dos"] .badge,html[data-theme="teletext"] .badge,html[data-theme="matrix"] .badge,html[data-theme="apple2"] .badge,html[data-theme="lcars"] .badge,html[data-theme="synthwave"] .badge,html[data-theme="next"] .badge,html[data-theme="solarized"] .badge,html[data-theme="contrast"] .badge{color:#111}
/* Unread job alerts: danger-red wherever the count is rolled up - the nav item, the
   .navgroup-btn badge on the closed bar, the mobile drawer and the hamburger total.
   Toggled by setBadge() in js/20-ui-shell.js. `html` prefix on purpose: it matches
   the specificity of the theme rule directly above and sits after it, so --danger
   keeps white text in every theme rather than inheriting that block's dark #111. */
html .badge.badge-alert{background:var(--danger);color:#fff}
/* Table hover: on dark themes --navy-softer is near-black, so branded table rows show
   almost no hover. Use --surface-2 there (house/light themes keep their branded hover). */
:where(html[data-theme="bbc"],html[data-theme="apple2"],html[data-theme="next"],html[data-theme="matrix"],html[data-theme="synthwave"],html[data-theme="lcars"],html[data-theme="teletext"],html[data-theme="midnight"],html[data-theme="solarized"],html[data-theme="contrast"]) :is(.dashtable,.shipments-table,.po-table) tbody tr:hover{background:var(--surface-2)}

/* ============================================================
   NEW SKINS. Screen only — print output always uses house style.
   ============================================================ */

/* ---- BBC Micro (MODE 7 Teletext) ---- */
html[data-theme="bbc"]{
  --navy:#00ffff;--navy-deep:#00cccc;--navy-mid:#00ffff;--navy-soft:#001a1a;--navy-softer:#000d0d;
  --bg:#000000;--surface:#0d0d0d;--surface-2:#1a1a1a;
  --text:#ffffff;--text-soft:#dddddd;--text-muted:#888888;
  --border:#444444;--border-mid:#333333;--border-strong:#666666;
  --warn:#ffff00;--warn-bg:#1a1a00;--warn-bd:#666600;
  --good:#00ff00;--good-bg:#001a00;--good-bd:#006600;
  --danger:#ff0000;--danger-bg:#1a0000;--danger-bd:#660000;
  --info:#00ffff;--info-bg:#001a1a;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:2px 2px 0 rgba(255,255,255,.15);--shadow-lg:3px 3px 0 rgba(255,255,255,.15);
  --font-display:"VT323","Geist Mono",monospace;
  --topbar-bg:#cc0000;--topbar-fg:#ffffff;--topbar-fg-dim:#ffcccc;--topbar-accent:#ffff00;
  --topbar-border:#ff0000;--topbar-divider:#ff4444;
  --topbar-hover-bg:rgba(255,255,255,.15);--topbar-active-bg:#ffff00;
  --topbar-field-bg:rgba(255,255,255,.1);--topbar-field-bd:rgba(255,255,255,.3);
}
html[data-theme="bbc"] .nav a.active{color:#000}
html[data-theme="bbc"] .brand{font-size:20px;font-style:normal;letter-spacing:0}
html[data-theme="bbc"] .pagehead h1,html[data-theme="bbc"] .metabox h3{font-family:var(--font-display);letter-spacing:0.05em}
html[data-theme="bbc"] .report-section-head,html[data-theme="bbc"] .stock-bucket-head{border-bottom-color:#00ffff}
html[data-theme="bbc"] .progmini .pdot{background:#222;color:#666}
html[data-theme="bbc"] .progmini .pdot.on{background:#00ff00;color:#000}

/* ---- DOS / IBM PC (Norton Commander blue) ---- */
html[data-theme="dos"]{
  --navy:#ffff00;--navy-deep:#cccc00;--navy-mid:#ffff00;--navy-soft:#1a1a00;--navy-softer:#0d0d00;
  --bg:#000080;--surface:#0000aa;--surface-2:#000099;
  --text:#cccccc;--text-soft:#dddddd;--text-muted:#a3a3d6;
  --border:#aaaaaa;--border-mid:#8888aa;--border-strong:#cccccc;
  --warn:#ffff00;--warn-bg:#222200;--warn-bd:#888800;
  --good:#00aa00;--good-bg:#002200;--good-bd:#005500;
  --danger:#ff5555;--danger-bg:#220000;--danger-bd:#660000;
  --info:#5555ff;--info-bg:#000033;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:2px 2px 0 rgba(0,0,0,.5);--shadow-lg:3px 3px 0 rgba(0,0,0,.5);
  --font-display:"VT323","Geist Mono",monospace;
  --topbar-bg:#aaaaaa;--topbar-fg:#000080;--topbar-fg-dim:#222288;--topbar-accent:#000080;
  --topbar-border:#888888;--topbar-divider:#666666;
  --topbar-hover-bg:rgba(0,0,128,.15);--topbar-active-bg:#ffff00;
  --topbar-field-bg:rgba(255,255,255,.1);--topbar-field-bd:rgba(0,0,128,.4);
}
html[data-theme="dos"] .nav a.active{color:#000080}
html[data-theme="dos"] .brand{font-size:20px;font-style:normal;letter-spacing:0;color:#000080}
html[data-theme="dos"] .brand-sub{color:#000080;border-color:#888888}
html[data-theme="dos"] .pagehead h1,html[data-theme="dos"] .metabox h3{font-family:var(--font-display);letter-spacing:0.05em}
html[data-theme="dos"] .progmini .pdot{background:#000066;color:#5555aa}
html[data-theme="dos"] .progmini .pdot.on{background:#ffff00;color:#000080}
html[data-theme="dos"] table.data tbody tr:hover{background:#0000bb}

/* ---- Apple IIe Green Phosphor ---- */
html[data-theme="apple2"]{
  --navy:#66ff66;--navy-deep:#33cc33;--navy-mid:#66ff66;--navy-soft:#0a1a0a;--navy-softer:#061006;
  --bg:#0a1a0a;--surface:#0d200d;--surface-2:#152615;
  --text:#33ff33;--text-soft:#2bbf2b;--text-muted:#1f9422;
  --border:#1a8c1a;--border-mid:#0f5c0f;--border-strong:#33cc33;
  --warn:#88ff00;--warn-bg:#0d1a00;--warn-bd:#336600;
  --good:#33ff33;--good-bg:#001a00;--good-bd:#006600;
  --danger:#ff3333;--danger-bg:#1a0000;--danger-bd:#660000;
  --info:#33ff33;--info-bg:#001a00;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:0 0 6px rgba(51,255,51,.2);--shadow-lg:0 0 12px rgba(51,255,51,.2);
  --font-display:"VT323","Geist Mono",monospace;
  --topbar-bg:#061006;--topbar-fg:#33ff33;--topbar-fg-dim:#1a8c1a;--topbar-accent:#66ff66;
  --topbar-border:#1a8c1a;--topbar-divider:#0f4d0f;
  --topbar-hover-bg:rgba(51,255,51,.1);--topbar-active-bg:rgba(51,255,51,.15);
  --topbar-field-bg:rgba(51,255,51,.08);--topbar-field-bd:rgba(51,255,51,.25);
}
html[data-theme="apple2"] .brand{font-size:20px;font-style:normal;letter-spacing:0;text-shadow:0 0 8px #33ff33}
html[data-theme="apple2"] .pagehead h1{font-family:var(--font-display);text-shadow:0 0 6px #33ff33;color:#66ff66}
html[data-theme="apple2"] .metabox h3{font-family:var(--font-display)}
html[data-theme="apple2"] .progmini .pdot{background:#061006;color:#0f4d0f}
html[data-theme="apple2"] .progmini .pdot.on{background:#33ff33;color:#000;text-shadow:none}
html[data-theme="apple2"] a{color:#66ff66}
html[data-theme="apple2"] a:hover{color:#33ff33}

/* ---- NeXT Workstation ---- */
html[data-theme="next"]{
  --navy:#ff6600;--navy-deep:#cc5200;--navy-mid:#ff6600;--navy-soft:#1a0a00;--navy-softer:#110700;
  --bg:#1a1a1a;--surface:#2d2d2d;--surface-2:#242424;
  --text:#f0f0f0;--text-soft:#c0c0c0;--text-muted:#808080;
  --border:#404040;--border-mid:#383838;--border-strong:#555555;
  --warn:#cc8800;--warn-bg:#221500;--warn-bd:#665500;
  --good:#558833;--good-bg:#111a00;--good-bd:#334411;
  --danger:#cc3300;--danger-bg:#1a0600;--danger-bd:#661400;
  --info:#cc6600;--info-bg:#1a0d00;
  --radius:2px;--radius-lg:3px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 2px 6px rgba(0,0,0,.6);--shadow-lg:0 4px 16px rgba(0,0,0,.7);
  --topbar-bg:#111111;--topbar-fg:#f0f0f0;--topbar-fg-dim:#a0a0a0;--topbar-accent:#ff6600;
  --topbar-border:#000000;--topbar-divider:#333333;
  --topbar-hover-bg:rgba(255,102,0,.12);--topbar-active-bg:rgba(255,102,0,.2);
  --topbar-field-bg:rgba(255,255,255,.06);--topbar-field-bd:rgba(255,255,255,.15);
}
html[data-theme="next"] .brand{font-style:normal;font-size:20px;letter-spacing:-0.02em;color:#ff6600}
html[data-theme="next"] .report-section-head,html[data-theme="next"] .stock-bucket-head{border-bottom-color:#ff6600}
html[data-theme="next"] .progmini .pdot{background:#3a3a3a;color:#777}
html[data-theme="next"] .progmini .pdot.on{background:#ff6600;color:#1a1a1a}

/* ---- Windows 95 ---- */
html[data-theme="win95"]{
  --navy:#000080;--navy-deep:#000066;--navy-mid:#000080;--navy-soft:#ccd4cc;--navy-softer:#dde0dd;
  --bg:#008080;--surface:#c0c0c0;--surface-2:#d4d0c8;
  --text:#000000;--text-soft:#111111;--text-muted:#444444;
  --border:#808080;--border-mid:#999999;--border-strong:#404040;
  --warn:#808000;--warn-bg:#ffffcc;--warn-bd:#cccc00;
  --good:#008000;--good-bg:#ccffcc;--good-bd:#00cc00;
  --danger:#800000;--danger-bg:#ffcccc;--danger-bd:#cc0000;
  --info:#000080;--info-bg:#cce4ff;
  --radius:0;--radius-lg:0;
  --shadow-sm:inset -1px -1px 0 #404040,inset 1px 1px 0 #fff,inset -2px -2px 0 #808080,inset 2px 2px 0 #dfdfdf;
  --shadow-md:inset -1px -1px 0 #404040,inset 1px 1px 0 #fff,inset -2px -2px 0 #808080,inset 2px 2px 0 #dfdfdf;
  --shadow-lg:4px 4px 0 rgba(0,0,0,.5);
  --font-display:"Silkscreen","Geist",sans-serif;
  --topbar-bg:#000080;--topbar-fg:#ffffff;--topbar-fg-dim:#ccccee;--topbar-accent:#aaaaee;
  --topbar-border:#000000;--topbar-divider:#5555aa;
  --topbar-hover-bg:rgba(255,255,255,.12);--topbar-active-bg:rgba(255,255,255,.2);
  --topbar-field-bg:rgba(255,255,255,.9);--topbar-field-bd:#808080;
  --topbar-pattern:linear-gradient(to right,#000080,#1084d0);
}
html[data-theme="win95"] .brand{font-size:15px;font-style:normal;letter-spacing:0}
html[data-theme="win95"] .pagehead h1,html[data-theme="win95"] .metabox h3{font-family:var(--font-display);letter-spacing:0}
/* W95 bevel effect on buttons */
html[data-theme="win95"] .btn{box-shadow:inset -1px -1px 0 #404040,inset 1px 1px 0 #fff,inset -2px -2px 0 #808080,inset 2px 2px 0 #dfdfdf;border:none}
html[data-theme="win95"] .btn:hover{box-shadow:inset -1px -1px 0 #fff,inset 1px 1px 0 #404040,inset -2px -2px 0 #dfdfdf,inset 2px 2px 0 #808080}
html[data-theme="win95"] .btn:active{box-shadow:inset 1px 1px 0 #404040,inset -1px -1px 0 #fff,inset 2px 2px 0 #808080}
html[data-theme="win95"] .btn-primary{background:#000080;color:#fff;box-shadow:inset -1px -1px 0 #000033,inset 1px 1px 0 #4444cc}
html[data-theme="win95"] .card,html[data-theme="win95"] .metabox,html[data-theme="win95"] .modal{box-shadow:inset -1px -1px 0 #404040,inset 1px 1px 0 #fff,inset -2px -2px 0 #808080,inset 2px 2px 0 #dfdfdf}

/* ---- Matrix ---- */
html[data-theme="matrix"]{
  --navy:#00ff41;--navy-deep:#00cc33;--navy-mid:#00ff41;--navy-soft:#011001;--navy-softer:#010801;
  --bg:#000000;--surface:#020d02;--surface-2:#051505;
  --text:#00ff41;--text-soft:#00b82f;--text-muted:#0f8f28;
  --border:#003b00;--border-mid:#002800;--border-strong:#008f11;
  --warn:#aaff00;--warn-bg:#0d1a00;--warn-bd:#446600;
  --good:#00ff41;--good-bg:#001a00;--good-bd:#006600;
  --danger:#ff0000;--danger-bg:#1a0000;--danger-bd:#660000;
  --info:#00ff41;--info-bg:#001500;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:0 0 8px rgba(0,255,65,.15);--shadow-lg:0 0 16px rgba(0,255,65,.2);
  --font-display:"VT323","Geist Mono",monospace;
  --topbar-bg:#000000;--topbar-fg:#00ff41;--topbar-fg-dim:#008f11;--topbar-accent:#00ff41;
  --topbar-border:#003b00;--topbar-divider:#002800;
  --topbar-hover-bg:rgba(0,255,65,.08);--topbar-active-bg:rgba(0,255,65,.15);
  --topbar-field-bg:rgba(0,255,65,.05);--topbar-field-bd:rgba(0,255,65,.2);
}
html[data-theme="matrix"] .brand{font-size:20px;font-style:normal;letter-spacing:0;text-shadow:0 0 10px #00ff41}
html[data-theme="matrix"] .pagehead h1{font-family:var(--font-display);text-shadow:0 0 8px #00ff41}
html[data-theme="matrix"] .metabox h3{font-family:var(--font-display)}
html[data-theme="matrix"] .progmini .pdot{background:#010801;color:#003b00}
html[data-theme="matrix"] .progmini .pdot.on{background:#00ff41;color:#000;box-shadow:0 0 4px #00ff41}
html[data-theme="matrix"] a{color:#00ff41}
html[data-theme="matrix"] table.data tbody tr:hover{background:#031503}

/* ---- 70s Future (Retrofuturism) ---- */
html[data-theme="retro70"]{
  --navy:#c4501a;--navy-deep:#9a3d12;--navy-mid:#c4501a;--navy-soft:#f0dfc0;--navy-softer:#f8f0e0;
  --bg:#f5e6c8;--surface:#ead8a8;--surface-2:#dfc898;
  --text:#3d2b1f;--text-soft:#6b4c35;--text-muted:#8b6b50;
  --border:#b8956a;--border-mid:#c8a878;--border-strong:#8b6845;
  --warn:#c4501a;--warn-bg:#fce8dc;--warn-bd:#d88060;
  --good:#4a6741;--good-bg:#daecd8;--good-bd:#8ab888;
  --danger:#8b2516;--danger-bg:#f8ddd8;--danger-bd:#cc7060;
  --info:#6b4c35;--info-bg:#ead8c8;
  --shadow-sm:0 1px 2px rgba(61,43,31,.1);--shadow-md:0 2px 8px rgba(61,43,31,.15);--shadow-lg:0 4px 16px rgba(61,43,31,.18);
  --topbar-bg:#c4501a;--topbar-fg:#fdf6e8;--topbar-fg-dim:#f0d8c0;--topbar-accent:#f0d8c0;
  --topbar-border:#9a3d12;--topbar-divider:#d46030;
  --topbar-hover-bg:rgba(255,255,255,.15);--topbar-active-bg:rgba(255,255,255,.25);
  --topbar-field-bg:rgba(255,255,255,.2);--topbar-field-bd:rgba(255,255,255,.35);
}
html[data-theme="retro70"] .brand{font-style:italic}
html[data-theme="retro70"] .report-section-head,html[data-theme="retro70"] .stock-bucket-head{border-bottom-color:#c4501a}

/* ---- Synthwave / Outrun ---- */
html[data-theme="synthwave"]{
  --navy:#ff2d78;--navy-deep:#cc1a5a;--navy-mid:#ff2d78;--navy-soft:#2a0a1a;--navy-softer:#1a0510;
  --bg:#0d0221;--surface:#1a0533;--surface-2:#22064a;
  --text:#f8f8f2;--text-soft:#c0b8e8;--text-muted:#9282bd;
  --border:#3d1a6e;--border-mid:#2d1255;--border-strong:#6633aa;
  --warn:#ffcc00;--warn-bg:#1a1400;--warn-bd:#665500;
  --good:#00f5ff;--good-bg:#001a1e;--good-bd:#006677;
  --danger:#ff2d78;--danger-bg:#1a0010;--danger-bd:#660030;
  --info:#bf5fff;--info-bg:#160a22;
  --shadow-sm:0 0 6px rgba(255,45,120,.15);--shadow-md:0 0 12px rgba(255,45,120,.2),0 4px 8px rgba(0,0,0,.4);--shadow-lg:0 0 20px rgba(255,45,120,.25),0 8px 20px rgba(0,0,0,.5);
  --topbar-bg:#0d0221;--topbar-fg:#f8f8f2;--topbar-fg-dim:#c0b8e8;--topbar-accent:#00f5ff;
  --topbar-border:#3d1a6e;--topbar-divider:#2d1255;
  --topbar-hover-bg:rgba(255,45,120,.1);--topbar-active-bg:rgba(255,45,120,.18);
  --topbar-field-bg:rgba(255,255,255,.05);--topbar-field-bd:rgba(255,45,120,.3);
  --topbar-pattern:repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(255,45,120,.04) 38px,rgba(255,45,120,.04) 39px),repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(0,245,255,.03) 38px,rgba(0,245,255,.03) 39px);
}
html[data-theme="synthwave"] .brand{font-style:italic;text-shadow:0 0 10px #ff2d78}
html[data-theme="synthwave"] .pagehead h1{text-shadow:0 0 8px rgba(255,45,120,.4)}
html[data-theme="synthwave"] .progmini .pdot{background:#2a0a3a;color:#6b5598}
html[data-theme="synthwave"] .progmini .pdot.on{background:#ff2d78;color:#fff;box-shadow:0 0 4px #ff2d78}
html[data-theme="synthwave"] a{color:#00f5ff}
html[data-theme="synthwave"] a:hover{color:#ff2d78}

/* ---- LCARS (Star Trek: TNG) ---- */
html[data-theme="lcars"]{
  --navy:#ff9900;--navy-deep:#cc7700;--navy-mid:#ff9900;--navy-soft:#1a0d00;--navy-softer:#110800;
  --bg:#000000;--surface:#0a0008;--surface-2:#140010;
  --text:#ff9900;--text-soft:#e08a1a;--text-muted:#b3801a;
  --border:#ff9900;--border-mid:#883300;--border-strong:#ffcc00;
  --warn:#ffcc00;--warn-bg:#1a1300;--warn-bd:#665500;
  --good:#99cc00;--good-bg:#0d1300;--good-bd:#445500;
  --danger:#cc6699;--danger-bg:#1a000d;--danger-bd:#662244;
  --info:#9999ff;--info-bg:#06000d;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:0 0 8px rgba(255,153,0,.2);--shadow-lg:0 0 16px rgba(255,153,0,.25);
  --topbar-bg:#ff9900;--topbar-fg:#000000;--topbar-fg-dim:#331100;--topbar-accent:#331100;
  --topbar-border:#cc7700;--topbar-divider:#cc7700;
  --topbar-hover-bg:rgba(0,0,0,.15);--topbar-active-bg:#ffcc00;
  --topbar-field-bg:rgba(0,0,0,.2);--topbar-field-bd:rgba(0,0,0,.4);
}
html[data-theme="lcars"] .brand{font-size:18px;font-style:normal;letter-spacing:0.1em;color:#000;text-transform:uppercase}
html[data-theme="lcars"] .brand-sub{color:#331100;border-color:#331100}
html[data-theme="lcars"] .nav a.active{color:#000;background:#ffcc00}
html[data-theme="lcars"] .pagehead h1{letter-spacing:0.08em;border-left:6px solid #ff9900;padding-left:12px}
html[data-theme="lcars"] .metabox{border-left:4px solid #ff9900}
html[data-theme="lcars"] .report-section-head,html[data-theme="lcars"] .stock-bucket-head{border-bottom-color:#ff9900}
html[data-theme="lcars"] .progmini .pdot{background:#0d0008;color:#441100}
html[data-theme="lcars"] .progmini .pdot.on{background:#ff9900;color:#000}
html[data-theme="lcars"] a{color:#ffcc00}
html[data-theme="lcars"] a:hover{color:#ff9900}

/* ---- Teletext (UK Ceefax, 8-colour palette only) ---- */
html[data-theme="teletext"]{
  --navy:#ffff00;--navy-deep:#cccc00;--navy-mid:#ffff00;--navy-soft:#000033;--navy-softer:#000022;
  --bg:#000000;--surface:#000022;--surface-2:#000044;
  --text:#ffffff;--text-soft:#00ffff;--text-muted:#ff77ff;
  --border:#ffffff;--border-mid:#0000ff;--border-strong:#00ffff;
  --warn:#ffff00;--warn-bg:#000022;--warn-bd:#0000ff;
  --good:#00ff00;--good-bg:#001100;--good-bd:#007700;
  --danger:#ff0000;--danger-bg:#110000;--danger-bd:#770000;
  --info:#00ffff;--info-bg:#000022;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:2px 2px 0 #ffffff;--shadow-lg:3px 3px 0 #ffffff;
  --font-display:"VT323","Geist Mono",monospace;
  --topbar-bg:#0000ff;--topbar-fg:#ffff00;--topbar-fg-dim:#ffffff;--topbar-accent:#00ffff;
  --topbar-border:#ffffff;--topbar-divider:#0000aa;
  --topbar-hover-bg:rgba(255,255,255,.15);--topbar-active-bg:#ffff00;
  --topbar-field-bg:rgba(255,255,255,.1);--topbar-field-bd:rgba(255,255,255,.4);
}
html[data-theme="teletext"] .nav a.active{color:#0000ff}
html[data-theme="teletext"] .brand{font-size:20px;font-style:normal;letter-spacing:0;color:#ffff00}
html[data-theme="teletext"] .brand-sub{color:#00ffff;border-color:#00ffff}
html[data-theme="teletext"] .pagehead h1{font-family:var(--font-display);background:#ff0000;color:#fff;padding:2px 8px;display:inline-block}
html[data-theme="teletext"] .metabox h3{background:#0000ff;color:#ffff00;padding:2px 8px;margin:-2px -2px 10px}
html[data-theme="teletext"] .report-section-head,html[data-theme="teletext"] .stock-bucket-head{background:#00ff00;color:#000;border:none;padding:2px 6px}
html[data-theme="teletext"] .progmini .pdot{background:#000033;color:#0000aa}
html[data-theme="teletext"] .progmini .pdot.on{background:#00ff00;color:#000}
html[data-theme="teletext"] a{color:#ffff00}
html[data-theme="teletext"] a:hover{color:#00ffff}
html[data-theme="teletext"] table.data tbody tr:hover{background:#000066}

/* ---- Midnight (clean dark mode) ---- */
html[data-theme="midnight"]{
  --navy:#60a5fa;--navy-deep:#3b82f6;--navy-mid:#60a5fa;--navy-soft:#24344d;--navy-softer:#1b2942;
  --bg:#0f172a;--surface:#1e293b;--surface-2:#172033;
  --text:#e6edf6;--text-soft:#aab6c8;--text-muted:#8394ab;
  --border:#2b3a52;--border-mid:#33465f;--border-strong:#47597a;
  --warn:#b45309;--warn-bg:#3a2a12;--warn-bd:#7a5a1f;
  --good:#15803d;--good-bg:#0f2f1e;--good-bd:#1f6b40;
  --danger:#dc2626;--danger-bg:#3a1418;--danger-bd:#7a2630;
  --info:#3b82f6;--info-bg:#14233c;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow-md:0 2px 6px rgba(0,0,0,.5);--shadow-lg:0 8px 28px rgba(0,0,0,.6);
  --topbar-bg:#0b1220;--topbar-fg:#e6edf6;--topbar-fg-dim:#a7b6cc;--topbar-accent:#60a5fa;
  --topbar-border:#060b16;--topbar-divider:#24344d;
  --topbar-hover-bg:rgba(255,255,255,.07);--topbar-active-bg:rgba(255,255,255,.13);
  --topbar-field-bg:rgba(255,255,255,.06);--topbar-field-bd:rgba(255,255,255,.14);
}

/* ---- Game Boy DMG (4-shade LCD green) ---- */
html[data-theme="gameboy"]{
  --navy:#0f380f;--navy-deep:#0f380f;--navy-mid:#306230;--navy-soft:#8bac0f;--navy-softer:#98b911;
  --bg:#8bac0f;--surface:#9bbc0f;--surface-2:#8bac0f;
  --text:#0f380f;--text-soft:#1e4d1e;--text-muted:#2f5f2f;
  --border:#0f380f;--border-mid:#306230;--border-strong:#0f380f;
  --warn:#306230;--warn-bg:#9bbc0f;--warn-bd:#0f380f;
  --good:#0f380f;--good-bg:#9bbc0f;--good-bd:#306230;
  --danger:#0f380f;--danger-bg:#9bbc0f;--danger-bd:#0f380f;
  --info:#306230;--info-bg:#9bbc0f;
  --radius:0;--radius-lg:0;
  --shadow-sm:none;--shadow-md:2px 2px 0 #0f380f;--shadow-lg:3px 3px 0 #0f380f;
  --font-display:"Silkscreen","Geist",sans-serif;
  --topbar-bg:#0f380f;--topbar-fg:#9bbc0f;--topbar-fg-dim:#8bac0f;--topbar-accent:#9bbc0f;
  --topbar-border:#0f380f;--topbar-divider:#306230;
  --topbar-hover-bg:rgba(155,188,15,.18);--topbar-active-bg:rgba(155,188,15,.3);
  --topbar-field-bg:rgba(155,188,15,.15);--topbar-field-bd:rgba(155,188,15,.4);
}
html[data-theme="gameboy"] .brand{font-size:15px;font-style:normal;letter-spacing:0}
html[data-theme="gameboy"] .pagehead h1,html[data-theme="gameboy"] .metabox h3{font-family:var(--font-display);letter-spacing:0}

/* ---- Vaporwave (pastel pink / purple / cyan) ---- */
html[data-theme="vaporwave"]{
  --navy:#d6408f;--navy-deep:#b12e74;--navy-mid:#d6408f;--navy-soft:#ffe0f2;--navy-softer:#fff0f9;
  --bg:#fdeef7;--surface:#ffffff;--surface-2:#faf0fb;
  --text:#3a2b4d;--text-soft:#6b5580;--text-muted:#857596;
  --border:#f0d3e6;--border-mid:#e6bcd8;--border-strong:#d49bc4;
  --warn:#c26a00;--warn-bg:#fdeecf;--warn-bd:#f0c98a;
  --good:#0f9488;--good-bg:#d5f3ef;--good-bd:#9fe0d8;
  --danger:#d63384;--danger-bg:#fbe0ee;--danger-bd:#f0b0d3;
  --info:#7c5cf0;--info-bg:#ece6fd;
  --shadow-sm:0 1px 2px rgba(150,80,140,.1);--shadow-md:0 2px 10px rgba(150,80,140,.14);--shadow-lg:0 6px 22px rgba(150,80,140,.2);
  --topbar-bg:#c86dd7;--topbar-fg:#ffffff;--topbar-fg-dim:#f6e2fb;--topbar-accent:#7bf1e8;
  --topbar-border:#a24fc0;--topbar-divider:rgba(255,255,255,.3);
  --topbar-hover-bg:rgba(255,255,255,.16);--topbar-active-bg:rgba(255,255,255,.26);
  --topbar-field-bg:rgba(255,255,255,.2);--topbar-field-bd:rgba(255,255,255,.42);
  --topbar-pattern:linear-gradient(100deg,#a86bd8 0%,#d873c0 55%,#6ad3dd 100%);
}
html[data-theme="vaporwave"] .brand{font-style:italic}

/* ---- High Contrast (accessibility: black / white / yellow) ---- */
html[data-theme="contrast"]{
  --navy:#ffff00;--navy-deep:#ffe000;--navy-mid:#ffff00;--navy-soft:#333300;--navy-softer:#1a1a00;
  --bg:#000000;--surface:#000000;--surface-2:#0d0d0d;
  --text:#ffffff;--text-soft:#ffffff;--text-muted:#e6e6e6;
  --border:#ffffff;--border-mid:#ffffff;--border-strong:#ffffff;
  --warn:#ffdd00;--warn-bg:#1a1600;--warn-bd:#ffdd00;
  --good:#00e000;--good-bg:#001a00;--good-bd:#00e000;
  --danger:#ff5c5c;--danger-bg:#1a0000;--danger-bd:#ff5c5c;
  --info:#00ffff;--info-bg:#001a1a;
  --shadow-sm:none;--shadow-md:0 2px 8px rgba(0,0,0,.8);--shadow-lg:0 4px 16px rgba(0,0,0,.9);
  --topbar-bg:#000000;--topbar-fg:#ffffff;--topbar-fg-dim:#ffffff;--topbar-accent:#ffff00;
  --topbar-border:#ffffff;--topbar-divider:#ffffff;
  --topbar-hover-bg:#333333;--topbar-active-bg:#ffff00;
  --topbar-field-bg:#1a1a1a;--topbar-field-bd:#ffffff;
}
/* Yellow active-bg needs black text on the topbar (nav + group buttons) */
html[data-theme="contrast"] .nav a.active,html[data-theme="contrast"] .navgroup.active>.navgroup-btn,html[data-theme="contrast"] .navgroup.open>.navgroup-btn{color:#000}
html[data-theme="contrast"] a{color:#ffff00}
html[data-theme="contrast"] a:hover{color:#ffffff}

/* ---- Solarized Dark ---- */
html[data-theme="solarized"]{
  --navy:#268bd2;--navy-deep:#1f6fa8;--navy-mid:#268bd2;--navy-soft:#0a3d4a;--navy-softer:#073642;
  --bg:#002b36;--surface:#073642;--surface-2:#0a4250;
  --text:#93a1a1;--text-soft:#839496;--text-muted:#728a8a;
  --border:#0d4a5a;--border-mid:#125868;--border-strong:#586e75;
  --warn:#b58900;--warn-bg:#0c3a42;--warn-bd:#7d6410;
  --good:#859900;--good-bg:#0c3a42;--good-bd:#5a6b12;
  --danger:#dc322f;--danger-bg:#0c3a42;--danger-bd:#8a2422;
  --info:#268bd2;--info-bg:#0c3a42;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);--shadow-md:0 2px 8px rgba(0,0,0,.45);--shadow-lg:0 8px 24px rgba(0,0,0,.55);
  --topbar-bg:#002b36;--topbar-fg:#eee8d5;--topbar-fg-dim:#93a1a1;--topbar-accent:#2aa198;
  --topbar-border:#001f27;--topbar-divider:#0d4a5a;
  --topbar-hover-bg:rgba(238,232,213,.08);--topbar-active-bg:rgba(238,232,213,.14);
  --topbar-field-bg:rgba(238,232,213,.06);--topbar-field-bd:rgba(147,161,161,.3);
}
html[data-theme="solarized"] a{color:#2aa198}
html[data-theme="solarized"] a:hover{color:#268bd2}

/* ---- Swatch preview colours for the theme picker ---- */
.theme-swatch-bbc i:nth-child(1){background:#cc0000}.theme-swatch-bbc i:nth-child(2){background:#000000}.theme-swatch-bbc i:nth-child(3){background:#ffffff}.theme-swatch-bbc i:nth-child(4){background:#00ffff}
.theme-swatch-dos i:nth-child(1){background:#aaaaaa}.theme-swatch-dos i:nth-child(2){background:#000080}.theme-swatch-dos i:nth-child(3){background:#0000aa}.theme-swatch-dos i:nth-child(4){background:#ffff00}
.theme-swatch-apple2 i:nth-child(1){background:#0a1a0a}.theme-swatch-apple2 i:nth-child(2){background:#0d200d}.theme-swatch-apple2 i:nth-child(3){background:#33ff33}.theme-swatch-apple2 i:nth-child(4){background:#66ff66}
.theme-swatch-next i:nth-child(1){background:#1a1a1a}.theme-swatch-next i:nth-child(2){background:#2d2d2d}.theme-swatch-next i:nth-child(3){background:#f0f0f0}.theme-swatch-next i:nth-child(4){background:#ff6600}
.theme-swatch-win95 i:nth-child(1){background:#008080}.theme-swatch-win95 i:nth-child(2){background:#c0c0c0}.theme-swatch-win95 i:nth-child(3){background:#000080}.theme-swatch-win95 i:nth-child(4){background:#ffffff}
.theme-swatch-matrix i:nth-child(1){background:#000000}.theme-swatch-matrix i:nth-child(2){background:#020d02}.theme-swatch-matrix i:nth-child(3){background:#00ff41}.theme-swatch-matrix i:nth-child(4){background:#008f11}
.theme-swatch-retro70 i:nth-child(1){background:#c4501a}.theme-swatch-retro70 i:nth-child(2){background:#f5e6c8}.theme-swatch-retro70 i:nth-child(3){background:#ead8a8}.theme-swatch-retro70 i:nth-child(4){background:#4a6741}
.theme-swatch-synthwave i:nth-child(1){background:#0d0221}.theme-swatch-synthwave i:nth-child(2){background:#1a0533}.theme-swatch-synthwave i:nth-child(3){background:#ff2d78}.theme-swatch-synthwave i:nth-child(4){background:#00f5ff}
.theme-swatch-lcars i:nth-child(1){background:#000000}.theme-swatch-lcars i:nth-child(2){background:#ff9900}.theme-swatch-lcars i:nth-child(3){background:#ffcc00}.theme-swatch-lcars i:nth-child(4){background:#cc6699}
.theme-swatch-teletext i:nth-child(1){background:#0000ff}.theme-swatch-teletext i:nth-child(2){background:#000000}.theme-swatch-teletext i:nth-child(3){background:#ffff00}.theme-swatch-teletext i:nth-child(4){background:#00ff00}
.theme-swatch-midnight i:nth-child(1){background:#0f172a}.theme-swatch-midnight i:nth-child(2){background:#1e293b}.theme-swatch-midnight i:nth-child(3){background:#e6edf6}.theme-swatch-midnight i:nth-child(4){background:#60a5fa}
.theme-swatch-gameboy i:nth-child(1){background:#0f380f}.theme-swatch-gameboy i:nth-child(2){background:#306230}.theme-swatch-gameboy i:nth-child(3){background:#8bac0f}.theme-swatch-gameboy i:nth-child(4){background:#9bbc0f}
.theme-swatch-vaporwave i:nth-child(1){background:#c86dd7}.theme-swatch-vaporwave i:nth-child(2){background:#ff6ad5}.theme-swatch-vaporwave i:nth-child(3){background:#7bf1e8}.theme-swatch-vaporwave i:nth-child(4){background:#fdeef7}
.theme-swatch-contrast i:nth-child(1){background:#000000}.theme-swatch-contrast i:nth-child(2){background:#ffffff}.theme-swatch-contrast i:nth-child(3){background:#ffff00}.theme-swatch-contrast i:nth-child(4){background:#00ffff}
.theme-swatch-solarized i:nth-child(1){background:#002b36}.theme-swatch-solarized i:nth-child(2){background:#073642}.theme-swatch-solarized i:nth-child(3){background:#268bd2}.theme-swatch-solarized i:nth-child(4){background:#b58900}

/* ---- Theme picker (Settings) ---- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.theme-card{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px;border:1px solid var(--border-mid);border-radius:var(--radius);background:var(--surface);transition:border-color .12s,box-shadow .12s}
.theme-card:hover{border-color:var(--border-strong)}
.theme-card.selected{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.theme-swatch{display:flex;height:30px;border-radius:4px;overflow:hidden;border:1px solid var(--border-mid);margin-bottom:6px}
.theme-swatch i{flex:1;display:block}
.theme-card-name{font-size:13px;font-weight:600;color:var(--text)}
.theme-card-sub{font-size:11px;color:var(--text-muted);line-height:1.35}
.theme-swatch-default i:nth-child(1){background:#0a2540}.theme-swatch-default i:nth-child(2){background:#f6f6f3}.theme-swatch-default i:nth-child(3){background:#fff}.theme-swatch-default i:nth-child(4){background:#a04a00}
.theme-swatch-mac i:nth-child(1){background:#000}.theme-swatch-mac i:nth-child(2){background:#a8a8a8}.theme-swatch-mac i:nth-child(3){background:#fff}.theme-swatch-mac i:nth-child(4){background:#000099}
.theme-swatch-amiga i:nth-child(1){background:#0858a8}.theme-swatch-amiga i:nth-child(2){background:#9a9a9a}.theme-swatch-amiga i:nth-child(3){background:#fff}.theme-swatch-amiga i:nth-child(4){background:#ff8a00}
.theme-swatch-c64 i:nth-child(1){background:#3b3aa8}.theme-swatch-c64 i:nth-child(2){background:#c7bd9e}.theme-swatch-c64 i:nth-child(3){background:#efe9d6}.theme-swatch-c64 i:nth-child(4){background:#8d8ad8}
/* ---- Login screen ---- */
.loginscreen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:500}
.loginscreen[hidden]{display:none}
.loginbox{width:100%;max-width:360px;padding:32px 30px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.loginbox .brand{justify-content:center;color:var(--navy);margin-bottom:22px}
.loginbox .brand-sub{color:var(--text-muted);border-color:var(--border)}
.login-error{background:var(--danger-bg);border:1px solid var(--danger-bd);color:var(--danger);font-size:13px;padding:9px 12px;border-radius:6px;margin-bottom:14px;line-height:1.4}
.login-sub{font-size:12.5px;color:var(--text-muted);text-align:center;margin:-10px 0 20px}
/* "or" as a rule with a gap in it. Only ever rendered when a second sign-in method
   actually exists, so the form never gains a divider that separates nothing. */
.login-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font-size:12px;color:var(--text-muted)}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:var(--border)}
/* Deliberately NOT btn-primary. The password form stays the main path for every
   account that predates SSO, and two filled buttons stacked read as a choice between
   equals when it is not one yet. */
.btn-ms{width:100%;justify-content:center;gap:9px;background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-ms svg{flex:none}
#login-submit[disabled]{opacity:.6;cursor:not-allowed}
/* ---- Connection error banner (server unreachable / session expired) ---- */
.conn-banner{position:fixed;top:0;left:0;right:0;z-index:600;background:var(--danger-bg);color:var(--danger);border-bottom:1px solid var(--danger-bd);padding:10px 18px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:12px;justify-content:center}
.conn-banner[hidden]{display:none}
.conn-banner button{margin-left:6px}
/* Sticky save-failure banner: the message can be long (it now carries PocketBase's
   per-field reason), so let it wrap instead of forcing the buttons off-screen. */
.conn-banner{flex-wrap:wrap}
.conn-banner .connbanner-dismiss{flex:none;font-size:12px;padding:3px 10px;border-radius:5px;border:1px solid var(--danger-bd);background:#fff;color:var(--danger);font-weight:500;cursor:pointer}
.conn-banner .connbanner-dismiss:hover{background:var(--danger-bg)}
/* ---- Connection status indicator (topbar dot) ---- */
.conn-status{display:inline-flex;align-items:center;cursor:default;position:relative;padding:6px 4px}
.conn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background .3s}
[data-state="connected"] .conn-dot{background:#22c55e}
[data-state="reconnecting"] .conn-dot{background:#f59e0b;animation:pulse 1.2s infinite ease-in-out}
[data-state="disconnected"] .conn-dot{background:#ef4444}
/* stale: the server answers, but this client has no realtime subscriptions, so
   what is on screen may be out of date. Amber like reconnecting - it is a
   degraded state, and the one thing it must never look like is green. */
[data-state="stale"] .conn-dot{background:#f59e0b;animation:pulse 1.2s infinite ease-in-out}
/* CSS-only tooltip: reads the data-tip attribute so there's no conflict
   with the browser's native title tooltip */
.conn-status::after{content:attr(data-tip);position:absolute;top:calc(100% + 4px);right:0;background:rgba(10,37,64,.92);color:#fff;font-size:11.5px;white-space:nowrap;padding:4px 10px;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50;font-weight:400}
.conn-status:hover::after{opacity:1}
/* ---- Recently Received / Installed report enhancements ---- */
.rr-by-badge{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:3px;background:#e8e2f0;color:#4a2d6e;font-weight:600;vertical-align:middle;white-space:nowrap}
.rr-rel-time{border-bottom:1px dotted var(--border-strong);cursor:help;font-family:var(--font-mono);font-size:12.5px}
tr.rr-cleared{opacity:.55}
.rr-cleared-label{font-size:11px;color:var(--text-muted);margin-top:2px;font-style:italic}
.rr-clear-btn{width:26px;height:26px;color:var(--text-muted)}
.rr-clear-btn:hover{background:var(--good-bg);color:var(--good)}
/* ---- Per-record write-failure indicator ---- */
/* outline (not border) so it never affects layout, regardless of which
   element type (tr, div, card...) a failed record's row happens to be */
.write-failed{outline:2px solid var(--danger);outline-offset:-2px}
.failpanel{position:fixed;bottom:20px;left:20px;z-index:250;display:flex;flex-direction:column-reverse;gap:8px;max-width:340px}
.failpanel-item{background:var(--danger-bg);border:1px solid var(--danger-bd);border-radius:8px;padding:10px 14px;box-shadow:var(--shadow-lg);font-size:12.5px;color:var(--danger)}
.failpanel-item .ffp-msg{margin-bottom:8px;font-weight:500;line-height:1.4}
.failpanel-item .ffp-acts{display:flex;gap:8px}
.failpanel-item .ffp-acts button{font-size:12px;padding:4px 10px;border-radius:5px;border:1px solid var(--danger-bd);background:#fff;color:var(--danger);font-weight:500}
.failpanel-item .ffp-acts button:hover{background:var(--danger-bg)}
/* ============================================================
   MOBILE (Task 6). Primary breakpoint 768px. Screen only —
   print output (.printdoc) is untouched; desktop >=1024 unchanged.
   ============================================================ */
.tablescroll{-webkit-overflow-scrolling:touch}
/* Hamburger + mobile nav drawer: hidden on desktop, shown under the breakpoint */
.navtoggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;color:var(--topbar-fg-dim);border-radius:6px;position:relative;flex-shrink:0}
.navtoggle:hover{background:var(--topbar-hover-bg);color:var(--topbar-fg)}
.navtoggle svg{width:22px;height:22px}
.navtoggle .badge{position:absolute;top:2px;right:2px;background:var(--warn);color:#fff;font-size:9.5px;line-height:1;padding:2px 5px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums}
.mobilenav{display:none}

@media screen and (max-width:768px){
  /* Prevent page-level horizontal scroll without breaking the sticky topbar */
  body{overflow-x:clip}
  /* Topbar: two rows — controls, then a full-width search row */
  .topbar{height:auto;min-height:52px;flex-wrap:wrap;gap:8px 10px;padding:8px 12px}
  .brand{font-size:18px}
  .brand-sub{display:none}                /* free row-1 space on narrow phones */
  #mainnav{display:none}
  .navtoggle{display:inline-flex;width:44px;height:44px}
  .mobilenav{display:block}
  .topbar-right{margin-left:auto;gap:4px}
  #whoami,#backuppill{display:none}       /* save space; backup nag still shows its in-view banner */
  .iconbtn{width:44px;height:44px}
  .searchwrap{order:10;flex:1 1 100%;width:auto}
  .searchbox{height:42px}
  .searchbox input{font-size:16px}        /* >=16px stops iOS focus zoom */
  .searchbox .search-scope{width:62px;font-size:12px}
  .searchbox kbd{display:none}            /* "/" shortcut is irrelevant on touch */
  .searchresults{max-height:70vh}

  /* Full-width nav drawer under the topbar */
  .mobilenav{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90;background:rgba(10,17,31,.45);backdrop-filter:blur(2px)}
  .mobilenav[hidden]{display:none}
  .mobilenav .mnav-panel{position:absolute;top:0;left:0;right:0;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .mnav-group>.mnav-head{display:flex;align-items:center;gap:8px;width:100%;padding:14px 12px;min-height:52px;font-size:15px;font-weight:600;color:var(--text);border-radius:var(--radius)}
  .mnav-group>.mnav-head:hover{background:var(--navy-softer)}
  .mnav-head .mnav-caret{margin-left:auto;width:16px;height:16px;opacity:.6;transition:transform .12s}
  .mnav-group.open .mnav-head .mnav-caret{transform:rotate(180deg)}
  .mnav-head .badge{background:var(--warn);color:#fff;font-size:11px;padding:2px 7px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums}
  .mnav-items{display:none;padding:2px 0 8px}
  .mnav-group.open .mnav-items{display:block}
  .mnav-items .navitem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 12px 24px;min-height:48px;color:var(--text-soft);font-size:14px;text-decoration:none;border-radius:var(--radius)}
  .mnav-items .navitem:hover,.mnav-items .navitem.on{background:var(--navy-soft);color:var(--text);text-decoration:none}
  .mnav-items .navitem .badge{background:var(--warn);color:#fff;font-size:11px;padding:1px 7px;border-radius:999px;font-weight:600;font-variant-numeric:tabular-nums}

  /* Views: tighter padding, wrapping page headers */
  main{padding:16px 12px 48px}
  .pagehead{flex-wrap:wrap;gap:12px;align-items:flex-start}
  .pagehead .actions{flex-wrap:wrap}
  .job-progress-strip{grid-template-columns:repeat(2,1fr)}
  .line-filterbar{flex-wrap:wrap}
  .bulkbar{flex-wrap:wrap}
  .bulkbar .actions{flex-wrap:wrap}

  /* Touch targets + iOS-safe input sizing */
  .btn{min-height:44px}
  .btn-sm{min-height:38px}
  .chip{padding:8px 14px}
  input,select,textarea,label.field input,label.field select,label.field textarea{font-size:16px}
  .actmenu-trigger{width:40px;height:40px}

  /* Tables: horizontal scroll by default, with a right-edge fade affordance */
  .tablewrap{position:relative}
  .tablewrap:not(.cardwrap)::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:22px;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface))}

  /* Card-per-row treatment — priority tables opt in via .cardtable / .cardwrap */
  .cardwrap{border:0;background:transparent;overflow:visible}
  .cardwrap::after{display:none}
  .cardwrap .tablescroll{overflow:visible}
  table.data.cardtable{display:block;width:100%;background:transparent}
  table.data.cardtable thead{display:none}
  table.data.cardtable tbody{display:block}
  table.data.cardtable tr{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin:0 0 10px;padding:8px 12px;box-shadow:var(--shadow-sm)}
  table.data.cardtable tr.selected{outline:2px solid var(--navy);outline-offset:-2px}
  table.data.cardtable td{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:5px 0;border:0;text-align:right;width:auto;white-space:normal!important;overflow:visible!important;max-width:none!important;text-overflow:clip}
  table.data.cardtable td::before{content:attr(data-label);text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);flex:0 0 38%}
  table.data.cardtable td:empty{display:none}
  table.data.cardtable td[data-label=""]::before{content:none}
  table.data.cardtable td>div{max-width:100%!important}
  table.data.cardtable td.card-title{display:block;text-align:left;font-size:15px;font-weight:600;padding:2px 0 7px;border-bottom:1px solid var(--border);margin-bottom:5px}
  table.data.cardtable td.card-title::before{content:none}
  table.data.cardtable td.card-hide{display:none}
  table.data.cardtable td.empty{display:block;text-align:center}
  table.data.cardtable td.empty::before{content:none}
  /* On a phone the lines are cards already: the room card becomes a tinted panel around them */
  .room-card .tablewrap{background:transparent;padding:8px}
  table.data.cardtable td.card-actions{justify-content:flex-end;padding-top:8px}
  table.data.cardtable td.card-actions::before{content:none}
  table.data.cardtable td.card-actions .actmenu-trigger,table.data.cardtable td .rr-clear-btn{width:44px;height:44px}
  /* Value-side inputs (e.g. inline shipment ETA/tracking/courier) fill the cell */
  table.data.cardtable td .ship-inline-input{width:100%;min-height:38px;font-size:16px;border-color:var(--border)}
  /* Grouped shipments table: the .ship-group row becomes a section header, not a card */
  table.data.cardtable tr.ship-group{background:transparent;border:0;box-shadow:none;margin:10px 0 0;padding:0}
  table.data.cardtable tr.ship-group td{display:block;padding:6px 2px;border-top:0;border-bottom:1px solid var(--border-strong);background:transparent}
  table.data.cardtable tr.ship-group td::before{content:none}
  table.data.cardtable tr.ship-group+tr{border-top-left-radius:0;border-top-right-radius:0}
  /* Receive page (handheld): full-width scan box (16px = no iOS zoom), thumb-sized +/-,
     and job-group rows become section headers rather than cards. Desktop is untouched —
     every rule here lives inside the 768px breakpoint. */
  #rcv-scan{width:100%;max-width:none!important;font-size:16px;min-height:44px}
  .rcv-step{min-height:44px;min-width:52px;font-size:18px;padding:6px 12px}
  table.data.cardtable td.card-actions .rcv-step{margin-left:8px}
  table.data.cardtable tr.rcv-jobrow{background:transparent;border:0;box-shadow:none;margin:12px 0 4px;padding:0}
  table.data.cardtable tr.rcv-jobrow td{display:block;padding:6px 2px;background:transparent!important;border:0;border-bottom:1px solid var(--border-strong);font-size:12px;font-weight:600}
  table.data.cardtable tr.rcv-jobrow td::before{content:none}

  /* Modal: full-screen, single-column fields, sticky action bar */
  .modal-bg{padding:0;align-items:stretch}
  .modal,.modal.lg,.modal.xl{max-width:100%;width:100%;max-height:100%;height:100%;border-radius:0;border:0}
  .modal-head{border-radius:0}
  .modal-body{padding:16px;flex:1}
  .modal-foot{position:sticky;bottom:0;flex-wrap:wrap;padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -2px 8px rgba(0,0,0,.10)}
  .modal-foot .btn{flex:1;justify-content:center;min-height:46px}
  .modal-foot .left{margin-right:0;flex-basis:100%;display:flex;gap:8px}
  .field-row{display:block}               /* stack half-width field pairs single-column */

  /* Realtime UI kept clear of thumbs and primary buttons */
  .failpanel{left:8px;right:8px;bottom:8px;max-width:none}
  .toast-stack{left:8px;right:8px;bottom:8px}
  .toast{max-width:none;min-width:0}
}