/* SMT Next v2 design system.
   One set of tokens and components for every page that extends base.html. Loaded after style.css and
   worklist.css, so older page CSS keeps working while it is moved over.
   Colour: SMT blue is the only accent. Red / amber / green / grey mean status and nothing else. */
:root{
  --s-bg:#0b0f14; --s-side:#0e1319; --s-surface:#131a22; --s-raised:#18212b; --s-hover:#1d2833;
  --s-line:#243040; --s-line-2:#2e3c4d;
  --s-ink:#eef3f7; --s-ink-2:#b8c4cf; --s-ink-3:#8594a3;
  --s-blue:#0569b3; --s-blue-hi:#2f86d1; --s-blue-ink:#7cc0ff; --s-blue-soft:#0b2a45;
  --s-red:#ef5350; --s-red-soft:#3a1618; --s-amber:#f0a630; --s-amber-soft:#3a2a10;
  --s-green:#3fbf6b; --s-green-soft:#12301d; --s-grey:#8a97a5; --s-grey-soft:#1f2731;
  --t-13:13px; --t-14:14px; --t-16:16px; --t-20:20px; --t-28:28px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --r-8:6px; --r-12:6px;
  --ease:cubic-bezier(.2,.7,.2,1); --fast:140ms; --med:200ms;
  --side-w:200px;
  /* older page CSS reads these names */
  --bg:var(--s-bg); --panel:var(--s-surface); --line:var(--s-line); --ink:var(--s-ink); --muted:var(--s-ink-3);
  --mut:var(--s-ink-3); --accent:var(--s-blue-ink); --brand:var(--s-blue); --red:var(--s-red); --amber:var(--s-amber); --green:var(--s-green);
}
html{scroll-behavior:smooth}
body{background:var(--s-bg);color:var(--s-ink);font:var(--t-14)/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--s-blue-ink)}
::selection{background:var(--s-blue);color:#fff}
:focus-visible{outline:2px solid var(--s-blue-ink);outline-offset:2px;border-radius:4px}

/* ---------- app shell: left sidebar + top bar + content ---------- */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:var(--s-side);border-right:1px solid var(--s-line);
  display:flex;flex-direction:column;gap:2px;padding:12px 8px}
.side .logo{display:block;padding:2px 6px 10px}
.side .logo img{height:22px;display:block}
.side .sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink-3);padding:10px 8px 2px}
.side .proj{font-size:13px;font-weight:700;color:var(--s-ink);padding:0 8px 2px;line-height:1.3}
.nav a,.nav .off{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:4px;color:var(--s-ink-2);
  text-decoration:none;font-size:13px;transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.nav a:hover{background:var(--s-hover);color:var(--s-ink)}
.nav a.on{background:var(--s-hover);color:var(--s-ink);font-weight:600}
.nav a.on svg{stroke:var(--s-blue-ink)}
.nav .off{color:#56616d;cursor:help}
.nav svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side .foot{margin-top:auto;font-size:var(--t-13);color:var(--s-ink-3);padding:var(--sp-3) var(--sp-2) 0;border-top:1px solid var(--s-line)}
.side .foot a{color:var(--s-ink-2)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--sp-3);padding:6px 20px;
  background:var(--s-bg);border-bottom:1px solid var(--s-line)}
.topbar .menu{display:none;background:none;border:1px solid var(--s-line-2);color:var(--s-ink);border-radius:var(--r-8);padding:6px 10px;font-size:var(--t-14)}
.switch{position:relative;flex:1;max-width:520px}
.switch input{display:block;width:100%;background:var(--s-surface);border:1px solid var(--s-line-2);border-radius:var(--r-8);color:var(--s-ink);
  font-size:13px;padding:6px 34px 6px 30px;transition:border-color var(--fast) var(--ease)}
.switch input:focus{border-color:var(--s-blue-hi);outline:none;}
.switch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--s-ink-3);fill:none;stroke-width:2}
.switch .hint{position:absolute;right:8px;top:50%;transform:translateY(-50%);margin:0;font-size:11px;line-height:16px;text-align:center;min-width:18px;
  color:var(--s-ink-3);border:1px solid var(--s-line-2);border-radius:4px;padding:0 4px;pointer-events:none}  /* margin:0 — style.css .hint adds margin-top:12px */
