/*
 * theme.css — Alpha Sports Global Theme System
 * Accent: premium yellow/gold with softened dark surfaces
 * Font: SF Pro / system-ui native stack
 */

html[data-theme="dark"] {
    --bg-main:      #0f141d;
    --bg-card:      #18212d;
    --bg-card2:     #202b39;
    --accent:       #ef4444;
    --accent-mid:   #dc2626;
    --accent-lite:  rgba(239,68,68,0.13);
    --accent-glow:  rgba(239,68,68,0.24);
    --text-main:    #f6f8fb;
    --text-dim:     #94a3b8;
    --border:       rgba(148,163,184,0.16);
    --border-soft:  rgba(148,163,184,0.24);
    --glass:        rgba(255,255,255,0.04);
    --nav-bg:       rgba(17,24,35,0.97);
    --header-bg:    rgba(17,24,35,0.95);
    --input-bg:     rgba(255,255,255,0.04);
    --input-border: rgba(148,163,184,0.22);
    --shadow:       0 12px 30px rgba(0,0,0,0.28);
    --error:        #ff4040;
    --running:      #f59e0b;
    --btn-text:     #ffffff;
}

html[data-theme="light"] {
    --bg-main:      #f7f8fb;
    --bg-card:      #ffffff;
    --bg-card2:     #f1f4f8;
    --accent:       #dc2626;
    --accent-mid:   #ef4444;
    --accent-lite:  rgba(220,38,38,0.12);
    --accent-glow:  rgba(220,38,38,0.20);
    --text-main:    #0b1221;
    --text-dim:     #64748b;
    --border:       #dde3eb;
    --border-soft:  #c9d2df;
    --glass:        rgba(0,0,0,0.02);
    --nav-bg:       rgba(255,255,255,0.97);
    --header-bg:    rgba(255,255,255,0.97);
    --input-bg:     #f7f9fe;
    --input-border: #c9d5e4;
    --shadow:       0 8px 24px rgba(15,23,42,0.08);
    --error:        #ef4444;
    --running:      #d97706;
    --btn-text:     #ffffff;
}

