/* ระบบตรวจสุขภาพประจำปีเจ้าหน้าที่ — stylesheet */

:root {
  color-scheme: light;
  --bg: #f2f7fa;
  --surface: #ffffff;
  --surface-2: #eaf2f7;
  --border: rgba(8, 47, 73, 0.12);
  --border-strong: #bfd0dc;
  --grid: #dfe9f0;
  --text: #0b1f2e;
  --text-2: #36505f;
  --muted: #5f7685;
  --accent: #0369a1;
  --accent-hover: #075985;
  --accent-ink: #ffffff;
  --accent-soft: #e0f0fa;
  --danger: #b42323;
  --focus: #0284c7;

  /* status palette (fixed) */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --pending: #a3a29b;
  --good-soft: rgba(12, 163, 12, 0.12);
  --warning-soft: rgba(250, 178, 25, 0.2);
  --serious-soft: rgba(236, 131, 90, 0.2);
  --critical-soft: rgba(208, 59, 59, 0.13);
  --pending-soft: rgba(163, 162, 155, 0.2);

  /* categorical series (age groups) */
  --series-1: #2a78d6;
  --series-2: #eb6834;

  /* top bar */
  --bar-bg: linear-gradient(115deg, #0284c7 0%, #0369a1 50%, #075985 100%);
  --bar-ink: #ffffff;
  --bar-muted: rgba(255, 255, 255, 0.8);
  --bar-track: rgba(0, 0, 0, 0.14);
  --bar-hover: rgba(255, 255, 255, 0.14);
  --bar-line: rgba(255, 255, 255, 0.35);
  --bar-active-bg: #ffffff;
  --bar-active-ink: #0369a1;
  --bar-shadow: 0 2px 14px rgba(7, 89, 133, 0.28);

  /* sequential ramp (ordinal classes) */
  --seq-0: #c7e5f6; --seq-1: #94cbec; --seq-2: #5aaedd; --seq-3: #2a8bc8; --seq-4: #0d68a3; --seq-5: #0a4672;

  /* form sections */
  --sec-staff: #0369a1; --sec-staff-soft: #e0f0fa;
  --sec-history: #6e4fd8; --sec-history-soft: #efeafd;
  --sec-vitals: #0f8a83; --sec-vitals-soft: #e2f3f1;
  --sec-labs: #4352c4; --sec-labs-soft: #e9ebfa;
  --sec-summary: #b5367f; --sec-summary-soft: #fae8f2;
  --sec-follow: #52677a; --sec-follow-soft: #e9eef3;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.04);
  /* Sarabun: ฟอนต์มาตรฐานหนังสือราชการ ใช้กับเนื้อหาและใบรายงาน · IBM Plex Sans Thai: หัวข้อและตัวเลขสรุป
     ถ้าออฟไลน์จะใช้ฟอนต์ไทยของเครื่องแทน */
  --font: "Sarabun", "Noto Sans Thai", "Leelawadee UI", "Leelawadee", "Thonburi", Tahoma, system-ui, sans-serif;
  --font-display: "IBM Plex Sans Thai", "Sarabun", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
}

/* ธีมมืดใช้เฉพาะบนจอ เวลาพิมพ์ใช้สีสว่างเสมอ */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #08131b;
    --surface: #0e1c27;
    --surface-2: #142634;
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: #27404f;
    --grid: #183041;
    --text: #e4f1f8;
    --text-2: #b0c7d4;
    --muted: #7f9aab;
    --accent: #38bdf8;
    --accent-hover: #67cdfa;
    --accent-ink: #04202f;
    --accent-soft: #0d2c3e;
    --danger: #ef6b6b;
    --focus: #67cdfa;
    --series-1: #3987e5;
    --series-2: #d95926;
    --good-soft: rgba(12, 163, 12, 0.2);
    --warning-soft: rgba(250, 178, 25, 0.18);
    --serious-soft: rgba(236, 131, 90, 0.2);
    --critical-soft: rgba(208, 59, 59, 0.25);
    --pending-soft: rgba(163, 162, 155, 0.18);
    --bar-bg: linear-gradient(115deg, #0f3550 0%, #0b283d 50%, #071a28 100%);
    --bar-ink: #e4f1f8;
    --bar-muted: rgba(228, 241, 248, 0.66);
    --bar-track: rgba(255, 255, 255, 0.05);
    --bar-hover: rgba(255, 255, 255, 0.08);
    --bar-line: rgba(56, 189, 248, 0.4);
    --bar-active-bg: #38bdf8;
    --bar-active-ink: #04202f;
    --bar-shadow: 0 1px 0 rgba(56, 189, 248, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
    --sec-staff: #38bdf8; --sec-staff-soft: #0d2c3e;
    --seq-0: #0e3348; --seq-1: #124a69; --seq-2: #18678f; --seq-3: #2387bb; --seq-4: #48b4e8; --seq-5: #a5e1fb;
    --sec-history: #a48ffb; --sec-history-soft: #272140;
    --sec-vitals: #2dd4bf; --sec-vitals-soft: #0f2e2b;
    --sec-labs: #8d97f2; --sec-labs-soft: #1f2340;
    --sec-summary: #e57ab5; --sec-summary-soft: #361c2c;
    --sec-follow: #9fb3c8; --sec-follow-soft: #1c2733;
    --shadow: none;
  }
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #08131b;
    --surface: #0e1c27;
    --surface-2: #142634;
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: #27404f;
    --grid: #183041;
    --text: #e4f1f8;
    --text-2: #b0c7d4;
    --muted: #7f9aab;
    --accent: #38bdf8;
    --accent-hover: #67cdfa;
    --accent-ink: #04202f;
    --accent-soft: #0d2c3e;
    --danger: #ef6b6b;
    --focus: #67cdfa;
    --series-1: #3987e5;
    --series-2: #d95926;
    --good-soft: rgba(12, 163, 12, 0.2);
    --warning-soft: rgba(250, 178, 25, 0.18);
    --serious-soft: rgba(236, 131, 90, 0.2);
    --critical-soft: rgba(208, 59, 59, 0.25);
    --pending-soft: rgba(163, 162, 155, 0.18);
    --bar-bg: linear-gradient(115deg, #0f3550 0%, #0b283d 50%, #071a28 100%);
    --bar-ink: #e4f1f8;
    --bar-muted: rgba(228, 241, 248, 0.66);
    --bar-track: rgba(255, 255, 255, 0.05);
    --bar-hover: rgba(255, 255, 255, 0.08);
    --bar-line: rgba(56, 189, 248, 0.4);
    --bar-active-bg: #38bdf8;
    --bar-active-ink: #04202f;
    --bar-shadow: 0 1px 0 rgba(56, 189, 248, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
    --sec-staff: #38bdf8; --sec-staff-soft: #0d2c3e;
    --seq-0: #0e3348; --seq-1: #124a69; --seq-2: #18678f; --seq-3: #2387bb; --seq-4: #48b4e8; --seq-5: #a5e1fb;
    --sec-history: #a48ffb; --sec-history-soft: #272140;
    --sec-vitals: #2dd4bf; --sec-vitals-soft: #0f2e2b;
    --sec-labs: #8d97f2; --sec-labs-soft: #1f2340;
    --sec-summary: #e57ab5; --sec-summary-soft: #361c2c;
    --sec-follow: #9fb3c8; --sec-follow-soft: #1c2733;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.3; margin: 0; font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.12rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- top bar ---------- */
:root { --bar-h: 78px; }
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
  padding-block: 16px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: var(--bar-bg);
  color: var(--bar-ink);
  box-shadow: var(--bar-shadow);
}
.topbar :focus-visible { outline-color: var(--bar-ink); }
.brand { justify-self: start; max-width: 100%; display: flex; align-items: center; gap: 12px; color: var(--bar-ink); text-decoration: none; min-width: 0; }
.brand-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bar-active-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.brand-mark svg { width: 25px; height: 25px; fill: var(--bar-active-ink); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.brand-text strong { font-family: var(--font-display); font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: 0.86rem; color: var(--bar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav, .bar-tools { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--bar-track); }
.nav { justify-self: center; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.bar-tools { justify-self: end; }
.nav a, .tool-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--bar-muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav a svg, .tool-link svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover, .tool-link:hover { background: var(--bar-hover); color: var(--bar-ink); }
.nav a.is-active, .tool-link.is-active { background: var(--bar-active-bg); color: var(--bar-active-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.tool-link { padding: 7px 12px; }
.tool-sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--bar-line); }
.theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bar-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-short { display: none; }
.theme-toggle:hover { background: var(--bar-hover); color: var(--bar-ink); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

main {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 64px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

/* ---------- common blocks ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.page-head p { margin: 4px 0 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}
.card > h2 { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.card-head p { margin: 0; font-size: 0.88rem; }
.card-head h2 { display: flex; align-items: center; gap: 10px; }
.card-flush { padding: 0; overflow: hidden; }
.empty { text-align: center; padding: 64px 16px; }
.empty .actions { justify-content: center; margin-top: 20px; }
.empty-note { padding: 16px 4px; margin: 0; }
.notice { background: var(--surface-2); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.notice-alert { background: var(--critical-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--danger); border-color: currentColor; }
.btn-danger-solid { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn-danger-solid:hover { filter: brightness(0.92); background: var(--critical); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ghost { border-color: transparent; color: var(--accent); }
.btn-sm { min-height: 30px; padding: 3px 10px; font-size: 0.85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.link-btn { background: none; border: 0; padding: 2px 0; color: var(--accent); font: inherit; font-size: 0.82rem; cursor: pointer; text-align: left; text-decoration: underline; }

.tag {
  display: inline-block;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}
.tag-alert { background: var(--critical-soft); color: var(--text); font-weight: 600; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 4px 2px 0;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 0.8rem;
}
.chip-more { color: var(--muted); }
.incomplete { color: var(--danger); font-weight: 600; }

/* risk shapes & badges: color + shape + label (never color alone) */
.shape { flex: none; vertical-align: -1px; }
.shape.lv-normal { fill: var(--good); }
.shape.lv-risk { fill: var(--warning); }
.shape.lv-high { fill: var(--serious); }
.shape.lv-critical { fill: var(--critical); }
.shape.lv-pending { fill: none; stroke: var(--pending); }
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.risk-badge.lv-normal { background: var(--good-soft); }
.risk-badge.lv-risk { background: var(--warning-soft); }
.risk-badge.lv-high { background: var(--serious-soft); }
.risk-badge.lv-critical { background: var(--critical-soft); }
.risk-badge.lv-pending { background: var(--pending-soft); }

/* ---------- filters & fields ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-bottom: 16px;
}
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld > span:first-child { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.fld > span em { font-style: normal; font-weight: 400; color: var(--muted); }
.fld-grow { flex: 1 1 240px; }
.fld-wide { grid-column: 1 / -1; }
.req { color: var(--danger); }
input[type="text"], input[type="search"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
input:user-invalid:not([type="radio"]):not([type="checkbox"]) { border-color: var(--critical); }
.filters .fld { min-width: 150px; }
.hint { font-size: 0.76rem; color: var(--muted); }
.fstat { display: flex; align-items: flex-start; gap: 5px; font-size: 0.8rem; color: var(--text-2); min-height: 0; }
.fstat:empty { display: none; }
.fstat .shape { margin-top: 4px; }
.fstat[data-level="risk"], .fstat[data-level="high"], .fstat[data-level="critical"] { color: var(--text); font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.9rem;
  cursor: pointer;
}
.choice input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

.grid + .fld { margin-top: 16px; }
.ent-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ent-card { position: relative; display: block; cursor: pointer; }
.ent-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ent-card > span {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
}
.ent-card strong { font-size: 1.05rem; }
.ent-card small { color: var(--muted); font-size: 0.78rem; }
.ent-card input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ent-card input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.ctx-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 0.88rem;
}
.pill { padding: 1px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; }
.pill-strong { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- form layout ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.form-main { min-width: 0; }
.form-side { position: sticky; top: calc(var(--bar-h) + 12px); display: flex; flex-direction: column; gap: 14px; }

/* ส่วนของแบบบันทึก: แต่ละส่วนมีสีประจำ (--c สีหลัก, --cs สีอ่อน) */
.sec-staff { --c: var(--sec-staff); --cs: var(--sec-staff-soft); }
.sec-history { --c: var(--sec-history); --cs: var(--sec-history-soft); }
.sec-vitals { --c: var(--sec-vitals); --cs: var(--sec-vitals-soft); }
.sec-labs { --c: var(--sec-labs); --cs: var(--sec-labs-soft); }
.sec-summary { --c: var(--sec-summary); --cs: var(--sec-summary-soft); }
.sec-follow { --c: var(--sec-follow); --cs: var(--sec-follow-soft); }
.sec { border-top: 4px solid var(--c); scroll-margin-top: calc(var(--bar-h) + 16px); }
.sec-head { display: flex; align-items: flex-start; gap: 14px; margin: -2px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--grid); }
.sec-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cs); color: var(--c); }
.sec-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sec-title { flex: 1; min-width: 0; }
.sec-no { display: block; font-size: 0.74rem; font-weight: 700; color: var(--c); }
.sec-title h2 { font-size: 1.12rem; }
.sec-title p { margin: 2px 0 0; font-size: 0.84rem; color: var(--muted); }
.sec-head .check { align-self: center; }
.sec .choice input:checked + span { background: var(--cs); border-color: var(--c); color: var(--c); }
.sec .ent-card input:checked + span { background: var(--cs); border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.sec .lab-box-head { background: var(--cs); }
.sec .lab-sub h4 { color: var(--c); }
.sec .link-btn { color: var(--c); }
.sec .lab-box.has-values .lab-count { background: var(--c); color: var(--surface); }
.fgroup + .fgroup { margin-top: 20px; }
.fgroup-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font); font-size: 0.82rem; font-weight: 700; color: var(--c); }
.fgroup-label::after { content: ''; flex: 1; height: 1px; background: var(--grid); }
.fgroup-label small { font-weight: 400; color: var(--muted); }
.fgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 16px; }
.fgrid-gap { margin-top: 14px; }
.s1 { grid-column: span 1; }
.s2 { grid-column: span 2; }
.s3 { grid-column: span 3; }
.s4 { grid-column: span 4; }
.s6 { grid-column: span 6; }
.s8 { grid-column: span 8; }
.s12 { grid-column: span 12; }
.or-sep { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.or-sep span { padding: 2px 10px; border-radius: 999px; background: var(--cs); color: var(--c); font-size: 0.78rem; font-weight: 600; }

/* สารบัญแบบบันทึก (คอลัมน์ขวา) */
.form-steps { padding: 14px 12px; margin: 0; }
.form-steps h2 { margin: 0 6px 8px; font-size: 0.86rem; color: var(--text-2); }
.step-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.step-link:hover { background: var(--surface-2); color: var(--text); }
.step-link.is-current { background: var(--cs); color: var(--text); font-weight: 600; }
.step-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--c);
  border-radius: 50%;
  color: var(--c);
  font-size: 0.74rem;
  font-weight: 700;
}
.step-link[data-state="done"] .step-dot { background: var(--c); color: var(--surface); }
.step-link[data-state="part"] .step-dot { background: var(--cs); }
.step-name { flex: 1; min-width: 0; }
.step-stat { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-link[data-state="todo"] .step-stat { color: var(--danger); font-weight: 600; }

/* ผลตรวจ: กล่องแยกหมวด (2 คอลัมน์) · แถว = ชื่อ/ค่าปกติ | ช่องกรอก | หน่วย */
.lab-boxes { columns: 2 340px; column-gap: 14px; }
.lab-box {
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 0 14px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.lab-box.is-extra { border-style: dashed; }
.lab-box-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -14px 2px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--grid);
  border-radius: 10px 10px 0 0;
  background: var(--surface-2);
  font-size: 0.9rem;
}
.lab-box-head > span:first-child { flex: 1; }
.lab-count { padding: 0 8px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-box.has-values .lab-count { background: var(--accent-soft); color: var(--accent); }
.lab-sub h4 { margin: 10px 0 0; font-size: 0.78rem; font-weight: 700; color: var(--accent); }
.lab-sub + .lab-sub, .lab-row + .lab-sub { border-top: 1px solid var(--border-strong); margin-top: 4px; }
.lab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.2rem 3.9rem;
  align-items: center;
  gap: 2px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--grid);
}
.lab-box-head + .lab-row, .lab-sub h4 + .lab-row { border-top: 0; }
.lab-row select { grid-column: 2 / 4; }
.lab-row.is-text { grid-template-columns: minmax(0, 1fr); }
.lab-name { display: flex; flex-direction: column; min-width: 0; font-size: 0.86rem; font-weight: 600; line-height: 1.35; }
label.lab-name { cursor: pointer; }
.lab-name .tag { margin-left: 4px; font-weight: 500; }
.lab-meta { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 0.74rem; font-weight: 400; color: var(--muted); }
.lab-meta .fstat { font-size: 0.74rem; }
.lab-meta .fstat .shape { margin-top: 3px; }
.lab-meta .fstat:not(:empty) + .lab-ref { display: none; }
.lab-row input, .lab-row select, .aud-grid input { min-height: 34px; padding: 5px 8px; font-size: 0.9rem; }
.lab-row input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.lab-row .unit { font-size: 0.74rem; color: var(--muted); line-height: 1.2; }
.lab-calc { display: flex; align-items: center; justify-content: flex-end; min-height: 34px; padding: 5px 8px; border-radius: 8px; background: var(--surface-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.aud-grid { width: 100%; margin: 8px 0 4px; border-collapse: collapse; table-layout: fixed; }
.aud-grid th { font-size: 0.74rem; font-weight: 600; color: var(--text-2); padding: 0 2px 4px; }
.aud-grid tbody th { width: 2.6rem; text-align: left; padding: 0; }
.aud-grid td { padding: 2px; }
.aud-grid input { padding: 4px 2px; text-align: center; font-variant-numeric: tabular-nums; }
.aud-meta { padding-bottom: 4px; }
.form-actions {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 -4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
.form-actions .spacer { flex: 1; }
.fa-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fa-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.risk-panel h2 { margin-bottom: 12px; }
.risk-panel h3 { margin: 14px 0 8px; font-size: 0.92rem; }
.panel-level { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; }
.panel-level strong { font-size: 1.15rem; display: block; }
.panel-level small { color: var(--text-2); }
.panel-level.lv-normal { background: var(--good-soft); }
.panel-level.lv-risk { background: var(--warning-soft); }
.panel-level.lv-high { background: var(--serious-soft); }
.panel-level.lv-critical { background: var(--critical-soft); }
.panel-level.lv-pending { background: var(--pending-soft); }
.panel-advice { font-size: 0.88rem; margin: 10px 0; }
.finding-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: max(140px, calc(100vh - 640px)); overflow-y: auto; }
.finding-list li { display: flex; gap: 8px; font-size: 0.85rem; }
.finding-list .shape { margin-top: 5px; }
.advice { color: var(--text-2); }

/* ---------- summary overview ---------- */
.overview { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 20px 28px; padding: 22px 24px; }
.ov-total { display: flex; flex-direction: column; gap: 2px; padding-right: 28px; border-right: 1px solid var(--grid); }
.ov-label { font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.ov-value { font-family: var(--font-display); font-size: 3.1rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-value small { margin-left: 6px; font-size: 1rem; font-weight: 600; color: var(--muted); }
.ov-sub { font-size: 0.84rem; color: var(--muted); }
.ov-risk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ov-title { font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ov-title .muted { font-family: var(--font); font-size: 0.8rem; font-weight: 400; }
.ov-bar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.ov-bar span { flex-basis: 0; min-width: 4px; }
.ov-bar .lv-normal { background: var(--good); }
.ov-bar .lv-risk { background: var(--warning); }
.ov-bar .lv-high { background: var(--serious); }
.ov-bar .lv-critical { background: var(--critical); }
.ov-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ov-level {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ov-level:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ov-level-label { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ov-level-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ov-level-sub { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.seg button {
  padding: 4px 12px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--border); }
.print-only { display: none; }

/* หัวการ์ดหน้าสรุป */
.dash-title { display: flex; align-items: center; gap: 10px; font-size: 1.06rem; }
.dash-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.dash-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ov-total .dash-title { margin-bottom: 8px; font-size: 0.95rem; }
.ov-cover { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 0.82rem; color: var(--text-2); }
.ov-cover-bar, .kpi-bar, .fp-prog-bar { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ov-cover-bar span, .kpi-bar span, .fp-prog-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ov-cover-link { margin-top: 10px; font-size: 0.8rem; }

/* ตัวชี้วัดสุขภาพสำคัญ */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 3px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.kpi-label { font-weight: 700; font-size: 0.92rem; }
.kpi-crit { font-size: 0.74rem; color: var(--muted); min-height: 2.6em; line-height: 1.3; }
.kpi-value { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-value small { margin-left: 2px; font-size: 0.95rem; color: var(--muted); }
.kpi-bar { margin: 2px 0 4px; height: 6px; }
.kpi-sub { font-size: 0.78rem; color: var(--text-2); }
.kpi-empty { margin-top: 8px; font-size: 0.82rem; color: var(--muted); }

/* หน้าสรุป: กราฟวิเคราะห์ */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: stretch; }
.dash-grid > .card { display: flex; flex-direction: column; }
.dash-grid > .card > .legend-row { margin-top: auto; padding-top: 14px; }
.dash-grid > .card > .sx { flex: 1; justify-content: space-evenly; }
.dash-grid > .card > #chart-risk, .dash-grid #chart-risk > .viz { flex: 1; display: flex; flex-direction: column; }
.dash-grid #chart-risk .sbar-list { flex: 1; justify-content: space-evenly; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 0.82rem; color: var(--text-2); }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 3px; }
.sw.is-m, .pyr-side.is-m .pyr-bar, .sx-bar.is-m span { background: var(--series-1); }
.sw.is-f, .pyr-side.is-f .pyr-bar, .sx-bar.is-f span { background: var(--series-2); }
.q0 { background: var(--seq-0); }
.q1 { background: var(--seq-1); }
.q2 { background: var(--seq-2); }
.q3 { background: var(--seq-3); }
.q4 { background: var(--seq-4); }
.q5 { background: var(--seq-5); }

/* ปิรามิดอายุ–เพศ: แท่งออกจากแกนกลาง ตัวเลขติดปลายแท่ง */
.pyr { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pyr-head, .pyr-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.6rem minmax(0, 1fr); align-items: center; }
.pyr-head { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--grid); font-size: 0.82rem; color: var(--text-2); }
.pyr-head > span { display: inline-flex; align-items: center; gap: 6px; }
.pyr-head > span:nth-child(2) { justify-content: center; color: var(--muted); font-size: 0.76rem; }
.pyr-head .is-m { justify-content: flex-end; padding-right: 12px; }
.pyr-head .is-f { padding-left: 12px; }
.pyr-head b { color: var(--text); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.pyr-head em { font-style: normal; white-space: nowrap; }
.pyr-body { flex: 1; display: grid; grid-auto-rows: minmax(40px, 50px); align-content: start; }
.pyr-band { align-self: stretch; display: grid; place-items: center; border-inline: 1px solid var(--border-strong); color: var(--text-2); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.pyr-side { display: flex; align-items: center; gap: 6px; height: 100%; }
.pyr-side.is-m { flex-direction: row-reverse; }
.pyr-bar { flex: none; height: min(26px, 62%); }
.pyr-side.is-m .pyr-bar { border-radius: 6px 0 0 6px; }
.pyr-side.is-f .pyr-bar { border-radius: 0 6px 6px 0; }
.pyr-val { min-width: 1.6rem; color: var(--text-2); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pyr-side.is-m .pyr-val { text-align: right; }

.hm { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font-size: 0.84rem; }
.hm th { padding: 2px; color: var(--text-2); font-size: 0.8rem; font-weight: 600; text-align: center; }
.hm th small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 400; }
.hm thead th:first-child { width: 30%; }
.hm tbody th { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-dept tbody th small { display: inline; margin-left: 6px; }
.hm { min-width: 420px; }
.hm-dept { min-width: 600px; }
.hm td { padding: 7px 2px; border-radius: 6px; background: color-mix(in srgb, var(--accent) var(--v, 0%), var(--surface)); text-align: center; font-variant-numeric: tabular-nums; }
.hm td.is-strong { color: var(--accent-ink); font-weight: 700; }
.hm td.hm-na { background: var(--surface-2); color: var(--muted); }

.sx { display: flex; flex-direction: column; gap: 10px; }
.sx-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 10px; }
.sx-label { font-size: 0.86rem; font-weight: 600; }
.sx-line { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.sx-line + .sx-line { margin-top: 3px; }
.sx-line b { width: 2.6rem; font-variant-numeric: tabular-nums; }
.sx-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sx-bar span { display: block; height: 100%; border-radius: inherit; }

.dists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.dist-head { display: flex; flex-direction: column; margin-bottom: 8px; }
.dist-label { font-size: 0.92rem; font-weight: 700; }
.dist-bar { display: flex; gap: 2px; height: 16px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.dist-bar span { flex-basis: 0; min-width: 3px; }
.dist-legend { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--text-2); }
.dist-legend li { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto 3.2rem; align-items: center; gap: 8px; }
.dist-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.dist-legend li span { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* หน้านำเข้าข้อมูล */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 20px;
  border: 2px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone strong { font-size: 1.02rem; }
.dz-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.dz-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.imp-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.imp-stats div { display: flex; flex-direction: column; min-width: 0; }
.imp-stats dt { font-size: 0.78rem; color: var(--muted); }
.imp-stats dd { margin: 0; font-size: 0.92rem; }
.imp-stats dd b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.imp-file dd { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-sub { margin: 16px 0 6px; font-size: 0.88rem; color: var(--text-2); }
.imp-notes, .imp-list { margin: 0; padding-left: 20px; font-size: 0.88rem; color: var(--text-2); }
.imp-notes li + li, .imp-list li + li { margin-top: 5px; }

/* ความคืบหน้าการติดตาม */
.fs-pending { background: var(--pending); }
.fs-notified { background: #7cc4ea; }
.fs-referred { background: #3b82c4; }
.fs-treating { background: #6e4fd8; }
.fs-done { background: #0f8a83; }
.fp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.fp-bar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.fp-bar span { flex-basis: 0; min-width: 4px; }
.fp-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--text-2); }
.fp-legend li { display: flex; align-items: center; gap: 8px; }
.fp-legend b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.fp-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grid); }
.fp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.fp-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.fp-chip:hover { background: var(--surface-2); }
.fp-chip.fp-overdue { border-color: var(--critical); background: var(--critical-soft); }
.fp-chip.is-active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.fp-chip.is-active b { color: inherit; }
.fp-table td:first-child { white-space: nowrap; }
.fp-prog { display: flex; align-items: center; gap: 8px; min-width: 140px; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.fp-prog-bar { flex: 1; }
.filter-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); font-size: 0.86rem; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td { padding: 9px 10px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: top; }
.table thead th { font-size: 0.8rem; color: var(--text-2); font-weight: 700; background: var(--surface-2); border-bottom-color: var(--border-strong); white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .num small { color: var(--muted); }
.table tbody tr:hover { background: var(--surface-2); }
.table tr.is-subtotal td { font-weight: 600; background: var(--surface-2); }
.table tr.is-total td { font-weight: 700; border-top: 2px solid var(--border-strong); }
.table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
.table-matrix th[scope="row"] { font-weight: 500; min-width: 240px; }
.table-matrix td { padding: 6px; }
.cell-check { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.cell-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.cell-check small { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.table-criteria th[scope="row"] { font-weight: 600; }
.table-criteria td { font-size: 0.85rem; }
.strong-link { font-weight: 600; text-decoration: none; }
.strong-link:hover { text-decoration: underline; }
.inline-select, .inline-date { min-height: 32px; padding: 4px 8px; font-size: 0.85rem; width: auto; max-width: 190px; }
.probs { min-width: 220px; }
.col-name { min-width: 190px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tab .count { padding: 0 8px; border-radius: 999px; background: var(--surface-2); font-size: 0.8rem; }
.tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.tab-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.tab-advice { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 0.9rem; }

/* ---------- charts ---------- */
.viz { position: relative; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 12px; font-size: 0.84rem; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; }
.legend-icon { display: inline-flex; }
.sbar-list { display: flex; flex-direction: column; }
.sbar-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; padding: 5px 0; }
.sbar-row.is-strong { margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--grid); }
.sbar-row.is-strong .sbar-label span { font-weight: 700; }
.sbar-label { display: flex; flex-direction: column; line-height: 1.25; }
.sbar-label span { font-weight: 600; font-size: 0.9rem; }
.sbar-label small { color: var(--muted); font-size: 0.78rem; }
.sbar-track { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.sbar-track.is-empty { align-items: center; padding-left: 10px; color: var(--muted); font-size: 0.8rem; }
.sbar-seg {
  flex-basis: 0;
  min-width: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: filter 0.12s;
}
.sbar-seg.is-link { cursor: pointer; }
.sbar-seg:hover { filter: brightness(1.1) saturate(1.05); }
.sbar-seg:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.sbar-val { white-space: nowrap; pointer-events: none; }
.tooltip {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  max-width: 280px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  font-size: 0.82rem;
  pointer-events: none;
}
.tooltip-title { color: var(--text-2); margin-bottom: 4px; }
.tooltip-row { display: flex; align-items: center; gap: 8px; }
.tooltip-row strong { font-size: 0.95rem; }
.tooltip-row span:last-child { color: var(--text-2); }
.tooltip-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 2000;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 10px;
  background: #1f1f1d;
  color: #f0efec;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
  pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast.is-error { background: #8f1d1d; }
.toast.is-ok { background: #075985; }

/* ---------- dialog & demo banner ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(11, 11, 11, 0.45);
}
.modal {
  width: min(460px, 100%);
  padding: 20px 22px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}
.modal h2 { margin-bottom: 8px; }
.modal p { margin: 0 0 14px; white-space: pre-line; color: var(--text-2); }
.modal .fld { margin-bottom: 14px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.demo-bar {
  padding-block: 8px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.86rem;
  border-bottom: 1px solid var(--border);
}
.demo-mode [data-action="print"] { display: none; }

/* ---------- report ---------- */
.report-tools { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 16px; }
.report {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.report h2 { font-size: 1rem; margin: 18px 0 8px; }
.report-head { text-align: center; border-bottom: 2px solid var(--text); padding-bottom: 10px; margin-bottom: 14px; }
.report-head h1 { font-size: 1.3rem; margin: 4px 0; }
.report-info { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.report-info th { text-align: left; font-weight: 600; color: var(--text-2); width: 16%; padding: 4px 8px 4px 0; vertical-align: top; }
.report-info td { padding: 4px 12px 4px 0; vertical-align: top; }
.report-table { font-size: 0.85rem; }
.report-table th, .report-table td { padding: 5px 8px; }
.report-table .grp { font-weight: 600; background: var(--surface-2); }
.interp { display: inline-flex; align-items: flex-start; gap: 5px; }
.interp .shape { margin-top: 4px; }
.report-summary { margin-top: 18px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border); }
.report-summary.lv-normal { background: var(--good-soft); }
.report-summary.lv-risk { background: var(--warning-soft); }
.report-summary.lv-high { background: var(--serious-soft); }
.report-summary.lv-critical { background: var(--critical-soft); }
.report-summary h2 { margin-top: 0; }
.report-summary p { margin: 6px 0; }
.report-level { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; text-align: center; font-size: 0.9rem; line-height: 2; }

/* ---------- ตรวจสุขภาพประจำปี (เจ้าหน้าที่ค้นหาข้อมูลของตนเอง) ---------- */
.ck { max-width: 1040px; margin: 0 auto; }
.ck-search { padding: 22px; }
.ck-form { display: flex; gap: 10px; }
.ck-form input { min-height: 48px; padding: 10px 14px; font-size: 1.08rem; }
.ck-form .btn { flex: none; min-height: 48px; padding-inline: 22px; font-size: 1rem; }
.ck-privacy { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 0.84rem; color: var(--muted); }
.ck-privacy svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-search .notice { margin: 14px 0 0; }
.ck-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sec-staff-soft);
  color: var(--sec-staff);
}
.ck-avatar svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ck-avatar.is-lg { width: 52px; height: 52px; }
.ck-hello { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ck-hello h1 { margin: 0; }
.ck-hello p { margin: 2px 0 0; }
.ck-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.ck-facts div { min-width: 0; }
.ck-facts dt { font-size: 0.8rem; color: var(--muted); }
.ck-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.ck-ent-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: var(--warning-soft); }

/* รายการตรวจตามสิทธิ */
.pk-note { margin: 0 0 12px; font-size: 0.9rem; color: var(--text-2); }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pk-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.pk-item > div { flex: 1; min-width: 0; }
.pk-item small { display: block; margin-top: 2px; color: var(--text-2); font-size: 0.84rem; line-height: 1.45; }
.pk-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
}
.pk-item.is-done { background: var(--good-soft); border-color: transparent; }
.pk-item.is-done .pk-check { border-color: var(--good); background: var(--good); color: #fff; }
.pk-status { flex: none; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.pk-item.is-done .pk-status { color: var(--text); }
.pk-fast { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--warning-soft); font-size: 0.9rem; }

/* ระดับความเสี่ยงย้อนหลัง: เส้นเวลาแนวนอน */
.rk-time { list-style: none; margin: 16px 0 0; padding: 0 0 4px; display: flex; overflow-x: auto; }
.rk-time li { position: relative; flex: 1 0 140px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 8px; text-align: center; }
.rk-time li::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--border); }
.rk-time li:first-child::before { left: 50%; }
.rk-time li:last-child::before { right: 50%; }
.rk-time li:only-child::before { display: none; }
.rk-dot { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.rk-time b { margin-top: 4px; }
.rk-time small { color: var(--muted); font-size: 0.8rem; }

/* คำแนะนำจากผลตรวจล่าสุด: กลุ่มตามระดับ แถวละรายการ 3 คอลัมน์ (ผล | แปลผล | คำแนะนำ) */
.adv-cols, .adv-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1.35fr); gap: 2px 18px; }
.adv-cols { padding: 0 12px 6px 15px; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.adv-group { border-left: 3px solid var(--pending); border-radius: 4px; }
.adv-group + .adv-group { margin-top: 12px; }
.adv-group.lv-risk { border-color: var(--warning); }
.adv-group.lv-high { border-color: var(--serious); }
.adv-group.lv-critical { border-color: var(--critical); }
.adv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 7px 12px; border-radius: 0 8px 8px 0; font-size: 0.9rem; font-weight: 500; }
.adv-head strong { font-weight: 700; }
.adv-head span { color: var(--text-2); font-size: 0.84rem; }
.lv-risk > .adv-head { background: var(--warning-soft); }
.lv-high > .adv-head { background: var(--serious-soft); }
.lv-critical > .adv-head { background: var(--critical-soft); }
.adv-list { list-style: none; margin: 0; padding: 0; }
.adv-row { align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 0.9rem; line-height: 1.45; }
.adv-row:last-child { border-bottom: 0; }
.adv-val { color: var(--text-2); white-space: nowrap; }
.adv-do { color: var(--text-2); }
.adv-none { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--good-soft); }

/* แนวโน้มค่าตรวจสำคัญ */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tr-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.tr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tr-label { font-weight: 600; }
.tr-ref { flex: none; font-size: 0.78rem; color: var(--muted); }
.tr-now { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-value { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.tr-value small { margin-left: 4px; font-family: var(--font); font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.trend { display: block; width: 100%; height: auto; overflow: visible; }
.trend-band { fill: var(--good-soft); }
.trend-line { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linejoin: round; }
.trend-dot { stroke: var(--surface); stroke-width: 2.5; }
.trend-val { font-size: 12px; font-weight: 700; fill: var(--text); }
.trend-x { font-size: 11px; fill: var(--muted); }
.tr-change { margin: 0; font-size: 0.84rem; color: var(--text-2); }
.tr-change.is-ok { color: var(--muted); }
.tr-change.is-better { color: var(--good); font-weight: 600; }
.tr-change.is-worse { color: var(--critical); font-weight: 600; }
@media (max-width: 860px) {
  .ck-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adv-cols { display: none; }
  .adv-row { grid-template-columns: minmax(0, 1fr); padding: 7px 12px; }
  .adv-text { font-size: 0.86rem; }
  .adv-do { font-size: 0.86rem; }
  .adv-do:not(:empty)::before { content: '→ '; }
  .pk-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .ck-form { flex-direction: column; }
  .ck-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-hello .ck-avatar { display: none; }
  .ck .page-head .actions, .ck .page-head .actions .btn { width: 100%; }
}

/* ---------- ระบบออนไลน์: เข้าสู่ระบบ · ผู้ใช้ · สถานะการบันทึก ---------- */
.tool-login, .tool-logout, .tool-user { display: none; }
.remote.is-public .tool-login, .remote:not(.is-public) .tool-logout { display: inline-flex; }
.remote:not(.is-public) .tool-user {
  display: inline-block;
  max-width: 12rem;
  padding: 0 6px 0 10px;
  overflow: hidden;
  color: var(--bar-ink);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* ยังไม่เข้าสู่ระบบ: เห็นเฉพาะหน้าตรวจสุขภาพประจำปี */
.remote.is-public .nav a:not([data-route="checkup"]),
.remote:not(.role-admin) .tool-link[data-route="settings"] { display: none; }
.role-viewer a[href^="#form"], .role-viewer .nav a[data-route="import"] { display: none !important; }
.remote .local-only { display: none !important; }
.sync-status {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bar-active-bg);
  color: var(--bar-active-ink);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.sync-status[hidden] { display: none; }
.boot-note { padding: 48px 0; text-align: center; }

.login-wrap { display: grid; place-items: center; min-height: calc(100vh - var(--bar-h) - 120px); }
.login-card { width: min(100%, 400px); padding: 28px; text-align: center; }
.login-card h1 { margin: 12px 0 4px; }
.login-mark {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.login-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; text-align: left; }
.login-form input { min-height: 44px; }
.login-form .btn { min-height: 44px; justify-content: center; }
.login-error { min-height: 1.4em; margin: 0; color: var(--critical); font-size: 0.88rem; font-weight: 600; }
.login-alt { margin: 18px 0 0; font-size: 0.88rem; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dash-grid, .dists { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .overview { grid-template-columns: minmax(0, 1fr); }
  .ov-total { padding-right: 0; border-right: 0; }
  .ov-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form-side { position: static; order: -1; }
  .form-side .finding-list { max-height: none; }
  .form-steps { display: none; }
}
/* แถบบน: จอกลางซ่อนไอคอนเมนู · จอแคบย้ายเมนูลงแถวสอง (โลโก้ + เครื่องมืออยู่แถวบน) · มือถือเป็นแถบแท็บ */
@media (max-width: 1480px) {
  .nav a svg { display: none; }
}
@media (max-width: 1340px) {
  :root { --bar-h: 134px; }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .nav a { flex: 1 0 auto; justify-content: center; }
}
@media (max-width: 780px) {
  :root { --bar-h: 136px; }
  .topbar { gap: 10px; padding-block: 10px; }
  .brand { gap: 10px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  .brand-mark svg { width: 22px; height: 22px; }
  .brand-text strong { font-size: 1rem; }
  .brand-text span { font-size: 0.8rem; }
  .theme-toggle { width: 38px; height: 38px; }
  .tool-label { display: none; }
  .tool-link { padding: 7px 9px; }
  .remote:not(.is-public) .tool-user { display: none; }
  .nav a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 0.78rem; }
  .nav a svg { display: block; width: 18px; height: 18px; }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-short { display: inline; }
}
@media (max-width: 480px) {
  .pyr-head, .pyr-row { grid-template-columns: minmax(0, 1fr) 5.4rem minmax(0, 1fr); }
  .pyr-head { font-size: 0.78rem; }
  .pyr-head em { display: none; }
  .pyr-head .is-m { padding-right: 6px; }
  .pyr-head .is-f { padding-left: 6px; }
}
@media (max-width: 720px) {
  .fgrid > * { grid-column: span 12; }
  .fgrid > .s2, .fgrid > .s3, .fgrid > .s4 { grid-column: span 6; }
  .fgrid > .or-sep { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; }
  .sec-head { gap: 12px; }
  .sec-icon { width: 38px; height: 38px; }
  main {
    padding-top: 16px;
    padding-bottom: 48px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .card { padding: 16px; }
  .ent-cards { grid-template-columns: minmax(0, 1fr); }
  .sbar-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .filters .fld { flex: 1 1 140px; min-width: 0; }
  .report { padding: 20px 16px; }
  .signatures { grid-template-columns: minmax(0, 1fr); }
  .lab-box { padding: 0 12px 6px; }
  .lab-box-head { margin: 0 -12px 2px; padding: 8px 12px; }
  .lab-row { grid-template-columns: minmax(0, 1fr) 5.2rem 3.1rem; gap: 2px 8px; }
}

/* ---------- print ---------- */
@page { size: A4; margin: 12mm; }
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 12.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .no-print, .filters, .form-actions, .toast, .tooltip { display: none !important; }
  .print-only { display: block; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .pyr-body { grid-auto-rows: 34px; }
  .card, .hm td, .dist-bar span, .pyr-bar, .sx-bar span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main { max-width: none; padding: 0; }
  .card, .ov-level, .report { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .report { border: 0; padding: 0; max-width: none; }
  .table-wrap { overflow: visible; }
  .table thead { display: table-header-group; }
  .table tr { break-inside: avoid; }
}