h1:focus {
    outline: none;
}

/* Design tokens, wired once. The neutral/accent/status values live in the MudBlazor palette
   (AppTheme.cs) and flip automatically in dark mode; these custom properties derive the few
   extras the scoped dashboard styles need (soft fills, the bar track, the gradient end) from
   that single source so light and dark stay in lock-step. */
:root {
    --bt-accent: var(--mud-palette-primary);
    --bt-accent-2: #16A89F;
    --bt-surface: var(--mud-palette-surface);
    --bt-bg: var(--mud-palette-background);
    --bt-text: var(--mud-palette-text-primary);
    --bt-text-2: var(--mud-palette-text-secondary);
    --bt-text-3: var(--mud-palette-tertiary);
    --bt-line: var(--mud-palette-lines-default);
    /* A touch stronger than the hairline for control borders — mixed toward the primary text so it
       deepens in light mode and lightens in dark mode, staying in lock-step with the palette. */
    --bt-line-strong: color-mix(in srgb, var(--mud-palette-lines-default) 80%, var(--mud-palette-text-primary) 20%);
    --bt-success: var(--mud-palette-success);
    --bt-warning: var(--mud-palette-warning);
    --bt-error: var(--mud-palette-error);
    --bt-accent-soft: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --bt-success-soft: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    --bt-warning-soft: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    --bt-error-soft: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    --bt-track: rgba(121, 129, 140, 0.16);
    --row-hover: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    --bt-ring-focus: color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
}

/* Money and data read as quiet, evenly-spaced figures — tabular numerals app-wide so
   every column aligns (matches the design tokens' global "tnum" rule). */
body {
    font-feature-settings: "tnum" 1;
}

.mud-table-cell {
    font-variant-numeric: tabular-nums;
}

/* Lists read like UniFi's: quiet column labels, tight even rows, small calm type.
   Headers are sentence-case, medium-weight and secondary-coloured — present but never
   shouting. */
.mud-table-root .mud-table-head th.mud-table-cell {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
    padding-top: 10px;
    padding-bottom: 10px;
}

.mud-table-root tbody td.mud-table-cell {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 0.8125rem;
}

/* Status and tags read as quiet coloured text, not filled chips — colour signals
   meaning without painting blocks into every row. */
.bt-status,
.bt-tag {
    font-size: 0.8125rem;
    font-weight: 500;
}

/* Cost-type tag: Rechargeable reads in the accent, Internal / whole-category is muted. */
.bt-tag {
    color: var(--mud-palette-primary);
}

.bt-tag--muted,
.bt-status--draft {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.bt-status--paid {
    color: var(--mud-palette-success);
}

.bt-status--received,
.bt-status--issued {
    color: var(--mud-palette-info);
}

/* ---- UniFi-calm shell ---------------------------------------------------- */

/* Cards: flat with a single hairline, the way UniFi surfaces sit — calm, not raised. */
.mud-paper-outlined {
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none;
}

/* Calmer type scale — headings are present, not shouting. UniFi runs small and tight. */
.mud-typography-h5 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mud-typography-h6 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Top bar: a clean surface with a single hairline under it. */
.bt-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Brand lockup — logo + wordmark as one tight unit, set apart from the site filter. Also the
   link home, so reset the anchor's colour and underline. */
.bt-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    color: inherit;
    text-decoration: none;
}

/* The brand mark — rounded teal tile with two budget tracks + the pace marker. */
.bt-brand__mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: block;
    flex: none;
}

