/* Rehab Solutions design system. System sans, hairline borders, one accent, status colours always paired with an icon and a label. */
:root {
  color-scheme: light;
  --bg: #f6f6f4; --surface: #ffffff; --surface-2: #fafaf8; --sunken: #f0efec;
  --ink: #0f1514; --ink-2: #4b5250; --ink-3: #646b68;
  --line: rgba(15, 21, 20, .10); --line-strong: rgba(15, 21, 20, .18);
  --hero-a: #11897d; --hero-b: #0a5a53; --on-bad: #ffffff;
  --brand: #0d7a70; --brand-strong: #0a5f57; --brand-soft: #e3f3f0; --brand-ink: #ffffff; --brand-track: #cfe7e3;
  --ok: #0a7a0a; --ok-soft: #e4f4e4; --warn: #8a5a00; --warn-soft: #fdf1d6; --bad: #b42323; --bad-soft: #fbe7e7; --info: #1c5cab; --info-soft: #e5eefb;
  --shadow: 0 1px 2px rgba(15, 21, 20, .05), 0 6px 20px rgba(15, 21, 20, .05);
  --shadow-pop: 0 10px 40px rgba(15, 21, 20, .18);
  /* D139 design scale (docs/DESIGN_SCALE.md): spacing on a 4px grid with one 2px hairline, ten type sizes, five radii, four line heights.
     Nothing in the app UI uses a number outside these; control/test_design_scale_d139.py fails the suite when one appears. */
  --sp-hair: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-title: 22px; --fs-kpi: 28px; --fs-hero: 32px;
  --fs-display: 44px; --fs-display-xl: 54px;
  --ctl: 40px; --ctl-sm: 32px; --hit: 24px; --hit-touch: 44px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --lh-tight: 1.2; --lh-title: 1.3; --lh-snug: 1.4; --lh-body: 1.5;
  --radius: var(--r-lg); --radius-sm: var(--r-sm);
  --font: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", "Nirmala UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --hero-a: #0f7d72; --hero-b: #08443f; --on-bad: #2a0b0b;
    --bg: #0d0f0e; --surface: #171a19; --surface-2: #1c201f; --sunken: #121514;
    --ink: #f4f6f5; --ink-2: #c3c9c6; --ink-3: #98a09c;
    --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .18);
    --brand: #34b6a7; --brand-strong: #5fd0c2; --brand-soft: #15302d; --brand-ink: #062522; --brand-track: #1d403c;
    --ok: #4cc24c; --ok-soft: #14301a; --warn: #f2b53a; --warn-soft: #362a0d; --bad: #f07575; --bad-soft: #391818; --info: #7db2f0; --info-soft: #16263d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3); --shadow-pop: 0 10px 40px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --hero-a: #0f7d72; --hero-b: #08443f; --on-bad: #2a0b0b;
  --bg: #0d0f0e; --surface: #171a19; --surface-2: #1c201f; --sunken: #121514;
  --ink: #f4f6f5; --ink-2: #c3c9c6; --ink-3: #98a09c;
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .18);
  --brand: #34b6a7; --brand-strong: #5fd0c2; --brand-soft: #15302d; --brand-ink: #062522; --brand-track: #1d403c;
  --ok: #4cc24c; --ok-soft: #14301a; --warn: #f2b53a; --warn-soft: #362a0d; --bad: #f07575; --bad-soft: #391818; --info: #7db2f0; --info-soft: #16263d;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3); --shadow-pop: 0 10px 40px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-base)/var(--lh-body) var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-title); letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: var(--fs-xs); }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-xs); }
.muted { color: var(--ink-3); } .small { font-size: var(--fs-sm); } .right { text-align: right; } .nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---- shell ---- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-4); }
.brand-mark { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(140deg, var(--brand), var(--brand-strong)); color: var(--brand-ink); box-shadow: 0 4px 12px rgba(13, 122, 112, .35); }
.brand-mark .icon { width: 20px; height: 20px; stroke-width: 2; }
.brand strong { display: block; font-size: var(--fs-lg); letter-spacing: -.02em; } .brand span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.workspace { margin: 0 var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.workspace small { display: block; color: var(--ink-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.nav-group summary { list-style: none; cursor: pointer; } .nav-group summary::-webkit-details-marker { display: none; }
.nav-label { margin: var(--sp-4) var(--sp-3) var(--sp-1); display: flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.nav-chevron { margin-left: auto; display: inline-flex; transition: transform .15s ease; } .nav-chevron .icon { width: 13px; height: 13px; }
.nav-group[open] .nav-chevron { transform: rotate(90deg); }
.nav a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--ink-2); font-weight: 500; text-decoration: none; }
.nav a:hover { background: var(--sunken); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.nav .count { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; background: var(--brand); color: var(--brand-ink); border-radius: var(--r-pill); padding: 1px var(--sp-2); }
.side-foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); }
.side-foot .who { min-width: 0; flex: 1; } .side-foot .who b { display: block; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-foot .who span { font-size: var(--fs-xs); color: var(--ink-3); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--brand-strong); background: var(--brand-soft); border: 1px solid var(--line); }
.avatar.lg { width: 56px; height: 56px; font-size: var(--fs-2xl); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-7); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1; max-width: 460px; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-10); border-radius: var(--r-pill); background: var(--surface); }
.spacer { flex: 1; }
.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--sp-7) var(--sp-7) var(--sp-16); }
.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head h1 { font-size: var(--fs-kpi); } .page-head p { color: var(--ink-3); margin-top: var(--sp-1); }
.page-head .actions { margin-left: auto; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.breadcrumb { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-2); } .breadcrumb a { color: var(--ink-3); }
.icon-btn.menu-btn { display: none; }

/* ---- surfaces ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) 0; }
.card-head h2, .card-head h3 { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-2); } .card-head h2 .icon, .card-head h3 .icon { color: var(--ink-3); } .card-head .actions { margin-left: auto; display: flex; gap: var(--sp-2); }
.card-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .card-body.flush { padding: var(--sp-2) 0 0; }
.grid { display: grid; gap: var(--sp-5); align-items: start; } .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } .row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat { padding: var(--sp-5) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat .label { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-md); font-weight: 500; }
.stat .label .icon { width: 16px; height: 16px; color: var(--ink-3); }
.stat .value { margin-top: var(--sp-3); font-size: var(--fs-hero); font-weight: 650; letter-spacing: -.02em; line-height: var(--lh-tight); }
.stat .value small { font-size: var(--fs-base); font-weight: 500; color: var(--ink-3); margin-right: var(--sp-1); }
.stat .hint { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); }
.stat.hero { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(140deg, var(--hero-a), var(--hero-b)); border: 0; color: #fff; padding: var(--sp-7) var(--sp-7); }
.stats.few .stat.hero { grid-row: auto; }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .stats.three { grid-template-columns: minmax(0, 1fr); } }
.stat.hero .label, .stat.hero .hint, .stat.hero .value small { color: rgba(255, 255, 255, .82); } .stat.hero .label .icon { color: rgba(255, 255, 255, .82); }
.stat.hero .value { font-size: var(--fs-display-xl); } .stat.hero .value small { font-size: var(--fs-xl); } .stat.hero .meter { height: 10px; margin-top: var(--sp-5); }
.meter { height: 8px; margin-top: var(--sp-3); border-radius: var(--r-pill); background: var(--brand-track); overflow: hidden; } .meter > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand); }
.stat.hero .meter { background: rgba(255, 255, 255, .28); } .stat.hero .meter > i { background: #fff; }
.meter.warn > i { background: #d99a12; } .meter.bad > i { background: var(--bad); }

/* ---- controls ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: var(--fs-md); cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--sunken); text-decoration: none; } .btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 2px 8px rgba(13, 122, 112, .28); } .btn.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .btn.danger:hover { background: var(--bad-soft); }
.btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--sunken); }
.btn.sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); gap: var(--sp-2); } .btn.sm .icon { width: 15px; height: 15px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.icon-btn { position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; } .icon-btn:hover { background: var(--sunken); color: var(--ink); }
.notif-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 var(--sp-1); border-radius: var(--r-pill); background: var(--bad); color: var(--on-bad); font-size: var(--fs-xs); font-weight: 700; line-height: 1; display: inline-grid; place-items: center; text-align: center; }
label.field, .field { display: grid; align-content: start; gap: var(--sp-2); font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: var(--fs-sm); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); width: 100%; min-width: 0; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 0; border-color: var(--brand); }
textarea { resize: vertical; min-height: 96px; }
input[type=checkbox], input[type=radio] { width: auto; margin: 0; }
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(max(220px, 45%), 1fr)); }   /* at most two columns, and one where a select would be squeezed under 220px */ .form-grid .wide { grid-column: 1 / -1; }
.money { position: relative; } .money::before { content: "৳"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); } .money input { padding-left: var(--sp-8); }
.seg { display: inline-flex; padding: var(--sp-1); background: var(--sunken); border-radius: var(--r-md); gap: var(--sp-hair); } .seg a, .seg button { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); border: 0; background: transparent; font: inherit; font-weight: 600; font-size: var(--fs-md); color: var(--ink-2); cursor: pointer; text-decoration: none; } .seg [aria-current="true"], .seg .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---- data ---- */
.filters-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--brand-strong); font-weight: 600; font-size: var(--fs-md); margin-bottom: var(--sp-hair); }
.filters-more summary::-webkit-details-marker { display: none; }
.filters-more summary .icon { width: 13px; height: 13px; transition: transform .15s ease; }
.filters-more[open] summary .icon { transform: rotate(90deg); }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.table th { padding: var(--sp-3) var(--sp-5); text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-2); }
.table .num, .table .right { font-variant-numeric: tabular-nums; }
.person { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .person b { display: block; font-weight: 600; color: var(--ink); } .person span { font-size: var(--fs-sm); color: var(--ink-3); }
.person a { color: inherit; }
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-hair) var(--sp-2) var(--sp-hair) var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.chip .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--bad-soft); color: var(--bad); } .chip.info { background: var(--info-soft); color: var(--info); } .chip.brand { background: var(--brand-soft); color: var(--brand-strong); }
.list { display: grid; grid-template-columns: minmax(0, 1fr); } .list > * { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); } .list > *:first-child { border-top: 0; }
.item { display: flex; align-items: center; gap: var(--sp-4); } .item .grow { flex: 1; min-width: 0; } .item .time { width: 76px; flex: none; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item b { font-weight: 600; } .item b a { color: var(--ink); } .item b a:hover { color: var(--brand-strong); } .item .sub { font-size: var(--fs-sm); color: var(--ink-3); }
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--ink-3); } .empty .icon { width: 30px; height: 30px; margin-bottom: var(--sp-2); color: var(--ink-3); opacity: .8; } .empty b { display: block; color: var(--ink-2); margin-bottom: var(--sp-hair); font-weight: 600; }
.kv { margin: var(--sp-3) 0; display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-md); } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; }
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); } .tabs a { padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; } .tabs a[aria-current="page"] { color: var(--brand-strong); border-color: var(--brand); }
.pager { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); } .pager .spacer { flex: 1; }
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--info-soft); color: var(--info); font-size: var(--fs-md); } .notice.warn { background: var(--warn-soft); color: var(--warn); } .notice.bad { background: var(--bad-soft); color: var(--bad); } .notice .icon { margin-top: var(--sp-hair); }
.notice > div { color: var(--ink-2); } .notice b { color: inherit; }
.timeline { display: grid; gap: 0; } .timeline > div { position: relative; padding: 0 0 var(--sp-5) var(--sp-7); } .timeline > div::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: -6px; width: 2px; background: var(--line); } .timeline > div:last-child::before { display: none; } .timeline > div::after { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }

