/* ============================================
   ระบบสารสนเทศนักเรียน โรงเรียนบ้านเหล็ก
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap');

:root {
  --navy: #16305c;
  --navy-2: #1e4180;
  --sky: #eef4fc;
  --gold: #f5b301;
  --gold-soft: #fff4d6;
  --ink: #22314a;
  --muted: #6b7a94;
  --line: #dde6f2;
  --white: #ffffff;
  --green: #1e9e6a;
  --green-soft: #e2f6ed;
  --red: #d64545;
  --red-soft: #fdeaea;
  --orange: #e08a00;
  --orange-soft: #fff1dc;
  /* สีหัวตาราง — เขียวน้ำทะเลเข้ม ตัวอักษรสีขาว */
  --teal: #0f7580;
  --teal-dark: #0b5a63;
  /* ฟอนต์หลักของทั้งระบบ — เปลี่ยนที่นี่ที่เดียวได้เลย
     (ถ้าจะเปลี่ยนฟอนต์ อย่าลืมแก้บรรทัด @import ด้านบนให้ตรงกัน) */
  --font: 'Sarabun', 'Segoe UI', 'Tahoma', sans-serif;

  --side: #2f3538;          /* สีพื้นแถบเมนูด้านข้าง */
  --side-text: #ccd3d6;     /* สีตัวอักษรบนแถบเมนู */
  --side-dim: #98a3a8;      /* สีตัวอักษรรอง (หัวข้อกลุ่มเมนู) */
  --radius: 14px;
  --shadow: 0 2px 10px rgba(22, 48, 92, .07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font);
  background: var(--sky);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: var(--font); font-weight: 600; }
a { color: var(--navy-2); text-decoration: none; }

/* ---------- โครงหน้า ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--side);
  color: var(--side-text); padding: 22px 14px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display:flex; align-items:center; gap:10px; padding: 4px 10px 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 14px; }
.brand .logo {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--gold); color: var(--side);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font); font-size: 20px; font-weight: 600;
}
.brand b { color:#fff; font-family: var(--font); font-weight:500; font-size:16px; display:block; line-height:1.25;}
.brand small { font-size: 12px; color: var(--side-dim); }

/* หัวข้อกลุ่มเมนู — ขนาดตัวอักษรเท่ากับรายการเมนู แยกความต่างด้วยสีและความหนา
   มีเส้นคั่นด้านบนเพื่อแบ่งกลุ่มให้ชัด (ยกเว้นกลุ่มแรกที่ติดกับชื่อโรงเรียนอยู่แล้ว) */
.nav-label {
  font-size: 15px; font-weight: 600; color: var(--side-dim);
  padding: 8px 12px 5px; margin-top: 4px;      /* ระยะเหนือหัวข้อกลุ่ม (เส้นคั่นอยู่ระหว่าง margin กับ padding) */
  border-top: 1px solid rgba(255,255,255,.22);
}
.brand + .nav-label { margin-top: 0; border-top: 0; }
.sidebar a.nav {
  display:flex; align-items:center; gap: 10px;
  /* ย่อหน้าเข้าไปจากหัวข้อกลุ่ม เพื่อให้เห็นว่าเป็นเมนูย่อยของกลุ่มนั้น */
  padding: 9px 12px 9px 24px; margin-left: 4px;
  border-radius: 10px; color: var(--side-text); font-size: 15px;
  transition: background .15s;
}
.sidebar a.nav:hover { background: rgba(255,255,255,.08); }
.sidebar a.nav.active { background: var(--gold); color: var(--side); font-weight: 600; }

/* แถวเมนู 2.x (เช็คลิสต์งานประจำวัน) — ดับเบิลคลิกชื่อเมนูเพื่อทำเครื่องหมาย "วันนี้เสร็จแล้ว"
   ย่อหน้าลึกกว่าเมนูอื่น (46px) ให้เห็นว่าเป็นหัวข้อย่อยของกลุ่ม */
.nav-row { display: flex; align-items: center; margin-left: 4px; }
/* บีบระยะบน-ล่างของลิงก์ในแถวนี้ลง — ระยะเดิม (9px) ออกแบบมาสำหรับแถวที่มีไอคอนสูงเต็มบรรทัด
   user-select: ดับเบิลคลิกแล้วไม่ลากแถบเลือกข้อความ */
