/* ── Bayside Health design system bridge ──────────────────────────
   The full token set lives in css/design-tokens.css (navy #1B3757,
   coral #E97051, teal #A8DBDD, cream #F5FBF1, ramps, radii, shadows).
   Here we re-map the app's original --bh-* names onto those tokens so
   every existing usage re-skins automatically. Fonts: Hanken Grotesk
   (display) + Source Sans 3 (body), self-hosted via css/fonts.css. */
:root {
    --bh-navy: var(--navy);          /* #1B3757 — primary */
    --bh-navy-darker: var(--navy-900);
    --bh-mint: var(--teal);          /* #A8DBDD — soft supporting */
    --bh-mint-tint: var(--teal-50);
    --bh-sienna: var(--coral);       /* #E97051 — primary accent */
    --bh-sienna-dark: var(--coral-600);
    --bh-sienna-rgb: 233, 112, 81;
    --bh-ink: var(--ink);
    --bh-muted: var(--text-muted);
    --bh-bg: var(--cream);
    --bh-hairline: #eef2f5;          /* row dividers inside cards; lighter than --border-subtle */

    /* Coral CTA tuned a shade darker (#d85a3c) so white text clears AA on
       large/bold; primary buttons + key calls-to-action use this. */
    --bh-cta: var(--coral-600);
    --bh-cta-hover: #c14e30;
    /* Coral text on the coral-50 chip tint: coral-600 is only 3.4:1 there, this
       deeper shade is ~5:1 (AA for small text) while still reading as coral. */
    --bh-alert-ink: #b0452a;

    /* feed the brand into Bootstrap's theme tokens */
    --bs-primary: var(--navy);
    --bs-primary-rgb: 27, 55, 87;
    --bs-link-color: var(--blue);
    --bs-link-color-rgb: 60, 124, 194;
    --bs-link-hover-color: var(--blue-600);
    --bs-link-hover-color-rgb: 47, 101, 159;
    --bs-body-font-family: var(--font-body);
    --bs-border-radius: var(--radius-md);
}

html {
    /* Render native controls (datalist/select pop-ups, scrollbars) in light mode
       so they stay legible even when the OS is in dark mode. */
    color-scheme: light;
}

html, body {
    font-family: var(--font-body);
    color: var(--bh-ink);
    background-color: var(--bh-bg);
}

/* Brand-coloured inline validation message — transparent burnt sienna. The
   sign-in page's alert (.auth-alert, with the auth styles) wears the same colours. */
.alert-brand-error, .auth-alert {
    background-color: rgba(var(--bh-sienna-rgb), 0.12);
    border: 1px solid rgba(var(--bh-sienna-rgb), 0.4);
    color: var(--bh-sienna-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--bh-navy);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-snug);
}

/* Heading that scales with its container (not the viewport, which ignores the
   sidebar width) so it stays on a single line without overflowing. */
.fit-heading {
    white-space: nowrap;
    font-size: clamp(1rem, 4cqi, 2.5rem);
}

/* Keep form fields from stretching across the whole screen. Selects size to
   their content (within sensible bounds); text/date inputs cap at a uniform
   width. Textareas keep their own (wider) container width for free text. */
.form-select {
    width: auto;
    min-width: 10rem;
    max-width: 28rem;
}
/* On a phone there is no room to size to the longest option: a Clavien-Dindo grade,
   a composed operation name or a diagnosis runs a select past the right edge of the
   card holding it. Below the small breakpoint every select fills its container
   instead, and the content cap comes off so 100% means 100%. A select that has been
   given a width for its own layout keeps it — those are inline styles, and the two
   pages that fill a grid or flex cell (.review-filters, .help-req-type) say so at
   every width, not just this one. */
@media (max-width: 576px) {
    .form-select {
        width: 100%;
        max-width: 100%;
    }
}
input.form-control {
    max-width: 22rem;
}
/* Date inputs only need to fit a date — size them like the dropdowns. */
input[type="date"].form-control {
    width: auto;
    min-width: 10rem;
}

a {
    color: var(--blue);
}
.btn-link {
    color: var(--bh-navy);
}

a:hover {
    color: var(--blue-600);
    text-decoration: underline;
}

/* Buttons read as pills with a confident weight (design system). */
.btn {
    border-radius: var(--radius-pill);
    font-weight: var(--fw-semibold);
}

/* Primary = coral CTA. */
.btn-primary {
    --bs-btn-bg: var(--bh-cta);
    --bs-btn-border-color: var(--bh-cta);
    --bs-btn-hover-bg: var(--bh-cta-hover);
    --bs-btn-hover-border-color: var(--bh-cta-hover);
    --bs-btn-active-bg: var(--bh-cta-hover);
    --bs-btn-active-border-color: var(--bh-cta-hover);
    --bs-btn-disabled-bg: var(--bh-cta);
    --bs-btn-disabled-border-color: var(--bh-cta);
    color: #fff;
}

/* Secondary = navy outline → navy fill on hover. */
.btn-outline-primary {
    --bs-btn-color: var(--bh-navy);
    --bs-btn-border-color: var(--bh-navy);
    --bs-btn-hover-bg: var(--bh-navy);
    --bs-btn-hover-border-color: var(--bh-navy);
    --bs-btn-active-bg: var(--bh-navy);
    --bs-btn-active-border-color: var(--bh-navy);
}

/* Tertiary / quiet = soft neutral outline (used widely for low-emphasis actions). */
.btn-outline-secondary {
    --bs-btn-color: var(--text-body);
    --bs-btn-border-color: var(--border-default);
    --bs-btn-hover-bg: var(--surface-sunken);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--bh-navy);
    --bs-btn-active-bg: var(--surface-sunken);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-active-color: var(--bh-navy);
}

/* Navy status / confirmation text (replaces Bootstrap success-green) */
.text-brand {
    color: var(--bh-navy) !important;
    font-weight: 500;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: var(--ring-focus);
  border-color: var(--border-focus);
}

/* Keyboard focus ring for the kit's own controls: outside the edge for free-standing
   pills and icon buttons, inside it for tabs and menu items that sit flush with their
   neighbours. (.status-link and .section-fold keep their own variants.) */
.quick-action--ghost:focus-visible, .icon-btn:focus-visible, .suggest-pill:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}
.list-tab:focus-visible, .menu-pop button:focus-visible, .menu-pop a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

/* Form fields: design radius + calm default border (blue focus comes from the rule above). */
.form-control, .form-select {
    border-color: var(--border-default);
    border-radius: var(--radius-md);
}

/* tables & cards pick up subtle brand cues */
.table > thead th {
    color: var(--bh-navy);
    border-bottom-color: var(--bh-navy);
}

.card {
    border-color: var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-title a {
    color: var(--bh-navy);
}

.alert-info {
    --bs-alert-color: var(--bh-navy-darker);
    --bs-alert-bg: var(--bh-mint-tint);
    --bs-alert-border-color: var(--bh-mint);
}

.content {
    padding-top: 1.1rem;
}

/* ── Unit selector (home) ─────────────────────────────────────────── */
/* Head and tile band share one container, capped and centred so wide monitors
   get symmetric margins. It is also the container-query root: the column count
   and the tile anatomy follow the width actually available to the page
   (viewport minus sidebar), so a half-width window behaves like a laptop. */
.unit-select {
    --unit-cols: 4;
    --unit-gap: 1.25rem;
    container: unit-select / inline-size;
    max-width: var(--container-xl);
    margin: 0 auto 1.5rem;
}
.unit-select .page-head { align-items: flex-end; margin-bottom: 1.25rem; }
.unit-select .page-head h1 { font-size: 2.25rem; letter-spacing: var(--tracking-tight); }
.unit-select .page-head p { font-size: 1.02rem; margin-top: .3rem; }

/* Live census pill in the page head: status, not a control. */
.unit-census {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .45rem;
    padding: .45rem 1rem .45rem .85rem;
    border-radius: var(--radius-pill);
    background: var(--teal-50);
    color: var(--text-body);
    font-size: .9rem;
}
.unit-census-item { display: inline-flex; align-items: center; gap: .3rem; }
/* Middle-dot separators between the figures, spaced evenly whatever wraps. */
.unit-census-item + .unit-census-item::before {
    content: "\00b7";
    margin-right: .15rem;
    color: var(--grey-400);
    font-weight: var(--fw-bold);
}
.unit-census strong {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 1.1rem;
    line-height: 1;
    color: var(--bh-navy);
}
.unit-census-live {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-50);
}

