/* ==========================================
   Standings (shared)
   Single source of truth for the standings feature rendered by
   assets/js/standings-renderer.js. Loaded by match-detail.php,
   league.php and team.php so the canonical markup looks identical
   everywhere. Zone colors are API-driven via the inline --zone-color
   custom property; .zone-{slug} classes remain as a fallback hook and
   supply the row background tint (--zone-bg).
   ========================================== */

/* ── Filter tabs (All / Home / Away) — siblings of the render root ── */
.standings-filters {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.standings-filter-btn {
    padding: 10px 20px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    transition: var(--transition-fast);
}

.standings-filter-btn.active {
    color: var(--accent-teal);
    border-bottom-color: var(--accent-teal);
}

.standings-filter-btn:hover {
    color: var(--text-primary);
}

/* Pill-style All/Home/Away filter (parity with team page), full-width — match detail + league */
#tab-standings .standings-filters,
#league-tab-standings .standings-filters {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-bottom: 16px;
    border-bottom: none;
}

#tab-standings .standings-filter-btn,
#league-tab-standings .standings-filter-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1.22;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    cursor: pointer;
    transition: var(--transition-fast);
}

#tab-standings .standings-filter-btn:hover,
#league-tab-standings .standings-filter-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

#tab-standings .standings-filter-btn.active,
#league-tab-standings .standings-filter-btn.active {
    color: var(--text-white);
    background: var(--accent-purple);
    border-color: var(--accent-purple);
}

/* ── Team-page league selector row ── */
.team-standings-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* Themed <select> controls (team league selector, league season selector) */
.league-season-btn,
.team-standings-controls select {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    padding: 8px 12px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.league-season-btn:hover,
.team-standings-controls select:hover {
    border-color: var(--accent-teal);
}

.league-season-btn:focus,
.team-standings-controls select:focus {
    outline: none;
    border-color: var(--accent-teal);
}

/* ── Async states (loading / empty / error) ── */
.standings-render-root {
    min-height: 80px;
}

.standings-state {
    padding: 32px 20px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-card);
}

.standings-error {
    color: var(--accent-red);
}

.spin-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================
   Rendered standings cards (canonical markup)
   ========================================== */

/* Stack of standings cards — one per group */
.standings-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Card shell */
.standings-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-card);
    overflow: hidden;
}

/* Card head: league identity + matchday counter */
.standings-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-card-header);
    border-bottom: 1px solid var(--border-color);
}

.standings-league {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.standings-league-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}

.standings-league-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.standings-league-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.22;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Group name — secondary line under the league name in the card head (e.g.
   "Group A" for multi-group cups). The renderer hides it when it would just
   duplicate the league name on single-group tables. */
.standings-group-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.22;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.standings-matchday {
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11.5px;
    line-height: 1.22;
    color: var(--text-muted);
    white-space: nowrap;
}

.standings-matchday span {
    color: var(--accent-primary);
}

/* Zone legend */
.standings-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
}

.standings-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.standings-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--zone-color, var(--text-muted));
    flex-shrink: 0;
}

.standings-legend-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1.22;
    color: var(--text-muted);
}

/* Zone palette — zone-* classes set the custom properties consumed by the
   legend dot, position bar, position number and row tint. */

/* Generic fallback for unmapped zone slugs (regional competitions) —
   :where() keeps specificity at (0,1,0) so the specific .zone-* rules
   below override this via cascade order. */
.standings-cards :where([class*="zone-"]) {
    --zone-color: var(--accent-teal);
    --zone-bg: var(--zone-uecl-bg);
}

.zone-ucl {
    --zone-color: var(--zone-ucl);
    --zone-bg: var(--zone-ucl-bg);
}

.zone-uel {
    --zone-color: var(--zone-uel);
    --zone-bg: var(--zone-uel-bg);
}

.zone-uecl {
    --zone-color: var(--zone-uecl);
    --zone-bg: var(--zone-uecl-bg);
}

.zone-rel {
    --zone-color: var(--accent-red);
    --zone-bg: var(--zone-rel-bg);
}

.zone-promo {
    --zone-color: var(--accent-green);
    --zone-bg: var(--zone-ucl-bg);
}

.zone-sf,
.zone-final {
    --zone-color: var(--accent-yellow);
    --zone-bg: var(--zone-uel-bg);
}

.zone-r16,
.zone-qf {
    --zone-color: var(--accent-teal);
    --zone-bg: var(--zone-uecl-bg);
}

.zone-r32 {
    --zone-color: var(--zone-r32);
    --zone-bg: var(--zone-r32-bg);
}

