/* ─────────────────────────────────────────────────────────────────────────
   Palette roles. Light and dark are both selected sets (the dark column is
   the same hues re-stepped for the dark surface, not an automatic flip).
   Shared with the BLE console so a node looks the same in both tools.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --surface-0:#f4f4f2; --surface-1:#fcfcfb; --surface-2:#efeeea; --surface-3:#e5e4df;
  --border:#dcdbd5; --border-strong:#c2c1b9;
  --text-primary:#0b0b0b; --text-secondary:#52514e; --text-muted:#7c7b75;
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --seq-100:#cde2fb; --seq-250:#86b6ef; --seq-450:#2a78d6; --seq-600:#184f95;
  --good:#008300; --warn:#eda100; --crit:#e34948;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-0:#111110; --surface-1:#1a1a19; --surface-2:#242422; --surface-3:#2e2e2b;
    --border:#33332f; --border-strong:#4a4a45;
    --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#8f8e85;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
    --seq-100:#104281; --seq-250:#184f95; --seq-450:#3987e5; --seq-600:#86b6ef;
    --good:#3ba55d; --warn:#c98500; --crit:#e66767;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0:#111110; --surface-1:#1a1a19; --surface-2:#242422; --surface-3:#2e2e2b;
  --border:#33332f; --border-strong:#4a4a45;
  --text-primary:#ffffff; --text-secondary:#c3c2b7; --text-muted:#8f8e85;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --seq-100:#104281; --seq-250:#184f95; --seq-450:#3987e5; --seq-600:#86b6ef;
  --good:#3ba55d; --warn:#c98500; --crit:#e66767;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--surface-0);color:var(--text-primary);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.mono,.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
           font-variant-numeric:tabular-nums}
h1{font-size:17px;font-weight:650;letter-spacing:-.01em}
h2{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;
   color:var(--text-secondary);margin-bottom:12px}
h3{font-size:13px;font-weight:650;margin-bottom:6px}
a{color:var(--series-1)}
.sub{color:var(--text-muted);font-size:12px}
.spacer{flex:1 1 auto}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
[hidden]{display:none !important}

/* ─── Shell ──────────────────────────────────────────────────────────── */
#shell{max-width:1360px;margin:0 auto;padding:16px}
header.top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.brand{display:flex;flex-direction:column}
.brand .sup{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}

button,.btn{
  font:inherit;font-weight:600;font-size:13px;padding:7px 13px;border-radius:7px;
  border:1px solid var(--border-strong);background:var(--surface-1);
  color:var(--text-primary);cursor:pointer;transition:.12s;
}
button:hover:not(:disabled){background:var(--surface-2)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--series-1);border-color:var(--series-1);color:#fff}
button.primary:hover:not(:disabled){filter:brightness(1.08)}
button.sm{padding:4px 9px;font-size:12px}
button.ghost{border-color:transparent;background:transparent}
button.ghost:hover{background:var(--surface-2)}

input,select{
  font:inherit;font-size:13px;padding:7px 10px;border-radius:7px;
  border:1px solid var(--border-strong);background:var(--surface-0);
  color:var(--text-primary);width:100%;
}
input:focus,select:focus{outline:2px solid var(--series-1);outline-offset:-1px}
label.fld{display:block}
label.fld .lbl{font-size:12px;color:var(--text-secondary);margin-bottom:4px;display:block}

/* ─── Login ──────────────────────────────────────────────────────────── */
#login{min-height:100vh;display:grid;place-items:center;padding:24px}
#login .box{width:100%;max-width:400px;background:var(--surface-1);
  border:1px solid var(--border);border-radius:14px;padding:26px;box-shadow:var(--shadow)}
#login h1{margin-bottom:4px}
#login .fields{display:grid;gap:12px;margin:20px 0}

/* ─── Cards / tiles ──────────────────────────────────────────────────── */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;
      padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.grid{display:grid;gap:14px;margin-bottom:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
.grid .card{margin-bottom:0}

.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px}
.tile .k{font-size:11px;color:var(--text-muted);text-transform:uppercase;
         letter-spacing:.05em;margin-bottom:4px}
.tile .v{font-size:22px;font-weight:650;letter-spacing:-.02em;
         font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.tile .v.sm{font-size:15px}
.tile .u{font-size:11px;font-weight:500;color:var(--text-muted);margin-left:3px}
.tile .foot{font-size:11px;color:var(--text-muted);margin-top:3px}

.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
    border-bottom:1px solid var(--border);font-size:13px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--text-secondary)}
.kv .v{font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;
       font-weight:600;text-align:right}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
      font-size:11.5px;font-weight:650;background:var(--surface-2);
      border:1px solid var(--border);color:var(--text-secondary)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.pill.fault,.pill.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}

.notice{background:var(--surface-2);border-left:3px solid var(--warn);
        padding:10px 13px;border-radius:0 8px 8px 0;font-size:12.5px;
        color:var(--text-secondary);margin-bottom:12px}
