/* ===========================================================
   STATISTICS HERO
   Same dual-layer gradient+image pattern as tournament-hero /
   pts-hero. Crown icon + heading + tagline are HTML overlays;
   the "More than a Game / It's a Legacy" script text is baked
   into the banner artwork itself (statistics-hero.png).
===========================================================*/

.stats-hero{
    position:relative;
    min-height:300px;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(6,10,20,.96) 0%,
        rgba(6,10,20,.88) 32%,
        rgba(6,10,20,.45) 58%,
        rgba(6,10,20,.15) 80%,
        transparent 100%
    ),
    url("../images/hero/statistics\ banner.webp");

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 35%;
}

.stats-hero>.container{
    position:relative;
    z-index:5;
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:var(--space-6) 40px;
}

.stats-crown-icon{
    width:44px;
    height:44px;
    margin-bottom:var(--space-3);
    color:var(--color-gold);
}

.stats-hero-copy h1{
    font-size:2.75rem;
    font-weight:800;
    letter-spacing:-1px;
    line-height:1.05;
    margin-bottom:6px;
}

.stats-hero-copy .subtitle{
    color:var(--color-gold);
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:0.02em;
    margin-bottom:var(--space-3);
}

.stats-hero-copy .tagline{
    font-size:1rem;
    color:#D3D8E2;
    max-width:520px;
}

/* ===========================================================
   TABS ROW — .match-tabs/.match-tab pattern (duplicated per
   site convention) + a Season selector pinned to the right
===========================================================*/

.stats-tabs-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;
    margin-top:var(--space-6);
}

.match-tabs{
    display:flex;
    align-items:center;
    gap:var(--space-2);

    border-bottom:1px solid var(--color-border);
    overflow-x:auto;
    flex:1 1 auto;
}

.match-tab{
    display:flex;
    align-items:center;
    gap:6px;

    padding:var(--space-3) var(--space-4);

    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    color:var(--color-text-muted);
    white-space:nowrap;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.02em;
}

.match-tab:hover{
    color:var(--color-text);
}

.match-tab.active{
    color:var(--color-gold);
    border-bottom-color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

.tab-panel{
    display:none;
}

.tab-panel.active{
    display:block;
}

.tab-placeholder{
    text-align:center;
    color:var(--color-text-muted);
    padding:var(--space-7) var(--space-5);
}

.stats-season-select{
    width:auto;
    flex-shrink:0;
    padding:10px var(--space-4);
    margin-bottom:var(--space-3);
}

/* ===========================================================
   SUMMARY STAT CARDS (Total Runs / Wickets / Matches / Teams /
   Fours / Sixes)
===========================================================*/

.stats-summary-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:var(--space-4);
    margin-top:var(--space-5);
}

.stats-summary-card{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    padding:var(--space-4);
    border-radius:var(--radius-lg);
    border:1px solid var(--color-border);
}

.stats-summary-icon{
    width:38px;
    height:38px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
}

.stats-summary-card .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin-bottom:2px;
}

.stats-summary-card .value{
    font-size:1.5rem;
    font-weight:800;
    font-family:var(--font-mono);
    line-height:1.1;
}

.stats-summary-card .sub{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    margin-top:2px;
}

/* ===========================================================
   MAIN CONTENT ROW — Filters sidebar + 3 leaderboard cards
===========================================================*/

.stats-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:var(--space-5);
    align-items:start;
    margin-top:var(--space-5);
}

/* Mobile filter toggle — hidden on desktop, matches the
   .fixtures-filter-toggle pattern used on the Fixtures page. */
.stats-filter-toggle{
    display:none;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);
    color:var(--color-text);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
    cursor:pointer;
    margin-top:var(--space-5);
}

.stats-filter-toggle span{
    display:flex;
    align-items:center;
    gap:8px;
}

.stats-filter-toggle-caret{
    transition:transform 0.2s ease;
}

.stats-filter-toggle[aria-expanded="true"] .stats-filter-toggle-caret{
    transform:rotate(180deg);
}

.stats-sidebar,
.stats-leaderboards-grid{
    min-width:0;
}

.stats-leaderboards-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-5);
}

/* --- Filters card --- */

.stats-filter-group{
    margin-bottom:var(--space-4);
}

