/*
 * idlerthing — a lightweight, self-hosted inventory for hosting services.
 * Copyright (C) 2026 AlteredParadox
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or (at your
 * option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
 * for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <https://www.gnu.org/licenses/>.
 */

/* idlerthing app.css — hand-rolled, no framework.
   Dark-first; light theme overrides via [data-theme="light"]. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-400-normal.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-500-normal.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-600-normal.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-latin-500-normal.woff2?v=1') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-latin-600-normal.woff2?v=1') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0d0e12;
  --panel: #12141a;
  --panel2: #171a21;
  --bd: #23262d;
  --tx: #e7e9ee;
  --mut: #8b90a0;
  --acc: #5b9cf8;
  --accfg: #08101c;
  /* fallback until /static/accent.css loads and overrides it */
  --accSoft: rgba(91, 156, 248, 0.14);
  --hov: #1b1e26;
  --track: #2a2e37;

  --ok: #3fb96f;
  --warn: #d9a03f;
  --err: #e05d5d;

  --sidebar-w: 216px;
  --radius: 8px;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f6;
  --panel: #ffffff;
  --panel2: #f6f7f9;
  --bd: #d9dce2;
  --tx: #1a1d24;
  --mut: #5d6472;
  --acc: #2f6fd0;
  --accfg: #ffffff;
  --hov: #e8eaef;
  --track: #d0d4dc;

  --ok: #1e8e4e;
  --warn: #a06a10;
  --err: #c0392b;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}

.mono { font-family: var(--font-mono); }

a { color: var(--acc); text-decoration: none; }

h1 { font-size: 18px; font-weight: 600; margin: 0; }

/* ---------- Shell: fixed sidebar + content ---------- */
.shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--bd);
  padding: 14px 10px 10px;
  overflow-y: auto;
}

.main {
  margin-left: var(--sidebar-w);
  padding: 22px 26px;
}

/* ---------- Logo ---------- */
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 8px 14px;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--acc);
  color: var(--accfg);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}
.logo-word { font-weight: 600; font-size: 14px; letter-spacing: 0.2px; }

/* ---------- Sidebar nav ---------- */
.nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.nav-group {
  margin: 14px 8px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--tx);
  font-size: 13px;
}
.nav-item:hover { background: var(--hov); }
.nav-item.active { background: var(--panel2); color: var(--acc); }

.nav-count {
  font-size: 11px;
  color: var(--mut);
}
.nav-item.active .nav-count { color: var(--acc); }

/* ---------- Sidebar footer ---------- */
.sidebar-foot {
  border-top: 1px solid var(--bd);
  padding-top: 8px;
  margin-top: 10px;
}
.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.foot-row .nav-item { flex: 1; }

.icon-btn {
  background: none;
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx);
  width: 28px;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: var(--hov); }

.user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  margin-top: 6px;
  border-radius: var(--radius);
  background: var(--panel2);
  border: 1px solid var(--bd);
}
.user-name { font-size: 13px; font-weight: 500; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--mut);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.link-btn:hover { color: var(--err); }

/* ---------- Page header ---------- */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

/* ---------- Stat cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.stat-card {
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 6px;
}
.stat-value { font-size: 22px; font-weight: 600; }

/* ---------- Flash banner ---------- */
.flash {
  border: 1px solid var(--bd);
  border-left: 3px solid var(--mut);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.flash-ok { border-left-color: var(--ok); }
.flash-err { border-left-color: var(--err); }

/* ---------- Auth (login) ---------- */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.auth-card {
  width: 340px;
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
}
.auth-logo { padding: 0 0 4px; justify-content: center; }
.auth-title {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--mut);
  margin: 0 0 18px;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-submit { width: 100%; margin-top: 4px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"] {
  background: var(--panel2);
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx);
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}
input:focus {
  outline: none;
  border-color: var(--acc);
}

.btn {
  border: 1px solid var(--bd);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--tx);
  font: inherit;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
}
.btn:hover { background: var(--hov); }
.btn-primary {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--accfg);
  font-weight: 600;
}
.btn-primary:hover { background: var(--acc); filter: brightness(1.08); }

