/* ============================================================
   AC Infra Console — theme (self-hosted).
   Ported from the claude.ai/design "AC-Infra Dashboard UI/UX Prototype"
   token system into a single stylesheet the go-via app serves at
   /static/theme.css and injects into every page's <head>. Fonts are
   bundled (see /static/fonts) — no external CDN, works on a restricted
   network.
   ============================================================ */

/* ---- Bundled IBM Plex (latin subset) ---- */
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plex-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/plex-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/plex-mono-600.woff2") format("woff2");
}

:root {
  /* surfaces */
  --ac-bg: #0a0d13;
  --ac-panel: #0f131b;
  --ac-panel-2: #141924;
  --ac-panel-3: #1b212e;
  --ac-line: rgba(255, 255, 255, 0.075);
  --ac-line-2: rgba(255, 255, 255, 0.045);
  /* text */
  --ac-text: #e8ebf1;
  --ac-text-2: #98a1b2;
  --ac-text-3: #616b7c;
  /* accents + status */
  --ac-accent: #4cc4d4;
  --ac-accent-ink: #08222a;
  --ac-accent-2: #6ea8fe;
  --ac-purple: #a78bfa;
  --ac-ok: #46c08a;
  --ac-warn: #e6b23e;
  --ac-crit: #f0666b;
  --tint-ok-fill: rgba(70, 192, 138, 0.12);
  --tint-ok-border: rgba(70, 192, 138, 0.2);
  --tint-warn-fill: rgba(230, 178, 62, 0.12);
  --tint-warn-border: rgba(230, 178, 62, 0.2);
  --tint-crit-fill: rgba(240, 102, 107, 0.12);
  --tint-crit-border: rgba(240, 102, 107, 0.2);
  --tint-info-fill: rgba(110, 168, 254, 0.12);
  --tint-info-border: rgba(110, 168, 254, 0.2);
  /* type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* spacing / radius / chrome */
  --gap-grid: 14px;
  --pad-card: 16px 18px;
  --pad-page: 22px 24px 40px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 11px;
  --radius-xl: 13px;
  --radius-pill: 20px;
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --row-h: 38px;
  /* chart palette (assign by sorted key) */
  --series-1: #4cc4d4;
  --series-2: #6ea8fe;
  --series-3: #46c08a;
  --series-4: #e6b23e;
  --series-5: #f0666b;
  --series-6: #a78bfa;
  --stat-low: #46c08a;
  --stat-mid: #e6b23e;
  --stat-high: #f0666b;
}

/* ---- base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: var(--ac-bg);
  color: var(--ac-text);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--ac-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
/* numbers are always mono — the console's signature */
.num,
.mono,
td.num,
.kpi-value,
.metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- app shell: sidebar + main ---- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--ac-panel);
  border-right: 1px solid var(--ac-line);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 16px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ac-accent), var(--ac-accent-2));
}
.nav-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac-text-3);
  padding: 12px 8px 4px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--ac-text-2);
  font-size: 13px;
  cursor: pointer;
}
.nav-item:hover {
  background: var(--ac-panel-2);
  color: var(--ac-text);
  text-decoration: none;
}
.nav-item.active {
  background: var(--ac-panel-3);
  color: var(--ac-text);
}
/* Nav glyph icons (from the HTML design prototype): fixed-width so labels align,
   muted by default, accent-tinted on the active item. */
.nav-icon {
  width: 20px;
  flex: none;
  text-align: center;
  font-size: 14px;
  line-height: 1;
  color: var(--ac-text-3);
}
.nav-item.active .nav-icon {
  color: var(--ac-accent);
}

/* ---- mobile nav drawer: hamburger + off-canvas sidebar + scrim ---- */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-md);
  color: var(--ac-text-2);
  font-size: 16px;
  line-height: 1;
  padding: 7px 10px;
  cursor: pointer;
}
.nav-toggle:hover {
  background: var(--ac-panel-2);
  color: var(--ac-text);
}
.shell-backdrop {
  display: none;
}
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-w);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
  }
  body.nav-open .shell-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.5);
  }
}

