/* calSalary_wizard */

:root {
  --bg-header: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  --darkblue: #1e3c72;
  --danger: #e74c3c;
  --lowblue: #c1ddf1; 
  --orange: #f39c12;
  --lowDark: #333;
  --success: #27ae60;
  --info: #3498db;
}

.calSalary_wizard {
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  border-radius: 0px;
  padding: 20px 20px;

  /* Tab Control switch to container */

  .conAllTab {
    scrollbar-width: thin;
  }

  /* Chrome / Edge / Safari */
  .conAllTab::-webkit-scrollbar {
    height: 2px;  
    width: 2px;   
  }

  .conAllTab::-webkit-scrollbar-track {
    background: transparent;
  }

  .conAllTab::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 10px;
  }

  .conAllTab::-webkit-scrollbar-thumb:hover {
    background: #999999;
  }

  .conTab {
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(219, 231, 255, 1);
    background: rgba(247, 251, 255, 1);
    transition: all 0.15s ease-in-out;
  }

  .conTab:hover {
    background: rgba(238, 245, 255, 1);
    border-color: rgba(188, 214, 255, 1);
  }

  .conTab.active {
    background: rgba(29, 78, 216, 1); /* น้ำเงิน */
    border-color: rgba(29, 78, 216, 1);
  }
  .conTab.active label {
    color: #ffffff !important;
  }

  /* Tab Control switch to container */

  .page-control {
    border: none;
  }

  .page-control .x-tab-bar-default {
    padding: 10px 10px 0px 10px;
  }

  /* pagecontrol border */
  .page-control .x-panel-body-default {
    border: none;
  }

  /* font tab header */
  .page-control .x-tab-inner-default {
    font-family: Kanit, sans-serif;
  }

  /* =========================
     PageControl Tabs: White/Blue + Horizontal Scroll (no arrows)
     ========================= */

  /* 1) พื้นหลังแถบ tab */
  .page-control .x-tab-bar-default {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(219, 231, 255, 1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }

  /* 2) ซ่อนปุ่มลูกศรซ้าย/ขวา (scroller) */
  .page-control .x-tab-bar .x-box-scroller,
  .page-control .x-tab-bar .x-tabbar-scroll-left,
  .page-control .x-tab-bar .x-tabbar-scroll-right,
  .page-control .x-tab-bar .x-tabbar-scroller {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
  }

  /* 3) เปิดให้แถบแท็บ scroll แนวนอนได้เอง */
  .page-control .x-tab-bar .x-tab-bar-body,
  .page-control .x-tab-bar .x-box-inner {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox */
  }

  /* (ถ้าไม่อยากเห็น scrollbar ให้เปิดส่วนนี้) */
  /*
  .page-control .x-tab-bar .x-tab-bar-body::-webkit-scrollbar,
  .page-control .x-tab-bar .x-box-inner::-webkit-scrollbar {
    height: 0px;
  }
  */

  /* 4) ทำให้ tab เรียงเป็นแถวเดียว และดู modern */
  .page-control .x-tab {
    display: inline-flex !important;
    float: none !important;
    margin: 6px 8px 6px 0;
    border-radius: 12px;
    border: 1px solid rgba(219, 231, 255, 1);
    background: rgba(247, 251, 255, 1);
    transition: all 0.15s ease-in-out;
  }

  /* 5) ตัวอักษร tab */
  .page-control .x-tab .x-tab-inner-default {
    color: rgb(30, 58, 138); /* น้ำเงินเข้ม */
    font-weight: 600;
    padding: 6px 14px;
  }

  /* 6) hover */
  .page-control .x-tab:hover {
    background: rgba(238, 245, 255, 1);
    border-color: rgba(188, 214, 255, 1);
  }

  /* 7) active tab */
  .page-control .x-tab.x-tab-active {
    background: rgba(29, 78, 216, 1); /* น้ำเงิน */
    border-color: rgba(29, 78, 216, 1);
  }
  .page-control .x-tab.x-tab-active .x-tab-inner-default {
    color: #ffffff;
  }

  /* 8) เอา strip เส้นเดิมออกให้ clean */
  .page-control .x-tab-bar-strip {
    display: none;
  }

  .x-tab-bar-default-scroller .x-box-scroller-body-horizontal {
    margin-left: 0;
  }
}

