/* ระบบนิเทศภายใน — ธีมหลัก (สำหรับฉบับ PHP แยกหน้า) */
:root{
  color-scheme:light;
  --bg:#f3f6f4; --card:#ffffff; --line:#dfe7e2; --ink:#22332b; --mut:#6b7d73;
  --pri:#1e7d5a; --pri2:#135641; --acc:#f0b429; --bad:#c0392b; --good:#27ae60;
  --chip-draft:#fff4d6; --chip-final:#e2f5ea; --lvl5:#0e6e45; --lvl4:#2e9e6b;
  --lvl3:#f0b429; --lvl2:#e67e22; --lvl1:#c0392b;
  --radius:14px; --shadow:0 10px 30px rgba(20,60,40,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Sarabun','Prompt','Segoe UI',Tahoma,sans-serif;font-size:15.5px;line-height:1.55}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.page{padding:22px 16px 40px}

/* แถบบน */
.topbar{background:linear-gradient(90deg,var(--pri),var(--pri2));color:#fff;box-shadow:var(--shadow)}
.bar{display:flex;align-items:center;gap:18px;padding:10px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#fff}
.brand .t1{font-weight:700;font-size:17px}
.brand .t2{font-size:12.5px;opacity:.85}
.mainnav{display:flex;gap:6px;flex-wrap:wrap;margin-inline:auto}
.mainnav a{color:#eafff4;text-decoration:none;padding:8px 13px;border-radius:10px;font-size:14.5px}
.mainnav a.on{background:rgba(255,255,255,.18);font-weight:700}
.mainnav a:hover{background:rgba(255,255,255,.10)}
.me{display:flex;align-items:center;gap:10px}
.me .who{text-align:right;line-height:1.25}
.me .who small{display:block;color:#d8ffe9;font-size:12px}

/* การ์ดและส่วนเนื้อหา */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card h2{margin:0 0 4px;font-size:19px;color:var(--pri2)}
.card .sub{color:var(--mut);font-size:13.5px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.stat{background:linear-gradient(160deg,#eefaf3,#ffffff);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.stat .n{font-size:26px;font-weight:800;color:var(--pri)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f2f8f5;color:var(--pri2);font-size:13.5px;white-space:nowrap}
tr:hover td{background:#fafdfb}
.right{text-align:right}
.mut{color:var(--mut);font-size:13px}
.center{text-align:center}

/* ตารางสรุปภาพรวม (รายงาน): หัวตารางแบ่ง 2 บรรทัด ให้ช่องแคบลง + ช่องชื่อครูแสดงบรรทัดเดียว */
.sumtab th{white-space:normal;line-height:1.28;vertical-align:middle;padding:7px 6px;font-size:12px}
.sumtab td{padding:7px 6px;vertical-align:middle}
.sumtab td.tname{white-space:nowrap}
.sumtab td.center{white-space:nowrap}
/* ตัวเลื่อนแนวนอนของตารางกว้าง (มือถือ/แท็บเล็ต/จอแคบ) — หน้าไม่ล้น แต่ตารางเลื่อนในกรอบได้ */
.tblwrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}

/* ปุ่ม / ฟอร์ม */
.btn,.btn2{display:inline-block;background:var(--pri);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:14.5px;cursor:pointer;text-decoration:none;font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--pri2)}
.btn.ghost{background:transparent;color:inherit;border:1.5px solid var(--line)}
.btn.ghost:hover{background:#eef6f1}
.btn.warn{background:var(--bad)}
.btn.good{background:var(--good)}
.btn.sm,.btn2.sm{padding:6px 11px;font-size:13px}
.btn.print{background:var(--pri);color:#fff}
.btn.pdf{background:var(--acc);color:#5b4300;font-weight:700}
label{display:block;font-size:13.5px;color:var(--mut);margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #bfe3d1;border-color:var(--pri)}
input.ro{background:#f5f7f6;color:var(--mut);cursor:default}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.field{margin-bottom:10px}

/* หัวข้อมูลรายการ (หน้าบันทึกการนิเทศ) — แสดงแบบอ่านเท่านั้นสำหรับบทบาททั่วไป
 * ผู้ดูแลระบบ (sys) ยังเห็นช่องแก้ไขตามปกติ */
.headinfo{background:#f6faf8;border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:grid;grid-template-columns:1.1fr 1fr;gap:2px 22px;font-size:14px;line-height:1.8}
.headinfo .full{grid-column:1/-1}
.headinfo b{color:var(--pri2)}
@media screen and (max-width:820px){ .headinfo{grid-template-columns:1fr} }

/* ป้ายสถานะ / ระดับ */
.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:700}
.chip.draft{background:var(--chip-draft);color:#8a6d00}
.chip.final{background:var(--chip-final);color:#116b46}
.chip.wait{background:#eef2ff;color:#3d5aa8}
.chip.done{background:var(--chip-final);color:#116b46}
.chip.move{background:#fff1ec;color:#a84c26}
.chip.pend{background:#fdecec;color:#b3261e;border:1px solid #f0c4bf}
.chip.partial{background:#fff8e6;color:#8a5a00;border:1px solid #f0dfb0}
.pendline{margin-top:5px}
.sumtab td.tname .pendline{white-space:normal;max-width:190px}
.pendn{display:block;margin-top:3px;color:#b3261e;font-size:12.5px;overflow-wrap:anywhere;max-width:100%}
/* กรอบจำกัดความกว้างคอลัมน์ "ผู้นิเทศ" — ให้ชื่อยาว ๆ ตัดบรรทัดในกรอบแทนที่จะดันคอลัมน์กว้างทั้งตาราง */
.supcell{max-width:262px}
/* ตารางรายการ (records.php): ชื่อครู/ชื่อผู้นิเทศเล็กลงเล็กน้อย เพื่อให้คอลัมน์ "จัดการ" พอดีปุ่ม 3 ปุ่มในบรรทัดเดียว */
.cname,.sname{font-size:13.5px}
.actsrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.notice.pendwarn{background:#fdecec;color:#b3261e;border-color:#f0c4bf}
.g5{background:var(--lvl5);color:#fff}
.g4{background:var(--lvl4);color:#fff}
.g3{background:var(--lvl3);color:#5b4300}
.g2{background:var(--lvl2);color:#fff}
.g1{background:var(--lvl1);color:#fff}
.grade{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12.5px;font-weight:700}
/* คะแนนแบบตัวเลขล้วน (ไม่ใช้ป้ายกลม) — ใช้ในคอลัมน์ "คะแนนที่ฉันให้ ด1/ด2/ด3/ด4" */
.v{background:none !important;padding:0;font-weight:800}
.v.g5{color:#0e6e45}
.v.g4{color:#2e9e6b}
.v.g3{color:#a87b00}
.v.g2{color:#b35c12}
.v.g1{color:#c0392b}
.thsub{font-weight:600;color:#5a6b62;font-size:12px}
/* หัวตารางที่ยอมให้ตัดบรรทัดได้ (กันคอลัมน์ดันตารางกว้างเกินจอแคบ) */
.thwrap{white-space:normal}

/* แบบประเมินรายข้อ */
.rubric{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.rubric .sec{background:#e8f5ee;color:var(--pri2);padding:8px 14px;font-weight:700}
.rubric .item{display:flex;align-items:flex-start;gap:12px;padding:8px 14px;border-top:1px solid var(--line)}
.rubric .item:nth-child(even){background:#fbfefc}
.rubric .tx{flex:1;font-size:14px}
.rubric .lv{display:flex;gap:6px;min-width:210px;justify-content:flex-end}
.rubric .lv label{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--mut);width:36px;cursor:pointer}
.rubric .lv input{width:16px;height:16px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media screen and (max-width:900px){ .two-col{grid-template-columns:1fr} }

/* หน้าล็กอิน */
.loginbox{max-width:430px;margin:8vh auto}
.loginbox .card{padding:26px}
.loginbox h1{text-align:center;margin:0 0 2px;font-size:21px;color:var(--pri2)}
.loginbox .sub{text-align:center;color:var(--mut);font-size:13.5px;margin-bottom:16px}
.alert{background:#fdeaea;color:var(--bad);border:1px solid #f5c6c6;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px}
.notice{background:#e8f7f0;color:#116b46;border:1px solid #bfe3d1;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px}
.notice.warn{background:#fdf2f2;color:#8a2415;border-color:#edc2b8}

/* พิมพ์ — A4 แนวตั้ง สไตล์เอกสารราชการ (เว้นขอบซ้าย 2 ซม. · ขวา 1 ซม. ตามที่ผู้ใช้กำหนด) */
@page{size:A4 portrait;margin:14mm 10mm 16mm 20mm}
@media print{
  html,body{background:#fff}
  body{font-family:'TH Sarabun New','TH SarabunPSK','Sarabun','Segoe UI',Tahoma,sans-serif;
       font-size:13.5pt;line-height:1.55;color:#000;
       -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topbar,.foot,.no-print,.btn,.btn2,.pdf-toast{display:none !important}
  .pendn{color:#000 !important}
  body.print-page{padding:0}
  .wrap{max-width:100%;padding:0}
  /* หัวเอกสารแบบราชการ: ชื่อโรงเรียน / หน่วยงาน / ชื่อเอกสาร กึ่งกลาง ขีดเส้นคู่ */
  .printhead{text-align:center;margin:0 0 12px;padding-bottom:8px;border-bottom:3px double #333}
  .ph-school{font-size:16pt;font-weight:700}
  .ph-agency{font-size:13pt}
  .ph-title{font-size:14.5pt;font-weight:700;margin-top:6px}
  .card{box-shadow:none;border:none;border-radius:0;padding:0;margin:0 0 14px;break-inside:auto;page-break-inside:auto}
  h2{font-size:15pt;color:#000;margin:0 0 6px}
  h3{font-size:13.5pt;color:#000;margin:10px 0 4px}
  .sub{font-size:11.5pt;color:#333}
  .mut{color:#333}
  table{width:100%;border-collapse:collapse;font-size:12.5pt;margin:6px 0 10px;page-break-inside:auto;display:table !important;overflow:visible !important}
  .tblwrap{overflow:visible;max-width:none}
  th,td{border:1px solid #444;padding:4px 8px;vertical-align:top;text-align:left}
  th{background:#eee !important;color:#000}
  thead{display:table-header-group}
  tr,.stat,.sigcell,.two-col{page-break-inside:avoid;break-inside:avoid}
  /* พิมพ์/PDF = ตามที่เห็นบนจอ: กางเฉพาะบล็อกที่ผู้ใช้เปิดไว้ (ไม่บังคับกางทั้งหมดอีกต่อไป) */
  .rephead::before{display:none}
  .rephead{cursor:auto}
  .card.pbreak{break-before:page;page-break-before:always}
  /* ขาวดำชัดเจน เหมาะกับการถ่ายสำเนา */
  .grade,.chip{border:1px solid #444;border-radius:0;background:#fff !important;color:#000 !important}
  .stat{border:1px solid #444;border-radius:0;box-shadow:none;background:#fff !important}
  .stat::before,.stat .ic{display:none}
  .stat .n{color:#000 !important}
  .card.acc1,.card.acc2,.card.acc3,.card.acc4,.card.acc5{border-top-width:1px;border-top-color:#444}
  .btnrow,.right{white-space:normal}
}

/* ============ v1.1: รูปภาพการนิเทศ + ลายเซ็นบนจอ ============ */
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-top:8px}
.photogrid .photo{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:120px}
.photogrid .photo img{display:block;width:100%;height:auto}
.photogrid .photo-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border:none;border-radius:50%;background:var(--bad);color:#fff;font-size:13px;cursor:pointer;display:none;line-height:26px;padding:0}
.photogrid .photo:hover .photo-x{display:block}
@media print{ .photogrid{grid-template-columns:repeat(3,1fr)} .photogrid .photo-x{display:none !important} }
.sigpad{width:100%;height:150px;display:block;touch-action:none;cursor:crosshair}
.signgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:10px}
.signgrid .sigcell{break-inside:avoid}
.signgrid .sigslot{height:64px;border-bottom:1px solid #333;display:flex;align-items:flex-end;justify-content:center}
.signgrid .sigslot .sigimg{max-height:62px;max-width:100%}
.signgrid .who{text-align:center;color:#333;font-size:12.5px;margin-top:4px}
@media print{ .signgrid{gap:26px} }

/* ============ v1.4: หน้าผู้ดูแลระบบ (แท็บ 5 เมนู) + เลือกผู้นิเทศ ============ */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs a{padding:9px 16px;border-radius:99px;border:1.5px solid var(--line);color:#2b4a40;text-decoration:none;font-weight:700;font-size:14px;background:#fff}
.tabs a:hover{background:#eef6f1}
.tabs a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.tabs a.on:hover{background:var(--pri2)}
.supcheck{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 12px}
.supcheck label{display:flex;align-items:center;gap:8px;font-size:14px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:#fbfdfc;cursor:pointer}
.supcheck label:has(input:checked){background:#e8f7f0;border-color:#9fd8bf}
.editbox{background:#f8fbf9;border:1px solid var(--line);border-radius:12px;padding:14px 16px}

/* ============ v1.6: รายงานสรุป (reports.php) — จัดกลุ่มรายบุคคล + ผู้ประเมินรายท่าน ============ */
.repblock{border:1px solid var(--line);border-radius:12px;background:#fff;margin:10px 0;overflow:hidden}
.rephead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:#fbfdfc;cursor:pointer;font-size:14px}
.rephead:hover{background:#eef6f1}
.rephead::before{content:'▸';color:var(--pri2);font-size:13px;transition:transform .15s}
.rephead.repopenh::before{transform:rotate(90deg)}
.repbody{display:none;padding:6px 14px 12px;border-top:1px dashed var(--line)}
.repbody.repopen{display:block}

/* ---------- แบ่งหน้ารายการ (reports.php) ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 4px}
.pager .pbtn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--pri);text-decoration:none;font-size:13px;font-weight:600;line-height:1.5}
.pager .pbtn:hover{background:#f7f4ff}
.pager .pbtn.cur{background:var(--pri);border-color:var(--pri);color:#fff}
.pager .pbtn.dis{opacity:.45;cursor:default}
.pager .pdot{color:var(--mut);padding:0 2px}
/* ฉบับรายผู้ประเมิน (record_view.php?sup=) */
.persup-note{background:#efe8fd;color:#4b2ea0;border-radius:99px;padding:6px 14px;font-size:13px;text-align:center;margin:10px 0 4px}
.persup-pend{background:#fff6e5;border:1px solid #f0c987;color:#8a5a00;border-radius:12px;padding:14px 16px;font-size:15px;font-weight:700;text-align:center;margin:8px 0 4px}

/* ============ v1.3: แบบรายงานการนิเทศรายบุคคล (เอกสารราชการ A4) ============ */
.doc{max-width:880px;margin:0 auto;background:#fff;border-radius:14px;box-shadow:0 8px 26px rgba(0,0,0,.09);padding:36px 44px;color:#1f2d2b}
.doc-head{text-align:center;border-bottom:3px double #2f3d38;padding-bottom:12px;margin-bottom:16px}
.doc-logo{display:block;margin:0 auto 8px;height:84px}
.doc-title{font-size:22px;font-weight:800;color:#1c2b26}
.doc-sub{font-size:16.5px;font-weight:700;margin-top:2px}
.doc-agency{color:#5b6c69;font-size:14px;margin-top:3px}
/* กล่องข้อมูลแบบแบบฟอร์ม: กรอบเส้นตรง + สองคอลัมน์ (ซ้าย = ชื่อ/รายละเอียด · ขวา = วัน-เวลา) */
.doc-info{border:1.5px solid #2f3d38;border-radius:10px;background:#fff;padding:9px 14px;margin:12px 0 8px;line-height:1.75;font-size:14.5px;display:grid;grid-template-columns:1.08fr 1fr;gap:1px 22px}
.doc-info > div{margin:0}
/* ตารางคะแนนของเอกสาร: ความกว้างคอลัมน์กำหนดแน่ (colgroup) + หัวตารางตัดเป็น 2-3 แถวได้
 * จึงไม่ล้นขอบหน้ากระดาษแม้ชื่อด้านยาว */
.doc-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:6px 0 10px;font-size:14px}
.doc-table th{white-space:normal;overflow-wrap:anywhere;line-height:1.35;font-size:13px;padding:6px 7px;background:#eef3f1;border:1px solid #b9c6c0;color:#1c2b26;vertical-align:middle}
.doc-table td{padding:6px 7px;border:1px solid #b9c6c0;line-height:1.5;overflow-wrap:anywhere}
.doc-table td.center{text-align:center}
.doc-table tr[style] td{vertical-align:middle}
/* เลขข้อ/ลำดับ — ตัวหนาแบบต้นแบบ */
.doc-table td.seq{font-weight:700;text-align:center;color:#12312a}
/* แถวสรุป: รวมคะแนนเฉลี่ย / ระดับคุณภาพ (หัวข้อชิดซ้าย-ตัวหนา · ค่าอยู่กึ่งกลางคอลัมน์) */
.doc-table tr.sum td{background:#eef3f1;font-weight:700;border-top:1.5px solid #9fb3ab}
.doc-table tr.sum.grand td{border-bottom:2px solid #2f3d38}
.doc-sec{font-weight:800;font-size:16.5px;margin:16px 0 6px;color:#1c2b26}
.doc-subsec{font-weight:700;margin:10px 0 3px;color:var(--pri2)}
/* ป้ายชื่อตารางเหนือตาราง (แบบฟอร์มราชการกระชับ) */
.doc-label{font-weight:700;font-size:14px;color:#1c2b26;margin:10px 0 3px}
/* บรรทัดข้อเสนอแนะใต้ตาราง */
.doc-suggest{margin:3px 0 9px;font-size:14px;line-height:1.6}
.doc-suggest b{font-weight:700}
.doc-suggest.small{font-size:13px;color:#4b5b55;margin-top:-6px}
/* ตารางรายละเอียดรายข้อ (ทุกผู้นิเทศ) — คอลัมน์ผู้นิเทศแต่ละคน + เฉลี่ย */
.det-table{font-size:12.5px;margin:6px 0 10px}
.det-table th,.det-table td{padding:4px 5px}
.det-table th.center,.det-table td.center{white-space:nowrap}
/* ชื่อผู้นิเทศในหัวตาราง: ตัวเล็กลง/บางลง ขึ้นได้สูงสุด 2 บรรทัด */
.det-table th.supcol{font-size:11px;font-weight:600;color:#33473f;line-height:1.25;padding:4px 3px;white-space:normal;overflow-wrap:anywhere}
@media print{ .det-table{font-size:9.4pt} .det-table th,.det-table td{padding:3pt 3.4pt} .det-table th.supcol{font-size:8.25pt} }
.doc-subsec2{background:#e8f5ee;padding:5px 10px;border-radius:8px;margin:8px 0 2px;font-weight:700}
.doc-notebox{border:1px solid var(--line);border-radius:8px;padding:10px;min-height:44px}
.doc-verdict-row{display:flex;align-items:center;gap:16px;margin:16px 0 6px;flex-wrap:wrap}
.doc-verdict-row .mut2{color:#8a8a8a}
.verdict{display:inline-block;border:3px solid #b0442e;color:#b0442e;font-weight:800;font-size:20px;padding:6px 20px;border-radius:14px;transform:rotate(-5deg);background:#fff}
@media print{
  .doc{max-width:100%;margin:0;padding:0;border-radius:0;box-shadow:none}
  /* ขนาดตัวอักษร/ระยะห่าง = ค่าเดียวกับหน้าจอ (ภาพที่รีวิว) แล้วย่อทั้งหน้าให้พอดี A4 */
  .doc-logo{height:84px;margin-bottom:8px}
  /* v1.8: ขยายตัวอักษรในเอกสารพิมพ์/PDF ให้อ่านง่ายขึ้น + หัวตารางขนาดเท่าตัวเลข (เดิมหัวเล็กกว่า) */
  .doc-title{font-size:17pt}
  .doc-sub{font-size:12.5pt}
  .doc-agency{font-size:11pt}
  .doc-info{font-size:11.5pt;padding:6px 10px;gap:1px 16px;border-radius:8px}
  .doc-sec{font-size:12.5pt;margin:11pt 0 5pt}
  .doc-subsec{font-size:11.5pt;margin:8pt 0 2pt}
  .doc-label{font-size:11pt;margin:8pt 0 2pt}
  .doc-suggest{font-size:11pt;margin:2pt 0 7pt}
  .doc-suggest.small{font-size:10.5pt}
  .doc-table{font-size:11.5pt}
  .doc-table th{font-size:11.5pt;padding:5pt 4pt}
  .doc-table td{padding:5pt 4pt;line-height:1.5}
  .verdict{transform:rotate(-5deg)}
}

/* ============ v1.5: แบบย่อพรีวิว 1 หน้า A4 (record_view.php?short=1) ============
 * เหลือ: หัวเอกสาร + กล่องข้อมูล + ๕) ตารางคะแนนรวม + รูปภาพการนิเทศ + ลายเซ็น
 * ขนาดกะทัดรัดให้ทุกอย่างลงพอดีกระดาษ A4 หน้าเดียว (กันโอเวอร์ ~1 หน้าเต็ม) */
.doc-short{padding:10px 16px 12px}
.doc-short .doc-head{padding-bottom:6px;margin-bottom:6px}
.doc-short .doc-logo{height:52px;margin-bottom:4px}
.doc-short .doc-title{font-size:18px}
.doc-short .doc-sub{font-size:13px}
.doc-short .doc-agency{font-size:11.5px}
.doc-short .doc-info{padding:6px 11px;margin:8px 0 3px;font-size:12.5px;line-height:1.6;gap:1px 16px}
.doc-short .doc-sec{font-size:14px;margin:9px 0 4px}
.doc-short .doc-table{font-size:12px;margin:5px 0 6px}
.doc-short .doc-table th{font-size:11px;padding:4px 5px}
.doc-short .doc-table td{padding:4px 5px;line-height:1.45}
.doc-short .ph-cap{font-size:11.5px;margin:5px 0 1px}
.doc-short .photogrid{grid-template-columns:repeat(6,1fr);gap:5px;margin-top:3px}
.doc-short .photogrid .photo{min-height:0;border-radius:7px}
.doc-short .photogrid .photo img{height:54px;object-fit:cover}
.doc-short .signgrid{grid-template-columns:repeat(4,1fr);gap:6px 10px;margin-top:4px}
.doc-short .signgrid .sigslot{height:34px}
.doc-short .signgrid .sigslot .sigimg{max-height:32px}
.doc-short .signgrid .who{font-size:10px;margin-top:1px;line-height:1.3}
@media print{
  .doc-short{padding:5mm 0 3mm}
  .doc-short .doc-head{padding-bottom:5px;margin-bottom:5px}
  .doc-short .doc-logo{height:48px}
  .doc-short .doc-title{font-size:14pt}
  .doc-short .doc-sub{font-size:10pt}
  .doc-short .doc-agency{font-size:9pt}
  .doc-short .doc-info{font-size:9.5pt;padding:5px 9px;margin:7px 0 3px;gap:1px 12px}
  .doc-short .doc-sec{font-size:10pt;margin:8pt 0 3pt}
  .doc-short .doc-table{font-size:9pt}
  .doc-short .doc-table th{font-size:8pt;padding:3px 4px}
  .doc-short .doc-table td{padding:3px 4px}
  .doc-short .photogrid{grid-template-columns:repeat(6,1fr);gap:4px}
  .doc-short .photogrid .photo img{height:50px}
  .doc-short .signgrid{grid-template-columns:repeat(4,1fr);gap:5px 12px}
  .doc-short .signgrid .sigslot{height:30px}
  .doc-short .signgrid .sigslot .sigimg{max-height:28px}
}
/* โหมดดาวน์โหลด PDF (แอปสร้างไฟล์เอง): เว้นขอบซ้าย 2 ซม. (20 มม.) · ขวา 1 ซม. ตามที่ผู้ใช้กำหนด
 * (เส้นทางพิมพ์ด้วยเบราว์เซอร์ใช้ @page ด้านบน · ที่นี่คุมไฟล์ PDF ที่แอปสร้างเอง) */
@media print{
  .doc.doc-pdf{padding-top:0;padding-bottom:0;padding-left:20mm;padding-right:10mm}
}
@media screen and (max-width:720px){
  .doc-short .photogrid{grid-template-columns:repeat(3,1fr)}
  .doc-short .signgrid{grid-template-columns:repeat(2,1fr)}
}

/* ============ v3.0: "แบบนิเทศการสอน" รายงานรายบุคคล (record_view.php) ============
 * เอกสารราชการขาว-ดำ: ตราโรงเรียน + ชื่อแบบ + โรงเรียน/สังกัด → ข้อมูลผู้รับการนิเทศ
 * (ขีดเส้นประ) → คำชี้แจง/เกณฑ์ → ตาราง 5 4 3 2 1 + หมายเหตุ/ข้อค้นพบ → สรุป → ลายเซ็น
 * หนึ่งฉบับต่อหนึ่งผู้นิเทศ · หน้าถัดไปของตารางพิมพ์หัวตารางซ้ำ (thead) */
.doc-form{color:#000}
/* v3.2 (2569): หน้าจอ = ตัวอย่างขนาดพอดีจอ (13px) · งานพิมพ์/PDF = 16pt ตามแบบราชการ
 * (หัวเรื่องคงขนาดเดิม · ตารางที่ยาวต่อหน้าจะพิมพ์หัวตารางซ้ำ) */
.pv-form{color:#000;font-size:13px;line-height:1.4}
.pv-head{text-align:center;margin:0 0 2px}
.pv-logo{display:block;height:58px;margin:0 auto 1px}
.pv-title{font-size:21px;font-weight:800;line-height:1.15;letter-spacing:.2px}
.pv-agency{font-size:13px;margin-top:1px}
.pv-meta{margin:8px 0 0}
.pv-row{display:grid;gap:4px 18px;margin:0 0 3px}
.pv-r1{grid-template-columns:2fr 1.1fr}
.pv-r2{grid-template-columns:1.1fr .8fr 1.5fr 1.05fr}
.pv-r3{grid-template-columns:2fr .55fr 1.25fr}
.pv-f{display:flex;align-items:flex-end;gap:6px;min-width:0}
.pv-k{white-space:nowrap;font-size:12.5px;font-weight:600;line-height:1.65}
.pv-v{flex:1 1 auto;min-width:30px;border-bottom:1px dotted #333;padding:0 5px;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.pv-div{border-top:1px dotted #333;margin:5px 0}
.pv-note,.pv-crit{font-size:12.5px;line-height:1.45;margin:0}
.pv-crit{margin-bottom:6px}
.pv-tablewrap{max-width:100%}
.pv-table{width:100%;table-layout:fixed;border-collapse:collapse;background:#fff;color:#000;font-size:12.5px;line-height:1.35;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pv-table th,.pv-table td{border:1px solid #000;padding:2.5px 5px;text-align:left;vertical-align:middle}
.pv-table thead th{background:#f1f1f1;text-align:center;font-weight:700;font-size:11.5px;line-height:1.25;white-space:normal;padding:2.5px 2px}
.pv-table td.pv-item{font-size:12.5px}
.pv-table td.pv-mark{text-align:center;font-weight:400;font-size:14px;line-height:1.15;padding:1px 0;white-space:nowrap}
.pv-table td.pv-find{background:#fff}
.pv-code{display:inline-block;min-width:20px;font-weight:700}
.pv-table tr.pv-grp td{background:#e9e9e9;font-weight:700;font-size:12.5px;padding:2.5px 6px}
.pv-table tr:hover td{background:#fff}
.pv-table tr.pv-grp:hover td{background:#e9e9e9}
.pv-sum{margin-top:7px;font-size:12.5px;line-height:1.5}
.pv-sumline b{font-weight:800}
.pv-crit2{font-size:11px;color:#000;margin-top:1px}
.pv-sug{margin-top:7px;font-size:12.5px;line-height:1.55}
.pv-sug div{margin:1px 0}
.pv-sign{display:grid;grid-template-columns:1fr 1fr;gap:8px 42px;margin-top:16px;font-size:12.5px}
.pv-signcol{text-align:center}
.pv-sigslot{height:34px;display:flex;align-items:flex-end;justify-content:center}
.pv-sigslot img{max-height:34px;max-width:75%}
.pv-sigline{line-height:1.6}
.pv-signame,.pv-sigrole{line-height:1.35}
.pv-pendnote{margin-top:8px;font-size:12px}
.pv-photos{margin-top:14px}
.pv-photos .photogrid .photo{min-height:0}
.pv-ph-title{font-weight:800;font-size:18px;margin-bottom:3px}
.pv-break{break-before:page}
@media screen{
  .pv-form + .pv-form{margin-top:30px;padding-top:24px;border-top:2px dashed #cfd8d3}
}
@media screen and (max-width:720px){
  .pv-row{grid-template-columns:1fr}
  .pv-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pv-table{min-width:620px}
  .pv-sign{grid-template-columns:1fr;gap:14px}
}
@media print{
  .pv-form{font-size:16pt;line-height:1.3}
  .pv-logo{height:13mm;margin-bottom:0.5mm}
  .pv-title{font-size:16pt}
  .pv-agency{font-size:14pt}
  .pv-meta{margin-top:5pt}
  .pv-row{gap:2pt 4mm;margin-bottom:0}
  /* iframe ที่สร้าง PDF ใช้สื่อ screen (กว้าง 794px) → ต้องคืนตาราง 3 คอลัมน์ของงานพิมพ์
   * ไม่ให้กฎ @media screen (max-width:720px) ที่ใช้กับจอแคบมาทับ */
  .pv-r1{grid-template-columns:2fr 1.05fr}
  .pv-r2{grid-template-columns:1.05fr 1fr 1.65fr 1.18fr}
  .pv-r3{grid-template-columns:1.7fr .55fr 1.45fr}
  .pv-tablewrap{overflow:visible}
  .pv-table{min-width:0}
  .pv-sign{grid-template-columns:1fr 1fr}
  .pv-photos .photogrid .photo{min-height:0}
  .pv-k{font-size:16pt;line-height:1.35}
  .pv-v{font-size:16pt;line-height:1.3;padding:0 3px}
  .pv-div{margin:4pt 0}
  .pv-note,.pv-crit{font-size:16pt;line-height:1.3}
  .pv-crit{margin-bottom:4pt}
  .pv-table{font-size:16pt;line-height:1.3}
  .pv-table th,.pv-table td{padding:2pt 3pt}
  .pv-table thead th{font-size:16pt;padding:2pt 1pt}
  .pv-table td.pv-item{font-size:16pt}
  .pv-table td.pv-mark{font-size:18pt;font-weight:400;padding:1pt 0}
  .pv-table tr.pv-grp td{font-size:16pt;padding:2pt 3.2pt}
  .pv-sum{margin-top:6pt;font-size:16pt;line-height:1.35}
  .pv-crit2{font-size:11pt}
  .pv-sug{margin-top:5pt;font-size:16pt;line-height:1.4}
  .pv-sign{font-size:16pt;margin-top:12pt;gap:4mm 18mm}
  .pv-sigslot{height:10mm}
  .pv-sigslot img{max-height:10mm}
  .pv-sigline,.pv-signame,.pv-sigrole{line-height:1.3}
  .pv-pendnote{font-size:14pt}
  /* ภาคผนวกขึ้นหน้าใหม่เสมอ + หัวข้อหมวดต้องอยู่ติดภาพแรก ไม่แยกจากกัน */
  .pv-photos{margin-top:10pt;break-before:page;page-break-before:always}
  .pv-photos .ph-cap{break-after:avoid;page-break-after:avoid}
  .pv-photos .photogrid .photo{break-inside:avoid;page-break-inside:avoid}
  .pv-ph-title{font-size:16pt}
  .pv-form + .pv-form{margin-top:0;padding-top:0;border-top:0;break-before:page;page-break-before:always}
  .pv-table thead{display:table-header-group}
  .pv-table tr{break-inside:avoid;page-break-inside:avoid}
  /* หัวกลุ่ม + รายการแรกต้องอยู่หน้าเดียวกัน (ไม่ให้หัวข้อค้างท้ายหน้า) */
  .pv-table tbody.pv-gfirst{break-inside:avoid;page-break-inside:avoid}
  .pv-table tbody.pv-gfirst > tr:last-child{break-before:avoid;page-break-before:avoid}
  .pv-table tr.pv-grp{break-after:avoid;page-break-after:avoid}
}

/* ============ หน้าล็อกอิน: การ์ดสองฝั่งกลางจอ ~50% ของจอภาพ (ธีมลาเวนเดอร์) ============ */
.loginpage{background:#efecfa;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:26px 20px}
.loginwrap{width:clamp(640px,60vw,1320px);max-width:100%;display:grid;grid-template-columns:1.02fr .98fr;
  border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 26px 60px rgba(60,36,140,.18),0 4px 14px rgba(60,36,140,.08)}
/* ซ้าย: ตราโรงเรียน + ข้อมูลระบบ + ปุ่มดาวน์โหลด */
.login-left{background:linear-gradient(160deg,#efe9ff 0%,#e4dafd 55%,#dbcdfb 100%);color:#2c2158;
  padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.login-left .logo-ring{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid #e6defb;
  box-shadow:0 4px 12px rgba(76,44,190,.12);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:2px}
.login-left .logo-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.login-left h1{font-size:25px;line-height:1.2;margin:2px 0 0;font-weight:800;letter-spacing:.2px;color:#33206b}
.login-left .schoolname{font-size:15px;font-weight:700;color:#4b34a8}
.login-left .agency{font-size:12px;color:#7c72a8}
.login-left .points{margin:8px 0 2px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.login-left .points li{position:relative;padding-left:20px;font-size:12.5px;line-height:1.5;color:#5a4b8f}
.login-left .points li::before{content:"✔";position:absolute;left:0;top:0;color:#7c5ce6;font-weight:700}
.login-left .l-art{display:flex;align-items:flex-end;gap:7px;height:46px;margin:6px 0 0 2px}
.login-left .l-art i{width:15px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#c4b1fa,#a68bf3)}
.login-left .l-art i:nth-child(1){height:19px;background:linear-gradient(180deg,#f6cbdb,#eea8c1)}
.login-left .l-art i:nth-child(2){height:29px;background:linear-gradient(180deg,#ffe6a8,#f7cf6a)}
.login-left .l-art i:nth-child(3){height:44px;background:linear-gradient(180deg,#b8a3fb,#8f6ef0)}
.login-left .l-art i:nth-child(4){height:33px;background:linear-gradient(180deg,#cdbdfb,#ab90f4)}
.login-left .l-art span{align-self:flex-start;font-size:14px;color:#f0b429;margin-left:2px;line-height:1}
.dlrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.dlbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid #e3dafc;
  color:#4b34a8;text-decoration:none;font-size:12px;box-shadow:0 2px 8px rgba(76,44,190,.08);transition:background .15s}
.dlbtn:hover{background:#f7f3ff}
.dlbtn .ic{font-size:13px}
/* ขวา: ฟอร์มเข้าสู่ระบบ */
.login-right{background:#fff;display:flex;align-items:center;justify-content:center;padding:30px 28px}
.login-card{background:transparent;border:0;border-radius:0;padding:0;max-width:360px;width:100%;box-shadow:none}
.login-card h2{margin:0 0 3px;font-size:21px;color:#6a47d8}
.login-card .sub{color:#7d77a0;font-size:12.5px;margin:0 0 15px}
.login-card .field{margin-bottom:12px}
.login-card .field label{display:block;font-size:12.5px;color:#6b6294;margin-bottom:5px;font-weight:600}
.login-card .field input{width:100%;padding:10px 12px;background:#f4f2fb;border:1px solid #ece7fa;border-radius:10px;font-size:14.5px;color:#2b2450}
.login-card .field input:focus{outline:2px solid rgba(124,92,230,.22);border-color:#a78bf5;background:#fff}
.login-card .btn.big{width:100%;padding:11px 16px;font-size:15px;margin-top:4px;background:#7c5ce6;border:none;color:#fff;border-radius:10px;cursor:pointer;font-weight:700}
.login-card .btn.big:hover{background:#6a47d8}
.login-card .alert{margin-bottom:12px;font-size:13px}
/* เครดิตด้านล่างการ์ด (หน้าเข้าสู่ระบบ) */
.loginfoot{text-align:center;line-height:1.55}
.loginfoot .cr{font-size:13.5px;font-weight:700;color:#332a63}
.loginfoot .ag{font-size:13px;color:#4c4379;margin-top:2px}
.loginfoot .dev{font-size:12.5px;color:#8b84ad;margin-top:8px}
@media screen and (max-width:880px){
  .loginwrap{grid-template-columns:1fr;width:min(100%,540px)}
  .login-left{padding:24px 22px}
  .login-left h1{font-size:22px}
  .login-left .l-art{display:none}
}
@media screen and (max-width:420px){
  /* จอมือถือเล็ก: ลดขอบการ์ดล็อกอิน ให้ช่องกรอกกว้างพอ */
  .loginpage{padding:16px 10px}
  .login-left{padding:20px 16px}
  .login-right{padding:20px 16px}
  .login-card h2{font-size:19px}
}

/* =====================================================================
 * v2.0 UI — เลย์เอาต์แถบเมนูซ้าย (ธีมลาเวนเดอร์) + ย่อ/ขยายได้ + รองรับมือถือ
 * (ต่อท้ายไฟล์: ชนะกฎเดิมด้วยลำดับเดียวกัน · คงกฎพิมพ์/เกณฑ์ 5 ระดับ/เอกสาร .doc เดิม)
 * ===================================================================== */
:root{
  --bg:#f0ecfa; --card:#ffffff; --line:#e7e1f8; --ink:#2b2450; --mut:#7d77a0;
  --pri:#7c5ce6; --pri2:#6a47d8; --acc:#f0b429; --bad:#e0526e; --good:#2e9e6b;
  --chip-draft:#fff4d6; --chip-final:#e2f5ea;
  --radius:16px; --shadow:0 10px 30px rgba(80,50,160,.08);
}

/* ---------- โครง: sidebar + content ---------- */
.shell{display:flex;min-height:100vh;align-items:stretch}
.contentw{flex:1;min-width:0;display:flex;flex-direction:column}
.content{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:18px clamp(12px,2.6vw,26px) 30px}
.foot{padding:18px 22px 24px;text-align:center;line-height:1.55;background:transparent}
.foot .cr{font-size:12.5px;font-weight:700;color:#4b3f86}
.foot .ag{font-size:12px;color:#6b6294;margin-top:2px}
.foot .dev{font-size:11.5px;color:#8b84ad;margin-top:6px}

.sidebar{
  flex:0 0 258px;width:258px;align-self:flex-start;position:sticky;top:10px;
  height:calc(100vh - 20px);overflow-y:auto;margin:10px 0 10px 10px;border-radius:22px;
  background:linear-gradient(180deg,#a78bf5 0%,#8463ea 48%,#6a47d8 100%);
  color:#fff;display:flex;flex-direction:column;padding:18px 14px;z-index:70;
  box-shadow:0 18px 40px rgba(70,40,160,.25);
}
.side-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 16px}
.slogo{width:40px;height:40px;border-radius:12px;object-fit:cover;background:#fff;flex:0 0 auto}
.side-brand .t1{font-weight:800;font-size:15.5px;line-height:1.3}
.side-brand .t2{font-size:11.5px;opacity:.85;line-height:1.35}
.side-user{background:rgba(255,255,255,.15);border-radius:16px;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 4px 12px;text-align:center}
.avatar{width:58px;height:58px;border-radius:50%;background:#f6e3ff;color:#5426b8;font-size:25px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2.5px solid rgba(255,255,255,.65)}
.side-user .who{line-height:1.3}
.side-user .who b{font-size:14.5px;word-break:break-word}
.side-user .who small{display:block;font-size:11px;background:rgba(255,255,255,.22);border-radius:99px;padding:2px 9px;margin-top:5px}
.side-nav{flex:1;display:flex;flex-direction:column;gap:3px}
.side-cap{font-size:10.5px;letter-spacing:.3px;opacity:.7;margin:12px 10px 3px}
.side-nav a{display:flex;align-items:center;gap:10px;color:#f6f2ff;text-decoration:none;font-size:13.5px;padding:9px 11px;border-radius:12px;line-height:1.35}
.side-nav a span{white-space:normal;overflow-wrap:anywhere}
.side-nav a svg{width:18px;height:18px;flex:0 0 auto}
.side-nav a:hover{background:rgba(255,255,255,.13)}
.side-nav a.on{background:#fff;color:#43219c;font-weight:700;box-shadow:0 8px 18px rgba(35,8,95,.22)}
.side-nav a.on svg{stroke:#6a47d8}
.side-foot{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.28)}
.side-foot a{display:flex;align-items:center;gap:10px;color:#f6f2ff;text-decoration:none;font-size:14px;padding:9px 11px;border-radius:12px}
.side-foot a svg{width:18px;height:18px;flex:0 0 auto}
.side-foot a:hover{background:rgba(255,255,255,.13)}

/* ส่วนหัวของหน้า: ปุ่มย่อเมนู + บรรทัดย่อย + ชื่อหน้าใหญ่ */
.pagehead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sidebtn{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;box-shadow:0 4px 12px rgba(80,50,160,.06)}
.sidebtn:hover{background:#f7f4ff}
.sidebtn svg{width:19px;height:19px;color:#5b4aa0}
.crumb{font-size:12.5px;color:var(--mut);margin-top:2px}
.ptitle{margin:1px 0 0;font-size:25px;font-weight:800;color:#2b2450;letter-spacing:.2px}

/* ---------- การ์ด / ตาราง / ปุ่ม: โทนลาเวนเดอร์ ---------- */
.card{border-radius:18px;box-shadow:0 12px 28px rgba(80,50,160,.07)}
.stat{background:linear-gradient(160deg,#f5f0ff,#ffffff);border-color:#e7e0f9}
.stat .n{color:#7c5ce6}
th{background:#f7f4fd;color:#5b46a8}
input:focus,select:focus,textarea:focus{outline:2px solid #c9b8f6;border-color:#a78bf5}
.editbox{background:#f6f3fd;border-color:#e7e1f8}

/* hero แบนเนอร์ต้นหน้า (แดชบอร์ด) */
.hero{background:linear-gradient(135deg,#e5d6ff 0%,#ece0ff 55%,#f6ecff 100%);border:1px solid #e2d4fb;border-radius:18px;padding:18px 22px;margin-bottom:16px}
.hero h2{margin:0 0 3px;font-size:20px;color:#241d52}
.hero .sub{color:#6c639b;font-size:13.5px;margin-bottom:12px}
.hero .row{gap:10px}
.hero .btn.ghost{background:#fff;border-color:#d9c9f8;color:#4c2fa8}
.hero .btn.ghost:hover{background:#faf8ff}

/* ---------- แดชบอร์ด: การ์ดสถิติหลากสี + แถบสีประจำหมวด (เน้นความน่าสนใจ) ---------- */
.stat{position:relative;overflow:hidden;padding-left:21px}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:4px;background:#c3b4f2}
.stat .n{font-size:28px;line-height:1.15}
.stat .ic{position:absolute;right:13px;top:9px;font-size:20px;line-height:1;opacity:.45}
/* 1) สำเร็จ / สมบูรณ์ / ได้รับการนิเทศแล้ว */
.stat.c1{background:linear-gradient(160deg,#e6f9ef,#ffffff);border-color:#c4e8d5}
.stat.c1::before{background:#12a05f}
.stat.c1 .n{color:#0c854e}
/* 2) ร่าง / ยังไม่ส่ง */
.stat.c2{background:linear-gradient(160deg,#fff6e0,#ffffff);border-color:#f1e0b6}
.stat.c2::before{background:#e0a01a}
.stat.c2 .n{color:#b17b06}
/* 3) นัดในตาราง / รอพบ */
.stat.c3{background:linear-gradient(160deg,#e9f0ff,#ffffff);border-color:#cbd8f7}
.stat.c3::before{background:#4c6fd8}
.stat.c3 .n{color:#3154be}
/* 4) คะแนนเฉลี่ย (ด้านที่ 1) */
.stat.c4{background:linear-gradient(160deg,#f4edff,#ffffff);border-color:#e1d5fb}
.stat.c4::before{background:#7c5ce6}
.stat.c4 .n{color:#6841de}
/* 5) งานที่ต้องทำของฉัน */
.stat.c5{background:linear-gradient(160deg,#ffeaf0,#ffffff);border-color:#f7cad6}
.stat.c5::before{background:#d8456b}
.stat.c5 .n{color:#bd2a50}
/* 6) คะแนนเฉลี่ย (ด้านที่ 2 เป็นต้นไป) */
.stat.c6{background:linear-gradient(160deg,#e4f7f8,#ffffff);border-color:#c0e6e9}
.stat.c6::before{background:#0d8f96}
.stat.c6 .n{color:#0a737a}
/* แถบสีบางด้านบนของการ์ดหมวด (แดชบอร์ด) */
.card.acc1,.card.acc2,.card.acc3,.card.acc4,.card.acc5{border-top-width:4px}
.card.acc1{border-top-color:#12a05f}
.card.acc2{border-top-color:#e0a01a}
.card.acc3{border-top-color:#4c6fd8}
.card.acc4{border-top-color:#7c5ce6}
.card.acc5{border-top-color:#d8456b}

/* ---------- โหมดย่อเมนู (จอใหญ่): เหลือแถบไอคอน ---------- */
.shell.side-min .sidebar{flex-basis:80px;width:80px;padding:16px 10px}
.shell.side-min .side-brand,
.shell.side-min .side-user,
.shell.side-min .side-cap,
.shell.side-min .side-nav a span,
.shell.side-min .side-foot a span{display:none}
.shell.side-min .side-nav a,
.shell.side-min .side-foot a{justify-content:center;padding:11px 0}
.shell.side-min .side-brand{display:none}
.shell.side-min .side-foot{border-top:none;padding-top:0;margin-top:auto}

/* ---------- มือถือ: เมนูเป็นลิ้นชัก ---------- */
@media screen and (max-width:880px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100dvh;margin:0;border-radius:0 22px 22px 0;
    flex-basis:auto;width:272px;max-width:86vw;transform:translateX(-108%);transition:transform .28s ease;z-index:80}
  .shell.side-open .sidebar{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(28,10,70,.45);z-index:75;display:none}
  .shell.side-open .scrim{display:block}
  .content{padding:14px 12px 26px}
  .ptitle{font-size:20px}
  .pagehead{margin-bottom:10px}
  .contentw{width:100%}
}
@media screen and (max-width:1000px){
  /* จอแคบ/แท็บเล็ต: ตารางกว้างใน .card เลื่อนแนวนอนได้ ไม่ดันทั้งหน้าล้น */
  .card > table{display:block;overflow-x:auto}
}
.card > table{display:block;overflow-x:auto}
@media screen and (max-width:720px){
  .card{padding:14px;border-radius:14px}
  table{display:block;overflow-x:auto}
  th,td{white-space:normal}
  .sumtab{min-width:720px}   /* ตารางสรุปภาพรวม: ให้เลื่อนแนวนอนดีกว่าเบียดจนหัวตารางแตกหลายบรรทัด */
  .row{gap:8px}
  .btn{padding:9px 13px;font-size:14px}
  .two-col{grid-template-columns:1fr}
  .doc{padding:20px 15px}
  .doc-logo{height:58px}
  .doc-title{font-size:19px}
  .doc-info{font-size:14px;line-height:1.8;padding:8px 10px;gap:2px 10px;grid-template-columns:1fr}
  .signgrid{grid-template-columns:1fr}
  .photogrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .rubric .item{flex-wrap:wrap}
  .rubric .lv{min-width:0;width:100%;justify-content:flex-start;margin-top:6px}
  .content{padding:12px 10px 22px}
  .hero{padding:15px 16px}
}

/* ---------- พิมพ์: ซ่อนโครง v2.0 ทั้งหมด (เอกสารเหมือนเดิม) ---------- */
@media print{
  .sidebar,.pagehead,.scrim,.sidebtn{display:none !important}
  .shell,.contentw{display:block !important}
  .shell{min-height:0 !important}                 /* กันหน้ากระดาษเปล่าท้ายไฟล์ PDF/พิมพ์ (100vh เดิมดันความสูงเกินหน้า) */
  .content{max-width:100%;padding:0;margin:0}
  /* กันกฎหน้าจอเล็ก (max-width) หลุดมาทับงานพิมพ์ A4 (~794px): คืนค่าตามหน้าจริง */
  .doc-info{display:grid;grid-template-columns:1.08fr 1fr}
  table{display:table;overflow:visible}
  .two-col{grid-template-columns:1fr 1fr}
  .doc-short .photogrid{grid-template-columns:repeat(6,1fr)}
  .doc-short .signgrid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- v1.9: งานพิมพ์/ไฟล์ PDF — "ตัวอักษรดำเท่านั้น" (ตามที่ผู้ใช้ขอ) ----------
 * ตัวอักษรทุกตัวดำสนิท แต่ภาพ / ตราโรงเรียน / สีพื้นตาราง คงสีเดิมไว้ทั้งหมด
 * ใช้ได้ทั้งการพิมพ์ด้วยเบราว์เซอร์ และไฟล์ PDF ที่แอปสร้างเอง (pdf-export.js ดึงบล็อก @media print ไปใช้) */
@media print{
  *,*::before,*::after{color:#000 !important}
  /* จัดระเบียบตาราง: ตัวเลขในช่องไม่ตัดขึ้นบรรทัดใหม่ */
  .doc-table td.center{white-space:nowrap}
}

/* ---------- หน้าล็อกอิน: ใช้ธีมลาเวนเดอร์เดียวกับทั้งระบบ (การ์ดกลางจอนิยามไว้ด้านบน) ---------- */
.loginpage{background:#efecfa}