.stats-filter-group label{
    display:block;
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    margin-bottom:6px;
}

.stats-filter-actions{
    display:flex;
    gap:var(--space-2);
    margin-top:var(--space-4);
}

.stats-filter-actions .btn{
    flex:1;
    justify-content:center;
}

/* --- Leaderboard cards --- */

.leaderboard-row{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-2) 0;
    border-bottom:1px solid var(--color-border);
}

.leaderboard-row-extra{
    display:none;
}

.leaderboard-row-extra.show{
    display:flex;
}

.leaderboard-row:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.leaderboard-rank{
    width:20px;
    flex-shrink:0;
    text-align:center;
    font-size:var(--fs-small);
    color:var(--color-text-faint);
    font-weight:700;
}

.leaderboard-row .avatar{
    flex-shrink:0;
    width:36px;
    height:36px;
    font-size:var(--fs-small);
}

.leaderboard-info{
    flex:1;
    min-width:0;
}

.leaderboard-info .name{
    font-weight:600;
    font-size:var(--fs-small);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.leaderboard-info .team{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    display:flex;
    align-items:center;
    gap:5px;
}

.leaderboard-info .team .crest-badge{
    margin:0;
    width:16px;
    height:16px;
    font-size:7px;
    border-radius:4px;
}

.leaderboard-value{
    flex-shrink:0;
    font-weight:700;
    font-family:var(--font-mono);
    font-size:var(--fs-body);
}

/* ===========================================================
   CHARTS ROW — Team Performance / Runs Distribution / Match
   Result Types — full-width, independent of the sidebar above
===========================================================*/

.stats-charts-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-5);
    margin-top:var(--space-5);
}

.chart-card{
    min-width:0;
}

.chart-legend-select{
    width:auto;
    padding:6px var(--space-3);
    font-size:var(--fs-small);
}

/* --- Bar chart (Team Performance Comparison) --- */

.bar-chart-legend{
    display:flex;
    gap:var(--space-4);
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    margin:var(--space-3) 0 var(--space-4);
}

.bar-chart-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.bar-chart-legend .swatch{
    width:10px;
    height:10px;
    border-radius:2px;
}

.bar-chart-wrap{
    overflow-x:auto;
}

.bar-chart{
    display:flex;
    align-items:flex-end;
    gap:var(--space-2);
    height:180px;
    width:100%;
    min-width:300px;
    padding-top:var(--space-3);
    border-bottom:1px solid var(--color-border);
}

.bar-chart-col{
    flex:1;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    height:100%;
}

.bar{
    width:10px;
    border-radius:3px 3px 0 0;
}

.bar-scored{ background:var(--color-gold); }
.bar-conceded{ background:var(--color-info); }

.bar-chart-labels{
    display:flex;
    gap:var(--space-2);
    width:100%;
    min-width:300px;
    margin-top:var(--space-2);
}