.bt-brand__name {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

/* The tenant filter reads as UniFi's "site selector": its own pill, given room. */
.bt-appbar__site {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

/* Global view filter: the tenant and category selectors sit together as one quiet group. */
.bt-globalfilter {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sidebar: a flat list of items under small uppercase section labels (design-system nav). */
.bt-sidebar .mud-drawer-content {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.bt-navgroup {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 14px 19px 6px;
}

.mud-navmenu .mud-nav-link {
    border-radius: 6px;
    margin: 2px 8px;
    min-height: 38px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.mud-navmenu .mud-nav-link:hover {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}

.mud-navmenu .mud-nav-link.active {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.mud-navmenu .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Inputs & selects: render MudBlazor's text-variant fields as the design system's quiet
   outlined box — 1px border, 8px radius, soft accent focus ring — instead of the Material
   underline. */
.mud-input.mud-input-text.mud-input-underline::before,
.mud-input.mud-input-text.mud-input-underline::after {
    content: none !important;
}

.mud-input.mud-input-text {
    border: 1px solid #D4D8DE;
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    padding-left: 10px;
    padding-right: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mud-input.mud-input-text:hover:not(.mud-focused) {
    border-color: #B0B7C3;
}

.mud-input.mud-input-text.mud-focused {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px var(--bt-ring-focus);
}

/* The floating label sits on the box edge with a small white backing, like an outlined notch. */
.mud-input-control .mud-input-label.mud-input-label-inputcontrol {
    margin-left: 4px;
}

/* Two-field drawer rows — amount+currency, period from/to, year+period. MudStack lays these out as
   flex; its children default to min-width:auto, so a short field (the numeric stepper) collapses to
   its content while a long one refuses to shrink and overflows the panel. Let the fields share the
   row evenly and shrink within it. */
.bt-field-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* In-row currency picker: pin its column to a compact fixed width so the amount (or the "To" field)
   takes the rest. The flex child of the row is MudBlazor's outer .mud-select element — the forwarded
   .bt-currency class lands on an inner element, so it can't drive the column width; the column has to
   be set on .mud-select. Scoped to money/rate rows so other selects that can share a .bt-field-row
   (e.g. the budget period granularity) keep their natural width. */
.bt-field-row--money > .mud-select,
.bt-field-row--rate > .mud-select {
    flex: 0 0 132px;
}

/* The exchange-rate row reads "From currency → To (base)": keep the arrow at its natural size so the
   To field, not the icon, absorbs the row's width. */
.bt-field-row--rate > .mud-icon-root {
    flex: 0 0 auto;
}

/* Standalone currency (the tenant base-currency field, which isn't in a row): cap the control via the
   app-owned class CurrencySelect forwards onto the box. Doubled to outrank MudBlazor's max-width:100%
   on the same element (equal base specificity, but it loads after app.css). */
.bt-currency.bt-currency {
    max-width: 132px;
}

/* Segmented controls (period + trend toggles) — quiet design-system style: a soft grey
   container, secondary text, and a soft-accent selected segment (not a solid blue fill). */
.mud-toggle-group {
    border: 1px solid #D4D8DE !important;
    border-radius: 6px !important;
    background: var(--mud-palette-surface) !important;
}

.mud-toggle-group .mud-toggle-item {
    background-color: transparent !important;
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500;
    font-size: 0.8125rem;
}

.mud-toggle-group .mud-toggle-item-delimiter {
    border-color: #D4D8DE !important;
}

.mud-toggle-group .mud-toggle-item:hover[aria-checked="false"] {
    color: var(--mud-palette-text-primary) !important;
}

.mud-toggle-group .mud-toggle-item[aria-checked="true"] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

/* Centered shell for the sign-in page (uses the empty layout). */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--mud-palette-background-gray);
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.35rem;
}

.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.auth-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
}

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

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

.validation-message {
    color: #e50000;
}

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

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

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

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

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

/* ======================================================================== */
/* Overview dashboard — the exceptions-first verdict, KPI strip, portfolio   */
/* roll-up, attention feed, service budgets and cumulative pace trend. A     */
/* moderately bolder evolution of the UniFi-calm system: same surfaces and   */
/* hairlines, stronger hierarchy, a few hero numbers.                        */
/* ======================================================================== */

.ov-page {
    --ov-card-pad: 18px;
    --ov-row-pad-y: 12px;
    --ov-tenant-pad: 16px;
}

/* Compact density tightens the breathing room without changing the layout. */
.ov-page[data-density="compact"] {
    --ov-card-pad: 13px;
    --ov-row-pad-y: 8px;
    --ov-tenant-pad: 13px;
}

.ov-num {
    font-variant-numeric: tabular-nums;
}

/* The page header: title + subtitle on the left, year/period controls on the right. */
.ov-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.ov-header__title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ov-header__sub {
    font-size: 13.5px;
    color: var(--bt-text-3);
    margin-top: 3px;
}

.ov-header__controls {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* The shared flat card — single hairline, soft radius, the calmest possible raise. */
.ov-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-line);
    border-radius: 12px;
    padding: var(--ov-card-pad);
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.03);
}

.ov-section-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.ov-section-title__text {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bt-text);
    letter-spacing: -0.005em;
}

.ov-section-title__sub {
    font-size: 12px;
    color: var(--bt-text-3);
}

.ov-section-title__right {
    margin-left: auto;
}

/* Quiet pill badges: coloured text on a soft tonal fill, no hard chip border. */
.ov-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}

