﻿/* ════════════════════════════════════════════════════════════════════════════
   FICHIER DE GESTION CENTRALISÉE DES Z-INDEX - VERSION CORRIGÉE
   Application: NETELZOE CONNECT
   
   CORRECTION: Suppression des règles génériques trop agressives sur .modal et .modal-backdrop
   qui causaient des conflits avec Bootstrap et rendaient les modals non cliquables.
   
   PRINCIPE: On ne surcharge QUE les modals spécifiques qui ont besoin d'une hiérarchie,
   on laisse Bootstrap gérer les modals standards (z-index: 1050 pour modal, 1040 pour backdrop)
   
   HIÉRARCHIE GLOBALE (du plus haut au plus bas):
   ─────────────────────────────────────────────
   30000+ : Alertes & Messages système (SweetAlert)
   10000+ : Notifications & Toasts
   5000+  : Chat & Communication en temps réel
   1100+  : Éléments flottants (Profil, etc.)
   1080+  : Modaux de 3ème niveau (modaux au-dessus de modaux au-dessus de modaux)
   1070+  : Modaux de 2ème niveau (modaux au-dessus d'autres modaux)
   1060+  : Modaux de 1er niveau (modaux principaux)
   1050   : Modaux Bootstrap standard (LAISSER BOOTSTRAP GÉRER)
   1040   : Backdrops Bootstrap standard (LAISSER BOOTSTRAP GÉRER)
   1000+  : Éléments UI spéciaux (Maps, Legends, Autocomplete)
   100+   : Éléments de page normaux
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 1 : ALERTES & MESSAGES SYSTÈME (30000+)
   Toujours visible au-dessus de TOUT le reste de l'application
   ════════════════════════════════════════════════════════════════════════════ */
.swal2-container {
    z-index: 30000 !important;
}

    /* EXCEPTION : SweetAlert utilisé pour détail mission (doit être SOUS le modal profil agent) */
    .swal2-container:has(.mission-modal-popup) {
        z-index: 1065 !important; /* Entre modal mission standard et modal profil agent */
    }

        .swal2-container:has(.mission-modal-popup) .swal2-popup {
            z-index: 1065 !important;
        }

        /* Le backdrop du SweetAlert mission doit être sous le modal profil */
        .swal2-container:has(.mission-modal-popup) + .swal2-backdrop {
            z-index: 1064 !important;
        }

/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 2 : NOTIFICATIONS & TOASTS (10000+)
   Au-dessus de tous les modaux mais sous SweetAlert
   ════════════════════════════════════════════════════════════════════════════ */
.export-notification,
.geolocation-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
}


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 3 : CHAT & COMMUNICATION (5000+)
   Système de chat et notifications en temps réel
   ════════════════════════════════════════════════════════════════════════════ */
.chat-notification-system {
    z-index: 5000;
}

.chat-window {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 5002;
    display: none;
}

.notification-panel {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 5001;
    display: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 4 : ÉLÉMENTS FLOTTANTS (1100+)
   Carte de profil flottante et autres éléments toujours visibles
   ════════════════════════════════════════════════════════════════════════════ */
.floating-profile-card {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1100;
}


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 5 : MODAUX DE 3ÈME NIVEAU (1080+)
   Modaux ouverts au-dessus d'autres modaux déjà ouverts au-dessus de modaux
   ════════════════════════════════════════════════════════════════════════════ */

/* Modal de demande de document (ouvert depuis le profil agent) */
#requestDocumentModal {
    z-index: 1085 !important;
}

    #requestDocumentModal .modal-dialog {
        z-index: 1086 !important;
    }

    #requestDocumentModal.show ~ .modal-backdrop {
        z-index: 1084 !important;
    }

/* Modal de rejet de devis (ouvert depuis le modal de devis) */
#quoteRejectModal {
    z-index: 1081 !important;
}

    #quoteRejectModal .modal-dialog {
        z-index: 1082 !important;
    }

    #quoteRejectModal.show ~ .modal-backdrop {
        z-index: 1080 !important;
    }

/* Modal d'itinéraire avec options de transport */
#routeModal {
    z-index: 1081 !important;
}

    #routeModal .modal-dialog {
        z-index: 1082 !important;
    }

    #routeModal.show ~ .modal-backdrop {
        z-index: 1080 !important;
    }
/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 6 : MODAUX DE 2ÈME NIVEAU (1070+)
   Modaux ouverts au-dessus d'autres modaux principaux
   ════════════════════════════════════════════════════════════════════════════ */

