/* =====================================================================
   รอบ 56e: หน้ารับเงินค่าเรียน "หน้าเดียวจบ" (spy2-) — ใช้โครง .fit/.fit-split ของหน้าร้านค้า
   ซ้าย = งวดค้างเป็นปุ่มเล็ก (เลื่อนในกรอบ) · ขวา = สรุป/รับเงิน (ปุ่มบันทึกอยู่ล่างเสมอ)
   ===================================================================== */
.spy2-tools { position: relative; }


.spy2-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; background: var(--chip); color: var(--muted); }
.spy2-tag.late { background: var(--danger-soft, #fde2e1); color: var(--danger); }
.spy2-tag.credit { background: var(--ok-soft); color: var(--ok); }

/* ซ้าย */
.spy2-left { gap: 10px; }
.spy2-studs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spy2-stud {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 8px 6px 12px;
  border-radius: 12px; background: var(--brand-soft); min-width: 0;
}
.spy2-stud-name { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.spy2-stud-name strong { overflow-wrap: anywhere; }
.spy2-x { width: 26px; height: 26px; }
/* รอบ 106a: ปุ่มเปิดลิ้นชักค่าเรียนของนักเรียน (<StudentFeePanel>) */
.spy2-feebtn { min-height: 28px; padding: 2px 10px; background: var(--surface); }
.spy2-fp-note { margin: 0 0 4px; }
.spy2-sib {
  padding: 5px 10px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--ink);
  font: inherit; font-size: .88rem; cursor: pointer;
}
.spy2-sib:hover { border-color: var(--brand); color: var(--brand-strong, var(--brand)); }
.spy2-sib small { margin-left: 4px; color: var(--muted); }
.spy2-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spy2-hint { margin-left: auto; }

.spy2-list { display: flex; flex-direction: column; gap: 12px; }
.spy2-stblock { display: flex; flex-direction: column; gap: 10px; }
.spy2-sthead { margin: 4px 0 0; font-size: .95rem; }
.spy2-grp { display: flex; flex-direction: column; gap: 6px; }
.spy2-grp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.spy2-grp-head strong { font-size: .95rem; }
.spy2-grp-all { margin-left: auto; min-height: 28px; padding: 2px 10px; }
.spy2-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.spy2-chip { position: relative; display: flex; min-width: 0; }
.spy2-chip-main {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; min-height: 54px;
  padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.spy2-chip-main:hover { border-color: var(--brand); }
.spy2-chip-p { font-weight: 700; font-size: .9rem; }
.spy2-chip-a { font-size: .86rem; color: var(--muted); }
.spy2-chip-f { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.spy2-chip.late .spy2-chip-main { border-color: var(--danger); }
.spy2-chip.late .spy2-chip-f { color: var(--danger); }
.spy2-chip.on .spy2-chip-main { background: var(--brand); border-color: var(--brand); color: #fff; }
.spy2-chip.on .spy2-chip-a, .spy2-chip.on .spy2-chip-f { color: rgba(255, 255, 255, .88); }
.spy2-chip.on.part .spy2-chip-main { background: repeating-linear-gradient(135deg, var(--brand) 0 8px, var(--brand-strong, var(--brand)) 8px 16px); }
.spy2-chip-edit {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: rgba(255, 255, 255, .22); color: #fff; cursor: pointer;
}
.spy2-chip-edit:hover { background: rgba(255, 255, 255, .38); }

/* ขวา */
.spy2-side { gap: 10px; }
.spy2-side-scroll { display: flex; flex-direction: column; gap: 10px; }
.spy2-side-h { margin: 0; font-size: 1.02rem; }
.spy2-sumlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.spy2-sumlines li { display: flex; justify-content: space-between; gap: 10px; }
.spy2-sl-name { min-width: 0; overflow-wrap: anywhere; }
.spy2-sum { margin: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.spy2-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.spy2-sum dt { color: var(--muted); }
.spy2-sum dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.spy2-sub { font-size: .82rem; }
.spy2-disc-in { display: inline-flex; align-items: center; gap: 4px; }
.spy2-disc-in input { width: 120px; min-width: 0; }
.spy2-unit { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.spy2-unit.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.spy2-strike { text-decoration: line-through; color: var(--muted); }
.spy2-total { padding-top: 6px; border-top: 1px dashed var(--line); }
.spy2-total dt { color: var(--ink) !important; font-weight: 700; }
.spy2-total dd { font-size: 1.35rem; font-weight: 800; color: var(--brand-strong, var(--brand)); }
.spy2-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: .9rem; }
.spy2-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.spy2-methods { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.spy2-method { min-height: 42px; border: 0; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.spy2-method + .spy2-method { border-left: 1px solid var(--line); }
.spy2-method.on { background: var(--brand); color: #fff; }
.spy2-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spy2-row2 .field, .spy2-recv .field { min-width: 0; }
.spy2-recv { display: flex; align-items: flex-end; gap: 8px; }
.spy2-recv .field { flex: 1 1 auto; }
.spy2-recv input { font-size: 1.1rem; }
.spy2-change { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }
.spy2-change strong { font-size: 1.2rem; }
.spy2-change.kept { opacity: .6; }
.spy2-info, .spy2-warn { margin: 0; padding: 6px 10px; border-radius: 8px; }
.spy2-info { background: var(--chip); color: var(--muted); }
.spy2-warn { background: var(--danger-soft, #fde2e1); color: var(--danger); }
.spy2-payer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.spy2-payer svg { margin-left: auto; color: var(--muted); }
.spy2-payer-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.spy2-payer-note { flex-basis: 100%; overflow-wrap: anywhere; }
.spy2-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); flex: none; }
.spy2-alert { margin: 0; }

.spy2-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 260px; color: var(--muted); text-align: center; }
@media screen and (min-width: 1025px) {
  .spy2 .fit-body > .spy2-empty { flex: 1 1 auto; }
  .spy2-split { grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); }
}

/* ป๊อปอัปใบเสร็จหลังบันทึก */
.spy2-done { display: flex; flex-direction: column; gap: 12px; }
.spy2-done-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; }
.spy2-done-change strong { color: var(--ok); font-size: 1.1rem; }
.spy2-rcpt { overflow: auto; max-height: 62vh; border-radius: 8px; background: var(--chip); padding: 8px; }
.spy2-rcpt .sfr2-print { margin: 0 auto; zoom: .78; }
.spy2-done-actions { flex-wrap: wrap; }
@media (max-width: 900px) {
  .spy2-rcpt .sfr2-print { zoom: 1; }
}

/* มือถือ */
@media (max-width: 760px) {
  .spy2-tools { flex-wrap: wrap; }
  /* รอบ 121b: มือถือแสดงคำแนะนำ ✎ จ่ายบางส่วน ด้วย (เดิมซ่อน) */
  .spy2-hint { margin-left: 0; flex-basis: 100%; }
  .spy2-chips { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .spy2-row2 { grid-template-columns: minmax(0, 1fr); }
}

/* รอบ 56f: ใบเสร็จแบบสลิปในป๊อปอัป + สรุปในป๊อปอัปจ่ายบางส่วน */
.spy2-slip { display: flex; justify-content: center; max-height: 58vh; overflow: auto; padding: 10px; border-radius: 8px; background: var(--chip); }
.spy2-slip .receipt-paper { background: var(--surface); box-shadow: var(--shadow); }
.spy2-edit-sum { border-top: 0; padding-top: 0; }

/* รอบ 57S: สินค้าร้านค้าโรงเรียนในหน้ารับเงิน (ตะกร้าในแผงขวา + ป๊อปอัปเลือกสินค้า) */
.spy2-items { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.spy2-items-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.spy2-cart { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .88rem; }
.spy2-cart-li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; }
.spy2-cart-name { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.spy2-cart-warn { color: var(--danger); font-size: .74rem; }
.spy2-cart-qty { display: inline-flex; align-items: center; gap: 2px; }
.spy2-cart-qty .spy2-unit { min-width: 26px; height: 26px; border-radius: 6px; padding: 0; }
.spy2-cart-n { min-width: 22px; text-align: center; font-weight: 600; }
.spy2-cart-amt { text-align: right; min-width: 64px; }

.spy2-pk { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.spy2-pk-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.spy2-pk-q { flex: 1 1 200px; min-width: 0; }
.spy2-pk-for { flex: 0 1 220px; min-width: 0; margin: 0; }
.spy2-pk-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.spy2-pk-cat { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; }
.spy2-pk-cat.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.spy2-pk-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; padding-right: 2px; }
.spy2-pk-item { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.spy2-pk-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.spy2-pk-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.spy2-pk-size {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; text-align: left; cursor: pointer;
}
.spy2-pk-size:hover { border-color: var(--brand); }
.spy2-pk-size.on { border-color: var(--brand); background: var(--brand-tint); }
.spy2-pk-sz { font-size: .95rem; }
.spy2-pk-stock { color: var(--muted); }
.spy2-pk-size.low .spy2-pk-stock { color: var(--danger); font-weight: 600; }
.spy2-pk-in { color: var(--brand-strong, var(--brand)); font-weight: 700; }
.spy2-pk-warn { margin: 0; color: var(--danger); }
.spy2-pk-foot { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.spy2-pk-foot strong { margin-left: auto; }
@media (max-width: 760px) {
  .spy2-pk-sizes { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .spy2-pk-for { flex-basis: 100%; }
}

/* รอบ 57T: สลับ งวดที่ค้าง / ประวัติการจ่าย ในแผงซ้าย */
.spy2-view { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; border-radius: 999px; background: var(--chip); flex: none; }
.spy2-view-btn {
  padding: 5px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.spy2-view-btn:hover { color: var(--ink); }
.spy2-view-btn.on { background: var(--surface); color: var(--brand-strong, var(--brand)); box-shadow: var(--shadow); }
.spy2-hfilters { display: flex; flex-direction: column; gap: 6px; flex: none; }
.spy2-hchips { display: flex; flex-wrap: wrap; gap: 6px; }
.spy2-hchip {
  padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: .84rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spy2-hchip:hover { border-color: var(--brand); }
.spy2-hchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.spy2-hist { gap: 8px; }
.spy2-herr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spy2-hcard { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.spy2-hcard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .86rem; }
.spy2-hdate { color: var(--muted); }
.spy2-hcode { font-weight: 700; color: var(--brand-strong, var(--brand)); text-decoration: none; }
.spy2-hcode:hover { text-decoration: underline; }
.spy2-hlines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.spy2-hline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.spy2-hl-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; overflow-wrap: anywhere; }
.spy2-hl-who { padding: 0 6px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-strong, var(--brand)); font-weight: 600; }
.spy2-hl-amt { flex: none; text-align: right; }
.spy2-hcard-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--line); }
.spy2-hcard.void { opacity: .7; }
.spy2-hcard.void .spy2-hlines, .spy2-hcard.void .spy2-hcard-foot strong { text-decoration: line-through; }
.spy2-hnote { margin: 4px 0 0; text-align: center; }

/* รอบ 116 (C2): สลิปผู้ปกครองที่รอตรวจบนหน้ารับเงิน */
.spy2-slip-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.spy2-slips { margin: 8px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--warn-soft); display: flex; flex-direction: column; gap: 8px; }
.spy2-slips-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.spy2-slip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spy2-slip-thumb { flex: none; display: block; width: 44px; height: 58px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.spy2-slip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spy2-slip-info { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spy2-slip-info .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.spy2-slip-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spy2-slip-reject { flex: 1 1 100%; }
.spy2-slip-reject input { flex: 1 1 180px; min-width: 0; }
.spy2-chip-slip { color: var(--brand-strong); font-weight: 600; }
.spy2-chip.on .spy2-chip-slip { color: #fff; }
@media (max-width: 760px) {
    .spy2-slip-act { flex: 1 1 100%; }
    .spy2-slip-act .btn { flex: 1 1 auto; }
}

/* รอบ 116b: สลิปรอตรวจของทุกคน (หน้าว่าง) */
.spy2-allslips { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.spy2-allslips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.spy2-allslip { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.spy2-allslip:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-tint); }
.spy2-allslip:disabled { opacity: .6; cursor: default; }
.spy2-allslip-amt { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.spy2-allslip .spy2-slip-info > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spy2-allslips-btn { white-space: nowrap; }

/* รอบ 116c: ลิงก์ประวัติสลิป */
.spy2-noslips { margin: 0; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.spy2-slip-hist { margin-left: auto; white-space: nowrap; }

/* รอบ 121b: จ่ายไม่ครบ — แถบยอดค้างหลังบันทึก + ช่องวันนัด (บนสุดของแผงขวา) */
.spy2-debt {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--danger); background: var(--danger-soft); color: var(--ink); min-width: 0;
}
.spy2-debt-h { color: var(--danger); font-size: 1rem; overflow-wrap: anywhere; }
.spy2-debt-hint { color: var(--ink); opacity: .85; font-size: .8rem; }
.spy2-debt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .88rem; }
.spy2-debt-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.spy2-debt-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.spy2-debt-amt { flex: none; font-weight: 700; color: var(--danger); }
.spy2-debt-edit {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.spy2-debt-edit:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-strong, var(--brand)); }
.spy2-debt-promise { margin: 2px 0 0; color: var(--ink); font-weight: 600; }
.spy2-debt-promise input { background: var(--surface); }
.spy2-debt-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.spy2-debt-quick .btn { min-height: 30px; padding: 2px 10px; background: var(--surface); }
.spy2-debt-none { color: var(--danger); font-weight: 600; font-size: .8rem; }
@media (max-width: 760px) {
  .spy2-debt-quick .btn { flex: 1 1 0; }
}