/* สไตล์เฉพาะของระบบสุขภาพ — ต่อท้ายธีมกลาง template.css
   🔴 ห้ามแก้ template.css · ห้ามเลขสีดิบ ใช้ตัวแปรธีมเท่านั้น
   🔴 ห้ามเขียนทับคลาสที่ธีมมีแล้ว — มีเฉพาะของที่ธีมไม่มี (ตามเช็คลิสต์ sync theme)
   🔴 บทเรียนจาก homework: #main ต้องเว้นช่องเอง และ .stripe ในตารางต้องตั้งขนาดเอง */

/* โครงหน้า: ระยะห่างระหว่างการ์ดเท่ากันทุกช่อง (วัดจริงมาแล้วจากบทเรียนเดิม) */
#main { display: flex; flex-direction: column; gap: var(--s3); }

/* กัน .flash ของธีม (display:flex) ชนะ attribute hidden — เจอจริงจากภาพหน้า login */
[hidden] { display: none !important; }

/* ---------- การ์ดรายคนในหน้าภาพรวม ---------- */
.p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); }
.p-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-label { font-size: 11px; font-weight: 700; color: var(--ink-soft); letter-spacing: .02em; }
.p-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.p-value small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.p-sub { font-size: 12px; color: var(--ink-soft); }

/* ---------- แถบเลือกคน / ช่วงเวลา ---------- */
.stat-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.person-tabs, .range-tabs { display: flex; gap: var(--s1); flex-wrap: wrap; }
.ptab {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  font-weight: 600; font-size: 13px; padding: var(--s1) var(--s3); border-radius: 999px; min-height: 30px;
}
.ptab.on { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }

/* ---------- ปฏิทิน (แบบเดียวกับระบบการบ้าน — minmax(0,1fr) กันล้นจอมือถือ) ---------- */
.cal-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.cal-head .month { font-weight: 700; font-size: 16px; min-width: 150px; text-align: center; }
.cal-grid {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-dow { background: var(--tint); text-align: center; font-size: 11px; font-weight: 600;
  color: var(--ink-soft); padding: var(--s1) 0; }
.cal-day { background: var(--card); min-height: 62px; padding: 3px 4px;
  display: flex; flex-direction: column; gap: 2px; }
.cal-day.blank { background: var(--tint); }
.cal-day.today { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-day .d { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.cal-day.has { cursor: pointer; }
.cal-dot { font-size: 10px; line-height: 1.25; padding: 1px 3px; border-radius: 3px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--brand-soft); color: var(--brand-dark); }
@media (max-width: 560px) { .cal-day { min-height: 48px; } .cal-dot { font-size: 9px; } }

/* ---------- กราฟแท่ง (ใช้ในหน้าสถิติ) ---------- */
.bars { display: flex; align-items: flex-end; gap: var(--s2); height: 130px; padding-top: var(--s3); }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  height: 100%; justify-content: flex-end; min-width: 0; }
.bars .stack { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars .cap { font-size: 10px; color: var(--ink-soft); white-space: nowrap; }
.bars .val { font-size: 11px; font-weight: 700; }

.muted { color: var(--ink-soft); font-size: 13px; }
.right { margin-left: auto; }