/* =========================================================
   ePermit • MARS Theme 2025 (Refactored)
   Clean • Modern • Accessible • Metronic v8 / Bootstrap 5
   ========================================================= */

/* 0) Minor fixes -------------------------------------------------------- */
.aside .menu-accordion:where(.show, .showing) > .menu-link .menu-icon :is(.svg-icon,i){
  transform:none; transition:transform .3s ease;
}

/* 1) DESIGN TOKENS (base) ---------------------------------------------- */
:root{
  /* Brand blues (close to Mars corporate tone) */
  --mars-blue-700:#081a5c;
  --mars-blue-600:#0b2376;
  --mars-blue-500:#0d2b8a;
  --mars-blue-400:#284b8a;
  --mars-blue-300:#3554b3;

  /* Accents / semantics */
  --mars-cyan-400:#009FDA;
  --mars-gold-500:#E6A000;
  --mars-red-500:#E2231A;

  /* Neutrals */
  --ink-900:#111827; --ink-700:#1f2937; --ink-600:#2f3753;
  --ink-500:#4d577a; --ink-400:#7f8ab2; --ink-300:#a9b3d1;
  --ink-200:#cfd6ea; --ink-100:#e8ecf7;

  --bg-soft:#F8FAFC;

  /* Radii & shadows */
  --r-2xl:22px; --r-xl:18px; --r-lg:14px; --r-md:12px;
  --shadow-1:0 8px 24px rgba(17,24,39,.08);
  --shadow-2:0 14px 40px rgba(17,24,39,.12);
  --shadow-3:0 18px 60px rgba(17,24,39,.16);

  /* Focus ring */
  --focus-ring:0 0 0 .2rem rgba(13,43,138,.22);
}

/* Bootstrap var mapping (Light) */
[data-bs-theme="light"]{
  --bs-primary:          var(--mars-blue-500);
  --bs-primary-rgb:      13,43,138;
  --bs-primary-active:   var(--mars-blue-600);
  --bs-primary-light:    #E6EBFF;
  --bs-primary-inverse:  #fff;
  --bs-primary-clarity:  rgba(13,43,138,.20);

  --bs-warning:          var(--mars-gold-500);
  --bs-warning-light:    #FFF2CC;
  --bs-info:             var(--mars-cyan-400);
  --bs-info-light:       #E6F6FF;

  --app-surface:#ffffff;
  --app-soft:#f7f9ff;
  --app-border:#E5E7EB;
  --app-ink:  var(--ink-900);
}

/* Bootstrap var mapping (Dark) */
[data-bs-theme="dark"]{
  --bs-body-bg:#0f1220; --bs-body-color:#E6E8EF;
  --bs-primary:#6D78FF; --bs-primary-active:#4E59F0;
  --bs-primary-light:rgba(109,120,255,.12);
  --bs-warning:#FFBF3C; --bs-warning-light:rgba(255,191,60,.15);
  --bs-info:#45C6FF; --bs-info-light:rgba(69,198,255,.15);

  --app-surface:#0f1421;
  --app-soft:#121622;
  --app-border:#1c2435;
  --app-ink:#E6E8EF;
}

/* 2) BASE --------------------------------------------------------------- */
html,body{height:100%}
body{
  background:var(--bg-soft);
  color:var(--ink-700);
  letter-spacing:.01em;
  text-rendering:optimizeLegibility;
}
a{color:var(--bs-primary);text-decoration:none}
a:hover{color:var(--bs-primary-active)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* 3) HEADER / TOPBAR ---------------------------------------------------- */
.app-header{border-bottom:2px solid var(--bs-primary)}
.app-header .menu .menu-link:where(.active,:hover) .menu-title{color:var(--bs-primary)!important}

/* 4) ASIDE / SIDEBAR ---------------------------------------------------- */
#kt_aside.aside{
  background:var(--bg-soft);
  border-right:1px solid var(--app-border);
  padding:24px 0;
}
#kt_aside .menu{padding:10px 14px 20px}
#kt_aside .menu .menu-item{margin:2px 0}
#kt_aside .menu .menu-link{
  border-radius:var(--r-lg);
  padding:10px 12px; min-height:44px;
  color:var(--ink-600);
  transition:background .15s,color .15s,box-shadow .15s;
}
#kt_aside .menu .menu-link:hover{background:#f1f5f9;color:var(--ink-700)}
#kt_aside .menu .menu-link.active,
#kt_aside .menu .menu-link.here{
  background:#fff;color:var(--ink-700);
  box-shadow:var(--shadow-1), 0 0 0 3px rgba(228,0,43,.10);
}
#kt_aside .menu .menu-link .menu-icon{
  width:36px;height:36px;display:grid;place-items:center;
  margin-right:10px;border-radius:12px;background:#fff;
  box-shadow:inset 0 0 0 1px #eef2f7;
}
#kt_aside .menu-accordion .menu-sub{
  margin:6px 0 0 14px; padding-left:12px; border-left:2px dashed #e5e8f0;
}

/* 5) BUTTONS ------------------------------------------------------------ */
.btn{border-radius:12px;font-weight:700}
.btn:focus-visible{box-shadow:var(--focus-ring)}
.btn-primary{
  --bs-btn-bg:var(--bs-primary);--bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--bs-primary-active);--bs-btn-hover-border-color:var(--bs-primary-active);
  box-shadow:0 6px 16px rgba(var(--bs-primary-rgb),.18);
}

/* Mars gradient CTA (Login) */
.btn-mars-gradient{
  position:relative; overflow:hidden; color:#fff!important; border:0;
  background-image:linear-gradient(135deg,var(--mars-blue-600) 0%,var(--mars-blue-400) 40%,var(--mars-cyan-400) 100%);
  background-size:140% 140%;
  box-shadow:0 8px 18px rgba(0,32,91,.26);
  transition:transform .16s, box-shadow .16s, background-position .35s;
}
.btn-mars-gradient:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,32,91,.32);background-position:15% 50%}
.btn-mars-gradient:active{transform:translateY(0)}
.btn-neo-raise{will-change:transform}
.btn-mars-gradient .btn-gloss{
  pointer-events:none; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 45%);
}
.icon-float{transition:transform .25s ease}
.btn-mars-gradient:hover .icon-float{transform:translateY(-2px)}

