@charset "UTF-8";
/* LANDC 內部 ERP 樣式（介面改版 Phase 2 外殼＋Phase 3 元件；規格見 docs/ui-redesign-plan.md 第 5 節）
   - 色彩一律用 :root 的變數（前半段是規格 5.2 的表，後半段是由它延伸的狀態色）
   - 元件沿用既有 class 名稱，只改樣式；測試依賴的標記（p.ok／p.error／p.warn）不變
   目錄：變數 → 基本 → 外殼（側欄、頂部列、內容區）→ 按鈕 → 表單 → 表格 → 狀態藥丸 → 卡片 → 訊息橫幅
        → 工具列／分頁籤 → 欄位表 → 展開區塊 → 檢查清單 → 工作台圖表 → 年度總表 → 組織圖 → 簽證進度 → 響應式／列印 */

/* 狀態顏色的意思（2026-10-02 UI 審查 B2-15：同一個顏色全站只有一個意思；新的狀態照這張表挑顏色，不要另外配）
   灰   --neutral   還沒開始：開案、洽談中（草稿）、未開始、未完成
   藍   --info      進行中、已送出：報價送出、收齊、簽證「進行中」；另外「新指派給我」（.fresh）也是藍
   靛   --indigo    做好了、等人看：申報書完成、簽證「待覆核」（工單 .rv-待*覆核 第二步才從琥珀改過來）
   青   --cyan      覆核過了：申報「覆核完成」、簽證「覆核完成」、工單「執行完畢」（工單 .rv-覆核完成 第二步才從綠改過來）
   綠   --ok        結束、錢進來了：已申報、已交付、上線前已申報（虛線框）、已收款、已簽回、已出具
   琥珀 --warn      卡在外面或提醒：等客戶、已請款（等收款）、待沖帳、提醒（所長 2026-10-27 第二批：⚠ 只留給錯誤，提醒不加）；工單 .rv-待*覆核 暫時還是琥珀（第二步待所長公告）
   紅   --danger    出問題：被退回、逾期（.hot、.due-flag.over、.vc.overdue）、找不到客戶、客戶拒絕
   淡灰框            不算了：已取消、已作廢、不用申報（透明底、灰字、細框；取消和作廢另有刪除線）
   「輪到你處理」不是問題，不用紅：.due＝深藍字＋金色左條（B2-17）；紅色只留給 .hot
   申報進度看板的格子（2026-10-13 改版，.vt-*）底色＝輪到誰，照上面同一張表挑：等客戶（等客戶給憑證）＝灰（離期限還早的不上底色、只有淡字，
   期限前 7 天內才是灰底——所長：一整欄灰底太重）、輪到同仁（待登打、待申報、待交付）＝藍、
   逾期＝紅、要注意（更正中、交界期請確認）＝琥珀。2026-10-22 起申報進度那一面改成四個圓點；2026-10-26（樣張 VatUnify、P1-1 減重）
   一格只剩 td.vd：四個點由 CSS 畫、和營所稅入帳燈號同一組顏色，沒做完只寫一個灰色短詞（逾期紅、要注意琥珀、逾期整格淡紅底）；
   做完＝四點全滿、不寫字；營業稅不覆核（原本的「輪到主管覆核＝靛」不再出現）。
   請款那一面：待請款、部分請款＝琥珀（在待請款清單裡，要處理），已請款・待收＝灰（所長看過預覽定的；年度總表、狀態藥丸的已請款照舊是琥珀），已收款＝淡淡的勾 */

/* ================= 變數 ================= */
/* 品牌色對照（2026-10-02 UI 審查 B1-9：只記對照，這次不改值；全站換成簡報色票要所長拍板）
   ERP 目前                                  事務所簡報色票（landc-ppt-style）
   深藍 --primary／--text #1a2b4a           NAVY_DEEP #223148（標題）、NAVY_INK #1a2535（內文）
   側欄深藍 --sb-bg #16233d                  NAVY_DEEP #223148
   金 --gold #b8923a、--sb-gold #d7b566      GOLD #c9a96e
   深金 --gold-line #b07f35、--focus #8a6d2b GOLD_DARK #b07f35、GOLD_TEXT #7a5e1f
   米色 --bg #f6f4ef                         BG_CREAM #faf6f1 */
:root {
  /* 規格 5.2 */
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --border: #e6e1d6;
  --border-strong: #d4cdbd;
  --text: #1a2b4a;
  --text-muted: #5f6673;                             /* 對白 5.78、對米色 5.26（B1-3：原 #6b7280 只有 4.40） */
  --primary: #1a2b4a;
  --primary-hover: #243a63;
  --gold: #b8923a;
  --sb-bg: #16233d;
  --sb-text: #c3cbdb;
  --sb-text-strong: #ffffff;
  --sb-hover: rgba(255, 255, 255, .07);
  --sb-active: rgba(184, 146, 58, .18);
  --ok: #1f7a4d;       --ok-bg: #e7f4ec;
  --warn: #8a5a00;     --warn-bg: #fff4d6;
  --danger: #b3261e;   --danger-bg: #fdecea;
  --info: #2a5db0;     --info-bg: #e8f0fb;
  --purple: #6b4fa0;   --purple-bg: #f0ebf8;      /* 客戶分類「其他客戶」（2026-10-21） */

  /* 延伸：狀態色、線條、陰影 */
  --on-primary: #ffffff;
  --link: var(--info);
  --placeholder: #6b7280;                            /* 對白 4.83（原 #9aa1ab 只有 2.6） */
  --row-hover: #f6f2e8;                              /* 原 #fcfaf6 對白 1.04，滑過看不出是哪一列 */
  --sel-bg: #eef3fb;                                 /* 勾到的列（B2-4）：淡藍，和滑過的米色分得開 */
  --sel-hover: #e2ebf8;                              /* 勾到的列再滑過 */
  --on-primary-pill: rgba(255, 255, 255, .18);       /* 深藍主鈕裡的計數（B2-8） */
  --bulk-dock: 60px;                                 /* 勾選後黏在畫面底部的批次列：一行高 52px＋離底 8px（B2-10；窄一點的寬度在響應式改大） */
  --hover-bg: #f3f0e8;
  --code-bg: #f1eee6;
  --ok-line: #bfe0cc;
  --warn-line: #efd898;
  --danger-line: #f2c4bf;
  --info-line: #c6d7f2;
  --soon: #b45309;                                   /* 快到期 */
  --neutral: #4b5563;  --neutral-bg: #eef0f3;  --neutral-line: #d3d8df;
  --faint: #9ca3af;    --faint-bg: #f3f4f6;    --faint-line: #d6d9de;
  --indigo: #4338ca;   --indigo-bg: #ecebfb;   --indigo-line: #bfbaf0;
  --cyan: #0e7490;     --cyan-bg: #e0f4f7;     --cyan-line: #9fd5df;
  --done-text: #6b7a66;                              /* 檢查清單已勾 */
  --seg-track: #ece8df;                              /* 分頁籤底 */
  --seg-hover: rgba(255, 255, 255, .6);
  --sb-line: rgba(255, 255, 255, .08);
  --sb-scroll: rgba(255, 255, 255, .18);
  --sb-gold: #d7b566;                                /* 深色底上的金色 */
  --sb-avatar-bg: rgba(184, 146, 58, .28);
  --sb-avatar-fg: #f3dfae;
  --backdrop: rgba(15, 23, 42, .45);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-raised: 0 1px 2px rgba(16, 24, 40, .12);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, .16);
  /* 焦點與選取（B1-2）：--gold 在米色上只有 2.65，焦點框改深一階；選取的底線用 --gold-line。深藍底上照舊用 --sb-gold */
  --focus: #8a6d2b;                                  /* 和 --mx-tools 同值；對白 4.88、對米色 4.44 */
  --gold-line: #b07f35;                              /* 選取的金線（分頁籤、區段跳轉、選中的卡片）；簡報 GOLD_DARK */
  --focus-ring: 0 0 0 3px rgba(138, 109, 43, .35);
  /* 轉場（B1-4）：全站同一個長度與曲線，只動顏色、框線、陰影 */
  --dur: 120ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  /* 字級（B1-6；全站字級表 2026-10-26 所長「差一級就統一成一樣大小」）：全站只用下面這幾階，font-size 一律寫變數（tests/test_s108_visual_1026.py 會擋）。
     註記 12＝--fs-xs（表頭、膠囊、標籤、時間這類小字）／內文 14＝--fs-md（原本 13 的併進來）／標題 16＝--fs-lg（區段標題；原本 15 的併進來）／
     頁名與大數字 20＝--fs-xl（頁首 h2、數字卡；原本 18、19、22 的併進來）／登入頁品牌名 26＝--fs-2xl。
     --fs-sm 原本 13，2026-10-26 起等於內文 14（別的規則還在用這個名字，留著；新寫的規則用 --fs-md） */
  /* 2026-10-30 畫面固定四階 20／16／14／12（所長看過三種、四種的建議後選四階：畫面是長頁面、靠區段標題找位置，
     16 留著；三種只用在報價單、請款單這類一頁的 PDF）。登入頁品牌名 26 併進 20，畫面上不會有第五種。變數名稱照留 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 20px;
  /* 間距（B1-8）：新寫和改到的規則用這幾階，不另外做全站重構 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  /* 年度總表格子（與狀態藥丸同色系，略深一點好分辨） */
  --mx-open: #f1f2f5;
  --mx-invoiced: #fff1cc;
  --mx-paid: #d6eedf;
  --mx-cancel: #f4f4f5;
  --mx-multi: #f5eaf2;
  --mx-empty: #8c929d;                               /* 開工單的「＋」：對白 3.13（原 1.55 幾乎看不見） */
  --mx-tools: #8a6d2b;
  /* 工作台圖表（產值四段：已收款／已請款／已執行／開案） */
  --seg-paid: #2e7d4f;
  --seg-invoiced: #3f6fbf;     /* 已請款：上面的白字原本 3.44，B3-5 改 4.96（也是各月柱狀圖的已請款段） */
  --seg-outside: #c3cee0;      /* 系統外請款（起始期別之前的帳務月費做完了；2026-10-22）：上面是深色字 --seg-dark-text */
  --seg-done: #9bd3ae;
  --seg-open: #ebe3cc;
  --seg-open-edge: #9a8a5c;    /* 開案段的終點線（B3-5）：對白 3.41（--seg-open 本身對白只有 1.28） */
  --seg-dark-text: #4a4636;
  --bar-track: #f1eee6;
  --bar-over: #c0392b;
  --bar-soon: #d08a1a;
  --oc-line: #76808f;          /* 組織圖的連接線、行政部虛線框：對米色底 3.6、對托盤底 3.2（--faint 只有 2.3，線會看不清楚） */
  /* 簽證進度的點（所長 2026-10-22 樣張：低彩度五階、未到空心、逾期磚紅、沒有委任虛線；用在 .sg-dot、明細步驟條） */
  --sg-k1: #6a8cab;  --sg-k2: #5a7f9c;  --sg-k3: #4f7a8c;  --sg-k4: #457262;  --sg-k5: #3f6b55;
  --sg-off: #8c8474;  --sg-late: #a5574c;  --sg-late-bg: #f6e9e6;  --sg-na: #c9c2b3;
  --bar-ok: #9bd3ae;           /* 地址卡長條「正常」段（淺色＝--seg-done 同一色；深色另給一個亮一點的，對軌才分得出來） */
  --paper: #ffffff;            /* 紙張白：LOGO 預覽（PDF 印在白紙上，透明底的 LOGO 要在白底上看）；深色也是白 */
  --mx-billed: #c9a24a;        /* 年度總表（2026-10-24 改版）已請款的格子：金色（已收款＝--sg-k5 深綠、已執行＝--sg-k1 藍，和申報進度的點同一套） */

  --radius: 10px;
  --radius-sm: 6px;
  --sb-w: 248px;
  --topbar-h: 56px;
  --font: "Microsoft JhengHei", "PingFang TC", sans-serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
}

/* ================= 深色（所長 2026-10-04「一個深色板、一個淺色板、一鍵切換」） =================
   上面的 :root 是淺色（現在的樣子，不動）；這裡只覆寫色彩變數。html 的 data-theme 由 base.html <head> 在載入 CSS 前設好
   （localStorage landc.theme＝dark／light；沒選過跟著作業系統），頂部列的太陽／月亮鈕切換（app.js）。
   - 新顏色一律加兩個值：淺色寫在 :root、深色寫在這裡；tests/test_s47_dark_mode.py 會比對兩邊的變數清單
   - 包在 @media screen 裡：列印一律用淺色（PDF 報價單、請款單是伺服器產生的，不受影響）
   - 底色是深藍灰（不是純黑，長時間看不累）；文字不用純白。狀態色和淺色同一個意思：深底＋亮一階的字
   - 深色的「實心」顏色（主鈕、--ok／--danger 當底、產值條）都比較亮，上面的字用 --on-primary（深藍）
   - 刻意沿用淺色的：--link（＝ var(--info)，跟著深色的 --info）、--sb-gold（側欄本來就是深底） */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;                                /* 捲軸、下拉選單、日期選擇器、勾選框跟著變深 */
    /* 規格 5.2 */
    --bg: #121a27;
    --surface: #1a2333;
    --surface-2: #1e293b;
    --border: #2e3b52;
    --border-strong: #64738f;                          /* 輸入框、按鈕框：對卡片 3.3、對表頭 3.1 */
    --text: #e4e9f1;                                   /* 對卡片 13.6；不用純白 */
    --text-muted: #a5afc0;                             /* 對卡片 7.6、對底 8.1 */
    --primary: #d6dfee;                                /* 主鈕：淺藍灰底＋深藍字（淺色的反過來）；.due 的數字也是這個色 */
    --primary-hover: #eef2f8;
    --gold: #c9a55a;
    --sb-bg: #0d1420;                                  /* 側欄比內容區再深一階 */
    --sb-text: #b9c3d6;
    --sb-text-strong: #f3f5f9;
    --sb-hover: rgba(255, 255, 255, .06);
    --sb-active: rgba(215, 181, 102, .16);
    --ok: #6fcf97;       --ok-bg: #163428;
    --warn: #e6b65a;     --warn-bg: #362b13;
    --danger: #ff8f86;   --danger-bg: #3b1d20;
    --info: #8db5f5;     --info-bg: #1a2c4a;
    --purple: #c4b0f0;   --purple-bg: #2a2445;

    /* 延伸 */
    --on-primary: #14213a;
    --placeholder: #8b95a8;
    --row-hover: #232e42;
    --sel-bg: #1d3152;
    --sel-hover: #233a60;
    --on-primary-pill: rgba(20, 33, 58, .14);
    --hover-bg: #253148;
    --code-bg: #263249;
    --ok-line: #2c6249;
    --warn-line: #6e5622;
    --danger-line: #7d3a3b;
    --info-line: #345587;
    --soon: #f59e5b;
    --neutral: #b7bfcc;  --neutral-bg: #29334a;  --neutral-line: #44516a;
    --faint: #7f8a9d;    --faint-bg: #222b3c;    --faint-line: #4b566b;
    --indigo: #b1adff;   --indigo-bg: #28284f;   --indigo-line: #4d4a94;
    --cyan: #6fd3e3;     --cyan-bg: #12343e;     --cyan-line: #24616f;
    --done-text: #93a68d;
    --seg-track: #111926;
    --seg-hover: rgba(255, 255, 255, .06);
    --sb-line: rgba(255, 255, 255, .07);
    --sb-scroll: rgba(255, 255, 255, .16);
    --sb-avatar-bg: rgba(215, 181, 102, .22);
    --sb-avatar-fg: #f3dfae;
    --backdrop: rgba(3, 7, 15, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-raised: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
    --focus: #d9b366;                                  /* 對卡片 7.9、對底 8.5 */
    --gold-line: #c9a052;
    --focus-ring: 0 0 0 3px rgba(217, 179, 102, .35);
    /* 年度總表格子 */
    --mx-open: #262f42;
    --mx-invoiced: #3a2f14;
    --mx-paid: #173a2b;
    --mx-cancel: #20283a;
    --mx-multi: #3a2638;
    --mx-empty: #8792a5;
    --mx-tools: #d9b366;
    /* 工作台圖表：深底上「越亮＝越前面」——已收款、已請款亮，已執行、開案暗 */
    --seg-paid: #62c48d;
    --seg-invoiced: #86aef0;
    --seg-outside: #3b4864;
    --seg-done: #31714e;
    --seg-open: #4a4532;
    --seg-open-edge: #c4b37e;
    --seg-dark-text: #f6f3e8;
    --bar-track: #283245;
    --bar-over: #ef6b5f;
    --bar-soon: #e3a345;
    --oc-line: #7f8a9d;                                /* 組織圖的連接線：對底 4.9、對托盤底 5.0 */
    /* 簽證進度的點：深底上每一階亮一點（對卡片 ≥ 3），逾期磚紅改亮紅、底用深紅 */
    --sg-k1: #86a7c6;  --sg-k2: #779cba;  --sg-k3: #6c9aab;  --sg-k4: #66a08a;  --sg-k5: #5f9b7c;
    --sg-off: #8f887a;  --sg-late: #e08a7e;  --sg-late-bg: #3b1d20;  --sg-na: #5d677b;
    --bar-ok: #4f9e72;                                 /* 對軌 3.96（--seg-done 只有 2.2；--seg-done 上面有字，不能直接調亮） */
    --paper: #ffffff;                                  /* 刻意同淺色：LOGO 預覽照紙張的樣子 */
    --mx-billed: #d2ae5c;                              /* 年度總表已請款的格子：深底上亮一階 */
  }
  /* 深色才需要的：滑過、按下用「變暗」的格子在深底上看不出來，改成變亮；側欄和內容區之間畫一條細線 */
  html[data-theme="dark"] :is(a.vc, button.vc):hover, html[data-theme="dark"] .month-strip a:hover i { filter: brightness(1.18); }
  html[data-theme="dark"] :is(a.vc, button.vc):active { filter: brightness(1.3); }
  html[data-theme="dark"] .sidebar { box-shadow: inset -1px 0 0 var(--sb-line); }
  /* 浮在上面的（申報選單、原因對話框）：深底上陰影看不出來，框線加深一階才和下面的表格分得開 */
  html[data-theme="dark"] :is(.vat-menu, .reason-dialog) { border-color: var(--border-strong); }
}

/* ================= 基本 ================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }   /* #錨點不要躲在頂部列下面 */
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-md); line-height: 1.55;
  color: var(--text); background: var(--bg);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
svg a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }   /* 用 outline：Windows 高對比模式會自動換成系統色 */
.sidebar :focus-visible { outline-color: var(--sb-gold); }                  /* 深藍底：深金看不到，用淺金（7.97） */
/* 跳到主要內容（B1-10）：平常藏在畫面上緣外，按 Tab 第一下才出現；放在側欄外面 */
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 60; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary); font-weight: 600;
  transform: translateY(-150%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: none; text-decoration: none; }
.content:focus { outline: none; }   /* main 有 tabindex="-1"（跳過來時接焦點），本身不畫框 */
img { max-width: 100%; vertical-align: middle; }
small { font-size: var(--fs-xs); }   /* 沒指定字級的 <small> 瀏覽器預設 smaller＝11.7px，多出一種（2026-10-30） */
code { font-family: var(--mono); font-size: inherit; background: var(--code-bg); border-radius: 4px; padding: 1px 5px; }
p code { overflow-wrap: anywhere; }   /* 說明文字裡的長路徑可以折行；表格裡的號碼不拆開 */
.ic { width: 18px; height: 18px; flex: none; }
.muted { color: var(--text-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 數字與編號（B2-13）：明細列的 0 寫成淡一點的「0」，不要空白（空白會被讀成沒資料）。報告建議 --faint（對白 2.54），
   但 0 也是資料，改用輸入提示的灰（4.83，過 AA）。單號（報價單、請款單、報告字號）一個樣子：粗、等寬數字、不折行 */
.zero { color: var(--placeholder); }
/* 異動紀錄、事件紀錄的「看原始紀錄」（所長、會計師；_raw_toggle.html）：.lg-n＝整理過的字、.lg-r＝資料庫原文，勾了才換 */
.lg-r { display: none; }
body:has(.raw-toggle input:checked) .lg-r { display: inline; }
body:has(.raw-toggle input:checked) .lg-n { display: none; }
.raw-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0; font-weight: 400; }
.doc-no { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 名稱下面那行灰色小字（B2-12，取代 8 種 inline 字級；原本只有銀行對帳的 .bank-act .sub） */
.sub { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; }
.ok { color: var(--ok); }
.diff { background: var(--warn-bg); }

h1, h2, h3, h4 { color: var(--text); line-height: 1.4; }
.content h2 { display: flow-root; margin: 28px 0 12px; font-size: var(--fs-lg); font-weight: 700; }
.content > h2:first-of-type { margin: 4px 0 16px; font-size: var(--fs-xl); }
.content h3 { display: flow-root; margin: 20px 0 8px; font-size: var(--fs-lg); font-weight: 700; }

/* ================= 外殼：側欄 ================= */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40;
  width: var(--sb-w); display: flex; flex-direction: column;
  background: var(--sb-bg); color: var(--sb-text);
  transition: width var(--dur) var(--ease-out), transform .2s ease;
}
.sb-brand {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h); padding: 0 18px; overflow: hidden;
  border-bottom: 1px solid var(--sb-line); color: var(--sb-text-strong); text-decoration: none;
}
.sb-brand:hover { text-decoration: none; }
.sb-mark {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--gold); color: var(--sb-bg); font-weight: 800; font-size: var(--fs-lg);   /* 金底深藍字（B1-11：白字壓金偏淡；和簡報「金色上用深藍字」一致） */
}
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.sb-brand-text b { font-size: var(--fs-lg); letter-spacing: .12em; }
.sb-brand-text small { font-size: var(--fs-xs); color: var(--sb-text); letter-spacing: .04em; }

.sb-nav {
  flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; padding: 10px 10px 14px;
  scrollbar-width: thin; scrollbar-color: var(--sb-scroll) transparent;
}
.sb-link, .sb-summary {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 36px; padding: 0 10px; border-radius: 7px;
  color: var(--sb-text); font-size: var(--fs-md); text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
}
.sb-link:hover, .sb-summary:hover { background: var(--sb-hover); color: var(--sb-text-strong); text-decoration: none; }
.sb-link:focus-visible, .sb-summary:focus-visible { outline: 2px solid var(--sb-gold); outline-offset: -2px; }
.sb-text { overflow: hidden; text-overflow: ellipsis; }
.sb-link[aria-current="page"] { background: var(--sb-active); color: var(--sb-text-strong); font-weight: 600; }
.sb-link[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--gold);
}
.sb-link[aria-current="page"] .ic { color: var(--sb-gold); }
.sb-nav > .sb-link { margin-bottom: 4px; }
.sb-group { margin: 2px 0; }
.sb-summary { list-style: none; }
.sb-summary::-webkit-details-marker { display: none; }
.sb-summary::marker { content: ""; }
.sb-group[data-current] > .sb-summary { color: var(--sb-text-strong); }
.sb-chev { width: 16px; height: 16px; margin-left: auto; opacity: .55; transition: transform var(--dur) var(--ease-out); }
.sb-group[open] > .sb-summary .sb-chev { transform: rotate(180deg); }
.sb-items { list-style: none; margin: 2px 0 6px; padding: 0 0 0 14px; }
.sb-items li + li { margin-top: 1px; }
.sb-items .sb-link { min-height: 34px; font-size: var(--fs-md); }

.sb-user { flex: none; padding: 10px; border-top: 1px solid var(--sb-line); }
.sb-who { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px 8px; color: var(--sb-text-strong); }
.sb-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sb-avatar-bg); color: var(--sb-avatar-fg); font-weight: 700; font-size: var(--fs-md);
}
.sb-who .sb-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sb-who b { font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-who small { font-size: var(--fs-xs); color: var(--sb-text); }
.sb-user .sb-link { min-height: 34px; font-size: var(--fs-md); }

/* ================= 外殼：頂部列、內容區 ================= */
.main-col { margin-left: var(--sb-w); min-width: 0; min-height: 100vh; }   /* 不做 margin-left 轉場：收合側欄時寬表格每一格都要重排，畫面會頓（B1-4） */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 20px 0 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.tb-btn {
  flex: none; width: 36px; height: 36px; min-height: 0; padding: 0;
  display: inline-grid; place-items: center; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-muted); box-shadow: none;
}
.tb-btn:hover { background: var(--hover-bg); color: var(--text); }
.tb-btn .ic { width: 20px; height: 20px; }
/* 深色／淺色切換（2026-10-04）：淺色時畫月亮（按了變深色）、深色時畫太陽；目前是哪一種寫在 title（app.js） */
.theme-toggle .ic-sun, html[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
/* 沒有頂部列的頁面（登入頁）：放在右上角 */
.theme-float { position: fixed; top: var(--sp-3); right: var(--sp-3); z-index: 30; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-size: var(--fs-md); color: var(--text-muted); white-space: nowrap; }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }
.crumb-sep { color: var(--border-strong); }
.crumb-current { overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 600; }
.tb-search { position: relative; flex: 0 1 340px; min-width: 0; margin-left: auto; display: flex; align-items: center; }
.tb-search > .ic { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.tb-search input { width: 100%; height: 36px; padding: 0 64px 0 34px; border-color: var(--border); border-radius: 8px; background: var(--surface-2); }
.tb-search input:focus { background: var(--surface); border-color: var(--focus); }
.tb-search input:focus, .tb-search input:not(:placeholder-shown) { padding-right: 10px; }
.tb-kbd {
  position: absolute; right: 8px; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface); color: var(--text-muted); font: 500 var(--fs-xs)/1.5 var(--font); pointer-events: none;
}
.tb-search input:focus ~ .tb-kbd, .tb-search input:not(:placeholder-shown) ~ .tb-kbd { display: none; }
.tb-user { flex: none; font-size: var(--fs-md); font-weight: 600; color: var(--text); white-space: nowrap; }

.content { max-width: 1480px; padding: 24px 28px 48px; overflow-wrap: break-word; }
/* 頁尾留白改由 ::after 給（看起來一樣 48px）：浮在底部的批次列（B2-10）只能在外層的「內容」範圍裡移動、padding 不算，
   批次列直接放在頁面上的（銀行對帳、申報進度、續約看板）捲到頁尾才不會蓋住最後一列 */
.main-col > .content { padding-bottom: 0; }
.main-col > .content::after { content: ""; display: block; height: 48px; }
/* 沒登入（登入頁）：沒有側欄，內容垂直置中 */
body.no-shell .content { max-width: none; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 16px; }
body.no-shell h2 { font-size: var(--fs-xl); }
/* 置中卡片（權限不足等單一訊息頁） */
.center-card {
  max-width: 30rem; margin: 8vh auto 24px; padding: 28px 32px;
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--primary);
  border-radius: 12px; box-shadow: var(--shadow-pop);
}
.center-card h2 { margin: 0 0 14px; font-size: var(--fs-xl); }
.center-card > :last-child { margin-bottom: 0; }

/* ================= 按鈕（預設／主要／危險／文字） ================= */
button, a.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  font: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 1.2; white-space: nowrap;
  vertical-align: middle; cursor: pointer;
}
/* 滑過、按下（B1-4）：權重降到 0,1,0，寫在後面的 .vs-*（申報進度格子）、.btn-primary 照常勝出，滑過不會把狀態色蓋成米色 */
:where(button:not(:disabled)):hover { background: var(--hover-bg); }
:where(button:not(:disabled, .vc)):active { background: var(--seg-track); }
/* 停用（B2-8）：原本整顆半透明（3.02:1），「自動沖帳（金額相符，0 筆）」這種帶資訊的停用鈕連字一起糊掉；改成灰底灰字、框線照畫 */
button:disabled { opacity: 1; background: var(--surface-2); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }
.btn-primary, a.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover, a.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); text-decoration: none; }
.btn-primary:not(:disabled):active, a.btn-primary:active { background: var(--primary); border-color: var(--primary); }   /* 按下：從 hover 的淺一階回到深藍 */
.btn-primary:disabled, .btn-primary:disabled:hover { background: var(--neutral-bg); border-color: var(--neutral-line); color: var(--text-muted); }   /* 停用的主鈕不能還是深藍（看起來像能按） */
/* 按鈕裡的計數（B2-8）：全形「（0）」在正黑體下是「（ 0 ）」，改用 count-pill；間距交給按鈕的 gap */
button:not([role="tab"]) .count-pill, a.btn .count-pill { margin-left: 0; }
.btn-primary .count-pill { background: var(--on-primary-pill); color: var(--on-primary); }
.btn-primary:disabled .count-pill { background: var(--surface); color: var(--text-muted); }
.btn-danger { background: var(--surface); border-color: var(--danger-line); color: var(--danger); }
table.quote-items select.stype.type-hint { outline: 2px solid var(--warn); outline-offset: 1px; }   /* 報價項目服務類型可能選錯（2026-10-28） */
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 0; padding: 3px 8px;
  border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none;
  color: var(--link); font-size: var(--fs-md); font-weight: 500; line-height: 1.5;
}
.btn-link:hover { background: var(--info-bg); text-decoration: none; }
/* 停用的按鈕滑過不變色（全域 hover 已排除 :disabled，這兩種有自己的 hover）；文字鈕停用時不要畫出灰底 */
.btn-danger:disabled, .btn-danger:disabled:hover { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
.btn-link:disabled, .btn-link:disabled:hover { background: transparent; color: var(--text-muted); }
/* 送出和換頁的回饋（B2-3，app.js 加 class）：頂端進度條、送出中的按鈕轉小圈。全站唯一的動畫，用途是告訴使用者「已經收到，正在處理」 */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
.nav-progress.on { opacity: 1; transform: scaleX(.85); transition: opacity var(--dur) linear, transform 2.5s var(--ease-out); }
button.is-busy { cursor: progress; opacity: .7; }
button.is-busy::after {
  content: ""; display: inline-block; width: 12px; height: 12px; vertical-align: -2px;   /* 和文字的間距由按鈕的 gap 給 */
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .nav-progress.on { transition: none; transform: scaleX(1); }
  button.is-busy::after { animation: none; }
}

/* ================= 表單 ================= */
:where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=image], [type=submit], [type=button], [type=reset]), select, textarea) {
  height: 34px; max-width: 100%; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); vertical-align: middle;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
:where(input[type=search]) { -webkit-appearance: none; appearance: none; }
:where(select) { padding-right: 6px; }
:where(textarea) { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
/* 輸入框得到焦點（B1-2）：原本只多一圈淡金光暈（1.27:1），看不出游標在哪一格；改成深金實線框。
   寫在 :focus-visible 後面、權重相同（0,1,0），框線往內縮 1px 蓋在邊框上；滑鼠點也會出現，這是預期的 */
:where(input:not([type=checkbox], [type=radio], [type=file]), select, textarea):focus {
  outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); box-shadow: none;
}
:where(input, select, textarea):disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
:where(input[readonly]) { background: var(--surface-2); }
::placeholder { color: var(--placeholder); opacity: 1; }
:where(td, th) :where(input:not([type=checkbox], [type=radio], [type=file]), select) { height: 30px; font-size: var(--fs-md); }
input[type=checkbox], input[type=radio] { width: 15px; height: 15px; margin: 0 4px 0 0; vertical-align: -2px; accent-color: var(--primary); }
input[type=file] { max-width: 100%; font: inherit; font-size: var(--fs-md); }
input[type=file]::file-selector-button {
  margin-right: 8px; min-height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-md); cursor: pointer;
}
progress { vertical-align: middle; accent-color: var(--ok); }
/* 表格裡的小表單、和文字同一行的表單（B2-12：取代 29 處 style="display:inline"） */
td form, form.inline { display: inline; }

/* ================= 表格 ================= */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); font-size: var(--fs-md); }
.content table { margin: 0 0 16px; border: 1px solid var(--border); }   /* 還沒包框的表格：外框、間距和包框後一樣，包的時候版面不會跳 */
.table-wrap > table, .mx-wrap > table { margin: 0; border: 0; }
.content td table, .content th table { margin: 6px 0; border: 0; }
th, td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
thead th { background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover > td { background: var(--row-hover); }
tbody tr:last-child > td { border-bottom: 0; }
tfoot th, tfoot td { background: var(--surface-2); color: var(--text); font-weight: 700; border-top: 1px solid var(--border); border-bottom: 0; }
tr.diff > td, tr.diff:hover > td, td.diff { background: var(--warn-bg); }
/* 勾到的列（B2-4，app.js 在 tr 加 .is-sel）：寫在滑過的規則後面、權重一樣，滑過時仍看得出勾了；左邊一條藍線，不只靠底色。
   不能寫成 tr:has(.row-check:checked)：工單列表幾千列，:has 會讓頁面載不完 */
tbody tr.is-sel > td { background: var(--sel-bg); }
tbody tr.is-sel:hover > td { background: var(--sel-hover); }
tbody tr.is-sel > td:first-child { box-shadow: inset 3px 0 0 var(--info); }
/* 空狀態：跨欄的說明格置中（B2-25：上下內距 28→12，空區段不要佔一大塊） */
td[colspan].muted, tbody tr:hover > td[colspan].muted { padding: 12px 16px; text-align: center; color: var(--text-muted); background: var(--surface); }
/* 空表不畫表頭（B2-25）：模板在沒有資料時給 table 加 .is-empty（不用 table:has(…) 自動判斷，理由同上） */
table.is-empty > thead { display: none; }
/* 逐欄篩選列 */
.filter-row td { padding: 6px 8px; background: var(--surface-2); }
.filter-row input { width: 100%; height: 28px; padding: 0 8px; border-color: var(--border-strong); font-size: var(--fs-sm); }   /* 原 --border 對底色 1.24，框淡得像底色 */
.filter-row input:focus { border-color: var(--focus); }
/* 自動外包的捲動框（app.js）：寬表格在框裡橫向捲 */
.table-wrap {
  overflow-x: auto; margin: 0 0 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
/* 表頭固定（B2-10）：捲動框本身是捲動容器，表頭只能黏在框裡、跟著表格捲走。表格沒有比框寬的（app.js 沒加 .is-wide）
   改成 overflow:clip（不是捲動容器，圓角照樣裁），表頭就黏在頂部列（＋區段跳轉列，app.js 設 --secnav-h）下面。
   比框寬的維持在框裡橫捲、表頭不固定 */
.table-wrap:not(.is-wide) { overflow: clip; }
.table-wrap:not(.is-wide) > table > thead { position: sticky; top: calc(var(--topbar-h) + var(--secnav-h, 0px)); z-index: 6; }
/* 表格上方的左右滑桿（所長 2026-10-22；app.js 在 .table-wrap.top-scroll 前面插 .top-scrollbar，兩條同步）：
   黏在頂部列下面，表格往下捲了照樣滑得到；表格不比框寬時 app.js 加 hidden。手機寬度同一套（框和捲軸同寬）；列印不印（寫在唯一那段 @media print） */
.top-scrollbar {
  overflow-x: auto; overflow-y: hidden; position: sticky; top: var(--topbar-h); z-index: 7;
  background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0; max-width: 100%; box-sizing: border-box;
}
/* 捲軸自己畫（不靠作業系統）：Windows、Mac 的「捲動時才顯示」浮動捲軸、觸控裝置上也看得到一條可以拖的軌道 */
.top-scrollbar { scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--text-muted) 60%, var(--surface-2)) var(--surface-2); }
.top-scrollbar::-webkit-scrollbar { height: 14px; }
.top-scrollbar::-webkit-scrollbar-track { background: var(--surface-2); }
.top-scrollbar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 60%, var(--surface-2)); border-radius: 7px; border: 3px solid var(--surface-2); }
.top-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.top-scrollbar > div { height: 1px; }
.top-scrollbar[hidden] { display: none; }
.top-scrollbar:not([hidden]) + .table-wrap { border-top-left-radius: 0; border-top-right-radius: 0; }
/* 寬表格的浮動表頭（所長 2026-10-23；app.js pinHead）：真的表頭捲出畫面時，複製一份固定在左右滑桿下面，左右跟著表格的框捲；
   位置、寬度由 app.js 設（top／left／width），只給看：外框接住點擊（不穿到底下被蓋住的那一列），複製的表格 inert；列印不印 */
