/* =================================
   MODAL Z-INDEX FIX - CRITICAL
   Ensures all modals are ALWAYS on top
   ================================= */

/* Z-Index Hierarchy:
   - Navigation: 1000
   - Toast notifications: 1100
   - Modal backdrops: 1200
   - Modals: 1210
   - Nested modals: 1220

   This ensures modals are ALWAYS visible and clickable
*/

/* Goal Creation Modal and ALL Bootstrap Modals */
.modal,
#goalCreationModal,
#saveSuccessModal,
#successModal,
#combinedModal,
#upgradeModal,
#exportModal,
.export-modal {
    z-index: 1210 !important;
}

/* Modal Backdrops - NO DIMMING */
.modal-backdrop {
    z-index: 1200 !important;
    opacity: 0 !important;
    background-color: transparent !important;
    pointer-events: none !important;
}

/* Ensure modal dialog is above backdrop */
.modal-dialog {
    z-index: 1210 !important;
}

/* Modal content should be on top of dialog */
.modal-content {
    z-index: 1211 !important;
    position: relative;
}

/* For nested modals (if any) */
.modal.show ~ .modal.show {
    z-index: 1220 !important;
}

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

/* Export modal specific fix */
.export-modal,
#exportModal {
    z-index: 1210 !important;
}

.export-modal .modal-dialog,
#exportModal .modal-dialog {
    z-index: 1210 !important;
}

.export-modal .modal-content,
#exportModal .modal-content {
    z-index: 1211 !important;
}

.export-modal + .modal-backdrop,
#exportModal + .modal-backdrop {
    z-index: 1200 !important;
}

/* Ensure modal is responsive and centered */
.modal.fade.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

/* Mobile fixes */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

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

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

/* Fix for bottom text visibility - ensure footer text is below modals */
footer,
.footer,
.site-footer {
    z-index: 100 !important;
    position: relative;
}

/* Ensure form elements in modals are clickable */
.modal input,
.modal select,
.modal textarea,
.modal button {
    position: relative;
    z-index: 1;
}

/* Fix for dropdown menus in modals */
.modal .dropdown-menu {
    z-index: 1212 !important;
}

/* Success modal should be on top of everything */
#saveSuccessModal {
    z-index: 1220 !important;
}

#saveSuccessModal .modal-backdrop {
    z-index: 1215 !important;
}

/* Override any conflicting inline styles */
.modal[style*="z-index"]:not(#combinedImportModal) {
    z-index: 1210 !important;
}

.modal-backdrop[style*="z-index"]:not([data-combined-modal]) {
    z-index: 1200 !important;
}

/* Critical override for combinedImportModal inline styles */
#combinedImportModal[style*="z-index"] {
    z-index: 999999 !important;
    display: flex !important;
    pointer-events: auto !important;
}

#combinedImportModal .modal-dialog[style],
#combinedImportModal .modal-content[style] {
    pointer-events: auto !important;
}

/* Combined Modal specific fixes */
#combinedModal {
    pointer-events: auto !important;
}

#combinedModal .modal-dialog {
    pointer-events: auto !important;
}

#combinedModal .modal-content {
    pointer-events: auto !important;
    background-color: white !important;
}

#combinedModal .modal-body,
#combinedModal .modal-header,
#combinedModal .modal-footer {
    pointer-events: auto !important;
}

/* Ensure all interactive elements in combined modal are clickable */
#combinedModal input,
#combinedModal button,
#combinedModal .btn,
#combinedModal .form-check-input,
#combinedModal .form-check-label,
#combinedModal .list-group-item {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix for modal appearing behind backdrop */
/* All modals: container blocks backdrop clicks, dialog allows interaction */
.modal.show {
    pointer-events: none !important;
}

.modal.show .modal-dialog {
    pointer-events: auto !important;
}

/* Ensure goal modals have proper pointer-events */
#goalCreationModal.modal.show,
#saveSuccessModal.modal.show {
    pointer-events: none !important;
}

#goalCreationModal .modal-dialog,
#saveSuccessModal .modal-dialog {
    pointer-events: auto !important;
}

#goalCreationModal .modal-content,
#saveSuccessModal .modal-content {
    pointer-events: auto !important;
}

/* Ensure all form elements in goal modals are interactive */
#goalCreationModal input,
#goalCreationModal textarea,
#goalCreationModal select,
#goalCreationModal button,
#goalCreationModal .btn,
#goalCreationModal .form-control,
#goalCreationModal .form-select,
#saveSuccessModal button,
#saveSuccessModal .btn,
#saveSuccessModal a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure combined modals have correct pointer-events pattern */
/* Modal container blocks clicks on backdrop area */
#combinedImportModal.modal.show,
#combinedModal.modal.show {
    pointer-events: none !important;
}

/* But modal-dialog and its children allow clicks */
#combinedImportModal.modal.show .modal-dialog,
#combinedModal.modal.show .modal-dialog {
    pointer-events: auto !important;
}

/* Chrome-specific fix for form elements in combined modal */
#combinedModal .form-check,
#combinedModal .mb-3,
#combinedModal .card,
#combinedModal .card-body {
    pointer-events: auto !important;
}

#combinedModal .form-check-input,
#combinedModal .form-check-label {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure divs wrapping checkboxes are clickable */
#combinedModal div[class*="form-check"],
#combinedModal div[class*="mb-"],
#combinedModal label {
    pointer-events: auto !important;
}

/* Fix for pagination buttons */
#combinedModal #apply-combined-selection {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

/* ================================================================
   COMBINED IMPORT MODAL - Comprehensive Pointer Events Fix
   ================================================================ */

/* Ensure all interactive elements in combinedImportModal are clickable */
#combinedImportModal input,
#combinedImportModal button,
#combinedImportModal .btn,
#combinedImportModal label,
#combinedImportModal .list-group-item,
#combinedImportModal .form-check,
#combinedImportModal .form-check-input,
#combinedImportModal .form-check-label,
#combinedImportModal .card,
#combinedImportModal .card-body {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Apply button and pagination controls */
#combinedImportModal #combinedImportApplyBtn,
#combinedImportModal #goalsPrevBtn,
#combinedImportModal #goalsNextBtn,
#combinedImportModal #vaultPrevBtn,
#combinedImportModal #vaultNextBtn {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2 !important;
}