:root {
  --bg: #fdf4f8;
  --surface: #ffffff;
  --border: #f3d5e3;
  --text: #2a1720;
  --muted: #7d5e6c;
  --primary: #db2777;
  --primary-text: #ffffff;
  --ok: #15803d;
  --ok-bg: #dcfce7;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --info: #a21caf;
  --info-bg: #fae8ff;
  --soft: #fce7f3;
  --brand-from: #ec4899;
  --brand-to: #be185d;
  --on-brand: #ffffff;
  --on-brand-soft: #ffffffcc;
  --shadow: 0 10px 30px #be185d1f;
  --logo-bg: #ffffff;
  --radius: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a0f15;
    --surface: #24161e;
    --border: #3f2733;
    --text: #f6e9ef;
    --muted: #c19aab;
    --primary: #f472b6;
    --primary-text: #4a0626;
    --ok: #4ade80;
    --ok-bg: #14532d55;
    --warn: #fbbf24;
    --warn-bg: #78350f55;
    --bad: #f87171;
    --bad-bg: #7f1d1d55;
    --info: #e879f9;
    --info-bg: #701a7555;
    --soft: #83184355;
    --brand-from: #9d174d;
    --brand-to: #500724;
    --on-brand: #fdf2f8;
    --on-brand-soft: #fdf2f8bb;
    --shadow: 0 10px 30px #00000066;
    --logo-bg: #ffffff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Segoe UI", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
}
h1, h2, h3 { margin: 0 0 .6rem; line-height: 1.25; }
h2 { font-size: 1.15rem; }
small, .muted { color: var(--muted); }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  padding: .6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.15rem; color: var(--primary); }
/* โลโก้โรงพยาบาลวางบนการ์ดสีขาวเสมอ (สีโลโก้เดิมจะได้ชัดทั้งบนพื้นชมพูและโหมดมืด) */
.hosp-logo { flex: none; display: inline-flex; align-items: center; background: var(--logo-bg); border-radius: 10px; padding: 4px 8px; box-shadow: var(--shadow); }
.hosp-logo img { display: block; height: 30px; width: auto; }
.hosp-logo.big { padding: .6rem .9rem; border-radius: 14px; margin-bottom: 1.3rem; }
.hosp-logo.big img { height: 64px; }
.brand-text small { margin-left: .35rem; }
.brand small { font-weight: 400; color: var(--muted); }
#tabs { display: flex; gap: .25rem; flex: 1; overflow-x: auto; scrollbar-width: thin; }
#tabs button { white-space: nowrap; display: inline-flex; align-items: center; gap: .55rem; }
#tabs button svg { flex: none; opacity: .85; }
#tabs button {
  border: 0; background: none; color: var(--muted);
  padding: .45rem .75rem; border-radius: 8px; cursor: pointer; font: inherit;
}
#tabs button:hover { background: var(--bg); color: var(--text); }
#tabs button[aria-current="page"] { background: var(--soft); color: var(--primary); font-weight: 600; }
#userbox { display: flex; align-items: center; gap: .4rem; }
#userbox span { display: grid; line-height: 1.2; text-align: right; margin-right: .3rem; }
#userbox small { font-size: .78rem; }
#userbox .btn + .btn { margin-left: 0; }

main { max-width: 1240px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.site-footer {
  display: grid; gap: .15rem;
  max-width: 1240px; margin: 0 auto; padding: 1rem 1rem 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
}
.site-footer strong { color: var(--text); }

.card {
  box-shadow: var(--shadow);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  min-width: 0;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 1rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem;
}
.stat:hover { border-color: var(--primary); }
.stat.attn { border-color: var(--warn); background: var(--warn-bg); }
.stat b { display: block; font-size: 1.7rem; }
.stat span { color: var(--muted); font-size: .9rem; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.toolbar h2 { margin: 0 auto 0 0; }
.toolbar input, .toolbar select { width: auto; min-width: 200px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: .82rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; text-align: right; }
td .btn { vertical-align: middle; }
.list .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); }