/* ── Global base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Helvetica Neue", system-ui, ui-sans-serif, sans-serif;
    background-color: var(--bg-main)  !important;
    color:            var(--text-main) !important;
    transition: background-color .3s ease, color .3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*:not([class*="animate"]):not([class*="ticker"]):not([class*="scroll"]):not(script) {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: .25s;
    transition-timing-function: ease;
}

/* ═══ LIGHT MODE OVERRIDES ═══ */
html[data-theme="light"] .text-white                    { color: var(--text-main)  !important; }
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-gray-600,
html[data-theme="light"] .text-gray-700,
html[data-theme="light"] .text-gray-800,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500               { color: var(--text-dim)   !important; }
html[data-theme="light"] [class*="bg-white\/"]          { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] [class*="bg-black\/"]          { background-color: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] [class*="border-white\/"]      { border-color: var(--border)        !important; }
html[data-theme="light"] [class*="border-black\/"]      { border-color: var(--border-soft)   !important; }
html[data-theme="light"] [class*="from-indigo-"][class*="to-indigo-"] { background: linear-gradient(135deg,#eef2ff,#e0e7ff) !important; border-color: #c7d2fe !important; }
html[data-theme="light"] [class*="from-amber-"][class*="to-amber-"]   { background: linear-gradient(135deg,#fffbeb,#fef3c7) !important; border-color: #fde68a !important; }
html[data-theme="light"] [class*="from-blue-"][class*="to-blue-"]     { background: linear-gradient(135deg,#fff8dc,#f7e3a0) !important; border-color: #c9d5e4 !important; }
html[data-theme="light"] .text-indigo-200               { color: #4338ca !important; }
html[data-theme="light"] .text-red-200                { color: #b45309 !important; }
html[data-theme="light"] .text-blue-200                 { color: #dc2626 !important; }
html[data-theme="light"] .brightness-0                  { filter: none   !important; }
html[data-theme="light"] .bet-card,
html[data-theme="light"] .history-card,
html[data-theme="light"] .ticket-card                  { background: #ffffff    !important; border-color: var(--border) !important; box-shadow: var(--shadow) !important; }
html[data-theme="light"] .card-header                  { background: #f7f9fe    !important; border-color: var(--border) !important; }
html[data-theme="light"] .card-results                 { border-top: 1px solid var(--border) !important; }
html[data-theme="light"] .card-body                    { background: transparent !important; }
html[data-theme="light"] .match-teams,
html[data-theme="light"] .match-preview                { color: var(--text-main) !important; }
html[data-theme="light"] .match-odds                   { color: var(--text-main) !important; }
html[data-theme="light"] .match-pick                   { color: var(--text-dim)  !important; }
html[data-theme="light"] .match-row                    { border-color: var(--border) !important; }
html[data-theme="light"] .card-footer                  { background: #eef2f8    !important; border-top: 1px solid var(--border) !important; }
html[data-theme="light"] .sum-box p:last-child         { color: var(--text-main) !important; }
html[data-theme="light"] .expand-btn                   { background: #eef2f8    !important; color: var(--text-dim) !important; border-top: 1px solid var(--border) !important; }
html[data-theme="light"] .filter-bar                   { background: #eef2f8    !important; border-color: var(--border) !important; }
html[data-theme="light"] .filter-btn                   { background: #eef2f8    !important; color: var(--text-main) !important; border-color: var(--border) !important; }
html[data-theme="light"] .filter-btn.active            { color: var(--accent)   !important; border-color: var(--accent) !important; }
html[data-theme="light"] .status-text                  { color: inherit         !important; }
html[data-theme="light"] .text-running                 { color: #d97706         !important; }
html[data-theme="light"] .res-val                      { color: var(--text-main) !important; }
html[data-theme="light"] .res-label                    { color: #94a3b8         !important; }
html[data-theme="light"] .bottom-sheet                 { background: #ffffff    !important; border-top: 1px solid var(--border) !important; }
html[data-theme="light"] .sheet-option                 { background: #f7f9fe    !important; color: var(--text-main) !important; }
html[data-theme="light"] .sheet-option.selected        { background: var(--accent-lite) !important; color: var(--accent) !important; }
html[data-theme="light"] #co-sheet                     { background: #ffffff    !important; border-color: var(--border) !important; }
html[data-theme="light"] .bs-sheet                     { background: #ffffff    !important; color: var(--text-main) !important; border-top: 1px solid var(--border) !important; }
html[data-theme="light"] .bs-item                      { background: #f7f9fe    !important; border-color: var(--border) !important; }
html[data-theme="light"] .bs-item-header               { border-color: var(--border) !important; }
html[data-theme="light"] .bs-item-footer               { background: #eef2f8    !important; }
html[data-theme="light"] .bs-teams-text                { color: var(--text-main) !important; }
html[data-theme="light"] .bs-odds-value                { color: var(--text-main) !important; }
html[data-theme="light"] #bs-footer                    { background: #ffffff    !important; border-top: 1px solid var(--border) !important; box-shadow: 0 -4px 20px rgba(0,0,0,.08) !important; }
html[data-theme="light"] #bs-footer [class*="bg-white\/"]  { background: #f7f9fe !important; border-color: var(--border) !important; }
html[data-theme="light"] #bs-footer input              { color: var(--text-main) !important; }
html[data-theme="light"] .bs-sheet [class*="border-white\/"] { border-color: var(--border) !important; }
html[data-theme="light"] .td-overview                  { background: #f7f9fe    !important; border-color: var(--border) !important; }
html[data-theme="light"] .tag                          { background: #eef2f8    !important; border-color: var(--border) !important; color: var(--text-dim) !important; }
html[data-theme="light"] .payout-card                  { background: #ffffff    !important; border-color: var(--border) !important; }
html[data-theme="light"] .avatar-box                   { background: #dde4f0    !important; border-color: var(--border) !important; }
html[data-theme="light"] .settings-input,
html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select                        { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .settings-input:focus         { border-color: var(--accent) !important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder         { color: #94a3b8 !important; }
html[data-theme="light"] .amount-tile                  { background: #f7f9fe    !important; border-color: var(--border) !important; color: var(--text-main) !important; }
html[data-theme="light"] .amount-tile.active           { background: var(--accent-lite) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
html[data-theme="light"] .odds-grid button,
html[data-theme="light"] .today-odds button            { background: #eef2f8    !important; border-color: var(--border) !important; color: var(--text-main) !important; }
html[data-theme="light"] .odds-grid button.selected,
html[data-theme="light"] .today-odds button.selected   { background: var(--accent) !important; color: var(--btn-text) !important; border-color: var(--accent) !important; }
html[data-theme="light"] .ticker-container             { background: rgba(240,244,251,0.96) !important; border-bottom: 1px solid var(--border) !important; }
html[data-theme="light"] .nav-wrapper                  { background: var(--nav-bg) !important; border-top: 1px solid var(--border) !important; }
html[data-theme="light"] .nav-label                    { color: #94a3b8         !important; }
html[data-theme="light"] .nav-icon                     { color: #94a3b8         !important; }
html[data-theme="light"] .nav-item.active .nav-label   { color: var(--text-main) !important; }
html[data-theme="light"] .diamond-btn                  { border-color: var(--bg-main) !important; }