/**
 * UNIFIED MODAL FIX - Final Solution for All Modal Issues
 * 
 * This file provides the DEFINITIVE fix for modal backdrop overlay issues
 * caused by multiple Bootstrap CSS files loading simultaneously.
 * 
 * Problem: Multiple CSS files (Bootstrap CDN, admin-bundle, modal-fix.css, 
 * bootstrap5-compat.css) all define modal styles with conflicting z-index values.
 * 
 * Solution: Single source of truth with highest specificity and !important flags
 * to override ALL other modal styles.
 * 
 * Load Order: This file MUST be loaded LAST after all other CSS files.
 * 
 * Date: November 5, 2025
 */

/* ============================================
   Z-INDEX HIERARCHY (Official Bootstrap 5 Spec)
   ============================================
   
   Layout Elements:
   - Sticky: 1020
   - Fixed: 1030
   
   Modal System:
   - Modal Backdrop: 1050
   - Modal Container: 1055
   - Modal Dialog: 1056 (implicit, inherits from container)
   
   Overlays:
   - Tooltip: 1070
   - Popover: 1080
   
   ============================================ */

/* ============================================
   MODAL BACKDROP - CRITICAL FIX
   ============================================ */

/* Force correct z-index and visibility */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.fade.modal-backdrop,
.show.modal-backdrop {
  /* Z-index MUST be below modal but above everything else */
  z-index: 1050 !important;
  
  /* Full screen coverage */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  
  /* Dark semi-transparent overlay */
  background-color: rgba(0, 0, 0, 0.5) !important;
  
  /* Ensure it's a block element */
  display: block !important;
}

/* Fade animation for backdrop */
.modal-backdrop.fade {
  opacity: 0 !important;
  transition: opacity 0.15s linear !important;
}

.modal-backdrop.show {
  opacity: 0.5 !important;
}

/* Handle multiple backdrops (should never happen, but just in case) */
.modal-backdrop + .modal-backdrop {
  display: none !important;
}

/* ============================================
   MODAL CONTAINER - CRITICAL FIX
   ============================================ */

/* Modal must be ABOVE backdrop */
.modal,
.modal.fade,
.modal.show,
.fade.modal,
.show.modal {
  /* Z-index MUST be above backdrop */
  z-index: 1055 !important;
  
  /* Full screen container */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  
  /* Allow scrolling if content is tall */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  
  /* Remove outline */
  outline: 0 !important;
  
  /* Hidden by default */
  display: none !important;
}

/* Show modal when active */
.modal.show,
.show.modal,
.modal.in,
.in.modal {
  display: block !important;
}

/* ============================================
   MODAL DIALOG - POSITIONING
   ============================================ */

.modal-dialog {
  /* Relative positioning within fixed modal */
  position: relative !important;
  
  /* Center horizontally with auto margins */
  margin: 1.75rem auto !important;
  width: auto !important;
  max-width: 500px !important;
  
  /* Allow pointer events only on content */
  pointer-events: none !important;
  
  /* Ensure it's above backdrop */
  z-index: 1056 !important;
}

/* Centered modal */
.modal-dialog-centered {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem) !important;
}

/* Modal sizes */
.modal-sm .modal-dialog,
.modal-dialog.modal-sm {
  max-width: 300px !important;
}

.modal-lg .modal-dialog,
.modal-dialog.modal-lg {
  max-width: 800px !important;
}

.modal-xl .modal-dialog,
.modal-dialog.modal-xl {
  max-width: 1140px !important;
}

.modal-fullscreen .modal-dialog,
.modal-dialog.modal-fullscreen {
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

/* ============================================
   MODAL CONTENT - STYLING
   ============================================ */

.modal-content {
  /* Re-enable pointer events */
  pointer-events: auto !important;
  
  /* Flexbox for header/body/footer layout */
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  
  /* Background and border */
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.5rem !important;
  
  /* Shadow for depth */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  
  /* Remove outline */
  outline: 0 !important;
}

/* ============================================
   MODAL ANIMATIONS
   ============================================ */

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

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

/* Bootstrap 3 compatibility (.in class) */
.modal.in .modal-dialog {
  transform: translate(0, 0) !important;
}

/* ============================================
   MODAL COMPONENTS
   ============================================ */

/* Modal Header */
.modal-header {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem 1rem !important;
  border-bottom: 1px solid #dee2e6 !important;
  border-top-left-radius: calc(0.5rem - 1px) !important;
  border-top-right-radius: calc(0.5rem - 1px) !important;
}

.modal-title {
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
}

/* Modal Body */
.modal-body {
  position: relative !important;
  flex: 1 1 auto !important;
  padding: 1rem !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 210px) !important;
}

