/* ==========================================================================
   Perfect Game - stats design tokens.

   Two palettes live here. --sg-* is the older stats scale used by the stats hub,
   the guide and the team blocks. --lb-* is the leaderboard scale, used by the
   leaderboard, by the advanced stats block on a player profile, by the team page
   blocks and by event top performers.

   They are not the same palette: only green, dark and the 4px radius carry the
   same value in both. Those three are declared once below and referenced by both
   sets, so they cannot drift. Everything else is genuinely different and stays
   that way.
   ========================================================================== */

:root {
    --pg-stats-green: #40A84C;
    --pg-stats-dark: #383838;
    --pg-stats-radius: 4px;
    /* Height of the site header a master page pins to the top. A stats toolbar that sticks has
       to clear it or it parks underneath. 76px is #pgmenu, which every master here uses except
       the softball one at 93px, so Top Performers measures its header and overwrites this. */
    --pg-stats-head-h: 76px;
}

/* Older stats scale. */
:root {
    --sg-green: var(--pg-stats-green);
    --sg-green-hover: #369140;
    --sg-green-soft: rgba(64, 168, 76, 0.15);
    --sg-green-soft-border: rgba(64, 168, 76, 0.30);
    --sg-dark: var(--pg-stats-dark);
    --sg-darker: #2a2a2a;
    --sg-light: #f5f5f5;
    --sg-lighter: #f9f9f9;
    --sg-text: #333;
    --sg-muted: #777;
    --sg-link: #2763a5;
    --sg-radius: 8px;
    --sg-radius-sm: var(--pg-stats-radius);
    --sg-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --sg-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.14);
}

/* Leaderboard scale. Declared for every surface that draws with it, so no
   stylesheet has to name a class it does not own. */
