/* 居服派案系統：方案 A「工作台」風格 */
:root {
  --bg: #F4F6F8; --surface: #FFFFFF; --ink: #1B1F24; --ink-2: #3D4550; --muted: #5B6470; --faint: #8A929C;
  --line: #E3E6EA; --line-2: #DCE0E5; --soft: #EEF0F3;
  --accent: #1F5FBF; --accent-ink: #FFFFFF; --accent-soft: #E8EFFA; --accent-hover: #174A94;
  --ok: #1E6B45; --ok-soft: #E7F4EC; --warn: #9A4A06; --warn-soft: #FDF0E1; --bad: #B42318; --bad-soft: #FDECEA;
  --block: #D6E3F7; --block-line: #A9C1E8; --block-ink: #12305E;
  --oneoff: #E6F4EA; --oneoff-line: #9CCFAE; --oneoff-ink: #144D2C;
  --gap: #E5F3EA; --gap-2: #F3FAF5;
  --font: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171B; --surface: #1C2026; --ink: #E7EAEE; --ink-2: #C3C9D1; --muted: #9AA3AE; --faint: #78818C;
    --line: #2C323A; --line-2: #39404A; --soft: #262B32;
    --accent: #6EA0F0; --accent-ink: #0B1626; --accent-soft: #1E2C42; --accent-hover: #8DB5F5;
    --ok: #6CCB98; --ok-soft: #173326; --warn: #F0A85E; --warn-soft: #3A2814; --bad: #F2867C; --bad-soft: #3D1C19;
    --block: #22385A; --block-line: #3A5A8C; --block-ink: #D8E5FA;
    --oneoff: #1C3A29; --oneoff-line: #2F6B47; --oneoff-ink: #CDEBD8;
    --gap: #1B2E23; --gap-2: #18241D;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
.mono { font-family: var(--mono); }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 16px; margin: 0; }
h3 { font-size: 14px; margin: 0; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 17px; letter-spacing: .5px; color: var(--ink); text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a { padding: 6px 12px; border-radius: 6px; color: var(--ink-2); text-decoration: none; }
.nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.nav a:hover { background: var(--soft); }
.who { margin-left: auto; display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 13px; }
.who form { margin: 0; }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }

.page { max-width: 1600px; margin: 0 auto; padding: 16px 24px 48px; display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.grow { flex: 999 1 720px; min-width: 0; }
.side { flex: 1 1 280px; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spacer { margin-left: auto; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.btn { font: inherit; font-size: 14px; border-radius: 6px; padding: 7px 14px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); min-height: 36px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: var(--soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--bad); }
.btn.sm { font-size: 13px; padding: 4px 10px; min-height: 32px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg a, .seg button { padding: 7px 14px; color: var(--ink-2); text-decoration: none; border: 0; background: none; font: inherit; cursor: pointer; }
.seg .on { background: var(--accent); color: var(--accent-ink); }
.pill { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--soft); color: var(--ink-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }

label.f { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
input, select, textarea { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field { margin-bottom: 10px; }
.field input, .field select, .field textarea { width: 100%; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

table.list { width: 100%; border-collapse: collapse; }
table.list th, table.list td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list th { font-size: 12px; color: var(--muted); font-weight: 500; }
.scroll-x { overflow-x: auto; }

.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.messages li { padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); }
.messages li.error { background: var(--bad-soft); color: var(--bad); }
.messages li.success { background: var(--ok-soft); color: var(--ok); }
.banner { padding: 10px 14px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }

/* ---------- 全體總覽 ---------- */
.tl { min-width: 960px; }
.tl-head, .tl-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
.tl-head { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.tl-hours { display: flex; font-size: 11px; color: var(--faint); padding: 8px 0; font-family: var(--mono); }
.tl-hours span { flex: 1; border-left: 1px solid var(--soft); padding-left: 3px; }
.tl-row { border-bottom: 1px solid var(--soft); }
.tl-row.off { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--soft) 8px 9px); }
.tl-name { padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.tl-name a { font-weight: 500; text-decoration: none; color: var(--ink); }
.tl-name .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-lane { position: relative; height: 48px; }
.gapbar { position: absolute; top: 6px; bottom: 6px; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--gap) 0 6px, var(--gap-2) 6px 12px); }
.blk { position: absolute; top: 5px; bottom: 5px; font: inherit; font-size: 11px; line-height: 1.25; text-align: left; padding: 3px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; border-radius: 5px; color: var(--block-ink); background: var(--block); border: 1px solid var(--block-line); }
.blk.one_off { background: var(--oneoff); border-color: var(--oneoff-line); color: var(--oneoff-ink); }
.blk.blocked { background: repeating-linear-gradient(135deg, var(--soft) 0 4px, var(--surface) 4px 8px); border-color: var(--line-2); color: var(--muted); }
.blk.review { border: 2px dashed var(--warn); }
.blk.sel { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }

/* ---------- 單人週班表 ---------- */
.wk { min-width: 860px; display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.wk-dh { padding: 8px 0; text-align: center; font-weight: 500; border-bottom: 1px solid var(--line); border-left: 1px solid var(--soft); }
.wk-dh.off { color: var(--faint); }
.wk-axis { position: relative; }
.wk-axis span { position: absolute; right: 6px; font-size: 11px; color: var(--faint); font-family: var(--mono); }
.wk-col { position: relative; border-left: 1px solid var(--soft); cursor: copy; }
.wk-col.off { background-color: var(--soft); }
.wk-blk { position: absolute; left: 3px; right: 3px; border-radius: 5px; padding: 3px 5px; font-size: 11px; line-height: 1.35; overflow: hidden; cursor: pointer; text-align: left; font: inherit; font-size: 11px; color: var(--block-ink); background: var(--block); border: 1px solid var(--block-line); }
.wk-blk b { display: block; }
.wk-blk.one_off { background: var(--oneoff); border-color: var(--oneoff-line); color: var(--oneoff-ink); }
.wk-blk.blocked { background: repeating-linear-gradient(135deg, var(--soft) 0 4px, var(--surface) 4px 8px); border-color: var(--line-2); color: var(--muted); }
.wk-blk.review { border: 2px dashed var(--warn); }
.wk-blk.sel { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* 編輯面板 */
.panel h2 { margin-bottom: 10px; }
.nudges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.days-pick { display: flex; gap: 4px; flex-wrap: wrap; }
.days-pick button { width: 36px; height: 34px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit; }
.days-pick button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.warnings { color: var(--warn); font-size: 13px; }
.log { font-size: 12px; color: var(--ink-2); padding: 5px 0; border-bottom: 1px solid var(--soft); }
.log time { color: var(--faint); margin-right: 6px; }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; }

@media (max-width: 640px) {
  .topbar, .page { padding-left: 16px; padding-right: 16px; }
  .who { margin-left: 0; }
}
.field .toolbar input { width: 6.5em; }
.nudges .btn { white-space: nowrap; justify-content: center; padding: 4px 6px; }

/* ---------- 詢案媒合 ---------- */
.mrow { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.mcol { min-width: 0; }
.needs { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.needs label { display: flex; gap: 4px; align-items: center; }
.dbtn { font: inherit; cursor: pointer; text-align: center; padding: 6px 10px; border-radius: 8px; min-width: 92px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); display: flex; flex-direction: column; }
.dbtn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cand { border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start; margin-bottom: 8px; }
.cand.partial { border-style: dashed; border-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 40%, var(--surface)); }
.cand.on { outline: 2px solid var(--accent); }
.cand .score { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
[hidden] { display: none !important; }
.field input[type="checkbox"], .needs input { width: auto; }
.filters { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: flex-end; padding: 12px 16px; }
.filters .field { margin-bottom: 0; min-width: 110px; }
.filters .field input[type="search"] { width: 160px; }
.filters .checks { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.filters .checks label { display: flex; gap: 6px; align-items: center; }
.empno { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-right: 6px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.settings-grid h3 { margin-top: 4px; }
code.mono { background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.wk-blk { touch-action: none; user-select: none; }
.wk-blk.dragging { opacity: .85; box-shadow: 0 6px 18px rgba(20, 30, 45, .25); z-index: 5; cursor: grabbing; }
.dlg { border: 1px solid var(--line); border-radius: 12px; padding: 20px; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
.dlg::backdrop { background: rgba(15, 20, 28, .35); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat .big { font-size: 26px; font-weight: 700; font-family: var(--mono); margin-top: 2px; }
.pct { display: inline-block; min-width: 3.2em; padding: 1px 6px; border-radius: 4px; font-family: var(--mono);
  background: linear-gradient(90deg, var(--ok-soft) calc(var(--p) * 1%), transparent 0); }
.case-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-tabs #case-tabs { flex: 1 1 auto; }
.case-picker { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); }
.drag-tip { position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--surface); font-family: var(--mono); font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; }
.wk-col.drop-target { background-color: var(--accent-soft) !important; }
.tl-row.drop-target { background: var(--accent-soft); }
.blk.dragging { opacity: .9; box-shadow: 0 6px 18px rgba(20, 30, 45, .3); z-index: 5; cursor: grabbing; }
.blk { touch-action: none; }
.drag-tip { white-space: pre; line-height: 1.6; }
.drag-ghost { opacity: .45; border: 2px dashed var(--accent) !important; background: transparent !important; pointer-events: none; }
.worker-form { display: flex; flex-direction: column; gap: 14px; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 20px; }
.wf-field.wide { grid-column: 1 / -1; }
.wf-field > input[type=text], .wf-field > input[type=number], .wf-field > input[type=tel], .wf-field > select, .wf-field > textarea { width: 100%; }
.wf-field > div[id] { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.wf-field > div[id] label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; background: var(--surface); }
.wf-field > div[id] label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.wf-field > div[id] input { margin: 0; }
.wf-save { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; border-top: 1px solid var(--line); }
.code-min-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.code-min { display: flex; gap: 6px; align-items: center; }
.code-min input[name=code] { width: 7.5em; }
.code-min input[name=minutes] { width: 5.5em; }
.dbtn.none { opacity: .55; }
.plan-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
/* 權限表 */
.perm-table th.perm-col { text-align: center; min-width: 110px; vertical-align: top; }
.perm-table th.perm-col select { margin-top: 6px; width: 100%; }
.perm-table td.perm-feat, .perm-table th.perm-feat { position: sticky; left: 0; background: var(--surface); min-width: 260px; z-index: 1; }
.perm-table td.perm-cell { text-align: center; }
.perm-table td.perm-cell input { width: 18px; height: 18px; cursor: pointer; }
.perm-table td.diff { background: var(--warn-soft, #FFF4D6); }
.perm-table tr.perm-group td { background: var(--bg); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.warn-text { color: var(--warn); font-weight: 600; }
/* AI 費用 */
.ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ai-stats .big { font-size: 26px; font-weight: 600; margin-top: 4px; }
.bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.bar span { display: block; height: 100%; background: var(--ok); }
.bar span.warn { background: var(--warn); } .bar span.bad { background: var(--bad); }
.daily { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: 10px; }
.daily .day { flex: 1; max-width: 32px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 10px; }
.daily .day span { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.daily .day small { font-size: 10px; color: var(--muted); }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) 58px 58px; gap: 6px; margin-top: 8px; }
.price-grid input { width: 100%; min-width: 0; }
/* 喘息模式 */
.rcase { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface); }
.rcase.done { border-left: 4px solid var(--ok); } .rcase.partial { border-left: 4px solid var(--warn); } .rcase.none { border-left: 4px solid var(--bad); }
.rcase .needs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rtask { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 5px 0 3px 8px; }
.rtask.miss .mono { color: var(--bad); }
.rtask select { max-width: 220px; }
.rworker { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.rday { border-left: 3px solid var(--accent-soft); padding: 4px 0 4px 10px; margin-top: 6px; }
.msg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rmsg { border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
/* 歷史紀錄側欄 */
.hist { position: fixed; top: 64px; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); z-index: 30;
        background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px;
        box-shadow: 0 12px 32px rgba(20, 30, 45, .18); display: flex; flex-direction: column; }
.hist[hidden] { display: none; }
.hist-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.hist-item { text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface);
             font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.hist-item:hover { border-color: var(--accent); }
.hist-item.on { border-color: var(--accent); background: var(--accent-soft); }
.hist-item .top { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.hist-item .top .t { margin-left: auto; color: var(--muted); font-size: 12px; }
.hist-item .sn { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loaded-banner { margin: 0 0 12px; }

/* 通知 */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 30, 45, .2);
         background: var(--surface); border: 1px solid var(--line-2); border-left: 5px solid var(--accent); font-size: 14px; line-height: 1.6; }
.toast.error { border-left-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.toast.ok { border-left-color: var(--ok); }
.toast .msg { flex: 1; white-space: pre-line; }
.toast .x { border: 0; background: none; cursor: pointer; color: inherit; font-size: 14px; }
.invalid { outline: 2px solid var(--bad) !important; outline-offset: 1px; }
.days-pick.invalid { border-radius: 8px; }
/* 人選班表預覽 */
.pv { position: fixed; z-index: 40; width: 460px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--line-2);
      border-radius: 12px; padding: 12px; box-shadow: 0 12px 32px rgba(20, 30, 45, .22); }
.pv[hidden] { display: none; }
.pv-grid { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 3px; }
.pv-hours { position: relative; margin-top: 30px; height: 252px; }
.pv-hours span { position: absolute; right: 2px; font-size: 10px; color: var(--muted); font-family: var(--mono); }
.pv-h { text-align: center; font-size: 12px; font-weight: 600; height: 30px; line-height: 1.2; color: var(--ink-2); }
.pv-h small { display: block; font-weight: 400; color: var(--muted); font-size: 10px; }
.pv-h.on { color: var(--accent); }
.pv-col { position: relative; height: 252px; background: var(--bg); border-radius: 4px;
          background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--line) 35px 36px); }
.pv-col.off { background-color: var(--bad-soft); }
.pv-blk { position: absolute; left: 1px; right: 1px; border-radius: 3px; font-size: 10px; line-height: 1.2; overflow: hidden;
          padding: 1px 2px; color: #fff; }
.pv-blk.luna { background: var(--accent); }
.pv-blk.plan { background: #6B7C93; }
.pv-blk.blocked { background: repeating-linear-gradient(45deg, #2b2f36 0 4px, #4a505a 4px 8px); }
.pv-blk.mine { background: transparent; border: 2px solid var(--warn); color: var(--warn); font-weight: 600; z-index: 2; }
.pv-blk.mine.once { border-style: dashed; }
.pv-blk.once:not(.mine) { outline: 2px dashed var(--surface); outline-offset: -3px; }   /* 單次：填色塊裡一圈虛線 */
.pv-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; }
.pv-legend .pv-blk { position: static; display: inline-block; width: 14px; height: 10px; }
/* 查詢交通時間 */
.travel-box { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line-2); border-radius: 8px; background: var(--bg); font-size: 13px; }
.travel-day { margin-top: 6px; }
.travel-day.bad > b { color: var(--bad); }
.travel-leg { margin-left: 10px; line-height: 1.6; }
.travel-leg.bad { color: var(--bad); font-weight: 600; }
/* 班表：選居服員（可模糊搜尋的下拉） */
.wpick { position: relative; min-width: 260px; flex: 0 1 340px; }
.wpick input { width: 100%; }
.wpick-list { position: absolute; z-index: 35; top: calc(100% + 4px); left: 0; right: 0; max-height: 360px; overflow-y: auto;
              margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-2);
              border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 30, 45, .18); }
.wpick-list li { padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.wpick-list li.on, .wpick-list li:hover { background: var(--accent-soft); }
.wpick-list li.cur { font-weight: 600; }
.wpick-list li.left { opacity: .6; }

/* header 的「LINE 抓新案」 */
.line-btn { background: #06c755; border-color: #06c755; color: #fff; font-weight: 500; }
.line-btn:hover { background: #05b04b; border-color: #05b04b; }

/* 系統設定：服務碼表 */
.code-table td { padding: 4px 8px; }
.code-table input[name=code] { width: 7em; }
.code-table input[name=code_name] { width: 14em; }
.code-table input[name=minutes] { width: 5em; }
.code-table input[name=price] { width: 7em; }

/* 班表預覽（大） */
.pv.pv-lg { width: 760px; padding: 14px 16px; }
.pv-lg .pv-grid { grid-template-columns: 30px repeat(7, 1fr); gap: 4px; }
.pv-lg .pv-blk { font-size: 11px; padding: 2px 3px; }
.pv-lg .pv-h { font-size: 13px; }
.pv-lg .pv-col { background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--line) calc(100% - 1px)); }

/* 詢案頁：解析沒把握的條件 */
.need-unsure { outline: 2px dashed var(--warn); outline-offset: 2px; border-radius: 4px; }
.need-unsure::after { content: "待確認"; margin-left: 4px; font-size: 11px; color: var(--warn); }

/* 條件規則 */
.rule-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.rule-row.rejected { opacity: .55; }
.rule-edit { padding: 8px 0; border-top: 1px solid var(--line); }
/* 組合排案：滑過個案姓名的資訊卡 */
.case-name { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.case-pop { position: fixed; z-index: 45; width: 360px; max-width: calc(100vw - 16px); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.case-pop[hidden] { display: none; }

/* ---------- 手機／平板（RWD） ---------- */
.nav-toggle { display: none; }
input[type="file"] { max-width: 100%; }
@media (max-width: 760px) {
  .topbar { padding: 8px 16px; gap: 8px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .topbar:not(.open) .nav, .topbar:not(.open) .who { display: none; }
  .topbar.open .nav { flex-basis: 100%; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
  .topbar.open .nav a { padding: 10px 12px; }
  .topbar.open .who { flex-basis: 100%; margin-left: 0; flex-wrap: wrap; padding: 8px 0 4px; border-top: 1px solid var(--line); }
  .page { padding: 12px 16px 40px; gap: 12px; }
  .card { padding: 14px; }
  .hist { top: 12px; }
}
@media (max-width: 640px) {
  /* iPhone 輸入框字小於 16px 會自動放大畫面 */
  input, select, textarea { font-size: 16px; }
  h1 { font-size: 18px; }
  .seg { max-width: 100%; overflow-x: auto; }
  .seg a, .seg button { white-space: nowrap; padding: 7px 11px; }
  .filters { padding: 12px 14px; }
  .filters .field { flex: 1 1 140px; }
  .filters .field input[type="search"] { width: 100%; }
  .wpick { min-width: 0; flex: 1 1 100%; }
  .perm-table td.perm-feat, .perm-table th.perm-feat { min-width: 150px; }
  .stat .big, .ai-stats .big { font-size: 22px; }

  /* 表格 → 一列一張卡片（欄名由 common.js 抄到 data-label） */
  table.list:not(.keep), table.list:not(.keep) > tbody, table.list:not(.keep) > tbody > tr, table.list:not(.keep) > tr { display: block; width: 100%; }
  table.list:not(.keep) > thead, table.list:not(.keep) tr.head-row { display: none; }
  table.list:not(.keep) tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  table.list:not(.keep) td { display: block; border: 0; padding: 2px 0; }
  table.list:not(.keep) td[data-label] { display: flow-root; padding-left: 96px; }
  table.list:not(.keep) td[data-label]::before { content: attr(data-label); float: left; width: 88px; margin-left: -96px; padding-top: 2px;
    color: var(--muted); font-size: 12px; font-weight: 400; font-family: var(--font); line-height: 1.4; letter-spacing: 0; }
  table.list:not(.keep) td:empty { display: none; }
  table.list:not(.keep) td .btn { margin-top: 2px; }
}

/* 週班表：手機一次看一天 */
.wk-days { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); position: sticky; left: 0; }
.wk-days button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 5px 0; font: inherit; font-size: 12px;
  line-height: 1.3; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.wk-days button b { font-size: 14px; }
.wk-days button small { font-size: 10px; color: var(--muted); }
.wk-days button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.wk-days button.on small { color: inherit; }
@media (max-width: 640px) {
  .wk.one-day { min-width: 0; grid-template-columns: 44px minmax(0, 1fr); }
  .wk.one-day .wk-dh:not(.cur), .wk.one-day .wk-col:not(.cur) { display: none; }
  .wk.one-day .wk-blk { touch-action: manipulation; font-size: 12px; padding: 4px 8px; }
  .drag-hint { display: none; }
}