/* Shared button system: aliases the real button classes already in use —
   Bootstrap-style .btn (admin + both themes), SmmDadPrime's
   .component-button/.app-button, NebulaCircuit's api.twig .apx-btn.
   Additive only — extends existing rules, does not replace them. */

:root {
  --btn-primary-bg: var(--table-primary);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--table-row-stripe-bg);
  --btn-secondary-text: var(--table-text);
  --btn-danger-bg: var(--table-danger);
  --btn-success-bg: var(--table-success);
  --btn-warning-bg: var(--table-warning);
  --btn-border-color: var(--table-border-color);
  --btn-focus-ring: var(--admin-primary, var(--brand-primary, var(--primary, var(--nc-signal, #4f46e5))));
}

.btn,
.component-button,
.app-button,
.apx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--ds-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn:focus-visible,
.component-button:focus-visible,
.app-button:focus-visible,
.apx-btn:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}

.btn:hover,
.component-button:hover,
.app-button:hover,
.apx-btn:hover {
  filter: brightness(0.96);
}

.btn:active,
.component-button:active,
.app-button:active,
.apx-btn:active {
  filter: brightness(0.92);
}

.btn:disabled,
.component-button:disabled,
.app-button:disabled,
.apx-btn:disabled,
.btn.disabled,
.component-button.disabled,
.app-button.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}

/* ---- Size modifiers (additive) ---- */
.btn-xs,
.app-btn-xs {
  min-height: 28px;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
}

.btn-sm {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-lg {
  min-height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--font-size-base);
}

/* ---- Color variants (only apply where no bg is already set by theme CSS
   with higher specificity; these are safe additive fallbacks) ---- */
.btn-outline {
  background: transparent;
  border: 1px solid var(--btn-border-color);
  color: var(--table-text);
}

.btn-ghost,
.apx-btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--table-text);
}

/* ---- Icon spacing ---- */
.btn svg,
.btn i,
.component-button svg,
.component-button i,
.app-button svg,
.app-button i,
.apx-btn svg,
.apx-btn i,
.admin-btn svg,
.admin-btn i {
  flex-shrink: 0;
}

/* .admin-btn already has its own consistent height/padding/radius/hover/focus/
   disabled system in public/admin/app.css — only extending it with the
   loading-state spinner here, not touching its existing sizing/states. */

/* ---- Loading state: pure-CSS spinner, no JS required ---- */
.btn.is-loading,
.component-button.is-loading,
.app-button.is-loading,
.admin-btn.is-loading,
.btn.btn-loading {
  position: relative;
  color: transparent !important; /* hide label text while spinner shows; no other way to keep layout width */
  pointer-events: none;
}

.btn.is-loading::after,
.component-button.is-loading::after,
.app-button.is-loading::after,
.admin-btn.is-loading::after,
.btn.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: ds-btn-spin 0.6s linear infinite;
}

.btn-outline.is-loading::after,
.btn-ghost.is-loading::after {
  border: 2px solid var(--table-border-color);
  border-top-color: var(--table-primary);
}

@keyframes ds-btn-spin {
  to { transform: rotate(360deg); }
}