:root { --bg:#faf7f2; --card:#fff; --text:#2b2520; --muted:#8a8079; --accent:#b5835a; --error:#c0392b; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1917; --card:#27231f; --text:#f2ede7; --muted:#a39a92; --accent:#d4a276; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "PingFang TC", "Microsoft JhengHei", sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; }
.bar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; }
.bar a { color:var(--muted); text-decoration:none; }
.card { background:var(--card); max-width:480px; margin:24px auto; padding:28px 24px;
  border-radius:16px; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.login { margin-top:18vh; text-align:center; }
h1 { margin:0 0 8px; font-size:1.5rem; }
.muted { color:var(--muted); }
form { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
input { font-size:1.1rem; padding:12px 14px; border:1px solid var(--muted); border-radius:10px;
  background:transparent; color:var(--text); }
button { font-size:1.1rem; padding:12px; border:0; border-radius:10px; background:var(--accent);
  color:#fff; cursor:pointer; }
.error { color:var(--error); margin-top:14px; }

/* ===== 階段一：記錄 ===== */
.tabs { display:flex; gap:6px; padding:0 12px; overflow-x:auto; }
.tabs button { flex:none; padding:8px 14px; font-size:1rem; background:transparent; color:var(--muted);
  border:1px solid transparent; border-radius:20px; }
.tabs button.on { background:var(--accent); color:#fff; }
.wrap { max-width:960px; margin:12px auto 60px; padding:0 12px; }
.panel { background:var(--card); border-radius:16px; padding:16px; margin-bottom:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.06); }
.panel h2 { margin:0 0 10px; font-size:1.15rem; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-bottom:12px; }
.row label { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); }
select, input[type=date], input[type=text], input[type=number] { font-size:1rem; padding:9px 10px;
  border:1px solid var(--muted); border-radius:8px; background:transparent; color:var(--text); }
select option { color:#000; }
td input[type=number] { width:5.2em; text-align:right; }
td input[type=text] { width:100%; min-width:6em; }
table { border-collapse:collapse; width:100%; }
th, td { padding:7px 8px; border-bottom:1px solid rgba(128,128,128,.2); text-align:left; vertical-align:middle; }
th { font-size:.85rem; color:var(--muted); font-weight:600; white-space:nowrap; }
td.num, th.num { text-align:right; }
.scroll { overflow-x:auto; }
.matrix th:first-child, .matrix td:first-child { position:sticky; left:0; background:var(--card); z-index:1; white-space:nowrap; }
.matrix td { text-align:center; white-space:nowrap; font-size:.95rem; }
.cell { display:flex; gap:8px; justify-content:center; }
.cell .r { color:var(--muted); } .cell .q { color:var(--text); } .cell .s { color:var(--accent); font-weight:700; }
.badge { display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:10px; background:rgba(128,128,128,.18); color:var(--muted); }
.badge.ok { background:rgba(60,160,90,.2); color:#3c9a5a; } .badge.warn { background:rgba(200,80,50,.18); color:var(--error); }
.badge.doing { background:rgba(181,131,90,.22); color:var(--accent); }
.hint { font-size:.78rem; color:var(--muted); }
.diff { color:var(--accent); font-weight:700; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.actions button, .row button { padding:10px 18px; font-size:1rem; }
button.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
button.small { padding:6px 12px; font-size:.9rem; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chips button { padding:4px 10px; font-size:.85rem; }
.notice { padding:10px 12px; border-radius:10px; background:rgba(181,131,90,.15); margin-bottom:12px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#333; color:#fff;
  padding:10px 18px; border-radius:20px; z-index:9; max-width:90vw; }
.toast.err { background:var(--error); }
.legend { font-size:.85rem; color:var(--muted); margin:6px 0 10px; }
.inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.inline input[type=text], .inline input[type=number] { width:7em; }
@media (max-width:600px) { .wrap { padding:0 6px; } .panel { padding:12px 10px; } }

/* ===== 補貨回報：單位在數字右邊、確認勾勾 ===== */
.nu { display:inline-flex; align-items:center; gap:4px; }
.unit { font-size:.85rem; color:var(--muted); min-width:1.2em; }
table.fill td input[type=number] { width:4.6em; }
.chk { width:36px; height:36px; padding:0; font-size:1.1rem; border-radius:50%; background:transparent; color:var(--muted); border:2px solid var(--muted); }
.chk.auto, .chk.on { background:#3c9a5a; border-color:#3c9a5a; color:#fff; }
.chk.auto { opacity:.85; cursor:default; }
tr.warnrow td { background:rgba(192,57,43,.13); }
tr.warnrow .chk { border-color:var(--error); color:var(--error); }
/* 中央出貨：店家改過的品項、原因按鈕 */
.chgd { color:var(--error); font-weight:700; }
.chg { padding:1px 8px; font-size:.75rem; border-radius:10px; background:var(--error); color:#fff; }
.chgline { margin-top:4px; }
.rbtns { display:flex; gap:6px; margin-bottom:6px; }
.rb { padding:6px 10px; font-size:.85rem; background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:16px; }
.rb.on { background:var(--accent); color:#fff; }
/* 總覽：欄名與數字對齊 */
.cell { display:grid; grid-template-columns:2.4em 4.8em 3.6em; justify-items:center; }
.cell.sub { font-size:.75rem; color:var(--muted); margin-top:4px; font-weight:400; }

tr.rr td { padding-top:0; }
.rb { white-space:nowrap; }
.rline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rline .rbtns { margin:0; }
.rline input[type=text] { flex:1; min-width:8em; width:auto; }

/* 管理頁的表格：欄位不換行、太窄就左右捲動；「啟用」勾選框和字、按鈕內的字都是左右排 */
.admintable th, .admintable td { white-space:nowrap; }
.admintable tr.newrow td { background:rgba(181,131,90,.08); }
.admintable tr.newrow td:first-child { border-left:3px dashed var(--accent); }
.admintable tr.newrow input[type=text] { border-style:dashed; }
.admintable td { padding:9px 8px; }
.act { display:inline-flex; flex-direction:row; align-items:center; gap:6px; white-space:nowrap; font-size:.95rem; color:var(--text); cursor:pointer; }
.act input { width:18px; height:18px; margin:0; }
.ops { white-space:nowrap; }
.ops button, .admintable button { white-space:nowrap; }
.w-num { width:4.2em; }
.w-name { min-width:9em; }
.w-var { min-width:7em; }
.w-unit { width:4.2em; }
.admintable .hint { white-space:nowrap; }
.panelhead { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.panelhead h2 { margin:0; }
tr.inactive td { opacity:.55; }
.del { width:30px; height:30px; padding:0; border-radius:50%; font-size:.95rem; background:transparent; color:var(--error); border:1px solid var(--error); opacity:0; transition:opacity .15s; }
tr:hover .del, .del:focus { opacity:1; }
@media (hover:none) { .del { opacity:1; } }
.who { flex:1; text-align:right; margin-right:14px; color:var(--muted); font-size:.9rem; }
.login details { text-align:left; margin-top:18px; }
.login summary { cursor:pointer; color:var(--muted); margin-bottom:10px; }
.login form + details, .login details form { margin-top:10px; }

td.num .unit { margin-left:3px; }

.chgnote { display:inline; margin-left:2px; font-size:.8rem; color:var(--error); }
.chg { display:inline-block; }

/* 「改」的說明：寬螢幕直接顯示在旁邊；窄螢幕（手機）點「改」才展開 */
.chg { border:0; cursor:pointer; }
@media (max-width:640px) {
  .chgnote { display:none; }
  .chgnote.open { display:block; margin-top:4px; }
}

/* 驗證碼設定 */
.steps { padding-left:1.3em; line-height:1.7; }
.steps li { margin-bottom:12px; }
.key { display:inline-block; padding:4px 8px; background:rgba(128,128,128,.15); border-radius:6px; word-break:break-all; user-select:all; }
.qr { display:inline-block; padding:8px; background:#fff; border-radius:8px; min-height:40px; }

/* ===== 管理頁：品項、員工帳號的排版（寬螢幕排成一行，窄螢幕自動換行，不用左右捲動） ===== */
.rowhead, .rowgrid { display:grid; gap:10px 14px; align-items:center; }
.items-grid { grid-template-columns:5rem minmax(10rem,1.5fr) minmax(8rem,1fr) 5rem 8.5rem 8rem; }
.rowgrid .fld.stat { display:flex; flex-direction:column; gap:4px; }
.staff-grid { grid-template-columns:minmax(9rem,1.5fr) 9.5rem 9.5rem 5.5rem 15rem; }
.rowhead { font-size:.85rem; color:var(--muted); padding:0 0 8px; border-bottom:1px solid rgba(128,128,128,.3); }
.rowgrid { padding:12px 0; border-bottom:1px solid rgba(128,128,128,.18); font-size:1rem; }
.rowgrid.newrow { background:rgba(181,131,90,.08); border-left:3px dashed var(--accent); padding-left:10px; }
.rowgrid.newrow input[type=text] { border-style:dashed; }
.rowgrid.inactive { opacity:.6; }
.rowgrid .fld { display:block; min-width:0; }
.rowgrid .cap { display:none; font-size:.82rem; color:var(--muted); margin-bottom:4px; }
.rowgrid input[type=text], .rowgrid input[type=number], .rowgrid select { width:100%; min-width:0; font-size:1rem; padding:10px 12px; }
.rowgrid .hq { display:inline-block; padding:10px 12px; font-weight:700; }
.rowgrid .ops { display:flex; gap:8px; align-items:center; flex-wrap:wrap; white-space:nowrap; }
.rowgrid .ops button { white-space:nowrap; }
.rowgrid .info { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 22px; font-size:.92rem; color:var(--muted); }
.rowgrid .info b { color:var(--text); letter-spacing:.05em; }
@media (max-width:900px) {
  .rowhead { display:none; }
  .items-grid, .staff-grid { grid-template-columns:1fr 1fr; }
  .rowgrid .cap { display:block; }
  .rowgrid .fld.full { grid-column:1 / -1; }
  .rowgrid .ops { grid-column:1 / -1; }
  .rowgrid { padding:14px 0; }
}

/* ===== 登入頁：姓名、密碼、開通碼欄位大小、圓角一致（不受一般文字框樣式影響） ===== */
.login input[type=text], .login input[type=password], .login input[type=number] {
  width:100%; font-size:1.1rem; padding:12px 14px; border:1px solid var(--muted); border-radius:10px; }

/* ===== 手機：補貨回報的格子縮小，品項名稱不再被擠成好幾行 ===== */
@media (max-width:600px) {
  table.fill th, table.fill td { padding:7px 2px; }
  table.fill th { font-size:.8rem; }
  table.fill td:first-child { white-space:nowrap; font-size:.95rem; }
  table.fill td input[type=number] { width:3.1em; padding:8px 4px; font-size:1rem; }
  table.fill .nu { gap:2px; }
  table.fill .unit { min-width:0; font-size:.8rem; }
  .chk { width:28px; height:28px; font-size:.9rem; border-width:2px; }
  table.fill td.num, table.fill th.num { padding-left:0; padding-right:0; }
}

/* ===== 手機：管理頁的品項，每個品項只佔兩行（第一行：順序、名稱、啟用；第二行：細分、單位、儲存） ===== */
@media (max-width:900px) {
  .items-grid { grid-template-columns:3.4em 1fr 4em auto; gap:8px; }
  .items-grid.rowgrid { padding:10px 0; }
  .items-grid .cap { display:none; }
  .items-grid > :nth-child(1) { grid-area:1 / 1; }
  .items-grid > :nth-child(2) { grid-area:1 / 2 / 2 / 5; }
  .items-grid > :nth-child(5) { grid-area:3 / 1 / 4 / 5; justify-self:start; }
  .items-grid .fld.stat { flex-direction:row; flex-wrap:wrap; gap:4px 18px; }
  .items-grid > :nth-child(3) { grid-area:2 / 1 / 3 / 3; }
  .items-grid > :nth-child(4) { grid-area:2 / 3; }
  .items-grid > :nth-child(6) { grid-area:2 / 4; }
  .items-grid input[type=text], .items-grid input[type=number] { padding:8px 8px; font-size:.98rem; }
  .items-grid .ops { flex-wrap:nowrap; gap:6px; }
}

/* ===== 手機：中央出貨的表格，品項名稱一行放完（字縮小）；「改」在名稱右邊，點了說明展開在下面 ===== */
@media (max-width:600px) {
  table.ship th, table.ship td { padding:7px 2px; }
  table.ship th { font-size:.8rem; }
  table.ship tr:not(.rr) > td:first-child { white-space:nowrap; font-size:.95rem; }
  table.ship td.num { white-space:nowrap; font-size:.95rem; }
  table.ship td input[type=number] { width:3.1em; padding:8px 4px; font-size:1rem; }
  table.ship .nu { gap:2px; }
  table.ship .unit { min-width:0; font-size:.8rem; }
  table.ship .chg { padding:0 6px; font-size:.7rem; margin-left:2px; }
  table.ship .chgnote.open { display:block; white-space:normal; max-width:9em; margin-top:4px; line-height:1.4; }
}

/* ===== 中央出貨：原因直接顯示在品項名稱下面一小行（點一下才展開編輯），版面不會跳動 ===== */
table.ship .rsum { display:inline-block; vertical-align:middle; margin-left:6px; min-width:6.4em; text-align:center; padding:1px 8px; font-size:.78rem; color:var(--accent); cursor:pointer; user-select:none;
  border:1px solid var(--accent); border-radius:12px; background:rgba(181,131,90,.10); white-space:nowrap; }
table.ship .rsum::after { content:" ▾"; }
table.ship .rsum.open::after { content:" ▴"; }
table.ship .rsum.open { background:var(--accent); color:#fff; }
/* 沒有原因時也先留著這一行的高度（只是看不見），輸入數字時整列不會變高、下面的格子不會跳掉 */
table.ship .rsum[hidden] { display:inline-block; visibility:hidden; pointer-events:none; }
table.ship .chg { line-height:1.3; vertical-align:middle; }
/* 展開原因時：品項那一列＋編輯區塊整組用同一個淡棕底，中間不畫線，整組下面畫稍深的線，看得出編輯區屬於哪個品項 */
table.ship tr:has(+ tr.rr:not([hidden])) > td { background:rgba(181,131,90,.09); border-bottom:0; }
table.ship tr.rr:not([hidden]) > td { background:rgba(181,131,90,.09); padding:8px 8px 12px; border-bottom:1px solid rgba(181,131,90,.4); }
table.ship tr.rr .rline { align-items:center; }
table.ship tr.rr .rbtns { margin:0; }
/* 原因：按鈕被選中＝實心；自訂備註有字＝輸入框邊框變色，兩者只會有一個 */
.rline input[type=text].on { border-color:var(--accent); border-width:2px; }

/* ===== 手機／窄螢幕：員工帳號每人四行（姓名；身分＋所屬；啟用＋按鈕；最近登入等小字），欄位標題改成框內提示 ===== */
@media (max-width:900px) {
  .staff-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .staff-grid.rowgrid { padding:12px 0; }
  .staff-grid .cap { display:none; }
  .rowgrid.staff-grid > :nth-child(1) { grid-area:1 / 1 / 2 / 3; }
  .rowgrid.staff-grid > :nth-child(2) { grid-area:2 / 1; }
  .rowgrid.staff-grid > :nth-child(3) { grid-area:2 / 2; }
  .rowgrid.staff-grid > :nth-child(4) { grid-area:3 / 1; }
  .rowgrid.staff-grid > :nth-child(5) { grid-area:3 / 2; justify-self:end; }
  .rowgrid.staff-grid > :nth-child(6) { grid-area:auto / 1 / auto / 3; }
  /* 有按鈕的那排（儲存、重設密碼、登出所有裝置）自己佔一整排、可以換行；不然不換行的按鈕會把右欄撐大，身分選單被擠成一小格 */
  .rowgrid.staff-grid > .ops:has(button) { grid-area:4 / 1 / 5 / 3; justify-self:stretch; flex-wrap:wrap; }
  .rowgrid.staff-grid > .ops:has(button) button { flex:1 1 auto; }
  .staff-grid input[type=text], .staff-grid select { padding:9px 10px; font-size:.98rem; }
  .staff-grid .ops { flex-wrap:nowrap; gap:6px; }
  .rowgrid .info { font-size:.85rem; gap:2px 14px; }
}

/* 備註輸入框＋「✓ 確認」放同一行，窄螢幕時整組換到按鈕下面一行 */
.rline .rnote { display:flex; gap:6px; align-items:center; flex:0 1 auto; max-width:100%; }
/* 備註框固定寬度、確認鈕貼在旁邊；字太長就在框裡左右滑動 */
.rline .rnote input[type=text] { flex:0 1 15em; width:15em; min-width:0; }
.rok { flex:none; padding:8px 12px; font-size:.9rem; border-radius:8px; white-space:nowrap; }

/* 管理頁「儲存」鈕：沒有改動時反灰、不能按；有改動才亮起來 */
button[data-save]:disabled, button[data-act=save]:disabled { background:rgba(128,128,128,.22); color:var(--muted); cursor:default; }

/* ===== 總覽：四家店靠近一點，一眼看完（每家店三欄：剩／補／實出） ===== */
.matrix th, .matrix td { padding:6px 3px; }
.matrix td:first-child, .matrix th:first-child { padding-right:8px; }
.matrix th:not(:first-child), .matrix td:not(:first-child) { border-left:1px solid rgba(128,128,128,.15); }
.matrix .cell { grid-template-columns:1.9em 1.9em 2.4em; }
.matrix .cell.sub { font-size:.75rem; }
@media (max-width:600px) {
  .matrix td, .matrix th { font-size:.82rem; }
  .matrix .cell { grid-template-columns:1.6em 1.6em 2em; }
  .matrix .cell.sub { font-size:.7rem; }
}
.matrix { width:auto; }
@media (max-width:600px) {
  .matrix th, .matrix td { padding:5px 2px; font-size:.8rem; }
  .matrix td:first-child, .matrix th:first-child { padding-right:4px; font-size:.78rem; }
  .matrix .cell { grid-template-columns:1.4em 1.4em 1.9em; }
  .matrix .cell.sub { font-size:.66rem; }
  .matrix .badge { font-size:.62rem; padding:1px 5px; white-space:nowrap; }
}
.matrix .cell { gap:4px; }
@media (max-width:600px) { .matrix .cell { gap:1px; } }

/* ===== 響應式：平板、桌面把畫面拉寬，標題列、分頁、內容用同一條置中的欄；簡單的表單頁面置中，不會全部擠在左邊 ===== */
@media (min-width:900px) {
  .bar, .tabs, .wrap { max-width:1240px; margin-left:auto; margin-right:auto; }
  .bar { padding:16px 20px; }
  .tabs { justify-content:center; padding:0 12px; overflow-x:visible; }
  .tabs button { padding:9px 18px; }
  .wrap { padding:0 16px; }
  .panel { padding:22px 24px; }
  /* 表單型頁面：內容不用拉到最寬，置中比較好讀 */
  #view[data-tab=report] .panel, #view[data-tab=mine] .panel, #view[data-tab=stock] .panel,
  #view[data-tab=settings] .panel { max-width:780px; margin-left:auto; margin-right:auto; }
  #view[data-tab=ship] .panel { max-width:1000px; margin-left:auto; margin-right:auto; }
  /* 總覽：表格置中，欄位寬鬆一點，好讀又不會離太遠 */
  .matrix { margin:0 auto; }
  .matrix th, .matrix td { padding:8px 10px; }
  .matrix td:first-child, .matrix th:first-child { padding-right:16px; }
  .matrix .cell { grid-template-columns:2.2em 2.2em 2.8em; gap:6px; }
  .matrix .cell.sub { font-size:.8rem; }
}
@media (min-width:1200px) { html { font-size:17px; } }
@media (min-width:1600px) { html { font-size:18px; } }

/* 庫存推算成負數：橘色提醒（不是錯誤） */
.hint.neg, .hint.warn, td.neg { color:#d9822b; font-weight:600; }

/* 設定頁：區塊標題 */
.secttl { margin:0 0 12px; font-size:1.1rem; }
.sec2fa h4 { margin:0 0 8px; font-size:1rem; }

/* 管理頁小分頁（員工／品項／店家／系統） */
.subtabs { display:flex; gap:6px; margin:0 0 12px; overflow-x:auto; }
.subtabs button { flex:none; padding:7px 18px; font-size:.95rem; background:transparent; color:var(--muted); border:1px solid rgba(128,128,128,.35); border-radius:18px; }
.subtabs button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
@media (min-width:900px) { #view[data-tab=admin] .subtabs { justify-content:center; } }

/* ===== 管理頁「單位」：平常只顯示結果，按編輯才出現勾選 ===== */
div.unit { padding:14px 0; border-bottom:1px solid rgba(128,128,128,.18); }
div.unit.inactive { opacity:.6; }
.unit-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:1.05rem; }
.pchips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.pchip { padding:3px 12px; border-radius:14px; background:rgba(181,131,90,.16); color:var(--accent); font-size:.88rem; }
.unit-form { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:end; margin-bottom:10px; }
.unit-form label:not(.act) { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted); }
.pagebox { display:flex; flex-wrap:wrap; gap:8px 18px; margin:6px 0 12px; }
.newunit { margin-top:18px; padding:16px; border:1px dashed var(--accent); border-radius:12px; background:rgba(181,131,90,.06); border-bottom:1px dashed var(--accent); }
.newunit .secttl { margin-bottom:10px; }

/* ===== 操作紀錄 ===== */
.chips button.on { background:var(--accent); color:#fff; }
.logrow { padding:10px 0; border-bottom:1px solid rgba(128,128,128,.18); }
.logtop { display:flex; gap:10px; align-items:center; margin-bottom:2px; }
.logtime { font-size:.82rem; color:var(--muted); min-width:7.5em; }
.logact { padding:1px 10px; border-radius:12px; font-size:.82rem; background:rgba(181,131,90,.16); color:var(--accent); }
.logrow.alert .logact { background:rgba(192,57,43,.14); color:var(--error); }
.logrow.alert { border-left:3px solid var(--error); padding-left:10px; }

/* ===== 二次確認密碼框 ===== */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.modal .box { background:var(--card); border-radius:16px; padding:22px 20px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:10px; }
.modal .box h3 { margin:0; }
.modal .box p { margin:0; }
.modalbtns { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }

/* ===== 指紋／臉部登入 ===== */
.pk { width:100%; padding:14px; font-size:1.05rem; margin:4px 0 6px; }
.pklist { list-style:none; padding:0; margin:8px 0 12px; }
.pklist li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(128,128,128,.18); }
.pklist small { color:var(--muted); }

/* 分頁列用手指滑動就好，不顯示橫向捲軸（手機 Chrome 載入後會停著一條灰線，要碰一下才消失） */
.tabs, .subtabs { scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar { display: none; }

/* 已有紀錄的品項：單位鎖住 */
input.locked { background:rgba(128,128,128,.12); color:var(--muted); cursor:not-allowed; }

/* 測試用快速填入 */
.qf { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0; padding:8px 10px; border:1px dashed var(--accent); border-radius:10px; background:rgba(181,131,90,.06); }
.qf b { font-size:.85rem; margin-right:2px; }
.qf select { width:auto; font-size:.9rem; padding:5px 8px; }
.qf input.qfn { width:5em; font-size:.9rem; padding:5px 8px; }
.qf button { min-width:2.6em; }

/* ===== 中央庫存：電腦一列、手機一個品項一張小卡 ===== */
.stk { display:block; }
.stkhead, .stkrow { display:grid; grid-template-columns:minmax(9rem,2fr) repeat(5, minmax(4.5rem,1fr)); gap:8px 10px; align-items:center; }
.stkhead { font-size:.85rem; color:var(--muted); padding:0 0 8px; border-bottom:1px solid rgba(128,128,128,.3); }
.stkhead .num, .stkrow .num { text-align:right; }
.stkrow { padding:10px 0; border-bottom:1px solid rgba(128,128,128,.18); }
.stkrow .cap { display:none; }
.stkrow input[type=number] { width:100%; max-width:6em; text-align:right; }
@media (max-width:900px) {
  .stkhead { display:none; }
  .stkrow { grid-template-columns:repeat(4, 1fr); padding:12px 0; }
  .stkrow > div { min-width:0; }
  .stkrow .cap { display:block; font-size:.75rem; color:var(--muted); margin-bottom:2px; text-align:left; }
  .stkrow .num { text-align:left; }
  .stkrow .c-name { grid-area:1 / 1 / 2 / 4; font-size:1.05rem; }
  .stkrow .c-e { grid-area:1 / 4; text-align:right; font-size:1.15rem; }
  .stkrow .c-e .cap { text-align:right; }
  .stkrow .c-y { grid-area:2 / 1; } .stkrow .c-p { grid-area:2 / 2; } .stkrow .c-s { grid-area:2 / 3; } .stkrow .c-c { grid-area:2 / 4; }
  .stkrow input[type=number] { max-width:none; width:100%; padding:8px 8px; font-size:1rem; }
}

.prevttl { margin:22px 0 8px; padding-top:14px; border-top:2px dashed rgba(128,128,128,.4); }

/* 中央出貨：店家分頁（一次一家，捲動時固定在上方） */
.storetabs { position:sticky; top:0; z-index:5; display:flex; gap:8px; margin:0 -4px 12px; padding:8px 4px; overflow-x:auto; background:var(--bg); scrollbar-width:none; }
.storetabs::-webkit-scrollbar { display:none; }
.stab { flex:1 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 14px; min-width:76px; background:var(--card); color:var(--text); border:1px solid rgba(128,128,128,.3); border-radius:14px; }
.stab b { font-size:1rem; font-weight:600; }
.stab small { font-size:.72rem; color:var(--muted); }
.stab small.ok { color:#3c9a5a; } .stab small.doing { color:var(--accent); }
.stab.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.stab.on small { color:rgba(255,255,255,.9); }
table.ship.none td { color:var(--muted); }

/* 「改」的說明：所有螢幕都先收起來，點「改」才以浮動小框顯示在名稱下面（浮在上面，不撐高那一列） */
table.ship td:first-child { position:relative; }
table.ship .chgnote { display:none; }
table.ship .chgnote.open { display:block; position:absolute; left:4px; top:100%; z-index:6; margin:0; padding:8px 12px; width:max-content; max-width:min(24em, calc(100vw - 52px)); white-space:normal; line-height:1.5; font-size:.85rem;
  background:var(--card); color:var(--error); border:1px solid var(--error); border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.18); }

/* 沒回報的店：用看不見的輸入框和標籤撐出跟有回報的店一樣的列高 */
table.ship.none .ghost { visibility:hidden; pointer-events:none; }

/* 中央出貨：填原因的區塊是浮在該品項那一列正下方的小面板（靠右、跟著頁面捲動），不佔表格的位置，點開、收起時表格不會動 */
.panel[data-report] { position:relative; }
table.ship tr.rr:not([hidden]) { display:block; position:absolute; right:8px; width:min(26em, calc(100% - 16px)); z-index:30; margin:0; background:var(--card); border:2px solid var(--accent); border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.28); }
table.ship tr.rr:not([hidden]) > td { display:block; background:transparent; border:0; padding:12px 14px; }
table.ship .rtit { display:none; }
table.ship tr.rr:not([hidden]) .rtit { display:block; font-weight:700; margin-bottom:8px; }

/* 實出跟補貨不一樣：出多＝藍、出少＝橘（輸入格、原因標籤、整列淡底） */
:root { --more:#2f7fc1; --less:#d9822b; }
table.ship input[data-dir="more"] { border-color:var(--more); box-shadow:inset 0 0 0 1px var(--more); background:rgba(47,127,193,.12); font-weight:700; }
table.ship input[data-dir="less"] { border-color:var(--less); box-shadow:inset 0 0 0 1px var(--less); background:rgba(217,130,43,.14); font-weight:700; }
table.ship .rsum[data-dir="more"] { color:var(--more); border-color:var(--more); background:rgba(47,127,193,.10); }
table.ship .rsum[data-dir="less"] { color:var(--less); border-color:var(--less); background:rgba(217,130,43,.12); }
table.ship .rsum[data-dir="more"]::before { content:"▲ "; } table.ship .rsum[data-dir="less"]::before { content:"▼ "; }
table.ship tr[data-dir="more"] > td:first-child { box-shadow:inset 4px 0 0 var(--more); }
table.ship tr[data-dir="less"] > td:first-child { box-shadow:inset 4px 0 0 var(--less); }

/* 填原因面板：縮小、靠左，右邊「實出」那一欄空出來，不擋住下面的輸入格 */
table.ship tr.rr:not([hidden]) { left:6px; right:auto; width:min(21em, calc(100% - 140px)); border-width:1px; border-radius:12px; }
table.ship tr.rr:not([hidden]) > td { padding:8px 10px; }
table.ship tr.rr:not([hidden]) .rtit { font-size:.85rem; margin-bottom:6px; }
table.ship tr.rr:not([hidden]) .rline { gap:6px; }
table.ship tr.rr:not([hidden]) .rb { padding:5px 10px; font-size:.85rem; }
table.ship tr.rr:not([hidden]) .rnote input[type=text] { width:100%; flex:1 1 8em; min-width:0; padding:6px 8px; font-size:.9rem; }
table.ship tr.rr:not([hidden]) .rok { padding:5px 10px; font-size:.85rem; }

/* 填原因面板（寬螢幕）：放在原因標籤右邊、同一列，一行排完：兩個按鈕＋備註＋確認 */
table.ship tr.rr.inl:not([hidden]) { right:auto; border-width:1px; }
table.ship tr.rr.inl:not([hidden]) > td { padding:6px 8px; }
table.ship tr.rr.inl:not([hidden]) .rtit { display:none; }
table.ship tr.rr.inl:not([hidden]) .rline { flex-wrap:nowrap; gap:6px; }
table.ship tr.rr.inl:not([hidden]) .rbtns { display:flex; gap:4px; flex:none; }
table.ship tr.rr.inl:not([hidden]) .rb { white-space:nowrap; padding:4px 8px; }
table.ship tr.rr.inl:not([hidden]) .rnote { flex:1 1 auto; min-width:0; }
table.ship tr.rr.inl:not([hidden]) .rnote input[type=text] { flex:1 1 auto; width:auto; min-width:4em; }
table.ship tr.rr.inl:not([hidden]) .rok { flex:none; white-space:nowrap; }

/* ===== 中央出貨：原因自己一欄（固定對齊）。標籤自動顯示；✎ 在同一格裡打備註 ===== */
table.ship th.rcol, table.ship td.rcol { width:9.4em; text-align:center; white-space:nowrap; }
table.ship .rcell { position:relative; display:inline-flex; align-items:center; gap:4px; max-width:100%; }
table.ship td.rcol .rsum { display:inline-block; margin:0; max-width:7em; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; cursor:pointer; }
table.ship td.rcol .rsum::after { content:""; }
table.ship td.rcol .rsum[hidden], table.ship .rnbtn[hidden] { display:inline-block; visibility:hidden; }
table.ship .rnbtn { flex:none; width:1.9em; height:1.9em; padding:0; line-height:1; border-radius:50%; font-size:.85rem; background:transparent; color:var(--muted); border:1px solid rgba(128,128,128,.4); }
table.ship .rpop { position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:20; display:flex; gap:4px; padding:4px; background:var(--card); border:1px solid var(--accent); border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.25); }
table.ship .rpop[hidden] { display:none; }
table.ship .rpop input[type=text] { width:11em; max-width:55vw; padding:6px 8px; font-size:.95rem; }
table.ship .rpop .rok { flex:none; padding:4px 12px; }
@media (max-width:600px) {
  table.ship th.rcol, table.ship td.rcol { width:6.6em; }
  table.ship td.rcol .rsum { font-size:.68rem; padding:1px 4px; max-width:4.6em; }
  table.ship .rnbtn { width:1.7em; height:1.7em; }
}

/* 備註框不再浮在上面：在「原因」那一格裡，直接取代標籤和 ✎（格子寬度不變，不蓋到任何東西） */
table.ship .rpop { position:static; transform:none; box-shadow:none; border:0; padding:0; background:transparent; z-index:auto; }
table.ship .rpop[hidden] { display:none; }
/* 打備註時：前面的原因標籤留著，只把 ✎ 換成輸入框，輸入框接在標籤後面 */
table.ship .rcell:has(.rpop:not([hidden])) > .rnbtn { display:none; }
table.ship .rpop input[type=text] { width:6.6em; max-width:none; padding:5px 6px; font-size:.85rem; border:2px solid var(--accent); }
table.ship .rpop .rok { padding:3px 9px; font-size:.9rem; }
table.ship th.rcol, table.ship td.rcol { width:10em; }
@media (max-width:600px) {
  table.ship th.rcol, table.ship td.rcol { width:7em; }
  table.ship .rpop input[type=text] { width:4.6em; }
}

/* 原因欄吃掉表格右邊剩下的空間：備註越長，標籤和輸入框越往右延伸 */
table.ship th.rcol, table.ship td.rcol { width:99%; text-align:left; }
table.ship .rcell { display:flex; width:100%; }
table.ship td.rcol .rsum { max-width:calc(100% - 4.8em); min-width:0; }
table.ship .rpop { flex:1 1 auto; display:flex; min-width:0; }
table.ship .rpop[hidden] { display:none; }
table.ship .rpop input[type=text] { flex:1 1 auto; width:auto; min-width:6.6em; }
table.ship .rnbtn { width:auto; min-width:1.9em; padding:0 8px; border-radius:1em; }
@media (max-width:600px) {
  table.ship th.rcol, table.ship td.rcol { width:99%; }
  table.ship .rnbtn .lbl { display:none; }
  table.ship .rnbtn { width:1.7em; padding:0; border-radius:50%; }
  table.ship td.rcol .rsum { max-width:calc(100% - 2.4em); }
}
/* 原因欄吃掉剩餘寬度時，其他欄一律不換行（不然品項名稱會被擠成兩行、列變高） */
table.ship td:not(.rcol), table.ship th:not(.rcol) { white-space:nowrap; }
table.ship .rcell { min-height:2.3em; }

/* 「✎ 其他」跟前面的原因標籤同樣大小、同樣的膠囊形狀，並排時對得整齊 */
table.ship .rnbtn { width:auto; height:auto; min-width:0; padding:1px 9px; font-size:.78rem; line-height:1.5; border-radius:12px; }
table.ship .rcell { align-items:center; }
@media (max-width:600px) {
  table.ship .rnbtn { padding:1px 7px; font-size:.7rem; width:auto; height:auto; border-radius:12px; }
}
/* 標籤和「其他」按鈕：同一個高度（1.6 倍字高）、文字置中 */
table.ship td.rcol .rsum, table.ship .rnbtn { box-sizing:border-box; height:1.6em; line-height:calc(1.6em - 2px); padding-top:0; padding-bottom:0; white-space:nowrap; }

/* 自動同步提示：別人更新了資料，但你正在輸入時才出現 */
.syncbar { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:80; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; max-width:92vw; padding:10px 16px; background:var(--card); color:var(--text); border:1px solid var(--accent); border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.25); }
.syncbar[hidden] { display:none; }
.syncbar small { color:var(--muted); }
.syncbar button { padding:5px 14px; }
.syncat { font-size:.72rem; color:var(--muted); white-space:nowrap; }
@media (max-width:600px) { .syncat { display:none; } }

/* 我的補貨單：中央調整過的品項，品項列＋說明列合成一組（同底色、同色線），組與組之間的線較深 */
table.mine tr.grp.more > td { background:rgba(47,127,193,.08); }
table.mine tr.grp.less > td { background:rgba(217,130,43,.09); }
table.mine tr.grp.more > td:first-child { box-shadow:inset 4px 0 0 var(--more); }
table.mine tr.grp.less > td:first-child { box-shadow:inset 4px 0 0 var(--less); }
table.mine tr.grp:not(.grpnote):has(+ tr.grpnote) > td { border-bottom:0; }
table.mine tr.grpnote > td { padding:0 8px 9px 8px; font-size:.85rem; border-bottom:1px solid rgba(128,128,128,.45); }
table.mine tr.grpnote.more > td { color:var(--more); }
table.mine tr.grpnote.less > td { color:var(--less); }
table.mine td.diff { font-weight:700; }
table.mine tr.more td.diff { color:var(--more); } table.mine tr.less td.diff { color:var(--less); }

/* 我的補貨單：中央說明接在品項名稱後面，不另外佔一行 */
table.mine .mnote { display:inline-block; margin-left:6px; padding:0 8px; font-size:.8rem; border:1px solid currentColor; border-radius:12px; vertical-align:middle; }
table.mine tr.more .mnote { color:var(--more); background:rgba(47,127,193,.1); }
table.mine tr.less .mnote { color:var(--less); background:rgba(217,130,43,.12); }

/* 中央說明放在「中央實出」數字的左邊（那是中央對這個數字的說明），太長就縮短，滑鼠停上去看全文 */
table.mine td.num .mnote { margin:0 8px 0 0; max-width:11em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; vertical-align:middle; }
table.mine td.num { white-space:nowrap; }

/* 中央庫存：盤點跟推算不一樣時，那一列下面的差異與原因（多藍少橘，跟中央出貨同一套顏色） */
.stkwhy { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:2px 0 10px; border-bottom:1px solid rgba(128,128,128,.18); }
.stkwhy[hidden] { display:none; }
.stkwhy .dp { font-weight:700; padding:1px 10px; border-radius:12px; border:1px solid currentColor; }
.stkwhy[data-dir="more"] .dp { color:var(--more); background:rgba(47,127,193,.10); }
.stkwhy[data-dir="less"] .dp { color:var(--less); background:rgba(217,130,43,.12); }
.stkwhy .chs { display:inline-flex; flex-wrap:wrap; gap:4px; }
.stkwhy .ch { padding:2px 10px; font-size:.82rem; background:transparent; color:var(--muted); border:1px solid rgba(128,128,128,.4); border-radius:12px; }
.stkwhy .ch.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.stkwhy input[type=text] { flex:1 1 9em; min-width:8em; max-width:16em; padding:5px 8px; font-size:.9rem; }
.stkrow:has(+ .stkwhy:not([hidden])) { border-bottom:0; padding-bottom:6px; }
.stkrow[data-dir="more"] { box-shadow:inset 4px 0 0 var(--more); padding-left:8px; }
.stkrow[data-dir="less"] { box-shadow:inset 4px 0 0 var(--less); padding-left:8px; }
.stkrow input[data-dir="more"] { border-color:var(--more); box-shadow:inset 0 0 0 1px var(--more); background:rgba(47,127,193,.12); font-weight:700; }
.stkrow input[data-dir="less"] { border-color:var(--less); box-shadow:inset 0 0 0 1px var(--less); background:rgba(217,130,43,.14); font-weight:700; }
.stkwhy[data-dir] { padding-left:8px; box-shadow:inset 4px 0 0 var(--less); }
.stkwhy[data-dir="more"] { box-shadow:inset 4px 0 0 var(--more); }

/* 中央庫存：沒盤、自動帶入推算值的格子（淺色，改了數字就變成一般的盤點） */
.stkrow input.auto { color:var(--muted); background:transparent; border-style:dashed; }

.stkwhy .ch[hidden] { display:none; }

/* 中央庫存：每一列的「已儲存／未儲存」小標記（在盤點格下面），改了就變成橘色的「未儲存」，存好變綠色的「✓ 已存」 */
.stkrow .tk { display:block; min-height:1.15em; margin-top:2px; font-size:.72rem; text-align:right; color:var(--muted); }
.stkrow .tk[data-tk="saved"] { color:#3c9a5a; }
.stkrow .tk[data-tk="dirty"] { color:var(--less); font-weight:700; }
@media (max-width:640px) { .stkrow .tk { text-align:left; } }

/* 中央庫存：盤點格旁的 ✓（數量對就按，自動填入推算；要一項一項按，沒有「全部確認」，避免沒數就一鍵過） */
.stkrow .cin { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.stkrow .ck { flex:none; width:30px; height:30px; padding:0; font-size:1rem; line-height:1; border-radius:50%; background:transparent; color:var(--muted); border:2px solid rgba(128,128,128,.5); }
.stkrow .ck.on { background:#3c9a5a; border-color:#3c9a5a; color:#fff; }
.stkrow .ck:disabled { opacity:.35; cursor:default; }
.ckbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
@media (max-width:640px) { .stkrow .cin { justify-content:flex-start; } .stkrow .ck { width:34px; height:34px; } }

/* 中央庫存：數字格要放得下大數字（例如 22000），不能被切掉（保留數字框右邊的上下小箭頭）。欄位比例跟原本接近，只有盤點欄多放一個 ✓ 所以稍寬 */
.stkhead, .stkrow { grid-template-columns:minmax(9rem,2fr) minmax(4.5rem,1fr) minmax(6.8rem,1.3fr) minmax(4.5rem,1fr) minmax(4.5rem,1fr) minmax(10rem,1.5fr); }
.stkrow input[type=number] { min-width:5em; max-width:7.5em; }
.stkrow .cin input[type=number] { flex:1 1 auto; width:auto; }
@media (max-width:900px) {
  .stkrow { grid-template-columns:repeat(4, 1fr); }
  .stkrow input[type=number] { max-width:none; min-width:0; }
  /* 手機：昨日、生產、出貨一排；盤點自己一整排（放得下大數字和 ✓） */
  .stkrow .c-y { grid-area:2 / 1; } .stkrow .c-p { grid-area:2 / 2 / 3 / 4; } .stkrow .c-s { grid-area:2 / 4; }
  .stkrow .c-c { grid-area:3 / 1 / 4 / 5; }
  .stkrow .cin { justify-content:flex-start; }
  .stkrow .cin input[type=number] { flex:1 1 auto; }
}

/* 中央庫存（電腦版）：盤點格下面的「已存／未儲存」小標記改成浮在格子下方，不撐高那一格，這樣生產、盤點兩個數字框才會上下對齊 */
@media (min-width:901px) {
  .stkrow { padding-bottom:22px; }
  .stkrow .c-c { position:relative; }
  .stkrow .c-c .tk { position:absolute; right:0; top:100%; margin-top:1px; white-space:nowrap; }
}

/* 中央庫存：這天的盤點狀態（最上面那一條）與每列狀態字 */
.cntban { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:9px 14px; border-radius:12px; margin:0 0 10px; }
.cntban.b0 { background:rgba(217,130,43,.14); color:#a85f12; border:1px solid rgba(217,130,43,.5); }
.cntban.b1 { background:rgba(47,127,193,.10); color:#1f5f94; border:1px solid rgba(47,127,193,.45); }
.cntban.b2 { background:rgba(60,160,90,.14); color:#2c7a45; border:1px solid rgba(60,160,90,.5); }
@media (prefers-color-scheme: dark) { .cntban.b0 { color:#f0b073; } .cntban.b1 { color:#8fc3ee; } .cntban.b2 { color:#8fd5a6; } }
.cntban .warn { color:var(--less); font-weight:700; }
.cntban .btn { margin-left:auto; padding:3px 14px; background:transparent; color:inherit; border:1px solid currentColor; border-radius:12px; }
.stkrow .tk[data-tk="stale"] { color:var(--less); font-weight:700; }
.stkrow .tk[data-tk="none"] { color:var(--muted); }
.stkrow input[data-f=count]:disabled { background:rgba(128,128,128,.14); color:inherit; opacity:1; border-color:transparent; }

/* 修改盤點（第 2 次以後）用另一種顏色（--re），跟第一次盤點的綠色分開 */
/* 修改盤點的顏色集中在 --re 一個地方，要換色改這一行 */
:root { --re:#0f8f94; --re-bg:rgba(15,143,148,.10); --re-text:#0b6d71; }
@media (prefers-color-scheme: dark) { :root { --re-text:#6ccfd3; } }
.cntban.b3 { background:var(--re-bg); color:var(--re-text); border:1px solid var(--re); }
.stkrow .ck.on.re { background:var(--re); border-color:var(--re); color:#fff; }

.cntban .btn + .btn { margin-left:0; }
.cntban #undoEdit { margin-left:auto; }

/* 盤點差異的原因：一定要選。沒選就按儲存 → 那一列標紅；原因旁的 ✓ 選好才變綠色 */
.stkwhy .oth { display:inline-flex; align-items:center; gap:6px; }
.stkwhy .oth[hidden], .stkwhy .otxt[hidden] { display:none; }
.stkwhy .wok { flex:none; padding:4px 12px; font-size:.85rem; border-radius:12px; background:var(--accent); color:#fff; border:0; }
.stkwhy .otxt { max-width:18em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stkwhy.need { box-shadow:inset 4px 0 0 var(--error); background:rgba(192,57,43,.08); border-radius:8px; }
.stkwhy.need::after { content:"請先選原因"; color:var(--error); font-weight:700; font-size:.85rem; }
.stkwhy.need input[type=text] { border-color:var(--error); }
/* 差異那一行出現時，盤點格下面的「未儲存」標記還是要有位置，不能被原因區塊壓住 */
@media (min-width:901px) { .stkrow:has(+ .stkwhy:not([hidden])) { padding-bottom:24px; } .stkwhy { padding-top:8px; } }

.cntban #exitRecount { margin-left:auto; }
.cntban #exitRecount + #cancelCount { margin-left:0; }

/* 桶數合計列（補貨回報、我的補貨單、中央出貨）：淡色底的一條，數字用主色，不再用粗線 */
tr.tot td { border-top:0; border-bottom:0; background:rgba(181,131,90,.12); padding:8px 8px; font-weight:400; font-size:.85rem; color:var(--muted); }
tr.tot td:first-child { border-radius:10px 0 0 10px; }
tr.tot td:last-child { border-radius:0 10px 10px 0; }
tr.tot .tv { display:inline-block; text-align:right; font-size:1.05rem; font-weight:700; color:var(--accent); }
/* 合計的數字跟上面輸入格的數字右邊對齊：寬度和右邊留白都跟輸入格一樣（輸入格：邊框 1px＋內距） */
table.fill tr.tot .tv { width:4.6rem; padding-right:9px; }
table.ship tr.tot .tv { width:5.2rem; padding-right:11px; }
@media (max-width:640px) {
  table.fill tr.tot .tv, table.ship tr.tot .tv { width:3.1rem; padding-right:5px; }
  table.fill tr.tot td, table.ship tr.tot td { padding-left:2px; padding-right:2px; }
  table.fill tr.tot td:first-child, table.ship tr.tot td:first-child { padding-left:6px; }
}
/* 我的補貨單沒有輸入格，數字直接靠右，跟上面的數字＋單位對齊 */
table.mine tr.tot .nu { display:inline; }
table.mine tr.tot .unit { margin-left:3px; }
.grandtot { margin:6px 0 10px; padding:8px 12px; border-radius:10px; background:rgba(181,131,90,.12); font-size:.9rem; color:var(--muted); }
.grandtot .tv { font-size:1.1rem; font-weight:700; color:var(--accent); }
.grandtot .unit { font-size:.8rem; }
.grandtot .hint { margin-left:6px; }

/* 補貨回報：格子上下縮小一點，一個畫面看得到更多品項 */
table.fill td { padding-top:4px; padding-bottom:4px; }
table.fill td input[type=number] { padding:5px 8px; }
table.fill .chk { width:30px; height:30px; font-size:1rem; }
@media (max-width: 640px) {
  table.fill td input[type=number] { padding:5px 4px; }
  table.fill .chk { width:26px; height:26px; font-size:.85rem; }
}

/* 設定密碼時的規則提示：淺灰 ○，達成變綠色 ✓ */
.pwrules { list-style:none; margin:2px 0 8px; padding:0; font-size:.85rem; color:var(--muted); text-align:left; }
.pwrules li::before { content:"○"; display:inline-block; width:1.4em; }
.pwrules li.ok { color:#1e8a4c; }
.pwrules li.ok::before { content:"✓"; font-weight:700; }

/* 標題列的「重置測試資料」 */
.resetbtn { margin-right:12px; white-space:nowrap; }
@media (max-width:600px) { .resetbtn { margin-right:6px; padding:4px 8px; font-size:.78rem; } }

/* 電腦（有滑鼠）的數字輸入格，右邊會預留上下小箭頭的位置（約 15px），合計的數字也要多退一點才會對齊 */
@media (hover:hover) and (pointer:fine) {
  table.fill tr.tot .tv { padding-right:24px; }
  table.ship tr.tot .tv { padding-right:26px; }
}
@media (hover:hover) and (pointer:fine) and (max-width:640px) {
  table.fill tr.tot .tv, table.ship tr.tot .tv { padding-right:20px; }
}

/* 還沒出貨完成的提醒（中央出貨、中央庫存、總覽） */
.notice.pend { background:rgba(217,130,43,.12); border-color:var(--less, #d9822b); }
.pendlist { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.pbtn { white-space:nowrap; }

/* 中央庫存：格子縮小（數字最多到百桶就夠，之後要放大再說）：輸入格上下變矮、寬度變窄，一個畫面看得到更多品項 */
.stkrow input[type=number] { padding:5px 8px; font-size:.95rem; min-width:4.6em; max-width:5.6em; }
.stkrow .cin input[type=number] { flex:0 1 5.6em; width:5.6em; }
.stkrow .ck { width:26px; height:26px; font-size:.9rem; border-width:2px; }
.stkrow { padding:6px 0; gap:4px 10px; }
.stkrow .c-name { font-size:.98rem; }
@media (min-width:901px) { .stkrow { padding-bottom:18px; } .stkrow:has(+ .stkwhy:not([hidden])) { padding-bottom:20px; } }
/* 手機：每個品項只佔兩列。第一列＝名稱＋推算；第二列＝昨日、出貨（小字）、生產、盤點（輸入格＋✓） */
@media (max-width:900px) {
  .stkrow { grid-template-columns:2.6rem 2.6rem minmax(0,1fr) minmax(0,1.5fr); gap:2px 8px; padding:8px 0; align-items:end; }
  .stkrow .c-name { grid-area:1 / 1 / 2 / 4; align-self:center; }
  .stkrow .c-e { grid-area:1 / 4; align-self:center; }
  .stkrow .c-y { grid-area:2 / 1; } .stkrow .c-s { grid-area:2 / 2; } .stkrow .c-p { grid-area:2 / 3; } .stkrow .c-c { grid-area:2 / 4; }
  .stkrow .c-y, .stkrow .c-s { font-size:.9rem; padding-bottom:6px; }
  .stkrow input[type=number] { max-width:none; min-width:0; width:100%; padding:5px 6px; font-size:.95rem; }
  .stkrow .cin { justify-content:flex-start; gap:4px; }
  .stkrow .cin input[type=number] { flex:1 1 0; min-width:0; width:auto; }
  .stkrow .ck { width:28px; height:28px; }
  /* 狀態字（已存／未儲存…）放在「盤點」標題同一行的右邊，不再多佔一列 */
  .stkrow .c-c { position:relative; }
  .stkrow .c-c .tk { position:absolute; right:0; top:0; margin:0; min-height:0; white-space:nowrap; font-size:.7rem; }
  .stkrow .cap { margin-bottom:1px; line-height:1.2; }
}
@media (max-width:600px) { .resetbtn { padding:3px 7px; font-size:.72rem; margin-right:4px; } .bar .who { margin-right:6px; font-size:.8rem; } }

/* 日期下拉選單（只列今天以前） */


/* 日期欄與往下展開的日曆 */
input.datebtn { width:11.5em; cursor:pointer; text-align:left; padding-right:38px; font-weight:600;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23b5835a' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='2.5' y='4' width='15' height='13' rx='2.5'/%3E%3Cpath d='M2.5 8.5h15M6.5 2.5v3M13.5 2.5v3'/%3E%3C/svg%3E") no-repeat right 10px center; }
input.datebtn.open { border-color:var(--accent); box-shadow:0 0 0 2px rgba(181,131,90,.25); }
.dpop { position:absolute; z-index:60; background:var(--card); color:var(--text); border:1px solid rgba(128,128,128,.35); border-radius:14px; padding:10px 10px 8px; box-shadow:0 10px 30px rgba(0,0,0,.22);
  opacity:0; transform:translateY(-8px) scaleY(.92); transform-origin:top; transition:opacity .15s ease, transform .15s ease; }
.dpop.show { opacity:1; transform:none; }
.dpop .dhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.dpop .dhead b { font-size:1rem; }
.dpop .dhead button { width:36px; height:36px; padding:0; font-size:1.3rem; line-height:1; border-radius:50%; background:transparent; color:var(--text); border:0; }
.dpop .dhead button:disabled { opacity:.25; }
.dpop .dwk, .dpop .dgrid { display:grid; grid-template-columns:repeat(7, 1fr); text-align:center; }
.dpop .dwk span { font-size:.78rem; color:var(--muted); padding:2px 0 4px; }
.dpop .dgrid { gap:2px 0; }
.dpop .dd { width:38px; height:38px; margin:0 auto; padding:0; border-radius:50%; background:transparent; color:var(--text); border:0; font-size:.95rem; }
.dpop .dd.tod { box-shadow:inset 0 0 0 1.5px var(--accent); }
.dpop .dd.sel { background:var(--accent); color:#fff; font-weight:700; }
.dpop .dd:disabled { color:var(--muted); opacity:.35; cursor:not-allowed; text-decoration:none; }
.dpop .dfoot { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:6px; border-top:1px solid rgba(128,128,128,.2); }
.dpop .dfoot button { background:transparent; border:0; color:var(--accent); font-size:.9rem; padding:6px 8px; }
.dpop .dfoot button { border-radius:10px; }
.dpop .dfoot .dcancel { color:var(--muted); }
.dpop .dfoot .dok { background:var(--accent); color:#fff; padding:7px 16px; margin-left:4px; font-weight:600; }

/* 手機：中央出貨的表格一定要放得進螢幕（不能讓「實出」格被切掉）：品項名稱允許換行（紅色「改」掉到下一行）、補貨／剩量欄不顯示單位字（單位看右邊的實出格） */
@media (max-width:640px) {
  table.ship td:first-child:not(.rcol) { white-space:normal; }
  table.ship td.num > .unit { display:none; }
  table.ship td:first-child .chg { margin-left:2px; }
}

/* 中央出貨的合計列：只有「實出」那欄上面是輸入格，才需要跟輸入格同寬對齊；補貨、剩量兩欄是純文字，合計照一般文字靠右就好（不然會把這兩欄撐寬） */
table.ship tr.tot td.num:not(.tot-act) .tv { width:auto; padding-right:0; }
@media (hover:hover) and (pointer:fine) { table.ship tr.tot td.num:not(.tot-act) .tv { padding-right:0; } }
@media (max-width:640px) {
  table.ship tr:not(.rr) > td:first-child:not(.rcol) { white-space:normal; }
  table.ship tr.tot td.num:not(.tot-act) .unit { display:none; }
}
@media (max-width:640px) {
  /* 原因欄在手機上只留剛好放得下標籤的寬度，把空間讓給品項名稱 */
  table.ship th.rcol, table.ship td.rcol { width:1%; }
  table.ship td.rcol .rsum { max-width:5.2em; }
}
/* 很窄的手機（約 360 以下）：四個店家分頁縮小一點，一次放得下 */
@media (max-width:380px) { .storetabs { gap:5px; } .stab { flex:1 1 0; min-width:0; padding:8px 4px; } }

/* 登入頁：公用手機勾選 */
.pubchk { display:flex; align-items:center; gap:8px; margin:2px 0 10px; font-size:.85rem; color:var(--muted); text-align:left; cursor:pointer; }
.pubchk input { width:18px; height:18px; flex:none; margin:0; }
@media (max-width:640px) {
  /* 原因標籤要完整顯示「庫存不足／庫存過多」（不能被截成「庫存…」）；自己打的備註太長才用省略號 */
  table.ship td.rcol .rsum { max-width:9em; }
}

/* 很窄的手機：標題列不換行，名字太長用省略號（登出不會被擠成直的） */
.bar strong, .bar a { white-space:nowrap; }
@media (max-width:380px) {
  .bar { padding:10px 10px; gap:4px; }
  .bar .who { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; margin-right:4px; }
  .resetbtn { font-size:.68rem; padding:3px 6px; margin-right:2px; }
}

/* 數字格小工具列（點數字格才出現）：−1 ＋1 ＋5 ＋10 平均 清除 ▸ */
#qtool { position:absolute; z-index:75; display:flex; flex-wrap:wrap; gap:5px; padding:6px; max-width:calc(100vw - 16px); background:var(--card); color:var(--text);
  border:1px solid rgba(128,128,128,.35); border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.22); }
#qtool[hidden] { display:none; }
#qtool button { flex:1 1 auto; min-width:38px; min-height:38px; padding:0 9px; border:0; border-radius:10px; background:rgba(181,131,90,.13); color:var(--text); font-size:.95rem; line-height:1; white-space:nowrap; }
#qtool button:active { background:var(--accent); color:#fff; }
#qtool button[data-q="1"], #qtool button[data-q="5"], #qtool button[data-q="10"], #qtool button[data-q="avg"] { color:var(--accent); font-weight:700; }
#qtool button[data-q="-1"] { font-weight:700; }
#qtool button[data-q="clr"] { color:var(--muted); font-size:.85rem; }
#qtool button[data-q="next"] { background:var(--accent); color:#fff; font-weight:700; }
@media (max-width:380px) { #qtool { gap:4px; padding:5px; } #qtool button { min-width:34px; padding:0 7px; font-size:.9rem; } }

/* 「改」的說明：每一段不拆開換行 */
.nw { white-space:nowrap; }
/* 最後兩列的說明框往上展開（往下會超出表格底部，表格就多出捲軸） */
table.ship tbody tr:nth-last-child(-n+2) .chgnote.open { top:auto; bottom:100%; }

/* 數字格小工具列改版：整條貼在畫面最下面（鍵盤正上方），單排，不再蓋住上一格 */
#qtool { position:fixed; flex-wrap:nowrap; gap:6px; padding:6px 8px; max-width:none; border-radius:14px 14px 0 0; border-width:1px 0 0; box-shadow:0 -4px 16px rgba(0,0,0,.18); box-sizing:border-box; overflow-x:auto; }
#qtool button { flex:1 0 auto; min-height:42px; }

/* 中央庫存：沒盤的空格，淺灰色顯示推算數字 */
.stkrow [data-f=count]::placeholder { color:var(--muted); opacity:.65; }
#qtool { top:auto; bottom:0; }
#qtool { left:0; width:100%; }

/* 員工：移除按鈕、已移除的人員 */
button.ghost.dangerbtn, .dangerbtn { color:#c0392b; border-color:rgba(192,57,43,.55); }
details.removed { margin-top:14px; padding-top:10px; border-top:1px dashed rgba(128,128,128,.4); }
details.removed > summary { cursor:pointer; font-weight:700; color:var(--muted); }
.rmrow { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(128,128,128,.15); }
.rmrow small { color:var(--muted); }

/* 登入頁：兩個選項（分段開關）：被選中的是實心咖啡色＋白字＋✓，沒選的是淡色底、灰字，一眼分得出來 */
.logintabs { display:flex; gap:4px; margin:4px 0 16px; padding:4px; background:rgba(128,128,128,.14); border-radius:14px; }
.logintabs a { flex:1; text-align:center; padding:12px 6px; border-radius:11px; color:var(--muted); font-weight:600; text-decoration:none; font-size:1rem; }
.logintabs a.on { background:var(--accent); color:#fff; font-weight:800; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.logintabs a.on::before { content:"✓ "; }
.login .lead { margin:0 0 10px; line-height:1.6; text-align:left; }
@media (max-width:600px) { .login { margin-top:5vh; } }

/* 邀請連結視窗、密碼欄的「顯示」 */
.invcode { font-size:1.05rem; text-align:center; padding:10px; background:rgba(181,131,90,.12); border-radius:10px; }
.invcode b { letter-spacing:.2em; font-size:1.3rem; }
.modalbtns.inv { flex-wrap:wrap; justify-content:stretch; }
.modalbtns.inv button { flex:1 1 auto; }
.pwwrap { position:relative; }
.pwwrap > input { padding-right:68px !important; }
.pwwrap > .eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); margin:0; padding:6px 10px; font-size:.85rem; width:auto; border:0; border-radius:8px; background:rgba(128,128,128,.18); color:var(--text); }

/* 登入頁：滑鼠移過去、手指按下去都有回饋（顏色變化＋輕輕縮一下），讓人知道「有點到」 */
.logintabs a, .login button, .pwwrap > .eye { transition:background-color .15s, color .15s, transform .1s, filter .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent; }
.logintabs a:not(.on):hover { background:rgba(181,131,90,.22); color:var(--accent); }
.logintabs a:not(.on):active { background:rgba(181,131,90,.4); color:var(--accent); transform:scale(.97); }
.logintabs a.on:hover { filter:brightness(1.07); }
.logintabs a.on:active { transform:scale(.97); filter:brightness(.92); }
.login button[type=submit]:hover, .login .pk:hover { filter:brightness(1.08); box-shadow:0 3px 10px rgba(0,0,0,.18); }
.login button[type=submit]:active, .login .pk:active { transform:scale(.98); filter:brightness(.88); box-shadow:none; }
.pwwrap > .eye:hover { background:rgba(181,131,90,.3); color:var(--accent); }
.pwwrap > .eye:active { background:var(--accent); color:#fff; transform:translateY(-50%) scale(.94); }
.pwwrap > .eye.shown { background:var(--accent); color:#fff; font-weight:700; } /* 密碼正顯示著：按鈕實心，一眼看出現在是「顯示中」 */
.pwwrap > .eye.shown:hover { filter:brightness(1.08); }

/* 登入頁觸碰回饋・修正版：
   ① 按下去不再用「縮小」：元素縮小後手指／滑鼠會落到邊外，:hover 與 :active 一直開關，看起來就在閃。改用內陷陰影＋變深來表示按下去。
   ② 灰底配咖啡色的過渡很混濁：選項軌道、沒選的字、顯示鈕全部改成同一個暖色系（米色底＋咖啡字），變色才乾淨 */
.logintabs { background:rgba(181,131,90,.14); }
.logintabs a:not(.on) { color:var(--accent); font-weight:700; }
.logintabs a:not(.on):hover { background:rgba(181,131,90,.26); }
.logintabs a:not(.on):active { background:rgba(181,131,90,.42); box-shadow:inset 0 2px 5px rgba(0,0,0,.18); transform:none; }
.logintabs a.on:active { transform:none; filter:brightness(.9); box-shadow:inset 0 2px 6px rgba(0,0,0,.3); }
.login button[type=submit]:active, .login .pk:active { transform:none; filter:brightness(.86); box-shadow:inset 0 2px 6px rgba(0,0,0,.3); }
.pwwrap > .eye { background:rgba(181,131,90,.16); color:var(--accent); font-weight:700; }
.pwwrap > .eye:hover { background:rgba(181,131,90,.3); color:var(--accent); }
.pwwrap > .eye:active { background:var(--accent); color:#fff; transform:translateY(-50%); box-shadow:inset 0 2px 5px rgba(0,0,0,.25); }
.pwwrap > .eye.shown { background:var(--accent); color:#fff; }
@media (hover:none) { .logintabs a:not(.on):hover { background:transparent; } .login button[type=submit]:hover, .login .pk:hover { filter:none; box-shadow:none; } .pwwrap > .eye:hover { background:rgba(181,131,90,.16); } .pwwrap > .eye.shown:hover { background:var(--accent); filter:none; } } /* 手機沒有「滑過」：點完不會停在 hover 的樣子 */

/* 數字工具列貼在畫面最下面：瀏覽器把輸入格捲進畫面時，要留出工具列的高度（不然格子會被蓋住，我們就得自己再捲，造成跳動） */
html { scroll-padding-bottom: 72px; }

.extlink { display:block; margin:8px 0 12px; padding:12px; border-radius:12px; background:var(--accent); color:#fff; font-weight:700; text-align:center; text-decoration:none; }

/* 登入頁手機版：版面精簡。分頁列固定在最上面（不會被鍵盤或捲動蓋住）；密碼規則縮成兩欄小字 */
.tabsticky { position:sticky; top:0; z-index:5; background:var(--card); padding:2px 0 6px; margin:0 -2px; }
.tabsticky .logintabs { margin:2px 0 4px; }
.login .lead { margin:0 0 8px; font-size:.95rem; line-height:1.5; }
.login input[type=text], .login input[type=password] { margin-bottom:8px; }
.login .pwrules { display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; margin:0 0 6px; font-size:.78rem; }
.login .pubchk { margin:0 0 8px; font-size:.82rem; }
.login .muted { margin:6px 0; font-size:.88rem; }

/* 登入頁：姓名欄上方的固定高度區塊（我已有密碼＝指紋按鈕＋「或用密碼登入」；第一次使用＝一行說明）。
   兩個分頁共用同樣的高度，切換時姓名欄不會上下跳，對得整整齊齊 */
.topslot { min-height:96px; display:flex; flex-direction:column; justify-content:center; margin-bottom:6px; }
.topslot .lead { margin:0; text-align:center; }
.topslot #pk { margin:0; }
.topslot #pk .pk { margin:0 0 4px; }
.topslot #pk .muted { margin:0; }
.topslot #pk .error { margin:6px 0; }

/* 密碼規則：改回原本一行一條的完整說明（比較專業、一眼看得懂） */
.login .pwrules { display:block; margin:2px 0 8px; font-size:.85rem; }

/* ===== 切換分頁不再晃動 =====
   ① 電腦版每個分頁的白色卡片寬度以前各不相同（780／1000／全寬），切來切去卡片一下寬一下窄 → 全部統一成同一個寬度
   ② 有的分頁很短、沒有捲軸，有的很長、有捲軸；捲軸出現／消失會把整頁左右推開十幾 px（整頁抖一下）→ 一律預留捲軸的位置
   ③ 內容還在載入時先撐住一個最小高度，換頁時下面的東西不會先縮上去再彈下來 */
html { overflow-y: scroll; scrollbar-gutter: stable; }
@media (min-width:900px) {
  #view[data-tab] .panel { max-width:1000px; margin-left:auto; margin-right:auto; }
}
#view { min-height: 70vh; }

/* ===== 管理頁小分頁（員工／品項／單位／系統／紀錄）：分段開關。圖示＋名稱＋數量，選中的實心咖啡色浮起來；跟登入頁的分頁同一個風格 ===== */
.subtabs { display:flex; gap:4px; padding:4px; margin:0 0 14px; background:rgba(181,131,90,.14); border-radius:16px; overflow-x:auto; }
.subtabs button { flex:1 0 auto; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border:0; border-radius:12px; background:transparent; color:var(--accent); font-size:.95rem; font-weight:700; white-space:nowrap; -webkit-tap-highlight-color:transparent; transition:background-color .15s, color .15s, box-shadow .15s; }
.subtabs button .ic { font-size:1.05rem; line-height:1; }
.subtabs button .cnt { min-width:1.6em; padding:1px 7px; border-radius:10px; background:rgba(181,131,90,.22); font-size:.72rem; line-height:1.5; text-align:center; }
.subtabs button:not(.on):hover { background:rgba(181,131,90,.24); }
.subtabs button:not(.on):active { background:rgba(181,131,90,.4); box-shadow:inset 0 2px 5px rgba(0,0,0,.18); }
.subtabs button.on { background:var(--accent); color:#fff; border:0; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.subtabs button.on .cnt { background:rgba(255,255,255,.28); }
@media (min-width:900px) { #view[data-tab=admin] .subtabs { justify-content:stretch; } .subtabs button { flex:1 1 0; } }
@media (max-width:480px) { /* 手機：圖示在上、名稱在下，五個剛好排進一行不用橫向捲動；數量收起來省空間 */
  .subtabs { gap:2px; padding:3px; }
  .subtabs button { flex:1 1 0; min-width:0; flex-direction:column; gap:2px; padding:8px 2px; font-size:.78rem; }
  .subtabs button .cnt { display:none; }
}

/* ===== 管理頁小分頁・細調（像 iOS 的分段控制）=====
   底：很淡的暖灰；選中的：白色（深色模式是淺灰）浮起來，字深色、圖示用咖啡色點綴；沒選的：暖灰字。不再用整塊實心咖啡色，看起來比較輕、比較精緻 */
.subtabs { background:rgba(110,90,70,.10); padding:3px; gap:2px; border-radius:13px; }
.subtabs button { color:#8b7d6f; font-weight:600; border-radius:10px; padding:9px 12px; gap:6px; }
.subtabs button .ic { display:inline-flex; width:20px; height:20px; }
.subtabs button .ic svg { display:block; }
.subtabs button .cnt { background:transparent; color:#a09384; font-weight:600; font-size:.74rem; padding:0; min-width:0; }
.subtabs button:not(.on):hover { background:rgba(110,90,70,.10); color:#5f5347; }
.subtabs button:not(.on):active { background:rgba(110,90,70,.16); box-shadow:none; }
.subtabs button.on { background:#fff; color:#2b2520; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.08); }
.subtabs button.on .ic { color:var(--accent); }
.subtabs button.on .cnt { background:transparent; color:#8b7d6f; }
@media (prefers-color-scheme: dark) {
  .subtabs { background:rgba(255,255,255,.08); }
  .subtabs button { color:#a89c8e; }
  .subtabs button .cnt { color:#8f8479; }
  .subtabs button:not(.on):hover { background:rgba(255,255,255,.07); color:#d6cbbd; }
  .subtabs button:not(.on):active { background:rgba(255,255,255,.12); }
  .subtabs button.on { background:rgba(255,255,255,.16); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); }
  .subtabs button.on .cnt { color:#cfc4b6; }
}
@media (max-width:480px) { .subtabs button { padding:7px 2px; font-size:.74rem; } .subtabs button .ic { width:22px; height:22px; } .subtabs button .ic svg { width:21px; height:21px; } }

/* ===== 小分頁：白色膠囊會滑過去（像 iOS 的分段控制）=====
   選中的那顆不再自己畫底，改由 .pill 這個白色膠囊墊在後面，用 transform 滑到新的位置，有銜接感 */
.subtabs { position:relative; }
.subtabs .pill { position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.08); pointer-events:none; z-index:0;
  transition: transform .32s cubic-bezier(.3,.9,.3,1), width .32s cubic-bezier(.3,.9,.3,1); will-change: transform, width; }
.subtabs .pill.nomotion { transition:none; }
.subtabs button { position:relative; z-index:1; }
.subtabs button.on { background:transparent !important; box-shadow:none !important; }
.subtabs button { transition: color .25s ease, background-color .15s; }
.subtabs button .ic { transition: color .25s ease; }
@media (prefers-color-scheme: dark) { .subtabs .pill { background:rgba(255,255,255,.16); box-shadow:0 1px 2px rgba(0,0,0,.3); } }
@media (prefers-reduced-motion: reduce) { .subtabs .pill { transition:none; } }

/* 小分頁：按下去的那一瞬間不再出現「深灰色塊」。
   以前按住時按鈕會變深（:active 的底色），放開變成選中又立刻變透明、白色膠囊才慢慢滑過來 → 中間有幾格畫面是灰的，看起來像閃一下。
   現在滑過／按住只改字色，底色一律交給白色膠囊 */
.subtabs button { transition: color .25s ease; }
.subtabs button:not(.on):hover, .subtabs button:not(.on):active { background:transparent; box-shadow:none; }
.subtabs button:not(.on):hover { color:#5f5347; }
.subtabs button:not(.on):active { color:#2b2520; }
@media (prefers-color-scheme: dark) {
  .subtabs button:not(.on):hover { color:#d6cbbd; }
  .subtabs button:not(.on):active { color:#fff; }
}
/* 換到另一個小分頁時，下面的內容淡入一下（不是瞬間整塊換掉）：配合滑動的膠囊比較連貫 */
@keyframes subIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
#view .panel[data-sub]:not([hidden]) { animation: subIn .22s ease both; }
@media (prefers-reduced-motion: reduce) { #view .panel[data-sub]:not([hidden]) { animation:none; } }

/* 管理頁說明：一句重點＋收起來的條列說明 */
.helplead { margin:0 0 6px; color:var(--muted); font-size:.92rem; line-height:1.55; }
details.help { margin:0 0 14px; }
details.help > summary { display:inline-flex; align-items:center; gap:4px; cursor:pointer; list-style:none; color:var(--accent); font-size:.88rem; font-weight:600; padding:2px 0; }
details.help > summary::-webkit-details-marker { display:none; }
details.help > summary::before { content:"ⓘ"; font-size:.95rem; }
details.help[open] > summary::after { content:"（收起）"; color:var(--muted); font-weight:400; }
details.help ul { margin:8px 0 0; padding:10px 12px 10px 28px; background:rgba(181,131,90,.09); border-radius:10px; font-size:.88rem; line-height:1.6; color:var(--text); }
details.help li { margin:0 0 6px; }
details.help li:last-child { margin-bottom:0; }

/* 換頁載入中：按下去馬上有回饋（舊內容淡下去＋最上面一條細線跑動）。有 0.15 秒延遲，很快載完的不會閃 */
#view { transition: opacity .18s ease .15s; }
#view.loading { opacity:.5; }
#view.loading::before { content:""; position:fixed; z-index:300; top:0; left:0; height:3px; width:35%; background:var(--accent); border-radius:0 3px 3px 0;
  animation: lbar 1.1s ease-in-out .15s infinite backwards; }
@keyframes lbar { 0% { opacity:0; transform:translateX(-100%); } 10% { opacity:1; } 100% { opacity:1; transform:translateX(300%); } }
@media (prefers-reduced-motion: reduce) { #view.loading::before { animation:none; opacity:0; } }

/* 店家補貨單：固定欄寬（有沒有原因標籤、有沒有出貨，每一天欄位位置都一樣），原因標籤放在品項名稱下面 */
table.mine { table-layout:fixed; width:100%; }
table.mine.w4 th:nth-child(1) { width:38%; } table.mine.w4 th:nth-child(2) { width:21%; } table.mine.w4 th:nth-child(3) { width:19%; } table.mine.w4 th:nth-child(4) { width:22%; }
table.mine.w3 th:nth-child(1) { width:50%; } table.mine.w3 th:nth-child(2), table.mine.w3 th:nth-child(3) { width:25%; }
table.mine td:first-child { overflow-wrap:anywhere; line-height:1.35; }
table.mine th.num, table.mine td.num { padding-left:2px; padding-right:6px; }
table.mine .mtag { display:block; width:fit-content; max-width:100%; margin-top:3px; padding:0 8px; font-size:.76rem; font-weight:400; line-height:1.5; border:1px solid currentColor; border-radius:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.mine tr.more .mtag { color:var(--more); background:rgba(47,127,193,.1); }
table.mine tr.less .mtag { color:var(--less); background:rgba(217,130,43,.12); }

/* 載入中的骨架 */
.skel h2 { margin-bottom:14px; }
.sk { height:16px; margin:12px 0; border-radius:8px; background:linear-gradient(90deg, rgba(128,128,128,.14) 25%, rgba(128,128,128,.26) 50%, rgba(128,128,128,.14) 75%); background-size:300% 100%; animation: skshine 1.3s ease-in-out infinite; }
.skbar { height:46px; margin:0 0 14px; border-radius:13px; }
@keyframes skshine { from { background-position:100% 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation:none; } }
/* 骨架出現時舊內容已經被換掉，不用再淡下去；只留最上面那條細線 */
#view.loading { opacity:1; }

/* 店家補貨單（改版）：原因標籤放在右邊、跟實出數字同一行，欄寬固定，所以每一天每一列的高度和位置都一樣（以前放在名稱下面會讓有標籤的列變高，切換日期就跳）*/
table.mine.w4 th:nth-child(1) { width:29%; } table.mine.w4 th:nth-child(2) { width:17%; } table.mine.w4 th:nth-child(3) { width:17%; } table.mine.w4 th:nth-child(4) { width:37%; }
table.mine td:first-child { overflow-wrap:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.97rem; }
table.mine td.num { white-space:nowrap; }
table.mine td.num .mtag { display:inline-block; vertical-align:middle; width:auto; max-width:5.6em; margin:0 6px 0 0; padding:0 7px; font-size:.72rem; line-height:1.55; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:360px) { table.mine td.num .mtag { max-width:4.4em; padding:0 5px; margin-right:4px; font-size:.68rem; } table.mine td:first-child { font-size:.92rem; } }

.perfout { margin:0 0 10px; padding:10px 12px; background:rgba(128,128,128,.12); border-radius:10px; font-size:.78rem; line-height:1.5; white-space:pre-wrap; word-break:break-all; overflow-x:auto; }
/* 店家補貨單：實出欄再寬一點，原因標籤放得下完整的「庫存過多／庫存不足」 */
table.mine.w4 th:nth-child(1) { width:28%; } table.mine.w4 th:nth-child(2), table.mine.w4 th:nth-child(3) { width:15%; } table.mine.w4 th:nth-child(4) { width:42%; }
table.mine td.num .mtag { max-width:6.4em; }
table.mine th.num, table.mine td.num { padding-right:4px; }
table.mine.w4 th:nth-child(2), table.mine.w4 th:nth-child(3) { width:17%; } table.mine.w4 th:nth-child(4) { width:38%; }
table.mine tr.tot td.num { padding-left:0; padding-right:2px; font-size:.95rem; }
/* 店家補貨單・最後微調：品項名稱優先放得下完整名稱（最長 7 個字，例如「甜豆漿－高桶」），窄螢幕再縮小字級；合計列在窄螢幕縮小一點 */
table.mine.w4 th:nth-child(1) { width:32%; } table.mine.w4 th:nth-child(2), table.mine.w4 th:nth-child(3) { width:15%; } table.mine.w4 th:nth-child(4) { width:38%; }
table.mine td:first-child { font-size:.92rem; padding-left:8px; padding-right:2px; }
@media (max-width:380px) { table.mine td:first-child { font-size:.84rem; } table.mine tr.tot td.num { font-size:.82rem; } table.mine td.num .unit { font-size:.78em; } table.mine th { font-size:.78rem; } }
@media (max-width:340px) { table.mine td:first-child { font-size:.76rem; } table.mine tr.tot td { font-size:.78rem; } }
@media (max-width:340px) { table.mine th { font-size:.7rem; letter-spacing:-.03em; padding-left:0; padding-right:2px; } table.mine td.num .mtag { max-width:3.6em; } }
/* 登入頁密碼欄的「顯示」鈕：以前輸入框自己帶 8px 下邊距，把外框撐高，按鈕就比文字低 4px（版型跑掉）。邊距改放在外框，按鈕才會跟輸入框正中間對齊 */
.login .pwwrap { margin-bottom:8px; }
.login .pwwrap > input[type=password], .login .pwwrap > input[type=text] { margin-bottom:0; }

/* 存檔後那一列淡淡亮一下，讓人知道是哪一列 */
.rowgrid.justsaved { animation: justsaved 1.6s ease-out; position:relative; z-index:1; }
@keyframes justsaved { from { background:rgba(224,160,110,.28); } to { background:transparent; } }
@media (prefers-reduced-motion: reduce) { .rowgrid.justsaved { animation:none; } }

/* 存檔後重畫不要淡入（會整個區塊閃一下），切換小分頁才有淡入 */
#view.quiet .panel[data-sub]:not([hidden]) { animation:none; }

/* 移動中的人員列：實心卡片疊在上面，不透明、不和別列的字重疊 */
.rowgrid.flying { position:relative; z-index:20; background:var(--card); border-radius:12px; border-bottom-color:transparent; will-change:transform; } /* 浮起、陰影、位移都由 app.js 的動畫（glideRows）控制 */
/* 上面這塊卡片剛好就是那一列自己的範圍（兩條淺灰線之間），不把線一起帶走；移動時微微浮起（scale），到位後落下 */

/* 多選一視窗、紀錄清單 */
.modalbtns.choice { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.usagelist { margin:6px 0 10px; padding-left:1.2em; line-height:1.7; }

.modal .pkqr { width:100%; margin-top:8px; }

/* ===== 生產庫存表：品項往下、日期在上 ===== */
#view[data-tab=ledger] .panel { max-width:1100px; margin-left:auto; margin-right:auto; }
.ledbar { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin:10px 0 8px; }
.ledseg { display:inline-flex; padding:3px; gap:2px; background:rgba(128,128,128,.16); border-radius:11px; }
.ledseg button { border:0; background:transparent; color:var(--muted); padding:7px 20px; border-radius:9px; font-size:1rem; box-shadow:none; }
.ledseg.small button { padding:6px 14px; font-size:.92rem; }
.ledseg button.on { background:var(--card); color:var(--text); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.16); }
.ledmonth { display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; margin:0 0 10px; }
.ledmonth button { padding:5px 16px; font-size:1.15rem; line-height:1; }
.ledmonth span { min-width:9em; text-align:center; }
.ledwrap { overflow-x:auto; border:1px solid rgba(128,128,128,.22); border-radius:12px; -webkit-overflow-scrolling:touch; }
table.ledger { border-collapse:separate; border-spacing:0; width:100%; font-variant-numeric:tabular-nums; table-layout:auto; }
table.ledger th, table.ledger td { padding:7px 2px; border-bottom:1px solid rgba(128,128,128,.16); border-right:1px solid rgba(128,128,128,.10); text-align:center; white-space:nowrap; background:var(--card); }
table.ledger thead th { font-size:.8rem; line-height:1.2; border-bottom:2px solid rgba(128,128,128,.3); vertical-align:bottom; }
table.ledger thead th b, table.ledger thead th small { display:block; font-weight:700; }
table.ledger thead th small { font-weight:400; color:var(--muted); font-size:.72rem; }
table.ledger .icol { position:sticky; left:0; z-index:2; text-align:left; padding-left:8px; padding-right:6px; min-width:4.4em; font-size:.88rem; font-weight:600; box-shadow:1px 0 0 rgba(128,128,128,.2); }
table.ledger .icol b, table.ledger .icol small { display:block; font-weight:600; line-height:1.2; }
table.ledger .icol small { font-weight:400; color:var(--muted); font-size:.74rem; }
table.ledger td.num, table.ledger th.dc { min-width:2.2em; font-size:.98rem; }
table.ledger td.sumc, table.ledger th.sumc { border-left:2px solid rgba(128,128,128,.3); font-weight:700; min-width:2.6em; }
table.ledger tr.byrow td, table.ledger tr.byrow th { font-size:.64rem; color:var(--muted); padding:4px 1px; font-weight:400; overflow:hidden; }
table.ledger tbody tr:last-child th, table.ledger tbody tr:last-child td { border-bottom:0; }
table.ledger .wkend { background:color-mix(in srgb, var(--card) 94%, #888); }
table.ledger .today { background:color-mix(in srgb, var(--card) 86%, var(--accent)); }
table.ledger .future { opacity:.45; }
table.ledger td.cnt { font-weight:800; }
table.ledger td.est { color:var(--muted); }
table.ledger td.neg { color:var(--error); }
table.ledger td.ledmore { background:rgba(47,127,193,.2); cursor:pointer; } table.ledger td.ledless { background:rgba(217,130,43,.22); cursor:pointer; }
span.ledmore { color:var(--more); font-weight:700; } span.ledless { color:var(--less); font-weight:700; }
@media (max-width:600px) { .ledseg button { padding:7px 16px; } table.ledger td.num, table.ledger th.dc { min-width:2em; font-size:.92rem; } table.ledger .icol { min-width:4.2em; font-size:.84rem; } }

/* 表格高度、欄寬不隨資料多寡變動（切換日期時不會上下、左右跳）*/
table.ledger tbody th, table.ledger tbody td { height:46px; line-height:1.2; }
table.ledger tbody tr.byrow th, table.ledger tbody tr.byrow td { height:24px; }
table.ledger thead th { height:46px; }
table.ledger.wk { table-layout:fixed; width:100%; }
table.ledger.wk col.ci { width:6.4em; } table.ledger.wk col.cs { width:3.2em; }
table.ledger.mo { width:max-content; min-width:100%; }
table.ledger.mo td.num, table.ledger.mo th.dc { min-width:2.6em; }
.ledhint { min-height:1.6em; margin:8px 2px 0; }
@media (max-width:600px) { table.ledger.wk col.ci { width:4.2em; } table.ledger.wk col.cs { width:2.6em; } table.ledger tbody th, table.ledger tbody td { height:44px; } }
@media (max-width:600px) { table.ledger.wk td.num, table.ledger.wk th.dc { font-size:.88rem; padding-left:0; padding-right:0; } table.ledger.wk th.dc small { font-size:.68rem; } }

/* ===== 主分頁列：選中的色塊會滑到新位置（像 iOS）===== */
#tabs { position:relative; }
#tabs .pill { position:absolute; top:0; bottom:0; left:0; width:0; border-radius:20px; background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.16); pointer-events:none; z-index:0; transform-origin:left center; will-change:transform; }
#tabs button { position:relative; z-index:1; transition: color .25s ease; }
#tabs button.on { background:transparent; color:#fff; }
#tabs button:not(.on):hover { color:var(--text); }


/* 生產庫存表的切換（生產／庫存、7 天／整月）：色塊也會滑 */
.ledseg { position:relative; }
.ledseg .pill { position:absolute; top:3px; bottom:3px; left:0; width:0; border-radius:9px; background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.16); pointer-events:none; z-index:0; transform-origin:left center; will-change:transform; }
.ledseg button { position:relative; z-index:1; transition:color .25s ease; }
.ledseg button.on { background:transparent; box-shadow:none; }
/* 手機點下去的藍色／灰色方框＝瀏覽器預設的「點擊反白」，全部關掉（按下的回饋由我們自己的色塊和字色負責） */
button, [role=tab], a, label, select, summary { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible) { outline:none; }

/* 換分頁時舊頁的「殘影」：疊在上面、不能點，新頁畫好才拿掉（見 app.js 的 show） */
.viewghost { pointer-events:none; }

/* 補貨備註：店家填、出貨人員看 */
.notebox { display:block; margin:12px 0 4px; }
.notebox .hint { display:block; font-weight:400; margin:2px 0 6px; }
.notebox textarea { width:100%; box-sizing:border-box; resize:vertical; min-height:64px; }
.notice.repnote { background:rgba(217,130,43,.14); border-left:4px solid var(--less, #d9822b); font-weight:600; overflow-wrap:anywhere; }
.notebox textarea { font:inherit; font-size:1rem; line-height:1.5; padding:10px 12px; border:1px solid var(--muted); border-radius:10px; background:transparent; color:var(--text); }
.notebox textarea::placeholder { color:var(--muted); opacity:.7; }
.notebox textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,162,118,.22); }
.notebox textarea:disabled { opacity:.6; }
/* 中央出貨每家店固定一條備註位置（兩行高，太長在裡面捲動）：切換店家時版面不會跑掉 */
.noteslot { box-sizing:border-box; height:3.4em; overflow-y:auto; margin:0 0 10px; padding:6px 10px; border-radius:10px; font-size:.88rem; line-height:1.4; overflow-wrap:anywhere; border:1px dashed rgba(128,128,128,.35); color:var(--muted); }
.noteslot.has { background:rgba(217,130,43,.14); border:1px solid transparent; border-left:4px solid var(--less, #d9822b); color:var(--text); font-weight:600; }
.noact { visibility:hidden; pointer-events:none; }
.rhint { margin:8px 0 0; line-height:1.5; }

/* 中央出貨：欄位寬度固定，每家店（有沒有回報、數字長短不同）切換時欄位都在同一個位置 */
table.ship { table-layout:fixed; width:100%; }
table.ship th:nth-child(2), table.ship td:nth-child(2), table.ship th:nth-child(3), table.ship td:nth-child(3) { width:3.4em; }
table.ship th.rcol, table.ship td.rcol { width:5.2em; }
table.ship th:nth-child(5), table.ship td:nth-child(5) { width:6.6em; }

/* 生產計畫（填表）*/
.planpanel h3 { font-size:1rem; margin:18px 0 8px; }
.planpanel .plitem { display:grid; grid-template-columns:5.5em 5.4em 1fr auto; gap:6px; align-items:center; margin-bottom:6px; }
.planpanel .plitem input[type=text] { width:100%; min-width:0; }
.planpanel .plqty { width:4.4em; text-align:right; }
.planpanel .plreuse { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:6px; }
.planpanel .plreuse .plfor { width:8.5em; }
.planpanel .plreuse label { flex-direction:row; align-items:center; gap:6px; font-size:.9rem; }
.planpanel .plreuse input[type=number] { width:4.2em; text-align:right; }
.planpanel .plrow { display:grid; grid-template-columns:4.6em 1fr auto; gap:6px; align-items:start; margin-bottom:6px; }
.planpanel .pltime { width:100%; min-width:0; text-align:center; }
.planpanel .pltext, .planpanel #plnote, .plpaste textarea { width:100%; box-sizing:border-box; font:inherit; font-size:.95rem; line-height:1.45; padding:8px 10px; border:1px solid var(--muted); border-radius:10px; background:transparent; color:var(--text); resize:vertical; }
.planpanel .pldel { padding:4px 9px; }
.plpaste { margin:6px 0 12px; }
.plpaste summary { cursor:pointer; color:var(--accent); font-weight:600; margin-bottom:8px; }
.tvbox { margin-top:22px; padding:12px; border:1px dashed rgba(128,128,128,.45); border-radius:12px; }
.tvbox input { width:100%; box-sizing:border-box; font-size:.8rem; }

.planpanel .plitem { grid-template-columns:1fr auto 2.4em; }
.planpanel .plitem .plnote { grid-column:1 / -1; grid-row:2; }
.planpanel .plitem .nu { display:inline-flex; align-items:center; gap:4px; }
.planpanel .pldel { width:2.4em; height:2.4em; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.planpanel .plitem { padding-bottom:8px; border-bottom:1px solid rgba(128,128,128,.2); margin-bottom:8px; }
.planpanel .plrow { grid-template-columns:4.4em 1fr 2.4em; }
.planpanel .plreuse { display:grid; grid-template-columns:minmax(0,1fr) auto auto 2.4em; gap:6px; align-items:center; }
.planpanel .plreuse .plfor { width:100%; min-width:0; }
.planpanel .plreuse input[type=number] { width:3.6em; padding-left:6px; padding-right:6px; }
.planpanel .plreuse label { gap:3px; font-size:.82rem; white-space:nowrap; }

/* 補貨回報：調班支援時選哪一家店（按鈕大、間隔寬，不容易按錯）*/
.storepick { margin:10px 0 14px; }
.storepick .spbtns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.storepick .spbtns button { padding:14px 8px; font-size:1.05rem; font-weight:700; border-radius:14px; background:transparent; color:var(--text); border:2px solid rgba(128,128,128,.4); display:flex; flex-direction:column; align-items:center; gap:2px; }
.storepick .spbtns button small { font-size:.7rem; font-weight:500; color:var(--muted); }
.storepick .spbtns button.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.storepick .spbtns button.on small { color:rgba(255,255,255,.85); }

/* 生產計畫：系統建議 */
.sugbox { margin:14px 0 6px; padding:12px; border:1px solid rgba(181,131,90,.45); border-radius:14px; background:rgba(181,131,90,.07); }
.sugbox h3 { margin-top:2px; }
.sugctl { display:flex; flex-wrap:wrap; gap:8px 12px; margin:8px 0 10px; }
.sugtbl { width:100%; border-collapse:collapse; font-size:.95rem; }
.sugtbl th, .sugtbl td { padding:7px 4px; text-align:left; }
.sugtbl th.num, .sugtbl td.num { text-align:right; }
.sugtbl tbody tr + tr td { border-top:1px solid rgba(128,128,128,.2); }
.sugtbl td b { font-size:1.1rem; color:var(--accent); }
.sugedit { margin-top:10px; }
.sugedit summary { cursor:pointer; color:var(--accent); font-weight:600; }
.sugtbl.tgt { font-size:.82rem; margin-top:6px; }
.sugtbl.tgt th { text-align:center; white-space:nowrap; }
.sugtbl.tgt td input { width:3.2em; padding:5px 3px; font-size:.88rem; text-align:right; }
.bagy { width:3.6em; padding:5px 4px; text-align:right; }
.sugedit .scrollx { overflow-x:auto; }
.sughow { display:block; font-size:.7rem; font-weight:400; color:var(--muted); line-height:1.3; margin-top:1px; white-space:nowrap; }
.batchrow { display:flex; flex-wrap:wrap; gap:8px 14px; margin:6px 0; }
.batchrow label { display:flex; flex-direction:column; gap:3px; font-size:.82rem; color:var(--muted); }
.batchrow .batchin { width:8.5em; padding:6px 8px; font-size:.9rem; }
.sugtbl:not(.tgt) td:first-child, .sugtbl:not(.tgt) th:first-child { white-space:nowrap; }
.sugtbl:not(.tgt) td.num { white-space:nowrap; }
.sugtbl:not(.tgt) button.small { padding:5px 9px; font-size:.82rem; white-space:nowrap; }
.btnlink { display:inline-block; padding:5px 10px; border:1px solid var(--accent); border-radius:10px; color:var(--accent); text-decoration:none; font-size:.82rem; }

/* 生產計畫：自動判斷說明、怎麼算的、日曆設定 */
.sugdt, .sugwx { margin:6px 0; line-height:1.55; }
.sugdt b { color:var(--accent); }
.whylist { margin:6px 0 8px; padding-left:1.1em; font-size:.88rem; line-height:1.55; }
.whylist li + li { margin-top:6px; }
.calset { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.calrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:.92rem; }
.calrow select { padding:6px 8px; }
.calmarks { display:flex; flex-direction:column; gap:4px; }
.calmark { display:grid; grid-template-columns:5.2em auto 1fr auto; gap:8px; align-items:center; padding:4px 0; border-bottom:1px solid rgba(128,128,128,.18); font-size:.9rem; }
.calk { padding:1px 9px; border-radius:99px; font-size:.78rem; font-weight:700; }
.calk.holiday { background:rgba(217,130,43,.2); color:var(--less, #d9822b); }
.calk.workday { background:rgba(47,127,193,.2); color:var(--more, #2f7fc1); }
.calnote { color:var(--muted); overflow-wrap:anywhere; }
.calnew { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.calnew input[type=date], .calnew input[type=text], .calnew select { padding:6px 8px; font-size:.9rem; }
.calnew input[type=text] { flex:1 1 9em; min-width:0; }

/* 管理頁：品項的「生產計畫歸類」（整列最下面一行）、單位的補貨日 */
.items-grid .planprod { grid-column:1 / -1; flex-direction:row; align-items:center; gap:8px; }
.items-grid .planprod .cap { display:none; }
.items-grid .planprod .ppl { font-size:.8rem; color:var(--muted); white-space:nowrap; }
.items-grid .planprod select { padding:6px 8px; font-size:.9rem; }
@media (max-width:900px) { .items-grid > :nth-child(7) { grid-area:4 / 1 / 5 / 5; } }
.restockbox { margin:6px 0; }
.restockbox > div { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; }

/* 人員資料視窗 */
.profbox { max-width:34em; width:calc(100vw - 24px); max-height:88vh; overflow-y:auto; }
.profbox .empno { color:var(--muted); font-weight:500; font-size:.8rem; }
.profgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(9.5em, 1fr)); gap:8px 10px; margin:8px 0; }
.profgrid label { display:flex; flex-direction:column; gap:3px; font-size:.82rem; color:var(--muted); }
.profgrid input, .profgrid select { padding:7px 8px; font-size:.95rem; width:100%; box-sizing:border-box; }
.profsec { margin-top:12px; padding-top:10px; border-top:1px solid rgba(128,128,128,.25); }

/* 人員資料頁 */
.hrgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(15.5em, 1fr)); gap:10px; margin:8px 0; }
.hrcard { padding:12px; border:1px solid rgba(128,128,128,.28); border-radius:14px; display:flex; flex-direction:column; gap:4px; background:rgba(128,128,128,.05); }
.hrcard.off, .hrcard.gone { opacity:.65; }
.hrtop { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.hrtop b { font-size:1.05rem; }
.hrtop .empno { margin-left:auto; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.hrsub { font-size:.86rem; line-height:1.4; }
.hrcard button { align-self:flex-start; margin-top:6px; }
.hrpanel input[type=search] { width:100%; box-sizing:border-box; padding:9px 10px; font-size:1rem; }
.cyc { display:flex; flex-direction:column; gap:6px; }
.cycweek { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:6px 0; border-bottom:1px solid rgba(128,128,128,.18); }
.cycn { font-weight:700; min-width:3.6em; }
.calauto { color:var(--muted); font-size:.7rem; border:1px solid rgba(128,128,128,.4); border-radius:99px; padding:0 6px; margin-left:4px; }

/* 開機月曆：一個月一張，綠色＝開機日，點一下切換加開／這天不開 */
.monthcal { margin:6px 0 10px; }
.mhead { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.mgrid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.mw { text-align:center; font-size:.75rem; color:var(--muted); padding:2px 0; }
.mc { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:2.9em; padding:3px 0; border-radius:10px; border:1px solid rgba(128,128,128,.22); background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.mc.empty { border:0; background:transparent; cursor:default; }
.mc b { font-size:.95rem; font-weight:600; line-height:1.1; }
.mc small { font-size:.62rem; line-height:1; min-height:.62rem; color:var(--muted); }
.mc.hol b { color:#d4533d; }
.mc.on { background:rgba(80,160,110,.22); border-color:rgba(80,160,110,.7); }
.mc.on small { color:#3f8a5b; font-weight:700; }
.mc.add { background:rgba(80,160,110,.38); border:2px solid #3f8a5b; }
.mc.add small { color:#2f7a4b; font-weight:800; }
.mc.skip { background:repeating-linear-gradient(135deg, rgba(128,128,128,.12) 0 6px, transparent 6px 12px); border:2px dashed rgba(217,130,43,.8); }
.mc.skip b { text-decoration:line-through; }
.mc.skip small { color:var(--less, #d9822b); font-weight:800; }
.mc.today { outline:2px solid var(--accent); outline-offset:1px; }
.mc.past { opacity:.45; cursor:default; }
.mc:disabled { cursor:default; }
@media (prefers-color-scheme: dark) { .mc.on small, .mc.add small { color:#7ec08a; } }
.feedbox { margin-top:12px; padding:10px 12px; border:1px dashed rgba(128,128,128,.45); border-radius:12px; }
.feedbox input { width:100%; box-sizing:border-box; font-size:.78rem; margin-top:4px; }
.feedbox .help ul { padding-left:1.1em; font-size:.86rem; line-height:1.55; }


.brand { display:inline-flex; align-items:center; gap:8px; }
.brand img { object-fit:contain; }
.loginlogo { display:block; margin:4px auto 14px; max-width:70%; height:auto; }

@media (max-width:600px) { .bar { flex-wrap:wrap; row-gap:6px; padding:10px 12px; } .bar .brand { margin-right:auto; } }
@media (max-width:400px) { .sugtbl:not(.tgt) { font-size:.84rem; } .sugtbl:not(.tgt) th, .sugtbl:not(.tgt) td { padding:6px 2px; } .sugtbl:not(.tgt) td b { font-size:1rem; } .sugtbl:not(.tgt) button.small { padding:4px 6px; font-size:.76rem; } }

/* 最高管理員上面那條固定的列：高度固定，載入前先佔位，換身分／測試時版面不會跳。灰＝我自己（正式）、紫＝測試、橘＝正式看別人 */
.pvbar { position:sticky; top:0; z-index:200; display:flex; align-items:center; gap:8px; padding:6px 12px; min-height:46px; box-sizing:border-box; background:#4a5560; color:#fff; font-size:.9rem; }
.pvbar.test { background:#6b4fbb; }
.pvbar.view { background:#d9822b; }
.pvbar select { flex:1 1 8em; min-width:0; max-width:17em; font-size:.92rem; padding:6px 8px; border-radius:8px; border:0; background:#fff; color:#222; }
.pvbar button { border:0; border-radius:8px; padding:6px 11px; font-weight:700; background:#fff; color:#333; }
.pvbar .pvseg { display:inline-flex; border-radius:9px; overflow:hidden; border:1.5px solid #fff; flex:none; }
.pvbar .pvseg button { background:transparent; color:#fff; border-radius:0; padding:5px 10px; }
.pvbar .pvseg button.on { background:#fff; color:#333; }
.pvbar.test .pvseg button.on { color:#6b4fbb; }
.pvbar.view .pvseg button.on { color:#8a4b00; }
.pvbar #pvwin { flex:none; padding:5px 9px; }
.pvbar .pvnote { margin-left:auto; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:600px) { .pvbar { gap:5px; padding:5px 8px; } .pvbar .pvnote { display:none; } .pvbar .pvseg button { padding:5px 8px; } }
/* 換頁時舊頁的殘影：0.1 秒後開始變淡（很快載完的不會閃），網路慢時一眼就知道「有在換、不是當機」；之後直接換成新頁的骨架 */
@keyframes ghostdim { from { opacity:1; } to { opacity:.4; } }
.viewghost { animation: ghostdim .25s ease .1s both; }
@media (prefers-reduced-motion: reduce) { .viewghost { animation:none; opacity:.6; } }