/* Modal de profil agent (ouvert depuis détail mission ou planning) */
#agentProfileModal {
    z-index: 1076 !important;
}

    #agentProfileModal .modal-dialog {
        z-index: 1077 !important;
    }

    #agentProfileModal .modal-content {
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        border: 1px solid rgba(0, 123, 255, 0.2);
    }

    #agentProfileModal.show ~ .modal-backdrop {
        z-index: 1075 !important;
    }

/* Correction spécifique pour Chrome : forcer le backdrop du profil agent */
body.modal-open #agentProfileModal.show ~ .modal-backdrop.show {
    z-index: 1075 !important;
    opacity: 0.5 !important;
}

/* Force le modal profil agent à être AU-DESSUS du SweetAlert mission */
#agentProfileModal.overlapping-modal {
    z-index: 1076 !important;
}

/* Le backdrop du modal profil doit être entre SweetAlert et le modal */
body:has(.swal2-container .mission-modal-popup) #agentProfileModal ~ .modal-backdrop {
    z-index: 1075 !important;
}

/* MODALS DYNAMIQUES - Profil agent (généré par JS) */
/* Cibler le modal qui contient la classe agent-profile-container */
.modal:has(.agent-profile-container) {
    z-index: 1076 !important;
    isolation: isolate;
}

    .modal:has(.agent-profile-container) .modal-dialog {
        position: relative;
        z-index: 1077 !important;
    }

    .modal:has(.agent-profile-container) .modal-content {
        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        border: 1px solid rgba(0, 123, 255, 0.2);
    }

    .modal:has(.agent-profile-container).show ~ .modal-backdrop {
        z-index: 1075 !important;
    }

/* Force backdrop profil agent au-dessus de backdrop mission */
body.modal-open .modal:has(.agent-profile-container).show ~ .modal-backdrop.show {
    z-index: 1075 !important;
    opacity: 0.5 !important;
}

/* Modal de formulaire agent (Create/Edit) - ouvert depuis modal liste agents */
#agentFormModal {
    z-index: 1073 !important;
}

    #agentFormModal .modal-dialog {
        z-index: 1074 !important;
    }

    #agentFormModal.show ~ .modal-backdrop {
        z-index: 1072 !important;
    }

/* Modal de type d'invitation (ouvert depuis modal liste agents) */
#invitationTypeModal {
    z-index: 1073 !important;
}

    #invitationTypeModal .modal-dialog {
        z-index: 1074 !important;
    }

    #invitationTypeModal.show ~ .modal-backdrop {
        z-index: 1072 !important;
    }

/* Modal de formulaire client (Create/Edit) - ouvert depuis modal liste clients */
#customerFormModal {
    z-index: 1073 !important;
}

    #customerFormModal .modal-dialog {
        z-index: 1074 !important;
    }

    #customerFormModal.show ~ .modal-backdrop {
        z-index: 1072 !important;
    }

/* Modal de devis (ouvert depuis modal création/édition mission) */
#quoteModal {
    z-index: 1071 !important;
}

    #quoteModal .modal-dialog {
        z-index: 1072 !important;
    }

    #quoteModal.show ~ .modal-backdrop {
        z-index: 1070 !important;
    }

/* Tooltips et Popovers dans les modaux de 2ème niveau */
.modal .tooltip {
    z-index: 1078 !important;
}

.modal .popover {
    z-index: 1078 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 7 : MODAUX DE 1ER NIVEAU (1060+)
   Modaux principaux de l'application
   ════════════════════════════════════════════════════════════════════════════ */

/* GESTION DES AGENTS */
/* Modal principal - Liste des agents */
#agentsModal {
    z-index: 1067 !important;
}

    #agentsModal .modal-dialog {
        z-index: 1068 !important;
    }

    #agentsModal.show ~ .modal-backdrop {
        z-index: 1066 !important;
    }

/* GESTION DES CLIENTS */
/* Modal principal - Liste des clients */
#customersModal {
    z-index: 1067 !important;
}

    #customersModal .modal-dialog {
        z-index: 1068 !important;
    }

    #customersModal.show ~ .modal-backdrop {
        z-index: 1066 !important;
    }

/* GESTION DES MISSIONS */
/* Modal de création/édition de mission */
#missionModal {
    z-index: 1066 !important;
}

    #missionModal .modal-dialog {
        z-index: 1067 !important;
    }

    #missionModal .modal-content {
        z-index: 1066;
    }

    #missionModal.show ~ .modal-backdrop {
        z-index: 1065 !important;
    }

