/**
 * /platform/shared/theme.css
 * Light / Dark mode theme overrides.
 * Import on every page AFTER nav.css.
 * Toggle by setting html[data-theme="light"] or html[data-theme="dark"].
 * Dark mode is the default (no html attribute needed).
 */

/* ── Light mode: CSS variable overrides ── */
html[data-theme="light"] {
    /* Backgrounds */
    --bg:    #f0f4f8;
    --card:  #ffffff;
    --card2: #e8eef5;

    /* Borders */
    --border: rgba(0, 0, 0, .1);

    /* Text */
    --text:  #111827;
    --muted: #6b7280;
    --dim:   #374151;

    /* Accents — kept vivid, just slightly darker for contrast on white */
    --accent:  #2563eb;
    --blue:    #2563eb;
    --blue2:   #3b82f6;
    --green:   #16a34a;
    --gold:    #a16207;
    --red:     #dc2626;
    --purple:  #7c3aed;

    /* Aliases used in pool leaderboard */
    --c-bg:   #f0f4f8;
    --c-card: #ffffff;
}

/* ── Light mode: body ── */
html[data-theme="light"] body {
    background: var(--bg) !important;
    color: var(--text);
}

/* ── Light mode: nav dropdown (nav bar stays dark — it's the brand) ── */
html[data-theme="light"] .nav-dropdown {
    background: #ffffff;
    border-color: rgba(0, 0, 0, .12);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .15);
}
html[data-theme="light"] .nav-dd-item {
    color: #374151;
}
html[data-theme="light"] .nav-dd-item:hover {
    background: rgba(0, 0, 0, .05);
    color: #111827;
}
html[data-theme="light"] .nav-dd-active {
    background: rgba(0, 0, 0, .04);
}
html[data-theme="light"] .nav-dd-divider {
    background: rgba(0, 0, 0, .1);
}
html[data-theme="light"] .nav-dd-signout {
    color: #dc2626;
}
html[data-theme="light"] .nav-dd-signout:hover {
    background: rgba(220, 38, 38, .08);
    color: #dc2626;
}

/* ── Light mode: form controls ── */
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(0, 0, 0, .18) !important;
}
html[data-theme="light"] select option {
    background: #ffffff;
    color: #111827;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #9ca3af;
}

