/* assets/css/themes.css — Hell / Dunkel / System-Modus */

/* ============================================================
   DARK-Theme (Standard / data-theme="dark")
   ============================================================ */
:root,
[data-theme="dark"] {
    --c-bg:       #0a0e1a;
    --c-panel:    #111827;
    --c-panel2:   #1a2235;
    --c-border:   #1e2d4a;
    --c-accent:   #00d4ff;
    --c-green:    #22c55e;
    --c-red:      #ef4444;
    --c-warn:     #f59e0b;
    --c-purple:   #7c3aed;
    --c-text:     #e2e8f0;
    --c-text2:    #cbd5e1;
    --c-muted:    #64748b;
    --c-shadow:   rgba(0,0,0,0.5);
    --radius:     10px;
    --font-head:  'Syne', system-ui, sans-serif;
    --font-mono:  'JetBrains Mono', 'Courier New', monospace;

    /* Leaflet-Karte: dunkle Tiles */
    --map-tiles:  'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png';
}

/* ============================================================
   LIGHT-Theme (data-theme="light")
   ============================================================ */
[data-theme="light"] {
    --c-bg:       #f8fafc;
    --c-panel:    #ffffff;
    --c-panel2:   #f1f5f9;
    --c-border:   #e2e8f0;
    --c-accent:   #0284c7;
    --c-green:    #16a34a;
    --c-red:      #dc2626;
    --c-warn:     #d97706;
    --c-purple:   #7c3aed;
    --c-text:     #0f172a;
    --c-text2:    #334155;
    --c-muted:    #94a3b8;
    --c-shadow:   rgba(0,0,0,0.1);
    --radius:     10px;
    --font-head:  'Syne', system-ui, sans-serif;
    --font-mono:  'JetBrains Mono', 'Courier New', monospace;
    --map-tiles:  'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
}

/* ============================================================
   SYSTEM-Modus: folgt dem OS-Theme
   Wird aktiv wenn data-theme="system" oder kein data-theme gesetzt
   und prefers-color-scheme: light greift
   ============================================================ */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        --c-bg:       #f8fafc;
        --c-panel:    #ffffff;
        --c-panel2:   #f1f5f9;
        --c-border:   #e2e8f0;
        --c-accent:   #0284c7;
        --c-green:    #16a34a;
        --c-red:      #dc2626;
        --c-warn:     #d97706;
        --c-purple:   #7c3aed;
        --c-text:     #0f172a;
        --c-text2:    #334155;
        --c-muted:    #94a3b8;
        --c-shadow:   rgba(0,0,0,0.1);
    }
}

/* ============================================================
   Theme-Switcher UI-Komponente
   ============================================================ */
.theme-switcher {
    display: flex;
    gap: 4px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 3px;
}
.theme-btn {
    padding: 5px 9px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all .15s;
    line-height: 1;
}
.theme-btn:hover { color: var(--c-text); }
.theme-btn.active {
    background: var(--c-panel2);
    color: var(--c-accent);
    box-shadow: 0 1px 3px var(--c-shadow);
}

/* ============================================================
   Light-Mode spezifische Overrides für Leaflet-Popup
   ============================================================ */
[data-theme="light"] .leaflet-popup-content-wrapper {
    background: var(--c-panel);
    border: 1px solid var(--c-border);
    box-shadow: 0 4px 20px var(--c-shadow);
    color: var(--c-text);
}
[data-theme="light"] .leaflet-popup-tip {
    background: var(--c-panel);
}

/* Light-Mode: Input-Felder */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: var(--c-panel);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: var(--c-accent);
}

/* Light-Mode: Navbar */
[data-theme="light"] .navbar {
    background: var(--c-panel);
    border-bottom-color: var(--c-border);
    box-shadow: 0 1px 4px var(--c-shadow);
}

/* Light-Mode: Sidebar */
[data-theme="light"] .sidebar {
    background: var(--c-panel);
    border-right-color: var(--c-border);
}

/* Light-Mode: Station-Cards */
[data-theme="light"] .sc {
    background: var(--c-panel);
    border-color: var(--c-border);
}
[data-theme="light"] .sc:hover,
[data-theme="light"] .sc.active {
    background: #eff6ff;
    border-color: var(--c-accent);
}

/* Light-Mode: Auth-Box */
[data-theme="light"] .auth-box {
    background: var(--c-panel);
    border-color: var(--c-border);
    box-shadow: 0 4px 24px var(--c-shadow);
}

/* Light-Mode: Admin-Tables */
[data-theme="light"] .table-wrap { background: var(--c-panel); border-color: var(--c-border); }
[data-theme="light"] th          { background: #f8fafc; }
[data-theme="light"] tr:hover td { background: #f1f5f9; }