/* รอบ 59a: เช็กชื่อ (/school/attendance) — prefix sat-
   ใช้คู่กับ fit.css (.fit-split.left ซ้าย = ห้อง/คอร์สของวัน, ขวา = ใบเช็กชื่อ) และแท็บ .sfe-tabs (school-fees.css)
   ใช้เฉพาะตัวแปรสีใน :root (โหมดมืดทับให้เองใน dark.css; --warn-text/--info-* มีเฉพาะโหมดมืด จึงใส่ค่าสำรอง)
   มือถือ 390px: เห็นทีละส่วน, แถวนักเรียนไม่เลื่อนแนวนอน, ตารางรายเดือนเลื่อนในกล่องของตัวเอง */

@media screen {
  .fit > .sat-tabs { flex: none; }

  /* ---------- แถบตัวกรอง ---------- */
  .sat-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
  .sat-filter { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .82rem; color: var(--muted); }
  .sat-filter select, .sat-filter input { min-width: 0; max-width: 260px; }
  .sat-tsel select { width: 260px; }
  .sat-wmin input { width: 110px; }
  .sat-dnav-row { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
  .sat-dnav-row input { flex: 1 1 auto; min-width: 0; width: auto; }
  .sat-nbtn { flex: none; min-width: 40px; min-height: 40px; padding: 0 10px; font-size: 1.2rem; line-height: 1; }
  .sat-today { flex: none; min-height: 40px; }
  .sat-wday { align-self: flex-end; padding-bottom: 10px; color: var(--muted); font-size: .9rem; font-weight: 600; }
  .sat-empty { padding: 24px 12px; text-align: center; color: var(--muted); }
  .sat-empty p { margin: 0 0 6px; }
  .sat-hint { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--ink); font-size: .86rem; }

  .sat-split.fit-split.left { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }

  /* ---------- รายการห้อง/คอร์สของวัน ---------- */
  .sat-progress-text { font-size: .86rem; font-weight: 700; color: var(--ink); }
  .sat-progress { flex: none; height: 6px; margin: -4px 0 10px; border-radius: 999px; background: var(--chip); overflow: hidden; }
  .sat-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--ok); transition: width .2s; }
  .sat-cards { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
  .sat-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;
  }
  .sat-card:hover { border-color: var(--brand); }
  .sat-card.todo { box-shadow: inset 3px 0 0 var(--warn-text, #b07100); }
  .sat-card.done { box-shadow: inset 3px 0 0 var(--ok); }
  .sat-card.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand); }
  .sat-card-top { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
  .sat-card-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
  .sat-card-sub, .sat-card-who { color: var(--muted); font-size: .82rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sat-card-who:empty { display: none; }
  .sat-card-foot { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: .82rem; min-width: 0; }
  .sat-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
  .sat-badge.course { background: var(--info-soft, #E7F0FB); color: var(--info-text, #1F5A96); }
  .sat-badge.mine { background: var(--brand-soft); color: var(--brand-strong); }
  .sat-done { color: var(--ok); font-weight: 700; white-space: nowrap; }
  .sat-todo { color: var(--warn-text, #7a5300); background: var(--warn-soft); padding: 1px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
  .sat-counts { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .sat-cnt { padding: 0 7px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

  /* สีสถานะ (ใช้ร่วม: ชิปนับ / สรุป / ตารางรายเดือน) */
  .sat-cnt.present, .sat-sumi.present, .sat-mx-v.present { background: var(--ok-soft); color: var(--ok); }
  .sat-cnt.late, .sat-sumi.late, .sat-mx-v.late { background: var(--warn-soft); color: var(--warn-text, #7a5300); }
  .sat-cnt.leave, .sat-sumi.leave, .sat-mx-v.leave { background: var(--info-soft, #E7F0FB); color: var(--info-text, #1F5A96); }
  .sat-cnt.absent, .sat-sumi.absent, .sat-mx-v.absent { background: var(--danger-soft); color: var(--danger); }

  /* ---------- ใบเช็กชื่อ ---------- */
  .sat-sheet { gap: 8px; }
  .sat-shead { display: flex; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; min-width: 0; flex: none; }
  .sat-stitle { flex: 1 1 200px; min-width: 0; }
  .sat-stitle h2 { margin: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
  .sat-stitle p { margin: 2px 0 0; overflow-wrap: anywhere; }
  .sat-back { display: none; }
  .sat-allp { flex: none; }
  .sat-who { margin: 0; flex: none; }
  .sat-sheet > .sat-hint { flex: none; }
  .sat-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: none; }
  .sat-sumi { display: flex; align-items: baseline; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm); min-width: 0; font-size: .84rem; }
  .sat-sumi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .sat-sumi strong { font-size: 1.05rem; }

  .sat-rows { display: flex; flex-direction: column; }
  .sat-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px;
    padding: 8px 4px; border-bottom: 1px solid var(--line); min-width: 0;
  }
  .sat-row:last-child { border-bottom: 0; }
  .sat-row.absent { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
  .sat-row.late { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
  .sat-row.leave { background: color-mix(in srgb, var(--info-soft, #E7F0FB) 55%, transparent); }
  .sat-name { display: flex; flex-direction: column; min-width: 0; }
  .sat-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sat-name .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sat-btns { display: flex; gap: 4px; flex: none; }
  .sat-st {
    width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--line);
    background: var(--surface); color: var(--muted); font: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .sat-st:disabled { cursor: default; opacity: .55; }
  .sat-st.on:disabled { opacity: .85; }
  .sat-st.present:not(.on):not(:disabled):hover { border-color: var(--ok); color: var(--ok); }
  .sat-st.late:not(.on):not(:disabled):hover { border-color: var(--warn-text, #b07100); color: var(--warn-text, #7a5300); }
  .sat-st.leave:not(.on):not(:disabled):hover { border-color: var(--info-text, #1F5A96); color: var(--info-text, #1F5A96); }
  .sat-st.absent:not(.on):not(:disabled):hover { border-color: var(--danger); color: var(--danger); }
  .sat-st.on { color: var(--surface); }
  .sat-st.present.on { background: var(--ok); border-color: var(--ok); }
  .sat-st.late.on { background: var(--warn-text, #b07100); border-color: var(--warn-text, #b07100); }
  .sat-st.leave.on { background: var(--info-text, #2563A8); border-color: var(--info-text, #2563A8); }
  .sat-st.absent.on { background: var(--danger); border-color: var(--danger); }
  .sat-rnote { grid-column: 1 / -1; width: 100%; min-width: 0; }

  .sat-foot { flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); background: var(--surface); }
  .sat-snote { width: 100%; min-width: 0; }
  .sat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .sat-lock { margin-right: auto; color: var(--warn-text, #7a5300); background: var(--warn-soft); padding: 4px 10px; border-radius: 999px; font-size: .84rem; font-weight: 600; }
  .sat-dirty { margin-right: auto; color: var(--warn-text, #7a5300); font-size: .84rem; font-weight: 600; }
  .sat-del { color: var(--danger); }
  .sat-save { min-width: 160px; min-height: 44px; }

  /* ---------- สรุปรายเดือน ---------- */
  .sat-mpane, .sat-wpane { gap: 8px; }
  .sat-mx-wrap { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .sat-mx { border-collapse: separate; border-spacing: 0; min-width: 100%; width: max-content; }
  .sat-mx th, .sat-mx td { white-space: nowrap; vertical-align: middle; padding: 6px 6px; }
  .sat-mx thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
  .sat-mx .sat-mx-stu {
    position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 400;
    white-space: normal; min-width: 150px; max-width: 220px; box-shadow: inset -1px 0 0 var(--line);
  }
  .sat-mx .sat-mx-stu strong, .sat-mx .sat-mx-stu small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sat-mx thead th.sat-mx-stu { z-index: 3; box-shadow: inset -1px -1px 0 var(--line); }
  .sat-mx .sat-mx-d { text-align: center; min-width: 30px; line-height: 1.1; }
  .sat-mx .sat-mx-d small { display: block; color: var(--muted); font-size: .68rem; font-weight: 400; }
  .sat-mx .sat-mx-c { text-align: center; padding: 4px 2px; }
  .sat-mx-v { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: .8rem; font-weight: 700; }
  .sat-mx-none { color: var(--muted); }
  .sat-mx .sat-mx-t { font-variant-numeric: tabular-nums; }
  .sat-mx thead th.sat-mx-t.present { color: var(--ok); }
  .sat-mx thead th.sat-mx-t.late { color: var(--warn-text, #7a5300); }
  .sat-mx thead th.sat-mx-t.leave { color: var(--info-text, #1F5A96); }
  .sat-mx thead th.sat-mx-t.absent { color: var(--danger); }
  .sat-mx td.bad { color: var(--danger); font-weight: 700; }

  /* ---------- ขาดบ่อย ---------- */
  .sat-whint { margin: 0; flex: none; }
  .sat-wmeta { display: block; font-weight: 400; }
  .sat-wabs { color: var(--danger); font-weight: 700; }
  .sat-tel { color: var(--brand-strong); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .sat-tel:hover { text-decoration: underline; }
  .sat-wgo { min-height: 40px; }

  /* ---------- รอบ 59b-2: รายคาบ ---------- */
  .sat-adhoc { min-height: 40px; margin-left: auto; white-space: nowrap; }
  .sat-sort select { width: 190px; }
  .sat-ghead {
    flex: none; margin: 6px 0 -2px; padding: 0 2px; color: var(--muted); font-size: .8rem; font-weight: 700;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sat-ghead:first-child { margin-top: 0; }
  .sat-ptime {
    flex: none; padding: 1px 8px; border-radius: 6px; background: var(--chip); color: var(--ink);
    font-size: .76rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .sat-speriod { margin: 2px 0 0; font-size: .88rem; font-weight: 600; color: var(--brand-strong); overflow-wrap: anywhere; }

  /* สรุปรายวิชา: นักเรียน × วิชา (เลื่อนในกรอบ) */
  .sat-mpane, .sat-spane, .sat-hpane { gap: 8px; }
  .sat-pv .sat-pv-h { min-width: 72px; max-width: 120px; white-space: normal; text-align: center; font-size: .8rem; line-height: 1.2; overflow-wrap: anywhere; }
  .sat-pv .sat-pv-c { text-align: center; padding: 4px 6px; line-height: 1.2; }
  .sat-pv-a, .sat-pv-p, .sat-pv-x { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .sat-pv-a { font-size: .82rem; font-weight: 600; }
  .sat-pv-p { font-size: .74rem; color: var(--muted); }
  .sat-pv-x { font-size: .7rem; color: var(--muted); }
  .sat-pv .sat-pv-c.warn { background: var(--danger-soft); }
  .sat-pv .sat-pv-c.warn .sat-pv-a, .sat-pv .sat-pv-c.warn .sat-pv-p { color: var(--danger); font-weight: 700; }

  .sat-adhocbox select { width: 100%; min-width: 0; }
}

/* จอคอม: แต่ละแท็บเต็มความสูง เลื่อนในกรอบ */
@media screen and (min-width: 1025px) {
  .sat-body > .sat-mpane, .sat-body > .sat-wpane, .sat-body > .sat-spane, .sat-body > .sat-hpane { flex: 1 1 auto; min-height: 0; overflow: hidden; }
}

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

@media screen and (max-width: 760px) {
  .sat-bar { gap: 8px; }
  .sat-filter { flex: 1 1 140px; }
  .sat-filter select, .sat-filter input { max-width: none; width: 100%; }
  .sat-dnav { flex: 1 1 100%; }
  .sat-tsel { flex: 1 1 100%; }
  .sat-tsel select { width: 100%; }
  .sat-wday { padding-bottom: 0; }
  .sat-wgo { flex: 1 1 100%; }
  .sat-adhoc { flex: 1 1 100%; margin-left: 0; }
  .sat-sort select { width: 100%; }
  .sat-pv .sat-pv-h { min-width: 64px; max-width: 90px; }
  .sat-sheet { padding: 12px; }
  .sat-shead .sat-allp { min-height: 40px; }
  .sat-row { padding: 8px 2px; gap: 6px 8px; }
  .sat-btns { gap: 3px; }
  .sat-st { width: 40px; height: 42px; border-radius: 10px; }
  /* ปุ่มบันทึกติดล่างจอ เหนือแถบปุ่มลัด */
  .sat-foot { position: sticky; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 4; margin: 0 -12px -12px; padding: 8px 12px 12px; box-shadow: 0 -6px 12px -8px rgba(0,0,0,.25); }
  .sat-actions .btn { flex: 1 1 auto; }
  .sat-save { min-width: 0; }
  .sat-mx .sat-mx-stu { min-width: 120px; max-width: 140px; }
  .sat-mx-wrap { max-height: 72vh; }
}

@media screen and (max-width: 360px) {
  .sat-st { width: 36px; }
}

/* รอบ 62d: เบอร์ผู้ปกครอง + ปุ่ม WhatsApp (แท็บขาดบ่อย) */
.sat-wphone { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; }