/* ============================================================
   LHRM 設計系統 Tokens v1.1
   ------------------------------------------------------------
   萃取自:薪資頁 10 版比稿 → Sam 五維度品味回饋(2026-05)
   權重排序:D 隱私 > B 設計感 > A 即時上手 > C 久用不疲勞 > E 明暗
   用途:全系統共用。每頁 import 同一份,這是「統一」的技術本體。
   預設主題:淺色(與現有內容區一致)
   ------------------------------------------------------------
   ⚠ v1.1 變更(2026-05,落地診斷後):
   - 所有「主題色」變數加 --lhrm- 前綴,與 index.html 既有 :root
     (--bg/--surface/--border/--text/--accent/--danger 等)完全隔離,
     不影響全站既有深色主題,也不被 #page-salary 舊 scoped 覆寫干擾。
   - 系統目前無 data-theme 機制:預設淺色直接寫進 :root,確保即生效;
     [data-theme="dark"] 保留給將來接明暗切換用。
   ------------------------------------------------------------
   ⚠ 維護鐵則:
   1. 顏色語意三色(--c-overlay 橘 / --c-money 紅 / --c-confirm 綠)
      是【業務語意】非風格,任何頁面、任何主題都不可更換其含義。
   2. 字級 token 為下限,不可為了塞資料把字縮更小(C 維度教訓:V9)。
   3. 主字型禁用 Inter / Roboto / Arial / system-ui(B1)。
   ============================================================ */

:root {
  /* — 字型(B/C 維度;系統無同名,不加前綴) — */
  --font-ui:  'Manrope', 'Noto Sans TC', sans-serif;   /* 介面主字型 */
  --font-num: 'IBM Plex Mono', monospace;              /* 數字欄,等寬對齊 */

  /* — 字級(C 維度;以下為下限) — */
  --fs-page-title: 20px;
  --fs-section:    14px;
  --fs-body:       13px;
  --fs-num:        13px;   /* 表格數字下限,不再縮小 */
  --fs-net:        15px;   /* 實發等關鍵數字,放大跳出 */
  --fs-small:      11px;   /* 部門等次要資訊 */

  /* — 間距(C 維度) — */
  --sp-cell-y: 10px;
  --sp-cell-x: 14px;
  --sp-block:  18px;
  --sp-page:   24px;

  /* — 圓角(B 維度:V5 圓角被讚精緻) — */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* — 顏色語意(🔒 守住不可改含義;系統無同名,不加前綴) — */
  --c-overlay: #c25e00;   /* 橘 = 手動覆蓋 */
  --c-money:   #d23b3b;   /* 紅 = 金額重點 / 扣項 / 實發 */
  --c-confirm: #22a35a;   /* 綠 = 確認動作 */

  /* — 狀態色(財務類別共用) — */
  --c-success:  #16a34a;   /* 已完成/已入帳/盈餘 */
  --c-info:     #3b82f6;   /* 已核准/進行中 */
  --c-warning:  #d97706;   /* 待審核/待處理 */
  --c-purple:   #7c3aed;   /* 待確認(財務專屬) */
  --c-progress: #ca8a04;   /* 待撥款/中段進度 */
  --c-muted:    #6b7280;   /* 已取消 */

  /* — 互動 — */
  --transition: .15s ease;

  /* — 主題色(預設淺色;全部 --lhrm- 前綴,與系統既有 :root 隔離) — */
  --lhrm-bg:         #f4f2ec;
  --lhrm-surface:    #ffffff;
  --lhrm-surface-2:  #faf8f2;
  --lhrm-text:       #2a2824;
  --lhrm-text-dim:   #76726a;
  --lhrm-text-faint: #a39e93;
  --lhrm-border:     #ece8e0;
  --lhrm-border-2:   #e0dcd2;
  --lhrm-input-bg:   #faf8f2;
  --lhrm-net-col-bg: #fff5f5;
  --lhrm-banner-bg:  #e8f6ec;
  --lhrm-banner-tx:  #1f7a3d;
  --lhrm-banner-bd:  #bce5c8;
  --lhrm-font-mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ☾ 深色主題(E:將來接 data-theme 切換時生效;現在系統無此機制,備而不用) */
[data-theme="dark"] {
  --lhrm-bg:         #0b0b0c;
  --lhrm-surface:    #161616;
  --lhrm-surface-2:  #101012;
  --lhrm-text:       #f0ede6;
  --lhrm-text-dim:   #86837c;
  --lhrm-text-faint: #56544e;
  --lhrm-border:     #1c1c1e;
  --lhrm-border-2:   #2a2a2e;
  --lhrm-input-bg:   #0e0e0f;
  --lhrm-net-col-bg: #1a1012;
  --lhrm-banner-bg:  #10241a;
  --lhrm-banner-tx:  #4ade80;
  --lhrm-banner-bd:  #1d5234;
  --c-money:         #fca5a5;   /* 暗底金額紅提亮以保對比 */
  --c-overlay:       #fb923c;   /* 暗底亮橘 */
  --c-confirm:       #34d399;   /* 暗底確認綠 */
  --c-success:       #4ade80;
  --c-info:          #60a5fa;
  --c-warning:       #fb923c;
  --c-purple:        #a78bfa;
  --c-progress:      #fbbf24;
  --c-muted:         #999999;
}

/* ============================================================
   元件樣式(薪資頁驗證過,可作為其他頁面的基底 class)
   class 前綴 lhrm-(診斷確認系統 0 筆,零衝突)
   ============================================================ */

/* 卡片容器 */
.lhrm-panel {
  background: var(--lhrm-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px #0000001a;
}

/* 頁首 */
.lhrm-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--lhrm-border);
}
.lhrm-head h1 { font-size: var(--fs-page-title); font-weight: 800; color: var(--lhrm-text); }
/* A1:副標必須說明發薪/業務邏輯,不可只寫功能名 */
.lhrm-head .sub { font-size: var(--fs-small); color: var(--lhrm-text-dim); font-weight: 500; margin-top: 3px; }

