/* /Components/Cms/Blocks/AccordionModule.razor.rz.scp.css */
.accordion-module__item[b-9unmzfoc4i] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
    background-color: var(--color-surface-raised);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .accordion-module__item:hover[b-9unmzfoc4i] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
        color: var(--color-text-body);
    }

.accordion-module__item--open[b-9unmzfoc4i] {
    border-color: var(--color-primary);
}

.accordion-module__trigger[b-9unmzfoc4i] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-8);
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-text-body);
    text-align: left;
    user-select: none;
}

    .accordion-module__trigger:focus-visible[b-9unmzfoc4i] {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
        border-radius: var(--radius-md);
    }

.accordion-module__heading[b-9unmzfoc4i] {
    flex: 1;
    min-width: 0;
}

.accordion-module__chevron[b-9unmzfoc4i] {
    flex-shrink: 0;
    display: flex;
    color: var(--color-text-body);
    transition: transform var(--transition-base);
    margin-left: var(--space-4);
}

    .accordion-module__chevron svg[b-9unmzfoc4i] {
        width: 1.75rem;
        height: 1.75rem;
    }

.accordion-module__item--open .accordion-module__chevron[b-9unmzfoc4i] {
    transform: rotate(180deg);
}

/* Animated body using grid-template-rows trick */
.accordion-module__body[b-9unmzfoc4i] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

.accordion-module__item--open .accordion-module__body[b-9unmzfoc4i] {
    grid-template-rows: 1fr;
}

.accordion-module__body-inner[b-9unmzfoc4i] {
    overflow: hidden;
    border-top: 0px solid var(--color-border);
    padding: 0 var(--space-8);
    transition: padding var(--transition-base), border-top-width var(--transition-base);
}

.accordion-module__item--open .accordion-module__body-inner[b-9unmzfoc4i] {
    border-top-width: 1px;
    padding: var(--space-8);
}

.accordion-module__body-inner[b-9unmzfoc4i]  :last-child {
    margin-bottom: 0;
}

@container page-content (max-width: 768px) {
    .accordion-module__trigger[b-9unmzfoc4i] {
        font-size: var(--text-base);
        padding: var(--space-4) var(--space-6);
    }

    .accordion-module__body-inner[b-9unmzfoc4i] {
        padding: 0 var(--space-6);
    }

    .accordion-module__item--open .accordion-module__body-inner[b-9unmzfoc4i] {
        padding: var(--space-4) var(--space-6) var(--space-6);
    }
}
/* /Components/Cms/Blocks/CmsBlock.razor.rz.scp.css */
.cms-block-error[b-1v2dlwpdey] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--color-error-surface);
    border: 1px dashed var(--color-error-border);
    border-radius: var(--radius-md);
    margin: var(--space-1) 0;
}

.cms-block-error--dev[b-1v2dlwpdey] {
    border-color: var(--color-error);
}

.cms-block-error__detail[b-1v2dlwpdey],
.cms-block-error__message[b-1v2dlwpdey],
.cms-block-error__hint[b-1v2dlwpdey] {
    margin: 0;
    font-size: var(--text-sm);
}

.cms-block-error__message[b-1v2dlwpdey] {
    color: var(--color-error-text);
}

.cms-block-error__hint[b-1v2dlwpdey] {
    color: var(--color-text-muted);
}
/* /Components/Cms/Blocks/ComplianceModule.razor.rz.scp.css */
/* ── Grid ── */
.compliance-grid[b-3s8oghl5je] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

@container page-content (max-width: 768px) {
    .compliance-grid[b-3s8oghl5je] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 640px) {
    .compliance-grid[b-3s8oghl5je] {
        grid-template-columns: 1fr;
    }
}

/* ── Card ── */
.compliance-card[b-3s8oghl5je] {
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Card header ── */
.card-header[b-3s8oghl5je] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.status-badge[b-3s8oghl5je] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-success-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-success-text);
}

    .status-badge.status-badge--notfound[b-3s8oghl5je] {
        background: var(--color-info-surface);
        color: var(--color-info-text);
    }

    .status-badge.status-badge--overdue[b-3s8oghl5je] {
        color: var(--color-error-text);
        background: var(--color-error-surface);
    }

.card-title[b-3s8oghl5je] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    margin-bottom: 0;
}

/* ── Body copy ── */
.card-body[b-3s8oghl5je] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

    .card-body[b-3s8oghl5je]  :last-child {
        margin-bottom: 0;
    }

    .card-body a[b-3s8oghl5je] {
        color: var(--color-link);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

        .card-body a:hover[b-3s8oghl5je] {
            color: var(--color-link-hover);
            text-decoration: underline;
        }

/* ── Meta fields ── */
.card-meta[b-3s8oghl5je] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.meta-field[b-3s8oghl5je] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.meta-label[b-3s8oghl5je] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.meta-value[b-3s8oghl5je] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Spacer pushes button to bottom ── */
.card-footer[b-3s8oghl5je] {
    margin-top: auto;
}

/* ── Skeleton (initial load) ── */
.compliance-card--skeleton[b-3s8oghl5je] {
    min-height: 180px;
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

    .compliance-card--skeleton[b-3s8oghl5je]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, var(--color-surface-raised) 25%, var(--skeleton-shimmer-peak) 50%, var(--color-surface-raised) 75% );
        background-size: 600px 100%;
        animation: shimmer 1.6s infinite linear;
    }

/* ── Shimmer (SWR background refresh) ── */
.compliance-card--shimmer[b-3s8oghl5je] {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
}

    .compliance-card--shimmer[b-3s8oghl5je]::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.4;
        background: linear-gradient( 90deg, var(--color-surface-raised) 25%, var(--skeleton-shimmer-peak) 50%, var(--color-surface-raised) 75% );
        background-size: 600px 100%;
        animation: shimmer 1.6s infinite linear;
    }

@media (prefers-reduced-motion: reduce) {
    .compliance-card--skeleton[b-3s8oghl5je]::after,
    .compliance-card--shimmer[b-3s8oghl5je]::after {
        animation: none;
        background: var(--color-surface-subtle);
    }
}

/* ── Certificate modal list ── */
.cert-list[b-3s8oghl5je] {
    display: flex;
    flex-direction: column;
}

.cert-row[b-3s8oghl5je] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: var(--border-thin) solid var(--color-border);
}

    .cert-row:first-of-type[b-3s8oghl5je] {
        padding-top: 0;
    }

    .cert-row:last-of-type[b-3s8oghl5je] {
        border-bottom: none;
        padding-bottom: 0;
    }

.cert-icon[b-3s8oghl5je] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-border);
    background: var(--color-surface-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--text-lg);
    color: var(--color-primary);
}

.cert-info[b-3s8oghl5je] {
    flex: 1;
    display: flex;
    gap: var(--space-3);
    min-width: 0;
}

