/* 
✅ ฟอนต์ & รูปแบบข้อความ
✅ ปุ่ม / สี / ธีม
✅ ตาราง DataTable
✅ ฟอร์ม & Input
✅ องค์ประกอบ Layout
✅ การตอบสนองหน้าจอ (Responsive)
✅ Custom & Component-specific 
*/


/* ✅ ฟอนต์ & รูปแบบข้อความ */
.the-main {
  font-family: "saochingcha", sans-serif;
  font-weight: 600 !important;
}

.content {
  font-family: "saochingcha", sans-serif;
}

/* .content {
  font-family: "Sarabun Anuphan", sans-serif;
} */

.card-header {
  font-weight: 700;
}

.text-green {
  color: #00744B !important;
}


/* 🟩 2. ปุ่ม / สี / ธีม */
.btn-search {
  color: white;
  background-color: #00744b;
}

.btn-search:hover {
  background-color: #57cc99;
  color: black;
}

.btn-green {
  background-color: #00744B !important;
  border-color: #00744B !important;
}

.job-color {
  color: #00744b;
}

.the-a {
  color: #fff0;
}


/* 📊 3. ตาราง DataTable */
/* ไอคอนเปิด/ปิดรายละเอียด */
td.details-control {
  background: url('../../assets/img/chevron-down-regular-24.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.details-control {
  background: url('../../assets/img/chevron-up-regular-24.png') no-repeat center center;
}

/* หัวตาราง */
table.dataTable thead th {
  color: #00744b;
  font-weight: bold;
  border-bottom: 3px solid #00744b !important;
}

/* ปุ่ม pagination ทั้งหมด */
#table_index_paginate .paginate_button {
  color: #333;
  padding: 6px 12px;
  margin: 0 2px;
  border: none;
  background: none;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s;
}

/* ปุ่มที่ถูก hover */
#table_index_paginate .paginate_button:hover {
  background-color: #e0f2f1;
  border-radius: 4px;
  color: #00796b !important;
}

/* ปุ่ม active (หน้าที่เลือกอยู่) */
#table_index_paginate .paginate_button.current {
  background-color: #006d4a;
  color: white !important;
  border-radius: 6px;
  font-weight: bold;
}

/* ไอคอนลูกศร (←, →) */
#table_index_paginate .paginate_button.previous::before {
  content: "←  ";
  font-weight: bold !important;
}

#table_index_paginate .paginate_button.next::after {
  content: "  →";
  font-weight: bold !important;
}

#table_index th,
#table_index td {
  font-size: 16px;
  line-height: 1.5;
  /* padding: 12px 16px; */
  font-weight: 500 !important;
  color: black;
}

/* ความกว้างตารางและการ scroll */
div.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
}

table.dataTable {
  width: 100% !important;
}

/* เมนู length & paginate */
.lp-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 20px;
  gap: 10px;
}

.dataTables_length,
.dataTables_paginate {
  flex: 1 1 auto;
  min-width: 150px;
}

.dataTables_length select {
  -webkit-appearance: auto !important;
}


/* 📝 4. ฟอร์ม & Input */
.content span {
  font-size: 14px;
}

.form-control {
  font-size: 14px;
}

.select2-container .select2-search--inline .select2-search__field {
  font-size: 14px;
}

.the-main span{
    font-size: 20px;
}

.the-main p{
    font-size: 16px;
}

 #card_ref{
    font-size: 13px;
  }

@media (min-width: 768px) {
  .content span {
    font-size: 16px;
  }

  .form-control {
    font-size: 16px;
  }

  .select2-container .select2-search--inline .select2-search__field {
    font-size: 16px;
  }
  .the-main span{
      font-size: 25px;
  }
  .the-main p{
    font-size: 18px;
  }
   #card_ref{
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  .content span {
    font-size: 18px;
  }

  .form-control {
    font-size: 18px;
  }

  .select2-container .select2-search--inline .select2-search__field {
    font-size: 18px;
  }
    .the-main span{
      font-size: 32px;
  }
  .the-main p{
    font-size: 20px;
  }
  #card_ref{
    font-size: 15px;
  }
}

 .details-slide table {
    width: 100%;
    table-layout: auto;
  }

  .details-slide table td:first-child {
    white-space: nowrap;
    width: 1%;
  }

  .details-slide table td {
    vertical-align: top;
    padding: 5px;
  }

  /* 👇 ลดขนาดตัวอักษรเมื่อหน้าจอแคบลง */
  @media (max-width: 768px) {
    .details-slide table td {
      font-size: 13px;
      word-break: break-word;
    }

    .details-slide table td:first-child {
      font-size: 12px;
      color: #006d4a;
    }
  }

/* .form-floating > .form-select ~ label {
  font-size: 16px;
  color: #0004db;
}

.form-floating > label {
  color: black;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.form-floating > .form-control {
  line-height: 4.25;
}

.form-control {
  padding: 15px;
}

.form-check-input {
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #020a12;
} */

.border-dark {
  border-color: #23344678 !important;
}

/* Select2 */
/* .select2-container--bootstrap .select2-selection--single {
  height: 58px;
  padding: 26px 47px 6px 12px;
}
.select2-container .select2-selection--multiple {
  min-height: 55px;
} */

.details-slide {
  display: none;
}


/* 📐 5. องค์ประกอบ Layout */
.summary_search.card {
  border: 2px solid #00744B;
  background-color: #f6f6f6;
}

hr {
  margin: 1rem 0 !important;
}


/* 📱 6. การตอบสนองหน้าจอ (Responsive) */
@media (max-width: 900px) {
  .logo-new {
    width: 200px !important;
  }

  .fs-17 {
    font-size: 12px !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 576px) {
  .lp-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .dataTables_length,
  .dataTables_paginate {
    text-align: center;
  }
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1400px;
  }
}

/* ดูในโทรศัพท์ */
.only-mobile {
  display: none;
}

@media (max-width: 768px) {
  .only-mobile {
    display: table-row;
  }
}

.only-mobile-break {
  display: none;
}

@media (max-width: 768px) {
  .only-mobile-break {
    display: block;
  }
}


/* 🧩 7. Custom & Component-specific */
.nav-pills {
  --bs-nav-pills-link-active-color: #ffffff !important;
  --bs-nav-pills-link-active-bg: #254691d6 !important;
}

.nav-tabs .nav-link {
  background: #c0d4f3;
}

.swal2-container {
  z-index: 9999 !important;
}