.pin-head { position: fixed; z-index: 7; overflow: hidden; background: var(--surface-2); box-shadow: 0 2px 4px rgb(0 0 0 / 8%); }
.pin-head[hidden] { display: none; }
.pin-head-box { overflow: hidden; }
.pin-head-box > table { margin: 0; border: 0; }
/* 窄表（B2-12）：表格預設和 .panel 一樣滿版；真的要窄才用，套在整個區段容器上（app.js 會把表格上的 class 複製到外框） */
.table-narrow { max-width: 52rem; }
.table-mid { max-width: 64rem; }
/* 表格裡的連結加一條淡底線（B2-14）：可以點的客戶、標題，和不能點的承辦、到期只差深藍和藍（2.21:1）。
   權重壓到 0,0,1：年度總表格子、按鈕樣式的連結、狀態格子、標籤各自的規則會贏；滑過時 a:hover 的 underline 換回實色 */
:where(td) > a:where(:not(.btn, .btn-link, .btn-primary, .vc, .tag, .stage)) {
  text-decoration: underline; text-decoration-color: var(--info-line); text-underline-offset: 3px;
}
/* 表格裡展開的明細小表 */
td table { background: transparent; font-size: var(--fs-sm); }
td table td, td table th { padding: 4px 8px; }
/* 表格裡的按鈕小一號，列不要太高 */
td button { min-height: 28px; padding: 0 10px; }

/* ================= 狀態藥丸 ================= */
.stage, .rv {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; vertical-align: middle;
}
/* 工單階段：開案灰、報價送出藍、報價簽回靛、執行完畢青、已請款琥珀、已收款綠、已取消淡灰刪除線 */
.stage.st-開案 { background: var(--neutral-bg); color: var(--neutral); }
.stage.st-報價送出 { background: var(--info-bg); color: var(--info); }
.stage.st-報價簽回 { background: var(--indigo-bg); color: var(--indigo); }
.stage.st-執行完畢 { background: var(--cyan-bg); color: var(--cyan); }
.stage.st-已請款 { background: var(--warn-bg); color: var(--warn); }
.stage.st-已收款 { background: var(--ok-bg); color: var(--ok); }
/* 已取消、已作廢、不用申報（B2-15）：原本淡灰字 2.31:1 是全站最淡的字；改成透明底、灰字（5.78）、細框，保留刪除線 */
.stage.st-已取消 { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--faint-line); text-decoration: line-through; }
.stage.st-bad { background: var(--danger-bg); color: var(--danger); }   /* 請款單：呆帳沖銷 */
/* 報價單狀態（顯示用語：洽談中／已報價／已簽回／未成交／已作廢） */
.stage.qs-草稿 { background: var(--neutral-bg); color: var(--neutral); }
.stage.qs-已送出 { background: var(--info-bg); color: var(--info); }
.stage.qs-已簽回 { background: var(--ok-bg); color: var(--ok); }
.stage.qs-已拒絕 { background: var(--danger-bg); color: var(--danger); }
.stage.qs-已作廢 { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--faint-line); text-decoration: line-through; }
/* 覆核：未完成灰、被退回紅、待覆核琥珀、覆核完成／免覆核綠 */
.rv-未完成 { background: var(--neutral-bg); color: var(--neutral); }
.rv-被退回 { background: var(--danger-bg); color: var(--danger); }
.rv-待經理覆核, .rv-待部長覆核, .rv-待會計師覆核 { background: var(--warn-bg); color: var(--warn); }   /* 待部長覆核：三層覆核 2026-10-26 */
.rv-覆核完成, .rv-免覆核 { background: var(--ok-bg); color: var(--ok); }
/* 中性標籤、提醒標籤（內容可能很長：可以換行） */
.tag, .warn-tag { display: inline-block; padding: 1px 8px; border-radius: 11px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.6; vertical-align: middle; }
.tag { margin-right: 4px; background: var(--neutral-bg); color: var(--neutral); }
a.tag { color: var(--text); }
a.tag:hover { background: var(--neutral-line); text-decoration: none; }
.warn-tag { background: var(--warn-bg); color: var(--warn); }
td.warn-tag { display: table-cell; padding: 9px 12px; border-radius: 0; font-size: inherit; line-height: inherit; }
dd.warn-tag { justify-self: start; }
/* 工單頁「開單依據」底下的一行（特准原因欄、提示；取代 inline margin） */
.gate-line { margin-top: .3rem; }
.status-現行 { color: var(--ok); }
.status-終止 { color: var(--danger); }
.status-暫停 { color: var(--warn); }
.status-待確認 { color: var(--text-muted); }
.due-over { color: var(--danger); font-weight: 600; }
.quote-items .fy-wrap { display: block; margin-top: 2px; white-space: nowrap; font-size: var(--fs-xs); }   /* 報價項目的所屬年度（2026-10-28） */
.quote-items .fy-late { display: block; white-space: normal; color: var(--danger); font-weight: 600; }
.due-soon { color: var(--soon); font-weight: 600; }
/* 逾期、快到期的標籤（B2-16）：原本只差紅字和深橘字，色弱、高對比模式分不出來；日期後面加「逾期 N 天」「剩 N 天」。
   透明框線平常看不到，Windows 高對比模式會畫出來 */
.due-flag {
  display: inline-block; margin-left: var(--sp-1); padding: 0 6px; border: 1px solid transparent; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: 1px;
}
.due-flag.over { background: var(--danger-bg); color: var(--danger); }
.due-flag.soon { background: var(--warn-bg); color: var(--warn); }
@media (forced-colors: active) {
  .due-over { text-decoration: underline; }
}
.nav-badge {
  display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: var(--on-primary); font-size: var(--fs-xs); font-weight: 700; line-height: 18px; text-align: center;
}

/* ================= 卡片 ================= */
.panel { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* 卡片標題（B2-19）：標題、右側連結（.h-link）排一行，灰色說明（small）換到下一行；原本 20～40 字的說明夾在標題裡，
   標題折行、「全部 →」掉到第二行 */
.panel h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2);
  margin: 0 0 10px; font-size: var(--fs-lg); line-height: 1.45;   /* 原 15px 和內文只差 1px，掃讀找不到段落起點 */
}
.panel h3 small { order: 3; flex-basis: 100%; margin-top: 2px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
/* 數字卡排成格線（B2-18）：原本 flex＋最大寬 300px，組長 6 張排成 5＋1、所長 9 張兩排寬度不同；格線每欄一樣寬、第二排對齊第一排 */
/* 最小 160px（報告寫 150）：1440 寬側欄展開時 150 會排成 7 欄、每張 154px，「我要完成的（到本月）」這種標籤折成兩行。
   最多 6 欄（每欄至少內容寬的 1/6）：只限最小寬的話內容區一寬就多排一欄，1366／1600 寬銀行對帳 8 張變 7＋1、所長 9 張 7＋2，
   1920 寬所長 8＋1（10/02 第二批自檢 tmpl-r1-01）。實測 1280～1920：8 張＝6＋2、9 張＝6＋3、組長 6 張一排；張數少的照樣撐滿一排 */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(max(160px, calc((100% - 5 * var(--sp-2)) / 6)), 1fr));
  gap: var(--sp-2); margin: 0 0 16px;
}
.card {
  min-width: 0; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text-muted); font-size: var(--fs-md); line-height: 1.5;
}
.card b { display: block; margin-bottom: 2px; color: var(--text); font-size: var(--fs-xl); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.card.hot { border-color: var(--danger-line); box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
.card.hot b { color: var(--danger); }
/* 輪到你處理（B2-17）：等我覆核、等會計師覆核、已簽回待開單——是正常工作、不是出問題，深藍字＋金色左條；紅色只給 .hot */
.card.due { border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--gold-line), var(--shadow); }
.card.due b, .card.due > .ic { color: var(--primary); }
.dash { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 16px; margin-bottom: 20px; }   /* 兩欄各自的高度（B3-3：原本左欄被右欄撐高） */
.big-num { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.big-num small { font-size: var(--fs-md); font-weight: 400; color: var(--text-muted); }

/* ================= 訊息橫幅（p.ok／p.error／p.warn 標記不變） ================= */
p.ok, p.error, p.warn, div.warn, div.error {
  margin: 0 0 14px; padding: 10px 14px; border: 1px solid; border-left-width: 4px; border-radius: 8px; line-height: 1.6;
}
p.ok { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); color: var(--ok); }
p.error, div.error { background: var(--danger-bg); border-color: var(--danger-line); border-left-color: var(--danger); color: var(--danger); }
p.warn, div.warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); color: var(--warn); }   /* 金色只留給「目前／選取」（B1-2） */
p.ok a, p.error a, p.warn a, div.warn a, div.error a { text-decoration: underline; }
/* 客戶的特殊狀況備註（2026-10-05）：客戶頁抬頭卡下面、工單頁標題下面的琥珀橫幅（提醒，不是錯誤）；內容用一般字色比較好讀 */
.special-note { display: flex; align-items: baseline; gap: var(--sp-3); }
.special-note-k { flex: none; }
.special-note-v { flex: 1 1 auto; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.special-note-edit { flex: none; font-size: var(--fs-sm); }
/* 手機（審查 10/05）：標題和連結排第一行、內文獨佔一行，不然內文被擠成一條窄欄、200 字的備註蓋掉整個第一屏 */
@media (max-width: 640px) {
  .special-note { flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
  .special-note-edit { order: 2; margin-left: auto; }
  .special-note-v { order: 3; flex-basis: 100%; }
}
/* 字數：說明和「已打 N／200 字」同一行、分開兩段（app.js 只改計數那段） */
.char-count-line { display: block; margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-xs); }
.char-count { margin-left: var(--sp-2); white-space: nowrap; }
.char-count.is-full { color: var(--warn); font-weight: 600; }
/* 錯誤加重（B2-21）：被擋下和提醒原本同一個 ⚠、只差紅和琥珀，色弱分不出；錯誤的左條加粗、字加粗（符號維持 ⚠，✕ 像關閉鈕）。
   所長 2026-10-27 第二批：⚠ 只留給錯誤，琥珀提醒框不再加 ⚠ */
p.error, div.error { border-left-width: 6px; font-weight: 600; }
/* app.js 把畫面外的第一則訊息捲過來並給焦點（tabindex=-1）：只是讓報讀軟體念出來，不畫焦點框（和 main 一樣） */
:is(p.ok, p.error, p.warn, div.warn, div.error)[tabindex="-1"]:focus { outline: none; }

/* ================= 工具列、分頁籤 ================= */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); font-size: var(--fs-md);
}
.bulk-bar label { display: inline-flex; align-items: center; gap: 4px; }
.mode-bar { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; margin: 0 0 12px; padding: 3px; background: var(--seg-track); border-radius: 9px; }
.mode-bar a {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 7px;
  color: var(--text-muted); font-size: var(--fs-md); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.mode-bar a:hover { background: var(--seg-hover); color: var(--text); text-decoration: none; }
.mode-bar a.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-raised); }

/* ================= 欄位表（dt／dd）與編輯表單 ================= */
.grid { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 8px 16px; align-items: baseline; margin: 0 0 16px; font-size: var(--fs-md); }
.grid dt { color: var(--text-muted); font-size: var(--fs-md); }
.grid dd { min-width: 0; margin: 0; }
.edit-form .grid { grid-template-columns: 8rem minmax(0, 1fr); gap: 10px 16px; }
.edit-form dd { margin-bottom: 0; }
.ms-field { display: inline-block; margin-right: 12px; }
.wo-summary { margin: 0 0 8px; }   /* 工單頁：同仁看到的唯讀基本資料（取代整張灰掉的表單） */
.wo-summary dd { overflow-wrap: anywhere; }

/* ================= 展開區塊 ================= */
.content details > summary { cursor: pointer; list-style: none; }
.content details > summary::-webkit-details-marker { display: none; }
.content details > summary::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 0 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  opacity: .65; transform: translateY(-2px) rotate(-45deg); transition: transform var(--dur) var(--ease-out);
}
.content details[open] > summary::before { transform: translateY(-3px) rotate(45deg); }
.content details > summary:hover { color: var(--text); }
summary.warn-tag { padding: 3px 10px; font-size: var(--fs-md); }

/* ================= 檢查清單、快速動作 ================= */
.checklist {
  list-style: none; margin: 6px 0 16px; padding: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.checklist li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: 0; }
.checklist form { display: inline; }
.checklist button { width: 28px; min-height: 26px; padding: 0; font-size: var(--fs-lg); box-shadow: none; }
.checklist .done { color: var(--done-text); text-decoration: line-through; }
.quick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }   /* 4→6px（B2-9）：列高收緊後「完成」「覆核」緊鄰，間距大一點不誤按 */
.quick form { display: inline; }
.quick button { min-height: 24px; margin: 0; padding: 0 8px; font-size: var(--fs-xs); box-shadow: none; }
.quick .q-on { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.quick .q-off { color: var(--text-muted); }
/* 工單頁頁首（B2-7）：同仁打開工單只做一件事——勾完清單按「完成」（q-off），主管是「覆核」（q-go：第一層、會計師覆核）；
   兩者不會同時出現，頁首最多一顆主鈕。表格裡（工作台、工單列表）照舊是小按鈕，撤回用的「✓完成」（q-on）維持次要樣式 */
.page-actions .quick button.q-off, .page-actions .quick button.q-go { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.page-actions .quick button.q-off:hover, .page-actions .quick button.q-go:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* 表格裡的「退回」降成文字鈕：紅框紅字原本是整列最顯眼的，正面動作「覆核」反而不起眼 */
td .quick .btn-danger { background: none; border-color: transparent; color: var(--danger); }
td .quick .btn-danger:hover { background: var(--danger-bg); border-color: transparent; }

/* ================= 工作台圖表 ================= */
.seg-paid { background: var(--seg-paid); fill: var(--seg-paid); }
.seg-invoiced { background: var(--seg-invoiced); fill: var(--seg-invoiced); }
.seg-outside { background: var(--seg-outside); fill: var(--seg-outside); }
.seg-done { background: var(--seg-done); fill: var(--seg-done); }
.seg-open { background: var(--seg-open); fill: var(--seg-open); }
.pipe { display: flex; height: 1.9rem; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--bar-track); }
.pipe span { display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--on-primary); font-size: var(--fs-xs); white-space: nowrap; }
.pipe .seg-outside, .pipe .seg-done, .pipe .seg-open { color: var(--seg-dark-text); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; color: var(--text-muted); font-size: var(--fs-md); }
.legend strong { color: var(--text); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: 0; }
.chart-svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.chart-svg text { font-size: var(--fs-xs); fill: var(--text-muted); }
.chart-svg .cur { font-weight: 700; fill: var(--text); }
.chart-svg .pct { font-size: var(--fs-xs); fill: var(--ok); }   /* 柱頂百分比（原本 11px，2026-10-26 全站字級表併成註記 12） */
.chart-svg .axis { stroke: var(--border-strong); }
.chart-svg a:hover rect { opacity: .82; }
.hbar-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 11.5rem; gap: 8px; align-items: center; padding: 3px 0; font-size: var(--fs-md); }
.hbar-row .num { text-align: right; white-space: nowrap; }
.hbar-row.wide { grid-template-columns: 10rem minmax(0, 1fr) 5rem; }   /* 標籤比較長的（帳務戰情的流失原因） */
.hbar-row .late-n { font-size: var(--fs-sm); }   /* 工作台各組面板：累計逾期未完成（B3-3 起自己一欄，可點） */
.hbar { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: var(--bar-track); }
.hbar b, .hbar u { position: absolute; top: 0; bottom: 0; left: 0; display: block; border-radius: 999px; }
.hbar u { background: var(--seg-open); }
.hbar b { background: var(--seg-paid); }
.hbar.over b { background: var(--bar-over); }
.hbar.soon b { background: var(--bar-soon); }
/* 依資料計算的長條（B2-12）：模板只寫 style="--w:37%"（全站唯一允許的 inline style），寬度在這裡套上；
   月份直條（商務中心每月起租）是高度，用 --h。寫在長條本身（b、u、span、i），不要寫在外框（變數會往下傳） */
.hbar > b, .hbar > u, .pipe > span, .stackbar > i { width: var(--w); }
.month-strip i { height: var(--h); }
/* 表格裡的短長條、完成率欄（B2-11）：取代 completion 的 inline style；中文每個字都能折行，欄太窄組名會被擠成兩三行 */
.hbar.w-8 { display: inline-block; width: 6rem; vertical-align: middle; }
.w-pct { min-width: 9rem; }
.dl-row { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr) 11rem; gap: 8px; align-items: center; padding: 3px 0; font-size: var(--fs-md); }
.dl-row .num { text-align: right; white-space: nowrap; }

/* ================= 年度總表（客戶×月份）：格子顏色與工單階段藥丸同色系 ================= */
.mx-wrap {
  overflow: auto; max-height: 78vh; margin: 0 0 16px; scroll-padding-top: 3.4rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
/* B3-14：原本表格強制 1500px、客戶欄 14rem，1440 只看到 9 月、1366／1280 到 8 月。拿掉最小寬度、客戶欄最少 11rem（表格放得下時多出來的寬度給客戶欄）、
   格子左右各少 1px；有非例行專案時，年度合計右邊的「非例行性業務」各欄仍要橫捲（客戶欄固定在左） */
.mx { min-width: 0; font-size: var(--fs-sm); }
.mx th, .mx td { padding: .2rem .25rem; white-space: nowrap; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.mx tr > :last-child { border-right: 0; }
.mx thead th { position: sticky; top: 0; z-index: 2; line-height: 1.5; background: var(--surface-2); }
.mx thead tr:first-child th { height: 1.7rem; }
.mx thead tr:nth-child(2) th { top: 1.7rem; }
.mx .mx-name { position: sticky; left: 0; z-index: 1; width: auto; min-width: 11rem; white-space: normal; background: var(--surface); }
.mx thead .mx-name, .mx tfoot .mx-name { z-index: 3; background: var(--surface-2); }
.mx tfoot th { position: sticky; bottom: 0; }
.mx-cell a { display: block; color: inherit; line-height: 1.15; text-align: right; text-decoration: none; }
.mx-cell a:hover { outline: 2px solid var(--gold); outline-offset: -1px; text-decoration: none; }
.mx-fee { display: block; font-weight: 600; }
.mx-staff { display: block; color: var(--neutral); font-size: var(--fs-xs); }   /* 承辦姓名：彩色格子上 --text-muted 只有 3.95 */
/* 兩位承辦的格子（「陳冠安、陳湘羚」，正式資料 25 格）原本不折行，一格就把 12 個月的欄全部撐到 93px（B3-14）。
   只在「、」和空白後面折行（keep-all：姓名本身不會被拆開；一個人的格子照舊一行） */
.mx .mx-staff { white-space: normal; word-break: keep-all; }
.mx-empty a { color: var(--mx-empty); text-align: center; }
.mx-empty a:hover { color: var(--text); }
.mx-taken { display: block; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); cursor: help; }  /* 別組已有例行工單：不放「＋」 */
.mx-total { font-weight: 600; background: var(--surface-2); }
.mx-tools { margin-top: .1rem; font-size: var(--fs-xs); }
.mx-tools a { margin-right: .5rem; color: var(--mx-tools); }
.mx td.st-開案 { background: var(--mx-open); }
.mx td.st-報價送出 { background: var(--info-bg); }
.mx td.st-報價簽回 { background: var(--indigo-bg); }
.mx td.st-執行完畢 { background: var(--cyan-bg); }
.mx td.st-已請款 { background: var(--mx-invoiced); }
.mx td.st-已收款 { background: var(--mx-paid); }
.mx td.st-已取消 { background: var(--mx-cancel); color: var(--text-muted); }   /* 已取消的金額原本 2.31，看不清楚 */
.mx td.st-多筆 { background: var(--mx-multi); }
/* 圖例：小方塊（原本的 ■ 字元藏起來，改用底色） */
.mx-legend {
  display: inline-block; width: 11px; height: 11px; margin: 0 4px 0 10px; overflow: hidden;
  border-radius: 3px; font-size: 0; line-height: 0; vertical-align: -1px;
}
.mx-legend.st-開案 { background: var(--mx-open); box-shadow: inset 0 0 0 1px var(--neutral-line); }
.mx-legend.st-報價送出 { background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.mx-legend.st-報價簽回 { background: var(--indigo-bg); box-shadow: inset 0 0 0 1px var(--indigo-line); }
.mx-legend.st-執行完畢 { background: var(--cyan-bg); box-shadow: inset 0 0 0 1px var(--cyan-line); }
.mx-legend.st-已請款 { background: var(--mx-invoiced); box-shadow: inset 0 0 0 1px var(--warn-line); }
.mx-legend.st-已收款 { background: var(--mx-paid); box-shadow: inset 0 0 0 1px var(--ok-line); }
.mx-legend.st-已取消 { background: var(--mx-cancel); box-shadow: inset 0 0 0 1px var(--faint-line); }

/* ================= 組織圖（樹狀；所長 2026-10-08「ui重新設計要一目了然」選 A 樹狀圖） =================
   HTML 一份、三種排法；線全部用 border／偽元素畫，沒有圖片、沒有 JS、沒有動畫：
   - 預設（窄，手機）：由上往下的縮排清單——每一層左邊一條直線、往右一條短橫線
   - 內容區 609px 以上（＝視窗 641px 以上；609＝641 減掉內容區左右各 16px，和全站 640px 以下的手機斷點一致）：各部照樣上下排，組改成一排排卡片（放不下就換行；不畫每一組的小橫線）
   - 內容區夠寬、而且這個編制放得下（.oc.side，由 org.tree 算）：所長置中、各部左右並排
   寬度看容器（@container），不是看視窗：側欄展開、收合都對。
   誰看得到哪個金額在 org.tree 決定，範圍外的數字、細條不在 HTML 裡；這裡沒有任何「把金額藏起來」的規則 */
.page-actions .mode-bar { margin: 0; }
.oc-wrap { container: oc / inline-size; margin: 6px 0 14px; }
/* 圖裡的字只有三種（所長 2026-10-13「不要在同一個圖面裡面有超級多種不同的字體大小…限制在三種」）。
   font-size、font-weight 只准寫在下面這三條，而且一定成對；別的 .oc- 規則（含容器查詢、列印）都不要再寫字級、粗細
   （tests/test_s74_org_type.py 會擋）。要換樣子就把選擇器加進這三條其中一條：
   - 註記：整張圖的預設——職稱、人數、「直屬 ○○」、金額與百分比、圖例、說明字
   - 內文：姓名那一行（.oc-nm；組長、部長直屬的卡名、同仁、秘書、行政部都一樣，組長不加粗）
   - 標題：所長的姓名、部名、「行政部」
   顏色跟著 --oc-ink（標題、內文）／--oc-note（註記）；所長那一格是實心深底，兩個都換成底色上的字色 */
.oc, .oc-after, .oc-nick, .oc-nm > .oc-cnt { color: var(--oc-note); font-size: var(--fs-xs); font-weight: 400; }
.oc-nm { color: var(--oc-ink); font-size: var(--fs-md); font-weight: 400; }
.oc-owner .oc-nm, .oc-dname { color: var(--oc-ink); font-size: var(--fs-lg); font-weight: 700; }
.oc, .oc-after { --oc-ink: var(--text); --oc-note: var(--text-muted); }
/* 「放不放得下並排」：基本的編制內容區 1100px 就放得下；編制多要幾 px 寬，門檻就多幾 px
   （org.tree 給 .oc-fit 的 class：.h1～.h9＝多幾百、.t1～.t9＝多幾十、.u1～.u9＝多幾 px）。
   做法是讓 .oc-fit 這個容器比實際窄（裡面的 .oc 用負的 margin 撐回原來的寬度，畫面不變），
   所以下面只要寫一次 @container ocfit (min-width: 1100px)：要的寬度多 10px，就要內容區多 10px 才並排。
   內容區不到 1100px 時一定不並排，就不用縮（最多縮 999px；手機上容器縮到 0 之後 .oc 會被負的 margin 撐出畫面外） */
.oc-fit { container: ocfit / inline-size; --oh: 0px; --ot: 0px; --ou: 0px; --over: calc(var(--oh) + var(--ot) + var(--ou)); }
@container oc (min-width: 1100px) {
  .oc-fit { margin-right: var(--over); }
  .oc-fit > .oc { margin-right: calc(-1 * var(--over)); }
}
.oc-fit.h1 { --oh: 100px; } .oc-fit.h2 { --oh: 200px; } .oc-fit.h3 { --oh: 300px; }
.oc-fit.h4 { --oh: 400px; } .oc-fit.h5 { --oh: 500px; } .oc-fit.h6 { --oh: 600px; }
.oc-fit.h7 { --oh: 700px; } .oc-fit.h8 { --oh: 800px; } .oc-fit.h9 { --oh: 900px; }
.oc-fit.t1 { --ot: 10px; } .oc-fit.t2 { --ot: 20px; } .oc-fit.t3 { --ot: 30px; }
.oc-fit.t4 { --ot: 40px; } .oc-fit.t5 { --ot: 50px; } .oc-fit.t6 { --ot: 60px; }
.oc-fit.t7 { --ot: 70px; } .oc-fit.t8 { --ot: 80px; } .oc-fit.t9 { --ot: 90px; }
.oc-fit.u1 { --ou: 1px; } .oc-fit.u2 { --ou: 2px; } .oc-fit.u3 { --ou: 3px; }
.oc-fit.u4 { --ou: 4px; } .oc-fit.u5 { --ou: 5px; } .oc-fit.u6 { --ou: 6px; }
.oc-fit.u7 { --ou: 7px; } .oc-fit.u8 { --ou: 8px; } .oc-fit.u9 { --ou: 9px; }
/* 行高 1.5：註記一行 18px、內文 21px、標題 24px（下面並排時那幾個固定高度照這三個數字算） */
.oc { --oc-lw: 2px; --ind: 13px; --arm: 15px; position: relative; line-height: 1.5; font-variant-numeric: tabular-nums; }
:where(.oc) ul { list-style: none; margin: 0; padding: 0; }   /* :where＝權重最低，下面各層的 padding 才蓋得過 */
.oc-bypass { display: none; }

/* 共用的小零件：姓名那一行、簡稱、職稱、人數、金額、細條 */
/* 姓名那一行不折行；後面有寫出來的簡稱、放不下時省略（完整的在簡稱自己的 title）。很長的姓名（外國人名，.oc-long）才折行，簡稱跟著一起折 */
.oc-nm { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-long { min-width: 0; white-space: normal; overflow-wrap: break-word; }      /* 很長的姓名（外國人名）可以折行，不撐破卡片 */
.oc-long + .oc-nick { white-space: normal; }
.oc-nick { overflow-wrap: anywhere; }
.oc-t, .oc-cnt, .oc-note { white-space: nowrap; }
.oc-meta { display: block; }                                                     /* 姓名下面那一行註記：「副理・4 人」「秘書・直屬所長」 */
.oc-via { min-width: 0; overflow-wrap: break-word; }
.oc-bar { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--bar-track); }
.oc-bar > b { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 999px; background: var(--seg-paid); }   /* 和各組完成率的長條同色；對軌 ≥ 3 */

/* 所長：全圖唯一實心的一格。左邊姓名（標題）、底下一行「所長」，右邊一行「N 部・N 組・N 人」；
   註記在深底上用淡一階的字（底色上的字色混兩成底色：淺色 9.5、深色 7.0，test_s74 會算） */
.oc-owner {
  --oc-ink: var(--on-primary); --oc-note: color-mix(in srgb, var(--on-primary) 80%, var(--primary));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 18px; padding: var(--sp-2) 14px;
  border-radius: 12px; background: var(--primary); color: var(--oc-note); box-shadow: var(--shadow-raised);
}
.oc-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-4); min-width: 0; }
.oc-p { display: block; min-width: 0; }
.oc-grade { display: block; }
.oc-sum { white-space: nowrap; }
.oc-owner .oc-money { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 0 14px; }

/* 分支：左邊一條直線、往右一條短橫線；最後一個分支直線到橫線為止，轉角畫圓 */
.oc-aide, .oc-dept, .oc-team { position: relative; }
.oc-aide::before, .oc-dept::before, .oc-team::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: var(--oc-lw) solid var(--oc-line); }
.oc-aide::after, .oc-dept::after, .oc-team::after { content: ""; position: absolute; top: var(--tick); left: 0; width: var(--arm); border-top: var(--oc-lw) solid var(--oc-line); }
:is(.oc-aide.last, .oc-dept:last-child, .oc-team:last-child)::before { bottom: auto; width: var(--arm); height: calc(var(--tick) + var(--oc-lw)); border-bottom: var(--oc-lw) solid var(--oc-line); border-bottom-left-radius: 8px; }
:is(.oc-aide.last, .oc-dept:last-child, .oc-team:last-child)::after { display: none; }

/* 直屬所長（秘書）：掛在所長底下的一小格，幾位都放同一格；每個人一小塊——姓名一行、底下「職稱・直屬誰」一行（有金額再一行） */
.oc-aide { --tick: 36px; margin-left: var(--ind); padding: 12px 0 0 var(--arm); }
.oc-aidebox {
  width: fit-content; max-width: 100%; padding: 6px var(--sp-3);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow);
}
.oc-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); min-width: 0; }
.oc-chips > li { min-width: 0; }
.oc-chips .oc-amt { display: block; }

/* 部：一個托盤（部長那一條＋底下的組）。部長那一條：左邊部名（標題）、底下一行「部長 ○○○・職稱」，右邊「N 組・N 人」；有金額再多一列 */
.oc-dept { --tick: 44px; margin-left: var(--ind); padding: 14px 0 0 var(--arm); }
.oc-tray { position: relative; padding: var(--sp-2); background: var(--seg-track); border: 1px solid var(--border-strong); border-radius: 14px; }
.oc-tray.mine { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }      /* 部長自己看：這是你的部 */
.oc-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cnt" "head cnt" "money money";
  align-items: center; align-content: center; gap: 0 var(--sp-3); padding: 7px 14px;
  background: var(--surface); border: 1px solid var(--border-strong); border-top: 3px solid var(--primary);
  border-radius: 10px; box-shadow: var(--shadow);
}
.oc-dname { grid-area: name; overflow-wrap: anywhere; }      /* 部名很長：自己那一欄折行（org.tree 會先把字數算進這個部最少的寬度） */
.oc-dhead { grid-area: head; min-width: 0; overflow-wrap: break-word; }
.oc-dcnt { grid-area: cnt; white-space: nowrap; }
.oc-banner .oc-money { grid-area: money; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); margin-top: 2px; }
.oc-banner .oc-money .oc-bar { flex: 1 1 40px; min-width: 40px; }

/* 組：一張小卡（組長在上、組員在下、最底下一條細條）。組長那一段靠淡底色區分（不加粗）；「部長直屬」那張卡那一段沒有底色、底線是虛線。
   每個人一小塊：姓名一行（內文），底下是註記——職稱（組長多「・N 人」）、「直屬 ○○」、金額；卡片夠寬時註記排同一行、金額靠右 */
.oc-team { --tick: 34px; display: flex; flex-direction: column; margin-left: 9px; padding: 8px 0 0 var(--arm); }
.oc-card {
  flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
}
.oc-team.mine .oc-card { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-raised); }   /* 你在這一組 */
.oc-lead, .oc-members > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
:is(.oc-lead, .oc-members > li) > .oc-nm { flex: 0 0 100%; }
:is(.oc-lead, .oc-members > li) > .oc-meta { white-space: nowrap; }
:is(.oc-lead, .oc-members > li) > .oc-amt { margin-left: auto; text-align: right; }
.oc-lead { padding: 6px 10px; background: var(--neutral-bg); border-bottom: 1px solid var(--border); }
.oc-lead.direct { background: transparent; border-bottom-style: dashed; border-bottom-color: var(--border-strong); }
.oc-members { flex: 1 1 auto; padding: var(--sp-1) 0; }
.oc-members > li { padding: 3px 10px; }
.oc-foot { --fp: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 6px; padding: 7px var(--fp) var(--sp-2); border-top: 1px solid var(--border); }
.oc-foot .oc-amt { grid-column: 1 / -1; justify-self: end; text-align: right; }
/* 部長直屬那張卡的「含部長本人」寫在分隔線上（字在左、線從字後面接到卡片右邊），不另外佔一列——分隔線、細條都和隔壁的卡同高。
   這一格 13px 高＋下面 1px 列距、線在正中間＝細條那一列上面 8px，就是別張卡上框線的位置（1px 框＋7px 內距）；改內距要一起改 */
.oc-foot.incl { padding-top: 0; border-top: 0; }
.oc-foot .oc-incl { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; height: 13px; margin-right: calc(-1 * var(--fp)); line-height: 1; }
.oc-foot .oc-incl::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--border); }

/* 行政部：虛線框的支援單位，不在任何一個托盤裡；掛在某個部底下時從那個部的左下角拉一條虛線。
   名單一人一列（下一層縮排、畫小轉角），姓名右邊接職稱——這裡職稱不放下面：一列一個人，層次才看得出來 */