/* Scroll viewport — the table keeps its fixed column widths and scrolls
   horizontally on narrow screens while head / legend / footer stay pinned. */
.standings-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.standings-table {
    width: 100%;
    min-width: 560px;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Header row */
.standings-table th {
    padding: 10px 0;
    background: var(--bg-pill);
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.standings-table .th-club {
    text-align: start;
    padding-inline-start: 8px;
}

.standings-table .th-pos,
.standings-table .th-pts {
    width: 52px;
}

.standings-table .th-stat {
    width: 48px;
}

.standings-table .th-goals {
    width: 72px;
}

.standings-table .th-diff {
    width: 50px;
}

.standings-table .th-form {
    width: 96px;
}

.standings-table .is-accent {
    color: var(--accent-primary);
}

/* Body rows */
.standings-table td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.22;
    color: var(--text-tertiary);
}

.standings-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}

.standings-table tbody tr:last-child {
    border-bottom: 0;
}

.standings-table tbody tr[class*="zone-"] {
    background-color: var(--zone-bg);
}

.standings-table tbody tr.highlight td {
    background-color: var(--bg-pill);
}

/* Group / zone separator row */
.standings-table .standings-group-row td {
    padding: 3px 20px 3px 56px;
    background: var(--bg-pill);
    border-bottom: 1px solid var(--border-color);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: start;
}

.standings-table .td-stat,
.standings-table .td-goals,
.standings-table .td-diff,
.standings-table .td-pts {
    padding: 25px 0;
}

/* Position cell: zone bar + zone-colored number */
.standings-table .td-pos {
    position: relative;
}

.standings-table .z-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--zone-color, transparent);
}

.standings-table .pos-num {
    display: block;
    padding: 25px 0;
    font-weight: 800;
    font-size: var(--font-size-sm);
    color: var(--zone-color, var(--text-muted));
}

/* Club cell */
.standings-table .td-club {
    text-align: start;
}

.standings-table .td-club a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline-start: 6px;
    color: inherit;
    text-decoration: none;
}

.standings-table .club-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.standings-table .club-name {
    font-weight: 800;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Goal difference */
.standings-table .td-diff.is-pos {
    color: var(--zone-ucl);
}

.standings-table .td-diff.is-neg {
    color: var(--accent-red);
}

/* Points */
.standings-table .td-pts {
    color: var(--accent-primary);
}

.standings-table tbody tr.zone-rel .td-pts {
    color: var(--accent-red);
}

/* Form guide (last 5 matches) */
.standings-table .td-form {
    padding: 0 6px;
}

.form-guide {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.form-guide .fg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14.5px;
    height: 15px;
    border-radius: 7.35px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 8px;
    line-height: 1;
}

.fg-w {
    background: var(--form-win-bg);
    color: var(--zone-ucl);
}

.fg-d {
    background: var(--form-draw-bg);
    color: var(--text-muted);
}

.fg-l {
    background: var(--form-loss-bg);
    color: var(--accent-red);
}

.form-none {
    color: var(--text-secondary);
}

/* Card footer: abbreviation key */
.standings-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
}

.standings-foot-note {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ==========================================
   Responsive (ported from match-detail.css so league / team match the
   fixture standings breakpoints; those pages do not load match-detail.css)
   ========================================== */

@media (max-width: 991.98px) {
    .standings-card-head {
        padding: 12px 16px;
    }

    .standings-league-logo {
        width: 32px;
        height: 32px;
    }

    .standings-table .td-stat,
    .standings-table .td-goals,
    .standings-table .td-diff,
    .standings-table .td-pts,
    .standings-table .pos-num {
        padding: 18px 0;
    }
}

@media (max-width: 767.98px) {
    .standings-card-head {
        padding: 12px 14px;
    }

    .standings-league-logo {
        width: 30px;
        height: 30px;
    }

    .standings-league-name {
        font-size: 13px;
    }

    .standings-legend {
        padding: 8px 14px;
    }

    .standings-table {
        min-width: 640px;
    }

    .standings-table th {
        padding: 8px 0;
    }

    .standings-table .td-stat,
    .standings-table .td-goals,
    .standings-table .td-diff,
    .standings-table .td-pts,
    .standings-table .pos-num {
        padding: 12px 0;
    }

    .standings-table .club-name {
        font-size: 12px;
    }

    .standings-card-foot {
        padding: 10px 14px;
    }
}

@media (max-width: 479.98px) {
    .standings-table {
        min-width: 600px;
    }

    .standings-league-name {
        font-size: 12px;
        max-width: 150px;
    }

    .standings-table .fg {
        width: 13px;
        height: 14px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .standings-table .td-club a {
        min-height: 36px;
    }
}