:root{--bg:#f4f6f8;--panel:#fff;--ink:#16202b;--muted:#5d6b79;--line:#e1e6eb;--accent:#1f6f5c;--accent-ink:#fff;--accent-soft:#e3f1ec;--warn:#a4471c;--warn-soft:#fbeee6;--blue-soft:#e7eefb;--blue:#2856a8;--side:#14212b;--side-ink:#cfd8df}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f161c;--panel:#17212a;--ink:#e6ecf1;--muted:#97a5b2;--line:#273440;--accent:#3fae8f;--accent-ink:#06231b;--accent-soft:#163a31;--warn:#f0a07a;--warn-soft:#3a2219;--blue-soft:#1b2a44;--blue:#8fb2f0;--side:#0b1116;--side-ink:#b7c3cc}}
:root[data-theme="dark"]{--bg:#0f161c;--panel:#17212a;--ink:#e6ecf1;--muted:#97a5b2;--line:#273440;--accent:#3fae8f;--accent-ink:#06231b;--accent-soft:#163a31;--warn:#f0a07a;--warn-soft:#3a2219;--blue-soft:#1b2a44;--blue:#8fb2f0;--side:#0b1116;--side-ink:#b7c3cc}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 18px}
.brand b{display:block;color:#fff;font-size:15px}.brand small{color:var(--side-ink);opacity:.7}
.logo{height:36px;padding:2px 5px;border-radius:8px;background:#fff;display:grid;place-items:center;flex:none}.logo img{height:32px;width:auto;display:block}
nav a{display:block;padding:7px 12px;border-radius:7px;color:var(--side-ink);text-decoration:none;margin-bottom:2px}
nav a:hover{background:rgba(255,255,255,.06)}nav a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
main{padding:28px 32px;min-width:0}
h1{font-size:22px;margin:0 0 4px}h2{font-size:16px;margin:0 0 12px}
.sub{color:var(--muted);margin:0 0 20px}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.bar .grow{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:18px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.tile small{color:var(--muted);display:block}.tile b{font-size:22px;display:block;margin-top:4px;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--panel);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}tbody tr.click:hover{background:var(--accent-soft)}
.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:12px}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--line);color:var(--ink);white-space:nowrap}
.pill.open{background:var(--warn-soft);color:var(--warn)}.pill.approved{background:var(--blue-soft);color:var(--blue)}.pill.paid,.pill.posted{background:var(--accent-soft);color:var(--accent)}.pill.draft{background:var(--line)}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 14px;border-radius:7px;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
button:hover,.btn:hover{border-color:var(--muted)}
.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.primary:hover{filter:brightness(1.07);border-color:var(--accent)}
.danger{color:var(--warn)}
.link{border:0;background:none;padding:0;color:var(--accent);font-weight:600}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
label{display:block;font-size:12px;color:var(--muted);font-weight:600}
label>input,label>select,label>textarea{margin-top:4px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
.form .wide{grid-column:1/-1}
.check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink);font-weight:400}.check input{width:auto}
.modal{position:fixed;inset:0;background:rgba(5,10,15,.55);display:grid;place-items:start center;padding:40px 16px;overflow:auto;z-index:10}
.sheet{background:var(--panel);border-radius:12px;width:min(920px,100%);padding:24px;position:relative;border:1px solid var(--line)}
.x{position:absolute;top:12px;right:12px;border:0;font-size:22px;line-height:1;padding:4px 10px;background:none}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:8px;z-index:20;max-width:90vw}
.toast.err{background:var(--warn);color:#fff}
.alert{background:var(--warn-soft);color:var(--warn);border-radius:8px;padding:10px 14px;margin-bottom:16px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.totals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.totals div{border:1px solid var(--line);border-radius:8px;padding:8px 12px}.totals b{display:block;font-size:17px}
.totals .net{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (max-width:860px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;padding:10px 16px}.brand{padding:4px 0 8px}nav{display:flex;overflow-x:auto;gap:4px}nav a{white-space:nowrap}main{padding:18px 16px}.split{grid-template-columns:1fr}.totals{grid-template-columns:1fr 1fr}}

#batch td{padding:4px 6px}#batch input,#batch select{padding:6px 8px}

.navh{display:block;padding:12px 12px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.55;font-weight:700}
.board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:14px;overflow-x:auto;align-items:start}
.board .col{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:120px}
.board h2{font-size:14px;margin:0 0 10px}
.dcard{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px;cursor:pointer}
.dcard:hover{border-color:var(--accent)}
.warnline{color:var(--warn);margin-top:4px}
button.sm,.btn.sm{padding:4px 10px;font-size:13px}
.pill.d-planned{background:var(--line)}.pill.d-dispatched{background:var(--blue-soft);color:var(--blue)}.pill.d-picked_up{background:var(--warn-soft);color:var(--warn)}.pill.d-delivered{background:var(--accent-soft);color:var(--accent)}
.hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 14px;color:var(--muted);font-weight:600}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
tr.sec td{padding-top:16px;border-bottom:0}tr.grand td{border-top:2px solid var(--ink)}
tr.je td{background:var(--bg)}
.splitrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.splitrow input{width:auto}
@media (max-width:860px){.board{grid-template-columns:repeat(4,240px)}.navh{display:none}}
a{color:var(--accent)}