/* Navigation styles */
.nav-link {
    @apply inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-all duration-200;
}

.nav-link.active {
    @apply border-indigo-600 text-indigo-600;
}

.nav-link:not(.active) {
    @apply border-transparent text-gray-500 hover:text-gray-900 hover:border-gray-300;
}

/* Mobile menu animations */
.mobile-menu {
    @apply absolute top-16 inset-x-0 transform transition-all duration-300 ease-in-out bg-white border-b border-gray-200 shadow-lg;
}

.mobile-menu.hidden {
    @apply -translate-y-full;
}

.mobile-menu.translate-y-0 {
    @apply opacity-100;
}

.mobile-menu.-translate-y-full {
    @apply opacity-0;
}

/* User menu animations */
#userMenu {
    @apply transform transition-all duration-200 origin-top-right;
}

#userMenu:not(.hidden) {
    @apply scale-100 opacity-100;
}

#userMenu.hidden {
    @apply scale-95 opacity-0;
}

/* Notifications badge animation */
.notification-badge {
    @apply absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* Search bar animations */
.search-input {
    @apply w-full h-10 pl-10 pr-4 rounded-lg border border-gray-200 focus:outline-none transition-all duration-200;
}

.search-input:focus {
    @apply border-indigo-500 ring-2 ring-indigo-500 ring-opacity-20;
}

/* Menu button animations */
.mobile-menu-button {
    @apply relative overflow-hidden transition-all duration-200;
}

.mobile-menu-button:hover {
    @apply bg-gray-100;
}

.mobile-menu-button i {
    @apply transition-transform duration-200;
}

.mobile-menu-button[aria-expanded="true"] i {
    @apply rotate-90;
}