/* design-token overrides layered on top of vendored bootstrap.min.css.
   loaded last in base.html so these rules win. */

/* phase 43: the staff palette, after the Fireart "Pet Clinic Dashboard"
   reference. re-bound HERE rather than in tokens.css, so the defaults - and
   with them the public site, which loads no app.css - do not move. */
:root {
  --ds-primary: #2563eb;
  --ds-primary-hover: #1d4ed8;
  --ds-primary-active: #1e40af;
  --ds-accent: #0f766e;           /* text-weight teal; #0f9d8a stays a chart fill only */
  --ds-accent-soft: #dcf3ef;
  --ds-ground: #f4f6fa;
  --ds-surface-sunken: #f1f4f8;
  --ds-border: #e6eaf0;
  --ds-border-strong: #d3dae4;
  --ds-text: #0f172a;
  --ds-text-muted: #5b6b80;       /* 5.0:1 on the ground, 4.9 on sunken - #64748b was 4.4 on the ground */
  --ds-success: #0f7a55;
  --ds-success-surface: #e3f6ee;
  --ds-warning: #9a5b00;
  --ds-warning-surface: #fdf1dd;
  --ds-radius-lg: 16px;
  --ds-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.05);

  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-danger: #c53030;
  --bs-danger-rgb: 197, 48, 48;
  --bs-body-color: #0f172a;
  --bs-body-bg: #f4f6fa;
  --bs-border-color: #e6eaf0;
  --bs-secondary-color: #5b6b80;
  /* bootstrap's .text-secondary reads the rgb triple, not the colour above.
     its stock #6c757d measured 4.25:1 on the sunken ground - below AA, on
     every signed-in page, found by running a11y_audit's contrast check
     against authenticated pages in phase 44 (the audit only ever covered
     the login screens). */
  --bs-secondary-rgb: 91, 107, 128;

  /* shell tokens - declared once here, never inlined per template.
     every card surface in the app reads these, so a change lands everywhere. */
  --app-ground: var(--ds-ground);
  --app-surface: #fff;
  --app-border: var(--ds-border);
  --app-card-radius: 16px;
  --app-card-shadow: var(--ds-shadow-sm);
  --app-content-max: 1360px;
  --app-content-pad-y: 2rem;
  --app-content-pad-x: 2rem;
  --app-topbar-h: 4rem;

  /* darker steps of --bs-primary, for button hover/active states */
  --app-accent-hover: #1d4ed8;
  --app-accent-active: #1e40af;
}

/* the .btn-primary / .btn-outline-primary bindings that lived here moved to
   shared/static/css/components.css in phase 34 and were bound to each app's
   own --bs-primary in phase 36, so the staff app and the patient app each
   keep their identity from one definition. this app's named hover shades
   live on below. */
.btn-primary {
  --bs-btn-hover-bg: var(--app-accent-hover);
  --bs-btn-hover-border-color: var(--app-accent-hover);
  --bs-btn-active-bg: var(--app-accent-active);
  --bs-btn-active-border-color: var(--app-accent-active);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

/* the two heading levels below .page-title. both were inlined as bootstrap
   size classes on every card - fs-5 mb-3 nine times, fs-6 mt-4 mb-2 three
   times. a class string repeated that often is a token that was never
   declared, so declare it. */
.section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.subsection-title {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* page title paired with the page's one primary action. patients_list and
   patients_detail both built this inline as the same four utilities. */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header .page-title {
  margin-bottom: 0;
}

/* xl (32px / 2rem) spacing step - bootstrap's stock scale stops at
   .p-5/.gap-5 (3rem), extending the same naming convention */
.p-6 { padding: 2rem; }
.mt-6 { margin-top: 2rem; }
.gap-6 { gap: 2rem; }

/* ---- app shell (phase 43) ----------------------------------------------
   a top header, as in the reference. at xl and up the tabs sit inline in it;
   below xl the same <nav> is a bootstrap offcanvas drawer the hamburger
   opens. xl, not lg: six tabs + search + action + avatar measure ~1230px, so
   at 992-1199 they wrapped. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}

.app-topbar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--app-topbar-h);
  max-width: var(--app-content-max);
  margin: 0 auto;
  padding: 0 var(--app-content-pad-x);
}

.app-topbar-toggle {
  color: var(--ds-text-muted);
  font-size: 1.375rem;
  line-height: 1;
  padding: 0.25rem 0.375rem;
  margin-left: -0.375rem;
  text-decoration: none;
}

.app-topbar-toggle:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

.app-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
  color: var(--ds-text);
  text-decoration: none;
}

.app-brand:hover { color: var(--ds-text); }

.app-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: linear-gradient(140deg, #3b82f6, #1d4ed8);
  color: #fff;
  font-size: 1.125rem;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.app-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.app-brand-name { font-size: 0.9375rem; font-weight: 700; }
.app-brand-sub {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
}

.app-nav .offcanvas-title { font-weight: 700; }

/* LANDMINE, same as the rail had: bootstrap compiles
     @media (min-width:1200px){.offcanvas-xl{background-color:transparent!important}}
   which is what we want INSIDE the header, so nothing fights it at xl. below
   xl the drawer needs a surface of its own. */
.app-nav.offcanvas-xl { --bs-offcanvas-width: 280px; }

@media (max-width: 1199.98px) {
  .app-nav .offcanvas-body { padding: 1rem; }
  .app-nav .ds-pill-nav { flex-direction: column; align-items: stretch; }
  .app-nav .ds-pill-nav .nav-link { padding: 0.625rem 0.875rem; font-size: 0.9375rem; }
}

@media (min-width: 1200px) {
  .app-nav { flex: 1 1 auto; min-width: 0; }
  .app-nav .offcanvas-body { justify-content: center; }
  /* one row, always. the header is sized so six tabs fit at 1200px; a wrap
     here doubles its height and every sticky offset under it goes wrong */
  .app-nav .ds-pill-nav { flex-wrap: nowrap; }
  .app-nav .ds-pill-nav .nav-link { padding: 0.5rem 0.875rem; }
}

.app-nav .nav-link i { font-size: 1rem; }

@media (min-width: 1200px) {
  /* the reference's tabs carry no icons; the drawer keeps them as a scan aid */
  .app-nav .nav-link i { display: none; }
}

.app-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex: none;
}

.app-search { position: relative; width: 12rem; }
@media (min-width: 1400px) { .app-search { width: 15rem; } }

.app-search .bi-search {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--ds-text-muted);
  pointer-events: none;
}

.app-search input {
  height: 2.5rem;
  padding-left: 2.25rem;
  border-radius: 0.75rem;
  border-color: var(--app-border);
  font-size: 0.875rem;
}

.app-search-results {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  z-index: 1040;
}

.app-search-results:empty { display: none; }
/* the small-screen stand-in for the box above. 2.5rem square keeps it a real
   tap target next to the account menu rather than a bare glyph. */
.app-search-sm {
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  color: var(--ds-text-muted);
  text-decoration: none;
}
.app-search-sm:hover { background: var(--ds-surface-sunken); color: var(--ds-text); }
.app-search-sm:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

.app-search-results > * {
  margin: 0 !important;
  padding: 0.5rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  box-shadow: var(--ds-shadow-lg);
}

.app-search-results .list-group-item { border: 0; border-radius: 0.5rem; font-size: 0.875rem; }

.app-cta { height: 2.5rem; border-radius: 0.75rem; font-weight: 500; font-size: 0.875rem; white-space: nowrap; }

.app-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--ds-text);
}

.app-user:hover { background: var(--ds-surface-sunken); }
.app-user:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.app-user-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.app-user-name { font-size: 0.875rem; font-weight: 600; }
.app-user-role { font-size: 0.75rem; color: var(--ds-text-muted); text-transform: capitalize; }

.app-user-menu { min-width: 14rem; padding: 0.5rem; border-color: var(--app-border); border-radius: 0.75rem; box-shadow: var(--ds-shadow-lg); }
.app-user-menu .dropdown-item { border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.app-user-menu .dropdown-item i { width: 1.25rem; display: inline-block; color: var(--ds-text-muted); }

.content {
  min-height: calc(100vh - var(--app-topbar-h));
  background: var(--app-ground);
  padding: var(--app-content-pad-y) var(--app-content-pad-x);
}

/* opts a screen out of the content padding entirely. the login's split
   panel is full-bleed; cancelling the padding with a negative margin was
   tried and is wrong, because the padding changes at 992px and a fixed
   margin cannot follow it. */
.content-flush { padding: 0; }
/* and out of the readable-width cap: .content-inner centres content at
   1360px, which left the full-bleed panel inset by 40px at 1440. */
.content-flush .content-inner { max-width: none; }

/* 2rem of side padding leaves ~326px usable at 390px */
@media (max-width: 991.98px) {
  .content { padding: 1.5rem 1rem; }
  .app-topbar-inner { padding: 0 1rem; gap: 0.75rem; }
}

/* keeps the dashboard readable on a wide clinic monitor instead of
   stretching a KPI row across the full width */
.content-inner {
  max-width: var(--app-content-max);
  margin: 0 auto;
}

/* card treatment - the token layer does this once so no template
   has to repeat rounded-4 shadow-sm on every panel */
.card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-card-radius);
  box-shadow: var(--app-card-shadow);
}

.card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.card > .card-body {
  padding: 1.25rem;
}

.alert {
  border-radius: 0.75rem;
  border: 1px solid var(--app-border);
}

/* the two chromeless auth pages (login, change_password) centre a narrow card
   in the viewport. named here rather than inlined per template so the pair
   cannot drift apart. */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-card {
  width: 100%;
  max-width: 360px;
}

/* the patients search box - narrow on desktop, full width once the content
   column itself is narrow */
.search-field {
  max-width: 400px;
}

/* bootstrap 5.3 ships no .min-w-0. a flex child defaults to min-width:auto,
   which refuses to shrink below its content - so one long unbroken filename
   widens the whole page. needed wherever user-supplied text sits in a flex row. */
.min-w-0 {
  min-width: 0;
}

/* ---- dashboard (phase 43) ----------------------------------------------- */

/* five across on a wide screen, as in the reference; fewer for a role that
   holds fewer figures, and the row never leaves a hole where one is withheld */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.dash-card { display: flex; flex-direction: column; }

.dash-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1.125rem 1.25rem 0.5rem;
}

.dash-card-head .ds-card-title { font-size: 1rem; }
.dash-card-body { padding: 0.5rem 1rem 1rem; flex: 1 1 auto; }
.dash-card-foot { padding: 0.75rem 1.25rem; border-top: 1px solid var(--app-border); }

.dash-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-empty-line { margin: 0.25rem 0.25rem 0.5rem; font-size: 0.875rem; color: var(--ds-text-muted); }

.dash-person { min-width: 8.5rem; }

.dash-queue .ds-row-time { min-width: 1.5rem; font-size: 0.9375rem; color: var(--ds-text-muted); }

.dash-dist-total { margin: 0.25rem 0.25rem 0.75rem; font-size: 0.875rem; color: var(--ds-text-muted); }
.dash-dist-total .ds-numeral { font-size: 2rem; line-height: 1; color: var(--ds-text); margin-right: 0.25rem; }
#intake-chart { margin: 0 0.25rem; width: calc(100% - 0.5rem); }
.dash-card .ds-legend { margin: 1rem 0.25rem 0.25rem; gap: 0.5rem 1.25rem; }

/* intake states, painted with the colour of the badge each one carries in
   _recent_intake.html (bootstrap text-bg-*, phase 23's contract). fill for the
   svg bar, color for the legend dot. */
