/* 報表頁「點數字卡看明細」(public/report-drill.js;伺服器 server/routes/stats-detail.js)
 * 獨立成檔,只用 .rd- 開頭的 class,不動 app.css。商米舊 WebView 的守則同 app.css:
 * 橫排用 margin 隔開、不靠 flex gap;不用 inset、:has()、:is()、min()、clamp();env() 前面先放一行沒有 env() 的寫法。 */

/* ---------- 報表頁上「點得下去」的卡片 / chip / 列 / 長條 ---------- */
.rd-card { cursor: pointer; transition: border-color .12s, box-shadow .12s, background-color .12s; -webkit-tap-highlight-color: rgba(232, 89, 12, .15); }
.rd-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.rd-card:active { background: #fff3e8; }
.rd-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi.rd-card, .src-cell.rd-card { position: relative; }
.rd-hint { display: block; align-self: flex-end; margin-top: 6px; text-align: right; font-size: 12px; font-weight: 700; color: var(--accent); line-height: 1.3; white-space: nowrap; }
.rd-arrow { color: var(--accent); font-weight: 800; }
/* chip 與長條:觸控區至少 44 高 / 44 寬(原本 chip 約 34 高、長條 42 寬) */
.src-chip.rd-card { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
.src-chip.rd-card .rd-arrow { margin-left: 4px; }
.day-bar.rd-card { min-width: 44px; flex-basis: 44px; border-radius: 8px; }
.day-bar.rd-card:hover .bar { filter: brightness(1.1); }
/* 表格列:整列點得到;第一格(品名 / 活動名)裡放一顆撐滿的按鈕給鍵盤與讀屏用 */
.rd-trow { cursor: pointer; }
.rd-trow:hover td { background: #fff7ed; }
.rd-trow:active td { background: #ffe8d1; }
.rd-rowbtn { display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rd-rowbtn:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 關帳結果框、現金櫃的小卡(.cd-cell):整張點得開,右下角一行「查看明細 ›」(.cd-cell span 原本是灰色小字,這裡蓋回強調色) */
.cd-cell.rd-card { position: relative; }
.close-day-result .cd-cell .rd-hint, #shift-body .cd-cell .rd-hint { margin-top: 4px; text-align: right; font-size: 12px; font-weight: 700; color: var(--accent); }
/* 行內的數字、句子(發票統計、狀態列、現金櫃最近交班):底線的連結,行高固定 22 + 上下內距各 11 = 單行剛好 44 高的觸控範圍。
 * 上下不用負的外距把範圍撐出行外:上下兩行的連結會互相蓋住、點到隔壁一行;寧可含連結的那一行長到 44 高。左右內距用負的外距抵回,字與字的間距不變 */
.rd-link { display: inline-block; margin: 0 -8px; padding: 11px 8px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; line-height: 22px; text-align: left;
  text-decoration: underline; -webkit-text-decoration-style: dotted; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; -webkit-tap-highlight-color: rgba(232, 89, 12, .15); }
.rd-link:hover { color: var(--accent); }
.rd-link:active { background: #fff3e8; }
.rd-link:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 發票管理頁頂端狀態列:每一句是一顆按鈕,句與句之間不用「・」隔開(換行時符號會掛在行尾),改用右邊多留一點空白 */
.einv-jump { margin: 0 8px 0 -8px; }

/* ---------- 明細面板:平板橫放 / 桌機從右邊滑出,手機(≤600)從底部彈出占滿 ---------- */
.rd-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 70; background: rgba(20, 24, 36, .38); }
.rd-overlay[hidden] { display: none; }
.rd-panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 71; width: 480px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--panel, #fff); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0, 0, 0, .18); outline: none;
  -webkit-animation: rdIn .18s ease-out; animation: rdIn .18s ease-out; }
.rd-panel[hidden] { display: none; }
@-webkit-keyframes rdIn { from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); } }
@keyframes rdIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@-webkit-keyframes rdUp { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } }
@keyframes rdUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .rd-panel { -webkit-animation: none; animation: none; } }
@media (max-width: 600px) {
  .rd-panel { left: 0; width: auto; border-left: 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .25); -webkit-animation: rdUp .2s ease-out; animation: rdUp .2s ease-out; }
}