/* ---------- Page sub-line ---------- */
.page-sub {
  font-size: 12px;
  color: var(--mut);
  margin-top: 2px;
}

/* ---------- Panels & cards ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.card-grid {
  display: grid;
  /* auto-fit (not auto-fill): empty tracks collapse so cards stretch
     to fill the full row width instead of leaving dead space */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 12px;
}

/* ---------- Key-value lists ---------- */
.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 13px;
}
.kv dt { color: var(--mut); }
.kv dd { margin: 0; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  border: 1px solid var(--bd);
  background: var(--panel2);
  color: var(--tx);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.badge-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.badge-off { color: var(--mut); }
.badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge-net { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.badge-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ---------- Status dot ---------- */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.dot-ok { background: var(--ok); }
.dot-off { background: var(--track); }
/* Live 0 — no liveness data. A hollow ring, deliberately NOT green: green
   has to mean "verified up", and reusing it for "unknown" made an offline
   host look healthy purely because its Active box was ticked. Hollow also
   stays distinct from the solid grey of a genuinely inactive server.
   box-shadow rather than border so the 7px footprint is unchanged. */
.dot-unknown {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--mut);
}

/* ---------- List controls: tabs + search ---------- */
.list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
  flex-wrap: wrap;
}
.tabs { display: flex; gap: 4px; }
.pill {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: var(--panel);
  color: var(--mut);
  font-size: 12px;
  font-weight: 500;
}
.pill:hover { background: var(--hov); }
.pill.active {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--accfg);
}
/* pill-styled buttons (e.g. the short-hostnames toggle) */
.inline-form { display: inline; }
button.pill { font-family: inherit; cursor: pointer; }
.search-input {
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
}
.search-input:focus { outline: none; border-color: var(--acc); }

/* ---------- Tables ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  font-size: 13px;
}
/* Unit suffix in a table header ("Send Mbit/s"): present but subordinate
   to the column name, so the header still scans as a label. */
.tbl th .unit {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.65;
}

.tbl th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mut);
  padding: 8px 10px;
  border-bottom: 1px solid var(--bd);
  background: var(--panel2);
  white-space: nowrap;
}
.tbl th a { color: inherit; }
.tbl th.sorted a, .tbl th .arrow { color: var(--acc); }
.tbl td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--bd);
  vertical-align: top;
  white-space: nowrap;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--hov); }
tr.row-link { cursor: pointer; }

.cell-main { display: flex; align-items: center; gap: 8px; }
.cell-title { color: var(--tx); font-size: 13px; }
.cell-title:hover { color: var(--acc); }
.cell-sub {
  font-size: 11px;
  color: var(--mut);
  margin-top: 1px;
}

.due-warn { color: var(--warn); }
.due-over { color: var(--err); font-weight: 600; }

/* sticky actions column, revealed on row hover */
.col-actions {
  position: sticky;
  right: 0;
  background: var(--panel);
  text-align: right;
}
.row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.1s;
}
tr:hover .row-actions, .row-actions:focus-within { opacity: 1; }
.col-actions form { display: inline; }

.icon-btn.danger:hover { color: var(--err); border-color: var(--err); }

.table-foot {
  font-size: 11px;
  color: var(--mut);
  padding: 8px 4px;
}

/* ---------- Empty state ---------- */
.empty-state {
  background: var(--panel);
  border: 1px dashed var(--bd);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.empty-title { font-size: 15px; font-weight: 600; }
.empty-sub { color: var(--mut); font-size: 13px; margin-bottom: 8px; }

/* ---------- Inline add / row edit (catalogs) ---------- */
.inline-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  max-width: 480px;
}
.row-edit { display: flex; gap: 6px; align-items: center; }
.row-edit input { max-width: 320px; }

