/* Navbar Fix - Ensure navbar is clickable and dropdowns work */

/* Ensure navbar has proper z-index and is always on top */
.navbar {
    position: relative;
    z-index: 100 !important; /* Lower to allow browser extensions to appear above */
}

/* Ensure dropdown menus are above everything */
.navbar .dropdown-menu {
    z-index: 105 !important;
}

/* Fix for dropdown toggle buttons */
.navbar .dropdown-toggle {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Ensure all navbar links are clickable */
.navbar a,
.navbar button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix mix-results-container to not overlap navbar */
.mix-results-container {
    z-index: 900 !important; /* Lower than navbar */
    top: 70px !important; /* Move below navbar */
}

/* Ensure navbar collapse works properly on mobile */
.navbar-collapse {
    z-index: 101 !important;
    background-color: var(--bs-body-bg); /* Add background on mobile */
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: relative;
        background-color: var(--bs-body-bg);
        margin-top: 0.5rem;
        padding: 0.5rem;
        border-radius: 0.375rem;
    }
}

/* Ensure Bootstrap dropdown functionality */
.dropdown-menu.show {
    display: block !important;
    z-index: 105 !important;
}

/* Fix any potential overlay issues */
body > * {
    position: relative;
}

/* Prevent any element from blocking navbar except modals */
body > *:not(.modal):not(.navbar) {
    z-index: auto !important;
}

/* Special handling for canvas mode */
#canvas-container {
    z-index: 1 !important;
}

/* Ensure navbar toggler is clickable on mobile */
.navbar-toggler {
    z-index: 1052 !important;
    pointer-events: auto !important;
}