/*
 * Sales LAB — Dark-Mode-Catch-all (Welle 30+)
 *
 * Tailwind CDN generiert seine Farb-Klassen mit niedriger Spezifität (Standard
 * `.bg-white`). Diese Datei wird NACH dem Tailwind-Script geladen und über-
 * schreibt die häufigsten Light-Mode-Werte für `html.dark`.
 *
 * Zweck: ein einziger Toggle macht die komplette App dunkel, ohne dass jede der
 * ~27 Page-Templates manuell auf dark:-Klassen umgestellt werden muss. Pages,
 * die spezifische Akzente brauchen (z.B. Avatar-Ring weiß auf dunklem Card),
 * können mit eigenen `dark:`-Tailwind-Klassen überschreiben — diese haben
 * gleiche Spezifität (Tailwind generiert sie als `html.dark .dark\:bg-foo`),
 * fallen aber im DOM später und gewinnen den Specificity-Tie.
 *
 * Diese Overrides sind bewusst zurückhaltend — sie zielen auf Page-Strukturen
 * (Cards, Texte, Borders), nicht auf Akzente (Brand-Buttons, Status-Badges).
 */

html.dark {
  /* ---------------------------------------------------------------
   * Backgrounds
   * --------------------------------------------------------------- */
  .bg-white       { background-color: rgb(28 25 23); }   /* stone-900 */
  .bg-stone-50    { background-color: rgb(12 10 9); }    /* stone-950 */
  .bg-stone-100   { background-color: rgb(41 37 36); }   /* stone-800 */
  .bg-stone-200   { background-color: rgb(68 64 60); }   /* stone-700 */

  /* Transparente / semitransparente Hintergründe */
  .bg-white\/80   { background-color: rgb(28 25 23 / 0.8); }
  .bg-white\/85   { background-color: rgb(28 25 23 / 0.85); }
  .bg-white\/60   { background-color: rgb(28 25 23 / 0.6); }
  .bg-stone-50\/60{ background-color: rgb(12 10 9 / 0.6); }

  /* ---------------------------------------------------------------
   * Texte
   * --------------------------------------------------------------- */
  .text-stone-900 { color: rgb(245 245 244); }   /* stone-100 */
  .text-stone-800 { color: rgb(231 229 228); }   /* stone-200 */
  .text-stone-700 { color: rgb(214 211 209); }   /* stone-300 */
  .text-stone-600 { color: rgb(168 162 158); }   /* stone-400 */
  .text-stone-500 { color: rgb(168 162 158); }   /* stone-400 */
  .text-stone-400 { color: rgb(120 113 108); }   /* stone-500 */

  /* ---------------------------------------------------------------
   * Borders + Rings
   * --------------------------------------------------------------- */
  .border-stone-100 { border-color: rgb(41 37 36); }   /* stone-800 */
  .border-stone-200 { border-color: rgb(41 37 36); }   /* stone-800 */
  .border-stone-300 { border-color: rgb(68 64 60); }   /* stone-700 */
  .divide-stone-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(41 37 36); }
  .divide-stone-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(41 37 36); }
  .ring-stone-200   { --tw-ring-color: rgb(41 37 36); }
  .ring-stone-300   { --tw-ring-color: rgb(68 64 60); }
  .ring-stone-200\/60 { --tw-ring-color: rgb(41 37 36 / 0.6); }

  /* ---------------------------------------------------------------
   * Hover-States — Light-Mode-Hovers werden im Dark zu Stone-800.
   * --------------------------------------------------------------- */
  .hover\:bg-stone-50:hover   { background-color: rgb(41 37 36); }
  .hover\:bg-stone-100:hover  { background-color: rgb(68 64 60); }

  /* ---------------------------------------------------------------
   * Spezial: rote Hinweis-Blocks (Errors, Warnings, Audio-Disclaimer).
   * Reduzierte Intensität — bg/border tief, Text bleibt rot.
   * --------------------------------------------------------------- */
  .bg-red-50      { background-color: rgb(69 10 10 / 0.3); }   /* red-950 / 30% */
  .border-red-200 { border-color: rgb(127 29 29); }            /* red-900 */
  .text-red-700   { color: rgb(252 165 165); }                 /* red-300 */
  .text-red-600   { color: rgb(248 113 113); }                 /* red-400 */

  /* Emerald (Success) */
  .bg-emerald-50  { background-color: rgb(6 78 59 / 0.3); }
  .text-emerald-600 { color: rgb(52 211 153); }
  .text-emerald-700 { color: rgb(110 231 183); }

  /* Amber (Warnings) */
  .bg-amber-50    { background-color: rgb(120 53 15 / 0.25); }
  .text-amber-700 { color: rgb(253 230 138); }
  .border-amber-200 { border-color: rgb(146 64 14); }

  /* ---------------------------------------------------------------
   * Input-Felder mit weissem Hintergrund — eindeutig dunkel
   * (Tailwind setzt für focus:border-brand-600 etc keine Overrides nötig).
   * --------------------------------------------------------------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    color-scheme: dark;
  }

  /* ---------------------------------------------------------------
   * Sales-LAB-spezifische Custom-Klassen (aus animations.css).
   * --------------------------------------------------------------- */
  .sl-loader-card {
    background: linear-gradient(140deg, rgb(28 25 23) 0%, rgb(41 37 36) 100%);
  }
  .sl-skeleton-line {
    background: linear-gradient(90deg, rgb(41 37 36) 0%, rgb(68 64 60) 50%, rgb(41 37 36) 100%);
  }
}

/* =============================================================================
 * Welle 31: Branding-Theme-Varianten (Logo / Favicon).
 *
 * Templates rendern bei vorhandener Dark-Variante zwei <img>-Tags nebeneinander
 * mit data-sl-theme-variant="light"|"dark". Wir blenden serverunabhängig je
 * eines aus — !important, damit es auch im sidebar-collapsed-State greift, wo
 * `[data-sl-logo-collapsed-icon] { display: block }` (Spezifität 0,0,3,1)
 * sonst Tailwinds `dark:hidden` (0,0,2,1) überschreiben würde.
 * ============================================================================= */
html.dark [data-sl-theme-variant="light"]   { display: none !important; }
html:not(.dark) [data-sl-theme-variant="dark"] { display: none !important; }