.ov-badge--soft {
    padding: 3px 9px;
}

.ov-badge .mud-icon-root {
    font-size: 14px;
}

.ov-tone-accent { color: var(--bt-accent); }
.ov-tone-success { color: var(--bt-success); }
.ov-tone-warning { color: var(--bt-warning); }
.ov-tone-error { color: var(--bt-error); }

.ov-badge--soft.ov-tone-accent { background: var(--bt-accent-soft); }
.ov-badge--soft.ov-tone-success { background: var(--bt-success-soft); }
.ov-badge--soft.ov-tone-warning { background: var(--bt-warning-soft); }
.ov-badge--soft.ov-tone-error { background: var(--bt-error-soft); }

/* ---- 1. Hero verdict band ---------------------------------------------- */
.ov-hero {
    display: flex;
    gap: 28px;
    background: var(--bt-surface);
    border: 1px solid var(--bt-line);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(20, 30, 50, 0.04);
}

.ov-hero__main {
    flex: 1;
    min-width: 0;
}

.ov-hero__aside {
    flex: none;
    width: 184px;
    border-left: 1px solid var(--bt-line);
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ov-verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.ov-verdict__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: none;
    display: grid;
    place-items: center;
}

.ov-verdict__icon--error { background: var(--bt-error-soft); color: var(--bt-error); }
.ov-verdict__icon--success { background: var(--bt-success-soft); color: var(--bt-success); }

.ov-verdict__icon .mud-icon-root { font-size: 22px; }
.ov-attn__icon .mud-icon-root { font-size: 17px; }
.ov-trend__value .mud-icon-root { font-size: 19px; }

.ov-verdict__head {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.ov-verdict__explain {
    font-size: 13px;
    color: var(--bt-text-2);
    margin-top: 2px;
}

/* Budget-consumed meter — a thick track, a gradient fill, a "where you should be" marker. */
.ov-meter__line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
    gap: 10px;
}

.ov-meter__label {
    font-size: 12.5px;
    color: var(--bt-text-2);
    font-weight: 600;
}

.ov-meter__figure {
    font-size: 12.5px;
    color: var(--bt-text-2);
    font-variant-numeric: tabular-nums;
}

.ov-meter__track {
    position: relative;
    height: 14px;
    border-radius: 8px;
    background: var(--bt-track);
    overflow: visible;
    margin-bottom: 6px;
}

.ov-meter__fill {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--bt-accent), var(--bt-accent-2));
    transition: width .4s ease;
}

.ov-meter__marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: var(--bt-text);
    opacity: .5;
    border-radius: 2px;
}

.ov-meter__pace {
    position: absolute;
    top: -19px;
    transform: translateX(-50%);
    font-size: 10.5px;
    color: var(--bt-text-3);
    white-space: nowrap;
}

.ov-meter__captions {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--bt-text-3);
    margin-bottom: 16px;
    gap: 10px;
}

/* Category health chips — a dot, a name, the used %. */
.ov-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ov-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 8px;
    border-radius: 8px;
    background: var(--bt-bg);
    border: 1px solid var(--bt-line);
}

.ov-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex: none;
}

.ov-chip__name {
    font-size: 12px;
    font-weight: 600;
}

.ov-chip__pct {
    font-size: 11.5px;
    color: var(--bt-text-3);
    font-variant-numeric: tabular-nums;
}

