﻿.erp-action-group, .erp-ds-action-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--erp-space-2); }
/* Wave 15 (button structure) 2026-05-15 — 加 white-space:nowrap + min-width
   防止 2-字中文按鈕（編輯 / 刪除 / 查詢 / 送審 etc.）在窄欄被斷字成「編 / 輯」
   min-width 確保至少 4ch + padding 不至於擠出 user 看到 user 截圖那種圓 pill */
.erp-button { min-height: 40px; min-width: 56px; display: inline-flex; align-items: center; justify-content: center; gap: var(--erp-space-2); padding: 0 var(--erp-space-4); border: 1px solid transparent; border-radius: var(--erp-radius-sm); background: transparent; color: var(--erp-text-secondary); font: inherit; font-weight: 800; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: color var(--erp-motion-fast), background var(--erp-motion-fast), border-color var(--erp-motion-fast), box-shadow var(--erp-motion-fast), transform var(--erp-motion-fast); }
.erp-button:hover, .erp-button:focus-visible { text-decoration: none; }
.erp-button--primary,
.btn-cyber-gold, html .btn-cyber-gold { color: var(--erp-gold-light) !important; background: linear-gradient(180deg, var(--erp-blackgold-bg-top) 0%, var(--erp-blackgold-bg-bottom) 100%) !important; background-color: var(--erp-blackgold-bg-bottom) !important; border: 1px solid var(--erp-gold-primary) !important; border-color: var(--erp-gold-primary) !important; box-shadow: inset 0 1px 0 rgba(var(--erp-rgb-gold-primary), 0.18), 0 1px 2px rgba(var(--erp-rgb-black), 0.4); }
.erp-button--primary:hover, .erp-button--primary:focus-visible,
.btn-cyber-gold:hover, html .btn-cyber-gold:hover, html .btn-cyber-gold:focus-visible { background: linear-gradient(180deg, var(--erp-blackgold-bg-top-hover) 0%, var(--erp-blackgold-bg-bottom-hover) 100%) !important; background-color: var(--erp-blackgold-bg-bottom-hover) !important; border-color: var(--erp-gold-light) !important; color: var(--erp-text-primary) !important; box-shadow: inset 0 1px 0 rgba(var(--erp-rgb-gold-light), 0.28), 0 2px 12px rgba(var(--erp-rgb-gold-primary), 0.20); transform: translateY(var(--erp-button-hover-lift)); }
.erp-button--secondary { color: var(--erp-gold-light) !important; background: transparent; border-color: var(--erp-gold-dark); }
.erp-button--secondary:hover, .erp-button--secondary:focus-visible { color: var(--erp-gold-light) !important; background: rgba(var(--erp-rgb-gold-dark), 0.15); border-color: var(--erp-gold-light); }
.erp-button--danger { color: var(--erp-ds-danger-text-strong) !important; background: rgba(var(--erp-rgb-danger), 0.10); border-color: rgba(var(--erp-rgb-danger), 0.55); }
.erp-button--danger:hover { background: rgba(var(--erp-rgb-danger), 0.20); border-color: var(--erp-danger); }
.erp-button--ghost { color: var(--erp-text-secondary); background: transparent; border-color: transparent; }
.erp-button--ghost:hover { color: var(--erp-gold-light); background: rgba(var(--erp-rgb-gold-dark), 0.12); border-color: var(--erp-border); }
.erp-button--sm, .erp-button.btn-sm { min-height: 30px; padding-inline: var(--erp-space-3); font-size: 12px; }
.erp-button--xs, .btn-table-action { min-height: 24px; padding: 2px 8px; font-size: 11px; border-radius: var(--erp-radius-xs); }
.erp-icon-button { width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: var(--erp-radius-sm); }
.erp-button:disabled, .erp-button.disabled, .erp-button[aria-disabled='true'] { color: var(--erp-ds-denied) !important; background: var(--erp-ds-denied-bg); border-color: rgba(var(--erp-rgb-muted),.24); box-shadow: none; cursor: not-allowed; pointer-events: none; transform: none; }
.erp-modal__close, .erp-drawer__close { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); background: transparent; color: var(--erp-gold-light); cursor: pointer; }
.erp-modal__close::before, .erp-drawer__close::before { content: "x"; font-weight: 900; line-height: 1; }
.erp-modal__close:hover, .erp-drawer__close:hover { border-color: var(--erp-gold-light); background: rgba(var(--erp-rgb-gold-dark),.15); }

