/* ============================================================
   SP-THEMES.CSS — LIGHT & DARK THEME OVERRIDES
   ============================================================ */

/* ============================================================
   LIGHT THEME VARIABLES
   ============================================================ */

/* Light theme variables — applied at ALL viewport widths (no media query wrapper).
   Previously wrapped in @media (min-width: 768px) which broke mobile light mode. */
[data-theme="light"] {
    --bg: #F1F5F9;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --border: #E2E8F0;
    --border-light: #E2E8F0;
    --text: #0F172A;
    --muted: #64748B;
    --accent: #0084FF;
    --accent-dim: rgba(0, 132, 255, 0.12);
    --accent-glow: rgba(0, 132, 255, 0.25);
    --warm: #FF9F0A;
    --warm-dim: rgba(255, 159, 10, 0.12);
    --green: #30B158;
    --green-dim: rgba(48, 177, 88, 0.12);
    --red: #FF3B30;
    --red-dim: rgba(255, 59, 48, 0.12);
    --purple: #8b5cf6;
    --purple-dim: rgba(139, 92, 246, 0.12);
    --pink: #FF2D55;
    --pink-dim: rgba(255, 45, 85, 0.12);
    --blue: #0084FF;
    --blue-dim: rgba(0, 132, 255, 0.12);
    --amber: #FF9F0A;
    --amber-dim: rgba(255, 159, 10, 0.12);

    /* Aliases used by Berichte/export cards and JS-rendered HTML */
    --bg-card: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --text-primary: #0F172A;
    --text-secondary: #64748B;

    color-scheme: light;
}

/* ============================================================
   LIGHT MODE BODY & LAYOUT
   ============================================================ */

[data-theme="light"] body {
    background: #F1F5F9;
    color: #0F172A;
}

[data-theme="light"] .topo-bg {
    display: none;
}

[data-theme="light"] .top-nav {
    background: rgba(255,255,255,0.95) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    backdrop-filter: blur(12px) !important;
}

[data-theme="light"] .tab-nav {
    background: rgba(255,255,255,0.8);
    border-bottom-color: #E2E8F0;
}

[data-theme="light"] .card {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

/* ============================================================
   LIGHT MODE FORM ELEMENTS
   ============================================================ */

[data-theme="light"] .filter-search,
[data-theme="light"] .filter-select,
[data-theme="light"] .filter-search-mobile,
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .filter-sheet-select {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #0F172A;
    color-scheme: light;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    color-scheme: light;
}

[data-theme="light"] .logo {
    color: #0F172A !important;
}

[data-theme="light"] .filter-sheet {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

/* ============================================================
   LIGHT MODE SCROLLBARS
   ============================================================ */

[data-theme="light"] #referralTableBody::-webkit-scrollbar,
[data-theme="light"] #wbHistoryBody::-webkit-scrollbar {
    width: 10px;
}

[data-theme="light"] #referralTableBody::-webkit-scrollbar-track,
[data-theme="light"] #wbHistoryBody::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.6);
    border-radius: 6px;
}

[data-theme="light"] #referralTableBody::-webkit-scrollbar-thumb,
[data-theme="light"] #wbHistoryBody::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.4);
    border-radius: 6px;
    transition: background-color 0.2s;
}

[data-theme="light"] #referralTableBody::-webkit-scrollbar-thumb:hover,
[data-theme="light"] #wbHistoryBody::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.7);
}

/* Firefox scrollbar styling (light mode) */
[data-theme="light"] #referralTableBody,
[data-theme="light"] #wbHistoryBody {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.4) rgba(226, 232, 240, 0.6);
}