/* ============================================================
 * Downtime Tracker · dashboard styles
 * Renders the live ledger at downtime.json
 * ============================================================ */

/* ---------- design tokens ---------- */
:root {
  --bg-0: #060912;
  --bg-1: #0b1020;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-hover: rgba(255, 255, 255, 0.06);
  --panel-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #e8edf7;
  --text-dim: #b4bcd0;
  --muted: #6e7a93;
  --up: #10b981;
  --up-glow: rgba(16, 185, 129, 0.35);
  --down: #ef4444;
  --down-glow: rgba(239, 68, 68, 0.45);
  --accent-a: #6366f1;
  --accent-b: #06b6d4;
  --accent-grad: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ---------- reset + base ---------- */
* { box-sizing: border-box; }

/* ---------- Global custom scrollbar ----------
 * Solid purple thumb (--accent-a, #6366f1) on a fully transparent track —
 * only the purple bar is visible, no strip behind it. Page-level (html /
 * body) is bound explicitly because some Chromium builds handle the
 * document scrollbar separately from the universal `*` rule. All values
 * use !important so older per-element overrides can't bring back a
 * different look. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-a) transparent;
}
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-a) transparent;
  /* Force the page-level scrollbar to render via our CSS rules. Without
   * this, some browsers (notably Chromium on Linux) hand the document
   * scrollbar off to the OS native theme, which then shows the system's
   * default white-ish strip behind the thumb regardless of our styling. */
  background-color: var(--bg-1);
}
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px !important; height: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
*::-webkit-scrollbar-thumb {
  background: var(--accent-a) !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  transition: background .18s ease;
}
*::-webkit-scrollbar-thumb:hover {
  background: #818cf8 !important;  /* lighter purple on hover */
  background-clip: padding-box !important;
}
*::-webkit-scrollbar-thumb:active {
  background: #4f46e5 !important;  /* darker purple while dragging */
  background-clip: padding-box !important;
}
*::-webkit-scrollbar-corner  { background: transparent !important; }
*::-webkit-scrollbar-button  { display: none !important; }

/* Belt-and-suspenders — every named scrollable surface in the app
 * explicitly inherits the same purple-on-transparent style so cascade
 * quirks or accidental future overrides can't drift them out of sync
 * with the page-level scrollbar. Settings overlay + service cards
 * looked correct already; this just guarantees parity everywhere. */