.lb,
.advstats-v2,
.tp,
.es,
.dl {
    --lb-green: var(--pg-stats-green);
    --lb-green-dk: #2d8a38;
    --lb-dark: var(--pg-stats-dark);
    --lb-mute: #525252;
    --lb-quiet: #767676;
    --lb-faint: #adb5bd;
    --lb-bg: #f8f9fa;
    --lb-panel: #f0f0f0;
    --lb-line: #dee2e6;
    --lb-line-soft: #e9ecef;
    --lb-input: #ced4da;
    --lb-r: var(--pg-stats-radius);
    --lb-head: 'BentonSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --lb-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Perfect Game - stats, shared.

   Anything drawn by more than one stats surface. The filter and segmented
   controls, the empty and error states, the subscription message, and the class
   standing bars that the leaderboard and a player profile both render.

   Tokens live in Stats.Tokens.css. Anything used by exactly one surface belongs
   in that surface's file, not here.
   ========================================================================== */

/* ==========================================================================
   Filter row layout (label + segmented control + info icon)
   ========================================================================== */

.sv2-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buttons and the info icon share a line. Stacked, the icon reads as a stray control. */
.sv2-source-control {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.sv2-filter-label {
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-muted);
    margin: 0;
}

/* ==========================================================================
   Segmented control (scorecard source picker: All / Verified / Unverified / My Stats)
   Renders inside an ASP.NET RadioButtonList with RepeatLayout="Flow".
   Resulting DOM is <input> + <label> siblings; both selectors below cover
   either ordering for cross-browser safety.

   Drawn in the same square, dark-when-selected language as the stats tabs, so a
   page that stacks tabs over this control reads as one set. The --lb-* tokens
   only exist inside .lb and .advstats-v2, so every one here carries the literal
   fallback the event stats pages need.
   ========================================================================== */

.sv2-segmented {
    display: inline-flex;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    line-height: 1;
}

.sv2-segmented input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.sv2-segmented label {
    margin: 0;
    cursor: pointer;
    font-family: var(--lb-body, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--lb-mute, #525252);
    background: #fff;
    padding: 9px 14px;
    min-height: 40px;
    border: 1px solid var(--lb-input, #ced4da);
    border-radius: 0;
    /* Neighbours share one hairline instead of drawing two. */
    margin-left: -1px;
    transition: background-color 0.18s ease, color 0.18s ease;
    user-select: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sv2-segmented label:first-of-type {
    margin-left: 0;
    border-radius: var(--pg-stats-radius) 0 0 var(--pg-stats-radius);
}

.sv2-segmented label:last-of-type {
    border-radius: 0 var(--pg-stats-radius) var(--pg-stats-radius) 0;
}

.sv2-segmented label:hover {
    background: var(--lb-bg, #f8f9fa);
    color: var(--sg-dark);
}

.sv2-segmented input[type="radio"]:checked + label,
.sv2-segmented label:has(input[type="radio"]:checked) {
    background: var(--sg-dark);
    border-color: var(--sg-dark);
    color: #fff;
    /* Lifts the shared hairline above the neighbour so the dark edge stays crisp. */
    position: relative;
    z-index: 1;
}

.sv2-segmented input[type="radio"]:checked + label:hover,
.sv2-segmented label:has(input[type="radio"]:checked):hover {
    background: var(--sg-dark);
    color: #fff;
}

.sv2-segmented input[type="radio"]:focus-visible + label,
.sv2-segmented label:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--sg-green);
    outline-offset: 2px;
}

.sv2-segmented label i {
    font-size: 11px;
}

@media (max-width: 575px) {
    .sv2-segmented {
        display: flex;
        width: 100%;
    }

    .sv2-segmented label {
        flex: 1 1 0;
        padding: 9px 8px;
        font-size: 12px;
    }

    /* On a phone the buttons take the full width and the icon holds the right edge. */
    .sv2-source-control {
        width: 100%;
    }

    .sv2-source-control > .sv2-segmented {
        flex: 1 1 auto;
    }

    .sv2-filter-row > .sv2-info-icon {
        order: 1;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .sv2-filter-row > .sv2-segmented {
        order: 2;
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Info icon (paired with Bootstrap popover)
   ========================================================================== */

.sv2-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    color: var(--sg-muted);
    font-size: 14px;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.sv2-info-icon:hover,
.sv2-info-icon:focus {
    color: var(--sg-green);
    background: var(--sg-green-soft);
    outline: none;
}

.sv2-info-icon:focus-visible {
    outline: 2px solid var(--sg-green);
    outline-offset: 1px;
}

/* Popover overrides — applied via data-bs-custom-class="sv2-popover" */
.popover.sv2-popover {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--sg-radius);
    box-shadow: var(--sg-shadow-hover);
    max-width: 320px;
    font-family: 'Source Sans 3', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

.popover.sv2-popover .popover-header {
    background: var(--sg-dark);
    color: #fff;
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: none;
    padding: 10px 14px;
    border-top-left-radius: calc(var(--sg-radius) - 1px);
    border-top-right-radius: calc(var(--sg-radius) - 1px);
}

.popover.sv2-popover .popover-header::before {
    border-bottom-color: var(--sg-dark) !important;
}

.popover.sv2-popover .popover-body {
    padding: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sg-text);
}

.popover.sv2-popover .popover-body p {
    margin: 0 0 8px;
}

.popover.sv2-popover .popover-body p:last-child {
    margin-bottom: 0;
}

.popover.sv2-popover .popover-body strong {
    color: var(--sg-dark);
    font-weight: 600;
}

.sv2-popover-link {
    display: inline-block;
    margin-top: 4px;
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sg-green);
    text-decoration: none;
}

.sv2-popover-link:hover,
.sv2-popover-link:focus {
    color: var(--sg-green-hover);
    text-decoration: none;
}

.sv2-popover-link i {
    margin-left: 4px;
    font-size: 10px;
}

/* ==========================================================================
   Skeleton loader — pulse-animated placeholder bars
   Use inside .sv2-skel-row / .sv2-skel-card / etc. while data is loading.
   ========================================================================== */

.sv2-skeleton {
    background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: sv2-skel-pulse 1.4s ease-in-out infinite;
    border-radius: var(--sg-radius-sm);
    color: transparent;
    user-select: none;
}

@keyframes sv2-skel-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.sv2-skel-line { height: 14px; margin: 8px 0; }
.sv2-skel-line.sv2-skel-sm { height: 10px; width: 60%; }
.sv2-skel-line.sv2-skel-md { width: 80%; }
.sv2-skel-line.sv2-skel-lg { width: 100%; }

.sv2-skel-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.sv2-skel-row .sv2-skeleton {
    flex: 1;
    height: 16px;
}

.sv2-skel-grid {
    padding: 12px 0;
}

@media (prefers-reduced-motion: reduce) {
    .sv2-skeleton {
        animation: none;
        background: #ececec;
    }
}

/* ==========================================================================
   Empty state — no data to display
   ========================================================================== */

.sv2-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--sg-muted);
}

.sv2-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sg-light);
    color: var(--sg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
}

.sv2-empty h4 {
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sg-dark);
    margin: 0 0 8px;
}

.sv2-empty p {
    font-size: 14px;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 16px;
}