.oc-support { position: relative; margin: 12px 0 0 var(--arm); padding: 9px var(--sp-3) 10px; background: var(--surface); border: var(--oc-lw) dashed var(--oc-line); border-radius: 10px; }
.oc-dept > .oc-support::before {
  content: ""; position: absolute; top: -14px; left: calc(4px - var(--arm)); width: calc(var(--arm) - 6px); height: 40px;
  border-left: var(--oc-lw) dashed var(--oc-line); border-bottom: var(--oc-lw) dashed var(--oc-line); border-bottom-left-radius: 8px;
}
.oc-under > .oc-support { margin: 0; }
.oc-support.vacant { max-width: 36em; }
.oc-sup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.oc-sup-head .oc-dname { white-space: nowrap; }
.oc-sup-list { margin: var(--sp-1) 0; }
.oc-sup-kids { padding-left: var(--sp-3); }
.oc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.oc-row > .oc-nm { overflow: visible; }
.oc-sup-kids > li > .oc-row::before {      /* 下一層的小轉角 */
  content: ""; flex: none; align-self: flex-start; width: 7px; height: 9px; margin-top: 3px;
  border-left: var(--oc-lw) solid var(--oc-line); border-bottom: var(--oc-lw) solid var(--oc-line); border-bottom-left-radius: 3px;
}
.oc-row .oc-amt { margin-left: auto; padding-left: var(--sp-2); }
.oc-row .oc-via { white-space: nowrap; }      /* 行政部最上層那幾位直屬不同人：各自寫「直屬 ○○」 */
.oc-sup-note { margin: 0; }

/* 圖例 */
.oc-under { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3) var(--sp-5); margin-top: 14px; }
.oc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) 18px; }
.oc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.oc-legend i { flex: none; display: inline-block; width: 26px; border-top: var(--oc-lw) solid var(--oc-line); }
.oc-legend i.lg-dash { border-top-style: dashed; }   /* 不叫 .dash／.sub／.bar：app.css 已經有同名的 class */
.oc-legend i.lg-bar { height: 4px; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--seg-paid) 55%, var(--bar-track) 55%); }
.oc-legend i.lg-mine { width: 16px; height: 11px; margin: 0 5px; border: var(--oc-lw) solid var(--primary); border-radius: 3px; }   /* 自己那一組／那個部的深色框 */
.oc-after { margin: 0 0 6px; }
details.oc-levels > div > .prose { margin-top: 0; }

/* ---- 內容區 609px 以上（視窗超過 640px）：組改成一排排卡片（放不下自動換行；7～9 個組也只是多一排） ---- */
@container oc (min-width: 609px) {
  .oc-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
  .oc-team { margin-left: 0; padding: 0; }
  .oc-team::before, .oc-team::after { display: none; }
  .oc.with-money .oc-teams { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }   /* 顯示金額：卡片寬一點，職稱和金額排得進同一行 */
  .oc-support { width: fit-content; max-width: calc(100% - var(--arm)); }
  .oc-under > .oc-support { max-width: 100%; }
}

/* ---- 夠寬而且放得下（.oc.side）：畫成左右並排的樹 ----
   所長置中、各部左右並排；部長那一條、組長那一段是固定的最小高度（--h-banner、--h-lead），各部的卡片頂、組員那幾列才對得齊。
   高度照字的行高算（註記 18、內文 21、標題 24）：改內距、行高要重算這幾個數字 */
@container ocfit (min-width: 1100px) {
  .oc.side {
    --h-owner: 60px;         /* 所長那一格（最少）：內距 8＋姓名 24＋「所長」18＋內距 8＝58 */
    --g1: 40px;              /* 所長 → 部：連接線的高度 */
    --tp: 8px;               /* 托盤內距 */
    --hb: 60px; --hba: 0px;  /* 部長那一條：框 3＋內距 7＋部名 24＋部長那一行 18＋內距 7＋框 1；有哪個部的那一條有金額（.banner-amt），各部一起多兩行 */
    --h-banner: calc(var(--hb) + var(--hba));
    --g2: 28px;              /* 部長 → 組 */
    --hl: 52px; --hla: 0px; --hlv: 0px; --hll: 0px;   /* 組長那一段：內距 6＋姓名 21＋「職稱・N 人」18＋內距 6＋框 1；有金額（.lead-amt）、有「直屬 ○○」（.lead-via）各多一行 18；有組長姓名很長、折成幾行（.ln1～.ln5）再加高 */
    --h-lead: calc(var(--hl) + var(--hla) + var(--hlv) + var(--hll));
    --g3: 24px;              /* 托盤 → 行政部 */
    --h-sup: calc(var(--sr, 3) * 21px + 9px);   /* 掛在部底下的行政部那一格：3 列以內 72px，4～12 列照列數加高（.sr4～.sr12；一列＝內文一行 21px）；再多就不掛在部底下（org.tree） */
  }
  .oc.side.banner-amt { --hba: 38px; }       /* 金額佔兩行（在職合計＋細條／部長本人）＋上面 2px */
  .oc.side.lead-amt { --hla: 18px; }
  .oc.side.lead-via { --hlv: 18px; }
  /* 組長姓名很長（外國人名）時姓名折成 n 行，每多一行 21px；行數由 org.tree 估（org.TREE_NAME_LINES） */
  .oc.side.ln1 { --hll: 0px; } .oc.side.ln2 { --hll: 21px; } .oc.side.ln3 { --hll: 42px; } .oc.side.ln4 { --hll: 63px; } .oc.side.ln5 { --hll: 84px; }
  .oc.side.sr4 { --sr: 4; } .oc.side.sr5 { --sr: 5; } .oc.side.sr6 { --sr: 6; } .oc.side.sr7 { --sr: 7; } .oc.side.sr8 { --sr: 8; }
  .oc.side.sr9 { --sr: 9; } .oc.side.sr10 { --sr: 10; } .oc.side.sr11 { --sr: 11; } .oc.side.sr12 { --sr: 12; }

  /* 第一列：所長置中、貼著這一列的底（線從他底下往下走），直屬所長的人用一條短橫線掛在右邊，人多就往上長 */
  .oc.side .oc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: end; min-height: var(--h-owner); }
  .oc.side .oc-owner { grid-column: 2; min-width: 372px; max-width: 640px; min-height: var(--h-owner); padding: var(--sp-2) 18px; }
  .oc.side .oc-aide { grid-column: 3; justify-self: start; display: flex; align-items: center; max-width: calc(100% - 44px); min-height: var(--h-owner); margin: 0 0 0 44px; padding: 0; }
  .oc.side .oc-aide::before { top: auto; right: 100%; bottom: calc(var(--h-owner) / 2 - 1px); left: auto; width: 44px; height: 0; border: 0; border-top: var(--oc-lw) solid var(--oc-line); border-radius: 0; }
  .oc.side .oc-aide::after { display: none; }
  .oc.side .oc-aidebox { padding: 5px var(--sp-3); }

  /* 所長 → 各部、部長 → 各組：兄弟之間的橫線＋往下的直線（每個 li 各畫左半、右半）。
     部的左右內距不一樣寬（--pl／--pr：第一個、最後一個貼邊，掛著行政部的那一邊多留 16px 給虛線），往下的直線要對準托盤正中間，所以偏 --dx */
  .oc.side .oc-depts { position: relative; display: flex; align-items: stretch; padding-top: calc(var(--g1) / 2); }
  .oc.side .oc-depts::before, .oc.side .oc-teams::before { content: ""; position: absolute; top: 0; left: 50%; margin-left: -1px; border-left: var(--oc-lw) solid var(--oc-line); }
  .oc.side .oc-depts::before { height: calc(var(--g1) / 2); }
  .oc.side .oc-teams::before { height: calc(var(--g2) / 2); }
  /* 每個部最少的寬度＝下面兩個取大的（和 org.tree 算 need 的是同一組數字）：
     --tmin＝放得下卡片：卡片數（.n1～.n12）× 110＋14（org.TREE_CARD_WIDTH）；多出來的寬度也照卡片數分
     --tmin2＝放得下部長那一條：240px（org.TREE_TRAY_MIN）；部名、部長姓名長的（或那一條有金額），org.tree 給 .tw1～.tw12，每級多 20px */
  .oc.side .oc-dept {
    --pl: 6px; --pr: 6px; --dx: calc((var(--pl) - var(--pr)) / 2); --tmin: 124px; --tmin2: 240px;
    display: flex; flex-direction: column; flex: 1 1 0; min-width: min(max(var(--tmin), var(--tmin2)) + var(--pl) + var(--pr), 100%); margin: 0; padding: calc(var(--g1) / 2) var(--pr) 0 var(--pl);
  }
  .oc.side .oc-dept:first-child { --pl: 0px; }
  .oc.side .oc-dept:last-child { --pr: 0px; }
  .oc.side .oc-dept.has-sup { --pl: 16px; }
  .oc.side .oc-dept.has-sup:only-child { --pr: 16px; }               /* 只有一個部：兩邊留一樣寬，線才是直的 */
  .oc.side .oc-dept.has-sup.sup-right { --pr: 16px; --pl: 6px; }
  .oc.side .oc-dept.n2 { flex-grow: 2; --tmin: 234px; } .oc.side .oc-dept.n3 { flex-grow: 3; --tmin: 344px; } .oc.side .oc-dept.n4 { flex-grow: 4; --tmin: 454px; }
  .oc.side .oc-dept.n5 { flex-grow: 5; --tmin: 564px; } .oc.side .oc-dept.n6 { flex-grow: 6; --tmin: 674px; } .oc.side .oc-dept.n7 { flex-grow: 7; --tmin: 784px; }
  .oc.side .oc-dept.n8 { flex-grow: 8; --tmin: 894px; } .oc.side .oc-dept.n9 { flex-grow: 9; --tmin: 1004px; } .oc.side .oc-dept.n10 { flex-grow: 10; --tmin: 1114px; }
  .oc.side .oc-dept.n11 { flex-grow: 11; --tmin: 1224px; } .oc.side .oc-dept.n12 { flex-grow: 12; --tmin: 1334px; }
  .oc.side .oc-dept.tw1 { --tmin2: 260px; } .oc.side .oc-dept.tw2 { --tmin2: 280px; } .oc.side .oc-dept.tw3 { --tmin2: 300px; } .oc.side .oc-dept.tw4 { --tmin2: 320px; }
  .oc.side .oc-dept.tw5 { --tmin2: 340px; } .oc.side .oc-dept.tw6 { --tmin2: 360px; } .oc.side .oc-dept.tw7 { --tmin2: 380px; } .oc.side .oc-dept.tw8 { --tmin2: 400px; }
  .oc.side .oc-dept.tw9 { --tmin2: 420px; } .oc.side .oc-dept.tw10 { --tmin2: 440px; } .oc.side .oc-dept.tw11 { --tmin2: 460px; } .oc.side .oc-dept.tw12 { --tmin2: 480px; }
  .oc.side :is(.oc-dept, .oc-team)::before, .oc.side :is(.oc-dept, .oc-team)::after {
    content: ""; display: block; position: absolute; top: 0; bottom: auto; width: auto; border: 0; border-top: var(--oc-lw) solid var(--oc-line); border-radius: 0;
  }
  .oc.side .oc-dept::before, .oc.side .oc-dept::after { height: calc(var(--g1) / 2); }
  .oc.side .oc-team::before, .oc.side .oc-team::after { height: calc(var(--g2) / 2); }
  .oc.side :is(.oc-dept, .oc-team)::before { right: calc(50% - var(--dx, 0px)); left: -1px; }   /* 往左多 1px 蓋住接縫（寬度是小數時兩段中間會有一條細縫） */
  .oc.side :is(.oc-dept, .oc-team)::after { right: 0; left: calc(50% + var(--dx, 0px)); margin-left: -1px; border-left: var(--oc-lw) solid var(--oc-line); }
  .oc.side :is(.oc-dept, .oc-team):first-child::before { border-top-color: transparent; }
  .oc.side :is(.oc-dept, .oc-team):first-child::after { border-top-left-radius: 8px; }
  .oc.side :is(.oc-dept, .oc-team):last-child::before { border-right: var(--oc-lw) solid var(--oc-line); border-top-right-radius: 8px; }
  .oc.side :is(.oc-dept, .oc-team):last-child::after { display: none; }
  /* 只有一個部／一張卡：一條直線接下來，用右半那一段的直線（和上面那一段同一個位置；左半那一段的直線偏 1px，接起來會錯開） */
  .oc.side :is(.oc-dept, .oc-team):only-child::before { display: none; }
  .oc.side :is(.oc-dept, .oc-team):only-child::after { display: block; right: auto; border-top: 0; border-radius: 0; }

  /* 部長那一條：每個部一樣高（--h-banner），托盤一樣高，卡片頂、底都對齊；線從它正中間進出 */
  .oc.side .oc-tray { flex: 1 1 auto; display: flex; flex-direction: column; }
  .oc.side .oc-banner { min-height: var(--h-banner); }
  .oc.side .oc-banner .oc-own { flex-basis: 100%; }      /* 「部長本人」的金額固定另起一行（每個部那一條才一樣高） */
  .oc.side .oc-banner .oc-money .oc-bar { flex-basis: 20px; min-width: 20px; }
  .oc.side .oc-teams { position: relative; flex: 1 1 auto; display: flex; gap: 0; margin: 0 -2px; padding-top: calc(var(--g2) / 2); }
  .oc.side .oc-teams.ragged { align-items: flex-start; }    /* 只看得到其中幾組的細條、金額：別組的卡片不用跟著那一張拉高 */
  .oc.side .oc-team { --dx: 0px; flex: 1 1 0; min-width: 0; margin: 0; padding: calc(var(--g2) / 2) 2px 0; }
  /* 卡片窄：每個人那一小塊一律一行一項（姓名／職稱・人數／直屬 ○○／金額），不看放不放得下——每張卡同一項才在同一個高度。
     組長那一段每張卡一樣高（--h-lead），內容一律從上面排起（不置中）：有的卡多一行金額或「直屬 ○○」時，各卡的組長姓名還是同一個高度 */
  .oc.side :is(.oc-lead, .oc-members > li) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .oc.side :is(.oc-lead, .oc-members > li) > .oc-amt { margin-left: 0; text-align: left; }
  .oc.side .oc-lead { align-content: start; min-height: var(--h-lead); padding: 6px 7px; }
  .oc.side .oc-members { padding: 5px 0; }
  .oc.side .oc-members > li { padding: 3px 6px; }
  .oc.side .oc-foot { --fp: 7px; }

  /* 行政部：橫的一格（名稱｜名單｜直屬誰） */
  .oc.side .oc-support { display: flex; align-items: center; gap: var(--sp-4); width: max-content; max-width: 100%; margin: 0; padding: var(--sp-2) var(--sp-4); }
  .oc.side .oc-support::before { display: none; }
  .oc.side .oc-sup-head { flex: none; flex-direction: column; align-items: flex-start; }
  .oc.side .oc-sup-list { align-self: stretch; display: flex; flex-direction: column; justify-content: safe center; margin: 0; padding: 0 var(--sp-4); border-right: 1px solid var(--border); border-left: 1px solid var(--border); }
  .oc.side .oc-sup-note { max-width: 15em; }
  .oc.side .oc-support.vacant .oc-sup-note { max-width: 36em; }
  /* 掛在部底下（最上層都直屬同一位部長）：每個部底下留同樣高的一格，行政部貼在自己那個部的底，虛線從部長那一條的一端沿著托盤外面繞下來 */
  .oc.side.sup-in .oc-dept { padding-bottom: calc(var(--g3) + var(--h-sup)); }
  .oc.side .oc-dept > .oc-support { position: absolute; bottom: 0; left: 25px; max-width: none; height: var(--h-sup); padding: 0 var(--sp-4); }
  .oc.side .oc-bypass {
    display: block; position: absolute; z-index: 2; top: calc(var(--g1) / 2 + var(--tp) + 1px + var(--h-banner) / 2); bottom: calc(var(--h-sup) / 2 - 1px);
    left: 2px; width: calc(14px + var(--tp) + 1px); border: var(--oc-lw) dashed var(--oc-line); border-right: 0; border-radius: 10px 0 0 10px; pointer-events: none;
  }
  .oc.side .oc-dept.sup-right > .oc-bypass { right: 2px; left: auto; border-right: var(--oc-lw) dashed var(--oc-line); border-left: 0; border-radius: 0 10px 10px 0; }
  .oc.side .oc-dept.sup-right > .oc-support { right: 25px; left: auto; }

  /* 圖例：右下角；行政部掛在部底下時放進那一列空著的地方 */
  .oc.side .oc-under { flex-wrap: nowrap; margin-top: var(--g3); }
  .oc.side .oc-legend { flex-flow: column nowrap; align-items: flex-end; gap: 5px; margin-left: auto; white-space: nowrap; }
  .oc.side.sup-in .oc-under { align-items: center; min-height: var(--h-sup); margin-top: calc(-1 * var(--h-sup)); pointer-events: none; }
  .oc.side.sup-in.lg-left .oc-legend { align-items: flex-start; margin-right: auto; margin-left: 0; }
}
/* 列印的規則和全站的放在一起（檔案後面的 @media print） */

/* ================= 簽證進度表 ================= */
.sp {
  display: grid; grid-template-columns: minmax(10rem, 1.4fr) repeat(2, minmax(0, 2fr)); margin: 0 0 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-bottom-width: 0; border-radius: var(--radius); box-shadow: var(--shadow);
}
.sp-cell { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.sp-head { background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700; }
.phase {
  display: inline-flex; align-items: center; min-height: 22px; margin: 0 4px 4px 0; padding: 0 8px; border-radius: 999px;
  color: var(--text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
/* 簽證階段（B2-15 照開頭的狀態語意表）：進行中琥珀→藍、覆核完成藍→青，和申報進度、工單的同一個意思同一個顏色 */
.ph-未開始 { background: var(--mx-open); }
.ph-進行中 { background: var(--info-bg); }
.ph-被退回 { background: var(--danger-bg); }
.ph-待覆核 { background: var(--indigo-bg); }
.ph-覆核完成 { background: var(--cyan-bg); }
.ph-已出具 { background: var(--ok-bg); }

/* ================= 重點頁面（Phase 4）：頁首、區段跳轉、摘要列、分頁籤、紀錄抬頭、登入、錯誤頁 ================= */
/* 連結做成的按鈕（頁首動作用）：外觀和預設按鈕一樣 */
a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
  font-size: var(--fs-md); font-weight: 500; line-height: 1.2; white-space: nowrap; vertical-align: middle;
}
a.btn:hover { background: var(--hover-bg); text-decoration: none; }
a.btn.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
a.btn.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
a.btn:active { background: var(--seg-track); }
a.btn.btn-primary:active { background: var(--primary); border-color: var(--primary); }
/* 轉場（B1-4）：按鈕、連結按鈕、分頁籤、換頁同一個長度，只動顏色、框線、陰影（原本 a.btn 瞬間、button 漸變） */
button, a.btn, a.btn-primary, .btn-link, .mode-bar a, .pager-per a {
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
a.btn .ic, button .ic, .btn-link .ic { width: 16px; height: 16px; }

/* 頁首：標題＋副標（左）＋動作（右） */
/* B2-19：副標一長，右上的「匯出 Excel」「‹ 115 年 9 月 ›」會被擠到標題下面靠左；標題區先拿 24rem、動作區一律靠右。
   動作區可以縮（不是 flex:none）：手機上整排按鈕比畫面寬時在自己那一行裡換行，不撐破頁面。flex-wrap 保留（641～1000px 標題才不會被擠窄） */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; }
.page-head > :first-child { flex: 1 1 24rem; min-width: 0; }
.content .page-head h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.35; }
.page-sub { max-width: 48em; margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-md); }   /* 一行 80 字以上讀到行尾容易跳錯行 */
.page-sub strong { color: var(--text); }
.page-actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
/* 定義、用法類的長說明段落（各組完成率、申報進度、組織圖、收入總表）：行長收在 46 個字 */
.prose { max-width: 46em; line-height: 1.7; }
.page-actions .quick button { min-height: 32px; padding: 0 12px; font-size: var(--fs-md); box-shadow: var(--shadow); }
.back-link { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 0 0 8px; color: var(--text-muted); font-size: var(--fs-md); }
.back-link:hover { color: var(--text); }

/* 區段標題列：標題＋計數＋右側動作 */
.sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 28px 0 10px; }
.content .sec-head h2, .content .sec-head h3 { margin: 0; font-size: var(--fs-lg); }
.sec-head .h-note, .pane-bar .h-note { color: var(--text-muted); font-size: var(--fs-md); font-weight: 400; }
.count-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 6px; padding: 0 7px;
  border-radius: 999px; background: var(--neutral-bg); color: var(--neutral); font-size: var(--fs-xs); font-weight: 600; vertical-align: 2px;
}
.count-pill.hot { background: var(--danger-bg); color: var(--danger); }
.count-pill.due { background: var(--surface); color: var(--primary); box-shadow: inset 0 0 0 1px var(--gold-line); }   /* 輪到你處理（B2-17）：深藍字＋金框，不用紅 */
.panel + .sec-head, .table-wrap + .sec-head { margin-top: 24px; }
.panel.section { margin: 0 0 16px; }
.panel > :last-child, .panel > form:last-child > :last-child { margin-bottom: 0; }
.panel .bulk-bar { box-shadow: none; background: var(--surface-2); }

/* 區段跳轉（工單頁、客戶頁）：黏在頂部列下面，捲動時標出目前所在的區段 */
.section-nav {
  position: sticky; top: var(--topbar-h); z-index: 20;
  display: flex; gap: 4px; margin: 0 -28px 18px; padding: 0 28px;
  overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--border);
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 10px 10px 9px;
  border-bottom: 2px solid transparent; color: var(--text-muted); font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
}
.section-nav a:hover { color: var(--text); text-decoration: none; }
.section-nav a.on { color: var(--text); font-weight: 700; border-bottom-color: var(--gold-line); }
.section-nav .count-pill { margin-left: 0; }
html:has(.section-nav) { scroll-padding-top: calc(var(--topbar-h) + 58px); }

/* 摘要列（工單頁）：一排「名稱／值」，換行時分隔線仍整齊 */
.facts {
  display: flex; flex-wrap: wrap; overflow: hidden; margin: 0 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.facts > div { flex: 1 1 140px; min-width: 0; margin: -1px 0 0 -1px; padding: 10px 16px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.facts dt { margin: 0 0 3px; color: var(--text-muted); font-size: var(--fs-xs); }
.facts dd { margin: 0; color: var(--text); font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.facts dd .muted { font-size: var(--fs-sm); font-weight: 400; }

/* 紀錄抬頭（客戶頁） */
.record-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px;
  margin: 0 0 16px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.record-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.record-mark {
  flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); font-size: var(--fs-xl); font-weight: 700;
}
.content .record-head h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.35; }
.record-no { margin-right: 8px; color: var(--text-muted); font-weight: 600; }
.record-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; color: var(--text-muted); font-size: var(--fs-md); }
.record-meta b { color: var(--text); font-weight: 500; }
.pill {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--neutral-bg); color: var(--neutral); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; vertical-align: 3px;
}
.pill.status-現行 { background: var(--ok-bg); color: var(--ok); }
.pill.status-終止 { background: var(--danger-bg); color: var(--danger); }
.pill.status-暫停 { background: var(--warn-bg); color: var(--warn); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin: 0 0 16px; }
.cols > .panel { margin: 0; }
.cols .grid { margin: 0; }
/* 小卡（客戶頁、年度申報…）：卡片少，不拉滿整排，每張 150～220px */
.cards.mini { grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); margin-bottom: 16px; }
.cards.mini .card b { font-size: var(--fs-lg); }

/* KPI 卡片可以點（工作台：跳到對應的待辦分頁） */
a.card { text-decoration: none; transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); text-decoration: none; }
a.card.hot:hover { border-color: var(--danger); }
a.card.due:hover { border-color: var(--gold-line); }
.card > .ic { float: right; width: 18px; height: 18px; margin: 2px 0 0 8px; color: var(--faint); }
.card.hot > .ic { color: var(--danger); }
/* 新指派給我（2026-09-30）：不是問題、是提醒，用藍色和紅色的「要處理」分開（工作台 10/14 改成分頁、.panel.fresh 拿掉；
   .card.fresh 商務中心總覽「90 天內到期」還在用） */
.card.fresh { border-color: var(--info-line); box-shadow: inset 3px 0 0 var(--info), var(--shadow); }
.card.fresh b, .card.fresh > .ic { color: var(--info); }
a.card.fresh:hover { border-color: var(--info); }
.tag.fresh { background: var(--info-bg); color: var(--info); text-decoration: none; }   /* 我要完成的：新指派、還沒點開 */
/* 我要完成的：分「有到期日」「沒有到期日」兩段 */
.pane-sub { margin: 18px 0 8px; font-size: var(--fs-md); }
.pane-sub small { margin-left: 8px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.pane-bar + .pane-sub { margin-top: 4px; }
/* 卡片的提示字（B2-18）：不折行，放不下就「…」，一張卡的提示字折行會讓整排一起變高；不要改成 block（每張卡多一行） */
.card .hint { display: inline-block; max-width: 100%; overflow: hidden; color: var(--link); white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }
/* 工作台清單：勾選一次完成的勾選欄、換頁列（2026-09-30：第 2／7 頁、上一頁／下一頁、每頁 20／50／100 張） */
th.sel, td.sel { width: 1%; padding-right: 0; }
th.sel input, td.sel input { width: 17px; height: 17px; margin: 0; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -6px 0 16px; color: var(--text-muted); font-size: var(--fs-md); }
.pane-bar .pager { margin: 0; }
.pager-nav { display: inline-flex; gap: 6px; }
.pager .btn {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); box-shadow: none; font-size: var(--fs-md); white-space: nowrap;
}
.pager span.btn[aria-disabled] { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); cursor: not-allowed; }   /* 原 --faint 只有 2.54（B2-8） */
.pager-per { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.pager-per a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px; padding: 0 6px; border-radius: 6px; }
.pager-per a:hover { background: var(--seg-hover); text-decoration: none; }
.pager-per a.on { background: var(--seg-track); color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
  th.sel input, td.sel input { width: 20px; height: 20px; }   /* 手機：勾選框、換頁按鈕大一點，手指點得到 */
  .pager .btn, .pager-per a { min-height: 36px; }
}

/* 工作台進度條（所長 2026-09-30：原本的靜態流程圖改成依角色的即時進度）：一排格子＝一批單的張數，格子之間用箭頭連起來；
   每格是連結（a.flow-step），有要處理的（被退回、逾期、等我覆核…）用紅色，和 KPI 卡一樣。窄一點改成兩三欄、不畫箭頭 */
.flow { margin: 0 0 6px; }
.flow-head { margin: 0 0 6px; color: var(--text); font-size: var(--fs-md); font-weight: 700; }
.flow ol { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.flow li { position: relative; flex: 1 1 0; min-width: 0; }
.flow li + li::before {
  content: "→"; position: absolute; top: 50%; left: -17px; transform: translateY(-50%);
  color: var(--border-strong); font-size: var(--fs-lg); line-height: 1;
}
a.flow-step {
  display: block; height: 100%; padding: var(--sp-2) var(--sp-3);   /* B3-2：內距收小（所長 9/30 指定的格子內容不動） */
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
a.flow-step:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); text-decoration: none; }
.flow-name { display: block; color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.flow-n { display: block; white-space: nowrap; }
.flow-n b { color: var(--text); font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.flow-amt { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
a.flow-step.hot { border-color: var(--danger-line); box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
a.flow-step.hot b { color: var(--danger); }
a.flow-step.hot:hover { border-color: var(--danger); }
/* 輪到你處理（B2-17，伺服器給 level＝due）：深藍字＋金色左條；紅色只給出問題的 .hot */
a.flow-step.due { box-shadow: inset 3px 0 0 var(--gold-line), var(--shadow); }
a.flow-step.due b { color: var(--primary); }
a.flow-step.due:hover { border-color: var(--gold-line); }
.flow-help ol.flow-steps, .flow-help ul { margin: 4px 0 10px; padding-left: 22px; }
.flow-help li + li { margin-top: 3px; }
@media (max-width: 1100px) {
  .flow ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .flow li + li::before { content: none; }
}
/* 工作台右欄的小卡片、卡片標題右側的連結 */
.dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pane-sub .h-link { float: right; margin-left: 12px; font-size: var(--fs-md); font-weight: 400; }
.panel h3 .h-link { order: 2; margin-left: auto; font-size: var(--fs-md); font-weight: 400; }   /* 卡片標題是 flex（B2-19）：連結排在說明前面、靠右 */

/* 分頁籤（工作台的待辦）：沒有 JS 時各區照順序全部顯示 */
.tabs { display: flex; gap: 2px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] {
  flex: none; min-height: 40px; margin-bottom: -1px; padding: 0 12px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--text-muted); font-size: var(--fs-md); font-weight: 500;
}
.tabs [role="tab"]:hover { background: transparent; color: var(--text); }
/* 分頁籤、區段跳轉的容器會橫向捲動，焦點框畫在外面會被裁掉上下 4px：改畫在裡面（B1-2） */
.tabs [role="tab"]:focus-visible, .section-nav a:focus-visible { outline-offset: -2px; border-radius: 4px; }
.tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--gold-line); color: var(--text); font-weight: 700; }
.tabbox.tabs-on .pane-title { display: none; }
.pane-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 10px; }
.pane-bar:empty { display: none; }

/* 篩選工具列、說明摺疊 */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.toolbar input[type=search] { flex: 1 1 160px; max-width: 240px; }
.toolbar .end { margin-left: auto; }
details.help { margin: -6px 0 14px; }
details.help > summary { width: fit-content; color: var(--link); font-size: var(--fs-md); }
details.help > div { margin-top: 8px; padding: 12px 14px; background: var(--info-bg); border: 1px solid var(--info-line); border-radius: 8px; color: var(--text); font-size: var(--fs-md); line-height: 1.7; }
details.help > div > :last-child { margin-bottom: 0; }
/* 報價單頁上方的「流程走到哪、下一步按哪一顆」（所長 2026-10-30，1029 整體 UX 現況）；層次用粗細顏色，不另加字級 */
.next-step { margin: -4px 0 16px; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--surface-2); border-radius: 0 8px 8px 0; color: var(--text); }
.next-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.next-step .ns-steps { color: var(--text-muted); white-space: nowrap; }
.next-step .ns-steps .arr { padding: 0 6px; }
.next-step .ns-steps .done { color: var(--ok); }
.next-step .ns-steps .now { color: var(--text); font-weight: 700; }
.next-step .ns-next { font-weight: 700; }