.settings-panel, .settings-body, .settings-cs-list,
.notif-extras-pre, .notif-list, .notif-view,
.evm-body, .evm-panel,
.events-table-wrap, .service-details, .svc-dd-panel,
#chartArea, .chart-panel {
  scrollbar-width: thin !important;
  scrollbar-color: var(--accent-a) transparent !important;
}
.settings-panel::-webkit-scrollbar,    .settings-body::-webkit-scrollbar,
.settings-cs-list::-webkit-scrollbar,  .notif-extras-pre::-webkit-scrollbar,
.notif-list::-webkit-scrollbar,        .notif-view::-webkit-scrollbar,
.evm-body::-webkit-scrollbar,          .evm-panel::-webkit-scrollbar,
.events-table-wrap::-webkit-scrollbar, .service-details::-webkit-scrollbar,
.svc-dd-panel::-webkit-scrollbar,      #chartArea::-webkit-scrollbar,
.chart-panel::-webkit-scrollbar {
  width: 10px !important; height: 10px !important;
  background: transparent !important;
}
.settings-panel::-webkit-scrollbar-track,    .settings-body::-webkit-scrollbar-track,
.settings-cs-list::-webkit-scrollbar-track,  .notif-extras-pre::-webkit-scrollbar-track,
.notif-list::-webkit-scrollbar-track,        .notif-view::-webkit-scrollbar-track,
.evm-body::-webkit-scrollbar-track,          .evm-panel::-webkit-scrollbar-track,
.events-table-wrap::-webkit-scrollbar-track, .service-details::-webkit-scrollbar-track,
.svc-dd-panel::-webkit-scrollbar-track,      #chartArea::-webkit-scrollbar-track,
.chart-panel::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.settings-panel::-webkit-scrollbar-thumb,    .settings-body::-webkit-scrollbar-thumb,
.settings-cs-list::-webkit-scrollbar-thumb,  .notif-extras-pre::-webkit-scrollbar-thumb,
.notif-list::-webkit-scrollbar-thumb,        .notif-view::-webkit-scrollbar-thumb,
.evm-body::-webkit-scrollbar-thumb,          .evm-panel::-webkit-scrollbar-thumb,
.events-table-wrap::-webkit-scrollbar-thumb, .service-details::-webkit-scrollbar-thumb,
.svc-dd-panel::-webkit-scrollbar-thumb,      #chartArea::-webkit-scrollbar-thumb,
.chart-panel::-webkit-scrollbar-thumb {
  background: var(--accent-a) !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

html, body {
  margin: 0; padding: 0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background:
    radial-gradient(1100px 700px at 8% -10%,  rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(900px 600px at 100% 0%,   rgba(6, 182, 212, 0.18),  transparent 60%),
    radial-gradient(900px 700px at 50% 110%,  rgba(168, 85, 247, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  min-height: 100vh;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 32px 28px 64px; }

/* ---------- header ---------- */
.hdr {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.hdr-left { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--accent-grad);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.logo svg { width: 22px; height: 22px; color: #fff; }
h1 {
  margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #c8d0e6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tz-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  margin-top: 4px;
}
.live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; font-weight: 500;
}
.live .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--up); box-shadow: 0 0 0 0 var(--up-glow);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}

/* ---------- mode toggle + service selector ---------- */
.mode-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.mode-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.mode {
  background: transparent; border: 0; color: var(--text-dim);
  padding: 8px 16px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s ease, background .15s ease;
}
.mode svg { width: 15px; height: 15px; }
.mode:hover { color: var(--text); }
.mode.active {
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.service-select-wrap {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.service-select-wrap[hidden] { display: none; }

/* ---------- custom service dropdown ---------- */
.svc-dd { position: relative; }
.svc-dd-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 13px 8px 14px; border-radius: 10px; cursor: pointer;
  min-width: 240px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.svc-dd-trigger:hover  { border-color: var(--border-strong); background: var(--panel-hover); }
.svc-dd-trigger:focus  { outline: none; }
.svc-dd-trigger[aria-expanded="true"] {
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.svc-dd-status {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
  transition: background .2s ease, box-shadow .2s ease;
}
.svc-dd-status.up   { background: var(--up);   box-shadow: 0 0 8px var(--up-glow); }
.svc-dd-status.down { background: var(--down); box-shadow: 0 0 8px var(--down-glow); }
.svc-dd-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-dd-caret {
  width: 14px; height: 14px; color: var(--muted);
  transition: transform .2s ease, color .2s ease;
}
.svc-dd-trigger[aria-expanded="true"] .svc-dd-caret { transform: rotate(180deg); color: var(--accent-b); }

.svc-dd-panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 320px; max-height: 440px; overflow-y: auto;
  background: rgba(11, 16, 32, 0.96);
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  z-index: 50;
  animation: ddIn .15s ease-out;
}
/* Scrollbar styling for .svc-dd-panel is now inherited from the global
 * purple-thumb rule at the top of this file — removed the legacy
 * rgba(255,255,255,…) (white) thumb that was overriding it on the
 * service-selector dropdown. */

@keyframes ddIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.svc-dd-group {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .14em;
  padding: 10px 12px 6px; margin-top: 2px;
}
.svc-dd-group:first-child { margin-top: 0; }

.svc-dd-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.svc-dd-option:hover { background: rgba(255, 255, 255, 0.05); }
.svc-dd-option.selected {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(6, 182, 212, 0.10));
  border-color: rgba(6, 182, 212, 0.35);
}
.svc-dd-option-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--muted);
}
.svc-dd-option-dot.up   { background: var(--up);   box-shadow: 0 0 6px var(--up-glow); }
.svc-dd-option-dot.down { background: var(--down); box-shadow: 0 0 6px var(--down-glow); }
.svc-dd-option-name {
  flex: 1; min-width: 0;
  font-weight: 600; color: var(--text); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-dd-option-meta {
  display: inline-flex; gap: 5px; flex-shrink: 0;
}
.svc-dd-option-meta .mini-chip {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--panel-strong); border: 1px solid var(--border);
  color: var(--muted); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.svc-dd-option-meta .mini-chip.branch-main { color: var(--up); }
.svc-dd-option-meta .mini-chip.branch-dev  { color: #f59e0b; }
.service-meta {
  font-size: 11px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.service-meta .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--panel-strong); border: 1px solid var(--border);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
}
.service-meta .chip.state-up   { color: var(--up); }
.service-meta .chip.state-down { color: var(--down); }
.service-meta .chip.state-unknown { color: var(--muted); }
.service-meta .chip.branch-main { color: var(--up); }
.service-meta .chip.branch-dev  { color: #f59e0b; }

.sub { color: var(--muted); font-size: 12.5px; margin-bottom: 24px; }
.err {
  color: #fff; font-size: 13px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.08));
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 12px 16px; border-radius: 12px;
}

/* ---------- service details (Service Wise · Coolify metadata) ---------- */
.service-details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px 14px;
  margin-bottom: 22px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: rise .35s ease-out both;

  /* Cap height so the panel never blows past the viewport (matters most
     on mobile, where the cards stack into one column). The header stays
     pinned and the grid scrolls inside. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 140px);
  min-height: 0;
}
/* The `display: flex` above overrides the user-agent rule that maps the
   HTML `hidden` attribute to `display: none`, so the panel would still
   reserve its margin in This Host mode. Re-assert `display: none` when
   the attribute is set so JS toggles via `panel.hidden = true` work. */
.service-details[hidden] { display: none; }
.service-details > .sd-head {
  flex: 0 0 auto;        /* header doesn't scroll */
}
.service-details > .sd-section {
  /* sections sit inside the scrolling region together */
  flex: 0 0 auto;
}
.service-details {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Scrollbar style inherited from the global purple-thumb rule at the
   * top of this file. Previously had a per-element gradient override —
   * removed so the dashboard uses ONE consistent scrollbar everywhere. */
}
.sd-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sd-head h3 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: 0.01em;
}
.sd-source {
  font-size: 11px; color: var(--text-dim); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.sd-row {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  min-width: 0;
}
.sd-key {
  font-size: 10px; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0;
}
.sd-val {
  margin: 0; font-size: 13px; color: var(--text);
  word-break: break-word;
  line-height: 1.45;
}
.sd-rel { color: var(--text-dim); font-size: 12px; }
.sd-muted { color: var(--text-dim); }
.sd-link {
  color: var(--accent-b); text-decoration: none;
  border-bottom: 1px dashed rgba(6, 182, 212, 0.4);
  transition: color .15s ease, border-color .15s ease;
}
.sd-link:hover { color: var(--text); border-bottom-color: var(--accent-b); }
.sd-mini-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600;
  background: var(--panel-strong); border: 1px solid var(--border);
  color: var(--text-dim); letter-spacing: 0.02em;
  vertical-align: middle;
}
.sd-mini-chip.branch-main { color: #a5b4fc; border-color: rgba(99, 102, 241, 0.35); }
.sd-mini-chip.branch-dev  { color: #fcd34d; border-color: rgba(252, 211, 77, 0.35); }
.sd-mini-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
.sd-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sd-pill[title] { cursor: help; }
.sd-pill-up      { color: var(--up);   background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); }
.sd-pill-warn    { color: #fbbf24;     background: rgba(251, 191, 36, 0.12);  border-color: rgba(251, 191, 36, 0.35); }
.sd-pill-down    { color: var(--down); background: rgba(239, 68, 68, 0.12);   border-color: rgba(239, 68, 68, 0.4); }
.sd-pill-unknown { color: var(--text-dim); background: var(--panel-strong); }
.sd-section { margin-top: 14px; }
.sd-section:first-of-type { margin-top: 0; }
.sd-section-title {
  margin: 0 0 8px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-b);
}
.sd-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 5px;
  color: var(--text);
}
.sd-uuid { color: var(--text-dim); font-size: 11px; }

/* ---------- summary cards ---------- */
.summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 28px;
}
.card {
  position: relative; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 16px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  opacity: 0.6;
}
.card:hover {
  transform: translateY(-2px); border-color: var(--border-strong); background: var(--panel-hover);
}
.card .label {
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}
.card .value {
  font-size: 26px; font-weight: 700; margin-top: 6px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.card .value.up   { color: var(--up);   text-shadow: 0 0 24px var(--up-glow); }
.card .value.down { color: var(--down); text-shadow: 0 0 24px var(--down-glow); }
.card .value.grad {
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card .sub2 {
  color: var(--muted); font-size: 11.5px; margin-top: 6px; line-height: 1.45;
}

/* ---------- view tabs ---------- */
.tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.tab {
  background: transparent; border: 0; color: var(--text-dim);
  padding: 8px 18px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
.tab:hover { color: var(--text); }
.tab.active {
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.legend { display: inline-flex; gap: 14px; font-size: 12px; color: var(--text-dim); }
.legend .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: middle;
}
.dot.up   { background: var(--up);   box-shadow: 0 0 10px var(--up-glow); }
.dot.down { background: var(--down); box-shadow: 0 0 10px var(--down-glow); }

/* ---------- chart panel ---------- */
.chart-panel {
  background: var(--panel);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 22px 18px; margin-bottom: 28px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
}
.chart-grid {
  display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: center;
}
@media (max-width: 820px) {
  .chart-grid { grid-template-columns: 1fr; gap: 22px; align-items: stretch; }
}

/* ---------- donut (left, follows current view) ---------- */
.donut-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px 4px;
}
.donut-cap {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.donut { position: relative; width: 220px; height: 220px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 18; }
.donut-arc {
  fill: none; stroke-width: 18; stroke-linecap: butt;
  transition: stroke-dasharray .7s cubic-bezier(.4, .1, .2, 1),
              stroke-dashoffset .7s cubic-bezier(.4, .1, .2, 1);
}
.donut-arc.up   { color: var(--up);   stroke: currentColor; filter: drop-shadow(0 0 6px currentColor); }
.donut-arc.down { color: var(--down); stroke: currentColor; filter: drop-shadow(0 0 8px currentColor); }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.donut-pct {
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.donut-pct.warn {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text; background-clip: text;
}
.donut-pct.bad {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  -webkit-background-clip: text; background-clip: text;
}
.donut-lbl {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .12em; margin-top: 6px; font-weight: 600;
}
.donut-elapsed {
  font-size: 11px; color: var(--text-dim); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.donut-times {
  display: flex; gap: 14px; font-size: 12px; margin-top: 8px;
  font-variant-numeric: tabular-nums; flex-wrap: wrap; justify-content: center;
}
.donut-times .t {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--panel-strong); border: 1px solid var(--border);
  font-weight: 600;
}
.donut-times .t.up   { color: var(--up); }
.donut-times .t.down { color: var(--down); }
.donut-times .t::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}

/* ---------- chart-type selector (right column) ---------- */
.chart-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chart-types {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; align-self: flex-end;
}
.chart-type {
  background: transparent; border: 0; color: var(--text-dim);
  padding: 6px 13px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s ease, background .15s ease;
}
.chart-type svg { width: 13px; height: 13px; }
.chart-type:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.chart-type.active {
  background: var(--panel-strong); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* ---------- bar chart ---------- */
.bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 240px; padding: 10px 4px 30px; position: relative;
}
.bar-col {
  flex: 1 1 0; min-width: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; position: relative;
}
.bar-stack {
  display: flex; flex-direction: column-reverse; width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.bar-up   { background: linear-gradient(180deg, #34d399 0%, #10b981 100%); width: 100%; }
.bar-down { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); width: 100%; }
.bar-col:hover .bar-stack {
  transform: translateY(-2px);
  filter: brightness(1.12) saturate(1.1);
  box-shadow: 0 0 0 1.5px var(--accent-b), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.bar-label {
  position: absolute; bottom: -22px; left: 0; right: 0; text-align: center;
  font-size: 10.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}

/* ---------- line / area svg ---------- */
.chart-svg { width: 100%; height: 280px; display: block; }
.chart-svg .grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-svg .axis { fill: var(--muted); font-size: 10px; font-weight: 500; }
.chart-svg .line-up {
  fill: none; stroke: #10b981; stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4));
}
.chart-svg .dot {
  fill: #10b981; stroke: #0b1020; stroke-width: 2;
  transition: r .15s ease; cursor: pointer;
}
.chart-svg .dot:hover { r: 5; }

/* ---------- bar chart (SVG) ---------- */
.chart-svg .svg-bar { cursor: pointer; }
.chart-svg .svg-bar-up   { fill: url(#gradBarUp);   transition: filter .15s ease; }
.chart-svg .svg-bar-down { fill: url(#gradBarDown); transition: filter .15s ease; filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3)); }
.chart-svg .svg-bar:hover .svg-bar-up,
.chart-svg .svg-bar:hover .svg-bar-down { filter: brightness(1.2) saturate(1.1); }

/* ---------- heatmap chart ---------- */
.chart-svg.heatmap-svg .hm-cell {
  transition: stroke-width .12s ease, stroke .12s ease, opacity .12s ease, filter .12s ease;
  stroke: transparent; stroke-width: 0; cursor: pointer;
}
.chart-svg.heatmap-svg .hm-cell:hover {
  stroke: var(--accent-b); stroke-width: 2;
  filter: brightness(1.2);
}
.chart-svg .hm-empty   { fill: rgba(255, 255, 255, 0.045); stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.chart-svg .hm-bad     { fill: #b91c1c; }
.chart-svg .hm-poor    { fill: #ef4444; }
.chart-svg .hm-warn    { fill: #f59e0b; }
.chart-svg .hm-good    { fill: #34d399; }
.chart-svg .hm-perfect { fill: #10b981; filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.5)); }
.chart-svg .hm-today { stroke: var(--accent-b); stroke-width: 1.4; stroke-dasharray: 2 2; }

/* Heatmap stats strip — sits above the calendar grid so the user can
   read the key numbers without hovering over each cell. */
.heatmap-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(99,102,241,0.06), rgba(6,182,212,0.04));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.heatmap-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.heatmap-stat-cap {
  font-size: 9.5px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase;
}
.heatmap-stat-val {
  font-size: 16px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.heatmap-stat-val.is-up    { color: var(--up); }
.heatmap-stat-val.is-down  { color: var(--down); }
.heatmap-stat-val.is-warn  { color: #f59e0b; }
.heatmap-wrap { display: flex; flex-direction: column; }

/* ---------- pie chart ---------- */
.pie-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 4px 8px 16px; min-height: 280px;
}
.pie-cap {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em;
}
.pie-svg { width: 240px; height: 240px; }
.pie-slice {
  transition: transform .2s ease, filter .2s ease;
  transform-origin: 140px 140px; cursor: pointer;
}
.pie-slice:hover { transform: scale(1.04); filter: brightness(1.12); }
.pie-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.pie-legend .item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--panel-strong); border: 1px solid var(--border);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.pie-legend .swatch {
  width: 12px; height: 12px; border-radius: 3px;
  box-shadow: 0 0 8px currentColor;
}
.pie-legend .item.up   { color: var(--up); }
.pie-legend .item.up   .swatch { background: #10b981; }
.pie-legend .item.down { color: var(--down); }
.pie-legend .item.down .swatch { background: #ef4444; }
.pie-legend .item .vals { color: var(--text); font-weight: 700; margin-left: 2px; }
.pie-legend .item .pct  { color: var(--muted); font-weight: 500; margin-left: 4px; }

/* ---------- bar tooltip ---------- */
.tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10, 14, 26, 0.96);
  border: 1px solid var(--border-strong);
  padding: 9px 12px; border-radius: 10px; font-size: 11.5px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
  z-index: 5; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(8px);
}
.tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(10, 14, 26, 0.96);
}
.bar-col:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
.tooltip strong { display: block; color: #fff; margin-bottom: 4px; font-size: 12px; }
.tooltip .up   { color: var(--up);   font-variant-numeric: tabular-nums; }
.tooltip .down { color: var(--down); font-variant-numeric: tabular-nums; }

/* ---------- events table ---------- */
.events {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 20px 22px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
}
.events + .events { margin-top: 28px; }
.events-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.events h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.events .count {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  padding: 3px 9px; border-radius: 999px;
  background: var(--panel-strong); border: 1px solid var(--border);
}
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
td { text-align: left; padding: 11px 12px; }
th {
  text-align: center; padding: 11px 12px;
  color: var(--muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--border);
}
/* Sortable headers anchor their label + sort-arrow side by side; without
   inline-flex the centered text and the arrow stack awkwardly. */
.events-table th.sortable > * { display: inline; }
.events-table th .sort-icon { vertical-align: middle; }

/* Keep the horizontal scroll *inside* the events panel instead of
   forcing the whole page to scroll when the viewport is narrower than
   the table's natural minimum width. The dedicated wrapper around the
   table carries the overflow-x; constraining the parent (#events) and
   the panel (.events) to max-width: 100% prevents either from being
   pushed wider than its viewport-bound parent. The table sets a sensible
   min-width so columns don't compress past readability before the
   wrapper-local scrollbar takes over. */
.events { max-width: 100%; }
#events { max-width: 100%; min-width: 0; }
.events-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Firefox: same accent-coloured thin scrollbar as .service-details
     and .evm-body — keeping a single visual language across the app. */
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.55) transparent;
}
/* WebKit / Chromium: gradient thumb that matches the dashboard's accent
   palette, rotated 90deg for horizontal orientation. Mirrors the
   vertical scrollbar used in the service-details panel and the event
   modal body. */
.events-table-wrap::-webkit-scrollbar { height: 8px; }
.events-table-wrap::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 8px;
}
.events-table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.55), rgba(6, 182, 212, 0.55));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .18s ease;
}
.events-table-wrap::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  background-clip: padding-box;
}
.events-table { min-width: 760px; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
td { border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }

/* ---------- events: pagination ---------- */
.evt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 4px 4px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.evt-pg-info {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.evt-pg-info strong {
  color: var(--text);
  font-weight: 600;
}
.evt-pg-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.evt-pg-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.evt-pg-btn:hover:not([disabled]) {
  color: var(--text);
  background: var(--panel-hover);
  border-color: var(--border-strong);
}
.evt-pg-btn:focus-visible {
  outline: 2px solid var(--accent-b);
  outline-offset: 2px;
}
.evt-pg-btn.active {
  color: #fff;
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}
.evt-pg-btn.active:hover { transform: translateY(-1px); }
.evt-pg-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.evt-pg-step svg { display: block; }
.evt-pg-ellipsis {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 30px;
  color: var(--text-dim);
  font-size: 13px;
  user-select: none;
}
@media (max-width: 560px) {
  .evt-pagination {
    justify-content: center;
    flex-direction: column;
    gap: 10px;
  }
  .evt-pg-info { order: 2; }
  .evt-pg-nav  { order: 1; }
}
.dur {
  color: var(--down); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.dur::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--down); box-shadow: 0 0 8px var(--down-glow);
}
.dur.live::before { animation: dotPulse 1.6s ease-out infinite; }
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

.evt-n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap; }
.evt-ongoing { background: linear-gradient(90deg, rgba(239, 68, 68, 0.06), transparent 70%); }

.ongoing-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--down); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ongoing-tag::before { content: ""; width: 0; height: 0; }
.ongoing-tag {
  position: relative; padding-left: 18px;
}
.ongoing-tag::after {
  content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--down); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: dotPulse 1.4s ease-out infinite;
}

.reason {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.reason-code {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.35);
  color: var(--down);
}
.reason-code.reason-net          { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4);  color: #f59e0b; }
.reason-code.reason-host         { background: rgba(99, 102, 241, 0.14); border-color: rgba(99, 102, 241, 0.4);  color: #a5b4fc; }
.reason-code.reason-coolify      { background: rgba(6, 182, 212, 0.14);  border-color: rgba(6, 182, 212, 0.4);   color: var(--accent-b); }
/* Host-cut event: many unrelated services died in the same second AND the
   host's heartbeat stopped — the host itself was cut, not a software reboot.
   Most-severe red, distinct from indigo `reason-host` (normal reboot) and
   amber `reason-net` (single-service network blip). */
.reason-code.reason-host-outage  { background: rgba(239, 68, 68, 0.18);  border-color: rgba(239, 68, 68, 0.55);  color: #fca5a5; }
/* Synthesized platform outage: Coolify API was unreachable for many services
   at once while the host kept heartbeating. A monitoring/platform event, not a
   host cut — amber-violet to read as "degraded platform", distinct from the
   red host-outage and indigo reboot chips. */
.reason-code.reason-platform     { background: rgba(168, 85, 247, 0.16);  border-color: rgba(168, 85, 247, 0.5);   color: #d8b4fe; }
/* Reason-cell message styled as a pill tag (matches .sd-mini-chip in
   the service-details panel) so the contents of every Reason cell read
   as a chip+tag pair instead of chip+plain-text. Host events render
   only the single .reason-code chip, so this rule has no effect there. */
.reason-msg {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 6px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  color: var(--text-dim); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px;
  cursor: help;
}
/* Correlated-deploy chip: pin to the right end of the reason cell so it
   doesn't shove the message text around on rows that don't have one. */
.reason-deploy {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-left: auto;                       /* push to right edge of flex row */
  border: 1px solid var(--border);
  text-decoration: none;
  transition: filter .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.reason-deploy svg { flex: 0 0 auto; }
.reason-deploy:hover { filter: brightness(1.2); }
.reason-deploy-ok {
  color: var(--up);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}
.reason-deploy-warn {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.13);
  border-color: rgba(251, 191, 36, 0.4);
}
.reason-deploy-err {
  color: var(--down);
  background: rgba(239, 68, 68, 0.13);
  border-color: rgba(239, 68, 68, 0.4);
}
/* When the chip lives in the events table reason cell, the .reason
   container is `inline-flex` — let it span the full cell width so
   margin-left:auto on the chip pushes it to the far edge. */
td .reason { display: flex; width: 100%; }
.empty {
  color: var(--muted); font-style: italic;
  padding: 18px 0; text-align: center;
}

/* ---------- events: filter toolbar ---------- */
.events-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  align-items: center;
  padding: 10px 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.evt-presets { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.evt-chip {
  padding: 5px 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 11.5px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.02em;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.evt-chip:hover { color: var(--text); background: var(--panel-hover); }
.evt-chip.active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(6, 182, 212, 0.16));
  border-color: var(--accent-b);
}
/* .evt-range / .evt-range-lbl rules live further down with the custom
   date-picker styles. Legacy <input type="date"> rules removed — the
   markup now uses <button> triggers instead. */
.evt-clear {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 8px;
  width: 26px; height: 26px;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: color .15s ease, border-color .15s ease;
}
.evt-clear:hover { color: var(--down); border-color: var(--down); }

.count.count-filtered {
  color: var(--accent-b);
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.08);
}

/* ---------- events: sortable headers + expandable rows ---------- */
.events-table th.sortable {
  cursor: pointer; user-select: none;
  transition: color .15s ease;
}
.events-table th.sortable:hover { color: var(--text); }
.events-table th.sortable:focus-visible { outline: 2px solid var(--accent-b); outline-offset: -2px; }
.sort-ind {
  display: inline-block; margin-left: 4px;
  font-size: 11px; color: var(--text-dim);
  transition: color .15s ease;
}
.sort-ind.active { color: var(--accent-b); font-weight: 700; }

.evt-th-x { width: 28px; }
/* Description column — takes whatever horizontal room is left over after
   the fixed-ish columns; long causes wrap to a max of two lines so rows
   stay shallow. Full text on hover (title attribute on .evt-desc-text). */
.evt-th-desc { min-width: 220px; }
.evt-desc {
  vertical-align: middle;
  max-width: 480px;
  padding-right: 14px;
}
.evt-desc-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
  cursor: help;
}
.evt-desc-empty { color: var(--text-dim); opacity: 0.55; }
.evt-row { cursor: pointer; }
.evt-row:focus-visible { outline: 2px solid var(--accent-b); outline-offset: -2px; }
.evt-x {
  width: 28px; text-align: center; color: var(--text-dim);
}
.evt-chevron {
  width: 13px; height: 13px;
  transition: transform .22s ease, color .15s ease;
}
.evt-row.evt-expanded .evt-chevron {
  transform: rotate(180deg);
  color: var(--accent-b);
}
.evt-row.evt-expanded > td {
  background: rgba(99, 102, 241, 0.06);
  border-bottom-color: rgba(99, 102, 241, 0.25);
}

.evt-details-row > td {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px 18px;
}
.evd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 22px;
  margin: 0;
}
.evd-row {
  display: grid; grid-template-columns: 170px 1fr;
  gap: 12px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.evd-row:last-child { border-bottom: none; }
.evd-key {
  margin: 0;
  font-size: 10.5px; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.evd-val {
  margin: 0; font-size: 13px; color: var(--text);
  word-break: break-word;
}
.evd-rel { color: var(--text-dim); }
.evd-muted { color: var(--text-dim); }
.evd-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--panel-strong); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 5px;
}
.evd-error {
  margin: 0; padding: 9px 11px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: var(--text);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 200px; overflow-y: auto;
}

/* ---------- entrance animation ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.summary, .chart-panel, .events { animation: rise .35s ease-out both; }
.chart-panel { animation-delay: .05s; }
.events      { animation-delay: .10s; }

/* ---------- refresh button ---------- */
.refresh-btn {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(6, 182, 212, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.32);
  color: var(--accent-b); border-radius: 999px; cursor: pointer;
  position: relative; isolation: isolate;
  transition: color .22s ease, background .22s ease,
              border-color .22s ease, transform .25s ease,
              box-shadow .22s ease;
}
.refresh-btn::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 999px;
  background: var(--accent-grad);
  opacity: 0; z-index: -1;
  filter: blur(10px);
  transition: opacity .25s ease;
}
.refresh-btn svg { width: 16px; height: 16px; }
.refresh-btn:hover:not(:disabled) {
  color: var(--text);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(6, 182, 212, 0.16));
  border-color: var(--accent-b);
  transform: rotate(-30deg);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
}
.refresh-btn:hover:not(:disabled)::before { opacity: 0.5; }
.refresh-btn:active:not(:disabled) { transform: rotate(-30deg) scale(0.94); }
.refresh-btn:focus-visible {
  outline: 2px solid var(--accent-b);
  outline-offset: 2px;
}
.refresh-btn:disabled {
  opacity: 0.55; cursor: not-allowed;
  background: var(--panel);
  border-color: var(--border);
  color: var(--text-dim);
}
.refresh-btn.spinning {
  color: var(--accent-b);
  border-color: var(--accent-b);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(6, 182, 212, 0.16));
  opacity: 1;                    /* override the disabled fade */
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.35);
}
.refresh-btn.spinning svg { animation: spin 0.85s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.refresh-btn.flash-ok {
  color: var(--up); border-color: var(--up);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(16, 185, 129, 0.08));
  animation: pulse-ok .6s ease-out;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.4);
}
.refresh-btn.flash-err {
  color: var(--down); border-color: var(--down);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08));
  animation: shake-err .5s ease-out;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.4);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ok {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes shake-err {
  0%, 100%   { transform: translateX(0); }
  20%, 60%   { transform: translateX(-3px); }
  40%, 80%   { transform: translateX(3px); }
}

/* ---------- settings button ---------- */
.settings-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 999px; cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .25s ease;
}
.settings-btn svg { width: 17px; height: 17px; }
.settings-btn:hover {
  color: var(--text); background: var(--panel-hover);
  border-color: var(--border-strong); transform: rotate(45deg);
}

/* ---------- settings overlay ---------- */
.settings-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; justify-content: flex-end;
  animation: overlayIn .25s ease-out;
}
/* The HTML `hidden` attribute is `display: none` by default, but `display: flex`
   above overrides it — restore the hide-when-hidden contract explicitly. */