/* Modal Footer */
.modal-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0.75rem !important;
  border-top: 1px solid #dee2e6 !important;
  border-bottom-right-radius: calc(0.5rem - 1px) !important;
  border-bottom-left-radius: calc(0.5rem - 1px) !important;
}

.modal-footer > * {
  margin: 0.25rem !important;
}

/* ============================================
   CLOSE BUTTONS
   ============================================ */

/* Bootstrap 5 close button */
.modal-header .btn-close {
  padding: 0.5rem 0.5rem !important;
  margin: -0.5rem -0.5rem -0.5rem auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.375rem !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
}

.modal-header .btn-close:hover {
  opacity: 1 !important;
}

/* Bootstrap 3 close button (X) */
.modal-header .close {
  padding: 0 !important;
  background-color: transparent !important;
  border: 0 !important;
  margin: -2px -2px -2px auto !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #000 !important;
  text-shadow: 0 1px 0 #fff !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
}

.modal-header .close:hover {
  opacity: 0.75 !important;
  text-decoration: none !important;
}

/* ============================================
   BODY SCROLLING FIX
   ============================================ */

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

/* Don't add padding to fixed elements */
body.modal-open .fixed-top,
body.modal-open .fixed-bottom,
body.modal-open .sticky-top,
body.modal-open .sb-topnav,
body.modal-open .sb-sidenav {
  padding-right: 0 !important;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .modal-content {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
  }

  .modal-header {
    border-bottom-color: #374151 !important;
  }

  .modal-footer {
    border-top-color: #374151 !important;
  }

  .modal-header .close {
    color: #f3f4f6 !important;
    text-shadow: none !important;
  }

  .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
  }
}

/* ============================================
   RESPONSIVE MODAL
   ============================================ */

@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.5rem !important;
    max-width: calc(100% - 1rem) !important;
  }

  .modal-dialog-centered {
    min-height: calc(100% - 1rem) !important;
  }

  .modal-body {
    max-height: calc(100vh - 150px) !important;
  }

  /* Full screen on small devices */
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .modal-fullscreen-sm-down .modal-content {
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px !important;
  }
}

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

  .modal-xl .modal-dialog,
  .modal-dialog.modal-xl {
    max-width: 1140px !important;
  }
}

/* ============================================
   NESTED MODALS (Edge Case)
   ============================================ */

/* If multiple modals somehow exist, stack them properly */
.modal.show ~ .modal.show {
  z-index: 1060 !important;
}

.modal.show ~ .modal.show .modal-backdrop {
  z-index: 1055 !important;
}

/* Only show one backdrop */
.modal-backdrop.show ~ .modal-backdrop.show {
  display: none !important;
}

/* ============================================
   SCROLLABLE MODAL BODY
   ============================================ */

.modal-dialog-scrollable {
  height: calc(100% - 3.5rem) !important;
}

.modal-dialog-scrollable .modal-content {
  max-height: 100% !important;
  overflow: hidden !important;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto !important;
  max-height: none !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Remove focus outline from modal */
.modal:focus {
  outline: 0 !important;
}

/* Ensure focusable elements in modal can be tabbed */
.modal-content {
  position: relative !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .modal,
  .modal-backdrop {
    display: none !important;
  }
}

/* ============================================
   DEBUGGING (Remove in production)
   ============================================ */

/* Uncomment to debug modal z-index issues */
/*
.modal-backdrop::before {
  content: "Backdrop Z: 1050";
  position: absolute;
  top: 10px;
  left: 10px;
  background: yellow;
  color: black;
  padding: 5px;
  font-size: 12px;
  z-index: 9999;
}

.modal::before {
  content: "Modal Z: 1055";
  position: absolute;
  top: 50px;
  left: 10px;
  background: lime;
  color: black;
  padding: 5px;
  font-size: 12px;
  z-index: 9999;
}
*/

/* ============================================
   ANIMATION PERFORMANCE
   ============================================ */

/* Use GPU acceleration for smoother animations */
.modal.fade .modal-dialog {
  will-change: transform !important;
}

.modal-backdrop.fade {
  will-change: opacity !important;
}

/* ============================================
   VENDOR-SPECIFIC FIXES
   ============================================ */

/* iOS Safari smooth scrolling */
.modal {
  -webkit-overflow-scrolling: touch !important;
}

/* Prevent iOS zoom on input focus */
.modal-body input,
.modal-body select,
.modal-body textarea {
  font-size: 16px !important;
}

/* ============================================
   END OF UNIFIED MODAL FIX
   ============================================ */