/* Current unit (top bar; previewed in Admin → Units): the code as a navy badge (coral
   on the acute unit) with the unit name beside it — the same identity treatment as the tiles on the unit selector. */
.unit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    max-width: 32rem;
    /* Shrink (ellipsised name) before the "Change unit" button when space is tight. */
    flex: 0 1 auto;
}

.unit-badge-code {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    border-radius: 8px;
    background: var(--bh-navy);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(27, 55, 87, 0.18);
}

.unit-badge--acute .unit-badge-code {
    background: var(--coral-600);
}

.unit-badge-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 1rem;
    color: var(--bh-navy);
}

/* Nothing selected yet: a quiet placeholder in the badge's footprint. */
.unit-badge--none {
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    background: var(--bh-mint-tint);
    color: var(--bh-muted);
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Tinted band groups the tiles into one composed object. */
.unit-band {
    background: var(--teal-50);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}
.unit-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;       /* an odd last row sits centred, never orphaned left */
    gap: var(--unit-gap);
}
/* Column count follows the unit count: three units fill the row; 5 or 6 fold
   to 3+2 / 3+3; 7 or 8 to 4+3 / 4+4. */
.unit-tiles:not(:has(> :nth-child(4))) { --unit-cols: 3; }
.unit-tiles:has(> :nth-child(5)) { --unit-cols: 3; }
.unit-tiles:has(> :nth-child(7)) { --unit-cols: 4; }

/* A tile is a three-row grid: badge + expansion, name, foot. The middle row
   takes any spare height, so the foot sits on the same baseline across a row
   of tiles whatever the names wrap to. */
.unit-tile {
    --unit-w: calc((100% - (var(--unit-cols) - 1) * var(--unit-gap)) / var(--unit-cols));
    --tile-rule: var(--bh-navy);
    --tile-badge: var(--bh-navy);
    flex: 0 0 var(--unit-w);
    max-width: var(--unit-w);
    min-width: 0;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: .8rem;
    align-items: start;
    text-align: left;
    font-family: inherit;
    color: var(--text-body);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem 1.25rem 1.25rem;
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
/* Accent rule along the top: navy on the GS units, coral on the acute unit —
   the one colour difference inside identical geometry. */
.unit-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--tile-rule);
}
.unit-tile--acute { --tile-rule: var(--coral-600); --tile-badge: var(--coral-600); }
.unit-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--bh-navy);
}
.unit-tile:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.unit-tile:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus), var(--shadow-md);
}

/* Identity: the unit code as a badge, its expansion beside it, and the full
   unit name (DB name minus the "GS<n> - " prefix) under a hairline. */
.unit-tile-code {
    grid-area: 1 / 1 / 2 / 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .85rem;
    border-radius: 10px;
    background: var(--tile-badge);
    color: #fff;
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: .03em;
    box-shadow: 0 2px 6px rgba(27, 55, 87, .18);
}
.unit-tile-kicker {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    font-size: .7rem;
    font-weight: var(--fw-semibold);
    letter-spacing: .07em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--navy-500);
}
.unit-tile-name {
    grid-area: 2 / 1 / 3 / 3;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: var(--tracking-snug);
    color: var(--bh-navy);
    text-wrap: balance;
}

/* Foot: live census panel (inpatients | consults) + the CTA pill. */
.unit-tile-foot {
    grid-area: 3 / 1 / 4 / 3;
    align-self: end;
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-width: 0;
}
.unit-tile-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: .6rem .9rem;
    border-radius: var(--radius-md);
    background: var(--teal-50);
}
.unit-tile-fig { display: flex; flex-direction: column; min-width: 0; }
.unit-tile-fig + .unit-tile-fig { padding-left: 1rem; border-left: 1px solid var(--teal-300); }
.unit-tile-fig-value {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: 1.85rem;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--bh-navy);
}
/* A zero stays legible but recedes. */
.unit-tile-fig--zero .unit-tile-fig-value { color: var(--grey-400); }
.unit-tile-fig-label {
    margin-top: .25rem;
    font-size: .66rem;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-body);
}
.unit-tile-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .48rem 1rem;
    font-size: .9rem;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    color: var(--bh-navy);
    border: 1.5px solid var(--bh-navy);
    border-radius: var(--radius-pill);
    transition: background-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.unit-tile-open svg { transition: transform var(--dur-fast) var(--ease-standard); }
/* The pill fills with the app's coral CTA on hover/focus (--bh-cta-hover so
   white text clears AA at this size); the whole tile is the button. */
.unit-tile:hover .unit-tile-open,
.unit-tile:focus-visible .unit-tile-open {
    background: var(--bh-cta-hover);
    border-color: var(--bh-cta-hover);
    color: #fff;
}
.unit-tile:hover .unit-tile-open svg { transform: translateX(3px); }

/* Laptops and half-width windows (content column under ~1120px): two across
   with compact tiles. The census panel and the pill share a row and wrap onto
   two lines as soon as the tile is too narrow for both. */
@container unit-select (max-width: 69.99rem) {
    .unit-select .unit-tiles { --unit-cols: 2; }
    .unit-select .page-head { margin-bottom: 1rem; }
    .unit-select .page-head h1 { font-size: 2rem; }
    .unit-band { padding: 1.25rem; }
    .unit-tile { padding: 1.15rem 1.2rem 1.05rem; }
    .unit-tile-code { font-size: 1.3rem; padding: .28rem .75rem; }
    .unit-tile-name { margin-top: .7rem; padding-top: .7rem; font-size: 1.18rem; }
    .unit-tile-foot { margin-top: .9rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; }
    .unit-tile-stat { flex: 1 1 auto; padding: .5rem .8rem; }
    .unit-tile-fig-value { font-size: 1.65rem; }
    .unit-tile-open { flex: 1 1 auto; width: auto; }
}

/* Narrow windows and phones (content column under 640px): one column, badge
   on the left, name and expansion on the right, census + pill beneath. */
@container unit-select (max-width: 39.99rem) {
    .unit-select .unit-tiles { --unit-cols: 1; gap: .8rem; }
    .unit-select .page-head h1 { font-size: 1.8rem; }
    .unit-band { padding: .9rem; border-radius: var(--radius-lg); }
    .unit-tile {
        grid-template-rows: auto auto auto;
        column-gap: .9rem;
        padding: 1rem 1.05rem .95rem;
    }
    .unit-tile-code { grid-area: 1 / 1 / 3 / 2; align-self: start; font-size: 1.2rem; padding: .28rem .7rem; }
    .unit-tile-name { grid-area: 1 / 2 / 2 / 3; margin: 0; padding: 0; border: 0; font-size: 1.1rem; }
    .unit-tile-kicker { grid-area: 2 / 2 / 3 / 3; align-self: start; margin-top: .3rem; }
    .unit-tile-foot { grid-area: 3 / 1 / 4 / 3; margin-top: .85rem; }
}

h1:focus {
    outline: none;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Print views (e.g. ward-round list) — hide the app chrome so only the report prints */
@page {
    size: A4;
    margin: 12mm;
}

@media print {
    .sidebar, .top-row, #blazor-error-ui, .no-print {
        display: none !important;
    }

    .content {
        padding: 0 !important;
    }

    html, body {
        background: #fff !important;
    }
}

/* ── Shared UI kit (card-based refresh) ───────────────────────────── */
/* The unit's list pages are one column — head, tabs, stats, controls and cards
   share the width the cards already have, so nothing on the page is further
   from the list than the list is wide. */
.page-col { max-width: 920px; }
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-head .eyebrow {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bh-muted);
}
.page-head h1 {
    margin-bottom: 0;
}
.page-head-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
/* On narrow screens let the (one or two) header buttons grow to share the row
   evenly so the header reads as one tidy block rather than ragged wrapping. */
