/* =====================================================================
   SEEP — COMPONENT LAYER
   ระบบนิเวศเพื่อการศึกษาจังหวัดศรีสะเกษ

   ไฟล์นี้ประกอบ "หน้าตา" ของคอมโพเนนต์ทั้งหมด
   โดยอ้างอิงค่าจาก design-system.css เท่านั้น (ห้ามใส่ค่าดิบ)
   ลำดับการโหลด : bootstrap.css → design-system.css → seep.css
   ===================================================================== */

/* =====================================================================
   1. พื้นฐาน (BASE)
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-normal);
  background: var(--color-background);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* ภาษาไทยไม่มีช่องว่างระหว่างคำ ถ้าไม่อนุญาตให้ตัดคำ ข้อความยาวจะดันกล่องจนล้นจอ
     ใช้ overflow-wrap อย่างเดียว เพื่อให้ตัดเฉพาะเมื่อจำเป็น (ไม่ตัดกลางตัวเลข) */
  overflow-wrap: break-word;
}

/* ตัวเลข วันที่ และรหัส ต้องอยู่บรรทัดเดียวเสมอ ห้ามตัดกลางตัว */
/* ตัวเลขห้ามถูกตัดกลางตัว แต่ยังขึ้นบรรทัดใหม่ที่ช่องว่างได้ (เช่น "1,250,000 บาท") */
.text-num, .stat-value, .stat-delta, .hero-stat .v,
.reason-list li b, .match-score span, .progress-ring span,
td.num, th.num, .report-summary .v, .report-summary .l {
  overflow-wrap: normal;
  word-break: keep-all;
}
/* เฉพาะที่ต้องอยู่บรรทัดเดียวจริง ๆ */
.match-score span, .progress-ring span, .reason-list li b { white-space: nowrap; }
/* รหัส อีเมล และเลขอ้างอิง : ไม่ตัดกลางคำ แต่ขึ้นบรรทัดใหม่ได้ถ้าจำเป็น */
.text-mono { overflow-wrap: anywhere; word-break: normal; }

/* ---- ลำดับหัวเรื่อง ---- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-family-heading);
  color: var(--color-text);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  margin-top: 0;
}
h1, .h1 { font-size: var(--font-size-h1-fluid); font-weight: var(--font-weight-bold); }
h2, .h2 { font-size: var(--font-size-h2-fluid); font-weight: var(--font-weight-bold); }
h3, .h3 { font-size: var(--font-size-h3);       font-weight: var(--font-weight-semibold); }
h4, .h4 { font-size: 1.1875rem;                 font-weight: var(--font-weight-semibold); }
h5, .h5 { font-size: var(--font-size-lg);       font-weight: var(--font-weight-semibold); }
h6, .h6 { font-size: var(--font-size-body);     font-weight: var(--font-weight-semibold); }

p { line-height: var(--line-height-relaxed); }
p:last-child { margin-bottom: 0; }

small, .small { font-size: var(--font-size-xs); }

a { color: var(--color-primary-600); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

strong, b { font-weight: var(--font-weight-semibold); }

hr { border-color: var(--color-border); opacity: 1; }

/* ---- โฟกัสต้องมองเห็นชัดเสมอ (WCAG 2.4.7) ---- */
:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ---- ข้ามไปยังเนื้อหาหลัก (สำหรับผู้ใช้คีย์บอร์ด/screen reader) ---- */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 2000;
  background: var(--color-primary); color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); font-weight: var(--font-weight-semibold);
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-4); color: #fff; text-decoration: none; }

/* ---- ตัวช่วยด้านตัวอักษร ---- */
.text-mono { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }
.text-num  { font-variant-numeric: tabular-nums; }
.measure   { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }
.text-balance { text-wrap: balance; }

.fs-xs   { font-size: var(--font-size-xs) !important; }
.fs-sm   { font-size: var(--font-size-sm) !important; }
.fs-body { font-size: var(--font-size-body) !important; }
.fs-lg   { font-size: var(--font-size-lg) !important; }

.text-muted, .text-secondary { color: var(--color-text-muted) !important; }
.text-navy, .text-primary-ink { color: var(--color-primary) !important; }
.text-gold  { color: var(--color-accent-ink) !important; }
.text-green { color: var(--color-success-ink) !important; }
.text-cyan  { color: var(--color-secondary-ink) !important; }
.text-danger { color: var(--color-danger-ink) !important; }
.bg-navy    { background: var(--color-primary) !important; }

.section-title {
  font-size: var(--font-size-h2-fluid);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  letter-spacing: var(--letter-spacing-heading);
}
.section-sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
}
.text-center .section-sub { margin-inline: auto; }

/* =====================================================================
   2. ปุ่ม (BUTTON)
   ===================================================================== */

.btn {
  --bs-btn-border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  min-height: var(--control-height);
  padding: .55rem 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  line-height: 1.4;
}
.btn:active { transform: translateY(1px); }

.btn-lg {
  min-height: var(--control-height-lg);
  font-size: var(--font-size-body);
  padding: .7rem 1.6rem;
  border-radius: var(--radius-md);
}
.btn-sm {
  min-height: var(--control-height-sm);
  font-size: var(--font-size-xs);
  padding: .4rem .8rem;
  border-radius: var(--radius-sm);
}

/* Primary — มีสีเดียวทั้งระบบ */
.btn-primary {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:disabled, .btn-primary.disabled { background: var(--color-primary); border-color: var(--color-primary); opacity: .55; }

/* Secondary */
.btn-secondary {
  background: var(--color-secondary); border-color: var(--color-secondary); color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus { background: var(--color-secondary-600); border-color: var(--color-secondary-600); color: #fff; }

/* Outline */
.btn-outline-primary { color: var(--color-primary-600); border-color: var(--color-border-strong); background: var(--color-surface); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.btn-outline-secondary { color: var(--color-text-muted); border-color: var(--color-border-strong); background: var(--color-surface); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text); }

.btn-outline-danger { color: var(--color-danger-ink); border-color: var(--color-border-strong); background: var(--color-surface); }
.btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--color-danger-ink); border-color: var(--color-danger-ink); color: #fff; }

.btn-outline-success { color: var(--color-success-ink); border-color: var(--color-border-strong); background: var(--color-surface); }
.btn-outline-success:hover, .btn-outline-success:focus { background: var(--color-success-ink); border-color: var(--color-success-ink); color: #fff; }

.btn-outline-gold { color: var(--color-accent-ink); border: 1px solid var(--color-accent); background: transparent; }
.btn-outline-gold:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary-800); }

.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* Ghost — สำหรับ action รอง ไม่ดึงสายตา */
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }

.btn-success { background: var(--color-success-ink); border-color: var(--color-success-ink); color: #fff; }
.btn-success:hover { background: #175533; border-color: #175533; color: #fff; }
.btn-danger  { background: var(--color-danger-ink); border-color: var(--color-danger-ink); color: #fff; }
.btn-danger:hover { background: #962B26; border-color: #962B26; color: #fff; }
.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: #26313F; }
.btn-warning:hover { background: #E08B41; border-color: #E08B41; color: #26313F; }
.btn-info { background: var(--color-secondary-ink); border-color: var(--color-secondary-ink); color: #fff; }

.btn-navy { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-navy:hover { background: var(--color-primary-600); color: #fff; }
.btn-gold { background: var(--color-accent); color: var(--color-primary-800); border-color: var(--color-accent); font-weight: var(--font-weight-semibold); }
.btn-gold:hover { background: var(--color-accent-600); color: var(--color-primary-800); }

.btn-light { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
.btn-light:hover { background: var(--color-surface-2); color: var(--color-text); }

/* ปุ่มไอคอนล้วน — ต้องมี aria-label เสมอ */
.btn-icon { width: var(--control-height); padding-inline: 0; }
.btn-icon.btn-sm { width: var(--control-height-sm); }

/* สถานะกำลังส่งข้อมูล (กันกดซ้ำ) */
.btn.is-loading { position: relative; pointer-events: none; opacity: .75; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 1.05em; height: 1.05em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: seep-spin .6s linear infinite; visibility: visible;
}
@keyframes seep-spin { to { transform: rotate(360deg); } }

/* กลุ่มปุ่มบนมือถือให้กดง่าย */
@media (max-width: 575.98px) {
  .btn { min-height: var(--touch-min); }
  .btn-sm { min-height: 38px; }
  .page-head .btn, .card-header .btn { width: auto; }
}

/* =====================================================================
   3. การ์ด (CARD)
   ===================================================================== */

.card {
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.card-body { padding: var(--card-padding); }
.card-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  color: var(--color-text);
  padding: var(--space-4) var(--card-padding);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 58px;
}
.card-header > span:first-child { flex: 1; min-width: 0; }
.card-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--card-padding);
}
.card-title { font-family: var(--font-family-heading); font-weight: var(--font-weight-semibold); }
.card-hover { transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--color-border-strong); }
.card-img-top {
  border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);
  object-fit: cover;
}
/* การ์ดเด่น (feature card) */
.card-feature { border-radius: var(--radius-xl); }
.card-feature .card-body { padding: var(--space-6); }

.list-group-item { border-color: var(--color-border); padding: var(--space-4) var(--card-padding); background: var(--color-surface); }
.list-group-flush > .list-group-item:last-child { border-bottom: 0; }

@media (max-width: 575.98px) {
  .card-body   { padding: var(--card-padding-mobile); }
  .card-header { padding: var(--space-3) var(--card-padding-mobile); min-height: 52px; }
  .card-footer { padding: var(--space-3) var(--card-padding-mobile); }
  .card-feature .card-body { padding: var(--space-5); }
  .list-group-item { padding: var(--space-3) var(--card-padding-mobile); }
}

/* =====================================================================
   4. การ์ดสถิติ (STAT CARD)
   ===================================================================== */

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  height: 100%;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.stat-card:hover { box-shadow: var(--shadow-lg); }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.2rem; margin-bottom: var(--space-3);
}
.stat-card .stat-value {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.stat-card .stat-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  margin-top: var(--space-1);
}
.stat-card .stat-delta { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); margin-top: var(--space-2); display: inline-flex; align-items: center; gap: .25rem; }
.stat-delta.up   { color: var(--color-success-ink); }
.stat-delta.down { color: var(--color-danger-ink); }
.stat-delta.flat { color: var(--color-text-muted); }

@media (max-width: 575.98px) {
  .stat-card { padding: var(--card-padding-mobile); }
  .stat-card .stat-value { font-size: 1.75rem; }
}

/* พื้นหลังอ่อน (ใช้ร่วมกับไอคอน/แถบสถานะ) */
.bg-soft-primary   { background: var(--color-primary-soft);   color: var(--color-primary); }
.bg-soft-secondary { background: var(--color-surface-2);      color: var(--color-text-muted); }
.bg-soft-cyan      { background: var(--color-secondary-soft); color: var(--color-secondary-ink); }
.bg-soft-green     { background: var(--color-success-soft);   color: var(--color-success-ink); }
.bg-soft-gold      { background: var(--color-accent-soft);    color: var(--color-accent-ink); }
.bg-soft-danger    { background: var(--color-danger-soft);    color: var(--color-danger-ink); }
.bg-soft-warning   { background: var(--color-warning-soft);   color: var(--color-warning-ink); }

/* =====================================================================
   5. ฟอร์ม (FORM)
   ===================================================================== */

.form-label {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  display: inline-block;
}
.form-control, .form-select {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  min-height: var(--input-height);
  padding: .6rem .85rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
textarea.form-control { min-height: var(--textarea-min); line-height: var(--line-height-relaxed); }
.form-control-sm, .form-select-sm { min-height: var(--control-height-sm); font-size: var(--font-size-sm); padding: .35rem .65rem; }
.form-control-lg, .form-select-lg { min-height: var(--control-height-lg); font-size: var(--font-size-lg); }

.form-control:focus, .form-select:focus {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.form-control::placeholder { color: var(--color-text-subtle); opacity: 1; }

.form-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-top: var(--space-2);
  display: block;
}
.required::after { content: " *"; color: var(--color-danger-ink); font-weight: var(--font-weight-bold); }

.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--color-danger-ink); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 53, 47, .2); }
.invalid-feedback {
  font-size: var(--font-size-xs);
  color: var(--color-danger-ink);
  margin-top: var(--space-2);
  display: flex; align-items: flex-start; gap: .35rem;
}
.invalid-feedback::before { content: "\F33A"; font-family: "bootstrap-icons"; flex: none; line-height: 1.4; }

.form-check-input { width: 1.15em; height: 1.15em; margin-top: .2em; border-color: var(--color-border-strong); }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-input:focus { box-shadow: var(--shadow-focus); border-color: var(--color-secondary); }
.form-check-label { font-size: var(--font-size-sm); padding-left: var(--space-1); cursor: pointer; }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }

.input-group > .form-control, .input-group > .form-select { min-height: var(--input-height); }
.input-group .btn { min-height: var(--input-height); }
.input-group-text {
  background: var(--color-surface-2); border-color: var(--color-border-strong);
  color: var(--color-text-muted); font-size: var(--font-size-sm);
}

/* กลุ่มฟิลด์ในฟอร์มยาว — ช่วยแบ่งสายตาเป็นตอน ๆ */
.form-section { padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.form-section:first-of-type { border-top: 0; padding-top: 0; }
.form-section > .form-section-head { margin-bottom: var(--space-4); }
.form-section-head .t {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  display: flex; align-items: center; gap: var(--space-2);
}
.form-section-head .t .n {
  width: 26px; height: 26px; border-radius: var(--radius-pill); flex: none;
  background: var(--color-primary-soft); color: var(--color-primary);
  display: grid; place-items: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.form-section-head .d { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top: var(--space-1); }

/* แถบปุ่มท้ายฟอร์ม — ติดขอบล่างบนมือถือเพื่อกดง่าย */
.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding-top: var(--space-5); margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
@media (max-width: 575.98px) {
  .form-actions .btn { flex: 1 1 100%; }
  .form-actions .btn + .btn { margin-top: 0; }
}

/* =====================================================================
   6. ตาราง (TABLE)
   ===================================================================== */

.table {
  --bs-table-bg: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: 0;
}
.table > thead > tr > th {
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}
.table > tbody > tr > td {
  vertical-align: middle;
  border-color: var(--color-border);
  padding: var(--space-3) var(--space-4);
  height: 60px;
}
.table-hover > tbody > tr:hover > * {
  background: var(--color-primary-soft);
  --bs-table-accent-bg: var(--color-primary-soft);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #FBFCFE;
  background: #FBFCFE;
}
.table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.table-responsive { border-radius: var(--radius-lg); }
.table td .btn-sm + .btn-sm, .table td form + form { margin-left: var(--space-1); }

/* DataTables */
.dataTables_wrapper { padding: var(--space-4); }
.dataTables_wrapper .row { align-items: center; }
.dataTables_filter { text-align: left !important; }
.dataTables_filter input, .dataTables_length select {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  padding: .4rem .7rem; min-height: var(--control-height-sm);
  font-size: var(--font-size-sm); margin-left: var(--space-2);
}
.dataTables_info, .dataTables_length label, .dataTables_filter label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important; font-size: var(--font-size-xs);
}

/* บนมือถือ : เปลี่ยนตารางเป็นรายการการ์ด (ต้องใส่ data-label ที่ td) */
@media (max-width: 767.98px) {
  .table-cards, .table-cards > tbody, .table-cards > tbody > tr, .table-cards > tbody > tr > td { display: block; width: 100%; }
  .table-cards > thead { display: none; }
  .table-cards > tbody > tr {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3); box-shadow: var(--shadow-sm);
  }
  .table-cards > tbody > tr > td {
    border: 0; padding: var(--space-2) 0; height: auto;
    display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between;
  }
  .table-cards > tbody > tr > td::before {
    content: attr(data-label);
    flex: none; color: var(--color-text-muted);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  }
  .table-cards > tbody > tr > td:not([data-label])::before { content: none; }
  .table-cards > tbody > tr > td[data-label=""]::before { content: none; }
  .table-cards .text-end { text-align: right !important; }
  .table-cards .text-truncate,
  .table-cards td[style*="max-width"] { max-width: none !important; white-space: normal !important; overflow: visible !important; }
  .table-cards > tbody > tr > td > *:last-child { text-align: right; }
  .table-wrap { box-shadow: none; border: 0; background: transparent; }
  .table-cards + * { margin-top: var(--space-4); }
}

/* =====================================================================
   7. BADGE / STATUS
   ไม่ใช้สีเพียงอย่างเดียวบอกสถานะ — มีจุดนำหน้าและข้อความกำกับเสมอ
   ===================================================================== */

.badge {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-pill);
  padding: .32em .8em;
  line-height: 1.5;
  letter-spacing: 0;
  /* ป้ายภาษาไทยยาว ๆ ต้องขึ้นบรรทัดใหม่ได้ ไม่ดันการ์ดจนล้น */
  white-space: normal;
  text-align: left;
  max-width: 100%;
}
.badge-soft-primary   { background: var(--color-primary-soft);   color: var(--color-primary); }
.badge-soft-cyan      { background: var(--color-secondary-soft); color: var(--color-secondary-ink); }
.badge-soft-green     { background: var(--color-success-soft);   color: var(--color-success-ink); }
.badge-soft-gold      { background: var(--color-accent-soft);    color: var(--color-accent-ink); }
.badge-soft-danger    { background: var(--color-danger-soft);    color: var(--color-danger-ink); }
.badge-soft-warning   { background: var(--color-warning-soft);   color: var(--color-warning-ink); }
.badge-soft-secondary { background: var(--color-surface-2);      color: var(--color-text-muted); }

