@tailwind base;
@tailwind components;
@tailwind utilities;
/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

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

.animate-slide-down {
    animation: slideDown 0.3s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

/* Modal Styles */
.modal-backdrop {
    @apply fixed inset-0 bg-black/40 backdrop-blur-sm z-40;
}

/* Form Styles */
.form-input {
    @apply bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white placeholder-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition;
}

.form-select {
    @apply bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition;
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-success {
    @apply inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed;
}

.btn-danger {
    @apply inline-flex items-center justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Card Styles */
.card {
    @apply bg-slate-800 rounded-lg border border-slate-700 hover:border-slate-600 transition;
}

.card-header {
    @apply bg-gradient-to-r from-slate-700 to-slate-800 px-6 py-4 border-b border-slate-700;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply bg-slate-700/30 px-6 py-3 border-t border-slate-700;
}

/* Badge Styles */
.badge-primary {
    @apply inline-flex items-center px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-xs font-medium;
}

.badge-success {
    @apply inline-flex items-center px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-xs font-medium;
}

.badge-danger {
    @apply inline-flex items-center px-3 py-1 bg-red-500/20 text-red-300 rounded-full text-xs font-medium;
}

.badge-warning {
    @apply inline-flex items-center px-3 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-xs font-medium;
}

/* Loading Spinner */
.spinner {
    @apply inline-flex animate-spin rounded-full h-4 w-4 border-b-2 border-current;
}

/* Status Badge Animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

/* Alert Styles */
.alert {
    @apply rounded-lg p-4 text-sm;
}

.alert-success {
    @apply bg-green-500/10 border border-green-500/30 text-green-400;
}

.alert-error {
    @apply bg-red-500/10 border border-red-500/30 text-red-400;
}

.alert-warning {
    @apply bg-yellow-500/10 border border-yellow-500/30 text-yellow-400;
}

.alert-info {
    @apply bg-blue-500/10 border border-blue-500/30 text-blue-400;
}