/**
 * Bootstrap Modal Z-Index and Accessibility Fixes
 * Ensures modals appear above racing header and navigation
 */

/* Force modal z-index above all racing elements */
.modal {
    z-index: 999999 !important;
    position: fixed !important;
}

.modal.show {
    z-index: 999999 !important;
}

.modal.fade {
    z-index: 999999 !important;
}

.modal-backdrop {
    z-index: 999998 !important;
    position: fixed !important;
}

.modal-dialog {
    z-index: 1000000 !important;
    position: relative !important;
}

.modal-content {
    z-index: 1000001 !important;
    position: relative !important;
}

/* Ensure modal header appears above everything */
.modal-header {
    z-index: 1000002 !important;
    position: relative !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    .modal {
        z-index: 999999 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
    }
}

/* Prevent racing header from interfering */
.modal-open .racing-header {
    z-index: 99 !important;
}

.modal-open .racing-navbar {
    z-index: 99 !important;
}

/* Ensure modal buttons and form elements are clickable */
.modal .btn,
.modal input,
.modal select,
.modal textarea,
.modal .form-control,
.modal .dropdown-toggle {
    z-index: 1000003 !important;
    position: relative !important;
}

/* Fix for dropdowns inside modals */
.modal .dropdown-menu {
    z-index: 1000004 !important;
    position: absolute !important;
}