/* ==========================================================================
   MODAL VISIBILITY FIXES
   Universal solution for popup/modal visibility issues
   ========================================================================== */

/* Ensure modals always appear above other content */
.modal {
    z-index: 1000050 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    outline: 0 !important;
}

/* Ensure modal backdrop appears correctly */
.modal-backdrop {
    z-index: 1000040 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ensure modal dialog is centered and visible */
.modal-dialog {
    z-index: 1000051 !important;
    position: relative !important;
    width: auto !important;
    margin: 50px auto !important;
    max-width: 600px !important;
    pointer-events: none !important;
    min-height: auto !important;
}

/* Responsive modal dialog positioning */
@media (min-width: 768px) {
    .modal-dialog {
        margin: 50px auto !important;
    }
}

/* Ensure modal content is visible and properly styled */
.modal-content {
    z-index: 1000052 !important;
    position: relative !important;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
    outline: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force visibility for specific modals that might have issues */
.modal.show,
.modal.in {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for modals that appear off-screen */
.modal-dialog.modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 60px) !important;
}

/* Ensure modal body is scrollable if content is too long */
.modal-body {
    position: relative !important;
    padding: 15px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Fix for modal header and footer */
.modal-header {
    padding: 15px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.modal-footer {
    padding: 15px !important;
    text-align: right !important;
    border-top: 1px solid #e5e5e5 !important;
}

/* Ensure close button is always visible */
.modal-header .close {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    z-index: 1000053 !important;
    font-size: 21px !important;
    font-weight: bold !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,
.modal-header .close:focus {
    opacity: 0.8 !important;
}

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

/* Debugging styles - remove in production */
.modal-debug {
    border: 3px solid red !important;
}

.modal-debug .modal-dialog {
    border: 2px solid blue !important;
}

.modal-debug .modal-content {
    border: 2px solid green !important;
}

/* Fix for specific modal IDs that have known issues */
#DeleteCardModal,
#SetCreditModal,
#ConfirmDeleteModal,
#OnceTopUpModal,
#ScheduledTopUpCreateModal,
#ScheduledTopUpEditModal {
    z-index: 1000060 !important;
}

#DeleteCardModal .modal-dialog,
#SetCreditModal .modal-dialog,
#ConfirmDeleteModal .modal-dialog,
#OnceTopUpModal .modal-dialog,
#ScheduledTopUpCreateModal .modal-dialog,
#ScheduledTopUpEditModal .modal-dialog {
    z-index: 1000061 !important;
    margin: 60px auto !important;
    margin-top: max(60px, 5vh) !important;
    margin-bottom: 30px !important;
}

#DeleteCardModal .modal-content,
#SetCreditModal .modal-content,
#ConfirmDeleteModal .modal-content,
#OnceTopUpModal .modal-content,
#ScheduledTopUpCreateModal .modal-content,
#ScheduledTopUpEditModal .modal-content {
    z-index: 1000062 !important;
}

/* Fix for modals in smaller screens */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 20px 10px !important;
        width: calc(100% - 20px) !important;
    }
    
    .modal-body {
        max-height: 60vh !important;
    }
    
    /* Specific fixes for topup modals on mobile */
    #OnceTopUpModal .modal-dialog,
    #ScheduledTopUpCreateModal .modal-dialog,
    #ScheduledTopUpEditModal .modal-dialog {
        margin: 30px 10px !important;
        margin-top: max(30px, 10vh) !important;
    }
}

/* Additional fixes for better modal centering */
.modal.fade .modal-dialog {
    transform: translate(0, -25%) !important;
    transition: transform 0.3s ease-out !important;
}

.modal.in .modal-dialog,
.modal.show .modal-dialog {
    transform: translate(0, 0) !important;
}

/* Ensure topup modals have proper spacing from top */
#OnceTopUpModal,
#ScheduledTopUpCreateModal,
#ScheduledTopUpEditModal {
    padding-top: 60px !important;
}

#OnceTopUpModal .modal-dialog,
#ScheduledTopUpCreateModal .modal-dialog,
#ScheduledTopUpEditModal .modal-dialog {
    margin-top: 0 !important;
    margin-bottom: 60px !important;
}