/* ============================================================
   Player Stats & Locked Panel
   --------------------------------------------------------------
   Styles for the match-stats panel on player profiles and the
   shared LockedPanel registration CTA. Used on:
     - PlayerProfile.razor (match stats panel)
     - (Phase 3) /stats public community report

   All values use canonical tokens from site.css / ThemeService.
   No hard-coded colors, radii, shadows, or spacing.
   ============================================================ */

/* ── Stats panel header (title + filter inline) ── */
.pp-stats-panel .pp-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.pp-stats-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-muted);
}

.pp-stats-filter label {
    font-weight: var(--font-weight-regular);
}

.pp-stats-filter select {
    background: var(--color-input-bg);
    color: var(--color-input-text);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    cursor: pointer;
}

.pp-stats-filter select:focus {
    outline: none;
    border-color: var(--color-input-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

/* ── Headline grid (four-up) ── */
.pp-stats-headline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.pp-stats-headline-cell {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

.pp-stats-headline-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.pp-stats-headline-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
    font-family: var(--font-family-heading);
}

.pp-stats-headline-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    margin-top: var(--space-1);
}

/* ── Section (titled block within the panel) ── */
.pp-stats-section {
    margin-top: var(--space-5);
}

.pp-stats-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* ── Bar rows (Singles / Doubles split) ── */
.pp-stats-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

.pp-stats-bar-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.pp-stats-bar-track {
    position: relative;
    background: var(--color-divider);
    border-radius: var(--radius-sm);
    height: 10px;
    overflow: hidden;
}

.pp-stats-bar-fill {
    background: var(--color-success);
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.4s ease;
}

.pp-stats-bar-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ── By-format (BO1 / BO3 / BO5) grid ── */
.pp-stats-bestof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

.pp-stats-bestof-cell {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
}

.pp-stats-bestof-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.pp-stats-bestof-record {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-top: var(--space-1);
    line-height: var(--line-height-tight);
}

.pp-stats-bestof-pct {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

/* ── Game-level stat cells (icon + label + value) ── */
.pp-stats-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.pp-stats-game-cell {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.pp-stats-game-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
}

.pp-stats-game-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-stats-game-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold);
}

.pp-stats-game-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
}

/* ============================================================
   Locked Panel — shared registration CTA
   Used inline within stat panels (profile) and as a full-panel
   teaser on /stats for gated leaderboards.
   ============================================================ */

.locked-panel {
    background: linear-gradient(
        135deg,
        var(--color-primary-tint-light) 0%,
        var(--color-accent-tint-light) 100%
    );
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    margin-top: var(--space-4);
}

.locked-panel-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
    line-height: 1;
}

.locked-panel-title {
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    color: var(--color-heading);
    font-family: var(--font-family-heading);
    margin-bottom: var(--space-2);
    line-height: var(--line-height-tight);
}

.locked-panel-desc {
    font-size: var(--text-body-size);
    color: var(--color-text-muted);
    max-width: 42ch;
    margin: 0 auto var(--space-5);
    line-height: var(--line-height-normal);
}

.locked-panel-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.locked-panel-cta-primary {
    display: inline-block;
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border: 1px solid var(--color-button-primary-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-button-size);
    font-weight: var(--text-button-weight);
    font-family: var(--font-family-base);
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.locked-panel-cta-primary:hover {
    background: var(--color-button-primary-hover);
    color: var(--color-button-primary-text);
    text-decoration: none;
}

.locked-panel-cta-primary:active {
    transform: translateY(1px);
}

.locked-panel-cta-secondary {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: none;
}

.locked-panel-cta-secondary:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ── Compact variant (fits inside an existing panel section) ── */
.locked-panel-compact {
    padding: var(--space-5);
}

.locked-panel-compact .locked-panel-icon {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}

.locked-panel-compact .locked-panel-desc {
    margin-bottom: var(--space-4);
}

/* ── Filter pills (multi-select MatchType toggles) ── */
.pp-stats-filter-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.pp-stats-filter-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.pp-stats-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}

    .pp-stats-filter-pill:hover {
        border-color: var(--color-border-strong);
        color: var(--color-text);
    }

.pp-stats-filter-pill-active {
    background: var(--color-accent-tint);
    color: var(--color-accent);
    border-color: var(--color-accent-border);
}

    .pp-stats-filter-pill-active:hover {
        color: var(--color-accent-hover);
    }

