/* สไตล์เฉพาะหน้าสถิติสาธารณะ (public_report.php, public_report_table.php, public_school_search.php)
   — แยกจาก style.css หลักของระบบ เพราะมีทั้งกราฟและเมนูสลับ 3 หน้าสาธารณะที่หน้าอื่นในระบบไม่ได้ใช้ */

.stats-table th, .stats-table td { white-space: nowrap; }
.stats-table td.num, .stats-table th.num { text-align: right; }
.stats-table tfoot td { font-weight: 700; background: #f3f4f6; }
.filter-bar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.filter-bar .field { margin-bottom: 0; min-width: 220px; }

/* แถวรวมบนสุดของตาราง (public_school_grade_table.php) — สไตล์เดียวกับ tfoot ตัวหนา/พื้นเทาอ่อน
   ต่างกันแค่ position (แถวแรกใน tbody แทนที่จะเป็น tfoot ท้ายตาราง) ให้เห็นยอดรวมได้ทันทีไม่ต้อง
   เลื่อนลงไปหาท้ายตารางที่อาจมีเป็นพันแถว เปลี่ยนตามผลค้นหา/กรองที่เลือกอยู่เสมอ (ไม่ใช่ยอดรวมทั้งหมด
   ตายตัว) */
.stats-table tr.row-total td { font-weight: 700; background: #f3f4f6; }

/* หัวตาราง 2 แถว (public_school_grade_table.php — ระดับชั้น + ชาย/หญิง) — style.css ตั้ง
   `th { position: sticky; top: 0 }` ไว้ทุก th เหมาะกับตารางหัวแถวเดียวทั่วไป แต่ตารางนี้มี 2 แถว
   หัวตาราง ถ้าปล่อยให้ th ทุกตัว sticky top:0 เหมือนกันหมด แถวที่ 2 (ชาย/หญิง) จะไปทับซ้อนแถวที่ 1
   (ชื่อระดับชั้น) แทนที่จะเรียงต่อกัน — แก้โดย sticky ทั้ง <thead> เป็นก้อนเดียวแทน (เบราว์เซอร์
   สมัยใหม่รองรับ position: sticky บน thead ได้) แล้วปิด sticky รายตัวของ th ในตารางนี้ */
.stats-table.two-row-header thead { position: sticky; top: 0; z-index: 1; }
.stats-table.two-row-header th { position: static; }

/* ตารางสรุปยอดรวม (public_report_table.php) — จำกัดความสูงแล้ว scroll ได้ทั้ง 2 แกนในกรอบเดียว
   (ไม่ใช้ .table-scroll ตัวมาตรฐานของระบบตรง ๆ เพราะตัวนั้น scroll ได้แค่แนวนอน ถ้าตารางมีแถวเยอะ
   จนสูงเกินจอ scrollbar แนวนอนจะไปโผล่ท้ายตาราง ต้องเลื่อนหน้าจอลงไปสุดก่อนถึงจะเห็น/ใช้งานได้ —
   ใส่ max-height ให้กรอบตารางเองเลื่อนได้ในพื้นที่คงที่ scrollbar เลยอยู่ในตำแหน่งที่เห็นได้เสมอ) */
.report-table-scroll {
  max-height: 75vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
/* ตรึงหัวตารางไว้บนสุดของกรอบ .report-table-scroll เวลาเลื่อนแนวตั้ง (เพิ่มเมื่อ 2026-09-10 ตามคำขอ
   ผู้ใช้งานที่หน้าตารางสรุปยอดรวม public_report_table.php — เดิมมีแค่ .stats-table.two-row-header
   เท่านั้นที่ตรึงหัวตาราง ตารางหัวแถวเดียวแบบหน้านี้ไม่เคยตรึงเลย) sticky ทั้ง <thead> เป็นก้อนเดียว
   ตามแพทเทิร์นเดียวกับ .two-row-header ด้านบน (ไม่ sticky รายตัวของ th เพราะถ้าตารางมีหัว 2 แถวในอนาคต
   แถวที่ 2 จะไปทับซ้อนแถวแรกแทนที่จะเรียงต่อกัน — ดู comment ของ .two-row-header ด้านบน) ครอบคลุมทุก
   ตารางที่ห่อด้วย .report-table-scroll โดยไม่ต้องเพิ่ม class เจาะจงทีละตาราง — th มีพื้นหลังทึบอยู่แล้ว
   จาก style.css (th { background: #f0fdf4 }) ป้องกันเนื้อหาเลื่อนทะลุใต้หัวตารางที่ sticky อยู่ */
.report-table-scroll thead { position: sticky; top: 0; z-index: 1; }
.report-table-scroll th { position: static; }

/* เมนูสลับหน้า — ย้ายจากเดิม (sidebar ด้านซ้าย) มาไว้ในแถบบนสุดแทน (แก้เมื่อ 2026-08-29) อยู่ทางซ้าย
   ของลิงก์ "เข้าสู่ระบบเจ้าหน้าที่" ในแถบเดียวกัน (ลำดับ HTML ก่อนลิงก์เข้าสู่ระบบ) — ใช้คลาส
   .topbar nav a มาตรฐานของระบบอยู่แล้ว รวมถึง a.active (สไตล์ pill พื้นหลัง + sticky ทั้ง topbar
   อยู่ใน style.css ที่โหลดร่วมกันทุกหน้าแล้ว ไม่ต้อง override ซ้ำที่นี่ — แก้เมื่อ 2026-09-01) คงค่า
   ปีการศึกษา (+มิติที่เลือกสำหรับหน้าตาราง) ไว้ข้ามหน้าผ่าน query string เหมือนเดิม */
.report-main { min-width: 0; }

/* กราฟ — โทนสีฟ้าพาสเทล (ชาย) / ชมพูพาสเทล (หญิง) ตามที่ผู้ใช้ระบุ (แก้เมื่อ 2026-08-29)
   เดิมใช้ชุดสี validated ของ dataviz skill (น้ำเงินเข้ม/ส้ม) แต่เครื่องนี้ไม่มี node ให้รัน
   validate_palette.js จึงเลือกคู่สีที่ hue ห่างกันมาก (ฟ้า ~210° กับ ชมพู ~340°) ซึ่งแยกได้แม้
   สายตาเพี้ยนสีแดง-เขียว (deuteranopia/protanopia) เพราะไม่ได้อาศัยแกนแดง-เขียวเป็นหลัก และทุกจุด
   ที่ใช้สีนี้แยกเพศ มี legend + label ตัวอักษรกำกับอยู่แล้ว (ไม่ได้ใช้สีเป็นตัวบ่งชี้เพียงอย่างเดียว)
   (เว็บนี้ทั้งเว็บไม่มีโหมดมืด — ดู public/assets/style.css) */
.viz-root {
  --chart-surface: #fcfcfb;
  --ink-primary:   #0b0b0b;
  --ink-secondary: #52514e;
  --ink-muted:     #898781;
  --gridline:      #e1e0d9;
  --series-1:      #7fb3e0; /* ฟ้าพาสเทล — ชาย (เฉพาะกราฟแยกเพศ .gender-bar/.gender-seg เท่านั้น) */
  --series-2:      #f4a6c6; /* ชมพูพาสเทล — หญิง */
  --series-brand:  #16a34a; /* เขียวแบรนด์ — กราฟแท่งทั่วไปที่ไม่ได้แยกเพศ (.bar-fill) แก้เมื่อ
                                2026-09-10 ให้เข้าธีมเขียวตามภาพตัวอย่างที่ผู้ใช้งานส่งมา เดิมใช้
                                --series-1 ปนกับกราฟแยกเพศ แยกตัวแปรออกมาไม่ให้ปนความหมายกัน */
}
.kpi-row { display: flex; gap: 24px; flex-wrap: wrap; }
.kpi-col { flex: 1; min-width: 260px; }
.kpi-col h3 { font-size: 14px; font-weight: 600; color: var(--ink-secondary); margin: 0 0 10px; }
.stat-value { font-size: 32px; font-weight: 600; color: var(--ink-primary); font-variant-numeric: normal; }
.stat-sub { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }

.gender-bar { display: flex; gap: 2px; height: 28px; background: var(--chart-surface); border-radius: 4px; overflow: hidden; }
.gender-seg { height: 100%; }
.gender-seg.male { background: var(--series-1); }
.gender-seg.female { background: var(--series-2); }
.gender-legend { display: flex; gap: 24px; margin-top: 10px; font-size: 14px; color: var(--ink-primary); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.swatch.male { background: var(--series-1); }
.swatch.female { background: var(--series-2); }

/* หัวข้อคั่น section ใหญ่ในหน้ากราฟ (public_report.php) — แยก "ข้อมูลผู้เรียน" กับ "ข้อมูลครู" ให้เห็น
   ชัดว่าเป็นคนละกลุ่ม ไม่ปนกัน (เพิ่มเมื่อ 2026-09-01 ตามคำขอผู้ใช้งาน — เดิมการ์ดทุกใบหน้าตาเหมือนกัน
   หมด ไล่กราฟผู้เรียนกับครูต่อกันเรื่อย ๆ ไม่มีจุดแบ่งให้สังเกต) accent สีต่างกันต่อ section เป็น cue
   ทางสายตาเสริมจากตัวข้อความ ไม่ได้ใช้สีเป็นตัวบ่งชี้เพียงอย่างเดียว */
.section-divider {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--section-accent, var(--primary));
}
.section-divider h2 { margin: 0; font-size: 20px; color: var(--section-accent, var(--primary)); }
.section-divider .section-sub { font-size: 13px; color: var(--ink-muted, #898781); }
.section-divider.students { --section-accent: #2563eb; }
.section-divider.teachers { --section-accent: #b45309; }
.section-nav { display: flex; gap: 16px; margin: 4px 0 0; font-size: 14px; }
.section-nav a { color: var(--primary); text-decoration: none; }
.section-nav a:hover { text-decoration: underline; }

.bar-chart { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label { width: 240px; flex-shrink: 0; font-size: 13px; color: var(--ink-secondary); text-align: right; overflow-wrap: break-word; }
.bar-wrap { flex: 1; min-width: 0; }
.bar-fill { height: 20px; max-height: 20px; background: var(--series-brand); border-radius: 0 10px 10px 0; min-width: 3px; }
.bar-value { width: 72px; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
/* กราฟแท่งที่อยู่ในคอลัมน์แคบ (kpi-col เช่น อันดับสูงสุด/ต่ำสุด) ต้องย่อป้ายชื่อ/ค่าให้พอดีคอลัมน์ */
.kpi-col .bar-label { width: 96px; font-size: 12px; }
.kpi-col .bar-value { width: 56px; font-size: 12px; }

/* จอมือถือแคบ (เช่น iPhone ~390px) — ป้ายชื่อ 240px + ค่า 72px + gap รวมกันเกินความกว้างจอที่เหลือ
   หลังหัก padding ของ .container/.card ไปแล้ว ทำให้กราฟแท่ง (.bar-wrap) ถูกบีบจนความกว้างเหลือเกือบ 0
   มองไม่เห็นแท่งเลย เห็นแต่ป้ายชื่อ (ชิดขวาตามค่าเดิม) + ตัวเลขไปกองอยู่ชิดขวาจอ (แก้เมื่อ 2026-09-01
   ตามที่ผู้ใช้งานแจ้งจากภาพหน้าจอมือถือจริง) แก้ด้วยการสลับเป็นวางป้ายชื่อไว้บรรทัดบนเต็มความกว้าง
   (ชิดซ้ายอ่านง่ายกว่าชิดขวาตอนวางเดี่ยว ๆ เต็มบรรทัด) แล้วแท่ง+ค่าตัวเลขอยู่บรรทัดถัดมาแทน — ไม่ต้อง
   คำนวณ pixel budget ให้พอดีทุกขนาดจอเหมือนเดิม ครอบคลุมทั้งกราฟทั่วไปและกราฟใน kpi-col (เช่น 5 อันดับ
   สูงสุด/ต่ำสุด) ที่ป้าย/ค่าแคบกว่าอยู่แล้วแต่ก็ยังบีบเกินไปบนจอมือถือเช่นกัน */
@media (max-width: 480px) {
  .bar-row { flex-wrap: wrap; row-gap: 4px; }
  .bar-label, .kpi-col .bar-label { width: 100%; text-align: left; }
  .bar-value, .kpi-col .bar-value { width: auto; }
}

/* สรุปภาพรวมสำหรับผู้บริหาร (stat tile แบบไอคอน) + กราฟโดนัท + การ์ดสรุปรายอำเภอ — เพิ่มเมื่อ
   2026-09-10 ตามคำขอผู้ใช้งานให้หน้าแดชบอร์ดมีหน้าตาแบบเว็บตัวอย่างที่ส่งมา (สไตล์ executive dashboard
   ดูรวบรัดได้ทันที) โดยยังคงกราฟ/ตารางเดิมทั้งหมดของระบบไว้ครบ ไม่มีจุดไหนลบเนื้อหาเดิมทิ้ง แค่จัดวาง
   กราฟอำเภอ/ต้นสังกัดขึ้นมาไว้ต้นหน้าแทนที่จะอยู่ปนกับกราฟละเอียดด้านล่าง */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-tile { display: flex; flex-direction: column; gap: 8px; }
.stat-tile .stat-tile-label { font-size: 13px; color: var(--ink-secondary); font-weight: 600; }
.stat-tile .stat-tile-value { font-size: 26px; font-weight: 700; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
.stat-tile .stat-tile-sub { font-size: 12px; color: var(--ink-muted); }

.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; align-items: stretch; }
.chart-row > .card { margin-bottom: 0; }
@media (max-width: 800px) { .chart-row { grid-template-columns: 1fr; } }

.card-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.card-head-row h2 { margin: 0; }

/* กราฟโดนัท — วาดด้วย conic-gradient ล้วน ๆ (ไม่พึ่ง JS chart library เหมือนกราฟแท่งด้านบนทั้งระบบ) */
.donut-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.donut { width: 170px; height: 170px; min-width: 170px; border-radius: 50%; position: relative; }
.donut-hole {
  position: absolute; inset: 24%;
  background: var(--card, #fff);
  border-radius: 50%;
}
.donut-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 9px; }
.donut-legend .legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.donut-legend .legend-label { flex: 1; color: var(--ink-secondary); overflow-wrap: anywhere; }
.donut-legend .legend-value { font-weight: 600; color: var(--ink-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* การ์ดสรุปรายอำเภอ */
.district-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.district-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.district-card-head .name { font-weight: 700; font-size: 15px; color: var(--ink-primary); }
.district-card .meta { font-size: 12px; color: var(--ink-muted); margin-bottom: 12px; }
.district-card .num-label { font-size: 12px; color: var(--ink-muted); }
.district-card .num-value { font-size: 20px; font-weight: 700; color: var(--primary); margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.progress-track { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 999px; }