/* 主行動鈕(產生/送出) */
.lhrm-btn-primary {
  background: var(--c-money); color: #fff; border: none;
  border-radius: var(--r-sm); padding: 8px 15px;
  font-weight: 700; font-size: var(--fs-body); cursor: pointer;
}
/* 確認動作鈕(綠;B3 hover 互動) */
.lhrm-btn-confirm {
  background: var(--c-confirm); color: #fff; border: 2px solid transparent;
  border-radius: var(--r-sm); padding: 9px 20px;
  font-weight: 800; font-size: var(--fs-body); cursor: pointer;
  transition: var(--transition);
}
.lhrm-btn-confirm:hover { filter: brightness(1.08); }
/* 次要鈕 */
.lhrm-btn-ghost {
  border: 1px solid var(--lhrm-border-2); background: var(--lhrm-surface); color: var(--lhrm-text);
  border-radius: var(--r-sm); padding: 9px 16px;
  font-weight: 700; font-size: var(--fs-body); cursor: pointer;
}

/* 狀態橫幅 */
.lhrm-banner {
  background: var(--lhrm-banner-bg); color: var(--lhrm-banner-tx);
  border: 1px solid var(--lhrm-banner-bd); border-radius: 8px;
  padding: 9px 13px; font-size: var(--fs-body); font-weight: 600;
}

/* A2:顏色語意圖例(首次使用者看懂) */
.lhrm-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: var(--fs-small); color: var(--lhrm-text-dim);
}
.lhrm-legend span::before {
  content: ''; display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 5px; vertical-align: middle;
}
.lhrm-legend .is-earn::before { background: #7da3d9; }
.lhrm-legend .is-ded::before  { background: var(--c-money); }
.lhrm-legend .is-ovr::before  { background: var(--c-overlay); }

/* 資料表 */
.lhrm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.lhrm-table th {
  position: sticky; top: 0; background: var(--lhrm-surface-2);
  color: var(--lhrm-text-dim); font-size: var(--fs-small); font-weight: 700;
  padding: 10px var(--sp-cell-x); text-align: right; white-space: nowrap;
}
.lhrm-table th:first-child, .lhrm-table td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--lhrm-surface);
}
.lhrm-table th:first-child { background: var(--lhrm-surface-2); z-index: 3; }
.lhrm-table td {
  padding: var(--sp-cell-y) var(--sp-cell-x); text-align: right;
  border-bottom: 1px solid var(--lhrm-border);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--fs-num); color: var(--lhrm-text);
}
.lhrm-table td:first-child { font-family: var(--font-ui); font-weight: 700; }
.lhrm-table tr:hover td { background: var(--lhrm-surface-2); }
.lhrm-table tfoot td {
  background: var(--lhrm-surface-2); font-weight: 800;
  border-top: 2px solid var(--lhrm-border-2); border-bottom: none;
}

/* 部門等次要資訊 */
.lhrm-dept { display: block; font-size: var(--fs-small); color: var(--lhrm-text-faint); font-weight: 400; }

/* inline 編輯框 */
.lhrm-input {
  width: 62px; border: 1px solid var(--lhrm-border-2); border-radius: 5px;
  padding: 4px 6px; text-align: right;
  font-family: var(--font-num); font-size: 12px;
  background: var(--lhrm-input-bg); color: var(--lhrm-text);
}

/* 金額語意 class */
.lhrm-due { font-weight: 700; }
.lhrm-ded { color: var(--c-money); }
/* 手動覆蓋:橙字 + 左側橙色細條(低調但清楚) */
.lhrm-ovr {
  color: var(--c-overlay); font-weight: 700;
  position: relative; padding-left: 9px;
}
.lhrm-ovr::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 3px; height: 1.1em;
  background: var(--c-overlay); border-radius: 2px;
}
/* 實發欄背景 + 關鍵數字 */
.lhrm-net-col { background: var(--lhrm-net-col-bg); }
.lhrm-net { color: var(--c-money); font-weight: 800; font-size: var(--fs-net); font-family: var(--font-ui); }

/* D1:敏感金額遮蔽態(接系統 _sensitiveApply / sensitive-value 機制) */
.lhrm-masked { letter-spacing: 1px; color: var(--lhrm-text-faint); cursor: pointer; }
.lhrm-eye {
  font-size: 10px; border: 1px solid var(--lhrm-border-2); border-radius: 4px;
  padding: 1px 5px; margin-left: 4px; color: var(--lhrm-text-dim);
}

/* PDF 等小動作鈕(B3 hover) */
.lhrm-pdf {
  border: 1px solid var(--c-money); color: var(--c-money);
  border-radius: 5px; padding: 2px 7px; font-size: var(--fs-small);
  cursor: pointer; transition: var(--transition);
}
.lhrm-pdf:hover { background: var(--c-money); color: #fff; }