/**
 * Style des boutons du plugin Admin Management (Club de Judo).
 * Créé le 2026-09-16 pour unifier l'apparence de tous les boutons du
 * plugin (auparavant définie au cas par cas, en style inline, tantôt
 * absente) sous une seule classe .admin-button.
 */
.admin-button {
  /* !important sur les 3 : sans ça, une règle externe (thème ou
     Customizer, origine jamais retrouvée) gagnait par endroits selon
     le contexte de la page, d'où un rouge tantôt "red", tantôt
     #e22658 selon les écrans. Les quelques boutons volontairement
     verts (ex: "Sauvegarder et me Ré-inscrire") passent leur propre
     style inline en !important pour continuer à prendre le dessus
     ici : inline + !important bat toujours feuille de style +
     !important, quelle que soit la spécificité. */
  background-color: red !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 6px 14px;
}

.admin-button:hover {
  text-decoration: none !important;
  color: #000 !important;
}

/**
 * Bandeaux de boutons multi-lignes/colonnes (ex: liste des membres,
 * filtres par club/tri) - 2026-09-16. Remplace une mise en page en
 * <table> (colonnes figées, largeurs incohérentes d'une ligne à
 * l'autre) par une disposition souple : les boutons s'alignent
 * naturellement les uns à côté des autres et passent à la ligne
 * suivante dès que la largeur disponible ne suffit plus, chacun gardant
 * la largeur adaptée à son propre texte.
 */
.admin-groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-label-groupe {
  font-weight: 900;
  color: green;
  margin-right: 6px;
}

/**
 * Filtres de la liste des membres (2026-10-15) : 3 listes déroulantes
 * (Action, Tri, Club) + bouton "Appliquer", à la place des 3 lignes de
 * boutons. Chaque libellé reste collé à sa liste ; le tout passe à la
 * ligne sur petit écran grâce à .admin-groupe-boutons.
 */
.admin-filtre {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.admin-filtre select {
  width: auto;
  min-width: 170px;
  padding: 4px 8px;
}

.admin-filtre-aide {
  font-size: 0.75em;
}

/**
 * Liste de cases à cocher sur 3 colonnes (ex: choix des professeurs
 * dans la Liste d'émargement) - 2026-09-16. Une liste linéaire (1 par
 * ligne) prend inutilement de la place en hauteur dès qu'il y a
 * plusieurs professeurs.
 */
.admin-grille-3-colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
}

/**
 * Groupe de choix radio/checkbox sur une seule ligne (ex : "Comment
 * avez vous connu le Club de Judo ?") - 2026-09-16. Passe à la ligne
 * suivante si la largeur ne suffit plus (mobile), sinon les 4 choix
 * restent côte à côte.
 */
.admin-choix-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

/**
 * Alignement radio/checkbox + libellé sur une même ligne dans le
 * formulaire d'inscription - 2026-09-16. Une règle externe (même
 * origine non identifiée que pour .admin-button ci-dessus) fait
 * passer les <input type="radio"/"checkbox"> en display:block, ce qui
 * les envoie sur leur propre ligne, la phrase du <label> associé
 * atterrissant sur la ligne suivante (ex : "Pratique de la
 * compétition"). !important pour reprendre la main, comme pour les
 * boutons.
 */
#ajouter-membre input[type="radio"],
#ajouter-membre input[type="checkbox"] {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 4px;
}

/**
 * Validation en direct du formulaire d'inscription (voir
 * js/validation-formulaire.js) - 2026-09-16.
 */
.admin-champ-invalide {
  border: 1px solid red !important;
}

.admin-erreur-champ {
  display: block;
  color: red;
  font-size: 0.85em;
  margin-top: 2px;
}

/**
 * Écran "Gérer les infos des Clubs" (Liste des Clubs) - 2026-09-16.
 * Avant : chaque club affichait ses 2 lignes d'en-tête + 2 lignes de
 * données en permanence (un <table> complet par club), ce qui rendait
 * la page illisible dès qu'il y avait plusieurs clubs (en-têtes
 * répétés à chaque club). Passage à un <details>/<summary> par club :
 * une seule ligne d'en-tête (Super Club / Club) reste visible en haut,
 * puis chaque club se déplie/replie individuellement au clic pour
 * révéler son tableau de détail (inchangé par ailleurs).
 */
.admin-entete-clubs {
  display: flex;
  font-weight: bold;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px 12px;
}

.admin-entete-clubs span {
  flex: 1;
}

.admin-details-club {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 24px !important;
}

.admin-summary-club {
  display: flex;
  cursor: pointer;
  padding: 8px 12px;
}

.admin-summary-club span {
  flex: 1;
}

.admin-details-club[open] > .admin-summary-club {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
}

/**
 * Histogramme "Comment avez-vous connu le Club de Judo ?" (écran
 * [stats-comment-connu]) - 2026-09-26. Barres en CSS pur (largeur en
 * %, pas de bibliothèque de graphiques externe).
 */
.admin-ligne-histogramme {
  margin-bottom: 10px;
}

.admin-libelle-histogramme {
  font-weight: bold;
  margin-bottom: 2px;
}

.admin-barre-histogramme {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.admin-barre-histogramme-remplissage {
  background-color: red;
  color: white;
  white-space: nowrap;
  padding: 4px 8px;
  min-width: fit-content;
  box-sizing: border-box;
}

/**
 * Fiche d'un membre dans la liste des membres (2026-10-16). Bandeau de
 * boutons d'action (.admin-groupe-boutons), puis un tableau de 4 blocs
 * (titre + contenu) : Élève toujours affiché, Parents / Facturation /
 * Club et Section repliables au clic sur le titre.
 */
.admin-fiche-membre {
  width: 100%;
  font-size: 0.7em !important;
}

.admin-fiche-titre {
  text-align: left;
  background-color: #f0f0f0;
}

.admin-fiche-bascule {
  cursor: pointer;
  user-select: none;
}

/* Le formulaire "Relancer Email" s'aligne sans marge sur les autres boutons. */
.admin-fiche-boutons form {
  margin: 0;
}

/* Pas de blanc avant ni après le petit tableau de chaque bloc : le thème
   ajoute une marge sous les tableaux et un retrait dans les cellules. */
.admin-fiche-membre > tbody > tr > td {
  padding: 0 !important;
}

.admin-fiche-membre td > table {
  margin: 0 !important;
}

/* Bouton d'action inactif (fiche membre) : présent pour garder la même
   rangée de boutons pour tous, mais grisé et non cliquable. */
.admin-button.admin-button-inactif,
.admin-button.admin-button-inactif:hover {
  background-color: #c8c8c8 !important;
  color: #707070 !important;
  cursor: not-allowed;
}

/* Boutons de la fiche membre plus compacts, pour que les 9 tiennent sur
   une seule ligne (ils passent quand même à la ligne sur petit écran). */
.admin-fiche-boutons {
  gap: 4px;
}

.admin-fiche-boutons .admin-button {
  font-size: 0.8em !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}