/* ปุ่มปิดเมนูมีไว้ใช้บนมือถือเท่านั้น
   บนจอคอมพิวเตอร์เมนูด้านข้างเปิดค้างอยู่แล้ว จึงไม่ต้องมีปุ่มปิด
   ถ้าไม่ซ่อนไว้ ปุ่มจะกลายเป็นแถบสีเทาพาดอยู่เหนือโลโก้ */
.sb-close{ display:none; }

/* พื้นหลังสีเทาสำหรับปิดเมนูก็ใช้เฉพาะมือถือเช่นกัน
   บนจอคอมพิวเตอร์ถ้าไม่ซ่อน มันจะกลายเป็นช่องว่างในแถวของเนื้อหา */
.sb-backdrop{ display:none; }

/* กล่องที่สคริปต์สร้างขึ้นเพื่อรวมค่าในช่องตาราง
   บนจอคอมพิวเตอร์ต้องไม่มีผลต่อการจัดวาง ตารางจึงหน้าตาเหมือนเดิมทุกประการ */
.tv{ display:contents; }

/* ── กฎที่ใช้ทุกขนาดหน้าจอ ───────────────────────────────
   พบจากการวัดจริงที่ความกว้าง 1024px (แท็บเล็ตแนวนอน/โน้ตบุ๊กเล็ก)
   ว่าทั้งหน้าเลื่อนซ้ายขวาได้ 1292px เพราะพื้นที่เนื้อหา .main
   เป็นลูกของ flex ที่ค่าเริ่มต้น min-width เท่ากับ auto
   จึงกว้างตามตารางข้างในแทนที่จะย่อลงเท่าพื้นที่ที่เหลือ */
.main{ min-width:0; }
.page{ min-width:0; }
.card{ min-width:0; }
.tbl-wrap{ overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }

/* ผังสองคอลัมน์ที่กำหนดคอลัมน์ข้างเป็นความกว้างตายตัว
   คอลัมน์ที่เขียนว่า 1fr เบราว์เซอร์ให้ความกว้างขั้นต่ำเท่ากับเนื้อหา
   บนจอกว้าง 880–1000px จึงดันจนทั้งหน้าเลื่อนซ้ายขวาได้
   เปลี่ยนเป็น minmax(0,1fr) เพื่อให้ย่อลงได้เท่าพื้นที่ที่เหลือจริง */
.view-grid{ grid-template-columns:minmax(0,1fr) 290px; }

/* ── ภาพจากกล้องในหน้าสแกน QR ────────────────────────────
   กรอบสแกนใช้ text-align:center ซึ่งจัดกึ่งกลางได้เฉพาะข้อความ
   ตัวเล่นวิดีโอถูกสั่งให้เป็นบล็อกตอนเปิดกล้อง จึงไปชิดซ้ายของกรอบ
   วัดที่จอ 1440px ได้ช่องว่างซ้าย 26px แต่ขวา 191px จึงดูเบี้ยว
   การจัดกึ่งกลางบล็อกต้องใช้ระยะขอบอัตโนมัติ ไม่ใช่ text-align
   และขยายภาพให้ใหญ่ขึ้นด้วย จะได้เล็ง QR ง่ายกว่าเดิม */
#video{
  margin-left:auto !important; margin-right:auto !important;
  max-width:min(460px, 100%) !important;
}
.ind-grid{ grid-template-columns:260px minmax(0,1fr); }

/* ==========================================================
   Nexza WorkPermit — ปรับหน้าจอสำหรับมือถือ (iOS / Android)
   ไฟล์นี้โหลดต่อจาก app.css จึงเขียนทับค่าเดิมได้
   แก้เฉพาะจอแคบ จอคอมพิวเตอร์ยังเหมือนเดิมทุกอย่าง
   ========================================================== */

/* ── กันข้อความโตเองตอนหมุนจอ (Safari) ─────────────────── */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ── ปัญหาที่ 1 ที่ต้องแก้ทุกขนาดจอ ───────────────────────
   ช่องกรอกที่ตัวอักษรเล็กกว่า 16px ทำให้ iPhone ซูมเข้าเอง
   ทุกครั้งที่แตะ แล้วผู้ใช้ต้องถ่างนิ้วซูมออกเองทุกครั้ง
   ต้องบังคับ 16px เท่านั้น ห้ามน้อยกว่านี้ */
@media (max-width:860px){
  .fc, .form-control,
  input[type=text], input[type=search], input[type=number], input[type=tel],
  input[type=email], input[type=password], input[type=date], input[type=time],
  input[type=datetime-local], select, textarea{
    font-size:16px !important;
    padding:11px 13px;
    border-radius:10px;
  }
  textarea.fc, textarea.form-control{ line-height:1.65; }
  .fg label, .form-label{ font-size:.95rem; margin-bottom:6px; }

  /* ช่องติ๊กและปุ่มตัวเลือก เดิมเล็กมากจนกดพลาดบ่อยบนมือถือ
     ขยายให้กดด้วยนิ้วได้ และเว้นระยะจากข้อความ */
  input[type=checkbox], input[type=radio]{
    width:22px; height:22px; min-width:22px;
    accent-color:var(--blue); cursor:pointer;
  }
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]){
    display:flex; align-items:center; gap:10px;
    min-height:44px; font-size:.95rem;
  }
}

/* ==========================================================
   จอมือถือและแท็บเล็ตแนวตั้ง
   ========================================================== */
