:root{--bg:#f4f6f9;--card:#fff;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--brand:#2563eb;--brand2:#1e40af;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--side:#fff}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:var(--brand);text-decoration:none}
/* 按鈕全站規則（業主定版 2026-07-11）：一律圓角框；hover＝按鈕外藍色「閃爍虛線框」（移開即消失）；
   選取（focus，點擊後保持到點別處）＝藍色實線框。新增任何按鈕不需額外寫樣式，自動套用。 */
button{cursor:pointer;font:inherit;border:none;border-radius:8px;padding:6px 14px;background:var(--brand);color:#fff;white-space:nowrap} /* 2026-07-18 業主指示：按鈕文字一律不斷行（.row 是 flex-wrap，擠不下會整顆換行不會擠出畫面） */
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
button.ok{background:var(--ok)}button.bad{background:var(--bad)}button.warn{background:var(--warn)}
button.pill-b{background:#dbeafe;color:#1e40af}button.pill-r{background:#fee2e2;color:#991b1b}/* 淺色版按鈕（同 .pill.b/.pill.r 色階），2026-08-30 加給記錄頁「修改/清除加給」用 */
/* 訊息記錄分類篩選標籤（2026-09-03 業主指示「所有標籤都淺藍色」）：同一淺藍色階深淺區分選取狀態，
   未選＝淺藍底、選取＝深藍實色，沿用站內既有淺藍色階（同 .pill.b/.gc-dispatch 色碼） */
button.ml-cat{background:#dbeafe;border:1px solid #93c5fd;color:#1e40af}
button.ml-cat.on{background:#2563eb;border-color:#2563eb;color:#fff}
/* 「推播失敗」單獨淺紅色系（2026-09-03 業主指示）：失敗是警示性質，跟其他分類的淺藍色系區分開，
   沿用站內既有淺紅色階（同 .pill-r/.pill.r 色碼），未選＝淺紅底、選取＝深紅實色 */
button.ml-cat-fail{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b}
button.ml-cat-fail.on{background:#dc2626;border-color:#dc2626;color:#fff}
button:disabled{opacity:.45;cursor:not-allowed}
/* 後台所有勾選欄位統一改成「項目名稱」文字開關：灰＝未啟用、綠＝已啟用。原 input 保留在 DOM，既有儲存與選取程式仍讀取 .checked。 */
input.text-toggle-source{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;opacity:0!important;pointer-events:none!important}
.text-toggle-button{min-height:30px;padding:5px 10px;margin:0!important;border:1px solid #d1d5db!important;font-size:12px!important;font-weight:700;line-height:1.1}
.text-toggle-button.off{background:#f3f4f6;color:#6b7280}
.text-toggle-button.on{background:#dcfce7;color:#166534;border-color:#86efac!important}
.text-toggle-button:disabled{background:#f3f4f6!important;color:#9ca3af!important;border-color:#e5e7eb!important}
/* 選單顯示控管（2026-08-09 業主指示）：這頁「勾選＝對別人隱藏」語意跟全站「勾選＝啟用（綠）」相反，
   勾選的膠囊要淺紅警示，不可出現淺綠 */
.mc-groups .text-toggle-button.on{background:#fee2e2!important;color:#991b1b!important;border-color:#fca5a5!important}
/* 外流溯源浮水印（2026-07-28 業主指示）——這組樣式原本只寫在「表單列印殼」彈窗模板裡，
   主後台頁面沒有：admin 豁免看不到，其他帳號（如 LINE 登入的管理者）一登入，浮水印層就變成
   頁尾一大坨全黑純文字（2026-08-10 業主回報「下方出現亂碼」）。主頁樣式補在這裡。 */
#wm-layer{position:fixed;inset:0;z-index:2147483000;pointer-events:none;overflow:hidden;
  display:flex;flex-wrap:wrap;align-content:flex-start;opacity:.10;user-select:none}
#wm-layer span{transform:rotate(-24deg);white-space:nowrap;font-size:15px;font-weight:700;
  color:#1f2937;width:33.34%;padding:34px 0;text-align:center;letter-spacing:1px}
@media print{#wm-layer{position:absolute;opacity:.18}}
.text-toggle-original-label{display:none!important}
/* 2026-07-24 業主指示：訊息中心「訊息發送」頁全部字體統一成跟按鈕（案場資訊群）同一個大小——
   頁面裡各處零散的 11/12/13px 小字全部蓋掉，不必逐一改內文，用 !important 統一比較不會漏改。 */
.uniform14,.uniform14 *{font-size:14px !important}
@keyframes btn-blink{50%{outline-color:transparent}}
@keyframes pp-blink{0%,100%{box-shadow:0 0 0 3px rgba(220,38,38,.9)}50%{box-shadow:0 0 0 3px rgba(220,38,38,.1)}} /* 缺勤未請假徽章點擊跳轉提示（2026-07-20），維持5秒後JS自動移除 */
.pp-blink{animation:pp-blink .5s ease-in-out 10;border-radius:8px}
/* 彈窗來源按鈕持續閃爍紅框（2026-08-19 業主指示：所有彈出視窗都要在原來的按鈕做持續閃爍紅色框線）——
   admin-01-core.js modal()/confirm2() 開窗時標 .confirm-src、收窗移除；!important 蓋過 button:hover/:focus 的藍框與 animation:none */
@keyframes confirm-src-blink{0%,100%{outline-color:var(--bad);box-shadow:0 0 0 5px rgba(220,38,38,.45)}50%{outline-color:transparent;box-shadow:0 0 0 5px rgba(220,38,38,0)}}
.confirm-src,.confirm-src:hover,.confirm-src:focus,.confirm-src:focus-visible{outline:3px solid var(--bad)!important;outline-offset:2px!important;animation:confirm-src-blink .7s steps(1) infinite!important;border-radius:6px}
button:hover:not(:disabled){outline:2px dashed #2563eb;outline-offset:2px;animation:btn-blink .8s steps(1) infinite}
button:focus,button:focus-visible{outline:2px solid #2563eb;outline-offset:2px;animation:none}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:#fff;width:100%}
label{display:block;margin:8px 0 3px;color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
/* 記錄中心依日期收成一框：同一天的訊息先看成一組，跨日才換框。
   border-spacing 必須為 0（2026-08-09 業主回報框線包不起來）：舊值 0 10px 讓每一列之間都有
   10px 空隙，左右框線被切成一列一列的孤島；天與天的間隔改由 .record-day-gap 墊高列負責 */
table.record-day-table{border-collapse:separate;border-spacing:0;background:transparent}
.record-day-gap td{border:none!important;background:transparent!important;height:12px;padding:0}
.record-day-label td{background:#eff6ff!important;border:1px solid #93c5fd;border-bottom-color:#dbeafe;border-radius:8px 8px 0 0;color:#1e40af;font-weight:700;padding:6px 10px;cursor:pointer;user-select:none}
.record-day-label span:last-child{float:right;font-size:12px;font-weight:400;color:#64748b}
.record-day-frame>tr:not(.record-day-label)>td:first-child{border-left:1px solid #93c5fd}
.record-day-frame>tr:not(.record-day-label)>td:last-child{border-right:1px solid #93c5fd}
.record-day-frame>tr:last-child>td{border-bottom:1px solid #93c5fd}
.record-day-frame>tr:last-child>td:first-child{border-radius:0 0 0 8px}
.record-day-frame>tr:last-child>td:last-child{border-radius:0 0 8px 0}
/* 日期列點選收合（2026-08-09 業主指示）：收合只藏內容列，標頭列補回四角圓框與底線 */
.record-day-caret{display:inline-block;font-size:10px;color:#3b82f6;transition:transform .15s ease}
.record-day-collapsed>tr:not(.record-day-label){display:none}
.record-day-collapsed .record-day-caret{transform:rotate(-90deg)}
.record-day-collapsed .record-day-label td{border-radius:8px;border-bottom-color:#93c5fd}
/* 外框表（2026-08-19 業主指示：分組表要對齊、用外框線包起來）：整張表一圈邊框＋圓角，欄位有直線分隔；
   分組標題列 tr.grp 用 colspan 一整列淺底粗體——同一張表才能保證各組欄寬一致，不要每組各畫一張表 */
/* border-collapse 必須是 separate（2026-08-19 前端實跑審查）：collapse 之下 border-radius 根本不繪製，
   圓角是白寫的——同檔 table.record-day-table 早就為了同一件事改過。這裡各儲存格只有下框線與右框線
   （最後一列／最後一欄再各自拿掉），本來就沒有相鄰框線要合併，改 separate＋border-spacing:0 外觀不變。 */
table.framed{border:1px solid var(--line);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}
table.framed th,table.framed td{border-right:1px solid var(--line)}
table.framed th:last-child,table.framed td:last-child{border-right:none}
table.framed tr:last-child td{border-bottom:none}
table.framed tr.grp td{background:#f1f5f9;font-weight:700;color:var(--ink);border-right:none;padding:6px 10px}
/* 部門區塊框線（2026-08-22 業主指示：「員工管理、每個部門區塊都用框線包住」）——
   整頁是一張 table（同一張表各段欄寬才對得齊，2026-08-19 定案），所以「框住一個區塊」不能用 div，
   改成：部門標題列畫上緣、區塊每一列畫左右、區塊最後一列畫下緣，視覺上就是一個盒子。
   顏色用品牌淡藍（同部門標題的字色系），跟表格本身的灰線分得開。 */
table.framed tr.dept-box > td:first-child{border-left:1.5px solid var(--brand-line,#bfdbfe)}
table.framed tr.dept-box > td:last-child{border-right:1.5px solid var(--brand-line,#bfdbfe)}
table.framed tr.grp-dept.dept-box > td{border-top:1.5px solid var(--brand-line,#bfdbfe);border-left:1.5px solid var(--brand-line,#bfdbfe);border-right:1.5px solid var(--brand-line,#bfdbfe)}
table.framed tr.dept-last > td{border-bottom:1.5px solid var(--brand-line,#bfdbfe)}
table.vmid td{vertical-align:middle} /* 有多行內容的列（如扣款進度條＋摘要）其餘欄位垂直置中才看得齊（2026-07-26 業主指示） */
th{background:#f9fafb;color:var(--muted);font-weight:600;white-space:nowrap;position:sticky;top:0}
tr:hover td{background:rgba(15,23,42,.045)} /* 半透明疊加：hover 不蓋掉狀態底色（2026-07-18 業主回報誤導） */
.layout{display:flex;height:100vh} /* 2026-07-22 業主指示：側欄跟內容分開各自捲動——固定滿版高，左右各自 overflow-y:auto（見下）；換頁時內容一律從頂端顯示，不會被側欄目前捲到哪卡住 */
.side{width:220px;background:var(--side);color:var(--ink);flex-shrink:0;padding:14px 0;border-right:1px solid var(--line);overflow-y:auto}
.side h1{font-size:17px;color:var(--ink);padding:4px 18px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.side .grp{font-size:18px;color:var(--brand);padding:14px 18px 4px;letter-spacing:.01em;font-weight:800;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 8px} /* 2026-07-15 業主指示：選單區部門分組標題再大一級、粗體、藍色（沿用 --brand 品牌藍，跟 side-grp-box 邊框同一支藍） */
.side .grp .sub{display:inline;font-size:11.5px;color:#9aa3b2;letter-spacing:.03em;margin-top:0;text-transform:none;font-weight:400;white-space:nowrap}
.side .side-grp-box{border:1.5px solid var(--brand);border-radius:10px;margin:8px 10px;padding:2px 0;overflow:hidden}
/* ADMIN 專區＝危險區域（2026-08-10 業主指示）：淺紅底＋紅框，跟一般部門區塊一眼區分 */
.side .side-admin-zone{border-color:#fca5a5;background:#fef2f2}
.side .side-admin-zone .grp{color:#b91c1c}
.side .side-grp-box .grp{padding-top:8px}
.side a{display:block;padding:7px 18px;color:var(--ink);font-size:14px;border-left:4px solid transparent}
.side a.on{background:#eff6ff;color:var(--brand);border-left:4px solid var(--brand);font-weight:700}
.side a:hover{background:#f3f4f6}
/* 選單顯示控管的 admin 端標記（2026-08-08 業主指示）：淺灰字＋兩條紅色刪除線＝
   「這項正在對其他人隱藏」。別人的選單上它完全不存在，這個標記只有 admin 看得到。 */
.side a.devhidden{color:#9ca3af;text-decoration:line-through double #dc2626;text-decoration-thickness:1.5px}
.side a.devhidden:hover{color:#9ca3af;text-decoration:line-through double #dc2626;background:#f8fafc}
.side a.devhidden.on{color:#9ca3af;text-decoration:line-through double #dc2626;font-weight:400}
.side a.soon{color:var(--muted);font-style:italic}
/* 選單顯示控管（2026-08-06 業主指示）：對別人隱藏的項目，admin 自己看要淺灰＋框線標出來，不然設定完
   完全看不出「哪些正在對別人隱藏」；淺灰蓋掉 .on 的藍字/藍底也蓋掉 hover，視覺上要一眼跟正常項目分開 */
.side .tag{font-size:11px;color:var(--muted);margin-left:6px}
.side .acct-wrap{margin-top:18px}
.side .acct-foot{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.side .acct-foot a{color:var(--muted)}
/* 樹狀母項支線（2026-07-13）：子項容器左側一條主幹線＋每個子項一條水平短枝，明顯呈現樹狀階層，預設展開 */
.side .tree-kids{position:relative}
.side .tree-kids::before{content:'';position:absolute;left:29px;top:0;bottom:12px;width:1px;background:var(--line)}
.side .tree-kids a{position:relative}
.side .tree-kids a::before{content:'';position:absolute;left:29px;top:50%;width:9px;height:1px;background:var(--line)}
.hamburger{display:none;background:#fff;color:var(--ink);border:1px solid var(--line);padding:6px 10px;margin-right:10px;font-size:16px;line-height:1}
.side-backdrop{display:none}
.m-fab-menu{display:none}/* 行動版浮動選單鍵（賈選20）：長捲時左下常駐，不用捲回頂端找漢堡；桌機隱藏 */
.main{flex:1;padding:22px;max-width:calc(100vw - 220px);overflow-y:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.topbar .tb-left{display:flex;align-items:center}
.topbar h2{font-size:20px}
#pg-crumb{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.dict-card{border:2px solid var(--brand);border-radius:12px} /* 解析中心（2026-07-16 業主指示）：各詞典區塊藍色圓角框區隔 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
/* 圖卡瀏覽模式（業主指示 2026-07-15）：立體名片質感——白底微漸層＋陰影堆疊模擬紙卡厚度，hover 微浮起 */
.biz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:14px}
/* 分區區塊（2026-07-15 業主指示：員工管理圖卡/清單都依正職/支援/離職分三塊，圓角藍色框線區隔，沿用側欄 side-grp-box 同一套視覺語言） */
.sec-box{border:1.5px solid var(--brand);border-radius:12px;padding:12px 14px 14px;margin-bottom:14px}
.sec-hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
/* 推播總覽依實際接收對象分框：先看「誰會收到」，再看每一則何時發；開關留在同一列，避免設定入口分散。 */
.push-target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;margin-top:10px}
.push-target-frame{border:1.5px solid #93c5fd;border-radius:12px;background:#fff;overflow:hidden}
.push-target-frame.tg{border-color:#a7f3d0}
.push-target-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;background:#eff6ff;color:#1e40af;font-weight:700}
.push-target-frame.tg .push-target-head{background:#ecfdf5;color:#065f46}
.push-notice-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-top:1px solid var(--line)}
.push-notice-row input{width:auto;flex:0 0 auto;margin-top:2px}
.form-switch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:10px}
.form-switch-card{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.form-switch-channels{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.form-channel-toggle{min-height:44px;padding:7px 12px;border:1px solid #86efac;background:#dcfce7;color:#166534;font-weight:700}
.form-channel-toggle.off{border-color:#d1d5db;background:#f3f4f6;color:#6b7280}
.form-channel-toggle:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.form-channel-toggle.loading{opacity:.65}
.push-notice-title{font-weight:700;line-height:1.45}
.push-notice-note{font-size:12px;color:var(--muted);line-height:1.5;margin-top:2px}
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{cursor:pointer} /* 點欄位任意處即開選擇器（2026-07-18 業主指示） */
.sec-hd .pill{font-size:13px;padding:3px 12px}
.biz-card{background:linear-gradient(155deg,#ffffff,#f4f6fb 88%);border-radius:14px;padding:14px 16px 12px;cursor:pointer;
  border:1px solid var(--line);border-top-width:4px;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 18px -8px rgba(15,23,42,.18);
  transition:transform .15s ease,box-shadow .15s ease}
.biz-card:hover{transform:translateY(-3px);box-shadow:0 3px 8px rgba(15,23,42,.10),0 16px 26px -10px rgba(15,23,42,.24)}
.biz-card .bc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.biz-card .bc-name{font-size:18px;font-weight:800;color:var(--ink);line-height:1.3;margin-top:8px}
.biz-card .bc-sub{font-size:12px;color:var(--muted);margin-top:1px}
.biz-card .bc-phone{font-size:14px;margin-top:10px;font-weight:700;color:var(--brand)}
.biz-card .bc-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px}
.biz-card.sp-closed{filter:grayscale(85%);opacity:.6}
.biz-card.sp-closed:hover{opacity:.85}
/* 廠商圖卡「一列10個」精簡卡（2026-07-20 業主指示） */
.biz-card-mini{background:linear-gradient(155deg,#ffffff,#f4f6fb 88%);border:1px solid var(--line);border-radius:10px;
  padding:8px 9px 7px;cursor:pointer;width:100%;min-width:0;box-sizing:border-box;transition:transform .12s ease,box-shadow .12s ease}
.biz-card-mini:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(15,23,42,.14)}
.biz-card-mini .bcm-name{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-card-mini .bcm-sub{font-size:10.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-card-mini .bcm-phone{font-size:11px;color:var(--brand);font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 監測卡自適應（2026-08-01 業主回報「154/412（37%）」這類長數字在部分螢幕超出卡框）：
   每張卡自成查詢容器，字級隨卡寬縮放（cqw）、白名單斷行改為允許換行當最後退路，任何尺寸都不出框 */
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;min-width:0;container-type:inline-size}
.stat .v{font-size:clamp(18px,13cqw,26px);font-weight:700;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:2px;line-height:1.15}
.stat .t{color:var(--muted);font-size:12px;margin-top:2px}
.stat.alert .v{color:var(--bad)}
.stat-den{font-size:clamp(12px,8cqw,16px);font-weight:400;color:#9ca3af} /* 儀表板卡片「分子/分母」的分母（2026-07-16 業主指示：以分之幾＋百分比呈現） */
.stat-pct{color:#2563eb;font-size:clamp(12px,8cqw,16px);font-weight:400;margin-left:1ch} /* 2026-07-24 業主指示：括號＋藍字接分母右邊；間距縮為1ch（2026-08-01 防超框） */
/* 儀表板（2026-07-16 業主指示：本頁字體全部放大 2 級）：僅套用在 .dash-page 容器內，不影響其他頁面共用的 .stat/.cards/label */
.dash-page label{font-size:16px}
.dash-page .muted{font-size:16px}
.dash-page .stat .v{font-size:clamp(20px,14cqw,32px)}
.dash-page .stat .t{font-size:15px}
.dash-page .stat-den{font-size:clamp(13px,9cqw,20px)}
.dash-page .stat-pct{font-size:clamp(13px,9cqw,20px)}
.dash-page .m-quick a{font-size:16px}
.dash-page .m-quick a .ico{font-size:26px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.row>div{flex:1;min-width:130px}
.pill{display:inline-block;border-radius:99px;padding:1px 9px;font-size:12px}
.pill.g{background:#dcfce7;color:#166534}.pill.r{background:#fee2e2;color:#991b1b}
.pill.y{background:#fef3c7;color:#92400e}.pill.b{background:#dbeafe;color:#1e40af}.pill.gr{background:#f3f4f6;color:#374151}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:12px;padding:20px;width:min(680px,94vw);max-height:88vh;overflow:auto}
.modal h3{margin-bottom:10px}
.modal-bg.salary-detail-bg{align-items:flex-start;padding:3vh 0;overflow-y:auto}
/* 薪資明細必須完整展開：只讓整個彈窗層捲動，不能把出勤列困在固定高度的內部捲軸。 */
.modal.salary-detail-modal{width:min(1040px,96vw);max-height:none;padding:0;overflow:visible}
/* 照片檢視彈窗（2026-08-21 業主指示：點料單照片要完整顯示，不要限制範圍再用捲軸）——
   一般 .modal 是 680px/88vh 的通用尺寸，塞真實拍照的直式照片會被切一半、逼著用內層捲軸看；
   加寬加高讓大多數照片一次看完整，多張時仍靠外層捲動（不是每張各自被裁切）。 */
.modal.photo-modal{width:min(900px,96vw);max-height:94vh}
.salary-detail-head{margin:0;padding:14px 20px 12px;display:grid;grid-template-columns:42px minmax(0,1fr) 42px auto;align-items:center;gap:8px;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--line);background:#fff}
.salary-detail-nav{width:42px;min-width:42px;padding:2px 0!important;font-size:15px!important;line-height:1.4}
.salary-detail-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.salary-detail-index{font-size:13px;font-weight:400;white-space:nowrap}
.salary-detail-body{overflow:visible;padding:12px 20px 20px;container-type:inline-size;container-name:salary-detail}
/* 薪資明細以彈窗內容寬度（不是螢幕實體解析度）決定欄位：Windows 顯示比例、側欄寬度、
   瀏覽器縮放都會改變可用寬度，不能只用 viewport 猜「這是不是小螢幕」。 */
.salary-detail-grid>span{min-width:0;overflow-wrap:anywhere}
.salary-detail-sheet{display:flex;flex-direction:column;gap:6px}
@container salary-detail (max-width: 800px){
  .salary-detail-grid{grid-template-columns:72px minmax(0,1.15fr) minmax(0,.85fr) 72px 52px 36px!important;gap:4px!important;padding-left:10px!important;padding-right:10px!important}
}
@container salary-detail (max-width: 600px){
  .salary-detail-colheads{display:none!important}
  .salary-detail-day-row{grid-template-columns:66px minmax(0,1fr) max-content!important;grid-template-areas:"date site units" "date note perf" "date note deduction";gap:3px 8px!important;padding:7px 10px!important;align-items:start!important;min-height:0!important}
  .salary-detail-date{grid-area:date;white-space:nowrap}
  .salary-detail-site{grid-area:site}
  .salary-detail-note{grid-area:note;color:var(--muted)}
  .salary-detail-note:not(.is-empty)::before{content:'備註：';font-size:12px;color:#64748b}
  .salary-detail-perf{grid-area:perf;text-align:right!important;white-space:nowrap}
  .salary-detail-perf:not(.is-empty)::before{content:'加給 ';font-size:12px;color:#64748b}
  .salary-detail-deduction{grid-area:deduction;text-align:right!important;white-space:nowrap}
  .salary-detail-deduction:not(.is-empty)::before{content:'扣款 ';font-size:12px;color:#64748b}
  .salary-detail-units{grid-area:units;text-align:right!important;white-space:nowrap}
  .salary-detail-grid .is-empty{display:none}
}
@media(max-width:600px){
  .modal.salary-detail-modal{width:96vw}
  .salary-detail-head{padding:10px 12px;grid-template-columns:38px minmax(0,1fr) 38px auto;gap:5px}
  .salary-detail-nav{width:38px;min-width:38px}
  .salary-detail-index{font-size:11px}
  .salary-detail-body{padding:10px 12px 16px}
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
/* 公司資訊名片卡（2026-07-14 業主指示：上線設定「公司名稱」步驟改做成名片版面）*/
.bizcard{background:linear-gradient(135deg,#0f172a,#1e3a5f 60%,#1e40af);border-radius:14px;padding:20px 22px;box-shadow:0 6px 18px rgba(15,23,42,.18)}
.bizcard .bc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:12px;margin-bottom:12px}
.bizcard .bc-name input{font-size:20px;font-weight:700;background:transparent;border:none;color:#fff;padding:2px 0;width:auto;min-width:160px}
.bizcard .bc-name input::placeholder{color:rgba(255,255,255,.55)}
.bizcard .bc-tax{text-align:right;font-size:12px;color:rgba(255,255,255,.75)}
.bizcard .bc-tax input{background:transparent;border:none;border-bottom:1px dashed rgba(255,255,255,.4);color:#fff;text-align:right;padding:2px 0;width:110px;border-radius:0}
.bizcard .bc-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.bizcard .bc-ico{width:18px;text-align:center;opacity:.85;color:#fff}
.bizcard .bc-row input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;flex:1;min-width:140px}
.bizcard .bc-row input::placeholder{color:rgba(255,255,255,.62)}
/* 上線設定頁籤（2026-07-14）：頁籤列可換行；作用中頁籤沿用一般按鈕實心樣式，其餘用 ghost（灰框），與 subTabs() 同一套視覺語言 */
.setup-tabbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}
.setup-tab{font-size:14px;padding:7px 14px;white-space:nowrap} /* 2026-07-17 業主指示：步驟頁籤字放大 2 級 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .d{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:110px;padding:6px;cursor:pointer;font-size:12px}
.cal .d:hover{border-color:var(--brand)}
.cal .d.wk{background:#f8fafc} /* #2 週末直欄淡灰（公休綠 .off 定義在後、優先生效） */
.cal .d.today{border:2px solid var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.18)} /* #1 今日高亮 */
.cal .d .cal-add{display:none;margin-top:6px;padding:2px 8px;font-size:11px} /* #10 空日補建：hover 才現身 */
.cal .d:hover .cal-add{display:inline-block}
.cal .d.dim{opacity:.22} /* #7 案場搜尋：不含關鍵字的日子壓淡 */
.cal .d .cal-site.hit{background:#fef9c3;border-radius:4px}
.cal .d .cal-site{cursor:pointer}
.cal .d.dragover{outline:2px dashed var(--brand);outline-offset:-2px} /* #18 拖曳排班目標框 */
@media (max-width:820px){.cal{grid-template-columns:1fr}.cal .hd{display:none}.cal .d{min-height:auto}.cal .d:not(.has){padding:4px 8px}} /* #15 手機一天一卡直排 */
.cal .d.off{background:#dcfce7} /* 老闆群組有公告公休的日子：淺綠底（2026-07-17 業主指示，取代原灰色）；照常派工時場次照列 */
.cal .d.off .n{color:#166534}
.cal .d .cal-site{font-size:15px;color:#334155;border-top:1px dashed var(--line);padding:2px 0;word-break:break-all;line-height:1.35} /* 完整案場地址逐行列出，不截斷（2026-07-22 業主指示：比照【未到】區字級放大） */
.cal .d .cal-reg{border:1px solid #c7d2fe;border-radius:8px;padding:2px 6px 3px;margin-top:4px;background:#fff} /* 2026-07-17 業主指示：每日案場依縣市區域畫圓角框區隔 */
.cal .d .cal-reg-h{font-weight:700;font-size:14px;color:#4338ca}
.cal .d .cal-reg .cal-site:first-of-type{border-top:0}
/* 即時搜尋下拉（2026-07-17 業主指示：銀行代碼/分行/統編共用）：打字即列、首項高亮、↑↓切換、Enter 或停 1.5 秒帶入 */
.ta-box{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.14);max-height:240px;overflow:auto}
.ta-it{padding:6px 10px;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-it.on{background:#dbeafe}
.ta-it:hover{background:#eff6ff}
/* 流程圖直繪元件（2026-07-17 業主指示重畫：五流程獨立頁籤，HTML 畫、改流程改字即可） */
/* 流程圖直繪元件（.fc-*）2026-08-05 隨流程圖整組移除；.formula-chip .fc-* 是另一組帶父層的選擇器，仍在使用 */
/* 員工歷程垂直時間軸（2026-07-17 業主指示） */
.tl{position:relative;margin-top:6px;padding-left:24px}
.tl:before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:#bfdbfe}
.tl-it{position:relative;padding:6px 0}
.tl-dot{position:absolute;left:-21px;top:11px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--brand)}
/* 回報範本積木池（2026-07-17 業主指示：圓角物件池、拖到指定位置插入） */
.tpl-pool{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;padding:10px;border:1.5px dashed #93c5fd;border-radius:12px;background:#eff6ff}
.tpl-chip{border:1.5px solid #93c5fd;background:#fff;border-radius:99px;padding:6px 14px;font-size:13px;cursor:grab;user-select:none;white-space:nowrap}
.tpl-chip:hover{background:#dbeafe;border-color:var(--brand)}
.tpl-chip.lk{opacity:.45;cursor:not-allowed}
.tpl-canvas{min-height:46px}
.tplrow.ins-b{box-shadow:0 -3px 0 0 var(--brand)}
.tplrow.ins-a{box-shadow:0 3px 0 0 var(--brand)}
.cal .d .n{font-weight:700}
.cal .d .dhead{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-weight:700;font-size:15px} /* 日期(7/1)左、場數中、實到/應到右，同字級（2026-07-17 業主指示） */
.cal .hd{text-align:center;color:var(--muted);font-size:12px}
/* 派工總覽多月份檢視（2026-07-15 業主指示：右上 1/3/6/12 切換顯示區間，每月藍色圓角框包覆，預設定位本月） */
.cal-modes{display:flex;gap:4px;flex:0}
.cal-modes button{min-width:38px;padding:6px 10px;font-weight:700}
.cal-modes button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.cal-month{border:2px solid var(--brand);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.cal-month>.mh{font-weight:800;color:var(--brand);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cal-month.now{background:#f0fdf4;box-shadow:0 0 0 3px rgba(22,163,74,.18)} /* 本月：綠底 */
.cal-month.other-year{background:#f3f4f6} /* 非本年度：灰底 */
.schcard{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff}
.schs{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button{background:none;color:var(--muted);border-radius:6px 6px 0 0;padding:8px 16px}
.tabs button.on{color:var(--brand);border-bottom:2px solid var(--brand);font-weight:600}
.muted{color:var(--muted)}.mono{font-family:ui-monospace,monospace}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login{background:#fff;border-radius:14px;padding:34px;width:340px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.toast{position:fixed;right:18px;bottom:18px;background:#111827;color:#fff;padding:10px 18px;border-radius:8px;z-index:99;opacity:.95}
.toast.ok{background:#166534}.toast.bad{background:#991b1b}
.bar{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden}.bar>div{height:100%;background:var(--brand)}
pre.preview{background:#f9fafb;border:1px solid var(--line);border-radius:8px;padding:12px;white-space:pre-wrap;font-size:13px}
.num{text-align:right}
/* 表格數字欄對齊（2026-07-26 業主指示：表頭要跟數值對齊、數字欄不撐寬）——
   td.num 與「只裝 money() 金額的儲存格」縮到內容寬（width:1%+nowrap），數字用等寬數字；
   th.num 給數字欄表頭右靠與數值切齊。.sc-tbl 報表版式在後面宣告，其置中規則優先權不變 */
td.num{width:1%;white-space:nowrap;font-variant-numeric:tabular-nums}
th.num{text-align:right;width:1%;white-space:nowrap}
td:has(>span.num:only-child){width:1%;white-space:nowrap}
.warnbox{border:1px solid var(--warn);background:#fffbeb;border-radius:10px;padding:12px;margin-bottom:14px}
.pg-blurb{color:#595959;font-size:13px;margin-bottom:12px;line-height:1.6}
/* 小秉說明框（2026-08-21）：底部一條，不是分割面板——頭像＋一句話＋收起。只佔一行高度，不偷內容區。
   bubble 仿 LINE 對話泡（左上角尖角指向頭像），整體維持全站白底灰框語彙。 */
#bot-dock{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:60;align-items:flex-end;gap:10px;max-width:min(720px,calc(100vw - 28px));pointer-events:none}
#bot-dock>*{pointer-events:auto}
#bot-dock .bd-av{width:46px;height:46px;border-radius:50%;border:2px solid #fff;padding:0;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.22);cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
#bot-dock .bd-av img{width:100%;height:100%;object-fit:cover;display:block}
#bot-dock .bd-av .bd-emoji{font-size:22px}
/* 黑色框線（2026-08-22 業主指示）；尖角用兩層偽元素做出有框線的箭頭 */
#bot-dock .bd-bubble{position:relative;background:#fff;border:1.5px solid #111;border-radius:14px;padding:8px 12px;box-shadow:0 4px 18px rgba(0,0,0,.14);font-size:13px;line-height:1.6;min-width:0}
#bot-dock .bd-bubble::before{content:'';position:absolute;left:-10px;bottom:12px;border:10px solid transparent;border-right-color:#111;border-left:0}
#bot-dock .bd-bubble::after{content:'';position:absolute;left:-8.5px;bottom:13.5px;border:8.5px solid transparent;border-right:9px solid #fff;border-left:0} /* 白色內箭頭要蓋過泡泡左框線（-1.5px）——不然框線在箭頭根部留一條直線（2026-08-22 業主回報） */
#bot-dock .bd-row{display:flex;align-items:center;gap:10px}
#bot-dock .bd-text{color:var(--ink,#1f2937);word-break:break-word;min-width:0}
#bot-dock .bd-go{font-weight:700}
/* 多則說明的箭頭（2026-08-22 業主指示）：常駐在泡泡右側，不用先點頭像 */
#bot-dock .bd-nav{display:none;align-items:center;gap:4px;flex:none;font-size:11px;color:var(--muted);white-space:nowrap}
/* 只要外框線、不要內框線（2026-08-22 業主指示）：泡泡自己那圈黑框是唯一的框——
   箭頭鈕、控制鈕、控制列上緣的分隔線全部拿掉，框中有框看起來像兩個盒子疊在一起 */
#bot-dock .bd-nav button{width:22px;height:22px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--ink);font-size:10px;line-height:1;cursor:pointer}
/* 控制列：平常不顯示，點頭像才展開（2026-08-22 業主指示） */
#bot-dock .bd-ctl{display:none;gap:6px;flex-wrap:wrap;margin-top:6px;padding-top:6px}
#bot-dock .bd-ctl button{font:inherit;font-size:11px;padding:3px 9px;border:none;border-radius:10px;background:transparent;color:#4b5563;text-decoration:underline;cursor:pointer;line-height:1.3}
@media(max-width:820px){
  #bot-dock{left:70px;transform:none;right:12px;max-width:none;bottom:12px;gap:8px} /* 避開左下 ☰ 浮動鍵 */
  #bot-dock .bd-av{width:38px;height:38px}
  #bot-dock .bd-bubble{font-size:12px;padding:6px 10px}
}
.formula-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:8px}
.formula-chip{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.6)}
.formula-chip .fc-h{font-weight:700;font-size:13px;margin-bottom:4px}
.formula-chip .fc-f{font-size:13px;color:var(--ink)}
.formula-chip .fc-note{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.sort-i{font-size:14px;font-weight:700;color:var(--brand)}
.onboard-card{background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:14px;margin-bottom:14px}
.hint{cursor:help;color:var(--brand);font-size:12px;border:1px solid var(--brand);border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;margin-left:4px;line-height:1}
.newbie-tag{background:#fef3c7;color:#92400e;font-size:10px;border-radius:4px;padding:1px 5px;margin-left:5px;font-weight:600}
.steps{display:flex;flex-direction:column;gap:8px}
.steps .step{display:flex;gap:10px;align-items:flex-start;background:#f9fafb;border-radius:8px;padding:8px 10px}
.steps .step b.n{background:var(--brand);color:#fff;border-radius:50%;width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.botcard{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fafafa;cursor:pointer;transition:background .15s,border-color .15s;margin-bottom:10px}
.botcard:hover{border-color:#9ca3af}
.botcard.on{border-color:#86efac;background:#f0fdf4}
.botcard.on:hover{border-color:#4ade80}
.botswitch{width:44px;height:24px;border-radius:99px;background:#d1d5db;position:relative;flex-shrink:0;transition:background .15s}
.botswitch.on{background:#22c55e}
.botswitch .knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .15s}
.botswitch.on .knob{left:22px}
.botfeat-list{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.9}
.chatphone{width:340px;max-width:88vw;border:10px solid #111;border-radius:26px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.25);background:#9dc8e8}
.chatphone .chathd{background:#4a9c3f;color:#fff;padding:10px 14px;font-weight:700;font-size:14px}
.chatphone .chatbody{padding:14px 10px;min-height:280px;display:flex;flex-direction:column;gap:10px}
.chatbubble{max-width:78%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.6;white-space:pre-wrap}
.chatbubble.in{align-self:flex-start;background:#fff;color:#1f2937;border-bottom-left-radius:4px}
.chatbubble.out{align-self:flex-end;background:#a4e666;color:#1f2937;border-bottom-right-radius:4px}
.chatwho{font-size:11px;color:#6b7280;margin:0 0 2px 2px}
.m-only{display:none} /* 手機專用元素（≤800px 顯示） */
@media(max-width:800px){
  .side{position:fixed;top:0;left:0;height:100vh;z-index:60;transform:translateX(-100%);transition:transform .2s;overflow:auto}
  .side.open{transform:translateX(0)}
  .main{max-width:100vw;padding:12px;overflow-x:hidden}/* 防整頁橫向滑動；寬表格各自 overflow-x:auto 內部捲 */
  pre{overflow-x:auto;max-width:100%}/* 長字串/程式碼區塊改自身內捲，不撐爆版面 */
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  /* 浮動選單鍵（賈選20）：左下常駐，長頁面往下捲也點得到選單；避開右下的「?」求救鍵與 toast */
  .m-fab-menu{display:flex;align-items:center;justify-content:center;position:fixed;left:14px;bottom:16px;width:46px;height:46px;border-radius:50%;background:var(--brand);color:#fff;border:none;font-size:22px;z-index:58;box-shadow:0 2px 10px rgba(0,0,0,.28)}
  .side.open ~ .m-fab-menu{display:none}/* 抽屜開著時不重複顯示 */
  .side-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55}
  /* ── 行動端打磨（2026-07-11）：大拇指友善、不縮放、表格可橫捲 ── */
  .m-only{display:block}
  .topbar h2{font-size:17px}
  button{min-height:38px}
  input,select,textarea{font-size:16px} /* ≥16px 防 iOS 聚焦自動放大 */
  .grid2,.grid3{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card{padding:12px}
  table{display:block;overflow-x:auto} /* 寬表格橫向滑動，不擠爛版面 */
  /* 外框表在手機也要能橫捲（2026-08-19 前端實跑審查，375px 實測）：table.framed 的 overflow:hidden
     選擇器權重（0,1,1）壓過上面那條 table（0,0,1），於是欄位被直接裁掉且完全捲不到——外層 .card
     的 overflow:auto 也救不了（子元素自己先裁了）。9 張 framed 表全中：員工、客戶、產品、薪資明細、
     發票、公休日、費率、案場成本列表、API 用量。桌機維持 hidden 才切得出圓角。 */
  table.framed{overflow:auto}
  .m-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
  .m-quick a{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 6px;color:var(--ink);font-size:13px;font-weight:600}
  .m-quick a .ico{font-size:22px}
  /* 出勤記錄卡片化：每列變一張卡，欄名用 data-label 顯示 */
  #ar-tb{display:block}
  #ar-tb tr{display:block;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff;padding:8px 10px}
  #ar-tb td{display:flex;gap:8px;border:none;padding:3px 0;font-size:13px}
  #ar-tb td::before{content:attr(data-label);color:var(--muted);min-width:64px;flex-shrink:0;font-size:12px}
  #ar-tb td:not([data-label])::before{content:none}
  #ar-tb tr.dg>td{border:0!important;border-radius:0!important}/* 手機卡片式：同日框改由卡片呈現，桌機框線不套用 */
  #ar-tb tr.dg-gap{display:none}
  .m-hide{display:none}
}
/* 薪資試算表版式（2026-07-26 業主指示）：欄位置中、金額欄靠右且緊縮不佔寬、
   標頭只留下方雙框線、合計列上下雙框線（報表慣例） */
.sc-tbl th,.sc-tbl td{text-align:center}
.sc-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;width:1%;white-space:nowrap}
.sc-tbl thead th{border:0;border-bottom:3px double #64748b}
.sc-tbl tr.sc-sum td{border-top:3px double #64748b;border-bottom:3px double #64748b}
/* 出勤同日圓角框（2026-07-26 業主定案：全系統出勤配色規範——同一天的列包一個圓角藍框；
   派工總覽/派工明細不適用）。border-collapse:separate 才能在儲存格畫圓角 */
.attg{border-collapse:separate;border-spacing:0}
.attg td{border-bottom:0}
.attg tr.dgf>td{border-top:1.5px solid #93c5fd}
.attg tr.dgl>td{border-bottom:1.5px solid #93c5fd}
.attg tr.dg>td:first-child{border-left:1.5px solid #93c5fd}
.attg tr.dg>td:last-child{border-right:1.5px solid #93c5fd}
.attg tr.dgf>td:first-child{border-top-left-radius:10px}
.attg tr.dgf>td:last-child{border-top-right-radius:10px}
.attg tr.dgl>td:first-child{border-bottom-left-radius:10px}
.attg tr.dgl>td:last-child{border-bottom-right-radius:10px}
.attg tr.dg-gap>td{border:0;height:8px;padding:0;background:transparent}
/* 離職區塊用灰框（2026-08-15 業主指示：年度總表在職／離職分開包框，離職在下方）——
   兩個 class 的選擇器特異度高於上面的單 class 規則，只換顏色不動圓角/邊 */
.attg tr.dg.dg-off>td{border-color:#d1d5db}
/* 每天補的那列表頭（2026-08-14 業主指示：加給欄是一排打勾，捲到下面認不出是哪一項）——
   比 thead 淡一級，看得出是分組標題而不是資料列 */
.attg tr.dg-head>td{background:var(--soft,#f8fafc);color:var(--muted);font-size:11px;font-weight:600;
  white-space:nowrap;padding-top:4px;padding-bottom:4px}
/* 派工明細拖曳修正：整列可拖，把手只是提示「這裡拖得動」。
   拖經過的案場區塊整塊變色——拖放最怕的就是「放開了才知道放到哪」。 */
.asn-row{cursor:grab}
.asn-row.dragging{opacity:.4}
.drag-h{color:#9ca3af;cursor:grab;user-select:none}
.asn-tbl{width:100%;table-layout:fixed}
.asn-tbl th,.asn-tbl td{vertical-align:middle}
.asn-tbl td:nth-child(3){overflow-wrap:anywhere}
.ds-drop.drop-on{background:#eff6ff;outline:2px dashed #2563eb;outline-offset:-4px}
/* 群組配色（2026-08-08 業主指示：站內所有「案場資訊群」淺藍、所有「管理群」淺紅）——
   一律以群組身分（dispatch/admin 語意鍵或白名單綁定的群組 ID）判定，不比對名稱字串（群組可改名）。
   按鈕被選取（非 ghost）時轉同色系實色，保留「目前選誰」的辨識度 */
/* 2026-09-06 業主指示「發送對象如果選[案場資訊]，要用淺紅色（因為人比較多）」——
   跟 2026-08-08 原本的配色**對調**（原：案場藍／管理紅）。理由變了：LINE 推播是
   「每則 × 群組裡的好友人數」計費，實測案場資訊群 43 人、管理群 4 人——發一則到案場群
   等於吃掉 21% 的月額度。紅色在這裡是**成本警示**，不是身分標示。兩個群仍用不同顏色，
   辨識價值不變。 */
.gc-dispatch{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.gc-admin{background:#dbeafe;border-color:#93c5fd;color:#1e40af}
/* 點料群組（2026-08-11 業主指示：升級為內建固定桶，比照管理群/案場群同款配色體系） */
.gc-materials{background:#dcfce7;border-color:#86efac;color:#166534}
/* 業務群組（2026-08-11 業主指示：內建固定桶，預設建立估價單用）——淺紫 */
.gc-sales{background:#ede9fe;border-color:#c4b5fd;color:#6d28d9}
button.gc-dispatch:not(.ghost){background:#b91c1c;border-color:#b91c1c;color:#fff}
button.gc-admin:not(.ghost){background:#2563eb;border-color:#2563eb;color:#fff}
button.gc-materials:not(.ghost){background:#15803d;border-color:#15803d;color:#fff}
button.gc-sales:not(.ghost){background:#6d28d9;border-color:#6d28d9;color:#fff}
input.gc-dispatch,select.gc-dispatch{border:1px solid #fca5a5}
input.gc-admin,select.gc-admin{border:1px solid #93c5fd}
input.gc-materials,select.gc-materials{border:1px solid #86efac}
input.gc-sales,select.gc-sales{border:1px solid #c4b5fd}
/* 分段按鈕（2026-08-15 業主指示「不要用下拉，改用按鈕」）：取代設定頁的小枚舉下拉。
   .seg 內一顆隱藏 input 保有原 id/class/value/onchange，讀值的舊程式不用改；按鈕只是它的臉。 */
.seg{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center;vertical-align:middle}
.seg button{padding:3px 9px;font-size:12px;line-height:1.5;background:#f3f4f6;border:1px solid #d1d5db;color:#6b7280;border-radius:6px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:#dcfce7;border-color:#86efac;color:#166534;font-weight:600}
/* 夜間加班選項選中＝紫（2026-08-16 業主指示；全站夜間一律紫，見出勤配色規範）：
   任何 segSelect 的 night 值都吃這條，不必逐處改樣式。 */
.seg button[data-v="night"][aria-pressed="true"],
.seg button[data-v="night_ot"][aria-pressed="true"]{background:#ede9fe;border-color:#c4b5fd;color:#6d28d9}
.seg button:disabled{opacity:.5;cursor:not-allowed}
.seg.sm button{padding:1px 6px;font-size:11px}