/* Swift staff UI (D003, D036, D040). Dark theme from brand/README.md. Quicksand is served locally
   (SIL OFL, static/fonts/OFL.txt) for headings and the wordmark; dense text uses the system UI font. */
@font-face { font-family:"Quicksand"; src:url("/static/fonts/Quicksand-Variable.ttf") format("truetype"); font-weight:300 700; font-display:swap; }

:root {
  color-scheme:dark;
  /* Brand (D040) */
  --bg:#121B23; --bg-glow:#1C384C; --surface:#18242F; --surface-2:#1F2F3C; --line:#2A3A48;
  --blue:#008BCC; --blue-light:#34A7DD; --blue-glow:#4FC0F0;
  /* Fills behind white text (D041): white on #0079B3 is 4.8:1; on #008BCC it would be 3.8:1 */
  --blue-fill:#0079B3; --blue-fill-hover:#006A9C;
  --page:radial-gradient(ellipse at 50% 35%, var(--bg-glow) 0%, var(--bg) 70%);
  /* Text on --surface: white 15.8:1, body 10.5:1, muted 5.9:1 */
  --ink:#FFFFFF; --ink-2:#C9D4DD; --muted:#8FA0AE;
  --card:var(--surface); --line-2:var(--surface-2);
  /* Priorities use the dark severity colours (not brand colours); every badge also has its label */
  --p1:#F0524A; --p2:#F08A3C; --p3:#E8C547; --p4:#8FA0AE;
  --p1-bg:rgba(240,82,74,.12); --p2-bg:rgba(240,138,60,.12); --p3-bg:rgba(232,197,71,.12); --p4-bg:rgba(143,160,174,.12);
  /* Status */
  --good:#4CC38A; --good-bg:rgba(76,195,138,.12); --late:#F0524A; --late-bg:rgba(240,82,74,.12);
  --soon:#E8C547; --soon-bg:rgba(232,197,71,.12);
  --heading:"Quicksand","Segoe UI",system-ui,sans-serif;
  --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.18);
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg) var(--page) fixed; color:var(--ink-2); font-family:"Segoe UI",system-ui,sans-serif;
  font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; }
a { color:inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--blue-light); outline-offset:2px; border-radius:6px; }

/* Shell: dark sidebar + content */
.shell { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.sidebar { background:rgba(18,27,35,.85); border-right:1px solid var(--line); color:var(--ink-2); display:flex; flex-direction:column; padding:22px 14px 16px;
  position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-family:var(--heading);
  font-weight:700; font-size:26px; letter-spacing:-.01em; padding:0 8px; }
.brand .dot-blue { color:var(--blue); }
.tagline { margin:0 0 22px 53px; font-family:var(--heading); font-size:8.5px; font-weight:500; letter-spacing:.14em; white-space:nowrap;
  color:var(--ink-2); }
.sidebar nav { display:flex; flex-direction:column; gap:3px; }
.sidebar nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; color:var(--ink-2);
  text-decoration:none; font-weight:500; position:relative; }
.sidebar nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar nav a[aria-current="page"] { background:rgba(255,255,255,.09); color:#fff; font-weight:650; }
.sidebar nav a[aria-current="page"]::before { content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:4px;
  border-radius:0 4px 4px 0; background:var(--blue); }
.sidebar nav svg { flex:none; opacity:.9; }
.who { margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 8px 0; border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px; flex-wrap:wrap; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--blue-fill); color:#fff; display:grid; place-items:center;
  font-weight:800; flex:none; }
