/* ===========================================================
   POINTS TABLE HERO
   Same dual-layer gradient+image pattern as tournament.css's
   .tournament-hero, with its own floating "Tournament Overview"
   card (icon + label/value pairs instead of just label/value).
===========================================================*/

.pts-hero{
    position:relative;
    min-height:340px;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(6,10,20,.96) 0%,
        rgba(6,10,20,.90) 28%,
        rgba(6,10,20,.55) 55%,
        rgba(6,10,20,.15) 78%,
        transparent 100%
    ),
    url("../images/hero/Points\ Table\ Banner.webp");

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

.pts-hero>.container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:var(--space-5);
    width:100%;
    max-width:1320px;
    margin:auto;
    position:relative;
    z-index:5;
    padding:var(--space-6) 40px;
}

.pts-hero-copy{
    flex:1 1 320px;
    max-width:600px;
}

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

.pts-hero-copy .season-tag{
    color:var(--color-gold);
    font-weight:700;
    font-size:1.05rem;
    margin-bottom:var(--space-2);
}

.pts-hero-copy .tagline{
    font-size:1rem;
    color:#D3D8E2;
}

/* Floating "Tournament Overview" card */

.pts-overview-card{
    flex:1 1 320px;
    max-width:420px;
    width:100%;
    padding:var(--space-5);
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg, rgba(18,27,49,.97), rgba(11,18,34,.97));
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-lift);
}

.pts-overview-title{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--color-gold);
    font-size:var(--fs-small);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:var(--space-4);
}

.pts-overview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4);
}

.pts-overview-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.pts-overview-icon{
    width:34px;
    height:34px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    flex-shrink:0;
}

.pts-overview-item .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin-bottom:2px;
}

.pts-overview-item .value{
    font-size:0.95rem;
    font-weight:700;
}

.pts-overview-item .value-start{ color:var(--color-success); }
.pts-overview-item .value-final{ color:var(--color-gold); }

/* ===========================================================
   TAB-STYLE PAGE NAV
   (Visual pill/underline tabs like tournament.css's .match-tabs,
   but these are plain navigation links between sibling Tournament
   pages, not JS-driven panels — this page IS "Points Table".)
===========================================================*/

.pts-page-nav{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    border-bottom:1px solid var(--color-border);
    margin-bottom:var(--space-5);
    overflow-x:auto;
}

.pts-page-nav a{
    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;
    text-decoration:none;
    border-bottom:2px solid transparent;
    text-transform:uppercase;
    letter-spacing:0.03em;
}

.pts-page-nav a:hover{
    color:var(--color-text);
}

.pts-page-nav a.active{
    color:var(--color-gold);
    border-bottom-color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

/* ===========================================================
   MAIN LAYOUT
===========================================================*/

.pts-layout{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:var(--space-5);
    align-items:start;
}

.pts-main{
    /* Grid items default to min-width:auto, which stops them shrinking
       below their content's intrinsic width — this is what was letting
       the table (and the long expand-row note text) push past the
       screen edge regardless of the table/cell-level fixes below.
       min-width:0 is the standard fix. */
    min-width:0;
}

/* ===========================================================
   LEAGUE TABLE
===========================================================*/

.pts-table-wrap{
    overflow-x:auto;
}

/* Mobile card list — hidden by default (desktop/tablet use the table
   above), shown instead of it on phones. Plain flex/block only, no
   nested grid, on purpose. */

.pts-mobile-list{
    display:none;
    flex-direction:column;
    gap:var(--space-3);
}

.pts-mobile-card{
    background:var(--color-surface-alt);
    border-radius:var(--radius-md);
    padding:var(--space-3);
    border-left:3px solid transparent;
}

.pts-mobile-card.qualified-row{
    border-left-color:var(--color-success);
}

.pts-mobile-card.eliminated-row{
    border-left-color:var(--color-danger);
}

.pts-mobile-top{
    display:flex;
    align-items:center;
    gap:8px;
}

.pts-mobile-top .crest-badge{
    margin:0;
    flex-shrink:0;
}

.pts-mobile-name{
    flex:1;
    min-width:0;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pts-mobile-pts{
    font-weight:700;
    font-size:1.05rem;
    flex-shrink:0;
}

.pts-mobile-stats{
    margin:8px 0;
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.pts-full-table{
    width:100%;
    border-collapse:collapse;
}

.pts-full-table th{
    text-align:left;
    font-size:var(--fs-tiny);
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--color-text-faint);
    padding:var(--space-2) var(--space-3);
    border-bottom:1px solid var(--color-border);
    white-space:nowrap;
}

.pts-full-table td{
    padding:var(--space-3);
    border-bottom:1px solid var(--color-border);
    font-size:var(--fs-small);
    vertical-align:middle;
}

.pts-full-table tbody tr.qualified-row{
    border-left:3px solid var(--color-success);
}

.pts-full-table tbody tr.eliminated-row{
    border-left:3px solid var(--color-danger);
}

.pts-rank{
    width:26px;
    height:26px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-small);
    font-weight:700;
    background:var(--color-surface-alt);
}

.pts-rank.qualified{
    background:rgba(34,197,94,0.18);
    color:var(--color-success);
}

.pts-team-cell{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
}

.pts-team-cell .crest-badge{
    margin:0;
}

.nrr-positive{ color:var(--color-success); }
.nrr-negative{ color:var(--color-danger); }

.pts-info-icon{
    display:inline-flex;
    color:var(--color-text-faint);
    cursor:help;
    margin-left:4px;
}

/* Last 5 matches — small colored W/L chips */

.form-chips{
    display:flex;
    gap:4px;
}

.form-chip{
    width:22px;
    height:22px;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
    color:#fff;
}

.form-chip.win{ background:var(--color-success); }
.form-chip.loss{ background:var(--color-danger); }

/* Legend below the table */

.pts-legend-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    margin-top:var(--space-4);
    padding-top:var(--space-4);
    border-top:1px solid var(--color-border);
}