/* Glassy small button (language trigger) */
.btn-neo-glass{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06); backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.btn-neo-glass:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.10)}
[data-bs-theme="dark"] .btn-neo-glass{
  background:rgba(20,22,30,.55); border-color:rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* 6) FORMS -------------------------------------------------------------- */
.form-control,.form-select{
  border-radius:12px; border-color:var(--ink-200); background:#fff;
}
.form-control:focus,.form-select:focus{border-color:var(--bs-primary);box-shadow:var(--focus-ring)}
.form-check-input:checked{background-color:var(--bs-primary);border-color:var(--bs-primary)}

/* 7) TABLES ------------------------------------------------------------- */
.table{
  --bs-table-bg:#fff; --bs-table-striped-bg:#fafbfe;
  color:var(--ink-700); border-collapse:separate; border-spacing:0 8px;
}
.table thead th{
  border:0; font-weight:800; color:var(--ink-500);
  text-transform:uppercase; font-size:.76rem; letter-spacing:.06em; text-align:center;
}
.table tbody tr{box-shadow:var(--shadow-1)}
.table tbody td{background:#fff;border-top:0}
.table-hover tbody tr:hover td{background:#fbfdff}

/* “Pills” table variant */
.table-pills{border-collapse:separate;border-spacing:0 12px}
.table-pills tbody tr{box-shadow:var(--shadow-1);transition:.15s}
.table-pills tbody tr:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.table-pills tbody td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.table-pills tbody td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}

/* DataTables polish */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{border-radius:12px;border-color:var(--ink-200)}
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button:hover{
  background:var(--bs-primary)!important;color:#fff!important;border-radius:10px!important
}

/* 8) DROPDOWN / TOOLTIP ------------------------------------------------- */
.dropdown-menu{
  border:0;border-radius:14px;box-shadow:var(--shadow-2);background:var(--app-surface);padding:.5rem;overflow:hidden
}
.dropdown-item{border-radius:10px}
.dropdown-item:hover{background:var(--bs-primary-light);color:var(--bs-primary)}

/* Language menu – “glass” */
.menu-glass{
  background:rgba(255,255,255,.6)!important; backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08)!important; box-shadow:0 16px 46px rgba(0,0,0,.12)!important;
  min-width:200px; max-width:260px; max-height:320px; overflow:auto;
}
[data-bs-theme="dark"] .menu-glass{
  background:rgba(255,255,255,.06)!important; border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.5)!important;
}
.menu-glass .menu-link{border-radius:10px}
.menu-glass .menu-link.active{background:rgba(0,0,0,.04)}
[data-bs-theme="dark"] .menu-glass .menu-link.active{background:rgba(255,255,255,.06)}
.app-navbar .menu-sub.menu-sub-dropdown:not(.show){display:none!important;visibility:hidden!important;opacity:0}
.app-navbar .menu-sub.menu-sub-dropdown.show{display:block!important;visibility:visible!important;opacity:1}

/* 9) MODAL (Login) ------------------------------------------------------ */
#kt_login_modal .modal-content{border:0;border-radius:22px;box-shadow:var(--shadow-3);background:var(--app-surface)}
#kt_login_modal .modal-title{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);line-height:1.25}
#kt_login_modal .form-label{font-size:clamp(.98rem,.92rem + .3vw,1.1rem)}
#kt_login_modal .form-control{font-size:clamp(1rem,.96rem + .3vw,1.1rem);padding:.9rem 1rem}
#kt_login_modal .password-toggle i{font-size:1.15rem}
#kt_login_modal .btn{font-size:clamp(.98rem,.92rem + .3vw,1.08rem);padding:.9rem 1.1rem;border-radius:999px}
#kt_login_modal .fs-7{font-size:.95rem!important}
#kt_login_modal .processing-overlay{
  position:absolute; inset:0; background:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center; z-index:1056;
}
#kt_login_modal .processing-card{
  display:flex; gap:12px; align-items:center; background:#fff; border-radius:12px; padding:12px 16px; box-shadow:var(--shadow-1)
}
#kt_login_modal .processing-card .loader{
  width:22px;height:22px;border-radius:50%;
  border:3px solid rgba(0,0,0,.1); border-top-color:var(--bs-primary); animation:spin .9s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 10) UTILITIES --------------------------------------------------------- */
