@import "tailwindcss";

@layer base {
  body {
    @apply bg-slate-100 text-slate-800 min-h-screen antialiased;
  }

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

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

  table {
    @apply min-w-full divide-y divide-slate-200;
  }

  th {
    @apply uppercase tracking-wide text-xs font-semibold text-slate-500 text-left bg-slate-50;
  }

  td {
    @apply text-sm text-slate-700;
  }
}

@layer components {
  .page-container {
    @apply mx-auto flex min-h-screen max-w-5xl flex-col px-4 pb-10 sm:px-6 lg:px-8;
  }

  .page-container-wide {
    @apply max-w-none w-full px-4 sm:px-6 lg:px-12;
  }

  .page-card {
    @apply w-full rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200;
  }

  .section-grid {
    @apply grid gap-6 lg:grid-cols-2;
  }

  .btn {
    @apply inline-flex items-center justify-center rounded-lg border border-transparent bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600;
  }

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

  .btn-link {
    @apply text-sm font-semibold text-emerald-700 hover:text-emerald-800;
  }

  .nav-link {
    @apply inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-white hover:text-slate-900;
  }

  .form-field {
    @apply flex flex-col gap-2;
  }

  .form-field label {
    @apply text-sm font-medium text-slate-700;
  }

  .form-field input,
  .form-field select {
    @apply block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/40;
  }

  .form-checkbox {
    @apply h-5 w-5 rounded border border-slate-300 accent-emerald-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500;
  }

  .form-checkbox:disabled {
    @apply cursor-not-allowed opacity-60;
  }

  .form-errors {
    @apply rounded-lg border border-rose-200 bg-rose-50/60 p-4 text-sm text-rose-700;
  }

  .data-table {
    @apply w-full overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm sm:overflow-hidden;
  }

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

  .data-table tbody tr:nth-child(even) {
    @apply bg-slate-50/60;
  }

  .stat-card {
    @apply flex flex-col gap-2 rounded-xl bg-gradient-to-br from-white to-slate-50 p-5 shadow-sm ring-1 ring-slate-200;
  }

  .dashboard-layout-list {
    @apply space-y-6;
  }

  .dashboard-layout-grid {
    @apply grid gap-6 sm:grid-cols-2 lg:grid-cols-3;
  }

  .flash {
    @apply mb-4 rounded-lg px-4 py-3 text-sm font-medium;
  }

  .flash.notice {
    @apply bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200;
  }

  .flash.alert {
    @apply bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-200;
  }

  .auth-page {
    @apply mx-auto grid min-h-[480px] max-w-5xl grid-cols-1 gap-8 px-4 py-10 sm:px-6 lg:grid-cols-[minmax(0,420px),1fr] lg:px-8;
  }

  .auth-card {
    @apply flex flex-col gap-8 rounded-3xl bg-white p-8 shadow-xl ring-1 ring-slate-200;
  }

  .auth-illustration {
    @apply hidden rounded-3xl bg-gradient-to-br from-emerald-500 via-emerald-600 to-emerald-700 p-10 lg:flex lg:items-end lg:justify-start;
  }

  .auth-illustration-content {
    @apply space-y-4 text-emerald-50;
  }

  .input {
    @apply block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/40;
  }
}