/* ══════════════════════════════════════════════════════════════
   一風堂 線上排班系統 — 設計語言
   ★ 2026-09-08 改版：色票改為對齊「人力能力地圖」
     https://chikaranomoto-tw-hr.zeabur.app
     色號取自該站的 :root 與 [data-theme="dark"]，未自行配色。
     目的：內部系統之間長得像同一家公司的東西。
     舊版是米色底 #f5f0e3 ＋ 暖黑 #191712，本次改為白底 ＋ 冷黑。
     ⚠ 這推翻了 08-12「深色維持 #191712 暖黑」那個決定（Steven 09-08 指定改）。

   ★ 語意色一律走 token，不要再寫死色號。
     舊版每組語意色寫三遍（淺色寫死／[data-theme=dark]／auto），
     共 106 處寫死色號，改一次顏色要改三個地方、很容易漏。
     現在只要改上面的 token，三種模式一起生效。

   官方品牌紅 ippudo_red #cf000d（與人力地圖相同）
   字體：標題 Noto Serif TC、內文 Noto Sans TC、icon 用 Material Symbols
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg:#f5f5f4; --text:#171717; --muted:#606366; --card-bg:#fff;
  --border:#d7d7d3; --border-strong:#c2c2bd; --th-bg:#f5f5f4; --day-bg:#fafaf9;
  --input-bg:#fff; --brand:#cf000d; --brand-dark:#a6000a; --ghost-hover:#f5f5f4;
  --topbar-bg:#fff; --topbar-text:#171717; --hairline:#d7d7d3;
  /* 主要動作＝藍（Steven 08-12 拍板選項(b)）；紅色只留給刪除／危險操作 */
  --primary:#2f6690; --primary-dark:#1f4a68;
  --danger:#cf000d; --danger-dark:#a6000a; --danger-weak:#ffe4e6;
  /* 壓在色塊上的文字色。深色模式的 --brand/--primary 是亮色，白字會不夠對比，
     所以那邊改用深色字（2026-09-08 實測白字只有 2.94:1、不到 AA 4.5:1）*/
  --on-brand:#fff; --on-primary:#fff;
  /* 語意色：底／框／字三件成套。底與字取自人力地圖，框由兩者推一階中間色 */
  --ok-bg:#d7f8e8; --ok-border:#a8e6c9; --ok-text:#075b38;
  --warn-bg:#ffe7a8; --warn-border:#e8c96f; --warn-text:#4e3600;
  --bad-bg:#ffe4e6; --bad-border:#f5b8bd; --bad-text:#9f0712;
  --info-bg:#dbeef4; --info-border:#a9d5e2; --info-text:#164b5b;
  --overlay:rgba(0,0,0,.5);
  --shadow-card:0 1px 2px rgba(0,0,0,.05);
  --shadow-lift:0 10px 28px rgba(0,0,0,.08);
  --serif:"Noto Serif TC","Zen Old Mincho","PMingLiU",serif;
  --sans:"Noto Sans TC","Zen Kaku Gothic New","Microsoft JhengHei","PingFang TC",sans-serif;
}
/* 深色配色（對齊人力地圖的冷黑） */
:root[data-theme="dark"] {
  --bg:#0f1113; --text:#f4f4f2; --muted:#b8bdc2; --card-bg:#181b1e;
  --border:#383e43; --border-strong:#4a5157; --th-bg:#202428; --day-bg:#1c2023;
  --input-bg:#202428; --brand:#ff727c; --brand-dark:#ffa0a7; --ghost-hover:#2a2f34;
  --topbar-bg:#181b1e; --topbar-text:#f4f4f2; --hairline:#383e43;
  --primary:#5b9dcc; --primary-dark:#7fb6dd;
  --danger:#ff727c; --danger-dark:#ffa0a7; --danger-weak:#58141b;
  --on-brand:#3a0409; --on-primary:#0d1f2b;
  --ok-bg:#123f2e; --ok-border:#235c46; --ok-text:#a6f4cf;
  --warn-bg:#493811; --warn-border:#6b5520; --warn-text:#ffe39a;
  --bad-bg:#58141b; --bad-border:#7d2730; --bad-text:#ffbec3;
  --info-bg:#173b47; --info-border:#2a5967; --info-text:#b8e8f5;
  --overlay:rgba(0,0,0,.62);
  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-lift:0 12px 34px rgba(0,0,0,.32);
}
/* 跟隨系統：系統為深色時才套深色 */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:#0f1113; --text:#f4f4f2; --muted:#b8bdc2; --card-bg:#181b1e;
    --border:#383e43; --border-strong:#4a5157; --th-bg:#202428; --day-bg:#1c2023;
    --input-bg:#202428; --brand:#ff727c; --brand-dark:#ffa0a7; --ghost-hover:#2a2f34;
    --topbar-bg:#181b1e; --topbar-text:#f4f4f2; --hairline:#383e43;
    --primary:#5b9dcc; --primary-dark:#7fb6dd;
    --danger:#ff727c; --danger-dark:#ffa0a7; --danger-weak:#58141b;
    --on-brand:#3a0409; --on-primary:#0d1f2b;
    --ok-bg:#123f2e; --ok-border:#235c46; --ok-text:#a6f4cf;
    --warn-bg:#493811; --warn-border:#6b5520; --warn-text:#ffe39a;
    --bad-bg:#58141b; --bad-border:#7d2730; --bad-text:#ffbec3;
    --info-bg:#173b47; --info-border:#2a5967; --info-text:#b8e8f5;
    --overlay:rgba(0,0,0,.62);
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
    --shadow-lift:0 12px 34px rgba(0,0,0,.32);
  }
}

