/* ===== Light / Default ===== */
:root {
  --bg: #ffffff;
  --fg: #1f2328;
  --muted: #667085;
  --card: #ffffff;
  --border: #e6e8eb;
  --link: #0d6efd;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-border-color: var(--border);
  --bs-link-color: var(--link);
  --bs-card-bg: var(--card);
}

/* ===== Dark ===== */
html[data-theme="dark"] {
  --bg: #0f1419;
  --fg: #e6edf3;
  --muted: #9aa4af;
  --card: #11161c;
  --border: #233043;
  --link: #7bb1ff;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-border-color: var(--border);
  --bs-link-color: var(--link);
  --bs-card-bg: var(--card);
}

/* Karten, Tabellen, Inputs */
html[data-theme="dark"] .card { background: var(--card); }
html[data-theme="dark"] .table { color: var(--fg); }
html[data-theme="dark"] .table thead { background: #0c1116; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #0c1116;
  color: var(--fg);
  border-color: var(--border);
}

/* Navbar & Dropdown */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .dropdown-menu {
  background-color: #0c1116 !important;
  color: var(--fg);
}

/* Alerts & Badges anpassen */
html[data-theme="dark"] .badge.bg-light { 
  background-color: #1d2630 !important; color: var(--fg);
}
html[data-theme="dark"] .alert-light {
  background-color: #141a21; color: var(--fg); border-color: var(--border);
}

/* Scrollbar (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #334155; }

/* --- Grundfarben erzwingen --- */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--bg) !important;  /* macht die ganze Seite dunkel */
  color: var(--fg) !important;              /* Standardtext hell */
}

/* Karten/Modals/Dropdowns */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--card) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

