/* รอบ 62b: ปิดยอดประจำวัน (/school/fees/close) — prefix scl-
   ใช้คู่กับ fit.css (.fit-split.left ซ้าย = การ์ดคนเก็บเงิน, ขวา = รายละเอียด) · มือถือ/แท็บเล็ตเห็นทีละส่วน
   ใช้เฉพาะตัวแปรสีใน :root (โหมดมืดทับให้เองใน dark.css) · มือถือ 390px ห้ามเลื่อนแนวนอน
   ใบส่งเงิน (.scl-print, Components/CashCloseSlip.razor): พิมพ์ html[data-print="scl-slip"] (80mm / 58mm ตาม data-paper) | "scl-a4" */

@media screen {
  /* ---------- หัว: วันที่ / สาขา ---------- */
  .scl-tools { gap: 8px 12px; }
  .scl-datenav { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .scl-dbtn { min-width: 40px; padding-left: 8px; padding-right: 8px; font-size: 1.15rem; line-height: 1; }
  .scl-date { min-width: 0; width: 150px; }
  .scl-today.on { border-color: var(--brand); color: var(--brand-strong); }
  .scl-branch select { min-width: 0; max-width: 220px; }

  .scl-split.fit-split.left { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .scl-empty { padding: 24px 12px; text-align: center; color: var(--muted); }
  .scl-back { display: none; }

  /* ---------- การ์ดคนเก็บเงิน ---------- */
  .scl-cards { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
  .scl-card {
    display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; text-align: left;
    padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
  }
  .scl-card:hover { border-color: var(--brand); }
  .scl-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .scl-card.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
  .scl-card-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .scl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scl-me {
    flex: none; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-strong);
    font-size: .72rem; font-weight: 700; white-space: nowrap;
  }
  .scl-card-top .scl-pill { margin-left: auto; }
  .scl-card-sub { color: var(--muted); font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scl-mchips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .scl-mchip {
    display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; padding: 1px 8px; border-radius: 6px;
    background: var(--chip); color: var(--muted); font-size: .78rem; white-space: nowrap;
  }
  .scl-mchip b { color: var(--ink); font-weight: 700; }
  .scl-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .86rem; min-width: 0; }
  .scl-card-foot strong { font-size: 1.02rem; white-space: nowrap; }
  .scl-card-close { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; font-size: .84rem; }
  .scl-card-conf { color: var(--ok); font-size: .8rem; overflow-wrap: anywhere; }

  /* ---------- ป้ายสถานะ / ส่วนต่าง ---------- */
  .scl-pill { display: inline-block; flex: none; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
  .scl-pill.open { background: var(--chip); color: var(--muted); }
  .scl-pill.closed { background: var(--brand-soft); color: var(--brand-strong); }
  .scl-pill.conf { background: var(--ok-soft); color: var(--ok); }
  .scl-diff { font-weight: 700; white-space: nowrap; }
  .scl-diff.ok { color: var(--ok); }
  .scl-diff.short { color: var(--danger); }
  .scl-diff.over { color: var(--warn-text, #7a5300); }
  .scl-warn {
    display: block; padding: 3px 8px; border-radius: 6px; background: var(--warn-soft); color: var(--warn-text, #7a5300);
    font-size: .78rem; font-weight: 600; overflow-wrap: anywhere;
  }
  .scl-warn-box { background: var(--warn-soft); color: var(--warn-text, #7a5300); border-color: transparent; margin: 0; }

  /* ---------- รายละเอียด ---------- */
  .scl-detail { gap: 10px; }
  .scl-dhead { display: flex; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
  .scl-dtitle { flex: 1 1 200px; min-width: 0; }
  .scl-dtitle h2 { margin: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
  .scl-dtitle p { margin: 2px 0 0; overflow-wrap: anywhere; }
  .scl-dscroll { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
  .scl-dscroll > .alert { margin: 0; }
  .scl-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .scl-h3 { margin: 0; font-size: .95rem; }
  .scl-wrap { overflow-wrap: anywhere; }

  .scl-status {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--brand-tint);
  }
  .scl-status.conf { background: var(--ok-soft); border-color: transparent; }
  .scl-status p { margin: 0; }
  .scl-st-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .scl-okt { color: var(--ok); font-weight: 600; }
  .scl-st-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

  .scl-btable { width: 100%; font-size: .9rem; }
  .scl-btable th, .scl-btable td { padding: 6px 8px; }
  .scl-btable .r { text-align: right; white-space: nowrap; }

  .scl-calc {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: var(--surface);
  }
  .scl-crow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
  .scl-crow > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .scl-crow > :last-child { flex: none; white-space: nowrap; }
  .scl-crow.minus { color: var(--muted); font-size: .9rem; }
  .scl-crow.plus { color: var(--ok); font-size: .9rem; }
  .scl-crow.total { margin-top: 2px; padding-top: 6px; border-top: 1px dashed var(--line); font-weight: 700; }
  .scl-crow.total strong { font-size: 1.15rem; color: var(--brand-strong); }
  .scl-crow.other { color: var(--muted); font-size: .9rem; }

  .scl-form {
    display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--brand); background: var(--surface);
  }
  .scl-form > .alert { margin: 0; }
  .scl-form .actions { margin: 0; }
  .scl-behalf { margin: 0; color: var(--brand-strong); font-weight: 600; }
  .scl-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-items: end; }
  .scl-fgrid > .field { margin: 0; min-width: 0; }
  .scl-fgrid input { width: 100%; min-width: 0; }
  .scl-fgrid input.num { font-size: 1.15rem; font-weight: 700; }
  .scl-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; padding-bottom: 8px; }
  .scl-live .scl-diff { flex: 1 1 100%; font-size: 1.05rem; }
  .scl-note { grid-column: 1 / -1; }

  .scl-rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
  .scl-rtable { font-size: .88rem; }
  .scl-rtable .r { text-align: right; white-space: nowrap; }
  .scl-rcode { font-weight: 700; white-space: nowrap; }
  .scl-void td { color: var(--muted); }
  .scl-void .scl-amt, .scl-void .scl-rcode { text-decoration: line-through; }
  .scl-rst { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
  .scl-rst.ok { background: var(--ok-soft); color: var(--ok); }
  .scl-rst.void { background: var(--danger-soft); color: var(--danger); }

  /* ---------- ตัวอย่างใบส่งเงินในป๊อปอัป ---------- */
  .scl-preview { display: flex; justify-content: center; min-width: 0; }
  .scl-pactions { flex-wrap: wrap; }
}

/* แท็บเล็ต/มือถือ: เห็นทีละส่วน (รายชื่อ → รายละเอียด) */
@media screen and (max-width: 1024px) {
  .scl-split.fit-split.left { grid-template-columns: minmax(0, 1fr); }
  .scl-split.has-sel > .scl-list { display: none; }
  .scl-split:not(.has-sel) > .scl-detail { display: none; }
  .scl-back { display: inline-flex; }
}

@media screen and (max-width: 760px) {
  .scl-page .fit-tools.scl-tools { flex-wrap: wrap; justify-content: flex-start; }
  .scl-datenav { flex: 1 1 100%; }
  .scl-date { flex: 1 1 auto; width: auto; }
  .scl-branch { flex: 1 1 100%; }
  .scl-branch select { flex: 1 1 auto; max-width: none; }
  .scl-hide-m { display: none; }
  .scl-fgrid { grid-template-columns: minmax(0, 1fr); }
  .scl-pactions > .btn { flex: 1 1 auto; }
}

/* =====================================================================
   ใบส่งเงิน (กระดาษ) — บนจอแสดงแบบสลิป
   ===================================================================== */
.scl-paper {
  display: flex; flex-direction: column; gap: 8px; width: min(340px, 100%); box-sizing: border-box; padding: 14px 14px 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .9rem; line-height: 1.4;
}
.scl-paper p { margin: 0; }
.scl-phead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-bottom: 8px; border-bottom: 1.5px dashed var(--line); overflow-wrap: anywhere; }
.scl-plogo { max-width: 50%; max-height: 56px; object-fit: contain; margin-bottom: 2px; }
.scl-pschool { font-size: 1.12em; }
.scl-ptitle { margin-top: 4px; font-size: 1.1em; letter-spacing: .02em; }
.scl-pmeta { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.scl-pmeta > div { display: flex; justify-content: space-between; gap: 8px; }
.scl-pmeta dt { color: var(--muted); flex: none; }
.scl-pmeta dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.scl-plines, .scl-psum { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px dashed var(--line); }
.scl-prow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.scl-prow > :first-child { min-width: 0; overflow-wrap: anywhere; }
.scl-prow > :last-child { flex: none; white-space: nowrap; text-align: right; }
.scl-pbig { font-weight: 700; }
.scl-pbig strong { font-size: 1.08em; }
.scl-pblank { display: inline-block; width: 45%; border-bottom: 1px solid currentColor; height: 1.1em; }
.scl-pwarn { font-weight: 700; overflow-wrap: anywhere; }
.scl-pnote { overflow-wrap: anywhere; }
.scl-pinfo { font-size: .85em; color: var(--muted); overflow-wrap: anywhere; }
.scl-psign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; text-align: center; font-size: .88em; }
.scl-psign > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.scl-psign-line { display: block; width: 100%; height: 30px; border-bottom: 1px dotted currentColor; }
.scl-psign small { color: var(--muted); }
.scl-pprinted { text-align: right; }

/* =====================================================================
   พิมพ์ใบส่งเงิน: html[data-print="scl-slip"] (สลิป 80mm ตาม @page เริ่มต้นของ app.css / 58mm) | "scl-a4"
   ===================================================================== */
@page scl-a4 { size: A4; margin: 14mm; }
@media print {
  html[data-print="scl-a4"]:has(.scl-print), html[data-print="scl-a4"]:has(.scl-print) body,
  html[data-print="scl-slip"]:has(.scl-print), html[data-print="scl-slip"]:has(.scl-print) body {
    margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important;
    background: #fff !important; color: #111 !important;
  }
  html[data-print="scl-a4"]:has(.scl-print), html[data-print="scl-a4"]:has(.scl-print) body { page: scl-a4; }
  html[data-paper="58"][data-print="scl-slip"]:has(.scl-print), html[data-paper="58"][data-print="scl-slip"]:has(.scl-print) body { page: slip58; }
  html[data-print="scl-a4"]:has(.scl-print) body *:not(:has(.scl-print)):not(.scl-print):not(.scl-print *),
  html[data-print="scl-slip"]:has(.scl-print) body *:not(:has(.scl-print)):not(.scl-print):not(.scl-print *) { display: none !important; }
  html[data-print="scl-a4"]:has(.scl-print) body *:has(.scl-print),
  html[data-print="scl-slip"]:has(.scl-print) body *:has(.scl-print) {
    display: block !important; position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    width: auto !important; max-width: none !important; min-width: 0 !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;
    animation: none !important; zoom: 1 !important;
  }
  html[data-print="scl-a4"] .scl-print, html[data-print="scl-a4"] .scl-print *,
  html[data-print="scl-slip"] .scl-print, html[data-print="scl-slip"] .scl-print * { visibility: visible !important; }
  html[data-print="scl-a4"] .scl-print, html[data-print="scl-slip"] .scl-print { display: block !important; position: static !important; }
  html:is([data-print="scl-a4"], [data-print="scl-slip"]) .scl-paper {
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: #fff !important; color: #111 !important;
  }
  html:is([data-print="scl-a4"], [data-print="scl-slip"]) .scl-paper :is(.scl-phead, .scl-plines, .scl-psum) { border-color: #111 !important; }
  html:is([data-print="scl-a4"], [data-print="scl-slip"]) .scl-paper :is(.scl-pmeta dt, .scl-pinfo, .scl-psign small) { color: #333 !important; }

  /* สลิป 80mm */
  html[data-print="scl-slip"] .scl-paper { width: 72mm !important; font-size: 11px; gap: 6px; }
  html[data-print="scl-slip"] .scl-plogo { max-height: 48px; filter: grayscale(1) contrast(1.15); }
  /* สลิป 58mm: พิมพ์ได้จริงกว้าง ~48mm */
  html[data-paper="58"][data-print="scl-slip"] .scl-paper { width: 48mm !important; font-size: 10px; gap: 5px; }
  html[data-paper="58"][data-print="scl-slip"] .scl-psign { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  /* A4 */
  html[data-print="scl-a4"] .scl-paper { width: 130mm !important; font-size: 11pt; gap: 4mm; }
  html[data-print="scl-a4"] .scl-plogo { max-width: 45mm; max-height: 70px; }
  html[data-print="scl-a4"] .scl-ptitle { font-size: 1.35em; }
  html[data-print="scl-a4"] .scl-psign { margin-top: 16mm; gap: 14mm; }
  html[data-print="scl-a4"] .scl-psign-line { height: 14mm; }
}