/* Dark-Theme-Tokens für Inua/inuk.
   Handgeschriebenes CSS, kein Tailwind-Build noetig (siehe
   Session-Erkenntnis: neue Tailwind-Utility-Klassen landen nicht
   automatisch in der eingecheckten app.css). Nur data-app="inuk" reagiert
   auf data-theme="dark" - andere Apps bleiben immer bei den Light-Werten. */

:root {
  --ink: #374151;
  --ink-muted: #6b7280;
  --ink-faint: #9ca3af;
  --ink-heading: #111827;

  --surface: #ffffff;
  --surface-alt: #F7FAFC;
  --page-bg: #F7F8FA;
  --page-dot: rgba(142, 141, 145, 0.6);
  --sidebar-bg: rgba(243, 244, 246, 0.65);

  --border: #d1d5db;
  --border-soft: #f3f4f6;
  --border-softer: #f9fafb;

  --brand-header: #004C6C;
  --brand-header-text: #F6F3EA;
  --brand-accent: #cccd00;

  --status-passed-bg: #C6F6D5;
  --status-passed-text: #16a34a;
  --status-failed-bg: #FED7D7;
  --status-failed-text: #dc2626;
  --status-skipped-bg: #FAF089;
  --status-skipped-text: #ca8a04;
  --status-blocked-bg: #FCD9B8;
  --status-blocked-text: #ea580c;
  --status-total-bg: #E2E8F0;
  --status-total-text: #1f2937;
  --status-info-bg: #DBEAFE;
  --status-info-text: #2563eb;

  --link: #1d4ed8;
}

html[data-app="inuk"][data-theme="dark"] {
  --ink: #e5e7eb;
  --ink-muted: #9ca3af;
  --ink-faint: #6b7280;
  --ink-heading: #f3f4f6;

  --surface: #1e2126;
  --surface-alt: #262a31;
  --page-bg: #14161a;
  --page-dot: rgba(255, 255, 255, 0.08);
  --sidebar-bg: rgba(38, 42, 49, 0.65);

  --border: #3a3f47;
  --border-soft: #2a2e35;
  --border-softer: #262a31;

  --brand-header: #00344a;
  --brand-header-text: #F6F3EA;
  --brand-accent: #cccd00;

  --status-passed-bg: #14311f;
  --status-passed-text: #4ade80;
  --status-failed-bg: #3a1a1a;
  --status-failed-text: #f87171;
  --status-skipped-bg: #3a2f10;
  --status-skipped-text: #facc15;
  --status-blocked-bg: #3a2410;
  --status-blocked-text: #fb923c;
  --status-total-bg: #262a31;
  --status-total-text: #d1d5db;
  --status-info-bg: #1e2f4d;
  --status-info-text: #60a5fa;

  --link: #60a5fa;
}

/* Theme-Toggle im Header */
.theme-toggle {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  overflow: hidden;
}
.theme-toggle button {
  background: transparent;
  color: #fff;
  border: none;
  padding: 2px 8px;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.5;
}
.theme-toggle button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.theme-toggle button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.25);
  font-weight: 700;
}

/* Generisches Auffangnetz fuer Formularfelder ohne eigenes Dark-Styling
   (z.B. Django-ModelForm-Widgets aus forms.py, die keine Template-Kontrolle
   pro Feld erlauben) - greift nur innerhalb von inuk im Dark-Theme. */
html[data-app="inuk"][data-theme="dark"] input[type="text"],
html[data-app="inuk"][data-theme="dark"] input[type="email"],
html[data-app="inuk"][data-theme="dark"] input[type="url"],
html[data-app="inuk"][data-theme="dark"] input[type="password"],
html[data-app="inuk"][data-theme="dark"] input[type="datetime-local"],
html[data-app="inuk"][data-theme="dark"] input[type="search"],
html[data-app="inuk"][data-theme="dark"] textarea,
html[data-app="inuk"][data-theme="dark"] select {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  color-scheme: dark;
}