.bar-chart-labels span{
    flex:1;
    text-align:center;
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

/* --- Donut charts (Runs Distribution / Match Result Types) --- */

.donut-chart-row{
    display:flex;
    align-items:center;
    gap:var(--space-5);
    margin-top:var(--space-4);
}

.donut-chart{
    position:relative;
    width:130px;
    height:130px;
    border-radius:50%;
    flex-shrink:0;
}

.donut-chart-inner{
    position:absolute;
    inset:16px;
    border-radius:50%;
    background:var(--color-surface);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.donut-chart-inner .value{
    font-size:1.15rem;
    font-weight:800;
    font-family:var(--font-mono);
}

.donut-chart-inner .label{
    font-size:9px;
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
}

.donut-legend{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    flex:1;
    min-width:0;
}

.donut-legend-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    font-size:var(--fs-small);
}

.donut-legend-row .swatch-label{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.donut-legend-row .swatch{
    width:10px;
    height:10px;
    border-radius:3px;
    flex-shrink:0;
}

.donut-legend-row .amount{
    flex-shrink:0;
    font-weight:600;
    color:var(--color-text-muted);
}

/* ===========================================================
   BOTTOM PROMO STRIP
===========================================================*/

.stats-bottom-strip{
    display:grid;
    grid-template-columns:1.4fr 1.4fr 1fr;
    gap:0;
    margin-top:var(--space-6);
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--color-border);
}

.stats-bottom-cell{
    padding:var(--space-5);
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.stats-bottom-cell:nth-child(1){
    background:linear-gradient(115deg, rgba(18,27,49,.97) 40%, rgba(35,26,58,.6));
}

.stats-bottom-cell:nth-child(2){
    background:var(--color-surface);
    justify-content:space-around;
    border-left:1px solid var(--color-border);
    border-right:1px solid var(--color-border);
}

.stats-bottom-cell:nth-child(3){
    background:var(--color-surface-alt);
}

.stats-bottom-trophy{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(232,170,61,0.15);
    color:var(--color-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    flex-shrink:0;
}

.stats-bottom-cell h3{
    font-size:1rem;
    margin-bottom:2px;
}

.bottom-mini-stat{
    display:flex;
    align-items:center;
    gap:8px;
    text-align:left;
}

.bottom-mini-stat .icon{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    flex-shrink:0;
}

.bottom-mini-stat .value{
    font-weight:700;
    font-family:var(--font-mono);
    line-height:1.1;
}

.bottom-mini-stat .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

.stats-bottom-quote{
    font-style:italic;
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.stats-bottom-quote .quote-author{
    display:block;
    margin-top:6px;
    color:var(--color-gold);
    font-style:normal;
    font-weight:600;
    font-size:var(--fs-tiny);
}

/* ===========================================================
   EMPTY / NO-DATA STATE (Overview filters — e.g. Season with
   no recorded data)
===========================================================*/

.stats-empty-state{
    text-align:center;
    padding:var(--space-6) var(--space-4);
    color:var(--color-text-muted);
}

.stats-empty-state .icon{
    font-size:1.8rem;
    margin-bottom:var(--space-2);
}

/* ===========================================================
   PLAYER STAT CARDS — used by Batting & Bowling tabs. Full
   width flex cards, NOT a table, so nothing needs to
   horizontal-scroll on mobile.
===========================================================*/

.player-stat-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

.player-stat-card{
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
}

.player-stat-head{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    margin-bottom:var(--space-4);
}

.player-stat-head .avatar{
    width:44px;
    height:44px;
    font-size:var(--fs-small);
    flex-shrink:0;
}

.player-stat-name{
    flex:1;
    min-width:0;
}

.player-stat-name .name{
    font-weight:700;
}

.player-stat-name .team{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--fs-small);
    color:var(--color-text-faint);
}

.player-stat-name .team .crest-badge{
    margin:0;
    width:18px;
    height:18px;
    font-size:8px;
    border-radius:4px;
}

.player-stat-primary{
    flex-shrink:0;
    text-align:right;
}

.player-stat-primary .value{
    display:block;
    font-size:1.4rem;
    font-weight:800;
    font-family:var(--font-mono);
    color:var(--color-gold);
    line-height:1.1;
}

.player-stat-primary .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
}

.player-stat-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-2) var(--space-2);
    row-gap:var(--space-3);
    padding-top:var(--space-3);
    border-top:1px solid var(--color-border);
}

.player-stat-grid div{
    text-align:center;
}

.player-stat-grid .value{
    display:block;
    font-weight:700;
    font-family:var(--font-mono);
    font-size:var(--fs-body);
}

.player-stat-grid .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
}

/* ===========================================================
   TEAM STAT CARDS — Team Stats tab
===========================================================*/

.team-stat-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

.team-stat-card{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
    flex-wrap:wrap;
}

.team-stat-crest{
    width:46px;
    height:46px;
    border-radius:var(--radius-md);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    color:#fff;
    flex-shrink:0;
}

.team-stat-identity{
    flex:1 1 160px;
    min-width:0;
}

.team-stat-identity .name{
    font-weight:700;
}

.team-stat-identity .record{
    font-size:var(--fs-small);
    color:var(--color-text-faint);
}

.team-stat-metrics{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-4);
    flex:2 1 320px;
}

.team-stat-metrics div{
    text-align:center;
}

.team-stat-metrics .value{
    display:block;
    font-weight:700;
    font-family:var(--font-mono);
}

.team-stat-metrics .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
}

/* ===========================================================
   MATCH HIGHLIGHT CARDS — Match Stats tab
===========================================================*/

.match-highlight-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-4);
}

