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

@layer base {
  body {
    @apply bg-slate-100 text-slate-900 antialiased;
  }

  h1 {
    @apply text-2xl font-semibold tracking-tight text-slate-900;
  }

  h2 {
    @apply text-xl font-semibold tracking-tight text-slate-900;
  }

  h3 {
    @apply text-lg font-semibold text-slate-900;
  }

  a {
    @apply text-brand-700 hover:text-brand-600;
  }

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

  input,
  select,
  textarea {
    @apply w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none ring-brand-600 transition focus:border-brand-600 focus:ring-2;
  }

  input[type='checkbox'] {
    @apply h-4 w-4 rounded border-slate-300 p-0 text-brand-700;
  }

  summary {
    @apply cursor-pointer font-medium text-slate-800;
  }
}

@layer components {
  .page-container {
    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
  }

  .panel {
    @apply rounded-xl border border-slate-200 bg-white p-5 shadow-soft;
  }

  .btn {
    @apply inline-flex items-center justify-center rounded-md border border-brand-700 bg-brand-700 px-3 py-2 text-sm font-medium text-white transition hover:bg-brand-600;
  }

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

  .table-wrap {
    @apply overflow-x-auto rounded-lg border border-slate-200;
  }

  .data-table {
    @apply min-w-full divide-y divide-slate-200 text-sm;
  }

  .data-table thead {
    @apply bg-slate-50;
  }

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

  .data-table td {
    @apply whitespace-nowrap px-3 py-2 text-slate-700;
  }

  .empty-state {
    @apply rounded-lg border border-dashed border-slate-300 bg-slate-50 p-6 text-center text-sm text-slate-600;
  }

  .htmx-indicator {
    display: none;
  }

  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    display: block;
  }
}