/* Tabellen */
html[data-theme="dark"] .table { color: var(--fg) !important; }
html[data-theme="dark"] .table thead { background: #0c1116 !important; }

/* Inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background-color: #0c1116 !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

/* --- Navbar fixen (Texte/Links sichtbar) --- */
html[data-theme="dark"] .navbar {
  background-color: #0c1116 !important;
  color: var(--fg) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar .dropdown-item {
  color: var(--fg) !important;
}
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link:focus,
html[data-theme="dark"] .navbar .nav-link.active {
  color: #ffffff !important;
}

/* --- Utilities, die sonst „hell“ bleiben würden --- */
html[data-theme="dark"] .bg-light   { background-color: #0f1419 !important; }
html[data-theme="dark"] .text-dark  { color: var(--fg) !important; }
html[data-theme="dark"] .border     { border-color: var(--border) !important; }

/* Alerts & Badges */
html[data-theme="dark"] .alert      { background-color: #0c1116 !important; color: var(--fg) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .badge.bg-light { background-color: #1d2630 !important; color: var(--fg) !important; }

/* Links */
html[data-theme="dark"] a { color: var(--link) !important; }
/* ===== Feinschliff Dark: Header, Tabellen, Footer ===== */

/* 1) Header-Zeile unter dem Logo (war zu blass, meist .text-muted) */
html[data-theme="dark"] header .text-muted {
  color: #b7c4d4 !important;   /* heller als normales muted */
  opacity: 1 !important;
}

/* 2) Tabellen im Card: Zeilen/Border-Kontrast hochziehen */
html[data-theme="dark"] .table {
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .table thead {
  background-color: #0c1116 !important;
  color: var(--fg) !important;
  border-bottom-color: var(--border) !important;
}

html[data-theme="dark"] .table tbody tr {
  background-color: #0f1419 !important;  /* Grundzeile */
  border-color: var(--border) !important;
}

html[data-theme="dark"] .table tbody tr:nth-of-type(odd) {
  background-color: #121820 !important;  /* leichte Streifenoptik */
}

html[data-theme="dark"] .table tbody tr:hover {
  background-color: #18212b !important;  /* Hover */
}

/* Falls du .table-striped nutzt, diese auch absichern */
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #121820 !important;
}

/* 3) Footer-Links und -Text aufhellen */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .site-footer {
  color: #b7c4d4 !important;
}

html[data-theme="dark"] footer a,
html[data-theme="dark"] .footer a {
  color: var(--link) !important;
  text-decoration: none;
}
html[data-theme="dark"] footer a:hover,
html[data-theme="dark"] .footer a:hover {
  text-decoration: underline;
}

/* Sicherheitsnetz: sehr dunkle Texte neutralisieren */
html[data-theme="dark"] .text-dark { color: var(--fg) !important; }

/* ===== Dark: harte Background-Overrides für weiße Flächen ===== */

/* Grundfläche */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* häufige Layout-Container (falls in style.css weiß gefärbt) */
html[data-theme="dark"] main,
html[data-theme="dark"] .container,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] .content,
html[data-theme="dark"] .section,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .page {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* Bootstrap-Utilities, die oft Weiß erzwingen */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-light {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* Falls irgendwo inline/komponentenweise Weiß gesetzt wurde */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background-color: #ffffff"] {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* Karten/Modals sicher dunkel lassen */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--card) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

/* ===== Header Fix ===== */

/* Hintergrund des Headers auf Seite abdunkeln */
html[data-theme="dark"] header {
  background: transparent !important; /* keine weiße Box */
  color: var(--fg) !important;         /* Textfarbe normal hell */
}

/* Titel „Helffisch“ selbst */
html[data-theme="dark"] header h1 {
  color: #eaf2fa !important;
}

/* Untertitel / Slogan lesbar machen */
html[data-theme="dark"] header p,
html[data-theme="dark"] header .text-muted,
html[data-theme="dark"] header .text-secondary {
  color: #b7c4d4 !important;  /* hellgrau, guter Kontrast */
  opacity: 1 !important;
  background: transparent !important;
}

/* ===== FINAL: Tabellen-Text deutlich, Footer gut lesbar ===== */

/* Tabellen-Inhalt (alle Zellen in thead/tbody/tfoot) */
html[data-theme="dark"] .table > :not(caption) > * > * {
  color: #dbe7f1 !important;          /* heller Text in Zellen */
  opacity: 1 !important;              /* keine gedimmten Texte */
  border-color: var(--border) !important;
}

/* Reihenhintergründe + Hover etwas heller, damit Kontrast passt */
html[data-theme="dark"] .table tbody tr { background-color: #0f1419 !important; }
html[data-theme="dark"] .table tbody tr:nth-of-type(odd) { background-color: #121820 !important; }
html[data-theme="dark"] .table tbody tr:hover { background-color: #18212b !important; }

/* Footer-Texte (inkl. .text-muted / .text-secondary) */
html[data-theme="dark"] footer,
html[data-theme="dark"] footer .text-muted,
html[data-theme="dark"] footer .text-secondary {
  color: #b7c4d4 !important;
  opacity: 1 !important;
}

/* Footer-Links */
html[data-theme="dark"] footer a {
  color: var(--link) !important;
  text-decoration: none;
}
html[data-theme="dark"] footer a:hover { text-decoration: underline; }

/* ===== Tabellen-Header Dunkelgrün im Darkmode ===== */
html[data-theme="dark"] .table thead {
  background-color: #12302a !important; /* dunkles Grün, passt zu "Bestätigt" */
  color: #eaf6ef !important;            /* hellgrünlich-weißer Text */
  border-bottom-color: #1b463b !important;
}

/* optional etwas abgerundet / stärkerer Kontrast */
html[data-theme="dark"] .table thead th {
  background-color: #12302a !important;
  color: #eaf6ef !important;
  font-weight: 600 !important;
  border-color: #1b463b !important;
}

/* Dark-Override für Bootstrap .table-light Header */
html[data-theme="dark"] .table thead.table-light,
html[data-theme="dark"] .table thead.table-light tr,
html[data-theme="dark"] .table thead.table-light th,
html[data-theme="dark"] .table thead.table-light td {
  background-color: #12302a !important;  /* dunkles Grün */
  color: #eaf6ef !important;              /* heller Text */
  border-color: #1b463b !important;
}