/**
 * CORRECTEUR ADAPTATIF UNIVERSEL - UMOA Market
 * 
 * Ce fichier CSS agit comme une "police de sécurité" pour empêcher
 * les débordements horizontaux et les espaces vides sur toutes les pages.
 * 
 * @package UMOA
 * @version 1.0
 */

/* ============================================================================
   CORRECTEUR UNIVERSEL - Structure de base
   ============================================================================ */

/* Force html et body à ne jamais dépasser la largeur de l'écran */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important; /* Interdit le scroll horizontal */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100% !important;
}

/* Force tous les conteneurs à tenir dans la largeur */
section, div, header, footer, main, article, aside, nav {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Empêche les images et médias de casser la mise en page */
img, video, canvas, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* Transforme les tableaux larges en conteneurs scrollables */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Force les tableaux à s'adapter */
table {
    max-width: 100% !important;
    width: 100% !important;
    table-layout: auto;
    border-collapse: collapse;
}

/* Empêche les éléments avec largeur fixe de dépasser */
*[style*="width"] {
    max-width: 100% !important;
}

/* Correction des formulaires */
form, input, textarea, select, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Correction des conteneurs flex */
.flex, .flex-container, [class*="flex-"], [class*="grid-"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Correction des éléments avec position fixed/absolute */
[style*="position: fixed"], [style*="position: absolute"] {
    max-width: 100vw !important;
}

/* ============================================================================
   CORRECTIONS SPÉCIFIQUES POUR PAGES LOGISTIQUE ET MARKETPLACE
   ============================================================================ */

/* Pour les pages Logistique */
.logistique-container, .logistics-container,
.delivery-container, .livraison-container {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Pour les pages Marketplace */
.marketplace-container, .products-grid, .product-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Grilles de produits */
.products-grid > *, .product-grid > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================================
   CORRECTIONS DES ESPACES VIDES ET MARGES NÉGATIVES
   ============================================================================ */

/* Note: Les marges négatives excessives sont gérées par le script JS */

/* Force les conteneurs avec padding à respecter la largeur */
.container, .container-fluid, .wrapper, .content-wrapper {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ============================================================================
   CORRECTIONS RESPONSIVE MOBILE
   ============================================================================ */

@media screen and (max-width: 768px) {
    /* Force les éléments de contenu à tenir dans l'écran mobile */
    /* Exclure les modales, tooltips et éléments positionnés absolument */
    section, div, article, aside, header, footer, main,
    .container, .container-fluid, .wrapper, .content-wrapper,
    .card, .product-card, .article-card {
        max-width: 100vw !important;
    }
    
    /* Correction spéciale pour les tableaux sur mobile */
    table {
        font-size: 0.875rem;
    }
    
    /* Correction des conteneurs avec largeur fixe */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Colonnes deviennent verticales sur mobile */
    .row, [class*="row"], [class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Texte lisible et adaptatif */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Redimensionne les titres trop grands */
    h1 {
        font-size: 1.5em !important;
    }
    
    h2 {
        font-size: 1.3em !important;
    }
    
    h3 {
        font-size: 1.2em !important;
    }
    
    /* Boutons et éléments tactiles (minimum 44x44px pour accessibilité) */
    button, a.button, input[type="button"], input[type="submit"],
    .btn, [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
    }
    
    /* Champs de formulaire tactiles */
    input, textarea, select {
        min-height: 44px !important;
        font-size: 16px !important; /* Empêche le zoom auto sur iOS */
    }
    
    /* Supprime les hauteurs fixes problématiques */
    /* Note: On utilise une approche plus spécifique pour éviter les conflits */
    [style*="height"] {
        /* Les hauteurs fixes seront gérées par le script JS pour plus de précision */
    }
    
    /* Supprime les espaces vides inutiles */
    /* Note: La logique complexe est gérée par le script JS pour plus de précision */
    section:empty, div:empty {
        /* Les éléments vides seront gérés par le script JS qui vérifie les classes */
    }
    
    /* Uniformise les marges et paddings */
    .container, .wrapper, .content {
        padding: 12px !important;
        margin: 0 auto !important;
    }
}

/* ============================================================================
   CORRECTIONS DES ÉLÉMENTS FLOTTANTS
   ============================================================================ */

/* Empêche les éléments flottants de dépasser */
.float-left, .float-right, [style*="float"] {
    max-width: 100% !important;
}

/* Clearfix pour éviter les débordements */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
    max-width: 100%;
}

/* ============================================================================
   CORRECTIONS DES MODALES ET OVERLAYS
   ============================================================================ */

.modal, .overlay, .popup, [class*="modal"], [class*="overlay"] {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

.modal-content, .modal-body, .overlay-content {
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* ============================================================================
   CORRECTIONS DES NAVIGATIONS
   ============================================================================ */

.navbar, nav, .navigation, .menu {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================================
   UTILITAIRES DE CORRECTION
   ============================================================================ */

/* Classe utilitaire pour forcer la largeur maximale */
.force-max-width {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Classe utilitaire pour scroll horizontal interne */
.scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
}

/* Classe utilitaire pour empêcher le débordement */
.no-overflow {
    overflow: hidden !important;
    max-width: 100% !important;
}