/* ============================================
   FICHIER : patched-toggle.css
   VERSION : 2026.08.22
   OBJET   : Styles partagés pour les toggles 3 états
             (❌ / ❓ / ✅).
             - .patch-slider-* : version admin (grande,
               utilisée dans admin.html → gestion jeux)
             - .statut-toggle-* : version compacte
               (utilisée dans ReZoo.html → header, à
               droite du bouton Planning)
   ============================================ */

/* === Toggle slider Patch 3 états (admin — grande version) === */
.patch-slider-toggle {
  flex-shrink: 0;
}
.patch-slider-track {
  position: relative;
  width: 132px;
  height: 34px;
  background-color: #444;
  border: 1px solid #555;
  border-radius: 17px;
  cursor: pointer;
  overflow: hidden;
}
.patch-slider-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  background-color: #e0e0e0;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transition: left 0.25s ease;
  z-index: 2;
}
.patch-slider-thumb[data-pos="0"] { left: 3px; }
.patch-slider-thumb[data-pos="1"] { left: 52px; }
.patch-slider-thumb[data-pos="2"] { left: 101px; }
.patch-slider-options {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
.patch-slider-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  z-index: 1;
}
.patch-slider-option.active {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Couleur de piste selon l'état actif */
.patch-slider-track[data-state="false"] { background-color: #7f1d1d; border-color: #ef4444; }
.patch-slider-track[data-state="null"] { background-color: #713f12; border-color: #f59e0b; }
.patch-slider-track[data-state="true"] { background-color: #14532d; border-color: #22c55e; }

/* === Toggle statut 3 états (header ReZoo — version compacte) === */
.statut-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid #555;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0,0,0,0.35);
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
  vertical-align: middle;
  /* ✅ 2026.08.23 : décalage pour ne pas coller au bouton Planning */
  margin-left: 10px;
  transition: margin 0.3s ease;
}
.statut-toggle button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 1.15em;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.statut-toggle button:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.statut-toggle button.active {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
/* Couleurs d'état actif (bordures) selon le choix fait */
.statut-toggle[data-statut="confirme"] { border-color: #22c55e; }
.statut-toggle[data-statut="a_confirmer"] { border-color: #f59e0b; }
.statut-toggle[data-statut="non_present"] { border-color: #ef4444; }

/* ✅ 2026.08.23 : adaptation aux 3 tailles de la barre de titre
   (mêmes classes .mid / .shrink que les autres boutons du header) */
.page-header.mid .statut-toggle button {
  font-size: 0.85em;
  padding: 2px 5px;
}
.page-header.shrink .statut-toggle {
  margin-left: 4px;
}
.page-header.shrink .statut-toggle button {
  font-size: 0.7em;
  padding: 1px 3px;
}

/* === Toggle 📧 « alertes mail nouveaux jeux » (header ReZoo) === */
.notify-wrapper {
  display: inline-flex;
  align-items: center;
}
.notify-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #555;
  border-radius: 20px;
  background: rgba(0,0,0,0.35);
  padding: 4px 9px;
  font-size: 1.15em;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 8px;
  transition: all 0.15s ease;
}
/* ON : vert (alertes activées, comportement par défaut) */
.notify-toggle.on {
  border-color: #22c55e;
  color: #86efac;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35);
}
/* OFF : grisé, discret */
.notify-toggle.off {
  border-color: #555;
  color: rgba(255,255,255,0.35);
  opacity: 0.75;
}
.notify-toggle:hover {
  background: rgba(255,255,255,0.12);
}
.notify-toggle.off:hover {
  color: rgba(255,255,255,0.75);
}
/* Adaptation aux 3 tailles de barre (comme statut-toggle) */
.page-header.mid .notify-toggle {
  font-size: 0.85em;
  padding: 2px 6px;
}
.page-header.shrink .notify-toggle {
  margin-left: 4px;
  font-size: 0.7em;
  padding: 1px 4px;
}