/* ===== THEME SYSTEM ===== */
/* Alle Theme-Variablen können hier zentral konfiguriert werden */

/* ===== THEME 1: BLAU (Standard) ===== */
:root.theme-blue,
:root:not([class*="theme-"]) {
    --page-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --primary-color: #667eea;
    --primary-hover: #5568d3;
    --primary-light: #f0f4ff;
    --panel-bg: #f8faff;
    --header-border: #667eea;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --todo-bg: #d1ecf1;
    --todo-border: #17a2b8;
    --review-bg: #e8f5e9;
    --clarify-bg: #fff3cd;
    --admin-accent: #ff9800;
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #6b7280;
}

/* ===== THEME 2: GRÜN (Beruhigend) ===== */
:root.theme-green {
    --page-gradient: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    --primary-color: #27ae60;
    --primary-hover: #229954;
    --primary-light: #eafaf1;
    --panel-bg: #f1fdf8;
    --header-border: #27ae60;
    --secondary-color: #76d7c4;
    --success-color: #1abc9c;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #3498db;
    --todo-bg: #d5f4e6;
    --todo-border: #27ae60;
    --review-bg: #e8f8f5;
    --clarify-bg: #fef5e7;
    --admin-accent: #f39c12;
    --text-primary: #1b4d2f;
    --text-secondary: #2d5a3d;
    --text-light: #3f6b52;
}

/* ===== THEME 3: ORANGE/ROT (Energetisch) ===== */
:root.theme-orange {
    --page-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    --primary-color: #ff6b6b;
    --primary-hover: #ee5a52;
    --primary-light: #ffe0e0;
    --panel-bg: #fff8f7;
    --header-border: #ff6b6b;
    --secondary-color: #fd8c8c;
    --success-color: #51cf66;
    --danger-color: #e03131;
    --warning-color: #ffa94d;
    --info-color: #4c6ef5;
    --todo-bg: #ffe0e0;
    --todo-border: #ff6b6b;
    --review-bg: #fff3bf;
    --clarify-bg: #ffe066;
    --admin-accent: #4c6ef5;
    --text-primary: #8b2020;
    --text-secondary: #a02e2e;
    --text-light: #9c3a3a;
}

