/* ══════════════════════════════════════════════
   緒瀚作帳專用 — 版面樣式
   設計原則（2026-09-26 改版）：
   ・整體改成淺色：白色面板、淺灰底，不再有大塊黑色。
   ・只有一個主色（深藍 --brand），拿來做主要按鈕、選取狀態、品牌字。
   ・語意色固定：紅＝負／危險、綠＝已領取待清帳／正、琥珀＝漏填警告。
   ・溫層標籤改用「淡底＋深字」，五種一眼分得開、字也看得清。
   ・手機主要按鈕高度 ≥44px，輸入框一律 16px 且有邊框。
   ══════════════════════════════════════════════ */
:root{
  --bg:#f3f5f8; --panel:#fff; --panel-2:#f7f9fc; --panel-3:#eef1f5;
  --ink:#1c2331; --ink-2:#4b5565; --ink-3:#667085; --ink-4:#98a2b3;
  --line:#e4e8ee; --line-2:#cbd3de;

  --brand:#0f4c81; --brand-600:#0c3f6b; --brand-50:#eef4fb; --brand-100:#d8e5f4; --brand-200:#b7cfe8; --brand-ink:#0b3a63;
  --ring:rgba(15,76,129,.28);

  --warm:#f59e0b; --warm-ink:#92400e; --warm-bg:#fffbeb; --warm-line:#fcd34d;
  --cold:#0ea5e9; --frozen:#6366f1; --move:#10b981;
  --neg:#dc2626; --neg-ink:#b91c1c; --neg-bg:#fff1f2; --neg-line:#fecdd3;
  --pos:#15803d; --ok:#15803d; --ok-ink:#166534; --ok-bg:#f0fdf4; --ok-line:#a7f3d0;
  --sel:#0f4c81;
  --adj-bg:#f5f7fa; --adj-line:#cbd5e1;

  --sidebar-w:232px;
  --r-sm:8px; --r-md:12px; --r-lg:14px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 6px 18px rgba(16,24,40,.08);
  --shadow-lg:0 16px 40px rgba(16,24,40,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.5 -apple-system,"PingFang TC","Noto Sans TC","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{display:flex;min-height:100vh}
#content{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{display:none}
#scrim{display:none}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
input:focus-visible,select:focus-visible{outline:none}
::placeholder{color:var(--ink-4)}

/* ---------- 側欄 ---------- */
#sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--panel);color:var(--ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  border-right:1px solid var(--line);
}
.brand{
  font-size:28px;line-height:1.05;letter-spacing:.14em;text-align:center;color:var(--brand);
  padding:22px 0 2px;font-weight:700;display:flex;flex-direction:column;
}
.brand-sub{text-align:center;font-size:11px;letter-spacing:.35em;color:var(--ink-3);padding-bottom:14px}
#nav{flex:1;overflow-y:auto;padding:4px 8px 20px}
.nav-group{padding:16px 10px 6px;font-size:11px;letter-spacing:.16em;color:var(--ink-3);display:flex;align-items:center;justify-content:space-between}
.nav-group button{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:6px}
.nav-group button:hover{color:var(--brand);background:var(--brand-50)}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:8px 12px;cursor:pointer;border-radius:8px;
  color:var(--ink-2);font-size:13.5px;margin:1px 0;
}
.nav-item:hover{background:var(--panel-2);color:var(--ink)}
.nav-item.active{background:var(--brand-50);color:var(--brand);font-weight:600}
.nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:0 0 6px}
.nav-item.active .dot{background:var(--brand)}
.nav-item .n{margin-left:auto;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nav-item.active .n{color:var(--brand)}
.side-foot{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.save-state{font-size:11px;color:var(--ink-3);text-align:center;padding-top:2px}
.save-state.dirty{color:var(--warm-ink)}

/* ---------- 主內容 ---------- */
#main{flex:1;min-width:0;padding:22px 26px 90px;max-width:1500px;width:100%}
.page-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.page-head h1{font-size:24px;margin:0;font-weight:700;letter-spacing:.02em}
.page-head .tag{font-size:13px;color:var(--ink-3);padding-bottom:4px}
.page-head .sub{font-size:12px;color:var(--ink-3);padding-bottom:4px;white-space:nowrap}
.page-head .spacer{flex:1}

.cards{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;min-width:140px;box-shadow:var(--shadow-sm)}
.card .k{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em}
.card .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;letter-spacing:-.01em}
/* 主要數字（當日加總合計）：改成品牌色淡底，不再是一塊黑 */
.card.dark{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-ink)}
.card.dark .k{color:var(--brand)}
.card.dark .v{font-size:26px;color:var(--brand-ink)}
.v.neg{color:var(--neg)} .v.pos{color:var(--pos)}

section.block{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
.block-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--panel)}
.block-head h2{font-size:15px;margin:0;font-weight:700}
.block-head .sub{font-size:12px;color:var(--ink-3)}
.block-head .spacer{flex:1}
.block-body{overflow-x:auto}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:1100px){.two-col{grid-template-columns:1fr}}

