/* ============================================================================
   DESSERT Operations — Dashboard Design-System (Phase 1)
   ----------------------------------------------------------------------------
   EIN zentrales Theme für alle Seiten (Dashboard + Auth). Optische Vorlage ist
   das bestätigte Mockup (dashboard-mockup-reference.html, 2026-06-21):
   ruhiges dunkles Theme, Sans-serif, weiche Akzente — KEIN Mono/UPPERCASE-Zwang,
   keine LCARS-Ecken, kein Neon-Glow-Overkill. Lesbarkeit zuerst.

   Strategie (unverändert): wir hängen uns an die bestehenden Tailwind-Utility-
   Klassen (.bg-slate-800 = Panel, .bg-slate-900 = Hintergrund, .tab-btn,
   Status-Text-Klassen) und geben ihnen via niedrig-spezifischer Selektoren das
   Mockup-Aussehen. Markup (htmx-SSE, Actions, Auth, Tabs) bleibt unangetastet.

   Status-Farben kommen aus EINER Quelle: theme.css-Tokens hier == STATUS_HEX in
   app/templating.py (server-gerenderte Gauges/Badges).
   ========================================================================== */

:root {
  /* ── Flächen ── */
  --bg:           #05080f;   /* Seiten-Hintergrund (Mockup body) */
  --panel:        #0e1420;   /* Karte / Modul (Mockup card) */
  --panel-2:      #0a0e16;   /* tiefere/äußere Fläche */
  --panel-inset:  #0b101a;   /* Innen-Panels (Backup-Karten etc.) */
  --border:       #1c2533;   /* Standard-Rahmen */
  --border-row:   #141b27;   /* dezente Zeilentrenner in Tabellen */

  /* ── Text ── */
  --text:         #e6ebf2;   /* primär */
  --text-2:       #cdd5e2;   /* Labels / leicht gedimmt */
  --muted:        #7d8aa0;   /* sekundär */
  --faint:        #566173;   /* Achsen / Hilfslabels */
  --stamp:        #8b97ab;   /* Timestamps (mono) */

  /* ── Akzente (Mockup) ── */
  --green:        #22e3a0;
  --cyan:         #22d3ee;
  --purple:       #a78bfa;
  --yellow:       #f0b429;
  --red:          #f0617a;

  /* ── Status (== STATUS_HEX in templating.py) ── */
  --ok:           #22e3a0;
  --warn:         #f0b429;
  --crit:         #f0617a;
  --idle:         #7d8aa0;

  /* Status-Pill-Hintergründe (gedeckt) */
  --ok-bg:        #11341f;
  --crit-bg:      #2a1219;
  --warn-bg:      #2a2310;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Globaler Hintergrund: flaches tiefes Navy (Mockup) ─────────────────────── */
body.bg-slate-900 {
  background-color: var(--bg);
  background-image: none;
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.bg-slate-900 > * { position: relative; z-index: 1; }

/* ── Typografie: klare Sans-Headlines (KEIN UPPERCASE/Glow) ─────────────────── */
h1, h2 {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--text);
  text-shadow: none;
}
h1 { font-weight: 600; }
h2 {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-2);
}

