/* 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)}