/* ==========================================================
   ÉCRANS DIVERS — wizard d'évaluation + bloc historique de
   surcharges accumulées (teams, filtres, dropdowns catégories,
   outils de login test...). Bucket hérité, pas encore
   reclassé finement par écran.
   ========================================================== */

/* =========================================================
   ETAPES/ETAPES de l'EVALUATION
   ========================================================= */
/* #stepCard {
    position: relative;
    overflow: hidden;
    padding-top: 120px;
    background: white;
    border-radius: 18px;
} */

/* #stepCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 110px;
    background: var(--gradient-main);
} */

/* #stepCard .muted {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    z-index: 1;
}

#stepCard .step-title {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    z-index: 2;
    width: calc(100% - 40px);
    line-height: 1.2;
}

#stepCard .step-badge {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto 10px auto;
    z-index: 1;
}


.step-badge {
    display: inline-block;
    background: #efe2bf;
    color: #293a5f;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 8px;
} */

.team-badge {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.team-badge.brouillon {
    background: #efe2bf;
    color: #293a5f;
}

.team-badge.soumis {
    background: #f59e0b;
    color: white;
}

.team-badge.valide {
    background: #16a34a;
    color: white;
}


.team-deuxcolonnes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.avancement-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    color: #293a5f;
    font-size: 15px;
    font-weight: 800;
}

.team-summary-card .summary-label {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 6px;
}

.team-summary-card .summary-value {
    font-size: 22px;
    font-weight: bold;
    color: #293a5f;
}

.score-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* =========================
   ECRAN EVALUATION
   ========================= */

.row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 2px;
}

.label {
    font-weight: 700;
    margin-bottom: 1px;
    color: #293a5f;
    font-size: 18px;
}

.helper {
    display: block;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.15;
}


.range-wrap {
    position: relative;
    margin-top: 6px;
    margin-bottom: 0;
}

/* Curseur "pas encore noté" (js/evaluation.js) : grisé (style seulement,
   reste interactif) — le premier déplacement l'active et pose la note en un
   seul geste (updateValue() retire la classe). */
.range-locked {
    opacity: 0.4;
    filter: grayscale(1);
}


.reference-marker {
    position: absolute;
    top: 24px;
    transform: translateX(-50%);
    pointer-events: none;
    text-align: center;
}

.reference-triangle {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #1b3155;
    margin: auto;
}

.reference-value {
    font-size: 11px;
    font-weight: 700;
    color: #1b3155;
    margin-top: 2px;
    line-height: 1;
}

/* =========================
   MANQUANTS DE stylesOld
   ========================= */

/* Hover plus sombre bouton principal */
.primary:hover {
    background: #0d1c34;
}

/* Bouton success (absent du nouveau) */
.success {
    background: #127a55;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 12px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

/* Grid 3 boutons (absent) */
.buttons-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

/* Valeur mise en avant (absent) */
.big-value {
    font-weight: 700;
    margin-bottom: 4px;
    color: #293a5f;
}

/* Graph hauteur (absent) */
.chart-wrap {
    height: 320px;
}

/* Modal overlay version ancienne (différente) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 999;
}

.modal-overlay.show {
    display: flex;
}

/* .modal {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
} */

.modal-title {
    margin: 0 0 8px;
    font-size: 22px;
    color: #293a5f;
    text-align: center;
}

.modal-text {
    margin: 0 0 16px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
}

/* Table équipe (absente du nouveau) */
.team-table-wrapper {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.team-table,
.team-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

.team-table-head {
    background: #eef2f7;
    color: #293a5f;
    font-weight: bold;
    border-bottom: 1px solid #e5e7eb;
}

.team-table-head>div,
.team-row>div {
    padding: 12px 10px;
    font-size: 14px;
    word-break: break-word;
}

.team-row {
    border-bottom: 1px solid #edf1f7;
}

.team-row:last-child {
    border-bottom: none;
}

.team-row:nth-child(even) {
    background: #fafcff;
}

/* Status pills (absent) */
.status-pill {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    white-space: nowrap;
}

.status-brouillon {
    background: #fef3c7;
    color: #92400e;
}

.status-valide {
    background: #dcfce7;
    color: #166534;
}

.status-none {
    background: #f3f4f6;
    color: #6b7280;
}

/* Team header (absent) */
.team-header-info {
    margin-top: 8px;
}

.team-top-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Version readonly coach (absent) */
.readonly-coach-list {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 10px 14px;
    background: #f3f4f6;
    color: #374151;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.readonly-coach-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
}

.readonly-coach-role,
.readonly-coach-name {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: #374151;
}

.readonly-coach-role {
    text-align: left;
    color: #6b7280;
}

/* Boutons flottants (absent) */
.action-card {
    position: relative;
    padding-bottom: 140px;
}

/* Essai tuiles (2026-08-06) : home admin + home coach uniquement (seuls
   écrans utilisant .floatingButton, cf. grep) — .buttons-1 n'est pas concerné.
   (2026-09-09 : ce commentaire citait aussi un bouton « Entraîneur suivant pour
   test » de partials/home.html, supprimé depuis avec tout l'outil de switch
   entraîneur. Le seul .buttons-1 restant côté home est celui du bouton Saisons
   dans partials/admin.html, cf. #homeScreen .buttons-1 plus bas.) */
.floatingButton {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 3px;
}

/* Home admin (#roleLabel est display:none, cf. base.css) : les tuiles se
   retrouvaient collées tout en haut de la carte sans lui. Toujours 4
   colonnes (même taille de tuile que la home coach) : le regroupement
   Catégories/Entraîneurs/Joueurs — Créneaux/Tests vient de
   .floatingButton-separator dans partials/admin.html (force un saut de
   ligne), pas d'un nombre de colonnes différent. */
#homeScreen .floatingButton {
    margin-top: 20px;
}

/* #homeScreen en colonne flex (.card garantit déjà min-height = plein
   écran, cf. base.css) pour pouvoir pousser le bouton Saisons tout en bas
   de la carte via margin-top:auto sur son wrapper — le distingue encore
   plus des tuiles de gestion courante au-dessus (cf. .buttons-1
   ci-dessous). */
#homeScreen {
    display: flex;
    flex-direction: column;
}