.sv2-empty-cta {
    display: inline-block;
    background: var(--sg-green);
    color: #fff;
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 24px;
    border-radius: var(--sg-radius-sm);
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.sv2-empty-cta:hover,
.sv2-empty-cta:focus {
    background: var(--sg-green-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

/* ==========================================================================
   Error state — something failed; offer retry
   ========================================================================== */

.sv2-error {
    text-align: center;
    padding: 40px 24px;
    color: var(--sg-text);
    background: #fdf6f6;
    border: 1px solid #f3d7d7;
    border-radius: var(--sg-radius);
}

.sv2-error-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(192, 57, 43, 0.10);
    color: #c0392b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.sv2-error h4 {
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sg-dark);
    margin: 0 0 6px;
}

.sv2-error p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--sg-muted);
    margin: 0;
}

.sv2-error-retry {
    display: inline-block;
    margin-top: 14px;
    background: transparent;
    border: 1.5px solid var(--sg-dark);
    color: var(--sg-dark);
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: var(--sg-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sv2-error-retry:hover,
.sv2-error-retry:focus {
    background: var(--sg-dark);
    color: #fff;
}

/* ==========================================================================
   Toggle pill group — for ASP.NET LinkButton-based toggles where converting
   to RadioButtonList would be too invasive (e.g. event pages' Individual/Team
   and Batting/Pitching toggles). Visually mirrors .sv2-segmented; consumer
   adds .active to whichever button is selected.
   ========================================================================== */

.sv2-toggle-group {
    display: inline-flex;
    background: var(--sg-light);
    border-radius: 999px;
    padding: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    line-height: 1;
}

.sv2-toggle-group .sv2-toggle-btn,
.sv2-toggle-group a.sv2-toggle-btn {
    margin: 0;
    cursor: pointer;
    font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sg-muted);
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: transparent;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.sv2-toggle-group .sv2-toggle-btn:hover,
.sv2-toggle-group a.sv2-toggle-btn:hover {
    color: var(--sg-text);
    text-decoration: none;
}

.sv2-toggle-group .sv2-toggle-btn.active,
.sv2-toggle-group a.sv2-toggle-btn.active {
    background: var(--sg-green);
    color: #fff;
    box-shadow: 0 1px 4px rgba(64, 168, 76, 0.35);
}

.sv2-toggle-group .sv2-toggle-btn.active:hover,
.sv2-toggle-group a.sv2-toggle-btn.active:hover {
    color: #fff;
}

@media (max-width: 575px) {
    .sv2-toggle-group {
        width: 100%;
        flex-wrap: wrap;
    }
    .sv2-toggle-group .sv2-toggle-btn,
    .sv2-toggle-group a.sv2-toggle-btn {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        padding: 9px 8px;
        font-size: 12px;
        border-radius: var(--sg-radius-sm);
    }
}

/* ==========================================================================
   Telerik RadGrid skin override — opt-in via CssClass="sv2-radgrid" on the
   <telerik:RadGrid>. Restyles the Bootstrap skin to match the dark-header /
   striped-row look used on Repeater + .stat-table pages.
   Per `feedback_radgrid_skin`: don't migrate to Repeater; restyle in place.
   ========================================================================== */

.sv2-radgrid .rgMasterTable {
    border-collapse: collapse;
    font-family: 'Source Sans 3', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    background-color: #fff;
}

.sv2-radgrid .rgMasterTable .rgHeader,
.sv2-radgrid .rgMasterTable th.rgHeader,
.sv2-radgrid .rgHeaderDiv .rgHeader {
    background-color: var(--sg-dark) !important;
    background-image: none !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    border: none !important;
    padding: 8px 10px;
    white-space: nowrap;
    text-align: center;
}

.sv2-radgrid .rgMasterTable .rgHeader a,
.sv2-radgrid .rgMasterTable th.rgHeader a {
    color: #fff !important;
    text-decoration: none;
}

.sv2-radgrid .rgMasterTable td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
    line-height: 1.2;
}

.sv2-radgrid .rgMasterTable tbody tr.rgRow,
.sv2-radgrid .rgMasterTable tbody tr.rgRow td {
    background-color: #fff;
}

.sv2-radgrid .rgMasterTable tbody tr.rgAltRow,
.sv2-radgrid .rgMasterTable tbody tr.rgAltRow td {
    background-color: #fafafa;
}

.sv2-radgrid .rgMasterTable tbody tr.rgRow:hover td,
.sv2-radgrid .rgMasterTable tbody tr.rgAltRow:hover td {
    background-color: #f0f7f0;
}

/* First-column accent (Player or Team name) */
.sv2-radgrid .rgMasterTable tbody tr.rgRow > td:first-child,
.sv2-radgrid .rgMasterTable tbody tr.rgAltRow > td:first-child {
    text-align: left;
    font-weight: 600;
    border-left: 3px solid var(--sg-green);
}

/* Player / team links inside the first column */
.sv2-radgrid .rgMasterTable a {
    color: var(--sg-link);
    text-decoration: none;
}
.sv2-radgrid .rgMasterTable a:hover {
    color: var(--sg-green-hover);
    text-decoration: underline;
}

/* Pager + footer cleanup */
.sv2-radgrid .rgPager,
.sv2-radgrid .rgPagerCell {
    background-color: #f5f5f5 !important;
    border-top: 1px solid #e0e0e0;
}

/* Sort arrow tints (Telerik renders these as small images by default; let
   them pick up green when the column is sorted). */
.sv2-radgrid .rgMasterTable .rgSortAsc,
.sv2-radgrid .rgMasterTable .rgSortDesc {
    color: #fff;
}

/* Active-stat highlight — applied by code-behind via `col.HeaderStyle.CssClass`
   and `col.ItemStyle.CssClass = "sv2-stat-active"` (see ApplyColumnHighlight in
   DailyGameLeaders.aspx.cs). Highlights the entire column when a stat is selected. */
.sv2-radgrid .rgMasterTable th.sv2-stat-active {
    background-color: var(--sg-green) !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.35);
}

.sv2-radgrid .rgMasterTable td.sv2-stat-active {
    background-color: rgba(64, 168, 76, 0.10) !important;
    color: var(--sg-dark);
    font-weight: 700;
}

/* Make the active highlight visible over both .rgRow and .rgAltRow stripes */
.sv2-radgrid .rgMasterTable tr.rgRow td.sv2-stat-active,
.sv2-radgrid .rgMasterTable tr.rgAltRow td.sv2-stat-active {
    background-color: rgba(64, 168, 76, 0.10) !important;
}

.sv2-radgrid .rgMasterTable tr.rgRow:hover td.sv2-stat-active,
.sv2-radgrid .rgMasterTable tr.rgAltRow:hover td.sv2-stat-active {
    background-color: rgba(64, 168, 76, 0.18) !important;
}

/* --------------------------------------------------------------------------
   Class standing. Rendered by the leaderboard when a row is expanded and by a
   player profile when a year is opened.
   -------------------------------------------------------------------------- */

.lb-expand-title {
    font-family: var(--lb-head);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lb-mute);
    margin-bottom: 12px;
}

.lb-pct-col {
    flex: 1 1 380px;
    min-width: 300px;
}

.lb-pct-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lb-pct {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lb-pct-key {
    font-family: var(--lb-head);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lb-mute);
    width: 62px;
}

.lb-pct-raw {
    font-size: 13px;
    font-weight: 700;
    color: var(--lb-dark);
    width: 52px;
    font-variant-numeric: tabular-nums;
}

.lb-pct-track {
    flex: 1;
    height: 9px;
    border-radius: 5px;
    background: var(--lb-line-soft);
    position: relative;
    overflow: hidden;
}

.lb-pct-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background: #c6cec8;
}

.lb-pct-fill.is-high {
        background: var(--lb-green);
    }

.lb-pct-fill.is-mid {
        background: #8ec894;
    }

.lb-pct-fill.is-none {
        background: var(--lb-line-soft);
    }

.lb-pct-val {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lb-dark);
    width: 160px;
    text-align: right;
}

.lb-pct-rank {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--lb-quiet);
    margin-top: 1px;
}

.lb-facts-col {
    flex: 0 1 300px;
}

.lb-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lb-fact {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lb-mute);
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: 20px;
    padding: 7px 12px;
}

.lb-pct.is-bare .lb-pct-raw {
    margin-left: auto;
}

.lb-pct-note {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--lb-mute);
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Subscription message

   Lifted out of the inline block on Stats/Default.aspx, where these rules were
   defined and nowhere else. Both pages read them from here now.
   -------------------------------------------------------------------------- */

.advstats-v2 .subscription-message {
    background-color: #383838;
    color: #fff;
    padding: 30px;
    border-left: 5px solid var(--sg-green);
    text-align: center;
    margin: 20px 0;
}

.advstats-v2 .subscription-message h4 {
        margin: 0 0 15px 0;
        font-size: 18px;
        font-weight: 700;
    }

.advstats-v2 .subscription-message a {
        color: var(--sg-green);
        text-decoration: none;
        font-weight: 700;
    }

.advstats-v2 .subscription-message a:hover {
            text-decoration: underline;
            color: #5fc16e;
        }

.advstats-v2 .subscription-message p {
        margin: 0;
        font-size: 14px;
        opacity: 0.9;
    }