/*
 * template-dark.css
 * Ergänzung für template.min.css – überschreibt nur Farb-Variablen.
 *
 * Alternativ: <body class="mvw-dark">
 *   (Hinweis: Bootstrap-eigene Dark-Feinheiten wie Accordion-Pfeil oder
 *    Close-Button-Filter greifen nur mit data-bs-theme="dark".)
 *
 * Aufbau:
 *   1. Bootstrap-Variablen (--bs-*)
 *   2. Template-Tokens (--mvw-*)
 *   3. Einzelfälle, die nicht über Variablen lösbar sind
 *   4. Fremdmodul Album-Slider – Farben nur noch über Variablen
 */

html[data-bs-theme="dark"],
body.mvw-dark {
  color-scheme: dark;
}

/* ================================================================
   1. Bootstrap 5.3 Farbvariablen
   ================================================================ */

html[data-bs-theme="dark"],
body.mvw-dark {
  --bs-body-color: #eef1f3;
  --bs-body-color-rgb: 238, 241, 243;
  --bs-body-bg: #121518;
  --bs-body-bg-rgb: 18, 21, 24;

  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;

  --bs-secondary-color: rgba(168, 175, 183, 0.82);
  --bs-secondary-color-rgb: 168, 175, 183;

  --bs-tertiary-color: rgba(168, 175, 183, 0.62);
  --bs-tertiary-color-rgb: 168, 175, 183;

  --bs-secondary-bg: #23292f;
  --bs-secondary-bg-rgb: 35, 41, 47;
  --bs-tertiary-bg: #1b2024;
  --bs-tertiary-bg-rgb: 27, 32, 36;

  --bs-border-color: #384047;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.12);

  --bs-light: #1b2024;
  --bs-light-rgb: 27, 32, 36;

  --bs-dark: #121518;
  --bs-dark-rgb: 18, 21, 24;

  --bs-primary: #b51c2f;
  --bs-primary-rgb: 181, 28, 47;

  --bs-success: #3fbf7f;
  --bs-success-rgb: 63, 191, 127;

  --bs-info: #4aa8ff;
  --bs-info-rgb: 74, 168, 255;

  --bs-warning: #f0b94b;
  --bs-warning-rgb: 240, 185, 75;

  --bs-danger: #ef5b67;
  --bs-danger-rgb: 239, 91, 103;

  --bs-link-color: #e06a78;
  --bs-link-color-rgb: 224, 106, 120;
  --bs-link-hover-color: #f08b97;
  --bs-link-hover-color-rgb: 240, 139, 151;

  --bs-heading-color: #eef1f3;

  --bs-highlight-color: #eef1f3;
  --bs-highlight-bg: rgba(240, 185, 75, 0.24);

  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.28);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.45);

  --bs-form-valid-color: #3fbf7f;
  --bs-form-valid-border-color: #3fbf7f;
  --bs-form-invalid-color: #ef5b67;
  --bs-form-invalid-border-color: #ef5b67;
}

/* ================================================================
   2. Template-Tokens (--mvw-*)
   ================================================================ */