#homeScreen .buttons-1 {
    margin-top: auto;
}

/* Plus étroit que la largeur pleine par défaut de .buttons-1 (grid 1
   colonne) — même logique que .buttons-1 .danger plus bas, mais scopé à ce
   bouton précis plutôt qu'à .buttons-1 > .secondary en général. Même dégradé
   orange que #btnAdminAccess (cf. base.css) : couleur déjà réservée dans
   l'app aux actions/accès sensibles, cohérent pour une action aussi
   impactante que la bascule de saison. */
#btnAdminSaisons {
    width: 50%;
    justify-self: center;
    background: linear-gradient(180deg, #f97316, #c2410c);
}

#btnAdminSaisons:hover {
    background: linear-gradient(180deg, #c2410c, #c2410c);
}

/* Seule sur sa ligne (span pleine largeur des 4 colonnes = nouvelle ligne
   forcée), alignée à gauche : justify-self:start + une largeur réduite
   (18%, pas 25%) évite qu'elle s'étire sur toute la largeur de la grille via
   le stretch par défaut des grid items. */
#btnAdminAccess {
    grid-column: 1 / -1;
    justify-self: start;
    width: 18%;
}

/* Evaluations/Test : tuiles carrées normales (comme Matchs/Entraînements...),
   pas de span forcé — c'est #btnAdminAccessSeparator juste au-dessus (span
   pleine largeur) qui les pousse déjà sur une nouvelle ligne. */

.floatingButton-separator {
    grid-column: 1 / -1;
    height: 1px;
    background: #b8c0cc;
    margin: 6px 0;
}

.floatingButton button {
    /* min-width:0 : par défaut une cellule de grid ne rétrécit pas sous la
       taille min-content de son contenu (ex. un mot insécable dans le
       libellé) — ça poussait la largeur de colonne au-delà de son 1fr et
       faisait déborder toute la ligne à droite. */
    min-width: 0;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    padding: 4px;
    font-size: 10px;
    line-height: 1.2;
}

.floatingButton button svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Navigation étapes (absent) */
.step-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

.step-nav .nav-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    font-weight: 700;
}

/* Danger hover (manquant) */
.danger:hover {
    background: #FF4D00;
}

/* Compétence pas encore notée (js/evaluation.js:renderEvaluationScreen) —
   même pattern que .absence-row-missing/.convocation-row-missing (fond
   rose/rouge pâle) pour rester cohérent avec le reste de l'app. */
.not-rated {
    background: #fef2f2;
    border-color: #dc2626;
}

/* Joueur sans évaluation complète (partials/evaluation.html) — même pattern
   fond/bordure rose que .not-rated/.absence-row-missing/.convocation-row-missing. */
.row-incomplete {
    background: #fef2f2;
    border-color: #dc2626;
}

/* #teamPlayersList n'utilise pas .table-like (pas de gap) : les .list-row se
   touchaient bord à bord. */
#teamPlayersList .list-row {
    margin-bottom: 8px;
}

.score-badge {
    background: #eef2f7;
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 11px;
    color: #293a5f;
    display: inline-block;
    /* Largeur fixe (assez pour "10 / 10", le contenu le plus large) : sans
       ça, passer de "-" à une note chiffrée élargit la pastille, ce qui
       réduit l'espace dispo pour .helper à côté et le fait passer sur 2
       lignes d'un coup à l'activation du curseur. */
    min-width: 46px;
    text-align: center;
    position: static;
    transform: none;
}

/* Couleur selon la note (js/app.js:scoreColorClass) — 0-2 rouge, 3-5 orange,
   6-7 jaune/ambre, 8-10 vert. */
.score-badge.tier-faible {
    background: #dc2626;
    color: white;
}

.score-badge.tier-moyen {
    background: #f59e0b;
    color: white;
}

.score-badge.tier-bon {
    background: #bfdbfe;
    color: #1e40af;
}

.score-badge.tier-excellent {
    background: #127a55;
    color: white;
}

.filters-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: start;
}

