/* =====================================================================
   รอบ 56b-2: ใบเสร็จค่าเรียน — prefix srx-
   - หน้าพิมพ์ /school/fees/receipt/{id} (SchoolFeeReceipt.razor): ใช้โครง .receipt-paper / .receipt-shop เดิม
     (app.css สลิป 80mm, print.css 58mm + ตัวอย่าง .rfmt-preview, pos2.css/logo.css A4) แล้วเสริมด้วยคลาส srx-
   - หน้ารายการ /school/fees/receipts (SchoolReceipts.razor): ตัวกรอง + แถบสรุปผลค้นหา + ตาราง
   ===================================================================== */

/* ---------- ใบเสร็จ: บนจอ ---------- */
.srx-paper { position: relative; gap: 10px; overflow-wrap: anywhere; }
.srx-head .receipt-doc { align-items: center; margin-top: 6px; }
.srx-title { font-size: 1.02rem; letter-spacing: .01em; }
.srx-code { font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; }

.srx-void {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 8px 10px; border: 2px solid var(--danger); border-radius: var(--radius-sm);
  color: var(--danger); background: var(--danger-soft);
}
.srx-stamp { font-size: 1.35rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.srx-is-void .srx-lines, .srx-is-void .srx-totals { opacity: .72; }
.srx-is-void .srx-grand strong { text-decoration: line-through; }

.srx-meta { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .9rem; }
.srx-meta > div { display: flex; justify-content: space-between; gap: 10px; }
.srx-meta dt { color: var(--muted); flex: none; }
.srx-meta dd { margin: 0; text-align: right; min-width: 0; }

.srx-lines { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); }
.srx-lhead { display: none; }
.srx-group { display: flex; flex-direction: column; gap: 4px; }
.srx-group + .srx-group { padding-top: 6px; border-top: 1px dotted var(--line); }
.srx-student { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.srx-student-lbl { color: var(--muted); font-size: .85rem; }
.srx-student-code { color: var(--muted); font-size: .85rem; }
.srx-line { display: flex; flex-direction: column; }
.srx-line-top, .srx-line-sub, .srx-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.srx-line-top > :first-child, .srx-row > :first-child { flex: 1 1 auto; min-width: 0; }
.srx-line-top > :last-child:not(:first-child), .srx-row > :last-child:not(:first-child) { flex: none; text-align: right; white-space: nowrap; }
.srx-line-sub { font-size: .84rem; color: var(--muted); padding-left: 12px; }
.srx-late .srx-line-name { font-style: italic; }
.srx-waived {
  flex: none; font-size: .78rem; font-weight: 700; padding: 0 8px; border-radius: 999px;
  background: var(--chip); color: var(--muted); white-space: nowrap;
}
.srx-advance { margin: 0; padding: 8px 0; text-align: center; color: var(--muted); border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); }

.srx-totals { display: flex; flex-direction: column; gap: 3px; font-size: .92rem; }
.srx-grand { padding: 6px 0; margin: 3px 0; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); font-weight: 600; align-items: center; }
.srx-grand strong { font-size: 1.4rem; }
.srx-credit { color: var(--ok); font-weight: 600; }
.srx-wrap { white-space: normal !important; overflow-wrap: anywhere; }
.srx-note { margin: 0; font-size: .88rem; }
.srx-foot { margin: 0; font-size: .88rem; }
.srx-reprint { margin: 0; color: var(--muted); text-align: center; }

/* ช่องลงชื่อ: เฉพาะ A4 (ตัวอย่างบนจอ + พิมพ์) */
.srx-sign { display: none; }
.srx-sign > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .85rem; color: var(--muted); }
.srx-sign-line { display: block; width: 70%; border-bottom: 1px solid currentColor; height: 40px; }

