/* ===========================
   responsive.css
   ช่วยให้หน้าใช้งานได้ดีบนมือถือ
   =========================== */

/* 1) ภาพและคอนเทนต์ทั่วไป */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* 2) ตารางแบบ “stacked” บนจอเล็ก
   ใช้ร่วมกับ class="table table-hover table-stacked"
   และใส่ data-label ให้ทุก <td> เช่น <td data-label="สถานะ">busy</td>
*/
@media (max-width: 768px) {
  .table-stacked thead {
    display: none;
  }
  .table-stacked tbody tr {
    display: block;
    margin-bottom: .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
  }
  .table-stacked tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  }
  .table-stacked tbody td:last-child {
    border-bottom: 0;
  }
  .table-stacked tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    margin-right: 1rem;
    flex: 0 0 auto;
  }
  /* ให้ค่าด้านขวาตัดบรรทัดได้สวย */
  .table-stacked tbody td > *:not(.form-control):not(.form-select):not(.btn) {
    max-width: 60%;
    text-align: right;
    word-break: break-word;
  }
  /* ตัวเลขชิดขวาอยู่ แต่ไม่ชนขอบ */
  .table-stacked tbody td.text-end {
    padding-right: 1rem;
  }
  /* badge ไม่ล้น */
  .table-stacked .badge {
    white-space: nowrap;
  }
}

/* 3) แถบเครื่องมือ/ฟอร์มค้นหา ให้พับเป็นคอลัมน์บนมือถือ
   ใช้กับ wrapper class="toolbar d-flex flex-wrap gap-2 ..."
*/
@media (max-width: 576px) {
  .toolbar .form-control,
  .toolbar .form-select,
  .toolbar .btn,
  .toolbar .input-group,
  .toolbar .btn-group {
    flex: 1 1 100%;
  }
}

/* 4) กลุ่มปุ่มในตารางให้พับและเว้นระยะหายใจ
   ใช้ร่วมกับ <div class="d-flex flex-wrap gap-2"> ... </div>
*/
@media (max-width: 768px) {
  .table-stacked .d-flex.flex-wrap.gap-2 > * {
    flex: 1 1 auto;
  }
}

/* 5) ขยาย touch target ให้กดง่ายขึ้นบนจอเล็ก */
@media (max-width: 576px) {
  .btn {
    min-height: 44px;
  }
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 1rem;
  }
}

/* 6) การ์ด/กริดที่มีหลายคอลัมน์ให้มีช่องว่างพอดี */
@media (max-width: 576px) {
  .card {
    border-radius: .75rem;
  }
  .row.g-3, .row.g-4 {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
  }
}

/* 7) ป้องกัน navbar/ปุ่มล้นแนวนอน */
body {
  overflow-x: hidden;
}

/* 8) Helper: ถ้าอยากบังคับซ่อน/โชว์บางส่วนเฉพาะจอเล็ก */
.only-mobile { display: none; }
@media (max-width: 576px) {
  .only-mobile { display: block; }
  .only-desktop { display: none !important; }
}


/* STEP 3 — Touch targets & controls */
@media (max-width: 576px) {
  /* แตะง่ายขึ้น */
  .btn,
  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* แถบปุ่มที่เคยเรียงยาวๆ ให้พับขึ้นบรรทัดถัดไปได้ */
  .btn-group,
  .d-flex.gap-2,
  .d-flex.gap-1,
  .d-inline-flex.gap-2 {
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  /* ยูทิลิตี้: เปลี่ยน action bar เป็นตารางแนวตั้งบนจอเล็ก */
  .d-grid-sm {
    display: grid !important;
    gap: .5rem;
  }
}

/* ยูทิลิตี้ทั่วไป */
.btn-wide { min-width: 140px; }          /* ปุ่มหลักให้กว้างอ่านง่าย */
.input-grow { flex: 1 1 auto; min-width: 0; }
.text-break { word-break: break-word; overflow-wrap: anywhere; } /* กันข้อความยาวล้น */
img { max-width: 100%; height: auto; }   /* รูปไม่ล้นจอ */


/* =========================
   Step 3: Mobile action bars
   ทำให้กลุ่มปุ่มที่เรียงแนวนอน เปลี่ยนเป็นแนวตั้ง + ปุ่มกว้างเต็มจอ บนจอเล็ก
   ส่งผลกับ: ปุ่มบนหัวหน้าเพจ, ปุ่มยืนยัน/ยกเลิก, ปุ่มจัดการในตาราง ฯลฯ
   ========================= */
@media (max-width: 575.98px) {
  /* กล่องที่มีปุ่มหลายปุ่มเรียงกัน (พบได้บ่อยในโปรเจกต์นี้) */
  .d-flex.gap-2:not(.no-stack),
  .d-flex.flex-wrap.gap-2:not(.no-stack),
  .text-end .d-inline:not(.no-stack),
  .text-end .d-inline-flex:not(.no-stack) {
    display: grid !important;
    gap: .5rem !important;
    justify-content: stretch !important;
  }

  /* ทำให้ปุ่มด้านในกว้าง 100% */
  .d-flex.gap-2:not(.no-stack) > .btn,
  .d-flex.gap-2:not(.no-stack) > a.btn,
  .d-flex.gap-2:not(.no-stack) > form > .btn,
  .d-flex.flex-wrap.gap-2:not(.no-stack) > .btn,
  .d-flex.flex-wrap.gap-2:not(.no-stack) > a.btn,
  .d-flex.flex-wrap.gap-2:not(.no-stack) > form > .btn,
  .text-end .d-inline:not(.no-stack) .btn,
  .text-end .d-inline-flex:not(.no-stack) .btn {
    width: 100%;
  }

  /* ปุ่มเล็ก ๆ ในคอลัมน์ตารางฝั่งขวา ให้ยืดเต็มกว้างเช่นกัน */
  td.text-end .btn,
  td .btn-group .btn {
    width: 100%;
  }

  /* ระยะห่างตาราง/การ์ดบนมือถือให้หายใจสะดวก */
  .card .card-body {
    padding: 1rem;
  }
}

/* ตัวเลือก opt-out: ถ้าไม่อยากให้บางจุด stack ให้เติม .no-stack ที่คอนเทนเนอร์นั้น */


/* =========================
   Mobile UX polish (CSS-only)
   ========================= */
@media (max-width: 575.98px) {
  /* 1) ตาราง: เลื่อนลื่น + ตัดคำยาวๆ (เช่น order code, ชื่อไกด์ยาว) */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table td, .table th { word-break: break-word; }

  /* 2) ปุ่มเล็กให้แตะง่ายขึ้น (WCAG ~44px) */
  .btn-sm { min-height: 44px; }

  /* 3) ช่องกรอกให้สูงอ่านง่าย + กัน iOS ซูมอัตโนมัติ */
  .form-control, .form-select { min-height: 44px; }
  input[type="date"],
  input[type="time"],
  input[type="number"],
  input[type="tel"] { font-size: 16px; }

  /* 4) เช็กบ็อกซ์ในตาราง (คืนสถานะไกด์) ให้กดง่ายขึ้น */
  .ck-guide { width: 1.25rem; height: 1.25rem; }

  /* 5) badge/ป้ายสถานะ ไม่ให้เบียดแตกบรรทัดแปลกๆ */
  .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 6) ระยะห่างการ์ดบนจอเล็ก */
  .card .card-body { padding: 1rem; }

  /* 7) เมนูบนสุด: ช่องหายใจ + แตะถนัด */
  .navbar .nav-link { padding: .5rem .75rem; }
  .navbar .navbar-nav { gap: .25rem; }
}

/* (ตัวเลือก) เฮดตาราง sticky เมื่อมีการตั้งคลาส .table-sticky-head ในเทมเพลต */
.table-sticky-head thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bs-body-bg, #fff);
}