/* dark.css — Dark Mode. Greift nur bei <html data-theme="dark">
 * (gesetzt von js/theme-boot.js + js/theme.js); der helle Modus bleibt
 * damit unverändert, Rollback = diese Datei nicht mehr laden.
 *
 * Aufbau: 1) Tokens aus app.css umstellen, 2) die genutzten Tailwind-
 * Farbklassen (vorgebaut, feste Werte) überschreiben, 3) eigene Klassen aus
 * app.css mit festen Farben. Neue Farbklasse im Code → hier nachziehen.
 * [data-theme="dark"] .x hat Spezifität 0,2,0 und gewinnt gegen Tailwind
 * (0,1,0) und — weil später geladen — gegen gleich starke app.css-Regeln.
 *
 * Palette: Ebenen aus dem Wortmarken-Navy. Rahmen #0d111b < Inhalt #121724
 * < Karte #171d2b < Hover #1b2131 < Fläche #1f2637. Revi-Blau aufgehellt.
 */

:root[data-theme="dark"] {
  color-scheme: dark; /* native Controls, Scrollbars, Datumswähler */
  --color-accent: #4472ec;
  --color-accent-hover: #5a83f0;
  --color-accent-soft: #1c2a4d;
  --color-accent-text: #7aa0f7;
  --color-border: #283044;
  --color-border-soft: #222a3b;
  --color-text: #e8ebf2;
  --color-text-2: #a4abbb;
  --color-text-muted: #737a8c;
  --color-page-bg: #0d111b;
  --color-main-bg: #121724;
  --color-card: #171d2b;
  --color-card-muted: #1b2131;
  --color-surface: #1f2637;
  --color-navy: #0a0e17;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.25);
  --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ======== 2) Tailwind-Farbklassen ======== */

