/* FleetMem — supervisory console design system.
   Shared by the 2D and 3D views so both are the same shell with a different viewport.
   Signal colours follow industrial annunciator convention rather than decoration:
   blue = advisory (holding), amber = caution (re-routing), red = alarm (blocked). */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* light is the default: an instrument panel reads as paper under shop lighting */
  --bg:#eef1f5;      --panel:#ffffff;    --sunken:#f4f6f9;
  --line:#d3dae3;    --line-soft:#e5eaf0;
  --ink:#111820;     --dim:#5c6b7d;      --faint:#8b98a8;
  --advisory:#1d6fe0;  --caution:#b26a00;  --alarm:#c62f26;  --normal:#0f8a5f;
  --grid:#dfe5ec;    --floor:#e7ecf2;
  --shadow:0 1px 2px rgba(16,24,32,.06),0 8px 24px rgba(16,24,32,.06);
}
:root[data-theme="dark"]{
  --bg:#0f151c;      --panel:#161e27;    --sunken:#0b1017;
  --line:#26313d;    --line-soft:#1d2732;
  --ink:#e3eaf3;     --dim:#8d9cae;      --faint:#66768a;
  --advisory:#4d9fff;  --caution:#f5a524;  --alarm:#f4483f;  --normal:#2ecc8f;
  --grid:#1a232e;    --floor:#141b23;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f151c;    --panel:#161e27;    --sunken:#0b1017;
    --line:#26313d;  --line-soft:#1d2732;
    --ink:#e3eaf3;   --dim:#8d9cae;      --faint:#66768a;
    --advisory:#4d9fff; --caution:#f5a524; --alarm:#f4483f; --normal:#2ecc8f;
    --grid:#1a232e;  --floor:#141b23;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);font:15px/1.55 var(--display);
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;
}

/* ---------- header: the instrument strip ---------- */
.masthead{
  display:flex;align-items:center;gap:18px;padding:11px 18px;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.wordmark{display:flex;align-items:baseline;gap:9px;margin-right:4px}
.wordmark b{font-weight:700;font-size:17px;letter-spacing:-.015em}
.wordmark span{font:500 10px/1 var(--mono);color:var(--faint);letter-spacing:.14em;
               text-transform:uppercase;border:1px solid var(--line);padding:4px 6px;
               border-radius:3px}
.lamps{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.lamp{display:flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);color:var(--dim);
      background:var(--sunken);border:1px solid var(--line-soft);padding:6px 10px;
      border-radius:4px;white-space:nowrap}
.lamp i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.lamp.live i{background:var(--normal);box-shadow:0 0 0 3px color-mix(in srgb,var(--normal) 22%,transparent)}
.lamp.degraded i{background:var(--caution);box-shadow:0 0 0 3px color-mix(in srgb,var(--caution) 22%,transparent)}
.lamp b{color:var(--ink);font-weight:600}
.controls-right{display:flex;align-items:center;gap:9px}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;
     background:var(--sunken)}
.seg a,.seg button{padding:6px 13px;font:600 11px/1.4 var(--mono);color:var(--dim);
     text-decoration:none;background:none;border:0;cursor:pointer;letter-spacing:.04em}
.seg a.on,.seg button.on{background:var(--advisory);color:#fff}
.seg a:hover:not(.on),.seg button:hover:not(.on){color:var(--ink)}

/* ---------- main grid: viewport + one consistent sidebar ---------- */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:0;min-height:0}
.viewport{position:relative;min-height:0;background:var(--floor);
          border-right:1px solid var(--line)}
.viewport canvas{display:block;width:100%;height:100%}

.sidebar{background:var(--panel);overflow-y:auto;min-height:0;padding:0 0 20px}
.sect{padding:15px 17px;border-bottom:1px solid var(--line-soft)}
.sect h2{margin:0 0 11px;font:600 10px/1 var(--mono);letter-spacing:.15em;
         text-transform:uppercase;color:var(--faint);display:flex;
         justify-content:space-between;align-items:center}
.sect h2 em{font-style:normal;color:var(--dim);letter-spacing:.02em;text-transform:none;
            font-size:11px}

/* ---------- signature: the annunciator strip ---------- */
.annunciator{display:flex;flex-direction:column;gap:6px}
.slot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
      padding:9px 11px;border:1px solid var(--line);border-left:3px solid var(--line);
      border-radius:4px;background:var(--sunken)}
.slot.held{border-left-color:var(--advisory);
           background:color-mix(in srgb,var(--advisory) 7%,var(--sunken))}
.slot .rid{font:600 12px/1.3 var(--mono);color:var(--ink)}
.slot .who{font:500 11px/1.3 var(--mono);color:var(--advisory)}
.slot .who.free{color:var(--faint)}
.slot .lease{font:500 11px/1 var(--mono);color:var(--dim);text-align:right}
.slot .lease.low{color:var(--caution)}
.bar{height:3px;background:var(--line-soft);border-radius:2px;overflow:hidden;
     grid-column:1/-1;margin-top:2px}
.bar i{display:block;height:100%;background:var(--advisory);transition:width .9s linear}
.bar i.low{background:var(--caution)}

/* ---------- shared components ---------- */
.field{width:100%;background:var(--sunken);border:1px solid var(--line);color:var(--ink);
       padding:9px 11px;border-radius:4px;font:400 13px/1.4 var(--display);margin-bottom:8px}
.field:focus{outline:2px solid var(--advisory);outline-offset:-1px}
.btn{background:var(--sunken);color:var(--ink);border:1px solid var(--line);padding:9px 14px;
     border-radius:5px;cursor:pointer;font:600 12px/1.3 var(--display)}
.btn:hover{border-color:var(--advisory);color:var(--advisory)}
.btn.primary{background:var(--advisory);border-color:var(--advisory);color:#fff}
.btn.primary:hover{filter:brightness(1.07);color:#fff}
.btn:focus-visible{outline:2px solid var(--advisory);outline-offset:2px}

.hit{padding:9px 0;border-bottom:1px solid var(--line-soft)}
.hit:last-child{border-bottom:0}
.hit .d{font:600 10.5px/1 var(--mono);color:var(--advisory);letter-spacing:.04em}
.hit .t{margin:4px 0 3px;font-size:13px;line-height:1.45}
.hit .m{font:400 10.5px/1 var(--mono);color:var(--faint)}

.feed{font:400 11.5px/1.75 var(--mono);max-height:190px;overflow-y:auto}
.feed div{padding:2px 0;color:var(--dim);border-bottom:1px solid var(--line-soft)}
.feed .k-race{color:var(--caution);font-weight:600}
.feed .k-claim{color:var(--advisory)}
.feed .k-recall{color:var(--normal)}
.feed .k-blocked,.feed .k-lease_expired{color:var(--alarm)}

.legend{display:flex;flex-wrap:wrap;gap:10px;font:400 11px/1.5 var(--mono);color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:2px;flex:none}

.code{font:400 11px/1.7 var(--mono);background:var(--sunken);border:1px solid var(--line);
      border-radius:4px;padding:10px;color:var(--dim);white-space:pre;overflow-x:auto}
.code b{color:var(--advisory);font-weight:500}
.code em{color:var(--normal);font-style:normal}
.code i{color:var(--faint);font-style:normal}

.empty{color:var(--dim);font-size:12.5px;line-height:1.6}
kbd{background:var(--sunken);border:1px solid var(--line);border-bottom-width:2px;
    border-radius:3px;padding:1px 5px;font:500 10.5px var(--mono);color:var(--dim)}

/* ---------- footer control bar ---------- */
.dock{display:flex;align-items:center;gap:9px;padding:11px 18px;background:var(--panel);
      border-top:1px solid var(--line);flex-wrap:wrap}
.dock .hint{margin-left:auto;font:400 11px/1 var(--mono);color:var(--faint)}

/* ---------- transient status ---------- */
#conn,#toast{position:fixed;left:50%;transform:translateX(-50%);z-index:60;
             border-radius:5px;font:500 12px/1.45 var(--mono);box-shadow:var(--shadow);
             max-width:min(660px,90vw);padding:10px 15px;display:none}
#conn{top:64px;background:var(--alarm);color:#fff;border:1px solid var(--alarm)}
#toast{bottom:74px;background:var(--panel);color:var(--ink);
       border:1px solid var(--line);border-left:3px solid var(--alarm)}
#toast.ok{border-left-color:var(--normal)}

@media (max-width:900px){
  .stage{grid-template-columns:1fr;grid-template-rows:minmax(240px,42vh) 1fr}
  .viewport{border-right:0;border-bottom:1px solid var(--line)}
  body{overflow:auto}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}