/* ---- topbar ---- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--ac-line);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--ac-bg) 88%, transparent);
  backdrop-filter: blur(6px);
  z-index: 5;
}
.topbar-title {
  font-size: 15px;
  font-weight: 600;
}
.topbar-spacer {
  flex: 1;
}
.page {
  padding: var(--pad-page);
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
}

/* ---- window <select> in the topbar ---- */
.topbar label {
  color: var(--ac-text-2);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.controls {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}
.topbar select,
.etable-head select {
  background: var(--ac-panel-2);
  color: var(--ac-text);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-family: var(--font-sans);
  font-size: 12px;
}

/* ---- segmented control (window selector) ---- */
.segmented {
  display: inline-flex;
  background: var(--ac-panel-2);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.segmented button {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ac-text-2);
  background: transparent;
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.segmented button:hover {
  color: var(--ac-text);
}
.segmented button.active {
  background: var(--ac-accent);
  color: var(--ac-accent-ink);
  font-weight: 600;
}

/* ---- cards + grids ---- */
.grid {
  display: grid;
  gap: var(--gap-grid);
}
.card {
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-xl);
  padding: var(--pad-card);
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ac-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-sub {
  font-size: 11px;
  color: var(--ac-text-3);
  font-weight: 400;
}
.etable-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.etable-head .card-title {
  margin-bottom: 0;
}
.group-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ac-text-2);
}

/* ---- KPI tiles ---- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap-grid);
}
/* A 4-tile row splits 4 or 2+2, never 3+1. */
.kpi-row:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .kpi-row:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.kpi-tile {
  background: var(--ac-panel);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-lg);
  padding: 15px 16px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.kpi-tile:hover {
  background: var(--ac-panel-2);
}
.kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.kpi-head .kpi-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ac-text-2);
}
.kpi-value {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ac-text);
  font-family: var(--font-mono);
}
.kpi-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ac-text-3);
}
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.kpi-unit {
  font-size: 12px;
  color: var(--ac-text-3);
  font-family: var(--font-mono);
}
/* Phone: two tiles per row instead of one tall column. */
@media (max-width: 600px) {
  .kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi-tile {
    padding: 12px 12px 8px;
    min-width: 0;
  }
  .kpi-value {
    font-size: 22px;
  }
  .kpi-sub {
    font-size: 11px;
    overflow-wrap: anywhere;
  }
}

/* ---- entity picker: card grid that hugs its contents (hosts + containers) ----
   Two equal columns sized to the widest card (width:max-content lets the grid
   shrink to its cards, then the two 1fr tracks redistribute that width evenly,
   so every card matches the longest — no ragged right edge, no dead space). */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: max-content;
  max-width: 100%;
}
.pick-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 9px 10px;
  background: var(--ac-panel-2);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-md);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.pick-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
/* Selected: a bright, high-stroke accent border — the box-shadow ring thickens
   the 1px border to a crisp ~2px accent without shifting the grid. */
.pick-card.selected {
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 1px var(--ac-accent);
}
.pick-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
}
.pick-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-tag {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ac-text-3);
  border: 1px solid var(--ac-line-2);
  border-radius: 20px;
  padding: 0 6px;
}
.pick-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.pick-metric {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
}
.pick-ic {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--ac-text-3);
  opacity: 0.85;
}
.pick-val {
  font-size: 11px;
  color: var(--ac-text-2);
}
.pick-val.warn {
  color: var(--ac-warn);
}
.pick-val.crit {
  color: var(--ac-crit);
}

/* ---- pills / badges / status dots ---- */
.statusdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--ac-text-3);
  flex: 0 0 auto;
}
.statusdot.ok {
  background: var(--ac-ok);
  box-shadow: 0 0 8px var(--ac-ok);
}
.statusdot.warn {
  background: var(--ac-warn);
}
.statusdot.crit {
  background: var(--ac-crit);
}
.pill,
.badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ac-line);
  color: var(--ac-text-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.badge.ok {
  color: var(--ac-ok);
  background: var(--tint-ok-fill);
  border-color: var(--tint-ok-border);
}
.badge.warn {
  color: var(--ac-warn);
  background: var(--tint-warn-fill);
  border-color: var(--tint-warn-border);
}
.badge.crit {
  color: var(--ac-crit);
  background: var(--tint-crit-fill);
  border-color: var(--tint-crit-border);
}

/* ---- UsageBar (filesystem fill) ---- */
.usage {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
  font-size: 12px;
}
.usage-mount {
  color: var(--ac-text-2);
}
.usage-track {
  height: 8px;
  background: var(--ac-panel-3);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.usage-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--ac-ok);
}
.usage-fill.warn {
  background: var(--ac-warn);
}
.usage-fill.crit {
  background: var(--ac-crit);
}

