/* ============================================================
   clinic-ui-7.css — ชั้นที่ 7 (โหลดท้ายสุด)
   (เดิมชื่อ clinic-ui-6.css — ย้ายเลขเพราะดีไซเนอร์ส่ง ui-6 ของตัวเองมารอบ 4)
   ------------------------------------------------------------
   จุดประสงค์ 2 อย่าง
   1) "การตีกรอบ" — ปรับการ์ด กล่อง ตาราง ปุ่ม ให้ตรงกับต้นแบบ
      (อ้างอิง design.md §4 + ค่าจริงในไฟล์ Prototype)
   2) เปลี่ยนหน้าให้ลื่นไหล ไม่กระพริบ เหมือนแอป

   ทุกอย่างในไฟล์นี้อยู่ใน @media screen — งานพิมพ์ไม่ถูกแตะ
   ============================================================ */

@media screen {

/* ── 1. ความกว้างหน้า ─────────────────────────────────────
   ต้นแบบ: max-width:1320px; margin:20px auto; padding:0 22px   */
.container { max-width: 1320px; padding: 0 22px; }


/* ── 2. การ์ด ─────────────────────────────────────────────
   ต้นแบบ: background:#fff; border:1px solid #e6e9dd;
           border-radius:14px; padding:16px 18px;  ไม่มีเงา
   ระยะห่างระหว่างการ์ดมาจาก gap ของตัวแม่ ไม่ใช่ margin ของการ์ด */
.card {
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: none;
}
.card h2 { font-size: 16px; font-weight: 600; margin-bottom: 10px; letter-spacing: 0; }
.card h3 { font-size: 14px; font-weight: 600; margin: 13px 0 7px; }

/* ไม่ให้เกิดช่องว่างเกินที่ก้นการ์ด */
.card > :last-child:not(.action-bar):not(.card-foot) { margin-bottom: 0; }

/* การ์ดใบสุดท้ายในคอลัมน์ ไม่ต้องเว้นท้าย */
.work-2 > * > .card:last-child,
.work-3 > * > .card:last-child,
.row .col > .card:last-child { margin-bottom: 0; }

/* หัวการ์ดแบบมีคำอธิบายต่อท้าย (ต้นแบบใช้บ่อย) */
.card-head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.card-head h2 { margin-bottom: 0; }
.card-head .sub { font-size: 12.5px; color: var(--muted); }
.card-head .acts { margin-left: auto; display: flex; gap: 7px; }

/* แถบหัว/ท้ายที่ติดขอบการ์ด — ตามระยะใหม่ 16/18 */
.sticky-head { padding: 13px 16px; margin: -16px -18px 14px; }
.action-bar  { padding: 12px 16px; margin: 14px -18px -16px; }


/* ── 2b. แถบชื่อหน้า ──────────────────────────────────────
   ต้นแบบ: background:#fff; border-bottom:1px solid #e6e9dd;
           padding:14px 22px; position:sticky; top:0; z-index:5
           ชื่อ 19px/700/-.2px · คำบรรยาย 12.5px #6f7566
           ปุ่ม padding:9px 16px; radius:10px; 13.5px; min-height:40px   */
.page-head {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 14px 22px; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; position: sticky; top: 0; z-index: 5;
}
.page-head .t { font-size: 19px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; }
.page-head .s { font-size: 12.5px; color: var(--muted); }
.page-head .s:empty { display: none; }
.page-head .acts { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.page-head .acts button {
  padding: 9px 16px; border-radius: 10px; font-size: 13.5px; min-height: 40px;
}
.page-head .acts button.ghost {
  background: #fff; color: var(--text); border: 1px solid #d9ddcf; font-weight: 500;
}
.page-head .acts button.ghost:hover { background: #f4f6ee; border-color: #c3c9b4; }
.page-head .acts button.primary { background: var(--primary); color: #fff; border: 1px solid transparent; font-weight: 600; }
.page-head .acts button.primary:hover { background: var(--primary-dark); }
/* มีแถบชื่อหน้าแล้ว หัวการ์ดใบแรกไม่ต้องเว้นบนอีก */
.page-head + .container { margin-top: 20px; }
/* หัวชีทในห้องตรวจก็ sticky เหมือนกัน ต้องหลบใต้แถบชื่อหน้า ไม่งั้นทับกัน */
body:has(.page-head) .sticky-head { top: 62px; }
@media (max-width: 760px) {
  .page-head { padding: 11px 12px; gap: 10px; }
  .page-head .t { font-size: 17px; }
  .page-head .acts { width: 100%; margin-left: 0; }
  .page-head .acts button { flex: 1; justify-content: center; }
  body:has(.page-head) .sticky-head { top: 0; }   /* จอแคบ แถบชื่อหน้าเลื่อนหนีไปแล้ว */
}


/* ── 2c. หน้าตั้งค่า — เมนูซ้าย + แสดงทีละหมวด ────────────
   ต้นแบบ: กรอบนอก grid gap:16 align-items:start
           เมนู = การ์ด padding:10 max-width:250
           ลิงก์ = padding:11px 13px; radius:10; 13.5px; margin-bottom:2
           ฝั่งเนื้อหา = flex column gap:16                              */
.set-wrap {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: 16px; align-items: start;
}
.set-nav { padding: 10px; margin-bottom: 0; position: sticky; top: 78px; }
.set-nav a {
  display: block; padding: 11px 13px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  margin-bottom: 2px; text-decoration: none;
}
.set-nav a:last-child { margin-bottom: 0; }
.set-nav a:hover { background: #f4f6ee; color: var(--text); }
.set-nav a.on { background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; }
.set-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-body > .card { margin-bottom: 0; }

/* แถวจุดแจ้งเตือน */
.alert-row {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.alert-row:last-child { border-bottom: 0; }
.alert-row .tx { flex: 1; min-width: 200px; }
.alert-row .tx .l { font-size: 14px; font-weight: 500; }
.alert-row .tx .s { font-size: 12px; color: var(--muted); }
.alert-row input {
  width: 82px; padding: 9px 11px; border-radius: 9px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.alert-row .u { font-size: 12.5px; color: var(--muted); width: 52px; }

@media (max-width: 900px) {
  .set-wrap { grid-template-columns: 1fr; }
  .set-nav { position: static; }
  /* รายละเอียดแถบเลื่อนแนวนอน อยู่ในบล็อก "จัดเมนูให้เรียบร้อย" ท้ายไฟล์ */
}


/* ── 3. กล่องย่อยในการ์ด ──────────────────────────────────
   ต้นแบบแยกชัดเป็น 2 แบบ
   ก) "แผงย่อย" = พื้นครีม #fbfcf8 + ขอบ #e6e9dd + radius 11
   ข) "แถวรายการ" = ไม่มีกรอบ มีแค่เส้นคั่นล่าง #f0f2ea
   ที่ผ่านมาเราใช้แบบ (ก) กับทุกอย่าง เลยดูกล่องซ้อนกล่อง     */
.stat,
.usage-box,
.panel,
.subbox {
  background: #fbfcf8;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 13px;
}
.stat { padding: 12px 14px; }

/* แถวรายการ — ใช้กับคิว ประวัติ รายการย่อยต่าง ๆ */
.list-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: #fafbf6; }
.list-row.active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
.list-wrap { margin: 0 -10px; }


/* ── 4. คิวและประวัติ — เลิกตีกรอบทีละแถว ─────────────────
   (ทับสไตล์ที่ฝังอยู่ในหน้า doctor.html / pharmacy.html)      */
.queue-item {
  padding: 11px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 0;
  transition: background .12s;
}
.queue-item:last-child { border-bottom: 0; }
.queue-item:hover { background: #fafbf6; }
.queue-item.active {
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}
.hist-item {
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
}
.hist-item:last-child { border-bottom: 0; }
.hist-item:hover { background: #fafbf6; }


/* ── 5. ตาราง ─────────────────────────────────────────────
   ต้นแบบครอบตารางด้วยกรอบ radius 11 + overflow:hidden
   th: padding 8px 10px  ·  td: padding 11px 10px            */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: 11px;
  overflow: hidden;
  overflow-x: auto;
}
.table-wrap > table { margin: 0; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 13px; }
.table-wrap th:last-child,  .table-wrap td:last-child  { padding-right: 13px; }

th { padding: 8px 10px; }
td { padding: 11px 10px; }
.table-wrap thead th { background: #fbfcf8; }


/* ── 6. ปุ่ม ──────────────────────────────────────────────
   design.md §4: ปุ่ม radius 10px, สูงอย่างน้อย 42px
   ต้นแบบ หลัก  #4b5320 / เขียวยืนยัน #3f6212  ขอบใส
          รอง   พื้นขาว ขอบ #d9ddcf ตัวหนังสือ #1f2419
          จาง   พื้นขาว ขอบ #d9ddcf ตัวหนังสือ #6f7566 radius 9 */
button, .btn { border-radius: 10px; font-weight: 600; }
.btn-outline, .btn-gray { font-weight: 500; }
.btn-gray { border-radius: 9px; padding: 8px 13px; }
.btn-sm { border-radius: 9px; font-weight: 500; }
.chip { border-radius: 99px; }


/* ── 7. ช่องกรอก ──────────────────────────────────────────
   ต้นแบบ: padding:10px 12px; border:1px solid #d9ddcf;
           border-radius:10px; font-size:14.5px               */
input, select, textarea { border-radius: 10px; }


/* ── 8. ป้ายสถานะ / โมดัล ─────────────────────────────────
   design.md §4: ป้าย radius 99px · โมดัล radius 16px
                 เงาโมดัล 0 18px 48px rgba(31,36,25,.30)      */
.badge { border-radius: 99px; }
.modal {
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(31,36,25,.30);
}


/* ── 9. กันปุ่มสีจางจนมองไม่เห็น ─────────────────────────
   ปุ่มปกติเป็นเขียวเข้มตัวหนังสือขาว ถ้าที่ไหนเปลี่ยนพื้นเป็นสีอ่อน
   แล้วลืมเปลี่ยนสีตัวอักษร จะกลายเป็นขาวบนขาว — ดักไว้ตรงนี้ */
button.pipe-card, .pipe-card,
button.chip, .tabs button, .steps button,
.queue-filter button, .quick a, .btn-outline, .btn-gray {
  color: var(--text);
}
.btn-gray { color: var(--muted); }
.steps button, .queue-filter button { color: var(--muted); }
.steps button.on, .queue-filter button.on { color: #fff; }
.tabs button.on { color: #fff; }


/* ── 10. ระยะห่างการ์ด ────────────────────────────────────
   ต้นแบบให้ "ตัวแม่" เป็นคนคุมระยะ (flex column + gap:16px)
   ไม่ใช่ให้การ์ดแต่ละใบถือ margin ของตัวเอง
   ของเดิมใช้ margin-bottom ทำให้บางจุดห่างซ้อนกัน บางจุดชิดติดกัน
   (เช่น แถวการ์ดสรุปกับแถวถัดไปในหน้าหลัก เว้นระยะเป็นศูนย์)     */
.row > .col,
.work-2 > *,
.work-3 > * {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.row > .col > .card,
.work-2 > * > .card,
.work-3 > * > .card,
.row > .col > .stat { margin-bottom: 0; }

.container > .row { margin-bottom: 16px; }
.container > .row:last-child,
.container > .row:only-child { margin-bottom: 0; }


/* ── 11. จอมือถือ ─────────────────────────────────────────
   ต้องประกาศซ้ำในไฟล์นี้ ไม่งั้นกฎด้านบนจะไปทับของเดิมบนมือถือ */
@media (max-width: 760px) {
  .container { padding: 0 12px; }
  /* ปุ่มต้องสูงพอให้นิ้วแตะ — ของเดิมตั้งไว้ที่ 720px ทำให้ช่วง 721-760px หลุดเกณฑ์ */
  button, .btn { min-height: 44px; padding: 10px 14px; }
  .btn-sm, a.btn-sm, button.btn-sm { min-height: 40px; }
  .row > .col, .work-2 > *, .work-3 > * { gap: 12px; }
  .container > .row { margin-bottom: 12px; }
  .card { padding: 14px; border-radius: 12px; }
  .sticky-head { margin: -14px -14px 12px; padding: 11px 14px; }
  .action-bar  { margin: 12px -14px -14px; padding: 11px 14px; }
  .card > :last-child:not(.action-bar):not(.card-foot) { margin-bottom: 0; }
  th { padding: 8px 7px; }
  td { padding: 10px 7px; }
  .table-wrap th:first-child, .table-wrap td:first-child { padding-left: 10px; }
  .table-wrap th:last-child,  .table-wrap td:last-child  { padding-right: 10px; }
}

} /* /@media screen */


/* ============================================================
   เปลี่ยนหน้าให้ลื่นไหล ไม่กระพริบ
   ============================================================ */

@media screen {
  /* กันจอขาววาบตอนสลับหน้า — ให้พื้นหลังเป็นสีเดิมตั้งแต่ก่อนวาด */
  html { background: var(--bg); }

  /* ค่อย ๆ ปรากฏ แทนที่จะกระตุกขึ้นมาทั้งหน้า */
  body { animation: pg-in .16s ease-out both; }
  @keyframes pg-in { from { opacity: 0; } to { opacity: 1; } }

  /* เลื่อนหน้าแบบนุ่ม (กดลิงก์สมอ / กลับขึ้นบน) */
  html { scroll-behavior: smooth; }

  /* เนื้อหาที่โหลดทีหลัง ค่อย ๆ โผล่แทนกระพริบ */
  .fade-in { animation: pg-in .18s ease-out both; }

  /* เบราว์เซอร์ที่ทำ View Transitions ได้ (Chrome/Edge) ใช้ของมันอย่างเดียว
     จะได้ไม่เฟดซ้อนกันสองชั้น */
  @supports (view-transition-name: none) {
    body { animation: none; }
  }
}

@media screen {
  /* ช่องใส่แท็บ ให้ลูกไปเรียงใน nav โดยตรง (แถบนำทางจะได้วาดครบตั้งแต่เฟรมแรก) */
  nav #navTabs { display: contents; }

  /* แถบความคืบหน้าเส้นบาง ๆ ด้านบน ตอนกำลังไปหน้าใหม่ */
  #navProgress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, #cfd6a6, #8ca33c);
    z-index: 999; pointer-events: none; border-radius: 0 3px 3px 0;
  }
  #navProgress.run { animation: np-run 2.4s cubic-bezier(.2,.8,.3,1) forwards; }
  #navProgress.done { width: 100%; opacity: 0; transition: width .12s, opacity .22s .1s; animation: none; }
  @keyframes np-run {
    0%   { width: 0; }
    30%  { width: 42%; }
    65%  { width: 72%; }
    100% { width: 92%; }
  }
}

/* ============================================================
   โหมดมือถือ — แถบล่างแบบแอป
   บนคอมซ่อนทั้งหมด · บนมือถือใช้แทนแท็บบนแถบบน
   ============================================================ */
.bottombar, .bb-sheet { display: none; }

@media screen and (max-width: 760px) {
  /* แถบบนเหลือแค่ชื่อคลินิก + ชื่อผู้ใช้ — แท็บย้ายลงข้างล่างหมด */
  nav a.tab, nav .nav-more, nav .nav-search { display: none !important; }
  nav { padding: 0 10px; }
  nav .nav-right { font-size: 12.5px; }
  nav .nav-right button { padding: 6px 11px; }

  body.has-bottombar { padding-bottom: 68px; }

  .bottombar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--border);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(31,36,25,.07);
  }
  .bottombar > a, .bottombar > button {
    background: none; border: 0; box-shadow: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 6px 2px; min-height: 56px;
    color: var(--muted); font-size: 11.5px; font-weight: 500;
    text-decoration: none; position: relative; border-radius: 10px;
  }
  .bottombar > a:hover, .bottombar > button:hover { background: #f4f6ee; color: var(--text); }
  .bottombar .ic { font-size: 20px; line-height: 1.1; }
  .bottombar .tx { line-height: 1.2; }
  .bottombar > a.on { color: var(--primary-dark); font-weight: 700; background: var(--primary-soft); }
  /* ตัวเลขงานค้าง */
  .bottombar .n {
    position: absolute; top: 3px; left: 50%; margin-left: 6px;
    background: var(--danger); color: #fff; border-radius: 99px;
    min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px; font-weight: 700;
    display: grid; place-items: center; font-variant-numeric: tabular-nums;
  }
  .bottombar .pin {
    position: absolute; top: 7px; left: 50%; margin-left: 8px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
  }

  /* แผ่นเมนูเลื่อนขึ้นจากด้านล่าง */
  .bb-sheet { display: block; position: fixed; inset: 0; z-index: 70; }
  .bb-sheet[hidden] { display: none; }
  .bb-backdrop {
    position: absolute; inset: 0; background: rgba(24,28,18,.45);
    opacity: 0; transition: opacity .2s;
  }
  .bb-sheet.open .bb-backdrop { opacity: 1; }
  .bb-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #fff; border-radius: 16px 16px 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    max-height: calc(86vh / var(--zf, 1)); overflow-y: auto;
    transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.3,1);
    box-shadow: 0 -18px 48px rgba(31,36,25,.30);
  }
  .bb-sheet.open .bb-panel { transform: translateY(0); }
  .bb-grab { width: 42px; height: 4px; border-radius: 99px; background: #d9ddcf; margin: 4px auto 12px; }
  .bb-who { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
  .bb-panel #bbSearch { margin-bottom: 8px; }
  .bb-results:not(:empty) {
    border: 1px solid var(--border); border-radius: 11px;
    margin-bottom: 12px; overflow: hidden;
  }
  .bb-res {
    width: 100%; background: #fff; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; text-align: left; color: var(--text); min-height: 52px;
  }
  .bb-res:last-child { border-bottom: 0; }
  .bb-res:hover { background: #fafbf6; }
  .bb-res .av {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
    background: var(--primary-soft); display: grid; place-items: center; font-size: 15px;
  }
  .bb-res .tx { flex: 1; min-width: 0; display: block; }
  .bb-res .tx b { display: block; font-size: 14.5px; }
  .bb-res .tx span { display: block; font-size: 12px; color: var(--muted); }
  /* เช็คสต๊อกจากช่องค้นหาได้เลย — ตัวเลขคงเหลือเด่นขึ้นเมื่อของใกล้หมด */
  .bb-res .tx .q { display: inline; font-size: 12px; color: var(--text); font-weight: 700; }
  .bb-res .tx .q.low { color: var(--amber-ink, #8a4108); }
  .bb-res .tx .q.out { color: var(--danger-ink, #8f1a1a); }

  /* แถบปุ่มท้ายชีท ต้องลอยเหนือแถบล่าง ไม่งั้นโดนบัง */
  body.has-bottombar .action-bar { bottom: 68px; }

  /* ปฏิทินไทยบนมือถือ — ช่องวันที่ต้องใหญ่พอให้นิ้วแตะ */
  .be-cal { padding: 14px; }
  .be-cal-grid { gap: 3px; }
  .be-cal-grid button { min-height: 42px; font-size: 15px; }
  .be-cal-dow span { padding: 5px 0; }
  .be-cal-head .nav { width: 40px; height: 40px; min-height: 40px; font-size: 17px; }
  .be-cal-head .title { font-size: 15.5px; padding: 8px 0; }
  .be-cal-foot button { min-height: 42px; font-size: 13.5px; }
  .be-cal-years button { min-height: 42px; }

  .bb-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bb-links a {
    display: flex; align-items: center; gap: 9px; position: relative;
    padding: 13px 12px; min-height: 52px;
    border: 1px solid var(--border); border-radius: 11px;
    color: var(--text); font-size: 14px; font-weight: 500;
  }
  .bb-links a .ic { font-size: 17px; }
  .bb-links a.on { background: var(--primary-soft); border-color: #c8cfa8; font-weight: 700; }
  .bb-links a .n {
    margin-left: auto; background: var(--danger); color: #fff;
    border-radius: 99px; padding: 1px 7px; font-size: 11px; font-weight: 700;
  }
  .bb-acts { display: flex; gap: 8px; margin-top: 14px; }
  .bb-acts > * { flex: 1; justify-content: center; }

  /* ---- ตารางกว้าง → การ์ด (app.js ติดป้าย data-label ให้) ---- */
  .m-cards { border-collapse: separate; border-spacing: 0; }
  .m-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .m-cards tbody tr {
    display: block; background: #fff;
    border: 1px solid var(--border); border-radius: 11px;
    padding: 10px 12px; margin-bottom: 9px;
  }
  .m-cards tbody tr:last-child { margin-bottom: 0; }
  .m-cards tbody tr:hover { background: #fff; }
  .m-cards tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 4px 0; border: 0; text-align: left; font-size: 14px;
  }
  .m-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 500;
  }
  .m-cards tbody td:not([data-label])::before { content: none; }
  /* ช่องแรกของการ์ด = หัวเรื่อง ตัวใหญ่หน่อย ไม่ต้องมีป้าย */
  .m-cards tbody td:first-child {
    font-size: 15.5px; font-weight: 700; padding-bottom: 7px;
    margin-bottom: 5px; border-bottom: 1px solid var(--line);
  }
  .m-cards tbody td:first-child::before { font-weight: 500; }
  /* ช่องที่มีแต่ปุ่ม ให้ปุ่มเต็มความกว้าง */
  .m-cards tbody td:not([data-label]) { justify-content: flex-start; flex-wrap: wrap; gap: 7px; padding-top: 8px; }
  .m-cards tbody td.num { font-variant-numeric: tabular-nums; }
  /* ตารางที่เป็นการ์ดแล้ว ไม่ต้องมีกรอบซ้อนอีกชั้น */
  .table-wrap:has(.m-cards) { border: 0; border-radius: 0; overflow: visible; }

  /* ---- ห้องตรวจ: ตารางสั่งยา → การ์ดคีย์ด้วยนิ้วได้ ----
     (ตารางนี้มีช่องกรอก ตัวช่วยอัตโนมัติจึงข้าม — จัดมือเองตรงนี้) */
  #rxTable { border-collapse: separate; border-spacing: 0; }
  #rxTable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #rxTable tbody tr {
    display: block; background: #fff;
    border: 1px solid var(--border); border-radius: 12px;
    padding: 11px 12px; margin-bottom: 10px;
  }
  #rxTable tbody tr.row-short { border-color: #f4cccc; background: var(--danger-soft); }
  #rxTable tbody tr.row-short td { background: transparent; }
  #rxTable tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 0; border: 0; font-size: 14px;
  }
  #rxTable tbody td::before {
    content: attr(data-label); color: var(--muted); font-size: 12.5px; flex: 0 0 auto;
  }
  #rxTable tbody td[data-label="รายการ"] {
    display: block; font-size: 15px; font-weight: 600;
    padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  }
  #rxTable tbody td[data-label="รายการ"]::before { content: none; }
  #rxTable tbody td[data-label="รวม"] { font-size: 16px; font-weight: 700; }
  #rxTable tbody td input[type=number] { width: 88px; text-align: center; min-height: 44px; font-size: 15px; }
  #rxTable .qty-box input { width: 62px; border: 0; box-shadow: none; padding: 0; }
  #rxTable .rx-usage { text-align: right; }
  #rxTable .rx-del { padding-top: 10px; }
  #rxTable .rx-del::before { content: none; }
  #rxTable .rx-del button { width: 100%; min-height: 44px; }
  #rxTable .rx-del .x { display: none; }
  #rxTable tfoot { display: block; }
  #rxTable tfoot tr { display: flex; justify-content: space-between; padding: 10px 2px 0; border-top: 1.5px solid var(--border); }
  #rxTable tfoot th { padding: 0; border: 0; font-size: 15px; }
  #rxTable tfoot th:empty { display: none; }
  #rxTable tbody tr > td:last-child:not([data-label]) { justify-content: stretch; }

  /* ---- คลังยา: ซ่อนช่องติ๊กเลือกหลายรายการ (ไม่ใช่งานที่ทำบนมือถือ) ---- */
  #itemTable th:first-child, #itemBody td:first-child,
  table:has(#itemBody) th:first-child, table:has(#itemBody) td:first-child { display: none; }
}

/* ปุ่ม +/− จำนวน — โผล่เฉพาะมือถือ บนคอมตารางยังแน่นเหมือนเดิม */
.qty-box { display: inline-flex; align-items: center; }
.qty-box .qs { display: none; }
@media screen and (max-width: 760px) {
  .qty-box {
    gap: 3px; border: 1px solid #d9ddcf; border-radius: 10px;
    padding: 2px 3px; background: #fff;
  }
  .qty-box .qs {
    display: grid; place-items: center;
    width: 40px; height: 40px; min-height: 40px; padding: 0;
    background: #f4f6ee; color: var(--text); border: 1px solid var(--border);
    border-radius: 8px; font-size: 19px; font-weight: 700; line-height: 1;
  }
  .qty-box .qs:hover { background: var(--primary-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-panel, .bb-backdrop { transition: none !important; }
}

/* ---- ลำดับการซ้อนของทุกอย่างที่ลอยอยู่ ----
   เดิมโมดัลอยู่ที่ 50 ซึ่งต่ำกว่าแถบล่างมือถือ (60)
   ทำให้แถบล่างบังปุ่มท้ายโมดัล — จัดลำดับใหม่ทั้งชุดให้ชัดเจน
     แถบล่าง 60 · เมนูมือถือ 70 · โมดัล 80 · ยืนยันลบ 82
     QR เต็มจอ 84 · toast 90-99 · แถบโหลด 999                 */
@media screen {
  .modal-bg       { z-index: 80; }
  .confirm-bg     { z-index: 82; }
  .qr-fullscreen  { z-index: 84; }
  .toast-undo     { z-index: 90; }
}
@media screen and (max-width: 760px) {
  /* toast ต้องไม่ไปโผล่ใต้แถบล่าง */
  body.has-bottombar #toast { bottom: 84px; }
  body.has-bottombar .toast-undo { bottom: 80px; }
  /* เปิดโมดัล/เมนูอยู่ ให้แถบล่างหลบไปก่อน */
  body:has(.modal-bg.open) .bottombar,
  body:has(.confirm-bg.open) .bottombar,
  body:has(.qr-fullscreen.open) .bottombar { display: none; }
}


/* ---- View Transitions: สลับหน้าแบบข้ามเอกสาร (Chrome/Edge) ----
   ทุกหน้าโหลด CSS ชุดนี้เหมือนกัน จึงเปิดใช้ได้ทั้งขาออกและขาเข้า */
@view-transition { navigation: auto; }

@media screen {
  ::view-transition-old(root) {
    animation: vt-out .13s ease-in both;
  }
  ::view-transition-new(root) {
    animation: vt-in .19s ease-out both;
  }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(6px); } }

  /* แถบนำทางอยู่นิ่ง ไม่ต้องเฟดตาม ทำให้รู้สึกเป็นแอปเดียว
     ⚠️ view-transition-name ทำให้ nav กลายเป็น "ชั้นซ้อนของตัวเอง"
        เมนูที่กางลงมาข้างใน (เพิ่มเติม / ผลค้นหา) จึงถูกจำกัดอยู่ในชั้นของ nav
        ต้องยก nav ขึ้นเหนือแถบชื่อหน้า ไม่งั้นหัวเมนูจะโดนแถบชื่อหน้าทับ */
  nav#topnav { view-transition-name: cl-nav; position: relative; z-index: 40; }
  ::view-transition-group(cl-nav) { animation-duration: .12s; }
  ::view-transition-old(cl-nav),
  ::view-transition-new(cl-nav) { animation: none; mix-blend-mode: normal; }
}

/* ── ตัวกรองประเภทคนไข้ในทะเบียน ─────────────────────────────────
   หลังย้ายข้อมูลเก่าเข้ามา ทะเบียนมีสามหมื่นกว่าคน ปุ่มกรองช่วยให้หาคนไข้จริงเจอเร็วขึ้น */
.pt-filter { display: flex; }
.pt-filter button { flex: 0 0 auto; padding: 5px 11px; min-height: 32px; font-size: 12px; }
.pt-filter button .muted { font-size: 11px; margin-left: 3px; }
.pt-filter button.on .muted { color: rgba(255,255,255,.75); }

/* ── ป้ายบอกสาขา + ตัวสลับสาขาบนแถบนำทาง ─────────────────────────
   แต่ละสาขาใช้ข้อมูลคนละชุด ป้ายนี้จึงต้องเห็นตลอดเวลา
   จะได้ไม่เผลอคีย์คนไข้หรือรับของเข้าผิดสาขา                            */
.branch-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.16); color: #fff;
  border: 0; border-radius: 99px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  white-space: nowrap; margin-right: 8px; min-height: 0;
}
.branch-chip.act { cursor: pointer; }
.branch-chip.act:hover { background: rgba(255,255,255,.28); }
.branch-sw { position: relative; display: inline-flex; }
.branch-menu {
  position: absolute; top: calc(100% + 6px); right: 8px; z-index: 47;
  min-width: 190px; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--sh-modal); padding: 6px; display: none;
  max-height: calc(calc(100vh / var(--zf, 1)) - 90px); overflow-y: auto;
}
.branch-menu.open { display: block; }
.branch-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: 13.5px; min-height: 44px;
}
.branch-menu a:hover { background: var(--primary-soft); }
.branch-menu a.active { font-weight: 700; color: var(--primary); }
.branch-menu a .ic { flex: 0 0 16px; text-align: center; font-size: 13px; }
/* บนมือถือใช้ปุ่มในแผ่นเมนูด้านล่างแทน */
.bb-branch { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 4px 10px; }
.bb-branch button {
  flex: 1; min-width: 110px; min-height: 40px;
  background: #fff; color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; font-family: inherit;
}
.bb-branch button.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
@media (max-width: 760px) { .branch-chip, .branch-sw { display: none; } }

/* ── ไอคอนของ "สถานะว่าง" ต้องไม่ลอยขึ้นไปทับเมนู ───────────────────
   เดิม .state .ic ตั้ง opacity: .8 ไว้ให้ดูจาง ๆ
   แต่ opacity ที่ไม่ถึง 1 ทำให้ element กลายเป็น "ชั้นซ้อนของตัวเอง"
   แล้วถูกวาดในรอบเดียวกับของที่ถูกจัดตำแหน่ง (z-index 0)
   ผลคือ 👈 ของการ์ด "เลือกคนไข้ก่อน" หน้าต้อนรับ ลอยทับเมนูเพิ่มเติม
   ทั้งที่ตัวหนังสือในการ์ดเดียวกันอยู่ใต้เมนูถูกต้อง
   ตัด opacity ออก ไอคอนกลับไปวาดตามลำดับปกติ ไม่ทับใครอีก
   (ยังกันอีกชั้นด้วย nav#topnav z-index: 40 ด้านบน) */
.state .ic,
.state.error .ic { opacity: 1; }

/* เคารพการตั้งค่า "ลดการเคลื่อนไหว" ของเครื่องผู้ใช้ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .fade-in { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(cl-nav),
  ::view-transition-new(cl-nav) { animation: none !important; }
  #navProgress { animation: none !important; width: 30%; }
}

/* งานพิมพ์ต้องไม่ติดอนิเมชันหรือกรอบใด ๆ */
@media print {
  body { animation: none !important; opacity: 1 !important; }
  .table-wrap { border: 0; border-radius: 0; }
}


/* ============================================================
   รอบ 4 — ส่วนที่ดีไซน์ยังไม่ได้ครอบ (ต่อจาก clinic-ui-6.css)
   ============================================================ */
@media screen {
  /* แถวนัดที่ "ยังไม่เลย" ใช้โทนกลาง ไม่ใช่โทนเตือนเหมือนแถวเลยนัด */
  .vax-late-row.soon-row {
    border: 1px solid var(--border); background: #fff;
  }
  .vax-late-row.soon-row .days { color: var(--primary-dark); }

  /* ช่องค้นหา + รายชื่อในแท็บ "รายคน" */
  .vax-person { cursor: pointer; }

  /* ป้ายบอกว่าวันนัดถูกเลื่อนเพราะคลินิกปิด */
  .vax-late-row .warn, .muted .warn { color: var(--amber-ink); font-weight: 600; }
}


/* ============================================================
   จัดเมนูให้เรียบร้อย
   ปัญหา: style.css สไตล์ "แท็ก nav" ทั้งตัว (พื้นเขียว + flex + wrap)
          เมนูอื่นในระบบที่ใช้ <nav> เลยโดนไปด้วย → รายการไหลไปต่อกันเป็นแถว
   ============================================================ */
@media screen {
  /* เมนูที่ไม่ใช่แถบบน ต้องไม่รับสไตล์ของแถบบน */
  nav.set-nav {
    display: block; background: var(--card); color: var(--text);
    align-items: initial; gap: 0; flex-wrap: initial; box-shadow: none;
    padding: 10px;
  }

  /* แถบล่างมือถือก็ใช้ <nav> — กันไม่ให้รับ gap/พื้นเขียวของแถบบน */
  nav.bottombar { gap: 0; background: #fff; color: var(--text); flex-wrap: initial; }

  /* ---- ไอคอนแยกช่อง กว้างเท่ากันทุกบรรทัด จะได้เรียงตรงกันไม่ทับข้อความ ---- */
  .set-nav a, .nav-more-menu a, .bb-links a {
    display: flex; align-items: center; gap: 10px;
  }
  .set-nav a .ic, .nav-more-menu a .ic, .bb-links a .ic {
    flex: 0 0 22px; width: 22px; text-align: center;
    font-size: 16px; line-height: 1.2; font-style: normal;
  }
  .set-nav a .tx, .nav-more-menu a .tx, .bb-links a .tx {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* เมนู "เพิ่มเติม" มี 7 รายการแล้ว — ต้องเลื่อนได้ถ้าจอเตี้ย */
  .nav-more-menu {
    max-height: calc(calc(100vh / var(--zf, 1)) - 90px); overflow-y: auto; min-width: 230px;
  }
  .nav-more-menu a { padding: 9px 11px; }
  .nav-more-menu a.active { background: var(--primary-soft); font-weight: 600; }
  .nav-more-menu a .n { flex: 0 0 auto; }

  /* ตัวเลขงานค้างไม่ควรดันข้อความ */
  .set-nav a .n, .bb-links a .n { flex: 0 0 auto; margin-left: auto; }
}

@media screen and (max-width: 900px) {
  /* จอแคบ เมนูตั้งค่าเป็นแถบเลื่อนแนวนอน — ต้องไม่ตัดบรรทัด */
  nav.set-nav {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 6px; padding: 8px; -webkit-overflow-scrolling: touch;
  }
  .set-nav a { flex: 0 0 auto; margin-bottom: 0; min-height: 42px; }
  .set-nav a .tx { overflow: visible; text-overflow: clip; }
}

/* ===== ปุ่มกากบาทปิดหน้าต่าง — openModal() ใส่ให้อัตโนมัติทุกหน้าต่าง ===== */
.modal { position: relative; }
.modal > .modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; min-width: 0; min-height: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f3f2ec; color: #3f463c; border: 1px solid #e3e1d8;
  border-radius: 50%; font-size: 15px; line-height: 1; font-weight: 600; cursor: pointer; box-shadow: none;
  transition: background .15s, color .15s, border-color .15s;
}
.modal > .modal-x:hover { background: #e7e9df; color: #16181a; border-color: #d3d6c9; }
.modal > .modal-x:active { background: #dde1d5; }
.modal > .modal-x:focus-visible { outline: 2px solid var(--primary, #0d6e4f); outline-offset: 2px; }
/* เว้นที่ให้กากบาท — แถวหัวหน้าต่าง (หัวเรื่อง/ปุ่มด้านขวา เช่น "อ่านบัตรประชาชน") ต้องไม่ไปอยู่ใต้กากบาท */
.modal > .modal-x + * { padding-right: 52px; box-sizing: border-box; }
.modal > .modal-x + * > :last-child { flex-shrink: 0; }
@media print { .modal > .modal-x { display: none; } }

/* ===== ซ่อนของที่เป็นของฟีเจอร์ที่สาขานี้ปิดไว้ =====
   ติด data-feat="ชื่อฟีเจอร์" ที่ปุ่ม/แท็บ/การ์ด แล้วมันจะหายเองเมื่อสาขานั้นไม่ได้เปิดฟีเจอร์นี้
   ใส่หลายฟีเจอร์คั่นด้วยเว้นวรรคได้ = ต้องเปิดครบทุกอันถึงจะเห็น */
body[data-feats-ready]:not([data-f-home]) [data-feat~="home"] { display: none !important; }
body[data-feats-ready]:not([data-f-reception]) [data-feat~="reception"] { display: none !important; }
body[data-feats-ready]:not([data-f-doctor]) [data-feat~="doctor"] { display: none !important; }
body[data-feats-ready]:not([data-f-pharmacy]) [data-feat~="pharmacy"] { display: none !important; }
body[data-feats-ready]:not([data-f-stock]) [data-feat~="stock"] { display: none !important; }
body[data-feats-ready]:not([data-f-purchase]) [data-feat~="purchase"] { display: none !important; }
body[data-feats-ready]:not([data-f-patients]) [data-feat~="patients"] { display: none !important; }
body[data-feats-ready]:not([data-f-appointments]) [data-feat~="appointments"] { display: none !important; }
body[data-feats-ready]:not([data-f-vaccine]) [data-feat~="vaccine"] { display: none !important; }
body[data-feats-ready]:not([data-f-labs]) [data-feat~="labs"] { display: none !important; }
body[data-feats-ready]:not([data-f-certificates]) [data-feat~="certificates"] { display: none !important; }
body[data-feats-ready]:not([data-f-reports]) [data-feat~="reports"] { display: none !important; }
body[data-feats-ready]:not([data-f-backoffice]) [data-feat~="backoffice"] { display: none !important; }
body[data-feats-ready]:not([data-f-payroll]) [data-feat~="payroll"] { display: none !important; }
body[data-feats-ready]:not([data-f-charts]) [data-feat~="charts"] { display: none !important; }
body[data-feats-ready]:not([data-f-chat]) [data-feat~="chat"] { display: none !important; }


/* ---------- กลุ่มยาที่แพ้ (เลือกได้หลายกลุ่ม) ---------- */
.al-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 8px; }
.al-pick .al-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 9px; font-size: 13px; }
.al-pick .al-x { background: transparent; color: inherit; border: 0; min-height: 0; height: 22px; width: 22px; padding: 0;
  border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: none; }
.al-pick .al-x:hover { background: rgba(0,0,0,.08); }
.al-pick .al-add { width: auto; min-width: 220px; flex: 1 1 220px; max-width: 340px; }

/* ประวัติแพ้ยาในหน้าซักประวัติ (ห้องตรวจ) */
.al-edit { border: 1px solid var(--border, #e5e2da); border-left: 4px solid #d9534f; border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; background: #fffaf9; }
.al-edit .search-box { position: relative; }

/* ห้องตรวจ: ประวัติการรักษา + รีเมด (ขั้นสั่งยา) */
.rx-hist { border: 1px solid var(--border, #e5e2da); border-radius: 10px; padding: 8px 12px; margin: 4px 0 12px; background: #fbfaf6; }
.rx-hist > summary, .vacc-fold > summary { cursor: pointer; font-weight: 700; font-size: 14.5px; padding: 4px 0; }
.rx-hist .rxh-row { border-top: 1px solid var(--border, #e5e2da); padding: 6px 0; }
.rx-hist .rxh-row:first-child { border-top: 0; }
.rx-hist .rxh-top { display: flex; gap: 8px; align-items: center; }
.rx-hist .rxh-open { flex: 1; min-width: 0; text-align: left; background: transparent; color: inherit; border: 0; box-shadow: none; padding: 4px 2px; font-weight: 400; min-height: 0; cursor: pointer; }
.rx-hist .rxh-open:hover { background: rgba(0,0,0,.04); }
.rx-hist .rxh-body { padding: 4px 4px 6px 10px; font-size: 13px; border-left: 3px solid var(--border, #e5e2da); margin: 2px 0 4px 4px; }
.vacc-fold { border: 1px solid var(--border, #e5e2da); border-radius: 10px; padding: 6px 12px; margin-top: 14px; }
/* ปุ่ม ✕ เอาคิวออก */
.queue-item .q-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%;
  background: transparent; color: #5f5a50; border: 1px solid transparent; box-shadow: none; font-size: 13px; line-height: 1; cursor: pointer; }
.queue-item .q-x:hover { background: #fdecea; color: #b42318; border-color: #f3c2bd; }

/* ปุ่ม ✕ ลบคิวในกล่อง "คิวรอตรวจวันนี้" (ต้อนรับ/หน้าหลัก) */
.qm-row1 .qm-x { flex: 0 0 auto; width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%;
  background: transparent; color: #5f5a50; border: 1px solid var(--border, #e5e2da); box-shadow: none; font-size: 13px; line-height: 1; cursor: pointer; }
.qm-row1 .qm-x:hover { background: #fdecea; color: #b42318; border-color: #f3c2bd; }

/* ไอคอนแก้ข้อมูลคนไข้ หลังชื่อในห้องตรวจ */
.pt-edit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; margin-left: 4px;
  vertical-align: middle; border-radius: 8px; background: transparent; color: #4a463e; border: 1px solid var(--border, #e5e2da); box-shadow: none; font-size: 15px; cursor: pointer; }
.pt-edit:hover { background: #f3f1ea; }

/* แถบบอกโหมดคำนวณสั่งซื้อ (คลังยา › ของใกล้หมด) */
.alert-green { background: #eaf6ee; color: #1d5a33; border: 1px solid #c4e5cf; }

/* แชทภายใน: เลือกคนไข้จากคิวให้ข้อความด่วน */
.chat-pick { margin: 0 12px 8px; padding: 8px; border: 1px solid var(--border, #e5e2da); border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.chat-pick .cp-head { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin-bottom: 6px; }
.chat-pick .cp-x { margin-left: auto; width: 28px; height: 28px; min-height: 0; padding: 0; border-radius: 50%; background: #f3f2ec; color: #3f463c; border: 1px solid #e3e1d8; box-shadow: none; cursor: pointer; }
.chat-pick .cp-search { width: 100%; margin-bottom: 6px; }
.chat-pick .cp-list { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.chat-pick .cp-row { text-align: left; background: #fbfaf6; color: inherit; border: 1px solid transparent; box-shadow: none; padding: 7px 8px; min-height: 0; font-weight: 400; font-size: 13.5px; border-radius: 8px; cursor: pointer; }
.chat-pick .cp-row:hover { background: #eef3e8; border-color: #d6e2c8; }
.chat-pick .cp-plain { width: 100%; }

/* ===== ดรอปดาวน์ที่พิมพ์ค้นหาได้ (js/select-search.js) ===== */
select.ss-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden; border: 0 !important; }
input.ss-input { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236f7566' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; cursor: pointer !important; caret-color: #1f2a1c; }
/* ชี้แล้วต้องเห็นลูกศรเมาส์ชัดๆ เหมือนดรอปดาวน์ปกติ · ตอนกำลังพิมพ์ค่อยเป็นเคอร์เซอร์ตัวหนังสือ */
input.ss-input:focus { cursor: text !important; }
input.ss-input:disabled { cursor: not-allowed !important; }
.ss-pop, .ss-pop * { cursor: pointer !important; }
.ss-pop { position: fixed; z-index: 100000; display: none; max-height: 260px; overflow-y: auto; background: #fff;
  border: 1px solid #d9d6cc; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 4px; }
.ss-pop .ss-it { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14.5px; line-height: 1.35; }
.ss-pop .ss-it.on { font-weight: 700; }
.ss-pop .ss-it.hi, .ss-pop .ss-it:hover { background: #eef3e8; }
.ss-pop .ss-none, .ss-pop .ss-new { padding: 8px 10px; color: #6b665c; font-size: 13px; }
.ss-pop .ss-new { border-top: 1px dashed #e3e1d8; }
@media print { .ss-pop { display: none !important; } }

/* ตั้งค่า › ผู้ใช้: รหัสผ่าน (ดู/ทดสอบ) */
.pw-row { display: flex; gap: 6px; align-items: center; }
.pw-row input { flex: 1; min-width: 0; }
.pw-row .btn-sm { white-space: nowrap; }
.pw-info { margin: 8px 0 4px; padding: 8px 10px; background: #f8f7f2; border: 1px solid var(--border, #e5e2da); border-radius: 9px; }

/* ===== ขนาดตัวหนังสือรายเครื่อง (ปุ่ม "กก" บนแถบเมนู · js/app.js cycleTextSize) =====
   ใหญ่ = 15 → 17px (ค่าเริ่มต้นตามบรีฟ) · ใหญ่มาก = 15 → 19px
   ใช้ zoom ทั้งหน้า: ปุ่ม/ช่องกรอก/ระยะห่างโตตามสัดส่วน ไม่ต้องแก้ทีละจุด
   --zf ใช้หักล้างหน่วย vh/vw (ไม่งั้น 100vh จะยาวเกินจอเมื่อซูม)
   จอแคบ (มือถือ) และงานพิมพ์ ไม่ซูม                                                       */
@media screen and (min-width: 900px) {
  /* ดีไซน์ใหม่: ตัวหนังสือพื้นฐาน 17px → ปกติ 16 · ใหญ่ 19 (ค่าเริ่มต้น) · ใหญ่มาก 22 */
  html[data-ts="N"]  { zoom: 0.94; --zf: 0.94; }
  html[data-ts="L"]  { zoom: 1.12; --zf: 1.12; }
  html[data-ts="XL"] { zoom: 1.29; --zf: 1.29; }
}
@media print { html { zoom: 1 !important; --zf: 1 !important; } }
/* ตัวเล็กสุดในระบบเดิม 11–12.5px → ดันขึ้นให้ ≥ 14px บนจอเมื่อซูมแล้ว */
@media screen and (min-width: 900px) {
  th { font-size: 12.5px; }
  label { font-size: 13px; }
  .badge, :where(.badge) { font-size: 12.5px; }
  .muted { font-size: 13.5px; }
}
.ts-btn { min-height: 0; padding: 4px 9px !important; font-weight: 700; line-height: 1; letter-spacing: -1px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28) !important; }
.ts-btn span { font-size: 1.3em; }
.ts-btn:hover { background: rgba(255,255,255,.26); }

/* ===== เมนู "เพิ่มเติม ▾" (js/app.js moreMenuHTML / toggleMoreDD) ===== */
.more-dd { position: relative; display: inline-flex; }
.more-dd-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 220px;
  background: #fff; border: 1px solid #d9d6cc; border-radius: 11px; box-shadow: 0 12px 30px rgba(0,0,0,.16); padding: 5px;
  flex-direction: column; gap: 2px; }
.more-dd.to-left .more-dd-menu { left: auto; right: 0; }
.more-dd.open .more-dd-menu { display: flex; }
.more-dd-menu > button, .more-dd-menu > a { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; justify-content: flex-start;
  background: transparent; color: var(--text, #1f2a1c); border: 0; box-shadow: none; border-radius: 8px;
  padding: 10px 12px; min-height: 42px; font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.more-dd-menu > button:hover, .more-dd-menu > a:hover, .more-dd-menu > button:focus-visible, .more-dd-menu > a:focus-visible { background: #eef3e8; outline: none; }
.page-head .acts .more-dd-btn { min-height: 40px; }
@media print { .more-dd { display: none !important; } }
/* การ์ดพับได้ (เช่น นัดวันนี้ที่ยังไม่มา ในหน้าต้อนรับ) */
.fold-card > summary { list-style: none; cursor: pointer; }
.fold-card > summary::-webkit-details-marker { display: none; }
.fold-card > summary h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fold-card > summary h2::before { content: "▸"; color: var(--muted, #6f7566); font-size: .9em; transition: transform .15s; }
.fold-card[open] > summary h2::before { transform: rotate(90deg); }
.fold-card[open] > summary h2 { margin-bottom: 10px; }
.fold-card .fold-hint { font-size: 12.5px; font-weight: 400; color: var(--muted, #6f7566); }
.fold-card[open] .fold-hint { display: none; }

/* คิวรอตรวจ (ต้อนรับ/หน้าหลัก): ชื่อ-นามสกุลเต็ม ไม่ย่อ · ยาวก็ขึ้นบรรทัดใหม่ */
.qm-row1 { align-items: flex-start; }
.qm-row1 > b, .qm-row1 .qm-handle, .qm-row1 .btn-sm, .qm-row1 .qm-x { margin-top: 1px; }
.qm-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; line-height: 1.35; }
.qm-name .qm-full { display: block; font-weight: 600; }
.qm-name .qm-cc { display: block; font-size: 13px; }
/* ทะเบียนคนไข้ / คิวอื่น ๆ: ห้ามตัดชื่อด้วย … */
.queue-item, .hist-item { overflow-wrap: anywhere; }

/* ป้ายแฟ้ม OPD กระดาษเดิม / คนไข้ใหม่ (js/app.js opdTag) */
.opd-tag { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  line-height: 1.6; white-space: nowrap; vertical-align: middle; background: #eef0fb; color: #33408f; border: 1px solid #d6dbf3; }
.opd-tag.new { background: #fff6e6; color: #8a4b00; border-color: #f1dcb4; }

/* ===== ผลแล็บ (ตารางผล / ประวัติผลแล็บ) ===== */
table.lab-vals { width: 100%; margin-top: 6px; font-size: 14px; border-collapse: collapse; }
table.lab-vals th { font-size: 12.5px; padding: 5px 8px; border-bottom: 1px solid var(--border); }
table.lab-vals td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.lab-vals td.v { font-weight: 700; white-space: nowrap; }
table.lab-vals tr.abn td { background: #fdecea; }
table.lab-vals tr.abn td.v { color: #b42318; }
.lab-note { margin-top: 6px; white-space: pre-wrap; font-size: 14px; background: #fafaf6; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.lab-hist { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.lab-hist .lh-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.lab-hist .lh-item { padding: 7px 0; border-top: 1px dashed var(--line); }
.lab-hist .lh-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* หน้าแล็บ: ตัวกรองประเภทแล็บ + แบบฟอร์มกรอกผล */
.lab-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.rs-grid { width: 100%; border-collapse: collapse; margin-top: 4px; }
.rs-grid th { font-size: 12.5px; text-align: left; padding: 4px 6px; color: var(--muted); }
.rs-grid td { padding: 4px 6px; vertical-align: middle; }
.rs-grid td input { min-height: 38px; }
.rs-grid td.rs-n { font-weight: 600; }
.rs-grid tr.abn input.rs-v { border-color: #e5a29a; background: #fdecea; color: #b42318; font-weight: 700; }
.rs-flag { font-weight: 700; color: #b42318; white-space: nowrap; }
.partner-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #eef3e2; border: 1px solid #d6e2c0; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.partner-bar .nm { font-size: 18px; font-weight: 700; }