/* ── 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-dark: var(--navy-800);
    --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;

    /* 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. */
.alert-brand-error {
    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;
}
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);
}

/* 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) ─────────────────────────────────────────── */
.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    max-width: 740px;
}

.unit-card {
    font-family: inherit;
    width: 100%;
    text-align: left;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--bh-navy);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.15rem 0.9rem;
    cursor: pointer;
    transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}

.unit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(27, 55, 87, .13);
    border-color: var(--bh-sienna);
}

.unit-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--bh-sienna-rgb), .4);
}

.unit-card-acute {
    border-left-color: var(--bh-sienna);
}

.unit-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.unit-code {
    background: var(--bh-navy);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .15rem .55rem;
    border-radius: 6px;
}

.unit-card-acute .unit-code {
    background: var(--bh-sienna);
}

.unit-count {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--bh-mint-tint);
    color: var(--bh-navy-darker);
    font-size: .75rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.unit-card-acute .unit-count {
    background: rgba(var(--bh-sienna-rgb), .12);
    color: var(--bh-sienna-dark);
}

.unit-name {
    margin-top: .7rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bh-navy);
}

.unit-open {
    margin-top: .85rem;
    font-size: .82rem;
    color: var(--bh-navy);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.unit-card:hover .unit-open {
    color: var(--bh-sienna);
}

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) ───────────────────────────── */
.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;
}
.section-head-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.section-head-actions .btn {
    white-space: nowrap;
}

/* Prominent, clean quick-action pills under the page head (e.g. register patient,
   recent discharges, record cancellation). More visible than the quiet sublinks,
   without competing with the primary header button. */
.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: -.25rem 0 1.5rem;
}
.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);
}
/* The cancellation pill reads in the coral accent so it's distinct from the
   routine register / discharges actions. */
.quick-action--alt {
    color: var(--bh-sienna-dark);
}
.quick-action--alt svg {
    color: var(--bh-sienna);
}
.quick-action--alt:hover {
    color: var(--bh-sienna-dark);
    border-color: var(--bh-sienna);
}
.quick-action--alt:hover svg {
    color: var(--bh-sienna);
}

/* 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;
}

/* 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);
}
.page-head--sticky + .quick-actions {
    margin-top: .85rem;
}
@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); }

/* 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(--bh-navy-100, #d4dce4);
    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(--coral-600); }
.chip--success { background: var(--success-50); color: var(--success); }
.chip--info    { background: var(--info-50); color: var(--info); }
/* Amber "needs attention" pill, distinct from the coral alert tone. */
.chip--flag    { background: #FBEED2; color: #9A6B0F; }

/* Colorectal (CRS) classification badge: a clickable chip that opens a
   pick-list menu of the fixed class options (ColorectalClassBadge.razor). */
.crs-class { position: relative; display: inline-flex; }
.crs-class-chip { border: none; cursor: pointer; font: inherit; font-size: .75rem; }
.crs-class-chip:hover { filter: brightness(.96); }
.crs-class-backdrop { position: fixed; inset: 0; z-index: 1049; }
.crs-class-menu {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    z-index: 1050;
    min-width: 17rem;
    max-height: 22rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--bh-navy-100, #d4dce4);
    border-radius: var(--radius-md, .5rem);
    box-shadow: 0 8px 24px rgba(16, 42, 67, .18);
    padding: .3rem;
}
.crs-class-menu-head {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--navy);
    padding: .3rem .55rem .2rem;
}
.crs-class-menu-sep { border-top: 1px solid var(--bh-navy-100, #e3e9ef); margin: .25rem 0; }
.crs-class-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    font-size: .8rem;
    padding: .3rem .55rem;
    border-radius: .35rem;
    cursor: pointer;
    white-space: normal;
}
.crs-class-item:hover { background: var(--pale-blue); }
.crs-class-item.is-current { background: var(--info-50); color: var(--info); font-weight: 600; }

/* 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(--bh-navy-100, #d4dce4);
    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); }
/* 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; }
.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; }
/* 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); }

/* 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; }
}

@container (max-width: 620px) {
    .list-card--stack .col-consultant { display: none; }
    .list-card--stack .meta-consultant { display: inline; }
}

.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; }
.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) ──────────────────────── */
.review-banner {
    background: rgba(var(--bh-sienna-rgb), .06);
    border: 1px solid rgba(var(--bh-sienna-rgb), .25);
    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 { max-width: 920px; }
.cfs-card--due {
    background: rgba(var(--bh-sienna-rgb), .06);
    border: 1px solid rgba(var(--bh-sienna-rgb), .25);
}

/* 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 {
    background: rgba(var(--bh-sienna-rgb), 0.12);
    border: 1px solid rgba(var(--bh-sienna-rgb), 0.4);
    color: var(--bh-sienna-dark);
    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; }
}
/* ── Embedded risk-calculator report (PDF.js) on the risk assessment page ── */
.risk-report-pdf {
    max-height: 640px;
    overflow: auto;
    background: var(--grey-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px;
    text-align: center;
}

.risk-report-pdf .pdf-page {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background: #fff;
}

/* ── 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;
}


/* Danger chip (declined requests) — same recipe as the Peninsula build. */
.chip--danger  { background: var(--danger-50); color: var(--danger); }

/* ── 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);
}

.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;
}

/* ── 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;
}

/* ── 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; }
}

/* 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). Pages are sized by
   pdf-viewer.js (fit-to-width, hi-dpi backing store); this is only the frame. */
.pdf-container {
    height: calc(100vh - 9rem);
    overflow: auto;
    background: var(--navy-800);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.pdf-container .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;
}