/* =====================================================================
   รอบ 28: โครงหน้า "หน้าเดียวจบ" ใช้ร่วมทุกหน้าหลังร้าน (แบบเดียวกับหน้าพิมพ์ฉลาก)
   จอคอม (≥1025px): เนื้อหาเต็มความกว้าง, หัวหน้าอยู่กับที่, ตาราง/รายการเลื่อนในกรอบของตัวเอง
   มือถือ/แท็บเล็ต: เลื่อนทั้งหน้าตามปกติ (การ์ด) แต่หัวกระชับขึ้น

   โครง:
   <div class="fit">
     <div class="page-head fit-head">            หัว: ชื่อหน้า ซ้าย | .fit-tools ขวา (ค้นหา, ตัวกรอง, ปุ่ม)
     <div class="fit-stats">                     (ถ้ามี) การ์ดตัวเลขสรุปแถวเดียว
     <div class="toolbar fit-bar">               (ถ้ามี) ตัวกรองแถวที่สอง
     <div class="fit-body">                      ส่วนที่เหลือเต็มความสูง
        <div class="table-wrap fit-scroll">      ตารางเลื่อนในกรอบ หัวตารางติดบน
        หรือ <div class="fit-split"> <section class="panel fit-pane"> ... <aside class="panel fit-pane fit-side"> ...
   ===================================================================== */

.fit { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fit > * { min-width: 0; }
.fit > .page-head, .fit > .toolbar, .fit > .alert, .fit > .panel, .fit > .empty { margin-bottom: 0; }
.fit-head h1 { margin: 0; }
.fit-head .context { margin: 0 0 2px; }

/* เครื่องมือด้านขวาของหัว */
.fit-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.fit-count { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }

/* ช่องค้นหาแบบเม็ดยา */
.fit-search {
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; width: 280px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted);
}
.fit-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.fit-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); padding: 8px 0; }
.fit-search svg { flex: none; }
.fit-tools .fit-search { min-width: 0; }

/* แถบตัวเลขสรุป */
.fit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.fit-stat { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fit-stat span { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-stat strong { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-stat.hl strong { color: var(--brand-strong, var(--brand)); }

/* ตัวกรองแถวที่สอง */
.fit-bar { margin: 0; align-items: center; }

/* เนื้อหา */
.fit-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fit-body > .panel, .fit-body > .table-wrap, .fit-body > .empty { margin-bottom: 0; }
.fit-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; min-width: 0; }
.fit-split.left { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
.fit-split > * { min-width: 0; margin-bottom: 0; }
.fit-pane { display: flex; flex-direction: column; min-width: 0; }
.fit-pane > h2:first-child, .fit-pane-head { margin: 0 0 10px; }
.fit-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.fit-pane-head h2 { margin: 0; font-size: 1.02rem; }

/* หน้าฟอร์ม/ตั้งค่า: การ์ดเรียงหลายคอลัมน์ใช้พื้นที่เต็ม */
.fit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.fit-cards > .panel { margin: 0; max-width: none; }

/* ตาราง: หัวติดบนเวลาเลื่อน */
.fit-scroll .table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.fit-empty-filter { padding: 28px 16px; text-align: center; color: var(--muted); }

/* ---------- จอคอม: ทั้งหน้าพอดีจอ ---------- */
@media screen and (min-width: 1025px) {
  .content { max-width: none; }
  .main:has(.content > .fit) { overflow: hidden; display: flex; flex-direction: column; }
  .content:has(> .fit) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 20px 24px; }
  /* รอบ 98: หน้า .fit ที่เนื้อหายาวกว่าจอ (ไม่มี .fit-body เลื่อนในกรอบ เช่น หน้าตั้งค่า/KPI) เดิมถูก .main (overflow hidden) ตัดทิ้ง
     เลื่อนไม่ได้ → ให้ .content เลื่อนเองเมื่อเนื้อหาล้น (หน้าที่พอดีจออยู่แล้วไม่เปลี่ยน) */
  .content:has(> .fit) { overflow: hidden auto; overscroll-behavior: contain; padding-bottom: 0; }
  /* ระยะล่างแทน padding-bottom ของ .content: เนื้อหาที่ล้น .fit ไม่นับ padding ของพ่อ → การ์ดสุดท้ายชิดขอบจอตอนเลื่อนสุด
     ชิ้นว่างนี้ (gap 14 + 6 = 20px เท่า padding เดิม) อยู่ในระยะเลื่อนเสมอ · หน้าที่พอดีจอเห็นเท่าเดิม */
  .content > .fit::after { content: ""; flex: none; height: 6px; }
  .content > .fit { flex: 1 1 auto; min-height: 0; }
  .fit > .page-head, .fit > .fit-stats, .fit > .toolbar, .fit > .alert, .fit > .segmented, .fit > .tabs { flex: none; }
  /* รอบ 98: ลูกตรงของ .fit (หัว/แท็บ/ชิป/ตัวกรอง/แถบเตือน/การ์ด) และลูกของ .fit-body.scroll ไม่หด — กล่องที่มี overflow
     (แถวเลื่อนข้าง ฯลฯ) เดิมหดได้ถึง 0 · ยกเว้นส่วนที่ตั้งใจเลื่อนในกรอบ (.fit-body / .fit-split / .fit-scroll)
     :where = ความสำคัญ 0 → หน้าที่ตั้ง flex ของตัวเองไว้ (เช่น ให้ยืด/หดเพื่อเลื่อนในกรอบ) ยังใช้ของหน้า */
  :where(.fit > :not(.fit-body, .fit-split, .fit-scroll)) { flex-shrink: 0; }
  :where(.fit-body.scroll > :not(.fit-scroll, .fit-split)) { flex-shrink: 0; }
  /* ส่วนที่เลื่อนในกรอบไม่บีบจนเหลือแถบเตี้ย ๆ เมื่อมีของอยู่ข้างบนมาก — ไม่พอ = ทั้งหน้าเลื่อนแทน */
  .fit-body { flex: 1 1 auto; min-height: min(280px, 50vh); }
  .fit-body > .fit-scroll, .fit-body > .table-wrap.fit-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; align-self: stretch; }
  .fit-body > .fit-scroll:has(> .table) { align-content: start; }
  .fit-split { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .fit-split > .fit-pane { min-height: 0; overflow: hidden; }
  .fit-pane > .fit-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px; }
  /* หน้าฟอร์ม: ทั้งก้อนเลื่อนในกรอบ (หัวอยู่กับที่) */
  .fit-body.scroll { overflow: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 8px; }
}

/* แท็บเล็ต */
@media (max-width: 1024px) {
  .fit-split, .fit-split.left { grid-template-columns: minmax(0, 1fr); }
}

/* มือถือ */
@media (max-width: 760px) {
  .fit { gap: 10px; }
  .fit-head { gap: 10px; }
  .fit-head .context { display: none; }
  .fit-tools { width: 100%; justify-content: stretch; flex-wrap: nowrap; }
  .fit-tools .fit-search { flex: 1 1 auto; width: auto; }
  .fit-tools > .btn { flex: none; }
  .fit-count { display: none; }
  .fit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fit-stat { padding: 10px 12px; }
  .fit-stat strong { font-size: 1.05rem; }
  .fit-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}