/* ── Panels = Mockup-Karten ─────────────────────────────────────────────────── */
.bg-slate-800 {
  background: var(--panel) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bg-slate-800:hover {
  border-color: #28344a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Panel-Kopfzeile: dezente Trennlinie, kein Akzent-Glyph/Glow. */
.bg-slate-800 > h2:first-child,
.bg-slate-800 > .flex > h2,
.con-panel-head h2 {
  position: relative;
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem !important;
  border-bottom: 1px solid var(--border);
}

/* Innen-Panels (Backup-Karten, Container-Detail) dezenter rahmen. */
.bg-slate-900\/40,
.bg-slate-900\/50,
.bg-slate-900\/60 {
  background: var(--panel-2) !important;
  border-radius: 10px;
}

/* ── Masthead / Header: schlicht mit Bottom-Border (Mockup) ─────────────────── */
header.flex {
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0 0 0.85rem 0;
  background: none;
  box-shadow: none;
  position: relative;
  overflow: visible;
}
header.flex::after { content: none; }
#datetime {
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ── Tabs: ruhige Sans-Buttons, Akzent-Underline im Aktiv-State ─────────────── */
.tab-btn {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.tab-btn:hover {
  background: rgba(34, 211, 238, 0.05);
  color: var(--text-2);
}
/* Aktiv-State: Markup setzt .border-indigo-500 + .text-indigo-400 — wir mappen
   deren Optik auf Cyan, ohne das JS-Toggle anzufassen. */
.tab-btn.border-indigo-500 {
  border-color: var(--cyan) !important;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.08), transparent);
}
.tab-btn.text-indigo-400 {
  color: var(--cyan) !important;
  text-shadow: none;
}
nav.border-b {
  border-bottom-color: var(--border) !important;
}

/* ── Buttons: dezent gerahmt, Sans, semantische Farben erhalten ─────────────── */
button, .block[href], a.block, a[class*="px-3"] {
  font-family: var(--font-sans);
  letter-spacing: 0;
}
button:not(.tab-btn) {
  border: 1px solid var(--border);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 8px;
  transition: border-color .18s ease, background .18s ease, transform .05s ease;
}
button:not(.tab-btn):hover {
  border-color: #2c3a52;
}
button:not(.tab-btn):active { transform: translateY(1px); }
button.text-xs, button[class*="py-0.5"], button[class*="py-1"] {
  text-transform: none;
  letter-spacing: 0;
}
/* Primär-Akzent (Probe-Health etc.): indigo → cyan-Akzent. */
button[class*="indigo"] {
  border-color: rgba(34, 211, 238, 0.35) !important;
}
/* Destruktive Buttons (Failover/Reboot/Stop/Logout) klar rot abgesetzt. */
button[class*="rose"], button[class*="red"] {
  border-color: rgba(240, 97, 122, 0.45) !important;
}
button[class*="rose"]:hover, button[class*="red"]:hover {
  border-color: var(--red) !important;
}

/* Quick-Link / External-Kacheln als ruhige Slots. */
a.block {
  border: 1px solid var(--border);
  border-radius: 8px;
  letter-spacing: 0;
  transition: border-color .18s ease, background .18s ease;
}
a.block:hover {
  border-color: #2c3a52;
  background: rgba(34, 211, 238, 0.04);
}

/* ── Status-LEDs: Mockup-Palette, dezenter Glow ─────────────────────────────── */
.led { box-shadow: 0 0 4px currentColor; }
.led-ok  { background: var(--ok)  !important; box-shadow: 0 0 5px rgba(34, 227, 160, 0.5); }
.led-bad { background: var(--crit) !important; box-shadow: 0 0 5px rgba(240, 97, 122, 0.5); }
.led-na  { background: var(--idle) !important; box-shadow: none; }

/* ● LIVE-Indikator (Stream-Status) dezent pulsieren. */
@keyframes con-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
#stream-status {
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
}
#stream-status.text-emerald-400 { animation: con-pulse 2s ease-in-out infinite; }

/* ── Gauges: bestehende SVG-Balken, dezenter Glow ohne Tick-Overlay ─────────── */
.gauge-svg { filter: none; }
.gauge-svg-bar { filter: drop-shadow(0 0 2px currentColor); }
.gauge > div { box-shadow: none; }

/* ── Status-Text-Klassen → Mockup-Palette (Konsistenz über alle Partials) ───── */
.text-emerald-400, .text-emerald-300 { color: var(--green) !important; }
.text-rose-400, .text-rose-300, .text-red-400 { color: var(--red) !important; }
.text-amber-400, .text-amber-300 { color: var(--yellow) !important; }
.text-slate-400 { color: var(--muted) !important; }
.text-slate-500 { color: var(--faint) !important; }

/* ── Tabellen als Readout (tabular-nums, dezente Trenner) ───────────────────── */
table { font-variant-numeric: tabular-nums; }
table thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--faint) !important;
}
table thead tr.border-b,
table tr.border-b,
table td.border-b,
.border-b { border-color: var(--border) !important; }
table tbody tr { border-color: var(--border-row); }
table tbody tr:hover { background: rgba(34, 211, 238, 0.04); }
#audit > div { padding: 1px 2px; border-radius: 3px; }
#audit > div:nth-child(even) { background: rgba(255, 255, 255, 0.015); }

/* ── Border-Utilities auf Design-Linien mappen (konsistente Trenner) ────────── */
.border-slate-700, .border-slate-700\/50, .border-slate-700\/40,
.border-slate-600 { border-color: var(--border) !important; }

/* Semantisch gerahmte Sonder-Panels (Standby/GDrive/Off-Site) — Akzent ohne Glow. */
.border-amber-700\/40 { border-color: rgba(240, 180, 41, 0.4) !important; }
.border-rose-700      { border-color: rgba(240, 97, 122, 0.5) !important; }
.border-blue-700\/40  { border-color: rgba(34, 211, 238, 0.3) !important; }

/* ── Inputs als ruhige Felder (Auth-Seiten + überall) ───────────────────────── */
input, select, textarea {
  font-family: var(--font-sans);
  letter-spacing: 0;
}
input.bg-slate-900, input[class*="bg-slate-900"] {
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus {
  outline: none;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35) !important;
}

/* ── Toast ──────────────────────────────────────────────────────────────────── */
#toast {
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  border-radius: 10px;
  letter-spacing: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ── code/<code> Blöcke als Mono-Snippets ───────────────────────────────────── */
code { font-family: var(--font-mono); }

/* ── Auth-Seiten: zentrierte Login-Karte (gleiche Karten-Optik) ─────────────── */
body.flex .bg-slate-800 { border-radius: 12px; }

/* ── Reduced-Motion respektieren ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #stream-status.text-emerald-400 { animation: none; }
  .gauge-svg-bar, .gauge > div { transition: none; }
}