/* GPAT Attendance — หน้าเช็คชื่อสำหรับนักเรียน
   ไม่พึ่งไลบรารีภายนอกเลย ทั้งหน้าใช้ CSS ก้อนนี้ก้อนเดียว
   นักเรียน 40 คนเปิดพร้อมกันบน WiFi โรงเรียนจึงไม่มีปัญหา */

.gpat-student, .gpat-student.gpat-student * { box-sizing: border-box; }
/* กันสไตล์ของธีม WordPress มาทับ (บางธีมใช้ !important กับ button/input/h2) */
.gpat-student.gpat-student :where(button,input,select,textarea){font-family:inherit !important;font-size:inherit !important;color:inherit !important;background:none !important;border:0 !important;box-shadow:none !important;text-transform:none !important;letter-spacing:normal !important;border-radius:0 !important;margin:0 !important;padding:0 !important;line-height:inherit !important;}
.gpat-student.gpat-student :where(h1,h2,h3,p,div,span,label){margin:0 !important;font-family:inherit !important;color:inherit !important;line-height:inherit !important;font-size:inherit !important;font-weight:inherit !important;}


.gpat-student.gpat-student { font-family: var(--gpat-font, inherit) !important; color: #111827 !important; font-size: 16px !important; line-height: 1.5 !important; }

.gpat-student.gpat-student .gs-wrap { max-width: 460px !important; margin: 0 auto !important; padding: 8px 0 40px !important; }

.gpat-student.gpat-student .gs-card { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 18px !important; margin-top: 14px !important; }

.gpat-student.gpat-student .gs-center { text-align: center !important; }

.gpat-student.gpat-student .gs-card h2 { color: #111827 !important; font-size: 17px !important; font-weight: 700 !important; margin: 0 0 4px !important; }
.gpat-student.gpat-student .gs-sub { font-size: 13px !important; color: #6b7280 !important; margin: 0 0 12px !important; }

.gpat-student.gpat-student .gs-row { display: flex; justify-content: space-between; font-size: 14px !important; padding: 3px 0 !important; }
.gpat-student.gpat-student .gs-k { color: #6b7280 !important; }
.gpat-student.gpat-student .gs-v { font-weight: 600 !important; text-align: right !important; }

.gpat-student.gpat-student input[type=text] { width: 100% !important; padding: 12px !important; border: 1px solid #d1d5db !important; border-radius: 9px !important; font-size: 16px !important; text-align: center !important; font-family: inherit !important; }
.gpat-student.gpat-student input[type=text]:focus { outline: none; border-color: #2563eb !important; box-shadow: 0 0 0 3px #dbeafe !important; }

.gpat-student.gpat-student .gs-list { max-height: 300px; overflow-y: auto; margin: 12px 0 !important; -webkit-overflow-scrolling: touch; }

.gpat-student.gpat-student .gs-stu { display: flex; width: 100% !important; align-items: center; justify-content: space-between; gap: 10px !important; text-align: left !important; background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 9px !important; padding: 11px 13px !important; margin-bottom: 7px !important; cursor: pointer; font-family: inherit !important; font-size: 15px !important; color: inherit !important; }
.gpat-student.gpat-student .gs-stu:active { background: #eff6ff !important; }
.gpat-student.gpat-student .gs-stu.on { border-color: #2563eb !important; background: #eff6ff !important; border-width: 2px !important; }

.gpat-student.gpat-student .gs-name { font-weight: 600 !important; display: block; }
.gpat-student.gpat-student .gs-no { font-size: 13px !important; color: #6b7280 !important; display: block; }

.gpat-student.gpat-student .gs-dot { width: 20px !important; height: 20px !important; border: 2px solid #d1d5db !important; border-radius: 50% !important; flex-shrink: 0; }
.gpat-student.gpat-student .gs-stu.on .gs-dot { background: #2563eb !important; border-color: #2563eb !important; }

.gpat-student.gpat-student .gs-go { width: 100% !important; padding: 14px !important; border: 0 !important; border-radius: 9px !important; background: #2563eb !important; color: #fff !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer; font-family: inherit !important; }
.gpat-student.gpat-student .gs-go:disabled { opacity: .5 !important; cursor: not-allowed; }

.gpat-student.gpat-student .gs-gps { display: flex; gap: 11px !important; align-items: flex-start; }
.gpat-student.gpat-student .gs-ic { font-size: 22px !important; line-height: 1 !important; }
.gpat-student.gpat-student .gs-msg { font-size: 14px !important; white-space: pre-line !important; }
.gpat-student.gpat-student .gs-acc { font-size: 12px !important; color: #6b7280 !important; margin-top: 3px !important; }

.gpat-student.gpat-student .gs-retry { margin-top: 10px !important; padding: 9px 15px !important; border: 0 !important; border-radius: 8px !important; background: #2563eb !important; color: #fff !important; font-size: 14px !important; cursor: pointer; font-family: inherit !important; }

.gpat-student.gpat-student .gs-ok  { color: #15803d !important; }
.gpat-student.gpat-student .gs-bad { color: #b91c1c !important; }

.gpat-student.gpat-student .gs-err { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #b91c1c !important; border-radius: 10px !important; padding: 14px !important; margin-top: 14px !important; font-size: 14px !important; white-space: pre-line !important; }

.gpat-student.gpat-student .gs-big { font-size: 40px !important; }
.gpat-student.gpat-student .gs-card.gs-done h2 { color: #15803d !important; font-size: 20px !important; margin: 8px 0 !important; }
.gpat-student.gpat-student .gs-note { font-size: 12px !important; color: #9ca3af !important; text-align: center !important; margin-top: 16px !important; }

.gpat-student.gpat-student .gs-hide { display: none !important; }

.gpat-student.gpat-student .gs-spin { width: 34px !important; height: 34px !important; margin: 0 auto 12px !important; border: 3px solid #e5e7eb !important; border-top-color: #2563eb; border-radius: 50% !important; animation: gs-spin 1s linear infinite; }
@keyframes gs-spin { to { transform: rotate(360deg); } }

/* ============================================================
   ชุดสีให้กลมกลืนกับเว็บโรงเรียน (ค่าจริงถูกฉีดทับจากหน้าตั้งค่า)
   ============================================================ */
.gpat-student.gpat-student{
  --gpat-primary:#003876; --gpat-primary-dark:#002a58;
  --gpat-primary-soft:#ebeff4; --gpat-primary-line:#b8c7d9;
}
.gpat-student.gpat-student .gs-go{background:var(--gpat-primary) !important;}
.gpat-student.gpat-student .gs-stu.on{border-color:var(--gpat-primary) !important;background:var(--gpat-primary-soft) !important;}
.gpat-student.gpat-student .gs-stu.on .gs-dot{background:var(--gpat-primary) !important;border-color:var(--gpat-primary) !important;}
.gpat-student.gpat-student .gs-stu:active{background:var(--gpat-primary-soft) !important;}
.gpat-student.gpat-student .gs-retry{background:var(--gpat-primary) !important;}
.gpat-student.gpat-student input[type=text]:focus{border-color:var(--gpat-primary) !important;}