/* MGC-ASIA ATS · การแสดงผลบนมือถือ · 1.14.0 */
/* ---------- ตารางเลื่อนแนวนอนได้ ไม่ดันทั้งหน้า ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px}
.tw table{min-width:100%}

/* ---------- จอแท็บเล็ตลงมา ---------- */
@media(max-width:820px){
  .kv{grid-template-columns:1fr}
  table{font-size:13px}
  .hide-sm{display:none}
  .wrap{padding:14px 12px 40px}
  .panel{padding:15px 14px;border-radius:12px}
}

/* ---------- มือถือ ---------- */
@media(max-width:560px){
  /* ปุ่มต้องกดง่ายด้วยนิ้ว */
  .btn{min-height:44px;padding:11px 16px;font-size:14.5px}
  .btn-s{min-height:38px;padding:8px 13px;font-size:13.5px}

  /* ฟอนต์ 16px กัน iOS ซูมหน้าจอเองตอนแตะช่องกรอก */
  input,select,textarea{font-size:16px;padding:11px 12px;min-height:44px}
  textarea{min-height:80px}

  /* กล่องโต้ตอบเต็มจอ ปุ่มติดล่างเสมอ */
  .modal-bg{padding:0;align-items:flex-end}
  .modal{max-width:100%;width:100%;border-radius:16px 16px 0 0;
    max-height:92vh;padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
  .modal h3{font-size:16.5px;position:sticky;top:-20px;background:#fff;
    padding:4px 0 10px;margin:-4px 0 12px;z-index:2}
  .modal-acts{position:sticky;bottom:0;background:#fff;padding:12px 0 0;
    margin-top:16px;border-top:1px solid var(--line);display:flex;gap:9px}
  .modal-acts .btn{flex:1}

  /* หัวข้อและระยะห่างกระชับขึ้น */
  h2{font-size:17px}
  .sec{padding:13px 0}
  .dtab{padding:11px 13px;font-size:13px}

  /* แถบบนสุด */
  .top-in{padding:10px 12px}
  .stats{grid-template-columns:repeat(2,1fr)}

  /* สลับรายการเป็นการ์ด */
  .list-cards{display:block}
  .list-table{display:none}
}

/* ---------- จอแคบมาก ---------- */
@media(max-width:380px){
  .stats{grid-template-columns:1fr}
  .btn-s{padding:8px 10px;font-size:13px}
}

/* ---------- ค้นหากลางและแถบยกเลิก บนจอแคบ — v1.14 ---------- */
@media(max-width:820px){
  /* ให้หัวจอขึ้นบรรทัดใหม่ได้ ช่องค้นหาจึงได้ความกว้างเต็มแถวของตัวเอง */
  .hw{flex-wrap:wrap}
  #gsWrap{order:9;flex:1 1 100%;min-width:0}
  #gsResults{width:100%;max-width:100%;left:0;right:auto}

  /* v1.33.1 — เมนูได้แถวของตัวเองและ "ขึ้นบรรทัดใหม่" แทนการเลื่อนแนวนอน
   *
   * v1.32.0 ใช้ overflow-x:auto ที่นี่ ซึ่งพังเมนูย่อยทั้งสองกลุ่มบนมือถือ
   * ตามสเปก CSS ถ้าแกนใดไม่ใช่ visible อีกแกนที่เป็น visible จะถูกคำนวณ
   * เป็น auto ตามไปด้วย → overflow-y ของ #tabs กลายเป็น auto
   * .navmenu เป็น position:absolute top:100% อยู่ข้างใน #tabs ซึ่งสูงแค่
   * ปุ่มเดียว เมนูจึงตกนอกกรอบและถูกตัดทิ้ง JS ทำงานถูกทุกบรรทัด
   * (hide ถูกถอดจริง aria-expanded เปลี่ยนจริง) แต่ผู้ใช้ไม่เห็นอะไรเลย
   * เดสก์ท็อปไม่เจอเพราะไม่มี overflow มาตัด
   *
   * เลือก wrap แทนการเก็บ scroll แล้วเปลี่ยน .navmenu เป็น position:fixed
   * เพราะทาง fixed ต้องคำนวณพิกัดด้วย JS ทุกครั้งที่เปิด และคำนวณใหม่
   * เมื่อ scroll/resize — เพิ่มโค้ดที่พังได้อีกชุดเพื่อแก้ปัญหาที่
   * ADMIN มีแค่ 6 ปุ่ม + เฟือง ซึ่งขึ้นสองบรรทัดแล้วจบ
   * และ wrap ดีกว่าตรงที่ปุ่มไม่หลุดพ้นขอบขวาไปโดยผู้ใช้ไม่รู้ว่ามีอยู่
   *
   * min-height ให้ปุ่มถึงเกณฑ์พื้นที่แตะ (padding 7px + font 13.5px ได้ ~31px) */
  #tabs{order:10;flex:1 1 100%;margin-right:0 !important;
    flex-wrap:wrap;row-gap:6px}
  #tabs .tab{flex:0 0 auto;white-space:nowrap;min-height:40px}
  /* เมนูย่อยชิดซ้ายบนจอแคบ ไม่งั้นล้นขอบขวาเมื่อหัวกลุ่มอยู่ท้ายแถว */
  .navmenu{right:auto;left:0;max-width:calc(100vw - 24px)}
}
@media(max-width:560px){
  #gsQ{height:44px;min-height:44px;font-size:16px}
  .gs-key{display:none}
  #gsResults{max-height:60vh}

  /* แถบยกเลิกต้องอยู่เหนือขอบล่างของเครื่อง และกดง่ายด้วยนิ้ว */
  .toast{left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));
    transform:none;max-width:none;animation:none}
  .toast-undo{min-height:40px;padding:8px 14px}
}