/* รอบ 58: เรียนเสริม (/school/courses) — prefix scr-
   ใช้คู่กับ fit.css (หน้าเดียวจบ: .fit-split.left ซ้าย = รายการคอร์ส, ขวา = รายละเอียด/รายชื่อ)
   ใช้เฉพาะตัวแปรสีใน :root (โหมดมืดทับให้เองใน dark.css) · มือถือ 390px ห้ามเลื่อนแนวนอน */

@media screen {
  /* ---------- หัว / ตัวกรอง ---------- */
  .scr-search { min-width: 0; width: 240px; }
  .scr-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
  .scr-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .82rem; color: var(--muted); }
  .scr-filter select { max-width: 240px; min-width: 0; }
  .scr-check { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink); cursor: pointer; }
  .scr-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }

  .scr-split.fit-split.left { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .scr-empty { padding: 24px 12px; text-align: center; color: var(--muted); }
  .scr-off {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: var(--chip); color: var(--muted); font-size: .72rem; font-weight: 600; vertical-align: middle; white-space: nowrap;
  }

  /* ---------- การ์ดคอร์ส ---------- */
  .scr-cards { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
  .scr-card {
    display: flex; flex-direction: column; gap: 4px; 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;
  }
  .scr-card:hover { border-color: var(--brand); }
  .scr-card.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
  .scr-card.off { opacity: .7; }
  .scr-card-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .scr-card-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scr-card-sub { color: var(--muted); font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scr-days { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
  .scr-dchip {
    display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--brand-soft);
    color: var(--brand-strong); font-size: .76rem; font-weight: 700; white-space: nowrap;
  }
  .scr-time { font-size: .84rem; color: var(--ink); margin-left: 2px; white-space: nowrap; }
  .scr-card-foot { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; font-size: .84rem; min-width: 0; }
  .scr-room { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
  .scr-count { color: var(--muted); white-space: nowrap; }
  .scr-count.full { color: var(--danger); font-weight: 700; }
  .scr-price { white-space: nowrap; color: var(--ink); }

  /* ---------- รายละเอียด ---------- */
  .scr-detail { gap: 10px; }
  .scr-dhead { display: flex; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
  .scr-dtitle { flex: 1 1 260px; min-width: 0; }
  .scr-dtitle h2 { margin: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
  .scr-dinfo { margin: 2px 0 0; overflow-wrap: anywhere; }
  .scr-dtools { display: flex; gap: 6px; flex-wrap: wrap; }
  .scr-back { display: none; }
  .scr-dbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
  .scr-mnav { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .scr-mnav select { min-width: 0; max-width: 200px; }
  .scr-mbtn { min-width: 34px; padding-left: 8px; padding-right: 8px; }
  .scr-msum { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .86rem; color: var(--muted); }
  .scr-msum .ok { color: var(--ok); font-weight: 600; }
  .scr-msum .bad { color: var(--danger); font-weight: 600; }

  .scr-tpay { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--brand-tint); padding: 10px 12px; }
  .scr-tpay-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
  .scr-tpay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .scr-tpay-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .scr-tpay-grid span { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scr-tpay-grid strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scr-tpay-grid .hl strong { color: var(--brand-strong); }

  .scr-sname { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
  .scr-code { display: block; font-size: .78rem; color: var(--muted); background: none; padding: 0; }
  .scr-st { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
  .scr-st.paid { background: var(--ok-soft); color: var(--ok); }
  .scr-st.due { background: var(--danger-soft); color: var(--danger); }
  .scr-st.none { background: var(--chip); color: var(--muted); }
  .scr-over { color: var(--danger); font-weight: 700; }
  .scr-ractions { white-space: nowrap; }
  .scr-ractions .btn + .btn { margin-left: 4px; }

  /* ---------- ฟอร์มคอร์ส ---------- */
  .scr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px 12px; }
  .scr-grid > .field { margin: 0; min-width: 0; }
  .scr-grid .scr-span2 { grid-column: span 2; }
  .scr-grid input, .scr-grid select { width: 100%; min-width: 0; }
  .scr-daypick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .scr-daychip { min-width: 46px; cursor: pointer; }
  .scr-gprices { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
  .scr-gprices summary { cursor: pointer; font-weight: 600; }
  .scr-gprices summary .muted { font-weight: 400; }
  .scr-glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 10px; margin-top: 8px; }
  .scr-gitem { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .scr-gitem span { flex: none; min-width: 44px; font-weight: 600; font-size: .88rem; }
  .scr-gitem input { flex: 1 1 auto; min-width: 0; width: 100%; }

  /* ---------- สมัครนักเรียน ---------- */
  .scr-esearch { width: 100%; }
  .scr-ehead { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
  .scr-elist {
    display: flex; flex-direction: column; max-height: min(46vh, 420px); overflow: auto; overscroll-behavior: contain;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
  }
  .scr-epad { margin: 0; padding: 16px; text-align: center; }
  .scr-eitem {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; padding: 8px 12px; min-width: 0;
    border-bottom: 1px solid var(--line); cursor: pointer;
  }
  .scr-eitem:last-child { border-bottom: 0; }
  .scr-eitem input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }
  .scr-eitem.in { cursor: default; color: var(--muted); }
  .scr-ename { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-width: 0; flex: 1 1 160px; }
  .scr-emeta { min-width: 0; overflow-wrap: anywhere; }
  .scr-tag { padding: 1px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: .74rem; font-weight: 600; white-space: nowrap; }

  /* ---------- วิชา ---------- */
  .scr-slist { display: flex; flex-direction: column; gap: 6px; max-height: min(50vh, 440px); overflow: auto; }
  .scr-srow { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .scr-srow > input[type="text"] { flex: 1 1 auto; min-width: 0; }
  .scr-srow.off > input[type="text"] { color: var(--muted); }
  .scr-sadd { display: flex; gap: 8px; min-width: 0; }
  .scr-sadd input { flex: 1 1 auto; min-width: 0; }
}

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

@media screen and (max-width: 760px) {
  .scr-page .fit-tools { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .scr-page .fit-tools .scr-search { flex: 1 1 100%; width: auto; }
  .scr-page .fit-tools > .btn { flex: 1 1 auto; }
  .scr-bar { gap: 8px; }
  .scr-filter { flex: 1 1 140px; }
  .scr-filter select { max-width: none; width: 100%; }
  .scr-tpay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scr-grid .scr-span2 { grid-column: auto; }
  .scr-dtools { width: 100%; }
  .scr-dtools .btn { flex: 1 1 0; }
  .scr-mnav { flex: 1 1 auto; }
  .scr-mnav select { flex: 1 1 auto; max-width: none; }
  .scr-ractions { white-space: normal; }
}