/**
 * Enhanced Header Styles for DigiPharmacie Scraper
 */

/* Header animations and transitions */
.header-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Status indicators */
.status-indicator {
    @apply flex items-center space-x-2 px-3 py-1 rounded-full text-sm font-medium;
}

.status-online {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.status-offline {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.status-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

/* Pulse animation for status dots */
@keyframes pulse-dot {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.status-dot-online {
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Search enhancements */
.search-input-enhanced {
    @apply transition-all duration-200 ease-in-out;
}

.search-input-enhanced:focus {
    @apply ring-2 ring-indigo-500 ring-offset-2 transform scale-[1.02];
}

.search-suggestions {
    @apply absolute top-full left-0 right-0 bg-white border border-gray-200 rounded border border-magnolia-500 mt-1 max-h-64 overflow-y-auto z-50;
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.95);
}

.search-suggestion-item {
    @apply flex items-center px-4 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0 transition-colors duration-150;
}

.search-suggestion-item:hover {
    @apply bg-gradient-to-r from-indigo-50 to-purple-50;
}

/* Notification styles */
.notification-badge {
    animation: notification-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes notification-pulse {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.notification-item {
    @apply transition-all duration-200 ease-in-out;
}

.notification-item:hover {
    @apply bg-gray-50 transform translate-x-1;
}

/* User menu enhancements */
.user-menu-item {
    @apply transition-all duration-150 ease-in-out;
}

.user-menu-item:hover {
    @apply bg-gray-50 transform translate-x-1;
}

.user-menu-item.danger:hover {
    @apply bg-red-50 text-red-700;
}

/* Logo animation */
.logo-container {
    @apply transition-transform duration-200 ease-in-out;
}

.logo-container:hover {
    @apply transform scale-105;
}

/* Quick action button enhancements */
.quick-action-btn {
    @apply transition-all duration-200 ease-in-out;
}

.quick-action-btn:hover {
    @apply transform translate-y-[-1px] border border-magnolia-500;
}

.quick-action-btn:active {
    @apply transform translate-y-0 border border-magnolia-500;
}

/* Mobile search overlay */
.mobile-search-overlay {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.4);
}

/* Dropdown animations */
.dropdown-enter {
    @apply transition-all duration-100 ease-out;
    transform: scale(0.95);
    opacity: 0;
}

.dropdown-enter-active {
    transform: scale(1);
    opacity: 1;
}

.dropdown-leave {
    @apply transition-all duration-75 ease-in;
    transform: scale(1);
    opacity: 1;
}

.dropdown-leave-active {
    transform: scale(0.95);
    opacity: 0;
}

/* Breadcrumb styles */
.breadcrumb-separator {
    @apply text-gray-400 mx-2;
}

.breadcrumb-item {
    @apply text-sm text-gray-500 hover:text-gray-700 transition-colors duration-150;
}

.breadcrumb-item.current {
    @apply text-gray-900 font-medium;
}

/* Theme transition */
.theme-transition {
    @apply transition-colors duration-300 ease-in-out;
}

/* Dark mode styles */
.dark .search-suggestions {
    @apply bg-gray-800 border-gray-600;
    background-color: rgba(31, 41, 55, 0.95);
}

.dark .search-suggestion-item:hover {
    @apply bg-gray-700;
}

.dark .status-online {
    @apply bg-green-900 text-green-100 border-green-700;
}

.dark .status-offline {
    @apply bg-red-900 text-red-100 border-red-700;
}

.dark .status-warning {
    @apply bg-yellow-900 text-yellow-100 border-yellow-700;
}

.dark .notification-item:hover {
    @apply bg-gray-700;
}

.dark .user-menu-item:hover {
    @apply bg-gray-700;
}

.dark .user-menu-item.danger:hover {
    @apply bg-red-900 text-red-100;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-content {
        @apply px-4;
    }
    
    .search-section {
        @apply hidden;
    }
    
    .user-menu-text {
        @apply hidden;
    }
    
    .quick-actions {
        @apply space-x-2;
    }
    
    .logo-text {
        @apply hidden;
    }
}

@media (max-width: 640px) {
    .status-text {
        @apply hidden;
    }
    
    .notification-text {
        @apply text-xs;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .search-input-enhanced {
        @apply border-2 border-black;
    }
    
    .status-online {
        @apply bg-green-200 text-green-900 border-2 border-green-900;
    }
    
    .status-offline {
        @apply bg-red-200 text-red-900 border-2 border-red-900;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .status-dot-online,
    .notification-badge,
    .quick-action-btn,
    .logo-container {
        animation: none;
    }
    
    .dropdown-enter,
    .dropdown-leave,
    .theme-transition {
        transition: none;
    }
}

/* Print styles */
@media print {
    .header-actions,
    .search-section,
    .notifications,
    .user-menu {
        @apply hidden;
    }
    
    .header-content {
        @apply border-b border-gray-300;
    }
}

/* Focus styles for accessibility */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded;
}

.focus-ring-white {
    @apply focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600 rounded;
}