/* Component Styles */

/* Card Components */
.stat-card {
    @apply bg-gradient-to-r rounded-lg p-4 text-white card-hover transition duration-300;
}

.stat-card.blue {
    @apply from-blue-500 to-blue-600;
}

.stat-card.green {
    @apply from-green-500 to-green-600;
}

.stat-card.purple {
    @apply from-purple-500 to-purple-600;
}

/* Button Components */
.btn {
    @apply px-4 py-2 rounded-md transition duration-200 font-medium;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
}

/* Form Components */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-input {
    @apply w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.form-select {
    @apply w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

/* Table Components */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table-header {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm;
}

.table-row {
    @apply bg-white divide-y divide-gray-200;
}

/* Alert Components */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-50 text-green-800 border border-green-200;
}

.alert-warning {
    @apply bg-yellow-50 text-yellow-800 border border-yellow-200;
}

.alert-error {
    @apply bg-red-50 text-red-800 border border-red-200;
}

.alert-info {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
}

/* Badge Components */
.badge {
    @apply text-xs px-2 py-0.5 rounded 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;
}

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

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
}

/* Modal Components */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white rounded-lg p-6 max-w-md w-full mx-4;
}

/* Pagination */
.pagination {
    @apply flex space-x-2;
}

.pagination-item {
    @apply px-3 py-1 rounded hover:bg-gray-100;
}

.pagination-item.active {
    @apply bg-blue-100 text-blue-800;
}