/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-yiyws154tt] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-yiyws154tt] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/PrintLayout.razor.rz.scp.css */
/* Full-bleed surface for printable documents — the page inside supplies
   its own background, spacing and typography. */

.cas-print-shell[b-uqktjb8vbp] {
    display: block;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #eef0f5;
}

@media print {

    .cas-print-shell[b-uqktjb8vbp] {
        min-height: 0;
        background: #ffffff;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Reconnect modal styling.

   A branded, centred card: JFNA mark in a pulsing ring, the product name,
   a one-line status and an indeterminate progress bar. Colours hang off the
   same custom properties the rest of the app uses (wwwroot/css/styles.css),
   so the card follows the user's light/dark preference. The framework only
   ever toggles the components-reconnect-* classes on the dialog itself;
   every state rule below hangs off those. */

/* ---------------------------------------------------------------
   Brand tokens (local to the modal)
   --------------------------------------------------------------- */

#components-reconnect-modal[b-zczy5g8cjo] {
    --cas-reconnect-brand-blue: #0a9ad7;
    --cas-reconnect-brand-navy: #1c5a8a;
    --cas-reconnect-track: rgba(var(--primary-rgb), 0.1);
    --cas-reconnect-wash: rgba(10, 154, 215, 0.08);
}

/* ---------------------------------------------------------------
   State visibility. Each block is hidden until its state is active.
   --------------------------------------------------------------- */

.components-reconnect-first-attempt-visible[b-zczy5g8cjo],
.components-reconnect-failed-visible[b-zczy5g8cjo],
.components-pause-visible[b-zczy5g8cjo],
.components-resume-failed-visible[b-zczy5g8cjo],
.cas-reconnect-progress[b-zczy5g8cjo] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-show .cas-reconnect-progress[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-retrying[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-retrying .cas-reconnect-progress[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-failed[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-failed .cas-reconnect-progress[b-zczy5g8cjo] {
    display: block;
}

/* Action rows lay their buttons out side by side, so they need flex rather
   than the block the generic rule above hands out. Declared after that rule
   so it wins at equal specificity. */
#components-reconnect-modal.components-reconnect-failed .cas-reconnect-actions.components-reconnect-failed-visible[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-paused .cas-reconnect-actions.components-pause-visible[b-zczy5g8cjo] {
    display: flex;
}

/* When Blazor has stopped retrying and only the liveness probe is running,
   the bar slows down: still clearly alive, but no longer implying an
   imminent result. */
#components-reconnect-modal.components-reconnect-failed .cas-reconnect-progress-bar[b-zczy5g8cjo] {
    animation-duration: 2.6s;
}

/* The badge only pulses while something is actually being waited on. */
#components-reconnect-modal.components-reconnect-paused .cas-reconnect-badge-ring[b-zczy5g8cjo],
#components-reconnect-modal.components-reconnect-resume-failed .cas-reconnect-badge-ring[b-zczy5g8cjo] {
    animation: none;
    opacity: 0;
}

/* ---------------------------------------------------------------
   Dialog shell
   --------------------------------------------------------------- */

/* showModal() places the dialog in the top layer with the UA's fixed/inset
   positioning; margin: auto centres it in the viewport. */
#components-reconnect-modal[b-zczy5g8cjo] {
    background-color: var(--custom-white);
    background-image: linear-gradient(180deg, var(--cas-reconnect-wash) 0%, transparent 42%);
    color: var(--default-text-color);
    width: min(23rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    margin: auto;
    padding: 2.25rem 2rem 2rem;
    border: 1px solid var(--default-border);
    border-radius: 1.125rem;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.28), 0 8px 16px -8px rgba(16, 24, 40, 0.12);
    font-family: var(--default-font-family, inherit);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-zczy5g8cjo 0.5s both;
}

    #components-reconnect-modal[open][b-zczy5g8cjo] {
        animation: components-reconnect-modal-rise-b-zczy5g8cjo 0.6s cubic-bezier(.2, .8, .2, 1) 0.3s, components-reconnect-modal-fadeInOpacity-b-zczy5g8cjo 0.4s ease-out 0.3s;
        animation-fill-mode: both;
    }

