/* ============================================
   CORRECTIFS RESPONSIVE GLOBAUX
   ============================================
   Chargé APRES le {% block stylesheets %} de base.html.twig : les pages
   déclarent leur CSS dans un <style> inline, donc à spécificité égale seule
   une feuille chargée plus tard peut les corriger.
   ============================================ */

/* --------------------------------------------
   1. Colonnes principales
   --------------------------------------------
   .student-main / .admin-main / .teacher-main sont des flex items en `flex: 1`.
   Leur min-width vaut `auto` par défaut : elles refusent de descendre sous la
   largeur min-content de leur contenu (barre de recherche, tableau, grille).
   Le contenu déborde alors du viewport, et `body { overflow-x: hidden }` le
   rogne au lieu de le révéler — d'où les cartes coupées à droite sur mobile.
   -------------------------------------------- */
.student-layout,
.admin-layout,
.teacher-layout,
.student-main,
.admin-main,
.teacher-main {
    min-width: 0;
}

/* --------------------------------------------
   2. Modales
   --------------------------------------------
   Les overlays sont `position: fixed; inset: 0; display: flex;
   align-items: center`. Une boîte plus haute que l'écran déborde alors en haut
   ET en bas, et la partie hors écran est inatteignable au scroll : sur mobile
   le bouton de confirmation devient inaccessible.
   On plafonne la hauteur de la boîte et on la rend scrollable.
   -------------------------------------------- */
.modal-overlay {
    overflow-y: auto;
}

.modal-box,
.modal-card {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px); /* exclut la barre d'URL mobile */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sur petit ecran l'entete (icone 52px + padding 32px) laisse trop peu de place
   au titre, qui se casse en plusieurs lignes. */
@media (max-width: 480px) {
    .modal-header {
        padding: 16px;
        gap: 12px;
    }

    .modal-warning-icon {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    .modal-title {
        font-size: 1.1rem;
    }

    .modal-col-left,
    .modal-col-right {
        padding: 16px;
    }

    .modal-actions {
        flex-wrap: wrap;
    }
}

/* --------------------------------------------
   3. Médias
   -------------------------------------------- */
img,
video,
iframe,
canvas {
    max-width: 100%;
}

/* --------------------------------------------
   4. Tableaux
   --------------------------------------------
   Les tableaux portent un `min-width` de 500 à 700px : leur conteneur doit
   défiler horizontalement plutôt que pousser la page.
   -------------------------------------------- */
.table-wrapper,
.table-responsive,
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------
   5. Mots longs (emails, URLs, titres de cours)
   -------------------------------------------- */
body {
    overflow-wrap: break-word;
}

/* --------------------------------------------
   6. Barre de recherche étudiant
   --------------------------------------------
   Champ + « Rechercher » + « Recherche avancée » sur une seule ligne flex sans
   wrap : c'est le principal contributeur au min-content de .student-main.
   -------------------------------------------- */
@media (max-width: 768px) {
    .global-search-container {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .global-search-box {
        flex: 1 1 100%;
    }

    .global-search-btn {
        flex: 1 1 140px;
        justify-content: center;
        padding: 12px 16px;
        font-size: 0.9rem;
    }
}