/* ═══════════════════════════════════════════════════════════
   STANDINGS CARD VIEW — Mobile card layout for standings
   Replaces wide table on small screens with scannable cards.
   Toggle between card view and table view at <=768px.
   ═══════════════════════════════════════════════════════════ */

/* ── View toggle buttons ─────────────────────────────────── */
.standings-view-toggle {
    display: none;           /* hidden on desktop */
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
    .standings-view-toggle {
        display: flex;
    }
}

.standings-view-toggle button {
    flex: 1;
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid var(--t-border-strong);
    border-radius: var(--radius-md);
    background: var(--t-surface);
    color: var(--t-text-secondary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}

.standings-view-toggle button:focus-visible {
    outline: 2px solid var(--t-focus-border);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--t-focus-ring);
}

.standings-view-toggle button.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}


/* ── Card view container ─────────────────────────────────── */
.standings-card-view {
    display: none;           /* hidden on desktop */
}

@media (max-width: 768px) {
    .standings-card-view {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /* When user toggles to table, hide cards */
    .standings-card-view.hide-cards {
        display: none;
    }

    /* The table wrapper — hidden on mobile by default, shown when toggled */
    .standings-table-wrap {
        display: none;
    }

    .standings-table-wrap.show-table {
        display: block;
    }
}


/* ── Individual card item ────────────────────────────────── */
.standings-card-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease-standard);
}

.standings-card-item:hover {
    background: var(--t-hover-bg);
}

/* Subtle top-3 highlight */
.standings-card-item.standings-card-top3 {
    border-left: 3px solid var(--warning);
}


/* ── Rank number ─────────────────────────────────────────── */
.standings-card-rank {
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--t-text-muted);
    min-width: 2rem;
    text-align: center;
    line-height: 1;
    flex-shrink: 0;
}

.standings-card-top3 .standings-card-rank {
    color: var(--t-status-warning-text);
}


/* ── Player info (name + stat chips) ─────────────────────── */
.standings-card-info {
    flex: 1;
    min-width: 0;            /* allow truncation */
}

.standings-card-name {
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--t-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.standings-card-name a {
    color: inherit;
    text-decoration: none;
}

.standings-card-name a:hover {
    color: var(--t-link-hover);
    text-decoration: underline;
}


/* ── Stat chips row ──────────────────────────────────────── */
.standings-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.standings-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.5rem;
}

.standings-card-stat-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-text-muted);
    line-height: 1.35;
}

.standings-card-stat-value {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--t-text);
    line-height: 1.35;
}

.standings-card-stat-value.stat-positive,
.standings-card-record-wl .stat-positive {
    color: var(--t-status-success-text);
}

.standings-card-stat-value.stat-negative,
.standings-card-record-wl .stat-negative {
    color: var(--t-status-danger-text);
}


/* ── Right-side record block (W-L + win%) ────────────────── */
.standings-card-record {
    text-align: right;
    flex-shrink: 0;
    padding-left: var(--space-2);
}

.standings-card-record-wl {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--t-text);
    line-height: 1.2;
    white-space: nowrap;
}

.standings-card-record-sep {
    color: var(--t-text-muted);
}

.standings-card-record-pct {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--t-text-muted);
    line-height: 1.35;
}