/* Vanguard 26 console: shared tokens and components. */
:root{
  --paper:#E9EAE4; --panel:#F3F4EF; --ink:#17222B; --ink-2:#5A6670;
  --rule:#C3C7C0; --rule-soft:#D8DBD5;
  --magenta:#A83263; --blue:#2C5C88; --amber:#B5730D; --teal:#1F6F6A; --dead:#8E958D;
  --ok:#2E7D4F; --accent:var(--magenta);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1A20; --panel:#16232B; --ink:#DDE4E4; --ink-2:#8B9BA3;
    --rule:#2A3A44; --rule-soft:#1E2C34;
    --magenta:#E0679B; --blue:#78AEDD; --amber:#E8A63A; --teal:#5FC2B8; --dead:#5F6E76; --ok:#5FC28A;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper); color:var(--ink); font-family:Archivo,Arial,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",monospace}
button,select,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
a{color:inherit}

/* ---------- header / nav */
header.top{border-bottom:1px solid var(--rule); position:sticky; top:0; background:var(--paper); z-index:1000}
.bar{padding:0 20px; height:56px; display:flex; align-items:center; gap:18px}
.brand{font-weight:700; letter-spacing:-.02em; font-size:.94rem; white-space:nowrap; text-decoration:none}
.brand span{color:var(--magenta)}
nav.main{display:flex; gap:2px; overflow-x:auto}
nav.main a{text-decoration:none; color:var(--ink-2); font-size:.86rem; padding:7px 12px; border-radius:2px; white-space:nowrap}
nav.main a:hover{color:var(--ink); background:var(--rule-soft)}
nav.main a[aria-current="page"]{color:var(--paper); background:var(--ink)}
nav.main .badge{display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; border-radius:9px;
  background:var(--magenta); color:#fff; font-size:.7rem; font-family:"IBM Plex Mono",monospace; text-align:center}
.spacer{margin-left:auto}
.who{position:relative}
.who > button{background:transparent; border:1px solid var(--rule); padding:5px 12px; cursor:pointer; font-size:.84rem}
.who .menu{display:none; position:absolute; right:0; top:38px; background:var(--panel); border:1px solid var(--rule);
  min-width:210px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:1100}
.who.open .menu{display:block}
.who .menu div{padding:10px 14px; font-size:.8rem; color:var(--ink-2); border-bottom:1px solid var(--rule-soft)}
.who .menu button{display:block; width:100%; text-align:left; background:none; border:none; padding:10px 14px; cursor:pointer; font-size:.85rem}
.who .menu button:hover{background:var(--rule-soft)}
.role{font-family:"IBM Plex Mono",monospace; font-size:.7rem; padding:1px 6px; border:1px solid var(--rule); margin-left:6px; color:var(--ink-2)}

/* ---------- layout */
.cols{display:grid; grid-template-columns:350px 1fr 370px; height:calc(100vh - 56px)}
.cols > *{overflow-y:auto; padding:18px}
.cols > :first-child{border-right:1px solid var(--rule)}
.cols > :last-child{border-left:1px solid var(--rule)}
.cols.two{grid-template-columns:420px 1fr}
.cols.two > :last-child{border-left:none}
@media (max-width:1150px){ .cols,.cols.two{grid-template-columns:1fr; height:auto} .cols > *{border:none!important} }
.page{max-width:1200px; margin:0 auto; padding:24px 20px}
h1{font-size:1.25rem; margin:0 0 16px; letter-spacing:-.01em}
h2{font-size:.78rem; font-family:"IBM Plex Mono",monospace; color:var(--ink-2); margin:0 0 12px; font-weight:500; text-transform:uppercase}
.sec{margin-top:20px; border-top:1px solid var(--rule); padding-top:14px}
.muted{color:var(--ink-2); font-size:.85rem}
.note{font-size:.78rem; color:var(--ink-2); border-left:2px solid var(--rule); padding:6px 0 6px 10px; margin-top:12px}
.warn{border-left:2px solid var(--amber); padding:8px 0 8px 12px; margin-top:10px; font-size:.84rem}

/* ---------- controls */
.btn{background:transparent; border:1px solid var(--rule); color:var(--ink); font-size:.84rem; padding:6px 14px; cursor:pointer; text-decoration:none; display:inline-block}
.btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn[disabled]{opacity:.4; cursor:default; background:transparent; color:var(--ink)}
.btn.primary{border-color:var(--accent); color:var(--accent)}
.btn.primary:hover{background:var(--accent); color:#fff}
.btn.solid{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn.small{font-size:.76rem; padding:3px 9px}
.seg{display:inline-flex}
.seg button{background:transparent; border:1px solid var(--rule); border-right:none; color:var(--ink-2); font-size:.8rem; padding:5px 11px; cursor:pointer}
.seg button:last-child{border-right:1px solid var(--rule)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
input[type=text],input[type=password],select,textarea{background:var(--panel); border:1px solid var(--rule); padding:7px 9px; font-size:.86rem; width:100%}
textarea{min-height:70px; resize:vertical}
label.f{display:block; font-size:.78rem; color:var(--ink-2); margin:10px 0 4px}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* ---------- data */
.kv{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--ink-2)}
.kv b{font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right}
table.t{width:100%; border-collapse:collapse; font-size:.82rem}
table.t th{text-align:left; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.7rem; color:var(--ink-2); padding:6px 8px 6px 0; border-bottom:1px solid var(--rule); white-space:nowrap}
table.t td{padding:7px 8px 7px 0; border-bottom:1px solid var(--rule-soft); font-variant-numeric:tabular-nums; vertical-align:top}
table.t td.m{font-family:"IBM Plex Mono",monospace; font-size:.78rem; white-space:nowrap}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td, table.t tr.sel td{background:var(--rule-soft)}
.v4{color:var(--magenta); font-weight:600}.v3{color:var(--amber); font-weight:600}.v0{color:var(--ink-2)}
.pill{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.68rem; padding:1px 7px; border:1px solid currentColor; border-radius:9px; white-space:nowrap}
.st-new{color:var(--magenta)} .st-acknowledged{color:var(--blue)} .st-escalated{color:var(--amber)} .st-closed{color:var(--dead)}
.q-confirmed_threat{color:var(--magenta)} .q-suspicious{color:var(--amber)} .q-benign{color:var(--teal)} .q-false_alarm{color:var(--dead)}
.why{margin:8px 0 0; padding-left:18px; font-size:.84rem}
.timeline{list-style:none; padding:0; margin:0}
.timeline li{border-left:2px solid var(--rule); padding:0 0 12px 12px; position:relative; font-size:.84rem}
.timeline li:before{content:""; position:absolute; left:-5px; top:4px; width:8px; height:8px; border-radius:50%; background:var(--rule)}
.timeline li.k-opened:before,.timeline li.k-reclassified:before{background:var(--magenta)}
.timeline li.k-close:before{background:var(--dead)} .timeline li.k-acknowledge:before{background:var(--blue)}
.timeline li.k-escalate:before{background:var(--amber)}
.timeline time{display:block; font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-2)}
.card{border:1px solid var(--rule); background:var(--panel); padding:14px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:18px}
.stat{border:1px solid var(--rule); background:var(--panel); padding:12px 14px}
.stat b{display:block; font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat span{font-size:.74rem; color:var(--ink-2); font-family:"IBM Plex Mono",monospace}

/* ---------- map */
.map{width:100%; height:100%; min-height:420px; background:var(--panel); border:1px solid var(--rule)}
.leaflet-container{font-family:Archivo,Arial,sans-serif}
.lbl{background:rgba(23,34,43,.82); color:#fff; border:none; box-shadow:none; font-family:"IBM Plex Mono",monospace; font-size:10.5px; padding:1px 5px}
.lbl:before{display:none}

/* ---------- modal / toast */
.modal{position:fixed; inset:0; background:rgba(10,16,20,.45); display:none; align-items:center; justify-content:center; z-index:2000; padding:16px}
.modal.open{display:flex}
.modal .box{background:var(--paper); border:1px solid var(--rule); width:420px; max-width:100%; padding:22px}
.modal h3{margin:0 0 6px; font-size:1.05rem}
#toast{position:fixed; bottom:20px; right:20px; background:var(--ink); color:var(--paper); padding:10px 16px; font-size:.85rem; display:none; z-index:3000; max-width:420px}
.demo-flag{font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--amber); border:1px solid var(--amber); padding:1px 6px}