/* TH Sarabun (open-source twin of "TH Sarabun New", the Thai government
   standard font). Loaded from Google Fonts so the app reads cleanly in Thai
   without requiring the font to be installed locally. Falls back to a system
   copy if installed. */
@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --border: #d2d2d7;
  --border-strong: #c6c6cc;
  --text: #1d1d1f;
  --text-2: #424245;
  --muted: #6e6e73;

  /* Apple system palette (light) */
  --primary: #0071e3;
  --primary-hover: #0077ed;
  --primary-active: #006edb;
  --accent: #34c759;
  --accent-hover: #30b653;
  --danger: #ff3b30;
  --warn: #ff9f0a;
  --indigo: #5e5ce6;
  --purple: #af52de;
  --pink: #ff375f;
  --orange: #ff9500;
  --yellow: #ffd60a;
  --mint: #00c7be;
  --teal: #40c8e0;
  --cyan: #64d2ff;

  /* Tint-aware text shades for AAA-ish contrast on white */
  --teal-ink: #117a8f;
  --mint-ink: #008e88;
  --green-ink: #239e44;
  --orange-ink: #b66800;
  --indigo-ink: #4a48c0;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Sarabun", "TH Sarabun New", "TH SarabunPSK",
               -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

header.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header.topbar h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* Hospital eyebrow on every in-app topbar so the screen identifies itself
   even after sign-in. The login screen has its own title and is not affected
   (it uses .login-card, not .topbar). Print stylesheet already hides
   .topbar, so this never leaks onto printed order sheets. */
header.topbar h1::before {
  content: "Ratchaburi Hospital · โรงพยาบาลราชบุรี";
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

header.topbar .who {
  color: var(--muted);
  font-size: 13px;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,0.04);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  text-align: left;
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
tr:last-child td { border-bottom: 0; }

th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: transparent;
  border-bottom: 1px solid var(--border);
}

tr.clickable { cursor: pointer; transition: background-color .12s ease; }
tr.clickable:hover { background: var(--surface-2); }

/* ---- Keyboard support (see shared/keyboard.js) -------------------------- */
/* The "cockpit" highlight moved by ↑/↓ in any list/table. Shared by the
   doctor station, nurse queues, pharmacy queue and admin tables so arrow-key
   navigation looks identical everywhere. */
tr.kbd-highlight td { background: rgba(0,113,227,0.08); }
tr.kbd-highlight td:first-child {
  box-shadow: inset 3px 0 0 0 var(--primary, #0071e3), inset 0 0 0 9999px rgba(0,113,227,0.08);
}
li.kbd-highlight, .kbd-highlight:not(tr):not(td) { background: rgba(0,113,227,0.10); }

/* Visible focus for things the browser doesn't ring on its own: bare links and
   anything we make tabbable. Buttons/inputs already have their own rings. */
a:not(.btn):focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
tr[tabindex]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
}

