/* Mobile Navbar Override - Emergency Fix for White Text Issue */

/* Force mobile dropdown styling */
@media (max-width: 991.98px) {
    /* Bootstrap navbar collapse override */
    .navbar-expand-lg .navbar-collapse {
        background-color: #2c3e50 !important;
        background: #2c3e50 !important;
        border-radius: 8px !important;
        padding: 1rem !important;
        margin-top: 10px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Force all nav links to be white */
    .navbar-nav .nav-item .nav-link,
    .navbar-nav .nav-link,
    .nav-link {
        color: #ffffff !important;
        background-color: transparent !important;
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 4px !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    
    /* Hover states */
    .navbar-nav .nav-item .nav-link:hover,
    .navbar-nav .nav-link:hover,
    .nav-link:hover {
        color: #3498db !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-1px) !important;
    }
    
    /* Active/Focus states */
    .navbar-nav .nav-item .nav-link:focus,
    .navbar-nav .nav-link:focus,
    .nav-link:focus,
    .navbar-nav .nav-item .nav-link:active,
    .navbar-nav .nav-link:active,
    .nav-link:active {
        color: #3498db !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* Special button styles */
    .register-btn {
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
        background-color: transparent !important;
        text-align: center !important;
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 4px !important;
    }
    
    .register-btn:hover {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: #ffffff !important;
    }
    
    .logout-btn {
        color: #e74c3c !important;
        background-color: transparent !important;
        text-align: center !important;
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 4px !important;
    }
    
    .logout-btn:hover {
        color: #ffffff !important;
        background-color: rgba(231, 76, 60, 0.8) !important;
    }
    
    /* Ensure navbar toggler is visible */
    .navbar-toggler {
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        background-color: transparent !important;
        padding: 0.5rem !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: none !important;
        outline: none !important;
    }
    
    .navbar-toggler .fas,
    .navbar-toggler i {
        color: #ffffff !important;
        font-size: 1.2rem !important;
    }
    
    /* Override any conflicting Bootstrap styles */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background-color: #2c3e50 !important;
        background: #2c3e50 !important;
    }
    
    /* Force nav items to stack vertically */
    .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .navbar-nav .nav-item {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Extra small screens */
@media (max-width: 575.98px) {
    .navbar-collapse {
        width: 90% !important;
        max-width: 300px !important;
        left: 5% !important;
        right: 5% !important;
    }
    
    .navbar-nav .nav-link {
        font-size: 0.9rem !important;
        padding: 0.8rem 1rem !important;
    }
}

/* Override any potential white background issues */
.navbar-light .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-light .navbar-toggler {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Additional force overrides */
.navbar * {
    color: inherit !important;
}

@media (max-width: 991.98px) {
    .navbar-collapse * {
        color: #ffffff !important;
    }
    
    .navbar-collapse a {
        color: #ffffff !important;
        text-decoration: none !important;
    }
    
    .navbar-collapse a:hover {
        color: #3498db !important;
    }
    
    /* Logout button specific override */
    .navbar-collapse .logout-btn {
        color: #e74c3c !important;
    }
    
    .navbar-collapse .logout-btn:hover {
        color: #ffffff !important;
    }
}