.settings-overlay[hidden] { display: none; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.settings-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 4, 12, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.settings-panel {
  position: relative;
  width: min(760px, 96vw); height: 100%;
  overflow-y: auto;
  overflow-x: hidden;          /* never spawn a horizontal scrollbar */
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.98), rgba(6, 9, 18, 0.98));
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  animation: panelIn .3s cubic-bezier(.4, .1, .2, 1);
}
/* Small screens: panel goes edge-to-edge so the limited width isn't
   wasted on a backdrop sliver. Drop the left border + slide animation
   end-point so 100% width feels seamless. */
@media (max-width: 720px) {
  .settings-panel {
    width: 100vw;
    border-left: none;
  }
}
@keyframes panelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.settings-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; gap: 16px;
  background: rgba(6, 9, 18, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.settings-head h2 {
  margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
}
.settings-sub {
  display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-top: 2px;
}
.settings-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); padding: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.settings-close svg { width: 16px; height: 16px; pointer-events: none; }
.settings-close:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel-hover); }

.settings-body {
  padding: 18px 22px 32px;
  overflow-x: hidden;          /* belt + braces with .settings-panel */
  min-width: 0;
}
@media (max-width: 540px) {
  .settings-body { padding: 14px 14px 28px; }
}

.settings-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }

.settings-section {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.settings-section.wide { grid-column: 1 / -1; }
.settings-section h3 {
  margin: 0 0 12px; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .14em;
}

.kv {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.kv:last-child { border-bottom: none; }
.kv-k { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.kv-v {
  color: var(--text); font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.kv-v code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; padding: 2px 6px; border-radius: 5px;
  background: var(--panel-strong); color: var(--text-dim);
}
.kv-note {
  margin-top: 10px; padding: 9px 12px; border-radius: 8px;
  background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.25);
  color: var(--text-dim); font-size: 11.5px; line-height: 1.5;
}
.kv-note code {
  background: var(--panel-strong); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
}

.settings-bar {
  height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px;
  overflow: hidden; margin: 8px 0 4px;
}
.settings-bar-fill {
  height: 100%; transition: width .4s ease;
  background: linear-gradient(90deg, var(--up), #34d399);
}
.settings-bar-fill.warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.settings-bar-fill.bad  { background: linear-gradient(90deg, var(--down), #f87171); }

/* Inline %% chip rendered inside a kv value — disk/memory utilization. */
.kv-pct {
  font-weight: 600; font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* Top-of-Settings snapshot card — same vocabulary as the Discord embed.   */
.settings-snap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px) {
  .settings-snap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .settings-snap { grid-template-columns: 1fr; }
}

.settings-snap-item {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  min-width: 0;
}
.settings-snap-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
}
.settings-snap-val {
  margin-top: 2px;
  font-size: 22px; font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.settings-snap-sub {
  margin-top: 4px;
  color: var(--text-dim); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.settings-snap-item .settings-bar {
  margin: 6px 0 2px;
}

/* ---- Inode block inside a Disk row ---- */
.settings-disk-inode {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.settings-disk-inode-lbl {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
  margin-right: 8px;
}
.settings-disk-inode-pct {
  font-size: 11.5px; font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.settings-disk-inode-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* ---- Tracker self-health rows ---- */
.settings-th-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.settings-th-row:last-of-type { border-bottom: none; }
.settings-th-name {
  font-size: 12.5px; color: var(--text-dim); font-weight: 500;
}
.settings-th-pill {
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.settings-th-pill.ok   { color: var(--up);   background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.32); }
.settings-th-pill.warn { color: #f59e0b;     background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.32); }
.settings-th-pill.bad  { color: var(--down); background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.32); }
.kv-note.settings-th-ok {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.28);
  color: var(--up);
}
.kv-note.settings-th-warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.28);
  color: #f59e0b;
}

/* ---- Discord delivery card ---- */
.settings-discord {
  display: flex; flex-direction: column; gap: 6px;
}
.settings-discord-head {
  display: flex; align-items: baseline; gap: 10px;
}
.settings-discord-rate {
  font-size: 28px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.settings-discord-rate.ok   { color: var(--up); }
.settings-discord-rate.warn { color: #f59e0b; }
.settings-discord-rate.bad  { color: var(--down); }
.settings-discord-sub {
  color: var(--muted); font-size: 12px;
}
.settings-discord-counts {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.settings-discord-counts .ok  { color: var(--up); }
.settings-discord-counts .bad { color: var(--down); }
.settings-discord-counts .dim { color: var(--muted); }
.settings-fail-details summary {
  cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
}
.settings-fail-list {
  margin: 6px 0 0; padding-left: 18px;
  font-size: 11px; color: var(--text-dim);
}
.settings-fail-ts {
  font-variant-numeric: tabular-nums; color: var(--muted);
}

/* ---- Leaderboard ---- */
.settings-leader-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.settings-leader-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
/* Visually distinguish the host row from per-service rows — the host's
   downtime semantics are different (whole-VM reboots / cron gaps rather
   than a single service flapping). */
.settings-leader-row.host {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.28);
}
.settings-leader-name {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.settings-leader-tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  text-transform: uppercase;
}
.settings-leader-tag.host {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
}
.settings-leader-pct {
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.settings-leader-pct.ok   { color: var(--up); }
.settings-leader-pct.warn { color: #f59e0b; }
.settings-leader-pct.bad  { color: var(--down); }
.settings-leader-sub {
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.settings-leader-clean {
  text-align: center;
  font-size: 12.5px; font-weight: 600;
  color: var(--up);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 10px;
  padding: 14px 16px;
}

/* ---- Service-specific container stats ----
 * Cards are laid out in a 2-column grid (responsive down to 1) so they
 * tile compactly instead of one tall column. Each card keeps its mem +
 * cpu metric stacked vertically so the bars line up cleanly. */
.settings-cs-list {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;   /* prevent grid children from blowing out the parent */
}
.settings-cs-grid {
  display: grid;
  /* 3 cards per row on desktop. Stepped breakpoints:
   * - ≥780px : 3 cols
   * - 540–780px : 2 cols
   * - <540px : 1 col (single-card width stays legible)
   *
   * Two anchoring mechanisms together — relying on grid-template-rows
   * alone wasn't enough because empty row tracks collapse on some
   * browsers when their `auto` max resolves to 0:
   *   1. grid-template-rows reserves explicit row tracks so a partly-
   *      filled last page is laid out in the same columns/rows as a
   *      full one (cards never re-flow upward).
   *   2. min-height on the grid is a hard floor in pixels, so even
   *      single-card pages keep the same vertical footprint —
   *      pagination + footer stay anchored, panel doesn't visibly
   *      resize between pages.
   */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(200px, auto));
  grid-auto-flow: row;
  gap: 10px;
  min-height: calc(2 * 200px + 10px);   /* 2 rows + 1 gap = 410px */
  min-width: 0;
}
@media (max-width: 780px) {
  .settings-cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* page size 6 / 2 cols = 3 rows on tablet */
    grid-template-rows: repeat(3, minmax(200px, auto));
    min-height: calc(3 * 200px + 2 * 10px);   /* 620px */
  }
}
@media (max-width: 540px) {
  .settings-cs-grid {
    grid-template-columns: 1fr;
    /* page size 6 / 1 col = 6 rows on mobile */
    grid-template-rows: repeat(6, minmax(180px, auto));
    min-height: calc(6 * 180px + 5 * 10px);   /* 1130px */
  }
}
.settings-cs-io {
  font-size: 11px;
  color: var(--text-dim);
  /* Long IO strings like "2.87GB / 53.4MB · 102MB / 0B" otherwise force
     horizontal scroll on narrow phones. Allow them to wrap between the
     ↓ in / ↑ out halves. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.settings-cs-row {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.settings-cs-head {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.settings-cs-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-cs-sub {
  font-size: 10px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.settings-cs-metrics {
  display: flex; flex-direction: column; gap: 8px;
}
.settings-cs-metric {
  display: flex; flex-direction: column; gap: 3px;
}
.settings-cs-metric-lbl {
  font-size: 10px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .08em;
}
.settings-cs-metric-val {
  font-size: 11.5px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.settings-cs-foot {
  text-align: center;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
}
.settings-cs-pagination {
  margin-top: 4px;
}
.settings-cs-banner {
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 1.55;
}
.settings-cs-banner code {
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 5px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Per-service container cards inside the RBM modals (Disk / Memory / CPU).
   3-column grid on desktop, collapses to 2 / 1 columns on narrower screens.
   Each card stacks vertically: name → bar (optional) → value. */
.rbm-svc-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 820px) {
  .rbm-svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .rbm-svc-list { grid-template-columns: 1fr; }
}
.rbm-svc-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  transition: background .12s, border-color .12s;
  min-width: 0;
}
.rbm-svc-row:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
}
.rbm-svc-row-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rbm-svc-row-bar {
  min-width: 0;
}
.rbm-svc-row-bar:empty {
  display: none;
}
.rbm-svc-row-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: 'tnum';
  /* Long disk IO strings like "↓ 268MB read · ↑ 579MB write" need to wrap
     in the narrower card column. Use overflow-wrap: anywhere as a safety
     net for unbroken tokens (e.g. raw byte counts). */
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
}
.rbm-svc-row-val .kv-pct {
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}

/* All-services usage card (This Host home page, collapsible). */
.services-overview {
  margin: 14px 0 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;   /* keep child borders inside the rounded corners */
}
.services-overview-toggle {
  /* Strip default <button> styling — this is a full-width header bar. */
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  font: inherit;
  border-bottom: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.services-overview-toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}
.services-overview-toggle:focus-visible {
  outline: 2px solid rgba(74, 222, 128, 0.55);
  outline-offset: -2px;
}
.services-overview-open .services-overview-toggle {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
.services-overview-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  min-width: 0; flex: 1;
}
.services-overview-head h3 {
  margin: 0; font-size: 16px; font-weight: 700; color: var(--text);
}
.services-overview-sub {
  font-size: 11px; color: var(--muted); font-feature-settings: 'tnum';
}
.services-overview-caret {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 180ms ease, color 120ms ease;
}
.services-overview-toggle[aria-expanded="false"] .services-overview-caret {
  transform: rotate(-90deg);
}
.services-overview-toggle:hover .services-overview-caret {
  color: var(--text);
}
.services-overview-body {
  padding: 14px 18px 18px;
}
.services-overview-body[hidden] {
  display: none;
}
.services-overview-grid {
  /* Fleet has 14 services, not 6 — drop the explicit-row + min-height floor
     the Settings panel uses for its 6-card page. */
  grid-template-rows: none;
  min-height: 0;
}
.services-overview-row {
  /* Plain card now (not clickable; the dropdown is the way to drill in). */
  cursor: default;
}

.settings-disk { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.settings-disk:last-child { border-bottom: none; }
.settings-disk-head {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 600;
}
.settings-disk-mount {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.settings-disk-pct { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.settings-disk-meta {
  display: flex; gap: 14px;
  font-size: 11px; color: var(--text-dim); margin-top: 4px;
  font-variant-numeric: tabular-nums; flex-wrap: wrap;
}
.settings-disk-meta .src { color: var(--muted); margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.settings-iface-list { display: flex; flex-direction: column; gap: 6px; }
.settings-iface {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  font-size: 12.5px;
}
.settings-iface-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; color: var(--accent-b); min-width: 92px;
}
.settings-iface-cidr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); flex: 1; font-variant-numeric: tabular-nums;
}
.settings-iface .iface-chip {
  background: var(--panel-strong); border: 1px solid var(--border);
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

.settings-pre {
  margin: 0; padding: 12px 14px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--text-dim);
  overflow-x: auto; line-height: 1.6; white-space: pre;
}

.settings-error {
  padding: 14px; border-radius: 10px;
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--text); font-size: 13px;
}
.settings-error code {
  background: var(--panel-strong); padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
}

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .wrap { padding: 22px 16px 48px; }
  h1 { font-size: 19px; }
  .card .value { font-size: 22px; }
  .bars { height: 200px; }
  th, td { padding: 9px 8px; font-size: 12px; }
}

/* ============================================================
 * Custom FROM / TO date picker (replaces native date inputs)
 *
 * The pills carry their own role as placeholder text ("From" / "To")
 * so no external caption / wrapping panel is needed. .evt-range is
 * just a flex row.
 * ============================================================ */
.evt-range {
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.evt-dp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  color: var(--text); border-radius: 10px;
  font-size: 13px; font-family: inherit;
  font-variant-numeric: tabular-nums; font-weight: 600;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease,
              box-shadow .22s ease, transform .12s ease;
  text-transform: none; letter-spacing: 0;
  min-width: 148px;
  position: relative;
}
.evt-dp-trigger::after {
  content: ''; margin-left: auto;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-dim);
  opacity: 0.55;
  transition: transform .2s ease, opacity .2s ease;
}
.evt-dp-trigger:hover {
  background:
    linear-gradient(180deg, rgba(99,102,241,0.10), rgba(6,182,212,0.05));
  border-color: var(--accent-b);
  color: var(--text);
}
.evt-dp-trigger:hover::after { opacity: 1; }
.evt-dp-trigger:focus-visible {
  outline: none;
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.22);
}
.evt-dp-trigger[aria-expanded="true"] {
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(6, 182, 212, 0.14));
  border-color: var(--accent-b);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18),
              0 4px 14px rgba(99, 102, 241, 0.22);
  color: #fff;
}
.evt-dp-trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
  opacity: 1;
  border-top-color: var(--accent-b);
}
.evt-dp-icon {
  width: 15px; height: 15px;
  color: var(--accent-b); flex-shrink: 0;
}
.evt-dp-text {
  color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.evt-dp-trigger.is-empty .evt-dp-text {
  /* Placeholder reads "From" / "To" — keep the same weight as a picked
     date so the pill doesn't shrink when populated, but mute the colour
     so it's clearly a placeholder. */
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.evt-dp-trigger[aria-expanded="true"] .evt-dp-icon { color: #fff; }
.evt-dp-trigger[aria-expanded="true"] .evt-dp-text { color: #fff; }

/* The clear button gets a matching hover treatment so it lives in the
   same visual family as the new triggers. */
.evt-clear {
  width: 30px; height: 30px;
  align-self: center;
  margin-bottom: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.evt-clear:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--down); border-color: var(--down);
}

.evt-dp-pop {
  position: fixed; z-index: 90;
  width: 296px;
  background:
    radial-gradient(180px 100px at 50% -10%, rgba(99,102,241,0.16), transparent),
    linear-gradient(180deg, rgba(15, 20, 38, 0.985), rgba(8, 11, 24, 0.985));
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(99, 102, 241, 0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 14px;
  animation: evtDpIn .2s cubic-bezier(.4, .1, .2, 1);
}
.evt-dp-pop[hidden] { display: none; }
@keyframes evtDpIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.evt-dp-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.evt-dp-title {
  flex: 1; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); border-radius: 7px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; letter-spacing: 0.01em;
  transition: background .15s ease, border-color .15s ease;
}
.evt-dp-title:hover { background: var(--panel-hover); border-color: var(--border-strong); }
.evt-dp-nav {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 7px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.evt-dp-nav:hover { color: var(--text); background: var(--panel-hover); border-color: var(--border-strong); }
.evt-dp-nav svg { width: 13px; height: 13px; }

.evt-dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.evt-dp-dow {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 0 4px;
}
.evt-dp-day {
  display: grid; place-items: center;
  height: 32px; padding: 0;
  background: transparent; border: 1px solid transparent;
  color: var(--text); border-radius: 7px;
  font-size: 12px; font-family: inherit; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.evt-dp-day:hover:not(.is-disabled):not(.is-selected) {
  background: var(--panel-hover);
  border-color: var(--border-strong);
}
.evt-dp-day.is-other { color: var(--muted); opacity: 0.55; }
.evt-dp-day.is-today { color: var(--accent-b); font-weight: 700; }
.evt-dp-day.is-selected {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.42), rgba(6, 182, 212, 0.36));
  border-color: var(--accent-b);
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32);
}
.evt-dp-day.is-disabled { opacity: 0.25; cursor: not-allowed; }

/* Year/month picker overlay inside the popup. */
.evt-dp-yearpicker {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding: 4px 0;
}
.evt-dp-ypbtn {
  padding: 8px 0;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); border-radius: 7px;
  font-size: 12px; font-family: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.evt-dp-ypbtn:hover { background: var(--panel-hover); border-color: var(--border-strong); }
.evt-dp-ypbtn.is-selected {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(6, 182, 212, 0.26));
  border-color: var(--accent-b); color: #fff; font-weight: 700;
}

.evt-dp-foot {
  display: flex; gap: 6px; justify-content: flex-end;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--border);
}
.evt-dp-quick {
  padding: 5px 11px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 7px;
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; letter-spacing: 0.02em;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.evt-dp-quick:hover { color: var(--text); background: var(--panel-hover); border-color: var(--border-strong); }

/* ============================================================
 * Polished events table (row hover lift, consistent borders)
 * ============================================================ */
.events-table tbody tr.evt-row {
  transition: background .15s ease, box-shadow .15s ease;
}
.events-table tbody tr.evt-row:hover {
  background: rgba(99, 102, 241, 0.06);
  box-shadow: inset 3px 0 0 var(--accent-b);
}
.events-table tbody tr.evt-row:hover td:first-child { color: var(--accent-b); }
.events-table tbody tr.evt-row.evt-ongoing:hover {
  box-shadow: inset 3px 0 0 var(--down);
}

/* Two-tier time cell (Started / Ended columns).
   Time on top reads as the primary value, date on the line below
   provides context without competing for attention. */
.evt-time-cell {
  display: inline-flex; flex-direction: column; gap: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.evt-time-cell .evt-time {
  font-size: 13px; font-weight: 700; color: var(--text);
  letter-spacing: 0.01em;
}
.evt-time-cell .evt-date {
  font-size: 10.5px; font-weight: 500; color: var(--text-dim);
  letter-spacing: 0.04em;
}
.evt-row:hover .evt-time-cell .evt-time { color: var(--accent-b); }

/* ============================================================
 * Downtime event details modal — fixed height, vertical (label
 * above value) layout, custom scrollbar in the body.
 * ============================================================ */
.evm-overlay {
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  animation: evmOverlayIn .22s ease-out;
}
.evm-overlay[hidden] { display: none; }
@keyframes evmOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.evm-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 4, 12, 0.62);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  cursor: pointer;
}

.evm-panel {
  position: relative;
  width: min(720px, 100%);
  height: min(640px, calc(100vh - 64px));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(13, 18, 36, 0.98), rgba(7, 10, 22, 0.98));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: evmPanelIn .26s cubic-bezier(.4, .1, .2, 1);
}
@keyframes evmPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.evm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(6, 182, 212, 0.04) 60%, transparent),
    rgba(8, 11, 24, 0.6);
  flex-shrink: 0;
}
.evm-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.evm-eyebrow {
  font-size: 10.5px; font-weight: 700;
  color: var(--accent-b); letter-spacing: 0.16em; text-transform: uppercase;
}
.evm-title {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
  word-break: break-word;
}
.evm-sub {
  font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.evm-close {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); padding: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px; cursor: pointer; flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.evm-close svg { width: 15px; height: 15px; pointer-events: none; }
.evm-close:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel-hover); }

.evm-body {
  flex: 1; min-height: 0;
  padding: 18px 24px 22px;
  overflow-y: auto;
  /* Firefox custom scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.55) transparent;
}
/* WebKit / Chromium custom scrollbar — matches the .service-details look. */
.evm-body::-webkit-scrollbar { width: 8px; }
.evm-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}
.evm-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.55), rgba(6, 182, 212, 0.55));
  border-radius: 4px;
}
.evm-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.8), rgba(6, 182, 212, 0.8));
}