/* ---- overlays ---- */
dialog.modal { border: 0; padding: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--shadow-pop); overflow: hidden; }
dialog.modal[open] { display: flex; flex-direction: column; animation: pop .16s ease-out; }
dialog.modal::backdrop { background: rgba(10, 16, 15, .5); backdrop-filter: blur(3px); }
.modal form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.modal-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-2); } .modal-head h2 { font-size: var(--fs-xl); } .modal-head p { color: var(--ink-3); font-size: var(--fs-md); } .modal-head .icon-btn { margin-left: auto; border: 0; background: transparent; }
.modal-body { padding: var(--sp-4) var(--sp-6) var(--sp-2); overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-4); flex: 1; }
.modal-foot { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; padding: var(--sp-4) var(--sp-6) var(--sp-5); } .modal-foot .msg { margin-right: auto; color: var(--bad); font-size: var(--fs-sm); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: var(--sp-3); width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); background: var(--ink); color: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-pop); animation: pop .18s ease-out; font-size: var(--fs-md); }
.toast .icon { margin-top: var(--sp-hair); } .toast small { display: block; opacity: .75; margin-top: var(--sp-hair); } .toast.ok .icon { color: #5fd07a; } .toast.warn .icon { color: #f2b53a; } .toast.bad .icon { color: #f08a8a; }
.combo { position: relative; } .combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--sp-1); }
.combo-list button { display: flex; width: 100%; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 0; background: transparent; border-radius: var(--r-sm); font: inherit; color: var(--ink); text-align: left; cursor: pointer; } .combo-list button:hover, .combo-list button.on { background: var(--brand-soft); } .combo-list small { color: var(--ink-3); margin-left: auto; } .modal .combo-list { position: static; margin-top: var(--sp-2); max-height: 210px; box-shadow: none; }
.combo-empty { padding: var(--sp-3); color: var(--ink-3); font-size: var(--fs-md); }
.combo .picked { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--brand); border-radius: var(--r-md); background: var(--brand-soft); } .combo .picked button { margin-left: auto; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.pop { position: absolute; right: 0; top: calc(100% + 8px); width: 340px; z-index: 40; } .relative { position: relative; }

/* ---- auth ---- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.auth-art { position: relative; overflow: hidden; padding: var(--sp-14); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: radial-gradient(1200px 600px at 10% 0%, #14a190 0%, transparent 60%), linear-gradient(160deg, #0b6c63, #073f3a 70%); }
.auth-art::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .06); }
.auth-art h2 { font-size: var(--fs-hero); letter-spacing: -.03em; line-height: var(--lh-tight); max-width: 440px; } .auth-art p { margin-top: var(--sp-4); color: rgba(255, 255, 255, .8); max-width: 420px; }
.auth-art ul { list-style: none; padding: 0; margin: var(--sp-7) 0 0; display: grid; gap: var(--sp-3); } .auth-art li { display: flex; gap: var(--sp-3); align-items: center; color: rgba(255, 255, 255, .9); }
.auth-art .brand-mark { background: rgba(255, 255, 255, .16); box-shadow: none; } .auth-art .brand span { color: rgba(255, 255, 255, .7); }
.auth-form { display: grid; place-items: center; padding: var(--sp-8); } .auth-card { width: min(400px, 100%); display: grid; gap: var(--sp-5); } .auth-card h1 { font-size: var(--fs-kpi); } .auth-card .btn { width: 100%; padding: var(--sp-3); }
.pill-host { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; font-size: var(--fs-sm); }

/* ---- documents (printable) ---- */
.paper-wrap { padding: 28px 16px 64px; overflow-x: auto; } .toolbar { max-width: 210mm; margin: 0 auto 14px; display: flex; gap: 10px; align-items: center; }
.paper { max-width: 210mm; margin: 0 auto; background: #fff; color: #111; padding: 18mm 16mm; border-radius: 6px; box-shadow: var(--shadow-pop); }
.paper.paper-A5 { max-width: 148mm; } .paper.paper-thermal80 { max-width: 80mm; padding: 6mm 4mm; font-size: 13px; }
.paper .hdr { text-align: center; font-weight: 700; margin: 2px 0; } .paper .ftr { text-align: center; font-size: 12.5px; color: #444; margin: 3px 0; }
.paper h2 { margin: 16px 0 12px; font-size: 20px; padding-bottom: 8px; border-bottom: 2px solid #111; }
.paper table { width: 100%; border-collapse: collapse; } .paper th { width: 32%; text-align: left; vertical-align: top; padding: 7px 10px 7px 0; color: #444; font-weight: 600; } .paper td { padding: 7px 0; white-space: pre-wrap; border-bottom: 1px solid #e5e5e5; }
.paper .sig { margin-top: 56px; color: #444; } .paper .foot { margin-top: 22px; }

/* ---- responsive ---- */
@media (max-width: 1100px) { .cols-21, .cols-3 { grid-template-columns: minmax(0, 1fr); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat.hero, .stats.few .stat.hero { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 640px) {
  .item { flex-wrap: wrap; row-gap: var(--sp-2); } .item .grow { flex: 1 1 150px; } .item .time { width: 70px; }
  .topbar #sync-pill span { display: none; } .topbar { gap: var(--sp-2); } .search { min-width: 0; }
  .page-head .actions .btn { flex: 1 1 auto; } .card-head, .card-body { padding-left: var(--sp-4); padding-right: var(--sp-4); } .list > * { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .pop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } .toasts { left: 12px; right: 12px; bottom: 12px; width: auto; }
  /* the daily sheet keeps its paper-shaped columns; scroll sideways rather than squeeze the text unreadable */
  .sheet { min-width: 190mm; }
}
@media print { .sheet { min-width: 0; } }
@media (max-width: 520px) { .stats { grid-template-columns: minmax(0, 1fr); } .stat .value { font-size: var(--fs-kpi); } .stat.hero .value { font-size: var(--fs-display); } }
@media (max-width: 960px) {
  .topbar { padding: var(--sp-3) var(--sp-4); } .page { padding: var(--sp-5) var(--sp-4) var(--sp-14); } .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .auth { grid-template-columns: 1fr; } .auth-art { display: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); } .page-head .actions { margin-left: 0; width: 100%; } .hide-sm { display: none !important; }
  .table th, .table td { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
/* printable daily appointment sheet: always black on white, like the paper original */
.sheet { max-width: 210mm; margin: 0 auto 18px; background: #fff; color: #111; padding: 8mm; border-radius: 6px; box-shadow: var(--shadow-pop); break-after: page; }
.sheet:last-of-type { break-after: auto; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; margin-bottom: 5mm; font-size: 13px; }
.sheet-title { grid-column: 2; text-align: center; } .sheet-org { font-weight: 700; font-size: 16px; } .sheet-name { font-weight: 700; text-decoration: underline; }
.sheet-closed { margin: 0 0 4mm; padding: 6px 10px; border: 1.5px solid #111; font-weight: 700; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 4mm; }
.sheet-block { width: 100%; border-collapse: collapse; table-layout: fixed; break-inside: avoid; font-size: 11.5px; }
.sheet-block th, .sheet-block td { border: 1px solid #222; padding: 1px 3px; vertical-align: top; text-align: left; height: 7.5mm; }
.sheet-block thead th { height: auto; text-align: center; font-weight: 700; padding: 2px 3px; } .sheet-block thead tr:nth-child(2) th { font-size: 10px; }
.sheet-block .sheet-who { font-size: 12.5px; padding: 3px; }
.sheet-block .t { width: 16%; white-space: nowrap; font-size: 10.5px; }
.sheet-pt small { color: #444; font-size: 9.5px; } .sheet-pt.struck { text-decoration: line-through; }
.sheet-mark { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-left: 3px; border: 1.3px solid #111; border-radius: 50%; font-size: 9.5px; font-weight: 700; line-height: 1; vertical-align: middle; }
.sheet-foot { margin-top: 4mm; font-size: 11px; color: #444; text-align: center; } .sheet-printed { font-size: 10px; color: #666; margin-top: 2px; }
@media print {
  body { background: #fff; } .sidebar, .topbar, .toolbar, .toasts, .notice, .no-print { display: none !important; }
  .app { display: block; } .page { padding: 0; } .paper-wrap { padding: 0; } .paper { box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
  .sheet { box-shadow: none; border-radius: 0; padding: 0; max-width: none; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* legacy command console */
.legacy section, .legacy article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4); margin: var(--sp-3) 0; }
.legacy .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-3); } .legacy article { box-shadow: none; }
.legacy table { width: 100%; border-collapse: collapse; } .legacy td, .legacy th { padding: var(--sp-2); border-bottom: 1px solid var(--line); text-align: left; } .legacy button { font: inherit; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; margin: var(--sp-1) 0; }
.legacy label { display: block; margin-top: var(--sp-3); font-weight: 600; } .legacy h2 { font-size: var(--fs-xl); margin: var(--sp-5) 0 var(--sp-2); } .legacy h3 { font-size: var(--fs-base); margin: var(--sp-4) 0 var(--sp-1); }
.icon.flip { transform: rotate(180deg); }

/* ---- patient module ---- */
dialog.modal.wide { width: min(780px, calc(100vw - 24px)); }
.req { color: var(--bad); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.dtabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
dialog.modal:has(.tabs-dialog) { height: min(820px, calc(100vh - 32px)); }   /* one height for every tab (D038) */
.dtabs button { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: inherit; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.dtabs button.on { color: var(--brand-strong); border-color: var(--brand); background: var(--brand-soft); border-radius: var(--r-sm) var(--r-sm) 0 0; }
[data-panel][data-off] { display: none; }
.photo-box { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-3); margin-bottom: var(--sp-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.photo-preview { position: relative; width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden; background: var(--brand-soft); display: grid; place-items: center; }
.photo-preview img, .photo-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-preview video { transform: scaleX(-1); }
.photo-tools { flex: 1; min-width: 0; display: grid; gap: var(--sp-2); }
fieldset.consent { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); }
fieldset.consent legend { padding: 0 var(--sp-2); font-weight: 700; }
fieldset.consent .ask { padding: var(--sp-2) 0; } fieldset.consent .ask + .ask { border-top: 1px solid var(--line); } fieldset.consent p { margin-bottom: var(--sp-2); }
.row label.row { font-weight: 500; cursor: pointer; }
.episode .timeline > div { padding-bottom: var(--sp-3); }
@media (max-width: 640px) {
  .photo-box { flex-direction: column; text-align: center; }
  dialog.modal:has(.tabs-dialog) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }   /* the patient form fills a phone screen (D038) */
  dialog.modal:has(.tabs-dialog) .modal-head, dialog.modal:has(.tabs-dialog) .modal-body, dialog.modal:has(.tabs-dialog) .modal-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .dtabs { gap: var(--sp-hair); } .dtabs button { flex: 1 1 auto; justify-content: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); font-size: var(--fs-md); }   /* all three tabs fit a 360px screen */
}
[hidden] { display: none !important; }   /* a class's display must never win over the hidden attribute */
.field > span:first-child { display: block; }

/* ---- visits: row menu, week view, opening hours, history (Module 2) ---- */
.menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); transform: translateX(var(--menu-shift, 0)); z-index: 30; min-width: 232px; display: grid; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.menu-list button, .menu-list a { text-decoration: none; display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; }
.menu-list button:hover, .menu-list button:focus-visible, .menu-list a:hover, .menu-list a:focus-visible { background: var(--sunken); outline: none; } .menu-list .icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); } .chips-row:empty { display: none; }
.empty.small { padding: var(--sp-5) var(--sp-4); font-size: var(--fs-md); }
.week { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-4); align-items: start; }
.week-day.today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .card-head h2 a { color: inherit; text-decoration: none; } .card-head h2 a:hover { color: var(--brand-strong); }
a.item { color: inherit; text-decoration: none; } a.item:hover { background: var(--sunken); }
.report-group-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--sp-3); }   /* D066 */
a.report-card { color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; } a.report-card:hover { box-shadow: var(--shadow-pop); border-color: var(--brand); }
a.report-card .avatar { color: var(--brand-strong); }
.daypick { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .daypick label { position: relative; cursor: pointer; } .daypick input { position: absolute; opacity: 0; inset: 0; }
.daypick span { display: inline-block; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-weight: 600; font-size: var(--fs-md); color: var(--ink-2); }
.daypick input:checked + span { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--brand); } .daypick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.weekrows { display: grid; gap: var(--sp-2); } .weekrow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .weekrow input[type=time] { width: 132px; } .weekrow [data-closed-note] { display: none; } .weekrow.off [data-closed-note] { display: inline; } .weekrow.off input[type=time] { opacity: .4; }
.timeline { display: grid; margin-left: var(--sp-2); } .tl-item { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); border-left: 2px solid var(--line); } .tl-item:last-child { border-left-color: transparent; }
.tl-item::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); } .tl-item b { font-weight: 600; }
.acts { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .sub .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: var(--sp-hair); }

/* prescription print: black on white; the letterhead picture is an <img> so it prints without "background graphics" */
.rx-page { position: relative; width: 210mm; min-height: 297mm; margin: 0 auto 18px; background: #fff; color: #111; box-shadow: var(--shadow-pop); overflow: hidden; font-size: 12.5px; line-height: 1.4; }
.rx-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 0; }
.rx-body { position: relative; z-index: 1; box-sizing: border-box; min-height: 297mm; display: flex; flex-direction: column; }
.rx-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .rx-logo { max-height: 22mm; max-width: 40mm; } .rx-org { font-size: 18px; font-weight: 700; } .rx-line { font-size: 12px; } .rx-title { font-size: 14px; font-weight: 700; text-decoration: underline; margin-top: 2px; }
.rx-id { width: 100%; border-collapse: collapse; margin-bottom: 6px; } .rx-id td { padding: 2px 4px; width: 33%; }
.rx-vitals { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 11px; } .rx-vitals th, .rx-vitals td { border: 1px solid #333; padding: 2px 5px; text-align: center; } .rx-vitals th { background: rgba(0,0,0,.06); font-weight: 600; }
.rx-sec h4 { margin: 8px 0 1px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; } .rx-sec p { margin: 0; white-space: pre-wrap; }
.rx-meds { width: 100%; border-collapse: collapse; font-size: 11.5px; } .rx-meds th, .rx-meds td { border: 1px solid #555; padding: 2px 5px; text-align: left; }
.rx-ex-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 3px; } .rx-ex-table th, .rx-ex-table td { border: 1px solid #555; padding: 3px 5px; text-align: left; vertical-align: top; } .rx-ex-table th { background: rgba(0,0,0,.06); font-weight: 600; }
.rx-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; break-inside: avoid; }
.rx-sign { min-width: 60mm; } .rx-sigmark { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 20px; margin-bottom: -4px; } .rx-sig-img { max-height: 16mm; max-width: 55mm; display: block; margin-bottom: 2px; } .rx-line-sig { border-top: 1px solid #111; margin-bottom: 3px; }
.rx-qr svg { width: 22mm; height: 22mm; display: block; margin-left: auto; } .rx-qr { text-align: right; } .rx-small { font-size: 10.5px; color: #444; }
.rx-preview-frame { width: 100%; height: 80vh; min-height: 500px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.rx-mark { position: absolute; top: 45%; left: 0; right: 0; text-align: center; font-size: 64px; font-weight: 800; color: rgba(160,0,0,.16); transform: rotate(-24deg); pointer-events: none; }
@media print { .rx-page { box-shadow: none; margin: 0; width: 210mm; } .rx-body { -webkit-box-decoration-break: clone; box-decoration-break: clone; } }

/* module 3: records, forms, exercises, home programmes */
.rec-sec { padding-bottom: var(--sp-2); } .rec-sec h2 { font-size: var(--fs-base); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3); }
.rec-field { display: grid; gap: var(--sp-1); } .rec-label { font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); } .rec-item { padding: var(--sp-1) 0; } .rec-value { white-space: pre-wrap; }
.rec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .rec-table th, .rec-table td { border: 1px solid var(--line-strong); padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top; } .rec-table th { background: var(--sunken); font-size: var(--fs-xs); }
.rec-table input, .rec-table select { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); min-width: 70px; } .rec-change { font-weight: 600; white-space: nowrap; } .rec-title { font-size: var(--fs-xl); margin: var(--sp-1) 0 var(--sp-2); }
.rec-sign { margin-top: var(--sp-hair); } .rec-sigmark { font-family: "Segoe Script", "Brush Script MT", cursive; font-size: var(--fs-2xl); }
.body-chart { display: grid; gap: var(--sp-2); max-width: 260px; } .chart-svg { width: 100%; max-width: 220px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: crosshair; } .chart-svg:not([data-editable]) { cursor: default; }
.chart-marks { margin: var(--sp-1) 0 0 var(--sp-5); padding: 0; } .chart-marks li { margin: var(--sp-hair) 0; }
.builder-field { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); display: grid; gap: var(--sp-2); }
.ex-thumb { width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; background: var(--sunken); flex: none; } .ex-none { display: grid; place-items: center; color: var(--ink-3); font-weight: 700; }
.ex-pick { max-height: 420px; overflow-y: auto; } .dose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.chips-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2); font-weight: 500; }
.hep-item { display: grid; grid-template-columns: 34mm 1fr auto; gap: 4mm; padding: 3mm 0; border-bottom: 1px solid #bbb; break-inside: avoid; align-items: start; } .hep-item h2 { margin: 0 0 var(--sp-hair); font-size: var(--fs-md); } .hep-item p { margin: var(--sp-hair) 0; }
.hep-pic img { width: 34mm; height: 26mm; object-fit: cover; border: 1px solid #999; } .hep-nopic { width: 34mm; height: 26mm; border: 1px dashed #999; display: grid; place-items: center; color: #777; font-size: var(--fs-2xl); }
.hep-dose { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); } .hep-qr svg { width: 20mm; height: 20mm; display: block; }
@media print { .rec-table input, .rec-table select { border: 0; padding: 0; } }

/* module 4: billing, invoices, receipts, day book */
.inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; } @media (max-width: 960px) { .inv-grid { grid-template-columns: 1fr; } }
.inv-lines { display: grid; gap: var(--sp-3); }
.inv-line { display: grid; grid-template-columns: minmax(180px, 2.2fr) 70px minmax(110px, 1fr) minmax(150px, 1.1fr); gap: var(--sp-2) var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--surface-2, transparent); }
.inv-line .il-people { grid-column: span 2; } .inv-line .il-total { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.il-disc select { flex: 0 0 88px; width: 88px; } .il-disc input { flex: 1 1 auto; }
@media (max-width: 760px) { .inv-line { grid-template-columns: 1fr 1fr; } .inv-line .il-service { grid-column: 1 / -1; } .inv-line .il-people { grid-column: 1 / -1; } }
.sum { margin: 0; display: grid; gap: var(--sp-2); } .sum > div { display: flex; justify-content: space-between; gap: var(--sp-3); } .sum dt { color: var(--muted); } .sum dd { margin: 0; font-weight: 600; } .sum .big dt, .sum .big dd { font-size: var(--fs-lg); color: var(--text); font-weight: 700; } .sum .bad dd, .sum .bad dt { color: var(--bad); }
.card-title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 var(--sp-3); }
.mr-page { font-size: var(--fs-sm); } .mr-title { display: flex; justify-content: space-between; align-items: flex-start; margin: var(--sp-1) 0 var(--sp-3); } .mr-title > span { font-size: var(--fs-title); font-weight: 800; border: 2px solid #111; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3); }
.mr-date { text-align: right; } .mr-copy { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; border: 1px solid #111; padding: 1px var(--sp-2); margin-top: var(--sp-1); display: inline-block; }
.mr-box { border: 1px solid #9db; background: #eefaf3; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-hair); margin-bottom: var(--sp-3); } .mr-cols { display: flex; justify-content: space-between; gap: var(--sp-3); } .r { text-align: right; }
.mr-lines { width: 100%; border-collapse: collapse; margin: var(--sp-1) 0; } .mr-lines th, .mr-lines td { border: 1px solid #333; padding: var(--sp-1) var(--sp-2); text-align: left; } .mr-lines th { background: #d9e8e0; } .mr-lines th.r, .mr-lines td.r { text-align: right; }
.mr-sums { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #333; margin-top: var(--sp-3); } .mr-stamp { display: grid; place-items: center; text-align: center; border-right: 1px solid #333; font-size: var(--fs-kpi); padding: var(--sp-2); } .mr-sums table { width: 100%; border-collapse: collapse; } .mr-sums td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid #ccc; } .mr-sums tr.mr-strong td { font-weight: 700; }
.mr-words { border: 1px solid #333; border-top: 0; padding: var(--sp-1) var(--sp-2); margin-top: -1px; } .mr-gap { height: 8px; } .mr-note { margin: var(--sp-2) 0; } .mr-h { margin: var(--sp-3) 0 var(--sp-hair); font-size: var(--fs-sm); }
.mr-foot { text-align: center; font-size: var(--fs-xs); margin-top: var(--sp-2); background: #e6811f; color: #111; padding: var(--sp-2); font-weight: 600; }
@media print { .billing-tabs { display: none; } }
.day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.big-num { font-size: var(--fs-kpi); font-weight: 800; } .diff-short { color: var(--bad); font-weight: 700; } .diff-over { color: var(--warn); font-weight: 700; }

/* module 6: accounts reports, vouchers */
.rep-page { font-size: var(--fs-sm); } .rep-title { display: flex; justify-content: space-between; align-items: flex-start; margin: var(--sp-1) 0 var(--sp-3); gap: var(--sp-3); } .rep-title > span { font-size: var(--fs-xl); font-weight: 800; border-bottom: 2px solid #111; }
.rep-small th, .rep-small td { font-size: var(--fs-xs); padding: var(--sp-hair) var(--sp-1); } .rep-grand td { border: 1px solid #333; padding: var(--sp-1) var(--sp-2); } .rep-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.rep-sign { margin-top: auto; padding-top: var(--sp-10); display: flex; justify-content: space-between; gap: var(--sp-6); break-inside: avoid; } .rep-sign > div { min-width: 40mm; text-align: center; }

/* Module 7: the summary boxes above a report's tables */
.rep-stats { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); } .rep-stats > div { border: 1px solid #c9c9c9; border-radius: var(--r-xs); padding: var(--sp-2) var(--sp-3); min-width: 130px; } .rep-stats b { font-size: var(--fs-base); }
/* Patient list (Module 1 review, 2026-09-24): filters, sort and a one-column layout on phones */
.list-tools { flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); } .list-tools .seg a span { margin-left: var(--sp-1); font-weight: 500; color: var(--ink-3); } .list-tools .sort-by select { width: auto; padding: var(--sp-2) var(--sp-7) var(--sp-2) var(--sp-3); }
.sm-only { display: none; } .patient-list .person .grow { min-width: 0; } .due-line { color: var(--warn); font-size: var(--fs-sm); font-weight: 600; } .due-line .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: var(--sp-1); }
@media (max-width: 960px) {
  .sm-only { display: inline; } span.due-line.sm-only { display: block; margin-top: var(--sp-hair); } .patient-list thead { display: none; }
  .patient-list .person { width: 100%; } .patient-list .person > .icon.sm-only { margin-left: auto; color: var(--ink-3); flex: none; display: block; }
  .list-tools .seg { order: 3; width: 100%; overflow-x: auto; } .list-tools .sort-by { order: 2; }
}
/* ---- patient page (Module 1 review step 3, D039) ---- */
.pt-profile { gap: var(--sp-6); }
.list-label { padding: var(--sp-3) var(--sp-5) var(--sp-hair); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.list-label + .list > *:first-child { border-top: 0; } .list + .list-label { border-top: 1px solid var(--line); margin-top: 0; }
details.show-all { border-top: 1px solid var(--line); } details.show-all > summary { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-md); font-weight: 600; color: var(--brand-strong); }
details.show-all > summary::-webkit-details-marker { display: none; } details.show-all[open] > summary { border-bottom: 1px solid var(--line); }
details.hist > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); } details.hist > summary::-webkit-details-marker { display: none; }
details.hist > summary > div { flex: 1; min-width: 0; } details.hist > summary > .icon { width: 16px; height: 16px; color: var(--ink-3); flex: none; transition: transform .15s; } details.hist[open] > summary > .icon { transform: rotate(90deg); }
.hist-rows { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--sunken); }
@media (max-width: 960px) { .pt-profile { gap: 0; } .pt-profile > dl { margin: 0; } .pt-profile > dl + dl { margin-top: var(--sp-3); } .list-label { padding-left: var(--sp-4); padding-right: var(--sp-4); } details.show-all > summary { padding-left: var(--sp-4); padding-right: var(--sp-4); } }
@media (max-width: 640px) {
  .stats.pt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .stats.pt-stats .stat { border: 0; box-shadow: none; border-radius: 0; background: transparent; padding: var(--sp-3) var(--sp-3); } .stats.pt-stats .stat + .stat { border-left: 1px solid var(--line); }
  .stats.pt-stats .stat .label { font-size: var(--fs-xs); } .stats.pt-stats .stat .label .icon, .stats.pt-stats .stat .hint { display: none; } .stats.pt-stats .stat .value { font-size: var(--fs-xl); margin-top: var(--sp-1); }
  .pt-actions { width: 100%; } .pt-actions > .btn, .pt-actions > .menu { flex: 1 1 0; } .pt-actions > .menu > summary { width: 100%; justify-content: center; }
}
/* ---- public /join/ form (Module 1 review step 4, D041) ---- */
.join { max-width: 700px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-16); }
.join-form h2 { font-size: var(--fs-lg); padding-top: var(--sp-1); border-top: 1px solid var(--line); padding-top: var(--sp-4); } .join-form h2:first-of-type { border-top: 0; padding-top: 0; }
.join-form h2 small, .join h1 small { font-weight: 500; color: var(--ink-3); font-size: var(--fs-sm); margin-left: var(--sp-1); }
.join-form .field > span:first-child small { font-weight: 400; color: var(--ink-3); margin-left: var(--sp-1); }
.join-form .field.bad input { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .pick label { cursor: pointer; } .pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-block; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); font-weight: 500; background: var(--surface); }
.pick input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; } .pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
details.join-more { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); } details.join-more > summary { cursor: pointer; font-weight: 600; color: var(--brand-strong); }
details.join-more > summary small { font-weight: 500; color: var(--ink-3); margin-left: var(--sp-1); }
.join-done { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-5); text-align: center; } .join-done .btn { white-space: normal; max-width: 100%; height: auto; min-height: 40px; } .join-done h1 { font-size: var(--fs-title); } .join-done p { max-width: 460px; } .join-done .btn { margin-top: var(--sp-3); }
.join-tick { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft, var(--brand-soft)); color: var(--ok, var(--brand)); } .join-tick .icon { width: 38px; height: 38px; stroke-width: 2.5; }
/* ---- printed Patient Data Sheet (D041), laid out like the centre's paper form ---- */
.ds-title { text-align: center; font: italic 700 20px/1.2 Georgia, "Times New Roman", serif; text-decoration: underline; margin: 4px 0 10px; }
.ds-note { font-size: 10.5px; margin-bottom: 10px; } .ds-soft { color: #666; font-size: 11px; }
.ds-meta { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; } .ds-meta span { display: inline-block; min-width: 110px; padding: 3px 8px; background: #fde0d6; }
.ds-h { font: italic 700 14px/1.2 Georgia, "Times New Roman", serif; margin: 12px 0 5px; }
.ds-grid { width: 100%; border-collapse: collapse; font-size: 11.5px; } .ds-grid th, .ds-grid td { border: 1px solid #cfcfcf; padding: 6px 7px; text-align: left; vertical-align: top; }
.ds-grid th { background: #dedede; font-weight: 700; width: 17%; } .ds-two th { width: 34%; } .ds-tall td { height: 60px; width: 33%; } .ds-grid + .ds-grid { margin-top: 5px; }
.ds-box { display: inline-block; margin-right: 28px; }
/* ---- attendance / package card (D050) ---- */
.ac-meta { font-size: 12px; margin-bottom: 14px; display: grid; gap: 3px; }
.ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm 8mm; }
.ac-col { display: grid; gap: 4mm; align-content: start; }
.ac-box { border: 1.5px solid #222; border-radius: 5px; padding: 7px 12px; font-size: 12.5px; break-inside: avoid; }
.ac-box div { padding: 2px 0; } .ac-box b { font-weight: 700; letter-spacing: .03em; } .ac-box span { margin: 0 5px; }
@media (max-width: 640px) { .ac-grid { grid-template-columns: 1fr; } }
/* ---- approvals page (Module 1 review step 5, D042) ---- */
.appr { display: flex; gap: var(--sp-4); align-items: flex-start; } .appr .sub { font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--sp-hair); } .appr-main { flex: 1; min-width: 0; } .appr-acts { display: flex; gap: var(--sp-2); flex: none; }
.appr-lines { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-md); } .appr-lines s { text-decoration-thickness: 1px; }
.appr-summary { white-space: pre-line; padding: var(--sp-3) var(--sp-3); border-radius: var(--r-md); background: var(--sunken); font-size: var(--fs-md); } .appr-summary:empty { display: none; }
.appr-compare { font-size: var(--fs-sm); } .appr-compare td:first-child { width: 90px; } .appr-diff { color: var(--warn); font-weight: 600; }
@media (max-width: 640px) { .appr { flex-direction: column; gap: var(--sp-3); } .appr-acts { width: 100%; } .appr-acts .btn { flex: 1; } }
/* D147: a row of pills wider than the phone scrolls inside itself; the page never gets wider (found by tools/qa/health_check.js on Approvals and Data health) */
@media (max-width: 640px) { .seg.seg-scroll { max-width: 100%; overflow-x: auto; } .seg.seg-scroll a { flex: none; white-space: nowrap; } }
.seg.seg-scroll a span { margin-left: var(--sp-1); font-weight: 600; color: var(--ink-3); }
/* ---- prescription on the pad, laid out in A4 pages by static/rxprint.js (D043) ---- */
.rx-pages { display: grid; justify-content: center; gap: 18px; }
.rx-sheet { position: relative; width: 210mm; height: 297mm; overflow: hidden; background: #fff; color: #111; box-shadow: var(--shadow-pop); font: 12px/1.45 Arial, "Segoe UI", sans-serif; }
.rx-pad { position: absolute; inset: 0; width: 210mm; height: 297mm; object-fit: fill; z-index: 0; }
.rx-area { position: absolute; z-index: 1; overflow: hidden; padding-bottom: 6mm; box-sizing: border-box; display: flex; flex-direction: column; }
.rx-mark-page { position: absolute; z-index: 2; top: 42%; left: 0; right: 0; text-align: center; font-size: 64px; font-weight: 800; color: rgba(160, 0, 0, .14); transform: rotate(-24deg); pointer-events: none; }
.rxp-running { font-size: 10px; color: #444; border-bottom: 1px solid #bbb; padding-bottom: 2px; margin-bottom: 6px; }
.rxp-pageno { position: absolute; right: 0; bottom: 0; font-size: 9.5px; color: #444; }
.rxp-top { display: grid; grid-template-columns: 58% 1fr; gap: 5mm; align-items: start; margin-bottom: 4mm; }
.rxp-patient { border-collapse: collapse; background: rgba(214, 234, 244, .75); border-radius: 8px; width: 100%; } .rxp-patient th, .rxp-patient td { padding: 2px 8px; text-align: left; vertical-align: top; } .rxp-patient th { width: 26mm; font-weight: 400; color: #333; white-space: nowrap; } .rxp-patient td { font-weight: 600; }
.rxp-who { font-size: 10.5px; line-height: 1.3; } .rxp-who b { display: block; font-size: 14px; color: #143b6b; margin-bottom: 1px; }
.rxp-vitals { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9.5px; margin-bottom: 4mm; } .rxp-vitals th, .rxp-vitals td { border: 1px solid #8797a5; padding: 2px 2px; text-align: center; overflow-wrap: anywhere; } .rxp-vitals th { background: #d8ecdf; font-weight: 600; } .rxp-vitals td { height: 6mm; }
.rxp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm; align-items: start; }
.rxp-col { min-width: 0; } .rxp-sec { margin: 0; } .rxp-sec h4 { margin: 3mm 0 1mm; font-size: 12.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .rxp-col > .rxp-sec:first-child h4 { margin-top: 0; }
.rxp-sec .ln { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.45em; }
.rxp-tail { margin-top: 3mm; flex: 1; display: flex; flex-direction: column; gap: 3mm; } .rxp-tail > .rxp-foot { margin-top: auto; }   /* the signature and QR sit at the bottom of the last page (owner, 2026-09-26) */ .rxp-tail .rx-ex-table caption { text-align: left; font-weight: 700; font-size: 12.5px; padding-bottom: 1mm; }
.rxp-extra { display: grid; gap: 1mm; }
.rxp-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; padding-top: 6mm; } .rxp-sign { min-width: 55mm; text-align: center; }
.rxp-foot .rx-qr svg { margin: 0; } .rxp-foot .rx-qr { text-align: left; }
@media print {
  body:has(.rx-pages), body:has(.rx-pages) .app, body:has(.rx-pages) .main, body:has(.rx-pages) .page, body:has(.rx-pages) .paper-wrap { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; }
  .rx-pages { display: block; } .rx-sheet { box-shadow: none; break-after: page; margin: 0; height: 296.8mm; } .rx-sheet:last-child { break-after: auto; }
}
@media (max-width: 960px) { .rx-pages { justify-content: start; } }
/* ---- Settings: prescription pad (D043) ---- */
.rxpad-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-6); align-items: start; }
.rxpad-preview { position: relative; width: 380px; height: 548px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: #e8ecef; }
.rxpad-preview iframe { width: 820px; height: 1180px; border: 0; transform: scale(.4634); transform-origin: 0 0; }
.rxpad-list .item form { margin: 0; }
@media (max-width: 960px) { .rxpad-grid { grid-template-columns: minmax(0, 1fr); } .rxpad-preview { margin: 0 auto; } }
@media (max-width: 520px) { .rxpad-preview { width: 300px; height: 433px; } .rxpad-preview iframe { transform: scale(.366); } }
/* ---- the prescription page shaped like the pad (D043) ---- */
.rxe { max-width: 210mm; margin: 0 auto; }
.rxe-sheet { position: relative; background: #fff; color: #111; border-radius: 6px; box-shadow: var(--shadow-pop); font: 13px/1.45 Arial, "Segoe UI", sans-serif; padding: 18px 20px 20px; }
.rxe-sheet.has-pad { padding: calc(var(--top) / 210 * 100%) calc(var(--side) / 210 * 100%) calc(var(--bottom) / 210 * 100%); min-height: 297mm; }   /* the pad's header strip on top and its footer strip at the bottom; the writing grows between them */
.rxe-sheet.has-pad::before, .rxe-sheet.has-pad::after { content: ""; position: absolute; left: 0; right: 0; background: var(--pad) no-repeat center top / 100% auto; pointer-events: none; z-index: 0; border-radius: inherit; }
.rxe-sheet.has-pad::before { top: 0; aspect-ratio: 210 / var(--top); }
.rxe-sheet.has-pad::after { bottom: 0; aspect-ratio: 210 / var(--bottom); background-position: center bottom; }
.rxe-sheet > * { position: relative; z-index: 1; }
.rxe-sheet :is(input, select, textarea) { color: #111; background: rgba(255, 255, 255, .78); border-color: #c5ced6; }
.rxe-top { display: grid; grid-template-columns: 58% 1fr; gap: 18px; align-items: start; margin-bottom: 12px; }
.rxe-who { font-size: 11.5px; line-height: 1.35; } .rxe-who b { display: block; font-size: 15px; color: #143b6b; } .rxe-who textarea { width: 100%; font-size: 12px; }
.linkish { background: none; border: 0; padding: 0; margin-top: 4px; color: var(--brand-strong); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .linkish .icon { width: 13px; height: 13px; }
.rxe-vitals input { width: 100%; border: 0; padding: 3px 2px; text-align: center; font-size: 12px; background: transparent; } .rxe-vitals input[type=checkbox] { width: 16px; height: 16px; } .rxe-vitals td { height: auto; padding: 0; }
.rxe-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rxe-col { display: grid; gap: 12px; align-content: start; }
.rxe-sec { position: relative; display: grid; gap: 4px; } .rxe-h { font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; display: flex; align-items: center; gap: 8px; }
.rxe-sec textarea { width: 100%; min-height: 34px; resize: none; overflow: hidden; padding: 6px 30px 6px 8px; font: inherit; line-height: 1.45; }
.rxe-kind { width: auto; padding: 2px 24px 2px 6px; font-size: 12px; text-decoration: none; }
.rxe-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .rxe-inline input { padding: 6px 8px; }
.rxe-checks { display: grid; gap: 2px; padding: 2px 0 4px; } .rxe-checks label { display: flex; gap: 8px; align-items: center; cursor: pointer; } .rxe-checks input { width: 16px; height: 16px; flex: none; }
.rxe-star { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #b8860b; cursor: pointer; }
.rxe-star:hover { background: rgba(0, 0, 0, .06); }
.rxe-star .icon { width: 15px; height: 15px; }
.rxe-menu { position: absolute; z-index: 20; right: 0; top: 100%; width: min(360px, 90vw); max-height: 300px; overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-pop); padding: 4px; }
.rxe-ph { display: flex; align-items: center; } .rxe-ph button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; padding: 7px 8px; border-radius: 7px; } .rxe-ph button:first-child { flex: 1; } .rxe-ph button:hover, .rxe-ph-save:hover { background: var(--sunken); }
.rxe-ph-x { color: var(--ink-3); } .rxe-ph-save { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; border-top: 1px solid var(--line); margin-top: 4px; padding: 8px; font: inherit; font-weight: 600; color: var(--brand-strong); text-align: left; cursor: pointer; }
.rxe-extras { display: grid; gap: 12px; margin-top: 14px; } .rxe-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px dashed #c5ced6; padding-top: 10px; }
.rxe-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 22px; flex-wrap: wrap; } .rxe-therapist { max-width: 260px; }
.rxe-sign { text-align: center; min-width: 200px; } .rxe-sigup { margin-top: 2px; }
.rxe-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
@media (max-width: 640px) {
  .rxe-sheet, .rxe-sheet.has-pad { background-image: none; padding: 14px 12px; min-height: 0; border-radius: 12px; } .rxe-sheet.has-pad::before, .rxe-sheet.has-pad::after { display: none; }
  .rxe-top, .rxe-cols { grid-template-columns: minmax(0, 1fr); }
  .rxe-vitals, .rxe-vitals tbody, .rxe-vitals tr { display: block; } .rxe-vitals tr:first-child { display: none; }
  .rxe-vitals tr + tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .rxe-vitals td { border: 1px solid #c5ced6; border-radius: 8px; padding: 3px 4px; }
  .rxe-vitals td::before { content: attr(data-label); display: block; font-size: 10.5px; color: #555; }
  .rxe-inline { grid-template-columns: minmax(0, 1fr); }
}

/* ---- schedule day-grid view (D046) ---- */
.legend { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
/* D156: the Grid and Week schedule views: hourly cells, round photos, a ring that is the state of the visit */
:root { --ring-booked: #c58700; --ring-arrived: #1c5cab; --ring-in_session: #1c5cab; --ring-completed: #0a7a0a; --ring-no_show: #d9580a; --ring-cancelled: #b42323; }
:root[data-theme="dark"] { --ring-booked: #e6b84d; --ring-arrived: #6ea8f0; --ring-in_session: #6ea8f0; --ring-completed: #5fcf5f; --ring-no_show: #f2a25c; --ring-cancelled: #f08080; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ring-booked: #e6b84d; --ring-arrived: #6ea8f0; --ring-in_session: #6ea8f0; --ring-completed: #5fcf5f; --ring-no_show: #f2a25c; --ring-cancelled: #f08080; } }
.ring-booked { --ring: var(--ring-booked); } .ring-arrived { --ring: var(--ring-arrived); } .ring-in_session { --ring: var(--ring-in_session); }
.ring-completed { --ring: var(--ring-completed); } .ring-no_show { --ring: var(--ring-no_show); } .ring-cancelled { --ring: var(--ring-cancelled); }
.sg-wrap { overflow-x: auto; }
.sg { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.sg th, .sg td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; text-align: left; vertical-align: middle; }
.sg thead th { background: var(--sunken); font-size: var(--fs-sm); white-space: nowrap; position: sticky; top: 0; z-index: 2; padding: var(--sp-2) var(--sp-3); }
.sg .sg-col { min-width: 112px; } .sg .sg-col a { color: inherit; text-decoration: none; font-weight: 600; } .sg .sg-col.today { box-shadow: inset 0 -3px 0 var(--brand); }
.sg .sg-col.closed { color: var(--ink-3); } .sg .wd-name { color: var(--ink-3); font-weight: 600; }
.sg .sg-time { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 72px; min-width: 72px; padding: var(--sp-2) var(--sp-2); white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); vertical-align: top; }
.sg thead .sg-time { z-index: 3; background: var(--sunken); }
.sg-head-av { width: 26px; height: 26px; font-size: var(--fs-xs); }
.sg td { height: 64px; min-width: 112px; }
.sg-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 64px; padding: var(--sp-1); border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.sg-btn:hover, .sg-btn:focus-visible { background: var(--brand-soft); }
.sg-free .sg-plus { opacity: .3; } .sg-free:hover .sg-plus, .sg-free:focus-visible .sg-plus { opacity: 1; color: var(--brand-strong); } .sg-plus .icon { width: 18px; height: 18px; }
.sg td.off, .sg tr.lunch td { background: repeating-linear-gradient(135deg, var(--sunken) 0 6px, transparent 6px 12px); }
.sg tr.lunch .sg-time { background: var(--sunken); color: var(--ink-2); }
.sg-stack { display: flex; align-items: center; }
.sg-stack > * + * { margin-left: calc(var(--sp-2) * -1); }
.sg-av { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 3px solid var(--ring, var(--line)); background: var(--brand-soft); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-strong); }
.sg-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sg-av.ring-cancelled { opacity: .65; }
.sg-glyph { position: absolute; right: calc(var(--sp-1) * -1); bottom: calc(var(--sp-1) * -1); width: 16px; height: 16px; border-radius: 50%; background: var(--ring, var(--ink-3)); display: grid; place-items: center; }
.sg-glyph .icon { width: 10px; height: 10px; stroke: #fff; color: #fff; }
.sg-more { margin-left: calc(var(--sp-1) * -1); min-width: 28px; height: 28px; padding: 0 var(--sp-1); display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--sunken); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; z-index: 1; }
.sg-tools { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; margin-left: auto; }
.sg-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); }
.sg-key { display: inline-flex; align-items: center; gap: var(--sp-1); } .sg-key i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--ring); display: inline-block; }
.sg-pop { position: absolute; z-index: 60; width: min(380px, calc(100vw - var(--sp-6))); max-height: min(70vh, 520px); overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: var(--sp-3) var(--sp-4); outline: none; }
.sg-pop-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-2); }
.sg-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.sg-who { flex: 1; min-width: 0; } .sg-who .sub { font-size: var(--fs-sm); color: var(--ink-3); } .sg-who a { color: var(--ink); } .sg-chips { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-1); }
.sg-item .acts { flex: none; display: flex; gap: var(--sp-1); align-items: center; }
.sg-pop-foot { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .sg-pop { position: fixed; left: var(--sp-3); right: var(--sp-3); top: auto; bottom: var(--sp-3); width: auto; max-height: 75vh; }
  .sg-item { flex-wrap: wrap; } .sg-item .acts { width: 100%; }
}

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-hair); text-align: center; }
.cal-dow { font-size: var(--fs-xs); color: var(--ink-3); padding: var(--sp-1) 0; }
.cal-day { display: block; padding: var(--sp-2) 0; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink); text-decoration: none; }
.cal-day:hover { background: var(--sunken); }
.cal-day.today { font-weight: 700; color: var(--brand-strong); }
.cal-day.chosen { background: var(--brand); color: var(--brand-ink); }

/* Module 9 (D076/D077): patient portal - phone first, one column, large touch targets */
.portal-body { min-height: 100vh; }
.portal-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.portal-brand { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.portal-brand:hover { text-decoration: none; } .portal-brand img { width: 36px; height: 36px; object-fit: contain; border-radius: var(--r-sm); }
.portal-brand strong { display: block; font-size: var(--fs-base); line-height: var(--lh-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-brand small { display: block; color: var(--ink-3); font-size: var(--fs-sm); }
.portal-brand > span:last-child { min-width: 0; }
.portal-who { max-width: 760px; margin: var(--sp-4) auto 0; padding: 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); }
.portal-who .grow { flex: 1; min-width: 0; } .portal-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-who span { font-size: var(--fs-sm); color: var(--ink-3); }
.portal-nav { max-width: 760px; margin: var(--sp-3) auto 0; padding: 0 var(--sp-4) var(--sp-1); display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
.portal-nav::-webkit-scrollbar { display: none; }
.portal-nav a { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: var(--fs-md); text-decoration: none; }
.portal-nav a .icon { width: 16px; height: 16px; } .portal-nav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.portal-main { max-width: 760px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-6); display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.portal-h1 { font-size: var(--fs-title); margin: var(--sp-1) 0 0; }
.portal-foot { max-width: 760px; margin: 0 auto; padding: var(--sp-2) var(--sp-4) var(--sp-10); display: grid; gap: var(--sp-3); justify-items: start; }
.portal-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.portal-tile { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); color: var(--ink); text-decoration: none; } .portal-tile:hover { text-decoration: none; border-color: var(--brand); }
.portal-tile-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); } .portal-tile-label .icon { width: 16px; height: 16px; }
.portal-tile b { font-size: var(--fs-xl); } .portal-tile span { font-size: var(--fs-md); color: var(--ink-2); }
.portal-due { color: var(--bad); }
.portal-row { color: var(--ink); text-decoration: none; min-height: 52px; } .portal-row:hover { background: var(--sunken); text-decoration: none; } .portal-row > .icon:first-child { color: var(--brand-strong); }
.portal-date { width: 44px; flex: none; text-align: center; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-strong); padding: var(--sp-1) 0; line-height: var(--lh-tight); }
.portal-date b { display: block; font-size: var(--fs-xl); } .portal-date span { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; }
.portal-wide { width: 100%; padding: var(--sp-3); }
.portal-meter { height: 10px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; margin: var(--sp-3) 0 var(--sp-2); } .portal-meter span { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); }
.portal-due-box { display: grid; gap: var(--sp-1); } .portal-due-box > span { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; } .portal-due-box b { font-size: var(--fs-title); }
.portal-doc .card-body { display: grid; gap: var(--sp-3); }
.portal-doc-head { display: flex; align-items: flex-start; gap: var(--sp-3); justify-content: space-between; } .portal-doc-head h1 { font-size: var(--fs-2xl); margin: var(--sp-hair) 0 0; }
.portal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } .portal-table th, .portal-table td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; } .portal-table .num { text-align: right; white-space: nowrap; }
.portal-sums { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); margin: var(--sp-1) 0 0; } .portal-sums dt { color: var(--ink-3); } .portal-sums dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.portal-sec { border-top: 1px solid var(--line); padding-top: var(--sp-3); } .portal-sec h3 { font-size: var(--fs-base); margin: 0 0 var(--sp-1); color: var(--brand-strong); }
.portal-meds { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.portal-sign { display: grid; justify-items: end; gap: var(--sp-hair); border-top: 1px solid var(--line); padding-top: var(--sp-3); text-align: right; }
.portal-verify { display: flex; gap: var(--sp-3); align-items: center; border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--sp-3); } .portal-qr svg { width: 92px; height: 92px; display: block; background: #fff; }
.portal-ex { display: flex; gap: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); } .portal-ex h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); } .portal-ex p { margin: var(--sp-1) 0; }
.portal-ex-pic { width: 96px; flex: none; } .portal-ex-pic img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; display: block; }
.portal-ex-pic span { width: 96px; height: 96px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--sunken); color: var(--ink-3); font-size: var(--fs-title); font-weight: 700; }
.portal-dose { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-md); }
.portal-scale span { min-width: 40px; text-align: center; padding: var(--sp-2) var(--sp-3); }
.portal-person { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.portal-person:hover, .portal-person.on { border-color: var(--brand); background: var(--brand-soft); } .portal-person .grow { flex: 1; min-width: 0; } .portal-person b, .portal-person small { display: block; } .portal-person small { color: var(--ink-3); }
.portal-auth { max-width: 460px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-16); display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.portal-auth-top { display: flex; align-items: center; gap: var(--sp-3); } .portal-auth-body { display: grid; gap: var(--sp-4); padding: var(--sp-6); } .portal-auth-body h1 { font-size: var(--fs-title); margin: 0; } .portal-auth-body p { margin: 0; }
.portal-code { font-size: var(--fs-kpi); letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.portal-links { justify-content: space-between; } .portal-hint { text-align: center; margin: 0; }
.portal-record .rec-sec { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
@media (max-width: 520px) { .portal-ex { flex-direction: column; } .portal-ex-pic, .portal-ex-pic img, .portal-ex-pic span { width: 100%; height: auto; max-height: 220px; } .portal-ex-pic span { height: 80px; } .portal-main .form-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .portal-top, .portal-who, .portal-nav, .portal-foot { display: none !important; } .portal-main { padding: 0; max-width: none; } .portal-doc { border: 0; box-shadow: none; } }

/* D078: the Reports page as a dashboard - key number tiles, coloured icons per group, even report cards */
.tone-green { color: var(--ok); background: var(--ok-soft); } .tone-blue { color: var(--info); background: var(--info-soft); }
.tone-orange { color: #c2620a; background: color-mix(in srgb, #e07a14 15%, transparent); } .tone-violet { color: #7a4fd0; background: color-mix(in srgb, #8a5ce6 15%, transparent); }
:root[data-theme="dark"] .tone-orange { color: #f2a25c; } :root[data-theme="dark"] .tone-violet { color: #b89cf5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tone-orange { color: #f2a25c; } :root:not([data-theme="light"]) .tone-violet { color: #b89cf5; } }
.rep-mark { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; } .rep-mark .icon { width: 22px; height: 22px; }
.rep-icon { width: 38px; height: 38px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; } .rep-icon .icon { width: 19px; height: 19px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-7); }
.kpi { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5); color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
a.kpi:hover { box-shadow: var(--shadow-pop); border-color: var(--brand); text-decoration: none; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); } .kpi-label { font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); padding-top: var(--sp-hair); }
.kpi-value { font-size: var(--fs-kpi); font-weight: 700; letter-spacing: -.02em; line-height: var(--lh-tight); } .kpi-value small { font-size: var(--fs-lg); font-weight: 600; color: var(--ink-3); margin-right: var(--sp-1); }
.kpi-hint { font-size: var(--fs-sm); color: var(--ink-3); } .kpi-change { font-size: var(--fs-sm); font-weight: 600; } .kpi-change span { font-weight: 400; color: var(--ink-3); }
.kpi-change.up { color: var(--ok); } .kpi-change.down { color: var(--bad); }
.report-sub-title { font-size: var(--fs-sm); font-weight: 600; color: var(--brand-strong); margin: 0 0 var(--sp-3); text-transform: uppercase; letter-spacing: .04em; }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.report-grid .report-card { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5); height: 100%; }
.report-card .rep-text { min-width: 0; display: grid; gap: var(--sp-1); } .report-card .rep-text b { font-size: var(--fs-base); } .report-card .rep-text span { font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-body); }
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpi-grid { gap: var(--sp-3); } .kpi { padding: var(--sp-4); } .kpi-value { font-size: var(--fs-title); } .report-grid { grid-template-columns: minmax(0, 1fr); } }
.plan-notice { margin-bottom: var(--sp-4); }
/* D084: own profile - a link on the sidebar's name and photo */
.side-foot a.who, .side-foot a.avatar { color: inherit; text-decoration: none; } .side-foot a.who:hover b { color: var(--brand-strong); }
.side-foot a.avatar { overflow: hidden; } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.profile-photo { width: 88px; height: 88px; font-size: var(--fs-kpi); overflow: hidden; }
/* D084: the portal's password sign-in */
.portal-or { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-3); font-size: var(--fs-sm); } .portal-or::before, .portal-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.portal-offer { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4); color: var(--ink); text-decoration: none; border-color: var(--brand); } .portal-offer:hover { text-decoration: none; background: var(--brand-soft); }
.portal-offer > .icon:first-child { color: var(--brand-strong); } .portal-offer .grow { flex: 1; min-width: 0; } .portal-offer b, .portal-offer .grow span { display: block; } .portal-offer .grow span { font-size: var(--fs-sm); color: var(--ink-3); }
/* D086: suggestions while typing, and the prescription tools bar */
.sg-menu { position: absolute; z-index: 60; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--sp-1); max-height: 320px; overflow: auto; }
.sg-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-md); } .sg-item:hover, .sg-item.on { background: var(--brand-soft); }
.sg-text { flex: 1; min-width: 0; } .sg-tag { font-size: var(--fs-xs); color: var(--ink-3); background: var(--sunken); border-radius: var(--r-pill); padding: 1px var(--sp-2); }
.sg-x { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: var(--fs-lg); line-height: var(--lh-tight); padding: 0 var(--sp-1); } .sg-x:hover { color: var(--bad); }
.rxe-tools { max-width: 210mm; margin: 0 auto var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* D090: Staff page - toolbar, table, and one card per person on a phone */
.staff-tools { justify-content: space-between; flex-wrap: wrap; padding-bottom: var(--sp-4); } .staff-filters { flex-wrap: nowrap; justify-content: flex-end; } .staff-filters select { width: auto; } .staff-table td:nth-child(2) { min-width: 230px; }
.staff-id { font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; font-size: var(--fs-sm); } .staff-table td .sub { color: var(--ink-3); font-size: var(--fs-sm); }
@media (max-width: 760px) {
  .staff-table thead { display: none; } .staff-table, .staff-table tbody { display: block; }
  .staff-table tr { display: block; position: relative; padding: var(--sp-4) var(--sp-14) var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--line); } .staff-table tr[hidden] { display: none; }
  .staff-table td { display: block; padding: var(--sp-hair) 0; border: 0; } .staff-table td.staff-id { font-size: var(--fs-xs); }
  .staff-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: var(--fs-sm); }
  .staff-table td.right { position: absolute; top: 12px; right: 10px; padding: 0; }
  .staff-filters { flex-wrap: wrap; width: 100%; } .staff-filters .search { flex: 1 1 100% !important; max-width: none !important; } .staff-filters select { flex: 1 1 40%; } .staff-table td:nth-child(2) { min-width: 0; }
}
.sg-head { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: var(--sp-2) var(--sp-2) var(--sp-1); } /* D091: Centre list / Saved by me / Used before */
.pr-chart { width: 100%; max-width: 480px; height: auto; display: block; } /* D093: the pain graph on the Progress Report */