/* 表格欄位：表頭不折行；名稱欄給最小寬度，短欄位不折行 */
thead th { white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* 多行文字（合約備註、客戶備註）：保留換行，太長照常折行（2026-10-01 UX 報告 3.3 第 8 條） */
.pre-line { white-space: pre-line; }
td.cell-name { min-width: 10em; }
td.cell-title { min-width: 8.5em; }
td.cell-staff { min-width: 4.5em; }
/* 各組完成率的組別欄：「> 鍾采芝組」不折行、部門照改前排第二行，箭頭放進左內距（不佔欄寬）。12 欄卡在 64rem 內，
   表格字級 13.5→14 之後沒有餘裕，組名原本被拆成「鍾采芝／組」三行（頁高 +259px）。
   不用 table:has(…) 指定這張表：工單列表也有 td.cell-staff，幾千列邊解析邊重算 :has，整頁十分鐘載不完（10/02 自檢實測） */
.cell-staff > details > summary { white-space: nowrap; }   /* 姓名、組名不折行（B2-11）；展開後的組員表照常 */
td.cell-staff:first-child { padding-right: 10px; }
td.cell-staff:first-child > details > summary { position: relative; white-space: nowrap; }
td.cell-staff:first-child > details > summary::before { position: absolute; left: -10px; top: .75em; margin: 0; }
td.cell-staff:first-child > details > summary .muted { display: block; white-space: normal; }
/* 收入總表（.mx-wrap 裡不是 .mx 的那張表）：表格字級 13.5→14（B1-6）之後，業務別、同事、組別拆成兩行、1440 寬多出 10px 橫捲。
   第一欄不折行；14 欄的左右內距 12→8px */
.mx-wrap > table:not(.mx) > tbody > tr > td:first-child, .mx-wrap > table:not(.mx) > tfoot > tr > th:first-child { white-space: nowrap; }
.mx-wrap > table:not(.mx) > * > tr > :is(th, td) { padding-left: 8px; padding-right: 8px; }
/* 長句子的欄（/org「層級與權限」的範圍、能做的事，/staff/org 的「目前在」）：中文每個字都能折行，手機上 auto 表格會把這些欄壓到一兩個字寬、
   一列高到 600～900px（驗證回報 2026-10-01）；手機上給最小寬度，放不下就在 .table-wrap 裡橫向捲。
   只在手機寬度加：桌機（1200 寬）組織設定表剛好放得下，加了反而要橫向捲 */
@media (max-width: 640px) {
  td.cell-text { min-width: 16em; }
  td.cell-where { min-width: 11em; }
}
/* 欄位多的清單（工單、待請款）：列距與左右內距收窄，1440 寬的螢幕放得下一整列。
   B2-9 再收一點（列高 40～43→約 36px，一屏多 15% 的列）：只動長清單，全域 th、td 不動 */
table.dense th, table.dense td { padding: 6px 8px; }
table.dense th:first-child, table.dense td:first-child { padding-left: 12px; }
table.dense td button:not(.vc) { min-height: 24px; }   /* 列內按鈕原本 28px 把列撐高；申報進度的狀態格子另外算 */
table.dense .filter-row td { padding: 4px 8px; }        /* 逐欄篩選列原本在 4 張長表上永遠佔 45px */
table.dense .filter-row input { height: 26px; }
.filter-row input { min-width: 3.5em; }
/* 批次工具列：勾了之後變醒目、黏在畫面底部（B2-10）。原本黏在頂部列下面，會蓋住固定的表頭。
   批次列寫在表格上面，用 bottom 黏不住（往下捲時它在畫面上方，不會被拉回來）；改用 top＝畫面高度減一條批次列：
   勾了以後它留在原位的空間不變（不會跳版），本身浮到畫面底部，捲到清單結尾就停在清單後面（要有 .bulk-wrap 留的空白，見下一條）。
   --bulk-dock 是一行高的批次列＋8px；比較窄的寬度批次列會折成兩三行，在響應式裡改大 */
form.contents { display: contents; }   /* 批次表單只包工具列，工具列要能在整張表格範圍內黏住 */
.bulk-bar.has-sel {
  position: sticky; top: calc(100vh - var(--bulk-dock)); bottom: var(--sp-2); z-index: 15;
  border-color: var(--gold-line); box-shadow: var(--focus-ring), var(--shadow-pop);
}
.bulk-bar.stay.has-sel { position: static; }   /* 客戶頁刪工單：清單短，勾了留在原位、不浮到畫面底部（所長 2026-10-31） */
/* 批次列和它的清單外面那一層（工單列表的 .bulk-wrap；工作台各分頁、待請款、請款單、代收代付由模板加上）：
   結尾留一條批次列的高度，浮在底部的批次列捲到最後才不會蓋住最後一列（sticky 只能在外層的內容範圍裡移動，padding 不算） */
.bulk-wrap::after { content: ""; display: block; height: var(--bulk-dock); }
/* 0 張時主鈕降階（B2-4）：「完成勾選的（0）」原本是實心深藍，按了才跳提醒。只套在有勾選計數的批次列（app.js 加 .has-count），
   匯入、設定這類也用 .bulk-bar 的表單主鈕不受影響（不能寫成 .bulk-bar:not(.has-sel) .btn-primary） */
.bulk-bar:not(.has-sel).has-count .btn-primary { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
.bulk-bar:not(.has-sel).has-count .btn-primary:hover { background: var(--hover-bg); border-color: var(--border-strong); color: var(--text); }
.bulk-bar:not(.has-sel).has-count .btn-primary .count-pill { background: var(--neutral-bg); color: var(--neutral); }
/* 有勾選計數的批次列，主鈕不做轉場：一進頁面 app.js 加 .has-count 就降階，顏色轉場的那幾個畫面每一格都要重畫整張表——
   工單列表 6,958 列在 1440 寬（表格在框裡橫捲）多畫 2～3 次、每次 360～860ms（10/02 第二批自檢 js-r1-1，trace 量的）；
   勾掉最後一張時也一樣。只是 0.12 秒的淡入淡出，拿掉 */
.bulk-bar.has-count .btn-primary { transition: none; }

/* 登入頁：左邊品牌、右邊表單 */
.login-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(900px, 100%); min-height: 500px; margin: auto; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-pop);
}
.login-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 36px; background: var(--sb-bg); color: var(--sb-text); }
.login-brand .sb-mark { width: 40px; height: 40px; border-radius: 10px; font-size: var(--fs-xl); }
.login-brand h1 { margin: 18px 0 6px; color: var(--sb-text-strong); font-size: var(--fs-2xl); letter-spacing: .08em; }
.login-brand p { margin: 0; line-height: 1.8; }
.login-brand ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-md); line-height: 2.1; }
.login-brand li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; border-radius: 50%; background: var(--sb-gold); }
.login-brand small { color: var(--sb-text); opacity: .75; }
.login-form { display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; }
.content .login-form h2 { margin: 0 0 4px; font-size: var(--fs-xl); }
.login-form .page-sub { margin: 0 0 22px; }
.login-form label { display: block; margin: 0 0 16px; color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.login-form input:not([type=hidden]) { display: block; width: 100%; height: 40px; margin-top: 6px; font-weight: 400; }
.login-form .btn-primary { width: 100%; min-height: 40px; margin-top: 4px; font-size: var(--fs-md); }
.login-form .muted { margin: 16px 0 0; font-size: var(--fs-sm); }

/* 工單頁：勾完清單的提示、覆核進度、清單的階段標題、表單底部按鈕 */
div.ok { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--ok-line); border-left: 4px solid var(--ok); border-radius: 8px; background: var(--ok-bg); color: var(--ok); line-height: 1.6; }
.ready-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--fs-md); font-weight: 600; }   /* 14.5 是半階（B1-6） */
.ready-bar form { display: inline; margin: 0; }
.ready-bar .muted { font-size: var(--fs-md); font-weight: 400; }
.steps {
  display: flex; flex-wrap: wrap; overflow: hidden; margin: 0 0 16px; padding: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.steps li { position: relative; flex: 1 1 170px; min-width: 0; margin: -1px 0 0 -1px; padding: 11px 14px 11px 44px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
.steps li::before {
  content: ""; position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; display: grid; place-items: center;
  border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface);
  color: var(--on-primary); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.steps li.done::before { content: "✓"; border-color: var(--ok); background: var(--ok); }
/* 目前這一步（B3-8）：原本只多一圈很淡的金色。實心深金點＋外圈、字加粗，後面寫「目前」（模板另有 aria-current="step"，
   報讀軟體念那個，這裡的字用 CSS 替代文字設成空的，不念兩次；不支援替代文字的瀏覽器用第一行） */
.steps li.now::before { border-color: var(--focus); background: var(--focus); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--focus); }
.steps li.now b { font-weight: 700; }
.steps li.now b::after { content: "・目前"; content: "・目前" / ""; font-weight: 400; color: var(--text-muted); }
.steps b { display: block; font-size: var(--fs-md); }
.steps li.done b { color: var(--ok); }
.steps span { color: var(--text-muted); font-size: var(--fs-sm); }
.check-stage { margin: 14px 0 6px; font-size: var(--fs-md); }
.check-stage .muted { margin-left: 6px; font-size: var(--fs-xs); }
.form-actions { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; }
.edit-form.panel h3 { margin: 18px 0 4px; }
fieldset.plain { min-width: 0; margin: 0; padding: 0; border: 0; }
.panel .table-wrap { box-shadow: none; }

/* 報價單看板：五欄，窄螢幕橫向捲 */
.board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.board-col { min-width: 0; padding: 10px; background: var(--seg-track); border-radius: var(--radius); }
.content .board-col h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 2px 10px; font-size: var(--fs-md); }
.board-col h3 small { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; white-space: nowrap; }
.board-card {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); color: var(--text);
}
.board-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); text-decoration: none; }
.board-card.stale { box-shadow: inset 3px 0 0 var(--bar-soon), var(--shadow); }
.bc-client { font-weight: 600; }
.bc-title, .bc-staff { color: var(--text-muted); font-size: var(--fs-sm); }
.bc-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.board-empty { padding: 14px 0; color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
@media (max-width: 1100px) { .board { grid-template-columns: repeat(5, 230px); } }

/* 申報進度看板：狀態格子、改狀態的小選單（六期卡片 2026-10-26 改成 .fp-cards 同一種，樣式在檔案最後「營業稅向營所稅看齊」） */
.vat-table th.cur { color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.vc {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.6em; min-height: 30px;
  padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; box-shadow: none;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
}
button.vc { cursor: pointer; }
a.vc:hover, button.vc:hover { filter: brightness(.96); text-decoration: none; }
a.vc:active, button.vc:active { filter: brightness(.92); }   /* 按下（B1-4）：格子靠底色表示狀態，不換底色、只暗一階；寫在 hover 後面才勝出 */
.vc small { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }   /* 原 10.5px 再打 8 折透明，是申報進度整頁最多的字 */
.vs-none { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
.vs-docs { background: var(--info-bg); color: var(--info); }
.vs-ready { background: var(--indigo-bg); color: var(--indigo); }
.vs-filed { background: var(--ok-bg); color: var(--ok); }
/* B2-15 第一步（照開頭的狀態語意表）：覆核完成琥珀→青（工單的覆核完成之後也會是青）；綠虛線框＝算完成、但不是看板上一步一步按的
   （原本是「依工單完成」，10/07 看板六步驟拿掉了；現在是「上線前已申報」的補登期別）；不用申報改成透明底、灰字、細框（原本淡灰字 2.31:1） */
.vs-wo { background: var(--ok-bg); color: var(--ok); border-style: dashed; border-color: var(--ok-line); }
.vs-wait { background: var(--warn-bg); color: var(--warn); }
.vs-na { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--faint-line); }
.vs-rev { background: var(--cyan-bg); color: var(--cyan); border-color: var(--cyan-line); }
.vs-deliv { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); box-shadow: inset 3px 0 0 var(--ok); }
.vc-sub { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; }
.vc-sub.done { color: var(--ok); }
/* 逾期的格子（B2-16）：框加粗用內陰影，不改框線寬度（會跳版）；高對比模式不畫陰影，改雙線框。格子裡不再塞「逾期」字（已經三行），按鈕 title 寫 */
.vc.overdue { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); color: var(--danger); }
@media (forced-colors: active) {
  .vc.overdue { border-style: double; border-width: 3px; }
}
.vat-menu {
  position: absolute; z-index: 60; display: flex; flex-direction: column; gap: 4px; width: 13rem; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop);
}
.vat-menu[hidden] { display: none !important; }
.vat-menu .vc { width: 100%; min-height: 28px; }
.vm-title { margin: 0 2px; color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }   /* 下面接 .vm-detail（B3-12） */

/* 錯誤頁、權限不足：置中的空狀態卡 */
.empty-state {
  max-width: 34rem; margin: 8vh auto 24px; padding: 32px 32px 28px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.empty-ic { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--warn-bg); color: var(--warn); }
.empty-ic.neutral { background: var(--neutral-bg); color: var(--neutral); }   /* 404、403 不是警告（B2-22）：中性灰；只有 400 用琥珀 */
.empty-ic .ic { width: 26px; height: 26px; }
.content .empty-state h2 { margin: 0 0 10px; font-size: var(--fs-xl); }
.empty-state p { margin: 0 0 10px; }
.empty-state p.warn { text-align: left; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

/* 原因對話框（B2-26，app.js 用到才建一個共用的 <dialog>）：取代瀏覽器的 prompt()——標題是網址、只有一行、看不到是哪一張單 */
.reason-dialog {
  width: min(30rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.reason-dialog::backdrop { background: var(--backdrop); }
.reason-dialog form { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-5); }
.reason-dialog h2 { margin: 0; font-size: var(--fs-lg); line-height: 1.45; }
.reason-dialog textarea { width: 100%; min-height: 6.5rem; }
.reason-dialog p { margin: 0; font-size: var(--fs-sm); }
.reason-dialog p:empty { display: none; }
.reason-dialog .rd-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ================= 第二批元件（2026-10-02 UI 審查 B2）：模板的 inline style 換成這些 class ================= */
/* 錯誤頁（B2-22）：權限規則收進 details.help，在置中的卡片裡摘要置中、內容靠左 */
.empty-state details.help { margin: 0 0 10px; }
.empty-state details.help > summary { margin: 0 auto; }
.empty-state details.help > div { text-align: left; }
/* 分頁籤放在篩選列、區段標題列裡（收入總表、洗錢防制）：不要自己的下邊距（取代 style="margin:0"） */
.toolbar .mode-bar, .sec-head .mode-bar { margin: 0; }
/* 空狀態的打勾（B2-25：取代彩色 🎉；E 的 billing_aging 也用） */
.ok-ic { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; color: var(--ok); }
/* 簽證進度沒有資料（取代 style="grid-column: 1 / -1"；原本的 .sp-cell.muted[style*="grid-column"] 一起刪） */
.sp-cell.sp-empty { grid-column: 1 / -1; padding: 12px 16px; text-align: center; }
/* 小一號的字（登記比對的地址欄；取代 style="font-size:.85rem"／12.5px） */
.small { font-size: var(--fs-sm); }
/* 批次列裡靠右的那一塊（洗錢防制的關卡模式；取代 style="display:inline; margin-left:auto"） */
.bulk-bar > .end { margin-left: auto; }
/* 表格格子裡的小篩選列式表單（洗防複核、登錄單筆查詢；取代 style="margin:0"／"margin:6px 0 0"） */
td .toolbar { margin: 0; }
td details > .toolbar { margin-top: 6px; }
/* 卡片裡第一個區段標題列不要上邊距（客戶頁「基本資料」「經濟部登記資料」、洗防客戶頁；取代 style="margin-top:0"） */
.panel > .sec-head:first-child { margin-top: 0; }
/* 說明摺疊裡的編號清單（取代 style="margin:0; padding-left:1.2rem"） */
details.help > div > ol:first-child, details.help > div > ul:first-child { margin-top: 0; }
details.help > div > :is(ol, ul) { padding-left: 1.2rem; }
/* 欄位說明裡的簡單條列（報價單頁「不能用登錄錯了更正」的原因清單；2026-10-12：模板用了這個名稱卻沒有定義） */
ul.plain-list { margin: 4px 0; padding-left: 1.2rem; }
ul.plain-list > li { margin: 2px 0; }
/* 「回上一層」連結的箭頭（B2-27：← 字元換成 chevron-left）和 13px 的字一樣大 */
.back-link .ic { width: 16px; height: 16px; }
/* 金額欄裡的輸入框靠右（價目表；取代 style="text-align:right"） */
td.num input { text-align: right; }
/* 文字連結裡的箭頭（B2-27：→ ← 字元換成 chevron；商務中心每月起租的年份切換、法定期限「看工單」） */
.ic.ic-inline { width: 14px; height: 14px; vertical-align: -2px; }
/* 法定期限：進度條、日期欄的寬度（取代 style="width:8rem"／"width:12rem"） */
td > progress { width: 8rem; }
th.w-date { width: 12rem; }
/* 換頁鈕裡的箭頭和字之間（B2-27；停用的換頁鈕是 span.btn，也要） */
.pager .btn { gap: 4px; }
/* 和文字同一行的摺疊（取代 style="display:inline"） */
details.inline, details.inline > summary { display: inline; }

/* ================= 響應式 ================= */
@media (max-width: 1200px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1240px) {
  /* 側欄佔掉 248px：工作台兩欄改一欄，右邊的橫條圖才有位置 */
  .dash { grid-template-columns: minmax(0, 1fr); }
}
/* 浮在底部的批次列（B2-10）：1280 以上（1440 以下側欄預設收合）各頁批次列都是一行（實測 50～52px）；
   1024 寬工單列表、銀行對帳折成兩行（82～92px），平板寬度可能三行。高度估大一點只是離底多一點，估小了下面會被切掉 */
@media (max-width: 1279.98px) { :root { --bulk-dock: 100px; } }
@media (max-width: 899.98px) { :root { --bulk-dock: 140px; } }
/* 桌機：側欄收成 68px 只剩圖示（頂部列的收合鈕；記在 localStorage landc.sb） */
@media (min-width: 900px) {
  html.sb-collapsed { --sb-w: 68px; }
  html.sb-collapsed .sb-brand { justify-content: center; padding: 0; }
  html.sb-collapsed .sb-brand-text, html.sb-collapsed .sb-text, html.sb-collapsed .sb-chev { display: none; }
  html.sb-collapsed .sb-nav { padding: 10px 8px; }
  html.sb-collapsed .sb-link, html.sb-collapsed .sb-summary { justify-content: center; padding: 0; }
  html.sb-collapsed .sb-items { padding-left: 0; }
  html.sb-collapsed .sb-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--sb-line); }
  html.sb-collapsed .sb-summary { min-height: 28px; opacity: .7; }
  html.sb-collapsed .sb-summary .ic { width: 16px; height: 16px; }
  html.sb-collapsed .sb-user { padding: 10px 8px; }
  html.sb-collapsed .sb-who { justify-content: center; padding: 4px 0 8px; }
}
/* 窄螢幕：側欄變成蓋在上面的抽屜（背景點一下或 Esc 關） */
@media (max-width: 899.98px) {
  .sidebar { width: 272px; visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility 0s linear .2s; }
  html.sb-open .sidebar { visibility: visible; transform: none; box-shadow: var(--shadow-pop); transition: transform .2s ease; }
  html.sb-open, html.sb-open body { overflow: hidden; }
  .sb-backdrop { position: fixed; inset: 0; z-index: 35; background: var(--backdrop); }
  .main-col { margin-left: 0; }
  .topbar { gap: 8px; padding: 0 12px 0 8px; }
  .tb-user { display: none; }
  .content { padding: 18px 16px 40px; }
  .main-col > .content::after { height: 40px; }   /* 頁尾留白照原本的 40px */
  .section-nav { margin: 0 -16px 16px; padding: 0 16px; }
}
@media (max-width: 640px) {
  .crumbs { display: none; }
  .tb-search { flex: 1 1 auto; }
  .tb-search input { padding-right: 10px; }
  .tb-kbd { display: none; }
  .grid, .edit-form .grid { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .grid dt { margin-top: 8px; }
  .hbar-row, .dl-row { grid-template-columns: 5rem minmax(0, 1fr) auto; }
  /* 手機：批次列折成好幾行，浮在底部會蓋掉半個畫面——不黏（UI 審查 B4-7 的方向），清單結尾也不用留空白 */
  .bulk-bar.has-sel { position: static; }
  .bulk-wrap::after { content: none; }
  /* 手機：KPI 卡兩張一排、頁首動作換到標題下面 */
  .cards, .cards.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head { align-items: flex-start; }
  /* 工作台進度條：手機也要看得到、點得到（原本改版前的靜態流程圖在這裡整條藏起來）——兩格一排、字小一點 */
  .flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a.flow-step { padding: 8px 10px; }
  .login-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .login-brand { padding: 24px; }
  .login-brand ul { display: none; }
  .login-form { padding: 28px 24px; }
  .facts > div { flex-basis: 120px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sb-chev, .content details > summary::before, .skip-link { transition: none; }
}
@media print {
  .sidebar, .topbar, .sb-backdrop { display: none !important; }
  .top-scrollbar, .pin-head { display: none !important; }       /* 表格上方的左右滑桿（2026-10-22）不印 */
  /* 營業稅格子（2026-10-26 樣張 VatUnify）：四個點照底色印；不用報這類畫面上是「—」，紙上印 title 的字（不用報・執行業務…） */
  .vat-progress td.vd::before, .vat-table td.vd.ov, .vat-legend .vq-late-key, .vat-legend .vq-st > .sg-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vat-table.vat-progress td.vd.na { font-size: 0; }      /* 權重 0,4,1：要蓋過畫面上的 .vat-table td.vd:is(.na, .vd-out)（0,3,1，寫在後面），紙上才不會印「—這一期不用申報」 */
  .vat-table.vat-progress td.vd.na::after { content: attr(title); color: var(--text-muted); font-size: var(--fs-xs); }
  .theme-toggle { display: none !important; }        /* 深色／淺色切換鈕（含登入頁右上角的 .theme-float）不印 */
  .main-col { margin-left: 0 !important; }
  body { background: var(--surface); }
  .content { max-width: none; padding: 0; }
  .main-col > .content::after { content: none; }
  .table-wrap, .mx-wrap { max-height: none; overflow: visible; box-shadow: none; }
  /* 組織圖：托盤、卡片、行政部不被分頁切開（切開時卡片最底下那一列會印不出來）；
     所長那一格、細條、組長那一段的淡底色照畫面的底色印——沒勾「背景圖形」時所長那格才不會變成白底白字、細條才不會不見 */
  .oc-owner, .oc-aidebox, .oc-tray, .oc-banner, .oc-card, .oc-support { break-inside: avoid; }
  .oc-owner, .oc-tray, .oc-banner, .oc-lead, .oc-bar, .oc-bar > b, .oc-legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .oc-actions { display: none !important; }          /* 「只看架構／顯示金額」切換與「組織設定」是操作用的，不印 */
  .skip-link { display: none !important; }           /* 「跳到主要內容」（全站）：原本會印在第一頁下面 */
  .oc-help:not([open]), .oc-levels:not([open]) { display: none; }   /* 收合著的兩段說明印出來只有一行標題：不印（打開的照印） */
  /* A4 橫向：整張圖縮到 85%——紙上的內容區約 1047px，÷0.85＝1232px，現在的編制（要 1100px）就印成一頁、所長選的那張樹；
     直向、或編制大到 1232px 放不下，照樣各部上下排（不缺東西，只是不是樹）。
     2026-10-13 字整理成三種之後職稱在姓名下面一行，圖比較高：原本的 90% 在「顯示金額」時會多出第二頁，改成 85% */
  @media (orientation: landscape) { .oc-wrap { zoom: .85; } }
}

/* ================= Phase 4b：其餘頁面換成新版元件後補的幾條 ================= */
/* 訊息橫幅裡的按鈕（郵局掛號「開始查詢」）：不要沿用橫幅連結的底線 */
p.ok a.btn, p.error a.btn, p.warn a.btn, div.warn a.btn, div.error a.btn { text-decoration: none; }
/* 可以收合的卡片（服務類型、郵局掛號的匯入）：打開時標題和內容隔開 */
details.panel[open] > summary { margin-bottom: 12px; }
/* 客戶列表：全欄位搜尋框放寬 */
.toolbar input[type=search].search-wide { flex-basis: 320px; max-width: 460px; }

/* ================= E：零用金、諮詢預約 ================= */
/* 零用金：登記支出的卡片和下面的撥補列隔開；流水表裡的「上傳／換單據」 */
.edit-form.panel + datalist + .toolbar, .edit-form.panel + .toolbar { margin-top: 12px; }
.edit-form.panel > h3:first-child { margin-top: 0; }
details.row-upload { display: inline-block; margin-left: 4px; }
.content details.row-upload > summary { font-size: var(--fs-sm); }
details.row-upload[open] > form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
/* 表格列裡就地修改（客戶頁的聯絡人，2026-10-01）：展開後欄位一行一個 */
details.row-edit { display: inline-block; }
details.row-edit > summary { list-style: none; cursor: pointer; }
details.row-edit > summary::-webkit-details-marker { display: none; }
details.row-edit[open] > form { display: grid; gap: 6px; min-width: 15rem; margin: 6px 0 4px; }
details.row-edit[open] > form label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; white-space: nowrap; }
details.row-edit[open] > form label input:not([type=checkbox]) { flex: 1 1 10rem; min-width: 0; }
/* 客戶頁聯絡人表：手機一位一張卡片，「修改」跟姓名同一行、不用在表格裡橫向滑；展開修改時表單換到下一行整寬（驗證回報 2026-10-01） */
@media (max-width: 640px) {
  table.contact-list thead { display: none; }
  table.contact-list, table.contact-list tbody { display: block; }
  table.contact-list tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  table.contact-list td { display: block; order: 2; flex: 1 1 100%; padding: 0; border: 0; }
  table.contact-list td:empty { display: none; }
  table.contact-list td[data-label]::before { content: attr(data-label) "："; color: var(--text-muted); }
  table.contact-list td.ct-seq { order: 0; flex: 0 0 auto; }
  table.contact-list td.ct-name { order: 0; flex: 1 1 auto; font-weight: 600; }
  table.contact-list td.ct-edit { order: 1; flex: 0 0 auto; }
  table.contact-list td.ct-edit:has(details[open]) { order: 3; flex: 1 1 100%; }
}
.panel > form.contents + .h-note { margin-left: 10px; }
/* 諮詢預約：一週七欄（沿用看板的欄與卡片），今天框金色；窄螢幕改四欄、手機一欄 */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.week .board-col { min-height: 132px; padding: 8px; }
.week .board-col.today { box-shadow: inset 0 0 0 2px var(--gold-line); }
.week .board-card { padding: 8px 10px; }
.board-card.appt .bc-meta { margin: 0 0 2px; }
.board-card.st-已完成 { box-shadow: inset 3px 0 0 var(--ok), var(--shadow); }
.board-card.st-取消, .board-card.st-未到 { opacity: .55; }
@media (max-width: 1100px) { .week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .week { grid-template-columns: minmax(0, 1fr); } .week .board-col { min-height: 0; } }

/* ================= 銀行對帳（2026-10-01，UX 報告 3.4 第 3 條）================= */
/* 狀態用語：只有找不到客戶、待確認客戶是紅的；待沖帳黃、已沖帳綠、標了處理方式灰 */
.stage.bk-hot { background: var(--danger-bg); color: var(--danger); }
.stage.bk-todo { background: var(--warn-bg); color: var(--warn); }
.stage.bk-done { background: var(--ok-bg); color: var(--ok); }
.stage.bk-set { background: var(--neutral-bg); color: var(--neutral); }
/* 沖帳欄：列內的小表單排一行；次要說明（誰標的、待請款連結）小一號另起一行 */
.bank-act { font-size: var(--fs-md); }
.bank-act form { display: inline; margin: 0; }   /* 次要說明用全站的 .sub（B2-12） */
.bank-act details { display: inline-block; }
.bank-act details > summary { color: var(--text-muted); cursor: pointer; }
.bank-act details[open] > form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.bank-memo { font-size: var(--fs-md); }   /* 寬度見 B3-11 的 table.bank-list td.bank-memo */
/* 2026-10-24 第一批（樣張 B1Money ①）：入帳日早於請款單開立日的黃字警告；上線前的列「其他處理 ▸」另起一行；批次標舊帳的預覽 */
.bank-act .bank-ywarn { display: block; width: fit-content; margin: 3px 0; padding: 2px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: var(--fs-xs); }
.bank-act details.bank-more { display: block; margin-top: 2px; }
p.bank-disp { margin: -4px 0 10px; font-size: var(--fs-sm); }
.bank-old { margin: 0 0 12px; }
div.bank-old p { margin: 6px 0; }
/* 狀態卡片＝篩選：目前這個框金色 */
a.card.on { border-color: var(--gold-line); box-shadow: inset 0 -3px 0 var(--gold-line), var(--shadow); }

/* ================= 商務中心（登記地址出租，2026-10-01）================= */
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.danger { background: var(--danger-bg); color: var(--danger); }
.addr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 0 0 6px; }
a.addr-card { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
a.addr-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); text-decoration: none; }
a.addr-card.on { border-color: var(--gold-line); box-shadow: var(--focus-ring), var(--shadow); }
.addr-label { font-size: var(--fs-lg); font-weight: 700; }
.addr-full { color: var(--text-muted); font-size: var(--fs-sm); }
.addr-n { margin: 8px 0 6px; font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.addr-n small { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.addr-tags { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; margin-top: 8px; font-size: var(--fs-sm); }
.stackbar { display: flex; gap: 2px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--bar-track); }
.stackbar i { display: block; height: 100%; }
/* 地址卡長條（B3-5）：正常（原深綠）和有風險（紅）亮度一樣、色弱看成同一色——正常淺綠、要續約琥珀、有風險深紅，段和段之間留 2px */
.s-ok { background: var(--bar-ok); }
.s-renew { background: var(--bar-soon); }
.s-risk { background: var(--danger); }
.month-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 140px; margin: 0 0 6px; }
.month-strip a { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; min-width: 0; color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }
.month-strip a:hover { text-decoration: none; }
.month-strip a:hover i { filter: brightness(.93); }
.month-strip i { display: block; min-height: 2px; margin: 2px 0 4px; border-radius: 4px 4px 0 0; background: var(--seg-open); }
.month-strip b { color: var(--text); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.month-strip a.cur i { background: var(--gold); }
.month-strip a.cur span { color: var(--text); font-weight: 700; }
.board-note { margin: -6px 2px 10px; color: var(--text-muted); font-size: var(--fs-xs); }
.lease-pick { display: flex; align-items: flex-start; gap: 6px; }
.lease-pick input { margin-top: 3px; }

/* ================= 客戶主檔（所長 2026-10-02：聯絡人一二、Email 1～3、是否購買發票、關聯戶）================= */
/* 一格裡好幾個輸入框（聯絡人姓名＋電話、Email 1～3）：排一行，窄了就換行 */
.field-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
/* 關聯戶：目前的組是可以取消勾選的小方塊（取消＝移除，畫刪除線），後面接輸入框（有現有名稱的提示）；手機上方塊放大好點 */
.tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.tag.tag-pick { display: inline-flex; align-items: center; margin: 0; padding: 3px 10px; font-size: var(--fs-md); cursor: pointer; }
.tag.tag-pick input { margin: 0 6px 0 0; }
.tag.tag-pick:has(input:not(:checked)) { text-decoration: line-through; opacity: .6; }
/* 表格裡置中的欄（主要窗口勾選框）、新增那一列的底色（取代 inline style） */
th.center, td.center { text-align: center; }
tr.new-row > td { background: var(--surface-2); }
/* 客戶頁聯絡人區（所長 2026-10-19 改版；樣張 docs/mockups/contacts-mock-2026-10-19.html）：順序標籤、公司共用信箱一行、收款通知寄給誰 */
.ct-add-form { margin: 10px 0 0; }
.seq-tag { display: inline-block; min-width: 4.2em; padding: 1px 8px; border-radius: 11px; background: var(--indigo-bg); color: var(--indigo); font-size: var(--fs-xs); font-weight: 600; text-align: center; white-space: nowrap; }
.seq-tag.other { background: var(--neutral-bg); color: var(--neutral); }
.ok-mark { color: var(--ok); font-weight: 700; white-space: nowrap; }
.shared-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin: 12px 0 0; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface); font-size: var(--fs-md); }
.shared-box .k { color: var(--text-muted); font-size: var(--fs-sm); }
.rule-box { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: var(--fs-md); }
.rule-box h4 { margin: 0 0 6px; font-size: var(--fs-md); }
.rule-box p { margin: 4px 0; }
details.row-edit[open] > form label.locked { opacity: .6; }
table.contact-list td.ct-title { min-width: 4em; }
@media (min-width: 641px) { table.contact-list td.ct-edit { white-space: nowrap; } }
@media (max-width: 640px) {
  .tag.tag-pick { padding: 6px 12px; }
  .field-row > input { flex: 1 1 100%; }
}

/* ================= 第三批 B3-1～B3-3、B3-5：工作台頁面（home.html、bc_overview.html）（2026-10-03 UI 審查第三批，原 b3-*.css 併回） ================= */
/* ================= B3-1 工作台：0 不要和要處理的一樣大、重複的數字不要出現兩次 =================
   0 張的卡片與進度格加 data-zero（不加 class：test_s26 的正則是 class="flow-step( hot)?"）：數字改灰、600 字重，圖示變淡。
   0 張一律沒有 hot／due（伺服器的 level 在 0 張時是空字串），所以不會和紅色、金條打架 */
.card[data-zero] b, a.flow-step[data-zero] b { color: var(--text-muted); font-weight: 600; }
.card[data-zero] > .ic { opacity: .45; }

/* ================= B3-2 工作台：常見筆電第一屏要看得到待辦 ================= */
/* 進度條的格子內距、數字 20px 改在 a.flow-step／.flow-n b 原規則（手機照 640px 規則） */
/* 「流程說明」的摘要放到進度條標題那一行的右邊（原本自己一行＋下面 14px）；展開的內容照舊在進度條下面。
   開頭標籤 <details class="help flow-help"><summary>流程說明</summary> 一個字都沒改（test_s26 用它切 HTML） */
.flow-wrap { position: relative; margin: 0 0 var(--sp-3); }
.flow-wrap > .flow { margin: 0; }
.flow-wrap .flow-head { padding-right: 6rem; }
.flow-wrap > details.flow-help { margin: 0; }
.flow-wrap > details.flow-help > summary { position: absolute; top: 0; right: 0; line-height: 1.5; }
.flow-wrap > details.flow-help[open] > div { margin-top: var(--sp-2); }

/* 提醒橫幅細版（洗錢防制、歸檔逾期、報價單已簽回、營業稅等你覆核、零用金、郵局、非記帳客戶） */
p.warn.slim { margin-bottom: 10px; padding: 5px 12px; line-height: 1.5; }

/* 「我的待辦」標題和分頁籤同一行（有 JS、分頁籤出現時才這樣；沒有 JS 照舊標題一行、各區照順序排） */
.tabbox.tabs-on { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-5); margin-top: var(--sp-4); }
.tabbox.tabs-on > .sec-head { margin: 0; border-bottom: 1px solid var(--border); }
.tabbox.tabs-on > .tabs { margin: 0; }
.tabbox.tabs-on > .tab-pane { grid-column: 1 / -1; padding-top: 10px; }
@media (max-width: 640px) {
  .tabbox.tabs-on { display: block; margin-top: 0; }
  .tabbox.tabs-on > .sec-head { margin: var(--sp-5) 0 var(--sp-2); border-bottom: 0; }
  .tabbox.tabs-on > .tabs { margin: 0 0 var(--sp-3); }
  .tabbox.tabs-on > .tab-pane { padding-top: 0; }
}

/* 分頁上方的說明收進「這一區是什麼？」：和右邊的連結（批次覆核 →…）、批次列的「完成勾選的」同一行；
   打開時說明自己佔一整行（說明列：摘要不動、連結換到下一行；批次列：按鈕和連結在上、說明在下） */
.pane-bar > details.help, .bulk-bar > details.help { margin: 0; }
.pane-bar > details.help > div, .bulk-bar > details.help > div { margin-top: 6px; }
.pane-bar > details.help > div > p, .bulk-bar > details.help > div > p { margin: 0 0 6px; }
.pane-bar > details.help[open] { flex-basis: 100%; }
.bulk-bar > details.help[open] { flex-basis: 100%; order: 9; }
/* 勾了以後批次列浮在畫面底部：只留按鈕和張數（說明、到別頁的連結藏起來，列高不變） */
.bulk-bar.has-sel > .end, .bulk-bar.has-sel > details.help { display: none; }
/* 批次列之後的段落標題（有到期日／沒有到期日）不要再空 18px */
.bulk-wrap > form.contents + .pane-sub { margin-top: var(--sp-1); }

/* ================= B3-3 工作台主管欄 ================= */
/* 各組本月完成率：一組一列五欄（組｜長條｜完成｜本月逾期｜累計逾期），欄名只在最上面一次；累計逾期的數字 600 字重、自己一欄 */
.hbar-row.late { grid-template-columns: 5.5rem minmax(0, 1fr) 7rem 3.5rem 3.5rem; }
.hbar-row.late .due-over { font-weight: 600; }
.hbar-row.hbar-head { margin-bottom: 2px; padding: 0 0 4px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .hbar-row.late { grid-template-columns: 4.5rem minmax(1.5rem, 1fr) auto 3.25rem 3.25rem; column-gap: var(--sp-1); }
}
/* 同事產值：兩欄下面一張滿版卡片，名單寬度夠就排兩欄（每欄至少 26rem），一列不拆到兩欄 */
.panel.staff-prod { margin: 0 0 var(--sp-4); }
.hbar-cols { column-width: 26rem; column-gap: var(--sp-6); }
.hbar-cols > .hbar-row { break-inside: avoid; }
/* 全所今年產值：收起來的卡片（和上面的同事產值是同一批人） */
details.team-prod { margin: 0 0 var(--sp-4); }
details.team-prod > summary { cursor: pointer; }
details.team-prod > .table-narrow { margin-top: var(--sp-2); }

