/* GAG Recipe Component Styles */

/* Loading Animation */
.loading-spinner {
    @apply animate-spin rounded-full border-4 border-gray-200 border-t-rarity-prismatic;
}

/* Recipe Cards */
.recipe-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.recipe-card-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Rarity Gradients */
.rarity-common {
    background: linear-gradient(135deg, #9CA3AF, #6B7280);
}

.rarity-uncommon {
    background: linear-gradient(135deg, #10B981, #059669);
}

.rarity-rare {
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

.rarity-epic {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
}

.rarity-legendary {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.rarity-prismatic {
    background: linear-gradient(135deg, #EC4899, #BE185D, #7C3AED);
    animation: prismatic-pulse 3s ease-in-out infinite;
}

.rarity-divine {
    background: linear-gradient(135deg, #EF4444, #DC2626, #B91C1C);
    animation: divine-glow 2s ease-in-out infinite alternate;
}

@keyframes prismatic-pulse {
    0%, 100% { 
        background: linear-gradient(135deg, #EC4899, #BE185D, #7C3AED);
        box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
    }
    50% { 
        background: linear-gradient(135deg, #7C3AED, #EC4899, #F59E0B);
        box-shadow: 0 0 30px rgba(236, 72, 153, 0.5);
    }
}

@keyframes divine-glow {
    0% { 
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    }
    100% { 
        box-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
    }
}

/* Timer Display */
.timer-display {
    font-family: 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}

.timer-urgent {
    animation: urgent-pulse 1s ease-in-out infinite;
}

@keyframes urgent-pulse {
    0%, 100% { 
        color: #EF4444;
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    }
    50% { 
        color: #FCA5A5;
        text-shadow: 0 0 20px rgba(239, 68, 68, 0.8);
    }
}

/* Ingredient Grid */
.ingredient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 0.75rem;
}

.dark .ingredient-grid {
    border-color: #374151;
}

.ingredient-item {
    @apply p-3 bg-white dark:bg-gray-800 rounded-lg border-2 border-transparent hover:border-rarity-prismatic transition-all duration-200 cursor-pointer text-center;
}

.ingredient-item.selected {
    @apply border-rarity-prismatic bg-rarity-prismatic/10;
}

.ingredient-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Search Results */
.search-results {
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.dark .search-results {
    background: #1F2937;
    border-color: #374151;
}

.search-result-item {
    @apply px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer border-b border-gray-100 dark:border-gray-600 last:border-b-0;
}

/* Notification Toast */
.notification-toast {
    animation: slide-in-right 0.3s ease-out, fade-out 0.3s ease-in 4.7s forwards;
}

@keyframes slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Modal Animations */
.modal-overlay {
    animation: modal-fade-in 0.2s ease-out;
}

.modal-content {
    animation: modal-slide-up 0.3s ease-out;
}

@keyframes modal-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes modal-slide-up {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Filter Chips */
.filter-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-rarity-prismatic hover:text-white transition-colors cursor-pointer;
}

.filter-chip.active {
    @apply bg-rarity-prismatic text-white;
}

/* Progress Bars */
.progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
}

.progress-fill {
    @apply h-2 rounded-full transition-all duration-300 ease-out;
}

.progress-cooking {
    @apply bg-gradient-to-r from-rarity-uncommon to-rarity-rare;
}

.progress-profit {
    @apply bg-gradient-to-r from-rarity-legendary to-rarity-prismatic;
}

/* Responsive Grid */
.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .recipe-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full hover:bg-gray-500 dark:hover:bg-gray-500;
}

/* Floating Action Button */
.fab {
    @apply fixed bottom-6 right-6 w-14 h-14 bg-rarity-prismatic text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center z-40;
}

.fab:hover {
    transform: scale(1.1);
}

/* Skeleton Loading */
.skeleton {
    @apply animate-pulse bg-gray-300 dark:bg-gray-600 rounded;
}

.skeleton-text {
    @apply h-4 bg-gray-300 dark:bg-gray-600 rounded;
}

.skeleton-title {
    @apply h-6 bg-gray-300 dark:bg-gray-600 rounded w-3/4;
}

.skeleton-avatar {
    @apply w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full;
}

/* Tooltip */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg pointer-events-none opacity-0 transition-opacity duration-200;
}

.tooltip.show {
    @apply opacity-100;
}

/* Badge */
.badge {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.badge-new {
    @apply bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100;
}

.badge-updated {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100;
}

.badge-hot {
    @apply bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100;
}

/* Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.open {
    max-height: 500px;
}

/* Stats Cards */
.stat-card {
    @apply bg-white dark:bg-gray-800 p-6 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow;
}

.stat-value {
    @apply text-3xl font-bold text-rarity-prismatic;
}

.stat-label {
    @apply text-sm text-gray-600 dark:text-gray-400 font-medium;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-full {
        width: 100% !important;
    }
    
    .mobile-center {
        text-align: center !important;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .recipe-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}