/* IMFA MineEdge — light theme, matched to imfa.minocular.com */
:root{
  --imfa:#F5821F; --imfa-dk:#DC6E0C; --imfa-lt:#FDF0E4;
  --accent:#C6DFE5;                 /* tenant accent — active nav */
  --warn:#ED5565; --ok:#2E9E5B; --info:#2A49FC;
  --page:#F1F3F6; --card:#FFFFFF; --rail-ink:#FFFFFF;
  --line:#E2E6EB; --line-2:#EDF0F3;
  --ink:#22282F; --ink-2:#5A6472; --ink-3:#8994A3;
  --veh:#E8710A; --hum:#1B7FA8;
  --drive:#1B7A4B; --ore:#C99A10;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:var(--page);color:var(--ink);
  font:13px/1.45 "Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------------- shell ---------------- */
#app{height:100%;display:grid;grid-template-columns:238px 1fr;grid-template-rows:64px 1fr}

#rail{grid-row:1/3;background:var(--imfa);display:flex;flex-direction:column;overflow:hidden}
#rail .brand{background:#fff;height:64px;display:flex;align-items:center;padding:0 18px;flex:0 0 auto}
#rail .brand img{height:34px;width:auto}
#rail nav{display:flex;flex-direction:column;padding:6px 0;overflow-y:auto}
#rail nav button{
  display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;
  color:var(--rail-ink);font:inherit;font-size:12.5px;font-weight:500;letter-spacing:.04em;
  padding:14px 18px;text-align:left;width:100%;text-transform:uppercase;
}
#rail nav button svg{width:17px;height:17px;flex:0 0 17px;opacity:.95}
#rail nav button:hover{background:rgba(255,255,255,.14)}
#rail nav button.on{background:var(--accent);color:#123;font-weight:600}
#rail nav button.on svg{opacity:1}
#rail .foot{margin-top:auto;padding:12px 18px;color:rgba(255,255,255,.86);font-size:10.5px;line-height:1.7;border-top:1px solid rgba(255,255,255,.22)}
#rail .foot b{color:#fff}

header{
  grid-column:2;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 18px;
}
header .burger{
  width:38px;height:34px;border-radius:5px;background:var(--imfa);border:0;cursor:pointer;
  display:grid;place-items:center;
}
header .burger span{display:block;width:16px;height:2px;background:#fff;box-shadow:0 5px 0 #fff,0 -5px 0 #fff}
header .ttl{font-size:15px;font-weight:600;letter-spacing:.01em}
header .sub{font-size:11px;color:var(--ink-3)}
header .sp{flex:1}
.chip{
  display:flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);
  border-radius:6px;font-size:11.5px;color:var(--ink-2);background:#fff;
}
.chip b{color:var(--ink);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.dot.up{background:var(--ok);box-shadow:0 0 0 3px rgba(46,158,91,.16);animation:pulse 2s infinite}
.dot.down{background:var(--warn)}
@keyframes pulse{50%{opacity:.45}}
.who{display:flex;align-items:center;gap:9px;padding-left:14px;border-left:1px solid var(--line)}
.who .av{width:32px;height:32px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:700;color:#124;font-size:12px}
.who .nm{font-size:12.5px;font-weight:600;line-height:1.2}
.who .rl{font-size:10.5px;color:var(--ink-3)}

/* ---------------- pages ---------------- */
#body{grid-column:2;overflow:hidden;position:relative}
.page{display:none;height:100%;flex-direction:column}
.page.on{display:flex}

.phead{padding:16px 20px 0;flex:0 0 auto}
.phead h1{margin:0;font-size:17px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.phead .lede{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.lg{
  display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:6px 12px;font-size:11.5px;color:var(--ink-2);box-shadow:var(--shadow);
}
.lg i{width:9px;height:9px;border-radius:50%}
.lg b{color:var(--ink);font-weight:600}

.split{flex:1;display:grid;grid-template-columns:236px 1fr 312px;gap:14px;padding:14px 20px 18px;min-height:0}
aside.pane{background:var(--card);border:1px solid var(--line);border-radius:9px;overflow-y:auto;box-shadow:var(--shadow)}
.block{padding:13px 14px;border-bottom:1px solid var(--line-2)}
.block:last-child{border-bottom:0}
.block h2{margin:0 0 10px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kpi{background:var(--imfa-lt);border:1px solid #F6DCC2;border-radius:8px;padding:9px 10px}
.kpi b{display:block;font-size:22px;line-height:1.15;font-weight:700;color:var(--imfa-dk)}
.kpi span{font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.kpi.plain{background:#F7F9FA;border-color:var(--line)}
.kpi.plain b{color:var(--ink)}

.unit{
  display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px;border-radius:7px;cursor:pointer;margin-bottom:4px;border:1px solid transparent;
}
.unit:hover{background:#F6F8F9}
.unit.sel{background:var(--imfa-lt);border-color:var(--imfa)}
.unit .ic{
  width:30px;height:30px;border-radius:7px;position:relative;color:#fff;
  display:grid;place-items:center;
}
.unit .ic svg{width:19px;height:19px;opacity:.95}
.unit .ic em{
  position:absolute;right:-3px;bottom:-4px;font-style:normal;font-size:8.5px;font-weight:800;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:0 3px;line-height:12px;
}
.unit .ic.v{background:var(--veh)} .unit .ic.h{background:var(--hum)}
.unit .nm{font-size:12px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit .sub{font-size:10px;color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unit .zn{text-align:right;font-size:9.5px;color:var(--ink-3);white-space:nowrap;max-width:104px}
.unit .zn b{display:block;font-size:10.5px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-block;padding:1px 7px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.04em}
.b-in{background:#E3F5EA;color:#1E7A45} .b-out{background:#FDE7E9;color:#C33} .b-idle{background:#EEF1F4;color:var(--ink-3)}

.lvl{display:grid;grid-template-columns:64px 1fr 24px;gap:8px;align-items:center;padding:5px 6px;border-radius:5px;cursor:pointer;font-size:11px;color:var(--ink-2)}
.lvl:hover{background:#F6F8F9}
.lvl.on{background:var(--imfa-lt);color:var(--imfa-dk);font-weight:700}
.lvl .bar{height:5px;background:#EDF0F3;border-radius:3px;overflow:hidden}
.lvl .bar i{display:block;height:100%;background:var(--imfa)}
.lvl .n{text-align:right;color:var(--ink-3);font-size:10px}

/* map */
main.stage{background:var(--card);border:1px solid var(--line);border-radius:9px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
canvas{display:block;width:100%;height:100%;touch-action:none}
#view2d,#rview2d{cursor:grab} #view2d:active,#rview2d:active{cursor:grabbing}
.vwrap{position:absolute;inset:0;display:none} .vwrap.on{display:block}
.tools{
  position:absolute;top:10px;right:10px;display:flex;gap:0;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:var(--shadow);
}
.tbtn{background:#fff;border:0;border-right:1px solid var(--line-2);color:var(--ink-2);font:inherit;font-size:10.5px;padding:7px 10px;cursor:pointer;white-space:nowrap}
.tbtn:last-child{border-right:0}
.tbtn:hover{background:#F3F5F7;color:var(--ink)}
.tbtn.on{background:var(--imfa);color:#fff;font-weight:600}
.hint{position:absolute;left:12px;bottom:10px;font-size:10.5px;color:var(--ink-3);background:rgba(255,255,255,.92);padding:4px 9px;border-radius:5px;border:1px solid var(--line-2)}
.scalebar{position:absolute;left:12px;bottom:38px;font-size:9.5px;color:var(--ink-2);background:rgba(255,255,255,.9);padding:3px 6px;border-radius:4px}
.scalebar i{display:block;height:5px;border:1px solid var(--ink-2);border-top:0;margin-bottom:2px}

.feed{font-size:11.5px}
.fitem{padding:7px 0;border-bottom:1px solid var(--line-2);display:grid;grid-template-columns:auto 1fr;gap:9px}
.fitem:last-child{border-bottom:0}
.fitem time{color:var(--ink-3);font-size:10px}
.fitem .z{color:var(--imfa);font-weight:700;font-size:10px}

/* replay bar */
.rbar{
  position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  padding:10px 14px;display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;
}
.rbar input[type=range]{width:100%;accent-color:var(--imfa)}
.rbar .t{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.rbar .t b{color:var(--ink);font-size:13px}

/* forms + tables */
.scroll{flex:1;overflow:auto;padding:14px 20px 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:15px;margin-bottom:14px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
label{display:block;font-size:10.5px;color:var(--ink-3);margin-bottom:4px;letter-spacing:.03em;font-weight:600}
input,select{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:8px 10px;font:inherit;font-size:12px;width:100%}
input:focus,select:focus{outline:0;border-color:var(--imfa);box-shadow:0 0 0 3px rgba(245,130,31,.14)}
.row{display:grid;gap:10px;margin-bottom:10px}
.btn{background:var(--imfa);border:0;color:#fff;font:inherit;font-size:12px;font-weight:600;padding:9px 17px;border-radius:6px;cursor:pointer}
.btn:hover{background:var(--imfa-dk)}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:500}
.btn.ghost:hover{border-color:var(--ink-3)}
table{width:100%;border-collapse:collapse;font-size:11.5px}
th{text-align:left;padding:9px 10px;background:#F7F9FA;color:var(--ink-3);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;position:sticky;top:0;border-bottom:1px solid var(--line)}
td{padding:7px 10px;border-bottom:1px solid var(--line-2)}
tr:hover td{background:#FAFBFC}
.tscroll{max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.muted{color:var(--ink-3)}
.empty{padding:26px;text-align:center;color:var(--ink-3);font-size:12px}

/* ---- Raw Trace ------------------------------------------------------------
   A wire log, so payload cells are monospace and wrap rather than truncate: on
   trial day a frame we could not decode is the thing you most need to read in
   full. New rows flash once, which is the only movement cue you get when the
   controller is sending steady traffic. */
#wTable td{vertical-align:top;font-size:11px}
#wTable .pay{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  word-break:break-all;line-height:1.55;max-width:340px}
#wTable .hex{color:var(--ink-3);font-size:9.5px;display:block;margin-top:3px;word-break:break-all}
#wTable tr.bad td{background:#FEF6F5}
#wTable tr.bad:hover td{background:#FDEEEC}
#wTable tr.flash td{animation:wflash 1.1s ease-out}
@keyframes wflash{from{background:var(--imfa-lt)}to{background:transparent}}
.vtag{display:inline-block;padding:1px 7px;border-radius:99px;font-size:9.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.vtag.ok{background:#E7F5EC;color:#1B6E3E}
.vtag.no{background:#FBE9E7;color:#A3271C}
.why{color:#A3271C;display:block;margin-top:3px;line-height:1.5}
.slots{display:flex;flex-wrap:wrap;gap:4px}
.slot{border:1px solid var(--line);border-radius:5px;padding:2px 6px;font-size:10px;
  font-family:ui-monospace,Menlo,Consolas,monospace;background:#fff;white-space:nowrap}
.slot.act{border-color:var(--imfa);background:var(--imfa-lt);font-weight:700}
.slot i{font-style:normal;color:var(--ink-3);font-weight:400}
.tick{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);cursor:pointer}
.tick input{accent-color:var(--imfa)}

@media (max-width:1200px){ .split{grid-template-columns:220px 1fr} aside.pane.r{display:none} }