.ov-ring__caption {
    font-size: 12.5px;
    color: var(--bt-text-2);
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
}

.ov-ring__recover {
    font-size: 12px;
    color: var(--bt-warning);
    font-weight: 600;
    margin-top: 2px;
}

/* ---- 2. KPI strip ------------------------------------------------------- */
.ov-kpis {
    display: flex;
    background: var(--bt-surface);
    border: 1px solid var(--bt-line);
    border-radius: 12px;
    padding: 16px 8px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.03);
}

.ov-kpi {
    flex: 1 1 0;
    padding: 0 18px;
    min-width: 0;
}

.ov-kpi + .ov-kpi {
    border-left: 1px solid var(--bt-line);
}

.ov-kpi__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bt-text-3);
}

.ov-kpi__value {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.ov-kpi__currency {
    font-size: 11.5px;
    color: var(--bt-text-3);
    font-weight: 600;
}

.ov-kpi__sub {
    font-size: 11.5px;
    color: var(--bt-text-3);
    margin-top: 2px;
}

/* ---- 3. Portfolio roll-up ---------------------------------------------- */
.ov-tenants {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.ov-tenant {
    border: 1px solid var(--bt-line);
    border-radius: 12px;
    padding: var(--ov-tenant-pad);
    background: var(--bt-surface);
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.03);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font: inherit;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.ov-tenant:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(20, 30, 50, 0.08);
}

.ov-tenant--active {
    border: 1.5px solid var(--bt-accent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.ov-tenant__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ov-tenant__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: none;
}

.ov-tenant__name {
    font-size: 13.5px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ov-tenant__currency {
    font-size: 11px;
    color: var(--bt-text-3);
    font-weight: 600;
}

.ov-tenant__figures {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 7px;
    gap: 8px;
}

.ov-tenant__figures > div:first-child {
    white-space: nowrap;
}

.ov-tenant__spend {
    font-size: 19px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ov-tenant__budget {
    font-size: 12px;
    color: var(--bt-text-3);
}

.ov-tenant__bar {
    height: 6px;
    border-radius: 4px;
    background: var(--bt-track);
    overflow: hidden;
    margin-bottom: 11px;
}

.ov-tenant__bar-fill {
    height: 100%;
    border-radius: 4px;
}

.ov-tenant__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.ov-tenant__recovery {
    margin-left: auto;
    color: var(--bt-text-3);
}

.ov-tenant__recovery b {
    color: var(--bt-text);
    font-weight: 700;
}

/* ---- 4. Detail row: needs attention + service budgets ------------------ */
.ov-detail {
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
    align-items: start;
}

.ov-detail--two {
    grid-template-columns: 1.15fr 1fr;
}

.ov-detail--one {
    grid-template-columns: 1fr;
}

/* Needs-attention headline: the recoverable-money spine the panel drives toward zero. */
.ov-attn__headline {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin: -2px 0 12px;
}

.ov-attn__headline-figure {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bt-accent);
    font-variant-numeric: tabular-nums;
}

.ov-attn__headline-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bt-text-2);
}

.ov-attn__headline-sub {
    font-size: 12.5px;
    color: var(--bt-text-3);
}

/* Attention rows — a tonal icon, the action, its variance, and a deep-link button. */
.ov-attn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--ov-row-pad-y) 10px;
    margin: 0 -10px;
    border-radius: 9px;
    border-bottom: 1px solid var(--bt-line);
    transition: background-color .14s ease;
}

.ov-attn-row:last-child {
    border-bottom: none;
}

.ov-attn-row:hover {
    background: var(--row-hover);
}

.ov-attn__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
    display: grid;
    place-items: center;
}

.ov-attn__icon--error { background: var(--bt-error-soft); color: var(--bt-error); }
.ov-attn__icon--warning { background: var(--bt-warning-soft); color: var(--bt-warning); }
.ov-attn__icon--success { background: var(--bt-success-soft); color: var(--bt-success); }

.ov-attn__body {
    min-width: 0;
    flex: 1;
}

.ov-attn__title {
    font-size: 13px;
    font-weight: 600;
}