/* Material Symbols icon（base.html 載入字體；沒載到就優雅退成文字消失不佔位） */
.ms { font-family:"Material Symbols Outlined"; font-weight:normal; font-style:normal;
  font-size:18px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block;
  white-space:nowrap; word-wrap:normal; direction:ltr; vertical-align:-3px;
  font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 20;
  -webkit-font-smoothing:antialiased; }

* { box-sizing: border-box; }
body { margin:0; font-family:var(--sans); background:var(--bg); color:var(--text);
  letter-spacing:.02em; }

/* ── 頂欄：白底黑字＋髮絲線，紅只留給丸標與 hover（ippudo.com header 語言）── */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--topbar-bg); color:var(--topbar-text); padding:10px 20px;
  border-bottom:1px solid var(--hairline); position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--serif);
  font-weight:700; font-size:18px; letter-spacing:.08em; white-space:nowrap; }
.brand .maru { width:26px; height:26px; border-radius:50%; background:var(--brand);
  color:var(--on-brand); display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; flex-shrink:0; font-family:var(--serif); }
.brand small { font-family:var(--sans); font-weight:normal; font-size:11px;
  color:var(--muted); letter-spacing:.14em; }
.userbox { display:flex; flex-wrap:wrap; gap:2px; align-items:center; justify-content:flex-end; font-size:14px; }
.userbox .whoami { color:var(--muted); font-size:12px; margin-right:8px; letter-spacing:.04em; }
/* 導覽鈕：icon 在上、字在下的安靜分頁（省寬度、統一 icon 語言） */
.userbox .btn-ghost {
  flex-shrink:0; white-space:nowrap; min-width:56px; text-align:center;
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; border-bottom:2px solid transparent; border-radius:0;
  color:var(--topbar-text); font-size:11px; letter-spacing:.06em; padding:6px 7px 5px;
}
.userbox .btn-ghost .ms { font-size:20px; vertical-align:0; color:inherit; }
.userbox .btn-ghost:hover { background:var(--ghost-hover); color:var(--brand); border-bottom-color:var(--brand); }
.userbox .theme-btn { flex-shrink:0; white-space:nowrap; }
.theme-btn { background:none; color:var(--muted); border:1px solid var(--border-strong);
  padding:6px 10px; border-radius:3px; cursor:pointer; font-size:12px; margin-left:8px; }
.theme-btn:hover { color:var(--brand); border-color:var(--brand); }

