/* =====================================================================
   รอบ 45: รูปแบบใบเสร็จเลือกตอนพิมพ์ (Components/ReceiptPrintBar.razor + wwwroot/print.js)
   - html[data-rfmt]  = รูปแบบที่เครื่องนี้เลือกอยู่ (slip80 | slip58 | a4 | a4img) → ปุ่มที่เลือก + ตัวอย่างบนจอ (.rfmt-preview)
   - html[data-paper] = ม้วนกระดาษของเครื่อง "58" | "80" → สลิปทุกชนิดพิมพ์ 58mm เมื่อเป็น "58"
     (ใบเสร็จ, ใบรายการบิลค้าง, ใบรับชำระหนี้ dbt-slip, ใบสำคัญจ่าย pv-slip) — 80mm ใช้กฎเดิมใน app.css ไม่เปลี่ยน
   - html[data-print="a4"][data-print-img] = A4 + รูปสินค้า (กฎ A4 เดิมใน pos2.css ยังใช้ทั้งหมด)
   ไฟล์นี้ลิงก์หลัง pos2/credit/payables/logo ใน App.razor เพื่อทับกฎเดิมได้
   ===================================================================== */

/* ---------- แถบเลือกรูปแบบ + ปุ่มพิมพ์ ---------- */
.rfmt { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rfmt-label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.rfmt-seg {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--chip);
}
.rfmt-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 50px;
  padding: 5px 2px; border: 0; border-radius: 11px; background: none; color: var(--ink);
  font: inherit; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rfmt-opt strong { font-size: .95rem; font-weight: 700; }
.rfmt-opt small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--muted); }
.rfmt-opt:hover { background: rgba(127,127,127,.1); }
.rfmt-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
html[data-rfmt="slip80"] .rfmt-opt[data-fmt="slip80"],
html[data-rfmt="slip58"] .rfmt-opt[data-fmt="slip58"],
html[data-rfmt="a4"] .rfmt-opt[data-fmt="a4"],
html[data-rfmt="a4img"] .rfmt-opt[data-fmt="a4img"] {
  background: var(--surface); color: var(--brand-strong);
  box-shadow: inset 0 0 0 1.5px var(--brand), 0 1px 3px rgba(0,0,0,.12);
}
html[data-rfmt="slip80"] .rfmt-opt[data-fmt="slip80"] small,
html[data-rfmt="slip58"] .rfmt-opt[data-fmt="slip58"] small,
html[data-rfmt="a4"] .rfmt-opt[data-fmt="a4"] small,
html[data-rfmt="a4img"] .rfmt-opt[data-fmt="a4img"] small { color: var(--brand-strong); }

.rfmt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rfmt-actions > .btn { min-height: 48px; }
.rfmt-print {
  flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 1rem; font-weight: 700;
}
.rfmt-ico { flex: none; }
.rfmt-cur { display: none; font-weight: 500; opacity: .9; white-space: nowrap; }
.rfmt-cur::before { content: "·"; margin-right: 6px; }
html[data-rfmt="slip80"] .rfmt-cur[data-fmt="slip80"],
html[data-rfmt="slip58"] .rfmt-cur[data-fmt="slip58"],
html[data-rfmt="a4"] .rfmt-cur[data-fmt="a4"],
html[data-rfmt="a4img"] .rfmt-cur[data-fmt="a4img"] { display: inline; }
.rfmt-actions > .btn:not(.rfmt-print) { flex: 0 1 auto; }
@media (max-width: 420px) {
  .rfmt-actions > .btn:not(.rfmt-print) { flex: 1 1 100%; }
}

/* หน้าพิมพ์ซ้ำ /receipt: แถบกว้างเท่ากระดาษตัวอย่าง */
.reprint-bar { width: min(380px, 100%); }

/* ---------- คอลัมน์รูปสินค้า (A4 + รูป) ซ่อนไว้ก่อนเสมอ ---------- */
.rimg-only { display: none; }