.pts-legend{
    display:flex;
    gap:var(--space-4);
    font-size:var(--fs-small);
}

.pts-legend-swatch{
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:3px;
    margin-right:6px;
    vertical-align:middle;
}

.pts-key{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
}

/* ===========================================================
   SIDEBAR
===========================================================*/

.pts-sidebar{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
}

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

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

.top-performer-row .avatar{
    flex-shrink:0;
    width:48px;
    height:48px;
}

.top-performer-tag{
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin-bottom:2px;
    display:block;
}

.top-performer-row .name{
    font-weight:600;
    font-size:var(--fs-body);
}

.top-performer-row .stat-value{
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.pts-update-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.pts-refresh-btn{
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    color:var(--color-text);
    border-radius:50%;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
}

.pts-refresh-btn svg{
    transition:transform 0.4s ease;
}

.pts-refresh-btn.spinning svg{
    transform:rotate(360deg);
}

/* Promo card (trophy background) */

.pts-promo-card{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    padding:var(--space-5);
    background:linear-gradient(115deg, rgba(18,27,49,.95) 45%, rgba(35,26,58,.55)),
               radial-gradient(circle at 85% 70%, rgba(232,170,61,0.25), transparent 60%);
    border:1px solid var(--color-border);
}

.pts-promo-card h3{
    font-size:1.1rem;
    margin-bottom:var(--space-2);
}

.pts-promo-card .highlight{
    color:var(--color-gold);
}

.pts-promo-card p{
    margin-bottom:var(--space-4);
}

/* ===========================================================
   BOTTOM PROMO BANNER
===========================================================*/

.pts-bottom-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    margin-top:var(--space-6);
    padding:var(--space-5) var(--space-6);
    border-radius:var(--radius-lg);
    background:linear-gradient(90deg, rgba(18,27,49,.97), rgba(35,26,58,.9));
    border:1px solid var(--color-border);
}

.pts-bottom-banner-left{
    display:flex;
    align-items:center;
    gap:var(--space-4);
}

.pts-bottom-banner-left .crest-badge{
    margin:0;
    width:56px;
    height:56px;
    font-size:0.75rem;
}

.pts-bottom-banner-left h3{
    font-size:1.15rem;
    margin-bottom:2px;
}

.pts-bottom-banner-photo{
    width:110px;
    height:70px;
    border-radius:var(--radius-sm);
    background:linear-gradient(135deg, rgba(232,170,61,0.25), rgba(124,92,252,0.25));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.75rem;
    flex-shrink:0;
}

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

@media (max-width: 1300px){
    .pts-overview-card{
        width:320px;
        padding:var(--space-4);
    }

    .pts-overview-title{
        font-size:11px;
    }

    .pts-overview-item .value{
        font-size:0.82rem;
    }
}

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

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

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

    .pts-overview-grid{
        grid-template-columns:1fr;
        gap:var(--space-3);
    }

    .pts-legend-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .pts-bottom-banner{
        flex-direction:column;
        text-align:center;
    }

    /* Keep all 4 tabs on one row on mobile — shrink them to fit
       instead of wrapping to two lines or scrolling off-edge. The
       longest label ("Standings History") is allowed to wrap onto
       its own second line within its own cell if needed, without
       breaking the single-row layout of the whole nav. */
    .pts-page-nav{
        flex-wrap:nowrap;
        overflow-x:visible;
        gap:4px;
    }

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

@media (max-width: 600px){
    /* App-like mobile view: hide the table entirely and show the card
       list instead, so there's no side-scrolling needed at all. */
    .pts-table-wrap{
        display:none;
    }

    .pts-mobile-list{
        display:flex;
    }
}

@media (max-width: 480px){
    .form-chip{
        width:18px;
        height:18px;
        font-size:9px;
    }
}