.notice.info{border-left-color:var(--series-1)}
.notice.good{border-left-color:var(--good)}
.notice.bad{border-left-color:var(--crit)}
.notice:last-child{margin-bottom:0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
     background:var(--surface-3);padding:1px 5px;border-radius:4px}

/* ─── Tabs ───────────────────────────────────────────────────────────── */
nav.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:16px}
nav.tabs button{border:none;background:none;color:var(--text-muted);
  border-bottom:2px solid transparent;border-radius:8px 8px 0 0;padding:9px 15px}
nav.tabs button:hover{color:var(--text-primary);background:var(--surface-2)}
nav.tabs button.active{color:var(--series-1);border-bottom-color:var(--series-1)}

/* ─── Charts ─────────────────────────────────────────────────────────── */
.chart-wrap{overflow-x:auto;overflow-y:hidden}
svg{display:block;width:100%;height:auto}
.axis-line{stroke:var(--border-strong);stroke-width:1}
.grid-line{stroke:var(--border);stroke-width:1;stroke-dasharray:2 3}
.tick{fill:var(--text-muted);font-size:10px;
      font-family:ui-monospace,Menlo,Consolas,monospace}
.axis-title{fill:var(--text-secondary);font-size:11px;font-weight:600}
.bar{fill:var(--seq-450)}
.hit{fill:transparent;cursor:crosshair}
.empty-note{fill:var(--text-muted);font-size:12px}
.cell{stroke:var(--surface-1);stroke-width:1}
.cell.live{cursor:pointer}
.cell.live:hover{stroke:var(--text-primary);stroke-width:2}
/* Placement inferred rather than provisioned: the node is drawn somewhere
   plausible but its slot is not authoritative, and that has to be visible. */
.cell.guessed{stroke:var(--text-muted);stroke-width:1.5;stroke-dasharray:3 2}

#chart-tip{position:fixed;pointer-events:none;opacity:0;transition:opacity .1s;
  background:var(--surface-1);border:1px solid var(--border-strong);border-radius:8px;
  padding:8px 11px;font-size:12px;box-shadow:var(--shadow);z-index:60;white-space:nowrap;
  max-width:280px}
#chart-tip.on{opacity:1}
#chart-tip .t{font-weight:700;margin-bottom:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
#chart-tip .k{color:var(--text-muted)}
#chart-tip b{font-family:ui-monospace,Menlo,Consolas,monospace}
#chart-tip .w{color:var(--warn);margin-top:4px;white-space:normal}

/* ─── Tables ─────────────────────────────────────────────────────────── */
.tbl-scroll{overflow:auto;max-height:520px;border:1px solid var(--border);border-radius:9px}
table{border-collapse:collapse;width:100%;font-size:12px}
th,td{text-align:right;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{color:var(--text-secondary);font-weight:650;font-size:11px;text-transform:uppercase;
   letter-spacing:.04em;position:sticky;top:0;background:var(--surface-2);z-index:1}
td{font-family:ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-2)}
tbody tr.clickable{cursor:pointer}
tr.sim td{opacity:.55;font-style:italic}
td.flag{color:var(--crit);font-style:normal}

/* ─── Device list ────────────────────────────────────────────────────── */
.devlist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.devcard{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:12px 13px;cursor:pointer;transition:.12s;border-left-width:3px}
.devcard:hover{background:var(--surface-3);transform:translateY(-1px)}
.devcard.ok{border-left-color:var(--good)}
.devcard.warn{border-left-color:var(--warn)}
.devcard.fault,.devcard.unknown{border-left-color:var(--crit)}
.devcard .n{font-weight:650;margin-bottom:2px}
.devcard .m{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted);margin-top:6px}

/* ─── Toast + loading ────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--surface-1);border:1px solid var(--border-strong);
  border-left:3px solid var(--series-1);border-radius:9px;padding:11px 17px;
  font-size:13px;box-shadow:var(--shadow);z-index:70;opacity:0;
  transition:opacity .18s,transform .18s;pointer-events:none;max-width:86vw}
#toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}
#toast.bad{border-left-color:var(--crit)}
#toast.good{border-left-color:var(--good)}

.loading{display:inline-block;width:13px;height:13px;border:2px solid var(--border-strong);
  border-top-color:var(--series-1);border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:6px;color:transparent}
@keyframes sk{to{background-position:-200% 0}}

@media (max-width:640px){
  #shell{padding:11px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .tile .v{font-size:18px}
}
@media print{
  nav.tabs,button,#toast{display:none !important}
  .card{break-inside:avoid;box-shadow:none}
}

/* ─── Global range bar ───────────────────────────────────────────────── */
.rangebar{padding:10px 14px;position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--surface-1) 94%,transparent);
  backdrop-filter:blur(6px)}
.rangebar input[type=datetime-local]{font-size:12.5px;padding:5px 8px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
@media print{.rangebar{position:static;backdrop-filter:none}}