/* Therapist workload picker (FR-RX-12, static/tload.js) */
.tload-field { position: relative; }
.tload-pick { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; min-height: 38px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tload-pick:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tload-caret { color: var(--ink-3); }
.tload-panel { box-sizing: border-box; position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; width: min(480px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.tload-panel.down { bottom: auto; top: calc(100% + 6px); }
.tload-group { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tload-opt { display: block; width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tload-opt:hover, .tload-opt:focus-visible { background: var(--sunken); outline: none; }
.tload-opt.chosen { background: var(--brand-soft); }
.tload-opt b { display: block; }
.tload-sub { display: block; font-size: var(--fs-sm); color: var(--ink-2); }
.tload-more { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-hair); }
.tload-wait { padding: var(--sp-3); margin: 0; }
@media print { .tload-pick, .tload-panel { display: none !important; } }

/* ---------- D103 shell (structure from the Figma reference; our colours and fonts) ---------- */
.app { grid-template-columns: 264px minmax(0, 1fr); }
a.brand { color: inherit; text-decoration: none; }
.sidebar { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
.nav a { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-base); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent); }
.nav .count { background: var(--bad); color: var(--on-bad); min-width: 20px; text-align: center; padding: 1px var(--sp-2); }
.side-search, .side-me, .tb-brand { display: none; }
.topbar { min-height: 68px; gap: var(--sp-4); }
.tb-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: 0 1 auto; }
.tb-back { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.tb-back:hover { background: var(--sunken); } .tb-back .icon { transform: rotate(180deg); }
.tb-words { display: flex; flex-direction: column; min-width: 0; }
.tb-crumb { font-size: var(--fs-xs); color: var(--ink-3); line-height: var(--lh-tight); }
.tb-words h1, .tb-title { margin: 0; font-size: var(--fs-title); font-weight: 700; letter-spacing: -.02em; line-height: var(--lh-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-search { flex: 1 1 240px; min-width: 200px; max-width: 340px; }
.user-btn { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.user-btn:hover { background: var(--sunken); } .user-btn .avatar { width: 32px; height: 32px; overflow: hidden; }
.user-name { font-size: var(--fs-md); font-weight: 600; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-caret { display: inline-flex; color: var(--ink-3); } .user-caret .icon { width: 14px; height: 14px; transform: rotate(90deg); }
.user-pop { width: 270px; padding: 0; }
.user-pop-head { padding: var(--sp-4) var(--sp-4); border-bottom: 1px solid var(--line); } .user-pop-head b { display: block; } .user-pop-head span { font-size: var(--fs-xs); color: var(--ink-3); }
.user-pop-body { display: grid; padding: var(--sp-2); } .user-pop-body form { margin: 0; }
.user-pop-item { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.user-pop-item:hover { background: var(--sunken); } .user-branch span { white-space: nowrap; } .user-branch select { margin-left: auto; width: auto; max-width: 130px; padding: var(--sp-1) var(--sp-2); }
/* tablet: the sidebar becomes a narrow icon rail */
@media (min-width: 761px) and (max-width: 1199px) {
  .app { grid-template-columns: 76px minmax(0, 1fr); }
  .sidebar { padding: var(--sp-4) var(--sp-3); }
  .brand { justify-content: center; padding: var(--sp-1) 0 var(--sp-3); } .brand-text, .nav-label, .nav-text { display: none; }
  .nav-group + .nav-group { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-2); }
  .nav a { justify-content: center; padding: var(--sp-3); position: relative; }
  .nav .count { position: absolute; top: 2px; right: 2px; margin: 0; font-size: var(--fs-xs); min-width: 17px; padding: 0 var(--sp-1); line-height: 1; display: inline-grid; place-items: center; }
  .user-name, .user-caret { display: none; } .user-btn { padding: var(--sp-1); } .tb-search { min-width: 170px; max-width: 240px; }
  .tb-words h1, .tb-title { font-size: var(--fs-2xl); }   /* the title shares the bar with the search box and the icons */
  #sync-pill span { display: none; }
}
/* phone: logo or back arrow, the page name in the middle, the bell and the menu button; the menu slides in */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: 284px; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  body.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-pop); transition: transform .2s ease, visibility 0s; } body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(10, 16, 15, .45); }
  .icon-btn.menu-btn { display: inline-grid; }
  .topbar { min-height: 58px; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .tb-brand { display: grid; flex: none; } .tb-brand .brand-mark { width: 34px; height: 34px; } body.has-tb-back .tb-brand { display: none; }
  .tb-head { flex: 1; justify-content: center; position: relative; min-height: 40px; }
  .tb-back { position: absolute; left: 0; top: 0; }
  .tb-words { align-items: center; text-align: center; padding: 0 var(--sp-1); max-width: 100%; } body.has-tb-back .tb-words { padding: 0 var(--sp-12); } .tb-crumb { display: none; }
  .tb-words h1, .tb-title { max-width: 100%; }
  .tb-words h1, .tb-title { font-size: var(--fs-lg); }
  .topbar .spacer, .tb-search, .tb-settings, .tb-user { display: none; }
  .tb-sync:has(#sync-pill[data-state="ok"]) { display: none; }
  .side-search { display: block; margin: 0 var(--sp-1) var(--sp-2); flex: none; max-width: none; }
  .side-me { display: flex; align-items: center; gap: var(--sp-3); margin-top: auto; padding: var(--sp-3) var(--sp-2) var(--sp-1); border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .side-me .who { flex: 1; min-width: 0; } .side-me .who b { display: block; font-size: var(--fs-md); } .side-me .who span { font-size: var(--fs-xs); color: var(--ink-3); }
  .side-me .avatar { overflow: hidden; }
}
@media print { .tb-head, .tb-brand { display: none !important; } }

/* ---------- D105 dashboard (structure from the Figma reference) ---------- */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
.dash-main, .dash-rail { display: grid; gap: var(--sp-5); min-width: 0; }
.dash-target + .dash-target { margin-top: var(--sp-4); } .dash-target .meter { margin-top: var(--sp-2); }   /* D149 */
.dk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.dk-card { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.dk-top { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; min-width: 0; } .dk-top span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-top .icon { width: 17px; height: 17px; color: var(--brand-strong); }
.dk-num { margin-top: var(--sp-3); font-size: var(--fs-kpi); font-weight: 750; letter-spacing: -.02em; line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-num small { font-size: var(--fs-md); font-weight: 600; color: var(--ink-3); }
.dk-card .meter { height: 6px; margin-top: var(--sp-3); }
.dk-hint { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); }
.dk-change { display: inline-block; padding: var(--sp-hair) var(--sp-2); border-radius: var(--r-pill); font-weight: 600; background: var(--sunken); color: var(--ink-2); }
.dk-change.up { background: var(--ok-soft); color: var(--ok); } .dk-change.down { background: var(--bad-soft); color: var(--bad); }
.dash-attn-item .avatar, .act-item .avatar { background: var(--brand-soft); color: var(--brand-strong); } .dash-attn-item .avatar .icon, .act-item .avatar .icon { width: 17px; height: 17px; }
.dash-attn-item, .act-item { color: inherit; text-decoration: none; }
.dash-charts { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-5); }
.dash-chart { display: block; width: 100%; max-width: 520px; height: auto; margin: var(--sp-2) auto 0; }
.dash-chart .grid { stroke: var(--line); stroke-width: 1; } .dash-chart .axis { fill: var(--ink-3); font-size: var(--fs-xs); }
.dash-chart rect.s-in { fill: var(--brand); } .dash-chart rect.s-out { fill: #e0a243; }
.dash-chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; } .dash-chart polyline.s-in { stroke: var(--brand); } .dash-chart polyline.s-out { stroke: #e0a243; }
.dash-chart circle.s-in { fill: var(--brand); } .dash-chart circle.s-out { fill: #e0a243; }
.dash-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); } .dash-legend i { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); margin-right: var(--sp-2); vertical-align: -1px; }
.dash-legend i.s-in { background: var(--brand); } .dash-legend i.s-out { background: #e0a243; }
.dash-money .card-head .seg { margin-left: auto; }
.dash-month { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.dash-month > div { display: grid; gap: var(--sp-hair); min-width: 0; } .dash-month span { font-size: var(--fs-sm); color: var(--ink-3); } .dash-month b { font-size: var(--fs-xl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-month small { font-size: var(--fs-xs); color: var(--ink-3); }
.day-strip { display: flex; align-items: stretch; gap: var(--sp-1); padding: var(--sp-2); background: var(--brand-soft); border-radius: var(--radius-sm); overflow-x: auto; }
.ds-day { flex: 1 0 44px; display: grid; justify-items: center; gap: 1px; padding: var(--sp-2) var(--sp-hair); border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; }
.ds-day small { font-size: var(--fs-xs); color: var(--ink-3); } .ds-day b { font-size: var(--fs-base); } .ds-day:hover { background: var(--surface); }
.ds-day.today b { color: var(--brand-strong); } .ds-day.on { background: var(--brand-strong); color: var(--brand-ink); } .ds-day.on small { color: color-mix(in srgb, var(--brand-ink) 85%, transparent); } .ds-day.on b { color: var(--brand-ink); }
.ds-arrow { flex: none; display: grid; place-items: center; width: 30px; color: var(--ink-2); } .ds-arrow:not(.next) .icon { transform: rotate(180deg); }
.dash-visits td { vertical-align: middle; } .dv-time { white-space: nowrap; font-weight: 600; } .dv-who .sub { font-size: var(--fs-sm); color: var(--ink-3); } .dv-who .chip { margin-top: var(--sp-1); }
.dv-acts .acts { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: var(--r-sm); } .cal-prev .icon { transform: rotate(180deg); }
.icon-btn.primary-icon { background: var(--brand-strong); color: var(--brand-ink); border-color: transparent; }
table.cal { width: 100%; border-collapse: collapse; text-align: center; table-layout: fixed; }
.cal th { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); padding: var(--sp-1) 0 var(--sp-2); }
.cal td { padding: var(--sp-hair); } .cal a { position: relative; display: grid; place-items: center; height: 32px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: var(--fs-md); }
.cal a:hover { background: var(--sunken); } .cal a.out { color: var(--ink-3); opacity: .55; }
.cal a.today { background: var(--brand-strong); color: var(--brand-ink); font-weight: 700; }
.cal a.busy::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); } .cal a.today.busy::after { background: #fff; }
.tl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-2); height: calc(var(--rows) * 56px); max-height: 640px; overflow-y: auto; }
.tl-hours { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-3); }
.tl-lane { position: relative; background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(100% / var(--rows))); border-radius: var(--r-sm); }
.tl-block { position: absolute; left: 4px; right: 4px; min-height: 30px; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); background: var(--brand-soft); border-left: 3px solid var(--brand); overflow: hidden; font-size: var(--fs-sm); }
.tl-block b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-block small { display: block; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-block.ok { background: var(--ok-soft); border-left-color: var(--ok); } .tl-block.info { background: var(--info-soft); border-left-color: var(--info); } .tl-block.bad { background: var(--bad-soft); border-left-color: var(--bad); } .tl-block.warn { background: var(--warn-soft); border-left-color: var(--warn); }
@media (max-width: 1399px) { .dk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1199px) {
  /* tablet and phone: one column; the order puts what the front desk needs first (D105 point 10) */
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-main, .dash-rail { display: contents; }
  .dk-row { order: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .dash-table { order: 2; } .dash-attn { order: 3; } .dash-flagged { order: 3; } .dash-cal { order: 4; } .dash-time { order: 5; }
  .dash-charts, .dash-targets { order: 6; } .dash-followups { order: 3; } .dash-ther { order: 7; } .dash-act { order: 8; } .dash-recent { order: 8; } .dash-rail > .notice { order: 9; }
}
@media (max-width: 960px) { .dk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dk-card { padding: var(--sp-3) var(--sp-4); } .dk-num { font-size: var(--fs-title); } .dash-month { grid-template-columns: 1fr; }
  .dash-visits thead { display: none; }
  .dash-visits, .dash-visits tbody, .dash-visits tr, .dash-visits td { display: block; width: 100%; }
  .dash-visits tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
  .dash-visits td { padding: 0 !important; border: 0 !important; }
  .dv-time { grid-row: 1 / span 2; } .dv-ther { grid-column: 2; font-size: var(--fs-sm); color: var(--ink-2); } .dv-status { grid-column: 2; } .dv-acts { grid-column: 1 / -1; } .dv-acts .acts { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- D106 patient list (structure from the Figma reference) ---------- */
.pl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-3); }
.pl-filters { display: contents; }
.pl-tools .seg { order: 1; } .pl-selects { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); } .pl-filters > .btn.ghost { order: 3; }
.pl-search { order: 4; flex: 1 1 200px; min-width: 180px; max-width: 320px; margin-left: auto; } .pl-qr { order: 5; } .pl-add { order: 6; margin-left: auto; } .pl-filter-btn { display: none; position: relative; }
@media (min-width: 761px) { .pl-qr { padding: 0; width: 38px; height: 38px; justify-content: center; } .pl-qr .qr-label { display: none; } }
.pl-select { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-1) 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pl-select .icon { width: 15px; height: 15px; color: var(--ink-3); } .pl-select select { border: 0; background: transparent; padding: var(--sp-2) var(--sp-7) var(--sp-2) var(--sp-hair); width: auto; max-width: 220px; }
.pl-sort { display: none; }
.pl-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.sort-head { display: inline-flex; align-items: center; gap: var(--sp-1); color: inherit; text-decoration: none; } .sort-head:hover { color: var(--ink); }
.sort-mark { font-size: var(--fs-xs); color: var(--ink-3); opacity: .7; } .sort-head.on { color: var(--ink); } .sort-head.on .sort-mark { color: var(--brand-strong); opacity: 1; }
.patient-list tbody tr[data-href] { cursor: pointer; } .patient-list tbody tr[data-href]:hover td { background: var(--surface-2); }
.pl-cond { max-width: 220px; } .patient-list th:first-child, .patient-list td:first-child { min-width: 230px; } .pl-new { margin-left: var(--sp-1); font-size: var(--fs-xs); padding: 1px var(--sp-2); }
.pl-pager { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.pl-per { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--ink-3); } .pl-per select { width: auto; padding: var(--sp-1) var(--sp-7) var(--sp-1) var(--sp-3); }
.pl-pages { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pg { min-width: 34px; height: 34px; padding: 0 var(--sp-2); display: inline-grid; place-items: center; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: var(--fs-md); text-decoration: none; }
.pg:hover { background: var(--sunken); } .pg.on { background: var(--brand-strong); border-color: transparent; color: var(--brand-ink); } .pg.gap { border: 0; background: none; min-width: 16px; padding: 0; } .pg.off { opacity: .4; }
.pg.prev .icon { transform: rotate(180deg); } .pg .icon { width: 15px; height: 15px; }
details.fold-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 0; min-height: 0; } details.fold-card[open] > summary { border-bottom: 1px solid var(--line); } details.fold-card > summary h2 { margin: 0; font-size: var(--fs-lg); } details.fold-card > summary::-webkit-details-marker { display: none; }
details.fold-card > summary .fold-hint { margin-left: auto; display: inline-flex; color: var(--ink-3); transition: transform .15s ease; } details.fold-card[open] > summary .fold-hint { transform: rotate(90deg); }
@media (max-width: 760px) {
  .pl-search { order: 1; flex: 1 1 0; min-width: 0; max-width: none; margin-left: 0; } .pl-filter-btn { order: 2; display: inline-grid; } .pl-add { order: 3; } .pl-add span { display: none; }
  .pl-filters { display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding-top: var(--sp-1); }
  .pl-tools.open .pl-filters { display: flex; }
  .pl-tools .seg { overflow-x: auto; } .pl-selects { flex-direction: column; align-items: stretch; } .pl-select select { max-width: none; flex: 1; } .pl-sort { display: flex; } .pl-qr { margin-left: 0; }
  .pl-pager { justify-content: center; } .pl-per { width: 100%; justify-content: center; }
}

/* ---------- D107 patient page (structure from the Figma "Patient Details") ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head head" "stats stats" "main rail"; gap: var(--sp-5); align-items: start; }
.pd-head { grid-area: head; } .pd-stats { grid-area: stats; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pd-main { grid-area: main; } .pd-rail { grid-area: rail; }
.pd-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; min-width: 0; }
.pd-main > * { grid-column: 1 / -1; } .pd-main > .pd-contact { grid-column: 1; } .pd-main > .pd-general { grid-column: 2; }
.pd-rail { display: grid; gap: var(--sp-5); min-width: 0; } .pd-rail > *, .pd-packages > *, .pd-main > * { min-width: 0; }
.pd-head-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding: var(--sp-6) var(--sp-6); }
.avatar.xl { width: 76px; height: 76px; border-radius: var(--r-lg); font-size: var(--fs-title); overflow: hidden; } .avatar.xl img { border-radius: var(--r-lg); }
.pd-who { flex: 1; min-width: 220px; } .pd-name { font-size: var(--fs-title); margin: 0; } .pd-meta { gap: var(--sp-4); margin-top: var(--sp-2); flex-wrap: wrap; }
.pd-head .pt-actions { gap: var(--sp-2); flex-wrap: wrap; }
.pd-kv { grid-template-columns: 120px minmax(0, 1fr); }
.vt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-3); }
.vt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.vt-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-strong); }
.vt small { display: block; font-size: var(--fs-xs); color: var(--ink-3); } .vt b { font-size: var(--fs-xl); } .vt b i { font-style: normal; font-size: var(--fs-xs); font-weight: 500; color: var(--ink-3); }
.vt-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.vt-list { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; } .vt-list small { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--sp-2); }
.vt-list ul { margin: 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-1); } .vt-list p { margin: 0; }
.pd-notes { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.pd-note { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink-2); } .pd-note > .icon { flex: none; margin-top: var(--sp-hair); color: var(--brand-strong); } .pd-note b { color: var(--ink); }
.pd-packages { display: grid; gap: var(--sp-3); }
.pkg-card { display: grid; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--radius); background: linear-gradient(140deg, var(--brand), var(--brand-strong)); color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.pkg-card.expired { background: linear-gradient(140deg, #6f7673, #4b5250); }
.pkg-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); opacity: .85; letter-spacing: .04em; } .pkg-top .icon { width: 16px; height: 16px; }
.pkg-name { font-size: var(--fs-xl); }
.pkg-bar { height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .25); overflow: hidden; } .pkg-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: #fff; }
.pkg-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); opacity: .92; }
.pv-label { margin: var(--sp-hair) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .pv-list + .pv-label { margin-top: var(--sp-4); }
.pv-list { display: grid; gap: var(--sp-3); min-width: 0; } .pv-list > *, .pv-card > * { min-width: 0; } .pv-when { flex-wrap: wrap; }
.pv-card { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pv-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); } .pv-what { font-size: var(--fs-sm); font-weight: 600; color: var(--brand-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-who { font-size: var(--fs-base); } .pv-when { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); } .pv-when .icon { width: 14px; height: 14px; } .pv-note { font-size: var(--fs-sm); color: var(--ink-2); }
.pv-card .acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); } .pv-card .acts:empty { display: none; } .pv-card > .chip { justify-self: start; }
.pd-file .avatar { background: var(--brand-soft); color: var(--brand-strong); }
@media (max-width: 1199px) {
  .pd { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .pd-head, .pd-stats, .pd-main, .pd-rail { grid-area: auto; }
  .pd-main, .pd-rail { display: contents; }
  .pd-main > *, .pd-main > .pd-contact, .pd-main > .pd-general { grid-column: auto; }   /* the desktop two-column rule must not create a second column here */
  .pd-head { order: 1; } .pd-stats { order: 2; } .pd-visits { order: 3; } .pd-packages { order: 4; } .pd-contact { order: 5; } .pd-general { order: 6; } .pd-episodes { order: 7; }
  .pd-medical { order: 8; } .pd-files { order: 9; } .pd-invoices { order: 10; } .pd-payments { order: 11; } .pd-old { order: 11; } .pd-history { order: 12; }
  .pd-followups { order: 3; }   /* without an order it came before the patient's name on narrow screens */
}
@media (max-width: 760px) {
  .pd-head-body { padding: var(--sp-5) var(--sp-4); } .pd-head .pt-actions { width: 100%; } .pd-head .pt-actions .btn { flex: 1 1 auto; }
  .pd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); } .pd-stats .dk-card { padding: var(--sp-3) var(--sp-3); } .pd-stats .dk-num { font-size: var(--fs-lg); } .pd-stats .dk-hint { display: none; }
  .vt-lists { grid-template-columns: minmax(0, 1fr); } .vt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vt { padding: var(--sp-3); } .vt-ic { width: 34px; height: 34px; } .vt b { font-size: var(--fs-base); }
  .pd-kv { grid-template-columns: 105px minmax(0, 1fr); }
}

