/**
 * mobile-modals.css
 * Solution pour modales plein écran sur mobile (PWA)
 * 
 * Problème résolu:
 * - Modales qui sautent
 * - Affichage coupé
 * - Scroll instable
 * 
 * Solution: Modales en plein écran avec comportement de page
 */

/* ============================================================================
   MODAL CONFIG DASHBOARD - LAYOUT PC
   ============================================================================ */

@media screen and (min-width: 769px) {
    /* S'assurer que le contenu prend tout l'espace disponible sur PC */
    #dashboard-config-modal .modal-content {
        width: 100% !important;
        max-width: none !important;
        height: calc(100vh - 64px) !important; /* laisse la place au header */
        display: flex !important;
        flex-direction: column !important;
        /* Supprimer l'effet carte/ombre/bords arrondis */
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    
    #dashboard-config-modal .dashboard-config-sections {
        /* Le grid 2 colonnes est déjà défini dans le JS inline */
        flex: 1 !important;
        max-width: 1400px !important; /* Largeur max pour lisibilité */
        margin: 0 auto !important; /* Centrer le contenu */
        width: 100% !important;
    }
}

/* ============================================================================
   DÉTECTION MOBILE
   ============================================================================ */

@media screen and (max-width: 768px) {
    
    /* ========================================================================
       TOUTES LES MODALES EN PLEIN ÉCRAN SUR MOBILE
       ======================================================================== */
    
    .modal {
        /* Supprimer le comportement d'overlay */
        background-color: #fff !important; /* Fond blanc au lieu de rgba transparent */
        padding: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        
        /* Plein écran complet */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        
        /* Enlever les transformations qui causent des sauts */
        transform: none !important;
        
        /* Z-index de base (sera surchargé dynamiquement par JavaScript pour modales empilées) */
        z-index: 9999;
        
        /* Scroll natif */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        
        /* ⚠️ PAS D'ANIMATION - CAUSE DES FREEZES SUR CERTAINS DEVICES */
        /* On laisse l'apparition instantanée pour éviter les conflits */
    }
    
    /* ========================================================================
       CONTENU DE LA MODALE
       ======================================================================== */
    
    .modal-content {
        /* Occuper tout l'espace disponible */
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important; /* permet d'afficher le footer */
        max-height: none !important;  /* pas de plafond de hauteur */
        
        /* Pas de marges ni paddings qui créent des espaces */
        margin: 0 !important;
        padding: 0 !important;
        
        /* Pas de border-radius sur les coins */
        border-radius: 0 !important;
        
        /* Fond blanc solide */
        background: #fff !important;
        
        /* Enlever l'ombre qui n'a plus de sens en plein écran */
        box-shadow: none !important;
        
        /* Scroll interne */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* Espace confortable pour le footer sticky interne */
        padding-bottom: 140px !important;
        
        /* Pas de transform */
        transform: none !important;
    }
    
    /* ========================================================================
       HEADER DE LA MODALE (avec bouton retour)
       ======================================================================== */
    
    .modal-header {
        /* Header fixe en haut */
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        
        /* Style app mobile */
        background: linear-gradient(135deg, #0d2240 0%, #1a3a5c 100%) !important;
        color: white !important;
        padding: 12px 16px !important;
        
        /* Légère ombre pour séparer du contenu */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        
        /* Z-index pour rester au-dessus du contenu */
        z-index: 10 !important;
        
        /* Flexbox pour aligner bouton retour + titre */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        
        /* Pas de border-radius */
        border-radius: 0 !important;
    }
    
    .modal-header h2,
    .modal-header h3,
    .modal-header h4 {
        color: white !important;
        margin: 0 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        flex: 1 !important;
    }
    
    /* Bouton de fermeture style mobile (simple et fonctionnel) */
    .modal-header .close-modal,
    .modal-header .close {
        /* Style minimal qui n'interfère pas avec les événements */
        background: transparent !important;
        color: white !important;
        border: none !important;
        font-size: 32px !important; /* Plus gros pour mobile */
        line-height: 1 !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        cursor: pointer !important;
        
        /* Zone de touch large */
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* Flex shrink pour ne pas se compresser */
        flex-shrink: 0 !important;
        
        /* ⚠️ IMPORTANT: Laisser pointer-events par défaut */
        /* Ne pas toucher à pointer-events pour garder la fonctionnalité native */
    }
    
    .modal-header .close-modal:active,
    .modal-header .close:active {
        opacity: 0.7 !important;
    }
    
    /* ========================================================================
       BODY DE LA MODALE
       ======================================================================== */
    
    .modal-body {
        /* Padding confortable pour mobile */
        padding: 20px !important;
        
        /* Pas de contrainte de hauteur */
        max-height: none !important;
        overflow: visible !important;
        
        /* Background cohérent */
        background: #fff !important;
    }
    
    /* ========================================================================
       FORMULAIRES DANS LES MODALES
       ======================================================================== */
    
    .modal form,
    .modal #mainForm {
        /* Padding pour ne pas toucher les bords */
        padding: 20px !important;
        
        /* Background */
        background: #fff !important;
    }
    
    .modal .form-group {
        /* Espacement généreux */
        margin-bottom: 20px !important;
    }
    
    .modal input,
    .modal select,
    .modal textarea {
        /* Taille touch-friendly */
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 16px !important; /* Empêche le zoom automatique iOS */
        
        /* Border visible */
        border: 2px solid #dee2e6 !important;
        border-radius: 8px !important;
    }
    
    .modal button,
    .modal .btn {
        /* Boutons touch-friendly */
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }
    
    /* ========================================================================
       CORRECTIONS SPÉCIFIQUES
       ======================================================================== */
    
    /* Supprimer les comportements qui causent des problèmes */
    .modal.active {
        display: flex !important; /* Garder flex mais sans centrage */
        flex-direction: column !important;
    }
    
    /* ✅ Fix pour les modales empilées - SUPPRIMÉ
     * Cette approche CSS ne fonctionne pas car les modales ne sont pas toujours
     * dans l'ordre DOM. Solution: z-index dynamique en JavaScript (FormsModule)
     */
    
    /* ========================================================================
       SCROLL LOCK BODY (empêcher scroll en arrière-plan)
       ======================================================================== */
    
    /* ⚠️ DÉSACTIVÉ - CAUSE DES FREEZES
    body.modal-open {
        position: fixed !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    */
    
    /* ========================================================================
       MODALES SPÉCIFIQUES (ajustements si nécessaires)
       ======================================================================== */
    
    /* Modal de formulaire principale */
    #formModal .modal-content {
        min-height: 100vh !important;
    }
    
    /* Modal de détails équipement */
    #equipment-details-modal .modal-content {
        min-height: 100vh !important;
    }
    
    /* Modal de recherche */
    #search-modal .modal-content {
        min-height: 100vh !important;
    }
    
    /* Modal de pricing */
    #pricingModal .modal-content {
        min-height: 100vh !important;
    }
    
    /* Modal de QR Code */
    #equipment-qr-modal .modal-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 20px !important;
    }
    
    /* ========================================================================
       MODAL CONFIGURATION DASHBOARD (plein écran sur mobile)
       ======================================================================== */
    
    /* Layout 1 colonne sur mobile UNIQUEMENT */
    #dashboard-config-modal .dashboard-config-sections {
        display: block !important; /* Override du grid 2 colonnes */
        padding: 20px !important;
        grid-template-columns: 1fr !important; /* Annule le grid sur mobile */
    }
    
    #dashboard-config-modal .config-section {
        margin-bottom: 25px !important;
        grid-column: auto !important; /* Annule grid-column sur mobile */
    }
    
    /* ========================================================================
       FIX POUR LE KEYBOARD MOBILE
       ======================================================================== */
    
    /* Quand le clavier apparaît, s'assurer que les inputs restent visibles */
    .modal input:focus,
    .modal textarea:focus,
    .modal select:focus {
        /* Scroll automatique vers l'élément */
        scroll-margin-top: 80px !important;
        scroll-margin-bottom: 80px !important;
    }
}

/* ============================================================================
   MODE PAYSAGE MOBILE (Landscape)
   ============================================================================ */

@media screen and (max-width: 896px) and (orientation: landscape) {
    .modal-header {
        /* Header plus compact en paysage */
        padding: 12px 20px !important;
    }
    
    .modal-header h2,
    .modal-header h3,
    .modal-header h4 {
        font-size: 16px !important;
    }
}

/* ============================================================================
   FALLBACK POUR TRÈS PETITS ÉCRANS
   ============================================================================ */

@media screen and (max-width: 360px) {
    .modal-body {
        padding: 16px !important;
    }
    
    .modal form,
    .modal #mainForm {
        padding: 16px !important;
    }
}