/* /Components/Admin/Dashboard.razor.rz.scp.css */
/* Rows are spaced by the cards' own bottom margin, so the gap is between columns only. */
.stat-grid[b-tf827tpxgp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
}

.actions[b-tf827tpxgp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

@media (max-width: 800px) {
    .stat-grid[b-tf827tpxgp] {
        column-gap: var(--space-3);
    }
}

@media (max-width: 480px) {
    .stat-grid[b-tf827tpxgp] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Admin/Review.razor.rz.scp.css */
.review-effective-date[b-8ft0h0b8se] {
    margin: var(--space-3) 0 var(--space-1);
}

.review-legend[b-8ft0h0b8se] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-3);
}

/* The warnings of Metals not in the file and lines that will print under OTHER, above the table they are about. */
.review-warning[b-8ft0h0b8se] {
    margin-top: var(--space-4);
}

.review-uncategorised-lines[b-8ft0h0b8se] {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
    font-weight: normal;
    overflow-wrap: anywhere;
}

.review-badges[b-8ft0h0b8se] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* A long file name wraps rather than widening the page on a phone. */
.review-upload[b-8ft0h0b8se] {
    overflow-wrap: anywhere;
}

/* Publish sits under the table, held at the bottom of the screen while the table
   scrolls past it, so it is in reach from any row; a refusal reads beside it, and the
   button goes full-width on a phone as every button does. The bar reaches the card's
   edges and takes its bottom corners, so it ends the card when the table runs out. */
.review-publish[b-8ft0h0b8se] {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
    padding: var(--space-3) var(--card-padding);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background: var(--white);
    box-shadow: var(--shadow-sticky-bottom);
}

.review-publish[b-8ft0h0b8se]  .app-form-message {
    flex: 1 1 auto;
}

/* The Publish Email's Body and its preview: side by side on a desktop, so each edit is
   seen at once, and the preview under the editor from a tablet down. */
.review-email-compose[b-8ft0h0b8se] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

/* Side by side, Body's label row holds the Insert field button: Preview's is made as
   tall, so the editor and the preview start level. */
.review-email-compose[b-8ft0h0b8se]  .app-form-field-label,
.review-email-compose[b-8ft0h0b8se]  .app-html-preview-label {
    display: flex;
    align-items: center;
    min-height: 32px;
}

@media (max-width: 800px) {
    .review-email-compose[b-8ft0h0b8se] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* What the dialog asks for first: a test before Publish and Send (ADR 0017). */
.review-test-hint[b-8ft0h0b8se] {
    margin: 0;
}
/* /Components/Admin/StaffPriceLists.razor.rz.scp.css */
/* A Staff member's price lists as badges, wrapping on a narrow cell. */
.price-lists[b-e13511p0hl] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Edit and Delete side by side; on a phone each goes full-width, one under the other. */
.row-actions[b-e13511p0hl] {
    display: flex;
    gap: var(--space-2);
}

@media (max-width: 480px) {
    .row-actions[b-e13511p0hl] {
        flex-direction: column;
    }
}
/* /Components/Auth/AccessDenied.razor.rz.scp.css */
.explanation[b-pg4n6oyi90] {
    color: var(--muted);
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-4);
}
/* /Components/Auth/Login.razor.rz.scp.css */
.subtitle[b-mut2074yro] {
    color: var(--muted);
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-6);
}

.failure[b-mut2074yro] {
    margin-bottom: var(--space-4);
}

/* The mockup's 48px button: one step of the spacing scale above the touch target. */
.microsoft-button[b-mut2074yro] {
    width: 100%;
    min-height: calc(var(--touch-target) + var(--space-1));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    border: 1px solid var(--line-emphasis);
    border-radius: var(--radius-control);
    background: var(--white);
    color: var(--ink);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    cursor: pointer;
}

.microsoft-button:hover[b-mut2074yro] {
    background: var(--bg);
}

.microsoft-button:focus-visible[b-mut2074yro] {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* The four-square Microsoft logo; its size and gaps are Microsoft's, not our scale. */
.microsoft-mark[b-mut2074yro] {
    width: 18px;
    height: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.microsoft-mark i[b-mut2074yro] {
    display: block;
}

.microsoft-mark .square-red[b-mut2074yro] {
    background: var(--microsoft-red);
}

.microsoft-mark .square-green[b-mut2074yro] {
    background: var(--microsoft-green);
}

.microsoft-mark .square-blue[b-mut2074yro] {
    background: var(--microsoft-blue);
}

.microsoft-mark .square-yellow[b-mut2074yro] {
    background: var(--microsoft-yellow);
}

.note[b-mut2074yro] {
    font-size: var(--font-size-sm);
    color: var(--muted);
    margin: var(--space-4) 0 0;
}
/* /Components/Auth/NoAccess.razor.rz.scp.css */
.heading[b-x4ebvvq0nc] {
    font-size: var(--font-size-h2);
    margin: var(--space-4) 0 var(--space-2);
}

.explanation[b-x4ebvvq0nc] {
    color: var(--muted);
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-5);
    overflow-wrap: anywhere;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-screen[b-mc4txam6tb] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--bg);
}

