/* public/css/modal-fix.css */
/* 
 * Corrections définitives des z-index pour les modals Bootstrap
 * Résout le problème des modals qui apparaissent derrière l'overlay
 */

/* Hiérarchie z-index stricte pour éviter les conflits */
:root {
  --zindex-content: 1;
  --zindex-header: 999;
  --zindex-sidebar: 1000;
  --zindex-modal-backdrop: 1050;
  --zindex-modal: 1055;
  --zindex-modal-dialog: 1060;
  --zindex-dropdown: 1070;
  --zindex-tooltip: 1080;
  --zindex-toast: 2000;
}

/* Fix principal - FORCE les modals au-dessus de tout */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: var(--zindex-modal-backdrop) !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: var(--zindex-modal) !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0 !important;
  display: none;
}

.modal.show {
  display: block !important;
  z-index: var(--zindex-modal) !important;
}

.modal-dialog {
  position: relative !important;
  z-index: var(--zindex-modal-dialog) !important;
  margin: 1.75rem auto !important;
  pointer-events: auto !important;
}

.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,.2) !important;
  border-radius: 0.5rem !important;
  outline: 0 !important;
  box-shadow: 0 10px 50px rgba(0,0,0,0.5) !important;
}

/* S'assurer que le contenu principal reste en arrière-plan */
.main-content {
  position: relative !important;
  z-index: var(--zindex-content) !important;
}

.content-area {
  position: relative !important;
  z-index: var(--zindex-content) !important;
}

/* Fix spécifique pour la sidebar */
.sidebar {
  position: fixed !important;
  z-index: var(--zindex-sidebar) !important;
}

/* Fix pour le header */
.top-header {
  position: relative !important;
  z-index: var(--zindex-header) !important;
}

/* Fix pour les dropdowns utilisateur */
.user-dropdown-menu {
  z-index: var(--zindex-dropdown) !important;
}

/* Correction pour les modals imbriqués */
.modal-backdrop:nth-of-type(2) {
  z-index: calc(var(--zindex-modal-backdrop) + 10) !important;
}

.modal:nth-of-type(2) {
  z-index: calc(var(--zindex-modal) + 10) !important;
}

.modal:nth-of-type(2) .modal-dialog {
  z-index: calc(var(--zindex-modal-dialog) + 10) !important;
}

/* Fix pour Select2 dans les modals */
.select2-container--open {
  z-index: calc(var(--zindex-modal) + 20) !important;
}

.select2-dropdown {
  z-index: calc(var(--zindex-modal) + 21) !important;
}

/* Fix pour les tooltips et popovers dans les modals */
.tooltip {
  z-index: var(--zindex-tooltip) !important;
}

.popover {
  z-index: var(--zindex-tooltip) !important;
}

/* Toast notifications toujours au-dessus */
.toast-container {
  position: fixed !important;
  z-index: var(--zindex-toast) !important;
}

/* Animation smooth pour les modals */
.modal.fade {
  transition: opacity 0.15s linear !important;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out !important;
  transform: translate(0, -50px) !important;
}

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

/* S'assurer que tous les éléments dans les modals sont cliquables */
.modal * {
  pointer-events: auto !important;
}

/* Fix pour éviter le scroll du body quand un modal est ouvert */
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Forcer la visibilité du contenu du modal */
.modal-header,
.modal-body,
.modal-footer {
  position: relative !important;
  z-index: 1 !important;
}

/* S'assurer que les boutons et formulaires sont cliquables */
.modal .btn,
.modal .form-control,
.modal .form-select,
.modal input,
.modal select,
.modal textarea,
.modal button {
  position: relative !important;
  z-index: auto !important;
  pointer-events: auto !important;
}

/* Debug - Bordure rouge pour voir la position du modal (à supprimer en production) */
/* .modal-dialog {
  border: 2px solid red !important;
} */