/* =====================================================================
   OpenGrading – Page de connexion / inscription
   Approche mobile-first : les styles de base ciblent le téléphone,
   puis on enrichit pour tablette (≥ 576px) et ordinateur (≥ 992px).
   La page vit dans la plateforme (rail + en-tête) : tout est rattaché à
   .auth-page et les variables sont préfixées --auth- pour ne pas écraser
   celles de admin.css (--auth-primary, --auth-border, --auth-gutter…).
   ===================================================================== */

/* ===== Variables & surcharge du thème Bootstrap ===== */
.auth-page {
    --bs-primary: #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bs-link-color: #6366f1;
    --bs-link-color-rgb: 99, 102, 241;
    --bs-link-hover-color: #4f46e5;
    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: #1e1b3a;
    --bs-body-bg: #ffffff;
    --bs-border-radius: 0.75rem;

    --auth-primary: #6366f1;
    --auth-primary-dark: #4f46e5;
    --auth-soft: #eef0ff;
    --auth-success: #16a34a;
    --auth-success-bg: #e8f7ee;
    --auth-border: #e5e7eb;

    /* Hauteur unique pour tous les champs et boutons */
    --auth-control-h: 50px;

    /* Marges latérales : serrées sur mobile, plus larges ensuite */
    --auth-gutter: 1.25rem;
}

.auth-page {
    font-size: 1rem; /* 16px sur mobile */
    line-height: 1.5;
}

/* ===== Structure générale ===== */
.auth-row {
    min-height: auto;
}

/* Conteneur interne de chaque colonne (remplace les classes px-/py- Bootstrap) */
.panel-inner {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding: 1.5rem var(--auth-gutter);
    padding-left: max(var(--auth-gutter), env(safe-area-inset-left));
    padding-right: max(var(--auth-gutter), env(safe-area-inset-right));
}

.min-w-0 {
    min-width: 0;
}

/* ===== Boutons (hauteur fixe 50px) ===== */
.btn-primary {
    --bs-btn-bg: #6366f1;
    --bs-btn-border-color: #6366f1;
    --bs-btn-hover-bg: #4f46e5;
    --bs-btn-hover-border-color: #4f46e5;
    --bs-btn-active-bg: #4338ca;
    --bs-btn-active-border-color: #4338ca;
    --bs-btn-focus-shadow-rgb: 99, 102, 241;
    --bs-btn-border-radius: 0.6rem;
    font-size: 1rem;
}

/* Bouton secondaire « Retour » / « Annuler » */
.btn-back {
    --bs-btn-border-radius: 0.6rem;
    background: #fff;
    border: 1px solid var(--auth-border);
    color: var(--bs-body-color);
    border-radius: 0.6rem;
    font-size: 1rem;
}

.btn-back:hover,
.btn-back:focus-visible {
    background: #f7f7ff;
    border-color: #d4d6f7;
    color: var(--bs-body-color);
}

/* Tous les vrais boutons : 50px de haut */
.btn-primary,
.btn-back,
.btn-add-school,
.modal-footer .btn {
    height: var(--auth-control-h);
    min-height: var(--auth-control-h);
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

/* ===== Colonne droite : formulaire ===== */
/* z-index : la liste des établissements passe au-dessus du pied de page */
.right-panel {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* Le formulaire reste étroit pour des champs de largeur confortable */
.content-right {
    max-width: 440px;
}

/* ----- Étapes ----- */
.steps {
    margin-bottom: 1.5rem;
}

.step-item {
    flex-shrink: 0;
}

.step-text {
    font-size: 1rem;
}

.step-dot {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    background: #f1f1f6;
    color: #6b7280;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.step-dot.step-active {
    background: var(--auth-primary);
    color: #fff;
}

/* Étape terminée (coche verte) */
.step-dot.step-done {
    background: var(--auth-success);
    color: #fff;
}

.step-line {
    flex: 1 1 auto;
    min-width: 12px;
    height: 1px;
    background: var(--auth-border);
    margin-inline: 0.5rem;
    transition: background-color 0.2s ease;
}

/* Trait entre deux étapes terminées */
.step-line.step-line-done {
    background: var(--auth-success);
}

/* Apparition douce lors du changement d'étape */
#accountStep,
#schoolStep {
    animation: stepFade 0.25s ease;
}

@keyframes stepFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ----- Titre ----- */
.form-title {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.form-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* ----- Champs (hauteur fixe 50px) ----- */
.auth-form .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.auth-form .form-control,
.auth-form .form-select,
.auth-form .input-group-text {
    border-color: var(--auth-border);
    font-size: 1rem; /* 16px minimum : évite le zoom automatique sur iOS */
    height: var(--auth-control-h);
    min-height: var(--auth-control-h);
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0.6rem;
}

.auth-form .input-group-text {
    padding-inline: 0.85rem;
    white-space: nowrap;
}

/* Téléphone : indicatif de largeur fixe, numéro qui occupe le reste */
.auth-form .input-group > .country-code {
    flex: 0 0 auto;
    width: 7rem;
    padding-left: 0.75rem;
}

.auth-form .input-group > #tel {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Indicatif validé : pas d'icône de validation, elle masquerait le « +237 »
   dans ce champ étroit (la bordure verte suffit) */
.auth-form.was-validated .country-code:valid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem;
}

/* Coins arrondis cohérents dans le groupe indicatif + numéro */
.auth-form .input-group > .country-code {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.auth-form .input-group > #tel {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.15);
}

.form-control::placeholder {
    color: #9ca3af;
}

.form-control[readonly] {
    background-color: #f8f9fc;
}

/* Champ PIN : chiffres espacés */
#pin {
    letter-spacing: 0.25em;
}

