/* ── Design tokens ───────────────────────────────────────────
   Custom properties pierce Blazor CSS isolation, so scoped
   .razor.css files can consume them directly.
   Breakpoint tiers (documentation only — @media cannot read vars):
   ≥1280 desktop | 960–1279 compact desktop | <960 mobile | <600 phone */
:root {
    --color-teal: #0c7d7d;
    --color-teal-dark: #0a6a6a;
    --color-teal-accent: #007474;
    --color-navy: #274769;
    --color-ink: #080808;
    --hero-grad: linear-gradient(to right, #1a3a5c 0%, #1e4468 50%, #0f2135 100%);
    --sheet-bg: #EEF2FA;
    --page-bg: #f7f8fa;
    --card-radius: 12px;
    --card-shadow: 2px 4px 14px rgba(0, 0, 0, .08);
    --sheet-shadow: 0 4px 8px rgba(0, 0, 0, .15);
    --header-h: 80px;
    --header-h-mobile: 64px;
    --gutter: 60px;
    --gutter-mobile: 20px;
    --font-title: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --tap-min: 44px;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.no-scroll {
    overflow: hidden;
}

/* ── App boot loader ─────────────────────────────────────────
   Shown while the WASM runtime downloads. Blazor exposes real
   progress via the --blazor-load-percentage custom property. */
.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background-color: #fff;
}

.app-loading__logo {
    height: 40px;
    width: auto;
}

@media (max-width: 959.98px) {
    .app-loading__logo {
        height: 28px;
    }

    .app-loading__track {
        width: min(120px, 32vw);
    }
}

.app-loading__track {
    width: min(140px, 36vw);
    height: 4px;
    border-radius: 999px;
    background-color: #e3ecf2;
    overflow: hidden;
}

/* Determinate fill — width is driven per-frame by the small script
   in index.html, which eases toward Blazor's real load percentage
   so the bar glides instead of jumping between file-count steps. */
.app-loading__bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background-color: var(--color-teal);
}

/* Indeterminate variant — used by the in-app session check, which runs after
   the runtime has finished loading and the index.html progress script has
   already stopped. Animates on its own so the bar never sits at a dead 0%. */
.app-loading__bar--indeterminate {
    width: 40%;
    animation: app-loading-slide 1.1s ease-in-out infinite;
}

@keyframes app-loading-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* ── Mobile slide-down sheets ────────────────────────────────
   Shared by MobileNavMenu + MobileProfileMenu (kept global like
   the .auth-* family). Mirrors the NavDx app's NavMenuSheetView:
   open 250ms cubic-out, close 200ms cubic-in, full-screen under
   the fixed header (header z-index 100 floats above). */
.mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    background-color: var(--sheet-bg);
    padding-top: var(--header-h-mobile);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 200ms cubic-bezier(.32, 0, .67, 0),
                visibility 0s linear 200ms;
}

.mobile-sheet--open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 250ms cubic-bezier(.33, 1, .68, 1);
}

@media (min-width: 960px) {
    .mobile-sheet {
        display: none;
    }
}

/* ── App header nav links ────────────────────────────────────
   Kept global (not scoped) so ::after pseudo-element transitions
   are not broken by Blazor CSS isolation attribute selectors. */
.app-header__nav-link {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #080808;
    text-decoration: none;
    padding-bottom: 4px;
    white-space: nowrap;
}

/* Invisible bold ghost - forces the element to always be sized for bold text
   so toggling font-weight: 600 on active causes zero layout shift. */
.app-header__nav-link::before {
    content: attr(data-text);
    display: block;
    font-weight: 600;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.app-header__nav-link--active {
    font-weight: 600;
}

.app-header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #274769;
    transition: width 0.25s ease;
}

.app-header__nav-link:hover::after {
    width: 100%;
}

.app-header__nav-link--active::after {
    width: 100%;
    transition: none;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

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

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Shared primary button (Naveris brand) ───────────────────
   Used via the PrimaryButton component. Global (not scoped) so the
   style reliably overrides MudBlazor's filled-button defaults. */
.naveris-btn-primary.mud-button-root {
    height: 42px;
    min-width: 96px;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    white-space: nowrap;
    border-radius: 8px;
    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.25);
    background-color: #0c7d7d;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.naveris-btn-primary.mud-button-root:hover {
    background-color: #0a6a6a;
    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.25);
}