.ov-attn__meta {
    font-size: 11.5px;
    color: var(--bt-text-3);
    margin-top: 2px;
}

.ov-attn__value {
    font-size: 14px;
    font-weight: 700;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.ov-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    cursor: pointer;
    border: 1px solid var(--bt-line-strong);
    background: var(--bt-surface);
    color: var(--bt-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 9px 6px 11px;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .14s ease, border-color .14s ease;
}

.ov-action:hover {
    background: var(--bt-accent-soft);
    border-color: var(--bt-accent);
}

.ov-action .mud-icon-root {
    font-size: 14px;
}

/* The minor-deviations summary, expanded: its folded rows, indented under the summary with a
   quiet rule so they read as belonging to it. */
.ov-attn-children {
    margin-left: 22px;
    padding-left: 10px;
    border-left: 2px solid var(--bt-line);
}

/* Service budget rows — name, figures, a pace bar, a state line. */
.ov-svc-row {
    display: block;
    padding: var(--ov-row-pad-y) 10px;
    margin: 0 -10px;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    transition: background-color .14s ease;
}

.ov-svc-row:not(.ov-svc-row--static):hover {
    background: var(--row-hover);
}

.ov-svc-row__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 10px;
}

.ov-svc-row__name {
    font-size: 13px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ov-svc-row__cat {
    color: var(--bt-text-3);
    font-weight: 400;
}

.ov-svc-row__figures {
    font-size: 12.5px;
    color: var(--bt-text-2);
    flex: none;
    font-variant-numeric: tabular-nums;
}

.ov-svc-row__figures b {
    color: var(--bt-text);
}

.ov-svc-row__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    gap: 10px;
}

.ov-svc-row__state {
    font-size: 11.5px;
    font-weight: 600;
}

.ov-svc-row__last {
    font-size: 11.5px;
    color: var(--bt-text-3);
}

.ov-expander {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--bt-accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* Pace bar — a track, a state-coloured fill, and the expected-by-now marker. */
.ov-pace {
    position: relative;
    height: 7px;
    border-radius: 6px;
    background: var(--bt-track);
    overflow: visible;
}

.ov-pace__fill {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    transition: width .4s ease;
}

.ov-pace__fill--over { background: var(--bt-error); }
.ov-pace__fill--ahead { background: var(--bt-warning); }
.ov-pace__fill--ontrack { background: var(--bt-accent); opacity: .55; }

.ov-pace__marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--bt-text);
    opacity: .42;
    border-radius: 2px;
}

/* ---- 5. Trend ----------------------------------------------------------- */
.ov-trend__headline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.ov-trend__value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ov-trend__caption {
    font-size: 13.5px;
    color: var(--bt-text-2);
    font-weight: 600;
}

.ov-trend__sub {
    font-size: 12.5px;
    color: var(--bt-text-3);
    margin-bottom: 14px;
}

.ov-trend__legend {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--bt-text-3);
    flex-wrap: wrap;
}

.ov-trend__legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ov-trend__legend i {
    display: inline-block;
}

.ov-legend-box { width: 9px; height: 9px; border-radius: 2px; }
.ov-legend-band { width: 12px; height: 9px; border-radius: 2px; opacity: .28; }
.ov-legend-line { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; }
.ov-legend-dash { width: 14px; height: 0; border-top-width: 2px; border-top-style: dashed; }

/* Monthly bars view. */
.ov-bars {
    display: flex;
    align-items: flex-end;
    gap: 9px;
    height: 188px;
    padding-top: 8px;
}