/* ---------- D108 schedule (structure from the Figma Appointments and Doctors' Schedule) ---------- */
.sch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sch-nav a { min-width: 34px; text-align: center; } .sch-date input { width: auto; padding: var(--sp-2) var(--sp-3); }
.sch-acts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); } .sch-plus { display: none; }
.sch-day-tools { flex-wrap: wrap; gap: var(--sp-3) var(--sp-3); } .sch-tabs { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; min-width: 0; flex: 0 1 auto; } .sch-tabs a { white-space: nowrap; flex: none; }
.sch-plus .menu-list { left: 0; right: auto; } .sch-tabs a span { margin-left: var(--sp-1); font-weight: 500; color: var(--ink-3); }
.sch-find { margin-left: auto; flex: 0 1 280px; min-width: 180px; } .sch-find input { padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-10); }
.sch-table td { vertical-align: middle; } .sch-table .dv-who .chip { margin-top: var(--sp-1); margin-right: var(--sp-1); } .sch-bed { white-space: nowrap; }
.week-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-3); }
.week-cal .week-day { min-width: 0; } .week-cal .card-head { padding: var(--sp-3) var(--sp-3); } .week-cal .card-head h2 { font-size: var(--fs-md); margin: 0; } .week-cal .card-head a { color: inherit; text-decoration: none; }
.week-cal .wd-name { color: var(--ink-3); font-weight: 600; } .week-cal .card-body { display: grid; gap: var(--sp-2); padding: var(--sp-3); min-height: 120px; align-content: start; }
.week-day.today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } .week-day.today .wd-num { color: var(--brand-strong); }
.week-day.closed .card-body { background: repeating-linear-gradient(135deg, var(--sunken) 0 6px, transparent 6px 12px); }
.wd-closed { font-size: var(--fs-xs); color: var(--ink-2); display: flex; gap: var(--sp-2); align-items: flex-start; } .wd-closed .icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.wd-empty { font-size: var(--fs-xs); color: var(--ink-3); }
.wd-block { display: grid; gap: 1px; padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); background: var(--brand-soft); border-left: 3px solid var(--brand); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); min-width: 0; }
.wd-block b, .wd-block small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wd-block small { color: var(--ink-3); } .wd-time { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.wd-block.ok { background: var(--ok-soft); border-left-color: var(--ok); } .wd-block.info { background: var(--info-soft); border-left-color: var(--info); } .wd-block.bad { background: var(--bad-soft); border-left-color: var(--bad); } .wd-block.warn { background: var(--warn-soft); border-left-color: var(--warn); }
@media (max-width: 1199px) { .week-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .sch-table th:nth-child(4), .sch-table .sch-bed { display: none; } }
@media (max-width: 760px) {
  .sch-bar { padding: var(--sp-3); } .sch-acts { margin-left: 0; width: 100%; } .sch-acts .btn.primary { flex: 1; } .sch-more { display: none; } .sch-plus { display: block; }
  .sch-ther, .sch-ther .pl-select { width: 100%; } .sch-ther select { flex: 1; max-width: none; } .sch-date { flex: 1; } .sch-date input { width: 100%; }
  .sch-find { margin-left: 0; flex: 1 1 100%; }
  .week-cal { grid-template-columns: minmax(0, 1fr); } .week-cal .card-body { min-height: 0; }
  .sch-table .sch-bed { display: none; }
}

/* ---------- D109 billing (structure from the Figma Payments screen) ---------- */
.bk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.bk-card { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; text-decoration: none; min-width: 0; }
.bk-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--brand-strong); color: var(--brand-ink); } .bk-ic .icon { width: 20px; height: 20px; }
.bk-card > div { display: grid; gap: var(--sp-hair); min-width: 0; } .bk-card small { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 600; }
.bk-card b { font-size: var(--fs-title); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-hint { font-size: var(--fs-xs); color: var(--ink-3); }
.bk-wait { border-color: var(--warn); } .bk-wait .bk-ic { background: var(--warn); }
.bk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-3); }
.bk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); flex: 1 1 auto; min-width: 0; }
.bk-search { flex: 1 1 220px; max-width: 320px; min-width: 180px; }
.bk-dates { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); } .bk-dates input { width: auto; padding: var(--sp-2) var(--sp-2); }
.bk-acts { display: flex; gap: var(--sp-2); margin-left: auto; }
@media (min-width: 761px) { .bk-view { order: 1; } .bk-acts { order: 2; } .bk-filters { order: 3; flex: 1 1 100%; } } .bk-filter-btn { display: none; position: relative; }
.bk-svc { max-width: 190px; } .bk-svc b { font-weight: 600; display: inline-block; max-width: 100%; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bk-svc .small { margin-top: var(--sp-hair); }
.bk-table td.num { white-space: nowrap; } .bk-table th, .bk-table td { padding-left: var(--sp-3); padding-right: var(--sp-3); } .bk-table th:first-child, .bk-table td:first-child { padding-left: var(--sp-5); } .bk-table th:last-child, .bk-table td:last-child { padding-right: var(--sp-4); }
.bk-method { display: inline-flex; align-items: center; gap: var(--sp-2); } .bk-method .icon { width: 15px; height: 15px; color: var(--ink-3); }
.bk-acts-cell .btn + .btn { margin-left: var(--sp-1); }
@media (max-width: 760px) {
  .bk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } .bk-card { padding: var(--sp-3); gap: var(--sp-3); } .bk-ic { width: 34px; height: 34px; border-radius: var(--r-md); } .bk-card b { font-size: var(--fs-xl); } .bk-hint { display: none; }
  .bk-view { order: 1; } .bk-filter-btn { order: 2; display: inline-grid; margin-left: auto; } .bk-acts { order: 3; margin-left: 0; } .bk-acts .btn span { display: none; }
  .bk-filters { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; } .bk-tools.open .bk-filters { display: flex; }
  .bk-search { max-width: none; flex: 0 0 auto; } .bk-dates { flex-wrap: wrap; } .bk-dates input { flex: 1; }
  .bk-table thead { display: none; } .bk-table, .bk-table tbody, .bk-table tr, .bk-table td { display: block; width: 100%; }
  .bk-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
  .bk-table td { padding: 0 !important; border: 0 !important; text-align: left !important; } .bk-table td.right { text-align: right !important; }
  .bk-table td:last-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-start; }
}