/* ================= 工作台 10/14（home.html：整頁包在 <div class="home" id="home">；所長 10/14「照你的建議 開始做」） =================
   工作台只回答一件事：「現在輪到我做什麼？」。只改呈現（規則、權限、網址、按鈕送的值、分頁出現條件、每格數字的算法都沒動）。
   數字卡整區（.kpi-box、.kpi-dup、.cards.kpis.n7～n9 的容器查詢、.lead-kpis、.kpi-head）已經拿掉，那幾條規則也刪了（只有工作台在用）；
   .card[data-zero] b、a.flow-step[data-zero] b、.card.due 別頁與測試還在用，留著。
   【字只用三種】（比照 10/13 組織圖）標題＝--fs-lg／700、內文＝--fs-md／400、註記＝--fs-xs／400（說明性的字用 --text-muted）；
   藥丸、按鈕、膠囊只借註記的大小與粗細，顏色照檔案開頭的狀態語意表。「變淡」＝同一種字換成 --text-muted，不另外加字級。
   頁首的頁面標題 h2「○○ 的工作台」是全站共用的，不算在三種裡（照全站的規則）。
   font-size、font-weight 只准寫在下面「字」那幾條（tests/test_s75_home_ui_1014.py 會擋）：
     第一條＝內文是整頁的預設；第二條把全站元件（按鈕、分頁籤、膠囊、表頭、strong、small、.doc-no…）在這一頁的字級、粗細一律改成跟著外層；
     再把標題、註記指定出來。要換樣子就把選擇器加進其中一條，不要另外寫字級。
   用 #home（id）掛字的規則是為了蓋過全站元件的規則（像 .tabs [role="tab"][aria-selected="true"] 三個條件的選擇器）；
   版面、顏色的規則照常掛在 .home 底下。:where() 讓裡面的選擇器不加權重，三條同樣是 #home 的權重，後寫的贏（註記寫在最後） */
#home { font-size: var(--fs-md); font-weight: 400; }
#home :where(:not(.page-head h2)) { font-size: inherit; font-weight: inherit; }
#home :where(.sec-head h2, .panel h3, h3.pane-title, h4.pane-sub, .big-num, .team-prod > summary strong,
  details.flow-help > div > p > strong:only-child) { font-size: var(--fs-lg); font-weight: 700; }   /* 最後一個＝流程說明展開後的兩個小標 */
#home :where(.page-sub, .flow-head, .flow-amt, .hl-head, .hl-scope, .hl-end, .hl-none, .count-pill, .rv, .stage, .tag, .due-flag, span.warn-tag, th,
  details.help > summary, .pager, .quick, .panel h3 small, .panel h3 .h-link, .pane-title small, .pane-sub small, .pane-sub .h-link, .big-num small, .sub,
  .legend, .pipe, .chart-svg, .dl-row > .num, .hbar-row > .num, .hbar-head, .team-prod > summary .muted, span.muted, .co,
  .home-alerts > p.muted) { font-size: var(--fs-xs); font-weight: 400; }
#home .flow li:not(:last-child)::after { font-size: var(--fs-xs); font-weight: 400; }   /* 箭頭（手機是「・」）是裝飾（偽元素不吃上面的 :where） */

/* ---- 頁首：副標＝註記（整頁只在這裡寫數字範圍）；按鈕照舊 ---- */
.home .page-head { margin-bottom: var(--sp-4); }
.home .page-sub { color: var(--text-muted); }

/* ---- 頁首下面兩行：進度（原本的進度條，標記一個字都沒改，格子變成一行字）、洽談（原本一排數字卡） ----
   開頭「進度／我的進度／請款收款」「洽談」＝註記灰、固定 4.5em 寬，兩行後面的字對齊；右邊是「流程說明 ›」與洽談的兩個連結 */
.home .home-status { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-4); }
.home .flow-wrap { margin: 0; }
.home .flow { display: flex; align-items: baseline; column-gap: var(--sp-3); padding-right: 6rem; }
.home .flow-wrap .flow-head, .home .home-line > .hl-head { flex: none; width: 4.5em; margin: 0; padding: 0; color: var(--text-muted); }
.home .flow ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) 0; }
.home .flow li { flex: none; position: static; min-width: 0; white-space: nowrap; }
.home .flow li + li::before { content: none; }   /* 全站那條（箭頭畫在後一格的前面）不用 */
/* 箭頭接在前一格後面（和 li 一起不折行）：折成兩行時箭頭留在上一行結尾，第二行從格子開始、和第一行對齊（獨立檢查 10/14） */
.home .flow li:not(:last-child)::after { content: "→"; margin: 0 var(--sp-3); color: var(--faint); line-height: 1; }
.home a.flow-step {
  display: inline; height: auto; padding: 2px 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--text); line-height: 1.5; transition: none;
  text-decoration: underline; text-decoration-color: var(--text-muted); text-underline-offset: 3px;   /* 淡底線：看得出能點（所長 2026-10-30 #18） */
}
.home a.flow-step:hover { border: 0; box-shadow: none; text-decoration: underline; text-decoration-color: currentColor; }
.home a.flow-step.hot, .home a.flow-step.due { text-decoration: none; }   /* 紅線／金線格子本來就有色線，不疊第二條 */
.home .flow-name, .home .flow-n { display: inline; color: inherit; }
.home .flow-n b { color: inherit; line-height: inherit; }
.home .flow-amt { display: inline; margin-left: var(--sp-1); color: var(--text-muted); }
/* 0 張的整格灰；hot（被退回、逾期、今天要追的款）＝紅字＋2px 紅底線；due（等我覆核、已簽回待開單）＝深藍＋金底線（有底線，不只靠顏色） */
.home a.flow-step[data-zero], .home a.flow-step[data-zero] b { color: var(--text-muted); }
.home a.flow-step.hot, .home a.flow-step.hot b { color: var(--danger); }
.home a.flow-step.hot, .home a.flow-step.hot:hover { box-shadow: inset 0 -2px 0 var(--danger); }
.home a.flow-step.due, .home a.flow-step.due b { color: var(--primary); }
.home a.flow-step.due, .home a.flow-step.due:hover { box-shadow: inset 0 -2px 0 var(--gold-line); }
.home .flow-wrap > details.flow-help > summary { top: 3px; }
.home .home-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); margin: 0; }
.home .home-line > .hl-head { margin-right: calc(var(--sp-3) - var(--sp-4)); }
.home .home-line > a { padding: 2px 0; color: var(--text); line-height: 1.5; }
.home .home-line > a:hover { text-decoration: underline; }
.home .home-line > a[data-zero] { color: var(--text-muted); }
.home .home-line > a.due { color: var(--primary); box-shadow: inset 0 -2px 0 var(--gold-line); }
.home .hl-none { color: var(--text-muted); }
.home .hl-end { display: inline-flex; align-items: baseline; gap: var(--sp-3); margin-left: auto; }
.home .hl-scope { color: var(--text-muted); }   /* 經理、協理：洽談是全所、頁首是全組／全部時才有（「範圍：全所」） */
/* 申報進度那一行（2026-10-24 第一批）：營業稅逾期＞0＝紅字＋2px 紅底線（hot，出問題；不只靠顏色）。用 #tax-line 掛：洽談那一行
   （.home-line、#lead-line、.hl-）的規則不准用紅色（所長 10/14 定案「今天該追」不標紅，tests/test_s75） */
.home #tax-line > a.hot, .home #tax-line > a.hot:hover { color: var(--danger); box-shadow: inset 0 -2px 0 var(--danger); }
/* 上線前期別待清理（2026-10-24 樣張 RedNums ①）：灰字＋淡底線——不是逾期，但還有事要清 */
.home #tax-line > a.prelive { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
/* 觸控（pointer: coarse）：進度、洽談兩行的連結至少 44px 高（比照申報進度看板的快速篩選、看整年連結；獨立檢查 10/14 在手機量到 18.6～25px）。
   進度格裡有好幾段字（名稱、張數、金額），用 inline-block＋44px 行高（inline-flex 會吃掉段與段之間的空白）；洽談那一行的連結只有一段字，用 inline-flex 置中。
   紅、金底線改用 text-decoration：box-shadow 會畫在 44px 框的最下面、離字太遠（滑過、點過之後也一樣） */
@media (pointer: coarse) {
  .home a.flow-step { display: inline-block; min-height: 44px; padding: 0; line-height: 44px; }
  .home .home-line > a, .home .hl-end > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .home .home-line, .home .flow ol { row-gap: 0; }   /* 一行已經 44px，不再另外留行距 */
  .home .flow-wrap > details.flow-help > summary { top: 0; line-height: 44px; }   /* 「流程說明 ›」和第一行對齊、也是 44px */
  .home :is(a.flow-step.hot, a.flow-step.due, .home-line > a.due), .home :is(a.flow-step.hot, a.flow-step.due, .home-line > a.due):hover {
    box-shadow: none; text-decoration: underline 2px; text-underline-offset: 5px;
  }
  .home :is(a.flow-step.due, .home-line > a.due), .home :is(a.flow-step.due, .home-line > a.due):hover { text-decoration-color: var(--gold-line); }
  .home #tax-line > a.hot, .home #tax-line > a.hot:hover { box-shadow: none; text-decoration: underline 2px; text-underline-offset: 5px; }
}

/* ---- 提醒：原本每一則一個琥珀框，收進同一個框、每則一行、中間細線（每一則的 p.warn.slim、id、原文、連結不變） ---- */
.home .home-alerts { margin: 0 0 var(--sp-4); background: var(--warn-bg); border: 1px solid var(--warn-line); border-left: 4px solid var(--warn); border-radius: var(--radius-sm); }
.home .home-alerts > p { margin: 0; padding: 6px 12px; background: none; border: 0; border-radius: 0; line-height: 1.5; }
.home .home-alerts > p + p { border-top: 1px solid var(--warn-line); }
.home .home-alerts > p.muted { color: var(--text-muted); }

/* ---- 我的待辦 ---- */
.home .tabbox.tabs-on { margin-top: 0; }
/* 分頁籤折成兩行時，「我的待辦」對齊第一行（原本在兩行中間） */
@media (min-width: 641px) {
  .home .tabbox.tabs-on > .sec-head { align-items: flex-start; }
  .home .tabbox.tabs-on > .sec-head h2 { line-height: 40px; }
}
/* 分頁籤：有東西的深色字、0 張的字和膠囊都灰（順序不變）；選中的不加粗，靠金底線。
   放不下時折到第二行（原本橫向捲動、捲軸藏起來，1280 寬會計師的「已完成、等覆核」被切掉看不到）；手機照舊橫向捲動 */
.home .tabs { flex-wrap: wrap; overflow: visible; }
.home .tabs [role="tab"] { padding: 0 10px; color: var(--text); }
.home .tabs [role="tab"][data-zero] { color: var(--text-muted); }
.home .tabs [role="tab"][data-zero] .count-pill { background: transparent; color: var(--text-muted); }
.home .count-pill.fresh { background: var(--info-bg); color: var(--info); }      /* 新指派（藍，同 .tag.fresh） */
.home .count-pill.legacy { background: var(--faint-bg); color: var(--text-muted); }   /* 待收款的上線前舊資料 */
.home .tabs .count-pill + .count-pill { margin-left: var(--sp-1); }
/* 表格：表頭＝註記灰；共同承辦寫在工單名稱下面一行註記；已完成等覆核（做完的）整列變淡，覆核藥丸與「✓完成」照舊 */
.home table th { color: var(--text-muted); }
.home td .co { display: block; color: var(--text-muted); }
.home td.c-act .quick { flex-wrap: nowrap; }   /* 列內的按鈕排一行（✓完成、覆核、退回），要折就折工單名稱 */
.home #q-waiting tbody td, .home #q-waiting tbody td > a { color: var(--text-muted); }
/* 勾選後浮在底部的批次列：清單後面留的那一條空白只在真的有勾、批次列浮在底部時才留（原本一直留 60px）；手機批次列不浮，照舊不留 */
.home .bulk-wrap::after { content: none; }
@media (min-width: 641px) { body.has-bulk .home .bulk-wrap::after { content: ""; } }

/* ---- 年進度（待辦下面） ---- */
.home .big-num { line-height: 1.5; }
.home .hbar-row.hbar-head > span { color: var(--text-muted); }

/* ---- 手機（640 以下）：進度、洽談兩行不畫箭頭、不留標題欄，用「・」隔開、自然折行；分頁籤照舊橫向捲動 ---- */
@media (max-width: 640px) {
  .home .flow { display: block; padding-right: 0; }
  .home .flow::before { content: ""; float: right; width: 5.5rem; height: 1.5em; }   /* 只在第一行讓出「流程說明 ›」的位置 */
  .home .flow-wrap .flow-head, .home .home-line > .hl-head { display: inline; width: auto; margin-right: var(--sp-2); }
  .home .flow ol { display: inline; }
  .home .flow li { display: inline; }
  .home .flow li:not(:last-child)::after { content: "・"; margin: 0 2px; }   /* 箭頭換成「・」（一樣接在前一格後面：折行時不會在行首） */
  .home .home-line { column-gap: var(--sp-3); }
  .home .home-line > .hl-head { margin-right: 0; }
  .home .hl-end { margin-left: 0; }
  .home .tabs { flex-wrap: nowrap; overflow-x: auto; }
}
/* ---- 手機（480 以下）：工單表每一列排成三行（工單／客戶（註記）／月份・金額・承辦・到期），右邊「完成」36px 高；
   表頭、勾選欄、「完成勾選的」主鈕收起來（和申報進度看板手機版一樣，一張一張按「完成」）。
   承辦照樣看得到（獨立檢查 10/14：主管在手機上按「覆核／退回」之前要看得出是誰做的）：放在第三行註記；「我的」清單本來就不畫承辦欄。
   新指派的表有三個日期，沒有表頭分不出來：前面補「派給你／開單／到期」（::before，字跟著那一格的註記）。
   只動放工單的那幾個分頁（wo_table 與新指派的表）與洽談分頁；表格不用 :has 選擇器（全站不准，test_s42：工單列表幾千列會一直重算）。
   分頁 id 清單：新增會放工單的分頁要把 id 加進來（tests/test_s75 從模板算出應有的清單比對） ---- */
@media (max-width: 480px) {
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense:not(.is-empty), .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense:not(.is-empty) > tbody { display: block; width: 100%; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > thead { display: none; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr:not(.empty-row) {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
  }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr:not(.empty-row) > td { display: block; padding: 0; border: 0; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > td.sel, .home .tab-pane .bulk-bar > :is(.btn-primary, .btn-danger) { display: none; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > td.cell-title { order: 1; flex: 1 1 100%; min-width: 0; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > td.cell-name { order: 2; flex: 1 1 100%; min-width: 0; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > :is(td.c-ym, td.num, td.c-staff, td.c-due, td.c-rv, td.c-who, td.c-on, td.c-open, td.warn-tag) { order: 3; color: var(--text-muted); }
  .home #new-assigned table.dense > tbody > tr > td.c-on:not(:empty)::before { content: "派給你 "; }
  .home #new-assigned table.dense > tbody > tr > td.c-open:not(:empty)::before { content: "開單 "; }
  .home #new-assigned table.dense > tbody > tr > td.c-due:not(.no-due)::before { content: "到期 "; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > td.c-act { order: 4; margin-left: auto; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > td.c-act button { min-height: 36px; padding: 0 14px; }
  .home :is(#q-returned, #q-leads, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > td.cell-name > a { color: var(--text-muted); }
  /* 洽談分頁：洽談（名稱）／原因／階段・最後回應・報價單，「記一筆」展開時佔一整行 */
  .home #q-leads table.dense > tbody > tr > td.cell-name { order: 1; }
  .home #q-leads table.dense > tbody > tr > td.cell-name > a { color: var(--link); }
  .home #q-leads table.dense > tbody > tr > td.c-why { order: 2; flex: 1 1 100%; }
  .home #q-leads table.dense > tbody > tr > :is(td.c-stage, td.c-resp, td.c-quote) { order: 3; color: var(--text-muted); }
  .home #q-leads table.dense > tbody > tr > td.c-note { order: 4; flex: 1 1 auto; min-width: 0; text-align: right; }   /* 「記一筆」打開時表單寬，自己換到下一行 */
}
@media (max-width: 480px) {
  #home :is(#q-returned, #q-review2, #q-head, #q-review1, #q-invoice, #q-collect, #q-legacy, #new-assigned, #q-todo, #q-waiting, #q-client) table.dense > tbody > tr > :is(td.cell-name, td.c-ym, td.num, td.c-staff, td.c-due, td.c-rv, td.c-who, td.c-on, td.c-open, td.warn-tag) { font-size: var(--fs-xs); font-weight: 400; }
  #home #q-leads table.dense > tbody > tr > td.c-resp { font-size: var(--fs-xs); font-weight: 400; }
}

/* ================= B3-5 工作台和商務中心的圖表顏色分得出來 ================= */
/* --seg-invoiced、--seg-open-edge 改在 :root；地址卡的 .stackbar／.s-ok／.s-risk 改在商務中心那一段的原規則 */
/* 同事產值（深色＝已執行、淺色＝開案）：淺色段對原本的底色只有 1.10，看不出開案到哪。底色改白＋外框，淺色段右端畫一條深線 */
.hbar.dual { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.hbar.dual u { border-radius: 999px 0 0 999px; box-shadow: inset -2px 0 0 var(--seg-open-edge); }   /* 右端方的：終點線是直的一條 */

/* ================= 第三批 B3-6～B3-8：工單頁面（工單列表、列內完成回原位、工單頁；B3-4 只在 app.js）（2026-10-03 UI 審查第三批，原 b3-*.css 併回） ================= */
/* ================= B3-6 工單列表（_wo_bulk_list.html：.bulk-wrap.wo-list 裡的 table.dense） =================
   不在 table 上加 class：既有測試比對 <table class="dense is-empty">，所以掛在外層的 .wo-list。
   1. 欄距 16→12px（左右內距 8→6，第一欄左邊照舊 12）：13 欄、1440 寬側欄展開時（框 1134px）所長的全部工單（6,958 張）
      原本比框寬 10px——一比框寬（.is-wide）表頭就不能固定，載入時還多排一次版（第二批紀錄）。收 4px×13 欄後放得下 */
.wo-list table.dense th, .wo-list table.dense td { padding-left: 6px; padding-right: 6px; }
.wo-list table.dense :is(th, td):first-child { padding-left: 12px; }
.wo-list table.dense .filter-row td { padding-left: 6px; padding-right: 6px; }
/* 2. 客戶名稱一行（超過的寫「…」，滑過看完整名稱：app.js 在截掉的那一格補 title，不在 HTML 每列多寫一份名稱）。
      連結裡的字不折行，但不讓它撐寬表格（width:0＋min-width:100%：算欄寬時當作 0，畫的時候佔滿整格）；客戶欄的寬度改由表頭
      th.col-client 指定——表格自動排版會先把「有指定寬度的欄」放到指定寬度、剩下的才給標題欄，放不下時往下縮，
      最小照上面的 td.cell-name 10em。不用 white-space:nowrap 直接寫在連結上：nowrap 的最小寬度＝整個名稱，表格縮不下來要橫捲。
      也不用 -webkit-line-clamp：效果一樣，但 6,958 列重排一次多 150～250ms（-webkit-box 每格要多算一次）。
      10/14 改版：客戶欄 22 個字（客戶編號＋名稱，308px）、框窄於 1060px（1280 寬展開側欄）16 個字（224px，所長整年清單標題還放得下的上限）；
      表頭是 12px 的註記字，寬度不能寫 em（會變成 12px 的 22 倍），照內文字級算。標題也一行，做法同一條（下面 .wo-list td.cell-title > a） */
.wo-list th.col-client { width: calc(var(--fs-md) * 22); }
@container (max-width: 1060px) { .wo-list th.col-client { width: calc(var(--fs-md) * 16); } }
.wo-list td.cell-name > a { display: block; width: 0; min-width: 100%; overflow: clip; white-space: nowrap; text-overflow: ellipsis; }
.wo-list td.cell-title > a { display: block; width: 0; min-width: 100%; overflow: clip; white-space: nowrap; text-overflow: ellipsis; }
/*    1366 寬手動展開側欄（框 1060px）：所長的全部工單其他欄加起來只差 40px 放不下，客戶欄的最小寬度放寬到 7em 就不用橫捲
      （比框寬時表頭不能固定，載入時還要整張重排一次、約 2 秒）。框再窄（1280 寬展開側欄、平板）怎樣都要橫捲，就維持 10em 好讀 */
.wo-list { container-type: inline-size; }
@container (min-width: 1040px) { .wo-list td.cell-name { min-width: 7em; } }
/* 3. 最後一欄（完成／覆核／退回）固定在右邊：只在表格比框寬、要在框裡橫捲時（.is-wide：1280 寬手動展開側欄、平板）。
      放得下的時候不固定（用不到，而且每一格 sticky 都要算位置）；超過 4,000 列的清單模板不給 .pin-last（比框寬時載入多約 0.5 秒）。
      底色要跟著滑過、勾選、閃一下 */
.wo-list.pin-last .table-wrap.is-wide > table tr > :last-child {
  position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: inset 1px 0 0 var(--border);
}
.wo-list.pin-last .table-wrap.is-wide > table > thead tr > :last-child { background: var(--surface-2); }
.wo-list.pin-last .table-wrap.is-wide > table > tbody > tr:hover > td:last-child { background: var(--row-hover); }
.wo-list.pin-last .table-wrap.is-wide > table > tbody > tr.is-sel > td:last-child { background: var(--sel-bg); }
.wo-list.pin-last .table-wrap.is-wide > table > tbody > tr.is-sel:hover > td:last-child { background: var(--sel-hover); }
.wo-list.pin-last .table-wrap.is-wide > table > tbody > tr.row-flash > td:last-child { background: var(--info-bg); }

/* ================= B3-7 列內按「完成／覆核」後回到原來那一列（app.js：sessionStorage landc.ret） =================
   回來時那一列底色閃一下（1 秒，淡出 --dur）；寫在滑過、勾選的規則後面、權重一樣，所以會贏 */
tbody > tr.row-flash > td, tbody > tr.row-flash:hover > td { background: var(--info-bg); }
tbody > tr.row-fade > td { transition: background-color var(--dur) var(--ease-out); }
/* 這一次的訊息（伺服器導回時帶的 msg／error，原本在頁首）：回到原來那一列時頁首在畫面外，改成浮在畫面底部。
   成功的 8 秒後自己收起、錯誤的要按「關閉」；樣式照 p.ok／p.error，只多陰影和關閉鈕 */
.flash-dock {
  position: fixed; left: 50%; bottom: var(--sp-4); z-index: 40; transform: translateX(-50%);
  display: grid; gap: var(--sp-2); width: max-content; max-width: min(46rem, calc(100vw - 32px));
}
.flash-dock > :is(p, div) { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; box-shadow: var(--shadow-pop); }
.flash-dock .flash-text { flex: 1 1 auto; min-width: 0; }
.flash-dock .flash-x {
  flex: none; min-height: 26px; margin: -2px -4px -2px 0; padding: 0 8px; border-color: transparent; background: none;
  color: inherit; font-size: var(--fs-sm); font-weight: 400; box-shadow: none;
}
.flash-dock .flash-x:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
/* 有勾選、批次列浮在畫面底部時（app.js 在 body 加 .has-bulk）：訊息移到批次列上面，不蓋住「套用到勾選的」（第三批自檢） */
body.has-bulk .flash-dock { bottom: calc(var(--bulk-dock) + var(--sp-2)); }
@media (max-width: 640px) { body.has-bulk .flash-dock { bottom: var(--sp-4); } }   /* 手機批次列不浮（position: static），訊息照原位 */

/* ================= B3-8 工單頁 =================
   覆核步驟的「目前這一步」改在 .steps li.now 原規則 */
/* 勾一項導回 #chk{id}（main.wo_check_toggle）：剛勾的那一項上面多留一項的高度，看得到前一項（或階段標題），不是貼在區段列下面 */
.checklist > li[id] { scroll-margin-top: 2.75rem; }

/* ================= 第三批 B3-9～B3-11、B3-15：客戶列表、客戶頁、銀行對帳、零用金頁面（2026-10-03 UI 審查第三批，原 b3-*.css 併回） ================= */
/* ================= B3-11 銀行對帳：打開就看得到入帳（2026-10-03） ================= */
/* 啟用日（一次性設定）和「這一頁怎麼用？」收成 details，排在篩選列第二行左邊（右邊是頁頂按鈕）：.tb-break 固定在篩選條件後面換行；
   打開的那一個自己佔一整行，頁頂按鈕移到下一行 */
.bank-tools > .tb-break { flex-basis: 100%; height: 0; }
.bank-tools > details, .bank-tools > details.help { margin: 0; }
.bank-tools > details.help { margin-left: var(--sp-2); }
.bank-tools > details[open] { flex-basis: 100%; margin-left: 0; }
details.bank-start { font-size: var(--fs-sm); }
details.bank-start > summary { width: fit-content; color: var(--text-muted); cursor: pointer; }
details.bank-start > summary strong { color: var(--text); font-weight: 600; }
details.bank-start > div { margin-top: var(--sp-2); padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; line-height: 1.7; }
details.bank-start form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--sp-2) 0 0; }
/* 狀態卡排成一排：最小 126px（.cards 最多 6 欄，8 張會排成 6＋2；1024 寬放不下 8 張時 6＋2，金額不會擠到數字上）。
   卡片內：數字和金額同一行（金額靠右），名稱自己一行（::after 是換行用的 0 高度項目）；名稱只在「，」「（」換行，不拆成「請決／定」 */
.cards.cards-tight { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); margin-bottom: var(--sp-3); }
.cards-tight .card { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 8px 12px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.cards-tight .card b { order: -3; margin-bottom: 0; font-size: var(--fs-xl); }
.cards-tight .card .amt { order: -2; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cards-tight .card::after { content: ""; order: -1; flex-basis: 100%; height: 2px; }
@media (max-width: 640px) { .cards.cards-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 列表：摘要不折行（模板 .nowrap）、客戶欄的輸入框和「對應」排一行、銷帳編號不加灰底（和備註裡的同一個號碼看起來一樣） */
.bank-act form.bank-pick { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; vertical-align: middle; }
.bank-pick input[name=client_key] { width: 9.5em; padding: 0 8px; }   /* 「客戶編號或名稱」提示字放得下 */
.mono-id { letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* 沖帳／處理欄至少 14.5rem：「上線前入帳，請決定＋這家客戶沒有未收的請款單＋轉預收鈕」排兩行（不給的話 1440／1280 寬被擠到 209px、折成三行）；
   1440 寬側欄展開時九欄的最小寬合計 1125px（內容區 1134px），再加寬就要橫捲 */
table.bank-list > tbody > tr > td:last-child { min-width: 14.5rem; }
/* 備註欄固定 15rem（原本最大 16rem）：全形空白換掉以後備註的最小寬度只剩 143px，不固定的話自動排版把它擠到 175px、改成折三行 */
table.bank-list td.bank-memo { width: 15rem; max-width: 15rem; }   /* 不加 min-width：1366 寬手動展開側欄（內容 1060px）時才放得下、不橫捲 */
/* 最後一欄（沖帳／處理）：表格比框寬、要橫捲時固定在右邊（同 B3-6 工單列表的寫法；只在 .is-wide 才需要底色） */
.table-wrap.is-wide > table.bank-list tr > :last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: inset 1px 0 0 var(--border); }
.table-wrap.is-wide > table.bank-list > thead tr > :last-child { background: var(--surface-2); }
.table-wrap.is-wide > table.bank-list > tbody > tr:hover > td:last-child { background: var(--row-hover); }
.table-wrap.is-wide > table.bank-list > tbody > tr.is-sel > td:last-child { background: var(--sel-bg); }
.table-wrap.is-wide > table.bank-list > tbody > tr.is-sel:hover > td:last-child { background: var(--sel-hover); }
.table-wrap.is-wide > table.bank-list > tbody > tr.row-flash > td:last-child { background: var(--info-bg); }   /* B3-7 回到原來那一列時閃一下 */

/* ================= B3-9 客戶列表即時搜尋：送出中表格變淡（2026-10-03） ================= */
/* hx-indicator 指向表格本身：htmx 送出時加 .htmx-request、回來後拿掉。0.15 秒內回來的不變淡（不閃）；回來時立刻恢復（基本狀態沒有轉場） */
#client-table.htmx-request { opacity: .55; transition: opacity var(--dur) linear .15s; }

/* ================= B3-10 客戶頁：聯絡人區的兩個表單收進標題列右邊（2026-10-03） ================= */
/* 原本「修改聯絡人一、二」「新增其他聯絡人」各是一個整寬的 details.panel、只放一行，看起來像四個區塊。
   details.sec-tool 放在 .sec-head 最後：收合時是右邊的文字鈕；展開時整個 details 換到下一行佔滿寬度，文字鈕仍靠右，表單在下面（還在這個區段裡） */
.sec-head > details.sec-tool { margin-left: auto; }
.sec-head > details.sec-tool[open] { flex-basis: 100%; }
.sec-head > details.sec-tool > summary { display: flex; width: fit-content; }   /* btn-link 是 inline-flex，margin-left:auto 推不到右邊 */
.sec-head > details.sec-tool[open] > summary { margin-left: auto; }
.sec-head > details.sec-tool > form { margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.sec-head > details.sec-tool > form.toolbar { margin-bottom: 0; }
/* 「其他聯絡人」小標題列（原本 h3.sub-head 15px）：比區段標題小一階 */
.sec-head.sub-sec { margin: var(--sp-4) 0 var(--sp-2); }
.content .sec-head.sub-sec h3 { font-size: var(--fs-md); }

/* ================= B3-15 零用金登記表單排成三列（2026-10-03） ================= */
/* 原本 .grid 一欄一列（標籤 8rem＋欄位），7 個短欄位排 7 列、表單 400px 高、右邊 2/3 空著。
   改成標籤在上、欄位在下的格線，每格至少 15rem：1280～1440 寬四欄＝三列（日期｜金額｜類別｜經手人／用途｜替客戶墊的／單據｜登記鈕），
   1024 寬三欄＝四列，640px 以下一欄 */
.pc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 10px 16px; align-items: end; margin: var(--sp-2) 0 0; }
.pc-f { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pc-f > span:first-child, .pc-f > label:first-child { color: var(--text-muted); font-size: var(--fs-sm); }
.pc-f > input, .pc-f > select { width: 100%; }
.pc-wide { grid-column: span 2; }
.pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 34px; }
.pc-row > input:not([type=checkbox], [type=file]) { flex: 1 1 14rem; min-width: 0; }
.pc-row label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); }
.pc-submit { grid-column: -2 / -1; align-items: flex-end; }
@media (max-width: 640px) { .pc-wide, .pc-submit { grid-column: auto; } .pc-submit { align-items: stretch; } }

/* ================= 第三批 B3-12～B3-14：申報進度、年度總表頁面（2026-10-03 UI 審查第三批，原 b3-*.css 併回） ================= */
/* ---------- B3-12 申報進度：格子選單按得準、寄信要確認、改了看得出來 ---------- */
/* 寄 401 和「已交付」原本一模一樣、上下相鄰：改成白底綠字綠框＋寄信圖示（.vc 是直排，這顆改橫排） */
.vs-send { flex-direction: row; gap: 6px; background: var(--surface); color: var(--ok); border-color: var(--ok-line); }
.vs-send .ic { width: 16px; height: 16px; }
/* 送出中：變淡（aria-busy）；存好：綠框 1 秒（JS 在覆寫 className 之後才加 .saved） */
.vc.is-saving { opacity: .55; cursor: progress; }
.vc.saved { outline: 2px solid var(--ok); outline-offset: 1px; }
/* 伺服器回的錯誤（原本 alert，每次都要按確定）、交付／寄信／「月費已經請款」的提醒：寫在格子下面 */
.vc-err, .vc-note { display: block; max-width: 12em; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.35; white-space: normal; }
.vc-err { color: var(--danger); }
.vc-note { color: var(--ok); }
/* 選單：標題下面一行細節（誰覆核、哪天申報與交付；原本只在滑鼠停留提示裡）；選單加寬到 13rem、.vm-title 改在原規則 */
.vm-detail { margin: 0 2px 4px; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; }
.vm-detail:empty { display: none; }
/* 「關閉選單」（Tab 走出選單的最後一站）、螢幕報讀用的「已改成…」：畫面上不顯示 */
.vat-menu .vm-end, .vat-live, .vm-sr { position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 觸控：按鈕 44px、間距 8px（原本 28px／4px，容易點到隔壁） */
@media (pointer: coarse) {
  .vat-menu .vc, .vat-menu .vm-act > button { min-height: 44px; }
  .vat-menu .vm-body, .vat-menu .vm-more { gap: var(--sp-2); }
  .vm-field :is(input, select) { height: 40px; }
}

/* ---------- B3-13 申報進度：說明摺疊不要獨佔太多高度（圖例 2026-10-26 搬到表格下面、六期卡改 .fp-cards，見檔案最後） ---------- */
/* 「看板說明」「各組每期完成」兩個摺疊放同一行；打開的那個自己佔一整行 */
.vat-helps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 20px; margin: -6px 0 12px; }
.vat-helps > details.help { margin: 0; }
.vat-helps > details[open] { flex-basis: 100%; }

/* ---------- B3-14 年度總表：筆電上一屏看得到 1～12 月和年度合計 ----------
   表格寬度、客戶欄、格子內距、兩位承辦折行改在 .mx 原規則；這裡只有外框高度（原本 78vh） */
/* 外框高度：整頁捲到底時框的上緣在頂部列下面 16px（框下面還有頁尾留白 48px，所以不是報告寫的 -24px：
   -24px 捲到底時月份表頭有 40px 躲在頂部列底下）。收入總表也用 .mx-wrap，照舊 78vh */
.mx-year > .mx-wrap { max-height: calc(100vh - var(--topbar-h) - 64px); margin-bottom: 0; }

/* ---------- 系統設定：報價單 LOGO 預覽（2026-10-04） ---------- */
.logo-preview { display: block; max-width: 240px; max-height: 120px; margin-bottom: var(--sp-1); padding: var(--sp-2); background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }

/* 深色：頂部搜尋框的邊框在頂部列上要看得出來（--border 只有 1.3:1；淺色維持原本的淡框） */
@media screen { html[data-theme="dark"] .tb-search input:not(:focus) { border-color: var(--border-strong); } }   /* :not(:focus)：權重比 .tb-search input:focus 高，不能蓋掉焦點框 */

/* ---------- 待請款：展開的工單明細（2026-10-04 帳務工單標題加「（含營業稅申報）」） ----------
   主體選單＋「改主體」佔掉寬度，1366 寬（側欄收合）時「客戶　115年7月帳務（含營業稅申報）」那格只剩 74px、折成 8 行；
   7em（約 99px）折成 3～4 行，展開也剛好不超出表格框（再寬，1366 展開後整張表要橫向捲動） */
.bill-orders td:first-child { min-width: 7em; }

/* ================= 申報進度看板六步驟（所長 2026-10-07；方案 docs/tax-board-steps-plan-2026-10-07.md 第二段） ================= */
/* 格子本身（2026-10-22 四個圓點；2026-10-26 樣張 VatUnify＋P1-1 減重：一格只剩 td.vd）在檔案最後「營業稅向營所稅看齊」 */
/* 小視窗上方的四個點（大一號、連成一條線、每一點下面寫名字；和格子同一套色） */
.vm-dots { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.vm-dots li { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }
.vm-dots li + li::before { content: ""; position: absolute; top: 7px; right: calc(50% + 12px); left: calc(-50% + 12px); height: 2px; background: var(--border-strong); }
.vm-dots li.on { color: var(--text); }
.vm-dots li.late { color: var(--danger); font-weight: 600; }
.vm-dots .sg-dot { width: 16px; height: 16px; }
/* 底色 .vt-*＝輪到誰（開頭的狀態語意表；10/13 改版）：只設三個區域變數，請款狀況的格子（td.vd.b-chip）、圖例的色塊、選單最上面那句現況共用同一套。
   10/13 的 <a class="vc vq vq-種類">（.vq-done／.vq-chip／.vq-quiet）2026-10-26 P1-1 改成 td.vd.b-done／b-chip／b-quiet，樣式在檔案最後 */
.vt-wait { --vt-bg: var(--neutral-bg); --vt-line: var(--neutral-line); --vt-fg: var(--neutral); }
.vt-staff { --vt-bg: var(--info-bg); --vt-line: var(--info-line); --vt-fg: var(--info); }
.vt-lead { --vt-bg: var(--indigo-bg); --vt-line: var(--indigo-line); --vt-fg: var(--indigo); }
.vt-over { --vt-bg: var(--danger-bg); --vt-line: var(--danger-line); --vt-fg: var(--danger); }
.vt-warn, .vt-bill { --vt-bg: var(--warn-bg); --vt-line: var(--warn-line); --vt-fg: var(--warn); }
/* 表頭：期別下面一行期限；只列兩期時格子寬一點（客戶欄吃剩下的寬度），整年時六欄平均 */
.vat-table th.vat-p { text-align: center; }
.vat-table th.vat-p small { display: block; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; }
/* 切換同一行：申報種類｜申報進度・請款狀況（「本期＋上一期・整年」2026-10-22 拿掉） */
.vat-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); }
.vat-switch .mode-bar { margin: 0; }
/* 批次列：有 JS 時勾了才出現（.vat-bulk-slot.js 的 .js 由模板裡緊接著的一行 script 加上，沒有 JS 照舊一直顯示在表格上面）。
   外面那一層高度 0、黏在畫面底部往上一條批次列的位置（和全站 .bulk-bar.has-sel 同一個 --bulk-dock），批次列掛在它下面：
   平常、出現時都不佔版面，勾第一家時表格不會往下跳。手機（≤640px）批次列折成好幾行，照全站的做法不浮、照舊一直顯示 */
.vat-bulk-space { display: none; }
@media (min-width: 641px) {
  .vat-bulk-slot.js { position: sticky; top: calc(100vh - var(--bulk-dock)); z-index: 15; height: 0; }
  .vat-bulk-slot.js > .bulk-bar { position: static; margin: 0; }
  .vat-bulk-slot.js > .bulk-bar:not(.has-sel) { display: none; }
  .vat-bulk-space { display: block; height: var(--bulk-dock); }
}
/* 更窄（手機直放 390～480）：勾選欄與批次列收掉（批次在手機上本來就不好按），兩格才完整在畫面裡 */
@media (max-width: 480px) {
  .vat-table .sel, .vat-bulk-slot { display: none; }
}
/* 觸控：切換、快速篩選的連結至少 44px 高 */
@media (pointer: coarse) {
  .vat-switch .mode-bar a, .vat-quick a { min-height: 44px; }
}
/* 看板說明裡收起來的「規則細節」：不要框中框 */
.vat-rules { margin: 0; }
.vat-rules > div { margin-top: var(--sp-1); padding: 0; background: transparent; border: 0; }
/* 圖例（2026-10-26 搬到表格下面一行，.sg-legend.vat-legend）：這一面每個底色的意思（色塊＋字）、勾＝已收款 */
.vat-legend .vq-key { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-muted); }
.vat-legend .vq-key > i { display: block; width: 12px; height: 12px; border: 1px solid var(--vt-line); border-radius: 3px; background: var(--vt-bg); }   /* 只管色塊；圓點（.sg-dots 裡的 i）照 .sg-dot 畫 */
.vat-legend .vq-check { width: 14px; height: 14px; color: var(--done-text); }
/* 快速篩選（催件、未收到、待交付、逾期、交界期；「待我覆核」2026-10-22 拿掉）：分頁籤的樣子，0 家的數字變灰 */
.vat-quick { margin: 0 0 var(--sp-3); }
.vat-quick a[data-zero] .count-pill { color: var(--placeholder); }
.vat-filtered { margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); font-size: var(--fs-sm); }
/* 格子選單（_vat_menu.html；看板上的小視窗與沒有 JS 時的整頁共用）。10/13 改版，由上到下：客戶・期別（小字）→ 一句現況（--fs-xl，顏色同格子）
   ＋期限 → 備註 → 四個圓點（.vm-dots，2026-10-22）→ 一顆主要按鈕（下一步；另一個往前的選擇在下面，外框）→ 月費 → 兩段收起來的 details */
.vat-menu { width: min(24rem, calc(100vw - 24px)); max-height: min(80vh, 44rem); padding: var(--sp-3) var(--sp-4); overflow: auto; }
.vm-body .vm-title { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400; }
.vm-now { color: var(--vt-fg, var(--text)); font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.vm-now.vm-ok { color: var(--ok); }
.vm-now.vm-quiet { color: var(--text-muted); }
.vm-head .vm-detail { margin: 2px 0 0; }
.vat-menu .vm-alt > button, .vat-menu-page .vm-alt > button { min-height: 36px; }
@media (pointer: coarse) {   /* 觸控：次要按鈕、兩段收合的標題也要 44px（寫在上面那條後面才勝出；收合標題的在它自己的規則後面） */
  .vat-menu .vm-alt > button, .vat-menu-page .vm-alt > button { min-height: 44px; }
}
.vm-alt > button:not(.vc) { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font-weight: 600; }
.vm-fee { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--sp-3); margin: 0; padding-top: var(--sp-2); border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.vm-fee span { color: var(--text-muted); }
.vm-fold { border-top: 1px solid var(--border); }
.vm-fold > summary { display: flex; align-items: center; min-height: 36px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
@media (pointer: coarse) { .vm-fold > summary { min-height: 44px; } }
.vm-fold-body { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.vm-fold-body.vm-more { padding-top: 0; border-top: 0; }
.vm-loading { margin: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); }
.vm-body { display: flex; flex-direction: column; gap: var(--sp-2); }
.vm-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0; }
.vm-act > button { flex: 1 1 100%; min-height: 32px; }
.vm-next-form > button { min-height: 44px; background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-size: var(--fs-md); font-weight: 700; }
.vm-next-form > button:not(:disabled):hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.vm-next-form > button:disabled { background: var(--neutral-bg); border-color: var(--neutral-line); color: var(--text-muted); }
.vm-field { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); }
.vm-field :is(input, select) { height: 28px; font-size: var(--fs-xs); }
.vm-check { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); }
.vm-why { flex: 1 1 100%; margin: 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; }
/* 反方審查 10/07：備註欄（還缺什麼）佔一整行；更正的說明（先請副理看過再上傳）、最近一次寄 401 的紀錄 */
.vm-note-field { flex: 1 1 100%; }
.vm-note-field input { flex: 1 1 auto; min-width: 0; }
.vm-hint { flex: 1 1 100%; margin: 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; }
.vm-sent { display: flex; align-items: center; gap: var(--sp-1); margin: 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.4; }
.vm-warn { margin: 0; color: var(--warn); font-size: var(--fs-xs); line-height: 1.4; }
.vm-done { margin: 0; font-size: var(--fs-sm); }
.vm-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); }
.vm-steps li { display: flex; align-items: baseline; gap: 6px; }
.vm-state { color: var(--text-muted); }
.vm-more { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.vm-sub { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.vm-note { margin: 0; color: var(--text-muted); font-size: var(--fs-xs); }
.vm-hist { font-size: var(--fs-xs); }
.vm-hist ol { margin: var(--sp-1) 0 0; padding-left: 1.2rem; }
.vat-menu-page { max-width: 34rem; }
.vat-menu-page .vm-title { font-size: var(--fs-sm); }
.vat-menu-page .vm-end { display: none; }
/* 營所稅・扣繳格子旁的「標等客戶」「解除等客戶」（照工單的 set_waiting） */
details.aw > summary { color: var(--link); font-size: var(--fs-xs); cursor: pointer; }
.aw-form { margin-left: var(--sp-1); font-size: var(--fs-xs); }
/* 客戶編輯頁「營業稅申報方式」（第 1 題：主管在客戶主檔設，記從哪一期開始） */
.vat-mode-form .pc-f > select, .vat-mode-form .pc-f > input { width: 100%; }
.vat-mode-form .field-row { display: flex; flex-wrap: nowrap; }   /* 年＋期別同一行：年度欄 5em、期別下拉吃剩下的寬度 */
.vat-mode-form .field-row > input { flex: 0 0 5em; width: 5em; }
.vat-mode-form .field-row > select { flex: 1 1 auto; min-width: 0; }
/* 洽談（所長 2026-10-07）：階段標籤（leads.state 算的）、洽談狀態、報價單主管複核的狀態；顏色照開頭的語意表
   （出問題＝danger、輪到你處理＝indigo、一般進行中＝info／neutral、成交＝ok），不另加色碼 */
.stage.ls-初步詢問, .stage.ls-洽談中 { background: var(--neutral-bg); color: var(--neutral); }
.stage.ls-已報價 { background: var(--info-bg); color: var(--info); }
.stage.ls-客戶婉拒待結案 { background: var(--danger-bg); color: var(--danger); }
.stage.ls-簽回待確認客戶, .stage.ls-待主管決定 { background: var(--indigo-bg); color: var(--indigo); }
.stage.ls-已成交 { background: var(--ok-bg); color: var(--ok); }
.stage.ls-未成交 { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--faint-line); }
.stage.rq-none { background: var(--neutral-bg); color: var(--neutral); }
.stage.rq-pending { background: var(--indigo-bg); color: var(--indigo); }
.stage.rq-reviewed { background: var(--ok-bg); color: var(--ok); }
.stage.rq-returned { background: var(--danger-bg); color: var(--danger); }
.lead-filters .count-pill { margin-left: var(--sp-1); }
.lead-quick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding-top: var(--sp-1); }
.lead-quick input[name="content"] { flex: 1 1 14em; min-width: 0; }
.review-box .toolbar { margin-top: var(--sp-1); }