/* จุดนำหน้าเพื่อไม่พึ่งพาสีอย่างเดียว */
.badge[class*="badge-soft-"]::before {
  content: ""; display: inline-block; width: .45em; height: .45em;
  border-radius: 50%; background: currentColor; margin-right: .45em;
  vertical-align: .12em;
}
/* badge/ปุ่มแบบสีทึบ : ใช้เฉดเข้มพอให้ตัวอักษรสีขาวผ่าน WCAG AA */
.badge.text-bg-danger, .badge.text-bg-warning, .badge.text-bg-success, .badge.text-bg-primary { font-weight: var(--font-weight-semibold); }
.badge.text-bg-success   { background-color: var(--color-success-ink) !important; color: #fff !important; }
.badge.text-bg-danger    { background-color: var(--color-danger-ink) !important;  color: #fff !important; }
.badge.text-bg-secondary { background-color: var(--color-text-muted) !important;  color: #fff !important; }
.badge.text-bg-primary   { background-color: var(--color-primary) !important;     color: #fff !important; }
.badge.text-bg-info      { background-color: var(--color-secondary-ink) !important; color: #fff !important; }
/* เหลืองสว่างเกินกว่าจะใช้ตัวอักษรขาว จึงใช้ตัวอักษรสีเข้มแทน (6.4:1) */
.badge.text-bg-warning   { background-color: var(--color-warning) !important; color: #26313F !important; }

/* ป้ายในการ์ด : จำกัดหนึ่งบรรทัดพร้อมจุดไข่ปลา เพื่อให้การ์ดสูงเท่ากันและไม่ล้น */
.card-body .badge, .card .badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ตัวเลขแจ้งเตือน : ต้องอยู่บรรทัดเดียวเสมอ ไม่ตัดเป็น 1 / 0 */
.badge.position-absolute, .sb-badge, .badge.rounded-pill {
  white-space: nowrap;
  min-width: 1.5em;
  text-align: center;
}

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem; border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-size: var(--font-size-xs); border: 1px solid transparent;
}
.chip.is-active { background: var(--color-primary); color: #fff; }

/* =====================================================================
   8. ALERT / TOAST / FEEDBACK
   ===================================================================== */

.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.alert > i:first-child { font-size: 1.15rem; line-height: 1.4; flex: none; }
.alert-success { background: var(--color-success-soft); border-color: #C7E3D5; color: var(--color-success-ink); }
.alert-danger  { background: var(--color-danger-soft);  border-color: #F2CFCD; color: var(--color-danger-ink); }
.alert-warning { background: var(--color-warning-soft); border-color: #F7D9C0; color: var(--color-warning-ink); }
.alert-info    { background: var(--color-secondary-soft); border-color: #C9E3F8; color: var(--color-secondary-ink); }
.alert-primary { background: var(--color-primary-soft); border-color: var(--color-primary-soft-2); color: var(--color-primary); }
.alert .btn-close { margin-left: auto; }

.swal2-popup { border-radius: var(--radius-xl) !important; font-family: var(--font-family) !important; }
.swal2-title { font-size: var(--font-size-h3) !important; font-weight: var(--font-weight-semibold) !important; }
.swal2-html-container { font-size: var(--font-size-sm) !important; line-height: var(--line-height-relaxed) !important; }
.swal2-styled { border-radius: var(--radius-md) !important; min-height: var(--control-height); font-weight: var(--font-weight-medium) !important; }
.swal2-toast { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
.swal2-toast .swal2-title { font-size: var(--font-size-sm) !important; }

/* =====================================================================
   9. สถานะว่าง (EMPTY STATE)
   ===================================================================== */

.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--color-text-muted);
  max-width: 440px; margin-inline: auto;
}
.empty-state > .empty-icon {
  width: 68px; height: 68px; border-radius: var(--radius-xl);
  background: var(--color-surface-2); color: var(--color-text-subtle);
  display: grid; place-items: center; margin: 0 auto var(--space-4);
  font-size: 1.85rem;
}
.empty-state > i { font-size: 2.4rem; color: var(--color-border-strong); display: block; margin-bottom: var(--space-3); }
.empty-state h5 {
  color: var(--color-text); font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2);
}
.empty-state p { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.empty-state--sm { padding: var(--space-5) var(--space-4); }
.empty-state--sm > .empty-icon { width: 52px; height: 52px; font-size: 1.4rem; }

/* =====================================================================
   10. SKELETON LOADING
   ===================================================================== */

.skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, #F6F8FB 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: seep-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: block;
}
@keyframes seep-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-line { height: 1rem; margin-bottom: var(--space-2); }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-title { height: 1.5rem; width: 60%; margin-bottom: var(--space-4); }
.skeleton-box { height: 120px; border-radius: var(--radius-lg); }
.skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }

/* =====================================================================
   11. เลย์เอาต์แอป (SHELL) — SIDEBAR + TOPBAR
   ===================================================================== */

.app-shell { display: flex; min-height: 100vh; background: var(--color-background); }

.app-sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-on-dark);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent;
  transition: width var(--transition-base);
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.app-sidebar .sb-brand {
  padding: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: var(--topbar-height);
}
.app-sidebar .sb-brand a { color: #fff; font-family: var(--font-family-heading); font-weight: var(--font-weight-bold); }
.app-sidebar .sb-brand a:hover { text-decoration: none; color: #fff; }

.app-sidebar .sb-user {
  padding: var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.app-sidebar .sb-user .n { color: #fff; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.app-sidebar .sb-user .r { color: var(--color-on-dark-faint); font-size: var(--font-size-xs); }

.app-sidebar .sb-nav { padding: var(--space-2) 0 var(--space-4); }

/* หัวข้อกลุ่มเมนู — กดเพื่อยุบ/ขยาย */
.app-sidebar .sb-section {
  color: var(--color-on-dark-faint);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .06em;
  padding: var(--space-4) var(--space-4) var(--space-2);
  display: block;
}
.app-sidebar .sb-group-toggle {
  width: 100%; background: none; border: 0; text-align: left;
  color: var(--color-on-dark-faint);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .06em;
  padding: var(--space-3) var(--space-4) var(--space-2);
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer; transition: color var(--transition-fast);
}
.app-sidebar .sb-group-toggle:hover { color: #fff; }
.app-sidebar .sb-group-toggle .caret {
  margin-left: auto; font-size: .8em; transition: transform var(--transition-base);
}
.app-sidebar .sb-group-toggle[aria-expanded="false"] .caret { transform: rotate(-90deg); }
.app-sidebar .sb-group-toggle .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none;
  opacity: 0; transition: opacity var(--transition-fast);
}
.app-sidebar .sb-group-toggle[aria-expanded="false"].has-active .dot { opacity: 1; }

.app-sidebar .sb-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: .6rem var(--space-4);
  color: var(--color-on-dark);
  font-size: var(--font-size-sm);
  min-height: 42px;
  border-left: 3px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.app-sidebar .sb-link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.app-sidebar .sb-link.active {
  background: rgba(255,255,255,.14);
  border-left-color: var(--color-accent);
  color: #fff;
  font-weight: var(--font-weight-semibold);
}
.app-sidebar .sb-link i { width: 20px; text-align: center; font-size: 1.05rem; flex: none; opacity: .9; }
.app-sidebar .sb-link.active i { opacity: 1; color: var(--color-accent); }
.app-sidebar .sb-link .sb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar .sb-badge { margin-left: auto; font-size: var(--font-size-xs); flex: none; }
.app-sidebar .sb-foot { margin-top: auto; padding: var(--space-4); }

/* โหมดย่อ sidebar บนจอใหญ่ */
@media (min-width: 992px) {
  .app-shell.sidebar-collapsed .app-sidebar { width: var(--sidebar-width-collapsed); }
  .app-shell.sidebar-collapsed .app-sidebar .sb-text,
  .app-shell.sidebar-collapsed .app-sidebar .sb-brand span:not(.brand-mark),
  .app-shell.sidebar-collapsed .app-sidebar .sb-user > div,
  .app-shell.sidebar-collapsed .app-sidebar .sb-group-toggle span,
  .app-shell.sidebar-collapsed .app-sidebar .sb-group-toggle .caret,
  .app-shell.sidebar-collapsed .app-sidebar .sb-foot .btn span { display: none; }
  .app-shell.sidebar-collapsed .app-sidebar .sb-group-toggle { justify-content: center; padding-inline: 0; }
  .app-shell.sidebar-collapsed .app-sidebar .sb-link { justify-content: center; padding-inline: 0; gap: 0; }
  .app-shell.sidebar-collapsed .app-sidebar .sb-badge {
    position: absolute; margin: 0; transform: translate(14px, -12px); padding: .1em .4em; font-size: 11px;
  }
  .app-shell.sidebar-collapsed .app-sidebar .sb-link { position: relative; }
  .app-shell.sidebar-collapsed .app-sidebar .sb-user { justify-content: center; }
  .app-shell.sidebar-collapsed .app-sidebar .sb-brand { justify-content: center; }
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: var(--topbar-height);
}
.app-topbar .tb-title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.app-content {
  padding: var(--page-padding) var(--page-padding) var(--space-8);
  flex: 1;
  width: 100%;
}
.app-content > * { max-width: var(--content-max); }
.app-content.is-wide > * { max-width: none; }

.page-head {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.page-head h1 { font-size: var(--font-size-h1-fluid); margin: 0; }
.page-head .sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-top: var(--space-2);
  max-width: var(--measure);
}
.page-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--color-text-muted);
  --bs-breadcrumb-item-padding-x: .5rem;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-item.active { color: var(--color-text); }

@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed; left: 0; top: 0; z-index: var(--z-sidebar);
    transform: translateX(-100%); transition: transform var(--transition-slow);
    width: min(78vw, 300px);
  }
  .app-sidebar.show { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .app-backdrop {
    position: fixed; inset: 0; background: rgba(15, 30, 52, .55);
    z-index: var(--z-backdrop); backdrop-filter: blur(2px);
    animation: seep-fade var(--transition-base) ease;
  }
  @keyframes seep-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 575.98px) {
  .app-content { padding: var(--page-padding-mobile) var(--page-padding-mobile) var(--space-7); }
  .app-topbar { padding-inline: var(--page-padding-mobile); }
  .page-head { gap: var(--space-3); margin-bottom: var(--space-4); }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; }
}

/* =====================================================================
   12. แถบนำทางสาธารณะ (PUBLIC NAV) + FOOTER
   ===================================================================== */

.navbar-seep {
  background: var(--color-primary);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
  padding-block: var(--space-2);
  min-height: 66px;
}
.navbar-seep .navbar-brand {
  color: #fff; font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading);
}
.navbar-seep .navbar-brand:hover { color: #fff; text-decoration: none; }
.navbar-seep .nav-link {
  color: var(--color-on-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: .5rem .85rem;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.navbar-seep .nav-link:hover, .navbar-seep .nav-link:focus { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
.navbar-seep .nav-link.active { color: #fff; background: rgba(255,255,255,.15); font-weight: var(--font-weight-semibold); }
.navbar-seep .dropdown-menu {
  border-color: var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
}
.navbar-seep .offcanvas .nav-link { font-size: var(--font-size-body); min-height: var(--touch-min); display: flex; align-items: center; }

.dropdown-menu {
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
  animation: seep-pop var(--transition-fast) ease;
}
@keyframes seep-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: .55rem .75rem;
  min-height: 40px;
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--color-text);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-primary-soft); color: var(--color-primary); }
.dropdown-item.text-danger:hover { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.dropdown-item i { width: 18px; text-align: center; opacity: .8; }
.dropdown-header { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); }
.dropdown-divider { border-color: var(--color-border); }

.brand-mark {
  width: 40px; height: 40px; border-radius: var(--radius-md); flex: none;
  background: linear-gradient(140deg, var(--color-secondary), var(--color-primary-600));
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold); font-size: 11px;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.footer-seep {
  background: var(--color-primary);
  color: var(--color-on-dark-muted);
  padding: var(--space-8) 0 var(--space-5);
  margin-top: var(--space-8);
  font-size: var(--font-size-sm);
  position: relative; overflow: hidden;
}
.footer-seep h6 {
  color: #fff; font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4); font-size: var(--font-size-body);
}
.footer-seep a { color: var(--color-on-dark-muted); }
.footer-seep a:hover { color: #fff; }
.footer-seep .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: var(--space-6); padding-top: var(--space-4);
  font-size: var(--font-size-xs); color: var(--color-on-dark-faint);
}
.footer-seep > .container { position: relative; z-index: 1; }

/* =====================================================================
   13. อัตลักษณ์ศรีสะเกษ (SISAKET IDENTITY)
   ใช้เฉพาะ Hero / Login / Landing / Footer เท่านั้น — ไม่ใส่ทุกการ์ด
   ===================================================================== */

/* ลายตารางเส้นบาง สื่อถึงเครือข่ายที่เชื่อมโยงกัน */
.sk-grid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(255,255,255,.055) 71px 72px),
    repeating-linear-gradient(0deg,  transparent 0 71px, rgba(255,255,255,.055) 71px 72px);
  -webkit-mask-image: radial-gradient(120% 90% at 82% 8%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 82% 8%, #000 0%, transparent 72%);
}

/* ลายผ้าพื้นถิ่นแบบนามธรรม — เส้นทองบางมาก ใช้เป็นแถบคั่น */
.sk-weave {
  position: absolute; inset-inline: 0; height: 4px;
  background:
    repeating-linear-gradient(90deg,
      var(--color-accent) 0 14px,
      transparent 14px 22px,
      rgba(217,164,65,.45) 22px 30px,
      transparent 30px 44px);
  opacity: .8;
}
.sk-weave-top { top: 0; }
.sk-weave-bottom { bottom: 0; }
.sk-weave { opacity: .55; }

/* เงาโครงร่างจังหวัด/สถาปัตยกรรมเขมร — จาง ๆ อยู่เบื้องหลัง */
.sk-emblem {
  position: absolute; pointer-events: none; opacity: .1;
  color: #fff;
}
.sk-emblem svg { display: block; width: 100%; height: auto; }

/* แถบทองบาง ๆ คั่นส่วน */
.sk-rule {
  display: block;
  height: 3px; width: 56px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-accent), rgba(217,164,65,.25));
  margin-bottom: var(--space-4);
}
.text-center > .sk-rule, .sk-rule.mx-auto { margin-inline: auto; }

/* =====================================================================
   14. HERO / หัวหน้าเพจสาธารณะ
   ===================================================================== */

.hero {
  background:
    radial-gradient(115% 130% at 88% -10%, rgba(41,182,246,.30) 0%, transparent 58%),
    linear-gradient(158deg, var(--color-primary) 0%, var(--color-primary-600) 66%, #1D6294 100%);
  color: #fff;
  padding: var(--space-8) 0 var(--space-7);
  position: relative; overflow: hidden;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  letter-spacing: -.015em;
  color: #fff;
  line-height: 1.25;
  text-wrap: balance;
}
.hero .hero-en {
  color: var(--color-accent);
  letter-spacing: .13em;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}
.hero .lead {
  color: var(--color-on-dark);
  max-width: 40rem;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}
.hero-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  height: 100%;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.hero-stat:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.hero-stat > i { color: var(--color-sky); font-size: 1.1rem; }
.hero-stat .v {
  font-family: var(--font-family-heading);
  font-size: 1.6rem; font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums; color: #fff; line-height: 1.2;
}
.hero-stat .l { color: var(--color-on-dark-muted); font-size: var(--font-size-xs); }

@media (max-width: 767.98px) {
  .hero { padding: var(--space-7) 0 var(--space-6); }
  .hero .lead { font-size: var(--font-size-body); }
}

.page-hero {
  background:
    radial-gradient(100% 160% at 92% 0%, rgba(41,182,246,.22) 0%, transparent 60%),
    linear-gradient(150deg, var(--color-primary), var(--color-primary-600));
  color: #fff;
  padding: var(--space-6) 0;
  position: relative; overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: var(--font-size-h1-fluid); margin: 0; }
.page-hero .crumbs { font-size: var(--font-size-xs); margin-bottom: var(--space-2); }
.page-hero .crumbs a { color: var(--color-on-dark-muted); }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero .sub {
  color: var(--color-on-dark); max-width: var(--measure);
  margin: var(--space-3) 0 0; font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* =====================================================================
   15. ตัวกรอง / ค้นหา (FILTER & SEARCH)
   ===================================================================== */

.filter-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.filter-bar .form-label { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.search-hero .form-control { border: 0; }
.search-hero .input-group {
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.search-hero .input-group-text { background: #fff; border: 0; }
@media (max-width: 575.98px) {
  .filter-bar { padding: var(--space-4); }
}

/* =====================================================================
   16. PAGINATION
   ===================================================================== */

.pagination { --bs-pagination-border-radius: var(--radius-md); gap: var(--space-1); }
.page-link {
  border-radius: var(--radius-md);
  border-color: var(--color-border);
  color: var(--color-text);
  min-width: var(--control-height); min-height: var(--control-height);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.page-link:hover { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary-soft-2); }
.page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: var(--font-weight-semibold); }
.page-item.disabled .page-link { color: var(--color-text-subtle); background: transparent; }

/* =====================================================================
   17. MODAL / OFFCANVAS
   ===================================================================== */

.modal-content { border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
.modal-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-title { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); }
.modal-body { padding: var(--space-5); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.modal-footer { border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); gap: var(--space-2); }
.modal-backdrop.show { opacity: .55; }
.offcanvas { border: 0; }
.offcanvas-header { padding: var(--space-4) var(--space-5); }
.offcanvas-body { padding: var(--space-4) var(--space-5); }
@media (max-width: 575.98px) {
  .modal-header, .modal-body { padding: var(--card-padding-mobile); }
  .modal-footer { padding: var(--space-3) var(--card-padding-mobile); }
  .modal-footer .btn { flex: 1 1 auto; }
}

/* =====================================================================
   18. ไทม์ไลน์ / รายการ / อื่น ๆ
   ===================================================================== */

.timeline { position: relative; padding-left: var(--space-6); }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--color-border);
}
.timeline-item { position: relative; padding-bottom: var(--space-4); }
.timeline-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-6) + 4px); top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-secondary); border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--color-secondary-soft);
}
.timeline-item .t-time { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.avatar { border-radius: 50%; object-fit: cover; background: var(--color-surface-2); flex: none; }
.avatar-initial {
  border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-primary-soft); color: var(--color-primary);
  font-weight: var(--font-weight-semibold); font-family: var(--font-family-heading);
}

.progress { background: var(--color-surface-2); border-radius: var(--radius-pill); height: 8px; }
.progress-bar { background: var(--color-secondary); border-radius: var(--radius-pill); transition: width var(--transition-slow); }
.progress-bar.bg-success { background: var(--color-success) !important; }

.chart-box { position: relative; height: 300px; }
.chart-box-sm { position: relative; height: 240px; }

.list-tidy { list-style: none; padding: 0; margin: 0; }
.list-tidy li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.list-tidy li:last-child { border-bottom: none; }

.notif-item {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}
.notif-item:hover { background: var(--color-surface-2); }
.notif-item.unread { background: var(--color-primary-soft); }
.notif-item.unread:hover { background: var(--color-primary-soft-2); }
.notif-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cover-16x9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--color-surface-2); }
.cover-4x3  { aspect-ratio: 4 / 3;  object-fit: cover; width: 100%; background: var(--color-surface-2); }

.district-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); margin: 0 var(--space-1) var(--space-2) 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.district-chip:hover { border-color: var(--color-secondary); background: var(--color-secondary-soft); text-decoration: none; }
.district-chip .n { color: var(--color-primary-600); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

.nav-tabs { border-bottom-color: var(--color-border); gap: var(--space-1); }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  color: var(--color-text-muted); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium); padding: .6rem 1rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.nav-tabs .nav-link:hover { background: var(--color-surface-2); color: var(--color-text); border-bottom-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--color-primary); background: transparent;
  border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold);
}

