/* receipt.css —— 收據（A4 與感熱紙）及列印樣式
   由 index.html 的 <style> 切出，**嚴格保留原有次序**。
   CSS 係層疊的：同權重的規則後寫的贏，所以四個檔案的載入次序
   必須同原本一致（base → components → receipt → screens），
   唔可以按字母或者其他規律重排。 */
/* ---------- Receipt ---------- */
/* 收據尺寸：闊 190mm（A4 210mm 減左右各 10mm 邊界）、高 120mm。
   高度固定，令每張收據的裁切位置一致；場次多過版面時由 .rb 收起，
   頁尾條款不會被推出紙外。 */
#receipt{display:none}
.rcp{width:190mm;height:120mm;max-height:120mm;background:#fff;color:#000;box-sizing:border-box;
  padding:7mm 9mm 5mm;font-family:"PingFang HK","Microsoft JhengHei","Noto Sans TC",sans-serif;
  font-size:10pt;line-height:1.45;display:flex;flex-direction:column;position:relative;overflow:hidden}
/* 頁首相片（彩色）：只在 A4 版面出現。
   感熱紙是 203dpi 單色，相片會被抖動成一團灰麻，所以不印。
   print-color-adjust:exact 是必要的 —— 否則部分瀏覽器在
   「省墨／黑白」模式下會直接略過圖像。
   備用：public/img/ 另有 receipt-header-solid.svg（向量天際線）
   及 receipt-header-line.svg（線稿），如日後想改用可直接換 src。 */
/* 頁首四欄（相片、標題、交易資料、QR）等高並排。
   --rhh 是整條頁首的高度，由最高的元素（QR，24mm）決定；
   四欄都拉到同一高度，文字欄垂直置中，頂部與底部就對得齊。
   改 QR 尺寸時只需改 --rhh，相片會跟住走。 */
