/* IBM Plex (self-hosted, SIL OFL 1.1 — see wwwroot/fonts/ibm-plex/OFL-*.txt) */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex/IBMPlexSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex/IBMPlexMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex/IBMPlexMono-SemiBold.woff2') format('woff2'); }

:root {
  /* Brand palette */
  --brand-navy-950: #0A1D30;
  --brand-navy-900: #102A43;
  --brand-navy-800: #173A5B;
  --brand-navy-text: #C6D3E2;
  --brand-navy-text-dim: #7E93AB;
  --brand-accent: #0E7C74;
  --brand-accent-rgb: 14, 124, 116;
  --brand-ink: #101828;
  --brand-ink-soft: #4B5768;
  --brand-ink-faint: #8592A3;
  --brand-surface: #FFFFFF;
  --brand-paper: #F5F7FA;
  --brand-border: #E1E7EF;

  /* Bootstrap live tokens */
  --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-bg: var(--brand-paper);
  --bs-body-color: var(--brand-ink);
  --bs-border-color: var(--brand-border);
  --bs-border-color-translucent: var(--brand-border);
  --bs-link-color-rgb: var(--brand-accent-rgb);
  --bs-link-hover-color-rgb: 11, 101, 95;
  --bs-emphasis-color: var(--brand-ink);
  --bs-secondary-color: var(--brand-ink-soft);
}

html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

.num, .dashboard-stat-value { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; }

/* Baked-in Bootstrap component colors (compiled CSS, not variable-driven) */
.btn-primary {
  --bs-btn-bg: var(--brand-accent); --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: #0B655F; --bs-btn-hover-border-color: #0B655F;
  --bs-btn-active-bg: #094F4A; --bs-btn-active-border-color: #094F4A;
  --bs-btn-disabled-bg: var(--brand-accent); --bs-btn-disabled-border-color: var(--brand-accent);
  --bs-btn-focus-shadow-rgb: var(--brand-accent-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-accent); --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: var(--brand-accent); --bs-btn-hover-border-color: var(--brand-accent);
  --bs-btn-active-bg: var(--brand-accent); --bs-btn-active-border-color: var(--brand-accent);
  --bs-btn-disabled-color: var(--brand-accent); --bs-btn-disabled-border-color: var(--brand-accent);
  --bs-btn-focus-shadow-rgb: var(--brand-accent-rgb);
}
.form-check-input:checked { background-color: var(--brand-accent); border-color: var(--brand-accent); }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(var(--brand-accent-rgb), 0.55);
}

/* Hide the validation summary's placeholder bullet when there are no errors. */
.validation-summary-valid { display: none; }

.password-reveal { position: relative; }
.password-reveal > .form-control { padding-right: 2.75rem; }
.password-reveal-toggle {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; padding: 0;
  color: var(--brand-ink-soft); background: transparent; border: 0; border-radius: .375rem;
}
.password-reveal-toggle:hover { color: var(--brand-ink); background: var(--brand-paper); }
.password-reveal-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(var(--brand-accent-rgb), .35); }
.password-reveal-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-reveal input::-ms-reveal, .password-reveal input::-ms-clear { display: none; }

.report-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.form-text-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Image responses */
.response-image-card { max-width: 52rem; }
.response-image-preview {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 32rem;
  object-fit: contain; background: var(--brand-paper); border: 1px solid var(--brand-border); border-radius: .5rem;
}
.response-image-preview-editor { max-height: 20rem; }
.response-image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .75rem; }
.response-image-meta { display: block; color: var(--brand-ink-soft); font-size: .875rem; overflow-wrap: anywhere; }

/* Client documents */
.client-document-filename { overflow-wrap: anywhere; color: var(--brand-ink-soft); }