.accordion-button { font-size: var(--font-size-body); font-weight: var(--font-weight-medium); border-radius: var(--radius-md) !important; }
.accordion-button:not(.collapsed) { background: var(--color-primary-soft); color: var(--color-primary); box-shadow: none; }
.accordion-item { border-color: var(--color-border); border-radius: var(--radius-lg); }

/* =====================================================================
   19. การจับคู่ (MATCHING)
   ===================================================================== */

.match-score {
  width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--color-secondary) calc(var(--v) * 1%), var(--color-surface-2) 0);
}
.match-score::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--color-surface); }
.match-score span {
  position: relative; z-index: 1; font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-body);
  color: var(--color-secondary-ink); font-variant-numeric: tabular-nums;
}
.match-score.is-high { background: conic-gradient(var(--color-success) calc(var(--v) * 1%), var(--color-surface-2) 0); }
.match-score.is-high span { color: var(--color-success-ink); }
.match-score.is-low { background: conic-gradient(var(--color-accent) calc(var(--v) * 1%), var(--color-surface-2) 0); }
.match-score.is-low span { color: var(--color-accent-ink); }

.reason-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.reason-list li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--font-size-xs); color: var(--color-text-muted); padding: .22rem 0;
}
.reason-list li b { color: var(--color-primary-600); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

.workflow-steps { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.workflow-steps .step {
  font-size: var(--font-size-xs); padding: .28rem .7rem; border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--color-text-muted); white-space: nowrap;
}
.workflow-steps .step.done { background: var(--color-success-soft); color: var(--color-success-ink); }
.workflow-steps .step.current { background: var(--color-primary); color: #fff; font-weight: var(--font-weight-semibold); }

/* =====================================================================
   20. ห้องเรียนออนไลน์ (LEARNING)
   ===================================================================== */

.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-list a {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text); font-size: var(--font-size-sm);
  text-decoration: none; align-items: flex-start;
  border-left: 3px solid transparent;
  transition: background-color var(--transition-fast);
}
.lesson-list a:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.lesson-list a.active {
  background: var(--color-primary-soft); color: var(--color-primary);
  font-weight: var(--font-weight-medium); border-left-color: var(--color-primary);
}
.lesson-list .num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-surface-2); color: var(--color-text-muted);
  display: grid; place-items: center; font-size: var(--font-size-xs);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.lesson-list .num.done { background: var(--color-success-soft); color: var(--color-success-ink); }

