/* ================================
   NAV MENU – layout 3 zones
   - Top: fixe (toujours visible)
   - Center: seul scrollable
   - Bottom: fixe (toujours visible)
   Tout le CSS est ici.
   ================================ */

/* Conteneur principal de la sidebar/navmenu */
.navmenu-container {
    display: flex;
    flex-direction: column;
    /* Empêche le container de dépasser et autorise
       uniquement la zone centrale à défiler */
    overflow: hidden;
    /* Hauteur plein écran, avec fallbacks pour mobiles */
    height: 90vh;
    height: 90svh; /* iOS Safari modern */
    height: 90dvh; /* viewport dynamique */
    min-height: 0; /* important pour le flex + overflow */
}

/* Zone haute (ex: logo, sélecteurs) — ne défile pas */
.top-component {
    flex: 0 0 auto;
}

/* --------- Logo / branding en haut du menu ---------- */
.navmenu-brand {
    display: flex;
    justify-content: center;
    text-decoration: none;
}

.navmenu-brand-logo {
    width: min(220px, 92%);
    height: 200px;
    height: auto;
    border-radius: 16px;
}

/* ----- Mode dock/fermé : mini logo sous le bouton ----- */
.navmenu-brand--compact {
    margin-top: 6px;
    margin-bottom: 8px;
    justify-content: flex-start;
    padding-left: 10px;
}

.navmenu-brand-logo--compact {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

/* Quand la sidebar est dockée (Syncfusion applique e-dock sur la racine)
   on masque le logo « normal » et on garde uniquement le compact. */
::deep .e-sidebar.e-dock .navmenu-brand:not(.navmenu-brand--compact) {
    display: none;
}

::deep .e-sidebar:not(.e-dock) .navmenu-brand--compact {
    display: none;
}

/* Réduit légèrement l'espace du séparateur en mode dock pour remonter le menu */
::deep .e-sidebar.e-dock .navmenu-top-separator {
    margin: 0.5rem auto;
}

.navmenu-brand:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
    border-radius: 18px;
}

/* Zone centrale — la SEULE qui défile */
.scroller {
    flex: 1 1 auto;
    min-height: 0; /* indispensable pour que overflow fonctionne en flex */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Zone basse (ex: actions, profil) — ne défile pas */
.bottom-component {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background-color: var(--primary-color);
}

/* Séparateur horizontal interne */
.separator {
    border: 1px solid #FFFFFF;
    opacity: 0.14;
    width: 100%;
    margin: 1rem auto;
}

/* --------- Syncfusion inputs dans le menu ---------- */
::deep .e-input-group {
    border-color: var(--primary-color);
}

    ::deep .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
    ::deep .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
        border-color: var(--secondary-color);
    }

::deep .e-ddl.e-input-group.e-control-wrapper .e-input {
    color: var(--primary-color);
}

::deep .e-ddl .e-input-group-icon.e-ddl-icon {
    color: var(--primary-color);
}

/* --------- Sélecteur d'école (bas du menu) ---------- */
.bottom-component ::deep .e-ddl.e-input-group.e-control-wrapper {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.bottom-component ::deep .e-ddl.e-input-group.e-control-wrapper .e-input {
    padding: 10px 12px;
    color: #0B2447;
    font-weight: 600;
}

.bottom-component ::deep .e-ddl .e-input-group-icon.e-ddl-icon {
    color: #0B2447;
}

/* --------- Petites largeurs ---------
   On réduit un peu la typo et on garde le même
   comportement de scroll central. */
@media (max-width: 600px) {
    .navmenu-container {
        min-width: 220px;
        font-size: 0.95rem;
    }
    /* Pas de max-height arbitraire ici : c’est la
       hauteur du viewport + flex qui pilotent le scroll. */
}

/* --------- Bouton toggle (topbar sidebar) ---------- */
.sidebar-toggler {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.sidebar-toggler:hover {
    background: rgba(255, 255, 255, 0.18);
}

.sidebar-toggler:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}