/* Hospital modules (wards and beds, consultations, OPD queue, lab and radiology, invoices, dashboard extras).
   Loaded after optix-app.css: same Pharmacy look (Plus Jakarta Sans, #f2f5f9 canvas, white cards, big radii, blue pill buttons). LIGHT ONLY. */

/* ---------- shared bits ---------- */
.drawer.wide { width: min(780px, 100%); }
.drawer.mid { width: min(580px, 100%); }
.dr-body fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.dr-foot .grow { flex: 1; }
.dr-foot .ghost.danger { color: var(--bad); }
.hm-h { margin: 20px 0 10px; font-size: 14px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.hm-h small { font-weight: 600; color: var(--ink-3); font-size: 11.5px; }
.hm-sub { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.hm-note { background: #f6f8fb; border-radius: 14px; padding: 12px 14px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; }
.hm-note.warn { background: var(--warn-bg); color: var(--warn); }
.hm-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hm-row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-row5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hm-mini { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
.hm-mini th { background: #f6f8fb; color: var(--ink-3); font-size: 11.5px; font-weight: 700; text-align: left; padding: 9px 12px; height: auto; white-space: normal; }
.hm-mini th:first-child { border-radius: 12px 0 0 12px; } .hm-mini th:last-child { border-radius: 0 12px 12px 0; }
.hm-mini td { height: auto; white-space: normal; padding: 10px 12px; font-size: 12.5px; border-bottom: 1px solid #edf1f6; color: var(--ink-2); font-weight: 500; vertical-align: middle; }
.hm-mini td b { color: var(--ink); font-weight: 700; }
.hm-mini tr:last-child td { border-bottom: 0; }
.hm-mini .in { height: 36px; font-size: 12.5px; border-radius: 10px; padding: 0 10px; }
.hm-mini select.in { padding-right: 28px; }
.hm-mini .num { text-align: right; font-variant-numeric: tabular-nums; }
.hm-x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--hov); color: var(--ink-2); display: grid; place-items: center; padding: 0; }
.hm-x:hover { background: var(--bad-bg); color: var(--bad); }
.hm-x svg { width: 13px; height: 13px; }
.hm-addrow { margin-top: 10px; border: 1px dashed #b9c8e6; background: #f7faff; color: var(--lnk); font-weight: 700; font-size: 12.5px; border-radius: 12px; height: 38px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; }
.hm-addrow:hover { background: var(--tintb); }
.hm-addrow svg { width: 14px; height: 14px; stroke-width: 2.2; }
.hm-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--chip, #f0f4fb); color: var(--ink-2); white-space: nowrap; }
.hm-tag.bed { background: #e4f6f3; color: #0d7c73; } .hm-tag.lab { background: #f0eaff; color: #6d3fd6; } .hm-tag.cons { background: #eaf1ff; color: #1f4fd1; } .hm-tag.oth { background: #fff4e0; color: #b45309; }
.hm-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hm-seg { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.hm-seg button { border: 0; background: none; height: 32px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.hm-seg button.on { background: var(--blue); color: #fff; }
.tools .hm-seg { margin-left: 0; }
.hm-empty-act { display: inline-flex; margin-top: 12px; }

/* ---------- bed board ---------- */
.hm-ward { margin-top: 26px; }
.hm-ward:first-of-type { margin-top: 18px; }
.hm-wh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.hm-wh b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.hm-wh small { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.hm-wh .pl { height: 24px; padding: 0 11px; font-size: 11px; font-weight: 700; }
.hm-occ { width: 90px; height: 7px; border-radius: 99px; background: var(--trk); overflow: hidden; margin-left: auto; }
.hm-occ i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5b8cff, #2f6df6); }
.hm-wh .hm-occn { margin-left: 0; }
.hm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.hm-cell { display: block; position: relative; }
.hm-cell .menu { top: auto; bottom: 8px; right: 8px; z-index: 30; min-width: 210px; }
.hm-bed { width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 18px; padding: 13px 14px 12px; background: #fff; min-height: 118px; display: flex; flex-direction: column; gap: 3px; color: var(--ink); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.hm-bed:hover { box-shadow: 0 14px 28px -16px rgba(27,42,74,.3); transform: translateY(-1px); }
.hm-bed:disabled { cursor: default; transform: none; box-shadow: none; }
.hm-bed .bt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.hm-bed .bn { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.hm-bed .st { font-size: 10.5px; font-weight: 800; height: 21px; padding: 0 9px; border-radius: 99px; display: inline-flex; align-items: center; }
.hm-bed .pn { font-size: 14px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hm-bed .ps { font-size: 11.5px; color: var(--ink-2); font-weight: 500; line-height: 1.35; }
.hm-bed .pr { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: auto; padding-top: 6px; }
.hm-bed.free { background: #f4fbf7; border-color: #c5ecd5; } .hm-bed.free .st { background: #dff5e8; color: var(--good); }
.hm-bed.occ { background: #f3f7ff; border-color: #cfe0ff; } .hm-bed.occ .st { background: #dbe7ff; color: #1f4fd1; }
.hm-bed.cleaning { background: #fffaf0; border-color: #f6dcaa; } .hm-bed.cleaning .st { background: #ffeccb; color: var(--warn); }
.hm-bed.maint { background: #f6f7f9; border-color: #dfe3ea; } .hm-bed.maint .st { background: #e6e9ef; color: #5b6474; }
.hm-bed.free .pn, .hm-bed.cleaning .pn, .hm-bed.maint .pn { color: var(--ink-2); font-weight: 700; }
.hm-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); font-weight: 600; margin: 4px 0 0; }
.hm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }

/* ---------- stat cards row 2 on the dashboard ---------- */
.stats.two { margin-top: -2px; }
.stat .sx { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: -8px; }
.stat .sx b { color: var(--ink-2); font-weight: 800; }
.stat .bar2 { height: 7px; border-radius: 99px; background: var(--trk); overflow: hidden; margin-top: -4px; }
.stat .bar2 i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5b8cff, #2f6df6); }
.stat .bar2.warn i { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.stat .bar2.bad i { background: linear-gradient(90deg, #f87171, #e5484d); }

@media (max-width: 1100px) {
  .hm-row5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hm-mini td:first-child, .hm-mini th:first-child { padding-left: 12px; }
.hm-mini th.num { text-align: right; }

/* ---------- patient care timeline ---------- */
.tl { margin-top: 12px; max-height: 440px; overflow-y: auto; padding-right: 6px; }
.tl-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 8px; border: 0; border-bottom: 1px solid #edf1f6; background: none; text-align: left; border-radius: 12px; color: var(--ink); }
.tl-i:last-child { border-bottom: 0; }
.tl-i:hover { background: #fafbfe; }
.tl-d { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.tl-d svg { width: 17px; height: 17px; }
.tl-d.blue { background: #eaf1ff; color: #2f6df6; } .tl-d.teal { background: #e4f6f3; color: #0d8f89; } .tl-d.green { background: #e8f8ef; color: #15803d; } .tl-d.purple { background: #f0eaff; color: #6d3fd6; } .tl-d.amber { background: #fff4e0; color: #b45309; }
.tl-t { flex: 1; min-width: 0; }
.tl-t b { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-t small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-r { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.tl-r time { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.tlcard .ph b { font-size: 15px; font-weight: 700; }

#vsRx th:nth-child(1) { width: 29%; } #vsRx th:nth-child(2) { width: 15%; } #vsRx th:nth-child(3) { width: 22%; } #vsRx th:nth-child(4) { width: 9%; } #vsRx th:nth-child(6) { width: 40px; }
#vsRx td { padding: 6px 5px; } #vsRx td:first-child, #vsRx th:first-child { padding-left: 0; }
#vsRx td .in { width: 100%; padding: 0 9px; }
#vsRx select.in { padding-right: 24px; background-position: right 7px center; }
fieldset:disabled .hm-x, fieldset:disabled .hm-addrow { display: none; }

/* ---------- OPD queue board ---------- */
.oq-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-top: 20px; align-items: start; }
.oq-doc { border: 1px solid var(--line); border-radius: 22px; padding: 16px 16px 14px; background: #fff; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oq-h { display: flex; align-items: center; gap: 12px; }
.oq-h .pic { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); flex: none; background: var(--hov); }
.oq-h .nm2 { flex: 1; min-width: 0; }
.oq-h .nm2 b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oq-h .nm2 small { font-size: 11.5px; font-weight: 500; }
.oq-now { text-align: center; min-width: 74px; padding: 6px 10px; border-radius: 16px; background: #f6f8fb; border: 1px solid var(--line); }
.oq-now small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.oq-now b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.oq-now.on { background: #eaf1ff; border-color: #cfe0ff; } .oq-now.on b { color: var(--blue-d); }
.oq-call { display: flex; gap: 8px; }
.oq-list { display: flex; flex-direction: column; gap: 6px; }
.oq-t { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px; background: #f8fafc; border: 1px solid #edf1f6; }
.oq-n { width: 38px; height: 38px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; flex: none; color: var(--ink-2); }
.oq-p { flex: 1; min-width: 0; }
.oq-p b { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oq-p small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; margin-top: 1px; }
.oq-a { display: flex; align-items: center; gap: 6px; flex: none; }
.oq-t.st-in { background: #eaf1ff; border-color: #cfe0ff; } .oq-t.st-in .oq-n { background: var(--blue); border-color: var(--blue); color: #fff; }
.oq-t.st-done, .oq-t.st-noshow { background: #fff; opacity: .75; } .oq-t.st-noshow .oq-p b { text-decoration: line-through; }
.hm-mini-btn { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--lnk); font-weight: 700; font-size: 12px; white-space: nowrap; }
.hm-mini-btn:hover { background: var(--tintb); }
.hm-mini-btn.solid { background: var(--blue); border-color: var(--blue); color: #fff; } .hm-mini-btn.solid:hover { background: var(--blue-d); }
.oq-bk { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.oq-bk small, .oq-fin summary { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.oq-b { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.oq-b span { color: var(--ink-3); font-weight: 600; font-size: 11.5px; width: 58px; flex: none; } .oq-b b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oq-fin { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.oq-fin summary { cursor: pointer; margin-bottom: 6px; }
.oq-fin .oq-t { margin-bottom: 6px; }

/* ---------- waiting-room screen ---------- */
.opd-tv { position: fixed; inset: 0; z-index: 400; background: #f2f5f9; display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 40px); gap: clamp(14px, 2vw, 30px); color: var(--ink); overflow: auto; }
.opd-tv[hidden] { display: none; }
.tv-top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tv-brand { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 260px; }
.tv-mk { width: 54px; height: 54px; border-radius: 16px; background: var(--blue); display: grid; place-items: center; box-shadow: 0 8px 18px -8px rgba(47,109,246,.6); }
.tv-brand b { display: block; font-size: clamp(22px, 2.4vw, 38px); font-weight: 800; letter-spacing: -.02em; }
.tv-brand small { display: block; font-size: clamp(13px, 1.2vw, 18px); color: var(--ink-3); font-weight: 600; }
.tv-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-clock { text-align: right; }
.tv-clock b { display: block; font-size: clamp(28px, 3.4vw, 54px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tv-clock small { display: block; color: var(--ink-3); font-weight: 600; font-size: clamp(12px, 1.1vw, 17px); }
.tv-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(14px, 1.6vw, 26px); align-content: start; }
.tv-doc { background: #fff; border: 1px solid var(--line); border-radius: 32px; padding: clamp(18px, 2vw, 34px); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 20px); }
.tv-dn b { display: block; font-size: clamp(20px, 2vw, 32px); font-weight: 800; letter-spacing: -.01em; }
.tv-dn small { display: block; font-size: clamp(13px, 1.15vw, 18px); color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.tv-now { background: #f6f8fb; border-radius: 26px; padding: clamp(10px, 1.2vw, 20px) 10px; text-align: center; border: 2px solid transparent; }
.tv-now small { display: block; font-size: clamp(12px, 1.1vw, 17px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tv-now b { display: block; font-size: clamp(64px, 8.5vw, 150px); line-height: 1; font-weight: 800; color: #b9c2d3; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.tv-now small + b + small, .tv-now b small { font-size: clamp(14px, 1.4vw, 22px); letter-spacing: 0; text-transform: none; color: var(--ink-2); font-weight: 600; margin-top: 4px; }
.tv-now.on { background: #eaf1ff; border-color: #9dbdff; animation: tvpulse 2.4s ease-in-out infinite; } .tv-now.on b { color: var(--blue-d); }
@keyframes tvpulse { 50% { box-shadow: 0 0 0 10px rgba(47,109,246,.12); } }
.tv-nx small { font-size: clamp(12px, 1.1vw, 17px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tv-nx > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tv-nx span { font-size: clamp(24px, 2.6vw, 42px); font-weight: 800; background: #f0f4fb; border-radius: 18px; padding: 4px 18px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tv-nx span small { font-size: .45em; margin-left: 8px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.tv-nx em { font-style: normal; color: var(--ink-3); font-weight: 600; font-size: clamp(14px, 1.3vw, 20px); }
.tv-none { grid-column: 1/-1; text-align: center; color: var(--ink-3); font-weight: 700; font-size: clamp(22px, 2.6vw, 40px); padding: 8vh 0; }
.tv-foot { text-align: center; color: var(--ink-3); font-weight: 600; font-size: clamp(13px, 1.2vw, 19px); }

.oq-call .addbtn:disabled { opacity: .45; box-shadow: none; cursor: default; }
.oq-call .addbtn:disabled:hover { background: var(--blue); }

/* ---------- test picker (lab and radiology) ---------- */
.lp .lp-q { height: 40px; }
.lp-list { margin-top: 8px; max-height: 232px; overflow-y: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 4px; }
.lp-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; cursor: pointer; }
.lp-i[hidden] { display: none; }
.lp-i:hover { background: #f6f8fb; }
.lp-i input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.lp-n { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.lp-p { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; }
.lp-sum { margin-top: 8px; font-weight: 700; }

/* ---------- invoices ---------- */
.iv-d { display: flex; align-items: center; gap: 8px; }
.iv-d .hm-tag { flex: none; }
.iv-d .in { flex: 1; min-width: 0; }
.iv-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.iv-add .hm-addrow { margin-top: 0; }
#ivT td.num { font-weight: 700; color: var(--ink); white-space: nowrap; }
#ivT td { padding: 6px 5px; } #ivT th:first-child, #ivT td:first-child { padding-left: 0; }
#ivT td[data-amt] { min-width: 80px; }
.iv-tot { background: #f6f8fb; border-radius: 18px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; align-self: start; }
.iv-tot > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.iv-tot > div b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.iv-tot > .t { border-top: 1px solid var(--line); padding-top: 10px; font-size: 14.5px; color: var(--ink); }
.iv-tot > .d { border-top: 1px dashed var(--line); padding-top: 10px; font-size: 14.5px; color: var(--ink); }
.iv-tot > .d.bad b { color: var(--bad); }
#ivPend { margin-top: 12px; }
#txNew:not([hidden]) + .exw { margin-left: 0; }

/* ---------- dashboard charts ---------- */
.mid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.mid2 .rcard { padding: 20px 22px 18px; }
.mid2 .rcard h3 { font-size: 15.5px; font-weight: 800; }
.mid2 .rcard .sub { font-size: 12px; font-weight: 500; }
.mid2 .rcard[hidden] { display: none; }
.mid2 .legend span { font-weight: 600; }
.don-w { display: flex; flex-direction: column; align-items: stretch; gap: 18px; margin-top: 6px; }
.don { width: 170px; height: 170px; flex: none; margin: 0 auto; }
.don-l { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.don-l > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 38px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.don-l i { width: 12px; height: 12px; border-radius: 4px; }
.don-l b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.don-l em { font-style: normal; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .mid2 { grid-template-columns: minmax(0, 1fr); } }
.dr-foot .pri:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* ---------- tables of the hospital modules: a little tighter so the important columns fit at 1280px ---------- */
#view-lab table, #view-visits table, #view-wards table { min-width: 0; }
#view-tx table { min-width: 0; }
#view-lab th, #view-lab td, #view-visits th, #view-visits td, #view-wards th, #view-wards td, #view-tx th, #view-tx td { padding-left: 10px; padding-right: 10px; }
#view-lab th:first-child, #view-lab td:first-child, #view-visits th:first-child, #view-visits td:first-child, #view-wards th:first-child, #view-wards td:first-child, #view-tx th:first-child, #view-tx td:first-child { padding-left: 16px; }
#view-tx tbody td:nth-child(3) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-lab tbody td { height: 64px; }
.hm-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
#view-tx thead th { white-space: normal; line-height: 1.2; }
#view-tx thead th button { text-align: left; }