/* ---- tables (restyled overview / legends) ---- */
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--ac-text-2);
  padding: 6px 10px;
  border-bottom: 1px solid var(--ac-line);
}
td {
  padding: 0 10px;
  height: var(--row-h);
  border-bottom: 1px solid var(--ac-line-2);
  font-size: 12px;
  color: var(--ac-text);
}

/* ---- shell chrome: brand text, nav badges, sidebar footer, topbar heading, live dot ---- */
.brand-text {
  line-height: 1.15;
}
.brand-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.brand-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.46px;
  letter-spacing: 0.06em;
  color: var(--ac-text-3);
}
.nav-label {
  flex: 1;
}
.nav-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ac-text-3);
  background: var(--ac-panel-3);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ac-line);
  display: flex;
  flex-direction: column;
}
.foot-card {
  background: var(--ac-panel-2);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-md);
  padding: 12px 13px;
}
.foot-overall {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.foot-overall-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--ac-text);
}
.foot-health {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ac-text-2);
}
.foot-count {
  color: var(--ac-text-2);
}
.foot-n {
  font-weight: 600;
}
.foot-n.ok {
  color: var(--ac-ok);
}
.foot-n.warn {
  color: var(--ac-warn);
}
.foot-n.crit {
  color: var(--ac-crit);
}

.topbar-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.topbar-sub {
  font-size: 11px;
  color: var(--ac-text-2);
}
/* Phone: the fixed-height bar clips a wrapped heading. Let it grow: toggle +
   heading on row 1, window controls + live stamp on row 2. */
@media (max-width: 600px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
  }
  .topbar-heading {
    flex: 1 1 calc(100% - 44px);
  }
  .topbar-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-spacer {
    display: none;
  }
  .topbar .live {
    margin-left: auto;
  }
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ac-text-2);
}
.livedot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ac-ok);
  box-shadow: 0 0 8px var(--ac-ok);
  animation: livep 2s ease-in-out infinite;
}
.live-stamp {
  color: var(--ac-text-3);
}
.live.loading .livedot {
  background: var(--ac-text-3);
  box-shadow: none;
}
.live.stale .livedot {
  background: var(--ac-warn);
  box-shadow: 0 0 8px var(--ac-warn);
  animation: none;
}
.live.stale .live-stamp {
  color: var(--ac-warn);
}
@keyframes livep {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---- Overview screen ---- */
.ov-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gap-grid);
}
/* Stack below 1200px: with the sidebar shown, the right column is too narrow
   for the workloads table. */
@media (max-width: 1200px) {
  .ov-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Hosts/Containers drill-in: narrow entity list left, wide charts right ---- */
.entity-split {
  display: grid;
  /* Left track hugs the picker (max-content), charts take the rest. */
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--gap-grid);
  align-items: start;
}
/* Grid children default to min-width:auto, so the picker table would force its
   column wider than the track and slide under the detail panel (clipping the
   Mem/Net cells). min-width:0 makes the table shrink and its cells ellipsize. */
.entity-split > * {
  min-width: 0;
}
/* The detail column stacks header, member strip, and charts with the same gap
   as the page grid — without this the cards butt against each other. */
.detail-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
  min-width: 0;
}
/* Member strip: wrapping row of the selected entity's members, the
   aggregate tile first. Empty (no tiles) for single-member selections. */
.member-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.member-strip:empty {
  display: none;
}
.member-tile {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background: var(--ac-panel-2);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-md);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.member-tile:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
/* Selected: the same accent ring as the entity picker card — 1px border tinted
   to the accent, the box-shadow thickens it to a crisp ~2px without shifting
   the carousel. */
.member-tile.selected {
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 1px var(--ac-accent);
}
.member-tile .member-name {
  font-size: 12px;
}
.member-tile .member-sub {
  font-size: 10px;
  color: #616b7c;
}
@media (max-width: 900px) {
  .entity-split {
    grid-template-columns: 1fr;
  }
  .entity-split > * {
    min-width: 0;
  }
  /* Stacked full-width: picker becomes a two-row, horizontal snap-scrolling
     carousel instead of a tall single column. */
  .pick-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 220px;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    width: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .pick-card {
    scroll-snap-align: start;
  }
}
/* Mobile: single row, wider cards — roughly one per swipe. */
@media (max-width: 600px) {
  .pick-grid {
    grid-template-rows: auto;
    grid-auto-columns: 78%;
  }
}

