/* =====================================================================
   STDAC — ธีมใหม่ (ทับ AdminBSB)  |  2026-10
   - โทนสีหลัก: เขียวหัวเป็ดเข้ม + เหลืองอำพัน
   - ตัวอักษร: IBM Plex Sans Thai
   - เน้นการเข้าถึง: ความคมชัดสี, focus ที่มองเห็นชัด, ขนาดปุ่มกดใหญ่พอ
   ===================================================================== */
:root{
  /* ธีม 2026-10 (รอบ 4): น้ำเงินคราม-ม่วง + ส้ม (สีเดียวกับโลโก้ SAM) */
  --brand:#3B5BDB; --brand-700:#2C44B3; --brand-600:#3451C8; --brand-100:#DCE4FF; --brand-50:#EEF2FF;
  --accent:#FF922B; --accent-700:#A84F00;
  --grad:linear-gradient(135deg,#4C6EF5 0%,#5F3DC4 100%);
  --grad-warm:linear-gradient(135deg,#FFA94D 0%,#F76707 100%);
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#F7F9FD;
  --text:#1A2233; --text-2:#465166; --muted:#5B667A; --border:#E5E9F2; --border-strong:#CBD2E0;
  --success:#1D7F52; --success-50:#E7F5EE; --danger:#C2261B; --danger-50:#FDECEA;
  --warning:#9A5B00; --warning-50:#FFF4E5; --info:#1F5FAE; --info-50:#E8F0FB;
  --radius:16px; --radius-sm:12px; --radius-xs:10px;
  --shadow-sm:0 1px 2px rgba(23,32,64,.04),0 2px 8px rgba(23,32,64,.05);
  --shadow:0 6px 20px rgba(23,32,64,.08),0 1px 3px rgba(23,32,64,.05);
  --shadow-lg:0 20px 48px rgba(23,32,64,.16);
  --shadow-brand:0 8px 20px rgba(76,110,245,.32);
  --nav-h:68px; --side-w:268px;
  --font:'IBM Plex Sans Thai','Sarabun','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --focus:0 0 0 3px #fff,0 0 0 6px #1F5FAE;
}

/* ---------- พื้นฐาน ---------- */
html{ -webkit-text-size-adjust:100%; }
body, .theme-stdac{ background:var(--bg) !important; color:var(--text); font-family:var(--font) !important;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; }
body, h1,h2,h3,h4,h5,h6, input, button, select, textarea, ul, li, span, .navbar, .sidebar, .btn, .table, .dropdown-menu, .modal{
  font-family:var(--font) !important; }
h1,h2,h3,h4,h5,h6{ color:var(--text); font-weight:600; line-height:1.35; }
a{ color:var(--brand); }
a:hover, a:focus{ color:var(--brand-700); }
::selection{ background:var(--brand-100); }
.material-icons{ vertical-align:middle; }

/* focus ที่มองเห็นชัดสำหรับผู้ใช้คีย์บอร์ด */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
  outline:none !important; box-shadow:var(--focus) !important; border-radius:6px; }
.btn:focus, .btn:active:focus{ outline:none; }

/* ลิงก์ข้ามไปเนื้อหาหลัก */
.skip-link{ position:fixed; top:-60px; left:16px; z-index:100000; background:var(--text); color:#fff !important;
  padding:10px 18px; border-radius:0 0 10px 10px; font-weight:600; transition:top .15s; }
.skip-link:focus{ top:0; }
.sr-only-focusable:focus{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; }

/* ---------- แถบด้านบน ---------- */
.navbar.app-navbar{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); min-height:var(--nav-h); margin:0; z-index:1030;
  background:var(--brand) !important; border:0; border-radius:0; box-shadow:0 1px 0 rgba(0,0,0,.08),0 2px 10px rgba(14,90,107,.18); padding:0; }