html[data-bs-theme="dark"],
body.mvw-dark {
  /* Flächen */
  --mvw-surface: #1b2024;
  --mvw-surface-alt: #23292f;
  --mvw-surface-ring: #30373e;
  --mvw-surface-sunken: #23292f;
  --mvw-hover-bg: #23292f;

  /* Text */
  --mvw-text-strong: #eef1f3;
  --mvw-text-muted: #a8afb7;
  --mvw-heading: #eef1f3;
  --mvw-on-primary: #ffffff;
  --mvw-hover-text: #f0b94b;

  /* Primärfarbe / Zustände */
  --mvw-primary-hover: #cf3044;
  --mvw-danger-hover: #ed4451;
  --mvw-primary-grad-from: #961727;
  --mvw-primary-grad-to: #d82138;
  --mvw-nav-active: #ffffff;
  --mvw-highlight: #fceb54;
  --mvw-footer-hover: #f0b94b;
  --mvw-badge-hover-text: #000000;

  /* Formulare */
  --mvw-input-border: #384047;
  --mvw-focus-color: #4aa8ff;
  --mvw-focus-ring: rgba(74, 168, 255, 0.22);

  /* Overlays */
  --mvw-offcanvas-bg: rgba(18, 21, 24, 0.97);
  --mvw-brand-scrim: rgba(0, 0, 0, 0.25);
  --mvw-brand-text-shadow: #000000;
  --mvw-scrim: rgba(0, 0, 0, 0.65);
  --mvw-scrim-hover: rgba(0, 0, 0, 0.85);

  /* Schatten */
  --mvw-shadow-soft: rgba(0, 0, 0, 0.28);
  --mvw-shadow-medium: rgba(0, 0, 0, 0.35);
  --mvw-shadow-strong: rgba(0, 0, 0, 0.45);
  --mvw-shadow-navbar: rgba(0, 0, 0, 0.75);

  /* Datums-Badge (bereits dunkel – unverändert) */
  --mvw-badge-from: rgba(45, 50, 55, 0.95);
  --mvw-badge-to: rgba(33, 37, 41, 0.95);
  --mvw-badge-inset: rgba(255, 255, 255, 0.08);
  --mvw-gloss-strong: rgba(255, 255, 255, 0.25);
  --mvw-gloss-weak: rgba(255, 255, 255, 0.05);

  /* Bilder */
  --mvw-caption-bg: rgba(18, 21, 24, 0.82);
  --mvw-featured-from: #23292f;
  --mvw-featured-to: #1b2024;
}

/* ================================================================
   3. Einzelfälle (nicht über Variablen lösbar)
   ================================================================ */

/* Roter MVW-Bereich bleibt bewusst der Branding-Akzent. */
:is(html[data-bs-theme="dark"], body.mvw-dark) .bg-mvw {
  color: var(--mvw-on-primary);
}

/* Aktiver Accordion-Kopf: Fläche statt Primär-Tönung (Bootstrap-Variable) */
:is(html[data-bs-theme="dark"], body.mvw-dark) .accordion {
  --bs-accordion-active-bg: var(--mvw-surface);
  --bs-accordion-active-color: var(--bs-emphasis-color);
}

/* ================================================================
   4. Fremdmodul Album-Slider
   Das Modul liefert seine Hell-Farben selbst (per #ID und
   !important). Hier nur Variablen – keine festen Farbwerte.
   ================================================================ */

/* ---- MVW Album Slider (IDs nach Schema mvw-album-<ID>-slider) ---- */

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] {
  background: transparent !important;
}

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-inner {
  background: var(--bs-body-bg) !important;
}

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-item {
  background: transparent !important;
}

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .slider-image-wrapper {
  background: var(--mvw-surface-alt) !important;
  border: 1px solid var(--bs-border-color-translucent) !important;
}

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .slider-image-wrapper.slider-dummy {
  background: transparent !important;
}

/* Spinner */
:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .slider-image-wrapper::before {
  border-color: var(--bs-border-color) !important;
  border-top-color: var(--bs-primary) !important;
}

/* Navigations-Buttons */
:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-prev,
:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-next {
  background-color: var(--mvw-surface-alt) !important;
  border-color: var(--bs-border-color-translucent) !important;
  box-shadow: 0 2px 8px var(--mvw-shadow-strong) !important;
}

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-prev:hover,
:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-next:hover {
  background-color: var(--bs-border-color) !important;
  box-shadow: 0 4px 12px var(--mvw-shadow-strong) !important;
}

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-prev:focus,
:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-next:focus {
  opacity: 1 !important;
}

/* Navigations-Icons: Modul setzt filter: invert(1) – im Dark Theme entfernen */
:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-prev-icon,
:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"][id$="-slider"] .carousel-control-next-icon {
  filter: none !important;
}

/* ---- MVW Album Grid (IDs nach Schema mvw-album-<ID>) ---- */

:is(html[data-bs-theme="dark"], body.mvw-dark) [id^="mvw-album-"] .thumb-wrapper {
  background-color: var(--mvw-surface-alt) !important;
  border-color: var(--bs-border-color-translucent) !important;
}