.btn {
  display: inline-block; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: .45rem .9rem; border-radius: 8px; cursor: pointer; font: inherit; text-decoration: none;
}
.btn:hover { border-color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }
.btn.small { padding: .22rem .6rem; font-size: .86rem; }
.btn.block { display: block; width: 100%; padding: .6rem; }
.btn + .btn { margin-left: .3rem; }
.btn:disabled { opacity: .5; cursor: default; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.muted { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.plus { color: var(--ok); font-weight: 600; }
.minus { color: var(--bad); font-weight: 600; }
.empty { color: var(--muted); padding: 1rem; margin: 0; }
.hint { background: var(--soft); border-radius: 8px; padding: .5rem .7rem; font-size: .9rem; margin: 0 0 .8rem; }

/* หน้าเฉพาะของระบบ */
.stat small { font-size: .9rem; }
.stats .stat:not([data-act]) { cursor: default; }
.stats .stat:not([data-act]):hover { border-color: var(--border); }
.meter-list { display: grid; gap: .7rem; }
.meter-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .6rem; font-size: .92rem; }
.meter-label span { overflow-wrap: anywhere; }
.bar { height: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; margin-top: .25rem; }
.bar i { display: block; height: 100%; background: var(--primary); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.bar.alt i { background: var(--info); }
.bar.over i { background: var(--bad); }
.mini-meter { display: flex; align-items: center; gap: .4rem; min-width: 110px; }
.mini-meter .bar { flex: 1; margin: 0; }
.doc-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.doc-counts .stat b { font-size: 1.3rem; }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fields.two .field.wide { grid-column: 1 / -1; }
.msg-list { margin: 0 0 1rem; padding-left: 1.2rem; max-height: 40vh; overflow-y: auto; font-size: .9rem; }
.msg-list.bad li { color: var(--bad); }
.msg-list.warn li { color: var(--warn); }

.timeline h3 { font-size: 1rem; margin: 1rem 0 .4rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.timeline h3:first-child { margin-top: 0; }
.timeline ol { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--border); }
.timeline li { position: relative; display: grid; grid-template-columns: 6.5rem 1fr auto; gap: .6rem; padding: .5rem 0 .6rem .4rem; }
.timeline li::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: .85rem; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); }
.timeline li.initial::before { background: var(--muted); }
.tl-date { color: var(--muted); font-size: .88rem; }
.tl-body { min-width: 0; overflow-wrap: anywhere; }
.tl-meta { display: block; }
.tl-amount { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.chat { display: grid; gap: .6rem; max-height: 50vh; overflow-y: auto; padding: .2rem; }
.msg { max-width: 85%; padding: .55rem .8rem; border-radius: 12px; border: 1px solid var(--border); }
.msg div { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.me { justify-self: end; background: var(--soft); }
.msg.hr { justify-self: start; background: var(--info-bg); }
.msg small { display: block; font-size: .78rem; margin-bottom: .15rem; }

textarea { min-height: 6rem; resize: vertical; }
.checkbox { display: flex; align-items: center; gap: .5rem; }
.checkbox input { width: auto; }
.toolbar .checkbox input { width: auto; min-width: 0; flex: none; }
.print-only { display: none; }

/* ฟอร์มและกล่องข้อความ */
dialog {
  border: 1px solid var(--border); border-radius: 14px; padding: 0;
  background: var(--surface); color: var(--text);
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}
dialog.wide { width: min(900px, calc(100vw - 32px)); }
dialog::backdrop { background: #0008; }
.form { padding: 1.2rem; }
.form h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fields { display: grid; gap: .8rem; }
.fields.step { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.fields.two { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.field { display: grid; gap: .25rem; }
.field > span { font-size: .88rem; font-weight: 600; }
.field small { font-size: .8rem; }
input, select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px; padding: .45rem .6rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.form-error { color: var(--bad); background: var(--bad-bg); padding: .5rem .7rem; border-radius: 8px; margin: .8rem 0 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin-top: 1.2rem; }
.actions .btn + .btn { margin-left: 0; }
.doc-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.doc-actions .btn + .btn { margin-left: 0; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem 1rem; margin-bottom: 1rem; }
.info-grid small { font-size: .8rem; }

/* หน้าเข้าสู่ระบบ */
body.auth .topbar { display: none; }
body.auth main { max-width: 980px; display: grid; place-items: center; min-height: calc(100vh - 6rem); }
.auth-wrap {
  width: 100%; display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow);
}
.auth-brand {
  position: relative; padding: 2.4rem 2.2rem; color: var(--on-brand); overflow: hidden;
  background: linear-gradient(150deg, var(--brand-from), var(--brand-to));
}
.auth-brand::before, .auth-brand::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--on-brand); opacity: .09;
}
.auth-brand::before { width: 260px; height: 260px; right: -90px; top: -80px; }
.auth-brand::after { width: 180px; height: 180px; left: -60px; bottom: -70px; }
.auth-brand h1 { font-size: 1.7rem; margin: 0 0 .3rem; }
.auth-brand p { margin: 0 0 1.6rem; color: var(--on-brand-soft); }
.auth-brand ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; position: relative; }
.auth-brand li { display: flex; align-items: center; gap: .6rem; }
.auth-brand li span { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #ffffff26; }
.auth-form { padding: 2.4rem 2.2rem; display: flex; flex-direction: column; justify-content: center; }
.auth-form h2 { font-size: 1.45rem; margin-bottom: .25rem; }
.auth-form .sub { color: var(--muted); margin: 0 0 1.2rem; }
.auth-form input { padding: .65rem .8rem; border-radius: 10px; }
.auth-form .btn.block { margin-top: 1.3rem; padding: .75rem; border-radius: 10px; font-size: 1rem;
  background: linear-gradient(135deg, var(--brand-from), var(--brand-to)); border: 0; }
.auth-form .tip { margin: 1.1rem 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 760px) {
  .auth-wrap { grid-template-columns: 1fr; border-radius: 18px; }
  .auth-brand { padding: 1.6rem 1.4rem; }
  .auth-brand ul { display: none; }
  .auth-brand p { margin-bottom: 0; }
  .hosp-logo.big img { height: 48px; }
  .auth-form { padding: 1.6rem 1.4rem; }
}

/* เมนูด้านข้างบนจอกว้าง: พื้นชมพูไล่สี ตัวอักษรขาว */
@media (min-width: 1000px) {
  body:not(.auth) { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; }
  body:not(.auth) .topbar {
    grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1rem; padding: 1.3rem 1rem;
    border: 0; color: var(--on-brand);
    background: linear-gradient(180deg, var(--brand-from), var(--brand-to));
  }
  body:not(.auth) .brand { flex-direction: column; align-items: stretch; gap: .6rem; color: var(--on-brand); font-size: 1.3rem; }
  body:not(.auth) .brand .hosp-logo { justify-content: center; padding: .55rem .7rem; border-radius: 14px; }
  body:not(.auth) .brand .hosp-logo img { height: 62px; }
  body:not(.auth) .brand-text { padding: 0 .3rem; }
  body:not(.auth) .brand small { display: block; margin: 0; font-size: .85rem; color: var(--on-brand-soft); }
  body:not(.auth) #userbox {
    order: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem;
    padding: .7rem .8rem; border-radius: 12px; background: #ffffff24;
  }
  body:not(.auth) #userbox span { text-align: left; margin: 0; min-width: 0; }
  body:not(.auth) #userbox b { color: var(--on-brand); overflow-wrap: anywhere; }
  body:not(.auth) #userbox small { color: var(--on-brand-soft); }
  body:not(.auth) #userbox .btn { background: var(--surface); color: var(--primary); border: 0; font-weight: 600; }
  body:not(.auth) #tabs { order: 2; flex-direction: column; overflow: visible; gap: .2rem; }
  body:not(.auth) #tabs button { color: var(--on-brand); font-size: 1rem; text-align: left; padding: .65rem .85rem; border-radius: 10px; }
  body:not(.auth) #tabs button svg { opacity: 1; }
  body:not(.auth) #tabs button:hover { background: #ffffff26; color: var(--on-brand); }
  body:not(.auth) #tabs button[aria-current="page"] { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: 0 4px 14px #0000001f; }
  body:not(.auth) main, body:not(.auth) .site-footer { grid-column: 2; width: 100%; }
}

#toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 20;
  background: var(--text); color: var(--surface); padding: .6rem 1rem; border-radius: 8px;
  max-width: calc(100vw - 32px); box-shadow: 0 6px 20px #0003;
}
#toast.error { background: var(--bad); color: #fff; }



@media (max-width: 640px) {
  main { padding: 1rem 1rem 3rem; }
  .toolbar input, .toolbar select { min-width: 0; flex: 1; }
  .brand small { display: none; }
  #tabs { order: 3; flex: 1 0 100%; padding-bottom: .2rem; }
  #userbox { width: 100%; justify-content: space-between; }
  #userbox span { text-align: left; margin-right: auto; }
  .timeline li { grid-template-columns: 1fr auto; }
  .tl-date { grid-column: 1 / -1; }
  .msg { max-width: 95%; }
}

/* พิมพ์หรือบันทึกเป็น PDF (หน้าภาพรวม) */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 12px; }
  .topbar, .site-footer, #toast, dialog, .no-print { display: none !important; }
  main { max-width: none; padding: 0; }
  .print-only { display: block; }
  .print-head { text-align: center; margin-bottom: 1rem; }
  .print-head h1 { font-size: 1.3rem; margin: 0; }
  .print-head p { margin: .2rem 0 0; }
  .card, .stat { break-inside: avoid; }
  .grid2 { grid-template-columns: 1fr 1fr; }
  a { color: inherit; text-decoration: none; }
}
.toolbar .btn + .btn { margin-left: 0; }