.naveris-btn-primary.mud-button-root:disabled,
.naveris-btn-primary.mud-button-root.mud-disabled {
    background-color: #0c7d7d;
    opacity: 0.6;
    color: #fff;
}

/* Full-width modifier - lets the button stretch beyond the 233px cap */
.naveris-btn-primary.naveris-btn-block.mud-button-root {
    width: 100%;
    max-width: none;
}

/* ── Shared Auth / Onboarding modal card ─────────────────────
   The <AuthCard> shell. Global (not scoped) so every Auth and
   Onboarding page renders the identical login-style modal. */
.auth-card.mud-paper {
    width: 100%;
    padding: clamp(20px, 4.5vh, 40px) clamp(20px, 3.5vw, 40px);
    border-radius: clamp(10px, 1.5vh, 16px);
    box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.16);
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.auth-card-logo {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(12px, 2.5vh, 24px);
}

.auth-card-logo img {
    height: clamp(22px, 4vh, 35px);
    width: auto;
}

.auth-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 3.5vh, 30px);
    font-weight: 300;
    color: #1f1f1f;
    text-align: center;
    line-height: 1.25;
    margin: 0 0 clamp(6px, 1.5vh, 12px);
}

.auth-card-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(15px, 2vh, 18px);
    color: #797979;
    text-align: left;
    line-height: 1.45;
    margin: 0 0 clamp(16px, 3vh, 28px);
}

.auth-center {
    text-align: center !important;
}

/* Field label + required marker */
.auth-field {
    margin-bottom: clamp(10px, 2vh, 18px);
}

.auth-field-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1f1f1f;
    margin-bottom: 6px;
}

.auth-field-label .req {
    color: #d32f2f;
    margin-left: 2px;
}

/* Inputs inside an auth card - 44px tall, 4px radius, #bdbebf border */
.auth-card .mud-input.mud-input-outlined input {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    color: #1f1f1f;
    padding: 12px 10px !important;
    height: 20px;
    line-height: 20px;
    box-sizing: content-box;
}

.auth-card .mud-input-outlined .mud-input-outlined-border {
    border-color: #bdbebf !important;
    border-width: 1px !important;
    border-radius: 4px !important;
}

.auth-card .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #0c7d7d !important;
}

.auth-card .mud-input.mud-input-outlined input::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

/* Rows + links */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-row.end {
    justify-content: flex-end;
}

/* Two selectors per rule because .auth-link is used two ways: MudBlazor links carry
   .mud-typography, while plain markup (the consent page's agreement links) is a bare <a>.
   Qualifying only on .mud-typography left those anchors unstyled - black and undecorated -
   next to an auth flow where every link is teal and underlined. */
.auth-link.mud-typography,
a.auth-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0c7d7d !important;
    text-decoration: none;
    line-height: 1.13;
}

.auth-link.underline.mud-typography,
a.auth-link.underline {
    text-decoration: underline;
}

.auth-link.mud-typography:hover,
a.auth-link:hover {
    color: #0a6a6a !important;
}

/* Inline action sitting inside .auth-hint - keeps the teal link colour but drops to the
   hint's 12px so the sentence reads as one line rather than two sizes. */
.auth-link.small.mud-typography,
a.auth-link.small {
    font-size: 12px;
    font-weight: 600;
}

/* Text action rendered as a plain button. MudButton would fall through to
   MudBlazor's primary styling here (blue and uppercase) because .auth-link
   only targets .mud-typography. */
.auth-textbtn {
    padding: 0;
    border: none;
    background: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0c7d7d;
    text-transform: none;
    line-height: 1.13;
    cursor: pointer;
}

.auth-textbtn:hover:not(:disabled) {
    color: #0a6a6a;
}

.auth-textbtn:disabled {
    color: #919191;
    cursor: default;
}

/* Misc helpers */
.auth-hint {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #797979;
    margin-top: 4px;
}

.auth-error {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #d32f2f;
    margin-bottom: 12px;
}

/* Sits directly under the consent it belongs to, so it reads as that box's error
   rather than a page-level one. Smaller and pulled up out of the row's gap. */
.consent-error {
    font-size: 13px;
    margin: -12px 0 12px 34px;
}

.auth-emphasis {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #0c7d7d;
    text-align: center;
}

.auth-checkbox-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #3a3a3a;
}

.auth-card .auth-check .mud-primary-text {
    color: #0c7d7d !important;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: clamp(12px, 2.5vh, 24px) 0 clamp(10px, 2vh, 20px);
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #9a9a9a;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #e0e0e0;
}

.auth-social-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #1f1f1f;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    padding: 0 16px;
    text-decoration: none;
}

.auth-social-btn:hover {
    border-color: #00a1e0;
    box-shadow: 0 2px 6px rgba(0, 161, 224, 0.15);
}

.auth-social-btn:active {
    background-color: #f5faff;
}

/* Tappable option row (MFA method choice) */
.auth-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #e8f1f8;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    margin-bottom: 16px;
    transition: border-color 0.15s ease;
}

.auth-option:hover {
    border-color: #0c7d7d;
}

.auth-option-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #0c7d7d;
}

.auth-option-chevron {
    font-size: 22px;
    line-height: 1;
    color: #0c7d7d;
}

/* ── Profile page shared styles ──────────────────────────────
   Global (not scoped) so child components share the card/field
   vocabulary without duplicating CSS across isolation boundaries. */

.profile-section {
    margin-bottom: 40px;
}

.profile-section__heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #080808;
    margin: 0 0 16px;
    line-height: 1.25;
}

.profile-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 2px 4px 14px 0 rgba(0, 0, 0, 0.08);
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.profile-card__required {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #0c7d7d;
    text-align: right;
    margin-bottom: -8px;
}

.profile-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.profile-save-btn {
    height: 38px;
    padding: 0 24px;
    border-radius: 8px;
    border: none;
    background-color: #c8cdd6;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.profile-save-btn:hover {
    background-color: #b0b6c2;
}

.profile-save-btn--active {
    background-color: #0c7d7d;
}

.profile-save-btn--active:hover {
    background-color: #0a6b6b;
}

.profile-save-btn:disabled {
    cursor: default;
}

.pinfo-field__error {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #d84040;
}

.pinfo-input--invalid,
.pinfo-select--invalid {
    border-color: #d84040;
}

.profile-section__error {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #d84040;
    text-align: right;
    margin-top: 8px;
}

/* ── Claim appeal status (shared by the section and the detail dialog) ── */
.claim-row__status-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #919191;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.claim-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 3px 10px;
    letter-spacing: 0.5px;
}

.claim-badge--signed {
    background-color: #e6f4f1;
    color: #0c7d7d;
}

.claim-badge--unsigned {
    background-color: #f5f5f5;
    color: #6b7280;
    border: 1px solid #d8dce2;
}

.claim-row__signed-date {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    color: #919191;
}

/* ── Profile form grids ──────────────────────────────────────── */
.pinfo-grid {
    display: grid;
    gap: 16px;
}

.pinfo-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.pinfo-grid--2 { grid-template-columns: 1fr 1fr; }

/* ── Profile form fields ─────────────────────────────────────── */
.pinfo-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pinfo-field__label {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.pinfo-field__value {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #212121;
    font-weight: 500;
    padding: 4px 0;
}

.pinfo-input {
    height: 42px;
    border: 1px solid #d8dce2;
    border-radius: 6px;
    padding: 0 14px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #212121;
    background-color: #fff;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.15s ease;
}

.pinfo-input:focus { border-color: #0c7d7d; }

.pinfo-select {
    height: 42px;
    border: 1px solid #d8dce2;
    border-radius: 6px;
    padding: 0 40px 0 14px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #212121;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    /* Branded chevron, matching the mobile pickers' nav_dropdown_icon. */
    background-image: url("/icons/nav_dropdown_icon.svg");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px 18px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.15s ease;
}

.pinfo-select:focus { border-color: #0c7d7d; }

.pinfo-link {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #0c7d7d;
    text-decoration: underline;
}

.pinfo-checkboxes {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    margin-top: 2px;
}

.pinfo-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #212121;
    cursor: pointer;
}

.pinfo-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0c7d7d;
    cursor: pointer;
    flex-shrink: 0;
}

.pinfo-legal {
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    color: #919191;
    margin: 0;
    line-height: 1.5;
}

/* ── MudDialog global overrides ──────────────────────────────── */
.mud-dialog {
    border-radius: 20px !important;
    overflow: hidden;
}

.mud-dialog .mud-dialog-content {
    padding: 8px 28px 4px !important;
}

.mud-dialog .mud-dialog-title {
    padding: 24px 28px 8px !important;
}

.mud-dialog .mud-dialog-actions {
    padding: 8px 28px 24px !important;
    gap: 10px;
}

/* ── Admin data tables (Advocacy Posts / Social Mentions) ────────
   Flat, borderless, uppercase-header style wrapped in the app's
   usual rounded card surface. */
.admin-table-wrap {
    background: #fff;
    border-radius: 12px;
    box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.08);
    padding: 8px 20px;
}

