/* Custom component styles */
.btn-primary {
    @apply px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors;
}

.btn-secondary {
    @apply px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors;
}

.input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500;
}

/* Simple user menu hover support */
.user-menu-container:hover #user-menu {
    display: block !important;
    z-index: 999999;
}

/* Create invisible bridge area between button and dropdown */
.user-menu-container::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 8px;
    background: transparent;
    z-index: 1000;
}

/* Ensure the dropdown menu has proper spacing and positioning */
#user-menu {
    margin-top: 0.25rem; /* Reduced from mt-2 to mt-1 equivalent */
}

/* Mobile menu enhancements */
#mobile-menu {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

#mobile-menu a,
#mobile-menu button {
    transition: all 0.2s ease-in-out;
}

#mobile-menu a:hover,
#mobile-menu button:hover {
    background-color: rgba(79, 70, 229, 0.05);
    transform: translateX(4px);
}

/* Mobile menu button animations */
#mobile-menu-button {
    transition: all 0.2s ease-in-out;
}

#mobile-menu-button:hover {
    background-color: rgba(79, 70, 229, 0.1);
    transform: scale(1.05);
}

#mobile-menu-button:active {
    transform: scale(0.95);
}

/* Mobile menu icon transitions */
#mobile-menu-icon,
#mobile-menu-close-icon {
    transition: all 0.3s ease-in-out;
}

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

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

.slide-down {
    animation: slideDown 0.3s ease-out;
}

/* Custom utilities */
.text-balance {
    text-wrap: balance;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Line clamp utilities */
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Mobile-friendly enhancements */
@media (max-width: 640px) {
    .mobile-filters-form {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 50;
        padding: 1rem;
        overflow-y: auto;
    }
    
    .mobile-filters-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
    }
    
    /* Enhanced mobile menu styles */
    #mobile-menu {
        border-top: 1px solid rgba(229, 231, 235, 0.5);
    }
    
    #mobile-menu a,
    #mobile-menu button {
        border-radius: 0.5rem;
        margin: 0.125rem 0.5rem;
    }
    
    #mobile-menu a:first-child,
    #mobile-menu button:first-child {
        margin-top: 0.5rem;
    }
    
    #mobile-menu a:last-child,
    #mobile-menu button:last-child {
        margin-bottom: 0.5rem;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}