/* Custom Bootstrap Icons for Modern Navbar */
.navbar-modern .bi {
    font-size: 1.1em;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.navbar-modern .nav-link:hover .bi {
    transform: scale(1.2);
    color: #ffffff;
}

.navbar-modern .nav-link.logout-btn .bi {
    font-size: 1.2em;
    margin-right: 10px;
}

.navbar-modern .nav-link.logout-btn:hover .bi {
    transform: scale(1.3) rotate(5deg);
    animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
    0%, 100% { transform: scale(1.2); }
    50% { transform: scale(1.4); }
}

/* Specific icon animations */
.navbar-modern .bi-house-door-fill {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.navbar-modern .bi-info-circle-fill {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.navbar-modern .bi-people-fill {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.navbar-modern .bi-box-arrow-right {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Hover effects for each icon */
.navbar-modern .nav-link:hover .bi-house-door-fill {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.navbar-modern .nav-link:hover .bi-info-circle-fill {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.navbar-modern .nav-link:hover .bi-people-fill {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.navbar-modern .nav-link.logout-btn:hover .bi-box-arrow-right {
    color: #ffffff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Mobile responsive icons */
@media (max-width: 991.98px) {
    .navbar-modern .bi {
        font-size: 1.3em;
        margin-right: 12px;
    }
    
    .navbar-modern .nav-link.logout-btn .bi {
        font-size: 1.4em;
        margin-right: 15px;
    }
}

/* Loading animation for icons */
.navbar-modern .bi {
    opacity: 0;
    animation: fadeInIcon 0.5s ease forwards;
}

.navbar-modern .nav-item:nth-child(1) .bi { animation-delay: 0.1s; }
.navbar-modern .nav-item:nth-child(2) .bi { animation-delay: 0.2s; }
.navbar-modern .nav-item:nth-child(3) .bi { animation-delay: 0.3s; }
.navbar-modern .nav-item:nth-child(4) .bi { animation-delay: 0.4s; }

@keyframes fadeInIcon {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}