.auth-card[b-mc4txam6tb] {
    width: min(var(--auth-card-width), 100%);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    box-shadow: var(--shadow-raised);
    text-align: center;
}

.wordmark[b-mc4txam6tb] {
    font-weight: var(--font-weight-heavy);
    font-size: var(--font-size-wordmark);
    color: var(--green-dark);
    margin-bottom: var(--space-2);
}

@media (max-width: 480px) {
    .auth-screen[b-mc4txam6tb] {
        padding: var(--space-4);
    }

    .auth-card[b-mc4txam6tb] {
        padding: var(--space-6) var(--space-5);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app[b-4bhb49u1r0] {
    min-height: 100vh;
    display: flex;
}

/* min-width: 0 lets the page shrink beside the sidebar instead of overflowing it. */
.main[b-4bhb49u1r0] {
    flex: 1;
    min-width: 0;
}

.content[b-4bhb49u1r0] {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-6);
}

@media (max-width: 800px) {
    .app[b-4bhb49u1r0] {
        display: block;
    }

    .content[b-4bhb49u1r0] {
        padding: var(--space-4) var(--space-3);
    }
}

@media (max-width: 480px) {
    .content[b-4bhb49u1r0] {
        padding: var(--space-3) var(--space-2);
    }
}

#blazor-error-ui[b-4bhb49u1r0] {
    color-scheme: light only;
    background: var(--price-down2);
    color: var(--price-down);
    bottom: 0;
    box-shadow: var(--shadow-raised);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-3) var(--space-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4bhb49u1r0] {
        cursor: pointer;
        position: absolute;
        right: var(--space-3);
        top: var(--space-2);
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-faflv2hu76],
.components-reconnect-repeated-attempt-visible[b-faflv2hu76],
.components-reconnect-failed-visible[b-faflv2hu76],
.components-pause-visible[b-faflv2hu76],
.components-resume-failed-visible[b-faflv2hu76],
.components-rejoining-animation[b-faflv2hu76] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-retrying[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-failed[b-faflv2hu76],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-faflv2hu76] {
    display: block;
}


#components-reconnect-modal[b-faflv2hu76] {
    background-color: var(--white);
    width: 20rem;
    margin: 20vh auto;
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-faflv2hu76 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-faflv2hu76 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-faflv2hu76 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-faflv2hu76]::backdrop {
    background-color: var(--overlay);
    animation: components-reconnect-modal-fadeInOpacity-b-faflv2hu76 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-faflv2hu76 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-faflv2hu76] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

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

#components-reconnect-modal button[b-faflv2hu76] {
    border: 0;
    background-color: var(--green);
    color: var(--white);
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-control);
}

    #components-reconnect-modal button:hover[b-faflv2hu76] {
        background-color: var(--green-hover);
    }

    #components-reconnect-modal button:active[b-faflv2hu76] {
        background-color: var(--green);
    }

.components-rejoining-animation[b-faflv2hu76] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-faflv2hu76] {
        position: absolute;
        border: 3px solid var(--green);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-faflv2hu76 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-faflv2hu76] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-faflv2hu76 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/PriceHistory/PriceHistoryPage.razor.rz.scp.css */
/* The Current badge sits beside the version number, wrapping under it if it must. */
.version[b-ps8swj1g50] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
/* /Components/PriceHistory/PriceListVersionContent.razor.rz.scp.css */
/* The Region, the search and Download in one row on a wide screen, stacked on a phone,
   where Download goes full-width. Aligned on their inputs, because the search's label
   is visually hidden. */
.filters[b-t1a0c4aqf4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* The search field carries its own bottom margin for when it stands alone. */
.filters[b-t1a0c4aqf4]  .app-search-field {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .filters[b-t1a0c4aqf4] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The warning to a Staff member granted none of the version's price lists, above the filters. */
.no-access[b-t1a0c4aqf4] {
    margin-bottom: var(--space-3);
}
/* /Components/Shared/AppAlert.razor.rz.scp.css */
/* The tinted alert of the Form Feedback rules, in the page flow rather than floating. */
.app-alert[b-k48ef6kxae] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-control);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-align: left;
}

.app-alert.success[b-k48ef6kxae] {
    background: var(--green2);
    border-color: var(--green-border);
    color: var(--green-dark);
}

.app-alert.error[b-k48ef6kxae] {
    background: var(--price-down2);
    border-color: var(--price-down);
    color: var(--price-down);
}

.app-alert.warning[b-k48ef6kxae] {
    background: var(--warning2);
    border-color: var(--warning);
    color: var(--warning);
}

.app-alert-icon[b-k48ef6kxae] {
    flex: none;
    margin-top: 2px;
}