/* ── Light mode: common card/panel patterns ── */
html[data-theme="light"] .game-card,
html[data-theme="light"] .pool-card,
html[data-theme="light"] .card {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

/* ── Light mode: draft picks — golfer tiles ── */
html[data-theme="light"] .golfer-tile {
    background: rgba(0, 0, 0, .04) !important;
    border-color: rgba(0, 0, 0, .1) !important;
    color: #111827;
}
html[data-theme="light"] .golfer-tile:hover:not(.disabled) {
    background: rgba(37, 99, 235, .08) !important;
    border-color: rgba(37, 99, 235, .3) !important;
}
html[data-theme="light"] .golfer-tile.selected {
    background: rgba(22, 163, 74, .1) !important;
    border-color: rgba(22, 163, 74, .4) !important;
}
html[data-theme="light"] .golfer-rank { color: #2563eb; }
html[data-theme="light"] .golfer-odds { background: rgba(0,0,0,.06); color: #374151; }
html[data-theme="light"] .golfer-odds.fav { color: #16a34a; }
html[data-theme="light"] .golfer-odds.dog { color: #a16207; }

/* ── Light mode: tier headers ── */
html[data-theme="light"] .tier-header {
    background: rgba(124, 58, 237, .07) !important;
    border-left-color: var(--purple) !important;
}

/* ── Light mode: draft leaderboard table ── */
html[data-theme="light"] .entry-row td {
    background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.01)) !important;
    border-top-color: rgba(0,0,0,.1) !important;
    border-bottom-color: rgba(0,0,0,.06) !important;
}
html[data-theme="light"] .pick-row td {
    border-bottom-color: rgba(0,0,0,.05) !important;
}
html[data-theme="light"] .pick-row:hover td {
    background: rgba(0, 0, 0, .02) !important;
}
html[data-theme="light"] .col-hdr th {
    background: rgba(0, 0, 0, .02) !important;
    border-bottom-color: rgba(0, 0, 0, .08) !important;
    color: #6b7280;
}
html[data-theme="light"] .pick-row.tb-pick td {
    background: rgba(99, 102, 241, .06) !important;
}
html[data-theme="light"] .pick-row.no-count td { opacity: .45; }

/* ── Light mode: info bar / legend strips ── */
html[data-theme="light"] .info-bar {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.08) !important;
    color: #4b5563;
}
html[data-theme="light"] .info-bar strong { color: #111827; }

html[data-theme="light"] .legend { color: #6b7280; }

/* ── Light mode: slot inputs (flat picks) ── */
html[data-theme="light"] .slot-input {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.18) !important;
    color: #111827 !important;
}
html[data-theme="light"] .ac-list {
    background: #ffffff;
    border-color: rgba(0,0,0,.12);
}
html[data-theme="light"] .ac-item { color: #111827; }
html[data-theme="light"] .ac-item:hover { background: rgba(37,99,235,.08); }

/* ── Light mode: search box ── */
html[data-theme="light"] .search-input {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #111827 !important;
}

/* ── Light mode: progress bar / status areas ── */
html[data-theme="light"] .progress-bar {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.08) !important;
}

/* ── Light mode: score colours (adjust for light bg) ── */
html[data-theme="light"] .s-pos  { color: #6b7280; }
html[data-theme="light"] .s-neg  { color: #dc2626; }
html[data-theme="light"] .s-null { color: rgba(0,0,0,.2); }
html[data-theme="light"] .t-neg  { color: #16a34a; }
html[data-theme="light"] .t-pos  { color: #dc2626; }

/* ── Light mode: buttons / badges with hardcoded colors ── */
html[data-theme="light"] .status-badge.open   { color: #16a34a; }
html[data-theme="light"] .status-badge.locked { color: #dc2626; }
html[data-theme="light"] .status-badge.final  { color: #6b7280; }

/* ── Light mode: tab bar ── */
html[data-theme="light"] .tab-bar {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.08) !important;
}
html[data-theme="light"] .tab-btn { color: #6b7280; }
html[data-theme="light"] .tab-btn:hover { color: #111827; background: rgba(0,0,0,.06); }
html[data-theme="light"] .tab-btn.active { color: #111827; background: #ffffff; }

/* ── Light mode: game selector ── */
html[data-theme="light"] .game-sel {
    background: rgba(0,0,0,.05) !important;
    border-color: rgba(0,0,0,.12) !important;
    color: #111827 !important;
}
html[data-theme="light"] .game-sel option { background: #ffffff; color: #111827; }

/* ── Light mode: scrollbars ── */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #e8eef5; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }

/* ══════════════════════════════════════════════════════════════════════════════
   LIVEGOLF DARK MODE
   Livegolf pages are light by default. When user switches to dark, these
   overrides kick in (scoped to data-section="livegolf" set by nav.js).
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"][data-section="livegolf"] {
    /* Livegolf-specific variable overrides */
    --green:        #22c55e;
    --green-dark:   #166534;
    --green-mid:    #16a34a;
    --green-light:  rgba(34,197,94,.2);
    --green-bg:     #111827;
    --white:        #1f2d3d;
    --grey:         #152030;
    --border:       rgba(255,255,255,.1);
    --text:         #e8f0fe;
    --muted:        #6b8aad;
    --shadow:       0 2px 8px rgba(0,0,0,.4);
    --shadow-md:    0 4px 16px rgba(0,0,0,.5);

    /* Shared variables also overridden */
    --bg:    #111827;
    --card:  #1f2d3d;
    --card2: #243040;
    --accent: #22c55e;
}

/* Body background */
html[data-theme="dark"][data-section="livegolf"] body {
    background: var(--green-bg) !important;
    color: var(--text);
}

/* Cards / panels */
html[data-theme="dark"][data-section="livegolf"] .match-card,
html[data-theme="dark"][data-section="livegolf"] .new-match-btn,
html[data-theme="dark"][data-section="livegolf"] .tabs {
    background: var(--white) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"][data-section="livegolf"] .new-match-btn {
    color: var(--green) !important;
}
html[data-theme="dark"][data-section="livegolf"] .new-match-btn:hover {
    background: var(--green) !important;
    color: #fff !important;
}

/* Skeleton loaders */
html[data-theme="dark"][data-section="livegolf"] .skeleton {
    background: linear-gradient(90deg, #1f2d3d 25%, #243040 50%, #1f2d3d 75%) !important;
    background-size: 200% !important;
}

/* Match icon */
html[data-theme="dark"][data-section="livegolf"] .match-icon {
    background: rgba(34,197,94,.15) !important;
}

/* Tabs */
html[data-theme="dark"][data-section="livegolf"] .tab {
    color: var(--muted);
}
html[data-theme="dark"][data-section="livegolf"] .tab.active {
    background: var(--green) !important;
    color: #fff;
}

/* Badges */
html[data-theme="dark"][data-section="livegolf"] .badge-complete {
    background: rgba(255,255,255,.08) !important;
}

/* Nav dropdown (livegolf stays dark nav, so dropdown needs light override) */
html[data-theme="dark"][data-section="livegolf"] .nav-dropdown {
    background: #1f2d3d;
    border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"][data-section="livegolf"] .nav-dd-item { color: rgba(255,255,255,.8); }
html[data-theme="dark"][data-section="livegolf"] .nav-dd-item:hover { background: rgba(255,255,255,.08); color: #fff; }
html[data-theme="dark"][data-section="livegolf"] .nav-dd-divider { background: rgba(255,255,255,.08); }

/* Form inputs */
html[data-theme="dark"][data-section="livegolf"] input,
html[data-theme="dark"][data-section="livegolf"] select,
html[data-theme="dark"][data-section="livegolf"] textarea {
    background: rgba(255,255,255,.07) !important;
    color: var(--text) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* ── Hardcoded white / near-white softening ─────────────────────────────────
   Many livegolf elements use hardcoded #fff / #fafafa / #f8fafc instead of
   CSS variables.  These rules soften them so they don't blaze in dark mode.  */

/* Podium banner — p2 (silver) and p3 (bronze) slots use #fafafa */
html[data-theme="dark"][data-section="livegolf"] .podium-slot.p2,
html[data-theme="dark"][data-section="livegolf"] .podium-slot.p3 {
    background: rgba(255,255,255,.04) !important;
}
html[data-theme="dark"][data-section="livegolf"] .podium-banner,
html[data-theme="dark"][data-section="livegolf"] .team-section {
    background: var(--white) !important;
    border-color: var(--border) !important;
}

/* Scorecard table cells with hardcoded light backgrounds */
html[data-theme="dark"][data-section="livegolf"] .sc-table td.row-lbl,
html[data-theme="dark"][data-section="livegolf"] .mp-sc-table td.row-lbl {
    background: rgba(255,255,255,.06) !important;
    color: var(--muted) !important;
}
html[data-theme="dark"][data-section="livegolf"] .sc-table td.subtotal {
    background: rgba(255,255,255,.07) !important;
}
html[data-theme="dark"][data-section="livegolf"] .sc-table td.total {
    background: rgba(255,255,255,.1) !important;
    color: var(--text) !important;
}

/* Scorecard & player expand panels (#fafafa) */
html[data-theme="dark"][data-section="livegolf"] .mp-scorecard,
html[data-theme="dark"][data-section="livegolf"] .player-scorecard-expand,
html[data-theme="dark"][data-section="livegolf"] .scorecard-wrap {
    background: rgba(255,255,255,.04) !important;
}

/* Sticky player name columns with hardcoded background:#fff */
html[data-theme="dark"][data-section="livegolf"] .mpnh-pname {
    background: #1f2d3d !important;
    box-shadow: 2px 0 6px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"][data-section="livegolf"] .mpnh-row-mp .mpnh-pname {
    background: #192839 !important;
}
html[data-theme="dark"][data-section="livegolf"] .ev-sg-name {
    background: #1f2d3d !important;
    box-shadow: 2px 0 6px rgba(0,0,0,.4) !important;
}

/* Row backgrounds (#fafbfc / #f8fafc) */
html[data-theme="dark"][data-section="livegolf"] .mpnh-row-mp {
    background: rgba(255,255,255,.03) !important;
}

/* Row hover states */
html[data-theme="dark"][data-section="livegolf"] .lb-table tbody tr.player-row:hover,
html[data-theme="dark"][data-section="livegolf"] .mp-match-row:hover,
html[data-theme="dark"][data-section="livegolf"] .player-contrib:hover {
    background: rgba(255,255,255,.06) !important;
}

/* Table row separators (hardcoded #f8fafc border) */
html[data-theme="dark"][data-section="livegolf"] .lb-table td,
html[data-theme="dark"][data-section="livegolf"] .ev-skins-summary td {
    border-bottom-color: rgba(255,255,255,.05) !important;
}

/* Score-to-par pills */
html[data-theme="dark"][data-section="livegolf"] .tp-under { background: rgba(21,128,61,.3)   !important; color: #4ade80 !important; }
html[data-theme="dark"][data-section="livegolf"] .tp-even  { background: rgba(255,255,255,.1) !important; }
html[data-theme="dark"][data-section="livegolf"] .tp-over  { background: rgba(185,28,28,.3)   !important; color: #fca5a5 !important; }

/* Score ring backgrounds — eagle/birdie/bogey/double */
html[data-theme="dark"][data-section="livegolf"] .ring-eagle  { background: rgba(251,191,36,.25) !important; color: #fde68a !important; outline-color: rgba(251,191,36,.5) !important; }
html[data-theme="dark"][data-section="livegolf"] .ring-birdie { background: rgba(21,128,61,.25)  !important; color: #4ade80 !important; }
html[data-theme="dark"][data-section="livegolf"] .ring-bogey  { background: rgba(185,28,28,.25) !important; color: #fca5a5 !important; }
html[data-theme="dark"][data-section="livegolf"] .ring-double { background: rgba(153,27,27,.25) !important; color: #f87171 !important; outline-color: rgba(239,68,68,.4) !important; }

/* Skins cells */
html[data-theme="dark"][data-section="livegolf"] .ev-sg-cell.sk-win  { background: rgba(21,128,61,.3)   !important; }
html[data-theme="dark"][data-section="livegolf"] .ev-sg-cell.sk-carry { background: rgba(234,179,8,.2)  !important; }
html[data-theme="dark"][data-section="livegolf"] .ev-sg-cell.sk-tie  { background: rgba(255,255,255,.1) !important; }
html[data-theme="dark"][data-section="livegolf"] .mpnh-chip.pos { background: rgba(21,128,61,.3)   !important; }
html[data-theme="dark"][data-section="livegolf"] .mpnh-chip.neg { background: rgba(185,28,28,.3)   !important; }
html[data-theme="dark"][data-section="livegolf"] .mpnh-chip.evn { background: rgba(255,255,255,.1) !important; }

/* Badge backgrounds */
html[data-theme="dark"][data-section="livegolf"] .badge-event  { background: rgba(124,58,237,.25) !important; color: #c4b5fd !important; }
html[data-theme="dark"][data-section="livegolf"] .badge-rounds { background: rgba(255,255,255,.1)  !important; }
html[data-theme="dark"][data-section="livegolf"] .hcp-pill      { background: rgba(255,255,255,.1)  !important; color: var(--muted) !important; }
html[data-theme="dark"][data-section="livegolf"] .live-badge    { background: rgba(21,128,61,.25) !important; border-color: rgba(34,197,94,.3) !important; }

/* Match play win/loss badges */
html[data-theme="dark"][data-section="livegolf"] .mp-badge.win   { background: rgba(21,128,61,.3)   !important; }
html[data-theme="dark"][data-section="livegolf"] .mp-badge.loss  { background: rgba(185,28,28,.3)   !important; }
html[data-theme="dark"][data-section="livegolf"] .mp-badge.halve,
html[data-theme="dark"][data-section="livegolf"] .mp-badge.pending { background: rgba(255,255,255,.1) !important; color: var(--muted) !important; }
html[data-theme="dark"][data-section="livegolf"] .mp-sc-table td.sc-win  { background: rgba(21,128,61,.3)  !important; }
html[data-theme="dark"][data-section="livegolf"] .mp-sc-table td.sc-loss { background: rgba(185,28,28,.3) !important; }
html[data-theme="dark"][data-section="livegolf"] .mpnh-cell.win  { background: rgba(21,128,61,.3)   !important; }
html[data-theme="dark"][data-section="livegolf"] .mpnh-cell.loss { background: rgba(185,28,28,.3)   !important; }
html[data-theme="dark"][data-section="livegolf"] .mpnh-cell.tie  { background: rgba(255,255,255,.1)  !important; }

/* Skins pot banner */
html[data-theme="dark"][data-section="livegolf"] .ev-skins-pot-banner {
    background: linear-gradient(135deg, rgba(21,128,61,.25), rgba(34,197,94,.12)) !important;
    border-bottom-color: rgba(34,197,94,.2) !important;
    color: #4ade80 !important;
}

/* Team section header */
html[data-theme="dark"][data-section="livegolf"] .team-section-hdr {
    background: rgba(255,255,255,.05) !important;
    border-bottom-color: var(--border) !important;
}

/* mpsc-status bar (white pill above scorecard) */
html[data-theme="dark"][data-section="livegolf"] .mpsc-status-bar {
    background: var(--white) !important;
    border-color: var(--border) !important;
}

/* status pill group separator background */
html[data-theme="dark"][data-section="livegolf"] .mpnassau-row {
    background: var(--white) !important;
}

/* lb-card header */
html[data-theme="dark"][data-section="livegolf"] .lb-card,
html[data-theme="dark"][data-section="livegolf"] .ev-skins-summary,
html[data-theme="dark"][data-section="livegolf"] .ev-skins-grid,
html[data-theme="dark"][data-section="livegolf"] .mp-match-card {
    background: var(--white) !important;
}

/* Round/game tabs background */
html[data-theme="dark"][data-section="livegolf"] .rtab,
html[data-theme="dark"][data-section="livegolf"] .gtab {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: var(--muted) !important;
}
html[data-theme="dark"][data-section="livegolf"] .rtab.active,
html[data-theme="dark"][data-section="livegolf"] .gtab.active {
    background: var(--green-mid) !important;
    color: #fff !important;
}



/* ══════════════════════════════════════════════════════════════════════════════
   LANDING PAGE (theleaderboard.golf / index.html)
   Already dark — light mode uses same overrides as pool/draft (inherited from
   the shared :root block above). Just add landing-specific tweaks.
   ══════════════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] .bg-orbs { display: none; } /* remove dark animated orbs */

html[data-theme="light"] .feature,
html[data-theme="light"] .group-item {
    background: #ffffff !important;
    border-color: rgba(0,0,0,.1) !important;
}
html[data-theme="light"] .login-panel {
    background: linear-gradient(160deg, rgba(22,163,74,.04) 0%, #e8f4ec 50%, rgba(37,99,235,.04) 100%) !important;
    border-left-color: rgba(0,0,0,.1) !important;
}
html[data-theme="light"] .input-wrap input {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(0,0,0,.15) !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] .login-title { color: #111827 !important; }
html[data-theme="light"] .brand-wordmark { color: #111827 !important; }