/**
 * Styles spécifiques pour les cartes Leaflet dans les modals
 * Ce fichier contient des styles agressifs pour s'assurer que les cartes Leaflet
 * s'affichent correctement dans les modals Bootstrap
 */

/* Forcer les dimensions du conteneur de carte */
.territoire-map-container {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 350px !important;
    position: relative !important;
    margin: 1rem 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Style pour le conteneur de carte principal */
#viewTerritoireMap {
    display: block !important;
    width: 100% !important;
    height: 350px !important;
    min-height: 350px !important;
    position: relative !important;
    z-index: 500 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Style pour les conteneurs de carte dynamiques */
[id^="viewTerritoireMap_"] {
    display: block !important;
    width: 100% !important;
    height: 350px !important;
    min-height: 350px !important;
    position: relative !important;
    z-index: 500 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Styles pour la carte dans la modal de territoire */
#viewTerritoireMap, 
#viewTerritoireMap_container,
[id^="viewTerritoireMap_"] {
    height: 300px !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 500 !important;
}

/* Forcer l'affichage de la carte Leaflet */
.leaflet-container {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Forcer l'affichage des contrôles Leaflet */
.leaflet-control-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
}

/* Forcer l'affichage des tuiles Leaflet */
.leaflet-tile-container img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 256px !important;
    height: 256px !important;
}

/* Forcer la visibilité des éléments de la modal */
#view-territoire-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CORRECTIF CRITIQUE: Forcer l'affichage de la modal viewTerritoireModal uniquement */
body.has-territoire-modal #viewTerritoireModal {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1055 !important; /* z-index standard de Bootstrap pour les modals */
}

body.has-territoire-modal #viewTerritoireModal .modal-dialog {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 1.75rem auto !important; /* Marge standard de Bootstrap */
    max-width: 800px !important; /* Largeur standard pour modal-lg */
}

body.has-territoire-modal #viewTerritoireModal .modal-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Masquer le spinner et afficher le contenu */
body.has-territoire-modal #viewTerritoireModal #view-territoire-loading {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

body.has-territoire-modal #viewTerritoireModal #view-territoire-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Forcer l'affichage du contenu de la modal */
#viewTerritoireModal .modal-dialog {
    transform: none !important;
    transition: transform 0.3s ease-out !important;
    margin: 1.75rem auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
    max-width: 500px !important;
    width: auto !important;
    pointer-events: auto !important;
}

/* Forcer l'affichage du contenu de la modal */
#viewTerritoireModal .modal-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 0.3rem !important;
    outline: 0 !important;
}

/* Forcer le style du backdrop spécifiquement pour la modal de territoire */
.modal-backdrop.show:not(.territoire-modal-backdrop) {
    opacity: 0.5;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 1040; /* Valeur par défaut de Bootstrap */
}

/* S'assurer que la modal a suffisamment d'espace */
.modal-body {
    min-height: auto !important;
    padding: 1rem !important;
}

/* Styles pour les contrôles Leaflet */
.leaflet-control-container {
    z-index: 1000 !important;
}

/* Correction pour les modals Bootstrap */
.modal.show .modal-dialog {
    z-index: 1050 !important;
}

/* Correction pour les tuiles Leaflet */
.leaflet-tile-container img {
    width: 256px !important;
    height: 256px !important;
}