/* Dark mode – variabler overskrives når .theme-dark er på html */
html.theme-dark {
    --bg-page: #1a1a1c;
    --bg-card: #252528;
    --bg-card-hover: #2d2d30;
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0a0;
    --border: #3a3a3e;
    --primary: #5a9a4a;
    --secondary: #6bb858;
    --accent: #8bc34a;
    --navbar-bg: linear-gradient(90deg, #2d4a26, #3d5c35);
    --input-bg: #2d2d30;
    --input-border: #3a3a3e;
    --slider-track: #3a3a3e;
    --alert-success-bg: #1e3d1e;
    --alert-warning-bg: #3d3500;
    --alert-danger-bg: #3d1e1e;
}

html.theme-light,
html:not(.theme-dark) {
    --bg-page: #f8faf8;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f5f5;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border: #e0e0e0;
    --primary: #2d5a27;
    --secondary: #4a7c43;
    --accent: #8bc34a;
    --navbar-bg: linear-gradient(90deg, #2d5a27, #4a7c43);
    --input-bg: #fff;
    --input-border: #e0e0e0;
    --slider-track: #e8e8e8;
    --alert-success-bg: #d4edda;
    --alert-warning-bg: #fff3cd;
    --alert-danger-bg: #f8d7da;
}

html.theme-dark body { background: var(--bg-page); color: var(--text-primary); }
html.theme-dark .step-section,
html.theme-dark .konto-section { background: var(--bg-card); border-left-color: var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
html.theme-dark .navbar { background: var(--navbar-bg); }
html.theme-dark .section-title { color: var(--primary); }
html.theme-dark .budget-amount { color: var(--primary); }
html.theme-dark .text-muted { color: var(--text-secondary) !important; }
html.theme-dark .store-chip { background: var(--bg-card-hover); border-color: var(--border); }
html.theme-dark .store-chip.selected { border-color: var(--accent); background: rgba(139, 195, 74, 0.2); }
html.theme-dark .day-card { background: var(--bg-card-hover); border-color: var(--border); }
html.theme-dark .meal-row { background: var(--bg-card); border-color: var(--border); }
html.theme-dark .form-control,
html.theme-dark input[type="number"],
html.theme-dark input[type="password"],
html.theme-dark input[type="email"] { background: var(--input-bg); border-color: var(--input-border); color: var(--text-primary); }
html.theme-dark .recipe-mini { background: var(--bg-card); border-left-color: var(--accent); }
html.theme-dark .store-list { background: var(--bg-card); }
html.theme-dark .alert-success { background: var(--alert-success-bg); }
html.theme-dark .alert-warning { background: var(--alert-warning-bg); }
html.theme-dark .alert-danger { background: var(--alert-danger-bg); }
html.theme-dark .modal-content { background: var(--bg-card); color: var(--text-primary); }
html.theme-dark .btn-outline-secondary { border-color: var(--border); color: var(--text-secondary); }
html.theme-dark .btn-outline-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); }
html.theme-dark .login-container,
html.theme-dark .login-topbar .btn-outline-secondary,
html.theme-dark .box { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
html.theme-dark .login-topbar .btn-outline-secondary { border-color: var(--border); color: var(--text-secondary); }
html.theme-dark .login-topbar .btn-outline-secondary:hover { background: var(--bg-card-hover); color: var(--text-primary); }
html.theme-dark .admin-card { background: var(--bg-card); box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
html.theme-dark .admin-card h2 { color: var(--primary); }
html.theme-dark .user-row { background: var(--bg-card-hover); }
html.theme-dark .user-row.blocked { background: rgba(220, 53, 69, 0.15); }
html.theme-dark .scraper-card { background: var(--bg-card-hover); border-color: var(--border); }
html.theme-dark .scraper-card.running { background: rgba(255, 193, 7, 0.15); }
html.theme-dark .scraper-card.success { background: rgba(139, 195, 74, 0.15); }
html.theme-dark .scraper-card.error { background: rgba(220, 53, 69, 0.15); }
html.theme-dark .refresh-indicator { color: var(--text-secondary); }
html.theme-dark .scraper-name { color: var(--primary); }
html.theme-dark .user-email { color: var(--primary); }
html.theme-dark .user-meta { color: var(--text-secondary); }
html.theme-dark .user-ip { color: var(--text-secondary); }
html.theme-dark .admin-card .table { color: var(--text-primary); }
html.theme-dark .admin-card .table thead { background: var(--bg-card-hover); color: var(--text-primary); }
html.theme-dark .admin-card .table tbody tr:hover { background: var(--bg-card-hover); }
html.theme-dark .admin-card .table-light thead { background: var(--bg-card-hover); }