/* ============================
   KitchenCloud – Dunkles Design
   ============================
   Aktiv, wenn <html data-kc-theme="dunkel"> gesetzt ist. Das erledigt ein kleines Script
   ganz oben im <head> von _Layout.cshtml VOR dem ersten Zeichnen (kein helles Aufblitzen):
   Einstellung aus localStorage "kc-design" = "auto" (Standard, folgt Handy/PC) | "hell" |
   "dunkel". Umschalter im Menü "Mein Bereich" (kcDesign in kc-layout.js).
   Zusätzlich setzt das Script data-bs-theme="dark" - damit stellt Bootstrap 5.3 seine
   eigenen Bausteine (Modals, Dropdowns, Tabellen, Eingabefelder) selbst um.

   Wird im Layout als LETZTES Stylesheet geladen (nach den seitenspezifischen), damit die
   Regeln hier ohne !important greifen. Aufbau:
   1) Farbvariablen neu belegen (der Großteil - alle Themen-Dateien nutzen Variablen)
   2) Sonderfälle mit festen Farbtönen (Meldungen, Kacheln, Chips, Platzhalter, ...)
   ============================ */

/* ----------------------------
   1) Farbvariablen
   ---------------------------- */
:root[data-kc-theme="dunkel"] {
    color-scheme: dark;

    --kc-bg: #13160f;
    --kc-bg-soft: #242b1b;
    --kc-flaeche: #1c2116;
    --kc-flaeche-hover: #242b1d;
    --kc-linie: #3b4431;
    --kc-linie-hell: #2f3727;
    --kc-text: #e3e6da;
    --kc-text-leise: #b3b9a6;
    /* Schrift-/Akzentfarbe: helles Oliv statt dunklem (Überschriften, Links, Symbole) */
    --kc-primary: #cddcaf;
    --kc-primary-light: #b3c58f;
    /* Knöpfe behalten ein kräftiges Oliv mit weißer Schrift */
    --kc-knopf: #4a6532;
    --kc-knopf-hover: #58773c;
    /* "-dark"-Töne dienen als Textfarbe auf hellen Tönungen → im Dunklen aufhellen */
    --kc-terracotta-dark: #f2a582;
    --kc-mustard-dark: #f0c46e;

    /* Bootstrap-Variablen (kc-theme.css setzt sie fürs Helle auf dunkles Oliv) */
    --bs-primary: #cddcaf;
    --bs-link-color: #cddcaf;
    --bs-link-color-rgb: 205, 220, 175;
    --bs-link-hover-color: #e6efd2;
    --bs-link-hover-color-rgb: 230, 239, 210;
    --bs-navbar-color: #cddcaf;
    --bs-nav-link-color: #cddcaf;
    --bs-nav-link-hover-color: #e6efd2;
    --bs-body-bg: var(--kc-flaeche);
    --bs-body-color: var(--kc-text);
    --bs-secondary-color: var(--kc-text-leise);
    --bs-border-color: var(--kc-linie);
    --bs-tertiary-bg: var(--kc-bg-soft);
}

    /* Seitenhintergrund bleibt der dunkelste Ton, Eingabefelder/Karten eine Stufe heller */
    :root[data-kc-theme="dunkel"] body {
        background-color: var(--kc-bg);
    }

/* ----------------------------
   2) Sonderfälle
   ---------------------------- */

