:root{
  --app-blue:#2f80ed;
  --app-cyan:#36c5f0;
  --app-ink:#243247;
  --app-soft:#f8fbff;
  --app-border:#e5edf8;
  --app-card:#ffffff;
  --app-muted:#718096;
}
html,body{font-family:Sarabun,Arial,sans-serif;background:var(--app-soft);color:var(--app-ink);font-weight:400}
body{font-size:.96rem}
strong,b,.font-weight-bold,.card-title,.content-header h1,.brand-text{font-weight:500!important}
.content-wrapper,.app-content-wrapper{
  background:
    radial-gradient(circle at top right, rgba(47,128,237,.045), transparent 30%),
    radial-gradient(circle at left bottom, rgba(54,197,240,.045), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.content-header{padding-top:1rem}
.content-header h1{color:#243247;letter-spacing:-.01em}
.breadcrumb{background:transparent;margin-bottom:0}
.breadcrumb-item a{font-weight:400}
/* 🧱 กันข้อความยาวล้นกรอบ (กฎถาวร 2026-07-29) — ยาวเกิน = ขึ้นบรรทัดใหม่ · ลูกใน flex/grid หดได้ */
.card-body,.card-header{overflow-wrap:anywhere}
.card-body>*,.card-body>*>*,.card-header>*{min-width:0}
.card{
  background:var(--app-card);
  border:1px solid var(--app-border);
  border-radius:24px;
  box-shadow:0 14px 34px rgba(47,128,237,.055);
  /* overflow:visible (เดิม hidden) — กัน dropdown/autocomplete ในการ์ดโดนตัด (กฎถาวร 2026-07-28) · มุมโค้งตัดที่ header/body แทน */
  overflow:visible;
}
.card>.card-header:first-child{border-radius:23px 23px 0 0}
.card>.card-body:first-child{border-radius:23px 23px 0 0}
.card>.card-body:last-child,.card>.card-footer:last-child{border-radius:0 0 23px 23px}
.card-header{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border-bottom:1px solid var(--app-border);
  padding:1rem 1.25rem;
  font-weight:400;
}
.card-header b,.card-title{font-weight:500!important}
.card-body{padding:1.15rem 1.25rem}
.small-box{border-radius:24px;box-shadow:0 14px 30px rgba(47,128,237,.075)}
.alert{border-radius:18px;border:1px solid transparent;box-shadow:0 10px 22px rgba(47,128,237,.045)}
.form-control,.custom-select,.select2-selection{border-radius:14px;border-color:#dbe7f7;min-height:44px;box-shadow:none!important;background:#fff;font-weight:400}
.form-control:focus,.custom-select:focus{border-color:#9ec5fe;box-shadow:0 0 0 .18rem rgba(47,128,237,.10)!important}
.btn{border-radius:14px;font-weight:400!important;padding:.58rem 1rem;box-shadow:none!important}
.btn-primary{background:linear-gradient(135deg,var(--app-blue),var(--app-cyan));border:0}
.btn-info{background:linear-gradient(135deg,#36a3f7,#58d3f8);border:0}
.btn-success{background:linear-gradient(135deg,#32c48d,#55dca8);border:0}
.btn-warning{background:linear-gradient(135deg,#f6b04c,#ffd166);border:0;color:#243247}
.btn-danger{background:linear-gradient(135deg,#ef6b6b,#ff8a8a);border:0}
.btn-secondary{background:linear-gradient(135deg,#7b8794,#a0aec0);border:0}
.table{margin-bottom:0}
.table thead th{white-space:nowrap;background:#f8fbff;border-top:0;border-bottom:1px solid #e5edf8;color:#44546a;font-weight:500!important}
.table td,.table th{vertical-align:middle}
.table-hover tbody tr:hover{background:#f8fbff}
.badge{font-size:.78rem;font-weight:400;padding:.44em .68em;border-radius:999px}
.main-footer,.app-footer{border-top:1px solid #e5edf8;background:#fff;padding:.9rem 1.1rem;color:#718096;font-weight:400}
.dataTables_wrapper .dataTables_length select,.dataTables_wrapper .dataTables_filter input{border-radius:12px;border:1px solid #dbe7f7;padding:.35rem .7rem;background:#fff;font-weight:400}
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:12px!important}
.page-item .page-link{border-radius:12px!important;margin:0 2px;border-color:#dbe7f7;color:#2f80ed;font-weight:400}
.info-box,.small-box,.card,.alert{transition:all .2s ease}
.card:hover{box-shadow:0 18px 42px rgba(47,128,237,.065)}

/* Custom Sidebar Layout */
@media(min-width:992px){
  body:not(.layout-top-nav) .main-sidebar.app-sidebar{position:fixed!important;width:286px!important;left:0!important;top:0!important;bottom:0!important;transform:none!important}
  body:not(.layout-top-nav) .content-wrapper,
  body:not(.layout-top-nav) .main-footer,
  body:not(.layout-top-nav) .main-header{margin-left:286px!important}
  body.sidebar-collapse .main-sidebar.app-sidebar,
  body.sidebar-collapse .main-sidebar.app-sidebar:hover{width:286px!important}
}
@media(max-width:991.98px){
  body:not(.layout-top-nav) .content-wrapper,
  body:not(.layout-top-nav) .main-footer,
  body:not(.layout-top-nav) .main-header{margin-left:0!important}
  .main-sidebar.app-sidebar{position:fixed!important;width:286px!important;top:0!important;left:0!important;bottom:0!important;height:100vh!important;transform:translateX(-105%)!important;transition:transform .24s ease!important;z-index:1050!important;border-radius:0 24px 24px 0!important}
  body.sidebar-open .main-sidebar.app-sidebar{transform:translateX(0)!important}
  .app-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.28);backdrop-filter:blur(3px);z-index:1040}
  body.sidebar-open .app-sidebar-backdrop{display:block!important}
  .app-topbar{margin-left:0!important;left:0!important;right:0!important;width:100%!important}
}
@media(max-width:1199.98px){
  .container-fluid{padding-left:18px;padding-right:18px}
  .card{border-radius:22px}
  .card-header,.card-body{padding:1rem}
  .content-header h1{font-size:1.65rem}
}
@media(max-width:991.98px){
  .container-fluid{padding-left:14px;padding-right:14px}
  .content-header{padding-top:.85rem}
  .content-header h1{font-size:1.5rem}
  .card{border-radius:20px}
  .small-box{border-radius:20px}
  .table-responsive{border-radius:16px}
}
@media(max-width:767.98px){
  .content-header .breadcrumb{display:none}
  .content-header h1{font-size:1.35rem;line-height:1.25}
  .content-header .text-muted{font-size:.86rem}
  .container-fluid{padding-left:12px;padding-right:12px}
  .card{border-radius:18px;margin-bottom:1rem}
  .card-header,.card-body{padding:.9rem}
  .small-box{border-radius:18px}
  .btn{border-radius:12px;padding:.5rem .75rem;font-size:.88rem}
  .form-control,.custom-select{min-height:42px;font-size:.92rem}
  .table{font-size:.88rem}
  .table td,.table th{padding:.55rem}
  .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{text-align:left!important;width:100%;margin-bottom:.5rem}
  .dataTables_wrapper .dataTables_filter input{width:100%!important;margin-left:0!important;margin-top:.35rem}
}
@media(max-width:575.98px){
  .container-fluid{padding-left:10px;padding-right:10px}
  .content-header h1{font-size:1.25rem}
  .card-header,.card-body{padding:.82rem}
  .btn:not(.btn-sm){width:100%;margin-bottom:.35rem}
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:620px}
}


/* ===== Full responsive UI refinement ===== */
html.app-menu-open-lock,
html.app-menu-open-lock body{overflow:hidden!important}

@media(min-width:1400px){
  body:not(.layout-top-nav) .main-sidebar.app-sidebar{width:296px!important}
  body:not(.layout-top-nav) .content-wrapper,
  body:not(.layout-top-nav) .main-footer,
  body:not(.layout-top-nav) .main-header{margin-left:296px!important}
  .container-fluid{padding-left:28px;padding-right:28px}
}

@media(min-width:992px) and (max-width:1199.98px){
  body:not(.layout-top-nav) .main-sidebar.app-sidebar{width:270px!important}
  body:not(.layout-top-nav) .content-wrapper,
  body:not(.layout-top-nav) .main-footer,
  body:not(.layout-top-nav) .main-header{margin-left:270px!important}
  .container-fluid{padding-left:18px;padding-right:18px}
  .card{border-radius:20px}
  .content-header h1{font-size:1.55rem}
}

@media(max-width:991.98px){
  body:not(.layout-top-nav) .content-wrapper,
  body:not(.layout-top-nav) .main-footer,
  body:not(.layout-top-nav) .main-header{margin-left:0!important}

  .main-sidebar.app-sidebar{
    width:min(286px,86vw)!important;
    max-width:86vw!important;
  }

  .content-wrapper{padding-top:0}
  .container-fluid{padding-left:14px;padding-right:14px}
  .content-header{padding-top:.85rem}
  .content-header h1{font-size:1.48rem;line-height:1.25}
  .content-header .text-muted{font-size:.9rem}

  .row>[class*="col-"]{margin-bottom:.75rem}
  .card{border-radius:20px;margin-bottom:.9rem}
  .card-header,.card-body{padding:1rem}
  .small-box{border-radius:20px}
  .info-box{border-radius:18px}
  .table-responsive{border-radius:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .modal-dialog{margin:1rem}
}

@media(max-width:767.98px){
  .content-header .breadcrumb{display:none}
  .content-header h1{font-size:1.32rem}
  .container-fluid{padding-left:12px;padding-right:12px}

  .card{border-radius:18px}
  .card-header,.card-body{padding:.9rem}
  .form-group{margin-bottom:.75rem}
  .form-group label{font-size:.88rem}
  .form-control,.custom-select{min-height:42px;font-size:.92rem}
  textarea.form-control{min-height:92px}
  .btn{border-radius:12px;padding:.5rem .75rem;font-size:.88rem}

  .table{font-size:.86rem}
  .table td,.table th{padding:.52rem}
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length{text-align:left!important;width:100%;margin-bottom:.5rem}
  .dataTables_wrapper .dataTables_filter input{width:100%!important;margin-left:0!important;margin-top:.35rem}

  .main-footer{font-size:.82rem;text-align:center}
  .main-footer .float-right{float:none!important;display:block!important;margin-top:.35rem}
}

@media(max-width:575.98px){
  .main-sidebar.app-sidebar{
    width:min(268px,88vw)!important;
    max-width:88vw!important;
  }
  .container-fluid{padding-left:10px;padding-right:10px}
  .content-header h1{font-size:1.18rem}
  .content-header .text-muted{font-size:.82rem}
  .card{border-radius:16px}
  .card-header,.card-body{padding:.78rem}

  .btn:not(.btn-sm):not(.btn-xs){width:100%;margin-bottom:.35rem}
  .btn-sm{padding:.34rem .52rem;font-size:.78rem}
  .btn-group,.btn-toolbar{display:flex;flex-wrap:wrap;gap:.35rem}
  .btn-group>.btn{border-radius:10px!important}

  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table{min-width:640px}
  .modal-dialog{margin:.72rem}
  .modal-content{border-radius:18px}
  .swal2-popup{width:92%!important;border-radius:20px!important}
}

@media(max-width:380px){
  .main-sidebar.app-sidebar{
    width:min(250px,90vw)!important;
    max-width:90vw!important;
  }
  .container-fluid{padding-left:8px;padding-right:8px}
  .content-header h1{font-size:1.08rem}
  .card-header,.card-body{padding:.68rem}
  .form-control,.custom-select{font-size:.86rem}
}


/* ===== Hamburger hide/show fix ===== */
@media(min-width:992px){
  body.app-sidebar-hidden .main-sidebar.app-sidebar{transform:translateX(-105%)!important}
  body.app-sidebar-hidden .content-wrapper,
  body.app-sidebar-hidden .main-footer,
  body.app-sidebar-hidden .main-header{margin-left:0!important}
}

/* ===== Auto-hide sidebar + hover peek (desktop) =====
 * เดสก์ท็อป: เมนูซ่อนเป็นค่าเริ่มต้น (เนื้อหาเต็มจอ) → เอาเมาส์ไปขอบซ้าย/แท็บ = เลื่อนออกมา
 * แบบ PUSH: เนื้อหาทุกโมดูล "ร่น/ย่อเข้ามา" อยู่ข้างเมนู (ไม่ถูกบัง)
 * ปิดเมนู: คลิกไปหน้าอื่น (โหลดใหม่=ซ่อน) / คลิกพื้นที่เนื้อหา / Esc / ปุ่ม ☰ */
@media(min-width:992px){
  .main-sidebar.app-sidebar{transition:transform .24s ease!important}
  .content-wrapper,.main-footer,.main-header{transition:margin-left .24s ease}
  .app-sidebar-backdrop{display:none}
  /* peek: เลื่อนเมนูออก (specificity สูงกว่ากฎ hidden + AdminLTE — body มี 2 class) */
  body.app-sidebar-hidden.app-sidebar-peek .main-sidebar.app-sidebar,
  body.app-sidebar-peek .main-sidebar.app-sidebar{transform:translateX(0)!important;z-index:1050!important;box-shadow:10px 0 36px rgba(15,23,42,.12)!important}
  /* push: ดันเนื้อหาทุกโมดูลให้ย่อเข้ามา (margin = ความกว้างเมนู) */
  body.app-sidebar-hidden.app-sidebar-peek .content-wrapper,
  body.app-sidebar-hidden.app-sidebar-peek .main-footer,
  body.app-sidebar-hidden.app-sidebar-peek .main-header,
  body.app-sidebar-peek .content-wrapper,
  body.app-sidebar-peek .main-footer,
  body.app-sidebar-peek .main-header{margin-left:286px!important}
  /* แท็บ handle ขอบซ้าย — จุดเอาเมาส์มาวาง/คลิกเพื่อเปิดเมนู */
  .app-sidebar-handle{position:fixed;left:0;top:50%;transform:translateY(-50%);width:22px;height:74px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;border-radius:0 14px 14px 0;cursor:pointer;z-index:1035;box-shadow:2px 0 14px rgba(37,99,235,.35);opacity:.9;transition:width .18s ease,opacity .18s ease}
  .app-sidebar-handle:hover{width:28px;opacity:1}
  body.app-sidebar-peek .app-sidebar-handle,body.sidebar-open .app-sidebar-handle{display:none!important}
}
/* margin ของ peek ให้ตรงความกว้างเมนูแต่ละ breakpoint */
@media(min-width:1400px){
  body.app-sidebar-hidden.app-sidebar-peek .content-wrapper,
  body.app-sidebar-hidden.app-sidebar-peek .main-footer,
  body.app-sidebar-hidden.app-sidebar-peek .main-header,
  body.app-sidebar-peek .content-wrapper,
  body.app-sidebar-peek .main-footer,
  body.app-sidebar-peek .main-header{margin-left:296px!important}
}
@media(min-width:992px) and (max-width:1199.98px){
  body.app-sidebar-hidden.app-sidebar-peek .content-wrapper,
  body.app-sidebar-hidden.app-sidebar-peek .main-footer,
  body.app-sidebar-hidden.app-sidebar-peek .main-header,
  body.app-sidebar-peek .content-wrapper,
  body.app-sidebar-peek .main-footer,
  body.app-sidebar-peek .main-header{margin-left:270px!important}
}
@media(max-width:991.98px){
  .app-sidebar-handle{display:none!important}
}


/* Dashboard white grid + vivid card support */
.content-wrapper{
  background-color:#ffffff!important;
  background-image:
    linear-gradient(rgba(37,99,235,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.075) 1px, transparent 1px)!important;
  background-size:28px 28px!important;
}