/* ============================================================
   DISPATCHR — tactical EMS command-center
   Direction: near-black cockpit, phosphor amber + critical red,
   dense mono readouts, condensed grotesque display (Archivo).
   ============================================================ */

:root{
  --bg:        #0a0c0f;
  --bg-2:      #0e1217;
  --panel:     #11161d;
  --panel-2:   #141b24;
  --line:      #1f2a36;
  --line-2:    #2a3a4a;
  --ink:       #e8eef4;
  --ink-dim:   #8da0b3;
  --ink-faint: #56697c;

  --amber:     #ffb020;
  --amber-soft:#ffd277;
  --red:       #ff3b3b;
  --red-deep:  #c01818;
  --green:     #2ce08a;
  --cyan:      #36c6ff;

  --crit:   #ff3b3b;
  --urgent: #ffb020;
  --stable: #2ce08a;

  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Archivo', system-ui, sans-serif;

  --r: 4px;
  --glow-amber: 0 0 0 1px rgba(255,176,32,.35), 0 0 18px -4px rgba(255,176,32,.5);
  --glow-red:   0 0 0 1px rgba(255,59,59,.4), 0 0 22px -4px rgba(255,59,59,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--mono);
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(255,176,32,.06), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(54,198,255,.05), transparent 55%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* grain / scanlines overlay */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:.5;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
}