/* 手機：品牌一列、導覽變成可左右滑動的 tab 列（不再直向堆疊佔滿螢幕） */
@media (max-width: 720px) {
  .topbar { flex-direction:column; align-items:stretch; gap:4px; padding:10px 12px 0; }
  .brand { justify-content:center; }
  .userbox { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .userbox::-webkit-scrollbar { display:none; }
  .userbox .whoami { display:none; }
  .theme-btn { margin-left:2px; }
}

.container { max-width:1200px; margin:28px auto; padding:0 16px; }
.card { background:var(--card-bg); border:1px solid var(--border); border-radius:6px;
  padding:26px 28px; box-shadow:var(--shadow-card); }
h1 { margin-top:0; font-size:22px; font-family:var(--serif); font-weight:700; letter-spacing:.06em; }
h1::after { content:""; display:block; width:34px; height:3px; background:var(--brand); margin-top:8px; }
h2 { font-size:16px; margin:20px 0 8px; font-family:var(--serif); font-weight:700; letter-spacing:.06em; }
.muted { color:var(--muted); font-size:14px; }
/* 內文連結統一品牌紅（按鈕/步驟列除外；:where 權重歸零、不蓋元件規則） */
main a:where(:not(.btn-ghost):not(.btn-primary):not(.btn-add)) { color:var(--brand); }
.alert { background:var(--bad-bg); border:1px solid var(--bad-border); color:var(--bad-text); padding:10px 14px; border-radius:4px; margin:12px 0; }
.alert.warn { background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text); }
.alert.ok { background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-text); }
.alert li.hard { color:var(--brand); font-weight:bold; }
/* AI 助手範例：點一下帶入輸入框，不用手打 */
.example-chips { margin-top:6px; }
.example-chip { background:var(--card-bg); border:1px solid var(--border-strong); color:var(--text);
  border-radius:12px; padding:4px 10px; font-size:12px; cursor:pointer; margin:4px 6px 0 0; font-family:var(--sans); }
.example-chip:hover { border-color:var(--primary); color:var(--primary); }

label { display:block; margin:10px 0 4px; font-size:14px; }
input, select, textarea { padding:7px 9px; border:1px solid var(--border-strong); border-radius:3px;
  font-size:14px; background:var(--input-bg); color:var(--text); font-family:var(--sans); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); }
input[type=date], .login-card input { width:220px; }
.pw-field { display:flex; align-items:center; gap:8px; }
.pw-field input { flex:1; }
.pw-toggle { flex-shrink:0; background:var(--input-bg); color:var(--muted); border:1px solid var(--border-strong); padding:6px 10px;
  border-radius:3px; cursor:pointer; font-size:13px; }
.pw-toggle:hover { background:var(--th-bg); }
/* 區經理「正在操作哪一家店」：管好幾家，改錯店的代價很高，所以標得醒目一點 */
.now-store { color:var(--primary); background:var(--ghost-hover); padding:2px 8px;
  border-radius:3px; border:1px solid var(--primary); }

/* 檔案選擇器：隱藏原生 input（保留 name/accept 供表單送出），改用品牌樣式的 label 觸發 */
.file-input-native { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.file-input-label { display:inline-flex; align-items:center; gap:6px; background:transparent;
  color:var(--text); border:1px solid var(--border-strong); padding:8px 14px; border-radius:3px;
  cursor:pointer; font-size:14px; letter-spacing:.05em; margin:10px 0; }
.file-input-label:hover { border-color:var(--primary); color:var(--primary); background:var(--ghost-hover); }
.btn-primary { background:var(--primary); color:var(--on-primary); border:none; padding:10px 20px; border-radius:3px;
  cursor:pointer; font-size:15px; letter-spacing:.1em; font-family:var(--sans); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border-strong);
  padding:8px 14px; border-radius:3px; cursor:pointer; text-decoration:none; font-size:14px; letter-spacing:.05em; }
.btn-ghost:hover { color:var(--brand); border-color:var(--brand); background:var(--ghost-hover); }
/* 危險／刪除操作專用（與 .btn-primary 分開，避免誤觸）*/
.btn-danger { background:transparent; color:var(--danger); border:1px solid var(--danger);
  padding:8px 14px; border-radius:3px; cursor:pointer; text-decoration:none; font-size:14px; letter-spacing:.05em;
  font-family:var(--sans); }
.btn-danger:hover { background:var(--danger-weak); color:var(--danger-dark); border-color:var(--danger-dark); }
/* 表格內小型 ✕ 刪除鈕：沿用危險色但維持原本輕量尺寸，不要變成滿版按鈕 */
.btn-del.btn-danger, .pers .px.btn-danger {
  background:none; border:none; padding:0; font-size:13px; color:var(--danger);
}
.btn-del.btn-danger:hover, .pers .px.btn-danger:hover { color:var(--danger-dark); }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:14px; }

