/* ============================================
   PingPerf - Styles des écrans : coach-players
   Phase 4 de SPEC_Refonte_Graphique_Mobile.md. Uniquement des jetons de tokens.css.
   Joueurs, fiche joueur, niveau, historique GLOBAL, groupes, évaluations, invitations (côté coach).
   Préfixe .ttpc-cp- (coach-players). CSS écrit pour 360 px, enrichi à 768 et 992 px.
   ============================================ */

/* ---------- Page ---------- */
.ttpc-cp {
    padding-bottom: 1.5rem;
}

.ttpc-cp > section + section,
.ttpc-cp > .ttpc-cp-block + .ttpc-cp-block {
    margin-top: 1.5rem;
}

/* Sous-titre de l'en-tête : .lead conservé pour les tests, ramené à la taille du texte courant */
.ttpc-page-head .lead {
    font-size: 1rem;
    font-weight: 400;
}

/* Lien de retour au-dessus de l'en-tête */
.ttpc-cp-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    color: var(--ttpc-ink-2);
    font-weight: 600;
    text-decoration: none;
}

.ttpc-cp-back:hover,
.ttpc-cp-back:focus-visible {
    color: var(--ttpc-table);
}

.ttpc-cp-back + .ttpc-page-head {
    margin-top: 0.25rem;
}

/* Texte secondaire (e-mail, date, auteur) */
.ttpc-cp-sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    overflow-wrap: anywhere;
}

