/* ===== หน้าจอมือถือ (≤640px) — 2026-10-16 · หน้าคอมไม่ได้รับผลกระทบ (ทุกกฎอยู่ใน @media ยกเว้นการซ่อนส่วนที่มีเฉพาะมือถือ) ===== */
.m-bottom-nav, #mTitle, #mSearchBtn, .m-account, .m-more, #upTopBtn{display:none;}

/* รูปโปรไฟล์ (ทุกขนาดจอ) — วงกลม, ไม่มีรูป = ตัวอักษรแรกของชื่อ/อีเมล */
.up-avatar{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  background:#e6d5c6; color:#5a4636; font-weight:700; font-size:14px; line-height:1; box-shadow:0 0 0 2px rgba(255,255,255,.55);}
.up-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
#cloudToolbar .up-btn, .up-btn{border:0 !important; background:none !important; padding:0 !important; cursor:pointer; display:inline-flex; align-items:center; gap:8px; color:inherit; font:inherit;}
#cloudToolbar .up-name:empty{display:none;}
.up-big{display:flex; justify-content:center; margin:6px 0 14px;}
.up-big .up-avatar{width:132px; height:132px; font-size:52px; box-shadow:0 0 0 4px var(--surface), 0 0 0 5px var(--border);}
.up-actions{justify-content:center;}

@media (max-width:640px){
  /* ขนาดตัวอักษรบนมือถือ: ชนะค่า inline ของปุ่ม A-/A+ (20–27px ใหญ่เกินจอมือถือ) — ปุ่ม ก-/ก+ ในเมนูมือถือใช้สเกลนี้แทน */
  html, html[data-m-font="1"]{font-size:15px !important;}
  html[data-m-font="0"]{font-size:14px !important;}
  html[data-m-font="2"]{font-size:16px !important;}
  html[data-m-font="3"]{font-size:17.5px !important;}
  html[data-m-font="4"]{font-size:19px !important;}
  .m-font{display:flex; align-items:center; gap:8px; font-size:.85em; color:var(--text-soft);}
  .m-font button{width:auto !important; flex:1 1 0; text-align:center !important; font-weight:700;}
  /* iPhone ซูมจอเองเมื่อแตะช่องกรอกที่ตัวอักษรเล็กกว่า 16px แล้วไม่ซูมกลับ → จอดูใหญ่กว่ามือถือ: บังคับทุกช่องกรอก ≥16px (รวมหน้าเข้าสู่ระบบ) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea{font-size:16px !important;}
  /* ห้ามอะไรกว้างเกินจอ: ฟอร์มเป็นคอลัมน์เดียวที่หดได้, ช่องกรอกไม่ดันความกว้าง */
  html, body{max-width:100%; overflow-x:hidden;}
  .form-grid{grid-template-columns:minmax(0,1fr) !important;}
  .form-field, .form-field > *{min-width:0; max-width:100%;}
  .modal-box input, .modal-box select, .modal-box textarea{min-width:0; max-width:100%;}
  .modal-box{overflow-x:hidden;}
  #app{padding:0 10px calc(84px + env(safe-area-inset-bottom));}
  #cloudToolbar{display:none !important;}

  /* แถบบนแถวเดียว: ชื่อหน้า + ค้นหา + ล็อก + ธีม */
  .topbar{position:sticky; top:0; z-index:40; margin:0 -10px 10px; border-radius:0; border-width:0 0 1px; box-shadow:none;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px; gap:8px; flex-wrap:nowrap;}
  .sidebar-toggle-btn, .font-ctrl{display:none !important;}
  #mTitle{display:block; flex:1 1 auto; min-width:0; font-weight:700; font-size:1.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #mSearchBtn{display:grid;}
  .topbar .search-wrap{display:none;}
  .topbar.m-search-open .search-wrap{display:block; position:absolute; left:0; right:0; top:100%; padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 8px 16px rgba(0,0,0,.08);}
  .topbar-actions{gap:6px;}
  .icon-btn{width:38px; height:38px;}

  /* หัวข้อหน้า: เหลือแค่ชื่อ (คำอธิบายยาว ๆ ซ่อนบนมือถือ) */
  /* ชื่อหน้าแสดงที่แถบบนแล้ว → ซ่อนหัวข้อซ้ำ + คำอธิบายยาว ๆ */
  .app-section > .section-head, .app-section .section-hint{display:none;}

  /* แท็บย่อย: แถวเดียวเลื่อนซ้าย-ขวา แบบปุ่มเม็ดยา */
  .tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:6px; border-bottom:0; margin:0 -10px 12px; padding:2px 10px; -webkit-overflow-scrolling:touch;}
  .tabs::-webkit-scrollbar{display:none;}
  .tabs .tab-btn{flex:0 0 auto; white-space:nowrap; padding:7px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-soft); font-size:.88em; margin:0;}
  .tabs .tab-btn.active{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}

  /* กล่อง / การ์ดตัวเลข กระชับขึ้น */
  .panel{padding:12px; border-radius:14px;}
  .panel-toolbar{gap:8px; margin-bottom:10px;}
  .panel-toolbar > *{min-width:0;}
  .panel-toolbar input[type="search"], .panel-toolbar input[type="text"], .panel-toolbar select{flex:1 1 100%; width:100%; max-width:none;}
  .summary{gap:8px; margin-bottom:12px;}
  .stat-card{padding:10px 12px; min-height:0; box-shadow:none;}
  .stat-card .stat-label{font-size:.8em;}
  .stat-card .stat-value{font-size:1.45em;}
  .summary.m-collapsed > .stat-card:nth-child(n+7){display:none;}
  .m-more{display:block; width:100%; margin:-4px 0 12px; padding:8px; border:1px dashed var(--border); border-radius:10px; background:none; color:var(--accent); font:inherit; font-size:.88em; font-weight:700; cursor:pointer;}

  /* ตาราง → การ์ด (เฉพาะตารางที่ mobile.js ติด class m-cards: ไม่ใช่ตารางกรอกข้อมูล / เอกสาร A4) */
  .table-scroll.m-wrap{overflow:visible; border:0; border-radius:0;}
  table.m-cards, table.m-cards tbody{display:block; width:100% !important; min-width:0 !important; max-width:100%; table-layout:auto !important;}
  table.m-cards td, table.m-cards tr{width:auto !important; min-width:0 !important; max-width:100%;}
  table.m-cards .pill{white-space:normal; max-width:100%;}
  table.m-cards td *{max-width:100%; overflow-wrap:anywhere;}
  table.m-cards thead{display:none;}
  table.m-cards tr{display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin:0 0 10px;}
  table.m-cards td{display:block; position:relative; padding:3px 0 3px 36%; border:0 !important; text-align:left !important; min-height:1.5em; white-space:normal; background:none;}
  table.m-cards td::before{content:attr(data-label); position:absolute; left:0; top:5px; width:33%; color:var(--text-soft); font-size:.78em; line-height:1.3; font-weight:400;}
  table.m-cards td:first-child{padding-left:0; padding-bottom:6px; font-size:1.02em;}
  table.m-cards td:first-child::before, table.m-cards td.cell-actions::before, table.m-cards td[data-label=""]::before{display:none;}
  table.m-cards td[data-label=""]{padding-left:0;}
  table.m-cards td.cell-actions, table.m-cards td:last-child:has(> .btn){display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 0; margin-top:6px; border-top:1px solid var(--border) !important;}
  table.m-cards td:last-child:has(> .btn)::before{display:none;}
  table.m-cards td.cell-actions .btn, table.m-cards td:last-child > .btn{flex:1 1 auto; min-height:38px;}

  /* กล่องเลขพร้อมใช้: พับไว้ แตะหัวข้อเพื่อเปิด */
  .docno-ready.m-fold:not(.m-open) > :not(h3){display:none !important;}
  .docno-ready.m-fold > h3{cursor:pointer; display:flex; justify-content:space-between; align-items:center; margin:0;}
  .docno-ready.m-fold > h3::after{content:'แตะเพื่อดู ▾'; font-size:.7em; font-weight:400; color:var(--text-soft);}
  .docno-ready.m-fold.m-open > h3{margin-bottom:8px;} .docno-ready.m-fold.m-open > h3::after{content:'ซ่อน ▴';}

  /* ปุ่มที่ใช้บนคอมเป็นหลัก — ซ่อนบนมือถือ */
  [data-hrr-action="cand-import-resume"], [data-hrr-action="cand-import-sheet"], [data-hrr-action="cand-posmap"]{display:none !important;}

  /* หน้าต่าง (modal) เต็มความกว้าง เลื่อนขึ้นจากด้านล่าง ปุ่มบันทึกติดล่างเสมอ */
  .modal-backdrop{padding:0; place-items:end stretch;}
  .modal-box, .modal-box.wide, .modal-box.wide:has(> .ahf-modal){max-width:100% !important; width:100%; max-height:94dvh; border-radius:16px 16px 0 0; padding:16px 14px calc(14px + env(safe-area-inset-bottom));}
  .modal-box .form-actions{position:sticky; bottom:calc(-14px - env(safe-area-inset-bottom)); background:var(--surface); margin:12px -14px calc(-14px - env(safe-area-inset-bottom)); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); flex-wrap:wrap; z-index:3;}
  .modal-box .form-actions .btn{flex:1 1 auto; min-height:42px;}

  /* แถบเมนูล่าง */
  .m-bottom-nav{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--surface); border-top:1px solid var(--border);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow:0 -4px 18px rgba(0,0,0,.10);}
  .m-bottom-nav button{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:54px;
    border:0; background:none; color:var(--text-soft); font:inherit; font-size:.7em; line-height:1.2; padding:4px 2px; cursor:pointer; -webkit-tap-highlight-color:transparent;}
  .m-bottom-nav button svg{width:23px; height:23px;}
  .m-bottom-nav button.on{color:var(--accent); font-weight:700;}
  .m-bottom-nav button.on .m-ic{background:var(--accent-softest); border-radius:999px;}
  .m-bottom-nav .m-ic{display:grid; place-items:center; width:46px; height:28px;}
  .m-bottom-nav .m-badge{position:absolute; transform:translate(14px,-10px); min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--rose); color:#fff; font-size:.72em; line-height:17px; font-weight:700;}

  /* ลิ้นชักเมนู: บัญชีผู้ใช้ + สำรองข้อมูล / ออกจากระบบ อยู่ท้ายเมนู */
  /* ลิ้นชักสูงเท่าจอที่มองเห็นจริง (100vh บน iPhone สูงเกินจอ → ปุ่มท้ายเมนูตกขอบ) + เว้นที่ใต้ขอบล่าง/แถบโฮม */
  .sidebar{top:0; bottom:0; height:100vh; height:100dvh; max-height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(40px + env(safe-area-inset-bottom));}
  .sidebar .sidebar-more{display:none !important;}
  .sidebar > *{flex-shrink:0;}
  .m-account{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--border); padding-top:12px; margin-top:4px;}
  .m-account .m-email{font-size:.8em; color:var(--text-soft); word-break:break-all;}
  #upTopBtn{display:inline-flex; margin-right:2px;}
  #upTopBtn .up-avatar{width:34px; height:34px; box-shadow:0 0 0 2px var(--border);}
  .m-account .m-up-row{display:flex !important; align-items:center; gap:12px; border:0 !important; background:none !important; padding:4px 0 8px !important;}
  .m-up-row .up-avatar{width:48px; height:48px; font-size:20px; box-shadow:0 0 0 2px var(--border);}
  .m-up-text{display:flex; flex-direction:column; min-width:0; line-height:1.3;}
  .m-up-text b:empty{display:none;}
  .m-up-hint{font-size:.72em; color:var(--accent);}
  .m-account button{width:100%; text-align:left; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-alt); color:var(--text); font:inherit; font-size:.9em; cursor:pointer;}

  .ai-fab{bottom:calc(76px + env(safe-area-inset-bottom)); right:12px; width:48px; height:48px; font-size:22px;}
}