/* ================= 帳務入帳進度（所長 2026-10-19 確認樣張；_bp_cell.html、_bp_menu.html；開發說明 docs/books-progress-2026-10-19.md；2026-10-22 起整頁拿掉，小視窗、批次列給「營所稅及帳務進度」分頁用） =================
   一家客戶一列、1～12 月各一格。整頁包在 <div class="bp" id="bp">（小視窗、整頁的一格也在裡面）。
   【字只用三種】（同工作台 10/14 的寫法）：內文＝--fs-md／400（整頁預設）、標題＝--fs-lg（小視窗的月份、最上面那一句）、註記＝--fs-xs；
   頁首 h2（--fs-xl）是全站共用的。font-size 只寫在下面「字」那幾條：第二條把全站元件在這一頁一律改成跟著外層，再指定註記、內文、標題。
   顏色全用變數（淺色＋深色都跟著）；勾與小圈用 CSS 畫（mask），一頁六千多格不放 SVG */
#bp { font-size: var(--fs-md); font-weight: 400; }
#bp :where(:not(.page-head h2)) { font-size: inherit; font-weight: inherit; }
#bp :where(th, .bp-meta, .bp-c, .bp-n2, .bp-legend, .count-pill, .bp-why, .bp-pop-who, .bp-pop-sub, details.help > summary,
  .bp-open, .due-flag, .bp-err, .bp-loading, .bp-upto, .back-link) { font-size: var(--fs-xs); }
#bp :where(.page-sub, th.bp-m b, .bp-cli > a, .bp-dl, .bp-pop-out, details.help > div, .bp-toast) { font-size: var(--fs-md); }
#bp :where(.bp-sum, .bp-pop-title) { font-size: var(--fs-lg); }
#bp :where(.bp-sum b, .bp-bad, .bp-late, .bp-cli > a, th.bp-m b, .bp-c, .bp-pop-title, .bp-s-late, .bp-s-wait, .count-pill, .bp-go) { font-weight: 700; }
#bp :where(.bp-c.bp-todo, .bp-c.bp-future, .bp-c.bp-out, .bp-n2) { font-weight: 400; }

.bp-sum { margin: 0 0 var(--sp-3); line-height: 1.5; }
.bp-sum b { font-variant-numeric: tabular-nums; }
.bp-sum .bp-bad { color: var(--danger); }
.bp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-2); }
.bp-tools .mode-bar, .bp-tools .toolbar { margin: 0; }
.bp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-4); margin: 0 0 var(--sp-2); color: var(--text-muted); }
.bp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.bp-legend .bp-c { width: auto; min-width: 34px; min-height: 24px; padding: 0 6px; cursor: default; font-style: normal; }

/* 表：客戶欄固定在左邊（表格比框寬、在框裡橫捲時：手機、側欄展開的 1280）；本月那一欄淡底＋金色上緣 */
.bp-wrap { margin: 0 0 var(--sp-3); }
.bp-table { min-width: 880px; }
.bp-table > thead > tr > th, .bp-table > tbody > tr > td { padding: 0; vertical-align: middle; }
.bp-table th.bp-m { min-width: 46px; padding: 6px 2px; text-align: center; color: var(--text-muted); }
.bp-table th.bp-m b { display: block; color: var(--text); }
.bp-table th.bp-m span { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-table th.bp-m .bp-now { color: var(--text); }
.bp-table :is(th, td).cur { background: var(--hover-bg); }
.bp-table th.cur { box-shadow: inset 0 3px 0 var(--gold-line); }
.bp-table td.bp-mc { padding: 3px; text-align: center; }
.bp-table :is(th, td).bp-cli { position: sticky; left: 0; z-index: 1; min-width: 11rem; max-width: 16rem; padding: 6px var(--sp-3);
  background: var(--surface); text-align: left; box-shadow: inset -1px 0 0 var(--border); }
.bp-table > thead > tr > th.bp-cli { z-index: 3; background: var(--surface-2); }
.bp-table td.bp-cli > a { display: block; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.bp-table td.bp-cli > a:hover { text-decoration: underline; }
.bp-meta { display: block; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.bp-table :is(th, td).bp-upto { min-width: 3.5rem; padding: 6px var(--sp-2); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-late { color: var(--danger); }
.bp-table th.sel, .bp-table td.sel { width: 36px; text-align: center; }
.bp-table > tbody > tr:hover > td:is(.bp-cli, .cur) { background: var(--row-hover); }
.bp-table > tbody > tr.is-sel > td:is(.bp-cli, .cur) { background: var(--sel-bg); }
.bp-table > tbody > tr.is-sel:hover > td:is(.bp-cli, .cur) { background: var(--sel-hover); }
.bp-table > tbody > tr.row-flash > td.bp-cli { background: var(--info-bg); }

/* 一格：做完＝淡淡的勾（兩個勾＝覆核完成）；還沒入＝小圈；逾期紅底、等客戶琥珀底；還沒到的月份、沒有工單淡色 */
.bp-c { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 40px; min-height: 34px;
  padding: 0 2px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
a.bp-c:hover { border-color: var(--border-strong); text-decoration: none; }
a.bp-c:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.bp-c.bp-rev { color: var(--done-text); }
.bp-c.bp-entry { color: var(--text-muted); }
.bp-c.bp-todo { color: var(--text-muted); }
.bp-c.bp-late { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.bp-c.bp-wait { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.bp-c.bp-future, .bp-c.bp-out { color: var(--faint); }
.bp-c.bp-out { cursor: default; }
.bp-c[aria-expanded="true"] { border-color: var(--gold-line); }
.bp-c.bp-flash { box-shadow: 0 0 0 3px var(--gold-line); }
.bp-ic { display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.bp-ic.bp-ic2 { width: 22px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1.5 8.5l3 3 6-7M9.5 10.5l1 1 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1.5 8.5l3 3 6-7M9.5 10.5l1 1 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bp-ring { display: block; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }
.bp-n2 { position: absolute; top: 1px; right: 3px; color: var(--text-muted); font-style: normal; line-height: 1; }
@media (forced-colors: active) {
  .bp-ic { background: CanvasText; }
  .bp-c.bp-late { border-style: double; border-width: 3px; }
}

/* 小視窗（點格子；role=dialog）。手機（≤640）是貼在底部的抽屜 */
.bp-pop { position: absolute; z-index: 60; width: 20rem; max-width: calc(100vw - 32px); padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.bp-pop[hidden] { display: none !important; }
html[data-theme="dark"] .bp-pop { border-color: var(--border-strong); }
.bp-pop-body { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.bp-pop-title { margin: 0; padding-right: 36px; line-height: 1.4; }
.bp-pop-who { margin: -4px 0 0; color: var(--text-muted); }
.bp-pop-sub { margin: 0; color: var(--text-muted); }
.bp-pop-out { margin: 0; color: var(--text-muted); }
.bp-order { display: flex; flex-direction: column; gap: var(--sp-2); }
.bp-order + .bp-order { padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.bp-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-3); margin: 0; }
.bp-dl dt { color: var(--text-muted); }
.bp-dl dd { margin: 0; }
.bp-s-late { color: var(--danger); }
.bp-s-wait { color: var(--warn); }
.bp-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); }
.bp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.bp-act button { min-height: 36px; }
.bp-act button.bp-go:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.bp-why { flex-basis: 100%; max-width: 18rem; margin: 0; color: var(--text-muted); line-height: 1.4; }
.bp-open { width: fit-content; }
/* 申報進度明細頁連到工單的連結：保留、改成不顯眼的小字（所長 2026-10-22：同仁常誤按「開工單頁」、回不來；工單頁帶 back 回得來） */
p.fp-wolink { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-xs); }
p.fp-wolink a, a.fp-wolink { color: var(--text-muted); font-weight: 400; }
.bp-err { margin: 0; color: var(--danger); }
.bp-loading { margin: 0; color: var(--text-muted); }
.bp-x { position: absolute; top: -4px; right: -8px; width: 32px; min-height: 32px; padding: 0; border-color: transparent; background: none;
  box-shadow: none; color: var(--text-muted); }
.bp-menu-page .bp-x { display: none; }
.bp-menu-page { max-width: 28rem; }
.bp-toast { position: fixed; left: 50%; bottom: calc(var(--bulk-dock) + var(--sp-3)); z-index: 70; max-width: calc(100vw - 32px); margin: 0;
  padding: var(--sp-2) var(--sp-4); transform: translateX(-50%); background: var(--primary); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); color: var(--on-primary); }
.bp-toast[hidden] { display: none; }
@media (max-width: 640px) {
  .bp-pop { position: fixed; top: auto !important; right: 0; bottom: 0; left: 0 !important; width: auto; max-width: none; max-height: 80vh;
    overflow: auto; border-radius: 14px 14px 0 0; padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  .bp-table :is(th, td).bp-cli { min-width: 9rem; max-width: 10rem; padding: 6px var(--sp-2); }
  .bp-table :is(th, td).bp-upto { min-width: 4rem; padding: 6px var(--sp-2); }
}

/* 批次列：有 JS 時勾了才出現、黏在畫面底部（做法同工單列表 .wo-bulk-slot：用 (scripting: enabled) 判斷，模板不用加 class）；
   ≤640px 照全站 B4-7 一直顯示、不浮；≤480 勾選欄與批次列收掉（手機上批次不好按，表格少一欄） */
.bp-bulk-space { display: none; }
@media (min-width: 641px) and (scripting: enabled) {
  .bp-bulk-slot { position: sticky; top: calc(100vh - var(--sp-2)); z-index: 15; display: flex; flex-direction: column; justify-content: flex-end; height: 0; }
  .bp-bulk-slot > .bulk-bar { margin: 0; }
  .bp-bulk-slot > .bulk-bar.has-sel { position: static; }
  .bp-bulk-slot > .bulk-bar:not(.has-sel) { display: none; }
  .bp-bulk-space { display: block; height: var(--bulk-dock); }
}
@media (max-width: 480px) {
  .bp-table :is(th.sel, td.sel), .bp-bulk-slot { display: none; }
}
/* 觸控：格子、篩選、按鈕至少 44px */
@media (pointer: coarse) {
  .bp-c { min-height: 44px; }
  .bp-filters a, .bp-act button, .bp-x { min-height: 44px; }
  .bp-open, .bp-help > summary { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-c { transition: none; }
}

/* ================= 客戶主檔改版（所長 2026-10-20；樣張 docs/mockups/client-master-mock-2026-10-20.html） ================= */
[data-show-when][hidden] { display: none !important; }
/* 行業代號帶出的名稱與六個數字 */
.ind-lookup { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); max-width: 48rem; }
.ind-lookup[hidden] { display: none; }
.ind-lookup .nm { grid-column: 1 / -1; font-weight: 700; }
.ind-lookup .err { color: var(--danger); font-weight: 400; }
.ind-lookup .k { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.ind-lookup .v { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 代購發票 8 種 */
.inv-box { margin-top: var(--sp-2); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: var(--sp-1) var(--sp-4); max-width: 56rem; }
.inv-cell { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px dashed var(--border); }
.inv-cell input { width: 5.5em; text-align: right; }
.inv-cell small { font-size: var(--fs-xs); }
.inv-total { font-weight: 700; margin: var(--sp-2) 0 var(--sp-1); }
.inv-list li { padding: 2px 0; }
/* 關聯戶 */
.glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0; }
a.gcard { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: inherit; text-decoration: none; }
a.gcard:hover { border-color: var(--border-strong); }
a.gcard.on { border-color: var(--gold-line); box-shadow: inset 3px 0 0 var(--gold-line); }
a.gcard b { font-size: var(--fs-lg); }
.gcard-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-pick-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.group-pick-list button.tag { cursor: pointer; }
/* 聯絡人（簡潔版）：按「修改」那一列才變格子 */
table.contact-list tr.editing > td, table.contact-list tr.new-row > td { background: var(--row-hover); }
table.contact-list .stack { display: flex; flex-direction: column; gap: var(--sp-1); }
table.contact-list .stack [hidden] { display: none; }
table.contact-list td.acts, table.contact-list td.ct-edit { white-space: nowrap; }
table.contact-list tr[hidden] { display: none; }

/* ================= 地址四格、電子發票密碼（所長 2026-10-21；樣張 docs/mockups/address-einvoice-mock-2026-10-21.html） ================= */
.addr4 { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; max-width: 52rem; }
.addr4 .a4-zip { width: 5.5em; }
.addr4 .a4-city { width: 7.5em; }
.addr4 .a4-dist { width: 8em; }
.addr4 .a4-street { flex: 1 1 16em; min-width: 0; }
.addr4 [hidden] { display: none; }
.addr4 + .muted, .a4-unsplit { display: block; margin-top: var(--sp-1); }
.pw { font-family: ui-monospace, Consolas, monospace; letter-spacing: .1em; }
dl.einv { margin-top: var(--sp-3); }
@media (max-width: 640px) {
  .addr4 .a4-street { flex-basis: 100%; }
}

/* ================= 10/21 客戶頁一顆「編輯」、客戶分類、營業處、開放本數（client_detail.html、_cp_*_edit.html、_clients_table.html） ================= */
.cat-pill { display: inline-block; font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; vertical-align: 2px; margin-left: var(--sp-1); }
.cat-book { color: var(--ok); background: var(--ok-bg); }
.cat-out { color: var(--info); background: var(--info-bg); }
.cat-other { color: var(--purple); background: var(--purple-bg); }
.cat-person { color: var(--cyan); background: var(--cyan-bg); }   /* 個人客戶（所長 2026-10-26 新需求第 6 項） */
.cat-idle { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); }
.stop-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: 999px; padding: 0 8px; margin-left: var(--sp-1); vertical-align: 2px; white-space: nowrap; }
td.cell-cat .sub { display: block; }
/* 客戶列表的勾選篩選（所長 2026-10-23；樣張 ClientFacets；_clients_table.html）：換掉原本四排單選頁籤 nav.cat-seg。
   一個框、一排一個條件，左邊名稱格；同一排 OR、不同排 AND。勾著的那格粗體（:has 只看格子自己的勾選框，不是表格選擇器；
   點下去馬上變粗，不等 htmx 回來）；0 家的變淡但照樣能勾。「選更多 ▾」是 <details>（沒有 JS 也能開），展開時少用的類型排在下一行。
   手機寬度（640 以下）名稱在上、選項在下；勾選格、已選的 ✕、選更多都至少 40px 高 */
.facets { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 var(--sp-3); }
.facet-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.facet-row:last-of-type { border-bottom: 0; }
.facet-row .fk { display: flex; align-items: center; padding: var(--sp-2) 14px; background: var(--surface-2); color: var(--text-muted); font-weight: 600; }
.facet-row .fv { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; min-width: 0; padding: var(--sp-1) 14px; }
.fck { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--text); font-size: var(--fs-md); cursor: pointer; }
.fck input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.fck:has(> input:checked) { font-weight: 600; }
.fck .n { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; }
.fck.zero, .fck.zero .n { color: var(--faint); }
.facet-more { margin-left: auto; }
.facet-more > summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--link); white-space: nowrap; cursor: pointer; list-style: none; }
.facet-more > summary::-webkit-details-marker { display: none; }
.content details.facet-more > summary::before { content: none; }   /* 字上已經有 ▾／▴，不要再加內容區 details 共用的小箭頭 */
.facet-more .when-open, .facet-more[open] .when-closed { display: none; }
.facet-more[open] .when-open { display: inline; }
.facet-more[open] { flex-basis: 100%; margin-left: 0; }
.facet-more[open] > summary { float: right; }
.facet-more-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.facet-apply { padding: var(--sp-2) 14px; border-top: 1px solid var(--border); }
.facet-sel { gap: var(--sp-2); }
.facet-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: var(--fs-sm); text-decoration: none; }
.facet-chip:hover { background: var(--primary-hover); color: var(--on-primary); text-decoration: none; }
.facet-clear { margin-left: var(--sp-1); }
.facet-total { margin-left: auto; color: var(--text-muted); }
.facet-total b { color: var(--text); }
@media (max-width: 640px) {
  .facet-row { grid-template-columns: minmax(0, 1fr); }
  .facet-row .fk { padding: var(--sp-2) var(--sp-3); }
  .facet-row .fv { gap: 0 var(--sp-4); padding: var(--sp-1) var(--sp-3); }
  .facet-chip, .facet-clear { min-height: 40px; }
  .facet-clear { display: inline-flex; align-items: center; }
  .facet-total { flex-basis: 100%; margin-left: 0; }
}
.cp-why { margin: var(--sp-1) 0 0; }
/* 〔所長 2026-10-23；樣張 ClientPage1Col〕每一區佔滿一整列、由上往下（原本 auto-fit 兩欄並排，聯絡人下面空一大塊） */
.cp-grid-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-5); }
.cp-sec { min-width: 0; scroll-margin-top: 120px; }
/* 區塊變寬：看的那一面的「欄位：內容」（dl.grid；不含編輯格子 .cp-grid）一列放兩組；寬度看區塊本身（側欄展開、收合都對），
   不夠寬（手機、窄視窗）照全站 .grid 一列一組。長的那幾組（備註、特許業務項目、公司法 22-1、不再往來、行業代號）dt／dd 加 .cp-wide：
   dt 回到第一欄、dd 佔滿右邊三格。只在客戶頁（.cp-grid-wrap 裡），別頁的 dl.grid 不變 */
.cp-grid-wrap > .cp-sec { container: cpsec / inline-size; }
@container cpsec (min-width: 760px) {
  .cp-sec dl.grid:not(.cp-grid) { grid-template-columns: 11rem minmax(0, 1fr) 11rem minmax(0, 1fr); column-gap: var(--sp-4); }   /* 9rem → 11rem（2026-10-26 欄名 13 → 14px：「營業稅稅籍登記營業項目」11 個字放一行） */
  .cp-sec dl.grid:not(.cp-grid) > dt.cp-row { grid-column: 1; }       /* 〔0070〕營業稅申報方式｜營業狀態、行業代號｜稅籍營業項目各自一列 */
  .cp-sec dl.grid:not(.cp-grid) > dt.cp-wide { grid-column: 1; }
  .cp-sec dl.grid:not(.cp-grid) > dd.cp-wide { grid-column: 2 / -1; }
}
.cp-sec .sec-head { margin-top: 0; }
body.cp-editing .cp-sec.cp-can { border-color: var(--gold-line); background: var(--surface-2); }
body.cp-editing .cp-noedit { display: none; }
.cp-grid { margin: 0; }
.cp-grid dd { min-width: 0; }
.cp-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: var(--sp-3); align-items: center; justify-content: flex-end;
  background: var(--surface); border-top: 1px solid var(--border-strong); padding: var(--sp-3) var(--sp-5); box-shadow: var(--shadow-pop); }
body.cp-editing { padding-bottom: 64px; }
.cp-savebar .grow { flex: 1; color: var(--text-muted); font-size: var(--fs-xs); }
.cp-actions { position: sticky; bottom: 0; background: var(--surface); padding: var(--sp-3) 0; border-top: 1px solid var(--border); z-index: 8; }   /* z-index 8：要壓過表格黏在上面的表頭（.table-wrap thead 6、上方滑桿 7；工單頁承辦表、客戶編輯捲到底時表頭會蓋住按鈕），低於區段導覽 20、頂部列 30 */
.cp-full .cp-sec { margin-bottom: var(--sp-4); }
.cp-add-row { margin: var(--sp-2) 0 0; }
/* 聯絡人編輯表：姓名格至少放得下 8 個字（手機 400 寬原本被擠到「CORDIAL PLU」；覆核 2026-10-21），整張表在 .table-wrap 裡橫向捲 */
.cp-contacts input[name^="ct_name_"], .cp-contacts input[name^="ctn_name_"] { min-width: 8em; }
.cp-contacts input[name^="ct_email_"], .cp-contacts input[name^="ctn_email_"] { min-width: 12em; }
.cp-br-addr .addr4 { min-width: 26rem; }
.cp-biz h3 { margin-top: var(--sp-5); }
.inv-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-1) var(--sp-4); align-items: center; margin: var(--sp-2) 0; }
.inv-grid2 .h { font-size: var(--fs-xs); color: var(--text-muted); }
.inv-grid2 .n { text-align: right; font-variant-numeric: tabular-nums; }
.inv-grid2 input { text-align: right; }
.inv-grid2 .over { grid-column: 1 / -1; color: var(--danger); font-size: var(--fs-xs); font-weight: 700; }
p.over-line { color: var(--danger); font-size: var(--fs-xs); font-weight: 700; margin: var(--sp-1) 0; }
.pw-plain { font-family: ui-monospace, Consolas, monospace; }
@media (max-width: 640px) {
  .cp-savebar { padding: var(--sp-2) var(--sp-3); }
  .cp-savebar .grow { display: none; }
  .cp-br-addr .addr4 { min-width: 0; }
}

/* 下拉的欄位篩選（工單列表承辦、進度；2026-10-21）：和篩選框同一個樣子 */
.filter-row select { width: 100%; height: 26px; padding: 0 4px; border-color: var(--border-strong); font-size: var(--fs-sm); min-width: 6.5em; }   /* 1026 第三批：3.5em 時「全部承辦」只看得到「全▾」 */
.filter-row select:focus { border-color: var(--focus); }

/* ================= 10/14 工單列表改版（work_orders.html、_wo_bulk_list.html；所長「照你的建議 開始做」，只改呈現） =================
   這一頁只回答一件事：這份清單裡每一張做到哪、輪到誰，輪到我按的那一列才有按鈕。每一列一行、狀態一句話（進度那一格）。
   字只用三種（和 10/13 看板、組織圖同一套）：內文 --fs-md／400、註記 --fs-xs／400／--text-muted；頁首 h2（20px／700）與
   全站元件（按鈕、分頁籤、下拉、輸入框、btn-link：14px／500，選中的分頁 600）照舊。
   **這一頁的 font-size、font-weight 只准寫在下面「註記」「內文」兩條**（要換樣子就把選擇器加進其中一條；tests/test_s75_wolist_ui_1014.py 會擋）。
   顏色只用既有變數；進度的藥丸沿用 .rv-*、.stage.st-* 的顏色（逾期＝st-bad、等客戶＝warn-tag），只在這裡改字級 */
/* 註記 */
.wo-note, .wo-help, .wo-cond .wo-how, .wo-list .wo-no, .wo-list .wo-pct, .wo-list .wo-quiet, .wo-list .wo-done, .wo-list .wo-cancel,
.wo-list table.dense > thead > tr > th, .wo-list table.dense > tbody > tr > td.wo-due, .wo-list table.dense > tbody > tr > td.num :is(.zero, .tag, .muted) {
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 400;
}
/* 內文 */
.wo-cond, .wo-list table.dense > tbody > tr > td, .wo-list table.dense > tbody > tr > td.wo-due.due-over,
.wo-list :is(.rv, .stage, .warn-tag), .wo-list table.dense td .quick button, .wo-list table.dense td > form.inline > button {
  font-size: var(--fs-md); font-weight: 400;
}
/* 頁首第二行：「共 N 張」內文，（已取消 N 張）、金額合計註記；全所模式的說明另起一行 */
.page-sub .wo-sum { margin-left: var(--sp-3); }
.page-sub .wo-firm { display: block; margin-top: 2px; }
/* 條件那一行（從工作台、各組完成率、法定期限點過來）：一行內文＋回來源的連結＋「怎麼算」，點開的定義另起一行 */
.wo-cond > a { margin-left: var(--sp-3); white-space: nowrap; }
.wo-cond > .wo-how, .wo-cond > .wo-how > summary { display: inline; }
.wo-cond > .wo-how { margin-left: var(--sp-3); }
.wo-cond > .wo-how > p { margin: var(--sp-1) 0 0; }
/* 篩選列一行：「更多條件」裡的六個下拉收著；打開時整組是一個項目，放不下就整組排到第二行（details 本身不出框：display contents） */
.toolbar > .wo-more { display: contents; }
.toolbar > .wo-more:not([open]) > select { display: none; }
.toolbar > .wo-more:not([open])::details-content { display: none; }   /* 收著時那一格不佔位置（不然多一段空隙） */
.toolbar > .wo-more > summary { white-space: nowrap; }
/* 預設本月的一行說明：點開是原本的三句與連結 */
.wo-help { width: fit-content; max-width: 100%; margin: calc(-1 * var(--sp-1)) 0 var(--sp-3); }
.wo-help > p { max-width: 46em; margin: var(--sp-1) 0 0; line-height: 1.6; }
/* 表格：每列一行。客戶欄、標題欄以外的欄縮到內容寬（1%），剩下的寬度都給標題 */
.wo-list table.dense > thead > tr:first-child > th:not(.col-client):not(.col-title) { width: 1%; }
.wo-list table.dense > tbody > tr > td { height: 37px; padding-top: 3px; padding-bottom: 3px; white-space: nowrap; }
.wo-list table.dense > tbody > tr > td.cell-staff { white-space: normal; }       /* 合辦：一人一段，放不下才折 */
.wo-list table.dense > tbody > tr.empty-row > td { height: auto; white-space: normal; }   /* 空白列那一句照常折行 */
.wo-list td.cell-title { min-width: 8em; }
/* 已收款：字是註記的灰、前面淡淡的勾是 --done-text（同看板「做完＝淡淡的勾」；勾由這裡畫，HTML 只寫「已收款」）。
   字不用 --done-text：12px 在滑過、勾選、勾選又滑過的列上對比 4.08／4.10／3.80，不到 4.5（10/14 修正輪）；勾是圖形，3:1 就夠 */