.bg-header {
  background: var(--bg-header);
}

.f-white {
  color: white;
}

.f-darkblue {
  color: var(--darkblue);
}

.bg-darkblue {
  background-color: var(--darkblue);
}

.radius8 {
  border-radius: 8px;
}

.radius12 {
  border-radius: 16px;
}

.hover-ScaleUp {
  transition: transform 0.15s ease-in-out;

  &:hover {
    transform: scale(1.05); 
  }

  &:active {
    transform: scale(0.97); 
  }
}

.grid-box-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--darkblue) !important;
}

/* container */
.calSalary_wizard .x-window-body-default {
  border-radius: 16px;
  background: none !important;
  background-color: transparent !important;
}

/* grid background header free space*/
.calSalary_wizard .x-grid-header-ct {
  background-color: #2a5298;
}

/* column headers */
.calSalary_wizard .x-column-header {
  border: none;
  background-color: #2a5298;
  color: #fff;
  cursor: pointer;
}

/* column headers */
.calSalary_wizard .x-column-header-over {
  border: none;
  background-color: rgb(12, 50, 116);
}

/* column group header text */
.calSalary_wizard .x-column-header-text-inner {
  font-family: 'Kanit', sans-serif;
}

/* grid rows */
.calSalary_wizard .x-grid-with-row-lines .x-grid-item {
  border: none;
  height: auto;
  line-height: 25px;
  border-bottom: 1px solid #eee;
}

/* grid rows background-color */
.calSalary_wizard .x-grid-row {
  background-color: #fff;
}

/* grid rows hover */
.calSalary_wizard .x-grid-row:hover {
  background-color: var(--lowblue);
}

/* grid background options row number */
.calSalary_wizard .x-grid-cell-row-numberer {
  background-color: #fff;
}

/* grid cells */
.calSalary_wizard .x-grid-with-col-lines .x-grid-cell {
  border: none;
}

/* grid cells text */
.calSalary_wizard .x-grid-cell-inner {
  color: var(--lowDark);
}




/* =========================
   uniGUI Buttons (TUniButton)
   ใช้กับ Cls = "btn btn-export" / "btn btn-import" ...
   ========================= */

/* Base: ให้ทับโครง ExtJS ที่ชอบใส่สีฟ้า/gradient ตอน focus/pressed */
.x-btn.btn,
.x-btn.btn .x-frame-mc {
  border-radius: 8px !important;
  border: 0 !important;
  background-image: none !important; /* กัน gradient ของ theme */
  transition: transform .1s ease-in-out, background-color .1s ease-in-out, box-shadow .1s ease-in-out;
}

/* font color */
.x-btn.btn .x-btn-inner {
  color: #fff !important;
}

/* effect ย่อ/ขยาย (ExtJS ใช้ class พวกนี้แทน :hover/:active) */
.x-btn.btn.x-btn-over { transform: scale(1.02); }
.x-btn.btn.x-btn-pressed { transform: scale(0.98); }

/* ===== EXPORT (เขียว) ===== */
.x-btn.btn-export,
.x-btn.btn-export .x-frame-mc {
  background-color: var(--success) !important;
}

.x-btn.btn-export.x-btn-over,
.x-btn.btn-export.x-btn-over .x-frame-mc {
  background-color: #229954 !important;
  box-shadow: 0 4px 12px rgba(34, 153, 84, 0.15) !important;
}