/* "?" cheat-sheet overlay. Native <dialog>, so Esc + backdrop close for free. */
dialog.kbd-help {
  border: none;
  border-radius: var(--radius, 14px);
  padding: 0;
  max-width: 460px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  color: var(--text);
  background: var(--surface);
}
dialog.kbd-help::backdrop { background: rgba(0,0,0,0.35); }
.kbd-help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.kbd-help-head h2 { margin: 0; font-size: 17px; }
.kbd-help-body { padding: 8px 20px; max-height: 60vh; overflow: auto; }
.kbd-help-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.kbd-help-row:last-child { border-bottom: none; }
.kbd-help-keys { flex: 0 0 130px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kbd-help-desc { color: var(--text); font-size: 14px; }
.kbd-help-foot { margin: 0; padding: 12px 20px 16px; font-size: 12px; color: var(--muted); }
.kbd-plus { font-size: 11px; color: var(--muted); margin: 0 2px; }
kbd {
  display: inline-block;
  font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-2, #f1f1f4);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--text);
  white-space: nowrap;
}

/* App dialogs (add-patient, edit, password, confirm…). Each <dialog> sets its
   own inline border/radius/width, but none defined elevation or a backdrop, so
   modals floated flat over the page. Give every dialog a soft shadow and a
   frosted dim behind it — the Apple "sheet" feel — without disturbing the more
   specific dialog.kbd-help rules above. */
dialog {
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
dialog::backdrop {
  background: rgba(0,0,0,0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Appointment rows whose order has already been saved/printed get a soft
   green tint so the doctor can pick out unfinished work at a glance.
   Hover still wins so the row remains obviously clickable. */
tr.has-order { background: rgba(52, 199, 89, 0.10); }
tr.has-order:hover { background: rgba(52, 199, 89, 0.18); }

button, .btn {
  font: inherit;
  font-weight: 500;
  background: var(--primary);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: 980px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
button:hover, .btn:hover { background: var(--primary-hover); text-decoration: none; }
button:active, .btn:active { background: var(--primary-active); transform: scale(0.98); }
button:focus-visible, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,113,227,0.25);
}

button.secondary, .btn.secondary {
  background: rgba(0,0,0,0.05);
  color: var(--text);
}
button.secondary:hover, .btn.secondary:hover { background: rgba(0,0,0,0.08); }
button.secondary:active, .btn.secondary:active { background: rgba(0,0,0,0.12); }

button.accent, .btn.accent { background: var(--accent); }
button.accent:hover, .btn.accent:hover { background: var(--accent-hover); }
button.danger, .btn.danger { background: var(--danger); }

button.ghost {
  background: transparent;
  color: var(--primary);
  padding: 8px 12px;
}
button.ghost:hover { background: rgba(0,113,227,0.08); }

/* Small button — the standard for inline row actions (edit ✎, undo, compact
   toolbar buttons) that were previously hand-tweaking padding/font-size with
   one-off inline styles. Composes with .secondary/.danger/etc. */
button.sm, .btn.sm { padding: 5px 12px; font-size: 13px; }
/* Icon-only square button (single glyph like ✎ or ✕) — keeps a tidy circle
   instead of a stretched pill. */
button.icon, .btn.icon {
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
}

button.toggle-on {
  background: var(--primary);
  color: #fff;
}

/* Apple-style segmented control */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 980px;
  overflow: hidden;
  background: var(--surface);
  margin-top: 6px;
}
.seg button {
  background: transparent;
  color: var(--text);
  border-radius: 0;
  padding: 6px 14px;
  font-size: 13px;
  border-right: 1px solid var(--border);
  box-shadow: none;
  transition: background-color .12s ease;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: rgba(0,0,0,0.04); }
.seg button.active { background: var(--primary); color: #fff; }
.seg button.active:hover { background: var(--primary-hover); }
.seg button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 3px rgba(0,113,227,0.35);
  z-index: 1;
  position: relative;
}

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }

label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}

input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,113,227,0.15);
}

input[type="date"] { padding: 9px 12px; }