#components-reconnect-modal[b-zczy5g8cjo]::backdrop {
    background-color: rgba(30, 36, 56, 0.45);
    backdrop-filter: blur(6px) saturate(0.9);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
    animation: components-reconnect-modal-fadeInOpacity-b-zczy5g8cjo 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-rise-b-zczy5g8cjo {
    0% {
        transform: translateY(16px) scale(0.97);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-zczy5g8cjo {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-zczy5g8cjo {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ---------------------------------------------------------------
   Layout
   --------------------------------------------------------------- */

.components-reconnect-container[b-zczy5g8cjo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

#components-reconnect-modal p[b-zczy5g8cjo] {
    margin: 0;
    text-align: center;
}

/* ---------------------------------------------------------------
   Brand block
   --------------------------------------------------------------- */

.cas-reconnect-brand[b-zczy5g8cjo] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cas-reconnect-badge[b-zczy5g8cjo] {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin-bottom: 1rem;
}

.cas-reconnect-badge-core[b-zczy5g8cjo] {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    /* The mark is a full-colour logo, so its disc stays white in both themes
       -- the same way the header keeps the logo on a light plate. */
    background: #fff;
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.08), 0 6px 18px -6px rgba(16, 24, 40, 0.25);
}

    .cas-reconnect-badge-core img[b-zczy5g8cjo] {
        display: block;
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

/* Two staggered rings breathe outward from the badge. */
.cas-reconnect-badge-ring[b-zczy5g8cjo] {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid var(--cas-reconnect-brand-blue);
    opacity: 0;
    animation: cas-reconnect-ring-b-zczy5g8cjo 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

    .cas-reconnect-badge-ring:nth-child(2)[b-zczy5g8cjo] {
        animation-delay: 1.2s;
    }

@keyframes cas-reconnect-ring-b-zczy5g8cjo {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

.cas-reconnect-brand-name[b-zczy5g8cjo] {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--default-text-color);
}

.cas-reconnect-brand-tagline[b-zczy5g8cjo] {
    margin-top: 0.25rem !important;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------
   Status copy
   --------------------------------------------------------------- */

.cas-reconnect-status[b-zczy5g8cjo] {
    width: 100%;
}

.cas-reconnect-title[b-zczy5g8cjo] {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--default-text-color);
}

.cas-reconnect-detail[b-zczy5g8cjo] {
    margin-top: 0.375rem !important;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------
   Indeterminate progress bar
   --------------------------------------------------------------- */

.cas-reconnect-progress[b-zczy5g8cjo] {
    position: relative;
    width: 13rem;
    max-width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--cas-reconnect-track);
    overflow: hidden;
}

.cas-reconnect-progress-bar[b-zczy5g8cjo] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cas-reconnect-brand-blue) 0%, var(--cas-reconnect-brand-navy) 100%);
    animation: cas-reconnect-progress-b-zczy5g8cjo 1.6s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

@keyframes cas-reconnect-progress-b-zczy5g8cjo {
    0% {
        transform: translateX(-100%);
    }

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

/* ---------------------------------------------------------------
   Actions
   --------------------------------------------------------------- */

.cas-reconnect-actions[b-zczy5g8cjo] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

/* Buttons inherit .btn / .btn-primary / .btn-secondary from the global
   stylesheet, exactly like every other dialog in the app. Nothing is
   restyled here beyond making sure the icon lines up. */
#components-reconnect-modal .btn i[b-zczy5g8cjo] {
    vertical-align: -0.05rem;
}

/* ---------------------------------------------------------------
   Dark mode -- a touch more wash and a deeper backdrop so the card
   still separates from the dimmed page.
   --------------------------------------------------------------- */

[data-theme-mode=dark] #components-reconnect-modal[b-zczy5g8cjo] {
    --cas-reconnect-wash: rgba(10, 154, 215, 0.14);
    --cas-reconnect-track: rgba(255, 255, 255, 0.08);
    --cas-reconnect-brand-navy: #4fb3e6;
}

/* ---------------------------------------------------------------
   Reduced motion: static rings, a still bar, no rise-in.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cas-reconnect-badge-ring[b-zczy5g8cjo] {
        animation: none;
        opacity: 0;
    }

        .cas-reconnect-badge-ring:first-child[b-zczy5g8cjo] {
            opacity: 0.35;
            transform: scale(1.14);
        }

    .cas-reconnect-progress-bar[b-zczy5g8cjo],
    #components-reconnect-modal.components-reconnect-failed .cas-reconnect-progress-bar[b-zczy5g8cjo] {
        animation: none;
        left: 30%;
    }

    #components-reconnect-modal[b-zczy5g8cjo],
    #components-reconnect-modal[open][b-zczy5g8cjo],
    #components-reconnect-modal[b-zczy5g8cjo]::backdrop {
        animation: none;
        opacity: 1;
    }
}
/* /Components/Pages/Approvals/ApprovalPrint.razor.rz.scp.css */
/* ============================================================================
   Approval print document.

   Two presentations from one markup: a centred "sheet on a desk" preview on
   screen, and a clean A4 portrait document on paper. Deliberately does NOT
   inherit the app theme — a printed record should look like a document, not
   like a screenshot of an admin panel.
   ========================================================================= */

.cas-doc[b-fraoihtyg9] {
    --doc-ink: #16181d;
    --doc-ink-soft: #5b6270;
    --doc-ink-faint: #9aa1ae;
    --doc-line: #e6e8ee;
    --doc-line-strong: #d3d7e0;
    --doc-accent: #2f3a8f;
    --doc-accent-soft: #f2f4fb;
    --doc-surface: #ffffff;
    --doc-desk: #eef0f5;

    min-height: 100vh;
    background: var(--doc-desk);
    padding: 32px 16px 64px;
    color: var(--doc-ink);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Screen-only toolbar ---------- */

.cas-doc-toolbar[b-fraoihtyg9] {
    max-width: 860px;
    margin: 0 auto 20px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.cas-doc-btn[b-fraoihtyg9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--doc-line-strong);
    border-radius: 8px;
    background: var(--doc-surface);
    color: var(--doc-ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.cas-doc-btn:hover[b-fraoihtyg9] {
    background: #f7f8fb;
    border-color: #b9bfcd;
}

.cas-doc-btn:active[b-fraoihtyg9] {
    transform: translateY(1px);
}

.cas-doc-btn-primary[b-fraoihtyg9] {
    background: var(--doc-accent);
    border-color: var(--doc-accent);
    color: #ffffff;
}

.cas-doc-btn-primary:hover[b-fraoihtyg9] {
    background: #26307a;
    border-color: #26307a;
}

/* ---------- The sheet ---------- */

.cas-doc-sheet[b-fraoihtyg9] {
    max-width: 860px;
    margin: 0 auto;
    background: var(--doc-surface);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .10);
    overflow: hidden;
}

/* ---------- Header ---------- */

.cas-doc-header[b-fraoihtyg9] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 40px 24px;
    border-bottom: 2px solid var(--doc-accent);
}

.cas-doc-brand[b-fraoihtyg9] {
    flex: 0 0 auto;
}

.cas-doc-logo[b-fraoihtyg9] {
    display: block;
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.cas-doc-headline[b-fraoihtyg9] {
    flex: 1 1 auto;
    min-width: 0;
}

.cas-doc-eyebrow[b-fraoihtyg9] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--doc-ink-faint);
}

.cas-doc-title[b-fraoihtyg9] {
    margin: 2px 0 0;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--doc-ink);
}

.cas-doc-idcard[b-fraoihtyg9] {
    flex: 0 0 auto;
    text-align: right;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--doc-accent-soft);
}

.cas-doc-idcard-label[b-fraoihtyg9] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--doc-ink-soft);
}

.cas-doc-idcard-value[b-fraoihtyg9] {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--doc-accent);
    font-variant-numeric: tabular-nums;
}

/* ---------- Summary strip ---------- */

.cas-doc-summary[b-fraoihtyg9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--doc-line);
    border-bottom: 1px solid var(--doc-line);
}

.cas-doc-summary-item[b-fraoihtyg9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 20px;
    background: #fbfcfe;
}