/* สำคัญ: focus/pressed ต้องทับให้ไม่กลับเป็นฟ้า */
.x-btn.btn-export.x-btn-focus,
.x-btn.btn-export.x-btn-pressed,
.x-btn.btn-export.x-btn-focus .x-frame-mc,
.x-btn.btn-export.x-btn-pressed .x-frame-mc {
  background-color: #229954 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ===== IMPORT (ฟ้า) ===== */
.x-btn.btn-import,
.x-btn.btn-import .x-frame-mc {
  background-color: var(--info) !important;
}

.x-btn.btn-import.x-btn-over,
.x-btn.btn-import.x-btn-over .x-frame-mc {
  background-color: #2980b9 !important;
  box-shadow: 0 4px 12px rgba(41, 128, 185, 0.15) !important;
}

.x-btn.btn-import.x-btn-focus,
.x-btn.btn-import.x-btn-pressed,
.x-btn.btn-import.x-btn-focus .x-frame-mc,
.x-btn.btn-import.x-btn-pressed .x-frame-mc {
  background-color: #2980b9 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ===== SAVE (ส้ม) ===== */
.x-btn.btn-save,
.x-btn.btn-save .x-frame-mc {
  background-color: var(--orange) !important;
}

.x-btn.btn-save.x-btn-over,
.x-btn.btn-save.x-btn-over .x-frame-mc {
  background-color: #e67e22 !important;
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.15) !important;
}

.x-btn.btn-save.x-btn-focus,
.x-btn.btn-save.x-btn-pressed,
.x-btn.btn-save.x-btn-focus .x-frame-mc,
.x-btn.btn-save.x-btn-pressed .x-frame-mc {
  background-color: #e67e22 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ===== DARKBLUE ===== */
.x-btn.btn-darkblue,
.x-btn.btn-darkblue .x-frame-mc {
  background-color: var(--darkblue) !important;
}

.x-btn.btn-darkblue.x-btn-over,
.x-btn.btn-darkblue.x-btn-over .x-frame-mc {
  background-color: #2a5298 !important;
  box-shadow: 0 4px 12px rgba(42, 82, 152, 0.15) !important;
}

.x-btn.btn-darkblue.x-btn-focus,
.x-btn.btn-darkblue.x-btn-pressed,
.x-btn.btn-darkblue.x-btn-focus .x-frame-mc,
.x-btn.btn-darkblue.x-btn-pressed .x-frame-mc {
  background-color: #2a5298 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ===== DANGER ===== */
.x-btn.btn-danger,
.x-btn.btn-danger .x-frame-mc {
  background-color: var(--danger) !important;
}

.x-btn.btn-danger.x-btn-over,
.x-btn.btn-danger.x-btn-over .x-frame-mc {
  background-color: #e74c3c !important;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15) !important;
}

.x-btn.btn-danger.x-btn-focus,
.x-btn.btn-danger.x-btn-pressed,
.x-btn.btn-danger.x-btn-focus .x-frame-mc,
.x-btn.btn-danger.x-btn-pressed .x-frame-mc {
  background-color: #e74c3c !important;
  background-image: none !important;
  box-shadow: none !important;
}




/* =========================================================
   UniGUI Button SVG Pack (ExtJS)
   Base + Left/Right align + Icons (import/export/save/next)
   - Use in TUniButton.Cls:
     Import : ux-btn ux-btn-left  ux-ico-import
     Export : ux-btn ux-btn-left  ux-ico-export
     Save   : ux-btn ux-btn-left  ux-ico-save
     Next   : ux-btn ux-btn-right ux-ico-next
   ========================================================= */

/* ---------- Align container (ExtJS button main area) ---------- */
.ux-btn-left .x-btn-button,
.ux-btn-right .x-btn-button{
  display: flex !important;     /* สำคัญ: ทำให้ justify-content มีผล */
  width: 100% !important;
}

.ux-btn-left .x-btn-button{
  justify-content: flex-start !important;
}

.ux-btn-right .x-btn-button{
  justify-content: flex-end !important;
}

/* ---------- Base: inner as flex row ---------- */
.ux-btn .x-btn-inner{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;

  width: 100% !important;
  text-align: left !important;

  position: relative !important;
}

/* เมื่อเป็น ux-btn-right ให้ข้อความชิดขวา (แต่ next icon ยังไปขวาสุดด้วย auto margin) */
.ux-btn-right .x-btn-inner{
  justify-content: flex-end !important;
  text-align: right !important;
}

/* ---------- Base icon (supports :before for left icons) ---------- */
.ux-btn .x-btn-inner:before{
  content: "" !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;

  background-color: #fff;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
}

/* Hover / Disabled for BEFORE */
.ux-btn.x-btn-over .x-btn-inner:before{
  background-color: #fff;
}
.ux-btn.x-item-disabled .x-btn-inner:before{
  background-color: #fff;
}

/* ---------- Icon mappings (LEFT via :before) ---------- */
.ux-ico-import .x-btn-inner:before{
  -webkit-mask-image: url("import.svg");
          mask-image: url("import.svg");
}

.ux-ico-export .x-btn-inner:before{
  -webkit-mask-image: url("export.svg");
          mask-image: url("export.svg");
}

.ux-ico-save .x-btn-inner:before{
  -webkit-mask-image: url("save.svg");
          mask-image: url("save.svg");
}

.ux-ico-loading .x-btn-inner:before{
  -webkit-mask-image: url("spining.svg");
          mask-image: url("spining.svg");
}
/* =========================================================
   NEXT (RIGHT icon via :after, forced to the far right)
   ========================================================= */

/* Next: disable left icon */
.ux-ico-next .x-btn-inner:before{
  content: none !important;
  display: none !important;
}

/* Next: create AFTER icon and push to far right */
.ux-ico-next .x-btn-inner:after{
  content: "" !important;
  display: inline-block !important;

  margin-left: auto !important;   /* หัวใจ: ดันไปขวาสุด */
  width: 16px !important;
  height: 16px !important;

  background-color: #fff;

  -webkit-mask: url("next.svg") no-repeat center / contain;
          mask: url("next.svg") no-repeat center / contain;
}

/* Hover / Disabled for AFTER */
.ux-ico-next.x-btn-over .x-btn-inner:after{
  background-color: #fff;
}
.ux-ico-next.x-item-disabled .x-btn-inner:after{
  background-color: #fff;
}






/* File Upload */
/* ===== Space Upload Button ===== */
.ux-upload-space .x-btn-button{
  border-radius: 14px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #06b6d4 100%) !important;
  box-shadow: 0 10px 24px rgba(124,58,237,.28) !important;
}

.ux-upload-space .x-btn-inner{
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

.ux-upload-space.x-btn-over .x-btn-button{
  filter: brightness(1.08);
}

.ux-upload-space.x-btn-pressed .x-btn-button{
  transform: translateY(1px);
}

/* ===== Space Upload Window (uniGUI upload dialog) ===== */
.ux-upload-win .x-window-header{
  background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(124,58,237,.95)) !important;
  border: 0 !important;
}

.ux-upload-win .x-window-body{
  background: rgba(10, 12, 20, .92) !important;
  border: 0 !important;
}

.ux-upload-win .x-form-item-label,
.ux-upload-win .x-form-field{
  color: rgba(255,255,255,.88) !important;
}

.ux-upload-win .x-btn-button{
  border-radius: 12px !important;
}

















/* =========================
   DW Radio Premium (NO BLACK)
   Scope: .dw-radio.dw-radio--premium
   Requires: :has()
   ========================= */

/* ปรับโทนหลัก (แก้สีได้จากตรงนี้) */
.dw-radio.dw-radio--premium{
  --c1: rgba(106, 110, 255, 1);   /* indigo */
  --c2: rgba( 70, 200, 255, 1);   /* cyan */
  --c3: rgba(255,  90, 190, 1);   /* pink */
  --bg: rgba(255,255,255,.78);
  --bd: rgba(120,160,255,.22);
  --shadow: 0 10px 28px rgba(70,120,255,.18);
}

.dw-radio.dw-radio--premium .x-form-radio{
  background:none !important;
}

/* ซ่อน input จริง (แต่ยังโฟกัสได้) */
.dw-radio.dw-radio--premium input.x-form-cb-input{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  left:16px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}

/* LABEL = card */
.dw-radio.dw-radio--premium label.x-form-cb-label{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;

  padding:12px 16px 12px 50px !important;
  border-radius:14px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70)) !important;
  border:1px solid var(--bd) !important;

  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor:pointer !important;
  user-select:none !important;

  transition:
    transform .14s ease,
    box-shadow .20s ease,
    border-color .20s ease,
    background .20s ease,
    filter .20s ease !important;

  overflow:hidden; /* เพื่อ ripple */
}

/* แสง gradient บางๆ ด้านหลัง (ทำให้ดู premium) */
.dw-radio.dw-radio--premium label.x-form-cb-label::marker{ content:""; } /* กันบางบราวเซอร์ */
.dw-radio.dw-radio--premium label.x-form-cb-label:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120px 60px at 18% 0%,
      rgba(70,200,255,.25),
      transparent 60%),
    radial-gradient(140px 70px at 90% 30%,
      rgba(255,90,190,.18),
      transparent 62%);
  opacity:.55;
  pointer-events:none;
}

/* วงกลม outer */
.dw-radio.dw-radio--premium label.x-form-cb-label > *{ position:relative; } /* กันทับ */
.dw-radio.dw-radio--premium label.x-form-cb-label:after{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:50%;

  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.95),
      rgba(255,255,255,.55) 60%,
      rgba(255,255,255,.35) 100%);
  box-shadow:
    0 0 0 2px rgba(70,200,255,.35),
    0 0 18px rgba(70,200,255,.22),
    inset 0 0 0 2px rgba(255,255,255,.55);

  transition: all .18s ease;
}

/* จุดด้านใน (ใช้ pseudo อีกชั้นด้วย box-shadow trick) */
.dw-radio.dw-radio--premium label.x-form-cb-label{
  --dotScale: 0;
}
.dw-radio.dw-radio--premium label.x-form-cb-label .dw-dot{
  display:none;
}

/* เราจะวาด dot ด้วย background ของวงกลมตอน checked */
.dw-radio.dw-radio--premium:has(input.x-form-cb-input:checked) label.x-form-cb-label:after{
  box-shadow:
    0 0 0 2px rgba(106,110,255,.55),
    0 0 26px rgba(106,110,255,.28),
    0 0 40px rgba(255,90,190,.18),
    inset 0 0 0 2px rgba(255,255,255,.65);
  background:
    radial-gradient(circle,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.75) 45%,
      rgba(255,255,255,.55) 65%,
      rgba(255,255,255,.35) 100%),
    radial-gradient(circle at 50% 50%,
      rgba(106,110,255,.95) 0%,
      rgba(70,200,255,.95) 55%,
      rgba(255,90,190,.85) 100%);
}