/* ---------- D110 Team (structure from the Figma "Doctors" and "Doctor Details") ---------- */
.tm-cards .meter { height: 6px; margin: var(--sp-1) 0 var(--sp-hair); } .tm-of { font-size: var(--fs-md); font-weight: 600; color: var(--ink-3); }
.tm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-3); }
.tm-search { flex: 1 1 220px; max-width: 320px; min-width: 180px; }
.tm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.tm-add { margin-left: auto; } .tm-filter-btn { display: none; position: relative; }
.tm-table td { vertical-align: middle; } .tm-table th { position: relative; }   /* keeps the sr-only Actions label inside the scrolling card (it widened the page by 117 px at 800 px) */
.tm-today .sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--sp-1); white-space: nowrap; } .tm-give { margin-top: var(--sp-2); margin-left: var(--sp-14); } .tm-table th, .tm-table td { padding-left: var(--sp-3); padding-right: var(--sp-3); } .tm-table th:first-child, .tm-table td:first-child { padding-left: var(--sp-5); } .tm-table th:last-child, .tm-table td:last-child { padding-right: var(--sp-4); }
.tm-table tbody tr[data-href] { cursor: pointer; } .tm-table tbody tr[data-href]:hover td { background: var(--surface-2); }
.tm-who .person { text-decoration: none; } .tm-who .grow { min-width: 0; } .tm-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-role b { font-weight: 600; } .tm-role .sub { font-size: var(--fs-sm); color: var(--ink-3); } .tm-role .chip { margin-top: var(--sp-1); }
.tm-branches { max-width: 200px; } .tm-today .chip { white-space: nowrap; }
.tm-acts { white-space: nowrap; } .tm-acts > * { vertical-align: middle; } .tm-acts .menu { display: inline-block; } .tm-acts .btn + .menu, .tm-acts .icon-btn + .menu, .tm-acts .icon-btn + .btn { margin-left: var(--sp-1); }
.tm-off td { color: var(--ink-3); } .tm-off .avatar { opacity: .6; }
.tm-nosign { font-size: var(--fs-xs); padding: 1px var(--sp-2); } .tm-nosign .icon { width: 12px; height: 12px; }
@media (max-width: 1199px) { .tm-branches { display: none; } }
@media (max-width: 960px) { .tm-visits { display: none; } .tm-table th { white-space: normal; } .tm-table th .sort-head { white-space: normal; } .tm-table th, .tm-table td { padding-left: var(--sp-2); padding-right: var(--sp-2); } .tm-table th:first-child, .tm-table td:first-child { padding-left: var(--sp-4); } }
@media (max-width: 760px) {
  .tm-search { order: 1; flex: 1 1 0; min-width: 0; max-width: none; } .tm-filter-btn { order: 2; display: inline-grid; } .tm-add { order: 3; margin-left: 0; } .tm-add span { display: none; }
  .tm-filters { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; } .tm-tools.open .tm-filters { display: flex; } .tm-filters .pl-select select { max-width: none; flex: 1; }
  .tm-table thead { display: none; } .tm-table, .tm-table tbody, .tm-table tr, .tm-table td { display: block; width: 100%; }
  .tm-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
  .tm-table td { padding: 0 !important; border: 0 !important; text-align: left !important; }
  .tm-table .tm-who { grid-column: 1; } .tm-table .tm-acts { grid-column: 2; grid-row: 1; } .tm-table .tm-role { grid-column: 1 / -1; }
  .tm-table td.num { display: none; } .tm-table .tm-today { grid-column: 1 / -1; } .tm-table .tm-today.empty-cell { display: none; } .tm-give { margin-left: 0; }
}
.tp { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.tp-side, .tp-main { display: grid; gap: var(--sp-5); min-width: 0; } .tp-side > *, .tp-main > * { min-width: 0; }
.tp-id { display: grid; justify-items: center; gap: var(--sp-1); text-align: center; padding-top: var(--sp-6); } .tp-id h2 { margin: var(--sp-2) 0 0; font-size: var(--fs-2xl); } .tp-chips { justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.tp-facts, .tp-contact { border-top: 1px solid var(--line); } .tp-facts .kv { grid-template-columns: 112px minmax(0, 1fr); font-size: var(--fs-md); } .tp-facts dd { overflow-wrap: anywhere; }
.tp-contact { display: grid; gap: var(--sp-3); } .tp-line { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; overflow-wrap: anywhere; } .tp-line .icon { flex: none; width: 30px; height: 30px; padding: var(--sp-2); border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand-strong); }
.tp-week { grid-template-columns: 50px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
.tp-numbers { margin-bottom: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); } .tp-numbers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp .card-head > .btn, .tp .card-head > .small { margin-left: auto; } .tp .card-head { gap: var(--sp-3); }
.tp-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; } .tp-work > * { min-width: 0; }
.tp-count { margin: var(--sp-3) 0 var(--sp-2); }
.tp-visits { display: grid; gap: var(--sp-2); }
.tp-visit { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: var(--r-md); background: var(--brand-soft); border-left: 3px solid var(--brand); min-width: 0; }
.tp-visit .grow { min-width: 0; } .tp-visit a { color: inherit; text-decoration: none; } .tp-visit b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-visit.ok { background: var(--ok-soft); border-left-color: var(--ok); } .tp-visit.info { background: var(--info-soft); border-left-color: var(--info); } .tp-visit.bad { background: var(--bad-soft); border-left-color: var(--bad); } .tp-visit.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.tp-visit.off { opacity: .6; } .tp-visit > .chip { flex: none; }
.tp-time { flex: none; display: grid; font-weight: 700; font-size: var(--fs-md); } .tp-time small { font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }
.tp-actions { flex-wrap: wrap; gap: var(--sp-2); } .tp-actions form { display: inline; }
@media (max-width: 1599px) { .tp-work { grid-template-columns: minmax(0, 1fr); } .tp-schedule { order: -1; } }
@media (max-width: 1399px) { .tp-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .tp { grid-template-columns: minmax(0, 1fr); }
  .tp-side, .tp-main { display: contents; }
  .tp-profile { order: 1; } .tp-numbers { order: 2; } .tp-work { order: 3; } .tp-hours { order: 4; } .tp-main > .card { order: 3; }
}
@media (max-width: 760px) {
  .tp-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-actions .btn { width: 100%; justify-content: center; } .tp-actions > :first-child { grid-column: 1 / -1; } .tp-actions form { display: block; }
  .tp-visit { flex-wrap: wrap; } .tp-visit > .chip { margin-left: var(--sp-10); }
}