/* Barre de filtres d'une liste : champ de recherche (prend l'espace restant)
   + éventuels selects de filtre, sur une seule ligne, sans label visible
   (placeholder + aria-label suffisent). Enroule si ça déborde : la recherche
   passe pleine largeur et les selects descendent en dessous. */
.list-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.list-filters-row input {
    flex: 1;
    min-width: 12rem;
}

.list-filters-row select {
    flex: none;
    width: auto;
}

/* Ligne d'info sous la barre de filtres (ex. "Total : 25"), recherche texte
   exclue du décompte. */
.list-filters-count {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
    text-align: center;
}

.filters-row .field {
    display: flex;
    flex-direction: column;
}

.filters-row .field label {
    margin-bottom: 6px;
}

.filters-row .field-inline {
    flex-direction: row;
    align-items: center;
}

.filters-row .field-inline label {
    margin-bottom: 0;
}

.fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fields-row .field {
    display: flex;
    flex-direction: column;
}

.field select,
.field input {
    width: 100%;
    box-sizing: border-box;
}

.ligne-joueur {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.joueur-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.joueur-checkbox {
    width: 18px;
    height: 18px;
}

/* #joueursScreen .field button {
    width: 100%;
    height: 54px;
    /* même hauteur que les inputs */

/* .fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
}

.fields-row .field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fields-row .field select,
.fields-row .field input,
.fields-row .field button {
    width: 100%;
    box-sizing: border-box;
}

.fields-row .field button {
    margin-bottom: 14px;
}
} */

.select-all-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding-left: 12px;
    width: auto;
}

.select-all-row label {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #293a5f;
    cursor: pointer;
}

.joueur-checkbox {
    width: 22px;
    height: 22px;
    margin: 0;
    flex: 0 0 22px;
    accent-color: #293a5f;
    cursor: pointer;
}

/* =========================================================
   MENU DEROULANT CATEGORIES (checkboxes) - fiches coach/créneau
   ========================================================= */

.categories-dropdown {
    position: relative;
}

/* Le .box-card qui enveloppe le formulaire coach a overflow:hidden (coins
   arrondis) — ça rogne le panneau du dropdown catégories, positionné en
   absolute et plus haut que la place restante sous son bouton. On lève le
   clip le temps que le dropdown est ouvert (cf. :class dans coachs.html). */
.box-card.overflow-visible {
    overflow: visible;
}

.categories-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

.categories-dropdown-trigger span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.categories-dropdown-caret {
    flex: 0 0 auto;
    opacity: 0.7;
}

.categories-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
}

.categories-dropdown-panel .select-all-row {
    padding: 6px 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
}

.categories-dropdown-panel .list-row {
    padding: 4px 12px;
}

.login-test-tools {
    margin-bottom: 16px;
}

.login-test-tools label,
.login-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.login-test-tools select,
.login-form input {
    width: 100%;
    max-width: 320px;
    padding: 10px;
    margin-bottom: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.deuxlignes-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.deuxlignes-row .list-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.deuxlignes-row .list-actions {
    display: flex;
    align-items: center;
    /* centre verticalement */
}

/* Carte de cas suspect (aperçu import joueurs) : les boutons de résolution
   sont des libellés complets, trop larges pour la colonne "auto" de
   .list-row/.deuxlignes-row — on les passe donc en dessous du récap plutôt
   qu'à droite. */
.import-suspect-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 8px;
}

.import-suspect-row .list-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.import-suspect-row .list-actions {
    margin-left: 0;
    flex-wrap: wrap;
}

.coach-item,
.coach-item div {
    color: #293a5f;
    font-weight: 600;
}

.categorie-block {
    margin-top: 10px;
}

.categorie-block .small-title {
    margin-bottom: 8px;
}

.competence-help {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.25;
}

#evalConfigRecoInput {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

#competenceAideInput {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* =========================
   ÉCRAN ÉQUIPES
   ========================= */

.equipe-row {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 8px;
}

/* Nom à gauche, bouton Calendrier à droite, sur une seule ligne. `gap` +
   `flex-wrap` plutôt qu'un simple space-between : sur un écran étroit avec un
   nom d'équipe long, le bouton passe à la ligne au lieu d'écraser le nom. */
.equipe-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    text-align: left;
}

/* margin-left:auto pour que le bouton reste collé à droite même après un
   passage à la ligne (où il serait sinon seul, donc aligné à gauche). */
.equipe-header-actions {
    margin-left: auto;
}

.equipe-header-actions .secondary {
    white-space: nowrap;
    padding: 8px 18px;
}

.equipe-name-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.equipe-split {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.equipe-col-matchs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    align-items: stretch;
    text-align: center;
    width: 100%;
}

.equipe-next-match-title {
    margin: 3px 0 3px 0;
    color: #293a5f;
    font-size: 15px;
    font-weight: 600;
}

.equipe-next-match-info {
    font-size: 13px;
    color: #293a5f;
}

/* Même violet que le bouton "Administration" de la home (#btnAdminAccess). */
#homeScreen .big-title {
    background: linear-gradient(180deg, #7c3aed, #5b21b6);
}

#importJoueursResume {
    margin: 10px 0;
}