/* Batch 116: modern dark UI foundation across dashboard pages. */
:root {
  --modern-bg: #070b12;
  --modern-bg-soft: #0b1220;
  --modern-surface: rgba(15, 23, 42, 0.86);
  --modern-surface-2: rgba(17, 24, 39, 0.76);
  --modern-border: rgba(148, 163, 184, 0.16);
  --modern-border-strong: rgba(148, 163, 184, 0.28);
  --modern-text: #e5eefc;
  --modern-muted: #8fa1b8;
  --modern-muted-2: #64748b;
  --modern-accent: #38bdf8;
  --modern-accent-2: #a78bfa;
  --modern-good: #22c55e;
  --modern-bad: #ef4444;
  --modern-warn: #f59e0b;
  --modern-radius: 18px;
  --modern-radius-sm: 12px;
  --modern-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
}

html { color-scheme: dark; }
body {
  background:
    radial-gradient(circle at 20% -10%, rgba(56, 189, 248, 0.14), transparent 28rem),
    radial-gradient(circle at 90% 10%, rgba(167, 139, 250, 0.12), transparent 34rem),
    linear-gradient(180deg, var(--modern-bg) 0%, #080d17 45%, #060912 100%) !important;
  color: var(--modern-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.topbar, .radar-topbar, header.topbar {
  background: rgba(7, 11, 18, 0.72) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: 24px !important;
  margin: 14px auto 18px !important;
  max-width: 1520px;
  box-shadow: var(--modern-shadow);
  backdrop-filter: blur(18px);
}

a, .radar-link { color: #7dd3fc !important; }
a:hover, .radar-link:hover { color: #bae6fd !important; }
button, select, input, textarea {
  border-radius: 12px !important;
  border: 1px solid var(--modern-border) !important;
  background: rgba(15, 23, 42, 0.78) !important;
  color: var(--modern-text) !important;
}
button, .health-btn, .radar-row-action, .radar-controls button, .radar-inspector-actions a {
  background: linear-gradient(180deg, rgba(56,189,248,0.18), rgba(56,189,248,0.08)) !important;
  border-color: rgba(56, 189, 248, 0.24) !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12);
}
button:hover, .health-btn:hover, .radar-row-action:hover {
  border-color: rgba(125, 211, 252, 0.55) !important;
  transform: translateY(-1px);
}

.card, .panel, .health-section, .radar-controls, .radar-card, .radar-workspace-summary,
.radar-events-panel, .radar-table-wrap, .radar-inspector, .data-table, .health-card,
section[class*="panel"], article[class*="card"] {
  background: var(--modern-surface) !important;
  border: 1px solid var(--modern-border) !important;
  border-radius: var(--modern-radius) !important;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

.radar-controls {
  max-width: 1520px;
  margin-inline: auto;
  gap: 12px !important;
  padding: 14px !important;
}
.radar-controls label span, .health-muted, .radar-muted-text, .radar-sub, .radar-z-sub {
  color: var(--modern-muted) !important;
}
.radar-cards, .radar-workspace-summary, .radar-events-panel, .radar-table-wrap {
  max-width: 1520px;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  padding: 12px 0;
}
.radar-cards { gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  padding: 12px 0;
}
.radar-card {
  padding: 16px 18px !important;
  min-height: 76px;
}
.radar-card span { color: var(--modern-muted) !important; text-transform: uppercase; letter-spacing: .055em; font-size: 11px !important; }
.radar-card strong { font-size: 22px !important; }

.radar-table-wrap table, .data-table, table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
th {
  background: rgba(15, 23, 42, 0.94) !important;
  color: #aebdd1 !important;
  border-bottom: 1px solid var(--modern-border-strong) !important;
}
td { border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important; }
tr:hover td { background: rgba(56, 189, 248, 0.045) !important; }

.radar-pill, .health-status {
  border-radius: 999px !important;
  border: 1px solid var(--modern-border) !important;
  background: rgba(15, 23, 42, 0.72) !important;
}
.radar-pill-high, .status-ok { border-color: rgba(34,197,94,.42) !important; color: #86efac !important; }
.radar-pill-low, .status-dead, .status-critical { border-color: rgba(239,68,68,.42) !important; color: #fca5a5 !important; }
.radar-warn, .status-warn, .status-stale { color: #fbbf24 !important; }
.radar-pos { color: #86efac !important; }
.radar-neg { color: #fca5a5 !important; }

.radar-inspector {
  border-left: 1px solid rgba(125, 211, 252, 0.22) !important;
}
.radar-inspector-section, .radar-reason-box, .radar-focus-driver, .radar-workspace-bucket,
.radar-inspector-card, .radar-inspector-metrics > div {
  background: rgba(2, 6, 23, 0.38) !important;
  border: 1px solid rgba(148, 163, 184, 0.13) !important;
  border-radius: 14px !important;
}