/* Card-style sections inside the modal. Each section gets a subtle
   gradient header bar to look like an info card rather than a plain
   bordered box. */
.evm-section {
  background:
    linear-gradient(180deg, rgba(99,102,241,0.04), rgba(255,255,255,0.02) 30%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.evm-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(99,102,241,0.45), rgba(6,182,212,0.45), transparent);
  opacity: 0.6;
}
.evm-section:last-child { margin-bottom: 0; }
.evm-section-title {
  margin: 0 0 14px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.evm-section-title .evm-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  background: rgba(99, 102, 241, 0.16); color: var(--accent-b);
  border: 1px solid rgba(99, 102, 241, 0.34);
  border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.08em; font-weight: 700;
}

/* Vertical (title-above-content) field rows — replaces the previous
   side-by-side .evd-row layout for in-modal display. Each field is its
   own subtle card so they read as a tidy two-column grid even when the
   values vary in length. */
.evm-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;
  margin: 0;
}
.evm-field {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  transition: border-color .18s ease, background .18s ease;
}
.evm-field:hover {
  border-color: rgba(99, 102, 241, 0.32);
  background: rgba(99, 102, 241, 0.05);
}
.evm-field.full { grid-column: 1 / -1; }
.evm-field-label {
  font-size: 9.5px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.evm-field-label::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent-b);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.65;
}
.evm-field-value {
  font-size: 13.5px; color: var(--text);
  font-weight: 600; line-height: 1.5;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.evm-field-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.evm-field-value .evm-rel {
  display: block; margin-top: 2px;
  font-size: 11.5px; color: var(--text-dim); font-weight: 400;
}
.evm-field-value .evm-muted { color: var(--muted); font-style: italic; font-weight: 400; }
.evm-field-value pre.evm-error {
  margin: 0; padding: 10px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 160px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(239, 68, 68, 0.55) transparent;
}
.evm-field-value code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--panel-strong); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 5px; color: var(--text);
}
.evm-field-value a {
  color: var(--accent-b); text-decoration: none;
  border-bottom: 1px dashed rgba(6, 182, 212, 0.4);
}
.evm-field-value a:hover { color: var(--text); border-bottom-color: var(--accent-b); }

