/**
 * Styles pour la navbar dynamique
 */

/* Section de contenu dynamique */
.navbar-dynamic-content {
    @apply transition-all duration-300 ease-in-out;
}

.navbar-dynamic-content.mobile-layout {
    @apply flex-col space-y-3;
}

.navbar-dynamic-content.mobile-layout .navbar-actions {
    @apply flex-wrap justify-center;
}

/* Barre de recherche */
.navbar-search {
    @apply transition-all duration-200;
}

.navbar-search:focus {
    @apply ring-2 ring-blue-500 ring-opacity-50 border-blue-500;
}

/* Boutons d'action */
.navbar-action-btn {
    @apply px-3 py-1.5 text-sm rounded-lg transition-all duration-200;
    @apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600;
    @apply text-gray-700 dark:text-gray-300;
}

.navbar-action-btn:hover {
    @apply transform scale-105 shadow-sm;
}

.navbar-action-btn.active {
    @apply bg-blue-500 text-white dark:bg-blue-600;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease-out;
}

/* Panel de filtres */
.filter-panel {
    @apply absolute top-full left-0 right-0 mt-2 p-4;
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700;
    @apply rounded-lg shadow-lg z-50;
    @apply transition-all duration-300;
}

.filter-panel.hidden {
    @apply opacity-0 pointer-events-none transform -translate-y-2;
}

/* Panel de notifications */
.notification-panel {
    @apply absolute top-full right-0 mt-2 w-80 p-4;
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700;
    @apply rounded-lg shadow-lg z-50;
    @apply transition-all duration-300;
}

.notification-panel.hidden {
    @apply opacity-0 pointer-events-none transform translate-x-2;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-dynamic-content {
        @apply px-2;
    }
    
    .navbar-dynamic-content .flex-row {
        @apply flex-col space-y-3;
    }
    
    .navbar-search-container {
        @apply w-full max-w-none;
    }
    
    .navbar-actions {
        @apply flex-wrap gap-2;
    }
    
    .filter-panel,
    .notification-panel {
        @apply left-2 right-2 w-auto;
    }
}

/* États de chargement */
.loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Indicateurs visuels */
.navbar-indicator {
    @apply absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full;
    @apply flex items-center justify-center text-xs text-white;
}

/* Transitions pour les changements de page */
.page-transition {
    @apply transition-all duration-500 ease-in-out;
}

.page-transition.entering {
    @apply opacity-0 transform translate-x-4;
}

.page-transition.entered {
    @apply opacity-100 transform translate-x-0;
}

.page-transition.exiting {
    @apply opacity-0 transform -translate-x-4;
}

/* Styles pour les différents types de pages */
.navbar-content-enroll {
    @apply bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20;
}

.navbar-content-courses {
    @apply bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20;
}

.navbar-content-activity {
    @apply bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20;
}

/* Accessibilité */
.navbar-action-btn:focus {
    @apply outline-none ring-2 ring-blue-500 ring-opacity-50;
}

.navbar-search:focus {
    @apply outline-none;
}

/* Mode sombre amélioré */
@media (prefers-color-scheme: dark) {
    .navbar-dynamic-content {
        @apply border-gray-700/30;
    }
    
    .filter-panel,
    .notification-panel {
        @apply bg-gray-900 border-gray-600;
    }
}