/*
 * Omnx Flow — buttons (component sheet)
 * ---------------------------------------------------------------------------
 * Port of the etcX approved v2 button spec (v2/buttons.css), unscoped and
 * token-native, PLUS the etcX admin tinted-ghost family (admin/main.css) under
 * its own class so both looks coexist:
 *   .primary-button    filled accent (high emphasis)         — v2 canonical
 *   .secondary-button  transparent outline ghost             — v2 canonical
 *   .danger-button     danger-tinted, fills red on hover     — v2 canonical
 *   .ghost-button      36px accent tinted-ghost + hover lift — admin look
 *   .ghost-button.danger  the admin danger tinted-ghost variant
 * Size modifiers: .sm / .large (shared).
 * NOTE: .icon-button is owned by base.css (the 40px top-bar spec) and is
 * deliberately NOT redefined here.
 */

/* =========================================================================
 * Primary button: filled accent (the canonical high-emphasis action).
 * ========================================================================= */
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--accent-fill);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  color: var(--on-accent-fill);
  font: var(--btn-font);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}

/* Primary hover/active: lift via elevation, keep the filled fill. */
.primary-button:hover:not(:disabled) {
  background: var(--accent-fill-hover);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.primary-button:active:not(:disabled) {
  background: var(--accent-fill);
  transform: none;
}
.primary-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.primary-button .material-symbols-outlined {
  font-size: var(--text-xl);
}

/* =========================================================================
 * Secondary button: DISTINCT low-emphasis ghost/outline.
 * ========================================================================= */
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--surface-tile);
  border: 1px solid var(--line-strong);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  font: var(--btn-font);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}
.secondary-button:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--md-sys-color-outline);
  color: var(--text-primary);
  transform: none;
  box-shadow: none;
}
.secondary-button:active:not(:disabled) {
  background: var(--md-sys-color-surface-container-highest);
}
.secondary-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.secondary-button .material-symbols-outlined {
  font-size: var(--text-xl);
}

/* =========================================================================
 * Danger button: danger tint at rest, fills solid red on hover.
 * ========================================================================= */
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--btn-radius);
  color: var(--status-danger);
  font: var(--btn-font);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast);
}
.danger-button:hover:not(:disabled) {
  background: var(--status-danger);
  border-color: var(--status-danger);
  color: var(--on-accent-fill);
  box-shadow: var(--md-sys-elevation-1);
}
.danger-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.danger-button .material-symbols-outlined {
  font-size: var(--text-xl);
}

/* .primary-button.danger → same danger look (etcX parity alias). */
.primary-button.danger {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger);
}
.primary-button.danger:hover:not(:disabled) {
  background: var(--status-danger);
  border-color: var(--status-danger);
  color: var(--on-accent-fill);
  box-shadow: var(--md-sys-elevation-1);
}

/* =========================================================================
 * Ghost button — the etcX admin tinted-ghost look (admin/main.css
 * .primary-button/.secondary-button): 36px, accent tint fill + tint border,
 * hover lift + accent glow. Kept under its own class so it coexists with the
 * v2 filled primary above.
 * ========================================================================= */
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--accent-tint-08);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  height: 36px;
}

.ghost-button:hover:not(:disabled) {
  background: var(--accent-tint-15);
}

.ghost-button:active:not(:disabled) {
  background: var(--accent-tint-20);
}

.ghost-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.ghost-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ghost-button .material-symbols-outlined {
  font-size: var(--text-xl);
}

/* Danger variant — the admin rgba(198,40,40,*) / #ef9a9a recipe, tokenized. */
.ghost-button.danger {
  background: var(--danger-tint-12);
  border-color: var(--danger-tint-30);
  color: var(--danger-soft);
}
.ghost-button.danger:hover:not(:disabled) {
  background: var(--danger-tint-22);
  border-color: var(--danger-tint-50);
}
.ghost-button.danger:focus-visible {
  outline-color: var(--danger-soft);
}

/* =========================================================================
 * Size modifiers (shared)
 * ========================================================================= */

/* Small: compact pad/icon. */
.primary-button.sm,
.secondary-button.sm,
.danger-button.sm,
.ghost-button.sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--text-xs);
  gap: var(--spacing-xs);
  height: auto;
}
.primary-button.sm .material-symbols-outlined,
.secondary-button.sm .material-symbols-outlined,
.danger-button.sm .material-symbols-outlined,
.ghost-button.sm .material-symbols-outlined {
  font-size: var(--text-base);
}

/* Large: the bigger metrics (admin defined 48px for its family). */
.primary-button.large,
.secondary-button.large {
  padding: var(--space-12) var(--spacing-lg);
  font-size: var(--text-base);
}
.ghost-button.large {
  padding: var(--space-12) var(--spacing-lg);
  font-size: var(--text-base);
  height: 48px;
}

/* =========================================================================
 * Text button — borderless accent link-button (etcX notifications pattern).
 * ========================================================================= */
.text-button {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-xs);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.text-button:hover {
  background: var(--accent-tint-10);
}