.ov-bars__col {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ov-bars__plot {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    min-height: 0;
}

.ov-bars__bar {
    width: 46%;
    max-width: 26px;
    border-radius: 4px 4px 0 0;
}

.ov-bars__tick {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    max-width: 34px;
    height: 2px;
    background: var(--bt-text-3);
    opacity: .5;
}

.ov-bars__label {
    font-size: 11px;
    color: var(--bt-text-3);
    margin-top: 6px;
}

/* ---- Responsive: collapse the grids on narrower viewports --------------- */
@media (max-width: 1100px) {
    .ov-tenants { grid-template-columns: repeat(2, 1fr); }
    .ov-detail--two { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .ov-hero { flex-direction: column; }
    .ov-hero__aside {
        width: auto;
        border-left: none;
        border-top: 1px solid var(--bt-line);
        padding-left: 0;
        padding-top: 18px;
    }
    .ov-kpis { flex-wrap: wrap; gap: 14px 0; }
    .ov-kpi { flex-basis: 50%; }
    .ov-kpi + .ov-kpi { border-left: none; }
    .ov-tenants { grid-template-columns: 1fr; }
}

/* Respect a reduced-motion preference: keep the hover lift but drop the travel. */
@media (prefers-reduced-motion: reduce) {
    .ov-tenant:hover { transform: none; }
}

/* ---- Documentation (/docs): in-page TOC + rendered Markdown article ------ */
.bt-docs {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.bt-docs__nav {
    position: sticky;
    top: 88px;
    border-right: 1px solid var(--bt-line);
    padding-right: 12px;
}

.bt-docs__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bt-text-2);
    text-decoration: none;
    padding: 0 8px 14px;
}

.bt-docs__back:hover { color: var(--bt-accent); }

.bt-docs__navtitle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bt-text);
    padding: 0 8px 4px;
}

.bt-docs__nav .bt-navgroup {
    padding: 14px 8px 4px;
}

.bt-docs__link {
    display: block;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bt-text-2);
    text-decoration: none;
}

.bt-docs__link:hover {
    background: var(--bt-accent-soft);
    color: var(--bt-text);
}

.bt-docs__link.is-active {
    background: var(--bt-accent-soft);
    color: var(--bt-accent);
    font-weight: 600;
}

.bt-docs__article {
    min-width: 0;
    max-width: 760px;
}

/* Prose: typographic defaults for HTML rendered from Markdown. Scoped to .bt-prose so it never
   leaks into the app's MudBlazor surfaces. */
.bt-prose {
    color: var(--bt-text);
    line-height: 1.7;
    font-size: 0.95rem;
}

.bt-prose > :first-child { margin-top: 0; }

.bt-prose h1,
.bt-prose h2,
.bt-prose h3 {
    color: var(--bt-text);
    font-weight: 700;
    line-height: 1.3;
    margin: 2em 0 0.6em;
}

.bt-prose h1 { font-size: 1.85rem; margin-top: 0; }
.bt-prose h2 { font-size: 1.35rem; padding-bottom: 0.3em; border-bottom: 1px solid var(--bt-line); }
.bt-prose h3 { font-size: 1.1rem; }

.bt-prose p,
.bt-prose ul,
.bt-prose ol { margin: 0 0 1em; }

.bt-prose ul,
.bt-prose ol { padding-left: 1.4em; }

.bt-prose li { margin: 0.3em 0; }

.bt-prose a {
    color: var(--bt-accent);
    text-decoration: none;
    font-weight: 500;
}

.bt-prose a:hover { text-decoration: underline; }

.bt-prose code {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: 0.85em;
    background: var(--bt-track);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

.bt-prose pre {
    background: var(--bt-track);
    padding: 14px 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0 0 1em;
}

.bt-prose pre code {
    background: none;
    padding: 0;
    font-size: 0.85rem;
}

.bt-prose blockquote {
    margin: 0 0 1em;
    padding: 0.4em 1em;
    border-left: 3px solid var(--bt-accent);
    background: var(--bt-accent-soft);
    border-radius: 0 6px 6px 0;
    color: var(--bt-text-2);
}

.bt-prose blockquote > :last-child { margin-bottom: 0; }

.bt-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 0.9rem;
}

.bt-prose th,
.bt-prose td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bt-line);
}

.bt-prose th {
    font-weight: 600;
    color: var(--bt-text-2);
}

.bt-prose hr {
    border: none;
    border-top: 1px solid var(--bt-line);
    margin: 2em 0;
}

@media (max-width: 860px) {
    .bt-docs { grid-template-columns: 1fr; gap: 20px; }
    .bt-docs__nav {
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--bt-line);
        padding-right: 0;
        padding-bottom: 12px;
    }
}