/* ============================================
   PingPerf - Styles des écrans : matches
   Phase 4 de SPEC_Refonte_Graphique_Mobile.md. Uniquement des jetons de tokens.css.
   Pages : player/matches/*, match/* (coach), résumé de match réutilisé par l'auto-évaluation.
   .ttpc-panel, .ttpc-facts, .ttpc-notes, .ttpc-disclosure et .ttpc-form-actions sont dans app.css
   (section « Composants partagés (phase 4) »).
   ============================================ */

/* ---------- Filtres de liste ---------- */
.ttpc-match-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.ttpc-match-filters .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
}

.ttpc-match-filters__wide,
.ttpc-match-filters__actions {
    grid-column: 1 / -1;
}

.ttpc-match-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ttpc-match-filters__actions .btn {
    flex: 1 1 auto;
    min-height: 2.75rem;
}

@media (min-width: 768px) {
    .ttpc-match-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ttpc-match-filters--coach {
        grid-template-columns: 1fr 1fr 1.5fr auto;
    }

    .ttpc-match-filters__wide,
    .ttpc-match-filters__actions {
        grid-column: auto;
    }

    .ttpc-match-filters__actions .btn {
        flex: 0 0 auto;
    }
}

/* Filtres actifs */
.ttpc-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: -0.25rem 0 1rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* ---------- Onglets de filtrage (coach) ---------- */
.ttpc-match-tabs.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 1rem;
}

.ttpc-match-tabs.nav-tabs::-webkit-scrollbar {
    display: none;
}

.ttpc-match-tabs .nav-item {
    flex: 1 0 auto;
}

.ttpc-match-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    white-space: nowrap;
    color: var(--ttpc-ink-2);
    font-weight: 600;
}

.ttpc-match-tabs .nav-link.active {
    color: var(--ttpc-table);
}

.ttpc-match-tabs .nav-link:focus-visible {
    outline: 2px solid var(--ttpc-table);
    outline-offset: -2px;
}

/* Compteurs des onglets */
.ttpc-tab-count.badge {
    background: var(--ttpc-surface-2);
    color: var(--ttpc-ink-2);
    font-variant-numeric: tabular-nums;
}

.ttpc-tab-count--ball.badge {
    background: var(--ttpc-ball);
    color: var(--ttpc-on-ball);
}

.ttpc-tab-count--table.badge {
    background: var(--ttpc-table-soft);
    color: var(--ttpc-table);
}

/* ---------- Listes de matchs ---------- */
.ttpc-match-list-foot {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* Tableau desktop nettoyé */
.ttpc-match-table {
    margin-bottom: 0;
}

.ttpc-match-table > thead th {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.ttpc-match-table td {
    font-variant-numeric: tabular-nums;
}

.ttpc-match-table__sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.ttpc-match-table__actions {
    display: inline-flex;
    gap: 0.25rem;
}

.ttpc-match-table__actions .btn {
    display: inline-grid;
    place-items: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

.ttpc-result-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Résumé du match (pages détail et auto-évaluation) ---------- */
.ttpc-match-hero {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface);
}

.ttpc-match-hero .ttpc-date-chip {
    flex: none;
}

.ttpc-match-hero__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ttpc-match-hero__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ttpc-match-hero__meta {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.ttpc-match-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.ttpc-match-hero .ttpc-result {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.375rem;
}

/* Note de bas de valeur (« Non renseigné ») */
.ttpc-muted {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

/* ---------- Barre d'actions de page ---------- */
.ttpc-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ttpc-actions .btn,
.ttpc-actions form {
    width: 100%;
}

.ttpc-actions .btn {
    min-height: 2.75rem;
}

@media (min-width: 768px) {
    .ttpc-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .ttpc-actions .btn,
    .ttpc-actions form {
        width: auto;
    }

    .ttpc-actions__end {
        margin-left: auto;
    }
}

/* ---------- Formulaires de match ---------- */
.ttpc-form-section {
    padding: 1.25rem 0;
    border-top: 1px solid var(--ttpc-line);
}

.ttpc-form-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.ttpc-form-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-family: var(--ttpc-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ttpc-ink);
}

.ttpc-form-section__title i {
    color: var(--ttpc-table);
}

.ttpc-form-section__intro {
    margin: -0.5rem 0 1rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Champs empilés sur mobile, deux colonnes à partir de 768 px */
.ttpc-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.25rem;
}

@media (min-width: 768px) {
    .ttpc-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Interrupteur « Demander une évaluation » : toute la ligne est cliquable */
.ttpc-switch-row > .form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-sm);
    background: var(--ttpc-surface);
}

.ttpc-switch-row .form-check-input {
    flex: none;
    float: none;
    width: 2.75em;
    height: 1.5em;
    margin: 0;
    cursor: pointer;
}

.ttpc-switch-row .form-check-label {
    flex: 1 1 auto;
    font-weight: 600;
    cursor: pointer;
}

.ttpc-switch-row .form-check-input:disabled,
.ttpc-switch-row .form-check-input:disabled ~ .form-check-label {
    cursor: not-allowed;
}

.ttpc-form-hint {
    display: flex;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

/* ---------- Évaluations sur la fiche match (coach) ---------- */
.ttpc-eval-card {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--ttpc-line);
    border-left: 4px solid var(--ttpc-eval-accent, var(--ttpc-table));
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface);
}

.ttpc-eval-card--self {
    --ttpc-eval-accent: var(--ttpc-info);
}

.ttpc-eval-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    font-family: var(--ttpc-font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.ttpc-eval-card__title i {
    color: var(--ttpc-eval-accent, var(--ttpc-table));
}

.ttpc-eval-card__by {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.ttpc-eval-card__label {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.ttpc-eval-card__label span:last-child {
    font-variant-numeric: tabular-nums;
}

.ttpc-eval-card__comment {
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ttpc-line);
    font-size: 0.875rem;
    color: var(--ttpc-ink-2);
}

/* Barres de score : largeur dynamique en ligne, couleur par jeton */
.ttpc-bar.progress {
    height: 0.625rem;
    background: var(--ttpc-surface-2);
}

.ttpc-bar--lg.progress {
    height: 0.875rem;
}

.ttpc-bar .progress-bar {
    background: var(--ttpc-eval-accent, var(--ttpc-table));
}

.ttpc-score {
    font-family: var(--ttpc-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ttpc-score small {
    font-family: var(--ttpc-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}