.text-ink-400{color:var(--ink-400)!important}
.text-ink-600{color:var(--ink-600)!important}
.text-ink-800{color:var(--ink-700)!important}
.round-xl{border-radius:var(--r-xl)!important}
.round-2xl{border-radius:var(--r-2xl)!important}
.shadow-planet{box-shadow:var(--shadow-3)!important}
.bg-mars-blue-50{background:#E6EBFF!important}
.text-mars-blue{color:var(--mars-blue-500)!important}

/* 11) RESPONSIVE POLISH ------------------------------------------------- */
@media (max-width:1400px){ .card.mars-tile .mars-value{font-size:40px} }
@media (max-width:1200px){ .card{border-radius:var(--r-lg)!important} }
@media (max-width:576px){
  .tab-modern{padding:6px;gap:.4rem}
  .tab-modern .nav-link{padding:.45rem .8rem}
}

/* ===== Menu hover & active (Header + Aside) ===== */

/* Base */
.menu .menu-link{
  border-radius: 12px;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* Hover */
.menu .menu-link:hover{
  background: var(--bs-menu-link-bg-color-hover, var(--bs-primary-light, #E6EBFF));
  color: var(--bs-menu-link-color-hover, var(--bs-primary, #0000A0));
}

/* Active / Current / Here */
.menu .menu-link.active,
.menu .menu-item.here > .menu-link,
.menu .menu-item.show > .menu-link{
  background: var(--bs-menu-link-bg-color-active, var(--bs-primary-light, #E6EBFF));
  color: var(--bs-menu-link-color-active, var(--bs-primary, #0000A0));
  box-shadow: 0 8px 18px rgba(var(--bs-primary-rgb, 0,0,160), .12);
}

/* Icon & bullet follow state */
.menu .menu-link .menu-icon i,
.menu .menu-link .menu-icon .svg-icon{ color: var(--bs-gray-600); transition: color .18s ease; }

.menu .menu-link:hover .menu-icon i,
.menu .menu-link:hover .menu-icon .svg-icon,
.menu .menu-link.active .menu-icon i,
.menu .menu-link.active .menu-icon .svg-icon{ color: var(--bs-primary); }

.menu .menu-bullet .bullet-dot{ background: var(--bs-gray-400); transition: background-color .18s ease; }
.menu .menu-link:hover .menu-bullet .bullet-dot,
.menu .menu-link.active .menu-bullet .bullet-dot{ background: var(--bs-primary); }

/* Keyboard focus */
.menu .menu-link:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--bs-primary-clarity, rgba(0,0,160,.25));
}

/* ===== Header top menu accent bar ===== */
.app-header .menu > .menu-item > .menu-link{ position: relative; }
.app-header .menu > .menu-item > .menu-link.active::after,
/* .app-header .menu > .menu-item.here > .menu-link::after{
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -8px;
  height: 3px; border-radius: 99px; background: var(--bs-primary);
} */

/* ===== Aside (ซ้าย) เน้นชัดขึ้นนิดหน่อย ===== */
#kt_aside .menu .menu-link:hover{
  background: var(--bs-primary-light, #E6EBFF);
  color: var(--bs-primary, #0000A0);
}
#kt_aside .menu .menu-link.active,
#kt_aside .menu .menu-item.here > .menu-link{
  background: var(--bs-primary-light, #E6EBFF);
  color: var(--bs-primary, #0000A0);
  box-shadow: 0 8px 20px rgba(var(--bs-primary-rgb, 0,0,160), .15);
}

/* ลูกศรเมื่อเป็น accordion เปิดอยู่ */
[data-kt-menu="true"] .menu-accordion.show > .menu-link .menu-arrow{
  transform: rotate(90deg);
  transition: transform .15s ease;
}

/* ===== Dark mode tune ===== */
[data-bs-theme="dark"] .menu .menu-link:hover{
  background: var(--bs-menu-link-bg-color-hover, var(--bs-primary-light, rgba(109,120,255,.14)));
  color: var(--bs-menu-link-color-hover, var(--bs-primary));
}
[data-bs-theme="dark"] .menu .menu-link.active,
[data-bs-theme="dark"] .menu .menu-item.here > .menu-link{
  background: var(--bs-menu-link-bg-color-active, var(--bs-primary-light, rgba(109,120,255,.14)));
  color: var(--bs-menu-link-color-active, var(--bs-primary));
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.table:not(.table-bordered) td:first-child, .table:not(.table-bordered) th:first-child, .table:not(.table-bordered) tr:first-child {
    padding-left: 1rem;
}

.action-group{
  display:inline-flex;
  background-color: var(--bs-tertiary-bg); /* รองรับโหมดมืดด้วย */
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden; /* มุมโค้งเนียน */
}
.action-group .btn{
  border: 0 !important;         /* ตัดเส้นของปุ่ม outline เดิม */
  margin: 0;                     /* กันกระดก */
  padding: .25rem .75rem;        /* กะทัดรัด */
}
.action-group .btn + .btn{
  border-left: 1px solid var(--bs-border-color); /* เส้นกั้นระหว่างปุ่ม */
}
/* แต่ง hover ให้อ่านง่าย */
.action-group .btn-outline-primary:hover{ background: rgba(var(--bs-primary-rgb), .08); }
.action-group .btn-outline-danger:hover{  background: rgba(var(--bs-danger-rgb), .08); }

/* ปรับง่ายด้วยตัวแปร */
:root{
  --menu-hover-bg: #009fda;
  --menu-hover-fg: #ffffff;
}

/* เอฟเฟกต์ hover/active สำหรับระดับบนสุด */
.menu .menu-item > .menu-link{
  transition: background-color .2s ease, color .2s ease;
}

/* hover บนรายการเมนู */
.menu .menu-item:hover > .menu-link,
.menu .menu-item.show   > .menu-link,   /* กรณีเมก้าเมนูกำลังเปิด */
.menu .menu-item.here   > .menu-link,   /* รายการที่ active/อยู่หน้าเดียวกัน */
.menu .menu-item .menu-link.active {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-fg) !important;
}

/* ทำให้ไอคอนและชื่อเป็นสีขาวด้วย */
.menu .menu-item:hover > .menu-link .menu-icon,
.menu .menu-item:hover > .menu-link .menu-title,
.menu .menu-item.show  > .menu-link .menu-icon,
.menu .menu-item.show  > .menu-link .menu-title,
.menu .menu-item.here  > .menu-link .menu-icon,
.menu .menu-item.here  > .menu-link .menu-title,
.menu .menu-item .menu-link.active .menu-icon,
.menu .menu-item .menu-link.active .menu-title {
  color: var(--menu-hover-fg) !important;
}

/* จุด bullet ในเมนูย่อยให้ขาวด้วย (ถ้าต้องการ) */
.menu .menu-item:hover > .menu-link .menu-bullet .bullet,
.menu .menu-item.show  > .menu-link .menu-bullet .bullet,
.menu .menu-item.here  > .menu-link .menu-bullet .bullet,
.menu .menu-item .menu-link.active .menu-bullet .bullet {
  background-color: var(--menu-hover-fg) !important;
}

/* เมนูย่อยภายใน dropdown/mega: hover รายการย่อยให้โทนเดียวกัน */
.menu .menu-sub .menu-item > .menu-link{
  transition: background-color .2s ease, color .2s ease;
}
.menu .menu-sub .menu-item:hover > .menu-link,
.menu .menu-sub .menu-item .menu-link.active {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-fg) !important;
}
.menu .menu-sub .menu-item:hover > .menu-link .menu-title,
.menu .menu-sub .menu-item:hover > .menu-link .menu-icon,
.menu .menu-sub .menu-item .menu-link.active .menu-title,
.menu .menu-sub .menu-item .menu-link.active .menu-icon {
  color: var(--menu-hover-fg) !important;
}

/* Keen Icons duotone จะรับสีจาก currentColor: แค่ตั้ง color ให้ .menu-link ก็พอ */

/* ========= User menu (header right) ========= */
:root{
  --headmenu-hover-bg: #009fda;
  --headmenu-hover-fg: #ffffff;
}

/* ปุ่ม trigger (avatar button) */
#kt_header_user_menu_toggle .btn[data-kt-menu-trigger]{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#kt_header_user_menu_toggle .btn[data-kt-menu-trigger]:hover,
#kt_header_user_menu_toggle .btn[data-kt-menu-trigger].show,
#kt_header_user_menu_toggle .btn[aria-expanded="true"]{
  background-color: var(--headmenu-hover-bg) !important;
  color: var(--headmenu-hover-fg) !important;
  border-color: var(--headmenu-hover-bg) !important;
  box-shadow: 0 0 0 0.15rem rgba(0,159,218,.15);
}
/* วงกลม avatar ให้มีขอบขาวตอน hover */
#kt_header_user_menu_toggle .btn[data-kt-menu-trigger]:hover .symbol,
#kt_header_user_menu_toggle .btn[data-kt-menu-trigger].show .symbol{
  outline: 2px solid #fff;
  outline-offset: -2px;
  border-radius: 50%;
}

/* รายการใน dropdown */
#kt_header_user_menu_toggle .menu-sub .menu-item > .menu-link{
  transition: background-color .2s ease, color .2s ease;
}
#kt_header_user_menu_toggle .menu-sub .menu-item:hover > .menu-link,
#kt_header_user_menu_toggle .menu-sub .menu-item .menu-link.active{
  background-color: var(--headmenu-hover-bg) !important;
  color: var(--headmenu-hover-fg) !important;
}
/* ไอคอน/ชื่อใน link ให้เป็นสีขาว */
#kt_header_user_menu_toggle .menu-sub .menu-item:hover > .menu-link .menu-title,
#kt_header_user_menu_toggle .menu-sub .menu-item:hover > .menu-link .menu-icon,
#kt_header_user_menu_toggle .menu-sub .menu-item .menu-link.active .menu-title,
#kt_header_user_menu_toggle .menu-sub .menu-item .menu-link.active .menu-icon{
  color: var(--headmenu-hover-fg) !important;
}

/* ป้ายภาษา (badge) ให้ขาวเมื่อ hover แถวภาษา */
#kt_header_user_menu_toggle .menu-item[data-kt-menu-trigger] > .menu-link:hover .bg-light{
  background-color: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* โหลดฟอนต์ (ตัวอย่าง path ถ้าคุณวางไว้ /public/assets/fonts/...) */
@font-face{ font-family:'Mars Centra'; src:url('../font/MarsCentra/MarsCentra-Book.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mars Centra'; src:url('../font/MarsCentra/MarsCentra-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mars Centra'; src:url('../font/MarsCentra/MarsCentra-Extrabold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Zooja'; src:url('../font/Zooja/Zooja.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }

/* Override ให้ชนะ style.bundle.css */
html, body,
.app-root, .app-page, [data-kt-app-layout]{
  font-family: 'Mars Centra', 'Sarabun', 'Noto Sans Thai', Inter, 'Segoe UI', Tahoma, system-ui, -apple-system, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fw-800{ font-weight:800; }



/* ให้กล่องเป็นขอบเขตของ input ล่องหน */
.dz-box { position: relative; }
.dz-box .dz-message { cursor: pointer; padding: 12px; text-align: center; }
.dz-box .dz-previews { padding: 8px; }

/* บังคับ input ล่องหนอยู่ในกรอบกล่อง ไม่ลามไปทับ footer */
.dz-box .dz-hidden-input{
  position:absolute !important;
  top:0 !important; left:0 !important;
  width:100% !important; height:100% !important;
  margin:0 !important; opacity:0 !important; z-index:2 !important;
}

/* กัน preview หรือ overlay หลุดเลยกล่อง */
.dz-box { overflow: hidden; }

/* เผื่อธีมบางตัว z-index ต่ำ: ดัน footer ให้อยู่เหนือพรีวิว/อินพุต */
.modal .modal-footer{ position:relative; z-index:3; }

.modal-body {
  max-height: 75vh;
  overflow-y: auto;
}

.table thead th{ white-space:nowrap; }
.banner-img{ width:60%;height:auto;border-radius:8px; }

/* drag & drop */
#gridBody tr[draggable="true"] { cursor: grab; }
#gridBody tr.row-dragging { opacity:.6; outline:2px dashed var(--bs-primary); }
#gridBody tr.drop-over { box-shadow: inset 0 3px 0 var(--bs-primary); }

/* action button group */
.action-group .btn { border:0; border-radius:0; }
.action-group .btn:first-child{ border-top-left-radius:.5rem; border-bottom-left-radius:.5rem; }
.action-group .btn:last-child{ border-top-right-radius:.5rem; border-bottom-right-radius:.5rem; }
.btn-warning-soft{ background:#ffe6b3; color:#7a5200; }

.img-picker { border:2px dashed #cfd6e4; background:#f8fbff; border-radius:10px; padding:10px; }
.img-picker .pick-surface { min-height:140px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.img-picker .pick-message { color:#6b7a99; text-align:center; }
.img-picker.has-image .pick-message { display:none; }
.img-picker img[data-role="preview"] { max-width:100%; height:auto; border-radius:8px; display:block; }

:root{
  --app-toast-bg: rgba(255,255,255,.82);
  --app-toast-fg: #0f172a;
  --app-toast-border: rgba(15,23,42,.08);
  --app-toast-shadow: 0 12px 40px rgba(2,6,23,.18);
  --app-toast-accent: #A2DD7A;
}
@media (prefers-color-scheme: dark){
  :root{
    --app-toast-bg: rgba(17,24,39,.72);
    --app-toast-fg: #e5e7eb;
    --app-toast-border: rgba(255,255,255,.06);
    --app-toast-shadow: 0 12px 44px rgba(0,0,0,.45);
  }
}

/* กล่องรวม toast มุมขวาล่าง */
#app-toast-container{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 12000; /* สูงกว่า modal/backdrop */
  display: flex; flex-direction: column; gap: 12px;
  padding: env(safe-area-inset-bottom) env(safe-area-inset-right) 0 0;
  pointer-events: none; /* คลิกทะลุช่องว่างได้ */
}
#app-toast-container .toast{ pointer-events: auto; width: min(92vw, 420px); }

/* สไตล์การ์ด toast แบบ glass */
#app-toast-container .toast{
  border-radius: 16px;
  border: 1px solid var(--app-toast-border);
  background: var(--app-toast-bg);
  color: var(--app-toast-fg);
  box-shadow: var(--app-toast-shadow);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  overflow: hidden;
}
#app-toast-container .toast .toast-body{ line-height: 1.45; }

/* ปุ่มปิดแบบมินิมอล */
#app-toast-container .btn-close{
  filter: invert(0); opacity: .7;
}
@media (prefers-color-scheme: dark){
  #app-toast-container .btn-close{ filter: invert(1); }
}
#app-toast-container .btn-close:hover{ opacity: 1; }

/* แถบ progress ล่าง */
#app-toast-container .toast-progress{
  position: absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, var(--app-toast-accent), #3b82f6);
  transform-origin: left;
  animation: app-toast-progress var(--toast-delay, 3000ms) linear forwards;
  opacity: .9;
}
@keyframes app-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ไอคอนซ้ายเล็ก ๆ */
.app-toast-icon{
  flex: 0 0 20px; height: 20px; margin-right: 6px; margin-top: 2px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* ===== Soft options for native <select> ===== */
/* โทนเดียวกับฟิลเตอร์อื่น (กรมท่านุ่ม + ตัวอักษรอ่อน) */
:root{
  --opt-bg: #0b1220;         /* พื้นหลังรายการ */
  --opt-fg: #e6edf5;         /* สีตัวอักษร */
  --opt-hover: #131b2f;      /* สีโฮเวอร์ (FF เห็นชัด) */
  --opt-checked: #1f2a44;    /* สีของรายการที่ถูกเลือก */
  --opt-sep: rgba(148,163,184,.15); /* เส้นคั่นแผ่ว ๆ */
  --opt-radius: 12px;        /* มุมมน (เห็นผลชัดใน Firefox) */
}

/* กล่อง select ปกติ (เพื่อให้เข้าชุด) */
.form-select{
  border-radius: 14px;
}

/* สีพื้นฐานของรายการ */
.form-select option{
  background: var(--opt-bg);
  color: var(--opt-fg);
  line-height: 1.55;           /* เพิ่มช่องไฟให้อ่านง่าย */
  border-radius: 14px;
}

/* รายการที่ถูกเลือกขณะเปิดเมนู */
.form-select option:checked{
  background: var(--opt-checked);
  color: #fff;
}

/* รายการที่ปิดการใช้งาน */
.form-select option:disabled{
  color: #8da0b6;
}

/* เส้นคั่นบาง ๆ ระหว่างรายการ (เบราว์เซอร์บางตัวรองรับ) */
.form-select option + option{
  box-shadow: 0 -1px 0 var(--opt-sep) inset;
}

/* ---------- ปรับเฉพาะ Firefox: รองรับ hover + มุมโค้ง ---------- */
@-moz-document url-prefix() {
  .form-select option{
    padding: .5rem .75rem;          /* FF รองรับ padding ใน option */
  }
  .form-select option:hover{
    background: var(--opt-hover);
  }
  .form-select option:first-child{
    border-top-left-radius: var(--opt-radius);
    border-top-right-radius: var(--opt-radius);
  }
  .form-select option:last-child{
    border-bottom-left-radius: var(--opt-radius);
    border-bottom-right-radius: var(--opt-radius);
  }
}
body, html {
  font-size: 14px !important;
  font-weight: 500;
}


#areaTree .tree{list-style:none;margin:0;padding:0}
#areaTree .tree-children{margin:0;padding-left:14px;border-left:1px dashed rgba(0,0,0,.12)}
#areaTree .tree-row{margin:2px 0}
#areaTree .tree-item{
  display:flex;align-items:center;gap:.5rem;
  padding:6px 8px;border-radius:10px;
  transition:background .15s ease;
  cursor:pointer
}
#areaTree .tree-item:hover{background:rgba(0,0,0,.04)}
#areaTree .tree-item.active{
  background:rgba(59,130,246,.1);
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)
}
#areaTree .tree-toggle{
  width:26px;height:26px;border:0;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;flex:0 0 26px
}
#areaTree .tree-toggle:hover{background:rgba(0,0,0,.06)}
#areaTree .tree-toggle[aria-hidden="true"]{visibility:hidden}
#areaTree .tree-title{font-weight:600;line-height:1.2}
#areaTree .tree-meta{color:#6c757d;font-size:.8rem}
#areaTree .tree-actions{margin-left:auto;display:flex;gap:.25rem}
#areaTree .tree-dot{
  width:6px;height:6px;border-radius:50%;background:#cbd5e1;flex:0 0 6px
}


/* --- Hazards table compact & tidy --- */
.haz-table { border-collapse: separate; border-spacing: 0; }
.haz-table thead th{
  position: sticky; top: 0; z-index: 1;
  background: var(--bs-body-bg, #fff);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  padding: .5rem .75rem;
}
.haz-table tbody td{
  padding: .5rem .75rem;
  vertical-align: top;
  border-top: 1px solid #f1f3f5;
}

/* ซ้าย: หัวข้ออันตราย (checkbox + ชื่อ + ตัวนับ) */
.haz-title{
  display: flex; align-items: flex-start; gap: .5rem;
}
.haz-title .form-check-input{ transform: scale(1.05); margin-top: .15rem; }
.haz-count{
  margin-left: .5rem;
  background: var(--bs-light, #f8f9fa);
  color: var(--bs-secondary-color, #6c757d);
}
.haz-title strong{
  line-height: 1.2;
  place-self: center;
}

/* ขวา: วิธีป้องกัน แสดงแบบ grid ไม่เป็น list ยาว */
.haz-controls{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .25rem 1rem;
}
.haz-controls label{
  display: flex; align-items: flex-start; gap: .5rem;
  line-height: 1.25;
  padding: .125rem .25rem; border-radius: .4rem;
}
.haz-controls span {
  place-self: center;
}
.haz-controls .form-check-input{ margin-top: .2rem; }

/* จูนระยะห่างรวม ๆ ให้แน่นขึ้น */
.haz-table .ps-4{ padding-left: 1rem !important; }
@media (max-width: 992px){
  .haz-table thead th:first-child{ width:auto; }
  .haz-controls{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px){
  .haz-controls{ grid-template-columns: 1fr; }
}

.risk-box { font-weight: 600; }
.risk-red    { background:#ef4444; color:#fff; }
.risk-orange { background:#f59e0b; color:#111; }
.risk-yellow { background:#fde047; color:#111; }
.risk-green  { background:#22c55e; color:#fff; }

/* ===== Section number inside card-header ===== */
.jsa-sec-no {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  font-weight:700; font-size:13px; line-height:1;
  background:#EFF6FF;          /* ฟ้าอ่อน */
  color:#0B5ED7;                /* ฟ้าน้ำเงิน (metronic primary) */
  border:1px solid rgba(13,110,253,.15);
  margin-right:.5rem;
}

/* header alignment */
.jsa-card .card-header .card-title {
  display:flex; align-items:center; gap:.5rem;
}

/* ===== Sidebar: numeric dots (compact) ===== */
#kt_app_sidebar_nav .jsa-toc-link {
  width:44px; height:44px; padding:0;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  color:#3F4254;   /* gray-700 */
  box-shadow:none;
  place-self: anchor-center;
}
#kt_app_sidebar_nav .jsa-toc-link .jsa-dot {
  width:28px; height:28px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
  background:#F9FAFB; color:#111827; border:1px solid rgba(0,0,0,.08);
}
#kt_app_sidebar_nav .jsa-toc-link:hover {
  background:#F4F6F8; border-color:rgba(0,0,0,.08);
}
#kt_app_sidebar_nav .jsa-toc-link.active {
  background:#E9F3FF; border-color:#0B5ED7;
}
#kt_app_sidebar_nav .jsa-toc-link.active .jsa-dot {
  background:#0B5ED7; color:#fff; border-color:#0B5ED7;
}

/* ซ่อน label ยาว ๆ ถ้าเผลอมีติดมา */
/* #kt_app_sidebar_nav .jsa-toc-label { display:none; } */

/* ให้ตัวการ์ดมีระยะหายใจ */
.jsa-card { scroll-margin-top: 100px; } /* สำหรับ smooth scroll ไม่ชน header */

/* กัน toolbar หลุดบรรทัด/ถูกบัง */
.jsa-card .card-header {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.jsa-card .card-header .card-title {
  flex: 1 1 auto; /* ให้กินพื้นที่ซ้าย */
  min-width: 0;   /* กัน text overflow ดัน toolbar ตกบรรทัด */
}
.jsa-card .card-header .card-toolbar {
  flex: 0 0 auto; 
  display: inline-flex;
  gap: .5rem;
  position: relative;
  z-index: 1;     /* กันโดน overlay อื่นบัง */
}
.env-note.is-required:placeholder-shown {
  border-color: #dc3545; /* danger */
}

.jsa-toc-actions{
  position: sticky;
  bottom: 0;
  background: var(--bs-body-bg);
  padding: .65rem .5rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.jsa-actions-vertical{
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;                    /* ระยะห่างระหว่างปุ่ม */
  justify-items: center;
}
.jsa-iconbtn{
  width: 46px; height: 46px;     /* ไอคอนขนาดเท่ากันสวย ๆ */
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;           /* ถ้าอยากกลมมากขึ้นเป็น 50% ได้ */
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.btn[disabled]{ opacity:.55; pointer-events:none; }

/* ===== ทำให้หน้าตา Select2 เหมือนกันทั้งนอก/ในโมดัล ===== */

/* กล่อง selection (เราใช้ผ่าน selectionCssClass: 'u-input') */
.u-input.select2-selection {
  height: 44px;
  min-height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection.u-input {
  border-color: var(--bs-primary, #3e97ff);
  box-shadow: 0 0 0 .25rem rgba(62,151,255,.15);
  outline: 0;
}
.select2-container--bootstrap-5 .select2-selection__rendered { line-height: 44px; padding-left: .875rem; }
.select2-container--bootstrap-5 .select2-selection__arrow   { height: 44px; right: .75rem; }

/* กล่อง "รายการดรอปดาวน์" (เราใช้ผ่าน dropdownCssClass: 'u-dropdown') */
.u-dropdown.select2-dropdown {
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden; /* มุมโค้งทำงานครบ */
}
.u-dropdown .select2-results__options { padding: .25rem 0; }
.u-dropdown .select2-results__option  { padding: .5rem .875rem; font-size: .95rem; }
.u-dropdown .select2-results__option--highlighted {
  background: var(--bs-primary-bg-subtle, #edf4ff);
  color: var(--bs-primary, #3e97ff);
}

/* อนุญาตให้ตัดคำอัตโนมัติในกล่องอีเมล */
.menu-sub .menu-content .user-email {
  overflow-wrap: anywhere;   /* สมัยใหม่ */
  word-break: break-word;    /* เผื่อเบราว์เซอร์เก่า */
  white-space: normal;
}
/* ให้กล่องข้อความฝั่งขวาหดได้เมื่อเป็น flex item */
.menu-sub .menu-content .user-info { min-width: 0; }

/* ===== Steps Table ===== */
.jsa-steps-table{
  table-layout: fixed;
  width: 100%;
  min-width: 1120px;                 /* จอเล็กให้เลื่อนแนวนอนได้ */
}

/* หัวคอลัมน์ยาวให้ตัดบรรทัด ไม่ดันคอลัมน์อื่น */
.jsa-steps-table thead th{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

/* ช่องกรอกให้เต็มคอลัมน์และคุมความสูง */
.jsa-steps-table td .form-control,
.jsa-steps-table td textarea{
  width: 100%;
  box-sizing: border-box;
}
.jsa-steps-table textarea.form-control{
  min-height: 36px; height: 36px; resize: vertical;
}
.jsa-steps-table input.form-control,
.jsa-steps-table select.form-select{
  height: 36px; padding: .35rem .5rem;
}

/* ===== ความกว้างคอลัมน์ (ใส่คลาสบน <th>/<td>) ===== */
.jsa-steps-table .col-no      { width: 40px; }                          /* # */
.jsa-steps-table .col-step    { width: clamp(260px, 22vw, 380px); }     /* ขั้นตอนงาน (ใหญ่สุด) */
.jsa-steps-table .col-hazard  { width: clamp(220px, 16vw, 300px); }     /* อันตราย/ผลกระทบ (เล็กลง) */
.jsa-steps-table .col-s,
.jsa-steps-table .col-l       { width: clamp(64px, 5vw, 84px); }        /* S / L */
.jsa-steps-table .col-risk    { width: clamp(96px, 7vw, 120px); }       /* Risk (ก่อน/หลัง) */
.jsa-steps-table .col-ctrl    { width: clamp(220px, 16vw, 300px); }     /* มาตรการควบคุม (เล็กลง) */
.jsa-steps-table .col-actions { width: 60px; }                           /* ปุ่มลบ */

/* คอลัมน์ข้อความยาวให้ตัดบรรทัด ไม่ให้ดันตารางบาน */
.jsa-steps-table .col-step,
.jsa-steps-table .col-hazard,
.jsa-steps-table .col-ctrl{
  white-space: normal;
  word-break: break-word;
}


/* ทำให้เลื่อนแนวนอนบนจอเล็ก */
.table-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* จอใหญ่มาก: อย่าให้ตารางกินเต็มขอบ—เว้นขอบซ้ายขวาให้ดูสบายตา */
@media (min-width: 1400px){
  .jsa-steps-table { margin-inline: auto; max-width: 98%; }
  .jeaa-table { margin-inline: auto; max-width: 98%; }
}

.btn[disabled] { cursor: not-allowed; opacity: .65; }

/* ปุ่มไอคอนกลม ขนาดเท่ากันทุกปุ่ม และจัดกลางเป๊ะ */
.btn-icon{
  width: 34px;              /* ปรับได้ 28-40 ตามที่ชอบ */
  height: 34px;
  padding: 0;               /* ไม่ให้ padding ดันตำแหน่ง */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;           /* กันไอคอนลอย */
}
.btn-icon i{ font-size: 1rem; } /* ปรับขนาดไอคอน */

/* ===== JEAA table layout — readable at 125% zoom, 1920×1080 and smaller ===== */
.jeaa-card .table-responsive { overflow-x: auto; }

/* กำหนด min-width รวม เพื่อไม่ให้บีบจนอ่านไม่ออก (เลื่อนได้เมื่อจอแคบ) */
.jeaa-table { min-width: 1080px; }

/* ใช้ colgroup เพื่อคุมสัดส่วนโดยรวม (ทำให้สม่ำเสมอหลายความละเอียด) */
.jeaa-table col.no   { width: 44px; }
.jeaa-table col.step { width: 220px; }
.jeaa-table col.desc { width: clamp(320px, 36vw, 560px); }
.jeaa-table col.s, 
.jeaa-table col.l    { width: 72px; }
.jeaa-table col.risk { width: 120px; }
.jeaa-table col.ctrl { width: clamp(320px, 32vw, 520px); }
.jeaa-table col.act  { width: 60px; }

/* ลด padding เมื่อตารางเล็กลง (ช่วยให้ 125% ยังไม่ล้นแนวนอนง่าย ๆ) */
@media (max-width: 1440px) {
  .jeaa-table td, .jeaa-table th { padding: .4rem .5rem; }
  .jeaa-table .form-control-sm, .jeaa-table .form-select-sm { padding: .2rem .45rem; }
}

/* ===== Risk color classes (เหมือนเมทริกซ์ 4×4) ===== */
:root{
  --risk-green-bg:   #d6f5df;  /* 1–4 */
  --risk-yellow-bg:  #fff1b3;  /* 5–8 */
  --risk-orange-bg:  #ffd3a6;  /* 9–12 */
  --risk-red-bg:     #ffb8b3;  /* 13–16 */
  --risk-border:     rgba(0,0,0,.12);
}
.risk-box {
  font-weight: 600;
  text-align: center;
  border-width: 1px;
}
.risk-green  { background: var(--risk-green-bg) !important;  border-color: var(--risk-border) !important; }
.risk-yellow { background: var(--risk-yellow-bg) !important; border-color: var(--risk-border) !important; }
.risk-orange { background: var(--risk-orange-bg) !important; border-color: var(--risk-border) !important; }
.risk-red    { background: var(--risk-red-bg) !important;    border-color: var(--risk-border) !important; }

/* ให้เลขในช่องอ่านง่ายแม้มีสีพื้นหลัง */
.risk-green, .risk-yellow, .risk-orange, .risk-red { color: #222; }

/* ปรับความสูงของช่องตัวเลขให้เท่ากันบนหลายสเกล/ซูม */
.jeaa-table input[type="number"].text-center { min-width: 3.5ch; }

/* ล็อกสัดส่วนให้ตารางคงรูปทุกจอ/ซูม */
.jeaa-table{ table-layout:fixed; width:100%; }
.jeaa-table th, .jeaa-table td{ vertical-align:middle; }

/* สัดส่วนคอลัมน์ (ปรับลด “ผลกระทบฯ” และ “วิธีการควบคุมฯ”) */
.jeaa-table col:nth-child(1)  { width: 4%; }   /* # */
.jeaa-table col:nth-child(2)  { width:16%; }   /* ขั้นตอน */
.jeaa-table col:nth-child(3)  { width:18%; }   /* ผลกระทบฯ  ← ลดลง */
.jeaa-table col:nth-child(4)  { width: 6%; }   /* S ก่อน */
.jeaa-table col:nth-child(5)  { width: 6%; }   /* L ก่อน */
.jeaa-table col:nth-child(6)  { width: 8%; }   /* Risk ก่อน */
.jeaa-table col:nth-child(7)  { width:18%; }   /* วิธีการควบคุมฯ ← ลดลง */
.jeaa-table col:nth-child(8)  { width: 6%; }   /* S หลัง */
.jeaa-table col:nth-child(9)  { width: 6%; }   /* L หลัง */
.jeaa-table col:nth-child(10) { width: 8%; }   /* Risk หลัง */
.jeaa-table col:nth-child(11) { width: 4%; }   /* ลบ/แอ็กชัน */

/* ให้กล่องข้อความไม่ดันคอลัมน์ */
.jeaa-table textarea{
  width:100%; resize:vertical; min-height:38px; max-height:120px;
  overflow:auto;
}
.jeaa-table .form-control{ width:100%; }
.jeaa-table th, .jeaa-table td{ white-space:normal; word-break:break-word; }

/* ตาราง JEAA ให้คงรูปทุกจอ/ซูม */
.jeaa-table { table-layout: fixed; width: 100%; }
.jeaa-table th, .jeaa-table td { vertical-align: middle; white-space: normal; word-break: break-word; }

/* ไม่ให้ textarea/inputs ดันคอลัมน์ */
.jeaa-table textarea { width: 100%; resize: vertical; min-height: 36px; max-height: 120px; }
.jeaa-table .form-control { width: 100%; }

/* ทำให้หัวตาราง JEAA ห่อคำได้ และไม่กินคอลัมน์ข้างๆ */
.jeaa-table thead th{
  white-space: normal;          /* อนุญาตให้ขึ้นบรรทัดใหม่ */
  word-break: break-word;       /* ตัดคำเมื่อยาวเกินช่อง */
  overflow-wrap: anywhere;      /* บังคับตัดแม้ไม่มีช่องว่าง (เหมาะกับภาษาไทย) */
  line-height: 1.15;
}

/* ลดตัวอักษรเฉพาะ 2 คอลัมน์ที่ยาว (ผลกระทบ / วิธีการควบคุม) */
.jeaa-table thead th:nth-child(3),
.jeaa-table thead th:nth-child(7){
  font-size: .88rem;            /* ปรับได้ตามชอบ */
}

/* กัน input/textarea ดันกริด */
.jeaa-table td .form-control,
.jeaa-table td textarea{
  width: 100%;
  box-sizing: border-box;
}

.select2-container--bootstrap5 .select2-selection__clear {
  right: 1rem !important;
}

.input-group-sm>.btn, .input-group-sm>.form-control, .input-group-sm>.form-select, .input-group-sm>.input-group-text {
    padding: .35rem .95rem !important;
    font-size: .95rem;
    border-radius: .55rem;
}

.table > :not(caption) > * > th,
.table > :not(caption) > * > td {
    border-right: 1px solid #e5e7eb !important; /* สีเทาอ่อน */
}

/* ไม่ให้คอลัมน์สุดท้ายมีเส้นเกินออกไป */
.table > :not(caption) > * > th:last-child,
.table > :not(caption) > * > td:last-child {
    border-right: none !important;
}

.risk-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 2.4rem;
  padding: .2rem .6rem;
  border-radius: .475rem;
  font-weight: 600;
  font-size: .9rem;
}

/* ≥12 */
.risk-high{
  background:#dc2626; /* แดง */
  color:#fff;
}

/* 8–11 */
.risk-medhigh{
  background:#f97316; /* ส้ม */
  color:#fff;
}

/* 4–7 */
.risk-medium{
  background:#facc15; /* เหลือง */
  color:#111827;
}

/* 1–3 */
.risk-low{
  background:#16a34a; /* เขียว */
  color:#fff;
}


div.dataTables_filter {
    display: block !important;
    margin-bottom: 1rem;
}


/* ขยายช่องค้นหา */
.dataTables_filter input {
    width: 250px;
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid #ddd;
}

/* ทำ Header ให้สวยขึ้น */
#workersTable thead th {
    background: #f3f6f9;
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* ปรับ pagination ให้โค้งมน */
.dataTables_paginate .pagination li a {
    border-radius: 6px !important;
}


  /* บังคับให้ filter ของตาราง workers โชว์ */
  #workers-table_wrapper .dataTables_filter {
      display: flex !important;
      justify-content: flex-end;
      align-items: center;
      gap: .5rem;
  }

  #workers-table_wrapper .dataTables_filter label {
      margin-bottom: 0;
      font-weight: 500;
      color: #4b5563; /* เทา ๆ */
  }

  #workers-table_wrapper .dataTables_filter input {
      max-width: 220px;
      padding: .35rem .75rem;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      font-size: .875rem;
  }