:root {
  --bg: #070e1e;
  --bg-soft: #0c1628;
  --card: #0f1b31;
  --card-hover: #142340;
  --border: #1e2f55;
  --border-soft: #152240;
  --border-bright: #2b4578;
  --text: #e5ecf7;
  --text-muted: #8494b6;
  --text-dim: #526289;
  --accent: #fde047;      /* phosphor yellow */
  --accent-cool: #67e8f9; /* ice cyan */
  --success: #86efac;
  --warning: #fbbf24;
  --danger: #fb7185;
  --special: #c4b5fd;
  --radius: 4px;
  --radius-sm: 2px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
            0 16px 40px rgba(0, 0, 0, 0.55),
            0 2px 8px rgba(0, 0, 0, 0.25);
  --font-display: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --grid: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(900px 500px at 18% -10%, rgba(253, 224, 71, 0.06), transparent 55%),
    radial-gradient(800px 500px at 88% -15%, rgba(103, 232, 249, 0.04), transparent 55%),
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, var(--grid) var(--grid), var(--grid) var(--grid), auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  min-height: 100vh;
  position: relative;
}

/* Subtle grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.15;
  mix-blend-mode: overlay;
  z-index: 0;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--text-muted); }
.big {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* ── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(7, 14, 30, 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
  gap: 10px;
  isolation: isolate;
}
.topbar::before {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, transparent 80%);
  opacity: 0.45;
}
.topbar::after {
  content: 'TELEMETRY // LIVE';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}
@media (max-width: 900px) { .topbar::after { display: none; } }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 17px;
  color: var(--text);
}
.topbar form { margin: 0; }

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.15);
  animation: pulse 2s ease-in-out infinite;
}
.status-dot.offline { background: var(--danger); box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.15); }
.status-dot.warn { background: var(--warning); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.15); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Alert badge ───────────────────────────────────────────────────────── */
#alert-badge {
  display: none;
  align-items: center;
  gap: 5px;
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: var(--danger);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  animation: badge-pulse 2s ease-in-out infinite;
}
#alert-badge.visible { display: flex; }
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ── Refresh selector ──────────────────────────────────────────────────── */
.refresh-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.refresh-ctrl select {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  cursor: pointer;
}
.refresh-ctrl select:focus { outline: none; border-color: var(--accent); }

/* ── Card alert pulse ──────────────────────────────────────────────────── */
.card.alert-pulse {
  border-color: rgba(248, 113, 113, 0.6) !important;
  box-shadow: var(--shadow), 0 0 16px rgba(248, 113, 113, 0.15);
  animation: card-pulse 2s ease-in-out infinite;
}
@keyframes card-pulse {
  0%, 100% { border-color: rgba(248, 113, 113, 0.6); box-shadow: var(--shadow), 0 0 16px rgba(248, 113, 113, 0.15); }
  50% { border-color: rgba(248, 113, 113, 0.25); box-shadow: var(--shadow), 0 0 4px rgba(248, 113, 113, 0.05); }
}
.service.alert-pulse {
  border-color: rgba(248, 113, 113, 0.6) !important;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.15);
  animation: card-pulse 2s ease-in-out infinite;
}

/* ── Grid ──────────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}
.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }

@media (max-width: 1100px) {
  .col-8, .col-6, .col-4 { grid-column: span 12; }
}

/* Grid section-headers — scheiden thematische clusters */
.grid-section-header {
  grid-column: 1 / -1;
  margin: 14px 0 -2px;
  padding: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
}
.grid-section-header::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.5);
  flex-shrink: 0;
}
.grid-section-header:first-child { margin-top: 0; }
[data-theme="fnl"] .grid-section-header::before { box-shadow: none; }
[data-theme="fnl-dark"] .grid-section-header::before { box-shadow: 0 0 8px rgba(255, 191, 63, 0.5); }

@media (max-width: 768px) {
  .grid { padding: 12px; gap: 10px; }
  .col-6, .col-4 { grid-column: span 12; }
  .services { grid-template-columns: 1fr !important; }
  .topbar { padding: 10px 14px; }
}

/* ── Card ──────────────────────────────────────────────────────────────── */
.card {
  background:
    linear-gradient(145deg, rgba(253, 224, 71, 0.018), transparent 42%),
    linear-gradient(315deg, rgba(103, 232, 249, 0.014), transparent 45%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  box-shadow: var(--shadow);
  transition: border-color 0.25s ease, transform 0.25s ease;
  position: relative;
  isolation: isolate;
}
.card:hover {
  border-color: var(--border-bright);
}

/* Corner-markers (top-left + bottom-right) — telemetry frame vibe */
.card::before,
.card::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--accent);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.card::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.card::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}
.card:hover::before,
.card:hover::after { opacity: 0.85; }

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-soft);
}
.card-head h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
  padding-left: 16px;
  display: inline-flex;
  align-items: center;
}
.card-head h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(253, 224, 71, 0.55);
}

.meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 6px;
}

.chart-wrap {
  position: relative;
  height: 90px;
  width: 100%;
  margin-top: 4px;
  overflow: hidden;
}
.chart-wrap > div {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}
.chart-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: 90px;
}