.who-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px; }
.signout { background:none; border:0; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; padding:0; margin-left:40px; }
.signout:hover { color:#fff; }

main { padding:28px 32px 48px; max-width:1440px; width:100%; min-width:0; }

/* Page header */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.page-head h1 { font-family:var(--heading); color:var(--ink); font-size:26px; line-height:1.15; margin:0; letter-spacing:-.01em; font-weight:700; }
.page-head .sub { margin:4px 0 0; color:var(--muted); }
.crumb { font-size:12.5px; color:var(--muted); margin:0 0 4px; }
.crumb a { text-decoration:none; } .crumb a:hover { text-decoration:underline; }
h1 { font-family:var(--heading); color:var(--ink); font-size:26px; margin:0 0 18px; letter-spacing:-.01em; font-weight:700; }
h2 { font-family:var(--heading); color:var(--ink); font-size:15.5px; margin:0; font-weight:700; }
h3, strong { color:var(--ink); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-head .hint, .card-head a.more { font-size:12.5px; color:var(--muted); text-decoration:none; }
.card-head a.more:hover { color:var(--ink); text-decoration:underline; }

/* Cards and grid */
.grid { display:grid; gap:16px; margin-bottom:16px; }
.grid.kpis { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.grid.wide-left { grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); }
.card, .panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 20px; min-width:0; }
.panel + .panel { margin-top:16px; }
.panel { overflow-x:auto; }

/* KPI tiles */
.kpi { display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; overflow:hidden; }
.kpi::after { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent, var(--line)); }
.kpi .label { margin:0; color:var(--muted); font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
.kpi .value { color:var(--ink); display:block; font-size:36px; line-height:1.1; font-weight:800; letter-spacing:-.03em; margin:6px 0 2px; }
.kpi .note { color:var(--muted); font-size:12.5px; }
.kpi .note a { color:var(--muted); }
.kpi.critical { --accent:var(--p1); } .kpi.critical .value { color:var(--p1); }
.kpi.warn { --accent:var(--p2); } .kpi.warn .value { color:var(--p2); }
.kpi.good { --accent:var(--good); }
.kpi.info { --accent:var(--p3); }
.kpi .value.na { color:var(--muted); }

/* Charts */
.chart text { font-family:inherit; }
.donut-wrap { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.donut-value { font-size:30px; font-weight:800; fill:var(--ink); letter-spacing:-.03em; }
.donut-label { font-size:11.5px; fill:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.legend { list-style:none; margin:0; padding:0; display:grid; gap:8px; min-width:190px; flex:1; }
.legend li { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:10px; font-size:13.5px; }
.legend .swatch { width:12px; height:12px; border-radius:3px; }
.legend a { text-decoration:none; } .legend a:hover { text-decoration:underline; }
.legend .count { font-weight:700; font-variant-numeric:tabular-nums; }
.hbars { display:grid; gap:10px; }
.hbar { display:grid; grid-template-columns:132px 1fr 44px; align-items:center; gap:10px; font-size:13.5px; }
.hbar-label { color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar-track { height:12px; background:var(--line-2); border-radius:6px; overflow:hidden; }
.hbar-fill { display:block; height:100%; border-radius:6px; }
.hbar-value { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.chart.trend { max-height:220px; }
.axis { font-size:11px; fill:var(--muted); }

/* Badges and pills */
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding:2px 8px; border-radius:999px;
  font-size:12px; font-weight:750; letter-spacing:.01em; white-space:nowrap; }
.badge.P1, .badge.P1w { background:var(--p1-bg); color:var(--p1); }
.badge.P2 { background:var(--p2-bg); color:var(--p2); }
.badge.P3 { background:var(--p3-bg); color:var(--p3); }
.badge.P4 { background:var(--p4-bg); color:var(--p4); }
.badge { border:1px solid currentColor; }
.pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:650; white-space:nowrap;
  background:var(--line-2); color:var(--ink-2); }
.pill.late { background:var(--late-bg); color:var(--late); }
.pill.soon { background:var(--soon-bg); color:var(--soon); }
.pill.good { background:var(--good-bg); color:var(--good); }
.tag { display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--soon-bg); color:var(--soon);
  font-size:11.5px; font-weight:650; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.dot.on { background:var(--good); } .dot.off { background:var(--p2); }

/* Tables */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; color:var(--muted); font-weight:650; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 10px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
td { border-top:1px solid var(--line-2); padding:10px 10px 10px 0; vertical-align:middle; }
tbody tr:first-child td { border-top:0; }
tbody tr:hover td { background:rgba(255,255,255,.03); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
td a { text-decoration:none; font-weight:600; color:var(--ink); } td a:hover { text-decoration:underline; }
tr.retired td { color:var(--muted); }
.mono { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px; }
.muted { color:var(--muted); }
.evidence { color:var(--muted); font-size:12.5px; max-width:640px; overflow-wrap:anywhere; }
.empty { color:var(--muted); margin:6px 0; }
.empty-state { text-align:center; padding:36px 16px; color:var(--muted); }
.empty-state strong { display:block; color:var(--ink); font-size:16px; margin-bottom:4px; }

/* Fix rows with expandable detail */
details summary { cursor:pointer; list-style:none; font-weight:600; display:grid; grid-template-columns:16px 1fr auto;
  align-items:start; }
.fix { display:block; }
details summary::-webkit-details-marker { display:none; }
details summary::before { content:"\25B8"; display:inline-block; width:14px; color:var(--muted); transition:transform .15s; }
details[open] summary::before { transform:rotate(90deg); }
details .detail { margin:10px 0 4px 14px; padding:12px 14px; background:var(--bg); border:1px solid var(--line-2); border-radius:10px; }
details .detail table { font-size:13px; margin-bottom:8px; }

/* Buttons and forms */
.btn, .btn-primary, a.btn, a.btn-primary { display:inline-flex; align-items:center; gap:8px; border-radius:9px; padding:9px 16px;
  font:inherit; font-weight:650; font-size:13.5px; cursor:pointer; text-decoration:none; line-height:1.2; }
.btn { background:var(--surface-2); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); }
.btn:hover { border-color:var(--muted); }
.btn-primary { background:var(--blue-fill); color:#fff; border:0; box-shadow:0 4px 14px rgba(0,121,179,.35); }
.btn-primary:hover { background:var(--blue-fill-hover); }
.link { background:none; border:0; color:var(--late); font:inherit; font-size:13px; cursor:pointer; padding:0; text-decoration:underline; }
.inline { display:inline; margin:0; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.actions-row { display:flex; flex-wrap:wrap; gap:10px; }
input[type=text], input[type=email], input[type=date], input:not([type]), select {
  font:inherit; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); min-width:0; color:var(--ink); }
input:not([type]) { min-width:260px; }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:16px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); }
.filters label { display:flex; flex-direction:column; font-size:11.5px; color:var(--muted); gap:4px; font-weight:650;
  text-transform:uppercase; letter-spacing:.05em; }
.filters label.check { flex-direction:row; align-items:center; gap:6px; text-transform:none; letter-spacing:0; font-size:13px; }
.hint { color:var(--muted); font-size:12.5px; margin:8px 0 0; }
form.accept { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-top:10px; font-size:12.5px; }
form.accept label { display:flex; flex-direction:column; color:var(--muted); gap:3px; }
form.accept input[name=reason] { width:320px; max-width:100%; }

/* Install / token callouts */
.callout { border-left:4px solid var(--blue); }
.install { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg,var(--bg-glow),var(--surface)); color:var(--ink-2); border:1px solid var(--line); }
.install h2 { color:#fff; font-size:17px; margin-bottom:4px; }
.install p { margin:0; max-width:640px; } .install .hint { color:var(--muted); }
code { display:block; background:var(--bg); color:var(--ink-2); border-radius:8px; padding:9px 12px; font-size:12.5px; overflow-wrap:anywhere; }
code.secret { font-size:15px; font-weight:650; user-select:all; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 20px; margin:0; }
.facts dt { color:var(--muted); font-size:11.5px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
.facts dd { margin:2px 0 0; font-weight:600; color:var(--ink); }

@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; background:none; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px 16px; gap:8px; }
  .tagline, .who { display:none; }
  .sidebar nav { flex-direction:row; flex-wrap:wrap; }
  .sidebar nav a[aria-current="page"]::before { display:none; }
  main { padding:20px 16px 40px; }
  .grid.wide-left { grid-template-columns:1fr; }
}
.fix-title { display:block; font-weight:650; }
.fix-sub { display:block; color:var(--muted); font-size:12.5px; margin-top:1px; font-variant-numeric:tabular-nums; }
td.nowrap, .nowrap { white-space:nowrap; }
.segmented { display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--line-2); padding:4px; border-radius:10px; }
.segmented a { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:7px; text-decoration:none;
  font-weight:600; font-size:13px; color:var(--ink-2); }
