/* ===========================================================================
   Aurora — dritte Themenstufe ueber dem Dark Mode
   ===========================================================================

   Diese Datei fuellt einen Slot, der im Modul vollstaendig vorbereitet war und
   als einziges Teil fehlte: templates/layout.php band sie auf jeder Seite ein
   (404 bei jedem Aufruf), setzte --aurora-accent aus der Workspace-Farbe, legte
   den Hintergrund-Slot .aurora-module-bg an und schaltet body.theme-aurora per
   Knopf im Kopfbereich samt localStorage. Nur das Stylesheet gab es nie —
   weder hier noch im Master-Repo. Der Knopf war damit ohne Wirkung.

   Vertrag, wie ihn die Kommentare in layout.php beschreiben:

     - Greift NUR zusammen mit dem Dark Mode: body.theme-aurora.dark-mode.
       Im Light Mode bleibt die Wahl gespeichert, aendert aber nichts — der
       Umschalter weist per Toast darauf hin.
     - --aurora-accent / --aurora-accent-rgb liefert layout.php serverseitig aus
       der Workspace-Farbe (resolveAuroraAccent(), Lila-Fallback #6f42c1).
       rgb() als Zahlentripel, damit rgba()-Glows ohne color-mix() auskommen.
     - .aurora-module-bg ist eine Bildebene, die layout.php nur ausgibt, wenn
       die Datei unter assets/images/module-bg/ wirklich existiert. Fehlt sie,
       fehlt auch das Element — hier ist daher nichts abzufangen.
     - Wird als LETZTES Stylesheet geladen und darf deshalb ohne !important
       gegen die Universe-Dateien gewinnen.

   Bewusst zurueckhaltend: Aurora aendert Stimmung, nicht Layout. Keine
   Abstaende, keine Schriftgroessen, keine Positionen — nur Flaechen, Rahmen
   und Schein. So bleibt jede Seite bedienbar, auch die, die es noch nicht gibt.
   =========================================================================== */

/* --- Grundflaeche ------------------------------------------------------- */

body.theme-aurora.dark-mode {
    /* Zwei weiche Lichtquellen ueber dem Grundton statt einer flachen Flaeche.
       fixed, damit der Verlauf beim Scrollen stehen bleibt. */
    background-color: var(--bg-dark, #12121e);
    background-image:
        radial-gradient(1200px 700px at 82% -12%, rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.20), transparent 62%),
        radial-gradient(900px 600px at 8% 108%, rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.13), transparent 58%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --- Hintergrundbild-Ebene ---------------------------------------------- */

body.theme-aurora.dark-mode .aurora-module-bg {
    position: fixed;
    top: 0;
    right: 0;
    width: min(52vw, 900px);
    height: 100vh;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.16;
    /* Nach links auslaufen lassen, damit keine sichtbare Kante entsteht. */
    -webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 82%);
            mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 82%);
    pointer-events: none;
    z-index: 0;
}

/* Ohne Aurora bleibt das Element im Markup, darf aber nichts zeigen. */
body:not(.theme-aurora) .aurora-module-bg { display: none; }

/* Inhalte ueber die Bildebene heben — sonst liegt das Bild auf den Karten. */
body.theme-aurora.dark-mode .main-content > *:not(.aurora-module-bg) {
    position: relative;
    z-index: 1;
}

/* --- Karten und Flaechen ------------------------------------------------ */

body.theme-aurora.dark-mode .card,
body.theme-aurora.dark-mode .glass-card,
body.theme-aurora.dark-mode .modal-content,
body.theme-aurora.dark-mode .dropdown-menu {
    background-color: rgba(28, 28, 46, 0.72);
    border-color: rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.22);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

body.theme-aurora.dark-mode .card:hover {
    border-color: rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.38);
    box-shadow: 0 6px 26px rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.14);
}

body.theme-aurora.dark-mode .sidebar,
body.theme-aurora.dark-mode .app-sidebar {
    background-color: rgba(19, 19, 31, 0.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.16);
}

body.theme-aurora.dark-mode .table > :not(caption) > * > * {
    background-color: transparent;
}

/* --- Akzente ------------------------------------------------------------ */

body.theme-aurora.dark-mode .btn-gradient,
body.theme-aurora.dark-mode .btn-primary {
    box-shadow: 0 2px 16px rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.34);
}

body.theme-aurora.dark-mode .nav-link.active,
body.theme-aurora.dark-mode .sidebar-nav-item.is-active,
body.theme-aurora.dark-mode .universe-nav-link.is-current {
    background-color: rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.16);
    border-radius: 8px;
}

body.theme-aurora.dark-mode a:not(.btn):hover {
    color: var(--aurora-accent, #6f42c1);
}

body.theme-aurora.dark-mode :focus-visible {
    outline: 2px solid var(--aurora-accent, #6f42c1);
    outline-offset: 2px;
}

/* --- Zustand des Umschalters -------------------------------------------- */
/* Wird von toggleAuroraTheme() gesetzt (layout.php) — auch im Light Mode, damit
   der Knopf die gespeicherte Wahl ehrlich anzeigt. Deshalb ohne .dark-mode. */

body.theme-aurora #auroraToggleBtn,
#auroraToggleBtn.is-active {
    color: var(--aurora-accent, #6f42c1);
    border-color: rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.55);
    box-shadow: 0 0 12px rgba(var(--aurora-accent-rgb, 111, 66, 193), 0.28);
}

/* --- Ruecksichtnahme ---------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
    body.theme-aurora.dark-mode .card,
    body.theme-aurora.dark-mode .glass-card,
    body.theme-aurora.dark-mode .modal-content,
    body.theme-aurora.dark-mode .dropdown-menu,
    body.theme-aurora.dark-mode .sidebar,
    body.theme-aurora.dark-mode .app-sidebar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--bg-card, #1c1c2e);
    }
}

@media print {
    body.theme-aurora.dark-mode { background-image: none; }
    body.theme-aurora.dark-mode .aurora-module-bg { display: none; }
}