/* =================================
   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,
#vaultSuccessModal,
#exportModal,
.export-modal {
    z-index: 1210 !important;
}

/* Modal Backdrops - MUST be below modal content - NO DIMMING */
.modal-backdrop {
    z-index: 1040 !important; /* Bootstrap default, below modal */
    pointer-events: none !important; /* Allow clicks to pass through to modal */
    opacity: 0 !important;
    background-color: transparent !important;
}

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

/* Modal content should be on top of dialog and always clickable */
.modal-content {
    z-index: 1211 !important;
    position: relative;
    pointer-events: auto !important; /* Ensure all modal content is clickable */
}

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

.modal.show ~ .modal.show .modal-backdrop {
    z-index: 1040 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background-color: transparent !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: 1040 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background-color: transparent !important;
}

/* Ensure modal is responsive, centered, and clickable */
.modal.fade.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important; /* Ensure modal captures clicks */
}

.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 modals should be on top of everything */
#saveSuccessModal,
#vaultSuccessModal {
    z-index: 1220 !important;
}

#saveSuccessModal .modal-backdrop,
#vaultSuccessModal .modal-backdrop {
    z-index: 1040 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background-color: transparent !important;
}

#saveSuccessModal .modal-dialog,
#vaultSuccessModal .modal-dialog {
    z-index: 1220 !important;
}

#saveSuccessModal .modal-content,
#vaultSuccessModal .modal-content {
    z-index: 1221 !important;
}

/* Override any conflicting styles */
.modal[style*="z-index"] {
    z-index: 1210 !important;
}

.modal-backdrop[style*="z-index"] {
    z-index: 1040 !important; /* Keep backdrop below modal */
    pointer-events: none !important;
    opacity: 0 !important;
    background-color: transparent !important;
}

/* CRITICAL FIX: Backdrop must NEVER block modal interaction - NO DIMMING */
.modal-backdrop.show,
.modal-backdrop.fade.show {
    pointer-events: none !important;
    z-index: 1040 !important;
    opacity: 0 !important;
    background-color: transparent !important;
}

/* All modals must be interactive */
.modal,
.modal.show,
.modal.fade.show {
    pointer-events: auto !important;
}

/* Modal dialog and content must capture all clicks */
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    pointer-events: auto !important;
}

/* Ensure ALL interactive elements in modals work */
.modal input,
.modal select,
.modal textarea,
.modal button,
.modal a,
.modal label,
.modal .form-control,
.modal .btn,
.modal .form-check-input,
.modal .form-select {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Specific fix for buttons and links */
.modal button:not(:disabled),
.modal a:not([disabled]) {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ensure modal is above ALL other elements */
.modal.show {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

/* Force backdrop to stay below and non-interactive - NO DIMMING */
.modal-backdrop.show,
.modal-backdrop.fade.show,
.modal ~ .modal-backdrop,
.modal + .modal-backdrop {
    z-index: 1040 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    background-color: transparent !important;
}