* { box-sizing: border-box; }

/* ---------- Design tokens (on-screen UI only — never used inside
   @media print / PRINT_CSS, so the printed pad is untouched by this) ---------- */
:root {
  --accent: #0071e3;
  --accent-dark: #0b3d75;
  --accent-soft: rgba(0,113,227,0.12);
  --surface: #ffffff;
  --surface-sunken: #f6f9fc;
  --border-soft: rgba(15,30,50,0.08);
  --border-strong: rgba(15,30,50,0.14);
  --text-primary: #1d1d1f;
  --text-muted: #6b7685;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-md: 0 4px 14px rgba(16,24,40,0.08);
  --shadow-lg: 0 16px 40px rgba(16,24,40,0.14);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  color: #1d1d1f;
  background: #eef3f8;
  -webkit-font-smoothing: antialiased;
}

/* Slim, unobtrusive scrollbars — a small but noticeable "premium" touch
   since this app's panels scroll constantly. */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,30,50,0.16); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,30,50,0.28); background-clip: content-box; }

button { font-family: inherit; cursor: pointer; transition: background-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.1s var(--ease), border-color 0.15s var(--ease); }

input, select, textarea {
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.15);
  background: white;
  outline: none;
  width: 100%;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15);
}
textarea { resize: vertical; }
input[readonly] { background: #f0f0f2; color: #666; }

label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: #444;
  margin-bottom: 8px;
}
label.full { grid-column: 1 / -1; }
label.narrow { max-width: 110px; }
label.wide { flex: 1; }
label.checkbox-inline { flex-direction: row; align-items: center; gap: 5px; font-weight: 500; }
label.checkbox-inline input { width: auto; }