/* Hero status strip at the top of the modal body. */
.evm-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background:
    linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.06));
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 12px;
}
.evm-hero.is-ongoing {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(249, 115, 22, 0.08));
  border-color: rgba(239, 68, 68, 0.34);
}
.evm-hero-cell {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
/* Time-bearing cells claim a wider minimum so the timestamp doesn't
   wrap awkwardly at narrow widths. */
.evm-hero-cell.evm-hero-time { min-width: 165px; }

.evm-hero-cap {
  font-size: 9.5px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase;
}
.evm-hero-val {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.evm-hero-val.is-down  { color: var(--down); }
.evm-hero-val.is-up    { color: var(--up); }

/* Two-tier time pair inside the modal hero — bigger, more typographic
   weight than the table cell since the modal has more space. */
.evm-time-pair {
  display: inline-flex; flex-direction: column; gap: 2px;
  line-height: 1.1;
}
.evm-time-pair .evm-time {
  font-size: 18px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}
.evm-time-pair .evm-date {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.06em;
}
.evm-hero.is-ongoing .evm-time-pair .evm-time { color: var(--down); }
.evm-hero-ongoing {
  color: var(--down); font-size: 13px; font-weight: 700;
}

/* Loading / empty states inside the modal body. */
.evm-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  color: var(--text-dim); font-size: 12.5px;
  background: var(--panel); border: 1px dashed var(--border);
  border-radius: 10px;
  margin-top: 14px;
}
.evm-loading::before {
  content: ''; width: 12px; height: 12px;
  border: 2px solid rgba(99, 102, 241, 0.28);
  border-top-color: var(--accent-a);
  border-radius: 50%;
  animation: evmSpin .8s linear infinite;
}
@keyframes evmSpin { to { transform: rotate(360deg); } }

.evm-deploy-list { display: flex; flex-direction: column; gap: 8px; }
.evm-deploy-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--panel-strong); border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12.5px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.evm-deploy-item:hover {
  border-color: var(--border-strong);
  background: rgba(99, 102, 241, 0.08);
}
.evm-deploy-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--accent-b); font-weight: 600;
  flex-shrink: 0;
}
.evm-deploy-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.evm-deploy-time { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.evm-deploy-status {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; flex-shrink: 0;
}
.evm-deploy-status.ok    { background: rgba(16,185,129,.14); color: var(--up);   border: 1px solid rgba(16,185,129,.32); }
.evm-deploy-status.err   { background: rgba(239,68,68,.14);  color: var(--down); border: 1px solid rgba(239,68,68,.32); }
.evm-deploy-status.warn  { background: rgba(249,115,22,.16); color: #fb923c;     border: 1px solid rgba(249,115,22,.34); }

@media (max-width: 540px) {
  .evm-overlay { padding: 12px; }
  .evm-panel { height: calc(100vh - 24px); border-radius: 14px; }
  .evm-head { padding: 16px 18px 14px; }
  .evm-body { padding: 14px 16px 18px; }
  .evt-dp-pop { width: calc(100vw - 24px); max-width: 320px; }
}

/* ============================================================
 * Chart tooltip — shared across all chart types
 *
 * One floating panel positioned next to the cursor. Replaces the
 * native <title> SVG fallback (delayed, system font, ugly) with a
 * dashboard-styled card that reads at a glance.
 * ============================================================ */
.chart-tooltip {
  position: fixed; z-index: 95;
  pointer-events: none;
  min-width: 180px; max-width: 280px;
  padding: 10px 12px;
  background:
    radial-gradient(140px 80px at 50% -20%, rgba(99,102,241,0.18), transparent),
    linear-gradient(180deg, rgba(15, 20, 38, 0.97), rgba(8, 11, 24, 0.97));
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(99, 102, 241, 0.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  animation: chartTipIn .12s ease-out;
}
.chart-tooltip[hidden] { display: none; }
@keyframes chartTipIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chart-tooltip::before {
  content: '';
  position: absolute; top: 0; left: 10px; right: 10px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(99,102,241,0.55), rgba(6,182,212,0.55), transparent);
}

.ct-title {
  font-size: 11.5px; font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}
.ct-title-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-b);
  flex-shrink: 0;
}
.ct-title-dot.up   { background: var(--up); }
.ct-title-dot.down { background: var(--down); }
.ct-title-dot.warn { background: #f59e0b; }

.ct-rows { display: flex; flex-direction: column; gap: 4px; }
.ct-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.ct-row-key {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  flex-shrink: 0;
}
.ct-row-val {
  font-size: 12px; color: var(--text); font-weight: 600;
  text-align: right;
}
.ct-row-val.up   { color: var(--up); }
.ct-row-val.down { color: var(--down); }
.ct-row-val.warn { color: #f59e0b; }

.ct-foot {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 10.5px; color: var(--muted);
}

/* ============================================================
   Notifications view (mode === 'notifications')
   Reuses the glassmorphism vocabulary from the rest of the
   dashboard — pane backgrounds, mini chips, evt-chip patterns —
   so the new view feels native, not bolted on.
   ============================================================ */

.notif-view {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
/* Without this, the `display: flex` above overrides the [hidden] attribute
 * the JS toggles when mode changes — and the Notifications section leaks
 * onto the This Host / Service Wise dashboards. */
.notif-view[hidden] { display: none !important; }

.notif-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.notif-head h2 {
  margin: 0; font-size: 18px; font-weight: 700;
  background: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.01em;
}
.notif-sub {
  display: inline-block; margin-top: 4px;
  color: var(--muted); font-size: 12px;
}
.notif-totals {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 999px;
  padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}

.notif-toolbar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

.notif-filter-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.notif-chip {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.notif-chip:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.notif-chip:active { transform: translateY(1px); }
.notif-chip.active {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.55);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25) inset;
}

.notif-search-wrap {
  position: relative;
  display: flex; align-items: center;
  min-width: 220px;
}
.notif-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  color: var(--muted);
  pointer-events: none;
}
.notif-search {
  width: 100%;
  font: inherit; font-size: 12.5px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 7px 12px 7px 30px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.notif-search::placeholder { color: var(--muted); }
.notif-search:focus {
  border-color: rgba(99, 102, 241, 0.55);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

/* ---- Notification list ---- */
.notif-list { display: flex; flex-direction: column; gap: 12px; }
.notif-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--muted); font-size: 13px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.notif-empty code {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--text-dim);
  font-size: 11.5px;
}
.notif-empty-err { color: #f59e0b; border-color: rgba(245, 158, 11, 0.35); }

/* ---- Card ---- */
.notif-card {
  --notif-accent: #6366f1;
  position: relative;
  display: grid;
  grid-template-columns: 4px 1fr;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  backdrop-filter: blur(10px);
}
.notif-card:hover {
  border-color: rgba(255, 255, 255, 0.13);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.notif-card-bar {
  background: var(--notif-accent);
  box-shadow: 0 0 12px var(--notif-accent);
}
.notif-card-body { padding: 14px 16px 16px; }

.notif-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.notif-card-titlewrap {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; flex: 1 1 auto;
}
.notif-card-title {
  margin: 0;
  font-size: 14.5px; font-weight: 700; color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.notif-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 11px; color: var(--muted);
}
.notif-author {
  font-weight: 600; color: var(--text-dim);
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.notif-ts { font-variant-numeric: tabular-nums; }
.notif-delivered {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.02em;
}
.notif-delivered.notif-delivered-yes {
  color: var(--up);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.32);
}
.notif-delivered.notif-delivered-no {
  color: var(--down);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
}
.notif-delivered.notif-delivered-unknown {
  color: var(--muted);
  background: rgba(110, 122, 147, 0.12);
  border: 1px solid rgba(110, 122, 147, 0.32);
}

/* ---- Kind chips ---- */
.notif-kind-chip {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}
.notif-kind-chip.k-deploy   { color: #c084fc; background: rgba(192, 132, 252, 0.10); border-color: rgba(192, 132, 252, 0.30); }
.notif-kind-chip.k-recover  { color: var(--up); background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.30); }
.notif-kind-chip.k-down     { color: var(--down); background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); }
.notif-kind-chip.k-daily    { color: #60a5fa; background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.30); }
.notif-kind-chip.k-host     { color: #f59e0b; background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); }
.notif-kind-chip.k-test     { color: #06b6d4; background: rgba(6, 182, 212, 0.10); border-color: rgba(6, 182, 212, 0.30); }

/* ---- Description + fields ---- */
.notif-desc {
  color: var(--text-dim);
  font-size: 12.5px; line-height: 1.55;
  white-space: normal;
  margin: 4px 0 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 2px solid var(--notif-accent);
  border-radius: 8px;
}

.notif-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.notif-field {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 10px;
}
.notif-field-name {
  font-size: 10.5px; font-weight: 700;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.notif-field-value {
  font-size: 12px; color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.notif-field-value a {
  color: var(--accent-b);
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---- Raw payload (collapsed) ---- */
.notif-extras {
  margin-top: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  padding: 8px 12px;
}
.notif-extras summary {
  cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  outline: none;
}
.notif-extras summary:hover { color: var(--text); }
.notif-extras[open] summary {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.notif-extras-pre {
  margin: 0; padding: 8px;
  font-size: 11px; line-height: 1.45;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.30);
  border-radius: 8px;
  max-height: 360px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}

/* ---- Date filter toolbar (presets + from/to range) ---- */
.notif-date-toolbar {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}
.notif-date-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.notif-date-chip {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 5px 11px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.notif-date-chip:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.notif-date-chip:active { transform: translateY(1px); }
.notif-date-chip.active {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.55);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.22) inset;
}
/* The From/To custom-picker triggers reuse the events table's .evt-dp-trigger
 * styling for visual parity. Only the wrapper alignment differs from the
 * events toolbar — keep it minimal so the picker popup positions correctly. */
.notif-date-range {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* The notif-pager element is now populated with .evt-pg-* markup for visual
 * parity with the events table. Keep these legacy notif-pg* rules around in
 * case anything still references them, but the matching evt-pg-* CSS is the
 * source of truth for the pager look. */
.notif-pager {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  margin-top: 6px; flex-wrap: wrap;
}
.notif-pg {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 5px 11px;
  min-width: 32px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.notif-pg:hover { background: rgba(255, 255, 255, 0.09); color: var(--text); }
.notif-pg.is-current {
  background: var(--accent-grad);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}
.notif-pg.is-disabled {
  cursor: not-allowed; opacity: 0.45;
}
.notif-pg-ellipsis {
  color: var(--muted); font-size: 12px;
  padding: 0 2px;
}

@media (max-width: 640px) {
  .notif-head, .notif-toolbar { flex-direction: column; align-items: stretch; }
  .notif-search-wrap { width: 100%; }
  .notif-card-head { flex-direction: column; align-items: flex-start; }
  .notif-card-meta { row-gap: 4px; }
}

/* =====================================================================
   ZELLIJ VIEW — terminal-session management tab
   Reuses the same design tokens as the rest of the dashboard:
   --panel / --border / --accent-grad / --up / --down / etc.
   ===================================================================== */

.zellij-view {
  margin-top: 16px;
  animation: fadeUp .35s ease both;
}
.zellij-view[hidden] { display: none; }

.zellij-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.zellij-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.zellij-sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
}
.zellij-generated {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
}

/* Stats row — 5 metric cards */
.zellij-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.zellij-stat {
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, background .2s;
}
.zellij-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.zellij-stat:hover {
  background: var(--panel-hover);
  border-color: var(--border-strong);
}
.zellij-stat-lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.zellij-stat-val {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: 'tnum';
  line-height: 1.1;
  margin-bottom: 4px;
}
.zellij-stat-sub {
  font-size: 11px;
  color: var(--text-dim);
}
.zellij-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.zellij-dot.active {
  background: var(--up);
  box-shadow: 0 0 8px var(--up-glow);
}
.zellij-dot.exited {
  background: var(--muted);
}

/* Toolbar — filter chips + search (mirrors notif-toolbar pattern) */
.zellij-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.zellij-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.zellij-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-dim);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: 0.005em;
}
.zellij-chip:hover {
  background: var(--panel-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.zellij-chip.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}
.zellij-search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.zellij-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.zellij-search {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px 9px 36px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
}
.zellij-search:focus {
  border-color: var(--accent-a);
  background: var(--panel-hover);
}
.zellij-search::placeholder { color: var(--muted); }

/* Table */
/* Inherit the Downtime events table styling — outer glass panel from
   `.events`, scroll wrap from `.events-table-wrap`, and all
   th/td/hover rules from the base `table` + `.events-table` selectors.
   The zellij-specific tweaks below only adjust column widths + cell
   colour for memory/disk + action-button layout — everything else
   uses the shared visual language. */
.zellij-table.events-table { min-width: 760px; }

.zt-id        { width: 48px;  color: var(--muted); font-feature-settings: 'tnum'; }
.zt-name      { font-weight: 500; }
.zt-name code { color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
.zt-mem       { width: 120px; font-feature-settings: 'tnum'; color: var(--text-dim); }
.zt-mem.active { color: var(--up); font-weight: 600; }
.zt-disk      { width: 110px; font-feature-settings: 'tnum'; color: var(--text-dim); }
.zt-created   { width: 180px; color: var(--text-dim); font-size: 12.5px; }
.zt-status    { width: 110px; }
.zt-actions   { width: 130px; text-align: right; }

.zellij-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.zellij-status-pill.active {
  background: rgba(16, 185, 129, 0.12);
  color: var(--up);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.zellij-status-pill.exited {
  background: rgba(110, 122, 147, 0.12);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.zellij-status-pill .zellij-dot {
  width: 6px;
  height: 6px;
}

/* Exit-reason badge — why a session is no longer running. */
.zt-reason-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: rgba(110, 122, 147, 0.12);
}
.zt-reason-badge.running {            /* active session */
  color: var(--up);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}
.zt-reason-badge.host-reboot {        /* killed by a reboot / power outage */
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.30);
}
.zt-reason-badge.ended-host-up {      /* manual quit or logout (host stayed up) */
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.26);
}
.zt-reason-badge.unknown {
  color: var(--muted);
  background: rgba(110, 122, 147, 0.10);
}

.zellij-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.zellij-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s;
}
.zellij-action svg { width: 14px; height: 14px; }
.zellij-action:hover {
  background: var(--panel-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.zellij-action.zellij-action-view:hover {
  border-color: var(--accent-a);
  color: var(--accent-a);
}
.zellij-action.zellij-action-delete:hover {
  border-color: var(--down);
  color: var(--down);
}
.zellij-action[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.zellij-empty {
  text-align: center;
  padding: 40px 14px;
  color: var(--muted);
  font-size: 13px;
}

.zellij-pager {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* Modal (detail view) — mirror evm-overlay structure */
.zmm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: fadeIn .2s ease both;
}
.zmm-overlay[hidden] { display: none; }
.zmm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.zmm-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 64px);
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.95), rgba(6, 9, 18, 0.95));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleIn .25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.zmm-panel-delete {
  width: min(520px, 100%);
}
.zmm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.zmm-eyebrow {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-a);
  margin-bottom: 4px;
  font-weight: 600;
}
.zmm-eyebrow-danger {
  color: var(--down);
}
.zmm-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.005em;
}
.zmm-sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
}
.zmm-close {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.zmm-close:hover {
  background: var(--panel-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.zmm-close svg { width: 13px; height: 13px; }
.zmm-body {
  padding: 18px 24px 24px;
  overflow-y: auto;
}
.zmm-body-delete { padding: 22px 24px 24px; }

/* Detail grid inside modal */
.zmm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.zmm-field {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.zmm-field.zmm-field-wide { grid-column: 1 / -1; }
.zmm-field-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.zmm-field-val {
  font-size: 13.5px;
  color: var(--text);
  word-break: break-word;
  font-feature-settings: 'tnum';
}
.zmm-field-val code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--accent-a);
}

.zmm-section {
  margin-top: 18px;
}
.zmm-section-head {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.zmm-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.zmm-proc {
  display: grid;
  grid-template-columns: 80px 1fr 120px 90px 100px;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12px;
  margin-bottom: 6px;
  align-items: center;
}
.zmm-proc-pid {
  color: var(--text-dim);
  font-feature-settings: 'tnum';
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.zmm-proc-cmd {
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zmm-proc-mem {
  text-align: right;
  color: var(--text-dim);
  font-feature-settings: 'tnum';
}
.zmm-proc-role {
  text-align: right;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.zmm-proc-role.server { color: var(--accent-a); font-weight: 600; }
.zmm-proc-role.client { color: var(--text-dim); }
/* Owner + controlling terminal. The server legitimately has no tty, so the
   slot stays empty for it rather than showing a placeholder. */
.zmm-proc-who {
  color: var(--text);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zmm-proc-tty {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  margin-left: 5px;
}
.zmm-proc-none { color: var(--text-dim); font-style: italic; }

/* Two lines per process: who is running it, then the machine detail. The name
   carries the weight because every process here runs as the same unix account,
   so the account name cannot tell two people apart and the person's can. */
.zmm-proc-person {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}
.zmm-proc-sub {
  display: block;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.35;
  word-spacing: 3px;
}
.zmm-proc-person .zmd-tag { font-weight: 600; }

/* Command-copy block (delete modal + attach hint) */
.zmm-cmd-wrap {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 70px 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.zmm-cmd {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  background: transparent;
}
.zmm-copy {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.zmm-copy svg { width: 12px; height: 12px; }
.zmm-copy:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
  color: var(--accent-a);
}
.zmm-copy.copied {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--up);
  color: var(--up);
}

.zmm-help {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   Resource breakdown modal (.rbm-*) — Disk / Memory / CPU drill-down.
   Re-uses the .zmm-* visual vocabulary (overlay / backdrop / panel /
   head / body / close button) but with its own class prefix so the
   layout inside the body can diverge without touching the Zellij modal.
   ============================================================ */
.rbm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: fadeIn .2s ease both;
}
.rbm-overlay[hidden] { display: none; }
.rbm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 18, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.rbm-panel {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100vh - 64px);
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.96), rgba(6, 9, 18, 0.96));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleIn .25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rbm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.rbm-eyebrow {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-a);
  margin-bottom: 4px;
  font-weight: 600;
}
.rbm-title {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.005em;
}
.rbm-sub {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
}
.rbm-close {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.rbm-close:hover {
  background: var(--panel-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.rbm-close svg { width: 13px; height: 13px; }
.rbm-body {
  padding: 18px 24px 24px;
  overflow-y: auto;
}

.rbm-section { margin-top: 18px; }
.rbm-section:first-child { margin-top: 0; }
.rbm-section-head {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rbm-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Card-grid container — rows render as auto-fill cards (2-up on 860 px modal,
   1-up on phone). Replaces the previous horizontal row layout. */
.rbm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

/* Card — one process or one directory. Vertical layout so the three sub-rows
   (head / cmd / value) stack inside each cell. */
.rbm-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: 12.5px;
  position: relative;
  transition: background .12s, border-color .12s, transform .12s;
  min-width: 0;
}
.rbm-row:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
  transform: translateY(-1px);
}

/* Card head: PID + user chip on the left, value pinned to the right. */
.rbm-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.rbm-row-pid {
  color: var(--text-dim);
  font-feature-settings: 'tnum';
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.rbm-row-pid .rbm-row-user {
  font-size: 9.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  letter-spacing: 0.05em;
}

/* Command block: binary name on top (bold), args wrapped below. */
.rbm-row-cmd {
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rbm-row-cmd .rbm-row-name {
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rbm-row-cmd .rbm-row-args {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Value (top-right of card head): primary number + secondary pct. */
.rbm-row-val {
  color: var(--text);
  font-feature-settings: 'tnum';
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: linear-gradient(135deg, var(--accent-a), var(--accent-b, var(--accent-a)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rbm-row-val .rbm-row-pct {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: none;
  -webkit-text-fill-color: var(--text-dim);
}

/* Disk card — simpler layout: path on top, size on right of head. */
.rbm-row-disk .rbm-row-head {
  align-items: center;
}
.rbm-row-disk .rbm-row-cmd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  word-break: break-all;
  white-space: normal;
}
.rbm-row-disk .rbm-row-cmd .rbm-row-name {
  white-space: normal;
  font-size: 12px;
  line-height: 1.3;
}
.rbm-row-disk.rbm-row-total {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(99, 102, 241, 0.35);
  grid-column: 1 / -1;
}
.rbm-row-disk.rbm-row-total .rbm-row-name::before {
  content: '∑ ';
  color: var(--accent-a);
  font-weight: 700;
}

/* Mounts grid — same auto-fill rhythm as .rbm-grid but with wider min-card
   width because each mount card has its own progress bar + meta strip. */
.rbm-mount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}

/* Mount card — same vocabulary as .settings-disk but compacted for modal. */
.rbm-mount {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  transition: background .12s, border-color .12s;
}
.rbm-mount:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
}
.rbm-mount-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rbm-mount-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
}
.rbm-mount-pct {
  font-feature-settings: 'tnum';
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 700;
}
.rbm-mount-meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
  font-feature-settings: 'tnum';
}
.rbm-mount-meta .src {
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  margin-left: auto;
}

/* Dir-scan group header — wraps each scanned root inside the modal. */
.rbm-dirgroup { margin-bottom: 14px; }
/* Nested (level-2) dir-scan — indented + dimmer header so the user can
   tell at a glance which scans are top-level and which are drill-downs. */
.rbm-dirgroup-nested {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}
.rbm-dirgroup-nested .rbm-dirgroup-root { color: var(--text-dim); font-weight: 500; }
.rbm-dirgroup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rbm-dirgroup-root {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
}
.rbm-dirgroup-pd {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warn);
  font-weight: 600;
}
/* Neutral variant — used by the user-grouped Memory/CPU subgroups where
   the header chip carries a summary ("8 processes · 5.2 GB") rather than
   a warning. Same typography, less alarming colour. */
.rbm-dirgroup-meta {
  color: var(--text-dim);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
}

/* Banner — generic warning strip inside the modal body. */
.rbm-banner {
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 14px;
}
.rbm-banner strong { color: var(--warn); }
.rbm-banner code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

.rbm-empty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

/* Make snapshot tiles look clickable. The Uptime tile keeps the default
   cursor — only Disk/Memory/CPU drill into a modal. */
.settings-snap-item.clickable {
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.settings-snap-item.clickable:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
  transform: translateY(-1px);
}
.settings-snap-item.clickable::after {
  content: '↗';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity .15s;
}
.settings-snap-item.clickable { position: relative; }
.settings-snap-item.clickable:hover::after { opacity: 1; }

@media (max-width: 760px) {
  .rbm-grid { grid-template-columns: 1fr; }
  .rbm-mount-grid { grid-template-columns: 1fr; }
  .rbm-row-val { font-size: 13px; }
}

/* ============================================================
   Reclaim section — cards inside the Disk breakdown listing
   reclaimable disk by candidate. Same .rbm-grid rhythm; each
   card has an action button that opens the copy-command modal.
   ============================================================ */
.rbm-reclaim-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  position: relative;
  transition: background .12s, border-color .12s, transform .12s;
  min-width: 0;
}
.rbm-reclaim-row:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
  transform: translateY(-1px);
}
.rbm-reclaim-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.rbm-reclaim-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rbm-reclaim-size {
  font-feature-settings: 'tnum';
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--up), #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rbm-reclaim-size.unknown {
  background: none;
  -webkit-text-fill-color: var(--text-dim);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 500;
}
.rbm-reclaim-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.rbm-reclaim-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}
.rbm-reclaim-chip {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 5px;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  border: 1px solid var(--border);
}
.rbm-reclaim-chip.risk-safe     { background: rgba(16, 185, 129, 0.10);   color: var(--up);    border-color: rgba(16, 185, 129, 0.30); }
.rbm-reclaim-chip.risk-moderate { background: rgba(245, 158, 11, 0.10);   color: var(--warn);  border-color: rgba(245, 158, 11, 0.30); }
.rbm-reclaim-chip.risk-high     { background: rgba(239, 68, 68, 0.10);    color: var(--down);  border-color: rgba(239, 68, 68, 0.30); }
.rbm-reclaim-chip.sudo {
  background: rgba(99, 102, 241, 0.08);
  color: var(--accent-a);
  border-color: rgba(99, 102, 241, 0.30);
}
.rbm-reclaim-action {
  margin-top: 4px;
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  align-self: flex-start;
}
.rbm-reclaim-action:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
  color: var(--accent-a);
}
.rbm-reclaim-action svg { width: 12px; height: 12px; }

/* Sudo disclaimer — small italic line on the card; appears only when the
   command requires sudo so the user is reminded to verify before pasting. */
.rbm-reclaim-disclaimer {
  font-size: 10.5px;
  color: var(--warn);
  line-height: 1.45;
  padding: 6px 8px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.20);
  border-radius: 7px;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.rbm-reclaim-disclaimer::before {
  content: '⚠';
  font-style: normal;
  flex-shrink: 0;
}

/* Reclaim total summary chip — shown next to the section head when ≥1
   candidate has a known size. */
.rbm-reclaim-total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
  font-size: 11.5px;
  font-weight: 600;
  color: var(--up);
  background: rgba(16, 185, 129, 0.08);
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid rgba(16, 185, 129, 0.25);
  text-transform: none;
  letter-spacing: 0;
}

/* Memory-model explainer — neutral info card surfaced at the bottom of
   the Memory modal so the user understands why there's no "free memory"
   button. */
.rbm-explainer {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.20);
  border-radius: 11px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.55;
}
.rbm-explainer strong { color: var(--accent-a); }
.rbm-explainer code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

/* ============================================================
   Reclaim copy-command modal (.rcm-*) — overlays on top of the
   resource-breakdown modal. Same vocabulary as the Zellij delete
   modal but its own class prefix so the two modals can coexist
   when the user has both open.
   ============================================================ */
.rcm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  animation: fadeIn .2s ease both;
}
.rcm-overlay[hidden] { display: none; }
.rcm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 18, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.rcm-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 64px);
  background: linear-gradient(180deg, rgba(11, 16, 32, 0.96), rgba(6, 9, 18, 0.96));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: scaleIn .25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.rcm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.rcm-eyebrow {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-a);
  margin-bottom: 4px;
  font-weight: 600;
}
.rcm-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.rcm-sub {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.rcm-close {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.rcm-close:hover {
  background: var(--panel-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.rcm-close svg { width: 13px; height: 13px; }
.rcm-body { padding: 18px 24px 22px; overflow-y: auto; }

.rcm-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.20);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text);
}

/* Disclaimer banner inside the copy-command modal — high-contrast warning
   strip that appears above the command for any sudo-requiring action. */
.rcm-disclaimer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.40);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}
.rcm-disclaimer-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4));
}
.rcm-disclaimer-body strong {
  color: var(--warn);
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
}
.rcm-impact-lbl {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.rcm-impact-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
  font-size: 14px;
  font-weight: 700;
  color: var(--up);
}
.rcm-impact-val.unknown { color: var(--text-dim); font-weight: 500; font-size: 12px; }

