/* KEMREX CI theme v1.8.2 — อ้างอิง KEMREX Design System (DESIGNKEMREX.html: kemrex.com + KEMREX LOGO CI)
   โหลดเป็นไฟล์สุดท้าย (หลัง app/so100/sale_checklist/installation_ops.css)
   สี: Navy #023F88 (PANTONE 280C) · Orange #F58220 (Orange 021) · Red #D71920 (200C) · Cool Gray #D1D3D4 (4C)
   สัดส่วน: White 55% · Navy 30% · Orange 10% (ปุ่ม CTA/จุดเน้น) · Red น้อย (แจ้งเตือน)
   ฟอนต์: Kanit (self-hosted, SIL OFL 1.1) · มุม: กล่อง 0 · ปุ่ม/ช่องกรอก 10px · ไอคอน/รูปโปรไฟล์กลม */
@font-face{font-family:Kanit;font-style:normal;font-weight:300;font-display:swap;src:url(/static/Kanit-Light.woff2) format("woff2")}
@font-face{font-family:Kanit;font-style:normal;font-weight:400;font-display:swap;src:url(/static/Kanit-Regular.woff2) format("woff2")}
@font-face{font-family:Kanit;font-style:normal;font-weight:500;font-display:swap;src:url(/static/Kanit-Medium.woff2) format("woff2")}
@font-face{font-family:Kanit;font-style:normal;font-weight:600;font-display:swap;src:url(/static/Kanit-SemiBold.woff2) format("woff2")}
@font-face{font-family:Kanit;font-style:normal;font-weight:700;font-display:swap;src:url(/static/Kanit-Bold.woff2) format("woff2")}

:root{
  --kx-navy:#023F88;--kx-orange:#F58220;--kx-red:#D71920;--kx-gray:#D1D3D4;
  --kx-navy-900:#011F44;--kx-navy-700:#023F87;--kx-navy-500:#416FA5;--kx-navy-300:#819FC3;--kx-navy-200:#AAC3E1;--kx-navy-100:#C0CFE1;--kx-navy-50:#EEF3F9;
  --kx-orange-900:#512B0B;--kx-orange-700:#A35615;--kx-orange-500:#F48120;--kx-orange-300:#F8BD8C;--kx-orange-100:#FBD4B3;--kx-orange-50:#FEF3E9;--kx-orange-hover:#AE633F;
  --kx-red-900:#48080B;--kx-red-700:#8F1116;--kx-red-500:#D71921;--kx-red-300:#E47F84;--kx-red-100:#F2AAAD;--kx-red-50:#FDF4F4;
  --kx-black:#080809;--kx-gray-900:#2A2A2A;--kx-gray-700:#535454;--kx-gray-500:#7D7E7F;--kx-gray-300:#A6A8A9;--kx-gray-200:#D0D2D3;--kx-gray-100:#E2E2E2;--kx-white:#FFFFFF;
  --kx-amber:#FC9C0A;--kx-success:#1E7B46;--kx-success-50:#E8F5EE;
  --kx-bg:#F4F5F7;--kx-font:Kanit,"Leelawadee UI",Tahoma,system-ui,sans-serif;--kx-lh:1.4;
  --kx-radius-none:0;--kx-radius-btn:10px;--kx-radius-round:50%;
  font-family:var(--kx-font);color:var(--kx-gray-900);background:var(--kx-bg);
}
body{font-family:var(--kx-font);background:var(--kx-bg);color:var(--kx-gray-900);font-weight:400}
button,input,select,textarea{font-family:var(--kx-font)}
h1,h2,h3,.page-heading h1{color:var(--kx-navy);letter-spacing:0}
h1{font-weight:600}h2,h3{font-weight:600}
.eyebrow{color:var(--kx-orange);letter-spacing:2px;font-weight:500}
a{color:var(--kx-navy)}
::selection{background:var(--kx-orange-100)}

