/* รอบ 62a: ยอดค้างยกมา (/school/fees/opening) — prefix sop-
   ใช้คู่กับ fit.css · สีจากตัวแปรใน :root ของ app.css (โหมดมืดใช้ได้) · มือถือ 390px ไม่เลื่อนแนวนอน (ตารางเป็นการ์ด) */

.sop-tools { flex-wrap: wrap; }
.sop-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.sop-filter { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 0 1 200px; font-size: .82rem; color: var(--muted); }
.sop-filter select { min-width: 0; width: 100%; min-height: 40px; }
.sop-search { flex: 1 1 220px; min-width: 0; }
.sop-only, .sop-check {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; user-select: none;
  font-size: .9rem; color: var(--ink);
}
.sop-only { padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sop-only input, .sop-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--brand); }

.sop-body { min-width: 0; }
.sop-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: none; }
.sop-sum > div {
  min-width: 0; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.sop-sum span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sop-sum strong { font-size: 1.2rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sop-sum small { font-size: .75rem; }
.sop-sum .ok strong { color: var(--ok); }
.sop-sum .bad { background: var(--danger-soft); }
.sop-sum .bad strong { color: var(--danger); }
.sop-note { margin: 0; flex: none; }
.sop-empty { padding: 28px 16px; }

.sop-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.sop-name strong { overflow-wrap: anywhere; }
.sop-code { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); background: none; padding: 0; overflow-wrap: anywhere; }
.sop-table td.num { white-space: nowrap; }
.sop-label { max-width: 280px; overflow-wrap: anywhere; }
.sop-late-tag {
  display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: var(--warn-soft); color: var(--ink);
}
.sop-table tr.sop-late .sop-bal { color: var(--danger); font-weight: 700; }
.sop-table tr.sop-void td { color: var(--muted); }
.sop-acts { white-space: nowrap; }
.sop-acts .btn + .btn, .sop-acts .btn + a, .sop-acts a + .btn { margin-left: 6px; }
.sop-del { color: var(--danger); }

.sop-st { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.sop-st.paid { background: var(--ok-soft); color: var(--ok); }
.sop-st.partial { background: var(--warn-soft); color: var(--ink); }
.sop-st.due { background: var(--danger-soft); color: var(--danger); }
.sop-st.void { background: var(--chip); color: var(--muted); text-decoration: line-through; }

/* ---------- ฟอร์มเพิ่ม/แก้ ---------- */
.sop-form, .sop-imp { min-width: 0; }
.sop-year { margin: 0; }
.sop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.sop-picked {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--brand-tint);
}
.sop-picked-main { display: flex; flex-direction: column; min-width: 0; }
.sop-picked-main strong { overflow-wrap: anywhere; }
.sop-form-actions { flex-wrap: wrap; }

/* ---------- นำเข้า ---------- */



/* จอคอม: ตารางเลื่อนในกรอบ */
@media screen and (min-width: 1025px) {
  .sop-body > .sop-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
}

/* มือถือ: ตารางเป็นการ์ด (กฎ .table.cards ใน app.css) */
@media (max-width: 760px) {
  .sop-tools { width: 100%; }
  .sop-tools > .btn { flex: 1 1 auto; }
  .sop-filter { flex: 1 1 calc(50% - 7px); }
  .sop-search, .sop-only { flex: 1 1 100%; }
  .sop-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sop-sum > div { padding: 8px 12px; }
  .sop-sum strong { font-size: 1.05rem; }
  .sop-label { max-width: none; }
  .table.cards td.sop-acts { white-space: normal; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .sop-acts .btn + .btn, .sop-acts .btn + a, .sop-acts a + .btn { margin-left: 0; }
  .sop-grid { grid-template-columns: minmax(0, 1fr); }
}