/* ธีมกลางของ web app งานเภสัชกรรม รพ.ถ้ำพรรณรา (2026-11-03) — ทุกหน้าโหลดไฟล์นี้ท้าย <head>
 *
 * 1) ค่ากลาง (design tokens) ชื่อขึ้นต้น --tph- ไม่ชนกับตัวแปรเดิมของแต่ละหน้า — หน้าใหม่/ส่วนที่ปรับใหม่ใช้ค่าชุดนี้
 * 2) ปรับรายละเอียดที่ปลอดภัยกับทุกหน้า: กรอบ focus เวลาใช้คีย์บอร์ด, ตัวเลขในตารางกว้างเท่ากัน, ลดการเคลื่อนไหวตามการตั้งค่าเครื่อง
 * 3) แก้สีที่อ่านยาก (contrast ต่ำกว่า WCAG AA): ตัวขาวบนปุ่มทอง 2.6:1 → ตัวเขียวเข้มบนทอง 5.3:1, ตัวเลขทองบนขาว → ทองเข้ม 5.1:1
 * 4) ชิ้นส่วนพื้นฐาน (ปุ่ม 3 แบบ / การ์ด / ป้ายสถานะ / empty state) ไว้ใช้ตอนทยอยปรับแต่ละหน้า — ยังไม่บังคับใช้กับของเดิม
 */
:root {
  /* สี */
  --tph-primary: #1A5E38;
  --tph-primary-dark: #124228;
  --tph-primary-soft: #EDF4EF;
  --tph-gold: #C49A22;          /* ทองแบรนด์: ใช้เป็นเส้น/จุดเน้น/พื้นปุ่ม (ตัวหนังสือบนทองใช้ --tph-on-gold) */
  --tph-gold-text: #8A6A0F;     /* ทองสำหรับตัวหนังสือบนพื้นขาว (5.1:1) */
  --tph-on-gold: #0D3320;       /* ตัวหนังสือบนพื้นทอง (5.3:1) */
  --tph-bg: #F4F7F5;
  --tph-surface: #FFFFFF;
  --tph-text: #203D2C;
  --tph-muted: #5A6E62;
  --tph-line: #DCE6DF;
  /* สีสถานะ (ตัวหนังสือ / พื้นป้าย) — ผ่าน AA ทุกคู่ */
  --tph-success: #237345; --tph-success-bg: #EDF6EF;
  --tph-warning: #8A5A00; --tph-warning-bg: #FFF5DE;
  --tph-danger: #B43D37;  --tph-danger-bg: #FCEDEC;
  --tph-info: #356A86;    --tph-info-bg: #EDF3F7;
  /* ตัวอักษร 6 ระดับ */
  --tph-font: 'Noto Sans Thai', 'Sarabun', sans-serif;
  --tph-fs-xs: 12px; --tph-fs-sm: 14px; --tph-fs-md: 16px; --tph-fs-lg: 20px; --tph-fs-xl: 28px; --tph-fs-kpi: 32px;
  /* ระยะห่าง (ฐาน 4/8 px) มุมโค้ง เงา */
  --tph-s1: 4px; --tph-s2: 8px; --tph-s3: 12px; --tph-s4: 16px; --tph-s6: 24px; --tph-s8: 32px;
  --tph-r-sm: 6px; --tph-r-md: 12px; --tph-r-lg: 16px;
  --tph-shadow: 0 1px 2px rgba(18,66,40,.05), 0 2px 8px rgba(18,66,40,.05);
}

/* ── 2) รายละเอียดที่ปลอดภัยกับทุกหน้า (:where = ความสำคัญต่ำสุด สไตล์เดิมของหน้าชนะเสมอ) ── */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--tph-gold); outline-offset: 2px; }
:where(td, th, .kpi-val, .kpi-value, .num) { font-variant-numeric: tabular-nums; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── 3) แก้สีที่อ่านยาก ── */
.btn-gold, .btn.btn-gold { color: var(--tph-on-gold) !important; }
.kpi-val.gold { color: var(--tph-gold-text) !important; }

/* ── 4) ชิ้นส่วนพื้นฐานสำหรับปรับทีละหน้า ── */
.tph-btn { font: inherit; font-size: var(--tph-fs-sm); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.tph-btn-primary { background: var(--tph-primary); color: #fff; }
.tph-btn-primary:hover { background: var(--tph-primary-dark); }
.tph-btn-secondary { background: var(--tph-surface); color: var(--tph-primary); border-color: var(--tph-line); }
.tph-btn-secondary:hover { background: var(--tph-primary-soft); border-color: #C7D8CD; }
.tph-btn-text { background: none; color: var(--tph-primary); padding-left: 8px; padding-right: 8px; }
.tph-btn-text:hover { background: var(--tph-primary-soft); }
.tph-btn:disabled { opacity: .5; cursor: default; }
.tph-card { background: var(--tph-surface); border: 1px solid var(--tph-line); border-radius: var(--tph-r-md); padding: 20px 24px; box-shadow: var(--tph-shadow); }
.tph-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tph-fs-xs); font-weight: 600; line-height: 1.4; padding: 3px 8px; border-radius: var(--tph-r-sm);
  background: var(--tph-info-bg); color: var(--tph-info); }
.tph-badge.ok { background: var(--tph-success-bg); color: var(--tph-success); }
.tph-badge.warn { background: var(--tph-warning-bg); color: var(--tph-warning); }
.tph-badge.bad { background: var(--tph-danger-bg); color: var(--tph-danger); }
.tph-empty { text-align: center; padding: 40px 24px; color: var(--tph-muted); font-size: var(--tph-fs-sm); }
.tph-empty b { display: block; color: var(--tph-text); font-size: var(--tph-fs-lg); margin-bottom: 6px; }

/* ── แถบหัวขาวแบบเดียวทุกหน้า (lib/tph-header.js) ── */
.tph-hd-old { display: none !important; }
.tph-hd { position: sticky; top: 0; z-index: 60; box-sizing: border-box; min-height: 64px; padding: 8px 24px; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  background: var(--tph-surface); border-bottom: 1px solid var(--tph-line); box-shadow: 0 1px 3px rgba(18,66,40,.06); font-family: var(--tph-font); color: var(--tph-text); }
.tph-hd.tph-hd-static { position: relative; }
.tph-hd-home { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 38px; box-sizing: border-box; padding: 6px 14px; border-radius: 8px;
  background: var(--tph-primary-soft); border: 1px solid var(--tph-line); color: var(--tph-primary-dark); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tph-hd-home:hover { background: #E1EDE5; }
.tph-hd-title { flex: 1 1 280px; min-width: 0; }
.tph-hd .tph-hd-h { display: block; margin: 0; font-size: 20px !important; line-height: 1.3; font-weight: 700; color: var(--tph-primary-dark) !important; letter-spacing: -.01em; flex: none; }
.tph-hd .tph-hd-sub { display: block; margin: 1px 0 0; font-size: 13px !important; line-height: 1.45; color: var(--tph-muted) !important; opacity: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tph-hd-right, .tph-hd-status, .tph-hd-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tph-hd-right { margin-left: auto; justify-content: flex-end; }
.tph-hd-status .status, .tph-hd-status .sub { color: var(--tph-muted) !important; opacity: 1 !important; font-size: 13px; }
.tph-hd .sync-dot { background: var(--tph-bg) !important; border: 1px solid var(--tph-line) !important; border-radius: 999px; padding: 6px 12px; font: 600 13px var(--tph-font); cursor: pointer; }
/* ปุ่มคำสั่ง = ปุ่มรองขาวขอบเขียว · ปุ่มหลัก = เขียวทึบ · ช่องเลือก/กรอก = สูงเท่ากัน */
.tph-hd-actions > button, .tph-hd-actions > a, .tph-hd-morebtn { font: 600 14px var(--tph-font) !important; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; box-sizing: border-box;
  padding: 6px 14px !important; border-radius: 8px !important; border: 1px solid var(--tph-line) !important; background: var(--tph-surface) !important; color: var(--tph-primary) !important;
  cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: none !important; transition: background-color .14s ease, border-color .14s ease; }
.tph-hd-actions > button:hover, .tph-hd-actions > a:hover, .tph-hd-morebtn:hover, .tph-hd-morebtn[aria-expanded="true"] { background: var(--tph-primary-soft) !important; border-color: #C7D8CD !important; }
.tph-hd-actions > .tph-hd-primary { background: var(--tph-primary) !important; border-color: var(--tph-primary) !important; color: #fff !important; }
.tph-hd-actions > .tph-hd-primary:hover { background: var(--tph-primary-dark) !important; }
.tph-hd-actions > button:disabled { opacity: .55; cursor: default; }
.tph-hd-actions > select, .tph-hd-actions > input { font: 14px var(--tph-font); height: 38px; box-sizing: border-box; padding: 0 10px; border-radius: 8px; border: 1px solid var(--tph-line);
  background: var(--tph-surface); color: var(--tph-text); }
.tph-hd-actions > label { font-size: 13px; color: var(--tph-muted) !important; opacity: 1 !important; }
.tph-hd-more { position: relative; }
.tph-hd-caret { font-size: 11px; opacity: .7; }
.tph-hd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 240px; max-height: 70vh; overflow-y: auto; padding: 6px; box-sizing: border-box;
  background: var(--tph-surface); border: 1px solid var(--tph-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(18,66,40,.16); }
.tph-hd-menu[hidden] { display: none; }
.tph-hd-menu > .tph-hd-mi { display: flex !important; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; margin: 0 !important; padding: 9px 12px !important; min-height: 0;
  border: 0 !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; color: var(--tph-text) !important;
  font: 500 14px var(--tph-font) !important; text-align: left; justify-content: flex-start; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tph-hd-menu > .tph-hd-mi:hover, .tph-hd-menu > .tph-hd-mi:focus-visible { background: var(--tph-primary-soft) !important; color: var(--tph-primary-dark) !important; }
.tph-hd-menu > .tph-hd-mi[hidden] { display: none !important; }
.tph-hd-mlbl { font-size: 11.5px; font-weight: 700; color: var(--tph-muted); padding: 10px 12px 4px; }
.tph-hd-mlbl:first-child { padding-top: 4px; }
@media (max-width: 760px) {
  /* จอแคบ: หัวขึ้นหลายบรรทัด ไม่ติดบนจอ (ให้ที่กับเนื้อหา — แถบหัวข้อซ้ายที่เป็นแถบแนวนอนติดบนจอแทน) */
  .tph-hd { position: relative; padding: 8px 12px; min-height: 56px; gap: 6px 10px; }
  .tph-hd .tph-hd-h { font-size: 16px !important; }
  .tph-hd .tph-hd-sub { display: none; }
  .tph-hd-title { flex-basis: 160px; }
  .tph-hd-right { margin-left: 0; width: 100%; justify-content: flex-start; }
  .tph-hd-menu { right: auto; left: 0; }
}
@media print { .tph-hd { position: static; box-shadow: none; border: 0; padding: 0 0 8px; } .tph-hd-home, .tph-hd-right { display: none !important; } }

/* ── ไอคอนเส้น (lib/tph-icons.js แทน emoji) ── */
.tph-ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; margin-right: .4em; stroke-width: 2; }
/* ที่ที่เป็น flex มีช่องไฟ (gap) อยู่แล้ว */
.tph-it .tph-ic, .tph-hd-mi .tph-ic, .tph-hd-home .tph-ic, .tph-hd-actions > * .tph-ic, .side .ic .tph-ic { margin-right: 0; }
.tph-hd .tph-hd-h .tph-ic { color: var(--tph-primary); width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-right: .35em; }
.tph-side .tph-it .tph-ic { width: 18px; height: 18px; opacity: .9; }
.tph-hd-menu .tph-hd-mi .tph-ic { color: var(--tph-primary); width: 17px; height: 17px; }
/* ไอคอนที่อยู่ในกรอบของตัวเอง (การ์ดหน้าหลัก, ไอคอนเมนู ME/insurance) */
.card-icon .tph-ic, .si-icon .tph-ic, .sb-icon .tph-ic, .side .ic .tph-ic, .header-pill .tph-ic { margin: 0; width: 22px; height: 22px; vertical-align: middle; }
.side .ic .tph-ic, .si-icon .tph-ic, .sb-icon .tph-ic { width: 19px; height: 19px; }
.card-icon { display: flex; align-items: center; justify-content: center; }

/* ── ช่องวันที่ วว/ดด/ปปปป พ.ศ. (lib/tph-ui.js TphUi.beDate) ── */
.be-wrap { position: relative; display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.be-wrap input.be-txt { width: 104px !important; font: inherit; font-size: 13px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; }
.be-wrap input.be-txt.bad { border-color: #C0392B; background: #FDECEC; }
.be-wrap .be-cal { border: 0; background: none; cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.be-wrap input[type=date].be { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* ── ภาพประกอบตอนยังไม่มีข้อมูล / ค้นไม่พบ / ต่อไม่ได้ (img/ui/*.png, 2026-11-03) ── */
.tph-art { display: block; width: min(180px, 55%); height: auto; margin: 0 auto 12px; user-select: none; pointer-events: none; }
.tph-art.sm { width: min(120px, 40%); margin-bottom: 8px; }
@media print { .tph-art { display: none !important; } }