/* Numerical response charts */
.chart-list { display: grid; gap: 1.25rem; }
.combined-chart-options { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.combined-chart-options .form-check { min-width: 12rem; }
.combined-chart-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.combined-chart-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.combined-chart-swatch { display: inline-block; width: 1.5rem; height: .25rem; border-radius: .25rem; flex: none; }
.numerical-chart-card { overflow: hidden; border-color: var(--brand-border); }
.numerical-chart-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem .85rem; background: var(--brand-surface); border-bottom-color: var(--brand-border);
}
.chart-question-type {
  margin-bottom: .2rem; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); font-weight: 400;
}
.chart-response-count {
  flex: 0 0 auto; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); font-weight: 400;
}
.chart-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 .75rem; border-block: 1px solid var(--brand-border); }
.chart-summary > div {
  min-width: 0; padding: .45rem .65rem; border-right: 1px solid var(--brand-border);
}
.chart-summary > div:last-child { border-right: 0; }
.chart-summary dt { color: var(--brand-ink-soft); font-size: max(.75rem, 12px); font-weight: 400; }
.chart-summary dd { margin: .15rem 0 0; color: var(--brand-ink); font-size: 1.1rem; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.numerical-chart-scroll {
  max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: .25rem;
  border: 1px solid var(--brand-border); border-radius: .5rem; background: var(--brand-surface);
}
.numerical-chart-scroll:focus-visible { outline: 3px solid rgba(var(--brand-accent-rgb), .28); outline-offset: 2px; }
.numerical-chart { display: block; width: 100%; min-width: 40rem; height: auto; }
.chart-grid-line { stroke: var(--brand-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis-line, .chart-axis-tick { stroke: #A8B3C2; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.chart-axis-label { fill: var(--brand-ink-soft); font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; }
.chart-axis-label.num { font-family: 'IBM Plex Mono', monospace; }
.chart-axis-label-secondary { fill: var(--brand-ink-faint); font-size: 11px; }
.chart-axis-title { fill: var(--brand-ink-soft); font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.chart-data-line {
  fill: none; stroke: var(--brand-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.chart-data-point {
  fill: var(--brand-surface); stroke: var(--brand-accent); stroke-width: 3;
  vector-effect: non-scaling-stroke; transition: fill .12s ease, stroke-width .12s ease;
}
.chart-data-point:hover, .chart-data-point:focus { fill: var(--brand-accent); stroke-width: 4; outline: none; }
.chart-data-details { margin-top: 1rem; border-top: 1px solid var(--brand-border); padding-top: .85rem; }
.chart-data-details summary { width: fit-content; color: var(--brand-accent); cursor: pointer; font-weight: 600; }
.chart-data-details summary:hover { color: #0B655F; }
.chart-empty-state { padding: .85rem; text-align: center; }
@media (max-width: 575.98px) {
  .numerical-chart-header { align-items: flex-start; flex-direction: column; }
}

/* App shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  --bs-offcanvas-width: 260px;
  width: 260px; flex: 0 0 260px;
  /* !important needed: Bootstrap's own responsive offcanvas reset forces
     background-color: transparent !important once past the lg breakpoint
     (.offcanvas-lg becomes a static, always-visible sidebar there). */
  background: var(--brand-navy-950) !important; color: var(--brand-navy-text) !important;
  border: none;
}
@media (min-width: 992px) {
  .sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; }
}
.sidebar-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 20px 14px; }
.sidebar-inner > .brand, .sidebar-bottom { flex-shrink: 0; }

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--brand-navy-800); display: flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.brand-name { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; }
.brand-sub { color: var(--brand-navy-text-dim); font-size: 11px; margin-top: 1px; }

.nav-label { color: var(--brand-navy-text-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 14px 12px 6px; }
.nav-list {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  /* Keep room for the active marker while only the links scroll. */
  margin-inline: -14px; padding-inline: 14px;
}
.nav-list > * { flex-shrink: 0; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px;
  color: var(--brand-navy-text); font-size: .875rem; font-weight: 500; position: relative;
  text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}
.nav-item svg { flex: 0 0 18px; opacity: .85; }
.nav-item:hover { color: #fff; background: var(--brand-navy-800); }
.nav-item.active { background: var(--brand-navy-800); color: #fff; }
.nav-item.active svg { opacity: 1; color: var(--brand-accent); }
.nav-item.active::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--brand-accent); }

.sidebar-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--brand-navy-800); display: flex; flex-direction: column; gap: 8px; }
.profile-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; text-decoration: none; border-radius: 7px; }
.profile-row:hover { background: var(--brand-navy-800); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-accent); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.profile-name { color: #fff; font-size: 13px; font-weight: 600; }
.logout-item { color: var(--brand-navy-text-dim); }
.logout-item:hover { color: #fff; }

/* Main column */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { flex: 0 0 auto; display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--brand-border); background: var(--brand-surface); }
.icon-btn { border: none; background: none; padding: 6px; border-radius: 6px; color: var(--brand-ink-soft); display: inline-flex; }
.icon-btn:hover { background: var(--brand-paper); }
.content { flex: 1; padding: 28px 40px 40px; }
@media (max-width: 575.98px) { .content { padding: 20px 16px 32px; } }

/* Shared compact page styles */
.portal-page { --bs-border-radius: .35rem; --bs-border-radius-sm: .25rem; font-size: max(.85rem, 13px); }
:where(.portal-page) h1 { margin-bottom: .9rem; font-size: 1.5rem; font-weight: 600; overflow-wrap: anywhere; }
:where(.portal-page) h2, :where(.portal-page) .h2, :where(.portal-page) .h3, :where(.portal-page) .h4 { font-size: .95rem; font-weight: 600; }
:where(.portal-page) h3, :where(.portal-page) .h5, :where(.portal-page) legend { font-size: max(.85rem, 13px); font-weight: 500; }
:where(.portal-page) p { margin-bottom: .65rem; }
.portal-page .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: max(.8rem, 12px); --bs-btn-border-radius: .3rem; }
.portal-page .form-control, .portal-page .form-select { min-width: 0; padding: .3rem .6rem; font-size: max(.85rem, 13px); }
.portal-page .form-select { padding-right: 2rem; background-position: right .6rem center; }
.portal-page .form-label { margin-bottom: .3rem; font-size: max(.8rem, 12px); }
.portal-page .form-text, .portal-page .small, .portal-page small { font-size: max(.75rem, 12px); }
.portal-page .password-reveal > .form-control { padding-right: 2.5rem; }
.portal-page input[type="file"]::file-selector-button { padding: .3rem .6rem; margin: -.3rem .6rem -.3rem -.6rem; }
.portal-page .card { --bs-card-spacer-y: .75rem; --bs-card-spacer-x: .85rem; --bs-card-cap-padding-y: .55rem; --bs-card-cap-padding-x: .85rem; --bs-card-cap-bg: transparent; border-color: var(--brand-border); box-shadow: none; }
.portal-page .card-header { font-weight: 500; }
.portal-page .alert { --bs-alert-padding-y: .65rem; --bs-alert-padding-x: .85rem; }
.portal-page .table { --bs-table-bg: transparent; --bs-table-border-color: var(--brand-border); margin-bottom: .75rem; }
.portal-page .table > :not(caption) > * > * { padding: .5rem .6rem; vertical-align: middle; overflow-wrap: anywhere; }
.portal-page .table th { color: var(--brand-ink-soft); font-size: max(.75rem, 12px); font-weight: 500; }
.portal-page .table code { overflow-wrap: anywhere; }
.portal-page .table .btn { margin: .1rem .15rem .1rem 0; }
:where(.portal-page) dt { color: var(--brand-ink-soft); font-size: max(.8rem, 12px); font-weight: 500; }
:where(.portal-page) dd { margin-bottom: .6rem; overflow-wrap: anywhere; }
.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .65rem 1rem; margin-bottom: 1rem; }
.page-header h1 { margin: 0; }
.page-header > div { min-width: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem; max-width: 100%; }
.page-form { max-width: 64rem; }
.page-search { max-width: 32rem; }
.page-panel { margin-bottom: 1rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: .35rem; background: var(--brand-surface); }
.page-panel h2 { margin-bottom: .65rem; }
.page-filter { align-items: end; }
.page-filter > .col { flex: 1 1 12rem; }
.page-filter > .col-auto { flex: 0 0 auto; }
.page-filter label { margin-bottom: .3rem; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
.page-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .65rem; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
.record-list { margin-bottom: 1rem; border-top: 1px solid var(--brand-border); }
.record-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--brand-border); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
a.record-row:hover { color: inherit; background: var(--brand-surface); }
a.record-row:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.record-summary { flex: 1 1 18rem; min-width: 0; }
.record-summary h2, .record-summary h3 { margin: 0 0 .2rem; font-size: max(.85rem, 13px); font-weight: 500; }
.record-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: .2rem 0 0; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
.record-meta > * { min-width: 0; overflow-wrap: anywhere; }
.record-description { margin: .25rem 0 0; color: var(--brand-ink-soft); }
.response-question { min-width: 0; padding: .75rem 0; margin: 0 0 .75rem; border-bottom: 1px solid var(--brand-border); }
.response-question legend { float: none; margin-bottom: .5rem; }
.response-answer { margin-bottom: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--brand-border); }
.response-answer h2 { margin-bottom: .4rem; }
.form-builder-question { padding: .85rem 0; border-bottom: 1px solid var(--brand-border); }
.employee-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1.5rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--brand-border); }
.employee-summary dt, .employee-summary dd { margin-bottom: .2rem; }
.employee-admin { max-width: 42rem; }
.employee-admin .input-group { margin-bottom: .65rem; }
@media (max-width: 575.98px) {
  .employee-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header { align-items: flex-start; }
  .record-summary { flex-basis: 100%; }
}