.intake-sorted { fill: var(--bs-primary); color: var(--bs-primary); }
.intake-needs_review { fill: #212529; color: #212529; }
.intake-not_searchable { fill: #ffc107; color: #ffc107; }
.intake-queued { fill: #6c757d; color: #6c757d; }
.intake-external { fill: #adb5bd; color: #adb5bd; }
.intake-rejected { fill: #c53030; color: #c53030; }

/* the recent-intake fragment keeps its markup - phase 23's badge contract and
   e2e_intake_walk both read it - so it is restyled from here, not rewritten */
.dash-list-card .list-group { gap: 0.25rem; }
.dash-list-card .list-group-item {
  border: 0;
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
}
.dash-list-card .list-group-item:hover { background: var(--ds-surface-sunken); }
.dash-list-card .list-group-item .badge { border-radius: 999px; font-weight: 500; padding: 0.35em 0.7em; }

@media (max-width: 575.98px) {
  .dash-person { min-width: 0; }
}

/* a canvas needs a sized parent to resize into, or chart.js grows it
   every frame against maintainAspectRatio: false */
.chart-box {
  position: relative;
  height: 260px;
}

/* stands in for .chart-box when a series has nothing to draw. same 260px, so
   the card keeps its height and the dashboard does not jump as data arrives. */
.chart-empty {
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.chart-empty i {
  font-size: 2rem;
  opacity: 0.35;
}

.chart-empty-sm { height: 180px; }

/* 44px minimum patient-table row height - touch-target-friendly action column */
.table > tbody > tr {
  height: 44px;
}

/* toast title weight (14px/600) - reuses the existing 600 weight, no third weight added */
strong {
  font-weight: 600;
}

/* upload drop zone (Phase 11) */
.upload-zone {
  min-height: 160px;
  border: 1.5px dashed var(--ds-border-strong);
  border-radius: 14px;
  background: var(--ds-surface-sunken);
  cursor: pointer;
  color: var(--ds-text-muted);
  transition: border-color var(--ds-duration-fast) var(--ds-ease), background-color var(--ds-duration-fast) var(--ds-ease);
}

.upload-zone:hover { border-color: var(--ds-primary); background: color-mix(in srgb, var(--ds-primary) 5%, var(--ds-surface)); }
.upload-zone:focus-within { box-shadow: var(--ds-focus-ring); }
.upload-zone .bi-cloud-upload {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 0.875rem;
  background: var(--app-surface); color: var(--ds-primary); box-shadow: var(--ds-shadow-sm);
  font-size: 1.5rem !important;
}
.upload-zone .upload-zone-idle-heading,
.upload-zone .upload-zone-dragover-heading { font-size: 1rem !important; font-weight: 600; color: var(--ds-text); }

.upload-zone .upload-zone-dragover-heading {
  display: none;
}

.upload-zone.is-dragover {
  border-color: var(--bs-primary);
  background: rgba(37, 99, 235, 0.06);
  color: var(--bs-primary);
}

.upload-zone.is-dragover .upload-zone-idle-heading {
  display: none;
}

.upload-zone.is-dragover .upload-zone-dragover-heading {
  display: inline;
}

.toast-container {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* --- login (UX-10) ------------------------------------------------------ */

.auth-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 992px) {
  .auth-split { grid-template-columns: 1fr 1fr; }
}

.auth-brand {
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: var(--ds-space-8);
  /* phase 43: the reference blue, deepened so white copy holds AA. the
     solid colour is the fallback AND what a11y_audit measures against - it
     reads background-color, and a gradient alone left it measuring the grey
     ground behind the panel (1.01:1, a false fail). #f1f5ff is 4.74:1 on the
     gradient's lightest stop, #2563eb. */
  background-color: #1e40af;
  background-image: radial-gradient(120% 90% at 0% 0%, #2563eb 0%, #1d4ed8 40%, #1e3a8a 100%);
  color: var(--ds-text-on-dark);
}

@media (min-width: 992px) { .auth-brand { display: flex; } }

.auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.14);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: var(--ds-space-5);
}
.auth-brand-title { font-size: var(--ds-h2); font-weight: var(--ds-weight-semibold); margin: 0 0 var(--ds-space-3); }
.auth-brand-title { font-family: var(--ds-font-display); font-style: italic; font-size: 2.25rem; }
.auth-brand-body { max-width: 26rem; font-size: var(--ds-body-lg); color: #f1f5ff; margin: 0; }
.auth-brand-points { list-style: none; margin: var(--ds-space-6) 0 0; padding: 0; display: grid; gap: 0.875rem; }
.auth-brand-points li { display: flex; align-items: center; gap: 0.75rem; color: #f1f5ff; font-size: 0.9375rem; }
.auth-brand-points i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.14);
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-6) var(--ds-space-5);
}

.auth-form-card { width: 100%; max-width: 26rem; }

/* the toggle sits inside the field, so the input keeps its full width and
   the control cannot be mistaken for a second form field */
.auth-pw { position: relative; }
.auth-pw .ds-input { padding-right: var(--ds-space-8); }

.auth-pw-toggle {
  position: absolute;
  top: 50%;
  right: var(--ds-space-2);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
}

.auth-pw-toggle:hover { color: var(--ds-text); }
.auth-pw-toggle:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

/* ---- staff pages (phase 44) ---------------------------------------------- */

.app-search-inline { width: 100%; max-width: 30rem; }

/* tables read like the reference's lists: hairline rows, a quiet uppercase
   header, the whole row lit on hover */
.card .table { --bs-table-bg: transparent; margin-bottom: 0; }
.card .table > thead > tr > th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--app-border);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  white-space: nowrap;
}
.card .table > tbody > tr > td {
  padding: 0.75rem;
  border-bottom-color: var(--app-border);
  font-size: 0.9375rem;
}
.card .table > tbody > tr:last-child > td { border-bottom: 0; }
.card .table > tbody > tr:hover > td { background: var(--ds-surface-sunken); }

.detail-list { margin: 0.25rem; display: grid; gap: 0.75rem; }
.detail-list > div { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.detail-list dt { font-weight: 500; font-size: 0.875rem; color: var(--ds-text-muted); }
.detail-list dd { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }

.invoice-amount { font-size: 1.125rem; color: var(--ds-text); }

.timeline { list-style: none; margin: 0.25rem; padding: 0 0 0 1.25rem; border-left: 2px solid var(--app-border); }
.timeline-item { position: relative; padding: 0 0 1.25rem 0.5rem; }
.timeline-item:last-child { padding-bottom: 0.25rem; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.72rem;
  top: 0.35rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--app-surface);
  border: 2px solid var(--ds-primary);
}
.timeline-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.375rem; }
.timeline-date { font-weight: 600; font-size: 0.9375rem; }
.timeline-note { margin: 0 0 0.5rem; color: var(--ds-text); overflow-wrap: anywhere; }
.timeline-procs { margin: 0 0 0.5rem; }
.timeline-next { margin: 0; font-size: 0.875rem; color: var(--ds-text-muted); }

.pin-display { font-size: 2.25rem; line-height: 1.1; letter-spacing: 0.08em; margin: 0.25rem 0; }

.modal-content { border: 0; border-radius: 16px; box-shadow: var(--ds-shadow-lg); }
.modal-header { border-bottom: 0; padding-bottom: 0; }

/* bootstrap form controls on staff pages, brought to the reference's softer
   radius. the .ds-input family already reads --ds-radius. */
.form-control, .form-select { border-radius: 0.625rem; border-color: var(--ds-border-strong); background-color: #fff; }
.btn { border-radius: 0.625rem; }
.btn-sm { border-radius: 0.5rem; }
.form-label { font-weight: 500; font-size: 0.875rem; }

.appt-item { border-radius: 0.75rem; }
.appt-item + .appt-item { border-top: 1px solid var(--app-border); }
.appt-more { padding: 0 0.75rem 0.75rem; }
.appt-more > summary {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ds-primary);
  cursor: pointer;
  list-style: none;
  border-radius: 0.375rem;
}
.appt-more > summary::-webkit-details-marker { display: none; }
.appt-more > summary::after { content: " \25BE"; }
.appt-more[open] > summary { margin-bottom: 0.75rem; }
.appt-more > summary:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

/* the month calendar. table-fixed so a day with a 2-digit number and a badge
   does not make its column wider than the rest of the week. */
.appt-cal-card { margin-bottom: 1rem; }
.appt-cal-nav { display: flex; gap: 0.375rem; }
.appt-cal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.appt-cal th {
  padding: 0.25rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
}
.appt-cal td { padding: 0; }
.appt-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-height: 2.75rem;       /* 44px: a finger, not a pointer */
  padding: 0.25rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: var(--ds-text);
  text-decoration: none;
  line-height: 1.1;
}
.appt-cal-day:hover { background: var(--ds-surface-sunken); color: var(--ds-text); }
.appt-cal-day:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.appt-cal-num { font-size: 0.875rem; }
/* out-of-month days stay reachable - they are real days, and clicking one is
   how you cross a month boundary without the arrows */
.appt-cal-out .appt-cal-day { color: var(--ds-text-muted); }
.appt-cal-today { border-color: var(--ds-border-strong); font-weight: 600; }
.appt-cal-on, .appt-cal-on:hover {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
}
/* the marks row is always there, so a day with nothing on it is the same
   height as one with a badge and the grid does not jump between months */
.appt-cal-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  min-height: 1rem;
}
.appt-cal-booked {
  min-width: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 0.625rem;
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
  font-size: 0.6875rem;
  font-weight: 600;
  text-align: center;
}
.appt-cal-req {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--ds-warning);
}
/* on the selected day the badge sits on primary, where the teal pair is well
   under AA - it flips to a translucent white chip instead */
.appt-cal-on .appt-cal-booked { background: rgba(255, 255, 255, 0.92); color: var(--ds-primary-active); }
.appt-cal-on .appt-cal-req { background: #fff; }
.appt-cal-key {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--ds-text-muted);
}
.appt-cal-key .appt-cal-req { margin-left: 0.5rem; }

.book-form { display: grid; gap: 0.875rem; }
.book-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* page-head actions match the header's own action size */
.ds-page-actions .btn,
.ds-page-actions .form-control { height: 2.5rem; font-size: 0.875rem; }
.ds-page-actions .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 1rem; }

.steps .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ds-surface-sunken);
  color: var(--ds-primary);
  font-size: 1rem;
}
.steps .is-current .step-num { background: var(--ds-primary); color: #fff; }

.confirm-card { max-width: 44rem; }
.confirm-diff {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--ds-primary);
  border-radius: 0.5rem;
  background: var(--ds-surface-sunken);
  font-size: 1.0625rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.auth-card .app-brand-mark { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
.auth-card { max-width: 400px; border-radius: 20px; }
.toast { border: 1px solid var(--app-border); border-radius: 0.875rem; box-shadow: var(--ds-shadow-lg); }
.toast-header { border-bottom-color: var(--app-border); border-radius: 0.875rem 0.875rem 0 0; }

/* secondary buttons, after the reference: a hairline and dark text, lit
   on hover - and above AA, which bootstrap's compiled #6c757d is not */
.btn-outline-secondary {
  --bs-btn-color: #334155;
  --bs-btn-border-color: var(--ds-border-strong);
  --bs-btn-bg: var(--app-surface);
  --bs-btn-hover-color: var(--ds-text);
  --bs-btn-hover-bg: var(--ds-surface-sunken);
  --bs-btn-hover-border-color: var(--ds-border-strong);
  --bs-btn-active-color: var(--ds-text);
  --bs-btn-active-bg: var(--ds-border);
  --bs-btn-active-border-color: var(--ds-border-strong);
}

/* duplicate review (P04). the two sides are deliberately identical in weight -
   nothing in the layout should suggest which record is the "real" one. */
.dup-side {
  height: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  background: var(--ds-surface-sunken);
}
.dup-side code { font-size: 0.8125rem; color: var(--ds-text); }
.dup-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.dup-merge { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--app-border); }
.dup-merge > summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.dup-merge > summary:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.dup-merge[open] > summary { margin-bottom: 0.75rem; }

/* record timeline (P04). a rail with the date on the left, so a long history
   is scannable by when rather than by which card it happens to live in. */
.tl { list-style: none; margin: 0; padding: 0; }
.tl-item {
  display: flex;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-left: 2px solid var(--ds-border);
  padding-left: 1rem;
  margin-left: 0.25rem;
}
.tl-item + .tl-item { border-top: 0; }
.tl-date {
  flex: none;
  width: 6rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text-muted);
}
.tl-main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.tl-source { font-size: 0.75rem; color: var(--ds-text-muted); }
.tl-merge { border-left-color: var(--ds-warning); }
.tl-billed { border-left-color: var(--ds-accent); }
@media (max-width: 575.98px) {
  .tl-item { flex-direction: column; gap: 0.25rem; }
  .tl-date { width: auto; }
}
.prefill-note {
  margin-bottom: 1rem;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid var(--ds-accent);
  border-radius: 0.5rem;
  background: var(--ds-surface-sunken);
  font-size: 0.8125rem;
  color: var(--ds-text-muted);
}

/* ===================================================================== */
/* P23 - staff shell: role-aware sidebar, compact top bar, sign out.      */
/* light surfaces throughout; blue for actions; status colours carry      */
/* meaning only. every value comes from tokens.css except the sign-out    */
/* red, which must stay >= 4.5:1 on white.                                */
/* ===================================================================== */
:root { --app-side-w: 16rem; --app-signout: #a4161a; --app-signout-hover: #7f1015; }
.app-skip { position: absolute; left: -999px; top: 0.5rem; z-index: 2000; background: var(--ds-surface); padding: 0.5rem 0.75rem; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); }
.app-skip:focus { left: 0.5rem; outline: none; box-shadow: var(--ds-focus-ring); }
.app-shell { display: flex; min-height: 100vh; background: var(--ds-ground); }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-side { width: var(--app-side-w); background: var(--ds-surface); border-right: 1px solid var(--ds-border); display: flex; flex-direction: column; }
@media (min-width: 992px) {
  .app-side { position: sticky; top: 0; height: 100vh; flex: none; overflow-y: auto; }
}
.app-side.offcanvas-lg { --bs-offcanvas-width: 17rem; }
.app-side-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem 0.75rem; }
.app-side-nav { flex: 1; padding: 0.25rem 0.75rem 1rem; }
.app-side-group { margin: 1rem 0.5rem 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-muted); }
.app-side-list { list-style: none; margin: 0; padding: 0; }
.app-side-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; margin: 1px 0; border-radius: var(--ds-radius); color: var(--ds-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.app-side-link i { font-size: 1rem; color: var(--ds-text-muted); width: 1.25rem; text-align: center; }
.app-side-link:hover { background: var(--ds-surface-sunken); color: var(--ds-text); }
.app-side-link.active { background: var(--ds-info-surface); color: var(--ds-primary-active); font-weight: 600; }
.app-side-link.active i { color: var(--ds-primary); }
.app-side-link:focus-visible, .app-side-sub:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.app-side-count { margin-left: auto; min-width: 1.5rem; padding: 0 0.4rem; border-radius: var(--ds-radius-pill); background: var(--ds-warning-surface); color: var(--ds-text); font-size: 0.75rem; font-weight: 600; text-align: center; }
.app-side-foot { border-top: 1px solid var(--ds-border); padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.app-side-user { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0 0.5rem; }
.app-side-sub { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--ds-radius); color: var(--ds-text); text-decoration: none; font-size: 0.875rem; }
.app-side-sub:hover { background: var(--ds-surface-sunken); color: var(--ds-text); }
.app-signout-form { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px dashed var(--ds-border); }
.app-signout { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border: 0; border-radius: var(--ds-radius); background: none; color: var(--app-signout); font-size: 0.875rem; font-weight: 600; text-align: left; }
.app-signout:hover { background: var(--ds-danger-surface); color: var(--app-signout-hover); }
.app-signout:focus-visible { outline: none; box-shadow: var(--ds-focus-ring-danger); }
/* the compact top bar */
.app-main .app-topbar { position: sticky; top: 0; z-index: 1020; background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.app-main .app-topbar-inner { max-width: none; height: 3.5rem; gap: 0.75rem; }
.app-main .app-search { flex: 1; max-width: 32rem; width: auto; }
.app-topbar-zone { margin-left: auto; font-size: 0.75rem; color: var(--ds-text-muted); white-space: nowrap; }
@media (max-width: 575.98px) { .app-topbar-zone { display: none; } }
/* page head: eyebrow, title, meta, one primary action */
.app-primary { white-space: nowrap; }

/* ---- P23 components ------------------------------------------------- */
.ux-attention { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.875rem 1.125rem; margin-bottom: 1.25rem; border: 1px solid #f1d27a; border-radius: var(--ds-radius-lg); background: var(--ds-warning-surface); color: var(--ds-text); }
.ux-attention-quiet { border-color: var(--ds-border); background: var(--ds-surface); color: var(--ds-text-muted); }
.ux-attention-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.ux-attention-list a { color: var(--ds-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ux-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ux-kpi { display: flex; flex-direction: column; gap: 0.125rem; padding: 1rem 1.125rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-text); text-decoration: none; }
.ux-kpi:hover { border-color: var(--ds-primary); color: var(--ds-text); }
.ux-kpi:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.ux-kpi-label { font-size: 0.8125rem; font-weight: 600; color: var(--ds-text-muted); }
.ux-kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.ux-kpi-sub { font-size: 0.8125rem; color: var(--ds-text-muted); }
.ux-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ux-span-2 { grid-column: span 2; }
@media (max-width: 1199.98px) { .ux-grid { grid-template-columns: minmax(0, 1fr); } .ux-span-2 { grid-column: auto; } }
.ux-card { padding: 1.125rem 1.25rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: none; }
.ux-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.ux-card-title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.ux-card-meta { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--ds-text-muted); }
.ux-link { font-size: 0.875rem; font-weight: 600; color: var(--ds-primary-active); text-decoration: none; }
.ux-link:hover { text-decoration: underline; }
.ux-link:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 4px; }
.ux-muted { color: var(--ds-text-muted); font-size: 0.8125rem; }
.ux-empty { margin: 0.25rem 0; color: var(--ds-text-muted); }
.ux-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.ux-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--ds-border); }
.ux-list > li:last-child { border-bottom: 0; }
.ux-inline-form { margin: 0; }
.ux-intake { margin: 0.5rem 0 0; }
.ux-quick { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0; }
.ux-upload summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--ds-primary-active); }
.ux-upload summary:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 4px; }
/* tables: labelled rows below 768 */
.ux-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ux-table th { padding: 0.5rem 0.625rem; text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-muted); border-bottom: 1px solid var(--ds-border); white-space: nowrap; }
.ux-table td { padding: 0.625rem; border-bottom: 1px solid var(--ds-border); vertical-align: middle; }
.ux-table tr:last-child td { border-bottom: 0; }
.ux-table th a { color: inherit; text-decoration: none; }
.ux-table th a:hover, .ux-table th a[aria-sort] { color: var(--ds-text); text-decoration: underline; }
.ux-row-past td { color: var(--ds-text-muted); }
.ux-row-now td { background: var(--ds-info-surface); }
@media (max-width: 767.98px) {
  .ux-table thead { position: absolute; left: -9999px; }
  .ux-table tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--ds-border); }
  .ux-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border: 0; text-align: right; }
  .ux-table td::before { content: attr(data-label); font-weight: 600; color: var(--ds-text-muted); text-align: left; }
}
/* status badges: meaning, not decoration */
.ux-badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--ds-radius-pill); font-size: 0.75rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.ux-badge-booked { background: var(--ds-info-surface); color: #1e3a8a; border-color: #bfd3fb; }
.ux-badge-requested { background: var(--ds-warning-surface); color: #7a4a00; border-color: #f1d27a; }
.ux-badge-cancelled, .ux-badge-declined { background: var(--ds-neutral-surface); color: #3f4a5a; border-color: var(--ds-border); text-decoration: line-through; }
.ux-badge-draft { background: var(--ds-warning-surface); color: #7a4a00; border-color: #f1d27a; }
.ux-badge-confirmed { background: var(--ds-success-surface); color: #0f5132; border-color: #a7dcc0; }
.ux-badge-none { background: var(--ds-surface-sunken); color: var(--ds-text-muted); }
/* appointments */
.ux-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.ux-toolbar .form-select, .ux-toolbar .form-control { width: auto; }
.ux-tabs { display: inline-flex; padding: 0.1875rem; border-radius: var(--ds-radius); background: var(--ds-surface-sunken); }
.ux-tab { padding: 0.3125rem 0.875rem; border-radius: calc(var(--ds-radius) - 2px); color: var(--ds-text); font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.ux-tab.active { background: var(--ds-surface); color: var(--ds-primary-active); font-weight: 600; box-shadow: var(--ds-shadow-sm); }
.ux-tab:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.ux-datenav { display: inline-flex; align-items: center; gap: 0.375rem; }
.ux-appt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
.ux-appt-side { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1199.98px) { .ux-appt-layout { grid-template-columns: minmax(0, 1fr); } }
.ux-scroll { overflow-x: auto; }
.ux-daygrid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 30rem; }
.ux-daygrid th { padding: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-text-muted); text-align: left; border-bottom: 1px solid var(--ds-border); }
.ux-daygrid td, .ux-daygrid tbody th { padding: 0.375rem; border-bottom: 1px solid var(--ds-border); vertical-align: top; }
.ux-daygrid tbody th { font-size: 0.8125rem; font-weight: 600; color: var(--ds-text-muted); }
.ux-daygrid-time { width: 4.5rem; }
.ux-slot { padding: 0.5rem 0.625rem; margin-bottom: 0.375rem; border-left: 4px solid var(--ds-primary); border-radius: var(--ds-radius-sm); background: var(--ds-info-surface); }
.ux-slot-cancelled { border-left-color: var(--ds-border-strong); background: var(--ds-neutral-surface); }
.ux-slot-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.ux-slot-note { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--ds-text-muted); }
.ux-slot-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.375rem; margin-top: 0.375rem; }
.ux-week-day { display: flex; align-items: baseline; gap: 0.5rem; margin: 1rem 0 0.25rem; font-size: 0.9375rem; }
.ux-request { align-items: flex-start !important; }
.ux-request-actions { flex-basis: 100%; }
.ux-mini-form { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.ux-panel > summary { cursor: pointer; list-style: none; }
.ux-panel > summary::-webkit-details-marker { display: none; }
.ux-panel > summary::after { content: "Open"; float: right; font-size: 0.8125rem; font-weight: 600; color: var(--ds-primary-active); }
.ux-panel[open] > summary::after { content: "Close"; }
.ux-panel > summary:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 4px; }
.ux-form { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.ux-form .form-label { margin: 0.5rem 0 0.125rem; font-weight: 500; }
.ux-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.appt-more > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--ds-primary-active); }
.appt-more > summary:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 4px; }
.ux-search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.ux-search-form .form-control { flex: 1; min-width: 12rem; max-width: 28rem; }
.ux-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.ux-answer { margin-top: 1.25rem; padding: 1rem 1.125rem; border-left: 4px solid var(--ds-primary); border-radius: var(--ds-radius); background: var(--ds-info-surface); }
.ux-answer-empty { border-left-color: var(--ds-border-strong); background: var(--ds-surface-sunken); }
.ux-answer-q { font-weight: 600; margin-bottom: 0.5rem; }
.ux-answer p:last-child { margin-bottom: 0; }
.ux-examples { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; padding: 0; margin: 0.5rem 0 0.75rem; }
.ux-examples .btn { text-align: left; white-space: normal; }
.ux-candidates { margin-top: 0.75rem; }
.ux-candidate { display: flex; gap: 0.5rem; align-items: center; padding: 0.375rem 0; }
.ux-steps { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-text-muted); font-size: 0.875rem; }
.ux-steps li { display: flex; align-items: center; gap: 0.5rem; }
.ux-step-num { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--ds-border-strong); font-size: 0.75rem; font-weight: 700; }
.ux-steps li[aria-current="step"] { color: var(--ds-text); font-weight: 600; }
.ux-steps li[aria-current="step"] .ux-step-num { background: var(--ds-primary); border-color: var(--ds-primary); color: #fff; }
.ux-steps li.done .ux-step-num { background: var(--ds-success-surface); border-color: #a7dcc0; color: #0f5132; }
.ux-help-list { padding-left: 1.1rem; margin: 0.5rem 0 0; }

/* P23: the count is drawn, not text, so a day link's visible text is its number alone and its label starts with it */
.appt-cal-booked[data-n]::before { content: attr(data-n); }
/* a slot sits on the info surface; the default outline blue is 4.47:1 there */
.ux-slot .btn-outline-primary { color: var(--ds-primary-active); border-color: var(--ds-primary-active); }

/* ===================================================================== */
/* P23 follow-up (owner visual review, 2026-09-25): the concept's palette */
/* and density. dark navy sidebar, white top bar, light ground, one       */
/* restrained blue for actions, 14px cards. contrast measured: sidebar    */
/* text #d5deec 12.0:1 and group labels #a9b8d0 8.1:1 on #142036; white   */
/* on the active #294781 9.1:1; #2453d4 on white 6.4:1. sign out keeps    */
/* its dark red (#a4161a) on a white chip, 7.75:1 - dark red directly on  */
/* navy would be 2.1:1. the focus rings inside the sidebar are light,     */
/* because the blue ring does not show on navy.                           */
/* ===================================================================== */
:root {
  --ds-primary: #2453d4;
  --ds-primary-hover: #1d44b3;
  --ds-primary-active: #1a3a9a;
  --bs-primary: #2453d4;
  --bs-primary-rgb: 36, 83, 212;
  --app-accent-hover: #1d44b3;
  --app-accent-active: #1a3a9a;
  --ds-ground: #f6f8fc;
  --bs-body-bg: #f6f8fc;
  --app-ground: #f6f8fc;
  --ds-border: #d9e1ec;
  --app-border: #d9e1ec;
  --bs-border-color: #d9e1ec;
  --ds-radius-lg: 14px;
  --app-card-radius: 14px;
  --app-card-shadow: none;
  --ds-focus-ring: 0 0 0 3px rgba(36, 83, 212, 0.32);
  --app-navy: #142036;
  --app-navy-active: #294781;
  --app-navy-text: #d5deec;
  --app-navy-muted: #a9b8d0;
}
.app-shell { background: var(--ds-ground); }
/* the sidebar */
.app-side, .app-side.offcanvas-lg { background: var(--app-navy); color: var(--app-navy-text); border-right: 0;
  --bs-offcanvas-bg: var(--app-navy); --bs-offcanvas-color: var(--app-navy-text);
  --ds-focus-ring: 0 0 0 3px #8db0ff; --ds-focus-ring-danger: 0 0 0 3px #ffb0b0; }
.app-side .app-brand, .app-side .app-brand-name { color: #fff; }
.app-side .app-brand-sub { color: var(--app-navy-muted); }
.app-side .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.app-side-head { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.app-side-nav { padding: 0.5rem 0.875rem 1rem; }
.app-side-group { margin: 1.125rem 0.5rem 0.5rem; color: var(--app-navy-muted); }
.app-side-link { padding: 0.625rem 0.75rem; margin: 2px 0; border-radius: 10px; color: var(--app-navy-text); font-size: 0.9375rem; }
.app-side-link i { color: var(--app-navy-muted); }
.app-side-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.app-side-link:hover i { color: #fff; }
.app-side-link.active { background: var(--app-navy-active); color: #fff; font-weight: 600; }
.app-side-link.active i { color: #fff; }
.app-side-count { background: #fde7b0; color: #3b2a00; }
.app-side-foot { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 1.25rem 1.25rem; }
.app-side .app-user-name { color: #fff; }
.app-side .app-user-role { color: var(--app-navy-muted); }
.app-side-sub { color: var(--app-navy-text); }
.app-side-sub:hover, .app-side-sub.active { background: rgba(255, 255, 255, 0.07); color: #fff; }
.app-signout-form { border-top: 0; padding-top: 0.25rem; }
.app-signout { justify-content: flex-start; padding: 0.5rem 0.75rem; border-radius: 10px; background: #fff; color: var(--app-signout); }
.app-signout:hover { background: #fdecec; color: var(--app-signout-hover); }
/* the top bar and page head */
.app-main .app-topbar { background: #fff; border-bottom: 1px solid var(--ds-border); }
.app-main .app-topbar-inner { height: 4rem; }
.app-main .app-search input { height: 2.625rem; border-radius: 12px; background: #f6f8fc; border-color: var(--ds-border); }
.ds-page-head { border-bottom: 0; padding-bottom: 1.25rem; align-items: center; }
.ds-page-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #4a5b73; }
.ds-page-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; }
.app-primary { padding: 0.625rem 1.125rem; border-radius: 12px; font-weight: 600; }
/* surfaces */
.card, .ux-card, .ux-kpi, .ux-toolbar, .ux-steps { border-color: var(--ds-border); border-radius: 14px; box-shadow: none; }
.ux-card { padding: 1.25rem 1.375rem; }
.ux-card-title { font-size: 1.125rem; }
.ux-count { display: inline-block; min-width: 1.5rem; margin-left: 0.25rem; padding: 0 0.4rem; border-radius: 999px; background: var(--ds-surface-sunken); color: var(--ds-text-muted); font-size: 0.75rem; font-weight: 700; text-align: center; vertical-align: middle; }
.ds-numeral { font-family: var(--ds-font); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
/* home: attention line, compact KPIs, the two-column body */
.ux-attention { padding: 0.75rem 1.125rem; border-color: #f0d58c; background: #fff8e6; border-radius: 14px; }
.ux-attention-mark { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #f2c14e; color: #3b2a00; font-weight: 800; font-size: 0.875rem; }
.ux-attention-list a { color: #5c3d00; font-weight: 600; text-decoration: none; }
.ux-attention-list a:hover { text-decoration: underline; }
.ux-attention-list li + li::before { content: "·"; margin-right: 1.25rem; margin-left: -0.75rem; color: #8a6a1f; }
.ux-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ux-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .ux-kpis, .ux-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .ux-kpis, .ux-kpis-3 { grid-template-columns: minmax(0, 1fr); } }
.ux-kpi { padding: 0.875rem 1rem; gap: 0.25rem; }
.ux-kpi-top { display: flex; align-items: center; gap: 0.5rem; }
.ux-kpi-icon { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 8px; background: var(--app-navy-active); color: #fff; font-size: 0.8125rem; }
.ux-kpi-label { color: #334155; }
.ux-kpi-value { font-size: 1.5rem; line-height: 1.15; }
.ux-kpi-static { cursor: default; }
.ux-kpi-static:hover { border-color: var(--ds-border); }
.ux-home { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ux-home-side { display: flex; flex-direction: column; gap: 1rem; }
.ux-home > .ux-card { margin: 0; }
@media (max-width: 1199.98px) { .ux-home { grid-template-columns: minmax(0, 1fr); } }
.ux-agenda td { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.ux-time { display: block; font-size: 0.9375rem; }
.ux-time-end { display: block; font-size: 0.75rem; }
.ux-empty-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border-radius: 10px; background: var(--ds-surface-sunken); }
.ux-empty-block .ux-empty { margin: 0; }
.ux-alerts { margin: 0; padding: 0; list-style: none; counter-reset: alert; }
.ux-alerts li { counter-increment: alert; display: flex; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid var(--ds-border); }
.ux-alerts li:last-child { border-bottom: 0; }
.ux-alerts li::before { content: counter(alert); min-width: 1rem; color: var(--ds-text-muted); font-weight: 600; }
.ux-alerts a { color: var(--ds-text); text-decoration: none; font-weight: 500; }
.ux-alerts a:hover { color: var(--ds-primary-active); text-decoration: underline; }
.ux-alerts a:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 4px; }
.ux-attention-list a:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 4px; }
.ux-activity-list > li { padding: 0.5rem 0; }
.ux-activity-end { display: inline-flex; align-items: center; gap: 0.75rem; }
.ux-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.625rem; margin: 0 0 0.75rem; }
@media (max-width: 575.98px) { .ux-quick { grid-template-columns: minmax(0, 1fr); } }
.ux-quick-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--ds-border); border-radius: 12px; background: #f6f8fc; color: var(--ds-text); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.ux-quick-main { justify-content: flex-start; background: #eaf0fd; border-color: #cddaf8; color: var(--ds-primary-active); }
.ux-quick-item:hover { border-color: var(--ds-primary); color: var(--ds-primary-active); }
.ux-quick-item:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
/* tables that belong to the page: no inner scroll box, numbers right-aligned */
.ux-table-page { table-layout: auto; }
.ux-table .ux-num { text-align: right; white-space: nowrap; }
.ux-table th.ux-num { text-align: right; }
.ux-table tbody tr:hover td { background: #f9fbfe; }
.ux-bill td:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 767.98px) { .ux-table .ux-num, .ux-bill td:last-child { text-align: right; } }
/* patients: the list filter is labelled, the lookup in the top bar is a different job */
.ux-filter-label { margin: 0; font-weight: 600; font-size: 0.875rem; }
.ux-search-form { margin-bottom: 1rem; }
/* billing: the demo note stays visible and short */
.ux-note { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.75rem 1rem; border: 1px solid #c9d8f5; border-radius: 12px; background: #eef3fd; color: #1f2f4d; font-size: 0.875rem; }
.ux-note > i { color: var(--ds-primary-active); margin-top: 0.125rem; }
/* appointments: the concept's schedule card and filter bar */
.ux-toolbar { padding: 0.75rem 1rem; }
.ux-tabs { background: #eef2f8; }
.ux-slot { border-radius: 8px; border-left-width: 4px; background: #eaf0fd; border-left-color: var(--ds-primary); }
/* bootstrap sets .offcanvas-lg transparent !important at >= 992px; the sidebar is navy at every width */
.app-side.offcanvas-lg { background-color: var(--app-navy) !important; }
/* the three billing tables share one column grid, so amounts and statuses line up down the page */
@media (min-width: 768px) {
  .ux-bill { table-layout: fixed; }
  .ux-bill th:nth-child(1) { width: 22%; } .ux-bill th:nth-child(2) { width: 22%; } .ux-bill th:nth-child(3) { width: 13%; }
  .ux-bill th:nth-child(4) { width: 17%; } .ux-bill th:nth-child(5) { width: 12%; padding-left: 1.25rem; }
  .ux-bill td:nth-child(5) { padding-left: 1.25rem; } .ux-bill th:nth-child(6) { width: 14%; }
}
.ds-page-head { margin-bottom: 0.25rem; padding-bottom: 1rem; }
/* phones: a stacked cell keeps its own content together (label in a left gutter, content flowing beside it) */
@media (max-width: 767.98px) {
  .ux-table td { display: block; position: relative; padding: 0.3125rem 0 0.3125rem 7.5rem; text-align: left; min-height: 1.75rem; }
  .ux-table td::before { position: absolute; left: 0; top: 0.3125rem; width: 7rem; }
  .ux-table .ux-num, .ux-bill td:last-child { text-align: left; }
  .ux-time, .ux-time-end { display: inline; }
  .ux-time-end::before { content: " - "; }
  .ux-attention-list { flex-direction: column; }
  .ux-attention-list li + li::before { content: none; }
}
@media (max-width: 575.98px) {
  .ux-kpis, .ux-kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
  .ux-kpi { padding: 0.75rem; }
  .ux-kpi-sub { display: none; }
}
/* the tints are translucent and read dark over navy: the account avatar gets its own opaque surface */
.app-side .ds-avatar { background: #e8eefb; color: #142036; }
/* page-level tables between a phone and a wide screen: cells wrap instead of widening the page */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .ux-table-page th, .ux-table-page td { padding-left: 0.375rem; padding-right: 0.375rem; }
  .ux-table-page th { white-space: normal; }
  .ux-table-page .ux-badge { white-space: normal; }
  .ux-table-page .ds-avatar { display: none; }
}
/* phones: the label floats in the gutter and the cell clears it, so a two-line label grows its row instead of
   overlapping the next one */
@media (max-width: 767.98px) {
  .ux-table td::before { position: static; float: left; width: 7rem; margin-left: -7.5rem; }
  .ux-table td::after { content: ""; display: table; clear: both; }
}
/* plain links on the older pages take the staff blue, not bootstrap's default */
:root { --bs-link-color: #1a3a9a; --bs-link-color-rgb: 26, 58, 154; --bs-link-hover-color: #142036; --bs-link-hover-color-rgb: 20, 32, 54; }
.ds-alert { border-radius: 12px; }
@media (max-width: 767.98px) { .ux-table .ux-badge { white-space: normal; } .ux-table { table-layout: fixed; } }
/* home: two independent columns, so a short agenda leaves no hole above the activity card.
   below 1200px the columns dissolve and the cards take the concept's reading order */
.ux-home-main, .ux-home-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 1199.98px) {
  .ux-home { display: flex; flex-direction: column; }
  .ux-home-main, .ux-home-side { display: contents; }
  .ux-home-agenda { order: 1; } .ux-home-side > section:not(.ux-home-quick) { order: 2; }
  .ux-home-activity { order: 3; } .ux-home-quick { order: 4; }
}
/* however many KPIs a role has, they fill the row */
.ux-kpis { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
@media (max-width: 575.98px) { .ux-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the sidebar column stays navy the full height of a long page (the sidebar itself is sticky, 100vh) */
@media (min-width: 992px) {
  .app-shell { background: linear-gradient(to right, var(--app-navy) var(--app-side-w), var(--ds-ground) var(--app-side-w)); }
}
@media (max-width: 1199.98px) { .ux-home { align-items: stretch; } }
.ux-kpis { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@media (max-width: 575.98px) { .ux-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================================================================== */
/* P23 correction 2 (owner's annotated assistant screens of fda69e4)      */
/* ===================================================================== */
.ux-eyebrow-note { font-weight: 600; letter-spacing: 0.04em; }
/* quick actions: one per line, each label on one line */
.ux-quick { grid-template-columns: minmax(0, 1fr); }
.ux-quick-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* activity: the older group is labelled and quieter */
.ux-act-group { padding: 0.75rem 0 0.25rem; border-bottom: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ds-text-muted); }
.ux-activity-older strong { font-weight: 600; }
.ux-activity-quiet { margin: 0 0 0.25rem; }
/* the 14-day chart */
.ux-home-chart .ux-bars { display: block; width: 100%; height: 9rem; }
.ux-bar { fill: var(--ds-primary); }
.ux-bar-n { font-size: 7px; font-weight: 700; fill: #0f172a; }
.ux-bar-day { font-size: 6.5px; fill: #4a5b73; }
.ux-bars-table { margin-top: 0.5rem; }
.ux-bars-table summary { cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--ds-primary-active); }
.ux-bars-table summary:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 4px; }
/* appointments: one control bar in every view */
.ux-datenav .btn { white-space: nowrap; }
/* week: seven columns you can scan; a day with nothing is a dash, not a sentence */
.ux-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ux-wk-day { min-width: 0; padding: 0.5rem; border: 1px solid var(--ds-border); border-radius: 10px; background: #fbfcfe; }
.ux-wk-today { border-color: var(--ds-primary); }
.ux-wk-on { box-shadow: inset 0 0 0 1px var(--ds-primary); }
.ux-wk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.375rem; color: var(--ds-text); text-decoration: none; font-size: 0.8125rem; }
.ux-wk-head:hover .ux-wk-name { text-decoration: underline; }
.ux-wk-head:focus-visible, .ux-wk-appt:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 6px; }
.ux-wk-name { font-weight: 700; }
.ux-wk-date { color: var(--ds-text-muted); }
.ux-wk-count { margin-left: auto; min-width: 1.375rem; padding: 0 0.375rem; border-radius: 999px; background: #eaf0fd; color: #1a3a9a; font-weight: 700; text-align: center; }
.ux-wk-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.ux-wk-appt { display: block; padding: 0.375rem 0.5rem; border-left: 3px solid var(--ds-primary); border-radius: 6px; background: #eaf0fd; color: var(--ds-text); text-decoration: none; font-size: 0.8125rem; line-height: 1.3; }
.ux-wk-appt:hover { background: #dde7fc; }
.ux-wk-cancelled { border-left-color: var(--ds-border-strong); background: var(--ds-neutral-surface); }
.ux-wk-time { font-weight: 700; }
.ux-wk-who { display: block; overflow-wrap: anywhere; }
.ux-wk-doc { display: block; color: #4a5b73; font-size: 0.75rem; }
.ux-wk-none { display: block; margin-top: 0.5rem; color: var(--ds-text-muted); }
@media (max-width: 991.98px) {
  .ux-wk { grid-template-columns: minmax(0, 1fr); }
  .ux-wk-day { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem; align-items: start; }
  .ux-wk-list, .ux-wk-none { margin-top: 0; }
}
[data-ux="week"] > .ux-empty-block { margin-bottom: 0.75rem; }
/* month: the count is written out; a request is a separate, differently worded mark */
.appt-cal-count { display: inline-block; margin-top: 0.125rem; padding: 0 0.3125rem; border-radius: 999px; background: #eaf0fd; color: #1a3a9a; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.appt-cal-reqtext { display: inline-block; margin-top: 0.125rem; padding: 0 0.3125rem; border-radius: 999px; background: #fff8e6; color: #5c3d00; border: 1px dashed #d9a520; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
.appt-cal-marks { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.appt-cal-on .appt-cal-count { background: #fff; color: #1a3a9a; }
.appt-cal-on .appt-cal-reqtext { background: #fff; }
.appt-cal-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0.75rem 0 0.25rem; font-size: 0.8125rem; color: #334155; }
.appt-cal-open { margin: 0.25rem 0 0; }
.appt-cal-card > .ux-empty-block { margin-bottom: 0.75rem; }
@media (max-width: 575.98px) { .appt-cal-count, .appt-cal-reqtext { font-size: 0.5625rem; padding: 0 0.1875rem; } }
/* the request queue: the same card in every view */
.ux-requests > li { display: block; }
.ux-request-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; }
.ux-request-when { margin: 0.25rem 0 0; font-size: 0.875rem; }
.ux-request-note { margin: 0.125rem 0 0; }
.appt-cal-count[data-text]::before, .appt-cal-reqtext[data-text]::before { content: attr(data-text); }
/* chart: bars stretch, labels do not */
.ux-home-chart .ux-bars { display: block; width: 100%; height: auto; margin-top: 0.25rem; }
.ux-bars-svg { display: block; width: 100%; height: 7rem; }
.ux-bars-row { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); text-align: center; }
.ux-bars-n { min-height: 1.25rem; font-size: 0.75rem; font-weight: 700; color: #0f172a; }
.ux-bars-day { margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.2; color: #4a5b73; }
.ux-bars-day b { display: block; font-weight: 600; }
/* week header: weekday over date, count beside */
.ux-wk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.25rem; flex-wrap: nowrap; }
.ux-wk-when { display: flex; flex-direction: column; line-height: 1.2; }
.ux-wk-count { margin-left: 0; }
/* month legend: one line per mark */
ul.appt-cal-key { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: 0; list-style: none; }
ul.appt-cal-key li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.ux-wk-doc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* phones and tablets: agenda, then the request queue, then the chart, activity and quick actions */
@media (max-width: 1199.98px) {
  .ux-home-agenda { order: 1; } .ux-home-side > section:not(.ux-home-quick) { order: 2; }
  .ux-home-chart { order: 3; } .ux-home-activity { order: 4; } .ux-home-quick { order: 5; }
}

/* P25 file timeline: a thumbnail, the entry, then its status and actions */
.file-thumb { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--ds-border-strong); flex: none; background: #fff; }
.file-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-left: auto; }
.file-actions form { margin: 0; }
.file-preview { margin: 0; }
.file-preview img { display: block; max-width: 100%; max-height: 360px; height: auto; border: 1px solid var(--ds-border-strong); border-radius: 8px; background: #fff; }
/* an image file opened from the record: the whole image, as large as the screen allows, never cropped */
.file-preview .file-view { width: auto; max-width: 100%; max-height: 75vh; height: auto; object-fit: contain; }
.import-evidence th { font-weight: 600; white-space: nowrap; }
.import-evidence td, .import-evidence th { vertical-align: top; }
@media (max-width: 575.98px) {
  .file-entry { flex-wrap: wrap; }
  .file-actions { margin-left: 0; width: 100%; }
}

/* P24 clinic guides: the quoted passage, and a page beside its image */
.guide-passage { margin: 0 0 0.75rem; padding: 0.75rem 1rem; border-left: 4px solid var(--ds-border-strong); background: #fff; font-size: 1rem; white-space: pre-wrap; }
.guide-page { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.guide-page-image { width: 100%; height: auto; border: 1px solid var(--ds-border-strong); border-radius: 8px; background: #fff; }
.guide-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; }
.guide-focus { outline: 2px solid var(--ds-border-strong); outline-offset: 2px; }
@media (max-width: 767.98px) { .guide-page { grid-template-columns: 1fr; } }

/* ===================================================================== */
/* P29 staff redesign: the patient portal's direction, with the staff    */
/* palette above kept as the owner set it (navy menu, blue actions).     */
/* every other row shaded, a button for each row action, boxes that keep */
/* their height and scroll inside with the header row in place, a dark   */
/* card for what comes next, and tabs on the patient record.             */
/* ===================================================================== */
:root { --sx-zebra: #f3f6fb; --sx-hover: #e8eef9; --sx-muted: #4a5b73; }

/* the menu: tighter rows so more of it fits, and the account foot pinned so sign out never scrolls away */
.app-side-link { padding: 0.5rem 0.75rem; margin: 1px 0; }
.app-side-group { margin: 0.875rem 0.5rem 0.375rem; }
.app-side-foot { position: sticky; bottom: 0; z-index: 1; background: var(--app-navy); }

/* lists and tables: every other row shaded, the row under the pointer a little more */
.ds-rows .ds-row { border-radius: 10px; padding: 0.75rem 0.875rem; }
.ds-rows .ds-row:nth-child(even) { background: var(--sx-zebra); }
.ds-rows .ds-row:hover { background: var(--sx-hover); }
.ux-table tbody tr:nth-child(even) td { background: var(--sx-zebra); }
.ux-table tbody tr:hover td { background: var(--sx-hover); }
.ds-row .sx-row-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* a box keeps its height; more rows scroll inside it. relative: the screen-reader-only text in row buttons is
   absolutely placed and must stay clipped by the box, or it widens the page */
.sx-box { position: relative; max-height: var(--h, 26rem); overflow: auto; overscroll-behavior: contain; border-radius: 10px; scrollbar-width: thin; }
.sx-box thead th { position: sticky; top: 0; z-index: 1; background: var(--ds-surface-sunken); }
.sx-scroll-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin: 0.625rem 0 0; padding-top: 0.625rem; border-top: 1px solid var(--ds-border); color: var(--sx-muted); font-size: 0.8125rem; }

/* what comes next: one dark card at the top of home */
.sx-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; border-radius: 16px; background: var(--app-navy); color: #fff; }
.sx-hero-text { flex: 1 1 16rem; min-width: 0; }
.sx-hero-k { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-navy-muted); }
.sx-hero-big { margin: 0.125rem 0; font-size: 1.375rem; font-weight: 700; overflow-wrap: anywhere; }
.sx-hero-meta { margin: 0; color: var(--app-navy-text); }
.sx-hero-acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sx-hero .btn-light { color: var(--app-navy); font-weight: 600; }
.sx-hero .btn-outline-light { font-weight: 600; }
.sx-tile { display: grid; place-items: center; width: 4.25rem; height: 4.5rem; border-radius: 14px; background: rgba(255, 255, 255, 0.1); flex: none; text-align: center; line-height: 1.1; }
.sx-tile b { font-size: 1.25rem; }
.sx-tile small { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-navy-muted); }
.sx-hero .ds-avatar { flex: none; }

/* tabs and filters: one segmented control, the current choice in the menu's navy */
.sx-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 1rem; width: fit-content; max-width: 100%; background: var(--ds-surface-sunken); border: 1px solid var(--ds-border); border-radius: 12px; }
.sx-tabs [role="tab"], .sx-tabs button { border: 0; background: transparent; color: var(--sx-muted); font-weight: 500; font-size: 0.9375rem; padding: 0.5rem 0.875rem; min-height: 40px; border-radius: 9px; display: inline-flex; align-items: center; gap: 0.4rem; }
.sx-tabs [aria-selected="true"], .sx-tabs [aria-pressed="true"] { background: var(--app-navy-active); color: #fff; }
.sx-tabs [role="tab"]:focus-visible, .sx-tabs button:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.sx-tabs .sx-count { font-size: 0.75rem; font-weight: 700; padding: 0 0.45rem; border-radius: 999px; background: rgba(20, 32, 54, 0.08); }
.sx-tabs [aria-selected="true"] .sx-count, .sx-tabs [aria-pressed="true"] .sx-count { background: rgba(255, 255, 255, 0.2); }
.sx-panel { display: grid; gap: 1rem; align-content: start; }
@media (min-width: 1200px) { .sx-panel-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sx-panel > *, .sx-panel-col > * { min-width: 0; }
.sx-panel-col { display: grid; gap: 1rem; align-content: start; }
/* a record tab panel: no outline when focus lands on it from the tab bar */
.sx-panel[role="tabpanel"]:focus { outline: none; }
.sx-panel[role="tabpanel"]:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); border-radius: 14px; }
.sx-panel + .sx-panel { margin-top: 1rem; }
/* tab controls made of links (states, filters): the same look as the record tabs */
.sx-tabs a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.375rem 0.75rem; border-radius: 9px; color: var(--sx-muted); font-weight: 500; text-decoration: none; }
.sx-tabs a:hover { background: rgba(20, 32, 54, 0.06); color: var(--ds-text); }
.sx-tabs a[aria-current="page"] { background: var(--app-navy-active); color: #fff; }
.sx-tabs a:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.sx-tabs a[aria-current="page"] .sx-count { background: rgba(255, 255, 255, 0.2); }
.sx-tabs-sm { margin-bottom: 0; }
.dash-card-head .sx-tabs { margin-left: auto; }
.sx-box-md { --h: 18rem; }
.sx-box-agenda { --h: 22rem; }
.ds-rows.sx-box { padding-right: 2px; }
/* an expanding section opens with a button, not a line of link text */
.appt-more > summary, .ux-upload summary, .ux-bars-table summary, .dup-merge > summary {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 32px; padding: 0.3rem 0.75rem;
  border: 1px solid var(--ds-border); border-radius: 9px; background: var(--ds-surface); color: var(--ds-text);
  font-size: 0.8125rem; font-weight: 600; cursor: pointer; list-style: none; }
.appt-more > summary:hover, .ux-upload summary:hover, .ux-bars-table summary:hover, .dup-merge > summary:hover { background: var(--ds-surface-sunken); }
.ux-upload summary::-webkit-details-marker, .ux-bars-table summary::-webkit-details-marker { display: none; }
.ux-upload summary::after, .ux-bars-table summary::after { content: "\25BE"; }
.ux-upload[open] summary, .ux-bars-table[open] summary { margin-bottom: 0.75rem; }
.ux-panel > summary::after { padding: 0.25rem 0.75rem; border: 1px solid var(--ds-border); border-radius: 9px; background: var(--ds-surface); color: var(--ds-text); }
.ux-request:nth-child(even) { background: var(--sx-zebra); border-radius: 10px; }
.ux-request { padding: 0.75rem 0.875rem; }
.appt-more > summary:focus-visible, .ux-upload summary:focus-visible, .ux-bars-table summary:focus-visible, .dup-merge > summary:focus-visible { border-radius: 9px; }