.wo-list .wo-done::before { content: "✓ "; color: var(--done-text); }
.wo-list .wo-cancel { text-decoration: line-through; }
.wo-list table.dense > tbody > tr > td.wo-due.due-over { color: var(--danger); }
.wo-list :is(.rv, .stage, .warn-tag) { min-height: 0; padding: 0 8px; line-height: 1.55; }
.wo-list table.dense > tbody > tr > td.num .tag { margin: 0 0 0 2px; padding: 0 5px; }
/* 列內按鈕：14px、28px 高；覆核（第一層、會計師）用主色框，比「完成」醒目一階但不是實心主鈕；退回照舊紅字；恢復是淡色文字鈕 */
.wo-list table.dense td .quick button, .wo-list table.dense td > form.inline > button { min-height: 28px; padding: 0 10px; }
.wo-list table.dense td .quick { flex-wrap: nowrap; }
.wo-list table.dense td .quick .q-go { border-color: var(--primary); color: var(--primary); }
.wo-list table.dense td > form.inline > button { border-color: transparent; background: none; box-shadow: none; color: var(--text-muted); }
.wo-list table.dense td > form.inline > button:hover { background: var(--hover-bg); color: var(--text); }
/* 批次列：有 JS 時勾了才出現，黏在畫面底部（做法同申報進度 .vat-bulk-slot：外面那一層高度 0，勾第一列時表格不跳）。
   用 (scripting: enabled) 判斷有沒有 JS，不等 app.js 加 class：長清單 app.js 跑起來之前瀏覽器已經先畫一次，批次列會先佔一行、再收起來，
   整張表往上跳（看板是在模板裡緊接一行 script，這一頁的模板不准有 script）。沒有 JS 照舊一直顯示。
   ≤640px 有 JS 也一直顯示（和看板 .vat-bulk-slot、全站 B4-7 同一條線）：那麼窄批次列折成好幾行，浮在底部會蓋掉半個畫面，所以不浮；
   不浮又要勾了才出現，出現時就把整張表往下推——一直顯示在表格上面比較穩。≤480 整個收掉（見最後一段手機） */
@media (min-width: 641px) and (scripting: enabled) {
  /* 不寫 .wo-list：表格的 sticky 只准在 .pin-last .is-wide（test_s45_W）。黏在畫面底下 8px、高度 0，批次列從這裡往上長：
     所長、資深行政選到補登（日期＋清除）時 1280 寬折成兩行，往下長的話下半截在畫面外 */
  .wo-bulk-slot { position: sticky; top: calc(100vh - var(--sp-2)); z-index: 15; display: flex; flex-direction: column; justify-content: flex-end; height: 0; }
  .wo-bulk-slot > .bulk-bar { margin: 0; }
  .wo-bulk-slot > .bulk-bar.has-sel { position: static; }
  .wo-bulk-slot > .bulk-bar:not(.has-sel) { display: none; }
}
/* 觸控：分頁、更多條件、列內按鈕至少 44px */
@media (pointer: coarse) {
  .mode-bar[aria-label="常用視圖"] a, .toolbar > .wo-more > summary, .wo-cond > .wo-how > summary, .wo-help > summary { min-height: 44px; }
  .toolbar > .wo-more > summary, .wo-cond > .wo-how > summary, .wo-help > summary { display: inline-flex; align-items: center; }
  .wo-list table.dense td .quick button, .wo-list table.dense td > form.inline > button { min-height: 44px; }
}
/* 手機（≤480）：只留客戶、標題、進度、動作（逾期看進度那一格的紅色「逾期」）；勾選欄、批次列、逐欄篩選、客戶編號、金額、承辦、到期收掉。
   400 寬表格不用橫捲（10/14 修正輪：待我覆核、待會計師覆核原本 370／412 寬要橫捲，標題只剩 44px）：
   「覆核」「退回」放不下時上下排（按鈕維持 44px，那幾列 100px 高）；客戶、標題平分剩下的寬度（不再先給客戶 38%），還是一行。
   待覆核的清單（.wo-queue：每一列都有覆核＋退回、上下排）客戶、標題可以折成兩行：那幾列本來就 100px 高，不另外加高；其他清單維持一行 */
@media (max-width: 480px) {
  .wo-list :is(th.sel, td.sel, .filter-row, .wo-bulk-slot, .wo-no, th.num, td.num, th.col-staff, td.cell-staff, th.col-due, td.wo-due) { display: none; }
  .wo-list th.col-client { width: auto; }
  .wo-list td.cell-name, .wo-list td.cell-title { min-width: 4em; }
  .wo-list table.dense td .quick { flex-wrap: wrap; }
  .wo-list.wo-queue table.dense > tbody > tr > td:is(.cell-name, .cell-title) { white-space: normal; }
  .wo-list.wo-queue td:is(.cell-name, .cell-title) > a { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* ================= 簽證歷年委任（所長 2026-10-19）：客戶頁「簽證」一區、報價單頁旁邊的最近 3 年 ================= */
.sig-recent { margin: var(--sp-3) 0; }
.sig-recent[hidden] { display: none; }
.sig-recent .sec-head { margin-top: 0; }


/* ================= 簽證進度改版（所長 2026-10-22；樣張 SigningList／SigningDetail）：一律 sg- 開頭 =================
   列表：一家一列、每格五個點＋階段文字膠囊＋退回次數；格子整格是連結（觸控至少 44px），表格比框寬時在框裡橫捲（手機）。
   點的顏色是 :root 的 --sg-*（淺色、深色各一組）；膠囊用既有的狀態色（todo＝白底細框、info＝覆核中、warn＝待用印交付、ok＝已出具、danger＝逾期） */
.sg-toolbar label { display: inline-flex; align-items: center; gap: var(--sp-1); }
.sg-cards .card b .sg-of { font-size: inherit; font-weight: 400; color: var(--text-muted); }   /* 和完成數一樣大（2026-10-26 新需求第 3 項，見檔案最後） */
.sg-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.sg-chips a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: var(--fs-md);
}
.sg-chips a:hover { background: var(--hover-bg); }
.sg-chips a.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sg-chips a.on .count-pill { background: var(--on-primary-pill); color: var(--on-primary); }
.sg-table { width: 100%; min-width: 880px; }
.sg-table th .sub { display: block; font-weight: 400; }
.sg-table th + th, .sg-table td + td { border-left: 1px solid var(--border); }
.sg-table td { vertical-align: top; }
.sg-table th.sg-col-client { width: 22%; }
.sg-client > a { font-weight: 600; }
.sg-client .sub { display: block; }
.sg-table td.sg-td { padding: 0; }
.sg-cell { display: block; min-height: 44px; padding: 10px 12px; color: var(--text); }
a.sg-cell, a.sg-cell:hover { color: var(--text); text-decoration: none; }   /* 整格是連結：表格連結的淡底線（B2-14）不畫，滑過換底色 */
a.sg-cell:hover { background: var(--row-hover); }
a.sg-cell.sg-turn { box-shadow: inset 3px 0 0 var(--gold-line); }   /* 輪到你覆核：金色左條（輪到你處理＝due，不用紅，B2-17） */
.sg-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 10px; }
.sg-sub { display: block; margin-top: var(--sp-1); }
.sg-dots { display: inline-flex; align-items: center; gap: 3px; }
.sg-dot { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--sg-off); border-radius: 50%; background: var(--surface); }
.sg-dot.done { border: 0; background: var(--sg-k5); }
.sg-dot.done.k1 { background: var(--sg-k1); }
.sg-dot.done.k2 { background: var(--sg-k2); }
.sg-dot.done.k3 { background: var(--sg-k3); }
.sg-dot.done.k4 { background: var(--sg-k4); }
.sg-dot.late { border: 2px solid var(--sg-late); background: var(--sg-late-bg); }
.sg-dot.na { border: 1.5px dashed var(--sg-na); }
.sg-bar { display: inline-block; width: 8px; height: 2px; background: var(--border-strong); }
.sg-pill {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; line-height: 20px;
  white-space: nowrap; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong);
}
.sg-pill.info { background: var(--info-bg); color: var(--info); box-shadow: none; }
.sg-pill.warn { background: var(--warn-bg); color: var(--warn); box-shadow: none; }
.sg-pill.ok { background: var(--ok-bg); color: var(--ok); box-shadow: none; }
.sg-pill.danger { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
.sg-pill.mute { padding-left: 0; background: none; box-shadow: none; color: var(--text-muted); font-weight: 400; }
.sg-ret { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--danger); color: var(--on-primary); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.sg-qc { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--code-bg); color: var(--seg-dark-text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.sg-legend { margin: var(--sp-3) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.sg-legend p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-1); }
.sg-legend b { color: var(--text); }
/* 明細：步驟條（目前那一步金褐色、逾期磚紅）、這一段要勾的、按鈕、歷程 */
.sg-panel { margin: 0 0 var(--sp-4); }
.sg-panel h3 small { order: 3; flex-basis: 100%; }
.sg-steps { display: flex; align-items: flex-start; margin: var(--sp-2) 0 var(--sp-3); padding: 0; list-style: none; }
.sg-step { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; text-align: center; }
.sg-step + .sg-step::before { content: ""; position: absolute; top: 14px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 2px; background: var(--border-strong); }
.sg-step-dot {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.5px dashed var(--sg-off); border-radius: 50%;
  background: var(--surface); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 700;
}
.sg-step.done .sg-step-dot { border: 0; background: var(--sg-k5); color: var(--on-primary); }
.sg-step.now .sg-step-dot { border: 2px solid var(--warn); background: var(--warn-bg); color: var(--warn); }
.sg-step.now b { color: var(--warn); }
.sg-step.now.late .sg-step-dot { border-color: var(--sg-late); background: var(--sg-late-bg); color: var(--danger); }
.sg-step.now.late b { color: var(--danger); }
.sg-step .sub { font-size: var(--fs-xs); }
.sg-layers { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; padding: 0; list-style: none; }
.sg-layers li { min-width: 10em; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sg-layers li.done b { color: var(--ok); }
.sg-layers li.now { border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--gold-line); }
.sg-layers .sub { display: block; }
.sg-checks { margin: var(--sp-2) 0; padding: 0; list-style: none; }
.sg-checks li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.sg-check {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--sp-2) 0 0;
  border: 0; background: none; box-shadow: none; color: var(--text); font-size: var(--fs-md); text-align: left; cursor: pointer;
}
.sg-check:disabled { color: var(--text-muted); cursor: default; }
.sg-box {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--on-primary); font-size: var(--fs-xs);
}
.sg-check.on .sg-box { border-color: var(--sg-k5); background: var(--sg-k5); }
.sg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.sg-acts button { min-height: 44px; padding: 0 18px; }
.sg-log { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 6px var(--sp-3); margin: var(--sp-2) 0; padding: 0; list-style: none; font-size: var(--fs-md); }
.sg-log li { display: contents; }
.sg-log-d { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sg-log li.bad .sg-log-t { color: var(--danger); }
.page-actions .sg-pill, .page-actions .sg-ret, .page-actions .sg-qc { align-self: center; }
@media (max-width: 640px) {
  .sg-steps { overflow-x: auto; }
  .sg-step { min-width: 64px; }
  .sg-log { grid-template-columns: max-content minmax(0, 1fr); }
  .sg-log-w { grid-column: 2; }
  .sg-log-t { grid-column: 2; margin-bottom: var(--sp-1); }
  .sg-toolbar select, .sg-toolbar input, .sg-toolbar button { min-height: 44px; }
  .sg-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-1); }   /* 手機：篩選鈕一排橫捲，不佔掉半個畫面 */
  .sg-chips a { flex: 0 0 auto; }
}
@media (pointer: coarse) {
  .sg-toolbar select, .sg-toolbar input, .sg-toolbar button, .sg-panel button { min-height: 44px; }
}

/* ================= 申報進度・營所稅及帳務進度（所長 2026-10-21、10-22；樣張 Main／Detail；alembic 0066）：一律 fp- 開頭 =================
   一家一列：營所申報方式（前兩年＋本年預計下拉）｜入帳 1～12 月兩個燈號｜調查表兩個日期｜結帳、申報、繳款膠囊（沿用 sg-pill、sg-ret）。
   燈號：左＝入帳完成 --sg-k1、右＝覆核完成 --sg-k5、逾期 --sg-late＋淡紅底 --sg-late-bg、還沒做空心 --sg-off（簽證進度改版的色票，淺深各一組）。
   日期（明細頁）：有 JS（.fp-js）時看到的是民國日期的按鈕，日期欄疊在上面、透明，點了開瀏覽器的日曆；沒有 JS 是一般的日期欄＋「存」。
   列表的預計申報方式、調查表日期（所長 2026-10-22 第二批減重，樣張 IncomeLite）：文字按鈕 .fp-txt（改過＝藍字 .chg、空的＝琥珀 .empty、
   滑過出現淡框、開著小視窗的那一顆 .on 深框），點了開整頁共用的小視窗 .fp-ed */
.fp-table { width: 100%; min-width: 1500px; }
.fp-table th { white-space: nowrap; }
.fp-table thead tr:first-child th { text-align: center; }
.fp-table th + th, .fp-table td + td { border-left: 1px solid var(--border); }
.fp-table td { vertical-align: top; }
.fp-table th.fp-mh { width: 34px; padding-left: 2px; padding-right: 2px; text-align: center; }
.fp-table th.fp-mh.cur { color: var(--warn); }
.fp-cli { min-width: 12em; }
.fp-cli > a { font-weight: 600; }
.fp-cli .sub, .fp-close .sub, .fp-file .sub, .fp-m0 .sub { display: block; }
.fp-m { white-space: nowrap; }
.fp-m .sg-pill.mute, .fp-m0 .sg-pill.mute { padding-right: 0; }
.fp-lt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 30px; min-width: 30px; height: 24px;
  min-height: 24px; padding: 0; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); vertical-align: middle; }