/* P2 Touch & Interaction — press feedback + mobile touch target */
.erp-button:active, .erp-button--primary:active, .erp-button--secondary:active, .erp-button--ghost:active,
.btn-primary:active, .btn-cyber-gold:active, .btn:active {
  transform: translateY(0) !important;
  filter: brightness(0.88);
  transition-duration: 50ms;
}
@media (max-width: 767px) {
  .erp-button--xs, .btn-table-action, .btn--xs, .btn-sm, .erp-button--sm, .btn.btn-sm {
    min-height: 44px;
    padding-inline: 12px;
  }
  .erp-button, .btn { min-height: 48px; }
}

/* erp-segmented — APG radiogroup pill strip (TenantOnboarding checklist/accounts filter) */
.erp-segmented { display: inline-flex; align-items: center; gap: var(--erp-space-1); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); padding: 2px; background: rgba(var(--erp-rgb-black), 0.25); }
.erp-segmented .erp-button { border-radius: calc(var(--erp-radius-sm) - 1px); }
.erp-segmented .erp-button[aria-checked="true"] { box-shadow: 0 1px 3px rgba(var(--erp-rgb-black), 0.3); }

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1 / Phase 1b-iii Batch B (2026-05-13)
 * Migrated from erp-tailwind.css S5 (Bootstrap btn variants).
 * Specificity .btn.btn-* keeps current production visual; existing
 * .btn-primary gradient rule above is redundant for now (cleanup Slice 10).
 * cyber-* button variants are aliases sharing same visual as their
 * Bootstrap-named partners; no separate theme scope needed because tokens
 * already encode the cyber-mandarin palette.
 * ─────────────────────────────────────────────────────────────────────── */
/* Wave 2 (P1-B 黑金低調) 2026-05-15 — primary 從「實心金」改「深底+金邊+金字」。
   原因：用戶反饋「按鈕都是金色 pill」/「2010 admin panel」。實心 gold 在黑底太搶眼，
   違反低調風。改成 .erp-button--primary 的深漸層樣式，與 erp-button system 一致。
   Source: UIUX-COMPREHENSIVE-AUDIT-20260515.md §1.3 + §4 P1-B */
