/* ===========================================================================
   SalesONE Dark Mode
   Prinzip: Tailwind v4 nutzt fuer alle Farben CSS-Variablen. Im Dark Mode werden
   die Variablen umbelegt (Grau-Skala invertiert, helle Farbtoene -> dunkle Toene),
   farbige Texte werden aufgehellt. Dadurch sind KEINE Template-Aenderungen noetig.
   Ungelayerte Regeln schlagen Tailwinds @layer-Regeln unabhaengig von Spezifitaet.
   Aktiv, wenn <html> die Klasse "dark" traegt (gesetzt per Script im Layout-Head).
   =========================================================================== */

html.dark {
  color-scheme: dark;
  /* Grau-Skala invertiert: 50 = Seitenhintergrund ... 900 = hellster Text */
  --color-gray-50:  oklch(17% .02 264);
  --color-gray-100: oklch(25% .024 264);
  --color-gray-200: oklch(30% .026 264);
  --color-gray-300: oklch(38% .028 264);
  --color-gray-400: oklch(56% .025 264);
  --color-gray-500: oklch(66% .02 264);
  --color-gray-600: oklch(75% .016 264);
  --color-gray-700: oklch(83% .012 264);
  --color-gray-800: oklch(90% .008 264);
  --color-gray-900: oklch(96% .004 264);
  --color-red-50: oklch(24% .045 25.3); --color-red-100: oklch(28% .065 25.3); --color-red-200: oklch(37% .08 25.3);
  --color-orange-50: oklch(24% .045 47.6); --color-orange-100: oklch(28% .065 47.6); --color-orange-200: oklch(37% .08 47.6);
  --color-amber-50: oklch(24% .045 70.1); --color-amber-100: oklch(28% .065 70.1); --color-amber-200: oklch(37% .08 70.1);
  --color-yellow-50: oklch(24% .045 86); --color-yellow-100: oklch(28% .065 86); --color-yellow-200: oklch(37% .08 86);
  --color-green-50: oklch(24% .045 149.6); --color-green-100: oklch(28% .065 149.6); --color-green-200: oklch(37% .08 149.6);
  --color-emerald-50: oklch(24% .045 162.5); --color-emerald-100: oklch(28% .065 162.5); --color-emerald-200: oklch(37% .08 162.5);
  --color-teal-50: oklch(24% .045 180.7); --color-teal-100: oklch(28% .065 180.7); --color-teal-200: oklch(37% .08 180.7);
  --color-blue-50: oklch(24% .045 259.8); --color-blue-100: oklch(28% .065 259.8); --color-blue-200: oklch(37% .08 259.8);
  --color-indigo-50: oklch(24% .045 277.1); --color-indigo-100: oklch(28% .065 277.1); --color-indigo-200: oklch(37% .08 277.1);
  --color-purple-50: oklch(24% .045 303.9); --color-purple-100: oklch(28% .065 303.9); --color-purple-200: oklch(37% .08 303.9);
}