.rd-head { flex: none; display: flex; align-items: flex-start; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel, #fff); }
@supports (padding-top: env(safe-area-inset-top)) { .rd-head { padding-top: calc(12px + env(safe-area-inset-top)); } }
.rd-head-main { flex: 1 1 auto; min-width: 0; }
.rd-title { margin: 0; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.rd-sub { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.rd-close { flex: none; width: 44px; min-width: 44px; height: 44px; margin: 0 0 0 8px; padding: 0; font-size: 18px; line-height: 1; }
.rd-back { min-height: 44px; margin: 0 0 6px 0; padding: 6px 12px; font-size: 14px; font-weight: 700; max-width: 100%; text-align: left; }
.rd-back[hidden] { display: none; }

.rd-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 16px 16px; }
@supports (padding-bottom: env(safe-area-inset-bottom)) { .rd-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } }

/* 核對行:明細合計 = 卡片數字(相符綠、對不上紅) */
.rd-check-ok, .rd-check-bad { display: flex; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.rd-check-ok { background: #ebfbee; border: 1px solid #b2f2bb; color: #1b6e2e; }
.rd-check-bad { background: #fff5f5; border: 1px solid #ffa8a8; color: #c92a2a; }
.rd-ck { flex: none; width: 22px; font-size: 16px; font-weight: 900; }
.rd-check-ok b, .rd-check-bad b { display: block; font-size: 15px; }
.rd-check-ok small, .rd-check-bad small { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
.rd-check-bad ul { margin: 4px 0 4px 18px; padding: 0; }
.rd-info ul { margin: 8px 0 0 18px; padding: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* 依活動分組 */
.rd-gh { margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.rd-grp { display: flex; align-items: center; width: 100%; min-height: 44px; margin: 0 0 6px; padding: 6px 12px; text-align: left; font-size: 14px; }
.rd-gl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.rd-gc { flex: none; margin-left: 8px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.rd-ga { flex: none; margin-left: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 排序 + 匯出 */
.rd-tools { display: flex; flex-wrap: wrap; align-items: center; margin: 12px 0 8px; }
.rd-tools:empty { display: none; }
.rd-sort { display: flex; align-items: center; flex: 1 1 180px; min-width: 0; margin: 0 8px 6px 0; font-size: 13.5px; color: var(--muted); }
.rd-sort > span { flex: none; margin-right: 6px; }
.rd-flt { flex: 1 1 140px; }   /* 伺服器宣告的篩選下拉(期間 / 來源 / 狀態…):窄螢幕一個一行、寬的時候並排 */
.rd-sel { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 8px; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.rd-export { flex: 0 0 auto; min-height: 44px; margin: 0 0 6px; padding: 6px 14px; font-size: 14px; white-space: nowrap; }

/* 清單:一筆一張小卡,窄螢幕也不用左右捲 */
.rd-list { list-style: none; margin: 0; padding: 0; }
.rd-item { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rd-r1 { display: flex; align-items: flex-start; justify-content: space-between; }
.rd-t { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.rd-biz { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: #b45309; }
.rd-m { flex: none; margin-left: 10px; font-size: 16px; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-r2 { margin-top: 4px; font-size: 13px; line-height: 1.5; }
.rd-kv { display: inline-block; margin: 1px 12px 1px 0; overflow-wrap: anywhere; }
.rd-kv i { font-style: normal; color: var(--muted); margin-right: 4px; }
.rd-no { font-weight: 800; }
.rd-r3 { margin-top: 3px; }
.rd-tag { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border-radius: 999px; background: #fff4e6; color: #b45309; font-size: 12px; font-weight: 700; }

.rd-strike .rd-t, .rd-strike .rd-m, .rd-strike .rd-k-storeName, .rd-strike .rd-k-no { color: #8b93a7; text-decoration: line-through; }   /* 作廢 / 取消的列:時間、金額(另外加括號)、店、取餐號劃線灰字,跟以前的表格一樣;其他文字只變灰 */
.rd-strike .rd-kv, .rd-strike .rd-tag { color: #8b93a7; }
/* 把清單卡片嵌進別的視窗(會員細節的近期訂單):不再有面板自己的捲動與邊距,跟著外面的視窗一起捲 */
.rd-list.rd-inline { margin: 6px 0 0; }
.rd-empty { padding: 28px 10px; text-align: center; color: var(--muted); font-size: 15px; }
.rd-err { margin: 12px 0; padding: 12px; border: 1px solid #ffa8a8; border-radius: 10px; background: #fff5f5; color: #c92a2a; text-align: center; font-size: 14px; line-height: 1.5; }
.rd-err p { margin: 0 0 8px; overflow-wrap: anywhere; }
.rd-retry { min-height: 44px; padding: 6px 20px; font-size: 14px; }
.rd-more { margin: 10px 0 0; text-align: center; }
.rd-loadmore { width: 100%; min-height: 44px; padding: 6px 14px; font-size: 14px; }
.rd-end { padding: 6px 0; font-size: 12.5px; color: var(--muted); }

/* ---------- 清單的一列再點進去:整列是按鈕,右邊「›」 ---------- */
.rd-item-go { padding: 0; }
.rd-go { position: relative; display: block; box-sizing: border-box; min-height: 44px; padding: 10px 34px 10px 12px; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: rgba(232, 89, 12, .15); }
.rd-go:hover { background: #fff7ed; }
.rd-go:active { background: #ffe8d1; }
.rd-go:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.rd-chev { position: absolute; right: 10px; top: 50%; margin-top: -14px; height: 28px; line-height: 28px; font-size: 26px; font-weight: 800; color: var(--accent); }
.rd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

/* ---------- 詳情(同一個面板裡切換;清單藏起來但不重畫,返回時捲動位置與筆數不變) ---------- */
.rd-listv[hidden], .rd-detail[hidden] { display: none; }
.rd-dsum { display: flex; align-items: flex-start; justify-content: space-between; padding: 12px; border: 1px solid #ffd8a8; border-radius: 12px; background: #fff9f2; }
.rd-dsum-l { flex: 1 1 auto; min-width: 0; }
.rd-st { display: inline-block; margin: 0 6px 4px 0; padding: 2px 10px; border-radius: 999px; background: #e9ecef; color: #343a40; font-size: 13px; font-weight: 800; }
.rd-st-done { background: #ebfbee; color: #1b6e2e; }
.rd-st-voided { background: #fff5f5; color: #c92a2a; }
.rd-st-pending, .rd-st-preparing, .rd-st-ready { background: #fff4e6; color: #b45309; }
.rd-dsrc { display: inline-block; margin: 0 6px 4px 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.rd-dmem { margin: 2px 0; font-size: 14px; overflow-wrap: anywhere; }
.rd-damt { flex: none; margin-left: 12px; text-align: right; }
.rd-damt small { display: block; color: var(--muted); font-size: 12px; }
.rd-damt b { display: block; color: var(--primary); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-dsec { margin: 14px 0 0; }
.rd-dsec h4 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--ink); }
.rd-dnote { margin: 0; color: var(--muted); font-size: 13px; }
/* 品項:品名 + 小計一行,口味 / 加料與「數量 × 單價」一行,備註、贈品 / 券標籤再一行 */
.rd-lines { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.rd-ln { padding: 8px 12px; border-top: 1px solid var(--line); }
.rd-ln:first-child { border-top: 0; border-radius: 10px 10px 0 0; }
.rd-ln:last-child { border-radius: 0 0 10px 10px; }
.rd-hl { background: #fff4e6; box-shadow: inset 4px 0 0 var(--primary); }
.rd-ln1, .rd-ln2 { display: flex; align-items: flex-start; justify-content: space-between; }
.rd-lnn { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.rd-lnt { flex: none; margin-left: 10px; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-ln2 { margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.rd-lno { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rd-lnq { flex: none; margin-left: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-lnnote { margin-top: 2px; color: #b45309; font-size: 12.5px; overflow-wrap: anywhere; }
.rd-lntags { margin-top: 2px; }
.rd-tag-hl { background: #e7f5ff; color: #1864ab; }
/* 各段:左邊名稱(下面小字說明)、右邊值;金額靠右、數字等寬,扣掉的金額紅字,合計粗體 */
.rd-dl { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.rd-dr { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.rd-dr:first-child { border-top: 0; }
.rd-dk { flex: 1 1 auto; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.rd-dk small { display: block; margin-top: 1px; color: #868e96; font-size: 12px; }
.rd-dv { flex: 0 1 auto; max-width: 62%; margin-left: 10px; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.rd-num .rd-dv { flex: none; max-width: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-minus .rd-dv { color: #c92a2a; }
.rd-strong .rd-dk, .rd-strong .rd-dv { color: var(--ink); font-size: 15.5px; font-weight: 900; }
/* 詳情裡可以再點進去的一行(券 → 用在哪張單、單 → 賠償券) */
.rd-dl .rd-dlink { position: relative; align-items: center; min-height: 44px; margin: 0; padding: 8px 34px 8px 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: #fff; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.rd-dl .rd-dlink:first-child { border-top: 0; }
.rd-dl .rd-dlink:hover { background: #fff7ed; }
.rd-dl .rd-dlink:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.rd-dlink .rd-dv { color: var(--accent); }
.rd-dlink .rd-chev { font-size: 22px; }
.rd-err .rd-dback { min-height: 44px; margin-left: 8px; padding: 6px 16px; font-size: 14px; }
.rd-dretry { min-height: 44px; padding: 6px 20px; font-size: 14px; }

/* ---------- 單號入口(任何帶 data-rec-ref 的按鈕 / 連結,見 report-drill.js):文字連結樣子,點了開那張單的完整明細 ---------- */
/* 觸控區 44 × 44,用負的上下邊界把多出來的高度吃掉,所以放在一行字、一排標籤裡不會把那一行撐高 */
.rec-link { display: inline-block; min-width: 44px; min-height: 44px; box-sizing: border-box; margin-top: -12px; margin-bottom: -12px; padding: 12px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent); font: inherit; font-weight: 700; text-align: center; text-decoration: underline; vertical-align: middle; cursor: pointer; -webkit-tap-highlight-color: rgba(232, 89, 12, .15); }
.rec-link:hover { background: #fff7ed; }
.rec-link:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 單張詳情標題下的「會員」那行:綁了會員就是整行按鈕(右邊「›」),沒綁就是一般灰字 */
.rd-memlink { position: relative; display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 2px 0; padding: 10px 30px 10px 0; border: 0; border-radius: 8px; background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.rd-memlink:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.rd-memlink .rd-chev { right: 4px; font-size: 22px; }
.rd-dmem-none { color: var(--muted); }
.rd-memmsg { margin: 2px 0 6px; padding: 8px 10px; border-radius: 8px; background: #fff5f5; color: #c92a2a; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }