/* ===========================================
   DARK MODE CSS - ArtistArchiv.es
   Version: 1.0
   Datum: 2025-12-27
   
   Verwendung: 
   <link rel="stylesheet" href="/css/darkmode.css">
   =========================================== */

/* ===========================================
   CSS VARIABLES - Light & Dark Mode
   =========================================== */
:root {
    /* Hintergründe */
    --bg-body: #cdcdcd;
    --bg-body-overlay: rgba(205, 205, 205, 0.96);
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-lighter: #e9ecef;
    
    /* Navbar */
    --navbar-gradient-start: rgba(248,248,248,0.75);
    --navbar-gradient-end: rgba(184,184,184,0.75);
    --navbar-border: rgba(45,55,72,0.1);
    --navbar-menu-bg: rgba(45,55,72,0.95);
    --navbar-menu-active: rgba(45,55,72,0.05);
    --mobile-menu-bg: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.95) 100%);
    --mobile-menu-item-bg: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.6) 100%);
    --mobile-menu-item-hover: linear-gradient(135deg, rgba(45,55,72,0.1) 0%, rgba(45,55,72,0.15) 100%);
    --mobile-menu-border: rgba(45,55,72,0.1);
    --mobile-menu-border-hover: rgba(45,55,72,0.3);
    
    /* Texte */
    --text-primary: #2d3748;
    --text-secondary: #4a5568;
    --text-muted: #666666;
    --text-white: #ffffff;
    --text-black: #000000;
    
    /* Links */
    --link-primary: #2196F3;
    --link-hover: #1976D2;
    --link-secondary: #4a90e2;
    --link-secondary-hover: #357ABD;
    
    /* Karten & Boxen */
    --card-bg: rgba(255,255,255,0.85);
    --card-border: rgba(255,255,255,0.2);
    --card-shadow: rgba(31,38,135,0.15);
    
    /* Buttons & Interactive */
    --button-bg: linear-gradient(135deg, #2d3748 0%, #374151 100%);
    --button-text: #ffffff;
    --button-hover-bg: linear-gradient(135deg, #2d3748 0%, #374151 50%, #4b5563 100%);
    --button-border: #2d3748;
    
    /* Tabellen */
    --table-header-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --table-row-hover: linear-gradient(135deg, rgba(45,55,72,0.05) 0%, rgba(45,55,72,0.1) 100%);
    --table-border: rgba(45,55,72,0.1);
    --table-row-even: #ffffff;
    --table-row-odd: #f0f0f0;
    --table-hover-bg: #e3f2fd;
    --table-header-cell: #acacac;
    
    /* Footer */
    --footer-bg: #000000;
    --footer-text: #ffffff;
    
    /* Spezielle UI Elemente */
    --overlay-bg: rgba(45,55,72,0.95);
    --highlight-bg: rgba(74, 144, 226, 0.1);
    --progress-bg: linear-gradient(90deg, #2196F3 0%, rgba(33, 150, 243, 0.3) 70%, transparent 100%);
    --progress-bar-bg: linear-gradient(90deg, #2d3748, #374151, #4b5563);
    --separator: rgba(45,55,72,0.1);
    --error-color: #ef4444;
}

/* Dark Mode */
[data-theme="dark"] {
    /* Hintergründe */
    --bg-body: #1a202c;
    --bg-body-overlay: rgba(26, 32, 44, 0.96);
    --bg-white: #2d3748;
    --bg-light: #374151;
    --bg-lighter: #4b5563;
    
    /* Navbar */
    --navbar-gradient-start: rgba(45,55,72,0.85);
    --navbar-gradient-end: rgba(26,32,44,0.85);
    --navbar-border: rgba(255,255,255,0.1);
    --navbar-menu-bg: rgba(26,32,44,0.95);
    --navbar-menu-active: rgba(255,255,255,0.1);
    --mobile-menu-bg: linear-gradient(180deg, rgba(26,32,44,0.98) 0%, rgba(45,55,72,0.95) 100%);
    --mobile-menu-item-bg: linear-gradient(135deg, rgba(45,55,72,0.8) 0%, rgba(55,65,81,0.6) 100%);
    --mobile-menu-item-hover: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.15) 100%);
    --mobile-menu-border: rgba(255,255,255,0.1);
    --mobile-menu-border-hover: rgba(255,255,255,0.3);
    
    /* Texte */
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --text-white: #e2e8f0;
    --text-black: #e2e8f0;
    
    /* Links */
    --link-primary: #63b3ed;
    --link-hover: #4299e1;
    --link-secondary: #60a5fa;
    --link-secondary-hover: #3b82f6;
    
    /* Karten & Boxen */
    --card-bg: rgba(45,55,72,0.85);
    --card-border: rgba(255,255,255,0.1);
    --card-shadow: rgba(0,0,0,0.3);
    
    /* Buttons & Interactive */
    --button-bg: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    --button-text: #ffffff;
    --button-hover-bg: linear-gradient(135deg, #4299e1 0%, #3182ce 50%, #2c5282 100%);
    --button-border: #4299e1;
    
    /* Tabellen */
    --table-header-bg: linear-gradient(135deg, #374151 0%, #4b5563 100%);
    --table-row-hover: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.1) 100%);
    --table-border: rgba(255,255,255,0.1);
    --table-row-even: #2d3748;
    --table-row-odd: #374151;
    --table-hover-bg: #4b5563;
    --table-header-cell: #4b5563;
    
    /* Footer */
    --footer-bg: #1a202c;
    --footer-text: #e2e8f0;
    
    /* Spezielle UI Elemente */
    --overlay-bg: rgba(26,32,44,0.95);
    --highlight-bg: rgba(99, 179, 237, 0.15);
    --progress-bg: linear-gradient(90deg, #63b3ed 0%, rgba(99, 179, 237, 0.3) 70%, transparent 100%);
    --progress-bar-bg: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb);
    --separator: rgba(255,255,255,0.1);
}

/* ===========================================
   SMOOTH TRANSITIONS
   =========================================== */
body,
.navbar,
#artist-footer,
.artist-info-header,
.artist-info-card,
.album-card,
.cover-only-card,
.stats-card,
.filter-group,
.dynamic-anchor-menu,
#anchor-menu,
#filter-menu,
a {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ===========================================
   THEME SWITCHER STYLES
   =========================================== */
.theme-switcher {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    padding: 6px 10px;
    z-index: 2000;
}

.theme-switcher-label {
    font-size: 18px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.2s ease;
    user-select: none;
    display: flex;
    align-items: center;
}

.theme-switcher-label:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.theme-switcher-label.active {
    opacity: 1;
    transform: scale(1.2);
}

.theme-switcher-divider {
    width: 1px;
    height: 18px;
    background: rgba(255,255,255,0.3);
    margin: 0 2px;
}

@media (max-width: 768px) {
    .theme-switcher {
        left: 10px;
        padding: 4px 8px;
        gap: 6px;
    }
    
    .theme-switcher-label {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .theme-switcher {
        left: 8px;
        padding: 3px 6px;
        gap: 4px;
    }
    
    .theme-switcher-label {
        font-size: 14px;
    }
    
    .theme-switcher-divider {
        height: 14px;
    }
}