/* ---------- Forms ---------- */
.form-sections { display: flex; flex-direction: column; gap: 14px; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.span-2 { grid-column: span 2; }
select {
  background: var(--panel2);
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx);
  font: inherit;
  padding: 8px 10px;
  width: 100%;
}
select:focus { outline: none; border-color: var(--acc); }
.check-row { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.field-hint { font-size: 11px; color: var(--mut); }
.field-hint:hover { color: var(--acc); }
.field-err { font-size: 11px; color: var(--err); }
.disk-rows { display: flex; flex-direction: column; gap: 10px; }
.disk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 420px;
}
.form-actions { display: flex; gap: 10px; }
.btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--err) 12%, transparent); }
.head-actions { display: flex; gap: 8px; align-items: center; }
.head-actions form { display: inline; }

/* ---------- Table scroll wrapper for dense lists ---------- */
#server-table-wrap { overflow-x: auto; }

/* ---------- Phase 4: extras cards, chips, notes, dashboard ---------- */

.mt-section { margin-top: 14px; }

.extras-grid { margin-top: 12px; }

/* label chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent);
  /* the soft accent — this used to be color-mix(...12%) here and was then
     silently overridden by a second .chip rule further down the file, so
     14% is what has actually rendered. Kept as-is, now stated once. */
  background: var(--accSoft);
  color: var(--acc);
  font-size: 12px;
  font-weight: 500;
}
.chip-x { display: inline; }
.chip-x button {
  background: none;
  border: none;
  padding: 0 2px;
  color: inherit;
  opacity: 0.7;
  font-size: 11px;
  cursor: pointer;
}
.chip-x button:hover { opacity: 1; color: var(--err); }

/* notes */
.note-item {
  border-bottom: 1px solid var(--bd);
  padding: 8px 0;
}
.note-item:last-of-type { border-bottom: none; }
.note-body { font-size: 13px; white-space: pre-wrap; }
.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--mut);
  margin-top: 3px;
}
.note-meta form { display: inline; }

/* compact inner tables */
.tbl.mini {
  border: none;
  background: transparent;
  font-size: 12px;
}
.tbl.mini td {
  padding: 4px 6px;
  white-space: normal;
  border-bottom: 1px solid var(--bd);
}
.tbl.mini tr:last-child td { border-bottom: none; }
.tbl.mini .col-actions { background: transparent; box-shadow: none; }

/* always-visible actions inside cards */
.row-actions.always { opacity: 1; }

/* extras add forms */
.extras-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.extras-form select,
.extras-form input[type="text"],
.extras-form textarea {
  flex: 1;
  min-width: 120px;
  background: var(--panel2);
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
}
.extras-form textarea { width: 100%; resize: vertical; }
.extras-form .btn { align-self: center; }

/* dashboard grid */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.dash-grid section:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* wrapping table cell (notes bodies) */
.tbl td.wrap { white-space: normal; max-width: 480px; }

/* extras card overflow fixes */
.info-card .tbl.mini .col-actions { position: static; }
.tbl.mini td.mono { white-space: nowrap; }
.whois-cell {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* clip anything that still tries to escape a card */
.info-card { overflow: hidden; }
.info-card .tbl.mini td.mono { white-space: normal; word-break: break-all; }

/* settings: one-time token reveal */
.token-reveal {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--panel2);
  border: 1px solid var(--bd);
  border-radius: 6px;
  word-break: break-all;
  user-select: all;
}

/* Phase 5b: yabs command block, ping, public page */
.cmd-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  background: var(--panel2);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 8px 10px;
}
.cmd-block code {
  flex: 1;
  font-size: 11px;
  word-break: break-all;
  color: var(--tx);
}
.kv-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.dot-err { background: var(--err); }

.ping-form { display: inline; }

.public-shell {
  padding: 24px 20px;
}

/* full-width content: sidebar fixed, main fluid */

/* unit input-groups (size/bandwidth fields) */
.input-group {
  display: flex;
  gap: 6px;
}
.input-group input[type="number"] { flex: 1; min-width: 0; }
.input-group select {
  width: auto;
  flex: none;
}

/* accent soft token (overridden by /static/accent.css) */

/* settings: color swatch */
.color-swatch {
  width: 42px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--bd);
  border-radius: 6px;
  background: var(--panel2);
  cursor: pointer;
}


