@tailwind base;
@tailwind components;
@tailwind utilities;

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

@keyframes slideUp { 
    from { transform: translateY(20px); opacity: 0; } 
    to { transform: translateY(0); opacity: 1; } 
}

@keyframes bounceIn { 
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

/* Custom utility classes */
.notification-enter { 
    animation: slideUp 0.3s ease-out; 
}

.modal-enter { 
    animation: fadeIn 0.2s ease-out; 
}

.card-hover { 
    transition: all 0.3s ease; 
}

.card-hover:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
}

.dark .card-hover:hover { 
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
}

/* Custom component styles */
@layer components {
    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200;
    }

    .btn-secondary {
        @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200;
    }

    .btn-success {
        @apply bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200;
    }

    .btn-danger {
        @apply bg-red-600 hover:bg-red-700 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200;
    }

    .input-field {
        @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition-colors duration-200;
    }

    .card {
        @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700;
    }

    .status-badge {
        @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full;
    }

    .status-confirmed {
        @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
    }

    .status-pending {
        @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
    }

    .status-cancelled {
        @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
    }
}