/* Disabled controls — there was previously no inert state, so a disabled
   field looked identical to an editable one. Mute the surface + text and
   switch the cursor so "you can't touch this" reads at a glance. Applies to
   form fields and to buttons mid-request (e.g. the login button while it
   verifies). */
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-2);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--muted); /* iOS keeps text black otherwise */
  opacity: 1;
}
button:disabled, .btn:disabled,
button[disabled], .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  /* Hold the resting look while disabled — no active lift. Colour is left to
     each variant (primary/secondary/danger…) so a disabled button keeps its
     own hue rather than being forced to one colour. */
  transform: none;
  box-shadow: none;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.metric {
  background: var(--surface-2);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.metric .label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.metric .value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.metric .unit { font-size: 12px; color: var(--muted); margin-left: 4px; font-weight: 500; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 980px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(0,113,227,0.10);
  color: var(--primary);
  white-space: nowrap;
}
.badge.secondary { background: rgba(0,0,0,0.06); color: var(--text-2); }
.badge.warn    { background: rgba(255,159,10,0.16); color: #b87000; }
.badge.purple  { background: rgba(175,82,222,0.12); color: var(--purple); }
.badge.indigo  { background: rgba(94,92,230,0.12);  color: var(--indigo-ink); }
.badge.teal    { background: rgba(64,200,224,0.18); color: var(--teal-ink); }
.badge.mint    { background: rgba(0,199,190,0.16);  color: var(--mint-ink); }
.badge.green   { background: rgba(52,199,89,0.16);  color: var(--green-ink); }
.badge.orange  { background: rgba(255,149,0,0.18);  color: var(--orange-ink); }
.badge.pink    { background: rgba(255,55,95,0.12);  color: var(--pink); }

/* Card tint variants — keeps the Apple white surface, paints a 4px accent
   strip on the left and tints the H2 in the same hue. */
.card[class*="tint-"] { padding-left: 20px; border-left-width: 4px; border-left-style: solid; }
.card.tint-blue   { border-left-color: var(--primary); }
.card.tint-blue   > h2 { color: var(--primary); }
.card.tint-purple { border-left-color: var(--purple); }
.card.tint-purple > h2 { color: var(--purple); }
.card.tint-indigo { border-left-color: var(--indigo); }
.card.tint-indigo > h2 { color: var(--indigo-ink); }
.card.tint-teal   { border-left-color: var(--teal); }
.card.tint-teal   > h2 { color: var(--teal-ink); }
.card.tint-mint   { border-left-color: var(--mint); }
.card.tint-mint   > h2 { color: var(--mint-ink); }
.card.tint-green  { border-left-color: var(--accent); }
.card.tint-green  > h2 { color: var(--green-ink); }
.card.tint-orange { border-left-color: var(--orange); }
.card.tint-orange > h2 { color: var(--orange-ink); }
.card.tint-pink   { border-left-color: var(--pink); }
.card.tint-pink   > h2 { color: var(--pink); }

/* Metric tile tint variants */
.metric[class*="tint-"] { background: var(--surface); }
.metric.tint-blue   { border-color: rgba(0,113,227,0.25);  background: rgba(0,113,227,0.05); }
.metric.tint-blue   .label { color: var(--primary); }
.metric.tint-purple { border-color: rgba(175,82,222,0.28); background: rgba(175,82,222,0.05); }
.metric.tint-purple .label { color: var(--purple); }
.metric.tint-mint   { border-color: rgba(0,199,190,0.28);  background: rgba(0,199,190,0.06); }
.metric.tint-mint   .label { color: var(--mint-ink); }
.metric.tint-teal   { border-color: rgba(64,200,224,0.28); background: rgba(64,200,224,0.06); }
.metric.tint-teal   .label { color: var(--teal-ink); }
.metric.tint-orange { border-color: rgba(255,149,0,0.28);  background: rgba(255,149,0,0.06); }
.metric.tint-orange .label { color: var(--orange-ink); }

/* Button extras — only when a section explicitly opts in. Keeps the default
   primary button blue everywhere else. */
button.indigo, .btn.indigo { background: var(--indigo); }
button.indigo:hover, .btn.indigo:hover { background: #4a48c0; }
button.purple, .btn.purple { background: var(--purple); }
button.purple:hover, .btn.purple:hover { background: #9a3cc7; }
button.teal, .btn.teal { background: var(--teal); }
button.teal:hover, .btn.teal:hover { background: #2faec7; }

.toolbar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }
.toolbar label { margin: 0; }
.toolbar > label > input,
.toolbar > input { margin-top: 6px; }

.muted { color: var(--muted); }
.right { text-align: right; }

/* Login screen */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 600px at 0% 0%,    rgba(0,113,227,0.22),  transparent 55%),
    radial-gradient(900px 600px at 100% 0%,  rgba(175,82,222,0.22), transparent 55%),
    radial-gradient(900px 700px at 100% 100%, rgba(0,199,190,0.26), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, rgba(255,149,0,0.18),   transparent 60%),
    linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
  padding: 24px;
}
.login-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 360px;
  box-shadow: var(--shadow-lg);
}
.login-card h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.login-card p.sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.login-card .field { margin-bottom: 14px; }
.login-card button {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-md);
}

/* Dose grid */
.dose-line {
  display: grid;
  grid-template-columns: 1.4fr .9fr .9fr .9fr 1.1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dose-line:last-child { border-bottom: 0; }
.dose-line .name { font-weight: 600; letter-spacing: -0.01em; }
.dose-line .prev { color: var(--muted); font-size: 12px; }
.dose-line.header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 8px 4px;
}
.dose-line input[type="number"] { padding: 8px 10px; font-weight: 500; }
.dose-line button.secondary {
  padding: 6px 10px;
  border-radius: 980px;
  font-size: 13px;
}