/* ===== THEME 4: DUNKELGRAU (Low-Light / Professional) ===== */
:root.theme-dark {
    --page-gradient: linear-gradient(135deg, #495057 0%, #34373b 100%);
    --primary-color: #495057;
    --primary-hover: #3d444d;
    --primary-light: #e9ecef;
    --panel-bg: #e9ecef;
    --header-border: #495057;
    --secondary-color: #868e96;
    --success-color: #51cf66;
    --danger-color: #ff6b6b;
    --warning-color: #ffd43b;
    --info-color: #74c0fc;
    --todo-bg: #d3f9d8;
    --todo-border: #51cf66;
    --review-bg: #d3f9d8;
    --clarify-bg: #fff3bf;
    --admin-accent: #ff922b;
    --text-primary: #1a1d20;
    --text-secondary: #2e3236;
    --text-light: #343a40;
}

/* ===== THEME 5: LILA/PINK (Kreativ) ===== */
:root.theme-purple {
    --page-gradient: linear-gradient(135deg, #9b59b6 0%, #d35400 100%);
    --primary-color: #9b59b6;
    --primary-hover: #8e44ad;
    --primary-light: #f4ecf7;
    --panel-bg: #faf7fc;
    --header-border: #9b59b6;
    --secondary-color: #af7ac5;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #3498db;
    --todo-bg: #ebdef0;
    --todo-border: #9b59b6;
    --review-bg: #eafaf1;
    --clarify-bg: #fdebd0;
    --admin-accent: #e67e22;
    --text-primary: #552d7f;
    --text-secondary: #6d3fa0;
    --text-light: #6f4599;
}

/* ===== THEME 6: SONNENAUFGANG ===== */
:root.theme-sunrise {
    --page-gradient: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #fdb833 100%);
    --primary-color: #ff6b35;
    --primary-hover: #e85a2a;
    --primary-light: #ffe8d6;
    --panel-bg: #fff5ee;
    --header-border: #ff6b35;
    --secondary-color: #fdb833;
    --success-color: #52c41a;
    --danger-color: #f5222d;
    --warning-color: #faad14;
    --info-color: #1890ff;
    --todo-bg: #ffe7ba;
    --todo-border: #ff6b35;
    --text-primary: #8b4513;
    --text-secondary: #a0552d;
    --text-light: #8e5a31;
    --review-bg: #fff1f0;
    --clarify-bg: #ffc53d;
    --admin-accent: #ff7a45;
}

/* ===== THEME 7: NERD / GEEK ===== */
:root.theme-nerd {
    --page-gradient: linear-gradient(135deg, #00ff00 0%, #00c800 100%);
    --primary-color: #00cc44;
    --primary-hover: #00bb33;
    --primary-light: #e6ffe6;
    --panel-bg: #262626;
    --header-border: #00ff00;
    --secondary-color: #00ff00;
    --success-color: #00ff00;
    --danger-color: #ff0066;
    --warning-color: #ffff00;
    --info-color: #00ffff;
    --todo-bg: #ccffcc;
    --todo-border: #00cc44;
    --review-bg: #e6ffe6;
    --clarify-bg: #ffff00;
    --admin-accent: #ff00ff;
    --text-primary: #e6ffe6;
    --text-secondary: #b3f5b3;
    --text-light: #8ae88a;
}

/* ===== THEME 8: TECHIE / CYBERPUNK ===== */
:root.theme-techie {
    --page-gradient: linear-gradient(135deg, #0099ff 0%, #ff00ff 100%);
    --primary-color: #0099ff;
    --primary-hover: #0080dd;
    --primary-light: #e6f3ff;
    --panel-bg: #1a1a2e;
    --header-border: #0099ff;
    --secondary-color: #ff00ff;
    --success-color: #00ffff;
    --danger-color: #ff0055;
    --warning-color: #ffaa00;
    --info-color: #00ffff;
    --todo-bg: #ccf0ff;
    --todo-border: #0099ff;
    --review-bg: #ffe6ff;
    --clarify-bg: #ffff99;
    --admin-accent: #ff00ff;
    --text-primary: #e6f7ff;
    --text-secondary: #b3e7ff;
    --text-light: #8ad7ff;
}

/* ===== THEME 9: HACKER / TERMINAL ===== */
:root.theme-hacker {
    --page-gradient: linear-gradient(135deg, #0d3b1f 0%, #1a5c3a 100%);
    --primary-color: #00ff00;
    --primary-hover: #00dd00;
    --primary-light: #e6ffe6;
    --panel-bg: #1a2a1a;
    --header-border: #00ff00;
    --secondary-color: #00cc44;
    --success-color: #00ff00;
    --danger-color: #ff3333;
    --warning-color: #ffff00;
    --info-color: #00ffff;
    --todo-bg: #ccffcc;
    --todo-border: #00ff00;
    --review-bg: #e6ffe6;
    --clarify-bg: #ffff99;
    --admin-accent: #ff0000;
    --text-primary: #d6ffd6;
    --text-secondary: #a5f2a5;
    --text-light: #7fe57f;
}

/* ===== THEME 10: WALD ===== */
:root.theme-forest {
    --page-gradient: linear-gradient(135deg, #2d5016 0%, #4a7c3d 100%);
    --primary-color: #3d6a2d;
    --primary-hover: #356123;
    --primary-light: #e8f1e1;
    --panel-bg: #f5f8f2;
    --header-border: #3d6a2d;
    --secondary-color: #6b8e44;
    --success-color: #7cb342;
    --danger-color: #c64545;
    --warning-color: #f9a825;
    --info-color: #5c9ead;
    --todo-bg: #dff0d8;
    --todo-border: #3d6a2d;
    --review-bg: #e8f1e1;
    --clarify-bg: #fef6d6;
    --admin-accent: #b8860b;
    --text-primary: #1B4D2F;
    --text-secondary: #2D5A3D;
    --text-light: #3f6d52;
}

/* ===== THEME 11: KÜSTE ===== */
:root.theme-coast {
    --page-gradient: linear-gradient(135deg, #0077be 0%, #00a8e8 100%);
    --primary-color: #0099cc;
    --primary-hover: #0088bb;
    --primary-light: #e0f4ff;
    --panel-bg: #f0fafd;
    --header-border: #0099cc;
    --secondary-color: #00bcd4;
    --success-color: #26c6da;
    --danger-color: #d32f2f;
    --warning-color: #ffab00;
    --info-color: #00bcd4;
    --todo-bg: #b3e5fc;
    --todo-border: #0099cc;
    --review-bg: #e0f2f1;
    --clarify-bg: #fff9c4;
    --admin-accent: #ff6f00;
    --text-primary: #004d7f;
    --text-secondary: #004d7f;
    --text-light: #2a6d99;
}

/* ===== THEME 12: WUESTE ===== */
:root.theme-desert {
    --page-gradient: linear-gradient(135deg, #cba977 0%, #e6d3a3 100%);
    --primary-color: #c89b4a;
    --primary-hover: #b88638;
    --primary-light: #fff2d6;
    --panel-bg: #fff9ef;
    --header-border: #c89b4a;
    --secondary-color: #a97c50;
    --success-color: #2e7d32;
    --danger-color: #b23b3b;
    --warning-color: #e0a800;
    --info-color: #2f6fb2;
    --todo-bg: #fbe8c7;
    --todo-border: #c89b4a;
    --review-bg: #f4f9ee;
    --clarify-bg: #fff1b8;
    --admin-accent: #7a5a2c;
    --text-primary: #4a3a2b;
    --text-secondary: #5f4a34;
    --text-light: #7a6146;
}

/* ===== THEME 13: SCHIEFER ===== */
:root.theme-slate {
    --page-gradient: linear-gradient(135deg, #4b5563 0%, #1f2933 100%);
    --primary-color: #5b6b82;
    --primary-hover: #4f5f74;
    --primary-light: #e7ecf2;
    --panel-bg: #f2f5f8;
    --header-border: #5b6b82;
    --secondary-color: #94a3b8;
    --success-color: #16a34a;
    --danger-color: #dc2626;
    --warning-color: #f59e0b;
    --info-color: #0284c7;
    --todo-bg: #e2e8f0;
    --todo-border: #5b6b82;
    --review-bg: #e7f6ec;
    --clarify-bg: #fff7db;
    --admin-accent: #ef6c00;
    --text-primary: #1f2933;
    --text-secondary: #334155;
    --text-light: #475569;
}

/* ===== THEME 14: NOIR ===== */
:root.theme-noir {
    --page-gradient: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    --primary-color: #1f2937;
    --primary-hover: #111827;
    --primary-light: #1f2937;
    --panel-bg: #111827;
    --header-border: #334155;
    --secondary-color: #64748b;
    --success-color: #22c55e;
    --danger-color: #f43f5e;
    --warning-color: #f59e0b;
    --info-color: #38bdf8;
    --todo-bg: #0f172a;
    --todo-border: #334155;
    --review-bg: #0f172a;
    --clarify-bg: #1e293b;
    --admin-accent: #f59e0b;
    --text-primary: #e5e7eb;
    --text-secondary: #cbd5e1;
    --text-light: #94a3b8;
}

/* ===== THEME 15: PAPER ===== */
:root.theme-paper {
    --page-gradient: linear-gradient(135deg, #f7f3e8 0%, #eae3d5 100%);
    --primary-color: #c9b38c;
    --primary-hover: #b89f76;
    --primary-light: #fbf6ee;
    --panel-bg: #fffaf2;
    --header-border: #c9b38c;
    --secondary-color: #8c7b66;
    --success-color: #3a7d44;
    --danger-color: #b0413e;
    --warning-color: #d39e00;
    --info-color: #3b82a0;
    --todo-bg: #f2e6cf;
    --todo-border: #c9b38c;
    --review-bg: #f2f7ef;
    --clarify-bg: #fff2c2;
    --admin-accent: #6b4f2a;
    --text-primary: #2e2a24;
    --text-secondary: #4b4338;
    --text-light: #6a5d4d;
}

/* ===== THEME 16: COPPER ===== */
:root.theme-copper {
    --page-gradient: linear-gradient(135deg, #7c3f2a 0%, #c46a3a 100%);
    --primary-color: #b85c2b;
    --primary-hover: #a65227;
    --primary-light: #fde7da;
    --panel-bg: #fff6f0;
    --header-border: #b85c2b;
    --secondary-color: #d08b5d;
    --success-color: #2e7d32;
    --danger-color: #c62828;
    --warning-color: #f59e0b;
    --info-color: #1d6fa5;
    --todo-bg: #f8dcc9;
    --todo-border: #b85c2b;
    --review-bg: #eef6f0;
    --clarify-bg: #ffe7b0;
    --admin-accent: #6f2d16;
    --text-primary: #4a2618;
    --text-secondary: #5e3422;
    --text-light: #7a4a33;
}

/* ===== THEME 17: NORDIC ===== */
:root.theme-nordic {
    --page-gradient: linear-gradient(135deg, #5b7aa4 0%, #2f3e5c 100%);
    --primary-color: #4e6b8f;
    --primary-hover: #425a78;
    --primary-light: #e7edf5;
    --panel-bg: #f4f7fb;
    --header-border: #4e6b8f;
    --secondary-color: #8aa0bf;
    --success-color: #2f855a;
    --danger-color: #c53030;
    --warning-color: #d69e2e;
    --info-color: #3182ce;
    --todo-bg: #dfe7f2;
    --todo-border: #4e6b8f;
    --review-bg: #e7f3ed;
    --clarify-bg: #fff7d6;
    --admin-accent: #2c5282;
    --text-primary: #1f2a3a;
    --text-secondary: #334155;
    --text-light: #4a607a;
}

/* ===== UNIVERSELLE FARBEN (Unabhängig vom Theme) ===== */
:root {
    /* Neutrale Grenz- und Hilfsfarben - können von Themes überschrieben werden */
    --border-color: #e0e0e0;
    --bg-light: #f9f9f9;
    --bg-white: #ffffff;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.1);
    --input-bg: var(--panel-bg);
    --card-bg: rgba(0, 0, 0, 0.02);
}

/* ===== THEME-PICKER BUTTON ===== */
.theme-picker-container {
    position: relative;
    display: inline-block;
}

.theme-picker-button {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 10px 16px;
    font-size: 0.95em;
    font-weight: 500;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 3px 10px rgba(245, 87, 108, 0.3);
    transition: all 0.3s ease;
}

.theme-picker-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(245, 87, 108, 0.5);
}

.theme-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    gap: 0;
    min-width: 180px;
    z-index: 1000;
    margin-top: 8px;
}

.theme-dropdown.active {
    display: flex;
}

.theme-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.95em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
}

.theme-option:hover {
    background: var(--primary-light);
    border-left-color: var(--primary-color);
}

.theme-option.active {
    background: var(--primary-light);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.theme-color-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Farben für jeden Theme-Circle */
.theme-blue-circle { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.theme-green-circle { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); }
.theme-orange-circle { background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); }
.theme-dark-circle { background: linear-gradient(135deg, #495057 0%, #34373b 100%); }
.theme-purple-circle { background: linear-gradient(135deg, #9b59b6 0%, #d35400 100%); }
.theme-sunrise-circle { background: linear-gradient(135deg, #ff6b35 0%, #fdb833 100%); }
.theme-nerd-circle { background: linear-gradient(135deg, #00ff00 0%, #00c800 100%); }
.theme-techie-circle { background: linear-gradient(135deg, #0099ff 0%, #ff00ff 100%); }
.theme-hacker-circle { background: linear-gradient(135deg, #0d3b1f 0%, #00ff00 100%); }
.theme-forest-circle { background: linear-gradient(135deg, #2d5016 0%, #4a7c3d 100%); }
.theme-coast-circle { background: linear-gradient(135deg, #0077be 0%, #00a8e8 100%); }
.theme-desert-circle { background: linear-gradient(135deg, #c89b4a 0%, #e6d3a3 100%); }
.theme-slate-circle { background: linear-gradient(135deg, #4b5563 0%, #1f2933 100%); }
.theme-noir-circle { background: linear-gradient(135deg, #0f172a 0%, #111827 100%); }
.theme-paper-circle { background: linear-gradient(135deg, #f7f3e8 0%, #c9b38c 100%); }
.theme-copper-circle { background: linear-gradient(135deg, #7c3f2a 0%, #c46a3a 100%); }
.theme-nordic-circle { background: linear-gradient(135deg, #5b7aa4 0%, #2f3e5c 100%); }

/* Responsive Design für Theme-Picker */
@media (max-width: 768px) {
    .theme-picker-button {
        padding: 8px 12px;
        font-size: 0.9em;
    }
    
    .theme-dropdown {
        min-width: 160px;
    }
    
    .theme-option {
        padding: 10px 12px;
        font-size: 0.9em;
    }
}