/* ============================================================================
   DEFENSE·WAREHOUSE — shared dashboard stylesheet
   Control-room / instrument-panel language: blueprint-tinted graphite,
   one hot amber-phosphor signal, monospace instrumentation.
   Visual source of truth: docs/design/dashboard-mock.html
   ========================================================================== */

/* ---- fonts (self-hosted, Latin + Cyrillic) ------------------------------ */
@font-face{font-family:"Golos Text";font-weight:400;font-display:swap;
  src:url("/static/fonts/golos-text-400.woff2") format("woff2")}
@font-face{font-family:"Golos Text";font-weight:500;font-display:swap;
  src:url("/static/fonts/golos-text-500.woff2") format("woff2")}
@font-face{font-family:"Golos Text";font-weight:600;font-display:swap;
  src:url("/static/fonts/golos-text-600.woff2") format("woff2")}
@font-face{font-family:"Golos Text";font-weight:700;font-display:swap;
  src:url("/static/fonts/golos-text-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;
  src:url("/static/fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;
  src:url("/static/fonts/jetbrains-mono-500.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;
  src:url("/static/fonts/jetbrains-mono-700.woff2") format("woff2")}

:root{
  --bg:#0b0e11;
  --bg-tint:#0e1216;
  --panel:#12171c;
  --panel-2:#161c22;
  --line:#232c34;
  --line-soft:#1b2229;
  --ink:#e8ecef;
  --ink-dim:#9aa6b0;
  --ink-faint:#66727c;
  --amber:#ffb000;
  --amber-soft:rgba(255,176,0,.14);
  --amber-ink:#1a1200;
  --cyan:#5cc8e8;
  --red:#ff5b5b;
  --green:#4bd07a;
  --radius:10px;
  --radius-sm:7px;
  --pad:clamp(16px,2.4vw,30px);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(255,176,0,.05), transparent 60%),
    linear-gradient(var(--bg-tint),var(--bg));
  background-attachment:fixed;
  min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.020) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.020) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 85%);
  mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 85%);
}
header,main{position:relative;z-index:1}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1,h2,h3{margin:0;font-weight:600}
button{font-family:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:3px}

/* ---- top bar --------------------------------------------------------- */
.topbar{
  display:flex;align-items:stretch;gap:22px;flex-wrap:wrap;
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.brand{
  display:flex;align-items:center;gap:10px;padding:15px 0;margin-right:6px;
  font-family:var(--mono);font-weight:700;letter-spacing:.14em;font-size:12px;
  color:var(--ink);white-space:nowrap;
}
.brand .mk{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1.5px solid var(--amber);border-radius:5px;
  color:var(--amber);font-size:12px;
}
.brand b{color:var(--amber);font-weight:700}
nav.tabs{display:flex;gap:2px;align-self:flex-end}
nav.tabs a{
  padding:12px 16px 13px;font-size:13px;font-weight:500;color:var(--ink-dim);
  border-bottom:2px solid transparent;
}
nav.tabs a:hover{color:var(--ink);text-decoration:none}
nav.tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--amber)}
.topbar .status{
  margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-faint);
}
.topbar .status .ok{color:var(--green)}

main{padding:var(--pad);max-width:1500px;margin:0 auto}

/* ---- shared bits ---------------------------------------------------- */
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:currentColor}
.pulse{position:relative}
.pulse::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid currentColor;opacity:.6;animation:pulse 2s ease-out infinite;
}
@keyframes pulse{to{transform:scale(2.6);opacity:0}}

.sec{display:flex;align-items:baseline;gap:12px;margin:30px 0 12px;flex-wrap:wrap}
.sec:first-child{margin-top:6px}
.sec h2{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  color:var(--ink-faint);text-transform:uppercase;margin:0;
}
.sec .rule{flex:1;min-width:24px;height:1px;background:var(--line-soft)}
.sec .aside{font-size:12px;color:var(--ink-faint)}

.empty{
  text-align:center;color:var(--ink-faint);
  padding:44px;border:1px dashed var(--line);border-radius:var(--radius);
}
.nodata{color:var(--ink-faint);text-align:center;padding:36px 0;font-size:13px}

/* ---- filters ------------------------------------------------------- */
.filters{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin-bottom:10px;
}
.pill{
  padding:6px 13px;border:1px solid var(--line);border-radius:99px;
  font-size:12px;color:var(--ink-dim);background:transparent;cursor:pointer;
}
.pill:hover{color:var(--ink);border-color:#33414c;text-decoration:none}
.pill[aria-current],.pill.active{
  background:var(--amber);border-color:var(--amber);color:var(--amber-ink);font-weight:600;
}
.filters .field,.filters label{
  display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-faint);
}
.filters input,.filters select{
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:6px 9px;font:inherit;font-size:12px;
}
.filters .go,.filters button[type=submit]{
  background:var(--amber);color:var(--amber-ink);border:0;padding:7px 15px;
  font-weight:600;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;
}
.filters .reset{
  background:transparent;color:var(--ink-dim);border:1px solid var(--line);
  padding:7px 13px;border-radius:var(--radius-sm);font-size:12px;
}
.filters .divider{width:1px;height:22px;background:var(--line);margin:0 4px}
.filters .found,.filters .summary{
  margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-faint);
}
.filters .found b,.filters .summary strong{color:var(--ink);font-weight:600}
.filters .export{margin-left:auto;display:flex;gap:6px}
.filters .export a{
  padding:7px 12px;border-radius:var(--radius-sm);background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:500;
}
.filters .export a:hover{border-color:var(--amber);text-decoration:none}

/* ---- live camera grid (dashboard) -------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cam{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s;
}
.cam:hover{border-color:#33414c;transform:translateY(-2px)}
.cam.disabled{cursor:default}
.cam.disabled:hover{transform:none;border-color:var(--line)}
.cam .view{aspect-ratio:4/3;position:relative;background:#05070a;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.cam .view img{width:100%;height:100%;object-fit:cover;display:block}
.cam .view .frameno{
  position:absolute;right:8px;bottom:6px;font-size:10px;
  color:rgba(255,255,255,.5);font-family:var(--mono);
}
.cam .view .wait{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-size:11px;font-family:var(--mono);letter-spacing:.06em;
  text-align:center;padding:14px;
}
.cam .view .wait::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent,rgba(92,200,232,.06),transparent);
  background-size:100% 40px;animation:scan 2.4s linear infinite;
}
@keyframes scan{from{background-position:0 -60px}to{background-position:0 120%}}
.cam .bar{display:flex;align-items:center;gap:8px;padding:9px 12px}
.cam .bar .nm{font-weight:600;font-size:13px}
.cam .bar .id{font-family:var(--mono);font-size:10px;color:var(--ink-faint);margin-left:auto}

.chip{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  padding:2px 7px;border-radius:5px;text-transform:uppercase;white-space:nowrap;
}
.chip.on,.chip.online{background:rgba(75,208,122,.14);color:var(--green)}
.chip.warn,.chip.reconnecting,.chip.starting{background:var(--amber-soft);color:var(--amber)}
.chip.off,.chip.offline,.chip.disabled,.chip.unknown{background:rgba(255,91,91,.14);color:var(--red)}

/* ---- sparkline (dashboard) ------------------------------------- */
.spark{display:flex;align-items:flex-end;gap:3px;height:40px}
.spark i{
  flex:1;background:linear-gradient(var(--amber),rgba(255,176,0,.25));
  border-radius:2px 2px 0 0;min-height:2px;opacity:.85;
}

/* ---- visit journal (dashboard) ------------------------------- */
.log{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.row{
  display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 14px 9px 9px;animation:rise .4s both;
}
.row:nth-child(1){animation-delay:.02s}.row:nth-child(2){animation-delay:.04s}
.row:nth-child(3){animation-delay:.06s}.row:nth-child(4){animation-delay:.08s}
.row:nth-child(5){animation-delay:.10s}.row:nth-child(6){animation-delay:.12s}
.row:nth-child(7){animation-delay:.14s}.row:nth-child(8){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.row.here{border-left:2px solid var(--amber)}
.row .thumb{
  width:88px;height:88px;border-radius:var(--radius-sm);overflow:hidden;
  background:linear-gradient(135deg,#1b232c,#0e1319);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-size:10px;font-family:var(--mono);
}
.row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row .desc{font-size:15px;font-weight:500}
.row .meta{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:5px;font-size:12px;color:var(--ink-dim)}
.row .meta strong,.row .meta .mono{color:var(--ink);font-weight:500}
.tag{
  font-family:var(--mono);font-size:11px;background:rgba(92,200,232,.10);
  color:var(--cyan);padding:2px 7px;border-radius:5px;
}
.here-flag,.row .open{color:var(--amber);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.here-flag .dot,.row .open .dot{color:var(--amber)}
.row .act{display:flex;flex-direction:column;gap:4px;text-align:right;font-size:12px}

.pagination{display:flex;gap:4px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:6px 12px;border-radius:var(--radius-sm);background:var(--panel);
  border:1px solid var(--line);color:var(--ink);font-size:13px;font-family:var(--mono);
}
.pagination .current{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.pagination .disabled{color:var(--ink-faint);opacity:.5}

/* ---- KPI cards (reports) ------------------------------------- */
.kpis{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-bottom:16px;
}
@media(max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);padding:16px 18px}
.kpi .k,.kpi .label{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
}
.kpi .v,.kpi .value{
  font-family:var(--mono);font-weight:700;font-size:30px;line-height:1.1;
  margin-top:6px;font-variant-numeric:tabular-nums;
}
.kpi.live .v,.kpi.live .value{color:var(--amber)}
.kpi.people .value{color:var(--cyan)}
.kpi.vehicles .value{color:var(--amber)}
.kpi .sub{font-size:11px;color:var(--ink-faint);margin-top:2px}

/* ---- report panels / charts -------------------------------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}
.panel{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;
}
.panel h3{
  margin:0 0 12px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
}
.barchart{display:flex;align-items:flex-end;gap:6px;height:200px;padding-bottom:28px;position:relative}
.barchart .col{
  flex:1;display:flex;flex-direction:column-reverse;align-items:center;
  min-width:24px;position:relative;height:100%;
}
.barchart .col .bar-people,.barchart .col .bar-vehicles{width:100%;transition:height .3s}
.barchart .col .bar-people{background:var(--cyan)}
.barchart .col .bar-vehicles{background:var(--amber)}
.barchart .col .lbl{position:absolute;bottom:-22px;font-size:10px;color:var(--ink-faint);white-space:nowrap;font-family:var(--mono)}
.barchart .col .total-lbl{position:absolute;top:-16px;font-size:11px;color:var(--ink);font-weight:600;font-family:var(--mono)}
.hourchart{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:120px;align-items:end;padding-bottom:22px;position:relative}
.hourchart .col{display:flex;flex-direction:column-reverse;position:relative;height:100%}
.hourchart .col .bar-people{width:100%;background:var(--cyan)}
.hourchart .col .bar-vehicles{width:100%;background:var(--amber)}
.hourchart .col .lbl{position:absolute;bottom:-20px;font-size:9px;color:var(--ink-faint);width:100%;text-align:center;font-family:var(--mono)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-faint);margin-bottom:10px}
.legend .dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
.legend .dot-p{background:var(--cyan)}
.legend .dot-v{background:var(--amber)}
table.cams{width:100%;border-collapse:collapse;font-size:13px}
table.cams th,table.cams td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
table.cams th{color:var(--ink-faint);text-transform:uppercase;font-size:11px;letter-spacing:.1em;font-weight:700;font-family:var(--mono)}
table.cams td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- people page ------------------------------------------ */
.person{
  display:grid;grid-template-columns:100px 1fr;gap:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;margin-bottom:10px;animation:rise .4s both;
}
.person.closed{opacity:.82}
.person.open{border-color:var(--amber);box-shadow:inset 2px 0 0 var(--amber)}
.person .thumb{
  width:100px;height:130px;background:var(--panel-2);border-radius:var(--radius-sm);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);font-size:11px;
}
.person .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.person .info .label{font-size:16px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.person .info .desc{color:var(--ink-faint);font-size:13px;margin-bottom:8px}
.person .meta-row{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-dim);margin-bottom:8px}
.person .meta-row strong{color:var(--ink);font-weight:500;font-family:var(--mono)}
.person .badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:11px;font-weight:700;font-family:var(--mono);letter-spacing:.06em}
.person .badge-open{background:var(--amber-soft);color:var(--amber)}
.person .badge-closed{background:rgba(154,166,176,.14);color:var(--ink-faint)}
.route{background:var(--panel-2);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;max-height:200px;overflow-y:auto}
.route-step{display:grid;grid-template-columns:110px 1fr auto;gap:10px;padding:4px 0;border-bottom:1px dashed var(--line)}
.route-step:last-child{border-bottom:none}
.route-step .cam{color:var(--cyan);font-family:var(--mono);font-size:11px}
.route-step .desc{color:var(--ink)}
.route-step .when{color:var(--ink-faint);white-space:nowrap;font-family:var(--mono)}

/* ---- fullscreen camera viewer (dashboard, D2) ------------ */
.viewer{
  position:fixed;inset:0;z-index:50;background:rgba(5,7,10,.93);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;padding:clamp(14px,3vw,42px);
}
.viewer[hidden]{display:none}
.viewer .vtop{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-family:var(--mono);flex-wrap:wrap}
.viewer .vtop .vname{font-size:15px;font-weight:600}
.viewer .vtop .vid{font-size:11px;color:var(--ink-faint)}
.viewer .vtop .vhint{margin-left:auto;font-size:11px;color:var(--ink-faint)}
.viewer .vtop .vx{cursor:pointer;color:var(--ink-dim);border:1px solid var(--line);border-radius:6px;padding:4px 12px;background:transparent;font-size:13px}
.viewer .vstage{flex:1;border:1px solid var(--line);border-radius:var(--radius);background:#05070a;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.viewer .vstage img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.viewer .vstage .vwait{color:var(--ink-faint);font-family:var(--mono);font-size:12px}
.viewer .vstrip{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px}
.viewer .vstrip .vt{
  flex:0 0 132px;aspect-ratio:4/3;border:1px solid var(--line);border-radius:7px;
  background:linear-gradient(135deg,#182029,#0c1015);cursor:pointer;position:relative;overflow:hidden;
}
.viewer .vstrip .vt img{width:100%;height:100%;object-fit:cover}
.viewer .vstrip .vt[aria-current]{border-color:var(--amber)}
.viewer .vstrip .vt span{position:absolute;left:6px;bottom:4px;font:600 10px/1 var(--mono);color:var(--ink-dim);text-shadow:0 1px 2px #000}

/* ---- motion off ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pulse::after{animation:none;display:none}
  .cam .view .wait::before{animation:none}
  .row,.person{animation:none}
  .barchart .col .bar-people,.barchart .col .bar-vehicles{transition:none}
}

@media (max-width:640px){
  .row{grid-template-columns:64px 1fr;gap:10px}
  .row .act{grid-column:1/-1;flex-direction:row;justify-content:flex-start;text-align:left}
  nav.tabs a{padding:10px 12px}
}