/* Password strength meter (rendered under a new-password input) */
.pwd-meter {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
.pwd-meter-bars {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}
.pwd-meter-bars span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.15s ease;
}
.pwd-meter-label {
  font-weight: 600;
  min-height: 1.2em;
}
.pwd-meter-hint {
  color: var(--muted);
  min-height: 1.2em;
}

/* ---------- Responsive (phones & small tablets) ---------- */

/* Small laptops / iPad landscape — the doctor topbar packs 6+ items
   (Manage users, Manage regimens, My signature, Change password, who,
   Sign out) and crowds below ~1000px on a not-fullscreen window. Let it
   wrap so nothing spills off the right edge. */
@media screen and (max-width: 1024px) {
  header.topbar { flex-wrap: wrap; gap: 8px; row-gap: 8px; padding: 10px 16px; }
  header.topbar > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
  }
  /* Override per-button inline margin so the wrapped row stays evenly spaced. */
  header.topbar > div > * { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Tablets — tighten card chrome and stack the 7-col chemo dose grid into
   labelled mini-cards. The grid was unreadable between ~720–900px when
   only chrome-tightening applied, so the stack now kicks in here. */
@media screen and (max-width: 900px) {
  main { padding: 22px 16px 56px; }
  .card { padding: 18px 18px; }
  .card[class*="tint-"] { padding-left: 14px; }

  .dose-line {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
  }
  .dose-line:last-child { border-bottom: 0; }
  .dose-line.header { display: none; }

  /* Toolbars with many controls (Doctor Station has 6+) wrap cleanly. */
  .toolbar { row-gap: 10px; }
}

/* Phones — stack the topbar, collapse .row / .toolbar grids, let
   wide tables scroll horizontally, fold the chemo dose grid into
   stacked mini-cards. Single-file responsive layer: all pages
   share this stylesheet, so no per-page markup changes are needed. */
@media screen and (max-width: 720px) {
  /* 16px on inputs prevents iOS Safari from auto-zooming on focus. */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }

  header.topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 14px;
  }
  header.topbar h1 { font-size: 15px; }
  header.topbar > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  /* Override inline margin-left / margin-right on individual nav buttons. */
  header.topbar > div > * { margin: 0 !important; }
  header.topbar .who { font-size: 12px; }

  main { padding: 14px 12px 48px; }

  .card {
    padding: 16px 14px;
    margin-bottom: 14px;
    border-radius: var(--radius-md);
  }
  .card[class*="tint-"] { padding-left: 12px; }

  /* Stack form rows; override inline fixed flex-basis values
     (e.g. flex:0 0 260px) used on individual pages. */
  .row { flex-direction: column; gap: 12px; }
  .row > * {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100%;
  }

  /* Toolbars: every control becomes a full-width row. */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar > * {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  .toolbar .spacer { display: none; }

  /* Slightly larger tap targets. Segmented-control buttons stay compact. */
  button, .btn { padding: 10px 16px; }
  .seg button { padding: 8px 14px; }

  /* Defensive fallback for any unwrapped <table>: drop to a horizontally
     scrollable block so the row doesn't widen the page. The preferred
     pattern is to wrap the table in .table-scroll (below), which adds an
     edge-fade indicator so the user can see more columns exist. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  /* Preferred pattern: <div class="table-scroll"><table>…</table></div>.
     Scroll-shadow technique — two white "cover" panels are attached to
     the scrollable content (local), two soft shadows are attached to the
     wrapper (scroll). At rest, the cover panels sit over the shadows so
     edges look flat. When the user scrolls right, the right-edge cover
     slides off-screen revealing the shadow underneath — a clear "more →"
     hint. Same in reverse on the left after scrolling. */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    background-image:
      linear-gradient(to right, var(--surface), var(--surface)),
      linear-gradient(to left,  var(--surface), var(--surface)),
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.18), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.18), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .table-scroll > table {
    display: table;
    width: max-content;
    min-width: 100%;
    margin: 0;
    background: transparent;
  }
  th, td { padding: 10px 10px; }

  /* (Chemo dose grid stacking moved to the ≤900px block — it was unreadably
     tight between 720–900px.) */

  /* Login card fills the screen but caps at the original width. */
  .login-card { width: min(360px, 100%); padding: 28px 22px; }

  /* Metric tiles: fixed two-up on phones instead of auto-fit. */
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metric { padding: 12px 12px; }
  .metric .value { font-size: 20px; }
}