/* ---------- compact mode: single-line dense rows ---------- */
.compact .tbl td {
  padding: 4px 10px;
  vertical-align: middle;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact .cell-sub { display: none; }
.compact .tbl .kv,
.compact .tbl td > div { line-height: 1.3; }
/* keep rows single-line tall: shrink hover action buttons and center content */
.compact .tbl .row-actions { gap: 2px; align-items: center; }
.compact .tbl .icon-btn {
  width: 20px;
  height: 20px;
  font-size: 11px;
  border-radius: 5px;
}

/* prometheus live meters */
.meter { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.meter-track { flex: 1; height: 3px; background: var(--track); border-radius: 2px; overflow: hidden; }
.meter-fill { height: 3px; border-radius: 2px; }
.meter-pct { font-family: var(--font-mono); font-size: 10px; color: var(--mut); flex: none; }
.meter-fill.c-ok { background: var(--ok); }
.meter-fill.c-warn { background: var(--warn); }
.meter-fill.c-err { background: var(--err); }
.w0 { width: 0%; }
.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }
.net-tput { font-size: 11px; }
.pct-inline { display: none; font-family: var(--font-mono); font-size: 10px; color: var(--mut); }
.compact .pct-inline { display: inline; }
/* compact hides the block meter only inside list tables — the detail
   Live card keeps its (larger) meters */
.compact .tbl .meter { display: none; }
/* compact mode: tiny inline bar next to the pct text */
.meter-inline { display: none; }
.compact .meter-inline {
  display: inline-flex;
  width: 28px;
  margin-left: 5px;
  vertical-align: middle;
}
.compact .meter-inline .meter-track { flex: 1; }
/* the fill is a <span> here — it must be block-level for the width
   bucket classes to apply, unlike the <div> fill in the block meter */
.compact .meter-inline .meter-fill { display: block; }
/* larger meters on the detail Live card */
.live-card .meter-track, .live-card .meter-fill { height: 5px; border-radius: 3px; }
.live-card .meter { max-width: 220px; }

/* live monitoring section */
.livemon { margin-top: 14px; }
.livemon > .section-title { margin-bottom: 10px; }
.livemon-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.metric-card { padding: 10px 12px; }
.metric-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mut);
}
.metric-current {
  font-size: 20px;
  font-weight: 600;
  margin: 2px 0 4px;
}
.c-ok-tx { color: var(--ok); }
.c-warn-tx { color: var(--warn); }
.c-err-tx { color: var(--err); }
.c-acc-tx { color: var(--acc); }
.spark {
  width: 100%;
  height: 36px;
  display: block;
}
.spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.spark.c-ok { color: var(--ok); }
.spark.c-warn { color: var(--warn); }
.spark.c-err { color: var(--err); }
.spark.c-acc { color: var(--acc); }
.spark-base {
  fill: none;
  stroke: var(--bd);
  stroke-width: 1px;
  stroke-dasharray: 2 3;
}
.metric-stats {
  font-size: 10px;
  color: var(--mut);
  margin-top: 3px;
}
.fs-card { margin-top: 12px; }
.fs-card .tbl.mini th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mut);
  text-align: left;
  padding: 4px 6px;
}
.fs-card .meter { max-width: 260px; }

/* column chooser dropdown (zero-JS <details>) */
.controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.col-chooser { position: relative; }
.col-chooser summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.col-chooser summary::-webkit-details-marker { display: none; }
.col-chooser[open] summary {
  border-color: var(--acc);
  color: var(--acc);
}
.chooser-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  min-width: 200px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.chooser-panel .check { font-size: 13px; }
.chooser-apply { margin-top: 6px; align-self: flex-end; }
/* muted secondary column (cpu model) */
.tbl td.col-muted {
  color: var(--mut);
  font-size: 12px;
}

/* Visually hidden but exposed to assistive tech — used for the <th> headers
   on the dense "mini" tables, which are real data tables but have no room
   for a visible header row. Standard clip-rect pattern. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Login-page legal links (AGPL §13 — the offer must reach signed-out users). */
.auth-legal {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--mut);
}
.auth-legal a { color: var(--mut); }
.auth-legal a:hover { color: var(--acc); }