.login-card { max-width:380px; margin:60px auto; }
.steps { list-style:none; display:flex; gap:8px; padding:0; margin:8px 0 18px; flex-wrap:wrap; }
.steps li { background:var(--th-bg); border:1px solid var(--border); color:var(--muted); border-radius:2px; font-size:13px; }
.steps li.on { background:var(--brand); border-color:var(--brand); }
.steps li a { display:block; padding:5px 12px; color:var(--muted); text-decoration:none; letter-spacing:.05em; }
.steps li.on a { color:var(--on-brand); font-weight:bold; }
.steps li a:hover { background:var(--ghost-hover); color:var(--brand); }
.steps li.on a:hover { background:var(--brand); color:var(--on-brand); }
/* 同一頁的兩個步驟合併成一組，避免「點了看起來沒反應」的誤解 */
.steps li.step-grp { display:flex; align-items:center; padding:0 4px; }
.steps li.step-grp a { padding:5px 6px; }
.steps li.step-grp .grp-sep { color:inherit; opacity:.45; font-size:11px; }
.steps li.step-grp .grp-tag { margin-left:2px; margin-right:4px; font-size:10px; font-weight:normal;
  letter-spacing:0; white-space:nowrap; opacity:.75; }
.steps li.on.step-grp .grp-tag { color:var(--on-brand); }

/* 次要說明收合區塊（降低資訊過載，主要內容前的參考說明預設收合）*/
.secondary-note { border:1px solid var(--border); border-radius:6px; padding:6px 12px; margin:8px 0 14px; background:var(--th-bg); }
.secondary-note summary { cursor:pointer; font-size:14px; color:var(--muted); padding:4px 0; }
.secondary-note[open] summary { color:var(--text); }
.secondary-note p { margin:6px 0 4px; }

.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; margin-top:10px; }
th, td { border:1px solid var(--border); padding:5px; text-align:center; font-size:13px; }
th { background:var(--th-bg); font-weight:600; letter-spacing:.05em; }
/* 表格儲存格裡的按鈕（2026-08-21）：<a> 預設是 inline，垂直 padding 不會把行高撐開，
   所以門市總覽裡上下相鄰兩列的紅色「查看班表」會黏成一整條紅棒子。限定在表格內
   改成 inline-block 並留一點外距，其他地方（導覽列、表單）的按鈕完全不受影響。 */
td .btn-primary, td .btn-ghost, td .btn-danger { display:inline-block; margin:3px 2px; }
#roster input { width:90%; }
#roster .c-day { width:60px; }
#roster .c-memo { max-width:220px; }
/* 空白格語意提示：淺灰字直接寫出系統會怎麼處理（正職「可整天」／PT「不排」）*/
#roster .c-day.blank-hint::placeholder { color:var(--muted); opacity:.65; font-size:11px; }
/* 正職整週沒 X＝很可能漏辨識到休假，整列標色請店長確認 */
#roster tr.ft-no-off .c-name { border-color:var(--warn-border); background:var(--warn-bg); }
/* 校正表頭凍結：內容多時容器自己捲動，表頭固定在頂端不跑掉 */
.roster-wrap { max-height:70vh; overflow-y:auto; }
.roster-wrap thead th { position:sticky; top:0; background:var(--th-bg); z-index:1; }

/* ── 排班看板分頁籤（階段4-C）──
   同一個分頁可以有多段 .board-panel（用 data-panel 一起切），
   這樣就不必為了分組而搬動既有區塊的位置，JS 綁定不受影響。 */
.board-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:14px 0 16px;
  border-bottom:2px solid var(--border); }
.board-tab { background:none; border:none; border-bottom:3px solid transparent;
  color:var(--muted); font-family:var(--sans); font-size:14px; letter-spacing:.05em;
  padding:8px 14px; cursor:pointer; margin-bottom:-2px; white-space:nowrap; }
.board-tab:hover { color:var(--primary); background:var(--ghost-hover); }
.board-tab.on { color:var(--primary); border-bottom-color:var(--primary); font-weight:bold; }
.board-tab .tab-badge { display:inline-block; background:var(--danger); color:var(--on-brand);
  border-radius:9px; font-size:11px; font-weight:bold; padding:0 6px; margin-left:2px;
  vertical-align:1px; }
.board-panel { display:none; }
.board-panel.on { display:block; }
@media (max-width: 720px) {
  .board-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; }
  .board-tabs::-webkit-scrollbar { display:none; }
  .board-tab { padding:8px 10px; font-size:13px; }
}