#pin::placeholder {
    letter-spacing: 0.15em;
}

/* Case à cocher (CGU) */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-left: 0;
}

.form-check .form-check-input {
    float: none;
    margin: 0.15rem 0 0;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

.form-check-input:checked {
    background-color: var(--auth-primary);
    border-color: var(--auth-primary);
}

.form-check-input:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.15);
}

.form-check-label {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Lien « Modifier le numéro » */
#editPhone {
    font-size: 0.9rem;
    color: var(--auth-primary);
}

/* Liens sous le PIN : « PIN oublié ? » à gauche, « Modifier le numéro » à droite */
.pin-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#forgotPin a {
    font-size: 0.95rem;
}

/* Encadré d'information */
.alert-info-soft {
    background: #f1f5ff;
    border: 1px solid #dbe4ff;
    color: #4b5563;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 1rem;
}

.alert-info-soft .bi {
    color: var(--auth-primary);
    font-size: 1.1rem;
}

/* =====================================================================
   Étape 2 : sélection des établissements
   ===================================================================== */

.school-picker {
    position: relative;
    background: #fff;
    border: 1px solid var(--auth-border);
    border-radius: 0.9rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.08);
    margin-bottom: 0.9rem;
}

.school-picker.is-invalid {
    border-color: #dc3545;
}

/* Recherche */
.school-search {
    position: relative;
    padding: 0.75rem;
}

/* Menu déroulant (ouvert au clic dans la recherche) : il se superpose aux
   éléments du dessous au lieu de les pousser vers le bas */
.school-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: #fff;
    border: 1px solid var(--auth-border);
    border-radius: 0.9rem;
    box-shadow: 0 16px 40px rgba(30, 27, 58, 0.14);
    overflow: hidden;
}

.school-picker.is-open {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.12), 0 8px 24px rgba(99, 102, 241, 0.08);
}

.school-search .bi-search {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.auth-form .school-search .form-control {
    height: var(--auth-control-h);
    min-height: var(--auth-control-h);
    padding-left: 2.5rem;
    text-overflow: ellipsis;
}

/* Liste défilante */
.school-list {
    max-height: 14rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.school-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f1f6;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.school-item:last-of-type {
    border-bottom: 0;
}

.school-item:hover {
    background: #f7f7ff;
}

.school-item.is-selected {
    background: #f1f2ff;
}

.school-item:focus-within {
    outline: 2px solid var(--auth-primary);
    outline-offset: -2px;
}

.school-item .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.school-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f6;
    color: #6b7280;
    border-radius: 0.6rem;
    font-size: 1.05rem;
}

.school-item.is-selected .school-icon {
    background: #fff;
    color: var(--auth-primary);
}

.school-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.school-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.school-meta {
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.3;
}

.school-empty {
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}

/* Pied du sélecteur : « Mon école n'est pas dans la liste » */
.school-picker-footer {
    padding: 0.75rem;
    border-top: 1px solid #f1f1f6;
    background: #fff;
}

.btn-add-school {
    font-size: 0.95rem;
}

/* Pastille « n établissements sélectionnés » */
.selection-row {
    min-height: 1.9rem;
    margin-bottom: 0.9rem;
}

.selection-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--auth-soft);
    color: var(--auth-primary-dark);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

.selection-chip.d-none {
    display: none !important;
}

/* Boutons d'action : Retour + Continuer */
.step-actions {
    display: flex;
    gap: 0.75rem;
}

/* ===== Modale « Ajouter votre établissement » : border-radius 5px ===== */
.modal {
    --bs-modal-border-radius: 5px;
    --bs-modal-inner-border-radius: 4px;
}

.modal-content {
    border: 0;
    border-radius: 5px;
}

.modal-footer .btn {
    font-size: 1rem;
}

