:root{
  --bg:#0f141b; --panel:#171f29; --line:#273341; --ink:#e7edf3; --muted:#8aa0b4;
  --accent:#2b9bf4; --ok:#28c76f; --off:#6b7a8a; --err:#ff5c6c;
}
*{box-sizing:border-box}
/* an id selector's display would otherwise outrank the hidden attribute, so say it louder */
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font:14px/1.45 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.screen{height:100%}

/* login */
#login{display:flex;align-items:center;justify-content:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px;width:320px;display:flex;flex-direction:column;gap:12px}
.card h1{margin:0;font-size:22px;letter-spacing:.5px}
.card .sub{margin:0 0 8px;color:var(--muted)}
.card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.card input{background:#0d1219;border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--ink);font-size:14px}
.card input:focus{outline:none;border-color:var(--accent)}
button{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 14px;font-size:14px;cursor:pointer}
button:hover{filter:brightness(1.08)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.err{color:var(--err);margin:0;font-size:13px}

/* app shell */
#app{display:flex;flex-direction:column;height:100%}
header{height:48px;flex:0 0 48px;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
header .spacer{flex:1}
.who{color:var(--muted)}
.stat{color:var(--muted);font-size:12px}
.nav{display:flex;gap:4px;margin-left:8px}
.tab{background:transparent;color:var(--muted);border:1px solid transparent;border-radius:8px;padding:6px 12px;font-size:13px}
.tab.active{background:#0d1219;color:var(--ink);border-color:var(--line)}
#views{flex:1;min-height:0;position:relative}
.view{position:absolute;inset:0}

/* map view */
#view-map{display:grid;grid-template-columns:1fr 320px;grid-template-areas:"map list"}
#map{grid-area:map;height:100%;background:#0d1219}
#list{grid-area:list;border-left:1px solid var(--line);overflow:auto;background:var(--panel)}
.veh{padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.veh:hover{background:#1d2731}
.veh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.veh .info{flex:1;min-width:0}
.veh .plate{font-weight:600}
.veh .meta{color:var(--muted);font-size:12px;margin-top:2px}
.vehbtns{flex:0 0 auto;display:flex;flex-direction:column;gap:4px}
.livebtn{background:transparent;border:1px solid var(--line);color:var(--accent);border-radius:7px;padding:5px 9px;font-size:12px;white-space:nowrap}
.livebtn:hover{background:#1d2731}
.recs{background:#0d1219;border-top:1px solid var(--line);padding:10px 14px;max-height:120px;overflow:auto;width:100%}
.recs .rhd{color:var(--muted);font-size:12px;margin-bottom:6px}
.recs .rrow{font-size:12px;padding:3px 0;display:flex;justify-content:space-between;gap:10px}
.recs .rrow span{color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.on{background:var(--ok)} .dot.off{background:var(--off)}
.empty{padding:16px;color:var(--muted)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink)}

/* billing view */
#view-billing{overflow:auto}
#billing{padding:18px;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.sec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.sec h2{margin:0 0 12px;font-size:15px}
.cards{display:flex;flex-wrap:wrap;gap:12px}
.bcard{background:#0d1219;border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:150px}
.bcard .n{font-size:26px;font-weight:700}
.bcard .l{color:var(--muted);font-size:12px;margin-top:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.row select,.row input{background:#0d1219;border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--ink);font-size:14px;min-width:120px}
.row input[type=number]{width:90px;min-width:0}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500}
td .mini{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:5px 10px;font-size:12px;margin-right:6px}
td select.mini{padding:4px 6px}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.badge.active{background:rgba(40,199,111,.15);color:var(--ok)}
.badge.expiring{background:rgba(255,179,71,.15);color:#ffb347}
.badge.arrears{background:rgba(255,92,108,.15);color:var(--err)}
.badge.inactive{background:rgba(139,160,180,.15);color:var(--muted)}
.msg{font-size:13px;min-height:18px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--err)}

/* video modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(720px,92vw);max-height:88vh;overflow:hidden;display:flex;flex-direction:column}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-body{padding:0;background:#000;min-height:260px;display:flex;align-items:center;justify-content:center}
.modal-body iframe,.modal-body video{width:100%;height:405px;border:0;background:#000}
.modal-note{color:var(--muted);font-size:13px;padding:24px;text-align:center;line-height:1.6}
.modal-note code{color:var(--ink);background:#0d1219;padding:1px 6px;border-radius:5px}
.qty{font-variant-numeric:tabular-nums}
@media (max-width:720px){
  #view-map{grid-template-columns:1fr;grid-template-rows:1fr 40vh;grid-template-areas:"map" "list"}
  #list{border-left:0;border-top:1px solid var(--line)}
  .stat{display:none}
}