@import "tailwindcss";

/* Admin-specific styles */
@layer components {
    .card {
        @apply bg-white rounded-2xl shadow-sm border border-slate-200 p-6;
    }

    .stat-pill-info {
        @apply bg-blue-50 text-blue-600 px-2.5 py-1 rounded-full text-xs font-medium;
    }

    .stat-pill-success {
        @apply bg-emerald-50 text-emerald-600 px-2.5 py-1 rounded-full text-xs font-medium;
    }

    .stat-pill-warning {
        @apply bg-orange-50 text-orange-600 px-2.5 py-1 rounded-full text-xs font-medium;
    }

    .stat-pill-danger {
        @apply bg-red-50 text-red-600 px-2.5 py-1 rounded-full text-xs font-medium;
    }

    .chip {
        @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
    }

    .btn-primary {
        @apply px-4 py-2 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition-colors;
    }

    .btn-secondary {
        @apply px-4 py-2 bg-slate-100 text-slate-700 rounded-xl font-medium hover:bg-slate-200 transition-colors;
    }

    .btn-danger {
        @apply px-4 py-2 bg-red-600 text-white rounded-xl font-medium hover:bg-red-700 transition-colors;
    }

    .input-field {
        @apply w-full px-4 py-2 border border-slate-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    }

    .table-row {
        @apply border-b border-slate-200 hover:bg-slate-50 transition-colors;
    }
}

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

    to {
        opacity: 1;
    }
}

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

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

.animate-slide-in {
    animation: slideIn 0.3s ease-in-out;
}

/* Gradient backgrounds */
.bg-linear-to-r {
    background: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-linear-to-br {
    background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-linear-to-bl {
    background: linear-gradient(to bottom left, var(--tw-gradient-stops));
}

.bg-linear-to-tr {
    background: linear-gradient(to top right, var(--tw-gradient-stops));
}