.kpi-spark {
  height: 34px;
  margin: 8px -2px 6px;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ac-line-2);
}
.alert-item:last-child {
  border-bottom: 0;
}
.alert-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--ac-text-3);
  flex: 0 0 auto;
}
.alert-item.crit .alert-bar {
  background: var(--ac-crit);
}
.alert-item.warn .alert-bar {
  background: var(--ac-warn);
}
.alert-body {
  flex: 1;
  min-width: 0;
}
.alert-entity {
  font-size: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.alert-msg {
  font-size: 11px;
  color: var(--ac-text-2);
  line-height: 1.35;
}
.alert-empty {
  font-size: 12px;
  color: var(--ac-text-3);
  padding: 8px 0;
}

.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.chip {
  display: block;
  background: var(--ac-panel-2);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-md);
  padding: 9px 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s;
}
a.chip:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.row-link {
  color: inherit;
  text-decoration: none;
}
.row-link:hover {
  color: var(--ac-accent);
}
.chip-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ac-text-3);
  margin-top: 6px;
}
.chip-track {
  height: 3px;
  border-radius: 2px;
  background: var(--ac-panel-3);
  overflow: hidden;
  margin-top: 5px;
}
.chip-fill {
  height: 100%;
  background: var(--ac-ok);
}
.chip-fill.warn {
  background: var(--ac-warn);
}
.chip-fill.crit {
  background: var(--ac-crit);
}

/* ---- detail header (selected host/container) + filesystem grid ---- */
.detail-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.detail-name {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.detail-meta {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 22px;
}
/* Phone: stats drop under the name as a left-aligned 3-column grid. */
@media (max-width: 600px) {
  .detail-meta {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .detail-name {
    flex: 1 1 0;
  }
  .detail-meta .metastat {
    text-align: left;
  }
}
.metastat {
  text-align: right;
}
.metastat-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
}
.metastat-label {
  font-size: 10px;
  color: var(--ac-text-3);
  margin-top: 2px;
}
.fs-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--ac-line-2);
}
.fs-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ac-text-3);
  margin-bottom: 9px;
  letter-spacing: 0.04em;
}
.fs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px 14px;
}

/* ---- compact filesystem cell (host detail grid) ---- */
.usage-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.usage-cell-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.usage-cell-head .usage-mount {
  color: var(--ac-text-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-cell-head .usage-pct {
  flex: none;
}
.usage-pct.ok {
  color: var(--ac-ok);
}
.usage-pct.warn {
  color: var(--ac-warn);
}
.usage-pct.crit {
  color: var(--ac-crit);
}
.usage-cell .usage-track {
  height: 5px;
}
.usage-detail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ac-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- polish: keyframes, scrollbars, brand-mark glow ---- */
@keyframes fu {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* cards & tiles fade up once on first paint (both = fill-mode both, no loop). */
.card,
.kpi-tile {
  animation: fu 0.25s ease both;
}
/* thin custom scrollbars — matches the design ref exactly */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.16);
  background-clip: padding-box;
}

/* brand mark: a ringed accent dot with a soft glow (design's logo) */
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid var(--ac-accent);
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-mark::after {
  content: "";
  width: 20px;
  height: 20px;
  background: var(
    --ac-accent
  ); /* the AC mark, tinted the accent (the old inner-circle colour) */
  -webkit-mask: url("/static/ac-mark.svg") center/contain no-repeat;
  mask: url("/static/ac-mark.svg") center/contain no-repeat;
}

/* ---- sidebar credit: rights line + built-with-via badge ---- */
.sidebar-credit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ac-line);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.credit-rights {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ac-text-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--ac-panel-2);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}
.credit-badge {
  display: inline-flex;
  line-height: 0;
  flex: none;
  position: relative;
  border-radius: 3px;
  overflow: hidden;
}
/* A dark gradient tint (surface tones, deepening downward like the rail
   itself) mutes the badge until it reads as chrome; hovering lifts it to
   reveal the full-colour badge. */
.credit-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 19, 27, 0.2),
    rgba(10, 13, 19, 0.5)
  );
  opacity: 1;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.credit-badge:hover::after {
  opacity: 0;
}

/* ---- traffic category card colour chip ---- */
.cat-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}

/* ---- .wtable (busiest workloads, storage buckets): keep rows single-line ---- */
.wtable td,
.wtable th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- workloads table: CPU/mem meter cells + net row-spark ---- */
.meter-cell {
  min-width: 52px;
}
.mini-track {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--ac-panel-3);
  overflow: hidden;
  margin-top: 4px;
}
.mini-fill {
  height: 100%;
  background: var(--ac-ok);
  border-radius: 2px;
}
.mini-fill.warn {
  background: var(--ac-warn);
}
.mini-fill.crit {
  background: var(--ac-crit);
}
.spark-cell {
  width: 74px;
}
/* Fixed layout: long service and host names ellipsize instead of widening
   the table past its card. */
