/* Overlay d'inscription (dashboard)
   Aligne les couleurs et espacements sur theme.css et buttons.css */

/* Conteneur plein écran */
#first-registration-overlay.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh; /* garantir la hauteur viewport mobile (barres d'adresse dynamiques) */
  background: var(--bg, #EEF6FB);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto; /* permettre le scroll quand le contenu dépasse */
  padding: 1rem; /* espace pour éviter que le contenu colle aux bords sur mobile */
  scrollbar-gutter: stable; /* évite le décalage asymétrique dû à la scrollbar */
}

/* Carte centrale */
#first-registration-overlay .overlay-content {
  max-width: 560px;
  width: min(560px, 95%);
  margin: 0 auto; /* centre horizontalement dans l'overlay */
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,.15));
  padding: 1.5rem;
  max-height: calc(100dvh - 2rem); /* 2rem = padding overlay */
  overflow: auto; /* défilement interne si nécessaire */
  box-sizing: border-box;
}

/* Titres */
#first-registration-overlay .overlay-title {
  color: var(--title-overlay, var(--brand, #004777));
  margin: 0 0 .25rem 0;
}

/* Sous-titre et messages */
#first-registration-overlay .overlay-subtitle {
  color: var(--brand, #004777);
  font-size: 1rem;
}

#first-registration-overlay .success-icon {
  font-size: 3rem;
  color: var(--brand, #004777);
  margin-bottom: 1rem;
}

/* Checkmark */
#first-registration-overlay .checkmark-icon {
  width: 60px;
  height: 60px;
  border: 3px solid var(--brand, #004777);
  border-radius: 50%;
  margin: 0 auto 1rem;
  position: relative;
  background: var(--brand, #004777);
}

#first-registration-overlay .checkmark-icon::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 10px;
  width: 15px;
  height: 25px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Actions centrées */
#first-registration-overlay .success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* Les boutons utilisent .btn de buttons.css */
#first-registration-overlay .success-actions .btn {
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#first-registration-overlay .success-message {
  color: var(--brand, #004777);
  margin-bottom: 1rem;
}

/* Harmoniser le sous-titre de succès avec la marque sur l'overlay */
#first-registration-overlay .success-title {
  color: var(--brand, #004777);
}

/* Responsif */
@media (max-width: 768px) {
  #first-registration-overlay.overlay {
    display: flex;              /* assure le modèle flex */
    justify-content: center;    /* centre horizontalement */
    align-items: flex-start;    /* colle en haut (tu peux mettre center si tu veux centrer verticalement) */
    padding: 1rem;              /* respirer un peu sur mobile */
    box-sizing: border-box;
  }

  /* Centrage vertical explicite pour l'état succès (mobile) */
  #first-registration-overlay.overlay.overlay--center-mobile {
    align-items: center;
  }

  #first-registration-overlay .overlay-content {
    width: 95%;                 /* largeur max 95% */
    max-width: 560px;           /* limite desktop */
    margin: 0 auto;             /* garde centré si jamais */
    padding: 1.25rem;
  }
}

/* ===== Modales génériques Time‑ECOS ===== */
.te-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483000; /* au-dessus du footer */
  padding: 16px; /* respiration en mobile */
  backdrop-filter: blur(2px);
}

.te-modal-dialog {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,.15));
  width: min(640px, 96%);
  max-height: 86vh;
  overflow: auto;
  padding: 20px;
}

@media (max-width: 768px) {
  .te-modal-dialog { width: 96%; padding: 16px; }
}

/* ===== Modale infos station (dashboard) ===== */
#station-info-modal .station-modal {
  padding: 0; /* header séparé */
}
#station-info-modal .te-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
#station-info-modal #station-info-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text, #0f172a);
}
#station-info-modal #station-info-body {
  padding: 12px 16px 16px;
}
#station-info-modal .modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line, #e5e7eb);
  background: #fff;
  color: var(--muted, #64748b);
  cursor: pointer;
}
#station-info-modal .modal-close:hover { background: rgba(0,0,0,.05); }

/* Lignes de rôles plus lisibles */
#station-info-modal .station-roles {
  display: grid;
  gap: 8px;
}
#station-info-modal .station-role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--accent, #0ea5e9) 6%, #fff 94%);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 8px 10px;
}
#station-info-modal .station-role-value { color: var(--text, #0f172a); }

/* ===== Modale infos salle (dashboard) ===== */
#room-info-modal .room-modal { padding: 0; }
#room-info-modal .te-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line, #e5e7eb);
}
#room-info-modal #room-info-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
#room-info-modal .modal-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line, #e5e7eb);
  background: #fff; color: var(--muted, #64748b); cursor: pointer;
}
#room-info-modal .modal-close:hover { background: rgba(0,0,0,.05); }
#room-info-modal #room-info-body { padding: 12px 16px 16px; }
#room-info-modal .room-info-list { display: grid; gap: 8px; }
#room-info-modal .room-info-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 6px;
  background: color-mix(in srgb, var(--accent, #0ea5e9) 6%, #fff 94%);
  border: 1px solid var(--line, #e5e7eb); border-radius: 10px; padding: 8px 10px;
}
#room-info-modal .room-info-label { font-weight: 600; color: var(--text, #0f172a); }
#room-info-modal .room-info-value { color: var(--text, #0f172a); }

/* ===== Modale texte station (dashboard) ===== */
#station-text-modal .text-modal { padding: 0; }
#station-text-modal .te-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line, #e5e7eb);
}
#station-text-modal #station-text-title { margin: 0; display: flex; align-items: center; gap: 8px; }
#station-text-modal .modal-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line, #e5e7eb);
  background: #fff; color: var(--muted, #64748b); cursor: pointer;
}
#station-text-modal .modal-close:hover { background: rgba(0,0,0,.05); }
#station-text-modal #station-text-body {
  padding: 12px 16px 16px; line-height: 1.5; color: var(--text, #0f172a);
}
#station-text-modal #station-text-body h1,
#station-text-modal #station-text-body h2,
#station-text-modal #station-text-body h3 { margin: 12px 0 8px; }

