/* ==========================================================================
   responsive.css — Adaptations mobile (smartphones)
   --------------------------------------------------------------------------
   Chargé globalement via base.html.twig. Couvre tous les portails connectés
   (admin, enseignant, élève, secrétaire, directeur pédagogique, trésorier)
   ainsi que les pages de connexion / mot de passe.
   Les pages publiques de pré-inscription (layout public.html.twig) portent
   leurs propres ajustements mobile dans leur bloc <style>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Correctifs de classes Bootstrap 5 utilisées dans un projet Bootstrap 4
   Ces classes sont employées dans les templates mais n'existent pas en BS4
   (AdminLTE 3). On les définit pour que l'alignement / les couleurs / les
   espacements fonctionnent — à toutes les tailles d'écran.
   -------------------------------------------------------------------------- */
.text-end   { text-align: right !important; }
.text-start { text-align: left  !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem  !important; }
.gap-3 { gap: 1rem    !important; }

/* Badges : la syntaxe BS5 `bg-*` est remappée sur les couleurs AdminLTE/BS4 */
.badge.bg-primary   { background-color: #007bff !important; color: #fff !important; }
.badge.bg-secondary { background-color: #6c757d !important; color: #fff !important; }
.badge.bg-success   { background-color: #28a745 !important; color: #fff !important; }
.badge.bg-danger    { background-color: #dc3545 !important; color: #fff !important; }
.badge.bg-warning   { background-color: #ffc107 !important; color: #1f2d3d !important; }
.badge.bg-info      { background-color: #17a2b8 !important; color: #fff !important; }
.badge.bg-light     { background-color: #f8f9fa !important; color: #1f2d3d !important; }
.badge.bg-dark      { background-color: #343a40 !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   2. Adaptations spécifiques aux smartphones (≤ 575.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* ---- Cibles tactiles --------------------------------------------------
       Le burger de la navbar et les boutons d'action des tableaux sont trop
       petits pour le doigt ; on garantit une zone cliquable confortable.     */
    .main-header .navbar-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Boutons d'action carrés des tableaux (souvent forcés à 32×32 px inline).
       min-width/min-height priment sur la width/height inline plus petites.   */
    .table td .btn-sm,
    .table td .btn-xs,
    td > .btn-sm,
    td .d-flex > .btn-sm {
        min-width: 40px;
        min-height: 40px;
    }
    .btn-xs { padding: 0.25rem 0.4rem; }

    /* ---- Onglets (nav-tabs) ----------------------------------------------
       7 onglets (corbeille) ou 4 onglets (ressources) débordent. On passe en
       défilement horizontal propre plutôt qu'un retour à la ligne cassé.      */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .nav-tabs .nav-item { white-space: nowrap; }
    .nav-tabs::-webkit-scrollbar { height: 3px; }
    .nav-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }

    /* ---- Modales ----------------------------------------------------------
       Le JSON / contenu <pre> et les tables imbriquées débordaient.           */
    .modal-body pre {
        white-space: pre-wrap;
        word-break: break-word;
    }
    .modal-body table { max-width: 100%; }
    .modal-dialog { margin: 0.5rem; }

    /* ---- Barres d'action (titre + boutons) -------------------------------
       `d-flex justify-content-between` sans flex-wrap : les boutons étaient
       écrasés / poussés hors écran. On autorise le retour à la ligne.         */
    .content-wrapper .d-flex.justify-content-between,
    .content-wrapper .card-header.d-flex {
        flex-wrap: wrap;
    }
    .content-wrapper .d-flex.justify-content-between > * { min-width: 0; }

    /* ---- card-tools AdminLTE ---------------------------------------------
       Les boutons en float-right chevauchaient les titres longs.             */
    .card-header { flex-wrap: wrap; }
    .card-header .card-tools.float-right,
    .card-header .card-tools {
        float: none !important;
        clear: both;
        margin-top: 0.4rem;
        margin-left: 0 !important;
    }

    /* ---- Tableaux clé/valeur ---------------------------------------------
       Les <th style="width:200px|250px"> écrasaient la colonne valeur.
       Sur mobile on laisse le navigateur répartir la largeur.                 */
    .table-bordered th[style*="width"],
    .table-bordered td[style*="width"] {
        width: auto !important;
    }

    /* ---- Dropdown utilisateur de la navbar --------------------------------
       `dropdown-menu-lg` (300px) débordait sur les petits écrans.             */
    .navbar-nav .dropdown-menu-lg {
        width: auto;
        min-width: 240px;
        max-width: 92vw;
    }

    /* ---- Pagination -------------------------------------------------------
       `float-right` est cassé dans un contexte flex : on centre proprement.   */
    .pagination {
        float: none !important;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ---- Titres -----------------------------------------------------------
       Les gros h1/h2/h3 mangeaient la largeur sur 360px.                      */
    .content-wrapper h1,
    .content-wrapper .h1 { font-size: 1.5rem; }
    .content-wrapper h2,
    .content-wrapper .h2 { font-size: 1.35rem; }
    .content-wrapper h3,
    .content-wrapper .h3 { font-size: 1.18rem; }

    /* ---- FullCalendar -----------------------------------------------------
       La barre d'outils à 3 zones débordait : on empile les zones.            */
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .fc .fc-toolbar-title { font-size: 1.1rem; text-align: center; }
    .fc .fc-toolbar-chunk { display: flex; justify-content: center; }
    .fc .fc-button { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
    .fc .fc-col-header-cell-cushion,
    .fc .fc-daygrid-day-number { font-size: 0.78rem; }

    /* ---- Pages de connexion ----------------------------------------------
       Empile le lien « mot de passe oublié » et le bouton, met le bouton en
       pleine largeur (cible tactile), et resserre les paddings.               */
    .login-card-body  { padding: 1.5rem 1.25rem; }
    .login-card-header { padding-left: 1.25rem; padding-right: 1.25rem; }
    .login-card-body .d-flex.justify-content-between {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 0.75rem;
    }
    .login-card-body .d-flex.justify-content-between .btn { width: 100%; }
    .login-card .forgot-link {
        display: inline-block;
        padding: 0.4rem 0;
        text-align: center;
    }

    /* Pages mot de passe oublié / réinitialisation : gouttière latérale. */
    .login-container { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* ---- Cartes / contenu -------------------------------------------------
       Resserre les paddings internes pour gagner de la largeur utile.         */
    .content-wrapper .card-body { padding: 1rem; }

    /* Les images de profil/avatar ne dépassent jamais leur conteneur. */
    .content-wrapper img { max-width: 100%; height: auto; }
}