.btn.btn-primary,
.btn.btn-warning,
.btn.btn-cyber-gold {
  border: 1px solid var(--erp-gold-primary) !important;
  background: linear-gradient(180deg, var(--erp-blackgold-bg-top) 0%, var(--erp-blackgold-bg-bottom) 100%) !important;
  color: var(--erp-gold-light) !important;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(var(--erp-rgb-gold-primary), 0.18), 0 1px 2px rgba(var(--erp-rgb-black), 0.4);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
.btn.btn-warning:hover,
.btn.btn-warning:focus-visible,
.btn.btn-cyber-gold:hover,
.btn.btn-cyber-gold:focus-visible {
  border-color: var(--erp-gold-light) !important;
  background: linear-gradient(180deg, var(--erp-blackgold-bg-top-hover) 0%, var(--erp-blackgold-bg-bottom-hover) 100%) !important;
  color: var(--erp-text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(var(--erp-rgb-gold-light), 0.28), 0 2px 12px rgba(var(--erp-rgb-gold-primary), 0.20);
  transform: translateY(var(--erp-button-hover-lift));
}
/* ───────────────────────────────────────────────────────────────────────
 * Wave G (Auth Submit) — 2026-06-01
 * Auth-exclusive primary button variant. Typographic-only override —
 * background / border / color gradient 由 .btn-primary 接管（共用視覺）。
 * Lifted from pages/auth-shell.css per DECISION-20260530 W2.x.3.
 * Used: Account/Login (×1), ChangePassword (×1), Denied (×2) = 4 markup points.
 * Rule 8 exception: selector scope unchanged, semantic boundary preserved.
 * ─────────────────────────────────────────────────────────────────────── */
.btn.erp-button--auth-submit {
  min-height: var(--erp-touch-target-xl);
  border-radius: var(--erp-radius-lg);
  font-family: var(--erp-font-mono);
  font-size: var(--erp-text-button-emphasis);
  font-weight: 700;  /* 刻意：vs .btn.btn-primary 800 — auth CTA 以 mono+uppercase 取代 weight 強調 */
  letter-spacing: var(--erp-letter-spacing-emphasis);
  text-transform: uppercase;
}
/* Wave 2 (P1-B 低調) 2026-05-15 — secondary/outline 從「金邊金字」改「灰邊柔金字」。
   原因：754 處 outline-secondary 全用 gold-dark 邊 + gold-light 字，視覺過熱。
   低調風應該 secondary 灰調為主，hover 才轉金。 */
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-light,
.btn.btn-outline-info,
.btn.btn-outline-warning,
.btn.btn-secondary,
.btn.btn-link,
.btn.btn-cyber-outline,
.btn.btn-cyber-hollow {
  border-color: var(--erp-border) !important;
  background: transparent !important;
  color: var(--erp-text-secondary) !important;
  box-shadow: none;
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus-visible,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus-visible,
.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus-visible,
.btn.btn-outline-info:hover,
.btn.btn-outline-info:focus-visible,
.btn.btn-outline-warning:hover,
.btn.btn-outline-warning:focus-visible,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible,
.btn.btn-link:hover,
.btn.btn-link:focus-visible,
.btn.btn-cyber-outline:hover,
.btn.btn-cyber-outline:focus-visible,
.btn.btn-cyber-hollow:hover,
.btn.btn-cyber-hollow:focus-visible {
  border-color: var(--erp-gold-dark) !important;
  background: rgba(var(--erp-rgb-gold-dark), 0.12) !important;
  color: var(--erp-gold-light) !important;
}
.btn.btn-outline-secondary.is-active,
.btn.btn-outline-primary.is-active,
.btn.btn-outline-light.is-active,
.btn.btn-outline-info.is-active,
.btn.btn-outline-warning.is-active,
.btn.btn-outline-secondary.active,
.btn.btn-outline-primary.active,
.btn.btn-outline-light.active,
.btn.btn-outline-info.active,
.btn.btn-outline-warning.active {
  border-color: var(--erp-gold-primary) !important;
  background: color-mix(in oklab, var(--erp-gold-dark) 30%, transparent) !important;
  color: var(--erp-gold-light) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--erp-gold-primary) 30%, transparent);
}
.btn.btn-danger,
.btn.btn-outline-danger {
  border-color: color-mix(in oklab, var(--erp-danger) 68%, transparent) !important;
  background: color-mix(in oklab, var(--erp-danger) 10%, transparent) !important;
  color: #ffe0e0 !important;
  box-shadow: none;
}
.btn.btn-danger:hover,
.btn.btn-danger:focus-visible,
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus-visible {
  border-color: color-mix(in oklab, var(--erp-danger) 82%, transparent) !important;
  background: color-mix(in oklab, var(--erp-danger) 22%, transparent) !important;
  color: #fff3f3 !important;
}
.btn.btn-success,
.btn.btn-outline-success {
  border-color: color-mix(in oklab, var(--erp-success) 70%, transparent) !important;
  background: color-mix(in oklab, var(--erp-success) 12%, transparent) !important;
  color: #d9ffe9 !important;
  box-shadow: none;
}
.btn.btn-success:hover,
.btn.btn-success:focus-visible,
.btn.btn-outline-success:hover,
.btn.btn-outline-success:focus-visible {
  border-color: var(--erp-success) !important;
  background: color-mix(in oklab, var(--erp-success) 22%, transparent) !important;
  color: #f0fff6 !important;
}
.btn-sm {
  min-height: 2rem;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.78rem;
}
.btn-lg {
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem !important;
  font-size: 1rem;
}
.btn-group,
.btn-group-sm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.btn-group > .btn {
  border-radius: var(--erp-radius-sm) !important;
}