/* ---------- D112 Inventory (structure from the Figma "Inventory") ---------- */
.iv-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } .iv-cards .bk-card:hover { border-color: var(--brand); } .iv-bad { border-color: var(--bad); } .iv-bad .bk-ic { background: var(--bad); }
.iv-tabs { display: inline-flex; margin-bottom: var(--sp-4); } .iv-tabs a span { margin-left: var(--sp-1); font-weight: 500; color: var(--ink-3); } .iv-tabs a.on span { color: inherit; }
.iv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-3); }
.iv-search { flex: 1 1 220px; max-width: 320px; min-width: 180px; } .iv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.iv-add { margin-left: auto; } .iv-filter-btn { display: none; position: relative; }
.iv-table td { vertical-align: middle; } .iv-table th { position: relative; }   /* keeps the sr-only Actions label inside the scrolling card (see D110) */
.iv-table th, .iv-table td { padding-left: var(--sp-3); padding-right: var(--sp-3); } .iv-table th:first-child, .iv-table td:first-child { padding-left: var(--sp-5); } .iv-table th:last-child, .iv-table td:last-child { padding-right: var(--sp-4); }
.iv-table tbody tr[data-href] { cursor: pointer; } .iv-table tbody tr[data-href]:hover td { background: var(--surface-2); }
.iv-name a { color: inherit; text-decoration: none; } .iv-name .sub { font-size: var(--fs-sm); color: var(--ink-3); } .iv-cat-sm { display: none; }
.iv-state .chip { white-space: nowrap; } .iv-bal { white-space: nowrap; } .iv-last, .iv-date { white-space: nowrap; }
.iv-acts { white-space: nowrap; } .iv-acts > * { vertical-align: middle; } .iv-acts .btn + .btn { margin-left: var(--sp-2); } .iv-acts .menu { display: inline-block; margin-left: var(--sp-1); }
.iv-off td { color: var(--ink-3); } .iv-off .iv-name b { color: var(--ink-3); }
@media (max-width: 1199px) { .iv-last, .iv-reorder, .iv-asset { display: none; } .iv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .iv-cat, .iv-date { display: none; } .iv-cat-sm { display: block; } .iv-cat-sm:empty { display: none; } }
.iv-head { margin-bottom: var(--sp-5); } .iv-head-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }
.iv-head-ic { width: 52px; height: 52px; border-radius: var(--r-lg); } .iv-head-who { flex: 1; min-width: 220px; } .iv-head-who h1 { font-size: var(--fs-title); margin: 0; }
.iv-head-meta { gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); flex-wrap: wrap; color: var(--ink-3); font-size: var(--fs-md); }
.iv-head-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .iv-head-acts .btn { height: 38px; }
.iv-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } .iv-unit { font-size: var(--fs-md); font-weight: 600; color: var(--ink-3); }
.iv-hist-head { flex-wrap: wrap; gap: var(--sp-3); } .iv-hist-head .seg { margin-left: auto; } .iv-note { max-width: 360px; } .iv-by { white-space: nowrap; }
@media (max-width: 1199px) { .iv-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .iv-search { order: 1; flex: 1 1 0; min-width: 0; max-width: none; } .iv-filter-btn { order: 2; display: inline-grid; } .iv-add { order: 3; margin-left: 0; } .iv-add span { display: none; }
  .iv-filters { order: 4; display: none; width: 100%; flex-direction: column; align-items: stretch; } .iv-tools.open .iv-filters { display: flex; } .iv-filters .pl-select select { max-width: none; flex: 1; }
  .iv-tabs { display: flex; } .iv-tabs a { flex: 1; text-align: center; }
  .iv-table thead { display: none; } .iv-table, .iv-table tbody, .iv-table tr, .iv-table td { display: block; width: 100%; }
  .iv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
  .iv-table td { padding: 0 !important; border: 0 !important; text-align: left !important; }
  .iv-table .iv-name { grid-column: 1; } .iv-table .iv-bal { grid-column: 2; grid-row: 1; text-align: right !important; } .iv-table .iv-state { grid-column: 1; } .iv-table .iv-acts { grid-column: 2; grid-row: 2; }
  .iv-table .iv-cost { grid-column: 1 / -1; }
  .iv-table td.iv-cat, .iv-table td.iv-reorder, .iv-table td.iv-last, .iv-table td.iv-asset, .iv-table td.iv-date, .iv-table .iv-unit-sm { display: none; }
  .iv-head-body { padding: var(--sp-4); } .iv-head-acts { width: 100%; } .iv-head-acts .btn { flex: 1 1 auto; justify-content: center; }
  .iv-hist-head .seg { margin-left: 0; width: 100%; overflow-x: auto; } .iv-hist .iv-by { display: none; }
  .iv-hist thead { display: none; } .iv-hist, .iv-hist tbody, .iv-hist tr, .iv-hist td { display: block; width: 100%; }
  .iv-hist tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
  .iv-hist td { padding: 0 !important; border: 0 !important; text-align: left !important; } .iv-hist td.num { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .iv-hist .iv-note { grid-column: 1 / -1; max-width: none; }
}

/* ---------- D114 Messages (structure from the Figma "Messages"; one-way SMS) ---------- */
.ms-test { margin-bottom: var(--sp-4); }
.ms { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.ms > * { min-width: 0; }
.ms-list { display: flex; flex-direction: column; }
.ms-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .ms-search { flex: 1 1 0; min-width: 0; }
.ms-filters { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-2); } .ms-tools.open .ms-filters { display: flex; } .ms-filters .pl-select select { max-width: none; flex: 1; }
.ms-filter-btn { position: relative; }
.ms-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); overflow-x: auto; }
.ms-tabs a { flex: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.ms-tabs a span { margin-left: var(--sp-1); font-weight: 500; color: var(--ink-3); } .ms-tabs a span.bad { color: var(--bad); font-weight: 700; }
.ms-tabs a.on { background: var(--brand-soft); color: var(--brand-strong); }
.ms-rows { display: grid; max-height: calc(100vh - 300px); min-height: 240px; overflow-y: auto; }
.ms-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; }
.ms-row:hover { background: var(--surface-2); } .ms-row.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand-strong); }
.ms-row .avatar { flex: none; } .ms-row-main { flex: 1; min-width: 0; display: grid; gap: var(--sp-1); }
.ms-row-top, .ms-row-bottom { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ms-row-top b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ms-row-top time { flex: none; font-size: var(--fs-xs); color: var(--ink-3); }
.ms-preview { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-badge { flex: none; min-width: 20px; height: 20px; padding: 0 var(--sp-2); display: inline-grid; place-items: center; border-radius: var(--r-pill); background: var(--bad); color: var(--on-bad); font-size: var(--fs-xs); font-weight: 700; }
.ms-queued { flex: none; display: inline-flex; color: var(--warn); } .ms-queued .icon { width: 15px; height: 15px; }
.ms-pages { justify-content: center; padding: var(--sp-3); flex-wrap: wrap; }
.ms-thread { display: flex; flex-direction: column; min-height: 520px; }
.ms-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .ms-who { flex: 1; min-width: 0; } .ms-who a { color: inherit; text-decoration: none; } .ms-who b { font-size: var(--fs-lg); }
.ms-back { display: none; } .ms-back .icon { transform: rotate(180deg); }
.ms-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--surface-2); max-height: calc(100vh - 360px); min-height: 240px; overflow-y: auto; }
.ms-day { text-align: center; margin: var(--sp-2) 0 var(--sp-hair); } .ms-day span { font-size: var(--fs-xs); color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); }
.ms-bubble { align-self: flex-end; max-width: min(560px, 85%); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); background: var(--brand-soft); border: 1px solid transparent; min-width: 0; }
.ms-bubble p { margin: var(--sp-hair) 0 var(--sp-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-kind { font-size: var(--fs-xs); font-weight: 700; color: var(--brand-strong); letter-spacing: .02em; }
.ms-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.ms-bubble.bad { background: var(--bad-soft); border-color: var(--bad); } .ms-bubble.off { background: var(--surface); border-color: var(--line); } .ms-bubble.off p { color: var(--ink-3); }
.ms-why { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--bad); overflow-wrap: anywhere; }
.ms-compose { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-4); border-top: 1px solid var(--line); }
.ms-compose-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); } .ms-kind-pick { flex: 1 1 240px; min-width: 0; } .ms-kind-pick select, .ms-pkg select { max-width: none; flex: 1; min-width: 0; } .ms-pkg { flex: 1 1 220px; min-width: 0; }
.ms-send .icon { width: 15px; height: 15px; }
.ms-preview-box { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--sunken); } .ms-preview-box small { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); } .ms-preview-box p { margin: var(--sp-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-compose-foot { display: flex; align-items: center; gap: var(--sp-3); } .ms-compose-foot a { margin-left: auto; }
.ms-no { display: flex; align-items: center; gap: var(--sp-2); margin: 0; } .ms-no .icon { width: 15px; height: 15px; }
@media (max-width: 1199px) { .ms { grid-template-columns: 320px minmax(0, 1fr); } }
@media (max-width: 960px) {
  /* phone and small tablet: the list first; an explicitly chosen patient's texts fill the screen with a back arrow (D114 point 7) */
  .ms { grid-template-columns: minmax(0, 1fr); }
  .ms:not(.ms-explicit) .ms-thread { display: none; } .ms.ms-explicit .ms-list { display: none; }
  .ms-back { display: inline-grid; } .ms-open { display: none; }
  .ms-rows, .ms-body { max-height: none; }
  .ms-body { padding: var(--sp-4); } .ms-compose { padding: var(--sp-3) var(--sp-4) var(--sp-4); } .ms-bubble { max-width: 92%; }
  .ms-compose-row { flex-direction: column; align-items: stretch; } .ms-kind-pick, .ms-pkg { display: flex; flex: 0 0 auto; width: 100%; } .ms-kind-pick select, .ms-pkg select { width: 100%; } .ms-send { justify-content: center; }
}

/* ---------- D116 phone table cards (table.cards-sm, labels set by static/app.js) ---------- */
@media (max-width: 760px) {
  table.cards-sm thead { display: none; }
  table.cards-sm, table.cards-sm tbody, table.cards-sm tr, table.cards-sm td { display: block; width: 100%; }
  table.cards-sm tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
  table.cards-sm td { padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  table.cards-sm td.cs-head { font-weight: 600; font-size: var(--fs-base); }
  table.cards-sm td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; }
  table.cards-sm td.cs-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); } table.cards-sm td.cs-acts:empty { display: none; }
  table.cards-sm td:empty:not(.cs-acts) { display: none; }
  table.cards-sm tr.cs-total { display: flex; justify-content: space-between; gap: var(--sp-3); background: var(--surface-2); }
  table.cards-sm tr.cs-total td { width: auto; } table.cards-sm tr.cs-total td:empty { display: none; }
  table.cards-sm .hide-sm { display: none !important; }
}
@media (max-width: 760px) {
  /* D120: record measurement rows on a phone - the name across, Initial and Current side by side, Change and Remarks across */
  table.rec-table.cards-sm tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  table.rec-table.cards-sm td.cs-head, table.rec-table.cards-sm td.rec-change, table.rec-table.cards-sm td:last-child { grid-column: 1 / -1; }
  table.rec-table.cards-sm td[data-label]::before { display: block; }
  table.rec-table.cards-sm input, table.rec-table.cards-sm select { width: 100%; min-width: 0; }
}
.pr-verdict { margin-top: var(--sp-1); } .pr-verdict .chip { white-space: normal; font-size: var(--fs-xs); }   /* D120 A2 */
@media print { .pr-verdict .chip { border: 1px solid #999; background: none; color: #000; } }
/* D121: goals and the episode timeline */
.goal .meter { height: 6px; margin-top: var(--sp-2); max-width: 320px; } .goal.closed { opacity: .72; } .goal .chip { white-space: nowrap; }
.goal-suggest { border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-4) var(--sp-1); background: var(--brand-soft, transparent); } .goal-suggest .list .item { padding-left: 0; padding-right: 0; }
.timeline { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; } .timeline li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); } .timeline li:first-child { border-top: 0; }
@media (max-width: 640px) { .goal { flex-wrap: wrap; } .goal .grow { flex-basis: 100%; } }