/* Flächen */
[data-theme="dark"] .bg-white { background-color: var(--color-card); }
[data-theme="dark"] .bg-\[\#f4f6fa\] { background-color: var(--color-page-bg); } /* Login */
[data-theme="dark"] .bg-white\/75 { background-color: rgba(23, 29, 43, 0.75); }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--color-card-muted); }
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--color-surface); }
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #2a3346; }
[data-theme="dark"] .bg-gray-300 { background-color: #343e53; }
[data-theme="dark"] .bg-gray-400,
[data-theme="dark"] .group:hover .group-hover\:bg-gray-400 { background-color: #4a5368; }

/* Text */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--color-text); }
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .hover\:text-gray-800:hover { color: #d5d9e3; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .hover\:text-gray-700:hover { color: #c0c5d1; }
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .hover\:text-gray-600:hover { color: var(--color-text-2); }
[data-theme="dark"] .text-gray-500 { color: #8d94a5; }
[data-theme="dark"] .text-gray-400 { color: var(--color-text-muted); }
[data-theme="dark"] .text-gray-300 { color: #545b6c; }

/* Linien */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border-soft); }
[data-theme="dark"] .border-gray-200 { border-color: var(--color-border); }
[data-theme="dark"] .border-gray-300 { border-color: #323b50; }
[data-theme="dark"] .hover\:border-gray-400:hover { border-color: #4a5368; }
[data-theme="dark"] .hover\:border-gray-500:hover { border-color: #5d6680; }
[data-theme="dark"] .border-white { border-color: var(--color-card); }
[data-theme="dark"] .ring-white { --tw-ring-color: var(--color-card); }
[data-theme="dark"] .ring-gray-900 { --tw-ring-color: var(--color-text); }
[data-theme="dark"] .border-gray-900 { border-color: var(--color-text); }

/* Revi-Blau: Text/Links heller als Flächen, sonst zu wenig Kontrast */
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-500,
[data-theme="dark"] .group:hover .group-hover\:text-blue-500 { color: var(--color-accent-text); }
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .hover\:text-blue-700:hover,
[data-theme="dark"] .hover\:text-blue-800:hover { color: #9bb8fa; }
[data-theme="dark"] .text-blue-600\/80 { color: rgba(122, 160, 247, 0.8); }
[data-theme="dark"] .bg-blue-50 { background-color: var(--color-accent-soft); }
[data-theme="dark"] .border-blue-200,
[data-theme="dark"] .border-blue-300,
[data-theme="dark"] .hover\:border-blue-300:hover,
[data-theme="dark"] .ring-blue-200 { border-color: #2d4170; --tw-ring-color: #2d4170; }
[data-theme="dark"] .group:hover .group-hover\:border-blue-400 { border-color: var(--color-accent); }

/* Status: dunkler Farbton statt Pastell, helle Schrift in derselben Farbe */
[data-theme="dark"] .bg-red-50,
[data-theme="dark"] .hover\:bg-red-50:hover { background-color: #3d1e23; }
[data-theme="dark"] .bg-green-50,
[data-theme="dark"] .bg-green-100 { background-color: #14332a; }
[data-theme="dark"] .bg-amber-50,
[data-theme="dark"] .bg-amber-100,
[data-theme="dark"] .bg-yellow-100 { background-color: #3a2f14; }
[data-theme="dark"] .bg-orange-50,
[data-theme="dark"] .bg-orange-100 { background-color: #3a2616; }
[data-theme="dark"] .bg-purple-50 { background-color: #2b2546; }
[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800,
[data-theme="dark"] .hover\:text-red-500:hover,
[data-theme="dark"] .hover\:text-red-600:hover { color: #f1959b; }
[data-theme="dark"] .text-green-600,
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-800,
[data-theme="dark"] .hover\:text-green-800:hover { color: #62d39d; }
[data-theme="dark"] .text-amber-800,
[data-theme="dark"] .text-yellow-800 { color: #f2c25a; }
[data-theme="dark"] .text-orange-600,
[data-theme="dark"] .text-orange-700 { color: #f5a467; }
[data-theme="dark"] .text-purple-600,
[data-theme="dark"] .text-purple-700,
[data-theme="dark"] .text-purple-800,
[data-theme="dark"] .hover\:text-purple-900:hover { color: #b9a8f5; }
[data-theme="dark"] .border-red-200,
[data-theme="dark"] .hover\:border-red-300:hover { border-color: #5a2a31; }
[data-theme="dark"] .border-green-200 { border-color: #1f4d3c; }
[data-theme="dark"] .border-amber-200,
[data-theme="dark"] .border-amber-300,
[data-theme="dark"] .border-yellow-200 { border-color: #5a4719; }
[data-theme="dark"] .border-orange-200 { border-color: #5a3a20; }

/* ======== 3) Eigene Klassen aus app.css ======== */

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #343e53; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5368; }
[data-theme="dark"] .nav-link-active { background-color: var(--color-accent-soft); color: var(--color-accent-text); }

[data-theme="dark"] .btn-primary { box-shadow: none; }
[data-theme="dark"] .btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: #2c3549;
  box-shadow: none;
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) { background-color: #262e41; border-color: #3a4459; }
[data-theme="dark"] .btn-ghost:hover:not(:disabled) { background-color: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] .btn-danger { background-color: transparent; color: #f1959b; border-color: #5a2a31; }
[data-theme="dark"] .btn-danger:hover:not(:disabled) { background-color: #3d1e23; border-color: #7a3640; }
[data-theme="dark"] .btn-success { box-shadow: none; }
[data-theme="dark"] .btn-icon { background-color: var(--color-surface); color: var(--color-text-2); }
[data-theme="dark"] .btn-icon:hover:not(:disabled) { background-color: #262e41; border-color: #3a4459; color: var(--color-text); }
[data-theme="dark"] .btn-icon.btn-icon-danger:hover:not(:disabled) { background-color: #3d1e23; border-color: #7a3640; color: #f1959b; }
[data-theme="dark"] .action-toolbar { background-color: var(--color-card-muted); border-color: var(--color-border); }

[data-theme="dark"] .error-banner { background-color: #3d1e23; border-color: #5a2a31; color: #f1959b; }
[data-theme="dark"] .success-banner { background-color: #14332a; border-color: #1f4d3c; color: #62d39d; }

/* Status-Pillen, Zähler, Chips */
[data-theme="dark"] .rt-pill-review   { background: #3a2f14; color: #f2c25a; }
[data-theme="dark"] .rt-pill-revision { background: #3d1e23; color: #f1959b; }
[data-theme="dark"] .rt-pill-approved { background: #14332a; color: #62d39d; }
[data-theme="dark"] .rt-pill-neutral  { background: var(--color-surface); color: var(--color-text-2); }
[data-theme="dark"] .rt-count { background: var(--color-surface); }
[data-theme="dark"] .rt-count-amber { background: #3a2f14; color: #f2c25a; }
[data-theme="dark"] .rt-count-red   { background: #3d1e23; color: #f1959b; }
[data-theme="dark"] .rt-chip-blue   { color: var(--color-accent-text); }
[data-theme="dark"] .rt-chip-red    { background: #3d1e23; color: #f1959b; }
[data-theme="dark"] .rt-chip-green  { background: #14332a; color: #62d39d; }
[data-theme="dark"] .rt-chip-amber  { background: #3a2f14; color: #f2c25a; }
[data-theme="dark"] .rt-chip-violet { background: #2b2546; color: #b9a8f5; }
[data-theme="dark"] .rt-chip-gray   { background: var(--color-surface); }
[data-theme="dark"] .rt-card-foot { background: var(--color-card-muted); }

/* Globale Sidebar */
[data-theme="dark"] .gs-label,
[data-theme="dark"] .gs-item svg { color: #7c8396; }
[data-theme="dark"] .gs-item,
[data-theme="dark"] .gs-tree-group b,
[data-theme="dark"] .gs-tree-group { color: #c0c5d1; }
[data-theme="dark"] .gs-tree-proj { color: #a4abbb; }
[data-theme="dark"] .gs-item:hover,
[data-theme="dark"] .gs-tree-group:hover,
[data-theme="dark"] .gs-tree-proj:hover,
[data-theme="dark"] .gs-me:hover { background: #171d2b; }
[data-theme="dark"] .gs-item.gs-active,
[data-theme="dark"] .gs-tree-proj.gs-active { background: var(--color-surface); color: var(--color-text); }
[data-theme="dark"] .gs-mini { color: #5d6478; }
[data-theme="dark"] .gs-mini:hover { background: var(--color-surface); color: var(--color-text-2); }
[data-theme="dark"] .gs-resizer:hover,
[data-theme="dark"] .gs-resizer.gs-resizing { background: rgba(68, 114, 236, 0.3); }

/* Mobile Projektliste (Off-Canvas, .ps-light) */
[data-theme="dark"] .ps-light { background: var(--color-page-bg); color: var(--color-text); }

/* Review mobil */
@media (max-width: 767px) {
  [data-theme="dark"] [data-comments-panel] { box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5); }
  [data-theme="dark"] body.rt-composing [data-review-col] { background: var(--color-main-bg); }
}

/* Upload-/Download-Widget */
[data-theme="dark"] #rev-upload-widget { background: var(--color-card); }
[data-theme="dark"] .uw-row[data-uw-state="done"] .uw-status { color: #62d39d; }
[data-theme="dark"] .uw-row[data-uw-state="error"] .uw-status,
[data-theme="dark"] .uw-x:hover { color: #f1959b; }
[data-theme="dark"] .uw-retry:hover { color: var(--color-accent-text); }

/* Skeletons */
[data-theme="dark"] .sk { background: #1f2637; }
[data-theme="dark"] .sk::after { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%); }

/* Logo: Wortmarke hell (Navy wäre auf dem dunklen Grund unsichtbar) */
[data-theme="dark"] img[src="/img/revi-lockup.png"] { content: url("/img/revi-lockup-dark.png"); }