/* Camera Recording Monitor */
:root{
  --bg:#f3f4f1;--panel:#ffffff;--ink:#16201c;--muted:#5d6b64;--line:#dfe3dc;--soft:#eceee8;
  --brand:#0f5c4a;--brand-ink:#ffffff;
  --rec:#12855a;--rec-bg:#dff3e8;--delay:#b26a00;--delay-bg:#fdeccb;--stop:#c0362c;--stop-bg:#fbe0dc;
  --unk:#5b6470;--unk-bg:#e4e7ea;--idle:#6b7280;--idle-bg:#eceef0;
  --chain-empty:#e6e9e2;--chain-future:repeating-linear-gradient(135deg,#eef0ea 0 6px,#f6f7f3 6px 12px);
  --shadow:0 1px 2px rgba(20,30,25,.06);
  --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
}
[data-theme=dark]{
  --bg:#0f1513;--panel:#161e1b;--ink:#e6ece8;--muted:#93a39b;--line:#27332e;--soft:#1c2622;
  --brand:#3fbf98;--brand-ink:#06231b;
  --rec:#3ccf8e;--rec-bg:#12382a;--delay:#f0b040;--delay-bg:#3d2e0d;--stop:#ff6f61;--stop-bg:#43191a;
  --unk:#a3adb8;--unk-bg:#262d33;--idle:#8b95a1;--idle-bg:#20262b;
  --chain-empty:#222c28;--chain-future:repeating-linear-gradient(135deg,#19211e 0 6px,#141b18 6px 12px);
  --shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--font)}
a{color:var(--brand)}
h1{font-size:20px;margin:0}
h2{font-size:15px;margin:0 0 10px}
small,.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-size:12.5px}
.topbar{display:flex;align-items:center;gap:18px;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand i{width:11px;height:11px;border-radius:50%;background:var(--stop);box-shadow:0 0 0 3px var(--stop-bg)}
.nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.nav a{padding:6px 11px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a[aria-current]{background:var(--brand);color:var(--brand-ink)}
.who{display:flex;align-items:center;gap:10px;color:var(--muted);white-space:nowrap}
.btn{font:inherit;font-weight:600;padding:6px 12px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--muted)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn-danger{color:var(--stop)}
.btn-sm{padding:3px 8px;font-size:12.5px}
.main{padding:18px 20px 60px;max-width:1700px;margin:0 auto}
.head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.head .spacer{flex:1}
.flash{padding:9px 12px;border-radius:6px;margin-bottom:14px;border:1px solid}
.flash-ok{background:var(--rec-bg);border-color:var(--rec);color:var(--ink)}
.flash-err{background:var(--stop-bg);border-color:var(--stop);color:var(--ink)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;box-shadow:var(--shadow)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],select{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
input:focus,select:focus,.btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* status */
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-RECORDING{color:var(--rec);background:var(--rec-bg)}
.s-RECORDING::before{animation:pulse 1.6s infinite}
.s-DELAYED{color:var(--delay);background:var(--delay-bg)}
.s-STOPPED{color:var(--stop);background:var(--stop-bg)}
.s-UNKNOWN,.s-NEVER{color:var(--unk);background:var(--unk-bg)}
.s-IDLE{color:var(--idle);background:var(--idle-bg)}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.s-RECORDING::before{animation:none}}

/* summary tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--unk);border-radius:8px;padding:10px 12px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.tile b{display:block;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.tile span{color:var(--muted);font-weight:600;font-size:12.5px}
.tile[aria-pressed=true]{outline:2px solid var(--brand)}
.t-ALL{border-left-color:var(--brand)}.t-RECORDING{border-left-color:var(--rec)}.t-DELAYED{border-left-color:var(--delay)}
.t-STOPPED{border-left-color:var(--stop)}.t-STOPPED b{color:var(--stop)}
.servers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-bottom:14px}
.srv{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.srv .name{font-weight:700}
.srv .facts{color:var(--muted);font-size:12.5px;flex:1;min-width:180px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--stop);flex:none}
.dot.on{background:var(--rec)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters .spacer{flex:1}

/* camera cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.cam{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--unk);border-radius:8px;padding:10px 12px;text-decoration:none;color:inherit;display:block}
.cam:hover{border-color:var(--muted)}
.cam.c-RECORDING{border-top-color:var(--rec)}.cam.c-DELAYED{border-top-color:var(--delay)}.cam.c-STOPPED{border-top-color:var(--stop)}
.cam .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.cam .nm{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam .sub{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cam .facts{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;margin:8px 0 6px}
.cam .facts b{color:var(--ink);font-weight:600}

/* the time chain */
.chain{position:relative;height:14px;border-radius:3px;background:var(--chain-empty);overflow:hidden}
.chain i{position:absolute;top:0;bottom:0;background:var(--rec);min-width:1px}
.chain .future{background:var(--chain-future)}
.chain .now{background:var(--ink);width:2px;min-width:2px;z-index:2}
.chain.big{height:22px}
.tl{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.tl-in{min-width:900px}
.tl-row{display:grid;grid-template-columns:190px 1fr 86px 56px;gap:12px;align-items:center;padding:5px 12px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.tl-row:hover{background:var(--soft)}
.tl-head{border-top:0;position:sticky;top:0;background:var(--panel);font-size:12px;color:var(--muted);font-weight:700;padding-top:9px;padding-bottom:7px}
.tl-row .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-row .nm small{display:block;font-weight:400}
.tl-row .num{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}
.axis{position:relative;height:16px}
.axis span{position:absolute;transform:translateX(-50%);font-size:11px;font-variant-numeric:tabular-nums}
.axis span:first-child{transform:none}.axis span:last-child{transform:translateX(-100%)}
.hours{position:absolute;inset:0;pointer-events:none}
.hours b{position:absolute;top:0;bottom:0;width:1px;background:var(--panel);opacity:.55}
.tip{position:fixed;z-index:50;background:var(--ink);color:var(--bg);padding:4px 8px;border-radius:5px;font-size:12px;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:14px;color:var(--muted);font-size:12.5px;align-items:center;flex-wrap:wrap}
.legend i{display:inline-block;width:22px;height:10px;border-radius:2px;vertical-align:middle;margin-right:5px;background:var(--chain-empty)}
.legend i.r{background:var(--rec)}.legend i.f{background:var(--chain-future)}

/* tables */
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:7px 10px;border-top:1px solid var(--line);vertical-align:middle}
th{font-size:12px;color:var(--muted);border-top:0;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-wrap{overflow-x:auto}
.facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.facts-grid div b{display:block;font-size:17px}
.facts-grid div span{color:var(--muted);font-size:12.5px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.cols{grid-template-columns:1fr}.topbar{flex-wrap:wrap}}
.token{font-family:var(--mono);background:var(--soft);padding:8px 10px;border-radius:6px;word-break:break-all;display:block;margin:6px 0;user-select:all}
pre.cmd{background:var(--soft);padding:10px;border-radius:6px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;margin:6px 0}
.empty{padding:26px;text-align:center;color:var(--muted)}
.login{max-width:360px;margin:9vh auto;padding:0 16px}
.login .panel{padding:22px}
.login label{display:block;font-weight:600;margin:12px 0 4px}
.login input{width:100%}
.stale{color:var(--stop);font-weight:600}

/* month calendar of one vehicle: fills the page below the top bar */
.cal-wrap{display:flex;flex-direction:column;min-height:calc(100vh - 150px)}
.cal-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:10px}
.cal-facts{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);flex:1}
.cal-facts b{color:var(--ink);font-size:15px}
.cal-facts .stale b{color:var(--stop)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(104px,1fr);grid-template-rows:auto;gap:6px;flex:1}
.cal-dow{font-size:12px;font-weight:700;color:var(--muted);padding:0 4px 2px;align-self:end}
.cal-day{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;min-width:0}
a.cal-day:hover{border-color:var(--muted)}
.cal-blank{background:none;border:0}
.cal-future{background:none;border-style:dashed;color:var(--muted)}
.cal-today{outline:2px solid var(--brand);outline-offset:-1px}
.cal-none{background:var(--stop-bg);border-color:transparent}
.cal-row{display:flex;align-items:center;gap:6px;min-height:22px}
.cal-num{font-weight:700;font-size:15px;flex:1}
.cal-gap{font-size:11.5px;font-weight:700;color:var(--delay);background:var(--delay-bg);padding:1px 7px;border-radius:999px;white-space:nowrap}
.cal-hours{font-size:17px;font-weight:700;color:var(--rec);font-variant-numeric:tabular-nums;margin-top:auto}
.cal-zero{color:var(--stop);font-size:14px}
.cal-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.cal-day .chain{height:12px;flex:none}
@media (max-width:900px){.cal{grid-auto-rows:auto;gap:3px}.cal-sub,.cal-gap{display:none}.cal-hours{font-size:12.5px}.cal-day{padding:5px}}

/* where a day's recording is held: one colour per state, the same everywhere */
:root{--h-both:#12855a;--h-local:#2f6fd0;--h-live:#e3b23c;--h-overdue:#e0731d;--h-partial:#8e5bc9;--h-missing:#c0362c}
[data-theme=dark]{--h-both:#3ccf8e;--h-local:#5b9bf5;--h-live:#e8c35a;--h-overdue:#f08a3c;--h-partial:#b089e6;--h-missing:#ff6f61}
i.h-BOTH,.sheet tbody td.h-BOTH{background:var(--h-both)}i.h-LOCAL,.sheet tbody td.h-LOCAL{background:var(--h-local)}i.h-LIVE,.sheet tbody td.h-LIVE{background:var(--h-live)}
i.h-OVERDUE,.sheet tbody td.h-OVERDUE{background:var(--h-overdue)}i.h-PARTIAL,.sheet tbody td.h-PARTIAL{background:var(--h-partial)}i.h-MISSING,.sheet tbody td.h-MISSING{background:var(--h-missing)}
.held{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;color:#fff;white-space:nowrap}
.held.h-BOTH{background:var(--h-both)}.held.h-LOCAL{background:var(--h-local)}.held.h-LIVE{background:var(--h-live);color:#3a2c00}
.held.h-OVERDUE{background:var(--h-overdue)}.held.h-PARTIAL{background:var(--h-partial)}.held.h-MISSING{background:var(--h-missing)}
[data-theme=dark] .held{color:#0b1210}
.h-chip::before{display:none}.h-chip.h-LOCAL{background:var(--h-local);color:#fff}.h-chip.h-LIVE{background:var(--h-live);color:#3a2c00}
.ht-BOTH{border-left-color:var(--h-both)}.ht-LOCAL{border-left-color:var(--h-local)}.ht-LIVE{border-left-color:var(--h-live)}
.ht-OVERDUE{border-left-color:var(--h-overdue)}.ht-PARTIAL{border-left-color:var(--h-partial)}.ht-MISSING{border-left-color:var(--h-missing)}
.ht-MISSING b,.ht-OVERDUE b{color:var(--h-missing)}
.sheet-wrap{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:auto;max-height:calc(100vh - 150px)}
table.sheet{border-collapse:separate;border-spacing:0;width:auto}
.sheet th,.sheet td{padding:0;border:0;border-right:1px solid var(--panel);border-bottom:1px solid var(--panel)}
.sheet thead th{position:sticky;top:0;background:var(--panel);z-index:3;font-size:10.5px;text-align:center;height:20px;color:var(--muted)}
.sheet thead tr:nth-child(2) th{top:20px}
.sheet .sh-month{text-align:left;padding-left:4px;border-left:2px solid var(--line);font-size:11.5px;color:var(--ink)}
.sheet .sh-d{min-width:13px;width:13px;font-weight:400}
.sheet .sh-mon{font-weight:700;color:var(--ink)}
.sheet tbody td{height:22px;min-width:13px;background:var(--chain-empty)}
.sheet .sh-name{position:sticky;left:0;z-index:2;background:var(--panel);text-align:left;padding:2px 10px;min-width:170px;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;border-right:1px solid var(--line)}
.sheet thead .sh-name{z-index:4;font-size:12px}
.sheet .sh-name small{margin-left:8px;font-weight:400}
.sheet .sh-fact{background:var(--panel);padding:0 8px;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.sheet thead th[rowspan]{padding:0 8px;font-size:11.5px;text-align:left;white-space:nowrap}
.sheet tbody tr:hover .sh-name,.sheet tbody tr:hover .sh-fact{background:var(--soft)}
.sheet tbody td[data-c]:hover{outline:2px solid var(--ink);outline-offset:-2px}

/* missing spans: red inside the recording span, on every chain */
.chain .gap{background:var(--stop)}
.legend i.g{background:var(--stop)}
.hours b.hr{opacity:.9;width:2px}
.cam-gaps{font-size:12px;color:var(--muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-gaps.has{color:var(--stop);font-weight:600}
.zoom{display:flex;gap:4px;align-items:center}
.tl-row{grid-template-columns:190px 1fr 86px 130px}
.hourly{overflow-x:auto}
.hr-row{display:grid;grid-template-columns:52px minmax(700px,1fr) 150px;gap:10px;align-items:center;padding:2px 0}
.hr-row .chain{height:18px}
.hr-row .num{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
.hr-head .axis span{font-size:11px}
textarea{font:inherit;font-family:var(--mono);font-size:12.5px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);width:100%}

/* softer chain colours: light green for recorded, light red for missing */
:root{--chain-rec:#9fd8b4;--chain-gap:#f2a59d;--chain-empty:#eceee9}
[data-theme=dark]{--chain-rec:#3f8f68;--chain-gap:#a8524c;--chain-empty:#222c28}
.chain i{background:var(--chain-rec)}
.chain .gap{background:var(--chain-gap)}
.chain .future{background:var(--chain-future)}
.chain .now{background:var(--ink)}
.legend i.r{background:var(--chain-rec)}
.legend i.g{background:var(--chain-gap)}
.cal-none{background:#fdeeec}
[data-theme=dark] .cal-none{background:#2e1c1c}