/* D122 alerts and visit treatment */
.alert-strip { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); } .alert-line { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-md); background: var(--warn-soft); color: var(--warn); } .alert-line .grow { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.alert-line.red_flag { background: var(--bad-soft); color: var(--bad); }
.vt-rows { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); } .vt-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-2); }
@media (max-width: 640px) { .vt-row { grid-template-columns: 1fr; } }

/* D123 progress at a glance */
.glance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); } .glance-item { display: grid; gap: var(--sp-hair); padding: var(--sp-3) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); } .glance-item b { font-size: var(--fs-lg); overflow-wrap: anywhere; }

/* D124 problems and interventions */
.chain-goal { margin-top: var(--sp-1); padding-left: var(--sp-3); border-left: 2px solid var(--line); } .chain-int { color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--sp-hair); }

/* D126 previous reading and measures page */
.rec-prev { white-space: nowrap; } .measure-table td.num, .measure-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* D127 functional tests: values worked out from the readings */
.derived-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* D128 function scales */
.scale-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 220px); gap: var(--sp-2); align-items: center; margin: var(--sp-2) 0; } .scale-score { text-align: right; min-width: 74px; } .scale-score b { font-size: var(--fs-xl); }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); }
@media (max-width: 640px) { .scale-item { grid-template-columns: 1fr; } }