.ttpc-cp-num {
    font-family: var(--ttpc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ttpc-cp-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* Une puce qui porte aussi .badge (sélecteur vérifié par les tests) garde l'apparence de la puce */
.ttpc-chip.badge {
    border-radius: 99px;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Note d'information neutre (remplace les encadrés colorés décoratifs) */
.ttpc-cp-note {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface-2);
    color: var(--ttpc-ink-2);
    font-size: 0.9375rem;
}

.ttpc-cp-note > i {
    flex: none;
    color: var(--ttpc-table);
    font-size: 1.125rem;
    margin: 0;
}

.ttpc-cp-note ul {
    margin: 0;
    padding-left: 1.1rem;
}

.ttpc-cp-note p {
    margin: 0;
}

.ttpc-cp-note strong {
    color: var(--ttpc-ink);
}

/* Barre d'actions de pied de page (retour, suppression) */
.ttpc-cp-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

/* Cibles tactiles de 44 px (UI-02) : les petits boutons grandissent au doigt */
@media (max-width: 991.98px), (pointer: coarse) {
    .ttpc-cp .btn-sm,
    .ttpc-cp .dropdown-item {
        min-height: 2.75rem;
    }

    .ttpc-cp .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-width: 2.75rem;
    }

    .ttpc-cp .dropdown-item {
        display: flex;
        align-items: center;
    }
}

/* ---------- Fiche joueur : en-tête ---------- */
.ttpc-cp-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ttpc-cp-hero__name {
    margin: 0 0 0.375rem;
    font-family: var(--ttpc-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.05;
}

/* Liste de faits (.ttpc-facts, app.css) sous l'en-tête de la fiche */
.ttpc-cp-hero + .ttpc-facts {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ttpc-line);
}

/* Grille principale de la fiche : Player Card + chiffres clés | informations */
.ttpc-cp-profile-grid {
    display: grid;
    gap: 1rem;
}

.ttpc-cp-profile-grid > * {
    min-width: 0;
}

@media (min-width: 992px) {
    .ttpc-cp-profile-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.ttpc-cp-stack {
    display: grid;
    gap: 0.75rem;
}

/* Actions rapides : pleine largeur sur mobile */
.ttpc-cp-actions {
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .ttpc-cp-actions {
        display: flex;
        flex-wrap: wrap;
    }
}

/* ---------- Graphiques Chart.js ---------- */
.ttpc-cp-chart {
    position: relative;
    height: 15rem;
}

.ttpc-cp-chart--radar {
    height: 20rem;
    max-width: 32rem;
    margin: 0 auto;
}

.ttpc-cp-chart--mini {
    height: 10rem;
}

.ttpc-cp-chart--short {
    height: 12rem;
}

.ttpc-cp-chart canvas {
    outline: none;
}

/* Le radar ne capte pas le geste de défilement de la page */
.ttpc-cp-chart--radar canvas {
    touch-action: pan-y;
}

@media (min-width: 768px) {
    .ttpc-cp-chart {
        height: 18rem;
    }

    .ttpc-cp-chart--radar {
        height: 22rem;
    }

    .ttpc-cp-chart--mini {
        height: 11rem;
    }

    .ttpc-cp-chart--short {
        height: 14rem;
    }
}

/* Petits graphiques des 5 dimensions */
.ttpc-cp-dims {
    display: grid;
    gap: 1.25rem;
}

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

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

.ttpc-cp-dims h3 {
    margin: 0 0 0.375rem;
    font-family: var(--ttpc-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ttpc-ink-2);
}

/* Deux graphiques côte à côte à partir de 992 px */
.ttpc-cp-chart-grid {
    display: grid;
    gap: 1rem;
}

.ttpc-cp-chart-grid > * {
    min-width: 0;
}

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

/* ---------- Liste des joueurs (recherche + tableau + cartes) ---------- */
.ttpc-cp-search {
    margin-bottom: 1rem;
}

.ttpc-cp-search .form-control {
    min-height: 3rem;
}

.ttpc-cp-search .ttpc-cp-sub {
    margin-top: 0.375rem;
}

.ttpc-cp-roster-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.ttpc-cp-roster .table td,
.ttpc-cp-roster .table th {
    white-space: nowrap;
}

.ttpc-cp-roster .table td:first-child {
    white-space: normal;
}

/* Boutons d'action du tableau : un principal, les autres neutres */
.ttpc-cp-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.375rem;
}

/* Cartes mobiles : actions à 44 px, valeurs alignées */
.ttpc-cp-roster .player-card-mobile .card-actions-mobile-compact .btn {
    min-height: 2.75rem;
    font-size: 0.875rem;
}

.ttpc-cp-roster .player-card-mobile .info-value-compact {
    font-variant-numeric: tabular-nums;
}

.ttpc-cp-roster .player-card-mobile .card-header-mobile {
    gap: 0.75rem;
}

/* ---------- Groupes : cartes de la liste ---------- */
.ttpc-cp-groups {
    display: grid;
    gap: 0.75rem;
}

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

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

.ttpc-cp-group .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ttpc-cp-group__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.ttpc-cp-group__title {
    margin: 0;
    font-family: var(--ttpc-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ttpc-cp-group__title a {
    color: inherit;
    text-decoration: none;
}

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

.ttpc-cp-group__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ttpc-line);
}

.ttpc-cp-group__actions > .btn,
.ttpc-cp-group__actions > form {
    flex: 1 1 auto;
}

.ttpc-cp-group__actions > form .btn {
    width: 100%;
}

/* Trois chiffres en ligne (joueurs, score, niveau) */
.ttpc-cp-minis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0.625rem 0;
    border-radius: var(--ttpc-r-sm);
    background: var(--ttpc-surface-2);
    text-align: center;
}

.ttpc-cp-minis dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ttpc-cp-minis dd {
    margin: 0;
    font-family: var(--ttpc-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ---------- Groupe : meilleur joueur ---------- */
.ttpc-cp-highlight {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-md);
    background: var(--ttpc-surface);
}

.ttpc-cp-highlight__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--ttpc-table-soft);
    color: var(--ttpc-table);
    font-size: 1.25rem;
}

.ttpc-cp-highlight__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* ---------- Groupe : sélecteur de joueurs (modale) ---------- */
.ttpc-cp-picker {
    max-height: 28rem;
    overflow-y: auto;
    border: 1px solid var(--ttpc-line);
    border-radius: var(--ttpc-r-sm);
    scrollbar-width: thin;
    scrollbar-color: var(--ttpc-line) transparent;
}

#playerTable {
    font-size: 0.9375rem;
}

#playerTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ttpc-surface-2);
    color: var(--ttpc-ink-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 var(--ttpc-line);
}

#playerTable th:nth-child(1) { width: 45%; }
#playerTable th:nth-child(2) { width: 35%; }
#playerTable th:nth-child(3) { width: 10%; }
#playerTable th:nth-child(4) { width: 10%; }