@media (max-width: 576px) {
    .page-head-actions {
        width: 100%;
    }
    .page-head-actions .btn {
        flex: 1 1 auto;
        white-space: nowrap;
    }
}

/* Section-level heading row: label left, action buttons right. Wraps on narrow
   screens so the buttons drop under the heading instead of overflowing. */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
/* Where the buttons belong TO the heading rather than to the far side of the page:
   they follow the words after a small gap, so "Operations  + Add" reads as one
   thing. Still wraps under the heading on a phone. */
.section-head--tight {
    justify-content: flex-start;
    gap: .4rem .6rem;
}
.section-head-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.section-head-actions .btn {
    white-space: nowrap;
}

/* Prominent, clean quick-action pills in the unit list's page-head actions (admit,
   sync from EMR, print, record cancellation). More visible than the quiet sublinks. */
.quick-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bh-navy);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.quick-action svg {
    color: var(--bh-muted);
    flex-shrink: 0;
    transition: color .15s ease;
}
.quick-action:hover {
    color: var(--bh-navy);
    border-color: var(--bh-navy);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 10px rgba(27, 55, 87, .1));
}
.quick-action:hover svg {
    color: var(--bh-navy);
}

/* Admit is the primary action of this row — a solid coral pill (same size as the
   others) so it stands out while still sitting inline with them. */
.quick-action--admit {
    color: #fff;
    background: var(--bh-cta);
    border-color: var(--bh-cta);
}
.quick-action--admit svg {
    color: #fff;
}
.quick-action--admit:hover {
    color: #fff;
    background: var(--bh-cta-hover);
    border-color: var(--bh-cta-hover);
}
.quick-action--admit:hover svg {
    color: #fff;
}

/* Ghost variant: a header tool (Sync from EMR, Print, Record cancellation) that
   sits beside the coral Admit pill without competing with it — no border, no
   shadow, the icon and label alone until the pointer arrives. */
.quick-action--ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.quick-action--ghost:hover {
    background: var(--surface-sunken);
    border-color: var(--border-subtle);
    box-shadow: none;
    transform: none;
}

/* ── The unit's lists as tabs (Components/UnitTabs.razor) ─────────── */
/* Current Patients and its siblings are one list seen four ways, so they sit in
   one strip under the page head. The active tab takes the coral rule the sidebar
   gives its active item; the counts are the kit's chips. Wraps on a narrow
   container rather than scrolling — a tab nobody can see is a list nobody
   finds. */
.list-tabs {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-subtle);
    margin: .85rem 0 1rem;
    max-width: 920px;
}
.list-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-body);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.list-tab:hover {
    color: var(--bh-navy);
    background: var(--grey-50);
    text-decoration: none;
}
.list-tab[aria-current="page"] {
    color: var(--bh-navy);
    border-bottom-color: var(--coral-600);
}
.list-tab .chip { font-weight: 600; }
/* Something is owed on that list. */
.list-tab-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--coral-600);
    flex: 0 0 auto;
}

/* One quiet sentence of figures where a strip of KPI tiles used to be: the
   numbers still carry the display face, the words around them don't shout. */
.stat-line {
    font-size: .9rem;
    color: var(--text-body);
    margin: 0 0 1rem;
}
.stat-line b {
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    color: var(--bh-navy);
    font-size: 1.05rem;
    letter-spacing: var(--tracking-tight);
}
.stat-line .sep { color: var(--grey-300); margin: 0 .45rem; }

/* ── The admission page's action row ──────────────────────────────── */
/* One row under the patient's head holding what you DO to the stay: the coral
   Save, the split Discharge, and the quiet ⋯ at the far end. Everything else on
   the page belongs to a section, and sits in that section's own header. */
.action-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-subtle);
    padding: .9rem 0 .85rem;
    margin-bottom: 1rem;
    max-width: 920px;
}
.action-row-end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* A split button: one route people take most days, its siblings behind the
   chevron. The two halves share one pill outline. */
/* The popup hangs off the whole split button, not the chevron alone: on a phone a
   15rem menu pinned to the chevron would run off the right edge of the page. */
.split { display: inline-flex; position: relative; }
.split .menu-wrap { position: static; }
/* Only the INNER edges are squared. Both outer ends keep the pill radius every
   other button in the row has, so the pair reads as one pill with a hairline
   down the middle rather than a pill with a box bolted to it. */
.split > .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.split .menu-summary {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* The halves overlap by exactly their shared border, so the divider is one
       hairline and not two stacked. */
    margin-left: -1px;
    /* A shade more room on the rounded end than on the flat one, so the chevron
       sits optically centred rather than crowding the curve. */
    padding-left: .6rem;
    padding-right: .72rem;
}
/* Whichever half the pointer or the keyboard is on draws its own border — and its
   focus ring, which follows the half's own rounded shape — over its neighbour, so
   the overlap never reads as a doubled edge. */
.split > .btn:first-child:hover,
.split > .btn:first-child:focus,
.split .menu-summary:hover,
.split .menu-summary:focus { position: relative; z-index: 1; }

/* Quiet menu, no JavaScript: a <details> whose summary is an ordinary button.
   The page controls `open` itself, so choosing an item closes it. */
.menu-wrap { position: relative; display: inline-flex; }
.menu-summary { cursor: pointer; list-style: none; }
.menu-summary::-webkit-details-marker { display: none; }
.menu-summary::marker { content: ""; }
.menu-pop {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 15rem;
    z-index: 20;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: .3rem;
}
.menu-pop button, .menu-pop a {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    color: var(--bh-ink);
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: .42rem .6rem;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.menu-pop button:hover, .menu-pop a:hover {
    background: var(--surface-sunken);
    color: var(--bh-navy);
    text-decoration: none;
}
.menu-pop svg { color: var(--bh-muted); flex: 0 0 auto; }
/* Narrow enough that a menu hung off the button's left edge would run off the
   page: hang it off the right edge instead. */
@media (max-width: 560px) {
    .split .menu-pop { left: auto; right: 0; }
}

/* The ⋯ that opens the advanced area: an icon on its own, no box until the
   pointer arrives. */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    color: var(--bh-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--surface-sunken); border-color: var(--border-subtle); color: var(--bh-navy); }
.icon-btn[aria-expanded="true"] { background: var(--surface-sunken); color: var(--bh-navy); }

/* A standing state the record carries — today only "awaiting surgery" — said in
   one line rather than a button and a caption. Navy on the chip's own tint, its
   actions as links so they don't read as another thing to do. */
.status-line {
    display: flex;
    align-items: center;
    gap: .4rem .6rem;
    flex-wrap: wrap;
    max-width: 920px;
    margin: 0 0 .75rem;
    padding: .4rem .9rem;
    background: var(--pale-blue);
    border-radius: var(--radius-pill);
    font-size: .85rem;
    color: var(--navy);
}
/* The dot rides with the first word rather than sitting in the flex row of its
   own, so a bar that wraps on a narrow container doesn't leave it stranded. */
.status-line .status-text { min-width: 0; }
.status-line .status-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .3rem;
    border-radius: 50%;
    background: var(--navy-500);
}
.status-line b { font-weight: 700; }
.status-line .status-sep { color: var(--navy-300); }
.status-line .text-muted { color: var(--bh-muted) !important; }
.status-link {
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}
.status-link:hover { color: var(--blue); text-decoration: underline; }
.status-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 2px; }

/* A question the record raised, in the tint of the state it would create. Not an
   alert: nothing is wrong, nothing is overdue, and leaving it unanswered stops
   nothing — so it must not borrow the colours of something that does. */
.status-ask {
    max-width: 920px;
    margin: 0 0 .75rem;
    padding: .6rem .9rem;
    background: var(--pale-blue);
    border-radius: var(--radius-md, .5rem);
    color: var(--navy);
}
.status-ask .status-ask-text { font-size: .85rem; margin-bottom: .45rem; }

/* A section header's own "+ Add": small, so it reads as part of the heading
   rather than competing with the row it sits above. */
