/* ==========================================================
   MATCHS — écran liste des matchs + fiche match.
   (2 blocs d'origine dans styles.css, regroupés ici sans risque
   de cascade — vérifié à l'époque contre exercices-debrief.css,
   fichier supprimé depuis avec l'écran Exercices.)
   ========================================================== */

/* =========================
         MATCHES
   ========================= */
.match-card {
    padding: 0px 10px 5px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    text-align: center;
}

/* Prochain match/plateau à venir : bordure bleue plus épaisse pour le repérer
   d'un coup d'œil dans une liste où toutes les cartes se ressemblent. C'est
   l'échéance qui compte — celle qu'on vient consulter ou pour laquelle on
   convoque.

   La bordure passe de 1px à 2px : garder 1px et changer seulement la couleur
   se voyait à peine sur le fond gris de la carte. Le padding est réduit
   d'autant pour que la carte mise en avant ne soit pas plus grande que les
   autres et ne décale pas la liste. */
.match-card-next {
    border: 2px solid var(--blue-main);
    padding: 0px 9px 4px 9px;
}

.match-date {
    color: #1d4ed8;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.match-competition {
    color: #3f3f46;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.match-score-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.match-team {
    font-size: 13px;
    font-weight: 800;
    color: #3b3b3b;
}

.team-left {
    text-align: right;
}

.team-right {
    text-align: left;
}

.match-score-boxes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.match-score {
    min-width: 34px;
    height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-main);
    color: white;
    font-size: 22px;
    font-weight: 800;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(20, 40, 75, 0.18);
}

.match-score-boxes.win .match-score {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}

.match-score-boxes.loss .match-score {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

.match-score-boxes.draw .match-score {
    background: linear-gradient(180deg, #9ca3af, #6b7280);
}

.match-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.match-competition-pill {
    display: inline-block;
    max-width: 100%;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
    border-radius: 999px;
    color: #293a5f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 1px 0 rgba(20, 40, 75, 0.06);
}

.match-page-competition {
    margin: 6px 0 14px;
    padding: 12px 16px;

    background: var(--gradient-main);
    /* 🔥 ton bleu existant */
    color: white;

    border-radius: 12px;
    text-align: center;

    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;

    box-shadow: 0 4px 10px rgba(20, 40, 75, 0.15);
}

.match-date-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 36px;
    /* margin-bottom: 3px; */
}

.match-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.match-actions {
    margin-top: 6px;
}

.match-lieu-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.match-date {
    text-align: left;
}

.match-type {
    font-size: 13px;
    text-align: center;
    margin-top: 4px;
}

/* Match annulé (forfait, report...) : même place que .match-type, en rouge
   comme .statut.err pour se distinguer d'un match simplement sans score. */
.match-annule {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
    color: #b91c1c;
}

#matchsScreen {
    position: relative;
}


#listeMatchs {
    position: relative;
    z-index: 1;
}

#matchsScreen {
    position: relative;
}

#listeMatchs {
    position: relative;
    z-index: 1;
}

.match-page-competition {
    margin: 6px 0 0;
    padding: 12px 16px;
    background: var(--gradient-main);
    color: white;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(20, 40, 75, 0.15);
}

.match-competition-label {
    font-size: 11px;
    opacity: 0.8;
    margin-bottom: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.match-competition-value {
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.input-inline {
    width: 100%;
    border: none;
    background: transparent;
    resize: none;
    font-size: 13px;
    color: #555;
    padding: 2px 0;
}

.input-inline:focus {
    outline: none;
    border-bottom: 1px solid #ccc;
    background: #fafafa;
}

.competence-inline-input {
    width: 100%;
    margin-top: 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.25;
    box-shadow: none;
}

.competence-inline-input:focus {
    outline: none;
    background: #f9fafb;
    border-bottom: 1px solid #d1d5db;
}

.match-editor-card {
    padding: 0 14px 14px;
    border-radius: 18px;
    overflow: hidden;
}

.match-editor-card .small-title {
    margin: 0 -14px 8px -14px;
    padding: 16px 10px;
    font-size: 20px;
}

.match-editor-card .buttons {
    margin: 8px 0 8px 0;
    padding: 0 6px;
    gap: 6px;
}

.match-editor-card .field {
    margin-bottom: 8px;
}

.match-lieu {
    margin: 4px 0 10px;
    font-size: 13px;
    text-align: left;
}

.label-with-action {
    display: flex;
    align-items: center;      /* 🔥 alignement vertical parfait */
    justify-content: space-between;
}

.btn-add-inline {
    width: 26px;
    height: 26px;

    border-radius: 6px;
    border: none;

    background: var(--gradient-main);  /* 🔥 ton bleu */
    color: white;

    font-size: 18px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    margin-top: -2px;   /* 🔥 petit ajustement fin */
}

/* =========================
   CONVOCATIONS
   ========================= */

/* Titre/date (screen-info-line) + ligne compteur/actions : remplace 5 lignes
   empilées (.toolbar en display:grid, une rangée par enfant) par 2 lignes —
   sur mobile la liste des joueuses se retrouvait sous la ligne de flottaison,
   cf. capture d'écran. */
.convocation-header-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0;
}

.convocation-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.convocation-summary {
    color: #293a5f;
    font-size: 15px;
    font-weight: 800;
}

.convocation-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 8px;
}

