/* ส่วนเพิ่มของระบบธุรการชั้นเรียน (ต่อจาก style.css) */

/* ---------- มือถือ (เมนู ☰ อยู่ใน style.css) ---------- */
@media (max-width: 760px) {
  main.content { padding: 12px; }
  main.content h1 { font-size: 1.35rem; margin: .2rem 0 .6rem; }
  input, select, button { font-size: 16px; } /* กัน iPhone ซูมเข้าตอนแตะช่องกรอก */
  .daybar { gap: .4rem; }
  .daybar > b { flex-basis: 100%; }
}

/* ---------- แดชบอร์ด ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.tile { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .6rem .7rem; text-decoration: none; color: var(--text); display: block; }
.tile .t-name { font-weight: 700; font-size: 1.15rem; }
.tile .t-sub { color: var(--muted); font-size: .9rem; line-height: 1.3; }
.tile.done { border-color: #9fd3ad; background: var(--success-soft); }
.tile.todo { border-color: #f1b8b2; background: var(--danger-soft); }
.tile.mine { box-shadow: 0 0 0 2px var(--primary) inset; }
.tile:hover { filter: brightness(.97); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; }
.kpi b { display: block; font-size: 1.8rem; line-height: 1.1; }
.kpi span { color: var(--muted); font-size: .9rem; }
.kpi.green b { color: var(--success); }
.kpi.red b { color: var(--danger); }
.kpi.yellow b { color: var(--warn); }
.daybar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.daybar input[type=date] { width: auto; }

/* ---------- หน้าเช็คชื่อ ---------- */
.checklist { display: flex; flex-direction: column; gap: .35rem; }
.crow { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .5rem; align-items: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .35rem .5rem; }
.crow .no { text-align: center; color: var(--muted); font-weight: 700; }
.crow .nm { line-height: 1.2; }
.crow .nm small { color: var(--muted); display: block; }
.crow.moved { opacity: .55; background: #f1f1f1; }
.crow.st-absent .nm small { color: var(--danger); }
.attbtns { display: flex; gap: .25rem; }
.attbtns button { min-width: 3.4rem; padding: .45rem .5rem; background: #fff; color: var(--text); border: 1px solid var(--border); font-weight: 700; }
.attbtns button:hover { background: #f3f5f8; }
.attbtns button.on[data-a="ม"] { background: var(--success); border-color: var(--success); color: #fff; }
.attbtns button.on[data-a="ป"] { background: #2f6fb3; border-color: #2f6fb3; color: #fff; }
.attbtns button.on[data-a="ล"] { background: #9a6700; border-color: #9a6700; color: #fff; }
.attbtns button.on[data-a="ข"] { background: var(--danger); border-color: var(--danger); color: #fff; }
.checkbar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: .6rem 0; margin-top: .8rem;
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; z-index: 2; }
.checkbar .sum { flex: 1; min-width: 200px; }
.crow { grid-template-columns: 2.2rem minmax(9rem, 1fr) auto; }
.crow .extras { grid-column: 2 / -1; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.crow .extras:empty { display: none; }
.extras .tog { padding: .2rem .55rem; font-size: .9rem; background: #fff; color: var(--muted); border: 1px solid var(--border); font-weight: 400; }
.extras .tog.on { background: var(--success-soft); color: var(--success); border-color: #9fd3ad; font-weight: 700; }
.extras .tog:disabled { opacity: .45; }
.extras .milk { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--border); border-radius: 6px; padding: .1rem .35rem; background: #fff; }
.extras .milk.off { opacity: .45; }
.extras .milk b { min-width: 1.2rem; text-align: center; }
.extras .mstep { padding: 0 .45rem; font-size: .95rem; background: var(--primary-soft); color: var(--primary); border: 0; }
.milkbar { padding: .6rem .8rem; }
.milkbar input { display: inline-block; }
/* หน้าเช็คชื่อ: จอกว้าง = รายชื่อซ้าย ปฏิทินขวา · จอแคบ = ปฏิทินพับเก็บด้านบน */
.checkgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.checkgrid .checkside { grid-column: 2; grid-row: 1; position: sticky; top: .5rem; }
.checkgrid .checkmain { grid-column: 1; grid-row: 1; min-width: 0; }
.calbox summary { cursor: pointer; list-style: none; }
.calbox summary::-webkit-details-marker { display: none; }
.checkbar .cbtns { display: flex; gap: .5rem; }
.checkbar .msg { flex-basis: 100%; margin: 0; }
@media (max-width: 760px) {
  .checkgrid { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .checkgrid .checkside { grid-column: 1; grid-row: 1; position: static; }
  .checkgrid .checkmain { grid-column: 1; grid-row: 2; }
  .calbox { padding: .5rem .7rem; margin-bottom: 0; }
  .mcal { max-width: none; }
  .mcal a, .mcal span.x { padding: .45rem 0; }
  .crow { grid-template-columns: 2rem minmax(0, 1fr); padding: .5rem; gap: .35rem .5rem; }
  .crow .nm { font-size: 1.05rem; }
  .attbtns { grid-column: 1 / -1; }
  .attbtns button { flex: 1; min-width: 0; min-height: 44px; padding: .35rem .2rem; font-size: 1rem; }
  .crow .extras { grid-column: 1 / -1; }
  .extras .tog { min-height: 38px; flex: 1; }
  .extras .milk { min-height: 38px; }
  .extras .mstep { min-width: 34px; min-height: 30px; }
  .checkbar { position: sticky; bottom: 0; margin: .6rem -12px 0; padding: .5rem 12px calc(.5rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
  .checkbar .sum { flex-basis: 100%; min-width: 0; font-size: .95rem; }
  .checkbar .cbtns { flex: 1; }
  .checkbar .cbtns button { flex: 1; min-height: 46px; }
  .milkbar .hint { display: none; }
}

/* ---------- ตารางกรอกข้อมูลรายคน: จอแคบแสดงเป็นการ์ด (ไม่ต้องเลื่อนข้าง) ---------- */
.rtable td.c-name { white-space: nowrap; }
@media (max-width: 760px) {
  .table-wrap:has(> table.rtable) { overflow: visible; border: 0; background: none; }
  table.rtable, table.rtable tbody { display: block; width: 100%; }
  table.rtable thead { display: none; }
  table.rtable tr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .6rem; margin-bottom: .45rem; }
  table.rtable td { display: block; border: 0 !important; padding: 0 !important; }
  table.rtable td.c-no { min-width: 1.6rem; color: var(--muted); font-weight: 700; text-align: left; }
  table.rtable td.c-name { flex: 1; white-space: normal; font-weight: 700; }
  table.rtable td.c-sub { font-size: .9rem; color: var(--muted); }
  table.rtable td[data-label]:not(:empty)::before { content: attr(data-label) ' '; font-size: .85rem; color: var(--muted); }
  table.rtable td.c-in { flex: 1 1 40%; display: flex; flex-direction: column; }
  table.rtable td.c-in::before { margin-bottom: .1rem; }
  table.rtable td.c-in input { width: 100% !important; min-height: 44px; font-size: 18px; }
  table.rtable td.c-res { flex: 1 1 30%; font-size: .9rem; }
  table.rtable td.c-res::before { display: block; }
  table.rtable td.c-act button { min-height: 40px; }
  .rt-growth td.c-sub[data-label="อายุ"] { flex-basis: 100%; order: 1; }
  .rt-growth td.c-name { order: 0; }
  .rt-growth td.c-no { order: 0; }
  .rt-growth td.c-in { order: 2; }
  .rt-growth td.c-res { order: 3; }
  .rt-growth td.c-sub[data-label="ภาคก่อน"] { order: 4; flex-basis: 100%; }
}

/* ---------- ปฏิทินเดือน ---------- */
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 520px; }
.mcal .h { text-align: center; font-size: .85rem; color: var(--muted); }
.mcal a, .mcal span.x { display: block; text-align: center; border-radius: 6px; padding: .25rem 0; font-size: .95rem; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.mcal a.school { background: #fff; border-color: var(--border); }
.mcal a.school.todo { background: var(--danger-soft); border-color: #f1b8b2; }
.mcal a.school.done { background: var(--success-soft); border-color: #9fd3ad; }
.mcal a.off { color: #aaa; }
.mcal a.sel { box-shadow: 0 0 0 2px var(--primary); }
.mcal a.future { color: #bbb; pointer-events: none; }
.legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin-top: .4rem; }
.legend i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: .2rem; border: 1px solid var(--border); }

/* ---------- จัดเลขที่แบบเรียงเอง ---------- */
.mlist { list-style: none; padding: 0; margin: 0; max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.mlist li { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem; border-bottom: 1px solid var(--border); background: #fff; flex-wrap: wrap; }
.mlist li:last-child { border-bottom: 0; }
.mlist li.chg { background: #fff7d6; }
.mlist li.moved { background: #dcebff; }
.mlist li.dragging { opacity: .5; }
.mlist .grip { color: #888; cursor: grab; padding: 0 .15rem; font-size: 1.1rem; user-select: none; }
.mlist .pnow { min-width: 1.8rem; text-align: center; font-size: 1.05rem; }
.mlist .mn { flex: 1 1 10rem; min-width: 0; }
.mlist .mn small { display: block; font-size: .78rem; }
.mlist .mo-from { color: var(--primary); font-weight: 600; }
.mlist button { padding: .15rem .5rem; min-width: 2.2rem; }
.mo-btns { display: flex; gap: .25rem; align-items: center; }
.mo-to { display: inline-flex; gap: .25rem; margin-left: .2rem; }
.mlist .pos { width: 4.2rem; text-align: center; padding: .2rem; }
.mo-tools { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: .3rem 0; }
.mo-note { margin: .2rem 0 .4rem; padding: .3rem .55rem; border-radius: var(--radius); background: var(--primary-soft, #e7eef8); color: var(--primary); font-size: .92rem; }
.mo-note:empty { display: none; }
.mo-note.bad { background: var(--danger-soft, #fdecea); color: var(--danger, #b42318); }
@media (max-width: 760px) {
  .mo-btns { flex: 1 1 100%; flex-wrap: wrap; }
  .mo-btns > button { flex: 1 1 0; min-height: 2.4rem; }
  .mo-to { flex: 1 1 100%; margin: .15rem 0 0; }
  .mo-to .pos { flex: 1; width: auto; }
}

/* ---------- ทั่วไป ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.inline { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.inline .field { margin: 0; }
.optlist label { display: block; font-weight: 400; margin: .2rem 0; }
.optlist input { width: auto; }
dialog { max-width: 560px; width: calc(100% - 2rem); }

/* ---------- งานที่โรงเรียนใช้ ---------- */
.modlist { max-width: 640px; }
.modlist .mod { display: flex; align-items: center; gap: .7rem; padding: .6rem .4rem; border-bottom: 1px solid var(--border); font-weight: 400; cursor: pointer; margin: 0; }
.modlist .mod input { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.modlist .mod .ic { font-size: 1.5rem; width: 2rem; text-align: center; }
.modlist .mod small { display: block; color: var(--muted); }
.modlist .mod.fixed { opacity: .75; cursor: default; }
.modlist button[type=submit] { margin-top: .8rem; }

/* ---------- ต่อจากเช็คชื่อ ---------- */
.nextlinks { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.t-meals { display: flex; gap: .45rem; margin: .1rem 0; font-size: .85rem; }
.t-meals .ok { color: var(--success); font-weight: 700; }
.t-meals .no { color: var(--danger); }

/* ---------- นม / อาหารกลางวัน / แปรงฟัน (หน้าละเรื่อง) ---------- */
.mrow { grid-template-columns: 2.2rem minmax(8rem, 1fr) auto; }
.mrow.absent { background: #f6f6f6; }
.mrow.absent .nm { color: var(--muted); }
.mcell { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.mabs { color: var(--muted); }
.mtog { min-width: 9.5rem; background: #fff; color: var(--muted); border: 1px solid var(--border); font-weight: 400; }
.mtog.on { background: var(--success-soft); color: var(--success); border-color: #9fd3ad; font-weight: 700; }
.mstepper { display: inline-flex; align-items: center; gap: .35rem; }
.mstepper b { min-width: 1.4rem; text-align: center; font-size: 1.1rem; }
.mstepper .mstep { padding: .15rem .6rem; font-size: 1.05rem; background: var(--primary-soft); color: var(--primary); border: 0; }

/* ---------- กิจกรรมโฮมรูม ---------- */
.weekbar { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; }
.weekbar .wk { flex: 1; display: flex; gap: .6rem; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.weekbar .wk input { width: auto; }
.weekbar > button { min-width: 3rem; font-size: 1.2rem; }
.hr-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .7rem; }
.hr-day { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.hr-day .field { margin: 0; }
.hr-head { font-size: 1.05rem; }
.hr-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.hr-no { display: inline-flex; align-items: center; gap: .3rem; margin: 0; font-weight: 400; }
.hr-no input { width: 4.2rem; text-align: center; }
.hr-no input::placeholder { color: #9aa3ad; }
.chip { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: .9rem; text-decoration: none; color: var(--text); }
.chip.warn { background: var(--danger-soft); border-color: #f1b8b2; color: var(--danger); }
.hr-held { display: flex; align-items: center; gap: .45rem; font-weight: 400; margin: 0; }
.hr-held input { width: 1.2rem; height: 1.2rem; }
.hr-day textarea { width: 100%; resize: vertical; line-height: 1.45; font-size: 1rem; min-height: 3.2em; }
.hr-day.nohr { background: #fffaf0; }
.hr-day.off { background: #f1f1f1; color: var(--muted); }
.hr-off { font-size: 1.05rem; padding: .6rem 0; }
@media (max-width: 760px) {
  .mrow { grid-template-columns: 2rem minmax(0, 1fr); }
  .mrow .mcell { grid-column: 1 / -1; justify-content: stretch; }
  .mtog { flex: 1; min-height: 44px; font-size: 1rem; }
  .mstepper { flex: 1; justify-content: center; }
  .mstepper .mstep { min-width: 48px; min-height: 42px; font-size: 1.3rem; }
  .mstepper b { font-size: 1.3rem; }
  .hr-days { grid-template-columns: 1fr; }
  .hr-day textarea { font-size: 17px; }
  .hr-no input { min-height: 40px; font-size: 17px; }
  .weekbar { position: sticky; top: 46px; z-index: 5; }
  .weekbar .wk b { flex-basis: 100%; }
  .weekbar > button { min-height: 44px; }
}

/* ---------- รายงานครูประจำชั้น: เลือกครั้งเดียว แล้วพิมพ์ทีละเล่ม ---------- */
.rp-pick { display: flex; flex-direction: column; gap: .7rem; position: sticky; top: 0; z-index: 5; }
.rp-row { display: flex; gap: .7rem; align-items: flex-start; }
.rp-row .field { margin: 0; }
.rp-step { flex-shrink: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; margin-top: .15rem; }
.rp-now { padding-top: .25rem; }
.rp-pick .seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.rp-pick .seg button { background: #fff; color: var(--text); border: 1px solid var(--border); font-weight: 400; }
.rp-pick .seg button.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.book { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.book .bk-h { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; }
.book .bk-ic { font-size: 1.6rem; line-height: 1; }
.book .bk-p { color: var(--muted); font-size: .9rem; line-height: 1.35; flex: 1; }
.book .bk-why { margin: 0; color: var(--warn); }
.book .bk-a { display: flex; flex-wrap: wrap; gap: .4rem; }
.book.all { border: 2px solid var(--primary); }
@media (max-width: 760px) {
  .rp-pick { position: static; padding: .7rem; }
  .rp-row { gap: .5rem; }
  .rp-row .field, .rp-row select { width: 100%; }
  .rp-pick .seg button { flex: 1 1 auto; min-height: 42px; }
  .books { grid-template-columns: 1fr; }
  .book .bk-a button { flex: 1 1 100%; min-height: 46px; }
}
.rp-pick .rp-sub { margin-top: .4rem; display: flex; gap: .4rem; }
.rp-pick .rp-sub input, .rp-pick .rp-sub select { width: auto; }