/* รอบ 54: ระบบโรงเรียน — หน้าแรกโรงเรียน (sch-*), ตัวเลือกประเภทกิจการตอนสมัคร (r54-*), ป้ายโรงเรียนในแอดมินกลาง
   ใช้ตัวแปรสีจาก :root ของ app.css เท่านั้น (รองรับโหมดมืดอัตโนมัติ) */

/* ---------- หน้าสมัคร: เลือกประเภทกิจการ ---------- */
.r54-kind-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.r54-kind-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.r54-kind-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand) inset; }
.r54-kind-opt input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand); }
.r54-kind-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r54-kind-text strong { color: var(--ink); font-weight: 700; }
.r54-kind-text small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
@media (min-width: 560px) {
  .r54-kind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .r54-kind-opt { flex-direction: column; gap: 6px; }
}

/* ---------- หน้าแรกโรงเรียน ---------- */
.sch-hero { display: flex; align-items: flex-start; gap: 14px; }
.sch-hero h2 { margin: 0 0 4px; font-size: 1.15rem; }
.sch-hero p { margin: 0; }
.sch-hero-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand);
}
.sch-h2 { margin: 0 0 10px; font-size: 1.05rem; }
.sch-coming { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 6px; }
.sch-coming li {
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--chip); color: var(--ink); font-size: .92rem;
}
@media (min-width: 720px) { .sch-coming { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sch-links { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
@media (min-width: 720px) { .sch-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sch-link {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
}
.sch-link:hover { border-color: var(--brand); background: var(--brand-tint); }
.sch-link strong { color: var(--brand-strong); }
.sch-link span { color: var(--muted); font-size: .85rem; }

/* ---------- แอดมินกลาง: ป้ายโรงเรียน ---------- */
.pf-tag.pf-tag-school { background: var(--ok-soft); color: var(--ok); }

/* ---------- รอบ 55: หน้าแรกโรงเรียน (ภาพรวม) ---------- */
.sch-terms { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sch-term { padding: 2px 10px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .82rem; }
.sch-term.on { background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }

.sch-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@media (min-width: 720px) { .sch-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sch-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; text-decoration: none; color: var(--ink); min-width: 0; }
.sch-stat:hover { border-color: var(--brand); }
.sch-stat-n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.sch-stat-l { font-weight: 600; }
.sch-stat.warn { background: var(--warn-soft); }

.sch-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.sch-grade {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.sch-grade .num { font-size: 1.25rem; font-weight: 800; }

.sch-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.sch-steps li.done a { color: var(--muted); text-decoration: line-through; }

/* รอบ 98: ช่องเลือก/ช่องกรอกในแถบตัวกรองของหน้าโรงเรียนที่ยังเป็นแบบดิบของเบราว์เซอร์ (ไม่มีกรอบ/ความสูงไม่เท่าปุ่ม)
   → หน้าตาเดียวกับ .sfe-filter / .spa-filter (กรอบ var(--line) มุมมน สูง 40px) · มือถือ 16px กัน iOS ซูม */
@media screen {
  :is(.sat-filter, .sgr-filter, .stt-filter, .scal-filter, .scr-filter, .sop-filter, .sov-filter) :is(select, input:not([type="checkbox"]):not([type="radio"])),
  :is(.scr-mnav, .sdc-year, .sny-pick, .stt-mode, .stt-addsubj, .sgr-cpick) select,
  :is(.scr-gitem, .scr-sadd, .spy2-disc-in, .sto-srow, .sgr-smax, .sgr-brow) input,
  .sto-vrow input:not([type="checkbox"]), .stt-prow :is(input[type="text"], input[type="time"]), .scr-srow > input[type="text"],
  .sgr-sadd > :is(select, input), .sat-rnote, .sat-snote, .scl-date, .sin-minput, .spy2-pk-q, .adm-d-sec textarea {
    min-height: 40px; padding: 6px 10px; font: inherit; font-size: .92rem; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  }
  :is(.sat-filter, .sgr-filter, .stt-filter, .scal-filter, .scr-filter, .sop-filter, .sov-filter) :is(select, input):focus,
  :is(.scr-mnav, .sdc-year, .sny-pick, .stt-mode, .stt-addsubj, .sgr-cpick) select:focus,
  :is(.scr-gitem, .scr-sadd, .spy2-disc-in, .sto-srow, .sto-vrow, .sgr-smax, .sgr-brow, .stt-prow, .scr-srow, .sgr-sadd) :is(input, select):focus,
  .sat-rnote:focus, .sat-snote:focus, .scl-date:focus, .sin-minput:focus, .spy2-pk-q:focus, .adm-d-sec textarea:focus {
    outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent;
  }
  :is(.sat-filter, .sgr-filter, .stt-filter, .scal-filter, .scr-filter, .sop-filter, .sov-filter) :is(select, input):disabled { opacity: .55; }
}
@media screen and (max-width: 760px) {
  :is(.sat-filter, .sgr-filter, .stt-filter, .scal-filter, .scr-filter, .sop-filter, .sov-filter) :is(select, input:not([type="checkbox"]):not([type="radio"])),
  :is(.scr-mnav, .sdc-year, .sny-pick, .stt-mode, .stt-addsubj, .sgr-cpick) select,
  .sat-rnote, .sat-snote, .scl-date, .sin-minput, .spy2-pk-q { font-size: 16px; }
}

/* รอบ 98: โหมดมืด — แท็บที่เลือกของแถบแท็บโรงเรียน (พื้น --surface เข้มกว่าแถบ --chip จนแทบไม่เห็นว่าเลือกอันไหน) */
@media screen {
  html[data-theme="dark"] :is(.scs-tabs, .sfe-tabs, .sdoc-tabs) button.on { background: var(--line); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
}

/* =====================================================================
   รอบ 98: กันเนื้อหาหน้าโรงเรียนถูก "บีบ/ตัด" บนคอม (≥1025px — .fit สูงพอดีจอ, .main ไม่เลื่อน)
   ต้นเหตุ: ลูกของ flex คอลัมน์ที่สูงจำกัดหดได้ — กล่องที่มี overflow (แถวชิป/แท็บเลื่อนข้าง, .m-scroll-row)
   หดได้ถึง 0 (เหลือแค่ขอบบน) · กล่องปกติที่ล้น .fit-body ที่ไม่เลื่อน = ถูกตัดล่างมองไม่เห็น
   - ลูกตรงของ .fit (หัว/แท็บ/ชิป/ตัวกรอง/แถบเตือน) และลูกของ .fit-body.scroll ไม่หด (ยกเว้น .fit-scroll ที่ตั้งใจให้เลื่อนในกรอบ)
   - .fit-body ที่ไม่ใช่ .scroll: เนื้อหายาวเกินจอ = เลื่อนได้ (ตาข่ายกันตก — .fit-scroll/.fit-split ยังพอดีกรอบตามเดิม)
   - หน้าที่ไม่มี .fit-body (สแกนบัตรเช็กชื่อ/ค้นหาด้วยบัตร/อัปโหลดรูปหลายรูป): ทั้งหน้าเลื่อนในกรอบ
   หน้าโรงเรียนใหม่ที่ใช้ .fit → เพิ่มคลาสของหน้าใน :is(...) ด้านล่าง
   ===================================================================== */
@media screen and (min-width: 1025px) {
  :is(.sh-page, .shl-page, .sgs-page, .spa-page, .sat-page, .scal-page, .scs-page, .scr-page, .sdc-page, .sdoc-page, .scl-page,
      .sop-page, .sstm-page, .sfe-page, .sgr-page, .sin-fit, .sst-ms, .sny-page, .sov-page, .spy2, .srx-page, .sto-page, .sst-fit,
      .stt-page, .ssc, .sbp) > :not(.fit-body) { flex-shrink: 0; }
  :is(.sh-page, .shl-page, .sgs-page, .spa-page, .scs-page, .sdoc-page, .sny-page, .sst-fit) > .fit-body.scroll > :not(.fit-scroll) { flex-shrink: 0; }
  :is(.sat-page, .scal-page, .scs-page, .scr-page, .sdc-page, .sdoc-page, .scl-page, .sop-page, .sstm-page, .sfe-page, .sgr-page,
      .sin-fit, .sst-ms, .sov-page, .spy2, .srx-page, .sto-page, .sst-fit, .stt-page) > .fit-body:not(.scroll) {
    overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 8px;
  }
  .content > .fit:is(.ssc, .sbp) { overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 8px; }
}