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

/* Modal Backdrops */
.modal-backdrop {
    z-index: 1200 !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 styles */
.modal[style*="z-index"] {
    z-index: 1210 !important;
}

.modal-backdrop[style*="z-index"] {
    z-index: 1200 !important;
}