/* MODALS DYNAMIQUES - Détail mission (généré par JS) */
/* Cibler le modal qui contient la classe mission-details-container-optimized */
#missionDetailModal {
    z-index: 1066 !important;
}

    #missionDetailModal .modal-dialog {
        z-index: 1067 !important;
    }

    #missionDetailModal.show ~ .modal-backdrop,
    #missionDetailModal ~ .modal-backdrop.show {
        z-index: 1065 !important;
    }

/* Modal de completion mission (rapport de mission) */
#completeMissionModal {
    z-index: 1067 !important;
}

    #completeMissionModal .modal-dialog {
        z-index: 1068 !important;
    }

    #completeMissionModal.show ~ .modal-backdrop {
        z-index: 1066 !important;
    }

/* ADMINISTRATION */
/* Modaux de configuration (secteurs, types de nettoyage, équipements, config) */

#sectorModal,
#cleaningTypeModal,
#equipmentModal {
    z-index: 1067 !important;
}

    #sectorModal.show .modal-dialog,
    #cleaningTypeModal.show .modal-dialog,
    #equipmentModal.show .modal-dialog {
        z-index: 1068 !important;
    }

    #sectorModal.show ~ .modal-backdrop,
    #cleaningTypeModal.show ~ .modal-backdrop,
    #equipmentModal.show ~ .modal-backdrop {
        z-index: 1066 !important;
    }

/* GESTION DES FACTURES */
/* MODALS DYNAMIQUES - Détail factures (généré par JS) */
#invoiceDetailsModal {
    z-index: 1065 !important;
}

    #invoiceDetailsModal .modal-dialog {
        z-index: 1066 !important;
    }

    #invoiceDetailsModal.show ~ .modal-backdrop,
    #invoiceDetailsModal ~ .modal-backdrop.show {
        z-index: 1064 !important;
    }

/* MODALS DYNAMIQUES - Edition factures (généré par JS) */
#invoiceEditModal {
    z-index: 1065 !important;
}

    #invoiceEditModal .modal-dialog {
        z-index: 1066 !important;
    }

    #invoiceEditModal.show ~ .modal-backdrop,
    #invoiceEditModal ~ .modal-backdrop.show {
        z-index: 1064 !important;
    }

/* PLANNING */
/* Modal d'édition de planning (doit être au-dessus des autres modaux de planning) */
#schedule-edit-modal {
    z-index: 1065 !important;
}

    #schedule-edit-modal .modal-dialog {
        z-index: 1066 !important;
        margin: 1.75rem auto !important;
    }

    #schedule-edit-modal.show ~ .modal-backdrop {
        z-index: 1064 !important;
    }

/* Modaux FullCalendar (fonctionnent bien, on garde la structure actuelle) */
.fc .modal {
    z-index: 1061 !important;
}

.fc .modal-backdrop {
    z-index: 1060 !important;
}

/* EXPORTS */
/* Modal d'export */
#exportModal {
    z-index: 1061 !important;
}

    #exportModal .modal-dialog {
        z-index: 1062 !important;
        margin: 1.75rem auto !important;
    }

    #exportModal.show ~ .modal-backdrop {
        z-index: 1060 !important;
    }

/* EMAILS BULK */
/* Modal d'options email (envoi groupé) */
#emailOptionsModal {
    z-index: 1061 !important;
}

    #emailOptionsModal.show ~ .modal-backdrop {
        z-index: 1060 !important;
    }


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 8 : MODAUX BOOTSTRAP STANDARD (1050+)
   Configuration de base pour tous les modaux Bootstrap NON SPÉCIFIQUES
   
   ⚠️ IMPORTANT: On ne force PAS de z-index ici pour laisser Bootstrap gérer
   les modaux standards. On ne surcharge QUE les modaux spécifiques ci-dessus.
   ════════════════════════════════════════════════════════════════════════════ */

/* Transitions fluides pour tous les modaux */
.modal.fade .modal-dialog {
    transition: transform 0.15s ease-out !important;
}

.modal.show .modal-dialog {
    transform: none !important;
}

/* Headers et footers sticky dans les modaux */
.modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: white;
}

.modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 2px solid #e9ecef;
    z-index: 1;
}

/* Prévenir les conflits d'événements sur les boutons */
.modal .btn {
    pointer-events: auto !important;
}

/* Stabiliser les formulaires dans les modaux */
.modal form {
    position: relative;
    z-index: auto;
}

/* Overlays de chargement dans les modaux */
.dashboard-loading-overlay,
.import-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1055;
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 9 : CORRECTIONS BOOTSTRAP (important)
   Corrections pour éviter les conflits entre modaux multiples
   ════════════════════════════════════════════════════════════════════════════ */

