html, body {
    font-family: var(--invpro-font-body);
    background-color: var(--invpro-paper);
    color: var(--invpro-ink);
}

/* App shell chrome (classes land on MudBlazor component roots, so they must be global).
   Flat ink surfaces — no gradients, per brand. */
.app-appbar {
    background: var(--invpro-ink) !important;
}

.app-drawer {
    background: var(--invpro-ink) !important;
}

.app-drawer .mud-drawer-content::-webkit-scrollbar { width: 6px; }
.app-drawer .mud-drawer-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.app-drawer .mud-drawer-content::-webkit-scrollbar-thumb { background: rgba(18,133,92,0.5); border-radius: 3px; }
.app-drawer .mud-drawer-content::-webkit-scrollbar-thumb:hover { background: rgba(18,133,92,0.7); }

/* Money figures, invoice numbers, dates — always mono so columns line up */
.figure {
    font-family: var(--invpro-font-mono);
    font-variant-numeric: tabular-nums;
}

.figure--expense {
    color: var(--invpro-amber);
}

/* ── Mobile list cards (< 600px) ──
   Wrap a list page's MudTable in <div class="list-table"> and each stacked row
   renders as its own card: first cell = card header, .list-cell-strong = emphasized
   value (amounts), last cell = right-aligned actions footer. Desktop is unaffected. */
@media (max-width: 599.98px) {
    /* The table's own card chrome disappears — the row cards carry it instead */
    .list-table .mud-table {
        background: transparent;
        box-shadow: none;
    }

    .list-table .mud-table .mud-table-container {
        overflow: visible;
    }

    .list-table .mud-table .mud-table-body .mud-table-row {
        display: block;
        background: var(--invpro-white);
        border: 1px solid var(--invpro-line);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 8px 0 10px;
    }

    .list-table .mud-table .mud-table-body .mud-table-cell {
        border-bottom: none;
        padding: 5px 16px;
    }

    /* Field labels: small caps, muted */
    .list-table .mud-table .mud-table-body .mud-table-cell::before {
        font-family: var(--invpro-font-body);
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--invpro-muted);
    }

    /* Card header: the row's identity (number/name), separated by a hairline.
       :not([colspan]) keeps empty/loading rows out of the treatment. */
    .list-table .mud-table .mud-table-body .mud-table-cell:first-child:not([colspan]) {
        justify-content: flex-start;
        border-bottom: 1px solid var(--invpro-line);
        padding-bottom: 10px;
        margin-bottom: 6px;
        font-size: 15px;
        font-weight: 600;
    }

    .list-table .mud-table .mud-table-body .mud-table-cell:first-child:not([colspan])::before {
        display: none;
    }

    .list-table .mud-table .mud-table-body .mud-table-cell:first-child:not([colspan]) .mud-link {
        font-size: 15px;
        font-weight: 600;
    }

    /* Emphasized value — the number most rows are scanned for */
    .list-table .mud-table .mud-table-body .mud-table-cell.list-cell-strong {
        font-weight: 600;
        font-size: 15px;
    }

    /* Actions: right-aligned card footer, no label */
    .list-table .mud-table .mud-table-body .mud-table-cell:last-child:not([colspan]) {
        justify-content: flex-end;
        padding-top: 8px;
    }

    .list-table .mud-table .mud-table-body .mud-table-cell:last-child:not([colspan])::before {
        display: none;
    }
}

/* Fix MudBlazor popover/select background being transparent when Bootstrap is loaded */
.mud-popover.mud-paper,
.mud-popover-paper {
    background-color: var(--mud-palette-surface) !important;
}
.mud-list {
    background-color: var(--mud-palette-surface) !important;
}

/* Links: emerald, hover pine (also covers static Identity pages) */
a, .btn-link {
    color: var(--invpro-emerald);
}

a:hover, .btn-link:hover {
    color: var(--invpro-pine);
}

/* Bootstrap buttons on static Identity pages */
.btn-primary {
    color: #fff;
    background-color: var(--invpro-emerald);
    border-color: var(--invpro-emerald);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background-color: var(--invpro-pine);
    border-color: var(--invpro-pine);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(18, 133, 92, 0.5);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--invpro-emerald);
}

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

.validation-message {
    color: #C7442E;
}

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

/* ═══ Static Identity pages (auth card + account manage) — match the app's Mud look.
   These pages render as static SSR with Bootstrap markup; the selectors below are
   scoped to .auth-card / .account-content so the interactive Mud app is untouched. ═══ */

/* Headings — display font like PageHeader */
.auth-card h1, .auth-card h2, .auth-card h3,
.account-content h3, .account-content h4 {
    font-family: var(--invpro-font-display);
    color: var(--invpro-ink);
    letter-spacing: -0.02em;
    font-weight: 600;
}

.auth-card h1, .auth-card h2 {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* When an h1 title is followed by an h2, the h2 is a subtitle */
.auth-card h1 + h2 {
    font-family: var(--invpro-font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--invpro-body);
    margin: -1rem 0 1.5rem;
}

.account-content h3 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.account-content h4 {
    font-size: 1.05rem;
    margin: 1.75rem 0 0.75rem;
}

.account-content hr, .auth-card hr {
    border-color: var(--invpro-line);
    opacity: 1;
    margin: 1rem 0 1.25rem;
}

/* The stock templates wrap auth forms in .col-md-4, which squeezes them to a
   third of the card on desktop — the card itself is the column, so undo the grid */
.auth-card .row {
    margin-left: 0;
    margin-right: 0;
}

.auth-card .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    flex: none;
}

