/* ===================================================================
   poolAI — Light theme (admin toggle)
   Loaded after style.css + theme.css; only overrides colour tokens
   and a few structural rules that need flipping for light mode.
   =================================================================== */

:root {
    --c-bg:           #f0f2f5;
    --c-bg2:          #e4e8ee;
    --c-primary:      #1565c0;
    --c-primary-dk:   #0d47a1;
    --c-accent:       #1976d2;
    --c-orange:       #e65100;
    --c-surface:      rgba(255, 255, 255, 0.92);
    --c-surface-hov:  rgba(255, 255, 255, 0.98);
    --c-border:       rgba(0, 0, 0, 0.13);
    --c-text:         #1a1a2e;
    --c-text-dim:     rgba(26, 26, 46, 0.55);
    --c-error:        #c62828;
    --c-gold:         #f9a825;
    --c-win:          #2e7d32;
    --c-draw:         #757575;
    --c-lose:         #b71c1c;
    --c-supermax:     #e65100;
    --c-max:          #6a1599;
    --shadow:         0 2px 12px rgba(0, 0, 0, 0.12);
}

/* ── Body background ─────────────────────────────────────────── */
html, body {
    background:
        linear-gradient(rgba(240,242,245,0.72), rgba(240,242,245,0.72)),
        url('../../img/ek2024/background2.jpg') center / cover fixed,
        var(--c-bg) !important;
    color: var(--c-text);
}

/* ── Cards & surfaces ────────────────────────────────────────── */
.card,
.card--compact,
.sidebar-right .card,
.profiel-card,
.profiel-stats-card {
    background: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text);
}

.card-header,
.gb-card-header {
    background: rgba(180, 70, 0, 0.12);
    border-bottom-color: rgba(180, 70, 0, 0.30);
    color: #b34600;
}

.vp-group-card-header {
    color: #b34600;
}