.section-head-actions .btn-add {
    --bs-btn-padding-y: .2rem;
    --bs-btn-padding-x: .7rem;
    --bs-btn-font-size: .82rem;
    gap: .3rem;
    display: inline-flex;
    align-items: center;
}

/* A section with nothing in it: the heading becomes the thing you open, and what
   little there is to say — the empty line and its "+ Add" — waits behind it. The
   heading keeps its own weight so a folded section still reads as a section. */
.section-fold {
    max-width: 920px;
    margin-bottom: .5rem;
}
.section-fold > summary {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    cursor: pointer;
    list-style: none;
    border-radius: 4px;
}
/* The heading's own "+ Add" lives in the summary row, spaced from the words as it is
   on a plain .section-head--tight (.6rem = the summary's gap plus this). The link is
   its own click target, so the pointer over it is the link's, not the summary's. */
.section-fold > summary > .section-head-actions { margin-left: .25rem; cursor: default; }
.section-fold > summary::-webkit-details-marker { display: none; }
.section-fold > summary::marker { content: ""; }
.section-fold > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.section-fold .section-fold-chev {
    color: var(--bh-muted);
    flex: 0 0 auto;
    transition: transform .12s ease;
}
.section-fold[open] .section-fold-chev { transform: rotate(90deg); }

/* Sticky page head: keeps the heading + Print button pinned at the top of the
   content while a long list scrolls underneath. The opaque page-coloured
   background and bottom border let rows slide cleanly under it. */
.page-head--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bh-bg);
    margin-bottom: 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 641px) {
    /* Sit just below the sticky top bar (3.5rem tall) rather than the viewport edge. */
    .page-head--sticky {
        top: 3.5rem;
    }
}

/* The card recipe. The admin hub tiles, empty states and help answers are cards too:
   they compose with it here and their own rules below hold only what differs. */
.app-card, .admin-tool, .empty-state, .help-answer {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.15rem;
}

/* Admin hub — grid of tool tiles. */
.admin-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    max-width: 880px;
}
.admin-tool {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    text-decoration: none;
    color: var(--bh-ink);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.admin-tool:hover {
    border-color: var(--bh-navy);
    box-shadow: 0 8px 20px -14px rgba(27, 55, 87, .6);
    transform: translateY(-1px);
    color: var(--bh-ink);
}
.admin-tool-icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--bh-mint-tint);
    color: var(--bh-navy);
}
.admin-tool-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.admin-tool-title { font-weight: 600; color: var(--bh-navy); }
.admin-tool-desc { font-size: .82rem; color: var(--bh-muted); }

/* Dictionary admin table: fixed columns so the actions stay on screen; long
   synonym/qualifier cells truncate with the full value on hover. */
.dict-table { table-layout: fixed; }
/* Wrap long unbreakable tokens (e.g. "Abdominal/general") so they stay inside
   their column in a narrow window instead of spilling over the next cell. */
.dict-table td, .dict-table th { overflow-wrap: anywhere; }
.dict-table td.trunc, .dict-table th.trunc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Structured qualifier-group editor card. */
.qual-group {
    background: #f8fafb;
    border: 1px solid #e3e9ee;
    border-radius: 10px;
    padding: .6rem .75rem;
    margin-bottom: .5rem;
}

/* Name-template help: calm the inline code and lay out examples + preview tidily. */
.tmpl-help code {
    background: var(--bh-mint-tint);
    color: var(--bh-navy);
    padding: .05rem .35rem;
    border-radius: 4px;
    font-size: .82em;
}
.tmpl-help .tmpl-examples {
    display: grid;
    gap: .2rem;
    margin-top: .35rem;
}
.tmpl-help .arrow { color: var(--bh-muted); margin: 0 .2rem; }

.tmpl-preview {
    display: grid;
    gap: .25rem;
    margin-top: .6rem;
    padding: .5rem .7rem;
    background: var(--bh-mint-tint);
    border-radius: 8px;
}
.tmpl-preview .lbl {
    display: inline-block;
    min-width: 3.5rem;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
}
.tmpl-preview strong { color: var(--bh-navy); }
.app-card--accent { border-left: 4px solid var(--bh-navy); }
.app-card--urgent { border-left: 4px solid var(--bh-sienna); }

.kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
    max-width: 920px;
}
.kpi {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: .75rem .95rem;
}
.kpi-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
}
/* Big confident figure (design "Stat" treatment). */
.kpi-value {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: var(--fw-black);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: var(--bh-navy);
}
.kpi-unit { font-size: .8rem; font-weight: 400; color: var(--bh-muted); }
/* Under the figure: a rate with its denominator ("10.4 % of 48 operated"), and the
   change on the comparison period, coloured by the tile's Polarity — never green for a
   rise that is bad news. */
.kpi-note { font-size: .74rem; color: var(--bh-muted); margin-top: .1rem; }
.kpi-trend { font-size: .72rem; font-weight: 600; color: var(--bh-muted); margin-top: .1rem; }
.kpi-trend--good { color: var(--success); }
.kpi-trend--bad  { color: var(--bh-sienna-dark); }
.kpi-trend--flat { color: var(--bh-muted); }
.kpi-trend--none { font-weight: 400; }
/* The ⓘ beside a KPI label: its title says what the figure counts. */
.kpi-info { margin-left: .3rem; font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--bh-navy); cursor: help; }

/* Dashboard section bands: a titled rule that groups a KPI row with its detail
   cards (Reports page). The events variant is accented to set clinical safety
   figures apart from routine activity. */
.dash-section {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    flex-wrap: wrap;
    margin: 2rem 0 .9rem;
    padding-bottom: .4rem;
    border-bottom: 3px solid var(--bh-navy);
}
.dash-section:first-child { margin-top: .25rem; }
.dash-section h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bh-navy);
    margin: 0;
}
.dash-section--events { border-bottom-color: var(--bh-sienna); }
.dash-section--events h4 { color: var(--bh-sienna-dark); }

/* Qualifier group cluster: boxes a group — its caption and its pills/dropdown —
   where one needs to stand apart (the Left/Right sub-sections of a per-side
   split). Distinct from the admin editors' .qual-group builder boxes. */
.qual-box {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: .35rem .6rem .5rem;
}
.qual-box-caption {
    display: block;
    font-size: 0.72rem;
    line-height: 1.1;
    margin-bottom: .15rem;
}

/* Entry details panel (diagnosis/operation pickers): ONE distinct box gathering
   every qualifier control for the selected entry, so a multi-detail entry (hernia
   site, approach, repair…) reads as a single tidy property card rather than loose
   dropdowns. Seats to the right of the search input in the host's flex row and
   wraps beneath it on narrow windows. Same family as .scope-panel. */
.qual-panel {
    background: var(--surface-tint);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--bh-navy);
    border-radius: 12px;
    padding: .5rem .75rem .6rem;
}
.qual-panel-head {
    font-family: var(--font-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bh-navy);
    margin-bottom: .35rem;
}
.qual-panel-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .45rem 1.1rem;
}
/* White controls read cleanly on the tinted panel; the boxed Left/Right
   sub-sections span the full panel width so a side split stays legible. */
