/* =====================================================================
   รอบ 74b: เมนูหมวดพับได้ + ลิ้นชักเมนูมือถือ + กติกามือถือรวมทุกหน้า
   - ลิงก์ไว้ท้ายสุดใน App.razor (ทับไฟล์อื่น) · สีจากตัวแปรใน :root (app.css / dark.css) → โหมดมืดใช้ได้เลย
   - จุดเปลี่ยนเป็นมือถือ = 760px เท่ากับทุกไฟล์ (app.css, fit.css และไฟล์ของแต่ละหน้า) — อย่าเปลี่ยนที่นี่ที่เดียว
   - คลาสใหม่ของไฟล์นี้: .deskmode-hint (แถบคำแนะนำ) / .m-scroll-row (แถวปุ่มเลื่อนข้างในแถว) / .m-sticky-first (คอลัมน์แรกติดซ้าย)
   ===================================================================== */

/* ---------- เมนูหมวด (ทุกขนาดจอ) ---------- */
.nav-sec[open] { background: rgba(255,255,255,.035); padding-bottom: 4px; margin-bottom: 2px; }
.nav-sec > a { position: relative; }
.nav-sec > a::before {
  content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: rgba(255,255,255,.12);
}
.nav-sec > a.active::before { background: rgba(255,255,255,.7); }
.nav-sec > a > span:first-child { min-width: 0; }

/* ---------- มือถือที่เปิด "เว็บไซต์เวอร์ชันเดสก์ท็อป" (JS ใน App.razor ใส่ html.desk-on-phone) ---------- */
.deskmode-hint { display: none; }
html.desk-on-phone .deskmode-hint {
  display: block; margin: 12px 16px 0; padding: 18px 22px; border-radius: 16px;
  background: var(--warn-soft); color: var(--warn-text, #7a5300); font-size: 1.6rem; font-weight: 600; line-height: 1.45;
}

/* ---------- แถวปุ่ม/ชิปที่เลื่อนข้างในแถวของตัวเอง (ใช้ได้ทุกหน้า) ---------- */
/* รอบ 98: overflow-x:auto ทำให้ min-height อัตโนมัติ = 0 → ในพ่อแบบ flex คอลัมน์ที่สูงจำกัด (.fit จอคอม) แถวถูกบีบเหลือ ~3px
   (เห็นแค่ขอบบนของชิป) — สูงอย่างน้อยเท่าเนื้อหาเสมอ (ใช้ได้ทั้งพ่อแบบ flex และ grid) · :where = ไม่ทับ min-height ที่หน้าตั้งเอง
   รอบ 98: display/gap/min-height อยู่ใน :where (ความสำคัญ 0) — ไฟล์นี้โหลดท้ายสุด เดิมไปทับ display:none ของหน้า
   (เช่น แท็บที่แสดงเฉพาะมือถือ .rtqb-tabs) · หน้าที่ตั้ง display เอง (grid/inline-flex) ใช้ของหน้า */
:where(.m-scroll-row) { display: flex; gap: 8px; min-height: max-content; }
.m-scroll-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
/* หน้าแรกแพลตฟอร์ม: แถวแท็บประเภทกิจการบนมือถือเป็นแถวเลื่อนตามเดิม (site.css ตั้ง grid ไว้ก่อนใส่ m-scroll-row) */
.site-seg-list.m-scroll-row { display: flex; }
.m-scroll-row::-webkit-scrollbar { display: none; }
.m-scroll-row > * { flex: none; }

@media (max-width: 760px) {
  /* ---- ลิ้นชักเมนู ---- */
  html:has(#nav-toggle:checked), html:has(#nav-toggle:checked) body { overflow: hidden; }
  .sidebar { width: min(320px, 86vw); gap: 14px; overscroll-behavior: contain; }
  .sidebar .brand { min-height: 44px; }
  .nav-sec > summary { min-height: 48px; padding: 10px 12px; font-size: 1rem; }
  .nav a.nav-top { min-height: 48px; }
  .nav-sec > a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 44px; font-size: .97rem; }
  .who { padding: 12px 8px calc(4px + env(safe-area-inset-bottom)); }
  .who-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

  /* ---- หัวจอ: ชื่อร้าน/โรงเรียนใช้ที่ที่เหลือ ---- */
  .mobile-bar .mobile-title { flex: 1 1 auto; min-width: 0; font-size: 1.02rem; }
  .mobile-bar .theme-toggle { flex: none; }
  .topbar .branch-switch { min-width: 0; }
  .topbar .branch-switch select { min-width: 0; width: 100%; text-overflow: ellipsis; }
  .topbar .branch-switch > .tag { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- หัวหน้าแบบ .fit: ปุ่มหลายปุ่มขึ้นบรรทัดใหม่ (เดิม nowrap → ปุ่มหลุดขอบจอ) ---- */
  .fit-tools { flex-wrap: wrap; }
  .fit-tools .fit-search { flex: 1 1 200px; }
  .fit-tools > .btn, .fit-tools > a.btn { flex: 1 1 auto; }
  .fit-tools > select, .fit-tools > label { flex: 1 1 100%; min-width: 0; }

  /* ---- ช่องกรอกที่ตัวเล็กกว่า 16px → iOS ซูมเองตอนแตะ ---- */
  .fit-search input, .rc-tsearch input, .fitl-filters .field.inline input, .fitl-filters .field.inline select,
  .sc-pad-note input, .toolbar input:not([type="checkbox"]):not([type="radio"]), .toolbar select,
  .fit-tools input:not([type="checkbox"]):not([type="radio"]), .fit-tools select, .mdl-body select, .drw-body select { font-size: 16px; }

  /* ---- ตารางแบบการ์ด: ชื่อสินค้า/ข้อความยาวตัดบรรทัดในการ์ด ไม่ล้นขอบ ---- */
  .table.cards td { min-width: 0; }
  .table.cards td > * { min-width: 0; }
  .table.cards .product-cell { display: flex; min-width: 0; max-width: 100%; }
  .table.cards .product-cell > span, .table.cards .product-cell small { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
  .table.cards .product-cell .lot-badge { max-width: 100%; white-space: normal; }

  /* ---- ตารางกว้าง (ไม่ใช่การ์ด): เลื่อนข้างในกรอบเท่านั้น + คอลัมน์แรกติดซ้ายเมื่อใส่ .m-sticky-first ---- */
  .table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .m-sticky-first tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }

  /* ---- ทางลัดหน้าแรกโรงเรียน: ปุ่มใหญ่กดง่าย 2 คอลัมน์ ---- */
  .sdb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sdb-act { min-height: 48px; border-radius: 14px; }
}