/* ============================================================
   clinic-ui-6.css — ชั้นที่ 4 (รอบ 4)
   4 หน้าใหม่: สมุดวัคซีน · ชุดยา · ค้างจ่ายแล็บ · กราฟวิเคราะห์
   โหลดต่อท้าย: style.css → clinic-ui-2.css → clinic-ui-3.css
                → clinic-ui-5.css → clinic-ui-6.css
   ไม่แก้ของเดิม ถอด <link> บรรทัดนี้ออกได้ทุกเมื่อ
   ============================================================ */

/* ---------- 1. แถบสถิติหัวหน้า (ใช้ได้ทั้ง 4 หน้า) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; margin-bottom: 16px; }
.stat-box { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; }
.stat-box .lbl { font-size: 12.5px; color: var(--muted); }
.stat-box .val { font-size: 28px; font-weight: 700; letter-spacing: -.6px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat-box .note { font-size: 11.5px; color: var(--faint); }
.stat-box .note.warn { color: var(--amber); font-weight: 600; }
.stat-box .note.bad  { color: var(--danger); font-weight: 600; }
.stat-box .note.good { color: var(--green); font-weight: 600; }

/* ---------- 2. แท็บแบบปุ่มพร้อมตัวเลขงานค้าง ---------- */
.tab-btns { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.tab-btns button { background: #fff; color: var(--muted); border: 1px solid var(--border); font-weight: 500; }
.tab-btns button.on { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.tab-btns .spacer { margin-left: auto; }

/* ---------- 3. สมุดวัคซีน ---------- */
.vax-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .vax-layout { grid-template-columns: 1fr; } }

.vax-person {
  border: 1.5px solid var(--border); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 7px; cursor: pointer; background: #fff;
}
.vax-person.on { border-color: #c8cfa8; background: #fbfcf8; }
.vax-person .nm { font-size: 14px; font-weight: 600; }
.vax-person .sub { font-size: 11.5px; color: var(--muted); }
.vax-person .courses { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.vax-person .due { font-size: 12px; font-weight: 600; margin-top: 4px; }
.vax-person .due.late { color: var(--amber); }
.vax-person .due.ok { color: var(--green-ink); }

/* การ์ดคอร์สวัคซีน */
.vax-course { border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; margin-bottom: 11px; }
.vax-course .hd { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.vax-course .nm { font-size: 15px; font-weight: 600; }
.vax-course .age { font-size: 11.5px; color: var(--faint); }
.vax-course .prog { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vax-bar { height: 7px; background: var(--line); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.vax-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.vax-bar > span.late { background: var(--amber); }
.vax-bar > span.done { background: var(--green); }

/* ไทม์ไลน์เข็ม */
.vax-shots { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.vax-shot { flex: 1; min-width: 118px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: #fbfcf8; }
.vax-shot .n { font-size: 11px; color: var(--muted); }
.vax-shot .dt { font-size: 13px; font-weight: 600; color: var(--faint); }
.vax-shot .detail { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.vax-shot.given { background: var(--green-soft); border-color: #c3dcab; }
.vax-shot.given .dt { color: var(--green-ink); }
.vax-shot.next { background: #fff; border-color: #d9ddcf; }
.vax-shot.next .dt { color: var(--text); }
.vax-shot.late { background: var(--amber-soft); border-color: #f6dfb8; }
.vax-shot.late .dt { color: var(--amber-ink); }

/* แถวคนเลยนัด */
.vax-late-row { border: 1.5px solid #f6dfb8; background: var(--amber-soft); border-radius: 12px; padding: 13px 15px; margin-bottom: 9px; }
.vax-late-row.very { border-color: #f4cccc; background: var(--danger-soft); }
.vax-late-row .days { font-size: 14px; font-weight: 700; color: var(--amber-ink); white-space: nowrap; }
.vax-late-row.very .days { color: var(--danger-ink); }
.vax-late-row .acts { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }

/* กล่องนัดเข็มถัดไปในโมดัลบันทึกการฉีด */
.vax-next-box { background: var(--cyan-soft); border: 1px solid #a5f3fc; border-radius: 12px; padding: 13px 15px; margin-top: 12px; }
.vax-next-box .t { font-size: 13px; font-weight: 700; color: var(--cyan); }
.vax-next-box .opt { display: flex; gap: 9px; align-items: center; margin-top: 9px; cursor: pointer; font-size: 12.5px; color: var(--cyan); }

/* ---------- 4. ชุดยา ---------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 11px; }
.set-group-label { font-size: 12px; font-weight: 700; color: #8b917f; letter-spacing: .08em; margin: 16px 0 9px; }
.set-card { border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; }
.set-card .hd { display: flex; gap: 10px; align-items: flex-start; }
.set-card .ic { font-size: 22px; line-height: 1.1; }
.set-card .nm { font-size: 15px; font-weight: 600; }
.set-card .meta { font-size: 11.5px; color: var(--faint); }
.set-card .mode { border-radius: 8px; padding: 7px 10px; font-size: 11.5px; font-weight: 600; margin-top: 9px; background: #f0f2ea; color: var(--muted); }
.set-card .mode.ask { background: var(--info-soft); color: var(--info); }
.set-card .line { display: flex; gap: 9px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.set-card .line .scale { font-size: 12px; color: var(--info); font-weight: 600; }
.set-card .line .qty { font-weight: 600; font-variant-numeric: tabular-nums; }
.set-card .acts { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }

/* ตัวเลือกชุดในห้องตรวจ */
.set-pick { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 8px; cursor: pointer; }
.set-pick:hover { border-color: #c3c9b4; background: #fbfcf8; }
.set-pick .preview { font-size: 12px; color: var(--muted); margin-top: 4px; }
.set-pick .ask { font-size: 11.5px; color: var(--info); font-weight: 600; margin-top: 3px; }

/* ขั้นถามค่าก่อนดึงชุด */
.set-ask-preview { border: 1px solid var(--border); border-radius: 12px; margin-top: 14px; overflow: hidden; }
.set-ask-preview .hd { background: #fbfcf8; padding: 9px 13px; font-size: 11.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.set-ask-preview .row { display: flex; gap: 10px; align-items: baseline; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.set-ask-preview .row .q { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 5. ค้างจ่ายแล็บ ---------- */
.lab-row { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 9px; }
.lab-row.uncharged { border: 1.5px solid #f4cccc; background: var(--danger-soft); }
.lab-row .no { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.lab-row .acts { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.lab-row .owe { font-size: 22px; font-weight: 700; color: var(--danger-ink); font-variant-numeric: tabular-nums; }

/* การ์ดสรุปรายแล็บ */
.lab-vendor { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.lab-vendor .hd { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.lab-vendor .nm { font-size: 16px; font-weight: 700; }
.lab-vendor .cycle { font-size: 12.5px; color: var(--muted); }
.lab-vendor .total { font-size: 26px; font-weight: 700; letter-spacing: -.5px; color: var(--amber); font-variant-numeric: tabular-nums; }

/* สถานะใบส่งตรวจ */
.b-lab-sent   { background: var(--amber-soft); color: var(--amber-ink); }
.b-lab-result { background: var(--info-soft);  color: var(--info); }
.b-lab-done   { background: var(--green-soft); color: var(--green-ink); }

/* ---------- 6. กราฟ (CSS ล้วน ไม่ใช้ไลบรารี) ---------- */
.chart-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(420px,1fr)); gap: 16px; }
.chart-legend { display: flex; gap: 12px; margin-left: auto; font-size: 11.5px; color: var(--muted); }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }

/* กราฟแท่งแนวตั้ง (เทียบสองชุด) */
.bars { display: flex; gap: 14px; align-items: flex-end; height: 186px; padding-top: 12px; }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bars .col .v { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bars .col .pair { display: flex; gap: 3px; align-items: flex-end; width: 100%; justify-content: center; }
.bars .col .bar      { width: 40%; background: #8ba03f; border-radius: 4px 4px 0 0; }
.bars .col .bar.on   { background: var(--green); }
.bars .col .bar.prev { width: 26%; background: #d4dcbd; }
.bars .col .lbl { font-size: 12px; color: var(--muted); }

/* กราฟแท่งชั่วโมง (เน้นช่วงพีค) */
.bars.hours { gap: 5px; height: 158px; }
.bars.hours .bar { width: 70%; background: #e3c48a; }
.bars.hours .bar.mid  { background: #d99a3f; }
.bars.hours .bar.peak { background: var(--amber); }

/* แถบสัดส่วนแนวนอน */
.hbar { margin-bottom: 11px; }
.hbar .row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; margin-bottom: 5px; }
.hbar .row .nm { flex: 1; }
.hbar .row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.hbar .row .pct { width: 40px; text-align: right; font-size: 12px; color: var(--muted); }
.hbar .track { height: 9px; background: var(--line); border-radius: 99px; overflow: hidden; }
.hbar .track > span { display: block; height: 100%; border-radius: 99px; background: var(--primary); }

/* แถบสองสีต่อกัน (ใหม่ vs เก่า) */
.hbar .track.split { display: flex; }
.hbar .track.split > .a { background: var(--primary); }
.hbar .track.split > .b { background: #c6d096; }

/* ชุดสีสำหรับกราฟสัดส่วนประเภทการรักษา */
.c1 { background: #4b5320 !important; } .c2 { background: #6b7c2e !important; }
.c3 { background: #8ba03f !important; } .c4 { background: #aab86a !important; }
.c5 { background: #c6d096 !important; } .c6 { background: #dde3c2 !important; }

/* กล่องข้อสังเกตใต้กราฟ — บอกว่าให้ทำอะไรต่อ */
.chart-insight { background: var(--amber-soft); border: 1px solid #f6dfb8; border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--amber-ink); margin-top: 12px; }

/* ---------- 7. มือถือ ---------- */
@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .chart-grid, .set-grid { grid-template-columns: 1fr; }
  .bars { height: 150px; }
  .bars.hours { gap: 3px; }
  .bars .col .v { font-size: 10px; }
}