/* ==================================================================
   CEM — ชั้นปรับปรุงหน้าตาระบบหลังบ้าน
   ------------------------------------------------------------------
   โหลดเป็นไฟล์สุดท้ายใน header.php จึงทับค่าของธีม Mazer ได้โดยไม่ต้องแก้
   ไฟล์ธีมเดิม (app.css เป็นไฟล์ที่ถูกบีบบรรทัดเดียว แก้แล้วตามรอยไม่ได้)

   คงตัวตนเดิมของระบบไว้ (น้ำเงินกรมท่า มจพ.) แต่รื้อสามอย่างที่ทำให้
   หน้าตาดูเก่าและอ่านยาก:
     1. ตัวอักษร — ฟอนต์เดิมไม่เคยโหลดสำเร็จ และระยะบรรทัดไทยต่ำเกินไป
     2. ระยะและลำดับชั้น — การ์ดแบน ช่องกรองบีบจนคำไทยตัดบรรทัดกลางคำ
     3. ตาราง — เนื้อหาหลักของระบบนี้ แต่อ่านยากที่สุด

   หมายเหตุภาษาไทย: สคริปต์ไทยมีสระบน/ล่างและวรรณยุกต์ซ้อนสองชั้น
   ระยะบรรทัด 1.5 แบบละตินทำให้วรรณยุกต์บรรทัดล่างชนสระล่างบรรทัดบน
   ที่นี่จึงใช้ 1.75-1.85 สำหรับเนื้อความ และไม่ถ่างอักษร (letter-spacing: 0)
   เพราะภาษาไทยไม่มีช่องว่างระหว่างคำ การถ่างทำลายการจับกลุ่มคำ
   ================================================================== */

:root {
  /* สี — ไล่จากหมึกเข้มไปอ่อน ไม่ใช้เทากลางที่ไม่มีเจ้าของ */
  --cem-ink:        #16203c;
  --cem-ink-2:      #44507a;
  --cem-ink-3:      #59648a;   /* เข้มขึ้นจาก #6b769b ซึ่งได้แค่ 4.11:1 บนพื้นหน้า ต่ำกว่าเกณฑ์ 4.5:1 */
  --cem-canvas:     #f3f5fa;
  --cem-surface:    #ffffff;
  --cem-line:       #e2e7f1;
  --cem-line-soft:  #eef1f7;

  --cem-navy:       #25396f;
  --cem-accent:     #3452c4;
  --cem-accent-ink: #1e3383;
  --cem-accent-bg:  #eaefff;

  --cem-ok:         #17794f;
  --cem-ok-bg:      #e3f6ec;
  --cem-warn:       #8a5800;
  --cem-warn-bg:    #fdf0d5;
  --cem-danger:     #a3232f;
  --cem-danger-bg:  #fdeaec;

  /* ขนาดตัวอักษร — สเกลมาตรฐานของ Bootstrap 5 ฐาน 1rem = 16px
     ($font-size-base: 1rem · h6 1rem · h5 1.25 · h4 1.5 · h3 1.75 · h2 2)
     ของเดิมตั้งฐานไว้ 15px แล้วไล่ลงไปถึง 13px ซึ่งเล็กกว่าที่ธีมออกแบบไว้
     ทุกระดับ ตัวอักษรไทยมีสระบน/ล่างและวรรณยุกต์ซ้อนอยู่แล้ว
     จึงต้องการขนาดไม่น้อยกว่าอักษรละติน ไม่ใช่เล็กกว่า */
  --cem-fs-xs:   0.875rem;    /* 14px — ป้ายสถานะ หัวตาราง ข้อความช่วย ($small-font-size) */
  --cem-fs-sm:   0.9375rem;   /* 15px — ป้ายกำกับช่อง breadcrumb ข้อความรอง */
  --cem-fs-base: 1rem;        /* 16px — เนื้อความ เซลล์ตาราง ช่องกรอก ($font-size-base) */
  --cem-fs-md:   1.125rem;    /* 18px — หัวการ์ด */
  --cem-fs-lg:   1.25rem;     /* 20px — หัวหน้าต่างซ้อน หัวข้อย่อย (h5) */
  --cem-fs-xl:   1.5rem;      /* 24px — หัวข้อในเนื้อการ์ด (h4) */
  --cem-fs-2xl:  1.75rem;     /* 28px — ชื่อหน้า (h3) */
  --cem-fs-3xl:  2rem;        /* 32px — ตัวเลขสรุป (h2) */

  /* ระยะ */
  --cem-r-sm: 8px;
  --cem-r:    12px;
  --cem-r-lg: 16px;

  /* เงา — มีทั้งระยะเยื้องและความฟุ้ง ไม่ใช่วงแสงรอบตัว */
  --cem-shadow-1: 0 1px 2px rgba(22, 32, 60, .06), 0 2px 8px rgba(22, 32, 60, .05);
  --cem-shadow-2: 0 2px 4px rgba(22, 32, 60, .07), 0 10px 24px rgba(22, 32, 60, .08);
  --cem-shadow-3: 0 8px 16px rgba(22, 32, 60, .10), 0 24px 48px rgba(22, 32, 60, .14);
}

/* ---------- ตัวอักษร ---------------------------------------------- */