/* Globale .btn-* Klassen (frontend/input.css) sind App-weit geteilt und
   nutzen feste helle Hex-Farben, die im inuk-Dark-Theme falsch aussehen
   (heller Button auf dunklem Grund). Ueberschreibung nur fuer inuk/dark,
   andere Apps bleiben unberuehrt. */
html[data-app="inuk"][data-theme="dark"] .btn-secondary {
  background-color: var(--surface-alt);
  color: var(--ink);
}
html[data-app="inuk"][data-theme="dark"] .btn-secondary:hover {
  background-color: var(--border);
}
html[data-app="inuk"][data-theme="dark"] .btn-ghost {
  background-color: var(--surface-alt);
  color: var(--ink);
}
html[data-app="inuk"][data-theme="dark"] .btn-ghost:hover {
  background-color: var(--border);
}

/* Generisches Auffangnetz fuer verbliebene Standard-Tailwind-Klassen
   (Grautoene/Weiss), die nicht auf Inline-var()-Styles umgestellt wurden -
   z.B. Dropdown-Menues im gemeinsamen Header (base.html), die auch auf
   inuk-Seiten erscheinen. Nur inuk/dark, andere Apps unberuehrt. Inline
   Styles auf einzelnen Elementen haben ohnehin Vorrang vor Klassen. */
html[data-app="inuk"][data-theme="dark"] .bg-white { background-color: var(--surface); }
html[data-app="inuk"][data-theme="dark"] .bg-gray-50 { background-color: var(--surface-alt); }
html[data-app="inuk"][data-theme="dark"] .bg-gray-100 { background-color: var(--surface-alt); }
html[data-app="inuk"][data-theme="dark"] .bg-gray-200 { background-color: var(--border); }
html[data-app="inuk"][data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--border-soft); }
html[data-app="inuk"][data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--border); }
html[data-app="inuk"][data-theme="dark"] .text-gray-400 { color: var(--ink-faint); }
html[data-app="inuk"][data-theme="dark"] .text-gray-500 { color: var(--ink-muted); }
html[data-app="inuk"][data-theme="dark"] .text-gray-600 { color: var(--ink-muted); }
html[data-app="inuk"][data-theme="dark"] .text-gray-700 { color: var(--ink); }
html[data-app="inuk"][data-theme="dark"] .text-gray-800 { color: var(--ink-heading); }
html[data-app="inuk"][data-theme="dark"] .text-gray-900 { color: var(--ink-heading); }
html[data-app="inuk"][data-theme="dark"] .border-gray-300 { border-color: var(--border); }
html[data-app="inuk"][data-theme="dark"] .border-gray-500 { border-color: var(--ink-muted); }

/* Vertikale Bereichsmarker (Testbereich-Farbe, admin-konfiguriert per
   Area.frontend_color) sind immer helle Pastelltoene - im Dark-Theme
   gedimmt statt grell auf dunklem Grund. Text bleibt bewusst dunkel
   (nicht themed), da der Balken selbst nach dem Dimmen weiterhin heller
   als die Umgebung bleibt. */
html[data-app="inuk"][data-theme="dark"] .area-bar {
  filter: brightness(0.6) saturate(0.85);
}

/* Tailwind-Utility-Klassen, die die eingecheckte app.css nicht enthaelt
   (nur die Klassen wurden bisher irgendwo in Inua tatsaechlich benutzt -
   siehe Kommentar oben in dieser Datei: kein Live-Build, neue Klassen
   fehlen im vorgebauten CSS). App-uebergreifend, nicht auf inuk/dark
   beschraenkt - betrifft z.B. Progress-Balken/Pillen/Grid-Layouts in
   goals. Vor Einsatz einer neuen Utility-Klasse immer erst pruefen, ob
   sie hier oder in app.css schon existiert. */
.gap-3 { gap: .75rem; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-2 { height: .5rem; }
.items-start { align-items: flex-start; }
.max-h-40 { max-height: 10rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-3 { margin-top: .75rem; }
.overflow-y-auto { overflow-y: auto; }
.p-12 { padding: 3rem; }
.rounded-full { border-radius: 9999px; }
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
.w-12 { width: 3rem; }
.whitespace-pre-line { white-space: pre-line; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }