body,
/* html {
  height: 100%;
  font-family: "Kanit", cursive !important;
  font-size: 0.95rem !important;
} */

html {
  height: 100%;
  font-family: "Sarabun", sans-serif !important;
  font-size: 0.95rem !important;
}
.bg {
  background: #063970;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  /* clip-path: polygon(0 0, 55% 0, 45% 100%, 0% 100%); */
}

.w-60p {
  width: 60px !important;
}
.w-90p {
  width: 90px !important;
}
.w-150p {
  width: 150px !important;
}

.canvas {
  height: 300px !important;
}
.toggle.ios,
.toggle-on.ios,
.toggle-off.ios {
  border-radius: 20px;
  font-weight: 100px;
}
.toggle.ios .toggle-handle {
  border-radius: 20px;
}
.toggle-on.btn {
  padding-right: 19px;
  font-weight: 100 !important;
}
.btn {
  font-size: inherit !important;
}

.card,
.small-box,
.small-box-footer {
  border-radius: 15px !important;
}
.small-box h1 {
  font-size: 2rem !important;
}

.rtl {
  direction: rtl !important;
}

@media (max-width: 1400px) {
  .table-responsive-xxl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-xxl > .table-bordered {
    border: 0;
  }
  #orders .detail {
    width: 300px !important;
  }
}

@media (max-width: 1200px) {
  .small-box h1 {
    font-size: 1.7rem !important;
  }
}

@media (max-width: 767px) {
  .small-box h1 {
    font-size: 1.4rem !important;
  }
}

/* ส่วนที่ต้องเพิ่มเข้าไปในแต่ละ media query */
@media screen and (max-width: 320px),
  (min-width: 321px) and (max-width: 375px),
  (min-width: 376px) and (max-width: 430px) {
  /* จัดการ container หลัก โดยยกเว้น DataTable */
  .container-fluid:not(.dataTables_wrapper) {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* จัดการตารางที่ไม่ใช่ DataTable */
  .table-responsive:not(.dataTables_wrapper) {
    display: block;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0;
  }

  /* จัดการ content wrapper */
  .content-wrapper {
    max-width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  /* ปรับการแสดงผลของตารางที่ไม่ใช่ DataTable */
  table:not(.dataTable) {
    display: block;
    width: max-content;
    max-width: none;
  }

  /* ปรับ card container ที่ไม่มี DataTable */
  .card:not(:has(.dataTable)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* เพิ่ม CSS สำหรับ parent containers ที่ไม่เกี่ยวกับ DataTable */
.main-content:not(:has(.dataTable)) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ปรับ row ที่ไม่มี DataTable อยู่ภายใน */
.row:not(:has(.dataTable)) {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}
/* ปรับ CSS สำหรับหน้าจอขนาดเล็ก */
@media screen and (max-width: 768px) {
  /* ตารางเลื่อนในแนวนอน */
  .table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* กำหนดการแสดงผลของ .card-body */
  .card-body {
    padding: 0.5rem;
    overflow: auto;
    max-height: 80vh; /* จำกัดความสูงไม่ให้ยืดเกินไป */
  }

  /* ลดขนาด font และ padding */
  td,
  th {
    white-space: nowrap;
    font-size: 0.8rem; /* ลดขนาดฟอนต์ให้เหมาะสม */
  }

  /* ซ่อน Sidebar หากหน้าจอเล็กมาก */
  /* .main-sidebar {
    display: none;
  } */

  /* จัด card ให้เต็มความกว้าง */
  .card {
    margin: 0.5rem;
    width: 100%;
  }

  /* จัดการ row ให้ยืดหยุ่น */
  .row {
    flex-wrap: wrap;
    margin: 0;
  }

  /* ลดระยะห่างภายใน */
  .container-fluid {
    padding: 0.5rem;
  }
}

@media (max-width: 768px) {
  .login-card {
    padding: 2rem;
    width: 90%;
  }

  .system-icon {
    width: 100px;
    height: 100px;
  }

  .system-icon i {
    font-size: 2.8rem;
  }

  .title-section h4 {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 768px) {
  .border-0.card-header.d-flex.flex-column.justify-content-between.elevation-2 {
    display: none !important; /* บังคับให้ซ่อน */
  }
}

/* === iOS Touch Support Fixes === */

/* รองรับ iOS Safari */
* {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* เพิ่มขนาด touch area สำหรับ iOS */
.btn, .star-icon, .status-admit-toggle, .attached-file-link, .attached-image-tag, .preview-image,
#management_modal, #suggestions_modal, #edit_modal, #delete_case, .attach-file-button, 
.attach-image-button, .print-button, #view_problems, .todolist-modal, #add_problems, 
#saveProblem, .fas.fa-edit, .tools .fas.fa-trash-alt {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
}

/* เพิ่ม minimum touch target size ตาม Apple HIG (44x44px) */
@media (max-width: 768px) {
    .btn, .star-icon, .status-admit-toggle, 
    #management_modal, #suggestions_modal, #edit_modal, #delete_case,
    .attach-file-button, .attach-image-button, .print-button, 
    #view_problems, .todolist-modal, #add_problems, #saveProblem {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .star-icon {
        padding: 12px !important;
        margin: 4px !important;
        font-size: 1.2rem !important;
    }
    
    .status-admit-toggle {
        margin: 8px !important;
        transform: scale(1.1);
    }
    
    /* เพิ่ม spacing สำหรับการป้องกันการกดผิด */
    .action-buttons .btn {
        margin: 4px !important;
    }
}

/* เพิ่ม active state สำหรับ touch feedback */
.btn:active, .star-icon:active, .status-admit-toggle:active,
#management_modal:active, #suggestions_modal:active, #edit_modal:active,
.attach-file-button:active, .attach-image-button:active, .print-button:active,
#view_problems:active, .todolist-modal:active, #add_problems:active {
    transform: scale(0.95) !important;
    opacity: 0.8 !important;
    transition: all 0.1s ease !important;
}

/* แก้ไข Bootstrap Toggle สำหรับ iOS */
.toggle.ios, .toggle-on.ios, .toggle-off.ios {
    border-radius: 20px;
    font-weight: 100px;
    min-height: 44px !important;
    touch-action: manipulation;
}

.toggle.ios .toggle-handle {
    border-radius: 20px;
    touch-action: manipulation;
}

/* เพิ่ม touch support สำหรับ DataTable controls */
.dataTables_wrapper .btn,
.dataTables_wrapper select,
.dataTables_wrapper input {
    touch-action: manipulation;
    -webkit-appearance: none;
    min-height: 44px;
}

/* แก้ไข child row controls สำห