/* 按鈕：全系統唯一的按鈕外觀（CSS 架構重構 P7.5，規格見 docs/CSS架構重構設計.md §7.2）。
   用途用變體表示：--primary（每區最多一個）/ --secondary / --ghost / --danger / --prepare / --out / --on-dark / --export（匯出，亮藍）；
   尺寸：--sm 32px、--md 38px（手機 44px）；--icon 方形圖示鈕；--solid 用於 modal 的流程確認鈕。
   頁面 CSS 只能調整位置與寬度（margin / width / flex / position），不得改按鈕外觀。 */
@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; height: var(--h-md); padding: 0 14px;
    border: 1px solid transparent; border-radius: var(--r-md);
    background: var(--c-white); color: var(--c-text-2);
    font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold); line-height: 1;
    white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
  }
  .btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

  .btn--sm { height: var(--h-sm); padding: 0 12px; font-size: var(--fs-12); }
  .btn--md { height: var(--h-md); padding: 0 14px; font-size: var(--fs-13); }
  .btn--icon { width: var(--h-sm); padding: 0; }
  .btn--md.btn--icon { width: var(--h-md); }

  .btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
  .btn--primary:hover:not(:disabled) { background: var(--c-primary-strong); border-color: var(--c-primary-strong); }
  .btn--secondary { background: var(--c-white); border-color: var(--c-border-control); color: var(--c-text-2); }
  .btn--secondary:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-muted); }
  /* 切換型按鈕（如「批次改位置」開啟中）用 .is-active 表示按下狀態 */
  .btn--secondary.is-active { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }
  .btn--ghost { background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary); }
  .btn--ghost:hover:not(:disabled) { background: var(--c-primary-soft-2); }
  .btn--export { background: var(--c-export); border-color: var(--c-export); color: var(--c-white); }
  .btn--export:hover:not(:disabled) { background: var(--c-export-strong); border-color: var(--c-export-strong); }
  .btn--danger { background: var(--c-white); border-color: var(--c-danger-border); color: var(--c-danger); }
  .btn--danger:hover:not(:disabled) { background: var(--c-danger-soft); }
  .btn--prepare { background: var(--c-white); border-color: var(--c-prepare-border); color: var(--c-prepare); }
  .btn--prepare:hover:not(:disabled) { background: var(--c-prepare-soft); }
  .btn--out { background: var(--c-white); border-color: var(--c-out-solid); color: var(--c-out); }
  .btn--out:hover:not(:disabled) { background: var(--c-out-soft); }
  .btn--prepare.btn--solid { background: var(--c-prepare-solid); border-color: var(--c-prepare-solid); color: var(--c-white); }
  .btn--prepare.btn--solid:hover:not(:disabled) { background: var(--c-prepare); }
  .btn--out.btn--solid { background: var(--c-out-solid); border-color: var(--c-out-solid); color: var(--c-white); }
  .btn--out.btn--solid:hover:not(:disabled) { background: var(--c-warning); }
  .btn--on-dark { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.45); color: var(--c-white); }
  .btn--on-dark:hover:not(:disabled) { background: rgba(255,255,255,.28); }

  /* ---------- 專用控制項（不屬於 .btn 系統）：手機卡片右上角 ⋯ 更多按鈕 ---------- */
  .more-btn {
    position: absolute; top: 6px; right: 6px; width: 32px; height: 32px;
    border-radius: 50%; border: none; background: var(--c-border); color: var(--c-text-2);
    font-size: var(--fs-16); font-weight: var(--fw-bold); cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 5;
    transition: background .12s;
  }
  .more-btn:active { background: var(--c-border); }

  @media (max-width: 767px) {
    .btn--md { height: var(--h-touch); }
    .btn--md.btn--icon { width: var(--h-touch); }
  }
}