/* ===================================================================
   EVENTS PLAYER SCORECARD — THEME (COLORS ONLY)
   =================================================================== */

:root {
    --eps-par-row-bg: var(--color-par);
    --eps-hcp-row-bg: var(--color-hcp);

    --eps-col-slate-light: color-mix(in srgb, var(--color-surface) 90%, #0f172a);
    --eps-col-slate-mid:   color-mix(in srgb, var(--color-surface) 75%, #0f172a);
    --eps-col-slate-dark:  color-mix(in srgb, var(--color-surface) 60%, #0f172a);

    --eps-scroll-fade-bg: var(--color-bg);
}

/* ===================================================================
   BASE SURFACES
   =================================================================== */

.eps-scorecard-container {
    background: var(--bg-elev);
    color: var(--color-text);
}

/* Cells */
.eps-sc-cell,
.eps-sc-head-player {
    background: var(--eps-col-slate-light);
    color: var(--color-text);
}

/* Hover — exclude outcome cells so rings remain "floating" */
.eps-sc-cell:hover:not(:has(.eps-score--eagle, .eps-score--birdie, .eps-score--bogey, .eps-score--double, .eps-score--triple, .eps-score--par)) {
    background: rgba(255,255,255,0.06);
}
/* Fallback for browsers without :has() support — use helper class added in markup */
.eps-sc-cell.has-outcome:hover { background: inherit !important; }

/* ===================================================================
   HEADER ROW (Hole Numbers)
   =================================================================== */
.eps-sc-head {
    /* Use solid background to prevent content showing through */
    background: var(--eps-col-slate-light) !important;
    opacity: 1 !important;
    /* Distinctive solid space (separator) between Header and Par row */
    border-bottom: 4px solid var(--color-bg) !important;
    /* Ensure stickiness and stacking */
    position: sticky;
    top: 0;
    z-index: 100; /* Boosted z-index */
    transform: translateZ(0); /* Force hardware composition to match player col */
}
/* Ensure the sticky first column in header matches */
.eps-sc-head .eps-sc-head-player {
    /* [FIX] Match the header row background explicitly (Gray instead of Surface/White) */
    background: var(--eps-col-slate-light) !important;
    border-bottom: 4px solid var(--color-bg) !important;
    z-index: 101 !important; /* Corner must be > Header Row (100) */
}

/* ===================================================================
   PAR / HCP ROWS (Sticky below Header)
   =================================================================== */
.par-row {
    background: color-mix(in srgb, var(--eps-par-row-bg), transparent 90%) !important;
    color: var(--color-text);
    /* Sticky Positioning */
    position: sticky;
    top: 56px; /* Below Main Header (~52px + 4px border) */
    z-index: 90;
    transform: translateZ(0); /* Force hardware composition */
    /* Separator */
    border-bottom: 2px solid var(--color-bg) !important;
}
.hcp-row {
    background: color-mix(in srgb, var(--eps-hcp-row-bg), transparent 90%) !important;
    color: var(--color-text);
    /* Sticky Positioning (below Par row) */
    position: sticky;
    top: 108px; /* 56px + ~52px Par Row */
    z-index: 80;
    transform: translateZ(0); /* Force hardware composition */
    border-bottom: 2px solid var(--color-bg) !important;
}

/* [FIX] Mobile Sticky Offsets & Backgrounds */
@media (max-width: 768px) {
    /* Increase offsets to account for taller wrapping header ("Hole-Touch...") */
    .par-row { top: 72px !important; }
    .hcp-row { top: 126px !important; } /* 72 + 54 */
    
    /* Ensure no gap shows scrolling content */
    .eps-sc-head { border-bottom-width: 0 !important; box-shadow: 0 4px 0 var(--color-bg); }
    .par-row, .hcp-row { border-bottom-width: 0 !important; box-shadow: 0 2px 0 var(--color-bg); }
}

.par-row .eps-sc-cell,
.hcp-row .eps-sc-cell {
    background: inherit !important;
    color: inherit !important;
}

/* 
   FIX: Sticky Header Transparency
   The first column (Player/Label) is sticky. If the row is transparent, 
   scrolling content shows underneath. We must make the sticky header opaque 
   by mixing the row tint with the table background (bg-elev) to simulate the translucent look.
   Formula: 15% tint + 85% surface (matching the transparent 85% above).
*/
.par-row .eps-sc-head-player {
    background: color-mix(in srgb, var(--eps-par-row-bg) 15%, var(--bg-elev)) !important;
    color: var(--color-text);
    /* Ensure border matches row */
    border-bottom: 2px solid var(--color-bg) !important;
    z-index: 91 !important;
}
.hcp-row .eps-sc-head-player {
    background: color-mix(in srgb, var(--eps-hcp-row-bg) 15%, var(--bg-elev)) !important;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-bg) !important;
    z-index: 81 !important;
}

/* Dark Mode Override for Sticky Headers - Solid Opacity (Rows & Sticky Cols) */
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) .eps-sc-head,
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) .par-row,
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) .hcp-row {
    /* Use a solid dark color (Slate-800 mixed with base) to prevent transparency */
    background: #1f2937 !important; 
    opacity: 1 !important;
}

:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) .eps-sc-head .eps-sc-head-player,
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) .par-row .eps-sc-head-player,
:is(html.theme-dark, body.theme-dark, html.dark, body.dark, [data-theme="dark"]) .hcp-row .eps-sc-head-player {
    background: #1f2937 !important; 
}

