/* Fix modal z-index to appear above navigation bars and transformed elements */

/* AGGRESSIVE: ALL modals get ultra-high z-index to appear above everything */
.modal {
    z-index: 999999 !important;
    position: fixed !important;
}

/* All modal dialogs */
.modal-dialog {
    z-index: 1000000 !important;
    position: relative !important;
}

/* All modal content */
.modal-content {
    z-index: 1000001 !important;
    position: relative !important;
    background-color: var(--bs-body-bg) !important;
    pointer-events: auto !important;
}

/* All modal sections */
.modal-header,
.modal-body,
.modal-footer {
    position: relative !important;
    z-index: 1000002 !important;
    pointer-events: auto !important;
}

/* Force backdrop below modal but above everything else */
.modal-backdrop {
    z-index: 999998 !important;
    opacity: 0.5 !important;
}

/* Fullscreen modals - BELOW navbar but still very high (navbar is z-index 1030) */
.modal-fullscreen,
#fullscreenLeaderboardModal,
#fullscreenQRModal,
#fullscreenTimerModal {
    z-index: 999999 !important;
    position: fixed !important;
}

.modal-fullscreen .modal-dialog,
#fullscreenLeaderboardModal .modal-dialog,
#fullscreenQRModal .modal-dialog,
#fullscreenTimerModal .modal-dialog {
    z-index: 1000000 !important;
    position: relative !important;
}

.modal-fullscreen .modal-content,
#fullscreenLeaderboardModal .modal-content,
#fullscreenQRModal .modal-content,
#fullscreenTimerModal .modal-content {
    z-index: 1000001 !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Fullscreen modal backdrops */
#fullscreenLeaderboardModal + .modal-backdrop,
#fullscreenQRModal + .modal-backdrop,
#fullscreenTimerModal + .modal-backdrop {
    z-index: 999998 !important;
}


/* Ensure navbar and mobile navbar stay below modals */
.navbar,
.navbar-expand-lg,
.mobile-navbar {
    z-index: 1030 !important;
}

/* Ensure dropdowns from navbar don't interfere */
.navbar .dropdown-menu {
    z-index: 1031 !important;
}