:root {
      --app-bg: #f6f8fb;
      --app-surface: #ffffff;
      --app-surface-strong: #ffffff;
      --app-surface-soft: #f8fafc;
      --app-border: #e2e8f0;
      --app-border-strong: #94a3b8;
      --app-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
      --app-shadow-soft: 0 1px 3px rgba(15, 23, 42, 0.03);
      --app-primary: #2563eb;
      --app-primary-deep: #1d4ed8;
      --app-primary-soft: #eff6ff;
      --app-primary-strong: #1d4ed8;
      --app-text: #1e293b;
      --app-text-soft: #526176;
      --app-success-bg: #ecfdf5;
      --app-success-text: #166534;
      --app-danger-bg: #fef2f2;
      --app-danger-text: #b91c1c;
      --app-warning-bg: #fffbeb;
      --app-warning-text: #92400e;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background-color: var(--app-bg);
      color: var(--app-text);
      font-family: 'Noto Sans Thai', sans-serif;
      font-size: 1rem;
      min-height: 100vh;
    }

    h1, h2, h3, h4, h5, h6, .navbar-brand-text {
      font-family: 'Noto Sans Thai', sans-serif;
      font-weight: 600;
      letter-spacing: 0;
    }

    a {
      color: var(--app-primary-strong);
    }

    a:hover {
      color: var(--app-primary-deep);
    }

    .container.app-page,
    .container-fluid.app-page {
      padding-bottom: 1.25rem;
      padding-top: 1.25rem;
    }

    .app-navbar {
      background: var(--app-surface) !important;
      border-bottom: 1px solid var(--app-border);
      box-shadow: none;
      padding-bottom: 0.45rem;
      padding-top: 0.45rem;
    }

    .app-navbar .navbar-brand {
      align-items: center;
      display: inline-flex;
      gap: 0.35rem;
    }

    .app-navbar .navbar-brand-text {
      color: var(--app-text);
      font-size: 1.15rem;
      font-weight: 600;
      line-height: 1.1;
    }

    .app-navbar .navbar-brand-subtext {
      color: var(--app-text-soft);
      display: block;
      font-family: 'Noto Sans Thai', sans-serif;
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0;
      margin-top: 0.12rem;
    }

    .app-navbar .nav-link {
      border-radius: 6px;
      color: var(--app-text-soft) !important;
      font-size: 0.88rem;
      font-weight: 500;
      padding: 0.34rem 0.68rem !important;
      transition: 0.2s ease;
    }

    .app-navbar .nav-link:hover,
    .app-navbar .nav-link:focus {
      background: var(--app-primary-soft);
      color: var(--app-primary-deep) !important;
    }

    .app-navbar .nav-link.disabled,
    .app-navbar .nav-link.disabled:hover {
      background: rgba(255, 255, 255, 0.06);
      color: var(--app-text-soft) !important;
      opacity: 1;
    }

    .app-settings-toggle {
      align-items: center;
      display: inline-flex;
      font-size: 1.15rem;
      justify-content: center;
      min-width: 2.1rem;
    }

    .app-navbar .dropdown-menu {
      border-color: var(--app-border);
      box-shadow: var(--app-shadow-soft);
    }

    .app-navbar .dropdown-header {
      color: var(--app-text-soft);
      font-size: 0.8rem;
    }

    .app-hero {
      background: var(--app-surface-strong);
      border: 1px solid var(--app-border);
      border-radius: 12px;
      box-shadow: var(--app-shadow);
      color: var(--app-text);
      margin-bottom: 1rem;
      overflow: hidden;
      padding: 1.25rem 1.35rem;
      position: relative;
    }

    .app-hero.compact {
      padding: 1rem 1.15rem;
    }

    .app-hero > * {
      position: relative;
      z-index: 1;
    }

    .app-kicker {
      color: var(--app-primary);
      display: inline-block;
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0;
      margin-bottom: 0.45rem;
      text-transform: uppercase;
    }

    .app-hero h1,
    .app-hero h2 {
      font-size: clamp(1.45rem, 2.2vw, 2rem);
      font-weight: 600;
      margin-bottom: 0.4rem;
    }

    .app-hero p {
      color: var(--app-text-soft);
      font-size: 0.96rem;
      margin-bottom: 0;
      max-width: 780px;
    }

    .app-metric-grid {
      display: grid;
      gap: 0.75rem;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      margin-bottom: 1rem;
    }

    .app-metric-card,
    .app-card {
      background: var(--app-surface);
      border: 1px solid var(--app-border);
      border-radius: 12px;
      box-shadow: var(--app-shadow-soft);
      overflow: hidden;
    }

    .app-metric-card {
      padding: 0.9rem 1rem;
    }

    .app-metric-label {
      color: var(--app-text-soft);
      display: block;
      font-size: 0.84rem;
      margin-bottom: 0.32rem;
    }

    .app-metric-value {
      color: var(--app-primary);
      font-family: 'Noto Sans Thai', sans-serif;
      font-size: 1.32rem;
      font-weight: 600;
      line-height: 1;
    }

    .app-card-header {
      align-items: flex-start;
      background: var(--app-surface-strong);
      border-bottom: 1px solid var(--app-border);
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      justify-content: space-between;
      padding: 0.9rem 1rem 0.78rem;
    }

    .app-card-header h2,
    .app-card-header h3 {
      font-size: 1.08rem;
      font-weight: 600;
      margin: 0;
    }

    .app-card-header p {
      color: var(--app-text-soft);
      font-size: 0.86rem;
      margin: 0.25rem 0 0;
    }

    .app-card-body {
      padding: 1rem;
    }

    .app-chip {
      background: var(--app-primary-soft);
      border: 1px solid #dbeafe;
      border-radius: 999px;
      color: var(--app-primary-deep);
      display: inline-flex;
      font-size: 0.8rem;
      font-weight: 500;
      gap: 0.35rem;
      padding: 0.32rem 0.6rem;
    }

    .app-page h1,
    .app-page h2,
    .app-page h3 {
      color: var(--app-text);
    }

    .text-muted {
      color: var(--app-text-soft) !important;
    }

    code {
      color: #9d174d;
    }

    pre.bg-light {
      background-color: var(--app-surface-soft) !important;
      border-color: var(--app-border) !important;
      border-radius: 12px !important;
      color: var(--app-text) !important;
    }

    pre.bg-light code {
      color: var(--app-primary-deep);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .form-label {
      color: var(--app-text);
      font-size: 0.92rem;
      font-weight: 500;
    }

    .form-control,
    .form-select,
    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
      background-color: var(--app-surface) !important;
      border: 1px solid var(--app-border-strong) !important;
      border-radius: 6px;
      box-shadow: none;
      color: var(--app-text) !important;
      padding: 0.56rem 0.72rem;
    }

    .form-control::placeholder {
      color: #64748b;
      opacity: 1;
    }

    .form-control:focus,
    .form-select:focus,
    .dataTables_wrapper .dataTables_filter input:focus,
    .dataTables_wrapper .dataTables_length select:focus {
      border-color: var(--app-primary) !important;
      box-shadow: 0 0 0 0.22rem rgba(37, 99, 235, 0.16);
    }

    .form-check-input {
      border-color: var(--app-border-strong);
    }

    .form-check-input:checked {
      background-color: var(--app-primary);
      border-color: var(--app-primary);
    }

    .btn {
      border-radius: 6px;
      font-size: 0.9rem;
      font-weight: 500;
      padding: 0.5rem 0.78rem;
    }

    .btn-sm {
      border-radius: 5px;
      font-size: 0.82rem;
      padding: 0.32rem 0.58rem;
    }

    .btn-primary,
    .bg-primary {
      background: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
      color: #fff !important;
    }

    .btn-primary:hover,
    .btn-primary:focus {
      background: var(--app-primary-deep) !important;
      border-color: var(--app-primary-deep) !important;
      color: #fff !important;
    }

    .btn-outline-primary {
      border-color: var(--bs-primary);
      color: var(--app-primary-deep);
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
      background: var(--app-primary);
      border-color: var(--app-primary);
      color: #fff;
    }

    .btn-outline-secondary,
    .btn-secondary {
      background: var(--app-surface);
      border-color: var(--app-border-strong);
      color: var(--app-text);
    }

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-secondary:hover,
    .btn-secondary:focus {
      background: #e2e8f0;
      border-color: var(--app-border-strong);
      color: var(--app-text);
    }

    .btn-warning {
      color: var(--app-text);
    }

    .btn-danger,
    .btn-outline-danger:hover {
      color: #fff;
    }

    .btn-outline-danger {
      border-color: var(--bs-danger);
      color: #b91c1c;
    }

    .btn-success,
    .bg-success {
      background: var(--bs-success) !important;
      border-color: var(--bs-success) !important;
      color: #fff !important;
    }

    .alert {
      border: 1px solid var(--app-border);
      border-radius: 12px;
      box-shadow: var(--app-shadow-soft);
    }

    .badge {
      border-radius: 999px;
      font-weight: 500;
      padding: 0.32rem 0.56rem;
    }

    .table {
      --bs-table-bg: transparent;
      --bs-table-color: var(--app-text);
      --bs-table-border-color: var(--app-border);
      --bs-table-striped-bg: #f8fafc;
      --bs-table-striped-color: var(--app-text);
      --bs-table-hover-bg: #f1f5f9;
      --bs-table-hover-color: var(--app-text);
      margin-bottom: 0;
    }

    .table thead th {
      background: var(--app-surface-soft);
      border-bottom: 1px solid var(--app-border);
      color: var(--app-primary-deep);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0;
      padding: 0.65rem 0.7rem;
      text-transform: uppercase;
    }

    .table tbody td {
      font-size: 0.88rem;
      padding: 0.62rem 0.7rem;
      vertical-align: middle;
    }

    .table tbody tr:hover {
      background: #f1f5f9;
    }

    .table-responsive {
      border-radius: 12px;
    }

    .modal-content {
      border: 1px solid var(--app-border);
      border-radius: 12px;
      box-shadow: var(--app-shadow);
    }

    .modal-header {
      border-bottom-color: var(--app-border);
    }

    .modal-footer {
      border-top-color: var(--app-border);
    }

    .btn-close {
      filter: none;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
      margin-bottom: 0.65rem;
    }

    .dataTables_wrapper .dataTables_info {
      color: var(--app-text-soft);
      padding-top: 1rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
      color: var(--app-text) !important;
    }

    .dataTables_wrapper .page-link {
      background: var(--app-surface);
      border: 1px solid var(--app-border);
      border-radius: 6px;
      color: var(--app-text);
      margin: 0 0.15rem;
    }

    .dataTables_wrapper .page-item.active .page-link {
      background: var(--bs-primary);
      border-color: var(--bs-primary);
      color: #fff;
    }

    .app-list {
      display: grid;
      gap: 0.75rem;
      margin: 0;
      padding: 0;
    }

    .app-list-item {
      align-items: center;
      background: var(--app-surface-soft);
      border: 1px solid var(--app-border);
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      padding: 0.68rem 0.78rem;
    }

    .app-list-item strong {
      color: var(--app-primary-strong);
    }

    .app-empty-state {
      background: var(--app-surface);
      border: 1px dashed var(--app-border-strong);
      border-radius: 12px;
      color: var(--app-text-soft);
      padding: 1.4rem 1rem;
      text-align: center;
    }

    .app-footer {
      color: var(--app-text-soft);
      margin: 1.25rem auto 1rem;
      max-width: 1320px;
      padding: 0 1rem 0.8rem;
    }

    .app-footer hr {
      border-color: var(--app-border);
      margin-bottom: 1rem;
    }

    .swal2-popup {
      background: var(--app-surface-strong);
      border: 1px solid var(--app-border);
      color: var(--app-text);
    }

    .swal2-title,
    .swal2-html-container {
      color: var(--app-text);
    }

    @media (max-width: 991.98px) {
      .container.app-page,
      .container-fluid.app-page {
        padding-top: 1rem;
      }

      .app-hero {
        padding: 1rem;
      }

      .app-card-header,
      .app-card-body {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
      }
    }

/* Shared light workspace tokens. Keep Bootstrap components on the same palette. */
:root, [data-bs-theme="light"] {
  color-scheme: light;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-body-color: #1e293b;
  --bs-body-bg: #f6f8fb;
  --bs-secondary-color: #526176;
  --bs-border-color: #e2e8f0;
  --bs-link-color: #1d4ed8;
}
body { line-height: 1.65; }
.app-page { max-width: 1440px; }
.container.app-page { padding-top: 2rem; padding-bottom: 2rem; }
.app-navbar { padding: .8rem 0; }
.app-navbar .navbar-brand { max-width: calc(100% - 64px); margin-right: 0; white-space: normal; }
.app-navbar .navbar-brand-subtext { line-height: 1.5; }
.app-navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
.app-navbar .nav-link.active { background: var(--app-primary-soft); color: var(--app-primary-deep) !important; font-weight: 600; }
.app-navbar .dropdown-item { min-height: 44px; display: flex; align-items: center; }
.app-brand-mark { display: grid; place-items: center; width: 40px; height: 44px; color: var(--app-primary); flex: 0 0 auto; margin-right: .5rem; }
.app-hero, .app-hero.compact { background: transparent; border: 0; box-shadow: none; padding: .25rem 0 1rem; margin-bottom: 1rem; overflow: visible; }
.app-hero h1 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.4; }
.app-kicker { letter-spacing: .08em; font-size: .75rem; }
.app-metric-grid { gap: 1rem; }
.app-metric-card { padding: 1.2rem 1.4rem; }
.app-metric-value { font-size: 1.8rem; color: var(--app-text); line-height: 1.3; font-variant-numeric: tabular-nums; }
.app-card-header { padding: 1.2rem 1.4rem; }
.app-card-body { padding: 1.4rem; }
.app-card-header h2 { line-height: 1.5; }
.app-chip { align-items: center; line-height: 1.4; }
.btn, .form-control, .form-select { min-height: 44px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; transition: background-color .15s ease, border-color .15s ease; }
.btn-primary { --bs-btn-active-bg: #1d4ed8; --bs-btn-active-border-color: #1d4ed8; }
.btn-outline-primary { --bs-btn-active-bg: #2563eb; --bs-btn-active-border-color: #2563eb; }
.btn-outline-secondary:active { color: var(--app-text) !important; background: var(--app-border) !important; }
.btn-warning { background: #fffbeb; border-color: #d4a64d; color: #854d0e; }
.btn-danger { background: #b91c1c; border-color: #b91c1c; }
.btn-success, .bg-success { background: #15803d !important; border-color: #15803d !important; }
.form-control:disabled, .form-select:disabled { background: var(--app-surface-soft) !important; }
.form-control::file-selector-button { background: var(--app-surface-soft); color: var(--app-text); }
.form-check-input { width: 1.2em; height: 1.2em; }
a, button, summary, select { touch-action: manipulation; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--app-primary); outline-offset: 3px; }
.app-skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1100; padding: .75rem 1rem; background: white; }
.app-skip-link:focus { top: 1rem; }
.table thead th { background: var(--app-surface-soft); color: var(--app-text-soft); text-transform: none; padding: .85rem; }
.table tbody td { padding: 1rem .85rem; line-height: 1.6; }
.table td, .app-list-item, .app-card-header h2 { overflow-wrap: anywhere; }
.app-public-table td:first-child { min-width: 240px; }
.table-responsive { overscroll-behavior-x: contain; }
.app-list-item { gap: 1rem; }
.app-footer { font-size: .85rem; }
.app-document-form > summary { cursor: pointer; list-style: none; }
.app-document-form > summary::-webkit-details-marker { display: none; }
.app-document-form > summary::after { content: 'เปิดฟอร์ม +'; color: var(--app-primary-deep); font-weight: 600; }
.app-document-form[open] > summary::after { content: 'ย่อฟอร์ม −'; }
.app-results-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }
.app-results-bar p { margin: 0; color: var(--app-text-soft); }
.app-empty-state { padding: 2.5rem 1rem; }
@media (max-width: 767.98px) {
  .container.app-page { padding-top: 1.25rem; }
  .app-card-header, .app-card-body { padding: 1rem; }
  .app-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .app-metric-card { padding: 1rem; }
  .app-metric-label { font-size: .8rem; }
  .app-results-bar { flex-wrap: wrap; }
  .app-public-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-public-table, .app-public-table tbody { display: block; width: 100%; }
  .app-public-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .75rem 0; border-bottom: 1px solid var(--app-border); }
  .app-public-table td { display: block; border: 0; padding: .4rem; text-align: left !important; min-width: 0 !important; }
  .app-public-table td::before { content: attr(data-label); display: block; color: var(--app-text-soft); font-size: .75rem; margin-bottom: .2rem; }
  .app-public-table td:first-child, .app-public-table td:last-child, .app-public-table td:nth-child(5) { grid-column: 1 / -1; }
  .app-public-table td:last-child .d-flex { justify-content: flex-start !important; }
  .dataTables_wrapper .dataTables_filter input { max-width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (min-width: 768px) { .app-public-table th:first-child { width: 30%; } .app-public-table th:last-child { width: 22%; } }
.dataTables_wrapper .dataTables_length select { min-width: 5.5rem; padding-right: 2rem; }