.hidden { display: none !important; }
.muted { color: #888; font-size: 12px; }
.full-width { width: 100%; }

/* ---------- Auth gate (login / first-run setup) ---------- */
.auth-gate {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #dce8f5, #eef3f8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.auth-box {
  background: white;
  border-radius: 16px;
  padding: 32px 30px;
  width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.auth-box h2 { margin: 0 0 4px; font-size: 18px; color: #1d3a5f; }
.auth-box label { margin-top: 14px; }
.auth-error { color: #d70015; font-size: 12px; margin-top: 10px; }
#authSubmitBtn { margin-top: 18px; }

/* ---------- App shell ---------- */
#app { display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; }

#topbar {
  background: linear-gradient(180deg, #e4edf8, #dce8f5);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 8px rgba(16,24,40,0.04);
  display: flex;
  align-items: center;
  padding: 0 16px;
  -webkit-app-region: drag;
}
.brand-drag { width: 60px; -webkit-app-region: drag; }
.brand { font-weight: 700; font-size: 14px; margin-right: 18px; color: #1d3a5f; -webkit-app-region: no-drag; letter-spacing: -0.01em; }
.topbar-account-btn { margin-left: auto; -webkit-app-region: no-drag; flex-shrink: 0; padding: 4px; border-radius: 50%; }
.account-avatar-img {
  width: 26px; height: 26px; border-radius: 50%; display: block;
  object-fit: cover; background: #dce8f5; border: 1px solid rgba(0,0,0,0.1);
}

/* ---------- Account modal avatar ---------- */
.acct-avatar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.acct-avatar-preview {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: #eef3f9; border: 1px solid rgba(0,0,0,0.1); flex: none;
}
.acct-avatar-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.acct-name { font-weight: 700; font-size: 14px; color: #1d3a5f; }
.acct-email { font-size: 12px; }

#mainTabs { display: flex; gap: 2px; -webkit-app-region: no-drag; overflow-x: auto; }
.tab-btn {
  background: transparent;
  border: none;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #3a5a80;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
}
.tab-btn:hover { background: rgba(255,255,255,0.45); color: var(--accent-dark); }
.tab-btn.active { color: #0b3d75; border-bottom-color: #0071e3; background: rgba(255,255,255,0.7); }

#tabPanels { flex: 1; overflow: hidden; display: flex; }
.tab-panel { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.tab-panel.active { display: flex; }

/* ---------- Prescription: patient bar ---------- */
.rx-patient-bar {
  background: #e4edf7;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 10px 16px 6px;
}
.pb-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.pb-row label { margin-bottom: 0; min-width: 90px; }
.pb-address { flex: 0 1 170px; min-width: 130px; }
.pb-bmi-result {
  font-size: 11.5px;
  font-weight: 700;
  color: #0071e3;
  background: #eef6ff;
  border-radius: 6px;
  padding: 6px 9px;
  white-space: nowrap;
  margin-bottom: 1px;
}
.pb-spacer { flex: 1; }
.pb-toolbar { display: flex; gap: 6px; }
.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;
  color: #333;
  min-width: 60px;
}
.tool-btn:hover { background: #f2f7fd; }

.lookup-panel { margin-top: 6px; position: relative; }
.lookup-results {
  position: absolute;
  z-index: 60;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
}
.lookup-item { padding: 8px 12px; font-size: 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.lookup-item:hover { background: #eef5ff; }
.lookup-item b { display: block; }
.lookup-item span { color: #888; font-size: 11px; }

/* ---------- Columns ---------- */
.rx-columns { flex: 1; display: flex; overflow: hidden; }
/* The original right-side "GET ... Template" search sidebar (drug/generic/
   treatment/cc/oe/ix/advice) was removed — cc/ix have their own inline
   quick-pick panels, drug/generic are covered by the medBrand autocomplete,
   and advice has its own inline "+" template search (see .advice-field
   below). A new, narrower right column was reintroduced later for the
   Paid/Commission calculator — see .rx-right below — but the old
   template-search sidebar itself is gone for good. */
.rx-left {
  width: 420px;
  min-width: 420px;
  background: #eaf1f9;
  border-right: 1px solid rgba(0,0,0,0.08);
  padding: 14px;
  overflow-y: auto;
}
.rx-middle { flex: 1; padding: 14px; overflow-y: auto; background: white; display: flex; flex-direction: column; }
.med-section-label { margin-top: 0; }

/* ---------- Right column: Paid + per-referral Commission calculator.
   Narrow and collapsible (chevron button, top-right) — the doctor asked
   for it to stay out of the way while writing the prescription. ---------- */
.rx-right {
  width: 190px; min-width: 190px; box-sizing: border-box;
  border-left: 1px solid rgba(0,0,0,0.08); background: #fbfcfe;
  padding: 34px 12px 14px; overflow-y: auto; overflow-x: hidden; position: relative;
  transition: width 0.18s ease, min-width 0.18s ease, padding 0.18s ease;
}
.rx-right.collapsed { width: 28px; min-width: 28px; padding: 34px 4px 14px; }
.rx-right.collapsed .rx-right-body { display: none; }
.rx-right-collapse {
  position: absolute; top: 8px; right: 6px; width: 20px; height: 20px;
  border-radius: 6px; border: 1px solid rgba(0,0,0,0.12); background: white;
  color: #0071e3; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1;
  padding: 0; display: flex; align-items: center; justify-content: center;
}
.rx-right-collapse:hover { background: #eef5fd; }
.rx-right-body { display: flex; flex-direction: column; gap: 10px; }
.rx-right label {
  display: flex; flex-direction: column; font-size: 11.5px; font-weight: 600;
  color: #2a3f5a; gap: 3px;
}
.rx-right input[type="number"] {
  font-size: 12px; padding: 5px 7px; border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px; background: white;
}
.rx-right-paid input { font-size: 13px; font-weight: 700; }
.rx-right-commission-heading { margin: 2px 0 0; }
.rx-right-commission-out { font-size: 10.5px; color: #0071e3; font-weight: 700; align-self: flex-end; }
.rx-right-rate-note { font-size: 10px; margin: -2px 0 0; line-height: 1.4; }
.rx-right-total {
  margin-top: 4px; padding: 10px; border-radius: 8px; background: #eaf6ec;
  border: 1px solid rgba(47,125,60,0.2); display: flex; justify-content: space-between;
  align-items: center; font-weight: 700; color: #2f7d3c;
}
.rx-right-total span:last-child { font-size: 16px; }

/* ---------- O/E ----------
   The tabs row doubles as O/E's section heading (a boxed bar spanning the
   full column width, like C/C's/Ix's .rx-section-heading) since there's no
   separate static "O/E" label — the active tab already names the mode. */
.oe-tabs {
  display: flex; gap: 4px; margin: 6px 0 6px; flex-wrap: wrap;
  background: #f7fafd; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 5px 6px;
}
.oe-tab-btn {
  background: white;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
}
.oe-tab-btn.active { background: #f5b942; border-color: #f5b942; color: #3a2a00; }
.oe-tab-btn.oe-collapse { margin-left: auto; }

/* Content rows (BP, Pulse, Temp, ...) — smaller than the 13px section
   headings, with tighter vertical spacing between each field. */
.oe-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.oe-fields label { margin-bottom: 3px; font-size: 11px; }
.oe-fields input { font-size: 11px; padding: 4px 6px; }
.oe-box textarea { width: 100%; font-size: 11px; padding: 4px 6px; }

/* ---------- Collapsible history sections (Past/Drug/Child birth/Gynae-Obs/Immunization/Other) ---------- */
.hist-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 12px;
}
.hist-item {
  background: white;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
  transition: box-shadow 0.15s ease;
}
.hist-item:has(.hist-body:not(.hidden)) {
  box-shadow: 0 2px 8px rgba(16,24,40,0.07);
  border-color: rgba(0,113,227,0.25);
}
.hist-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7fafd;
  border: none;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #2a3f5a;
  text-align: left;
}
.hist-toggle:hover { background: #eef5fd; }
.hist-toggle-icon {
  color: #0071e3;
  font-weight: 800;
  font-size: 13px;
  width: 16px;
  text-align: center;
}
.hist-body { padding: 6px 12px 8px; }
.hist-body textarea { width: 100%; font-size: 11px; padding: 4px 6px; }
.hist-body input { font-size: 11px; }
.hist-body .autocomplete-wrap { margin-bottom: 4px; }

/* ---------- Chip + repeatable-row fields (C/C, Ix, History/Comorbidities) ---------- */
.crf-field { margin-bottom: 10px; }
.crf-field-label { font-size: 12px; font-weight: 700; color: #2a3f5a; margin-bottom: 4px; }
/* Boxed section heading — full column width, like a small banner — used
   for C/C and Ix (see .crf-field-label.rx-section-heading in index.html).
   Kept separate from the plain .crf-field-label (also reused for the
   Advice/Medicine headings elsewhere, which stay inline/unboxed) so this
   heavier treatment only applies to the rx-left history sections. */
.rx-section-heading {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #f7fafd;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  margin: 0 0 6px;
}
.crf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.crf-chip {
  background: white;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #2a3f5a;
  cursor: pointer;
}
.crf-chip:hover { background: #eef5fd; }
.crf-chip.active { background: #0071e3; border-color: #0071e3; color: white; }
.crf-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.crf-row { display: flex; align-items: center; gap: 4px; }
.crf-row .crf-text { flex: 1; min-width: 0; }
.crf-row .crf-extra { width: 74px; flex: none; }
.crf-row input[type="text"] {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  background: #fbfcfe;
}
.crf-row-remove {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: #a33;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.crf-row-remove:hover { background: rgba(200,0,0,0.12); }
.crf-add-row { display: flex; gap: 4px; }
.crf-add-row input {
  flex: 1;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 6px;
  background: white;
}
.crf-add-btn {
  flex: none;
  background: #eef5fd;
  border: 1px solid rgba(0,113,227,0.25);
  color: #0071e3;
  font-weight: 700;
  font-size: 11px;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.crf-add-btn:hover { background: #e0eefc; }
.crf-empty { font-size: 11px; color: #999; font-style: italic; margin: 2px 0 6px; }

/* Add-input now sits inside an .autocomplete-wrap (for the historical
   typeahead dropdown) instead of being a direct .crf-add-row child, so it
   needs its own width rule; the extra field (Duration/Value) stays fixed-width. */
.crf-add-row .autocomplete-wrap input {
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 6px;
  background: white;
}
.crf-add-extra {
  flex: none;
  width: 90px;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 6px;
  background: white;
}

/* ---------- Quick-pick trigger + panel (cc/ix) — replaces the old
   always-visible chip strip with a small on-demand shortcuts picker. ---------- */
.crf-quick-btn {
  flex: none; width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid rgba(0,113,227,0.25); background: #eef5fd; color: #0071e3;
  font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer;
}
.crf-quick-btn:hover { background: #e0eefc; }
.crf-testnames-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.crf-round-btn {
  flex: none; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(0,113,227,0.35); background: #eef5fd; color: #0071e3;
  font-weight: 700; font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.crf-round-btn:hover { background: #e0eefc; }
.crf-testnames-label { font-size: 12px; font-weight: 600; color: #2a3f5a; }
.crf-quick-panel {
  margin: 0 0 8px; padding: 8px;
  background: #fbfcfe; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;
}
.crf-quick-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.crf-quick-item {
  background: white; border: 1px solid rgba(0,0,0,0.15); border-radius: 14px;
  padding: 4px 10px; font-size: 11px; font-weight: 600; color: #2a3f5a; cursor: pointer;
}
.crf-quick-item:hover { background: #eef5fd; }
.crf-quick-empty { font-size: 11px; color: #999; font-style: italic; margin-bottom: 8px; }
.crf-quick-new { display: flex; gap: 4px; border-top: 1px dashed rgba(0,0,0,0.12); padding-top: 8px; }
.crf-quick-new input {
  flex: 1; font-size: 11px; padding: 5px 7px;
  border: 1px dashed rgba(0,0,0,0.2); border-radius: 6px; background: white;
}

/* ---------- Autocomplete ---------- */
.autocomplete-wrap { position: relative; }
.autocomplete-wrap.grow { flex: 1; }
.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  max-height: 220px;
  overflow-y: auto;
  z-index: 50;
}
.autocomplete-item { padding: 7px 10px; font-size: 12px; cursor: pointer; }
.autocomplete-item:hover, .autocomplete-item.highlighted { background: #eef5ff; }
.autocomplete-item .ac-name { font-weight: 600; }
.autocomplete-item .ac-meta { color: #888; margin-left: 6px; font-size: 11px; }

/* ---------- Calculators ---------- */
.calc-widget { margin-top: 10px; background: white; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); padding: 10px; }
.calc-tabs { display: flex; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
.calc-tab-btn {
  background: #f2f6fb;
  border: none;
  padding: 5px 8px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 6px;
  color: #444;
}
.calc-tab-btn.active { background: #0071e3; color: white; }
.calc-panel { }
.calc-result { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #0b3d75; }
.calc-disclaimer { font-size: 10.5px; color: #888; margin-top: 6px; line-height: 1.4; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 10px; }

/* ---------- WHO Growth Standards (Z-score / percentile) calculator ---------- */
.gz-row { display: flex; flex-wrap: wrap; gap: 0 10px; }
.gz-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gz-card {
  background: #fcfcfb;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: var(--shadow-sm);
}
.gz-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.gz-card-title { font-size: 11.5px; font-weight: 700; color: #0b0b0b; }
.gz-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  color: white;
  white-space: nowrap;
}
.gz-badge-good { background: #0ca30c; }
.gz-badge-warning { background: #fab219; color: #3a2a00; }
.gz-badge-serious { background: #ec835a; }
.gz-badge-critical { background: #d03b3b; }
.gz-card-body { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: #52514e; margin-bottom: 6px; }
.gz-card-body b { color: #0b0b0b; }
.gz-chart-wrap { margin-top: 8px; }

/* ---------- AI Suggestions ---------- */
.ai-suggest-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.ai-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #52514e; margin: 12px 0 6px; }
.ai-section-title:first-of-type { margin-top: 4px; }
.ai-redflags {
  background: #fdeeea;
  border: 1px solid rgba(208,59,59,0.35);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-top: 8px;
}
.ai-redflags .ai-section-title { margin: 0 0 4px; color: #a4271f; }
.ai-redflags ul { margin: 0; padding-left: 18px; font-size: 12px; color: #7a1f18; }
.ai-card-list { display: flex; flex-direction: column; gap: 8px; }
.ai-card {
  background: #fcfcfb;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  box-shadow: var(--shadow-sm);
}
.ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ai-card-title { font-size: 12px; font-weight: 700; color: #0b0b0b; }
.ai-card-body { font-size: 11.5px; color: #52514e; margin-top: 4px; }
.ai-caution { color: #a4271f; }

/* ---------- Medicine add row ----------
   Two rows: Brand Name gets its own full-width row on top (so it's never
   squeezed by the other fields), the rest of the fields + ADD button sit
   on a second row below. */
.med-add-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f5f8fc;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.med-add-row-brand { display: flex; }
.med-add-row-brand .autocomplete-wrap.grow { flex: 1; }
.med-add-row-fields {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.med-add-row label { margin-bottom: 0; }
.child-dose-wrap { display: flex; align-items: center; gap: 6px; }
.child-dose-wrap select { padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.15); font-size: 12px; max-width: 220px; }
.unit-toggle { display: flex; }
.unit-btn { background: white; border: 1px solid rgba(0,0,0,0.15); padding: 6px 10px; font-size: 11px; font-weight: 700; }
.unit-btn:first-child { border-radius: 6px 0 0 6px; }
.unit-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.unit-btn.active { background: #0071e3; color: white; border-color: #0071e3; }

.med-add-row select { padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(0,0,0,0.15); font-size: 12px; }
.duration-custom-wrap { display: flex; align-items: center; gap: 6px; }

#taperToggleBtn.active { background: #0071e3; color: white; border-color: #0071e3; }

/* ---------- Tapering dose builder ---------- */
.taper-builder {
  background: #fff8ec;
  border: 1px solid rgba(245,185,66,0.5);
  border-radius: 10px;
  padding: 10px 12px;
  margin: -4px 0 10px;
}
.taper-builder-title { font-size: 11px; font-weight: 700; color: #8a5c00; margin-bottom: 8px; }
.taper-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.taper-row { display: flex; align-items: center; gap: 6px; }
.taper-row .taper-day { flex: 1; max-width: 160px; }
.taper-row .taper-dose { flex: 1.4; }
.taper-row input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.15);
  font-size: 12px;
}
.taper-row-remove {
  background: white;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  color: #c0392b;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
}
.taper-row-remove:hover { background: #fdecea; }

.primary-btn {
  background: linear-gradient(180deg, #1a82ea, #0071e3);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,113,227,0.25), 0 4px 10px rgba(0,113,227,0.18);
}
.primary-btn:hover { background: linear-gradient(180deg, #2389ec, #0077ed); box-shadow: 0 1px 2px rgba(0,113,227,0.3), 0 6px 16px rgba(0,113,227,0.24); transform: translateY(-1px); }
.primary-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,113,227,0.25); }

.ghost-btn {
  background: rgba(0,0,0,0.05);
  border: 1px solid transparent;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}
.ghost-btn:hover { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.06); }
.ghost-btn:active { background: rgba(0,0,0,0.11); }
.ghost-btn.small { padding: 5px 9px; font-size: 11px; }

/* ---------- Rich text editor ---------- */
.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  background: #f5f8fc;
  border: 1px solid rgba(0,0,0,0.08);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 6px 8px;
}
.rte-toolbar button {
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11px;
  min-width: 26px;
}
.rte-toolbar button:hover { background: #eef5ff; }
.rte-toolbar select { width: auto; padding: 4px 6px; font-size: 11px; }
.rte-sep { width: 1px; height: 20px; background: rgba(0,0,0,0.12); margin: 0 3px; }

.rx-editor {
  min-height: 220px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 0 0 8px 8px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
  background: white;
  overflow-y: auto;
}
.rx-editor:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,113,227,0.12); }

.advice-field { margin: 10px 0 0; }
.advice-field-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.advice-field-head .crf-field-label { margin-bottom: 0; }
/* Auto-grows with content (see autoResizeAdvice()) instead of scrolling —
   height:auto + JS-measured scrollHeight, so overflow must stay hidden and
   resize disabled or the browser's own resize handle would fight the JS. */
.advice-field textarea {
  min-height: 56px; width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
  transition: height 0.08s ease;
}
.crf-quick-search-row { margin-bottom: 6px; }
.crf-quick-search-row input {
  width: 100%; box-sizing: border-box; font-size: 11px; padding: 5px 7px;
  border: 1px dashed rgba(0,0,0,0.2); border-radius: 6px; background: white;
}

/* Each added medicine renders as a 5-column row: form icon | brand/form/strength |
   dose | meal timing | duration. Dotted underlines (rather than literal repeated
   dot characters) stay perfectly aligned regardless of content length. Also
   duplicated in the @media print block below and in the PRINT_CSS constants in
   app.js/renderer.js (used by the Preview iframe) — keep all three in sync. */
.rx-med-row {
  display: grid;
  grid-template-columns: 22px 2fr 1fr 1.2fr 1.7fr;
  align-items: center;
  column-gap: 8px;
  padding: 4px 0;
  margin-bottom: 8px;
}
.rx-med-row:last-child { margin-bottom: 0; }
.rx-med-icon { font-size: 15px; text-align: center; line-height: 1; }
.rx-med-col { font-weight: 700; min-height: 1.3em; }
.rx-med-brand, .rx-med-dose, .rx-med-meal { border-bottom: 1px dotted #999; padding-bottom: 3px; }
.rx-med-duration { white-space: nowrap; }

.followup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-top: 10px;
}
.followup-row input[type="number"] { width: 60px; }

.visit-row { display: flex; gap: 16px; margin-top: 10px; max-width: 460px; }
.visit-row label { flex: 1; }

.upload-zone {
  margin-top: 12px;
  border: 1.5px dashed rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #666;
}
.upload-zone.dragover { background: #eef5ff; border-color: #0071e3; }
.attachment-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.attachment-chip { background: #eef5ff; border-radius: 6px; padding: 4px 10px; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.attachment-chip button { background: none; border: none; color: #d70015; font-size: 12px; }


/* ---------- Data tables (View All / Drug DB / Appointment) ---------- */
.panel-toolbar { display: flex; gap: 10px; padding: 14px 20px; align-items: center; }
.panel-toolbar input { max-width: 340px; }
.data-table { width: calc(100% - 40px); margin: 0 20px 20px; border-collapse: collapse; background: white; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-soft); }
.data-table th { text-align: left; background: #eaf1f9; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #5a7ba3; padding: 9px 10px; }
.data-table td { padding: 9px 10px; font-size: 12.5px; border-top: 1px solid #f0f0f0; }
.data-table tr:hover td { background: #f7fafd; }
.row-actions { display: flex; gap: 6px; }
.row-actions button { font-size: 11px; padding: 4px 8px; }
.pager-row { display: flex; align-items: center; gap: 10px; padding: 0 20px 20px; }
.herbal-badge { display: inline-block; background: #e3f3e6; color: #2f7d3c; border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 600; }

/* ---------- Action▾ dropdown menu (patient list) ---------- */
.dropdown-wrap { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 70;
  background: white;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  min-width: 170px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-menu button {
  background: none;
  border: none;
  text-align: left;
  padding: 7px 8px;
  font-size: 12.5px;
  border-radius: 6px;
  color: #2a3f5a;
}
.dropdown-menu button:hover { background: #eef5fd; }
.dropdown-menu button.dropdown-danger { color: #d70015; }
.dropdown-menu button.dropdown-danger:hover { background: #fdeceb; }

/* ---------- EMR (per-patient record) ---------- */
.emr-layout { display: flex; gap: 0; align-items: flex-start; padding: 0 20px; }
.emr-patient-card { width: 280px; min-width: 280px; margin: 20px 20px 20px 0; }
.emr-patient-card h3 { margin: 0 0 12px; font-size: 16px; }
.emr-patient-meta { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: #444; margin-bottom: 14px; }
.emr-patient-meta b { color: #2a3f5a; }
.emr-rx-panel { flex: 1; min-width: 0; background: white; border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-sm); margin: 20px 0; overflow: hidden; }
.emr-section-title { margin: 0; padding: 14px 16px 8px; font-size: 14px; }
.emr-rx-panel .data-table { width: calc(100% - 32px); margin: 0 16px 16px; }
.emr-attachments { margin-top: 0; }
.emr-attachments h3 { margin: 0; font-size: 14px; }

/* ---------- Drug-drug interaction warning banner ---------- */
.interaction-banner {
  background: #fff4e5; border: 1px solid #f0b429; border-radius: 8px;
  padding: 10px 12px; margin: 8px 0; font-size: 12px; color: #6b4a06;
}
.interaction-banner .ib-title { font-weight: 700; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.interaction-banner .ib-close { cursor: pointer; font-weight: 400; color: #8a6a1a; padding: 0 4px; }
.interaction-banner ul { margin: 4px 0 0 18px; padding: 0; }
.interaction-banner li { margin-bottom: 3px; }

/* ---------- Templates ---------- */
.template-cat-tabs { display: flex; gap: 4px; }
.tcat-btn { background: white; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #444; }
.tcat-btn.active { background: #0071e3; color: white; border-color: #0071e3; }
.template-list { padding: 0 20px 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.template-card { background: white; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-md); padding: 12px 14px; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s var(--ease), transform 0.15s var(--ease); }
.template-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.template-card h5 { margin: 0 0 6px; font-size: 13px; }
.template-card p { margin: 0; font-size: 11.5px; color: #555; white-space: pre-wrap; max-height: 90px; overflow-y: auto; }
.template-card .tc-actions { margin-top: 8px; display: flex; gap: 6px; }

/* ---------- Generic cards (Header Edit / Page Setup / Appointment form) ---------- */
.card {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 20px;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 4px; font-size: 14px; }

/* ---------- Dashboard ---------- */
.dashboard-grid { display: flex; gap: 0; flex-wrap: wrap; overflow-y: auto; }
.dash-card { flex: 1; min-width: 220px; margin: 20px 0 20px 20px; text-align: center; }
.dash-card:last-child { margin-right: 20px; }
.dash-card-label { font-size: 12px; font-weight: 700; color: #5a7ba3; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px; }
.dash-card-stat { font-size: 34px; font-weight: 800; color: #0071e3; line-height: 1.1; }
.dash-card-unit { font-size: 13px; font-weight: 600; color: #888; }
.dash-card-income { margin-top: 10px; font-size: 19px; font-weight: 700; color: #2f7d3c; }

/* ---------- Prescription Setup (pre-printed pad calibration) ---------- */
.rxsetup-banner {
  background: #eef8d8; border-bottom: 1px solid #d7e8b0; color: #3c4a1e;
  font-size: 12px; line-height: 1.6; padding: 10px 20px;
}
.rxsetup-layout { display: flex; gap: 20px; align-items: flex-start; padding: 20px; flex-wrap: wrap; }
.rxsetup-preview-wrap { flex: 0 0 auto; }
.rxsetup-preview {
  position: relative; background: white; border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: hidden;
}
.rxsetup-box { position: absolute; box-sizing: border-box; overflow: hidden; }
.rxsetup-box .rxsetup-box-label { font-size: 9px; color: #667; padding: 2px 4px; line-height: 1.2; }
.rxsetup-box.header { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 6px, #e6e6e6 6px, #e6e6e6 12px); border-bottom: 1px dashed #aaa; }
.rxsetup-box.patient { background: #f7fafd; border-bottom: 1px solid #ddd; }
.rxsetup-box.history { background: #fdf6ea; border-right: 1px dashed #ccc; }
.rxsetup-box.main { background: #ffffff; }
.rxsetup-box.footer { background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 6px, #e6e6e6 6px, #e6e6e6 12px); border-top: 1px dashed #aaa; }

.rxsetup-fields { flex: 1 1 320px; max-width: 460px; margin: 0; }
.rxsetup-field-group { border-top: 1px solid rgba(0,0,0,0.06); padding: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.rxsetup-field-group:first-child { border-top: none; padding-top: 0; }
.rxsetup-field-group h4 { grid-column: 1 / -1; margin: 0 0 2px; font-size: 12.5px; color: #333; }
.rxsetup-actions { display: flex; justify-content: space-between; margin-top: 14px; }

/* ---------- Commission Rates (Prescription Setup) ---------- */
.commission-rates-card { max-width: 640px; }
.commission-rates-card h4 { margin: 0 0 4px; font-size: 13.5px; color: #1d3a5f; }
.commission-rates-row { margin: 10px 0; }
.commission-rates-row select { min-width: 220px; }
.commission-rates-fields { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.commission-rates-fields label { flex: 1 1 140px; }
.commission-rates-fields input[disabled] { background: #f0f0f0; color: #666; }

/* ---------- Admin Panel ---------- */
.admin-add-user-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.admin-add-user-row label { flex: 1 1 160px; }
.admin-add-user-row button { flex: none; height: 34px; }
.admin-users-card { overflow-x: auto; }
.admin-users-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 8px; }
.admin-users-table th {
  text-align: left; padding: 8px 10px; background: #eef3f9; color: #445; font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,0.08); white-space: nowrap;
}
.admin-users-table td { padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: middle; }
.admin-users-table tr.admin-user-row { cursor: pointer; }
.admin-users-table tr.admin-user-row:hover { background: #f5f9ff; }
.admin-role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700;
  background: #eef5fd; color: #0071e3; text-transform: uppercase; letter-spacing: 0.02em;
}
.admin-role-badge.super_admin { background: #fdeee8; color: #c4581c; }
.admin-user-rx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.admin-user-rx-head h4 { margin: 0; font-size: 13.5px; color: #1d3a5f; }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-box {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  width: 480px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-box h2 { margin: 0 0 4px; font-size: 16px; color: var(--accent-dark); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* ---------- Child dose reference modal ---------- */
.cdm-mode-toggle { display: flex; gap: 16px; margin: 8px 0 12px; font-size: 13px; font-weight: 500; }
.cdm-mode-toggle label { flex-direction: row; align-items: center; gap: 6px; }
.cdm-mode-toggle input { width: auto; }
.cdm-band-row { display: grid; grid-template-columns: 1.1fr 1.1fr 0.7fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.cdm-band-row input { width: 100%; }
#cdmAddBandBtn { margin-top: 2px; }
.cdm-error { color: #c0392b; font-size: 12px; margin-top: 8px; }

/* ---------- Print area ---------- */
#printArea { display: none; }

@media print {
  #app { display: none !important; }
  .modal { display: none !important; }
  #printArea {
    display: block !important;
    width: 100%;
    font-family: -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
    color: #111;
  }

  .rx-page { width: 190mm; margin: 0 auto; }
  .rx-letterhead {
    border-bottom: 2px solid #222;
    padding-bottom: 10px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .rx-letterhead img.rx-logo { max-height: 50px; margin-bottom: 6px; }
  .rx-letterhead .doc-name { font-size: 19px; font-weight: 700; }
  .rx-letterhead .doc-degrees { font-size: 11.5px; color: #333; }
  .rx-letterhead .doc-specialty { font-size: 11.5px; color: #333; font-style: italic; }
  .rx-letterhead .doc-reg { font-size: 10.5px; color: #555; margin-top: 2px; }
  .rx-letterhead .clinic-block { text-align: right; font-size: 10.5px; color: #333; }
  .rx-letterhead .clinic-block .cn { font-weight: 700; font-size: 12.5px; }

  .rx-patient-bar-print {
    display: flex; flex-wrap: wrap; gap: 4px 20px;
    font-size: 11.5px; border-bottom: 1px solid #ccc; padding-bottom: 7px; margin-bottom: 9px;
  }
  .rx-patient-bar-print b { font-weight: 700; }

  .rx-section-label { font-size: 10.5px; text-transform: uppercase; color: #666; letter-spacing: 0.04em; margin: 9px 0 3px; }
  .rx-text-block { font-size: 11.5px; margin-bottom: 5px; white-space: pre-wrap; }
  .rx-oe-box { font-size: 11px; border: 1px solid #ddd; border-radius: 6px; padding: 7px 9px; margin-bottom: 6px; white-space: pre-wrap; }

  /* History/exam/diagnosis on the LEFT, medicines on the RIGHT — same split
     as the pre-printed-pad layout (.rx-pad-history-col/.rx-pad-main-col)
     below, so the full-header print matches what Prescription Setup shows. */
  .rx-cols { display: flex; align-items: flex-start; gap: 16px; }
  .rx-history-col { flex: 0 0 36%; max-width: 36%; border-right: 1px solid #ddd; padding-right: 14px; box-sizing: border-box; }
  .rx-history-col .rx-section-label:first-child { margin-top: 0; }
  .rx-main-col { flex: 1; min-width: 0; }

  .rx-body { display: flex; gap: 14px; min-height: 100mm; }
  .rx-symbol-col { width: 24px; font-size: 26px; font-weight: 700; color: #222; }
  .rx-meds-col { flex: 1; font-size: 12px; line-height: 1.6; }
  .rx-meds-col ol { margin: 0; padding-left: 18px; }

  /* Same 5-column medicine row grid as the live editor — see the base rule
     above for the full explanation. Applies to both the full-header print
     (.rx-meds-col) and the no-header pad print (.rx-pad-meds) paths. */
  .rx-med-row {
    display: grid;
    grid-template-columns: 22px 2fr 1fr 1.2fr 1.7fr;
    align-items: center;
    column-gap: 8px;
    padding: 4px 0;
    margin-bottom: 8px;
  }
  .rx-med-row:last-child { margin-bottom: 0; }
  .rx-med-icon { font-size: 15px; text-align: center; line-height: 1; }
  .rx-med-col { font-weight: 700; min-height: 1.3em; }
  .rx-med-brand, .rx-med-dose, .rx-med-meal { border-bottom: 1px dotted #999; padding-bottom: 3px; }
  .rx-med-duration { white-space: nowrap; }

  .rx-footer { display: flex; justify-content: space-between; margin-top: 22mm; font-size: 10.5px; }
  .rx-signature { text-align: center; }
  .rx-signature .sig-line { border-top: 1px solid #333; width: 150px; margin-top: 28px; padding-top: 4px; }

  /* ---------- Attachments ("সংযুক্তি") — image attachments printed at a
     medium size, below Advice. Shared by both print paths; the pad path
     additionally caps height since its main column is much narrower. */
  .rx-attach-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
  .rx-attach-img { max-width: 70mm; max-height: 70mm; object-fit: contain; border: 1px solid #ccc; }
  .rx-pad-attach-img { max-width: 100%; max-height: 40mm; object-fit: contain; border: 1px solid #ccc; }

  /* ---------- "Print without Header" on a pre-printed pad ----------
     The header/footer are left BLANK (already printed on the physical
     pad) — only the dynamic content (patient bar, history, medicines) is
     drawn, sized/positioned per the doctor's Prescription Setup measurements.
     #dynamicPrintPageSize supplies the matching @page size at print time. */
  .rx-pad-page { margin: 0 auto; box-sizing: border-box; overflow: hidden; }
  .rx-pad-header-spacer, .rx-pad-footer-spacer { box-sizing: border-box; }
  /* Font sizes below are matched directly to the doctor's reference PDF
     (measured in points via PyMuPDF): patient info / C-C / O-E / Ix / Dx /
     Visit No all sit at ~12pt in the PDF; the medicine block and the
     right-column Advice sit at a smaller ~9.7pt. A standard ~1cm left/right
     margin (also measured off the PDF) is added via column padding + the
     patient bar's own horizontal margin, so text no longer runs edge-to-edge. */
  .rx-pad-patient-bar {
    box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column;
    justify-content: center; gap: 2px; font-size: 12pt; padding: 4px 8px;
    border: 1px solid #000; border-radius: 8px; margin: 0 1cm;
  }
  .rx-pad-bar-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; }
  .rx-pad-patient-bar b { font-weight: 700; }
  .rx-pad-body { display: flex; box-sizing: border-box; overflow: hidden; margin-top: 4px; }
  .rx-pad-history-col { box-sizing: border-box; overflow: hidden; padding: 2px 6px 2px 1cm; font-size: 12pt; }
  .rx-pad-main-col { box-sizing: border-box; overflow: hidden; padding: 2px 1cm 2px 6px; font-size: 9.7pt; position: relative; }
  /* Section headline (C/C, O/E, Ix, ...): black bold text inside a small
     filled-ash rounded pill — the box wraps only the headline itself.
     font-size:1em so it always matches its own column's base size (12pt
     in the history column, 9.7pt for the Advice label in the main column). */
  .rx-pad-label {
    display: inline-block; font-size: 1em; color: #000;
    font-weight: 700; letter-spacing: 0.02em; background: #e7e9eb;
    border-radius: 6px; padding: 2px 8px; margin: 6px 0 3px;
  }
  .rx-pad-text { font-size: 1em; white-space: pre-wrap; margin: 1px 0 3px; }
  .rx-pad-oe-box { font-size: 9px; border: 1px solid #ddd; border-radius: 4px; padding: 4px 6px; margin-bottom: 4px; white-space: pre-wrap; }
  /* C/C, O/E, Ix, and other-history content on the pad print: plain bold
     black lines, one item per box-line (per-newline) — no fill, since the
     ash box now belongs to the headline above (.rx-pad-label) instead. */
  .rx-pad-box { margin: 0 0 7px; }
  .rx-pad-box-line {
    font-weight: 400; font-size: 1em; line-height: 1.25; color: #000;
    position: relative; padding-left: 13px;
  }
  .rx-pad-box-line::before { content: "•"; position: absolute; left: 0; }
  .rx-pad-box-line + .rx-pad-box-line { margin-top: 2px; }
  .rx-pad-symbol { display: block; height: 29px; width: auto; margin-bottom: 5px; }
  .rx-pad-meds { font-size: 9.7pt; line-height: 1.5; }
  .rx-pad-meds ol { margin: 0; padding-left: 16px; }
  .rx-pad-followup { font-size: 9.7pt; margin-top: 6px; clear: both; }
  .rx-pad-barcode-wrap { margin: 2px 0 1px; }
  .rx-pad-barcode { display: block; width: 32mm; height: 9mm; }
  .rx-pad-visitno { font-size: 12pt; margin-bottom: 4px; }
  .rx-pad-dx { font-size: 12pt; font-weight: 700; margin: 10px 0 0; text-align: center; }

  @page { margin: 0; }
}