:root {
  --ink: #1d2a2b; --muted: #5d6c6d; --line: #d5dddc; --bg: #f4f6f5; --card: #fff;
  --accent: #0f6b62; --accent-ink: #fff; --bad: #b3261e; --bad-bg: #fdecea; --warn: #8a5a00; --warn-bg: #fff4dc;
  --thai: "Sarabun", "TH Sarabun New", "Noto Sans Thai", Thonburi, Tahoma, sans-serif;
  --zh: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif CJK SC", "Songti SC", serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.adminlink { font-size: 13px; color: var(--muted); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--thai); }
#app { max-width: 1240px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 0; } h2 { font-size: 15px; margin: 0 0 10px; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); margin: 0; font-size: 13px; }
.hint { margin-bottom: 10px; }
.stale { color: var(--bad); font-weight: 600; }
.privacy { margin: 10px 0; font-size: 13px; color: var(--accent); }
.notice { padding: 10px 12px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); margin-bottom: 10px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
form#form { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.work { display: grid; gap: 14px; min-width: 0; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.side { position: sticky; top: 12px; }
label { display: grid; gap: 3px; font-size: 13px; color: var(--muted); }
input, select, textarea, button { font: inherit; color: var(--ink); }
input, select, textarea { width: 100%; min-height: 36px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; min-height: 0; margin: 0; }
::placeholder { color: #8b9998; opacity: 1; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button, .filebtn { min-height: 36px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; color: var(--ink); font-size: 14px; }
button:hover, .filebtn:hover { background: #eef2f1; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { background: #0b564f; }
.grid { display: grid; gap: 10px; }
.patient { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); } .patient .wide { grid-column: span 2; }
.dispense { grid-template-columns: 160px minmax(0, 1fr); }
.signers { grid-template-columns: 1.6fr 1fr 1.4fr; }
output { min-height: 36px; display: flex; align-items: center; color: var(--ink); font-size: 15px; }
.rows-head, .row { display: grid; grid-template-columns: 28px minmax(170px, 2.2fr) minmax(130px, 1.5fr) 100px 72px 62px 30px; gap: 6px; align-items: center; }
.rows-head { font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.row { padding: 3px 0; }
.row .no { text-align: right; color: var(--muted); font-size: 13px; }
.row .num { text-align: right; font-variant-numeric: tabular-nums; }
.row .remove { width: 30px; min-height: 30px; padding: 0; border-color: transparent; color: var(--muted); background: transparent; }
.row .sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qty-wrap { position: relative; } .qty-wrap input { padding-right: 44px; text-align: right; }
/* ช่องว่างยังไม่ต้องกันที่ให้หน่วย ข้อความจางบอกหน่วยแล้ว */
.qty-wrap input:placeholder-shown { padding-right: 8px; }
.qty-wrap input:placeholder-shown + .u { display: none; }
.qty-wrap .u { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); pointer-events: none; max-width: 38px; line-height: 1; text-align: right; }
.combo { position: relative; min-width: 0; }
.combo input { font-family: var(--zh), var(--thai); font-size: 16px; }
.listbox { position: absolute; z-index: 20; left: 0; right: -80px; max-height: 280px; overflow-y: auto; margin: 2px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 22px rgb(0 0 0 / .14); }
.listbox li { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; }
.listbox li[aria-selected=true], .listbox li:hover { background: #e4f1ef; }
.listbox .n { font-family: var(--zh), var(--thai); font-size: 16px; }
.listbox small { color: var(--muted); }
.listbox .p { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.invalid { border-color: var(--bad) !important; background: var(--bad-bg) !important; }
.usage { display: grid; gap: 10px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.check, .inline { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; }
.tiny { width: 62px; text-align: center; } #unit { width: auto; }
dl { margin: 0 0 12px; display: grid; gap: 6px; } dl div { display: flex; justify-content: space-between; align-items: baseline; }
dt { color: var(--muted); font-size: 14px; } dd { margin: 0; font-variant-numeric: tabular-nums; }
.grand { border-top: 1px solid var(--line); padding-top: 8px; } .grand dd { font-size: 28px; font-weight: 700; }
.totals button { width: 100%; margin-top: 8px; }
.problems { list-style: none; padding: 0; margin: 0 0 4px; display: grid; gap: 5px; max-height: 40vh; overflow-y: auto; }
.problems li { font-size: 13px; padding: 5px 8px; border-radius: 4px; line-height: 1.3; }
.problems li.error { background: var(--bad-bg); color: var(--bad); } .problems li.warn { background: var(--warn-bg); color: var(--warn); }
.problems button { all: unset; cursor: pointer; display: block; width: 100%; }
.fan { background: var(--bad-bg); border: 1px solid var(--bad); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
.fan h2 { color: var(--bad); margin-bottom: 6px; font-size: 14px; }
.fan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fan li { display: grid; gap: 2px; }
.fan .zh { font-family: var(--zh), var(--thai); font-size: 16px; }
.fan small { color: var(--muted); font-size: 12px; }
.listbox li.out .n, .listbox li.out .p { color: var(--bad); }
.row .sub.out-text { color: var(--bad); white-space: normal; }
.print-here { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.totals .print-here button { margin-top: 0; }
.send-warn { margin: 8px 0; padding: 8px 10px; border-radius: 5px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.send-qr svg { display: block; width: 100%; max-width: 380px; margin: 0 auto; background: #fff; }
#sendLink { font: 12px/1.3 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
dialog { border: 1px solid var(--line); border-radius: 10px; width: min(460px, calc(100vw - 32px)); padding: 18px; color: var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog h2 { font-size: 17px; } dialog > * + * { margin-top: 10px; }
#scanVideo { width: 100%; border-radius: 6px; background: #000; }
.scan-actions { display: flex; gap: 8px; flex-wrap: wrap; } .scan-actions.end { justify-content: flex-end; }
.filebtn { display: inline-flex; align-items: center; } .filebtn input { display: none; }

/* ฝังฟอนต์ไว้กับเว็บ ใบจึงออกมาเหมือนกันทุกเครื่อง ไม่ขึ้นกับฟอนต์ที่ติดตั้ง
   ตัวอักษร TH Sarabun เล็กกว่าอักษรจีนที่ขนาดเท่ากัน จึงขยายเฉพาะฟอนต์นี้ */
@font-face { font-family: "RxThai"; src: url("fonts/THSarabunNew.ttf") format("truetype"); font-weight: 400; font-display: block; size-adjust: 125%; }
@font-face { font-family: "RxThai"; src: url("fonts/THSarabunNew-Bold.ttf") format("truetype"); font-weight: 600 700; font-display: block; size-adjust: 125%; }
/* ใบจ่ายยา A5 แนวนอน ตารางยาซ้าย ส่วนสรุปขวา */
.sheet { display: none; width: 210mm; height: 148mm; padding: 5mm 6mm; background: #fff; color: #000; font: 7.6pt/1.15 "RxThai", var(--thai); overflow: hidden; }
.sheet * { box-sizing: border-box; }
.sheet table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.sheet td, .sheet th { border: .2mm solid #000; padding: 0 .7mm; overflow: hidden; white-space: nowrap; font-weight: 400; vertical-align: middle; }
.sheet .head td { height: 7.6mm; } .sheet .head b { display: block; font-weight: 400; font-size: 6.4pt; color: #333; }
.sheet .head .v { display: block; font-size: 8.4pt; font-weight: 600; }
.sheet .head .v.long { font-size: 6.6pt; font-weight: 600; white-space: normal; line-height: 1; }
.sheet .head td:first-child { white-space: normal; }
.sheet .layout { display: grid; grid-template-columns: 146mm 52mm; margin-top: -.2mm; align-items: start; }
.sheet .right { margin-left: -.2mm; min-width: 0; }
.sheet .items th { height: 6.4mm; text-align: center; font-size: 6.6pt; line-height: 1.05; }
.sheet .items td { height: 4mm; font-size: 7.6pt; line-height: 1; }
.sheet .items .zh { font-family: var(--zh), "RxThai"; font-size: 8.6pt; }
.sheet .items .c { text-align: center; } .sheet .items .r { text-align: right; font-variant-numeric: tabular-nums; }
.sheet .items .py { font-size: 6.6pt; } .sheet .items .m { font-size: 6.6pt; }
.sheet .foot td { height: 4.6mm; white-space: normal; padding: .3mm .7mm; }
.sheet .foot b { display: block; font-weight: 400; font-size: 6.4pt; color: #333; }
.sheet .foot .fv { display: block; font-size: 6.6pt; }
.sheet .usage-line { display: flex; gap: 0 2mm; white-space: nowrap; }
.sheet .usage-line.free { white-space: normal; overflow-wrap: anywhere; }
.sheet .usage-line .plain { font-style: normal; }
.sheet .usage-line.tick span::before { content: "☐ "; } .sheet .usage-line .on::before { content: "☑ " !important; }
.sheet .bottom { margin-top: -.2mm; border: .2mm solid #000; }
.sheet .sign { padding: .8mm 1mm; border-bottom: .2mm solid #000; display: grid; gap: .5mm; }
.sheet .sign b { font-weight: 400; font-size: 6.4pt; color: #333; display: block; }
.sheet .sign .line { display: block; min-height: 3.6mm; font-size: 8pt; font-weight: 600; overflow-wrap: anywhere; }
.sheet .sign .sig .line { min-height: 9mm; }
.sheet .money { padding: .8mm 1mm; border-bottom: .2mm solid #000; display: grid; gap: .3mm; white-space: nowrap; }
.sheet .money div { display: flex; justify-content: space-between; }
.sheet .money .t { border-top: .2mm solid #000; padding-top: .4mm; font-size: 10pt; font-weight: 700; }
.sheet .qr { padding: .6mm 1mm; display: flex; align-items: center; gap: 2mm; font-size: 6.4pt; line-height: 1.1; }
.sheet .qr svg { display: block; flex: none; width: 30mm; height: 30mm; }
.sheet .fan-line { margin-top: .4mm; font-size: 6.4pt; }
.sheet .stamp { margin-top: .6mm; font-size: 5.6pt; color: #333; display: grid; white-space: nowrap; }

#previewWrap { position: fixed; inset: 0; background: rgb(30 40 40 / .62); z-index: 40; }
.preview-bar { position: fixed; z-index: 45; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.preview-bar span { display: flex; gap: 8px; }
body.previewing { overflow: hidden; }
body.previewing .sheet { display: block; position: fixed; z-index: 42; top: 60px; left: 50%; transform: translateX(-50%) scale(var(--fit, 1)); transform-origin: top center; box-shadow: 0 10px 40px rgb(0 0 0 / .4); }

@media (max-width: 960px) {
  form#form { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .patient { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signers { grid-template-columns: minmax(0, 1fr); }
  .rows-head { display: none; }
  .row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--line); }
  .row .combo { grid-column: 2 / 4; } .row .method { grid-column: 2 / 4; }
  .row .qty-wrap { grid-column: 2; } .row .total-cell { grid-column: 3; }
  .row .price-cell { grid-column: 2; } .row .remove { grid-column: 3; justify-self: end; }
  .row .total-cell:not(:empty)::before { content: "รวม "; color: var(--muted); font-size: 13px; }
  .row .price-cell:not(:empty)::before { content: "ราคา "; color: var(--muted); font-size: 13px; }
  .listbox { right: 0; }
}
@media (max-width: 480px) { .dispense { grid-template-columns: minmax(0, 1fr); } }

/* โทรศัพท์: ช่องและปุ่มใหญ่พอแตะ ตัวอักษร 16px กัน iPhone ซูมหน้าเมื่อแตะช่อง */
.phone-bar { display: none; }
@media (max-width: 640px) {
  #app { padding: 12px; padding-bottom: 84px; }
  .privacy { margin: 8px 0; }
  .panel { padding: 12px; }
  input, select, textarea, .combo input { font-size: 16px; min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; }
  button, .filebtn { min-height: 44px; font-size: 15px; }
  label { font-size: 14px; }
  .top-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .check { min-height: 44px; font-size: 15px; }
  .choice-row { gap: 0 14px; }
  .tiny { width: 76px; }
  .row { grid-template-columns: 22px minmax(0, 1fr) auto auto 44px; gap: 8px; }
  .row .combo, .row .method { grid-column: 2 / -1; }
  .row .qty-wrap { grid-column: 2; } .row .total-cell { grid-column: 3; } .row .price-cell { grid-column: 4; } .row .remove { grid-column: 5; }
  .row .no { align-self: start; padding-top: 12px; }
  .combo input { scroll-margin-top: 8px; }
  .row .remove { width: 44px; min-height: 44px; font-size: 20px; }
  .listbox { max-height: 42vh; }
  .listbox li { padding: 10px 8px; }
  .sheet-frame { overflow-x: auto; }
  dialog { padding: 14px; }
  .scan-actions button, .scan-actions .filebtn { flex: 1 1 100%; justify-content: center; }
  .phone-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgb(0 0 0 / .08); }
  .phone-bar div { display: grid; min-width: 0; line-height: 1.2; }
  .phone-bar small { color: var(--muted); font-size: 13px; } .phone-bar small.bad { color: var(--bad); font-weight: 600; }
  .phone-bar b { font-size: 20px; font-variant-numeric: tabular-nums; }
  body:has(#form input:not([type=checkbox], [type=radio]):focus) .phone-bar { display: none; }
  body.previewing .phone-bar { display: none; }
  /* ปุ่มส่งอยู่แถบล่างแล้ว ไม่ต้องซ้ำในกล่องสรุป */
  .totals #send { display: none; }
}

@media print {
  html, body { background: #fff; margin: 0; }
  #app, #previewWrap, dialog, .phone-bar { display: none !important; }
  .sheet-frame { overflow: visible !important; }
  .sheet, body.previewing .sheet { display: block !important; position: static !important; transform: none !important; box-shadow: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* กระดาษ A4 ใช้ครึ่งแผ่นบนขนาดจริง มีเส้นประไว้ตัด */
  .sheet.a4 { height: 148.5mm; border-bottom: .2mm dashed #888; }
}

/* เครื่องพิมพ์กลาง */
.station { max-width: 620px; }
.station-form { display: grid; gap: 12px; margin-top: 12px; }
.paper-pick { min-width: 170px; }
#video { width: 100%; border-radius: 6px; background: #000; }
.notice.good { background: #e4f1ef; color: var(--accent); }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.station #result { margin-top: 12px; }
.station #result .problems { max-height: none; margin-bottom: 10px; }
.station-open .sheet { display: block; margin: 12px auto 24px; box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
@media print { .station-open .sheet { margin: 0; box-shadow: none; } }
@media (max-width: 860px) { .sheet-frame { overflow-x: auto; } .station-open .sheet { margin-left: 8px; } }