.qual-panel-body .qual-box { flex: 1 1 100%; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}
/* Tonal status pills (design system Badge tones). */
.chip--muted   { background: var(--teal-50); color: #1f6e70; }
.chip--navy    { background: var(--pale-blue); color: var(--navy); }
.chip--alert   { background: var(--coral-50); color: var(--bh-alert-ink); }
.chip--success { background: var(--success-50); color: var(--success); }
.chip--info    { background: var(--info-50); color: var(--info); }
.chip--danger  { background: var(--danger-50); color: var(--danger); }
/* Specialty tag — Thoracic Surgery admissions/consults, audited separately. The
   brand's secondary maroon accent on a light tint of itself, so it reads as a
   category rather than a status and stands apart from the teal/blue/coral chips. */
.chip--thoracic { background: #f4e9ee; color: var(--maroon); font-weight: 600; }

/* A shortlist above a picker: what the unit usually does for this diagnosis, as
   buttons you can press. It sits in the same pale-blue band as the question that
   often precedes it, because it is the same conversation continued — and because
   for most patients the answer is in it, which a muted line of chips over a search
   box did not say. Still not coral: coral is a form's own primary action, and
   pressing one of these only fills the picker underneath. A composed operation
   name is a phrase, not a tag, so these wrap where the kit's chips never do. */
.suggest-band {
    max-width: 920px;
    margin: 0 0 .5rem;
    padding: .7rem .9rem .75rem;
    background: var(--pale-blue);
    border-radius: var(--radius-md, .5rem);
    color: var(--navy);
}
.suggest-band-head {
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.suggest-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.suggest-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 38px;
    /* A composed operation name can be longer than a phone is wide, so the pill
       gives way before the band does: it shrinks to the band and wraps inside
       itself rather than running off the side of the screen. */
    max-width: 100%;
    min-width: 0;
    padding: .35rem .9rem;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    color: var(--navy);
    background: #fff;
    border: 1.5px solid var(--navy-500);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.suggest-pill > span { min-width: 0; }
.suggest-pill:hover { border-color: var(--bh-navy); background: var(--grey-50); }
.suggest-pill.is-chosen {
    background: var(--bh-navy);
    border-color: var(--bh-navy);
    color: #fff;
}
.suggest-pill.is-chosen:hover { background: var(--navy-800); border-color: var(--navy-800); }
.suggest-tick { flex: 0 0 auto; font-size: .9em; line-height: 1; }
/* The way past the shortlist, said once and quietly: the search box below is
   unchanged, and a diagnosis with nothing to suggest shows neither this nor the
   band above it. */
.suggest-or {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 920px;
    margin: 0 0 .4rem;
    font-size: .78rem;
    color: var(--bh-muted);
}
.suggest-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-subtle);
}

/* Prominent scope panel (enhanced reporting): the time period + unit that define
   the primary data request, lifted out of the plain filter rows. */
.scope-panel {
    background: var(--pale-blue);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--bh-navy);
    border-radius: var(--radius-md, .5rem);
    padding: 1rem 1.15rem;
}
.scope-panel .scope-label {
    font-weight: 700;
    color: var(--bh-navy);
    font-size: .95rem;
}
/* Unit choice tiles — a white base so the outline buttons read against the
   tinted scope panel; the selected one takes the coral primary fill. */
.scope-tile {
    font-weight: 600;
}
.scope-tile.btn-outline-primary {
    background: #fff;
}

/* Remove-button inside a removable filter chip (enhanced reporting facets). */
.facet-chip-x {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 1.05rem;
    cursor: pointer;
    color: inherit;
    opacity: .65;
}
.facet-chip-x:hover { opacity: 1; }

.patient-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: .85rem;
    color: var(--bh-muted);
}
.patient-meta .sep {
    color: #c4ccd3;
    margin: 0 .45rem;
}

.avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--bh-mint-tint);
    color: var(--bh-navy-darker);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 600;
}

.list-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    max-width: 920px;
}
.list-head, .list-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem 1rem;
}
.list-head {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
    border-bottom: 1px solid var(--bh-hairline);
}
.list-row {
    border-bottom: 1px solid var(--bh-hairline);
    color: var(--bh-ink);
    text-decoration: none;
    transition: background .1s ease;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: #f7f9fa; }
.list-row-main { flex: 1; min-width: 0; }
/* Single line + ellipsis so a long name clips inside its (possibly squeezed)
   column instead of overflowing on top of the next column. */
.list-row-title { display: block; font-weight: 500; color: var(--bh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row-sub { display: block; font-size: .78rem; color: var(--bh-muted); }
/* One clipped line — a free-text or EMR-scraped diagnosis can run long. */
.list-row-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Diagnosis line on a patient row: ink, so it reads ahead of the muted metadata. */
.list-row-dx { color: var(--bh-ink); }
/* A title that carries status chips: only the name clips, so on a narrow list a long
   name can't push the chips out of sight (a plain title clips the whole line). */
.list-row-title--chips { display: flex; align-items: center; gap: .25rem; }
.list-row-title--chips > .list-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list-row-title--chips > .chip { flex-shrink: 0; }
/* Compact metadata line, only shown when the table columns collapse on narrow screens (see below). */
.list-row-meta { display: none; }
.list-row-chev { color: var(--bh-muted); font-size: 1.1rem; flex-shrink: 0; }
/* Operations/complications carried over from the previous unit before a transfer:
   shown for context but de-emphasised, and excluded from this unit's audit. Used by the
   admission page and its complications page alike. */
.list-row.list-row--prior { opacity: 0.65; background: #f6f8fa; }
.chip--prior {
    background: var(--bh-navy);
    color: #fff;
    align-self: center;
}
.col-date { width: 6.5rem; flex-shrink: 0; }
.col-consultant { width: 11rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-stay { width: 6rem; text-align: right; flex-shrink: 0; }
.col-status { width: 13rem; display: flex; justify-content: flex-end; align-items: center; gap: .3rem; flex-wrap: wrap; }
/* A fixed-width action-button column, used in the header row too, so the fixed columns
   before it line up between the header and the rows (a flex header with a narrow
   placeholder sits its columns further right than rows carrying a real button). */
.col-actions { width: 5.5rem; flex-shrink: 0; text-align: right; }
/* Diagnosis / planned operation / consultant on a virtual ward row: one labelled pair
   per line, so each reads on its own instead of running together with arrows. */
.vw-plan { display: grid; grid-template-columns: max-content 1fr; column-gap: .6rem; row-gap: .1rem; margin: .3rem 0 0; font-size: .8rem; }
.vw-plan dt { font-size: .62rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bh-muted); padding-top: .2em; }
.vw-plan dd { margin: 0; color: var(--bh-ink); min-width: 0; overflow-wrap: anywhere; }
/* A wider action column, for rows whose button carries a verb ("Choose operation")
   rather than the one word .col-actions was sized for. */
.col-actions--wide { width: 10.5rem; }
/* A column heading that sorts the list (awaiting surgery): a link that still reads as
   the heading it replaced, with a small arrow on the column in force. */
.col-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: .25rem; }
.col-sort:hover { color: var(--bh-ink); text-decoration: underline; }
.col-sort.is-active { color: var(--bh-ink); font-weight: 600; }
.col-sort-dir { font-size: .55rem; }
/* A heading inside a list-card that breaks its rows into groups, with the count of
   the rows beneath it. */
.list-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--bh-mint-tint);
    border-bottom: 1px solid var(--bh-hairline);
    font-size: .8rem;
    font-weight: 600;
    color: var(--bh-navy);
}
/* Keep row column text stable on hover (the row is a link, so it would otherwise
   pick up the global a:hover colour). */
.list-row .col-date, .list-row .col-consultant { color: var(--bh-ink); }

/* Complications review page. The filter selects share a grid row, so each fills its
   own column exactly rather than sizing to its longest option (the global .form-select
   rule), which would spill a long procedure name out of the card on a phone. */
.review-filters .form-select { width: 100%; max-width: none; }
/* The table needs enough width for its eight columns to read, inside a
   .table-responsive wrapper that scrolls sideways on a narrow screen. */
.review-table { min-width: 860px; }
.review-table td { vertical-align: top; }

/* Narrow content area: the patient lists carry too many fixed columns to fit, so
   the name (flex) column would otherwise be crushed first. Instead, collapse the
   secondary columns into a sub-line under the name — Admitted first, then
   Consultant — so the name stays visible as long as possible.

   Driven by a container query on .content (see MainLayout.razor.css), so it reacts
   to the real list width (viewport minus the sidebar), not the viewport. Scoped to
   .list-card--stack so other list views are unaffected. */
.meta-consultant { display: none; }

@container (max-width: 760px) {
    .list-card--stack .col-date { display: none; }
    .list-card--stack .list-row-meta { display: block; }
    /* A list whose rows carry a labelled plan block (the virtual ward's diagnosis /
       planned operation / consultant) has no width to spare for a fixed "Waiting"
       column as well — it would squeeze the block down to a character a line. The
       wait moves onto the meta line, which these widths turn on anyway. */
    .list-card--plan .col-stay { display: none; }
    /* Same argument one level in: at these widths a label column of its own leaves
       an operation name breaking mid-word, so the labels sit above their values and
       the whole row's width is the value's. */
    .vw-plan { grid-template-columns: 1fr; row-gap: 0; }
    .vw-plan dt { padding-top: .35em; }
    /* The awaiting list's "Choose operation" button doesn't fit beside a plan block
       this tall at this width — rather than shrink the label, drop it onto its own
       full-width line under the row content, still right-aligned. */
    .list-card--plan .patient-row { flex-wrap: wrap; }
    .list-card--plan .patient-row .col-actions--wide {
        flex: 1 0 100%;
        width: auto;
        margin-top: .5rem;
    }
}

/* A list whose rows carry a line of dictionary names as chips (the risk-outcome
   mapping). A name is a phrase, not a tag, so its chip may wrap inside itself rather
   than run under the action column; and on a narrow list the wide action column
   drops onto its own line under the row instead of squeezing the names to a word. */
.list-card--names .chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }

@container (max-width: 620px) {
    .list-card--stack .col-consultant { display: none; }
    .list-card--stack .meta-consultant { display: inline; }
    .list-card--names .list-row { flex-wrap: wrap; row-gap: .4rem; }
    .list-card--names .col-actions--wide { flex: 1 0 100%; width: auto; text-align: left; }
}

.empty-state {
    padding: 2.5rem 2rem;
    text-align: center;
    color: var(--bh-muted);
    max-width: 920px;
}

/* ── Expandable patient rows (UnitList) ──────────────────────────── */
/* The row splits into a navigating link plus a chevron toggle button so the
   patient can be opened in place without losing the click-through to the
   admission. */
.patient-item { border-bottom: 1px solid var(--bh-hairline); }
.patient-item:last-child { border-bottom: none; }
.patient-item.is-open { background: #f7f9fa; }
.patient-row { padding-right: .5rem; border-bottom: none; }
/* A patient-row that ends in a real button (e.g. "Choose operation"), not the
   chevron toggle the .5rem right padding exists for — the full 1rem back, so
   the row's fixed columns line up under the header's. */
.patient-row--no-toggle { padding-right: 1rem; }
.patient-link {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: 1;
    min-width: 0;
    color: var(--bh-ink);
    text-decoration: none;
}
.patient-link .col-date, .patient-link .col-consultant { color: var(--bh-ink); }
.row-expand {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--bh-muted);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}
.row-expand:hover { background: rgba(0,0,0,.05); color: var(--bh-ink); }
.row-expand-chev {
    font-size: 1.2rem;
    transform: rotate(90deg);
    transition: transform .15s ease;
}
.is-open .row-expand-chev { transform: rotate(-90deg); }

.patient-expand {
    padding: .25rem 1rem 1rem 3.6rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.px-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .5rem 1.25rem;
    margin: 0;
}
.px-summary > div { min-width: 0; }
.px-summary-wide { grid-column: 1 / -1; }
.px-summary dt {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
    font-weight: 600;
    margin: 0;
}
.px-summary dd { margin: 0; color: var(--bh-ink); font-size: .9rem; }
.px-ops-head {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bh-muted);
    font-weight: 600;
    margin-bottom: .35rem;
}
.px-op {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .3rem 0;
    border-top: 1px solid var(--bh-hairline);
}
.px-op-name { color: var(--bh-ink); font-size: .9rem; min-width: 0; }
.px-op-meta { color: var(--bh-muted); font-size: .8rem; flex-shrink: 0; white-space: nowrap; }
.px-empty { color: var(--bh-muted); font-size: .85rem; }

/* ── Discharges-to-review banner (UnitList) ──────────────────────── */
/* Its sienna tint also marks a Clinical Frailty Scale card that is due (below). */
.review-banner, .cfs-card--due {
    background: rgba(var(--bh-sienna-rgb), .06);
    border: 1px solid rgba(var(--bh-sienna-rgb), .25);
}
.review-banner {
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    max-width: 920px;
}
.review-banner-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: var(--bh-sienna-dark);
}

/* Clinical Frailty Scale card (AdmissionDetail) — same width cap as the
   surrounding list-card / empty-state sections; .cfs-card--due takes the review
   banner's tint (above). */
.cfs-card { max-width: 920px; }

/* CFS picker (CfsPicker component): one card per Rockwood level, description visible. */
.cfs-options {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-width: 560px;
}
.cfs-option {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .55rem .8rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.cfs-option:hover {
    border-color: var(--bh-navy);
    box-shadow: 0 1px 4px rgba(27, 55, 87, .10);
}
.cfs-option--selected {
    border-color: var(--bh-sienna-dark);
    background: rgba(var(--bh-sienna-rgb), .07);
}
.cfs-option-score {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    margin-top: .1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bh-navy);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
}
.cfs-option--selected .cfs-option-score { background: var(--bh-sienna-dark); }
.cfs-option-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.cfs-option-title {
    font-weight: 600;
    color: var(--bh-ink);
    line-height: 1.25;
}
.cfs-option-desc {
    font-size: .82rem;
    color: var(--bh-muted);
    line-height: 1.35;
}

/* ── Database maintenance: unmatched-diagnosis rows ──────────────── */
.maint-row {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--bh-hairline);
}
.maint-row:last-child { border-bottom: none; }
.maint-row--done { background: var(--success-50); }
.maint-row-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .45rem;
}
.maint-row--done .maint-row-head { margin-bottom: .25rem; }
.maint-text { font-weight: 500; color: var(--bh-ink); }
.maint-actions, .maint-add {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.maint-search { max-width: 18rem; margin-left: auto; }
.maint-noguess { margin-right: .25rem; }

/* Narrow screens: stack the per-row controls full-width so the match button,
   dictionary search and "+ New" don't wrap into a cramped, ragged row. */
@media (max-width: 640px) {
    .maint-actions, .maint-add { flex-direction: column; align-items: stretch; }
    .maint-actions > .btn, .maint-add > .btn { width: 100%; }
    .maint-search { max-width: none; margin-left: 0; }
    .maint-best { justify-content: center; }
}
.maint-best { display: inline-flex; align-items: center; gap: .4rem; }
.maint-best-label {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .75;
    border-right: 1px solid rgba(255,255,255,.4);
    padding-right: .4rem;
}
.maint-row-resolved {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--success);
    font-size: .9rem;
}
.resolved-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--success-50);
    color: var(--success);
    font-size: .75rem;
}

/* ── Sign-in screen ──────────────────────────────────────────────
   Chromeless, on-brand login with a softly animated aurora backdrop. */
.auth-shell {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    background: radial-gradient(120% 120% at 50% 0%, var(--bh-navy) 0%, var(--bh-navy-darker) 70%);
}

/* Slow-drifting colour blobs behind the card. */
.auth-aurora { position: absolute; inset: 0; z-index: 0; filter: blur(60px); }
.auth-aurora .blob { position: absolute; border-radius: 50%; opacity: 0.55; will-change: transform; }
.auth-aurora .blob-1 {
    width: 38rem; height: 38rem; top: -14rem; left: -10rem;
    background: radial-gradient(circle at 30% 30%, var(--bh-mint), transparent 65%);
    animation: auth-drift-1 22s ease-in-out infinite;
}
.auth-aurora .blob-2 {
    width: 30rem; height: 30rem; bottom: -12rem; right: -8rem;
    background: radial-gradient(circle at 50% 50%, rgba(var(--bh-sienna-rgb), 0.9), transparent 65%);
    animation: auth-drift-2 26s ease-in-out infinite;
}
.auth-aurora .blob-3 {
    width: 24rem; height: 24rem; top: 40%; left: 55%;
    background: radial-gradient(circle at 50% 50%, rgba(168, 219, 221, 0.7), transparent 60%);
    animation: auth-drift-3 30s ease-in-out infinite;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 25rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 2.4rem 2.2rem 1.8rem;
    box-shadow: 0 30px 60px -20px rgba(8, 20, 35, 0.55);
    text-align: center;
}