.segmented a span { color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; }
.segmented a[aria-current] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.segmented .sw { width:9px; height:9px; border-radius:3px; display:inline-block; }
.sw.P1 { background:var(--p1); } .sw.P2 { background:var(--p2); } .sw.P3 { background:var(--p3); } .sw.P4 { background:var(--p4); }
.client-cards { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.client-card { display:grid; gap:14px; text-decoration:none; transition:border-color .15s, transform .15s; }
.client-card:hover { border-color:var(--blue); transform:translateY(-1px); }
.client-card-head { display:flex; gap:12px; align-items:center; }
.client-card-head strong { display:block; font-size:16px; }
.client-card-head .muted { font-size:12.5px; }
.client-mark { width:40px; height:40px; border-radius:10px; background:var(--blue-fill); color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:18px; flex:none; }
.client-card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.client-card-stats .label { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:650; }
.client-card-stats strong { font-size:22px; font-weight:800; color:var(--ink); }
.late-text { color:var(--late); }
form.stack { display:grid; gap:10px; }
form.stack label { display:grid; gap:4px; font-size:12px; color:var(--muted); font-weight:650; }

/* Atera / RMM script (D038) */
pre.script { background:var(--bg); color:var(--ink-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font:12px/1.5 Consolas, monospace;
  white-space:pre; overflow-x:auto; max-height:340px; margin:0; }
.copy-wrap { position:relative; margin:8px 0 14px; }
.copy-wrap .copy { position:absolute; top:8px; right:8px; padding:4px 10px; font-size:12px; }
.callout h3 { margin:14px 0 4px; font-size:14px; }

/* Sign-in page (matches brand/reference/swift-login-reference.png) */
body.login { display:grid; place-items:center; padding:24px 16px 72px; }
.login-main { display:flex; flex-direction:column; align-items:center; text-align:center; gap:28px; }
.login-main .lockup { width:min(640px, 100%); height:auto; }
.login-main .btn-primary { padding:12px 24px; font-size:15px; font-weight:600; border-radius:6px; }
.login-note { margin:0; color:var(--muted); font-size:13px; }
.login-error { margin:0; color:var(--late); }
.itm { position:fixed; left:24px; bottom:18px; margin:0; font-family:var(--heading); font-weight:400; font-size:21px;
  letter-spacing:.06em; color:var(--ink-2); }
.itm span { color:var(--blue); }