.match-highlight-card{
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);
}

.match-highlight-card .icon{
    width:36px;
    height:36px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:var(--space-3);
    font-size:1rem;
}

.match-highlight-card .title{
    font-size:var(--fs-tiny);
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--color-text-muted);
    margin-bottom:4px;
}

.match-highlight-card .value{
    font-size:1.3rem;
    font-weight:800;
    font-family:var(--font-mono);
    margin-bottom:2px;
}

.match-highlight-card .detail{
    font-size:var(--fs-small);
    color:var(--color-text-faint);
}

/* ===========================================================
   RECORDS LIST — Records tab
===========================================================*/

.records-list{
    display:flex;
    flex-direction:column;
}

.record-row{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-4) 0;
    border-bottom:1px solid var(--color-border);
}

.record-row:last-child{
    border-bottom:none;
}

.record-row .icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(232,170,61,0.15);
    color:var(--color-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    flex-shrink:0;
}

.record-row .record-title{
    flex:1;
    min-width:0;
}

.record-row .record-title .title{
    font-weight:600;
    font-size:var(--fs-small);
}

.record-row .record-title .holder{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

.record-row .record-value{
    flex-shrink:0;
    font-weight:800;
    font-family:var(--font-mono);
    font-size:1.1rem;
    color:var(--color-gold);
}

/* ===========================================================
   RESPONSIVE
===========================================================*/

@media (max-width: 1300px){
    .stats-summary-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 1100px){
    .stats-layout{
        grid-template-columns:1fr;
    }

    .stats-filter-toggle{
        display:flex;
    }

    .stats-sidebar{
        display:none;
    }

    .stats-sidebar.open{
        display:block;
        margin-bottom:var(--space-5);
    }

    .stats-leaderboards-grid{
        grid-template-columns:repeat(3, 1fr);
    }

    .stats-charts-row{
        grid-template-columns:1fr;
    }

    .stats-bottom-strip{
        grid-template-columns:1fr;
    }

    .stats-bottom-cell:nth-child(2){
        border-left:none;
        border-right:none;
        border-top:1px solid var(--color-border);
        border-bottom:1px solid var(--color-border);
        flex-wrap:wrap;
        gap:var(--space-4);
    }
}

/* Keep all 6 tabs on one row, app-style, on tablets too — shrink to
   fit rather than wrap or scroll off-edge (same fix pattern as
   points-table's page-nav). Widened to 1024px (not just 720px) because
   at plain tablet widths (768px etc.) the default overflow-x:auto tab
   bar left "Records" visibly cut off at the edge with no scroll hint. */
@media (max-width: 1024px){
    .stats-tabs-row{
        flex-direction:column;
        align-items:stretch;
    }

    .match-tabs{
        flex-wrap:nowrap;
        overflow-x:visible;
        gap:2px;
    }

    .match-tab{
        flex:1 1 0;
        min-width:0;
        text-align:center;
        white-space:normal;
        padding:var(--space-2) 2px;
        font-size:10px;
        letter-spacing:0;
    }

    .stats-season-select{
        width:100%;
    }
}

@media (max-width: 900px){
    .stats-hero>.container{
        padding:var(--space-6) 24px;
    }

    .stats-leaderboards-grid{
        grid-template-columns:1fr;
    }

    .match-highlight-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .team-stat-card{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }

    .team-stat-metrics{
        grid-template-columns:repeat(4, 1fr);
    }
}

@media (max-width: 720px){
    .stats-hero-copy h1{
        font-size:2rem;
    }

    .stats-summary-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .match-tab{
        font-size:9px;
    }

    .donut-chart-row{
        flex-direction:column;
        text-align:center;
    }

    .donut-legend-row{
        justify-content:center;
    }
}

@media (max-width: 480px){
    .stats-summary-card{
        align-items:center;
        padding:var(--space-3);
    }

    .stats-summary-card .value{
        font-size:1.2rem;
    }

    .player-stat-grid{
        grid-template-columns:repeat(2, 1fr);
        row-gap:var(--space-3);
    }

    .match-highlight-grid{
        grid-template-columns:1fr;
    }

    .team-stat-metrics{
        grid-template-columns:repeat(2, 1fr);
    }

    .record-row .record-value{
        font-size:1rem;
    }
}