html.dark body { color: var(--color-gray-900); }
/* Karten/Header/Dropdowns: bg-white wird zur dunklen Flaeche (text-white bleibt weiss) */
html.dark .bg-white { background-color: oklch(21% .024 264); }
html.dark .hover\:bg-white:hover { background-color: oklch(25% .024 264); }
/* Formularfelder */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark select, html.dark textarea { background-color: oklch(19% .022 264); color: var(--color-gray-900); }
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--color-gray-400); }
html.dark [contenteditable=true] { background-color: oklch(19% .022 264); }
html.dark ::-webkit-scrollbar-thumb { background: #374151; }

/* Farbige Texte aufhellen (dunkle Toene waeren auf dunklem Grund unlesbar) */
html.dark .text-red-600, html.dark .hover\:text-red-600:hover { color: oklch(72% 0.15 25.3); }
html.dark .text-red-700, html.dark .hover\:text-red-700:hover { color: oklch(78% 0.13 25.3); }
html.dark .text-red-800, html.dark .hover\:text-red-800:hover { color: oklch(84% 0.1 25.3); }
html.dark .text-red-900, html.dark .hover\:text-red-900:hover { color: oklch(90% 0.07 25.3); }
html.dark .text-orange-600, html.dark .hover\:text-orange-600:hover { color: oklch(72% 0.15 47.6); }
html.dark .text-orange-700, html.dark .hover\:text-orange-700:hover { color: oklch(78% 0.13 47.6); }
html.dark .text-orange-800, html.dark .hover\:text-orange-800:hover { color: oklch(84% 0.1 47.6); }
html.dark .text-orange-900, html.dark .hover\:text-orange-900:hover { color: oklch(90% 0.07 47.6); }
html.dark .text-amber-600, html.dark .hover\:text-amber-600:hover { color: oklch(72% 0.15 70.1); }
html.dark .text-amber-700, html.dark .hover\:text-amber-700:hover { color: oklch(78% 0.13 70.1); }
html.dark .text-amber-800, html.dark .hover\:text-amber-800:hover { color: oklch(84% 0.1 70.1); }
html.dark .text-amber-900, html.dark .hover\:text-amber-900:hover { color: oklch(90% 0.07 70.1); }
html.dark .text-yellow-600, html.dark .hover\:text-yellow-600:hover { color: oklch(72% 0.15 86); }
html.dark .text-yellow-700, html.dark .hover\:text-yellow-700:hover { color: oklch(78% 0.13 86); }
html.dark .text-yellow-800, html.dark .hover\:text-yellow-800:hover { color: oklch(84% 0.1 86); }
html.dark .text-yellow-900, html.dark .hover\:text-yellow-900:hover { color: oklch(90% 0.07 86); }
html.dark .text-green-600, html.dark .hover\:text-green-600:hover { color: oklch(72% 0.15 149.6); }
html.dark .text-green-700, html.dark .hover\:text-green-700:hover { color: oklch(78% 0.13 149.6); }
html.dark .text-green-800, html.dark .hover\:text-green-800:hover { color: oklch(84% 0.1 149.6); }
html.dark .text-green-900, html.dark .hover\:text-green-900:hover { color: oklch(90% 0.07 149.6); }
html.dark .text-emerald-600, html.dark .hover\:text-emerald-600:hover { color: oklch(72% 0.15 162.5); }
html.dark .text-emerald-700, html.dark .hover\:text-emerald-700:hover { color: oklch(78% 0.13 162.5); }
html.dark .text-emerald-800, html.dark .hover\:text-emerald-800:hover { color: oklch(84% 0.1 162.5); }
html.dark .text-emerald-900, html.dark .hover\:text-emerald-900:hover { color: oklch(90% 0.07 162.5); }
html.dark .text-teal-600, html.dark .hover\:text-teal-600:hover { color: oklch(72% 0.15 180.7); }
html.dark .text-teal-700, html.dark .hover\:text-teal-700:hover { color: oklch(78% 0.13 180.7); }
html.dark .text-teal-800, html.dark .hover\:text-teal-800:hover { color: oklch(84% 0.1 180.7); }
html.dark .text-teal-900, html.dark .hover\:text-teal-900:hover { color: oklch(90% 0.07 180.7); }
html.dark .text-blue-600, html.dark .hover\:text-blue-600:hover { color: oklch(72% 0.15 259.8); }
html.dark .text-blue-700, html.dark .hover\:text-blue-700:hover { color: oklch(78% 0.13 259.8); }
html.dark .text-blue-800, html.dark .hover\:text-blue-800:hover { color: oklch(84% 0.1 259.8); }
html.dark .text-blue-900, html.dark .hover\:text-blue-900:hover { color: oklch(90% 0.07 259.8); }
html.dark .text-indigo-600, html.dark .hover\:text-indigo-600:hover { color: oklch(72% 0.15 277.1); }
html.dark .text-indigo-700, html.dark .hover\:text-indigo-700:hover { color: oklch(78% 0.13 277.1); }
html.dark .text-indigo-800, html.dark .hover\:text-indigo-800:hover { color: oklch(84% 0.1 277.1); }
html.dark .text-indigo-900, html.dark .hover\:text-indigo-900:hover { color: oklch(90% 0.07 277.1); }
html.dark .text-purple-600, html.dark .hover\:text-purple-600:hover { color: oklch(72% 0.15 303.9); }
html.dark .text-purple-700, html.dark .hover\:text-purple-700:hover { color: oklch(78% 0.13 303.9); }
html.dark .text-purple-800, html.dark .hover\:text-purple-800:hover { color: oklch(84% 0.1 303.9); }
html.dark .text-purple-900, html.dark .hover\:text-purple-900:hover { color: oklch(90% 0.07 303.9); }

/* Seitenleiste ist schon dunkel: dort die Original-Palette wiederherstellen */
html.dark #oi-sidebar {
  --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665);
}

/* "Helle Inseln": Elemente, die bewusst hell bleiben (z. B. DIN-A4-Layout-Vorschau) */
html.dark .oi-keep-light {
  color-scheme: light; color: #111827;
  --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665);
}
html.dark .oi-keep-light.bg-white, html.dark .oi-keep-light .bg-white { background-color: #fff; }

/* Anmeldeseiten (Login, 2FA, Mandantenauswahl): Seitenhintergrund ist bewusst dunkel
   (bg-gray-900) — die invertierte Grau-Skala wuerde ihn hell machen. */
html.dark body.bg-gray-900 { background-color: oklch(12% .018 264); }

/* Theme-Umschalter auf den Anmeldeseiten: Mond (hell aktiv) / Sonne (dunkel aktiv) */
.oi-theme-sun { display: none; }
html.dark .oi-theme-sun { display: inline-block; }
html.dark .oi-theme-moon { display: none; }