/* ตัวอย่าง A4 บนจอ */
@media screen {
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .reprint .srx-paper { padding: 28px 32px 40px; gap: 14px; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-head { flex-direction: row; justify-content: space-between; align-items: flex-start; text-align: left; gap: 16px; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-head .receipt-logo { margin: 0; align-self: flex-start; max-height: 64px; max-width: 30%; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-head .receipt-shop-info { align-items: flex-start; flex: 1 1 auto; min-width: 0; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-head .receipt-doc { align-items: flex-end; text-align: right; margin: 0; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-title { font-size: 1.25rem; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-lhead { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--muted); padding-bottom: 4px; border-bottom: 1px solid var(--line); }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-totals { width: min(360px, 100%); margin-left: auto; }
  html:is([data-rfmt="a4"], [data-rfmt="a4img"]) .srx-sign { display: flex; gap: 24px; margin-top: 18px; }
  html[data-rfmt="slip58"] .srx-stamp { font-size: 1.1rem; }
}

/* ---------- ใบเสร็จ: พิมพ์ (ขาวดำ) ---------- */
@media print {
  .srx-paper { color: #000; background: #fff; gap: 6px; }
  .srx-paper .muted, .srx-meta dt, .srx-student-lbl, .srx-student-code, .srx-line-sub, .srx-reprint { color: #333; }
  .srx-lines, .srx-advance, .srx-grand { border-color: #000; }
  .srx-group + .srx-group { border-color: #666; }
  .srx-void { color: #000; background: #fff; border-color: #000; }
  .srx-is-void .srx-lines, .srx-is-void .srx-totals { opacity: 1; }
  .srx-waived { background: #fff; color: #000; border: 1px solid #000; }
  .srx-credit { color: #000; }
  .srx-grand strong { font-size: 1.3em; }
  .srx-head .receipt-doc { margin-top: 2px; }
  .srx-meta { font-size: 1em; }
  .srx-totals { font-size: 1em; }

  /* 58mm */
  html[data-paper="58"]:is([data-print="slip"], :not([data-print])) .srx-stamp { font-size: 1.1em; letter-spacing: .06em; }
  html[data-paper="58"]:is([data-print="slip"], :not([data-print])) .srx-meta > div { flex-wrap: wrap; gap: 0 6px; }
  html[data-paper="58"]:is([data-print="slip"], :not([data-print])) .srx-line-sub { padding-left: 6px; }

  /* A4 */
  html[data-print="a4"] .srx-paper { gap: 4mm; font-size: 10.5pt; }
  html[data-print="a4"] .srx-head { border-bottom: 2px solid #000; }
  html[data-print="a4"] .srx-head .receipt-doc { margin: 0; }
  html[data-print="a4"] .srx-title { font-size: 15pt; }
  html[data-print="a4"] .srx-code { font-size: 12pt; }
  html[data-print="a4"] .srx-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1mm 10mm; font-size: 10pt; }
  html[data-print="a4"] .srx-lines { border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; gap: 2.5mm; padding: 0 0 2mm; }
  html[data-print="a4"] .srx-lhead {
    display: flex; justify-content: space-between; padding: 1.5mm 2mm; font-size: 9pt; font-weight: 700;
    background: #eee; border-bottom: 1px solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  html[data-print="a4"] .srx-group { padding: 0 2mm; }
  html[data-print="a4"] .srx-totals { width: 80mm; margin-left: auto; font-size: 10pt; }
  html[data-print="a4"] .srx-grand { border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; }
  html[data-print="a4"] .srx-void { flex-direction: row; justify-content: center; gap: 4mm; padding: 2mm; }
  html[data-print="a4"] div.srx-sign { display: flex; gap: 20mm; margin-top: 12mm; color: #000; }
  html[data-print="a4"] .srx-sign > div { color: #000; font-size: 9.5pt; }
  html[data-print="a4"] .srx-sign-line { height: 14mm; }
}

/* ---------- หน้ารายการใบเสร็จ ---------- */
.srx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.srx-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.srx-dates { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.srx-dates .field.inline, .srx-branch.field.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.srx-dates input[type="date"] { min-width: 0; max-width: 100%; }
.srx-branch select { min-width: 0; max-width: 220px; }
.srx-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.srx-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
/* รอบ 107: ปุ่มเปิดรายงาน sch.fee.receipts ชิดขวาของแถบ */
.srx-report { margin-left: auto; display: inline-flex; }

/* รอบ 103c: แถบสรุปเล็กของผลค้นหา (ยอดต่อคนเก็บเงิน/ปิดยอด = แท็บปิดยอดประจำวัน) */
.srx-sum {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); font-size: .9rem;
}
.srx-sum-main { color: var(--muted); margin-right: 4px; }
.srx-sum-main strong { color: var(--brand-strong); font-size: 1.05rem; margin-left: 2px; }
.srx-mchip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--chip); white-space: nowrap; }
.srx-mchip small { color: var(--muted); font-size: .76rem; }
.srx-sum-link { margin-left: auto; font-size: .86rem; font-weight: 600; white-space: nowrap; }

.srx-trunc { margin: 0; background: var(--warn-soft); }
.srx-rcode { letter-spacing: .02em; }
.srx-table td.num { white-space: nowrap; }
.srx-table .srx-amt { font-weight: 600; }
.srx-table tr.srx-row-void td { color: var(--muted); }
.srx-table tr.srx-row-void .srx-rcode, .srx-table tr.srx-row-void .srx-amt { text-decoration: line-through; color: var(--danger); }
.srx-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--muted);
}
.srx-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.srx-pill.ok { background: var(--ok-soft); color: var(--ok); }
.srx-pill.void { background: var(--danger-soft); color: var(--danger); }
.srx-table .srx-void-btn { color: var(--danger); }
.srx-table td.actions-cell .btn + .btn { margin-left: 6px; }

.srx-vsum { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--chip); font-size: .9rem; }
.srx-vsum > div { display: flex; justify-content: space-between; gap: 12px; }
.srx-vsum dt { color: var(--muted); flex: none; }
.srx-vsum dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .srx-search { width: 100%; flex: 1 1 100%; }
  .srx-bar { align-items: stretch; }
  .srx-dates { width: 100%; }
  .srx-dates .field.inline { flex: 1 1 140px; min-width: 0; }
  .srx-dates input[type="date"] { flex: 1 1 auto; width: 100%; }
  .srx-branch.field.inline { flex: 1 1 100%; }
  .srx-branch select { flex: 1 1 auto; max-width: none; }
  .srx-sum-main { flex: 1 1 100%; }
  .srx-mchip { white-space: normal; }
  .srx-sum-link { margin-left: 0; }
  .srx-report { margin-left: 0; }
}

/* =====================================================================
   รอบ 56c: ใบเสร็จ A4 แนวนอน 2 ฉบับ (sfr2-) — แบบระบบเดิมของโรงเรียน
   html[data-sfr="a4x2"] = แสดงแบบ 2 ฉบับ / "standard" = สลิป-A4 ปกติ (ตั้งโดย print.js)
   ===================================================================== */
.sfr2-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 0; padding: 0 16px; }
.sfr2-switch-lbl { color: var(--muted); font-size: .9rem; }
.sfr2-opt[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.sfr2-wrapview { display: none; }
html[data-sfr="a4x2"] .sfr2-wrapview { display: block; }
html[data-sfr="a4x2"] .sfr2-standard { display: none; }
.sfr2-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px auto 24px; padding: 0 16px; }

/* ตัวอย่างบนจอ: กระดาษ A4 แนวนอน (จอแคบเรียงลงทีละฉบับ) */
.sfr2-print {
  --sfr2-ink: #111; --sfr2-line: #222; --sfr2-head: #1d3c6e;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 14px;
  max-width: 1120px; margin: 12px auto 0; padding: 18px; background: #fff; color: var(--sfr2-ink);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12); border-radius: 6px; font-size: 13px; line-height: 1.35;
}
.sfr2-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sfr2-cut { width: 0; border-left: 2px dashed #555; }
.sfr2-head { display: flex; align-items: flex-start; gap: 12px; }
.sfr2-logo { width: 74px; height: 74px; object-fit: contain; flex: none; }
.sfr2-school { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sfr2-branch { font-size: 1.05em; }
.sfr2-addr, .sfr2-wrap { overflow-wrap: anywhere; }
.sfr2-titlebox { align-self: flex-start; min-width: 46%; padding: 4px 14px; border: 1.5px solid var(--sfr2-line); font-weight: 700; text-align: center; }
.sfr2-info, .sfr2-lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sfr2-info th, .sfr2-info td { border: 1px solid var(--sfr2-line); padding: 4px 6px; text-align: left; vertical-align: top; font-weight: 400; }
.sfr2-info th { width: 17%; font-weight: 700; }
.sfr2-info td { width: 33%; }
.sfr2-lines th { background: var(--sfr2-head); color: #fff; border: 1px solid var(--sfr2-line); padding: 5px 6px; font-weight: 700; }
.sfr2-lines td { border: 1px solid var(--sfr2-line); padding: 4px 6px; }
.sfr2-c-no { width: 9%; text-align: center; }
.sfr2-c-amt { width: 26%; text-align: right; white-space: nowrap; }
.sfr2-tl { text-align: right; font-weight: 700 !important; }
.sfr2-foot { border: 1px solid var(--sfr2-line); padding: 4px 6px; }
.sfr2-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 14px; text-align: center; font-weight: 700; }
.sfr2-sign > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sfr2-sign-line { display: block; width: 80%; height: 34px; border-bottom: 1px dotted #555; }
.sfr2-sign small { font-weight: 400; }
.sfr2-void { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 8px; border: 2px solid #c62828; color: #c62828; }
.sfr2-void strong { font-size: 1.15em; letter-spacing: .05em; }
.sfr2-is-void .sfr2-lines tbody td { text-decoration: line-through; }
.sfr2-print .num { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .sfr2-print { grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 12px 16px 0; padding: 14px; }
  .sfr2-cut { width: auto; height: 0; border-left: 0; border-top: 2px dashed #555; }
  .sfr2-titlebox { min-width: 0; }
}

/* พิมพ์: html[data-print="sfr-x2"] → A4 แนวนอน 2 ฉบับเคียงกัน */
@page sfr-x2 { size: A4 landscape; margin: 7mm; }
@media print {
  html[data-print="sfr-x2"]:has(.sfr2-print), html[data-print="sfr-x2"]:has(.sfr2-print) body {
    margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #111 !important; page: sfr-x2;
  }
  html[data-print="sfr-x2"]:has(.sfr2-print) body *:not(:has(.sfr2-print)):not(.sfr2-print):not(.sfr2-print *) { display: none !important; }
  html[data-print="sfr-x2"]:has(.sfr2-print) body *:has(.sfr2-print) {
    display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
    width: auto !important; max-width: none !important; height: auto !important; overflow: visible !important;
    background: none !important; box-shadow: none !important; transform: none !important;
  }
  html[data-print="sfr-x2"] .sfr2-print, html[data-print="sfr-x2"] .sfr2-print * { visibility: visible !important; }
  html[data-print="sfr-x2"] .sfr2-print {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; gap: 0 6mm !important;
    max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    font-size: 9pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; zoom: 1 !important;
  }
  html[data-print="sfr-x2"] .sfr2-cut { width: 0 !important; height: auto !important; border-top: 0 !important; border-left: 1.5px dashed #555 !important; }
  html[data-print="sfr-x2"] .sfr2-copy, html[data-print="sfr-x2"] .sfr2-copy table { break-inside: avoid; page-break-inside: avoid; }
  html[data-print="sfr-x2"] .sfr2-sign-line { height: 12mm; }
  html[data-print="sfr-x2"] .sfr2-logo { width: 20mm; height: 20mm; }
}