/* Classic fleet console: dark-blue top bar, vehicle table on the left, map in the middle,
   tabbed panel at the bottom that opens on demand. */
:root{
  --bar:#26384f; --bar2:#35506f; --bg:#e9edf2; --panel:#fff; --panel2:#f5f7fa; --line:#d3dae3; --line2:#e6ebf1;
  --text:#1d2733; --muted:#5b6b7e; --accent:#2f80ed; --sel:#e8f1fd; --ok:#27ae60; --warn:#f2994a; --off:#98a2b3; --danger:#d92d20;
}
@media (prefers-color-scheme: dark){
  :root{--bar:#1a2535; --bar2:#2a3b52; --bg:#0f141b; --panel:#161c25; --panel2:#1b222d; --line:#2a3340; --line2:#222a35;
        --text:#e4e9f0; --muted:#8c99aa; --accent:#4a97f5; --sel:#1c2c44; --off:#6b7480}
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.4 system-ui,Segoe UI,Roboto,sans-serif}
button,select,input{font:inherit}
.sp{flex:1}

.app{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) auto;height:100vh}

/* top bar */
.bar{grid-column:1/3;background:var(--bar);color:#cfd8e3;display:flex;align-items:center;gap:6px;padding:0 12px}
.brand{color:#fff;font-size:14px;margin-right:14px}
.navtab{padding:6px 12px;border-radius:5px}
.navtab.on{background:var(--bar2);color:#fff}
.barinfo{padding:0 8px;color:#aebdd0}
.barbtn{background:transparent;border:1px solid #4a6280;color:#e4ebf4;border-radius:5px;padding:5px 12px;cursor:pointer}
.barbtn:hover{background:var(--bar2)}

/* vehicle table */
.left{grid-column:1;grid-row:2/4;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.ltabs{display:flex;border-bottom:1px solid var(--line)}
.ltabs span{padding:10px 14px;color:var(--muted)}
.ltabs span.on{color:var(--text);border-bottom:2px solid var(--accent);font-weight:600}
.filter{padding:8px;border-bottom:1px solid var(--line2)}
.filter input{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);color:var(--text)}
.tablewrap{overflow:auto;flex:1}
table.units{width:100%;border-collapse:collapse}
.units th{font-weight:600;color:var(--muted);text-align:left;padding:6px 8px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:12px;position:sticky;top:0}
.units td{padding:8px;border-bottom:1px solid var(--line2)}
.units tr.row{cursor:pointer}
.units tr.row:hover td{background:var(--panel2)}
.units tr.sel td{background:var(--sel)}
.units tr.detail td{background:var(--panel2);color:var(--muted);font-size:12px;padding:6px 8px 9px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--off)}
.dot.on{background:var(--ok)} .dot.mv{background:var(--warn)}
.empty{padding:14px;color:var(--muted)}

/* map */
.mapwrap{grid-column:2;grid-row:2;position:relative;min-height:0;background:var(--panel2)}
#map{position:absolute;inset:0}
.follow{position:absolute;right:10px;bottom:22px;z-index:500;background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:5px 10px;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.2);display:flex;gap:6px;align-items:center}

/* bottom tabbed panel (collapsed by default so the map is what you see) */
.bottom{grid-column:2;grid-row:3;background:var(--panel);border-top:1px solid var(--line);height:36px;overflow:hidden;transition:height .22s ease;display:flex;flex-direction:column}
.bottom.up{height:min(360px,52vh)}
.btabs{display:flex;align-items:center;height:36px;flex:none;border-bottom:1px solid var(--line2);padding:0 6px;background:var(--panel2)}
.btabs span[data-tab]{padding:0 14px;line-height:36px;color:var(--muted);cursor:pointer;user-select:none}
.btabs span[data-tab]:hover{color:var(--text)}
.btabs span[data-tab].on{color:var(--text);font-weight:600;box-shadow:inset 0 -2px var(--accent)}
.bottom:not(.up) .btabs span[data-tab].on{box-shadow:none;font-weight:400;color:var(--muted)}
.vt{color:var(--muted);padding-right:10px}
.colbtn{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:6px 10px;font-size:12px}
.bottom.up .colbtn{transform:rotate(180deg)}
.bbody{flex:1;min-height:0;overflow:auto;padding:10px 12px}
.pane{display:none} .pane.on{display:block}

.ptool{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:10px}
.ptool label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.ptool input,.ptool select{padding:6px 8px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);color:var(--text)}
.stat{color:var(--muted);font-size:12px;margin-left:6px}
.stat b{color:var(--text);margin-right:8px}
.hint{color:var(--muted);font-size:12px}
.note{margin:0 0 10px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--text);font-size:13px}
a.btn{text-decoration:none;display:inline-block}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:5px;padding:6px 12px;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{opacity:.5;cursor:default}

/* camera tiles */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cam{position:relative;aspect-ratio:16/9;background:#05070a;border-radius:6px;border:1px solid var(--line);overflow:hidden;cursor:pointer}
.cam video{width:100%;height:100%;object-fit:contain;display:block}
.cam .msg{position:absolute;inset:0;display:grid;place-items:center;color:#7d8794;font-size:12px;text-align:center;padding:8px;pointer-events:none}
.cam .tag{position:absolute;left:6px;top:6px;font-size:10px;color:#dfe6ee;background:rgba(0,0,0,.65);padding:1px 6px;border-radius:4px}
.cam .live{position:absolute;right:6px;top:6px;font-size:10px;color:#fff;background:var(--danger);padding:1px 6px;border-radius:4px;display:none}
.cam.on .live{display:block}

/* playback */
.pbwrap{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,520px);gap:12px;align-items:start}
.pblist{max-height:200px;overflow:auto;border:1px solid var(--line2);border-radius:6px;padding:4px;color:var(--muted)}
.rec{display:flex;gap:10px;padding:7px 9px;border-radius:5px;cursor:pointer;color:var(--text)}
.rec:hover{background:var(--panel2)}
.rec span:last-child{margin-left:auto;color:var(--muted)}
.pbvideo{cursor:default}

/* trips and events */
.alist{font-size:13px}
.arow{display:flex;gap:12px;padding:6px 8px;border-bottom:1px solid var(--line2)}
.arow.click{cursor:pointer} .arow.click:hover{background:var(--panel2)}
.arow .t{color:var(--muted);flex:none;min-width:120px}
.arow .r{margin-left:auto;color:var(--muted);white-space:nowrap}

/* login */
.overlay{position:fixed;inset:0;background:rgba(10,16,26,.6);display:grid;place-items:center;z-index:2000}
.overlay[hidden]{display:none}
.login-card{width:min(340px,92vw);padding:20px;display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-card h2{margin:0;font-size:16px}
.login-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.login-card input{padding:9px 10px;border-radius:6px;border:1px solid var(--line);background:var(--panel2);color:var(--text)}
.err{color:var(--danger);min-height:1.2em;font-size:12px}

/* small screens: vehicle list becomes a strip above the map */
@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:42px auto minmax(240px,1fr) auto;height:100vh}
  .bar{grid-column:1}
  .left{grid-column:1;grid-row:2;max-height:150px;border-right:0;border-bottom:1px solid var(--line)}
  .mapwrap{grid-column:1;grid-row:3}
  .bottom{grid-column:1;grid-row:4}
  .bottom.up{height:55vh}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbwrap{grid-template-columns:minmax(0,1fr)}
  #whoami{display:none}
}