:root {
  --ks-green: #0b5a2c;
  --ks-green-dark: #07401f;
  --ks-green-deep: #0d2114;
  --ks-charcoal: #17231b;
  --ks-gold: #c9a24b;
  --ks-gold-soft: #f4ecd9;
  --ks-bg: #f3f6f2;
  --ks-card: #ffffff;
  --ks-card-muted: #f8faf7;
  --ks-line: #d9e2d6;
  --ks-ink: #1a2b1f;
  --ks-muted: #6a7a66;
  --ks-success: #1d7a3f;
  --ks-warning: #b07b1e;
  --ks-danger: #b3362c;
  --ks-info: #2b6cb0;
  --ks-radius: 8px;
  --ks-control-radius: 6px;
  --ks-shadow: 0 6px 18px rgba(20, 40, 22, .07);
  --ks-shadow-lg: 0 16px 40px rgba(13, 33, 20, .12);
  --ks-focus: 0 0 0 .2rem rgba(11, 90, 44, .16);
}

html {
  background: var(--ks-bg);
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background: var(--ks-bg) !important;
  color: var(--ks-ink) !important;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #fff;
  background: var(--ks-green);
}

body.bg-dark,
body.bg-light,
body.text-light {
  background: var(--ks-bg) !important;
  color: var(--ks-ink) !important;
}

h1, h2, h3, h4 {
  color: var(--ks-ink);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}

h5, h6 {
  color: var(--ks-ink);
  font-weight: 700;
  letter-spacing: 0;
}

a {
  color: var(--ks-green);
}

a:hover {
  color: var(--ks-green-dark);
}

a,
button,
.btn,
.form-control,
.form-select {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

:focus-visible {
  outline: 3px solid rgba(201, 162, 75, .5);
  outline-offset: 2px;
}

.container {
  max-width: 1480px;
}

.container-fluid {
  max-width: 100%;
}

main,
.container.pb-5,
.container-fluid.pb-5 {
  min-width: 0;
}

.navbar,
.navbar.navbar-dark,
.navbar.bg-success,
.navbar.bg-dark,
nav.topbar {
  background: var(--ks-green-deep) !important;
  color: #fff;
  min-height: 62px;
  border-bottom: 1px solid rgba(201, 162, 75, .3);
  box-shadow: 0 6px 18px rgba(13, 33, 20, .16);
}

.navbar .navbar-brand {
  color: #fff !important;
  position: relative;
  padding-bottom: .45rem;
  font-weight: 800;
  letter-spacing: 0;
}

.navbar .navbar-brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .18rem;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: var(--ks-gold);
}

.navbar .nav-link,
.navbar .dropdown-item {
  font-weight: 600;
}

.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, .35);
  border-radius: var(--ks-control-radius);
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(201, 162, 75, .28);
}

.navbar .btn,
nav.topbar .btn {
  border-radius: var(--ks-control-radius);
  font-weight: 700;
}

.navbar .btn-light,
nav.topbar .btn-light {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .42);
}

.navbar .btn-light:hover,
.navbar .btn-light.active,
nav.topbar .btn-light:hover,
nav.topbar .btn-light.active {
  color: var(--ks-green-deep);
  background: var(--ks-gold-soft);
  border-color: var(--ks-gold);
}

.navbar .btn-outline-light,
nav.topbar .btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

.navbar .btn-outline-light:hover,
nav.topbar .btn-outline-light:hover {
  color: var(--ks-green-deep);
  background: var(--ks-gold-soft);
  border-color: var(--ks-gold);
}

.dropdown-menu {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  padding: 6px;
  box-shadow: var(--ks-shadow-lg);
}

.dropdown-item {
  border-radius: 5px;
  padding: .55rem .7rem;
}

.dropdown-header {
  color: var(--ks-muted);
  font-weight: 800;
  text-transform: uppercase;
  font-size: .7rem;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--ks-green);
  color: #fff;
}

.card,
.metric {
  background: var(--ks-card) !important;
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius) !important;
  box-shadow: var(--ks-shadow) !important;
}

.card:hover {
  border-color: #cbd8c7 !important;
}

.card-header {
  background: #fff !important;
  color: var(--ks-ink) !important;
  border-bottom: 1px solid var(--ks-line);
  border-left: 3px solid var(--ks-gold);
  font-weight: 700;
  padding: .85rem 1rem;
}

.card-body {
  padding: 1rem;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.metric .value,
.statCard b {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

.metric {
  position: relative;
  overflow: hidden;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ks-gold);
}

.table {
  color: var(--ks-ink);
  margin-bottom: 0;
}

.table-responsive {
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  scrollbar-gutter: stable;
  background: #fff;
}

.table thead th,
.table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ks-green) !important;
  color: #fff !important;
  border-color: var(--ks-green) !important;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

.table tbody tr:nth-child(even) {
  background: var(--ks-card-muted);
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background: #eef4ea;
}

.table td,
.table th {
  padding: 10px 12px;
  vertical-align: middle;
  border-color: #e7ede5;
}

.table tbody tr:last-child td {
  border-bottom-width: 0;
}

.table caption {
  color: var(--ks-muted);
  padding: .7rem .9rem;
}

.num,
.text-end {
  font-variant-numeric: tabular-nums;
}

.btn {
  min-height: 38px;
  border-radius: var(--ks-control-radius) !important;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  box-shadow: none;
}

.btn-sm {
  min-height: 32px;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
  transform: none;
  opacity: .58;
}

.btn-primary,
.btn-success {
  background: var(--ks-green);
  border-color: var(--ks-green);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background: var(--ks-green-dark);
  border-color: var(--ks-green-dark);
}

.btn-outline-primary,
.btn-outline-success {
  color: var(--ks-green);
  border-color: var(--ks-green);
}

.btn-outline-primary:hover,
.btn-outline-success:hover {
  color: #fff;
  background: var(--ks-green);
  border-color: var(--ks-green);
}

.btn-danger,
.btn-outline-danger:hover {
  background: var(--ks-danger);
  border-color: var(--ks-danger);
}

.btn-warning {
  color: #2f240a;
  background: var(--ks-gold);
  border-color: var(--ks-gold);
}

.btn-info {
  color: #fff;
  background: var(--ks-info);
  border-color: var(--ks-info);
}

.btn-light {
  color: var(--ks-ink);
  background: #fff;
  border-color: var(--ks-line);
}

.btn-light:hover {
  color: var(--ks-green-dark);
  background: var(--ks-card-muted);
  border-color: #bfcdbb;
}

.form-label,
label {
  color: var(--ks-ink);
  font-weight: 700;
}

.form-control,
.form-select,
textarea,
input,
select {
  border-color: var(--ks-line) !important;
  min-height: 40px;
  color: var(--ks-ink);
  background-color: #fff;
  border-radius: var(--ks-control-radius) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
  border-color: var(--ks-green);
  box-shadow: var(--ks-focus);
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: #899486;
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--ks-muted);
  background: #edf1eb;
  opacity: 1;
}

.input-group-text {
  color: var(--ks-muted);
  background: var(--ks-card-muted);
  border-color: var(--ks-line);
}

.form-check-input,
input[type="checkbox"],
input[type="radio"] {
  width: 1em;
  min-height: 1em;
  padding: 0;
  background-color: #fff;
}

.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--ks-green);
  border-color: var(--ks-green) !important;
}

.badge {
  border-radius: 999px;
  font-weight: 700;
}

.ks-badge,
.badge.text-bg-success,
.badge.bg-success {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: #e8f4ec !important;
  color: var(--ks-success) !important;
  border: 1px solid #bfdfc9;
}

.ks-badge.pending,
.badge.text-bg-warning,
.badge.bg-warning {
  background: var(--ks-gold-soft) !important;
  color: var(--ks-warning) !important;
  border: 1px solid #ead9ab;
}

.ks-badge.danger,
.badge.text-bg-danger,
.badge.bg-danger {
  background: #f8e8e6 !important;
  color: var(--ks-danger) !important;
  border: 1px solid #efc2bd;
}

.ks-badge.muted,
.badge.text-bg-secondary,
.badge.bg-secondary {
  background: #eef1ed !important;
  color: var(--ks-muted) !important;
  border: 1px solid #d5ddd1;
}

.alert {
  border-radius: var(--ks-radius);
  border: 1px solid var(--ks-line);
  border-left-width: 4px;
}

.modal-content,
.offcanvas,
.toast {
  color: var(--ks-ink);
  background: #fff;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow-lg);
}

.modal-header,
.modal-footer,
.offcanvas-header {
  border-color: var(--ks-line);
}

.modal-title {
  color: var(--ks-ink);
  font-weight: 800;
}

