/* MAIN.CSS - Design Stitch Google Integration */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* Material Icons Config */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.tab-btn {
    @apply px-6 py-3 text-gray-600 font-medium border-b-2 border-transparent hover:text-indigo-600 hover:border-indigo-200 transition-colors;
}

.tab-btn.active {
    @apply text-indigo-600 border-indigo-600;
}

.toast {
    @apply opacity-0 translate-y-4;
}

.toast-show {
    @apply opacity-100 translate-y-0;
}

.toast-success {
    @apply bg-green-500 text-white;
}

.toast-error {
    @apply bg-red-500 text-white;
}

.toast-info {
    @apply bg-blue-500 text-white;
}

.card {
    @apply bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow;
}

.btn-primary {
    @apply bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors;
}

.badge {
    @apply inline-block px-3 py-1 rounded-full text-sm font-medium;
}

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

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

.badge-yellow {
    @apply bg-yellow-100 text-yellow-800;
}

/* Courses tabs */
.courses-tab {
    @apply px-6 py-3 border-b-2 border-transparent text-gray-600 font-medium hover:text-indigo-600 transition-colors cursor-pointer;
}

.courses-tab.active {
    @apply border-indigo-600 text-indigo-600;
}

/* Workflow filters */
.workflow-filter-btn {
    @apply bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors;
}

.workflow-filter-btn.active {
    @apply bg-indigo-600 text-white hover:bg-indigo-700;
}

/* Stats page responsive layout */
.stats-section {
    @apply max-h-[80vh] overflow-y-auto;
}

.stats-grid-responsive {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
}

/* Détail économies scrollable */
.detail-economie {
    @apply max-h-[400px] overflow-y-auto;
}

/* Sidebar Navigation Stitch Design */
.nav-item {
    @apply flex items-center gap-3 px-4 py-2.5 rounded-lg text-text-primary-light transition-all duration-200;
}

.nav-item:hover {
    @apply bg-gray-100;
}

.nav-item.active {
    @apply bg-primary/20 text-primary font-bold;
}

.nav-item .material-symbols-outlined {
    @apply text-2xl;
}

.nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

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

.progress-bar-fill {
    @apply h-full rounded-full transition-all duration-500;
}

/* KPI Cards Stitch */
.kpi-card {
    @apply flex flex-col gap-4 rounded-xl p-6 bg-surface-light border border-gray-200 shadow-soft transition-shadow duration-200;
}

.kpi-card:hover {
    @apply shadow-soft-lg;
}

/* Smart Alert */
.smart-alert {
    @apply flex items-center justify-between gap-6 rounded-xl p-6 shadow-sm border transition-all duration-200;
}

.smart-alert.season {
    @apply bg-accent-green/20 border-accent-green/30;
}

.smart-alert.nutrition {
    @apply bg-accent-yellow/20 border-accent-yellow/30;
}

.smart-alert.variety {
    @apply bg-primary/20 border-primary/30;
}

/* Recipe Cards Hover */
.recipe-card {
    @apply cursor-pointer rounded-xl overflow-hidden shadow-soft transition-all duration-300;
}

.recipe-card:hover {
    @apply shadow-soft-xl -translate-y-1;
}

/* Badges */
.badge-season {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-accent-green/20 text-teal;
}

.badge-popular {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-accent-yellow/20 text-teal;
}

.badge-economical {
    @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold bg-primary/20 text-primary;
}

/* Mobile Bottom Navigation */
.nav-item-mobile {
    @apply flex flex-col items-center gap-1 py-2 px-3 text-text-secondary-light transition-colors;
}

.nav-item-mobile.active {
    @apply text-primary;
}

.nav-item-mobile.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.nav-item-mobile:hover {
    @apply text-primary/80;
}

/* Courses Page Design Stitch */
.courses-tab-stitch {
    @apply flex items-center gap-2 px-5 py-2.5 rounded-lg font-medium text-gray-600 transition-all duration-200 hover:bg-gray-50 cursor-pointer;
}

.courses-tab-stitch.active {
    @apply bg-primary text-white shadow-md hover:bg-primary/90;
}

.courses-tab-stitch .badge-count {
    @apply ml-1 px-2 py-0.5 rounded-full bg-white/20 text-xs font-bold;
}

.courses-tab-stitch.active .badge-count {
    @apply bg-white/30;
}

.courses-list-stitch {
    @apply transition-opacity duration-300;
    opacity: 1;
}

.course-item-card {
    @apply relative;
}

.course-item-card::before {
    @apply absolute inset-0 rounded-xl transition-all duration-200 opacity-0;
    content: '';
    background: linear-gradient(135deg, rgba(229, 115, 115, 0.05), rgba(0, 77, 64, 0.05));
}

.course-item-card:hover::before {
    @apply opacity-100;
}

