/* =============================================================================
   Theme – Fam. Götze · Blau
   Visuelle Identität: Primärfarbe, Glassmorphism, Border Radius
   
   Überschreibt/ergänzt Basisfarben aus styles.css
   Teil der 3-Layer-Architektur (Layer 2: Visuelle Identität)
   ============================================================================= */

/* --- Primärfarbe & Login-Hintergrund --------------------------------------- */
:root {
    --color-primary:       #0071e3;
    --color-primary-hover: oklch(from var(--color-primary) calc(1 * 1.2) c h);
    --color-primary-light: rgba(0, 113, 227, 0.15);

    /* Login-Hintergrund – dunkles Blau/Violett */
    --color-bg-gradient:   linear-gradient(135deg, #1a1d2e 0%, #2d1b4e 35%, #1e3a5f 65%, #2a4858 100%);
    
    /* Standard: Light Mode Hintergrund */
    --color-background-1:  linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #fdfeff 100%);

    /* Glassmorphism – Light Mode */
    --color-background-2:       rgba(255, 255, 255, 0.65);
    --color-background-3:       rgba(255, 255, 255, 0.85);
    --blur-strength:            20px;
    --glass-border:             1px solid rgba(0, 0, 0, 0.15);
    --color-shadow:             rgba(0, 0, 0, 0.15);
    
    /* Border Radius – Hierarchisches 5-Stufen-System */
    --radius-xs:                4px;     /* Mini-Elemente (Tags, Mini-Badges in Chips) */
    --radius-sm:                6px;     /* Kleine Elemente (Event-Chips, kleine Buttons) */
    --radius-md:                10px;    /* Mittlere Elemente (Buttons, Inputs) */
    --radius-lg:                14px;    /* Große Elemente (Widgets, Cards) */
    --radius-xl:                20px;    /* Extra-große Container (Modals, große Cards) */
    --radius-pill:              9999px;  /* Vollständig rund (Pills, Badges) */
    --radius-round:             50%;     /* Perfekte Kreise (Avatare, Dots) */
}

/* --- Explizite Theme-Wahl: Light Mode ----------------------------------- */
html[data-theme="light"],
html[data-theme="light"] body {
    --color-background-1:  linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #fdfeff 100%);
    --color-primary-light: rgba(0, 113, 227, 0.15);
    
    /* Glassmorphism – Light Mode */
    --color-background-2:  rgba(255, 255, 255, 0.65);
    --color-background-3:  rgba(255, 255, 255, 0.85);
    --blur-strength:       20px;
    --glass-border:        1px solid rgba(0, 0, 0, 0.15);
    --color-shadow:        rgba(0, 0, 0, 0.15);
    
    /* Border Radius – Hierarchisches 5-Stufen-System */
    --radius-xs:           4px;     /* Mini-Elemente (Tags, Mini-Badges in Chips) */
    --radius-sm:           6px;     /* Kleine Elemente (Event-Chips, kleine Buttons) */
    --radius-md:           10px;    /* Mittlere Elemente (Buttons, Inputs) */
    --radius-lg:           14px;    /* Große Elemente (Widgets, Cards) */
    --radius-xl:           20px;    /* Extra-große Container (Modals, große Cards) */
    --radius-pill:         9999px;  /* Vollständig rund (Pills, Badges) */
    --radius-round:        50%;     /* Perfekte Kreise (Avatare, Dots) */
}

/* --- Explizite Theme-Wahl: Dark Mode ------------------------------------ */
html[data-theme="dark"],
html[data-theme="dark"] body {
    --color-background-1:  linear-gradient(135deg, #1a1d2e 0%, #2d1b4e 35%, #1e3a5f 65%, #2a4858 100%);
    --color-primary-light: rgba(0, 113, 227, 0.2);
    
    /* Glassmorphism – Dark Mode */
    --color-background-2:  rgba(30, 35, 50, 0.6);
    --color-background-3:  rgba(45, 50, 70, 0.7);
    --blur-strength:       30px;
    --glass-border:        1px solid rgba(255, 255, 255, 0.1);
    --color-shadow:        rgba(0, 0, 0, 0.3);
    
    /* Border Radius – Hierarchisches 5-Stufen-System */
    --radius-xs:           4px;     /* Mini-Elemente (Tags, Mini-Badges in Chips) */
    --radius-sm:           6px;     /* Kleine Elemente (Event-Chips, kleine Buttons) */
    --radius-md:           10px;    /* Mittlere Elemente (Buttons, Inputs) */
    --radius-lg:           14px;    /* Große Elemente (Widgets, Cards) */
    --radius-xl:           20px;    /* Extra-große Container (Modals, große Cards) */
    --radius-pill:         9999px;  /* Vollständig rund (Pills, Badges) */
    --radius-round:        50%;     /* Perfekte Kreise (Avatare, Dots) */
}

/* --- Auto-Modus folgt Browser/OS-Präferenz ------------------------------ */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --color-background-1:  linear-gradient(135deg, #1a1d2e 0%, #2d1b4e 35%, #1e3a5f 65%, #2a4858 100%);
        --color-primary-light: rgba(0, 113, 227, 0.2);
        
        /* Glassmorphism – Dark Mode (Auto) */
        --color-background-2:  rgba(30, 35, 50, 0.6);
        --color-background-3:  rgba(45, 50, 70, 0.7);
        --blur-strength:       30px;
        --glass-border:        1px solid rgba(255, 255, 255, 0.1);
        --color-shadow:        rgba(0, 0, 0, 0.3);
        
        /* Border Radius – Hierarchisches 5-Stufen-System */
        --radius-xs:           4px;     /* Mini-Elemente (Tags, Mini-Badges in Chips) */
        --radius-sm:           6px;     /* Kleine Elemente (Event-Chips, kleine Buttons) */
        --radius-md:           10px;    /* Mittlere Elemente (Buttons, Inputs) */
        --radius-lg:           14px;    /* Große Elemente (Widgets, Cards) */
        --radius-xl:           20px;    /* Extra-große Container (Modals, große Cards) */
        --radius-pill:         9999px;  /* Vollständig rund (Pills, Badges) */
        --radius-round:        50%;     /* Perfekte Kreise (Avatare, Dots) */
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="auto"] {
        --color-background-1:  linear-gradient(135deg, #f8fbff 0%, #ffffff 50%, #fdfeff 100%);
        --color-primary-light: rgba(0, 113, 227, 0.15);
        
        /* Glassmorphism – Light Mode (Auto) */
        --color-background-2:  rgba(255, 255, 255, 0.65);
        --color-background-3:  rgba(255, 255, 255, 0.85);
        --blur-strength:       20px;
        --glass-border:        1px solid rgba(0, 0, 0, 0.15);
        --color-shadow:        rgba(0, 0, 0, 0.15);
        
        /* Border Radius – Hierarchisches 5-Stufen-System */
        --radius-xs:           4px;     /* Mini-Elemente (Tags, Mini-Badges in Chips) */
        --radius-sm:           6px;     /* Kleine Elemente (Event-Chips, kleine Buttons) */
        --radius-md:           10px;    /* Mittlere Elemente (Buttons, Inputs) */
        --radius-lg:           14px;    /* Große Elemente (Widgets, Cards) */
        --radius-xl:           20px;    /* Extra-große Container (Modals, große Cards) */
        --radius-pill:         9999px;  /* Vollständig rund (Pills, Badges) */
        --radius-round:        50%;     /* Perfekte Kreise (Avatare, Dots) */
    }
}

/* --- 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%);
}

/* =============================================================================
   Glassmorphism Basis-Komponente
   ============================================================================= */

/* Glassmorphism Basis-Style für Layout-Komponenten */
.glass-panel {
    background: var(--color-background-2);
    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-strength)) saturate(180%);
    border: var(--glass-border);
    box-shadow: 0 4px 16px var(--color-shadow);
}