.rcm-cmd-wrap {
  position: relative;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 80px 14px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.rcm-cmd {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
  background: transparent;
  line-height: 1.4;
}
.rcm-copy {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.rcm-copy svg { width: 12px; height: 12px; }
.rcm-copy:hover {
  background: var(--panel-hover);
  border-color: var(--accent-a);
  color: var(--accent-a);
}
.rcm-copy.copied {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--up);
  color: var(--up);
}
.rcm-help {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.55;
}
.rcm-help strong { color: var(--text); }

@media (max-width: 760px) {
  .rbm-reclaim-head { flex-direction: column; gap: 4px; }
  .rbm-reclaim-size { align-self: flex-start; }
}

/* Responsive — phone */
@media (max-width: 760px) {
  .zellij-stats { grid-template-columns: repeat(2, 1fr); }
  .zellij-table { font-size: 12px; }
  .zellij-table thead th { padding: 10px 10px; }
  .zellij-table tbody td { padding: 10px 10px; }
  .zt-created { display: none; }
  .zt-disk    { display: none; }
  .zmm-grid { grid-template-columns: 1fr; }
  .zmm-proc { grid-template-columns: 1fr; gap: 4px; }
  .zmm-proc-mem, .zmm-proc-role, .zmm-proc-who { text-align: left; }
}

/* Sortable headers + sort-indicator arrows now inherit from the events
   table's `.sortable` + `.sort-ind` rules — no zellij-specific overrides
   needed. The dropped custom-arrow CSS is gone on purpose. */

/* Clickable row */
.zellij-table tbody tr {
  cursor: pointer;
}
.zellij-table tbody tr:focus-visible {
  outline: 2px solid var(--accent-a);
  outline-offset: -2px;
}

/* Make sure action-button clicks don't bubble to row click */
.zellij-table tbody td.zt-actions {
  cursor: default;
}

/* =====================================================================
   UI TOOLTIP — a lightweight singleton hover-hint shown for any element
   that carries a [data-tip] attribute. Same visual vocabulary as the
   chart-tooltip (gradient + glass + accent gleam) but a single line.
   ===================================================================== */
.ui-tooltip {
  position: fixed;
  z-index: 1500;
  pointer-events: none;
  max-width: 260px;
  padding: 7px 11px;
  background:
    radial-gradient(120px 60px at 50% -25%, rgba(99,102,241,0.22), transparent),
    linear-gradient(180deg, rgba(15, 20, 38, 0.97), rgba(8, 11, 24, 0.97));
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(99, 102, 241, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  animation: uiTipIn .12s ease-out;
}
.ui-tooltip[hidden] { display: none; }
.ui-tooltip.multi { white-space: normal; }
.ui-tooltip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(99,102,241,0.55), rgba(6,182,212,0.55), transparent);
}
@keyframes uiTipIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Variant — danger (delete button hover) uses red gleam */
.ui-tooltip.danger::before {
  background: linear-gradient(90deg,
    transparent, rgba(239, 68, 68, 0.6), rgba(239, 68, 68, 0.4), transparent);
}
.ui-tooltip.danger {
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(239, 68, 68, 0.2);
}

/* Long paths/labels inside the 2-column modal grid: wrap gracefully */
.zmm-grid .zmm-field-val code,
.zmm-grid .zmm-field-val {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.zmm-grid .zmm-field-val code {
  display: inline-block;
  max-width: 100%;
}

/* Bulk Delete-Exited button — danger-styled but not flashy */
.zellij-bulk-delete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  color: var(--down);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  white-space: nowrap;
}
.zellij-bulk-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fff;
}
.zellij-bulk-delete:focus-visible {
  outline: 2px solid var(--down);
  outline-offset: 2px;
}
.zellij-bulk-delete[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.zellij-bulk-delete svg { width: 14px; height: 14px; }
.zellij-bulk-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.18);
  color: var(--down);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.zellij-bulk-delete:hover .zellij-bulk-count {
  background: rgba(239, 68, 68, 0.35);
  color: #fff;
}

/* ============================== ZOMBIES ==============================
   Inherits the Zellij view layout (.zellij-head/-stats/-toolbar/-table).
   Adds: amber "protected" accent, clear/protected dots + pills, and the
   parent/container/count/oldest/cmd columns. Amber has no :root token so
   it's spelled out here (#f59e0b). */

/* status dots used in stat labels */
.zombie-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; margin-right: 5px; flex-shrink: 0;
}
.zombie-dot.clearable { background: var(--up); box-shadow: 0 0 8px var(--up-glow); }
.zombie-dot.protected { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.35); }

/* amber variants for the filter dropdown's dots */
.svc-dd-status.warn     { background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.35); }
.svc-dd-option-dot.warn { background: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, 0.35); }

