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

@layer components {
    .btn-primary { @apply inline-flex items-center justify-center rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2; }
    .btn-secondary { @apply inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2; }
    .btn-danger { @apply inline-flex items-center justify-center rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2; }
    .input-field { @apply mt-1 block w-full rounded-lg border border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500 sm:text-sm; }
    .input-label { @apply block text-sm font-medium text-slate-700; }
    .table-admin { @apply min-w-full divide-y divide-slate-200; }
    .table-admin th { @apply bg-slate-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-600; }
    .table-admin td { @apply whitespace-nowrap px-4 py-3 text-sm text-slate-800; }
    .table-admin tbody tr { @apply transition hover:bg-slate-50; }
    .card-admin { @apply rounded-xl border border-slate-200 bg-white shadow-sm; }
    .filter-bar { @apply flex flex-wrap items-end gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm; }
}