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

@layer base {
  body { @apply bg-slate-50 text-slate-900 antialiased; }
  h1, h2, h3 { @apply tracking-tight; }
}

@layer components {
  /* Buttons */
  .btn {
    @apply inline-flex items-center justify-center gap-1.5 bg-brand-600 text-white text-sm font-medium px-3.5 py-2 rounded-lg
           shadow-sm hover:bg-brand-700 active:bg-brand-800 cursor-pointer transition-colors
           focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-white
           disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply inline-flex items-center justify-center gap-1.5 bg-white text-slate-700 text-sm font-medium px-3.5 py-2 rounded-lg
           border border-slate-300 shadow-sm hover:bg-slate-50 active:bg-slate-100 cursor-pointer transition-colors
           focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-white;
  }
  .btn-danger {
    @apply inline-flex items-center justify-center gap-1.5 bg-white text-red-600 text-sm font-medium px-3.5 py-2 rounded-lg
           border border-red-200 shadow-sm hover:bg-red-50 active:bg-red-100 cursor-pointer transition-colors
           focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-white;
  }
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-1.5 text-slate-500 text-sm font-medium px-2 py-1 rounded-md
           hover:bg-slate-100 hover:text-slate-900 cursor-pointer transition-colors;
  }
  .btn-xs { @apply text-xs px-2.5 py-1; }
  .link-danger { @apply text-red-600 hover:text-red-800 hover:underline text-sm font-medium cursor-pointer bg-transparent border-0 p-0; }
  .link-muted { @apply text-slate-500 hover:text-slate-800 hover:underline text-sm cursor-pointer bg-transparent border-0 p-0; }

  /* Surfaces */
  .card { @apply bg-white border border-slate-200/80 rounded-xl shadow-sm p-6; }
  .card-flush { @apply bg-white border border-slate-200/80 rounded-xl shadow-sm overflow-hidden; }
  .stat-card { @apply bg-white border border-slate-200/80 rounded-xl shadow-sm p-5 flex items-start justify-between; }

  /* Forms */
  .field-label { @apply block text-sm font-medium text-slate-700 mb-1.5; }
  .field-hint { @apply text-xs text-slate-500 mt-1.5; }
  .field-input {
    @apply w-full rounded-lg border-slate-300 bg-white shadow-sm text-sm text-slate-900 placeholder:text-slate-400
           focus:border-brand-500 focus:ring-brand-500 focus:ring-1 transition-colors;
  }
  .field-input:disabled { @apply bg-slate-50 text-slate-500; }
  .field-error { @apply text-xs text-red-600 mt-1.5; }
  .form-alert {
    @apply rounded-lg bg-red-50 border border-red-100 text-red-800 text-sm px-4 py-3 mb-4;
  }
  .fieldset { @apply space-y-5; }

  /* Tables */
  .table-wrap { @apply overflow-x-auto; }
  .data-table { @apply w-full text-sm text-left border-collapse; }
  .data-table thead th {
    @apply text-xs uppercase tracking-wide text-slate-500 font-semibold bg-slate-50/80
           border-b border-slate-200 px-4 py-2.5 first:rounded-tl-lg last:rounded-tr-lg;
  }
  .data-table td { @apply border-b border-slate-100 px-4 py-3 align-middle text-slate-700; }
  .data-table tbody tr:last-child td { @apply border-b-0; }
  .data-table tbody tr:hover td { @apply bg-slate-50/70; }
  .data-table .empty-row td { @apply text-slate-400 italic text-center py-8; }

  /* Badges */
  .badge { @apply inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap; }
  .badge-green { @apply bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20; }
  .badge-gray { @apply bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-500/10; }
  .badge-red { @apply bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10; }
  .badge-amber { @apply bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20; }
  .badge-brand { @apply bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-600/20; }
  .dot { @apply w-1.5 h-1.5 rounded-full; }

  /* Layout helpers */
  .page-header { @apply flex flex-wrap items-center justify-between gap-3 mb-6; }
  .page-title { @apply text-xl font-semibold text-slate-900; }
  .page-subtitle { @apply text-sm text-slate-500 mt-0.5; }
  .section-label { @apply text-xs font-semibold uppercase tracking-wider text-slate-400; }
  .empty-state { @apply text-center py-12 text-slate-400 text-sm; }

  /* Flash messages */
  .flash-notice { @apply mb-5 rounded-lg bg-emerald-50 border border-emerald-100 text-emerald-800 text-sm px-4 py-3 flex items-center gap-2; }
  .flash-alert { @apply mb-5 rounded-lg bg-red-50 border border-red-100 text-red-800 text-sm px-4 py-3 flex items-center gap-2; }

  /* Auth pages */
  .auth-shell { @apply min-h-screen flex items-center justify-center bg-slate-50 px-4; }
  .auth-card { @apply w-full max-w-sm bg-white border border-slate-200/80 rounded-2xl shadow-lg shadow-slate-200/50 p-8; }
  .brand-mark { @apply w-9 h-9 rounded-lg bg-white border border-slate-200 flex items-center justify-center shadow-sm; }

  /* Pagy pagination (ships unstyled) */
  .pagy { @apply flex items-center gap-1 text-sm; }
  .pagy a, .pagy span { @apply inline-flex items-center justify-center min-w-[2rem] h-8 px-2 rounded-md text-slate-600; }
  .pagy a:hover { @apply bg-slate-100 text-slate-900; }
  .pagy .active { @apply bg-brand-600 text-white font-medium; }
  .pagy .disabled { @apply text-slate-300; }
  .pagy .gap { @apply text-slate-300; }
}