/* ── CPU cores ─────────────────────────────────────────────────────────── */
.cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.core {
  height: 22px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 8px;
  justify-content: space-between;
}
.core-num {
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.core-pct {
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.core.hot .core-num,
.core.hot .core-pct { color: #fff; }
.cores-label {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.core::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--v, 0%);
  background: linear-gradient(90deg, var(--accent-cool), var(--accent));
  box-shadow: 0 0 6px rgba(253, 224, 71, 0.35);
  transition: width 0.6s ease;
}
.core.hot::after {
  background: linear-gradient(90deg, var(--warning), var(--danger));
  box-shadow: 0 0 6px rgba(251, 113, 133, 0.4);
}

/* ── Load / net rows ───────────────────────────────────────────────────── */
.load-row, .net-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.load-row { grid-template-columns: repeat(3, 1fr); }
.load-row > div, .net-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.load-row .muted, .net-row .muted {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Disk I/O ──────────────────────────────────────────────────────────── */
.disk-io-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.disk-io-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.disk-io-row .muted {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chart-wrap.spark {
  height: 40px;
  margin-top: 8px;
}
.chart-wrap.spark canvas { max-height: 40px; }

/* ── Disks ─────────────────────────────────────────────────────────────── */
.disks { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.disk {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  align-items: center;
  gap: 16px;
}
.disk-label { font-family: var(--font-mono); font-size: 12px; }
.disk-label small { color: var(--text-dim); }
.disk-bar {
  height: 8px;
  background: var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.disk-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cool), var(--accent));
  box-shadow: 0 0 12px rgba(253, 224, 71, 0.35);
  transition: width 0.6s ease;
}
.disk-bar.warn > span { background: linear-gradient(90deg, var(--warning), #f97316); }
.disk-bar.danger > span { background: linear-gradient(90deg, var(--danger), #e11d48); }
.disk-meta { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--text-muted); }

@media (max-width: 680px) {
  .disk { grid-template-columns: 1fr; }
  .disk-meta { text-align: left; }
}

/* ── Services ──────────────────────────────────────────────────────────── */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.service {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--bg-soft);
  transition: border-color 0.2s, background 0.2s;
}
.service:hover { background: var(--card-hover); }
.service-head {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.service-name { font-family: var(--font-mono); font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 3px 9px;
  border-radius: 2px;
  background: rgba(134, 239, 172, 0.12);
  color: var(--success);
  border: 1px solid rgba(134, 239, 172, 0.3);
  position: relative;
}
.service-state::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.service-state.inactive,
.service-state.failed,
.service-state.dead {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.25);
}
.service-state.activating,
.service-state.deactivating,
.service-state.reloading {
  background: rgba(251, 191, 36, 0.12);
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.25);
}
.service-meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

/* ── Service action buttons ────────────────────────────────────────────── */
.service-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.service-actions button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-family: var(--font-sans);
  line-height: 1;
}
.service-actions button:hover { color: var(--text); border-color: var(--accent); }
.service-actions button.btn-stop:hover { border-color: var(--danger); color: var(--danger); }
.service-actions button.btn-start:hover { border-color: var(--success); color: var(--success); }
.service-actions button.btn-logs {
  font-size: 10px;
  padding: 3px 6px;
}

/* ── Workers toggle ────────────────────────────────────────────────────── */
.workers-toggle {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 10px;
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 2px 0;
  margin-top: 6px;
  display: block;
  transition: color 0.15s;
}
.workers-toggle:hover { color: var(--text-muted); }
.service-workers {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.service-workers.hidden { display: none; }
.service-worker {
  background: rgba(255,255,255,0.02);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.service-worker strong { color: var(--text); }
.service-worker.hot {
  border-color: var(--danger);
  background: rgba(248, 113, 133, 0.14);
  color: var(--danger);
  animation: worker-pulse 1.6s ease-in-out infinite;
}
.service-worker.hot strong { color: var(--danger); }
.worker-flame {
  margin-left: auto;
  font-size: 11px;
  animation: flame-flicker 1.2s ease-in-out infinite;
}
@keyframes worker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 133, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(248, 113, 133, 0); }
}
@keyframes flame-flicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.1); }
}

/* ── Service mini-chart ────────────────────────────────────────────────── */
.service-chart-area {
  margin-top: 10px;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}
.service-chart-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.chart-wrap.mini {
  height: 60px;
}
.chart-wrap.mini canvas { max-height: 60px; }

/* ── Btn-row (metric / range selectors) ─────────────────────────────────── */
.btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-row button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-row button:hover { color: var(--text); border-color: var(--accent); }
.btn-row button.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-row.small button {
  padding: 3px 8px;
  font-size: 10px;
}

/* ── History card ──────────────────────────────────────────────────────── */
.history-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.history-controls .divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}
/* ── Stacked cards in rechter kolom ───────────────────────────────────── */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.card-stack > .card { margin: 0; }

.kv-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}
.kv-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}
.kv-rows > div:last-child { border-bottom: 0; }
.kv-rows .muted {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kv-rows .mono { font-size: 13px; color: var(--text); }

.alerts-sum {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 6px;
  margin-bottom: 10px;
}
.alerts-sum > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.alerts-sum .muted {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 1100px) {
  .card-stack { gap: 10px; }
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: 8px;
}
.history-item { display: flex; flex-direction: column; min-width: 0; }
.history-item-wide { grid-column: 1 / -1; }
.history-title {
  margin: 0 0 6px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .history-grid { grid-template-columns: 1fr; gap: 14px; }
  .history-item-wide { grid-column: auto; }
}

.history-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
  pointer-events: none;
}

.chart-wrap.history {
  height: 280px;
}
.chart-wrap.history canvas { max-height: 280px; }