/* Very narrow phones (≤ 380px). */
@media screen and (max-width: 380px) {
  header.topbar h1 { font-size: 14px; }
  .metrics { grid-template-columns: 1fr; }
  button, .btn { padding: 10px 14px; font-size: 13px; }
}

/* --- Compact colour-coded topbar nav ------------------------------------
   The old topbar listed every cross-link as a full-size grey pill, which
   overflowed on laptops and gave no visual cue of where each link goes.
   These pills are smaller, wrap cleanly, and each destination keeps one
   colour on every page (regimens = purple, users = orange, backup = teal,
   verify = mint, audit = indigo, doctor = blue, nurse = pink,
   pharmacy = green, sign out = red). */
header.topbar .nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
header.topbar .nav .who { margin: 0 4px; white-space: nowrap; }
header.topbar .nav .nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,0.14);
  margin: 0 4px;
  flex-shrink: 0;
}

button.pill, .btn.pill {
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  color: var(--text-2);
}
button.pill:hover, .btn.pill:hover { background: rgba(0,0,0,0.09); }
button.pill:active, .btn.pill:active { background: rgba(0,0,0,0.13); }

.pill.t-blue          { background: rgba(0,113,227,0.10);  color: var(--primary); }
.pill.t-blue:hover    { background: rgba(0,113,227,0.18); }
.pill.t-purple        { background: rgba(175,82,222,0.10); color: var(--purple); }
.pill.t-purple:hover  { background: rgba(175,82,222,0.18); }
.pill.t-orange        { background: rgba(255,149,0,0.12);  color: var(--orange-ink); }
.pill.t-orange:hover  { background: rgba(255,149,0,0.22); }
.pill.t-teal          { background: rgba(64,200,224,0.14); color: var(--teal-ink); }
.pill.t-teal:hover    { background: rgba(64,200,224,0.26); }
.pill.t-mint          { background: rgba(0,199,190,0.12);  color: var(--mint-ink); }
.pill.t-mint:hover    { background: rgba(0,199,190,0.22); }
.pill.t-green         { background: rgba(52,199,89,0.12);  color: var(--green-ink); }
.pill.t-green:hover   { background: rgba(52,199,89,0.22); }
.pill.t-indigo        { background: rgba(94,92,230,0.10);  color: var(--indigo-ink); }
.pill.t-indigo:hover  { background: rgba(94,92,230,0.18); }
.pill.t-pink          { background: rgba(255,55,95,0.10);  color: var(--pink); }
.pill.t-pink:hover    { background: rgba(255,55,95,0.18); }
.pill.t-red           { background: rgba(255,59,48,0.10);  color: var(--danger); }
.pill.t-red:hover     { background: rgba(255,59,48,0.18); }

/* On phones the separators add noise once the row wraps — hide them. */
@media screen and (max-width: 720px) {
  header.topbar .nav .nav-sep { display: none; }
}

/* Floating "วิธีใช้" help link, stacked just above the sync-status chip in
   the bottom-right corner (the chip from shared/sync.js sits at right/bottom
   10px and can grow wide when offline, so we sit above it, not beside it).
   Hidden in print automatically via the .btn rule below. */
.help-fab {
  position: fixed;
  right: 10px;
  bottom: 46px;
  z-index: 60;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Print */
@media print {
  header.topbar, .toolbar, button, .btn { display: none !important; }
  body { background: #fff; }
  .card { border: 0; box-shadow: none; padding: 0; }
  /* Restore native table layout when printing on a phone — the mobile
     `display:block` rule would otherwise carry over into the printout. */
  table { display: table; white-space: normal; overflow: visible; }
  .table-scroll { overflow: visible; background: none; }
  .table-scroll > table { width: 100%; }
}