/* D132 case tabs */
.case-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; margin: 0 0 var(--sp-4); padding-bottom: var(--sp-hair); border-bottom: 1px solid var(--line); scrollbar-width: thin; } .case-tabs button { flex: none; appearance: none; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-md); padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.case-tabs button:hover { color: var(--ink); } .case-tabs button.on { color: var(--brand, var(--ink)); border-bottom-color: var(--brand, var(--ink)); font-weight: 600; }

/* D136: the form builder - the form on the left, the parameter library beside it */
.builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; }
.builder-library { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.builder-library .chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.builder-library .chip { cursor: pointer; border: 1px solid var(--line); background: transparent; }
.builder-library .chip.on { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--brand-soft); }
.lib-list { display: grid; gap: var(--sp-1); max-height: 52vh; overflow: auto; }
.lib-item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); text-align: left; padding: var(--sp-2) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.lib-item:hover { border-color: var(--brand); } .lib-item small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.param-rows { display: grid; gap: var(--sp-2); }
.param-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: var(--sp-2); align-items: center; }
.pr-other th { background: var(--sunken); text-align: left; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.param-row code { font-size: var(--fs-xs); color: var(--ink-3); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param-actions { display: inline-flex; gap: var(--sp-hair); }
@media (max-width: 960px) { .builder-layout { grid-template-columns: minmax(0, 1fr); } .builder-library { position: static; max-height: none; } .param-row { grid-template-columns: minmax(0, 1fr) auto; } .param-row code { display: none; } .param-row select { grid-column: 1 / -1; } }

/* ---- D139 control sizes (QA-17, QA-21, NFR-UXQ-06): nothing a person presses is under 24px on a computer or 44px on a touch screen ---- */
.card-head { min-height: calc(var(--sp-4) + var(--sp-8) + var(--sp-hair)); }   /* a card head with a button and one without put their titles on the same line */
.nav-label { min-height: var(--hit); padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.sort-head { min-height: var(--hit); }
.table td > a:not(.btn), .table td > b > a { display: inline-block; padding: var(--sp-1) 0; }
button.chip, a.chip { min-height: var(--hit); }
.btn.sm { min-height: var(--ctl-sm); }
@media (pointer: coarse), (max-width: 760px) {
  .nav-label { min-height: var(--hit-touch); }
  .btn, .btn.sm, .sort-head, button.chip, a.chip { min-height: var(--hit-touch); }
  .icon-btn, .icon-btn.sm, .icon-btn.menu-btn { width: var(--hit-touch); height: var(--hit-touch); }
  .table td > a:not(.btn), .table td > b > a { padding: var(--sp-3) 0; }
}
@media (max-width: 760px) { .dk-top { font-size: var(--fs-xs); } }   /* two cards across a phone: the longest label, New patients today, must fit */
.table th.right, .table td.right { text-align: right; }   /* QA-10: a header over a column of figures follows the figures (static/app.js marks it) */
.icon.up { transform: rotate(-90deg); } .icon.down { transform: rotate(90deg); }   /* the builder's move buttons use the one chevron */

/* ---- D139 second QA pass ---- */
/* QA-07: a printed sheet is white paper in every theme, so what is written on it uses the light palette (muted text was 2.7:1 in the dark theme) */
.paper, .sheet, .rx-page, .rx-sheet, .rxe-sheet, .chart-svg {
  color-scheme: light;
  --ink: #0f1514; --ink-2: #4b5250; --ink-3: #646b68; --line: rgba(15, 21, 20, .10); --line-strong: rgba(15, 21, 20, .18);
  --surface: #ffffff; --surface-2: #fafaf8; --sunken: #f0efec;
  --brand: #0d7a70; --brand-strong: #0a5f57; --brand-soft: #e3f3f0; --brand-ink: #ffffff;
  --ok: #0a7a0a; --ok-soft: #e4f4e4; --warn: #8a5a00; --warn-soft: #fdf1d6; --bad: #b42323; --bad-soft: #fbe7e7; --info: #1c5cab; --info-soft: #e5eefb;
}
.hep-nopic { color: var(--ink-3); }
/* QA-17: a link or control that stands on its own is at least 24px high on a computer */
.row.small > a, .dk-hint a, li > div > a, .grow > b > a, article > p > a, .ms-who > a, .ms-compose-foot > a, .hint a, small > a, .notice a, details.filters-more > summary, button.linkish { display: inline-flex; align-items: center; min-height: var(--hit); }
.rec-table input, .rec-table select, .rxe-vitals input { min-height: var(--hit); }
.table td > a:not(.btn) { min-width: var(--hit); }
@media (pointer: coarse), (max-width: 760px) {
  .seg a, .seg button { min-height: var(--hit-touch); display: inline-flex; align-items: center; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]), select { min-height: var(--hit-touch); }
  .tb-brand { width: var(--hit-touch); height: var(--hit-touch); }
  .row.small > a, .dk-hint a, li > div > a, .grow > b > a, article > p > a, .hint a, small > a { min-height: var(--hit-touch); }
}

/* ---- D141 the one search (N-11): suggestions under the search box, and the results page ---- */
.search-pop { position: absolute; z-index: 60; top: calc(100% + var(--sp-1)); left: 0; width: max(100%, 320px); max-width: 90vw; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: var(--sp-1); }
.search-head { padding: var(--sp-2) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.search-opt { display: grid; gap: 0; align-content: center; min-height: var(--hit); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.search-opt small { color: var(--ink-3); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.search-opt:hover, .search-opt.on { background: var(--sunken); }
.search-none { padding: var(--sp-3); color: var(--ink-3); font-size: var(--fs-sm); }
.search-big { display: flex; gap: var(--sp-2); align-items: center; max-width: none; margin-top: var(--sp-2); }
.search-big input { flex: 1; }
/* QA-17 on a touch screen: menu rows, case tabs and the small star next to a textarea */
@media (pointer: coarse), (max-width: 760px) {
  .menu-list button, .menu-list a, .case-tabs > button { min-height: var(--hit-touch); }
  .rxe-star { position: relative; }
  .rxe-star::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-2)); }
}

/* ---- D144 the date field (N-07, QA-12): dd/mm/yyyy shown and typed; the browser's own box carries the value out of sight ---- */
.date-field { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
.date-field .date-text { flex: 1 1 auto; width: 100%; min-width: 0; padding-right: var(--sp-10); }
.date-field .date-pick { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); }
.date-native { position: absolute !important; right: 0; bottom: 0; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.date-text.bad { border-color: var(--bad); }
.portal-digits { min-width: var(--hit-touch); }
/* D158: the old system's invoices on the patient page */
.old-mismatch { color: var(--warn); }