/* Brand + card rise together; the stack caps the column width. */
.auth-stack {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: auth-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The Peninsula wordmark is the light/reversed version, so it sits straight on
   the dark aurora backdrop above the card — no chip or badge needed. */
.auth-brand {
    width: min(17rem, 72%);
    height: auto;
    display: block;
    margin-bottom: 1.6rem;
    filter: drop-shadow(0 4px 14px rgba(8, 20, 35, 0.45));
}
.auth-title { font-size: 1.4rem; margin: 0; }
.auth-sub { color: var(--bh-muted); margin: 0.15rem 0 1.4rem; font-size: 0.95rem; }

.auth-form { text-align: left; }
.auth-field { margin-bottom: 1rem; }
.auth-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bh-navy);
    margin-bottom: 0.35rem;
}
.auth-field input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1.5px solid #d7dee4;
    border-radius: 10px;
    font-size: 0.98rem;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-field input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring-focus);
}

.auth-submit {
    width: 100%;
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--bh-cta);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.auth-submit:hover {
    background: var(--bh-cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(216, 90, 60, 0.8);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit svg { transition: transform 0.18s ease; }
.auth-submit:hover svg { transform: translateX(3px); }

.auth-alert {
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    font-size: 0.88rem;
    margin-bottom: 1.1rem;
    animation: auth-shake 0.4s ease;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bh-muted);
    font-size: 0.8rem;
    margin: 1.2rem 0;
}
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8ed;
}

.auth-sso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid #d7dee4;
    border-radius: 10px;
    background: #fff;
    color: var(--bh-ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-sso:hover { border-color: var(--bh-navy); box-shadow: 0 6px 16px -10px rgba(27, 55, 87, 0.6); color: var(--bh-ink); }

.auth-foot { margin: 1.5rem 0 0; font-size: 0.75rem; color: var(--bh-muted); }

@keyframes auth-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
@keyframes auth-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4rem, 2.5rem) scale(1.1); }
}
@keyframes auth-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-3.5rem, -2rem) scale(1.12); }
}
@keyframes auth-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-2.5rem, 3rem) scale(0.92); }
}

/* Respect users who prefer no motion: keep the design, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .auth-stack { animation: none; }
    .auth-aurora .blob { animation: none; }
    .auth-submit:hover svg { transform: none; }
}
/* ── Demo-site banner (Demo:Banner=true on hosted demos only) ─────────── */
.demo-banner {
    background: var(--coral-600);
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    padding: 6px 12px;
}

/* Variant for the login screen: the auth shell is a fixed overlay, so the
   banner pins to its top edge instead of flowing above it. */
.demo-banner--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

/* ── Help section (/help): ask box, walkthrough videos, browse, requests ── */
.help-ask { max-width: 860px; }

.help-ask-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.help-ask-row input {
    flex: 1 1 16rem;
    min-width: 0;
}

.help-section-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    margin: 1.5rem 0 0.25rem;
}

.help-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 1100px;
}

.help-video-card video {
    width: 100%;
    border-radius: var(--radius-md, 8px);
    background: #000;
    aspect-ratio: 16 / 9;
}

.help-video-title {
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Single column: an opened topic grows its own card without leaving blank
   holes beside it (a multi-column grid row is as tall as its tallest card). */
.help-browse {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 860px;
}

.help-browse-cat-title {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bh-navy);
    opacity: 0.75;
    margin-bottom: 0.35rem;
}

.help-topic-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.35rem 0.25rem;
    border-radius: 6px;
    font-size: 0.92rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-topic-toggle:hover { background: rgba(0, 0, 0, 0.05); }
.help-topic-toggle--open { font-weight: 600; }

.help-topic-caret {
    display: inline-block;
    width: 1rem;
    color: var(--bh-sienna);
}

/* Answer cards render nested inside the ask box or a category card, so they
   get a flat inset look rather than stacking another floating shadow. */
.help-answer {
    max-width: 800px;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.help-answer-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0.1rem 0 0.35rem;
}

.help-answer-summary { margin-bottom: 0.5rem; }

.help-steps { padding-left: 1.25rem; }
.help-steps li { margin-bottom: 0.3rem; }

.help-tips {
    padding-left: 1.25rem;
    border-left: 3px solid var(--bh-sienna);
    margin-left: 0.1rem;
    list-style: none;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.help-tips li { margin-bottom: 0.25rem; }
.help-tips li::before { content: "Tip: "; font-weight: 600; }

.help-figure { margin: 0.75rem 0; }

.help-figure img {
    max-width: 100%;
    border-radius: var(--radius-md, 8px);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 3px 12px rgba(16, 35, 56, 0.12);
}

.help-answer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.help-answer-video { margin-top: 0.75rem; }

.help-answer-video video {
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-md, 8px);
    background: #000;
    aspect-ratio: 16 / 9;
}

.help-related { margin-top: 0.6rem; }

.help-alts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

/* Request form fields sit side by side and wrap as a unit on narrow screens.
   The global .form-select/.form-control sizing rules (auto/capped widths)
   would let the select spill out of its box here, so both controls fill
   their own flex cell exactly. */
.help-req-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.help-req-type { flex: 1 1 14rem; max-width: 20rem; }
.help-req-term { flex: 2 1 18rem; }

.help-req-type .form-select,
.help-req-term .form-control {
    width: 100%;
    max-width: none;
}

.help-myreq-head {
    font-weight: 700;
    padding: 0.6rem 0.9rem 0.2rem;
}

.help-myreq-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.help-myreq-term { font-weight: 600; }

.help-myreq-note {
    flex-basis: 100%;
    padding-left: 0.1rem;
}

/* ── Floating quick-help (bottom-right chat button + popover panel) ── */
.help-fab {
    position: fixed;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 1040;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    border: none;
    background: var(--coral-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(16, 35, 56, 0.35);
    cursor: pointer;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.help-fab:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 22px rgba(16, 35, 56, 0.42);
}

.help-fab-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.help-fab-panel {
    position: fixed;
    right: 1.4rem;
    bottom: 5.4rem;
    z-index: 1040;
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(70vh, 34rem);
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 12px 40px rgba(16, 35, 56, 0.3);
    overflow: hidden;
}

.help-fab-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: var(--bh-navy);
    color: #fff;
}

.help-fab-title {
    font-weight: 700;
    flex: 1 1 auto;
}

.help-fab-open {
    color: #fff;
    opacity: 0.85;
    font-size: 0.82rem;
    text-decoration: underline;
}

.help-fab-open:hover { opacity: 1; color: #fff; }

.help-fab-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
}

.help-fab-close:hover { opacity: 1; }

.help-fab-body {
    padding: 0.9rem;
    overflow-y: auto;
}

/* The global input cap would stop the ask field filling the panel. */
.help-fab-body .help-ask-row input {
    max-width: none;
}

.help-fab-answer {
    margin-top: 0.5rem;
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
    border-radius: var(--radius-md, 10px);
    padding: 0.75rem 0.9rem;
    font-size: 0.92rem;
}

.help-fab-answer-title {
    font-weight: 700;
    margin: 0.1rem 0 0.3rem;
}

.help-fab-summary { margin-bottom: 0.4rem; }

