/* ปรับหน้าจอให้ใช้งานบนมือถือ/แท็บเล็ตได้จริง
   โหลดท้ายสุดต่อจาก components.css เพื่อทับค่าเดิม (index.html / login.html)
   layout.css มี breakpoint 900px คุมแถบข้าง+เมนูแฮมเบอร์เกอร์อยู่แล้ว ไฟล์นี้ทำส่วนที่เหลือ

   สองระดับ:
     <= 900px  แท็บเล็ต/มือถือ — ขนาดนิ้วสัมผัส กันซูมของ iOS
     <= 600px  มือถือโดยเฉพาะ — ยุบทุกอย่างเป็นคอลัมน์เดียว modal เต็มจอ */

@media (max-width: 900px) {
  /* *** ช่องกรอกต้อง >= 16px ***
     Safari บน iPhone จะซูมทั้งหน้าจอเองทุกครั้งที่โฟกัสช่องที่ตัวอักษรเล็กกว่า 16px
     แล้วไม่ซูมกลับ ผู้ใช้ต้องถ่างนิ้วย่อเองทุกครั้ง — เป็นสาเหตุอันดับหนึ่งที่ฟอร์มบนมือถือใช้ยาก */
  input,
  select,
  textarea {
    padding: 10px 12px;
    font-size: 16px;
  }

  /* เป้าสัมผัสขั้นต่ำ 44px ตามแนวทางของ iOS/Android — ปุ่มเดิมสูง ~34px กดพลาดบ่อย */
  .btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .btn-sm {
    min-height: 38px;
    padding: 8px 12px;
  }

  .nav a {
    min-height: 44px;
    padding: 11px 18px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  /* แถบบน: หัวข้อกับปุ่มคนละบรรทัด ไม่งั้นปุ่มเบียดจนอ่านหัวข้อไม่ออก
     เว้นซ้าย 56px ให้ปุ่มแฮมเบอร์เกอร์ที่ลอยทับอยู่ */
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .topbar h1 {
    padding-left: 46px;
    font-size: 20px;
    line-height: 44px;
  }

  .page-actions .btn {
    flex: 1 1 auto;
  }

  /* ตารางยังเลื่อนแนวนอน แต่ต้องไม่ให้ปุ่มในแถวถูกบีบจนตกบรรทัด */
  table.data td.actions {
    white-space: nowrap;
  }

  /* หน้าพิมพ์ (ใบเสร็จ/ใบปะหน้า) เปิดดูบนมือถือ — .page กว้างเป็นมิลลิเมตรจึงล้นจอ
     ย่อให้พอดีความกว้างจอเฉพาะตอนดูบนจอ ไม่กระทบตอนสั่งพิมพ์จริง */
  .toolbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  /* ตัวกรองเรียงเป็นคอลัมน์เดียว — 2 ช่องต่อแถวบนจอ 375px แคบจนอ่านป้ายไม่ออก */
  .filters {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }

  .filters .field,
  .filters .btn {
    width: 100%;
  }

  .field-row {
    flex-direction: column;
    gap: 0;
  }

  .field-row > .field {
    min-width: 0;
  }

  /* modal เต็มจอ — กล่องลอยกลางจอบนมือถือเหลือพื้นที่ใช้งานน้อยและเลื่อนยาก */
  .modal-backdrop {
    padding: 0;
    place-items: stretch;
  }

  .modal,
  .modal.modal-lg {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .modal-body {
    padding: 14px;
  }

  /* ปุ่มท้าย modal เต็มความกว้างและเรียงจากล่างขึ้น — ปุ่มยืนยันอยู่ล่างสุดใกล้นิ้วโป้ง */
  .modal-foot {
    flex-direction: column-reverse;
    padding: 12px 14px;
  }

  .modal-foot .btn {
    width: 100%;
  }

  /* แถบล่างตาราง: สรุปจำนวนกับปุ่มเปลี่ยนหน้าคนละบรรทัด */
  .table-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .table-foot .row-flex {
    justify-content: space-between;
  }

  .view {
    padding: 12px 10px 72px;
  }

  /* ปุ่มบนแถบเครื่องมือแถวเดียวกันหมด ไม่ต้องยืดเต็มความกว้าง */
  .page-actions {
    gap: 6px;
  }
}