/* Nom et boutons de statut empilés (pas côte à côte) : avec un nom+prénom
   long, les 5 boutons (32px chacun) ne tenaient plus à droite sur mobile —
   les derniers (BL, SU) sortaient du cadre et devenaient invisibles/
   inatteignables (body en overflow-x:hidden, pas de scroll possible). En
   les mettant sur leur propre ligne pleine largeur, ils restent toujours
   tous visibles quelle que soit la longueur du nom. */
.convocation-row-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.convocation-name-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.convocation-elsewhere-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #2bb3a3;
    color: white;
    font-size: 11px;
    font-weight: bold;
    border-radius: 999px;
}

/* Surclassement/sous-classement (cf. resources/surclassement-sousclassement.md) :
   joueur convoqué hors de sa categorie_pratique habituelle. */
.convocation-hors-categorie-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #7c3aed;
    color: white;
    font-size: 11px;
    font-weight: bold;
    border-radius: 999px;
}

.convocation-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.convocation-hors-categorie-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fde8e8;
    color: #dc2626;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

/* Panneau de recherche "Ajouter un(e) joueur(se) hors catégorie" : fond
   légèrement teinté + en-tête, pour bien le distinguer de la vraie liste de
   convocations en dessous (même repère violet que le badge hors catégorie
   ci-dessus, sinon les lignes se ressemblent trop et on ne sait plus si on
   regarde le panneau flottant ou la liste réelle). */
.add-hors-categorie-panel {
    background: #f5f0fe;
    border: 1px solid #ddd0fb;
}

.add-hors-categorie-header {
    padding: 8px 12px 6px;
    color: #7c3aed;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.add-hors-categorie-panel .list-row {
    background: white;
}

.convocation-row .list-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.convocation-row-missing {
    background: #fef2f2;
    border-color: #dc2626;
}

.convocation-buttons {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.convocation-dot {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e5e7eb;
    color: #293a5f;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
}

.convocation-dot.selected {
    color: white;
}

.convocation-dot:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.convocation-convoque {
    border-color: #2bb3a3;
}

.convocation-non_convoque {
    border-color: #ef4444;
}

.convocation-absent {
    border-color: #f97316;
}

.convocation-blessure {
    border-color: #f97316;
}

.convocation-suspension {
    border-color: #f97316;
}

.convocation-convoque.selected {
    background: #2bb3a3;
}

.convocation-non_convoque.selected {
    background: #ef4444;
}

.convocation-absent.selected {
    background: #f97316;
}

.convocation-blessure.selected {
    background: #f97316;
}

.convocation-suspension.selected {
    background: #f97316;
}

.stats-bar-convoque {
    background: #2bb3a3;
}

.stats-bar-non_convoque {
    background: #ef4444;
}

.stats-bar-absent,
.stats-bar-blessure,
.stats-bar-suspension {
    background: #f97316;
}

.match-convoque-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 6px;
}

/* Liste des convoqués de la fiche plateau : mêmes lignes que la fiche match
   (.match-convoque-row) mais sans la colonne buts/passes — un plateau n'a pas
   de stats individuelles. Le `gap` aère la liste, qui empilait les noms sans
   respiration, et laisse la place au badge « Hors catégorie » posé sous le nom
   (.convocation-name-col est en colonne). */
#listeConvoquesJoueursPlateau {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#listeConvoquesJoueursPlateau .convocation-name-col {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.match-convoque-stats {
    display: flex;
    gap: 10px;
    flex: none;
}

.match-convoque-stats label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #6b7280;
}

.match-convoque-stats input {
    width: 48px;
    padding: 4px;
    text-align: center;
}

/* Lien vers la fiche FFF dans la fiche match. Le bloc est aéré (marges plus
   larges que le .field par défaut, qui n'a que 8px en bas) : c'est une info
   isolée, sans rapport avec les champs de saisie qui l'entourent, et elle est
   collée sous le bouton Clôturer. */
.fff-match-link-field {
    margin: 18px 0 20px;
    padding: 0 6px;
}

/* L'URL elle-même n'est pas affichée (slug illisible avec les deux noms
   d'équipes) : c'est le libellé qui porte le lien. */
.fff-match-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: underline;
}

.fff-match-link i,
.fff-match-link svg {
    width: 15px;
    height: 15px;
}