/* 共用按鈕：各模組的按鈕外觀都以這裡為準，依功能分色。
 * 主要動作 pri（實心綠）：儲存、送出、建立、核准、確認
 * 前往處理 go（淺綠）：開啟、編輯、審查、跟進、分派、登錄
 * 檢視輸出 info（淺藍）：下載、匯出、預覽、比較、紀錄、上傳
 * 需留意 warn（淺橘）：退回、解除定稿、變更模板、恢復預設密碼
 * 刪除停用 danger（紅框）；確認刪除或退回的最後一步 danger-solid（實心紅，舊名 bad）
 * 一般 plain（白底）：取消、關閉、返回、清除篩選
 * 非實心的按鈕一律白底、同色文字與外框並帶陰影，滑過才填入淺色底；
 * 狀態標籤則是淺色實底、無外框，兩者一眼可以分辨。
 * 未標分類的按鈕由 assets/ui.js 依按鈕文字自動判斷。 */
.btn {
  --b-fg: var(--fg);
  --b-bg: var(--surface);
  --b-line: var(--line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--b-fg);
  background: var(--b-bg);
  border: 1px solid var(--b-line);
  border-radius: 6px;
  transition:
    background 0.12s,
    border-color 0.12s,
    filter 0.12s;
}
.btn[hidden] {
  display: none;
}
.btn.sm {
  padding: 2px 8px;
  font-size: 13px;
}
.btn:hover:not(:disabled) {
  border-color: var(--b-fg);
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn.pri {
  --b-fg: #fff;
  --b-bg: var(--accent);
  --b-line: var(--accent);
  font-weight: 500;
}
.btn.go {
  --b-fg: var(--accent);
  --b-soft: var(--accent-soft);
  font-weight: 500;
}
.btn.info {
  --b-fg: var(--info);
  --b-soft: var(--info-soft);
}
.btn.warn {
  --b-fg: var(--warn);
  --b-soft: var(--warn-soft);
}
.btn.go,
.btn.info,
.btn.warn {
  --b-bg: var(--surface);
  --b-line: color-mix(in srgb, var(--b-fg) 55%, transparent);
}
.btn.go:hover:not(:disabled),
.btn.info:hover:not(:disabled),
.btn.warn:hover:not(:disabled) {
  --b-bg: var(--b-soft);
}
.btn:not(.ghost):not(:disabled) {
  box-shadow: 0 1px 2px rgba(22, 36, 31, 0.12);
}
.btn.danger {
  --b-fg: var(--bad);
  --b-bg: var(--surface);
  --b-line: var(--bad);
}
.btn.danger:hover:not(:disabled) {
  --b-bg: var(--bad-soft);
}
.btn.danger-solid,
.btn.bad {
  --b-fg: #fff;
  --b-bg: var(--bad);
  --b-line: var(--bad);
  font-weight: 500;
}
.btn.ghost {
  --b-fg: var(--muted);
  border-style: dashed;
}
/* 實心按鈕滑過時略加深，淺色按鈕滑過時顯示同色外框。 */
.btn.pri:hover:not(:disabled),
.btn.danger-solid:hover:not(:disabled),
.btn.bad:hover:not(:disabled) {
  filter: brightness(0.9);
  border-color: var(--b-line);
}