/* 網路人員管理系統樣式 — Google 設計語言（Material 3 / Workspace）
 *
 * 與審計網路程式同一套視覺語彙：Google Blue #0b57d0、淺色導覽、藥丸按鈕、
 * Google 灰調陰影 rgba(60,64,67,…)。字型優先 Google Sans / Roboto，
 * 沒安裝時退回系統字，不外連 CDN（內網或離線時仍要正常顯示）。
 *
 * 界線：**介面外觀色改成 Google，資料語意色一律不動。**
 * --accounting / --auditing / --success / --warning / --danger 這幾個色，
 * 年度差異折線圖的 SERIES_COLORS 是用字面 hex 寫死的（#7c3aed / #0891b2 /
 * #16a34a / #d97706 / #dc2626）。動了這裡，徽章與圖表就會變成兩種顏色。
 */
:root {
  /* ── 介面外觀（Google） ── */
  --primary: #0b57d0;
  --primary-dark: #0842a0;
  --primary-soft: #d3e3fd;          /* Material 3 primary container */
  --on-primary-container: #041e49;

  --bg: #f8fafd;
  --surface: #ffffff;
  --surface-2: #f0f4f9;             /* Gmail 導覽底色 */
  --surface-3: #e9eef6;
  --nav: #f0f4f9;

  --text: #1f1f1f;
  --muted: #5f6368;
  --muted-2: #444746;
  --border: #dadce0;
  --outline: #c4c7c5;

  /* ── 資料語意色：與圖表共用，不可更動 ── */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --danger-soft: #fce8e6;
  --accounting: #7c3aed;
  --auditing: #0891b2;

  /* Google 的灰調陰影，不是純黑加透明度 */
  --shadow: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-lg: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px 0 rgba(60,64,67,.30);
  --radius: 12px;

  --font: "Google Sans", Roboto, "Noto Sans TC", "Microsoft JhengHei",
          "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Roboto Mono", "Cascadia Mono", Consolas, "Courier New", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 通用元件 ---------- */
button { font-family: inherit; cursor: pointer; border: none; font-size: 14px; }
input, select { font-family: inherit; font-size: 14px; }

/* Material 的 filled / outlined 兩種按鈕，全圓角藥丸 */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 22px; border-radius: 999px; font-weight: 500; background: var(--primary);
  color: #fff; letter-spacing: .01em;
  transition: background .12s, box-shadow .12s;
}
.btn:hover { background: var(--primary-dark); box-shadow: var(--shadow); }
.btn:active { box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { background: rgba(31,31,31,.12); color: rgba(31,31,31,.38); cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn.ghost:hover { background: rgba(11,87,208,.08); box-shadow: none; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #b91c1c; }
.btn.sm { padding: 6px 16px; font-size: 13px; }
.btn.block { width: 100%; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 11px 14px; border: 1px solid var(--outline);
  border-radius: 8px; background: var(--surface); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
/* 勾選框不能吃 width:100%——會被撐成整行寬，把後面的文字擠成一個字一行，
   客戶編輯視窗那六個性質勾選框就是這樣壞掉的。 */
.field input[type="checkbox"] { width: auto; flex: 0 0 auto; padding: 0; margin: 0; }
.field-check { margin-bottom: 10px; }
.field-check label {
  display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
  font-size: 13px; color: var(--text); font-weight: 400; line-height: 1.5;
}
.field-hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.field-check .field-hint { margin-left: 24px; }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.badge.accounting { background: #f3edff; color: var(--accounting); }
.badge.auditing { background: #e0f6fb; color: var(--auditing); }
.badge.acc { background: #f3edff; color: var(--accounting); }   /* 帳務 */
.badge.aud { background: #e0f6fb; color: var(--auditing); }     /* 審計 */
.badge.fin { background: #e6f4ea; color: #137333; }             /* 財簽 */
.badge.tax { background: #fef7e0; color: #b06000; }             /* 稅簽 */
.badge.out { background: #fce7f3; color: #be185d; }             /* 外出 */
.badge.group { background: #e8f0fe; color: #1967d2; }           /* 集團 */
.badge.new { background: #e6f4ea; color: #137333; }             /* 新增客戶 */
.badge.life-transferred { background: #fef7e0; color: #b06000; }
.badge.life-dissolved { background: var(--danger-soft); color: #c5221f; }
.badge.status-not_started { background: var(--surface-3); color: var(--muted); }
/* 分類進度：灰 → 黃 → 藍 → 綠，一眼看得出走到哪一關 */
.badge.status-maker_done { background: #fef7e0; color: #b06000; }
.badge.status-reviewer_done { background: #e8f0fe; color: #1967d2; }
.badge.status-cpa_confirmed { background: #e6f4ea; color: #137333; }
.badge.status-received { background: #fef7e0; color: #b06000; }
.badge.status-in_progress { background: #e8f0fe; color: #1967d2; }
.badge.status-completed { background: #e6f4ea; color: #137333; }
.badge.muted { background: var(--surface-3); color: var(--muted); }
.badge.role { background: var(--primary-soft); color: var(--on-primary-container); }

.tag-inactive { color: var(--danger); font-size: 12px; font-weight: 500; }

/* ---------- 登入頁 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--surface-2);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border-radius: 28px; box-shadow: var(--shadow-lg); padding: 40px 36px;
}
.login-card h1 { font-size: 22px; font-weight: 500; text-align: center; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.login-hint { margin-top: 20px; font-size: 12px; color: var(--muted); text-align: center; }

/* ---------- App 版面 ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 244px; background: var(--nav); color: var(--text); flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid var(--border);
}
.sidebar .brand { padding: 22px 22px 18px; font-size: 17px; font-weight: 500; color: var(--text); }
/* 番茄圖示與系統名稱同一行，垂直置中 */
.sidebar .brand .brand-row { display: flex; align-items: center; gap: 9px; }
/* 登入／補資料／等待核定頁的大圖示 */
.login-logo { display: flex; justify-content: center; margin-bottom: 10px; }
.sidebar .brand small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.sidebar nav { padding: 6px 12px; flex: 1; }
/* 導覽項目為全圓角藥丸，選取時填入 primary container —— Gmail/Drive 的招牌形狀 */
.sidebar nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 999px;
  color: var(--muted-2); text-decoration: none; font-weight: 500; font-size: 14px;
  margin-bottom: 2px; cursor: pointer; transition: background .12s;
}
.sidebar nav a:hover { background: rgba(11,87,208,.08); color: var(--text); }
.sidebar nav a.active { background: var(--primary-soft); color: var(--on-primary-container); }
/* 會跳出去的導覽項（審計系統設定）：跟頁面切換視覺上分開，
   上方一條分隔線，並在後面加個外開箭頭，按下去不會停在本系統。 */
.sidebar nav a.nav-action { margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--border); border-radius: 0 0 999px 999px; }
.sidebar nav a.nav-action span::after { content: " ↗"; opacity: .6; font-size: 12px; }

.sidebar .userbox { padding: 16px; border-top: 1px solid var(--border); font-size: 13px; }
.sidebar .userbox .name { color: var(--text); font-weight: 500; }
.sidebar .userbox .role { color: var(--muted); font-size: 12px; margin-bottom: 12px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 16px 28px; display: flex; align-items: center; justify-content: space-between;
}
.topbar h2 { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.topbar .actions { display: flex; align-items: center; gap: 10px; }
.content { padding: 26px 28px; flex: 1; }

/* ---------- 卡片 / 工具列 ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card + .card { margin-top: 20px; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head h3 { font-size: 16px; font-weight: 500; }
.card-body { padding: 18px 20px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.search {
  padding: 10px 16px; border: 1px solid transparent; border-radius: 999px;
  min-width: 240px; background: var(--surface-2); color: var(--text); outline: none;
}
.search:focus { background: var(--surface); border-color: var(--primary); }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 500; color: var(--muted);
  letter-spacing: .03em; border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0;
}
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
tbody tr.inactive { opacity: .55; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cell-mono { font-family: var(--font-mono); color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 40px 20px; }

/* ---------- 統計卡 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.stat-card .who { font-weight: 500; font-size: 15px; }
.stat-card .who small { color: var(--muted); font-weight: 400; }
.stat-card .nums { display: flex; gap: 16px; margin-top: 12px; }
.stat-card .nums div { font-size: 13px; color: var(--muted); }
.stat-card .nums b { display: block; font-size: 22px; color: var(--text); font-weight: 500; }

/* ---------- KPI ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.kpi .label { font-size: 12px; color: var(--muted); }
.kpi .value { font-size: 28px; font-weight: 500; margin-top: 4px; }

/* 可點擊的統計卡：點一下只看該類，再點一次取消（篩選狀態要一眼看得出來） */
.kpi.clickable, .stat-card .nums div.clickable { cursor: pointer; }
.kpi.clickable { transition: border-color .12s, box-shadow .12s, background .12s; }
.kpi.clickable:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.kpi.clickable.active { border-color: transparent; background: var(--primary-soft); }
.kpi.clickable.active .label { color: var(--on-primary-container); font-weight: 500; }
.kpi.clickable.active .label::after { content: " ✕"; }
.stat-card .nums div.clickable { border-radius: 8px; padding: 2px 6px; margin: -2px -6px;
  transition: background .12s, box-shadow .12s; }
.stat-card .nums div.clickable:hover { background: var(--surface-2); }
.stat-card .nums div.clickable.active { background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary); }
.stat-card .who.clickable { cursor: pointer; }
.stat-card .who.clickable:hover { color: var(--primary); }
.stat-card.active { border-color: var(--primary); box-shadow: var(--shadow); }
.filter-note { display: flex; align-items: center; gap: 10px; margin: -8px 0 16px;
  font-size: 13px; color: var(--on-primary-container); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(32, 33, 36, .6);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
.modal {
  background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 440px; max-height: 90vh; overflow: auto;
}
/* 寬版：欄位多的表單（客戶編輯有近三十個欄位）排兩欄，才不用一直捲 */
.modal.wide { max-width: 820px; }
.modal.wide .modal-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start;
}
.modal.wide .modal-body > * { grid-column: 1 / -1; }   /* 預設整列 */
.modal.wide .modal-body > .field.half { grid-column: auto; }
/* 段落標題：把長表單切段 */
.form-section {
  grid-column: 1 / -1; font-size: 12px; font-weight: 500; letter-spacing: .06em;
  color: var(--muted-2); text-transform: uppercase;
  margin: 14px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.modal-body > .form-section:first-child { margin-top: 0; }
/* 一列一個勾選項＋說明（刪除資料的分類清單）。整列可點，勾選框才不會難按。 */
.check-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px;
}
.check-row:hover { background: var(--surface-2); }
.check-row input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.check-row input:disabled { cursor: default; }
@media (max-width: 720px) {
  .modal.wide .modal-body { grid-template-columns: 1fr; }
}
.modal h3 { padding: 24px 24px 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.modal .modal-body { padding: 18px 24px; }
/* 確認對話框的訊息用換行分項（「將刪除：・A ・B」）。不保留換行的話全部擠成一行，
   在不可復原的確認上會看不清楚到底要刪什麼。 */
.modal .modal-body > p.muted { white-space: pre-line; }
.modal .modal-foot { padding: 14px 24px 24px; display: flex; gap: 10px; justify-content: flex-end; }
.modal-error { background: var(--danger-soft); color: #c5221f; padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }

/* ---------- Toast（Google 的 snackbar） ---------- */
#toast-container { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: #303030; color: #f2f2f2; padding: 14px 20px; border-radius: 8px;
  box-shadow: var(--shadow-lg); font-size: 14px; min-width: 240px; max-width: 360px;
  animation: slidein .2s ease; border-left: 4px solid #8ab4f8;
}
.toast.success { border-left-color: #81c995; }
.toast.error { border-left-color: #f28b82; }
.toast.warn { border-left-color: #fdd663; }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---------- 雜項 ---------- */
.inline-select { padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.loading { text-align: center; color: var(--muted); padding: 50px; }
.section-note { font-size: 13px; color: var(--muted); margin-bottom: 16px; }

/* ---------- 申請單 ---------- */
.req-section { font-size: 14px; font-weight: 500; margin: 22px 0 10px; color: var(--text); }
.req-card { margin-bottom: 10px; }
.req-card.done { opacity: .72; }
.req-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.req-head .req-client { font-weight: 500; }
.req-head .req-time { margin-left: auto; font-size: 12px; }
.req-reason { white-space: pre-wrap; line-height: 1.7; font-size: 14px; }
.req-reply {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface-2); font-size: 13px; line-height: 1.7; white-space: pre-wrap;
}
.req-reply-head { color: var(--muted); margin-bottom: 4px; }
.req-actions { margin-top: 12px; }
/* 導覽列上的待處理數字 */
.nav-badge {
  margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: #d93025; color: #fff; font-size: 11px; font-weight: 600; text-align: center;
}

/* ---------- 模組權限（超級管理員） ---------- */
.module-row { padding: 14px 0; border-top: 1px solid var(--border); }
.module-row:first-child { border-top: none; padding-top: 4px; }
.module-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.module-head .module-name { font-weight: 500; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 14px; }
.module-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.module-check input { cursor: pointer; }
.module-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- 進度日誌分類頁籤 ---------- */
.doc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.doc-tab { padding: 7px 16px; border: 1px solid var(--border); background: transparent;
  border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--muted); transition: background .12s; }
.doc-tab:hover { background: rgba(11,87,208,.08); color: var(--text); }
.doc-tab.active { background: var(--primary-soft); border-color: transparent; color: var(--on-primary-container); font-weight: 500; }
/* 申報書分成「審計申報書／帳務申報書」兩區的區標題（員工端；管理者端直接寫在卡片標題上）。
   卡片之間的間距靠 .card + .card，中間插了標題就會斷掉，所以這裡自己給上下的間距 */
.progress-seg-title { font-size: 16px; font-weight: 500; margin: 26px 0 10px; }
.progress-seg-title:first-child { margin-top: 2px; }

/* ---------- 新增客戶：特別獎金 ---------- */
/* 兩個池並排（帳務、審計），窄螢幕改成上下 */
.bonus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.bonus-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  border-top: 4px solid var(--outline); }
.bonus-card.acct { border-top-color: var(--accounting); }
.bonus-card.audit { border-top-color: var(--auditing); }
.bonus-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bonus-head h4 { margin: 0; font-size: 15px; }
.bonus-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
  padding: 8px 10px; background: var(--surface-2); border-radius: 8px; margin-bottom: 10px; }
.bonus-pool { font-variant-numeric: tabular-nums; }
.bonus-sum { margin-left: auto; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.bonus-sum.over { color: var(--danger); font-weight: 600; }
.bonus-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
/* 一列＝一個角色：角色、姓名、金額。人員由工作分配決定，所以沒有「選人」與「移除」 */
.bonus-row { display: grid; grid-template-columns: 88px 1fr 130px; gap: 8px; align-items: center; }
.bonus-role { font-size: 12px; color: var(--muted-2); }
.bonus-who { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* 金額打成看不懂的東西時標出來（合計那一行會講是哪一位） */
.bonus-amt.bad { border-color: var(--danger); background: var(--danger-soft); }
.bonus-row.off .bonus-role { color: var(--danger); }
.bonus-row.off .bonus-who { color: var(--muted-2); text-decoration: line-through; }
.bonus-empty { font-size: 13px; color: var(--muted-2); background: var(--surface-2);
  border: 1px dashed var(--border); border-radius: 8px; padding: 10px 12px; }
.bonus-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.bonus-amt { text-align: right; font-variant-numeric: tabular-nums; }
/* 表格裡的那一格 */
/* 展開的明細列：橫跨整張表的一條，靠底色與左邊一條線與本列區隔 */
tr.sub-row > td { background: var(--surface-2); border-left: 3px solid var(--primary);
  padding: 14px 16px !important; }
.bonus-panel { max-width: 960px; }
.bonus-toggle { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bonus-lines { display: flex; flex-direction: column; font-size: 12px;
  font-variant-numeric: tabular-nums; }
.bonus-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums; }
.bonus-over { color: var(--danger); font-weight: 600; }
@media (max-width: 900px) { .bonus-grid { grid-template-columns: 1fr; } }

/* 新增客戶視窗的審計團隊：兩個下拉並排 */
.asg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .asg-pair { grid-template-columns: 1fr; } }

/* 新增客戶：帳務費（年）÷ 12 × 月數 的小計（唯讀，打字就跟著變） */
.fee-total { font-variant-numeric: tabular-nums; color: var(--muted-2); }

/* ---------- 得分規則（員工介面） ---------- */
/* 顏色刻意做得比別頁強：這一頁是要讓人一眼看懂「分數從哪來、沒拿到要找哪裡」。
   色塊都配文字，不只靠顏色分辨（色盲、黑白列印都讀得出來）。 */
.guide-flow { overflow-x: auto; padding: 4px 0 8px; }
.guide-flow-svg { width: 100%; min-width: 620px; height: auto; display: block; }
.guide-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.guide-basis { border: 2px solid; border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.7; }
.guide-basis b { display: block; margin-bottom: 4px; font-size: 14px; }
.guide-basis.assigned { border-color: #0369a1; background: #eff6ff; color: #1f1f1f; }
.guide-basis.assigned b { color: #0369a1; }
.guide-basis.actual { border-color: #047857; background: #ecfdf5; color: #1f1f1f; }
.guide-basis.actual b { color: #047857; }

.guide-items { display: flex; flex-direction: column; gap: 12px; }
.guide-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.guide-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.guide-bar { display: inline-block; width: 6px; height: 18px; border-radius: 3px; flex: none; }
.card-head h3 .guide-bar { margin-right: 8px; vertical-align: -3px; }
.guide-rule { display: grid; grid-template-columns: 150px 96px 1fr; gap: 8px; align-items: baseline;
  padding: 5px 0; font-size: 13px; border-top: 1px dashed var(--border); }
.guide-item-head + .guide-rule { border-top: 0; }   /* 標題列後面的第一條規則不要畫分隔線 */
.guide-case { color: var(--muted-2); }
.guide-owner { font-weight: 600; }
.guide-where { color: var(--text); }
.guide-warn { margin-top: 6px; padding: 8px 10px; border-left: 4px solid #b45309; background: #fffbeb;
  border-radius: 0 6px 6px 0; font-size: 12.5px; line-height: 1.7; color: #1f1f1f; }
.guide-note { margin-top: 6px; font-size: 12.5px; color: var(--muted-2); line-height: 1.7; }

/* min(260px, 100%)：容器比 260px 窄時（375px 手機扣掉側欄與留白只剩約 229px）才不會撐破版面 */
.guide-shared { margin-top: 10px; border: 1px solid var(--border); border-left: 6px solid #b45309;
  border-radius: 0 8px 8px 0; padding: 10px 12px; }
.guide-shared-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.guide-shared-items { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.guide-shared-item { border: 1px solid #b45309; color: #b45309; background: #fffbeb;
  border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 500; }

.guide-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.guide-reason { border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.7;
  border: 2px solid; border-left-width: 8px; }
.guide-reason b { display: block; font-size: 14px; margin-bottom: 4px; }
.guide-reason.gap { border-color: #b3261e; background: #fef2f2; }
.guide-reason.gap b { color: #b3261e; }
.guide-reason.hand { border-color: #b45309; background: #fffbeb; }
.guide-reason.hand b { color: #b45309; }
.guide-reason.rule { border-color: #5f6368; background: #f3f4f6; }
.guide-reason.rule b { color: #444746; }
.guide-why { color: #1f1f1f; }
.guide-todo { margin-top: 4px; color: var(--muted-2); }

.guide-jump { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; font-size: 13px; }

@media (max-width: 720px) {
  .guide-two, .guide-jump { grid-template-columns: 1fr; }
  .guide-rule { grid-template-columns: 1fr; gap: 2px; }
  .guide-jump .muted { margin-top: -6px; }
}

/* ---------- 年度差異：折線圖 ---------- */
.line-chart { width: 100%; height: auto; max-height: 340px; display: block; }
.line-chart .grid { stroke: var(--border); stroke-width: 1; }
.line-chart .axis { fill: var(--muted); font-size: 12px; }
.line-chart .dot { cursor: pointer; }
.line-chart .dot:hover { r: 7; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; font-size: 13px; color: var(--text); padding: 2px 4px; }
.legend-item.off { opacity: .35; text-decoration: line-through; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.delta { font-size: 11px; margin-left: 4px; }
.delta.up { color: var(--success); }
.delta.down { color: var(--danger); }
.change-tag { display: inline-flex; align-items: center; padding: 3px 10px; margin: 2px 4px 2px 0;
  border: 1px solid var(--border); border-radius: 999px; font-size: 12px; }
.change-tag .to-on { color: var(--success); }
.change-tag .to-off { color: var(--danger); }

/* ---------- 表單欄位提示 ---------- */
.field-note { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.field-note.warn { color: var(--warning); }
select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }

/* ---------- 可排序表頭 ---------- */
th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sortable:hover { color: var(--primary); }
th.th-sortable .sort-arrow { margin-left: 4px; font-size: 10px; opacity: .35; }
th.th-sortable:hover .sort-arrow { opacity: .7; }
th.th-sortable.sorted { color: var(--primary); }
th.th-sortable.sorted .sort-arrow { opacity: 1; }

/* ---------- 全部客戶：團隊成員標籤 ---------- */
.team-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 340px; }
.team-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 11.5px; white-space: nowrap; }
.team-tag .r { color: var(--muted); }
.team-tag .n { font-weight: 500; }
/* 自己擔任的角色高亮，方便區分「我的」與「別人的」案件 */
.team-tag.mine { background: var(--primary-soft); border-color: transparent; }
.team-tag.mine .r, .team-tag.mine .n { color: var(--on-primary-container); }
tr.row-mine > td { background: var(--bg); }

/* ── 積分核算／家數統計的表格 ────────────────────────────────
   小計列與明細列的差別原本只有一層淡淡的底色，一眼掃過去分不出來。
   加上較深的底色、上緣分隔線與粗體，讓「這是加總」一眼就看得出來。 */
tr.row-subtotal > td {
  background: var(--subtotal-bg, #eef2f7);
  border-top: 2px solid var(--subtotal-line, #cbd5e1);
  font-weight: 600;
}
tr.row-subtotal > td.cell-mono { color: var(--text); }
/* 總計比小計再重一階，才不會兩種加總看起來一樣 */
tr.row-grand > td {
  background: var(--grand-bg, #dde5ef);
  border-top: 2px solid var(--subtotal-line, #cbd5e1);
  font-weight: 700;
}
tr.row-grand > td.cell-mono { color: var(--text); }

/* 表格內可直接編輯的格子。做得像格子而不是輸入框——
   一整欄粗框輸入框會讓表格變得很吵；聚焦時才顯出邊界。 */
.cell-edit {
  width: 100%; min-width: 72px; box-sizing: border-box;
  padding: 4px 6px; font-size: 13px; font-family: inherit;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text);
}
.cell-edit:hover { border-color: var(--border); }
.cell-edit:focus { border-color: var(--primary); background: var(--card); outline: none; }
.cell-edit[type="number"] { text-align: right; }
/* 金額欄是 type="text"（原生數字框不吃千分位逗號），所以靠類別對齊，不靠 type 選擇器 */
.cell-edit.money { text-align: right; font-variant-numeric: tabular-nums; }

/* 以他人身分檢視時的橫幅。刻意做得顯眼且佔一整條——
   超級管理員很容易忘記自己還在別人的畫面裡，然後困惑「為什麼不能改」。 */
.impersonation-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 16px; background: #7c3aed; color: #fff;
  font-size: 13px; font-weight: 500; position: sticky; top: 0; z-index: 60;
}
.impersonation-bar .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }
.impersonation-bar .btn:hover { background: rgba(255,255,255,.28); }

/* 值為 0：要看得出來「這裡是零」，但零不是錯誤（很多人本來就沒有這一項），
   所以用淡化處理而不是紅字或警告色。 */
td.cell-zero { color: var(--zero, #b6bfcc); }
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.inline-check input { cursor: pointer; accent-color: var(--primary); }

@media (max-width: 720px) {
  .sidebar { width: 72px; }
  .sidebar .brand, .sidebar .userbox .name, .sidebar .userbox .role, .sidebar nav a span { display: none; }
  .sidebar nav a { justify-content: center; }
  .content { padding: 16px; }
}

/* ---------- 積分權重控制 ---------- */
.badge.ok { background: #e6f4ea; color: #137333; }
.badge.bad { background: var(--danger-soft); color: #c5221f; }
.weight-check { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 13px; color: var(--text); }
.weight-input { font-family: var(--font-mono); text-align: right; }

/* 客戶管理：案件性質頁的積分點下去跳到積分明細 */
.link-btn { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px; }
.link-btn:hover { color: var(--primary); }
/* 從案件性質跳過來的那一家 */
tbody tr.row-focus > td { background: var(--primary-soft); }
/* 積分核算的客戶明細：一項一欄，同一項多筆時上下疊 */
.item-stack { display: flex; flex-direction: column; gap: 2px; min-width: 88px; }
.item-entry { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; font-size: 12px; }
.item-entry .n { font-weight: 500; }
.item-entry.lost { color: var(--muted); }
.item-entry.lost .n { font-weight: 400; }

/* ── 凍結窗格（sortableTable 的 freeze 選項；客戶管理「積分明細」用） ──
   表頭與左邊幾欄固定，其餘在框內捲動，最下面的合計列也黏在框底。
   框一定要有高度上限，表頭才有地方黏住；border-collapse 要改成 separate，
   collapse 模式下黏住的格子框線不會跟著移動。凍結欄要自己塗底色，否則捲過去的內容會透出來。 */
/* 高度上限要扣掉框上方的標題、年度列、分頁與卡片標題（約 300px）：只扣 230px 時，
   1400×860 的畫面上框底在 928px，黏在框底的合計列落到視窗外，得先捲整頁才看得到。
   太矮的螢幕至少留 260px 可以捲。 */
.table-freeze { overflow: auto; max-height: max(260px, calc(100vh - 330px)); }
.table-freeze table { border-collapse: separate; border-spacing: 0; }
.table-freeze th, .table-freeze td { white-space: nowrap; }
.table-freeze thead th { z-index: 3; }
.table-freeze .fc { position: sticky; z-index: 2; background: var(--surface); }
.table-freeze thead th.fc { z-index: 5; }
.table-freeze .fc-last { box-shadow: inset -1px 0 0 var(--border), 4px 0 6px -4px rgba(60,64,67,.28); }
.table-freeze tbody tr:hover > td.fc { background: var(--surface-2); }
.table-freeze tbody tr.row-focus > td.fc { background: var(--primary-soft); }
.table-freeze tfoot td { position: sticky; bottom: 0; z-index: 3; padding: 12px 16px;
  background: var(--grand-bg, #dde5ef); border-top: 2px solid var(--subtotal-line, #cbd5e1); font-weight: 700; }
.table-freeze tfoot td.fc { z-index: 5; background: var(--grand-bg, #dde5ef); }
/* 框太窄（手機直向）時，凍結的三欄會把整個框蓋住，其餘欄位怎麼左右捲都看不到。
   sortableTable 量到凍結欄超過框寬 75% 時加上 freeze-off：左右不凍結，只保留表頭與合計列上下黏住。 */
.table-freeze.freeze-off .fc { left: auto !important; }
.table-freeze.freeze-off .fc-last { box-shadow: none; }

/* ── 級數明細（客戶管理分頁、會計師介面） ──
   帳務、審計各一張卡，卡內依級數分帶；膠囊前面的圓角數字是分數，顏色跟著帳務／審計的語意色。 */
.grade-rule { font-size: 12px; color: var(--muted); line-height: 1.6; }
.grade-count { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.grade-count b { font-size: 16px; font-weight: 600; color: var(--text); }
.grade-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.grade-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; white-space: nowrap; }
.grade-chip b { min-width: 26px; padding: 1px 7px; border-radius: 999px; text-align: center; font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; color: #fff; background: var(--grade-color, var(--primary)); }
.grade-chip .code { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.grade-chip.mine { border-color: var(--primary); background: var(--primary-soft); }

/* ── 工作分配：案件編輯視窗 ──
   依業務分區（帳務／審計／其他案件），每區上緣一條語意色；免覆核緊貼它的覆核人；
   多人名單用可點選的人名膠囊，勾選框藏起來但仍可用鍵盤操作（focus-within 顯示焦點）。 */
.asg-form { display: flex; flex-direction: column; gap: 14px; }
.asg-label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); }
.asg-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.asg-count { font-size: 12px; color: var(--muted); }
.asg-select { width: 100%; padding: 9px 12px; border: 1px solid var(--outline); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit; }
.asg-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.asg-select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.asg-summary { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); }
.asg-summary-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.asg-code { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.asg-name { font-size: 16px; font-weight: 500; }
.asg-acct-note { font-size: 12px; color: var(--muted-2); }
.asg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.asg-panel { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; background: var(--surface);
  border: 1px solid var(--border); border-top: 3px solid var(--asg-accent, var(--primary)); border-radius: 12px; }
.asg-panel-head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.asg-panel-head h4 { font-size: 14px; font-weight: 600; color: var(--text); }
.asg-nature-miss { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.asg-role { display: flex; flex-direction: column; gap: 6px; }
.asg-exempt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-2); cursor: pointer; }
.asg-exempt input { margin: 0; accent-color: var(--primary); cursor: pointer; }
.asg-exempt-hint { color: var(--muted); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px;
  border: 1px solid var(--outline); border-radius: 999px; font-size: 13px; color: var(--text);
  cursor: pointer; user-select: none; transition: background .12s, border-color .12s; }
.pick-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick-chip:hover { background: var(--surface-2); }
.pick-chip:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pick-chip.on { background: var(--primary-soft); border-color: transparent; color: var(--on-primary-container); font-weight: 500; }
.pick-chip.on::before { content: "✓"; font-size: 12px; }
.pick-chip.conflict { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
@media (max-width: 720px) { .asg-grid { grid-template-columns: 1fr; } }

/* ── 表單分區（openModal layout:"panels"）：客戶編輯視窗與工作分配的案件視窗同一套樣式 ── */
.modal-body > .form-panel { margin-bottom: 14px; }
.form-panel > .field-hint { margin: -4px 0 0; }
.form-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.form-panel-grid > .field { margin-bottom: 0; }
.form-panel-grid > .field:not(.half), .form-panel-grid > .full { grid-column: 1 / -1; }
.modal .asg-summary { margin-bottom: 14px; }
@media (max-width: 720px) { .form-panel-grid { grid-template-columns: 1fr; } }
/* 唯讀檢視（會計師看客戶資料） */
.view-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.view-label { font-size: 12px; color: var(--muted); }
.view-value { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.pick-chip.static { cursor: default; }
.pick-chip.static:not(.on):hover { background: transparent; }

/* ── 無進度來源表：一家一行、登記實際完成人的視窗（2026-09-15） ── */
/* 實際完成人一份一行，只列有登記的份；「無」上警示色，跟「換人做」一眼分得開 */
.manual-done { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.manual-done-item.nobody { color: var(--warning); font-weight: 500; }
/* 視窗：一份一列，左邊項目、分數與目前登記，右邊下拉與「選無」的說明；窄螢幕上下疊 */
.manual-edit-intro { margin: 0 0 10px; }
.manual-edit-list { display: flex; flex-direction: column; }
.manual-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 16px;
  align-items: start; padding: 12px 0; border-top: 1px solid var(--border); }
.manual-edit-row:first-child { border-top: 0; padding-top: 0; }
.manual-edit-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 500; color: var(--text); }
.manual-edit-name .muted { font-size: 12px; font-weight: 400; }
.manual-edit-pts { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.manual-edit-stamp { font-size: 12px; margin-top: 2px; }
.manual-edit-ctl select { width: 100%; }
.manual-edit-ctl .field-hint { margin-top: 4px; }
@media (max-width: 720px) { .manual-edit-row { grid-template-columns: 1fr; } }

/* ── 家數統計：分區帶、展開列、點數字看明細 ── */
.stats-table tr.stat-band > td { background: var(--surface-2); color: var(--muted-2); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; padding: 8px 16px; border-top: 1px solid var(--border); }
.stats-table tr.stat-sub > td { background: var(--bg); font-size: 13px; padding-top: 9px; padding-bottom: 9px; }
.stats-table td.stat-sub-label { padding-left: 36px; color: var(--muted-2); }
/* 項目名稱不換行：員工欄一多，表格會把第一欄擠到「稅報／登打／本數」三行，一列變三倍高 */
.stats-table tbody td:first-child, .stats-table thead th:first-child { white-space: nowrap; min-width: 150px; }
.stats-table td.stat-num.clickable { cursor: pointer; }
.stats-table td.stat-num.clickable:hover { background: var(--primary-soft); color: var(--on-primary-container); }
.stats-table td.stat-num.picked { background: var(--primary-soft); color: var(--on-primary-container); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--primary); }
.stats-table td.stat-num.clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.stat-toggle { text-decoration: none; font-weight: 500; }
.stats-table td.stat-trips { vertical-align: top; text-align: right; }
.stat-trip { font-size: 12px; white-space: nowrap; line-height: 1.7; }
.stat-detail .card-body { display: flex; flex-direction: column; gap: 12px; }
.stat-trip-head { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.btn.check-gap { color: var(--danger); }
/* 實得時改依實際完成人計數的列：標在項目名稱旁，小一號才不會把名稱擠開 */
.stats-table .stat-actual { margin-left: 6px; padding: 2px 8px; font-size: 11px; vertical-align: 1px; }
/* 明細卡：同一人在同一家做了兩份（×2），用實心小標跟級數、稅報財報徽章分開 */
.stat-times { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--primary-soft);
  color: var(--on-primary-container); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }

/* ── 級數明細的「客戶＋工作分配」視窗：客戶資料的分區卡片之後接工作分配三張卡 ──
   上緣一條虛線加標題，把「客戶資料」與「這個年度的工作分配」兩組分開：一起存，但不是同一份資料。 */
.asg-embed { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px dashed var(--outline); }
.asg-embed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.asg-embed-head h4 { font-size: 15px; font-weight: 600; color: var(--text); }
.asg-embed-head .muted { font-size: 12px; }
.asg-embed > .field-note { margin-top: 0; }
/* 客戶視窗最上面已經有客戶摘要，工作分配這裡只留簽證會計師提示一行 */
.asg-acct-line { padding: 8px 14px; border-radius: 10px; background: var(--surface-2); }

/* ── 級數明細：篩選列、帳務／審計兩張卡、級數分帶 ── */
.grade-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.grade-toolbar .doc-tabs { margin-bottom: 0; }
.grade-title { font-size: 16px; font-weight: 500; margin: 2px 0 12px; }
.grade-board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
.grade-board > .card + .card { margin-top: 0; }
.grade-card { border-top: 3px solid var(--grade-color); overflow: hidden; }
.grade-bands { display: flex; flex-direction: column; }
.grade-band { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--border); }
.grade-band:first-child { border-top: 0; }
.grade-band-head { display: flex; flex-direction: column; gap: 4px; }
.grade-pill { align-self: flex-start; padding: 2px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: #fff; background: var(--grade-color); }
.grade-pill.muted { background: var(--surface-3); color: var(--muted-2); }
.grade-empty { font-size: 13px; align-self: center; }
button.grade-chip { font: inherit; font-size: 13px; color: var(--text); cursor: pointer; transition: border-color .12s, box-shadow .12s; }
button.grade-chip:hover { border-color: var(--grade-color, var(--primary)); box-shadow: var(--shadow); }
button.grade-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.grade-other { margin-top: 0; }
@media (max-width: 900px) { .grade-board { grid-template-columns: 1fr; } .grade-band { grid-template-columns: 1fr; } }

/* 客戶管理頁：三組評分各自開不開放給員工（2026-09-21） */
.score-switch { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.chip-toggle { border: 1px solid var(--border); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.chip-toggle.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-toggle:disabled { opacity: .45; cursor: not-allowed; }
/* 評分卡：沒勾對應性質時的說明 */
.score-gate-note { margin: 4px 0 8px; }
/* 我的工作：轉出／解散的客戶名稱旁的標示 */
.name-with-badge { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* 進度日誌：管理者清除一格 */
.stage-owner { display: inline-flex; align-items: center; gap: 6px; }
.stage-clear { font-size: 12px; color: var(--danger); }
/* 員工明細：應得 vs 實得對照（2026-09-21）。顏色只是輔助，每列都有「狀態」文字 */
.cmp-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cmp-row.cmp-more > td { background: #e6f4ea; }
.cmp-row.cmp-less > td { background: var(--danger-soft); }
.cmp-row.cmp-reshare > td { background: var(--primary-soft); }
.cmp-row.cmp-pending > td { color: var(--muted); }
.cmp-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.cmp-tag-more { border-color: var(--success); color: #0d652d; }
.cmp-tag-less { border-color: var(--danger); color: #a50e0e; }
.cmp-tag-reshare { border-color: var(--primary); color: var(--primary-dark); }
.cmp-tag-pending { color: var(--muted); }
.cmp-row.cmp-less .cmp-diff { color: #a50e0e; font-weight: 600; }
.cmp-row.cmp-more .cmp-diff { color: #0d652d; font-weight: 600; }

/* 我的積分：上方的應得 vs 實得（2026-09-21） */
.my-gap { margin-bottom: 14px; }
.my-gap .viz-card { margin-bottom: 0; }

/* 特別獎金自動分配（2026-09-21）：審計依積分拆，應得實得並排 */
.bonus-card.audit { grid-column: 1 / -1; }
.bonus-amt-ro { text-align: right; font-variant-numeric: tabular-nums; }
.bonus-split { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.bonus-split th, .bonus-split td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.bonus-split .num { text-align: right; font-variant-numeric: tabular-nums; }
.bonus-split tfoot th, .bonus-split tfoot td { font-weight: 600; }
.bonus-split td.neg { color: #a50e0e; }
.bonus-split td.pos { color: #0d652d; }
.bonus-lost { font-size: 13px; margin-top: 6px; }
.bonus-lost summary { cursor: pointer; color: var(--muted-2); }
.bonus-lost-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(120px, 2fr) 80px 90px; gap: 8px;
  padding: 3px 0 3px 14px; border-bottom: 1px dashed var(--border); }
.bonus-lost-row > :nth-child(3), .bonus-lost-row > :nth-child(4) { text-align: right; }

/* 配分檢核的缺口明細（2026-09-21）。顏色只是輔助，每列都有狀態文字 */
.gap-detail { margin-top: 16px; }
.gap-people { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cmp-tag.gap-tag-pending { border-color: var(--warning, #b06000); color: #8a4b00; }
.cmp-tag.gap-tag-nobody_assigned, .cmp-tag.gap-tag-unassigned { border-color: var(--danger); color: #a50e0e; }
.cmp-tag.gap-tag-off_sheet { color: var(--muted); }

/* 評分視窗的說明卡（2026-09-23）：填這一區之前要知道的規則，退在欄位後面、不搶輸入框 */
.form-info { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--muted-2); }
.form-info-title { font-weight: 600; color: var(--text); margin-bottom: 6px; }
/* 全域的 table 是給資料表用的（width:100%、14px、每列一條線）：對照表要擋掉，
   不然分數會被推到卡片最右邊、字級與卡片不同，窄視窗還會把整個視窗撐出橫向捲軸 */
.form-info-table { width: auto; border-collapse: collapse; font-size: inherit; margin-bottom: 6px; }
.form-info-table th { text-align: left; font-weight: 400; padding: 2px 12px 2px 0; }
.form-info-table td { padding: 2px 0; border-bottom: 0; font-variant-numeric: tabular-nums;
  color: var(--text); font-weight: 600; white-space: nowrap; }
.form-info-table tr:hover { background: none; }
.form-info-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* 額外獎金（2026-09-29）：其他獎金的手動分配、每個人的總額卡片 */
.bonus-card.other { border-top-color: var(--outline, #6d28d9); }
.bonus-edit { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bonus-edit-row { display: grid; grid-template-columns: 1fr 130px auto; gap: 8px; align-items: center; }
.bonus-edit-row .cell-edit { text-align: right; }
.bonus-edit-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.bonus-person .who { display: inline-flex; align-items: center; gap: 6px; }
.bonus-person-amt { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin-top: 6px;
  font-size: 13px; font-variant-numeric: tabular-nums; }
.bonus-person-amt b { text-align: right; }
.bonus-person-items { margin-top: 8px; font-size: 12px; }
.bonus-person-items summary { cursor: pointer; color: var(--muted-2); }
.bonus-person-row { display: grid; grid-template-columns: 1fr auto 70px 70px; gap: 6px;
  padding: 3px 0; border-top: 1px solid var(--border); }
.bonus-person-row .cell-mono { text-align: right; }
/* 員工進度日誌的自己進度那一行：跟在頁籤下面，別跟說明文字混在一起 */
.progress-mine-sum { font-weight: 500; color: var(--text); }

/* 鎖住的膠囊（2026-10-01）：已經有評分的性質不能取消勾選。
   不是藏起來——要看得到現在是勾著的，只是改不動，滑鼠移上去有原因 */
.pick-chip.locked { opacity: .65; cursor: not-allowed; }
.pick-chip.locked input { cursor: not-allowed; }
.pick-chip.locked::after { content: "🔒"; font-size: 11px; margin-left: 2px; }

/* 帳冊寄發（2026-10-11；2026-10-12 密碼改為統編）：上傳表單、進度條、連結卡 */
.ledger-form { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: 14px 16px; }
.ledger-form .field { margin: 0; flex: 0 1 auto; min-width: 0; }
/* .field select 是 width:100%，而這裡的 .field 寬度是內容決定的（flex:0 1 auto），
   百分比撐不開——所以給明確寬度 */
.ledger-form select { width: 230px; }
.ledger-form input[type="file"] { font-size: 13px; max-width: 100%; }
.ledger-form .ledger-pwd { width: 190px; font-family: var(--font-mono); letter-spacing: .08em; }
/* 統編沒填的提醒：空欄位不解釋原因的話只會被當成壞掉 */
.ledger-form .field-hint { max-width: 320px; }
.ledger-form .field-hint.warn { color: var(--warning); }
/* 按鈕要與上面的輸入框對齊，所以補一個與 label 同高的上緣 */
.ledger-form-go { padding-top: 20px; }
.ledger-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden;
  margin: 0 16px 6px; }
.ledger-bar-fill { height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.ledger-pct { margin: 0 16px 14px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ledger-code { display: inline-flex; align-items: center; gap: 8px; }
.ledger-code code { font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; font-weight: 600;
  background: var(--surface-2); padding: 2px 8px; border-radius: 6px; }
/* 上傳完成後的連結卡 */
.ledger-result { margin: 0 16px 16px; padding: 14px 16px; border-radius: 10px;
  background: var(--surface-2); border-left: 3px solid var(--success); }
.ledger-result-head { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.ledger-result-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ledger-result-label { font-size: 12px; color: var(--muted); flex: 0 0 64px; }
.ledger-result-val { font-family: var(--font-mono); font-size: 13px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px;
  word-break: break-all; flex: 1 1 260px; min-width: 0; }
.ledger-result-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.ledger-result-close { margin-top: 10px; }
/* 已寄出清單：欄位一窄，按鈕的字就斷成「改密／碼」。
   不給斷行，寧可整張表橫向捲（sortableTable 本來就包在 overflow:auto 裡）。 */
.ledger-list td .btn, .ledger-list td .link-btn, .ledger-list th { white-space: nowrap; }
.ledger-list .row-actions { flex-wrap: nowrap; }
@media (max-width: 720px) {
  .ledger-form { display: block; }
  .ledger-form .field { margin-bottom: 12px; }
  .ledger-form select, .ledger-form .ledger-pwd { width: 100%; min-width: 0; }
  .ledger-form-go { padding-top: 0; }
}