/* The disc takes the status colour; the mark inside it is cut out in the surface. */
.app-alert-icon circle[b-k48ef6kxae] {
    fill: currentColor;
}

.app-alert-icon path[b-k48ef6kxae] {
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-alert.success .app-alert-icon[b-k48ef6kxae] {
    color: var(--green);
}
/* /Components/Shared/AppBadge.razor.rz.scp.css */
.app-badge[b-y95uc1c970] {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.app-badge-success[b-y95uc1c970] {
    background: var(--green2);
    color: var(--green);
}

.app-badge-neutral[b-y95uc1c970] {
    background: var(--neutral2);
    color: var(--muted);
}

.app-badge-danger[b-y95uc1c970] {
    background: var(--price-down2);
    color: var(--price-down);
}

.app-badge-warning[b-y95uc1c970] {
    background: var(--warning2);
    color: var(--warning);
}
/* /Components/Shared/AppButton.razor.rz.scp.css */
.app-button[b-op1g6lvd69] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    padding: 0 var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    cursor: pointer;
    /* A label never wraps: a narrow table column broke "Edit" across two lines. */
    white-space: nowrap;
}

.secondary[b-op1g6lvd69] {
    background: var(--white);
    color: var(--ink);
}

.secondary:hover:not(:disabled, [aria-disabled="true"])[b-op1g6lvd69] {
    background: var(--bg);
}

.primary[b-op1g6lvd69] {
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
}

.primary:hover:not(:disabled, [aria-disabled="true"])[b-op1g6lvd69] {
    background: var(--green-hover);
    border-color: var(--green-hover);
}

/* Faded as a whole, so a primary button's label stays readable on its green. A busy
   link is aria-disabled, links having no disabled. */
.app-button:disabled[b-op1g6lvd69],
.app-button[aria-disabled="true"][b-op1g6lvd69] {
    opacity: var(--opacity-disabled);
    cursor: default;
}

.compact[b-op1g6lvd69] {
    padding: 0 var(--space-3);
}

.full-width[b-op1g6lvd69] {
    width: 100%;
}

@media (max-width: 480px) {
    .app-button:not(.compact)[b-op1g6lvd69] {
        width: 100%;
    }
}
/* /Components/Shared/AppCard.razor.rz.scp.css */
/* --card-padding is inherited by what the card holds, so content that reaches out to
   the card's edges, such as Review's Publish bar, follows the padding at every width. */
.app-card[b-ctz148exf9] {
    --card-padding: var(--space-5);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--card-padding);
    margin-bottom: var(--space-4);
    min-width: 0;
}

@media (max-width: 800px) {
    .app-card[b-ctz148exf9] {
        --card-padding: var(--space-4);
        margin-bottom: var(--space-3);
    }
}
/* /Components/Shared/AppCheckbox.razor.rz.scp.css */
/* The whole row answers a tap, at least a touch target high. */
.app-checkbox[b-bd6bt5uagl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg);
    color: var(--ink);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.app-checkbox:has(input:checked)[b-bd6bt5uagl] {
    border-color: var(--green-border);
    background: var(--green2);
}

.app-checkbox input[b-bd6bt5uagl] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--green);
    cursor: pointer;
}
/* /Components/Shared/AppCheckboxGroup.razor.rz.scp.css */
/* A field like AppFormField, its label a legend: fieldsets carry a border and padding of
   their own, which are taken off so it lines up with the other fields. */
