/* Enhanced styling for mobile navigation items */
.mobile-navbar {
    background-color: rgba(20, 20, 25, 0.95) !important;
}

/* Fix for mobile nav items (icons at the bottom of screen) */
.mobile-nav-item {
    transition: all 0.2s ease;
}

.mobile-nav-item svg,
.mobile-nav-item span {
    transition: color 0.2s ease;
}

/* Remove background changes on hover or active state */
.mobile-nav-item:hover,
.mobile-nav-item.active {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Only change color of text and icons */
.mobile-nav-item:hover svg,
.mobile-nav-item:hover span {
    color: #ffffff !important;
}

.mobile-nav-item.active svg,
.mobile-nav-item.active span {
    color: #ffffff !important;
}

/* Subtle indicator for active items */
.mobile-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: #1a5928; /* Dark green from theme */
    border-radius: 3px 3px 0 0;
}

/* Notification badge - keep high visibility */
.mobile-nav-item .badge {
    transition: none;
}