/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Positioning/color now come from Bootstrap classes on the element itself
   (alert alert-danger position-fixed ...) — this only keeps the framework's
   required default-hidden behavior and the dismiss button's placement. */
#blazor-error-ui[b-1a15px6ty4] {
    display: none;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-1a15px6ty4] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.app-width[b-1a15px6ty4] {
    max-width: var(--app-max-width);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* BL-0549: when the bar does not fit on one line (an iPad, a narrow window) it breaks the same way for every role: the clinic's name, the
   person and Log out on top, the menu below (My phrases, being the person's own, under their name). Left to itself it wrapped wherever it
   ran out of room, leaving Log out or the name alone on the second line. The ::after is the line break. */
@media (max-width: 1199.98px) {
    .nav-bar-row[b-1a15px6ty4]::after {
        content: "";
        order: 1;
        flex-basis: 100%;
    }

    .navbar-nav[b-1a15px6ty4],
    .nav-phrases[b-1a15px6ty4] {
        order: 2;
    }

    .nav-user[b-1a15px6ty4] {
        margin-left: auto;
    }
}

.nav-user[b-1a15px6ty4] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    text-decoration: none;
}

.nav-user:hover .nav-user-name[b-1a15px6ty4] {
    text-decoration: underline;
}

.nav-avatar[b-1a15px6ty4] {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #dfe8ff;
    color: var(--tctmj-primary-darker);
    font-size: 0.8rem;
    font-weight: 700;
}

.nav-logout[b-1a15px6ty4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
}

.nav-logout:hover[b-1a15px6ty4] {
    background: #fff;
    color: var(--tctmj-primary-dark);
}

/* BL-0549: a plain .btn has no focus ring of its own (Bootstrap removes the outline), so the keyboard showed nothing here; white on the blue bar. */
.nav-logout:focus-visible[b-1a15px6ty4] {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-x13nhqfsmt],
.components-reconnect-repeated-attempt-visible[b-x13nhqfsmt],
.components-reconnect-failed-visible[b-x13nhqfsmt],
.components-pause-visible[b-x13nhqfsmt],
.components-resume-failed-visible[b-x13nhqfsmt],
.components-rejoining-animation[b-x13nhqfsmt] {
    display: none;
}

/* :not(.components-reconnect-retrying) on the first-attempt text: Blazor's
   runtime keeps the "show" class present once retrying starts (confirmed
   against a real dropped circuit, not assumed) — without this exclusion,
   "Rejoining the server..." and "Rejoin failed... trying again in N seconds"
   both render at once. Pre-existing in the scaffold's own CSS, just easier to
   spot in a compact toast than it was in a 20rem modal. */
#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-retrying) .components-reconnect-first-attempt-visible[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-retrying[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-failed[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-x13nhqfsmt] {
    display: block;
}

/* ADR 0041: a fixed corner toast, not a centered page-blocking dialog — no
   backdrop, so whatever's already on the page (static-SSR data that doesn't
   depend on this circuit anyway, per ADR 0002) stays fully usable underneath.
   Hidden by default; .reconnect-toast-visible (toggled by ReconnectModal.razor.js
   on Blazor's "show"/"hide" state events) is what actually reveals it. */