body {
  font-family: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;               /* = $font-size-base ของ Bootstrap */
  line-height: 1.8;              /* พื้นขั้นต่ำของเนื้อความไทย (Bootstrap ตั้ง 1.5 ซึ่งวรรณยุกต์ชนกัน) */
  letter-spacing: 0;
  color: var(--cem-ink);
  background-color: var(--cem-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.card-title, .modal-title {
  font-family: 'Kanit', system-ui, sans-serif;
  letter-spacing: 0;
  color: var(--cem-ink);
}

h1, h2, h3 { line-height: 1.35; font-weight: 600; }
h4, h5, h6 { line-height: 1.5;  font-weight: 600; }

/* ให้หัวข้อทุกระดับอยู่ในสเกลเดียวกัน ธีมเดิมตั้ง h4 ไว้ 1.2rem ตัวหนา
   ส่วนเนื้อหาหน้าเดิมใช้ h4 เป็นหัวข้อย่อยในเนื้อความด้วย จึงต้องไม่ใหญ่เกินชื่อหน้า */
.card .card-header h4,
.card .card-title        { font-size: var(--cem-fs-md); font-weight: 600; }
#main-content .card-body h4 { font-size: var(--cem-fs-xl); font-weight: 600; margin-bottom: .5rem; }
#main-content .card-body h5 { font-size: var(--cem-fs-lg); font-weight: 600; }
#main-content .card-body h6 { font-size: var(--cem-fs-base); font-weight: 600; }
#main-content p, #main-content li { font-size: var(--cem-fs-base); }
/* Bootstrap ใช้ .text-muted เป็นยูทิลิตีสีอย่างเดียว ไม่ย่อขนาด — ย่อแค่ <small> */
#main-content small { font-size: var(--cem-fs-sm); }

.page-heading h3 { font-size: var(--cem-fs-2xl); font-weight: 600; margin-bottom: .25rem; }

/* ตัวเลขต้องเรียงตรงกันในคอลัมน์ ไม่ใช่กว้างไม่เท่ากันตามรูปเลข */
table, .cem-num, td, th,
input[type="text"], input[type="number"], .form-control, .form-select {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- พื้นผิวของเบราว์เซอร์ที่ธีมไม่ได้แตะ -------------------- */

::selection { background: var(--cem-accent); color: #fff; }
html { scrollbar-color: #c3cbdd var(--cem-canvas); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--cem-canvas); }
*::-webkit-scrollbar-thumb {
  background: #c3cbdd; border-radius: 99px; border: 3px solid var(--cem-canvas);
}
*::-webkit-scrollbar-thumb:hover { background: #a7b2ca; }

input, textarea, select { caret-color: var(--cem-accent); }

:focus-visible {
  outline: 2px solid var(--cem-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus, .form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 3px rgba(52, 82, 196, .18);
  border-color: var(--cem-accent);
}

/* ---------- โครงหน้า ---------------------------------------------- */

#main-content { padding: 1.75rem 2rem 3rem; }
.page-heading { margin: 0 0 1.5rem; }

.breadcrumb {
  background: transparent; padding: 0; margin: 0;
  font-size: var(--cem-fs-sm); color: var(--cem-ink-3);
}
.breadcrumb a { color: var(--cem-ink-3); }
.breadcrumb a:hover { color: var(--cem-accent); }
.breadcrumb-item.active { color: var(--cem-ink-2); }

/* ---------- แถบเมนูข้าง -------------------------------------------- */

.sidebar-wrapper {
  border-right: 1px solid var(--cem-line);
  background: var(--cem-surface);
}
.sidebar-wrapper .sidebar-header { padding: 1.5rem 1.5rem 0.75rem; }
.sidebar-wrapper .menu { margin-top: 1rem; padding: 0 1rem 2rem; font-weight: 400; }

.sidebar-wrapper .menu .sidebar-title {
  background: transparent;
  color: var(--cem-ink-3);
  font-size: var(--cem-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;         /* ข้อความละติน/ตัวย่อสั้น ๆ ถ่างได้ */
  text-transform: none;
  padding: 0 .75rem;
  margin: 1.5rem 0 .5rem;
}

.sidebar-wrapper .menu .sidebar-link {
  font-size: var(--cem-fs-base);
  /* บางรายการยาวจนขึ้นสองบรรทัด ("รายชื่อผู้สมัคร (รอบบุคลากร)")
     ระยะ 1.5 ทำให้วรรณยุกต์บรรทัดล่างชนสระของบรรทัดบน */
  line-height: 1.65;
  font-weight: 400;
  padding: .55rem .75rem;
  border-radius: var(--cem-r-sm);
  color: var(--cem-ink-2);
  gap: .25rem;
}
.sidebar-wrapper .menu .sidebar-link span { margin-left: .75rem; }
.sidebar-wrapper .menu .sidebar-link i { color: var(--cem-ink-3); font-size: 1rem; }
.sidebar-wrapper .menu .sidebar-link:hover {
  background: var(--cem-line-soft);
  color: var(--cem-ink);
}
.sidebar-wrapper .menu .sidebar-item { margin-top: .125rem; }
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link {
  background: var(--cem-accent-bg);
  color: var(--cem-accent-ink);
  font-weight: 500;
}
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link i,
.sidebar-wrapper .menu .sidebar-item.active .sidebar-link span { color: var(--cem-accent-ink); }

/* ---------- แถบบน -------------------------------------------------- */

.navbar.navbar-header {
  height: auto;
  padding: .875rem 2rem;
  background: var(--cem-surface);
  border-bottom: 1px solid var(--cem-line);
}

/* ---------- การ์ด --------------------------------------------------- */

.card {
  margin-bottom: 1.5rem;
  border: 1px solid var(--cem-line);
  border-radius: var(--cem-r);
  box-shadow: var(--cem-shadow-1);
  background: var(--cem-surface);
}
.card .card-header {
  padding: 1.25rem 1.5rem;
  background: transparent;
  border-bottom: 1px solid var(--cem-line-soft);
}
.card .card-header:last-child { border-bottom: none; }
.card .card-body { padding: 1.5rem; }
.card .card-header ~ .card-body { padding-top: 1.25rem; }

/* การ์ดตัวเลขสรุป — ป้ายกำกับไม่ใช่หัวข้อของเอกสาร จึงไม่ใช้แท็ก h
   (โปรแกรมอ่านหน้าจอไล่หัวข้อเพื่อกระโดดข้ามส่วน ป้ายพวกนี้ทำให้สารบัญรก) */
.cem-stat-label {
  font-size: var(--cem-fs-sm); font-weight: 500; line-height: 1.6;
  color: var(--cem-ink-3); margin-bottom: .125rem;
}
.cem-stat-value {
  font-size: var(--cem-fs-3xl); font-weight: 600; line-height: 1.35;
  margin-bottom: 0; color: var(--cem-ink);
}
/* ขนาดนี้ยังนับเป็นเนื้อความ ไม่ใช่ตัวเลขใหญ่ จึงต้องใช้ระยะบรรทัดของเนื้อความไทย */
.cem-stat-value-sm { font-size: var(--cem-fs-lg); line-height: 1.6; }

.cem-section-title {
  font-size: var(--cem-fs-lg); font-weight: 600; line-height: 1.5;
  margin-bottom: .625rem; color: var(--cem-ink);
}
.cem-section-title .text-muted { font-weight: 400; font-size: var(--cem-fs-sm); }

/* ---------- ช่องกรอง ------------------------------------------------
   ของเดิมวางป้ายกำกับไว้ 3 ส่วนและช่องกรอก 9 ส่วนในแถวเดียวกัน
   ป้ายภาษาไทยอย่าง "สถานะเข้าสอบ" หรือ "ปีการศึกษา" จึงถูกตัดกลางคำ
   เป็นสามบรรทัด วางป้ายไว้เหนือช่องแทน อ่านได้เต็มคำและกวาดตาเร็วกว่า */

.card-header .form-group.row {
  display: block;
  margin-bottom: 1rem;
  /* Bootstrap ตั้ง .row ให้มี margin ติดลบ -12px แล้วชดเชยด้วย padding ของคอลัมน์
     เมื่อเราเอา padding ของคอลัมน์ออก ต้องเอา margin ติดลบออกด้วย
     ไม่งั้นเนื้อหาจะทะลุออกนอกขอบการ์ด (ซ้อนกันสองชั้น = ล้ำออกไป 24px) */
  margin-left: 0;
  margin-right: 0;
}
.card-header .form-group.row > [class*="col-"] {
  flex: 0 0 100%; max-width: 100%; width: 100%;
  padding-left: 0; padding-right: 0;
}
.card-header .form-group.row .col-form-label {
  display: block;
  padding: 0 0 .3rem;
  font-size: var(--cem-fs-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--cem-ink-2);
  white-space: nowrap;
}

.form-control, .form-select {
  border: 1px solid var(--cem-line);
  border-radius: var(--cem-r-sm);
  /* ค่าของ Bootstrap: .375rem .75rem + line-height 1.5 = สูง 38px เท่าปุ่มพอดี
     ช่องกรอกกับปุ่มในแถบเครื่องมือจึงอยู่ในแนวเดียวกัน */
  padding: .375rem .75rem;
  font-size: var(--cem-fs-base);
  line-height: 1.5;
  color: var(--cem-ink);
  background-color: var(--cem-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #98a2bd; }
/* กล่องข้อความหลายบรรทัดเป็นเนื้อความ ไม่ใช่ตัวควบคุมบรรทัดเดียว ใช้ระยะบรรทัดไทย */
textarea.form-control { line-height: 1.8; }
/* ช่องเลือกต้องกว้างพอสำหรับข้อความไทยเต็มคำ ไม่ใช่ตัดท้ายด้วย ... */
.form-select { min-width: 12rem; }
.form-label { font-size: var(--cem-fs-sm); font-weight: 500; color: var(--cem-ink-2); margin-bottom: .3rem; }
.form-group label { color: var(--cem-ink-2); font-weight: 500; }

/* ทุกช่องกรองกว้างเท่ากัน (1/3) ไม่ว่าจะอยู่แถวไหน ขอบซ้าย-ขวาจึงตรงกันทั้งบล็อก
   ของเดิมแถวหนึ่งแบ่งครึ่ง อีกแถวแบ่งสาม ขอบเลยเหลื่อมกันทุกแถว */
.card-header form > .row:not(:has(button)):not(:has(a.btn)) {
  display: flex; flex-wrap: wrap; gap: 0 1.25rem;
  margin-left: 0; margin-right: 0;     /* เหตุผลเดียวกับด้านล่าง: ยกเลิก margin ติดลบของ .row */
}
.card-header form > .row:not(:has(button)):not(:has(a.btn)) > [class*="col-"] {
  flex: 0 0 calc(33.333% - 0.84rem);
  max-width: calc(33.333% - 0.84rem);
  width: auto; padding-left: 0; padding-right: 0;
}
@media (max-width: 1199.98px) {
  .card-header form > .row:not(:has(button)):not(:has(a.btn)) > [class*="col-"] {
    flex-basis: calc(50% - 0.63rem); max-width: calc(50% - 0.63rem);
  }
}
@media (max-width: 767.98px) {
  .card-header form > .row:not(:has(button)):not(:has(a.btn)) > [class*="col-"] {
    flex-basis: 100%; max-width: 100%;
  }
}

/* แถวปุ่มใต้ช่องกรอง — ของเดิมวางปุ่มไว้ใน col-md-1/col-md-2 ซึ่งแคบกว่าคำว่า
   "ค้นหา" เสียอีก ทำให้ตัวอักษรตัดกลางคำ ให้คอลัมน์กว้างตามเนื้อหาแทน
   แล้วเรียงเป็นแถวเดียวที่มีระยะห่างสม่ำเสมอ */
.card-header .row:last-child:not(.form-group) {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-left: 0; margin-right: 0;
}
/* :not(.form-group) สำคัญ — ช่องกรองแต่ละช่องคือ .form-group.row ที่เป็นลูกคนสุดท้าย
   ของคอลัมน์ตัวเอง ถ้าไม่กันไว้ กฎนี้จะไปหดช่องเลือกจนข้อความถูกตัด */
.card-header .row:last-child:not(.form-group) > [class*="col-"]:not(.col-md-6):not(.col-md-4) {
  flex: 0 0 auto; width: auto; max-width: none; padding-left: 0; padding-right: 0;
}
.card-header .row:last-child:not(.form-group) .form-group { margin-bottom: 0; }

/* ---------- ปุ่ม ---------------------------------------------------- */

.btn {
  white-space: nowrap;           /* "ค้นหา" เคยถูกตัดเป็น "ค้นห/า" เพราะคอลัมน์แคบ */
  border-radius: var(--cem-r-sm);
  font-size: var(--cem-fs-base);   /* = 1rem ตาม $btn-font-size ของ Bootstrap */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: .25rem .5rem; font-size: var(--cem-fs-xs); }   /* ค่าของ Bootstrap */
.btn i { vertical-align: -.125em; }

.btn-primary {
  background-color: var(--cem-accent); border-color: var(--cem-accent);
  box-shadow: 0 1px 2px rgba(22,32,60,.10), 0 4px 10px rgba(52,82,196,.22);
}
.btn-primary:hover { background-color: var(--cem-accent-ink); border-color: var(--cem-accent-ink); }

.btn-outline-primary { color: var(--cem-accent); border-color: #b9c5ee; }
.btn-outline-primary:hover { background-color: var(--cem-accent); border-color: var(--cem-accent); }

.btn-warning { background-color: #8a5300; border-color: #8a5300; color: #fff; }
.btn-warning:hover { background-color: #6f4200; border-color: #6f4200; color: #fff; }

.btn-success { background-color: var(--cem-ok); border-color: var(--cem-ok); }
.btn-success:hover { background-color: #10603d; border-color: #10603d; }

.btn-info { background-color: #10627a; border-color: #10627a; color: #fff; }
.btn-info:hover { background-color: #0c4c5f; border-color: #0c4c5f; color: #fff; }

.btn-secondary { background-color: #5b6684; border-color: #5b6684; }
.btn-outline-danger { color: var(--cem-danger); border-color: #edbcc1; }
.btn-outline-danger:hover { background-color: var(--cem-danger); border-color: var(--cem-danger); }

.btn:disabled, .btn.disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }

/* แถบเครื่องมือเหนือตาราง — ให้มีปุ่มเด่นได้ปุ่มเดียว
   "ค้นหา" คือปุ่มหลักของแถบนี้ · "ล้างการค้นหา" เป็นทางกลับ จึงเบาที่สุด
   · ปุ่มออกไฟล์เป็นงานรอง ใช้แบบเส้นขอบ ไม่ใช่พื้นทึบคนละสี */
.card-header .row .btn + .btn { margin-left: 0; }

.card-header .btn-warning {                 /* ปุ่มค้นหา */
  background-color: var(--cem-accent); border-color: var(--cem-accent); color: #fff;
  box-shadow: 0 1px 2px rgba(22,32,60,.10), 0 4px 10px rgba(52,82,196,.22);
}
.card-header .btn-warning:hover { background-color: var(--cem-accent-ink); border-color: var(--cem-accent-ink); }

.card-header .btn-secondary {               /* ล้างการค้นหา */
  background: transparent; border-color: transparent;
  color: var(--cem-ink-3); box-shadow: none;
}
.card-header .btn-secondary:hover { background: var(--cem-line-soft); color: var(--cem-ink); }

.card-header .btn-success,
.card-header .btn-info {                    /* ปุ่มออกไฟล์ Excel */
  background: transparent; color: var(--cem-ok); border-color: #bfe3cf; box-shadow: none;
}
.card-header .btn-success:hover,
.card-header .btn-info:hover { background: var(--cem-ok-bg); color: var(--cem-ok); border-color: #9fd6b8; }

/* ปุ่มหลักของทั้งหน้า ย้ายไปอยู่หัวเรื่องแล้ว จัดให้ชิดขวาและเด่นกว่าทุกอัน */
.page-title .row { align-items: center; }
.cem-page-action { display: flex; justify-content: flex-end; gap: .5rem; }
@media (max-width: 767.98px) {
  .cem-page-action { justify-content: flex-start; margin-top: .75rem; }
}

/* ---------- ตาราง ---------------------------------------------------
   หน้าจอเกือบทุกหน้าของระบบนี้คือตาราง จึงเป็นจุดที่คุ้มที่สุดที่จะทำให้ดี */

.table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
  color: var(--cem-ink);
  border-color: var(--cem-line-soft);
}
.table thead th {
  background: #f7f9fd;
  font-size: var(--cem-fs-xs);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--cem-ink-2);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--cem-line) !important;
  /* หัวตารางต้องตัดบรรทัดได้ — ชื่อคณะภาษาไทยยาวมาก
     ถ้าบังคับบรรทัดเดียว ตารางสรุปจะกว้างเป็นสองเท่าของจอ */
  white-space: normal;
  min-width: 6rem;
}
.table tbody td {
  padding: .8rem 1rem;
  font-size: var(--cem-fs-base);
  line-height: 1.7;              /* เนื้อหาไทยในตารางต้องหายใจได้ */
  border-bottom: 1px solid var(--cem-line-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }

/* ตารางข้อมูลกวาดตาได้ก็ต่อเมื่อหนึ่งค่าอยู่หนึ่งบรรทัด
   ของเดิมปล่อยให้ตัดคำ "20 สิงหาคม 2569" จึงกลายเป็นสามบรรทัด
   และความสูงแต่ละแถวไม่เท่ากันจนกวาดสายตาตามแนวนอนไม่ได้
   ให้เลื่อนแนวนอนแทน (กล่องครอบมี overflow-x อยู่แล้ว) */
.table td { white-space: nowrap; }
/* คอลัมน์แรกมักเป็นชื่อคน ปล่อยให้ตัดบรรทัดได้ แต่ห้ามบังคับความกว้างขั้นต่ำ
   (เคยตั้ง min-width ไว้ แล้วตารางที่คอลัมน์แรกเป็น "id" ถูกถ่างจนหน้าเลื่อนออกนอกจอ) */
.table td:first-child { white-space: normal; max-width: 24rem; }
.cem-scroll-x { overflow-x: auto; }
/* ตัวเลขเงินและจำนวนต้องชิดขวาเพื่อเทียบหลักกันได้ */
.table .text-end { text-align: right; }
.table td small { white-space: normal; display: inline-block; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background-color: #fbfcfe;
  box-shadow: none;
  color: var(--cem-ink);
}
.table tbody tr:hover > * { background-color: var(--cem-accent-bg) !important; }
.table-sm tbody td { padding: .55rem .75rem; }

/* ปุ่มเล็กในตารางไม่ควรดันความสูงแถว */
.table td .btn-sm { padding: .25rem .6rem; font-size: var(--cem-fs-xs); }
.table td .btn.icon { padding: .3rem .5rem; }

/* ---------- ตัวควบคุมของ DataTables -------------------------------- */

.dataTables_wrapper { padding-top: .25rem; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info { font-size: var(--cem-fs-sm); color: var(--cem-ink-3); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--cem-line);
  border-radius: var(--cem-r-sm);
  padding: .35rem .6rem;
  color: var(--cem-ink);
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--cem-r-sm) !important;
  border: 1px solid transparent !important;
  color: var(--cem-ink-2) !important;
  font-size: var(--cem-fs-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-item.active .page-link {
  background: var(--cem-accent) !important;
  border-color: var(--cem-accent) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--cem-line-soft) !important;
  border-color: var(--cem-line) !important;
  color: var(--cem-ink) !important;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_desc:before {
  opacity: .28;
}

/* ---------- ป้ายสถานะ ------------------------------------------------
   ป้ายเดิมใช้สีพื้นเข้มกับตัวอักษรขาว ซึ่งบางคู่ตัดกันไม่พอ
   เปลี่ยนเป็นพื้นอ่อน + ตัวอักษรเข้มจากสีเดียวกัน อ่านง่ายกว่าและเบาตากว่า */

.badge {
  font-weight: 500;
  font-size: var(--cem-fs-xs);
  line-height: 1.6;
  letter-spacing: 0;
  padding: .32em .75em;
  border-radius: 99px;
}
.badge.bg-primary   { background: var(--cem-accent-bg) !important; color: var(--cem-accent-ink) !important; }
.badge.bg-info      { background: #e2f4f9 !important;  color: #0c4c5f !important; }
.badge.bg-secondary { background: #eceff6 !important;  color: #414d70 !important; }
.badge.bg-success   { background: var(--cem-ok-bg) !important;   color: var(--cem-ok) !important; }
.badge.bg-warning   { background: var(--cem-warn-bg) !important; color: var(--cem-warn) !important; }
.badge.bg-danger    { background: var(--cem-danger-bg) !important; color: var(--cem-danger) !important; }

/* ---------- กล่องข้อความ -------------------------------------------- */

.alert {
  border-radius: var(--cem-r);
  padding: .875rem 1.125rem;
  font-size: var(--cem-fs-base);
  line-height: 1.8;
  border: 1px solid transparent;
}
.alert-light-primary { background: var(--cem-accent-bg); border-color: #d3ddfa; color: var(--cem-accent-ink); }
.alert-light-success { background: var(--cem-ok-bg);     border-color: #c3e9d5; color: var(--cem-ok); }
.alert-light-danger  { background: var(--cem-danger-bg); border-color: #f3ccd1; color: var(--cem-danger); }
.alert-light-warning { background: var(--cem-warn-bg);   border-color: #f0dcae; color: var(--cem-warn); }
.color-primary { color: var(--cem-accent-ink); }
.color-success { color: var(--cem-ok); }
.color-danger  { color: var(--cem-danger); }

/* ---------- หน้าต่างซ้อน -------------------------------------------- */

.modal .modal-content {
  border-radius: var(--cem-r-lg);
  box-shadow: var(--cem-shadow-3);
  overflow: hidden;
}
.modal .modal-header {
  padding: 1.125rem 1.5rem;
  background: var(--cem-navy) !important;
  border-bottom: none;
}
.modal .modal-header .modal-title { font-size: var(--cem-fs-lg); font-weight: 500; color: #fff; }
.modal .modal-header .close { color: #fff; opacity: .85; }
.modal .modal-header .close:hover { background: rgba(255,255,255,.15); opacity: 1; }
.modal .modal-body { padding: 1.5rem; }
.modal .modal-footer {
  padding: 1rem 1.5rem;
  background: #fafbfe;
  border-top: 1px solid var(--cem-line-soft);
}

/* ---------- ฟอร์มยาวในหน้าต่างซ้อน ----------------------------------
   ฟอร์มบุคคลภายนอกมี 14 ช่อง ถ้าวางห่างเท่ากันหมดจะกลายเป็นกำแพงช่องกรอก
   แบ่งเป็นกลุ่มตามความหมาย ระยะในกลุ่มแน่น ระหว่างกลุ่มห่าง */
.cem-form-section {
  font-size: var(--cem-fs-xs);
  font-weight: 600;
  line-height: 1.6;
  color: var(--cem-ink-3);
  margin: 1.75rem 0 .625rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--cem-line-soft);
}
.cem-form-section:first-of-type { margin-top: .25rem; }
.cem-field-row { margin-bottom: .625rem; }
.cem-field-row:last-of-type { margin-bottom: 0; }
.cem-field-note { margin: -.125rem 0 .875rem; font-size: var(--cem-fs-sm); line-height: 1.7; }

/* ---------- สวิตช์ --------------------------------------------------- */

.form-check-input:checked { background-color: var(--cem-accent); border-color: var(--cem-accent); }
.form-switch .form-check-input { width: 2.25em; height: 1.25em; }
.form-check-label { font-size: var(--cem-fs-base); line-height: 1.75; }

/* ---------- มาร์กอัปยุคเก่าที่ยังฝังอยู่ในหน้าเดิม --------------------
   หน้าเนื้อหาของระบบนี้เขียนด้วย <font color> <u> <center> ซึ่งเป็นแท็ก
   ที่ HTML เลิกใช้ไปแล้ว และมันสู้กับดีไซน์ทุกอย่าง:
     - <u> ถูกใช้เป็น "หัวข้อย่อย" ไม่ใช่ลิงก์ (นักศึกษา มจพ. / ก่อนการสอบ / วันสอบ)
       ผลคือทั้งหน้าขีดเส้นใต้ไปหมด แยกไม่ออกว่าอะไรกดได้
       และเส้นใต้ชนสระล่างของภาษาไทยด้วย
     - <font color="red|blue|green"> เป็นสีดิบนอกระบบสี ตัดกับพื้นไม่พอบ้าง ฉูดฉาดบ้าง
   แก้ที่นี่ทีเดียวแทนการไล่แก้มาร์กอัปทุกหน้า: คงความหมายเดิมไว้ (คำเตือน=แดง)
   แต่ย้ายมาใช้สีในระบบ และเปลี่ยนเส้นใต้เป็นน้ำหนักตัวอักษรแทน
   -------------------------------------------------------------------- */

u {
  text-decoration: none;
  font-weight: 600;
  color: var(--cem-ink);
}
/* ลิงก์ใน "เนื้อความ" ต้องยังดูออกว่ากดได้ เมื่อ <u> ไม่ใช่สัญญาณนั้นอีกต่อไป
   แต่ลิงก์ที่เป็นส่วนของโครงหน้า (breadcrumb, ปุ่มในตาราง, ลิงก์ในหัวการ์ด)
   ไม่ใช่เนื้อความ ขีดเส้นใต้แล้วรกและทำให้ดูเหมือนข้อความที่ถูกแก้ */
#main-content p a,
#main-content li:not(.breadcrumb-item):not(.page-item):not(.paginate_button) a:not(.page-link),
#main-content td a:not(.btn):not(:has(i)),
#main-content .card-body > a:not(.btn) {
  color: var(--cem-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;   /* กันเส้นชนสระล่างของไทย */
}
#main-content p a:hover,
#main-content li:not(.breadcrumb-item):not(.page-item):not(.paginate_button) a:not(.page-link):hover,
#main-content td a:not(.btn):not(:has(i)):hover {
  color: var(--cem-accent-ink);
}
#main-content .breadcrumb a,
#main-content .breadcrumb a:hover { text-decoration: none; }

font[color="red"],   font[color="#ff0000"], font[color="#f00"]  { color: var(--cem-danger) !important; font-weight: 500; }
/* สีแดงล้วนที่เขียนเป็น inline style ก็ได้แค่ 4.0:1 บนพื้นขาว ต่ำกว่าเกณฑ์ */
[style*="color: red"], [style*="color:red"],
[style*="color: #ff0000"], [style*="color:#ff0000"],
[style*="color: #FF0000"], [style*="color:#FF0000"] { color: var(--cem-danger) !important; }
font[color="blue"],  font[color="#0000ff"]                      { color: var(--cem-accent-ink) !important; }
font[color="green"], font[color="#008000"]                      { color: var(--cem-ok) !important; }
font[color="purple"]                                            { color: #6b3fa0 !important; }
font[color="black"], font[color="#000000"], font[color="#000"]  { color: inherit !important; }
font[size] { font-size: inherit !important; }

/* <center> ในตารางสรุป — ให้เป็นการจัดกลางที่อ่านง่าย ไม่ใช่บล็อกซ้อนบล็อก */
td > center, th > center { display: block; }

/* ชื่อคู่มือในการ์ดดาวน์โหลด — เป็นหัวข้อระดับรองของการ์ด ไม่ใช่หัวเรื่องใหญ่ */
.card .card-body h5.mb-1 { font-size: var(--cem-fs-base); font-weight: 600; line-height: 1.65; }

/* ---------- ข้อความรอง ----------------------------------------------- */

.text-muted { color: var(--cem-ink-3) !important; }
small, .small { line-height: 1.7; }

/* ---------- จอเล็ก --------------------------------------------------- */

@media (max-width: 991.98px) {
  #main-content { padding: 1.25rem 1rem 2.5rem; }
  /* แถบ Show/Search ของ DataTables ถูกจัดชิดขวา/ซ้ายด้วย grid ของธีม
     บนจอแคบเลยเบียดกันและอ่านยาก จัดเรียงลงมาเป็นบรรทัดเต็มความกว้างแทน */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { float: none; text-align: left; width: 100%; }
  .dataTables_wrapper .dataTables_filter { margin-top: .5rem; }
  .dataTables_wrapper .dataTables_filter label { display: flex; align-items: center; gap: .5rem; width: 100%; }
  .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; margin-left: 0; }
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate { float: none; text-align: left; margin-top: .5rem; }
  /* ตารางของ DataTables ที่ไม่ได้อยู่ในกล่องเลื่อน ให้เลื่อนได้เองบนจอแคบ */
  .dataTables_wrapper { overflow-x: auto; }
  .card .card-header, .card .card-body { padding: 1.125rem; }
  .page-heading h3 { font-size: var(--cem-fs-xl); }
  .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
  .modal .modal-body { padding: 1.125rem; }
}

@media (max-width: 575.98px) {
  /* ไม่ลดขนาดตัวอักษรบนจอเล็ก — Bootstrap ไม่ลด และจอเล็กคือที่ที่อ่านยากที่สุดอยู่แล้ว */
  .card { border-radius: var(--cem-r-sm); }
  /* ปุ่มยาว ๆ ห้ามตัดคำ จึงล้นขอบการ์ดบนจอแคบ — วางซ้อนเต็มความกว้างแทน
     ซึ่งเป็นรูปแบบที่กดง่ายกว่าบนมือถืออยู่แล้ว */
  .card-header .btn { display: flex; width: 100%; justify-content: center; }
  .card-header .row:last-child:not(.form-group) { gap: .5rem; }
  .card-header .row:last-child:not(.form-group) > [class*="col-"] { width: 100%; }
}

/* ---------- พิมพ์ ---------------------------------------------------- */

@media print {
  #sidebar, .navbar, .btn, .dataTables_length, .dataTables_filter, .dataTables_paginate { display: none !important; }
  #main { margin-left: 0 !important; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}


/* ==================================================================
   แก้ตามผลตรวจ (audit) วัดจาก 18 หน้า × 2 ความกว้าง
   ================================================================== */

/* คอนทราสต์: ข้อความรองของธีมเดิม (#6c757d) ได้ 4.30:1 บนพื้นหน้า */
.text-gray-600, .text-sm.text-gray-600 { color: var(--cem-ink-3) !important; }

/* เป้ากด: ปุ่มไอคอนในตาราง (แก้ไข/ลบ) สูงแค่ 26px กดพลาดง่าย
   โดยเฉพาะบนมือถือและกับผู้ใช้ที่มือไม่นิ่ง */
.btn-sm, .table .btn.icon, .btn.icon {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.table td .btn.icon { min-width: 32px; }
@media (pointer: coarse) {
  .btn-sm, .table .btn.icon, .btn.icon { min-height: 40px; min-width: 40px; }
}

/* ระยะบรรทัดของป้ายกำกับ — ป้ายไทยที่ยาวจนขึ้นสองบรรทัดจะชนกันที่ 1.5 */
.card-header .form-group.row .col-form-label,
.form-label, .form-group label { line-height: 1.65; }

/* แผนภูมิ ApexCharts ตั้งตัวอักษรไว้ 12px ซึ่งเล็กเกินไปสำหรับสระและวรรณยุกต์ไทย */
.apexcharts-legend-text,
.apexcharts-menu-item,
.apexcharts-text tspan { font-size: var(--cem-fs-xs) !important; font-family: 'Kanit', sans-serif !important; }

/* Bootstrap ตั้ง .row ให้มี margin ติดลบ พอวางตรงใต้ card-body เนื้อหาจึงล้ำออกไปชิดขอบ
   (เห็นชัดที่จอแคบ ซึ่ง padding ของการ์ดน้อยกว่า) */
#main-content .card-body > .row { margin-left: 0; margin-right: 0; }

/* ความกว้างขั้นต่ำของหัวตารางช่วยให้ตารางสรุปอ่านง่ายบนจอกว้าง
   แต่บนจอแคบมันดันหน้าให้เลื่อนแนวนอนทั้งหน้า */
@media (max-width: 767.98px) {
  .table th { min-width: 0; }
  .cem-scroll-x, .card-body[style*="overflow-x"] { -webkit-overflow-scrolling: touch; }
}

/* ---------- แก้รอบสอง หลังวัดซ้ำ ------------------------------------- */

/* ป้ายกำกับทุกที่ รวมหน้าต่างซ้อน ไม่ใช่เฉพาะแถบกรอง */
.col-form-label { line-height: 1.65; }
#main-content .text-muted, #main-content small { line-height: 1.7; }

/* แถวในหัวการ์ดทุกแถว ต้องไม่ล้นออกนอกกรอบ
   (แถวที่มีทั้งช่องเลือกและปุ่มเข้าเงื่อนไขสองกฎพร้อมกัน จึงยังเหลือ margin ติดลบ) */
#main-content .card-header .row { margin-left: 0; margin-right: 0; }
#main-content .card-header .row > [class*="col-"] { max-width: 100%; }

/* ปุ่มปิดแถบเมนูบนจอแคบ สูงแค่ 14px กดยาก */
.sidebar-wrapper .sidebar-toggler.x {
  min-width: 40px; min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  right: .25rem; top: .25rem;
}


/* ==================================================================
   ปุ่ม — ทำให้เป็นคอมโพเนนต์จริง ไม่ใช่กล่องข้อความที่บังเอิญมีพื้นหลัง
   ------------------------------------------------------------------
   วัดของเดิมแล้วพบว่าในแถบเดียวกัน ปุ่มสูง 37 / 38 / 39px ไม่เท่ากัน
   ไอคอนกลายเป็น 15×23 และ 14×21 แทนที่จะเป็นสี่เหลี่ยมจัตุรัส
   (เพราะ <i> ยืดตาม line-height ของตัวอักษร ไม่ได้ถูกกำหนดกรอบ)
   และระยะไอคอน-ข้อความใช้ &nbsp;&nbsp; ซึ่งกว้างไม่เท่ากันตามฟอนต์
   สามอย่างนี้รวมกันคือเหตุผลที่แถบปุ่มดู "ไม่เรียบร้อย" แม้สีจะถูก
   ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;                    /* ระยะไอคอน-ข้อความที่คงที่ ไม่ขึ้นกับฟอนต์ */
  /* .375rem .75rem + 1rem/1.5 + เส้นขอบ = 38px ซึ่งเป็นความสูงปุ่มมาตรฐานของ Bootstrap */
  min-height: 38px;
  padding: .375rem .75rem;
  vertical-align: middle;
}
/* Bootstrap ได้ 31px ซึ่งต่ำกว่าเป้ากดขั้นต่ำ 32px ยกพื้นขึ้น 1px โดยไม่แตะระยะใน */
.btn-sm { min-height: 32px; padding: .25rem .5rem; }
/* ไม่ตั้งกฎให้ .btn-xs — Bootstrap 5 ไม่มีขนาดนี้ ปุ่มจึงได้ขนาดปกติ
   ใช้อยู่ 2 จุด (examround.php:50 · paymentport.php:48) และทั้งสองคือปุ่มหลักของหน้า
   กฎเดิมที่เคยตั้งไว้ 30px ย่อปุ่มที่สำคัญที่สุดของหน้าจนต่ำกว่าเป้ากดขั้นต่ำ */

/* ไอคอนในปุ่ม: กรอบสี่เหลี่ยมจัตุรัสตายตัว ไม่ยืดตาม line-height ของข้อความ
   ใช้ descendant ไม่ใช่ลูกตรง เพราะบางปุ่มห่อไอคอนไว้ใน <span class="text">
   (ปุ่ม "ล้างการค้นหา" เป็นแบบนั้น ไอคอนเลยกลายเป็น 14x21 ไม่ใช่จัตุรัส) */
.btn i,
.btn svg {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  font-size: 1.05em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.btn i::before { line-height: 1; vertical-align: middle; }
/* ปุ่มที่ห่อเนื้อหาไว้ใน <span class="text"> ต้องจัดวางเหมือนปุ่มอื่น */
.btn > .text { display: inline-flex; align-items: center; gap: .5rem; }

/* ปุ่มไอคอนล้วนในตาราง — สี่เหลี่ยมจัตุรัส ไม่ใช่สี่เหลี่ยมผืนผ้าบาง ๆ */
.btn.icon { padding: .4rem; min-width: 38px; min-height: 38px; gap: 0; }
.table td .btn.icon { min-width: 32px; min-height: 32px; padding: .25rem; }
.table td .btn.icon + .btn.icon { margin-left: .25rem; }

/* กลุ่มปุ่มในแถบเครื่องมือให้ระยะเท่ากันทุกคู่ */
.card-header .row:last-child:not(.form-group) { gap: .5rem; }

/* มาร์กอัปเดิมติด .btn-sm ไว้แทบทุกปุ่ม รวมถึงปุ่มหลักของการ์ดและปุ่มในแถบกรอง
   ปุ่มจึงเตี้ยกว่าช่องเลือกที่อยู่แถวเดียวกัน 6px และอ่านเล็กกว่าข้อความรอบตัว
   ให้ใช้ขนาดปกติของ Bootstrap (1rem / 38px) ทุกที่ */
#main-content .btn-sm:not(.icon) {
  min-height: 38px;
  padding: .375rem .75rem;
  font-size: var(--cem-fs-base);
}
/* ยกเว้นในแถวตาราง ซึ่งปุ่มต้องกะทัดรัดไม่ให้ดันความสูงแถว
   (กฎนี้ต้องอยู่หลังกฎบน — ค่าความจำเพาะเท่ากัน ตัวหลังชนะ) */
#main-content .table .btn-sm {
  min-height: 32px;
  padding: .25rem .6rem;
  font-size: var(--cem-fs-xs);
}

/* สถานะกด/โฟกัสของปุ่มไอคอนต้องเห็นชัดเท่าปุ่มปกติ */
.btn.icon:focus-visible { outline-offset: 1px; }