.zone-sec { margin-top:18px; overflow-x:auto; }
.day-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.day-col { border:1px solid var(--border); border-radius:4px; background:var(--day-bg); }
.day-head { background:var(--th-bg); padding:5px; text-align:center; font-size:13px; font-weight:bold;
  border-bottom:1px solid var(--border); letter-spacing:.05em; }
.day-head small { font-weight:normal; color:var(--muted); }
.cell { padding:5px; min-height:60px; }
.pers { display:flex; align-items:center; gap:5px; background:var(--th-bg); border:1px solid var(--border);
  border-radius:3px; padding:3px 5px; margin-bottom:4px; font-size:12px; }
.pers.ot { background:var(--warn-bg); border:1px solid var(--warn-border); }
.pers .pn { flex:1; min-width:40px; }
.pers .pn b { color:var(--brand); }
.pers .times { display:flex; flex-direction:column; gap:3px; }
.pers .times label { display:flex; align-items:center; gap:3px; }
.pers .times .tag { color:var(--muted); font-size:10px; }
.pers input { width:48px; padding:2px 3px; font-size:12px; text-align:center; }
.pers .px { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; align-self:flex-start; }
.btn-add { width:100%; background:none; border:1px dashed var(--border-strong); color:var(--muted);
  border-radius:3px; cursor:pointer; font-size:12px; padding:3px; }
.btn-add:hover { border-color:var(--brand); color:var(--brand); }

/* 「處理中」全螢幕遮罩 */
#loadingOverlay { position:fixed; inset:0; z-index:9999; background:var(--overlay);
  display:flex; align-items:center; justify-content:center; }
#loadingOverlay .load-box { background:var(--card-bg,#fff); color:var(--text,#333); border-radius:6px;
  border-top:3px solid var(--brand);
  padding:28px 34px; text-align:center; box-shadow:var(--shadow-lift); max-width:80vw; }
#loadingOverlay .spinner { width:44px; height:44px; margin:0 auto 14px; border-radius:50%;
  border:4px solid var(--border); border-top-color:var(--brand,#cf000d); animation:spin .8s linear infinite; }
#loadingOverlay .load-msg { font-size:16px; font-weight:bold; font-family:var(--serif); letter-spacing:.06em; }
#loadingOverlay .load-sub { font-size:12px; color:var(--muted); margin-top:6px; }
#loadingOverlay .warn-sub { color:var(--brand); font-weight:bold; margin-top:4px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 每日營收表：固定佈局讓 7天+週合計 一頁塞滿、不用左右捲 */
#revTable { table-layout:fixed; width:100%; }
#revTable th, #revTable td { padding:4px 3px; }
#revTable .rev-lbl { width:48px; text-align:center; white-space:nowrap; font-weight:bold; font-size:12px; }
#revTable input.rev-in { width:100%; box-sizing:border-box; padding:3px 2px; text-align:right; font-size:12px; }

.labor-panel { border-radius:4px; padding:10px 14px; margin:12px 0; border:1px solid; }
.labor-panel.ok { background:var(--ok-bg); border-color:var(--ok-border); }
.labor-panel.over { background:var(--bad-bg); border-color:var(--bad-border); }
.ot-panel li.note-only { color:var(--bad-text); list-style:none; }
.ot-chip { background:var(--warn-bg); color:var(--warn-text); padding:1px 6px; border-radius:3px; }
.ot-panel { background:var(--warn-bg); border:1px solid var(--warn-border); border-radius:4px; padding:10px 14px; margin:12px 0; }
.ot-panel summary { cursor:pointer; font-weight:bold; color:var(--warn-text); }
.ot-panel li { margin:6px 0; }
.ot-panel li.adopted { opacity:.5; text-decoration:line-through; }

.sticky-actions { position:sticky; bottom:0; background:var(--card-bg); padding:12px 0; border-top:1px solid var(--border); margin-top:18px; }
code { background:var(--th-bg); padding:1px 5px; border-radius:2px; }

/* ── 登入頁：米色滿版＋白卡＋赤丸（ippudo.com 氛圍）── */
.login-shell { position:fixed; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  padding:20px; background:var(--bg); }
.login-box { width:100%; max-width:400px; background:var(--card-bg); border:1px solid var(--border);
  border-top:4px solid var(--brand); border-radius:6px; box-shadow:var(--shadow-lift);
  padding:40px 36px 30px; color:var(--text); text-align:center; }
.login-maru { width:56px; height:56px; border-radius:50%; background:var(--brand); color:var(--on-brand);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  font-family:var(--serif); font-size:26px; font-weight:700; }
.login-title { font-size:22px; margin:0 0 4px; font-family:var(--serif); font-weight:700; letter-spacing:.12em; }
.login-title::after { margin-left:auto; margin-right:auto; }
.login-sub { color:var(--muted); font-size:13px; margin:0; letter-spacing:.04em; }
.login-field { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border-strong);
  padding:10px 4px; margin:22px 0; text-align:left; }