/* ---------- back link ---------- */
.back-link{
  position:fixed;left:14px;bottom:14px;z-index:80;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-dim);background:rgba(10,12,15,.85);
  border:1px solid var(--line);padding:7px 12px;border-radius:99px;
  backdrop-filter:blur(6px);transition:.2s;
}
.back-link:hover{color:var(--amber);border-color:var(--amber);box-shadow:var(--glow-amber)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:0 20px;height:56px;
  background:linear-gradient(180deg,rgba(8,10,13,.96),rgba(8,10,13,.82));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{color:var(--amber);display:flex;filter:drop-shadow(0 0 6px rgba(255,176,32,.4))}
.brand-name{font-family:var(--disp);font-weight:900;letter-spacing:.16em;font-size:17px}
.brand-tag{font-size:9px;letter-spacing:.22em;color:var(--bg);background:var(--amber);
  padding:3px 6px;border-radius:3px;font-weight:700;align-self:center}

.mainnav{display:flex;gap:4px;margin-left:8px}
.mainnav a{
  font-size:12px;letter-spacing:.08em;color:var(--ink-dim);
  padding:8px 13px;border-radius:var(--r);border:1px solid transparent;text-transform:uppercase;
  transition:.18s;
}
.mainnav a:hover{color:var(--ink);background:var(--panel)}
.mainnav a.active{color:var(--amber);border-color:var(--line-2);background:var(--panel);box-shadow:inset 0 -2px 0 var(--amber)}

.status-cluster{margin-left:auto;display:flex;align-items:center;gap:16px}
.sys-pill{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.14em;color:var(--green)}
.clock{font-size:13px;font-weight:600;color:var(--amber-soft);letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* live dot */
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.dot-live{background:var(--green);box-shadow:0 0 0 0 rgba(44,224,138,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(44,224,138,.55)}70%{box-shadow:0 0 0 7px rgba(44,224,138,0)}100%{box-shadow:0 0 0 0 rgba(44,224,138,0)}}

/* ---------- screens ---------- */
.screen{max-width:1320px;margin:0 auto;padding:26px 20px 90px}
.screen[hidden]{display:none}

/* panel chrome */
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11px;letter-spacing:.14em;color:var(--ink-dim);
  padding:11px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.panel-head span:first-child{color:var(--ink);font-weight:600}

/* ============ LANDING ============ */
.screen-landing{
  display:grid;grid-template-columns:1.55fr .85fr;gap:30px;
  align-items:start;position:relative;padding-top:48px;
}
.hero-grid{
  position:absolute;inset:-26px -20px;z-index:0;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(700px 500px at 30% 25%,#000,transparent 75%);
          mask-image:radial-gradient(700px 500px at 30% 25%,#000,transparent 75%);
}
.hero{position:relative;z-index:1}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.18em;
  color:var(--amber);border:1px solid var(--line-2);padding:6px 12px;border-radius:99px;margin-bottom:26px}
.hero-eyebrow .dot-live{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.hero-title{
  font-family:var(--disp);font-weight:900;line-height:.94;letter-spacing:-.02em;
  font-size:clamp(38px,6.2vw,82px);margin:0 0 22px;
}
.hero-title .hi{color:var(--amber);text-shadow:0 0 28px rgba(255,176,32,.35)}
.hero-lede{max-width:540px;color:var(--ink-dim);font-size:14.5px;line-height:1.7;margin:0 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:42px}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:.05em;padding:13px 20px;border-radius:var(--r);cursor:pointer;border:1px solid var(--line-2);
  background:transparent;color:var(--ink);transition:.18s}
.btn.sm{padding:9px 14px;font-size:12px}
.btn-primary{background:var(--amber);color:#1a1206;border-color:var(--amber);font-weight:700}
.btn-primary:hover{box-shadow:var(--glow-amber);transform:translateY(-1px)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--panel);padding:16px 14px}
.stat dt{font-size:10px;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px}
.stat dd{margin:0;font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;color:var(--amber-soft)}
.stat dd span{font-size:15px;color:var(--ink-dim);margin-left:1px}

.hero-panel{position:relative;z-index:1;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.feed{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:1px;max-height:420px;overflow:hidden}
.feed li{display:flex;gap:10px;align-items:baseline;padding:9px 10px;font-size:11.5px;border-left:2px solid var(--line-2);
  background:var(--bg-2);animation:slideIn .35s ease both}
.feed li .t{color:var(--ink-faint);font-size:10px;min-width:54px}
.feed li .m{color:var(--ink-dim);flex:1}
.feed li.lvl-critical{border-left-color:var(--crit)}.feed li.lvl-critical .m{color:#ffd2d2}
.feed li.lvl-urgent{border-left-color:var(--urgent)}
.feed li.lvl-stable{border-left-color:var(--stable)}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ============ CONSOLE ============ */
.console-layout{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:auto auto;gap:16px}
.map-wrap{grid-row:1 / span 2;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.queue-wrap,.assign-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.legend{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:.05em;color:var(--ink-faint)}
.lg{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:-1px}
.lg-avail{background:var(--green)}.lg-enr{background:var(--cyan)}.lg-busy{background:var(--amber)}.lg-inc{background:var(--red);border-radius:1px}

.map-stage{flex:1;position:relative;min-height:520px;background:
  radial-gradient(120% 120% at 50% 0%,#0f151c,#0a0d11);}
.map-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* map markers */
.mk{cursor:pointer;transition:transform .15s}
.mk:hover{transform:scale(1.18)}
.mk-label{font-family:var(--mono);font-size:8px;fill:var(--ink-dim);letter-spacing:.04em;pointer-events:none}
.unit-dot{stroke:#0a0d11;stroke-width:1.5}
.unit-avail{fill:var(--green)}.unit-enr{fill:var(--cyan)}.unit-busy{fill:var(--amber)}
.inc-marker{fill:var(--red)}
.inc-pulse{fill:none;stroke:var(--red);opacity:.6;transform-origin:center;animation:incPulse 1.8s infinite}
@keyframes incPulse{0%{r:6;opacity:.7}100%{r:20;opacity:0}}
.inc-marker.is-active{filter:drop-shadow(0 0 6px var(--red))}

/* queue */
.filters{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.filt{flex:1;font-size:10.5px;letter-spacing:.06em;color:var(--ink-dim);background:var(--bg-2);
  border:1px solid var(--line);padding:7px 4px;border-radius:3px;cursor:pointer;text-transform:uppercase;transition:.15s}
.filt:hover{color:var(--ink);border-color:var(--line-2)}
.filt.active{color:var(--bg);background:var(--amber);border-color:var(--amber);font-weight:700}

.queue{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:8px;max-height:480px;overflow-y:auto}
.queue::-webkit-scrollbar{width:8px}.queue::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.qcard{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:3px;
  padding:11px 12px;cursor:pointer;transition:.15s;outline:none}
.qcard:hover,.qcard:focus-visible{border-color:var(--line-2);background:var(--panel-2);transform:translateX(2px)}
.qcard.sel{box-shadow:inset 0 0 0 1px var(--amber);background:var(--panel-2)}
.qcard.lvl-critical{border-left-color:var(--crit)}
.qcard.lvl-urgent{border-left-color:var(--urgent)}
.qcard.lvl-stable{border-left-color:var(--stable)}
.qcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.qcard-id{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.sev{font-size:9px;letter-spacing:.1em;padding:2px 7px;border-radius:99px;font-weight:700;text-transform:uppercase}
.sev-critical{background:rgba(255,59,59,.15);color:var(--crit)}
.sev-urgent{background:rgba(255,176,32,.15);color:var(--urgent)}
.sev-stable{background:rgba(44,224,138,.15);color:var(--stable)}
.qcard-type{font-size:12.5px;color:var(--ink);margin-bottom:3px;font-weight:500}
.qcard-meta{display:flex;gap:12px;font-size:10.5px;color:var(--ink-faint)}
.qcard-meta b{color:var(--ink-dim);font-weight:500}
.qcard-assigned{font-size:10px;color:var(--cyan);margin-top:6px;letter-spacing:.04em}

/* assign panel */
.assign-body{padding:14px}
.assign-empty{color:var(--ink-faint);font-size:12px;line-height:1.6;margin:0}
.assign-sel{margin-bottom:14px}
.assign-sel h4{font-family:var(--disp);font-weight:700;font-size:15px;margin:0 0 4px}
.assign-sel p{margin:0;font-size:11px;color:var(--ink-dim)}
.unit-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.unit-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:3px;padding:9px 11px;font-size:11.5px}
.unit-opt .u-name{font-weight:600}
.unit-opt .u-meta{font-size:10px;color:var(--ink-faint)}
.unit-opt button{font-size:10.5px;padding:6px 11px;border-radius:3px;background:var(--green);color:#06160e;
  border:none;font-weight:700;cursor:pointer;letter-spacing:.04em;transition:.15s}
.unit-opt button:hover{box-shadow:0 0 12px -2px var(--green)}
.unit-opt.busy{opacity:.45}
.unit-opt.busy button{background:var(--line-2);color:var(--ink-faint);cursor:not-allowed}
.assign-ok{margin-top:12px;font-size:11px;color:var(--green);letter-spacing:.04em}
.life-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* unit popover (map) */
.unit-popover{
  position:fixed;z-index:90;display:none;width:220px;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.85),var(--glow-amber);
  padding:12px 13px 13px;font-size:11.5px;color:var(--ink);
}
.unit-popover .up-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--ink-faint);
  font-size:16px;cursor:pointer;line-height:1;padding:2px 4px}
.unit-popover .up-close:hover{color:var(--amber)}
.unit-popover .up-head{font-weight:700;font-size:13px;letter-spacing:.03em;margin-bottom:9px;padding-right:18px}
.unit-popover .up-id{color:var(--ink-faint);font-weight:400;font-size:11px}
.unit-popover .up-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink-dim)}
.unit-popover .up-row span{color:var(--ink-faint);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.unit-popover .up-row.muted{justify-content:flex-start;color:var(--ink-faint);font-style:italic}
.unit-popover .up-track{width:100%;margin-top:10px;justify-content:center}

/* ============ INCIDENT DETAIL ============ */
.inc-back{margin-bottom:16px}
.textlink{font-size:12px;color:var(--ink-dim);letter-spacing:.05em}
.textlink:hover{color:var(--amber)}
.incident-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.inc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.inc-hero{padding:18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.inc-hero .row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.inc-hero h2{font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.01em;margin:0}
.inc-hero .addr{font-size:13px;color:var(--ink-dim)}
.inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.inc-cell{background:var(--panel);padding:13px 15px}
.inc-cell .k{font-size:9.5px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;margin-bottom:5px}
.inc-cell .v{font-size:14px;color:var(--ink);font-weight:500}
.inc-cell .v.big{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--amber-soft)}

/* timeline */
.timeline{list-style:none;margin:0;padding:16px 18px}
.timeline li{position:relative;padding:0 0 18px 22px;border-left:1.5px solid var(--line-2)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-5.5px;top:2px;width:9px;height:9px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line-2)}
.timeline li.done::before{background:var(--green);border-color:var(--green)}
.timeline li.now::before{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,176,32,.18)}
.timeline .tl-time{font-size:10px;color:var(--ink-faint);letter-spacing:.05em}
.timeline .tl-ev{font-size:12.5px;color:var(--ink);margin-top:2px}
.timeline li.now .tl-ev{color:var(--amber-soft)}

.inc-actions{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}

/* ============ TRACKING ============ */
.track-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:start}
.track-map-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.track-status{font-size:10px;letter-spacing:.12em;font-weight:700;padding:4px 10px;border-radius:99px;
  background:rgba(54,198,255,.15);color:var(--cyan)}
.track-status.scene{background:rgba(255,176,32,.15);color:var(--amber)}
.track-status.transport{background:rgba(255,59,59,.15);color:var(--red)}
.track-stage{min-height:480px}
.route-line{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:5 5;opacity:.55}
.route-prog{fill:none;stroke:var(--amber);stroke-width:2.5;filter:drop-shadow(0 0 5px rgba(255,176,32,.6))}
.track-unit{fill:var(--amber);stroke:#1a1206;stroke-width:2;filter:drop-shadow(0 0 8px rgba(255,176,32,.8))}
.track-dest{fill:var(--red)}

.track-controls{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.track-eta{font-size:12px;color:var(--ink-dim);letter-spacing:.04em}
.track-eta strong{color:var(--amber-soft);font-size:15px}
.track-meter{flex:1;min-width:120px;height:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.track-meter-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--amber));transition:width .2s linear}

.fleet-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fleet{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:6px;max-height:540px;overflow-y:auto}
.fleet::-webkit-scrollbar{width:8px}.fleet::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}
.fcard{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:3px;padding:11px 12px}
.fcard .fdot{width:10px;height:10px;border-radius:50%}
.fdot.avail{background:var(--green)}.fdot.enr{background:var(--cyan)}.fdot.busy{background:var(--amber)}.fdot.transport{background:var(--red)}
.fcard .f-name{font-size:12px;font-weight:700;letter-spacing:.04em}
.fcard .f-sub{font-size:10px;color:var(--ink-faint);margin-top:2px}
.fcard .f-stat{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;text-align:right}
.fcard .f-eta{font-size:10px;color:var(--ink-faint);margin-top:2px;text-align:right}
.f-avail{color:var(--green)}.f-enr{color:var(--cyan)}.f-busy{color:var(--amber)}.f-transport{color:var(--red)}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .screen-landing{grid-template-columns:1fr}
  .hero-panel{order:2}
  .console-layout{grid-template-columns:1fr;grid-template-rows:auto}
  .map-wrap{grid-row:auto;min-height:420px}
  .incident-layout,.track-layout{grid-template-columns:1fr}
}
@media(max-width:680px){
  .topbar{gap:12px;height:auto;flex-wrap:wrap;padding:10px 14px}
  .mainnav{order:3;width:100%;overflow-x:auto;margin-left:0}
  .status-cluster{margin-left:auto}
  .stats{grid-template-columns:1fr 1fr}
  .inc-grid{grid-template-columns:1fr}
  .legend{display:none}
}

/* focus visibility */
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px}