/* /public_html/assets/css/ui-sex-toggle.css
   ==============================================
   SEX SEGMENTED TOGGLE (3 positions) — M / U / F
   Repose sur le composant .segmented-toggle existant
   (comme les feuilles de présence), et ajoute juste
   les couleurs + glow.

   Markup attendu :
   <div class="segmented-toggle segmented-toggle--compact sex-seg-toggle" data-sex-toggle>
     <button type="button" class="segmented-toggle-btn sex-seg-btn" data-sex="M" aria-label="Garçon">
       <i class="bi bi-gender-male"></i>
     </button>
     <button type="button" class="segmented-toggle-btn sex-seg-btn" data-sex="U" aria-label="Non renseigné">
       <i class="bi bi-question-lg"></i>
     </button>
     <button type="button" class="segmented-toggle-btn sex-seg-btn" data-sex="F" aria-label="Fille">
       <i class="bi bi-gender-female"></i>
     </button>
   </div>

   + hidden input:
   <input type="hidden" name="sex" value="U" data-sex-input>
   ============================================== */

.sex-seg-toggle {
  --sex-male:   #38bdf8; /* sky-400 */
  --sex-female: #fb7185; /* rose-400 */
  --sex-unk:    #94a3b8; /* slate-400 */
  
  display: inline-flex;
  width: fit-content;           /* shrink-wrap */
  max-width: 100%;

  align-items: center;
  gap: 0;
}

.sex-seg-toggle .sex-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  font-weight: 800; /* "gras" pour l’icône (via currentColor) */
  line-height: 1;
  flex: 0 0 auto;   /* pas de stretch */
}

.sex-seg-toggle .sex-seg-btn i {
  font-size: 1.05rem;
  font-weight: 900;
  transform: translateY(-0.5px);
}

/* couleurs de base (non-actif) */
.sex-seg-toggle .sex-seg-btn[data-sex="M"] { color: color-mix(in srgb, var(--sex-male) 72%, var(--theme-text) 28%); }
.sex-seg-toggle .sex-seg-btn[data-sex="F"] { color: color-mix(in srgb, var(--sex-female) 72%, var(--theme-text) 28%); }
.sex-seg-toggle .sex-seg-btn[data-sex="U"] { color: color-mix(in srgb, var(--sex-unk) 72%, var(--theme-text) 28%); }

/* états actifs (style "pills" comme attendance) */
.sex-seg-toggle .sex-seg-btn.is-active[data-sex="M"] {
  background: color-mix(in srgb, var(--sex-male) 22%, transparent);
  border-color: color-mix(in srgb, var(--sex-male) 60%, transparent);
  color: var(--sex-male);
}

.sex-seg-toggle .sex-seg-btn.is-active[data-sex="F"] {
  background: color-mix(in srgb, var(--sex-female) 22%, transparent);
  border-color: color-mix(in srgb, var(--sex-female) 60%, transparent);
  color: var(--sex-female);
}

.sex-seg-toggle .sex-seg-btn.is-active[data-sex="U"] {
  background: color-mix(in srgb, var(--sex-unk) 20%, transparent);
  border-color: color-mix(in srgb, var(--sex-unk) 55%, transparent);
  color: #e5e7eb;
}

/* glow plus fort en dark */
html[data-theme="dark"] .sex-seg-toggle .sex-seg-btn.is-active[data-sex="M"] {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 10px 22px color-mix(in srgb, var(--sex-male) 30%, transparent),
    0 0 22px color-mix(in srgb, var(--sex-male) 42%, transparent);
}

html[data-theme="dark"] .sex-seg-toggle .sex-seg-btn.is-active[data-sex="F"] {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 10px 22px color-mix(in srgb, var(--sex-female) 28%, transparent),
    0 0 22px color-mix(in srgb, var(--sex-female) 42%, transparent);
}

html[data-theme="dark"] .sex-seg-toggle .sex-seg-btn.is-active[data-sex="U"] {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 10px 20px rgba(148,163,184,0.18);
}

/* focus clavier */
.sex-seg-toggle .sex-seg-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--theme-primary) 60%, transparent);
  outline-offset: 2px;
}