.login-field:focus-within { border-bottom-color:var(--brand); }
.login-icon { font-size:18px; color:var(--muted); width:22px; text-align:center; flex-shrink:0; }
.login-field input { flex:1; background:transparent; border:none; color:var(--text); font-size:16px; outline:none; padding:2px; }
.login-field input::placeholder { color:var(--muted); }
.login-eye { flex-shrink:0; background:transparent; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:3px; padding:4px 10px; cursor:pointer; font-size:13px; }
.login-eye:hover { color:var(--brand); border-color:var(--brand); }
.login-btn { width:100%; margin-top:12px; }
.login-hint { margin-top:22px; color:var(--muted); font-size:13px; }

/* ── 每人週總工時列表（沛君回饋①；兩欄條列＋長條，一眼比高低）── */
.wk-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:2px 22px; margin-top:8px; }
.wk-row { display:grid; grid-template-columns:88px 52px 1fr 44px; align-items:center;
  gap:8px; padding:3px 0; font-size:13px; }
.wk-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-name b { color:var(--brand); }
.wk-h { text-align:right; font-variant-numeric:tabular-nums; font-weight:bold; }
.wk-bar { height:7px; background:var(--th-bg); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; }
.wk-bar i { display:block; height:100%; background:var(--info-text); }
.wk-d { color:var(--muted); font-size:12px; text-align:right; }
/* 過高：超過40h法定正常工時 */
.wk-row.hi .wk-h, .wk-hi-lg { color:var(--warn-text); }
.wk-row.hi .wk-bar i { background:var(--warn-border); }
/* 異常：負數(下班早於上班)。長條改成斜紋且不代表長度，避免「負數畫成長條」誤導成正常時數 */
.wk-row.bad .wk-h, .wk-bad-lg { color:var(--brand); }
.wk-row.bad .wk-bar { border-color:var(--brand); }
.wk-row.bad .wk-bar i { background:repeating-linear-gradient(45deg,
  var(--brand) 0 4px, transparent 4px 8px); }
/* 名單上但本週完全沒排到班 */
.wk-row.zero { color:var(--muted); }
.wk-row.zero .wk-h { font-weight:normal; }
/* 班表格子輸入錯誤（下班早於上班）→ 紅框提示 */
.pers.bad { background:var(--bad-bg); border:1px solid var(--bad-border); }

/* ── 辨識低信心格：AI 自承沒把握，請店長優先確認（辨識改善 2️⃣）── */
.c-day.lowconf, .lowconf-demo { background:var(--warn-bg); border-color:var(--warn-border); }
.lowconf-demo { padding:1px 8px; border:1px solid var(--warn-border); border-radius:3px; }
.c-day.lowconf:focus { background:var(--input-bg); }
/* 低信心格在深色下的文字色：底是 --warn-bg，字要用 --warn-text 才讀得到 */
.c-day.lowconf, .lowconf-demo { color:var(--warn-text); }

/* 試跑模式橫幅（2026-09-09，交接 #140）：admin 拿店長真實資料的複本試跑時，
   每一頁最上面都要看得出來。用 --danger 而不是 --warn，是因為這條的功能不是提醒，
   是攔阻——搞錯身分的代價是動到店長正在用的資料。 */
.sandbox-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--danger); color:#fff; padding:8px 16px; font-size:14px; }
.sandbox-bar .ms { font-size:20px; }
.sandbox-bar b { font-weight:700; }
.sandbox-exit { background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.55);
  border-radius:4px; padding:3px 10px; font-size:13px; cursor:pointer; }
.sandbox-exit:hover { background:rgba(255,255,255,.32); }