/* /public_html/assets/css/ui-role-toggle.css */

  /* ==============================================
   ROLE SEGMENTED TOGGLE (2 positions) — guardian / student
   Repose sur .segmented-toggle existant
   Markup attendu :
   <div class="segmented-toggle segmented-toggle--compact role-seg-toggle" data-auth-role-toggle>
     <button type="button" class="segmented-toggle-btn role-seg-btn is-active" data-role-value="guardian">
       <i class="bi bi-people"></i><span>Responsable</span>
     </button>
     <button type="button" class="segmented-toggle-btn role-seg-btn" data-role-value="student">
       <i class="bi bi-person"></i><span>Élève</span>
     </button>
   </div>
   + hidden input: <input type="hidden" name="role" ...>
   ============================================== */

.role-seg-toggle{
  --role-guardian: #4ade80; /* vert */
  --role-student:  #38bdf8; /* bleu */

  display: inline-flex;
  width: fit-content;
  max-width: 100%;
}

.role-seg-toggle .role-seg-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;

  min-height: 44px;
  padding-inline: 0.85rem;

  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

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

.role-seg-toggle .role-seg-btn span{
  font-size: 0.92rem;
  white-space: nowrap;
}

/* couleurs de base */
.role-seg-toggle .role-seg-btn[data-role-value="guardian"]{
  color: color-mix(in srgb, var(--role-guardian) 72%, var(--theme-text) 28%);
}
.role-seg-toggle .role-seg-btn[data-role-value="student"]{
  color: color-mix(in srgb, var(--role-student) 72%, var(--theme-text) 28%);
}

/* états actifs */
.role-seg-toggle .role-seg-btn.is-active[data-role-value="guardian"]{
  background: color-mix(in srgb, var(--role-guardian) 22%, transparent);
  border-color: color-mix(in srgb, var(--role-guardian) 60%, transparent);
  color: var(--role-guardian);
}

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

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

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

/* mobile: labels plus compacts si besoin */
@media (max-width: 420px){
  .role-seg-toggle .role-seg-btn span{
    font-size: 0.86rem;
  }
}