/* =============================================================================
   Theme – Fam. Götze · Blau
   Überschreibt Basisfarben aus style.css / styles.css
   ============================================================================= */

/* --- Primärfarbe & Login-Hintergrund --------------------------------------- */
:root {
    --color-primary:       #0071e3;
    --color-primary-hover: #0057b8;
    --color-primary-light: rgba(0, 113, 227, 0.15);

    /* Dashboard-Hintergrund (Light Mode) – subtile Blau/Rosa-Tönung */
    --color-background-1:  linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 50%, #fce4ec 100%);

    /* Login-Hintergrund – dunkles Blau/Violett */
    --color-bg-gradient:   linear-gradient(135deg, #1a1d2e 0%, #2d1b4e 35%, #1e3a5f 65%, #2a4858 100%);
}

/* --- Dark Mode ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background-1:  linear-gradient(135deg, #1a1d2e 0%, #2d1b4e 35%, #1e3a5f 65%, #2a4858 100%);
        --color-primary-light: rgba(0, 113, 227, 0.2);
    }
}

/* --- Explizite Theme-Übersteuerung via data-theme -------------------------- */
html[data-theme="light"] {
    --color-background-1:  linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 50%, #fce4ec 100%);
    --color-primary-light: rgba(0, 113, 227, 0.15);
}

html[data-theme="dark"] {
    --color-background-1:  linear-gradient(135deg, #1a1d2e 0%, #2d1b4e 35%, #1e3a5f 65%, #2a4858 100%);
    --color-primary-light: rgba(0, 113, 227, 0.2);
}

/* --- Sidebar: Toggle-Pfeil in Akzentfarbe ---------------------------------- */
.toggle-arrow {
    filter: brightness(0) saturate(100%)
            invert(27%) sepia(97%) saturate(1200%)
            hue-rotate(196deg) brightness(98%) contrast(94%);
}

.toggle-arrow:hover {
    filter: brightness(0) saturate(100%)
            invert(20%) sepia(99%) saturate(1500%)
            hue-rotate(200deg) brightness(90%) contrast(96%);
}

/* --- Sidebar: Aktives Menüelement Icon ------------------------------------- */
.nav-menu > li.active .icon {
    filter: brightness(0) saturate(100%)
            invert(27%) sepia(97%) saturate(1200%)
            hue-rotate(196deg) brightness(98%) contrast(94%);
}