#components-reconnect-modal[b-x13nhqfsmt] {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    width: 17rem;
    background-color: var(--bs-body-bg, white);
    color: var(--bs-body-color, #212529);
    padding: 1rem 1.25rem;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-left: 4px solid var(--bs-primary, #0d6efd);
    border-radius: var(--bs-border-radius, 0.5rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

#components-reconnect-modal.reconnect-toast-visible[b-x13nhqfsmt] {
    display: block;
    animation: components-reconnect-toast-slideIn-b-x13nhqfsmt 0.25s ease-out both;
}

/* A genuine failure needing manual action reads as distinct from a routine,
   likely-to-self-resolve "reconnecting" — the border/animation color shifts to
   the app's existing danger token rather than staying primary-blue throughout. */
#components-reconnect-modal.components-reconnect-failed[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-resume-failed[b-x13nhqfsmt] {
    border-left-color: var(--bs-danger, #dc3545);
}

/* Whenever it says "Connection failed" (still retrying, or given up), the whole toast turns a soft red, in the same colours as the
   app's Danger badge (.status-danger, contrast checked), so it can't be mistaken for an ordinary notice. "Rejoining the server..."
   stays neutral: it usually resolves on its own. */
#components-reconnect-modal.components-reconnect-retrying[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-failed[b-x13nhqfsmt],
#components-reconnect-modal.components-reconnect-resume-failed[b-x13nhqfsmt] {
    background-color: #fde3e3;
    color: #8a1c1c;
    border-color: #f5b5b5;
    border-left-color: var(--bs-danger, #dc3545);
}

@keyframes components-reconnect-toast-slideIn-b-x13nhqfsmt {
    0% {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.components-reconnect-container[b-x13nhqfsmt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

#components-reconnect-modal p[b-x13nhqfsmt] {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
}

#components-reconnect-modal button[b-x13nhqfsmt] {
    border: 0;
    background-color: var(--bs-primary, #0d6efd);
    color: white;
    padding: 4px 24px;
    border-radius: var(--bs-border-radius-sm, 0.25rem);
}

    #components-reconnect-modal button:hover[b-x13nhqfsmt] {
        background-color: var(--bs-primary-text-emphasis, #0a58ca);
    }

.components-rejoining-animation[b-x13nhqfsmt] {
    position: relative;
    width: 40px;
    height: 40px;
}

    .components-rejoining-animation div[b-x13nhqfsmt] {
        position: absolute;
        border: 2px solid var(--bs-primary, #0087ff);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-x13nhqfsmt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-x13nhqfsmt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-x13nhqfsmt {
    0% {
        top: 20px;
        left: 20px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 20px;
        left: 20px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 20px;
        left: 20px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 40px;
        height: 40px;
        opacity: 0;
    }
}
/* /Components/Shared/ActionButton.razor.rz.scp.css */
/* BL-0264: the working signal appears only after 0.3 s, so a quick action shows nothing at all. */
.action-running[b-40st3fo7pr],
.action-waiting[b-40st3fo7pr] {
    pointer-events: none;
    animation: action-dim-b-40st3fo7pr 0s linear 0.3s forwards;
}

@keyframes action-dim-b-40st3fo7pr {
    to { opacity: 0.65; }
}

.action-running[b-40st3fo7pr] {
    animation-name: none;
}

.action-spinner[b-40st3fo7pr] {
    display: inline-block;
    margin-right: 0.35rem;
    opacity: 0;
    animation: action-spinner-appear-b-40st3fo7pr 0s linear 0.3s forwards;
}

@keyframes action-spinner-appear-b-40st3fo7pr {
    to { opacity: 1; }
}
/* /Components/Shared/AppFooter.razor.rz.scp.css */
.app-footer[b-2ddlcreel9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.6rem;
    margin: auto auto 0;
    width: 100%;
    padding: 1rem 1rem 2rem;
    max-width: 1140px;
    border-top: 1px solid var(--bs-border-color, #d8e3e5);
    color: var(--bs-secondary-color, #566468);
    font-size: 0.85rem;
}

.app-footer.wide[b-2ddlcreel9] {
    max-width: var(--app-max-width);
}
/* /Components/Shared/AppointmentTimeline.razor.rz.scp.css */
/* BL-0598: the List form, one step per line: tick, step, time, then the time since the step before, in columns that line up. Done steps in
   the text colour with a green tick; steps not reached yet in grey with an open circle. */
.appt-timeline[b-gs217005tz] {
    display: grid;
    grid-template-columns: 1.1rem max-content max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    align-items: baseline;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.appt-step[b-gs217005tz] {
    display: contents;
}

.appt-step-tick[b-gs217005tz] {
    color: #15803d;
    font-weight: 700;
    text-align: center;
}

.appt-step-todo .appt-step-tick[b-gs217005tz],
.appt-step-ends .appt-step-tick[b-gs217005tz] {
    color: var(--tctmj-muted, #5f6f73);
    font-weight: 400;
}

.appt-step-label[b-gs217005tz] {
    font-weight: 600;
}

.appt-step-time[b-gs217005tz] {
    font-variant-numeric: tabular-nums;
}

.appt-step-gap[b-gs217005tz] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--tctmj-muted, #5f6f73);
}

.appt-step-todo .appt-step-label[b-gs217005tz],
.appt-step-todo .appt-step-time[b-gs217005tz] {
    font-weight: 400;
    color: var(--tctmj-muted, #5f6f73);
}

/* The Stage form (the Visit's banner): where it stands now on one line; "Timeline" opens the list under it. */
.appt-stage[b-gs217005tz] {
    font-size: 0.85rem;
}

.appt-stage > summary[b-gs217005tz] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    list-style: none;
    cursor: pointer;
}

.appt-stage > summary[b-gs217005tz]::-webkit-details-marker {
    display: none;
}

.appt-stage-line[b-gs217005tz] {
    font-weight: 600;
}

.appt-stage-toggle[b-gs217005tz] {
    color: var(--bs-link-color, #2b54a5);
    white-space: nowrap;
}

.appt-stage > summary:hover .appt-stage-toggle[b-gs217005tz] {
    text-decoration: underline;
}

.appt-stage-hide[b-gs217005tz],
.appt-stage[open] .appt-stage-show[b-gs217005tz] {
    display: none;
}

.appt-stage[open] .appt-stage-hide[b-gs217005tz] {
    display: inline;
}

/* BL-0601: opened, the list floats over the page just under the stage line, with room of its own: in the banner's narrow middle column it was
   squeezed into one word per line and ran under the buttons, and the banner should not change height. */
.appt-stage[b-gs217005tz] {
    position: relative;
}

.appt-stage .appt-timeline[b-gs217005tz] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 1030;
    width: max-content;
    max-width: min(30rem, calc(100vw - 2rem));
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
    white-space: nowrap;
    background: var(--ui-card, #fff);
    border: 1px solid var(--ui-card-border, #e1e8ee);
    border-radius: var(--ui-radius-sm, 0.5rem);
    box-shadow: 0 0.5rem 1.25rem -0.25rem rgba(36, 48, 51, 0.25);
}

/* The Cells form (the visit history): plain times; an empty one is a dash in grey. */
.appt-cell[b-gs217005tz] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.appt-cell-empty[b-gs217005tz] {
    color: var(--tctmj-muted, #5f6f73);
}
/* /Components/Shared/AttentionBox.razor.rz.scp.css */
/* --- "Needs your attention": still yellow, now a card with its icon and the count as a pill. --- */
.attention-box[b-t3glbncpjz] {
    background: #fffaeb;
    border: 1px solid #f3dc8f;
    border-left: 4px solid #e2b007;
    border-radius: var(--ui-radius);
    padding: 0.9rem 1rem 0.6rem;
    margin-bottom: 1rem;
    box-shadow: var(--ui-shadow);
}

.attention-box-head[b-t3glbncpjz] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.attention-box-icon[b-t3glbncpjz] {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    background: #fdecb3;
    color: #7a5300;
}

.attention-box h2[b-t3glbncpjz] {
    color: #4d3500;
    font-weight: 700;
    margin-top: 0.15rem;
}

.attention-box-count[b-t3glbncpjz] {
    display: inline-block;
    min-width: 1.5rem;
    margin-left: 0.3rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #e2b007;
    color: #2e2000;
    font-size: 0.8rem;
    text-align: center;
}

.attention-box-description[b-t3glbncpjz] {
    color: #6b4a00;
}

.attention-box .table[b-t3glbncpjz] {
    --bs-table-bg: #fff;
    --bs-table-border-color: #f6e6b5;
    border-radius: 0.5rem;
    overflow: hidden;
}
/* /Components/Shared/BookingSteps.razor.rz.scp.css */
/* Booking steps (BL-0153): What / Find a time / Details. */
.booking-steps[b-79yfbc6zwi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    color: var(--tctmj-muted, #5f6f73);   /* BL-0549: #6b7280 was 4.46:1 on the page background, under AA */
}

.booking-steps li.current[b-79yfbc6zwi] {
    color: var(--bs-body-color);
    font-weight: 600;
}

.booking-steps li.done a[b-79yfbc6zwi] {
    color: var(--bs-link-color);
}

.booking-step-number[b-79yfbc6zwi] {
    display: inline-block;
    min-width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.85rem;
}

.booking-steps li.current .booking-step-number[b-79yfbc6zwi] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
/* /Components/Shared/CheckInEmailConsent.razor.rz.scp.css */
.check-in-email-consent[b-xln9958l4d] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--bs-primary);
    background: var(--bs-light);
}
/* /Components/Shared/CollapsiblePanel.razor.rz.scp.css */
/* Styled to match Bootstrap's card look (ADR 0021) using its own CSS variables,
   so it stays consistent if the Bootstrap theme is ever customized. */
/* BL-0502: a white card with a soft shadow, like every other surface (app.css, "Look and feel"). */
.collapsible-panel[b-t3fcvjiphx] {
    border: 1px solid var(--ui-card-border, #e1e8ee);
    border-radius: var(--ui-radius, 0.75rem);
    margin-bottom: 1rem;
    background-color: var(--ui-card, #fff);
    box-shadow: var(--ui-shadow, none);
    overflow: hidden;
}

.collapsible-panel summary[b-t3fcvjiphx],
.collapsible-panel > .panel-summary[b-t3fcvjiphx] {
    /* display:flex (rather than the native list-item default) puts the
       custom .panel-marker glyph below on the same line as the caption,
       vertically centered with it — the native disclosure marker doesn't
       reliably stay inline once the caption row itself needs its own
       layout (context text, right-alignment), so it's replaced outright. */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.8rem 1.1rem;
    font-weight: 600;
    color: var(--ui-heading, #172a3a);
    list-style: none;
    transition: background-color 0.15s;
}

.collapsible-panel summary:hover[b-t3fcvjiphx] {
    background-color: #f7f9fc;
}

.collapsible-panel summary[b-t3fcvjiphx]::-webkit-details-marker {
    display: none;
}

.panel-marker[b-t3fcvjiphx] {
    /* A pure CSS border-triangle, not a Unicode glyph — glyph rendering
       depends on the viewer's font/platform (showed as a missing-glyph box
       in one headless-browser check); a drawn shape always renders. */
    /* BL-0502: a chevron (two borders of a small square, turned), in the clinic's blue. */
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.2rem 0 0.1rem;
    border-right: 2px solid var(--tctmj-primary, #315bb8);
    border-bottom: 2px solid var(--tctmj-primary, #315bb8);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.collapsible-panel[open] > summary .panel-marker[b-t3fcvjiphx] {
    transform: rotate(45deg);
}

.panel-header-row[b-t3fcvjiphx] {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 1rem;
    min-width: 0;
}

.panel-title[b-t3fcvjiphx] {
    /* flex-grow fills the row exactly up to the (fixed-width) Context box,
       the same visual effect as the old justify-content:space-between —
       but keeps a long label from pushing Context's start position around,
       which is what let a fixed-width Context line up into a column. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-context[b-t3fcvjiphx] {
    /* inline-flex so ContextContent's own multiple values (e.g. name + type)
       sit side by side, each free to set its own fixed width for a clean
       column — a plain string Context still renders fine as its single child. */
    display: inline-flex;
    align-items: baseline;
    gap: 0.75rem;
    flex: 0 0 auto;
    font-weight: normal;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875em;
}

.panel-header-actions[b-t3fcvjiphx] {
    flex: none;
    display: flex;
    gap: 0.25rem;
}

.panel-body[b-t3fcvjiphx] {
    padding: 0.25rem 1.1rem 1rem 1.1rem;
    border-top: 1px solid #edf1f5;
}

/* A panel inside a panel (an address slot inside Contact details) sits flat: one shadow per surface. */
.collapsible-panel .collapsible-panel[b-t3fcvjiphx] {
    box-shadow: none;
}

/* BL-0499: a panel that is the only one in its part doesn't fold: no arrow, no pointer, no highlight. */
.collapsible-panel > .panel-summary[b-t3fcvjiphx] {
    cursor: default;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* BL-0511: an empty list says so with a picture and one line on a white card, not a grey sentence lost on the page. */
.empty-state[b-trasblnm5c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 0.75rem 0;
    color: var(--tctmj-muted);
    background: var(--ui-card);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

.empty-state-icon[b-trasblnm5c] {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--tctmj-primary-soft);
    color: var(--tctmj-primary);
}

/* Inside a card that is already there: no second card. */
.empty-state.empty-state-flat[b-trasblnm5c] {
    border: 0;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
}
/* /Components/Shared/EnvironmentBadge.razor.rz.scp.css */
/* BL-0282: one colour per environment; red when the server does not say which it is. */
.env-badge[b-hw4bwcfr0r] {
    display: inline-block;
    margin-left: 0.6rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    vertical-align: middle;
    color: #fff;
    background: #6c757d;
}

.env-local[b-hw4bwcfr0r] { background: #6c757d; }
.env-dev[b-hw4bwcfr0r] { background: #0d6efd; }
.env-qa[b-hw4bwcfr0r] { background: #b45309; }
.env-stage[b-hw4bwcfr0r] { background: #6f42c1; }
.env-notset[b-hw4bwcfr0r] { background: #b02a37; }

/* BL-0546: the test clock is set. A dark orange of its own, so it is never read as the environment's colour. */
.env-clock[b-hw4bwcfr0r] { background: #9a3412; }
/* /Components/Shared/Icon.razor.rz.scp.css */
.app-icon[b-t82101w768] {
    flex: none;
    vertical-align: -0.2em;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* BL-0516: a page's title, its one-line description, and its main buttons on the right (PageHeader). */
.page-header[b-4qpfhnupaf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.page-description[b-4qpfhnupaf] {
    margin: 0.3rem 0 0;
    color: var(--tctmj-muted);
}

.page-header-actions[b-4qpfhnupaf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* /Components/Shared/PatientBanner.razor.rz.scp.css */
.patient-banner[b-qenyc35tsy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    /* BL-0502: a white card with the clinic's blue down its left edge, like the other surfaces. */
    background: var(--ui-card, #fff);
    border: 1px solid var(--ui-card-border, #e1e8ee);
    /* BL-0508: patients in the logo's teal (staff stay blue). */
    border-left: 5px solid var(--tctmj-teal, #108c98);
    border-radius: var(--ui-radius, 0.75rem);
    box-shadow: var(--ui-shadow, none);
}

.patient-banner-avatar[b-qenyc35tsy] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--tctmj-teal-soft, #e6f4f5);
    color: var(--tctmj-teal-dark, #0b6e78);
    font-weight: 700;
}

/* Stays under the top of the window while the page scrolls; the shadow shows it is floating over content. */
.patient-banner-sticky[b-qenyc35tsy] {
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 0.35rem 0.75rem -0.5rem rgba(36, 48, 51, 0.35);
}

.patient-banner-id[b-qenyc35tsy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 1rem;
    min-width: 0;
}

.patient-banner-name[b-qenyc35tsy] {
    font-size: 1.15rem;
    font-weight: 700;
}

.patient-banner-meta[b-qenyc35tsy] {
    color: var(--tctmj-muted, #5f6f73);
    font-size: 0.95rem;
}

.patient-banner-meta strong[b-qenyc35tsy] {
    color: var(--bs-body-color);
}

.patient-banner-status[b-qenyc35tsy] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
}

.patient-banner-actions[b-qenyc35tsy] {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* One slim row on a wide screen: the identity takes what is left, the actions stay on the right. BL-0540: from 1200 px, not 900: on an iPad in
   landscape (1024) the Visit's statuses ran over the patient's name and Finish & Lock off the edge; there it now wraps onto a second row. */
@media (min-width: 1200px) {
    .patient-banner[b-qenyc35tsy] {
        flex-wrap: nowrap;
    }

    /* BL-0601: the patient's name and details keep their full width, never squeezed under the column beside them; the status (the Visit's
       stage, "Last saved") takes what is left and wraps inside it. */
    .patient-banner-id[b-qenyc35tsy] {
        flex: 0 0 auto;
    }

    .patient-banner-status[b-qenyc35tsy] {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
    }

    .patient-banner-name[b-qenyc35tsy],
    .patient-banner-meta[b-qenyc35tsy] {
        white-space: nowrap;
    }

    .patient-banner-actions[b-qenyc35tsy] {
        flex-wrap: nowrap;
    }
}

/* BL-0496: Collapse all / Expand all, at the right, before the page's own buttons. */
.patient-banner-fold[b-qenyc35tsy] {
    margin-left: auto;
}

.patient-banner-fold + .patient-banner-actions[b-qenyc35tsy] {
    margin-left: 0;
}

/* Each button's words on one line ("Collapse all", not "Collapse / all"). */
.patient-banner-fold[b-qenyc35tsy]  .btn {
    white-space: nowrap;
}

/* BL-0540 (owner 2026-10-27): every button in the bar the same height as Collapse all (btn-sm), the page's own buttons included, which had
   the taller touch size (.touch-target). One row of equal buttons; still a comfortable size to tap. */
.patient-banner[b-qenyc35tsy]  .btn {
    min-height: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* A button's label stays on one line (a banner's "Finish & Lock" must not wrap into two). */
.patient-banner-actions[b-qenyc35tsy]  .btn {
    white-space: nowrap;
}
/* /Components/Shared/PatientIdentitySummary.razor.rz.scp.css */
.patient-name[b-0zithd3mqv] {
    font-size: 1.15rem;
    font-weight: 700;
}
/* /Components/Shared/PatientPhotoImage.razor.rz.scp.css */
/* Stands in for .patient-photo when a viewer who may see photos opens a patient with none yet (BL-0196) — same size,
   so the layout doesn't shift once a photo is captured. */
.patient-photo-placeholder[b-g0qk4iozu2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    border-radius: 0.375rem;
    border: 1px dashed var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.patient-photo-placeholder svg[b-g0qk4iozu2] {
    width: 45%;
    height: 45%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.patient-photo-placeholder-caption[b-g0qk4iozu2] {
    font-size: 0.6875rem;
    line-height: 1;
}
/* /Components/Shared/PatientSearchBox.razor.rz.scp.css */
/* About five rows show at once; the rest scroll (BL-0098). */
.results-scroll[b-79jwpopkz9] {
    max-height: 15rem;
    overflow-y: auto;
}

/* The "new patient" row closes the list inside the same box, its radio in the same column as the matches' (BL-0157). It stays in view at the
   foot of the scrolling list. */
.new-patient-row td[b-79jwpopkz9] {
    position: sticky;
    bottom: 0;
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}

.new-patient-row label[b-79jwpopkz9] {
    cursor: pointer;
}
/* /Components/Shared/PatientSelectionPanel.razor.rz.scp.css */
/* The box that holds the matches and the new-patient fields (BL-0157). The matches themselves are drawn by
   PatientSearchBox (its own scoped styles); this only frames them once there are some, and unfolds the new-patient fields inside the frame while
   "This is a new patient" is chosen. Pure CSS (:has on the checked radio), which reaches across the island because it is all one document. */
.patient-box:has(.results-scroll)[b-7a54ygmtbl] {
    border: var(--bs-border-width, 1px) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1rem;
}

.patient-box-details[b-7a54ygmtbl] {
    display: none;
}

.patient-box:has(#patientSelectionNew:checked) .patient-box-details[b-7a54ygmtbl] {
    display: block;
    border-top: var(--bs-border-width, 1px) solid var(--bs-border-color);
    padding: 1rem;
}

/* /Components/Shared/PopupDialog.razor.rz.scp.css */
/* A modal <dialog> holding an iframe (BL-0105, BL-0113). */
.popup-dialog[b-n9ocwng1hl] {
    width: min(44rem, 95vw);
    max-width: none;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
}

.popup-dialog[b-n9ocwng1hl]::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

.popup-dialog-header[b-n9ocwng1hl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.popup-dialog-frame[b-n9ocwng1hl] {
    display: block;
    width: 100%;
    border: 0;
}
/* /Components/Shared/SecondProviderFields.razor.rz.scp.css */
/* "Require an additional provider" (unticked): the Second provider section is hidden. Pure CSS so it needs no script. */
.second-provider:not(:has(.second-toggle:checked)) .second-fields[b-kh8aywcg8h] {
    display: none;
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
/* BL-0129: one palette for every status badge, checked for contrast (each pair is well above 4.5:1). BL-0502: a dot of the badge's own
   colour before the word, so a state reads at a glance (the word still says it). */
.status-badge[b-yhc7bgnen5] {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35em 0.7em;
    border-radius: 999px;
    letter-spacing: 0;
    white-space: nowrap;
}

.status-badge[b-yhc7bgnen5]::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}

.status-neutral[b-yhc7bgnen5] { background-color: #e9edef; color: #37474f; }
.status-info[b-yhc7bgnen5] { background-color: #e3ecff; color: #1d3a78; }
.status-ok[b-yhc7bgnen5] { background-color: #dcf2e3; color: #14532d; }
.status-attention[b-yhc7bgnen5] { background-color: #fdf0c8; color: #6b4a00; }
.status-danger[b-yhc7bgnen5] { background-color: #fde3e3; color: #8a1c1c; }
/* /Components/Shared/WizardSteps.razor.rz.scp.css */
/* BL-0678: the steps across the top of a popup, in the theme's colours: the current one in the primary colour, the done ones ticked. */
.wizard-steps[b-qcwh3jcj06] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--ui-card-border, #e1e8ee);
    color: var(--bs-secondary-color, #566468);
    font-size: 0.95rem;
}

.wizard-steps li[b-qcwh3jcj06] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wizard-step-num[b-qcwh3jcj06] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.8rem;
    font-weight: 600;
}

.wizard-steps li.current[b-qcwh3jcj06] {
    color: var(--tctmj-primary, #315bb8);
    font-weight: 600;
}

.wizard-steps li.current .wizard-step-num[b-qcwh3jcj06] {
    background: var(--tctmj-primary, #315bb8);
    border-color: var(--tctmj-primary, #315bb8);
    color: #fff;
}

.wizard-steps li.done[b-qcwh3jcj06] {
    color: var(--ui-ok, #1a7f37);
}
/* /Features/Admin/EditCalendarSettings/EditCalendarSettings.razor.rz.scp.css */
/* Provider colours and Appointment types are two separate <table> elements, each stretched to its panel's full
   width by Bootstrap's .table class. A plain (auto-layout) table sizes its own first column from its own row
   labels only, with no idea another table on the page exists — "Dr. Sarah Mitchell" vs. "New patient" gave the
   two tables different first-column widths, so the swatches column started at a different x-position on screen
   even though the swatches themselves were identical (BL-0179). A min-width alone wasn't enough: auto layout
   still redistributes each table's leftover 100%-stretch width differently depending on that table's own
   content. table-layout: fixed makes the first column's width authoritative instead of content-driven, so both
   tables' second column starts at the same x regardless of how long a given row's label is. */
.color-picker-table[b-zkl1uddwcj] {
    table-layout: fixed;
}

.color-picker-table .provider-name[b-zkl1uddwcj] {
    width: 18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BL-0587: the "move to" choice only once Retire is ticked (a browser without :has shows it always); a retired line greyed. */
.line-retire:not(:has(input[type="checkbox"]:checked)) .line-move[b-zkl1uddwcj] {
    display: none;
}

.service-lines-table tr.retired input[type="text"][b-zkl1uddwcj] {
    color: var(--bs-secondary-color, #566468);
}
/* /Features/Admin/EditCalendarSettings/Swatches.razor.rz.scp.css */
.swatches[b-80isugk2bs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.swatch[b-80isugk2bs] {
    position: relative;
    cursor: pointer;
}

.swatch input[b-80isugk2bs] {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.swatch span:not(.visually-hidden)[b-80isugk2bs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    background: var(--swatch);
    border: 2px solid transparent;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    gap: 0.15rem;
}


.swatch input:checked + span[b-80isugk2bs] {
    border: 2px solid var(--bs-body-color);
    box-shadow: 0 0 0 2px var(--bs-body-bg) inset;
}

/* A tick as well as the border: the selection must not rest on colour or border weight alone. */
.swatch input:checked + span[b-80isugk2bs]::after {
    content: "\2713";
    font-size: 1rem;
    line-height: 1;
}


.swatch input:focus-visible + span[b-80isugk2bs] {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

/* BL-0529: provider colours as the calendar draws them: the blocks' light tint (24% of the colour on white) and their ring (45%), with a
   dot of the full colour as beside each provider's name. The same mixes as TimeGrid, MonthGrid and ProviderChips. */
.swatches.tinted .swatch span:not(.visually-hidden)[b-80isugk2bs] {
    width: 2.4rem;
    background: color-mix(in srgb, var(--swatch) 24%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swatch) 45%, #fff);
    color: var(--bs-body-color);
}

.swatches.tinted .swatch-dot[b-80isugk2bs] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--swatch);
}


.swatches.tinted .swatch input:checked + span[b-80isugk2bs] {
    border: 2px solid var(--bs-body-color);
    box-shadow: 0 0 0 2px var(--bs-body-bg) inset;
}

.swatches.tinted .swatch input:checked + span[b-80isugk2bs]::after {
    font-size: 0.75rem;
}
/* /Features/Appointments/AppointmentList/AppointmentList.razor.rz.scp.css */
.appointment-list[b-hz2t7ivsuj] {
    table-layout: fixed;
    min-width: 48rem;
    margin-bottom: 0;
}

.appointment-list.with-provider[b-hz2t7ivsuj] {
    min-width: 60rem;
}

.appointment-list .col-time[b-hz2t7ivsuj] { width: 7rem; }

.appointment-list .col-provider[b-hz2t7ivsuj] { width: 12rem; }

.appointment-list .col-status[b-hz2t7ivsuj] { width: 17rem; }

.appointment-list .col-actions[b-hz2t7ivsuj] { width: 19rem; }

/* BL-0549: the widths above suit a desktop; on an iPad they squeezed the patient's name onto two lines (landscape) or pushed the buttons off
   the card (portrait). Narrower fixed columns here, and in portrait the buttons may wrap, so the whole row fits without scrolling sideways. */
@media (max-width: 1199.98px) {
    .appointment-list[b-hz2t7ivsuj],
    .appointment-list.with-provider[b-hz2t7ivsuj] {
        min-width: 52rem;
    }

    .appointment-list .col-time[b-hz2t7ivsuj] { width: 6rem; }

    .appointment-list .col-provider[b-hz2t7ivsuj] { width: 10rem; }

    .appointment-list .col-status[b-hz2t7ivsuj] { width: 13rem; }

    .appointment-list .col-actions[b-hz2t7ivsuj] { width: 15rem; }
}

@media (max-width: 991.98px) {
    .appointment-list[b-hz2t7ivsuj],
    .appointment-list.with-provider[b-hz2t7ivsuj] {
        min-width: 44rem;
    }

    .appointment-list .col-time[b-hz2t7ivsuj] { width: 5.5rem; }

    .appointment-list .col-provider[b-hz2t7ivsuj] { width: 9rem; }

    .appointment-list .col-actions[b-hz2t7ivsuj] { width: 10rem; }
}

.appointment-list > tbody > tr > :first-child[b-hz2t7ivsuj] {
    padding-left: 1rem;
}

.appointment-list > tbody > tr > :last-child[b-hz2t7ivsuj] {
    padding-right: 1rem;
}
/* /Features/Appointments/AppointmentsHeader.razor.rz.scp.css */
/* BL-0288: the tab row also holds the page's controls at its right end, with the tabs' line running under both. The line is on the row,
   not the tabs, so it reaches under the controls; the active tab still covers it (Bootstrap's -1px margin). Where the controls don't fit
   beside the tabs (a container query, so the sidebar and the number of tabs are taken into account), the tabs keep their own line and the
   controls go under it. */
.appointments-tabbar[b-cxykhd4rpu] {
    container-type: inline-size;
}

.appointments-tabbar-row[b-cxykhd4rpu] {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.appointments-tabbar-row .nav-tabs[b-cxykhd4rpu] {
    border-bottom: 0;
    align-self: flex-end;
}

.appointments-tabbar-end[b-cxykhd4rpu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding-bottom: 0.25rem;
}

@container (max-width: 54rem) {
    .appointments-tabbar-row[b-cxykhd4rpu] {
        flex-direction: column;
        align-items: stretch;
        border-bottom: 0;
    }

    .appointments-tabbar-row .nav-tabs[b-cxykhd4rpu] {
        align-self: stretch;
        border-bottom: var(--bs-border-width) solid var(--bs-border-color);
    }

    .appointments-tabbar-end[b-cxykhd4rpu] {
        margin-left: 0;
        padding-bottom: 0;
    }
}
/* /Features/Appointments/AppointmentSummary/AppointmentSummary.razor.rz.scp.css */
/* BL-0536: the appointment popup's action row stays in view at the bottom of the popup while its details scroll, so a short window never
   hides it below the fold. */
.summary-actions[b-f32lnlh5xa] {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-bottom: 0.75rem;
    background: var(--ui-page, #f3f6fa);
}
/* /Features/Appointments/BookAppointment/BookAppointment.razor.rz.scp.css */
/* BL-0515: a short choice as cards side by side (the booking's service line and type): real radio buttons, each drawn as its label, a card with a
   title and a short line; the chosen one in the clinic's blue. The radio itself is kept for the keyboard and screen readers, out of sight. */
.choice-group[b-18d9o8xw9b] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.choice-cards[b-18d9o8xw9b] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.choice-input[b-18d9o8xw9b] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.choice-card[b-18d9o8xw9b] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 10rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--ui-card-border);
    border-radius: 0.6rem;
    background: var(--ui-card);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.choice-card:hover[b-18d9o8xw9b] {
    background: #f5f8ff;
}

.choice-title[b-18d9o8xw9b] {
    font-weight: 600;
    color: var(--ui-heading);
}

.choice-sub[b-18d9o8xw9b] {
    font-size: 0.8rem;
    color: var(--tctmj-muted);
}

.choice-input:checked + .choice-card[b-18d9o8xw9b] {
    background: var(--tctmj-primary-soft);
    border-color: var(--tctmj-primary);
    box-shadow: 0 0 0 1px var(--tctmj-primary);
}

.choice-input:checked + .choice-card .choice-title[b-18d9o8xw9b] {
    color: var(--tctmj-primary-darker);
}

.choice-input:focus-visible + .choice-card[b-18d9o8xw9b] {
    outline: 3px solid rgba(99, 137, 225, 0.6);
    outline-offset: 2px;
}
/* /Features/Appointments/Calendar/CalendarLegend.razor.rz.scp.css */
.calendar-legend[b-4jydq3lbxa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.legend-item[b-4jydq3lbxa] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.legend-bar[b-4jydq3lbxa] {
    width: 0.3rem;
    height: 0.95rem;
    border-radius: 2px;
    display: inline-block;
}
/* /Features/Appointments/Calendar/JumpPicker.razor.rz.scp.css */
/* BL-0348: the "Go to date" picker in its dropdown. Today is ringed, the date (Day) or week (Week) on show is filled; in Week view the whole row
   lights up under the pointer, since a click anywhere in it picks that week. */
.jump-head[b-y4zlrfr7qg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.jump-head .btn[b-y4zlrfr7qg] {
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
}

.jump-selects[b-y4zlrfr7qg] {
    display: flex;
    gap: 0.25rem;
}

.jump-head select[b-y4zlrfr7qg] {
    width: auto;
    font-weight: 600;
}

.jump-days[b-y4zlrfr7qg] {
    border-collapse: separate;
    border-spacing: 0 2px;
    text-align: center;
}

.jump-days th[b-y4zlrfr7qg] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    width: 2.25rem;
}

.jump-days td[b-y4zlrfr7qg] {
    padding: 0;
}

.jump-days a[b-y4zlrfr7qg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.6rem;
    line-height: 1.1;
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    text-decoration: none;
}

.jump-days a.jump-other[b-y4zlrfr7qg] {
    color: var(--bs-secondary-color);
}

.jump-days a.jump-today[b-y4zlrfr7qg] {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
    font-weight: 600;
}

/* Day view: the date on show; Week view: its row. */
.jump-days a.jump-selected[b-y4zlrfr7qg],
.jump-days tr.jump-selected a[b-y4zlrfr7qg] {
    background: var(--bs-primary-bg-subtle);
}

.jump-days:not(.jump-by-week) a:hover[b-y4zlrfr7qg],
.jump-days.jump-by-week tr:hover a[b-y4zlrfr7qg] {
    background: var(--bs-secondary-bg);
}

.jump-months[b-y4zlrfr7qg] {
    display: grid;
    grid-template-columns: repeat(3, 4.5rem);
    gap: 0.375rem;
}

.jump-months a.jump-this[b-y4zlrfr7qg] {
    font-weight: 600;
}

/* BL-0575: a day's number of appointments, small, under the date. */
.jump-count[b-y4zlrfr7qg] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--bs-primary);
    min-height: 0.8rem;
}

.jump-days a.jump-selected .jump-count[b-y4zlrfr7qg] {
    color: inherit;
}
/* /Features/Appointments/Calendar/MonthGrid.razor.rz.scp.css */
/* BL-0522: the month is a white card, as the lists are; its weekday row on the caption band. */
.month-grid[b-8ej6sdxfxi] {
    background: var(--ui-card, #fff);
    border: 1px solid var(--ui-card-border, #e1e8ee);
    border-radius: var(--ui-radius, 0.75rem);
    box-shadow: var(--ui-shadow, none);
    overflow: hidden;
}

.month-head-row[b-8ej6sdxfxi],
.month-week-row[b-8ej6sdxfxi] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.month-head-row[b-8ej6sdxfxi] {
    background: var(--ui-caption-band, #e9eff6);
    color: var(--ui-caption-ink, #2b3f52);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.35rem 0;
}

.month-week-row[b-8ej6sdxfxi] {
    border-top: 1px solid var(--bs-border-color);
}

.month-cell[b-8ej6sdxfxi] {
    position: relative;
    min-height: 8.6rem;
    min-width: 0;
    padding: 0.25rem 0.3rem;
    border-right: 1px solid var(--bs-border-color);
}

.month-cell:last-child[b-8ej6sdxfxi] {
    border-right: none;
}

.month-weekend[b-8ej6sdxfxi] {
    background-color: var(--bs-tertiary-bg);
}

.month-outside[b-8ej6sdxfxi] {
    color: var(--bs-secondary-color);
}

.month-outside .month-appt[b-8ej6sdxfxi] {
    opacity: 0.7;
}

.month-today[b-8ej6sdxfxi] {
    background-color: rgba(var(--bs-primary-rgb), 0.07);
}

.month-day[b-8ej6sdxfxi] {
    display: inline-block;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    color: inherit;
    text-decoration: none;
}

.month-today .month-day[b-8ej6sdxfxi] {
    background: var(--bs-primary);
    color: #fff;
    border-radius: 999px;
    min-width: 1.5rem;
    padding: 0 0.45rem;
    line-height: 1.5rem;
    text-align: center;
}

/* The day's appointment count; clicks fall through to the cell's link. */
.month-count[b-8ej6sdxfxi] {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 600;
    pointer-events: none;
}

.month-appt[b-8ej6sdxfxi] {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 2px;
    padding: 0 0.3rem;
    overflow: hidden;
    border-left: 4px solid var(--type);
    border-radius: 3px;
    background: color-mix(in srgb, var(--prov) 24%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--prov) 45%, #fff);
    color: #1f2937;
    font-size: 0.75rem;
    line-height: 1.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}

a.month-appt:hover[b-8ej6sdxfxi] {
    background: color-mix(in srgb, var(--prov) 38%, #fff);
    color: #111827;
}

.month-more[b-8ej6sdxfxi] {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
}

.month-appt.cal-second[b-8ej6sdxfxi] {
    border-left-style: dashed;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--prov) 14%, #fff) 0 6px, #fff 6px 12px);
}

/* BL-0246: an upcoming appointment outside its provider's hours: an amber dashed outline (the block's text also starts with a warning sign, so
   colour is not the only cue). */
.cal-outside-hours[b-8ej6sdxfxi] {
    outline: 2px dashed #b7791f;
    outline-offset: -2px;
}
/* /Features/Appointments/Calendar/ProviderChips.razor.rz.scp.css */
/* BL-0287: a provider's box looks exactly like that provider's appointments in the calendar (TimeGrid/MonthGrid: the colour mixed 24% into white,
   a 45% outline), ticked or not: the checkbox says which (owner's choice, after a full-colour ticked box read darker than the calendar entry).
   Grey: not working on any day shown, ticked or not. */
.provider-chip[b-ro6vy64k4p] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    background: color-mix(in srgb, var(--prov) 24%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--prov) 45%, #fff);
    color: #212529;
}

.provider-chip-off[b-ro6vy64k4p] {
    background: #e9ecef;
    box-shadow: 0 0 0 1px #ced4da;
    color: #6c757d;
}

.provider-chip input[b-ro6vy64k4p] {
    margin: 0;
    cursor: pointer;
    background-color: #fff;
    border-color: #6c757d;
}

/* BL-0289: white with a dark tick, not Bootstrap's blue, so the box keeps the provider's colour. The tick is Bootstrap's own, recoloured. */
.provider-chip input:checked[b-ro6vy64k4p] {
    background-color: #fff;
    border-color: #343a40;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.provider-chip:has(input:focus-visible)[b-ro6vy64k4p] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* /Features/Appointments/Calendar/TimeGrid.razor.rz.scp.css */
/* BL-0522: the grid is a white card, as the lists are, not the page's own background. */
.cal-scroll[b-wtdkadsy5w] {
    overflow-x: auto;
    background: var(--ui-card, #fff);
    border: 1px solid var(--ui-card-border, #e1e8ee);
    border-radius: var(--ui-radius, 0.75rem);
    box-shadow: var(--ui-shadow, none);
}

.cal-grid[b-wtdkadsy5w] {
    --slot-h: 2.1rem;
    --line: var(--bs-border-color);
    display: grid;
    /* BL-0549: 8rem lets a whole week fit an iPad held sideways (1024 px) without scrolling; narrower windows still scroll. */
    grid-template-columns: 4.6rem repeat(var(--cols), minmax(8rem, 1fr));
    min-width: 100%;
}

.cal-corner[b-wtdkadsy5w],
.cal-head[b-wtdkadsy5w] {
    border-bottom: 1px solid var(--line);
    background: var(--ui-caption-band, #e9eff6);   /* BL-0522: the header row on the caption band */
}

.cal-head[b-wtdkadsy5w] {
    padding: 0.35rem 0.5rem;
    border-left: 1px solid var(--line);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cal-head[b-wtdkadsy5w]::before {
    /* the provider's colour, when the column is a provider */
    content: "";
    align-self: center;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--prov, transparent);
    flex: none;
}

.cal-sub[b-wtdkadsy5w] {
    font-weight: 400;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
}

.cal-head-link[b-wtdkadsy5w] {
    color: inherit;
    text-decoration: none;
}

.cal-head-link:hover[b-wtdkadsy5w] {
    text-decoration: underline;
}

.cal-time[b-wtdkadsy5w] {
    height: var(--slot-h);
    padding: 0 0.4rem 0 0;
    text-align: right;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.cal-col[b-wtdkadsy5w] {
    position: relative;
    height: calc(var(--slots) * var(--slot-h));
    border-left: 1px solid var(--line);
    /* a line under every half-hour row */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--slot-h) - 1px),
        var(--line) calc(var(--slot-h) - 1px),
        var(--line) var(--slot-h)
    );
}

.cal-weekend[b-wtdkadsy5w] {
    background-color: var(--bs-tertiary-bg);
}

/* BL-0508: today in the logo's teal. */
.cal-head.cal-today[b-wtdkadsy5w] {
    background: var(--tctmj-teal-soft, #e6f4f5);
    box-shadow: inset 0 -3px 0 var(--tctmj-teal, #108c98);
}

.cal-col.cal-today[b-wtdkadsy5w] {
    background-color: rgba(16, 140, 152, 0.06);
}

/* An empty half-hour slot that adds an appointment (BL-0118): invisible until hovered or focused. Under the blocks. */
.cal-slot[b-wtdkadsy5w] {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--slot-h);
    z-index: 0;
}

.cal-slot[b-wtdkadsy5w]::after {
    content: "+";
    position: absolute;
    top: 0;
    right: 0.4rem;
    color: var(--bs-primary);
    font-weight: 700;
    line-height: var(--slot-h);
    opacity: 0;
}

.cal-slot:hover[b-wtdkadsy5w],
.cal-slot:focus-visible[b-wtdkadsy5w] {
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    outline: none;
}

/* A keyboard user must see which half-hour they are on: a tint alone is too faint, so an inset ring (BL-0129). */
.cal-slot:focus-visible[b-wtdkadsy5w] {
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
}

.cal-slot.is-selected[b-wtdkadsy5w] {
    background: color-mix(in srgb, var(--bs-primary) 22%, transparent);
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.cal-slot:hover[b-wtdkadsy5w]::after,
.cal-slot:focus-visible[b-wtdkadsy5w]::after {
    opacity: 1;
}

.cal-appt[b-wtdkadsy5w] {
    z-index: 1;
    position: absolute;
    left: 2px;
    right: 2px;
    min-height: 1.15rem;
    overflow: hidden;
    padding: 0 0.3rem;
    border-left: 4px solid var(--type);
    border-radius: 3px;
    background: color-mix(in srgb, var(--prov) 24%, #fff);
    color: #1f2937;
    font-size: 0.78rem;
    line-height: 1.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--prov) 45%, #fff);
}

/* BL-0475: a block on two lines (TwoLines): the time and the name, then the visit's details, each cut off with an ellipsis, and the status
   on the right. Small enough that two lines fit a 30-minute block (one --slot-h); a shorter block shows the first line. */
.cal-appt-two[b-wtdkadsy5w] {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
}

.cal-appt-lines[b-wtdkadsy5w] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.cal-appt-line[b-wtdkadsy5w] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1rem;
}

.cal-appt-details[b-wtdkadsy5w] {
    font-size: 0.72rem;
    color: #4b5563;
}

.cal-appt-two[b-wtdkadsy5w]  .cal-appt-status {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    font-size: 0.68rem;
}

a.cal-appt:hover[b-wtdkadsy5w] {
    background: color-mix(in srgb, var(--prov) 38%, #fff);
    color: #111827;
}

/* BL-0534: the day as it goes on. A finished block fades (a paler fill, softer text that still meets AA) with a green tick, so the morning reads as
   done; the one with the provider has a ring in their colour; a late one, or one whose Visit was left unlocked, an amber ring (the Today page's
   amber, BL-0526): both ask someone to act. The type's colour bar on
   the left stays in every case. */
.cal-appt.cal-done[b-wtdkadsy5w] {
    background: color-mix(in srgb, var(--prov) 8%, #fff);
    color: #4b5563;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--prov) 25%, #fff);
}

.cal-appt.cal-done .cal-appt-details[b-wtdkadsy5w] {
    color: #5f6b78;
}

.cal-appt-tick[b-wtdkadsy5w] {
    color: #15803d;
    font-weight: 700;
}

.cal-appt.cal-with-provider[b-wtdkadsy5w] {
    box-shadow: 0 0 0 2px var(--prov);
    font-weight: 600;
}

.cal-appt.cal-late[b-wtdkadsy5w],
.cal-appt.cal-not-locked[b-wtdkadsy5w] {
    box-shadow: 0 0 0 2px #d97706;
}

/* A second provider's share of someone else's appointment (BL-0138): the same colours, dashed, so it reads as "also needed here". */
.cal-appt.cal-second[b-wtdkadsy5w] {
    border-left-style: dashed;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--prov) 14%, #fff) 0 6px, #fff 6px 12px);
}

/* Not scheduled (BL-0142): a light hatch, under the slot links and appointment blocks. */
.cal-unavail[b-wtdkadsy5w] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.07) 0 5px, rgba(0, 0, 0, 0.02) 5px 10px);
}

/* Picking a time for a booking (BL-0153): the slots that fit are always visible; the best ones (next to the main appointment) stronger. */
.cal-slot.cal-slot-fit[b-wtdkadsy5w] {
    background: rgba(25, 135, 84, 0.13);
    border-top: 1px solid rgba(25, 135, 84, 0.35);
}

.cal-slot.cal-slot-suggested[b-wtdkadsy5w] {
    background: rgba(25, 135, 84, 0.32);
    border-top: 2px solid rgb(25, 135, 84);
}

/* A time outside the provider's schedule, offered on request: amber, under the hatch (BL-0153). */
.cal-slot.cal-slot-outside[b-wtdkadsy5w] {
    background: rgba(255, 193, 7, 0.16);
    border-top: 1px solid rgba(180, 130, 0, 0.4);
}

.cal-slot.cal-slot-outside[b-wtdkadsy5w]::after {
    opacity: 0;
    content: "Outside schedule";
    font-size: 0.7rem;
    font-weight: 600;
    color: #7a5b00;
}

.cal-slot.cal-slot-fit[b-wtdkadsy5w]::after,
.cal-slot.cal-slot-suggested[b-wtdkadsy5w]::after {
    opacity: 1;
    content: "Pick";
    font-size: 0.7rem;
    font-weight: 600;
}

/* The words appear on hover or focus only; the amber and the hatch already say it, and a label on every cell would be noise. */
.cal-slot.cal-slot-outside:hover[b-wtdkadsy5w]::after,
.cal-slot.cal-slot-outside:focus-visible[b-wtdkadsy5w]::after {
    opacity: 1;
}

/* BL-0246: an upcoming appointment outside its provider's hours: an amber dashed outline (the block's text also starts with a warning sign, so
   colour is not the only cue). */
.cal-outside-hours[b-wtdkadsy5w] {
    outline: 2px dashed #b7791f;
    outline-offset: -2px;
}

/* BL-0512: the current time across today's column: a red line with a dot at its start, over the slots and blocks, never catching a click. */
.cal-now[b-wtdkadsy5w] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    margin-top: -1px;
    background: #d92d20;
    z-index: 3;
    pointer-events: none;
}

.cal-now[b-wtdkadsy5w]::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d92d20;
}
/* /Features/Appointments/Calendar/WeekView.razor.rz.scp.css */
/* Provider buttons (BL-0154, BL-0633): a little room between the colour dot and the name. The provider boxes have their own styles (ProviderChips.razor.css). */
.segmented-control .legend-dot[b-z0smg8nxdt] {
    margin-right: 0.4rem;
}

.legend-dot[b-z0smg8nxdt] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    display: inline-block;
}

/* Many providers wrap onto a second line on an upright iPad: a fixed radius keeps the group's corners neat there (one line looks the same). */
.segmented-control[b-z0smg8nxdt] {
    border-radius: 1.5rem;
}
/* /Features/Appointments/CheckIn/CheckInAppointment.razor.rz.scp.css */
/* BL-0667, BL-0669 (owner's mockup #2, adapted): Check-in as a work page, under the patient banner. The steps panel stays in view below the
   banner, which floats at the top of the window. */
.work-layout[b-pi1xu85300] {
    margin-top: 1.25rem;
}

.work-panel[b-pi1xu85300] {
    top: 6.5rem;
}

.checkin-banner-appointment[b-pi1xu85300] {
    font-size: 0.9rem;
    color: var(--tctmj-muted, #5f6f73);
}

/* The details as a printed form: the caption over the value, two or three to a row, a hairline under each. */
.caption-grid[b-pi1xu85300] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0 1.5rem;
    margin: 0;
}

.caption-grid-2[b-pi1xu85300] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.caption-grid > div[b-pi1xu85300] {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--tctmj-rule, #e6edef);
}

.caption-grid > .caption-wide[b-pi1xu85300] {
    grid-column: 1 / -1;
}

.caption-grid dt[b-pi1xu85300],
.caption-grid[b-pi1xu85300]  .label {
    display: block;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--tctmj-muted, #5f6f73);
    margin-bottom: 0.1rem;
}

.caption-grid dd[b-pi1xu85300],
.caption-grid[b-pi1xu85300]  .value {
    display: block;
    margin: 0;
    font-weight: 600;
}

/* "Not recorded": said quietly, not as a value. */
.caption-grid[b-pi1xu85300]  .value.muted {
    font-weight: 400;
    color: var(--tctmj-muted, #5f6f73);
}

.caption-grid[b-pi1xu85300]  .field {
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--tctmj-rule, #e6edef);
}

.checkin-missing[b-pi1xu85300] {
    color: var(--bs-warning-text-emphasis, #664d03);
}

.checkin-missing[b-pi1xu85300]::before {
    content: "● ";
    font-size: 0.7em;
    vertical-align: 0.15em;
}

.checkin-panel-title[b-pi1xu85300] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ui-heading, #172a3a);
    margin-bottom: 0.35rem;
}

/* The less common choices, under the main button: plain links, one per line. */
.checkin-options[b-pi1xu85300] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.checkin-options[b-pi1xu85300]  .checkin-option,
.checkin-option[b-pi1xu85300] {
    color: var(--tctmj-primary, #315bb8);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95rem;
}

.checkin-options details[b-pi1xu85300] {
    width: 100%;
}
/* /Features/Auth/Login/Login.razor.rz.scp.css */
/* Log in: one card, the clinic on the left, the form on the right. */
.tctmj-logo-lg[b-xb1l4tdhdg] {
    width: 5rem;
    height: 5rem;
    margin: 0 0 1.25rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.login-card[b-xb1l4tdhdg] {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    max-width: 52rem;
    margin: 2rem auto;
    background: var(--ui-card);
    border: 1px solid var(--ui-card-border);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.login-brand[b-xb1l4tdhdg] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem;
    color: #fff;
    background: linear-gradient(160deg, var(--tctmj-primary) 0%, var(--tctmj-primary-darker) 100%);
}

.login-brand-name[b-xb1l4tdhdg] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.login-brand-sub[b-xb1l4tdhdg] {
    opacity: 0.85;
}

.login-form[b-xb1l4tdhdg] {
    padding: 2.5rem;
}

.login-form[b-xb1l4tdhdg]  .form-control {
    padding: 0.6rem 0.8rem;
}

.login-form .btn-primary[b-xb1l4tdhdg] {
    padding: 0.6rem;
    font-weight: 600;
}

@media (max-width: 720px) {
    .login-card[b-xb1l4tdhdg] {
        grid-template-columns: 1fr;
        margin: 1rem auto;
    }

    .login-brand[b-xb1l4tdhdg],
    .login-form[b-xb1l4tdhdg] {
        padding: 1.75rem;
    }
}
/* /Features/CheckIn/TabletCheckIn/TabletCheckIn.razor.rz.scp.css */
/* Tablet check-in forms (BL-0158): a highlighted caption on each form, and a progress strip with the form names. */
.checkin-caption[b-h6npk3oyop] {
    float: none;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 1.35rem;
    font-weight: 600;
    background: var(--tctmj-primary-soft, #eef3ff);
    border-left: 6px solid var(--tctmj-primary, #315bb8);
    border-radius: 0.375rem;
}

.checkin-caption-count[b-h6npk3oyop] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #4b5563;
}

.checkin-progress ol[b-h6npk3oyop] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    color: var(--tctmj-muted, #5f6f73);   /* BL-0549: as the booking steps */
}

.checkin-progress li.current[b-h6npk3oyop] {
    color: var(--bs-body-color);
    font-weight: 600;
}

.checkin-progress li.done[b-h6npk3oyop] {
    color: #0f766e;
}

.checkin-progress-number[b-h6npk3oyop] {
    display: inline-block;
    min-width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    text-align: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.9rem;
}

.checkin-progress li.current .checkin-progress-number[b-h6npk3oyop] {
    background: var(--tctmj-primary, #315bb8);
    border-color: var(--tctmj-primary, #315bb8);
    color: #fff;
}

.checkin-progress li.done .checkin-progress-number[b-h6npk3oyop] {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff;
}
/* /Features/Dashboard/Dashboard.razor.rz.scp.css */
/* --- Today: one band with the greeting and the day's numbers. --- */
.today-hero[b-qns88wduze] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, #fff, #f9fbff);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
}

.today-hero-greeting[b-qns88wduze] {
    color: var(--tctmj-teal-dark);
    font-weight: 600;
}

.today-hero-date[b-qns88wduze] {
    color: var(--tctmj-muted);
}

.today-stats[b-qns88wduze] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.today-stat[b-qns88wduze] {
    display: flex;
    flex-direction: column;
    min-width: 7.5rem;
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    background: #f1f5fb;
    border: 1px solid #e3eaf3;
}

.today-stat-value[b-qns88wduze] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ui-heading);
}

.today-stat-label[b-qns88wduze] {
    font-size: 0.85rem;
    color: var(--tctmj-muted);
}

.today-stat.tone-attention[b-qns88wduze] { background: #fff6da; border-color: #f3dc8f; }

.today-stat.tone-attention .today-stat-value[b-qns88wduze] { color: #7a5300; }

.today-stat.tone-ok[b-qns88wduze] { background: #e8f6ec; border-color: #c6e8d0; }

.today-stat.tone-ok .today-stat-value[b-qns88wduze] { color: #14532d; }

.today-stat.tone-danger[b-qns88wduze] { background: #fdecec; border-color: #f5c6c6; }

.today-stat.tone-danger .today-stat-value[b-qns88wduze] { color: #8a1c1c; }

/* BL-0526: a late patient's row on the Front Office's Today: white like the others, with an amber bar at its left edge (its Late pill says
   why). */
.today-queue tr.queue-late > td:first-child[b-qns88wduze] {
    box-shadow: inset 4px 0 0 #d97706;
}

/* BL-0578: a Clinical Assistant's Today, the narrow Vitals column beside the list; stacked on an upright iPad. */
.ca-today[b-qns88wduze] {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.ca-vitals[b-qns88wduze] {
    position: sticky;
    top: 1rem;
}

.ca-group[b-qns88wduze] {
    margin: 0.25rem 0 0.5rem;
}

.ca-list .ca-group ~ .ca-group[b-qns88wduze] {
    margin-top: 1.25rem;
}

/* Stacked (an upright iPad), the list comes first: who is waiting for vitals is the work; the Vitals column follows, as the provider's
   Today puts what needs attention above the day. */
@media (max-width: 900px) {
    .ca-today[b-qns88wduze] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ca-list[b-qns88wduze] {
        order: -1;
    }

    .ca-vitals[b-qns88wduze] {
        position: static;
    }
}
/* /Features/Dashboard/TodaySplit.razor.rz.scp.css */
/* BL-0482: the Today page in two columns, the day on the left and what needs attention on the right. The attention column comes first in the
   page (read first, and on top when the columns stack on a narrow screen, an iPad held upright); the grid puts it on the right. */
.today-split[b-ej4m23isna] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(19rem, 2fr);
    grid-template-areas: "day attention";
    gap: 1.5rem;
    align-items: start;
}

.today-day[b-ej4m23isna] {
    grid-area: day;
    min-width: 0;
}

.today-attention[b-ej4m23isna] {
    grid-area: attention;
    min-width: 0;
}

@media (max-width: 1000px) {
    .today-split[b-ej4m23isna] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "attention" "day";
        gap: 0.5rem;
    }

    .today-nothing-pending .today-attention[b-ej4m23isna] {
        display: none;
    }
}
/* /Features/Dashboard/VisitProgress.razor.rz.scp.css */
/* BL-0634: the steps read as plain words with a mark, so the row keeps one pill (where the visit is); a step left undone after the exam
   started is amber, the colour for "needs your attention". */
.visit-steps[b-qmgg8jp4y4] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35rem;
    margin-right: 0.4rem;
    font-size: 0.875rem;
}

.visit-step-mark[b-qmgg8jp4y4] {
    margin-right: 0.2rem;
}

.visit-step-done[b-qmgg8jp4y4] {
    color: var(--tctmj-ink);
}

.visit-step-done .visit-step-mark[b-qmgg8jp4y4] {
    color: #14532d;   /* as the Ok pill (StatusBadge) */
    font-weight: 700;
}

.visit-step-todo[b-qmgg8jp4y4] {
    color: #37474f;   /* as the Neutral pill */
}

.visit-step-missed[b-qmgg8jp4y4] {
    color: #6b4a00;   /* as the Attention pill */
    font-weight: 600;
}

.visit-step-missed .visit-step-mark[b-qmgg8jp4y4] {
    color: #d48a00;
    font-weight: 700;
}

.visit-step-sep[b-qmgg8jp4y4] {
    color: #adb5bd;
}
/* /Features/Forms/FormAttachments/FormAttachments.razor.rz.scp.css */
/* One rounded box per service line (FormAttachments.razor). */
.attachment-line[b-9dpzifbunq] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
    padding: 1rem 1.25rem 0.25rem;
    margin-bottom: 1rem;
}

/* A type's slots in order, two to a row where there is room (four across cut the longer form names short). */
.attachment-slots[b-9dpzifbunq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.5rem;
}

.attachment-slot[b-9dpzifbunq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.attachment-slot-number[b-9dpzifbunq] {
    flex: 0 0 auto;
    width: 1.2rem;
    text-align: right;
    font-size: 0.8125rem;
    color: var(--tctmj-muted, var(--bs-secondary-color));
}
/* /Features/Forms/FormBuilder/FormBuilder.razor.rz.scp.css */
/* Each field panel's header shows Name (reference key) and control type as
   two independently fixed-width columns, so both line up across every field
   regardless of how long an individual name or type value is — not just the
   whole context block as one right-hugging unit. */
.field-context-name[b-466jq2slln] {
    display: inline-block;
    width: 190px;
    font-family: var(--bs-font-monospace, monospace);
    /* A long key ends in an ellipsis (its full name on hover) instead of running into the type column. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.field-context-type[b-466jq2slln] {
    display: inline-block;
    width: 90px;
}
/* /Features/Help/HelpGuidePage.razor.rz.scp.css */
/* BL-0396: a guide is a long document of text and screenshots; keep it readable and keep wide pictures inside the page. */
.help-guide[b-g3ubhl4asi] {
    max-width: 48rem;
}

.help-guide[b-g3ubhl4asi]  img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.25rem;
    margin: 0.5rem 0;
}

.help-guide[b-g3ubhl4asi]  table {
    border-collapse: collapse;
    margin: 0.5rem 0;
}

.help-guide[b-g3ubhl4asi]  th,
.help-guide[b-g3ubhl4asi]  td {
    border: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.35rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.help-guide[b-g3ubhl4asi]  h2 {
    margin-top: 1.5rem;
}

/* BL-0584: a section starts with its heading (a chapter's, above its first section): no gap above it, and a chapter's no larger than the
   page's own title. */
.help-guide[b-g3ubhl4asi]  > :first-child {
    margin-top: 0;
}

.help-guide[b-g3ubhl4asi]  h1 {
    font-size: 1.6rem;
}

/* BL-0584: the side menu holds the three guides and, under the open one, its chapters and sections: a long list, so it scrolls on its own
   beside the section, and its entries are a little tighter than a settings page's few. */
.side-menu-long[b-g3ubhl4asi] {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.side-menu-guide[b-g3ubhl4asi] {
    font-weight: 600;
}

.side-menu-guide[aria-current="page"][b-g3ubhl4asi] {
    color: var(--tctmj-primary, #315bb8);
}

.side-menu-sections[b-g3ubhl4asi] {
    margin: 0.15rem 0 0.75rem;
}

.side-menu-sections a[b-g3ubhl4asi] {
    min-height: 2.25rem;
    font-size: 0.925rem;
    padding: 0.3rem 0.6rem 0.3rem 1rem;
}

.side-menu-sections a.side-menu-indent[b-g3ubhl4asi] {
    padding-left: 1.75rem;
}

.side-menu-label[b-g3ubhl4asi] {
    padding: 0.75rem 0.6rem 0.2rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #566468);
}

/* "Next: …" at the foot of each section, as the Visit's parts end. */
.help-next[b-g3ubhl4asi] {
    max-width: 48rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* On a narrow screen the menu sits above the section as a plain list, not the settings page's row of chips: there are too many entries. */
@media (max-width: 900px) {
    .side-menu-long[b-g3ubhl4asi] {
        max-height: 40vh;
    }

    .side-menu-long ul[b-g3ubhl4asi] {
        display: block;
    }

    .side-menu-long a[b-g3ubhl4asi] {
        border: 0;
        border-radius: 0.4rem;
    }

    .side-menu-long a:not(.current)[b-g3ubhl4asi] {
        background: none;
    }
}
/* /Features/Intake/IntakeQueue/IntakeQueue.razor.rz.scp.css */
/* BL-0506: the patient's reason under their name, at most two lines (the whole of it is on the request's own page). */
.intake-reason[b-3rr0slwywb] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 40rem;
}

.intake-list > tbody > tr > :first-child[b-3rr0slwywb] {
    padding-left: 1rem;
    width: 9rem;
}

.intake-list > tbody > tr > :last-child[b-3rr0slwywb] {
    padding-right: 1rem;
}

/* BL-0681: the initials circle of the patient list, in the kind's colour: blue for an appointment request, teal for a referral. */
.intake-avatar[b-3rr0slwywb] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
}

.intake-avatar-request[b-3rr0slwywb] {
    background: var(--tctmj-primary-soft);
    color: var(--tctmj-primary-dark);
}

.intake-avatar-referral[b-3rr0slwywb] {
    background: var(--tctmj-teal-soft);
    color: var(--tctmj-teal-dark);
}
/* /Features/OutsideProviders/OutsideProviderPicker.razor.rz.scp.css */
/* BL-0671: the chosen outside provider, shown as the patient's pharmacy is (BL-0664): its name, what and where, then the fax on a ruled line. */
.outside-provider-name[b-71ls6khl2i] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ui-heading, #172a3a);
}

.outside-provider-address[b-71ls6khl2i] {
    white-space: pre-line;
}

.outside-provider-fax[b-71ls6khl2i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ui-card-border, #e1e8ee);
}

/* BL-0678 (owner 2026-11-04): the type-ahead's rows, each one a row to touch, with how often the clinic used it on the right. */
.outside-provider-option[b-71ls6khl2i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-bottom: 1px solid var(--ui-card-border, #e1e8ee);
    background: none;
    text-align: left;
    color: inherit;
}

.outside-provider-option:hover[b-71ls6khl2i],
.outside-provider-option:focus-visible[b-71ls6khl2i] {
    background: var(--ui-hover, #f1f5fb);
}

.outside-provider-uses[b-71ls6khl2i] {
    flex: none;
    min-width: 2.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--ui-page, #f3f6fa);
    color: var(--bs-secondary-color, #566468);
    font-size: 0.85rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.outside-provider-more[b-71ls6khl2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
/* /Features/Patients/ClinicFiles/ClinicFileViewerPage.razor.rz.scp.css */
/* BL-0417: the photo viewer's sliders, in a row on a wide screen and stacked on a narrow one; the photo as large as the window allows. */
.photo-adjust:not([hidden])[b-oh5rbrpljj] {
    display: grid;
    grid-template-columns: auto minmax(8rem, 16rem) auto minmax(8rem, 16rem) auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.photo-adjust label[b-oh5rbrpljj] {
    margin: 0;
    white-space: nowrap;
}

.photo-adjust output[b-oh5rbrpljj] {
    display: inline-block;
    min-width: 3.5em;
    color: var(--bs-secondary-color);
}

.photo-adjust-note[b-oh5rbrpljj] {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .photo-adjust:not([hidden])[b-oh5rbrpljj] {
        grid-template-columns: auto 1fr;
    }
}

.photo-notes[b-oh5rbrpljj] {
    white-space: pre-wrap;
}

.photo-view[b-oh5rbrpljj] {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    background: #000;
}
/* /Features/Patients/ClinicFiles/ImageDetails.razor.rz.scp.css */
/* BL-0371: the picture large at the top of the attach and edit dialogs, centred on a light ground, fitted inside without cropping. */
.image-preview[b-ljajiwciig] {
    display: flex;
    justify-content: center;
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.image-preview img[b-ljajiwciig] {
    max-width: 100%;
    max-height: 45vh;
    object-fit: contain;
}

.image-preview iframe[b-ljajiwciig] {
    width: 100%;
    height: 45vh;
    border: 0;
}
/* /Features/Patients/ClinicFiles/VisitImagesPanel.razor.rz.scp.css */
/* BL-0369: attaching an image opens a dialog over the Visit, as the phrase picker does (PhrasePickerDialog.razor.css): centred over a dimmed
   page, the picture large at the top, the fields below, Cancel and Attach in a footer that stays put; on a phone-sized screen it fills it. */
.attach-dialog-backdrop[b-noogfc1chn] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.45);
}

.attach-dialog[b-noogfc1chn] {
    display: flex;
    flex-direction: column;
    width: min(44rem, 100%);
    max-height: 92vh;
    background-color: var(--bs-body-bg, #fff);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    outline: none;
}

.attach-dialog-header[b-noogfc1chn],
.attach-dialog-footer[b-noogfc1chn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
}

.attach-dialog-header[b-noogfc1chn] {
    justify-content: space-between;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.attach-dialog-footer[b-noogfc1chn] {
    justify-content: flex-end;
    border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.attach-dialog-body[b-noogfc1chn] {
    padding: 1rem;
    overflow-y: auto;
}

@media (max-width: 576px) {
    .attach-dialog-backdrop[b-noogfc1chn] {
        padding: 0;
    }

    .attach-dialog[b-noogfc1chn] {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

/* BL-0372: what waits and what is on the chart are two tables with the same headings; the same column widths make them read as one list. */
.image-table[b-noogfc1chn] {
    table-layout: fixed;
}

.image-table th:nth-child(1)[b-noogfc1chn] { width: 22%; }
.image-table th:nth-child(2)[b-noogfc1chn] { width: 38%; }
.image-table th:nth-child(3)[b-noogfc1chn] { width: 20%; }
.image-table th:nth-child(4)[b-noogfc1chn] { width: 20%; }

.image-table td[b-noogfc1chn] {
    overflow-wrap: anywhere;
}

/* BL-0521: a photo's small picture beside its name; a click opens the viewer. */
.image-thumb[b-noogfc1chn] {
    flex: none;
    display: block;
    width: 64px;
    height: 64px;
    border: 1px solid var(--ui-card-border, #dee2e6);
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.image-thumb img[b-noogfc1chn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* /Features/Patients/EditPatient/EditPatient.razor.rz.scp.css */
/* BL-0682 (owner 2026-11-04, mockup #3): the record's fields in a wide main column; what saves on its own (pharmacy, notes) and the earlier
   contact details in a column on the right. One column on an upright iPad. */
.edit-patient-layout[b-pkaxhpdqfg] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .edit-patient-layout[b-pkaxhpdqfg] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.edit-patient-history[b-pkaxhpdqfg] {
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-card-border, #e1e8ee);
    border-radius: var(--ui-radius, 0.75rem);
    background: var(--tctmj-primary-soft, #eef3ff);
}
/* /Features/Patients/PatientChart/PatientChart.razor.rz.scp.css */
/* BL-0679 (owner 2026-11-04, mockup #4): the chart as a work page, in the app's own colours: who the patient is in a column on the left; one
   part at a time on the right, chosen by tabs. On an upright iPad the column goes above the parts. */
.chart-heading[b-519y4kipfi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0.5rem 0 1rem;
}

.chart-heading h1[b-519y4kipfi] {
    margin: 0;
}

.chart-layout[b-519y4kipfi] {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.chart-side[b-519y4kipfi],
.chart-main[b-519y4kipfi] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.chart-side-title[b-519y4kipfi] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.chart-side-title h2[b-519y4kipfi],
.chart-side-heading[b-519y4kipfi] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ui-heading, #172a3a);
    margin: 0 0 0.5rem;
}

.chart-side-title h2[b-519y4kipfi] {
    margin: 0;
}

/* The patient card's two columns are one in the narrow column, each label above its value. */
.chart-details[b-519y4kipfi]  .field-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.chart-details[b-519y4kipfi]  .field-grid .field {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.1rem;
}

.chart-next[b-519y4kipfi] {
    border-color: var(--ui-attention-border, #f0c36d);
    background: var(--ui-attention-bg, #fff8e6);
}

/* The tabs: one part at a time, the current one underlined in the primary colour. */
.chart-tabs[b-519y4kipfi] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    border-bottom: 1px solid var(--ui-card-border, #e1e8ee);
}

.chart-tabs a[b-519y4kipfi] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.1rem;
    border-bottom: 3px solid transparent;
    color: var(--bs-secondary-color, #566468);
    font-weight: 600;
    text-decoration: none;
}

.chart-tabs a.active[b-519y4kipfi] {
    color: var(--tctmj-primary, #315bb8);
    border-bottom-color: var(--tctmj-primary, #315bb8);
}

.chart-tab-count[b-519y4kipfi] {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--ui-page, #f3f6fa);
    color: var(--bs-secondary-color, #566468);
    font-size: 0.8rem;
    font-weight: 600;
}

/* The Overview's four cards: where things stand; each opens its part. */
.chart-cards[b-519y4kipfi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.chart-card[b-519y4kipfi] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-card-border, #e1e8ee);
    border-top: 3px solid var(--ui-card-border, #e1e8ee);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    background: var(--bs-body-bg, #fff);
    color: inherit;
    text-decoration: none;
}

.chart-card:hover[b-519y4kipfi] {
    border-color: var(--tctmj-primary, #315bb8);
}

.chart-card-attention[b-519y4kipfi] {
    border-top-color: var(--ui-attention-border, #e0a526);
}

.chart-card-label[b-519y4kipfi] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #566468);
}

.chart-card strong[b-519y4kipfi] {
    font-size: 1.35rem;
    color: var(--ui-heading, #172a3a);
}

.chart-card small[b-519y4kipfi] {
    color: var(--bs-secondary-color, #566468);
}

/* A Visit as a card: the date as a block on the left, Open on the right. */
.chart-visit[b-519y4kipfi] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 1rem;
}

.chart-visit + .chart-visit[b-519y4kipfi] {
    border-top: 1px solid var(--ui-card-border, #e1e8ee);
}

.chart-visit-date[b-519y4kipfi] {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3.25rem;
    padding: 0.35rem 0;
    border: 1px solid var(--ui-card-border, #e1e8ee);
    border-radius: var(--bs-border-radius, 0.375rem);
    line-height: 1.15;
}

.chart-visit-date strong[b-519y4kipfi] {
    font-size: 1.2rem;
}

.chart-visit-date span[b-519y4kipfi] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tctmj-primary, #315bb8);
}

.chart-visit-date small[b-519y4kipfi] {
    font-size: 0.7rem;
    color: var(--bs-secondary-color, #566468);
}

.min-w-0[b-519y4kipfi] {
    min-width: 0;
}

/* An upright iPad: the column above the parts, its cards side by side (the details on the left, the pharmacy and the next step on the
   right), so the tabs are not pushed far down. */
@media (max-width: 991.98px) {
    .chart-layout[b-519y4kipfi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .chart-side[b-519y4kipfi] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-items: start;
    }

    .chart-side > :first-child[b-519y4kipfi] {
        grid-row: span 2;
    }
}

@media (max-width: 575.98px) {
    .chart-side[b-519y4kipfi] {
        display: flex;
    }
}
/* /Features/Patients/PatientFiles/PatientFilesTable.razor.rz.scp.css */
/* BL-0363: the patient's files table. A long note is cut off to one line and opens in a bubble. Its sorting headings are app.css's .sort-button. */
.patient-files caption[b-mvacvnbpe2] {
    color: var(--bs-secondary-color);
}

.note-bubble[b-mvacvnbpe2] {
    display: inline-block;
    max-width: 16rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
    color: inherit;
    text-decoration: underline dotted;
    cursor: pointer;
}
/* /Features/Patients/PatientList/PatientList.razor.rz.scp.css */
/* BL-0509: a patient's initials beside their name in a list (the Patients list), as in the patient banner. */
.patient-avatar[b-kwlwzq8im9] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--tctmj-teal-soft);
    color: var(--tctmj-teal-dark);
    font-size: 0.8rem;
    font-weight: 700;
}

.patient-name-link[b-kwlwzq8im9] {
    text-decoration: none;
}

.patient-name-link:hover[b-kwlwzq8im9] {
    text-decoration: underline;
}

/* BL-0519: the MRN opens the patient's details; a dotted underline says it can be clicked without shouting like the name. */
.patient-mrn-link[b-kwlwzq8im9] {
    color: var(--tctmj-teal-dark);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.patient-mrn-link:hover[b-kwlwzq8im9] {
    text-decoration-style: solid;
}

/* BL-0680: the one number worth acting on, in the "needs your attention" amber; it shows those patients. */
.no-address-tile[b-kwlwzq8im9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 30rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--ui-card);
    border: 1px solid #f0d9a8;
    border-left: 4px solid #d99a1e;
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    color: var(--tctmj-ink);
    text-decoration: none;
}

.no-address-tile:hover[b-kwlwzq8im9] {
    background: #fffaf0;
}

.no-address-icon[b-kwlwzq8im9] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: #fdf1d8;
    color: #8a5a00;
}

.no-address-text strong[b-kwlwzq8im9] {
    font-size: 1.15rem;
}

.no-address-action[b-kwlwzq8im9] {
    margin-left: auto;
    color: var(--tctmj-primary);
    font-weight: 600;
    white-space: nowrap;
}

.no-address-badge[b-kwlwzq8im9] {
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0 0.4rem;
    border-radius: 0.3rem;
    background: #fdf1d8;
    color: #7a4f00;
    font-size: 0.72rem;
    font-weight: 600;
}

/* The directory: one card with its title and count, the search, the table and its pages. */
.directory-header[b-kwlwzq8im9] {
    padding: 1rem 1.25rem 0.5rem;
}

.directory-search[b-kwlwzq8im9] {
    margin: 0 1.25rem 1rem;
    padding: 0.75rem 1rem;
    background: var(--ui-caption-band);
    border-radius: var(--ui-radius);
}

.directory-search-row[b-kwlwzq8im9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.search-field[b-kwlwzq8im9] {
    position: relative;
    flex: 1 1 18rem;
    margin: 0;
}

.search-field input[b-kwlwzq8im9] {
    padding-left: 2.25rem;
}

[b-kwlwzq8im9] .search-field-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tctmj-muted);
    pointer-events: none;
}

.directory-show[b-kwlwzq8im9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.directory-show-label[b-kwlwzq8im9] {
    font-weight: 600;
    color: var(--ui-caption-ink);
}

.directory-show select[b-kwlwzq8im9] {
    width: auto;
}

.directory-clear[b-kwlwzq8im9] {
    padding-left: 0;
    padding-right: 0;
}

.directory-note[b-kwlwzq8im9] {
    margin: 0 1.25rem 0.5rem;
}

.directory-empty[b-kwlwzq8im9] {
    padding: 0 1.25rem 1rem;
}

/* The table sits flush in the card: no card of its own. */
.patient-directory .patient-list[b-kwlwzq8im9] {
    border-top: 1px solid var(--ui-card-border);
}

.patient-directory .patient-list > :is(thead, tbody) > tr > :first-child[b-kwlwzq8im9] {
    padding-left: 1.25rem;
}

.patient-directory .patient-list > :is(thead, tbody) > tr > :last-child[b-kwlwzq8im9] {
    padding-right: 1.25rem;
}

.sort-link[b-kwlwzq8im9] {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.sort-link:hover[b-kwlwzq8im9],
.sort-link:focus-visible[b-kwlwzq8im9] {
    text-decoration: underline;
}

.sort-arrow[b-kwlwzq8im9] {
    margin-left: 0.3rem;
    font-size: 0.75em;
    color: var(--tctmj-muted);
}

th[aria-sort] .sort-arrow[b-kwlwzq8im9] {
    color: var(--tctmj-primary);
}

.directory-pages[b-kwlwzq8im9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ui-card-border);
}
/* /Features/Patients/Shared/PatientCard.razor.rz.scp.css */
/* Notes can be several lines; keep their line breaks. */
.note-text[b-iiugtewc3h] {
    white-space: pre-wrap;
}
/* /Features/Pharmacies/PatientPharmacy.razor.rz.scp.css */
/* BL-0664: the chosen pharmacy: its name, then the fax on a ruled line of its own. */
.rx-pharmacy-name[b-mli7cl7nyj] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ui-heading, #172a3a);
}

.rx-pharmacy-fax[b-mli7cl7nyj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0;
    padding-top: 0.65rem;
    border-top: 1px solid var(--ui-card-border, #e1e8ee);
}

/* BL-0676 (owner 2026-11-04): on the Visit, the pharmacy in two columns once the box is wide enough (not on an upright iPad): who and where on
   the left, the fax and its buttons on the right, where the fax no longer needs a rule of its own. Sized by the box, not the window, as the
   Visit's menu takes part of the width. */
.rx-pharmacy[b-mli7cl7nyj] {
    container-type: inline-size;
}

@container (min-width: 48rem) {
    .rx-cols[b-mli7cl7nyj] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 2rem;
        align-items: start;
    }

    .rx-cols .rx-pharmacy-fax[b-mli7cl7nyj] {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}


/* BL-0678 (owner 2026-11-04): the list's rows, each one a row to touch, as the doctors' list; how many patients have it as theirs on the
   right. */
.rx-pharmacy-option[b-mli7cl7nyj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-bottom: 1px solid var(--ui-card-border, #e1e8ee);
    background: none;
    text-align: left;
    color: inherit;
}

.rx-pharmacy-option:hover[b-mli7cl7nyj],
.rx-pharmacy-option:focus-visible[b-mli7cl7nyj] {
    background: var(--ui-hover, #f1f5fb);
}

.rx-pharmacy-uses[b-mli7cl7nyj] {
    flex: none;
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--ui-page, #f3f6fa);
    color: var(--bs-secondary-color, #566468);
    font-size: 0.8rem;
}

.rx-pharmacy-more[b-mli7cl7nyj] {
    margin-top: 0.75rem;
}
/* /Features/Profile/EditProfile/DisplayPreview.razor.rz.scp.css */
/* The font list beside its preview (DisplayPreview.razor): a list box tall enough to show every font, each option in its own font. */
.font-list[b-w4f9ljt8tw] {
    flex-grow: 1;
    min-height: 16rem;
}

.font-list option[b-w4f9ljt8tw] {
    padding: 0.35rem 0.5rem;
}

.font-preview[b-w4f9ljt8tw] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    padding: 1rem 1.25rem;
}

.font-preview .table[b-w4f9ljt8tw] {
    font-size: inherit;
}
/* /Features/Visits/EditVisit/BillingCodesPanel.razor.rz.scp.css */
/* The search list itself is app.css's .search-combobox (shared with Prescriptions' drug list, BL-0617).
   "Show all codes" (BL-0286): every code, under a heading per kind; one already on the Visit is greyed and can't be picked again. */
.billing-code-all[b-i0oo9dtx9s] {
    max-height: 22rem;
}

.billing-code-group[b-i0oo9dtx9s] {
    position: sticky;
    top: 0;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #6c757d);
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.billing-code-attached[b-i0oo9dtx9s] {
    cursor: default;
    color: var(--bs-secondary-color, #6c757d);
}

.billing-code-attached:hover[b-i0oo9dtx9s] {
    background-color: transparent;
}
/* /Features/Visits/EditVisit/EditVisit.razor.rz.scp.css */
/* BL-0476: the Visit as a workspace. The list of parts on the left, in view while the chosen part scrolls (below the sticky patient banner),
   the chosen part filling the rest. On a narrow screen (an iPad held upright) the list becomes a strip across the top. */
.visit-workspace[b-7n3rublmci] {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    /* BL-0517: at least a window tall, so a short part (Billing codes) chosen while scrolled down starts where the last one did, under the list,
       instead of the page having to jump back towards its top. The extra height goes below the part. */
    min-height: 100vh;
    align-content: start;
}

.visit-nav[b-7n3rublmci] {
    position: sticky;
    top: calc(var(--visit-sticky-top, 5rem) + 1rem);   /* under the floating patient bar, whose height visit-sections.js keeps (BL-0517) */
    border-right: 1px solid var(--bs-border-color, #d8e3e5);
    padding-right: 0.75rem;
}

.visit-nav-list[b-7n3rublmci] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

.visit-nav-item[b-7n3rublmci] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.75rem;          /* finger-sized (CONVENTIONS.md, touch-target) */
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    color: inherit;
    text-align: left;
}

.visit-nav-item:hover[b-7n3rublmci],
.visit-nav-item:focus-visible[b-7n3rublmci] {
    background: var(--bs-tertiary-bg, #eef3f4);
}

/* A part waiting for Start Visit (BL-0479): named, its status says why, but it can't be opened. */
.visit-nav-item:disabled[b-7n3rublmci] {
    color: var(--bs-secondary-color, #566468);
    cursor: not-allowed;
}

/* The chosen item keeps the others' weight, so a long name doesn't widen and wrap when chosen (owner, 2026-11-01, BL-0621): the tint, the
   blue bar and the clinic's dark blue show it. */
.visit-nav-item.current[b-7n3rublmci] {
    background: color-mix(in srgb, var(--tctmj-primary, #315bb8) 12%, #fff);
    color: var(--tctmj-primary-darker, #1d3a78);
    box-shadow: inset 3px 0 0 var(--tctmj-primary, #315bb8);
}

.visit-nav-mark[b-7n3rublmci] {
    flex: 0 0 1rem;
    text-align: center;
}

.visit-nav-title[b-7n3rublmci] {
    flex: 1 1 auto;
}

/* BL-0605: a stage's name over its parts (Intake, Exam, Sign-off), small and quiet; the reference parts above have none. A line closes the
   last stage before Addenda and More. */
.visit-nav-stage[b-7n3rublmci] {
    margin: 0.85rem 0 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #566468);
}

.visit-nav-stage-end[b-7n3rublmci] {
    margin: 0.6rem 0 0.4rem;
    border-top: 1px solid var(--bs-border-color, #d8e3e5);
}

.visit-nav-status[b-7n3rublmci] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--bs-secondary-color, #566468);
}

/* BL-0505: "needs a look": the mark and the count in the attention colour (dark enough for AA on white), so the part stands out in the list. */
.visit-nav-item.needs-look .visit-nav-mark[b-7n3rublmci],
.visit-nav-item.needs-look .visit-nav-status[b-7n3rublmci] {
    color: #8a4b00;
    font-weight: 700;
}

.visit-section-hidden[b-7n3rublmci] {
    display: none;
}

/* BL-0581: the narrative's boxes under Clinical Narrative, indented beneath it with a line joining them to it; smaller, but still
   finger-sized. */
.visit-nav-sub[b-7n3rublmci] {
    list-style: none;
    margin: 0.1rem 0 0.25rem 1.1rem;
    padding: 0 0 0 0.4rem;
    border-left: 1px solid var(--bs-border-color, #d8e3e5);
}

.visit-nav-subitem[b-7n3rublmci] {
    min-height: 2.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

.visit-nav-subitem .visit-nav-mark[b-7n3rublmci] {
    color: var(--bs-secondary-color, #566468);
}

.visit-next[b-7n3rublmci] {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0 0.5rem;
}

.visit-frame[b-7n3rublmci] {
    width: 100%;
    height: 75vh;
    border: 1px solid var(--bs-border-color, #d8e3e5);
    border-radius: 0.4rem;
}

.visit-frame-short[b-7n3rublmci] {
    height: 32rem;
}

/* BL-0517 (owner 2026-10-27): on a narrow screen (an iPad held upright) the parts are rounded buttons that wrap onto as many rows as needed, so
   every part is in view and reads as a menu (one line across the top was cut off at the right, reached only by a sideways swipe). */
@media (max-width: 900px) {
    /* The strip of parts (an upright iPad) keeps the stages' order without their names, which would crowd it. */
    .visit-nav-stage[b-7n3rublmci] {
        display: none;
    }

    .visit-workspace[b-7n3rublmci] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    /* Pinned under the floating patient bar while the part scrolls beneath it (owner 2026-10-27), on the page's own background so the part
       slides under it cleanly. Under the bar, never over it (its z-index is 1020). */
    .visit-nav[b-7n3rublmci] {
        position: sticky;
        top: var(--visit-sticky-top, 0px);
        z-index: 1010;
        border-right: 0;
        padding: 0.5rem 0 0.4rem;
        background: var(--ui-page, #f3f6fa);
        border-bottom: 1px solid var(--ui-card-border, #e1e8ee);
    }

    .visit-nav-list[b-7n3rublmci] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin: 0 0 0.25rem;
    }

    .visit-nav-item[b-7n3rublmci] {
        width: auto;
        align-items: center;
        white-space: nowrap;
        min-height: 2.6rem;
        padding: 0.35rem 0.85rem;
        border: 1px solid var(--ui-card-border, #e1e8ee);
        border-radius: 999px;
        background: var(--ui-card, #fff);
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    .visit-nav-mark[b-7n3rublmci] {
        flex: none;
    }

    /* The strip lists the boxes only while the narrative is open, on a row of their own under the parts, so it doesn't double in length. */
    .visit-nav-list > li.open:has(.visit-nav-sub)[b-7n3rublmci] {
        display: contents;
    }

    .visit-nav-list > li:not(.open) > .visit-nav-sub[b-7n3rublmci] {
        display: none;
    }

    .visit-nav-sub[b-7n3rublmci] {
        order: 99;
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
        margin: 0.15rem 0 0;
        padding: 0.4rem 0 0;
        border-left: 0;
        border-top: 1px dashed var(--ui-card-border, #e1e8ee);
    }

    .visit-nav-item.current[b-7n3rublmci] {
        background: var(--tctmj-primary-soft, #eef3ff);
        border-color: var(--tctmj-primary, #315bb8);
        box-shadow: 0 0 0 1px var(--tctmj-primary, #315bb8);
        color: var(--tctmj-primary-darker, #1d3a78);
    }
}

/* Printed, the Visit is every part in order, not the one on screen. */
@media print {
    .visit-workspace[b-7n3rublmci] {
        display: block;
    }

    .visit-nav[b-7n3rublmci],
    .visit-frame[b-7n3rublmci] {
        display: none;
    }

    .visit-section-hidden[b-7n3rublmci] {
        display: block;
    }
}

/* BL-0490: what the visit is and who is on it, under the heading. */
.visit-what[b-7n3rublmci] {
    font-weight: 600;
    color: var(--tctmj-primary-darker, #1d3a78);
}

/* BL-0539: the "Start the Visit" note under the patient banner: the banner's padding, corners and height (its 2.4rem initials circle plus
   padding and border), so the two read as one band rather than a thin bar and a fat box. */
.visit-start-banner[b-7n3rublmci] {
    padding: 0.6rem 1rem;
    min-height: calc(2.4rem + 1.2rem + 2px);
    border-radius: var(--ui-radius, 0.75rem);
    margin-bottom: 1rem;
}
/* /Features/Visits/EditVisit/NarrativeBox.razor.rz.scp.css */
/* ADR 0087: the phrase picker below each narrative box. Unlike the billing-code combobox (BillingCodesPanel.razor.css)
   this is deliberately NOT a floating overlay (position: absolute) — that combobox sits in a single-line toolbar,
   where a floating dropdown avoids constantly reflowing the row; here it sits right after a multi-line textarea a
   Provider is actively composing, and a floating dropdown at that spot would cover whatever was just typed. A plain
   block only ever pushes down what comes after it (the next field's label, while actively searching) — never the
   narrative text itself. */
.narrative-phrase-results[b-ouxh1lzyir] {
    margin-top: 0.25rem;
    max-height: 12rem;
    overflow-y: auto;
    /* --bs-tertiary-bg alone (one Bootstrap gray step off the page background) turned out too close to the page's own
       near-white background to actually notice — measured ~3/255 per channel in a real browser, not a difference a
       person looking at the page would see. --bs-secondary-bg is a full, clearly visible step, plus a real shadow for
       elevation (this is a transient popup-like surface, unlike the always-present narrative-section-heading bars
       below, which stay flat/flush with the page on purpose). */
    background-color: var(--bs-secondary-bg, #e9ecef);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.narrative-phrase-option[b-ouxh1lzyir] {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
}

/* BL-0460: the results as a tree. A caption is a heading, not an option; its phrases are indented under it, as in My Phrase Library. */
.narrative-phrase-caption[b-ouxh1lzyir] {
    padding: 0.35rem 0.75rem 0.15rem;
    font-weight: 600;
    cursor: default;
}

.narrative-phrase-option.under-caption[b-ouxh1lzyir] {
    padding-left: 1.75rem;
}

.narrative-phrase-option:hover[b-ouxh1lzyir] {
    /* Lifts to the page's own background rather than yet another gray step — reads clearly regardless of exactly
       which grays the box itself ends up using. */
    background-color: var(--bs-body-bg, #fff);
}

/* ADR 0087: each of the five narrative fields gets its own caption bar spanning the full width, so the boundary
   between one section (Chief Complaint, HPI, ...) and the next is obvious at a glance — five stacked plain labels
   read as one continuous block otherwise. Extends the app's existing .section-heading typography (app.css; the same
   treatment check-in's form names use) with a background band, since a section-heading on its own is plain text with
   no visual weight — enough to divide forms inside a review, not enough on its own to separate five same-panel
   fields a Provider is actively typing into. First attempt used --bs-tertiary-bg, the same token
   CollapsiblePanel's own body already sits on (CollapsiblePanel.razor.css) — same color as its own container, so
   the "band" was invisible in a real browser despite being a real CSS rule. The same mistake, in the same family,
   as the phrase-picker result box earlier in ADR 0087 — bumped to the same fix: a full, clearly distinct step. */
.narrative-section-heading[b-ouxh1lzyir] {
    /* BL-0524: the same band as the tables' column captions. */
    background-color: var(--ui-caption-band, #e9eff6);
    color: var(--ui-caption-ink, #2b3f52);
    border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.35rem;
}

/* auto-grow-textarea.js sets the height directly to fit the content (a phrase picker can add several lines at
   once) — no manual resize handle to fight with, and no internal scrollbar once it's already grown to fit. */
.narrative-autogrow[b-ouxh1lzyir] {
    resize: none;
    overflow-y: hidden;
}

/* BL-0377: a locked Visit's sections, each in a box: the caption band above (.narrative-section-heading, its corners
   inside the box's) and the text below, its line breaks kept. */
.narrative-box[b-ouxh1lzyir] {
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background-color: var(--bs-body-bg, #fff);
}

.narrative-box .narrative-section-heading[b-ouxh1lzyir] {
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.narrative-box-body[b-ouxh1lzyir] {
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    white-space: pre-wrap;
}

.narrative-box-body.muted[b-ouxh1lzyir] {
    color: var(--bs-secondary-color);
    font-style: italic;
}
/* /Features/Visits/EditVisit/NarrativePanel.razor.rz.scp.css */
/* BL-0581: one box chosen under Clinical Narrative in the list of parts; the others are hidden but kept in the form. Printed, all show. */
.narrative-box-hidden[b-8qpgqnf2v8] {
    display: none;
}

@media print {
    .narrative-box-hidden[b-8qpgqnf2v8] {
        display: block;
    }
}

/* BL-0606: the intake's reason for visit above the Chief complaint, set apart as something the assistant recorded, not a box to type in. */
.narrative-intake[b-8qpgqnf2v8] {
    padding: 0.5rem 0.75rem;
    background: var(--ui-page, #f3f6fa);
    border-left: 3px solid var(--tctmj-teal, #108c98);
    border-radius: var(--ui-radius-sm, 0.5rem);
}
/* /Features/Visits/EditVisit/PhrasePickerDialog.razor.rz.scp.css */
/* BL-0254: the "All phrases" popup, over a dimmed page; on a phone-sized screen it fills the screen. The header (search) and footer (Insert)
   stay put while the list between them scrolls. BL-0564: one fixed height, near the top, so it doesn't shrink and move as a search narrows
   the list. */
.phrase-dialog-backdrop[b-rfxmx3rdbt] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 1rem 1rem;
    background-color: rgba(0, 0, 0, 0.45);
}

.phrase-dialog[b-rfxmx3rdbt] {
    display: flex;
    flex-direction: column;
    width: min(40rem, 100%);
    height: min(80vh, 46rem);
    background-color: var(--bs-body-bg, #fff);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    outline: none;
}

.phrase-dialog-header[b-rfxmx3rdbt],
.phrase-dialog-footer[b-rfxmx3rdbt] {
    padding: 0.85rem 1rem;
}

.phrase-dialog-header[b-rfxmx3rdbt] {
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.phrase-dialog-body[b-rfxmx3rdbt] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 1rem;
}

.phrase-dialog-footer[b-rfxmx3rdbt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.phrase-dialog-group[b-rfxmx3rdbt] {
    margin: 0.5rem 0 0.75rem;
}

.phrase-dialog-caption[b-rfxmx3rdbt] {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    padding: 0.2rem 0.5rem;
    background-color: var(--bs-secondary-bg, #e9ecef);
    border-radius: var(--bs-border-radius, 0.375rem);
}

/* Finger-sized rows for the tablet. */
.phrase-dialog-group .form-check[b-rfxmx3rdbt] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

@media (max-width: 575.98px) {
    .phrase-dialog-backdrop[b-rfxmx3rdbt] {
        padding: 0;
    }

    .phrase-dialog[b-rfxmx3rdbt] {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* BL-0525: a phrase's use count at the right of its row, quiet. */
.phrase-dialog-item[b-rfxmx3rdbt] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.phrase-dialog-item .form-check-label[b-rfxmx3rdbt] {
    flex: 1 1 auto;
}

.phrase-dialog-uses[b-rfxmx3rdbt] {
    flex: none;
    min-width: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background-color: var(--ui-caption-band, #e9eff6);
    color: var(--ui-caption-ink, #2b3f52);
    font-size: 0.75rem;
    text-align: center;
}
/* /Features/Visits/EditVisit/VitalsPanel.razor.rz.scp.css */
/* Save and the hand-off (Ready for provider, or Intake & vitals done; BL-0189, BL-0650): same width as well as height, so the two
   stacked primary actions line up as a deliberate pair rather than whichever happens to be as wide as its own text. Reopen stays its
   own smaller secondary-action size: this pairing is specifically about Save and the hand-off. */
.vitals-primary-action[b-ozi6jsib4c] {
    width: 8rem;
}

/* The boxes are tablet-sized (touch-target), so each caption is centred on its box rather than on the text's baseline. */
.vitals-beside .form-row[b-ozi6jsib4c] {
    align-items: center;
}
/* /Features/Visits/NarrativePhrases/PhraseLibraryMenu.razor.rz.scp.css */
/* BL-0616: the page's other parts (Phrase file, Copy to a Provider) come after a line under the sections. */
li:not(.phrase-menu-other) + .phrase-menu-other[b-aoolx0oaza] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color, #d8e3e5);
}

/* On a narrow screen the menu is a row of chips (app.css), with no line between. */
@media (max-width: 900px) {
    li:not(.phrase-menu-other) + .phrase-menu-other[b-aoolx0oaza] {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}
/* /Features/Visits/NarrativePhrases/PhraseSectionPanel.razor.rz.scp.css */
/* BL-0380: a section's phrases as a tree. The toolbar sits on the section's title line and hides while the section is folded. Each line is its
   own small form (so Enter saves that line): the text box takes the width, ✓ sits on its right. A caption is a band, as the Visit's narrative
   captions are (NarrativePanel.razor.css), with its phrases indented under it; the selected line is marked with a blue bar and tint. */
.phrase-toolbar[b-dfozx30yjv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

[b-dfozx30yjv] details:not([open]) .phrase-toolbar {
    display: none;
}

.phrase-line[b-dfozx30yjv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-left: 3px solid transparent;
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
    cursor: pointer;
}

.phrase-line input[b-dfozx30yjv] {
    flex: 1 1 10rem;
    min-width: 0;
}

.phrase-line.under-caption[b-dfozx30yjv],
.phrase-empty[b-dfozx30yjv] {
    padding-left: 2.25rem;
}

.caption-line[b-dfozx30yjv] {
    margin-top: 0.6rem;
    /* BL-0524: the same band as the tables' column captions. */
    background-color: var(--ui-caption-band, #e9eff6);
    color: var(--ui-caption-ink, #2b3f52);
    border-radius: var(--bs-border-radius, 0.375rem);
    border-bottom: none;
}

.phrase-line.selected[b-dfozx30yjv] {
    border-left-color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
}

.phrase-line.adding[b-dfozx30yjv] {
    cursor: default;
}

.phrase-line .fold[b-dfozx30yjv] {
    padding: 0 0.25rem;
    text-decoration: none;
    color: var(--bs-body-color);
}

.phrase-line .save[b-dfozx30yjv] {
    min-width: 2.25rem;
}

.phrase-empty[b-dfozx30yjv] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* BL-0381: dragging a phrase onto another caption. */
.phrase-grip[b-dfozx30yjv] {
  cursor: grab;
  color: var(--bs-secondary-color);
  padding: 0 .25rem;
  user-select: none;
}

.drop-target[b-dfozx30yjv] {
  outline: 2px dashed var(--bs-primary);
  outline-offset: 2px;
}

.phrase-drop-plain[b-dfozx30yjv] {
  border: 2px dashed var(--bs-primary);
  border-radius: .375rem;
  padding: .35rem .75rem;
  margin-bottom: .5rem;
  color: var(--bs-primary);
}
/* /Features/Visits/PatientVisitHistory/VisitHistoryTable.razor.rz.scp.css */
/* BL-0555: a Visit's folded timeline sits right under its row, as part of it: no rule between the two. */
.visit-history > tbody > tr:has(+ .visit-history-timeline) > td[b-avok97qunt] {
    border-bottom: 0;
}

.visit-history-timeline > td[b-avok97qunt] {
    padding-top: 0;
}
/* /Features/Visits/Prescriptions/DrugInfoDialog.razor.rz.scp.css */
/* BL-0619: the More info popup. A fixed size (docs/UI.md), the menu of parts on the left as on the Visit (app.css .side-menu), the chosen part
   scrolling on the right, the actions at the bottom. The label's text is set for reading: short lines, room between paragraphs. */
/* BL-0676: the browser's modal dialog: the page behind it dimmed by its backdrop. */
.drug-info[b-kxjncbmt7s] {
    width: min(64rem, calc(100% - 2rem));
    max-width: none;
    height: min(88vh, 52rem);
    max-height: none;
    margin: 4vh auto auto;
    padding: 0;
    border: 0;
    background-color: var(--bs-body-bg, #fff);
    color: inherit;
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    outline: none;
}

.drug-info[open][b-kxjncbmt7s] {
    display: flex;
    flex-direction: column;
}

.drug-info[b-kxjncbmt7s]::backdrop {
    background-color: rgba(0, 0, 0, 0.45);
}

.drug-info-header[b-kxjncbmt7s],
.drug-info-footer[b-kxjncbmt7s] {
    padding: 0.85rem 1.25rem;
}

.drug-info-header[b-kxjncbmt7s] {
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

.drug-info-main[b-kxjncbmt7s] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
}

/* The menu: the Visit's side menu, with buttons for links. */
.drug-info-menu[b-kxjncbmt7s] {
    overflow-y: auto;
    border-right: 1px solid var(--bs-border-color, #d8e3e5);
    padding: 0.75rem;
}

.drug-info-menu ul[b-kxjncbmt7s] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drug-info-menu button[b-kxjncbmt7s] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    color: inherit;
    text-align: left;
}

.drug-info-menu button:hover[b-kxjncbmt7s],
.drug-info-menu button:focus-visible[b-kxjncbmt7s] {
    background: var(--bs-tertiary-bg, #eef3f4);
}

/* The chosen item keeps the others' weight, so a long name doesn't widen and wrap when chosen (owner, 2026-11-01, BL-0621): the tint, the
   blue bar and the clinic's dark blue show it. */
.drug-info-menu button.current[b-kxjncbmt7s] {
    background: color-mix(in srgb, var(--tctmj-primary, #315bb8) 12%, #fff);
    color: var(--tctmj-primary-darker, #1d3a78);
    box-shadow: inset 3px 0 0 var(--tctmj-primary, #315bb8);
}

/* A boxed warning is the FDA's strongest: a red-pink dot, as a problem is shown elsewhere (docs/UI.md). */
.drug-info-alert-dot[b-kxjncbmt7s] {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--bs-danger, #c0354d);
}

.drug-info-body[b-kxjncbmt7s] {
    overflow-y: auto;
    padding: 1rem 1.5rem 1.25rem;
    outline: none;
    line-height: 1.6;
}

.drug-info-body > p[b-kxjncbmt7s],
.drug-info-body > ul[b-kxjncbmt7s],
.drug-info-body > .drug-info-subhead[b-kxjncbmt7s],
.drug-info-summary[b-kxjncbmt7s] {
    max-width: 44rem;
}

.drug-info-body > p[b-kxjncbmt7s] {
    margin-bottom: 0.85rem;
}

.drug-info-body > ul[b-kxjncbmt7s] {
    padding-left: 1.25rem;
    margin-bottom: 0.85rem;
}

.drug-info-body > ul li[b-kxjncbmt7s] {
    margin-bottom: 0.3rem;
}

.drug-info-part-title[b-kxjncbmt7s] {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.drug-info-subhead[b-kxjncbmt7s] {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.4rem;
}

.drug-info-summary[b-kxjncbmt7s] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
}

.drug-info-summary dt[b-kxjncbmt7s] {
    font-weight: 600;
}

.drug-info-summary dd[b-kxjncbmt7s] {
    margin: 0;
}

.drug-info-table[b-kxjncbmt7s] {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.drug-info-footer[b-kxjncbmt7s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    border-top: var(--bs-border-width, 1px) solid var(--bs-border-color, #dee2e6);
}

/* An upright iPad: the menu becomes a row across the top, as on the Visit (docs/UI.md). */
@media (max-width: 900px) {
    .drug-info-main[b-kxjncbmt7s] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .drug-info-menu[b-kxjncbmt7s] {
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color, #d8e3e5);
        padding: 0.5rem 0.75rem;
    }

    .drug-info-menu ul[b-kxjncbmt7s] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .drug-info-menu button[b-kxjncbmt7s] {
        width: auto;
        min-height: 2.5rem;
        border: 1px solid var(--bs-border-color, #d8e3e5);
        border-radius: 999px;
    }

    .drug-info-menu button.current[b-kxjncbmt7s] {
        box-shadow: none;
        border-color: var(--tctmj-primary, #315bb8);
    }
}

/* A phone-width screen: the whole screen. */
@media (max-width: 575.98px) {
    .drug-info[b-kxjncbmt7s] {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
    }

    .drug-info-summary[b-kxjncbmt7s] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Visits/Prescriptions/FaxToPharmacy.razor.rz.scp.css */
/* BL-0676 (owner 2026-11-04): on the Visit, the fax box uses its width: closed, what is left to fax and the button on one row; open, the steps
   on the left and the prescriptions to tick with the buttons on the right, once the box is wide enough (not on an upright iPad). */
.rx-fax[b-wij918v9fw] {
    container-type: inline-size;
}

.rx-fax-row[b-wij918v9fw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

@container (min-width: 48rem) {
    .rx-fax-cols[b-wij918v9fw] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 2rem;
        align-items: start;
    }
}
/* /Features/Visits/Prescriptions/PrescriptionHistoryList.razor.rz.scp.css */
/* BL-0666: one row per prescription, the actions at the right; on a narrow screen the actions go under the text. */
.rx-history-row[b-b6f5nhpcng] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 0;
}

.rx-history-row + .rx-history-row[b-b6f5nhpcng] {
    border-top: 1px solid var(--ui-card-border, #e1e8ee);
}

.rx-history-number[b-b6f5nhpcng] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
/* /Features/Visits/Prescriptions/PrescriptionPage.razor.rz.scp.css */
/* ADR 0118, BL-0661: the prescription's own marks, laid out as a prescription pad. Dark on white, so it copies and faxes plainly; the number and
   the quantities stand out to a pharmacist. */
.rx-head[b-ax3k4vddqw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rx-prescriber-name[b-ax3k4vddqw] {
    font-size: 12.5pt;
    font-weight: 700;
    color: var(--paper-navy);
}

.rx-ids[b-ax3k4vddqw] {
    display: flex;
    gap: 1.25rem;
    font-size: 9.5pt;
    color: var(--paper-muted);
}

.rx-number[b-ax3k4vddqw] {
    font-size: 12.5pt;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.rx-date[b-ax3k4vddqw] {
    font-size: 9.5pt;
    color: var(--paper-muted);
}

.rx-body[b-ax3k4vddqw] {
    display: grid;
    grid-template-columns: 0.75in 1fr;
    border: 1.5pt solid var(--paper-navy);
    border-radius: 4px;
    padding: 0.9rem 1.1rem 1rem 0.6rem;
    margin-bottom: 0.4rem;
    break-inside: avoid;
}

.rx-symbol[b-ax3k4vddqw] {
    color: var(--paper-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34pt;
    line-height: 1;
    text-align: center;
}

.rx-medicine[b-ax3k4vddqw] {
    font-size: 14pt;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.7rem;
}

.rx-line[b-ax3k4vddqw] {
    margin-bottom: 0.6rem;
}

.rx-pair[b-ax3k4vddqw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.rx-substitution[b-ax3k4vddqw] {
    display: flex;
    gap: 2rem;
}

.rx-tick[b-ax3k4vddqw] {
    font-size: 12pt;
}

/* Room to sign above a line, the prescriber's name printed under it. */
.rx-sign[b-ax3k4vddqw] {
    margin: 2.6rem 0 0.9rem auto;
    width: 62%;
}

.rx-sign-line[b-ax3k4vddqw] {
    border-bottom: 1pt solid var(--paper-ink);
    height: 2.2rem;
    margin-bottom: 0.2rem;
}

.rx-notice[b-ax3k4vddqw] {
    font-size: 8.5pt;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid var(--paper-rule);
    border-bottom: 1px solid var(--paper-rule);
    padding: 0.35rem 0;
}

.rx-void[b-ax3k4vddqw] {
    border: 3pt solid var(--paper-ink);
    font-size: 14pt;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* BL-0658: a reprint of a faxed prescription, marked so it isn't filled a second time. */
.rx-faxed[b-ax3k4vddqw] {
    border: 3pt double var(--paper-ink);
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    text-align: center;
}
/* /Features/Visits/Prescriptions/SendPrescriptions.razor.rz.scp.css */
/* BL-0664: the prescription cards of Send prescriptions (the page's layout is app.css's work page, BL-0665). */
.rx-send-card[b-yoegdf6w95] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
}

.rx-send-card + .rx-send-card[b-yoegdf6w95] {
    border-top: 1px solid var(--ui-card-border, #e1e8ee);
}

.rx-send-number[b-yoegdf6w95] {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.rx-send-medicine[b-yoegdf6w95] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ui-heading, #172a3a);
    margin: 0.3rem 0 0.1rem;
}
/* /Features/Visits/VisitDocuments/LetterHistoryList.razor.rz.scp.css */
/* BL-0671: as the Chart's prescriptions (BL-0666). */
.letter-history-row[b-72qm6lz9bg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 0;
}

.letter-history-row + .letter-history-row[b-72qm6lz9bg] {
    border-top: 1px solid var(--ui-card-border, #e1e8ee);
}

.letter-history-reason[b-72qm6lz9bg] {
    white-space: pre-line;
}
/* /Features/Visits/VisitDocuments/ReferralReportDocument.razor.rz.scp.css */
/* BL-0671: the thank-you on the report's cover sheet, set apart from the fax details above it. */
.report-thanks[b-t4zo6ufe4i] {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--paper-rule);
}
/* /Features/Visits/VisitDocuments/VisitDocumentsPanel.razor.rz.scp.css */
/* BL-0671: the Visit's documents, one after another when all are shown, with a rule between them. */
.doc-part + .doc-part[b-zqahqwhjgc] {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ui-card-border, #e1e8ee);
}

.doc-address[b-zqahqwhjgc],
.doc-reason[b-zqahqwhjgc] {
    white-space: pre-line;
}

/* BL-0678 (owner 2026-11-04): a letter's card in two columns once it is wide enough (not on an upright iPad): who and why on the left; the
   fax, where the letter is and the buttons on the right. Sized by the card, as the Visit's menu takes part of the width. */
.doc-letter[b-zqahqwhjgc],
.doc-part > .border[b-zqahqwhjgc] {
    container-type: inline-size;
}

@container (min-width: 48rem) {
    .doc-cols[b-zqahqwhjgc] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 2rem;
        align-items: start;
    }
}

.doc-fax[b-zqahqwhjgc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}