.nav-row a.nav { flex: 1; margin-left: 0; padding-left: 46px; padding-top: 1px; padding-bottom: 1px; user-select: none; }   /* ย่อหน้าลึกกว่าเมนูอื่น ให้เห็นว่าเป็นหัวข้อย่อยของ "2." */
.nav-row + .nav-row { margin-top: -4px; }   /* หักช่อง gap 4px ของแถบเมนูออกทั้งหมด ให้รายการย่อยชิดกันกว่าเมนูหลัก */
.nav-label + .nav-row { margin-top: -7px; } /* รายการแรกชิดหัวข้อกลุ่ม "2." มากขึ้น (หัก gap 4px + ระยะใต้หัวข้ออีก 3px) */
/* แถวที่ทำเครื่องหมายแล้ว — ชื่อเมนูหน้าตาเดิม เติมแค่ ✓ สีเขียวต่อท้าย */
/* ลิงก์เป็น flex ที่มี gap 10px อยู่แล้ว — ใส่ margin ติดลบหักออกให้ ✓ เหลือห่างจากชื่อเมนูราว 4px */
.nav-row.done a.nav::after { content: '✓'; margin-left: -6px; color: #6fe3a6; font-weight: 700; }
.nav-row.done a.nav.active::after { color: #1b5e3a; }   /* บนแถบทองใช้เขียวเข้มให้เห็นชัด */
.sidebar .spacer { flex: 1; }
.userbox { background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.userbox b { color: #fff; display:block; font-size: 14px; }
.userbox a { color: var(--gold); font-size: 13px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-inner { padding: 16px 30px 40px; }

/* ---------- แถบหัวด้านบน (topbar) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 9px 18px;
  background: var(--side); color: var(--side-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.topbar-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title b { color: #fff; font-weight: 600; }
.topbar-title .dim { color: var(--side-dim); font-size: 13.5px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.topbar-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(255,255,255,.09); border-radius: 99px;
  padding: 6px 14px; font-size: 13.5px;
}
.topbar-chip.ok  { background: rgba(30,158,106,.28); color: #a9ebd0; }
.topbar-chip.off { background: rgba(214,69,69,.28);  color: #f5bcbc; }

.topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.09); color: var(--side-text); border: 0; cursor: pointer;
  font-family: var(--font); font-size: 15px; border-radius: 10px; padding: 7px 13px;
  transition: background .15s;
}
.topbar-btn:hover { background: rgba(255,255,255,.2); }
.topbar-btn.user .caret { font-size: 11px; color: var(--side-dim); }

.topbar-user { position: relative; }
.topbar-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 9px); min-width: 230px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 26px rgba(22,48,92,.2); overflow: hidden; z-index: 40;
}
.topbar-user.open .topbar-menu { display: block; }
.topbar-menu .who { padding: 11px 15px; background: var(--sky); font-size: 13px; color: var(--muted); line-height: 1.45; }
.topbar-menu .who b { display: block; color: var(--ink); font-size: 15px; }
.topbar-menu a { display: block; padding: 11px 15px; font-size: 15px; border-top: 1px solid var(--line); }
.topbar-menu a:hover { background: var(--sky); }
.topbar-menu a.danger { color: var(--red); }

/* ปุ่ม ☰ ซ่อนเมนูด้านข้าง */
.app.sidebar-hidden .sidebar { display: none; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom: 14px; }
.page-head h1 { font-size: 24px; color: var(--navy); }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.head-stats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- การ์ด ---------- */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; }
.card h2 { font-size: 17px; color: var(--navy); margin-bottom: 12px; }

.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px;}
.stat {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; border-left: 5px solid var(--gold);
}
.stat .num { font-family: var(--font); font-size: 28px; font-weight:600; color: var(--navy); }
.stat .lab { font-size: 13.5px; color: var(--muted); }
.stat.green { border-left-color: var(--green); }
.stat.red { border-left-color: var(--red); }
.stat.blue { border-left-color: var(--navy-2); }

/* ---------- ตาราง ---------- */
.table-wrap { overflow-x:auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th {
  background: var(--teal); color: #fff; text-align: center;
  padding: 10px 12px; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid var(--teal-dark);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* ให้สีหัวตารางติดไปตอนพิมพ์ด้วย */
}
table.data td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
/* เส้นคั่นคอลัมน์ — ช่วยให้กวาดสายตาลงตามแนวตั้งไม่หลุดคอลัมน์ (ไม่ใส่เส้นซ้ายสุด/ขวาสุด) */
table.data th + th, table.data td + td { border-left: 1px solid var(--line); }
table.data th + th { border-left-color: rgba(255,255,255,.28); }   /* บนพื้นเขียวเข้ม เส้นขาวจาง ๆ อ่านง่ายกว่า */
table.data tr:hover td { background: #f7fafd; }
table.data td.c, table.data th.c { text-align:center; }
table.data td.r, table.data th.r { text-align:right; }

/* ---------- ตารางเช็คประจำเดือน (แถว = นักเรียน · คอลัมน์ = วันที่) ---------- */
/* กว้างตามเนื้อหา (ไม่ยืดเต็มการ์ด) — คอลัมน์ชื่อจึงกว้างเท่าชื่อที่ยาวสุด ไม่รับความกว้างส่วนเกินมาเป็นช่องว่าง
   เดือนไหนวันเยอะจนกว้างกว่าจอ เลื่อนดูได้ใน .table-wrap */
table.data.grid { width: auto; }
table.data.grid th, table.data.grid td { padding: 5px 7px; }
/* ห้ามใช้ width:1% กับตารางกว้าง auto — เบราว์เซอร์จะยืดตารางจนเต็มกล่องเพื่อให้สัดส่วน % เป็นจริง
   แล้วโยนส่วนเกินไปกองที่คอลัมน์ชื่อ · nowrap อย่างเดียวก็ทำให้ช่องแคบเท่าเนื้อหาแล้ว */
table.data.grid .day-col { white-space: nowrap; }          /* ช่องวันที่บีบให้แคบที่สุดเท่าที่เนื้อหาไหว */
/* สองคอลัมน์สรุปท้ายตาราง */
table.data.grid .sum-col { white-space: nowrap; }
table.data.grid td.sum-good { font-weight: 600; }
table.data.grid td.sum-pct { color: var(--muted); }
/* ช่องเลือกตัวย่อ (ดรอปดาวน์ 1/ข/ล/ป) — ตัด appearance ให้เหลือกล่องเรียบ ๆ เท่าช่องกรอก */
table.data.grid select.cell {
  appearance: none; -webkit-appearance: none;
  width: 38px; padding: 5px 2px; text-align: center; text-align-last: center;
  font-size: 15px; font-weight: 600; border-radius: 8px; cursor: pointer;
}
table.data.grid select.cell.is-good  { background: var(--green-soft); border-color: #9fdcc2; color: var(--green); }
table.data.grid select.cell.is-bad   { background: var(--red-soft);   border-color: #f0b9b9; color: var(--red); }
/* คู่มือตัวย่อ + ที่มาของคอลัมน์วันที่ — อยู่ในแถบตัวกรองแถวเดียวกัน
   ตัวอักษรกับระยะบน-ล่างต้องเท่ากันทั้งคู่ ทั้งสองก้อนจึงสูงเท่ากันและตัวหนังสือตรงแนวเดียวกัน
   (.filter-bar จัดของชิดขอบล่าง — ถ้า padding ต่างกันเมื่อไร ตัวหนังสือจะเหลื่อมกันทันที) */
.key-hint, .cal-note { font-size: 13.5px; line-height: 1.6; padding: 7px 0; }
.key-hint {
  flex: 0 0 auto; min-width: 0;
  color: var(--ink); background: var(--sky);
  padding-left: 14px; padding-right: 14px; border-radius: 10px;
}
.cal-note { flex: 1 1 300px; min-width: 0; color: var(--muted); }
/* ปุ่มเติมทั้งตาราง — อยู่ในแถบตัวกรอง ระยะบน-ล่างเท่ากับสองก้อนข้างบนจึงอยู่แนวเดียวกัน */
.fill-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; }
.fill-row span { font-size: 13px; color: var(--muted); }

/* แถวปุ่มบันทึก — ที่มาปฏิทินเกาะอยู่ข้างปุ่ม จอแคบก็ตกลงบรรทัดใหม่เอง */
.save-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.key-hint b {
  display: inline-block; min-width: 20px; text-align: center;
  background: #fff; border: 1.5px solid var(--line); border-radius: 6px;
  padding: 0 5px; margin: 0 2px; color: var(--navy-2);
}
/* เลขวันที่บนหัวตาราง = ปุ่มเติมทั้งคอลัมน์ */
table.data.grid .day-btn {
  background: none; border: 0; color: inherit; cursor: pointer;
  font: inherit; padding: 2px 4px; border-radius: 6px;
}
table.data.grid .day-btn:hover { background: rgba(255,255,255,.22); }
table.data.grid th.makeup { background: var(--gold); color: var(--navy); }   /* วันเรียนชดเชย */
/* แถวชื่อวันในสัปดาห์ ใต้เลขวันที่
   หรี่เฉพาะสีตัวอักษร ห้ามใช้ opacity เพราะจะทำให้พื้นหลังจางไปด้วยจนสีหัวตารางไม่เท่ากัน */
table.data.grid tr.dow th { padding-top: 0; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.85); }
table.data.grid tr.dow th.makeup { color: var(--navy); }
table.data.grid tr.dow th:first-child { border-left: 1px solid rgba(255,255,255,.28); }

/* สองคอลัมน์แรกตรึงไว้ เลื่อนดูวันที่ท้ายเดือนแล้วยังเห็นว่าเป็นของใคร
   (ใช้ box-shadow วาดเส้นขวา เพราะ border ของเซลล์ sticky หายตอนเลื่อน) */
table.data.grid .pin-no, table.data.grid .pin-name { position: sticky; z-index: 2; }
/* ความกว้างจริงของช่อง "ที่" ต้องเท่ากับ left ของช่องชื่อเป๊ะ ๆ (box-sizing รวมขอบ/ระยะในให้แล้ว)
   ไม่งั้นตอนเลื่อนแนวนอนจะมีร่องโหว่ระหว่างสองคอลัมน์ที่ตรึงไว้ ให้เห็นเนื้อหาที่เลื่อนอยู่ข้างใต้ */
table.data.grid .pin-no   { left: 0; width: 42px; min-width: 42px; max-width: 42px; box-sizing: border-box; }
table.data.grid .pin-name { left: 42px; min-width: 120px; white-space: nowrap; }   /* nowrap = กว้างเท่าชื่อยาวสุดพอดี ไม่ตัดบรรทัด */
/* เส้นของสองคอลัมน์ที่ตรึงไว้ — เส้นคั่นปกติ (border) จะหายไปเมื่อเซลล์เป็น sticky บนตาราง border-collapse
   จึงวาดใหม่ด้วย inset box-shadow แทนทุกเส้น: ขอบซ้ายนอกสุดของ "ที่" และขอบขวาของทั้งสองคอลัมน์ */
table.data.grid th.pin-no, table.data.grid th.pin-name {
  background: var(--teal);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.28);
}
table.data.grid td.pin-no, table.data.grid td.pin-name {
  background: #fff;
  box-shadow: inset -1px 0 0 var(--line);
}
table.data.grid td.pin-no { box-shadow: inset -1px 0 0 var(--line), inset 1px 0 0 var(--line); }
table.data.grid tr:hover td.pin-no, table.data.grid tr:hover td.pin-name { background: #f7fafd; }
/* กรอบขวานอกสุดของตาราง (คอลัมน์ "ร้อยละ" ไม่ sticky ใช้ border ปกติได้)
   จำกัดเฉพาะแถวหัวแถวแรก เพราะแถวชื่อวัน (dow) ตัวสุดท้ายคือช่องวันที่ ไม่ใช่ขอบตาราง */
table.data.grid tr:first-child th:last-child, table.data.grid td:last-child { border-right: 1px solid var(--line); }

/* ---------- ปุ่ม / ฟอร์ม ---------- */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  background: var(--navy-2); color:#fff; border:0; cursor:pointer;
  padding: 9px 18px; border-radius: 10px; font-family: var(--font); font-size: 15px; font-weight:600;
  line-height: normal;   /* <a>/<summary> ที่ใช้เป็นปุ่มจะได้สูงเท่า <button> (ไม่รับ line-height 1.65 ของ body มา) */
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.12); }
.btn.gold { background: var(--gold); color: var(--navy); }
.btn.green { background: var(--green); }
.btn.red { background: var(--red); }
.btn.ghost { background: #fff; color: var(--navy-2); border:1.5px solid var(--line); }
.btn.sm { padding: 5px 12px; font-size: 13px; border-radius: 8px; }
/* ปุ่มไอคอนล้วน (ไม่มีข้อความ) เช่น ปุ่มล้างคำค้นหา / ปุ่มจัดการในตาราง */
.btn.icon { padding: 9px 13px; font-size: 16px; line-height: 1; }
.btn.sm.icon { padding: 6px 9px; font-size: 15px; }
.row-actions { display: flex; gap: 6px; justify-content: center; }

input[type=text], input[type=password], input[type=number],
input[type=date], input[type=month], select {
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: 15px; background:#fff; color: var(--ink);
  outline: none; transition: border-color .15s;
}
/* ตัวกรองที่เลือกแล้วโหลดทันที — บังคับกว้างเท่ากันให้เป็นคู่ที่ดูสมกัน */
.filter-bar .auto-go { width: 150px; box-sizing: border-box; }
input:focus, select:focus { border-color: var(--navy-2); }
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom: 16px; }
.filter-bar label { display:block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.filter-bar .push-right { margin-left: auto; }   /* ดันปุ่มไปชิดขวาสุดของแถบ */

/* ---------- ฟอร์มกรอกข้อมูล ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.form-grid .fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-grid .fld.wide { grid-column: 1 / -1; }
.form-grid label { font-size: 12.5px; color: var(--muted); }
.form-grid input, .form-grid select { width: 100%; }
.req { color: var(--red); font-weight: 600; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }

/* ---------- popup (modal) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 30, 48, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--white); border-radius: var(--radius);
  width: 100%; max-width: 780px;
  box-shadow: 0 18px 50px rgba(16, 32, 60, .35);
  animation: modal-in .16s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 18px; color: var(--navy); }
.modal-close {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 17px; line-height: 1; padding: 6px 8px; border-radius: 8px;
}
.modal-close:hover { background: var(--sky); color: var(--ink); }
.modal-body { padding: 18px 22px 22px; }
.modal-body .step { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.modal-body .step:last-child { border-bottom: 0; }
.modal-body .alert { margin-top: 14px; }
.modal-body table.data { font-size: 14px; }

/* ---------- ค้นหาแบบเรียลไทม์ ---------- */
.search-status { font-size: 13px; color: var(--muted); align-self: center; padding-bottom: 9px; }
.table-wrap.is-loading, .report-area.is-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }
table.data mark { background: var(--gold-soft); color: var(--navy); border-radius: 4px; padding: 0 2px; }

/* ---------- ป้ายสถานะ ---------- */
.badge { display:inline-block; padding: 3px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.badge.good { background: var(--green-soft); color: var(--green); }
.badge.bad { background: var(--red-soft); color: var(--red); }
.badge.warn { background: var(--orange-soft); color: var(--orange); }
.badge.info { background: var(--sky); color: var(--navy-2); }
.badge.gold { background: var(--gold-soft); color: #9a7100; }

/* ปุ่มเลือกสถานะเช็คชื่อ */
.status-group { display:inline-flex; gap:6px; }
.status-group label { cursor:pointer; }
.status-group input { display:none; }
.status-group span {
  display:inline-block; padding: 5px 14px; border-radius: 99px;
  border: 1.5px solid var(--line); font-size: 13.5px; background:#fff; color: var(--muted);
  transition: all .12s;
}
.status-group input:checked + span { background: var(--navy-2); border-color: var(--navy-2); color:#fff; font-weight:600; }
.status-group input[value="มา"]:checked + span,
.status-group input[value="ดื่ม"]:checked + span,
.status-group input[value="แปรง"]:checked + span { background: var(--green); border-color: var(--green); }
.status-group input[value="ขาด"]:checked + span,
.status-group input[value="ไม่ดื่ม"]:checked + span,
.status-group input[value="ไม่แปรง"]:checked + span { background: var(--red); border-color: var(--red); }
.status-group input[value="ป่วย"]:checked + span { background: var(--orange); border-color: var(--orange); }

.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14.5px; }
.alert.ok { background: var(--green-soft); color: var(--green); }
.alert.err { background: var(--red-soft); color: var(--red); }

/* ---------- Toast มุมขวาบน ----------
   ข้อความสำเร็จ (.alert.ok) ถูก JS ใน layout_bottom.php ย้ายมาไว้ในกล่องนี้ แล้วหายเองใน 4 วินาที (คลิกเพื่อปิดก่อนก็ได้)
   วางใต้แถบหัวด้านบน (topbar สูง ~52px) ไม่ให้บังเมนูผู้ใช้ · ใส่คลาส stay ที่ .alert เพื่อคงไว้ในหน้าตามเดิม */
.toast-area {
  position: fixed; top: 62px; right: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast-area .alert {
  margin: 0; min-width: 260px; max-width: 420px; pointer-events: auto; cursor: pointer;
  background: #fff; color: #1b5e3a; border-left: 4px solid var(--green);
  box-shadow: 0 8px 24px rgba(22,48,92,.18);
  animation: toast-in .25s ease-out;
  transition: opacity .3s, transform .3s;
}
.toast-area .alert.hide { opacity: 0; transform: translateX(20px); }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@media print { .toast-area { display: none !important; } }

/* ---------- หน้าล็อกอิน ---------- */
.login-wrap {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #2b5cae 100%);
  padding: 20px;
}
.login-card {
  background:#fff; border-radius: 20px; padding: 38px 36px; width: 100%; max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-card .logo-big {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 14px;
  background: var(--gold); color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font); font-size: 30px; font-weight:600;
}
.login-card h1 { text-align:center; font-size: 21px; color: var(--navy); }
.login-card .sub { text-align:center; color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.login-card label { display:block; font-size: 13.5px; color: var(--muted); margin: 12px 0 5px; }
.login-card input { width: 100%; }
.login-card .btn { width: 100%; justify-content:center; margin-top: 20px; padding: 12px; }

/* ---------- โปรไฟล์นักเรียน ---------- */
/* ---------- หน้าประวัตินักเรียน ---------- */
.profile-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 26px; margin-bottom: 18px;
  border-left: 6px solid var(--navy-2);
}
.profile-hero .avatar {
  width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 32px; font-weight: 600; color: #fff;
  background: var(--navy-2); box-shadow: 0 4px 12px rgba(22,48,92,.22);
}
.profile-hero .avatar.girl { background: #c2557f; box-shadow: 0 4px 12px rgba(194,85,127,.25); }
.profile-hero .who { min-width: 0; flex: 1; }
.profile-hero h1 { font-size: 25px; color: var(--navy); line-height: 1.3; }
.profile-hero .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.profile-hero .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.badge.muted { background: var(--sky); color: var(--muted); }

.info-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 22px 22px; margin-bottom: 16px;
}
.info-card > h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; color: var(--navy);
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 12px; }
.field {
  background: var(--sky); border-radius: 10px; padding: 10px 14px;
  border: 1px solid transparent; transition: border-color .15s;
}
.field:hover { border-color: var(--line); }
.field.wide { grid-column: 1 / -1; }
.field .k { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.field .v { font-size: 15.5px; font-weight: 500; color: var(--ink); word-break: break-word; }
.field .v.empty { color: #a7b2c4; font-weight: 400; }

/* ---------- รายงาน (พิมพ์ / PDF) ---------- */
.report-sheet { background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 40px; }
/* profile-mode = ฝั่งซ้ายเป็นตารางรายชื่อ ไม่ใช่กระดาษขาวแผ่นเดียว
   กล่องนอกจึงโปร่ง ปล่อยให้การ์ดของตารางคุมพื้นหลังของตัวเอง */
.report-sheet.profile-mode { background: transparent; box-shadow: none; padding: 0; }

/* บล็อกที่มีไว้สำหรับพิมพ์อย่างเดียว — บนหน้าจอซ่อนไว้ (คู่กับ .no-print) */
.print-only { display: none; }
.report-head { text-align:center; margin-bottom: 20px; }
.report-head h1 { font-size: 19px; color:#000; }
.report-head h2 { font-size: 16px; font-weight: 500; color:#000; margin-top: 4px; }
.report-head p { font-size: 14px; color:#333; }
table.report { width:100%; border-collapse: collapse; font-size: 13.5px; }
/* พื้นที่เอกสารกว้าง 900px ชิดซ้าย · ด้านขวาเป็นหน้าปก
   จอแคบกว่านั้นจะย่อลงตามจอ ไม่ล้นขอบ */
.report-area { width: 900px; max-width: 100%; margin-right: auto; }
/* align-items: stretch = ให้ทั้งสองฝั่งสูงเท่ากัน เส้นแบ่งกลางจึงลากยาวตลอดหน้า */
.report-sheet.has-cover { display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; }
/* ตารางข้อมูลเต็มมีหลายคอลัมน์ ให้พื้นที่เอกสารยืดเต็มความกว้างที่เหลือได้ */
.report-sheet.has-cover .report-area { flex: 1 1 620px; width: auto; margin-right: 0; min-width: 0; padding-right: 28px; }
/* ไม่มีหน้าปก (ตัวกรอง "ทั้งหมด") — ตารางกินความกว้างทั้งหน้า */
.report-sheet.profile-mode:not(.has-cover) .report-area { width: 100%; }

/* ---------- ข้อมูลนักเรียนรายคน (หน้าละ 1 คน) ---------- */
.student-sheet {
  position: relative;
  padding: 10px 0 18px; margin-bottom: 18px;
  border-bottom: 1px dashed var(--line);
  font-size: 15px; line-height: 2.1; color: #000;
}
.student-sheet:last-child { border-bottom: 0; margin-bottom: 0; }
.student-sheet .line { padding-right: 4.2cm; }      /* เว้นที่ด้านขวาให้คอลัมน์รูปถ่าย */
/* คอลัมน์รูปถ่ายสูงถึงแค่ราวบรรทัดที่ 7 — 6 บรรทัดท้าย (ที่อยู่ → มารดา) อยู่ใต้กรอบรูปแล้ว
   ให้ใช้ความกว้างเต็ม บรรทัดยาว ๆ อย่าง "ผู้ปกครอง ... เกี่ยวข้องกับนักเรียน บิดา" จะได้ไม่ตกบรรทัด */
.student-sheet .line:nth-last-child(-n+6) { padding-right: 0; }
.student-sheet b { font-weight: 600; margin-right: 4px; }
.student-sheet a { color: inherit; }
/* เลขหน้า — มีความหมายเฉพาะตอนพิมพ์ บนหน้าจอที่เลื่อนยาวต่อกันจึงซ่อนไว้ */
.page-no { display: none; }
/* คอลัมน์ขวาของเอกสารรายคน = บรรทัด "เลขที่ N" ซ้อนบนกรอบติดรูปถ่าย
   ตำแหน่งบน/ล่างคุมที่ .photo-col ที่เดียว (--roll-h = ความสูงบรรทัดเลขที่ ใช้ดันคอลัมน์ขึ้นให้กรอบรูปอยู่ที่เดิม) */
.student-sheet { --roll-h: 27px; }
.student-sheet .photo-col { position: absolute; top: 10px; right: 0; width: 3.2cm; }
.student-sheet .roll-no { height: var(--roll-h); font-size: 15px; line-height: 1.5; color: #000; white-space: nowrap; text-align: center; }
.student-sheet .photo-box {
  width: 3.2cm; height: 4cm;
  border: 1px solid #333; border-radius: 2px;
  display: grid; place-items: center;
  font-size: 12px; color: #999; line-height: 1.4;
}

/* คอลัมน์หน้าปก = แถบด้านขวาความกว้างคงที่ แยกจากพื้นที่เอกสารด้วยเส้นแบ่ง
   (ไม่ยืดตามจอแล้ว เพื่อไม่ให้เหลือพื้นที่ว่างกว้าง ๆ จนดูเหมือนเป็นส่วนเดียวกัน) */
.cover-area {
  flex: 0 0 266px; min-width: 240px;
  border-left: 1px solid var(--line);
  padding-left: 28px;
}
/* เส้นคั่นใต้หัวแผงอยู่ที่ .cover-head (ชื่อ + ปุ่มย่อ/ขยาย) ให้ลากยาวตลอดความกว้าง */
.cover-area .cover-head { padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.cover-area .cover-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em;
}
/* ตอนย่อ: ตัดช่องว่าง/เส้นคั่นซ้ายที่มีไว้แยกจากเอกสารออก */
.cover-area.collapsed { padding-left: 8px; border-left: 0; }
/* จอแคบ: หน้าปกตกลงไปอยู่ใต้เอกสาร เส้นแบ่งจึงย้ายมาอยู่ด้านบนแทนด้านซ้าย */
@media (max-width: 1180px) {
  .report-sheet.has-cover .report-area { padding-right: 0; }
  .cover-area {
    flex: 1 1 100%;
    border-left: 0; border-top: 1px solid var(--line);
    padding-left: 0; padding-top: 22px; margin-top: 22px;
  }
}
/* รูปหน้าปกบนหน้าจอ แสดงขนาดคงที่ 217x290 px (ไม่บิดสัดส่วน ไม่ตัดขอบภาพ) */
.cover-img {
  width: 217px; height: 290px; object-fit: contain;
  display: block; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
}
.cover-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; }
.cover-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 2px dashed var(--line); border-radius: 12px; padding: 24px 18px; color: var(--muted);
}
.cover-empty .ic { font-size: 34px; line-height: 1; }
.cover-empty b { color: var(--ink); }
.cover-empty span { font-size: 13px; }

/* ช่อง prompt สำหรับสร้างหน้าปก */
/* ---------- การ์ดเนื้อหาหลักกับกล่องหน้าปกวางคู่กัน (ใช้กับ includes/cover_panel.php) ---------- */
.check-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.check-cover { flex: 0 0 300px; min-width: 260px; }
.check-cover .cover-head { margin-bottom: 10px; }
.check-cover .cover-title { font-weight: 600; color: var(--navy); }

/* ---------- แผงหน้าปกย่อ/ขยายได้ (.cover-panel) — ใช้ทั้ง includes/cover_panel.php และ classroom.php ----------
   หัวแผง .cover-head = ชื่อ + ปุ่ม · คลาส collapsed = พับไปชิดขวาเหลือแถบแคบ (JS จำสถานะไว้ใน localStorage) */
.cover-panel .cover-head { display: flex; align-items: center; gap: 8px; }
.cover-panel .cover-head .cover-title { flex: 1; margin-bottom: 0; }
/* ปุ่มย่อ/ขยาย — ลูกศรชี้ทางที่แผงจะเลื่อนไป (▶ = พับไปชิดขวา · ◀ = กางกลับมา) */
.cover-panel .cover-toggle {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer;
}
.cover-panel .cover-toggle:hover { background: var(--sky); color: var(--navy); }
.cover-panel .cover-toggle::after { content: '▶'; }
/* สถานะย่อ: เหลือแถบแคบ ๆ ชิดขวา มีปุ่มกับชื่อแผงเรียงแนวตั้ง เนื้อหาฝั่งซ้ายได้พื้นที่เพิ่ม */
.cover-panel.collapsed { flex: 0 0 44px; min-width: 0; width: 44px; padding: 10px 8px; }
.cover-panel.collapsed > *:not(.cover-head) { display: none; }
.cover-panel.collapsed .cover-head { flex-direction: column; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.cover-panel.collapsed .cover-toggle::after { content: '◀'; }
.cover-panel.collapsed .cover-toggle { order: -1; }   /* ปุ่มอยู่บนสุด ชื่อแผงเรียงแนวตั้งอยู่ใต้ปุ่ม */
.cover-panel.collapsed .cover-title {
  writing-mode: vertical-rl; flex: 0; margin-top: 6px;
  font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.check-cover .cover-img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); }

.cover-prompt { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cover-prompt label { font-size: 14px; color: var(--ink); }
.cover-prompt .hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cover-prompt textarea {
  width: 100%; resize: vertical;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: 13.5px; line-height: 1.6; color: var(--ink);
  background: #fff; outline: none;
}
.cover-prompt textarea:focus { border-color: var(--navy-2); }
.cover-prompt .row { display: flex; align-items: center; gap: 10px; }
.cover-prompt .ok-msg { font-size: 13px; color: var(--green); }
table.report th, table.report td { border: 1px solid #333; padding: 5px 8px; }
table.report th { background: #eef2f8; text-align:center; }
.sign-row { display:flex; justify-content:space-around; margin-top: 46px; text-align:center; font-size: 14px; }

@media print {
  body { background:#fff; font-size: 13px; }
  .sidebar, .no-print, .page-head .actions { display:none !important; }
  .main-inner { padding: 0; }
  .report-sheet { box-shadow:none; border-radius:0; padding: 0; }
  table.report th { background:#eee !important; -webkit-print-color-adjust: exact; }

  /* บนหน้าจอเป็นตาราง แต่ตอนพิมพ์ใช้เอกสารตัวอักษรล้วนแทน (รวมถึงหัวเอกสารที่ซ่อนไว้บนจอ) */
  .print-only { display: block !important; }

  /* เอกสารที่พิมพ์มีเฉพาะเอกสารรายคน (หน้าปกเป็น no-print ดูบนหน้าจออย่างเดียว) */
  .report-sheet.has-cover { display: block; }
  .report-area,
  .report-sheet.has-cover .report-area { width: 100%; padding-right: 0; }
  .table-wrap { overflow: visible; }        /* ตอนพิมพ์ต้องไม่ตัดคอลัมน์ที่ล้นออกไป */

  /* ข้อมูลนักเรียน 1 คน = 1 แผ่น
     --drop = ระยะที่ถอยเนื้อหาลงจากหัวกระดาษ (ทั้งข้อความและกรอบรูป) แก้ค่านี้ค่าเดียวได้ทั้งเล่ม */
  .student-sheet {
    --drop: 1cm;
    border-bottom: 0; margin: 0; padding: calc(26px + var(--drop)) 0 0;
    break-inside: avoid; page-break-inside: avoid;
    break-after: page; page-break-after: always;
  }
  .student-sheet:last-child { break-after: auto; page-break-after: auto; }
  .report-head { break-after: avoid; page-break-after: avoid; position: relative; }

  /* เลขหน้า มุมขวาบนของกระดาษทุกแผ่น
     (แผ่นแรกเลขอยู่บน .report-head แผ่นถัด ๆ ไปอยู่บน .student-sheet ซึ่งเริ่มหัวกระดาษพอดี) */
  .page-no {
    display: block; position: absolute; top: 0; right: 0;
    font-size: 12px; font-weight: 500; color: #333; line-height: 1.4;
  }
  /* ดันคอลัมน์รูปถ่ายลงมาเท่ากับข้อความ (เว้นที่ให้เลขหน้าไม่ทับกันด้วย) — บรรทัด "เลขที่" อยู่เหนือกรอบรูป */
  .student-sheet .photo-col { top: calc(26px + var(--drop)); }
  /* คนแรกอยู่แผ่นเดียวกับหัวเอกสาร เลขหน้าอยู่บนหัวเอกสารแล้ว จึงไม่ต้องเว้นที่ซ้ำ
     ดันคอลัมน์ขึ้นเท่าความสูงบรรทัด "เลขที่" ให้กรอบรูปอยู่ระดับเดิม (บรรทัดเลขที่ไปอยู่ในช่องว่างใต้หัวเอกสาร) */
  .student-sheet.first { padding-top: var(--drop); }
  .student-sheet.first .photo-col { top: calc(10px + var(--drop) - var(--roll-h)); }
  /* หน้าประวัตินักเรียน — พิมพ์แล้วไม่ให้การ์ดขาดกลางหน้า */
  .profile-hero, .info-card { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; page-break-inside: avoid; }
  .field { background: #fff; border: 1px solid #ddd; }
}

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height:auto; position: static; flex-direction: row; flex-wrap: wrap; align-items:center; }
  .brand { border:0; margin:0; padding: 4px 8px; }
  .nav-label, .spacer { display:none; }
  .main-inner { padding: 18px 14px; }
  .topbar { position: static; }
  .topbar-title .dim { display: none; }
}

@media (max-width: 700px) {
  .topbar-chip { display: none; }          /* จอเล็ก เหลือแค่ชื่อโรงเรียนกับเมนูผู้ใช้ */
  .topbar-btn.user { max-width: 150px; overflow: hidden; }
}