@media (max-width:860px){

  /* ── ขยายตัวอักษรทั้งระบบ ───────────────────────────────
     เดิมตั้งไว้ 14.5px ซึ่งเล็กเกินไปสำหรับอ่านบนมือถือ
     ทุกอย่างในระบบใช้หน่วย rem จึงขยายตามกันทั้งหมด */
  html{ font-size:16px; }

  /* ── ความสูงจอบนมือถือ ────────────────────────────────
     100vh บนมือถือรวมแถบที่อยู่เว็บด้วย ทำให้เนื้อหาโดนตัด
     100dvh คือความสูงที่มองเห็นจริง */
  body{ min-height:100dvh; }

  /* ── ต้นเหตุที่ทำให้ทั้งหน้าเลื่อนซ้ายขวาได้ ────────────
     body ใช้ flex และ .main เป็นลูกของ flex
     ค่าเริ่มต้นของ flex คือห้ามย่อเล็กกว่าเนื้อหาข้างใน
     พอมีตารางกว้าง ๆ อยู่ข้างใน .main จึงกว้างตามตาราง
     ดันจนทั้งหน้าเลื่อนไปทางขวาได้เกือบ 900px
     ต้องสั่ง min-width:0 เพื่ออนุญาตให้ย่อลงมาเท่าจอได้ */
  .main{ min-width:0; max-width:100%; }
  .page{ padding:14px 12px 84px; min-width:0; }
  .card, .card-body, .tbl-wrap{ min-width:0; }

  /* แถบบนก็เป็น flex เหมือนกัน ลูกของมันต้องย่อได้ด้วย
     ไม่งั้นชื่อหน้ายาว ๆ จะดันแถบจนล้นจอ */
  .topbar > *{ min-width:0; }
  .tb-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ── เมนูด้านข้าง ─────────────────────────────────────
     ปัญหาเดิม เมนูเปิดมาแล้วทับปุ่มขีดสามขีด จึงปิดไม่ได้
     ต้องกดปุ่มเดิมที่มองไม่เห็น ผู้ใช้ติดอยู่ในเมนู
     แก้โดยเพิ่มพื้นหลังสีเทาให้แตะที่ไหนก็ปิดได้ */
  .sidebar{
    width:min(84vw, 300px);
    height:100dvh;
    box-shadow:none;
  }
  .sidebar.open{ box-shadow:0 0 60px rgba(0,0,0,.45); }

  .sb-backdrop{
    display:block;
    position:fixed; inset:0; z-index:290;
    background:rgba(10,20,50,.5);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .sb-backdrop.show{ opacity:1; pointer-events:auto; }

  /* ปุ่มปิดเมนูในตัวเมนูเอง เผื่อกรณีแตะพื้นหลังไม่ได้ */
  .sb-close{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:10px; right:10px;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.12); color:#fff;
    border:none; font-size:1.05rem; cursor:pointer; z-index:5;
  }

  /* เมนูแต่ละอันต้องสูงพอให้กดด้วยนิ้วโป้งได้ */
  .nav-link{
    min-height:48px; padding:11px 14px;
    font-size:.95rem; border-radius:10px;
  }
  .nav-link i{ width:22px; font-size:1rem; }
  .nav-sec{ font-size:.7rem; padding-top:14px; }
  .sb-nav{ padding:8px 10px 20px; -webkit-overflow-scrolling:touch; }
  .sb-user{ padding:14px 16px; }
  .sb-uname{ font-size:.95rem; }
  .sb-av{ width:40px; height:40px; font-size:1rem; }

  /* ── แถบบนสุด ─────────────────────────────────────────
     ของเดิมยัดหลายอย่างจนล้นบนจอแคบ
     ตัดสิ่งที่ไม่จำเป็นออก เหลือเฉพาะที่ต้องใช้ */
  .topbar{
    height:auto; min-height:56px;
    padding:8px 10px; gap:8px;
    position:sticky; top:0;
  }
  .sidebar-toggle{
    display:flex !important; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:-4px;
    border-radius:10px; font-size:1.25rem; flex-shrink:0;
  }
  .sidebar-toggle:active{ background:var(--bg); }
  .tb-title{ font-size:1rem; line-height:1.35; }
  .tb-bc{ display:none; }            /* เส้นทางนำทาง ซ่อนบนมือถือ */
  .tb-logo{ display:none; }          /* โลโก้ซ้ำกับในเมนู */
  .tb-right{ gap:6px; }
  .tb-bell{ width:44px; height:44px; font-size:1.05rem; }
  .tb-av{ width:40px; height:40px; font-size:.9rem; }
  /* ปุ่มยื่นคำขอบนแถบบน เหลือเฉพาะไอคอน ประหยัดที่ */
  .tb-right .btn{ min-height:44px; padding:0 12px; }
  .tb-right .btn span{ display:none; }

  /* ── ปุ่มทั้งระบบ ─────────────────────────────────────
     มาตรฐานปุ่มที่กดด้วยนิ้วได้คือสูงอย่างน้อย 44px
     ของเดิมสูงประมาณ 26px และปุ่มเล็กเหลือ 21px
     ซึ่งกดพลาดตลอด โดยเฉพาะตอนใส่ถุงมือหน้างาน */
  .btn{
    min-height:46px; padding:11px 18px;
    font-size:.95rem; border-radius:10px; gap:7px;
  }
  .btn-sm{ min-height:40px; padding:9px 14px; font-size:.88rem; }
  .btn-icon{ width:46px; height:46px; min-height:46px; padding:0; }
  .btn-icon.btn-sm{ width:40px; height:40px; min-height:40px; }
  /* ปุ่มในแถวตาราง ให้เว้นระยะไม่ให้กดชนกัน */
  .tbl td .btn + .btn, .tbl td .btn-icon + .btn-icon{ margin-left:6px; }
  /* ปุ่มส่งฟอร์มหลัก ให้เต็มความกว้างจะกดง่ายที่สุด */
  form > .btn[type=submit]:only-child,
  .btn-block{ width:100%; justify-content:center; }

  /* ── การ์ด ────────────────────────────────────────── */
  .card{ border-radius:14px; }
  .card-head{ padding:14px 14px; }
  .card-title{ font-size:1rem; }
  .card-body{ padding:14px; }

  /* ── ตัวเลขสรุปหน้าแรก ─────────────────────────────── */
  .stats{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-bottom:14px; }
  .stat{ padding:13px 13px; }
  .stat-val{ font-size:1.5rem; }
  .stat-lbl{ font-size:.82rem; }
  .stat-sub{ font-size:.75rem; }
  .mini-stats, .kpi-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }

  /* ── ตาราง ────────────────────────────────────────────
     ตารางหลายคอลัมน์บนจอแคบต้องเลื่อนดูด้านข้างได้
     และต้องมีเงาบอกว่ายังมีข้อมูลต่อไปทางขวา */
  .tbl-wrap{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    background:
      linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)),
      linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(26,35,64,.14),transparent),
      radial-gradient(farthest-side at 100% 50%,rgba(26,35,64,.14),transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  /* ตารางที่ยังไม่ได้ครอบ ให้เลื่อนได้เหมือนกัน */
  .card-body > table, .card > table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl{ font-size:.9rem; }
  .tbl thead th{ font-size:.75rem; padding:11px 12px; white-space:nowrap; letter-spacing:.3px; }
  .tbl tbody td{ padding:13px 12px; }
  .tbl td, .tbl th{ white-space:nowrap; }
  /* ช่องที่เป็นข้อความยาว ให้ตัดบรรทัดได้ ไม่ต้องเลื่อนไกล */
  .tbl td.wrap, .tbl td[data-wrap]{ white-space:normal; min-width:180px; }

  /* ── ตารางแปลงร่างเป็นการ์ด ─────────────────────────────
     หนึ่งแถว = หนึ่งการ์ด อ่านครบทุกช่องโดยไม่ต้องเลื่อนซ้ายขวา
     ช่องแรกทำเป็นหัวการ์ด ช่องที่เหลือแสดงเป็น ป้ายกำกับ : ค่า
     (สคริปต์ใน includes/layout.php เป็นผู้เติม data-label ให้) */
  .tbl-stack{ font-size:1rem; border:0; }
  .tbl-stack thead{ display:none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td{ display:block; width:100%; }
  .tbl-stack tr{
    border:1px solid #e3e8f0; border-radius:12px; background:#fff;
    padding:12px 14px; margin-bottom:11px; box-shadow:0 1px 3px rgba(16,24,40,.05);
  }
  .tbl-stack td{
    border:0 !important; padding:7px 0; white-space:normal; word-break:break-word;
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    min-height:auto; text-align:left;
  }
  .tbl-stack td::before{
    content:attr(data-label); flex:0 0 38%; max-width:38%;
    color:#64748b; font-size:.84rem; font-weight:600; line-height:1.7;
  }
  .tbl-stack td:not([data-label])::before{ content:none; }
  .tbl-stack td > *{ min-width:0; }
  /* ช่องแรกเป็นหัวการ์ด ตัวใหญ่ เต็มบรรทัด */
  .tbl-stack td:first-child{
    display:block; font-weight:700; font-size:1.02rem; line-height:1.6;
    padding:0 0 10px; margin-bottom:6px; border-bottom:1px solid #eef1f6 !important;
  }
  .tbl-stack td:first-child::before{ display:none; }
  /* ช่องปุ่มจัดการ ให้ปุ่มเรียงเต็มความกว้าง กดง่าย */
  .tbl-stack td:last-child{ padding-top:11px; }
  .tbl-stack td .act-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
  .tbl-stack td .act-btns .btn,
  .tbl-stack td .act-btns .btn-icon{ min-width:44px; min-height:44px; }
  /* แถวว่าง เช่น ไม่พบข้อมูล */
  .tbl-stack td[colspan]{ display:block; text-align:center; padding:18px 0; }
  .tbl-stack td[colspan]::before{ content:none; }
  /* เมื่อเป็นการ์ดแล้วไม่ต้องมีเงาบอกให้เลื่อนข้าง */
  .tbl-wrap:has(.tbl-stack){ overflow-x:visible; background:none; }

  /* ── แท็บกรองสถานะ ───────────────────────────────────
     เดิมแท็บล้นออกนอกจอจนกดแท็บท้าย ๆ ไม่ได้ */
  .tabs, .filter-tabs, .tab-row{
    display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:8px; padding-bottom:4px; scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar{ display:none; }
  .tabs > *, .filter-tabs > *{ flex:0 0 auto; min-height:42px; display:inline-flex; align-items:center; }

  /* ── ตารางแบ่งคอลัมน์ที่เขียนติดไว้ในหน้าเว็บโดยตรง ─────
     หลายหน้าเขียน grid-template-columns ไว้ในแท็กเลย เช่น
     1fr 340px หรือ repeat(3,1fr) ซึ่งเป็นการกำหนดแบบตายตัว
     ทำให้คอลัมน์ขวากว้าง 340px ค้างอยู่บนจอกว้าง 375px
     ค่าที่เขียนติดในแท็กมีน้ำหนักสูงกว่าไฟล์ CSS ทั่วไป
     จึงต้องใช้ !important เพื่อบังคับให้เหลือคอลัมน์เดียว */
  [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  /* ── กันเนื้อหาดันความกว้างจนล้นออกนอกจอ ────────────────
     สาเหตุที่พบจากการวัดจริงบนจอ 393px: คอลัมน์ที่เขียนว่า 1fr
     เบราว์เซอร์ตีความว่า minmax(auto,1fr) ซึ่ง auto จะกว้างเท่ากับ
     เนื้อหาที่กว้างที่สุดข้างใน เช่น ตาราง 12 คอลัมน์
     การ์ดจึงกว้าง 537px ทั้งที่จอกว้าง 393px และถูก body ตัดทิ้ง
     ปุ่ม "ดูทั้งหมด" ที่อยู่ขวาสุดจึงหายไปจากจอและกดไม่ได้
     แก้โดยใช้ minmax(0,1fr) และสั่ง min-width:0 ให้ลูกทุกตัว */
  .page *, .card, .card-body, .card-head, .tbl-wrap,
  .view-col, .grid > *, form, fieldset{ min-width:0; }
  .tbl-wrap{ max-width:100%; }
  .card{ max-width:100%; overflow:hidden; }
  .card-head{ flex-wrap:wrap; gap:8px; row-gap:10px; }

  /* ── ปัญหาที่พบจากการทดสอบบนมือถือจริง ────────────────
     บางหน้ามีบล็อก <style> ของตัวเองอยู่ในหน้านั้น เช่น
     permit_new.php เขียน .form-row{grid-template-columns:1fr 1fr}
     ไว้ในหน้า ซึ่งอยู่หลังไฟล์ mobile.css ในลำดับการอ่าน
     จึงชนะและทับกฎของเรา ทำให้ฟอร์มยังเป็น 2 คอลัมน์
     และช่องด้านขวาถูกตัดหายออกนอกจอ
     ต้องใช้ !important เพื่อให้แน่ใจว่าเหลือคอลัมน์เดียวจริง */
  .form-row, .form-row-3,
  .employer-grid, .ind-grid, .view-grid, .scan-grid,
  .permit-grid, .detail-grid, .two-col{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  /* การ์ดเลือกประเภทงานและบัญชีทดสอบ อ่านง่ายกว่าถ้าเป็น 2 คอลัมน์
     ต้องเขียนหลังกฎด้านบน เพราะกฎด้านบนบังคับเหลือคอลัมน์เดียว */
  .permit-type-grid, .demo-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }
  .stats, .mini-stats, .kpi-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }

  /* ── แถบขั้นตอนในหน้ายื่นคำขอ ──────────────────────────
     เดิมบีบ 4 ขั้นตอนให้อยู่ในบรรทัดเดียว ชื่อขั้นตอนยาว ๆ
     อย่าง ผู้ปฏิบัติงาน จึงถูกหักเป็น 3 บรรทัด อ่านยากมาก
     แก้เป็นเลื่อนดูด้านข้างได้ ชื่อไม่ต้องหักบรรทัด */
  .wizard-steps{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:4px; padding-bottom:6px; margin-bottom:12px;
    scrollbar-width:none;
  }
  .wizard-steps::-webkit-scrollbar{ display:none; }
  .wizard-step-tab{
    flex:0 0 auto; white-space:nowrap;
    font-size:.85rem; gap:6px;
    padding:6px 4px;
  }
  .wizard-step-tab .num{ width:28px; height:28px; font-size:.82rem; }
  .wizard-step-sep{ flex:0 0 14px; }

  /* ── หัวการ์ด ─────────────────────────────────────────
     ปุ่มเล็ก ๆ อย่าง ดูทั้งหมด ไม่ควรยืดเต็มความกว้าง
     ให้อยู่ชิดขวาตามปกติ จะดูเป็นระเบียบกว่า */
  .card-head{ gap:10px; }
  .card-head .btn-sm, .card-head .btn-ghost{ width:auto; }

  /* ── ฟอร์ม ────────────────────────────────────────── */
  .fg{ margin-bottom:16px; }

  /* ── กันช่องกรอกวันที่และเวลาดันจนล้นจอ ────────────────
     ช่อง date และ time บน iOS มีความกว้างขั้นต่ำในตัวเอง
     พอขยายตัวอักษรเป็น 16px จึงกว้างเกินช่องที่จัดไว้
     และดันทั้งแถวจนล้นออกนอกจอ ต้องอนุญาตให้ย่อได้ */
  input, select, textarea, .fc, .form-control{
    min-width:0; max-width:100%;
  }
  .fg, .form-row > *, .form-row-3 > *{ min-width:0; }

  /* ── กล่องหน้าต่างซ้อน ────────────────────────────────
     บนมือถือให้เต็มจอจากด้านล่าง กดง่ายกว่ากล่องลอยกลางจอ */
  .overlay{ padding:0; align-items:flex-end; }
  .modal{
    max-width:100%; width:100%;
    border-radius:18px 18px 0 0;
    max-height:92dvh; display:flex; flex-direction:column;
  }
  .modal-head{ padding:16px 16px 12px; flex-shrink:0; }
  .modal-body{ padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }
  .modal-foot{
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    flex-shrink:0; display:flex; gap:10px;
    border-top:1px solid var(--border); background:#fff;
  }
  .modal-foot .btn{ flex:1; justify-content:center; }

  /* ── หน้าสแกน QR ─────────────────────────────────────
     เป็นหน้าที่ใช้หน้างานจริง ต้องกดง่ายที่สุด */
  .scan-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .scan-box{ padding:18px 14px; }
  #video{ max-width:100% !important; width:100% !important; border-radius:12px; }
  #startBtn{ min-height:52px; font-size:1rem; width:100%; justify-content:center; }
  #scanHint{ font-size:.9rem !important; }
  /* ช่องกรอกเลขที่ใบอนุญาตกับปุ่มค้นหา ให้เรียงลงมาไม่เบียดกัน */
  .scan-box + div + form{ flex-wrap:wrap; }
  .scan-box + div + form .btn{ min-width:110px; }

  /* ── หน้าใบอนุญาต ─────────────────────────────────── */
  .view-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .permit-hdr-card{ flex-wrap:wrap; gap:10px; padding:14px; }
  .permit-chip{ font-size:.95rem; }

  /* ── ข้อความแจ้งเตือน ─────────────────────────────── */
  .flash-wrap{ padding:10px 12px 0 !important; }
  .alert{ font-size:.92rem; padding:13px 14px; border-radius:10px; }

  /* ── รายการแจ้งเตือน ─────────────────────────────── */
  .notif-item, .noti-item{ padding:14px; min-height:64px; }

  /* ── กันหน้าเลื่อนซ้ายขวาทั้งหน้า ────────────────────
     ถ้ามีอะไรกว้างเกินจอ ให้ตัดออกแทนที่จะทำให้เลื่อนได้ทั้งหน้า */
  html, body{ overflow-x:hidden; max-width:100%; }
  img, canvas, svg, video, iframe{ max-width:100%; height:auto; }
  pre, code{ white-space:pre-wrap; word-break:break-word; }
}

/* ==========================================================
   จอมือถือขนาดเล็ก เช่น iPhone SE
   ========================================================== */
@media (max-width:430px){
  /* ตัวเลขสรุปคงไว้ 2 คอลัมน์แม้บนจอเล็กสุด
     ถ้าเรียงคอลัมน์เดียวหน้าแดชบอร์ดจะยาวจนต้องเลื่อนหลายจอกว่าจะพ้น
     การ์ดสรุปเนื้อหาสั้น จึงพอดีกับ 2 คอลัมน์บนจอกว้าง 375px */
  .stats, .mini-stats, .kpi-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:9px !important; }
  .stat-val{ font-size:1.35rem; }
  .page{ padding:12px 10px 84px; }
  .tb-title{ font-size:.95rem; }
  .card-head{ flex-wrap:wrap; gap:8px; }
  /* เฉพาะปุ่มหลักเท่านั้นที่ยืดเต็มความกว้าง ปุ่มรองปล่อยตามเนื้อหา */
  .card-head .btn-primary{ width:100%; justify-content:center; }
  .modal{ max-height:96dvh; }
  /* การ์ดเลือกประเภทงาน บนจอเล็กมากให้เหลือคอลัมน์เดียวจะกดง่ายกว่า */
  .permit-type-grid{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ==========================================================
   เผื่อขอบจอโค้งของ iPhone รุ่นใหม่
   ========================================================== */
@supports (padding:max(0px)){
  @media (max-width:860px){
    .page{
      padding-left:max(12px, env(safe-area-inset-left));
      padding-right:max(12px, env(safe-area-inset-right));
      padding-bottom:max(84px, env(safe-area-inset-bottom));
    }
    .topbar{
      padding-left:max(10px, env(safe-area-inset-left));
      padding-right:max(10px, env(safe-area-inset-right));
    }
  }
}

/* ==========================================================
   ปรับให้กดแล้วรู้สึกว่ามีการตอบสนอง
   บนมือถือไม่มีการชี้เมาส์ จึงต้องใช้จังหวะกดแทน
   ========================================================== */
@media (hover:none){
  .btn:active{ transform:scale(.97); opacity:.9; }
  .nav-link:active{ background:rgba(255,255,255,.14); }
  .tbl tbody tr:hover td{ background:transparent; }   /* ยกเลิกเอฟเฟกต์ชี้เมาส์ */
  .stat:hover{ transform:none; box-shadow:var(--sh1); }
  /* กันการเลือกข้อความค้างตอนกดปุ่ม */
  .btn, .nav-link, .sidebar-toggle{ -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
}

@media (max-width:860px){

  /* ── ขนาดตัวอักษรและปุ่มที่วัดได้ว่าเล็กเกินไปบนมือถือ ────
     วัดจากหน้าจริงทั้ง 20 หน้า ที่ความกว้าง 375 / 393 / 412 / 430 px
     ป้ายสถานะและข้อความประกอบเดิมเล็กเพียง 10–11.5px
     ซึ่งเล็กกว่าเกณฑ์อ่านสบายบนมือถือ จึงขยายเป็นอย่างน้อย 12.5px */
  .badge, .rbadge, .role-pill, .tag, .cs, .ci-in, .ci-out,
  .date-th-hint, .form-hint, .notif-d, .tl-d, .tl-s,
  .ms-lbl, .bar-lbl, .stat-sub, .muted, small{
    font-size:12.5px !important; line-height:1.75;
  }
  .badge, .rbadge, .role-pill, .tag{ padding:4px 10px; border-radius:999px; }

  /* ── พื้นที่กดที่เล็กเกินไป ──────────────────────────────
     เกณฑ์ที่ใช้กันทั่วไปคือกดได้สบายต้องไม่เล็กกว่า 44px
     ที่วัดได้: ลิงก์เลขที่ใบอนุญาตสูงเพียง 15px
     แท็บกรองสถานะสูง 34px และปุ่มค้นหารูปแว่นกว้างเพียง 28px */
  .pno-link, .tbl a:not(.btn), .card-head a:not(.btn){
    display:inline-flex; align-items:center; min-height:44px;
  }
  .ftab{
    display:inline-flex; align-items:center; gap:6px;
    min-height:44px; padding:0 14px; border-radius:999px; white-space:nowrap;
  }
  .btn-sm, .btn-icon{ min-width:44px; }
  select, select.fc{ min-height:46px !important; }
  input[type=checkbox], input[type=radio]{ width:24px; height:24px; min-width:24px; }
  /* ป้ายจำนวนบนกระดิ่งแจ้งเตือนตั้งใจให้เป็นจุดเล็ก ไม่ต้องขยาย */
  .tb-bell sup{ font-size:0; }
}

@media (max-width:860px){
  /* แท็บกรองและป้ายกำกับที่ยังเล็กกว่าเกณฑ์ */
  .ftab{ font-size:13px; }
  .ftab em{ font-size:12px; padding:1px 7px; }
  .di label, .dg label{ font-size:12.5px; letter-spacing:0; }
  .di value, .di .val{ font-size:1rem; }
  /* ลิงก์ในกล่องแจ้งเตือนหน้าแดชบอร์ด เดิมสูงเพียง 20px กดยาก */
  .welcome-alert a, .alert a:not(.btn){
    display:inline-flex; align-items:center; min-height:44px;
    padding:0 12px; margin-left:4px; border-radius:8px;
    background:rgba(255,255,255,.22); font-weight:600; text-decoration:none;
  }
  .welcome-alert{ flex-wrap:wrap; row-gap:6px; align-items:center; }
  /* ข้อความที่กำหนดขนาดไว้ในหน้าเว็บโดยตรง */
  [style*="font-size:.6"], [style*="font-size:.7"],
  [style*="font-size:0.6"], [style*="font-size:0.7"],
  [style*="font-size:10px"], [style*="font-size:11px"]{ font-size:12.5px !important; }
}

@media (max-width:860px){
  /* ── หน้าเข้าสู่ระบบและสมัครสมาชิก ──────────────────────
     สองหน้านี้ไม่ได้ใช้โครงหน้าร่วมกับหน้าอื่น สคริปต์กำหนด
     ขนาดตัวอักษรขั้นต่ำจึงไม่ทำงาน ต้องกำหนดด้วย CSS โดยตรง */
  .auth-card-sub, .demo-r, .demo-u, .role-desc, .role-name,
  .auth-foot, .auth-hint, .auth-note{ font-size:12.5px !important; line-height:1.75; }
  .role-name{ font-size:14px !important; font-weight:700; }
  .auth-foot a{
    display:inline-flex; align-items:center; min-height:44px;
    padding:0 8px; font-weight:600;
  }
  .auth-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px; }
}

/* ── แท็บเล็ตและโน้ตบุ๊กจอเล็ก (ไม่เกิน 1100px) ────────────
   หลายหน้าวางเป็นสองคอลัมน์แบบ 1fr 340px เขียนติดไว้ในแท็ก
   เมื่อพื้นที่เนื้อหาเหลือเพียง 764px คอลัมน์ซ้ายย่อไม่ได้
   เพราะ 1fr มีความกว้างขั้นต่ำเท่ากับเนื้อหา ทั้งหน้าจึงเลื่อนข้างได้
   ในช่วงความกว้างนี้ให้เรียงลงมาเป็นคอลัมน์เดียวแทน */
@media (max-width:1100px){
  [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;
  }
}

/* สัญลักษณ์สำรองของปุ่มเปิดเมนู ใช้เมื่อชุดไอคอนภายนอกโหลดไม่สำเร็จ */
.ic-fb{ display:none; font-size:1.25rem; line-height:1; }
.no-fa .ic-fb{ display:inline-block; }
.no-fa .sidebar-toggle i{ display:none; }

@media (max-width:860px){
  /* ── ตารางกรอกข้อมูลกลายเป็นการ์ด ────────────────────────
     หน้า JSEA มีตารางกรอก 6 คอลัมน์ บนจอ 320–430px
     ต้องเลื่อนซ้ายขวาทีละช่อง และช่องเลือกความเสี่ยงแคบเหลือ 36px
     เปลี่ยนเป็นการ์ดที่มีป้ายกำกับอยู่เหนือช่องกรอก กรอกไล่ลงมาได้เลย */
  .tbl-form-stack{ border:0; }
  .tbl-form-stack thead{ display:none; }
  .tbl-form-stack, .tbl-form-stack tbody,
  .tbl-form-stack tr, .tbl-form-stack td{ display:block; width:100%; }
  .tbl-form-stack tr{
    border:1px solid #e3e8f0; border-radius:12px; background:#fff;
    padding:12px 14px; margin-bottom:12px;
  }
  .tbl-form-stack td{ border:0 !important; padding:8px 0; white-space:normal; }
  .tbl-form-stack td::before{
    content:attr(data-label); display:block; margin-bottom:6px;
    font-size:12.5px; font-weight:600; color:#64748b;
  }
  .tbl-form-stack td:not([data-label])::before{ content:none; }
  .tbl-form-stack td input,
  .tbl-form-stack td select,
  .tbl-form-stack td textarea{ width:100%; min-height:46px; font-size:16px; }
  .tbl-form-stack td.step-no{
    font-weight:700; font-size:1rem; padding:0 0 10px; margin-bottom:6px;
    border-bottom:1px solid #eef1f6 !important; color:#1e2d4f;
  }
  .tbl-form-stack td.step-no::before{
    content:"ขั้นตอนที่ "; display:inline; margin:0;
    font-size:1rem; font-weight:700; color:inherit;
  }
  .tbl-form-stack td:empty{ display:none; }
  .tbl-wrap:has(.tbl-form-stack){ overflow-x:visible; background:none; }

  /* ── ตัวอักษรในเมนูด้านข้าง ──────────────────────────────
     สคริปต์กำหนดขนาดขั้นต่ำทำงานเฉพาะพื้นที่เนื้อหา
     เมนูด้านข้างจึงยังเหลือตัวอักษรขนาด 9.9–11.2px */
  .sb-sub{ font-size:12.5px !important; }
  .nav-sec{ font-size:12.5px !important; letter-spacing:.4px; }
  .sb-urole{ font-size:12.5px !important; }
  .nav-badge{
    font-size:12.5px !important; min-width:22px; height:22px;
    display:inline-flex; align-items:center; justify-content:center;
  }
}

/* ════════════════════════════════════════════════════════════
   จัดหน้าตาสำหรับมือถือ
   เป้าหมาย: อ่านสบาย กดง่าย ไปหน้าที่ต้องการได้เร็ว
   ════════════════════════════════════════════════════════════ */

/* แถบเมนูล่าง แสดงเฉพาะจอมือถือ */
.tabbar{ display:none; }

@media (max-width:860px){

  /* ── แถบเมนูด้านล่าง ─────────────────────────────────────
     รวมปลายทางที่ใช้บ่อยไว้ให้กดถึงในนิ้วเดียว
     ไม่ต้องเปิดเมนูด้านข้างแล้วเลื่อนหาทุกครั้ง */
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:280;
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--border);
    box-shadow:0 -2px 14px rgba(26,35,64,.07);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar-item{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    padding:5px 2px; border-radius:12px;
    text-decoration:none; color:var(--tx3); min-height:52px;
    -webkit-tap-highlight-color:transparent;
  }
  .tabbar-ic{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:26px; height:24px; font-size:1.12rem; line-height:1;
  }
  .tabbar-lb{
    font-size:12.5px; font-weight:600; line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  }
  .tabbar-item{ position:relative; }
  .tabbar-item.on{ color:var(--navy); }
  /* ขีดบอกหน้าปัจจุบัน วางไว้ขอบบนของปุ่ม ไม่ให้ทับตัวหนังสือ */
  .tabbar-item.on::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:22px; height:3px; border-radius:0 0 3px 3px; background:var(--navy);
  }
  .tabbar-item:active{ background:var(--bg); }
  /* ปุ่มสแกน QR เป็นงานหลักหน้างาน จึงเน้นให้เห็นชัดที่สุด */
  .tabbar-mid .tabbar-ic{
    width:46px; height:46px; margin-top:-20px; border-radius:50%;
    background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
    color:#fff; font-size:1.2rem;
    box-shadow:0 5px 14px rgba(30,45,79,.34);
    border:3px solid #fff;
  }
  .tabbar-mid.on::before{ display:none; }
  .tabbar-mid .tabbar-lb{ margin-top:-2px; }
  .tabbar-badge{
    position:absolute; top:-7px; right:-11px; min-width:21px; height:21px;
    padding:0 5px; border-radius:11px; background:var(--err); color:#fff;
    font-size:12.5px; font-weight:700; font-style:normal;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #fff; line-height:1;
  }
  /* เว้นที่ด้านล่างไม่ให้แถบเมนูบังเนื้อหาบรรทัดสุดท้าย */
  .page{ padding-bottom:calc(78px + env(safe-area-inset-bottom)) !important; }

  /* ── ระยะห่างและจังหวะการมอง ─────────────────────────────
     ตั้งระยะให้เป็นชุดเดียวกันทั้งระบบ เนื้อหาจะดูเป็นระเบียบ
     และสายตาไล่จากหัวข้อลงเนื้อหาได้ลื่นขึ้น */
  .page{ padding-left:14px; padding-right:14px; padding-top:14px; }
  .card{ border-radius:14px; margin-bottom:14px; border-color:#e8edf5; }
  .card + .card{ margin-top:0; }
  .card-head{ padding:14px 16px; }
  .card-body{ padding:16px; }
  .card-title{ font-size:1.02rem; letter-spacing:-.2px; }

  /* ตัวหนังสือภาษาไทยต้องการระยะบรรทัดมากกว่าอังกฤษจึงจะอ่านสบาย */
  body{ line-height:1.75; }
  .tb-title{ font-size:1.02rem; font-weight:700; letter-spacing:-.2px; }

  /* ── ปุ่มปิดกล่องโต้ตอบ ─────────────────────────────────
     เดิมกว้างเพียง 13–17px สูง 20px แตะพลาดบ่อยมาก */
  .mclose{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; margin:-10px -8px -10px 0;
    border-radius:12px; font-size:1.3rem; line-height:1;
    background:transparent; border:none; color:var(--tx2);
  }
  .mclose:active{ background:var(--bg); }

  /* ── การ์ดที่แปลงมาจากตาราง ─────────────────────────────
     ทำให้บรรทัดแรกเด่นเหมือนหัวเรื่อง และคู่ ป้าย : ค่า อ่านง่าย */
  .tbl-stack tr{
    border-color:#e8edf5; border-radius:14px; padding:14px 16px;
    box-shadow:0 1px 3px rgba(16,24,40,.045);
  }
  .tbl-stack tr:active{ background:#fbfcfe; }
  .tbl-stack td:first-child{ font-size:1.04rem; color:var(--navy); }
  .tbl-stack td::before{ color:var(--tx3); font-weight:600; }
  .tbl-stack td{ align-items:baseline; }
  .tbl-stack td:not(:first-child){ text-align:right; }
  .tbl-stack td:not(:first-child)::before{ text-align:left; }

  /* ── สถานะว่างเปล่า ─────────────────────────────────────
     เดิมเว้นที่สูง 50px แล้วมีข้อความจาง ๆ ดูเหมือนหน้าเสีย */
  .empty{
    padding:34px 18px; color:var(--tx2); font-size:.95rem;
    background:#fbfcfe; border-radius:12px;
  }

  /* ── ปุ่ม ────────────────────────────────────────────────
     ปุ่มหลักในแต่ละการ์ดควรกว้างเต็มแถวบนมือถือ กดพลาดยาก */
  .btn{ border-radius:11px; font-weight:700; letter-spacing:-.1px; }
  .card-body > .btn-primary:only-of-type,
  .card-body > form > .btn-primary:only-of-type{ width:100%; justify-content:center; }
  .btn:active{ transform:scale(.985); }

  /* ── ช่องกรอกข้อมูล ─────────────────────────────────────── */
  .fc, .form-control, input[type=text], input[type=email], input[type=tel],
  input[type=number], input[type=date], input[type=time], input[type=datetime-local],
  input[type=password], input[type=search], select, textarea{
    border-radius:11px; border-color:#dbe3ee;
  }
  .fc:focus, select:focus, textarea:focus{
    border-color:var(--blue); box-shadow:0 0 0 3px rgba(65,105,200,.13); outline:none;
  }
  .fg{ margin-bottom:14px; }
  .fg label, .form-label{ font-weight:600; color:var(--tx); }

  /* ── แถบหัวเรื่องด้านบน ─────────────────────────────────── */
  .topbar{ padding:0 12px; gap:10px; }

  /* ── ป้ายสถานะให้สีชัดขึ้นเล็กน้อย อ่านผ่าน ๆ ก็แยกออก ─── */
  .badge{ font-weight:700; }
}

/* จอเล็กมาก ป้ายในแถบล่างอาจยาวเกิน ให้ย่อขนาดลงเล็กน้อย */
@media (max-width:360px){
  .tabbar-lb{ font-size:12.5px; letter-spacing:-.3px; }
  .tabbar-item{ padding:5px 1px; }
  .tabbar-ic{ font-size:1.05rem; }
  .tabbar-mid .tabbar-ic{ width:42px; height:42px; margin-top:-17px; }
}

@media (max-width:860px){
  /* ── แท็บกรองสถานะ ให้เลื่อนได้เป็นแถวเดียว ───────────────
     เดิม 8 แท็บตัดบรรทัดเป็น 3 แถว กินพื้นที่จอไปเปล่า ๆ */
  .ftabs{
    display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 14px 6px; margin:0 -14px 12px;
    scroll-snap-type:x proximity;
  }
  .ftabs::-webkit-scrollbar{ display:none; }
  .ftabs > .ftab{ flex:0 0 auto; scroll-snap-align:start; }
  /* ── แถบแท็บกับช่องเลือกที่วางไว้บรรทัดเดียวกัน ──────────
     บางหน้าเขียนว่า <div class="ftabs" style="flex:1"> แล้ววาง
     ช่องเลือกกว้าง 170px ต่อท้ายในแถวเดียวกัน
     บนมือถือแท็บกินที่จนช่องเลือกทับลงบนแท็บ กดโดนอันล่างไม่ได้
     แก้โดยให้แท็บกินเต็มบรรทัด ช่องเลือกจึงตกลงไปอยู่บรรทัดถัดไป */
  .ftabs{ flex:1 1 100% !important; }
  /* ช่องเลือกที่กำหนดความกว้างตายตัวไว้ในแท็ก ให้เต็มบรรทัดบนมือถือ */
  select[style*="width:"], select[style*="width :"]{ width:100% !important; }

  /* ── ชุดตัวกรองแบบพับเก็บ ───────────────────────────────── */
  .m-filter{
    background:#fff; border:1px solid #e8edf5; border-radius:14px;
    margin-bottom:14px; overflow:hidden;
  }
  .m-filter > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; gap:9px;
    padding:14px 16px; min-height:52px;
    font-weight:700; color:var(--tx); font-size:.98rem;
  }
  .m-filter > summary::-webkit-details-marker{ display:none; }
  .m-filter-n{
    font-style:normal; font-size:12px; font-weight:700; color:#fff;
    background:var(--blue); border-radius:999px; padding:2px 9px;
  }
  .m-filter-x{
    margin-left:auto; width:11px; height:11px; flex:0 0 auto;
    border-right:2.5px solid var(--tx3); border-bottom:2.5px solid var(--tx3);
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s;
  }
  .m-filter[open] > summary .m-filter-x{ transform:rotate(-135deg) translate(-3px,-3px); }
  .m-filter > form{
    padding:0 16px 16px; display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:10px !important;
  }
  .m-filter > form > input[type=text],
  .m-filter > form > input[type=search],
  .m-filter > form > .fg:first-child{ grid-column:1 / -1; }
  .m-filter > form > .btn{ min-height:46px; justify-content:center; }
  /* ถ้าตัวกรองอยู่ในการ์ดอยู่แล้ว ไม่ต้องมีกรอบซ้อนกรอบ
     และต้องดึงขอบออกไปชนขอบการ์ด ไม่งั้นจะเหลือช่องว่างเปล่า ๆ */
  .card > .m-filter{
    border:0; margin:-12px -16px; border-radius:14px; background:transparent;
  }
  .card > .m-filter > form{ padding:0 16px 14px; }
  .card:has(> .m-filter){ padding:12px 16px !important; }

  /* บอกให้รู้ว่าแถบแท็บยังเลื่อนดูต่อไปทางขวาได้ */
  .ftabs{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);
  }

  /* ── ค่าที่แสดงในการ์ดที่แปลงมาจากตาราง ───────────────── */
  .tbl-stack td .tv{
    display:flex; flex-direction:column; align-items:flex-end; gap:2px;
    flex:1 1 auto; min-width:0; text-align:right;
    word-break:break-word;
  }
  .tbl-stack td .tv > *{ max-width:100%; }
}

@media (max-width:860px){
  /* การ์ดของแต่ละแถวอยู่บนพื้นสีอ่อน จะแยกออกจากกันชัดกว่าขาวบนขาว */
  .tbl-wrap:has(.tbl-stack),
  .tbl-wrap:has(.tbl-form-stack){
    background:#f6f8fc; padding:12px 12px 2px; border-radius:0 0 14px 14px;
  }
  .card > .tbl-wrap:has(.tbl-stack){ margin-bottom:-1px; }
  .tbl-stack tr, .tbl-form-stack tr{ background:#fff; }
  /* เผื่อเบราว์เซอร์รุ่นเก่าที่ยังไม่รู้จัก :has ให้ยังอ่านได้ตามปกติ */
}

@media (max-width:860px){
  /* ช่องที่ไม่มีข้อมูล เดิมเว้นว่างไว้เฉย ๆ ทำให้ดูเหมือนหน้าโหลดไม่ครบ
     ใส่ขีดกลางไว้ให้รู้ว่าไม่มีข้อมูล ไม่ใช่ระบบผิดพลาด */
  .di value:empty::after,
  .di .val:empty::after{ content:"—"; color:var(--tx3); }
}

/* ถ้าผู้ใช้หมุนจอหรือขยายหน้าต่างจากขนาดมือถือเป็นขนาดคอมพิวเตอร์
   ชุดตัวกรองที่ถูกพับไว้ต้องคลี่ออกและซ่อนหัวข้อที่ใช้กดพับ */
@media (min-width:861px){
  .m-filter > summary{ display:none !important; }
  .m-filter{ border:0 !important; background:none !important; margin:0 !important; }
  .m-filter > form{ display:flex !important; padding:0 !important; }
  .tabbar{ display:none !important; }
}

@media (max-width:860px){
  /* ช่องเลือกบางตัวไม่ได้กำหนดสีพื้น เบราว์เซอร์จึงใส่สีเทาให้เอง
     ทำให้ดูไม่เข้าชุดกับช่องกรอกอื่นในฟอร์มเดียวกัน */
  select, select.fc{
    background-color:#fff;
    -webkit-appearance:none; appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#7a8aa6 50%),
                     linear-gradient(135deg,#7a8aa6 50%,transparent 50%);
    background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
    padding-right:38px;
  }
}

@media (max-width:860px){
  /* บนมือถือให้ภาพกล้องเต็มความกว้างของกรอบไปเลย เล็งง่ายที่สุด */
  #video{ max-width:100% !important; }
}

/* ════════════════════════════════════════════════════════════
   ช่องกรอกแบบพิเศษของเบราว์เซอร์ (วันที่ เวลา ไฟล์แนบ)
   ────────────────────────────────────────────────────────────
   บน iOS Safari ช่องเหล่านี้ยังใช้หน้าตาของระบบปฏิบัติการ
   ซึ่งกำหนดความกว้างจากเนื้อหาในตัวมันเอง และไม่ยอมย่อตาม
   ความกว้างที่เราสั่ง ผลคือกล่องล้นออกนอกการ์ดไปทางขวา
   อาการนี้เห็นเฉพาะบนเครื่องจริง เพราะเบราว์เซอร์บนเครื่องทดสอบ
   วาดช่องวันที่แคบกว่ามาก จึงไม่แสดงอาการ
   ทางแก้คือปิดหน้าตาของระบบปฏิบัติการแล้วกำหนดความกว้างเอง
   ตัวเลือกวันที่และเวลายังเปิดใช้งานได้ตามปกติเมื่อแตะ
   ════════════════════════════════════════════════════════════ */
input[type=date], input[type=time], input[type=datetime-local],
input[type=month], input[type=week], input[type=file]{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; max-width:100%; min-width:0;
  box-sizing:border-box; background-color:#fff;
}
/* ค่าในช่องวันที่บน iOS จะถูกจัดกึ่งกลางเอง ทำให้ไม่ตรงแนวกับช่องอื่น */
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=datetime-local]::-webkit-date-and-time-value{
  text-align:left; margin:0;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  margin-left:auto; opacity:.55;
}
input[type=file]::-webkit-file-upload-button{
  -webkit-appearance:none; appearance:none;
  border:1px solid #dbe3ee; background:#f4f6fb; color:#1a2340;
  border-radius:8px; padding:7px 12px; margin-inline-end:10px;
  font-family:inherit; font-size:.9em;
}

@media (max-width:860px){
  input[type=date], input[type=time], input[type=datetime-local]{
    min-height:48px; line-height:1.4;
  }
  input[type=file]{ padding:10px 12px; font-size:15px; }
  /* กันไว้อีกชั้น ไม่ว่าเบราว์เซอร์ไหนก็ห้ามลูกกว้างเกินช่องที่จัดให้ */
  .fg > *, .form-row > *, .form-row-3 > *,
  [style*="grid-template-columns"] > *{ min-width:0; max-width:100%; }
}

/* สีป้ายบทบาทที่เพิ่มเข้ามา ให้ครบทุกบทบาทที่ระบบรองรับ
   เดิมมีสีไว้เพียง 4 บทบาท ที่เหลือจึงใช้สีของผู้รับเหมาไปด้วยกันหมด
   แยกโทน: ทีมงานอาคารใช้โทนเย็น บุคคลภายนอกใช้โทนอุ่น */
.rp-manager { background:#0e7490; color:#e0f7fb; }
.rp-trainer { background:#3730a3; color:#e5e7ff; }
.rp-engineer{ background:#155e75; color:#e0f2fe; }
.rp-site    { background:#166534; color:#dcfce7; }
.rp-tenant  { background:#7c2d12; color:#ffedd5; border:1px solid #fdba74; }