/* ===== Registration Wizard (dashboard) ===== */
#registration-wizard-modal.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(0,0,0,.45);
  z-index: 2147483001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box; /* évite le débordement horizontal dû au padding */
  backdrop-filter: blur(2px);
  /* Fade base state (hidden by défaut via .hidden) */
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
#registration-wizard-modal.overlay.is-preparing {
  /* visible visuellement, mais ne bloque pas les clics le temps du premier rendu */
  opacity: 1;
  pointer-events: none;
}
#registration-wizard-modal.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
#registration-wizard-modal .regwiz-modal {
  transform: translateY(6px) scale(.98);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
#registration-wizard-modal.overlay.is-open .regwiz-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#registration-wizard-modal.overlay.is-closing {
  opacity: 0;
}
#registration-wizard-modal.overlay.is-closing .regwiz-modal {
  transform: translateY(6px) scale(.985);
  opacity: 0;
}
#registration-wizard-modal .overlay-content.regwiz-modal {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;              /* centre horizontalement */
  background: var(--surface,#fff);
  border: 1px solid var(--line,#e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,.15));
  padding: 16px;
  box-sizing: border-box;
  max-height: 88vh;
  overflow: auto;
  min-height: 520px;           /* stabilise davantage la hauteur visuelle */
}
.regwiz-header { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .25rem; }
.regwiz-body { min-height: 360px; padding-top: .25rem; }
.regwiz-footer { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.regwiz-progress { display: flex; flex-direction: column; gap: .25rem; }
.regwiz-progress-bar { height: 6px; background: var(--line,#e5e7eb); border-radius: 999px; overflow: hidden; }
.regwiz-progress-fill { height: 100%; background: var(--accent,#0ea5e9); width: 0%; transition: width .25s ease; }
.regwiz-steps { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted,#6b7280); }
.regwiz-step { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent,#0ea5e9) 6%, white 94%); }
.regwiz-step.is-active { background: color-mix(in srgb, var(--accent,#0ea5e9) 18%, white 82%); color: var(--accent-contrast, #0b4d63); }
.regwiz-step .badge { font-size: .72rem; }
.regwiz-step .badge { background: rgba(8,51,68,.1); color: #083344; padding: 0 .45rem; border-radius: 999px; font-weight: 700; }
.regwiz-body .step { animation: regwizFade .18s ease both; }
@keyframes regwizFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* === Boutons de la première étape (choix de rôle) ===
   Le HTML injecte <div class="flex gap-2"> avec deux .btn (Tuteur / Étudiant)
   → on force l'agencement, l'espacement et un rendu plus compact. */
#registration-wizard-modal .regwiz-body .flex {
  display: flex;                 /* s'assure que la classe utilitaire existe */
  align-items: stretch;
  gap: .6rem;                    /* espace entre les boutons */
  flex-wrap: wrap;               /* retour à la ligne si manque d'espace */
}
#registration-wizard-modal .regwiz-body .gap-2 { gap: .6rem; }
#registration-wizard-modal .regwiz-body .btn {
  padding: .65rem 1rem;          /* un peu plus compact que le bouton par défaut */
  font-size: .95rem;
}

/* Footer du wizard: autoriser le wrap et garder un espace constant */
#registration-wizard-modal .regwiz-footer {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

/* Mobile: empiler proprement les deux boutons, largeur 100% */
@media (max-width: 600px) {
  #registration-wizard-modal .regwiz-body .flex { flex-direction: column; }
  #registration-wizard-modal .regwiz-body .btn { width: 100%; }
}

@media (max-width: 768px) {
  #registration-wizard-modal .overlay-content.regwiz-modal { width: calc(100% - 28px); max-width: 720px; margin: 0 auto; padding: 14px; box-sizing: border-box; }
  /* Sur mobile: afficher uniquement le numéro (contraste renforcé) */
  .regwiz-step { padding: .2rem .5rem; }
  .regwiz-step span:last-child { display: none; }
  .regwiz-step .badge { background: color-mix(in srgb, var(--accent,#0ea5e9) 20%, white 80%); color: #083344; padding: 0 .45rem; border-radius: 999px; }
}


@media (max-width: 768px) {
  #registration-wizard-modal.overlay.is-open {
    inset: 0;          /* s'assure que l'overlay couvre bien les 4 bords */
    width: 100%;
    max-width: none;   /* overlay toujours plein écran */
    margin: 0;         /* pas de centrage, couvre tout */
    padding: 14px;     /* respiration sur mobile */
  }
}