.topbar .who{margin-left:auto;font-size:var(--t-13);color:var(--s-ink-3);white-space:nowrap}
.content{padding:16px 20px 32px;max-width:1440px;width:100%;margin:0 auto}
.content>.pnav{display:none}                 /* the sidebar carries the project sections */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:50;transform:translateX(-100%);transition:transform var(--med) var(--ease);
    }
  body.nav-open .side{transform:none}
  body.nav-open::after{content:"";position:fixed;inset:0;background:#0009;z-index:40}
  .topbar{padding:8px var(--sp-4)} .topbar .menu{display:block} .topbar .who{display:none}
  .content{padding:var(--sp-4) var(--sp-4) var(--sp-8)}
  .switch .hint{display:none}
}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.reveal{animation:rise var(--med) var(--ease) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0ms !important;transition-duration:1ms !important;scroll-behavior:auto !important}
}

.main-col,.content{min-width:0}
.shell{grid-template-columns:var(--side-w) minmax(0,1fr)}
@media (max-width:900px){ .shell{grid-template-columns:minmax(0,1fr)} }
.grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.card{min-width:0}.dname{overflow-wrap:anywhere}
.split>*,.scan>*,.ov-grid>*{min-width:0}
.ov-grid{grid-template-columns:minmax(0,1fr) 280px}
@media (max-width:860px){ .ov-grid{grid-template-columns:minmax(0,1fr)} }
.sbar select,.sbar input{max-width:100%;min-width:0}
@media (max-width:700px){ .sbar{flex-wrap:wrap} .sbar .keys{display:none} .sbar #proj,.sbar #q{width:100%} .banner .txt{white-space:normal} }

/* ---------- paper: every page prints light, full width, without the app chrome ---------- */
@media print{
  :root{--s-bg:#fff; --s-side:#fff; --s-surface:#fff; --s-raised:#f4f6f8; --s-hover:#fff;
    --s-line:#c8ced4; --s-line-2:#b0b8c0; --s-ink:#000; --s-ink-2:#222; --s-ink-3:#555;
    --s-blue-ink:#0569b3; --s-blue-soft:#e6f0f8; --s-red:#c62828; --s-red-soft:#fdecec;
    --s-amber:#b26a00; --s-amber-soft:#fff4e0; --s-green:#2e7d32; --s-green-soft:#e8f5e9; --s-grey-soft:#f0f2f4}
  body{background:#fff;color:#000}
  .side,.topbar,.noprint{display:none !important}
  .shell{display:block}
  .content{max-width:none;padding:0}
  .tbl-wrap{overflow:visible}
  .tbl td{white-space:normal}
}

/* project switcher suggestions */
.sw-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:var(--s-surface);border:1px solid var(--s-line-2);
  border-radius:var(--r-8);max-height:360px;overflow:auto;padding:4px 0}
.sw-list a{display:flex;gap:10px;align-items:baseline;padding:6px 10px;font-size:13px;color:var(--s-ink);text-decoration:none}
.sw-list a b{min-width:36px;text-align:right;font-variant-numeric:tabular-nums;color:var(--s-ink-3);font-weight:600}
.sw-list a:hover,.sw-list a.on{background:var(--s-hover)}
.sw-list a.on b{color:var(--s-blue-ink)}
.sw-list .none{padding:8px 10px;font-size:13px;color:var(--s-ink-3)}

/* ---------- light theme: html.light, set by the sidebar toggle or ?theme=light|dark (remembered as smtTheme) ----------
   The SMT marketing look: white ground, SMT blue chrome. Same palette as print. Status colours keep their meaning. */
html.light{--s-bg:#ffffff; --s-side:#f7f9fb; --s-surface:#ffffff; --s-raised:#f4f6f8; --s-hover:#eef3f8;
  --s-line:#dfe4ea; --s-line-2:#cfd6de; --s-ink:#1b2632; --s-ink-2:#3d4955; --s-ink-3:#66727f;
  --s-blue-ink:#0569b3; --s-blue-soft:#e6f0f8; --s-red:#d32f2f; --s-red-soft:#fdecec;
  --s-amber:#b26a00; --s-amber-soft:#fff4e0; --s-green:#2e7d32; --s-green-soft:#e8f5e9; --s-grey-soft:#f0f2f4;
  --accent:#0569b3; color-scheme:light}
html.light body{background:var(--s-bg);color:var(--s-ink)}
html.light .nav .off{color:#a3adb8}
.logo-light{display:none !important}
html.light .logo-dark{display:none !important}
html.light .logo-light{display:block !important}
.themetoggle{background:none;border:0;padding:0;font:inherit;color:var(--s-ink-2);cursor:pointer;text-decoration:underline}
/* older page CSS with hard-coded dark fills */
html.light .wl-actions button,html.light .wl-filters input[type=search],html.light .mk-opt,html.light .mk-box textarea,
html.light .mk-bar button.mk-sec,html.light .login input,html.light .controls button,html.light .decktools select,
html.light .projsearch,html.light .report-form select,html.light .iconbtn,html.light .distbar{background:#fff;color:var(--s-ink);border-color:var(--s-line-2)}
html.light .stage{background:var(--s-raised)}
html.light .boardtop{background:#fff}
html.light .worklist tr:hover td{background:var(--s-hover)}
html.light .badge.RED,html.light .chip.red,html.light .v.RED{background:#fdecec;color:#b3261e}
html.light .badge.AMBER,html.light .chip.amber,html.light .v.AMBER{background:#fff4e0;color:#8a5300}
html.light .badge.GREEN,html.light .chip.green,html.light .v.GREEN{background:#e8f5e9;color:#1f6b28}
html.light .verdict.RED,html.light .bigstat .redproj,html.light .disc-hot,html.light .err{background:#fdf0ef;border-color:#f1b4b0;color:#b3261e}
html.light .verdict.AMBER{background:#fff8ec;border-color:#f0d9a6;color:#8a5300}
html.light .verdict.GREEN{background:#eef8f1;border-color:#b7e0c2;color:#1f6b28}
html.light .card.vRED,html.light .pcard.has-red{border-color:#f1b4b0}
html.light .card.vAMBER,html.light .pcard.has-amber{border-color:#f0d9a6}
html.light .pcard.has-red{background:#fff8f7}
html.light .reddecks a{color:#b3261e}
html.light .tag.red,html.light .cnt.red:not(.z){color:#b3261e}
html.light .tag.amber,html.light .cnt.amber:not(.z){color:#8a5300}
html.light .tag.green,html.light .cnt.green:not(.z){color:#1f6b28}
html.light .cnt.z{color:#a3adb8}
html.light .segs button.on{background:var(--s-blue);color:#fff}
html.light .pm-panel{background:#fff;border-color:var(--s-line);box-shadow:0 10px 30px #0002}
html.light .pm-btn{box-shadow:0 4px 14px #0003}
html.light .mk-chip.mk-leak,html.light .mk-chip.mk-deficient{background:#fdecec;color:#b3261e}
html.light .mk-chip.mk-watch,html.light .mk-chip.mk-intermittent{background:#fff4e0;color:#8a5300}
html.light .mk-chip.mk-observe{background:#fff0e6;color:#9a4300}
html.light .mk-chip.mk-clear{background:#e8f5e9;color:#1f6b28}
html.light .worklist td a{color:#b3261e}html.light .worklist td a.open{color:var(--accent)}