/* =====================================================================
   Colonne gauche : présentation
   ===================================================================== */
.left-panel {
    background-color: #ffffff;
    background-image:
        /* Lueur violette en haut à droite */
        radial-gradient(ellipse 110% 30% at 90% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 70%),
        /* Reflet beige chaud en bas à gauche */
        radial-gradient(ellipse 100% 22% at 0% 100%, rgba(232, 222, 205, 0.95) 0%, transparent 75%),
        /* Dégradé vertical : lavande → blanc → gris doux */
        linear-gradient(180deg,
            #f6f5fe 0%,
            #f9f8ff 25%,
            #ffffff 50%,
            #dedfe2 80%,
            #f1f1f1 100%);
    background-repeat: no-repeat;
    border-top: 1px solid #f0f0f5;
}

.left-panel .panel-inner {
    padding-block: 2rem;
}

.badge-soft-success {
    background: var(--auth-success-bg);
    color: var(--auth-success);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 0.9rem;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 1.85rem;
    margin-bottom: 1rem;
}

.lead-text {
    font-size: 1.0625rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.feature-list {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.feature-list li + li {
    margin-top: 0.75rem;
}

.check-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--auth-success-bg);
    color: var(--auth-success);
    font-size: 0.9rem;
    margin-top: 0.05rem;
}

.copyright {
    margin-top: 1.5rem;
}

/* =====================================================================
   Petits téléphones (≤ 360px) : on resserre légèrement
   ===================================================================== */
@media (max-width: 360px) {
    .auth-page {
        --auth-gutter: 1rem;
    }

    .form-title {
        font-size: 1.75rem;
    }

    .hero-title {
        font-size: 1.65rem;
    }

    .auth-form .input-group > .country-code {
        width: 6.75rem;
    }
}

/* =====================================================================
   Mobiles (≤ 575.98px) : textes plus grands pour une meilleure lisibilité
   ===================================================================== */
@media (max-width: 575.98px) {
    /* Seule l'étape active garde son libellé, pour ne pas déborder */
    .step-item:not(.is-active) .step-text {
        display: none;
    }

    .step-actions .btn-back {
        padding-inline: 1rem;
    }

    .auth-page {
        font-size: 1.0625rem; /* 17px */
    }

    /* Étapes */
    .step-text {
        font-size: 1.125rem;
    }

    .step-dot {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    /* Titres */
    .form-title {
        font-size: 2.1rem;
    }

    .form-subtitle {
        font-size: 1.125rem;
        line-height: 1.5;
    }

    /* Champs et libellés */
    .auth-form .form-label {
        font-size: 1.05rem;
    }

    .auth-form .form-control,
    .auth-form .form-select,
    .auth-form .input-group-text {
        font-size: 1.125rem;
    }

    .auth-form .input-group > .country-code {
        width: 7.75rem;
    }

    .invalid-feedback {
        font-size: 0.95rem;
    }

    /* Boutons */
    .btn-primary,
    .btn-back,
    .btn-add-school,
    .modal-footer .btn {
        font-size: 1.125rem;
    }

    #editPhone {
        font-size: 1.05rem;
    }

    #forgotPin a {
        font-size: 1.1rem;
    }

    /* Cases à cocher et messages */
    .form-check-label {
        font-size: 1.05rem;
    }

    .form-check .form-check-input {
        width: 1.4em;
        height: 1.4em;
    }

    .text-danger.small,
    .small {
        font-size: 0.95rem;
    }

    /* Encadrés d'information */
    .alert-info-soft {
        font-size: 1.05rem;
        line-height: 1.55;
    }

    .alert-info-soft .bi {
        font-size: 1.25rem;
    }

    /* Liste des établissements */
    .school-name {
        font-size: 1.1rem;
    }

    .school-meta {
        font-size: 0.95rem;
    }

    .school-empty {
        font-size: 1.05rem;
    }

    .school-icon {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }

    .school-item .form-check-input {
        width: 1.35em;
        height: 1.35em;
    }

    .school-list {
        max-height: 14rem;
    }

    .selection-chip {
        font-size: 0.95rem;
    }

    /* Modale */
    .modal-title {
        font-size: 1.35rem !important;
    }

    /* Pied de page mobile */
    .mobile-footer {
        font-size: 0.95rem;
        padding: 1rem var(--auth-gutter) 1.5rem;
        color: #6b7280;
    }
}

/* =====================================================================
   Tablette (≥ 576px)
   ===================================================================== */
@media (min-width: 576px) {
    .auth-page {
        --auth-gutter: 2rem;
    }

    .panel-inner {
        padding-block: 2.5rem;
    }

    .steps {
        margin-bottom: 2rem;
    }

    .form-title {
        font-size: 2rem;
    }

    .hero-title {
        font-size: 2.1rem;
    }
}