/* ---------- 表格 ---------- */
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
table.grid th{
  background:var(--panel-2);font-weight:600;font-size:12px;color:var(--ink-2);text-align:left;
  padding:8px 8px;border-bottom:1px solid var(--line-2);white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.grid td{border-bottom:1px solid var(--line);padding:0;vertical-align:middle}
table.grid tr:hover td{background:var(--panel-2)}
table.grid tr.sel td{background:transparent}
table.grid tr.special td{background:var(--adj-bg)}
table.grid tr.special:hover td{background:var(--panel-3)}
table.grid input,table.grid select{
  width:100%;border:0;background:transparent;font:inherit;color:inherit;padding:7px 8px;
  outline:none;border-radius:0;min-width:0;
}
table.grid input:focus,table.grid select:focus{background-color:var(--brand-50);box-shadow:inset 0 0 0 2px var(--brand)}
table.grid td.num input{text-align:right;font-variant-numeric:tabular-nums}
table.grid td.ro{padding:7px 8px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;background:var(--panel-2)}
table.grid tfoot td{background:var(--panel-3);font-weight:700;border-top:2px solid var(--line-2);padding:9px 8px;font-variant-numeric:tabular-nums}
table.grid tfoot td.num{text-align:right}
td.act{width:30px;text-align:center}
td.act button{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:14px;padding:6px 8px;line-height:1;border-radius:6px}
td.act button:hover{color:var(--neg);background:var(--neg-bg)}
td.pick{width:34px;text-align:center}
td.pick input,th.pick input{width:18px;height:18px;margin:0;accent-color:var(--brand);vertical-align:middle;cursor:pointer}
td.idx{width:34px;text-align:right;color:var(--ink-3);font-size:11px;padding-right:6px;font-variant-numeric:tabular-nums}

/* 溫層標籤：淡底深字，五種都要一眼分得出來 */
.temp{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:700;line-height:1.6;border:1px solid transparent;white-space:nowrap}
.temp.常溫{background:#fef3c7;color:#92400e;border-color:#fde68a}
.temp.冷藏{background:#e0f2fe;color:#075985;border-color:#bae6fd}
.temp.冷凍{background:#e0e7ff;color:#3730a3;border-color:#c7d2fe}
.temp.調撥{background:#d1fae5;color:#065f46;border-color:#a7f3d0}
.temp.帳務{background:#e5e7eb;color:#374151;border-color:#d1d5db}

.empty{padding:26px 22px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------- 控制項 ---------- */
.btn{
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);border-radius:var(--r-sm);
  padding:6px 12px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
  line-height:1.4;min-height:32px;transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:var(--panel-2);border-color:#b9c3d0}
.btn:active{background:var(--panel-3)}
.btn:disabled{opacity:.55;cursor:default}
/* 「dark」是主要動作按鈕的既有 class 名稱，外觀改成品牌色 */
.btn.dark{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.dark:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.sm{padding:4px 10px;font-size:12.5px;min-height:30px}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--panel-2);color:var(--ink)}
.btn.danger{color:var(--neg-ink);border-color:var(--neg-line);background:var(--panel)}
.btn.danger:hover{background:var(--neg-bg)}
input.search{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:6px 10px;font:inherit;font-size:13px;width:190px;background:var(--panel);min-height:32px;color:var(--ink)}
input.search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.hint{font-size:12px;color:var(--ink-3);padding:9px 14px;border-top:1px solid var(--line);background:var(--panel-2);line-height:1.7}
.hint b{color:var(--ink-2)}

/* ---------- 對話框 ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(28,35,49,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.modal{background:var(--panel);border-radius:16px;padding:22px;width:100%;max-width:440px;box-shadow:var(--shadow-lg);max-height:100%;overflow-y:auto;color:var(--ink)}
.modal h3{margin:0 0 14px;font-size:17px;font-weight:700}
.modal label{display:block;font-size:12px;color:var(--ink-2);margin:10px 0 4px}
.modal input,.modal select{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 10px;font:inherit;background:var(--panel);color:var(--ink);min-height:38px}
.modal input:focus,.modal select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
/* 按鈕列黏在彈出框底部：欄位再多、鍵盤跳出來，確定／取消都看得到 */
.modal .row{display:flex;gap:9px;justify-content:flex-end;margin:18px -22px -22px;padding:12px 22px 16px;position:sticky;bottom:-22px;background:var(--panel);border-top:1px solid var(--line);z-index:2}
.modal .note{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.6}

/* ---------- 列印 ---------- */
.print-sheet{background:#fff;padding:0}
.receipt{border:1px solid var(--line-2);border-radius:8px;padding:10px 12px;margin-bottom:8px;break-inside:avoid}
.receipt .who{font-size:16px;font-weight:700;margin-bottom:4px}
.receipt table{width:100%;border-collapse:collapse;font-size:12.5px}
.receipt td{padding:3px 4px;border-bottom:1px dotted var(--line-2)}
.receipt .tot{text-align:right;font-weight:700;padding-top:5px;font-size:13px}
@media print{
  #sidebar,.page-head,.block-head,.cards,.no-print,.hint{display:none!important}
  body{background:#fff}
  #main{padding:0;max-width:none}
  section.block{border:0;margin:0;box-shadow:none}
  .receipt{border:1px solid #999;page-break-inside:avoid}
  table.grid th{position:static}
}

/* 溫層下拉的字色 */
table.grid select.t-常溫{color:#b45309;font-weight:600}
table.grid select.t-冷藏{color:#0369a1;font-weight:600}
table.grid select.t-冷凍{color:#4338ca;font-weight:600}
table.grid select.t-調撥{color:#047857;font-weight:600}
table.grid select.t-none{color:var(--ink-3)}
table.grid input[type=date]{font-variant-numeric:tabular-nums}
table.grid input.auto{color:var(--ink-3);font-style:italic}

/* 提示訊息 */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:#243041;color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.18s;
  z-index:200;max-width:min(560px,92vw);text-align:center;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--neg)}
body:has(#selbar:not([hidden])) #toast{bottom:calc(78px + env(safe-area-inset-bottom))}
@media print{#toast{display:none}}

/* 緒瀚點餐狀態 */
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:600;line-height:1.7;
  background:var(--panel-3);color:var(--ink-2);white-space:nowrap}
.pill.s-in_transit{background:#e2e8f0;color:#334155}
.pill.s-pending{background:#fef3c7;color:#92400e}
.pill.s-notified{background:#dbeafe;color:#1e40af}
.pill.s-picked_up{background:#dcfce7;color:#166534}
.pill.warn{background:#fee2e2;color:#991b1b}
table.grid td.ro .pill{font-variant-numeric:normal}

/* 空的日期欄。Safari 會把 value="" 畫成今天的灰字，所以蓋一層字上去；
   有取貨人卻沒填進貨日的再標黃（匯入緒瀚點餐時會被塞成今天）。
   這一層只是貼紙（pointer-events:none），底下的輸入框照樣點得到。 */
table.grid td.dcell{position:relative}
table.grid .dnone{
  display:none;position:absolute;inset:0;align-items:center;padding:0 9px;
  background:var(--panel);color:var(--ink-3);font-size:12.5px;pointer-events:none;
}
table.grid tr:hover .dnone{background:var(--panel-2)}
table.grid .dnone.warn{background:var(--warm-bg);color:var(--warm-ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--warm-line);border-radius:4px}
table.grid input.dt.blank + .dnone,
table.grid input.dt.missing + .dnone{display:flex}
table.grid input.dt:focus + .dnone{display:none}
table.grid input[type=date].missing{background:var(--warm-bg)}

/* ---------- 核銷 ---------- */
table.grid th.wo-th{text-align:center;font-size:11px;color:var(--ink-3)}
button.wo{
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);border-radius:6px;
  padding:3px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;min-height:26px;
}
button.wo:hover{background:var(--panel-2);color:var(--ink)}
button.wo.armed{background:var(--neg);border-color:var(--neg);color:#fff;font-weight:600}
td.act{width:auto}
/* td.act 的通用 reset 只該給「✕」那顆用；.btn 與核銷鈕要保留按鈕的樣子 */
td.act .btn{border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-size:12px;padding:4px 9px;line-height:1.3;min-height:28px;border-radius:7px}
td.act .btn:hover{background:var(--panel-2);color:var(--ink)}
td.act .btn.danger{color:var(--neg-ink);border-color:var(--neg-line)}
td.act .btn.danger:hover{background:var(--neg-bg);color:var(--neg-ink)}
td.act .btn + .btn{margin-left:4px}
td.act button.wo{border:1px solid var(--line-2);background:var(--panel);color:var(--ink-2);padding:3px 10px;border-radius:6px;font-size:12px}
td.act button.wo:hover{background:var(--panel-2);color:var(--ink)}
td.act button.wo.rm{color:var(--ink-3)}
td.act button.wo.armed,td.act button.wo.armed:hover{background:var(--neg);border-color:var(--neg);color:#fff}

/* 已領取但還沒清帳（綠） */
table.grid tr.unsettled td{background:var(--ok-bg)}
table.grid tr.unsettled:hover td{background:#dcfce7}
table.grid tr.unsettled td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.card.unsettled-card{background:var(--ok-bg);border-color:var(--ok-line)}
.card.unsettled-card .k{color:var(--ok-ink)}
.card.unsettled-card .v{color:var(--ok-ink)}
.btn.warnbtn{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink);font-weight:600}
.btn.warnbtn:hover{background:#dcfce7}

/* 盤點欄位 */
table.grid input.cnt{font-weight:600}
table.grid td.ro-cell{padding:7px 8px;color:var(--ink)}

/* ---------- 操作紀錄 ---------- */
section.block.logblock{margin-bottom:12px}
section.block.logblock table.grid td{border-bottom:1px solid var(--panel-3)}
.pill.k-wo{background:#fee2e2;color:#991b1b}
.pill.k-rs{background:#dbeafe;color:#1e40af}
.pill.k-sy{background:#ede9fe;color:#5b21b6}
.pill.k-tf{background:#fef3c7;color:#92400e}
table.grid td.logtime{color:var(--ink-3);font-size:12px;padding:6px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
table.grid td.logkind{padding:6px 8px}
/* 日期分隔列（app.js 用 inline style 給了底色，這裡用 !important 收成一致的區段標題） */
table.grid tr:has(> td[colspan="5"]:only-child):not(:has(.empty)) td{background:var(--panel-2)!important;font-weight:600;letter-spacing:.04em;border-bottom:1px solid var(--line)}

/* 移除（自己加的列）跟核銷（緒瀚點餐的單）長得不一樣，免得按錯 */
button.wo.rm{color:var(--ink-3);background:var(--panel)}
button.wo.rm:hover{background:var(--panel-2);color:var(--ink)}

/* 代客結帳轉換 */
table.grid td.conv input{color:#b45309}
.convtbl{width:100%;border-collapse:collapse;margin:12px 0 4px}
.convtbl th{font-size:11px;color:var(--ink-3);font-weight:600;text-align:left;padding:0 6px 4px}
.convtbl td{padding:6px 6px;border-top:1px solid var(--line)}
.convtbl input{width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px;font:inherit;font-size:15px;text-align:right;background:var(--panel)}
.convtbl input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
@media (max-width:760px){
  .convtbl th:first-child,.convtbl td:first-child{max-width:120px}
  .convtbl input{font-size:16px}
}

/* 核銷對話框：放回收銀機的金額要一眼看到 */
.cashback{
  background:var(--brand-50);color:var(--brand-ink);border:1px solid var(--brand-100);border-left:4px solid var(--brand);
  border-radius:var(--r-md);padding:14px 16px;margin:12px 0 10px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.cashback .cb-k{font-size:13px;color:var(--brand);letter-spacing:.06em;font-weight:600}
.cashback .cb-v{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.01em}
.cashback .cb-n{font-size:12px;color:var(--ink-3);margin-left:auto}
.modal label.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);margin:10px 0 0;cursor:pointer}
.modal label.chk input{width:18px;height:18px;margin:0;min-height:0;accent-color:var(--brand)}
.btn.wobtn{background:var(--neg-bg);border-color:var(--neg-line);color:#be123c;font-weight:600}
.btn.wobtn:hover{background:#ffe4e6}
@media (max-width:760px){
  .cashback .cb-v{font-size:28px}
  .cashback .cb-n{margin-left:0;flex:1 0 100%}
}

.warnbox{background:var(--warm-bg);border:1px solid var(--warm-line);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:13px;color:var(--warm-ink)}

/* 沒填進貨日：置頂並標一條琥珀色邊，掃一眼就知道還有幾筆沒補 */
table.grid tr.pinned td:first-child{box-shadow:inset 3px 0 0 var(--warm)}
table.grid tr.pinned + tr:not(.pinned) td{border-top:2px solid var(--line-2)}

/* 帳務列：是調整列不是漏填，用灰色，不要看起來像警告 */
table.grid select.t-帳務{color:#475569;font-weight:600}
table.grid tr.pinned.adj td:first-child{box-shadow:inset 3px 0 0 #94a3b8}

/* 帳務列：當成小結算列來看，金額放大一點，其他欄位留白 */
table.grid tr.special td.amt input{font-weight:700}
table.grid tr.special td.ro{background:transparent}

/* ---------- 登入 ---------- */
#app{visibility:hidden}
body.ready #app{visibility:visible}
.login-bg{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top));
  background-image:radial-gradient(60% 50% at 50% 0%, var(--brand-50) 0%, rgba(238,244,251,0) 70%);
}
.login-card{
  width:100%;max-width:360px;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:28px 24px 24px;box-shadow:var(--shadow-md);
}
.login-card .brand{font-size:34px;letter-spacing:.14em;margin-bottom:0;padding-top:4px}
.login-card .brand-sub{color:var(--ink-3);margin-bottom:22px}
.login-card label{display:block;font-size:12.5px;color:var(--ink-2);margin:14px 0 6px;letter-spacing:.04em;font-weight:600}
.login-card input{
  width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 13px;font:inherit;font-size:16px;color:var(--ink);min-height:48px;
}
.login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.login-card .btn{width:100%;margin-top:18px;padding:13px;font-size:15px;min-height:48px;font-weight:600}
.login-card .btn:disabled{opacity:.6}
.login-err{color:var(--neg);font-size:13px;min-height:19px;margin-top:12px}
.login-card .lg-rem{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;color:var(--ink-2);cursor:pointer;letter-spacing:0;font-weight:400}
.login-card .lg-rem input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--brand)}
.pill.r-owner{background:var(--brand-50);color:var(--brand)}
.pill.r-manager{background:#dbeafe;color:#1e40af}
.pill.r-staff{background:var(--panel-3);color:var(--ink-2)}

/* 日期清除鈕。手機的日期選擇器沒有清除功能，打錯了拔不掉。 */
table.grid .dclr{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:var(--ink-3);cursor:pointer;
  padding:7px 8px;line-height:1;font-size:12px;border-radius:6px;
}
table.grid .dclr:hover{color:var(--neg);background:var(--neg-bg)}
table.grid input.dt{padding-right:26px}

/* ---------- 選門市 ---------- */
.storepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:16px 0}
.spcard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
  cursor:pointer;transition:.14s;position:relative;box-shadow:var(--shadow-sm);
}
.spcard:hover{border-color:var(--brand-200);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.spcard:active{transform:none}
.sp-name{font-size:21px;font-weight:700;letter-spacing:.02em}
.sp-tag{font-size:12px;color:var(--ink-3);margin-top:1px}
.sp-tot{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:14px;line-height:1.1;color:var(--brand-ink);letter-spacing:-.01em}
.sp-k{font-size:11px;color:var(--ink-3);letter-spacing:.06em;margin-top:2px}
.sp-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;min-height:20px}
.sp-row .pill{font-size:11px}
.pill.warn2{background:var(--ok-bg);color:var(--ok-ink);font-weight:700;border:1px solid var(--ok-line)}
.sp-sync{font-size:11px;color:var(--ink-3);margin-top:10px}
.spcard.add{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-style:dashed;border-color:var(--line-2);color:var(--ink-3);min-height:150px;background:transparent;box-shadow:none}
.spcard.add:hover{color:var(--brand);border-color:var(--brand-200);background:var(--panel)}
.sp-plus{font-size:30px;line-height:1}

/* 維護鎖：平常只能改金額，名稱與刪除要先按「維護」 */
table.grid td.lockcell{padding:8px 8px;font-weight:600;color:var(--ink)}
table.grid td.act-maint{white-space:nowrap;text-align:right;padding:2px 4px}
table.grid td.act-maint .btn{padding:4px 8px;font-size:12px}
table.grid tr:has(td.act-maint .btn){background:var(--warm-bg)}

/* 手機用的摘要欄，桌機不顯示 */
table.grid td.sumcell{display:none}

/* 下拉選單統一外觀。原生 select 在 Safari 是 ⇅、Chrome 是 ▾，
   夾在表格裡看起來像系統元件亂入。 */
table.grid select{
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 13px) 52%, calc(100% - 8px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:24px;
}
table.grid select:disabled{opacity:.6}
table.grid tr.collapsed, table.grid tr.opened{transition:background .12s}

/* ---------- 勾選後的浮動操作列 ---------- */
#selbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:150;
  display:flex;align-items:center;gap:8px;
  background:var(--panel);color:var(--ink);border:1px solid var(--brand-100);border-radius:14px;padding:8px 10px 8px 14px;
  box-shadow:0 12px 34px rgba(15,76,129,.22), 0 0 0 1px rgba(15,76,129,.04);max-width:calc(100vw - 24px);
}
#selbar[hidden]{display:none}
#selbar .sb-n{font-size:13px;white-space:nowrap;padding:0 4px 0 0;color:var(--ink-2)}
#selbar .sb-n b{font-size:16px;color:var(--brand);font-variant-numeric:tabular-nums}
#selbar .btn{min-height:36px}
#selbar .btn.wobtn{background:var(--neg-ink);border-color:var(--neg-ink);color:#fff;font-weight:600}
#selbar .btn.wobtn:hover{background:#991b1b}
@media print{#selbar{display:none}}
/* 浮動列出現時底下多留一點，最後幾列才不會被蓋住 */
body:has(#selbar:not([hidden])) #main{padding-bottom:110px}

/* ---------- 頂端待清帳 icon ---------- */
#topwo{
  border:0;background:var(--ok);color:#fff;border-radius:99px;
  min-width:34px;height:34px;padding:0 11px;font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:0 2px 6px rgba(21,128,61,.28);
}
#topwo:hover{background:var(--ok-ink)}
#topwo[hidden]{display:none}
@media (min-width: 901px){
  #topbar{display:flex;align-items:center;gap:10px;padding:12px 26px 0;background:transparent}
  #topbar #menu,#topbar #topttl,#topbar #topsave{display:none}
  #topbar:has(#topwo[hidden]){display:none}
  #topwo{margin-left:auto}
}
.btn.warnbtn.on{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.warnbtn.on:hover{background:var(--ok-ink)}

/* ---------- 待清帳：依門市分開列 ---------- */
#womenu{
  position:fixed;z-index:200;right:10px;top:calc(56px + env(safe-area-inset-top));
  background:var(--panel);border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;min-width:260px;
}
#womenu .wm-t{padding:10px 14px 6px;font-size:11px;color:var(--ink-3);letter-spacing:.08em}
#womenu .wm-row{
  display:flex;align-items:baseline;gap:10px;width:100%;
  border:0;border-top:1px solid var(--line);background:var(--panel);cursor:pointer;
  padding:12px 14px;font:inherit;text-align:left;color:var(--ink);min-height:44px;
}
#womenu .wm-row:hover{background:var(--panel-2)}
#womenu .wm-row.here{background:var(--ok-bg)}
#womenu .wm-name{flex:1;font-weight:600;font-size:15px}
#womenu .wm-n{font-size:12px;color:var(--ok-ink);font-weight:600}
#womenu .wm-amt{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;min-width:66px;text-align:right}
#womenu .wm-f{padding:9px 14px;background:var(--panel-2);border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-2);text-align:right}
@media (min-width:901px){#womenu{right:26px;top:56px}}

/* 有人改了資料但不方便自動套用（你正在打字／開著視窗／有未存的修改） */
#freshbar{
  position:fixed;left:50%;transform:translateX(-50%);
  top:calc(64px + env(safe-area-inset-top));z-index:160;
  background:var(--brand);color:#fff;border:0;border-radius:99px;
  padding:10px 16px;font:inherit;font-size:13px;cursor:pointer;min-height:40px;
  box-shadow:0 8px 24px rgba(15,76,129,.35);
}
#freshbar:hover{background:var(--brand-600)}
@media (min-width:901px){#freshbar{top:16px}}

/* 表格底下的新增鈕：捲到最下面時不用再回頂端找 */
.addfoot{
  display:block;width:100%;margin:8px 0 2px;padding:10px;border:1.5px dashed var(--line-2);
  border-radius:10px;background:var(--panel);color:var(--ink-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:40px;
}
.addfoot:hover{border-color:var(--brand-200);color:var(--brand);background:var(--brand-50)}
.addfoot:active{background:var(--brand-100)}

/* 本機列：只在作帳網頁、還沒進緒瀚點餐 */
.lbadge{display:inline-block;font-size:10px;font-weight:700;line-height:1.5;padding:0 5px;border-radius:4px;
  background:var(--panel);color:var(--brand);border:1px solid var(--brand-200);white-space:nowrap}
table.grid td.idx .lbadge{margin-left:4px;vertical-align:1px}
table.grid tr.local td.idx{white-space:nowrap}

/* 選取只留外框（品牌藍），不塗底色 */
table.grid tr.sel{outline:2px solid var(--sel);outline-offset:-2px}

/* ══════════════════════════════════════════════
   手機版。門市夥伴主要是用手機開，這段是主要版面，
   桌機那套（側欄＋寬表格）在窄螢幕完全不能用。
   ══════════════════════════════════════════════ */

/* ---- 頂欄 ＋ 抽屜（≤900px）---- */
@media (max-width: 900px) {
  #sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:60;width:272px;flex-basis:272px;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:none;border-right:0;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
  }
  body.nav-open #sidebar{transform:none;box-shadow:0 0 44px rgba(16,24,40,.25)}
  #scrim{
    display:block;position:fixed;inset:0;background:rgba(28,35,49,.4);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  body.nav-open #scrim{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}

  #topbar{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
    color:var(--ink);padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
    border-bottom:1px solid var(--line);min-height:52px;
  }
  #menu{
    width:44px;height:44px;margin:-4px 0 -4px -6px;border:0;background:none;cursor:pointer;
    display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 11px;flex:0 0 44px;border-radius:10px;
  }
  #menu:active{background:var(--panel-3)}
  #menu span{display:block;height:2px;background:var(--ink);border-radius:2px}
  #topttl{font-size:17px;font-weight:700;letter-spacing:.02em;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #topsave{color:var(--warm-ink);font-size:12px;width:14px;text-align:right}

  #main{padding:12px 12px calc(28px + env(safe-area-inset-bottom))}
  .nav-item{padding:12px 14px;font-size:15px;min-height:44px}
  .nav-group{padding:16px 14px 6px}
  .nav-group button{font-size:20px;padding:6px 10px;margin:-6px -8px;min-width:40px;min-height:40px}
  .side-foot .btn{min-height:44px;font-size:14px}
}

/* ---- 表格排成卡片（≤760px）---- */
@media (max-width: 760px) {
  .page-head{gap:8px;margin-bottom:2px}
  .page-head h1{font-size:20px}
  .page-head .tag{padding-bottom:0;font-size:12px}
  .page-head .spacer{display:none}
  .page-head .btn{flex:0 0 auto}
  .page-head .sub{flex:0 0 auto;padding-bottom:0;align-self:center}
  .page-head, .block-head{
    /* 按鈕列改成可橫向滑，不要擠成三行 */
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .page-head::-webkit-scrollbar, .block-head::-webkit-scrollbar{display:none}
  .block-head h2{flex:0 0 auto}
  .block-head .sub{flex:0 0 auto;white-space:nowrap}
  .block-head .spacer{flex:0 0 4px}
  input.search{width:160px;flex:0 0 160px;font-size:16px;min-height:44px}

  /* 手機上的按鈕都要好按：主要動作 ≥44px */
  .btn, .btn.sm{min-height:44px;padding:8px 14px;font-size:14px;border-radius:10px}
  .page-head .btn.sm, .block-head .btn.sm{min-height:40px;padding:6px 13px;font-size:13.5px}
  .page-head .btn.dark, .block-head .btn.dark{min-height:40px}

  .cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 14px}
  .card{min-width:0;padding:10px 12px}
  .card.dark{grid-column:1/-1}
  .cards > .card:last-child:nth-child(even){grid-column:1/-1}
  .card .v{font-size:19px}
  .card.dark .v{font-size:28px}

  section.block{border-radius:var(--r-lg);margin-bottom:14px}
  .block-body{overflow-x:visible}

  table.grid{display:block}
  table.grid thead{display:none}
  table.grid tbody{display:block;padding:6px}
  table.grid tr{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px;
    border:1px solid var(--line);border-radius:12px;margin:0 0 8px;padding:6px 4px;background:var(--panel);
    position:relative;
  }
  table.grid tr:hover td{background:transparent}
  table.grid tr.special{background:var(--adj-bg);border-color:var(--adj-line)}
  table.grid tr.unsettled{background:var(--ok-bg);border-color:var(--ok-line)}
  table.grid tr.unsettled td:first-child{box-shadow:none}

  table.grid td{
    display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:8px;
    border:0;padding:3px 8px;min-height:36px;
  }
  table.grid td::before{
    content:attr(data-label);font-size:12px;color:var(--ink-3);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  table.grid td[data-label="品名"],
  table.grid td[data-label="取貨人"],
  table.grid td[data-label="說明"],
  table.grid td[data-label="備注"],
  table.grid td[data-label="處置"],
  table.grid td[data-label="帳號"],
  table.grid td[data-label="最後登入"],
  table.grid td[data-label="日期"],
  table.grid td.act{grid-column:1/-1}
  table.grid td{overflow-wrap:anywhere}
  table.grid td[data-label="品名"] input{font-weight:600}
  table.grid td.sm-hide, table.grid th.sm-hide{display:none}
  /* 「尚無資料／載入中」這種整列訊息：不要被拆成標籤＋內容兩欄 */
  table.grid td:has(> .empty){grid-column:1/-1;display:block;padding:0}
  table.grid td:has(> .empty)::before{content:none}
  table.grid tr:has(> td > .empty){display:block;border:0;background:transparent;padding:0;margin:0}

  table.grid td.pick{
    position:absolute;right:6px;top:4px;margin:0;grid-template-columns:auto;width:auto;
    display:flex;align-items:center;justify-content:center;padding:6px;min-height:0;z-index:1;
  }
  table.grid td.pick::before{content:none}
  table.grid td.pick input{width:24px;height:24px;margin:0}

  table.grid input,table.grid select{
    font-size:16px;padding:8px 10px;border-radius:9px;background-color:var(--panel);min-height:44px;
  }
  table.grid input:focus,table.grid select:focus{background-color:var(--brand-50)}
  table.grid td.num input{text-align:left}
  table.grid td.ro{text-align:left;background:transparent;padding:3px 8px}
  /* 空白日期：輸入框一定要留著，不然點了沒東西可以對焦、看起來像壞掉。
     文字設成透明蓋住 Safari 假造的「今天」，上面那層只是貼紙，不吃點擊。 */
  table.grid input.dt.blank, table.grid input.dt.missing{color:transparent}
  table.grid input.dt:focus{color:inherit}
  table.grid .dnone{
    position:absolute;left:78px;right:8px;top:3px;bottom:3px;
    display:none;align-items:center;padding:0 10px;border-radius:9px;pointer-events:none;
  }
  table.grid input.dt.blank + .dnone,
  table.grid input.dt.missing + .dnone{display:flex}
  table.grid input.dt:focus + .dnone{display:none}

  td.act{padding:6px 8px 4px}
  table.grid td.act:has(.btn){display:flex;justify-content:flex-end;gap:8px;padding:6px 8px 4px;min-height:0;grid-column:1/-1}
  table.grid td.act:has(.btn)::before{content:none}
  table.grid td.act .btn{min-height:40px;padding:8px 14px;font-size:14px;border-radius:10px;margin:0}
  button.wo{width:100%;padding:10px;font-size:14px;border-radius:10px;min-height:44px}
  td.act button[data-del]{width:100%;padding:8px;border:1px solid var(--line-2);border-radius:10px;min-height:40px}

  table.grid tfoot{display:block;padding:0 6px 6px}
  table.grid tfoot tr{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    background:var(--panel-3);border-color:var(--line-2);border-radius:10px;padding:10px 12px;margin:0;
  }
  table.grid tfoot td{display:block;border:0;padding:0;background:none;min-height:0}
  table.grid tfoot td::before{content:none}
  table.grid tfoot td:empty{display:none}

  .hint{font-size:12px;line-height:1.7}
  .two-col{gap:14px}
  .modal{padding:18px;border-radius:16px}
  .modal input,.modal select{font-size:16px;padding:10px;min-height:44px}
  .modal .row{flex-wrap:wrap;margin:16px -18px -18px;padding:10px 18px 14px;bottom:-18px}
  .modal .row .btn{flex:1;padding:11px;min-height:46px}
  #toast{bottom:calc(16px + env(safe-area-inset-bottom));font-size:13px;padding:12px 16px}
  .receipt{break-inside:auto}
}

/* 現金盤點在手機上是主戲：項目當標題，帳面／差並排，實點一整行放大 */
@media (max-width: 760px) {
  table.grid td[data-label="項目"]{
    grid-column:1/-1;grid-template-columns:1fr;font-weight:700;font-size:15px;
    padding:4px 8px 0;min-height:0;
  }
  table.grid td[data-label="項目"]::before{content:none}
  table.grid td[data-label="說明"]{grid-column:1/-1;font-size:12px}
  table.grid td[data-label="實點"]{grid-column:1/-1;grid-template-columns:1fr;padding-top:2px}
  table.grid td[data-label="實點"]::before{content:none}
  table.grid input.cnt{
    font-size:20px;font-weight:700;padding:11px 12px;background-color:var(--panel);
  }
  table.grid input.cnt::placeholder{font-weight:400;font-size:15px;color:var(--ink-4)}
}

@media (max-width: 380px) {
  table.grid tr{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:1fr}
}

/* 操作紀錄在手機上排成一則一則：
   第一行 時間・種類・操作人，第二行內容，第三行（若有）還原鈕。
   （app.js 的 section 沒有 logblock class，所以這裡直接對 tr.logrow 下手。） */
@media (max-width: 760px) {
  table.grid tr.logrow{
    grid-template-columns:auto auto minmax(0,1fr);gap:4px 8px;align-items:center;
    border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:10px 4px;
  }
  table.grid tr.logrow:last-child{border-bottom:0}
  table.grid td.logtime,table.grid td.logkind{display:block;padding:0;min-height:0;width:auto!important}
  table.grid td.logtime{color:var(--ink-3);font-size:12px}
  table.grid tr.logrow > td:nth-child(3){display:block;padding:0;min-height:0;width:auto!important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  table.grid tr.logrow > td:nth-child(3)::before{content:none}
  table.grid tr.logrow td[data-label="內容"]{
    grid-column:1/-1;display:block;padding:0;min-height:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere;
  }
  table.grid tr.logrow td[data-label="內容"]::before{content:none}
  table.grid tr.logrow td.act{grid-column:1/-1;padding:4px 0 0;display:flex;gap:8px;width:auto!important}
  table.grid tr.logrow td.act:empty{display:none}
  table.grid tr.logrow td.act .btn{flex:1}
  table.grid tr:has(> td[colspan="5"]){display:block;border:0;background:transparent;padding:0;margin:0;border-radius:0}
  table.grid tr:has(> td[colspan="5"]) td{display:block;min-height:0;background:transparent!important;
    padding:12px 4px 4px!important;border-bottom:0;font-size:12px!important}
  table.grid tr:has(> td[colspan="5"]) td::before{content:none}
  table.grid tr:has(> td[colspan="5"]):first-child td{padding-top:4px!important}
}

/* 手機上的收尾：標題已經在頂欄，頁內就別再佔一行 */
@media (max-width: 760px) {
  .page-head h1, .page-head .tag{display:none}
  .page-head{margin:0 0 8px;padding-top:2px}
  .page-head:empty{display:none}
  .block-head .sub{display:none}
  .block-head{padding:10px 12px}
  .block-head h2{font-size:14.5px;white-space:nowrap}
  /* 空的格子不要留一行「說明」在那裡 */
  table.grid td:empty{display:none}
  table.grid td.ro:empty{display:none}
}

/* ---- 手機版第二輪：排序、緊湊表、寬表 ---- */
@media (max-width: 760px) {
  /* 這裡刻意「不」用 order 重排輸入欄位。
     iOS 鍵盤的「下一項」是照 DOM 順序走的，用 CSS 把畫面順序換掉，
     按下一項就會跳到畫面上不相鄰的格子，看起來像亂跳。
     所以畫面順序＝DOM 順序＝試算表的欄位順序：溫層→品名→取貨人→進貨日→金額。 */
  table.grid td[data-label="品名"],
  table.grid td[data-label="取貨人"]{grid-column:1/-1}
  table.grid td[data-label="進貨日"],
  table.grid td[data-label="有效期限"],
  table.grid td[data-label="有效期限／狀態"],
  table.grid td[data-label="優惠到期日"]{grid-column:1/-1}
  table.grid td.act{order:20}
  table.grid td.idx{order:-1}
  /* 現金盤點：項目→說明→帳面｜差→實點。只限 .cash 這張表：
     作業流程的「項目」是輸入框，套了 order 會跟「下一項」的順序對不上。 */
  table.grid.cash td[data-label="項目"]{order:1}
  table.grid.cash td[data-label="說明"]{order:2}
  table.grid.cash td[data-label="帳面"]{order:3}
  table.grid.cash td[data-label="差"]{order:4}
  table.grid.cash td[data-label="實點"]{order:5}

  table.grid td.idx{
    display:flex;align-items:center;gap:3px;grid-column:1/-1;
    padding:2px 8px 0;min-height:0;font-size:11px;color:var(--ink-3);
  }
  table.grid td.idx::before{content:'#'}

  /* 刪除鈕縮成一顆小的靠右，不要佔整行 */
  table.grid td.act-del{
    grid-column:1/-1;display:flex;justify-content:flex-end;padding:2px 8px 4px;min-height:0;
  }
  table.grid td.act-del::before{content:none}
  table.grid td.act-del button{
    width:auto;padding:8px 14px;border:1px solid var(--line);border-radius:10px;color:var(--ink-3);min-height:40px;
  }
  table.grid td.act-wo button.wo{
    background:var(--neg-bg);border-color:var(--neg-line);color:#be123c;font-weight:600;
  }
  table.grid td.act-wo button.wo.armed{background:var(--neg);border-color:var(--neg);color:#fff}

  /* 面額這種兩欄小表：一列一行，不要拆成卡片 */
  table.grid.compact tbody{padding:4px 6px}
  table.grid.compact tr{
    display:flex;align-items:center;gap:6px;border:0;border-bottom:1px solid var(--line);
    border-radius:0;margin:0;padding:2px 0;background:transparent;
  }
  table.grid.compact tr:last-child{border-bottom:0}
  table.grid.compact td{display:block;padding:2px 4px;min-height:0}
  table.grid.compact td::before{content:none}
  table.grid.compact td[data-label="面額"]{flex:1;min-width:0}
  table.grid.compact td[data-label="面額"] input{background-color:transparent;font-weight:600;padding:8px 6px;border-color:transparent}
  table.grid.compact td[data-label="面額"] input:focus{border-color:var(--brand);background-color:var(--brand-50)}
  table.grid.compact td[data-label="金額"]{width:136px;flex:0 0 136px}
  table.grid.compact td[data-label="金額"] input{text-align:right}
  table.grid.compact td.act-del{width:auto;flex:0 0 auto;padding:0 2px}
  table.grid.compact td.act-del button{border:0;padding:8px;color:var(--ink-3);min-height:40px;min-width:40px}

  /* 寶可夢月表欄位太多，手機上維持表格橫向捲，不要拆卡片 */
  table.grid.wide{display:table;min-width:820px}
  table.grid.wide thead{display:table-header-group}
  table.grid.wide tbody{display:table-row-group;padding:0}
  table.grid.wide tfoot{display:table-footer-group}
  table.grid.wide tr{display:table-row;border:0;border-radius:0;margin:0;padding:0;background:none}
  table.grid.wide td{display:table-cell;border-bottom:1px solid var(--line);padding:0;min-height:0}
  table.grid.wide td::before{content:none}
  table.grid.wide td.ro{text-align:right;background:var(--panel-2);padding:6px 8px}
  table.grid.wide input,table.grid.wide select{background-color:transparent;border-radius:0;min-height:40px}
  table.grid.wide td.act-del{display:table-cell;padding:0}
  table.grid.wide td.act-del button{border:0;padding:6px}
  section.block:has(table.grid.wide) .block-body{overflow-x:auto}
}

/* 品名／取貨人不用標籤，把寬度讓給內容 */
@media (max-width: 760px) {
  table.grid td[data-label="品名"],
  table.grid td[data-label="取貨人"]{grid-template-columns:minmax(0,1fr);padding:2px 8px}
  table.grid td[data-label="品名"]::before,
  table.grid td[data-label="取貨人"]::before{content:none}
  table.grid td[data-label="品名"] input{font-size:16px}
  table.grid tr{gap:0 8px;padding:4px 4px 6px}
  table.grid td{min-height:34px;padding:2px 8px}
}

/* 唯讀的實點（現貨匯總表那列）還是要標籤，不然一個數字浮在那邊 */
@media (max-width: 760px) {
  table.grid td.ro[data-label="實點"]{grid-template-columns:70px minmax(0,1fr);padding:2px 8px}
  table.grid td.ro[data-label="實點"]::before{content:attr(data-label)}
  /* 現金合計那一列：三個數字要有名字 */
  table.grid tfoot tr{flex-wrap:wrap}
  table.grid tfoot td.ftlabel{flex:1 0 100%;font-size:12px;color:var(--ink-2);margin-bottom:4px}
  table.grid tfoot td[data-label]{flex:1;text-align:center}
  table.grid tfoot td[data-label]::before{
    content:attr(data-label);display:block;font-size:11px;color:var(--ink-3);font-weight:400;margin-bottom:1px;
  }
}

/* tfoot 不要跟著卡片的欄位排序跑 */
@media (max-width: 760px) { table.grid tfoot td{order:0} }

@media (max-width: 760px){
  table.grid td.act-wo button.wo.rm{background:var(--panel);border-color:var(--line-2);color:var(--ink-3);font-weight:400}
}

/* 沒填進貨日（手機）：整張卡片畫一條琥珀色左邊 */
@media (max-width:760px){
  table.grid tr.pinned{border-color:var(--warm-line);box-shadow:0 0 0 1px var(--warm-line)}
  table.grid tr.pinned td:first-child{box-shadow:none}
  table.grid tr.pinned + tr:not(.pinned) td{border-top:0}
  table.grid tr.pinned.adj{border-color:var(--adj-line);box-shadow:0 0 0 1px var(--adj-line)}
}

/* 日期清除鈕（手機）：夠大顆才按得到 */
@media (max-width:760px){
  table.grid .dclr{padding:12px 12px;font-size:14px}
  table.grid input.dt{padding-right:40px}
}

@media (max-width:760px){
  .storepick{grid-template-columns:1fr;gap:10px}
  .spcard{padding:16px 18px}
  .sp-tot{font-size:26px}
}

/* ---------- 手機：現金面板一行一項 ----------
   原本每一項被拆成一張卡（名稱一行、標籤一行、輸入框一行），
   一個數字佔掉快 180px，整頁都在捲。 */
@media (max-width: 760px) {
  table.grid.cash tbody{padding:2px 8px}
  table.grid.cash tr{
    display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:center;gap:2px 8px;
    border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:6px 0;background:transparent;
  }
  table.grid.cash tr:last-child{border-bottom:0}
  table.grid.cash td{display:block;padding:0;min-height:0}
  table.grid.cash td::before{content:none}
  /* 早先那條「現金盤點是主戲」把項目設成整行寬（grid-column:1/-1），
     非盤點模式要改回一般欄位，名稱和數字才會同一行。 */
  table.grid.cash td[data-label="項目"]{
    grid-column:auto;grid-template-columns:1fr;font-weight:600;font-size:14.5px;line-height:1.35;
  }
  table.grid.cash td[data-label="帳面"],
  table.grid.cash td[data-label="實點"]{grid-column:auto;grid-template-columns:1fr}
  table.grid.cash td[data-label="說明"]{grid-column:1/-1;font-size:11px;color:var(--ink-3);order:9}
  table.grid.cash td[data-label="說明"]:empty{display:none}
  table.grid.cash td.ro{text-align:right;padding:6px 6px;font-weight:600;font-size:15px}
  table.grid.cash input{text-align:right;padding:8px 10px;font-size:16px}

  /* 盤點模式多了實點與差：項目自己一行，下面三欄並排 */
  table.grid.cash.counting tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 100px;gap:2px 8px;padding:8px 0}
  table.grid.cash.counting td[data-label="項目"]{grid-column:1/-1}
  table.grid.cash.counting td[data-label="實點"]{grid-column:auto}
  table.grid.cash.counting td[data-label="帳面"]::before,
  table.grid.cash.counting td[data-label="實點"]::before,
  table.grid.cash.counting td[data-label="差"]::before{
    content:attr(data-label);display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;
  }
  table.grid.cash.counting input.cnt{font-size:18px;padding:9px 10px}
  table.grid.cash tfoot{padding:0 8px 6px}
  /* .cash tr 的 grid 會蓋掉 tfoot 的 flex，這裡明確改回來：
     平常一行「現金合計 89,823」；盤點時第一行標題、第二行 帳面｜已盤｜差 */
  table.grid.cash tfoot tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
    background:var(--panel-3);border:0;border-radius:10px;padding:10px 12px;margin:6px 0 0}
  table.grid.cash:not(.counting) tfoot td.ftlabel{flex:1 1 auto;margin:0;font-size:13px;color:var(--ink)}
  table.grid.cash:not(.counting) tfoot td[data-label]{flex:0 0 auto;text-align:right;font-size:15px}
  table.grid.cash:not(.counting) tfoot td[data-label]::before{content:none}
  /* 合計列照 DOM 順序：帳面｜已盤｜差（不要被上面 .cash 的 order 換位） */
  table.grid.cash tfoot td[data-label]{order:0}

  /* 統計卡片也壓扁一點 */
  .cards{gap:6px;margin:10px 0 12px}
  .card{padding:9px 12px}
  .card .v{font-size:18px}
  .card.dark{padding:12px 14px}
  .card.dark .v{font-size:26px}
  .card .k{font-size:10.5px}
  section.block{margin-bottom:10px}
  .block-head{padding:8px 10px}
  table.grid tbody{padding:5px}
  table.grid tr{margin-bottom:6px;padding:3px 4px 5px}
  table.grid td{min-height:32px;padding:1px 8px}
  table.grid input,table.grid select{padding:7px 10px}
  .hint{padding:8px 12px;font-size:11.5px}
}

/* 維護鎖（手機） */
@media (max-width:760px){
  table.grid.compact td.act-maint{width:auto;flex:0 0 auto;display:flex;gap:4px}
  table.grid.compact td.act-maint button{padding:7px 10px;min-height:40px}
  table.grid.compact td.lockcell{padding:10px 6px}
}

/* ---------- 手機：訂單預設收合成兩行 ---------- */
@media (max-width: 760px) {
  table.grid tr.collapsed td:not(.sumcell):not(.pick){display:none}
  /* 用 minmax(0,1fr) 而不是 auto：auto 會照品名的整行寬度撐開，長品名會把金額推到勾選框底下 */
  table.grid tr.collapsed{grid-template-columns:minmax(0,1fr);align-items:center;padding:7px 4px;gap:0}
  table.grid td.sumcell{
    display:block;padding:2px 6px;cursor:pointer;min-height:0;grid-column:auto;min-width:0;
  }
  table.grid tr.opened td.sumcell{
    grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:4px;
  }
  table.grid td.sumcell .s1{display:flex;align-items:baseline;gap:8px;min-width:0}
  table.grid td.sumcell .s-name{
    flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  table.grid td.sumcell .s-amt{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;white-space:nowrap;color:var(--ink)}
  table.grid td.sumcell .s2{
    display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px;
    font-size:12px;color:var(--ink-3);
  }
  table.grid td.sumcell .s2 i{font-style:normal;color:var(--line-2)}
  table.grid td.sumcell .temp{font-size:10.5px;padding:0 6px;line-height:1.55}
  table.grid tr.opened{background:var(--panel-2)}
  table.grid tr.opened.special{background:var(--adj-bg)}
  table.grid tr.opened.unsettled{background:var(--ok-bg)}
  /* 收合時 # 與核銷鈕都收起來，展開才出現 */
  table.grid tr.collapsed td.idx,
  table.grid tr.collapsed td.act{display:none}
  /* # 序號在手機上沒用，展開也不要佔位（之前只在收合時藏，展開會跟摘要打架） */
  table.grid tr.opened td.idx{display:none}
  /* 色條畫在整列左邊，不要畫在被移到右邊的勾選欄上 */
  table.grid tr.pinned td:first-child{box-shadow:none}
  table.grid tr.pinned{border-left:3px solid var(--warm)}
  table.grid tr.pinned.adj{border-left-color:#94a3b8;box-shadow:none}
  table.grid tr.unsettled{border-left:3px solid var(--ok)}
  table.grid tr.pinned.adj td:first-child,
  table.grid tr.unsettled td:first-child{box-shadow:none}
  /* 摘要右邊留出勾選框的位置，金額才不會被壓到 */
  table.grid td.sumcell{padding-right:44px}
  table.grid tr.opened td.sumcell{padding-right:44px}
  /* 勾選框對齊到第一行，不要垂直置中在整列中間 */
  table.grid td.pick{top:4px}
  table.grid tr.opened td.pick{top:4px}
}

/* 手機輸入框要看得出邊界：展開的卡片底色跟輸入框接近，
   沒框線時整格像空白，看不出哪裡能點。 */
@media (max-width: 760px) {
  table.grid input:not([type=checkbox]), table.grid select{
    border:1px solid var(--line-2);background-color:var(--panel);border-radius:9px;
  }
  table.grid input:not([type=checkbox]):focus, table.grid select:focus{
    border-color:var(--brand);background-color:var(--brand-50);box-shadow:0 0 0 2px var(--ring);
  }
  table.grid input.cnt{box-shadow:none}
  table.grid input.cnt:focus{box-shadow:0 0 0 2px var(--ring)}
  table.grid td.pick input{border:0}
}

/* 選取只留外框，不要把格子塗色（手機上會變成一塊塊反白，很亂） */
table.grid tr.sel td{background:transparent}
@media (max-width: 760px){
  table.grid tr.sel{outline:none;box-shadow:0 0 0 2px var(--sel);border-color:var(--sel)}
  table.grid tr.sel td, table.grid tr.sel td.sumcell, table.grid tr.sel td.pick{background:transparent !important}
}

/* ---------- 桌機：表頭對齊與減少雜訊 ---------- */
table.grid tfoot td.foot-skip{display:none}
@media (min-width: 761px) {
  /* 摘要欄只給手機用；表頭那格也要藏，不然整排標題往右偏一格、欄寬套錯欄（品名被擠到 86px） */
  table.grid th.sumcell{display:none}
  table.grid tfoot td.idx.foot-skip{display:table-cell}
  /* 門市頁的表：群組每列都是「#這間店」、# 序號也沒有用，藏起來把寬度還給品名 */
  table.grid[data-grid^="main-"] [data-col="group"], table.grid[data-grid^="onsite-"] [data-col="group"],
  table.grid[data-grid^="stock-"] [data-col="group"], table.grid[data-grid^="bad-"] [data-col="group"],
  table.grid[data-grid^="main-"] .idx, table.grid[data-grid^="onsite-"] .idx,
  table.grid[data-grid^="stock-"] .idx, table.grid[data-grid^="bad-"] .idx{display:none}
}
/* 滑鼠操作時：日期的 ✕ 和每列的核銷／移除鈕平常收起來，滑到那一列才出現（手機照舊一直顯示） */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  table.grid .dclr{opacity:0;transition:opacity .12s}
  table.grid tr:hover .dclr, table.grid td.dcell:focus-within .dclr{opacity:1}
  table.grid td.act-wo .wo:not(.armed){opacity:0;transition:opacity .12s}
  table.grid tr:hover td.act-wo .wo, table.grid td.act-wo .wo:focus-visible{opacity:1}
}

/* ---------- 桌機拖曳欄寬 ---------- */
table.grid thead th{position:relative}
table.grid th .rsz{display:none}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  table.grid th .rsz{display:block;position:absolute;top:0;bottom:0;right:0;width:10px;cursor:col-resize;z-index:3}
  table.grid th .rsz::after{content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--line-2, #d0d5dd);opacity:0;transition:opacity .12s}
  table.grid thead:hover th .rsz::after{opacity:1}
  table.grid th .rsz:hover::after, table.grid.resizing th .rsz::after{opacity:1;background:var(--brand, #0f4c81);width:2px}
  table.grid.resizing{user-select:none;cursor:col-resize}
  table.grid th.pick .rsz, table.grid th.idx .rsz, table.grid th.act .rsz{display:none}
}

/* ---------- 寶可夢月表（手機）：一天一張小卡 ----------
   悠遊付、卡片欄退場後只剩 7 欄，不必再橫向捲（橫向捲時數字會被切掉、要左右滑才看得到）。
   卡片裡照 DOM 順序兩欄排：結算日｜起初a、目前b｜應有、現金｜電票、備注（整行）——
   iOS「下一項」照 DOM 走，畫面順序也一樣。桌機維持表格。 */
@media (max-width: 760px) {
  table.grid.wide[data-grid^="pk-"]{display:block;min-width:0}
  table.grid.wide[data-grid^="pk-"] thead{display:none}
  table.grid.wide[data-grid^="pk-"] tbody{display:block;padding:6px}
  table.grid.wide[data-grid^="pk-"] tfoot{display:block}
  table.grid.wide[data-grid^="pk-"] tr{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px;
    border:1px solid var(--line);border-radius:12px;margin:0 0 8px;padding:8px 10px 10px;background:var(--panel);position:relative}
  table.grid.wide[data-grid^="pk-"] td{display:flex;flex-direction:column;gap:3px;border:0;padding:0;min-height:0;background:transparent}
  table.grid.wide[data-grid^="pk-"] td::before{content:attr(data-label);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
  table.grid.wide[data-grid^="pk-"] td.idx{display:none}
  table.grid.wide[data-grid^="pk-"] td.ro{background:transparent;padding:0;text-align:left;font-size:17px;font-weight:600;
    color:var(--ink);min-height:42px;justify-content:flex-start}
  table.grid.wide[data-grid^="pk-"] td.ro span{display:flex;align-items:center;min-height:42px;padding:0 2px}
  table.grid.wide[data-grid^="pk-"] td input{border:1px solid #d0d5dd;border-radius:8px;background-color:#fff;min-height:42px;
    padding:7px 10px;text-align:left;width:100%}
  table.grid.wide[data-grid^="pk-"] td[data-col="note"]{grid-column:1/-1}
  table.grid.wide[data-grid^="pk-"] td[data-col="date"] .dnone{left:0;right:0;top:auto;bottom:0;height:42px}
  table.grid.wide[data-grid^="pk-"] td.act-del{position:absolute;top:2px;right:2px}
  table.grid.wide[data-grid^="pk-"] td.act-del::before{content:none}
  table.grid.wide[data-grid^="pk-"] td.act-del button{min-width:36px;min-height:36px;color:var(--ink-3)}
  section.block:has(table.grid.wide[data-grid^="pk-"]) .block-body{overflow-x:visible}
}

/* ---------- 月結列印 ---------- */
#print-root{display:none}
@media print {
  @page{size:A4 portrait;margin:12mm}
  body.printing > *:not(#print-root){display:none !important}
  body.printing #print-root{display:block}
  body.printing{background:#fff !important}
  .pm{font-family:-apple-system,"PingFang TC","Noto Sans TC",sans-serif;color:#000;font-size:10.5pt}
  .pm-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #000;padding-bottom:6pt;margin-bottom:8pt}
  .pm-title{font-size:16pt;font-weight:700}
  .pm-sub{font-size:9.5pt;color:#333;margin-top:2pt}
  .pm-meta{font-size:9pt;text-align:right;line-height:1.5;color:#333}
  .pm-sum{width:100%;border-collapse:collapse;margin-bottom:8pt}
  .pm-sum td{border:1px solid #000;padding:5pt 8pt;width:25%}
  .pm-sum .k{font-size:8.5pt;color:#333}
  .pm-sum .v{font-size:15pt;font-weight:700;font-variant-numeric:tabular-nums}
  .pm-rows{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  .pm-rows th,.pm-rows td{border:1px solid #555;padding:2.5pt 5pt;text-align:right;line-height:1.3}
  .pm-rows th{background:#eee;font-weight:600;text-align:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pm-rows td:first-child{text-align:center}
  .pm-rows .note{text-align:left;width:30%}
  .pm-rows tfoot td{font-weight:700;border-top:2px solid #000}
  .pm-rows tr{break-inside:avoid}
  .pm .neg{font-weight:700}
  .pm-sign{display:flex;gap:14pt;margin-top:22pt}
  .pm-sign div{flex:1;font-size:10pt}
  .pm-sign span{display:block;border-bottom:1px solid #000;height:22pt;margin-top:4pt}
  /* 表格固定在紙張寬度內：欄寬照比例分，長的換行，不會撐出紙外（Safari 列印不會自動縮小） */
  html,body.printing{width:auto !important;min-width:0 !important;overflow:visible !important}
  #print-root,.pm{width:100% !important;max-width:100% !important;box-sizing:border-box}
  .pm{padding:0 2pt}   /* 最右邊的框線貼著紙邊時，有的瀏覽器會把它裁掉 */
  .pm-sum{table-layout:fixed}
  .pm-items{font-size:8.5pt;table-layout:fixed;width:100%}
  .pm-items th,.pm-items td{padding:2pt 4pt;overflow-wrap:anywhere;word-break:break-word}
  .pm-items .nw{white-space:nowrap}
  .pm-items td.note{white-space:normal}
  .pm-items td.l{text-align:left}
  .pm-items td small{font-size:7.5pt;color:#333}
  .pm-sum .k small{display:block;font-size:7.5pt}
  .pm-h{font-size:11pt;margin:10pt 0 4pt}
  .pm-h small{font-size:8pt;font-weight:400;color:#333;margin-left:8pt}
  .pm-items + .pm-h{margin-top:14pt}
}
@media (max-width: 760px) {
  table.grid.wide[data-grid^="pk-"] td{text-align:left;align-items:stretch}
  table.grid.wide[data-grid^="pk-"] tr{gap:2px 10px;padding:6px 10px 8px}
  table.grid.wide[data-grid^="pk-"] td input{min-height:40px}
  table.grid.wide[data-grid^="pk-"] td[data-col="date"]{position:relative}
  table.grid.wide[data-grid^="pk-"] td[data-col="date"] .dclr{position:absolute;top:auto;bottom:4px;right:36px;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;transform:none}
}
@media (max-width: 760px) {
  /* 月表的結算日是自動往下帶的，不需要清除鈕（窄卡片裡會壓到日期） */
  table.grid.wide[data-grid^="pk-"] td[data-col="date"] .dclr{display:none}
}
@media (min-width: 761px) {
  /* 拖過欄寬的表：固定版面，照記下來的寬度排 */
  table.grid.fixedw{table-layout:fixed}
  table.grid.fixedw th.pick{width:44px}
  table.grid.fixedw th.act{width:90px}
  table.grid.fixedw td{overflow:hidden;text-overflow:ellipsis}
}
@media (min-width: 761px) {
  /* 萬一欄位加起來比畫面寬（拖得太寬），可以左右捲，不要把右邊的欄位切掉 */
  section.block:has(table.grid.fixedw) .block-body{overflow-x:auto}
  table.grid.fixedw{min-width:100%}
}
@media (min-width: 761px) {
  /* 門市的表一律固定版面：寬度先給固定欄（溫層、取貨人、日期、金額…），剩下全部給品名 */
  table.grid[data-grid^="main-"], table.grid[data-grid^="onsite-"],
  table.grid[data-grid^="stock-"], table.grid[data-grid^="bad-"]{table-layout:fixed}
  table.grid[data-grid^="main-"] th.pick, table.grid[data-grid^="onsite-"] th.pick,
  table.grid[data-grid^="stock-"] th.pick, table.grid[data-grid^="bad-"] th.pick{width:44px}
  table.grid[data-grid^="main-"] th.act, table.grid[data-grid^="onsite-"] th.act,
  table.grid[data-grid^="stock-"] th.act, table.grid[data-grid^="bad-"] th.act{width:84px}
}
@media (min-width: 761px) {
  table.grid[data-grid^="main-"], table.grid[data-grid^="onsite-"],
  table.grid[data-grid^="stock-"], table.grid[data-grid^="bad-"], table.grid.fixedw{width:100%}
}
@media (min-width: 761px) {
  /* 門市的表把 # 欄藏了，合計列那格也要藏，不然多出一個沒有表頭的空欄吃掉右邊寬度 */
  table.grid[data-grid^="main-"] tfoot td.foot-skip, table.grid[data-grid^="onsite-"] tfoot td.foot-skip,
  table.grid[data-grid^="stock-"] tfoot td.foot-skip, table.grid[data-grid^="bad-"] tfoot td.foot-skip{display:none}
}
table.grid tfoot td.foot-label{white-space:nowrap;overflow:visible;position:relative;z-index:1}

/* ---------- 操作紀錄篩選 ---------- */
.logfilter{background:var(--panel,#fff);border:1px solid var(--line,#e4e7ec);border-radius:14px;padding:10px 12px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.logfilter .lf-cats{display:flex;gap:6px;flex-wrap:wrap}
.logfilter .chip{border:1px solid var(--line-2,#d0d5dd);background:#fff;color:var(--ink-2,#4b5565);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;min-height:34px}
.logfilter .chip.on{background:var(--brand,#0f4c81);border-color:var(--brand,#0f4c81);color:#fff}
.logfilter .lf-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.logfilter select,.logfilter input[type=date]{border:1px solid var(--line-2,#d0d5dd);border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;background:#fff;min-height:36px}
.logfilter .search{flex:1;min-width:160px}
@media (max-width:760px){
  .logfilter select,.logfilter input[type=date],.logfilter .search{font-size:16px;flex:1 1 45%}
  .logfilter .lf-cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .logfilter .chip{flex:0 0 auto}
}
@media (max-width: 760px) {
  /* 有 b−a 欄的月份多一格，備注跟電票並排，卡片不會多一行 */
  table.grid.wide[data-grid^="pk-"] tr:has(td[data-col="_r"]) td[data-col="note"]{grid-column:auto}
}
/* ---------- 寶可夢月表（手機）緊湊版：日期當小標題，三格一排 ----------
   順序照 DOM：日期（整行）→ 起初a｜目前b｜b−a → 應有張數｜現金｜電票 → 備注（整行） */
@media (max-width: 760px) {
  table.grid.wide[data-grid^="pk-"] tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 8px;padding:6px 10px 8px;margin-bottom:6px}
  table.grid.wide[data-grid^="pk-"] td[data-col="date"]{grid-column:1/-1;padding-right:40px}
  table.grid.wide[data-grid^="pk-"] td[data-col="date"]::before{content:none}
  table.grid.wide[data-grid^="pk-"] td[data-col="date"] input{min-height:34px;padding:4px 8px;font-weight:700;border-color:transparent;background-color:transparent}
  table.grid.wide[data-grid^="pk-"] td[data-col="date"] input:focus{border-color:#3b82f6;background-color:#fff}
  table.grid.wide[data-grid^="pk-"] td[data-col="note"],
  table.grid.wide[data-grid^="pk-"] tr:has(td[data-col="_r"]) td[data-col="note"]{grid-column:1/-1}
  table.grid.wide[data-grid^="pk-"] td input{min-height:38px;padding:6px 8px}
  table.grid.wide[data-grid^="pk-"] td.ro{min-height:38px;font-size:16px}
  table.grid.wide[data-grid^="pk-"] td.ro span{min-height:38px}
  table.grid.wide[data-grid^="pk-"] td::before{font-size:11px}
  table.grid.wide[data-grid^="pk-"] td.act-del{top:4px;right:4px}
}
/* 選門市卡片：零用金（零錢盒、倉庫金庫）一眼看得到 */
.spcard .sp-cash{margin:10px 0 2px;padding:8px 10px;border-radius:10px;background:var(--panel-2,#f7f9fc);border:1px solid var(--line,#e4e7ec);display:flex;flex-direction:column;gap:4px}
.spcard .sp-cash div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
.spcard .sp-cash span{color:var(--ink-3,#667085);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.spcard .sp-cash b{font-variant-numeric:tabular-nums;color:var(--ink,#1c2331);font-weight:700;white-space:nowrap}
.spcard .sp-cash{margin:8px 0 0}
.spcard .sp-cash .sp-cash-h{font-size:13.5px;font-weight:600}
.spcard .sp-cash .sp-cash-h span{color:var(--ink-2,#4b5565)}
.spcard .sp-denoms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px;margin-top:4px;padding-top:6px;border-top:1px dashed var(--line,#e4e7ec)}
.spcard .sp-denoms div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.spcard .sp-denoms b{font-weight:600;color:var(--ink-2,#4b5565)}
/* 修正：上面 .sp-cash div 的 flex 也套到了面額清單本身，整排擠成一行溢出卡片 */
.spcard .sp-cash > .sp-denoms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
.spcard .sp-cash > .sp-denoms > div{display:flex;justify-content:space-between;gap:8px;min-width:0}
.spcard .sp-cash > .sp-denoms span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.spcard{min-width:0;overflow:hidden}
.spcard .sp-cash{min-width:0}

/* ---------- 門市報表 ---------- */
.rep-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rep-grid{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;font-size:13px}
.rep-grid th,.rep-grid td{padding:6px 6px;text-align:center;border-bottom:1px solid var(--line,#e4e7ec);white-space:nowrap}
.rep-grid thead th{font-weight:600;color:var(--ink-2,#4b5565);background:var(--panel-2,#f7f9fc);font-size:12.5px}
.rep-grid .rg-m{position:sticky;left:0;z-index:1;background:var(--panel,#fff);text-align:left;font-variant-numeric:tabular-nums;box-shadow:1px 0 0 var(--line,#e4e7ec)}
.rep-grid thead .rg-m{background:var(--panel-2,#f7f9fc)}
.rep-grid .rg-open{border:1px solid var(--brand,#0f4c81);color:var(--brand,#0f4c81);background:#fff;border-radius:8px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer;min-height:32px}
.rep-grid .rg-open:hover{background:var(--brand,#0f4c81);color:#fff}
.rep-grid .rg-miss{color:#b91c1c;font-weight:600;background:#fef2f2}
.rep-grid .rg-skip{color:var(--ink-3,#667085)}
.rep-hit{padding:10px 14px;border-bottom:1px solid var(--line,#e4e7ec)}
.rep-hit .rh-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rep-hit .rh-top .btn{margin-left:auto}
.rep-hit .rh-snip{font-size:12.5px;color:var(--ink-3,#667085);margin-top:4px;line-height:1.5;word-break:break-all}
/* 帳號的門市報表權限 */
.perm-box{margin-top:14px;padding:10px 12px;border:1px solid var(--line,#e4e7ec);border-radius:10px;background:var(--panel-2,#f7f9fc)}
.perm-box .perm-t{font-weight:600;font-size:13.5px;margin-bottom:6px}
.perm-box .perm-t span{font-weight:400;color:var(--ink-3,#667085);font-size:12px}
.perm-box .perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
.perm-box .chk{margin:4px 0;font-size:13.5px}
.perm-box .perm-a{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line,#e4e7ec)}
.perm-box .perm-s{display:inline-block;margin-left:5px;font-size:10.5px;font-weight:700;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:4px;padding:0 4px;vertical-align:1px}
/* 盤點差異：復盤欄位 */
.dx .stk-rc .stk-in{width:76px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:16px;text-align:right}
.dx .stk-rc .stk-note{width:150px;text-align:left}
.dx .stk-rc tr.stk-ok td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dx .stk-rc input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}

/* 新增一列的填寫框 */
.addform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 12px 0 4px; }
.addform label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); min-width: 0; }
.addform input, .addform select { font-size: 15px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); width: 100%; box-sizing: border-box; min-width: 0; }
.addform input:focus, .addform select:focus { outline: 2px solid var(--brand); outline-offset: 0; }

/* 品項健檢 */
.ph-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.ph-grn { background: var(--ok); } .ph-yel { background: var(--warm); } .ph-red { background: var(--neg); }
.ph-grn-t { color: var(--ok-ink); } .ph-yel-t { color: var(--warm-ink); } .ph-red-t { color: var(--neg); }
.ph-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.ph-top { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.ph-ok { background: var(--panel-2); color: var(--ink-3); border-color: var(--line); }
.ph-watch { background: var(--warm-bg); color: var(--warm-ink); border-color: var(--warm-line); }
.ph-stop { background: var(--neg-bg); color: var(--neg-ink); border-color: var(--neg-line); }
.ph-old { background: var(--panel-2); color: var(--ink-4); border-color: var(--line); border-style: dashed; }
.ph-al { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; flex-wrap: wrap; }
.ph-al:hover { border-color: var(--line-2); background: var(--panel-2); }
.ph-go { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }

/* 品項維護 */
.nav-item .n.alert { background: var(--neg); color: #fff; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.it-bub { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px;
  background: var(--neg); color: #fff; font-size: 11px; font-weight: 700; text-align: center; vertical-align: 1px; }
.it-mks { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dx .it-mk, .it-mk { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.dx .it-mk:hover, .it-mk:hover { border-color: var(--brand); color: var(--brand); }
.it-ex { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.it-ex input { width: 74px; padding: 6px 8px; font-size: 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); }
.dx .it-go, .it-go { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-sm); border: 0; background: var(--brand); color: #fff; cursor: pointer; white-space: nowrap; }
.dx .it-x, .it-x { font-size: 12px; padding: 5px 9px; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.it-row { align-items: center; gap: 10px; }
.dx .it-mk.on.m_down, .it-mk.on.m_down { background: var(--warm-bg); color: var(--warm-ink); border-color: var(--warm-line); font-weight: 600; }
.dx .it-mk.on.close_intro, .it-mk.on.close_intro { background: var(--neg-bg); color: var(--neg-ink); border-color: var(--neg-line); font-weight: 600; }
.it-mk.busy { opacity: .55; pointer-events: none; }
.dx .it-mk, .it-mk { min-height: 30px; padding: 4px 10px; }
.ph-keep { background: var(--brand-50); color: var(--brand-ink); border-color: var(--brand-200); }
/* 點品號複製 */
.dx .code-cp, .code-cp { font: inherit; font-variant-numeric: tabular-nums; color: var(--brand); background: none; border: 0; padding: 0;
  border-bottom: 1px dashed var(--brand-200); cursor: pointer; }
.dx .code-cp:active, .code-cp:active { color: var(--brand-ink); background: var(--brand-50); }

/* 新增一列：日期清除、短欄位並排、新列閃一下 */
.addform label.full { grid-column: 1 / -1; }
.af-date { position: relative; display: flex; gap: 6px; align-items: center; }
.af-date input { flex: 1; min-width: 0; }
.af-date.empty input { color: transparent; }
.af-date.empty input:focus { color: var(--ink); }
.af-none { display: none; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; font-size: 14px; }
.af-date.empty .af-none { display: block; }
.af-date.empty input:focus + .af-none { display: none; }
.af-clr { flex: none; font-size: 12px; padding: 0 10px; min-height: 38px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--ink-3); cursor: pointer; }
.af-date.empty .af-clr { visibility: hidden; }
@media (max-width: 560px) { .addform { grid-template-columns: 1fr 1fr; gap: 8px 10px; } .af-clr { min-height: 44px; } }
@keyframes justAdded { 0%, 60% { background: var(--brand-100); } 100% { background: transparent; } }
tr.just-added, tr.just-added td { animation: justAdded 2.4s ease-out; }

/* ---------- 台帳陳列 ---------- */
.plano { --pl0:#eef2f7; --pl1:#d6e4f2; --pl2:#b3cde6; --pl3:#80acd5; --pl4:#4d88bf; --pl5:#2563a3; --pl6:#0f3f73; --plz:#fde7df; }
.pl-grid { display: grid; grid-template-columns: 280px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .pl-grid { grid-template-columns: 1fr; } .pl-side { max-height: 46vh; position: static !important; } }
.pl-side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; max-height: calc(100vh - 140px); position: sticky; top: 12px; }
.pl-srch { position: sticky; top: 0; z-index: 2; background: var(--panel); padding: 10px; border-bottom: 1px solid var(--line); }
.pl-srch input { width: 100%; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; font-size: 14px; }
.pl-grp { padding: 10px 12px 4px; font-size: 11px; color: var(--ink-4); }
.pl-sh, .pl-hit { padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.pl-sh:hover, .pl-hit:hover { background: var(--panel-2); } .pl-sh.on { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand); }
.pl-meta, .pl-where { font-size: 11px; color: var(--ink-3); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.pl-z { color: var(--neg-ink); } .pl-c { color: var(--warm-ink); font-weight: 600; }
.plano mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
.pl-view { min-width: 0; }
.pl-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; margin-bottom: 8px; }
.dx .pl-chgbtn, .pl-chgbtn { margin-left: auto; background: #b45309; color: #fff; border: 0; padding: 7px 14px; border-radius: var(--r-sm); font-weight: 600; cursor: pointer; font-size: 13px; }
.pl-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pl-kpis > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; min-width: 110px; }
.pl-kpis b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; } .pl-kpis span { font-size: 11px; color: var(--ink-3); }
.pl-exbar { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-sm); padding: 8px 12px; font-size: 12px; color: var(--ink-2); margin-bottom: 10px; }
.pl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dx .pl-chip, .pl-chip { border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; }
.dx .pl-chip.on, .pl-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pl-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-3); margin: 6px 0 12px; flex-wrap: wrap; }
.pl-legend i { width: 22px; height: 10px; display: inline-block; border-radius: 2px; }
.pl-layer { display: flex; align-items: stretch; margin-bottom: 10px; }
.pl-lname { width: 62px; flex: none; font-size: 11px; color: var(--ink-3); padding-top: 6px; line-height: 1.4; }
.pl-shelf { flex: 1; min-width: 0; display: flex; gap: 2px; padding: 4px; background: var(--panel-2); border: 1px solid var(--line); border-bottom: 4px solid var(--line-2); border-radius: 6px 6px 2px 2px; overflow-x: auto; }
.pl-it { flex: none; min-height: 92px; border-radius: 4px; padding: 5px 6px; cursor: pointer; position: relative; border: 1px solid rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 2px; overflow: hidden; color: #102a43; }
.pl-it.dk { color: #fff; } .pl-it:hover { outline: 2px solid var(--brand); outline-offset: -1px; } .pl-it.sel { outline: 2px solid var(--ink); outline-offset: -1px; }
.pl-nm { font-size: 11px; line-height: 1.25; max-height: 2.5em; overflow: hidden; } .pl-pr { font-size: 10px; opacity: .8; }
.pl-ft { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; font-size: 10px; font-variant-numeric: tabular-nums; }
.pl-gr { position: absolute; top: 3px; right: 4px; font-size: 9px; font-weight: 700; opacity: .7; }
.pl-tag { position: absolute; top: -1px; left: -1px; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px 0 4px 0; color: #fff; }
.pl-tag.new { background: #15803d; } .pl-tag.mov { background: #b45309; }
.pl-mk { position: absolute; bottom: 20px; left: 4px; font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,.88); color: #7c2d12; }
.pl-mk.done { color: #475569; }
.pl-warn { position: absolute; top: 2px; right: 16px; font-size: 11px; }
.pl-spark { display: flex; gap: 1px; align-items: flex-end; height: 14px; } .pl-spark span { width: 4px; background: currentColor; opacity: .55; border-radius: 1px; }
.pl-it.flash { animation: plflash 1.6s ease-out 2; } @keyframes plflash { 0%,40% { box-shadow: 0 0 0 3px #b45309; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pl-detail { background: var(--panel); border: 2px solid var(--brand-200); border-radius: var(--r-md); padding: 12px 14px; margin: 12px 0; }
.pl-dgrid { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.pl-wk { border-collapse: collapse; margin-top: 8px; font-size: 12px; } .pl-wk th, .pl-wk td { padding: 3px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.pl-wk th:first-child, .pl-wk td:first-child { text-align: left; color: var(--ink-3); }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 14px; }
.pl-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.pl-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); cursor: pointer; }
.pl-row:last-child { border-bottom: 0; } .pl-row span:last-child { color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-dh { font-weight: 700; font-size: 13px; margin: 14px 0 4px; } .pl-dh span { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 8px; }
.pl-dr { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; cursor: pointer; }
.pl-dr:hover { background: var(--panel-2); } .pl-pos { font-size: 12px; white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-why { font-size: 11px; color: var(--ink-3); }
.modal:has(.pl-dr) { max-width: 640px; }
.modal:has(.pl-pop) { max-width: 620px; }
.pl-detail-pop { border: 0; padding: 0; margin: 0; }
.pl-pop .pl-wk { width: 100%; }
.pl-tabs { display: flex; gap: 6px; margin-top: 8px; }
.dx .pl-tab, .pl-tab { flex: 1; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; }
.dx .pl-tab.on, .pl-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.dx .pl-star, .pl-star { border: 0; background: none; color: var(--ink-4); font-size: 15px; line-height: 1; padding: 0 6px 0 0; cursor: pointer; vertical-align: -1px; }
.dx .pl-star.on, .pl-star.on { color: #f59e0b; }
.dx .pl-star.big, .pl-star.big { font-size: 20px; vertical-align: -2px; }
.pl-hide { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin: 10px 0 0; cursor: pointer; }
.pl-hide input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }

/* 緒瀚小幫手 logo（SH 藍＋橘「緒瀚」），側欄與登入頁共用 */
.brand-logo{display:block;width:96px;height:auto;margin:0 auto}
.lg-logo{width:120px}