/* hhialerts (adapted from oceanic-ac). Palette is the validated dataviz reference instance;
   light and dark are separately stepped sets, not an automatic flip. */
:root, body {
  color-scheme: light;
  --plane:#f7f9fb; --surface-1:#ffffff; --surface-2:#eef3f8;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781;
  --grid:#e1e0d9; --ring:rgba(11,11,11,0.10);
  --accent:#2a78d6; --accent-ink:#ffffff;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --cool:#2a78d6; --heat:#eb6834;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])), :root:where(:not([data-theme="light"])) body {
    color-scheme: dark;
    --plane:#0c0f12; --surface-1:#161a1f; --surface-2:#1e242b;
    --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --ring:rgba(255,255,255,0.10);
    --accent:#3987e5; --cool:#3987e5; --heat:#d95926;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] body {
  color-scheme: dark;
  --plane:#0c0f12; --surface-1:#161a1f; --surface-2:#1e242b;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --ring:rgba(255,255,255,0.10);
  --accent:#3987e5; --cool:#3987e5; --heat:#d95926;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--plane); color:var(--text-primary);
       font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--accent); }

/* ---------- app bar ---------- */
.bar { display:flex; align-items:center; gap:18px; padding:0 22px; height:56px;
       background:var(--surface-1); border-bottom:1px solid var(--ring); flex-wrap:wrap; }
.brand { font-weight:600; font-size:15px; display:flex; align-items:center; gap:9px;
         text-decoration:none; color:inherit; white-space:nowrap; }
.brand .mark { width:18px; height:18px; flex:none; }
.tabs { display:flex; gap:2px; height:100%; align-items:stretch; }
.tabs a { display:flex; align-items:center; padding:0 14px; text-decoration:none;
          color:var(--text-secondary); font-size:14px; border-bottom:2px solid transparent; }
.tabs a:hover { color:var(--text-primary); }
.tabs a[aria-current="page"] { color:var(--text-primary); border-bottom-color:var(--accent); font-weight:600; }
.bar .right { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:13px; }
.whoami { color:var(--text-secondary); } .whoami b { color:var(--text-primary); }
.badge { font-size:10px; text-transform:uppercase; letter-spacing:.6px; padding:2px 7px;
         border-radius:20px; border:1px solid var(--ring); color:var(--text-secondary); }
.linkish { background:none; border:0; color:var(--text-secondary); cursor:pointer; font:inherit; font-size:13px; padding:0; }
.linkish:hover { color:var(--text-primary); }

main { max-width:1200px; margin:0 auto; padding:22px 24px 56px; }
h1.page { font-size:20px; margin:0 0 4px; }
p.lede { color:var(--text-secondary); font-size:14px; margin:0 0 20px; }

.card { background:var(--surface-1); border:1px solid var(--ring); border-radius:10px;
        padding:18px 20px; margin-bottom:20px; }
.card h2 { margin:0 0 3px; font-size:14px; font-weight:600; }
.card .hint { margin:0 0 16px; color:var(--text-secondary); font-size:13px; }

/* ---------- forms ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
label { font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.6px; }
input, select { background:var(--surface-2); border:1px solid var(--ring); color:var(--text-primary);
                border-radius:7px; padding:9px 11px; font:inherit; width:100%; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
input.bad, select.bad { border-color:var(--critical); }
.err { color:var(--critical); font-size:12px; min-height:15px; }
fieldset { border:1px solid var(--ring); border-radius:8px; padding:16px; margin:20px 0 0; }
legend { font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.6px; padding:0 6px; }
.checks { display:flex; gap:18px; flex-wrap:wrap; }
.check { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-primary); }
.check input { width:auto; }
.actions { display:flex; gap:12px; align-items:center; margin-top:20px; flex-wrap:wrap; }
button.primary { background:var(--accent); color:var(--accent-ink); border:0; border-radius:7px;
                 padding:10px 18px; font:inherit; font-weight:600; cursor:pointer; }
button.primary:hover { filter:brightness(.93); }
button.primary:disabled { opacity:.55; cursor:default; }
button.ghost { background:transparent; border:1px solid var(--ring); color:var(--text-secondary);
               border-radius:7px; padding:9px 15px; font:inherit; cursor:pointer; }
button.ghost:hover { color:var(--text-primary); border-color:var(--muted); }
button.danger { background:transparent; border:1px solid var(--ring); color:var(--text-secondary);
                border-radius:6px; padding:3px 10px; font:inherit; font-size:12px; cursor:pointer; }
button.danger:hover { color:var(--critical); border-color:var(--critical); }

.banner { display:none; padding:11px 14px; border-radius:8px; margin-bottom:18px; font-size:14px; }
.banner.ok { display:block; background:color-mix(in srgb, var(--good) 12%, transparent);
             border:1px solid color-mix(in srgb, var(--good) 35%, transparent); color:var(--good); }
.banner.bad { display:block; background:color-mix(in srgb, var(--critical) 12%, transparent);
              border:1px solid color-mix(in srgb, var(--critical) 35%, transparent); color:var(--critical); }
.banner.warn { display:block; background:color-mix(in srgb, var(--warning) 14%, transparent);
               border:1px solid color-mix(in srgb, var(--warning) 40%, transparent); color:var(--text-primary); }

table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--ring); }
th { color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; white-space:nowrap; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.scroll { overflow-x:auto; }
.sub2 { color:var(--muted); font-size:11px; }
.empty { color:var(--text-secondary); font-size:13px; padding:20px 10px; }

/* ---------- state chips: colour + glyph + word, never colour alone ---------- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
        padding:2px 9px 2px 7px; border-radius:20px; border:1px solid var(--ring); white-space:nowrap; }
.chip .g { font-size:11px; line-height:1; }
.s-ON { color:var(--accent); } .s-OFF { color:var(--muted); }
.s-OFFLINE { color:var(--serious); } .s-NEVER_SEEN { color:var(--muted); }

/* ---------- alert levels ---------- */
.s-OK { color:var(--good); } .s-WARNING { color:var(--text-primary); }
.s-WARNING .g { color:var(--warning); }
.s-CRITICAL { color:var(--critical); } .s-OFFLINE { color:var(--critical); }
.s-WAITING, .s-DISABLED { color:var(--muted); }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }

/* ---------- alert strip ---------- */
.alert-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px;
             border:1px solid var(--ring); background:var(--surface-1); margin-bottom:8px; flex-wrap:wrap; }
.alert-row.lvl-critical { border-color:color-mix(in srgb, var(--critical) 55%, var(--ring));
                          background:color-mix(in srgb, var(--critical) 7%, var(--surface-1)); }
.alert-row.lvl-warning { border-color:color-mix(in srgb, var(--warning) 70%, var(--ring));
                         background:color-mix(in srgb, var(--warning) 8%, var(--surface-1)); }
.alert-row .a-main { flex:1; min-width:220px; }
.alert-row .a-title { font-weight:600; }
.alert-row .a-sub { color:var(--text-secondary); font-size:12px; }
.acked { color:var(--muted); font-size:12px; }

/* ---------- sensor cards ---------- */
.board { margin-bottom:22px; }
.board-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.board-head h2 { font-size:15px; margin:0; }
.board-head .sub2 { font-size:12px; }
.sensors { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.sensor { background:var(--surface-1); border:1px solid var(--ring); border-radius:12px; padding:14px;
          text-decoration:none; color:inherit; display:block; }
.sensor:hover { border-color:var(--muted); }
.sensor.lvl-WARNING { border-color:var(--warning); }
.sensor.lvl-CRITICAL, .sensor.lvl-OFFLINE { border-color:var(--critical); box-shadow:0 0 0 1px var(--critical) inset; }
.s-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.s-name { font-weight:600; font-size:15px; }
.s-loc { color:var(--muted); font-size:11px; }
.s-temp { font-size:32px; font-weight:600; line-height:1; margin:12px 0 2px; font-variant-numeric:tabular-nums; }
.s-temp .u { font-size:15px; color:var(--text-secondary); font-weight:400; }
.s-temp.stale { color:var(--muted); }
.ladder { font-size:11px; color:var(--text-secondary); display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.ladder b { color:var(--text-primary); font-variant-numeric:tabular-nums; }
.s-foot { display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:9px;
          border-top:1px solid var(--ring); font-size:11px; color:var(--muted); }
.spark { display:block; width:100%; height:34px; margin-top:8px; }
.pending { font-size:11px; color:var(--text-secondary); margin-top:4px; }

/* ---------- kpis ---------- */
.kpis { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.kpi { border:1px solid var(--ring); border-radius:9px; padding:10px 14px; min-width:104px; background:var(--surface-1); }
.kpi .k-label { font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px;
                display:flex; align-items:center; gap:6px; }
.kpi .k-value { font-size:24px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; }
.meta { color:var(--muted); font-size:12px; }
.status-line { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }

/* ---------- chart ---------- */
.chart { width:100%; height:auto; display:block; }
.chart text { font-size:11px; fill:var(--text-secondary); font-family:system-ui,sans-serif; }
.seg { display:inline-flex; border:1px solid var(--ring); border-radius:8px; overflow:hidden; }
.seg button { background:var(--surface-1); border:0; color:var(--text-secondary);
              padding:7px 13px; font:inherit; font-size:13px; cursor:pointer; }
.seg button + button { border-left:1px solid var(--ring); }
.seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); font-weight:600; }
h2.section { font-size:14px; font-weight:600; margin:0 0 10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); }
section#alertsBox { margin-bottom:22px; }
button.primary.sm { padding:6px 13px; font-size:13px; }

/* ---------- narrow screens: the bar grows instead of overlapping the page ---------- */
@media (max-width: 720px) {
  .bar { height:auto; padding:8px 14px 0; gap:6px 14px; }
  .bar .right { margin-left:auto; }
  .tabs { order:3; width:100%; height:42px; overflow-x:auto; scrollbar-width:none; }
  .tabs a { padding:0 10px; white-space:nowrap; }
  .whoami .badge, .whoami > span:nth-child(2) { display:none; }
  main { padding:16px 14px 40px; }
}