/* ── Navigation ──────────────────────────────────────────────── */
.site-nav {
    background: rgba(255,255,255,0.97);
    border-bottom-color: #c45000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.nav-brand { color: #1a1a2e; border-right-color: rgba(0,0,0,0.12); }
.nav-brand:hover { color: #c45000; }
.nav-brand-img { filter: none; }

.nav-links > li > a { color: rgba(26,26,46,0.65); }
.nav-links > li > a:hover,
.nav-links > li:hover > a { background: rgba(180,70,0,0.09); color: #1a1a2e; }
.nav-links > li:hover > a,
.nav-links > li.nav-active > a { border-bottom-color: #c45000; }
.nav-links > li.nav-active > a { background: rgba(180,70,0,0.11); color: #1a1a2e; }

/* Dropdowns */
.nav-links .dropdown,
.nav-gear-dropdown {
    background: #fff;
    border-color: rgba(0,0,0,0.10);
    border-top-color: var(--c-accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.nav-links .dropdown a,
.nav-gear-dropdown a { color: rgba(26,26,46,0.70); }
.nav-links .dropdown a:hover,
.nav-gear-dropdown a:hover { background: rgba(21,101,192,0.08); color: var(--c-accent); }

/* Login inputs in nav */
.nav-login-form input[type="text"],
.nav-login-form input[type="password"] {
    background: #f4f6fb;
    border-color: rgba(0,0,0,0.18);
    color: var(--c-text);
}
.nav-login-form input::placeholder { color: rgba(26,26,46,0.40); }
.nav-remember { color: rgba(26,26,46,0.55); }

/* Hamburger (mobile) */
.nav-hamburger span { background: #1a1a2e; }

/* ── Mobile drawer overlay ────────────────────────────────────── */
.mob-overlay { background: rgba(0,0,0,0.35); }

/* ── Mobile drawer panel ─────────────────────────────────────── */
.mob-drawer {
    background: #fff;
    border-left-color: rgba(0,0,0,0.10);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mob-drawer-hdr {
    background: #fff;
    border-bottom-color: #c45000;
}
.mob-drawer-title { color: #1a1a2e; }
.mob-drawer-close {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.04);
    color: #1a1a2e;
}
.mob-drawer-close:hover { background: rgba(0,0,0,0.09); }

/* ── Drawer nav list ─────────────────────────────────────────── */
.mob-nav-list > li { border-bottom-color: rgba(0,0,0,0.06); }
.mob-nav-list > li > a,
.mob-nav-list > li > button.mob-toggle { color: rgba(26,26,46,0.65); }
.mob-nav-list > li > a:hover,
.mob-nav-list > li > button.mob-toggle:hover {
    color: #1a1a2e;
    background: rgba(0,0,0,0.04);
}
.mob-nav-list > li.mob-active > a {
    color: var(--c-accent);
    background: rgba(21,101,192,0.07);
    border-left-color: #c45000;
}
.mob-chevron { color: rgba(26,26,46,0.40); }

/* ── Drawer sub-menu ─────────────────────────────────────────── */
.mob-sub-list { background: rgba(0,0,0,0.04); }
.mob-sub-list li { border-bottom-color: rgba(0,0,0,0.04); }
.mob-sub-list a { color: rgba(26,26,46,0.60); }
.mob-sub-list a:hover { color: #1a1a2e; background: rgba(0,0,0,0.04); }

/* ── Drawer user section ─────────────────────────────────────── */
.mob-user-section { border-top-color: rgba(0,0,0,0.08); }
.mob-user-name { color: #1a1a2e; }
.mob-link-profiel {
    background: rgba(21,101,192,0.08);
    border-color: rgba(21,101,192,0.22);
}
.mob-link-profiel:hover { background: rgba(21,101,192,0.16) !important; }

/* ── Drawer login section ────────────────────────────────────── */
.mob-login-section { border-top-color: rgba(0,0,0,0.08); }
.mob-login-section h4 { color: rgba(26,26,46,0.45); }
.mob-login-section input[type="text"],
.mob-login-section input[type="password"] {
    background: #f4f6fb;
    border-color: rgba(0,0,0,0.16);
    color: #1a1a2e;
}
.mob-login-section input::placeholder { color: rgba(26,26,46,0.40); }

/* ── Tables ──────────────────────────────────────────────────── */
table { color: var(--c-text); }
th { color: var(--c-text-dim); }
tr:hover { background: rgba(0,0,0,0.04); }
.stand-table tr:hover td { background: rgba(21,101,192,0.06); }

/* ── Forms ───────────────────────────────────────────────────── */
.gb-input,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    background: #fff;
    color: var(--c-text);
    border-color: var(--c-border);
}
.gb-input:focus { border-color: var(--c-accent); }
.gb-label { color: var(--c-text-dim); }

/* ── Buttons ─────────────────────────────────────────────────── */
.gb-submit-btn {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-primary-dk);
}
.gb-submit-btn:hover { background: var(--c-primary-dk); }

/* ── Sidebar widgets ─────────────────────────────────────────── */
.slicer-btn {
    background: rgba(0,0,0,0.06);
    color: var(--c-text);
    border-color: var(--c-border);
}
.slicer-btn.active {
    background: var(--c-accent);
    color: #fff;
    border-color: var(--c-accent);
}

/* ── Voorspellen page ────────────────────────────────────────── */

/* Metric cards */
.pred-metric-card {
    background: rgba(255,255,255,0.80);
    border-color: var(--c-border);
    color: var(--c-text);
}
.pred-metric-card:hover { background: rgba(255,255,255,0.98); }
.pred-metric-card--active { background: rgba(21,101,192,0.10); border-color: var(--c-accent); }
.pred-metric-label { color: var(--c-text-dim); }
.pred-metric-count { color: var(--c-text); }
.pred-metric-card--done .pred-metric-count { color: var(--c-win); }
.pred-metric-card--empty .pred-metric-count { color: var(--c-error); }
.pred-metric-fill { background: var(--c-accent); }
.pred-metric-card--done .pred-metric-fill { background: var(--c-win); }
.pred-metric-card--empty .pred-metric-fill { background: var(--c-error); }

/* Notices */
.pred-notice {
    background: rgba(180,120,0,0.10);
    border-color: rgba(180,120,0,0.30);
    color: #7a5500;
}
.pred-notice-warn {
    background: rgba(180,0,0,0.08);
    border-color: rgba(180,0,0,0.22);
    color: #a00000;
}

/* Pred table */
table.pred-table th {
    background: rgba(0,0,0,0.05);
    border-bottom-color: var(--c-border);
    color: var(--c-text-dim);
}
table.pred-table tr:nth-child(even) { background: rgba(0,0,0,0.03); }
table.pred-table tr:hover { background: rgba(21,101,192,0.06); }
table.pred-table td {
    border-bottom-color: var(--c-border);
    color: var(--c-text);
}

/* Score inputs */
.inputblue {
    background: rgba(21,101,192,0.08);
    border-color: rgba(21,101,192,0.35);
    color: var(--c-primary);
}
.inputblue:focus {
    background: rgba(21,101,192,0.15);
    border-color: var(--c-accent);
}
.inputro {
    background: rgba(0,0,0,0.04);
    border-color: var(--c-border);
    color: var(--c-text-dim);
}

/* Stepper buttons */
.stepper-btn {
    background: rgba(0,0,0,0.07);
    color: var(--c-text);
    border-color: var(--c-border);
}
.stepper-btn:hover:not(:disabled) { background: var(--c-accent); color: #fff; }

/* Dubbel radio / label */
.pred-dubbel-label { color: var(--c-text-dim); border-color: var(--c-border); }
.pred-dubbel-label:hover { background: rgba(21,101,192,0.08); }
.dubbel-radio:checked + .pred-dubbel-label,
.pred-dubbel-on { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* Match cell */
.pred-match-meta,
.mc-meta { color: var(--c-text-dim); }
.mc-vs-edit { color: var(--c-text-dim); }
.mc-score-sep { color: var(--c-text-dim); }
.mc-name { color: var(--c-text); }
.pred-team-unknown { color: var(--c-text-dim); }
.pred-ko-badge {
    background: rgba(21,101,192,0.12);
    color: var(--c-primary);
    border-color: rgba(21,101,192,0.25);
}

/* WGV bar */
.pred-wgv-w { background: var(--c-win); }
.pred-wgv-g { background: var(--c-draw); }
.pred-wgv-v { background: var(--c-lose); }
.pred-wgv-labels { color: var(--c-text-dim); }

/* KO select */
.pred-ko-select {
    background: #fff;
    color: var(--c-text);
    border-color: var(--c-border);
}

/* Pool standing inside card */
.pstand-header { background: rgba(0,0,0,0.05); color: var(--c-text-dim); }

/* Admin bar */
.pred-admin-bar {
    background: rgba(197,100,0,0.10);
    border-color: rgba(197,100,0,0.30);
    color: #6b3500;
}

/* Autosave pill */
.vp-save-pill { background: rgba(0,0,0,0.12); color: var(--c-text-dim); }
.vp-save-pill--ok  { background: rgba(21,101,192,0.15); color: var(--c-primary); }
.vp-save-pill--err { background: rgba(180,0,0,0.12); color: var(--c-error); }

/* Bonus section */
.bonus-row {
    background: rgba(255,255,255,0.70);
    border-color: var(--c-border);
}
.bonus-row:hover { background: rgba(255,255,255,0.95); }
.stat-title { color: var(--c-text); }
.stat-tip { color: var(--c-text-dim); }
.stat-avg { color: var(--c-accent); }

/* Poulestand loading text */
.pred-stand-loading { color: var(--c-text-dim); }

/* ── Forecast / scoring cells ────────────────────────────────── */
.vpa-sc-toto     { color: var(--c-win)     !important; }
.vpa-sc-toto-hit { color: var(--c-win)     !important; }
.vpa-sc-max      { color: var(--c-max)     !important; }
.vpa-sc-super    { color: var(--c-supermax)!important; }

/* ── Legend ──────────────────────────────────────────────────── */
.vpa-legend {
    background: var(--c-surface);
    border-color: var(--c-border);
    color: var(--c-text);
}

/* ── Poll bars ───────────────────────────────────────────────── */
.poll-bar { background: rgba(0,0,0,0.10); }

/* ── Dropdown overlays ───────────────────────────────────────── */
.dropdown-menu,
.nm-meer-list {
    background: #fff;
    border-color: var(--c-border);
}

/* ── Footer ──────────────────────────────────────────────────── */
footer { background: #e0e6ef; color: var(--c-text-dim); border-top-color: var(--c-border); }