.video-frame { position: relative; padding-top: 56.25%; background: #000; border-radius: var(--radius-lg); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lesson-body {
  font-size: var(--font-size-lg); line-height: 1.95;
  white-space: pre-line; max-width: var(--measure); color: var(--color-text);
}

.quiz-option {
  display: block; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2); cursor: pointer; font-size: var(--font-size-sm);
  min-height: var(--touch-min);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.quiz-option:hover { border-color: var(--color-secondary); background: var(--color-secondary-soft); }
.quiz-option.correct { border-color: var(--color-success); background: var(--color-success-soft); }
.quiz-option.wrong   { border-color: var(--color-danger);  background: var(--color-danger-soft); }

/* =====================================================================
   21. เกียรติบัตร (พิมพ์ — คงสีตายตัวเพื่อความคมชัดบนกระดาษ)
   ===================================================================== */

.certificate {
  width: 297mm; max-width: 100%; min-height: 210mm; margin: 0 auto; background: #fff; position: relative;
  padding: 22mm 24mm; box-sizing: border-box; box-shadow: 0 10px 40px -18px rgba(22,59,101,.5);
  border: 10px solid #163B65; outline: 2px solid #D9A441; outline-offset: -18px;
}
.certificate .cert-inner { position: relative; z-index: 1; text-align: center; height: 100%; display: flex; flex-direction: column; }
.certificate h1 { font-family: var(--font-family-heading); font-size: 34pt; color: #163B65; margin: 0 0 4mm; letter-spacing: .02em; }
.certificate .cert-sub { color: #8A6516; font-size: 13pt; letter-spacing: .18em; text-transform: uppercase; font-family: var(--font-family-mono); }
.certificate .cert-name { font-family: var(--font-family-heading); font-size: 30pt; font-weight: 700; color: #174F7C; margin: 6mm 0 3mm; }
.certificate .cert-text { font-size: 13pt; color: #3E5470; line-height: 1.9; }
.certificate .cert-course { font-size: 18pt; font-weight: 600; color: #163B65; margin: 3mm auto; max-width: 82%; }
.certificate .cert-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; }
.certificate .cert-sign { text-align: center; font-size: 11pt; color: #3E5470; }
.certificate .cert-sign .line { border-top: 1px solid #163B65; width: 60mm; margin: 0 auto .5rem; }
.certificate .cert-meta { font-family: var(--font-family-mono); font-size: 8.5pt; color: #5F6B7A; text-align: left; }
.certificate .cert-seal {
  width: 26mm; height: 26mm; border-radius: 50%; border: 2px solid #D9A441; color: #8A6516;
  display: grid; place-items: center; font-family: var(--font-family-heading); font-weight: 700; font-size: 10pt;
  margin: 0 auto;
}
.certificate .watermark {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-family-heading); font-size: 120pt; color: rgba(22,59,101,.018); font-weight: 700;
  letter-spacing: .1em;
}
@media (max-width: 992px) {
  .certificate { padding: 12mm; min-height: auto; }
  .certificate h1 { font-size: 22pt; }
  .certificate .cert-name { font-size: 20pt; }
}

/* =====================================================================
   22. QR / เช็กอิน
   ===================================================================== */

.ticket-card { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.qr-box { display: grid; place-items: center; padding: var(--space-4); background: #fff; border-radius: var(--radius-md); }
#scanner-video { width: 100%; max-width: 420px; border-radius: var(--radius-lg); background: #000; }
.checkin-log { max-height: 340px; overflow-y: auto; }

/* =====================================================================
   23. พื้นที่ทำงานโครงการ (PROJECT WORKSPACE)
   ===================================================================== */

.ws-nav {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5); padding-bottom: 1px;
  scrollbar-width: none;
}
.ws-nav::-webkit-scrollbar { display: none; }
.ws-nav a {
  padding: .6rem 1rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--color-text-muted); text-decoration: none;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.ws-nav a:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.ws-nav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.ws-nav a .badge { font-size: 11px; }

.progress-ring {
  --p: 0;
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--color-secondary) calc(var(--p) * 1%), var(--color-surface-2) 0);
  position: relative; flex: none;
}
.progress-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-surface); }
.progress-ring span {
  position: relative; font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-h3);
  color: var(--color-primary); font-variant-numeric: tabular-nums;
}

.task-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 991px) { .task-board { grid-template-columns: 1fr; } }
.task-col { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.task-col > header {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm);
  display: flex; justify-content: space-between; align-items: center;
}
.task-col > .body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-height: 80px; }
.task-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  transition: box-shadow var(--transition-fast);
}
.task-card:hover { box-shadow: var(--shadow-sm); }
.task-card.p-high   { border-left-color: var(--color-danger); }
.task-card.p-normal { border-left-color: var(--color-secondary); }
.task-card.p-low    { border-left-color: var(--color-border-strong); }
.task-card .t-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.task-card .t-meta {
  font-size: var(--font-size-xs); color: var(--color-text-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2);
}
.task-card.done .t-title { text-decoration: line-through; color: var(--color-text-muted); }
.task-card .overdue { color: var(--color-danger-ink); font-weight: var(--font-weight-semibold); }