.help-fab-more {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

@media (max-width: 640.98px) {
    /* Sit above the collapsed-nav toggle comfortably on phones. */
    .help-fab { right: 1rem; bottom: 1rem; }
    .help-fab-panel { right: 1rem; bottom: 4.8rem; }
}

/* ── Admin maintenance: dictionary request queue ── */
.req-row { padding: 0.65rem 0.9rem; border-top: 1px solid rgba(0,0,0,0.06); }
.req-row--resolved { opacity: 0.65; }

.req-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.req-term { font-weight: 600; }

.req-details {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.15rem 0 0.35rem;
}

.req-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

/* A list-card hosting dropdown suggestions (the requests queue's category
   picker) must not clip children below the card edge. Rows are transparent,
   so the rounded corners still read correctly. */
.list-card--overflow { overflow: visible; }

/* PDF.js viewer chrome (ward-round list, report viewer, embedded risk report — all through
   the PdfEmbed component). Pages are sized by pdf-viewer.js (fit-to-width, hi-dpi backing
   store); this is only the frame. */
.pdf-container, .risk-report-pdf {
    overflow: auto;
    background: var(--navy-800);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.pdf-container { height: calc(100vh - 9rem); }
/* The embedded risk-calculator report on the risk assessment page: capped in height
   instead of filling the viewport. */
.risk-report-pdf { max-height: 640px; }
.pdf-container .pdf-page, .risk-report-pdf .pdf-page {
    display: block;
    margin: 0 auto 1.25rem;
    box-shadow: 0 6px 22px rgba(16, 35, 56, 0.45);
    border-radius: 2px;
    background: #fff;
}

/* FormErrors — the one place a form reports validation problems (see Components/FormErrors.razor). */
/* scroll-margin keeps the box clear of the sticky top bar when it scrolls itself into view. */
.form-errors { margin-top: .75rem; margin-bottom: .75rem; scroll-margin-top: 5.5rem; }
.form-errors ul li + li { margin-top: .15rem; }

/* ── Typeaheads (TypeaheadKeys) ─────────────────────────────────────
   The six pickers' listbox rows: the keyboard / hover highlight is the kit's navy on
   pale blue with an inset bar, so the chosen row reads without relying on the grey
   hover tint alone. */
.typeahead-option.is-active,
.typeahead-option.is-active:hover {
    background: var(--pale-blue);
    color: var(--navy);
    box-shadow: inset 3px 0 0 var(--navy);
}
.typeahead-option.is-active .text-muted { color: var(--navy-500) !important; }
[role="combobox"]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

/* Typed text that matched nothing, left in a picker: an amber prompt (attention, not an
   error — nothing is wrong yet) with a "Keep as free text" button big enough to tap.
   No amber token exists in the design system, so the three shades live here. */
.picker-unmatched {
    --picker-amber-bg: #fff4d6;
    --picker-amber-line: #e3ad2f;
    --picker-amber-ink: #5f4200;   /* ≈8:1 on the tint */
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .3rem .4rem .3rem .65rem;
    border: 1px solid var(--picker-amber-line);
    border-radius: var(--radius-md);
    background: var(--picker-amber-bg);
    color: var(--picker-amber-ink);
    font-size: .85rem;
    line-height: 1.3;
}
.picker-keep-free {
    min-height: 2.25rem;
    padding: .25rem .8rem;
    border: 1px solid var(--picker-amber-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--picker-amber-ink);
    font-weight: 600;
}
.picker-keep-free:hover { background: #ffe7a8; color: var(--picker-amber-ink); border-color: var(--picker-amber-ink); }
.picker-keep-free:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}
@media (pointer: coarse) {
    .picker-keep-free { min-height: 44px; }
}

/* Rows whose fixed status/date columns would otherwise crush the title to nothing on a
   phone (the Recorded Operations list: a 13rem chip column + a date left the operation
   name 0px wide at 375px — UX review 2026-11-03, D6). Below 620px the row wraps: the
   title takes the first line beside the chevron, the chips and date flow underneath. */
@container (max-width: 620px) {
    .list-card--wrap .list-row { flex-wrap: wrap; row-gap: .3rem; }
    .list-card--wrap .list-row-main { flex: 1 0 calc(100% - 1.5rem); }
    .list-card--wrap .list-row-title { white-space: normal; }
    .list-card--wrap .col-status { width: auto; flex: 1 1 auto; justify-content: flex-start; }
    .list-card--wrap .col-date { width: auto; margin-left: auto; }
}

/* ── Current Patients as a round tool (UnitList.razor, RoundList.razor) ──────────
   Phase B, package B1. The view bar under the unit's tabs (search, consultant,
   inpatients/consults, sort, group, toggle chips), the handover line, and the
   two-line patient rows. Everything here reacts to the content column's width
   (the .content container, MainLayout.razor.css), not the viewport. */

/* The view bar: one row of controls that wraps, then a row of toggle chips. The
   selects keep their own small width at every size — the phone rule that fills
   every select to 100% would stack five controls one per line here. */
.unit-viewbar {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 920px;
    margin: 0 0 .85rem;
}
.unit-viewbar-controls, .round-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
}
.round-options { margin-top: .6rem; }
.unit-viewbar .form-select, .round-options .form-select {
    width: auto;
    min-width: 0;
    max-width: 14rem;
}
.unit-viewbar-search { flex: 1 1 14rem; min-width: 10rem; }
input.form-control.unit-viewbar-search { max-width: 20rem; }
.unit-viewbar-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.unit-viewbar-clear { font-size: .8rem; margin-left: .25rem; }

/* A chip that is a filter toggle: the kit's chip, as a real button with a border,
   filling navy when on (aria-pressed says the same to a screen reader). */
.chip--toggle {
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-body);
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
}
.chip--toggle:hover { border-color: var(--bh-navy); color: var(--bh-navy); }
.chip--toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.chip--toggle.is-on { background: var(--bh-navy); border-color: var(--bh-navy); color: #fff; }
.chip--toggle .chip-count { font-weight: 500; opacity: .75; }

/* The handover line under the stat line: the stat line's own voice, its figures
   links that narrow the list; a zero stays on the line, greyed. */

/* Patient rows: the bed first, in a fixed column so the list reads down the ward.
   Line 1: the name in full with age/sex, then the flag chips (which wrap rather than
   push the name out of sight); line 2, muted: diagnosis · latest operation. The
   consultant and Day n sit in a quiet column at the right edge, so every row's day
   lines up. */
.unit-row-bed {
    flex: 0 0 5.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bh-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unit-row-bed.is-empty { color: var(--bh-muted); font-weight: 400; }
.list-head .unit-row-bed { font-weight: inherit; color: inherit; }
.unit-row-line1 { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; }
.unit-row-name { font-weight: 500; color: var(--bh-ink); min-width: 0; overflow-wrap: anywhere; }
.unit-row-agesex { color: var(--bh-muted); font-weight: 400; white-space: nowrap; }
.unit-row-chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.unit-row-line2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem; }
.unit-row-line2 .sep { color: var(--grey-300); }
.unit-row-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .1rem;
    font-size: .8rem;
    line-height: 1.25;
    color: var(--bh-muted);
    white-space: nowrap;
    text-align: right;
}
.unit-row-side .unit-row-consultant { color: var(--bh-ink); }
.unit-row-day.is-long { color: var(--bh-alert-ink); font-weight: 600; }

@container (max-width: 620px) {
    /* Phone width: the chips take their own line under the name, the second line
       wraps instead of clipping, and the search box takes the bar's first row. */
    .unit-row-chips { flex-basis: 100%; }
    .unit-row-line2 { white-space: normal; }
    .unit-row-side { font-size: .75rem; }
    /* Phone width: the bed column narrows and the avatar goes, the name takes the room. */
    .unit-row-bed { flex-basis: 3.75rem; }
    .unit-list .avatar { display: none; }
    .unit-viewbar-search { flex-basis: 100%; }
    input.form-control.unit-viewbar-search { max-width: none; }
    /* The unit's tabs scroll sideways in one row rather than wrapping to three. */
    .list-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .list-tab { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Unsaved-entries bar (Components/DraftKeeper.razor) ──────────────
   A status line in coral tint: the form's own entries from before a reload
   or lost connection, offered back. Sits above the form it belongs to. */
.draft-bar {
    background: var(--coral-50);
    color: var(--bh-navy);
    border: 1px solid var(--coral-200);
}
.draft-bar .status-dot { background: var(--bh-cta); }
.draft-bar .draft-bar-note { color: var(--bh-muted); font-size: .8rem; }

/* ── Reduced motion, app-wide ─────────────────────────────────────────
   Anyone who asks the OS for less motion gets none: animations and
   transitions finish at once and nothing loops (the reconnect dialog's
   rejoin rings stand still — see ReconnectModal.razor.css). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}