/**
 * shared/gender-badge.css
 * Composant canonique badge genre. Aligne Rendy CEP.
 * Utilise partout : cards vue grille, vue liste, picker, modales, admin.
 *
 * Usage HTML :
 *   <span class="g-chip g-F">F</span>
 *   <span class="g-chip g-H">H</span>
 *   <span class="g-chip g-E">E</span>
 *   <span class="g-chip g-empty" title="Aucun genre">-</span>    <!-- placeholder -->
 *
 * Ne PAS créer d'autres classes de badge genre. Tout doit passer par .g-chip.
 */

.g-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0;
  font-family: inherit;
  line-height: 1;
  flex-shrink: 0;
  border: none;
  vertical-align: middle;
  transition: transform 0.1s, box-shadow 0.12s, border-color 0.12s;
}
.g-chip.g-F { background: #ec4899; }   /* Femme rose */
.g-chip.g-H { background: #3b82f6; }   /* Homme bleu */
.g-chip.g-E { background: #22c55e; }   /* Enfant vert */
.g-chip.g-U { background: #8b1e3f; }   /* Unisexe bordeaux */
.g-chip.g-empty {
  background: transparent;
  color: #6b6b74;
  border: 1px dashed rgba(255,255,255,0.2);
  cursor: pointer;
}
.g-chip.g-empty:hover {
  border-color: #5dade2;
  color: #5dade2;
}

/* Variantes taille */
.g-chip.g-sm { width: 16px; height: 16px; font-size: 9px; }
.g-chip.g-lg { width: 26px; height: 26px; font-size: 12px; }

/* Bouton cliquable (picker + toggle modal) : ajoute hover feedback */
.g-chip-btn {
  cursor: pointer;
  border: 2px solid transparent;
  background: #2d2d2d;
}
.g-chip-btn:hover { transform: scale(1.1); }
.g-chip-btn.g-F { background: #ec4899; color: #fff; }
.g-chip-btn.g-H { background: #3b82f6; color: #fff; }
.g-chip-btn.g-E { background: #22c55e; color: #fff; }
.g-chip-btn.g-U { background: #8b1e3f; color: #fff; }
.g-chip-btn.g-clear {
  background: #0d0d0d;
  color: #a0a0a8;
  border: 1px dashed rgba(255,255,255,0.2);
}
.g-chip-btn.g-clear:hover { background: rgba(224,74,74,0.15); color: #e04a4a; border-color: #e04a4a; }
.g-chip-btn.active {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.15);
}

/* Wrappers utilitaires */
.g-chip-row { display: inline-flex; align-items: center; gap: 6px; }
.g-chip-row .g-chip { margin: 0; }

/* Label a cote (utilise dans modale Edit segmented toggle) */
.g-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,0.15);
  color: #a0a0a8;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.g-chip-label:hover { background: #1e1e22; color: #e8e8ec; }
.g-chip-label.active { border-color: #fff; }
.g-chip-label.active[data-g="F"] { background: rgba(236,72,153,0.12); border-color: #ec4899; color: #ec4899; }
.g-chip-label.active[data-g="H"] { background: rgba(59,130,246,0.12); border-color: #3b82f6; color: #3b82f6; }
.g-chip-label.active[data-g="E"] { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #22c55e; }
.g-chip-label.active[data-g="U"] { background: rgba(139,30,63,0.15); border-color: #8b1e3f; color: #d94a72; }
.g-chip-label.active[data-g=""] { background: rgba(93,173,226,0.15); border-color: #5dade2; color: #5dade2; }
.g-chip-label[data-g=""] { padding: 8px 16px; }