/* components.css - Reusable UI components */

/* Buttons */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
}

.btn-primary {
    @apply text-white bg-brand-600 hover:bg-brand-700 focus:ring-brand-500;
}

.btn-secondary {
    @apply bg-white border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-brand-500;
}

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

/* Cards */
.card {
    @apply bg-white shadow rounded-lg border border-gray-200 overflow-hidden;
}

.card-header {
    @apply px-4 py-5 sm:px-6 border-b border-gray-200 bg-gray-50;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

/* Forms */
.form-input {
    @apply shadow-sm focus:ring-brand-500 focus:border-brand-500 block w-full sm:text-sm border-gray-300 rounded-md;
}

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

/* Tables */
.table-container {
    @apply overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg;
}

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

.table th {
    @apply py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 bg-gray-50;
}

.table td {
    @apply whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6;
}

/* Badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

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

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

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