/* ===================================================================
   OUT / IN / TOTAL / NET COLORS
   =================================================================== */
.eps-sc-out   { background: #5A6F8A !important; color: #fff !important; }
.eps-sc-in    { background: #4A5F78 !important; color: #fff !important; }
.eps-sc-total { background: #3E5068 !important; color: #fff !important; }
.eps-sc-net   { background: #A7B9C8 !important; color: #fff !important; }

/* Dark theme variants — support multiple toggles, not only html.theme-dark */
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-sc-out   { background: #2F3A4A !important; }
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-sc-in    { background: #272F3C !important; }
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-sc-total { background: #1F2631 !important; }
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-sc-net   { background: #3C4754 !important; }

/* ===================================================================
   PLAYER CHIP VISUALS
   =================================================================== */

.eps-scorecard-container .eps-player-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.15);
}

.eps-scorecard-container .eps-player-init {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
}

/* Light mode variant for initials avatar: keep size and shape but adjust
   tones for contrast on light surfaces */
:root[data-theme="light"] .eps-scorecard-container .eps-player-init,
html.theme-light .eps-scorecard-container .eps-player-init {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
    color: #111827; /* slate-900 */
}

/* LABEL: left align */
.eps-sc-player .eps-player-label {
    text-align: left !important;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 28px;
}

/* RIGHT FADE */
.eps-sc-player .eps-player-chip::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    pointer-events: none;
    /* Theme-aware default (dark/auto): fade into current surface */
    background: linear-gradient(
            to right,
            transparent 0%,
            var(--color-surface) 70%
    );
}

/* Explicit light mode wants a pure white fade-out */
:root[data-theme="light"] .eps-sc-player .eps-player-chip::after,
html.theme-light .eps-sc-player .eps-player-chip::after {
    background: linear-gradient(
            to right,
            rgba(255,255,255,0) 0%,
            #ffffff 70%
    );
}

/* ===================================================================
   GROUP HEADER COLORS
   =================================================================== */
.eps-group-header {
    background: var(--eps-col-slate-mid) !important;
    color: var(--color-text);
}

/* ===================================================================
   STROKE SHADING (matches your JS)
   =================================================================== */
/*
  Goal: Use complementary, softer tints that harmonize with the cell surface
  while preserving clear contrast with the outcome rings (number borders).
  Implemented with theme-aware tokens so sites can fine-tune easily.
*/

/* Shared defaults (applies to auto) — provide base tokens used by theme blocks */
:root {
    /* Outline used on double/triple variants (kept subtle) */
    --eps-stroke-outline: color-mix(in srgb, var(--eps-site-green) 22%, transparent);
}

/* LIGHT MODE — stroke cells should be darker than the base cells */
:root[data-theme="light"],
html.theme-light {
    /* Darker, supportive green-slate tints relative to the light cell surface */
    /* Base hue used to darken (slate/green blend) */
    --_eps-stroke-base-light: #35686d; /* complementary to site green on light */
    /* Level 1/2/3: progressively stronger darkening for clear visibility */
    --eps-stroke-1: color-mix(in srgb, var(--eps-cell-surface) 84%, var(--_eps-stroke-base-light) 16%);
    --eps-stroke-2: color-mix(in srgb, var(--eps-cell-surface) 74%, var(--_eps-stroke-base-light) 26%);
    --eps-stroke-3: color-mix(in srgb, var(--eps-cell-surface) 64%, var(--_eps-stroke-base-light) 36%);
}

/* DARK MODE — stroke cells should be lighter than the base cells */
:root[data-theme="dark"],
html.theme-dark {
    /* Lighter, supportive teal tints lifted above the dark surface */
    --_eps-stroke-base-dark: #9ccbd0; /* light teal derived from site green */
    /* Level 1/2/3: progressively more teal (lighter), so 2-stroke > 1-stroke */
    --eps-stroke-1: color-mix(in srgb, var(--bg-elev) 80%, var(--_eps-stroke-base-dark) 20%);
    --eps-stroke-2: color-mix(in srgb, var(--bg-elev) 68%, var(--_eps-stroke-base-dark) 32%);
    --eps-stroke-3: color-mix(in srgb, var(--bg-elev) 56%, var(--_eps-stroke-base-dark) 44%);
}

/* AUTO MODE — provide explicit tokens so "auto" users see the new shading
   Default to light values, then override under prefers-color-scheme: dark */
:root[data-theme="auto"] {
    /* Use slightly stronger contrast in auto to ensure visibility */
    --_eps-stroke-base-light: #35686d;
    --eps-stroke-1: color-mix(in srgb, var(--eps-cell-surface) 82%, var(--_eps-stroke-base-light) 18%);
    --eps-stroke-2: color-mix(in srgb, var(--eps-cell-surface) 72%, var(--_eps-stroke-base-light) 28%);
    --eps-stroke-3: color-mix(in srgb, var(--eps-cell-surface) 62%, var(--_eps-stroke-base-light) 38%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
      --_eps-stroke-base-dark: #9ccbd0;
      --eps-stroke-1: color-mix(in srgb, var(--bg-elev) 80%, var(--_eps-stroke-base-dark) 20%);
      --eps-stroke-2: color-mix(in srgb, var(--bg-elev) 68%, var(--_eps-stroke-base-dark) 32%);
      --eps-stroke-3: color-mix(in srgb, var(--bg-elev) 56%, var(--_eps-stroke-base-dark) 44%);
  }
}

/* Apply inset pill-glow stroke indicators */
.eps-scorecard-container .eps-sc-cell.stroke-hole,
.eps-sc-cell.stroke-hole {
    box-shadow: inset 0 0 6px 1px rgba(56, 152, 236, 0.32) !important;
}
.eps-scorecard-container .eps-sc-cell.stroke-double,
.eps-sc-cell.stroke-double {
    box-shadow: inset 0 0 8px 2px rgba(56, 152, 236, 0.48) !important;
    border: none;
}
.eps-scorecard-container .eps-sc-cell.stroke-triple,
.eps-sc-cell.stroke-triple {
    box-shadow: inset 0 0 10px 3px rgba(56, 152, 236, 0.60) !important;
    border: none;
}

/* Plus handicap "stroke-add" — holes where a plus player adds strokes (card mode) */
.eps-scorecard-container .eps-sc-cell.stroke-add,
.eps-sc-cell.stroke-add {
    box-shadow: inset 0 0 6px 1px var(--eps-stroke-add-glow, rgba(232, 160, 64, 0.38)) !important;
}

/* Keep glow stable on hover/focus so it doesn't revert to generic hover */
.eps-sc-cell.stroke-hole:is(:hover, :focus, :active)    { box-shadow: inset 0 0 6px 1px rgba(56, 152, 236, 0.32) !important; }
.eps-sc-cell.stroke-double:is(:hover, :focus, :active)  { box-shadow: inset 0 0 8px 2px rgba(56, 152, 236, 0.48) !important; }
.eps-sc-cell.stroke-triple:is(:hover, :focus, :active)  { box-shadow: inset 0 0 10px 3px rgba(56, 152, 236, 0.60) !important; }
.eps-sc-cell.stroke-add:is(:hover, :focus, :active)     { box-shadow: inset 0 0 6px 1px var(--eps-stroke-add-glow, rgba(232, 160, 64, 0.38)) !important; }

/* ===================================================================
   LIGHT MODE — MODERN, SUBTLE SCORECARD LOOK
   These overrides apply only in explicit light mode to avoid
   affecting dark mode styles defined above.
   =================================================================== */

/* Tokens for score outcomes and surfaces */
:root,
:root[data-theme="light"],
html.theme-light {
    /* Score outcome tints */
    --eps-eagle-bg:  hsl(168 70% 92%);
    --eps-eagle-br:  hsl(168 60% 67%);
    --eps-eagle-tx:  hsl(168 32% 25%);

    --eps-birdie-bg: hsl(152 65% 93%);
    --eps-birdie-br: hsl(152 55% 65%);
    --eps-birdie-tx: hsl(152 32% 22%);

    --eps-par-bg:    hsl(210 24% 96%);
    --eps-par-br:    hsl(210 20% 86%);
    --eps-par-tx:    hsl(215 25% 26%);

    --eps-bogey-bg:  hsl(24 95% 93%);
    --eps-bogey-br:  hsl(24 85% 70%);
    --eps-bogey-tx:  hsl(20 50% 25%);

    --eps-double-bg: hsl(0 85% 94%);
    --eps-double-br: hsl(0 70% 70%);
    --eps-double-tx: hsl(0 55% 28%);

    --eps-triple-bg: hsl(340 75% 94%);
    --eps-triple-br: hsl(340 65% 70%);
    --eps-triple-tx: hsl(340 55% 28%);

    /* Subtle cell surfaces in light mode */
    --eps-cell-surface: color-mix(in srgb, var(--bg-elev) 90%, #0f172a);
    --eps-cell-hover:   rgba(0,0,0,0.04);
    /* Light-mode gridline color for clearer vertical separators */
    --eps-gridline-color-light: rgba(0,0,0,0.18);
    /* Stronger ring opacity for light mode */
    --eps-ring-opacity: 85%;
}

/* Force high-contrast score text in light mode (overrides any dark-mode media query leaks) */
:root[data-theme="light"] .eps-score-display,
html.theme-light .eps-score-display {
    color: #111827 !important; /* Slate 900 */
    font-weight: 600;
}

/* Base cells in light mode */
:root[data-theme="light"] .eps-sc-cell,
html.theme-light .eps-sc-cell,
:root[data-theme="light"] .eps-sc-head-player,
html.theme-light .eps-sc-head-player {
    background: var(--eps-cell-surface);
    color: #111827 !important;
}

:root[data-theme="light"] .eps-sc-cell:hover:not(:has(.eps-score--eagle, .eps-score--birdie, .eps-score--bogey, .eps-score--double, .eps-score--triple, .eps-score--par)),
html.theme-light .eps-sc-cell:hover:not(:has(.eps-score--eagle, .eps-score--birdie, .eps-score--bogey, .eps-score--double, .eps-score--triple, .eps-score--par)) {
    background: var(--eps-cell-hover);
}

/* Outcome tints (disabled for rings-only look in light mode)
   We intentionally do NOT apply rectangular backgrounds to outcome
   cells in light mode so the geometric rings remain clear. Borders
   are preserved so vertical gridlines remain visible. */
:root[data-theme="light"] .eps-score--eagle,
html.theme-light .eps-score--eagle,
:root[data-theme="light"] .eps-score--birdie,
html.theme-light .eps-score--birdie,
:root[data-theme="light"] .eps-score--par,
html.theme-light .eps-score--par,
:root[data-theme="light"] .eps-score--bogey,
html.theme-light .eps-score--bogey,
:root[data-theme="light"] .eps-score--double,
html.theme-light .eps-score--double,
:root[data-theme="light"] .eps-score--triple,
html.theme-light .eps-score--triple {
    background: inherit !important;
}

/* Par/HCP rows — lighter in light mode */
:root[data-theme="light"] .par-row,
html.theme-light .par-row {
    background: color-mix(in srgb, var(--color-par) 16%, #ffffff) !important;
    color: #1f2937 !important;
}
:root[data-theme="light"] .hcp-row,
html.theme-light .hcp-row {
    background: color-mix(in srgb, var(--color-hcp) 14%, #ffffff) !important;
    color: #1f2937 !important;
}
:root[data-theme="light"] .par-row .eps-sc-cell,
:root[data-theme="light"] .hcp-row .eps-sc-cell,
html.theme-light .par-row .eps-sc-cell,
html.theme-light .hcp-row .eps-sc-cell {
    background: inherit !important;
    color: inherit !important;
}

/* Summary columns — subtle brand tints */
:root[data-theme="light"] .eps-sc-out  { background: color-mix(in srgb, var(--color-accent) 10%, #fff) !important; color: #0f172a !important; }
:root[data-theme="light"] .eps-sc-in   { background: color-mix(in srgb, var(--color-accent) 8%,  #fff) !important; color: #0f172a !important; }
:root[data-theme="light"] .eps-sc-total{ background: color-mix(in srgb, var(--color-accent) 14%, #fff) !important; color: #0f172a !important; }
:root[data-theme="light"] .eps-sc-net  { background: color-mix(in srgb, var(--color-accent) 6%,  #fff) !important; color: #0f172a !important; }

/* Sticky player column — subtle separation */
:root[data-theme="light"] .eps-sc-player,
html.theme-light .eps-sc-player,
:root[data-theme="light"] .eps-sc-head-player,
html.theme-light .eps-sc-head-player {
    background: #fff !important;
    box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.08);
}

/* Strengthen gridline contrast in light mode only - SCOPED TO TOURNAMENT RESULTS */
:root[data-theme="light"] .ept-tr-table .eps-sc-cell,
html.theme-light .ept-tr-table .eps-sc-cell {
    border-right-color: var(--eps-gridline-color-light) !important;
}
:root[data-theme="light"] .ept-tr-table .eps-sc-row,
html.theme-light .ept-tr-table .eps-sc-row {
    border-bottom-color: var(--eps-gridline-color-light) !important;
}
/* Ensure sticky player separator matches */
:root[data-theme="light"] .ept-tr-table .eps-sc-player,
html.theme-light .ept-tr-table .eps-sc-player {
    border-right-color: var(--eps-gridline-color-light) !important;
}

/* Focus and minor interactions */
.eps-scorecard-container :where(button, [role="button"], .eps-sc-hole):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-accent) 55%, #000);
    outline-offset: 2px;
    border-radius: 6px;
}
.eps-sc-hole[contenteditable="true"],
.eps-sc-hole.eps-editable {
    transition: transform .06s ease, background .12s ease;
}
.eps-sc-hole.eps-editable:hover { transform: translateY(-1px); }

/* Tabs refined for light mode */
:root[data-theme="light"] .eps-tabs .tab,
html.theme-light .eps-tabs .tab {
    background: #fff !important;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
:root[data-theme="light"] .eps-tabs .tab.active,
html.theme-light .eps-tabs .tab.active {
    background: color-mix(in srgb, var(--color-accent) 12%, #fff) !important;
    color: #0f172a !important;
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Tabs refined for dark mode (support multiple site/builder toggles) */
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    :root[data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-tabs .tab {
    background: var(--color-surface, #0f172a) !important;
    color: var(--color-text, #e5e7eb) !important;
    border: 1px solid rgba(148,163,184,0.35) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    :root[data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-tabs .tab.active {
    background: var(--color-accent, #3b82f6) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--color-accent, #3b82f6) 55%, rgba(148,163,184,0.35));
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

/* Scrollbar cosmetics on light */
:root[data-theme="light"] .eps-scorecard-container::-webkit-scrollbar { height: 10px; }
:root[data-theme="light"] .eps-scorecard-container::-webkit-scrollbar-track { background: #f1f5f9; }
:root[data-theme="light"] .eps-scorecard-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
:root[data-theme="light"] .eps-scorecard-container:hover::-webkit-scrollbar-thumb { background: #94a3b8; }

/* Numeric alignment */
.eps-sc-cell { font-variant-numeric: tabular-nums; }

/* ===================================================================
   OUTCOME SHAPES — CONSISTENT ACROSS LIGHT / DARK / AUTO
   Requirement:
   - Eagle  = double border circle
   - Birdie = single border circle
   - Par    = no decoration
   - Bogey  = single border square
   - Double = double border square
   - Triple = triple border square
   Implementation uses box-shadow rings so layout doesn't shift.
   =================================================================== */

/* Ring system tokens (shared) */
:root,
:root[data-theme="light"],
html.theme-light,
:root[data-theme="dark"],
html.theme-dark {
    /* Ring thickness and gaps (refined for symmetry and clarity) */
    --eps-ring1: 1.5px;      /* thicker default */
    --eps-ring-gap: 3px;
    --eps-ring-opacity: 100%; /* force high visibility by default */

    /* Default ring colors — match modal chip fills exactly */
    /* Eagle (royal purple), Birdie/Par (site green), Bogey (orange), Double (cool red), Triple (brown) */
    --eps-ring-eagle:  #6B3DFF;
    --eps-ring-birdie: var(--eps-site-green, #4D969B);
    --eps-ring-bogey:  #d77f2f;
    --eps-ring-double: #C0363A;
    --eps-ring-triple: #7A4A2B;
}

/* Light theme ring colors tuned for contrast against light tints */
:root[data-theme="light"],
html.theme-light {
    /* Use same hues as modal for consistency in light mode */
    --eps-ring-eagle:  #6B3DFF;
    --eps-ring-birdie: var(--eps-site-green, #4D969B);
    --eps-ring-bogey:  #d77f2f;
    --eps-ring-double: #C0363A;
    --eps-ring-triple: #7A4A2B;
    /* Gap color matches the light cell surface so lines stay distinct */
    --eps-gap-color:  var(--eps-cell-surface);
    
    /* Ensure opacity and thickness for visibility in light mode */
    --eps-ring-opacity: 100%;
    --eps-ring1: 1.5px;
}

/* Dark theme ring colors tuned for darker surfaces */
:root[data-theme="dark"],
html.theme-dark {
    /* Use same hues as modal for consistency in dark mode */
    --eps-ring-eagle:  #6B3DFF;
    --eps-ring-birdie: var(--eps-site-green, #4D969B);
    --eps-ring-bogey:  #d77f2f;
    --eps-ring-double: #C0363A;
    --eps-ring-triple: #7A4A2B;
    /* Dark gap color matches elevated bg */
    --eps-gap-color:  var(--bg-elev, #0b1324);
}

/* Ensure outcome cells can render rings without affecting layout */
.eps-sc-cell { position: relative; }

/* Remove any previous visual effects on outcome wrappers (do not kill cell borders) */
.eps-score--eagle,
.eps-score--birdie,
.eps-score--par,
.eps-score--bogey,
.eps-score--double,
.eps-score--triple {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/*
  Ensure outcome cells do NOT carry rectangular background tints.
  We want a "rings-only" look so shapes do not appear as boxes.
  This overrides earlier light-mode background tints and any theme fills.
*/
.eps-score--eagle,
.eps-score--birdie,
.eps-score--bogey,
.eps-score--double,
.eps-score--triple,
.eps-score--par {
    background: inherit !important;  /* use the base cell surface */
    color: inherit !important;       /* keep standard text color */
}

/* Parent cell neutralizer: if a score outcome wrapper exists inside the cell,
   keep the cell background unchanged even on hover/focus to avoid a "rect"
   behind the number in dark mode and on light-mode hover. Uses :has(),
   supported by modern evergreen browsers. */
.eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple):not(.stroke-hole):not(.stroke-double):not(.stroke-triple):not(.stroke-add):not(.eps-start-hole),
.eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple):not(.stroke-hole):not(.stroke-double):not(.stroke-triple):not(.stroke-add):not(.eps-start-hole):is(:hover, :focus, :active) {
    background: inherit !important;
}

/* Markup-based fallback (no :has() required). We add `.has-outcome` to any cell that wraps
   an outcome so hover/focus can never introduce a rectangular fill behind the number. */
.eps-sc-cell.has-outcome:not(.stroke-hole):not(.stroke-double):not(.stroke-triple):not(.stroke-add):not(.eps-start-hole),
.eps-sc-cell.has-outcome:not(.stroke-hole):not(.stroke-double):not(.stroke-triple):not(.stroke-add):not(.eps-start-hole):is(:hover, :focus, :active) {
    background: inherit !important;
}
.eps-sc-cell.has-outcome .eps-score-display-wrapper,
.eps-sc-cell.has-outcome .eps-score-display,
.eps-sc-cell.has-outcome:is(:hover, :focus, :active) .eps-score-display-wrapper,
.eps-sc-cell.has-outcome:is(:hover, :focus, :active) .eps-score-display {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Inner wrappers must never introduce a fill behind the number */
.eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple) .eps-score-display-wrapper,
.eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple) .eps-score-display,
.eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple):is(:hover, :focus, :active) .eps-score-display-wrapper,
.eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple):is(:hover, :focus, :active) .eps-score-display {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Extra-hard neutralization to beat any legacy selectors —
   do not remove borders so gridlines stay visible */
.eps-scorecard .eps-sc-cell.eps-score--eagle,
.eps-scorecard .eps-sc-cell.eps-score--birdie,
.eps-scorecard .eps-sc-cell.eps-score--par,
.eps-scorecard .eps-sc-cell.eps-score--bogey,
.eps-scorecard .eps-sc-cell.eps-score--double,
.eps-scorecard .eps-sc-cell.eps-score--triple {
    background: inherit !important;
    box-shadow: none !important;
}

/* Dark-mode safety: ensure outcome cells never get a fill in dark */
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-scorecard .eps-sc-cell.eps-score--eagle,
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-scorecard .eps-sc-cell.eps-score--birdie,
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-scorecard .eps-sc-cell.eps-score--par,
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-scorecard .eps-sc-cell.eps-score--bogey,
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-scorecard .eps-sc-cell.eps-score--double,
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-scorecard .eps-sc-cell.eps-score--triple {
    background: inherit !important;
    background-color: transparent !important;
}

/* Dark-mode safety for inner wrappers too */
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple) .eps-score-display-wrapper,
:is(html.theme-dark,
    body.theme-dark,
    html.dark,
    body.dark,
    html.dark-mode,
    body.dark-mode,
    html.is-dark-theme,
    body.is-dark-theme,
    [data-theme="dark"],
    html[data-bs-theme="dark"],
    :root[data-bs-theme="dark"]) .eps-sc-cell:has(.eps-score--eagle, .eps-score--birdie, .eps-score--par, .eps-score--bogey, .eps-score--double, .eps-score--triple) .eps-score-display {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/*
   Outcome rings are drawn with a centered pseudo-element so that
   circles are true circles and squares are perfectly square,
   independent of the rectangular cell shape.
*/

/* Base pseudo-element (opt-in per outcome) */
.eps-score--eagle::after,
.eps-score--birdie::after,
.eps-score--bogey::after,
.eps-score--double::after,
.eps-score--triple::after {
    content: "";
    position: absolute;
    /* Explicit centering and sizing for true symmetry */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    margin: 0;
    pointer-events: none;
    z-index: 0; /* keep below text content */
    background-repeat: no-repeat;
}

/* Ensure no borders/shadows on the ring pseudo-elements themselves to prevent conflicts */
.eps-score--eagle::after,
.eps-score--birdie::after,
.eps-score--par::after,
.eps-score--bogey::after,
.eps-score--double::after,
.eps-score--triple::after {
    border: none;
    box-shadow: none;
    outline: none;
}

/* Circles for eagle/birdie */
/* Helper computed spreads for multi-line rings */
:root,
:root[data-theme="light"],
html.theme-light,
:root[data-theme="dark"],
html.theme-dark {
    /* cumulative spreads for layered inset shadows */
    --eps-spread-1: var(--eps-ring1); /* inner line */
    --eps-spread-g1: calc(var(--eps-ring1) + var(--eps-ring-gap)); /* after inner gap */
    --eps-spread-2: calc(2 * var(--eps-ring1) + var(--eps-ring-gap)); /* second line */
    --eps-spread-g2: calc(2 * var(--eps-ring1) + 2 * var(--eps-ring-gap)); /* after second gap */
    --eps-spread-3: calc(3 * var(--eps-ring1) + 2 * var(--eps-ring-gap)); /* third line */
    /* Offsets from the outer edge used by gradient-based renderer */
    --eps-off-1: 0px; /* outer ring sits on the edge */
    --eps-off-2: calc(var(--eps-ring1) + var(--eps-ring-gap));
    --eps-off-3: calc(2 * var(--eps-ring1) + 2 * var(--eps-ring-gap));
}

.eps-score--birdie::after {
    border-radius: 999px;
    /* Single circular ring via radial-gradient (no rectangular fill) */
    background:
      radial-gradient(closest-side,
        transparent calc(100% - var(--eps-ring1)),
        color-mix(in srgb, var(--eps-ring-birdie) var(--eps-ring-opacity, 62%), transparent) calc(100% - var(--eps-ring1)) 100%);
}
.eps-score--eagle::after {
    border-radius: 999px;
    /* Double circular rings with explicit gap */
    background:
      /* outer ring */
      radial-gradient(closest-side,
        transparent calc(100% - var(--eps-ring1)),
        color-mix(in srgb, var(--eps-ring-eagle) var(--eps-ring-opacity, 62%), transparent) calc(100% - var(--eps-ring1)) 100%),
      /* inner ring, offset inward by ring+gap */
      radial-gradient(closest-side,
        transparent calc(100% - (var(--eps-off-2) + var(--eps-ring1))),
        color-mix(in srgb, var(--eps-ring-eagle) var(--eps-ring-opacity, 62%), transparent) calc(100% - (var(--eps-off-2) + var(--eps-ring1))) calc(100% - var(--eps-off-2)),
        transparent 0);
}

/* Squares for bogey/double/triple — explicit square geometry */
.eps-score--bogey::after {
    border-radius: 0;
    /* Single square ring using 4 linear-gradients (top/right/bottom/left) */
    background:
      /* top */   linear-gradient(color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent),
                                  color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) top var(--eps-off-1) / calc(100% - 2*var(--eps-off-1)) var(--eps-ring1) no-repeat,
      /* bottom */linear-gradient(color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent),
                                  color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) bottom var(--eps-off-1) / calc(100% - 2*var(--eps-off-1)) var(--eps-ring1) no-repeat,
      /* left */  linear-gradient(color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent),
                                  color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) top var(--eps-off-1) / var(--eps-ring1) calc(100% - 2*var(--eps-off-1)) no-repeat,
      /* right */ linear-gradient(color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent),
                                  color-mix(in srgb, var(--eps-ring-bogey) var(--eps-ring-opacity, 62%), transparent)) right var(--eps-off-1) top var(--eps-off-1) / var(--eps-ring1) calc(100% - 2*var(--eps-off-1)) no-repeat;
}
.eps-score--double::after {
    border-radius: 0;
    /* Double square rings: outer (off-1=0), inner (off-2) */
    background:
      /* OUTER */
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) top var(--eps-off-1) / calc(100% - 2*var(--eps-off-1)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) bottom var(--eps-off-1) / calc(100% - 2*var(--eps-off-1)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) top var(--eps-off-1) / var(--eps-ring1) calc(100% - 2*var(--eps-off-1)) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) right var(--eps-off-1) top var(--eps-off-1) / var(--eps-ring1) calc(100% - 2*var(--eps-off-1)) no-repeat,
      /* INNER */
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-2) top var(--eps-off-2) / calc(100% - 2*var(--eps-off-2)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-2) bottom var(--eps-off-2) / calc(100% - 2*var(--eps-off-2)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-2) top var(--eps-off-2) / var(--eps-ring1) calc(100% - 2*var(--eps-off-2)) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-double) var(--eps-ring-opacity, 62%), transparent)) right var(--eps-off-2) top var(--eps-off-2) / var(--eps-ring1) calc(100% - 2*var(--eps-off-2)) no-repeat;
}
.eps-score--triple::after {
    border-radius: 0;
    /* Triple square rings: outer (off-1), middle (off-2), inner (off-3) */
    background:
      /* OUTER */
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) top var(--eps-off-1) / calc(100% - 2*var(--eps-off-1)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) bottom var(--eps-off-1) / calc(100% - 2*var(--eps-off-1)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-1) top var(--eps-off-1) / var(--eps-ring1) calc(100% - 2*var(--eps-off-1)) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) right var(--eps-off-1) top var(--eps-off-1) / var(--eps-ring1) calc(100% - 2*var(--eps-off-1)) no-repeat,
      /* MIDDLE */
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-2) top var(--eps-off-2) / calc(100% - 2*var(--eps-off-2)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-2) bottom var(--eps-off-2) / calc(100% - 2*var(--eps-off-2)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-2) top var(--eps-off-2) / var(--eps-ring1) calc(100% - 2*var(--eps-off-2)) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) right var(--eps-off-2) top var(--eps-off-2) / var(--eps-ring1) calc(100% - 2*var(--eps-off-2)) no-repeat,
      /* INNER */
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-3) top var(--eps-off-3) / calc(100% - 2*var(--eps-off-3)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-3) bottom var(--eps-off-3) / calc(100% - 2*var(--eps-off-3)) var(--eps-ring1) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) left var(--eps-off-3) top var(--eps-off-3) / var(--eps-ring1) calc(100% - 2*var(--eps-off-3)) no-repeat,
      linear-gradient(color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent),
                      color-mix(in srgb, var(--eps-ring-triple) var(--eps-ring-opacity, 62%), transparent)) right var(--eps-off-3) top var(--eps-off-3) / var(--eps-ring1) calc(100% - 2*var(--eps-off-3)) no-repeat;
}

/* Par: explicitly no decoration */
.eps-score--par::after { content: none; }

/* Hover/focus: keep shapes stable; optional emphasis removed to avoid any UA parsing issues. */

/* Increase breathing room around numbers */
:root,
:root[data-theme="light"],
html.theme-light,
:root[data-theme="dark"],
html.theme-dark {
    --eps-cell-pad: 10px 12px; /* breathing room around numbers */
    /* Marker sizing switches to inset-based for perfect symmetry */
    --eps-mark-inset: 6px;     /* equal margin from all sides (desktop/tablet) */
    /* Visual weight control for rings (0%..100%) - Increased default for better visibility */
    --eps-ring-opacity: 100%;
}

.eps-sc-hole { padding: var(--eps-cell-pad); }

/* Slightly tighter inset on very small cells */
@media (max-width: 480px) {
  :root,
  :root[data-theme="light"],
  html.theme-light,
  :root[data-theme="dark"],
  html.theme-dark {
    --eps-mark-inset: 5px;
  }
}

/* ===================================================================
   ADMIN / STEP 8 FIXES & CONTRAST OVERRIDES
   =================================================================== */

/* Ensure the wrapper creates a positioning context for the ring pseudo-elements */
/* SCOPED TO TOURNAMENT RESULTS ONLY to avoid breaking main scorecard */
.ept-tr-table .eps-score-display-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 2em; /* Ensure enough height for the ring */
    z-index: 1;
}

/* Ensure the TD in tournament results doesn't clip or offset strangely */
/* Specificity boost: table + class + element + class */
table.ept-tr-table th.col-hole,
table.ept-tr-table td.col-hole {
    position: relative;
    padding: 0 !important; /* Override theme/reset padding forcefully */
    width: 40px !important;           /* Force fixed width for symmetry */
    min-width: 40px !important;       /* Prevent squashing */
    max-width: 40px !important;       /* Prevent expansion */
    height: 40px !important;          /* Force vertical symmetry (square) */
    box-sizing: border-box !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;        /* Prevent vertical expansion */
}




/* Ensure text is above the ring - SCOPED */
.ept-tr-table .eps-score-display {
    position: relative;
    z-index: 2;
    font-weight: 700;
}

/* Explicit text colors for clarity in Tournament Results */
.ept-tr-table .eps-score-display {
    color: #111827;
    font-weight: 700;
}

/* FIX: Ensure score wrappers are visible and flex in light mode - SCOPED */
.ept-tr-table .eps-score-display-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 2em;
    position: relative;
    z-index: 1;
}

/* FIX: Force light mode text colors for names and helpers */
/* Using :where() to lower specificity or just plain classes to match */
:root[data-theme="light"] .ept-tr-table,
html.theme-light .ept-tr-table {
    --color-text: #111827;
    color: #111827;
}
:root[data-theme="light"] .ept-tr-table .left,
html.theme-light .ept-tr-table .left {
    color: #111827;
}

/* FIX: Ensure start hole border is visible */
.ept-tr-table .col-hole[style*="border-left"] {
    border-left-color: #111827 !important; /* Keep !important as it fights inline styles or framework overrides */
}

/* =========================================================
   START HOLE INDICATOR (Cross-plugin compatibility)
   Matches games.css and inline styles
========================================================= */
.eps-start-hole {
    border-left: 3px solid var(--eps-site-green, #27ae60) !important;
    background-color: color-mix(in srgb, var(--eps-site-green, #27ae60), transparent 90%) !important;
}
html.theme-dark .eps-start-hole {
    border-left: 3px solid var(--eps-site-green, #2ecc71) !important;
    background-color: color-mix(in srgb, var(--eps-site-green, #2ecc71), transparent 90%) !important;
}

/* ===================================================================
   TEAM RESULTS / TOURNAMENT RESULTS - CLEAN LAYOUT (No !important)
   =================================================================== */

/* Base Table Structure */
.ept-tr-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    /* Reset display properties to ensure table behavior */
    display: table;
}

.ept-tr-table thead {
    display: table-header-group;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-elev-alt, #f3f4f6);
}

.ept-tr-table tbody {
    display: table-row-group;
}

.ept-tr-table tr {
    display: table-row;
}

.ept-tr-table th,
.ept-tr-table td {
    display: table-cell;
    box-sizing: border-box;
    vertical-align: middle;
    border-right: 1px solid var(--color-border, #e5e7eb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

/* Specific Classes replacing inline styles */
.ept-tr-header-col {
    padding: 8px 12px;
    text-align: left;
    min-width: 140px;
    font-weight: 700;
    color: var(--color-text, #111827);
    background: var(--bg-elev-alt, #f3f4f6);
    position: sticky;
    left: 0;
    z-index: 60;
}

.ept-tr-cell {
    padding: 8px 3px;
    text-align: center;
    font-weight: 700;
    color: var(--color-text, #111827);
    background: var(--bg-elev-alt, #f3f4f6);
}

.ept-tr-cell.bg-sub {
    background: var(--color-border, #e5e7eb);
}

.ept-tr-cell.bg-total {
    background: #d1d5db; /* Keep explicitly darker for contrast */
}

.ept-tr-player-col {
    padding: 8px 12px;
    font-weight: 600;
    white-space: nowrap;
    color: #1e40af; /* Blue text for players */
    background: #f0f9ff; /* Light blue bg */
    position: sticky;
    left: 0;
    z-index: 40;
    border-right: 1px solid var(--color-border, #e5e7eb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.ept-tr-score-cell {
    padding: 8px 3px;
    text-align: center;
    background: var(--bg-elev-alt, #f9fafb);
    position: relative;
}

.ept-tr-subtotal {
    padding: 8px 3px;
    text-align: center;
    font-weight: 600;
    background: var(--bg-elev-alt, #f3f4f6);
}

.ept-tr-total {
    padding: 8px 3px;
    text-align: center;
    font-weight: 700;
    background: var(--color-border, #e5e7eb);
}

/* Dark Mode Overrides */
:root[data-theme="dark"] .ept-tr-header-col,
:root[data-theme="dark"] .ept-tr-cell {
    background: #374151; /* bg-elev-alt */
    color: #f9fafb;
}

/* ===================================================================
   MOBILE RESPONSIVENESS & TIGHT LAYOUT
   =================================================================== */

/* Ensure Tournament Results scroll horizontally on mobile */
.ept-tr-section-body,
.epcg-team-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Ensure tight grouping */
    margin-bottom: 1rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-elev, #fff);
}

/* Tighter padding on mobile for results tables */
@media (max-width: 768px) {
    .ept-tr-header-col,
    .ept-tr-player-col {
        padding: 6px 8px !important;
        font-size: 0.85rem !important;
        min-width: 100px !important; /* Slightly narrower sticky col */
    }

    .ept-tr-cell, 
    .ept-tr-score-cell,
    .ept-tr-subtotal,
    .ept-tr-total {
        padding: 6px 2px !important;
        font-size: 0.85rem !important;
    }
    
    /* Ensure sticky columns don't consume too much space */
    .ept-tr-header-col,
    .ept-tr-player-col {
        left: 0;
        position: sticky;
        z-index: 40;
    }
    
    /* Adjust header stacking */
    .ept-tr-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ept-tr-scores {
        width: 100%;
        justify-content: space-between;
    }
}

:root[data-theme="dark"] .ept-tr-cell.bg-sub {
    background: #4b5563;
}

:root[data-theme="dark"] .ept-tr-cell.bg-total {
    background: #6b7280;
}

:root[data-theme="dark"] .ept-tr-player-col {
    background: #1e3a8a; /* Darker blue */
    color: #93c5fd; /* Lighter blue text */
    border-right-color: #374151;
    border-bottom-color: #374151;
}

:root[data-theme="dark"] .ept-tr-score-cell {
    background: #1f2937; /* bg-elev */
}

:root[data-theme="dark"] .ept-tr-subtotal {
    background: #374151;
}

:root[data-theme="dark"] .ept-tr-total {
    background: #4b5563;
}

/* Scroll Container */
.ept-tr-detail {
    overflow-x: auto;
    max-height: 80vh;
    display: block;
    position: relative;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}