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

@layer base {
  html { font-family: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif; }
  :focus-visible { @apply outline-none ring-2 ring-emerald-500 ring-offset-2; }
}

@layer components {
  .btn-primary { @apply inline-flex min-h-11 items-center justify-center rounded-xl bg-emerald-700 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-800 focus-visible:ring-emerald-600 disabled:cursor-not-allowed disabled:opacity-50; }
  .btn-secondary { @apply inline-flex min-h-11 items-center justify-center rounded-xl border border-slate-300 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50; }
  .form-label { @apply mb-2 block text-sm font-semibold text-slate-700; }
  .form-input { @apply block min-h-11 w-full rounded-xl border border-slate-300 bg-white px-3.5 py-2.5 text-base text-slate-900 shadow-sm placeholder:text-slate-400 hover:border-slate-400 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/20 sm:text-sm; }
  .card { @apply rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6; }
  .nav-link { @apply flex min-h-11 items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-slate-600 transition hover:bg-emerald-50 hover:text-emerald-800; }
  .nav-link-active { @apply bg-emerald-50 font-semibold text-emerald-800; }
  .alert { @apply mb-5 rounded-xl border px-4 py-3 text-sm; }
  .alert-error { @apply border-red-200 bg-red-50 text-red-800; }
  .alert-success { @apply border-emerald-200 bg-emerald-50 text-emerald-800; }
  .badge { @apply inline-flex rounded-full px-2.5 py-1 text-xs font-semibold; }
  .badge-role { @apply bg-blue-50 text-blue-700; }
  .badge-success { @apply bg-emerald-50 text-emerald-700; }
  .badge-muted { @apply bg-slate-100 text-slate-600; }
  .table-heading { @apply whitespace-nowrap px-6 py-3.5 text-left text-xs font-semibold uppercase tracking-wide text-slate-500; }
  .table-cell { @apply whitespace-nowrap px-6 py-4; }
}