/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
/* display above beats the browser's default [hidden] rule — restore it so hidden="" works on a .btn. */
.btn[hidden] { display: none; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-alt); }
.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { filter: brightness(0.93); }
.btn--ghost { background: transparent; color: var(--color-text-secondary); }
.btn--ghost:hover { background: var(--color-surface-alt); color: var(--color-text); }
.btn--block { width: 100%; }
.btn--lg { padding: var(--spacing-3) var(--spacing-5); font-size: var(--font-size-md); }
.btn .icon { margin: 0; }

/* Busy state — for a submit that starts long server work (a data import runs ~120k rows), so the page
   never looks frozen and nobody clicks twice. pointer-events stops a second click before the button's
   own disabled attribute is set on the next tick. */
.btn.is-busy { pointer-events: none; opacity: 0.7; }
.btn__spinner {
    width: 14px;
    height: 14px;
    flex: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Keep the "still working" signal for reduced-motion users, just calmer. */
@media (prefers-reduced-motion: reduce) { .btn__spinner { animation-duration: 2.4s; } }