/* Correction pour le body quand modal ouvert */
body.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important;
}

/* Correction backdrop Bootstrap par défaut - NE PAS FORCER DE Z-INDEX ICI */
/* Bootstrap gère automatiquement : backdrop à 1040, modal à 1050 */

/* UNIQUEMENT pour les cas de modaux multiples, empiler les backdrops */
.modal-backdrop + .modal-backdrop {
    opacity: 0.7 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   NIVEAU 10 : ÉLÉMENTS UI SPÉCIAUX (1000+)
   Autocomplétion, maps, légendes, barres d'actions
   ════════════════════════════════════════════════════════════════════════════ */

/* AUTOCOMPLÉTION D'ADRESSES */
.location-suggestions {
    position: absolute;
    z-index: 1055;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    width: 100%;
    margin-top: 2px;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
}

/* Suggestions dans les modaux (z-index plus élevé) */
.modal .location-suggestions {
    z-index: 1090 !important;
}

/* Correction spécifique pour modal mission */
#missionModal .input-group .location-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 40px;
    z-index: 1090;
    max-height: 320px;
}

/* Container de suggestions d'adresse */
.address-suggestions {
    z-index: 1055;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Résultats de recherche d'agents */
.agent-results-container {
    position: absolute;
    top: 100%;
    z-index: 1056;
}

/* MAPS & GÉOLOCALISATION */
.map-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.map-legend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

/* CALENDRIER */
.calendar-loading {
    position: absolute;
    z-index: 1000;
}

/* BARRE D'ACTIONS BULK */
.bulk-actions-bar {
    position: sticky;
    top: 60px;
    z-index: 1000;
}

/* CHECKOUT - Actions de paiement */
.payment-actions {
    position: fixed;
    bottom: 0;
    z-index: 1000;
}

/* SUBSCRIPTION - Boutons CTA mobiles */
.mobile-cta-buttons {
    position: sticky;
    top: 80px;
    z-index: 100;
}

/* TABLEAUX - Headers sticky */
.invoices-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}


/* ════════════════════════════════════════════════════════════════════════════
   CORRECTIONS SPÉCIFIQUES CHROME VS EDGE
   ════════════════════════════════════════════════════════════════════════════ */

/* Forcer l'ordre d'empilement correct pour Chrome */
#agentProfileModal {
    isolation: isolate; /* Crée un nouveau contexte d'empilement */
}

    /* S'assurer que le dialog du profil agent est bien au-dessus */
    #agentProfileModal .modal-dialog {
        position: relative;
        z-index: 1077 !important;
    }

/* Backdrop spécifique au profil agent doit être en dessous du dialog */
.modal-backdrop.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}


/* ════════════════════════════════════════════════════════════════════════════
   NOTES DE MAINTENANCE
   ════════════════════════════════════════════════════════════════════════════
   
   RÈGLES D'OR POUR MODIFIER CE FICHIER :
   ────────────────────────────────────────
   
   1. NE JAMAIS forcer de z-index sur .modal ou .modal-backdrop génériques
   2. TOUJOURS cibler les IDs spécifiques (#agentsModal, #missionModal, etc.)
   3. Pour les backdrops, utiliser le sélecteur ~ (frère adjacent)
      Exemple: #myModal.show ~ .modal-backdrop
   4. Respecter la hiérarchie des niveaux (1 à 10)
   5. TESTER dans Chrome ET Edge après chaque modification
   
   STRUCTURE D'UN MODAL DANS LA HIÉRARCHIE :
      #monModal { z-index: XXXX !important; }
      #monModal .modal-dialog { z-index: XXXX+1 !important; }
      #monModal.show ~ .modal-backdrop { z-index: XXXX-1 !important; }
   
   DÉBOGAGE D'UN MODAL NON CLIQUABLE :
   1. Inspecter l'élément modal dans DevTools
   2. Vérifier le z-index du modal vs son backdrop
   3. Le modal DOIT avoir un z-index > backdrop
   4. Si backdrop > modal → modal non cliquable (écran grisé bloque)
   
   EXEMPLES D'AJOUT :
   ──────────────────
   
   Nouveau modal de 2ème niveau (ouvert depuis un modal principal) :
   → Le placer dans NIVEAU 6 avec z-index entre 1070-1079
   
   Nouveau modal principal :
   → Le placer dans NIVEAU 7 avec z-index entre 1060-1069
   
   Nouveau système de notification :
   → Le placer dans NIVEAU 2 avec z-index 10000+
   
   ════════════════════════════════════════════════════════════════════════════ */
