/* ══════════════════════════════════════════════════════════════════════
   responsive.css · MOBILEUI-20260812 · ให้ใช้งานบนมือถือ/แท็บเล็ตได้สบายมือ

   เฮีย 12 ส.ค.: "ไล่ปรับ WebHub ให้ทุกหน้า 100% รองรับ UI บนมือถือและแท็บเล็ต"
                 "อย่าให้มี regression นะครับ"

   ═══ วัดของจริงมาก่อนเขียนไฟล์นี้ ═══
   เปิดเบราว์เซอร์จริง 390px (iPhone) และ 820px (iPad) ไล่ครบ 34 หน้าบน UAT
     ✅ ไม่มีหน้าไหนล้นจอเลยสักหน้า (0/34 ทั้งสองขนาด) — โครงหลักรองรับอยู่แล้ว
        มีแถบเมนูล่าง · ปุ่มแฮมเบอร์เกอร์ · การ์ดเรียงซ้อนเอง · media query เดิม 59 จุด
     🛑 ที่ยังไม่ผ่าน: ปุ่ม/ไอคอนเล็กกว่านิ้ว — มือถือ 143 จุด · แท็บเล็ต 545 จุด
   ไฟล์นี้จึงแก้ "ขนาดที่นิ้วกดโดน" เป็นหลัก ไม่ใช่รื้อโครง

   ═══ กันไม่ให้กระทบของเดิม ═══
   🔑 ทุกกฎในไฟล์นี้อยู่ใต้ @media (pointer: coarse) หรือ (max-width: …)
      → เครื่องที่ใช้เมาส์ (เดสก์ท็อป/โน้ตบุ๊ก) **ไม่โดนสักบรรทัดเดียว**
   🔑 โหลดเป็นไฟล์สุดท้าย · เพิ่มอย่างเดียว ไม่แก้ไฟล์เดิมสักตัวอักษร
      ถอนออกได้ด้วยการลบ <link> บรรทัดเดียว
   🔑 ใช้ min-height/min-width ไม่ใช่ height/width → ของที่ใหญ่พออยู่แล้วไม่ถูกบีบ
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · ขนาดที่นิ้วกดโดน (เฉพาะจอสัมผัส) ─────────────────────────────
   มาตรฐานสากลคือ 44px · เราตั้ง 40px เพื่อไม่ให้แถวในตารางสูงจนผิดรูป
   ใช้ inline-flex + center เพื่อให้ไอคอนอยู่กลางปุ่มที่ขยายแล้ว           */
@media (pointer: coarse) {
  /* 🛑 ปุ่มข้อความ ให้ "สูง" อย่างเดียว ห้ามบังคับ "กว้าง"
     รอบแรกผมใส่ min-width: 40px ให้ปุ่มทุกชนิด → แถบแท็บในหน้า Backoffice พัง
     ตัวอักษรซ้อนทับกันจนอ่านไม่ออก (เห็นตอนเทียบภาพก่อน/หลัง ทั้งที่ตัวเลขบอกว่าผ่านหมด)
     เพราะปุ่มในแถบแท็บอยู่ใน flex ที่บีบได้ · พอบังคับความกว้างขั้นต่ำ ป้ายเลยดันกัน
     ความกว้างของปุ่มข้อความมาจากตัวอักษรอยู่แล้ว ไม่ต้องบังคับ */
  button,
  [role="button"],
  .btn {
    min-height: 40px;
  }

  /* ปุ่มที่มีแต่ไอคอน ไม่มีตัวอักษรดันความกว้าง จึงต้องบังคับทั้งสองด้าน */
  .icon-btn,
  .btn-icon {
    min-height: 40px;
    min-width: 40px;
  }

  /* รายการในเมนูข้าง · ของเดิมสูง 38px ขาดอีก 2px ถึงเกณฑ์
     ตัวนี้โผล่ทุกหน้า เลยเป็นยอดค้างก้อนใหญ่ที่สุดตอนวัด (352 จุด) */
  .nav-item,
  .sidebar-nav a {
    min-height: 40px;
  }

  /* ปุ่มที่มีแต่ไอคอน — จัดให้อยู่กลางหลังขยาย ไม่งั้นไอคอนจะเบี้ยวไปมุม */
  .icon-btn,
  .btn-icon,
  button.icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ช่องติ๊ก/ช่องเลือก — ของเดิมเล็กมาก กดพลาดบ่อยที่สุด (เจอ 142 จุด)
     ตั้ง 24px ตามที่ระบบออกแบบส่วนใหญ่ใช้กัน · ไม่ดันไป 40px เพราะจะทำให้
     แถวในตารางสูงผิดรูป · เพิ่มพื้นที่กดรอบนอกด้วย outline-offset แทน */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
  }

  /* ป้ายกำกับที่ครอบช่องติ๊กอยู่ = พื้นที่กดจริงของผู้ใช้ ขยายให้เต็มนิ้ว */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* ช่องกรอกและ dropdown · iOS จะซูมหน้าเองถ้าตัวอักษรเล็กกว่า 16px */
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: max(16px, 1em);
    min-height: 40px;
  }
}

/* ── 2 · ตารางต้องเลื่อนในกรอบตัวเอง ห้ามดันทั้งหน้า ─────────────────
   ตอนวัดบน UAT ยังไม่มีตารางไหนกว้างเกินกรอบ (0 จาก 39 ตัวบนมือถือ)
   เพราะ UAT แทบไม่มีข้อมูล — พอเจอข้อมูลจริงหลายคอลัมน์จะดันจอทันที
   จึงกันไว้ก่อนแบบไม่เปลี่ยนรูปตาราง: จำกัดความกว้าง + ให้กรอบที่มีอยู่เลื่อนได้ */
@media (max-width: 900px) {
  table {
    max-width: 100%;
  }

  .table-wrap,
  .table-responsive,
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ข้อความยาวไม่มีเว้นวรรค (ลิงก์ · โทเคน · path ไฟล์) เป็นตัวดันจอที่พบบ่อย */
  .output-text,
  .cell-truncate,
  code,
  pre {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  pre {
    overflow-x: auto;
  }
}

/* ── 3 · รูปและสื่อ ห้ามล้นกรอบ ─────────────────────────────────────── */
@media (max-width: 900px) {
  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
    height: auto;
  }
}

/* ── 4 · เผื่อที่ให้แถบเมนูล่างของมือถือ ─────────────────────────────
   แถบเมนูล่างเป็น position:fixed → เนื้อหาบรรทัดสุดท้ายถูกบังอยู่
   เผื่อระยะให้เลื่อนอ่านได้จนจบจริง ๆ (รวมพื้นที่ปลอดภัยของ iPhone) */
@media (max-width: 768px) {
  .content-area,
  #mainContent {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}