.nav-tabs {
  gap: 4px;
  border-bottom-color: var(--ks-line);
}

.nav-tabs .nav-link {
  color: var(--ks-muted);
  border-radius: var(--ks-control-radius) var(--ks-control-radius) 0 0;
  font-weight: 700;
}

.nav-tabs .nav-link.active {
  color: var(--ks-green-dark);
  border-color: var(--ks-line) var(--ks-line) #fff;
  box-shadow: inset 0 2px 0 var(--ks-gold);
}

.pagination {
  gap: 4px;
}

.page-link {
  color: var(--ks-green);
  border-color: var(--ks-line);
  border-radius: var(--ks-control-radius) !important;
}

.page-item.active .page-link {
  color: #fff;
  background: var(--ks-green);
  border-color: var(--ks-green);
}

.list-group-item,
.accordion-item,
.accordion-button {
  color: var(--ks-ink);
  background: #fff;
  border-color: var(--ks-line);
}

.accordion-button:not(.collapsed) {
  color: var(--ks-green-dark);
  background: #eef4ea;
  box-shadow: inset 0 -1px 0 var(--ks-line);
}

code,
pre,
.sku {
  font-family: Consolas, 'SFMono-Regular', monospace;
}

pre {
  color: #dce9de;
  background: var(--ks-charcoal);
  border: 1px solid #26372b;
  border-radius: var(--ks-radius);
  padding: 1rem;
}

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

.alert-success {
  color: var(--ks-success);
  background: #e8f4ec;
  border-left-color: var(--ks-success);
}

.alert-warning {
  color: var(--ks-warning);
  background: var(--ks-gold-soft);
  border-left-color: var(--ks-warning);
}

.alert-danger {
  color: var(--ks-danger);
  background: #f8e8e6;
  border-left-color: var(--ks-danger);
}

.alert-info {
  color: var(--ks-info);
  background: #eaf2fb;
  border-left-color: var(--ks-info);
}

.text-muted,
.small-muted {
  color: var(--ks-muted) !important;
}

.ks-admin-nav .navbar-brand {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ks-nav-links {
  align-items: center;
}

.ksGreenNav {
  color: #fff !important;
  background: var(--ks-green-deep) !important;
  border-bottom: 1px solid rgba(201, 162, 75, .3);
  box-shadow: 0 6px 18px rgba(13, 33, 20, .16);
}

.ksGreenNav .navInner {
  min-height: 62px;
}

.ksGreenNav .brand {
  color: #fff !important;
  font-weight: 800 !important;
}

.ksGreenNav .actions {
  align-items: center;
}

.ksGreenNav .navBtn {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--ks-control-radius) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ksGreenNav .btnLight {
  color: #fff !important;
  background: rgba(255, 255, 255, .08) !important;
}

.ksGreenNav .btnLight:hover {
  color: var(--ks-green-deep) !important;
  background: var(--ks-gold-soft) !important;
  border-color: var(--ks-gold);
}

.ksGreenNav .btnWarn {
  color: #2f240a !important;
  background: var(--ks-gold) !important;
  border-color: var(--ks-gold);
}

.shell .sidebar {
  background: var(--ks-charcoal) !important;
}

.shell .brandMark,
.shell .avatar,
.shell .bigAvatar {
  background-image: none !important;
}

.shell .avatar,
.shell .bigAvatar {
  background-color: #dff3e6 !important;
}

.shell .statCard,
.shell .panel {
  border-radius: var(--ks-radius) !important;
}

.ks-panel {
  background: var(--ks-card) !important;
  border: 1px solid var(--ks-line) !important;
  border-radius: var(--ks-radius) !important;
}

.ks-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ks-page-header h1,
.ks-page-header h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

.ks-page-header p {
  margin: .25rem 0 0;
  color: var(--ks-muted);
}

.ks-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ks-muted);
}

.ks-empty-state i {
  display: block;
  margin-bottom: .5rem;
  color: var(--ks-gold);
  font-size: 1.75rem;
}

.ks-filter-form {
  align-items: end;
}

.ks-mobile-cards td,
.ks-mobile-cards th {
  overflow-wrap: anywhere;
}

.ks-inline-form {
  align-items: center;
}

@media (max-width: 767.98px) {
  body {
    font-size: 14px;
  }

  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .navbar .container,
  .navbar .container-fluid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
  }

  .navbar {
    min-height: 56px;
  }

  .ksGreenNav .navInner {
    min-height: 56px;
  }

  .ksGreenNav .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px !important;
  }

  .ksGreenNav .navBtn {
    width: 100%;
  }

  .navbar .navbar-brand {
    width: auto;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.25;
    margin-right: 0;
    padding-right: 0;
  }

  .navbar .navbar-brand::after {
    width: 48px;
  }

  .ks-nav-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    width: 100%;
    gap: 6px !important;
  }

  .navbar-collapse {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .navbar > .container > .ms-auto.d-flex,
  .navbar > .container-fluid > .ms-auto.d-flex {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column: 1 / -1;
    width: 100%;
    gap: 6px !important;
  }

  .navbar > .container > .ms-auto.d-flex > *,
  .navbar > .container-fluid > .ms-auto.d-flex > * {
    width: 100%;
    min-width: 0;
  }

  .navbar > .container > .ms-auto.d-flex .btn,
  .navbar > .container-fluid > .ms-auto.d-flex .btn {
    width: 100%;
    white-space: normal;
  }

  .navbar-collapse .nav-actions,
  .navbar-collapse > .ms-auto.d-flex {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px !important;
    padding-top: .5rem;
  }

  .navbar-collapse .nav-actions > *,
  .navbar-collapse > .ms-auto.d-flex > * {
    width: 100%;
    min-width: 0;
  }

  .navbar-collapse .nav-actions .btn,
  .navbar-collapse > .ms-auto.d-flex .btn {
    width: 100%;
    white-space: normal;
  }

  .navbar-collapse .dropdown-menu {
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
  }

  .ks-nav-links .btn {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    white-space: normal;
    line-height: 1.15;
    padding: .42rem .35rem;
    font-size: .78rem;
  }

  .ks-panel {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .card-body,
  .card-header {
    padding: .8rem;
  }

  .ks-page-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav-actions,
  .toolbar,
  .btn-toolbar {
    flex-wrap: wrap;
  }

  .ks-filter-form {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .ks-filter-form .form-control,
  .ks-filter-form .form-select,
  .ks-filter-form .btn {
    width: 100%;
  }

  .row.g-3 {
    --bs-gutter-y: .75rem;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive:has(.ks-mobile-cards) {
    overflow-x: visible;
  }

  .ks-mobile-cards,
  .ks-mobile-cards tbody,
  .ks-mobile-cards tr,
  .ks-mobile-cards td {
    display: block;
    width: 100%;
  }

  .ks-mobile-cards {
    border-collapse: separate;
    border-spacing: 0;
  }

  .ks-mobile-cards thead {
    display: none;
  }

  .ks-mobile-cards tr {
    margin-bottom: .75rem;
    border: 1px solid var(--ks-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20, 40, 22, .06);
    overflow: hidden;
  }

  .ks-mobile-cards tr:last-child {
    margin-bottom: 0;
  }

  .ks-mobile-cards td {
    border: 0 !important;
    border-bottom: 1px solid #edf2ed !important;
    padding: 9px 10px !important;
    text-align: left !important;
  }

  .ks-mobile-cards td:last-child {
    border-bottom: 0 !important;
  }

  .ks-mobile-cards td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ks-muted);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
  }

  .ks-mobile-cards .ks-empty-cell::before {
    display: none;
  }

  .ks-mobile-cards .form-control,
  .ks-mobile-cards .form-select,
  .ks-mobile-cards .btn,
  .ks-mobile-cards .small-input,
  .ks-mobile-cards .stock-input,
  .ks-mobile-cards .status-select,
  .ks-mobile-cards .tracking-input {
    width: 100%;
    max-width: none;
  }

  .ks-mobile-cards .ks-inline-form {
    display: grid !important;
    grid-template-columns: 1fr;
    justify-content: stretch !important;
    gap: 6px !important;
  }

  .ks-mobile-cards td > .d-flex,
  .ks-mobile-cards .btn-group {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    width: 100%;
  }

  .ks-mobile-cards .btn-group .btn {
    flex: 1 1 100%;
    white-space: normal;
  }

  .toolbar .btn {
    flex: 1 1 140px;
    white-space: normal;
  }

  .modal-dialog {
    margin: .6rem;
  }

  .ks-mobile-cards .badge {
    max-width: 100%;
    white-space: normal;
  }

  .metric {
    min-height: 82px !important;
    padding: 12px !important;
  }

  .metric .fs-5,
  .metric .value {
    font-size: 1rem !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .ks-nav-links {
    grid-template-columns: 1fr;
  }

  .navbar-collapse .nav-actions,
  .navbar-collapse > .ms-auto.d-flex {
    grid-template-columns: 1fr;
  }

  .navbar > .container > .ms-auto.d-flex,
  .navbar > .container-fluid > .ms-auto.d-flex {
    grid-template-columns: 1fr;
  }

  .ksGreenNav .actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body {
    background: #fff !important;
  }

  .navbar,
  .toolbar,
  .nav-actions,
  .btn-toolbar,
  .no-print {
    display: none !important;
  }

  .card,
  .metric,
  .table-responsive {
    box-shadow: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   KS UI 2026 — ปรับหน้าเดิมให้เข้าชุดกับ "ระบบใหม่"
   ══════════════════════════════════════════════════════════════════
   วางไว้ท้ายไฟล์เพื่อทับค่าเดิมโดยไม่ต้องรื้อของเก่า ถ้าอยากย้อนกลับ
   ลบเฉพาะบล็อกนี้ได้เลย (สำรองไฟล์เดิมไว้ที่ admin-theme.css.bak)

   ยืมโทเคนชุดเดียวกับ ระบบใหม่/assets/app.css:
   เขียวสด #16a34a · มุมโค้ง 14px · เงานุ่มบางกว่าเดิม · เส้น #e2e8f0
   ตัวอักษร #0f172a · จังหวะเคลื่อนไหว 180ms
   ────────────────────────────────────────────────────────────────── */

:root {
  /* โทเคนของระบบใหม่ */
  --ks2-primary: #16a34a;
  --ks2-primary-hover: #15803d;
  --ks2-primary-pressed: #166534;
  --ks2-primary-soft: #f0fdf4;
  --ks2-primary-line: #bbf7d0;
  --ks2-bg: #f8fafc;
  --ks2-surface: #ffffff;
  --ks2-surface-soft: #f8fafc;
  --ks2-surface-muted: #f1f5f9;
  --ks2-text: #0f172a;
  --ks2-text-soft: #475569;
  --ks2-muted: #94a3b8;
  --ks2-line: #e2e8f0;
  --ks2-line-strong: #cbd5e1;
  --ks2-success: #16a34a;
  --ks2-success-soft: #f0fdf4;
  --ks2-info: #2563eb;
  --ks2-info-soft: #eff6ff;
  --ks2-warning: #ea580c;
  --ks2-warning-soft: #fff7ed;
  --ks2-danger: #dc2626;
  --ks2-danger-soft: #fef2f2;
  --ks2-gold: #ca8a04;
  --ks2-gold-soft: #fefce8;
  --ks2-radius-sm: 10px;
  --ks2-radius: 14px;
  --ks2-radius-lg: 18px;
  --ks2-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --ks2-shadow: 0 6px 24px rgba(15, 23, 42, .07);
  --ks2-shadow-lg: 0 24px 60px rgba(15, 23, 42, .16);
  --ks2-ring: 0 0 0 4px rgba(22, 163, 74, .18);
  --ks2-transition: 180ms cubic-bezier(.4, 0, .2, 1);

  /* ต่อทับโทเคนเดิม เพื่อให้ส่วนที่อ้าง --ks-* อยู่แล้วเปลี่ยนตามไปด้วย */
  --ks-green: var(--ks2-primary);
  --ks-green-dark: var(--ks2-primary-hover);
  --ks-bg: var(--ks2-bg);
  --ks-card: var(--ks2-surface);
  --ks-card-muted: var(--ks2-surface-soft);
  --ks-line: var(--ks2-line);
  --ks-ink: var(--ks2-text);
  --ks-muted: var(--ks2-text-soft);
  --ks-success: var(--ks2-success);
  --ks-warning: var(--ks2-warning);
  --ks-danger: var(--ks2-danger);
  --ks-info: var(--ks2-info);
  --ks-radius: var(--ks2-radius);
  --ks-control-radius: var(--ks2-radius-sm);
  --ks-shadow: var(--ks2-shadow-sm);
  --ks-shadow-lg: var(--ks2-shadow);
  --ks-focus: var(--ks2-ring);
}

html { background: var(--ks2-bg); }

body {
  background: var(--ks2-bg);
  color: var(--ks2-text);
  letter-spacing: -.006em;
}

/* ── การ์ด ── */
.card,
.metric {
  background: var(--ks2-surface);
  border: 1px solid var(--ks2-line);
  border-radius: var(--ks2-radius);
  box-shadow: var(--ks2-shadow-sm);
  transition: box-shadow var(--ks2-transition), border-color var(--ks2-transition), transform var(--ks2-transition);
}

.card:hover,
.metric:hover {
  border-color: var(--ks2-line-strong);
  box-shadow: var(--ks2-shadow);
  transform: none; /* การ์ดที่ขยับตอนชี้ทำให้ตารางยาว ๆ อ่านยาก */
}

.card-header {
  padding: 14px 16px;
  color: var(--ks2-text);
  background: var(--ks2-surface);
  border-bottom: 1px solid var(--ks2-line);
  font-weight: 700;
}

.card-footer {
  background: var(--ks2-surface-soft);
  border-top: 1px solid var(--ks2-line);
}

/* ── ปุ่ม ── */
.btn {
  --bs-btn-focus-box-shadow: var(--ks2-ring);
  /* ของเดิมล็อกไว้ด้วย !important จึงต้องแรงเท่ากัน */
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: color var(--ks2-transition), background-color var(--ks2-transition),
              border-color var(--ks2-transition), box-shadow var(--ks2-transition), transform var(--ks2-transition);
}

.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--ks2-ring); outline: none; }

.btn-success,
.btn-primary {
  --bs-btn-bg: var(--ks2-primary);
  --bs-btn-border-color: var(--ks2-primary);
  --bs-btn-hover-bg: var(--ks2-primary-hover);
  --bs-btn-hover-border-color: var(--ks2-primary-hover);
  --bs-btn-active-bg: var(--ks2-primary-pressed);
  --bs-btn-active-border-color: var(--ks2-primary-pressed);
  --bs-btn-disabled-bg: var(--ks2-primary);
  --bs-btn-disabled-border-color: var(--ks2-primary);
  box-shadow: 0 1px 2px rgba(22, 163, 74, .25);
}

.btn-success:hover,
.btn-primary:hover { box-shadow: 0 6px 16px rgba(22, 163, 74, .28); }

.btn-outline-success,
.btn-outline-primary {
  --bs-btn-color: var(--ks2-primary-hover);
  --bs-btn-border-color: var(--ks2-primary-line);
  --bs-btn-hover-bg: var(--ks2-primary);
  --bs-btn-hover-border-color: var(--ks2-primary);
  --bs-btn-active-bg: var(--ks2-primary-pressed);
}

.btn-danger  { --bs-btn-bg: var(--ks2-danger);  --bs-btn-border-color: var(--ks2-danger); }
.btn-warning { --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }

.btn-light,
.btn-outline-secondary {
  --bs-btn-color: var(--ks2-text-soft);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--ks2-line-strong);
  --bs-btn-hover-bg: var(--ks2-surface-muted);
  --bs-btn-hover-border-color: var(--ks2-line-strong);
  --bs-btn-hover-color: var(--ks2-text);
}

/* ปุ่มจิ๋วในตาราง — คงขนาดเดิมไว้ แค่เก็บมุมให้เข้าชุด */
.btn-xs,
.btn-sm { border-radius: 9px !important; }

/* ── ช่องกรอก ── */
.form-control,
.form-select {
  color: var(--ks2-text);
  background-color: #fff;
  border: 1px solid var(--ks2-line-strong);
  border-radius: var(--ks2-radius-sm);
  transition: border-color var(--ks2-transition), box-shadow var(--ks2-transition);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ks2-primary);
  box-shadow: var(--ks2-ring);
}

.form-control::placeholder { color: var(--ks2-muted); }
.form-control:disabled,
.form-control[readonly] { background-color: var(--ks2-surface-muted); color: var(--ks2-text-soft); }
.form-label { color: var(--ks2-text-soft); font-weight: 600; }
.form-text { color: var(--ks2-muted); }

.form-check-input:checked {
  background-color: var(--ks2-primary);
  border-color: var(--ks2-primary);
}
.form-check-input:focus { border-color: var(--ks2-primary); box-shadow: var(--ks2-ring); }

.input-group-text {
  color: var(--ks2-text-soft);
  background: var(--ks2-surface-muted);
  border-color: var(--ks2-line-strong);
  border-radius: var(--ks2-radius-sm);
}

/* ── ตาราง ── */
.table {
  --bs-table-hover-bg: var(--ks2-primary-soft);
  --bs-table-striped-bg: #fbfcfd;
  color: var(--ks2-text);
  border-color: var(--ks2-line);
}

/* หัวตารางเดิมบังคับเขียวเข้มด้วย !important จึงต้องเขียนให้แรงเท่ากันเพื่อเปลี่ยนเป็นโทนอ่อนแบบระบบใหม่
   (หัวตารางยังตรึงอยู่บนสุดตอนเลื่อนเหมือนเดิม แค่เปลี่ยนสี) */
.table thead th,
.table > thead > tr > th,
.table > thead th {
  color: var(--ks2-text-soft) !important;
  background: var(--ks2-surface-soft) !important;
  border-color: var(--ks2-line) !important;
  border-bottom: 1px solid var(--ks2-line) !important;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}

.table > tbody td { border-color: var(--ks2-line); vertical-align: middle; }
.table-responsive { border-radius: var(--ks2-radius); }

/* ── ป้ายสถานะ ── */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: 0; }

.badge.text-bg-success { color: #14532d !important; background: var(--ks2-success-soft) !important; box-shadow: inset 0 0 0 1px var(--ks2-primary-line); }
.badge.text-bg-danger  { color: #991b1b !important; background: var(--ks2-danger-soft)  !important; box-shadow: inset 0 0 0 1px #fecaca; }
.badge.text-bg-warning { color: #9a3412 !important; background: var(--ks2-warning-soft) !important; box-shadow: inset 0 0 0 1px #fed7aa; }
.badge.text-bg-info    { color: #1e40af !important; background: var(--ks2-info-soft)    !important; box-shadow: inset 0 0 0 1px #bfdbfe; }
.badge.text-bg-secondary,
.badge.text-bg-light   { color: var(--ks2-text-soft) !important; background: var(--ks2-surface-muted) !important; box-shadow: inset 0 0 0 1px var(--ks2-line); }

/* ── กล่องข้อความ ── */
.alert {
  border: 1px solid transparent;
  border-radius: var(--ks2-radius);
  box-shadow: var(--ks2-shadow-sm);
}
.alert-success { color: #14532d; background: var(--ks2-success-soft); border-color: var(--ks2-primary-line); }
.alert-danger  { color: #991b1b; background: var(--ks2-danger-soft);  border-color: #fecaca; }
.alert-warning { color: #9a3412; background: var(--ks2-warning-soft); border-color: #fed7aa; }
.alert-info    { color: #1e40af; background: var(--ks2-info-soft);    border-color: #bfdbfe; }

/* ── กล่องลอย ── */
.modal-content {
  border: 1px solid var(--ks2-line);
  border-radius: var(--ks2-radius-lg);
  box-shadow: var(--ks2-shadow-lg);
}
.modal-header,
.modal-footer { border-color: var(--ks2-line); }
.modal-backdrop.show { opacity: .45; }

.dropdown-menu {
  border: 1px solid var(--ks2-line);
  border-radius: var(--ks2-radius-sm);
  box-shadow: var(--ks2-shadow);
}
.dropdown-item.active,
.dropdown-item:active { background: var(--ks2-primary); }

/* ── แถบบน ── */
.navbar,
.navbar.navbar-dark,
.navbar.bg-success {
  background: var(--ks2-primary-hover) !important;
  border-bottom: 0;
  box-shadow: var(--ks2-shadow-sm);
}

.nav-tabs { border-bottom-color: var(--ks2-line); }
.nav-tabs .nav-link {
  color: var(--ks2-text-soft);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
}
.nav-tabs .nav-link.active {
  color: var(--ks2-primary-hover);
  background: none;
  border-bottom-color: var(--ks2-primary);
}

.pagination { --bs-pagination-active-bg: var(--ks2-primary); --bs-pagination-active-border-color: var(--ks2-primary); }
.page-link { color: var(--ks2-text-soft); border-color: var(--ks2-line); }

.progress { background: var(--ks2-surface-muted); border-radius: 999px; }
.progress-bar { background: var(--ks2-primary); }

/* ── กล่อง "วิธีใช้" ที่เพิ่มไว้ในหน้าสต๊อก/ออเดอร์/ล้างรูป ── */
.stock-howto,
.orders-howto,
.howto {
  background: var(--ks2-primary-soft);
  border-color: var(--ks2-primary-line);
  border-radius: var(--ks2-radius);
}
.stock-howto > summary,
.orders-howto > summary,
.howto > summary { color: var(--ks2-primary-hover); }

/* ── รายละเอียดเล็ก ๆ ── */
a { color: var(--ks2-primary-hover); }
a:hover { color: var(--ks2-primary-pressed); }
hr { border-color: var(--ks2-line); opacity: 1; }
.text-muted { color: var(--ks2-text-soft) !important; }
code, .mono { color: var(--ks2-text); background: var(--ks2-surface-muted); border-radius: 6px; }

::selection { background: rgba(22, 163, 74, .18); }

/* แถบเลื่อนบางลงให้เข้ากับหน้าตาแอป (เฉพาะเบราว์เซอร์ที่รองรับ) */
* { scrollbar-color: var(--ks2-line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ks2-line-strong); border: 3px solid transparent; border-radius: 999px; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ks2-muted); border: 3px solid transparent; background-clip: content-box; }

/* เคารพผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .card, .metric, .btn, .form-control, .form-select { transition: none; }
  .btn:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   KS UI 2026 — ชั้นที่ 2: เมนูและลูกเล่น ให้เป็นภาษาเดียวกับระบบใหม่
   ══════════════════════════════════════════════════════════════════
   ระบบใหม่ใช้แถบนำทางสีเข้ม (#16211d) ปุ่มเมนูโค้ง 12px
   ตัวที่อยู่ปัจจุบันเป็นพื้นเขียวพร้อมขีดบอกตำแหน่ง และทุกอย่างขยับด้วยจังหวะ 180ms
   บล็อกนี้ยกภาษานั้นมาใส่ navbar เดิม โดยไม่แตะ HTML ของหน้าไหนเลย
   ────────────────────────────────────────────────────────────────── */

:root {
  --ks2-nav: #16211d;
  --ks2-nav-raised: #1e2e28;
  --ks2-nav-line: rgba(255, 255, 255, .07);
  --ks2-nav-text: #cbd5e1;
  --ks2-nav-muted: #94a3b8;
}

/* ── แถบนำทาง ── */
.navbar,
.navbar.navbar-dark,
.navbar.bg-success,
.navbar.bg-dark,
.ks-admin-nav {
  background: var(--ks2-nav) !important;
  border-bottom: 1px solid var(--ks2-nav-line) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
}

.navbar.sticky-top { backdrop-filter: saturate(140%) blur(6px); }

.navbar .navbar-brand {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ของเดิมมีขีดทองใต้แบรนด์ — เปลี่ยนเป็นจุดเขียวแบบระบบใหม่ */
.navbar .navbar-brand::after {
  width: 6px !important;
  height: 6px !important;
  margin-left: 8px;
  background: var(--ks2-primary) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .22);
  content: "";
  display: inline-block;
  vertical-align: middle;
}

/* ── ปุ่มเมนูในแถบ = nav-link ของระบบใหม่ ── */
.ks-nav-menu .btn,
.ks-nav-links .btn.btn-light,
.navbar .btn-light,
.navbar .btn-outline-light {
  position: relative;
  color: var(--ks2-nav-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
  transition: color var(--ks2-transition), background-color var(--ks2-transition), transform var(--ks2-transition);
}

.ks-nav-menu .btn:hover,
.ks-nav-links .btn.btn-light:hover,
.navbar .btn-light:hover,
.navbar .btn-outline-light:hover {
  color: #fff !important;
  background: var(--ks2-nav-raised) !important;
  transform: translateY(-1px);
}

/* หน้าที่กำลังเปิดอยู่ — พื้นเขียวพร้อมขีดบอกตำแหน่งด้านซ้าย */
.ks-nav-menu .btn.active,
.ks-nav-links .btn.active,
.navbar .btn-light.active,
.navbar .nav-link.active {
  color: #fff !important;
  background: var(--ks2-primary) !important;
  box-shadow: 0 6px 15px rgba(22, 163, 74, .22) !important;
}

.ks-nav-menu .btn.active::before,
.ks-nav-links .btn.active::before {
  position: absolute;
  inset: 7px auto 7px -3px;
  width: 3px;
  background: #fff;
  border-radius: 999px;
  content: "";
  opacity: .9;
}

.navbar .nav-link { color: var(--ks2-nav-text) !important; font-weight: 500; }
.navbar .nav-link:hover { color: #fff !important; }

/* ปุ่มคำสั่งด้านขวา (ส่ง Summary / ออกจากระบบ) ให้เด่นแยกจากปุ่มเมนู */
.ks-nav-commands .btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
}

/* ── เมนูย่อย ── */
.dropdown-menu {
  padding: 6px;
  background: var(--ks2-surface);
  border: 1px solid var(--ks2-line);
  border-radius: var(--ks2-radius);
  box-shadow: var(--ks2-shadow);
  animation: ks2-drop .16s cubic-bezier(.4, 0, .2, 1);
}

@keyframes ks2-drop {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: var(--ks2-text-soft);
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 500;
  transition: color var(--ks2-transition), background-color var(--ks2-transition);
}

.dropdown-item:hover { color: var(--ks2-text); background: var(--ks2-surface-muted); }

.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
  background: var(--ks2-primary) !important;
}

.dropdown-item i { color: var(--ks2-primary); }
.dropdown-item.active i,
.dropdown-item:active i { color: #fff; }
.dropdown-divider { border-color: var(--ks2-line); }

.dropdown-header {
  color: var(--ks2-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── เมนูมือถือ ── */
.navbar-toggler {
  border: 1px solid var(--ks2-nav-line) !important;
  border-radius: 10px !important;
}
.navbar-toggler:focus { box-shadow: var(--ks2-ring) !important; }

.ks-admin-mobile-head {
  color: #fff;
  border-bottom: 1px solid var(--ks2-nav-line);
}

@media (max-width: 1199.98px) {
  /* เมนูมือถือของเดิมกางเป็นแผงเต็มความกว้าง — ทำให้เป็นแผ่นมนแบบแอป */
  .ks-nav-links {
    padding: 10px;
    background: var(--ks2-nav-raised);
    border: 1px solid var(--ks2-nav-line);
    border-radius: var(--ks2-radius);
  }
  /* จอสัมผัส: ปุ่มต้องสูงพอให้นิ้วกดไม่พลาด (ของเดิม 32px เตี้ยกว่าเกณฑ์ 44px) */
  .ks-nav-menu .btn,
  .ks-nav-links .btn.btn-light,
  .ks-nav-commands .btn {
    justify-content: flex-start;
    width: 100%;
    min-height: 46px !important;
    margin-bottom: 2px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: .9rem !important;
  }

  /* ปุ่มคำสั่งยังต้องดูออกว่าไม่ใช่ปุ่มเมนู */
  .ks-nav-commands { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ks2-nav-line); }
  .ks-nav-commands .btn { justify-content: center; }

  .ks-nav-menu .nav-item.dropdown { display: block; }
  .ks-nav-menu .dropdown-menu { width: 100%; }
}

/* ══════════════ ลูกเล่น ══════════════ */

/* ปุ่มมีคลื่นจาง ๆ ตอนกด แบบเดียวกับปุ่มในระบบใหม่ */
.btn { position: relative; overflow: hidden; }

.btn::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, .35) 0%, transparent 55%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}
.btn:active::after { opacity: 1; transition: none; }

/* กล่องข้อความไหลลงมาแทนที่จะโผล่ทันที */
.alert { animation: ks2-slide-down .22s cubic-bezier(.4, 0, .2, 1); }

@keyframes ks2-slide-down {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* กล่องลอยเปิดนุ่มขึ้น */
.modal.fade .modal-dialog { transform: translateY(10px) scale(.99); transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
.modal.show .modal-dialog { transform: none; }

/* แถวตารางขยับเข้าหาเนื้อหาเล็กน้อยตอนชี้ — บอกตำแหน่งสายตาโดยไม่รบกวนการอ่าน */
.table-hover > tbody > tr {
  transition: background-color var(--ks2-transition), box-shadow var(--ks2-transition);
}
.table-hover > tbody > tr:hover {
  box-shadow: inset 3px 0 0 var(--ks2-primary);
}

/* ลิงก์ในเนื้อหามีเส้นใต้ค่อย ๆ ลากออกมา */
.card-body a:not(.btn):not(.dropdown-item),
.container a:not(.btn):not(.dropdown-item):not(.navbar-brand):not(.nav-link) {
  background-image: linear-gradient(var(--ks2-primary), var(--ks2-primary));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  text-decoration: none;
  transition: background-size var(--ks2-transition), color var(--ks2-transition);
}
.card-body a:not(.btn):not(.dropdown-item):hover,
.container a:not(.btn):not(.dropdown-item):not(.navbar-brand):not(.nav-link):hover {
  background-size: 100% 1.5px;
}

/* กล่อง "วิธีใช้" กางออกอย่างมีจังหวะ */
details > summary { transition: color var(--ks2-transition); }
details[open] > summary { margin-bottom: 2px; }
details[open] > *:not(summary) { animation: ks2-slide-down .18s cubic-bezier(.4, 0, .2, 1); }

/* ป้ายสถานะเต้นเบา ๆ ตอนเพิ่งเปลี่ยนค่า (ใส่ class ks2-pulse ที่ป้ายเมื่ออยากใช้) */
@keyframes ks2-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .35); }
  100% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
}
.ks2-pulse { animation: ks2-pulse 1.1s ease-out 2; }

/* ปิดลูกเล่นทั้งหมดถ้าผู้ใช้ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .dropdown-menu,
  .alert,
  details[open] > *:not(summary),
  .ks2-pulse { animation: none; }
  .modal.fade .modal-dialog { transition: none; }
  .ks-nav-menu .btn:hover,
  .ks-nav-links .btn.btn-light:hover,
  .navbar .btn-light:hover { transform: none; }
  .card-body a,
  .container a { transition: none; }
}


/* =====================================================================
   KS SIDEBAR — แถบเมนูด้านข้างของหลังบ้านเดิม
   ยกดีไซน์มาจากระบบใหม่ (ระบบใหม่/assets/app.css) ให้หน้าตาเหมือนกันทั้งสองระบบ
   ใช้คู่กับ admin_sidebar.php · presentation-only ไม่กระทบ logic ของหน้าเดิม
   ===================================================================== */

:root {
  --ks-sb-bg: #16211d;
  --ks-sb-raised: #1e2e28;
  --ks-sb-line: rgba(255, 255, 255, .07);
  --ks-sb-text: #cbd5e1;
  --ks-sb-muted: #64748b;
  --ks-sb-primary: #16a34a;
  --ks-sb-width: 244px;
}

.ks-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1045;
  display: flex;
  width: var(--ks-sb-width);
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  color: var(--ks-sb-text);
  background:
    radial-gradient(circle at 12% 0%, rgba(18, 168, 97, .13), transparent 29%),
    var(--ks-sb-bg);
  border-right: 1px solid rgba(0, 0, 0, .16);
  box-shadow: 8px 0 30px rgba(16, 25, 35, .08);
  font-family: 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: transform 220ms ease;
}

.ks-sb-brand {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--ks-sb-line);
}

.ks-sb-brand:hover { color: #fff; }

.ks-sb-mark {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #0f766e);
  border-radius: 11px;
}

.ks-sb-mark svg { width: 20px; height: 20px; }

.ks-sb-brand-copy { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ks-sb-brand-copy strong { font-size: .92rem; font-weight: 800; letter-spacing: .02em; }
.ks-sb-brand-copy small { color: #7fd1a3; font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.ks-sb-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 10px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.ks-sb-nav::-webkit-scrollbar { width: 5px; }
.ks-sb-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, .18); }

.ks-sb-section {
  margin: 15px 8px 6px;
  color: var(--ks-sb-muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ks-sb-section:first-child { margin-top: 2px; }

.ks-sb-link {
  position: relative;
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 8px 10px;
  overflow: hidden;
  color: var(--ks-sb-text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.ks-sb-link i { width: 18px; flex: 0 0 18px; color: #8aa79a; font-size: 1rem; text-align: center; }
.ks-sb-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ks-sb-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .065);
  border-color: rgba(255, 255, 255, .07);
}

.ks-sb-link:hover i { color: #cfe9db; }

.ks-sb-link.active {
  color: #fff;
  background: var(--ks-sb-primary);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 6px 15px rgba(18, 168, 97, .22);
}

.ks-sb-link.active i { color: #fff; }

.ks-sb-link.active::before {
  position: absolute;
  inset: 8px auto 8px -7px;
  width: 3px;
  border-radius: 999px;
  background: #fff;
  content: "";
}

.ks-sb-tag {
  margin-left: auto;
  padding: 1px 6px;
  color: #0b3d24;
  background: #a9d9bf;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 800;
}

.ks-sb-footer { padding: 10px; border-top: 1px solid var(--ks-sb-line); }

.ks-sb-store {
  padding: 10px;
  color: #e2e8f0;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--ks-sb-line);
  border-radius: 8px;
}

.ks-sb-store strong,
.ks-sb-store small,
.ks-sb-status { display: block; }
.ks-sb-store strong { margin-top: 6px; color: #fff; font-size: .74rem; }
.ks-sb-store small { margin-top: 2px; color: var(--ks-sb-muted); font-size: .62rem; }
.ks-sb-status { color: #a9d9bf; font-size: .6rem; font-weight: 700; }

.ks-sb-status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  background: #37cf83;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(55, 207, 131, .12);
}

.ks-sb-user {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 8px 9px;
  background: var(--ks-sb-raised);
  border: 1px solid var(--ks-sb-line);
  border-radius: 8px;
}

.ks-sb-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: #fff;
  background: var(--ks-sb-primary);
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 800;
}

.ks-sb-user-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
.ks-sb-user-copy b { color: #fff; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-sb-user-copy small { color: var(--ks-sb-muted); font-size: .62rem; }
.ks-sb-user a { margin-left: auto; color: var(--ks-sb-muted); }
.ks-sb-user a:hover { color: #fff; }
.ks-sb-user a svg { width: 17px; height: 17px; }

/* ---- ปุ่มเปิดเมนูบนมือถือ และฉากหลังตอนเปิด ---- */

.ks-sb-toggle {
  position: fixed;
  z-index: 1050;
  top: 10px;
  left: 10px;
  display: none;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  background: var(--ks-sb-bg);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  box-shadow: 0 8px 20px rgba(16, 25, 35, .25);
}

.ks-sb-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }

.ks-sb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: none;
  padding: 0;
  background: rgba(8, 14, 19, .58);
  border: 0;
}

/* ---- จัดหน้าเนื้อหาเดิมให้หลบแถบเมนู ---- */

body.ks-has-sidebar { padding-left: var(--ks-sb-width); }

/* navbar เดิมกลายเป็นแถบบนสีอ่อน เมนูซ้ำถูกซ่อน แต่ปุ่มคำสั่งบน navbar ยังอยู่ครบ */
body.ks-has-sidebar .ks-admin-nav {
  background: var(--ks-card, #fff) !important;
  border-bottom: 1px solid var(--ks-line, #dde6d8);
  box-shadow: 0 2px 10px rgba(20, 40, 22, .05);
}

body.ks-has-sidebar .ks-admin-nav .navbar-brand,
body.ks-has-sidebar .ks-admin-nav .navbar-brand strong { color: var(--ks-ink, #1a2b1f) !important; }
body.ks-has-sidebar .ks-admin-nav .ks-nav-menu,
body.ks-has-sidebar .ks-admin-nav .navbar-toggler { display: none !important; }
body.ks-has-sidebar .ks-admin-nav .navbar-collapse { display: flex !important; }
body.ks-has-sidebar .ks-admin-nav .ks-nav-commands { margin-left: auto; border-top: 0; }

@media (max-width: 991.98px) {
  body.ks-has-sidebar { padding-left: 0; }
  .ks-sidebar { transform: translateX(-100%); }
  .ks-sb-toggle { display: flex; }
  body.ks-sidebar-open .ks-sidebar { transform: none; }
  body.ks-sidebar-open .ks-sb-overlay { display: block; }
  body.ks-has-sidebar .ks-admin-nav .navbar-brand { padding-left: 46px; }
}

@media print {
  .ks-sidebar,
  .ks-sb-toggle,
  .ks-sb-overlay { display: none !important; }
  body.ks-has-sidebar { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-sidebar,
  .ks-sb-link { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   KS UI 2026 — ชั้นที่ 3: เมนูมือถือแบบแผ่นเลื่อนซ้าย + ช่องกรอกให้ตรงระบบใหม่
   ══════════════════════════════════════════════════════════════════
   เทียบกับ ระบบใหม่/assets/app.css + theme.css โดยตรง:
   เมนูข้างกว้าง 244px พื้นเข้มมีแสงเขียวจาง ๆ มุมบนซ้าย เลื่อนเข้าจากซ้าย 220ms
   ช่องกรอกมุมโค้ง 12px โฟกัสเป็นวงแหวนเขียว 4px
   ────────────────────────────────────────────────────────────────── */

:root {
  --ks2-sidebar-w: 284px;
}

/* ══════════ ช่องกรอก — ให้ตรงกับ ระบบใหม่/assets/theme.css ══════════ */
.form-control,
.form-select,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
  border-radius: 12px !important;
  border-color: var(--ks2-line-strong);
  background: var(--ks2-surface);
  color: var(--ks2-text);
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ks2-primary) !important;
  box-shadow: var(--ks2-ring) !important;
  outline: 0;
}

.form-control-sm,
.form-select-sm { border-radius: 10px !important; }

/* ป้ายกำกับช่อง — ระบบใหม่ใช้น้ำหนัก 500 สีอ่อนกว่าตัวเนื้อหา */
.form-label,
.form-field span { color: var(--ks2-text-soft); font-weight: 500; }

/* ช่องค้นหาในระบบใหม่มนกว่าช่องทั่วไป */
.search-field input,
input[type="search"] { border-radius: 13px !important; }

/* ══════════ เมนูมือถือ = แผ่นเลื่อนจากซ้าย แบบเมนูข้างของระบบใหม่ ══════════ */
@media (max-width: 1199.98px) {

  /* ฉากหลังมืดตอนเมนูเปิด — ของเดิมไม่มี ทำให้กดปิดยากและอ่านเนื้อหาข้างหลังสับสน */
  .navbar-collapse.collapsing::before,
  .navbar-collapse.show::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(15, 23, 42, .5);
    content: "";
  }

  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: min(var(--ks2-sidebar-w), 86vw);
    height: 100vh;
    height: 100dvh;
  }

  /* ตัวแผ่นเมนู */
  .navbar-collapse.show > .ks-nav-links,
  .navbar-collapse.collapsing > .ks-nav-links,
  .navbar-collapse.show > .nav-actions,
  .navbar-collapse.collapsing > .nav-actions {
    display: flex !important;
    width: 100%;
    height: 100%;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(120% 60% at 0% 0%, rgba(22, 163, 74, .16), transparent 55%),
      var(--ks2-nav);
    border: 0;
    border-radius: 0;
    box-shadow: 12px 0 40px rgba(15, 23, 42, .18);
    animation: ks2-drawer-in 220ms ease;
  }

  @keyframes ks2-drawer-in {
    from { transform: translateX(-14px); opacity: .85; }
    to   { transform: translateX(0); opacity: 1; }
  }

  /* หัวเมนู — เทียบกับ .sidebar-brand ของระบบใหม่ */
  .ks-admin-mobile-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px;
    background: rgba(22, 33, 29, .96);
    border-bottom: 1px solid var(--ks2-nav-line);
    backdrop-filter: blur(6px);
  }

  .ks-admin-mobile-head strong {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  .ks-admin-mobile-head strong i { color: var(--ks2-primary); }

  .ks-admin-mobile-close {
    /* กฎเก่าสั่งให้ปุ่มในแผงกว้างเต็มแถว ปุ่มปิดจึงยืดจนดันหัวเมนูสูงผิดปกติ
       ต้องล็อกขนาดไว้ให้เป็นปุ่มไอคอนสี่เหลี่ยมจัตุรัส */
    display: grid;
    flex: 0 0 auto;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    place-items: center;
    color: var(--ks2-nav-text) !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--ks2-nav-line) !important;
    border-radius: 11px !important;
  }
  .ks-admin-mobile-close:hover { color: #fff !important; background: rgba(255, 255, 255, .12) !important; }

  /* รายการเมนู */
  .ks-nav-menu {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 8px !important;
  }

  .ks-nav-menu .nav-item.dropdown { display: block; width: 100%; }

  .ks-nav-menu .btn,
  .ks-nav-links .btn.btn-light {
    justify-content: flex-start !important;
    width: 100%;
    min-height: 46px !important;
    padding: 10px 12px !important;
    font-size: .9rem !important;
    text-align: left;
  }

  /* ลูกศรของกลุ่มที่กางได้ — ระบบใหม่วางไว้ชิดขวาสุด */
  .ks-nav-menu .dropdown-toggle::after {
    margin-left: auto;
    border: 0;
    color: var(--ks2-nav-muted);
    content: "\203A";
    font-size: 1.25rem;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform var(--ks2-transition);
  }
  .ks-nav-menu .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }

  /* เมนูย่อยกางอยู่ในแผ่นเลย ไม่ลอยทับ — เหมือนเมนูลูกของระบบใหม่ */
  .ks-nav-menu .dropdown-menu {
    position: static !important;
    width: 100%;
    margin: 2px 0 4px !important;
    padding: 4px 0 4px 10px;
    background: transparent;
    border: 0;
    border-left: 2px solid var(--ks2-nav-line);
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
  }

  .ks-nav-menu .dropdown-item {
    min-height: 42px;
    color: var(--ks2-nav-muted);
    border-radius: 10px;
  }
  .ks-nav-menu .dropdown-item:hover { color: #fff; background: var(--ks2-nav-raised); }
  .ks-nav-menu .dropdown-item.active {
    color: #fff !important;
    background: var(--ks2-primary) !important;
  }

  /* ท้ายแผ่น — ปุ่มคำสั่ง (ส่ง Summary / ออกจากระบบ) เหมือนแถบผู้ใช้ล่างสุดของระบบใหม่ */
  .ks-nav-commands {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, .03);
    border-top: 1px solid var(--ks2-nav-line);
  }

  .ks-nav-commands .btn {
    justify-content: center !important;
    width: 100%;
    min-height: 46px !important;
    border-radius: 12px !important;
  }

  .ks-nav-commands form { width: 100%; margin: 0; }

  /* ปุ่มแฮมเบอร์เกอร์ค้างอยู่เหนือแผ่นเสมอ จะได้กดปิดได้ */
  .navbar-toggler { position: relative; z-index: 1050; }

  /* ล็อกหน้าเบื้องหลังไม่ให้เลื่อนตามนิ้วขณะเมนูเปิด */
  body:has(.navbar-collapse.show) { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-collapse.show > .ks-nav-links,
  .navbar-collapse.show > .nav-actions { animation: none; }
  .ks-nav-menu .dropdown-toggle::after { transition: none; }
}

/* ── หัวข้อหมวดในเมนู — เทียบกับ .nav-section ของระบบใหม่ ──
   บนเดสก์ท็อปเมนูเรียงแนวนอน หัวข้อคั่นจะทำให้แถวขาด จึงโชว์เฉพาะในแผ่นเมนูมือถือ */
.ks-nav-section { display: none; }

@media (max-width: 1199.98px) {
  .ks-nav-section {
    display: block;
    margin: 14px 0 4px;
    padding: 0 12px;
    color: var(--ks2-nav-muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  /* หมวดแรกไม่ต้องเว้นบนเยอะ เพราะชิดหัวเมนูอยู่แล้ว */
  .ks-nav-menu > .ks-nav-section:first-child { margin-top: 2px; }
}

/* ══════════════════════════════════════════════════════════════════
   KS UI 2026 — ชั้นที่ 4: จัดเนื้อหาในหน้า ให้อ่านง่ายทั้ง iPhone / iPad / คอม
   ══════════════════════════════════════════════════════════════════
   3 ช่วงจอที่ยึด
     • iPhone   ≤ 767px   — ทุกอย่างเรียงลงมาแถวเดียว ปุ่มเต็มความกว้าง เลี่ยงการเลื่อนแนวนอน
     • iPad     768–1199  — 2 คอลัมน์ ระยะห่างกำลังดี ปุ่มยังกดด้วยนิ้วได้
     • คอม      ≥ 1200px  — จำกัดความกว้างเนื้อหาไม่ให้บรรทัดยาวจนอ่านยาก
   ────────────────────────────────────────────────────────────────── */

/* ── ระยะห่างพื้นฐานของหน้า ── */
.container,
.container-fluid {
  padding-right: clamp(12px, 3vw, 24px);
  padding-left: clamp(12px, 3vw, 24px);
}

/* เว้นล่างให้พ้นแถบเครื่องมือของเบราว์เซอร์มือถือ + ขอบจอโค้งของ iPhone */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

.card { margin-bottom: 16px; }
.card > .card-body { padding: clamp(14px, 2.4vw, 20px); }

/* หัวเรื่องในหน้า — ของเดิมชิดกันจนแยกส่วนไม่ออก */
h1, h2, h3, h4, h5 { color: var(--ks2-text); letter-spacing: -.015em; }
h5.mb-3, h5.modal-title { font-weight: 700; }
.card-body > h1:first-child,
.card-body > h2:first-child,
.card-body > h3:first-child,
.card-body > h4:first-child,
.card-body > h5:first-child { margin-top: 0; }

/* ── ตาราง ──────────────────────────────────────────────── */

/* ให้เนื้อหาในเซลล์หายใจได้ และตัวเลขเรียงตรงหลัก */
.table > tbody td,
.table > thead th { padding: 11px 12px; }
.table .text-end,
.table td[data-label*="จำนวน"],
.table td[data-label*="ยอด"],
.table td[data-label*="ราคา"] { font-variant-numeric: tabular-nums; }

/* หัวตารางตรึงบนสุดตอนเลื่อนตารางยาว ๆ */
.table-responsive { position: relative; }
.table > thead th { position: sticky; top: 0; z-index: 2; }

@media (min-width: 768px) {
  /* จำกัดความสูงตารางยาว ๆ ให้เลื่อนในกรอบ หัวตารางจะได้ไม่หลุดจอ */
  .table-responsive.ks-tall { max-height: 72vh; overflow-y: auto; }
}

/* ══════════ iPhone ══════════ */
@media (max-width: 767.98px) {

  /* ตารางที่มีป้ายกำกับเซลล์ (data-label) → แปลงเป็นการ์ดอัตโนมัติ
     ของเดิมต้องใส่ class ks-mobile-cards เองทีละหน้า จึงได้ผลแค่ 7 หน้า
     กฎนี้ทำให้ทุกตารางที่มี data-label ได้โหมดการ์ดโดยไม่ต้องแก้ HTML */
  .table-responsive:has(td[data-label]) { overflow-x: visible; }

  .table:has(td[data-label]),
  .table:has(td[data-label]) tbody,
  .table:has(td[data-label]) tr,
  .table:has(td[data-label]) td {
    display: block;
    width: 100%;
  }

  .table:has(td[data-label]) thead { display: none; }

  .table:has(td[data-label]) tr {
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--ks2-surface);
    border: 1px solid var(--ks2-line);
    border-radius: var(--ks2-radius);
    box-shadow: var(--ks2-shadow-sm);
  }

  .table:has(td[data-label]) td {
    display: grid;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ks2-line) !important;
    text-align: left !important;
  }

  .table:has(td[data-label]) td:last-child { border-bottom: 0 !important; }

  .table:has(td[data-label]) td::before {
    color: var(--ks2-text-soft);
    content: attr(data-label);
    font-size: .78rem;
    font-weight: 600;
  }

  /* เซลล์ที่ว่างไม่ต้องกินที่ */
  .table:has(td[data-label]) td:empty { display: none; }

  /* ตารางที่ยังไม่มี data-label — เลื่อนแนวนอนได้ลื่นและรู้ว่ายังมีต่อ */
  .table-responsive:not(:has(td[data-label])) {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    background:
      linear-gradient(90deg, var(--ks2-surface) 30%, rgba(255,255,255,0)) left / 28px 100% no-repeat,
      linear-gradient(270deg, var(--ks2-surface) 30%, rgba(255,255,255,0)) right / 28px 100% no-repeat,
      linear-gradient(90deg, rgba(15,23,42,.09), rgba(255,255,255,0)) left / 12px 100% no-repeat,
      linear-gradient(270deg, rgba(15,23,42,.09), rgba(255,255,255,0)) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  /* ── ฟอร์ม ── */
  .row > [class*="col-"] { margin-bottom: 2px; }

  /* จอสัมผัส: ช่องกรอกและปุ่มต้องสูงพอให้นิ้วกดไม่พลาด */
  .form-control,
  .form-select,
  .btn { min-height: 44px; }
  .form-control-sm,
  .form-select-sm,
  .btn-sm { min-height: 40px; }
  .btn-xs { min-height: 34px; }

  /* iOS จะซูมเข้าอัตโนมัติถ้าตัวอักษรในช่องเล็กกว่า 16px */
  .form-control,
  .form-select,
  input,
  select,
  textarea { font-size: 16px; }

  /* ปุ่มที่วางเรียงกัน → ยืดเต็มพื้นที่และตกบรรทัดเองเมื่อใส่ไม่พอ
     ต้องสั่ง flex-wrap ที่ตัวแถวด้วย ไม่งั้นปุ่มจะบีบกันอยู่บรรทัดเดียวจนกดยาก */
  .card-body > .d-flex.gap-2,
  .card-body > .d-flex.gap-1,
  .card-body > .d-flex.gap-3,
  form > .d-flex { flex-wrap: wrap; }

  .card-body > .d-flex.gap-2 > .btn,
  .card-body > .d-flex.gap-3 > .btn,
  .card-body > .d-flex.flex-wrap > .btn,
  form > .d-flex.justify-content-end > .btn {
    flex: 1 1 132px;
    min-width: 132px;
  }

  /* กลุ่มปุ่มในตาราง (ดู/แก้/ลบ) ยังเรียงแนวนอน แต่ให้เต็มพื้นที่เซลล์ */
  .table td .d-flex.gap-1 > .btn { flex: 1 1 auto; }

  /* กล่องลอยบนมือถือ = แผ่นเต็มความกว้าง อ่านง่ายกว่ากล่องลอยกลางจอ */
  .modal-dialog { margin: 0; }
  .modal-dialog:not(.modal-fullscreen) {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
  }
  .modal-content {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: var(--ks2-radius-lg) var(--ks2-radius-lg) 0 0;
  }
  .modal-footer { position: sticky; bottom: 0; background: var(--ks2-surface); }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* สรุปตัวเลขบนสุดของหน้า (การ์ดเล็ก ๆ) → 2 ใบต่อแถว ไม่ใช่ใบละแถว */
  .row.g-2 > .col-6,
  .row.g-3 > .col-6 { flex: 0 0 50%; max-width: 50%; }
}

/* ══════════ iPad ══════════ */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .container { max-width: 100%; }

  /* จอสัมผัสเหมือนกัน ปุ่มยังต้องกดด้วยนิ้วได้ */
  .btn { min-height: 42px; }
  .form-control,
  .form-select { min-height: 42px; }

  /* ฟอร์ม 3-4 คอลัมน์บนคอม แน่นเกินไปบน iPad → เหลือ 2 คอลัมน์เท่ากันหมด
     ต้องคลุม col-md-4 ด้วย ไม่งั้นจะผสมกัน 33%/50% แล้วช่องกว้างไม่เท่ากันดูเบี้ยว */
  .row > .col-md-2,
  .row > .col-md-3,
  .row > .col-md-4 { flex: 0 0 50%; max-width: 50%; }

  /* การ์ดสรุปตัวเลข 4 ใบต่อแถวกำลังดีบน iPad — เขียนหลังกฎด้านบนเพื่อทับกลับ */
  .row.g-2 > .col-6.col-md-3,
  .row.g-3 > .col-6.col-md-3,
  .row > .col-md-3.stat { flex: 0 0 25%; max-width: 25%; }
}

/* ══════════ คอม ══════════ */
@media (min-width: 1200px) {
  /* บรรทัดที่ยาวเกิน ~110 ตัวอักษรอ่านยาก แต่ตารางต้องกว้างได้เต็มที่
     จึงจำกัดเฉพาะกล่องเนื้อหาที่เป็นข้อความ ไม่แตะการ์ดที่มีตาราง */
  .card:not(:has(table)) > .card-body { max-width: 1100px; }

  /* ฟอร์มที่มีช่องเดียวยาวเต็มจอ พิมพ์แล้วสายตาต้องกวาดไกล */
  .card-body > form > .row > .col-12 > .form-control { max-width: 720px; }

  .table > tbody td,
  .table > thead th { padding: 12px 14px; }
}

/* ══════════ พิมพ์ ══════════ */
@media print {
  .navbar, .ks-nav-links, .staff-tabbar, .btn, .modal { display: none !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
  .table > thead th { position: static; background: #eee !important; color: #000 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   KS UI 2026 — ชั้นที่ 5: เมนูข้างให้เหมือนระบบใหม่แบบรายการต่อรายการ
   ══════════════════════════════════════════════════════════════════
   เทียบค่าจาก ระบบใหม่/assets/app.css ตรง ๆ (.nav-link, .nav-group, .nav-children)
   เดิมเมนูของหลังบ้านเก่าเป็นรายการแบนไอคอนฟอนต์ ระบบใหม่เป็นไอคอน SVG + กลุ่มกางได้
   ชั้นนี้ทำให้ทั้งสองฝั่งเห็นเมนูหน้าตาเดียวกัน จะได้ไม่งงว่าตอนนี้อยู่ระบบไหน
   ────────────────────────────────────────────────────────────────── */

/* ---- รายการเมนู: ค่าเดียวกับ .nav-link ของระบบใหม่ ---- */
.ks-sidebar .ks-sb-link {
  min-height: 42px;
  margin: 1px 0;
  padding: 9px 12px;
  color: #94a3b8;
  border: 0;
  border-radius: 12px;
  font-size: .85rem;
  font-weight: 500;
}

.ks-sidebar .ks-sb-link:hover,
.ks-sidebar .ks-sb-link:focus-visible {
  color: #fff;
  background: var(--ks-sb-raised);
  border: 0;
  transform: none;
}

.ks-sidebar .ks-sb-link.active {
  color: #fff;
  background: var(--ks-sb-primary);
  border: 0;
  box-shadow: 0 8px 20px -8px rgba(22, 163, 74, .85);
  font-weight: 600;
}

/* ระบบใหม่ไม่มีขีดข้างซ้ายตอน active — ปิดของเดิมให้ตรงกัน */
.ks-sidebar .ks-sb-link.active::before { display: none; }

/* ---- ไอคอน SVG แทนไอคอนฟอนต์ ---- */
.ks-sb-icon {
  display: inline-grid;
  width: 20px;
  flex: 0 0 20px;
  place-items: center;
  color: inherit;
  opacity: .9;
}

.ks-sb-icon svg { width: 18px; height: 18px; }

.ks-sidebar .ks-sb-link > span:not(.ks-sb-icon) {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- ลูกศรท้ายรายการ ---- */
.ks-sb-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px;
  color: currentColor;
  font-style: normal;
  opacity: .45;
  transition: transform .18s ease;
}

.ks-sb-chevron svg { width: 14px; height: 14px; }

.ks-sb-group.is-open .ks-sb-parent .ks-sb-chevron { transform: rotate(180deg); }

/* ลูกศรของหัวข้อกลุ่มกดได้เพื่อกาง/พับ ต้องกดโดนง่ายบนจอสัมผัส */
.ks-sb-parent .ks-sb-chevron { margin-right: -4px; padding: 6px; cursor: pointer; }

/* ---- กลุ่มที่กางได้ ---- */
.ks-sb-group .ks-sb-children { display: none; }
.ks-sb-group.is-open .ks-sb-children { display: block; }

.ks-sb-children {
  margin: 2px 0 5px;
  padding: 1px 0 2px;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

.ks-sidebar .ks-sb-link.is-child {
  min-height: 36px;
  padding-left: 40px;
  color: #aebdb6;
  font-size: .8rem;
}

.ks-sidebar .ks-sb-link.is-child::after {
  position: absolute;
  left: 28px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: .55;
}

.ks-sidebar .ks-sb-link.is-child.active {
  color: #86efac;
  background: rgba(22, 163, 74, .14);
  box-shadow: none;
}

/* ---- ระยะขอบของ nav ให้เท่าระบบใหม่ ---- */
.ks-sb-nav { padding: 6px 12px 18px; }

.ks-sb-section {
  margin: 16px 0 4px;
  padding: 0 10px;
  font-size: .62rem;
  letter-spacing: .16em;
}

.ks-sb-tag { margin-left: 4px; }

/* ══════════ แถบบนของหน้าเดิม ══════════
   ก่อนหน้านี้ปุ่มคำสั่งบนแถบบนถูกจัดเป็นแผ่นสีเข้มเรียงลงมาแนวตั้งตอนจอแคบ
   ซึ่งตอนนั้นถูกเพราะมันคือเมนูมือถือ แต่พอมีเมนูข้างแล้วมันกลายเป็น "เมนูที่สอง"
   ทำให้สับสนว่ากดอันไหน — จอแคบจึงเปลี่ยนเป็นแถวปุ่มเลื่อนแนวนอนบนพื้นขาวแทน */
body.ks-has-sidebar .ks-admin-nav .ks-nav-links,
body.ks-has-sidebar .ks-admin-nav .ks-nav-commands {
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 0;
  margin-top: 0;
}

@media (max-width: 1199.98px) {
  body.ks-has-sidebar .ks-admin-nav .ks-nav-links {
    width: 100%;
    flex-wrap: nowrap;
    margin: 6px 0 0;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.ks-has-sidebar .ks-admin-nav .ks-nav-links::-webkit-scrollbar { display: none; }

  /* ปุ่มกลับมาเป็นปุ่มปกติ ไม่ยืดเต็มความกว้างเหมือนรายการเมนู
     แต่ยังสูง 40px ให้กดโดนบนจอสัมผัส */
  body.ks-has-sidebar .ks-admin-nav .ks-nav-links .btn,
  body.ks-has-sidebar .ks-admin-nav .ks-nav-commands .btn {
    width: auto !important;
    min-height: 40px !important;
    flex: 0 0 auto;
    justify-content: center;
    margin-bottom: 0;
    white-space: nowrap;
  }
}