/* Diary and client notes */
.communication-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.appointment-form .form-select, .appointment-form .form-control { min-width: 0; }
.appointment-form [data-participant-list] span { min-width: 0; overflow-wrap: anywhere; }
.appointment-time-fields { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .5rem; }
.diary-calendar-container { min-width: 0; }
.diary-calendar { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--brand-surface); }
.diary-calendar th { padding: .4rem; text-align: right; font-size: .75rem; font-weight: 500; color: var(--brand-ink-soft); overflow-wrap: anywhere; }
.diary-calendar th abbr { text-decoration: none; }
.diary-day { height: 7rem; padding: .3rem; vertical-align: top; border: 1px solid var(--brand-border); }
.diary-date { display: block; width: 1.5rem; margin: 0 0 .2rem auto; text-align: center; font-size: .75rem; line-height: 1.5rem; }
.diary-other-month { background: var(--brand-paper); }
.diary-other-month .diary-date { color: var(--brand-ink-faint); }
.diary-today .diary-date { background: var(--brand-accent); color: #fff; border-radius: 50%; }
.diary-event { display: block; margin-bottom: .25rem; padding: .2rem .3rem; border-left: 2px solid var(--brand-accent); border-radius: 2px; background: var(--brand-paper); color: var(--brand-ink); text-decoration: none; font-size: .7rem; line-height: 1.35; overflow-wrap: anywhere; }
.diary-event > span { display: block; }
.diary-event-time { font-weight: 600; }
.diary-event-location { color: var(--brand-ink-soft); }
.diary-event:hover, .diary-event:focus-visible { background: var(--brand-border); color: var(--brand-ink); }
.diary-state-Complete { border-color: #39764b; }
.diary-state-ClientDidNotAttend, .diary-state-EmployeeDidNotAttend { border-color: #a15433; }
@media (max-width: 575.98px) {
  .diary-calendar th, .diary-day { padding: .15rem; }
  .diary-event { padding: .15rem; }
}
.diary-appointment { color: inherit; overflow-wrap: anywhere; }
.diary-appointment:hover, .diary-appointment:focus-visible { border-color: var(--brand-accent); color: inherit; }

/* Compact dashboard */
.dashboard { display: grid; gap: 1.5rem; }
.dashboard-title { margin: 0; font-size: 1.5rem; font-weight: 600; }
.dashboard-overview, .dashboard-feeds { display: grid; gap: 1.5rem; min-width: 0; }
.dashboard-section { min-width: 0; }
.dashboard-section h2 { margin: 0 0 .65rem; font-size: .9rem; font-weight: 600; }
.dashboard-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .65rem; }
.dashboard-section-heading h2 { margin: 0; }
.dashboard-caption { margin: 0 0 .65rem; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
.dashboard-metrics { display: grid; gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--brand-border); border-radius: .35rem; background: var(--brand-border); }
.dashboard-metrics-personal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-metrics-organisation { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dashboard-metrics-categories { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dashboard-metrics-outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .85rem; }
.dashboard-metric { min-width: 0; padding: .65rem .75rem; background: var(--brand-surface); }
.dashboard-metric dt { color: var(--brand-ink-soft); font-size: max(.75rem, 12px); font-weight: 400; overflow-wrap: anywhere; }
.dashboard-metric dt a { color: inherit; text-decoration: none; }
.dashboard-metric dt a:hover { color: var(--brand-accent); text-decoration: underline; }
.dashboard-stat-value { margin: .3rem 0 0; color: var(--brand-ink); font-size: 1.25rem; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.dashboard-metrics-categories .dashboard-metric { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dashboard-metrics-categories .dashboard-stat-value { margin: 0; font-size: 1rem; }
.dashboard-range { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .4rem; }
.dashboard-range label { display: flex; align-items: center; gap: .4rem; min-width: 0; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
.dashboard-range input { width: 9rem; min-width: 0; }
.dashboard-text-link, .dashboard-quick-links { font-size: max(.8rem, 12px); }
.dashboard-empty { margin: 0; padding: .75rem 0; border-top: 1px solid var(--brand-border); color: var(--brand-ink-soft); font-size: .8rem; }
.dashboard-outcome-list, .dashboard-activity-list { border-top: 1px solid var(--brand-border); }
.dashboard-outcome, .dashboard-activity { padding: .65rem 0; border-bottom: 1px solid var(--brand-border); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.dashboard-outcome:hover, .dashboard-activity:hover { background: var(--brand-surface); color: inherit; }
.dashboard-outcome:focus-visible, .dashboard-activity:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.dashboard-outcome { display: grid; grid-template-columns: minmax(5.5rem, .9fr) minmax(0, 2fr) minmax(5rem, 1fr); grid-template-areas: "when who state"; align-items: center; gap: .75rem; font-size: max(.8rem, 12px); }
.dashboard-outcome-time { grid-area: when; font-size: max(.75rem, 12px); }
.dashboard-outcome-time span { display: block; color: var(--brand-ink-soft); }
.dashboard-outcome-details { grid-area: who; min-width: 0; }
.dashboard-outcome-details .dashboard-caption { margin: .15rem 0 0; }
.dashboard-outcome-state { grid-area: state; text-align: right; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
.dashboard-activity { display: block; }
.dashboard-activity-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; font-size: max(.8rem, 12px); }
.dashboard-activity-title strong { min-width: 0; font-weight: 500; }
.dashboard-activity-kind { color: var(--brand-ink-soft); font-size: max(.7rem, 12px); }
.dashboard-activity-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem .75rem; margin-top: .2rem; color: var(--brand-ink-soft); font-size: max(.7rem, 12px); }
.dashboard-activity-meta time { white-space: nowrap; }
.dashboard-shortcuts { padding-top: 1rem; border-top: 1px solid var(--brand-border); }
.dashboard-quick-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.dashboard-quick-links a { text-decoration: none; }
.dashboard-quick-links a:hover { text-decoration: underline; }
@media (min-width: 1200px) {
  .dashboard-overview.has-organisation { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
  .dashboard-feeds.has-appointments { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 1199.98px) {
  .dashboard-metrics-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .dashboard { gap: 1.25rem; }
  .dashboard-metrics-organisation, .dashboard-metrics-categories, .dashboard-metrics-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-metric { padding: .55rem .6rem; }
  .dashboard-outcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "when state" "who who"; gap: .25rem .75rem; }
}

/* Compact client details */
.client-detail { display: grid; gap: 1.5rem; font-size: max(.85rem, 13px); }
.client-profile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem 1.5rem; }
.client-profile-main { flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere; }
.client-profile h1 { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 600; }
.client-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--brand-ink-soft); font-size: max(.8rem, 12px); }
.client-meta a { text-decoration: none; }
.client-meta a:hover { text-decoration: underline; }
.client-status { color: var(--brand-accent); font-weight: 500; }
.client-address { margin: .3rem 0 0; color: var(--brand-ink-soft); font-size: max(.8rem, 12px); }
.client-section { min-width: 0; }
.client-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .65rem; }
.client-section h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.client-section h3 { margin: 0; font-size: max(.85rem, 13px); font-weight: 500; overflow-wrap: anywhere; }
.client-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem; max-width: 100%; font-size: max(.8rem, 12px); }
.client-actions form { margin: 0; }
.client-actions a:not(.btn) { text-decoration: none; }
.client-actions a:not(.btn):hover { text-decoration: underline; }
.client-detail .btn-sm { --bs-btn-font-size: max(.8rem, 12px); }
.client-assignment-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.client-assignment-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; margin: 0; list-style: none; }
.client-assignment-list li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.client-assignment-list li > span { overflow-wrap: anywhere; }
.client-assignment-form { display: flex; align-items: center; gap: .5rem; width: 22rem; max-width: 100%; }
.client-assignment-form select { min-width: 0; }
.client-inline-form { margin-bottom: .75rem; padding: .85rem; border: 1px solid var(--brand-border); border-radius: .35rem; background: var(--brand-surface); }
.client-inline-form h3 { margin-bottom: .75rem; }
.client-inline-form .form-label { margin-bottom: .3rem; }
.client-inline-form .form-control, .client-inline-form .form-select { min-width: 0; }
.client-inline-form .form-text { font-size: max(.75rem, 12px); }
.client-date-field { max-width: 14rem; }
.client-empty { margin: 0; color: var(--brand-ink-soft); font-size: max(.8rem, 12px); }
.client-records { border-top: 1px solid var(--brand-border); }
.client-record { padding: .65rem 0; border-bottom: 1px solid var(--brand-border); }
.client-record-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.client-record-summary { flex: 1 1 18rem; min-width: 0; }
.client-record-meta { display: flex; flex-wrap: wrap; gap: .15rem .75rem; margin-top: .2rem; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
.client-record-meta > span { min-width: 0; overflow-wrap: anywhere; }
.client-record-author { color: var(--brand-ink-soft); font-size: max(.75rem, 12px); font-weight: 400; }
.client-record-content { margin-top: .65rem; padding: .75rem; border: 1px solid var(--brand-border); border-radius: .25rem; background: var(--brand-surface); overflow-wrap: anywhere; }
.client-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .65rem; color: var(--brand-ink-soft); font-size: max(.75rem, 12px); }
@media (max-width: 575.98px) {
  .client-detail { gap: 1.25rem; }
  .client-profile-main { flex-basis: 100%; }
  .client-record-summary { flex-basis: 100%; }
  .client-inline-form { padding: .65rem; }
}

/* Auth split-screen layout (Pages/Shared/_AuthLayout.cshtml) */
.auth-screen { display: flex; min-height: 100vh; }
.auth-brand-panel {
  width: 34%; flex: 0 0 34%; min-width: 280px; background: var(--brand-navy-950);
  padding: 32px; display: flex; flex-direction: column; justify-content: space-between;
}
.brand-mark-lg { width: 42px; height: 42px; border-radius: 9px; background: var(--brand-navy-800); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.auth-title { color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; }
.auth-tagline { color: var(--brand-navy-text); font-size: 14px; line-height: 1.55; max-width: 340px; margin: 0; }
.trust-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-icon { width: 27px; height: 27px; border-radius: 8px; background: var(--brand-navy-800); display: flex; align-items: center; justify-content: center; flex: 0 0 27px; color: var(--brand-accent); }
.trust-text { color: var(--brand-navy-text); font-size: 12.5px; line-height: 1.4; padding-top: 4px; }
.trust-text strong { color: #fff; display: block; font-size: 13px; font-weight: 600; margin-bottom: 1px; }
.auth-footer { color: var(--brand-navy-text-dim); font-size: 12px; }
.auth-form-panel { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 28px 24px; }
.auth-form-box { width: 100%; max-width: 360px; }
.auth-heading { font-size: 21px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.01em; }
.auth-subheading { color: var(--brand-ink-soft); font-size: 13px; margin: 0 0 18px; }
.auth-helper-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--brand-border); font-size: 12px; color: var(--brand-ink-soft); line-height: 1.5; text-align: center; }
@media (max-width: 767.98px) { .auth-brand-panel { display: none; } }