#ov-workloads .wtable {
  width: 100%;
  table-layout: fixed;
}
#ov-workloads .wtable th.num {
  width: 60px;
}
#ov-workloads .wtable th:nth-child(2) {
  width: 96px;
}
#ov-workloads .wtable th:last-child {
  width: 74px;
}
/* Phone: workloads drop Host, buckets drop Objects. */
@media (max-width: 600px) {
  #ov-workloads .wtable tr > :nth-child(2) {
    display: none;
  }
  #storage-buckets .wtable {
    width: 100%;
    table-layout: fixed;
  }
  #storage-buckets .wtable tr > :nth-child(3) {
    display: none;
  }
  #storage-buckets .wtable tr > :not(:first-child) {
    width: 64px;
  }
}
.rowspark {
  width: 66px;
  height: 20px;
  display: block;
  color: var(--ac-accent);
}
.mini-fill.rel {
  background: var(--ac-accent-2);
}

/* .chart-stack wraps only hp.chart.Mount() and #host-dd-wrap, so it is
   sized to the chart itself. #host-dd-wrap is pinned to that same box
   (inset:0) rather than left in normal flow, so it can't collapse to a
   zero-height box below the chart on reflow/resize — a .metric-dd child's
   top:Npx (groupRowH/groupTitleH, computed server-side) then always lands
   on panel N's band. left:80% is the same edge groupLegend's own left:80%
   anchors to, so the toggle sits in the legend gutter instead of over the
   plot, where the tooltip card would cover it — groupLegend then reserves
   groupDDReserve at the top of that panel's band so the list starts below
   it. pointer-events:none/auto keeps the overlay itself click-through while
   its dropdowns stay clickable. */
.chart-stack {
  position: relative;
  container-type: inline-size;
}
/* Same width as charts.js NARROW, where the legend moves to left:70%. */
@container (max-width: 559px) {
  .chart-stack .metric-dd {
    left: 70%;
  }
}
.metric-dd-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.metric-dd-wrap:empty {
  display: none;
}
.metric-dd {
  position: absolute;
  left: 80%;
  z-index: 10;
  pointer-events: auto;
}
.metric-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ac-text-2);
  background: var(--ac-panel-2);
  border: 1px solid var(--ac-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.metric-dd-toggle:hover,
.metric-dd.open .metric-dd-toggle {
  color: var(--ac-text);
  background: var(--ac-panel-3);
  border-color: rgba(255, 255, 255, 0.14);
}
.metric-dd-count {
  color: var(--ac-accent);
  font-weight: 600;
}
/* Caret as a border triangle so .up can point it upward without a second
   glyph in the markup. */
.metric-dd-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
}
.metric-dd.up .metric-dd-toggle::after {
  border-top: 0;
  border-bottom: 4px solid currentColor;
}
.metric-dd-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 168px;
  max-height: 260px;
  overflow-y: auto;
  flex-direction: column;
  background: var(--ac-panel-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 5px;
  /* The menu floats over plot lines and the neighbouring legend; the
     shadow + dark ring are what separate it from them. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.metric-dd.up .metric-dd-menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.metric-dd.open .metric-dd-menu {
  display: flex;
}
.metric-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  color: var(--ac-text-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.metric-dd-item::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1px solid var(--ac-text-3);
  border-radius: 3px;
}
.metric-dd-item.on {
  color: var(--ac-text);
}
.metric-dd-item.on::before {
  background: var(--ac-accent) url("/static/check.svg") center / 12px 12px
    no-repeat;
  border-color: var(--ac-accent);
}
.metric-dd-item:hover {
  background: var(--ac-panel-3);
  color: var(--ac-text);
}

/* ---- Storage: Used tile bar ---- */
.st-used-track {
  margin: 8px 0 6px;
}

/* ---- Sign-in pages: one centered column, no shell ---- */
.signin {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 15vh auto 0;
  padding: 24px 16px;
  color: var(--ac-text);
}
.signin input {
  padding: 8px 10px;
  background: var(--ac-panel);
  color: var(--ac-text);
  border: 1px solid var(--ac-line);
  border-radius: 6px;
}
.signin button {
  padding: 8px 12px;
  background: var(--ac-accent);
  color: var(--ac-accent-ink);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.signin a {
  color: var(--ac-accent);
}