/* ============================================================
   VULNSTATUS DESIGN SYSTEM — core stylesheet
   Link this on every page, then build with the classes below.
   ============================================================ */

/* ---- 1. TOKENS ------------------------------------------- */
:root{
  color-scheme:dark;
  --brand-accent:#ed6d3a;
  --brand-forest:#283c32;
  --structure-rgb:110,145,116;
  --accent-text:var(--brand-accent);
  /* surfaces — darkest to lightest */
  --bg:#111b17;        /* app canvas */
  --deep:#14221e;      /* sidebar, status bar */
  --panel:#1b2923;     /* card base */
  --panel2:#283c32;    /* raised: chips, inputs, hover */
  --line:#35453a;      /* default border / divider */
  --line2:#65775d;     /* hover + emphasis border */

  /* text */
  --txt:#edf0e7;       /* primary */
  --mut:#abb6a7;       /* secondary */
  --dim:#a1af98;       /* labels, metadata */

  /* brand */
  --orange:var(--brand-accent);    /* primary action + alert */
  --orange2:#c95428;   /* gradient end, pressed */
  --blue:#6e9174;      /* structural, grid, sweep */
  --blue2:#a5c298;     /* interactive blue */
  --ice:#c3d2b5;       /* data highlight on dark */

  /* severity — never reassign these */
  --red:#f4525c;       /* critical */
  --amber:#f5a524;     /* elevated / warning */
  --yellow:#e8c447;    /* medium */
  --green:#2ed47a;     /* healthy / resolved */

  /* severity text tints (readable on --panel) */
  --red-t:#fda4a8;
  --orange-t:#fdba74;
  --yellow-t:#f2d472;

  /* type */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --cond:'Barlow Condensed',sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;

  /* geometry */
  --r-sm:5px; --r:8px; --r-lg:10px;
  --sb:264px;          /* sidebar expanded */
  --sb-collapsed:88px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:#fdba74}

/* ---- 2. AMBIENT CANVAS ----------------------------------- */
/* Every full page gets both layers. Grid fades from the top. */
.vs-grid-layer{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(rgba(var(--structure-rgb),.045) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--structure-rgb),.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 90% at 60% 0%,#000 30%,transparent 78%)}
.vs-glow-layer{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 82% -10%,rgba(237,109,58,.10),transparent 62%),radial-gradient(760px 480px at 4% 104%,rgba(var(--structure-rgb),.12),transparent 64%)}

/* ---- 3. TYPE SCALE --------------------------------------- */
.vs-h1{font-family:var(--cond);font-size:30px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;line-height:1}
.vs-h2{font-family:var(--cond);font-size:17px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.vs-num{font-family:var(--cond);font-size:44px;font-weight:700;line-height:.9;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.vs-num-sm{font-family:var(--cond);font-size:22px;font-weight:700;letter-spacing:.6px;line-height:1;font-variant-numeric:tabular-nums}
.hud{font-family:var(--mono);font-size:9.5px;letter-spacing:1.7px;color:var(--dim)}
.vs-data{font-family:var(--mono);font-size:11.5px}
.vs-meta{font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--dim)}
.mutd{color:var(--mut)}

/* ---- 4. CARD --------------------------------------------- */
.card{background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;position:relative}
.card::before,.card::after{content:'';position:absolute;width:11px;height:11px;border-color:rgba(var(--structure-rgb),.5);border-style:solid;pointer-events:none}
.card::before{top:-1px;left:-1px;border-width:1px 0 0 1px;border-radius:var(--r-lg) 0 0 0}
.card::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-radius:0 0 var(--r-lg) 0}
.card.alarm{background:linear-gradient(160deg,rgba(244,82,92,.15),var(--deep) 62%);border-color:rgba(244,82,92,.32)}
.card.alarm::before,.card.alarm::after{border-color:rgba(244,82,92,.6)}
.chead{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.chead h3{font-family:var(--cond);font-size:17px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.tag{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:1.3px;color:var(--dim);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 8px}

/* ---- 5. GRID --------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
@media(max-width:1500px){.grid{grid-template-columns:repeat(6,1fr)}
  [data-w]{grid-column:span 6!important}
  [data-w="2"]{grid-column:span 2!important}
  [data-w="3"]{grid-column:span 3!important}}

/* ---- 6. BUTTONS + CONTROLS ------------------------------- */
.btn{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:var(--r);padding:11px 15px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:1.4px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--line2)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
.btn.pri{background:var(--brand-accent);border-color:transparent;color:#1d2421;box-shadow:0 6px 22px rgba(237,109,58,.32)}
.btn.pri:hover{filter:brightness(1.08)}
.iconbtn{background:var(--panel);border:1px solid var(--line);color:var(--mut);cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r);position:relative}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.iconbtn:hover{color:var(--txt);border-color:var(--line2)}
.iconbtn .ping{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.mapsel{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:6px 10px;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--mut);cursor:pointer}
.mapsel b{color:var(--txt);font-weight:500}
.mapsel svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4}
.mapsel:hover{border-color:var(--line2)}
.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 13px;color:var(--dim);min-width:180px}
.search input{background:0;border:0;outline:0;color:var(--txt);font-family:var(--mono);font-size:11.5px;flex:1;min-width:0}
.search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 15px}
.search kbd{font-family:var(--mono);border:1px solid var(--line2);border-radius:var(--r-sm);padding:1px 5px;font-size:10px;color:var(--dim)}