.thread { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); margin-bottom: var(--space-4); }
.thread > .head { padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-3); }
.thread .msg { white-space: pre-line; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); }
.thread .replies { border-top: 1px solid var(--color-border); background: var(--color-background); padding: var(--space-2) var(--space-5); }
.thread .reply { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.thread .reply:last-child { border-bottom: none; }
.thread .reply-form { padding: var(--space-3) var(--space-5) var(--space-4); }

.doc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.doc-row:last-child { border-bottom: none; }
.doc-ext {
  width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none;
  background: var(--color-primary-soft); color: var(--color-primary); font-family: var(--font-family-mono);
  font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase;
}
.budget-bar { height: 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
.budget-bar > span { display: block; height: 100%; background: var(--color-success); }

/* =====================================================================
   24. รายงานและ IMPACT
   ===================================================================== */

.report-tile {
  display: block; height: 100%; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); text-decoration: none; color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.report-tile:hover { border-color: var(--color-secondary); text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.report-tile.active { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: none; }
.report-tile > i { font-size: 1.35rem; color: var(--color-primary-600); }
.report-tile .t { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); margin-top: var(--space-2); }
.report-tile .d { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.55; margin-top: var(--space-1); }

.report-sheet {
  width: 210mm; max-width: 100%; margin: 0 auto; background: #fff; padding: 14mm 14mm 10mm;
  box-shadow: 0 10px 40px -18px rgba(22,59,101,.5);
}
.report-head { border-bottom: 2px solid var(--color-accent); padding-bottom: 10px; margin-bottom: 14px; }
.report-head .org { font-family: var(--font-family-heading); font-weight: 700; color: var(--color-primary); font-size: 13pt; }
.report-head .org-en { color: var(--color-text-muted); font-size: 8.5pt; letter-spacing: .06em; text-transform: uppercase; }
.report-head h1 { font-size: 17pt; color: var(--color-primary); margin: 8px 0 4px; }
.report-head .meta { color: var(--color-text-muted); font-size: 9pt; }
.report-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.report-summary .box { border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 12px; min-width: 120px; }
.report-summary .l { color: var(--color-text-muted); font-size: 8pt; }
.report-summary .v { font-family: var(--font-family-heading); font-weight: 700; font-size: 12pt; color: var(--color-primary); }
.report-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.report-table th, .report-table td { border: 1px solid var(--color-border); padding: 4px 6px; vertical-align: top; }
.report-table thead th { background: var(--color-surface-2); color: var(--color-primary); font-weight: 600; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tbody tr:nth-child(even) { background: #FAFCFE; }
.report-foot { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 8pt; }

/* =====================================================================
   25. การพิมพ์
   ===================================================================== */

@media print {
  .app-sidebar, .app-topbar, .navbar-seep, .footer-seep, .no-print, .skip-link { display: none !important; }
  .app-content { padding: 0; }
  .app-content > * { max-width: none; }
  body { background: #fff; font-size: 11pt; }
  .card { box-shadow: none; border-color: #ccc; }
  .report-sheet { width: auto; box-shadow: none; padding: 0; }
  .report-table thead { display: table-header-group; }
  .report-table tr { page-break-inside: avoid; }
}

/* =====================================================================
   26. ตัวช่วยเพิ่มเติม
   ===================================================================== */

.stack-sm > * + * { margin-top: var(--space-2); }
.stack    > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-5); }

.divider-gold { height: 2px; background: linear-gradient(90deg, var(--color-accent), transparent); border: 0; opacity: 1; }

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
}