/* EPCG — Front-end UI styles (MVP) */
/* Light/Dark theme bridge — align component variables with site theme
   These variables will be picked up by all EPCG UI using var(--*) below. */
:root,
html[data-theme="light"],
html.theme-light{
    /* Site-level brand color fallbacks (defined here if theme doesn't) */
    --eps-site-blue: #3b82f6; /* site blue */
    --eps-site-green: #4d969b; /* site green */
    --eps-site-red:  #b23a48;
    --bg-elev: #ffffff;
    --bg-elev-alt: #f7f7f7;
    --color-text: #111827; /* slate-900 */
    --color-border: rgba(0,0,0,0.14);
    --color-accent: var(--eps-site-blue, #0073aa);
    --color-error: var(--eps-site-red, #b23a48);
    --color-surface: #ffffff; /* used for dark overrides fallbacks */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) {
    --eps-site-blue: #3b82f6; /* site blue */
    --eps-site-green: #4d969b; /* site green */
    --eps-site-red:  #ef4444;
    --bg-elev: #111827;
    --bg-elev-alt: #0f172a; /* slate-900+ */
    --color-text: #e5e7eb;
    --color-border: rgba(148,163,184,0.35);
    --color-accent: var(--eps-site-blue, #3b82f6);
    --color-error: var(--eps-site-red, #ef4444);
    --color-surface: #111827;
  }
}

[data-theme="dark"],
html.theme-dark{
    --eps-site-blue: #3b82f6;
    --eps-site-green: #4d969b;
    --eps-site-red:  #ef4444;
    --bg-elev: #111827;
    --bg-elev-alt: #0f172a;
    --color-text: #e5e7eb;
    --color-border: rgba(148,163,184,0.35);
    --color-accent: var(--eps-site-blue, #3b82f6);
    --color-error: var(--eps-site-red, #ef4444);
    --color-surface: #111827;
}
/* DARK MODE sticky header background - DEPRECATED (Moved to bottom section) */
/* (Cleaned up in v4.1) */

#epcg-games-box.epcg-wrap {
    padding: 12px 0;
    color: var(--color-text, #111);
    position: relative;
    z-index: 1; /* ensure it sits above any background grids from scorecard */
}

.epcg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-left: 10px;   /* slight breathing room left of first pill */
    padding-right: 10px;  /* and right of last pill — tab area only */
}

/* Links inside Games/Roster UI — use site accent vs. TEC red */
#epcg-games-box a{ color: var(--color-accent, #3b82f6); text-decoration-color: color-mix(in srgb, var(--color-accent, #3b82f6) 65%, transparent); }
#epcg-games-box a:hover{ color: color-mix(in srgb, var(--color-accent, #3b82f6) 85%, #000); }
[data-theme="dark"] #epcg-games-box a:hover{ color: color-mix(in srgb, var(--color-accent, #3b82f6) 92%, #fff); }
#epcg-games-box .epcg-tab {
    appearance: none;
    border: 1px solid var(--color-border, rgba(0,0,0,0.14));
    background: var(--bg-elev, #fff);
    color: inherit;
    padding: 6px 14px; /* Default larger pills */
    /*border-radius: 999px !important; ensure pill shape wins over theme */
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem; /* Default larger font */
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#epcg-games-box .epcg-tab:hover { background: color-mix(in srgb, var(--color-accent, #0073aa) 8%, #fff); }
#epcg-games-box .epcg-tab.is-active {
    background: var(--color-accent, #3b82f6);
    color: #ffffff;
    border-color: var(--color-accent, #3b82f6);
}
/* Keep visual highlight even after focus moves away */
#epcg-games-box .epcg-tab.is-active:focus,
#epcg-games-box .epcg-tab.is-active:focus-visible{
    outline: none;
}

.epcg-panels { position: relative; }
.epcg-panel { display: none; }
.epcg-panel.is-active { display: block; }
.epcg-panel .epcg-panel-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    box-shadow: none;
    position: relative;
    z-index: 2; /* avoid shine-through of scorecard cells behind */
}
/* Roster/Dash Tab specific padding */
.epcg-panel.epcg-roster .epcg-panel-inner {
    padding-left: 5px;
}
/* Sub-tab titles */
.epcg-panel .epcg-panel-inner h3 {
    font-size: 1.4rem; /* Default larger title */
    margin: 0 0 10px 10px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    #epcg-games-box .epcg-tab {
        padding: 4px 10px;
        font-size: 0.8rem;
    }
    .epcg-panel .epcg-panel-inner h3 {
        font-size: 1.1rem;
    }
}

/* Form */
.epcg-form fieldset {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
    border: 0;
    padding: 0;
}
.epcg-setup-topbar{
    display:flex;
    justify-content:flex-end;
    margin-bottom:8px;
}
.epcg-setup-topbar .top-selfentry{ font-size:.95rem; }
.epcg-form legend { font-weight: 600; margin-bottom: 4px; }
.epcg-form .epcg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.epcg-form label { display: block; font-size: 0.95rem; }
.epcg-form input[type="number"] { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-border, rgba(0,0,0,0.12)); background: #fff; }
.epcg-form input[type="number"].epcg-sm { max-width: 110px; padding: 4px 6px; font-size: .92rem; }
.epcg-stroke-toggle{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.epcg-inline { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.epcg-actions { margin-top: 12px; }

/* Spacing for Birdies weighting multipliers UI */
#epcg-bird-mults{ margin-top: 6px; margin-bottom: 6px; }
.epcg-mults-row{ margin-top: 6px; }
/* Make Birdies multipliers same width as the mode toggle above */
.epcg-mults-row .epcg-select-sm{
    min-width: 160px;
    width: 160px;
}

/* Pill-like number inputs */
.epcg-form input[type="number"].epcg-sm{
    border-radius: 999px;
}
[class*="epcg-select-"]{ appearance:auto; }
.epcg-select-sm{
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    background: var(--bg-elev, #fff);
}
[data-theme="dark"] .epcg-select-sm{
    background: var(--color-surface, #111827);
    color: var(--color-text, #e5e7eb);
    border-color: rgba(148,163,184,0.35);
}
[data-theme="dark"] .epcg-form input[type="number"]{
    background: var(--color-surface, #111827);
    color: var(--color-text, #e5e7eb);
    border-color: rgba(148,163,184,0.35);
}

/* Hide team strategy blocks by default; JS will reveal the one for the selected size */
.epcg-strategy{ display:none; }

/* Layout: place Team Size and Strategy side-by-side on wider screens */
@media (min-width: 768px){
  .epcg-settings[data-for="team"] .epcg-field-row#epcg-team-strategy-row,
  .epcg-settings[data-for="team"] .epcg-field-row:nth-of-type(2){
    /* nth-of-type(2) is the Team size row within this settings card */
    display: inline-block;
    vertical-align: top;
    width: 48%;
  }
}

/* Slide toggle switch (two-option) */
.epcg-field-row{ margin-top: 10px; }
.epcg-switch{
    --h: 34px;
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: calc(var(--h) / 2);
    background: var(--bg-elev, #fff);
    height: var(--h);
    padding: 2px;
    min-width: 160px;
}
.epcg-switch input{ position:absolute; opacity:0; pointer-events:none; }
.epcg-switch label{
    text-align:center; cursor:pointer; z-index:2; padding: 6px 10px; font-weight:600; font-size:.92rem;
}
.epcg-switch .epcg-switch-slider{
    position:absolute; inset:2px; width: calc(50% - 2px); height: calc(100% - 4px);
    background: color-mix(in srgb, var(--color-accent, #0073aa) 14%, #fff);
    border-radius: calc(var(--h) / 2 - 2px);
    border: 1px solid color-mix(in srgb, var(--color-accent, #0073aa) 35%, rgba(0,0,0,0.12));
    transition: transform .18s ease;
    z-index:1;
}
.epcg-switch input#skins-mode-net:checked ~ label[for="skins-mode-net"],
.epcg-switch input#skins-mode-gross:checked ~ label[for="skins-mode-gross"],
.epcg-switch input#birdies-mode-net:checked ~ label[for="birdies-mode-net"],
.epcg-switch input#birdies-mode-gross:checked ~ label[for="birdies-mode-gross"],
.epcg-switch input#skins-stroke-half:checked ~ label[for="skins-stroke-half"],
.epcg-switch input#skins-stroke-full:checked ~ label[for="skins-stroke-full"]{
    color: var(--color-accent, #0073aa);
}
/* Slider positions for the specific switches (use sibling order) */
.epcg-switch input:nth-of-type(1):checked ~ .epcg-switch-slider{ transform: translateX(0); }
.epcg-switch input:nth-of-type(2):checked ~ .epcg-switch-slider{ transform: translateX(100%); }

/* Three-position segmented switch variant */
.epcg-switch.epcg-switch-3{ grid-template-columns: 1fr 1fr 1fr; }
.epcg-switch.epcg-switch-3 .epcg-switch-slider{ width: calc(33.333% - 2px); }
.epcg-switch.epcg-switch-3 input:nth-of-type(1):checked ~ .epcg-switch-slider{ transform: translateX(0); }
.epcg-switch.epcg-switch-3 input:nth-of-type(2):checked ~ .epcg-switch-slider{ transform: translateX(100%); }
.epcg-switch.epcg-switch-3 input:nth-of-type(3):checked ~ .epcg-switch-slider{ transform: translateX(200%); }

/* Active label color for Team mode (Gross/Net/Both) */
.epcg-switch input#team-mode-gross:checked ~ label[for="team-mode-gross"],
.epcg-switch input#team-mode-net:checked   ~ label[for="team-mode-net"],
.epcg-switch input#team-mode-both:checked  ~ label[for="team-mode-both"]{
    color: var(--color-accent, #0073aa);
}

[data-theme="dark"] .epcg-switch{
    background: var(--color-surface, #111827);
    border-color: rgba(148,163,184,0.35);
}
[data-theme="dark"] .epcg-switch .epcg-switch-slider{
    background: rgba(77,150,155,0.18);
    border-color: #4D969B;
}

/* Buttons */
.epcg-btn {
    appearance: none;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    background: var(--bg-elev, #fff);
    color: inherit;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
}
.epcg-btn.primary {
    background: color-mix(in srgb, var(--color-accent, #0073aa) 12%, #fff);
    border-color: color-mix(in srgb, var(--color-accent, #0073aa) 35%, var(--color-border, rgba(0,0,0,0.12)));
}
.epcg-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Compact team picker pill + dropdown (Roster) */
.epcg-team-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:3px 8px; /* shorter */
    border:1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: 999px; /* more rounded */
    background: var(--bg-elev, #fff);
    cursor:pointer; font-weight:600; font-size:.88rem; /* slightly smaller */
}
.epcg-team-pill .caret{ font-size:.8rem; opacity:.8; }
.epcg-team-menu{
    position: absolute; z-index: 30; min-width: 180px; max-width: 240px;
    border:1px solid var(--color-border, rgba(0,0,0,0.12)); border-radius:10px;
    background: var(--bg-elev, #fff); box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    padding:6px; display:none;
}
[data-theme="dark"] .epcg-team-menu{ background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); border-color: rgba(148,163,184,0.35); }
.epcg-team-menu ul{ list-style:none; margin:0; padding:0; }
.epcg-team-menu li{ margin:0; padding:0; }
.epcg-team-menu button{
    width: 100%; text-align:left; padding:6px 8px; border:0; background:transparent;
    border-radius:8px; cursor:pointer; font-size:.95rem;
    color:#9ca3af; /* light grey by default */
}
.epcg-team-menu button:hover{ background: color-mix(in srgb, var(--color-accent, #0073aa) 10%, transparent); color:#fff; }

/* Ensure pill sizing wins over theme styles (higher specificity + important) */
#epcg-roster-root .epcg-team-pill,
.epcg-panel.epcg-roster .epcg-team-pill,
button.epcg-team-pill{
    padding: 2px 10px !important; /* a touch slimmer and tighter */
    border-radius: 999px !important; /* fully rounded */
    font-size: .86rem !important; /* slightly smaller font */
    line-height: 1.25 !important;
}

/* Dark mode pill background alignment */
[data-theme="dark"] .epcg-team-pill{
    background: var(--color-surface, #111827);
    color: var(--color-text, #e5e7eb);
    border-color: rgba(148,163,184,0.35);
}

/* Table */
.epcg-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 4px; background: var(--bg-elev, #fff); }
.epcg-table th, .epcg-table td { border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.12)); padding: 8px 10px; text-align: center; }
.epcg-table th.left, .epcg-table td.left { text-align: left; }
/* Player column (1st) — compact 120px per request */
#epcg-roster-root .epcg-table th:nth-child(1),
#epcg-roster-root .epcg-table td:nth-child(1){
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}
/* Team column (2nd col) — tighter, keep content centered; allow wrap if needed but center it */
#epcg-roster-root .epcg-table th:nth-child(2),
#epcg-roster-root .epcg-table td:nth-child(2){
    width: 120px; /* a little tighter than before */
    min-width: 110px;
    max-width: 130px;
    white-space: nowrap;
    text-align: center;
}
/* Prevent wrapping inside the Team cell controls */
#epcg-roster-root .epcg-team-cell,
#epcg-roster-root .epcg-team-pill{ white-space: nowrap; }

/* When the inline controls stack in the Team cell, keep them centered and compact */
#epcg-roster-root .epcg-team-cell{ text-align: center; }
#epcg-roster-root .epcg-team-cell .epcg-inline{
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
    margin-right: auto;
}

/* Tighten Skins, Birdies, CTP columns and keep header controls on one line */
#epcg-roster-root .epcg-table th:nth-child(3),
#epcg-roster-root .epcg-table th:nth-child(4),
#epcg-roster-root .epcg-table th:nth-child(5){
    white-space: nowrap;
    width: 140px;
    min-width: 130px;
}
#epcg-roster-root .epcg-table td:nth-child(3),
#epcg-roster-root .epcg-table td:nth-child(4),
#epcg-roster-root .epcg-table td:nth-child(5){
    width: 140px;
}

/* Player cell with avatar */
#epcg-roster-root .epcg-player-cell{ display:inline-flex; align-items:center; gap:8px; flex-wrap: wrap; }
#epcg-roster-root .epcg-avatar{
    width: 28px !important; height: 28px !important; min-width:28px; min-height:28px;
    aspect-ratio: 1 / 1; /* ensure perfect circle even if theme sets auto heights */
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg-elev, #fff) 88%, #000);
    color: var(--color-text, #111);
    font-weight: 600; font-size: .9rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    overflow: hidden;
}
#epcg-roster-root .epcg-avatar img,
#epcg-roster-root img.epcg-avatar{ width:28px !important; height:28px !important; object-fit: cover; border-radius:50%; display:block; aspect-ratio: 1 / 1; }
#epcg-roster-root .epcg-player-name{ display:inline-block; max-width: 100%; }

/* USGA/Index Link styling - break to new line and indent */
#epcg-roster-root .epcg-player-cell a {
    flex-basis: 100%;
    width: 100%;
    margin-left: 36px; /* 28px avatar + 8px gap */
    font-size: 0.8em;
    line-height: 1.1;
    margin-top: -2px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}
/* Ensure the player name doesn't force a wrap prematurely */
#epcg-roster-root .epcg-player-cell .epcg-player-name {
    flex: 0 1 auto;
}

/* Ensure name truncates within 120px column (26 avatar + 8 gap ≈ 34 → leave ~80-86 for text) */
#epcg-roster-root .epcg-player-cell .epcg-player-name{
    max-width: 84px; /* 28 avatar + 8 gap ≈ 36 → leave ~84 within 120 col */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Balloon with full player name on click */
.epcg-name-balloon{
    background: var(--bg-elev, #fff);
    color: var(--color-text, #111);
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
    padding: 6px 10px;
    z-index: 1000;
    max-width: min(320px, calc(100vw - 24px));
    pointer-events: none;
    box-sizing: border-box;
}
[data-theme="dark"] .epcg-name-balloon{
    background: var(--color-surface, #111827);
    color: var(--color-text, #e5e7eb);
    border-color: rgba(148,163,184,0.35);
}

/* Cards for results */
.epcg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.epcg-card { border: 1px solid var(--color-border, rgba(0,0,0,0.12)); border-radius: 12px; background: var(--bg-elev, #fff); box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; }
.epcg-card-head { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.12)); }
.epcg-card-body { padding: 10px 12px; }
.muted { opacity: .75; font-size: .92rem; }

/* Dark mode compat */
[data-theme="dark"] .epcg-tab { background: var(--color-surface, #111827); }
[data-theme="dark"] .epcg-panel .epcg-panel-inner { background: var(--color-surface, #111827); }
[data-theme="dark"] .epcg-btn { background: var(--color-surface, #111827); }
[data-theme="dark"] .epcg-card { background: var(--color-surface, #111827); }

/* ===== Results UI additions ===== */
.epcg-meta { margin-bottom: 8px; font-size: .93rem; opacity: .9; }
.epcg-results-section + .epcg-results-section { margin-top: 10px; }
/* Contained scroll for per-hole list to align with sibling sections */
.epcg-holes-scroll{
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #e5e7eb;
    -webkit-overflow-scrolling: touch;
}
.epcg-holes-scroll::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}
.epcg-holes-scroll::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 5px;
    min-width: 40px;
}
.epcg-holes-scroll::-webkit-scrollbar-track {
    background-color: #e5e7eb;
    border-radius: 5px;
}
.epcg-holes-scroll .epcg-table {
    min-width: 600px;
}

/* Compact tables for per-hole/leaderboards */
.epcg-table.epcg-compact th,
.epcg-table.epcg-compact td { padding: 6px 8px; }
.epcg-table.epcg-compact thead th { font-weight: 600; }

/* Badges for Skins results */
.epcg-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1.2;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    background: var(--bg-elev, #fff);
}

/* Birdies: hole number chips */
.epcg-table td.holes{ text-align:left; }
.epcg-hole-chip{
    display:inline-flex; align-items:center; justify-content:center;
    width: 26px; height: 26px; border-radius:50%;
    margin: 0 4px 4px 0;
    font-size:.9rem; font-weight:700;
    border:1px solid var(--color-border, rgba(0,0,0,0.12));
    background: var(--bg-elev, #fff); color: inherit;
}
/* Explicit chip styles per scoring type */
.epcg-hole-chip.type-birdie{
    background: var(--eps-site-green, #4D969B);
    color: #fff;
    border-color: color-mix(in srgb, var(--eps-site-green, #4D969B) 60%, rgba(0,0,0,0.12));
}
.epcg-hole-chip.type-eagle{ /* royal purple with white number */
    background: var(--eps-chip-eagle, #6B3DFF);
    color: #fff;
    border-color: color-mix(in srgb, var(--eps-chip-eagle, #6B3DFF) 55%, rgba(0,0,0,0.12));
}
[data-theme="light"] .epcg-hole-chip.type-albatross,
.epcg-hole-chip.type-albatross{ /* white bg, site blue number text (force in all themes) */
    background: #fff !important;
    color: #1e90ff !important; /* site blue */
    border-color: color-mix(in srgb, #1e90ff 45%, rgba(0,0,0,0.18)) !important;
}
[data-theme="dark"] .epcg-hole-chip{ background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); border-color: rgba(148,163,184,0.35); }
[data-theme="dark"] .epcg-hole-chip.type-birdie{ background:#1f6d3a; color:#e8ffee; border-color:#2a8b4a; }
[data-theme="dark"] .epcg-hole-chip.type-eagle{ background:#5532c7; color:#f4f4ff; border-color:#6a49db; }
/* keep albatross white in dark as well */
[data-theme="dark"] .epcg-hole-chip.type-albatross{ background:#fff !important; color:#1e90ff !important; border-color: color-mix(in srgb, #1e90ff 45%, rgba(0,0,0,0.18)) !important; }

/* Legend row for Birdies section */
.epcg-legend { margin-top: 6px; }
.epcg-legend-row{ display:flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size:.92rem; }
.epcg-legend-label{ font-weight:600; margin-right: 4px; }
.epcg-legend-text{ opacity:.9; margin-right: 10px; }
/* Stacked Color Index list */
.epcg-legend-stack{ display:flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.epcg-legend-item{ display:flex; align-items:center; gap: 10px; }
.epcg-legend-item .epcg-hole-chip{ margin: 0; }
/* On very small screens, indent items slightly under the label */
@media (max-width: 640px){
  .epcg-legend-stack{ margin-left: 4px; }
}

/* ==============================
   Team Results — Sticky header/column
   ============================== */
.epcg-team-table-wrap{ position: relative; overflow: auto; }

/* 1. FORCE RIGID GEOMETRY for Team Table */
#epcg-team-table th,
#epcg-team-table td {
    height: 45px !important;
    line-height: 45px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* 2. STICKY HEADERS (Rows 1, 2, 3) - Fix vertical position */
#epcg-team-table thead tr th {
    position: sticky;
    z-index: 10;
    background: var(--bg-elev, #fff) !important;
    box-shadow: 0 1px 0 var(--color-border, rgba(0,0,0,0.14));
    border-bottom: none !important;
}
/* Explicit Row Offsets (using nth-child for robustness) */
#epcg-team-table thead tr:nth-child(1) th { top: 0 !important; }
#epcg-team-table thead tr:nth-child(2) th { top: 45px !important; }
#epcg-team-table thead tr:nth-child(3) th { top: 90px !important; }
#epcg-team-table thead tr:nth-child(4) th { top: 135px !important; }

/* Dark Mode Background for Headers */
[data-theme="dark"] #epcg-team-table thead tr th,
html.theme-dark #epcg-team-table thead tr th {
    background: var(--color-surface, #111827) !important;
}

/* 3. STICKY COLUMNS (Left + Status) */

/* Body Cells (slide UNDER header) */
#epcg-team-table tbody th.left,
#epcg-team-table tbody td.left,
#epcg-team-table tfoot th.left,
#epcg-team-table tfoot td.left,
#epcg-team-table tbody th.status-col,
#epcg-team-table tbody td.status-col,
#epcg-team-table tfoot th.status-col,
#epcg-team-table tfoot td.status-col {
    position: sticky;
    z-index: 5;
    background: var(--bg-elev, #fff) !important;
}

/* Header Intersection Cells (Team/Par/Ydg + Pos) - Fix ABOVE everything */
#epcg-team-table thead th.left,
#epcg-team-table thead th.status-col {
    position: sticky;
    z-index: 30; /* Highest */
    background: var(--bg-elev, #fff) !important;
    /* Top offset is inherited from tr:nth-child rules above! */
}

/* Column Horizontal Offsets */
#epcg-team-table .left:first-child {
    left: 0;
    min-width: 120px !important;
    max-width: 120px !important;
    width: 120px !important;
}
#epcg-team-table .status-col {
    left: 120px;
    min-width: 70px !important;
    max-width: 70px !important;
    width: 70px !important;
    text-align: center;
    border-right: 1px solid var(--color-border, rgba(0,0,0,0.14));
    padding: 0 4px !important;
}

/* Dark Mode Background for Sticky Columns */
[data-theme="dark"] #epcg-team-table .sticky-col,
[data-theme="dark"] #epcg-team-table .left,
[data-theme="dark"] #epcg-team-table .status-col,
html.theme-dark #epcg-team-table .left,
html.theme-dark #epcg-team-table .status-col {
    background: var(--color-surface, #111827) !important;
}

/* 4. ZEBRA STRIPING FIX on Sticky Columns */
/* On even rows, force the sticky cells to match the stripe color */
#epcg-team-table tbody tr:nth-child(even) th.left,
#epcg-team-table tbody tr:nth-child(even) td.left,
#epcg-team-table tbody tr:nth-child(even) th.status-col,
#epcg-team-table tbody tr:nth-child(even) td.status-col {
    background-color: var(--bg-elev-alt, #f9fafb) !important;
}

/* SAFETY: Un-stick columns that are not the first child.
   This fixes Scramble tables (where Col 1 is Pos, Col 2 is Team.left)
   preventing the Team column from floating without a left coord. */
#epcg-team-table .left:not(:first-child),
#epcg-team-table th.left:not(:first-child),
#epcg-team-table td.left:not(:first-child) {
    position: static !important;
    z-index: auto !important;
    background: inherit !important; /* Allow zebra striping to work naturally */
    border-right: none !important;
    box-shadow: none !important;
}
[data-theme="dark"] #epcg-team-table tbody tr:nth-child(even) th.left,
[data-theme="dark"] #epcg-team-table tbody tr:nth-child(even) td.left,
[data-theme="dark"] #epcg-team-table tbody tr:nth-child(even) th.status-col,
[data-theme="dark"] #epcg-team-table tbody tr:nth-child(even) td.status-col,
html.theme-dark #epcg-team-table tbody tr:nth-child(even) th.left,
html.theme-dark #epcg-team-table tbody tr:nth-child(even) td.left,
html.theme-dark #epcg-team-table tbody tr:nth-child(even) th.status-col,
html.theme-dark #epcg-team-table tbody tr:nth-child(even) td.status-col {
    background-color: var(--bg-elev-alt, #0f172a) !important;
}

/* ZEBRA STRIPING & STICKY COMPATIBILITY */
/* Zebra stripe the body rows (Scoped to Team Table) */
#epcg-team-table.ept-tr-table tbody tr:nth-child(even) {
    background-color: var(--bg-elev-alt, #f9fafb) !important;
}
/* Dark mode zebra */
[data-theme="dark"] #epcg-team-table.ept-tr-table tbody tr:nth-child(even),
html.theme-dark #epcg-team-table.ept-tr-table tbody tr:nth-child(even) {
    background-color: var(--bg-elev-alt, #0f172a) !important;
}

/* Ensure sticky columns on even rows match the zebra color */
#epcg-team-table.ept-tr-table tbody tr:nth-child(even) th.left,
#epcg-team-table.ept-tr-table tbody tr:nth-child(even) td.left,
#epcg-team-table.ept-tr-table tbody tr:nth-child(even) th.status-col,
#epcg-team-table.ept-tr-table tbody tr:nth-child(even) td.status-col {
    background-color: var(--bg-elev-alt, #f9fafb) !important;
}
[data-theme="dark"] #epcg-team-table.ept-tr-table tbody tr:nth-child(even) th.left,
[data-theme="dark"] #epcg-team-table.ept-tr-table tbody tr:nth-child(even) td.left,
[data-theme="dark"] #epcg-team-table.ept-tr-table tbody tr:nth-child(even) th.status-col,
[data-theme="dark"] #epcg-team-table.ept-tr-table tbody tr:nth-child(even) td.status-col,
html.theme-dark #epcg-team-table.ept-tr-table tbody tr:nth-child(even) th.left,
html.theme-dark #epcg-team-table.ept-tr-table tbody tr:nth-child(even) td.left,
html.theme-dark #epcg-team-table.ept-tr-table tbody tr:nth-child(even) th.status-col,
html.theme-dark #epcg-team-table.ept-tr-table tbody tr:nth-child(even) td.status-col {
    background-color: var(--bg-elev-alt, #0f172a) !important;
}

/* Generic width safety for Team columns in other tables (e.g. Scramble) */
.ept-tr-table .left {
    min-width: 120px;
}

/* =========================
   MOBILE ENHANCEMENTS
   Make Event Games look like distinct sections on phones
   ========================= */

@media (max-width: 768px) {
    /* Widen hole columns on mobile per user request */
    .epcg-team-table-wrap .ept-tr-table th.ept-tr-cell,
    .epcg-team-table-wrap .ept-tr-table td.ept-tr-score-cell,
    .epcg-team-table-wrap .ept-tr-table th.col-hole,
    .epcg-team-table-wrap .ept-tr-table td.col-hole {
        min-width: 42px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}
@media (max-width: 768px){
  /* Remove side gutters to maximize mobile width, but keep it safe */
  #epcg-games-box.epcg-wrap{ 
    margin-left: 0 !important; 
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    touch-action: pan-y !important;
  }

  /* Ensure panel contents don't force page width */
  .epcg-panel, .epcg-panel-inner {
      max-width: 100% !important;
      overflow-x: hidden !important;
  }

  /* Force tables to handle their own scroll and NOT bounce the page */
  .epcg-panel .epgm-table-scroll,
  .epcg-panel .epgm-table-container,
  .epcg-panel .epcg-team-table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-x: none;
      touch-action: pan-x pan-y;
      -webkit-overflow-scrolling: touch;
  }
  /* Tabs: stack and enlarge touch target */
  .epcg-tabs{ flex-wrap: wrap; gap: 10px; }
  .epcg-tab{ flex: 1 1 calc(50% - 10px); text-align:center; padding: 12px 14px; border-radius: 999px; }

/* =========================================================
   SCRAMBLE LEADERBOARD FIXES (Tournament Results)
   Targeting .col-team specifically as it differs from .left
   ========================================================= */
.ept-tr-table .col-team,
.ept-scramble-table .col-team {
    min-width: 120px !important;
    width: auto !important; /* Allow growth */
}
.ept-tr-table th.col-team,
.ept-scramble-table th.col-team {
    text-align: left; /* Ensure header aligns with content */
}

  /* Panel padding for breathing room */
  .epcg-panel .epcg-panel-inner{ border-radius: 14px; }

  /* Setup form: one column, clear section separation */
  .epcg-form .epcg-grid{ grid-template-columns: 1fr; gap: 14px; }
  .epcg-settings{ 
    padding: 10px 12px; 
    border: 1px solid var(--color-border, rgba(0,0,0,0.12)); 
    border-radius: 12px; 
    background: var(--bg-elev, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  [data-theme="dark"] .epcg-settings{
    background: var(--color-surface, #111827);
    border-color: rgba(148,163,184,0.35);
    box-shadow: none;
  }
  .epcg-form fieldset{ margin-bottom: 12px; }
  .epcg-field-row{ margin-top: 8px; }
  #epcg-bird-mults{ margin-top: 8px; margin-bottom: 8px; }

  /* Inputs and toggles: increase vertical rhythm slightly */
  .epcg-form input[type="number"].epcg-sm{ padding: 6px 10px; font-size: .98rem; }
  .epcg-select-sm{ padding: 6px 10px; }
  .epcg-switch{ min-width: 100%; }

  /* Roster: allow horizontal scroll for table; tighten padding */
  .epcg-table:not(.epcg-holes-scroll .epcg-table){ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .epcg-table:not(.epcg-holes-scroll .epcg-table) thead, .epcg-table:not(.epcg-holes-scroll .epcg-table) tbody, .epcg-table:not(.epcg-holes-scroll .epcg-table) tr, .epcg-table:not(.epcg-holes-scroll .epcg-table) th, .epcg-table:not(.epcg-holes-scroll .epcg-table) td{ display: revert; }
  .epcg-table th, .epcg-table td{ padding: 7px 8px; }
  .epcg-inline{ flex-wrap: wrap; gap: 8px; }

  /* Results: chip tables scroll and compact spacing */
  .epcg-holes-scroll{ overflow-x: auto; overflow-y: hidden; }
  .epcg-card{ border-radius: 14px; }
  .epcg-card-head{ padding: 12px; }
  .epcg-card-body{ padding: 12px; }

  /* Team pill: ensure comfortable tap area */
  #epcg-roster-root .epcg-team-pill,
  .epcg-panel.epcg-roster .epcg-team-pill,
  button.epcg-team-pill{ padding: 6px 12px !important; font-size: .95rem !important; }
}

/* On very narrow devices, ensure we don't overflow */
@media (max-width: 480px){
  #epcg-games-box.epcg-wrap{ 
    margin-left: 0; 
    margin-right: 0; 
  }
}
.epcg-badge-win {
    /* Use scorecard pill green to match modal buttons */
    border-color: color-mix(in srgb, var(--eps-site-green, #4D969B) 60%, #fff);
    color: var(--eps-site-green, #4D969B);
    background: color-mix(in srgb, var(--eps-site-green, #4D969B) 12%, #fff);
}

/* =========================
   TEAM RESULTS — sticky header + sticky first column
   ========================= */
.epcg-team-table-wrap{
  max-height: 360px;
  overflow: auto;
  position: relative;
}
.epcg-table.sticky-head thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-elev, #fff);
}
[data-theme="dark"] .epcg-table.sticky-head thead th{
  background: var(--color-surface, #111827);
}
.epcg-table.sticky-col td:first-child,
.epcg-table.sticky-col th:first-child{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-elev, #fff);
}
[data-theme="dark"] .epcg-table.sticky-col tfoot th:first-child{
  background: var(--color-surface, #111827);
}
[data-theme="light"] .epcg-table.sticky-col tfoot th:first-child,
.epcg-table.sticky-col tfoot th:first-child{
  background: var(--bg-elev, #fff);
}
[data-theme="dark"] .epcg-table.sticky-col td:first-child,
[data-theme="dark"] .epcg-table.sticky-col th:first-child{
  background: var(--color-surface, #111827);
}
.epcg-table thead tr.hdr-par th,
.epcg-table tfoot tr.hdr-hcp th{
  font-weight: 600;
  opacity: .9;
}

/* Team Results score indicators to mimic scorecard marks */
.epcg-mark{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* fixed so all score cells look uniform */
  height: 30px;
  padding: 0; /* avoid width growth from padding */
  line-height: 1;
  font-weight: 700;
}
.epcg-mark-circle-1{
  /* Birdie: single circle using site green */
  border: 1px solid var(--eps-site-green, #4D969B);
  border-radius: 999px;
}
.epcg-mark-circle-2{
  /* Eagle or better: double circle using site purple */
  border: 1px solid var(--eps-chip-eagle, #6B3DFF);
  border-radius: 999px;
  /* Increase ring spacing and contrast for higher distinction */
  box-shadow:
    inset 0 0 0 2px var(--eps-chip-eagle, #6B3DFF), /* inner thin ring */
    inset 0 0 0 5px color-mix(in srgb, var(--eps-chip-eagle, #6B3DFF) 35%, transparent); /* outer faint ring */
}
.epcg-mark-square-1{
  /* Bogey: single square using site accent color */
  border: 1px solid var(--color-accent, #0073aa);
  border-radius: 0; /* true square */
}
.epcg-mark-square-2{
  /* Double bogey: red double-square, more separated double ring */
  border: 1px solid var(--color-error, #b23a48);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--color-error, #b23a48) 85%, transparent), /* inner thin ring */
    inset 0 0 0 5px color-mix(in srgb, var(--color-error, #b23a48) 40%, transparent); /* outer faint ring */
}
.epcg-mark-square-3{
  /* Triple or worse: brown triple-square, add a third, clearly spaced ring */
  border: 1px solid #8B4513; /* saddle brown */
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #8B4513 85%, transparent), /* inner thin ring */
    inset 0 0 0 4px color-mix(in srgb, #8B4513 60%, transparent), /* mid ring */
    inset 0 0 0 7px color-mix(in srgb, #8B4513 35%, transparent); /* outer ring */
}
[data-theme="dark"] .epcg-mark-circle-1{
  border-color: var(--eps-site-green, #4D969B);
}
[data-theme="dark"] .epcg-mark-circle-2{
  border-color: var(--eps-chip-eagle, #6B3DFF);
  box-shadow:
    inset 0 0 0 2px var(--eps-chip-eagle, #6B3DFF),
    inset 0 0 0 5px color-mix(in srgb, var(--eps-chip-eagle, #6B3DFF) 40%, transparent);
}
[data-theme="dark"] .epcg-mark-square-1{
  border-color: var(--color-accent, #7cc3ff);
}
[data-theme="dark"] .epcg-mark-square-2{
  border-color: var(--color-error, #ef4444);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--color-error, #ef4444) 80%, transparent),
    inset 0 0 0 5px color-mix(in srgb, var(--color-error, #ef4444) 45%, transparent);
}
[data-theme="dark"] .epcg-mark-square-3{
  border-color: #B28A5A; /* lighter brown for dark bg */
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #B28A5A 85%, transparent),
    inset 0 0 0 4px color-mix(in srgb, #B28A5A 60%, transparent),
    inset 0 0 0 7px color-mix(in srgb, #B28A5A 40%, transparent);
}
.epcg-badge-void {
    border-color: var(--color-border, rgba(0,0,0,0.18));
    color: rgba(0,0,0,0.65);
    background: color-mix(in srgb, var(--color-border, rgba(0,0,0,0.12)) 30%, #fff);
}
[data-theme="dark"] .epcg-badge-void { color: #cbd5e1; background: rgba(148,163,184,0.15); border-color: rgba(148,163,184,0.35); }
[data-theme="dark"] .epcg-badge { background: var(--color-surface, #111827); }
[data-theme="dark"] .epcg-badge-win { color: #9ad5d9; border-color: #4D969B; background: rgba(77,150,155,0.22); }

/* Carry indicator for CTP */
.epcg-carry { opacity: .7; font-style: italic; margin-left: 4px; }

/* Inline form for CTP entry */
.epcg-form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.epcg-form-inline label { display: flex; flex-direction: column; gap: 4px; font-size: .95rem; }
.epcg-form-inline input[type="number"],
.epcg-form-inline select {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    background: #fff;
}
[data-theme="dark"] .epcg-card-body, [data-theme="dark"] .epcg-table { background: var(--color-surface, #111827); }
[data-theme="dark"] .epcg-form-inline input[type="number"],
[data-theme="dark"] .epcg-form-inline select { background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); }

/* Lightweight popup for CTP other entries */
.epcg-pop{ position: fixed; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; display: flex; align-items: center; justify-content: center; z-index: 999999; transition: opacity .2s ease; pointer-events: none; }
.epcg-pop.show{ opacity: 1; pointer-events: auto; }
.epcg-pop-inner{ background: var(--bg-elev, #fff); color: var(--color-text, #111); border-radius: 12px; min-width: 260px; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,0.25); border:1px solid var(--color-border, rgba(0,0,0,0.12)); }
.epcg-pop-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--color-border, rgba(0,0,0,0.12)); font-weight:600; }
.epcg-pop-close{ appearance:none; border:0; background: transparent; font-size: 18px; cursor:pointer; }
.epcg-pop-list{ list-style:none; margin:0; padding:10px 14px; max-height: 240px; overflow:auto; }
[data-theme="dark"] .epcg-pop-inner{ background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); }

/* ===== Toast notifications ===== */
.epcg-toast {
    position: fixed;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 99999;
}
.epcg-toast-item {
    background: var(--bg-elev, #fff);
    color: var(--color-text, #111);
    border: 1px solid var(--color-border, rgba(0,0,0,0.12));
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 6px 16px rgba(15,23,42,0.18);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}
.epcg-toast-item.show { opacity: 1; transform: translateY(0); }
.epcg-toast-item.error { border-color: color-mix(in srgb, var(--color-error, #b23a48) 35%, var(--color-border, rgba(0,0,0,0.12))); }
[data-theme="dark"] .epcg-toast-item { background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); }

/* ===== Avatar pill (for Skins per-hole winners) ===== */
.epcg-avatar-pill{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-border, rgba(0,0,0,0.12)); background: var(--bg-elev, #fff); border-radius: 999px; padding:2px 8px; font-size:.85rem; }
.epcg-avatar-pill .epcg-avatar-circle{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background: var(--eps-site-green, #4D969B); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); font-size:.72rem; }
.epcg-avatar-pill .epcg-avatar-name{ white-space:nowrap; }
[data-theme="dark"] .epcg-avatar-pill{ background: var(--color-surface, #111827); color: var(--color-text, #e5e7eb); }

/* ===== Loading states (spinner + skeletons) ===== */
.epcg-loading { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.epcg-spinner {
    width: 18px; height: 18px; border: 2px solid rgba(0,0,0,0.15);
    border-top-color: var(--color-accent, #0073aa);
    border-radius: 50%;
    animation: epcg-spin 0.8s linear infinite;
}
@keyframes epcg-spin { to { transform: rotate(360deg); } }

.epcg-skel {
    display: inline-block;
    height: 10px;
    width: 100px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.12) 50%,
        rgba(0,0,0,0.06) 100%);
    background-size: 200% 100%;
    animation: epcg-skel 1.2s ease-in-out infinite;
}
@keyframes epcg-skel { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }
[data-theme="dark"] .epcg-skel {
    background: linear-gradient(90deg,
        rgba(148,163,184,0.12) 0%,
        rgba(148,163,184,0.20) 50%,
        rgba(148,163,184,0.12) 100%);
}

/* ===================================================================
   TEAM RESULTS - STICKY HEADER FIXES (Replaces scorecard-theme.css rules)
   =================================================================== */

/* 1. Enable vertical scrolling with sticky headers */
.epcg-team-table-wrap {
    max-height: 80vh;
    overflow: auto;
    border-bottom: 1px solid #e5e7eb;
    width: 100%;
    display: block;
    position: relative;
}

/* 2. Stacked Sticky Headers - Enforce Strict Heights */
.ept-tr-table thead th {
    height: 45px !important;
    max-height: 45px !important;
    line-height: 45px !important;
    padding: 0 4px !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #e5e7eb;
}

/* Row 1 (Hole/Team) */
.ept-tr-table thead tr:nth-child(1) th { top: 0 !important; z-index: 45; background: #ffffff !important; }
/* Row 2 (Par) */
.ept-tr-table thead tr:nth-child(2) th { top: 45px !important; z-index: 44; background: #ffffff !important; }
/* Row 3 (Ydg) */
.ept-tr-table thead tr:nth-child(3) th { top: 90px !important; z-index: 43; background: #ffffff !important; }
/* Row 4 (Hcp - if present) */
.ept-tr-table thead tr:nth-child(4) th { top: 135px !important; z-index: 42; background: #ffffff !important; }

/* Sticky Left Column */
.ept-tr-table th.left,
.ept-tr-table td.left {
    position: sticky !important;
    left: 0 !important;
    z-index: 20;
    /* Force opaque background for sticky player column (prevents see-through while scrolling) */
    background-color: var(--bg-elev, #ffffff) !important;
    height: 45px !important;
    max-height: 45px !important;
    line-height: 45px !important;
    min-width: 160px !important;
    width: 160px !important;
    max-width: 250px !important;
    border-right: 1px solid #e5e7eb;
    background-clip: padding-box;
    box-sizing: border-box !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Zebra compatibility: ensure sticky player cells match row striping */
.ept-tr-table tbody tr:nth-child(even) td.left,
.ept-tr-table tbody tr:nth-child(even) th.left{
    background-color: var(--bg-elev-alt, #f9fafb) !important;
}

/* Intersection Z-Index */
.ept-tr-table thead tr:nth-child(1) th.left { z-index: 55; }
.ept-tr-table thead tr:nth-child(2) th.left { z-index: 54; }
.ept-tr-table thead tr:nth-child(3) th.left { z-index: 53; }
.ept-tr-table thead tr:nth-child(4) th.left { z-index: 52; }

/* Dark Mode Overrides for Sticky Headers */
@media (prefers-color-scheme: dark) {
    .ept-tr-table thead th { background: #1f2937 !important; border-bottom-color: #374151; color: #e5e7eb; }
    .ept-tr-table th.left, .ept-tr-table td.left { background: #111827 !important; border-right-color: #374151; color: #e5e7eb; }
    
    /* Ensure intersection uses left column background */
    .ept-tr-table thead tr th.left { background: #111827 !important; }
}
[data-theme="dark"] .ept-tr-table thead th,
.theme-dark .ept-tr-table thead th { background: #1f2937 !important; border-bottom-color: #374151; color: #e5e7eb; }

[data-theme="dark"] .ept-tr-table th.left, 
[data-theme="dark"] .ept-tr-table td.left,
.theme-dark .ept-tr-table th.left,
.theme-dark .ept-tr-table td.left { background-color: var(--color-surface, #111827) !important; border-right-color: #374151; color: #e5e7eb; }

[data-theme="dark"] .ept-tr-table tbody tr:nth-child(even) td.left,
[data-theme="dark"] .ept-tr-table tbody tr:nth-child(even) th.left,
.theme-dark .ept-tr-table tbody tr:nth-child(even) td.left,
.theme-dark .ept-tr-table tbody tr:nth-child(even) th.left{
    background-color: color-mix(in srgb, var(--color-surface, #111827) 88%, #0b1220) !important;
}

[data-theme="dark"] .ept-tr-table thead tr th.left,
.theme-dark .ept-tr-table thead tr th.left { background: #111827 !important; }

/* Scrollbar Clean Up (Dark Mode) */
.theme-dark .epcg-holes-scroll,
.theme-dark .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
}
.theme-dark .epcg-holes-scroll::-webkit-scrollbar,
.theme-dark .table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.theme-dark .epcg-holes-scroll::-webkit-scrollbar-thumb,
.theme-dark .table-responsive::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 4px;
}
.theme-dark .epcg-holes-scroll::-webkit-scrollbar-track,
.theme-dark .table-responsive::-webkit-scrollbar-track {
    background-color: #1f2937;
}

/* Meta Clean Up */
.epcg-meta {
    padding: 4px 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}
.theme-dark .epcg-meta {
    background: rgba(255,255,255,0.05);
    color: #e5e7eb;
}

/* Separation for Core Games Section */
.epcg-results-root {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