#playerTable tbody tr:active {
    background: var(--ttpc-surface-2);
}

#playerTable .avatar-info strong {
    overflow-wrap: anywhere;
}

.ttpc-cp-picker .add-player-form .btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

/* ---------- Historique GLOBAL : cartes d'évaluation ---------- */
.ttpc-cp-evals {
    display: grid;
    gap: 1rem;
}

.ttpc-cp-eval.is-active {
    border-color: var(--ttpc-win);
    box-shadow: inset 4px 0 0 var(--ttpc-win), var(--ttpc-shadow-sm);
}

.ttpc-cp-eval__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.ttpc-cp-eval__date {
    margin: 0;
    font-family: var(--ttpc-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
}

.ttpc-cp-eval h3 {
    margin: 1.25rem 0 0.5rem;
    font-family: var(--ttpc-font-body);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ttpc-ink-2);
}

.ttpc-cp-eval .card-footer {
    background: transparent;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
}

.ttpc-cp-comments {
    display: grid;
    gap: 0 1.5rem;
}

.ttpc-cp-comments > div {
    min-width: 0;
    font-size: 0.9375rem;
    color: var(--ttpc-ink-2);
}

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

/* Barres de score par dimension (largeur calculée en ligne) */
.ttpc-cp-bars {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .ttpc-cp-bars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem 1.5rem;
    }
}

.ttpc-cp-bar__label {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.ttpc-cp-bar__label b {
    font-variant-numeric: tabular-nums;
}

.ttpc-cp-bar__track {
    display: block;
    height: 0.375rem;
    margin-top: 0.25rem;
    overflow: hidden;
    border-radius: 99px;
    background: var(--ttpc-surface-2);
}

.ttpc-cp-bar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ttpc-table);
}

/* ---------- Gestion des coachs du groupe ---------- */
.ttpc-cp-coaches .ttpc-list-row {
    flex-wrap: wrap;
    align-items: center;
}

.ttpc-cp-coaches .ttpc-list-row__main,
.ttpc-cp-found .ttpc-list-row__main {
    flex: 1 1 12rem;
}

.ttpc-cp-coaches .ttpc-list-row__title,
.ttpc-cp-found .ttpc-list-row__title {
    white-space: normal;
}

.ttpc-cp-coaches .ttpc-list-row__meta,
.ttpc-cp-found .ttpc-list-row__meta {
    overflow-wrap: anywhere;
}

.ttpc-cp-coaches .ttpc-list-row > form,
.ttpc-cp-coaches .ttpc-list-row > .ttpc-cp-sub,
.ttpc-cp-found > form {
    flex: none;
}

@media (max-width: 575.98px) {
    .ttpc-cp-coaches .ttpc-list-row > form,
    .ttpc-cp-found > form,
    .ttpc-cp-coaches .ttpc-list-row > form .btn,
    .ttpc-cp-found > form .btn {
        width: 100%;
    }

    .ttpc-cp-coaches .ttpc-list-row > .ttpc-cp-sub {
        display: none;
    }
}

.ttpc-cp-found {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- Évaluations : filtres ---------- */
.ttpc-cp-filters .form-label {
    font-size: 0.875rem;
}

.ttpc-cp-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ttpc-cp-filter-actions .ttpc-cp-exports {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .ttpc-cp-filter-actions .ttpc-cp-exports {
        margin-left: auto;
    }
}

/* Cellule d'actions : boutons côte à côte, sans groupe collé */
.ttpc-cp-cell-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.375rem;
}

.ttpc-cp-cell-actions form {
    display: inline-flex;
    margin: 0;
}

/* Pagination KNP : 44 px au doigt */
.ttpc-cp .pagination .page-link {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Titres de section avec action ou compteur : passage à la ligne à 360 px */
.ttpc-cp .ttpc-section-title {
    flex-wrap: wrap;
}

.ttpc-cp-chips .ttpc-chip {
    white-space: normal;
    text-align: left;
}

/* Rôle du coach auprès du joueur (Coach principal / secondaire) */
.ttpc-cp-role {
    margin-top: 0.25rem;
    width: fit-content;
}