/* ── Process tables ────────────────────────────────────────────────────── */
.proc-table-wrap {
  overflow-x: auto;
}
.proc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}
.proc-table th, .proc-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.proc-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 500;
}
.proc-table td.num, .proc-table th.num { text-align: right; }
.proc-table tbody tr:hover { background: var(--bg-soft); }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background:
    linear-gradient(145deg, rgba(253, 224, 71, 0.03), transparent 50%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 32px 32px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.login-card::before,
.login-card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--accent);
  opacity: 0.6;
  pointer-events: none;
}
.login-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.login-card::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.login-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(180deg, var(--text), var(--text-muted));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-card::after { }
.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  align-self: flex-start;
}
.login-card h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.login-sub { margin: 0; color: var(--text-muted); font-size: 13px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.login-card input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.login-card button {
  background: var(--accent);
  color: #0a1324;
  border: 0;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s, box-shadow 0.15s;
  margin-top: 6px;
  box-shadow: 0 8px 24px -8px rgba(253, 224, 71, 0.5);
}
.login-card button:hover {
  background: #fef08a;
  box-shadow: 0 12px 32px -8px rgba(253, 224, 71, 0.65);
}
.login-card button:active { transform: scale(0.98); }
.alert {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.25);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* ── Ghost button (topbar logout) ──────────────────────────────────────── */
button.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
button.ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(253, 224, 71, 0.06);
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: toast-in 0.2s ease;
  max-width: 320px;
}
.toast.success { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.1); color: var(--success); }
.toast.error   { border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); color: var(--danger); }
.toast.fade-out { animation: toast-out 0.3s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

/* ── Notification button ───────────────────────────────────────────────── */
#notif-btn {
  font-size: 12px;
}
#notif-btn.notif-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(56, 189, 248, 0.08);
}
#notif-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Endpoints card ────────────────────────────────────────────────────── */
.endpoints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.endpoints-empty {
  font-size: 12px;
  padding: 8px 0;
}
.ep-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.2s;
}
.ep-tile.ep-down {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.04);
}
.ep-head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ep-dot.ok   { background: var(--success); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); }
.ep-dot.down { background: var(--danger);  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); }
.ep-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ep-tile.ep-down .ep-status { color: var(--danger); }
.ep-url {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  transition: color 0.15s;
}
.ep-url:hover { color: var(--accent); text-decoration: underline; }
.ep-error {
  font-size: 10px;
  color: var(--danger);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ep-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.ep-spark {
  margin-top: 4px;
}

/* ── Certificaten card ─────────────────────────────────────────────────── */
.certs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.certs-empty {
  font-size: 12px;
  padding: 8px 0;
}
.cert-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cert-domain {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cert-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}
.cert-days {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.cert-days-ok   { background: rgba(52, 211, 153, 0.12); color: var(--success); border: 1px solid rgba(52, 211, 153, 0.25); }
.cert-days-warn { background: rgba(251, 191, 36, 0.12);  color: var(--warning); border: 1px solid rgba(251, 191, 36, 0.25); }
.cert-days-bad  { background: rgba(248, 113, 113, 0.12); color: var(--danger);  border: 1px solid rgba(248, 113, 113, 0.25); }
.cert-issuer  { font-size: 11px; }
.cert-expires { font-size: 10px; }

/* ── Service uptime badges (Feature 4) ─────────────────────────────────── */
.service-uptime {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.uptime-ok   { color: var(--success); }
.uptime-warn { color: var(--warning); }
.uptime-bad  { color: var(--danger); }
.uptime-na   { color: var(--text-dim); }

/* ── Responsive: endpoints + certs stack on mobile ─────────────────────── */
@media (max-width: 768px) {
  #card-endpoints { grid-column: span 12; }
  #card-certs     { grid-column: span 12; }
  .endpoints-grid { grid-template-columns: 1fr; }
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.modal-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.modal-close:hover { color: var(--text); border-color: var(--accent); }
.modal-body {
  overflow-y: auto;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ── F&L Logo ──────────────────────────────────────────────────────────── */
.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-fnl {
  height: 38px;
  width: auto;
  display: block;
}
/* Huisstijlregel: logo alleen in WIT of GROEN. Default wit (donkere topbar). */
.logo-fnl .shape    { fill: #ffffff; }
.logo-fnl .letter   { fill: var(--bg); }
.logo-fnl .wordmark { fill: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════════
   F&L POWERRENTAL THEMA — huisstijl donkergroen + wit + secundair palet
   Activeer via [data-theme="fnl"] op <html>.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="fnl"] {
  --bg:            #f2efe7;
  --bg-soft:       #ffffff;
  --card:          #ffffff;
  --card-hover:    #fafaf6;
  --border:        #d6d1c2;
  --border-soft:   #e6e2d7;
  --border-bright: #1c4220;
  --text:          #1a2420;
  --text-muted:    #5c6b64;
  --text-dim:      #8f9b94;
  --accent:        #1c4220;    /* donkergroen — primaire kleur */
  --accent-cool:   #489fdf;    /* water (licht blauw) */
  --success:       #6bcaba;    /* mint — emissieloos */
  --warning:       #ffbf3f;    /* sunflower — elektriciteit */
  --danger:        #ef7f3c;    /* sweet orange — klimaat */
  --special:       #8e3a80;    /* lila — verlichting */
  --radius:        6px;
  --radius-sm:     3px;
  --shadow:        0 1px 0 rgba(255,255,255,0.6) inset,
                   0 10px 28px rgba(28, 66, 32, 0.08),
                   0 2px 8px rgba(28, 66, 32, 0.04);
  --font-display:  'Mulish', 'Inter Tight', system-ui, sans-serif;
  --font-sans:     'Mulish', 'Inter Tight', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'JetBrains Mono', monospace;
  --grid:          60px;
}

[data-theme="fnl"] body {
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(28, 66, 32, 0.07), transparent 55%),
    radial-gradient(800px 500px at 88% -15%, rgba(72, 159, 223, 0.05), transparent 55%),
    var(--bg);
  color: var(--text);
}
[data-theme="fnl"] body::before { display: none; }  /* geen grain overlay */

/* F&L topbar: DONKERGROEN — huisstijl-kenmerkend */
[data-theme="fnl"] .topbar {
  background: #1c4220;
  border-bottom: 1px solid #143018;
  color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-theme="fnl"] .topbar::before {
  background: linear-gradient(90deg, transparent, #ffbf3f 30%, #ffbf3f 70%, transparent);
  opacity: 0.5;
  height: 2px;
}
[data-theme="fnl"] .topbar::after {
  content: 'F&L POWERRENTAL';
  color: rgba(255, 255, 255, 0.14);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.35em;
}
[data-theme="fnl"] .topbar strong {
  font-family: var(--font-display);
  font-weight: 900;
  color: #ffffff;
}
[data-theme="fnl"] .topbar .muted,
[data-theme="fnl"] .topbar .mono.muted,
[data-theme="fnl"] .refresh-ctrl label {
  color: rgba(255, 255, 255, 0.7);
}
[data-theme="fnl"] .topbar .mono:not(.muted) { color: #ffffff; }
[data-theme="fnl"] .topbar .status-dot {
  background: #6bcaba;
  box-shadow: 0 0 0 4px rgba(107, 202, 186, 0.25);
}
[data-theme="fnl"] .topbar button.ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
[data-theme="fnl"] .topbar button.ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}
[data-theme="fnl"] .refresh-ctrl select {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
[data-theme="fnl"] #alert-badge {
  background: rgba(239, 127, 60, 0.3);
  color: #fff;
  border-color: rgba(255, 191, 63, 0.6);
}
/* Logo in F&L theme: wit op groene topbar */
[data-theme="fnl"] .logo-fnl .shape    { fill: #ffffff; }
[data-theme="fnl"] .logo-fnl .letter   { fill: #1c4220; }
[data-theme="fnl"] .logo-fnl .wordmark { fill: #ffffff; }
[data-theme="fnl"] .big {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--accent);
}

[data-theme="fnl"] .card {
  background:
    linear-gradient(145deg, rgba(28, 66, 32, 0.015), transparent 50%),
    var(--card);
}
[data-theme="fnl"] .card:hover { border-color: rgba(28, 66, 32, 0.4); }
[data-theme="fnl"] .card::before,
[data-theme="fnl"] .card::after {
  border-color: var(--accent);
  opacity: 0.65;
}

[data-theme="fnl"] .card-head {
  border-bottom: 1px dashed rgba(28, 66, 32, 0.15);
}
[data-theme="fnl"] .card-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  padding-left: 18px;
}
[data-theme="fnl"] .card-head h2::before {
  background: var(--accent);
  width: 10px;
  height: 3px;
  box-shadow: none;
}

[data-theme="fnl"] .status-dot {
  box-shadow: 0 0 0 4px rgba(107, 202, 186, 0.25);
}

[data-theme="fnl"] .core {
  background: rgba(28, 66, 32, 0.08);
  border-color: rgba(28, 66, 32, 0.2);
}
[data-theme="fnl"] .core::after {
  background: linear-gradient(90deg, var(--success), var(--accent));
  box-shadow: none;
}
[data-theme="fnl"] .core.hot::after {
  background: linear-gradient(90deg, var(--warning), var(--danger));
}

[data-theme="fnl"] .disk-bar {
  background: rgba(28, 66, 32, 0.08);
}
[data-theme="fnl"] .disk-bar > span {
  background: linear-gradient(90deg, var(--success), var(--accent));
  box-shadow: none;
}

[data-theme="fnl"] .service {
  background: var(--bg-soft);
  border-color: var(--border);
}
[data-theme="fnl"] .service:hover {
  background: var(--card-hover);
  border-color: rgba(28, 66, 32, 0.25);
}
/* Actieve services krijgen de huisstijl-donkergroen, niet mint */
[data-theme="fnl"] .service-state {
  background: rgba(28, 66, 32, 0.1);
  color: #1c4220;
  border-color: rgba(28, 66, 32, 0.35);
}

/* Signatuur-detail: smalle donkergroene strip links van elke card */
[data-theme="fnl"] .card {
  border-left: 3px solid rgba(28, 66, 32, 0.18);
}
[data-theme="fnl"] .card:hover {
  border-left-color: var(--accent);
}

/* Groene selectie-highlight — klein branding-detail */
[data-theme="fnl"] ::selection {
  background: rgba(28, 66, 32, 0.22);
  color: #0f2a12;
}
[data-theme="fnl"] .service-state.inactive,
[data-theme="fnl"] .service-state.failed,
[data-theme="fnl"] .service-state.dead {
  background: rgba(239, 127, 60, 0.15);
  color: #a04712;
  border-color: rgba(239, 127, 60, 0.45);
}
[data-theme="fnl"] .service-state.activating,
[data-theme="fnl"] .service-state.deactivating {
  background: rgba(255, 191, 63, 0.18);
  color: #8a5a00;
  border-color: rgba(255, 191, 63, 0.5);
}

[data-theme="fnl"] .login-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(28, 66, 32, 0.25);
}
[data-theme="fnl"] .login-card h1 {
  background: none;
  color: var(--accent);
  -webkit-background-clip: initial;
  font-family: var(--font-display);
  font-weight: 900;
}
[data-theme="fnl"] .login-card input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl"] .login-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28, 66, 32, 0.15);
}
[data-theme="fnl"] .login-card button {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 24px -8px rgba(28, 66, 32, 0.5);
}
[data-theme="fnl"] .login-card button:hover {
  background: #255831;
  box-shadow: 0 12px 32px -8px rgba(28, 66, 32, 0.65);
}

[data-theme="fnl"] button.ghost {
  border-color: rgba(28, 66, 32, 0.25);
  color: var(--accent);
}
[data-theme="fnl"] button.ghost:hover {
  background: rgba(28, 66, 32, 0.06);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="fnl"] .refresh-ctrl select {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="fnl"] .proc-table th {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
}
[data-theme="fnl"] .proc-table tbody tr:hover {
  background: rgba(28, 66, 32, 0.04);
}
[data-theme="fnl"] .proc-table td,
[data-theme="fnl"] .proc-table th {
  border-bottom-color: var(--border-soft);
}

[data-theme="fnl"] .meta { color: var(--text-muted); }

[data-theme="fnl"] .alert {
  background: rgba(239, 127, 60, 0.1);
  border-color: rgba(239, 127, 60, 0.4);
  color: #a04712;
}

[data-theme="fnl"] .toast {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(28, 66, 32, 0.18);
}
[data-theme="fnl"] .toast.success {
  background: rgba(107, 202, 186, 0.18);
  color: #196358;
  border-color: rgba(107, 202, 186, 0.5);
}
[data-theme="fnl"] .toast.error {
  background: rgba(239, 127, 60, 0.15);
  color: #a04712;
  border-color: rgba(239, 127, 60, 0.45);
}

[data-theme="fnl"] .modal {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="fnl"] .modal-body {
  background: #f8f6ef;
  color: var(--text);
}

[data-theme="fnl"] #alert-badge {
  background: rgba(239, 127, 60, 0.2);
  color: #a04712;
  border-color: rgba(239, 127, 60, 0.5);
}

[data-theme="fnl"] .card.alert-pulse,
[data-theme="fnl"] .service.alert-pulse {
  border-color: rgba(239, 127, 60, 0.6) !important;
  box-shadow: var(--shadow), 0 0 16px rgba(239, 127, 60, 0.2);
}
[data-theme="fnl"] @keyframes card-pulse {
  0%, 100% { border-color: rgba(239, 127, 60, 0.6); box-shadow: var(--shadow), 0 0 16px rgba(239, 127, 60, 0.2); }
  50%      { border-color: rgba(239, 127, 60, 0.25); box-shadow: var(--shadow), 0 0 4px rgba(239, 127, 60, 0.1); }
}

[data-theme="fnl"] .service-actions button {
  background: transparent;
  color: var(--accent);
}
[data-theme="fnl"] .service-actions button:hover {
  background: rgba(28, 66, 32, 0.08);
}

[data-theme="fnl"] .history-title {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
}

[data-theme="fnl"] .chart-wrap {
  background: rgba(28, 66, 32, 0.015);
  border-radius: var(--radius-sm);
}

[data-theme="fnl"] .ep-tile {
  background: var(--bg-soft);
  border-color: var(--border);
}
[data-theme="fnl"] .ep-tile:hover { border-color: rgba(28, 66, 32, 0.25); }

[data-theme="fnl"] .cert-row {
  border-bottom-color: var(--border-soft);
}

[data-theme="fnl"] .kv-rows > div {
  border-bottom-color: var(--border-soft);
}

[data-theme="fnl"] .alerts-sum .mono.big {
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   F&L DONKER — huisstijl-groen als primaire achtergrond.
   Activeer via [data-theme="fnl-dark"] op <html>.
   Accent: sunflower yellow (#FFBF3F) pops tegen het diepe groen.
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="fnl-dark"] {
  --bg:            #1c4220;          /* huisstijl donkergroen als body */
  --bg-soft:       #225028;
  --card:          #2a5c31;          /* duidelijk lichter dan body */
  --card-hover:    #326b3a;
  --border:        #417c4a;
  --border-soft:   #335f3a;
  --border-bright: #86efac;
  --text:          #f5fcf2;
  --text-muted:    #c9e0cd;
  --text-dim:      #9fbca5;
  --accent:        #ffbf3f;    /* sunflower — primaire pop */
  --accent-cool:   #6bcaba;    /* mint */
  --success:       #6bcaba;
  --warning:       #ffbf3f;
  --danger:        #ef7f3c;
  --special:       #8e3a80;
  --radius:        6px;
  --radius-sm:     3px;
  --shadow:        0 1px 0 rgba(255,255,255,0.04) inset,
                   0 18px 44px rgba(0, 0, 0, 0.55),
                   0 2px 8px rgba(0, 0, 0, 0.3);
  --font-display:  'Mulish', 'Inter Tight', system-ui, sans-serif;
  --font-sans:     'Mulish', 'Inter Tight', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'JetBrains Mono', monospace;
  --grid:          60px;
}

[data-theme="fnl-dark"] body {
  background:
    radial-gradient(1000px 560px at 18% -12%, rgba(255, 191, 63, 0.09), transparent 55%),
    radial-gradient(900px 560px at 85% -12%, rgba(107, 202, 186, 0.07), transparent 55%),
    linear-gradient(rgba(47, 91, 55, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 91, 55, 0.22) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, var(--grid) var(--grid), var(--grid) var(--grid), auto;
  color: var(--text);
}
[data-theme="fnl-dark"] body::before { display: none; }

[data-theme="fnl-dark"] .card {
  background:
    linear-gradient(145deg, rgba(255, 191, 63, 0.03), transparent 50%),
    linear-gradient(315deg, rgba(107, 202, 186, 0.02), transparent 55%),
    var(--card);
}

/* Topbar in F&L donker — nóg donkerder groen voor separatie */
[data-theme="fnl-dark"] .topbar {
  background: rgba(8, 26, 13, 0.9);
  border-bottom: 1px solid rgba(255, 191, 63, 0.18);
  color: #ffffff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="fnl-dark"] .topbar::before {
  background: linear-gradient(90deg, transparent, #ffbf3f 30%, #ffbf3f 70%, transparent);
  opacity: 0.6;
  height: 2px;
}
[data-theme="fnl-dark"] .topbar::after {
  content: 'F&L POWERRENTAL';
  color: rgba(255, 191, 63, 0.14);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.35em;
}
[data-theme="fnl-dark"] .topbar strong {
  font-family: var(--font-display);
  font-weight: 900;
  color: #ffffff;
}
[data-theme="fnl-dark"] .topbar .muted,
[data-theme="fnl-dark"] .topbar .mono.muted,
[data-theme="fnl-dark"] .refresh-ctrl label {
  color: rgba(255, 255, 255, 0.65);
}
[data-theme="fnl-dark"] .topbar .mono:not(.muted) { color: #ffffff; }
[data-theme="fnl-dark"] .topbar .status-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(107, 202, 186, 0.25);
}
[data-theme="fnl-dark"] .topbar button.ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
[data-theme="fnl-dark"] .topbar button.ghost:hover {
  background: rgba(255, 191, 63, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="fnl-dark"] .refresh-ctrl select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
[data-theme="fnl-dark"] #alert-badge {
  background: rgba(239, 127, 60, 0.25);
  color: #ffd0b0;
  border-color: rgba(255, 191, 63, 0.55);
}

/* Logo: wit op donkergroen (huisstijl "wit op groen" variant) */
[data-theme="fnl-dark"] .logo-fnl .shape    { fill: #ffffff; }
[data-theme="fnl-dark"] .logo-fnl .letter   { fill: #0c2410; }
[data-theme="fnl-dark"] .logo-fnl .wordmark { fill: #ffffff; }

/* Big numbers: sunflower accent */
[data-theme="fnl-dark"] .big {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent);
}

[data-theme="fnl-dark"] .card {
  background:
    linear-gradient(145deg, rgba(255, 191, 63, 0.02), transparent 45%),
    linear-gradient(315deg, rgba(107, 202, 186, 0.015), transparent 50%),
    var(--card);
  border-left: 3px solid rgba(255, 191, 63, 0.18);
}
[data-theme="fnl-dark"] .card:hover {
  border-color: rgba(255, 191, 63, 0.45);
  border-left-color: var(--accent);
}
[data-theme="fnl-dark"] .card::before,
[data-theme="fnl-dark"] .card::after {
  border-color: var(--accent);
  opacity: 0.55;
}
[data-theme="fnl-dark"] .card-head {
  border-bottom: 1px dashed rgba(107, 202, 186, 0.2);
}
[data-theme="fnl-dark"] .card-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--success);
  padding-left: 18px;
}
[data-theme="fnl-dark"] .card-head h2::before {
  background: var(--accent);
  width: 10px;
  height: 3px;
  box-shadow: 0 0 8px rgba(255, 191, 63, 0.6);
}

[data-theme="fnl-dark"] .core {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(107, 202, 186, 0.3);
}
[data-theme="fnl-dark"] .core::after {
  background: linear-gradient(90deg, var(--success), var(--accent));
  box-shadow: 0 0 6px rgba(255, 191, 63, 0.4);
}
[data-theme="fnl-dark"] .core.hot::after {
  background: linear-gradient(90deg, var(--accent), var(--danger));
}

[data-theme="fnl-dark"] .disk-bar {
  background: rgba(107, 202, 186, 0.1);
}
[data-theme="fnl-dark"] .disk-bar > span {
  background: linear-gradient(90deg, var(--success), var(--accent));
  box-shadow: 0 0 12px rgba(255, 191, 63, 0.35);
}

[data-theme="fnl-dark"] .service {
  background: rgba(8, 26, 13, 0.5);
  border-color: var(--border);
}
[data-theme="fnl-dark"] .service:hover {
  background: rgba(28, 66, 32, 0.55);
  border-color: rgba(255, 191, 63, 0.4);
}
[data-theme="fnl-dark"] .service-state {
  background: rgba(107, 202, 186, 0.18);
  color: #a8e5d8;
  border-color: rgba(107, 202, 186, 0.45);
}
[data-theme="fnl-dark"] .service-state.inactive,
[data-theme="fnl-dark"] .service-state.failed,
[data-theme="fnl-dark"] .service-state.dead {
  background: rgba(239, 127, 60, 0.2);
  color: #ffd0b0;
  border-color: rgba(239, 127, 60, 0.5);
}
[data-theme="fnl-dark"] .service-state.activating {
  background: rgba(255, 191, 63, 0.2);
  color: #ffe4a0;
  border-color: rgba(255, 191, 63, 0.5);
}

[data-theme="fnl-dark"] .login-shell {
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(255, 191, 63, 0.1), transparent 55%),
    var(--bg);
}
[data-theme="fnl-dark"] .login-card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
[data-theme="fnl-dark"] .login-card h1 {
  background: none;
  color: #ffffff;
  -webkit-background-clip: initial;
  font-family: var(--font-display);
  font-weight: 900;
}
[data-theme="fnl-dark"] .login-card input {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl-dark"] .login-card input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 191, 63, 0.2);
}
[data-theme="fnl-dark"] .login-card button {
  background: var(--accent);
  color: #0c2410;
  box-shadow: 0 8px 28px -6px rgba(255, 191, 63, 0.5);
}
[data-theme="fnl-dark"] .login-card button:hover {
  background: #fed37a;
  box-shadow: 0 14px 32px -6px rgba(255, 191, 63, 0.65);
}

[data-theme="fnl-dark"] button.ghost {
  border-color: rgba(107, 202, 186, 0.3);
  color: var(--success);
}
[data-theme="fnl-dark"] button.ghost:hover {
  background: rgba(255, 191, 63, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="fnl-dark"] .proc-table th {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
}
[data-theme="fnl-dark"] .proc-table tbody tr:hover {
  background: rgba(255, 191, 63, 0.06);
}

[data-theme="fnl-dark"] .meta { color: var(--text-muted); }

[data-theme="fnl-dark"] .history-title {
  color: var(--success);
  font-family: var(--font-display);
  font-weight: 800;
}

[data-theme="fnl-dark"] .toast {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
[data-theme="fnl-dark"] .toast.success {
  background: rgba(107, 202, 186, 0.14);
  color: #a8e5d8;
  border-color: rgba(107, 202, 186, 0.45);
}
[data-theme="fnl-dark"] .toast.error {
  background: rgba(239, 127, 60, 0.15);
  color: #ffd0b0;
  border-color: rgba(239, 127, 60, 0.5);
}

[data-theme="fnl-dark"] .alerts-sum .mono.big { color: var(--accent); }

[data-theme="fnl-dark"] ::selection {
  background: rgba(255, 191, 63, 0.3);
  color: #ffffff;
}

[data-theme="fnl-dark"] .modal {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="fnl-dark"] .modal-body {
  background: #0a1f0e;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
   FEATURE STYLES — Features 1-9
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Feature 1: Live log tail ──────────────────────────────────────────── */
.logs-modal-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--danger);
  letter-spacing: 0.08em;
  animation: pulse 1.2s ease-in-out infinite;
}
.logs-pre {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Feature 2: Audit log ──────────────────────────────────────────────── */
.audit-ok {
  color: var(--success);
  font-weight: 700;
  font-size: 13px;
}
.audit-fail {
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
}

/* ── Feature 3: Service search ─────────────────────────────────────────── */
.services-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.service-search-input {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  width: 160px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.service-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
}
.service-search-input::placeholder { color: var(--text-dim); }

kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--bg-soft);
  color: var(--text-muted);
}

/* ── Feature 4: Scheduler ──────────────────────────────────────────────── */
.scheduler-add {
  margin-bottom: 10px;
}
.scheduler-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.sched-input {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  transition: border-color 0.15s;
}
.sched-input:focus { outline: none; border-color: var(--accent); }
.sched-btn-add {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.sched-btn-add:hover {
  background: rgba(56, 189, 248, 0.1);
}
.sched-toggle-btn {
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sched-toggle-btn.active {
  background: rgba(134, 239, 172, 0.12);
  border-color: var(--success);
  color: var(--success);
}
.sched-del-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 13px;
  transition: color 0.15s;
}
.sched-del-btn:hover { color: var(--danger); }

/* ── Feature 5: Disk forecast ──────────────────────────────────────────── */
.disk-forecast {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
}
.forecast-ok {
  color: var(--text-dim);
  background: transparent;
}
.forecast-warn {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.forecast-danger {
  color: var(--danger);
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

/* ── Feature 6: Notes ──────────────────────────────────────────────────── */
.service-note {
  margin-top: 8px;
  border-top: 1px dashed var(--border-soft);
  padding-top: 6px;
}
.note-view {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 3px 4px;
  transition: background 0.15s;
}
.note-view:hover { background: rgba(255, 255, 255, 0.04); }
.note-icon {
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1.5;
}
.note-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.note-placeholder {
  color: var(--text-dim);
  font-style: italic;
}
.note-del-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.5;
  flex-shrink: 0;
  transition: color 0.15s;
}
.note-del-btn:hover { color: var(--danger); }
.note-edit-area {
  margin-top: 4px;
}
.note-textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  resize: vertical;
  min-height: 44px;
  transition: border-color 0.15s;
}
.note-textarea:focus { outline: none; border-color: var(--accent); }
.note-edit-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.note-save-btn,
.note-cancel-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.note-save-btn { border-color: var(--success); color: var(--success); }
.note-save-btn:hover { background: rgba(134, 239, 172, 0.1); }
.note-cancel-btn:hover { border-color: var(--text-muted); color: var(--text); }
.note-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* ── Feature 7: Process tree ───────────────────────────────────────────── */
.service-extras-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.tree-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 10px;
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.15s;
}
.tree-toggle-btn:hover { color: var(--text-muted); }
.tree-node {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-muted);
  cursor: default;
}
.tree-node:hover { color: var(--text); }
.tree-pid { font-size: 10px; }
.tree-cpu { color: var(--accent); }
.tree-rss { color: var(--accent-cool); }

/* ── Feature 8: PostgreSQL ─────────────────────────────────────────────── */
.postgres-error {
  padding: 12px 0;
  font-size: 12px;
}
.postgres-version {
  padding: 4px 0;
}
.postgres-section {
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 10px;
}
.postgres-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.postgres-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.postgres-conn-big {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 8px;
}
.postgres-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.postgres-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.postgres-bar-row > .muted {
  font-family: var(--font-mono);
  font-size: 10px;
  width: 46px;
  flex-shrink: 0;
}
.postgres-bar-row > .mono {
  font-size: 10px;
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}
.postgres-bar {
  flex: 1;
  height: 6px;
  background: var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
}
.postgres-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── fnl theme tweaks for new features ─────────────────────────────────── */
[data-theme="fnl"] .service-search-input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl"] .service-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(28, 66, 32, 0.1);
}
[data-theme="fnl"] .sched-input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl"] .sched-btn-add {
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="fnl"] .note-view:hover {
  background: rgba(28, 66, 32, 0.04);
}
[data-theme="fnl"] .note-textarea {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl"] .note-textarea:focus { border-color: var(--accent); }
[data-theme="fnl"] .tree-cpu { color: var(--accent); }
[data-theme="fnl"] .tree-rss { color: var(--accent-cool); }
[data-theme="fnl"] kbd {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text-muted);
}

/* ── fnl-dark theme tweaks for new features ─────────────────────────────── */
[data-theme="fnl-dark"] .service-search-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl-dark"] .service-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 191, 63, 0.15);
}
[data-theme="fnl-dark"] .sched-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl-dark"] .sched-btn-add {
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="fnl-dark"] .sched-btn-add:hover {
  background: rgba(255, 191, 63, 0.1);
}
[data-theme="fnl-dark"] .note-textarea {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl-dark"] .note-textarea:focus { border-color: var(--accent); }
[data-theme="fnl-dark"] .tree-cpu { color: var(--accent); }
[data-theme="fnl-dark"] .tree-rss { color: var(--success); }
[data-theme="fnl-dark"] kbd {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="fnl-dark"] .sched-toggle-btn.active {
  background: rgba(107, 202, 186, 0.15);
  border-color: var(--success);
  color: var(--success);
}

/* ── col-8 grid span ───────────────────────────────────────────────────── */
.col-8 { grid-column: span 8; }
@media (max-width: 1100px) { .col-8 { grid-column: span 12; } }

/* ── New Feature styles ─────────────────────────────────────────────────── */

/* Feature: Incidents */
.inc-row.inc-expandable:hover { background: var(--bg-soft); }
.inc-detail-rows td { padding: 0; }

/* Feature: Systemd timers — uses proc-table directly */

/* Feature: Config card */
.config-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-soft);
}
.config-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.config-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.config-thresholds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.config-field input {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: border-color 0.15s;
}
.config-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.config-textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s;
  line-height: 1.6;
}
.config-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.config-endpoints-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.config-endpoint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.config-endpoint-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}
.config-user-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
/* Backup-monitors: vier velden + knop, mag over twee regels breken */
.config-backup-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}

