/* ==========================================================================
   Buttons
   ========================================================================== */
/* Three-tier recipe, straight from the reference file: .btn (bare) is the
   gradient-filled primary action; .btn-secondary is a bordered neutral pill;
   .btn-soft is a tinted, borderless "quiet but branded" action. Danger keeps
   the bordered-neutral shape with red text instead of inventing a fourth
   recipe. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-grad-end));
  color: var(--color-on-primary);
  border: none;
  /* Без цветного ореола: он читался как свечение, а не как подъём, и на тёмном
     фоне выглядел грязным пятном под кнопкой. Отклик на наведение остаётся —
     фоном и нажатием, а не тенью. */
  box-shadow: none;
  transition: box-shadow var(--transition-fast) var(--ease), opacity var(--transition-fast) var(--ease), transform 100ms var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--color-primary) 88%, #fff 12%); }
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 2rem; padding: 0.35rem 0.85rem; font-size: 0.78rem; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.btn-danger:hover { background: var(--color-danger-bg); box-shadow: none; }
.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--color-surface-muted); box-shadow: none; }
.btn-soft {
  background: var(--color-primary-bg);
  color: var(--color-primary-hover);
  border: none;
  box-shadow: none;
}
.btn-soft:hover { background: color-mix(in srgb, var(--color-primary-bg) 70%, var(--color-primary) 15%); }

/* Square, icon-only variant — for rows that would otherwise repeat 3-4 equally
   heavy text buttons (e.g. one per account). The accessible name comes from the
   button's own aria-label, so no visible label text is needed here. */
.btn-icon { padding: 0.55rem; min-width: 2.5rem; gap: 0; }
.btn-icon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Loading spinner shown inside a button while an AJAX submit is in flight — a
   translucent ring of the button's own (now always colored, never white-on-fill)
   text color, so one rule covers every variant instead of overriding per-color. */
.btn-spinner {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
}


/* Контурная кнопка: то же место в иерархии, что и залитая, но без веса. Нужна там,
   где действие главное на своём участке, а участок — не вся страница: «Добавить» в
   шапке списка не должен спорить с «Запустить» на той же странице.
   Тени нет намеренно — цветной ореол под кнопкой читается как свечение, а не как
   подъём, и на тёмном фоне выглядит грязно. */
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: none;
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  box-shadow: none;
}