/* Modal Comprehensive Fix - Ultimate Solution */
/* This file ensures modals work perfectly across all browsers and scenarios */

/* CRITICAL: Reset Bootstrap modal z-index hierarchy */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1040 !important; /* Backdrop behind modal */
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  pointer-events: auto !important; /* Allow backdrop clicks to close modal */
}

/* Modal container - highest priority */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1055 !important; /* Higher than backdrop - CRITICAL! */
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0 !important;
  pointer-events: none !important; /* Let clicks pass through empty space to backdrop */
}

.modal.show {
  display: block !important;
}

/* Modal dialog wrapper */
.modal-dialog {
  position: relative !important;
  width: auto !important;
  margin: 1.75rem auto !important;
  pointer-events: none !important; /* Pass clicks through empty space */
  max-width: 500px !important;
  z-index: 1056 !important; /* Higher than modal container */
}

/* Modal content - THIS is where interactions happen */
.modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  pointer-events: auto !important; /* CRITICAL: Enable all interactions HERE */
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.375rem !important;
  outline: 0 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  z-index: 1057 !important; /* Highest - content is always on top */
}

/* CRITICAL: Ensure ALL interactive elements work */
.modal-header,
.modal-body,
.modal-footer {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1058 !important; /* Above modal-content */
}

/* Make sure all direct descendants of modal content areas are interactive */
.modal-content *,
.modal-header *,
.modal-body *,
.modal-footer * {
  pointer-events: auto !important;
  position: relative !important; /* Ensure proper stacking context */
}

/* Specific interactive elements */
.modal .btn,
.modal .btn-close,
.modal input,
.modal textarea,
.modal select,
.modal button,
.modal a,
.modal label,
.modal .form-control,
.modal .form-check,
.modal .form-check-input,
.modal [role="button"],
.modal [tabindex],
.modal [onclick] {
  pointer-events: auto !important;
  z-index: 1059 !important; /* Highest - interactive elements always on top */
  position: relative !important;
  cursor: pointer !important;
}

/* Ensure text inputs have text cursor */
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal textarea {
  cursor: text !important;
}

/* Fix for form elements specifically */
.modal input:focus,
.modal textarea:focus,
.modal select:focus,
.modal button:focus {
  outline: 2px solid #0d6efd !important;
  outline-offset: 2px !important;
  z-index: 1055 !important;
}

/* Prevent body scrolling when modal is open */
body.modal-open {
  overflow: hidden !important;
  padding-right: 15px !important;
}

/* Modal responsiveness */
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px !important;
    margin: 1.75rem auto !important;
  }
}

@media (min-width: 992px) {
  .modal-lg {
    max-width: 800px !important;
  }
}

/* Focus management */
.modal:focus {
  outline: 0 !important;
}

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

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

/* Ensure backdrop click works */
.modal-backdrop {
  cursor: pointer !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .modal-content {
    border: 2px solid #000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none !important;
  }
}