/* Feature: Log search */
.logsearch-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.logsearch-input {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  flex: 1;
  min-width: 200px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.logsearch-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.1);
}
.logsearch-input::placeholder { color: var(--text-dim); }
.logsearch-spinner {
  color: var(--text-muted);
  font-size: 14px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.logsearch-line {
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-all;
  white-space: pre-wrap;
  color: var(--text-muted);
}
.logsearch-line mark {
  background: rgba(253, 224, 71, 0.25);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 1px;
}
.logsearch-empty {
  font-style: italic;
}

/* Feature: History compare */
.history-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.compare-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.compare-label input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* Feature: 2FA enroll area */
#twofa-enroll-area img {
  image-rendering: pixelated;
}

/* ── Theme tweaks for new features ─────────────────────────────────────── */
[data-theme="fnl"] .config-field input,
[data-theme="fnl"] .config-textarea {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl"] .config-field input:focus,
[data-theme="fnl"] .config-textarea:focus { border-color: var(--accent); }
[data-theme="fnl"] .config-endpoint-row { background: var(--bg); border-color: var(--border); }
[data-theme="fnl"] .logsearch-input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl"] .logsearch-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(28,66,32,0.1); }
[data-theme="fnl"] .logsearch-line mark { background: rgba(28,66,32,0.15); color: var(--accent); }

[data-theme="fnl-dark"] .config-field input,
[data-theme="fnl-dark"] .config-textarea {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl-dark"] .config-field input:focus,
[data-theme="fnl-dark"] .config-textarea:focus { border-color: var(--accent); }
[data-theme="fnl-dark"] .config-endpoint-row { background: rgba(0,0,0,0.2); border-color: var(--border); }
[data-theme="fnl-dark"] .logsearch-input {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="fnl-dark"] .logsearch-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,191,63,0.15); }
[data-theme="fnl-dark"] .logsearch-line mark { background: rgba(255,191,63,0.2); color: var(--accent); }

