/*!
 * app.css — TJ Platform (เลเยอร์เฉพาะหน้า/โมดูล)
 * โหลด "หลัง" theme.css เสมอ · ใช้ token จาก theme.css ผ่าน var() เท่านั้น
 * กฎ: design-system อยู่ใน theme.css · เฉพาะหน้า/โมดูลอยู่ที่นี่ · ห้ามนิยาม token ซ้ำ
 * ================================================================ */

/* ========== AUTH / LOGIN (หน้าแรก) ========== */
.auth-page{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-split{ width:min(1060px,100%); height:min(620px,calc(100vh - 48px)); display:grid; grid-template-columns:1.05fr 1fr; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(15,23,42,.14); }
@media (max-width:767.98px){ .auth-page{ padding:0; } .auth-split{ width:100%; height:100vh; border-radius:0; box-shadow:none; grid-template-columns:1fr; } .auth-split .auth-brand{ display:none; } }

.auth-brand{
  position:relative; overflow:hidden; color:#fff;
  /* 3B · ฟ้าแบรนด์เรียบ — โทนเดียวกับ sidebar */
  background:linear-gradient(150deg, var(--brand-primary) 0%, #1E40AF 100%);
  padding:56px 48px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-brand > *{ position:relative; z-index:1; }
.auth-brand .brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700; font-size:1.25rem; }
.auth-brand .brand .logo{ width:40px; height:40px; border-radius:11px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.auth-brand h1{ font-family:var(--font-display); color:#fff; font-size:1.95rem; font-weight:600; line-height:1.3; margin:0 0 12px; }
.auth-brand .lead{ color:rgba(255,255,255,.86); font-size:.98rem; line-height:1.6; margin-bottom:24px; white-space:nowrap; }
.auth-brand .features{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
.auth-brand .features li{ display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.92); font-size:.9rem; }
.auth-brand .features li .fi{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth-brand .copyright{ color:rgba(255,255,255,.6); font-size:.75rem; }

.auth-form-wrap{ display:flex; align-items:center; justify-content:center; padding:44px 36px; }
.auth-form{ width:100%; max-width:380px; }
.auth-form h2{ font-family:var(--font-display); font-size:1.75rem; margin-bottom:4px; }
.auth-form .subtitle{ color:var(--text-muted); font-size:.9rem; margin-bottom:24px; }
.auth-form .btn{ width:100%; justify-content:center; }
.auth-form .help{ font-size:.82rem; color:var(--text-muted); margin-top:16px; text-align:center; }

/* badge ไอคอนเหนือหัวข้อ + ช่องกรอกมีไอคอนนำ + ปุ่มสลับรหัส */
.auth-icon-badge{ width:46px; height:46px; border-radius:12px; background:var(--brand-soft); color:var(--brand-primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px; }
.auth-field{ position:relative; }
.auth-field .auth-lead{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:1.05rem; pointer-events:none; }
.auth-field .form-control{ padding-left:40px; }
.auth-field:has(.auth-eye) .form-control{ padding-right:42px; }
.auth-field .auth-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:transparent; color:var(--text-muted); padding:4px 9px; cursor:pointer; line-height:1; }
.auth-field .auth-eye:hover{ color:var(--text-secondary); }

/* ========== หน้า list/ตาราง (master data — Task 3) ========== */
/* placeholder อ่อนลงนิดนึง: override theme.css (--text-muted #64748B) → #94A3B8 */
.form-control::placeholder, textarea.form-control::placeholder{ color:#94A3B8; opacity:1; }
.list-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--border-soft); }
.list-toolbar .form-control,.list-toolbar .form-select{ min-height:38px; }
.list-toolbar .search{ max-width:260px; }
.list-toolbar .count{ margin-left:auto; font-size:.82rem; color:var(--text-muted); }
.row-actions{ display:inline-flex; gap:6px; }
.row-actions .icon-btn{ width:34px; height:34px; border:1px solid var(--border); background:#fff; border-radius:var(--radius-sm); color:var(--text-secondary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.row-actions .icon-btn:hover{ background:var(--bg-soft); }
.row-actions .icon-btn.danger:hover{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }

/* ========== empty state ========== */
.empty-state{ text-align:center; padding:48px 24px; color:var(--text-muted); }
.empty-state .icon{ font-size:2.4rem; color:var(--border); margin-bottom:10px; }
.empty-state h3{ font-size:1.1rem; color:var(--text-secondary); margin-bottom:4px; }

/* ========== dashboard KPI grid (จัดวางเฉพาะหน้า) ========== */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.kpi-card{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.kpi-card .kpi-icon{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.kpi-trend{ display:inline-block; margin-top:8px; font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:var(--radius-pill); }
.kpi-trend.up{ background:var(--success-bg); color:var(--success); }
.kpi-trend.down{ background:var(--danger-bg); color:var(--danger); }

/* เพิ่มเลเยอร์เฉพาะหน้าอื่น ๆ ของแต่ละ Task ต่อท้ายส่วนนี้ */

/* ========== APP SHELL — กันตารางกว้างดัน grid + sidebar มือถือ (offcanvas) ========== */
.app-layout > .main{ min-width:0; }       /* กัน content/ตารางกว้างดัน grid ล้น */
.app-content{ min-width:0; }
.app-topbar .avatar{ cursor:pointer; }
/* offcanvas บนมือถือใช้ .app-sidebar เดิมเป็น body เพื่อรับสไตล์เมนู */
.offcanvas .app-sidebar{ border-right:none; }

/* ========== การ์ดที่จบด้วยตาราง — ให้เนื้อหาโค้งตามมุมการ์ด (กันมุมล่างเหลี่ยม) ========== */
.card{ overflow:hidden; }

/* ================================================================
   TASK 3h — sidebar gradient (3B) + ยุบ/ขยาย + ชุดตาราง
   (วางที่ app.css ตามกฎ: app-specific layer ทับ theme.css)
   ================================================================ */

/* ---- SIDEBAR: gradient ฟ้าแบรนด์ (3B) + เมนูโทนสว่างบนพื้นเข้ม ---- */
.app-sidebar{ background:linear-gradient(180deg, var(--brand-primary) 0%, #1E40AF 100%); border-right:none; }
.app-sidebar .brand{ color:#fff !important; }
.app-sidebar .brand .logo{ background:var(--accent); color:#fff; }
.app-sidebar .nav-section{ color:rgba(255,255,255,.5); }
.app-sidebar .nav-item{ color:rgba(255,255,255,.8); white-space:nowrap; }
.app-sidebar .nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.app-sidebar .nav-item.active{ background:rgba(255,255,255,.15); color:#fff; border-left-color:var(--accent); }
.app-sidebar .nav-item .count{ background:rgba(255,255,255,.22); color:#fff; }

/* offcanvas (มือถือ) พื้น gradient เดียวกัน */
#appSidebar.offcanvas{ background:linear-gradient(180deg, var(--brand-primary) 0%, #1E40AF 100%); color:#fff; width:240px; }
#appSidebar .offcanvas-header{ border-bottom:1px solid rgba(255,255,255,.12); }
#appSidebar .offcanvas-header .brand{ color:#fff; }
#appSidebar .offcanvas-header .brand .logo{ background:var(--accent); color:#fff; }
#appSidebar .btn-close{ filter:invert(1) grayscale(1) brightness(2); }
#appSidebar .offcanvas-body.app-sidebar{ background:transparent; }

/* ---- โหมดยุบ sidebar = icon-rail (เดสก์ท็อปเท่านั้น) ---- */
#sidebarToggle .bi{ transition:transform .15s ease; }
body.sidebar-collapsed #sidebarToggle .bi{ transform:rotate(180deg); }
@media (min-width:992px){
  body.sidebar-collapsed .app-layout{ grid-template-columns:68px 1fr; }
  body.sidebar-collapsed .app-sidebar .brand-text,
  body.sidebar-collapsed .app-sidebar .nav-item .label,
  body.sidebar-collapsed .app-sidebar .nav-section{ display:none; }
  body.sidebar-collapsed .app-sidebar .brand{ justify-content:center; padding:18px 0; }
  body.sidebar-collapsed .app-sidebar .nav-item{ justify-content:center; padding:11px 0; border-left-width:0; position:relative; }
  body.sidebar-collapsed .app-sidebar .nav-item i{ font-size:1.15rem; }
  body.sidebar-collapsed .app-sidebar .nav-item.active::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--accent); border-radius:0 3px 3px 0; }
}

/* ---- ตาราง: หัวฟ้าอ่อนแบรนด์ + zebra เทาจาง + hover ฟ้าอ่อน + เลขโมโนเทาเข้ม ---- */
/* ===== ชุดสี B — หัวการ์ดฟ้า + เนื้อตารางโทนกลาง (กลมกลืนทั้งระบบ) ===== */
/* หัวการ์ด = ขาว + หัวข้อฟ้า (จุดเกาะสายตา ไม่ชนกับ alert พื้นฟ้า) */
.card-header{ background:#fff; border-bottom-color:var(--border); color:var(--brand-primary); font-weight:600; display:flex; align-items:center; min-height:52px; }   /* แบบ B: หัวการ์ดทุกใบสูงเท่ากัน = เท่าใบที่มีช่องค้นหา (input 34px) */
.card-ico{ display:inline-flex; width:24px; height:24px; border-radius:7px; background:var(--brand-soft); color:var(--brand-primary); align-items:center; justify-content:center; font-size:.82rem; margin-right:8px; vertical-align:middle; flex:none; }
/* หัวการ์ดที่มีช่องค้นหาในตัว (ชื่อซ้าย + ค้นหาขวา) — input 34px; หัวการ์ดทุกใบ min-height เท่ากันแล้ว (ดู .card-header ด้านบน) */
.card-header-search{ justify-content:space-between; gap:12px; flex-wrap:wrap; }
.hsearch{ position:relative; width:280px; max-width:100%; }
.hsearch .bi-search{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:.95rem; pointer-events:none; }
.hsearch .form-control{ height:34px; min-height:34px; padding-left:33px; font-size:.875rem; background:var(--bs-body-bg); }
@media (max-width:575.98px){ .card-header-search .hsearch{ width:100%; } }
/* ปุ่มไอคอน "ล้าง" หน้าจัดนักเรียน: เทาเงียบ → hover แดงอ่อนเตือนล้างข้อมูล */
.btn-icon.btn-icon-clear{ --bs-btn-border-color:var(--border); --bs-btn-color:#64748B; --bs-btn-bg:#fff;
  --bs-btn-hover-color:#DC2626; --bs-btn-hover-border-color:#FCA5A5; --bs-btn-hover-bg:#FEF2F2;
  --bs-btn-active-color:#DC2626; --bs-btn-active-border-color:#FCA5A5; --bs-btn-active-bg:#FEF2F2; }
/* ปุ่มเรียง (จัดเลขที่): ปกติ ขาวขอบเทาไอคอนฟ้า → hover ฟ้าทึบไอคอนขาว (สืบทอด hover จาก .btn-icon) */
.btn-icon.btn-icon-sort{ --bs-btn-bg:#fff; --bs-btn-border-color:var(--border); --bs-btn-color:var(--brand-primary); }
/* ปุ่มบันทึก: ฟ้าเรียบ (สีเดียวกับปุ่มเพิ่มนักเรียน) ; เมื่อมีการแก้ไข = จุดส้มมุมขวาบน */
.btn-save-rolls{ position:relative; }
.btn-save-rolls .save-dot{ display:none; position:absolute; top:-4px; right:-4px; width:11px; height:11px; border-radius:50%; background:#F97316; border:2px solid #fff; }
.btn-save-rolls.is-dirty .save-dot{ display:block; }
/* ปุ่มส่งออก Excel (placeholder อนาคต): ไอคอนเขียว → hover เขียวทึบ */
.btn-icon.btn-icon-export{ --bs-btn-bg:#fff; --bs-btn-border-color:var(--border); --bs-btn-color:#16A34A;
  --bs-btn-hover-bg:#16A34A; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#16A34A;
  --bs-btn-active-bg:#15803D; --bs-btn-active-color:#fff; --bs-btn-active-border-color:#15803D; }
/* แถบเปลี่ยนสถานะหลายคน (หน้าจัดนักเรียน) — โผล่เมื่อมีการติ๊กเลือก */
.bulk-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;
  padding:9px 12px; background:var(--brand-soft); border:1px solid #DBEAFE; border-radius:10px; font-size:.9rem; }
.bulk-bar .bulk-count{ font-weight:600; color:var(--brand-hover); display:inline-flex; align-items:center; gap:6px; }
.bulk-bar .btn-link{ text-decoration:none; }
/* กรอบตารางธรรมดาให้ดูเหมือนตาราง Grid.js (กรอบมนเว้นขอบ + แถบล่าง) — หน้าจัดนักเรียน */
.tbl-frame{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
/* ตารางในกรอบ (roster) ใช้สัดส่วนคงที่ → คอลัมน์ไม่ยืดจนเป็นช่องโหว่บนจอกว้าง ; min-width กันบีบ (เลื่อนแนวนอนแทน) */
.tbl-frame table.table{ table-layout:fixed; min-width:680px; }
.tbl-frame.has-foot{ border-bottom:none; border-radius:12px 12px 0 0; }
.tbl-frame-foot{ border:1px solid var(--border); border-radius:0 0 12px 12px;
  padding:10px 14px; font-size:.85rem; color:var(--text-secondary);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
/* ปุ่มแบ่งหน้า (ทำเอง) ให้หน้าตาเหมือน .gridjs-pagination ของหน้าอื่น */
.rfoot-pages{ display:inline-flex; }
.rfoot-pages button{ background:#fff; border:1px solid var(--border); color:#334155; padding:6px 12px;
  font-size:.85rem; line-height:1.2; cursor:pointer; margin-left:-1px; }
.rfoot-pages button:first-child{ border-radius:8px 0 0 8px; margin-left:0; }
.rfoot-pages button:last-child{ border-radius:0 8px 8px 0; }
.rfoot-pages button:hover:not(:disabled){ background:var(--brand-soft); }
.rfoot-pages button.active{ background:var(--brand-primary); color:#fff; border-color:var(--brand-primary); font-weight:600; }
.rfoot-pages button:disabled{ background:var(--bg-soft); color:#CBD5E1; cursor:default; }
/* หัวตาราง = เทานวล (style A: ให้ตรงกับตาราง Grid.js หน้านักเรียน) */
.table thead th{ background:#F8FAFC; color:var(--text-secondary); border-bottom:1px solid var(--border); text-transform:none; letter-spacing:0; font-size:.8rem; }
/* ไม่ใช้ zebra (ตารางมีของเยอะ ใส่แล้วรก) — ใช้เส้นคั่นแถว + hover ฟ้าแทน */
.table{ --bs-table-bg:var(--bg-surface); --bs-table-hover-bg:var(--brand-soft); }   /* แถวขาว (กันธีมที่ตั้ง body-bg เทา) + hover ฟ้า */
.table > tbody > tr > td{ border-bottom:1px solid #F1F5F9; }            /* style A: เส้นคั่นแถวบาง */
.table > tbody > tr:last-child > td{ border-bottom:none; }              /* แถวสุดท้ายไม่มีเส้น -> การ์ดมนล่างสะอาด */
code{ color:#334155; background:transparent; }   /* เลขประจำตัว ฯลฯ เทาเข้มโมโน (ทับชมพู Bootstrap) */

/* จุด3 — ช่องกรอกหน้า login ขาวสะอาด + เส้นขอบบาง (ลบพื้นฟ้าจาก autofill ของเบราว์เซอร์) */
.auth-form .form-control{ background:#fff; }
.auth-form .form-control:-webkit-autofill,
.auth-form .form-control:-webkit-autofill:hover,
.auth-form .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text-primary);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-in-out 0s;
}

/* ลิงก์ในหน้า login (เช่น ลืมรหัสผ่าน) */
.auth-link{ color:var(--brand-primary); font-weight:500; text-decoration:none; }
.auth-link:hover{ text-decoration:underline; }

/* แบรนด์ย่อสำหรับมือถือ (แผงซ้ายถูกซ่อนตอนย่อจอ) */
.auth-mobile-brand{ display:flex; align-items:center; gap:11px; margin-bottom:24px; }
.auth-mobile-brand .logo{ width:42px; height:42px; border-radius:11px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex:none; }
.auth-mobile-brand .name{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--text-primary); line-height:1.2; }
.auth-mobile-brand .tagline{ font-size:.82rem; color:var(--text-secondary); }
@media (max-width:767.98px){
  .auth-icon-badge{ display:none; }          /* เลี่ยงไอคอนซ้อนกับโลโก้แบรนด์ */
  .auth-form-wrap{ padding:32px 24px; }
}

/* ปุ่มไอคอนในตาราง = outline: ขอบสี พื้นโปร่ง (airy) · hover เติมพื้นทึบ + ไอคอนขาว */
.btn-icon{ --bs-btn-border-color:#2563EB; --bs-btn-bg:transparent; --bs-btn-color:#2563EB;
  --bs-btn-hover-bg:#2563EB; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#2563EB;
  --bs-btn-active-bg:#1E40AF; --bs-btn-active-color:#fff; --bs-btn-active-border-color:#1E40AF; }
.btn-icon.btn-icon-danger{ --bs-btn-border-color:#DC2626; --bs-btn-bg:transparent; --bs-btn-color:#DC2626;
  --bs-btn-hover-bg:#DC2626; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#DC2626;
  --bs-btn-active-bg:#B91C1C; --bs-btn-active-color:#fff; --bs-btn-active-border-color:#B91C1C; }

/* แบบ 2: เซลล์ "จัดการ" ทำไอคอนรองให้จาง (ghost) ลดความแน่น — ลบยังแดงเด่น ; ปุ่ม ✓ คอมมิตคงขอบไว้ */
/* พื้น hover ปุ่มเข้มกว่าไฮไลท์แถว (brand-soft) เพื่อไม่ให้กลืนกันตอนชี้เมาส์ */
.col-actions .btn-icon{ --bs-btn-border-color:transparent; --bs-btn-bg:transparent; --bs-btn-color:#94A3B8;
  --bs-btn-hover-bg:#DBEAFE; --bs-btn-hover-color:var(--brand-primary); --bs-btn-hover-border-color:transparent;
  --bs-btn-active-bg:#BFDBFE; --bs-btn-active-color:var(--brand-primary); --bs-btn-active-border-color:transparent; }
.col-actions .btn-icon.btn-icon-danger{ --bs-btn-color:#DC2626; --bs-btn-hover-bg:#FBDADA; --bs-btn-hover-color:#B91C1C;
  --bs-btn-active-bg:#F8C4C4; --bs-btn-active-color:#B91C1C; }

/* แก้บั๊กมือถือ: ธีมมี .app-sidebar{display:none} ใต้ 992px ซึ่งไปซ่อน "เนื้อหาเมนู" ใน offcanvas ด้วย -> บังคับโชว์เฉพาะใน offcanvas */
@media (max-width:991.98px){
  #appSidebar .offcanvas-body.app-sidebar{ display:block !important; }
}

/* footer โหมดแอป (แบบ A) — เส้นคั่นบน ขอบเขตชัด ดันติดล่างจอเสมอ */
.app-layout > .main{ display:flex; flex-direction:column; min-height:100vh; }
.app-content{ flex:1 0 auto; }
.app-footer{ flex-shrink:0; border-top:1px solid #DBEAFE; padding:14px 24px; text-align:center;
  color:#475569; font-size:.82rem; background:var(--brand-soft); line-height:1.7; }
.app-footer .foot-l1{ font-weight:500; }
.app-footer .foot-l2{ color:#64748B; font-size:.78rem; }

/* ปุ่มเมนูมือถือ — แบรนด์ ฟ้าอ่อน มน ๆ แตะง่าย */
.app-topbar .menu-btn{ border:none; background:var(--brand-soft); color:var(--brand-primary);
  width:40px; height:40px; border-radius:11px; font-size:1.25rem; }
.app-topbar .menu-btn:hover, .app-topbar .menu-btn:active{ background:var(--brand-light); color:var(--brand-primary); }

/* โลโก้แบบ B (ส้มไล่เฉด + เงานุ่ม) ใช้ทุกที่ */
.app-sidebar .brand .logo,
#appSidebar .offcanvas-header .brand .logo,
.auth-brand .brand .logo,
.auth-mobile-brand .logo{
  background:linear-gradient(135deg, #FB923C 0%, #F97316 55%, #EA580C 100%) !important;
  box-shadow:0 3px 8px rgba(249,115,22,.32); color:#fff;
}
/* แก้หัว offcanvas มือถือ: เดิมโลโก้ไม่มีขนาด เลยแคบ/ไม่เป็นทรง — จัด flex + กำหนดขนาดคงที่ */
#appSidebar .offcanvas-header{ padding:16px 18px; }
#appSidebar .offcanvas-header .brand{ display:flex; align-items:center; gap:10px; margin:0;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff; }
#appSidebar .offcanvas-header .brand .logo{ width:34px; height:34px; border-radius:10px; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }

/* ป้ายบทบาทมุมขวาบน (ต่อท้ายชื่อ) — สีตามบทบาท */
.role-badge{ font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:999px; line-height:1.5;
  background:var(--brand-soft); color:var(--brand-primary); white-space:nowrap; }
.role-badge.role-teacher{ background:#DCFCE7; color:#15803D; }
.role-badge.role-student{ background:#E2E8F0; color:#475569; }

/* ป้ายบอกภาคเรียน — pill ฟ้าอ่อน วางมุมขวาแถวหัวข้อ (เหมือนกันทุกหน้า) */
.term-pill{ display:inline-flex; align-items:center; gap:5px; background:var(--brand-soft); color:var(--brand-primary);
  border:1px solid #DBEAFE; font-size:.8rem; font-weight:600; padding:5px 12px; border-radius:999px; white-space:nowrap; }

/* ข้อ 4: ป้ายเทาให้เป็นพาสเทลนวล (ไม่เทาทึบหนัก) เพื่อโทนป้ายสม่ำเสมอ */
.badge.text-bg-secondary{ background:#E2E8F0 !important; color:#475569 !important; }

/* คั่นกลุ่มวันที่ เริ่ม | สิ้นสุด ในฟอร์มภาคเรียน (เฉพาะจอ md ขึ้นไป) */
@media (min-width: 768px){ .divider-start-md{ border-left:1px solid var(--border); } }

/* ===== Thai date picker (โชว์ พ.ศ. เก็บ ค.ศ.) ===== */
.dpx{ position:relative; }
.dpx-field{ width:100%; display:flex; align-items:center; gap:8px; background:var(--bs-body-bg); border:1px solid var(--border);
  border-radius:10px; padding:9px 12px; font-size:15px; color:#1E293B; cursor:pointer; text-align:left; line-height:1.4; }
.dpx-field:hover{ border-color:#CBD5E1; }
.dpx-field:focus-visible{ outline:none; border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.dpx-field .bi-calendar3{ color:var(--brand-primary); font-size:16px; }
.dpx-text{ flex:1; }
.dpx-text.dpx-ph{ color:#94A3B8; }
.dpx-caret{ color:#94A3B8; font-size:11px; }
.dpx-pop{ position:fixed; z-index:1080; width:300px; max-width:min(300px,calc(100vw - 24px));
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 32px rgba(2,6,23,.12); padding:12px; }
.dpx-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.dpx-nav{ width:32px; height:32px; border:none; background:transparent; border-radius:9px; color:var(--brand-primary);
  font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dpx-nav:hover{ background:var(--brand-soft); }
.dpx-title{ font-family:'Kanit',sans-serif; font-weight:600; font-size:15px; color:#1E293B; border:none; background:transparent;
  border-radius:8px; padding:5px 10px; cursor:pointer; }
.dpx-title:hover{ background:var(--brand-soft); color:var(--brand-primary); }
.dpx-dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:3px; }
.dpx-dow span{ text-align:center; font-size:11.5px; color:#94A3B8; font-weight:600; padding:3px 0; }
.dpx-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.dpx-grid.my{ grid-template-columns:repeat(3,1fr); gap:6px; }
.dpx-day{ position:relative; width:36px; height:36px; margin:0 auto; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:50%; font-size:13.5px; color:#1E293B; cursor:pointer; padding:0; }
.dpx-day:hover{ background:var(--brand-soft); }
.dpx-day.other{ color:#CBD5E1; }
.dpx-day.today{ color:var(--brand-primary); font-weight:600; box-shadow:inset 0 0 0 1.5px var(--brand-primary); }
.dpx-day.today.sel{ color:#fff; box-shadow:none; }
.dpx-day.sel{ background:var(--brand-primary); color:#fff; font-weight:600; }
.dpx-cell{ height:42px; border:none; background:transparent; border-radius:9px; font-size:13.5px; color:#1E293B; cursor:pointer; }
.dpx-cell:hover{ background:var(--brand-soft); }
.dpx-cell.today{ color:var(--brand-primary); font-weight:600; }
.dpx-cell.sel{ background:var(--brand-primary); color:#fff; font-weight:600; }
.dpx-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid #F1F5F9; }
.dpx-today{ border:none; background:transparent; color:var(--brand-primary); font-size:13px; font-weight:600; cursor:pointer; padding:5px 9px; border-radius:8px; }
.dpx-today:hover{ background:var(--brand-soft); }
@media (max-width:575.98px){ .dpx-day{ width:40px; height:40px; } .dpx-pop{ width:min(320px,calc(100vw - 24px)); } }

/* คอลัมน์ตารางแบบบีบพอดีเนื้อหา (ใช้กับคอลัมน์สั้น/ป้าย/ไอคอน เพื่อให้คอลัมน์ข้อความกินที่ว่างแทน) */
.col-tight{ width:1%; white-space:nowrap; }

/* ===== Grid.js ให้เข้าธีม (ตารางนักเรียน ฯลฯ) ===== */
.gridjs-wrapper{ box-shadow:none; border:1px solid var(--border); border-bottom:none; border-radius:12px 12px 0 0; overflow:hidden; }
table.gridjs-table{ border:none; }
th.gridjs-th{ background:#F8FAFC; color:var(--text-secondary); font-weight:600; border:none; border-bottom:1px solid var(--border);
  padding:11px 12px; font-size:.85rem; vertical-align:middle; }
.gridjs-th-content{ white-space:nowrap; }
th.gridjs-th-sort:hover{ background:var(--bg-soft); }
td.gridjs-td{ background:#fff; color:#1E293B; border:none; border-bottom:1px solid #F1F5F9; padding:9px 12px; vertical-align:middle; }
tr.gridjs-tr:last-child td.gridjs-td{ border-bottom:none; }
tr.gridjs-tr:hover td.gridjs-td{ background:var(--brand-soft); }
.gridjs-search{ float:right; margin-bottom:10px; }
input.gridjs-input{ border:1px solid var(--border); border-radius:8px; padding:8px 12px; min-width:240px; font-size:14px; box-shadow:none; }
input.gridjs-input:focus{ border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); outline:none; }
.gridjs-pagination{ clear:both; color:var(--text-secondary); font-size:.85rem; }
.gridjs-pagination .gridjs-pages button{ background:#fff; border:1px solid var(--border); color:#334155; padding:6px 12px; }
.gridjs-pagination .gridjs-pages button:hover{ background:var(--brand-soft); }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage{ background:var(--brand-primary); color:#fff; border-color:var(--brand-primary); font-weight:600; }
.gridjs-pagination .gridjs-pages button:disabled{ background:var(--bg-soft); color:#CBD5E1; }
/* จัดกลางคอลัมน์ 3+ (เพศ..จัดการ) ; รหัส/ชื่อ ชิดซ้าย */
th.gridjs-th:nth-child(n+3) .gridjs-th-content{ float:none; text-align:center; width:auto; }
td.gridjs-td:nth-child(n+3){ text-align:center; }
/* (prefix grid) คอลัมน์ "อายุ" ที่กดเรียงได้ → ชิดซ้ายเหมือนเลขนักเรียน/ชื่อ (ลูกศรเข้าที่ ไม่เพี้ยน) */
#prefixGrid th.gridjs-th:nth-child(3) .gridjs-th-content{ float:left; text-align:left; width:calc(100% - 15px); }
#prefixGrid td.gridjs-td:nth-child(3){ text-align:left; }
@media (max-width:575.98px){ .gridjs-search{ float:none; } input.gridjs-input{ min-width:0; width:100%; } }
@media (max-width:991.98px){ .gridjs-wrapper{ overflow-x:auto; } table.gridjs-table{ min-width:700px; } }

/* บีบกลุ่มไอคอนจัดการใน Grid.js (เดสก์ท็อป) — กระชับแต่ไม่เล็กจนเกินไป */
.gridjs-td .col-actions{ display:inline-flex; align-items:center; gap:4px; }
.gridjs-td .col-actions form{ margin:0; display:inline-flex; }
.col-actions .btn-icon{ padding:.35rem .45rem; }

/* ===== มือถือ + แท็บเล็ต (≤991.98px = จุดที่แอปสลับเป็นเลย์เอาต์ offcanvas): เป้าแตะใหญ่/ชัดขึ้น — เดสก์ท็อป ≥992px ไม่กระทบ ===== */
@media (max-width:991.98px){
  /* ปุ่มทุกตัวสูงพอแตะ + จัดกึ่งกลางแนวตั้ง */
  .btn{ min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
  /* ไอคอนคอลัมน์จัดการ: 40×40 + ห่างขึ้น + สีเข้มขึ้น (ghost จางอ่าน/กดยากบนทัช) */
  .col-actions .btn-icon{ --bs-btn-color:#475569; min-width:40px; min-height:40px; padding:.4rem; }
  .gridjs-td .col-actions{ gap:8px; }
  .tbl-frame .col-actions{ gap:8px; }
  /* roster: เผื่อความกว้างให้ไอคอน 40px×3 ในคอลัมน์จัดการ (เลื่อนแนวนอนแทนบีบ) */
  .tbl-frame table.table{ min-width:900px; }
  /* ลด padding เซลล์เล็กน้อยให้ไอคอน 40px พอดีคอลัมน์ */
  td.gridjs-td, th.gridjs-th{ padding-left:10px; padding-right:10px; }
}

/* footer (แบ่งหน้า) ต่อเป็นกล่องเดียวกับตาราง: มนเฉพาะมุมล่าง */
.gridjs-footer{ border:1px solid var(--border); border-radius:0 0 12px 12px; padding:10px 14px; box-shadow:none; }

/* ===== years.php: ฟอร์มแก้ไข + ตารางไม่มีแบ่งหน้า ===== */
/* ช่องล็อก (อ่านอย่างเดียว) ในฟอร์มแก้ไข — เทาเข้มกว่าช่องแก้ได้ + ไอคอนกุญแจ */
.input-locked{ min-height:42px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-soft); color:var(--text-secondary); padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.9rem; }
.input-locked .bi-lock-fill{ font-size:.82rem; color:var(--text-muted); }
/* ปุ่มจิ๋ว (เช่น ตั้งเป็นปัจจุบัน) ไม่ให้ข่มแบดจ์ */
.btn-xs{ --bs-btn-padding-y:.2rem; --bs-btn-padding-x:.6rem; --bs-btn-font-size:.78rem; }
/* ตาราง Grid.js ที่ปิดแบ่งหน้า (ไม่มี footer) -> มุมมนครบ 4 มุม + เส้นล่าง */
.grid-flat .gridjs-wrapper{ border-bottom:1px solid var(--border); border-radius:12px; overflow:hidden; }
@media (max-width:767.98px){ .grid-flat .gridjs-wrapper{ overflow-x:auto; } }

/* ตารางห้องเรียน: ทุกคอลัมน์เป็นโค้ดสั้น -> จัดกึ่งกลางทั้งหมด ดูสมดุล */
.grid-rooms td.gridjs-td{ text-align:center; }
.grid-rooms th.gridjs-th .gridjs-th-content{ float:none; text-align:center; width:auto; }