/* Inputs — outlined-field look */
.auth-card .form-control, .account-content .form-control {
    border: 1px solid var(--invpro-line);
    border-radius: var(--invpro-radius-sm);
    color: var(--invpro-ink);
    background-color: var(--invpro-white);
}

.auth-card .form-control:focus, .account-content .form-control:focus {
    border-color: var(--invpro-emerald);
    box-shadow: 0 0 0 3px rgba(18, 133, 92, 0.15);
}

.auth-card .form-floating > label, .account-content .form-floating > label {
    color: var(--invpro-muted);
}

.auth-card .form-check-input:checked, .account-content .form-check-input:checked {
    background-color: var(--invpro-emerald);
    border-color: var(--invpro-emerald);
}

/* Buttons */
.auth-card .btn, .account-content .btn {
    border-radius: var(--invpro-radius-sm);
    font-weight: 600;
}

.auth-card .btn-lg, .account-content .btn-lg {
    font-size: 1rem;
    padding: 0.7rem 1rem;
}

/* Manage pages render sibling action buttons inline (e.g. 2FA) */
.account-content .btn {
    margin: 0 8px 8px 0;
}

.auth-card .btn-danger, .account-content .btn-danger {
    color: #fff;
    background-color: #C7442E;
    border-color: #C7442E;
}

.auth-card .btn-danger:hover, .auth-card .btn-danger:focus, .auth-card .btn-danger:active,
.account-content .btn-danger:hover, .account-content .btn-danger:focus, .account-content .btn-danger:active {
    color: #fff;
    background-color: #A83722;
    border-color: #A83722;
}

/* Alerts — tinted, borderless, like MudAlert */
.auth-card .alert, .account-content .alert {
    border: none;
    border-radius: var(--invpro-radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.auth-card .alert p, .account-content .alert p {
    margin-bottom: 0;
}

.auth-card .alert-success, .account-content .alert-success {
    background: var(--invpro-mist);
    color: var(--invpro-pine);
}

.auth-card .alert-danger, .account-content .alert-danger {
    background: rgba(199, 68, 46, 0.1);
    color: #A83722;
}

.auth-card .alert-warning, .account-content .alert-warning {
    background: rgba(228, 162, 58, 0.16);
    color: #7A5211;
}

/* Validation messages (headings like "Locked out" keep their size, only recolor) */
.auth-card .text-danger, .account-content .text-danger {
    color: #C7442E !important;
}

.auth-card div.text-danger, .auth-card ul.text-danger,
.account-content div.text-danger, .account-content ul.text-danger {
    font-size: 0.85rem;
}

.auth-card ul.text-danger, .account-content ul.text-danger {
    padding-left: 1.1rem;
    margin-bottom: 0.75rem;
}

/* Authenticator QR code (server-generated SVG) */
.account-content .qr-code-box {
    display: inline-block;
    background: #FFFFFF;
    border: 1px solid var(--invpro-line);
    border-radius: var(--invpro-radius-md);
    padding: 12px;
    margin: 0.5rem 0 1rem;
    line-height: 0;
}

.account-content .qr-code-box svg {
    width: 200px;
    height: 200px;
}

/* Plain tables (e.g. registered external logins) */
.account-content table {
    width: 100%;
}

.account-content table td {
    padding: 10px 8px 10px 0;
    border-bottom: 1px solid var(--invpro-line);
    vertical-align: middle;
}

/* ── Desktop polish for the manage pages ──
   The Identity templates mix full-width buttons, bootstrap column halving and
   edge-to-edge alerts; normalize to a single comfortable column. */

/* Neutralize bootstrap grid wrappers inside the card — one consistent column */
.account-content .row {
    margin-left: 0;
    margin-right: 0;
}

.account-content .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    flex: none;
}

/* Comfortable measure for forms and alerts instead of spanning the whole card */
.account-content form,
.account-content .alert {
    max-width: 560px;
}

/* Buttons size to their label on desktop; full-width stays for phones */
@media (min-width: 600px) {
    .account-content .btn.w-100 {
        width: auto !important;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

/* Numbered steps (configure authenticator app) */
.account-content ol.list {
    padding-left: 1.25rem;
    max-width: 640px;
}

.account-content ol.list > li {
    margin-bottom: 0.75rem;
}

.account-content ol.list > li::marker {
    font-weight: 600;
    color: var(--invpro-emerald);
}

/* Shared authenticator key */
.account-content kbd {
    background: var(--invpro-mist);
    color: var(--invpro-pine);
    border: 1px solid var(--invpro-line);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: var(--invpro-font-mono);
    font-size: 0.85em;
}

/* Recovery codes — mono chips */
.account-content .recovery-code {
    display: inline-block;
    font-family: var(--invpro-font-mono);
    font-size: 0.95rem;
    background: var(--invpro-mist);
    color: var(--invpro-ink);
    border: 1px solid var(--invpro-line);
    border-radius: 6px;
    padding: 6px 12px;
    margin: 0 8px 8px 0;
}