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

[x-cloak] { display: none !important; }

.card {
    @apply rounded-2xl border border-slate-200 bg-white p-6 shadow-sm;
}

.btn-primary {
    @apply inline-flex items-center justify-center rounded-xl bg-slate-950 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-800;
}

.btn-secondary {
    @apply inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50;
}

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

.input-field {
    @apply w-full rounded-xl border-slate-300 shadow-sm focus:border-slate-950 focus:ring-slate-950;
}

.table-th {
    @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500;
}

.table-td {
    @apply px-4 py-3 text-sm text-slate-700;
}