@charset "UTF-8";
/* Fix for Alpine.js modal overlays and Vue.js cohabitation */
/* Ensure modals appear above other content */
.filament-modal {
  z-index: 999 !important;
}

.filament-modal-close-overlay {
  z-index: 1000 !important;
}

.filament-modal-window {
  z-index: 1001 !important;
}

/* Filament specific modal fixes */
/* Ensure Filament modals have the highest z-index */
.fi-modal {
  z-index: 9999 !important;
}

.fi-modal-content {
  z-index: 10000 !important;
}

/* Fix for Livewire/Filament modal backdrop */
.fi-modal-backdrop,
.filament-modal-backdrop,
[x-data] .fixed.inset-0.bg-black {
  z-index: 9998 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure modal content is always visible */
.fi-modal-window,
.filament-modal-window,
[role=dialog] {
  z-index: 10001 !important;
  position: fixed !important;
}

/* Hide overlay when modal is closed */
.filament-modal[x-data] div[x-show=isOpen] {
  transition: opacity 0.3s ease;
}

.filament-modal[x-data] div[x-show=isOpen][style*="display: none"] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Prevent Vue.js from interfering with Alpine.js */
[x-data] {
  /* Ensure Alpine.js directives are preserved */
}

/* Fix for persistent modal overlays */
.fixed.inset-0.bg-black\\\/50,
.fixed.inset-0.bg-gray-500 {
  transition: opacity 300ms;
}

.fixed.inset-0.bg-black\\\/50[style*="display: none"],
.fixed.inset-0.bg-gray-500[style*="display: none"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure body scroll is restored when modal closes */
body:not(.modal-open) {
  overflow: auto !important;
}

/* Force hide elements with x-cloak when Alpine.js hasn't loaded yet */
[x-cloak] {
  display: none !important;
}

/* Fix modales Filament cachées par conflit Vue.js/Alpine.js */
[x-show=isOpen]:not([style*="display: none"]) .filament-modal-close-overlay {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

[x-show=isOpen]:not([style*="display: none"]) .filament-modal-window {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

[x-show=isOpen]:not([style*="display: none"]) [x-show=isShown] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix for invisible Filament modal content */
.fi-modal[x-data] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
}

/* Ensure modal shows when isOpen is true */
[x-show=isOpen]:not([style*="display: none"]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Override any conflicting Tailwind utilities */
.fi-modal.fixed {
  position: fixed !important;
}

.fi-modal .bg-white {
  background-color: white !important;
  z-index: 10002 !important;
}