/* Шрифты */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
kbd { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; }

/* Alpine.js cloak до инициализации */
[x-cloak] { display: none !important; }

/* ----- Base — focus-visible на всех интерактивах (a11y) ---------------- */
/* Без этого клавиатурная навигация невозможна — был критический gap. */
@layer base {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible,
  summary:focus-visible {
    outline: 2px solid theme('colors.indigo.500');
    outline-offset: 2px;
    border-radius: 4px;
  }
}

/* ----- Design tokens (level 1) — кнопки -------------------------------- */
/* Tailwind CDN поддерживает @apply через JIT — это компилируется в браузере. */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded font-medium
           transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-800;
  }
  .btn-success {
    @apply btn bg-emerald-600 text-white hover:bg-emerald-700 active:bg-emerald-800;
  }
  .btn-secondary {
    @apply btn bg-white border border-slate-300 text-slate-700
           hover:bg-slate-50 active:bg-slate-100;
  }
  .btn-link {
    @apply text-indigo-600 hover:text-indigo-800 hover:underline cursor-pointer
           bg-transparent border-0 p-0 disabled:opacity-50;
  }
  .btn-link-danger {
    @apply text-rose-600 hover:text-rose-800 hover:underline cursor-pointer
           bg-transparent border-0 p-0 disabled:opacity-50;
  }

  /* размеры */
  .btn-sm { @apply text-sm px-3 py-1.5; }
  .btn-md { @apply text-base px-4 py-2; }
  .btn-lg { @apply text-base px-4 py-3; }

  /* ----- Inputs / Selects -------------------------------------------- */
  .input-base {
    @apply w-full px-3 py-2 border border-slate-300 rounded text-base bg-white
           disabled:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-60
           placeholder:text-slate-400;
  }
  .input-cell {
    @apply text-center border border-slate-200 rounded px-1 py-0.5
           disabled:bg-slate-50 disabled:opacity-60;
  }
  .input-inline {
    @apply text-xs border border-slate-300 rounded px-1 py-0.5
           disabled:bg-slate-50 disabled:opacity-60;
  }
  .input-currency {
    @apply input-base text-right font-medium;
  }

  /* ----- Cards ------------------------------------------------------- */
  .card {
    @apply bg-white border border-slate-200 rounded-lg;
  }
  .card-row {
    @apply border border-slate-200 rounded p-2.5;
  }
  .card-clickable {
    @apply card block hover:border-indigo-300 hover:shadow-sm
           active:bg-slate-50 transition-colors;
  }
  .card-locked {
    @apply card bg-slate-50 opacity-75 relative;
  }
  .card-warning {
    @apply border-amber-300 bg-amber-50/40;
  }

  /* ----- Badges (статусы, типы) ------------------------------------ */
  .badge {
    @apply text-xs px-2 py-1 rounded whitespace-nowrap inline-block;
  }
  .badge-success { @apply badge bg-emerald-100 text-emerald-700; }
  .badge-warning { @apply badge bg-amber-100 text-amber-800; }
  .badge-neutral { @apply badge bg-slate-200 text-slate-700; }
  .badge-info    { @apply badge bg-sky-100 text-sky-700; }
  .badge-special { @apply badge bg-violet-100 text-violet-700; }
}

/* ----- Drop-zone подсветка при drag-over ------------------------------- */
.drop-zone.drop-active {
  @apply border-indigo-600 bg-indigo-50;
  border-style: solid;
}

/* ----- Loading state для форм -----------------------------------------
   Применяется через JS (.is-loading) при submit'е, чтобы юзер не тапал
   второй раз. Затемняет содержимое + блокирует pointer. */
.is-loading {
  position: relative;
  pointer-events: none;
}
.is-loading > * { opacity: 0.5; }
.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid theme('colors.indigo.600');
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Убрать спиннеры у input[type=number] ---------------------------- */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }