/* toolbar */
#toolbarCtn{ padding: 10px 10px 5px 10px; }
#toolbarCtn label{  line-height: 1.9rem; }
#toolbarCtn input[type=date],
#toolbarCtn input[type=text]{
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
#toolbarCtn input[type=date]:disabled,
#toolbarCtn input[type=text]:disabled{
  background-color: gray;
}
#toolbarCtn input[type=date]:hover,
#toolbarCtn input[type=text]:hover{
  outline : 1px solid black;
  border: 1px solid black;
  border-radius: 0;
}
#toolbarCtn input[type=date]:focus,
#toolbarCtn input[type=text]:focus{  
  outline : 1px solid black;
  border: 1px solid black;
  border-radius: 0;
}

#toolbarCtn input[type=search]{ outline: none; }
#toolbarCtn input[type=search]:hover{     
  border: 1px solid black;
}
#toolbarCtn input[type=search]:focus{ 
  outline: none;
  background-color: lightblue; 
  border: 1px solid black;
}

/****** ปุ่ม *******/
.main-ctn .btn{
  border: none;
  border: 1px solid black;
  border-radius: 3px;
  color: white!important;
  line-height: 1.9rem;
}
.main-ctn .btn[disabled]{
  color: lightblue!important;
  background-color: #484848!important;
}



.row{ 
  display: grid;
  grid-template-columns: 18% 5% 7% 5% 12% 12% 18% 12% 11%;
}
.tool-1{ grid-area: 1/1/2/2; }
.tool-2{ grid-area: 1/2/2/3; }
.tool-3{ grid-area: 1/3/2/4; }
.tool-4{ grid-area: 1/4/2/5; }
.tool-5{ grid-area: 1/5/2/6; }
.tool-6{ grid-area: 1/6/2/7; }
.tool-7{ grid-area: 1/7/2/8; padding-left: 15px;}
.tool-8{ grid-area: 1/8/2/9; }
.tool-9{ grid-area: 1/9/2/10; }


/*** Page Title ***/
.tableRowHeader{ 
  padding: 7px 0;
  border-top: 1px dotted white;
  border-bottom: 1px dotted white;
  text-align: center;
  line-height: 1.35rem;
  background-color: var(--main-dark-color);
}



/****************  ****************/
.table-ctn{
  overflow-x: auto;
}
.table-ctn {
  overflow-y: auto;
  max-height: 90vh;
}


/****************  ****************/
table {
  width: 100%;   
  border-spacing: 1px; 
  border-collapse: separate;
  font-size: 0.95rem;  
}
table th,
table td {
  border: 1px solid gray;
  padding: 1px;
  white-space: nowrap; 
  outline: 1px solid gray;
}

/* Scroll fix - thead */
/* 
thead th {
  position: sticky;
  top: 0;
  font-weight: 400;
  z-index: 11;
  background-color: inherit;
}
thead th {
  line-height: 2rem;
  background-color: inherit;
}

thead tr:first-child th:first-child , 
thead tr:first-child th:nth-child(2) {
  background-color: var(--main-dark)
}
thead th:first-child,
tbody td:first-child,
thead th:nth-child(2),
tbody td:nth-child(2) {
  position: sticky;
  z-index: 10; 
  background-color: inherit;
  overflow: hidden;
  white-space: nowrap;
}

thead th:first-child,
tbody td:first-child {
  left: 0;
}

thead th:nth-child(2),
tbody td:nth-child(2) {
  left: 20px;
}
thead th:first-child ,
thead th:nth-child(2) {
  z-index: 12; 
} 
*/

/* =========================================
   Scroll fix - 1st, 2nd, and 3rd columns 
========================================= */

/* 1. ล็อคหัวตารางทั้งหมด (แถวบนสุด) ไม่ให้หายไปตอนเลื่อนลง */
thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #2b3a4a; /* ป้องกันหัวตารางใสจนข้อความซ้อนกัน (ปรับสีตาม Theme ของคุณได้) */
}

/* 2. ล็อคคอลัมน์ 1, 2, 3 (ทั้ง header และข้อมูล) ให้อยู่ชิดซ้าย */
thead th:first-child, tbody td:first-child,
thead th:nth-child(2), tbody td:nth-child(2),
thead th:nth-child(3), tbody td:nth-child(3) {
  position: sticky;
  z-index: 11; 
  /* ดึงสีพื้นหลังของแถว (tr) มาใช้ เพื่อบังคอลัมน์อื่นที่มุดเข้ามาใต้คอลัมน์นี้ */
  background-color: inherit; 
}

/* 3. ล็อคความกว้างและระยะห่าง (left) ให้เป๊ะเป็นมิลลิเมตร */
thead th:first-child, tbody td:first-child {
  min-width: 40px; max-width: 40px;
  left: 0;
}
thead th:nth-child(2), tbody td:nth-child(2) {
  min-width: 90px; max-width: 90px;
  left: 41px; /* 40 + ขอบ 1px */
}
thead th:nth-child(3), tbody td:nth-child(3) {
  min-width: 100px; max-width: 100px; 
  left: 132px; /* 41 + 90 + ขอบ 1px */
}

/* 4. [สำคัญมาก] จุดตัดมุมซ้ายบนสุด (หัวตารางคอลัมน์ 1, 2, 3) ต้องมี z-index สูงสุด! */
thead th:first-child,
thead th:nth-child(2),
thead th:nth-child(3) {
  z-index: 15 !important; /* บังคับให้อยู่หน้าสุด ชนะทั้งแถวบนและคอลัมน์ซ้าย */
  background-color: #2b3a4a !important; /* บังคับสีพื้นหลังให้ทึบสนิท */
}




/*************************************
          PAGINATION
************************************/
.pg-main-ctn{
  display: grid;
  grid-template-columns: 3% 97%;
}

.pg-page-label{ line-height: 1.75rem; font-size: 0.8rem; text-align: center;}
.pg-ctn{ 
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.col-pg { 
  flex-basis: 3.33%; 
  overflow: hidden; 
  white-space: nowrap;
  width: 100%;
}
.col-pg input[type=button]{ 
  border: 1px solid black; 
  border-radius: 3px;
}


.pg-active{
  background-color: darkcyan;
  margin: 0;
  text-align: center ;
  border-radius: 3px;
  color: white;
  font-weight: 1000!important;
  line-height: 1.75rem;
}
.pg{
  background-color: var(--main-dark-color);
  margin: 0;
  text-align: center ;
  border-radius: 3px;
  line-height: 1.75rem;
  color: white;
}
.pg:hover, .pg-active:hover{
  cursor: pointer;  
  filter: brightness(130%)!important;
}





/**************** จอขนาดกลาง ****************/
@media screen and (max-width: 768px) {
  body{ 
    font-size: 12px;
  }  

  .main-ctn{ grid-template-columns: 100%;}  
  .main-ctn .main-left{padding:5px 3px 5px 3px}
  .main-ctn .main-right{padding:5px 3px 5px 3px}

  h3{
    line-height: 2rem;
  }  


  #toolbarCtn{ padding: 7px 3px 3px 3px; }
  #toolbarCtn label{  line-height: 1.75rem; }

  .row{               /*  1   2   3   4   5   6    7 */
    grid-template-columns: 13% 9% 10% 25% 25% 18% ;
  }

  .tool-1{ grid-area: 1/1/2/4; }
  .tool-2{ grid-area: 1/4/2/5; }
  .tool-8{ grid-area: 1/5/2/6; }
  .tool-9{ grid-area: 1/6/2/7; }

  .tool-3{ grid-area: 2/1/3/3; margin-top: 7px;}
  .tool-4{ grid-area: 2/3/3/4; margin-top: 7px;}
  .tool-5{ grid-area: 2/4/3/5; margin-top: 7px;}
  .tool-6{ grid-area: 2/5/3/6; margin-top: 7px;}

  .tool-7{ grid-area: 3/1/4/7; margin-top: 7px; padding-left: 0;}

  
  .pg-main-ctn{
    display: grid;
    grid-template-columns: 9% 91%;
  }
  .col-pg { 
    flex-basis: 10%;
    overflow: hidden; 
    white-space: nowrap;
  }

}

/**************** จอขนาดเล็ก ****************/
@media screen and (max-width: 480px) {
  body{ 
    font-size: 11px;
  }
  #toolbarCtn label{  line-height: 1.9rem; }
  #toolbarCtn input[type=date],
  #toolbarCtn input[type=text]{
    font-size: 0.9rem;
  }
}