/* ── Rivalries (Favorite Opponent + Nemesis) ── */
.pp-stats-rivalries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}

.pp-stats-rivalry-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.pp-stats-rivalry-favorite {
    border-left: 3px solid var(--color-success);
}

.pp-stats-rivalry-nemesis {
    border-left: 3px solid var(--color-danger);
}

.pp-stats-rivalry-icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
}

.pp-stats-rivalry-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pp-stats-rivalry-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold);
}

.pp-stats-rivalry-name {
    font-size: var(--text-card-title-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
}

    .pp-stats-rivalry-name a {
        color: inherit;
        text-decoration: none;
    }

        .pp-stats-rivalry-name a:hover {
            color: var(--color-link);
        }

.pp-stats-rivalry-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ── Show more / show less toggle (used by badge progress + challenge history) ── */
.pp-show-more-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-base);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .pp-show-more-btn:hover {
        background: var(--color-surface-alt);
        color: var(--color-text);
        border-color: var(--color-border-strong);
    }

/* ══════════════════════════════════════════════════════════
   Phase 2 — Monthly activity (12 months, horizontal scroll on narrow screens)
   ══════════════════════════════════════════════════════════ */

.pp-activity-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pp-activity-chart {
    display: block;
    width: 100%;
    min-width: 560px; /* bars stay readable below this; scroll kicks in */
    height: auto;
    font-family: var(--font-family-base);
}

.pp-activity-bar-win {
    fill: var(--color-success);
}

.pp-activity-bar-loss {
    fill: var(--color-text-subtle);
    opacity: 0.55;
}

.pp-activity-bar-label {
    fill: var(--color-text-muted);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
}

.pp-activity-month-label {
    fill: var(--color-text-subtle);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-activity-legend {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.pp-activity-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.pp-activity-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.pp-activity-legend-swatch-win {
    background: var(--color-success);
}

.pp-activity-legend-swatch-loss {
    background: var(--color-text-subtle);
    opacity: 0.55;
}

/* ══════════════════════════════════════════════════════════
   Phase 1b — Rivals + Partners list rows (shared styles)
   ══════════════════════════════════════════════════════════ */

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

.pp-matchup-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

    .pp-matchup-row + .pp-matchup-row {
        border-top: 1px solid var(--color-divider);
        padding-top: var(--space-3);
    }

.pp-matchup-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    background: var(--color-accent-tint);
    color: var(--color-accent);
}

.pp-matchup-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pp-matchup-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .pp-matchup-name a {
        color: inherit;
        text-decoration: none;
    }

        .pp-matchup-name a:hover {
            color: var(--color-link);
        }

.pp-matchup-bar-track {
    width: 100%;
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: 3px;
    overflow: hidden;
}

.pp-matchup-bar-fill {
    height: 100%;
    background: var(--color-success);
    transition: width 0.25s ease;
}

.pp-matchup-record {
    text-align: right;
    min-width: 60px;
}

.pp-matchup-wl {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
}

.pp-matchup-pct {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.pp-matchup-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
    padding: var(--space-3) 0;
}

/* ═══════════════════════════════════════════════════════════
   Profile — Top Partners teaser inside Match Stats panel
   ═══════════════════════════════════════════════════════════ */

.pp-stats-section-title-split {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.pp-stats-section-link {
    font-size: var(--font-size-xs);
    color: var(--color-link);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.pp-stats-section-link:hover {
    text-decoration: underline;
}

.pp-stats-partner-teaser {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pp-stats-partner-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
}

.pp-stats-partner-row + .pp-stats-partner-row {
    border-top: 1px solid var(--color-divider);
}

.pp-stats-partner-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-stats-partner-name:hover {
    color: var(--color-link);
}

.pp-stats-partner-bar-track {
    width: 100%;
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: 3px;
    overflow: hidden;
}

.pp-stats-partner-bar-fill {
    height: 100%;
    background: var(--color-success);
    transition: width 0.25s ease;
}

.pp-stats-partner-record {
    display: inline-flex;
    gap: var(--space-2);
    align-items: baseline;
    min-width: 100px;
    justify-content: flex-end;
}

.pp-stats-partner-wl {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
}

.pp-stats-partner-pct {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}