/* Kopfzeile (halbtransparent wie im Hellen) */
[data-kc-theme="dunkel"] .kc-navbar {
    background: rgba(28, 33, 22, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Kachel-Texte und -Symbole */
[data-kc-theme="dunkel"] .kc-tile-link p {
    color: var(--kc-text-leise);
}

[data-kc-theme="dunkel"] .kc-quick-actions .row > div:nth-child(5n+1) .kc-tile-icon { background: rgba(224, 120, 79, 0.2); color: #f3a47a; }
[data-kc-theme="dunkel"] .kc-quick-actions .row > div:nth-child(5n+2) .kc-tile-icon { background: rgba(232, 169, 61, 0.2); color: #f5c876; }
[data-kc-theme="dunkel"] .kc-quick-actions .row > div:nth-child(5n+3) .kc-tile-icon { background: rgba(31, 160, 150, 0.22); color: #85d6cd; }
[data-kc-theme="dunkel"] .kc-quick-actions .row > div:nth-child(5n+4) .kc-tile-icon { background: rgba(200, 80, 130, 0.22); color: #f1a8c8; }

/* Startseite: Wisch-Reihe */
[data-kc-theme="dunkel"] .kc-neu-reihe {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Fehler-Tönungen (Meldungen, Entfernen-/Schließen-Knöpfe, "Neu"-/"Kein Foto"-Abzeichen) */
[data-kc-theme="dunkel"] .kc-alert-error,
[data-kc-theme="dunkel"] .kc-nachricht-feedback--error,
[data-kc-theme="dunkel"] .kc-ingredient-remove,
[data-kc-theme="dunkel"] .kc-zutatengruppe-remove,
[data-kc-theme="dunkel"] .kc-barcode-close,
[data-kc-theme="dunkel"] .kc-neu-tag,
[data-kc-theme="dunkel"] .kc-recipe-badge--warnung {
    background: rgba(214, 48, 49, 0.18);
    border-color: rgba(214, 48, 49, 0.4);
    color: #ffa197;
}

    [data-kc-theme="dunkel"] .kc-ingredient-remove:hover,
    [data-kc-theme="dunkel"] .kc-barcode-close:hover {
        background: rgba(214, 48, 49, 0.3);
    }

/* Warn-/Hinweis-Tönungen (Senf) */
[data-kc-theme="dunkel"] .kc-alert-warning,
[data-kc-theme="dunkel"] .kc-allergen-chip {
    background: rgba(232, 169, 61, 0.16);
    border-color: rgba(232, 169, 61, 0.35);
    color: #f3c872;
}

[data-kc-theme="dunkel"] .kc-ingredient-name--unerkannt {
    background: rgba(232, 169, 61, 0.12) !important;
}

[data-kc-theme="dunkel"] .kc-alert-info {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Login/Registrierung */
[data-kc-theme="dunkel"] .kc-auth-tabs {
    background: var(--kc-bg-soft);
}

[data-kc-theme="dunkel"] .kc-auth-tab:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-kc-theme="dunkel"] .kc-floating-label,
[data-kc-theme="dunkel"] .kc-zutatenliste-panel .kc-form-hint {
    color: var(--kc-text-leise);
}

/* Chips (Tags, Zutaten bei "Was kann ich kochen?") - im Hellen hellgrün mit dunkler Schrift,
   im Dunklen gedeckt grün mit heller Schrift. .kc-tag-badge = Tags in der Rezeptansicht (fehlte
   bis 30.09.: dort blieb der hellgrüne Hintergrund unter der hellen Schrift - kaum lesbar) */
[data-kc-theme="dunkel"] .kc-tag-chip,
[data-kc-theme="dunkel"] .kc-tag-badge {
    background: rgba(183, 217, 140, 0.18);
    color: var(--kc-primary);
}

/* Vorschlagslisten (Zutaten, verwandte Rezepte): der markierte Eintrag - immer der erste -
   hatte im Dunklen den hellgrünen Hintergrund unter heller Schrift (kaum lesbar, 01.10.2026) */
[data-kc-theme="dunkel"] .kc-autocomplete-dropdown {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

    [data-kc-theme="dunkel"] .kc-autocomplete-option:hover,
    [data-kc-theme="dunkel"] .kc-autocomplete-option--aktiv {
        background: rgba(183, 217, 140, 0.18);
    }

/* Chips und runde Knöpfe auf Fotos */
[data-kc-theme="dunkel"] .kc-tag-chip-remove {
    background: rgba(255, 255, 255, 0.12);
}

    [data-kc-theme="dunkel"] .kc-tag-chip-remove:hover {
        background: rgba(255, 255, 255, 0.22);
    }

[data-kc-theme="dunkel"] .kc-recipe-card-delete-btn,
[data-kc-theme="dunkel"] .kc-favorit-btn {
    background: rgba(28, 33, 22, 0.85);
}

[data-kc-theme="dunkel"] .kc-recipe-card-delete-btn {
    color: #ffa197;
}

[data-kc-theme="dunkel"] .kc-favorit-btn:not(.kc-favorit-aktiv) {
    color: #8b907f;
}

/* Foto-Platzhalter je Kategorie: gedeckte Version derselben Farbe statt heller Pastelltöne */
[data-kc-theme="dunkel"] .kc-recipe-card-img--placeholder.kc-platzhalter {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--kc-p-mittel) 16%, #1c2116),
        color-mix(in srgb, var(--kc-p-mittel) 32%, #1c2116));
    color: var(--kc-p-mittel);
}

/* Eingabefelder: Bootstrap-Felder und eigene Felder gleich */
[data-kc-theme="dunkel"] .form-control,
[data-kc-theme="dunkel"] .form-select {
    background-color: var(--kc-flaeche);
    border-color: var(--kc-linie);
    color: var(--kc-text);
}

/* Fotos minimal abdunkeln, damit sie nicht blenden */
[data-kc-theme="dunkel"] .kc-recipe-card-img:not(.kc-recipe-card-img--placeholder),
[data-kc-theme="dunkel"] .kc-neu-karte-bild:not(.kc-neu-karte-bild--leer) {
    filter: brightness(0.92);
}

/* ----------------------------
   Umschalter im Menü "Mein Bereich" (sichtbar in beiden Designs, daher ohne Präfix)
   ---------------------------- */
.kc-design-wahl {
    padding: 0.35rem 1rem 0.5rem;
}

.kc-design-wahl-titel {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-text-leise);
    margin-bottom: 0.4rem;
}

.kc-design-knoepfe {
    display: flex;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: 10px;
    background: var(--kc-bg-soft);
}

    .kc-design-knoepfe button {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        min-height: 44px;
        padding: 0.35rem 0.4rem;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--kc-text);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
    }

        .kc-design-knoepfe button[aria-pressed="true"] {
            background: var(--kc-flaeche);
            color: var(--kc-primary);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        }

/* Prüfungs-Seite: Zutaten ohne Nährwerte (siehe kc-rezept.css .kc-pruefung-zutaten) */
[data-kc-theme="dunkel"] .kc-pruefung-zutaten {
    color: #ffa197;
}

/* Lade-Schimmer der Rezeptfotos im Dunkelmodus dezenter */
[data-kc-theme="dunkel"] .kc-recipe-card-img {
    background-image: linear-gradient(100deg, var(--kc-bg-soft) 40%, rgba(255, 255, 255, 0.07) 50%, var(--kc-bg-soft) 60%);
}

/* "Mein Bereich": Profil (06.10.2026) und Hilfe (seit 04.10.2026 hier statt im Footer) - Symbol vor dem Text */
.kc-menue-profil,
.kc-menue-vorrat,
.kc-menue-hilfe,
.kc-menue-geraete,
.kc-logout,
.kc-design-wahl-titel {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Grüne "im Ziel"/"veröffentlicht"-Schrift (06.10.2026): --kc-success ist auf dunklem Grund zu dunkel */
[data-kc-theme="dunkel"] .kc-tagesziel:not(.kc-tagesziel--darunter):not(.kc-tagesziel--darueber),
[data-kc-theme="dunkel"] .kc-diaet-summe:not(.kc-diaet-summe--ausserhalb),
[data-kc-theme="dunkel"] .kc-profil-status:not(.kc-profil-status--offen) {
    color: #a9cf7f;
}

/* "Mein Bereich" immer rechtsbündig - auch wenn es per Maus-Überfahren geöffnet wird (kc-layout.js,
   ohne Bootstraps Positionierung); sonst ragte es bei schmalem Fenster rechts aus dem Bild */
.kc-dropdown.dropdown-menu-end {
    right: 0;
    left: auto;
}

/* ----------------------------
   Ganslportal / Einladungen (18.10.2026): Kalender-Kontrast im dunklen Design
   (kc-gansl.css hat feste helle Töne - hellgrünes "gebucht" mit heller Schrift war kaum lesbar)
   ---------------------------- */
:root[data-kc-theme="dunkel"] .kc-gansl-zelle {
    opacity: 0.75;
    color: #9aa18c;
}

:root[data-kc-theme="dunkel"] .kc-gansl-zelle--leer {
    background: transparent;
}

:root[data-kc-theme="dunkel"] .kc-gansl-zelle--we {
    opacity: 1;
    background: #2a3320;
    border-color: #56634a;
    color: #f1f3ea;
}

    :root[data-kc-theme="dunkel"] .kc-gansl-zelle--we:hover {
        border-color: var(--kc-primary);
    }

:root[data-kc-theme="dunkel"] .kc-gansl-zelle--gebucht {
    background: #34521f;
    border-color: #7fae5a;
    color: #f4f9ee;
}

:root[data-kc-theme="dunkel"] .kc-gansl-zelle--gebucht .kc-gansl-zelle-pax {
    color: #d9f0c2;
}

:root[data-kc-theme="dunkel"] .kc-gansl-zelle--gesperrt {
    background: #1a1e14;
    color: #b3b9a6;
}

    :root[data-kc-theme="dunkel"] .kc-gansl-zelle--gesperrt::after {
        opacity: 0.5;
    }

:root[data-kc-theme="dunkel"] .kc-gansl-zelle--kinderwe {
    border-color: #f97316;
    box-shadow: inset 0 3px 0 #f97316;
}

:root[data-kc-theme="dunkel"] .kc-gansl-zelle-kinderwe {
    background: #4a1d08;
    color: #fdba74;
}

:root[data-kc-theme="dunkel"] .kc-gansl-warnung {
    color: #f0a070;
}

:root[data-kc-theme="dunkel"] .kc-gansl-einladung {
    background: linear-gradient(135deg, #3a2414, #4a2c14);
    color: #fde3c4;
    box-shadow: none;
}

    :root[data-kc-theme="dunkel"] .kc-gansl-einladung h3,
    :root[data-kc-theme="dunkel"] .kc-gansl-einladung a {
        color: #fdba74;
    }

:root[data-kc-theme="dunkel"] .kc-gansl-allergen--warnung {
    background: #4a1d14;
    color: #fca99a;
}

/* Mitteilungen an alle (19.10.2026) */
:root[data-kc-theme="dunkel"] .kc-mitteilung--info {
    background: #24361a;
    border-color: #6f9a4f;
    color: #e8f3dc;
}

:root[data-kc-theme="dunkel"] .kc-mitteilung--warnung {
    background: #3a2414;
    border-color: #c2783a;
    color: #fde3c4;
}

:root[data-kc-theme="dunkel"] .kc-mitteilung-weg:hover,
:root[data-kc-theme="dunkel"] .kc-mitteilung-weg:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}

:root[data-kc-theme="dunkel"] .kc-mitteilung-status--sichtbar {
    background: #34521f;
    color: #e8f3dc;
}

:root[data-kc-theme="dunkel"] .kc-mitteilung-status--geplant {
    background: #4a2c14;
    color: #fdba74;
}

/* Logo (19.10.2026): helle Schrift-Variante im dunklen Design */
:root[data-kc-theme="dunkel"] .kc-logo--hell {
    display: none;
}

:root[data-kc-theme="dunkel"] .kc-logo--dunkel {
    display: block;
}

/* Rezeptansicht: aufgeräumter Kopfbereich (20.10.2026) */
:root[data-kc-theme="dunkel"] .kc-fakt {
    background: var(--kc-flaeche);
    border-color: var(--kc-linie);
}

:root[data-kc-theme="dunkel"] .kc-anzeige-meta-bewertung {
    color: #F5C876;
}

/* Admin-Seite Mitteilungen (20.10.2026) */
:root[data-kc-theme="dunkel"] .kc-mitteilung-art-wahl--info input:checked + span {
    background: #24361a;
    border-color: #6f9a4f;
    color: #e8f3dc;
}

:root[data-kc-theme="dunkel"] .kc-mitteilung-art-wahl--warnung input:checked + span {
    background: #3a2414;
    border-color: #c2783a;
    color: #fde3c4;
}

:root[data-kc-theme="dunkel"] .kc-mitteilung-art-zeichen {
    color: #F3A47A;
}