/* ---------- ตัวอย่างบนจอตามรูปแบบที่เลือก ---------- */
@media screen {
  /* ป๊อปอัปใบเสร็จในหน้าขาย: ยาว/กว้างแล้วเลื่อนในกรอบ */
  .modal.rfmt-preview { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }

  html[data-rfmt="slip58"] .rfmt-preview { width: min(300px, 100%); font-size: .92rem; }
  html[data-rfmt="slip58"] .reprint-bar { width: min(300px, 100%); }
  html[data-rfmt="slip58"] .rfmt-preview .rfmt-seg { margin: 0 -8px; }
  html[data-rfmt="slip58"] .rfmt-preview .rfmt-opt small { font-size: .62rem; }

  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview { width: min(760px, 100%); }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .reprint-bar { width: min(760px, 100%); }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview ul.receipt-lines.rslip-only { display: none; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview table.ra4-only { display: table; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .reprint .rfmt-preview span.ra4-only { display: block; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items {
    width: 100%; border-collapse: collapse; font-size: .9rem;
  }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items th {
    padding: 7px 8px; text-align: left; font-size: .78rem; font-weight: 700; color: var(--muted);
    background: var(--chip); border-bottom: 1px solid var(--line);
  }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items .num { text-align: right; white-space: nowrap; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items .c-no { width: 28px; text-align: center; color: var(--muted); }
  html[data-rfmt="a4img"] .rfmt-preview .rimg-only { display: table-cell; }
  html[data-rfmt="a4img"] .rfmt-preview .c-img { width: 72px; padding: 5px 6px; }
  html[data-rfmt="a4img"] .rfmt-preview .rimg {
    display: grid; place-items: center; width: 60px; height: 60px; object-fit: contain;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
  }
  html[data-rfmt="a4img"] .rfmt-preview .rimg-ph { background: var(--chip); color: var(--muted); font-size: 1.3rem; font-weight: 700; }
  @media (min-width: 600px) {
    html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-totals { width: min(360px, 100%); margin-left: auto; }
  }
  @media (max-width: 600px) {
    /* มือถือ: ซ่อนคอลัมน์ราคาต่อหน่วย/ส่วนลดในตัวอย่าง (ตอนพิมพ์ยังครบ) */
    html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items :is(th, td):nth-last-child(2),
    html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items :is(th, td):nth-last-child(3) { display: none; }
    html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items { font-size: .82rem; }
    html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .rfmt-preview .receipt-a4-items :is(th, td) { padding: 6px 4px; }
    html[data-rfmt="a4img"] .rfmt-preview .c-img { width: 52px; }
    html[data-rfmt="a4img"] .rfmt-preview .rimg { width: 44px; height: 44px; }
  }
}

/* =====================================================================
   พิมพ์จากป๊อปอัปใบเสร็จในหน้าขาย: .modal-backdrop เป็น position: fixed → เบราว์เซอร์ไม่แบ่งหน้า
   (ใบ A4 ยาวเกิน 1 หน้าถูกตัด) และหน้าขายที่ซ่อนด้วย visibility ยังกินพื้นที่ → ซ่อนส่วนอื่นด้วย display:none
   และทำให้ตัวห่อใบเสร็จเป็น static (เนื้อหาใบเสร็จ/ขนาดเท่าเดิม)
   ===================================================================== */
@media print {
  html:is([data-print="slip"], [data-print="a4"], :not([data-print])) body:has(.modal.rfmt-preview) *:not(:has(.rfmt-preview)):not(.rfmt-preview):not(.rfmt-preview *) { display: none !important; }
  html:is([data-print="slip"], [data-print="a4"], :not([data-print])) body:has(.modal.rfmt-preview),
  html:is([data-print="slip"], [data-print="a4"], :not([data-print])) body:has(.modal.rfmt-preview) *:has(.rfmt-preview) {
    display: block !important; position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important; background: none !important; box-shadow: none !important; transform: none !important;
  }
  html:is([data-print="slip"], [data-print="a4"], :not([data-print])):has(.modal.rfmt-preview) { height: auto !important; overflow: visible !important; }
}

/* =====================================================================
   พิมพ์ A4 + รูปสินค้า
   ===================================================================== */
@media print {
  html[data-print="a4"][data-print-img] .receipt-a4-items .rimg-only { display: table-cell; }
  html[data-print="a4"][data-print-img] .receipt-a4-items td { vertical-align: middle; }
  html[data-print="a4"][data-print-img] .receipt-a4-items .c-img { width: 26mm; padding: 1.5mm 2mm 1.5mm 0; }
  html[data-print="a4"][data-print-img] .receipt-a4-items .rimg {
    display: block; box-sizing: border-box; width: 24mm; height: 24mm; object-fit: contain;
    border: .3mm solid #C8C8C8; border-radius: 1.5mm; background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  html[data-print="a4"][data-print-img] .receipt-a4-items .rimg-ph {
    display: flex; align-items: center; justify-content: center;
    background: #F1F1F1; color: #888; font-size: 16pt; font-weight: 700;
  }
  html[data-print="a4"][data-print-img] .receipt-a4-items tr { break-inside: avoid; page-break-inside: avoid; }
}

/* =====================================================================
   สลิป 58mm (html[data-paper="58"]) — เฉพาะงานพิมพ์แบบสลิป
   ม้วน 58mm พิมพ์ได้จริงกว้าง ~48mm ตรงกลาง → ขอบซ้าย/ขวา 5mm, เนื้อหา 48mm
   ===================================================================== */
@page slip58 { size: 58mm auto; margin: 2mm 5mm; }

@media print {
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], [data-print="dbt-slip"], [data-print="pv-slip"], :not([data-print])),
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], [data-print="dbt-slip"], [data-print="pv-slip"], :not([data-print])) body { page: slip58; }

  /* ---- ใบเสร็จ + ใบรายการบิลค้าง (.receipt-paper) ---- */
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper {
    page: slip58; width: 48mm; font-size: 10.5px; line-height: 1.35; gap: 6px;
  }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(h1, h2, h3, p) { margin: 0; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper h2 { font-size: 1.2em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .small { font-size: .9em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-shop { gap: 1px; padding-bottom: 5px; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-shop-name { font-size: 1.15em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-shop,
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(.receipt-customer, .receipt-delivery) { overflow-wrap: anywhere; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-logo { max-width: 55%; max-height: 40px; margin-bottom: 2px; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(.receipt-customer, .receipt-delivery) { font-size: 1em; padding: 4px 0; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(.receipt-lines, .heldp-lines) { gap: 5px; }

  /* แถว: ชื่อ/ป้ายซ้ายตัดบรรทัดได้ ตัวเลขขวาไม่ตัด (ยอดยังชิดขวาตรงกัน) */
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(.line-top, .receipt-row, .receipt-total) { gap: 6px; align-items: flex-start; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(.line-top, .receipt-row, .receipt-total) > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(.line-top, .receipt-row, .receipt-total) > :last-child:not(:first-child) { flex: none; text-align: right; white-space: nowrap; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .line-bottom { flex-wrap: wrap; justify-content: flex-start; gap: 0 6px; font-size: .92em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .receipt-total { padding: 5px 0; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .receipt-total strong { font-size: 1.35em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .receipt-row strong { font-size: 1.05em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .receipt-totals { gap: 5px; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .receipt-row.small { font-size: .9em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper :is(.receipt-promos, .receipt-points) { font-size: .92em; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .crp-r-sign { margin-top: 8mm; font-size: 10px; }
  html[data-paper="58"]:is([data-print="slip"], [data-print="held"], :not([data-print])) .receipt-paper .receipt-foot { overflow-wrap: anywhere; }

  /* ---- ใบรับชำระหนี้ (dbt-slip) + ใบสำคัญจ่าย (pv-slip): กระดาษ .dbt-paper ---- */
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-paper {
    page: slip58; width: 48mm; font-size: 10px; line-height: 1.35; gap: 5px;
  }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-paper :is(.dbt-shop, .dbt-dtitle, .dbt-meta dd, .dbt-box, .dbt-note) { overflow-wrap: anywhere; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-dhead { gap: 3px; padding-bottom: 5px; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-shop-name { font-size: 1.2em; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-dtitle strong { font-size: 1.1em; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dph-logo { max-width: 55%; max-height: 40px; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-meta > div,
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-box-dates > div,
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-sum-row { gap: 6px; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-lines { table-layout: auto; font-size: 1em; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-lines :is(th, td) { padding: 2px 1px; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-lines td:not(.num) { overflow-wrap: anywhere; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-lines .nw { white-space: normal; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-sum-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-sum-row > :last-child { flex: none; white-space: nowrap; }
  html[data-paper="58"]:is([data-print="dbt-slip"], [data-print="pv-slip"]) .dbt-sum-row.total strong { font-size: 1.2em; }
}