/* ---------- ปุ่ม (CI Button: 42px · มุม 10px · Transition .2s) ---------- */
.btn{border-radius:var(--kx-radius-btn);font-weight:500;transition:all .2s ease;border-color:var(--kx-gray-200);color:var(--kx-navy)}
.btn:hover:not(:disabled){background:var(--kx-navy-50)}
.btn.primary,.btn.small.primary{background:var(--kx-orange-500);border-color:var(--kx-orange-500);color:#fff}
.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,rgba(40,38,38,.22),rgba(40,38,38,.22)),var(--kx-orange-hover);border-color:var(--kx-orange-hover);color:#fff}
.btn.dark{background:var(--kx-navy);border-color:var(--kx-navy);color:#fff}
.btn.dark:hover:not(:disabled){background:var(--kx-navy-900)}
.btn.soft{background:var(--kx-navy-50);border-color:var(--kx-navy-100);color:var(--kx-navy)}
.btn.danger{border-color:var(--kx-red-100);color:var(--kx-red)}
.btn.danger:hover:not(:disabled){background:var(--kx-red-50)}
.btn:disabled{background:var(--kx-gray-100);border-color:var(--kx-gray-100);color:#8F8F8F;opacity:1}
.btn.primary:disabled{background:var(--kx-gray-100);border-color:var(--kx-gray-100);color:#8F8F8F}
.text-btn{color:var(--kx-gray-500)}
.table-action{color:var(--kx-navy);text-decoration-color:var(--kx-orange-300)}
.table-action:hover{text-decoration-color:var(--kx-orange)}
.table-action.danger{color:var(--kx-red)}

/* ---------- ช่องกรอก ---------- */
.input,input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{border-radius:var(--kx-radius-btn);border-color:var(--kx-gray-200);color:var(--kx-gray-900)}
.input:focus,input:focus,select:focus,textarea:focus{border-color:var(--kx-navy);box-shadow:0 0 0 3px rgba(2,63,136,.15)}
input[type=checkbox],input[type=radio]{accent-color:var(--kx-orange)}
label{color:var(--kx-gray-700);font-weight:500}
:focus-visible{outline-color:var(--kx-orange)}

/* ---------- Sidebar (Navy 900 + เน้นส้ม) ---------- */
.sidebar{background:var(--kx-navy-900);color:#E8EEF6}
.sidebar .brand{background:#fff;margin:-24px -14px 22px;padding:16px 16px 12px;display:block;border-bottom:4px solid var(--kx-orange)}
.sidebar .brand .brand-logo{display:none}
.sidebar .brand .brand-full{display:block;width:100%;max-width:200px;height:auto;margin:0 auto}
.sidebar .brand>div{display:block;text-align:center;margin-top:8px}
.sidebar .brand strong{display:none}
.sidebar .brand small{display:block;color:var(--kx-navy);font-size:11px;letter-spacing:.2px;line-height:1.35;font-weight:500}
.nav-heading{color:var(--kx-navy-300)}
.nav-link{color:#C9D5E6;font-weight:400}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-link.active{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 4px 0 0 var(--kx-orange)}
.nav-link.active .nav-icon{color:var(--kx-orange)}
.nav-child{color:#B9C7DA}
.nav-child:hover,.nav-child:focus-visible{background:rgba(255,255,255,.07);color:#fff}
.nav-child.active{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 3px 0 0 var(--kx-orange)}
.nav-child.active .nav-child-icon{color:var(--kx-orange)}
.nav-divider{background:rgba(255,255,255,.12)}
.nav-expand{color:#C9D5E6}
.sidebar-foot{border-top-color:rgba(255,255,255,.12)}
.sidebar-foot small{color:var(--kx-navy-300)}
.sidebar-point{color:#E8EEF6}
.live-dot{background:var(--kx-orange);box-shadow:0 0 0 4px rgba(245,130,32,.2)}
#sidebar-nav{scrollbar-color:var(--kx-navy-500) transparent}
#sidebar-nav::-webkit-scrollbar-thumb{background:var(--kx-navy-500)}
.shell.sidebar-collapsed .sidebar .brand{margin:-24px -7px 18px;padding:12px 6px;border-bottom-width:3px}
.shell.sidebar-collapsed .sidebar .brand .brand-full{display:none}
.shell.sidebar-collapsed .sidebar .brand .brand-icon{display:block;width:34px;height:auto;margin:0 auto}
.sidebar .brand .brand-icon{display:none}
.shell.sidebar-collapsed .sidebar .brand>div{display:none}

/* ---------- Topbar / Footer ---------- */
.topbar{background:#fff;border-bottom:3px solid var(--kx-orange)}
.breadcrumb{color:var(--kx-gray-500)}
.breadcrumb strong{color:var(--kx-navy);font-weight:500}
.top-clock{color:var(--kx-gray-500)}
.user-pill{background:var(--kx-navy-50);color:var(--kx-navy)}
.hamburger{border-radius:var(--kx-radius-btn);border-color:var(--kx-gray-200);background:#fff;color:var(--kx-navy)}
.hamburger:hover{background:var(--kx-navy-50);color:var(--kx-navy)}
.footer{color:var(--kx-gray-500)}
.avatar.initials{background:var(--kx-navy);color:#fff}

/* ---------- กล่อง / การ์ด (มุมเหลี่ยม) ---------- */
.card,.stat-card,.info-tile,.modal,.form-card,.table-box,.profile-avatar-row,.so100-flow-step,.hero-stamp,.section-note,.alert,.access-tile,.role-detail,.role-matrix,.role-dept-option,.checkbox-list,.preview{border-radius:0}
.card{border-color:var(--kx-gray-200)}
.card-header h2{color:var(--kx-navy)}
.stat-card{border-color:var(--kx-gray-200);border-top:3px solid var(--kx-navy)}
.stat-card .value{color:var(--kx-navy)}
.stat-icon{background:var(--kx-orange-50);color:var(--kx-orange);border-radius:var(--kx-radius-round)}
.hero{background:linear-gradient(90deg,rgba(1,31,68,.96),rgba(2,63,135,.86)),var(--kx-navy-900);border-radius:0;border-bottom:4px solid var(--kx-orange)}
.hero .eyebrow{color:var(--kx-orange-300)}
.hero h2,.hero h1,.hero h3{color:#fff}
.login-art h1,.login-art h2{color:#fff}
.section-note{border-left-color:var(--kx-orange);background:var(--kx-navy-50);color:var(--kx-gray-700)}
.badge-count{background:var(--kx-navy-50);color:var(--kx-navy)}
.tag{border-radius:4px}
.tag.job{background:var(--kx-orange-50);color:var(--kx-orange-700);border-color:var(--kx-orange-100)}

/* ---------- ตาราง (หัวตาราง Navy ตาม CI) ---------- */
th{background:var(--kx-navy);color:#fff;border-color:var(--kx-navy);font-weight:500;letter-spacing:.3px}
th .sort-btn,th a,th button{color:#fff}
th .sort-btn:hover{color:var(--kx-orange-300)}
th input[type=checkbox]{accent-color:var(--kx-orange)}
tbody tr:hover td{background:var(--kx-navy-50)}
.strong{color:var(--kx-navy);font-weight:500}

/* ---------- สถานะ (สีความหมาย) ---------- */
.pill{border-radius:6px;font-weight:500}
.pill.green{background:var(--kx-success-50);color:var(--kx-success)}
.pill.blue{background:var(--kx-navy-50);color:var(--kx-navy)}
.pill.amber{background:#FFF4E0;color:#9A5B00}
.pill.red{background:var(--kx-red-50);color:var(--kx-red-700)}
.pill.gray{background:#F1F2F3;color:var(--kx-gray-700)}
.alert{border-radius:0}
.alert.success{background:var(--kx-success-50);border-color:#BFE3CD;color:var(--kx-success)}
.alert.error{background:var(--kx-red-50);border-color:var(--kx-red-100);color:var(--kx-red-700)}
.status-dot.ok{background:var(--kx-success)}
.toast{background:var(--kx-navy-900);border-radius:0;border-left:4px solid var(--kx-orange)}
.toast.bad{background:var(--kx-red-700);border-left-color:var(--kx-red-100)}

/* ---------- หน้าต่าง (Modal) ---------- */
.modal{border-top:4px solid var(--kx-orange);border-color:var(--kx-gray-200)}
.modal::backdrop{background:rgba(1,31,68,.62)}
.close-dialog{border-radius:var(--kx-radius-btn);color:var(--kx-navy)}
.modal h2{color:var(--kx-navy)}

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login-art{background:linear-gradient(90deg,rgba(1,31,68,.94),rgba(2,63,135,.80)),var(--kx-navy-900);border-right:6px solid var(--kx-orange)}
.login-brand{letter-spacing:0}
.logo-login{width:min(120px,30vw);border-radius:0;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
.art-tag{color:var(--kx-orange-300);letter-spacing:3px;font-weight:500}
.art-caption{font-weight:500;color:#fff}
.art-caption em{font-style:normal;color:var(--kx-orange)}
.login-card .login-logo{display:block;width:min(260px,70%);height:auto;margin:0 0 22px}
.login-card h1{color:var(--kx-navy);font-weight:600}
.login-card h1 span{color:var(--kx-gray-700);font-weight:400}
.login-help,.remember-help{color:var(--kx-gray-500)}
.password-toggle{color:var(--kx-navy)}
.boot-help{border-radius:0}

/* ---------- โมดูล: ให้ปุ่มหลักทุกโมดูลเป็นส้ม, ลิงก์/แท็บเป็น Navy ---------- */
.so100-tab.selected{color:var(--kx-navy);background:var(--kx-navy-50);border-color:var(--kx-navy-200);box-shadow:inset 0 -3px 0 var(--kx-orange)}
.io-table th,.io-so-pick th,.so100-ws-results th,.ck-dialog-results th,.ck-dialog-results .ck-lookup-table th,.ck-items thead th,.role-matrix th{background:var(--kx-navy);color:#fff;border-color:var(--kx-navy)}
.ck-total-row th,.ck-total-row td{background:var(--kx-orange-50)!important;color:var(--kx-navy)!important;border-top-color:var(--kx-orange)!important}

@media(max-width:970px){
  .sidebar .brand{margin:-24px -14px 18px}
}
@media(max-width:580px){
  .login-card .login-logo{width:min(220px,80%)}
}

/* ---------- v1.8.3: แนวปุ่มหัวหน้า + ปุ่มย่อ/ขยายเมนูบริหารงานติดตั้ง ---------- */
.page-actions{align-items:flex-end}
.page-actions .btn,.page-actions .date-picker,.page-actions input,.page-actions select{min-height:42px;height:42px}
.page-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding-top:0;padding-bottom:0}
.page-actions .small-label{display:flex;flex-direction:column;gap:6px;margin:0;line-height:1}
.page-actions .small-label input{margin:0}
.nav-parent-row{position:relative;gap:0;margin:3px 0;transition:background .15s ease}
.nav-parent-row>.nav-link{margin:0;padding-right:6px;background:transparent!important;box-shadow:none!important}
.nav-parent-row:hover{background:rgba(255,255,255,.07)}
.nav-parent-row:has(.nav-link.active){background:rgba(255,255,255,.10);box-shadow:inset 4px 0 0 var(--kx-orange)}
.nav-parent-row:has(.nav-link.has-active-child:not(.active)){background:rgba(255,255,255,.04)}
.nav-parent-row .nav-link.active .nav-icon,.nav-parent-row .nav-link.has-active-child .nav-icon{color:var(--kx-orange)}
.nav-expand{width:30px;height:30px;margin-right:8px;border-radius:8px;background:rgba(255,255,255,.06);color:#C9D5E6;border:1px solid rgba(255,255,255,.10);transition:background .15s ease,color .15s ease}
.nav-expand:hover,.nav-expand:focus-visible{background:var(--kx-orange);border-color:var(--kx-orange);color:#fff}
.nav-chevron{width:16px;height:16px;display:block;transition:transform .2s ease}
.nav-expand[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}
.nav-submenu{border-left-color:rgba(255,255,255,.16)}

/* ---------- v1.8.4: ช่องที่ Role ตั้ง "ซ่อนในฟอร์ม" ---------- */
.field-hidden,[hidden].field-hidden{display:none!important}
.role-matrix th.role-hide-th{background:var(--kx-orange-700)}
.role-hide-cell{background:var(--kx-orange-50)}
.role-row-hidden td{background:#F6F6F6}
.role-row-hidden .role-field-name strong{color:var(--kx-gray-500);text-decoration:line-through}
.role-row-hidden .role-field-name .sub::after{content:" · ซ่อนในฟอร์ม";color:var(--kx-orange-700);font-weight:500}

/* ---------- v1.8.7: ภาพรวมวันนี้ซ่อนกล่องตาม Role ---------- */
.layout-one{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.stats-grid.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats-grid.stats-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats-grid.stats-1{grid-template-columns:minmax(0,1fr)}
@media(max-width:1250px){.stats-grid.stats-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.stats-grid.stats-3,.stats-grid.stats-2{grid-template-columns:minmax(0,1fr)}}
.ck-lock-note{border-left:4px solid var(--kx-orange)}
/* v1.8.8 ลบเอกสารถาวร (Admin) — หน้าต่างตรวจก่อนลบ / พิมพ์ยืนยัน */
.row-actions .kx-delete{margin-left:4px}
.kx-del .kx-del-no{color:var(--kx-navy)}
.kx-del .kx-del-word{display:inline-block;background:var(--kx-red-50);border:1px solid var(--kx-red-100);color:var(--kx-red-700);padding:1px 8px;font-weight:600;word-break:break-all}
.kx-del .kx-del-list{margin:6px 0 16px;padding-left:20px;font-size:12px;line-height:1.9;color:var(--kx-navy)}
.kx-del .kx-del-table{min-width:0}
.kx-del .kx-del-table td{overflow-wrap:anywhere}
.kx-del .kx-del-table td.strong{white-space:nowrap;overflow-wrap:normal}
.kx-del form label{margin-top:4px}
.btn.danger.kx-del-submit:not(:disabled){background:var(--kx-red);border-color:var(--kx-red);color:#fff}
.btn.danger.kx-del-submit:not(:disabled):hover{background:var(--kx-red-700)}
/* v1.9.0 เครื่องมือช่าง — ว่าง/ทั้งหมด, สถานะ, รอบบำรุงรักษา, ประวัติ */
.iops .io-free{display:inline-block;min-width:64px;text-align:center;padding:3px 10px;border-radius:8px;background:var(--kx-navy-50);color:var(--kx-navy);font-weight:600;font-size:14px}
.iops .io-free.io-free-0{background:var(--kx-orange-50);color:var(--kx-orange-700)}
.iops .io-tool-st{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:8px;background:var(--kx-navy-50);color:var(--kx-navy);white-space:nowrap}
.iops .io-tool-REPAIR,.iops .io-tool-OUT_REPAIR,.iops .io-tool-OUT{background:var(--kx-orange-50);color:var(--kx-orange-700)}
.iops .io-tool-RETIRED{background:var(--kx-gray-100);color:var(--kx-gray-700)}
.iops .io-mt{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:8px;white-space:nowrap}
.iops .io-mt-none{background:var(--kx-gray-100);color:var(--kx-gray-700)}.iops .io-mt-ok{background:var(--kx-navy-50);color:var(--kx-navy)}
.iops .io-mt-soon{background:var(--kx-orange-50);color:var(--kx-orange-700)}.iops .io-mt-due{background:var(--kx-red-50);color:var(--kx-red-700);border:1px solid var(--kx-red-100)}
.iops .io-row-due td{background:var(--kx-red-50)}
.iops .io-tool-table td small,.iops .io-model-table td small,.io-history td small{display:block;color:var(--kx-gray-500);font-size:11px;margin-top:2px}
.iops .io-tool-acts{white-space:normal;min-width:180px}.iops .io-tool-acts .btn{margin:2px 0}
.iops .io-tool-filter input{max-width:380px}.iops .io-tool-filter select{max-width:220px}
.iops .io-tool-alert{margin:0 0 14px}
.io-form-head{font-size:13px;color:var(--kx-navy);margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--kx-navy-50)}
.iops .io-check{display:flex;align-items:center;gap:8px;align-self:end;min-height:42px}.iops .io-check input{width:auto;min-height:0;margin:0}
.io-tool-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 16px;margin:0 0 6px}
.io-tool-info div{border-bottom:1px solid var(--kx-gray-100);padding:4px 0}.io-tool-info dt{font-size:11px;color:var(--kx-gray-500)}.io-tool-info dd{margin:2px 0 0;color:var(--kx-navy);font-weight:500;overflow-wrap:anywhere}
.io-history .io-pre{white-space:pre-wrap;max-width:280px}
.modal:has(.io-history){width:min(980px,calc(100% - 22px))}
.iops .io-tool-table td:first-child strong{white-space:nowrap}

/* v1.9.3 หน้าต่าง (dialog) บน iPad / มือถือ — สูงไม่เกินพื้นที่ที่มองเห็นจริง (dvh ไม่รวมแถบ Safari),
   เลื่อนในหน้าต่างได้ และปุ่ม ยกเลิก / บันทึก ติดด้านล่างเสมอ ไม่ต้องซูมออก */
dialog.modal{max-height:calc(100% - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog.modal .form-footer{position:sticky;bottom:0;z-index:4;background:var(--kx-white);padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));margin-top:16px;
  border-top:1px solid var(--kx-gray-200);box-shadow:-30px 0 0 var(--kx-white),30px 0 0 var(--kx-white)}
/* SO100 สร้างจาก WINSpeed: ตาราง Sale Order ไม่กินพื้นที่ทั้งจอ → เหลือที่ให้นิ้วเลื่อนหน้าต่าง และเห็นช่องด้านล่าง */
.so100-ws-results{max-height:min(380px,38dvh)}
.so100-lines-hint .table-wrap{max-height:min(260px,28dvh);overflow:auto;overscroll-behavior:contain}
.so100-winspeed-dialog .so100-ws-selected{scroll-margin-top:12px}
/* ตาราง SODT / Sale Order กว้าง → เลื่อนซ้าย-ขวาในกล่องของตัวเอง ไม่ถ่างหน้าต่างบนมือถือ */
.so100-winspeed-dialog .stack>*,.so100-lines-hint{min-width:0;max-width:100%}
@media (max-height:820px),(pointer:coarse){
  .so100-winspeed-dialog .modal-inner{padding:16px 18px}
  .so100-winspeed-dialog .modal-title{margin-bottom:10px}
  .so100-winspeed-dialog .modal .intro,.so100-winspeed-dialog .intro{margin-bottom:8px}
  .so100-ws-results{max-height:min(320px,32dvh)}
  .so100-ws-pager{padding:8px 0}
}
@media (max-width:520px){
  dialog.modal{width:calc(100% - 12px);max-height:calc(100dvh - 12px)}
  .so100-ws-results{max-height:min(300px,34dvh)}
}
/* v1.9.3 หัวตาราง Sale Order (พื้น Navy) — ปุ่มเรียงเป็นตัวอักษรขาว อ่านออก */
.so100-ws-results th{background:var(--kx-navy)}
.so100-ws-results th .so100-sort-button{color:var(--kx-white)}
.so100-ws-results th .so100-sort-button:focus-visible{outline-color:var(--kx-orange)}

/* v1.9.4 Sale Check List บน iPad / มือถือ — หน้าต่างค้นหา (Sale Order / สินค้า 03 / เครื่องมือ 3.4) ไม่ล้นจอ ไม่ต้องย่อ */
/* ฟอร์ม: ตาราง 03 / 3.4 กว้าง → เลื่อนซ้าย-ขวาในกล่องของตัวเอง ไม่ถ่างทั้งหน้า (มือถือเคยถูกย่อทั้งหน้า) */
.ck-grid>*,.ck-wide,.ck-items-block,.ck-tools-block{min-width:0}
.ck-item-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* หน้าต่าง: สูงไม่เกินจอที่มองเห็นจริง · ตารางผลลัพธ์ยืด-หดเอง แถบเลขหน้าอยู่ในจอเสมอ */
dialog.ck-dialog{max-height:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
#ck-lookup-dialog[open]{display:flex;flex-direction:column}
#ck-lookup-dialog[open]>*{flex:0 0 auto;min-width:0}
#ck-lookup-dialog[open] .ck-dialog-results{flex:1 1 auto;max-height:none;min-height:140px}
@media (max-height:820px),(pointer:coarse){
  #ck-lookup-dialog{padding:16px 18px}
  #ck-lookup-dialog .ck-dialog-head{padding-bottom:6px;margin-bottom:6px}
  #ck-lookup-dialog .ck-lookup-search{margin:8px 0}
  #ck-lookup-dialog .ck-lookup-controls{margin:4px 0 8px;gap:8px}
  #ck-lookup-dialog .ck-pagination{padding-top:8px}
}
@media (max-width:520px){
  dialog.ck-dialog{width:calc(100% - 12px);max-height:calc(100dvh - 12px);padding:12px}
  #ck-lookup-dialog .ck-lookup-controls label{flex:1 1 40%}
}
/* v1.9.4 หัวตารางหน้าต่างค้นหา Sale Check List (พื้น Navy) — ปุ่มเรียงเป็นตัวอักษรขาว อ่านออก */
.ck-dialog-results th .ck-sort-button,.ck-dialog-results th .ck-sort-button:hover,.ck-dialog-results th .ck-sort-button:focus-visible{color:var(--kx-white)}
/* v2.1.1 เมนูลูก CRM · SALES (ย่อ / ขยายได้) — ตอนย่อ Sidebar บนจอคอมยังเห็นเป็นไอคอน (กลุ่มนี้ไม่มีหน้าเมนูหลักให้กดแทน) */
.nav-child>span:not(.nav-child-icon){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:971px){
  .shell.sidebar-collapsed .nav-submenu.nav-submenu-icons{display:grid;margin:0;padding:0;border-left:0}
  .shell.sidebar-collapsed .nav-submenu-icons .nav-child{justify-content:center;padding:9px 4px}
  .shell.sidebar-collapsed .nav-submenu-icons .nav-child>span:not(.nav-child-icon){display:none}
  .shell.sidebar-collapsed .nav-submenu-icons .nav-child-icon{font-size:18px}
}

/* v2.5.0 สำรอง / ล้างข้อมูลระบบ (system_data.js) — เฉพาะบัญชี admin เจ้าของระบบ */
.sysd-card{margin-bottom:20px;min-width:0}
.sysd-card .card-header p.sub{margin:4px 0 0;font-size:13px;color:var(--kx-gray-700)}
.sysd-card code{background:var(--kx-gray-100);padding:1px 6px;font-size:12px;overflow-wrap:anywhere}
.sysd-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px 22px 10px}
.sysd-toolbar input[type=search]{flex:1 1 240px;max-width:380px}
.sysd-toolbar label.small-label{display:flex;flex-direction:column;gap:4px}
.sysd-toolbar select{width:auto;min-width:130px}
.sysd-table .sysd-name{overflow-wrap:anywhere;min-width:220px}
.sysd-table .sysd-actions{white-space:nowrap;text-align:right}
.sysd-table .sysd-actions .table-action{margin-left:6px}
.sysd-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 22px;font-size:12px;color:var(--kx-gray-500);flex-wrap:wrap}
.sysd-pager span:first-child{margin-right:auto}
.sysd-danger{border-top:3px solid var(--kx-red)}
.sysd-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;padding:14px 22px}
.sysd-group{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--kx-gray-200);padding:12px 14px;cursor:pointer;background:var(--kx-white);min-width:0}
.sysd-group.on{border-color:var(--kx-red-300);background:var(--kx-red-50)}
.sysd-group input[type=checkbox]{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--kx-red)}
.sysd-group-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.sysd-group-text strong{color:var(--kx-navy)}
.sysd-title{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sysd-group-text .sub{font-size:12.5px;color:var(--kx-gray-700);line-height:1.5}
.sysd-needs{font-size:12px;color:var(--kx-red-700)}
.sysd-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 22px 18px;flex-wrap:wrap}
.sysd-footer span{margin-right:auto;color:var(--kx-gray-700);font-size:13px}
.sysd-list{margin:6px 0 14px;padding-left:20px;line-height:1.8}
.sysd-newpass{margin-top:12px;padding-top:12px;border-top:1px solid var(--kx-gray-200)}
.sysd-newpass p.sub{font-size:13px;color:var(--kx-gray-700);margin:0 0 10px}

@media (max-width:640px){.sysd-groups{grid-template-columns:1fr;padding:12px 16px}.sysd-toolbar,.sysd-pager,.sysd-footer{padding-left:16px;padding-right:16px}}


/* ---------- v2.6.0 หน้าต่าง Pop up: ตรึงหัวด้านบน (ชื่อหน้าต่าง + ปุ่ม ×) ส่วนข้อมูลเลื่อนได้ตามปกติ — ทุกหน้าต่างทุกโมดูล ---------- */
/* ค่า --dlg-py / --dlg-px = padding จริงของ .modal-inner แต่ละแบบ (หัวยืดเต็มความกว้าง ไม่ให้เกิดแถบเลื่อนแนวนอน) */
.modal-inner{--dlg-py:26px;--dlg-px:26px}
.role-dialog .modal-inner{--dlg-py:24px;--dlg-px:24px}
dialog.modal .modal-title{position:sticky;top:0;z-index:6;background:var(--kx-white);
  margin:calc(-1 * var(--dlg-py)) calc(-1 * var(--dlg-px)) 18px;padding:max(10px, calc(var(--dlg-py) - 4px)) var(--dlg-px) 12px;
  border-bottom:1px solid var(--kx-gray-100)}
dialog.modal .modal-title .intro{margin-bottom:0}
.ck-dialog-head{position:sticky;top:0;z-index:6;background:var(--kx-white)}
@media (max-height:820px),(pointer:coarse){.so100-winspeed-dialog .modal-inner{--dlg-py:16px;--dlg-px:18px}}
@media(max-width:700px){.modal-inner.iops{--dlg-py:0px;--dlg-px:2px}}
@media(max-width:580px){.modal-inner{--dlg-py:19px;--dlg-px:19px}.role-dialog .modal-inner{--dlg-py:15px;--dlg-px:15px}.modal-inner.iops{--dlg-py:0px;--dlg-px:2px}}
@media(max-width:520px){.so100-winspeed-dialog .modal-inner{--dlg-py:14px;--dlg-px:14px}}

/* ---------- v2.6.0 ภาพรวมวันนี้ = Dashboard งานขาย (sales_dashboard.js) ---------- */
#sdash-period,#sdash-owner{width:auto;min-width:150px}
.sdash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.sdash-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:var(--kx-white);border:1px solid var(--kx-gray-100);border-top:3px solid var(--kx-navy);padding:16px 18px;min-width:0;cursor:pointer;color:var(--kx-gray-900)}
.sdash-kpi:hover:not(:disabled){border-color:var(--kx-navy-200);border-top-color:var(--kx-orange)}
.sdash-kpi:disabled{cursor:default;opacity:1}
.sdash-kpi strong{font-size:26px;font-weight:600;color:var(--kx-navy);line-height:1.15;overflow-wrap:anywhere}
.sdash-kpi-label{font-size:12px;font-weight:500;color:var(--kx-gray-700)}
.sdash-kpi .sub{font-size:12px;color:var(--kx-gray-500)}
.sdash-delta{font-size:11.5px;color:var(--kx-gray-500)}
.sdash-delta.up{color:var(--kx-navy)}
.sdash-delta.down{color:var(--kx-orange-700)}
.sdash-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sdash-card{margin-bottom:18px}
.sdash-card .card-header h2{font-size:17px}
.sdash-legend{display:flex;gap:14px;font-size:12px;color:var(--kx-gray-700);flex-wrap:wrap}
.sdash-dot{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.sdash-dot.qt,.sdash-bar-qt{background:var(--kx-navy);fill:var(--kx-navy)}
.sdash-dot.so,.sdash-bar-so{background:var(--kx-orange);fill:var(--kx-orange)}
.sdash-chart{width:100%;height:auto;display:block}
.sdash-grid{stroke:var(--kx-gray-100);stroke-width:1}
.sdash-axis{font-size:11px;fill:var(--kx-gray-500);font-family:var(--kx-font)}
.sdash-funnel{display:grid;gap:12px}
.sdash-funnel-row{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:13px}
.sdash-funnel-row strong{color:var(--kx-navy);font-weight:600;white-space:nowrap}
.sdash-track{height:12px;background:var(--kx-navy-50);overflow:hidden}
.sdash-fill{height:100%;background:var(--kx-navy-300)}
.sdash-fill.step-0{background:var(--kx-navy-200)}.sdash-fill.step-1{background:var(--kx-navy-300)}.sdash-fill.step-2{background:var(--kx-navy-500)}
.sdash-fill.step-3{background:var(--kx-navy)}.sdash-fill.step-4,.sdash-fill.stage{background:var(--kx-orange)}
.sdash-table{min-width:420px}
.sdash-table th{background:var(--kx-navy);color:var(--kx-white);border-color:var(--kx-navy)}
.sdash-table td.num,.sdash-table th.num{text-align:right}
.sdash-empty{padding:20px 22px;color:var(--kx-gray-500);font-size:13px;margin:0}
.sdash-todo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;padding:0 22px 20px}
.sdash-todo-item{border:1px solid var(--kx-gray-100);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;background:var(--kx-white)}
.sdash-todo-item.has{border-left:3px solid var(--kx-orange)}
.sdash-todo-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px;color:var(--kx-gray-700)}
.sdash-todo-head strong{font-size:22px;color:var(--kx-navy);font-weight:600}
.sdash-todo-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px;line-height:1.5}
.sdash-todo-list li{overflow-wrap:anywhere}
.sdash-todo-item .btn{align-self:flex-start}
.sdash-due{display:block;font-size:11.5px;color:var(--kx-orange-700)}
.sdash-due.late,.sdash-alert{color:var(--kx-red)}
.sdash-alert{font-size:12.5px;margin:0}
@media(max-width:1100px){.sdash-grid2{grid-template-columns:1fr}}
@media(max-width:580px){.sdash-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sdash-kpi{padding:12px}.sdash-kpi strong{font-size:20px}
  .sdash-funnel-row{grid-template-columns:minmax(90px,120px) minmax(0,1fr) auto;gap:8px;font-size:12px}.sdash-todo-grid{padding:0 16px 16px}
  #sdash-period,#sdash-owner{flex:1 1 45%}}

/* ---------- v2.6.0 CRM: ผู้ติดต่อหลายคนในฟอร์มบริษัท · เลขผู้เสียภาษีซ้ำ · ค้นลูกค้าของ Sale คนอื่น · ตั้งค่าช่องบังคับ ---------- */
.crm-contact-grid{min-width:760px}
.crm-contact-grid td{padding:6px 6px;vertical-align:middle}
#crm-contact-box .crm-contact-grid input:not([type=radio]){min-height:36px;padding:6px 8px;font-size:13px;margin:0}
.crm-box>.checkbox-label{display:flex;gap:8px;align-items:center;margin:8px 0;font-size:13px}
.crm-contact-grid input[readonly]{background:var(--kx-navy-50);color:var(--kx-gray-700)}
.crm-contact-grid td.center{text-align:center}
#crm-contact-box .btn{margin-top:10px}
.crm-tax-warn{margin:0}
.crm-tax-warn ul{margin:6px 0 8px;padding-left:18px}
.crm-tax-warn .checkbox-label{display:flex;gap:8px;align-items:center;font-weight:500;color:var(--kx-navy)}
.crm-dir-box{margin-top:14px;border-top:1px solid var(--kx-gray-100);padding-top:10px}
.crm-pad{padding:14px 22px;margin:0}
.crm-req-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:10px 0 14px}
.crm-req-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.crm-req-list .checkbox-label{display:flex;gap:8px;align-items:center;font-size:13px}
@media(max-width:820px){.crm-req-grid,.crm-req-list{grid-template-columns:1fr}}
/* v2.7.0 ลายเซ็นในทะเบียนประวัติ · ช่องที่ล็อก (แก้ได้เฉพาะ Admin) ดูออกว่าแก้ไม่ได้ */
.profile-sign-box .crm-sign-preview{margin-bottom:12px}
.profile-sign-box input[type=file]{font-size:12px;max-width:100%}
.form-grid input:disabled,.form-grid select:disabled,.form-grid textarea:disabled{background:var(--kx-gray-100);border-color:var(--kx-gray-200);color:var(--kx-gray-700);cursor:not-allowed}

/* v2.8.0 ทะเบียนตำแหน่ง (หน้า ฝ่าย / แผนก) ใช้แถบค้นหาแบบเดียวกับทะเบียนฝ่าย */
.dep-toolbar #pos-search{flex:1 1 260px;max-width:420px}