:root{
  --bg:#f4f5f7; --panel:#fff; --ink:#1c2330; --muted:#6b7385; --line:#e2e5ec;
  --red:#c8102e; --red-d:#9d0c24; --amber:#d98200; --green:#1e8e5a; --blue:#2563eb;
  --col-pending:#eef1f6; --col-collected:#fff4e0; --col-delivered:#e4f5ec;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#12151b; --panel:#1b2029; --ink:#e8ebf2; --muted:#98a1b5; --line:#2b3240;
    --col-pending:#181d26; --col-collected:#251f13; --col-delivered:#12241b;}
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
header{background:var(--red);color:#fff;padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:sticky;top:0;z-index:10}
header h1{font-size:18px;margin:0;flex:1;white-space:nowrap;display:flex;align-items:center;gap:10px}
.who{font-size:13px;opacity:.95}
.who b{display:inline-block;background:rgba(0,0,0,.25);border-radius:6px;padding:0 7px;margin-left:4px;text-transform:capitalize}
.live{width:9px;height:9px;border-radius:50%;background:#7CFC9A;display:inline-block;margin-right:6px}
.live.off{background:#ffb3b3}
.btn{background:var(--red);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit;font-weight:600}
.btn:hover{background:var(--red-d)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--line)}
header .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
header .btn.ghost:hover{background:rgba(255,255,255,.15)}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.green{background:var(--green)} .btn.amber{background:var(--amber)}
main{padding:14px 16px;max-width:1400px;margin:auto}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.bar .grow{flex:1}
.bar input[type=search],.bar select{padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit}
.bar input[type=search]{min-width:200px}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:820px){.board{grid-template-columns:1fr}}
.col{border-radius:12px;padding:10px;min-height:200px;border:2px solid transparent}
.col[data-status=pending]{background:var(--col-pending)}
.col[data-status=collected]{background:var(--col-collected)}
.col[data-status=delivered]{background:var(--col-delivered)}
.col.over{border-color:var(--blue)}
.col h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin:2px 4px 10px;display:flex;justify-content:space-between}
.col h2 span{background:var(--panel);border-radius:10px;padding:0 9px;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:10px;padding:10px 12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card[draggable=true]{cursor:grab}
.card.p-urgent{border-left-color:var(--amber)} .card.p-emergency{border-left-color:var(--red)}
.card.p-routine{border-left-color:var(--green)}
.card.dragging{opacity:.4}
.card .top{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:4px}
.tag{font-size:11px;font-weight:700;text-transform:uppercase;border-radius:5px;padding:1px 7px;color:#fff;background:var(--green)}
.tag.urgent{background:var(--amber)} .tag.emergency{background:var(--red)}
.ref{color:var(--muted);font-size:12px}
.route{margin:4px 0;font-size:14px}
.route div{display:flex;gap:6px}
.route b{min-width:44px;color:var(--muted);font-weight:600;font-size:12px;padding-top:1px}
.route span{font-weight:600}
.meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rider-chip{display:inline-block;background:var(--line);border-radius:10px;padding:0 8px;font-size:12px;color:var(--ink)}
.empty{color:var(--muted);text-align:center;padding:20px 0;font-size:13px}
dialog{border:0;border-radius:14px;padding:0;width:min(560px,94vw);background:var(--panel);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog form{padding:18px;display:grid;gap:10px}
dialog h3{margin:0 0 4px}
label{font-size:13px;color:var(--muted);display:grid;gap:3px}
input,select,textarea{font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:500px){.row2{grid-template-columns:1fr}}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
ul.log{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted)}
.staff-list{display:grid;gap:6px;max-height:40vh;overflow:auto}
.staff-list div{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid var(--line);border-radius:8px;flex-wrap:wrap}
.staff-list .off{opacity:.55}
.panel[hidden]{display:none}
.err{color:var(--red);font-size:13px;min-height:1em}
#login{min-height:100vh;display:grid;place-items:center;padding:16px}
#login form{background:var(--panel);border-radius:14px;padding:26px;width:min(380px,100%);display:grid;gap:12px;box-shadow:0 8px 30px rgba(0,0,0,.15)}
#login h1{margin:0;font-size:22px} #login p{margin:0;color:var(--muted);font-size:14px}
#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:10px;z-index:99;max-width:90vw}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;border-radius:5px;padding:1px 7px;white-space:nowrap}
.pill.ok{background:#e3f3eb;color:#17704a}.pill.gap{background:#fdf1dc;color:#9a5b00}
@media (prefers-color-scheme:dark){.pill.ok{background:#173026;color:#5fd0a0}.pill.gap{background:#33270f;color:#f0b45c}}
.logo{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.logo.big{width:120px;height:120px;margin:0 auto;box-shadow:0 2px 10px rgba(0,0,0,.2)}
#login form{text-align:center} #login form label,#login form .err{text-align:left}
#archTable,#auditTable{border-spacing:0}
#archTable th,#archTable td,#auditTable th,#auditTable td{padding:8px 12px;text-align:left;vertical-align:top}
#archTable th:first-child,#auditTable th:first-child,#archTable td:first-child,#auditTable td:first-child{padding-left:2px}
#archTable th:last-child,#auditTable th:last-child,#archTable td:last-child,#auditTable td:last-child{padding-right:2px}