:root {
    /* Auth surface tokens. Deep slate-teal reads calm and clinical; it is used
       for the logo mark and the primary button, not as a background field. */
    --carems-auth-deep: #0f2b3d;
    --carems-auth-ink: #16283a;
    --carems-auth-muted: #5b6b7a;
    --carems-auth-accent: #1c7fa8;
    --carems-auth-accent-ink: #0f5f80;
    --carems-auth-accent-ring: rgba(28, 127, 168, .18);
    --carems-auth-border: #cfdae4;
    --carems-auth-hairline: #e7edf2;
    --carems-auth-surface-border: #e0e7ee;
    /* A desaturated tint of the card's own hue, so the canvas and the card read
       as one material under different light rather than two colour blocks. */
    --carems-auth-canvas: #fafbfc;
    /* Scenery panels behind the card: hairline edge, barely-there fill. */
    --carems-auth-panel-line: rgba(186, 209, 226, .5);
    --carems-auth-panel-fill: rgba(240, 248, 253, .5);
    --carems-auth-panel-fill-warm: rgba(247, 246, 250, .6);
    --carems-auth-card: #ffffff;
    /* Fields sit a shade below the card so they read as recessed into it, then
       go pure white on focus. */
    --carems-auth-field: #fcfdfe;
    --carems-auth-radius: 2rem;
    --carems-auth-field-radius: .75rem;
}

.content {
    padding-top: 1.1rem;
}

/* Blazor focuses the page heading after navigation so assistive technology starts
   reading in the right place. That focus is programmatic and the heading is not
   keyboard-reachable, so it must not paint a focus ring for sighted users. */
h1[tabindex="-1"]:focus {
    outline: none;
}

/* Valid fields get no decoration: a green ring on every filled field is noise. */
.invalid {
    outline: 0;
    border-color: #d1383b !important;
    box-shadow: 0 0 0 4px rgba(255, 69, 58, .14);
}

.validation-message {
    color: var(--c-danger, #c42b2b);
    font-size: .8rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--carems-auth-canvas);
}

/* ───────────────────────────── Auth composition ─────────────────────────────
   One centred card on a quiet canvas.

   The card and the page are the same material: the canvas is a desaturated tint
   of the card's own hue, with a single soft pool of light behind the card that
   fades outward. The card reads as the lit part of one surface rather than a
   panel pasted onto a different background.

   Proportions follow the restraint of a first-party sign-in screen — a large
   brand mark with room to breathe, one short heading, and generous space around
   a small number of controls. No imagery, no marketing copy, no colour blocking. */

.auth-page {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1rem, 4vw, 3.5rem);
    /* Near-white base with two soft washes bled in from opposite corners. Both fade out
       well before the middle, so the centre — where the card sits — stays clean. */
    background:
        linear-gradient(118deg, rgba(214, 238, 246, .55), rgba(255, 255, 255, 0) 30%),
        linear-gradient(206deg, rgba(226, 232, 245, .5), rgba(255, 255, 255, 0) 32%),
        var(--carems-auth-canvas);
    /* The decorative panels below are clipped to the page rather than allowed to
       stretch the document. */
    overflow: hidden;
    isolation: isolate;
}

/* Two oversized rounded panels, rotated slightly and drawn almost entirely in hairline
   and near-white. They give the background structure to catch the light without any
   pattern, imagery or colour block. Purely decorative, so they are pseudo-elements and
   never enter the accessibility tree. */
.auth-page::before,
.auth-page::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid var(--carems-auth-panel-line);
    border-radius: 1.75rem;
    pointer-events: none;
}

.auth-page::before {
    top: -18%;
    left: -14%;
    width: 62%;
    height: 96%;
    background: var(--carems-auth-panel-fill);
    transform: rotate(-18deg);
}

.auth-page::after {
    right: -16%;
    bottom: -26%;
    width: 58%;
    height: 88%;
    background: var(--carems-auth-panel-fill-warm);
    transform: rotate(-14deg);
}

/* The panels are scenery for a wide screen. On a phone the card is full-bleed and
   covers them anyway, and on a short window they only add noise. */
@media (max-width: 767.98px) {
    .auth-page::before,
    .auth-page::after { display: none; }
}

.auth-surface {
    width: min(100%, 36rem);
    padding: clamp(2rem, 4.5vw, 3.5rem);
    border: 1px solid var(--carems-auth-surface-border);
    border-radius: var(--carems-auth-radius);
    background: var(--carems-auth-card);
    /* Three layers: a wide ambient shadow, a closer contact shadow, and a hairline
       inner highlight along the top edge. The highlight is what stops a large
       radius from looking flat at this size. */
    box-shadow:
        0 2rem 4rem rgba(15, 43, 61, .075),
        0 .25rem 1rem rgba(15, 43, 61, .04),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.auth-main-inner { width: 100%; }

/* ── Brand ────────────────────────────────────────────────────────────────────
   Stacked and centred rather than a small inline lockup. The mark is the first
   thing on the screen and is given room, which is what makes the card read as
   composed rather than merely tidy. */

/* The mark sits directly above the heading with only a small gap, so the two read as one
   block the way a first-party sign-in screen does — mark, then the sentence naming what
   you are signing in to, then the fields. */
.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* The source file is 250x180 but the artwork occupies only the middle 237x76 — roughly
   28% empty above and 30% below. Sizing by height therefore shrank the logo to a third of
   the space it appeared to take, and sizing by width left a large hole under it.

   The box is set to the artwork's own proportions and object-fit: cover trims the vertical
   padding, so the logo fills the space it is given. Width still drives the scale, so the
   wordmark is never cropped horizontally.

   If the file is ever replaced with one that is trimmed, drop the height and the
   object-fit and this becomes a plain width rule. */
.auth-logo-img {
    width: 9.25rem;
    max-width: 62%;
    height: 3rem;
    object-fit: cover;
    object-position: center;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */

.auth-heading {
    margin-bottom: 2.25rem;
    text-align: center;
}
.auth-heading h1 {
    margin: 0;
    color: var(--carems-auth-ink);
    /* 2rem at 600 with a line-height barely above the cap height: the heading is the
       anchor of the screen, and at this size it has to sit tight rather than sprawl. */
    font-size: clamp(1.625rem, 3.2vw, 2rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.024em;
}
.auth-subtitle {
    margin: .625rem auto 0;
    max-width: 24rem;
    color: var(--carems-auth-muted);
    font-size: .9375rem;
    line-height: 1.55;
}
.auth-eyebrow {
    margin: 0 0 .5rem;
    color: var(--carems-auth-accent-ink);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: 1.375rem;
    padding: .8125rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--carems-auth-field-radius);
    font-size: .875rem;
    line-height: 1.5;
    text-align: left;
}
.auth-alert i { flex: 0 0 auto; margin-top: .1rem; font-size: 1.05rem; }
.auth-alert-error { border-color: #f0c3c3; color: #8a1c1c; background: #fdf4f4; }
.auth-alert-info { border-color: #b8dcea; color: #10485e; background: #f1f8fb; }

/* ── Fields ───────────────────────────────────────────────────────────────── */

.auth-field { margin-bottom: 1.125rem; }
.auth-field-label {
    display: block;
    margin-bottom: .5rem;
    color: var(--carems-auth-ink);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -.003em;
}
.auth-field-label .auth-required { color: #b42318; }

.auth-input {
    display: block;
    width: 100%;
    /* 3.25rem is comfortably past the 44px tap minimum and is what gives the
       form its unhurried feel; the fields are the largest objects on the card. */
    min-height: 3.25rem;
    padding: .8125rem 1rem;
    border: 1px solid var(--carems-auth-border);
    border-radius: var(--carems-auth-field-radius);
    color: var(--carems-auth-ink);
    background-color: var(--carems-auth-field);
    font-size: 1rem;
    line-height: 1.4;
    /* Very slight recess, so an empty field reads as somewhere to type. */
    box-shadow: inset 0 1px 2px rgba(15, 43, 61, .035);
}
.auth-input::placeholder { color: #6d7c8a; }
.auth-input:hover { border-color: #b4c4d1; }
.auth-input:focus {
    border-color: var(--carems-auth-accent);
    background-color: #fff;
    outline: 2px solid transparent;
    outline-offset: 2px;
    /* A single confident ring rather than a glow: the focused field should be
       unmistakable at a glance and to anyone navigating by keyboard. */
    box-shadow: 0 0 0 .1875rem var(--carems-auth-accent-ring);
}
.auth-input[aria-invalid="true"] { border-color: #d0524a; }
.auth-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 .1875rem rgba(208, 82, 74, .2); }

.auth-field-hint { margin: .4375rem 0 0; color: var(--carems-auth-muted); font-size: .8125rem; line-height: 1.45; }

/* ── Password visibility toggle ───────────────────────────────────────────────
   The button sits inside the field's box rather than beside it, so the control
   still reads as one input. Padding on the input reserves the space, which
   keeps the button clear of the browser's own password-manager affordance and
   of typed text. */

/* The toggle only does anything with scripting, so it is not shown without it. The gate is
   a class on <html> rather than an attribute on the button: Blazor owns the button's
   attributes and restores them on every re-render, so an attribute-based gate reappears
   the moment the circuit connects. */
html:not(.js) [data-password-toggle] { display: none !important; }

.auth-input-group { position: relative; }

.auth-input-group .auth-input {
    /* Room for the button plus the native reveal control some browsers add. */
    padding-right: 3.5rem;
}

.auth-input-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    /* Full-height, 44px-wide target: meets the touch minimum without a larger box. */
    width: 3.25rem;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0 var(--carems-auth-field-radius) var(--carems-auth-field-radius) 0;
    color: var(--carems-auth-muted);
    background: transparent;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}
.auth-input-toggle:hover { color: var(--carems-auth-ink); }
.auth-input-toggle:focus-visible {
    outline: 2px solid var(--carems-auth-accent);
    outline-offset: -3px;
    border-radius: var(--carems-auth-field-radius);
}
/* Edge and IE render their own reveal button, which would double up. */
.auth-input-group .auth-input::-ms-reveal,
.auth-input-group .auth-input::-ms-clear { display: none; }

/* ── Form furniture ───────────────────────────────────────────────────────── */

.auth-form-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .125rem 0 1.625rem;
    font-size: .875rem;
}
.auth-form-meta a {
    color: var(--carems-auth-accent-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: .25rem;
}
.auth-form-meta a:hover { text-decoration: underline; }

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .8125rem 1.25rem;
    border: 1px solid var(--carems-auth-deep);
    border-radius: var(--carems-auth-field-radius);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.005em;
    background: var(--carems-auth-deep);
    cursor: pointer;
    /* Lift plus a one-pixel inner highlight. Solid fill, no gradient wash. */
    box-shadow:
        0 .375rem 1rem rgba(15, 43, 61, .2),
        inset 0 1px 0 rgba(255, 255, 255, .14);
}
.auth-submit:hover {
    color: #fff;
    border-color: #164459;
    background: #164459;
    box-shadow:
        0 .5rem 1.25rem rgba(15, 43, 61, .26),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}
.auth-submit:active {
    background: #0c2231;
    box-shadow: 0 .125rem .375rem rgba(15, 43, 61, .22);
}
.auth-submit:focus-visible {
    outline: 3px solid var(--carems-auth-accent);
    outline-offset: 2px;
}
.auth-submit:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }

.auth-main-foot {
    margin-top: 1.625rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--carems-auth-hairline);
    color: var(--carems-auth-muted);
    font-size: .875rem;
    line-height: 1.55;
    text-align: center;
}
.auth-main-foot a { color: var(--carems-auth-accent-ink); font-weight: 600; text-decoration: none; }
.auth-main-foot a:hover { text-decoration: underline; }

/* ── Two-factor and reset extras ──────────────────────────────────────────── */

.auth-setup-note {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.375rem;
    padding: .9375rem 1rem;
    border: 1px solid #cbe6ef;
    border-radius: var(--carems-auth-field-radius);
    color: #12475c;
    background: #f2fafc;
    font-size: .875rem;
    line-height: 1.5;
    text-align: left;
}
.auth-setup-note i { flex: 0 0 auto; margin-top: .1rem; color: #0b7f9e; font-size: 1.2rem; }

.auth-secret {
    padding: .9375rem 1rem;
    border: 1px dashed #9dc2d1;
    border-radius: var(--carems-auth-field-radius);
    color: var(--carems-auth-ink);
    background: #f6fbfd;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .08em;
    text-align: center;
    overflow-wrap: anywhere;
}
.auth-code-input { letter-spacing: .3em; font-size: 1.25rem; font-weight: 600; text-align: center; }
.auth-loading { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; color: var(--carems-auth-muted); }
.auth-qr { display: block; width: 11rem; height: 11rem; margin: 0 auto; }

/* ── Breakpoints ──────────────────────────────────────────────────────────── */

/* Tablet: keep the card floating but ease the padding so the form is not
   crowded by a wide inset on a narrower viewport. */
@media (max-width: 767.98px) {
    .auth-surface { padding: 2.25rem 1.75rem 2.5rem; }
    .auth-heading { margin-bottom: 1.625rem; }
}

@media (max-width: 575.98px) {
    /* Full-bleed on a phone: a floating card wastes vertical space the form
       needs, and the canvas behind it adds nothing at this width. */
    .auth-page {
        padding: 0;
        place-items: stretch;
        background: var(--carems-auth-card);
    }

    .auth-surface {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 2.5rem 1.375rem 2.5rem;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-logo { margin-bottom: 1.125rem; }
    .auth-logo-img { width: 8.5rem; height: 2.75rem; max-width: 70%; }
    .auth-heading { margin-bottom: 1.75rem; }
    .auth-heading h1 { font-size: 1.625rem; }
}

/* Short viewports (a laptop with the browser chrome, or a phone in landscape):
   trim the vertical rhythm first so the button stays reachable without scrolling. */
@media (max-height: 700px) and (min-width: 576px) {
    .auth-surface { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    .auth-logo { margin-bottom: 1.25rem; }
    .auth-heading { margin-bottom: 1.375rem; }
}

@media (prefers-reduced-motion: no-preference) {
    .auth-input,
    .auth-submit,
    .auth-input-toggle,
    .auth-form-meta a { transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
}

@media (prefers-contrast: more) {
    .auth-input { border-color: #4a5b68; }
    .auth-surface { border-color: #9aabb8; }
    .auth-subtitle, .auth-field-hint, .auth-main-foot, .auth-input-toggle { color: #3c4d5b; }
}

.page.page-center {
    min-height: 100vh;
}

.required-mark {
    color: #dc3545; /* Bootstrap danger red */
    margin-left: 2px;
    font-weight: 600;
}

.carems-toast-host {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(24rem, calc(100vw - 1.5rem));
    pointer-events: none;
}
.carems-toast {
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    pointer-events: auto;
    backdrop-filter: blur(6px);
}
.carems-toast .btn-close {
    flex: 0 0 auto;
}
.carems-toast-icon {
    font-size: 1.1rem;
    line-height: 1;
    padding-top: 0.15rem;
}
.carems-toast-message {
    word-break: break-word;
}
@media (max-width: 767.98px) {
    .carems-toast-host {
        top: 0.75rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}


/* Reports hub */
.report-hub-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.report-hub-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.08);
}


.report-summary-card,
.report-filter-card {
}


.analytics-surface-card {
    border-radius: 1rem;
}

.analytics-summary-card {
    border-radius: 1rem;
    border-top: 4px solid transparent;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.analytics-summary-card-primary { border-top-color: #4f8ef7; }
.analytics-summary-card-lab { border-top-color: #8b7cf6; }
.analytics-summary-card-success { border-top-color: #4fbf9f; }

.analytics-summary-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.35rem;
}

.analytics-summary-value {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: #182433;
}

.analytics-chart-card {
    border-radius: 1rem;
}

.analytics-chart-wrap {
    position: relative;
    min-height: 320px;
}


.analytics-summary-card-consultation { border-top-color: #58a6ff; }
.analytics-comparison {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.analytics-comparison-up { color: #198754; }
.analytics-comparison-down { color: #dc3545; }
.analytics-comparison-neutral { color: #6c757d; }
.analytics-summary-meta {
    color: #6c757d;
    font-size: 0.85rem;
    margin-bottom: 0.65rem;
}
.analytics-sparkline-wrap {
    height: 42px;
    margin-top: 0.35rem;
}
.analytics-chart-wrap-lg {
    min-height: 320px;
}
.analytics-chart-wrap-md {
    min-height: 240px;
}
.analytics-filter-bar .form-control-sm {
    min-width: 150px;
}
.analytics-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.analytics-heatmap-cell {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.analytics-heatmap-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.08);
}
.analytics-heatmap-hour {
    font-size: 0.8rem;
    color: #495057;
    margin-bottom: 0.25rem;
}
.analytics-heatmap-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}
@media (max-width: 991.98px) {
    .analytics-heatmap-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .analytics-heatmap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.analytics-summary-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.analytics-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.analytics-comparison-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.25rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.05);
}
.analytics-comparison-subtext {
    font-size: 0.8rem;
    margin-top: -0.1rem;
}
.analytics-comparison-up.analytics-comparison-chip {
    background: rgba(25, 135, 84, 0.12);
}
.analytics-comparison-down.analytics-comparison-chip {
    background: rgba(220, 53, 69, 0.12);
}
.analytics-comparison-neutral.analytics-comparison-chip {
    background: rgba(108, 117, 125, 0.12);
}
.analytics-ranking-table-wrap {
    max-height: 100%;
}
.analytics-ranking-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    border-bottom-color: #e9eef5;
}
.analytics-ranking-table tbody td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom-color: #eef2f7;
}
.analytics-ranking-name {
    font-weight: 600;
    color: #182433;
    margin-bottom: 0.45rem;
}
.analytics-ranking-progress {
    height: 0.45rem;
    background: #edf2f7;
    border-radius: 999px;
    overflow: hidden;
}
.analytics-ranking-progress .progress-bar {
    border-radius: 999px;
}
.analytics-heatmap-grid-24 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.analytics-heatmap-legend {
    border-top: 1px solid #eef2f7;
    padding-top: 0.75rem;
}
@media (max-width: 1199.98px) {
    .analytics-heatmap-grid-24 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .analytics-summary-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .analytics-comparison-chip {
        min-width: 0;
    }
    .analytics-heatmap-grid-24 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 575.98px) {
    .analytics-heatmap-grid-24 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Pregnancy workspace */
.pregnancy-workspace-row { --bs-gutter-x: 1rem; align-items: start; }
.pregnancy-workspace-sidebar-card { position: sticky; top: 1rem; }
.pregnancy-workspace-sidebar-item { min-height: 44px; }
.pregnancy-clinician-results { z-index: 20; }
@media (max-width: 991.98px) {
    .pregnancy-workspace-sidebar-card { position: static; }
}

/* Receipt Layout */
.receipt-shell {
    max-width: 900px;
    margin: 0 auto;
}

.receipt-card {
    border: 0;
}

.receipt-table th,
.receipt-table td {
    vertical-align: middle;
}

/* Print Styling */
@media print {
    @page {
        size: auto;
        margin: 12mm;
    }

    body * {
        visibility: hidden !important;
    }

    #receipt-print-root,
    #receipt-print-root * {
        visibility: visible !important;
    }

    #receipt-print-root {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .no-print {
        display: none !important;
    }

    .receipt-card,
    .receipt-card .card-body {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .receipt-header,
    .receipt-table,
    .receipt-footer {
        page-break-inside: avoid;
    }
}

/* Shared by authenticated and authentication layouts. Blazor shows this via inline style on fatal errors. */
#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    border-top: 2px solid #ffc107;
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1090;
    font-size: .875rem;
    color: #664d03;
}
#blazor-error-ui .dismiss { cursor:pointer;position:absolute;right:.75rem;top:.5rem;font-size:1.1rem;opacity:.7; }
#blazor-error-ui .dismiss:hover { opacity:1; }

.patient-form-shell { display: flex; flex-direction: column; gap: 1rem; }
.patient-form-section { background: #fff; border: 1px solid #e6ebf2; border-radius: 14px; padding: 1.25rem; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.patient-form-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #eef2f7; }
.patient-form-section-header h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; color: #0f172a; }
.patient-form-section-header p { margin: 0; color: #64748b; font-size: .875rem; }
.patient-form-actions { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; background: #fff; border: 1px solid #e6ebf2; border-radius: 14px; padding: 1rem 1.25rem; }
.patient-registration-modal-backdrop { background: rgba(15, 23, 42, .45); animation: caremsModalFadeIn .18s ease-out; }
.patient-registration-modal-backdrop .modal-dialog { min-height: calc(100vh - 3.5rem); display: flex; align-items: center; }
@keyframes caremsModalFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* CAREMS clinical reports */
.carems-report-shell{background:#f4f4f5;border-radius:18px;padding:24px;min-height:calc(100vh - 96px)}
.carems-report-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.carems-report-title-icon{width:34px;height:34px;border:2px solid #222;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:#111}
.carems-report-header h1{font-size:30px;font-weight:500;margin:0;color:#111827}
.carems-report-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.carems-report-filter,.carems-report-date-wrap{height:44px;background:#fff;border:0;border-radius:0;padding:0 14px;font-size:13px;color:#111827;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.carems-report-date-wrap{display:flex;align-items:center;gap:8px;min-width:250px}
.carems-report-date{border:0;outline:0;width:104px;font-size:13px;background:transparent}
.carems-report-calendar-btn{border:0;background:transparent;margin-left:auto;color:#111827;font-size:17px}
.carems-report-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:0}
.carems-report-tab{border:0;background:#dedede;color:#111827;height:43px;border-top-left-radius:12px;border-top-right-radius:12px;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:9px}
.carems-report-tab.is-active{background:#fff;color:#0d6efd}
.carems-report-grid{display:grid;gap:14px;margin-top:18px;margin-bottom:14px}
.carems-report-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.carems-report-card{background:#fff;border:1px solid #e6eaf0;border-radius:14px;box-shadow:none;position:relative}
.carems-report-donut-card{padding:20px 22px 18px;min-height:422px}
.carems-report-card h3{font-size:18px;font-weight:500;margin:0 0 18px;color:#111827}
.carems-report-donut-wrap{height:250px;max-width:330px;margin:0 auto 18px}
.carems-report-legend{font-size:12px;color:#536071}
.carems-report-legend-row{display:grid;grid-template-columns:minmax(0,1fr) 56px 44px;align-items:center;gap:8px;padding:6px 0}
.carems-report-legend-row span:first-child{display:flex;align-items:center;gap:8px}
.carems-report-legend-row strong,.carems-report-legend-row small{text-align:right;font-weight:500;color:#111827}
.carems-report-legend-total{border-top:1px solid #e9edf3;margin-top:4px;padding-top:10px}
.carems-report-dot{width:10px;height:10px;border-radius:50%;background:#0d6efd;display:inline-block;flex:0 0 auto}
.carems-report-dot-secondary{background:#7ea8ff}.carems-report-dot-primary{background:#0d6efd}
.carems-report-section-card{padding:20px;margin-top:14px;overflow:hidden}
.carems-report-chart{position:relative;width:100%}
.carems-report-chart-wide{height:330px}.carems-report-chart-horizontal{height:420px}
.carems-report-mini-summary{display:grid;grid-template-columns:minmax(0,1fr) 70px 54px;gap:8px;font-size:12px;align-items:center;color:#536071;padding-top:10px}
.carems-report-mini-summary div{display:flex;align-items:center;gap:8px}.carems-report-mini-summary strong,.carems-report-mini-summary small{text-align:right;color:#111827;font-weight:500}
.carems-report-total-title{font-size:18px;font-weight:500;margin-bottom:18px;color:#111827}.carems-report-total-title span{color:#0d6efd;font-weight:700}
.carems-report-table-toolbar{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
.carems-report-search{width:420px;max-width:100%;height:46px;border:1px solid #e5eaf0;border-radius:4px;display:flex;align-items:center;background:#fff;padding:0 12px}
.carems-report-search input{border:0;outline:0;flex:1;font-size:13px;background:transparent}.carems-report-table-toolbar select{height:46px;border:1px solid #d7dde6;background:#fff;border-radius:2px;min-width:250px;padding:0 12px;font-size:13px}
.carems-report-table{font-size:12px;margin-bottom:0;border:1px solid #e7ebf0;border-radius:8px;overflow:hidden}.carems-report-table th{font-weight:700;color:#111827;background:#fff;border-bottom:1px solid #e7ebf0;padding:13px 18px}.carems-report-table td{color:#536071;padding:13px 18px;border-bottom:1px solid #f0f2f5}.carems-report-table tbody tr:nth-child(odd){background:#fbfbfc}.carems-report-table tbody tr:hover{background:#f5f8ff}
.carems-report-pager{display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:12px;color:#536071;padding:13px 4px 0}.carems-report-pager strong{color:#111827;border-bottom:1px solid #111827;padding:0 16px 4px;font-weight:500}
.carems-report-empty-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#555;font-size:16px;pointer-events:none;background:rgba(255,255,255,.66)}
.carems-report-lab-trend{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
@media (max-width:1100px){.carems-report-grid-3{grid-template-columns:1fr}.carems-report-header{align-items:flex-start}.carems-report-filters{width:100%}.carems-report-filter,.carems-report-date-wrap{flex:1 1 180px}.carems-report-tabs{grid-template-columns:1fr}.carems-report-tab{border-radius:12px}.carems-report-shell{padding:14px}}


/* ─────────────────── Accessibility and responsive baseline ───────────────────
   Applied app-wide rather than per page so new screens inherit the same
   keyboard, contrast and small-screen behaviour. */

/* A single, consistent focus indicator. :focus-visible keeps it off mouse
   clicks while guaranteeing it for keyboard and assistive technology. */
/* Not wrapped in :where() — that has zero specificity, so the indicator lost to any
   framework rule that sets an outline. These carry their own specificity instead. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid #0b5ed7;
    outline-offset: 2px;
    border-radius: .3rem;
}

.navbar-vertical a:focus-visible,
.navbar-vertical button:focus-visible {
    outline-offset: -2px;
}

/* Skip link: first tab stop, so keyboard users can bypass the sidebar. */
.carems-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 1080;
    padding: .7rem 1.1rem;
    border-radius: 0 0 .5rem 0;
    color: #fff;
    background: #0f2b3d;
    font-weight: 600;
    text-decoration: none;
}
.carems-skip-link:focus {
    left: 0;
    color: #fff;
}

/* Nothing but a data table may scroll the page sideways.

   clip rather than hidden, and on body only. overflow-x: hidden makes the element a
   scroll container, and a sticky descendant then sticks to that container instead of the
   viewport — which silently stops the desktop topbar (.sticky-top in MainLayout) and the
   workspace side cards from sticking at all. overflow: clip suppresses the same overflow
   without establishing a scroll container. */
body { overflow-x: clip; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Long identifiers (folder numbers, emails) must wrap rather than widen a cell. */
.table td, .table th { overflow-wrap: break-word; }

/* Responsive hardening for dense operational screens. Blazor pages mix Bootstrap grids,
   Tabler cards and custom flex toolbars, so the safest baseline is to let children shrink
   and wrap before the viewport starts scrolling sideways. */
.page-wrapper,
.page-body,
.container,
.container-fluid,
.container-xl,
.row,
.card,
.card-body,
.dropdown-menu,
.modal-content,
.form-control,
.form-select,
.input-group,
.btn,
.badge {
    min-width: 0;
}

.page-body .card,
.page-body .table-responsive,
.page-body form {
    max-width: 100%;
}

.page-body .card-header,
.page-body .card-footer,
.page-body .btn-list,
.page-body .d-flex {
    min-width: 0;
}

.page-body .card-header,
.page-body .card-footer,
.page-body .btn-list {
    flex-wrap: wrap;
    gap: .5rem;
}

.page-body .btn {
    white-space: normal;
}

@media (max-width: 575.98px) {
    /* Comfortable touch targets on a phone without inflating the desktop UI. */
    .btn:not(.btn-sm) { min-height: 2.75rem; }
    .btn-sm { min-height: 2.25rem; }
    .form-control, .form-select { min-height: 2.75rem; }

    /* Action rows wrap instead of overflowing their card. */
    .d-flex.gap-2.justify-content-end,
    .d-flex.gap-2 { flex-wrap: wrap; }

    /* Page headings step down so they do not wrap awkwardly at 375px. */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    .card-body { padding: 1rem; }
    .page-body { padding-bottom: 2rem; }
    .container-xl { padding-left: .75rem; padding-right: .75rem; }
    .page-body .card-header,
    .page-body .card-footer {
        align-items: stretch !important;
    }
    .page-body .card-header > *,
    .page-body .card-footer > *,
    .page-body .btn-list > * {
        max-width: 100%;
    }
    .page-body .card-header .btn,
    .page-body .card-footer .btn,
    .page-body .btn-list .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    /* Dropdown menus inside the collapsed sidebar must not exceed the viewport. */
    .navbar-vertical .dropdown-menu { max-width: 100%; }
    .modal-dialog { margin: .75rem; }
    .page-body .row {
        --bs-gutter-x: 1rem;
    }
}

@media print {
    /* The sidebar is the <aside class="navbar navbar-vertical">; the topbar already
       carries Bootstrap's d-print-none, so it needs no rule here. */
    .navbar-vertical, .carems-skip-link { display: none !important; }
}

/* ─────────────────── Dark theme for the older page styles ───────────────────
   These blocks predate the design tokens and hard-code light colours; in the dark theme they take the
   tokens from carems-ui.css instead. */
:root[data-bs-theme="dark"] .bg-white { background-color: var(--c-surface) !important; }
:root[data-bs-theme="dark"] .text-dark, :root[data-bs-theme="dark"] .text-black { color: var(--c-ink) !important; }
:root[data-bs-theme="dark"] .patient-form-section,
:root[data-bs-theme="dark"] .patient-form-actions { background: var(--c-surface); border-color: var(--c-line); }
:root[data-bs-theme="dark"] .patient-form-section-header { border-bottom-color: var(--c-line); }
:root[data-bs-theme="dark"] .patient-form-section-header h2 { color: var(--c-ink); }
:root[data-bs-theme="dark"] .patient-form-section-header p { color: var(--c-ink-3); }
:root[data-bs-theme="dark"] .carems-report-shell { background: var(--c-surface-2); }
:root[data-bs-theme="dark"] .carems-report-card,
:root[data-bs-theme="dark"] .carems-report-filter,
:root[data-bs-theme="dark"] .carems-report-date-wrap,
:root[data-bs-theme="dark"] .carems-report-search,
:root[data-bs-theme="dark"] .carems-report-table-toolbar select,
:root[data-bs-theme="dark"] .carems-report-table th,
:root[data-bs-theme="dark"] .carems-report-tab.is-active { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
:root[data-bs-theme="dark"] .carems-report-tab { background: var(--c-fill); color: var(--c-ink-2); }
:root[data-bs-theme="dark"] .carems-report-tab.is-active,
:root[data-bs-theme="dark"] .carems-report-total-title span { color: var(--c-accent); }
:root[data-bs-theme="dark"] .carems-report-header h1,
:root[data-bs-theme="dark"] .carems-report-card h3,
:root[data-bs-theme="dark"] .carems-report-title-icon,
:root[data-bs-theme="dark"] .carems-report-calendar-btn,
:root[data-bs-theme="dark"] .carems-report-date,
:root[data-bs-theme="dark"] .carems-report-total-title,
:root[data-bs-theme="dark"] .carems-report-legend-row strong,
:root[data-bs-theme="dark"] .carems-report-legend-row small,
:root[data-bs-theme="dark"] .carems-report-mini-summary strong,
:root[data-bs-theme="dark"] .carems-report-mini-summary small,
:root[data-bs-theme="dark"] .carems-report-pager strong { color: var(--c-ink); border-color: var(--c-ink-2); }
:root[data-bs-theme="dark"] .carems-report-legend,
:root[data-bs-theme="dark"] .carems-report-mini-summary,
:root[data-bs-theme="dark"] .carems-report-pager { color: var(--c-ink-3); }
:root[data-bs-theme="dark"] .carems-report-table,
:root[data-bs-theme="dark"] .carems-report-legend-total { border-color: var(--c-line); }
:root[data-bs-theme="dark"] .carems-report-empty-overlay { background: rgba(15, 17, 21, .66); color: var(--c-ink-2); }