/* =====================================================================
   Ordinateur (≥ 992px) : deux colonnes pleine hauteur
   ===================================================================== */
@media (min-width: 992px) {
    .auth-page {
        --auth-gutter: 3rem;
    }

    .auth-page {
        font-size: 1rem;
    }

    .auth-row {
        min-height: 100vh;
        min-height: 100 dvh;
    }

    .panel-inner {
        padding-block: 3rem;
    }

    .content-left {
        max-width: 600px;
    }

    .left-panel {
        border-top: 0;
        border-right: 1px solid #f0f0f5;
    }

    .left-panel .panel-inner {
        padding-block: 3rem;
    }

    .steps {
        margin-bottom: 2.5rem;
    }

    .form-title {
        font-size: 2rem;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    /* Tailles de texte « bureau » (la hauteur reste à 50px) */
    .btn-primary,
    .btn-back {
        font-size: 0.95rem;
    }

    .btn-add-school {
        font-size: 0.9rem;
    }

    .auth-form .form-control,
    .auth-form .form-select,
    .auth-form .input-group-text {
        font-size: 0.9375rem;
    }

    .form-check-input {
        width: 1.2em;
        height: 1.2em;
    }
}

/* Grands écrans */
@media (min-width: 1400px) {
    .content-right {
        max-width: 460px;
    }

    .content-left {
        max-width: 530px;
    }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    .auth-page * {
        transition: none !important;
        animation: none !important;
    }
}

/* =====================================================================
   Dans la plateforme
   ===================================================================== */
/* admin.css fait hériter la couleur du texte à tous les liens : ici les
   liens gardent leur couleur de lien. */
.og-body .auth-page a:not(.btn) {
    color: var(--bs-link-color);
}

.og-body .auth-page a:not(.btn):hover {
    color: var(--bs-link-hover-color);
}

/* Sur mobile, la marge de la plateforme suffit */
@media (max-width: 991.98px) {
    .og-content-flush .right-panel .panel-inner {
        padding: 0.75rem 0;
    }

    .og-content-flush .mobile-footer {
        padding-bottom: 1rem;
    }

    /* La page occupe exactement l'écran entre la barre du haut et celle du bas
       (pas de défilement), et le formulaire est centré dans cet espace. */
    .og-main:has(.og-content-flush) {
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: var(--og-bottom-nav-height);
        display: flex;
        flex-direction: column;
    }

    .og-main:has(.og-content-flush) .og-main-body,
    .og-content.og-content-flush,
    .og-content-flush .auth-page {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .og-content.og-content-flush {
        padding-bottom: 0;
    }

    .og-content-flush .auth-row {
        flex: 1;
    }
}

/* Sur ordinateur, les deux colonnes occupent toute la hauteur et remontent
   derrière l'en-tête : le dégradé part du haut de la page, sans coupure sous
   l'en-tête (qui est transparent et passe au-dessus). */
@media (min-width: 992px) {
    .og-content.og-content-flush {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .og-main:has(.og-content-flush) {
        padding-bottom: 0;
    }

    .og-content-flush .auth-row {
        min-height: 100vh;
        margin-top: calc(-1 * var(--og-appbar-height));
    }

    /* Présentation alignée en haut, juste sous l'en-tête */
    .og-content-flush .left-panel .panel-inner {
        padding-top: calc(var(--og-appbar-height) + 3.5rem);
    }

    /* Formulaire centré verticalement dans l'espace sous l'en-tête */
    .og-content-flush .right-panel .panel-inner {
        padding-top: calc(var(--og-appbar-height) + 1.5rem);
        padding-bottom: 1.5rem;
    }

    /* Un formulaire plus large dans une colonne large */
    .og-content-flush .content-right {
        max-width: 560px;
    }
}

@media (min-width: 1400px) {
    .og-content-flush .content-right {
        max-width: 600px;
    }
}

/* Téléphones peu hauts (≤ 820px) : on resserre titres et marges pour que
   chaque étape tienne dans l'écran sans défilement */
@media (max-width: 991.98px) and (max-height: 820px) {
    .steps {
        margin-bottom: 1rem;
    }

    .form-title {
        font-size: 1.6rem;
    }

    .form-subtitle {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
}

/* Ordinateurs peu hauts (≤ 760px) : même principe, la liste ouverte reste dans l'écran */
@media (min-width: 992px) and (max-height: 760px) {
    .steps {
        margin-bottom: 1.5rem;
    }

    .school-list {
        max-height: 11rem;
    }

    .og-content-flush .left-panel .panel-inner {
        padding-top: calc(var(--og-appbar-height) + 2rem);
        padding-bottom: 1.5rem;
    }
}