/* table columns */
.zombies-table.events-table { min-width: 880px; }
.zb-id       { width: 44px;  color: var(--muted); font-feature-settings: 'tnum'; }
.zb-parent   { font-weight: 500; min-width: 220px; }
.zb-parent .zb-svc   { color: var(--text); font-weight: 600; }
.zb-parent .zb-proc  { color: var(--text-dim); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.zb-parent .zb-meta  { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.zb-parent .zb-meta code { color: var(--text-dim); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.zb-count    { width: 96px; font-feature-settings: 'tnum'; }
.zb-oldest   { width: 130px; color: var(--text-dim); font-size: 12.5px; }
.zb-cmd      { max-width: 260px; }
.zb-cmd code {
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.zb-status   { width: 116px; }
.zb-actions  { width: 96px; text-align: right; }

/* the count badge — amber-to-red as the pile grows */
.zombie-count-badge {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(110, 122, 147, 0.16); color: var(--text-dim);
  border: 1px solid var(--border);
}
.zombie-count-badge.warn { background: rgba(245, 158, 11, 0.14); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.zombie-count-badge.high { background: rgba(239, 68, 68, 0.16); color: var(--down); border-color: rgba(239, 68, 68, 0.3); }

/* clearable / protected pills */
.zombie-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.zombie-status-pill .zombie-dot { width: 6px; height: 6px; margin-right: 0; }
.zombie-status-pill.clearable {
  background: rgba(16, 185, 129, 0.12); color: var(--up);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.zombie-status-pill.protected {
  background: rgba(245, 158, 11, 0.12); color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

/* action button: reuse zellij-action look; protected = amber, disabled */
.zombies-bulk-clear svg { width: 14px; height: 14px; }

/* details-modal: PID chips + protected callout */
.zombie-pids { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.zombie-pid-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(110, 122, 147, 0.14); color: var(--text-dim); border: 1px solid var(--border);
}
.zombie-protected-callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: 10px;
  background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.22);
  color: var(--text-dim); font-size: 12.5px; line-height: 1.5;
}
.zombie-protected-callout svg { width: 16px; height: 16px; color: #f59e0b; flex-shrink: 0; margin-top: 1px; }

/* ===================== CHART DRILL-DOWN (click → filter) ===================== */
/* Any chart element carrying data-bucket-key is clickable to filter the events
   table to that date span. */
.drillable { cursor: pointer; }
.svg-bar.drillable:hover .svg-bar-up,
.svg-bar.drillable:hover .svg-bar-down { filter: brightness(1.18); }
.svg-area-hit.drillable:hover { fill: rgba(99, 102, 241, 0.06); }
.hm-cell.drillable:hover { stroke: var(--accent-a); stroke-width: 1.5; }
.dot.drillable:hover { r: 5; }
/* No focus ring on mouse-click (the events-table flash is the feedback);
   keep a ring for keyboard users via :focus-visible. */
.drillable:focus { outline: none; }
.drillable:focus-visible { outline: 2px solid var(--accent-a); outline-offset: 2px; }

/* Donut "clear selection" pill — shown only when a bar is selected. */
.donut-clear {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 4px auto 0; padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--accent-a); cursor: pointer;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.28); border-radius: 999px;
  transition: background .15s ease, border-color .15s ease;
}
.donut-clear:hover { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.45); }
.donut-clear svg { width: 11px; height: 11px; }
.donut-cap.is-selected { color: var(--accent-a); }

/* "+Nd" badge on events that cross midnight, so a large overnight duration
   reads as intentional rather than a glitch. */
.evt-nextday {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 10px; font-weight: 700; line-height: 1.4;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(99, 102, 241, 0.16); color: var(--accent-a);
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-variant-numeric: tabular-nums;
}

/* Duration is a lower bound — the event started before this record did. */
.evt-clamped {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 10px; font-weight: 700; line-height: 1.4;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(148, 163, 184, 0.16); color: var(--muted);
  border: 1px dashed rgba(148, 163, 184, 0.42);
  cursor: help;
}

/* Brief glow on the events table when a chart drill-down scrolls to it. */
@keyframes evtFlash {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  25%  { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.evt-flash { animation: evtFlash 1.1s ease-out; }

/* ===================== MERGED INCIDENT ROWS ===================== */
/* A run of consecutive host events shown as one incident row. */
.reason-code.reason-incident {
  background: rgba(99, 102, 241, 0.16); border-color: rgba(99, 102, 241, 0.5); color: #c7d2fe;
}
.evt-merged-tag {
  display: inline-block; margin-left: 5px; vertical-align: middle;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0 5px; border-radius: 5px;
  background: rgba(99, 102, 241, 0.16); color: var(--accent-a);
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.evt-row.evt-merged { background: rgba(99, 102, 241, 0.035); }
.evt-row.evt-merged:hover { background: rgba(99, 102, 241, 0.07); }

/* ---------- Service-wise Downtime section ---------- */
.svc-filter-wrap { display: flex; align-items: center; }
.svc-filter-select {
  font-size: 12px; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card, var(--panel)); color: var(--text);
  outline: none; transition: border-color 0.2s;
}
.svc-filter-select:focus { border-color: var(--accent-a); }
.evt-svc-name {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  background: rgba(245,158,11,0.13); color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.26); white-space: nowrap;
}

/* Merged-incident modal — the constituent parts. */
/* Incident tags ("host incident" + "N events") moved out of the table row
   into the modal header. Reuses the .reason-code / .reason-msg chip styles. */
.evm-incident-tags {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.evm-merged-intro {
  font-size: 13px; line-height: 1.55; color: var(--text-dim);
  padding: 11px 13px; margin-bottom: 14px;
  background: rgba(99, 102, 241, 0.07); border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}
.evm-merged-intro strong { color: var(--text); }
.evm-parts { display: flex; flex-direction: column; gap: 10px; }
.evm-part {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border);
}
.evm-part-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(99, 102, 241, 0.14); color: var(--accent-a);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.evm-part-body { flex: 1; min-width: 0; }
.evm-part-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.evm-part-dur { font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.evm-part-time { margin-top: 5px; font-size: 12px; color: var(--text-dim); }
.evm-part-desc { margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ===== Deployments view toolbar inputs (match the events toolbar look) ===== */
.dep-svc-select,
.dep-date {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.dep-svc-select:hover,
.dep-date:hover { border-color: var(--border-strong); }
.dep-svc-select:focus,
.dep-date:focus { outline: none; border-color: var(--border-strong); }
/* Make the native date-picker indicator visible on the dark theme. */
.dep-date::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
.dep-date { color-scheme: dark; }

/* ===== Collapsible events/deployments tables + spacing (Service Wise page) ===== */
.events-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.evt-collapse-btn {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--text-dim); padding: 4px 6px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center;
  transition: color .15s ease, background .15s ease;
}
.evt-collapse-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.evt-collapse-btn:focus-visible { outline: 2px solid rgba(74,222,128,0.55); outline-offset: 2px; }
.evt-collapse-caret { transition: transform .2s ease; }
.events.is-collapsed .evt-collapse-caret { transform: rotate(-90deg); }
/* Collapsed: hide everything in the section except its header. */
.events.is-collapsed > *:not(.events-head) { display: none !important; }
.events.is-collapsed .events-head { margin-bottom: 0; }
/* Breathing room between the Downtime table and the service-wise Deployments table. */
#serviceDeploymentsView { margin-top: 26px; }

/* ============================================================
 * Tracking-freshness banner
 *
 * Only ever visible when the ledger has gone stale. Deliberately loud:
 * the state it announces (nothing has been watching) is invisible by
 * nature — an unwatched window and a clean window draw the same chart.
 * ============================================================ */
/* Where the record begins. Informational, not an alarm — deliberately quieter
   than .tracking-banner, which reports something actually wrong. */
.epoch-note {
  display: flex;
  gap: 9px;
  align-items: baseline;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 10px;
  background: var(--panel-2, rgba(148, 163, 184, 0.06));
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.epoch-note strong { color: var(--text); font-weight: 650; }
.epoch-note-icon { flex: 0 0 auto; opacity: 0.75; }

.tracking-banner {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid rgba(239, 68, 68, 0.38);
  border-left: 3px solid var(--down);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.04));
  box-shadow: var(--shadow-sm);
}
.tracking-banner-inner { display: flex; gap: 14px; align-items: flex-start; }
.tracking-banner-icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--down);
  color: #fff;
  font-weight: 800; font-size: 14px; line-height: 1;
  margin-top: 1px;
}
.tracking-banner-title {
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  color: #fecaca; margin-bottom: 4px;
}
.tracking-banner-body { font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.tracking-banner-body strong { color: var(--text); font-weight: 650; }
.tracking-banner-reason {
  display: block; margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--muted);
}

/* ============================================================
 * Network reachability card (This Host)
 * ============================================================ */
.conn-card {
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.conn-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.conn-head h3 {
  margin: 0; font-size: 14px; font-weight: 650;
  letter-spacing: -0.01em; color: var(--text);
}
.conn-badge {
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.01em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
}
.conn-badge.ok   { color: var(--up);   background: rgba(16, 185, 129, 0.12);  border-color: rgba(16, 185, 129, 0.30); }
.conn-badge.warn { color: #fbbf24;     background: rgba(251, 191, 36, 0.12);  border-color: rgba(251, 191, 36, 0.30); }
.conn-badge.bad  { color: var(--down); background: rgba(239, 68, 68, 0.12);   border-color: rgba(239, 68, 68, 0.32); }

/* auto-fit rather than a fixed 3-up: the card sits in the same column as the
 * summary tiles and has to survive a narrow window without clipping. */
.conn-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.conn-check {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
}
.conn-check-name {
  font-size: 12.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conn-check-val {
  margin-left: auto; font-size: 12px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.conn-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted);
}
.conn-dot.ok      { background: var(--up);   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }
.conn-dot.bad     { background: var(--down); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.conn-dot.unknown { background: var(--muted); }
.conn-note {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted);
}

/* ============================================================
 * Zellij · connected devices
 * ============================================================ */
.zdev {
  margin: 0 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.zdev-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.zdev-head h3 {
  margin: 0; font-size: 14px; font-weight: 650;
  letter-spacing: -0.01em; color: var(--text);
}
.zdev-count { font-size: 12px; color: var(--muted); }
.zdev-count code, .zdev-empty code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
}
.zdev-empty, .zdev-note {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted);
}
.zdev-note { margin-top: 10px; }

/* The clamp warning is the payload of this panel — it explains a symptom
 * (zellij "not using the full screen") whose cause is invisible from inside
 * the session. Styled as a callout so it isn't skimmed past. */
/* Connected devices inside the session modal. Narrower than the page-level
   table, so each client is a two-line card rather than seven columns. */
.zmd-list { display: flex; flex-direction: column; gap: 6px; }
.zmd-row {
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.zmd-row.zmd-clamping {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.06);
}
.zmd-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zmd-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up, #22c55e); flex: 0 0 auto;
}
.zmd-name { font-weight: 650; font-size: 13px; }
.zmd-os { font-size: 11px; color: var(--muted); }
/* The device/IP a named person connected from — secondary to the name. */
.zmd-origin, .zdev-origin {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-left: 6px;
}
.zmd-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: 5px;
  background: rgba(251, 191, 36, 0.18); color: #b45309;
  border: 1px solid rgba(251, 191, 36, 0.36);
}
.zmd-tag-soft {
  background: rgba(148, 163, 184, 0.16); color: var(--muted);
  border: 1px dashed rgba(148, 163, 184, 0.42); cursor: help;
}
.zmd-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 5px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px; color: var(--muted);
}
.zmd-warn {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-left: 3px solid #fbbf24;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.07);
  font-size: 12.5px;
}
.zmd-warn-title { font-weight: 700; margin-bottom: 5px; }
.zmd-warn p { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
.zmd-fix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zmd-fix code {
  padding: 3px 8px; border-radius: 6px;
  background: var(--panel-2, rgba(148, 163, 184, 0.1));
  border: 1px solid var(--border);
}

/* The ways out of a clamp, cheapest first. Numbered rather than bulleted
   because the order is the advice: the first one costs nobody their session,
   and the last one ends someone else's terminal. */
.zmd-remedies {
  margin: 0 0 4px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.5;
}
.zmd-remedies li { margin-bottom: 9px; }
.zmd-remedies li:last-child { margin-bottom: 0; }
.zmd-remedies strong { color: var(--text, inherit); font-weight: 650; }
.zmd-remedies .zmd-fix { margin-top: 6px; }
.zmd-remedies code {
  padding: 1px 5px; border-radius: 5px;
  background: var(--panel-2, rgba(148, 163, 184, 0.1));
  border: 1px solid var(--border);
  font-size: 11.5px;
}
.zmd-remedies .zmd-fix code { padding: 3px 8px; border-radius: 6px; font-size: 12px; }

/* The standing explanation under the one-off fix command: why the clamp is not
   a setting anyone can turn off, and what to do so it stops recurring. Dimmer
   and smaller than the warning above it — it is the part you read once. */
.zmd-warn-note {
  margin: 9px 0 0 !important;
  padding-top: 8px;
  border-top: 1px solid rgba(251, 191, 36, 0.2);
  font-size: 11.8px;
  color: var(--text-dim, var(--muted));
}
.zmd-warn-note code {
  padding: 1px 5px; border-radius: 5px;
  background: var(--panel-2, rgba(148, 163, 184, 0.1));
  border: 1px solid var(--border);
  font-size: 11px;
}

/* How old the data in this modal is. It is polled from a snapshot the host
   pushes, so it always has an age — showing it beats letting a device list
   quietly go stale behind an open dialog. */
.zmm-fresh {
  display: flex; align-items: center; gap: 7px;
  margin-top: 4px; padding: 7px 2px 0;
  font-size: 11.5px; color: var(--text-dim, var(--muted));
}
.zmm-fresh-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; flex: none;
}
.zmm-fresh-stale { color: #fbbf24; }
.zmm-fresh-stale .zmm-fresh-dot { background: #fbbf24; }

@media (max-width: 640px) {
  .zmd-meta { gap: 3px 10px; }
}

@media (prefers-color-scheme: dark) {
  .zmd-tag { color: #fbbf24; }
}

.zdev-warn {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-left: 3px solid #fbbf24;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.07);
}
.zdev-warn-title {
  font-size: 13px; font-weight: 650; color: #fde68a; margin-bottom: 5px;
}
.zdev-warn p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.zdev-fix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zdev-fix code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; padding: 5px 9px; border-radius: 7px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border);
  color: var(--text);
}
.zdev-copy {
  font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
  color: var(--text); background: var(--panel-strong);
  border: 1px solid var(--border-strong);
}
.zdev-copy:hover { background: var(--panel-hover); }

.zdev-table-wrap { overflow-x: auto; }
.zdev-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.zdev-table th {
  text-align: left; font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  padding: 0 12px 8px 0; white-space: nowrap;
}
.zdev-table td {
  padding: 9px 12px 9px 0; color: var(--text-dim);
  border-top: 1px solid var(--border); vertical-align: middle;
  white-space: nowrap;
}
.zdev-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
}
.zdev-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.zdev-name { color: var(--text); font-weight: 550; }
.zdev-os {
  margin-left: 7px; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.zdev-tag {
  margin-left: 9px; font-size: 10.5px; font-weight: 650;
  padding: 2px 7px; border-radius: 999px;
  color: #fde68a; background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.zdev-clamping td { background: rgba(251, 191, 36, 0.05); }

/* ============================================================
 * Settings · vantage labelling
 *
 * Inside a container /proc mixes host and container facts. Presenting them
 * as one "server" is how this panel reported the machine's name as a
 * container id. These tags keep each figure attached to what it measures.
 * ============================================================ */
.settings-vantage {
  grid-column: 1 / -1;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 4px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-b);
  border-radius: 10px;
  background: rgba(6, 182, 212, 0.06);
  font-size: 12.5px; line-height: 1.6; color: var(--text-dim);
}
.settings-vantage strong { color: var(--text); font-weight: 650; }
.settings-vantage code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}
.settings-vantage-tag {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  color: var(--accent-b);
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
}
.settings-scope {
  display: inline-block; margin-right: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; vertical-align: 1px;
  padding: 1px 6px; border-radius: 4px;
}
.settings-scope.host {
  color: var(--up); background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
}
.settings-scope.ctr {
  color: var(--muted); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}
.settings-scope-note {
  margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted);
}

/* Zellij · host-collector setup guidance (shown when no host data exists) */
.zellij-setup { text-align: left; max-width: 760px; margin: 0 auto; padding: 8px 0 4px; }
.zellij-setup-title {
  font-size: 14px; font-weight: 650; color: var(--text); margin-bottom: 10px;
}
.zellij-setup p {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.65; color: var(--text-dim);
}
.zellij-setup pre {
  margin: 0 0 12px; padding: 11px 13px; overflow-x: auto;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border);
  border-radius: 9px;
}
.zellij-setup pre code, .zellij-setup p code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--text); white-space: pre;
}
.zellij-setup p code {
  white-space: normal; padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

/* Reason chips for the witnesses added beyond the heartbeat. Colour carries
 * the distinction that matters most: an outage we measured (red/amber) versus
 * a window nobody observed (grey — deliberately not alarming, because "no
 * data" is not the same claim as "no downtime"). */
.reason-code.reason-network {
  color: #fbbf24; background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.32);
}
.reason-code.reason-monitor {
  color: #a78bfa; background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.32);
}
.reason-code.reason-nodata {
  color: var(--muted); background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  border-style: dashed;
}