/* ============================================================
   Vereins.Desk – Theme System v3 (Top-Nav, 3 Modi)
   ============================================================ */

/* -- Modus 1: HELL (Standard) -- */
html.mode-light, html:not(.mode-dark):not(.mode-color) {
    --bg-app:           #F8F9FC;
    --bg-nav:           #FFFFFF;
    --bg-card:          #FFFFFF;
    --bg-row-alt:       #F8F9FC;
    --bg-table-row:     #F8F9FC;
    --text-primary:     #111827;
    --text-secondary:   #6B7280;
    --text-nav:         #374151;
    --text-nav-active:  #6366F1;
    --border:           #E5E7EB;
    --accent:           #6366F1;
    --accent-light:     #EEF2FF;
    --accent-hover:     #4F46E5;
    --accent-5:         rgba(99,102,241,0.05);
    --accent-8:         rgba(99,102,241,0.08);
    --accent-20:        rgba(99,102,241,0.20);
    --nav-shadow:       0 1px 0 #E5E7EB;
    --nav-active-border:#6366F1;
    --dropdown-bg:      #FFFFFF;
    --dropdown-shadow:  0 8px 32px rgba(0,0,0,0.12);
    --shadow-card:      0 1px 2px rgba(0,0,0,0.05);
    --shadow-card-hover:0 4px 12px rgba(0,0,0,0.10);
    --shadow-slideout:  -4px 0 24px rgba(0,0,0,0.12);
    --tooltip-bg:       #111827;
    --tooltip-text:     #FFFFFF;
    --scrollbar-thumb:  rgba(0,0,0,0.15);
    --avatar-bg:        #6366F1;
    --avatar-text:      #FFFFFF;
}

/* -- Modus 2: DUNKEL -- */
html.mode-dark {
    --bg-app:           #0D1117;
    --bg-nav:           #161B22;
    --bg-card:          #1C2128;
    --bg-row-alt:       #21262D;
    --bg-table-row:     #21262D;
    --text-primary:     #E6EDF3;
    --text-secondary:   #8B949E;
    --text-nav:         #CDD9E5;
    --text-nav-active:  #818CF8;
    --border:           #30363D;
    --accent:           #818CF8;
    --accent-light:     #1E2048;
    --accent-hover:     #6366F1;
    --accent-5:         rgba(129,140,248,0.05);
    --accent-8:         rgba(129,140,248,0.08);
    --accent-20:        rgba(129,140,248,0.20);
    --nav-shadow:       0 1px 0 #30363D;
    --nav-active-border:#818CF8;
    --dropdown-bg:      #1C2128;
    --dropdown-shadow:  0 8px 32px rgba(0,0,0,0.4);
    --shadow-card:      0 1px 2px rgba(0,0,0,0.3);
    --shadow-card-hover:0 4px 12px rgba(0,0,0,0.4);
    --shadow-slideout:  -4px 0 24px rgba(0,0,0,0.3);
    --tooltip-bg:       #E6EDF3;
    --tooltip-text:     #0D1117;
    --scrollbar-thumb:  rgba(255,255,255,0.15);
    --avatar-bg:        #818CF8;
    --avatar-text:      #FFFFFF;
}

/* -- Modus 3: FARBIG -- */
html.mode-color {
    --bg-app:           #F5F3FF;
    --bg-nav:           #6366F1;
    --bg-card:          #FFFFFF;
    --bg-row-alt:       #FAF9FF;
    --bg-table-row:     #FAF9FF;
    --text-primary:     #1E1B4B;
    --text-secondary:   #6B7280;
    --text-nav:         rgba(255,255,255,0.85);
    --text-nav-active:  #FFFFFF;
    --border:           #DDD6FE;
    --accent:           #7C3AED;
    --accent-light:     #EDE9FE;
    --accent-hover:     #6D28D9;
    --accent-5:         rgba(124,58,237,0.05);
    --accent-8:         rgba(124,58,237,0.08);
    --accent-20:        rgba(124,58,237,0.20);
    --nav-shadow:       0 1px 0 rgba(255,255,255,0.1);
    --nav-active-border:#FFFFFF;
    --dropdown-bg:      #FFFFFF;
    --dropdown-shadow:  0 8px 32px rgba(0,0,0,0.12);
    --shadow-card:      0 1px 2px rgba(0,0,0,0.05);
    --shadow-card-hover:0 4px 12px rgba(0,0,0,0.10);
    --shadow-slideout:  -4px 0 24px rgba(0,0,0,0.12);
    --tooltip-bg:       #6366F1;
    --tooltip-text:     #FFFFFF;
    --scrollbar-thumb:  rgba(99,102,241,0.2);
    --avatar-bg:        rgba(255,255,255,0.2);
    --avatar-text:      #FFFFFF;
}

/* -- Sanfte Uebergaenge -- */
html {
    transition: background-color 0.2s ease, color 0.2s ease;
}
body, .topnav, .main-content, .card, .pv-table, .slideout,
.modal, .btn, .form-input, .form-select, .form-textarea,
.badge, .tab-btn, .stat-card, .alert {
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}