.rcp .rh{--rhh:24mm;display:flex;align-items:stretch;gap:5mm;
  border-bottom:1.2pt solid #000;padding-bottom:3mm;min-height:var(--rhh)}
.rcp .rhimg{width:32mm;height:var(--rhh);object-fit:cover;border-radius:1.2mm;border:.4pt solid #999;
  flex:0 0 auto;display:block;align-self:stretch;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.rcp .rh-l{display:flex;flex-direction:column;justify-content:center}
.rcp .rh-l b{display:block;font-size:19pt;letter-spacing:.14em;line-height:1.15}
.rcp .rh-l span{display:block;font-size:9pt;letter-spacing:.18em}
.rcp .rh-l em{display:block;font-style:normal;font-size:10.5pt;margin-top:1.5mm;font-weight:700}
.rcp .rh-r{margin-left:auto;text-align:right;font-size:9.5pt;line-height:1.7;white-space:nowrap;
  display:flex;flex-direction:column;justify-content:center}
.rcp .rh-r span{color:#333;margin-right:3mm}
.rcp .rh-r b{font-variant-numeric:tabular-nums}
/* 左欄（住戶編號 + 收費資料）刻意收窄：右邊的場次表要夠位一行過印完
   球場、日期、時段，唔可以斷行。左欄印嘅嘢短，闊度用唔晒；場次表
   反而係最擠嗰個，所以多出嚟嘅位全部撥去右邊。
   改呢兩個數之前，請先睇 test/ui.test.js 嗰個場次表闊度估算。 */
.rcp .rb{display:flex;gap:6mm;padding:3mm 0;flex:1;min-height:0;overflow:hidden}
.rcp .rb-l{width:42mm;flex:0 0 auto}
.rcp .rb-r{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.rcp .idbox{border:1.5pt solid #000;border-radius:2mm;padding:2.2mm 1.5mm;text-align:center}
.rcp .idbox .lab{font-size:7pt;letter-spacing:.08em}
.rcp .idbox .id{font-size:17pt;font-weight:700;letter-spacing:.08em;line-height:1.2;
  font-family:"SF Mono",Menlo,Consolas,monospace}
.rcp .idbox .unit{font-size:8.5pt;margin-top:.8mm}
/* 訂場編號 QR：放在頁首右上角。比相片略高，頁首因而由 18mm
   增至 22mm；場次區是 flex:1，會自動吸收這 4mm，收據仍是 120mm。
   編號文字已在旁邊的頁首資料印出，故不重覆。 */
.rcp .qrtop{flex:0 0 auto;margin-left:3.5mm;display:flex;align-items:center}
.rcp .qrtop svg{width:var(--rhh);height:var(--rhh);display:block}
.rcp .rmeta{margin-top:3.5mm;font-size:9pt}
.rcp .rmeta div{display:flex;justify-content:space-between;gap:2.5mm;padding:.9mm 0}
.rcp .rmeta div span{color:#333;flex:0 0 auto}
.rcp .rmeta div b{text-align:right;min-width:0}
/* 卡號可以長達 36 個字元。左欄窄咗，寧願細字兼斷行，都好過爆出格外 */
.rcp .rmeta div b.tok{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:8pt;
  word-break:break-all;line-height:1.3}
.rcp table.rses{width:100%;border-collapse:collapse;font-size:9.5pt}
.rcp table.rses th{text-align:left;font-size:8.5pt;color:#333;border-bottom:.8pt solid #000;
  padding:0 2mm 1mm 0;font-weight:600;white-space:nowrap}
.rcp table.rses td{padding:1.6mm 2mm 1.6mm 0;border-bottom:.4pt dotted #999;vertical-align:top}
.rcp table.rses td.n{width:6mm;color:#333}
/* 球場、日期、時段一行過，唔好斷開 —— 斷咗行會令每張收據高度唔一，
   亦好難一眼睇得晒。左欄已經收窄讓位（見上面 .rb-l）。 */
.rcp table.rses td.court,.rcp table.rses td.date,.rcp table.rses td.hour{white-space:nowrap}
.rcp table.rses td.amt,.rcp table.rses th.amt{text-align:right;padding-right:0;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rcp table.rses .ref{font-size:8pt;color:#444;font-family:"SF Mono",Menlo,monospace}
/* 以改期額抵扣時，列出原本的預約 */
.rcp .rcredit{margin-top:2mm;border:.8pt dashed #000;border-radius:1.5mm;padding:1.8mm 2.5mm;font-size:8.5pt}
.rcp .rcredit .t{font-weight:700;font-size:8.5pt;margin-bottom:.6mm}
.rcp .rcredit .r{display:flex;justify-content:space-between;gap:3mm;padding:.3mm 0}
.rcp .rcredit .r .ref{font-family:"SF Mono",Menlo,monospace;font-size:8pt}
.rcp .rsum{margin-top:auto;border-top:1.2pt solid #000;padding-top:2.5mm;display:flex;
  gap:6mm;align-items:flex-end;font-size:10pt}
.rcp .rsum .cell span{display:block;font-size:8.5pt;color:#333}
.rcp .rsum .cell b{font-size:11pt;font-variant-numeric:tabular-nums}
.rcp .rsum .total{margin-left:auto;text-align:right}
.rcp .rsum .total b{font-size:17pt}
.rcp .rf{font-size:8pt;line-height:1.6;color:#222;border-top:.6pt solid #666;padding-top:2mm;
  margin-top:2mm;flex:0 0 auto;max-height:18mm;overflow:hidden}
@media print{
  body{background:#fff}
  /* .bokeh 是 position:fixed，不收起會在每一頁重覆印出來 */
  .bokeh,.toast,.modal,.offline,.upgrade{display:none !important}
  .tt{max-height:none !important;overflow:visible !important;border:none}
  .tt th{position:static}
  .main{margin-left:0 !important}
  @page{margin:10mm}

  /* 列印收據：整個系統畫面（側欄 + 主欄）一併收起，只印收據。
     注意要收 .shell，收 .topbar/.wrap 是不夠的 —— 側欄在 .shell 內、
     不在 .wrap 內，漏了它就會把選單印出來。 */
  body.print-receipt .shell{display:none !important}
  body.print-receipt #receipt{display:block !important}
  body.print-receipt .rcp{margin:0;box-shadow:none;transform:none}
  body.print-receipt .rcp-t{margin:0 auto;box-shadow:none}

  /* 列印畫面（例如全日總覽）：隱藏側欄及操作元件，保留內容 */
  body:not(.print-receipt) #receipt,
  body:not(.print-receipt) .side,
  body:not(.print-receipt) .topbar,
  body:not(.print-receipt) .steps,
  body:not(.print-receipt) .selbar,
  body:not(.print-receipt) .btn{display:none !important}
  body:not(.print-receipt) .card{box-shadow:none;border-color:#aaa}
  body:not(.print-receipt) .wrap{padding:0;max-width:none}

  /* ---------- 交易紀錄：A4 橫向，用嚟「存為 PDF」 ----------
     一行有六欄，最後嗰欄（內容）好長，直度 A4 印出嚟會擠到爆，
     所以橫度。橫向要喺 @page 度講——同收據嗰個 #printPage 一樣，
     size 唔可以 class-scoped，所以由 JS 喺列印前注入。 */
  body.print-txn .shell{display:none !important}
  body.print-txn #txnPrint{display:block !important}
  #txnPrint{color:#000;font-size:8.5pt;line-height:1.45}
  #txnPrint .ph{border-bottom:1.2pt solid #000;padding-bottom:2mm;margin-bottom:3mm}
  #txnPrint .ph b{font-size:13pt;letter-spacing:.08em}
  #txnPrint .ph .sub{font-size:8.5pt;color:#333;margin-top:1mm}
  #txnPrint table{width:100%;border-collapse:collapse}
  /* thead 喺每一頁重印一次：第二頁開始冇表頭就唔知邊欄係邊欄 */
  #txnPrint thead{display:table-header-group}
  #txnPrint th{text-align:left;font-size:8pt;border-bottom:.8pt solid #000;
    padding:1mm 2mm 1mm 0;white-space:nowrap}
  #txnPrint td{padding:.9mm 2mm .9mm 0;border-bottom:.3pt solid #bbb;vertical-align:top}
  /* 頭五欄係短嘢（時間、類別、動作、編號、住戶編號），斷開行只會令張表
     好難睇；淨係最後嗰欄「內容」先准斷行。 */
  #txnPrint td:nth-child(-n+5),
  #txnPrint th:nth-child(-n+5){white-space:nowrap}
  #txnPrint td:last-child{white-space:normal;word-break:break-word}
  /* 一行唔好俾佢一半喺上頁一半喺下頁 */
  #txnPrint tr{break-inside:avoid;page-break-inside:avoid}
  #txnPrint .mono{font-family:"SF Mono",Menlo,Consolas,monospace}
  #txnPrint .pf{margin-top:3mm;border-top:.6pt solid #666;padding-top:1.5mm;
    font-size:7.5pt;color:#333}
}
/* 平時唔顯示，淨係列印嗰陣先出（同 #receipt 一樣） */
#txnPrint{display:none}
/* ---------- 感熱紙收據（窄身直度）----------
   闊度由 --tw 決定：80mm 紙可印 72mm、58mm 紙可印 48mm。
   高度不設限（感熱紙是連續的），內容有幾長就印幾長。 */
/* 整體字級：全部子元素用 em，所以**改 --fs 一個數就會成張單一齊縮放**。
   以前逐個 rule 寫死 pt，想大細啲就要改十六處、仲要自己維持比例。
   （em 值係由原本嗰組 pt 除以當時嘅基準 8.5pt 換算返嚟，
     比例同之前一模一樣，淨係整體大咗。） */
.rcp-t{width:var(--tw,72mm);background:#fff;color:#000;box-sizing:border-box;padding:3mm 2mm 6mm;
  font-family:"PingFang HK","Microsoft JhengHei","Noto Sans TC",sans-serif;
  font-size:var(--fs,11.5pt);line-height:1.5;text-align:center}
.rcp-t .th b{display:block;font-size:1.765em;letter-spacing:.16em;line-height:1.25}
.rcp-t .th span{display:block;font-size:.824em;letter-spacing:.2em}
.rcp-t .th em{display:block;font-style:normal;font-size:1.059em;font-weight:700;margin-top:1mm}
.rcp-t hr{border:none;border-top:1px dashed #000;margin:2.5mm 0}
.rcp-t .kv{display:flex;justify-content:space-between;gap:2mm;text-align:left;font-size:1em;
  padding:.5mm 0}
.rcp-t .kv b{text-align:right;font-variant-numeric:tabular-nums}
.rcp-t .idb{border:1.2pt solid #000;border-radius:1.5mm;padding:2mm 1mm;margin:1mm 0}
.rcp-t .idb .lab{font-size:.824em;letter-spacing:.1em}
.rcp-t .idb .id{font-size:2.235em;font-weight:700;letter-spacing:.14em;line-height:1.3;
  font-family:"SF Mono",Menlo,Consolas,monospace}
.rcp-t .idb .unit{font-size:1em}
/* ---------- 場次表（日期一次 + 時間／球場／收費）----------
   舊寫法每節四行，四節就十六行，成張單過到 200mm 就會分頁，
   切刀落喺 400mm 位。而家一筆交易一個日期，日期印一次，下面用表。
   場次係收據上最要緊嘅資料，所以整體加粗。 */
/* 場次係收據上最要緊嘅資料，字級特登大過其他部分。
   ⚠ 調大之前要計過唔會爆行 —— 見 ui.test.js「場次表唔會爆行」嗰條，
     佢用實際字型量度過嘅 mm 數做算術。 */
/* 場次嘅 em 特登唔跟住基準走：基準由 10 → 11.5pt 嗰陣，場次已經係
   啱嘅大細（13 / 12.5pt），所以 em 調細返，令絕對字級維持唔變。 */
.rcp-t .sdate{font-weight:700;font-size:1.13em;text-align:left;padding:1mm 0 .5mm}
.rcp-t .stb{font-size:1.087em;font-weight:700;line-height:1.4}
.rcp-t .stb .hd,.rcp-t .stb .rw{display:flex;gap:1.5mm;text-align:left}
/* 欄序：球場 ｜ 時間 ｜ 收費。
   球場名長度固定（「1 號球場」），俾佢一個固定闊度就對得齊；
   時間最闊（07:00 – 08:00）所以食晒剩低嘅位；
   收費靠右對齊、用等寬數字，幾行之間先排得齊。 */
.rcp-t .stb span:nth-child(1){flex:0 0 19mm}
.rcp-t .stb span:nth-child(2){flex:1 1 auto}
.rcp-t .stb span:nth-child(3){flex:0 0 13mm;text-align:right;font-variant-numeric:tabular-nums}
/* 表頭係參考資料，唔好搶過場次本身 */
.rcp-t .stb .hd{font-weight:400;font-size:.833em;color:#333;
  border-bottom:1px dotted #999;padding-bottom:.3mm;margin-bottom:.5mm}
.rcp-t .stb .rw{padding:.4mm 0}

/* 註：舊嘅逐節版面（每節四行）已經由上面嘅場次表取代，樣式一併清走。
   嗰陣用「每節加底線、再靠 last-of-type 取消最後一條」，但 last-of-type
   係按元素類型（div）計而唔係按 class，最後一節後面仲有其他 div，
   所以嗰條取消規則由頭到尾冇生效過，同下面嘅 <hr> 疊成兩條線。
   而家分隔改為表頭下面一條點線，冇呢個問題。 */
.rcp-t .cred{text-align:left;border:.8pt dashed #000;border-radius:1.2mm;padding:1.5mm 2mm;margin:1.5mm 0;
  font-size:.941em;line-height:1.45}
.rcp-t .cred .t{font-weight:700;text-align:center;margin-bottom:.8mm}
.rcp-t .cred .ref{font-family:"SF Mono",Menlo,monospace;font-size:1.062em;font-weight:700}
.rcp-t .cred .r{display:flex;justify-content:space-between;gap:2mm}
/* 感熱紙冇 QR 區（編號喺上面 kv 已經印咗），所以呢度冇 .rcp-t .qrc 樣式 */
.rcp-t .tot{display:flex;justify-content:space-between;align-items:baseline;gap:2mm;
  font-size:1.118em;font-weight:700;padding:1mm 0}
.rcp-t .tot b{font-size:1.474em;font-variant-numeric:tabular-nums}
.rcp-t .ft{font-size:.824em;line-height:1.55;text-align:center;margin-top:1mm}
/* 「多謝惠顧」同上面備註之間唔使留咁大空 —— 感熱紙每 mm 都係紙。 */
.rcp-t .end{font-size:.824em;letter-spacing:.3em;margin-top:1mm}
/* 註：收據尾部本來有一個「送紙區」（幾行空白 + 線框），已經完全拆走。
   空白會俾感熱紙驅動程式當頁尾空白剪走，改放有墨嘅嘢又會出現喺收據上，
   而收據一分頁個框仲會俾切喺中間 —— 喺版面度扮送紙，永遠要同驅動程式
   嘅省紙同分頁鬥。送紙交返俾驅動程式或者 ESC/POS。 */
/* 一節嘅資料唔應該俾分頁斬開（日期喺上一頁、時間喺下一頁）。 */
/* 唔好俾分頁斬開：一行場次嘅時間同收費唔可以拆去兩頁，
   日期同佢下面第一行亦應該黐住。 */
.rcp-t .stb .rw,.rcp-t .idb,.rcp-t .tot{break-inside:avoid;page-break-inside:avoid}
.rcp-t .sdate{break-after:avoid;page-break-after:avoid}

/* 畫面預覽 */
.prevw{background:#e6d9bd;padding:14px;border-radius:12px;display:flex;justify-content:center;overflow:auto}
#rcpPreview{position:relative;flex:0 0 auto}
/* A4：190 × 120mm 等比例縮至 62% */
#rcpPreview.a4{width:117.8mm;height:74.4mm}
#rcpPreview.a4 .rcp{position:absolute;top:0;left:0;transform:scale(.62);transform-origin:top left;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
/* 感熱紙：本身夠窄，用原尺寸顯示 */
#rcpPreview.thermal80,#rcpPreview.thermal58{width:auto}
#rcpPreview .rcp-t{box-shadow:0 2px 10px rgba(0,0,0,.18)}