/* ---- 7. SEVERITY CHIPS + STATUS -------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:1px;padding:4px 9px;border-radius:var(--r-sm)}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
.c-crit{color:var(--red-t);background:rgba(244,82,92,.14)}
.c-high{color:var(--orange-t);background:rgba(237,109,58,.14)}
.c-med{color:var(--yellow-t);background:rgba(232,196,71,.12)}
.c-low{color:var(--ice);background:rgba(var(--structure-rgb),.14)}
.c-info{color:var(--mut);background:rgba(127,147,176,.12)}
.st{font-family:var(--mono);font-size:9px;letter-spacing:1px;padding:3px 7px;border-radius:var(--r-sm);font-weight:700}
.st.run{background:rgba(var(--structure-rgb),.18);color:var(--ice)}
.st.q{background:rgba(127,147,176,.12);color:var(--mut)}
.st.ok{background:rgba(46,212,122,.15);color:#7ee2a8}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;font-family:var(--mono);padding:3px 7px;border-radius:var(--r-sm)}
.up{color:var(--red-t);background:rgba(244,82,92,.13)}
.down{color:#7ee2a8;background:rgba(46,212,122,.13)}
.flat{color:var(--mut);background:rgba(var(--structure-rgb),.1)}
.alert{padding:12px 13px;border:1px solid rgba(244,82,92,.3);background:rgba(244,82,92,.08);border-radius:var(--r);font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;color:var(--red-t);display:flex;gap:10px;align-items:center}

/* ---- 8. BARS + TABLES ------------------------------------ */
.bar{height:7px;border-radius:4px;background:var(--panel2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px}
.prog{height:5px;background:var(--panel2);border-radius:4px;overflow:hidden}
.prog i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--orange),#fbbf24)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:1.4px;color:var(--dim);font-weight:400;padding:0 12px 11px}
td{padding:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px}
tbody tr:hover{background:rgba(var(--structure-rgb),.05)}

/* ---- 9. MOTION ------------------------------------------- */
/* Three synchronised rhythms. Do not add faster motion than these. */
.blip{width:7px;height:7px;border-radius:50%;background:var(--green);animation:vs-pulse 2.4s infinite}
@keyframes vs-pulse{0%{box-shadow:0 0 0 0 rgba(46,212,122,.5)}70%{box-shadow:0 0 0 7px rgba(46,212,122,0)}100%{box-shadow:0 0 0 0 rgba(46,212,122,0)}}
/* fibre-optic pulse: 9s cycle, ~2s traverse, then dark */
.vs-zip{position:relative;overflow:visible}
.vs-zip::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:88%;
  background:linear-gradient(90deg,transparent,rgba(237,109,58,.06) 22%,rgba(237,109,58,.18) 48%,rgba(237,109,58,.42) 72%,rgba(255,160,80,.78) 89%,#ffd4a8 97%,#fff2e2);
  box-shadow:0 0 10px rgba(237,109,58,.7),0 0 22px rgba(237,109,58,.35);
  animation:zip 9s cubic-bezier(.45,.05,.5,.95) infinite}
@keyframes zip{0%{transform:translateX(-105%);opacity:0}3%{opacity:1}23%{transform:translateX(200%);opacity:1}29%{transform:translateX(200%);opacity:0}100%{transform:translateX(200%);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .vs-zip::after,.blip,.sweep,.contact{animation:none!important}}

/* Explicit light theme. Dark remains the default, independent of OS preference. */
:root[data-theme="light"]{
 color-scheme:light;
 --bg:#f5f4ef;--deep:#e9ece2;--panel:#fafbf7;--panel2:#e4e8dd;
 --line:#d9dcd3;--line2:#9ba98e;--txt:#1d2421;--mut:#596353;--dim:#626e59;
 --blue:#486c50;--blue2:#3e6446;--ice:#3e6446;--accent-text:#a8421e;
 --structure-rgb:72,108,80;
 --red:#b62335;--amber:#8a5900;--yellow:#756100;--green:#217044;
 --red-t:#b62335;--orange-t:#a8421e;--yellow-t:#756100;
}
a:hover{color:var(--txt)}
:focus-visible{outline:3px solid var(--brand-accent);outline-offset:4px}
:root[data-theme="light"] :is(.st.ok,.down){color:var(--green)}
:root[data-theme="light"] .vs-zip::after{display:none}