a.fp-lt { cursor: pointer; text-decoration: none; }
a.fp-lt:hover { border-color: var(--border-strong); }
.fp-lt.fp-late, .bp-c.bp-late.fp-lt { background: var(--sg-late-bg); border-color: transparent; }
.fp-lt .bp-n2 { top: -6px; right: -6px; }
.fp-d { display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.fp-d.d-in { background: var(--sg-k1); }
.fp-d.d-rv { background: var(--sg-k5); }
.fp-d.d-off { border: 1.5px solid var(--sg-off); background: var(--surface); }
.fp-d.d-bad { background: var(--sg-late); }
/* 列表的入帳燈號（所長 2026-10-25 第 3 點甲，樣張 IncomeSlim；_fp_income.html）：每格只剩 <td class="fm k-狀態" data-m="月">，沒有連結、沒有 i。
   框＝::before（和 .fp-lt 一樣 30×24、圓角 6、逾期淡紅底；有 JS 時滑過深框、開著小視窗 aria-expanded 金框、鍵盤焦點框畫在框上），
   兩個燈＝::after（左燈就是它本身；右燈用 box-shadow 往右 13px 複製一個，空心＝再疊一層縮 1px 的 --surface：瀏覽器畫 1.5px 的圓邊框，
   在 100%～200% 縮放實測和縮 1px 的陰影最像，縮 1.5px 反而變粗），大小、間距、顏色和 .fp-d 相同；
   「—」（沒有工單）寫在 ::before。框用 inline-block 不用 inline-flex（一格少一個版面物件：6,612 格量起來排版比原本的 a＋兩個 i 還省）。兩張工單的「2」照舊是 i.bp-n2（一頁幾十格），位置對齊原本框的右上角。明細頁、圖例照舊用 .fp-lt／.fp-d。
   點擊、方向鍵、螢幕閱讀器的說明在 tax_board_income.html 的 JS（.fp-js＝JS 跑起來了；沒有 JS 時不能點，也不顯示可以點） */
.fp-table td.fm { padding: 8px 2px; text-align: center; scroll-margin: calc(var(--topbar-h) + 96px) 0 var(--sp-6); }
.fp-table td.fm::before { content: ""; display: inline-block; width: 30px; height: 24px; border: 1px solid transparent; border-radius: 6px;
  vertical-align: middle; transition: border-color var(--dur) var(--ease-out); }
.fp-table td.fm::after { content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 16.5px 0 -26.5px; border: 1.5px solid var(--sg-off);
  border-radius: 50%; background: var(--surface); box-shadow: 13px 0 0 -1px var(--surface), 13px 0 0 0 var(--sg-off); vertical-align: middle; }
.fp-table td.fm.k-rev::after { border: 0; background: var(--sg-k1); box-shadow: 13px 0 0 0 var(--sg-k5); }
.fp-table td.fm.k-entry::after { border: 0; background: var(--sg-k1); }
.fp-table td.fm.k-late::after { border: 0; background: var(--sg-late); }
.fp-table td.fm.k-late::before { background: var(--sg-late-bg); }
.fp-table td.fm.k-out::before { content: "—"; color: var(--faint); line-height: 22px; text-align: center; }
.fp-table td.fm.k-out::after { content: none; }
.fp-js .fp-table td.fm:not(.k-out) { cursor: pointer; }
.fp-js .fp-table td.fm:not(.k-out):hover::before { border-color: var(--border-strong); }
.fp-table td.fm[aria-expanded="true"]::before { border-color: var(--gold-line); }
.fp-table td.fm:focus { outline: none; }
.fp-table td.fm:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 1px; }
.fp-table td.fm[data-k] { position: relative; }
.fp-table td.fm > .bp-n2 { top: 3px; right: calc(50% - 20px); }
/* 每列 12 格的摘要（_fp_income.html 的 span.fp-sr，books_progress.months_sr）：看不到、螢幕閱讀器的瀏覽模式念得到 */
.fp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.fp-cell { display: block; color: var(--text); }
a.fp-cell, a.fp-cell:hover { color: var(--text); text-decoration: none; }
a.fp-cell:hover .sg-pill { box-shadow: inset 0 0 0 1px var(--border-strong); }
.fp-close .sg-ret { margin-top: 5px; }
.fp-turn { color: var(--warn); font-weight: 600; }
.fp-sig { vertical-align: middle; }
.fp-dform { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; }
.fp-txt { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0 0 0 -6px; padding: 0 6px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; box-shadow: none; color: var(--text); font: inherit; font-weight: 400; white-space: nowrap; cursor: pointer; }
.fp-txt:hover { border-color: var(--border-strong); background: var(--surface-2, var(--surface)); }
.fp-txt.chg { color: var(--info); font-weight: 600; }
.fp-txt.empty { color: var(--warn); }
.fp-txt.on { border: 2px solid var(--text); background: var(--surface); }
.fp-txt[data-ed="m"]::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); opacity: .7; }
.fp-ed { width: 22rem; }
.fp-ed form { margin: 0; }
.fp-ed-l { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); }
.fp-ed-l select, .fp-ed-l input { min-height: 40px; color: var(--text); }
.fp-ed-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.fp-ed-ro { margin: 0; color: var(--text); }
.fp-ed-st { min-height: 1.4em; margin: 0; color: var(--ok); }
.fp-ed-st.bad { color: var(--danger); }
.fp-ed-go { align-self: flex-end; }
.fp-dt { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 8px;
  font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
.fp-dt.set { border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.fp-dt.empty { border: 1px dashed var(--warn-line); background: var(--surface); color: var(--warn); }
.fp-dt.fp-ro { cursor: default; }
.fp-dt .fp-cal { width: 14px; height: 14px; }
.fp-dt .fp-din { margin-left: var(--sp-1); }
.fp-js .fp-dt .fp-din { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fp-js .fp-dsave { display: none; }
.fp-dt:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.fp-cards .card b { white-space: nowrap; }
/* 2026-10-24 樣張 RedNums ③：還不算的卡（調查表 12 月以前、繳款在申報以前）＝虛線灰卡寫什麼時候開始算；卡片下面的小字 */
.fp-cards .card.fp-wait { border-style: dashed; background: var(--surface-2, var(--surface)); box-shadow: none; }
.fp-cards .card.fp-wait b { color: var(--text-muted); }   /* 字級和大數字一樣（見檔案最後「數字卡字級」），不用再塞上下空白湊高度 */
.fp-cards .card .fp-csub { display: block; color: var(--text-muted); font-size: var(--fs-md); }
.fp-legend .fp-lt { margin-right: 4px; }
/* 明細 */
.fp-mtable { max-width: 44rem; }
.fp-months { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; padding: 0; list-style: none; }
.fp-months li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 36px; }
.fp-dates { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: var(--sp-2) 0; }
.fp-dates > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fp-dl { min-width: 5.5em; color: var(--text-muted); }
.fp-release { margin: var(--sp-3) 0; padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.fp-release p { margin: var(--sp-1) 0; }
.fp-release form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fp-steps2 { max-width: 28rem; }
.fp-pays { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.fp-payform fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.fp-payform legend { padding: 0 var(--sp-1); font-weight: 600; }
.fp-payform label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.sg-acts form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; }
@media (pointer: coarse) {
  .fp-lt { width: 40px; height: 44px; }
  .fp-table td.fm::before { width: 40px; height: 44px; }
  .fp-table td.fm.k-out::before { line-height: 42px; }
  .fp-table td.fm::after { margin: 0 21.5px 0 -31.5px; }
  .fp-table td.fm > .bp-n2 { right: calc(50% - 25px); }
  .fp-dt, .fp-txt, .fp-payform label, .fp-ed-l select, .fp-ed-l input { min-height: 44px; }
}
@media (max-width: 640px) {
  .fp-dates { flex-direction: column; }
  .fp-ed { width: auto; }              /* 手機：和入帳燈號的小視窗一樣是貼在底部的抽屜（.bp-pop） */
}
@media (forced-colors: active) {
  .fp-d.d-in, .fp-d.d-rv, .fp-d.d-bad { background: CanvasText; }
  .fp-lt.fp-late { border: 3px double CanvasText; }
  .fp-table td.fm::after { forced-color-adjust: none; border-color: CanvasText; background: Canvas; box-shadow: 13px 0 0 -1px Canvas, 13px 0 0 0 CanvasText; }
  .fp-table td.fm.k-rev::after, .fp-table td.fm.k-entry::after, .fp-table td.fm.k-late::after { background: CanvasText; }
  .fp-table td.fm.k-rev::after { box-shadow: 13px 0 0 0 CanvasText; }
  .fp-table td.fm.k-late::before { border: 3px double CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-table td.fm::before { transition: none; }
}

/* ================= 申報進度・扣繳及二代健保（所長 2026-10-21、10-22；樣張 Withholding；alembic 0067）：一律 an- 開頭 =================
   列表沿用簽證進度的 sg-table／sg-cell／sg-dot（五個點、膠囊、退回 N 次、逾期磚紅、不用申報虛線）；明細沿用營所稅明細的 fp-dates、fp-release、sg-steps */
.an-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-cards .card .sub { display: block; margin-top: 2px; font-size: var(--fs-md); }
.an-table th.sg-col-client { width: 26%; }
.an-table td.sg-td { width: 37%; }
.an-nr, .an-wait { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.an-nr form, .an-wait form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.an-detail .sg-panel h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* 2026-10-22 併進公司法 22-1（所長；樣張 Annual3）：多一欄三個點、數字卡五張；表格最小寬度照樣張 1240px，放不下就用上方／下方的滑桿 */
.an-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.an-table.an-has-corp { min-width: 1240px; }
.an-table.an-has-corp th.sg-col-client { width: 22%; }
.an-table.an-has-corp td.sg-td { width: 26%; }
span.sg-cell.an-corp { cursor: default; }
/* 明細頁（所長 2026-10-23；樣張 Fix1023）：頁首下面一排跳區連結（扣繳／二代健保／22-1）、各區標題旁的期限 */
.an-jump { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.an-jump a { min-height: 32px; display: inline-flex; align-items: center; }
.an-detail .an-due { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.an-detail .sg-panel { scroll-margin-top: calc(var(--topbar-h) + var(--sp-3)); }
@media (max-width: 1200px) {
  .an-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .an-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 申報進度・個人綜所稅申報（所長 2026-10-26 新需求第 6 項；樣張 NR6PersonalTax；tax_board_pit.html、_wo_pit.html）：
   一張工單一列，沿用簽證進度的 sg-table／sg-cell／sg-dot（四個點）；七張卡一排；身分證用等寬字（遮罩對得齊） */
.pit-cards { grid-template-columns: repeat(8, minmax(0, 1fr)); }   /* 八張卡（2026-10-26 三層覆核：待部長覆核、待所長覆核） */
.pit-table { min-width: 960px; }
.pit-table th.sg-col-client { width: 26%; }
.pit-table th.pit-col-filer { width: 20%; }
.pit-table th.pit-col-staff { width: 10%; }
.pit-table th.pit-col-due { width: 13%; }
.pit-table td.sg-td { padding: 0; }
.pit-rel { color: var(--text-muted); font-size: var(--fs-xs); }
.pit-card-sub { display: block; color: var(--text-muted); font-size: var(--fs-xs); font-weight: normal; }
.pit-due { font-size: var(--fs-xs); white-space: nowrap; }
.pit-id { font-family: Consolas, "Courier New", monospace; letter-spacing: .05em; }
.pit-id-edit { margin-top: var(--sp-1); }
.pit-new { margin: var(--sp-3) 0; }
.pit-new legend { font-weight: 600; padding: 0 var(--sp-1); }
.pit-sec .steps { margin-bottom: var(--sp-3); }
.pit-renew td { vertical-align: middle; }
@media (max-width: 1200px) { .pit-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 工單頁「帳務負責同事可以調整」（所長 2026-10-22：22-1、扣繳、二代健保的金額、取消由帳務負責同事判斷） */
.book-owner h3 { margin: 0 0 var(--sp-2); }
.book-owner .bulk-bar { margin: var(--sp-2) 0 0; }
/* 合作同業（原代理事務所）：特殊註記（介紹費算法等）在列表裡最多佔 22rem 寬 */
.af-note { max-width: 22rem; white-space: normal; }
.af-note-box { margin: 0 0 var(--sp-4); }
.af-corp-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
@media (pointer: coarse) {
  .an-nr button, .an-wait button, .an-wait select { min-height: 44px; }
}

/* ================= 工商進度（所長 2026-10-22 晚；樣張 BizList2／BizDetail2／ClientFlags；alembic 0069）：一律 biz- 開頭 =================
   點與膠囊沿用簽證進度的 .sg-*（色票 --sg-k1～k5）；這裡多一種「目前這一段」的點（.sg-dot.cur：金褐色框＋淡底，樣張 .s.cur）、
   不用的那一段（.sg-step.na：虛線、淡字）；客戶名稱旁的小標籤 .biz-flag（僑外資、閉鎖性、特許）、辦理項目標籤 .biz-tag。沒有期限欄 */
.sg-dot.cur { border: 2px solid var(--warn); background: var(--warn-bg); }
.biz-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.biz-table { min-width: 1080px; }
.biz-table th.biz-col-client { width: 16%; }
.biz-flags, .biz-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.biz-tags { margin-top: 0; }
.biz-flag { display: inline-flex; align-items: center; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--info-bg);
  color: var(--info); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; vertical-align: middle; }
.biz-flags .biz-flag { margin-left: 0; }
.biz-flag.biz-new { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: inset 0 0 0 1px var(--gold-line); }   /* 7 天內新開（P1-C） */
.biz-table tr.biz-hl > td { background: var(--surface); box-shadow: inset 0 2px 0 var(--gold-line), inset 0 -2px 0 var(--gold-line); }   /* ?hl＝那一件：金框（P1-C） */
.biz-table tr.biz-hl > td:first-child { box-shadow: inset 2px 2px 0 var(--gold-line), inset 0 -2px 0 var(--gold-line); }
.biz-table tr.biz-hl > td:last-child { box-shadow: inset -2px 2px 0 var(--gold-line), inset 0 -2px 0 var(--gold-line); }
h2 .biz-flag { font-size: var(--fs-sm); }
.biz-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--code-bg); color: var(--seg-dark-text);
  font-size: var(--fs-xs); font-weight: 600; }
.biz-items .sub, .biz-table td .sub { display: block; }
.biz-no { margin-left: var(--sp-1); color: var(--text-muted); font-size: var(--fs-md); font-weight: 400; }
.sg-step.na .sg-step-dot { border-style: dashed; border-color: var(--sg-na); color: var(--sg-na); }
.sg-step.na b { color: var(--text-muted); font-weight: 400; }
.biz-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.biz-label { flex-basis: 100%; color: var(--text-muted); font-size: var(--fs-sm); }
/* 辦理項目 14 格勾選（所長 2026-10-23 晚；樣張 BizItems13；alembic 0071）：四欄格子，窄螢幕兩欄；列表上方一排篩選沿用客戶列表的 .facets／.fck */
.biz-items-form { align-items: flex-start; }
.biz-items-grid { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px var(--sp-4); }
.biz-items-grid .biz-ck .small { margin-left: 4px; }
.biz-other-note { flex-basis: 100%; max-width: 520px; }
.biz-facets { margin-top: var(--sp-3); }
@media (max-width: 760px) { .biz-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
form.inline { display: inline; }
.biz-grid2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-3); }
.biz-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.biz-f { display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: var(--fs-sm); }
.biz-f select, .biz-f input { min-height: 40px; color: var(--text); font-size: var(--fs-md); }
.biz-capbox { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.biz-ck { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-md); }
.biz-ck input { width: 20px; height: 20px; }
.biz-notax { margin: 0 0 var(--sp-2); }
.biz-acts { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-2) 0; }
.biz-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.biz-act label { display: inline-flex; align-items: center; gap: 6px; }
.biz-act button { min-height: 44px; padding: 0 16px; }
.biz-dates { display: flex; flex-direction: column; gap: var(--sp-2); }
.biz-dl { display: inline-block; min-width: 9em; color: var(--text-muted); }
.biz-frlist { margin: 4px 0 0; }
@media (max-width: 900px) {
  .biz-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .biz-grid2, .biz-grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .biz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 〔所長 2026-10-23；alembic 0070；樣張 TaxRegItems〕營業狀態的小膠囊（客戶頁基本資料）：營業中偏綠、非營業中偏紅、其他中性；
   「非營業中」客戶名稱旁邊的小標籤 .bs-tag（客戶列表、客戶頁標題）：只有細框、淡色，不搶不再往來的紅底標籤；營業稅稅籍登記營業項目一項一行 */
.bs-pill { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral);
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.bs-pill.bs-on { background: var(--ok-bg); color: var(--ok); }
.bs-pill.bs-off { background: var(--danger-bg); color: var(--danger); }
.bs-tag { display: inline-flex; align-items: center; margin-left: 4px; padding: 0 6px; border: 1px solid var(--danger-line); border-radius: var(--radius-sm);
  color: var(--danger); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; vertical-align: middle; opacity: .85; }
h2 .bs-tag { font-size: var(--fs-sm); }
.tax-reg-list { margin: 0; }
.tax-reg-list .tr-def { text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; cursor: help; }  /* 滑過去看第 9 次修訂的定義（title） */
.tax-reg-ed .tax-reg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }

/* 第一批 #1、#6（所長 2026-10-24 樣張 B1Lists）：工單頁頁首「完成，送組長覆核」旁邊寫送給誰／為什麼還不能按；
   已送之後的「撤回」是另一顆小的次要鈕（原本「✓完成」再按一次就撤回）；還沒到的月份的完成鈕反灰（不能還是深藍） */
.page-actions .quick button.q-off:disabled { background: var(--neutral-bg); border-color: var(--neutral-line); color: var(--text-muted); }
.page-actions .quick button.q-undo { min-height: 28px; padding: 0 10px; font-size: var(--fs-sm); box-shadow: none; }
.quick .q-why { color: var(--text-muted); }
.quick .q-why b { color: var(--text); font-weight: 600; }
p.wo-help { max-width: 46em; line-height: 1.6; }    /* 工單列表「本月」「我要完成的」的一行說明（原本 details 摘要＋內文重複兩次） */
/* ================= 年度總表（2026-10-24 改版；所長看過樣張 Matrix2「都照建議」） =================
   ① 四張數字卡＋長條（.mx2-bar 裡的細線 i＝到今天應該執行到的位置）② 例外按鈕 .mx2-chip（.hot＝出問題、.on＝目前只列這一類）
   ③ 每家一列 table.mx2：十二個月的格子只用顏色（16px 方塊；色票和申報進度的點同一套：已收款 --sg-k5、已執行 --sg-k1、還沒做空心 --sg-off；
   已請款 --mx-billed、漏開紅虛線、還沒到淡虛線、取消斜線、別組已有灰）。格子的 title 由 matrix.html 的 script 滑過時才組
   （原本每格寫金額＋承辦姓名，所長那一頁 4.3MB）。月份欄＝第 4～15 欄；表格類選擇器不用 has 偽類（728 列） */
.mx2-sec { margin-bottom: var(--sp-4); }
.mx2-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--sp-3); }
.mx2-kpi .card { display: flex; flex-direction: column; gap: 4px; }
.mx2-kpi .card .sub { margin: 0; }
.mx2-bar { margin: 2px 0; }
.mx2-bar.done > b { background: var(--sg-k1); }
.mx2-bar.billed > b { background: var(--mx-billed); }
.mx2-bar.paid > b { background: var(--sg-k5); }
.mx2-bar > i { position: absolute; top: 0; bottom: 0; left: var(--w); width: 2px; background: var(--text); }
.mx2-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mx2-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: var(--fs-sm); text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.mx2-chip b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.mx2-chip:hover { border-color: var(--border-strong); text-decoration: none; }
.mx2-chip.hot { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.mx2-chip[data-zero] { color: var(--text-muted); }
.mx2-chip.on { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.mx2-head { margin-top: var(--sp-5); }
.mx2-legend { margin: 0; }
.mx2 { width: 100%; font-size: var(--fs-sm); }
.mx2 th, .mx2 td { padding: 5px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.mx-wrap > table.mx2 > * > tr > :is(th, td) { padding-left: 5px; padding-right: 5px; }
.mx2 thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.mx2 thead th a { color: inherit; }
.mx2 thead th.now a { color: var(--text); font-weight: 700; }
.mx2 .mx2-name { position: sticky; left: 0; z-index: 1; min-width: 14rem; max-width: 24rem; background: var(--surface); }
.mx-wrap > table.mx2 > tbody > tr > td.mx2-name { white-space: normal; }
.mx2 thead .mx2-name { z-index: 3; background: var(--surface-2); }
.mx2 tr.mx2-grp > * { border-top: 1px solid var(--border-strong); background: var(--surface-2); font-weight: 700; }
.mx2 tr.mx2-grp > th { text-align: left; }
.mx2 tr.mx2-grp .sub, .mx2 tfoot .sub { display: inline; font-weight: 400; }
.mx2 tfoot > tr > * { position: sticky; bottom: 0; z-index: 3; border-top: 1px solid var(--border-strong); background: var(--surface-2); font-weight: 700; text-align: right; }
.mx2 tfoot > tr > th { text-align: left; }
.mx2 tbody > tr:not(.mx2-grp) > td:nth-child(n+4):nth-child(-n+15) { min-width: 20px; padding: 3px 1px; text-align: center; line-height: 1; }
:is(.mx2, .mx2-legend) :is(.p, .b, .d, .t, .f, .m, .x, .k) {
  display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border-radius: 4px; vertical-align: middle;
}
.mx2-legend :is(.p, .b, .d, .t, .f, .m, .x) { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
:is(.mx2, .mx2-legend) .p { background: var(--sg-k5); }
:is(.mx2, .mx2-legend) .b { background: var(--mx-billed); }
:is(.mx2, .mx2-legend) .d { background: var(--sg-k1); }
:is(.mx2, .mx2-legend) .t { border: 1.5px solid var(--sg-off); background: var(--surface); }
:is(.mx2, .mx2-legend) .f { border: 1.5px dashed var(--border-strong); background: var(--surface); }
:is(.mx2, .mx2-legend) .m { border: 2px dashed var(--danger); background: var(--danger-bg); }
:is(.mx2, .mx2-legend) .x { border: 1px solid var(--faint-line); background: repeating-linear-gradient(45deg, var(--faint-line) 0 3px, var(--surface) 3px 6px); }
.mx2 .k { border: 1px solid var(--neutral-line); background: var(--neutral-bg); cursor: help; }
.mx2 td > a:is(.p, .b, .d, .t, .f, .m, .x):hover, .mx2 td > a:is(.p, .b, .d, .t, .f, .m, .x):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.mx2 td > small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mx2 tr[data-open] > td:nth-child(n+4):nth-child(-n+15):empty { cursor: pointer; }
.mx2 tr[data-open] > td:nth-child(n+4):nth-child(-n+15):empty:hover::after { content: "＋"; color: var(--mx-empty); }
.mx2-flag { display: inline-flex; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.mx2-flag.r { background: var(--danger-bg); color: var(--danger); }
.mx2-flag.y { background: var(--warn-bg); color: var(--warn); }
.mx2 .mx2-more {
  min-height: 0; height: 20px; margin-left: 4px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1; vertical-align: 1px;
}
.mx2-menu {
  position: fixed; top: var(--y); left: var(--x); z-index: 50; display: flex; flex-direction: column; min-width: 12rem; padding: 4px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
.mx2-menu[hidden] { display: none; }
.mx2-menu a { padding: 6px 10px; border-radius: 4px; color: var(--text); text-decoration: none; }
.mx2-menu a:hover, .mx2-menu a:focus-visible { background: var(--hover-bg); text-decoration: none; }
@media (max-width: 900px) {
  .mx2-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx2 .mx2-name { min-width: 10rem; }
}

/* 報價單「條款類型」（2026-10-24 第二批，樣張 QuoteTerms）：一排三格的單選（工商登記／帳務客戶／其他），選到的那一格深藍底 */
.seg-radio { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.seg-radio label { display: inline-flex; cursor: pointer; }
.seg-radio label span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; background: var(--surface); }
.seg-radio label + label { border-left: 1px solid var(--border-strong); }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg-radio input:checked + span { background: var(--primary); color: var(--on-primary); }      /* 不用 has 偽類（test_s78） */
.seg-radio input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.terms-grid { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.terms-grid textarea { width: 100%; box-sizing: border-box; }
.terms-note { display: block; width: fit-content; margin: 6px 0 2px; }
/* 2026-10-31（所長「版型跑掉了」）：說明字各自一行，不夾在按鈕、條款框旁邊；條款標籤對齊框的上緣（baseline 會跑到框的中間） */
.terms-sub { margin: 6px 0 0; }
details.help.terms-help { margin: 6px 0 0; }
.grid .dt-top { align-self: start; }
.grid dt.dt-top { padding-top: 6px; }

/* 公告（所長 2026-10-31）：內容照打的換行顯示 */
.notice { margin-bottom: 12px; }
.notice h3 { margin: 0; }
.notice > .small { margin: 4px 0 10px; }
.notice-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-acts { display: flex; gap: var(--sp-2); margin-top: 12px; }
.notice-acts form { margin: 0; }

/* ================= 2026-10-25（所長「都照你建議」，樣張 AnnualNoEng、MethodUndo） =================
   扣繳、二代健保、22-1：沒有進行中帳務合約、也沒有工單的客戶收在表格最下面（.an-noeng-foot 虛線框、展開的列 .an-tucked）；
   還有工單的客戶名稱旁加小標籤 .an-noeng-tag。營所稅：存好之後的狀態字 .fp-st（明細頁）／.fp-ed-st（列表小視窗）後面的「復原」.fp-undo */
.an-noeng-tag { display: inline-block; margin-left: var(--sp-2); padding: 0 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.an-noeng-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); }
.an-noeng-foot b { color: var(--text); }
.an-noeng-foot a { min-height: 32px; display: inline-flex; align-items: center; }
.an-table tr.an-noeng-head > th { padding: var(--sp-2) var(--sp-3); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; text-align: left; }
.an-table tr.an-tucked > td { background: var(--surface-2); }
.an-table tr.an-tucked .sg-client > a { color: var(--text-muted); }
.fp-st { min-height: 1.4em; margin: var(--sp-1) 0 0; color: var(--ok); }
.fp-st.bad { color: var(--danger); }
.fp-undo { min-height: 0; margin: 0; padding: 0 2px; border: 0; background: none; box-shadow: none; color: var(--link); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer; }
:where(.fp-undo:not(:disabled)):hover { background: none; }
@media (pointer: coarse) { .fp-undo { min-height: 44px; } }

/* 報價單「報價項目」表格不超出畫面（2026-10-25 第 8 點，樣張 QuoteWidth；quote_form.html）：各欄限寬、格子內距收一點，
   1440 寬、側欄展開（內容區 1,136px；Windows 有捲軸時約 1,119px）整張表放得下；更窄的螢幕照舊在 .table-wrap 裡橫向捲。
   「從價目表帶入」＝打字搜尋（.pp-search）；清單 .pp-list 浮在畫面上（position: fixed，位置由頁尾 script 設 --x／--y），不撐開欄位 */
table.quote-items th, table.quote-items td { padding: 6px 4px; }
table.quote-items th:first-child, table.quote-items td:first-child { padding-left: 8px; }
table.quote-items :where(input, select) { padding-left: 6px; padding-right: 6px; }
table.quote-items input.desc { width: 210px; }
table.quote-items .pp-search, table.quote-items select.pick-price { width: 180px; }
table.quote-items input.qty, table.quote-items input.unit { width: 46px; }
table.quote-items input.price { width: 88px; }
table.quote-items select.stype { width: 140px; }
table.quote-items select.recurring, table.quote-items input.start-month { width: 124px; }
table.quote-items input.note { width: 96px; }
table.quote-items td.amount { min-width: 4em; }
table.quote-items .start-wrap { display: block; margin-top: var(--sp-1); }
table.quote-items input:is(.desc, .note, .pp-search) { text-overflow: ellipsis; }
.pp-list {
  position: fixed; top: var(--y, 0); left: var(--x, 0); z-index: 60; display: flex; flex-direction: column; width: var(--pp-w, 420px);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); overflow: hidden;
}
.pp-scroll { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.pp-group { position: sticky; top: 0; padding: 4px 10px; background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.pp-opt { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 5px 10px; border-top: 1px solid var(--border); cursor: pointer; }
.pp-opt:hover { background: var(--row-hover); }
.pp-opt.on { background: var(--sel-bg); }
.pp-opt .pp-price { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-opt mark { background: var(--warn-bg); color: inherit; border-radius: 2px; }
.pp-empty { padding: 10px; color: var(--text-muted); }
.pp-foot { padding: 4px 10px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); }

/* 日期欄旁邊的民國日期（2026-10-25 第 9 點甲案，樣張 RocDate；app.js 最後一段在每個 input[type=date]／[type=month] 後面插 span.roc-hint）：
   淺灰底小圓角、13px、和格子同一行；空白不顯示（hidden）。只在螢幕上顯示——列印、PDF 不印（不另外寫進 @media print） */
.roc-hint { display: none; }
@media screen {
  .roc-hint {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--code-bg); color: var(--text-muted);
    font-size: var(--fs-sm); line-height: 1.6; white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums;
  }
  table.quote-items .start-wrap .roc-hint { display: table; margin: 2px 0 0; }      /* 報價單開始月份那一格窄：民國字放在格子下面一行 */
  :is(.fp-ed-l, .pc-f, .biz-f) > .roc-hint { align-self: flex-start; margin-left: 0; }      /* 標籤在上、直排的欄位：民國字在格子下面、不拉滿整列 */
}

/* 側欄群組與頂部搜尋（所長 2026-10-25 第 6 點，樣張 NavSearch）
   - 側欄：收起來的組標題旁寫項目數（.sb-count，展開時不顯示；桌機只剩圖示時也不顯示）
   - 頂部搜尋的下拉 .qs-pop（app.js initQuickSearch）：「頁面」「客戶」兩段＋最後一行到客戶列表搜尋；選到的那一列 .on、對上的字 mark.qs-hl */
.sb-count { display: none; margin-left: auto; padding-left: var(--sp-2); color: var(--sb-text); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; opacity: .85; }
.sb-group:not([open]) > .sb-summary .sb-count { display: inline; }
.sb-group:not([open]) > .sb-summary .sb-count + .sb-chev { margin-left: var(--sp-1); }
@media (min-width: 900px) { html.sb-collapsed .sb-group .sb-summary .sb-count { display: none; } }
@media (min-width: 641px) { .tb-search { flex-basis: 400px; } }     /* 提示字變長（「搜尋客戶或頁面（名稱、統編、編號）」）：340px 會被 Ctrl K 蓋掉後半 */
.qs-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; width: max(100%, 26rem); max-height: min(70vh, 32rem); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  font-size: var(--fs-md);
}
.qs-pop[hidden] { display: none; }
.qs-h { padding: var(--sp-1) 12px; background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.qs-o { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 12px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.qs-h + .qs-o { border-top: 0; }
.qs-o:hover { text-decoration: none; }
.qs-o.on { background: var(--sel-bg); }
.qs-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-o small { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-xs); }
.qs-o.qs-all { color: var(--link); }
.qs-o.qs-all .qs-t { flex: 0 1 auto; }
.qs-hl { padding: 0; border-radius: 2px; background: var(--warn-bg); color: inherit; font-weight: 600; }
@media screen { html[data-theme="dark"] .qs-hl { color: var(--warn); } }
@media (max-width: 640px) { .qs-pop { width: auto; right: 0; } }

/* 合作同業詳細頁上方（所長 2026-10-26，樣張 AgentFirm2；agent_firm_detail.html）：抬頭 .record-head 裡多一整列 .af-body——
   看的時候是聯絡人表（.af-contacts），按右上角「編輯」在原地換成編輯表單（.af-edit，app.js initInlineEdit）。聯絡人編輯格子 _afc_rows.html（.afc-edit） */
.af-top .af-body { flex: 1 1 100%; min-width: 0; }
.af-top .af-contacts { margin: 0; }
.af-top .af-contacts th:first-child { width: 18%; }
.af-top .af-contacts th:nth-child(2) { width: 24%; }
.af-top .af-contacts th:nth-child(3) { width: 20%; }
.af-edit .af-sub { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-md); }
.af-edit .form-actions { margin-top: var(--sp-3); }
.afc-edit input { max-width: 100%; }

/* 營業稅向營所稅看齊（所長 2026-10-26 樣張 VatUnify＋P1-1 看板減重；申報進度「營業稅」分頁 tax_board.html、_vat_cell.html）
   - 每期卡片：和「營所稅及帳務進度」同一種 .cards.sg-cards.fp-cards（大數字＋一行說明＋.fp-csub 小字；還沒開始＝.fp-wait 虛線灰卡），
     目前這一期金框 .current；小字一行只列不是 0 的（.vat-cfoot，點下去篩出那一期，逾期紅字 .due-over）
   - 格子：一格只剩 <td class="vd …" data-p="期">短詞</td>（照 .fp-table td.fm 的做法）。四個點＝td::before：它本身是第 1 點，
     第 2～4 點是往右 13／26／39px 的 box-shadow；每一點的樣子由 class 設區域變數（o1～o4 實心 --sg-k5＝做了、l1～l4 實心 --sg-late＝逾期那一點、
     沒寫＝空心 --sg-off：再疊一層縮 1px 的 --surface，和營所稅燈號同一招），10px、不連線，和營所稅入帳燈號同一組大小顏色。
     短詞＝td 的字（灰色小字；tw 交界期／更正中琥珀、ov 逾期紅＋整格淡紅底）；na＝不用報這類只寫「—」不畫點（列印印 title 的字）；
     vd-out＝不在帳務合約期間（「—」、不能點）。有 JS（.vd-js）才看得出可以點：滑過換底、開著小視窗金框（aria-expanded）、鍵盤焦點框、送出中變淡、存好綠框 1 秒。
     列印的規則（點照底色印、「—」印 title 的字）寫在全站唯一那段 @media print。
     請款狀況那一面：b-done＝CSS 畫的淡勾、b-chip＝粗體字＋.vt-* 底色（框在格子裡面一圈）、b-quiet＝淡色小字
   - 圖例（表格下面一行，.sg-legend.vat-legend）的點用 .sg-dot 元素，限定 .vat-legend .vq-st 畫成一樣的大小顏色（簽證進度、工商進度、小視窗 .vm-dots 不受影響） */
.vat-cards .card.current { border-color: var(--gold-line); box-shadow: var(--focus-ring), var(--shadow); }
.vat-cards .vat-cfoot a { color: var(--text-muted); white-space: nowrap; }
.vat-cards .vat-cfoot a.due-over { color: var(--danger); font-weight: 600; }
.vat-cards .vat-cfoot a.on { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-line); }
.vat-table td.vd { width: 7.5rem; height: 44px; padding: 8px 4px 6px; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.3;
  text-align: center; vertical-align: middle; word-break: keep-all; scroll-margin: calc(var(--topbar-h) + 96px) 0 var(--sp-6);
  transition: background-color var(--dur) var(--ease-out); }
.vat-progress td.vd::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 0 3px calc(50% - 24.5px); border-radius: 50%;
  border: 1.5px solid var(--d1l, var(--sg-off)); background: var(--d1b, var(--surface));
  box-shadow: var(--d2, 13px 0 0 -1px var(--surface), 13px 0 0 0 var(--sg-off)), var(--d3, 26px 0 0 -1px var(--surface), 26px 0 0 0 var(--sg-off)),
    var(--d4, 39px 0 0 -1px var(--surface), 39px 0 0 0 var(--sg-off)); }
.vat-progress td.vd:empty::before { margin-bottom: 0; }
.vat-table td.vd.o1 { --d1b: var(--sg-k5); --d1l: var(--sg-k5); }
.vat-table td.vd.l1 { --d1b: var(--sg-late); --d1l: var(--sg-late); }
.vat-table td.vd.o2 { --d2: 13px 0 0 0 var(--sg-k5); }
.vat-table td.vd.l2 { --d2: 13px 0 0 0 var(--sg-late); }
.vat-table td.vd.o3 { --d3: 26px 0 0 0 var(--sg-k5); }
.vat-table td.vd.l3 { --d3: 26px 0 0 0 var(--sg-late); }
.vat-table td.vd.o4 { --d4: 39px 0 0 0 var(--sg-k5); }
.vat-table td.vd.l4 { --d4: 39px 0 0 0 var(--sg-late); }
.vat-table td.vd.tw { color: var(--warn); font-weight: 600; }
.vat-table td.vd.ov { background: var(--sg-late-bg); color: var(--danger); font-weight: 600; }
.vat-progress td.vd:is(.na, .vd-out)::before { content: none; }
.vat-table td.vd:is(.na, .vd-out) { color: var(--faint); font-size: var(--fs-md); font-weight: 400; }
.vat-bill td.vd.b-done::before { content: ""; display: inline-block; width: 6px; height: 11px; margin: 0 0 3px; border: solid var(--done-text);
  border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vat-bill td.vd.b-chip { background: var(--vt-bg); box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--vt-line); color: var(--vt-fg);
  font-size: var(--fs-md); font-weight: 700; }
.vd-js td.vd:not(.vd-out) { cursor: pointer; }
.vd-js td.vd:not(.vd-out, .ov, .b-chip):hover { background: var(--hover-bg); }
.vd-js td.vd.ov:hover { box-shadow: inset 0 0 0 1px var(--danger-line); }
.vat-table td.vd[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--gold-line); }
.vat-table td.vd:focus { outline: none; }
.vat-table td.vd:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.vat-table td.vd.is-saving { opacity: .55; cursor: progress; }
.vat-table td.vd.saved { box-shadow: inset 0 0 0 2px var(--ok); }
.bp-toast.vat-err { background: var(--danger); color: var(--on-primary); }   /* 格子沒有改成功：紅底（role=alert，只念這一次） */
:is(.vat-table, .vat-legend) .vq-st { display: inline-flex; align-items: center; gap: 3px; }
.vat-legend .vq-st > .sg-dot { width: 10px; height: 10px; border: 1.5px solid var(--sg-off); background: var(--surface); }
.vat-legend .vq-st > .sg-dot.done { border: 0; background: var(--sg-k5); }
.vat-legend .vq-st > .sg-dot.late { border: 0; background: var(--sg-late); }
.vat-legend .vq-dash { color: var(--faint); font-size: var(--fs-md); font-weight: 400; }
.vat-legend .vq-late-key { display: inline-flex; align-items: center; padding: 3px 5px; border-radius: 6px; background: var(--sg-late-bg); }
@media (forced-colors: active) {
  .vat-progress td.vd::before { forced-color-adjust: none; }
  .vat-table td.vd.ov { outline: 2px solid CanvasText; outline-offset: -3px; }
}

/* 報價單條款的修改紀錄、唯讀、簽證進度灰字、報價項目金額欄（所長 2026-10-26；quote_terms.html、_quote_terms_form.html、signing_progress.html、quote_form.html）
   - 條款：組長以上才能改，其他同仁唯讀（.terms-ro-note）；修改紀錄每類一張表，內容只寫前 40 字，點開（details.terms-full）看全文（保留換行）
   - 報價項目「金額」欄至少 90px（10/25 第 8 點縮到 1440 寬不用橫捲；這一欄原本 4em 太窄）；多出的寬度從「項目說明」扣 */
.terms-ro-note { display: block; width: fit-content; margin: 0 0 var(--sp-2); }
.terms-h-title { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-md); }
table.terms-history td { vertical-align: top; }
details.terms-full > summary { cursor: pointer; color: var(--text); }
.terms-full-text { margin-top: var(--sp-1); padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
form.terms-restore { display: inline; margin: 0 var(--sp-1) 0 0; }
.sg-not-started { margin: var(--sp-2) 0; }
table.quote-items th.amount, table.quote-items td.amount { width: 90px; min-width: 90px; box-sizing: border-box; }
table.quote-items input.desc { width: 190px; }     /* 金額欄多出的寬度從「項目說明」扣（210 → 190）：Windows 有捲軸時內容區 1,119px 也放得下 */

/* 客戶列表：分類都不勾時藏起來的靜止戶（所長 2026-10-26）——表格上方一行「另有 N 家靜止戶符合…，勾「靜止戶」顯示」 */
.idle-hint { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }

/* 舊的報價單簽回連結停用頁（所長 2026-10-26，樣張 QuoteSignManual；quote_link_disabled.html，不必登入、沒有側欄） */
.link-off-body { margin: 0; background: var(--bg); color: var(--text); }
.link-off { max-width: 32rem; margin: 15vh auto 0; padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--primary); border-radius: var(--radius); text-align: center; }
.link-off h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.link-off p { margin: 0; color: var(--text-muted); font-size: var(--fs-lg); }

/* 報價單頁「確認已簽回」（所長 2026-10-26，樣張 QuoteSignManual；quote_form.html）：日期＋簽署人一排、備註一整排、按鈕一排 */
.sign-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.sign-form .toolbar { margin: 0; }
.sign-note { display: flex; align-items: center; gap: var(--sp-2); }
.sign-note input { flex: 1 1 auto; max-width: 36rem; }

/* 工單列表分頁（所長 2026-10-26 新需求第 2 項，樣張 NR2WoPaging）：表格上下各一條（.pager 元件）；頁碼沿用 .pager-per（目前這一頁 .on），
   顏色全用既有變數（淺色、深色都跟著）。月費請款狀況（新需求第 1 項）小視窗裡的請款單、兩個連結 */
.wo-pager { margin: var(--sp-2) 0; }
.wo-pager-bottom { margin-top: var(--sp-3); }
.wo-pager .wo-gap { padding: 0 var(--sp-1); color: var(--text-muted); }
.wo-page { white-space: nowrap; }
.bm-invs { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); }
.bm-links { margin: 0; font-size: var(--fs-sm); }

/* ================= 申報進度、簽證進度的數字卡字級（所長 2026-10-26 新需求第 3 項；樣張 NR3CardFont，所長改過建議） =================
   申報進度三個分頁（營業稅 .vat-cards、營所稅及帳務 .fp-cards、扣繳／二代健保／22-1 .an-cards）和簽證進度共用 .sg-cards：
   大數字 16（--fs-lg）、不要粗體——完成數、「/ 總數」（.sg-of）、灰卡「還沒開始」「12 月起追蹤」都一樣大，靠顏色分（完成數 --text、總數與灰卡 --text-muted）；
   說明 14、小字（期限、不用報、卡片下面的連結 .fp-csub／.vat-cfoot、22-1 的 .sub）也是 14。手機一樣（原本手機大數字 19）。
   其他頁的數字卡照全站字級表（.card b＝20 粗）。0 張（data-zero）照舊變灰 */
.sg-cards .card { font-size: var(--fs-md); }
.sg-cards .card b, .sg-cards .card[data-zero] b { font-size: var(--fs-lg); font-weight: 400; }

/* ================= 按鈕：一張表單一顆主鈕（所長 2026-10-26 新需求第 5 項；樣張 NR5SaveBtn。改寫 10/02 第二批「一頁最多一顆主鈕」） =================
   每張表單自己的儲存／送出鈕＝.btn-primary（實心深色）；表格每一列、日期旁邊的小「存」、紅色危險動作、查詢、導覽照舊。
   工單頁例外：頁首「完成／覆核」是實心主鈕，下面各區的存檔鈕用次一級 .btn-outline（深藍框白底，和銀行對帳入帳格子的 .bp-go 同一個樣子），
   同仁一眼分得出「完成」比「儲存」重要。深色：--primary 是淺藍灰，框和字照樣看得清楚 */
.btn-outline { border: 1.5px solid var(--primary); background: var(--surface); color: var(--primary); font-weight: 600; }
.btn-outline:not(:disabled):hover { border-color: var(--primary); background: var(--hover-bg); color: var(--primary); }
.btn-outline:not(:disabled):active { background: var(--seg-track); }
/* 工單頁「狀態」選了已取消／改回開案：旁邊那一行提示（所長 2026-10-26：改成已取消後找不到儲存） */
.status-hint { margin-left: var(--sp-2); color: var(--warn); font-weight: 600; }
.status-hint:empty { display: none; }

/* 來源／介紹人三選一（所長 2026-10-26 新需求第 4 項；_referral_field.html、app.js 的 initReferral） */
.rf-box { display: flex; flex-direction: column; gap: 6px; }
.rf-pane { display: flex; flex-direction: column; gap: 4px; }
.rf-hit { align-self: flex-start; border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok); border-radius: 6px; padding: 3px 10px; font-size: var(--fs-md); }
.rf-hit.is-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.rf-hit.is-bad { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.rf-hit ul { margin: 4px 0 0; padding: 0; list-style: none; }
.rf-hit li button { background: none; border: 0; box-shadow: none; min-height: 0; padding: 2px 0; color: var(--link); cursor: pointer; text-align: left; font: inherit; }
.rf-hit li button:hover { text-decoration: underline; background: none; }
.rf-agent { margin: 0; }
/* 客戶列表「符合 N 家（另有 M 家靜止戶沒列）」（所長 2026-10-26） */
.facet-total .idle-more { margin-left: 2px; color: var(--link); font-size: var(--fs-sm); }


/* ---------- 客戶列表欄寬固定、列高一致（所長 2026-10-27 需求清單；對照頁 2-1、2-2） ----------
   table-layout:fixed＋colgroup：勾選條件、換頁、搜尋，欄位都不移動；每一格不折行、列高固定 40px。
   名稱欄拿剩下的寬度，太長尾巴「…」（title 看全名），非營業中、僑外資這些小標籤不縮 */
#clients-table.cl-fixed { table-layout: fixed; width: 100%; }
#clients-table.cl-fixed col.c-no { width: 5.5em; }
#clients-table.cl-fixed col.c-ubn { width: 8em; }
#clients-table.cl-fixed col.c-type { width: 8.5em; }
#clients-table.cl-fixed col.c-cat { width: 7em; }
#clients-table.cl-fixed col.c-owner { width: 8em; }
#clients-table.cl-fixed col.c-rep { width: 8em; }
#clients-table.cl-fixed col.c-src { width: 7.5em; }
#clients-table.cl-fixed > tbody > tr > td { height: 40px; padding-top: 0; padding-bottom: 0; vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clients-table.cl-fixed > thead > tr > th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clients-table.cl-fixed td.cell-name { min-width: 0; }
#clients-table.cl-fixed td.cell-name .nm { display: flex; align-items: center; gap: 4px; min-width: 0; }
#clients-table.cl-fixed td.cell-name .nm > a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#clients-table.cl-fixed td.cell-name .nm > :not(a) { flex: none; margin-left: 0; }
@media (max-width: 640px) {
  #clients-table.cl-fixed { table-layout: auto; }
  #clients-table.cl-fixed > tbody > tr > td { height: auto; white-space: normal; }
}

/* ---------- 代購發票本數：開放本數、每次購買靠左（所長 2026-10-27；對照頁 2-8） ----------
   兩欄數字緊接在發票種類右邊（原本推到最右邊，眼睛對不到同一列），每一列一條細線 */
.inv-grid2 { grid-template-columns: max-content 6.5em 6.5em; justify-content: start; column-gap: 0; row-gap: 0; }
.inv-grid2 > span { padding: 3px 0 3px 1.5em; border-bottom: 1px solid var(--border); }
.inv-grid2 > .k, .inv-grid2 > .h:first-child { padding-left: 0; padding-right: 1em; }
.inv-grid2 > .h { border-bottom-width: 2px; }
.inv-grid2 > .over { padding-left: 0; border-bottom: 0; }


/* ---------- 申報進度四個分頁：表頭縮窄、表格自己一個捲動框（所長 2026-10-27 需求清單截圖；對照頁 2-3） ----------
   外框 .board-fit（營業稅 #vat-fit、營所稅及帳務 .fp、扣繳二代健保 22-1 .an、個人綜所稅 .pit）＋表格外框 .table-wrap.fit-wrap。
   上面那一段縮窄：副標拿掉、分頁和年度／承辦／搜尋併一列（app.js initBoardFit 把 .vat-switch 和 .toolbar 包進 .head-row）、
   數字卡變一排小膠囊。表格框高度＝畫面剩下的高度（app.js 算，加 .is-fit），上下左右都在框裡捲：表頭每一列黏在框頂、
   客戶那一欄（和前面的勾選欄）黏在框左邊（.pin-l，app.js 算 left）。框比畫面寬時左右捲軸就在畫面最下面，表格上方那條滑桿、
   浮動表頭不用了（藏起來）。900px 以下（手機、窄視窗）照舊整頁捲 */
.board-fit .page-sub { display: none; }
.board-fit .page-head { margin-bottom: var(--sp-1); }
.board-fit .head-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-1) 0 var(--sp-2); }
.board-fit .head-row > .vat-switch, .board-fit .head-row > .toolbar { margin: 0; }
.board-fit .sg-cards { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-2); }
.board-fit .sg-cards .card { display: flex; align-items: baseline; gap: 6px; flex: none; min-height: 0; padding: 3px 12px;
  border-radius: var(--radius); font-size: var(--fs-sm); }   /* 小圓角方塊，和上面的篩選膠囊分得開（所長 2026-10-30 #3） */
.board-fit .sg-cards .card b { font-size: var(--fs-md); }
.board-fit .sg-cards .card .fp-csub { display: inline; font-size: var(--fs-sm); }
.board-fit .sg-chips { margin-bottom: var(--sp-2); }
.board-fit .sg-chips a { padding: 2px 10px; font-size: var(--fs-sm); }
.board-fit .table-wrap.fit-wrap.is-fit { overflow: auto; }
.board-fit .table-wrap.fit-wrap.is-fit > table > thead { position: static; }
.board-fit .table-wrap.fit-wrap.is-fit > table > thead > tr > th { position: sticky; z-index: 5; background: var(--surface-2); }
.board-fit .table-wrap.fit-wrap.is-fit .pin-l { position: sticky; z-index: 3; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
.board-fit .table-wrap.fit-wrap.is-fit > table > thead > tr > th.pin-l { z-index: 6; background: var(--surface-2); }
.board-fit.fit-on .top-scrollbar, .board-fit.fit-on .pin-head { display: none !important; }   /* .fit-on：app.js initBoardFit 加 */
@media (max-width: 640px) {
  .board-fit .sg-cards .card { flex: 0 1 auto; flex-wrap: wrap; max-width: 100%; white-space: normal; }   /* 目前期別卡（500px 寬）不撐寬手機頁：各段掉行 */
  .board-fit .sg-cards .card .nowrap, .board-fit .sg-cards .card .vat-cfoot a { white-space: normal; }
}

/* ---------- 收款記錄（所長 2026-10-27；app/templates/billing_receipts.html） ----------
   要補統編、主檔沒有這個統編的列紅底；作廢的整列淡字；「其他」的小選單（標非客戶款、作廢）收在 details 裡 */
#rcpt-table tr.hot > td { background: var(--danger-bg); }
#rcpt-table tr.muted > td { color: var(--text-muted); }
#rcpt-table details.inline-more { display: inline-block; }
#rcpt-table details.inline-more > form { display: flex; gap: 4px; margin-top: 4px; }

/* 快速篩選只有一種樣子（所長 2026-10-30「以上提到的部分都修改」，1029 整體 UX 現況：原本申報進度／月費請款是方塊分頁、
   簽證進度／營所稅是膠囊、年度總表是色塊）：一律是簽證進度那一種——圓角膠囊、字在前、數字膠囊在後、選中的深藍實心；
   出問題的數字用紅色數字膠囊（.count-pill.hot），不再整顆紅底。class 名稱照舊（測試、app.js 認得），只統一樣子 */
.mode-bar.vat-quick, .mx2-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; background: none; border-radius: 0; margin: 0 0 var(--sp-3); }
.mode-bar.vat-quick a, .mx2-chips .mx2-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: var(--fs-md); font-weight: 400; box-shadow: none; text-decoration: none;
}
.mode-bar.vat-quick a:hover, .mx2-chips .mx2-chip:hover { background: var(--hover-bg); color: var(--text); }
.mx2-chips .mx2-chip.hot { border-color: var(--border-strong); background: var(--surface); color: var(--text); }
.mode-bar.vat-quick a.on, .mx2-chips .mx2-chip.on, .mx2-chips .mx2-chip.hot.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 400; box-shadow: none; }
.mode-bar.vat-quick a.on .count-pill, .mx2-chips .mx2-chip.on .count-pill { background: var(--on-primary-pill); color: var(--on-primary); }
.board-fit .mode-bar.vat-quick { margin-bottom: var(--sp-2); }
@media (min-width: 901px) { .board-fit .mode-bar.vat-quick a { min-height: 0; padding: 2px 10px; font-size: var(--fs-sm); } }   /* 手機照樣 44px 好按 */

/* 待確認清單：超過 20 筆的區段預設收起（所長 2026-10-30，1029 整體 UX 現況） */
details.pend-sec { margin: -4px 0 20px; }
details.pend-sec > summary { width: fit-content; margin-bottom: 8px; color: var(--link); cursor: pointer; }
details.pend-sec[open] > summary { color: var(--text-muted); }


/* ---------- 上線初期精簡顯示（所長 2026-10-30；app/quiet.py；<html class="quiet"> 由 base.html 依開關加） ----------
   進度列、申報進度一行：0 張／0 家的格子不顯示（有了才出現）。全站不用 :has（test_s103），所以 home.html 的 <li> 也帶 data-zero；
   箭頭改畫在「前面還有看得到的格子」的那一格前面（::before，兄弟選擇器），原本接在每格後面的 ::after 不畫 */
html.quiet .home .flow li[data-zero] { display: none; }
html.quiet .home .flow li:not(:last-child)::after { content: none; }
/* 全站 .flow li + li::before 是 position: absolute，工作台的 li 又是 static，不蓋掉箭頭會全部疊到進度列最左邊、格子字黏在一起（第十版評比，2026-10-31） */
html.quiet .home .flow li:not([data-zero]) ~ li:not([data-zero])::before { content: "→"; position: static; top: auto; left: auto; transform: none; margin: 0 var(--sp-3); color: var(--faint); line-height: 1; }
@media (max-width: 480px) { html.quiet .home .flow li:not([data-zero]) ~ li:not([data-zero])::before { content: "・"; margin: 0 2px; } }
html.quiet .home .home-line > a[data-zero] { display: none; }