/* Hover = ยกการ์ด + เพิ่ม glow */
.dw-radio.dw-radio--premium label.x-form-cb-label:hover{
  transform: translateY(-1px);
  border-color: rgba(70,200,255,.35) !important;
  box-shadow: 0 16px 38px rgba(70,120,255,.22) !important;
  filter:saturate(1.05);
}

/* Press = กดแล้วมีแรงตอบสนอง */
.dw-radio.dw-radio--premium label.x-form-cb-label:active{
  transform: translateY(0px) scale(.992);
}

/* ✅ Checked = highlight ขอบแบบ gradient */
.dw-radio.dw-radio--premium:has(input.x-form-cb-input:checked) label.x-form-cb-label{
  border:1px solid transparent !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74)) padding-box,
    linear-gradient(90deg, rgba(106,110,255,.85), rgba(70,200,255,.85), rgba(255,90,190,.75)) border-box !important;
  box-shadow: 0 18px 46px rgba(70,120,255,.26) !important;
}

/* Pop animation ตอนเลือก */
@keyframes dwPop {
  0%   { transform: translateY(-50%) scale(.88); }
  60%  { transform: translateY(-50%) scale(1.10); }
  100% { transform: translateY(-50%) scale(1.00); }
}
.dw-radio.dw-radio--premium:has(input.x-form-cb-input:checked) label.x-form-cb-label:after{
  animation: dwPop .18s ease-out;
}

/* Ripple effect (ตอนกด) */
.dw-radio.dw-radio--premium label.x-form-cb-label::before{
  /* already used for soft lights; ripple จะทำด้วย ::after? เราใช้ ripple เป็น pseudo ซ้อนด้วย background layer */
}
.dw-radio.dw-radio--premium label.x-form-cb-label{
  --rx: 50%;
  --ry: 50%;
}
.dw-radio.dw-radio--premium label.x-form-cb-label:active{
  background:
    radial-gradient(circle 80px at var(--rx) var(--ry),
      rgba(70,200,255,.22),
      transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70)) !important;
}

/* Focus (คีย์บอร์ด) */
.dw-radio.dw-radio--premium:has(input.x-form-cb-input:focus-visible) label.x-form-cb-label{
  outline:2px solid rgba(70,200,255,.45);
  outline-offset:4px;
}

/* Disabled */
.dw-radio.dw-radio--premium:has(input.x-form-cb-input:disabled),
.dw-radio.dw-radio--premium:has(input.x-form-cb-input[aria-disabled="true"]){
  opacity:.55;
  filter:grayscale(.15);
}