.cert-name[b-3s8oghl5je] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-meta[b-3s8oghl5je] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.cert-actions[b-3s8oghl5je] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}
/* /Components/Cms/Blocks/DashboardGridModule.razor.rz.scp.css */
.dashboard-grid-module__grid[b-zti17uaiyl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

@container page-content (max-width: 768px) {
    .dashboard-grid-module__grid[b-zti17uaiyl] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}

@container page-content (max-width: 480px) {
    .dashboard-grid-module__grid[b-zti17uaiyl] {
        grid-template-columns: 1fr;
    }
}

.dashboard-grid-module__widget--wide[b-zti17uaiyl] {
    grid-column: span 2;
}

.dashboard-grid-module__widget[b-zti17uaiyl] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin: 0;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.dashboard-grid-module__content[b-zti17uaiyl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.dashboard-grid-module__icon[b-zti17uaiyl] {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
}

.dashboard-grid-module__heading[b-zti17uaiyl] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    margin: 0 0 var(--space-4);
    padding-right: var(--space-12);
}

.dashboard-grid-module__summary[b-zti17uaiyl] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

    .dashboard-grid-module__summary[b-zti17uaiyl]  :last-child {
        margin-bottom: 0;
    }

.dashboard-grid-module__links[b-zti17uaiyl] {
    list-style: none;
    padding: 0;
    margin-top: var(--space-8);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.dashboard-grid-module__link[b-zti17uaiyl] {
    display: block;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: center;
    transition: opacity var(--transition-fast);
}

    .dashboard-grid-module__link:hover[b-zti17uaiyl] {
        opacity: 0.88;
        color: var(--color-text-on-primary);
    }

/* ── Repairs count badge ──────────────────────────────────────────────────── */

.dashboard-grid-module__repairs-list[b-zti17uaiyl] {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dashboard-grid-module__repair-item[b-zti17uaiyl] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-1) 0;
    margin-block: 0;
}

    .dashboard-grid-module__repair-item:last-child[b-zti17uaiyl] {
        border-bottom: 0;
    }

.dashboard-grid-module__repair-description[b-zti17uaiyl] {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-grid-module__repair-date[b-zti17uaiyl] {
    white-space: nowrap;
}
/* /Components/Cms/Blocks/DiagnosticsModule.razor.rz.scp.css */
.diagnostics-module[b-3foyvn4agi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.diagnostics-module__loading[b-3foyvn4agi] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
}

.diagnostics-module__search-prompt[b-3foyvn4agi] {
    font-weight: var(--font-semibold);
    margin: 0;
    color: var(--color-text-body);
}

.diagnostics-module__description[b-3foyvn4agi] {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0;
    white-space: pre-line;
}

.diagnostics-module__back[b-3foyvn4agi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    cursor: pointer;
}

    .diagnostics-module__back:hover span[b-3foyvn4agi],
    .diagnostics-module__back:focus-visible span[b-3foyvn4agi] {
        text-decoration: underline;
    }
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsAnswerList.razor.rz.scp.css */
.diagnostics-answer-list[b-vcj4ji6mer] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.diagnostics-answer-list__item[b-vcj4ji6mer] {
    display: flex;
}

.diagnostics-answer-list__card[b-vcj4ji6mer] {
    all: unset;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .diagnostics-answer-list__card:hover[b-vcj4ji6mer] {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

    .diagnostics-answer-list__card:focus-visible[b-vcj4ji6mer] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.diagnostics-answer-list__card-body[b-vcj4ji6mer] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.diagnostics-answer-list__card-heading[b-vcj4ji6mer] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    line-height: 1.3;
}

.diagnostics-answer-list__card-description[b-vcj4ji6mer] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.diagnostics-answer-list__card-arrow[b-vcj4ji6mer] {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

    .diagnostics-answer-list__card:hover .diagnostics-answer-list__card-arrow[b-vcj4ji6mer] {
        transform: translateX(3px);
        color: var(--color-primary);
    }
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsBranchView.razor.rz.scp.css */
.diagnostics-branch-view[b-uxcze0jni5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.diagnostics-branch-view__header[b-uxcze0jni5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.diagnostics-branch-view__back[b-uxcze0jni5] {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

    .diagnostics-branch-view__back:hover[b-uxcze0jni5] {
        background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    }

    .diagnostics-branch-view__back:focus-visible[b-uxcze0jni5] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.diagnostics-branch-view__heading[b-uxcze0jni5] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-body);
    line-height: 1.25;
}

.diagnostics-branch-view__description[b-uxcze0jni5] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: 1.5;
}

.diagnostics-branch-view__empty[b-uxcze0jni5] {
    margin: 0;
    color: var(--color-text-muted);
    font-style: italic;
}
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsBreadcrumb.razor.rz.scp.css */
.diagnostics-breadcrumb__toggle[b-t4gptpv1a6] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
}

.diagnostics-breadcrumb__toggle-icon[b-t4gptpv1a6] {
    font-size: var(--text-base);
    transition: transform var(--transition-fast);
}

.diagnostics-breadcrumb--open .diagnostics-breadcrumb__toggle-icon[b-t4gptpv1a6] {
    transform: rotate(180deg);
}

.diagnostics-breadcrumb__list[b-t4gptpv1a6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.diagnostics-breadcrumb__item[b-t4gptpv1a6] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.diagnostics-breadcrumb__link[b-t4gptpv1a6] {
    all: unset;
    cursor: pointer;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .diagnostics-breadcrumb__link:hover[b-t4gptpv1a6] {
        color: var(--color-secondary);
    }

    .diagnostics-breadcrumb__link:focus-visible[b-t4gptpv1a6] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

.diagnostics-breadcrumb__current[b-t4gptpv1a6] {
    color: var(--color-text-body);
    font-weight: var(--font-semibold);
}

.diagnostics-breadcrumb__separator[b-t4gptpv1a6] {
    color: var(--color-border);
    user-select: none;
}

@container page-content (max-width: 640px) {
    .diagnostics-breadcrumb__toggle[b-t4gptpv1a6] {
        display: flex;
    }

    .diagnostics-breadcrumb__list[b-t4gptpv1a6] {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        margin-top: var(--space-2);
        gap: var(--space-3);
    }

    .diagnostics-breadcrumb--open .diagnostics-breadcrumb__list[b-t4gptpv1a6] {
        display: flex;
    }

    .diagnostics-breadcrumb__separator[b-t4gptpv1a6] {
        display: none;
    }
}
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsCategoryGrid.razor.rz.scp.css */
.diagnostics-category-grid[b-f2x3gqxdbi] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

    .diagnostics-category-grid.diagnostics-category-grid--two-columns[b-f2x3gqxdbi] {
        grid-template-columns: repeat(2, 1fr);
    }

.diagnostics-category-grid__item[b-f2x3gqxdbi] {
    display: flex;
    flex-direction: column;
}

.diagnostics-category-grid__card[b-f2x3gqxdbi] {
    all: unset;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .diagnostics-category-grid__card:hover[b-f2x3gqxdbi] {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .diagnostics-category-grid__card:focus-visible[b-f2x3gqxdbi] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.diagnostics-category-grid__card-icon[b-f2x3gqxdbi] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: var(--text-2xl);
}

.diagnostics-category-grid__card-body[b-f2x3gqxdbi] {
    flex: 1;
    min-width: 0;
}

.diagnostics-category-grid__card-heading[b-f2x3gqxdbi] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    line-height: 1.3;
}

.diagnostics-category-grid__card-description[b-f2x3gqxdbi] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.diagnostics-category-grid__card-arrow[b-f2x3gqxdbi] {
    flex-shrink: 0;
    align-self: center;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

    .diagnostics-category-grid__card:hover .diagnostics-category-grid__card-arrow[b-f2x3gqxdbi] {
        transform: translateX(3px);
        color: var(--color-primary);
    }

@container page-content (max-width: 768px) {
    .diagnostics-category-grid[b-f2x3gqxdbi] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

@container page-content (max-width: 480px) {
    .diagnostics-category-grid[b-f2x3gqxdbi] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsPathwayPicker.razor.rz.scp.css */
.diagnostics-pathway-picker[b-hp1ddxwgxb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.diagnostics-pathway-picker__item[b-hp1ddxwgxb] {
    display: flex;
    flex-direction: column;
}

.diagnostics-pathway-picker__card[b-hp1ddxwgxb] {
    all: unset;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .diagnostics-pathway-picker__card:hover[b-hp1ddxwgxb] {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .diagnostics-pathway-picker__card:focus-visible[b-hp1ddxwgxb] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.diagnostics-pathway-picker__card-icon[b-hp1ddxwgxb] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: var(--text-2xl);
}

.diagnostics-pathway-picker__card-body[b-hp1ddxwgxb] {
    flex: 1;
    min-width: 0;
}

.diagnostics-pathway-picker__card-heading[b-hp1ddxwgxb] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    line-height: 1.3;
}

.diagnostics-pathway-picker__card-description[b-hp1ddxwgxb] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.diagnostics-pathway-picker__card-arrow[b-hp1ddxwgxb] {
    flex-shrink: 0;
    align-self: center;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

    .diagnostics-pathway-picker__card:hover .diagnostics-pathway-picker__card-arrow[b-hp1ddxwgxb] {
        transform: translateX(3px);
        color: var(--color-primary);
    }

@container page-content (max-width: 768px) {
    .diagnostics-pathway-picker[b-hp1ddxwgxb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 480px) {
    .diagnostics-pathway-picker[b-hp1ddxwgxb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsSearch.razor.rz.scp.css */
.diagnostics-search[b-toci5kmpwu] {
    position: relative;
}

.diagnostics-search__label[b-toci5kmpwu] {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
    color: var(--color-text-body);
}

input[type=search].diagnostics-search__input[b-toci5kmpwu] {
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
    background: var(--color-surface-inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat left var(--space-3) center;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    background-color: var(--color-surface-raised);
}

.diagnostics-search__input:focus[b-toci5kmpwu] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.diagnostics-search__input[b-toci5kmpwu]::-webkit-search-cancel-button {
    appearance: none;
}

.diagnostics-search__results[b-toci5kmpwu] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: var(--space-2) 0 0;
    padding: var(--space-2);
    list-style: none;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 24rem;
    overflow-y: auto;
}

    .diagnostics-search__results[b-toci5kmpwu]::-webkit-scrollbar {
        width: 6px;
    }

    .diagnostics-search__results[b-toci5kmpwu]::-webkit-scrollbar-track {
        background-color: var(--sidebar-scrollbar-track);
    }

    .diagnostics-search__results[b-toci5kmpwu]::-webkit-scrollbar-thumb {
        background: var(--sidebar-scrollbar-thumb);
        border-radius: var(--radius-lg);
    }

        .diagnostics-search__results[b-toci5kmpwu]::-webkit-scrollbar-thumb:hover {
            background: var(--sidebar-scrollbar-thumb-hover);
        }

.diagnostics-search__loading[b-toci5kmpwu] {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    list-style: none;
}

.diagnostics-search__spinner[b-toci5kmpwu] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: diagnostics-search-spin-b-toci5kmpwu 0.6s linear infinite;
}

@keyframes diagnostics-search-spin-b-toci5kmpwu {
    to {
        transform: rotate(360deg);
    }
}

.diagnostics-search__empty[b-toci5kmpwu] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.diagnostics-search__result[b-toci5kmpwu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

    .diagnostics-search__result:hover[b-toci5kmpwu],
    .diagnostics-search__result--active[b-toci5kmpwu] {
        background: var(--color-surface-subtle);
    }

.diagnostics-search__result-heading[b-toci5kmpwu] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.diagnostics-search__result-context[b-toci5kmpwu] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsSelfHelpView.razor.rz.scp.css */
.diagnostics-self-help[b-zn9aiyuhd9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.diagnostics-self-help__header[b-zn9aiyuhd9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.diagnostics-self-help__back[b-zn9aiyuhd9] {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    transition: color var(--transition-fast);
    align-self: flex-start;
}

    .diagnostics-self-help__back:hover[b-zn9aiyuhd9] {
        color: var(--color-secondary);
    }

    .diagnostics-self-help__back:focus-visible[b-zn9aiyuhd9] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

.diagnostics-self-help__heading[b-zn9aiyuhd9] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-body);
    font-family: var(--font-display);
}

.diagnostics-self-help__description[b-zn9aiyuhd9] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ── Column layout ──────────────────────────────────────────────────────── */

.diagnostics-self-help__columns[b-zn9aiyuhd9] {
    display: grid;
    gap: var(--space-2);
    align-items: start;
}

.diagnostics-self-help__columns--one[b-zn9aiyuhd9] {
    grid-template-columns: 1fr;
}

.diagnostics-self-help__columns--two[b-zn9aiyuhd9] {
    grid-template-columns: 1fr 1fr;
}

.diagnostics-self-help__column[b-zn9aiyuhd9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.diagnostics-self-help__module[b-zn9aiyuhd9] {
    position: relative;
    padding: var(--space-8);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

/* ── Video ──────────────────────────────────────────────────────────────── */

[b-zn9aiyuhd9] .diagnostics-self-help__video-wrapper {
    margin: calc(-1 * var(--space-8));
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface-subtle);
}

[b-zn9aiyuhd9] .diagnostics-self-help__video-skeleton {
    position: absolute;
    inset: 0;
    background: var(--color-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

[b-zn9aiyuhd9] .diagnostics-self-help__video-spinner {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: diag-video-spin-b-zn9aiyuhd9 0.8s linear infinite;
}

@keyframes diag-video-spin-b-zn9aiyuhd9 {
    to { transform: rotate(360deg); }
}

[b-zn9aiyuhd9] .diagnostics-self-help__video-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

[b-zn9aiyuhd9] .diagnostics-self-help__video-frame--loading {
    opacity: 0;
}

[b-zn9aiyuhd9] .diagnostics-self-help__video-caption {
    margin: var(--space-2) 0 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

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

.diagnostics-self-help__form[b-zn9aiyuhd9] {
    /* InlineFormBuilder handles its own spacing. */
}

/* ── Panels (danger / info / warning) ──────────────────────────────────── */

[b-zn9aiyuhd9] .diagnostics-self-help__panel {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin: calc(-1 * var(--space-8));
    border-radius: var(--radius-lg);
    border-left-width: 4px;
    border-left-style: solid;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel--danger {
    background: var(--color-error-surface);
    border-left-color: var(--color-error);
    border-color: var(--color-error-border);
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel--info {
    background: var(--color-info-surface);
    border-left-color: var(--color-info);
    border-color: var(--color-info-border);
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel--warning {
    background: var(--color-warning-surface);
    border-left-color: var(--color-warning);
    border-color: var(--color-warning-border);
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel-icon {
    flex-shrink: 0;
    font-size: var(--text-xl);
    margin-top: 0.1em;
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel--danger .diagnostics-self-help__panel-icon {
    color: var(--color-error-text);
}
[b-zn9aiyuhd9] .diagnostics-self-help__panel--info .diagnostics-self-help__panel-icon {
    color: var(--color-info-text);
}
[b-zn9aiyuhd9] .diagnostics-self-help__panel--warning .diagnostics-self-help__panel-icon {
    color: var(--color-warning-text);
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel-heading {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

[b-zn9aiyuhd9] .diagnostics-self-help__panel--danger   .diagnostics-self-help__panel-heading { color: var(--color-error-text);   }
[b-zn9aiyuhd9] .diagnostics-self-help__panel--info     .diagnostics-self-help__panel-heading { color: var(--color-info-text);    }
[b-zn9aiyuhd9] .diagnostics-self-help__panel--warning  .diagnostics-self-help__panel-heading { color: var(--color-warning-text); }

[b-zn9aiyuhd9] .diagnostics-self-help__panel-body {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-body);
}

/* ── Instructions ───────────────────────────────────────────────────────── */

[b-zn9aiyuhd9] .diagnostics-self-help__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 0 0 var(--space-6);
    margin: 0;
}

[b-zn9aiyuhd9] .diagnostics-self-help__step {
    font-size: var(--text-base);
    color: var(--color-text-body);
    line-height: 1.6;
    padding-left: var(--space-2);
}

    [b-zn9aiyuhd9] .diagnostics-self-help__step::marker {
        font-weight: var(--font-semibold);
        color: var(--color-primary);
    }

/* ── Contact ────────────────────────────────────────────────────────────── */

[b-zn9aiyuhd9] .diagnostics-self-help__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-8);
    margin: calc(-1 * var(--space-8));
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

[b-zn9aiyuhd9] .diagnostics-self-help__contact-text {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

[b-zn9aiyuhd9] .diagnostics-self-help__contact-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    font-family: var(--font-display);
    text-decoration: none;
}

    [b-zn9aiyuhd9] .diagnostics-self-help__contact-phone:hover {
        color: var(--color-secondary);
        text-decoration: underline;
    }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@container page-content (max-width: 768px) {
    .diagnostics-self-help__columns--two[b-zn9aiyuhd9] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsSubCategoryView.razor.rz.scp.css */
.diagnostics-subcategory-view[b-1m20vm8cs3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.diagnostics-subcategory-view__column[b-1m20vm8cs3] {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.diagnostics-subcategory-view__heading[b-1m20vm8cs3] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.diagnostics-subcategory-view__list[b-1m20vm8cs3] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.diagnostics-subcategory-view__item[b-1m20vm8cs3] {
    border-bottom: 1px solid var(--color-surface-overlay);
}

    .diagnostics-subcategory-view__item:last-child[b-1m20vm8cs3] {
        border-bottom: none;
    }

.diagnostics-subcategory-view__link[b-1m20vm8cs3] {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-text-body);
    cursor: pointer;
    transition: color var(--transition-fast);
}

    .diagnostics-subcategory-view__link:hover[b-1m20vm8cs3] {
        color: var(--color-primary);
    }

    .diagnostics-subcategory-view__link:focus-visible[b-1m20vm8cs3] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

.diagnostics-subcategory-view__link-arrow[b-1m20vm8cs3] {
    flex-shrink: 0;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

    .diagnostics-subcategory-view__link:hover .diagnostics-subcategory-view__link-arrow[b-1m20vm8cs3] {
        transform: translateX(3px);
        color: var(--color-primary);
    }

@container page-content (max-width: 768px) {
    .diagnostics-subcategory-view[b-1m20vm8cs3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 480px) {
    .diagnostics-subcategory-view[b-1m20vm8cs3] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/Diagnostics/DiagnosticsTopicGrid.razor.rz.scp.css */
.diagnostics-topic-grid[b-dqak579uom] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

    .diagnostics-topic-grid.diagnostics-topic-grid--single[b-dqak579uom] {
        grid-template-columns: repeat(1, 1fr);
    }

    .diagnostics-topic-grid.diagnostics-topic-grid--double[b-dqak579uom] {
        grid-template-columns: repeat(2, 1fr);
    }

.diagnostics-topic-grid__item[b-dqak579uom] {
    display: flex;
    flex-direction: column;
}

.diagnostics-topic-grid__card[b-dqak579uom] {
    all: unset;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .diagnostics-topic-grid__card:hover[b-dqak579uom] {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .diagnostics-topic-grid__card:focus-visible[b-dqak579uom] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.diagnostics-topic-grid__card-icon[b-dqak579uom] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: var(--text-xl);
}

.diagnostics-topic-grid__card-body[b-dqak579uom] {
    flex: 1;
    min-width: 0;
}

.diagnostics-topic-grid__card-heading[b-dqak579uom] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    line-height: 1.3;
}

.diagnostics-topic-grid__card-description[b-dqak579uom] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.diagnostics-topic-grid__card-arrow[b-dqak579uom] {
    flex-shrink: 0;
    align-self: center;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.diagnostics-topic-grid__card:hover .diagnostics-topic-grid__card-arrow[b-dqak579uom] {
    transform: translateX(3px);
    color: var(--color-primary);
}

@container page-content (max-width: 768px) {
    .diagnostics-topic-grid[b-dqak579uom] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

@container page-content (max-width: 480px) {
    .diagnostics-topic-grid[b-dqak579uom] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/DocumentsModule.razor.rz.scp.css */
/* ── Layout shell ── */
.layout[b-in35pg7tm2] {
    display: flex;
    gap: var(--space-4);
}

/* ── Sidebar ── */

.sidebar-inner[b-in35pg7tm2] {
    position: sticky;
    top: var(--space-4);
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

.nav-item[b-in35pg7tm2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    color: var(--sidebar-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: background var(--transition-fast);
    position: relative;
}

    .nav-item:hover[b-in35pg7tm2] {
        background: var(--sidebar-hover-bg);
    }

    .nav-item.active[b-in35pg7tm2] {
        background: var(--sidebar-active-bg);
    }

        /* Left accent bar on active item */
        .nav-item.active[b-in35pg7tm2]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 20%;
            bottom: 20%;
            width: var(--border-base);
            border-radius: var(--radius-full);
            background: var(--color-primary);
        }

.nav-icon[b-in35pg7tm2] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-border);
    background: var(--color-surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* ── Main content ── */
.main[b-in35pg7tm2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow: auto;
}

/* ── Card ── */
.card[b-in35pg7tm2] {
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* ── Filter form ── */
.filter-grid[b-in35pg7tm2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

    .filter-grid .btn-update[b-in35pg7tm2] {
        grid-column: 1;
    }

.field[b-in35pg7tm2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field--search[b-in35pg7tm2] {
    flex-direction: row;
    align-items: flex-end;
    grid-column: span 3;
}

.field label[b-in35pg7tm2] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-body);
}

.field input[b-in35pg7tm2],
.field select[b-in35pg7tm2] {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    background: var(--color-surface-inset);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    height: 48px;
    appearance: none;
    -webkit-appearance: none;
}

    .field input:focus[b-in35pg7tm2],
    .field select:focus[b-in35pg7tm2] {
        border-color: var(--color-border-focus);
        box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.15);
    }

.search-field[b-in35pg7tm2] {
    flex: 1 1 auto;
}

/* Custom select arrow */
.select-wrapper[b-in35pg7tm2] {
    position: relative;
}

    .select-wrapper select[b-in35pg7tm2] {
        padding-right: var(--space-10);
        cursor: pointer;
    }

    .select-wrapper[b-in35pg7tm2]::after {
        content: '';
        position: absolute;
        right: var(--space-4);
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid var(--color-text-muted);
        pointer-events: none;
    }

/* ── Loading / refreshing states ── */
.documents-module__spinner[b-in35pg7tm2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.results-grid--refreshing[b-in35pg7tm2] {
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

/* ── Document results ── */
.results-grid[b-in35pg7tm2] {
    display: grid;
    gap: var(--space-6);
}

.doc-card[b-in35pg7tm2] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

    .doc-card:last-of-type[b-in35pg7tm2] {
        border-bottom: 0;
        padding-bottom: 0;
    }

.doc-header[b-in35pg7tm2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.doc-icon[b-in35pg7tm2] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: var(--border-thin) solid var(--color-border);
    background: var(--color-surface-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-primary);
}

.doc-name[b-in35pg7tm2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.doc-title[b-in35pg7tm2] {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    line-height: var(--leading-normal);
    word-break: break-word;
}

.doc-description[b-in35pg7tm2] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doc-meta[b-in35pg7tm2] {
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.doc-actions[b-in35pg7tm2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.btn-doc[b-in35pg7tm2] {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: var(--space-3) var(--space-4);
    height: 44px;
    border-radius: var(--radius-md);
    width: 100%;
}

    .btn-doc:hover[b-in35pg7tm2] {
        background: var(--color-secondary);
    }

/* ── Theme toggle (demo affordance) ── */
.theme-toggle[b-in35pg7tm2] {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 100;
    transition: background var(--transition-fast);
}

    .theme-toggle:hover[b-in35pg7tm2] {
        background: var(--color-surface-overlay);
    }

/* ── Responsive ── */
@container page-content (max-width: 768px) {

    .layout[b-in35pg7tm2] {
        flex-direction: column;
    }

    .sidebar[b-in35pg7tm2] {
        position: sticky;
        top: var(--space-4);
        width: unset;
        z-index: var(--z-raised);
    }

    .sidebar-inner[b-in35pg7tm2] {
        display: flex;
        flex-direction: row;
    }

    .filter-grid[b-in35pg7tm2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .field--search[b-in35pg7tm2] {
        grid-column: unset;
        flex-direction: column;
    }

    .search-field[b-in35pg7tm2] {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }
}

@container page-content (max-width: 568px) {

    .sidebar-inner[b-in35pg7tm2] {
        flex-direction: column;
    }

    .filter-grid[b-in35pg7tm2] {
        grid-template-columns: 1fr;
    }

    .doc-card[b-in35pg7tm2] {
        flex-direction: column;
    }

    .doc-actions[b-in35pg7tm2] {
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}
/* /Components/Cms/Blocks/FormModule.razor.rz.scp.css */
.form-module[b-ojsl2ax54f] {
    padding: var(--space-8);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

@container page-content (max-width: 768px) {
    .form-module[b-ojsl2ax54f] {
        padding: var(--space-6);
    }
}

.form-module__rte[b-ojsl2ax54f] {
    margin-bottom: var(--space-8);
}

.form-module__loading[b-ojsl2ax54f] {
    display: flex;
    justify-content: center;
    padding: var(--space-8);
}

.form-success[b-ojsl2ax54f] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    justify-content: center;
    flex-direction: column;
    padding: var(--space-8);
}

/* /Components/Cms/Blocks/GridLayoutIconsModule.razor.rz.scp.css */
.grid-module__grid[b-uie73visvp] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: 0;
    margin: var(--space-20) 0 0 0;
}

@container page-content (max-width: 768px) {
    .grid-module__grid[b-uie73visvp] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 568px) {
    .grid-module__grid[b-uie73visvp] {
        grid-template-columns: repeat(1, 1fr);
    }
}

.grid_module__content[b-uie73visvp] {
    position: relative;
    display: block;
    height: 100%;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
    text-decoration: none;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    padding: var(--space-6);
    padding-top: var(--space-20);
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .grid_module__content:hover[b-uie73visvp] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
        color: var(--color-text-body);
    }

.grid_module__icon[b-uie73visvp] {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

    .grid_module__icon[b-uie73visvp]  i {
        color: var(--color-white);
        font-size: var(--text-3xl);
    }

.grid_module__link[b-uie73visvp] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    color: unset;
}
/* /Components/Cms/Blocks/ImageGalleryModule.razor.rz.scp.css */
/* ── Image gallery rotator ────────────────────────────────────────────────── */

.block--image-gallery[b-209qgs4nnb] {
    margin-bottom: var(--space-12);
}

/* Stacking context: all slides share the same grid cell so the container
   height tracks the current (in-flow) slide. Overflow hidden clips exiting
   slides as they translate off-screen. */
.gallery__rotator[b-209qgs4nnb] {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-subtle);
}

/* ── Slides ───────────────────────────────────────────────────────────────── */

.gallery__slide[b-209qgs4nnb] {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 10;
    background: linear-gradient(90deg,
        var(--color-surface-subtle) 25%,
        var(--color-surface-overlay) 50%,
        var(--color-surface-subtle) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.gallery__img[b-209qgs4nnb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes gal-exit-left-b-209qgs4nnb {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@keyframes gal-exit-right-b-209qgs4nnb {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@keyframes gal-enter-right-b-209qgs4nnb {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes gal-enter-left-b-209qgs4nnb {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.gallery__slide--offscreen[b-209qgs4nnb] {
    transform: translateX(100%);
}

.gallery__slide--exit-left[b-209qgs4nnb] {
    animation: gal-exit-left-b-209qgs4nnb 0.5s ease-in-out forwards;
}

.gallery__slide--exit-right[b-209qgs4nnb] {
    animation: gal-exit-right-b-209qgs4nnb 0.5s ease-in-out forwards;
}

.gallery__slide--enter-right[b-209qgs4nnb] {
    animation: gal-enter-right-b-209qgs4nnb 0.5s ease-in-out;
}

.gallery__slide--enter-left[b-209qgs4nnb] {
    animation: gal-enter-left-b-209qgs4nnb 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .gallery__slide--exit-left[b-209qgs4nnb],
    .gallery__slide--exit-right[b-209qgs4nnb],
    .gallery__slide--enter-right[b-209qgs4nnb],
    .gallery__slide--enter-left[b-209qgs4nnb],
    .gallery__slide[b-209qgs4nnb] {
        animation: none;
    }
}

/* ── Navigation arrows ────────────────────────────────────────────────────── */

/* Arrows sit inside the rotator (position:relative) so top:50% centres them
   within the image area. z-index raises them above the stacked slides. */
.gallery__arrow[b-209qgs4nnb] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(0, 0, 0, 0.4);
    color: var(--color-text-inverse);
    border: 1px solid var(--on-dark-btn-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.gallery__arrow:hover[b-209qgs4nnb] {
    background-color: rgba(0, 0, 0, 0.65);
}

.gallery__arrow--prev[b-209qgs4nnb] {
    left: var(--space-4);
}

.gallery__arrow--next[b-209qgs4nnb] {
    right: var(--space-4);
}

/* ── Caption ──────────────────────────────────────────────────────────────── */

.gallery__caption[b-209qgs4nnb] {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    text-align: center;
}
/* /Components/Cms/Blocks/ListingLayoutIconsModule.razor.rz.scp.css */
.block__list[b-04ok19oaay] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.block__list-link[b-04ok19oaay],
.block__list-content[b-04ok19oaay] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    font-size: var(--text-xl);
    flex: 1 1 auto;
    text-decoration: none;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .block__list-link:hover[b-04ok19oaay],
    .block__list-content:hover[b-04ok19oaay] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
        color: var(--color-text-body);
    }

.block__list-label[b-04ok19oaay] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding-right: var(--space-8);
    min-width: 250px;
}

.block__list-icon[b-04ok19oaay] {
    font-size: var(--text-3xl);
    color: var(--color-primary);
}

.block__list-description[b-04ok19oaay] {
    font-size: var(--text-base);
}

@container page-content (max-width: 768px) {
    .block__list-link[b-04ok19oaay],
    .block__list-content[b-04ok19oaay] {
        font-size: var(--text-base);
    }
}

@container page-content (max-width: 568px) {
    .block__list-link[b-04ok19oaay],
    .block__list-content[b-04ok19oaay] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-6);
    }

    .block__list-label[b-04ok19oaay] {
        justify-content: center;
        gap: var(--space-2);
        padding-right: 0;
        min-width: unset;
        font-weight: var(--font-bold);
    }

    .block__list-label[b-04ok19oaay],
    .block__list-description[b-04ok19oaay] {
        text-align: left;
    }
}
/* /Components/Cms/Blocks/NewsModule.razor.rz.scp.css */
.news-feed__track[b-y9w0e9nt4j] {
    position: relative;
    display: grid;
    overflow: hidden;
    row-gap: var(--space-2);
    border-radius: var(--radius-xl);
    background-color: var(--color-primary);
}

    .news-feed__track[b-y9w0e9nt4j]:before,
    .news-feed__track[b-y9w0e9nt4j]:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--space-8);
        z-index: var(--z-raised);
    }

    .news-feed__track[b-y9w0e9nt4j]:before {
        left: 0;
        border-top-left-radius: var(--radius-xl);
        border-bottom-left-radius: var(--radius-xl);
        background: linear-gradient(to left, transparent, var(--color-primary));
    }

    .news-feed__track[b-y9w0e9nt4j]:after {
        right: 0;
        border-top-right-radius: var(--radius-xl);
        border-bottom-right-radius: var(--radius-xl);
        background: linear-gradient(to right, transparent, var(--color-primary));
    }

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes nf-exit-left-b-y9w0e9nt4j {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes nf-exit-right-b-y9w0e9nt4j {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes nf-enter-right-b-y9w0e9nt4j {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes nf-enter-left-b-y9w0e9nt4j {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.news-feed__card--offscreen[b-y9w0e9nt4j] {
    transform: translateX(100%);
}

.news-feed__card--exit-left[b-y9w0e9nt4j] {
    animation: nf-exit-left-b-y9w0e9nt4j 0.5s ease-in-out forwards;
}

.news-feed__card--exit-right[b-y9w0e9nt4j] {
    animation: nf-exit-right-b-y9w0e9nt4j 0.5s ease-in-out forwards;
}

.news-feed__card--enter-right[b-y9w0e9nt4j] {
    animation: nf-enter-right-b-y9w0e9nt4j 0.5s ease-in-out;
}

.news-feed__card--enter-left[b-y9w0e9nt4j] {
    animation: nf-enter-left-b-y9w0e9nt4j 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .news-feed__card--exit-left[b-y9w0e9nt4j],
    .news-feed__card--exit-right[b-y9w0e9nt4j],
    .news-feed__card--enter-right[b-y9w0e9nt4j],
    .news-feed__card--enter-left[b-y9w0e9nt4j] {
        animation: none;
    }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.news-feed__card[b-y9w0e9nt4j] {
    grid-column: 1;
    grid-row: 1;
    color: var(--color-text-on-primary);
    display: flex;
    padding: var(--space-8);
    gap: var(--space-6);
}

.news-feed__track--slider .news-feed__card[b-y9w0e9nt4j] {
    padding-right: var(--space-36);
}

.news-feed__card-body[b-y9w0e9nt4j] {
    flex: 1;
    min-width: 0;
}

.news-feed__card-title[b-y9w0e9nt4j] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
    color: var(--color-text-on-primary);
}

.news-feed__card-text[b-y9w0e9nt4j] {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-on-primary);
    margin: 0;
}

    .news-feed__card-text p[b-y9w0e9nt4j] {
        margin: 0;
    }

        .news-feed__card-text p + p[b-y9w0e9nt4j] {
            margin-top: var(--space-2);
        }

.news-feed__link[b-y9w0e9nt4j] {
    display: inline-block;
    color: var(--color-text-on-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-top: var(--space-4);
    text-decoration: none;
}

    .news-feed__link:hover span[b-y9w0e9nt4j] {
        text-decoration: underline;
    }

/* ── Empty state ──────────────────────────────────────────────────────────── */

.news-feed__empty[b-y9w0e9nt4j] {
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

.news-feed__card-nav[b-y9w0e9nt4j] {
    position: absolute;
    top: 50%;
    right: var(--space-8);
    transform: translateY(-50%);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    z-index: var(--z-raised);
}

.news-feed__card-nav-btns[b-y9w0e9nt4j] {
    display: flex;
    gap: var(--space-2);
}

.news-feed__card-btn[b-y9w0e9nt4j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--on-dark-btn-bg);
    color: var(--color-white);
    border: 1px solid var(--on-dark-btn-border);
    padding: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

    .news-feed__card-btn:hover[b-y9w0e9nt4j] {
        background-color: var(--on-dark-btn-bg-hover);
    }

    .news-feed__card-btn:focus-visible[b-y9w0e9nt4j] {
        outline: 2px solid var(--color-white);
        outline-offset: 2px;
    }

@container page-content (max-width: 672px) {

    .news-feed__card-nav[b-y9w0e9nt4j] {
        top: unset;
        left: 0;
        right: 0;
        margin: auto;
        bottom: var(--space-4);
    }

    .news-feed__track--slider .news-feed__card[b-y9w0e9nt4j] {
        padding-right: var(--space-8);
        padding-bottom: var(--space-24);
    }
}
/* /Components/Cms/Blocks/NotificationsModule.razor.rz.scp.css */
/* ── Shell ── two-pane card: list on the left, detail on the right */
.notifications-module__shell[b-tziol7ai1w] {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    overflow: hidden;
}

/* ── List pane ── */
.notifications-module__list[b-tziol7ai1w] {
    width: 320px;
    min-width: 320px;
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    display: flex;
    border-radius: var(--radius-lg);
    flex-direction: column;
}

    .notifications-module__list .notifications-module__list-item:last-child .notifications-module__item[b-tziol7ai1w] {
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .notifications-module__list .notifications-module__list-item:not(:last-child)[b-tziol7ai1w] {
        border-bottom: var(--border-thin) solid var(--color-border);
    }

.notifications-module__list-item[b-tziol7ai1w] {
    margin: 0;
}

.notifications-module__list-header[b-tziol7ai1w] {
    padding: var(--space-5) var(--space-5);
    border-bottom: var(--border-thin) solid var(--color-border);
}

.notifications-module__list-heading[b-tziol7ai1w] {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    margin: 0;
}

.notifications-module__items[b-tziol7ai1w] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

/* ── Item row ── */
.notifications-module__item[b-tziol7ai1w] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    position: relative;
    border-radius: unset;
    transition: background var(--transition-fast);
    font-family: var(--font-sans);
    color: var(--color-text-body);
}

    .notifications-module__item:hover[b-tziol7ai1w],
    .notifications-module__item:focus-visible[b-tziol7ai1w] {
        background: var(--sidebar-hover-bg);
        outline: none;
    }

    /* Selected row — subtle fill + left accent bar (matches the sidebar / docs pattern). */
    .notifications-module__item.is-active[b-tziol7ai1w] {
        background: var(--sidebar-active-bg);
    }

        .notifications-module__item.is-active[b-tziol7ai1w]::before {
            content: '';
            position: absolute;
            left: 0;
            top: var(--space-2);
            bottom: var(--space-2);
            width: var(--border-thick);
            border-radius: 0 var(--radius-full) var(--radius-full) 0;
            background: var(--color-primary);
        }

/* Avatar circle — single icon since notifications don't carry a per-item glyph. */
.notifications-module__avatar[b-tziol7ai1w] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-full);
    background: var(--color-surface-inset);
    border: var(--border-thin) solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

    .notifications-module__avatar i[b-tziol7ai1w] {
        font-size: var(--text-lg);
    }

.notifications-module__meta[b-tziol7ai1w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.notifications-module__name[b-tziol7ai1w] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unread rows lean heavier and add the side dot. */
.notifications-module__item.is-unread .notifications-module__name[b-tziol7ai1w] {
    font-weight: var(--font-semibold);
}

.notifications-module__preview[b-tziol7ai1w] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notifications-module__date[b-tziol7ai1w] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    align-self: flex-start;
    padding-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notifications-module__unread-dot[b-tziol7ai1w] {
    position: absolute;
    right: var(--space-6);
    bottom: var(--space-4);
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-secondary);
    flex-shrink: 0;
    margin-left: var(--space-1);
}

/* ── Detail pane ── */
.notifications-module__detail[b-tziol7ai1w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    min-width: 0;
}

.notifications-module__detail-header[b-tziol7ai1w] {
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-6);
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-top-right-radius: var(--radius-lg);
    border-top-left-radius: var(--radius-lg);
    gap: var(--space-4);
}

.notifications-module__detail-heading[b-tziol7ai1w] {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    margin: 0;
    line-height: var(--leading-tight);
}

.notifications-module__detail-date[b-tziol7ai1w] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.notifications-module__detail-body[b-tziol7ai1w] {
    flex: 1;
    overflow-y: auto;
}

.notifications-module__detail-card[b-tziol7ai1w] {
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-top: unset;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    padding: var(--space-6);
    color: var(--color-text-body);
    line-height: var(--leading-normal);
}

    .notifications-module__detail-card[b-tziol7ai1w]  p {
        margin: 0 0 var(--space-3);
    }

        .notifications-module__detail-card[b-tziol7ai1w]  p:last-child {
            margin-bottom: 0;
        }

    .notifications-module__detail-card[b-tziol7ai1w]  ul,
    .notifications-module__detail-card[b-tziol7ai1w]  ol {
        padding-left: var(--space-5);
        margin: var(--space-2) 0 var(--space-3);
    }

    .notifications-module__detail-card[b-tziol7ai1w]  li {
        line-height: var(--leading-loose, 1.7);
    }

    .notifications-module__detail-card[b-tziol7ai1w]  a {
        color: var(--color-primary);
        text-decoration: underline;
    }

.notifications-module__detail-empty[b-tziol7ai1w] {
    margin: auto;
    padding: var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Loading / empty states (outer) ── */
.notifications-module__loading[b-tziol7ai1w] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) 0;
}

.notifications-module__empty[b-tziol7ai1w] {
    padding: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

/* ── Responsive ── stack the two panes below the inbox breakpoint. */
@container page-content (max-width: 768px) {

    .notifications-module__shell[b-tziol7ai1w] {
        flex-direction: column;
        min-height: unset;
    }

    .notifications-module__list[b-tziol7ai1w] {
        width: 100%;
        min-width: 0;
        border-right: none;
        border-bottom: var(--border-thin) solid var(--color-border);
    }

    .notifications-module__detail-header[b-tziol7ai1w],
    .notifications-module__detail-body[b-tziol7ai1w] {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }
}
/* /Components/Cms/Blocks/ProfileModule.razor.rz.scp.css */
/* ── Three-column grid ─────────────────────────────────────────────── */
.profile-grid[b-j1tx52yf1k] {
    display: grid;
    grid-template-columns: 300px 1fr 280px;
    gap: var(--space-2);
    align-items: start;
}

.col-tenancy[b-j1tx52yf1k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

@container page-content (max-width: 792px) {
    .profile-grid[b-j1tx52yf1k] {
        grid-template-columns: 1fr 1fr;
    }

    .col-tenancy[b-j1tx52yf1k] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 640px) {
    .profile-grid[b-j1tx52yf1k] {
        grid-template-columns: 1fr;
    }

    .col-tenancy[b-j1tx52yf1k] {
        grid-column: auto;
    }
}

/* ── Card ──────────────────────────────────────────────────────────── */
.card[b-j1tx52yf1k] {
    background: var(--color-surface-raised);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

/* ── Tenancy info list ─────────────────────────────────────────────── */
.tenancy-list[b-j1tx52yf1k] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
}

.tenancy-item[b-j1tx52yf1k] {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

    .tenancy-item:first-child[b-j1tx52yf1k] {
        padding-top: 0;
    }

    .tenancy-item:last-child[b-j1tx52yf1k] {
        border-bottom: none;
        padding-bottom: 0;
    }

.tenancy-label[b-j1tx52yf1k] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    margin-bottom: var(--space-2);
}

.tenancy-value[b-j1tx52yf1k] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: var(--leading-normal);
    margin-bottom: 0;
}

    .tenancy-value + .tenancy-value[b-j1tx52yf1k] {
        margin-top: var(--space-2);
    }

    .tenancy-value a[b-j1tx52yf1k] {
        text-decoration-style: dotted;
    }

    .tenancy-value i[b-j1tx52yf1k] {
        color: var(--color-text-muted);
    }

/* ── Section heading ───────────────────────────────────────────────── */
.section-heading[b-j1tx52yf1k] {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    margin-bottom: var(--space-1);
}

.section-subtext[b-j1tx52yf1k] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

/* ── Form fields ───────────────────────────────────────────────────── */
.form-stack[b-j1tx52yf1k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.field-group[b-j1tx52yf1k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field-input--error[b-j1tx52yf1k] {
    border-color: var(--color-error);
    outline-color: var(--color-error);
}

.field-error[b-j1tx52yf1k] {
    font-size: var(--text-xs);
    color: var(--color-error);
    margin: 0;
}

/* ── Manage account field (read-only email) ────────────────────────── */
.account-email[b-j1tx52yf1k] {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    background: var(--color-surface-inset);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
    margin-bottom: var(--space-5);
}

.account-label[b-j1tx52yf1k] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-body);
    margin-bottom: var(--space-2);
    display: block;
}

.btn-stack[b-j1tx52yf1k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* /Components/Cms/Blocks/QuickLinksModule.razor.rz.scp.css */
.quick-links-module__list[b-eig7k7lbm4] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

@container page-content (max-width: 768px) {
    .quick-links-module__list[b-eig7k7lbm4] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }
}

@container page-content (max-width: 640px) {
    .quick-links-module__list[b-eig7k7lbm4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-links-module__list-item[b-eig7k7lbm4] {
    margin: 0;
}

.quick-links-module__list-item-inner[b-eig7k7lbm4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--color-text-body);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    text-align: center;
    cursor: pointer;
}

    .quick-links-module__list-item-inner:hover[b-eig7k7lbm4],
    a.quick-links-module__list-item-inner:hover[b-eig7k7lbm4] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
        color: var(--color-text-body);
    }

.quick-links-module__icon[b-eig7k7lbm4] {
    font-size: 2.25rem;
    color: var(--color-primary);
    line-height: 1;
}

.quick-links-module__label[b-eig7k7lbm4] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-body);
}
/* /Components/Cms/Blocks/QuoteModule.razor.rz.scp.css */
.quote-module[b-9mm5otuhau] {
    margin: 0;
    padding: var(--space-8) var(--space-10);
    border-left: 4px solid var(--color-primary);
    background-color: var(--color-surface-raised);
    border-radius: var(--radius-lg);
}

.quote-module__text[b-9mm5otuhau] {
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-text-body);
    margin: 0 0 var(--space-4) 0;
    line-height: 1.6;
}

.quote-module__footer[b-9mm5otuhau] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.quote-module__attribution[b-9mm5otuhau] {
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-body);
}

.quote-module__role[b-9mm5otuhau] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Cms/Blocks/RepairPathways/CategoryFlow.razor.rz.scp.css */
.category-flow[b-yc274yt4of] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.category-flow__unsupported[b-yc274yt4of] {
    color: var(--color-text-muted);
    font-style: italic;
}

.category-flow__resolution-layout[b-yc274yt4of] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-4);
    align-items: start;
}

@container page-content (max-width: 840px) {
    .category-flow__resolution-layout[b-yc274yt4of] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}
/* /Components/Cms/Blocks/RepairPathways/CategoryGrid.razor.rz.scp.css */
.category-grid[b-uq0lzxawq7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.category-grid__description[b-uq0lzxawq7] {
    font-size: var(--text-base);
    white-space: pre-line;
    margin: 0 0 var(--space-4) 0;
}

.category-grid__error[b-uq0lzxawq7] {
    color: var(--color-error-text);
    margin: 0;
}

.category-grid__list[b-uq0lzxawq7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-grid__card[b-uq0lzxawq7] {
    display: flex;
    flex-direction: column;
}

.category-grid__card--loading[b-uq0lzxawq7] {
    cursor: progress;
}

.category-grid__card-button[b-uq0lzxawq7] {
    all: unset;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    overflow: hidden;
    height: 100%;
    cursor: pointer;
}

    .category-grid__card-button:hover[b-uq0lzxawq7] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

    .category-grid__card-button:disabled[b-uq0lzxawq7] {
        cursor: not-allowed;
    }

    .category-grid__card-button:focus-visible[b-uq0lzxawq7] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.category-grid__card-image-wrap[b-uq0lzxawq7] {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(90deg,
        var(--color-surface-subtle) 25%,
        var(--color-surface-overlay) 50%,
        var(--color-surface-subtle) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.category-grid__card-image[b-uq0lzxawq7] {
    width: 100%;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

.category-grid__card-body[b-uq0lzxawq7] {
    padding: var(--space-8);
}

.category-grid__card-heading[b-uq0lzxawq7] {
    margin: 0;
    padding: 0;
}

.category-grid__card-summary[b-uq0lzxawq7] {
    font-size: var(--text-base);
    margin-top: var(--space-4);
}

.category-grid__card-overlay[b-uq0lzxawq7] {
    position: absolute;
    inset: 0;
    background-color: var(--color-surface-raised);
    opacity: 0.7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .category-grid__card-image-wrap[b-uq0lzxawq7] {
        animation: none;
    }
}

@container page-content (max-width: 768px) {
    .category-grid__list[b-uq0lzxawq7] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}

@container page-content (max-width: 468px) {
    .category-grid__list[b-uq0lzxawq7] {
        grid-template-columns: 1fr;
    }

    .category-grid__card-body[b-uq0lzxawq7] {
        padding: var(--space-4);
    }
}
/* /Components/Cms/Blocks/RepairPathways/PathwayBreadcrumb.razor.rz.scp.css */
.pathway-breadcrumb[b-vl83hx8xra] {
    position: relative;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

/* ── Mobile-first defaults ─────────────────────────────────────────────────
   On narrow screens the trail is hidden behind a disclosure toggle showing
   the current step. The list is absolutely positioned as a dropdown so the
   surrounding layout doesn't reflow when it opens. */

.pathway-breadcrumb__toggle[b-vl83hx8xra] {
    all: unset;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-raised);
    cursor: pointer;
    color: var(--color-body-text);
    font-weight: var(--font-semibold);
    max-width: 100%;
}

    .pathway-breadcrumb__toggle:focus-visible[b-vl83hx8xra] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.pathway-breadcrumb__toggle-label[b-vl83hx8xra] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pathway-breadcrumb__toggle-icon[b-vl83hx8xra] {
    transition: transform var(--transition-fast);
}

.pathway-breadcrumb--open .pathway-breadcrumb__toggle-icon[b-vl83hx8xra] {
    transform: rotate(180deg);
}

.pathway-breadcrumb__list[b-vl83hx8xra] {
    /* Mobile collapsed state: full list lives in a dropdown panel hidden
       until the toggle opens it. */
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: var(--space-2) 0 0;
    padding: var(--space-2);
    list-style: none;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.pathway-breadcrumb--open .pathway-breadcrumb__list[b-vl83hx8xra] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pathway-breadcrumb__item[b-vl83hx8xra] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
}

/* Separators are inline-list affordances; vertical dropdown doesn't need them. */
.pathway-breadcrumb__separator[b-vl83hx8xra] {
    display: none;
    color: var(--color-text-muted);
}

.pathway-breadcrumb__link[b-vl83hx8xra] {
    all: unset;
    color: var(--color-body-text);
    font-weight: var(--font-semibold);
    cursor: pointer;
}

    .pathway-breadcrumb__link:hover[b-vl83hx8xra],
    .pathway-breadcrumb__link:focus-visible[b-vl83hx8xra] {
        color: var(--color-primary);
        text-decoration: underline;
    }

    .pathway-breadcrumb__link:focus-visible[b-vl83hx8xra] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

.pathway-breadcrumb__current[b-vl83hx8xra] {
    color: var(--color-text-muted);
}

/* ── Desktop overrides ──────────────────────────────────────────────────────
   Above the breakpoint, hide the toggle and always render the list inline,
   as it was before this change. */

@container page-content (min-width: 768px) {
    .pathway-breadcrumb__toggle[b-vl83hx8xra] {
        display: none;
    }

    .pathway-breadcrumb__list[b-vl83hx8xra] {
        /* Reset the dropdown panel styling so the list sits inline again. */
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }

    .pathway-breadcrumb__item[b-vl83hx8xra] {
        padding: 0;
    }

    .pathway-breadcrumb__separator[b-vl83hx8xra] {
        display: inline;
    }
}
/* /Components/Cms/Blocks/RepairPathways/PathwayPicker.razor.rz.scp.css */
.pathway-picker[b-r9kcx4ax7l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

    .pathway-picker.pathway-picker--two-columns[b-r9kcx4ax7l] {
        grid-template-columns: repeat(2, 1fr);
    }

.pathway-picker__card[b-r9kcx4ax7l] {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    overflow: hidden;
}

    .pathway-picker__card:hover[b-r9kcx4ax7l] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

.pathway-picker__card-button[b-r9kcx4ax7l] {
    all: unset;
    display: block;
    padding: var(--space-8);
    cursor: pointer;
    border-radius: inherit;
}

    .pathway-picker__card-button:focus-visible[b-r9kcx4ax7l] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.pathway-picker__card-heading[b-r9kcx4ax7l] {
    margin: 0;
    padding: 0;
}

.pathway-picker__card-summary[b-r9kcx4ax7l] {
    font-size: var(--text-base);
    margin-top: var(--space-4);
}

@container page-content (max-width: 768px) {
    .pathway-picker[b-r9kcx4ax7l] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 468px) {
    .pathway-picker[b-r9kcx4ax7l],
    .pathway-picker.pathway-picker--two-columns[b-r9kcx4ax7l] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/RepairPathways/PathwaySearch.razor.rz.scp.css */
.pathway-search[b-oixkamx7ae] {
    position: relative;
    margin-bottom: var(--space-8);
}

@media (max-width: 1024px) {
    .pathway-search[b-oixkamx7ae] {
        position: sticky;
        background-color: var(--color-surface-page);
        top: var(--space-16);
        padding-bottom: var(--space-8);
        z-index: var(--z-raised);
    }
}

.pathway-search__label[b-oixkamx7ae] {
    display: block;
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

.pathway-search__input[b-oixkamx7ae] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    background-color: var(--color-surface-raised);
}

    .pathway-search__input:focus-visible[b-oixkamx7ae] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

/* ── Results dropdown ───────────────────────────────────────────────────── */

.pathway-search__results[b-oixkamx7ae] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    margin: var(--space-2) 0 0;
    padding: var(--space-2);
    list-style: none;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 24rem;
    overflow-y: auto;
}

    .pathway-search__results[b-oixkamx7ae]::-webkit-scrollbar {
        width: 6px;
    }

    .pathway-search__results[b-oixkamx7ae]::-webkit-scrollbar-track {
        background-color: var(--sidebar-scrollbar-track);
    }

    .pathway-search__results[b-oixkamx7ae]::-webkit-scrollbar-thumb {
        background: var(--sidebar-scrollbar-thumb);
        border-radius: var(--radius-lg);
    }

        .pathway-search__results[b-oixkamx7ae]::-webkit-scrollbar-thumb:hover {
            background: var(--sidebar-scrollbar-thumb-hover);
        }

.pathway-search__loading[b-oixkamx7ae] {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    list-style: none;
}

.pathway-search__spinner[b-oixkamx7ae] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: pathway-search-spin-b-oixkamx7ae 0.6s linear infinite;
}

@keyframes pathway-search-spin-b-oixkamx7ae {
    to {
        transform: rotate(360deg);
    }
}

.pathway-search__empty[b-oixkamx7ae] {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
}

.pathway-search__result[b-oixkamx7ae] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

    .pathway-search__result--active[b-oixkamx7ae],
    .pathway-search__result:hover[b-oixkamx7ae] {
        background-color: var(--color-surface-overlay);
    }

.pathway-search__result-heading[b-oixkamx7ae] {
    font-weight: var(--font-semibold);
}

.pathway-search__result-context[b-oixkamx7ae] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.pathway-search__result-snippet[b-oixkamx7ae] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Cms/Blocks/RepairPathways/RepairPathwaysModule.razor.rz.scp.css */
/* Module-level chrome only. Picker / category-grid / flow each scope their own styles. */

.repair-pathways-module__questionnaire[b-fx2b7j4u4y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) 0;
}

.repair-pathways-module__questionnaire-actions[b-fx2b7j4u4y] {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
}

.repair-pathways-module__questionnaire-hint[b-fx2b7j4u4y]{
    margin-bottom: 0;
}

@container page-content (max-width: 768px) {
    .repair-pathways-module__questionnaire-actions[b-fx2b7j4u4y] {
        flex-direction: column;
        padding: var(--space-6);
    }
}

/* ── loader ──────────────────────────────────────────────────────── */
.repair-pathways-module--loading[b-fx2b7j4u4y] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
}

/* ── Other module-level chrome ──────────────────────────────────────────── */

.repair-pathways-module__error[b-fx2b7j4u4y],
.repair-pathways-module__empty[b-fx2b7j4u4y] {
    color: var(--color-text-muted);
    margin: 0;
}

.repair-pathways-module__back[b-fx2b7j4u4y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    margin-bottom: var(--space-4);
    font: inherit;
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    cursor: pointer;
}

    .repair-pathways-module__back:hover span[b-fx2b7j4u4y],
    .repair-pathways-module__back:focus-visible span[b-fx2b7j4u4y] {
        text-decoration: underline;
    }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@container page-content (max-width: 768px) {
    .repair-pathways-module__skeleton-grid[b-fx2b7j4u4y] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 372px) {
    .repair-pathways-module__skeleton-grid[b-fx2b7j4u4y] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/RepairPathways/Steps/BranchStep.razor.rz.scp.css */
.branch-step__list[b-hv71qlgom4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

    .branch-step__list.branch-step__list--two-columns[b-hv71qlgom4] {
        grid-template-columns: repeat(2, 1fr);
    }

.branch-step__card[b-hv71qlgom4] {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .branch-step__card:hover[b-hv71qlgom4] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

.branch-step__card-button[b-hv71qlgom4] {
    all: unset;
    display: block;
    padding: var(--space-8);
    cursor: pointer;
    border-radius: inherit;
}

    .branch-step__card-button:focus-visible[b-hv71qlgom4] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.branch-step__card-heading[b-hv71qlgom4] {
    margin: 0;
    padding: 0;
}

.branch-step__card-summary[b-hv71qlgom4] {
    font-size: var(--text-base);
    margin-top: var(--space-4);
    color: var(--color-text-muted);
}

@container page-content (max-width: 768px) {
    .branch-step__list[b-hv71qlgom4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container page-content (max-width: 478px) {
    .branch-step__list[b-hv71qlgom4],
    .branch-step__list.branch-step__list--two-columns[b-hv71qlgom4] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/RepairPathways/Steps/QuestionStep.razor.rz.scp.css */
.question-step[b-hmqne3oqnz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.question-step__heading[b-hmqne3oqnz] {
    margin: 0;
    padding: 0;
}

.question-step__help[b-hmqne3oqnz] {
    padding: var(--space-4) 0;
}

    /* Help text is authored as rich HTML — trim leading/trailing margins so it
   sits cleanly between the heading and the answers. */
    .question-step__help :first-child[b-hmqne3oqnz] {
        margin-top: 0;
    }

    .question-step__help :last-child[b-hmqne3oqnz] {
        margin-bottom: 0;
    }

/* ── Answers as a card grid (matches the topic step layout) ─────────────── */

.question-step__answers[b-hmqne3oqnz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

    .question-step__answers.question-step__answers--two-columns[b-hmqne3oqnz] {
        grid-template-columns: repeat(2, 1fr);
    }

.question-step__answer-card[b-hmqne3oqnz] {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .question-step__answer-card:hover[b-hmqne3oqnz] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

.question-step__answer-button[b-hmqne3oqnz] {
    all: unset;
    display: block;
    padding: var(--space-8);
    cursor: pointer;
    border-radius: inherit;
}

    .question-step__answer-button:focus-visible[b-hmqne3oqnz] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.question-step__answer-heading[b-hmqne3oqnz] {
    margin: 0;
    padding: 0;
}

.question-step__answer-summary[b-hmqne3oqnz] {
    font-size: var(--text-sm);
    margin: var(--space-4) 0 0 0;
}

/* ── Dropdown variant ───────────────────────────────────────────────────── */

.question-step__dropdown[b-hmqne3oqnz] {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    background-color: var(--color-surface-raised);
}

@container page-content (max-width: 768px) {
    .question-step__answers[b-hmqne3oqnz] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}

@container page-content (max-width: 478px) {
    .question-step__answers[b-hmqne3oqnz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/RepairPathways/Steps/ResolutionStep.razor.rz.scp.css */
.resolution-step[b-auep91ltp7] {
    display: flex;
    gap: var(--space-6);
    flex-direction: column;
}

.resolution-step__inner[b-auep91ltp7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    grid-column: span 2;
}

@container page-content (min-width: 700px) {
    .resolution-step--columns[b-auep91ltp7] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }
}

.resolution-step__title[b-auep91ltp7] {
    margin: 0;
    padding: 0;
}

.resolution-step__message[b-auep91ltp7] {
    margin: 0;
}

.resolution-step__summary[b-auep91ltp7] {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.resolution-step__row[b-auep91ltp7] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-3);
}

    .resolution-step__row dt[b-auep91ltp7] {
        font-weight: 600;
        color: var(--color-text-muted);
    }

    .resolution-step__row dd[b-auep91ltp7] {
        margin: 0;
    }

/* ── Additional info textarea (Summary phase) ───────────────────────────────── */

.resolution-step__field[b-auep91ltp7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.resolution-step__label[b-auep91ltp7] {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.resolution-step__textarea[b-auep91ltp7] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-body);
    font-family: inherit;
    font-size: var(--text-sm);
    resize: vertical;
    min-height: 96px;
}

    .resolution-step__textarea:focus[b-auep91ltp7] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-surface-overlay);
    }

/* ── Image uploader (Summary phase) ─────────────────────────────────────────── */

.resolution-step__image-hint[b-auep91ltp7] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.resolution-step__image-previews[b-auep91ltp7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.resolution-step__image-preview[b-auep91ltp7] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

    .resolution-step__image-preview img[b-auep91ltp7] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.resolution-step__image-remove[b-auep91ltp7] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.55);
    color: var(--color-white);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}

    .resolution-step__image-remove:hover[b-auep91ltp7] {
        background: rgba(0, 0, 0, 0.8);
    }

.resolution-step__image-error[b-auep91ltp7] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-error);
}

.resolution-step__add-images[b-auep91ltp7] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    padding: var(--space-8);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    cursor: pointer;
    user-select: none;
}

    .resolution-step__add-images:hover[b-auep91ltp7] {
        border-color: var(--color-primary);
    }

    .resolution-step__add-images[b-auep91ltp7]  input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        opacity: 0;
    }

/* ── Submit + intermediate phase blocks ─────────────────────────────────────── */


.resolution-step__submitting[b-auep91ltp7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.resolution-step__scheduling[b-auep91ltp7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.resolution-step__raised-confirmation[b-auep91ltp7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-success-surface);
    border-left: 4px solid var(--color-success);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-success-text);
}

@container page-content (max-width: 700px) {
    .resolution-step__raised-confirmation[b-auep91ltp7] {
        display: block;
    }
}

.resolution-step__done[b-auep91ltp7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--color-success-text);
    background: var(--color-success-surface);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-lg);
}

    .resolution-step__done p[b-auep91ltp7] {
        margin: 0;
    }

resolution-step__confirmation-icon[b-auep91ltp7] {
    color: var(--color-success);
    font-size: var(--text-2xl);
}

.resolution-step__confirmation-message[b-auep91ltp7] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

@container page-content (max-width: 568px) {
    .resolution-step__confirmation-message[b-auep91ltp7] {
        flex-direction: column;
        align-items: unset;
    }
}
/* /Components/Cms/Blocks/RepairPathways/Steps/SelfServeStep.razor.rz.scp.css */
.self-serve-step[b-u3wnfyag7k] {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.self-serve-step__title[b-u3wnfyag7k] {
    margin: 0;
    padding: 0;
}

.self-serve-step__body :first-child[b-u3wnfyag7k] {
    margin-top: 0;
}

.self-serve-step__body :last-child[b-u3wnfyag7k] {
    margin-bottom: 0;
}

.self-serve-step__links[b-u3wnfyag7k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

@container page-content (max-width: 768px) {
    .self-serve-step[b-u3wnfyag7k] {
        padding: var(--space-6);
    }
}
/* /Components/Cms/Blocks/RepairPathways/Steps/TopicsStep.razor.rz.scp.css */
.topics-step__grid[b-ya7xu3frwb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

    .topics-step__grid.topics-step__grid--two-columns[b-ya7xu3frwb] {
        grid-template-columns: repeat(2, 1fr);
    }

.topics-step__card[b-ya7xu3frwb] {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .topics-step__card:hover[b-ya7xu3frwb] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

.topics-step__card-button[b-ya7xu3frwb] {
    all: unset;
    display: block;
    padding: var(--space-8);
    cursor: pointer;
    border-radius: inherit;
}

    .topics-step__card-button:focus-visible[b-ya7xu3frwb] {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

.topics-step__card-heading[b-ya7xu3frwb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

.topics-step__card-icon[b-ya7xu3frwb] {
    display: inline-block;
    font-size: var(--text-3xl);
    color: var(--color-primary);
}

.topics-step__card-summary[b-ya7xu3frwb] {
    font-size: var(--text-sm);
    margin-top: var(--space-4);
}

@container page-content (max-width: 768px) {
    .topics-step__grid[b-ya7xu3frwb] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
}

@container page-content (max-width: 372px) {
    .topics-step__grid[b-ya7xu3frwb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Cms/Blocks/RepairsModule.razor.rz.scp.css */
.repairs-module__spinner[b-apvgth8s2g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* -- Report repair buttons wrapper ------------------------------------------ */

.repairs-module__report-buttons[b-apvgth8s2g] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.repairs-module__filter[b-apvgth8s2g] {
    display: flex;
    justify-content: end;
    align-items: flex-end;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    background-color: var(--color-surface-raised);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    padding: var(--space-8);
}

@container page-content (max-width: 992px) {

    .repairs-module__filter[b-apvgth8s2g] {
        flex-wrap: wrap;
    }
}

@container page-content (max-width: 480px) {

    .repairs-module__filter-field[b-apvgth8s2g] {
        width: 100%;
    }

    .repairs-module__filter-inputs[b-apvgth8s2g]  button {
        width: 100%;
    }
}

.repairs-module__filter-field[b-apvgth8s2g] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
}

/* Full-width so it drops onto its own line beneath the filter row rather than
   squeezing into the flex track alongside the inputs. */
.repairs-module__filter-hint[b-apvgth8s2g] {
    flex: 0 0 100%;
    margin: 0;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

    .repairs-module__filter-field label[b-apvgth8s2g] {
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-text-muted);
    }

    .repairs-module__filter-field input[b-apvgth8s2g] {
        width: 100%;
    }

/* ── Shimmer ──────────────────────────────────────────────────────────────── */

@keyframes shimmer-b-apvgth8s2g {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.repair-card--shimmer[b-apvgth8s2g] {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    pointer-events: none;
}

    .repair-card--shimmer[b-apvgth8s2g]::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.4;
        background: linear-gradient( 90deg, var(--color-surface-raised) 25%, var(--skeleton-shimmer-peak) 50%, var(--color-surface-raised) 75% );
        background-size: 600px 100%;
        animation: shimmer-b-apvgth8s2g 1.6s infinite linear;
    }

@media (prefers-reduced-motion: reduce) {
    .repair-card--shimmer[b-apvgth8s2g] {
        animation: none;
        background: var(--color-surface-subtle);
    }
}

.repairs-module__sortbar[b-apvgth8s2g] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-12) 0 0 0;
}

[b-apvgth8s2g] button.repairs-module__sort-button {
    border-radius: var(--radius-xl);
}

/* ── Results ──────────────────────────────────────────────────────────────── */
.repairs-module__results[b-apvgth8s2g] {
    position: relative;
    overflow: hidden;
}

.repairs-module__empty[b-apvgth8s2g] {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    margin: 0;
}

.repair-list[b-apvgth8s2g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.repair-card[b-apvgth8s2g] {
    padding: var(--space-6);
    background-color: var(--color-surface-raised);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    position: relative;
}

/* ── Active / in-flight ───────────────────────────────────────────────────── */
.repair-card--raised[b-apvgth8s2g],
.repair-card--scheduled[b-apvgth8s2g],
.repair-card--inprogress[b-apvgth8s2g] {
    border-color: var(--color-info-border);
}

/* ── Completed ────────────────────────────────────────────────────────────── */
.repair-card--completed[b-apvgth8s2g] {
    border-color: var(--color-success-border);
}

/* ── Cancelled ────────────────────────────────────────────────────────────── */
.repair-card--cancelled[b-apvgth8s2g] {
    border-color: var(--color-border);
}

/* ── Failed ───────────────────────────────────────────────────────────────── */
.repair-card--failed[b-apvgth8s2g] {
    border-color: var(--color-error-border);
}

/* ── Awaiting info / on hold / no access / follow-on ─────────────────────── */
.repair-card--awaitinginfo[b-apvgth8s2g],
.repair-card--followonrequired[b-apvgth8s2g],
.repair-card--onhold[b-apvgth8s2g],
.repair-card--noaccess[b-apvgth8s2g] {
    border-color: var(--color-warning-border);
}

/* ── Custom / unknown ─────────────────────────────────────────────────────── */
.repair-card--custom[b-apvgth8s2g],
.repair-card--unknown[b-apvgth8s2g] {
    border-color: var(--color-border);
}

.repair-card:hover[b-apvgth8s2g] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-body[b-apvgth8s2g] {
    padding: 0 var(--space-8);
    flex: 1;
}

.card-header[b-apvgth8s2g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding-left: var(--space-32);
}

.card-meta[b-apvgth8s2g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.card-meta-label[b-apvgth8s2g] {
    font-size: var(--text-base);
    color: var(--color-info-text);
    font-weight: var(--font-bold);
}

.card-meta-value[b-apvgth8s2g] {
    font-size: var(--text-sm);
    color: var(--color-text-body);
}

.card-divider[b-apvgth8s2g] {
    height: 0.5px;
    background: var(--color-border);
    margin-bottom: var(--space-6);
}

.card-main[b-apvgth8s2g] {
    display: flex;
    gap: var(--space-12);
    justify-content: space-between;
    align-items: center;
}

.card-actions[b-apvgth8s2g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.summary-label[b-apvgth8s2g] {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-info-text);
    margin-bottom: var(--space-2);
}

.summary-value[b-apvgth8s2g] {
    font-size: var(--text-base);
    color: var(--color-text-body);
    margin-bottom: var(--space-4);
}

.contractor-row[b-apvgth8s2g] {
    font-size: var(--text-base);
    color: var(--color-text-body);
}

    .contractor-row span[b-apvgth8s2g] {
        font-weight: var(--font-semibold);
        color: var(--color-info-text);
    }

@container page-content (max-width: 768px) {
    .card-header[b-apvgth8s2g],
    .card-main[b-apvgth8s2g] {
        display: flex;
        flex-direction: column;
        margin-bottom: unset;
    }

    .card-main[b-apvgth8s2g] {
        align-items: unset;
        gap: var(--space-2);
    }

    .card-body[b-apvgth8s2g] {
        padding: unset;
        padding-top: var(--space-16);
        display: grid;
        grid-template-columns: 2fr 2fr;
    }

    .card-header[b-apvgth8s2g] {
        padding-left: unset;
    }

    .card-divider[b-apvgth8s2g] {
        display: none;
    }
}

@container page-content (max-width: 578px) {
    .card-body[b-apvgth8s2g] {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
    }
}
/* /Components/Cms/Blocks/RichTextModule.razor.rz.scp.css */
/* =============================================================================
   RichTextModule — prose container styles
   =============================================================================
   Styles the HTML output from Umbraco's rich text editor. The editor produces
   standard HTML elements (p, ul, ol, a, strong, em, img, table, h2–h6) that
   are rendered inside .block--rich-text as a (MarkupString).

   Uses ::deep because the editor HTML is injected as raw markup — Blazor
   cannot add the component scope attribute to it.
   ============================================================================= */

.block--rich-text[b-rr1dbm3ecx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-12);
}

    .block--rich-text[b-rr1dbm3ecx]  :last-child {
        margin-bottom: 0;
    }

    .block--rich-text[b-rr1dbm3ecx]  p {
        line-height: var(--space-8);
    }

@container page-content (max-width: 768px) {
    .block--rich-text[b-rr1dbm3ecx] {
        padding: var(--space-6);
    }

        .block--rich-text[b-rr1dbm3ecx]  p {
            font-size: var(--text-base);
        }
}
/* /Components/Cms/Blocks/TransactionsModule.razor.rz.scp.css */
.transactions-module__spinner[b-j3gyftolxx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── Two-column layout ────────────────────────────────────────────────────── */

.transactions-module__grid[b-j3gyftolxx] {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: var(--space-4);
}

@container page-content (max-width: 768px) {
    .transactions-module__grid[b-j3gyftolxx] {
        grid-template-columns: 1fr;
    }
}

/* ── Balance card ─────────────────────────────────────────────────────────── */

.transactions-module__balance-inner[b-j3gyftolxx] {
    position: sticky;
    top: var(--space-4);
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.transactions-module__balance-wrapper[b-j3gyftolxx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.transactions-module__balance-label[b-j3gyftolxx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

.transactions-module__message[b-j3gyftolxx] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.transactions-module__action-links[b-j3gyftolxx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.transactions-module__action-link[b-j3gyftolxx] {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-sm);
    transition: opacity var(--transition-fast);
}

    .transactions-module__action-link:hover[b-j3gyftolxx] {
        opacity: 0.88;
        color: var(--color-text-on-primary);
    }

/* ── Filter bar ───────────────────────────────────────────────────────────── */

.transactions-module__list-area[b-j3gyftolxx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.transactions-module__filter[b-j3gyftolxx] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

/* Promoted from h4 to h3 for correct document outline (no h2/h3 precedes it on
   the page, so h4 would skip a level). The visual size is intentionally smaller
   than the global h3 — this is a section-bar caption, not a page heading. */
.transactions-module__filter-title[b-j3gyftolxx] {
    margin: 0;
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.transactions-module__filter-inputs[b-j3gyftolxx] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    width: 100%;
}

@container page-content (max-width: 468px) {
    .transactions-module__filter-inputs[b-j3gyftolxx] {
        flex-direction: column;
    }

    .transactions-module__filter-field[b-j3gyftolxx] {
        width: 100%;
    }
}

.transactions-module__filter-field[b-j3gyftolxx] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
}

.transactions-module__filter-hint[b-j3gyftolxx] {
    width: 100%;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

    .transactions-module__filter-field label[b-j3gyftolxx] {
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-text-muted);
    }

    .transactions-module__filter-field input[b-j3gyftolxx] {
        width: 100%;
    }

/* ── Overlay sweep — used during refresh after initial load ─────────────────── */

@keyframes overlay-sweep-b-j3gyftolxx {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ── Results table ────────────────────────────────────────────────────────── */

.transactions-module__results[b-j3gyftolxx] {
    position: relative;
    overflow: hidden;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

/* overlay shimmer — outer fades via CSS transition (no keyframes = no scoping risk) */
.transactions-module__overlay[b-j3gyftolxx] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.transactions-module__overlay--active[b-j3gyftolxx] {
    opacity: 1;
}

/* inner sweep uses keyframes — gracefully degrades if scoped by Blazor isolation */
.transactions-module__overlay__sweep[b-j3gyftolxx] {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, transparent 0%, var(--color-surface-raised) 50%, transparent 100% );
    background-size: 200% 100%;
    animation: overlay-sweep-b-j3gyftolxx 1.4s ease-in-out infinite;
    opacity: 0.7;
}

.transactions-module__empty[b-j3gyftolxx] {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    margin: 0;
}

.row-transaction[b-j3gyftolxx] {
    border-bottom: 1px solid var(--color-border);
}

    .row-transaction:last-child[b-j3gyftolxx] {
        border-bottom: 0;
    }

.col-date[b-j3gyftolxx] {
    white-space: nowrap;
    width: 9rem;
    color: var(--color-text-muted);
}

.col-amount[b-j3gyftolxx] {
    text-align: right;
    white-space: nowrap;
    width: 8rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium);
}

.running-balance[b-j3gyftolxx] {
    display: block;
    font-weight: var(--font-regular);
    color: var(--color-text-body);
}

.amount--credit[b-j3gyftolxx] {
    color: var(--color-success-text);
}

.amount--debit[b-j3gyftolxx] {
    color: var(--color-error-text);
}

.transactions-generate-pdf[b-j3gyftolxx] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

/* ── Payment button ───────────────────────────────────────────────────────── */
.transactions-module__pay-btn[b-j3gyftolxx] {
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
}

/* ── Payment modal body ───────────────────────────────────────────────────── */

.payment-modal__body[b-j3gyftolxx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.payment-modal__label[b-j3gyftolxx] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
}

.payment-modal__input[b-j3gyftolxx] {
    width: 100%;
}

.payment-modal__error[b-j3gyftolxx] {
    font-size: var(--text-sm);
    color: var(--color-error-text);
    margin: 0;
}
/* /Components/Cms/Blocks/VideoModule.razor.rz.scp.css */
.block__video-wrapper[b-t1umqhlycg] {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.block__video-frame[b-t1umqhlycg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.block__video-frame--loading[b-t1umqhlycg] {
    opacity: 0;
}

.block__video-skeleton[b-t1umqhlycg] {
    position: absolute;
    inset: 0;
    background: var(--color-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.block__video-spinner[b-t1umqhlycg] {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: video-spin-b-t1umqhlycg 0.8s linear infinite;
}

@keyframes video-spin-b-t1umqhlycg {
    to { transform: rotate(360deg); }
}

.block__video-caption[b-t1umqhlycg] {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Cms/Forms/Fields/DateField.razor.rz.scp.css */
/* Styles for the datepicker control live in DatePickerInput.razor.css */
/* /Components/Cms/Forms/Fields/FileUploadField.razor.rz.scp.css */
/* ── Styled trigger area ─────────────────────────────────────────────────────── */

.field-file-trigger[b-eze5umspzv] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

    .field-file-trigger:hover[b-eze5umspzv] {
        border-color: var(--color-primary);
        color: var(--color-text-body);
    }

    .field-file-trigger--error[b-eze5umspzv] {
        border-color: var(--color-error-border);
    }

    /* Visually hide the native input while keeping it keyboard/screenreader accessible */
    .field-file-trigger[b-eze5umspzv]  input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
        opacity: 0;
    }

/* ── Selected files list ─────────────────────────────────────────────────────── */

.field-file-list[b-eze5umspzv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field-file-item[b-eze5umspzv] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.field-file-item__name[b-eze5umspzv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.field-file-item__remove[b-eze5umspzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .field-file-item__remove:hover[b-eze5umspzv] {
        background: var(--color-error-surface);
        color: var(--color-error-text);
    }

/* ── Dangerous-type error ────────────────────────────────────────────────────── */

.field-file-upload-error[b-eze5umspzv] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-error-text);
}
/* /Components/Cms/Forms/InlineFormBuilder.razor.rz.scp.css */
/* =============================================================================
   INLINE FORM BUILDER
   InlineFormBuilder.razor.css
   =============================================================================
   Styles for the form shell (progress, actions, summaries) and for all field
   components (ShortAnswerField, DropdownField, etc.).

   ── Draft restoration prompt ────────────────────────────────────────────────
   Shown at the top of the form when a previous session's autosave is present. */

.form-draft-prompt[b-o5nuc67q2p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background-color: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    color: var(--color-info-text);
    flex-wrap: wrap;
}

.form-draft-prompt__icon[b-o5nuc67q2p] {
    font-size: 1.25rem;
    color: var(--color-info);
}

.form-draft-prompt__message[b-o5nuc67q2p] {
    margin: 0;
    flex: 1;
    min-width: 12rem;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.form-draft-prompt__actions[b-o5nuc67q2p] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/*=============================================================================
   ::deep is required because field components are separate Blazor components
   and have their own scoped CSS attributes — without ::deep these rules would
   be limited to elements directly owned by InlineFormBuilder.
   ============================================================================= */

/* ── Form shell ─────────────────────────────────────────────────────────────── */

.form-builder[b-o5nuc67q2p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.form-builder__page[b-o5nuc67q2p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ── Progress indicator ─────────────────────────────────────────────────────── */
[b-o5nuc67q2p] .form-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

[b-o5nuc67q2p] .form-progress__caption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Field wrapper ──────────────────────────────────────────────────────────── */

[b-o5nuc67q2p] .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

[b-o5nuc67q2p] .form-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */

[b-o5nuc67q2p] .field-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-body);
}

[b-o5nuc67q2p] .field-required {
    color: var(--color-error);
    margin-left: var(--space-1);
}

[b-o5nuc67q2p] .field-hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Container column grid ──────────────────────────────────────────────────── */

.form-fieldset__title[b-o5nuc67q2p] {
    margin: 0;
}

/* The row establishes an inline-size container context so breakpoints are based
   on the form's own width, not the viewport — works correctly inside sidebars,
   panels, or any narrow layout. */
[b-o5nuc67q2p] .form-fieldset__row {
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: var(--space-4);
    align-items: start;
}

/* Each column spans an explicit number of row tracks (set via inline style from
   Blazor) and shares those tracks with adjacent columns via subgrid, so field N
   in column A always aligns with field N in column B regardless of error messages
   or hidden fields. */
[b-o5nuc67q2p] .form-fieldset__col {
    display: grid;
    grid-template-rows: subgrid;
}

/* Transparent wrapper that always occupies a subgrid slot, even when its
   FieldRenderer renders nothing (hidden field). This preserves row alignment
   across columns for conditionally hidden fields. */
[b-o5nuc67q2p] .form-fieldset__slot {
    min-height: 0;
}

/* Column span classes — 1 through 12 */
[b-o5nuc67q2p] .form-fieldset__col--1 {
    grid-column: span 1;
}

[b-o5nuc67q2p] .form-fieldset__col--2 {
    grid-column: span 2;
}

[b-o5nuc67q2p] .form-fieldset__col--3 {
    grid-column: span 3;
}

[b-o5nuc67q2p] .form-fieldset__col--4 {
    grid-column: span 4;
}

[b-o5nuc67q2p] .form-fieldset__col--5 {
    grid-column: span 5;
}

[b-o5nuc67q2p] .form-fieldset__col--6 {
    grid-column: span 6;
}

[b-o5nuc67q2p] .form-fieldset__col--7 {
    grid-column: span 7;
}

[b-o5nuc67q2p] .form-fieldset__col--8 {
    grid-column: span 8;
}

[b-o5nuc67q2p] .form-fieldset__col--9 {
    grid-column: span 9;
}

[b-o5nuc67q2p] .form-fieldset__col--10 {
    grid-column: span 10;
}

[b-o5nuc67q2p] .form-fieldset__col--11 {
    grid-column: span 11;
}

[b-o5nuc67q2p] .form-fieldset__col--12 {
    grid-column: span 12;
}

/* Narrow container: all partial-width columns collapse to full width.
   col--12 is already full width so it doesn't need to be listed here. */
@container (max-width: 480px) {
    [b-o5nuc67q2p] .form-fieldset__col--1,
    [b-o5nuc67q2p] .form-fieldset__col--2,
    [b-o5nuc67q2p] .form-fieldset__col--3,
    [b-o5nuc67q2p] .form-fieldset__col--4,
    [b-o5nuc67q2p] .form-fieldset__col--5,
    [b-o5nuc67q2p] .form-fieldset__col--6,
    [b-o5nuc67q2p] .form-fieldset__col--7,
    [b-o5nuc67q2p] .form-fieldset__col--8,
    [b-o5nuc67q2p] .form-fieldset__col--9,
    [b-o5nuc67q2p] .form-fieldset__col--10,
    [b-o5nuc67q2p] .form-fieldset__col--11 {
        grid-column: span 12;
    }
}

/* ── Text inputs & textarea ─────────────────────────────────────────────────── */

[b-o5nuc67q2p] .field-input--error,
[b-o5nuc67q2p] .field-textarea--error,
[b-o5nuc67q2p] .field-select--error {
    /* !important overrides the higher-specificity base rule
       input:not([type="checkbox"]):not([type="radio"]) — (0,2,1) vs our (0,2,0). */
    border-color: var(--color-error) !important;
}

    [b-o5nuc67q2p] .field-input--error:focus,
    [b-o5nuc67q2p] .field-textarea--error:focus,
    [b-o5nuc67q2p] .field-select--error:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent) !important;
    }

/* ── Valid state ────────────────────────────────────────────────────────────────
   Positive affordance shown after the first validation attempt for text fields that
   hold a non-empty, error-free value (see InlineFormBuilder.FieldIsValid). A success
   border plus an inline check icon anchored in the input wrapper. */

/* Wrapper establishes the positioning context for the absolutely-placed check icon. */
[b-o5nuc67q2p] .field-input-wrap {
    position: relative;
    display: block;
}

[b-o5nuc67q2p] .field-input--valid,
[b-o5nuc67q2p] .field-textarea--valid {
    border-color: var(--color-success-border) !important;
}

    [b-o5nuc67q2p] .field-input--valid:focus,
    [b-o5nuc67q2p] .field-textarea--valid:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success-border) 20%, transparent) !important;
    }

/* Leave room for the icon so entered text never sits underneath it. */
[b-o5nuc67q2p] .field-input--valid {
    padding-right: 2.25rem;
}

[b-o5nuc67q2p] .field-valid-icon {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-success);
    font-size: 1.125rem;
    pointer-events: none;
}

/* Textarea grows downward, so pin the icon to the top-right corner instead of centring it. */
[b-o5nuc67q2p] .field-valid-icon--textarea {
    top: var(--space-3);
    transform: none;
}

/* Host-prefilled read-only field (e.g. the repair reference on an enquiry form). Visibly
   locked so residents understand the value is supplied for them, not editable. */
[b-o5nuc67q2p] .field-input--readonly {
    background: var(--color-surface-muted, #f1f5f9);
    color: var(--color-text-muted, #64748b);
    cursor: not-allowed;
}

/* ── Checkboxes & radios ────────────────────────────────────────────────────── */

[b-o5nuc67q2p] .field-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

[b-o5nuc67q2p] .field-group-list {
}

[b-o5nuc67q2p] .field-checkbox-label,
[b-o5nuc67q2p] .field-radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    user-select: none;
}

    [b-o5nuc67q2p] .field-checkbox-label:hover,
    [b-o5nuc67q2p] .field-radio-label:hover {
        background: var(--color-surface-overlay);
    }

/* Custom control — shared base */
[b-o5nuc67q2p] .field-checkbox,
[b-o5nuc67q2p] .field-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    background-color: var(--color-surface-inset);
    border: var(--border-base) solid var(--color-border);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Checkbox — rounded square */
[b-o5nuc67q2p] .field-checkbox {
    border-radius: var(--radius-sm);
}

/* Radio — circle */
[b-o5nuc67q2p] .field-radio {
    border-radius: var(--radius-full);
}

/* Hover — lift border to primary */
[b-o5nuc67q2p] .field-checkbox-label:hover .field-checkbox,
[b-o5nuc67q2p] .field-radio-label:hover .field-radio {
    border-color: var(--color-primary);
}

/* Focus */
[b-o5nuc67q2p] .field-checkbox:focus-visible,
[b-o5nuc67q2p] .field-radio:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Checked — checkbox: filled primary with white tick */
[b-o5nuc67q2p] .field-checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

    [b-o5nuc67q2p] .field-checkbox:checked::after {
        content: "";
        position: absolute;
        inset: 2px;
        background-color: var(--color-text-on-primary);
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

/* Checked — radio: primary border with primary inner dot */
[b-o5nuc67q2p] .field-radio:checked {
    border-color: var(--color-primary);
}

    [b-o5nuc67q2p] .field-radio:checked::after {
        content: "";
        position: absolute;
        inset: 3px;
        background-color: var(--color-primary);
        border-radius: var(--radius-full);
    }

/* Error */
[b-o5nuc67q2p] .field-checkbox--error,
[b-o5nuc67q2p] .field-radio--error {
    border-color: var(--color-error-border);
}

    [b-o5nuc67q2p] .field-checkbox--error:focus-visible,
    [b-o5nuc67q2p] .field-radio--error:focus-visible {
        outline-color: var(--color-error-border);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-error-border) 20%, transparent);
    }

/* ── Character count ────────────────────────────────────────────────────────── */

[b-o5nuc67q2p] .field-char-count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: right;
    margin: 0;
}

/* Over the configured limit — escalate the counter to the error colour immediately as the
   user types, ahead of the authoritative max-length message on blur/submit. */
[b-o5nuc67q2p] .field-char-count--over {
    color: var(--color-error);
    font-weight: var(--font-medium);
}

/* ── Error message ──────────────────────────────────────────────────────────── */

[b-o5nuc67q2p] .field-error {
    font-size: var(--text-sm);
    color: var(--color-error);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

    [b-o5nuc67q2p] .field-error::before {
        content: "";
        display: inline-block;
        width: 0.75rem;
        height: 0.75rem;
        background-color: currentColor;
        flex-shrink: 0;
        /* Simple exclamation-mark icon via clip-path */
        clip-path: polygon(45% 0%, 55% 0%, 60% 65%, 40% 65%, 45% 0%, 40% 78%, 60% 78%, 60% 100%, 40% 100%, 40% 78%);
    }

/* ── Validation summary ─────────────────────────────────────────────────────── */

[b-o5nuc67q2p] .form-validation-summary {
    color: var(--color-error);
}

[b-o5nuc67q2p] .form-validation-summary__heading {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin: 0 0 var(--space-2) 0;
}

[b-o5nuc67q2p] .form-validation-summary__list {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--text-sm);
}

    [b-o5nuc67q2p] .form-validation-summary__list a {
        color: inherit;
        text-decoration: underline;
    }

/* ── Submit error ───────────────────────────────────────────────────────────── */

[b-o5nuc67q2p] .form-submit-error {
    font-size: var(--text-sm);
    color: var(--color-error);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-error-surface);
    border: var(--border-base) solid var(--color-error-border);
    border-radius: var(--radius-md);
}

/* ── Success state ──────────────────────────────────────────────────────────── */

.form-success[b-o5nuc67q2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-4);
}

.form-success__icon[b-o5nuc67q2p] {
    font-size: 3rem;
    color: var(--color-success-text);
}

.form-success__title[b-o5nuc67q2p] {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    margin: 0;
}

.form-success__message[b-o5nuc67q2p] {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin: 0;
}

    .form-success__message[b-o5nuc67q2p]  :last-child {
        margin-bottom: 0;
    }

/* ── Actions (prev / next / submit) ────────────────────────────────────────── */

.form-builder__actions[b-o5nuc67q2p] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

/* ── Suppress browser-native validation styling ─────────────────────────────── */

/* Belt-and-suspenders: ensure no browser-native :invalid glow or border bleeds
   through inside the form builder. Validation state is managed entirely by the
   C# code via field-*--error modifier classes — the browser should never be the
   one deciding when something looks broken.
   !important is necessary because the base CSS rule
   input:not([type="checkbox"]):not([type="radio"]) has specificity (0,2,1),
   which is higher than the ::deep rules at (0,2,0). */
[b-o5nuc67q2p] input:invalid,
[b-o5nuc67q2p] select:invalid,
[b-o5nuc67q2p] textarea:invalid,
[b-o5nuc67q2p] input:user-invalid,
[b-o5nuc67q2p] select:user-invalid,
[b-o5nuc67q2p] textarea:user-invalid {
    box-shadow: none !important;
    border-color: var(--color-border) !important;
    outline: none !important;
}
/* /Components/Features/AccessibilityMenu.razor.rz.scp.css */
.a11y-menu[b-lzd8jicnmq] {
    position: relative;
    display: inline-flex;
}

.a11y-menu__trigger[b-lzd8jicnmq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-warning-surface);
    border: var(--border-thin) solid var(--color-warning-border);
    color: var(--color-warning-text);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

    .a11y-menu__trigger:hover[b-lzd8jicnmq] {
        background: var(--color-secondary);
        color: var(--color-text-on-primary);
        box-shadow: var(--shadow-lg);
        transform: translateY(-1px);
    }

    .a11y-menu__trigger:focus-visible[b-lzd8jicnmq] {
        outline: 2px solid var(--color-focus-visible);
        outline-offset: 2px;
    }

    .a11y-menu__trigger[aria-expanded="true"][b-lzd8jicnmq] {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
        color: var(--color-text-on-primary);
        animation: none;
    }

@keyframes a11y-trigger-pulse-b-lzd8jicnmq {
    0% {
        box-shadow: 0 0 0 0 var(--color-warning);
    }

    70% {
        box-shadow: 0 0 0 8px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a11y-menu__trigger:hover[b-lzd8jicnmq] {
        animation: none;
    }
}

/* Sits below the popover so click-through dismissal works while popover
   content remains interactive. Transparent — it's only there for clicks. */
.a11y-menu__backdrop[b-lzd8jicnmq] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: var(--z-overlay);
}

.a11y-menu__popover[b-lzd8jicnmq] {
    position: absolute;
    bottom: calc(100% + var(--space-3));
    right: 0;
    z-index: calc(var(--z-overlay) + 1);
    width: 17rem;
    padding: var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Subtle entrance — respects reduced-motion via the token override */
    animation: a11y-menu-pop-b-lzd8jicnmq var(--transition-fast) ease-out;
    transform-origin: top right;
}

@keyframes a11y-menu-pop-b-lzd8jicnmq {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.a11y-menu__group[b-lzd8jicnmq] {
    border: none;
    padding: var(--space-3) 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

    /* Divider between groups instead of relying purely on gap */
    .a11y-menu__group + .a11y-menu__group[b-lzd8jicnmq] {
        border-top: 1px solid var(--color-border);
    }

.a11y-menu__legend[b-lzd8jicnmq] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: 0 var(--space-3) 0;
}

.a11y-menu__option[b-lzd8jicnmq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-body);
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

    .a11y-menu__option:hover[b-lzd8jicnmq] {
        background-color: var(--color-surface-subtle);
    }

    .a11y-menu__option:has(input:checked)[b-lzd8jicnmq],
    .a11y-menu__option--selected[b-lzd8jicnmq] {
        background: var(--color-secondary);
        border-color: var(--color-secondary);
        color: var(--color-text-on-primary);
        box-shadow: var(--shadow-lg);
        transform: translateY(-1px);
    }

    .a11y-menu__option:focus-within[b-lzd8jicnmq] {
        outline: 2px solid var(--color-secondary);
        outline-offset: -2px;
    }

    /* Visually hide the radio but keep it in the DOM/tab order for a11y */
    .a11y-menu__option input[b-lzd8jicnmq] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

.a11y-menu__option-label[b-lzd8jicnmq] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

    .a11y-menu__option-label i[b-lzd8jicnmq] {
        width: 1.25em;
        text-align: center;
        color: var(--color-text-muted);
        transition: color var(--transition-fast);
    }

.a11y-menu__option:has(input:checked) .a11y-menu__option-label i[b-lzd8jicnmq],
.a11y-menu__option--selected .a11y-menu__option-label i[b-lzd8jicnmq] {
    color: var(--color-text-on-primary);
}

/* Checkmark shown on the active option */
.a11y-menu__check[b-lzd8jicnmq] {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--color-text-on-primary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.a11y-menu__option:has(input:checked) .a11y-menu__check[b-lzd8jicnmq],
.a11y-menu__option--selected .a11y-menu__check[b-lzd8jicnmq] {
    opacity: 1;
}

.a11y-menu__option-label--large[b-lzd8jicnmq] {
    font-size: 1.0625rem;
}

.a11y-menu__option-label--xlarge[b-lzd8jicnmq] {
    font-size: 1.1875rem;
}

.a11y-menu__option-label--large i[b-lzd8jicnmq] {
    font-size: 1.0625rem;
}

.a11y-menu__option-label--xlarge i[b-lzd8jicnmq] {
    font-size: 1.1875rem;
}

/* Google Translate picker — our own control in place of the vendor widget. */
.a11y-menu__translate[b-lzd8jicnmq] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
}

    .a11y-menu__translate > i[b-lzd8jicnmq] {
        color: var(--color-text-muted);
        flex-shrink: 0;
    }

.a11y-menu__translate-select[b-lzd8jicnmq] {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-raised);
    color: var(--color-text-body);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

    .a11y-menu__translate-select:hover[b-lzd8jicnmq] {
        border-color: var(--color-secondary);
    }

    .a11y-menu__translate-select:focus-visible[b-lzd8jicnmq] {
        outline: 2px solid var(--color-secondary);
        outline-offset: 1px;
    }

/* Google's widget is initialised into this host purely to create its
   <select class="goog-te-combo">, which we drive programmatically. It must stay
   rendered at its natural size (Google skips building the combo if the target has
   no real layout box — a 1px clip is not enough), so we push it off-screen rather
   than hide it. The banner/body-offset chrome Google appends to <body> is handled
   in portalBridge (out of the component's scope reach). */
.a11y-menu__gt-host[b-lzd8jicnmq] {
    position: absolute;
    left: -9999px;
    top: 0;
    width: auto;
    height: auto;
}

@media (max-width: 576px) {
    .ally-menu__trigger-label[b-lzd8jicnmq] {
        display: none;
    }

    .a11y-menu__trigger[b-lzd8jicnmq] {
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        font-size: var(--text-2xl);
    }

    .a11y-menu__backdrop[b-lzd8jicnmq] {
        right: auto;
        left: 0;
        width: 100%;
        transform-origin: top left;
        background: var(--overlay-bg);
        opacity: 1;
        transition: opacity 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
    }
}
/* /Components/Features/AnnouncementsOverlay.razor.rz.scp.css */
/* ── Dialog shell ─────────────────────────────────────────────────────────── */

dialog.annc-dialog[b-9ikyu961ox] {
    border: none;
    border-radius: var(--radius-xl);
    padding: 0;
    width: min(440px, calc(100vw - 2rem));
    background: var(--color-surface-raised);
    color: var(--color-text-body);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 1;
    transform: scale(1) translateY(0);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}

dialog.annc-dialog:not([open])[b-9ikyu961ox] {
    opacity: 0;
    transform: scale(0.97) translateY(-6px);
}

dialog.annc-dialog[b-9ikyu961ox]::backdrop {
    background: var(--overlay-bg);
    opacity: 1;
    transition:
        opacity 0.2s ease,
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}

dialog.annc-dialog:not([open])[b-9ikyu961ox]::backdrop {
    opacity: 0;
}

@starting-style {
    dialog.annc-dialog[open][b-9ikyu961ox] {
        opacity: 0;
        transform: scale(0.97) translateY(-6px);
    }
    dialog.annc-dialog[open][b-9ikyu961ox]::backdrop {
        opacity: 0;
    }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.annc-card[b-9ikyu961ox] {
    display: flex;
    flex-direction: column;
}

/* ── Banner ───────────────────────────────────────────────────────────────── */

.annc-banner[b-9ikyu961ox] {
    position: relative;
    height: 210px;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.annc-banner__overlay[b-9ikyu961ox] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.annc-banner__close[b-9ikyu961ox] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0.5px solid var(--on-dark-btn-border);
    background: var(--on-dark-btn-bg);
    color: var(--color-text-on-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color var(--transition-fast);
}

.annc-banner__close:hover[b-9ikyu961ox] {
    background: var(--on-dark-btn-bg-hover);
}

.annc-banner__content[b-9ikyu961ox] {
    position: relative;
    z-index: 2;
    padding: 0 var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.annc-banner__pill[b-9ikyu961ox] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--on-dark-btn-bg);
    border: 0.5px solid var(--on-dark-btn-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-on-primary);
    width: fit-content;
}

.annc-banner__heading[b-9ikyu961ox] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-text-on-primary);
    line-height: var(--leading-snug);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.annc-body[b-9ikyu961ox] {
    padding: var(--space-5) var(--space-8) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    max-height: 200px;
    overflow-y: auto;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.annc-footer[b-9ikyu961ox] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.annc-link[b-9ikyu961ox] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    transition: background-color var(--transition-fast);
}

.annc-link:hover[b-9ikyu961ox] {
    background: var(--color-secondary);
    color: var(--color-text-on-primary);
}
/* /Components/Features/FeedbackButton.razor.rz.scp.css */
.feedback-btn[b-oip1rwbop4] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    border: var(--border-thin) solid var(--color-primary);
    color: var(--color-text-on-primary);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.feedback-btn:hover[b-oip1rwbop4] {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-on-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

@media (max-width: 576px) {
    .feedback-btn__label[b-oip1rwbop4] {
        display: none;
    }

    .feedback-btn[b-oip1rwbop4] {
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        font-size: var(--text-2xl);
    }
}
/* /Components/Features/OnboardingOverlay.razor.rz.scp.css */
/* ── Dialog shell ─────────────────────────────────────────────────────────── */

dialog.ob-dialog[b-e5iy5phh41] {
    border: none;
    border-radius: var(--radius-xl);
    padding: 0;
    width: min(440px, calc(100vw - 2rem));
    background: var(--color-surface-raised);
    color: var(--color-text-body);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    opacity: 1;
    transform: scale(1) translateY(0);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}

dialog.ob-dialog:not([open])[b-e5iy5phh41] {
    opacity: 0;
    transform: scale(0.97) translateY(-6px);
}

dialog.ob-dialog[b-e5iy5phh41]::backdrop {
    background: var(--overlay-bg);
    opacity: 1;
    transition:
        opacity 0.2s ease,
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}

dialog.ob-dialog:not([open])[b-e5iy5phh41]::backdrop {
    opacity: 0;
}

@starting-style {
    dialog.ob-dialog[open][b-e5iy5phh41] {
        opacity: 0;
        transform: scale(0.97) translateY(-6px);
    }
    dialog.ob-dialog[open][b-e5iy5phh41]::backdrop {
        opacity: 0;
    }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */

.ob-card[b-e5iy5phh41] {
    display: flex;
    flex-direction: column;
}

/* ── Banner ───────────────────────────────────────────────────────────────── */

.ob-banner[b-e5iy5phh41] {
    position: relative;
    height: 210px;
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.ob-banner__overlay[b-e5iy5phh41] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.ob-banner__close[b-e5iy5phh41] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0.5px solid var(--on-dark-btn-border);
    background: var(--on-dark-btn-bg);
    color: var(--color-text-on-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color var(--transition-fast);
}

.ob-banner__close:hover[b-e5iy5phh41] {
    background: var(--on-dark-btn-bg-hover);
}

.ob-banner__content[b-e5iy5phh41] {
    position: relative;
    z-index: 2;
    padding: 0 var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ob-banner__pill[b-e5iy5phh41] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--on-dark-btn-bg);
    border: 0.5px solid var(--on-dark-btn-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-on-primary);
    width: fit-content;
}

.ob-banner__heading[b-e5iy5phh41] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--color-text-on-primary);
    line-height: var(--leading-snug);
}

.ob-banner__bars[b-e5iy5phh41] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 3px;
    z-index: 3;
}

.ob-banner__bar[b-e5iy5phh41] {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
    transition: background-color 0.25s ease;
}

.ob-banner__bar--active[b-e5iy5phh41] {
    background: rgba(255, 255, 255, 0.9);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.ob-body[b-e5iy5phh41] {
    padding: var(--space-5) var(--space-8) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    max-height: 200px;
    overflow-y: auto;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.ob-footer[b-e5iy5phh41] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.ob-dots[b-e5iy5phh41] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.ob-dot[b-e5iy5phh41] {
    height: 7px;
    width: 7px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease;
}

.ob-dot--active[b-e5iy5phh41] {
    background: var(--color-primary);
    width: 18px;
    border-radius: 4px;
}

.ob-footer__actions[b-e5iy5phh41] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── Done state ───────────────────────────────────────────────────────────── */

.ob-done[b-e5iy5phh41] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-8);
}

.ob-done__icon[b-e5iy5phh41] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.ob-done__title[b-e5iy5phh41] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.ob-done__text[b-e5iy5phh41] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 260px;
}
/* /Components/Shared/BalanceBadge.razor.rz.scp.css */
/* ── Balance badge ──────────────────────────────────────────────────────────── */

.balance-badge[b-3n967ift5q] {
    display: block;
    font-weight: var(--font-bold);
    font-size: var(--text-3xl);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    width: 100%;
    text-align: center;
}

.balance-badge__additional-text[b-3n967ift5q] {
    display: block;
    font-size: var(--text-sm);
}

.balance-badge--credit[b-3n967ift5q] {
    background: var(--color-success-surface);
    color: var(--color-success-text);
}

.balance-badge--zero[b-3n967ift5q] {
    background: var(--color-surface-subtle);
}

.balance-badge--debit[b-3n967ift5q] {
    background: var(--color-error-surface);
    color: var(--color-error-text);
}

/* ── Skeleton loading state ─────────────────────────────────────────────────── */

/* Matches the shimmer style used in NavMenu.razor.css but uses page-level surface
   tokens so it works on both the white card (light mode) and dark card (dark mode). */

.balance-badge--skeleton[b-3n967ift5q] {
    min-height: 3.75rem; /* approximate rendered height of the badge */
    background: linear-gradient( 90deg, var(--color-surface-overlay) 25%, var(--color-surface-subtle) 50%, var(--color-surface-overlay) 75% );
    background-size: 200% 100%;
    animation: balance-badge-shimmer-b-3n967ift5q 1.6s ease-in-out infinite;
    color: transparent; /* hide any text that leaks in */
}

@keyframes balance-badge-shimmer-b-3n967ift5q {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .balance-badge--skeleton[b-3n967ift5q] {
        animation: none;
        background: var(--color-surface-overlay);
    }
}
/* /Components/Shared/ChargesModal.razor.rz.scp.css */
.charges-modal__table-wrap[b-ebcqitb2dq] {
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

.row-charge[b-ebcqitb2dq] {
    border-bottom: 1px solid var(--color-border);
}

    .row-charge:last-child[b-ebcqitb2dq] {
        border-bottom: 0;
    }

.col-frequency[b-ebcqitb2dq] {
    white-space: nowrap;
    color: var(--color-text-muted);
}

.col-amount[b-ebcqitb2dq] {
    text-align: right;
    white-space: nowrap;
    width: 8rem;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium);
}

.col-date[b-ebcqitb2dq] {
    white-space: nowrap;
    width: 9rem;
    color: var(--color-text-muted);
}
/* /Components/Shared/ContactDetailsPanel.razor.rz.scp.css */
.contact-details-panel[b-ks3kuxm17y] {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contact-details-panel__header[b-ks3kuxm17y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contact-details-panel__heading[b-ks3kuxm17y] {
    margin: 0;
    padding: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.contact-details-panel__hint[b-ks3kuxm17y] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.contact-details-panel__form[b-ks3kuxm17y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-details-panel__field[b-ks3kuxm17y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contact-details-panel__label[b-ks3kuxm17y] {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-body);
}

.contact-details-panel__input[b-ks3kuxm17y] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-body);
    font-family: inherit;
    font-size: var(--text-sm);
    box-sizing: border-box;
}

    .contact-details-panel__input:focus[b-ks3kuxm17y] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--color-surface-overlay);
    }

    .contact-details-panel__input--readonly[b-ks3kuxm17y] {
        background: var(--color-surface-subtle);
        color: var(--color-text-muted);
        cursor: default;
    }

    .contact-details-panel__input--error[b-ks3kuxm17y] {
        border-color: var(--color-error);
    }

.contact-details-panel__error[b-ks3kuxm17y] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-error);
}
/* /Components/Shared/DatePickerInput.razor.rz.scp.css */
.datepicker[b-6u1gexzspf] {
    position: relative;
}

.datepicker-input-wrap[b-6u1gexzspf] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.datepicker-input[b-6u1gexzspf] {
    flex: 1;
    padding-right: 2.5rem;
}

.datepicker-trigger[b-6u1gexzspf] {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

    .datepicker-trigger:hover[b-6u1gexzspf] {
        color: var(--color-primary);
        background: var(--color-surface-subtle);
    }

/* ── Popup shell ───────────────────────────────────────────────────────────── */

.datepicker-backdrop[b-6u1gexzspf] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: transparent;
}

.datepicker-popup[b-6u1gexzspf] {
    /* Position is set inline by portalBridge.positionDatePicker (fixed,
       above or below the anchor depending on viewport space). */
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-modal);
    width: 20rem;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── MudBlazor-style toolbar header ───────────────────────────────────────── */

.datepicker-toolbar[b-6u1gexzspf] {
    padding: var(--space-4) var(--space-6);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.datepicker-toolbar-year[b-6u1gexzspf] {
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: 0.75;
    line-height: 1;
}

.datepicker-toolbar-date[b-6u1gexzspf] {
    font-size: var(--text-3xl);
    line-height: 1.15;
}

/* ── Body wrapper (padded) ────────────────────────────────────────────────── */

.datepicker-body[b-6u1gexzspf] {
    padding: var(--space-2) var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Month / nav header ────────────────────────────────────────────────────── */

.datepicker-header[b-6u1gexzspf] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.datepicker-title[b-6u1gexzspf] {
    flex: 1;
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-body);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .datepicker-title:hover[b-6u1gexzspf] {
        background: var(--color-surface-subtle);
    }

.datepicker-nav[b-6u1gexzspf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

    .datepicker-nav:hover:not(:disabled)[b-6u1gexzspf] {
        color: var(--color-text-body);
        background: var(--color-surface-subtle);
    }

    .datepicker-nav:disabled[b-6u1gexzspf] {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* ── Grids ─────────────────────────────────────────────────────────────────── */

.datepicker-grid[b-6u1gexzspf] {
    display: grid;
    /* minmax(0, 1fr) is the fix: without the 0 minimum, grid columns refuse
       to shrink below their content's intrinsic size, pushing the last two
       columns past the popup edge. */
    gap: 2px;
}

.datepicker-grid--days[b-6u1gexzspf] {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: center;
}

.datepicker-grid--months[b-6u1gexzspf],
.datepicker-grid--years[b-6u1gexzspf] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
}

.datepicker-weekday[b-6u1gexzspf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.75rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.datepicker-cell[b-6u1gexzspf] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-body);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    padding: 0;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

    .datepicker-cell:hover:not(:disabled)[b-6u1gexzspf] {
        background: var(--color-surface-subtle);
    }

    .datepicker-cell:disabled[b-6u1gexzspf] {
        color: var(--color-text-muted);
        opacity: 0.35;
        cursor: not-allowed;
    }

/* Day cells are perfectly circular. */
.datepicker-cell--day[b-6u1gexzspf] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

/* Month/year cells are rounded pills. */
.datepicker-cell--month[b-6u1gexzspf],
.datepicker-cell--year[b-6u1gexzspf] {
    height: 2.5rem;
    border-radius: var(--radius-md);
}

.datepicker-cell--muted[b-6u1gexzspf] {
    color: var(--color-text-muted);
}

.datepicker-cell--today[b-6u1gexzspf] {
    box-shadow: inset 0 0 0 1px var(--color-primary);
    color: var(--color-primary);
}

.datepicker-cell--selected[b-6u1gexzspf],
.datepicker-cell--selected:hover[b-6u1gexzspf] {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    box-shadow: none;
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.datepicker-footer[b-6u1gexzspf] {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.datepicker-action[b-6u1gexzspf] {
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .datepicker-action:hover[b-6u1gexzspf] {
        background: var(--color-surface-subtle);
    }
/* /Components/Shared/DuplicateRepairsModal.razor.rz.scp.css */
.duplicate-repairs-modal__lead[b-lh2p1nn38p] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.duplicate-repairs-modal__list[b-lh2p1nn38p] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: 300px;
    overflow-y: auto;
}

    .duplicate-repairs-modal__list[b-lh2p1nn38p]::-webkit-scrollbar {
        width: 6px;
    }

    .duplicate-repairs-modal__list[b-lh2p1nn38p]::-webkit-scrollbar-track {
        background-color: var(--scrollbar-track);
    }

    .duplicate-repairs-modal__list[b-lh2p1nn38p]::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: var(--radius-lg);
    }

        .duplicate-repairs-modal__list[b-lh2p1nn38p]::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }

.duplicate-repairs-modal__card[b-lh2p1nn38p] {
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background-color: var(--color-surface-raised);
}

.duplicate-repairs-modal__badges[b-lh2p1nn38p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.duplicate-repairs-modal__type-badge[b-lh2p1nn38p] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-subtle);
    color: var(--color-text-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

    .duplicate-repairs-modal__type-badge i[b-lh2p1nn38p] {
        font-size: var(--text-sm);
    }

/* RepairStatusBadge is a corner-positioned (absolute) badge in the repairs list; inside a card
   here it needs to sit inline next to the type badge, so neutralise its positioning. */
.duplicate-repairs-modal__status[b-lh2p1nn38p] {
    display: inline-flex;
}

    .duplicate-repairs-modal__status[b-lh2p1nn38p]  .repair-status-badge {
        position: static;
        top: auto;
        left: auto;
        gap: var(--space-2);
        border-radius: var(--radius-full);
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-4);
        text-transform: uppercase;
        font-weight: var(--font-semibold);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }

        .duplicate-repairs-modal__status[b-lh2p1nn38p]  .repair-status-badge i {
            font-size: var(--text-sm);
        }

.duplicate-repairs-modal__ref[b-lh2p1nn38p] {
    margin: 0 0 var(--space-2);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    color: var(--color-text-body);
}

.duplicate-repairs-modal__desc[b-lh2p1nn38p] {
    margin: 0;
    color: var(--color-text-body);
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
}

.duplicate-repairs-modal__date[b-lh2p1nn38p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2);
}

    .duplicate-repairs-modal__date i[b-lh2p1nn38p] {
        font-size: var(--text-base);
        flex-shrink: 0;
    }

.duplicate-repairs-modal__actions[b-lh2p1nn38p] {
    display: contents;
}

    .duplicate-repairs-modal__actions[b-lh2p1nn38p]  button.duplicate-repairs-modal__cancel-button {
        flex: 1;
    }
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-ywyj0e86ev] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state__icon[b-ywyj0e86ev] {
    font-size: 3rem;
    color: var(--color-text-disabled);
    line-height: 1;
}

.empty-state__title[b-ywyj0e86ev] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.empty-state__message[b-ywyj0e86ev] {
    margin: 0;
    max-width: 32rem;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.empty-state__action[b-ywyj0e86ev] {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}
/* /Components/Shared/EngineDataView.razor.rz.scp.css */
/* EngineDataView wrapper — the visual frame is intentionally minimal. The wrapper
   itself is a passthrough so the module's own outer container controls layout;
   the inner error and spinner states pick up consistent padding regardless of host. */

.engine-data-view[b-b6jbxxgtx0] {
    display: contents;
}

.engine-data-view__spinner[b-b6jbxxgtx0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
}

.engine-data-view[b-b6jbxxgtx0]  .engine-data-view__error {
    padding: var(--space-6) var(--space-4);
}
/* /Components/Shared/ImpersonationBanner.razor.rz.scp.css */
/* Warning banner shown when a staff user is viewing the portal as a resident.
   Intentionally uses a warning colour to make it impossible to mistake for a
   normal authenticated session. */
.impersonation-banner[b-5fsllrolvk] {
    position: sticky;
    top: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background: var(--color-info-surface);
    border: 1px solid var(--color-info-border);
    color: var(--color-info-text);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    z-index: var(--z-sticky);
}

.impersonation-banner__label[b-5fsllrolvk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
/* Inline ring spinner — used within content areas (not full-page).
   Speed (1.1 s) and colours match the SVG spinner used in the full-page loading card. */

@keyframes loading-spin-b-vxtbxgluyg {
    to { transform: rotate(360deg); }
}

.loading-indicator[b-vxtbxgluyg] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: loading-spin-b-vxtbxgluyg 1.1s linear infinite;
    flex-shrink: 0;
}

.loading-indicator--sm[b-vxtbxgluyg] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 1.5px;
}

@media (prefers-reduced-motion: reduce) {
    .loading-indicator[b-vxtbxgluyg] {
        animation: none;
        opacity: 0.6;
    }
}
/* /Components/Shared/Modal.razor.rz.scp.css */
dialog.portal-modal[b-djj6zecscm] {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 0;
    width: var(--modal-width);
    background: var(--color-surface-raised);
    color: var(--color-text-body);
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}

    dialog.portal-modal:not([open])[b-djj6zecscm] {
        opacity: 0;
        transform: scale(0.97) translateY(-6px);
    }

    dialog.portal-modal[b-djj6zecscm]::backdrop {
        background: var(--overlay-bg);
        opacity: 1;
        transition: opacity 0.2s ease, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
    }

    dialog.portal-modal:not([open])[b-djj6zecscm]::backdrop {
        opacity: 0;
    }

@starting-style {
    dialog.portal-modal[open][b-djj6zecscm] {
        opacity: 0;
        transform: scale(0.97) translateY(-6px);
    }

        dialog.portal-modal[open][b-djj6zecscm]::backdrop {
            opacity: 0;
        }
}

.portal-modal__content[b-djj6zecscm] {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
}

.portal-modal__header[b-djj6zecscm] {
    padding-right: var(--space-16);
}

.portal-modal__icon[b-djj6zecscm] {
    font-size: var(--text-4xl);
    color: var(--color-warning-border);
}

.portal-modal__title[b-djj6zecscm] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
}

.portal-modal__close[b-djj6zecscm] {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

    .portal-modal__close:hover[b-djj6zecscm] {
        background-color: var(--color-surface-overlay);
        color: var(--color-text-body);
    }

.portal-modal__body[b-djj6zecscm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.portal-modal__footer[b-djj6zecscm] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

/* ── Size variants ────────────────────────────────────────────────────────── */

dialog.portal-modal.portal-modal--lg[b-djj6zecscm] {
    width: min(680px, calc(100vw - 2rem));
}

@container page-content (max-width: 568px) {
    .portal-modal__footer[b-djj6zecscm] {
        flex-direction: column;
    }
}
/* /Components/Shared/Pagination.razor.rz.scp.css */
/* ── Pagination container ───────────────────────────────────────────────────── */

.pagination[b-30x77vwpqp] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-top: var(--space-4);
    flex-wrap: wrap;
}

/* ── Page buttons (numbers + prev/next) ─────────────────────────────────────── */

.pagination__btn[b-30x77vwpqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-2);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-body);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    line-height: 1;
    user-select: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.pagination__btn:hover:not(:disabled)[b-30x77vwpqp] {
    background-color: var(--color-surface-overlay);
    border-color: var(--color-primary);
}

/* ── Active state — current page ────────────────────────────────────────────── */

.pagination__btn--active[b-30x77vwpqp] {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
    cursor: default;
}

/* Don't show a hover effect on the active button */
.pagination__btn--active:hover[b-30x77vwpqp] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ── Disabled state — prev/next at boundaries ───────────────────────────────── */

.pagination__btn:disabled[b-30x77vwpqp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination__btn--active:disabled[b-30x77vwpqp] {
    opacity: 1;
}

/* ── Prev / Next nav buttons ────────────────────────────────────────────────── */

.pagination__btn--nav[b-30x77vwpqp] {
    gap: var(--space-1);
    padding: 0 var(--space-3);
    color: var(--color-text-body);
    font-size: var(--text-sm);
}

.pagination__btn--nav:hover:not(:disabled)[b-30x77vwpqp] {
    color: var(--color-text-body);
}

.pagination__btn--nav:active[b-30x77vwpqp] {
    color: color-mix(in srgb, var(--color-primary), black 15%);
    background-color: color-mix(in srgb, var(--color-primary), white 15%);
}

/* ── Ellipsis ───────────────────────────────────────────────────────────────── */

.pagination__ellipsis[b-30x77vwpqp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    user-select: none;
    pointer-events: none;
}
/* /Components/Shared/PortalButton.razor.rz.scp.css */
/* =============================================================================
   PortalButton — button utility classes
   =============================================================================
   Blazor scoped CSS — these selectors are automatically qualified with the
   component's scope attribute (b-xxxxxxxx) at build time, so they only apply
   to elements rendered by PortalButton.razor.

   Variant classes are applied via the _cssClass computed property in the
   component code-behind. Add new variants there too when adding them here.
   ============================================================================= */

.btn[b-woz0kd9ovc] {
    display: inline-flex;
    align-items: center;
    height: fit-content;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.btn--fullwidth[b-woz0kd9ovc] {
    width: 100%;
    justify-content: center;
}

.btn:disabled[b-woz0kd9ovc] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Variants ───────────────────────────────────────────────────────────────── */

.btn--primary[b-woz0kd9ovc] {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border: var(--border-thin) solid var(--color-primary);
}

    .btn--primary:hover:not(:disabled)[b-woz0kd9ovc] {
        background-color: color-mix(in srgb, var(--color-primary), black 15%);
        color: var(--color-text-on-primary);
        border-color: color-mix(in srgb, var(--color-primary), black 15%);
    }

.btn--secondary[b-woz0kd9ovc] {
    background-color: transparent;
    color: var(--color-text-body);
    border: var(--border-base) solid var(--color-primary);
}

    .btn--secondary:hover:not(:disabled)[b-woz0kd9ovc] {
        background-color: color-mix(in srgb, var(--color-primary), black 15%);
        color: var(--color-text-on-primary);
        border-color: color-mix(in srgb, var(--color-primary), black 15%);
    }

.btn--ghost[b-woz0kd9ovc] {
    background-color: transparent;
    color: var(--color-text-body);
    border: 1px solid transparent;
}

    .btn--ghost:hover:not(:disabled)[b-woz0kd9ovc] {
        background-color: var(--color-surface-raised);
        color: var(--color-text-body);
        border-color: var(--color-surface-raised);
    }

.btn--danger[b-woz0kd9ovc] {
    background-color: var(--color-error-surface);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

    .btn--danger:hover:not(:disabled)[b-woz0kd9ovc] {
        background-color: var(--color-error-text);
        color: var(--color-text-inverse);
    }

/* Solid white — for use on dark surfaces or brand-coloured/photographic
   backgrounds. Uses --color-white/--color-black rather than the surface/text
   tokens on purpose: those flip in dark mode, which would render this variant
   white-on-white. */
.btn--white[b-woz0kd9ovc] {
    background-color: var(--color-white);
    color: var(--color-black);
    border: var(--border-thin) solid var(--color-white);
}

    .btn--white:hover:not(:disabled)[b-woz0kd9ovc] {
        background-color: color-mix(in srgb, var(--color-primary), white 85%);
        color: var(--color-black);
        border-color: var(--color-primary);
    }

/* ── Sizes ──────────────────────────────────────────────────────────────────── */

.btn--sm[b-woz0kd9ovc] {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
}

.btn--lg[b-woz0kd9ovc] {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
}
/* /Components/Shared/RepairStatusBadge.razor.rz.scp.css */
.repair-status-badge[b-81oa5sdcrk] {
    position: absolute;
    top: -2px;
    left: -2px;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    padding: var(--space-4) var(--space-6);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    border-top-left-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
    white-space: nowrap;
    line-height: 1;
}

    .repair-status-badge i[b-81oa5sdcrk] {
        font-size: var(--text-lg);
        flex-shrink: 0;
    }

@container page-content (max-width: 768px) {
    .repair-status-badge[b-81oa5sdcrk] {
        right: -2px;
        width: unset;
        border-bottom-right-radius: unset;
        padding: var(--space-6);
    }
}

/* ── Active / in-flight ───────────────────────────────────────────────────── */
.repair-status-badge--raised[b-81oa5sdcrk],
.repair-status-badge--scheduled[b-81oa5sdcrk],
.repair-status-badge--in-progress[b-81oa5sdcrk] {
    background-color: var(--color-info-surface);
    color: var(--color-info-text);
}

/* ── Completed ────────────────────────────────────────────────────────────── */
.repair-status-badge--completed[b-81oa5sdcrk] {
    background-color: var(--color-success-surface);
    color: var(--color-success-text);
}

/* ── Cancelled ────────────────────────────────────────────────────────────── */
.repair-status-badge--cancelled[b-81oa5sdcrk] {
    background-color: var(--color-surface-overlay);
    color: var(--color-text-muted);
}

/* ── Unknown ──────────────────────────────────────────────────────────────── */
.repair-status-badge--unknown[b-81oa5sdcrk] {
    background-color: var(--color-surface-subtle);
    color: var(--color-text-muted);
}
/* /Components/Shared/RouteProgressBar.razor.rz.scp.css */
/* Indeterminate top-of-page progress strip. Sits above all other content
   (including modals and toasts) so it's never occluded during navigation. */

.route-progress[b-q1kazu0xil] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: transparent;
    z-index: var(--z-tooltip);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.route-progress--visible[b-q1kazu0xil] {
    opacity: 1;
}

.route-progress__bar[b-q1kazu0xil] {
    height: 100%;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-primary) 40%,
        var(--color-secondary) 60%,
        transparent 100%
    );
    animation: route-progress-slide-b-q1kazu0xil 1.1s ease-in-out infinite;
    will-change: transform;
}

@keyframes route-progress-slide-b-q1kazu0xil {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
    .route-progress__bar[b-q1kazu0xil] {
        animation: none;
        width: 100%;
        opacity: 0.6;
    }
}
/* /Components/Shared/Scheduling/AppointmentCalendar.razor.rz.scp.css */
/* ── Calendar container ─────────────────────────────────────────────────────── */

.calendar[b-a07e3ka3ki] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
}

/* ── Header (month + nav) ───────────────────────────────────────────────────── */

.calendar__header[b-a07e3ka3ki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.calendar__title[b-a07e3ka3ki] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.calendar__nav[b-a07e3ka3ki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-body);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.calendar__nav:hover:not(:disabled)[b-a07e3ka3ki] {
    background-color: var(--color-surface-overlay);
    border-color: var(--color-border);
}

.calendar__nav:disabled[b-a07e3ka3ki] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Weekday header ─────────────────────────────────────────────────────────── */

.calendar__weekdays[b-a07e3ka3ki] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
}

.calendar__weekday[b-a07e3ka3ki] {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding-bottom: var(--space-1);
}

/* ── Day grid ───────────────────────────────────────────────────────────────── */

.calendar__grid[b-a07e3ka3ki] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
}

.calendar__cell[b-a07e3ka3ki] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .calendar__cell--blank[b-a07e3ka3ki] {
        background: transparent;
        border-color: transparent;
        cursor: default;
        pointer-events: none;
    }
    /* Available — clickable, mildly highlighted */
    .calendar__cell--available[b-a07e3ka3ki] {
        background-color: var(--color-surface-raised);
        border-color: var(--color-border);
        cursor: pointer;
    }

        .calendar__cell--available:hover[b-a07e3ka3ki] {
            box-shadow: var(--shadow-md);
            border-color: var(--color-primary);
            transform: translateY(-2px);
            color: var(--color-text-body);
        }

    /* Today marker — subtle outline regardless of availability */
    .calendar__cell--today[b-a07e3ka3ki] {
        box-shadow: inset 0 0 0 1px var(--color-primary);
    }
    /* Selected — filled, takes priority over hover */
    .calendar__cell--selected[b-a07e3ka3ki],
    .calendar__cell--selected:hover[b-a07e3ka3ki] {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-text-on-primary);
    }
    /* Disabled / unavailable variants */
    .calendar__cell--disabled[b-a07e3ka3ki],
    .calendar__cell:disabled[b-a07e3ka3ki] {
        cursor: not-allowed;
        color: var(--color-text-muted);
        background-color: transparent;
        border-color: transparent;
    }

        .calendar__cell--disabled:hover[b-a07e3ka3ki] {
            background-color: transparent;
            border-color: transparent;
        }
    /* Bank holidays — small dotted underline so editors can tell them apart from
   plain "no slots" days. The state is still disabled. */
    .calendar__cell--bank-holiday .calendar__cell-day[b-a07e3ka3ki] {
        text-decoration: underline dotted;
        text-underline-offset: 3px;
    }

    .calendar__cell-day[b-a07e3ka3ki] {
        line-height: 1;
    }

    .calendar__cell-dot[b-a07e3ka3ki] {
        position: absolute;
        bottom: 6px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: var(--color-primary);
    }

    .calendar__cell--selected .calendar__cell-dot[b-a07e3ka3ki] {
        background-color: var(--color-text-on-primary);
    }
    /* ── Loading / error states ─────────────────────────────────────────────────── */

    .calendar__loading[b-a07e3ka3ki] {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        font-size: var(--text-sm);
        color: var(--color-text-muted);
    }

    .calendar__loading-spinner[b-a07e3ka3ki] {
        animation: calendar-spin-b-a07e3ka3ki 1s linear infinite;
    }

    @keyframes calendar-spin-b-a07e3ka3ki {
        to {
            transform: rotate(360deg);
        }
    }

    .calendar__error[b-a07e3ka3ki] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        padding: var(--space-4);
        background-color: var(--color-surface-overlay);
        border: 1px dashed var(--color-border);
        border-radius: var(--radius-md);
    }

        .calendar__error p[b-a07e3ka3ki] {
            margin: 0;
            color: var(--color-text-body);
            font-size: var(--text-sm);
        }

/* /Components/Shared/Scheduling/SchedulingPanel.razor.rz.scp.css */
.scheduling[b-ye44x8u8k5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
}

/* Right column: always rendered so the grid structure never changes.
   Slot picker and confirm bar live inside here — they can appear/disappear
   without affecting the calendar column or the overall grid height. */
.scheduling__right-col[b-ye44x8u8k5] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@container page-content (max-width: 700px) {
    .scheduling[b-ye44x8u8k5] {
        display: flex;
        flex-direction: column;
    }
}

/* ── Loading state (settings/bank holidays initial fetch) ───────────────────── */

.scheduling__loading[b-ye44x8u8k5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ── No-slots message (content-managed HTML) ────────────────────────────────── */

.scheduling__no-slots[b-ye44x8u8k5] {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-overlay);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-body);
}

.scheduling__no-slots p:last-child[b-ye44x8u8k5] { margin-bottom: 0; }

/* ── Confirm bar ────────────────────────────────────────────────────────────── */

.scheduling__confirm-bar[b-ye44x8u8k5] {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            var(--space-2);
    margin-top:     auto;   /* push to bottom of the right col when slot list is short */
}

.scheduling__confirm-summary[b-ye44x8u8k5] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    text-align: right;
}

.scheduling__confirm-summary-label[b-ye44x8u8k5] {
    color: var(--color-text-muted);
    font-weight: var(--font-medium);
}

.scheduling__confirm-summary-value[b-ye44x8u8k5] {
    font-weight: var(--font-semibold);
    font-variant-numeric: tabular-nums;
}

.scheduling__confirm-spinner[b-ye44x8u8k5] {
    animation: scheduling-spin-b-ye44x8u8k5 1s linear infinite;
}

@keyframes scheduling-spin-b-ye44x8u8k5 {
    to { transform: rotate(360deg); }
}

/* ── Success confirmation ───────────────────────────────────────────────────── */

.scheduling__confirmation[b-ye44x8u8k5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--color-success-surface);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-lg);
    color: var(--color-success-text);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

.scheduling__confirmation i[b-ye44x8u8k5] {
    font-size: var(--text-2xl);
}

.scheduling__confirmation p[b-ye44x8u8k5] { margin: 0; color: var(--color-text-body); }
/* /Components/Shared/Scheduling/TimeSlotPicker.razor.rz.scp.css */
/* ── Slot picker container ──────────────────────────────────────────────────── */

.slot-picker[b-9zgtu3btwy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.slot-picker__heading[b-9zgtu3btwy] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.slot-picker__empty[b-9zgtu3btwy] {
    margin: 0;
    padding: var(--space-3);
    background-color: var(--color-surface-overlay);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Slot list ──────────────────────────────────────────────────────────────── */

.slot-picker__list[b-9zgtu3btwy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── Individual slot ────────────────────────────────────────────────────────── */

.slot[b-9zgtu3btwy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-body);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-align: left;
    position: relative;
    cursor: pointer;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

    .slot:hover:not(:disabled)[b-9zgtu3btwy] {
        box-shadow: var(--shadow-md);
        border-color: var(--color-primary);
        transform: translateY(-2px);
        color: var(--color-text-body);
    }

.slot__time[b-9zgtu3btwy] {
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
    font-variant-numeric: tabular-nums;
}

.slot__name[b-9zgtu3btwy] {
    white-space: break-spaces;
    color: var(--color-text-muted);
    font-weight: var(--font-regular);
    font-size: var(--text-xs);
    line-height: var(--text-xl);
}

.slot__stars[b-9zgtu3btwy] {
    display: inline-flex;
    gap: 2px;
    color: var(--color-rating);
    font-size: var(--text-base);
    line-height: 1;
}

/* ── States ─────────────────────────────────────────────────────────────────── */
/* Compound .slot.slot--selected wins over .slot:hover:not(:disabled) on specificity
   so the selected style holds whether the cursor is on the slot or not. */
.slot.slot--selected[b-9zgtu3btwy],
.slot.slot--selected:hover[b-9zgtu3btwy] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

    .slot.slot--selected .slot__time[b-9zgtu3btwy],
    .slot.slot--selected .slot__name[b-9zgtu3btwy] {
        color: var(--color-text-on-primary);
    }

    .slot.slot--selected .slot__stars[b-9zgtu3btwy] {
        color: var(--color-text-on-primary);
    }

.slot__selected-check[b-9zgtu3btwy] {
    margin-left: auto;
    font-size: var(--text-lg);
    color: var(--color-text-on-primary);
}

.slot--unavailable[b-9zgtu3btwy],
.slot:disabled[b-9zgtu3btwy] {
    cursor: not-allowed;
    opacity: 0.5;
}

    .slot--unavailable:hover[b-9zgtu3btwy] {
        border-color: var(--color-border);
        background-color: var(--color-surface-raised);
    }
/* /Components/Shared/TelemetryErrorBoundary.razor.rz.scp.css */
.error-boundary[b-99499hl275] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
}

.error-boundary__card[b-99499hl275] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
    max-width: 480px;
    width: 100%;
    background-color: var(--color-error-surface);
    border: 1px solid var(--color-error-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    color: var(--color-error-text);
}

.error-boundary__message[b-99499hl275] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.error-boundary__correlation[b-99499hl275] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.error-boundary__correlation code[b-99499hl275] {
    padding: 0.05em 0.4em;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-body);
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
}
/* /Components/Shared/Toast.razor.rz.scp.css */
/* ── Toast notification region ──────────────────────────────────────────────── */

.toast-region[b-j91alnmvbc] {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none; /* let clicks pass through to the page */
    max-width: 380px;
    width: calc(100% - var(--space-10));
}

/* ── Individual toast ───────────────────────────────────────────────────────── */

.toast[b-j91alnmvbc] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    animation: toast-enter-b-j91alnmvbc var(--transition-base) ease both;
}

.toast--exit[b-j91alnmvbc] {
    animation: toast-exit-b-j91alnmvbc var(--transition-base) ease both;
}

/* Left accent border by variant */
.toast--success[b-j91alnmvbc] { border-left: 3px solid var(--color-success); }
.toast--warning[b-j91alnmvbc] { border-left: 3px solid var(--color-warning); }
.toast--error[b-j91alnmvbc]   { border-left: 3px solid var(--color-error);   }
.toast--info[b-j91alnmvbc]    { border-left: 3px solid var(--color-info);    }

/* ── Icon ───────────────────────────────────────────────────────────────────── */

.toast__icon[b-j91alnmvbc] {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.toast--success .toast__icon[b-j91alnmvbc] { color: var(--color-success-text); }
.toast--warning .toast__icon[b-j91alnmvbc] { color: var(--color-warning-text); }
.toast--error   .toast__icon[b-j91alnmvbc] { color: var(--color-error-text);   }
.toast--info    .toast__icon[b-j91alnmvbc] { color: var(--color-primary);      }

/* ── Body (message + optional reference) ────────────────────────────────────── */

.toast__body[b-j91alnmvbc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0; /* allow long messages to wrap rather than push siblings */
}

.toast__message[b-j91alnmvbc] {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    line-height: var(--leading-snug);
}

.toast__reference[b-j91alnmvbc] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}

.toast__reference code[b-j91alnmvbc] {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-body);
    background: none;
    padding: 0;
    font-size: inherit;
}

.toast__reference-copy[b-j91alnmvbc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-1);
    padding: 1px 6px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-body);
    cursor: pointer;
    font-size: inherit;
    line-height: 1.2;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

    .toast__reference-copy:hover[b-j91alnmvbc],
    .toast__reference-copy:focus-visible[b-j91alnmvbc] {
        background-color: var(--color-surface-overlay);
    }

    .toast__reference-copy i[b-j91alnmvbc] {
        font-size: 0.9em;
        opacity: 0.7;
    }

.toast__reference-copy--copied[b-j91alnmvbc] {
    color: var(--color-success-text, var(--color-text-body));
}

    .toast__reference-copy--copied i[b-j91alnmvbc] {
        opacity: 1;
    }

/* ── Inline action button ───────────────────────────────────────────────────── */

.toast__action[b-j91alnmvbc] {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-link);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

    .toast__action:hover[b-j91alnmvbc],
    .toast__action:focus-visible[b-j91alnmvbc] {
        background-color: var(--color-surface-overlay);
        color: var(--color-link-hover);
    }

/* ── Close button ───────────────────────────────────────────────────────────── */

.toast__close[b-j91alnmvbc] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    font-size: var(--text-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

    .toast__close:hover[b-j91alnmvbc] {
        background-color: var(--color-surface-overlay);
        color: var(--color-text-body);
    }

/* ── Animations ─────────────────────────────────────────────────────────────── */

@keyframes toast-enter-b-j91alnmvbc {
    from {
        opacity: 0;
        transform: translateX(calc(100% + var(--space-5)));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-exit-b-j91alnmvbc {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(calc(100% + var(--space-5)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-j91alnmvbc],
    .toast--exit[b-j91alnmvbc] {
        animation: none;
    }
}

/* ── Mobile — full width at small viewports ─────────────────────────────────── */

@media (max-width: 480px) {
    .toast-region[b-j91alnmvbc] {
        top: auto;
        bottom: var(--space-5);
        right: var(--space-4);
        left: var(--space-4);
        max-width: unset;
        width: auto;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ── Outer canvas ───────────────────────────────────────────────────────────── */

.app-layout[b-sywwtmyg2c] {
    display: flex;
    min-height: 100vh;
    padding: var(--space-5);
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.app-sidebar[b-sywwtmyg2c] {
    width: var(--sidebar-width);
    display: flex;
    position: sticky;
    top: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    flex-direction: column;
    background-color: var(--sidebar-bg);
    height: calc(100vh - (var(--space-5) * 2));
    z-index: var(--z-sticky);
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
}

/* ── Site logo ──────────────────────────────────────────────────────────────── */

.site-logo[b-sywwtmyg2c] {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-shrink: 0;
    padding-bottom: var(--space-4);
    height: var(--logo-height);
}

.site-logo__link[b-sywwtmyg2c] {
    display: flex;
}

.site-logo__img[b-sywwtmyg2c] {
    max-width: 160px;
    max-height: 56px;
    width: 100%;
    object-fit: contain;
}

.site-logo__text[b-sywwtmyg2c] {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-inverse);
    text-decoration: none;
    display: block;
}

/* ── Sidebar footer (sign out) ──────────────────────────────────────────────── */

.sidebar-footer[b-sywwtmyg2c] {
    padding-top: var(--space-4);
    flex-shrink: 0;
}

.btn-sign-out[b-sywwtmyg2c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-4);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

    .btn-sign-out:hover[b-sywwtmyg2c] {
        background-color: var(--color-secondary);
        color: var(--color-text-on-primary);
    }

/* ── Main content area ──────────────────────────────────────────────────────── */

.app-main[b-sywwtmyg2c] {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: calc(100vh - (var(--space-5) * 2));
    background-color: var(--color-surface-page);
    max-width: 100%;
}

/* ── Top bar (toolbox) ──────────────────────────────────────────────────────── */

.app-topbar[b-sywwtmyg2c] {
    z-index: var(--z-sticky);
    background-color: var(--color-surface-page);
    padding: 0 var(--space-8);
    max-width: var(--content-width);
    width: 100%;
}

.toolbox[b-sywwtmyg2c] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    height: var(--topbar-height);
}

.toolbox__tenancy[b-sywwtmyg2c] {
    text-align: right;
    font-size: var(--text-sm);
    color: var(--color-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notifications-btn[b-sywwtmyg2c] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.notifications-btn--alert[b-sywwtmyg2c] {
    position: relative;
    padding-right: var(--space-10);
}

.notifications-btn__badge[b-sywwtmyg2c] {
    position: absolute;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background-color: var(--color-badge);
    color: var(--color-white);
}

@keyframes badge-pop-b-sywwtmyg2c {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.4);
    }

    65% {
        transform: scale(0.88);
    }

    85% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.notifications-btn__badge--pop[b-sywwtmyg2c] {
    animation: badge-pop-b-sywwtmyg2c 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Page content wrapper ───────────────────────────────────────────────────── */
.page-content[b-sywwtmyg2c] {
    flex: 1;
    padding: var(--space-8);
    max-width: var(--content-width);
    width: 100%;
    outline: none;
}

.page-content__features[b-sywwtmyg2c] {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-raised);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.page-content__footer[b-sywwtmyg2c] {
    margin-top: var(--space-20);
    text-align: center;
}

.page-content__company-info[b-sywwtmyg2c] {
    font-size: var(--text-sm);
}

.page-content__powered-by[b-sywwtmyg2c] {
    font-size: var(--text-sm);
}

/* ── Mobile menu toggle (hidden on desktop) ─────────────────────────────────── */
.mobile-menu-btn[b-sywwtmyg2c] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-body);
    cursor: pointer;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ── Sidebar close button (mobile only) ────────────────────────────────────── */

.sidebar-close-btn[b-sywwtmyg2c] {
    display: none;
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    cursor: pointer;
    font-size: 1.1rem;
}

    .sidebar-close-btn:hover[b-sywwtmyg2c] {
        background-color: var(--sidebar-hover-bg);
    }

/* ── Topbar logo (mobile only — sidebar carries the logo on desktop) ─────────── */
.topbar-logo[b-sywwtmyg2c] {
    display: none;
    text-decoration: none;
}

.topbar-logo__img[b-sywwtmyg2c] {
    max-height: 32px;
    max-width: 120px;
    object-fit: contain;
}

.topbar-logo__text[b-sywwtmyg2c] {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-text-body);
}

/* ── Topbar tools wrapper (desktop only) ────────────────────────────────────── */
.topbar-tools[b-sywwtmyg2c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 12rem;
    justify-content: flex-end;
}

/* ── Sidebar footer actions (mobile only — profile / switch tenancy) ─────────── */
.sidebar-footer__actions[b-sywwtmyg2c] {
    display: none;
    flex-direction: column;
    padding-bottom: var(--space-2);
}

.sidebar-action-btn[b-sywwtmyg2c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background: none;
    color: var(--sidebar-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-align: left;
    justify-content: flex-start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

    .sidebar-action-btn:hover[b-sywwtmyg2c] {
        background-color: var(--sidebar-hover-bg);
    }

/* ── Sidebar overlay (mobile backdrop) ──────────────────────────────────────── */
.sidebar-overlay[b-sywwtmyg2c] {
    position: fixed;
    inset: 0;
    background-color: var(--overlay-bg);
    z-index: calc(var(--z-overlay) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.sidebar-overlay--visible[b-sywwtmyg2c] {
    opacity: 1;
    pointer-events: auto;
}

/* ── Mobile — sidebar collapses to off-canvas drawer ───────────────────────── */

@media (max-width: 1024px) {

    .app-layout[b-sywwtmyg2c] {
        padding-top: 0;
    }

    .app-sidebar[b-sywwtmyg2c] {
        position: fixed;
        transform: translateX(-120%);
        transition: transform var(--transition-base);
        z-index: var(--z-overlay);
    }

    .app-sidebar--open[b-sywwtmyg2c] {
        transform: translateX(0);
    }

    .app-main[b-sywwtmyg2c] {
        margin-left: 0;
    }

    .app-topbar[b-sywwtmyg2c] {
        position: sticky;
        top: var(--space-2);
        padding: 0 var(--space-4);
        margin-bottom: var(--space-2);
        background: var(--color-surface-raised);
        border-radius: var(--radius-xl);
        border: 1px solid var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .page-content[b-sywwtmyg2c] {
        padding: 0;
    }

    .toolbox__tenancy[b-sywwtmyg2c] {
        display: none;
    }

    .mobile-menu-btn[b-sywwtmyg2c] {
        display: flex;
    }

    .sidebar-close-btn[b-sywwtmyg2c] {
        display: flex;
    }

    .topbar-logo[b-sywwtmyg2c] {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
    }

    .topbar-tools[b-sywwtmyg2c] {
        display: none;
    }

    .sidebar-footer__actions[b-sywwtmyg2c] {
        display: flex;
    }
}

@media (max-width: 572px) {
    .app-sidebar[b-sywwtmyg2c] {
        right: var(--space-5);
        left: var(--space-5);
        width: unset;
    }
}

/* ── Print - Hide the mobile menu trigger when printing ───────────────────────── */
@media print {
    .mobile-menu-btn[b-sywwtmyg2c] {
        display: none;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ── Sidebar navigation ─────────────────────────────────────────────────────── */

.site-nav[b-gxc4ztz90p] {
    flex: 1;
    max-height: calc(100vh - (var(--logo-height) - var(--logout-btn-height)));
    overflow-y: auto;
}

    .site-nav[b-gxc4ztz90p]::-webkit-scrollbar {
        width: 6px;
    }

    .site-nav[b-gxc4ztz90p]::-webkit-scrollbar-track {
        background-color: var(--sidebar-scrollbar-track);
    }

    .site-nav[b-gxc4ztz90p]::-webkit-scrollbar-thumb {
        background: var(--sidebar-scrollbar-thumb);
        border-radius: var(--radius-lg);
    }

        .site-nav[b-gxc4ztz90p]::-webkit-scrollbar-thumb:hover {
            background: var(--sidebar-scrollbar-thumb-hover);
        }

.site-nav__list[b-gxc4ztz90p] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__item[b-gxc4ztz90p] {
    margin: 0 var(--space-1) var(--space-1) 0;
    border-radius: var(--radius-md);
    background-color: transparent;
    transition: background-color var(--transition-base);
}

.site-nav__item--open[b-gxc4ztz90p] {
    background-color: var(--sidebar-active-bg);
}

/* ── Item row ───────────────────────────────────────────────────────────────── */

.site-nav__item-row[b-gxc4ztz90p] {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* NavLink renders its own <a> element, so the Blazor scope attribute won't land
   on it. ::deep removes the scope requirement, anchoring the selector instead
   to the scoped .site-nav parent element. */

.site-nav[b-gxc4ztz90p]  .site-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    /* Right padding is widened on parent items so text never slides under the expand button.
       Applied selectively via .site-nav__item-row .site-nav__link below. */
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: var(--font-light);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

    .site-nav[b-gxc4ztz90p]  .site-nav__link:hover {
        background-color: var(--sidebar-hover-bg);
    }

.site-nav__item--open .site-nav[b-gxc4ztz90p]  .site-nav__link:hover {
    background-color: var(--sidebar-active-hover-bg);
}

.site-nav[b-gxc4ztz90p]  .site-nav__link.active,
.site-nav[b-gxc4ztz90p]  .site-nav__link[aria-current="page"] {
    background-color: var(--sidebar-active-bg);
    font-weight: var(--font-semibold);
}

.site-nav__item--open .site-nav[b-gxc4ztz90p]  .site-nav__link.active,
.site-nav__item--open .site-nav[b-gxc4ztz90p]  .site-nav__link[aria-current="page"] {
    background-color: transparent;
}

/* ── Nav icon ───────────────────────────────────────────────────────────────── */

.site-nav__icon[b-gxc4ztz90p] {
    font-size: 1.125rem;
    color: var(--color-primary);
    flex-shrink: 0;
    opacity: 0.9;
}

.site-nav[b-gxc4ztz90p]  .site-nav__link.active .site-nav__icon,
.site-nav[b-gxc4ztz90p]  .site-nav__link[aria-current="page"] .site-nav__icon {
    opacity: 1;
}

/* ── Expand button ──────────────────────────────────────────────────────────── */
/*
   The button is a child of the NavLink <a> element and is absolutely
   positioned at the trailing edge of the link. The link itself carries
   `position: relative` (set above) so this anchors correctly.
*/

.site-nav__expand-btn[b-gxc4ztz90p] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Generous touch target — minimum 44 × 44 px */
    min-width: 2.75rem;
    min-height: 2.75rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast);
    /* Prevent the button click propagating a "navigate" on the parent link */
    text-decoration: none;
}

/* Button is a sibling to the NavLink inside .site-nav__item-row,
       so hover is detected on the row rather than on the link itself. */
.site-nav__item-row:hover .site-nav__expand-btn[b-gxc4ztz90p] {
    color: var(--sidebar-text);
}

.site-nav__item--open .site-nav__expand-btn[b-gxc4ztz90p] {
    color: var(--sidebar-text);
}

/* Extra right padding on parent-item links so text never slides under the button */
.site-nav__item-row[b-gxc4ztz90p]  .site-nav__link {
    padding-right: calc(var(--space-4) + 2.75rem);
    flex: 1;
}

/* ── Chevron ────────────────────────────────────────────────────────────────── */

.site-nav__chevron[b-gxc4ztz90p] {
    font-size: var(--text-sm);
    transition: transform var(--transition-base);
    display: block;
}

.site-nav__item--open .site-nav__chevron[b-gxc4ztz90p] {
    transform: rotate(180deg);
}

/* ── Sub-navigation wrapper (CSS Grid expand/collapse trick) ────────────────── */
/*
   Animating from `grid-template-rows: 0fr` to `1fr` causes the row to grow
   to its true content height — no arbitrary cap, no JS measurement needed.
   The inner element must have `overflow: hidden` and `min-height: 0` so the
   grid can actually collapse it to zero.
*/

.site-nav__sub-wrapper[b-gxc4ztz90p] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
}

.site-nav__item--open .site-nav__sub-wrapper[b-gxc4ztz90p] {
    grid-template-rows: 1fr;
}

/* ── Sub-navigation list ────────────────────────────────────────────────────── */

.site-nav__sub[b-gxc4ztz90p] {
    /* Required for the 0fr grid trick — collapses the overflow content */
    overflow: hidden;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0 var(--space-2) 0 var(--space-2);
}

/* ── Sub-link items ─────────────────────────────────────────────────────────── */
.site-nav .site-nav__sub-item[b-gxc4ztz90p] {
    margin-bottom: var(--space-2);
}

.site-nav[b-gxc4ztz90p]  .site-nav__sub-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-4);
    color: var(--sidebar-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

    .site-nav[b-gxc4ztz90p]  .site-nav__sub-link:hover {
        color: var(--sidebar-text);
        background-color: var(--sidebar-active-hover-bg);
    }

    .site-nav[b-gxc4ztz90p]  .site-nav__sub-link.active,
    .site-nav[b-gxc4ztz90p]  .site-nav__sub-link[aria-current="page"] {
        color: var(--sidebar-text);
        font-weight: var(--font-semibold);
        background-color: var(--sidebar-active-hover-bg);
    }

.site-nav__sub .site-nav__icon[b-gxc4ztz90p] {
    font-size: var(--text-sm);
    opacity: 0.75;
}

.site-nav[b-gxc4ztz90p]  .site-nav__sub-link:hover .site-nav__icon,
.site-nav[b-gxc4ztz90p]  .site-nav__sub-link.active .site-nav__icon,
.site-nav[b-gxc4ztz90p]  .site-nav__sub-link[aria-current="page"] .site-nav__icon {
    opacity: 1;
}

/* ── Failure / empty fallback ───────────────────────────────────────────────── */
/*
   Rendered when the navigation fetch failed (transport error) or returned an
   empty page list (CMS misconfiguration). The single Dashboard link above this
   block keeps the user from being stranded; the EmptyState explains why and
   (on failure) offers a Retry button.
*/

.site-nav[b-gxc4ztz90p]  .site-nav__failure {
    padding: var(--space-4);
    text-align: center;
    color: var(--sidebar-text-muted);
}

.site-nav[b-gxc4ztz90p]  .site-nav__failure .empty-state__icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.site-nav[b-gxc4ztz90p]  .site-nav__failure .empty-state__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--sidebar-text);
    margin: 0 0 var(--space-1);
}

.site-nav[b-gxc4ztz90p]  .site-nav__failure .empty-state__message {
    font-size: var(--text-xs);
    line-height: 1.4;
    margin: 0 0 var(--space-3);
}

/* ── Nav skeleton loading ───────────────────────────────────────────────────── */

.site-nav__item--skeleton[b-gxc4ztz90p] {
    pointer-events: none;
}

.site-nav__skeleton-link[b-gxc4ztz90p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
}

.site-nav__skeleton-icon[b-gxc4ztz90p],
.site-nav__skeleton-text[b-gxc4ztz90p] {
    background: linear-gradient( 90deg, var(--sidebar-hover-bg) 25%, var(--skeleton-shimmer-peak) 50%, var(--sidebar-hover-bg) 75% );
    background-size: 200% 100%;
    animation: nav-skeleton-shimmer-b-gxc4ztz90p 1.6s ease-in-out infinite;
}

.site-nav__skeleton-icon[b-gxc4ztz90p] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-sm);
}

.site-nav__skeleton-text[b-gxc4ztz90p] {
    height: 0.75rem;
    border-radius: var(--radius-full);
}

/* Vary widths so placeholder rows look natural rather than identical */
.site-nav__item--skeleton:nth-child(1) .site-nav__skeleton-text[b-gxc4ztz90p] {
    width: 55%;
}

.site-nav__item--skeleton:nth-child(2) .site-nav__skeleton-text[b-gxc4ztz90p] {
    width: 70%;
}

.site-nav__item--skeleton:nth-child(3) .site-nav__skeleton-text[b-gxc4ztz90p] {
    width: 48%;
}

.site-nav__item--skeleton:nth-child(4) .site-nav__skeleton-text[b-gxc4ztz90p] {
    width: 63%;
}

.site-nav__item--skeleton:nth-child(5) .site-nav__skeleton-text[b-gxc4ztz90p] {
    width: 52%;
}

/* Stagger the shimmer phase so rows animate at different offsets */
.site-nav__item--skeleton:nth-child(2) .site-nav__skeleton-icon[b-gxc4ztz90p],
.site-nav__item--skeleton:nth-child(2) .site-nav__skeleton-text[b-gxc4ztz90p] {
    animation-delay: 120ms;
}

.site-nav__item--skeleton:nth-child(3) .site-nav__skeleton-icon[b-gxc4ztz90p],
.site-nav__item--skeleton:nth-child(3) .site-nav__skeleton-text[b-gxc4ztz90p] {
    animation-delay: 240ms;
}

.site-nav__item--skeleton:nth-child(4) .site-nav__skeleton-icon[b-gxc4ztz90p],
.site-nav__item--skeleton:nth-child(4) .site-nav__skeleton-text[b-gxc4ztz90p] {
    animation-delay: 360ms;
}

.site-nav__item--skeleton:nth-child(5) .site-nav__skeleton-icon[b-gxc4ztz90p],
.site-nav__item--skeleton:nth-child(5) .site-nav__skeleton-text[b-gxc4ztz90p] {
    animation-delay: 480ms;
}

@keyframes nav-skeleton-shimmer-b-gxc4ztz90p {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__skeleton-icon[b-gxc4ztz90p],
    .site-nav__skeleton-text[b-gxc4ztz90p] {
        animation: none;
        background: var(--sidebar-border);
    }
}
/* /Layout/PublicLayout.razor.rz.scp.css */
/* =============================================================================
   PUBLIC LAYOUT
   PublicLayout.razor.css
   =============================================================================
   Minimal branded shell for unauthenticated /public/** pages.
   No sidebar, no member context — just logo, login CTA, and page content.
   ============================================================================= */

.public-layout[b-ny5laa14os] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-page);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.public-header[b-ny5laa14os] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    height: 3.5rem;
    background-color: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.public-header__logo[b-ny5laa14os] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    flex-shrink: 0;
}

.public-header__logo-img[b-ny5laa14os] {
    max-height: 2rem;
    max-width: 140px;
    object-fit: contain;
}

/* Dark/light logo switching — portalBridge.js sets data-theme before first paint */
.public-header__logo-img--dark[b-ny5laa14os]  { display: none; }

[data-theme="dark"] .public-header__logo-img--light[b-ny5laa14os] { display: none; }
[data-theme="dark"] .public-header__logo-img--dark[b-ny5laa14os]  { display: block; }

.public-header__logo-text[b-ny5laa14os] {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
}

.public-header__actions[b-ny5laa14os] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ── Main content ───────────────────────────────────────────────────────────── */

.public-main[b-ny5laa14os] {
    flex: 1;
    padding: var(--space-8) var(--space-6);
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.public-footer[b-ny5laa14os] {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background-color: var(--color-surface-raised);
}

    .public-footer a[b-ny5laa14os] {
        color: var(--color-primary);
    }
/* /Pages/Cms/CmsPageRenderer.razor.rz.scp.css */
.cms-page-loading[b-1z864iypx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    margin: var(--space-8) 0;
}
/* /Pages/Cms/GenericCmsPage.razor.rz.scp.css */
.cms-page__content[b-k7fu31bef0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) 0;
}

.cms-page__title[b-k7fu31bef0] {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    color: var(--color-text-body);
    margin-bottom: 0;
}

    .cms-page__title + .cms-page__intro[b-k7fu31bef0] {
        margin-top: var(--space-4);
    }

.cms-page__intro[b-k7fu31bef0]  p:last-child {
    margin-bottom: 0;
}

@container page-content (max-width: 768px) {
    .cms-page__content[b-k7fu31bef0] {
        padding: var(--space-2) 0;
        gap: var(--space-2);
    }

    .cms-page__title[b-k7fu31bef0] {
        font-size: var(--text-3xl);
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* =============================================================================
   9. HOME PAGE (UNAUTHENTICATED)
   ============================================================================= */

.home-page[b-ha7c5fhv0i] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-page__body[b-ha7c5fhv0i] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    width: 100%;
    max-width: 480px;
    text-align: center;
    gap: var(--space-10);
}

.home-logo[b-ha7c5fhv0i] {
    /* Reserve the full 180×80 box up-front so the SSR shell → Blazor hand-over
       (and the image's own decode) cannot trigger CLS. Tenant logos with
       different aspect ratios are letterboxed inside the box via object-fit. */
    width: 180px;
    height: 80px;
    max-width: 180px;
    max-height: 80px;
    object-fit: contain;
}

/* Dark/light logo switching — matches AuthStatusScreen pattern.
   portalBridge.js sets data-theme before first paint, so no flash. */
.home-logo--dark[b-ha7c5fhv0i] { display: none; }

[data-theme="dark"] .home-logo--light[b-ha7c5fhv0i] { display: none; }
[data-theme="dark"] .home-logo--dark[b-ha7c5fhv0i]  { display: block; }

.home-logo-text[b-ha7c5fhv0i] {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
}

.home-page__heading[b-ha7c5fhv0i] {
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    margin: 0;
    outline: none;
}

.home-page__lead[b-ha7c5fhv0i] {
    line-height: var(--leading-relaxed);
    margin: 0;
}

.home-page__actions[b-ha7c5fhv0i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: fit-content;
}

.home-page__footer[b-ha7c5fhv0i] {
    width: 100%;
    padding: var(--space-6) var(--space-6);
    text-align: center;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
}
/* /Pages/Repairs/ReschedulePage.razor.rz.scp.css */
.reschedule-page[b-wjumt29peg] {
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.reschedule-page__confirmed[b-wjumt29peg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.reschedule-page__heading[b-wjumt29peg] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--color-text-body);
}

.reschedule-page__lead[b-wjumt29peg] {
    margin: 0;
    color: var(--color-text-body);
}

.reschedule-page__repair-summary[b-wjumt29peg] {
    color: var(--color-text-muted);
}

.reschedule-page__rescheduled-summary[b-wjumt29peg]{
    margin-bottom: 0;
}

.reschedule-page__loading[b-wjumt29peg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.reschedule-page__not-found[b-wjumt29peg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

    .reschedule-page__not-found p[b-wjumt29peg] {
        margin: 0;
        color: var(--color-text-body);
    }
/* /Staff/Layout/StaffLayout.razor.rz.scp.css */
.staff-layout[b-b39x5pgm10] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-surface-page);
    color: var(--color-text-body);
}

.staff-layout__topbar[b-b39x5pgm10] {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-8);
    background: var(--color-surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.staff-layout__brand[b-b39x5pgm10] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    color: var(--color-text-body);
}

.staff-layout__nav[b-b39x5pgm10] {
    display: flex;
    gap: var(--space-2);
    flex: 1;
}

.staff-layout__nav-link[b-b39x5pgm10] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-text-body);
    text-decoration: none;
    font-weight: var(--font-medium);
}

    .staff-layout__nav-link:hover[b-b39x5pgm10] {
        background: var(--color-surface-overlay);
    }

.staff-layout__actions[b-b39x5pgm10] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.staff-layout__content[b-b39x5pgm10] {
    flex: 1;
    padding: var(--space-8);
    max-width: var(--content-width);
    width: 100%;
    margin: 0 auto;
}
/* /Staff/Pages/MemberSearchPage.razor.rz.scp.css */
.ms-wrap[b-w010f77zmn] {
    padding: 2rem 0;
    font-family: var(--font-sans);
    color: var(--color-text-body);
}

.ms-page-header[b-w010f77zmn] {
    margin-bottom: 1.5rem;
}

    .ms-page-header h1[b-w010f77zmn] {
        font-size: var(--text-2xl);
        font-weight: var(--font-semibold);
        color: var(--color-text-body);
        margin: 0 0 0.375rem;
        font-family: var(--font-display);
    }

    .ms-page-header p[b-w010f77zmn] {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        margin: 0;
    }

.ms-layout[b-w010f77zmn] {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-5);
    align-items: start;
    min-width: 0;
}

.ms-sidebar[b-w010f77zmn] {
    position: sticky;
    top: 1rem;
    background: var(--color-surface-raised);
    border-radius: var(--radius-lg);
    border: var(--border-thin) solid var(--color-border);
    padding: var(--space-5);
}

    .ms-sidebar[b-w010f77zmn]  button + button{
        margin-top: var(--space-2);
    }

.ms-sidebar-title[b-w010f77zmn] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 var(--space-4);
}

.ms-field[b-w010f77zmn] {
    margin-bottom: var(--space-3);
}

    .ms-field:last-of-type[b-w010f77zmn] {
        margin-bottom: var(--space-4);
    }

    .ms-field label[b-w010f77zmn] {
        display: block;
        font-size: var(--text-xs);
        font-weight: var(--font-medium);
        color: var(--color-text-muted);
        margin-bottom: var(--space-1);
    }

    .ms-field input[b-w010f77zmn] {
        width: 100%;
        box-sizing: border-box;
        height: 36px;
        padding: 0 var(--space-3);
        border: var(--border-thin) solid var(--color-border);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-family: var(--font-sans);
        color: var(--color-text-body);
        background: var(--color-surface-inset);
        outline: none;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

        .ms-field input:focus[b-w010f77zmn] {
            border-color: var(--color-border-focus);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
            background: var(--color-surface-raised);
        }

        .ms-field input[b-w010f77zmn]::placeholder {
            color: var(--color-text-disabled);
        }

.ms-btn-primary[b-w010f77zmn] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 38px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--transition-fast);
    margin-bottom: var(--space-2);
}

    .ms-btn-primary:hover[b-w010f77zmn] {
        background: var(--color-secondary);
    }

.ms-btn-ghost[b-w010f77zmn] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    background: transparent;
    color: var(--color-text-muted);
    border: var(--border-thin) solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

    .ms-btn-ghost:hover[b-w010f77zmn] {
        background: var(--color-surface-overlay);
        color: var(--color-text-body);
    }

.ms-sidebar-divider[b-w010f77zmn] {
    border: none;
    border-top: var(--border-thin) solid var(--color-border);
    margin: var(--space-4) 0;
}

.ms-tip[b-w010f77zmn] {
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.ms-results-header[b-w010f77zmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.ms-results-label[b-w010f77zmn] {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ms-count-badge[b-w010f77zmn] {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-2);
    background: var(--color-surface-overlay);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.ms-main[b-w010f77zmn] {
    min-width: 0;
}

.ms-table-wrap[b-w010f77zmn] {
    background: var(--color-surface-raised);
    border-radius: var(--radius-lg);
    border: var(--border-thin) solid var(--color-border);
    overflow: hidden;
}

.ms-table[b-w010f77zmn] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .ms-table th[b-w010f77zmn] {
        padding: var(--space-3) var(--space-6);
        text-align: left;
        font-size: var(--text-xs);
        font-weight: var(--font-semibold);
        color: var(--color-text-muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border-bottom: var(--border-thin) solid var(--color-border);
        background: var(--color-surface-inset);
    }

        .ms-table th:nth-child(1)[b-w010f77zmn] {
            width: 30%;
        }

        .ms-table th:nth-child(2)[b-w010f77zmn] {
            width: 40%;
        }

        .ms-table th:nth-child(3)[b-w010f77zmn] {
            width: 30%;
        }

.ms-row-main td[b-w010f77zmn] {
    padding: var(--space-4) var(--space-6) 0 var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-text-body);
    vertical-align: middle;
}

.ms-row-sub td[b-w010f77zmn] {
    padding: var(--space-2) var(--space-6) var(--space-4) var(--space-6);
    border-bottom: var(--border-thin) solid var(--color-surface-overlay);
}

.ms-avatar[b-w010f77zmn] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-info-surface);
    color: var(--color-info-text);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ms-name-cell[b-w010f77zmn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
}

    .ms-name-cell span[b-w010f77zmn] {
        font-weight: var(--font-medium);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ms-email[b-w010f77zmn] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-ref[b-w010f77zmn] {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.ms-ref-purple[b-w010f77zmn] {
    background: #ede9fe;
    color: #4c1d95;
    border: var(--border-thin) solid #c4b5fd;
}

.ms-ref-blue[b-w010f77zmn] {
    background: var(--color-info-surface);
    color: var(--color-info-text);
    border: var(--border-thin) solid var(--color-info-border);
}

.ms-sub-row-inner[b-w010f77zmn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-left: var(--space-10);
}

.ms-address[b-w010f77zmn] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    overflow: hidden;
}

.ms-address-muted[b-w010f77zmn] {
    color: var(--color-text-disabled);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ms-view-btn[b-w010f77zmn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 30px;
    padding: 0 var(--space-3);
    background: transparent;
    color: var(--color-link);
    border: var(--border-thin) solid var(--color-info-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

    .ms-view-btn:hover[b-w010f77zmn] {
        background: var(--color-info-surface);
        border-color: var(--color-info);
        color: var(--color-link-hover);
    }

.staff-search__empty[b-w010f77zmn],
.staff-search__truncated[b-w010f77zmn] {
    background: var(--color-surface-raised);
    border-radius: var(--radius-lg);
    border: var(--border-thin) solid var(--color-border);
    padding: var(--space-5);
}

.text-error[b-w010f77zmn] {
    background-color: var(--color-danger-surface);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}