.admin-table.mud-table {
    background: transparent;
    box-shadow: none;
}

.admin-table .mud-table-container {
    box-shadow: none;
}

.admin-table .mud-table-loading-progress {
    display: none;
}

.admin-table__header th {
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8a97a3;
    font-family: 'Montserrat', sans-serif;
    border-bottom: 1px solid #e6ebf0 !important;
    background: transparent !important;
}

.admin-table__row td {
    border-bottom: 1px solid #eef1f4 !important;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: #2a2a2a;
}

.admin-table__row:hover {
    background-color: #eef7f7;
}

.admin-table__row td:not(:first-child),
.admin-table__row th:not(:first-child) {
    border-left: none !important;
}

.admin-table__content-cell {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-table__chip--neutral {
    color: #0c7d7d !important;
    border-color: #0c7d7d !important;
}

.admin-table__chip--danger {
    color: #d84040 !important;
    border-color: #d84040 !important;
}

.admin-table__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.admin-table__action-btn {
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.admin-table__action-btn--view {
    color: #0c7d7d;
}

.admin-table__action-btn--view:hover {
    background-color: rgba(12, 125, 125, 0.1);
}

.admin-table__action-btn--danger {
    color: #d84040;
}

.admin-table__action-btn--danger:hover {
    background-color: rgba(216, 64, 64, 0.1);
}

.admin-table__action-btn.mud-disabled {
    color: #c7cdd3 !important;
}

.admin-table__empty {
    text-align: center;
    padding: 48px 0;
    color: #8a97a3;
    font-family: 'Open Sans', sans-serif;
}

.admin-table__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    color: #525252;
}

.admin-table__pager-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Filter dropdown button ──────────────────────────────────── */
.filter-dropdown {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e0e8f0;
    border-radius: 8px;
    padding: 7px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.filter-dropdown:hover {
    border-color: #0c7d7d;
    background-color: #f5fbfb;
}

.filter-dropdown__label {
    color: #8a97a3;
    font-weight: 600;
}

.filter-dropdown__value {
    color: #2a2a2a;
    font-weight: 700;
}

.filter-dropdown__chevron {
    color: #8a97a3;
    margin-left: 2px;
}

.filter-dropdown__item--active {
    color: #0c7d7d !important;
    font-weight: 700 !important;
}

/* ── Responsive: compact desktop (960–1279px) ───────────────── */
@media (max-width: 1279.98px) {
    .pinfo-grid--3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Responsive: mobile (<960px) ────────────────────────────── */
@media (max-width: 959.98px) {
    /* Profile form grids collapse to a single column */
    .pinfo-grid--3,
    .pinfo-grid--2 {
        grid-template-columns: 1fr;
    }

    /* Admin tables: MudTable Breakpoint.Sm renders stacked rows here.
       Free the content cell and style the DataLabel pseudo-headers
       to match the desktop uppercase column headers. */
    .admin-table-wrap {
        padding: 4px 12px;
    }

    .admin-table__content-cell {
        max-width: none;
        white-space: normal;
    }

    .admin-table .mud-table-cell::before {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #8a97a3;
    }

    .admin-table__pager {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    /* PageHeader titles (MudText Typo.h4) scale down on mobile */
    .mud-typography-h4 {
        font-size: 1.6rem;
    }

    /* Auth card: tighten padding on small screens */
    .auth-card.mud-paper {
        margin: 0 4px;
    }
}

/* Report viewer: a rounded floating card. Zero content padding so the PDF fills the card,
   and rounded corners clipped to match (MudBlazor pads content and squares the content box). */
/* Size the card on the dialog paper itself, and let the content fill it with ZERO padding.
   This removes MudBlazor's default content padding at the source (the gap above the title /
   inset on the left) instead of fighting it with negative margins. */
.report-viewer-dialog {
    width: min(92vw, 720px);
    height: min(90vh, 980px);
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 16px;
    overflow: hidden;
}

.report-viewer-dialog .mud-dialog-content {
    padding: 0 !important;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* The dialog draws its own title bar; never show MudBlazor's built-in header. */
.report-viewer-dialog .mud-dialog-title {
    display: none;
}

@media (max-width: 599.98px) {
    .report-viewer-dialog {
        width: 94vw;
        height: 88vh;
    }
}

/* Expand toggle on: pin the dialog paper to the viewport so it fills exactly. Using
   position:fixed/inset escapes MudBlazor's centering container padding, which otherwise
   pushed a 100vw paper past the right edge (the "bleed"). Square corners in full screen
   (!important to beat MudBlazor's own .mud-dialog border-radius). */
.report-viewer-dialog:has(.report-viewer--full) {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0 !important;
}

.report-viewer-dialog:has(.report-viewer--full) .mud-dialog-content {
    border-radius: 0 !important;
}


/* ── Admin nested tables (resource items, FAQ questions) ──────
   The parent MudTable row expands into this, so it deliberately sits inside the
   parent's rhythm rather than looking like a second, separate table. */
.admin-subtable__cell {
    background-color: #f7f9fb;
    padding: 0 16px 14px 52px;
}

.admin-subtable {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}

.admin-subtable th {
    text-align: left;
    font-weight: 600;
    color: #6e6e6e;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 12px 8px 0;
    border-bottom: 1px solid #e3e7ec;
}

.admin-subtable td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid #eef2f6;
    color: #212121;
    vertical-align: top;
}

.admin-subtable tr:last-child td {
    border-bottom: none;
}

.admin-subtable__type {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #274769;
    background-color: #e6ecf4;
    border-radius: 4px;
    padding: 2px 8px;
}

/* URLs and answers are the two columns that can run long; they truncate rather than
   forcing the table sideways. */
.admin-subtable__url,
.admin-subtable__answer {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-subtable__url a {
    color: #0c7d7d;
}

.admin-subtable__empty {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #919191;
    margin: 12px 0 4px;
}

/* ── Pull to refresh ──────────────────────────────────────────
   The element is created by pull-to-refresh.js, so these styles are global:
   Blazor's scoped CSS only rewrites markup the renderer owns. */
.ptr-indicator {
    position: fixed;
    top: 8px;
    left: 50%;
    z-index: 95;
    width: 36px;
    height: 36px;
    margin-left: 0;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(.6);
    pointer-events: none;
}

.ptr-indicator__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #d8dce2;
    border-top-color: var(--color-teal);
}

/* Armed: the pull has passed the threshold, so releasing will refresh. */
.ptr-indicator--armed .ptr-indicator__spinner {
    border-color: #cfe6e6;
    border-top-color: var(--color-teal);
}

.ptr-indicator--busy .ptr-indicator__spinner {
    animation: ptr-spin .7s linear infinite;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ptr-indicator--busy .ptr-indicator__spinner {
        animation-duration: 1.6s;
    }
}

/* Desktop keeps the explicit control; touch screens get the gesture instead, which is
   how the mobile app behaves. */
@media (max-width: 959.98px) and (pointer: coarse) {
    .hero__actions,
    .mytests-hero__actions,
    .sg-hero__actions,
    .rf-hero__actions,
    .profile-header__actions {
        display: none;
    }
}

/* ── New-version banner ───────────────────────────────────────
   Created by app-update.js, so global rather than scoped. Sits above the app but below
   the busy overlay: it is an offer, never a block. */
.app-update {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1600;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 12px 14px 12px 18px;
    border-radius: 10px;
    background-color: #274769;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
    font-family: 'Open Sans', sans-serif;
    animation: app-update-in .25s ease-out;
}

@keyframes app-update-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .app-update { animation: none; }
}

.app-update__text {
    font-size: 14px;
    color: #fff;
}

.app-update__btn {
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    background-color: var(--color-teal);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.app-update__btn:hover { background-color: var(--color-teal-dark); }

.app-update__dismiss {
    flex-shrink: 0;
    border: none;
    background: none;
    color: #b9c6d6;
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.app-update__dismiss:hover { color: #fff; }

@media (max-width: 599.98px) {
    .app-update {
        left: 16px;
        right: 16px;
        transform: none;
        bottom: 16px;
    }
    @keyframes app-update-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* ── Result information dialog ────────────────────────────────
   The class lands on MudBlazor's own dialog element, which never carries this app's
   scoped-CSS attribute, so the width has to be set globally. MudBlazor stretches small
   dialogs to the full viewport on phones; these margins keep it reading as a card on a
   page rather than a takeover. */
.result-info-dialog {
    max-width: 420px;
}

@media (max-width: 599.98px) {
    .result-info-dialog {
        max-width: none;
        width: calc(100vw - 40px);
        margin: 20px;
    }
}


/* ── Shared profile dialog shell ──────────────────────────────
   Used by the claim appeal dialog and the insurance card viewer. Global rather
   than scoped precisely so both can share it. */

.ap-dialog__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #080808;
}

.ap-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ap-dialog__hint {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #919191;
    line-height: 1.5;
}

/* ── Actions (mirrors the upload dialog) ──────────────────────── */
.ap-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ap-btn {
    height: 38px;
    min-width: 92px;
    padding: 0 20px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ap-btn--ghost {
    border: 1px solid #d8dce2;
    background-color: transparent;
    color: #525252;
}

.ap-btn--ghost:hover {
    background-color: #f4f6f9;
}

.ap-btn--primary {
    border: none;
    background-color: #0c7d7d;
    color: #fff;
}

.ap-btn--primary:hover {
    background-color: #0a6a6a;
}

/* Insurance card viewer — the image fills the dialog at its own aspect ratio, capped so
   a large upload cannot push the dialog past the viewport. */
.card-view {
    display: flex;
    justify-content: center;
    background-color: #f4f6f9;
    border-radius: 8px;
    overflow: hidden;
}

.card-view__image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}

/* ── Admin draft editing (FAQs, Resources) ────────────────────
   These screens edit a local draft, so rows have to say where they stand - quietly. A pending
   row gets a tint and a small pill; the pencil swaps that row's cells for inputs in place. */
.draft-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f1f9f9;
    border-bottom: 1px solid #cfe6e6;
}

.draft-bar__text {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8rem;
    color: #0a6b6b;
}

.draft-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.draft-bar__btn.mud-button-root {
    text-transform: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    color: #0a6b6b;
    box-shadow: none;
}

.draft-bar__btn--save.mud-button-root {
    background-color: #0c7d7d;
    color: #fff;
}

.draft-bar__btn--save.mud-button-root:hover {
    background-color: #0a6b6b;
}

.draft-row--pending td {
    background-color: #fbfaf4;
}

.draft-row--deleted td {
    background-color: #fbf6f6;
    color: #9a9a9a;
    text-decoration: line-through;
}

.draft-row--deleted .admin-table__actions,
.draft-row--deleted .draft-chip {
    text-decoration: none;
}

.draft-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 3px;
    background-color: #eef1f4;
    color: #6e7b87;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.inline-cell {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inline-cell__name {
    font-weight: 600;
}

/* Inputs sit inside a dense row, so they give up MudBlazor's default height and padding. */
.inline-input.mud-input-control {
    margin: 0;
    min-width: 160px;
}

.inline-input .mud-input.mud-input-outlined .mud-input-slot {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.85rem;
}

.inline-input--order.mud-input-control {
    min-width: 76px;
    width: 76px;
}

.admin-subtable__add-cell {
    padding: 4px 0 0 !important;
    border-bottom: none !important;
}

.inline-add-btn.mud-button-root {
    text-transform: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    color: #0c7d7d;
}

.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.admin-toolbar__note {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.78rem;
    color: #8a97a3;
}

.admin-toolbar__add.mud-button-root {
    margin-left: auto;
    text-transform: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    background-color: #0c7d7d;
    color: #fff;
    box-shadow: none;
}

.admin-toolbar__add.mud-button-root:hover {
    background-color: #0a6b6b;
}

/* Answers run to any length, so the one multi-line field on the row keeps its grab handle
   rather than forcing a two-line box on a five-line answer. */
.inline-input--answer textarea.mud-input-slot {
    resize: vertical;
    min-height: 38px;
}

.inline-input--type.mud-input-control {
    min-width: 104px;
    width: 104px;
}