.app-navbar .app-navbar-inner{ height:100%; display:flex; align-items:center; gap:8px; padding:0 16px; }
.app-navbar .bars{ display:none; float:none; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:10px;
  background:transparent; color:#fff; align-items:center; justify-content:center; cursor:pointer; position:static; }
.app-navbar .bars:before, .app-navbar .bars:after{ display:none !important; content:none !important; }
.app-navbar .bars:hover{ background:rgba(255,255,255,.12); }
.ls-closed .app-navbar .bars{ display:inline-flex; }
.app-brand{ display:flex; align-items:center; gap:12px; color:#fff !important; text-decoration:none !important; min-width:0; padding:6px 4px; border-radius:10px; }
.app-brand-mark{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; background:var(--accent); color:var(--brand-700);
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); }
.app-brand-mark .material-icons{ font-size:24px; }
/* โลโก้ SAM: พื้นขาวให้สีน้ำเงิน/ส้มของโลโก้เด่นบนแถบสีเข้ม */
.app-brand-mark.is-logo{ background:#fff; padding:4px; overflow:hidden; }
.app-brand-mark.is-logo img{ width:100%; height:100%; object-fit:contain; display:block; }.app-brand-text{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
/* ชื่อระบบยาว (Student Activity Management System) = ขึ้น 2 บรรทัดแบบสมดุล ไม่ตัดเป็น … */
.app-brand-title{ font-size:17px; font-weight:600; line-height:1.15; white-space:normal; text-wrap:balance; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; letter-spacing:-.005em; }
.app-brand-sub{ font-size:12.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-navbar-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.app-user-btn{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:999px; padding:4px 12px 4px 4px; min-height:44px; cursor:pointer; }
.app-user-btn:hover{ background:rgba(255,255,255,.18); }
.app-user-btn img{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:#fff; }
.app-user-btn .name{ font-size:14px; font-weight:500; max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-navbar .dropdown-menu{ margin-top:8px; }

/* ---------- เมนูด้านข้าง ---------- */
.sidebar{ top:var(--nav-h) !important; height:calc(100vh - var(--nav-h)) !important; width:var(--side-w) !important;
  background:var(--surface) !important; box-shadow:none !important; border-right:1px solid var(--border); display:flex !important; flex-direction:column; }
.ls-closed .sidebar{ margin-left:calc(-1 * var(--side-w) - 10px) !important; }
.overlay-open .sidebar{ margin-left:0 !important; box-shadow:var(--shadow-lg) !important; z-index:1040 !important; }
.overlay{ position:fixed; inset:0; background:rgba(15,23,32,.45); z-index:1035 !important; display:none; }
.sidebar .user-info{ background:none !important; height:auto !important; padding:18px 18px 14px !important; border-bottom:1px solid var(--border) !important;
  display:flex; align-items:center; gap:12px; white-space:normal; }
.sidebar .user-info .image{ margin:0 !important; }
.sidebar .user-info .image img{ width:46px; height:46px; object-fit:cover; border:2px solid var(--brand-100); }
.sidebar .user-info .info-container{ top:0 !important; min-width:0; flex:1; }
.sidebar .user-info .info-container .name{ color:var(--text) !important; font-weight:600; font-size:15px !important; max-width:none !important; }
.sidebar .user-info .info-container .email{ color:var(--muted) !important; font-size:13px !important; max-width:none !important; }
.sidebar .menu{ flex:1 1 auto; height:auto !important; padding:8px 10px 16px; overflow-y:auto; }
.sidebar .menu .list{ margin:0; }
.sidebar .menu .list .header{ background:none !important; color:var(--muted) !important; font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:.02em; padding:12px 12px 6px !important; }
.sidebar .menu .list > li{ margin:2px 0; }
.sidebar .menu .list a{ color:var(--text-2) !important; padding:10px 12px !important; min-height:44px; align-items:center; border-radius:var(--radius-sm);
  transition:background .15s,color .15s; }
.sidebar .menu .list a:hover{ background:var(--surface-2) !important; color:var(--text) !important; }
.sidebar .menu .list a span{ margin:0 0 0 12px !important; color:inherit !important; font-weight:500 !important; font-size:15px !important; }
.sidebar .menu .list i.material-icons{ margin-top:0 !important; font-size:22px; color:var(--muted) !important; }
.sidebar .menu .list li.active > a{ background:var(--brand-50) !important; color:var(--brand-700) !important; }
.sidebar .menu .list li.active > a i.material-icons{ color:var(--brand) !important; }
.sidebar .menu .list li.active > :first-child span{ font-weight:600 !important; }
.sidebar .menu .list .menu-toggle:before, .sidebar .menu .list .menu-toggle:after{ top:calc(50% - 13px) !important; right:14px !important; color:var(--muted); }
.sidebar .menu .list .ml-menu{ margin:2px 0 6px; padding-left:0; }
.sidebar .menu .list .ml-menu li a{ padding:8px 12px 8px 48px !important; min-height:40px; font-size:14.5px; position:relative; }
.sidebar .menu .list .ml-menu li a:before{ content:''; position:absolute; left:23px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--border-strong); }
.sidebar .menu .list .ml-menu li.active > a{ background:var(--brand-50) !important; color:var(--brand-700) !important; font-weight:600; }
.sidebar .menu .list .ml-menu li.active > a:before{ background:var(--brand); box-shadow:0 0 0 3px var(--brand-100); }
.sidebar .menu .list .ml-menu .sub-label{ font-style:normal; }
.sidebar .legal{ position:static !important; border-top:1px solid var(--border) !important; padding:12px 18px !important; color:var(--muted); font-size:12.5px; }
.sidebar .legal .copyright{ font-size:12.5px !important; white-space:normal !important; }
.sidebar .legal a{ color:var(--muted) !important; font-weight:500 !important; }
.slimScrollBar{ background:var(--border-strong) !important; }

/* ---------- พื้นที่เนื้อหา ---------- */
main.content{ margin:calc(var(--nav-h) + 24px) 24px 32px calc(var(--side-w) + 24px) !important; transition:margin .25s; }
.ls-closed main.content{ margin-left:16px !important; margin-right:16px !important; }
main.content > .container-fluid, main.content > .row{ max-width:1440px; }
main.content:focus{ outline:none; }
.block-header{ margin-bottom:18px !important; }
.block-header h2, .page-title{ font-size:24px !important; font-weight:600 !important; color:var(--text) !important; margin:0 !important; text-transform:none !important; }
.block-header p, .page-subtitle{ color:var(--muted); margin:4px 0 0; font-size:15px; }
.page-header{ border:0; margin:0 0 20px; padding:0; }
.page-header h1{ font-size:24px; margin:0; }
.page-header p{ color:var(--muted); margin:4px 0 0; }
.breadcrumb{ background:none; padding:0; margin:0 0 8px; font-size:13.5px; }

/* ---------- การ์ด ---------- */
.card{ background:var(--surface) !important; border:1px solid var(--border); border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important;
  margin-bottom:24px !important; overflow:visible; }
.card .header{ padding:16px 20px !important; border-bottom:1px solid var(--border) !important; position:relative; color:var(--text); }
.card .header h2{ font-size:18px !important; font-weight:600 !important; color:var(--text) !important; margin:0 !important; text-transform:none !important; }
.card .header h2 small{ color:var(--muted) !important; font-size:14px; margin-top:4px; }
.card .header .header-dropdown{ top:12px !important; right:12px !important; }
.card .header .header-dropdown > li > a, .card .header .header-dropdown i{ color:var(--muted); }
.card .header .header-dropdown > li > a{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; }
.card .header .header-dropdown > li > a:hover{ background:var(--surface-2); }
.card .body{ padding:20px !important; color:var(--text); font-size:15px !important; }
.card .header[class*="bg-"], .card .header.bg-red{ border-radius:var(--radius) var(--radius) 0 0; }
.well{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:none; }

/* ---------- กล่องสถิติ (info-box) ---------- */
.info-box{ border-radius:var(--radius) !important; box-shadow:var(--shadow-sm) !important; overflow:hidden; border:1px solid var(--border); min-height:96px; height:auto !important; display:flex !important; }
.info-box .icon{ display:flex !important; align-items:center; justify-content:center; width:88px !important; }
.info-box .content .text{ font-size:14px !important; margin-top:14px !important; }
.info-box .content .number{ font-size:28px !important; font-weight:600 !important; }

/* ---------- ปุ่ม ---------- */
.btn{ border-radius:var(--radius-sm) !important; font-weight:500; font-size:15px; padding:8px 16px; min-height:40px; box-shadow:none !important;
  border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .15s,border-color .15s,color .15s,transform .05s; text-transform:none; }
.btn:active{ transform:translateY(1px); }
.btn .material-icons{ font-size:20px; position:static !important; top:auto !important; margin:0 !important; }
.btn-lg{ min-height:48px; font-size:16.5px; padding:10px 22px; }
.btn-sm, .btn-xs{ min-height:32px; font-size:13.5px; padding:4px 10px; }
.btn-block{ display:flex; width:100%; }
.btn-default{ background:var(--surface) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
.btn-default:hover{ background:var(--surface-2) !important; border-color:#AEB9C5 !important; }
.btn-primary, .btn.bg-pink, .btn.bg-cyan, .btn.bg-teal{ background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
.btn-primary:hover, .btn-primary:focus, .btn.bg-pink:hover{ background:var(--brand-700) !important; border-color:var(--brand-700) !important; color:#fff !important; }
.btn-success{ background:var(--success) !important; border-color:var(--success) !important; color:#fff !important; }
.btn-success:hover{ background:#166541 !important; }
.btn-danger{ background:var(--danger) !important; border-color:var(--danger) !important; color:#fff !important; }
.btn-danger:hover{ background:#8F1C13 !important; }
.btn-warning{ background:var(--accent) !important; border-color:var(--accent) !important; color:#3D2700 !important; }
.btn-info{ background:var(--info) !important; border-color:var(--info) !important; color:#fff !important; }
.btn-link{ color:var(--brand) !important; background:none !important; }

/* ---------- ฟอร์ม ---------- */
label, .form-label{ font-weight:500; color:var(--text); font-size:14.5px; margin-bottom:6px; }
.form-group{ margin-bottom:18px; }
.form-group .form-line, .input-group .form-line{ border-bottom:0 !important; width:100%; }
.form-group .form-line:after, .input-group .form-line:after{ display:none !important; }
.form-control, .form-group .form-control, .input-group .form-control, select.form-control, .dataTables_wrapper input, .dataTables_wrapper select{
  border:1px solid var(--border-strong) !important; border-radius:var(--radius-xs) !important; background:var(--surface) !important; color:var(--text) !important;
  padding:8px 12px !important; height:auto; min-height:42px; font-size:15px !important; box-shadow:none !important; transition:border-color .15s, box-shadow .15s; }
textarea.form-control{ min-height:96px; }
.form-control:focus, .dataTables_wrapper input:focus, .dataTables_wrapper select:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-100) !important; outline:none; }
.form-control::placeholder{ color:#7C8796; opacity:1; }
.form-control[disabled], .form-control[readonly]{ background:var(--surface-2) !important; color:var(--text-2) !important; }
.input-group{ display:flex !important; align-items:stretch; width:100%; }
.input-group .input-group-addon{ display:flex; align-items:center; justify-content:center; padding:0 12px !important; background:var(--surface-2) !important;
  border:1px solid var(--border-strong) !important; border-right:0 !important; border-radius:var(--radius-xs) 0 0 var(--radius-xs) !important; color:var(--muted); width:auto; }
.input-group .input-group-addon + .form-line .form-control{ border-radius:0 var(--radius-xs) var(--radius-xs) 0 !important; }
.input-group .input-group-addon .material-icons{ font-size:20px; }
.bootstrap-select.btn-group .dropdown-toggle{ border:1px solid var(--border-strong) !important; border-radius:var(--radius-xs) !important; background:var(--surface) !important; min-height:42px; }
[type="checkbox"].filled-in:checked + label:after{ border-color:var(--brand) !important; background-color:var(--brand) !important; }
[type="checkbox"] + label, [type="radio"] + label{ font-weight:400; }
.help-block, .form-text{ color:var(--muted); font-size:13.5px; }
.has-error .form-control, .form-control.error{ border-color:var(--danger) !important; }
label.error{ color:var(--danger) !important; font-size:13.5px !important; font-weight:500; }

/* ---------- ตาราง ---------- */
.table-responsive{ border:0; border-radius:var(--radius-sm); }
.table{ color:var(--text); margin-bottom:0; background:var(--surface); }
.table > thead > tr > th, table.dataTable thead th{ background:var(--surface-2) !important; color:var(--text-2) !important; font-weight:600 !important;
  font-size:14px; border-bottom:1px solid var(--border) !important; border-top:0 !important; padding:12px 14px !important; white-space:nowrap; vertical-align:middle; }
.table > tbody > tr > td, table.dataTable tbody td{ padding:11px 14px !important; border-top:1px solid var(--border) !important; vertical-align:middle !important; font-size:14.5px; }
.table > tbody > tr:hover > td, table.dataTable tbody tr:hover{ background:var(--brand-50) !important; }
.table-striped > tbody > tr:nth-of-type(odd){ background:var(--surface-2); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td{ border-color:var(--border) !important; }
table.dataTable{ border-collapse:collapse !important; width:100% !important; }
table.dataTable.no-footer{ border-bottom:1px solid var(--border) !important; }
table.dataTable tbody tr.selected, table.dataTable tbody tr.selected td{ background:var(--brand-100) !important; }
.dataTables_wrapper{ font-size:14.5px; color:var(--text-2); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter{ margin-bottom:12px; }
.dataTables_wrapper .dataTables_filter input{ margin-left:8px; min-width:220px; }
.dataTables_wrapper .dataTables_info{ padding-top:14px !important; color:var(--muted) !important; }
.dataTables_wrapper .dataTables_paginate{ padding-top:10px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:8px !important; border:1px solid transparent !important; padding:6px 12px !important; margin:0 2px; color:var(--text-2) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--surface-2) !important; border-color:var(--border) !important; color:var(--text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{ color:#9AA5B1 !important; }

/* ---------- Dropdown / Modal / Alert ---------- */
.dropdown-menu{ border:1px solid var(--border) !important; border-radius:12px !important; box-shadow:var(--shadow-lg) !important; padding:6px !important; margin-top:6px !important; }
.dropdown-menu > li > a{ border-radius:8px; padding:9px 12px !important; color:var(--text) !important; display:flex !important; align-items:center; gap:10px; font-size:14.5px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ background:var(--surface-2) !important; }
.dropdown-menu > li > a .material-icons{ font-size:20px; color:var(--muted); margin:0 !important; }
.dropdown-menu .divider{ margin:6px 0; background:var(--border); }
.dropdown-menu .dropdown-header{ color:var(--muted); font-size:12.5px; padding:6px 12px; }
.modal-backdrop.in{ opacity:.45; background:#0F1720; }
.modal-content{ border:0 !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-lg) !important; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px !important; border-bottom:1px solid var(--border) !important; background:var(--surface); }
.modal-header h3, .modal-header .modal-title{ font-size:20px !important; font-weight:600 !important; margin:0 !important; padding:0 !important; float:none !important; width:auto !important; }
/* clearfix ของ Bootstrap (::before/::after) กลายเป็นช่องว่างใน flex → ชื่อและปุ่ม × ถูกดันเข้ากลาง (2026-10-16) */
.modal-header:before, .modal-header:after{ display:none !important; content:none !important; }
.modal-header .close{ opacity:1; width:44px; height:44px; border-radius:10px; font-size:28px; line-height:1; color:var(--text-2); text-shadow:none; margin:0 0 0 auto !important; float:none; flex:0 0 auto; }
.modal-header .close:hover{ background:var(--surface-2); color:var(--text); }
.modal-body{ padding:20px !important; }
.modal-footer{ border-top:1px solid var(--border) !important; padding:12px 20px !important; }
.modal-footer:empty{ display:none; }
.modal-dialog-full-width .modal-content, .modal-content-full-width{ border-radius:0 !important; background:var(--bg) !important; min-height:100vh; }
.modal-dialog-full-width .modal-header{ position:sticky; top:0; z-index:5; }
.alert{ border-radius:var(--radius-sm) !important; border:1px solid transparent; box-shadow:none !important; padding:12px 16px; font-size:15px; }
.alert-success{ background:var(--success-50) !important; color:#145A3A !important; border-color:#BDE3CF !important; }
.alert-danger{ background:var(--danger-50) !important; color:#8F1C13 !important; border-color:#F5C2BC !important; }
.alert-warning{ background:var(--warning-50) !important; color:#6B4400 !important; border-color:#F3DCA4 !important; }
.alert-info{ background:var(--info-50) !important; color:#174A88 !important; border-color:#C4D7F2 !important; }
.label, .badge{ border-radius:999px; font-weight:500; padding:3px 10px; font-size:12.5px; }
.label-success{ background:var(--success); } .label-danger{ background:var(--danger); } .label-primary{ background:var(--brand); }
.nav-tabs{ border-bottom:1px solid var(--border); }
.nav-tabs > li > a{ color:var(--text-2) !important; border:0 !important; border-bottom:2px solid transparent !important; border-radius:0 !important; font-weight:500; padding:10px 16px; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover{ color:var(--brand) !important; border-bottom-color:var(--brand) !important; background:none !important; }
.progress{ border-radius:999px; background:var(--border); box-shadow:none; height:10px; }
.progress-bar{ background:var(--brand); }

/* ---------- ส่วนประกอบใหม่ของหน้าภาพรวม ---------- */
.welcome{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.welcome h1{ font-size:26px; margin:0; font-weight:600; }
.welcome p{ margin:4px 0 0; color:var(--muted); }
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-bottom:24px; }
.stat-card{ position:relative; display:flex; align-items:center; gap:16px; padding:20px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); color:var(--text) !important; text-decoration:none !important; transition:box-shadow .15s, transform .15s, border-color .15s; }
a.stat-card:hover{ box-shadow:var(--shadow); border-color:var(--brand-100); transform:translateY(-2px); }
.stat-icon{ flex:0 0 auto; width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--brand-50); color:var(--brand); }
.stat-icon .material-icons{ font-size:30px; }
.stat-icon.amber{ background:var(--warning-50); color:var(--accent-700); }
.stat-icon.green{ background:var(--success-50); color:var(--success); }
.stat-label{ color:var(--muted); font-size:14.5px; }
.stat-value{ font-size:32px; font-weight:600; line-height:1.15; font-variant-numeric:tabular-nums; }
.stat-link{ position:absolute; right:16px; top:16px; color:var(--muted); font-size:20px !important; }
.quick-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.quick-link{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text) !important; background:var(--surface); text-decoration:none !important; font-weight:500; min-height:56px; transition:background .15s,border-color .15s; }
.quick-link:hover{ background:var(--brand-50); border-color:var(--brand-100); }
.quick-link .material-icons{ color:var(--brand); }
.empty-state{ text-align:center; color:var(--muted); padding:32px 16px; }
.empty-state .material-icons{ font-size:40px; color:var(--border-strong); display:block; margin-bottom:8px; }
.loading-inline{ color:var(--muted); display:flex; align-items:center; gap:8px; padding:16px 0; }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
body.auth-page{ max-width:none !important; margin:0 !important; padding:0 !important; background:var(--bg) !important; min-height:100vh; }
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.auth-hero{ position:relative; overflow:hidden; background:var(--brand); color:#fff; padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between; }
.auth-hero:before{ content:''; position:absolute; width:520px; height:520px; right:-160px; bottom:-200px; border-radius:50%; background:rgba(255,255,255,.06); }
.auth-hero:after{ content:''; position:absolute; width:300px; height:300px; right:120px; top:-120px; border-radius:50%; background:rgba(242,180,65,.16); }
.auth-hero > *{ position:relative; z-index:1; }
.auth-hero .app-brand-title{ font-size:19px; }
.auth-hero h1{ color:#fff; font-size:38px; line-height:1.3; margin:0 0 14px; font-weight:600; max-width:15em; }
.auth-hero p.lead{ color:rgba(255,255,255,.88); font-size:17px; max-width:30em; margin:0; }
.auth-features{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; }
.auth-features li{ display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.95); }
.auth-features .material-icons{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; font-size:20px; color:var(--accent); }
.auth-hero small{ color:rgba(255,255,255,.75); font-size:13px; }
.auth-main{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.auth-card{ width:100%; max-width:420px; }
.auth-card h2{ font-size:28px; margin:0 0 6px; }
.auth-card .sub{ color:var(--muted); margin:0 0 28px; }
.auth-card .form-control{ min-height:48px; font-size:16px !important; }
.auth-card .btn-primary{ min-height:50px; font-size:16.5px; }
.pw-field{ position:relative; }
.pw-field .form-control{ padding-right:52px !important; }
.pw-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; background:none; color:var(--muted); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pw-toggle:hover{ background:var(--surface-2); color:var(--text); }
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 22px; }
.auth-check{ display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; margin:0; }
.auth-check input{ width:18px; height:18px; accent-color:var(--brand); position:static !important; left:auto !important; opacity:1 !important; margin:0; }
.auth-foot{ margin-top:28px; color:var(--muted); font-size:13.5px; text-align:center; }
.auth-alert{ margin-bottom:18px; }
/* คำแนะนำการเข้าสู่ระบบ (ครู / นักเรียน) */
.login-guide{ border:1px solid var(--brand-100); background:var(--brand-50); border-radius:14px; padding:14px 16px; margin:24px 0 0; }
.login-guide-head{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--brand-700); font-size:15px; margin-bottom:10px; }
.login-guide-head .material-icons{ font-size:20px; color:var(--brand); }
.login-guide-row{ display:flex; gap:12px; align-items:flex-start; padding:10px 0 2px; border-top:1px dashed var(--brand-100); }
.login-guide-row:first-of-type{ border-top:0; padding-top:2px; }
.login-guide-icon{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--surface); color:var(--brand);
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(14,90,107,.12); }
.login-guide-icon .material-icons{ font-size:20px; }
.login-guide-text{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; line-height:1.55; color:var(--text-2); min-width:0; }
.login-guide-text > b{ color:var(--text); font-size:14.5px; }
.login-guide-text code{ background:var(--surface); color:var(--brand-700); border:1px solid var(--brand-100); border-radius:6px; padding:0 5px; font-size:12.5px; }

/* ---------- จอเล็ก ---------- */
@media (max-width:1169px){
  main.content{ margin-left:16px !important; margin-right:16px !important; }
}
@media (max-width:767px){
  :root{ --nav-h:58px; }
  body{ font-size:15px; }
  .app-brand-sub{ display:none; }
  .app-brand-mark{ width:36px; height:36px; }
  .app-user-btn .name{ display:none; }
  .app-user-btn{ padding:4px; }
  main.content{ margin:calc(var(--nav-h) + 16px) 12px 24px 12px !important; }
  .card .header, .card .body{ padding:14px 16px !important; }
  .welcome h1, .block-header h2{ font-size:22px !important; }
  .stat-value{ font-size:28px; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length{ float:none !important; text-align:left !important; }
  .dataTables_wrapper .dataTables_filter input{ min-width:0; width:100%; margin:6px 0 0; }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-hero{ padding:28px 24px; }
  .auth-hero h1{ font-size:26px; }
  .auth-hero .auth-features, .auth-hero small{ display:none; }
  .auth-main{ padding:28px 20px 40px; align-items:flex-start; }
}

/* ลดการเคลื่อนไหวสำหรับผู้ที่ตั้งค่าไว้ */
@media (prefers-reduced-motion:reduce){
  *, *:before, *:after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* พิมพ์รายงาน */
@media print{
  .app-navbar, .sidebar, .overlay, .skip-link, .header-dropdown, .dataTables_filter, .dataTables_length, .dataTables_paginate{ display:none !important; }
  main.content{ margin:0 !important; }
  body{ background:#fff !important; }
  .card{ box-shadow:none !important; border:1px solid #ccc; }
}

/* ฟอร์มอื่นที่ใช้เทมเพลตหน้าเข้าสู่ระบบ (สมัครสมาชิก ฯลฯ) */
.auth-main .login-box, .auth-main .signup-box{ width:100%; max-width:460px; margin:0 auto; }
.auth-main .login-box .logo, .auth-main .signup-box .logo{ display:none; }
.auth-main .login-box .card, .auth-main .signup-box .card{ box-shadow:var(--shadow) !important; }
.auth-main .msg{ font-size:20px; color:var(--text); margin-bottom:20px; }
.auth-alert{ display:flex; gap:10px; align-items:flex-start; }

/* แก้: bootstrap-select ห่อ select ไว้ — ไม่ให้มีกรอบซ้อน */
.bootstrap-select.form-control, .form-group .bootstrap-select.form-control{ border:0 !important; padding:0 !important; min-height:0 !important; background:transparent !important; box-shadow:none !important; }
.bootstrap-select.btn-group .dropdown-toggle{ padding:8px 12px !important; color:var(--text) !important; font-size:15px; }
.bootstrap-select.btn-group.open .dropdown-toggle, .bootstrap-select.btn-group .dropdown-toggle:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-100) !important; outline:none !important; }
.bootstrap-select .dropdown-menu li.selected a{ background:var(--brand-50) !important; color:var(--brand-700) !important; }
/* bootstrap-select มีเมนูซ้อน 2 ชั้น (div.dropdown-menu > ul.dropdown-menu.inner) — สไตล์ .dropdown-menu ด้านบนทำให้ชั้นในมีกรอบ/เงา/ระยะขอบซ้ำ
   จนเป็นกล่องซ้อนกล่องและข้อความโดนตัด → ชั้นในไม่มีกรอบ */
.bootstrap-select .dropdown-menu.inner{ border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important; position:static; float:none; }
.bootstrap-select .dropdown-menu.open{ overflow:hidden; }
/* ช่องค้นหาในเมนู (data-live-search): ธีมเดิมเลื่อนช่องไปขวา 30px เพื่อเว้นที่ให้ไอคอน แต่ช่องกว้าง 100% จึงล้นกรอบ → ใส่ไอคอนไว้ในช่องแทน */
.bootstrap-select .bs-searchbox{ position:relative; padding:2px 2px 8px !important; margin-bottom:4px; border-bottom:1px solid var(--border) !important; }
.bootstrap-select .bs-searchbox .form-control{ margin:0 !important; width:100% !important; height:38px; padding:6px 10px 6px 36px !important; border:1px solid var(--border-strong) !important; border-radius:8px !important; background:var(--surface) !important; }
.bootstrap-select .bs-searchbox .form-control:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-100) !important; }
.bootstrap-select .bs-searchbox:after{ left:12px !important; top:calc(50% - 3px) !important; transform:translateY(-50%); font-size:20px !important; color:var(--muted); pointer-events:none; line-height:1; }
.bootstrap-select .dropdown-menu li a:focus{ outline:none !important; box-shadow:inset 0 0 0 2px var(--brand-100); } /* โฟกัสคีย์บอร์ด: กรอบนุ่มแทนกรอบหนาของเบราว์เซอร์ */
.bootstrap-select .no-results{ padding:8px 12px; margin:0; background:transparent; color:var(--muted); font-size:14px; }
/* แก้: ลูกศรเดิมของ AdminBSB ในเมนูย่อยที่เลือกอยู่ */
.sidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle){ margin-left:0 !important; }
.sidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle):before,
.sidebar .menu .list .ml-menu li a:before{ content:'' !important; font-family:inherit !important; position:absolute !important; left:23px !important; top:50% !important;
  right:auto !important; width:6px !important; height:6px !important; margin-top:-3px; font-size:0 !important; border-radius:50%; background:var(--border-strong); }
.sidebar .menu .list .ml-menu li.active > a:before, .sidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle):before{ background:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-100); }
.waves-effect.waves-block{ display:flex; }

/* แก้: AdminBSB บังคับ border:none + ตัวอักษร 13px ให้ปุ่มทุกตัว */
.btn.btn:not(.btn-link):not(.btn-circle){ border-width:1px !important; border-style:solid !important; font-size:15px !important; box-shadow:none !important; }
.btn.btn-lg:not(.btn-link):not(.btn-circle){ font-size:16.5px !important; }
.btn.btn-sm:not(.btn-link):not(.btn-circle), .btn.btn-xs:not(.btn-link):not(.btn-circle){ font-size:13.5px !important; }
.btn:not(.btn-link):not(.btn-circle) i{ font-size:20px !important; position:static !important; top:auto !important; left:auto !important; }
.btn:not(.btn-link):not(.btn-circle) span{ position:static !important; top:auto !important; margin:0 !important; }
@media (max-width:767px){ main.content > .container-fluid{ padding-left:4px; padding-right:4px; } }

/* ช่องเวลาแบบ 24 ชั่วโมง */
.time24{ display:flex; align-items:center; gap:8px; }
.time24 select.form-control{ width:auto !important; min-width:86px; flex:0 0 auto; cursor:pointer; }
.time24 .t24-sep{ font-weight:600; font-size:18px; color:var(--text-2); }
.time24 .t24-unit{ color:var(--muted); margin-left:2px; }

/* =====================================================================
   ส่วนประกอบเพิ่มเติม (รอบ 2): หัวเพจ ปุ่มจัดการ ป้ายสถานะ หน้าเช็คชื่อ
   ===================================================================== */
.page-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:0 0 20px; }
.page-head-text{ display:flex; align-items:center; gap:14px; min-width:0; }
.page-head-icon{ flex:0 0 auto; width:48px; height:48px; border-radius:14px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(14,90,107,.22); }
.page-head-icon .material-icons{ font-size:26px; }
.page-head .page-title{ font-size:24px !important; }
.page-head-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* ปุ่มจัดการในตาราง */
.act-btns{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start; }
.btn.btn-act:not(.btn-link){ min-height:36px; padding:5px 12px; font-size:14px !important; gap:6px; white-space:nowrap; }
.btn.btn-act:not(.btn-link) i{ font-size:18px !important; }
.btn-soft-primary{ background:var(--brand-50) !important; color:var(--brand-700) !important; border-color:var(--brand-100) !important; }
.btn-soft-primary:hover{ background:var(--brand-100) !important; }
.btn-soft-success{ background:var(--success-50) !important; color:#145A3A !important; border-color:#BDE3CF !important; }
.btn-soft-success:hover{ background:#D3EEDF !important; }
.btn-soft-info{ background:var(--info-50) !important; color:#174A88 !important; border-color:#C4D7F2 !important; }
.btn-soft-info:hover{ background:#D8E5F7 !important; }
.btn-soft-warning{ background:var(--warning-50) !important; color:#6B4400 !important; border-color:#F3DCA4 !important; }
.btn-soft-warning:hover{ background:#FCEBC2 !important; }
.btn-soft-danger{ background:var(--danger-50) !important; color:#8F1C13 !important; border-color:#F5C2BC !important; }
.btn-soft-danger:hover{ background:#FAD9D5 !important; }
.btn-ghost-danger{ background:transparent !important; color:var(--danger) !important; border-color:transparent !important; }
.btn-ghost-danger:hover{ background:var(--danger-50) !important; border-color:#F5C2BC !important; }
.btn[disabled], .btn.disabled{ opacity:.55; cursor:not-allowed; }

/* ป้ายสถานะ */
.status-badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:500; line-height:1.5; white-space:nowrap; border:1px solid transparent; }
.status-badge .material-icons{ font-size:15px; }
.status-badge.tone-success{ background:var(--success-50); color:#145A3A; border-color:#BDE3CF; }
.status-badge.tone-warning{ background:var(--warning-50); color:#6B4400; border-color:#F3DCA4; }
.status-badge.tone-danger{ background:var(--danger-50); color:#8F1C13; border-color:#F5C2BC; }
.status-badge.tone-info{ background:var(--info-50); color:#174A88; border-color:#C4D7F2; }
.status-badge.tone-muted{ background:var(--surface-2); color:var(--muted); border-color:var(--border); }

/* ตาราง: ข้อความชิดซ้าย/คอลัมน์ชื่อ */
.table td.text-left{ text-align:left !important; }
.cell-title{ font-weight:600; color:var(--text); display:block; white-space:normal; min-width:180px; }
.cell-sub{ color:var(--muted); font-size:13px; display:block; margin-top:2px; }
.cell-mono{ font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.table td .status-badge{ margin-top:4px; }
table.dataTable tbody tr{ cursor:default; }
.empty-state .empty-title{ font-weight:600; color:var(--text-2); }
.empty-state .empty-hint{ font-size:14px; margin-top:4px; }

/* แถบเครื่องมือในการ์ด */
.toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:16px; }
.toolbar .toolbar-grow{ flex:1 1 220px; }
.toolbar label{ margin:0; }
.toolbar select.form-control{ width:auto; max-width:100%; display:inline-block; }

/* ---------- หน้าเช็คชื่อ ---------- */
.check-summary{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.check-summary .sum-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; }
.check-summary .sum-label{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.check-summary .sum-label:before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--border-strong); }
.check-summary .sum-value{ font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2; }
.check-summary .s-check .sum-label:before{ background:var(--success); }
.check-summary .s-late .sum-label:before{ background:var(--accent); }
.check-summary .s-leave .sum-label:before{ background:var(--info); }
.check-summary .s-unCheck .sum-label:before{ background:var(--danger); }
.check-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.check-toolbar .form-control{ width:auto; }
.check-toolbar .grow{ flex:1 1 240px; }
.check-toolbar .grow .form-control{ width:100%; }

.check-list{ list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); }
.check-row{ display:flex; align-items:center; gap:14px; padding:10px 14px; border-top:1px solid var(--border); transition:background .15s; }
.check-row:first-child{ border-top:0; }
.check-row:hover{ background:var(--surface-2); }
.check-row .no{ width:32px; flex:0 0 auto; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; font-size:14px; }
.check-row .who{ flex:1 1 auto; min-width:0; }
.check-row .who .nm{ font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.check-row .who .id{ color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
/* ผู้เช็คชื่อของแต่ละคน + สรุปผู้เช็คของวัน (ครูช่วยเช็คชื่อ) */
.check-row .who .by{ display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.check-row .who .by:empty{ display:none; }
.check-by-sum{ margin:0 0 10px; padding:8px 12px; border-radius:var(--radius-xs); background:var(--info-50); color:var(--text-2); font-size:13.5px; }
.check-by-sum .material-icons{ font-size:17px; vertical-align:-4px; color:var(--info); }
/* ครูช่วยเช็คชื่อ (หน้าตั้งวันเช็คชื่อชั่วโมงกิจกรรม) */
.helper-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.helper-chip{ display:inline-flex; align-items:center; gap:2px; padding:4px 6px 4px 12px; border-radius:999px; background:var(--info-50); color:var(--info); font-weight:600; font-size:14px; }
.helper-chip button{ border:0; background:transparent; color:inherit; padding:2px; line-height:1; border-radius:50%; cursor:pointer; }
.helper-chip button .material-icons{ font-size:17px; }
.helper-chip button:hover{ background:var(--surface); }
.helper-results{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.helper-opt{ display:flex; align-items:center; gap:8px; text-align:left; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-xs); background:var(--surface); color:var(--text); cursor:pointer; }
.helper-opt:hover{ background:var(--surface-2); border-color:var(--border-strong); }
.helper-opt .material-icons{ font-size:18px; color:var(--info); }
.check-row[data-status="check"]{ box-shadow:inset 4px 0 0 var(--success); }
.check-row[data-status="late"]{ box-shadow:inset 4px 0 0 var(--accent); }
.check-row[data-status="leave"]{ box-shadow:inset 4px 0 0 var(--info); }
.check-row[data-status="unCheck"]{ box-shadow:inset 4px 0 0 var(--danger); }
.check-row.is-saving{ opacity:.6; }
.check-row.is-error{ background:var(--danger-50); }

.seg{ display:inline-flex; flex:0 0 auto; border:1px solid var(--border-strong); border-radius:10px; overflow:hidden; background:var(--surface); }
.seg button{ border:0; background:transparent; color:var(--text-2); font:inherit; font-size:14px; font-weight:500; min-width:58px; min-height:40px; padding:4px 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; border-left:1px solid var(--border); transition:background .12s,color .12s; }
.seg button:first-child{ border-left:0; }
.seg button .material-icons{ font-size:18px; }
.seg button:hover{ background:var(--surface-2); color:var(--text); }
.seg button[aria-pressed="true"].st-check{ background:var(--success); color:#fff; }
.seg button[aria-pressed="true"].st-late{ background:var(--accent); color:#3D2700; }
.seg button[aria-pressed="true"].st-leave{ background:var(--info); color:#fff; }
.seg button[aria-pressed="true"].st-unCheck{ background:var(--danger); color:#fff; }
.seg button:focus-visible{ position:relative; z-index:1; }

/* หน้าสแกน */
.scan-wrap{ max-width:720px; margin:0 auto; }
.scan-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); }
.scan-box .scan-title{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; margin-bottom:12px; }
.scan-box .scan-title .material-icons{ color:var(--brand); }
.scan-input{ font-size:22px !important; min-height:56px !important; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.scan-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#reader{ border-radius:var(--radius-sm); overflow:hidden; margin-top:12px; }
.scan-log{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:6px; }
.scan-log li{ display:flex; align-items:center; gap:8px; font-size:14px; padding:8px 12px; border-radius:8px; background:var(--surface-2); }
.scan-log li .t{ margin-left:auto; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
/* การ์ดผลการสแกน (ตัวใหญ่ อ่านง่าย) */
.scan-result{ display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--radius); border:2px solid; animation:sr-pop .18s ease-out; }
.scan-result .sr-icon{ font-size:56px; line-height:1; flex:0 0 auto; }
.scan-result .sr-body{ min-width:0; }
.scan-result .sr-title{ font-size:28px; font-weight:700; line-height:1.2; }
.scan-result .sr-name{ font-size:20px; font-weight:600; margin-top:2px; overflow-wrap:anywhere; }
.scan-result .sr-detail{ font-size:14px; opacity:.85; margin-top:4px; }
.scan-result.is-ok{ background:var(--success-50); border-color:#BDE3CF; color:#145A3A; }
.scan-result.is-late{ background:var(--warning-50); border-color:#F3DCA4; color:#6B4400; }
.scan-result.is-absent,.scan-result.is-err{ background:var(--danger-50); border-color:#F5C2BC; color:#8F1C13; }
.scan-result.is-dup{ background:var(--info-50); border-color:#C4D7F2; color:#174A88; }
.scan-result.is-err .sr-title{ font-size:20px; }
@keyframes sr-pop{ from{ transform:scale(.97); opacity:.4; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .scan-result{ animation:none; } }
@media (max-width:480px){ .scan-result .sr-icon{ font-size:44px; } .scan-result .sr-title{ font-size:24px; } .scan-result .sr-name{ font-size:17px; } }

/* เลือกกลุ่ม (สวิตช์) */
.switch-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border-strong); background:var(--surface); border-radius:999px; padding:4px 14px 4px 4px; min-height:36px; cursor:pointer; font:inherit; font-size:14px; color:var(--text-2); }
.switch-btn .knob{ width:44px; height:26px; border-radius:999px; background:var(--border-strong); position:relative; transition:background .15s; flex:0 0 auto; }
.switch-btn .knob:after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s; }
.switch-btn[aria-pressed="true"]{ border-color:var(--success); color:#145A3A; background:var(--success-50); }
.switch-btn[aria-pressed="true"] .knob{ background:var(--success); }
.switch-btn[aria-pressed="true"] .knob:after{ left:21px; }
.switch-btn.is-saving{ opacity:.6; pointer-events:none; }

@media (max-width:767px){
  .check-summary{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .check-row{ flex-wrap:wrap; gap:8px 12px; }
  .check-row .seg{ width:100%; }
  .check-row .seg button{ flex:1 1 0; min-width:0; padding:4px 6px; }
  .page-head-actions, .page-head-actions .btn{ width:100%; }
}

/* modal: wide enough for check-in lists */
@media (min-width:768px){
  .modal-dialog.modal-dialog-full-width{ width:auto; max-width:1120px; margin:24px auto; padding:0 24px; }
}

/* ---------- เช็คชื่อกิจกรรมกลาง: แบ่งตามกลุ่ม ---------- */
.grp-acc{ display:grid; gap:10px; }
.grp-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; transition:box-shadow .15s,border-color .15s; }
.grp-panel.is-open{ border-color:var(--brand-100); box-shadow:var(--shadow); }
.grp-head{ width:100%; display:flex; align-items:center; gap:14px; padding:12px 16px; background:transparent; border:0; text-align:left; cursor:pointer; font:inherit; color:var(--text); }
.grp-head:hover{ background:var(--surface-2); }
.grp-panel.is-open .grp-head{ background:var(--brand-50); border-bottom:1px solid var(--brand-100); }
.grp-avatar{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--brand-50); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.grp-panel.is-open .grp-avatar{ background:var(--brand); color:#fff; }
.grp-name{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.grp-name .nm{ font-weight:600; font-size:16px; }
.grp-name .id{ color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grp-stat{ flex:0 0 160px; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.grp-count{ font-size:13.5px; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.grp-count b{ color:var(--success); font-size:16px; }
.grp-bar{ width:100%; height:6px; border-radius:999px; background:var(--border); overflow:hidden; }
.grp-bar span{ display:block; height:100%; background:var(--success); border-radius:999px; transition:width .25s; }
.grp-chev{ color:var(--muted); transition:transform .2s; }
.grp-panel.is-open .grp-chev{ transform:rotate(180deg); }
.grp-body{ padding:14px 16px 16px; }
.grp-body .check-toolbar{ margin-bottom:12px; }
@media (max-width:767px){
  .grp-head{ flex-wrap:wrap; gap:10px; padding:12px; }
  .grp-stat{ flex:1 1 100%; align-items:stretch; order:3; }
  .grp-count{ text-align:right; }
  .grp-body{ padding:12px 10px; }
  .grp-bulk, .grp-bulk .btn{ width:100%; }
}
/* แถบแจ้งเตือนขณะสวมสิทธิ์ */
.impersonate-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 18px; padding:10px 14px; border-radius:var(--radius-sm);
  background:var(--warning-50); border:1px solid #F3DCA4; color:#6B4400; }
.impersonate-bar > .material-icons{ color:var(--accent-700); }
.impersonate-bar span{ flex:1 1 220px; }
/* รูปโปรไฟล์ / ชื่อย่อ */
.avatar-img{ border-radius:50%; object-fit:cover; background:#fff; flex:0 0 auto; }
.avatar-ini{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%;
  background:var(--accent); color:var(--brand-700); font-weight:700; letter-spacing:.02em; line-height:1; }
.sidebar .user-info .avatar-img, .sidebar .user-info .avatar-ini{ border:2px solid var(--brand-100); }
.sidebar .user-info .avatar-ini{ background:var(--brand); color:#fff; }
.user-cell{ display:flex; align-items:center; gap:10px; }
.user-cell .avatar-ini{ background:var(--brand-50); color:var(--brand-700); }
/* ---------- หน้าผลกิจกรรมของนักเรียน ---------- */
body.student-page{ background:var(--bg) !important; padding:0; margin:0; }
.student-page .app-navbar .app-navbar-right .app-user-btn span{ font-size:14px; }
.student-main{ max-width:1080px; margin:calc(var(--nav-h) + 24px) auto 40px; padding:0 16px; }
.std-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
.std-hero .avatar-ini{ background:var(--brand); color:#fff; }
.std-who{ flex:1 1 280px; min-width:0; }
.std-who h1{ font-size:22px; margin:0 0 4px; }
.std-who p{ margin:0; color:var(--muted); font-size:14.5px; }
.std-overall{ display:flex; flex-direction:column; align-items:center; padding:10px 22px; border-radius:var(--radius-sm); border:1px solid; }
.std-overall span{ font-size:13px; }
.std-overall b{ display:flex; align-items:center; gap:6px; font-size:22px; }
.std-overall.is-pass{ background:var(--success-50); border-color:#BDE3CF; color:#145A3A; }
.std-overall.is-fail{ background:var(--danger-50); border-color:#F5C2BC; color:#8F1C13; }
.res-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start; }
.res-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px; border-top:4px solid var(--border-strong); }
.res-card.is-pass{ border-top-color:var(--success); }
.res-card.is-fail{ border-top-color:var(--danger); }
.res-head{ display:flex; align-items:center; gap:12px; }
.res-icon{ width:42px; height:42px; border-radius:12px; background:var(--brand-50); color:var(--brand); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.res-title{ flex:1 1 auto; min-width:0; }
.res-title h2{ font-size:17px; margin:0; }
.res-title span{ font-size:13px; color:var(--muted); }
.res-pct{ display:flex; align-items:center; gap:12px; margin:14px 0 6px; }
.res-pct b{ font-size:28px; font-variant-numeric:tabular-nums; min-width:96px; }
.res-pct .grp-bar{ height:8px; }
.res-card.is-fail .res-pct .grp-bar span{ background:var(--danger); }
.res-sum{ margin:0 0 8px; color:var(--text-2); font-size:14px; }
.res-empty{ margin:0; color:var(--muted); font-size:14px; }
.res-list{ list-style:none; margin:8px 0 0; padding:0; border-top:1px solid var(--border); }
.res-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.res-list .nm{ display:block; font-weight:500; }
.res-list .dt{ display:block; font-size:12.5px; color:var(--muted); }
.res-note{ margin:18px 0 0; color:var(--muted); font-size:13px; text-align:center; }
@media (max-width:767px){ .std-overall{ width:100%; } .student-main{ margin-top:calc(var(--nav-h) + 14px); } }
/* หน้านักเรียน: สรุปสิ่งที่ไม่ได้เข้าร่วม + รายละเอียดพับเก็บได้ */
.miss-box{ margin:10px 0 8px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--danger-50); border:1px solid #F5C2BC; color:#8F1C13; }
.miss-box.is-clear{ background:var(--success-50); border-color:#BDE3CF; color:#145A3A; }
.miss-title{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:14.5px; }
.miss-title .material-icons{ font-size:20px; }
.miss-chips{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.miss-chips li{ background:#fff; border:1px solid #F5C2BC; border-radius:999px; padding:3px 10px; font-size:13px; color:#8F1C13; }
.miss-chips small{ color:var(--muted); }
.res-more{ margin-top:6px; }
.res-more > summary{ cursor:pointer; color:var(--brand); font-weight:500; font-size:14px; padding:6px 0; list-style:none; display:flex; align-items:center; gap:4px; }
.res-more > summary::-webkit-details-marker{ display:none; }
.res-more > summary:before{ content:'expand_more'; font-family:'Material Icons'; font-size:20px; transition:transform .15s; }
.res-more[open] > summary:before{ transform:rotate(180deg); }
.res-more .res-list{ max-height:360px; overflow-y:auto; }
/* =====================================================================
   หน้านักเรียน (ออกแบบใหม่): หัวเพจ + การ์ดเท่ากัน + วงแหวน % + แท่งสัดส่วน + ไทม์ไลน์
   ===================================================================== */
.student-page{ --st-check:#1D7F52; --st-late:#E0A21F; --st-leave:#1F5FAE; --st-absent:#B42318; --st-pending:#7C8796; --st-holiday:#C9D2DC; --st-future:#E1E6EC; }
.student-main{ max-width:1200px; }
.sx-eyebrow{ display:block; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.8; }

/* หัวเพจ */
.sx-hero{ position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:18px 24px; align-items:center;
  background:linear-gradient(135deg,var(--brand) 0%,#0B4A58 60%,#083A45 100%); color:#fff; border-radius:20px; padding:24px 28px; margin-bottom:22px;
  box-shadow:0 12px 30px rgba(14,90,107,.25); }
.sx-hero:before{ content:''; position:absolute; width:420px; height:420px; right:-120px; top:-220px; border-radius:50%; background:radial-gradient(circle,rgba(242,180,65,.28),transparent 65%); }
.sx-hero:after{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:18px 18px; pointer-events:none; }
.sx-hero > *{ position:relative; z-index:1; }
.sx-who{ display:flex; align-items:center; gap:16px; min-width:0; }
.sx-who .avatar-ini{ background:var(--accent); color:var(--brand-700); box-shadow:0 0 0 4px rgba(255,255,255,.15); }
.sx-who h1{ color:#fff; font-size:24px; margin:2px 0 4px; }
.sx-who p{ margin:0; opacity:.88; font-size:14.5px; }
.sx-overall{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:16px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); }
.sx-overall b{ display:block; font-size:28px; line-height:1.15; }
.sx-overall-sub{ font-size:13px; opacity:.85; }
.sx-overall-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.sx-overall-icon .material-icons{ font-size:30px; }
.sx-hero.is-pass .sx-overall-icon{ background:#2FB37A; color:#fff; }
.sx-hero.is-fail .sx-overall-icon{ background:#E5533F; color:#fff; }
.sx-steps{ grid-column:1 / -1; list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.sx-steps li{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:14px; }
.sx-steps li .material-icons{ font-size:18px; }
.sx-steps li.is-pass .material-icons{ color:#7BE0B0; }
.sx-steps li.is-fail .material-icons{ color:#FFA394; }
.sx-steps b{ font-variant-numeric:tabular-nums; }

/* การ์ด: กว้างเท่ากัน สูงเท่ากัน */
.sx-grid{ display:grid; gap:20px; align-items:stretch; grid-template-columns:repeat(3,minmax(0,1fr)); }
.sx-grid.sx-cols-1{ grid-template-columns:minmax(0,1fr); }
.sx-grid.sx-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sx-card{ display:flex; flex-direction:column; gap:16px; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.sx-card:before{ content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--st-check); }
.sx-card.is-fail:before{ background:var(--st-absent); }
.sx-card-head{ display:flex; align-items:center; gap:12px; }
.sx-card-head h2{ flex:1 1 auto; font-size:17px; margin:0; }

/* วงแหวน */
.sx-gauge{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; }
.ring{ position:relative; width:var(--ring-size,148px); height:var(--ring-size,148px); }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--surface-2); stroke-width:12; }
.ring-val{ fill:none; stroke-width:12; stroke-linecap:round; stroke:var(--st-check); animation:ringIn 1.1s cubic-bezier(.2,.8,.2,1) both; }
.ring.is-fail .ring-val{ stroke:var(--st-absent); }
.ring-mark{ stroke:var(--text); stroke-width:3; stroke-linecap:round; }
@keyframes ringIn{ from{ stroke-dashoffset:var(--ring-c); } }
.ring-text{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.ring-text b{ font-size:30px; line-height:1; font-variant-numeric:tabular-nums; }
.ring-text b small{ font-size:15px; margin-left:1px; color:var(--muted); }
.ring-text span{ font-size:12px; color:var(--muted); margin-top:4px; }
.sx-kpi{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.sx-kpi > div{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:8px 10px; }
.sx-kpi dt{ font-weight:500; font-size:12.5px; color:var(--muted); }
.sx-kpi dd{ margin:0; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.sx-kpi .kpi-bad dd{ color:var(--st-absent); }

/* แท่งสัดส่วน + คำอธิบาย */
.sx-block{ display:flex; flex-direction:column; gap:8px; }
.sx-label{ display:flex; justify-content:space-between; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-2); }
.sx-label span{ font-weight:400; color:var(--muted); font-size:12.5px; }
.stack{ display:flex; gap:2px; height:14px; border-radius:7px; overflow:hidden; background:var(--surface-2); }
.stack .seg{ min-width:4px; animation:segIn .9s ease both; transform-origin:left; cursor:default; }
@keyframes segIn{ from{ transform:scaleX(0); } }
.legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--text-2); }
.legend li{ display:inline-flex; align-items:center; gap:6px; }
.legend b{ color:var(--text); font-variant-numeric:tabular-nums; }
.legend .dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }

/* ไทม์ไลน์ */
.strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(16px,1fr)); gap:4px; }
.strip .cell{ aspect-ratio:1; border-radius:4px; cursor:pointer; outline:none; transition:transform .12s; }
.strip .cell:hover, .strip .cell:focus-visible{ transform:scale(1.25); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--text); }

/* สีสถานะ (ใช้ร่วมกับไอคอน+ข้อความเสมอ) */
.student-page .st-check{ background:var(--st-check); }
.student-page .st-late{ background:var(--st-late); }
.student-page .st-leave{ background:var(--st-leave); }
.student-page .st-absent{ background:var(--st-absent) repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 2px,transparent 2px 5px); }
.student-page .st-pending{ background:var(--st-pending); }
.student-page .st-holiday{ background:var(--st-holiday) repeating-linear-gradient(135deg,rgba(255,255,255,.55) 0 2px,transparent 2px 5px); }
.student-page .st-future{ background:var(--st-future); }

/* ป้ายสถานะในรายการ */
.student-page .st-pill{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:500; white-space:nowrap; background:none !important; border:1px solid var(--border); color:var(--text-2); }
.student-page .st-pill .material-icons{ font-size:15px; }
.student-page .st-pill.st-check{ color:#145A3A; border-color:#BDE3CF; background:var(--success-50) !important; }
.student-page .st-pill.st-late{ color:#6B4400; border-color:#F3DCA4; background:var(--warning-50) !important; }
.student-page .st-pill.st-leave{ color:#174A88; border-color:#C4D7F2; background:var(--info-50) !important; }
.student-page .st-pill.st-absent{ color:#8F1C13; border-color:#F5C2BC; background:var(--danger-50) !important; }

.sx-card .miss-box{ margin:0; }
.sx-card .res-more{ margin-top:auto; border-top:1px solid var(--border); padding-top:6px; }
.sx-empty{ display:flex; align-items:center; gap:8px; padding:14px; background:var(--surface-2); border-radius:12px; margin-top:auto; }
.res-note{ display:flex; align-items:center; justify-content:center; gap:6px; }
.res-note .material-icons{ font-size:18px; }

/* tooltip */
.sx-tip{ position:absolute; z-index:2000; pointer-events:none; background:#1B2430; color:#fff; font-size:13px; padding:6px 10px; border-radius:8px; box-shadow:var(--shadow-lg); white-space:nowrap; }

@media (max-width:1023px){ .sx-grid, .sx-grid.sx-cols-2{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:767px){
  .sx-hero{ grid-template-columns:1fr; padding:20px; border-radius:16px; }
  .sx-who h1{ font-size:20px; }
  .sx-gauge{ grid-template-columns:1fr; justify-items:center; }
  .sx-kpi{ width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .sx-kpi dd{ font-size:18px; }
}
.sx-empty{ flex:1 1 auto; flex-direction:column; justify-content:center; text-align:center; min-height:120px; color:var(--muted); }
.sx-empty .material-icons{ font-size:28px; color:var(--border-strong); }

.miss-chips li.more{ background:transparent; border-style:dashed; color:var(--muted); }

/* ---------- สถานะ "ลาป่วย" (sick) + สรุป 6 ช่อง ---------- */
:root{ --sick:#6941C6; --sick-50:#F1ECFC; }
.check-summary{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.check-summary .s-sick .sum-label:before{ background:var(--sick); }
.check-row[data-status="sick"]{ box-shadow:inset 4px 0 0 var(--sick); }
.seg button[aria-pressed="true"].st-sick{ background:var(--sick); color:#fff; }
.seg button{ min-width:54px; padding:4px 10px; }
@media (max-width:767px){ .check-summary{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.student-page{ --st-sick:#6941C6; }
.student-page .st-sick{ background:var(--st-sick); }
.student-page .st-pill.st-sick{ color:#4A2D91; border-color:#D9CCF5; background:var(--sick-50) !important; }
.sx-kpi{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.sx-kpi dt{ white-space:nowrap; }
.sx-conv{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; margin:-6px 0 0; }
.sx-conv .material-icons{ font-size:16px; color:var(--accent-700); }
@media (max-width:767px){ .sx-kpi{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* =====================================================================
   หน้านักเรียน (จัดใหม่ รอบ 3): การ์ดสรุป 3 ใบ + แผงรายละเอียดเต็มความกว้าง
   ===================================================================== */
.sx-section-title{ font-size:16px; font-weight:600; color:var(--text-2); margin:0 0 12px; }
/* หน้านักเรียน: ไม่ผ่านกิจกรรม → ดาวน์โหลดใบคำร้องซ่อมกิจกรรม (อวท.18) */
.sx-repair{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--danger-50); border:1px solid #F5C2BC; border-radius:14px; padding:14px 18px; margin:0 0 20px; color:#8F1C13; }
.sx-repair > .material-icons{ font-size:28px; color:var(--danger); }
.sx-repair-text{ flex:1 1 240px; min-width:0; }
.sx-repair-text b{ display:block; font-size:15px; }
.sx-repair-text span{ font-size:13px; color:#A33B2E; }
.sx-repair .btn{ white-space:nowrap; }
.sx-sum-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:20px; }
.sx-sum-grid.sx-cols-1{ grid-template-columns:minmax(0,1fr); }
.sx-sum-grid.sx-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sx-sum{ position:relative; display:flex; align-items:center; gap:16px; width:100%; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px 18px; box-shadow:var(--shadow-sm);
  transition:box-shadow .15s, border-color .15s, transform .15s; }
.sx-sum:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.sx-sum:before{ content:''; position:absolute; left:18px; right:18px; top:0; height:3px; border-radius:0 0 3px 3px; background:var(--st-check); }
.sx-sum.is-fail:before{ background:var(--st-absent); }
.sx-sum.is-active{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-100), var(--shadow); }
.sx-sum.is-active:after{ content:''; position:absolute; left:50%; bottom:-11px; width:18px; height:18px; margin-left:-9px; background:var(--surface);
  border-right:1px solid var(--brand); border-bottom:1px solid var(--brand); transform:rotate(45deg); }
.sx-sum .ring{ flex:0 0 auto; }
.sx-sum .ring-text b{ font-size:22px; }
.sx-sum .ring-text b small{ font-size:12px; }
.sx-sum .ring-text span{ font-size:10.5px; }
.sx-sum-text{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.sx-sum-title{ display:flex; align-items:center; gap:6px; font-weight:600; font-size:16px; }
.sx-sum-title .material-icons{ font-size:20px; color:var(--brand); }
.sx-sum-sub{ font-size:13px; color:var(--muted); }
.sx-sum-more{ display:inline-flex; align-items:center; gap:2px; font-size:13px; color:var(--brand); font-weight:500; }
.sx-sum-more .material-icons{ font-size:16px; }
.sx-sum.is-active .sx-sum-more{ visibility:hidden; }

/* แผงรายละเอียด */
.sx-panel{ display:flex; flex-direction:column; gap:20px; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow-sm); }
.sx-panel[hidden]{ display:none; }
.sx-panel-head{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.sx-panel-head > div{ flex:1 1 auto; min-width:0; }
.sx-panel-head h2{ font-size:19px; margin:0; }
.sx-panel-head span{ font-size:13.5px; color:var(--muted); }
.sx-panel-pct{ font-size:30px; font-variant-numeric:tabular-nums; color:var(--st-check); }
.sx-panel.is-fail .sx-panel-pct{ color:var(--st-absent); }

.sx-kpi6{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:0; }
.sx-kpi6 > div{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
.sx-kpi6 dt{ display:flex; align-items:center; gap:6px; font-weight:500; font-size:13px; color:var(--text-2); white-space:nowrap; }
.sx-kpi6 dt .dot{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.sx-kpi6 dt .material-icons{ font-size:15px; color:var(--accent-700); }
.sx-kpi6 dd{ margin:4px 0 0; font-size:26px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.sx-kpi6 .k-absent dd, .sx-kpi6 .k-conv dd{ color:var(--st-absent); }

.sx-panel .strip{ grid-template-columns:repeat(auto-fill,minmax(18px,1fr)); gap:5px; }
.sx-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.sx-two .miss-box{ margin:0; }
.sx-listbox{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; }
.sx-listbox .res-list{ max-height:340px; overflow-y:auto; margin-top:8px; border-top:1px solid var(--border); }
.sx-listbox .res-list li:last-child{ border-bottom:0; }

@media (max-width:1023px){
  .sx-sum-grid, .sx-sum-grid.sx-cols-2{ grid-template-columns:minmax(0,1fr); }
  .sx-sum.is-active:after{ display:none; }
  .sx-kpi6{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sx-two{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px){
  .sx-panel{ padding:16px; }
  .sx-panel-pct{ font-size:24px; }
  .sx-kpi6 dd{ font-size:22px; }
}
/* มือถือ: การ์ดสรุปเป็นแถวเดียว 3 ช่องแบบกะทัดรัด */
@media (max-width:767px){
  .sx-sum-grid, .sx-sum-grid.sx-cols-2{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .sx-sum-grid.sx-cols-1{ grid-template-columns:minmax(0,1fr); }
  .sx-sum{ flex-direction:column; align-items:center; text-align:center; gap:6px; padding:12px 6px 10px; border-radius:14px; }
  .sx-sum:before{ left:10px; right:10px; }
  .sx-sum .ring{ --ring-size:76px !important; }
  .sx-sum .ring-text b{ font-size:17px; }
  .sx-sum .ring-text span{ display:none; }
  .sx-sum-text{ align-items:center; gap:4px; }
  .sx-sum-title{ font-size:12.5px; line-height:1.3; justify-content:center; }
  .sx-sum-title .material-icons{ display:none; }
  .sx-sum-sub, .sx-sum-more{ display:none; }
  .sx-sum .status-badge{ font-size:11.5px; padding:1px 8px; }
  .sx-sum.is-active:after{ display:block; bottom:-10px; width:14px; height:14px; margin-left:-7px; }
}
@media (max-width:1023px) and (min-width:768px){ .sx-sum.is-active:after{ display:none; } }
.sx-sum-title .t-short{ display:none; }
@media (max-width:767px){ .sx-sum-title .t-full{ display:none; } .sx-sum-title .t-short{ display:inline; white-space:nowrap; } }

/* หน้าภาพรวม: สถานะระบบ + นักเรียนเสี่ยง */
.health-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.health-list li{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); }
.health-list li > span{ flex:1 1 auto; }
.health-list li > .material-icons{ font-size:22px; }
.health-list li.tone-danger{ background:var(--danger-50); border-color:#F5C2BC; color:#8F1C13; }
.health-list li.tone-warning{ background:var(--warning-50); border-color:#F3DCA4; color:#6B4400; }
.health-list li.tone-info{ background:var(--info-50); border-color:#C4D7F2; color:#174A88; }
.risk-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:12px; }
.risk-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
@media (max-width:767px){ .health-list li{ flex-wrap:wrap; } .risk-tags{ justify-content:flex-start; } }
.sx-pw{ margin-top:20px; }
.sx-pw > summary::-webkit-details-marker{ display:none; }
.sx-pw:not([open]) > summary{ padding-bottom:0; border-bottom:0; }
.sx-pw-form{ max-width:420px; }
.sx-pw-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.sx-pw-banner > span{ flex:1 1 220px; }

.sx-sem-pick{ display:inline-flex !important; align-items:center; gap:6px; font-weight:400; margin:0; color:#fff; }
.sx-sem-pick select{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:8px; padding:2px 8px; font:inherit; font-size:12.5px; text-transform:none; letter-spacing:0; }
.sx-sem-pick select option{ color:#1B2430; }

/* ---------- ประวัติการเช็คชื่อ (ดูแลระบบ) ---------- */
.lg-crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:14px; margin:0 0 14px; }
.lg-crumb a{ color:var(--brand); }
.lg-crumb .sep{ color:var(--muted); }
.lg-crumb .cur{ font-weight:600; color:var(--text); }
.lg-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 16px; }
.lg-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 14px; }
.lg-kpi .k{ font-size:13px; color:var(--muted); }
.lg-kpi .v{ font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
.lg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.lg-card{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.lg-card:hover,.lg-card:focus-visible{ border-color:var(--brand); box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; }
.lg-card .t{ font-weight:600; font-size:15.5px; margin:0 0 2px; }
.lg-card .s{ font-size:13px; color:var(--muted); margin:0 0 10px; }
.lg-card .n{ font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.lg-bar{ display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--border); margin:8px 0 6px; }
.lg-bar span{ display:block; height:100%; }
.lg-bar .b-check{ background:var(--success); } .lg-bar .b-late{ background:var(--accent); }
.lg-bar .b-leave{ background:var(--info); } .lg-bar .b-sick{ background:var(--sick, #7E57C2); } .lg-bar .b-unCheck{ background:var(--danger); }
.lg-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--muted); }
.lg-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:0; }
/* ---------- ปุ่มย้อนกลับ (ทุกเมนู) ---------- */
.page-back{ margin:0 0 10px; }
.page-back-btn{ padding:4px 12px 4px 8px; min-height:34px; font-size:14px; border-radius:999px; }
.page-back-btn .material-icons{ font-size:18px; }
@media print{ .page-back{ display:none; } }
/* ---------- บทสรุป: การ์ดสร้างรายงาน + ตารางรายกิจกรรม ---------- */
.rpt-make .body{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:24px; align-items:center; }
.rpt-make-info{ display:flex; gap:16px; align-items:flex-start; }
.rpt-make-icon{ flex:0 0 auto; width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--danger-50); color:var(--danger); }
.rpt-make-icon .material-icons{ font-size:30px; }
.rpt-make h2{ font-size:18px; font-weight:600; margin:2px 0 4px; }
.rpt-make p{ margin:0 0 10px; color:var(--muted); }
.rpt-make-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14.5px; color:var(--text-2); }
.rpt-make-list li{ display:flex; gap:8px; align-items:flex-start; }
.rpt-make-list .material-icons{ font-size:18px; color:var(--success); margin-top:2px; }
.rpt-make-form{ display:flex; flex-direction:column; gap:10px; padding:18px; background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--radius-sm); }
.rpt-make-form label{ margin:0; font-weight:500; }
.rpt-make-form .btn{ justify-content:center; width:100%; }
.rpt-make-form .help-block{ margin:0; text-align:center; font-size:13px; }
@media (max-width:767px){ .rpt-make .body{ grid-template-columns:1fr; } }
.rpt-table td, .rpt-table th{ vertical-align:middle !important; }
.rpt-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rpt-pct{ display:flex; align-items:center; gap:10px; }
.rpt-pct .lg-bar{ flex:1; margin:0; }
.rpt-pct b{ min-width:52px; text-align:right; font-variant-numeric:tabular-nums; }
/* รูปนักเรียน (โอนจาก RMS) ในรายการเช็คชื่อ และการ์ดผลสแกน */
.check-row .std-photo{ border:1px solid var(--border); }
.check-row .avatar-ini.std-photo{ background:var(--brand-50); color:var(--brand-700); }
.scan-result .sr-photo{ width:96px; height:96px; border-radius:12px; object-fit:cover; flex:0 0 auto; background:#fff; border:2px solid currentColor; }
@media (max-width:480px){ .scan-result .sr-photo{ width:72px; height:72px; } }

/* ล้างข้อมูลเพื่อเริ่มใหม่ (หน้าสำรองและกู้คืนข้อมูล) — การ์ดคลิกเลือกได้ทั้งใบ
   checkbox จริงซ่อนไว้ (ธีม materialize ย้าย checkbox ออกนอกจออยู่แล้ว) แล้ววาดช่องติ๊กเองด้วย .rs-check */
.reset-card{ border:1px solid var(--danger-50); }
.rs-sec{ position:relative; border:0; padding:0; margin:0 0 22px; min-width:0; }
.rs-sec-head{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; width:100%; border:0; margin:0 0 10px; padding:0 0 8px; border-bottom:1px solid var(--border); font-size:15px; }
.rs-sec-title{ font-weight:700; }
.rs-sec.is-local .rs-sec-title{ color:var(--danger); }
.rs-sec.is-rms .rs-sec-title{ color:var(--info); }
.rs-sec-sub{ color:var(--muted); font-size:13px; }
.rs-sec .reset-all{ margin-left:auto; padding:2px 6px; font-weight:600; }
.rs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.rs-card{ position:relative; display:flex; flex-direction:column; gap:4px; margin:0; padding:14px 46px 12px 14px; font-weight:400;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s; min-height:150px; }
.rs-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.rs-card .rs-input{ position:absolute !important; left:auto !important; top:14px; right:14px; width:1px; height:1px; opacity:0 !important; pointer-events:none; margin:0; }
.rs-check{ position:absolute; top:12px; right:12px; width:24px; height:24px; border:2px solid var(--border-strong); border-radius:6px; background:var(--surface);
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; }
.rs-check .material-icons{ font-size:18px; color:#fff; opacity:0; transform:scale(.6); transition:opacity .12s, transform .12s; }
.rs-icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--text-2); margin-bottom:6px; }
.rs-icon .material-icons{ font-size:22px; }
.rs-title{ font-weight:700; line-height:1.35; color:var(--text); }
.rs-desc{ font-size:13px; color:var(--muted); line-height:1.5; flex:1 1 auto; }
.rs-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; font-size:13px; color:var(--muted); }
.rs-count b{ color:var(--text); font-size:15px; font-variant-numeric:tabular-nums; }
.rs-tables{ color:var(--info); font-weight:600; cursor:help; }
/* ติ๊กแล้ว */
.rs-input:checked ~ .rs-check{ background:var(--danger); border-color:var(--danger); }
.rs-input:checked ~ .rs-check .material-icons{ opacity:1; transform:none; }
.rs-card.is-on{ border-color:var(--danger); background:var(--danger-50); }
.rs-card.is-on .rs-icon{ background:var(--surface); color:var(--danger); }
.rs-sec.is-rms .rs-input:checked ~ .rs-check{ background:var(--info); border-color:var(--info); }
.rs-sec.is-rms .rs-card.is-on{ border-color:var(--info); background:var(--info-50); }
.rs-sec.is-rms .rs-card.is-on .rs-icon{ color:var(--info); }
.rs-input:focus-visible ~ .rs-check{ box-shadow:var(--focus); }
.reset-confirm{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:4px; padding-top:14px; border-top:1px solid var(--border); }
.reset-confirm label{ margin:0; font-weight:400; }
.reset-confirm .form-control{ width:200px; max-width:100%; }
@media (max-width:480px){ .rs-grid{ grid-template-columns:1fr; } .rs-card{ min-height:0; } }
@media (prefers-reduced-motion:reduce){ .rs-card,.rs-check,.rs-check .material-icons{ transition:none; } }
/* เลือกวันในสัปดาห์ด้วยช่องติ๊ก (ตั้งค่ากลุ่มผู้เรียน › วันที่เข้าแถว) */
.dow-pick{ display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 2px; }
.dow-chip{ position:relative; display:inline-flex; align-items:center; gap:8px; margin:0; padding:8px 14px 8px 10px; min-height:44px; font-weight:600;
  border:1.5px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--text-2); cursor:pointer; user-select:none;
  transition:background .15s, border-color .15s, color .15s; }
.dow-chip:hover{ border-color:var(--brand); }
.dow-chip.is-weekend{ color:var(--muted); }
.dow-chip .dow-input{ position:absolute !important; left:auto !important; top:50%; width:1px; height:1px; opacity:0 !important; pointer-events:none; margin:0; }
.dow-box{ width:22px; height:22px; border:2px solid var(--border-strong); border-radius:6px; background:var(--surface); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.dow-box .material-icons{ font-size:17px; color:#fff; opacity:0; }
.dow-chip:has(.dow-input:checked){ background:var(--brand-50); border-color:var(--brand); color:var(--brand-700); }
.dow-input:checked + .dow-box{ background:var(--brand); border-color:var(--brand); }
.dow-input:checked + .dow-box .material-icons{ opacity:1; }
.dow-input:focus-visible + .dow-box{ box-shadow:var(--focus); }
@media (prefers-reduced-motion:reduce){ .dow-chip{ transition:none; } }
.cell-sub.mc-days{ display:flex; align-items:center; gap:4px; }
.cell-sub.mc-days .material-icons{ font-size:15px; }

/* ปฏิทินเลือกวันเช็คชื่อ (หน้าต่างเช็คชื่อ หน้าเสาธง/คาบกิจกรรม) */
.ck-cal{ margin:0 0 16px; }
/* attribute hidden ต้องซ่อนเสมอ แม้คลาสจะตั้ง display ไว้ (เช่น แถบ "วันที่ยังเช็คชื่อไม่ครบ" ที่เคยโชว์ว่างเปล่า) */
[hidden]{ display:none !important; }
.ck-pending{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 14px; margin-bottom:12px; border:1px solid #F5C2BC; border-left:4px solid var(--danger); border-radius:var(--radius-sm); background:var(--danger-50); }
.ck-pending-n{ min-width:44px; height:36px; padding:0 8px; border-radius:8px; background:var(--danger); color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.ck-pending-text{ flex:1 1 200px; display:flex; flex-direction:column; line-height:1.4; }
.ck-pending-text span{ font-size:13px; color:var(--text-2); }
.ck-pending-list{ position:relative; }
.ck-pending-list summary{ cursor:pointer; list-style:none; padding:6px 12px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); font-weight:600; color:var(--brand); }
.ck-pending-list summary::-webkit-details-marker{ display:none; }
.ck-pending-list summary::after{ content:" ▾"; }
.ck-pending-items{ position:absolute; right:0; top:calc(100% + 6px); z-index:20; width:min(360px,80vw); max-height:300px; overflow:auto; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:2px; }
.ck-pi{ text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:6px; font-size:13.5px; color:var(--text); }
button.ck-pi:hover, button.ck-pi:focus-visible{ background:var(--brand-50); }
.ck-pi.is-dis{ color:var(--muted); }
.ck-nav{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ck-month{ text-align:center; font-size:18px; font-weight:700; margin:8px 0 10px; }
.ck-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.ck-h{ text-align:center; font-size:13px; font-weight:600; color:var(--muted); padding:4px 0; background:var(--surface-2); border-radius:6px; }
.ck-c{ position:relative; min-height:64px; padding:6px 4px; display:flex; flex-direction:column; align-items:center; gap:3px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font:inherit; color:var(--text); text-align:center; min-width:0; }
.ck-c.is-blank{ visibility:hidden; }
.ck-c.is-out{ background:transparent; color:var(--border-strong); border-style:dashed; }
.ck-num{ font-weight:700; font-variant-numeric:tabular-nums; line-height:1.5; min-width:26px; border-radius:999px; }
.ck-bar{ width:80%; height:5px; border-radius:3px; background:var(--border); }
.ck-sub{ font-size:12px; font-weight:600; line-height:1.3; }
.ck-why, .ck-tag{ font-size:11px; color:var(--muted); line-height:1.25; overflow-wrap:anywhere; }
.ck-end{ font-size:11.5px; font-weight:600; color:var(--info); line-height:1.3; }
button.ck-c{ cursor:pointer; transition:border-color .12s, box-shadow .12s; }
button.ck-c:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm); }
.ck-c.s-full .ck-bar{ background:var(--success); } .ck-c.s-full .ck-sub{ color:var(--success); }
.ck-c.s-part .ck-bar{ background:var(--accent); } .ck-c.s-part .ck-sub{ color:var(--warning); }
.ck-c.s-none .ck-bar{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--danger); } .ck-c.s-none .ck-sub{ color:var(--danger); }
.ck-c.s-up .ck-bar{ background:var(--brand-100); } .ck-c.s-up .ck-sub{ color:var(--muted); font-weight:400; }
.ck-c.s-hol{ background:var(--info-50); } .ck-c.s-hol .ck-tag{ color:var(--info); font-weight:600; } .ck-c.s-hol .ck-sub{ color:var(--info); font-weight:400; font-size:11px; }
.ck-c.is-dis{ opacity:.6; }
.ck-c.is-today .ck-num{ background:var(--brand); color:#fff; }
.ck-c.is-sel{ border:2px solid var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px var(--brand-100); }
.ck-legend{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 16px; margin:10px 0 0; padding:0; font-size:12.5px; color:var(--text-2); }
.ck-legend li{ display:inline-flex; align-items:center; gap:6px; }
.ck-key{ width:22px; height:5px; border-radius:3px; display:inline-block; }
.ck-key.is-full{ background:var(--success); } .ck-key.is-part{ background:var(--accent); }
.ck-key.is-none{ box-shadow:inset 0 0 0 1.5px var(--danger); } .ck-key.is-up{ background:var(--brand-100); }
.ck-note{ font-size:12.5px; color:var(--muted); margin:6px 0 0; }
@media (max-width:600px){
  .ck-nav .btn span{ display:none; } .ck-nav .ck-today span{ display:inline; }
  .ck-grid{ gap:3px; } .ck-c{ min-height:48px; padding:4px 2px; } .ck-h{ font-size:11px; }
  .ck-sub{ font-size:10.5px; } .ck-why, .ck-tag, .ck-end{ display:none; }
}
/* =====================================================================
   ธีม 2026-10 รอบ 4 — โครงใหม่: เมนูข้างเต็มความสูง + แถบบนสีขาวโปร่ง
   + ปุ่ม "เช็คชื่อ" ลัด + แบนเนอร์ทักทายหน้าภาพรวม + ปุ่ม/การ์ด/ตารางที่สดใสขึ้น
   (ทับกฎด้านบน — สีทั้งหมดอ้างอิงตัวแปรใน :root)
   ===================================================================== */
::selection{ background:var(--brand-100); color:var(--text); }

/* ---------- แถบด้านบน: ขาวโปร่ง เบลอพื้นหลัง ---------- */
.navbar.app-navbar{ background:rgba(255,255,255,.86) !important; -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border) !important; box-shadow:none !important; transition:left .25s; }
body.theme-stdac:not(.ls-closed) .navbar.app-navbar{ left:var(--side-w); width:auto; }
.app-navbar .app-navbar-inner{ padding:0 24px; gap:12px; }
.app-navbar .bars{ color:var(--text-2); }
.app-navbar .bars:hover{ background:var(--surface-2); color:var(--text); }
.app-navbar .app-brand{ color:var(--text) !important; }
.app-navbar .app-brand-title{ font-weight:700; }
.app-navbar .app-brand-sub{ color:var(--muted); opacity:1; }
.app-navbar .app-brand-mark.is-logo{ background:var(--brand-50); }
body.theme-stdac:not(.ls-closed) .app-navbar .app-brand{ display:none; }
.app-nav-context{ display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; }
.ls-closed .app-nav-context{ display:none; }
.ctx-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:13.5px; font-weight:500;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); white-space:nowrap; }
.ctx-chip .material-icons{ font-size:17px; color:var(--brand); }
.ctx-chip.is-soft{ background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-700); }
.app-user-btn{ background:var(--surface) !important; border:1px solid var(--border) !important; color:var(--text) !important; }
.app-user-btn:hover{ background:var(--surface-2) !important; border-color:var(--border-strong) !important; }
.app-user-btn .material-icons{ color:var(--muted); }
.app-check-btn{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  background:var(--grad); color:#fff; font:inherit; font-weight:600; font-size:15px; box-shadow:var(--shadow-brand); transition:transform .15s, box-shadow .15s; }
.app-check-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(76,110,245,.4); }
.app-check-btn .material-icons{ font-size:20px; }
.app-check-btn .caret-i{ font-size:18px; opacity:.85; margin-left:-2px; }
.app-navbar-right{ gap:10px; }

/* ---------- กลับสู่ระบบ RMS (stdac_rms_link) ---------- */
.rms-mark{ width:26px; height:26px; border-radius:7px; background:#fff; object-fit:contain; flex:0 0 auto; }
.app-rms-btn{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px 0 9px; border-radius:999px; text-decoration:none !important;
  background:var(--surface); border:1px solid var(--border); color:#5B1010 !important; font-weight:700; font-size:14.5px; letter-spacing:.3px; transition:border-color .15s, background .15s; }
.app-rms-btn:hover, .app-rms-btn:focus{ background:#FDF3F3; border-color:#E8C4C4; }
.side-rms{ flex:0 0 auto; display:flex; align-items:center; gap:10px; margin:8px 12px 0; padding:9px 12px; border-radius:14px; text-decoration:none !important;
  border:1px solid var(--border); background:var(--surface); color:#5B1010 !important; font-weight:600; font-size:14.5px; }
.side-rms:hover{ background:#FDF3F3; border-color:#E8C4C4; }
.side-rms .rms-mark{ width:30px; height:30px; }
.auth-rms{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; padding:10px 14px; border-radius:12px; text-decoration:none !important;
  border:1px dashed rgba(127,127,127,.45); color:inherit !important; font-weight:600; font-size:15px; opacity:.9; }
.auth-rms:hover{ background:rgba(127,127,127,.12); border-style:solid; opacity:1; }
@media (max-width:767px){ .app-rms-btn{ min-height:40px; } }
@media (max-width:600px){ .app-rms-btn span{ display:none; } .app-rms-btn{ width:44px; padding:0; justify-content:center; } }
@media (max-width:420px){ body:not(.student-page) .app-rms-btn{ display:none; } } /* จอเล็กมาก: ใช้ลิงก์ในเมนูข้างแทน */
@media print{ .app-rms-btn, .side-rms, .auth-rms{ display:none !important; } }

/* ---------- เมนูด้านข้าง: เต็มความสูง มีโลโก้ด้านบน ผู้ใช้ด้านล่าง ---------- */
.sidebar{ top:0 !important; height:100vh !important; z-index:1032 !important; border-right:1px solid var(--border) !important; }
.side-brand{ flex:0 0 auto; display:flex; align-items:center; gap:12px; height:var(--nav-h); padding:0 18px; color:var(--text) !important; text-decoration:none !important;
  border-bottom:1px solid var(--border); }
.side-brand .app-brand-mark.is-logo{ width:40px; height:40px; background:var(--brand-50); border-radius:12px; box-shadow:none; }
.side-brand .app-brand-text{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.side-brand .app-brand-title{ font-size:14.5px; font-weight:700; color:var(--text); line-height:1.15; margin-bottom:2px; }
.side-brand .app-brand-sub{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .menu{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:10px 12px 12px !important; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
/* ปิดแถบเลื่อนของ slimScroll (คำนวณความสูงจากโครงเดิม) ใช้การเลื่อนปกติของเบราว์เซอร์แทน */
.sidebar .slimScrollDiv, .sidebar .menu .list{ height:auto !important; overflow:visible !important; }
.sidebar .slimScrollBar, .sidebar .slimScrollRail{ display:none !important; }
.sidebar .menu .list .header{ font-size:12px !important; letter-spacing:.06em; padding:8px 12px 6px !important; color:#8A94A8 !important; }
.sidebar .menu .list a{ border-radius:12px; }
.sidebar .menu .list a:hover{ background:var(--brand-50) !important; color:var(--brand-700) !important; }
.sidebar .menu .list a:hover i.material-icons{ color:var(--brand) !important; }
/* หัวข้อที่ไม่มีเมนูย่อย (เช่น ภาพรวม) เมื่อเลือกอยู่ = แถบสีไล่ระดับ */
.sidebar .menu .list > li.active > a:not(.menu-toggle){ background:var(--grad) !important; color:#fff !important; box-shadow:var(--shadow-brand); }
.sidebar .menu .list > li.active > a:not(.menu-toggle) i.material-icons{ color:#fff !important; }
/* หัวข้อที่มีเมนูย่อยเลือกอยู่ = ตัวอักษรสีหลัก */
.sidebar .menu .list > li.active > a.menu-toggle{ background:transparent !important; color:var(--brand-700) !important; }
.sidebar .menu .list > li.active > a.menu-toggle span{ font-weight:600 !important; }
/* เมนูย่อย: เส้นนำสายตา + จุด */
.sidebar .menu .list .ml-menu{ position:relative; }
.sidebar .menu .list .ml-menu:before{ content:''; position:absolute; left:23px; top:6px; bottom:6px; width:2px; border-radius:2px; background:var(--border); }
.sidebar .menu .list .ml-menu li a{ padding-left:44px !important; }
.sidebar .menu .list .ml-menu li a:before{ left:21px !important; background:var(--border-strong) !important; }
.sidebar .menu .list .ml-menu li.active > a, .sidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle){ background:var(--brand-50) !important; color:var(--brand-700) !important; }
.sidebar .menu .list .ml-menu li.active > a:before, .sidebar .menu .list .ml-menu li.active a.toggled:not(.menu-toggle):before{ background:var(--brand) !important; box-shadow:0 0 0 3px var(--brand-100); }
/* การ์ดผู้ใช้ด้านล่าง */
.sidebar .user-info{ flex:0 0 auto; display:flex !important; align-items:center; gap:12px; margin:8px 12px 4px; padding:10px 10px 10px 12px !important;
  border:1px solid var(--border) !important; border-radius:14px; background:var(--surface-2) !important; }
.sidebar .user-info .avatar-img, .sidebar .user-info .avatar-ini{ border:2px solid #fff; box-shadow:0 0 0 1px var(--border); }
.sidebar .user-info .avatar-ini{ background:var(--grad); }
.sidebar .user-info .info-container .name{ font-size:14.5px !important; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .user-info .info-container .email{ font-size:12.5px !important; }
.sidebar .legal{ border-top:0 !important; padding:4px 18px 12px !important; font-size:12px; color:#8A94A8; }
.sidebar .legal .copyright{ font-size:12px !important; }
.overlay-open .sidebar{ box-shadow:var(--shadow-lg) !important; }

/* ---------- พื้นที่เนื้อหา ---------- */
main.content{ margin:calc(var(--nav-h) + 28px) 28px 40px calc(var(--side-w) + 28px) !important; }
.ls-closed main.content{ margin-left:16px !important; margin-right:16px !important; }

/* หัวเพจ */
.page-head-icon{ background:var(--grad); box-shadow:var(--shadow-brand); border-radius:16px; }
.page-head .page-title, .block-header h2{ font-weight:700 !important; }

/* ---------- การ์ด ---------- */
.card{ border-color:var(--border) !important; box-shadow:var(--shadow-sm) !important; }
.card .header{ padding:18px 22px !important; }
.card .header h2{ font-weight:700 !important; }
.card .body{ padding:22px !important; }

/* ---------- ปุ่ม ---------- */
.btn.btn.btn-primary:not(.btn-link), .btn.btn.bg-pink, .btn.btn.bg-cyan, .btn.btn.bg-teal{ background:var(--brand) !important; border-color:var(--brand) !important; box-shadow:0 2px 8px rgba(59,91,219,.28) !important; }
.btn.btn.btn-primary:not(.btn-link):hover, .btn.btn.btn-primary:not(.btn-link):focus{ background:var(--brand-700) !important; border-color:var(--brand-700) !important; box-shadow:0 6px 16px rgba(59,91,219,.32) !important; }
.btn.btn.btn-success:not(.btn-link){ box-shadow:0 2px 8px rgba(29,127,82,.25) !important; }
.btn.btn.btn-warning:not(.btn-link){ color:#3D2000 !important; }
.btn.btn-act:not(.btn-link){ border-radius:10px !important; }
.btn-default:hover{ border-color:var(--brand-100) !important; background:var(--brand-50) !important; color:var(--brand-700) !important; }
.page-back-btn{ border-radius:999px !important; }

/* ---------- ฟอร์ม ---------- */
.form-control:hover, .dataTables_wrapper input:hover, .dataTables_wrapper select:hover{ border-color:#AEB8CC !important; }
.form-control:focus, .dataTables_wrapper input:focus, .dataTables_wrapper select:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 4px var(--brand-100) !important; }

/* ---------- ตาราง ---------- */
.table > thead > tr > th, table.dataTable thead th{ background:var(--surface-2) !important; color:var(--muted) !important; font-size:13.5px; }
.table > tbody > tr:hover > td, table.dataTable tbody tr:hover{ background:#F5F7FF !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:10px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background:var(--grad) !important; border-color:transparent !important; box-shadow:0 2px 8px rgba(59,91,219,.3); }

/* ---------- ป้าย/แจ้งเตือน/อื่นๆ ---------- */
.status-badge{ font-weight:600; }
.status-badge.tone-warning{ background:#FFF4E5; color:#7A4100; border-color:#FFD8A8; }
.progress{ background:#E9EDF5; }
.progress-bar{ background:var(--grad); }
.dropdown-menu{ border-radius:14px !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{ background:var(--brand-50) !important; color:var(--brand-700) !important; }
.dropdown-menu > li > a:hover .material-icons{ color:var(--brand); }
.modal-content{ border-radius:20px !important; overflow:hidden; }
.modal-dialog-full-width .modal-content, .modal-content-full-width{ border-radius:0 !important; overflow:visible; }

/* ---------- หน้าภาพรวม: แบนเนอร์ทักทาย ---------- */
.hero-welcome{ position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 28px;
  padding:28px 32px; margin:0 0 24px; border-radius:24px; background:var(--grad); color:#fff; box-shadow:0 16px 40px rgba(76,110,245,.28); }
.hero-welcome:before{ content:''; position:absolute; width:380px; height:380px; right:-90px; top:-190px; border-radius:50%; background:radial-gradient(circle,rgba(255,169,77,.55),transparent 65%); }
.hero-welcome:after{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px); background-size:20px 20px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000); mask-image:linear-gradient(90deg,transparent 30%,#000); pointer-events:none; }
.hero-welcome > *{ position:relative; z-index:1; }
.hero-text{ min-width:0; flex:1 1 320px; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px 4px 8px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); font-size:14px; font-weight:500; }
.hero-eyebrow .material-icons{ font-size:18px; color:#FFD8A8; }
.hero-welcome h1{ color:#fff; font-size:30px; font-weight:700; margin:10px 0 4px; line-height:1.3; }
.hero-welcome p{ margin:0; color:rgba(255,255,255,.9); font-size:15.5px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.hero-cta{ display:inline-flex; align-items:center; gap:12px; padding:10px 18px 10px 10px; min-height:60px; border-radius:16px; text-decoration:none !important;
  background:#fff; color:var(--text) !important; font-weight:600; box-shadow:0 8px 20px rgba(23,32,64,.18); transition:transform .15s, box-shadow .15s; }
.hero-cta:hover, .hero-cta:focus-visible{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(23,32,64,.24); color:var(--text) !important; }
.hero-cta .cta-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--grad-warm); color:#fff; flex:0 0 auto; }
.hero-cta .cta-icon .material-icons{ font-size:22px; }
.hero-cta.is-alt .cta-icon{ background:var(--grad); }
.hero-cta .cta-text{ display:flex; flex-direction:column; line-height:1.3; }
.hero-cta .cta-text small{ font-size:12.5px; font-weight:400; color:var(--muted); }

/* การ์ดสถิติ */
.stat-card{ border-radius:20px; padding:22px; }
a.stat-card:hover{ border-color:var(--brand-100); box-shadow:var(--shadow); }
.stat-icon{ width:58px; height:58px; border-radius:16px; background:var(--grad); color:#fff; box-shadow:var(--shadow-brand); }
.stat-icon.amber{ background:var(--grad-warm); color:#fff; box-shadow:0 8px 20px rgba(247,103,7,.28); }
.stat-icon.green{ background:linear-gradient(135deg,#38D9A9,#0CA678); color:#fff; }
.stat-value{ font-weight:700; }
.stat-link{ width:32px; height:32px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:18px !important; transition:background .15s, color .15s; }
a.stat-card:hover .stat-link{ background:var(--brand); color:#fff; }
.quick-link{ border-radius:14px; font-weight:600; transition:background .15s, border-color .15s, box-shadow .15s, transform .15s; }
.quick-link .material-icons{ width:36px; height:36px; border-radius:10px; background:var(--brand-50); display:flex; align-items:center; justify-content:center; font-size:20px; transition:background .15s, color .15s; }
.quick-link:hover{ background:var(--surface); border-color:var(--brand-100); box-shadow:var(--shadow); transform:translateY(-1px); }
.quick-link:hover .material-icons{ background:var(--brand); color:#fff; }
/* งานเช็คชื่อวันนี้ — เด่นกว่าการ์ดอื่น */
#today_work > .card{ border-color:var(--brand-100) !important; background:linear-gradient(180deg,var(--brand-50) 0,#fff 140px) !important; }
#today_work > .card > .header{ border-bottom-color:var(--brand-100) !important; }

/* ---------- หน้าเช็คชื่อ ---------- */
.check-summary .sum-item{ border-radius:14px; position:relative; overflow:hidden; }
.check-summary .sum-item:after{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--border-strong); }
.check-summary .s-check:after{ background:var(--success); } .check-summary .s-late:after{ background:var(--accent); }
.check-summary .s-leave:after{ background:var(--info); } .check-summary .s-sick:after{ background:var(--sick); } .check-summary .s-unCheck:after{ background:var(--danger); }
.check-list{ border-radius:var(--radius); }
.check-row{ padding:12px 16px; }
.check-row:hover{ background:#F8FAFF; }
.check-row .who .nm{ font-size:15.5px; }
.seg{ border-radius:12px; border-color:var(--border); background:var(--surface-2); padding:3px; gap:3px; }
.seg button{ border-left:0 !important; border-radius:9px; min-height:40px; font-weight:600; transition:background .12s, color .12s, box-shadow .12s, transform .08s; }
.seg button:hover{ background:#fff; box-shadow:var(--shadow-sm); }
.seg button:active{ transform:scale(.96); }
.seg button[aria-pressed="true"]{ box-shadow:0 3px 10px rgba(23,32,64,.18); animation:segPop .2s ease-out; }
.seg button[aria-pressed="true"].st-late{ color:#3D2000; }
@keyframes segPop{ 0%{ transform:scale(.92); } 60%{ transform:scale(1.05); } 100%{ transform:none; } }
.grp-panel{ border-radius:var(--radius); }
.grp-avatar{ border-radius:14px; }
.grp-panel.is-open .grp-avatar{ background:var(--grad); }
.grp-bar, .lg-bar{ background:#E9EDF5; }
.scan-box{ border-radius:20px; }
.ck-c.is-today .ck-num{ background:var(--grad); }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.auth-hero{ background:var(--grad); }
.auth-hero:before{ background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%); }
.auth-hero:after{ background:radial-gradient(circle,rgba(255,169,77,.5),transparent 68%); }
.auth-features .material-icons{ background:rgba(255,255,255,.16); color:#FFD8A8; }
.auth-hero h1, .auth-card h2{ font-weight:700; }
.auth-main{ background:var(--surface); }
.auth-card .btn.btn-primary{ background:var(--grad) !important; border:0 !important; box-shadow:var(--shadow-brand) !important; }
.auth-card .btn.btn-primary:hover{ filter:brightness(1.06); }
.login-guide{ border-radius:16px; }

/* ---------- หน้านักเรียน ---------- */
.sx-hero{ background:var(--grad); box-shadow:0 14px 34px rgba(76,110,245,.28); }
.sx-hero:before{ background:radial-gradient(circle,rgba(255,169,77,.45),transparent 65%); }
.sx-who .avatar-ini{ background:var(--grad-warm); color:#fff; }

/* ---------- จอเล็ก ---------- */
@media (max-width:1169px){ .app-navbar .app-navbar-inner{ padding:0 12px; } }
@media (max-width:767px){
  :root{ --nav-h:60px; }
  .app-check-btn{ min-height:40px; padding:0 12px; }
  .app-check-btn .caret-i{ display:none; }
  .hero-welcome{ padding:22px 20px; border-radius:20px; }
  .hero-welcome h1{ font-size:24px; }
  .hero-actions, .hero-cta{ width:100%; }
}
@media (max-width:420px){ .app-check-btn span{ display:none; } .app-check-btn{ width:44px; padding:0; justify-content:center; } }
@media (prefers-reduced-motion:reduce){ .seg button[aria-pressed="true"]{ animation:none; } }
@media print{ .app-check-btn, .app-nav-context, .hero-actions{ display:none !important; } .hero-welcome{ background:none; color:var(--text); box-shadow:none; } }

/* =====================================================================
   ธีม 2026-10 รอบ 5 — เพิ่มมิติ: พื้นหลังไล่เฉดหลายชั้น, การ์ดมีไฮไลต์ขอบบน + เงาซ้อน,
   ปุ่ม/ไอคอนแบบนูนมันวาว, แสงเรืองตามสีหลัก
   ===================================================================== */
:root{
  --grad:linear-gradient(135deg,#5B7CFA 0%,#4C5FE8 45%,#6D3FD6 100%);
  --grad-warm:linear-gradient(135deg,#FFB35C 0%,#FF8A2B 50%,#F0560E 100%);
  --grad-green:linear-gradient(135deg,#4AE3B5 0%,#12B886 55%,#087F5B 100%);
  --gloss:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  --card-edge:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-sm:0 1px 1px rgba(23,32,64,.03),0 2px 4px rgba(23,32,64,.04),0 8px 20px -6px rgba(40,56,140,.10);
  --shadow:0 2px 4px rgba(23,32,64,.04),0 12px 28px -6px rgba(40,56,140,.18);
  --shadow-brand:0 2px 4px rgba(76,95,232,.25),0 10px 24px -4px rgba(91,124,250,.45);
}

/* พื้นหลังหลายชั้น (ไม่เลื่อนตามหน้า) */
body.theme-stdac{ background:
  radial-gradient(900px 520px at 100% -10%, rgba(109,63,214,.10), transparent 60%),
  radial-gradient(760px 480px at 20% -20%, rgba(91,124,250,.12), transparent 60%),
  radial-gradient(600px 420px at 110% 90%, rgba(255,138,43,.07), transparent 60%),
  #F3F5FC !important; background-attachment:fixed !important; }

/* การ์ด: ผิวไล่เฉดเล็กน้อย + ขอบบนสว่าง + เงาซ้อน */
.card, .stat-card, .quick-link, .check-list, .grp-panel, .sx-card, .sx-sum, .sx-panel, .scan-box, .lg-card, .lg-kpi, .check-summary .sum-item, .std-hero{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFF 100%) !important; box-shadow:var(--card-edge), var(--shadow-sm) !important; }
a.stat-card:hover, .quick-link:hover, a.lg-card:hover, .sx-sum:hover{ box-shadow:var(--card-edge), var(--shadow) !important; }
.card .header{ background:linear-gradient(180deg,rgba(238,242,255,.55),rgba(255,255,255,0)); border-radius:var(--radius) var(--radius) 0 0; }

/* ไอคอนนูน (หัวเพจ, สถิติ, เมนูลัด) */
.page-head-icon, .stat-icon, .hero-cta .cta-icon, .grp-panel.is-open .grp-avatar{ position:relative; box-shadow:var(--gloss), var(--shadow-brand) !important; }
.stat-icon.amber, .hero-cta .cta-icon{ box-shadow:var(--gloss), 0 2px 4px rgba(240,86,14,.25), 0 10px 22px -4px rgba(255,138,43,.5) !important; }
.hero-cta.is-alt .cta-icon{ box-shadow:var(--gloss), var(--shadow-brand) !important; }
.stat-icon.green{ background:var(--grad-green); box-shadow:var(--gloss), 0 10px 22px -4px rgba(18,184,134,.45) !important; }
.page-head-icon:after, .stat-icon:after, .hero-cta .cta-icon:after{ content:''; position:absolute; left:3px; right:3px; top:2px; height:46%; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0)); pointer-events:none; }

/* ปุ่ม: ไล่เฉด + มันวาว + กดแล้วยุบ */
.btn.btn.btn-primary:not(.btn-link), .btn.btn.bg-pink, .btn.btn.bg-cyan, .btn.btn.bg-teal{ background:var(--grad) !important; border-color:#4C5FE8 !important; box-shadow:var(--gloss), 0 4px 12px -2px rgba(76,95,232,.45) !important; }
.btn.btn.btn-primary:not(.btn-link):hover, .btn.btn.btn-primary:not(.btn-link):focus{ background:var(--grad) !important; filter:brightness(1.07); box-shadow:var(--gloss), 0 8px 20px -4px rgba(76,95,232,.55) !important; }
.btn.btn.btn-success:not(.btn-link){ background:linear-gradient(135deg,#2BAE72,#1D7F52) !important; border-color:#1D7F52 !important; box-shadow:var(--gloss), 0 4px 12px -2px rgba(29,127,82,.4) !important; }
.btn.btn.btn-danger:not(.btn-link){ background:linear-gradient(135deg,#E5483C,#B42318) !important; box-shadow:var(--gloss), 0 4px 12px -2px rgba(194,38,27,.4) !important; }
.btn.btn.btn-warning:not(.btn-link){ background:var(--grad-warm) !important; border-color:#F0560E !important; color:#2B1400 !important; box-shadow:var(--gloss), 0 4px 12px -2px rgba(240,86,14,.4) !important; }
.btn.btn.btn-default:not(.btn-link){ background:linear-gradient(180deg,#fff,#F5F7FC) !important; box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(23,32,64,.08) !important; }
.btn:not(.btn-link):active{ transform:translateY(1px) scale(.99); filter:brightness(.97); }
.app-check-btn{ box-shadow:var(--gloss), var(--shadow-brand); }

/* เมนูข้าง / แถบบน */
.sidebar{ background:linear-gradient(180deg,#FFFFFF 0%,#F8F9FF 100%) !important; box-shadow:1px 0 0 var(--border), 8px 0 30px -12px rgba(40,56,140,.12) !important; border-right:0 !important; }
.sidebar .menu .list > li.active > a:not(.menu-toggle){ box-shadow:var(--gloss), var(--shadow-brand) !important; }
.navbar.app-navbar{ box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 6px 24px -12px rgba(40,56,140,.18) !important; }
.side-brand .app-brand-mark.is-logo, .app-navbar .app-brand-mark.is-logo{ background:#fff; box-shadow:0 0 0 1px var(--border), 0 4px 10px -2px rgba(40,56,140,.18); }

/* แบนเนอร์หน้าภาพรวม: หลายชั้น + วงแสง + กริด */
.hero-welcome{ background:
  radial-gradient(420px 260px at 85% 0%, rgba(255,160,80,.55), transparent 65%),
  radial-gradient(520px 320px at 0% 120%, rgba(56,217,169,.25), transparent 60%),
  linear-gradient(135deg,#5B7CFA 0%,#4C5FE8 45%,#6D3FD6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(76,95,232,.25), 0 24px 48px -16px rgba(76,95,232,.55); }
.hero-welcome:before{ width:260px; height:260px; right:6%; top:auto; bottom:-150px; background:none; border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 40px rgba(255,255,255,.04), 0 0 0 80px rgba(255,255,255,.03); }
.hero-welcome:after{ background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:28px 28px; }
.hero-cta{ background:rgba(255,255,255,.96); box-shadow:inset 0 1px 0 #fff, 0 2px 4px rgba(23,32,64,.1), 0 14px 28px -10px rgba(23,32,64,.4); }
.hero-eyebrow{ background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

/* ปุ่มสถานะเช็คชื่อ: ไล่เฉด + นูน */
.seg{ box-shadow:inset 0 1px 2px rgba(23,32,64,.08); }
.seg button[aria-pressed="true"].st-check{ background:linear-gradient(135deg,#2BAE72,#1D7F52); }
.seg button[aria-pressed="true"].st-late{ background:var(--grad-warm); color:#2B1400; }
.seg button[aria-pressed="true"].st-leave{ background:linear-gradient(135deg,#3D82D8,#1F5FAE); }
.seg button[aria-pressed="true"].st-sick{ background:linear-gradient(135deg,#8B66E0,#6941C6); }
.seg button[aria-pressed="true"].st-unCheck{ background:linear-gradient(135deg,#E5483C,#B42318); }
.seg button[aria-pressed="true"]{ box-shadow:var(--gloss), 0 4px 10px -2px rgba(23,32,64,.35); }
.grp-bar span, .progress-bar{ background-image:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,0) 60%); }
.status-badge{ box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.table > thead > tr > th, table.dataTable thead th{ background:linear-gradient(180deg,#F8F9FF,#F1F4FB) !important; }
.modal-content{ box-shadow:0 0 0 1px rgba(23,32,64,.06), 0 30px 60px -12px rgba(23,32,64,.35) !important; }

/* =====================================================================
   หน้าเข้าสู่ระบบแบบไฮเทค (body.auth-tech)
   ===================================================================== */
body.auth-tech{ background:#070B1F !important; color:#E6EAFF; overflow-x:hidden; }
.auth-tech .tech-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(1200px 700px at 30% 30%, #121A4A 0%, #070B1F 60%); }
.auth-tech #tech-net{ position:absolute; inset:0; width:100%; height:100%; }
.auth-tech .orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:orbFloat 18s ease-in-out infinite alternate; }
.auth-tech .orb.o1{ width:520px; height:520px; left:-140px; top:-160px; background:#4C5FE8; }
.auth-tech .orb.o2{ width:440px; height:440px; left:38%; bottom:-220px; background:#7B3FE4; animation-delay:-6s; }
.auth-tech .orb.o3{ width:300px; height:300px; right:-60px; top:12%; background:#FF7A1A; opacity:.35; animation-delay:-11s; }
@keyframes orbFloat{ 0%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(60px,40px) scale(1.1); } 100%{ transform:translate(-30px,70px) scale(.95); } }
/* พื้นกริดแบบมีมุมมอง */
.auth-tech .tech-floor{ position:absolute; left:-50%; right:-50%; bottom:-10%; height:62%; transform:perspective(520px) rotateX(62deg); transform-origin:50% 100%;
  background-image:linear-gradient(rgba(120,140,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(120,140,255,.28) 1px,transparent 1px);
  background-size:56px 56px; animation:floorMove 4s linear infinite;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%); mask-image:linear-gradient(to top,#000 10%,transparent 85%); }
@keyframes floorMove{ to{ background-position:0 56px; } }

.auth-tech .auth-shell{ position:relative; z-index:1; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.auth-tech .auth-hero{ background:none !important; padding:44px 56px; }
.auth-tech .auth-hero:before, .auth-tech .auth-hero:after{ display:none; }
.auth-tech .auth-hero .app-brand{ color:#fff !important; }
.auth-tech .auth-hero .app-brand-mark.is-logo{ background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 24px rgba(91,124,250,.6); }
.auth-tech .auth-hero .app-brand-sub{ color:#AEB8E8; opacity:1; }
.auth-tech .hero-core{ max-width:600px; }
.auth-tech .tech-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:13.5px; color:#C9D3FF;
  background:rgba(91,124,250,.12); border:1px solid rgba(129,150,255,.35); box-shadow:0 0 20px -4px rgba(91,124,250,.5); }
.auth-tech .live-dot{ width:8px; height:8px; border-radius:50%; background:#38D9A9; box-shadow:0 0 0 0 rgba(56,217,169,.7); animation:livePulse 1.8s infinite; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 rgba(56,217,169,.7); } 70%{ box-shadow:0 0 0 10px rgba(56,217,169,0); } 100%{ box-shadow:0 0 0 0 rgba(56,217,169,0); } }
.auth-tech .auth-hero h1{ font-family:'Kanit','IBM Plex Sans Thai',sans-serif !important; font-weight:600; font-size:46px; line-height:1.25; margin:18px 0 14px; color:#fff;
  text-shadow:0 0 40px rgba(91,124,250,.35); max-width:none; }
.auth-tech .grad-text{ background:linear-gradient(90deg,#8FA6FF 0%,#C38BFF 45%,#FFB35C 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:gradShift 6s ease-in-out infinite alternate; padding:0 .08em; }
@keyframes gradShift{ to{ background-position:100% 0; } }
.auth-tech .auth-hero p.lead{ color:#AEB8E8; font-size:16.5px; max-width:34em; }

/* ภาพจำลองเครื่องสแกน */
.auth-tech .holo{ display:flex; gap:18px; align-items:stretch; margin:30px 0 26px; padding:18px; max-width:520px; border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(129,150,255,.25);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 20px 50px -20px rgba(0,0,0,.6); }
.auth-tech .holo-scan{ position:relative; flex:0 0 auto; width:132px; height:132px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(91,124,250,.25),rgba(7,11,31,.4) 70%); overflow:hidden; }
.auth-tech .holo-scan > .material-icons{ font-size:84px; color:#C9D3FF; opacity:.9; filter:drop-shadow(0 0 10px rgba(129,150,255,.7)); }
.auth-tech .holo-scan .c{ position:absolute; width:22px; height:22px; border:3px solid #FFB35C; }
.auth-tech .holo-scan .tl{ left:8px; top:8px; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.auth-tech .holo-scan .tr{ right:8px; top:8px; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
.auth-tech .holo-scan .bl{ left:8px; bottom:8px; border-right:0; border-top:0; border-radius:0 0 0 8px; }
.auth-tech .holo-scan .br{ right:8px; bottom:8px; border-left:0; border-top:0; border-radius:0 0 8px 0; }
.auth-tech .scan-line{ position:absolute; left:10px; right:10px; height:2px; top:12px; background:#38D9A9; box-shadow:0 0 12px 3px rgba(56,217,169,.7);
  animation:scanMove 2.4s ease-in-out infinite alternate; }
@keyframes scanMove{ to{ top:calc(100% - 14px); } }
.auth-tech .holo-side{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:12px; }
.auth-tech .holo-head{ display:flex; align-items:center; gap:8px; font-size:14px; color:#C9D3FF; font-weight:500; }
.auth-tech .holo-head .material-icons{ font-size:20px; color:#38D9A9; animation:blink 1.6s infinite; }
@keyframes blink{ 50%{ opacity:.35; } }
.auth-tech .holo-status{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.auth-tech .holo-status li{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font-size:13.5px; font-weight:600; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); animation:statGlow 6s infinite; }
.auth-tech .holo-status li .material-icons{ font-size:18px; }
.auth-tech .holo-status .h-check .material-icons{ color:#38D9A9; } .auth-tech .holo-status .h-late .material-icons{ color:#FFB35C; }
.auth-tech .holo-status .h-leave .material-icons{ color:#74A7FF; } .auth-tech .holo-status .h-absent .material-icons{ color:#FF6B6B; }
.auth-tech .holo-status .h-late{ animation-delay:1.5s; } .auth-tech .holo-status .h-leave{ animation-delay:3s; } .auth-tech .holo-status .h-absent{ animation-delay:4.5s; }
@keyframes statGlow{ 0%,20%,100%{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); } 8%{ background:rgba(129,150,255,.22); border-color:rgba(129,150,255,.6); } }
.auth-tech .holo-bars{ display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.auth-tech .holo-bars span{ height:5px; border-radius:3px; background:linear-gradient(90deg,#5B7CFA,#C38BFF); animation:barGrow 3s ease-in-out infinite alternate; }
.auth-tech .holo-bars span:nth-child(1){ width:88%; } .auth-tech .holo-bars span:nth-child(2){ width:64%; animation-delay:-1s; } .auth-tech .holo-bars span:nth-child(3){ width:76%; animation-delay:-2s; background:linear-gradient(90deg,#FFB35C,#F0560E); }
@keyframes barGrow{ from{ transform:scaleX(.55); } to{ transform:scaleX(1); } }
.auth-tech .holo-bars span{ transform-origin:left; }

.auth-tech .auth-features{ display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.auth-tech .auth-features li{ padding:6px 14px 6px 6px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#DDE3FF; font-size:14px; gap:8px; }
.auth-tech .auth-features .material-icons{ width:30px; height:30px; border-radius:50%; font-size:18px; background:rgba(91,124,250,.25); color:#C9D3FF; }
.auth-tech .auth-hero small{ color:#7D88B8; }

/* แผงเข้าสู่ระบบ: กระจกมืด + ขอบเรืองแสงหมุน */
.auth-tech .auth-main{ background:none !important; padding:40px 40px; }
.auth-tech .auth-panel{ position:relative; width:100%; max-width:460px; padding:36px 34px 30px; border-radius:26px;
  background:linear-gradient(160deg,rgba(26,34,82,.78),rgba(12,17,46,.82)); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -20px rgba(91,124,250,.55); isolation:isolate; }
.auth-tech .auth-panel:before{ content:''; position:absolute; inset:0; padding:1.5px; border-radius:inherit; z-index:-1;
  background:conic-gradient(from var(--ang,0deg),rgba(91,124,250,.9),rgba(195,139,255,.2),rgba(255,179,92,.9),rgba(56,217,169,.25),rgba(91,124,250,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:edgeSpin 8s linear infinite; }
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes edgeSpin{ to{ --ang:360deg; } }
.auth-tech .auth-card{ max-width:none; }
.auth-tech .auth-card h2{ color:#fff; font-family:'Kanit','IBM Plex Sans Thai',sans-serif !important; font-weight:600; font-size:30px; }
.auth-tech .auth-card .sub{ color:#AEB8E8; }
.auth-tech .auth-panel label{ color:#C9D3FF; }
.auth-tech .auth-panel .form-control{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(129,150,255,.28) !important; color:#fff !important; border-radius:12px !important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25) !important; }
.auth-tech .auth-panel .form-control:hover{ border-color:rgba(129,150,255,.5) !important; }
.auth-tech .auth-panel .form-control:focus{ border-color:#8FA6FF !important; background:rgba(255,255,255,.09) !important; box-shadow:inset 0 2px 4px rgba(0,0,0,.25), 0 0 0 4px rgba(91,124,250,.28), 0 0 24px -4px rgba(91,124,250,.7) !important; }
.auth-tech .auth-panel .form-control::placeholder{ color:#7D88B8; }
.auth-tech .auth-panel input:-webkit-autofill{ -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 40px #18205A inset !important; caret-color:#fff; }
.auth-tech .pw-toggle{ color:#AEB8E8; }
.auth-tech .pw-toggle:hover{ background:rgba(255,255,255,.08); color:#fff; }
.auth-tech .auth-check{ color:#C9D3FF; }
.auth-tech .auth-card .btn.btn-primary{ min-height:54px; font-size:17px !important; font-weight:600; letter-spacing:.01em; border:0 !important;
  background:linear-gradient(90deg,#5B7CFA,#8B5CF6,#5B7CFA) !important; background-size:200% 100% !important; animation:btnFlow 5s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px -6px rgba(91,124,250,.8) !important; }
.auth-tech .auth-card .btn.btn-primary:hover{ filter:brightness(1.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 36px -6px rgba(139,92,246,.9) !important; }
@keyframes btnFlow{ to{ background-position:200% 0; } }
.auth-tech .login-guide{ background:rgba(255,255,255,.04); border:1px solid rgba(129,150,255,.2); }
.auth-tech .login-guide-head{ color:#DDE3FF; }
.auth-tech .login-guide-head .material-icons{ color:#FFB35C; }
.auth-tech .login-guide-row{ border-top-color:rgba(129,150,255,.18); }
.auth-tech .login-guide-icon{ background:rgba(91,124,250,.2); color:#C9D3FF; box-shadow:none; }
.auth-tech .login-guide-text{ color:#AEB8E8; }
.auth-tech .login-guide-text > b, .auth-tech .login-guide-text b{ color:#fff; }
.auth-tech .login-guide-text code{ background:rgba(255,255,255,.08); color:#FFD8A8; border-color:rgba(255,179,92,.35); }
.auth-tech .auth-foot{ color:#7D88B8; }
.auth-tech .alert-danger{ background:rgba(229,72,60,.14) !important; border-color:rgba(255,107,107,.45) !important; color:#FFC9C9 !important; }
.auth-tech :focus-visible{ box-shadow:0 0 0 3px #070B1F, 0 0 0 6px #8FA6FF !important; }
/* ฟอร์มอื่นบนเทมเพลตเดียวกัน (สมัครสมาชิก ฯลฯ) ยังเป็นการ์ดขาวในแผงมืด */
.auth-tech .auth-panel .card label{ color:var(--text); }
.auth-tech .auth-panel .card .form-control{ background:#fff !important; color:var(--text) !important; border-color:var(--border-strong) !important; box-shadow:none !important; }

@media (max-width:1100px){ .auth-tech .auth-hero{ padding:36px 32px; } .auth-tech .auth-hero h1{ font-size:38px; } }
@media (max-width:767px){
  .auth-tech .auth-shell{ grid-template-columns:1fr; }
  .auth-tech .auth-hero{ padding:24px 20px 0; }
  .auth-tech .auth-hero h1{ font-size:30px; margin:14px 0 8px; }
  .auth-tech .holo, .auth-tech .auth-features, .auth-tech .auth-hero small{ display:none; }
  .auth-tech .auth-main{ padding:20px 14px 36px; }
  .auth-tech .auth-panel{ padding:26px 20px 22px; border-radius:22px; }
}
@media (prefers-reduced-motion:reduce){
  .auth-tech .orb, .auth-tech .tech-floor, .auth-tech .grad-text, .auth-tech .live-dot, .auth-tech .scan-line, .auth-tech .holo-head .material-icons,
  .auth-tech .holo-status li, .auth-tech .holo-bars span, .auth-tech .auth-panel:before, .auth-tech .auth-card .btn.btn-primary{ animation:none !important; }
}
/* รอบ 5 (ปรับ): ให้มิติเห็นชัดขึ้น */
.hero-welcome{ background:
  radial-gradient(460px 300px at 88% -10%, rgba(255,150,60,.75), transparent 62%),
  radial-gradient(520px 340px at -5% 130%, rgba(56,217,169,.38), transparent 60%),
  radial-gradient(380px 260px at 45% 120%, rgba(30,20,120,.45), transparent 70%),
  linear-gradient(135deg,#5B7CFA 0%,#4C5FE8 45%,#6D3FD6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -30px 60px -30px rgba(20,10,80,.45), 0 2px 6px rgba(76,95,232,.25), 0 28px 56px -18px rgba(76,95,232,.65); }
.hero-welcome:after{ background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse at 80% 30%,#000 0%,transparent 70%); mask-image:radial-gradient(ellipse at 80% 30%,#000 0%,transparent 70%); }
.hero-welcome h1{ text-shadow:0 2px 12px rgba(20,10,80,.35); }
.stat-card{ overflow:hidden; }
.stat-card:before{ content:''; position:absolute; width:180px; height:180px; right:-60px; bottom:-90px; border-radius:50%; background:radial-gradient(circle,rgba(91,124,250,.16),transparent 70%); pointer-events:none; }
.stat-card:nth-child(2):before{ background:radial-gradient(circle,rgba(255,138,43,.18),transparent 70%); }
.card, .stat-card, .quick-link, .check-list, .grp-panel{ border-color:#E3E8F4 !important; }
.card, .stat-card{ box-shadow:var(--card-edge), 0 1px 2px rgba(23,32,64,.04), 0 12px 32px -12px rgba(40,56,140,.22) !important; }

/* ---------- หน้าเข้าสู่ระบบ: พื้นหลังคลื่นแสงออโรรา (แทนเครือข่ายจุด/พื้นกริด) ---------- */
.auth-tech .tech-bg.is-aurora{ background:radial-gradient(1400px 800px at 50% 115%, #1A1450 0%, #0A0E2A 45%, #05071A 100%); }
.auth-tech .aurora{ position:absolute; inset:-20% -10%; filter:blur(48px) saturate(1.3); opacity:.9; }
.auth-tech .aurora .band{ position:absolute; left:-10%; width:120%; height:34%; border-radius:50%; mix-blend-mode:screen; transform-origin:50% 50%; }
.auth-tech .aurora .b1{ top:8%;  background:linear-gradient(90deg,transparent 5%,rgba(56,217,169,.55) 30%,rgba(91,124,250,.65) 60%,transparent 95%); animation:auroraA 16s ease-in-out infinite alternate; }
.auth-tech .aurora .b2{ top:24%; background:linear-gradient(90deg,transparent 0%,rgba(91,124,250,.55) 25%,rgba(139,92,246,.7) 55%,rgba(56,217,169,.35) 80%,transparent 100%); animation:auroraB 21s ease-in-out infinite alternate; }
.auth-tech .aurora .b3{ top:42%; height:28%; background:linear-gradient(90deg,transparent 10%,rgba(195,139,255,.45) 40%,rgba(255,138,43,.45) 70%,transparent 95%); animation:auroraA 25s ease-in-out infinite alternate-reverse; }
.auth-tech .aurora .b4{ top:62%; height:24%; background:linear-gradient(90deg,transparent 0%,rgba(76,95,232,.4) 35%,rgba(56,217,169,.3) 65%,transparent 100%); animation:auroraB 19s ease-in-out infinite alternate-reverse; }
@keyframes auroraA{ 0%{ transform:translateX(-8%) rotate(-8deg) scaleY(.8); } 50%{ transform:translateX(4%) rotate(-3deg) scaleY(1.25); } 100%{ transform:translateX(10%) rotate(-10deg) scaleY(.9); } }
@keyframes auroraB{ 0%{ transform:translateX(8%) rotate(6deg) scaleY(1.1); } 50%{ transform:translateX(-4%) rotate(2deg) scaleY(.75); } 100%{ transform:translateX(-10%) rotate(9deg) scaleY(1.2); } }
/* ม่านเงาด้านล่าง + ขอบมืด ให้ข้อความอ่านง่ายและดูลึก */
.auth-tech .aurora-veil{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,7,26,0) 0%,rgba(5,7,26,.15) 55%,rgba(5,7,26,.75) 100%), radial-gradient(ellipse at center,transparent 45%,rgba(3,4,16,.6) 100%); }
@media (max-width:767px){ .auth-tech .aurora{ filter:blur(36px) saturate(1.3); } }
@media (prefers-reduced-motion:reduce){ .auth-tech .aurora .band{ animation:none !important; } }
.auth-tech .aurora{ filter:blur(28px) saturate(1.5); opacity:1; }
.auth-tech .aurora .band{ height:16%; }
.auth-tech .aurora .b1{ top:14%; } .auth-tech .aurora .b2{ top:30%; height:20%; } .auth-tech .aurora .b3{ top:50%; height:14%; } .auth-tech .aurora .b4{ top:66%; height:12%; }

/* ---------- หน้าเข้าสู่ระบบ: โลโก้ + ชื่อระบบ + ชื่อวิทยาลัย แทนข้อความหัวเรื่อง ---------- */
.auth-tech .auth-hero > .tech-pill{ align-self:flex-start; }
.auth-tech .hero-brand{ display:flex; align-items:center; gap:22px; margin:0 0 18px; }
.auth-tech .hero-logo{ position:relative; flex:0 0 auto; width:112px; height:112px; border-radius:28px; padding:14px; background:#fff;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.25), 0 0 0 8px rgba(129,150,255,.12), 0 18px 40px -10px rgba(0,0,0,.6), 0 0 60px -6px rgba(91,124,250,.75); }
.auth-tech .hero-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.auth-tech .hero-logo:after{ content:''; position:absolute; inset:-14px; border-radius:36px; border:1px solid rgba(129,150,255,.35); animation:logoRing 3s ease-in-out infinite; }
@keyframes logoRing{ 0%,100%{ opacity:.25; transform:scale(.97); } 50%{ opacity:.8; transform:scale(1.03); } }
.auth-tech .hero-brand-text{ min-width:0; }
.auth-tech .hero-brand h1{ font-size:40px; line-height:1.2; margin:0 0 10px; text-wrap:balance; }
.auth-tech .hero-school{ display:flex; align-items:center; gap:8px; margin:0; font-size:20px; font-weight:600; color:#E6EAFF; }
.auth-tech .hero-school .material-icons{ font-size:22px; color:#FFB35C; }
@media (max-width:1100px){ .auth-tech .hero-brand h1{ font-size:32px; } .auth-tech .hero-logo{ width:92px; height:92px; border-radius:24px; } }
@media (max-width:767px){
  .auth-tech .auth-hero{ gap:16px; }
  .auth-tech .hero-brand{ gap:14px; margin-bottom:8px; }
  .auth-tech .hero-logo{ width:68px; height:68px; border-radius:18px; padding:9px; }
  .auth-tech .hero-logo:after{ inset:-8px; border-radius:24px; }
  .auth-tech .hero-brand h1{ font-size:24px; margin-bottom:4px; }
  .auth-tech .hero-school{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){ .auth-tech .hero-logo:after{ animation:none; } }
.auth-tech .hero-brand h1 .grad-text{ background:linear-gradient(90deg,#FFFFFF 0%,#DCE4FF 50%,#FFD8A8 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; filter:drop-shadow(0 2px 14px rgba(91,124,250,.45)); }

/* ---------- เวอร์ชันระบบ + อัปเดตระบบ (2026-10-10) ---------- */
.app-footer{ display:flex; justify-content:flex-end; margin:28px 0 -12px; }
.app-version{ font-size:12px; color:var(--muted); letter-spacing:.3px; font-variant-numeric:tabular-nums; opacity:.85; }
.auth-main{ position:relative; }
.auth-version{ position:absolute; right:18px; bottom:12px; }
.auth-tech .auth-version{ color:rgba(255,255,255,.55); }
/* หน้าเข้าสู่ระบบจอกว้าง (2026-10-16): เดิมสองคอลัมน์กางเต็มจอ ข้อความซ้าย/การ์ดขวาห่างกัน ~200px ตรงกลางว่าง
   → จัดเป็นก้อนเดียวกึ่งกลางจอ (กว้างสุด 1240px) ช่องไฟ 64px · การ์ดกระชับขึ้นให้พอดีจอสูง 900px */
@media (min-width:1024px){
  .auth-tech .auth-shell{ max-width:1240px; margin:0 auto; grid-template-columns:minmax(0,1fr) 460px; column-gap:64px; padding:0 48px; }
  .auth-tech .auth-hero{ padding:40px 0; }
  .auth-tech .hero-core{ max-width:620px; }
  .auth-tech .auth-main{ padding:28px 0; }
  .auth-tech .auth-panel{ padding:30px 30px 24px; }
  .auth-tech .login-guide{ padding:12px 14px; }
  .auth-tech .login-guide-row{ padding:8px 0 0; }
  .auth-tech .login-guide-text span{ font-size:13px; line-height:1.45; }
}
.update-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 18px; padding:10px 14px; border-radius:var(--radius-sm);
  background:#EEF2FF; border:1px solid #C9D3FB; color:#23336E; }
.update-bar > .material-icons{ color:#3B5BDB; }
.update-bar span{ flex:1 1 220px; }
.upd-ver{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.upd-ver > div{ display:flex; flex-direction:column; }
.upd-ver-label{ font-size:12.5px; color:var(--muted); }
.upd-ver-num{ font-size:22px; font-weight:700; letter-spacing:.3px; font-variant-numeric:tabular-nums; }
.upd-ver-num.is-new{ color:#3B5BDB; }
.upd-ver-arrow{ color:var(--muted); }
.upd-changes{ margin:0; padding:0; list-style:none; max-height:320px; overflow:auto; }
.upd-changes li{ display:flex; gap:12px; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); }
.upd-changes li:last-child{ border-bottom:0; }
.upd-changes small{ color:var(--muted); white-space:nowrap; }
.upd-mode{ margin:6px 0 10px; }
.upd-mode small{ color:var(--muted); font-weight:400; }
.upd-help{ margin-top:10px; }
.upd-help summary{ cursor:pointer; font-weight:600; color:#3B5BDB; display:list-item; }
.upd-help ol, .upd-help p{ margin:10px 0 0; }
.upd-cmd{ white-space:pre-wrap; word-break:break-all; font-size:12.5px; margin:8px 0; }
.upd-auth{ margin-top:14px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.upd-auth-title{ font-size:15px; font-weight:700; margin:0 0 4px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.upd-auth ol{ margin:8px 0 14px; padding-left:20px; }
.upd-auth ol li{ margin:3px 0; }
.upd-sched{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.upd-changes li.is-note span{ font-weight:600; }
.upd-hist-changes{ margin-top:6px; }
.upd-hist-changes summary{ font-size:13px; }
.upd-hist-changes .upd-changes{ margin-top:6px; max-height:240px; }

/* ---------- ความลื่นบนมือถือ / โหมดประหยัดกราฟิก (2026-10-12) ----------
   1) จอเล็ก/จอสัมผัส: ปิดพื้นหลังแบบ fixed (วาดใหม่ทุกครั้งที่เลื่อน) และกระจกเบลอของแถบบน
   2) html.perf-lite (ตั้งโดย stdac_perf_head() เมื่อเครื่องช้า): ตัดเบลอ/เงาซ้อน/ภาพเคลื่อนไหวทั้งหมด */
@media (max-width:1169px), (pointer:coarse){
  body.theme-stdac{ background-attachment:scroll !important; }
  .navbar.app-navbar{ background:rgba(255,255,255,.97) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .hero-eyebrow, .sx-overall{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}
html.perf-lite *, html.perf-lite *:before, html.perf-lite *:after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; transition:none !important; }
html.perf-lite body.theme-stdac{ background:#F3F5FC !important; }
html.perf-lite .navbar.app-navbar{ background:#fff !important; box-shadow:0 1px 0 var(--border) !important; }
html.perf-lite .card, html.perf-lite .stat-card, html.perf-lite .quick-link, html.perf-lite .check-list, html.perf-lite .grp-panel, html.perf-lite .sx-card, html.perf-lite .sx-sum,
html.perf-lite .sx-panel, html.perf-lite .scan-box, html.perf-lite .lg-card, html.perf-lite .lg-kpi, html.perf-lite .check-summary .sum-item{ background:#fff !important; box-shadow:0 1px 2px rgba(23,32,64,.08) !important; }
html.perf-lite .sidebar{ background:#fff !important; box-shadow:1px 0 0 var(--border) !important; }
html.perf-lite .btn:not(.btn-link), html.perf-lite .page-head-icon, html.perf-lite .stat-icon, html.perf-lite .hero-cta .cta-icon, html.perf-lite .app-check-btn,
html.perf-lite .sidebar .menu .list > li.active > a:not(.menu-toggle), html.perf-lite .hero-welcome, html.perf-lite .hero-cta{ box-shadow:none !important; filter:none !important; }
html.perf-lite .btn:not(.btn-link):active{ transform:none; }
html.perf-lite .ring-val, html.perf-lite .stack .seg, html.perf-lite .seg button[aria-pressed="true"], html.perf-lite .scan-result{ animation:none !important; }
html.perf-lite .waves-ripple{ display:none !important; }
/* หน้าเข้าสู่ระบบ: หยุดแสงเคลื่อนไหว เหลือพื้นหลังนิ่ง */
html.perf-lite .auth-tech *, html.perf-lite .auth-tech *:before, html.perf-lite .auth-tech *:after{ animation:none !important; }
html.perf-lite .auth-tech .aurora{ display:none; }
html.perf-lite .auth-tech .tech-bg{ background:radial-gradient(900px 600px at 30% 20%, #26307A 0%, #121A4A 40%, #070B1F 75%); }
html.perf-lite .auth-tech .hero-logo, html.perf-lite .auth-tech .auth-panel{ box-shadow:none !important; }
html.perf-lite .auth-tech .hero-brand h1 .grad-text, html.perf-lite .auth-tech .holo-scan > .material-icons{ filter:none; }
html.perf-lite .auth-tech .auth-panel{ background:#141B44 !important; }

/* ---------- ฉากเข้าสู่ระบบ (2026-10-11) ----------
   หน้าเข้าสู่ระบบ: กดปุ่ม → body.is-leaving → ม่าน .auth-curtain เลื่อนขึ้นจากล่างปิดหน้า
   หน้าแรกหลังล็อกอิน: .login-welcome (stdac_login_welcome()) ปิดหน้าอยู่ ทักชื่อ แล้วเลื่อนขึ้นออกไป */
.auth-curtain, .login-welcome{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:100000; pointer-events:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:radial-gradient(900px 600px at 30% 20%, #26307A 0%, #121A4A 40%, #070B1F 75%); background-color:#070B1F; }
.auth-curtain{ -webkit-transform:translateY(100%); transform:translateY(100%); visibility:hidden;
  transition:transform .55s cubic-bezier(.7,0,.2,1), visibility 0s linear .55s; }
.is-leaving .auth-curtain{ -webkit-transform:none; transform:none; visibility:visible; transition:transform .55s cubic-bezier(.7,0,.2,1); }
.is-leaving .auth-shell{ opacity:.4; -webkit-transform:translateY(-24px) scale(.98); transform:translateY(-24px) scale(.98); transition:opacity .5s ease, transform .55s cubic-bezier(.7,0,.2,1); }
.lw-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 16px; }
.lw-logo{ width:96px; height:96px; border-radius:26px; padding:13px; background:#fff; margin-bottom:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 0 0 8px rgba(129,150,255,.12), 0 18px 40px -10px rgba(0,0,0,.6), 0 0 60px -6px rgba(91,124,250,.75); }
.lw-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.lw-hello{ font-family:'Kanit','IBM Plex Sans Thai',sans-serif; font-weight:500; font-size:19px; color:rgba(255,255,255,.72); letter-spacing:.3px; }
.lw-name{ margin-top:4px; font-family:'Kanit','IBM Plex Sans Thai',sans-serif; font-weight:600; font-size:32px; line-height:1.3;
  background:linear-gradient(90deg,#FFFFFF 0%,#DCE4FF 50%,#FFD8A8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lw-dots{ margin-top:14px; }
.lw-dots i{ display:inline-block; width:8px; height:8px; margin:0 4px; border-radius:50%; background:#fff; opacity:.25; animation:lwDot 1s ease-in-out infinite; }
.lw-dots i:nth-child(2){ animation-delay:.15s; } .lw-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes lwDot{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-5px); } }
.login-welcome{ animation:lwOut .7s cubic-bezier(.7,0,.2,1) 1.3s forwards; }
.login-welcome .lw-logo{ animation:lwPop .55s cubic-bezier(.2,1.4,.4,1) both; }
.login-welcome .lw-hello{ animation:lwRise .5s ease .15s both; }
.login-welcome .lw-name{ animation:lwRise .5s ease .3s both; }
@keyframes lwOut{ to{ -webkit-transform:translateY(-100%); transform:translateY(-100%); visibility:hidden; } }
@keyframes lwPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes lwRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
/* เนื้อหาหน้าแรกค่อยๆ ขึ้นมาตอนม่านเปิด */
.login-welcome ~ main.content, .login-welcome ~ .student-main{ animation:lwRise .6s ease 1.55s both; }
/* ล็อกอินไม่ผ่าน: กล่องแจ้งเตือนสั่น */
.auth-tech .auth-alert.alert-danger{ animation:authShake .45s ease .1s both; }
@keyframes authShake{ 0%,100%{ transform:none; } 20%{ transform:translateX(-8px); } 40%{ transform:translateX(7px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(3px); } }
@media (max-width:767px){ .lw-logo{ width:76px; height:76px; border-radius:20px; padding:10px; } .lw-name{ font-size:25px; } }
/* เครื่องช้า: ไม่มีเงา ฉากต้อนรับจางหายแทนการเลื่อน · ลดภาพเคลื่อนไหว: ไม่แสดงฉากต้อนรับ */
html.perf-lite .lw-logo{ box-shadow:none; }
html.perf-lite .login-welcome *, html.perf-lite .login-welcome ~ *{ animation:none !important; }
html.perf-lite .login-welcome{ animation:lwFade .35s ease 1s forwards !important; }
@keyframes lwFade{ to{ opacity:0; visibility:hidden; } }
html.perf-lite .is-leaving .auth-shell{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .login-welcome{ display:none; }
  .login-welcome ~ main.content, .login-welcome ~ .student-main, .auth-tech .auth-alert.alert-danger{ animation:none; }
  .auth-curtain, .is-leaving .auth-curtain, .is-leaving .auth-shell{ transition:none; }
}

/* =====================================================================
   โหมดมืด (2026-10-12) — html[data-theme="dark"] ตั้งโดย stdac_theme_head() ก่อนโหลด CSS
   ผู้ใช้เลือก สว่าง/มืด/ตามเครื่อง ที่ปุ่มบนแถบด้านบน (จำใน localStorage stdac_theme)
   หลัก: สลับค่าตัวแปรใน :root ชุดเดียว + ทับจุดที่เขียนสีตายตัวไว้ด้านบน
   เพิ่มสีตายตัวใหม่ในไฟล์นี้ = เพิ่มกฎโหมดมืดในส่วนนี้ด้วย
   ===================================================================== */
html[data-theme="dark"]{ color-scheme:dark;
  --brand:#6E8BFF; --brand-700:#A9B9FF; --brand-600:#8199FF; --brand-100:#2C3768; --brand-50:#1B2246;
  --accent:#FF9E45; --accent-700:#FFC085;
  --bg:#0B1020; --surface:#141A2E; --surface-2:#1A2139;
  --text:#E7EBF7; --text-2:#BAC3DA; --muted:#8E99B3; --border:#262F4A; --border-strong:#36415F;
  --success:#3CCB86; --success-50:#10291D; --danger:#FF7468; --danger-50:#341719;
  --warning:#F2B54C; --warning-50:#2E2410; --info:#6AAEFF; --info-50:#13233B;
  --sick:#A88BFA; --sick-50:#231B3D;
  --card-edge:inset 0 1px 0 rgba(255,255,255,.04);
  --gloss:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.25);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 6px 18px -8px rgba(0,0,0,.55);
  --shadow:0 2px 6px rgba(0,0,0,.4),0 14px 30px -10px rgba(0,0,0,.6);
  --shadow-lg:0 24px 56px rgba(0,0,0,.6);
  --shadow-brand:0 2px 4px rgba(0,0,0,.3),0 10px 24px -6px rgba(91,124,250,.45);
  --focus:0 0 0 3px #0B1020,0 0 0 6px #6AAEFF;
  /* สีข้อความ/ขอบบนพื้นอ่อนของแต่ละโทน */
  --ok-ink:#7FE0AE; --ok-line:#1F5A3E; --bad-ink:#FFADA5; --bad-line:#6A2A2A;
  --warn-ink:#F7CD80; --warn-line:#5E4818; --info-ink:#A7CBFF; --info-line:#24426B;
}
html[data-theme="dark"] body.theme-stdac{ background:
  radial-gradient(900px 520px at 100% -10%, rgba(109,63,214,.16), transparent 60%),
  radial-gradient(760px 480px at 20% -20%, rgba(91,124,250,.14), transparent 60%),
  radial-gradient(600px 420px at 110% 90%, rgba(255,138,43,.05), transparent 60%),
  var(--bg) !important; background-attachment:fixed !important; }
html[data-theme="dark"] body, html[data-theme="dark"] body.student-page{ background-color:var(--bg) !important; color:var(--text); }

/* แถบบน / เมนูข้าง */
html[data-theme="dark"] .navbar.app-navbar{ background:rgba(20,26,46,.86) !important; box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 24px -12px rgba(0,0,0,.6) !important; }
html[data-theme="dark"] .sidebar{ background:linear-gradient(180deg,#141A2E 0%,#11172A 100%) !important; box-shadow:1px 0 0 var(--border), 8px 0 30px -12px rgba(0,0,0,.5) !important; }
html[data-theme="dark"] .sidebar .user-info .avatar-img, html[data-theme="dark"] .sidebar .user-info .avatar-ini{ border-color:var(--surface); }
html[data-theme="dark"] .app-rms-btn, html[data-theme="dark"] .side-rms{ color:#FFB4B4 !important; }
html[data-theme="dark"] .app-rms-btn:hover, html[data-theme="dark"] .app-rms-btn:focus, html[data-theme="dark"] .side-rms:hover{ background:rgba(255,120,120,.1); border-color:#5A2A2A; }

/* การ์ด / พื้นผิว */
html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .quick-link, html[data-theme="dark"] .check-list, html[data-theme="dark"] .grp-panel,
html[data-theme="dark"] .sx-card, html[data-theme="dark"] .sx-sum, html[data-theme="dark"] .sx-panel, html[data-theme="dark"] .scan-box, html[data-theme="dark"] .lg-card,
html[data-theme="dark"] .lg-kpi, html[data-theme="dark"] .check-summary .sum-item, html[data-theme="dark"] .std-hero{
  background:linear-gradient(180deg,#161D33 0%,#141A2E 100%) !important; border-color:var(--border) !important; }
html[data-theme="dark"] .card, html[data-theme="dark"] .stat-card{ box-shadow:var(--card-edge), var(--shadow-sm) !important; }
html[data-theme="dark"] .card .header{ background:linear-gradient(180deg,rgba(110,139,255,.07),rgba(110,139,255,0)); }
html[data-theme="dark"] #today_work > .card{ background:linear-gradient(180deg,var(--brand-50) 0,var(--surface) 140px) !important; }
html[data-theme="dark"] .info-box, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .popover,
html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .panel{ background:var(--surface) !important; color:var(--text); border-color:var(--border); }
html[data-theme="dark"] .modal-content{ box-shadow:0 0 0 1px var(--border), 0 30px 60px -12px rgba(0,0,0,.7) !important; }
html[data-theme="dark"] .modal-body, html[data-theme="dark"] .modal-footer{ color:var(--text); }
html[data-theme="dark"] .modal-backdrop.in{ background:#000; opacity:.6; }
html[data-theme="dark"] .close{ color:var(--text); }
html[data-theme="dark"] .hero-cta{ background:rgba(20,26,46,.92); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 28px -10px rgba(0,0,0,.6); }

/* ปุ่ม */
html[data-theme="dark"] .btn.btn.btn-default:not(.btn-link){ background:linear-gradient(180deg,#1C2440,#171E36) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4) !important; }
html[data-theme="dark"] .btn-default:hover{ background:var(--brand-50) !important; border-color:var(--brand-100) !important; color:var(--brand-700) !important; }
html[data-theme="dark"] .btn-soft-success{ color:var(--ok-ink) !important; border-color:var(--ok-line) !important; }
html[data-theme="dark"] .btn-soft-success:hover{ background:#173A29 !important; }
html[data-theme="dark"] .btn-soft-info{ color:var(--info-ink) !important; border-color:var(--info-line) !important; }
html[data-theme="dark"] .btn-soft-info:hover{ background:#1A3050 !important; }
html[data-theme="dark"] .btn-soft-warning{ color:var(--warn-ink) !important; border-color:var(--warn-line) !important; }
html[data-theme="dark"] .btn-soft-warning:hover{ background:#3D3015 !important; }
html[data-theme="dark"] .btn-soft-danger{ color:var(--bad-ink) !important; border-color:var(--bad-line) !important; }
html[data-theme="dark"] .btn-soft-danger:hover{ background:#46201F !important; }
html[data-theme="dark"] .btn-ghost-danger:hover{ border-color:var(--bad-line) !important; }
html[data-theme="dark"] .seg button:hover{ background:var(--surface); }

/* ฟอร์ม */
html[data-theme="dark"] .form-control:hover, html[data-theme="dark"] .dataTables_wrapper input:hover, html[data-theme="dark"] .dataTables_wrapper select:hover{ border-color:#4A5578 !important; }
html[data-theme="dark"] .form-control::placeholder{ color:#6F7A94; }
html[data-theme="dark"] select option{ background:var(--surface); color:var(--text); }
html[data-theme="dark"] .sx-sem-pick select option{ color:var(--text); }
html[data-theme="dark"] fieldset legend, html[data-theme="dark"] legend{ color:var(--text); border-color:var(--border); }
html[data-theme="dark"] input:-webkit-autofill{ -webkit-text-fill-color:var(--text); -webkit-box-shadow:0 0 0 40px var(--surface-2) inset !important; caret-color:var(--text); }

/* ตาราง / DataTables / แบ่งหน้า */
html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] table.dataTable thead th{ background:var(--surface-2) !important; }
html[data-theme="dark"] .table > tbody > tr:hover > td, html[data-theme="dark"] table.dataTable tbody tr:hover{ background:rgba(110,139,255,.08) !important; }
html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] table.dataTable tbody td{ color:var(--text); }
html[data-theme="dark"] table.dataTable tbody tr{ background-color:transparent; }
html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span{ background:var(--surface); border-color:var(--border); color:var(--text-2); }
html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ข้อความ/โค้ด/อื่นๆ ของ Bootstrap */
html[data-theme="dark"] .text-muted{ color:var(--muted) !important; }
html[data-theme="dark"] .text-primary{ color:var(--brand) !important; }
html[data-theme="dark"] .text-success{ color:var(--success) !important; }
html[data-theme="dark"] .text-danger{ color:var(--danger) !important; }
html[data-theme="dark"] .text-warning{ color:var(--warning) !important; }
html[data-theme="dark"] .text-info{ color:var(--info) !important; }
html[data-theme="dark"] hr{ border-top-color:var(--border); }
html[data-theme="dark"] code{ background:var(--surface-2); color:#FFB0C8; }
html[data-theme="dark"] pre{ background:var(--surface-2); color:var(--text); border-color:var(--border); }
html[data-theme="dark"] .progress, html[data-theme="dark"] .grp-bar, html[data-theme="dark"] .lg-bar{ background:var(--border); }
html[data-theme="dark"] .status-badge{ box-shadow:none; }
html[data-theme="dark"] .strip .cell:hover, html[data-theme="dark"] .strip .cell:focus-visible{ box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text); }
html[data-theme="dark"] .check-row:hover{ background:var(--surface-2); }

/* แจ้งเตือน / ป้ายสถานะ / กล่องโทนสี — ข้อความและขอบบนพื้นอ่อน */
html[data-theme="dark"] .alert-success{ color:var(--ok-ink) !important; border-color:var(--ok-line) !important; }
html[data-theme="dark"] .alert-danger{ color:var(--bad-ink) !important; border-color:var(--bad-line) !important; }
html[data-theme="dark"] .alert-warning{ color:var(--warn-ink) !important; border-color:var(--warn-line) !important; }
html[data-theme="dark"] .alert-info{ color:var(--info-ink) !important; border-color:var(--info-line) !important; }
html[data-theme="dark"] .alert a{ color:inherit; text-decoration:underline; }
html[data-theme="dark"] .status-badge.tone-success, html[data-theme="dark"] .std-overall.is-pass, html[data-theme="dark"] .miss-box.is-clear,
html[data-theme="dark"] .scan-result.is-ok, html[data-theme="dark"] .student-page .st-pill.st-check{ color:var(--ok-ink); border-color:var(--ok-line); }
html[data-theme="dark"] .status-badge.tone-warning{ background:var(--warning-50); color:var(--warn-ink); border-color:var(--warn-line); }
html[data-theme="dark"] .scan-result.is-late, html[data-theme="dark"] .student-page .st-pill.st-late, html[data-theme="dark"] .health-list li.tone-warning,
html[data-theme="dark"] .impersonate-bar{ color:var(--warn-ink); border-color:var(--warn-line); }
html[data-theme="dark"] .status-badge.tone-danger, html[data-theme="dark"] .std-overall.is-fail, html[data-theme="dark"] .miss-box, html[data-theme="dark"] .miss-chips li,
html[data-theme="dark"] .scan-result.is-absent, html[data-theme="dark"] .scan-result.is-err, html[data-theme="dark"] .student-page .st-pill.st-absent,
html[data-theme="dark"] .health-list li.tone-danger, html[data-theme="dark"] .sx-repair, html[data-theme="dark"] .ck-pending{ color:var(--bad-ink); border-color:var(--bad-line); }
html[data-theme="dark"] .miss-box.is-clear{ color:var(--ok-ink); border-color:var(--ok-line); }
html[data-theme="dark"] .ck-pending{ border-left-color:var(--danger); color:var(--text); }
html[data-theme="dark"] .status-badge.tone-info, html[data-theme="dark"] .scan-result.is-dup, html[data-theme="dark"] .student-page .st-pill.st-leave,
html[data-theme="dark"] .health-list li.tone-info{ color:var(--info-ink); border-color:var(--info-line); }
html[data-theme="dark"] .student-page .st-pill.st-sick{ color:#C9B6FF; border-color:#3E3170; }
html[data-theme="dark"] .miss-chips li{ background:var(--surface); }
html[data-theme="dark"] .sx-repair-text span{ color:#FF9C92; }
html[data-theme="dark"] .switch-btn[aria-pressed="true"]{ color:var(--ok-ink); }
html[data-theme="dark"] .update-bar{ background:var(--brand-50); border-color:var(--brand-100); color:var(--text); }
html[data-theme="dark"] .update-bar > .material-icons, html[data-theme="dark"] .upd-ver-num.is-new, html[data-theme="dark"] .upd-help summary{ color:var(--brand); }

/* หน้านักเรียน: สีช่องวันหยุด/วันที่ยังไม่ถึง */
html[data-theme="dark"] .student-page{ --st-holiday:#3A4560; --st-future:#232B44; --st-pending:#5F6B85; }
html[data-theme="dark"] .student-page .st-holiday{ background:var(--st-holiday) repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 2px,transparent 2px 5px); }

/* จอเล็ก/จอสัมผัส + โหมดประหยัดกราฟิก */
@media (max-width:1169px), (pointer:coarse){
  html[data-theme="dark"] body.theme-stdac{ background-attachment:scroll !important; }
  html[data-theme="dark"] .navbar.app-navbar{ background:rgba(20,26,46,.97) !important; }
}
html.perf-lite[data-theme="dark"] body.theme-stdac{ background:var(--bg) !important; }
html.perf-lite[data-theme="dark"] .navbar.app-navbar, html.perf-lite[data-theme="dark"] .sidebar{ background:var(--surface) !important; }
html.perf-lite[data-theme="dark"] .card, html.perf-lite[data-theme="dark"] .stat-card, html.perf-lite[data-theme="dark"] .quick-link, html.perf-lite[data-theme="dark"] .check-list,
html.perf-lite[data-theme="dark"] .grp-panel, html.perf-lite[data-theme="dark"] .sx-card, html.perf-lite[data-theme="dark"] .sx-sum, html.perf-lite[data-theme="dark"] .sx-panel,
html.perf-lite[data-theme="dark"] .scan-box, html.perf-lite[data-theme="dark"] .lg-card, html.perf-lite[data-theme="dark"] .lg-kpi, html.perf-lite[data-theme="dark"] .check-summary .sum-item{
  background:var(--surface) !important; box-shadow:0 1px 2px rgba(0,0,0,.4) !important; }

/* ปุ่มสลับธีม (stdac_theme_button) */
.app-theme-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 auto; border-radius:50%; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text-2); transition:background .15s, border-color .15s, color .15s; }
.app-theme-btn:hover{ background:var(--surface-2); border-color:var(--border-strong); color:var(--text); }
.app-theme-btn .material-icons{ font-size:21px; }
html[data-theme="dark"] .app-theme-btn .material-icons{ color:#FFD27A; }
@media (max-width:767px){ .app-theme-btn{ width:40px; height:40px; } }
@media print{ .app-theme-btn{ display:none !important; } }
/* พิมพ์: ใช้สีสว่างเสมอ */
@media print{ html[data-theme="dark"]{ color-scheme:light;
  --brand:#3B5BDB; --brand-700:#2C44B3; --brand-100:#DCE4FF; --brand-50:#EEF2FF; --bg:#fff; --surface:#fff; --surface-2:#F7F9FD;
  --text:#1A2233; --text-2:#465166; --muted:#5B667A; --border:#E5E9F2; --border-strong:#CBD2E0;
  --success:#1D7F52; --success-50:#E7F5EE; --danger:#C2261B; --danger-50:#FDECEA; --warning:#9A5B00; --warning-50:#FFF4E5; --info:#1F5FAE; --info-50:#E8F0FB; }
  html[data-theme="dark"] body{ background:#fff !important; color:#000; }
  html[data-theme="dark"] .card, html[data-theme="dark"] .table > thead > tr > th{ background:#fff !important; } }

/* โหมดมืด: ตัวอักษรบนพื้นสีทึบที่สว่างขึ้นในโหมดมืด → ใช้ตัวอักษรเข้ม */
html[data-theme="dark"] .skip-link{ color:var(--bg) !important; }
html[data-theme="dark"] .app-user-btn .avatar-ini{ color:#2B1400; }
html[data-theme="dark"] .btn.btn-info, html[data-theme="dark"] .label-success, html[data-theme="dark"] .label-danger, html[data-theme="dark"] .ck-pending-n,
html[data-theme="dark"] .rs-check .material-icons, html[data-theme="dark"] .rpc-list li.is-on .rpc-chk{ color:#0B1020 !important; }
/* =====================================================================
   แอปมือถือ SAM (body.in-app — main.php เมื่อ User-Agent มี STDACApp/)
   แถบเมนูล่าง หน้าหลัก/เช็คชื่อ/สรุปผล/เมนู · แผ่นเลือกประเภทเช็คชื่อ · แถบโหลดหน้า
   ===================================================================== */
body.in-app{ -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; }
body.in-app #main-content{ padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important; }
/* แถบบน: เมนู/เช็คชื่อ/RMS ย้ายไปแถบล่างและเมนูข้างแล้ว */
body.in-app .app-navbar .bars, body.in-app .app-navbar .app-check-btn, body.in-app .app-navbar .app-rms-btn{ display:none !important; }
body.in-app .app-footer{ margin-bottom:0; }

.app-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:1020; display:flex; align-items:stretch;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -6px 20px -12px rgba(23,32,64,.25); }
.app-tab{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px;
  margin:0; padding:4px 2px; border:0; background:none; border-radius:14px; font:inherit; font-size:12px; font-weight:600; line-height:1.2;
  color:var(--muted) !important; text-decoration:none !important; cursor:pointer; -webkit-user-select:none; user-select:none; }
.app-tab .material-icons{ font-size:24px; width:56px; height:30px; line-height:30px; text-align:center; border-radius:999px; transition:background .15s, color .15s; }
.app-tab.is-active{ color:var(--brand) !important; }
.app-tab.is-active .material-icons{ background:var(--brand-50); color:var(--brand); }
.app-tab:active .material-icons{ background:var(--brand-100); }
.app-tab:focus-visible{ outline:none; box-shadow:var(--focus); }
.app-tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* แผ่นเลือกประเภทเช็คชื่อ (bottom sheet) */
.app-sheet{ position:fixed; inset:0; z-index:1050; display:flex; align-items:flex-end; background:rgba(10,14,30,0); transition:background .2s; }
.app-sheet.is-open{ background:rgba(10,14,30,.45); }
.app-sheet[hidden]{ display:none; }
.app-sheet-panel{ width:100%; max-width:560px; margin:0 auto; padding:8px 16px calc(16px + env(safe-area-inset-bottom)); background:var(--surface);
  border-radius:22px 22px 0 0; box-shadow:var(--shadow-lg); transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.app-sheet.is-open .app-sheet-panel{ transform:none; }
.app-sheet-grip{ display:block; width:40px; height:4px; margin:4px auto 12px; border-radius:4px; background:var(--border-strong); }
.app-sheet h2{ font-size:16px; font-weight:700; color:var(--text); margin:0 4px 10px; }
.app-sheet-item{ display:flex; align-items:center; gap:14px; min-height:56px; padding:8px 12px; margin-bottom:8px; border-radius:14px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text) !important; font-weight:600; font-size:15.5px; text-decoration:none !important; }
.app-sheet-item > .material-icons:first-child{ width:40px; height:40px; line-height:40px; text-align:center; border-radius:12px; background:var(--brand-50); color:var(--brand); }
.app-sheet-item span{ flex:1 1 auto; }
.app-sheet-item .chev{ color:var(--muted); }
.app-sheet-item:active{ background:var(--brand-50); border-color:var(--brand-100); }
.app-sheet-cancel{ width:100%; min-height:48px; margin-top:4px; border:0; border-radius:14px; background:none; color:var(--muted); font:inherit; font-weight:600; }

/* แถบโหลดตอนเปลี่ยนหน้า */
.app-loadbar{ position:fixed; left:0; top:0; z-index:2000; height:3px; width:0; opacity:0; background:var(--grad); pointer-events:none; }
body.is-navigating .app-loadbar{ opacity:1; width:85%; transition:width 6s cubic-bezier(.1,.7,.1,1), opacity .1s; }

html[data-theme="dark"] .app-tabbar{ box-shadow:0 -6px 20px -10px rgba(0,0,0,.6); }
html.perf-lite .app-tabbar{ box-shadow:none; }
html.perf-lite .app-sheet-panel{ transition:none; }
@media (prefers-reduced-motion:reduce){ .app-sheet-panel, .app-sheet, body.is-navigating .app-loadbar{ transition:none; } }
@media print{ .app-tabbar, .app-sheet, .app-loadbar{ display:none !important; } }
/* หน้าที่เนื้อหาสั้นกว่าจอ (มือถือ background-attachment:scroll) — พื้นหลังไล่สีของ body ต้องยาวเต็มจอ ไม่ขาดครึ่งจอ */
body.theme-stdac{ min-height:100vh; }

/* =====================================================================
   หน้าเข้าสู่ระบบในแอปมือถือ SAM (authen.php → body.auth-app เมื่อ stdac_in_app())
   หัวสีแบรนด์ + แผ่นฟอร์มสีพื้น · ตามโหมดมืดของเครื่อง (หน้าล็อกอินไม่มีปุ่มสลับธีม)
   ===================================================================== */
body.auth-app{ background:var(--bg) !important; color:var(--text); display:flex; flex-direction:column; -webkit-tap-highlight-color:transparent; }
@media (prefers-color-scheme:dark){
  body.auth-app{ color-scheme:dark; --brand:#6E8BFF; --brand-700:#A9B9FF; --brand-100:#2C3768; --brand-50:#1B2246;
    --bg:#0B1020; --surface:#141A2E; --surface-2:#1A2139; --text:#E7EBF7; --text-2:#BAC3DA; --muted:#8E99B3; --border:#262F4A; --border-strong:#36415F;
    --danger:#FF7468; --danger-50:#341719; --warning:#F2B54C; --warning-50:#2E2410; }
  body.auth-app .form-control{ background:var(--surface-2) !important; color:var(--text) !important; border-color:var(--border-strong) !important; }
  body.auth-app .alert-danger{ background:var(--danger-50) !important; color:#FFADA5 !important; border-color:#6A2A2A !important; }
  body.auth-app .alert-warning{ background:var(--warning-50) !important; color:var(--warning) !important; border-color:#5A4515 !important; }
}
.aa-hero{ flex:0 0 auto; padding:36px 24px 76px; text-align:center; color:#fff; background:var(--grad); }
.aa-logo{ display:inline-flex; width:84px; height:84px; padding:10px; border-radius:24px; background:#fff; box-shadow:0 10px 28px rgba(20,24,70,.3); }
.aa-logo img{ width:100%; height:100%; object-fit:contain; }
.aa-hero h1{ margin:16px 0 4px; font-size:22px; font-weight:700; line-height:1.3; color:#fff; text-wrap:balance; }
.aa-hero p{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:15px; font-weight:500; color:rgba(255,255,255,.9); }
.aa-hero p .material-icons{ font-size:18px; color:#FFC285; }
.aa-sheet{ flex:1 0 auto; position:relative; width:100%; max-width:560px; margin:-44px auto 0; padding:28px 20px 24px;
  background:var(--surface); border-radius:26px 26px 0 0; box-shadow:0 -8px 30px -14px rgba(20,24,70,.35); }
.aa-sheet .auth-card{ max-width:none; }
.aa-sheet .auth-card h2{ font-size:22px; color:var(--text); }
.aa-sheet .auth-card .sub{ margin-bottom:20px; }
.aa-sheet .auth-card label{ color:var(--text-2); }
.aa-sheet .auth-row{ margin:2px 0 18px; }
.aa-version{ display:block; margin-top:18px; text-align:center; font-size:12px; color:var(--muted); }
/* วิธีเข้าสู่ระบบ: พับไว้ (ในแอปกดดูได้) */
details.login-guide{ margin-top:20px; padding:0; }
details.login-guide > summary{ list-style:none; display:flex; align-items:center; gap:8px; padding:13px 16px; margin:0; cursor:pointer; }
details.login-guide > summary::-webkit-details-marker{ display:none; }
details.login-guide > summary .chev{ margin-left:auto; transition:transform .15s; color:var(--brand); }
details.login-guide[open] > summary .chev{ transform:rotate(180deg); }
details.login-guide > .login-guide-row{ margin:0 16px; }
details.login-guide[open]{ padding-bottom:10px; }
details.login-guide > .login-guide-row:first-of-type{ border-top:1px dashed var(--brand-100); padding-top:10px; }

/* หน้านักเรียน: ปุ่มออกจากระบบ — จอแคบเหลือไอคอน (เดิมตัวหนังสือตัดเป็นแนวตั้ง) */
.st-logout{ white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
@media (max-width:600px){ .st-logout span{ display:none; } .st-logout{ width:44px; height:44px; padding:0 !important; justify-content:center; } }
/* หน้าเข้าสู่ระบบในแอป: เลือกสถานศึกษาใหม่ */
.aa-change{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin-top:12px; border-radius:14px;
  border:1px dashed var(--border-strong); color:var(--text-2) !important; font-weight:600; font-size:15px; text-decoration:none !important; }
.aa-change .material-icons{ font-size:20px; color:var(--brand); }
.aa-change:active{ background:var(--surface-2); }

/* =====================================================================
   กระดิ่งแจ้งเตือน (notify_bell — notify.fun.php) แถบบนของหน้าบุคลากรและหน้านักเรียน
   ===================================================================== */
.nt-wrap{ position:relative; flex:0 0 auto; }
.nt-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text-2); transition:background .15s, border-color .15s; }
.nt-btn:hover{ background:var(--surface-2); border-color:var(--border-strong); color:var(--text); }
.nt-btn:focus-visible{ outline:none; box-shadow:var(--focus); }
.nt-btn .material-icons{ font-size:22px; }
.nt-badge{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff;
  font-size:11.5px; font-weight:700; line-height:20px; text-align:center; box-shadow:0 0 0 2px var(--surface); }
.nt-badge[hidden]{ display:none; }
.nt-panel{ position:absolute; right:0; top:calc(100% + 10px); z-index:1060; width:380px; max-width:calc(100vw - 24px); max-height:min(70vh,560px);
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; text-align:left; }
.nt-panel[hidden]{ display:none; }
.nt-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 10px 18px; border-bottom:1px solid var(--border); }
.nt-head b{ font-size:16px; color:var(--text); }
.nt-close{ width:36px; height:36px; border:0; background:none; border-radius:10px; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.nt-close:hover{ background:var(--surface-2); color:var(--text); }
.nt-list{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px; }
.nt-item{ display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:12px; color:var(--text) !important; text-decoration:none !important; }
a.nt-item:hover{ background:var(--surface-2); }
.nt-item.is-new{ background:var(--brand-50); }
.nt-ic{ flex:0 0 auto; width:36px; height:36px; line-height:36px; text-align:center; border-radius:10px; background:var(--surface-2); color:var(--brand); font-size:20px; }
.nt-item.is-new .nt-ic{ background:var(--surface); }
.nt-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; font-size:13.5px; line-height:1.5; color:var(--text-2); }
.nt-txt b{ font-size:14.5px; color:var(--text); font-weight:600; }
.nt-txt small{ font-size:12px; color:var(--muted); }
.nt-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:0; padding:28px 12px; color:var(--muted); text-align:center; }
.nt-empty .material-icons{ font-size:36px; opacity:.6; }
@media (max-width:767px){
  .nt-btn{ width:40px; height:40px; }
  .nt-panel{ position:fixed; left:8px; right:8px; top:calc(var(--nav-h) + 6px); width:auto; max-width:none; max-height:calc(100vh - var(--nav-h) - 100px); }
}
@media print{ .nt-wrap{ display:none !important; } }