* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif; margin: 0; background: #f6f6f4; color: #222; }
.hidden { display: none !important; }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #fff; border-bottom: 1px solid #ddd; }
.nav-left { display: flex; align-items: center; gap: 18px; }
.brand { font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
.brand-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.nav-link { text-decoration: none; color: #555; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.nav-link.active { background: #eee; color: #111; font-weight: 600; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.login-state { font-size: 13px; color: #666; }

button { cursor: pointer; border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
button:hover { background: #f0f0f0; }

/* 訂購人／未結 這種「按下展開複選框」的篩選按鈕(統計/訂單管理工具列共用) */
/* 日期區間頭尾的月份平移箭頭，統計頁／訂單管理共用 */
.month-shift-btn { padding: 4px 10px; line-height: 1; }
.filter-popover-wrap { position: relative; display: inline-block; }
.filter-popover { position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 8px 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 30; display: flex; flex-direction: column; gap: 6px; font-size: 13px; white-space: nowrap; }
.filter-popover label { display: flex; align-items: center; gap: 6px; font-weight: normal; }
/* 「未結」跟瀚民/泉吉是不同性質的篩選(欄位可見度 vs 人員欄位分組)，加一條分隔線 */
.filter-popover label.filter-popover-divider { margin-top: 4px; padding-top: 6px; border-top: 1px solid #eee; }
button.primary { border-color: #a0592f; color: #fff; background: #b26445; font-weight: 600; }
button.primary:hover { background: #9c5539; }
button.danger { border-color: #c0392b; color: #c0392b; }
button.danger:hover { background: #fdecea; }
button.danger:disabled { opacity: 0.4; cursor: default; background: #fff; }
button:disabled { opacity: 0.5; cursor: default; }

input[type=text], input[type=number], input[type=password], input[type=date], textarea, select {
  font-size: 13px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit;
}

.view { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
.hint { font-size: 12px; color: #888; line-height: 1.6; }
.error { color: #c0392b; font-size: 13px; }

/* ---------- 統計頁工具列 ---------- */
.stats-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

/* ---------- admin table（人員/商店管理，框線比照 shift-scheduler 的人員清單）---------- */
.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th, .admin-table td { border: 1px solid #e0e0e0; padding: 4px 8px; font-size: 13px; text-align: center; }
.admin-table th { color: #222; font-weight: 700; font-size: 13px; }
.admin-table input[type=text] { width: 100%; font-size: 12px; box-sizing: border-box; }
.col-check { width: 50px; }
.col-ops { width: 32px; }
.col-handle { width: 20px; }
.admin-table td.col-amount, .admin-table th.col-amount { text-align: right; white-space: nowrap; }

/* 人員/商店管理的操作欄同時放「✕ 刪除」跟「⚙ 編輯別名」兩顆方形按鈕，跟 shift-scheduler
   的人員清單管理同一套視覺 -- 欄位加寬、按鈕之間留一點間距、不要讓兩顆按鈕換行。別名編輯
   彈窗的 X／— 是各自獨立一欄、一欄一顆按鈕，用一般的 col-ops 寬度就夠 */
.people-table .col-ops, .shops-table .col-ops, .alias-edit-table .col-ops, .backup-table .col-ops { width: 64px; }
.people-table td.as-ops-cell, .shops-table td.as-ops-cell, .alias-edit-table td.as-ops-cell, .backup-table td.as-ops-cell { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.row-op-btn { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.row-op-btn + .row-op-btn { margin-left: 4px; }
/* 資料備份清單的「還原」按鈕，沿用已結款狀態同一種綠色，跟「✕ 刪除」的紅色區分開來 */
button.approve-btn { border-color: #2e8b57; color: #2e8b57; font-weight: 600; }
button.approve-btn:hover { background: #eafaf1; }
.admin-table tr.new-row td { background: #fafafa; }

/* 拖曳排序只透過最左邊的 ⠿ 把手，不是整列都能拖 -- 用抓取手勢的游標提示可以拖動 */
.drag-handle { cursor: grab; display: inline-block; color: #999; }
.drag-handle:active { cursor: grabbing; }

/* 批量勾選之後出現的工具列（人員管理是移動到瀚民/泉吉＋刪除，商店管理只有刪除）：內嵌
   在標題排裡（標題與「金額排序／次數排序」按鈕之間），不再自己獨立佔一排 */
.batch-toolbar-inline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; margin-right: 10px; white-space: nowrap; }

/* 設定頁裡「訂單管理」／「名稱管理」子分頁，樣式沿用頂層 nav-link，只是換一排放在
   settingsView 裡面 */
.settings-tabs { display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid #e0e0e0; padding-bottom: 8px; }
.settings-panel.hidden { display: none; }

.admin-column-title { margin: 0 auto 0 0; font-size: 14px; font-weight: 700; text-align: left; }
/* 標題／批量工具列／排序按鈕同一排：標題靠左、排序按鈕靠右，批量工具列（勾選數量＋批量
   操作按鈕）夾在中間，只有勾選時才會出現 */
.admin-column-title-row { display: flex; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }

/* 瀚民／泉吉／不統計 三個子分組各自的標題與表格容器 */
.people-group { margin-bottom: 14px; }
.people-group:last-child { margin-bottom: 0; }
.people-group-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; text-align: left; color: #444; }
/* 瀚民這組的標題跟「次數排序」按鈕同一排(比照商店管理的排版)，擠在 flex 列裡就不需要
   標題自己的下邊距了，不然跟按鈕對不齊。 */
.admin-column-title-row .people-group-title { margin: 0; }

/* ---------- 統計：列=日期+店名、欄=姓名 的樞紐表 ---------- */
.pivot-table-scroll { overflow: auto; max-width: 100%; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; }
.pivot-table { border-collapse: collapse; white-space: nowrap; }
.pivot-table th, .pivot-table td { border-bottom: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; padding: 8px 10px; font-size: 12px; text-align: right; }
.pivot-table th { color: #555; font-weight: 500; text-align: center; background: #faf6f2; }
.pivot-table td.pivot-name-cell, .pivot-table th.pivot-name-header {
  position: sticky; left: 0; z-index: 2; background: #fff; text-align: center; font-weight: 600; border-right: 1px solid #ddd;
}
.pivot-table th.pivot-name-header { background: #faf6f2; z-index: 3; }
.pivot-table tr:nth-child(even) td.pivot-name-cell { background: #fbfbfa; }
.pivot-cell-amount { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
/* 金額文字獨立可點(跳出品項明細彈窗)，跟旁邊的已結勾選框不再共用同一個 <label>，這裡補
   一點間距/游標樣式，視覺上維持原本文字+勾選框並排的樣子 */
.pivot-cell-amount-clickable { cursor: pointer; }
.pivot-cell-amount-clickable:hover { text-decoration: underline; }
.pivot-paid-checkbox { margin-left: 4px; vertical-align: middle; }
.pivot-cell-empty { color: #ccc; }
.pivot-total-row td, .pivot-total-row th, .pivot-total-col { font-weight: 700; background: #faf6f2; }
.pivot-col-header-shop { font-weight: 600; }
.pivot-col-header-date { font-size: 11px; color: #888; font-weight: 400; }
/* 人員欄表頭一樣拆兩行：部門(小字)在上，姓名(粗體)在下，跟日期/店名表頭同一套視覺風格 */
.pivot-person-header-dept { font-size: 11px; color: #888; font-weight: 400; }
.pivot-person-header-name { font-weight: 600; }
/* 已結(全部打勾)綠底、未結(完全沒打勾)紅底；部分付款不特別上色 */
.pivot-cell-paid { background: #eafaf1; }
.pivot-cell-unpaid { background: #fdecea; }

/* ---------- 組間結算(瀚民/泉吉) ---------- */
.settlement-box { margin-top: 20px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 16px; }
/* 標題「結帳」跟需給文案同一排，文案用 spacer 撐到最右邊 */
.settlement-header-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.settlement-title { margin: 0; font-size: 14px; font-weight: 700; }
.settlement-summary { font-size: 14px; margin: 0; }
.settlement-summary strong { color: #a0592f; }
.settlement-table { margin-top: 8px; }
.settlement-row-settled { opacity: 0.5; }
.settlement-row-settled td { text-decoration: line-through; }
.settlement-row-settled .col-check { text-decoration: none; }

/* ---------- 訂單卡片 ---------- */
.orders-toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.orders-toolbar-dates { margin-bottom: 10px; }
.order-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.order-card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #faf6f2; border-bottom: 1px solid #eee; flex-wrap: wrap; gap: 8px; }
.order-card-left { display: flex; align-items: center; gap: 10px; }
.order-select-checkbox { width: 16px; height: 16px; cursor: pointer; }
.order-toggle-btn { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.order-edit-btn { width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.order-card-headline { display: flex; flex-direction: column; gap: 2px; }
.order-card-headline-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.order-card-time { font-size: 13px; color: #555; }
.order-card-shop { font-weight: 700; font-size: 15px; color: #111; }
.order-card-orderer-text { font-size: 12px; color: #888; }
.order-card-note { font-size: 12px; color: #888; }
.order-card-amounts { display: flex; gap: 14px; font-size: 13px; align-items: center; }
.order-card-amounts .unpaid { color: #c0392b; font-weight: 600; }
.order-card-amounts .paid { color: #2e8b57; font-weight: 600; }
/* 摺疊時(預設狀態)整個標題列以下(品項表格含表頭、新增一列)都收起來，只留標題列本身 */
.order-card.collapsed .order-card-body { display: none; }
.order-items-table { width: 100%; border-collapse: collapse; }
.order-items-table th, .order-items-table td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.order-items-table th { color: #888; font-weight: 500; font-size: 12px; }
/* 訂單內容(展開後的品項表格)「對應人員」欄置中 */
.order-items-table .col-person { text-align: center; }
.order-items-table tr.paid-row { background: #f4faf6; }
.order-items-table tr.paid-row td { color: #2e8b57; }
.paid-checkbox { width: 18px; height: 18px; cursor: pointer; }
.row-ops { display: flex; gap: 4px; }
.row-ops button { padding: 2px 6px; font-size: 11px; }
.order-card-footer { padding: 8px 16px; }

/* ---------- 訂單管理手機版 ----------
   跟訂單統計手機版同一套斷點/做法：桌面版清單(#ordersList，含批量勾選/⚙編輯訂單)跟手機
   版清單(#ordersMobileList，卡片標題資訊完全一樣，只是拿掉批量勾選/⚙/品項表格的備註欄)
   永遠都畫，只靠 CSS 依斷點決定哪一份顯示；「訂購人▾」篩選 popover／清除／匯入(mhtml)／
   全部展開摺疊都是同一顆按鈕桌面手機共用，不用另外做手機版本，所以這裡的手機斷點規則
   只需要：(1)隱藏桌面專屬的元件(.orders-desktop-only：日期輸入框/手動新增訂單/批量刪除
   工具列/桌面版清單)；(2)把月份文字按鈕換成顯示狀態、撐滿剩下的寬度；(3)顯示手機版清單
   容器。手動新增訂單／訂單整筆編輯／批量刪除這三項功能 v1 先維持桌面版才能用。 */
#ordersMobileMonthBtn { display: none; }
#ordersMobileList { display: none; }
@media (max-width: 640px) {
  .orders-desktop-only { display: none !important; }
  #ordersMobileMonthBtn { display: inline-block; flex: 1; min-width: 0; text-align: center; }
  #ordersMobileList { display: block; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
  #ordersMobileList .order-card { border: none; border-radius: 0; border-bottom: 1px solid #eee; margin-bottom: 0; }
  #ordersMobileList .order-card:last-child { border-bottom: none; }
}

/* ---------- modal（沿用 shift-scheduler 的樣式）---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: 10px; padding: 20px 24px; min-width: 320px; max-width: 90vw; max-height: 88vh; overflow-y: auto; }
.modal-wide { min-width: 700px; }
/* 手機斷點下 min-width:700px 會比 90vw 還寬，變成撐破螢幕、內容被裁掉、水平捲動——匯入
   訂單／編輯訂單／手動新增訂單這三個 modal 都是 .modal-wide，手機版「匯入訂單(mhtml)」
   要能用，這裡必須蓋掉桌面版的固定寬度，改成跟一般 .modal 一樣的 90vw 上限。 */
@media (max-width: 640px) {
  .modal-wide { min-width: 0; width: 90vw; }
}
.modal h3 { margin-top: 0; }
.modal label { display: block; margin: 10px 0 4px; font-size: 13px; color: #555; }
.modal input[type=text], .modal input[type=number], .modal input[type=password], .modal input[type=date], .modal select, .modal textarea { width: 100%; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
/* 用 .modal-actions .modal-actions-orderer(兩個 class)故意墊高優先度，蓋過 .modal label
   (class+元素)的 display:block／margin，否則「訂購人」文字跟下拉選單會被那條規則強制
   拆成上下兩行；select 寬度也要在這裡蓋掉 .modal select 的 width:100%，不然選單會撐滿
   一整行，一樣會被擠到訂購人文字下面。 */
.modal-actions .modal-actions-orderer { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 4px 0 0; }
.modal-actions .modal-actions-orderer select { width: auto; }
.spacer { flex: 1; }
.checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* flex-wrap 故意用 nowrap：訂購店家／對應店名／訂單日期時間／品項/訂單總額這四欄一定要
   擠在同一排，不能因為視窗較窄就換行變兩排。 */
.import-meta-row { display: flex; gap: 12px; flex-wrap: nowrap; }
.import-meta-row label { flex: 1; min-width: 0; }
/* 訂購店家／對應店名／訂單日期時間／品項/訂單總額，四欄等寬(各約 1/4)排成一排，跟底下
   品項表格的訂購名稱/對應人員欄用同一組 class(col-shop-raw/col-shop-match)對齊直向格線。 */
.import-meta-row .col-shop-raw,
.import-meta-row .col-shop-match,
.import-meta-row .col-time,
.import-meta-row .col-total { flex: 1 1 25%; min-width: 0; }
/* 「品項/訂單總額」「訂單總額（自動加總）」置中對齊。 */
.import-meta-row .col-total input { text-align: center; }
/* 金額輸入框在左邊補一個「$」符號、數字本身靠右對齊，輸入邏輯還是純數字不受影響。 */
.amount-input-wrap { display: flex; align-items: center; gap: 2px; width: 100%; color: #555; }
.amount-input-wrap input { text-align: right; }
.order-note-row { display: block; margin-top: 10px; font-size: 13px; }
.order-note-row input { width: 100%; margin-top: 4px; }
/* 店家欄位比照人員列，常駐顯示原始稱呼文字＋已對應/未對應徽章(沿用 .match-badge 樣式) */
.import-shop-match-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #555; min-height: 16px; margin-bottom: 2px; }
.import-shop-raw { font-weight: 600; color: #222; }
/* 「訂單總金額」跟「品項總金額」核對結果：相符綠框、不符紅框 */
#importTotalCompare.total-match, #orderEditTotalAmount.total-match { border-color: #2e8b57; background: #eafaf1; color: #2e8b57; font-weight: 600; }
#importTotalCompare.total-mismatch, #orderEditTotalAmount.total-mismatch { border-color: #c0392b; background: #fdecea; color: #c0392b; font-weight: 600; }
/* 編輯訂單的「品項/訂單總額」：唯讀對帳欄撐滿，右邊擺一顆 ⚙ 展開底下的訂單總額輸入框 */
.order-edit-total-row { display: flex; align-items: center; gap: 4px; }
.order-edit-total-row #orderEditTotalAmount { flex: 1; min-width: 0; }
.order-edit-total-row .row-op-btn { flex: 0 0 auto; }
.order-edit-total-override { margin-top: 4px; }
/* overflow-x:auto 是給批次清單表格(.batch-list-table，6 欄且沒有做卡片式響應)在窄螢幕
   下的退路——多檔案匯入在手機上是少見情境(手機版預設走單檔直達，見 orders.js 的
   singleFileImportMode)，這裡不特別做卡片化，只確保欄位擠不下時可以橫向捲動、不會把
   版面撐壞。品項表格(.preview-table-fixed)在手機斷點已經改成卡片版面，不會觸發橫向
   捲動。 */
.preview-table-scroll { max-height: 40vh; overflow-y: auto; overflow-x: auto; margin-top: 10px; border: 1px solid #eee; border-radius: 6px; }
.preview-table { width: 100%; border-collapse: collapse; }
.preview-table th, .preview-table td { padding: 6px 8px; font-size: 12px; border-bottom: 1px solid #f0f0f0; }
.preview-table th { color: #888; font-weight: 500; position: sticky; top: 0; background: #fff; }
.preview-table input, .preview-table select { width: 100%; font-size: 12px; padding: 4px 6px; }
/* 匯入訂單／編輯訂單專用：訂購名稱 1/8、對應人員 1/4、品項 1/4、金額 1/8、備註 1/4，
   固定寬度用 table-layout: fixed 讓 th 上設的百分比對整張表生效(手動新增訂單的表格沒有
   這個 class，維持原本排版不受影響)。 */
.preview-table-fixed { table-layout: fixed; }
.preview-table-fixed th.col-shop-raw, .preview-table-fixed th.col-amount { width: 12.5%; }
.preview-table-fixed th.col-shop-match, .preview-table-fixed th.col-item-text, .preview-table-fixed th.col-note { width: 25%; }
/* 「對應人員」欄置中(只有匯入/編輯訂單要置中，手動新增訂單的表格是 .manual-preview-fixed
   不會被這條選到)。td 沒有掛 col-shop-match 這個 class(只有 th 有)，用 nth-child(3) 挑
   同一欄的 td——第 1 欄是 ✕ 刪除列按鈕、第 2 欄是訂購名稱，「對應人員」排第 3 欄。 */
.preview-table-fixed th.col-shop-match { text-align: center; }
.preview-table-fixed tbody td:nth-child(3) select,
.preview-table-fixed tbody td:nth-child(3) input { text-align: center; }
/* 手動新增訂單專用：欄位組成現在跟匯入/編輯訂單一樣了（訂購名稱也可以自己填），所以
   寬度比例也比照 .preview-table-fixed：訂購名稱 1/8、金額 1/8，其餘三欄各 1/4。 */
.manual-preview-fixed { table-layout: fixed; }
.manual-preview-fixed th.col-shop-raw, .manual-preview-fixed th.col-amount { width: 12.5%; }
.manual-preview-fixed th.col-shop-match, .manual-preview-fixed th.col-item-text,
.manual-preview-fixed th.col-note { width: 25%; }
.warning-box { background: #fff8e6; border: 1px solid #f3d68a; color: #8a6d00; border-radius: 6px; padding: 8px 12px; font-size: 12px; margin-top: 10px; }
.warning-box p { margin: 2px 0; }

/* 訂購人(瀚民/泉吉)＋全部展開/摺疊那一排(見 index.html #importStepPreview)。 */
.import-orderer-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.import-orderer-row .modal-actions-orderer { margin: 0; }
/* 手機斷點才顯示的元件通用 class(目前只有匯入訂單「全部展開/摺疊」在用)：桌面斷點下
   這些功能沒有對應的視覺效果(品項表格還是一般表格，不是可摺疊卡片)，所以直接隱藏，
   跟 .orders-desktop-only(訂單管理列表工具列)是同一種概念，方向相反。 */
.import-mobile-only { display: none; }

/* ---------- 匯入訂單手機版：品項表格(#importPreviewBody 所在的 .preview-table-fixed)
   在手機斷點下改成一張卡片一列，不再是橫向表格。渲染邏輯完全不變(還是
   renderOrderRowTr 產生同樣的 <tr>/<td>)，純粶用 CSS 把 tr 變成 flex 容器、td 依 order
   重新排列：
     [X]刪除／展開箭頭(第1欄) → 訂購名稱(第2欄)＋對應人員(第3欄)排在同一行；
     金額(第5欄)／品項(第4欄)／備註(第6欄) 用 flex-basis:100% 各自強制換行。
   每一列預設收在 tr.collapsed(見 renderOrderRowTr)，摺疊時品項/備註兩欄額外用
   display:none 藏起來(收合後只看名稱/對應人員/金額)；點展開箭頭(.order-row-collapse-btn，
   平常隱藏，只在這個斷點顯示)拿掉 collapsed 就會補上品項/備註兩欄。
   訂購店家／對應店名／訂單日期時間／品項總額(.import-meta-row)這四欄桌面版故意
   flex-wrap:nowrap 擠在一排，手機斷點改成 wrap 讓每欄各自佔滿一行、比較好點按。 ---------- */
.order-row-collapse-btn { display: none; }
@media (max-width: 640px) {
  .import-mobile-only { display: inline-flex; }
  .import-meta-row { flex-wrap: wrap; }
  .import-meta-row .col-shop-raw,
  .import-meta-row .col-shop-match,
  .import-meta-row .col-time,
  .import-meta-row .col-total { flex: 1 1 100%; }

  .preview-table-fixed thead { display: none; }
  .preview-table-fixed, .preview-table-fixed tbody { display: block; width: 100%; }
  .preview-table-fixed tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    padding: 8px 4px; border-bottom: 1px solid #eee;
  }
  .preview-table-fixed tbody tr:last-child { border-bottom: none; }
  .preview-table-fixed tbody td { display: block; width: auto; padding: 2px 4px; border-bottom: none; }
  .preview-table-fixed tbody td:nth-child(1) { order: 1; flex: 0 0 auto; }
  .preview-table-fixed tbody td:nth-child(2) { order: 2; flex: 1 1 auto; min-width: 0; }
  /* 「名稱/對應：」文字提示，對應示意圖每一列開頭的「名稱/對應：{rawName} [人員▾]」。 */
  .preview-table-fixed tbody td:nth-child(2)::before { content: '名稱/對應：'; font-size: 12px; color: #888; }
  .preview-table-fixed tbody td:nth-child(3) { order: 3; flex: 0 0 auto; max-width: 60%; }
  /* 金額／品項／備註各自強制換行獨佔一整行(flex-basis:100%)，順序：金額→品項→備註，
     對應示意圖「金額：」在展開箭頭那一行下面、「品項：」再下面、「備註：」最後。 */
  .preview-table-fixed tbody td:nth-child(5) { order: 4; flex: 1 0 100%; }
  .preview-table-fixed tbody td:nth-child(4) { order: 5; flex: 1 0 100%; }
  .preview-table-fixed tbody td:nth-child(6) { order: 6; flex: 1 0 100%; }
  /* 摺疊狀態(預設)：品項/備註兩欄整個藏起來，只留名稱/對應人員/金額。 */
  .preview-table-fixed tbody tr.collapsed td:nth-child(4),
  .preview-table-fixed tbody tr.collapsed td:nth-child(6) { display: none; }
  /* 「金額：」「品項：」「備註：」文字提示(桌面版靠表頭 th 顯示欄名，這裡表頭整個藏起來，
     改用 ::before 偽元素在每個欄位前面補一個文字標籤)。名稱/對應人員兩欄本身已經有夠
     清楚的內容(唯讀文字/下拉選單)，不需要額外標籤。 */
  .preview-table-fixed tbody td:nth-child(5)::before { content: '金額：'; font-size: 12px; color: #888; }
  .preview-table-fixed tbody td:nth-child(4)::before { content: '品項：'; display: block; font-size: 12px; color: #888; }
  .preview-table-fixed tbody td:nth-child(6)::before { content: '備註：'; display: block; font-size: 12px; color: #888; }
  .preview-table-fixed tbody td:nth-child(5) .amount-input-wrap { display: inline-flex; width: auto; }
  .preview-table-fixed tbody td:nth-child(5) .amount-input-wrap input { width: 90px; }
  /* [X]刪除／展開箭頭兩顆按鈕直向排列，跟訂單管理手機版卡片標題列的箭頭按鈕同一種尺寸。 */
  .row-ops { flex-direction: row; }
  .order-row-collapse-btn {
    display: inline-flex; width: 24px; height: 24px; padding: 0; align-items: center;
    justify-content: center; font-size: 13px; line-height: 1;
  }
  /* 桌面版「對應人員」欄置中對齊(見上面 nth-child(3) 那條規則)在這個斷點沒有意義(改成
     直向堆疊的卡片版面)，蓋掉那條規則改回正常靠左。 */
  .preview-table-fixed tbody td:nth-child(3) select,
  .preview-table-fixed tbody td:nth-child(3) input { text-align: left; }
}
/* 匯入當時的金額明細：名稱靠左、金額靠右逐行列出，比照原始訂單頁面的版面 */
.money-breakdown-title { font-weight: 600; margin: 6px 0 2px; }
.money-breakdown-row { display: flex; justify-content: space-between; gap: 12px; }
.money-breakdown-row.is-total { border-top: 1px solid #e6d09a; margin-top: 3px; padding-top: 3px; font-weight: 600; }
.money-breakdown-row .mb-value { white-space: nowrap; }
/* 「對應人員」下拉＋「記住名字」勾選共用同一欄：下拉吃滿剩餘寬度，勾選框固定大小貼在
   右邊，不獨立成欄、也不顯示文字(靠 title 提示)。checkbox 的 width 要蓋掉 .preview-table
   input/.modal input 那種「input 一律撐滿寬度」的通用規則，不然勾選框會被拉成一整條。 */
.person-select-row { display: flex; align-items: center; gap: 4px; }
.person-select-row select { flex: 1; min-width: 0; }
.person-select-row input[type="checkbox"] { flex: 0 0 auto; width: 16px; margin: 0; }
.match-badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.match-badge.matched { background: #eafaf1; color: #2e8b57; }
.match-badge.unmatched { background: #fdecea; color: #c0392b; }

.add-row-btn { margin-top: 8px; }

/* 批量匯入摘要清單：每一列代表一個檔案的解析結果，點一列可以開編輯畫面(有解析失敗訊息
   的檔案不能點，遊標維持預設)；「品項/訂單總額」欄沿用跟 #importTotalCompare 一樣的
   紅框/綠框比對配色，但這裡是表格儲存格，用 class 選就好，不用綁定特定 id。 */
.batch-list-table td.total-match { color: #2e8b57; font-weight: 600; }
.batch-list-table td.total-mismatch { color: #c0392b; font-weight: 600; }
.batch-list-row-clickable { cursor: pointer; }
.batch-list-row-clickable:hover { background: #f7f9fc; }

/* ---------- 手機版訂單統計（登入/未登入共用同一套版面）----------
   桌面版完全不受這個區塊影響：下面的元素平常都是 display:none，只有螢幕窄於斷點才會
   顯示，桌面版原本的 .stats-toolbar / #statsPivotWrap 樞紐表維持原樣不動。
   以前這裡多綁了一個 body.guest-mode 條件(手機版只給訪客看、管理員一律看桌面版樞紐表)，
   現在管理員在手機上也走同一套簡化版面，那個條件就拿掉了；管理員多出來的功能是訂單列
   上可以點的已結/未結徽章，那是 JS 依 data.isAdmin 決定要不要掛，不靠 CSS 區分。
   「結帳」(組間結算)是桌面版專屬功能，手機版一律隱藏。 */
.stats-mobile-toolbar, .stats-mobile-summary, .stats-mobile-list-header, .stats-mobile-list { display: none; }
@media (max-width: 640px) {
  .stats-toolbar, #statsPivotWrap, #settlementWrap { display: none; }
  .stats-mobile-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
  .stats-mobile-toolbar > .stats-mobile-month-group,
  .stats-mobile-toolbar > select { flex: 1 1 50%; min-width: 0; }
  .stats-mobile-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .stats-mobile-list-header:not(.hidden) { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
  .stats-mobile-list { display: block; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
}
/* 月份文字＋左右平移箭頭：箭頭固定寬度，中間的月份文字撐滿剩下的空間並置中，整組
   跟旁邊姓名下拉各佔一半寬度(見上面 .stats-mobile-toolbar > * 各 50%)。 */
.stats-mobile-month-group { display: flex; align-items: center; gap: 4px; }
.stats-mobile-month-group .month-shift-btn { flex: 0 0 auto; }
.stats-mobile-month-group #statsMobileMonthBtn { flex: 1; min-width: 0; text-align: center; }
.stats-mobile-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-mobile-summary-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; background: #fff; width: 100%; text-align: left;
}
.stats-mobile-summary-card.active.unpaid { border: 2px solid #c0392b; }
.stats-mobile-summary-card.active.paid { border: 2px solid #2e8b57; }
.stats-mobile-summary-total { background: #faf6f2; }
.stats-mobile-summary-total.active { border: 2px solid #a0592f; }
/* 累積未結：跟總計/已結/未結的口徑不同(累積到目前區間的「到」為止、不看「從」的全部
   歷史未結)，用跟其他三張都不一樣的色調(偏紫)標示「這張的資料範圍跟另外三張不一樣」，
   點下去一樣是換掉下面的清單，只是資料來源要多打一次 API(見 showMobileCumulativeList)。 */
.stats-mobile-summary-cumulative { background: #f5f0fa; }
.stats-mobile-summary-cumulative.active { border: 2px solid #7a4fa3; }
.stats-mobile-summary-label { font-size: 12px; color: #888; }
.stats-mobile-summary-value { font-size: 18px; font-weight: 700; }
/* 清單開頭那一列：左邊日期排序，右邊依序是「批量已結/未結」跟「全部展開/摺疊」，
   中間用 .spacer 撐開。三顆按鈕字級/內距一致，看起來是同一組工具。 */
.stats-mobile-list-header button { font-size: 12px; padding: 5px 10px; }
/* 批量已結/未結：顏色用「按下去會變成的那個狀態」的色系——要補成已結就用綠色，要反向改
   回未結就用紅色，跟訂單列的已結/未結徽章同一套配色，一眼看得出這顆是會改資料的。
   選擇器多帶一層 .stats-mobile-list-header 提高優先度，蓋掉上面那條通用的按鈕樣式。 */
.stats-mobile-list-header .stats-mobile-batch-badge.to-paid { border-color: #2e8b57; background: #eafaf1; color: #2e8b57; font-weight: 600; }
.stats-mobile-list-header .stats-mobile-batch-badge.to-paid:hover { background: #d8f5e6; }
.stats-mobile-list-header .stats-mobile-batch-badge.to-unpaid { border-color: #c0392b; background: #fdecea; color: #c0392b; font-weight: 600; }
.stats-mobile-list-header .stats-mobile-batch-badge.to-unpaid:hover { background: #fbdbd7; }
.stats-mobile-list-header .stats-mobile-batch-badge.busy { opacity: 0.5; pointer-events: none; }

/* 一筆訂單＝可點的標題列(.stats-mobile-order-row)＋展開後才出現的明細
   (.stats-mobile-order-detail)。分隔線畫在外層 .stats-mobile-order 上，這樣展開的明細
   會跟自己的標題列包在同一個區塊裡，不會被誤看成下一筆訂單的內容。 */
.stats-mobile-order { border-bottom: 1px solid #eee; }
.stats-mobile-order:last-child { border-bottom: none; }
.stats-mobile-order.expanded { background: #fcfbfa; }
.stats-mobile-order-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.stats-mobile-order-row:hover { background: #f7f9fc; }
/* 中間這塊(日期店名/訂購人)吃掉所有剩餘寬度，把金額跟徽章推到最右邊；min-width:0 是
   為了讓店名太長時能正常截斷、而不是把右邊的金額擠出去。 */
.stats-mobile-order-main { flex: 1; min-width: 0; }
.stats-mobile-order-shop { font-size: 13px; font-weight: 600; }
.stats-mobile-order-orderer { font-size: 11px; color: #888; }
.stats-mobile-order-amount { font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.stats-mobile-order-badge { font-size: 11px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.stats-mobile-order-badge.paid { background: #eafaf1; color: #2e8b57; }
.stats-mobile-order-badge.unpaid { background: #fdecea; color: #c0392b; }
.stats-mobile-order-badge.partial { background: #fff8e6; color: #8a6d00; }
/* 管理員才點得動的徽章：加個邊框跟手指游標提示「這顆可以按」，送出中(.busy)時降低
   透明度並擋掉重複點擊。 */
.stats-mobile-order-badge.clickable { border: 1px solid currentColor; cursor: pointer; }
.stats-mobile-order-badge.busy { opacity: 0.5; pointer-events: none; }
/* 展開箭頭在最前面、固定寬度，展開/收起時兩種符號寬度不同也不會讓後面的文字跳動。 */
.stats-mobile-order-chevron { color: #999; font-style: normal; flex: 0 0 14px; text-align: center; font-size: 12px; }

/* 展開後的明細表格：訂購名稱／品項／金額，縮排一點跟上面的標題列區分開來。 */
.stats-mobile-order-detail { padding: 0 12px 10px 26px; }
.stats-mobile-order-detail.hidden { display: none; }
.stats-mobile-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stats-mobile-detail-table th { text-align: left; color: #888; font-weight: 600; padding: 4px 6px; border-bottom: 1px solid #eee; }
.stats-mobile-detail-table td { padding: 4px 6px; border-bottom: 1px solid #f4f4f4; }
.stats-mobile-detail-table tr:last-child td { border-bottom: none; }
.stats-mobile-detail-table .col-amount { text-align: right; white-space: nowrap; }

/* ---------- 手機版點月份按鈕開的年度月份選擇器 modal ---------- */
.month-picker-year-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.month-picker-year-row span { font-size: 15px; font-weight: 700; }
.month-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.month-picker-grid button.selected { background: #b26445; color: #fff; border-color: #a0592f; }