.cas-doc-summary-label[b-fraoihtyg9] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--doc-ink-faint);
}

.cas-doc-summary-value[b-fraoihtyg9] {
    font-size: 15px;
    font-weight: 600;
    color: var(--doc-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ---------- Body ---------- */

.cas-doc-body[b-fraoihtyg9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    padding: 8px 40px 28px;
}

.cas-doc-section[b-fraoihtyg9] {
    padding: 22px 0 4px;
    min-width: 0;
}

.cas-doc-section-wide[b-fraoihtyg9] {
    grid-column: 1 / -1;
}

.cas-doc-section-title[b-fraoihtyg9] {
    margin: 0 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--doc-line);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--doc-accent);
}

/* ---------- Label / value rows ---------- */

.cas-doc-rows[b-fraoihtyg9] {
    margin: 0;
}

.cas-doc-rows-split[b-fraoihtyg9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}

.cas-doc-row[b-fraoihtyg9] {
    display: grid;
    grid-template-columns: minmax(120px, 44%) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid #f4f5f9;
}

.cas-doc-row:last-child[b-fraoihtyg9] {
    border-bottom: 0;
}

.cas-doc-row-label[b-fraoihtyg9] {
    margin: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--doc-ink-soft);
    overflow-wrap: anywhere;
}

.cas-doc-row-value[b-fraoihtyg9] {
    margin: 0;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--doc-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.cas-doc-empty[b-fraoihtyg9] {
    color: var(--doc-ink-faint);
    font-weight: 400;
}

/* ---------- Message block ---------- */

.cas-doc-note[b-fraoihtyg9] {
    margin: 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: #fafbfd;
    border: 1px solid var(--doc-line);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */

.cas-doc-footer[b-fraoihtyg9] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 16px 40px 22px;
    border-top: 1px solid var(--doc-line);
    background: #fbfcfe;
    font-size: 10.5px;
    color: var(--doc-ink-soft);
}

.cas-doc-footer-meta[b-fraoihtyg9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.cas-doc-footer-meta strong[b-fraoihtyg9] {
    font-weight: 600;
    color: var(--doc-ink);
}

.cas-doc-footer-brand[b-fraoihtyg9] {
    color: var(--doc-ink-faint);
}

/* ---------- Loading / error states ---------- */

.cas-doc-state[b-fraoihtyg9] {
    max-width: 640px;
    margin: 80px auto;
    padding: 28px 32px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e6e8ee;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: #5b6270;
    text-align: center;
}

.cas-doc-state-error[b-fraoihtyg9] {
    border-color: #f3c7c7;
    background: #fffafa;
    color: #8a2b2b;
    text-align: left;
}

.cas-doc-state-title[b-fraoihtyg9] {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 650;
    color: #7a1f1f;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 767.98px) {
    .cas-doc[b-fraoihtyg9] {
        padding: 16px 8px 40px;
    }

    .cas-doc-header[b-fraoihtyg9] {
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px 20px 18px;
    }

    .cas-doc-idcard[b-fraoihtyg9] {
        text-align: left;
    }

    .cas-doc-summary[b-fraoihtyg9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cas-doc-body[b-fraoihtyg9] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 4px 20px 20px;
    }

    .cas-doc-rows-split[b-fraoihtyg9] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .cas-doc-footer[b-fraoihtyg9] {
        padding: 14px 20px 18px;
    }
}

/* ============================================================================
   Print
   ========================================================================= */

/*  The @page rule for this document is injected into <head> at runtime by
    cashAndStats.setPrintPageRule (called from ApprovalPrint.razor.cs) and
    removed again on dispose — it deliberately does NOT live here. Scoped
    component CSS is bundled into the app-wide CashAndStats.Web.styles.css,
    and @page has no selector to scope, so declaring it here would silently
    change the paper size and margins for Ctrl+P on every page in the app. */

@media print {

    .cas-doc[b-fraoihtyg9] {
        min-height: 0;
        padding: 0;
        background: #ffffff;
        font-size: 10.5pt;
    }

    /* Toolbar is a screen affordance only. */
    .cas-doc-toolbar[b-fraoihtyg9] {
        display: none !important;
    }

    .cas-doc-sheet[b-fraoihtyg9] {
        max-width: none;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .cas-doc-header[b-fraoihtyg9] {
        padding: 0 0 12pt;
    }

    .cas-doc-logo[b-fraoihtyg9] {
        height: 34pt;
    }

    .cas-doc-title[b-fraoihtyg9] {
        font-size: 19pt;
    }

    .cas-doc-idcard[b-fraoihtyg9] {
        background: transparent;
        padding: 0;
    }

    .cas-doc-idcard-value[b-fraoihtyg9] {
        font-size: 15pt;
    }

    .cas-doc-summary[b-fraoihtyg9] {
        gap: 0;
        background: transparent;
        border-bottom: 1px solid var(--doc-line-strong);
    }

    .cas-doc-summary-item[b-fraoihtyg9] {
        background: transparent;
        padding: 8pt 10pt 10pt 0;
    }

    .cas-doc-summary-value[b-fraoihtyg9] {
        font-size: 11pt;
    }

    .cas-doc-body[b-fraoihtyg9] {
        padding: 0;
        gap: 0 22pt;
    }

    .cas-doc-section[b-fraoihtyg9] {
        padding: 12pt 0 2pt;
    }

    .cas-doc-row[b-fraoihtyg9] {
        padding: 3pt 0;
    }

    .cas-doc-row-label[b-fraoihtyg9] {
        font-size: 8.5pt;
    }

    .cas-doc-row-value[b-fraoihtyg9] {
        font-size: 9.5pt;
    }

    .cas-doc-note[b-fraoihtyg9] {
        background: transparent;
        padding: 8pt 10pt;
    }

    .cas-doc-footer[b-fraoihtyg9] {
        padding: 10pt 0 0;
        background: transparent;
        font-size: 8pt;
    }

    /* Keep a heading with its rows, and never split a label off its value. */
    .cas-doc-section[b-fraoihtyg9],
    .cas-doc-row[b-fraoihtyg9],
    .cas-doc-summary[b-fraoihtyg9],
    .cas-doc-note[b-fraoihtyg9],
    .cas-doc-footer[b-fraoihtyg9] {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .cas-doc-section-title[b-fraoihtyg9] {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* Force the browser to keep the accent rules and tinted panels. */
    .cas-doc[b-fraoihtyg9],
    .cas-doc-sheet[b-fraoihtyg9] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Pages/Approvals/Approvals.razor.rz.scp.css */
/*
    Approvals filter panel layout.

    Fixed 2 rows x 5 columns. Both rows share the same column tracks, so every
    label and input starts on the same vertical line and every field fills its
    own cell edge to edge (no ragged gaps):

        col 1 (1fr)    System ID     | Amount
        col 2 (2.5fr)  Donor         | Community
        col 3 (2.5fr)  Amuta #       | Designation
        col 4 (4fr)    Organization  | Pre Approval Status
        col 5 (4fr)    Project       | Approval Status
*/

.approvals-filter-grid[b-svf6krydkj] {
    display: grid;
    grid-template-columns: 1fr 2.5fr 2.5fr 4fr 4fr;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    align-items: start;
}

.approvals-filter-grid .afg-cell[b-svf6krydkj] {
    min-width: 0;
}

.approvals-filter-grid .afg-cell > label[b-svf6krydkj] {
    display: block;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

/* Plain inputs fill their cell. Typeahead inputs are inside a Bootstrap
   .input-group and must keep the flex sizing Bootstrap gives them, otherwise
   the dropdown arrow button wraps onto its own line. */
.approvals-filter-grid .afg-cell > input.form-control[b-svf6krydkj] {
    width: 100%;
}

.approvals-filter-grid .afg-cell[b-svf6krydkj]  .input-group {
    flex-wrap: nowrap;
}

.approvals-filter-grid .afg-cell[b-svf6krydkj]  .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Keep the placeholder inside the box instead of clipping it. */
.approvals-filter-grid .afg-cell[b-svf6krydkj]  .form-control::placeholder {
    font-size: 0.75rem;
    letter-spacing: -0.01em;
}

/* Long option text wraps to the next line inside the dropdown list. */
.approvals-filter-grid .afg-cell[b-svf6krydkj]  .dropdown-menu .dropdown-item,
.approvals-filter-grid .afg-cell[b-svf6krydkj]  .dropdown-menu .dropdown-item-text {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

@media (max-width: 1199.98px) {
    .approvals-filter-grid[b-svf6krydkj] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .approvals-filter-grid[b-svf6krydkj] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Approvals/Components/ApprovalReceiptPicker.razor.rz.scp.css */
/*
    Approval Receipt Selection picker.

    The grid itself reuses the shared sticky-column helpers from app.css
    (.lightgrid-scroll, .cas-sticky-*, .cas-hscroll-sticky) — only the
    header summary strip is styled here.
*/

/*
    Filters on the left, record summary on the right, on one row. The
    summary is pushed to the right edge with margin-left:auto rather than
    justify-content:space-between so it still sits hard right on the frames
    before the context has loaded and the summary is not rendered yet.
*/
.cas-arp-filterbar[b-xnj7qx3h3z] {
    display: flex;
    align-items: flex-start;
    gap: 1rem 2rem;
    flex-wrap: wrap;
}

    .cas-arp-filterbar > .cas-filter-grid[b-xnj7qx3h3z] {
        flex: 0 1 auto;
    }

.cas-receipt-summary[b-xnj7qx3h3z] {
    flex: 0 0 auto;
    margin-left: auto;

    /* Two tracks so the money column lines up: labels right-aligned against
       their values, values right-aligned against the card edge. */
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.25rem;

    padding: 0.5rem 0.75rem;
    border: 1px solid var(--default-border, #e9edf6);
    border-radius: 0.35rem;
    background: #fffbe6;
}

/* Each item spans both tracks and re-declares them, so every row shares one
   grid without needing the label and value to be direct children. */
.crs-item[b-xnj7qx3h3z] {
    display: contents;
}

.crs-label[b-xnj7qx3h3z] {
    font-weight: 600;
    opacity: 0.75;
    white-space: nowrap;
    text-align: right;
}

.crs-value[b-xnj7qx3h3z] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

/* Total Records closes the card, separated from the money lines above. */
.crs-count .crs-label[b-xnj7qx3h3z],
.crs-count .crs-value[b-xnj7qx3h3z] {
    padding-top: 0.35rem;
    border-top: 1px solid var(--default-border, #e9edf6);
}

.crs-count .crs-value[b-xnj7qx3h3z] {
    font-weight: 600;
}

/*
    The Note column carries the "Approval #NNNNN" ownership badge, so it
    needs room to wrap rather than being squeezed by the sticky Amount and
    checkbox columns on the right.
*/
.cas-receipt-picker td.text-wrap[b-xnj7qx3h3z] {
    min-width: 260px;
}

/*
    While loading, the scroll container holds a .lightgrid-loading-overlay
    (see the markup). On a first load there are no rows yet, so without a
    floor the table collapses to its header and the spinner has nowhere to
    sit — which is what made the panel look broken for the couple of seconds
    the two round-trips take.

    A floor rather than a fixed height: once rows arrive on a filter change
    the container is already taller than this and nothing shifts.
*/
.cas-receipt-picker .cas-arp-loading[b-xnj7qx3h3z] {
    min-height: 220px;
}

/*
    Narrow viewports: the summary wraps under the filters rather than being
    squeezed beside them, and stops being right-pinned so it lines up with
    the filter column above it.
*/
@media (max-width: 991.98px) {
    .cas-receipt-summary[b-xnj7qx3h3z] {
        margin-left: 0;
        width: 100%;
        justify-content: start;
    }
}
/* /Components/Pages/Batches/Components/BatchItemDetailCandidatesPanel.razor.rz.scp.css */
/*
    Criteria panel field labels.

    Mirrors ReclassItemDetailCandidatesPanel.razor.css: a fixed-width caption
    so the stacked criteria inputs all start at the same x-offset, right
    aligned so the captions sit flush against their inputs. Blazor scopes the
    rule to this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-9iuo0ewuce] {
    display: inline-block;
    width: 7rem;
    text-align: right;
    white-space: nowrap;
}

/*
    Criteria inputs are capped rather than filling the column - the
    typeaheads only ever hold a short code/name, so a full-width control
    reads as an empty expanse. Basis (not a hard width) so the control can
    still shrink below the cap on narrow viewports.
*/
.cas-criteria-input[b-9iuo0ewuce] {
    flex: 0 1 290px;
    max-width: 290px;
}
/* /Components/Pages/Commitments/UpsertCommitment.razor.rz.scp.css */
/*
    Scoped styles for UpsertCommitment.

    .cas-field-label gives every form caption in the Item Properties and
    Information Received Via panels a fixed width so the labels stay
    left-aligned while the inputs line up in a single vertical column
    sitting close to the labels.
*/
.cas-field-label[b-x0lh3es27u] {
    display: inline-block;
    width: 7rem;
    white-space: nowrap;
}
/* /Components/Pages/Credits/Components/CreditItemDetailCandidatesPanel.razor.rz.scp.css */
/*
    Criteria panel field labels.

    Mirrors ReclassItemDetailCandidatesPanel.razor.css: a fixed-width caption
    so the stacked criteria inputs all start at the same x-offset, right
    aligned so the captions sit flush against their inputs. Blazor scopes the
    rule to this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-n74d1zyira] {
    display: inline-block;
    width: 7rem;
    text-align: right;
    white-space: nowrap;
}

/*
    Criteria inputs are capped rather than filling the column - the
    typeaheads only ever hold a short code/name, so a full-width control
    reads as an empty expanse. Basis (not a hard width) so the control can
    still shrink below the cap on narrow viewports.
*/
.cas-criteria-input[b-n74d1zyira] {
    flex: 0 1 290px;
    max-width: 290px;
}
/* /Components/Pages/Debits/Components/DebitItemDetailCandidatesPanel.razor.rz.scp.css */
/*
    Criteria panel field labels.

    Mirrors ReclassItemDetailCandidatesPanel.razor.css: a fixed-width caption
    so the stacked criteria inputs all start at the same x-offset, right
    aligned so the captions sit flush against their inputs. Blazor scopes the
    rule to this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-7m4sxwh6m3] {
    display: inline-block;
    width: 11.5rem;
    text-align: right;
    white-space: nowrap;
}

/*
    Criteria inputs are capped rather than filling the column - the
    typeaheads only ever hold a short code/name, so a full-width control
    reads as an empty expanse. Basis (not a hard width) so the control can
    still shrink below the cap on narrow viewports.
*/
.cas-criteria-input[b-7m4sxwh6m3] {
    flex: 0 1 290px;
    max-width: 290px;
}
/* /Components/Pages/Disbursements/Components/DisbursementItemDetailCandidatesPanel.razor.rz.scp.css */
/*
    Criteria panel field labels.

    Mirrors ReclassItemDetailCandidatesPanel.razor.css: a fixed-width caption
    so the stacked criteria inputs all start at the same x-offset, right
    aligned so the captions sit flush against their inputs. Blazor scopes the
    rule to this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-61olkqcee1] {
    display: inline-block;
    width: 7rem;
    text-align: right;
    white-space: nowrap;
}

/*
    Criteria inputs are capped rather than filling the column - the
    typeaheads only ever hold a short code/name, so a full-width control
    reads as an empty expanse. Basis (not a hard width) so the control can
    still shrink below the cap on narrow viewports.
*/
.cas-criteria-input[b-61olkqcee1] {
    flex: 0 1 290px;
    max-width: 290px;
}
/* /Components/Pages/Distributions/Components/DistributionItemDetailCandidatesPanel.razor.rz.scp.css */
/*
    Criteria panel field labels.

    Mirrors ReclassItemDetailCandidatesPanel.razor.css: a fixed-width caption
    so the stacked criteria inputs all start at the same x-offset, right
    aligned so the captions sit flush against their inputs. Blazor scopes the
    rule to this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-he9rjmky1k] {
    display: inline-block;
    width: 7rem;
    text-align: right;
    white-space: nowrap;
}

/*
    Criteria inputs are capped rather than filling the column - the
    typeaheads only ever hold a short code/name, so a full-width control
    reads as an empty expanse. Basis (not a hard width) so the control can
    still shrink below the cap on narrow viewports.
*/
.cas-criteria-input[b-he9rjmky1k] {
    flex: 0 1 290px;
    max-width: 290px;
}
/* /Components/Pages/EmergencyCommitments/UpsertEmergencyCommitment.razor.rz.scp.css */
/*
    Scoped styles for UpsertEmergencyCommitment.

    .cas-field-label gives every form caption in the Item Properties tab
    a fixed width so the labels stay left-aligned while the inputs line
    up in a single vertical column sitting close to the labels. Mirrors
    the UpsertCommitment.razor.css convention; Blazor scopes the rule to
    this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-g9nay1hy9c] {
    display: inline-block;
    width: 7rem;
    white-space: nowrap;
}
/* /Components/Pages/ErrorLogs/Components/ErrorLogDetailsModal.razor.rz.scp.css */
/* =============================================================================
   Error detail modal — text blocks.

   Scoped to this component rather than added to app.css: these three classes
   exist only to render log text and have no reuse elsewhere, and app.css is
   already large enough that adding one-off rules to it is how it got that way.

   All three preserve whitespace. A stack trace whose newlines collapse is
   unreadable, which defeats the entire purpose of the page.
   ============================================================================= */

/* Plain message text. Wraps, but keeps the line breaks the logger produced. */
.cas-el-text[b-tyvw4etwvz] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--default-text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The un-rendered Serilog template — monospace so the {Placeholders} stand out. */
.cas-el-code[b-tyvw4etwvz] {
    padding: 8px 10px;
    border: 1px solid var(--default-border);
    border-radius: 4px;
    background: var(--light);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--default-text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Stack traces and the LogEvent JSON.

   max-height plus overflow:auto is what keeps a 400-frame trace from pushing
   the Close button off the bottom of the viewport — the block scrolls inside
   itself while the modal stays a fixed, usable size. */
.cas-el-trace[b-tyvw4etwvz] {
    max-height: 340px;
    overflow: auto;
    padding: 10px 12px;
    border: 1px solid var(--default-border);
    border-radius: 4px;
    background: var(--light);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
    color: var(--default-text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Pages/ErrorLogs/ErrorLogs.razor.rz.scp.css */
/* Source column. LightGrid gives wrapping cells overflow-wrap:anywhere and
   word-break:break-word inline, which would split "CircuitHost" at any
   character once the column is narrowed. Switching both back to normal here
   leaves the <wbr> after each namespace dot (see SourceWithBreaks) as the only
   places the name can wrap — so the column's narrowest width is its longest
   segment, and nothing is ever cut off or broken mid-word. */
.errlog-source[b-kibt8tqio2] {
    overflow-wrap: normal;
    word-break: normal;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   Sign-in page — split layout.

   Colours come from the theme's own custom properties (--primary-rgb,
   --custom-white, --default-text-color, --default-border) rather than literals,
   so this page follows the app's palette and its light/dark switch without
   needing its own theme rules.

   The page uses SignInLayout, which renders no header — so the section owns the
   full viewport and needs no offset at the top.
   --------------------------------------------------------------------------- */

.cas-signin[b-vhdg1w11ru] {
    display: flex;
    min-height: 100vh;
    /* dvh keeps the panel from jumping when mobile browser chrome hides. */
    min-height: 100dvh;
    background-color: var(--custom-white);
}

/* ------------------------------- Brand panel ------------------------------ */

.cas-signin__brand[b-vhdg1w11ru] {
    position: relative;
    flex: 0 0 46%;
    max-width: 46%;
    align-items: center;
    padding: 3rem;
    overflow: hidden;
    background-image: linear-gradient(155deg,
            rgba(var(--primary-rgb), 1) 0%,
            rgba(var(--primary-rgb), 0.88) 45%,
            rgba(var(--secondary-rgb), 0.95) 100%);
}

/* Two soft highlights so the gradient reads as depth rather than a flat fill. */
.cas-signin__brand[b-vhdg1w11ru]::before,
.cas-signin__brand[b-vhdg1w11ru]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cas-signin__brand[b-vhdg1w11ru]::before {
    inset-block-start: -18%;
    inset-inline-end: -12%;
    inline-size: 26rem;
    block-size: 26rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 70%);
}

.cas-signin__brand[b-vhdg1w11ru]::after {
    inset-block-end: -22%;
    inset-inline-start: -14%;
    inline-size: 22rem;
    block-size: 22rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 70%);
}

.cas-signin__brand-inner[b-vhdg1w11ru] {
    position: relative;
    z-index: 1;
    max-inline-size: 30rem;
    margin-inline: auto;
}

/* White plate behind the logo: the artwork is blue and green on transparent,
   which all but disappears against the indigo panel. The plate restores the
   contrast the logo was drawn for, and reads as a deliberate brand block
   rather than an image dropped on a background. */
.cas-signin__brand-logo[b-vhdg1w11ru] {
    display: inline-block;
    margin-block-end: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    background-color: #fff;
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.12);
}

.cas-signin__brand-logo img[b-vhdg1w11ru] {
    display: block;
    inline-size: 100%;
    max-inline-size: 17rem;
    block-size: auto;
}

.cas-signin__brand-lead[b-vhdg1w11ru] {
    margin-block-end: 2.5rem;
    max-inline-size: 26rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.65;
}

.cas-signin__features[b-vhdg1w11ru] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cas-signin__features li[b-vhdg1w11ru] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    margin-block-end: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.cas-signin__features li:last-child[b-vhdg1w11ru] {
    margin-block-end: 0;
}

.cas-signin__features i[b-vhdg1w11ru] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1rem;
}

/* ------------------------------ Sign-in panel ----------------------------- */

.cas-signin__panel[b-vhdg1w11ru] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.cas-signin__card[b-vhdg1w11ru] {
    inline-size: 100%;
    max-inline-size: 24rem;
    text-align: center;
}

.cas-signin__logo[b-vhdg1w11ru] {
    block-size: auto;
    max-inline-size: 13rem;
    margin-block-end: 2.25rem;
}

.cas-signin__title[b-vhdg1w11ru] {
    margin-block-end: 0.5rem;
    color: var(--default-text-color);
    font-size: 1.5rem;
    font-weight: 600;
}

.cas-signin__subtitle[b-vhdg1w11ru] {
    margin-block-end: 2rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.cas-signin__btn[b-vhdg1w11ru] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Microsoft's four-square mark, built from spans so the page carries no
   external image request and the mark inherits the button's sizing. */
.cas-signin__ms-mark[b-vhdg1w11ru] {
    display: grid;
    grid-template-columns: repeat(2, 0.5rem);
    grid-template-rows: repeat(2, 0.5rem);
    gap: 2px;
    flex-shrink: 0;
}

.cas-signin__ms-mark span:nth-child(1)[b-vhdg1w11ru] { background-color: #f25022; }
.cas-signin__ms-mark span:nth-child(2)[b-vhdg1w11ru] { background-color: #7fba00; }
.cas-signin__ms-mark span:nth-child(3)[b-vhdg1w11ru] { background-color: #00a4ef; }
.cas-signin__ms-mark span:nth-child(4)[b-vhdg1w11ru] { background-color: #ffb900; }

.cas-signin__hint[b-vhdg1w11ru] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-block: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.cas-signin__footer[b-vhdg1w11ru] {
    margin-block: 2.5rem 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
}

/* -------------------------------- Responsive ------------------------------ */

/* Below lg the brand panel is hidden (d-none d-lg-flex in the markup), so the
   sign-in panel takes the full width and the button stays above the fold. */
@media (max-width: 991.98px) {
    .cas-signin__panel[b-vhdg1w11ru] {
        padding-block: 3rem;
    }

    .cas-signin__logo[b-vhdg1w11ru] {
        max-inline-size: 11rem;
        margin-block-end: 1.75rem;
    }
}

/* Tall-but-narrow desktop windows: keep the brand panel from squeezing the
   sign-in column below a comfortable reading width. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .cas-signin__brand[b-vhdg1w11ru] {
        flex-basis: 40%;
        max-inline-size: 40%;
        padding: 2.5rem;
    }

    .cas-signin__brand-logo img[b-vhdg1w11ru] {
        max-inline-size: 14rem;
    }
}
/* /Components/Pages/Reclasses/Components/ReclassItemDetailCandidatesPanel.razor.rz.scp.css */
/*
    Criteria panel field labels.

    Mirrors the UpsertCommitment.razor.css convention: a fixed-width caption
    so the stacked Community / Year / Designation / Project inputs all start
    at the same x-offset. Unlike the Commitment panel these are right-aligned
    so the captions sit flush against their inputs. Blazor scopes the rule to
    this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-6oandjrvb3] {
    display: inline-block;
    width: 7rem;
    text-align: right;
    white-space: nowrap;
}

/*
    Criteria inputs are capped rather than filling the column — the
    typeaheads only ever hold a short code/name, so a full-width control
    reads as an empty expanse. Basis (not a hard width) so the control can
    still shrink below the cap on narrow viewports.
*/
.cas-criteria-input[b-6oandjrvb3] {
    flex: 0 1 290px;
    max-width: 290px;
}
/* /Components/Pages/Transfers/Components/TransferItemDetailCandidatesPanel.razor.rz.scp.css */
/*
    Criteria panel field labels.

    Mirrors ReclassItemDetailCandidatesPanel.razor.css: a fixed-width caption
    so the stacked criteria inputs all start at the same x-offset, right
    aligned so the captions sit flush against their inputs. Blazor scopes the
    rule to this component only, so it doesn't bleed into other pages.
*/
.cas-field-label[b-t4x156tl52] {
    display: inline-block;
    width: 7rem;
    text-align: right;
    white-space: nowrap;
}

/*
    Criteria inputs are capped rather than filling the column - the
    typeaheads only ever hold a short code/name, so a full-width control
    reads as an empty expanse. Basis (not a hard width) so the control can
    still shrink below the cap on narrow viewports.
*/
.cas-criteria-input[b-t4x156tl52] {
    flex: 0 1 290px;
    max-width: 290px;
}
/* /Components/Pages/WriteOffs/UpsertWriteOff.razor.rz.scp.css */
/*
    Scoped styles for UpsertWriteOff. Mirrors UpsertCommitment.razor.css
    so the field-label column lines up across both transaction screens.

    .cas-field-label gives every form caption in the Item Properties
    panel a fixed width so the labels stay left-aligned while the inputs
    line up in a single vertical column sitting close to the labels.
*/
.cas-field-label[b-q892duwbgo] {
    display: inline-block;
    width: 7rem;
    white-space: nowrap;
}
/* /Components/Shared/PasswordStrengthMeter.razor.rz.scp.css */
.psm-root[b-m05ege3j5u] {
    margin-top: 6px;
}

.psm-bars[b-m05ege3j5u] {
    display: flex;
    gap: 4px;
}

.psm-bar[b-m05ege3j5u] {
    flex: 1 1 0;
    height: 5px;
    border-radius: 3px;
    background: rgba(128, 138, 158, .25);
    transition: background-color .15s ease-in-out;
}

.psm-fill-danger[b-m05ege3j5u] {
    background: rgb(var(--danger-rgb));
}

.psm-fill-warning[b-m05ege3j5u] {
    background: rgb(var(--warning-rgb));
}

.psm-fill-success[b-m05ege3j5u] {
    background: rgb(var(--success-rgb));
}

.psm-label[b-m05ege3j5u] {
    margin-top: 4px;
    font-weight: 600;
}

.psm-checklist[b-m05ege3j5u] {
    margin-top: 6px;
}

    .psm-checklist li[b-m05ege3j5u] {
        line-height: 1.6;
    }
/* /Components/Shared/Reports/SsrsReportViewer.razor.rz.scp.css */
/*
    SSRS parameter panel layout.

    The panel mirrors the parameter table the report server renders: the prompt
    sits to the left of its control on a single line, and controls keep a fixed,
    narrow width instead of stretching across the viewport.

    Tracks alternate label/field, one pair per layout column (see
    LayoutGridTemplate):

        max-content  max-content         | max-content  max-content
        Start Date   [ 09/01/2026 ] Null | End Date     [ 09/01/2026 ] Null

    Every track sizes to its own content: label tracks to their widest prompt,
    so no label wraps, and field tracks to the fixed-width control plus the Null
    checkbox that sits beside it, so a field cell cannot overrun the next
    column's label. Rows still line up because the control width is fixed.

    Row and column placement come from the report definition's grid via the
    --spg-row / --spg-col / --spg-col-field custom properties each cell carries,
    so a row the designer left partly filled stays partly filled.
*/

.ssrs-param-grid[b-bp0mhg0vr4] {
    --spg-field-width: 260px;
    display: grid;
    grid-template-columns: var(--spg-template, max-content max-content);
    justify-content: start;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
}

.ssrs-param-grid .spg-label[b-bp0mhg0vr4] {
    grid-row: var(--spg-row);
    grid-column: var(--spg-col);
    margin-bottom: 0;
    white-space: nowrap;
    justify-self: start;
}

.ssrs-param-grid .spg-field[b-bp0mhg0vr4] {
    grid-row: var(--spg-row);
    grid-column: var(--spg-col-field);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* The control keeps the panel's fixed width; the Null checkbox sits beside it
   and is sized by its own content. */
.ssrs-param-grid .spg-control[b-bp0mhg0vr4] {
    flex: 0 0 auto;
    width: var(--spg-field-width);
    min-width: 0;
}

.ssrs-param-grid .spg-control > input.form-control[b-bp0mhg0vr4] {
    width: 100%;
}

/* The Null checkbox keeps its own width and stays on the control's line. */
.ssrs-param-grid .spg-field > .form-check[b-bp0mhg0vr4] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Typeahead and date controls render inside a Bootstrap .input-group; keep the
   text box flexible so the dropdown / calendar button cannot wrap onto its own
   line inside the narrower cell. */
.ssrs-param-grid .spg-control[b-bp0mhg0vr4]  .input-group {
    flex-wrap: nowrap;
}

.ssrs-param-grid .spg-control[b-bp0mhg0vr4]  .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Long option text wraps inside the dropdown list rather than forcing the menu
   wider than the control. */
.ssrs-param-grid .spg-control[b-bp0mhg0vr4]  .dropdown-menu .dropdown-item,
.ssrs-param-grid .spg-control[b-bp0mhg0vr4]  .dropdown-menu .dropdown-item-text {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

/* A run is in flight over the page of an earlier run. The page stays in view
   but reads as superseded wherever it is scrolled to: dimmed, desaturated and
   watermarked. The overlay also takes the pointer, so nothing on the old page
   can be clicked, toggled or selected as if it were current; wheel scrolling
   still reaches the page. The progress panel above it says why. */
.ssrs-report-stale > .card-body[b-bp0mhg0vr4] {
    opacity: 0.45;
    filter: grayscale(1);
}

.ssrs-report-stale[b-bp0mhg0vr4]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    cursor: progress;
    background-repeat: repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260'%3E%3Ctext x='260' y='130' text-anchor='middle' dominant-baseline='middle' transform='rotate(-24 260 130)' font-family='Segoe UI, Arial, sans-serif' font-size='22' font-weight='700' letter-spacing='2' fill='%23b45309' fill-opacity='0.4'%3EPREVIOUS RUN - OUT OF DATE%3C/text%3E%3C/svg%3E");
}

/* Below the panel's natural width the authored grid can no longer fit, so the
   cells flow one prompt/control pair per line and the control takes the
   remaining width. Placement is dropped here, which is why --spg-row and
   --spg-col are custom properties rather than inline grid-row / grid-column. */
@media (max-width: 991.98px) {
    .ssrs-param-grid[b-bp0mhg0vr4] {
        grid-template-columns: max-content minmax(0, 1fr);
    }

    .ssrs-param-grid .spg-label[b-bp0mhg0vr4],
    .ssrs-param-grid .spg-field[b-bp0mhg0vr4] {
        grid-row: auto;
        grid-column: auto;
    }

    .ssrs-param-grid .spg-control[b-bp0mhg0vr4] {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .ssrs-param-grid[b-bp0mhg0vr4] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ssrs-param-grid .spg-label[b-bp0mhg0vr4] {
        margin-bottom: -0.25rem;
    }
}
/* /Components/Shared/StatusMessage.razor.rz.scp.css */
/* Colours come from Spruko theme variables (styles.css) rather than literals,
   so the card follows the user's theme. Two of those variables need help
   though, and the dark block at the bottom of this file supplies it:

   --default-text-color, --default-border, --default-background and
   --text-muted are all redefined under [data-theme-mode="dark"] in styles.css
   and can be used as-is.

   --primary-rgb, --info-rgb, --warning-rgb and --danger-rgb are NOT: all four
   are declared only in :root. --warning-rgb (255,151,3) and --danger-rgb
   (251,78,88) are bright enough to survive on a dark card, but --info-rgb
   (#1E3EAF) and --primary-rgb (#474796) are deep blues that land at roughly
   1.3:1 against the dark card background — effectively invisible, and info is
   the tone the 404 page uses. app.css already carries the same fix for
   .text-info; this repeats it for the icon badge. */

.cas-status[b-pn9cph92u9] {
    display: flex;
    justify-content: center;
    /* Not 100vh: this renders inside MainLayout's .main-content, which
       already sits below the header. A viewport-height min would push the
       card below the fold on a laptop. */
    padding: 2.5rem 1rem;
}

.cas-status__card[b-pn9cph92u9] {
    width: 100%;
    max-width: 34rem;
    margin-bottom: 0;
}

.cas-status__icon[b-pn9cph92u9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
}

.cas-status__icon--warning[b-pn9cph92u9] {
    background-color: rgba(var(--warning-rgb), 0.12);
    color: rgb(var(--warning-rgb));
}

.cas-status__icon--danger[b-pn9cph92u9] {
    background-color: rgba(var(--danger-rgb), 0.12);
    color: rgb(var(--danger-rgb));
}

.cas-status__icon--info[b-pn9cph92u9] {
    background-color: rgba(var(--info-rgb), 0.12);
    color: rgb(var(--info-rgb));
}

.cas-status__icon--neutral[b-pn9cph92u9] {
    background-color: rgba(var(--primary-rgb), 0.12);
    color: rgb(var(--primary-rgb));
}

.cas-status__title[b-pn9cph92u9] {
    margin-bottom: 0.5rem;
    color: var(--default-text-color);
    font-weight: 600;
}

.cas-status__message[b-pn9cph92u9] {
    margin-bottom: 0;
}

.cas-status__detail[b-pn9cph92u9] {
    margin-top: 1rem;
    margin-bottom: 0;
    /* A long unbroken URL must wrap rather than widen the card and force the
       whole page into a horizontal scroll. */
    word-break: break-all;
}

.cas-status__detail code[b-pn9cph92u9] {
    display: inline-block;
    max-width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--default-border);
    border-radius: 0.3rem;
    background-color: var(--default-background);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.cas-status__actions[b-pn9cph92u9] {
    margin-top: 1.75rem;
}

/* Dark mode. Scoped CSS appends the scope attribute to the LAST element in a
   selector, so these compile to
   [data-theme-mode="dark"] .cas-status__icon--info[b-xxxxxxxxxx] — the theme
   attribute sits on <html>, well outside this component, and still matches. */
[data-theme-mode="dark"] .cas-status__icon--info[b-pn9cph92u9] {
    /* Same lightened blue app.css already uses for .text-info in dark mode. */
    background-color: rgba(73, 182, 245, 0.14);
    color: #49b6f5;
}

[data-theme-mode="dark"] .cas-status__icon--neutral[b-pn9cph92u9] {
    /* --primary-rgb is a deep indigo that disappears on the dark card, and
       there is no lightened primary to borrow, so the neutral badge drops to
       the theme's own foreground instead of inventing a colour. */
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--default-text-color);
}