/* ── Export controls ───────────────────────────────────────────────────── */
.export-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.export-ctrl button.ghost {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font-sans);
}
.export-ctrl button.ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Generieke paneel-exportknop (CSV) in card-headers ───────────────────── */
.panel-export-btn.ghost {
  font-size: 11px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font-sans);
  margin-left: auto;
}
.panel-export-btn.ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Cron-paneel heeft twee exportknoppen (CSV + TXT) naast elkaar; groepeer ze
   zodat de auto-margin van .panel-export-btn niet ook een gat tussen de
   twee knoppen zelf creëert. */
.cron-export-group {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.cron-export-group .panel-export-btn.ghost {
  margin-left: 0;
}

/* ── History controls row alignment ────────────────────────────────────── */
.history-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .history-controls-row { gap: 8px; }
  .export-ctrl { width: 100%; }
}

/* ── Mobile responsive improvements ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Topbar: stack vertically on small screens */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 14px;
    gap: 8px;
  }
  .topbar-left, .topbar-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-right {
    justify-content: flex-start;
  }
  /* Service actions wrap nicely */
  .service-actions {
    flex-wrap: wrap;
  }
  /* Service meta as 1-col on tiny screens */
  .service-meta {
    grid-template-columns: 1fr;
  }
  /* Process tables scroll horizontally */
  .proc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Disk row stacking */
  .disk {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .disk-meta { text-align: left; }
  /* Card-stack becomes normal stacking */
  .card-stack { flex-direction: column; }
  /* Load row 2-col on small */
  .load-row { grid-template-columns: repeat(2, 1fr); }
  /* Hide verbose topbar text */
  .refresh-ctrl label { display: none; }
  /* Cards hebben minder padding */
  .card { padding: 14px 14px 12px; }
  /* History grid single column */
  .history-grid { grid-template-columns: 1fr; }
  .history-item-wide { grid-column: auto; }
  /* Config fields full width */
  .config-thresholds-grid { grid-template-columns: repeat(2, 1fr); }
  /* Scheduler row wraps */
  .scheduler-add-row { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 480px) {
  .grid { padding: 8px; gap: 8px; }
  .topbar strong { font-size: 14px; }
  .big { font-size: 22px; }
  .services { grid-template-columns: 1fr !important; }
  .config-thresholds-grid { grid-template-columns: 1fr; }
}

/* Klikbare kolomheaders (historische processen-tabel, task #4) */
.proc-table th.sortable { cursor: pointer; user-select: none; }
.proc-table th.sortable:hover { color: var(--accent, #4aa3ff); }
/* Richting-afhankelijke indicator: ▼ bij DESC (standaard), ▲ bij ASC */
.proc-table th.sortable.active::after { content: ' \25BC'; opacity: 0.7; }
.proc-table th.sortable.active[data-sort-dir="asc"]::after { content: ' \25B2'; opacity: 0.7; }

/* Herkomst-badges (task #5) */
.proc-badges { white-space: nowrap; }
.proc-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 3px;
  vertical-align: middle;
  line-height: 1.5;
}
.proc-badge.cpu {
  background: rgba(253, 224, 71, 0.18);
  color: var(--accent, #fde047);
  border: 1px solid rgba(253, 224, 71, 0.35);
}
.proc-badge.rss {
  background: rgba(103, 232, 249, 0.15);
  color: var(--accent-cool, #67e8f9);
  border: 1px solid rgba(103, 232, 249, 0.30);
}

/* Sparkline cel (task #6) */
.proc-spark { padding: 4px 6px !important; vertical-align: middle; }

/* Geheugen-leak kaart */
.leaks-body { display: flex; flex-direction: column; gap: 10px; }
.leak-row {
  display: grid; grid-template-columns: 1fr 90px auto; align-items: center;
  gap: 12px; padding: 8px 10px; border-radius: 8px;
  background: var(--card-alt, rgba(255,90,90,0.06));
  border-left: 3px solid #e0533b;
}
.leak-name { font-weight: 600; }
.leak-conf { font-size: 10px; padding: 1px 6px; border-radius: 6px; margin-left: 6px; opacity: 0.8; }
.leak-conf.high { background: rgba(224,83,59,0.25); }
.leak-conf.low { background: rgba(128,128,128,0.2); }
.leak-spark { color: #e0533b; }
.leak-stats { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; }
.leak-slope { color: #e0533b; font-weight: 600; }

/* ── Toegankelijkheid (a11y) ─────────────────────────────────────────────── */

/* Visueel verborgen, wel leesbaar voor screenreaders. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link: verborgen tot toetsenbord-focus, springt dan in beeld. */
.skip-link {
  position: absolute;
  left: 8px; top: -48px;
  z-index: 1000;
  background: var(--accent);
  color: var(--bg);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* Duidelijke focus-ring voor toetsenbordnavigatie (muis-klik blijft schoon). */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-cool);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Respecteer 'beperk beweging' — schakel niet-essentiële transities/animaties uit. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Grafiek-hulpelementen
   ══════════════════════════════════════════════════════════════════════════ */

/* Tijdreferentie onder de live-sparklines.  De sparklines tonen 60 samples;
   met een ververs-interval van 1/2/5/10 s is dat 1, 2, 5 of 10 minuten -- de
   grafiek zelf laat dat verschil niet zien, dit label wel. */
.spark-range {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-muted);
}

/* Gekleurde indicator bij de "Lezen"/"Schrijven"-labels van de schijf-I/O-kaart,
   zodat de twee lijnen in de grafiek herkenbaar zijn zonder legenda.  De kleur
   wordt in JS gezet vanuit dezelfde thema-tokens als de lijnen. */
.io-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: baseline;
  background: currentColor;
}

/* Fallback als ECharts niet geladen kon worden: de rest van het dashboard
   (tabellen, knoppen, polling) werkt gewoon door, alleen de grafiekvlakken
   krijgen een melding.  Werkt ook voor .chart-wrap's die pas later worden
   aangemaakt (servicekaarten). */
.no-charts .chart-wrap {
  position: relative;
  min-height: 40px;
}
.no-charts .chart-wrap::after {
  content: 'grafiek niet beschikbaar';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--border-soft);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Uitleg bij de historiegrafieken: de spreidingsband en de onderbrekingen zijn
   niet vanzelfsprekend en krijgen geen eigen legenda-item (dat zou de legenda
   van de samengevoegde netwerk-/schijfgrafiek vervuilen). */
.history-legend-note {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.5;
  max-width: 78ch;
  color: var(--text-muted);
}

/* ── Alleen-lezen rol (viewer) ─────────────────────────────────────────────
   De server zet data-readonly op <body> voor een niet-admin.  Alles wat een
   mutatie start krijgt data-admin-only en verdwijnt dan uit beeld — ook de
   knoppen die de JS pas tijdens het pollen aanmaakt (servicekaarten,
   scheduler-rijen), want dit is één CSS-regel en geen eenmalige JS-actie.
   Een zichtbare knop die altijd 403 geeft is slechter dan geen knop.
   Dit is presentatie, geen beveiliging: die zit in _write_gate (app.py). */
body[data-readonly] [data-admin-only] {
  display: none !important;
}

/* Uitleg waaróm er knoppen ontbreken; zonder dit lijkt het dashboard kapot. */
.readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--border-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Zonder schrijfrechten klapt het notitieblok niet open; dan hoort het ook
   niet klikbaar te ogen. */
body[data-readonly] .note-view { cursor: default; }
body[data-readonly] .note-view:hover { background: none; }