/* Checkbox Material Design */
.course-checkbox {
    appearance: none;
    @apply relative cursor-pointer;
}

.course-checkbox::before {
    content: '';
    @apply absolute inset-0 rounded-lg border-2 border-gray-300 bg-white transition-all duration-200;
}

.course-checkbox:checked::before {
    @apply border-primary bg-primary;
}

.course-checkbox:checked::after {
    content: '✓';
    @apply absolute inset-0 flex items-center justify-center text-white font-bold text-sm;
}

/* Cuisine Page Design Stitch */
/* View Mode Switcher (Liste / Gantt) */
.view-mode-btn {
    @apply inline-flex items-center gap-2 px-5 py-2.5 rounded-lg font-semibold text-gray-600 bg-white transition-all duration-200 hover:bg-gray-50 cursor-pointer;
}

.view-mode-btn.active {
    @apply bg-primary text-white shadow-md hover:bg-primary/90;
}

.workflow-filter-stitch {
    @apply inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-gray-600 bg-white border-2 border-gray-200 transition-all duration-200 hover:border-primary/30 hover:bg-primary/5 cursor-pointer;
}

.workflow-filter-stitch.active {
    @apply bg-gradient-to-r from-primary to-primary/90 text-white border-primary shadow-md hover:shadow-lg;
}

.workflow-filter-stitch .badge-count {
    @apply ml-1 px-2.5 py-0.5 rounded-full bg-gray-100 text-gray-700 text-xs font-bold;
}

.workflow-filter-stitch.active .badge-count {
    @apply bg-white/30 text-white;
}

/* Timeline Container */
.timeline-container {
    @apply relative;
}

.timeline-item {
    @apply relative;
}

/* Checkbox Material Design for tasks */
.tache-checkbox-stitch {
    appearance: none;
    @apply relative cursor-pointer border-2 border-gray-300 bg-white transition-all duration-200;
}

.tache-checkbox-stitch:hover {
    @apply border-primary/50 shadow-sm;
}

.tache-checkbox-stitch:checked {
    @apply bg-gradient-to-br from-accent-green to-accent-green/80 border-accent-green;
}

.tache-checkbox-stitch:checked::after {
    content: '✓';
    @apply absolute inset-0 flex items-center justify-center text-white font-bold text-base;
}

/* Tache Card Animation */
.tache-card {
    @apply transition-all duration-200;
}

.tache-card:hover {
    @apply -translate-y-0.5;
}

/* Planning Gantt Design Stitch */
.gantt-timeline-stitch {
    @apply space-y-4;
}

.gantt-session-card {
    @apply transition-all duration-300;
}

.gantt-session-card:hover {
    @apply transform scale-[1.01];
}

.calendar-day-stitch {
    @apply min-h-[120px] flex flex-col;
}

/* ========================================
   MICRO-ANIMATIONS & TRANSITIONS
   ======================================== */

/* Loading Skeleton */
.skeleton {
    @apply bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite];
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

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

/* Pulse Animation for "Today" badges */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(229, 115, 115, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(229, 115, 115, 0);
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Hover Lift Effect (Global cards) */
.hover-lift {
    @apply transition-all duration-300 ease-out;
}

.hover-lift:hover {
    @apply -translate-y-1 shadow-lg;
}

/* Button Ripple Effect */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

button:not([disabled]):active::after {
    content: '';
    @apply absolute inset-0 bg-white/30 rounded-lg pointer-events-none;
    animation: ripple 0.6s ease-out;
}

/* Smooth Page Transitions */
.page-container {
    animation: fadeIn 0.3s ease-out;
}

/* Card Hover Gradient Overlay */
.card-gradient-overlay {
    @apply relative overflow-hidden;
}

.card-gradient-overlay::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-br from-primary/0 via-primary/5 to-teal/5 opacity-0 transition-opacity duration-300 pointer-events-none;
}

.card-gradient-overlay:hover::before {
    @apply opacity-100;
}

/* Material Icons Smooth Transitions */
.material-symbols-outlined {
    @apply transition-all duration-200;
}

/* Progress Bar Animation */
@keyframes progressFill {
    from {
        width: 0%;
    }
}

.progress-animate {
    animation: progressFill 1s ease-out;
}

/* Toast Slide In Animation */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast {
    animation: slideInRight 0.3s ease-out;
}

/* Badge Bounce on Hover */
.badge-bounce:hover {
    animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Focus States Enhanced */
*:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    @apply ring-2 ring-primary/30;
}

/* Stagger Animation for Lists */
@keyframes staggerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-item {
    opacity: 0;
    animation: staggerFadeIn 0.4s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.1s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.2s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.3s; }

/* Spinner Loader */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-200 border-t-primary rounded-full;
    animation: spin 0.8s linear infinite;
}