/* static/css/mobile.css
   ============================================================
   ⭐ 2026-10-23 (patron) : « l'application GHP ne s'affiche pas bien dans le téléphone, tout est
   mélangé... ça devrait être bien responsive comme WhatsApp ». Chargée APRÈS toutes les autres
   feuilles (base.html, page, thème de la structure) : ne change que la MISE EN PAGE sur petit écran,
   jamais les couleurs du thème. Le JS associé est static/js/mobile.js.

   - ≤ 991 px : le menu horizontal (1 600 px de large, défilement de côté introuvable sur téléphone)
     devient un tiroir qui glisse depuis la gauche (bouton ☰), groupes dépliables ; mêmes liens, mêmes
     droits par rôle (c'est le même HTML que la barre du haut).
   - ≤ 767 px : barre du haut sur une seule ligne, la page défile normalement (plus de cadre qui défile
     dans la page), tableaux qui défilent dans leur propre cadre, grandes fenêtres en plein écran,
     champs à 16 px (sinon l'iPhone zoome à chaque saisie).
   ============================================================ */

/* ---------- Bouton ☰ et tiroir : cachés sur grand écran ---------- */
.btn-menu-mobile,
.menu-mobile-entete,
#menuMobileVoile {
    display: none;
}

@media (max-width: 991.98px) {
    .btn-menu-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        margin-right: 4px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: inherit;
        font-size: 20px;
    }
    .btn-menu-mobile:active { background: rgba(127, 127, 127, .15); }

    /* Le menu horizontal devient un tiroir */
    .top-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        bottom: 0;
        width: min(86vw, 340px);
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: translateX(-105%);
        transition: transform .25s ease;
        z-index: 1046 !important;
        border-bottom: 0 !important;
        box-shadow: 4px 0 28px rgba(0, 0, 0, .28) !important;
    }
    body.menu-mobile-ouvert .top-nav { transform: none; }
    body.menu-mobile-ouvert { overflow: hidden; }
    body.menu-mobile-ouvert #chatFab { display: none !important; }

    #menuMobileVoile {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1045;
    }
    body.menu-mobile-ouvert #menuMobileVoile { display: block; }

    .menu-mobile-entete {
        display: block;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 12px 14px 10px;
        background: inherit;
        border-bottom: 1px solid rgba(127, 127, 127, .2);
    }
    .menu-mobile-entete .menu-mobile-titre { font-weight: 700; font-size: 16px; }
    .menu-mobile-entete .menu-mobile-fermer {
        width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: inherit; font-size: 20px;
    }
    .menu-mobile-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
    .menu-mobile-outils .global-search-wrapper { display: block !important; flex: 1 1 100%; position: relative; width: 100% !important; max-width: none !important; }
    .menu-mobile-outils .global-search-results { left: 0; right: 0; width: auto; min-width: 0 !important; max-width: none; max-height: 60vh !important; }

    .top-nav .nav-group {
        flex-direction: column;
        align-items: stretch !important;
        height: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-bottom: 28px !important;
    }
    .top-nav .nav-item {
        display: block !important;
        height: auto !important;
        border-bottom: 1px solid rgba(127, 127, 127, .14);
    }
    .top-nav .nav-link-top {
        width: 100%;
        height: 52px !important;
        padding: 0 18px !important;
        justify-content: flex-start;
        gap: 10px;
        font-size: 15px !important;
        border-bottom: 0 !important;
    }
    .top-nav .nav-link-top .arrow { margin-left: auto !important; }
    .top-nav .nav-item.courant > .nav-link-top { font-weight: 700; }

    /* Sous-menus : dépliés sous leur groupe au lieu de flotter */
    .top-nav .mega-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        display: none;
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 0 6px !important;
        background: rgba(127, 127, 127, .07) !important;
    }
    .top-nav .nav-item.open .mega-menu { display: block; }
    .top-nav .mega-menu .menu-item {
        padding: 12px 18px 12px 30px !important;
        font-size: 14px !important;
        white-space: normal !important;
        border-left: 0 !important;
        border-radius: 0 !important;
    }

    /* Le menu latéral (activé dans certaines structures) fait doublon avec le tiroir sur téléphone */
    .sidebar, .global-toggle-btn, .sidebar-overlay { display: none !important; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden; }
    body::after { display: none !important; }   /* filigrane « SSoftOneV10 » */

    /* Barre du haut sur une seule ligne : ☰, SI xxx, structure, cloche, compte */
    .navbar { padding: 6px 0 !important; }
    .navbar > .container {
        flex-wrap: nowrap !important;
        gap: 6px;
        padding-left: 6px !important;
        padding-right: 8px !important;
    }
    .navbar .navbar-brand { font-size: 1.15rem !important; margin-right: 2px !important; padding: 0 !important; flex-shrink: 0; }
    .navbar .structure-container { min-width: 0; flex: 0 1 auto; overflow: hidden; }
    .navbar .ms-auto.d-flex { gap: 6px !important; flex-wrap: nowrap !important; flex-shrink: 0; }
    .navbar .horloge-mobile { display: none !important; }
    .navbar .dropdown-toggle { padding: 6px 10px !important; }
    .navbar .dropdown-toggle .user-name-text,
    .navbar .dropdown-toggle .badge,
    .navbar .dropdown-toggle::after { display: none !important; }
    .navbar .dropdown-toggle .fa-user-circle { font-size: 20px; }
    #navBellBtn { padding: 7px 11px !important; }

    /* La page défile normalement (plus de cadre interne qui défile) */
    .app-wrapper { display: block !important; min-height: 0 !important; }
    .main-content {
        max-height: none !important;
        overflow: visible !important;
        padding: 10px 10px 76px !important;
    }

    h1, .h1 { font-size: 1.45rem !important; }
    h2, .h2 { font-size: 1.3rem !important; }
    h3, .h3 { font-size: 1.15rem !important; }
    h4, .h4 { font-size: 1.08rem !important; }

    /* iPhone : < 16 px = zoom automatique à chaque champ touché */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea, .form-control, .form-select { font-size: 16px !important; }

    /* Titre + boutons sur une ligne : passent à la ligne au lieu de déborder */
    .main-content .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
    .main-content .card-header.d-flex, .main-content .card-header .d-flex { flex-wrap: wrap; }

    /* Tableaux : enveloppés par mobile.js dans un cadre qui défile de côté */
    .table-responsive, .tableau-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tableau-mobile > table, .table-responsive > table { margin-bottom: 0; }
    .table th { white-space: nowrap; }

    /* Fenêtres : petites centrées, grandes en plein écran comme une page d'application */
    .modal-dialog { margin: .5rem auto; max-width: calc(100vw - 1rem); }
    .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        max-width: 100vw !important;
        width: 100vw;
        height: 100%;
        min-height: 0 !important;
        margin: 0 !important;
        align-items: stretch;
    }
    /* Pleine hauteur, seul le corps défile : titre (et Fermer) toujours en haut, boutons toujours en bas */
    .modal-dialog.modal-lg .modal-content, .modal-dialog.modal-xl .modal-content {
        height: 100vh;
        height: 100dvh;
        max-height: none !important;
        border-radius: 0 !important;
        border: 0 !important;
        overflow: hidden;
    }
    .modal-dialog.modal-lg .modal-content > form, .modal-dialog.modal-xl .modal-content > form {
        display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    }
    .modal-dialog.modal-lg .modal-body, .modal-dialog.modal-xl .modal-body {
        flex: 1 1 auto; min-height: 0; overflow-y: auto !important;
    }
    .modal-dialog.modal-lg .modal-header, .modal-dialog.modal-xl .modal-header,
    .modal-dialog.modal-lg .modal-footer, .modal-dialog.modal-xl .modal-footer { flex-shrink: 0; border-radius: 0 !important; }
    .modal-body { overflow-x: auto; }
    .modal-footer { flex-wrap: wrap; gap: 6px; }
    .modal-footer > .btn { flex: 1 1 auto; margin: 0 !important; }

    .dropdown-menu { max-width: calc(100vw - 16px); }

    /* Onglets : une bande qui défile de côté (comme WhatsApp) au lieu de s'empiler */
    .nav-tabs { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item { flex-shrink: 0; }
    .nav-tabs .nav-link { white-space: nowrap; }

    /* Chiffres des cartes du tableau de bord (2rem : « ••••••• FCFA » débordait de la carte) */
    .stat-value { font-size: 1.2rem !important; }

    /* Bulle de messagerie : plus discrète */
    #chatFab { width: 46px !important; height: 46px !important; right: 12px !important; bottom: 12px !important; font-size: 18px !important; }
}