@import "@fontsource/plus-jakarta-sans/400.css";
@import "@fontsource/plus-jakarta-sans/500.css";
@import "@fontsource/plus-jakarta-sans/600.css";
@import "@fontsource/plus-jakarta-sans/700.css";

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

:root {
  color-scheme: light;
}

@layer base {
  body {
    @apply overflow-x-hidden bg-slate-100 font-sans text-slate-900 antialiased;
  }

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

@layer components {
  .page-shell {
    @apply min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(79,70,229,0.08),_transparent_30%),linear-gradient(180deg,_#f8fafc_0%,_#eef2ff_100%)];
  }

  .surface-card {
    @apply rounded-3xl border border-white/70 bg-white/90 shadow-soft backdrop-blur;
  }

  .surface-muted {
    @apply rounded-2xl border border-slate-200 bg-slate-50/80;
  }

  .surface-subtle {
    @apply rounded-3xl border border-slate-200/80 bg-white/75;
  }

  .section-title {
    @apply text-lg font-semibold tracking-tight text-slate-900;
  }

  .section-copy {
    @apply text-sm text-slate-500;
  }

  .form-input,
  .form-select {
    @apply w-full rounded-2xl border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500/20;
  }

  .form-checkbox {
    @apply h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500;
  }

  .field-error {
    @apply mt-2 text-xs font-medium text-rose-600;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-soft transition hover:bg-indigo-500;
  }

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

  .btn-ghost {
    @apply inline-flex items-center justify-center rounded-2xl px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-100 hover:text-slate-900;
  }

  .page-header {
    @apply flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between;
  }

  .page-kicker {
    @apply text-xs font-semibold uppercase tracking-[0.24em] text-slate-400;
  }

  .tab-link {
    @apply inline-flex items-center rounded-2xl px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-100 hover:text-slate-900;
  }

  .tab-link-active {
    @apply bg-indigo-600 text-white shadow-soft hover:bg-indigo-600 hover:text-white;
  }

  .mini-stat {
    @apply rounded-3xl border border-slate-200 bg-white px-5 py-4;
  }

  .info-list dt {
    @apply text-xs font-semibold uppercase tracking-[0.16em] text-slate-400;
  }

  .info-list dd {
    @apply mt-1 text-sm font-medium text-slate-900;
  }

  .table-shell {
    @apply overflow-hidden rounded-3xl border border-slate-200 bg-white;
  }

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

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

  .table-shell th {
    @apply px-6 py-3 text-left text-xs font-semibold uppercase tracking-[0.16em] text-slate-500;
  }

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