/* 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 — contenu dans le socle TimeEcosModal ===== */
/* Le cadre (en-tête, croix, pied, animations) est fourni par TimeEcosModal.
   Ici on ne style que le CONTENU injecté dans le corps de la modale :
   barre d'étapes + étapes. */
.regwiz-content { display: flex; flex-direction: column; gap: .5rem; }
.regwiz-body { min-height: 360px; padding-top: .25rem; }
.regwiz-body .step { animation: regwizFade .18s ease both; }
@keyframes regwizFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.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; background: rgba(8,51,68,.1); color: #083344; padding: 0 .45rem; border-radius: 999px; font-weight: 700; }

/* Helpers de mise en forme du wizard (remplacent les anciens style="" inline) */
.regwiz-step-intro { margin: .25rem 0 .75rem 0; }
.regwiz-wl-actions { margin-top: .5rem; }
.regwiz-q-counter { margin-bottom: .25rem; }
.regwiz-q-text { margin-bottom: .75rem; }
.regwiz-summary { padding-left: 1rem; }
.regwiz-summary-sub { margin: .25rem 0 0 .75rem; list-style: disc; }
/* Précision sous une ligne de récap (ex. attribution du numéro de passage) : ton secondaire. */
.regwiz-summary-hint { list-style: none; margin-left: -1rem; color: var(--color-text-muted, #6b7280); font-size: .875rem; }

/* Avertissement (icône + texte) : icône fixe en haut-gauche, texte qui s'enroule.
   Classe dédiée pour ne PAS hériter de la règle des boutons `.regwiz-body .flex`. */
.regwiz-hint { display: flex; align-items: flex-start; gap: .5rem; margin-top: .75rem; }
.regwiz-hint .lucide-icon { flex: 0 0 auto; margin-top: .15rem; }
.regwiz-hint > span { flex: 1 1 auto; min-width: 0; }

/* Étape « Votre créneau » : liste des rotations sélectionnables (numéro + horaires + places). */
.regwiz-rotation-list { display: flex; flex-direction: column; gap: .5rem; margin: .25rem 0 .5rem 0; }
.regwiz-rotation-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  width: 100%;
  text-align: left;
  padding: .6rem .85rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 10px;
  background: var(--surface-1, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.regwiz-rotation-item:hover:not([disabled]) { border-color: var(--accent, #00AFB5); }
.regwiz-rotation-item.is-selected { border-color: var(--accent, #00AFB5); border-width: 2px; background: var(--accent-soft, rgba(0,175,181,.08)); }
.regwiz-rotation-item[disabled] { opacity: .55; cursor: not-allowed; }
.regwiz-rotation-title { font-weight: 600; }
.regwiz-rotation-time { color: var(--text-secondary, #6b7280); font-size: .9rem; }
.regwiz-rotation-meta { font-size: .8rem; font-weight: 600; color: var(--accent-strong, #0f6e56); white-space: nowrap; }
.regwiz-rotation-meta.is-full { color: var(--text-secondary, #6b7280); font-weight: 500; }
.regwiz-rotation-actions { margin-top: .75rem; }
@media (max-width: 600px) {
  .regwiz-rotation-item { grid-template-columns: 1fr auto; }
  .regwiz-rotation-time { grid-column: 1 / -1; }
}

/* Boutons d'étape (ex. Tuteur / Étudiant) : agencement + compacité */
.regwiz-body .flex { display: flex; align-items: stretch; gap: .6rem; flex-wrap: wrap; }
.regwiz-body .gap-2 { gap: .6rem; }
.regwiz-body .btn { padding: .65rem 1rem; font-size: .95rem; }

/* Mobile : empiler les boutons d'étape, n'afficher que le numéro des pastilles */
@media (max-width: 600px) {
  .regwiz-body .flex { flex-direction: column; }
  .regwiz-body .btn { width: 100%; }
}
@media (max-width: 768px) {
  .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; }
}