.app-checkbox-group[b-8saz31hjcz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.app-checkbox-group-label[b-8saz31hjcz] {
    padding: 0;
    margin-bottom: var(--space-1);
    color: var(--muted);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

.app-checkbox-group-hint[b-8saz31hjcz],
.app-checkbox-group-message[b-8saz31hjcz] {
    margin: 0;
    font-size: var(--font-size-sm);
}

.app-checkbox-group-hint[b-8saz31hjcz] {
    color: var(--muted);
}

.app-checkbox-group-message[b-8saz31hjcz] {
    color: var(--price-down);
}

/* As many columns as fit, each wide enough for "Regional Master"; one on a phone. */
.app-checkbox-group-options[b-8saz31hjcz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--space-2);
}

@media (max-width: 480px) {
    .app-checkbox-group-options[b-8saz31hjcz] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Shared/AppDialog.razor.rz.scp.css */
.app-dialog-overlay[b-icx8ztecmn] {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    overflow-y: auto;
    background: var(--overlay);
}

.app-dialog[b-icx8ztecmn] {
    width: 100%;
    max-width: var(--dialog-max-width);
    margin: auto 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-modal);
}

.app-dialog-wide[b-icx8ztecmn] {
    max-width: var(--dialog-max-width-wide);
}

.app-dialog:focus[b-icx8ztecmn] {
    outline: none;
}

/* The content's own card is the surface, so its gap below a card on a page goes. */
.app-dialog[b-icx8ztecmn]  .app-card {
    margin-bottom: 0;
}

.app-dialog-sentinel[b-icx8ztecmn] {
    width: 0;
    height: 0;
    overflow: hidden;
}

/* A phone gets the whole screen: no overlay around it and no rounded corners. */
@media (max-width: 480px) {
    .app-dialog-overlay[b-icx8ztecmn] {
        padding: 0;
    }

    .app-dialog[b-icx8ztecmn] {
        min-height: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .app-dialog[b-icx8ztecmn]  .app-card {
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
}
/* /Components/Shared/AppFileInput.razor.rz.scp.css */
/* InputFile is a component of its own, so its input is reached through ::deep. It is
   exactly as tall as AppTextField, so the two line up side by side in a form. */
.app-file-input[b-s206c8jeq8]  input[type="file"] {
    display: block;
    width: 100%;
    height: var(--touch-target);
    /* The same space above and below the Choose File button as beside it, so the
       button sits centred in the field: the browser draws it from the top. */
    padding: var(--space-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
    color: var(--ink);
    font-size: var(--font-size-input);
}

.app-file-input[b-s206c8jeq8]  input[type="file"]:focus {
    outline: 2px solid var(--green);
    outline-offset: -1px;
}

.app-file-input[b-s206c8jeq8]  input[type="file"]::file-selector-button {
    height: 100%;
    margin: 0 var(--space-3) 0 0;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--surface-muted);
    color: var(--ink);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.app-file-input.has-error[b-s206c8jeq8]  input[type="file"] {
    border-color: var(--price-down);
}
/* /Components/Shared/AppFormCard.razor.rz.scp.css */
.app-form-card[b-34gxty8xyh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.app-form-card-header p[b-34gxty8xyh] {
    margin: 0;
}

/* Focused from code to bring the form into view, which needs no visible ring. */
.app-form-card-header h2:focus[b-34gxty8xyh] {
    outline: none;
}

.app-form-card-fields[b-34gxty8xyh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

/* A field that should take the whole row, such as a description. */
.app-form-card-fields[b-34gxty8xyh]  .app-form-card-wide {
    grid-column: 1 / -1;
}

/* A refusal of the whole form on the left, the buttons at the end: Cancel, then the
   action. */
.app-form-card-footer[b-34gxty8xyh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.app-form-card-footer[b-34gxty8xyh]  .app-form-message {
    flex: 1 1 auto;
}

.app-form-card-actions[b-34gxty8xyh] {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

@media (max-width: 800px) {
    .app-form-card-fields[b-34gxty8xyh] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* On a phone the buttons stack full-width, the action last, nearest the thumb. */
@media (max-width: 480px) {
    .app-form-card-actions[b-34gxty8xyh] {
        flex-direction: column;
        width: 100%;
    }
}
/* /Components/Shared/AppFormField.razor.rz.scp.css */
.app-form-field[b-59ysb0r305] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.app-form-field-label[b-59ysb0r305] {
    color: var(--muted);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

.app-form-field-hint[b-59ysb0r305],
.app-form-field-message[b-59ysb0r305] {
    margin: 0;
    font-size: var(--font-size-sm);
}

.app-form-field-hint[b-59ysb0r305] {
    color: var(--muted);
}

.app-form-field-message[b-59ysb0r305] {
    color: var(--price-down);
}

.app-form-field-head[b-59ysb0r305] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
/* /Components/Shared/AppFormMessage.razor.rz.scp.css */
.app-form-message[b-j2t0vjzyyv] {
    min-width: 0;
}

.app-form-message:empty[b-j2t0vjzyyv] {
    display: none;
}

/* A refusal of several paragraphs keeps the blank lines between them. */
.app-form-message-text[b-j2t0vjzyyv] {
    white-space: pre-line;
}
/* /Components/Shared/AppHtmlPreview.razor.rz.scp.css */
.app-html-preview[b-43147rgzyv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

/* Reads as a form field's label, though there is nothing to type into. */
.app-html-preview-label[b-43147rgzyv] {
    margin: 0;
    color: var(--muted);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

.app-html-preview-frame[b-43147rgzyv] {
    flex: 1 1 auto;
    width: 100%;
    min-height: var(--email-preview-min-height);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--bg);
}
/* /Components/Shared/AppInsertMenu.razor.rz.scp.css */
.app-insert-menu[b-ccugya56q9] {
    position: relative;
}

/* Quiet beside a field's label: a small outlined button, taller where it is tapped. */
.app-insert-menu-toggle[b-ccugya56q9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.app-insert-menu-toggle:hover[b-ccugya56q9],
.app-insert-menu-toggle[aria-expanded="true"][b-ccugya56q9] {
    border-color: var(--green);
    background: var(--green2);
}

.app-insert-menu-braces[b-ccugya56q9] {
    color: var(--green);
    font-weight: var(--font-weight-bold);
}

.app-insert-menu-toggle svg[b-ccugya56q9] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.app-insert-menu-backdrop[b-ccugya56q9] {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.app-insert-menu-list[b-ccugya56q9] {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 2;
    min-width: max-content;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    background: var(--white);
    box-shadow: var(--shadow-raised);
}

.app-insert-menu-list button[b-ccugya56q9] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: var(--font-size-md);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.app-insert-menu-list button:hover[b-ccugya56q9],
.app-insert-menu-list button:focus-visible[b-ccugya56q9] {
    background: var(--green2);
    outline: none;
}

.app-insert-menu-list code[b-ccugya56q9] {
    color: var(--muted);
    font-size: var(--font-size-xs);
}

/* Touch: every target 44px, and the placeholder text left out to fit a phone. */
@media (pointer: coarse), (max-width: 800px) {
    .app-insert-menu-toggle[b-ccugya56q9],
    .app-insert-menu-list button[b-ccugya56q9] {
        min-height: var(--touch-target);
    }

    .app-insert-menu-list code[b-ccugya56q9] {
        display: none;
    }
}
/* /Components/Shared/AppPager.razor.rz.scp.css */
.app-pager[b-glb1v5rzpc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.app-pager-summary[b-glb1v5rzpc] {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-md);
}

.app-pager-controls[b-glb1v5rzpc],
.app-pager-pages[b-glb1v5rzpc] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* At least square, so a one-digit page number is still a full touch target. */
.app-pager-controls[b-glb1v5rzpc]  .app-button {
    min-width: var(--touch-target);
}

.app-pager-gap[b-glb1v5rzpc] {
    padding: 0 var(--space-1);
    color: var(--muted);
}

.app-pager-condensed[b-glb1v5rzpc] {
    display: none;
}

/* A phone keeps only Previous, "Page x of y" and Next, with the buttons sharing the
   width so they are easy to hit with a thumb. */
@media (max-width: 480px) {
    .app-pager-summary[b-glb1v5rzpc],
    .app-pager-pages[b-glb1v5rzpc] {
        display: none;
    }

    .app-pager-controls[b-glb1v5rzpc] {
        width: 100%;
        gap: var(--space-2);
    }

    .app-pager-controls[b-glb1v5rzpc]  .app-button {
        flex: 1;
    }

    .app-pager-condensed[b-glb1v5rzpc] {
        display: block;
        color: var(--muted);
        font-size: var(--font-size-md);
        white-space: nowrap;
    }
}
/* /Components/Shared/AppPriceChange.razor.rz.scp.css */
.app-price-change[b-xa7syc5pfb] {
    font-weight: var(--font-weight-heavy);
    white-space: nowrap;
}

.app-price-change-up[b-xa7syc5pfb] {
    color: var(--price-rise);
}

.app-price-change-down[b-xa7syc5pfb] {
    color: var(--price-fall);
}

.app-price-change-none[b-xa7syc5pfb] {
    color: var(--muted);
}
/* /Components/Shared/AppRichTextEditor.razor.rz.scp.css */
/* Quill's snow theme, redrawn from the tokens: the toolbar and writing area look like
   the portal's other form controls, and every toolbar button is a full touch target. */
/* Grows to the height its field is given, such as a preview's beside it. */
.app-rich-text-editor[b-xl0ljlfpm3] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
}

.app-rich-text-editor.has-error[b-xl0ljlfpm3] {
    border-color: var(--price-down);
}

.app-rich-text-editor:focus-within[b-xl0ljlfpm3] {
    outline: 2px solid var(--green);
    outline-offset: -1px;
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-family);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-toolbar.ql-snow .ql-formats {
    display: inline-flex;
    margin-right: var(--space-2);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-toolbar.ql-snow button {
    width: var(--touch-target);
    height: var(--touch-target);
    padding: var(--space-3);
    border-radius: var(--radius-control);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-toolbar.ql-snow button:focus-visible {
    outline: 2px solid var(--green);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow .ql-stroke {
    stroke: var(--ink);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow .ql-fill {
    fill: var(--ink);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow.ql-toolbar button:hover,
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow.ql-toolbar button.ql-active {
    background: var(--green2);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow.ql-toolbar button:hover .ql-stroke,
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--green);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow.ql-toolbar button:hover .ql-fill,
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--green);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-container.ql-snow {
    flex: 1 1 auto;
    border: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-input);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-editor {
    min-height: var(--rich-text-min-height);
    padding: var(--space-3);
    color: var(--ink);
    line-height: var(--line-height);
    overflow-wrap: anywhere;
}

/* Blocks spaced as an email client spaces them, so the writing reads like the email. */
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-editor p,
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-editor ol,
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-editor h3 {
    margin: 0 0 var(--space-3);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-editor h3 {
    font-size: var(--font-size-h3);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow a {
    color: var(--green);
}

/* The box for a link's address. */
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow .ql-tooltip {
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
    box-shadow: var(--shadow-raised);
    color: var(--ink);
    font-family: var(--font-family);
    white-space: normal;
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow .ql-tooltip input[type="text"] {
    max-width: 100%;
    height: var(--touch-target);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    font-size: var(--font-size-input);
}

.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow .ql-tooltip a.ql-action,
.app-rich-text-editor[b-xl0ljlfpm3]  .ql-snow .ql-tooltip a.ql-remove {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
}
/* /Components/Shared/AppSearchField.razor.rz.scp.css */
.app-search-field[b-8ynk65hmfg] {
    display: block;
    margin-bottom: var(--space-3);
}

.app-search-field input[b-8ynk65hmfg] {
    width: 100%;
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
    font-size: var(--font-size-input);
}

.app-search-field input:focus[b-8ynk65hmfg] {
    outline: 2px solid var(--green);
    outline-offset: -1px;
}
/* /Components/Shared/AppSelect.razor.rz.scp.css */
.app-select[b-gp71kbnmva] {
    width: 100%;
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
    color: var(--ink);
    font-size: var(--font-size-input);
}

.app-select:focus[b-gp71kbnmva] {
    outline: 2px solid var(--green);
    outline-offset: -1px;
}

.app-select.has-error[b-gp71kbnmva] {
    border-color: var(--price-down);
}
/* /Components/Shared/AppSidebar.razor.rz.scp.css */
.sidebar[b-nyb2mj5slo] {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--green-dark);
    color: var(--white);
    padding: var(--space-5) var(--space-3);
}

.wordmark[b-nyb2mj5slo] {
    font-weight: var(--font-weight-heavy);
    font-size: var(--font-size-sidebar-wordmark);
    padding: var(--space-2) var(--space-3) var(--space-5);
}

/* As a link home it keeps the wordmark's look, and stays a full touch target. */
a.wordmark[b-nyb2mj5slo] {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    color: inherit;
    text-decoration: none;
}

a.wordmark:focus-visible[b-nyb2mj5slo] {
    outline: 2px solid var(--white);
    outline-offset: -2px;
    border-radius: var(--radius-control);
}

.section-label[b-nyb2mj5slo] {
    font-size: var(--font-size-xs);
    color: var(--nav-label);
    padding: 0 var(--space-3) var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
}

.items[b-nyb2mj5slo] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* NavLink is a child component, so its anchor is reached through ::deep. */
.items[b-nyb2mj5slo]  .item {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: 0 var(--space-3);
    margin: var(--space-1) 0;
    border-radius: var(--radius-control);
    color: var(--nav-text);
    text-decoration: none;
}

.items[b-nyb2mj5slo]  .item:hover,
.items[b-nyb2mj5slo]  .item:focus-visible,
.items[b-nyb2mj5slo]  .item.active {
    background: var(--green-hover);
    color: var(--white);
}

@media (max-width: 800px) {
    .sidebar[b-nyb2mj5slo] {
        width: 100%;
        flex: none;
        padding: var(--space-3);
    }

    .wordmark[b-nyb2mj5slo] {
        font-size: var(--font-size-sidebar-wordmark-compact);
        padding: var(--space-1) var(--space-1) var(--space-2);
    }

    /* A bar of links has no room for a heading; the items speak for themselves. */
    .section-label[b-nyb2mj5slo] {
        display: none;
    }

    .items[b-nyb2mj5slo] {
        display: flex;
        gap: var(--space-2);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .items[b-nyb2mj5slo]::-webkit-scrollbar {
        display: none;
    }

    .items li[b-nyb2mj5slo] {
        flex: 0 0 auto;
    }

    .items[b-nyb2mj5slo]  .item {
        margin: 0;
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }
}

/* The Menu button exists for a phone only. */
.menu-toggle[b-nyb2mj5slo],
.menu-button[b-nyb2mj5slo] {
    display: none;
}

/* On a phone the bar of links would run off the screen, so it folds behind a Menu
   button beside the wordmark and opens as a list, one full-width item per row. */
@media (max-width: 480px) {
    .sidebar-head[b-nyb2mj5slo] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
    }

    .wordmark[b-nyb2mj5slo] {
        padding: 0 var(--space-1);
    }

    /* Out of sight but still in the tab order; its label is what is seen. */
    .menu-toggle[b-nyb2mj5slo] {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        opacity: 0;
    }

    .menu-button[b-nyb2mj5slo] {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-height: var(--touch-target);
        padding: 0 var(--space-3);
        border: 1px solid var(--green-hover);
        border-radius: var(--radius-control);
        color: var(--white);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        cursor: pointer;
    }

    .menu-toggle:focus-visible + .menu-button[b-nyb2mj5slo] {
        outline: 2px solid var(--white);
        outline-offset: 2px;
    }

    .menu-toggle:checked + .menu-button[b-nyb2mj5slo] {
        background: var(--green-hover);
    }

    /* Three bars: the middle one, and one drawn above and below it. */
    .menu-icon[b-nyb2mj5slo],
    .menu-icon[b-nyb2mj5slo]::before,
    .menu-icon[b-nyb2mj5slo]::after {
        display: block;
        width: var(--menu-icon-width);
        height: var(--menu-icon-bar);
        border-radius: var(--radius-pill);
        background: currentColor;
    }

    .menu-icon[b-nyb2mj5slo] {
        position: relative;
    }

    .menu-icon[b-nyb2mj5slo]::before,
    .menu-icon[b-nyb2mj5slo]::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .menu-icon[b-nyb2mj5slo]::before {
        top: calc(-3 * var(--menu-icon-bar));
    }

    .menu-icon[b-nyb2mj5slo]::after {
        top: calc(3 * var(--menu-icon-bar));
    }

    .items[b-nyb2mj5slo] {
        display: none;
        flex-direction: column;
        gap: 0;
        margin-top: var(--space-2);
        overflow-x: visible;
    }

    .sidebar:has(.menu-toggle:checked) .items[b-nyb2mj5slo] {
        display: flex;
    }

    .items[b-nyb2mj5slo]  .item {
        margin: var(--space-1) 0;
        font-size: var(--font-size-md);
    }
}
/* /Components/Shared/AppSpinner.razor.rz.scp.css */
.app-spinner[b-uwit7lnjmw] {
    display: inline-block;
    flex: none;
    width: var(--spinner-size);
    height: var(--spinner-size);
    border: var(--spinner-stroke) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-pill);
    animation: app-spin-b-uwit7lnjmw var(--spinner-duration) linear infinite;
}

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

/* Still turning, so it still reads as busy, but slowly. */
@media (prefers-reduced-motion: reduce) {
    .app-spinner[b-uwit7lnjmw] {
        animation-duration: calc(var(--spinner-duration) * 4);
    }
}
/* /Components/Shared/AppStatCard.razor.rz.scp.css */
.stat-label[b-u9brk1gtk1],
.stat-empty[b-u9brk1gtk1] {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-md);
}

.stat-value[b-u9brk1gtk1] {
    margin: var(--space-2) 0;
    font-size: var(--font-size-stat);
    font-weight: var(--font-weight-heavy);
}

.stat-empty[b-u9brk1gtk1] {
    margin-bottom: var(--space-3);
}

@media (max-width: 800px) {
    .stat-value[b-u9brk1gtk1] {
        font-size: var(--font-size-stat-compact);
    }
}
/* /Components/Shared/AppTable.razor.rz.scp.css */
.app-table[b-0gut5dxoj5] {
    width: 100%;
    border-collapse: collapse;
}

th[b-0gut5dxoj5] {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    color: var(--muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

th.numeric[b-0gut5dxoj5] {
    text-align: right;
}

.app-table-loading-row td[b-0gut5dxoj5] {
    padding: var(--space-5);
    text-align: center;
}

.app-table-loading[b-0gut5dxoj5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--font-size-md);
    /* Hidden for the first moment: inside the circuit the rows usually follow within a
       frame or two, and a spinner shown for that long reads as a flicker. */
    animation: app-table-loading-reveal-b-0gut5dxoj5 0s var(--loading-reveal-delay) both;
}

@keyframes app-table-loading-reveal-b-0gut5dxoj5 {
    from {
        visibility: hidden;
    }

    to {
        visibility: visible;
    }
}

.app-table-empty[b-0gut5dxoj5] {
    margin: 0;
    padding: var(--space-5);
    text-align: center;
    color: var(--muted);
    font-size: var(--font-size-md);
}

/* A phone gets one card per row rather than a table to scroll sideways; each cell
   shows its own label (see AppTableCell). */
@media (max-width: 480px) {
    .app-table[b-0gut5dxoj5],
    tbody[b-0gut5dxoj5],
    tr[b-0gut5dxoj5] {
        display: block;
        width: 100%;
    }

    thead[b-0gut5dxoj5] {
        display: none;
    }

    .app-table-loading-row td[b-0gut5dxoj5] {
        display: block;
    }

    tbody tr[b-0gut5dxoj5] {
        padding: var(--space-3);
        margin-bottom: var(--space-2);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--white);
    }

    tbody tr:last-child[b-0gut5dxoj5] {
        margin-bottom: 0;
    }
}
/* /Components/Shared/AppTableCell.razor.rz.scp.css */
td[b-cxfifl6v9s] {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    font-size: var(--font-size-md);
    overflow-wrap: anywhere;
    vertical-align: top;
}

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

/* As narrow as its content: the text columns take the space that is left. */
td.fit[b-cxfifl6v9s] {
    width: 1%;
    white-space: nowrap;
}

@media (max-width: 480px) {
    td[b-cxfifl6v9s] {
        display: block;
        width: 100%;
        padding: var(--space-1) 0;
        border: 0;
    }

    /* A stacked card is one column wide, so a fitted cell stops fitting here and its
       control goes full-width like every other control on a phone. */
    td.fit[b-cxfifl6v9s] {
        width: 100%;
        white-space: normal;
    }

    /* A cell with nothing in it, such as an optional value a row has not been given,
       would only leave its label above a blank line in the card. */
    td:empty[b-cxfifl6v9s] {
        display: none;
    }

    /* Under its own label in a card, an amount reads from the left like the rest. */
    td.numeric[b-cxfifl6v9s] {
        text-align: left;
    }

    td[b-cxfifl6v9s]::before {
        content: attr(data-label);
        display: block;
        color: var(--muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
    }
}
/* /Components/Shared/AppTextArea.razor.rz.scp.css */
.app-text-area[b-qncmtbxnh5] {
    width: 100%;
    min-height: var(--touch-target);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
    font-size: var(--font-size-input);
    resize: vertical;
}

.app-text-area:focus[b-qncmtbxnh5] {
    outline: 2px solid var(--green);
    outline-offset: -1px;
}

.app-text-area.has-error[b-qncmtbxnh5] {
    border-color: var(--price-down);
}
/* /Components/Shared/AppTextField.razor.rz.scp.css */
.app-text-field[b-yqbit0qoz8] {
    width: 100%;
    /* Exactly the touch target, whatever the type: a date input's own controls make it
       taller otherwise, and it would not line up with AppFileInput beside it. */
    height: var(--touch-target);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
    font-size: var(--font-size-input);
}

.app-text-field:focus[b-yqbit0qoz8] {
    outline: 2px solid var(--green);
    outline-offset: -1px;
}

.app-text-field[readonly][b-yqbit0qoz8] {
    background: var(--surface-muted);
    color: var(--muted);
}

.app-text-field.has-error[b-yqbit0qoz8] {
    border-color: var(--price-down);
}
/* /Components/Shared/AppToast.razor.rz.scp.css */
.app-toast-region[b-7itzo4lciw] {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    left: auto;
    z-index: var(--z-toast);
}

/* A tinted alert rather than a dark pill, so the colour says "worked" or "did not"
   before the message is read. */
.app-toast[b-7itzo4lciw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-control);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-raised);
}

.app-toast.success[b-7itzo4lciw] {
    background: var(--green2);
    border-color: var(--green-border);
    color: var(--green-dark);
}

.app-toast.error[b-7itzo4lciw] {
    background: var(--price-down2);
    border-color: var(--price-down);
    color: var(--price-down);
}

.app-toast-icon[b-7itzo4lciw] {
    flex: none;
}

/* The disc takes the status colour; the mark inside it is cut out in the surface. */
.app-toast-icon circle[b-7itzo4lciw] {
    fill: currentColor;
}

.app-toast-icon path[b-7itzo4lciw] {
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-toast.success .app-toast-icon[b-7itzo4lciw] {
    color: var(--green);
}

@media (max-width: 480px) {
    .app-toast-region[b-7itzo4lciw] {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
    }
}
/* /Components/Shared/AppTopbar.razor.rz.scp.css */
.topbar[b-mes7of38an] {
    min-height: var(--topbar-height);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: 0 var(--space-6);
}

.user[b-mes7of38an] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.separator[b-mes7of38an] {
    color: var(--muted);
}

.name[b-mes7of38an] {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 800px) {
    .topbar[b-mes7of38an] {
        flex-wrap: wrap;
        padding: var(--space-2) var(--space-3);
    }
}

@media (max-width: 480px) {
    .user[b-mes7of38an] {
        width: 100%;
        font-size: var(--font-size-sm);
    }

    /* Sign out keeps to the end of the row, after the name. */
    .user[b-mes7of38an]  .sign-out {
        margin-left: auto;
    }
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-header[b-2jchmlzxrk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.page-header p[b-2jchmlzxrk] {
    margin: 0;
}

.page-header-actions[b-2jchmlzxrk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 480px) {
    .page-header-actions[b-2jchmlzxrk] {
        width: 100%;
    }
}

/* Tall enough to tap, and quiet beside the heading it sits above. */
.page-header-back[b-2jchmlzxrk] {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.page-header-back:hover[b-2jchmlzxrk],
.page-header-back:focus-visible[b-2jchmlzxrk] {
    text-decoration: underline;
}
/* /Components/Shared/RolePill.razor.rz.scp.css */
.role-pill[b-8n4t8983sx] {
    display: inline-block;
    background: var(--green2);
    color: var(--green);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}
/* /Components/Shared/SignOutButton.razor.rz.scp.css */
.sign-out[b-z3801me62d] {
    margin: 0;
}

/* On a phone the button goes full-width, so its form must too. */
@media (max-width: 480px) {
    .sign-out:not(.compact)[b-z3801me62d] {
        width: 100%;
    }
}