@import '_content/Benevia.Core.Blazor/Benevia.Core.Blazor.smpzcplyqd.bundle.scp.css';
@import '_content/Benevia.Core.Dashboards.Blazor/Benevia.Core.Dashboards.Blazor.zo6e66rpx9.bundle.scp.css';
@import '_content/Benevia.Core.Reports.Blazor/Benevia.Core.Reports.Blazor.vxx3u72l28.bundle.scp.css';
@import '_content/Benevia.Expenses.Blazor/Benevia.Expenses.Blazor.jkw327kyyx.bundle.scp.css';
@import '_content/Benevia.Financial.Blazor/Benevia.Financial.Blazor.jjg7pawxmh.bundle.scp.css';
@import '_content/Benevia.Payments.Blazor/Benevia.Payments.Blazor.ri1a7pn81e.bundle.scp.css';
@import '_content/Benevia.Sales.Blazor/Benevia.Sales.Blazor.ek6ndbfz9q.bundle.scp.css';
@import '_content/Blazicons/Blazicons.ugzwxlf6d1.bundle.scp.css';

/* /Components/Customers/CustomerAccountSummary.razor.rz.scp.css */
/* Account stat cards: figure-led, with a quiet eyebrow label. */
.account-card[b-l9rg5w450a] {
    border-radius: 12px;
}

.account-card__value[b-l9rg5w450a] {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
    margin-top: 1px;
    color: var(--mud-palette-text-primary);
}

/* Quiet inline line under the cards, shown only when this customer is billed through another. */
.account-billing-line[b-l9rg5w450a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.8125rem;
}

/* Tint the receivable with the brand accent only when a balance is owed. */
.account-card__value--receivable[b-l9rg5w450a] {
    color: var(--mud-palette-primary);
}
/* /Components/Customers/CustomerInvoicesTab.razor.rz.scp.css */
/* Right-push the money cells; ListView owns the cell, so it has the free space. */
.invoices-list-view[b-727g5lxr6x]  .list-view-cell:has(.money-cell) {
    justify-content: flex-end;
}

/* Column widths left to ListView's own sizing/resize; forcing them broke resize (issue #2425). */

/* Filtering is off here, so the searchbar's filter row is empty - hide it. */
.invoices-list-view[b-727g5lxr6x]  .list-view-searchbar-filter-row {
    display: none;
}
/* /Components/Customers/CustomerPaymentSettingsTab.razor.rz.scp.css */
.payment-toggles[b-9nfedwdxip] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
    margin-top: 12px;
}

.allowed-methods[b-9nfedwdxip] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 180px);
    gap: 0 16px;
    max-width: 1200px;
}
/* /Components/Customers/PaymentsTab.razor.rz.scp.css */
.payment-amount-voided[b-j7i0npbm8i] {
    text-decoration: line-through;
    opacity: 0.65;
}

/* Right-push the money cells; ListView owns the cell, so it has the free space. */
.payments-list-view[b-j7i0npbm8i]  .list-view-cell:has(.money-cell) {
    justify-content: flex-end;
}

/* Column widths left to ListView's own sizing/resize; forcing them broke resize (issue #2425). */

/* Filtering is off here, so the searchbar's filter row is empty - hide it. */
.payments-list-view[b-j7i0npbm8i]  .list-view-searchbar-filter-row {
    display: none;
}
/* /Components/DataGrid/DataGrid.razor.rz.scp.css */
.vt-toolbar[b-sgul7ynqg1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
    margin-top: 2px
}

.vt-left[b-sgul7ynqg1] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-left: 5px
}

.vt-right[b-sgul7ynqg1] {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    margin-right: 5px
}

.vt-search-wrap[b-sgul7ynqg1] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 280px;
    max-width: 420px;
    width: 32vw
}

.vt-search[b-sgul7ynqg1] {
    padding: .45rem .9rem .45rem 2.0rem;
    border: 1px solid #cfd4dc;
    border-radius: 20px;
    width: 100%;
    outline: none
}

    .vt-search:focus[b-sgul7ynqg1] {
        border-color: var(--mud-palette-primary)
    }

.vt-search-icon[b-sgul7ynqg1] {
    position: absolute;
    left: .6rem;
    color: #6b7280;
    display: inline-flex;
    align-items: center
}

.vt-search-clear[b-sgul7ynqg1] {
    position: absolute;
    right: .35rem;
    background: transparent;
    border: none;
    color: #6b7280;
    cursor: pointer;
    border-radius: 6px;
    padding: .15rem
}

    .vt-search-clear:hover[b-sgul7ynqg1] {
        background: #f1f3f5
    }

.vt-btn[b-sgul7ynqg1] {
    padding: .35rem .6rem;
    border: 1px solid var(--mud-palette-primary);
    background: #fff;
    color: var(--mud-palette-primary);
    border-radius: 6px;
    cursor: pointer
}

    .vt-btn:hover[b-sgul7ynqg1] {
        background: color-mix(in srgb,var(--mud-palette-primary) 10%,#fff)
    }

    .vt-btn.small[b-sgul7ynqg1] {
        padding: .25rem .5rem;
        font-size: .85rem
    }

    .vt-btn.link[b-sgul7ynqg1] {
        background: transparent;
        border-color: transparent;
        color: var(--mud-palette-primary)
    }

.vt-columns-menu[b-sgul7ynqg1] {
    position: absolute;
    top: 2.2rem;
    right: 0;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding: .25rem .25rem .5rem .25rem;
    min-width: 240px;
    z-index: 10
}

.vt-menu-header[b-sgul7ynqg1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .6rem;
    border-bottom: 1px solid #f0f2f5
}

.vt-menu-title[b-sgul7ynqg1] {
    font-weight: 600;
    color: #111827
}

.vt-icon-btn[b-sgul7ynqg1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    background: #fff;
    border-radius: 8px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer
}

    .vt-icon-btn:hover[b-sgul7ynqg1] {
        background: color-mix(in srgb,var(--mud-palette-primary) 10%,#fff)
    }

.vt-menu-body[b-sgul7ynqg1] {
    max-height: 50vh;
    overflow: auto;
    padding: .25rem
}

.vt-col-option[b-sgul7ynqg1] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .45rem;
    border-radius: 8px
}

    .vt-col-option:hover[b-sgul7ynqg1] {
        background: #f7f7f8
    }

.vt-table[b-sgul7ynqg1] {
    position: relative;
    overflow: hidden;
    background: #fff
}

.vt-scroll[b-sgul7ynqg1] {
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    position: relative
}

.vt-header[b-sgul7ynqg1] {
    display: grid;
    grid-template-columns: var(--vt-cols);
    position: sticky;
    top: 0;
    z-index: 2;
    background: color-mix(in srgb,var(--mud-palette-primary) 10%, white);
    width: fit-content;
    min-width: 100%
}

.vt-th[b-sgul7ynqg1] {
    padding: .6rem .8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .25rem;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.15;
    min-width: 0;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, white);
}

    .vt-th span[b-sgul7ynqg1] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 100%;
        min-width: 0;
        flex: 1 1 0
    }

    .vt-th .vt-sort[b-sgul7ynqg1] {
        align-self: flex-start;
        margin-top: 2px;
        flex: 0 0 auto
    }

.vt-sort[b-sgul7ynqg1] {
    opacity: .8
}

.vt-sort-hint[b-sgul7ynqg1] {
    opacity: 0;
    transition: opacity .15s ease
}

.vt-th:hover .vt-sort-hint[b-sgul7ynqg1] {
    opacity: .4
}

.vt-body[b-sgul7ynqg1] {
    display: block;
    overflow: visible;
    min-height: 0;
    width: fit-content;
    min-width: 100%
}

.vt-row[b-sgul7ynqg1] {
    display: grid;
    grid-template-columns: var(--vt-cols);
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    min-height: 36px;
    cursor: pointer;
    transition: all .2s ease;
    width: fit-content;
    min-width: 100%
}

.vt-content-row[b-sgul7ynqg1] {
    animation: vt-content-fade-in-b-sgul7ynqg1 .4s ease-out
}

.vt-row:nth-child(odd)[b-sgul7ynqg1] {
    background: #fcfcfd
}

.vt-row:hover[b-sgul7ynqg1] {
    background: color-mix(in srgb,var(--mud-palette-primary) 8%, white);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05)
}

.vt-row-link[b-sgul7ynqg1] {
    color: inherit;
    text-decoration: none
}

    .vt-row-link:visited[b-sgul7ynqg1] {
        color: inherit
    }

@keyframes vt-content-fade-in-b-sgul7ynqg1 {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

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

.vt-td[b-sgul7ynqg1] {
    padding: .6rem .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

    .vt-td.num[b-sgul7ynqg1] {
        text-align: right
    }

    .vt-td.date[b-sgul7ynqg1] {
        color: #374151
    }

.vt-no-data[b-sgul7ynqg1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 2rem;
    text-align: center
}

.vt-no-data-content[b-sgul7ynqg1] {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem
}

.vt-no-data-icon[b-sgul7ynqg1] {
    color: #9ca3af;
    opacity: .7;
    margin-bottom: .5rem
}

.vt-no-data-message h3[b-sgul7ynqg1] {
    margin: 0 0 .5rem 0;
    color: #374151;
    font-size: 1.25rem;
    font-weight: 600
}

.vt-no-data-message p[b-sgul7ynqg1] {
    margin: 0;
    color: #6b7280;
    font-size: .95rem;
    line-height: 1.5
}

.vt-progress-line[b-sgul7ynqg1] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,transparent,var(--mud-palette-primary),transparent);
    background-size: 200% 100%;
    animation: vt-slide-b-sgul7ynqg1 1.1s linear infinite;
    z-index: 10;
    pointer-events: none;
    opacity: 1;
    transform: translateZ(0);
    will-change: background-position;
}

@keyframes vt-slide-b-sgul7ynqg1 {
    from {
        background-position: 200% 0
    }

    to {
        background-position: -200% 0
    }
}

.vt-overlay[b-sgul7ynqg1] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 5
}

.vt-skeleton[b-sgul7ynqg1] {
    opacity: .7;
    background: transparent;
    animation: vt-skeleton-fade-in-b-sgul7ynqg1 .3s ease-out
}

.vt-skeleton-line[b-sgul7ynqg1] {
    height: 16px;
    background: linear-gradient(110deg,#f0f2f5 8%,#e6e8eb 18%,#f0f2f5 33%);
    background-size: 200% 100%;
    animation: vt-skeleton-wave-b-sgul7ynqg1 1.8s ease-in-out infinite;
    border-radius: 6px;
    position: relative;
    overflow: hidden
}

    .vt-skeleton-line[b-sgul7ynqg1]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
        animation: vt-skeleton-shimmer-b-sgul7ynqg1 2.5s ease-in-out infinite
    }

.vt-skeleton-multiline[b-sgul7ynqg1] {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.vt-skeleton:nth-child(1) .vt-skeleton-line[b-sgul7ynqg1] {
    animation-delay: 0ms
}

.vt-skeleton:nth-child(2) .vt-skeleton-line[b-sgul7ynqg1] {
    animation-delay: 150ms
}

.vt-skeleton:nth-child(3) .vt-skeleton-line[b-sgul7ynqg1] {
    animation-delay: 450ms
}

.vt-skeleton:nth-child(4) .vt-skeleton-line[b-sgul7ynqg1] {
    animation-delay: 450ms
}

.vt-skeleton:nth-child(5) .vt-skeleton-line[b-sgul7ynqg1] {
    animation-delay: 600ms
}

@keyframes vt-skeleton-wave-b-sgul7ynqg1 {
    0% {
        background-position: -200% 0;
        transform: translateX(-2px)
    }

    50% {
        transform: translateX(1px)
    }

    100% {
        background-position: 200% 0;
        transform: translateX(0)
    }
}

@keyframes vt-skeleton-shimmer-b-sgul7ynqg1 {
    0% {
        left: -100%
    }

    50% {
        left: 100%
    }

    100% {
        left: 100%
    }
}

@keyframes vt-skeleton-fade-in-b-sgul7ynqg1 {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: .7;
        transform: translateY(0)
    }
}
/* /Components/Dialogs/AssignRoleDialog.razor.rz.scp.css */
.assign-role-dialog[b-eh77dqjsqd]  .mud-dialog-content {
    max-height: calc(100vh - 260px);
    overflow: hidden !important;
}

.assign-role-scroll[b-eh77dqjsqd] {
    max-height: min(36vh, 320px);
    overflow-y: auto;
    padding-right: 4px;
}
/* /Components/Dialogs/InviteUserDialog.razor.rz.scp.css */
.invite-user-dialog[b-37gofnwuyc]  .mud-dialog-actions {
    padding: 22px !important;
}

.invite-user-dialog[b-37gofnwuyc]  .mud-dialog-content {
    overflow: hidden !important;
    max-height: calc(100vh - 220px);
}

.invite-dialog-layout[b-37gofnwuyc] {
    min-height: 0;
}

.invite-roles-scroll[b-37gofnwuyc] {
    max-height: min(38vh, 360px);
    overflow-y: auto;
    padding-right: 4px;
}

.invite-error-alert[b-37gofnwuyc] {
    margin-bottom: 2px;
}

.invite-success-stack[b-37gofnwuyc] {
    min-height: 200px;
}

.invite-roles-scroll[b-37gofnwuyc]  .invite-role-node {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    cursor: pointer;
}

.invite-roles-scroll[b-37gofnwuyc]  .invite-role-node-selected {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.invite-roles-scroll[b-37gofnwuyc]  .invite-role-node-body {
    flex: 1;
}

.invite-roles-scroll[b-37gofnwuyc]  .invite-role-node-name {
    font-weight: 500;
}
/* /Components/InfoTooltip.razor.rz.scp.css */
/* The tooltip's own root div is inline-block, so the icon inside it sits on the text
   baseline and rides high next to a title. Flattening host and root to flex centers it. */
.info-tooltip-host[b-5vm4w2j64t] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.info-tooltip-host[b-5vm4w2j64t]  .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
}

.info-tooltip-anchor[b-5vm4w2j64t] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: help;
    color: var(--mud-palette-primary);
}

.info-tooltip-anchor[b-5vm4w2j64t]  .mud-icon-root {
    font-size: 1rem;
}

.info-tooltip-anchor:hover[b-5vm4w2j64t],
.info-tooltip-anchor:focus-visible[b-5vm4w2j64t] {
    color: var(--mud-palette-primary-darken);
}

.info-tooltip-anchor:focus-visible[b-5vm4w2j64t] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
/* /Components/Orders/CustomerActivitiesPanel.razor.rz.scp.css */
/* Flex chain so the previous-orders list fills exactly the space left below the
   contact card (the sidebar paper's height is fixed by SalesOrderPage.razor.css).
   The list's internal grid scrolls; nothing else in the panel should. */
.activities-root[b-aen3kxn8jz] {
    height: 100%;
}

.activities-root[b-aen3kxn8jz]  .activities-stack {
    height: 100%;
}

.activities-root[b-aen3kxn8jz]  .previous-orders-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* MudDivider defaults to flex: 1 0 auto (built for flex rows); in this flex column
   it would grab the slack meant for the list. */
.activities-root[b-aen3kxn8jz]  .previous-orders-card .mud-divider {
    flex: 0 0 auto;
}

.previous-orders-list[b-aen3kxn8jz] {
    flex: 1 1 auto;
    min-height: 0;
}

.previous-orders-list[b-aen3kxn8jz]  .list-view {
    height: 100%;
}

.previous-orders-list.reorder-mode[b-aen3kxn8jz]  .list-view-header-slot[data-column="Status"] .list-view-header-cell {
    visibility: hidden;
}

.previous-orders-list[b-aen3kxn8jz]  .list-view-header-drag-handle {
    display: none;
}

.reorder-cell[b-aen3kxn8jz] {
    display: flex;
    justify-content: center;
    width: 100%;
}
/* /Components/Orders/ProductEntryWizard.razor.rz.scp.css */
/* The wizard fills whatever width it is given rather than stopping at eight of twelve
   columns, so "Add to order" ends where the row does. MudItem renders its own root, which
   never carries this file's scope attribute, hence ::deep. */
[b-kcq3emhhes] .product-entry-product {
    flex-grow: 1;
    max-width: none;
}
/* /Components/Orders/SalesOrderInvoiceList.razor.rz.scp.css */
.invoice-list-items[b-02qujc4u38] {
    display: grid;
    gap: 0.5rem;
}

.invoice-list-item[b-02qujc4u38] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.invoice-list-item:hover[b-02qujc4u38],
.invoice-list-item:focus-within[b-02qujc4u38] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 42%, var(--mud-palette-lines-default));
    box-shadow: 0 3px 12px color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.invoice-list-item-busy[b-02qujc4u38] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 48%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.invoice-list-number[b-02qujc4u38] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15rem;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}

/* Total and actions together at the row's end, never squeezed by a long invoice number. */
.invoice-list-trailing[b-02qujc4u38] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    flex-shrink: 0;
}

.invoice-list-total[b-02qujc4u38] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.invoice-list-actions[b-02qujc4u38] {
    min-width: 0;
}

/* Wraps onto its own line under the number, total and actions. */
.invoice-list-guidance[b-02qujc4u38] {
    flex-basis: 100%;
    text-align: right;
}

.invoice-list-actions[b-02qujc4u38]  .split-button-group {
    max-width: 100%;
}

.invoice-list-actions[b-02qujc4u38]  .mud-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-empty-state[b-02qujc4u38] {
    display: flex;
    min-height: 8.5rem;
    padding: 1.25rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-background));
}

.invoice-empty-icon[b-02qujc4u38] {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.invoice-live-status[b-02qujc4u38] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .invoice-list-total[b-02qujc4u38] {
        font-size: 0.8rem;
    }

    .invoice-list-actions[b-02qujc4u38]  .mud-button-label,
    .invoice-list-actions[b-02qujc4u38]  .mud-button-root {
        font-size: 0.75rem;
    }

    .invoice-list-actions[b-02qujc4u38]  .split-button-group,
    .invoice-list-actions[b-02qujc4u38]  .mud-button-group-root,
    .invoice-list-actions[b-02qujc4u38]  .mud-button-root {
        min-height: 34px;
    }
}
/* /Components/Payments/AccountPaymentFields.razor.rz.scp.css */
.account-summary-card[b-yy79vayf11] {
    min-height: 72px;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.account-summary-label[b-yy79vayf11] {
    line-height: 1;
    margin-bottom: 0.25rem;
}

.account-summary-value[b-yy79vayf11] {
    font-weight: 600;
    line-height: 1.2;
}

.account-credits-panel[b-yy79vayf11] {
    padding: 0.75rem;
}

.account-payment-table[b-yy79vayf11]  .mud-table-cell {
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
}

.account-payment-table[b-yy79vayf11]  .mud-table-head .mud-table-cell {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.account-balance-caption[b-yy79vayf11] {
    display: flex;
    justify-content: flex-end;
}

.account-apply-field[b-yy79vayf11] {
    min-width: 150px;
}

.account-apply-field[b-yy79vayf11]  .mud-input-slot {
    font-size: 0.95rem;
}

.account-payment-table[b-yy79vayf11]  td:last-child {
    min-width: 160px;
}

.account-apply-field[b-yy79vayf11]  .mud-input-slot.mud-input-root {
    min-width: 130px;
}
/* /Components/Payments/BeneviaPayments/AssistWidgetHost.razor.rz.scp.css */
.benevia-payments-host[b-e12039xx8f] {
    width: 100%;
}

.benevia-payments-host[b-e12039xx8f]  > * {
    display: block;
    width: 100%;
}

/* The Assist widget (Stencil, light DOM) wraps its content in a bordered card - an inner div with
   the Tailwind combo .border .border-gray-200 .rounded-lg on a .m-5 .bg-white element. Strip the
   border/radius so it blends into the page, and drop the m-5 margin + w-[97%] width so it aligns
   to the page edge instead of sitting inset. */
.benevia-payments-host[b-e12039xx8f]  .m-5.bg-white.border.border-gray-200.rounded-lg {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Drop the content grid's horizontal padding so the banner/tabs/table line up with the page
   header (the card keeps its own p-4 inset, which matches the page's padding after the mx-n4 bleed). */
.benevia-payments-host[b-e12039xx8f]  .grid.gap-6.pt-6.px-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide the dashboard's own "Payments" heading (the 3xl title at the top of its content grid) -
   redundant with the page's "Benevia Payments" header. */
.benevia-payments-host[b-e12039xx8f]  .grid.gap-6.pt-6.px-6 > .text-3xl.font-semibold.leading-9 {
    display: none;
}
/* /Components/Payments/BeneviaPayments/CardPaymentDialog.razor.rz.scp.css */
.card-payment-dialog-scroll[b-5yenk2eyce] {
    max-height: min(560px, 70vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
}
/* /Components/Payments/PaymentDialog.razor.rz.scp.css */
/* === Title bar === */

.payment-dialog-title-bar[b-k2l2afd6da] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.payment-title-icon-badge[b-k2l2afd6da] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.payment-title-icon[b-k2l2afd6da] {
    color: var(--mud-palette-primary);
    font-size: 1.25rem;
}

.payment-dialog-title-text[b-k2l2afd6da] {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

/* === Benevia "Payment Amount" row, above the Assist checkout widget === */

.benevia-amount-field-cell[b-k2l2afd6da] {
    flex: 0 1 340px;
    min-width: 220px;
}

/* Pin the field to an exact 40px box (label floats on the border, helper text absent),
   so centering the 40px buttons against it lines up edge-to-edge. */
.benevia-amount-field-cell[b-k2l2afd6da]  .mud-input-control {
    margin: 0;
}

.benevia-amount-field-cell[b-k2l2afd6da]  .mud-input-control > .mud-input-control-input-container > .mud-input {
    height: 40px;
}

.benevia-amount-apply-cell[b-k2l2afd6da] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Match the dense outlined input box height so the buttons align flush with the field. */
.benevia-amount-apply-cell[b-k2l2afd6da]  .mud-button-root {
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    text-transform: none;
    font-weight: 600;
}

[b-k2l2afd6da] .benevia-amount-change-link {
    text-transform: none;
    white-space: nowrap;
}

.benevia-checkout-scroll[b-k2l2afd6da] {
    max-height: calc(min(780px, 100vh - 48px) - 250px);
    min-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
}

.benevia-checkout-scroll[b-k2l2afd6da]::-webkit-scrollbar {
    width: 6px;
}

.benevia-checkout-scroll[b-k2l2afd6da]::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--mud-palette-lines-default);
}

.benevia-checkout-scroll[b-k2l2afd6da]::-webkit-scrollbar-track {
    background: transparent;
}

/* === Loading skeleton — mirrors the two-column layout so the open feels instant === */

.payment-skeleton[b-k2l2afd6da] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 24px;
    padding-top: 4px;
}

.payment-skeleton-methods[b-k2l2afd6da],
.payment-skeleton-details[b-k2l2afd6da] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-skeleton[b-k2l2afd6da]  .payment-skeleton-tile {
    border-radius: 10px;
}

@media (max-width: 959.98px) {
    .payment-skeleton[b-k2l2afd6da] {
        grid-template-columns: 1fr;
    }
}

/* Payment method tiles moved to the shared PaymentMethodOptionList component. */

/* === Error banner === */

.payment-error-banner[b-k2l2afd6da] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.payment-error-banner[b-k2l2afd6da]  .payment-error-banner-icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 1.1rem;
    color: var(--mud-palette-error);
}

.payment-error-banner-text[b-k2l2afd6da] {
    font-size: 0.875rem;
    line-height: 1.45;
}

.payment-error-banner-text ul[b-k2l2afd6da] {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* === Compact context notes (down payment, credit balance) === */

.payment-context-note[b-k2l2afd6da] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 20%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 6%, var(--mud-palette-surface));
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
}

.payment-context-note[b-k2l2afd6da]  .payment-context-note-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--mud-palette-info);
}

.payment-context-note-value[b-k2l2afd6da] {
    margin-left: auto;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* === Full-width state panels (fully covered / overpaid / zero balance) === */

.payment-state-panel[b-k2l2afd6da] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid;
}

.payment-state-icon[b-k2l2afd6da] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.payment-state-icon[b-k2l2afd6da]  .mud-icon-root {
    font-size: 1.25rem;
}

.payment-state-panel--success[b-k2l2afd6da] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-success) 5%, var(--mud-palette-surface));
}

.payment-state-panel--success .payment-state-icon[b-k2l2afd6da] {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-success);
}

.payment-state-panel--info[b-k2l2afd6da] {
    border-color: color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-info) 5%, var(--mud-palette-surface));
}

.payment-state-panel--info .payment-state-icon[b-k2l2afd6da] {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-info);
}

.payment-state-panel--warning[b-k2l2afd6da] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, var(--mud-palette-surface));
}

.payment-state-panel--warning .payment-state-icon[b-k2l2afd6da] {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, var(--mud-palette-surface));
    color: var(--mud-palette-warning);
}

/* === Invoice summary (charge mode) === */

.charge-summary-panel[b-k2l2afd6da] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-background) 35%, var(--mud-palette-surface));
}

.charge-summary-row[b-k2l2afd6da] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
}

.charge-summary-label[b-k2l2afd6da] {
    color: var(--mud-palette-text-secondary);
}

.charge-summary-value[b-k2l2afd6da] {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.charge-summary-row--total[b-k2l2afd6da] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 10px;
}

.charge-summary-row--total .charge-summary-label[b-k2l2afd6da] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.charge-summary-row--total .charge-summary-value[b-k2l2afd6da] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-primary-darken);
}

/* Invoice balance card */

.invoice-balance-card[b-k2l2afd6da] {
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* ── Split Tender (section chrome is global; inner rows anchor to the authored section div) ── */

/* ── Header row: title + remaining ─────────────────────────── */
[b-k2l2afd6da] .split-tender-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    padding: 0 0.25rem;
}

[b-k2l2afd6da] .split-tender-title {
    /* Matches MudDialog section labels — same weight as "Payment Amount" label */
    font-size: 0.8125rem !important; /* 13px — same as MUI caption/overline in your dialog */
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-primary) !important;
    text-transform: none; /* drop ALL-CAPS */
}

[b-k2l2afd6da] .split-tender-remaining {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
}

/* ── Covered-vs-remaining meter ─────────────────────────────── */
[b-k2l2afd6da] .split-tender-meter {
    height: 4px;
    margin: 0 0.25rem 0.5rem;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

[b-k2l2afd6da] .split-tender-meter-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--mud-palette-primary);
    transition: width 0.2s ease;
}

/* ── Each row card ──────────────────────────────────────────── */
[b-k2l2afd6da] .split-tender-card {
    border-radius: 6px !important;
    padding: 0.45rem 0.75rem !important;
    border-left: 3px solid transparent; /* accent line — colored per variant */
    transition: background 0.15s;
}

[b-k2l2afd6da] .split-tender-card--0 {
    background: var(--mud-palette-background-grey, #f5f5f5) !important;
    border-left: none !important;
}

[b-k2l2afd6da] .split-tender-card--1 {
    background: var(--mud-palette-surface) !important;
    border-left: none !important;
}

[b-k2l2afd6da] .split-tender-card--2 {
    background: rgba(var(--mud-palette-info-rgb), 0.06) !important;
    border-left-color: var(--mud-palette-info) !important;
}

/* ── Row layout ─────────────────────────────────────────────── */
[b-k2l2afd6da] .split-tender-card-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

[b-k2l2afd6da] .split-tender-icon {
    flex-shrink: 0;
    font-size: 1rem !important;
    color: var(--mud-palette-text-secondary);
}

[b-k2l2afd6da] .split-tender-card-left {
    flex: 1;
    min-width: 0;
}

[b-k2l2afd6da] .split-tender-method {
    font-size: 0.875rem !important; /* 14px — same as body2 in your dialog rows */
    font-weight: 500 !important;
    line-height: 1.3;
    color: var(--mud-palette-text-primary) !important;
}

[b-k2l2afd6da] .split-tender-sublabel {
    font-size: 0.75rem !important;
    color: var(--mud-palette-text-secondary) !important;
    line-height: 1.2;
}

[b-k2l2afd6da] .split-tender-amount {
    flex-shrink: 0;
    font-size: 0.875rem !important; /* matches method text — visually balanced */
    font-weight: 400 !important;
    color: var(--mud-palette-text-primary) !important;
    min-width: 52px;
    text-align: right;
}
/* /Components/Pricing/DynamicPricingGrid.razor.rz.scp.css */
.pricing-compact[b-iwp191oopj] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
}

.header[b-iwp191oopj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.header-left[b-iwp191oopj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.compact-btn[b-iwp191oopj] {
    height: 30px;
    padding: 0 12px;
    text-transform: none;
    font-size: 13px;
    border-radius: 6px;
}

/* Dimension chips */
.dimensions-chips[b-iwp191oopj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

/* The hint is a MudText, so it needs ::deep from the scoped root. */
.pricing-compact[b-iwp191oopj]  .bands-hint {
    display: block;
    padding: 6px 14px 0;
    color: var(--mud-palette-text-secondary);
}

.dim-chip[b-iwp191oopj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 10px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: all 0.15s;
}

.dim-chip:hover[b-iwp191oopj] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chip-num[b-iwp191oopj] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.5px;
}

.chip-select[b-iwp191oopj]  .mud-input-root {
    margin: 0 !important;
}

.chip-select[b-iwp191oopj]  .mud-select {
    min-width: 130px;
    font-size: 13px;
    font-weight: 500;
}

.chip-select[b-iwp191oopj]  .mud-input-slot {
    padding: 0 4px;
}

.chip-autocomplete[b-iwp191oopj]  .mud-input-root {
    margin: 0 !important;
}

.chip-remove[b-iwp191oopj] {
    width: 24px;
    height: 24px;
    padding: 0;
    color: #6b7280;
}

.chip-remove:hover[b-iwp191oopj] {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* Grid area */
.grid-area[b-iwp191oopj] {
    padding: 14px;
}

.grid-compact[b-iwp191oopj] {
    max-height: 600px;
    overflow: auto;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.grid-compact table[b-iwp191oopj] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.grid-compact th[b-iwp191oopj] {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 6px 8px;
    background: #f8f9fa;
    border-bottom: 1px solid #d1d5db;
    border-right: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 11px;
    color: #374151;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.grid-compact th:first-child[b-iwp191oopj] {
    position: sticky;
    left: 0;
    z-index: 15;
}

.grid-compact td[b-iwp191oopj] {
    padding: 4px 6px;
    border-bottom: 1px solid #f3f4f6;
    border-right: 1px solid #f3f4f6;
    vertical-align: middle;
    text-align:center !important;
}

.grid-compact td:first-child[b-iwp191oopj] {
    position: sticky;
    left: 0;
    background: white;
    z-index: 5;
    font-weight: 500;
    color: #374151;
    font-size: 12px;
}

.grid-compact tbody tr:hover[b-iwp191oopj] {
    background: #f9fafb;
}

.grid-compact tbody tr:hover td:first-child[b-iwp191oopj] {
    background: #f9fafb;
}

.grid-compact tfoot td[b-iwp191oopj] {
    padding: 6px 8px;
    border-top: 1px solid #d1d5db;
    background: #fafafa;
}

/* Axis cells */
.axis-cell[b-iwp191oopj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-height: 26px;
    padding: 2px 4px;
}

.axis-label[b-iwp191oopj] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.axis-label-error[b-iwp191oopj] {
    color: var(--mud-palette-error);
    display: flex;
    align-items: center;
}

.axis-edit-field[b-iwp191oopj] {
    flex: 1;
    min-width: 100px;
    max-width: 120px;
}

.axis-edit-field[b-iwp191oopj]  .mud-input-root {
    margin: 0 !important;
}

.axis-edit-field[b-iwp191oopj]  .mud-input {
    padding: 2px 6px !important;
    font-size: 12px;
}

.axis-delete-wrapper[b-iwp191oopj] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.axis-cell:hover .axis-delete-wrapper[b-iwp191oopj],
.axis-cell:focus-within .axis-delete-wrapper[b-iwp191oopj] {
    opacity: 1;
}

.axis-cell .delete-btn[b-iwp191oopj] {
    width: 20px;
    height: 20px;
    padding: 0;
    min-width: 20px;
    min-height: 20px;
    opacity: 0.6;
    transition: all 0.2s;
}

    .axis-cell .delete-btn:hover[b-iwp191oopj] {
        opacity: 1 !important;
        transform: scale(1.15);
        background: rgba(239, 68, 68, 0.1) !important;
    }

.axis-edit-wrapper[b-iwp191oopj] {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.axis-cell:hover .axis-edit-wrapper[b-iwp191oopj],
.axis-cell:focus-within .axis-edit-wrapper[b-iwp191oopj] {
    opacity: 1;
}

.axis-cell .edit-btn[b-iwp191oopj] {
    width: 16px;
    height: 16px;
    padding: 0;
    min-width: 16px;
    min-height: 16px;
    transition: all 0.2s;
}

    .axis-cell .edit-btn:hover[b-iwp191oopj] {
        opacity: 1 !important;
        transform: scale(1.15);
        background: rgba(59, 130, 246, 0.1) !important;
        color: #3b82f6 !important;
    }

/* Price cells */
.cell-wrapper[b-iwp191oopj] {
    min-width: 85px;
}

.cell-input[b-iwp191oopj]  .mud-input-root {
    margin: 0 !important;
}

.cell-input[b-iwp191oopj]  .mud-input {
    padding: 4px 6px !important;
    font-size: 12px;
    text-align: center !important;
    min-height: 26px;
}

.cell-input[b-iwp191oopj]  .mud-input-outlined {
    border-radius: 4px;
}

.cell-input[b-iwp191oopj]  .mud-input-outlined input {
    text-align: center !important;
}

.cell-input.has-error[b-iwp191oopj]  .mud-input-outlined,
.cell-input.has-error[b-iwp191oopj]  fieldset {
    border: 2px solid var(--mud-palette-error) !important;
    background-color: #fff5f5 !important;
}

.cell-input.has-error[b-iwp191oopj]  .mud-input,
.cell-input.has-error[b-iwp191oopj]  input {
    background-color: #fff5f5 !important;
    text-align: center !important;
}

/* Add row button */
.add-row-btn[b-iwp191oopj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.add-row-btn:hover[b-iwp191oopj] {
    background: rgba(37, 99, 235, 0.04);
}

.add-col-header[b-iwp191oopj] {
    background: #f8f9fa;
    border-bottom: 1px solid #d1d5db;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    padding: 6px 8px;
}

/* Tabs */
.grid-area[b-iwp191oopj]  .tabs-compact .mud-tab {
    min-height: 32px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s ease;
    color: #64748b;
    background: transparent;
    margin-right: 2px;
    position: relative;
}

.grid-area[b-iwp191oopj]  .tabs-compact .mud-tab:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
}

.grid-area[b-iwp191oopj]  .tabs-compact .mud-tab.mud-tab-active {
    background: white;
    color: #1e40af;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    border-bottom: 2px solid white;
    margin-bottom: -2px;
}

.grid-area[b-iwp191oopj]  .tabs-compact .mud-tab.mud-tab-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #3b82f6, #2563eb);
    border-radius: 6px 6px 0 0;
}

.grid-area[b-iwp191oopj]  .tabs-compact .mud-tabs-panels {
    background: white;
    border-radius: 0 0 6px 6px;
}

/* Tab content with edit/delete */
.tab-content-editable[b-iwp191oopj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    min-width: 0;
}

.tab-content-editable > span[b-iwp191oopj] {
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

.tab-edit-field[b-iwp191oopj]  .mud-input-root {
    margin: 0 !important;
}

.tab-edit-field[b-iwp191oopj]  .mud-input {
    padding: 4px 8px !important;
    font-size: 12px;
    font-weight: 600;
    min-height: 28px;
}

.tab-edit-field[b-iwp191oopj]  .mud-input-outlined {
    border-radius: 4px;
}

/* Tab button visibility */
.tab-button-hidden[b-iwp191oopj] {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.tab-content-editable:hover .tab-button-hidden[b-iwp191oopj] {
    opacity: 1;
    width: auto;
}
/* /Components/Products/ProductAttributeValueLinksSelector.razor.rz.scp.css */
/* The panel is narrow, so the product cell wraps to two lines rather than scrolling sideways. */
.linked-products[b-1ez7s8vmim]  .mud-table-root .mud-table-cell {
    padding: 6px 8px;
}

.linked-products[b-1ez7s8vmim]  .linked-products-actions {
    width: 44px;
    text-align: right;
}

.linked-products[b-1ez7s8vmim]  .linked-product-text {
    min-width: 0;
}

.linked-products[b-1ez7s8vmim]  .linked-product-sku {
    font-weight: 500;
}

.linked-products[b-1ez7s8vmim]  .linked-product-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The card already scrolls; a nested scroller would trap the wheel. */
.linked-products[b-1ez7s8vmim]  .mud-table-container {
    overflow: visible;
    max-height: none;
}

/* One column of products needs no column name; the card head already says "Products". */
.linked-products[b-1ez7s8vmim]  .mud-table-head {
    display: none;
}

/* The panel sits in .settings-sidebar, which the shared table hover in app.css does not reach. */
.linked-products[b-1ez7s8vmim]  .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: var(--benevia-hover-tint);
}
/* /Components/Roles/RoleTreeNodeView.razor.rz.scp.css */
.role-tree-node[b-mvh5nw0ngk] {
    width: 100%;
}

.role-tree-node-content[b-mvh5nw0ngk] {
    flex: 1;
    min-width: 0;
}
/* /Components/Settings/EmptyState.razor.rz.scp.css */
.settings-empty[b-oa681r3su8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    min-height: 220px;
    text-align: center;
}

.settings-empty--pane[b-oa681r3su8] {
    height: 100%;
}

/* Larger, round variant of the shared .settings-icon-tile. */
.settings-empty-icon[b-oa681r3su8] {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 50%;
}

    .settings-empty-icon[b-oa681r3su8]  .mud-icon-root {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }

.settings-empty[b-oa681r3su8]  .settings-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.settings-empty[b-oa681r3su8]  .settings-empty-sub {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary, #495057);
    max-width: 34ch;
}
/* /Components/Settings/SettingsHeader.razor.rz.scp.css */
.settings-header[b-vlgjxada9a] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.settings-header-text[b-vlgjxada9a] {
    min-width: 0;
}

.settings-header-title-row[b-vlgjxada9a] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .settings-header-title-row[b-vlgjxada9a]  .settings-header-title {
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.3;
    }

.settings-header-text[b-vlgjxada9a]  .settings-header-description {
    margin-top: 1px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary, #495057);
    max-width: 96ch;
}

.settings-header-actions[b-vlgjxada9a] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin-left: auto;
    padding-top: 2px;
}
/* /Components/Settings/SettingsListItem.razor.rz.scp.css */
.settings-list-item[b-okqqk5u392] {
    box-sizing: border-box;
    min-height: 40px;
    padding: 8px 12px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 180ms var(--benevia-ease), border-color 180ms var(--benevia-ease);
}

.settings-list-item:hover[b-okqqk5u392] {
    background-color: var(--benevia-hover-tint);
}

.settings-list-item.selected[b-okqqk5u392] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-color: var(--mud-palette-primary);
}

.settings-list-item.selected:hover[b-okqqk5u392] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Rows carrying a sub-label are all exactly this tall, whatever the text length. */
.settings-list-item--stacked[b-okqqk5u392] {
    height: 58px;
    overflow: hidden;
}

.settings-list-item[b-okqqk5u392]  .settings-list-item-icon {
    opacity: 0.7;
}

.settings-list-item[b-okqqk5u392]  .settings-list-item-body {
    flex: 1;
    min-width: 0;
}

.settings-list-item[b-okqqk5u392]  .settings-list-item-line {
    min-width: 0;
}

.settings-list-item[b-okqqk5u392]  .settings-list-item-label,
.settings-list-item[b-okqqk5u392]  .settings-list-item-sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-list-item[b-okqqk5u392]  .settings-list-item-label {
    flex: 1 1 auto;
    font-weight: 500;
}

.settings-list-item[b-okqqk5u392]  .settings-list-item-sub {
    font-size: 0.85em;
}

.settings-list-item[b-okqqk5u392]  .settings-list-item-line > *:not(.settings-list-item-label) {
    flex: 0 0 auto;
}

.settings-list-item:focus-visible[b-okqqk5u392] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.settings-list-item[b-okqqk5u392]  .chevron-hover {
    opacity: 0;
    transition: opacity 180ms var(--benevia-ease);
}

.settings-list-item:hover[b-okqqk5u392]  .chevron-hover {
    opacity: 1;
}
/* /Components/Settings/SettingsMasterDetailLayout.razor.rz.scp.css */
/* Fills the settings content column, which owns the height (see app.css). */
.settings-md-layout[b-ecpvkp4f0i] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.settings-md-header[b-ecpvkp4f0i] {
    flex: 0 0 auto;
}

/* The scroll region: the header above it stays put, so the scrollbars belong
   to the panes rather than running past the header. */
.settings-md-body[b-ecpvkp4f0i] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 16px;
    padding: 24px var(--settings-pad) var(--settings-pad);
}

/* List pane is an island (.settings-surface): hairline-separated search, rows, and footer. */
.settings-md-list[b-ecpvkp4f0i] {
    display: flex;
    flex-direction: column;
    flex: 0 0 360px;
    min-width: 0;
    overflow: hidden;
}

.settings-md-list-head[b-ecpvkp4f0i] {
    flex: 0 0 auto;
    padding: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e9ecef);
}

.settings-md-list-rows[b-ecpvkp4f0i] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

.settings-md-list-footer[b-ecpvkp4f0i] {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--mud-palette-lines-default, #e9ecef);
}

.settings-md-editor[b-ecpvkp4f0i] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 2px;
}

@media (max-width: 960px) {
    .settings-md-body[b-ecpvkp4f0i] {
        flex-direction: column;
        min-height: 0;
    }

    .settings-md-list[b-ecpvkp4f0i] {
        flex: 0 0 auto;
    }
}
/* /Components/Settings/SettingsNavigation.razor.rz.scp.css */
[b-plng5be7n1] .settings-nav-section {
    margin: 8px 0;
    padding: 12px 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default, #e9ecef);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--benevia-ink-muted);
}

[b-plng5be7n1] .settings-nav-section--first {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

/* The .mud-navmenu-rounded ancestor outranks MudBlazor's own radius rule. */
[b-plng5be7n1] .mud-navmenu.mud-navmenu-rounded .mud-nav-link {
    padding: 7px 10px;
    min-height: 0;
    border-radius: 15px;
}

[b-plng5be7n1] .mud-navmenu .mud-collapse-container .mud-nav-link {
    padding: 7px 8px 7px 28px;
}

[b-plng5be7n1] .mud-nav-link .mud-nav-link-text {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.875rem;
    white-space: nowrap;
}

[b-plng5be7n1] .settings-nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-plng5be7n1] .mud-nav-link .preview-badge {
    margin-left: auto;
}

/* The icon is a direct child of the link, and MudBlazor aligns those to the top, which
   only looks centred while the icon is as tall as the line box. */
[b-plng5be7n1] .mud-navmenu .mud-nav-link {
    align-items: center;
}

[b-plng5be7n1] .mud-nav-link .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
    opacity: 0.8;
}

    [b-plng5be7n1] .mud-nav-link:hover .mud-icon-root,
    [b-plng5be7n1] .mud-nav-link.active .mud-icon-root {
        opacity: 1;
    }

    [b-plng5be7n1] .mud-nav-link.active .preview-badge {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.45);
    }

[b-plng5be7n1] .mud-nav-group > .mud-nav-item .mud-nav-link-text,
[b-plng5be7n1] .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    font-weight: 600;
}

[b-plng5be7n1] .mud-nav-group > .mud-nav-item .mud-icon-root,
[b-plng5be7n1] .mud-nav-group > .mud-nav-link .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

[b-plng5be7n1] .mud-collapse-container .mud-nav-link-text {
    font-weight: 400;
}

/* The extra .mud-navmenu ancestor outranks MudBlazor's own expand-icon rules. */
[b-plng5be7n1] .mud-navmenu .mud-nav-link-expand-icon {
    width: 18px;
    height: 18px;
    color: var(--benevia-ink-muted);
    transition: transform 180ms var(--benevia-ease);
    transform: rotate(-90deg);
}

    [b-plng5be7n1] .mud-navmenu .mud-nav-link-expand-icon.mud-transform {
        transform: rotate(0deg);
    }
/* /Components/Settings/SettingsSkeleton.razor.rz.scp.css */
.settings-skeleton-lines[b-mrl9hve825] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Matches the real list row height so the list does not shift on load. */
.settings-skeleton-row[b-mrl9hve825] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    padding: 8px 12px;
    margin-bottom: 2px;
    box-sizing: border-box;
}

/* Rows without a sub-label are 40px in SettingsListItem. */
.settings-skeleton-row--flat[b-mrl9hve825] {
    height: 40px;
}

.settings-skeleton-card-row[b-mrl9hve825] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Trailing margin would add height the real content does not have, which matters
   when a single skeleton stands in for one card inside a grid cell. */
.settings-skeleton-card-row:not(:last-child)[b-mrl9hve825] {
    margin-bottom: 12px;
}

.settings-skeleton-card:not(:last-child)[b-mrl9hve825] {
    margin-bottom: 16px;
}

.settings-skeleton-title[b-mrl9hve825] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.settings-skeleton-trow[b-mrl9hve825] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e9ecef);
}

.settings-skeleton-trow:last-child[b-mrl9hve825] {
    border-bottom: none;
}

.settings-skeleton-thead[b-mrl9hve825] {
    height: 33px;
    background: var(--benevia-surface-alt);
    border-bottom-color: var(--benevia-line-strong);
}

.settings-skeleton-trow[b-mrl9hve825]  .mud-skeleton:first-child {
    flex: 1 1 auto;
}

[b-mrl9hve825] .settings-skeleton-chip,
[b-mrl9hve825] .settings-skeleton-button {
    border-radius: 999px;
    flex: none;
}

[b-mrl9hve825] .settings-skeleton-tile {
    border-radius: 6px;
    flex: none;
}

/* MudSkeleton carries a default vertical margin meant for stacked text. */
[b-mrl9hve825] .mud-skeleton {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    [b-mrl9hve825] .mud-skeleton,
    [b-mrl9hve825] .mud-skeleton::after {
        animation: none !important;
    }
}
/* /Components/Shipping/ShippingParcelTable.razor.rz.scp.css */
[b-uir3xgmomm] .parcel-type-select {
    max-width: 160px;
    margin-top: 0;
    margin-bottom: 0;
}

[b-uir3xgmomm] .parcel-type-select .mud-input-underline::before,
[b-uir3xgmomm] .parcel-type-select .mud-input-underline::after {
    display: none;
}

[b-uir3xgmomm] .parcel-weight-input {
    max-width: 90px;
    margin-top: 0;
    margin-bottom: 0;
}
/* /Components/SplitButton.razor.rz.scp.css */
/* Keep the wrapper inline so it stays a single flex item in toolbars. */
.split-button-group[b-hjzljnr4if] {
    display: inline-flex;
}

/* The filled button-group defaults to taller (6px) vertical padding than a standalone
   small button (3px + 1px border). Trim it so the split button matches its neighbours. */
.split-button-group[b-hjzljnr4if]  .mud-button-root {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    white-space: nowrap;
}

/* Slim the dropdown-arrow half so the chevron doesn't hog space. */
.split-button-group[b-hjzljnr4if]  .mud-menu-icon-button-activator {
    min-width: 0;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
/* /Components/Tags/EntityTagsSection.razor.rz.scp.css */
.tag-autocomplete-inline[b-97iiibd6vv] {
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 200px;
    align-self: center;
}
/* /Components/Tags/TagChipListCompact.razor.rz.scp.css */
.tag-chip-list-compact[b-wzy7o9l5wq] {
    display: block;
    min-width: 0;
    position: relative;
    width: 100%;
}

.tag-chip-list-compact__visible[b-wzy7o9l5wq],
.tag-chip-list-compact__measure[b-wzy7o9l5wq] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem;
    min-width: 0;
}

.tag-chip-list-compact__visible[b-wzy7o9l5wq] {
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

.tag-chip-list-compact__measure[b-wzy7o9l5wq] {
    position: absolute;
    inset-inline-start: -100000px;
    inset-block-start: 0;
    visibility: hidden;
    pointer-events: none;
    white-space: nowrap;
}

.tag-chip-list-compact__measure-item[b-wzy7o9l5wq] {
    display: inline-flex;
    flex: 0 0 auto;
}

.tag-chip-list-compact[b-wzy7o9l5wq]  .tag-chip-list-compact__chip {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.tag-chip-list-compact__visible[b-wzy7o9l5wq]  .tag-chip-list-compact__tag {
    flex: 0 1 auto;
}

.tag-chip-list-compact[b-wzy7o9l5wq]  .tag-chip-list-compact__chip .mud-chip-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Tags/TagsQuickFilter.razor.rz.scp.css */
.tags-quick-filter[b-ezpiowno6r] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.tags-quick-filter-toolbar[b-ezpiowno6r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.tags-quick-filter-caption[b-ezpiowno6r] {
    color: #52606d;
    font-size: .83rem;
    line-height: 1.35;
}

.tags-quick-filter-loading[b-ezpiowno6r] {
    display: flex;
    justify-content: center;
    padding: .5rem 0;
}

.tags-quick-filter-chip-wrap[b-ezpiowno6r] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
/* /Components/WeekRangeEdit.razor.rz.scp.css */
/* The cell is a range, not two numbers that happen to share a column: the fields stay narrow and
   sit against the separator, or a wide column pushes them to opposite ends of the cell. */
.week-range-edit[b-2chrtxfawk] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .25rem;
    min-width: 0;
}

.week-range-edit[b-2chrtxfawk]  > * {
    flex: 0 1 2.5rem;
    min-width: 0;
}

/* Both numbers lean on the dash. The grid right-aligns every numeric input it holds, which would
   leave the end week at the far side of its own box; that rule is why these need !important. */
.week-range-edit[b-2chrtxfawk]  > *:first-child input {
    text-align: right !important;
}

.week-range-edit[b-2chrtxfawk]  > *:last-child input {
    text-align: left !important;
}

.week-range-separator[b-2chrtxfawk] {
    flex: 0 0 auto;
    color: #757575;
}
/* /Pages/Customers/CustomerPage.razor.rz.scp.css */
/* The picker sits beside a clear button; let it take the row's free space. */
.price-level-picker[b-tslget2hx3] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Filtering is off here, so the searchbar's filter row is empty - hide it. */
.previous-orders-view[b-tslget2hx3]  .list-view-searchbar-filter-row {
    display: none;
}

/* Right-push the Total paid cell; ListView owns the cell, so it has the free space. */
.previous-orders-view[b-tslget2hx3]  .list-view-cell:has(.money-cell) {
    justify-content: flex-end;
}
/* /Pages/Dashboard.razor.rz.scp.css */
.metric-card[b-eke2jyo8kq] {
    background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100%);
    border: 1px solid var(--mud-palette-lines);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border-radius: 16px !important;
}

    .metric-card:hover[b-eke2jyo8kq] {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }

.metric-number[b-eke2jyo8kq] {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.metric-icon[b-eke2jyo8kq] {
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
    border-radius: 12px;
    padding: 12px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-action-card[b-eke2jyo8kq] {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid var(--mud-palette-lines);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-radius: 20px !important;
    transition: all 0.3s ease;
}

    .quick-action-card:hover[b-eke2jyo8kq] {
        box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    }

.quick-action-btn[b-eke2jyo8kq] {
    border-radius: 16px !important;
    padding: 16px 24px !important;
    transition: all 0.2s ease;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    font-weight: 500 !important;
    height: 60px;
}

    .quick-action-btn:hover[b-eke2jyo8kq] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }

.activity-card[b-eke2jyo8kq] {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid var(--mud-palette-lines);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-radius: 20px !important;
}

.status-card[b-eke2jyo8kq] {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid var(--mud-palette-lines);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-radius: 20px !important;
}

.dashboard-header[b-eke2jyo8kq] {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    border-radius: 24px;
    color: white;
    margin-bottom: 2rem;
}

.animated-counter[b-eke2jyo8kq] {
    animation: countUp 1s ease-out;
}

@@keyframes countUp {
    from[b-eke2jyo8kq] {
        transform: scale(0.8);
        opacity: 0;
    }

    to[b-eke2jyo8kq] {
        transform: scale(1);
        opacity: 1;
    }
}

.status-indicator[b-eke2jyo8kq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    animation: pulse 2s infinite;
}

@@keyframes pulse {
    0%[b-eke2jyo8kq] {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-success-rgb), 0.7);
    }

    70%[b-eke2jyo8kq] {
        box-shadow: 0 0 0 10px rgba(var(--mud-palette-success-rgb), 0);
    }

    100%[b-eke2jyo8kq] {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-success-rgb), 0);
    }
}
/* /Pages/Manufacturing/FlockProduces/FlockProducePage.razor.rz.scp.css */
.tabs[b-1owh1qncp8] {
    width: 99%;
    margin: 0 auto;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px 8px 0 0;
}
/* /Pages/Manufacturing/Flocks/FlockPage.razor.rz.scp.css */
/* The page hands its scroll to this screen, so both columns have to keep their own content
   reachable: neither may spill onto the document, and neither may hide what does not fit. */
.flock-main[b-ip5jpqczh9],
.flock-sidebar[b-ip5jpqczh9] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* The grid takes the height the form above it leaves and scrolls inside itself. Both this wrapper
   and the grid's own root need the flex sizing, or the grid's height:100% has nothing to resolve
   against. The floor keeps a squeezed layout from collapsing it to nothing. */
.flock-productions[b-ip5jpqczh9],
.flock-productions[b-ip5jpqczh9]  .collection-list-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.flock-productions[b-ip5jpqczh9] {
    min-height: 12rem;
}
/* /Pages/Manufacturing/ManufacturingOrders/ManufacturingOrderPage.razor.rz.scp.css */
.manufacturing-order-layout[b-o5bjanzil3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.manufacturing-order-detail-panel[b-o5bjanzil3] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.manufacturing-order-details-grid[b-o5bjanzil3] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0.5rem;
}

/* The grid fills what the page leaves it and scrolls its own rows, so the Add row stays reachable. */
[b-o5bjanzil3] .manufacturing-order-details-grid .collection-list-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The panel keeps its height whatever the order count is; the list scrolls inside it. */
.linked-orders-scroll[b-o5bjanzil3] {
    max-height: 60vh;
    overflow-y: auto;
}
/* /Pages/OAuthConsent.razor.rz.scp.css */
/* OAuth consent — scoped page styles. Layout, spacing, radius, ellipsis, and the entry animation
   come from MudBlazor utilities and the shared app.css helpers (.rise-in, --benevia-ease,
   --benevia-font-mono, .auth-card-*); only the page-specific tints, borders, and interaction
   states live here. Colors reference the MudBlazor BeneviaTheme via --mud-palette-* variables.

   CSS isolation only scopes elements authored in OAuthConsent.razor: classes passed to MudBlazor
   components sit on elements that never receive the scope attribute, so every rule for such a
   class must be a ::deep selector anchored on a plain scoped ancestor, or it silently matches
   nothing. */

/* Center the card vertically when it fits, but never clip its top when it's taller than the
   viewport: auto block margins center-when-there-is-room and collapse to the viewport padding
   otherwise (unlike align-items:center, which pushes the top off-screen). */
.consent-viewport[b-6bw6pqc1jm]  .consent-card {
    margin-block: auto;
}

/* ---- Hero: who is asking ---- */
.consent-hero__glyph[b-6bw6pqc1jm] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
}

/* The client name is attacker-influenced (open self-registration): wrap it so a long or crafted
   name can never overflow the card or push the layout. Razor auto-encodes the value. */
.consent-hero[b-6bw6pqc1jm]  .consent-client {
    font-weight: 600;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

/* Flex children need min-width:0 or long content refuses to shrink/wrap. */
.account-panel__info[b-6bw6pqc1jm],
.destination__text[b-6bw6pqc1jm],
.level-option__text[b-6bw6pqc1jm] {
    min-width: 0;
}

/* ---- Destination (redirect host): terracotta caution tint over the outlined panel ---- */
.consent-body[b-6bw6pqc1jm]  .destination {
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.28);
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.08);
}

.consent-body[b-6bw6pqc1jm]  .destination__icon,
.consent-body[b-6bw6pqc1jm]  .destination__caption {
    color: var(--mud-palette-secondary-darken);
}

/* Optically align the panel icons with the first text line. */
.consent-body[b-6bw6pqc1jm]  .destination__icon,
.consent-body[b-6bw6pqc1jm]  .info-scopes__icon {
    margin-top: 2px;
}

.destination__host[b-6bw6pqc1jm] {
    font-family: var(--benevia-font-mono);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---- Access level selector ---- */
/* A self-contained radio-card: CSS-drawn dot + our own text. No dependency on any component's
   internal markup, so the row sizes to its content and never clips or overlaps. */
.level-option[b-6bw6pqc1jm] {
    --lift: 6px;

    border: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 140ms var(--benevia-ease),
                background-color 140ms var(--benevia-ease),
                box-shadow 140ms var(--benevia-ease);
}

.level-option:hover[b-6bw6pqc1jm] {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.40);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.03);
}

.level-option.is-selected[b-6bw6pqc1jm] {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.level-option:focus-visible[b-6bw6pqc1jm] {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.45);
}

/* CSS-drawn radio dot. */
.level-radio[b-6bw6pqc1jm] {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-text-secondary);
    transition: border-color 140ms ease;
}

.level-option:hover .level-radio[b-6bw6pqc1jm],
.level-option.is-selected .level-radio[b-6bw6pqc1jm] {
    border-color: var(--mud-palette-primary);
}

.level-option.is-selected .level-radio[b-6bw6pqc1jm]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
}

.level-option__title[b-6bw6pqc1jm] {
    font-weight: 600;
    line-height: 1.4;
}

.level-option__desc[b-6bw6pqc1jm] {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Prevents the button width from jumping when the submit spinner swaps in. */
.consent-actions[b-6bw6pqc1jm]  .consent-actions__approve {
    min-width: 108px;
}
/* /Pages/Orders/SalesOrderPage.razor.rz.scp.css */
/* The scroller below clips its own content, so this stays visible and lets the totals bar
   spread past the panel's padding to the card's border. */
.sales-order-layout[b-drulz08qrh] {
    --totals-bar-inset: 10px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.sales-order-scroller[b-drulz08qrh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sales-order-details-grid[b-drulz08qrh] {
    min-height: 0;
    padding: 0 0 0.5rem;
}

.sales-order-entry-row[b-drulz08qrh] {
    padding: 0 0 0.75rem;
}

.sales-order-edit-layout[b-drulz08qrh] {
    --totals-bar-inset: 10px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    width: 100%;
}

.sales-order-edit-scroll[b-drulz08qrh] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.order-sidebar[b-drulz08qrh] {
    height: 100%;
}

    .order-sidebar[b-drulz08qrh]  .panel {
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    /* CoreEntityTabs wraps MudTabs in a plain div carrying its Class, and MudBlazor leaves the
   horizontal panel container at auto height. Both sit between the panel and the tab content
   with nothing sizing them, so the content used to decide its own height and stretch the
   sidebar. Bounding them is what lets the tab panel's percentage height and every
   min-height:0 below it resolve, so an oversized card scrolls internally. */
    .order-sidebar[b-drulz08qrh]  .tight-tabs {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .order-sidebar[b-drulz08qrh]  .mud-tabs {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .order-sidebar[b-drulz08qrh]  .mud-tabs-panels {
        flex: 1 1 auto;
        min-height: 0;
    }

    .order-sidebar[b-drulz08qrh]  .mud-tabs-tabbar-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        margin: auto !important;
    }

    .order-sidebar[b-drulz08qrh]  .mud-tab-panel {
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

        /* Keep tab content at natural height by default: without this, an oversized
   flexing sibling (e.g. a long availability list) makes every child shrink
   proportionally and squashes the date picker and view toggle. */
        .order-sidebar[b-drulz08qrh]  .mud-tab-panel > * {
            flex: 0 0 auto;
        }

        /* Schedule tab: the availability card (chip list or plans list, both flex columns
   with an internal scrollable-list) fills the space left under the date picker
   and view toggle, mirroring the Activities tab's previous-orders list. */
        .order-sidebar[b-drulz08qrh]  .mud-tab-panel > .availability-card,
        .order-sidebar[b-drulz08qrh]  .mud-tab-panel > .plans-card {
            flex: 1 1 auto;
            min-height: 0;
        }

.sales-order-report-selector[b-drulz08qrh] {
    min-width: 0;
}

.sales-order-sidebar-section[b-drulz08qrh] {
    display: grid;
    gap: 0.65rem;
}

.sales-order-sidebar-section-heading[b-drulz08qrh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sales-order-sidebar-section-icon[b-drulz08qrh] {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
}

.sales-order-sidebar-section-count[b-drulz08qrh] {
    display: inline-flex;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    padding: 0 0.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sales-order-tracking-list[b-drulz08qrh] {
    display: grid;
    gap: 0.5rem;
}

.sales-order-tracking-row[b-drulz08qrh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.55rem 0.4rem 0.55rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.sales-order-tracking-content[b-drulz08qrh] {
    display: grid;
    min-width: 0;
}

.sales-order-tracking-value[b-drulz08qrh] {
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sales-order-tracking-copy[b-drulz08qrh] {
    flex: 0 0 auto;
}

[b-drulz08qrh] .sales-order-tracking-copy .mud-icon-button {
    min-width: 36px;
    min-height: 36px;
}

[b-drulz08qrh] .sales-order-report-selector .benevia-report-selector-split {
    min-width: 0;
}

    [b-drulz08qrh] .sales-order-report-selector .benevia-report-selector-split > .mud-button-root:first-child {
        min-width: 7.75rem;
        max-width: 10rem;
    }

        [b-drulz08qrh] .sales-order-report-selector .benevia-report-selector-split > .mud-button-root:first-child .mud-button-label {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

[b-drulz08qrh] .sales-order-details-grid-edit .list-view-cell[data-col-index="0"] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* The blank line has no marker, and its quantity still has to line up with the ones above it. */
[b-drulz08qrh] .sales-order-line-marker {
    display: inline-flex;
    justify-content: center;
    flex: 0 0 1.25rem;
    opacity: .2;
}

[b-drulz08qrh] .sales-order-details-grid .fluent-collection {
    margin: 0;
}

[b-drulz08qrh] .sales-order-details-grid .fluent-collection-scroll-wrapper {
    overflow-y: hidden;
}

[b-drulz08qrh] .sales-order-note-editor textarea {
    max-height: 120px !important;
    overflow-y: auto !important;
}

.sales-order-payment-list[b-drulz08qrh] {
    display: grid;
    gap: 0.5rem;
}

.sales-order-payment-row[b-drulz08qrh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}

    .sales-order-payment-row:hover[b-drulz08qrh],
    .sales-order-payment-row:focus-visible[b-drulz08qrh] {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 42%, var(--mud-palette-lines-default));
    }

.sales-order-payment-content[b-drulz08qrh] {
    display: grid;
    min-width: 0;
}

.sales-order-payment-method[b-drulz08qrh] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.sales-order-payment-date[b-drulz08qrh] {
    font-size: 0.75rem;
    line-height: 1.4;
}

.sales-order-payment-amount[b-drulz08qrh] {
    font-weight: 600;
    white-space: nowrap;
}

.sales-order-payment-amount-voided[b-drulz08qrh] {
    text-decoration: line-through;
    opacity: 0.65;
}

/* MudBlazor floors the static picker at 310x305 via min-width/min-height on three nested
   elements; all of them have to be released before the calendar can shrink. The day cell and
   the weekday label must keep the same width or the columns stop lining up. */
.compact-datepicker[b-drulz08qrh]  .mud-picker-static,
.compact-datepicker[b-drulz08qrh]  .mud-picker-content,
.compact-datepicker[b-drulz08qrh]  .mud-picker-calendar-container {
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    width: 250px;
    height: 220px;
}

.compact-datepicker[b-drulz08qrh]  .mud-picker-calendar .mud-day {
    width: 30px;
    height: 30px;
    margin: 0 1px;
}

.compact-datepicker[b-drulz08qrh]  .mud-picker-calendar-header-day .mud-day-label {
    width: 32px;
    margin: 0 1px;
}

.compact-datepicker[b-drulz08qrh]  .mud-picker-calendar-transition {
    margin-top: 4px;


}

.compact-datepicker[b-drulz08qrh]  .mud-picker-calendar-header-switch > .mud-icon-button {
    padding: 4px;
    margin: 0;
}
/* /Pages/Payments/PaymentEntryPage.razor.rz.scp.css */
/* ============================================================
   Column widths for the allocation document grids
   ============================================================ */
[b-1yf4291pis] .payment-doc-table .payment-doc-col-check {
    width: 44px;
    padding-right: 0;
}

/* No explicit width on the remaining columns. With table-layout: fixed and
   width: 100% on the table root, all columns after the 44 px checkbox column
   receive an equal share of whatever space the container provides. */

[b-1yf4291pis] .payment-doc-table th:not(.payment-doc-col-check) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-1yf4291pis] .payment-doc-table .mud-table-cell {
    padding-top: 3px;
    padding-bottom: 3px;
}

[b-1yf4291pis] .payment-doc-table .payment-doc-amount-field .mud-input-root {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.875rem;
}

[b-1yf4291pis] .payment-doc-table .payment-doc-amount-field .mud-input {
    height: 28px;
}

/* ============================================================
   Page layout
   .cp-page is a plain <div> rendered directly by this component,
   so it carries PaymentEntryPage's own scope attribute.
   ============================================================ */

.cp-page[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 16px 16px;
    box-sizing: border-box;
}

/* ============================================================
   Slim scrollbars for the page and the document grid area
   ============================================================ */

.cp-page[b-1yf4291pis],
.cp-doc-panel[b-1yf4291pis]  .mud-tabs-panels {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent) transparent;
}

.cp-page[b-1yf4291pis]::-webkit-scrollbar,
.cp-doc-panel[b-1yf4291pis]  .mud-tabs-panels::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.cp-page[b-1yf4291pis]::-webkit-scrollbar-track,
.cp-doc-panel[b-1yf4291pis]  .mud-tabs-panels::-webkit-scrollbar-track {
    background: transparent;
}

.cp-page[b-1yf4291pis]::-webkit-scrollbar-thumb,
.cp-doc-panel[b-1yf4291pis]  .mud-tabs-panels::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent);
}

.cp-page[b-1yf4291pis]::-webkit-scrollbar-thumb:hover,
.cp-doc-panel[b-1yf4291pis]  .mud-tabs-panels::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 55%, transparent);
}

/* Top section: header row + error alert. Fixed height. */
.cp-top[b-1yf4291pis] {
    flex-shrink: 0;
}

/* Two-pane body: entry column on the left, documents on the right. */
.cp-body[b-1yf4291pis] {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 4px;
}

.cp-left[b-1yf4291pis] {
    flex: 0 0 400px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Document panel: fills the remaining width; contains tabs + footer. */
.cp-doc-panel[b-1yf4291pis] {
    flex: 1;
    min-width: 0;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
}

/* Stack the panes on narrow screens. */
@media (max-width: 959.98px) {
    .cp-body[b-1yf4291pis] {
        flex-direction: column;
    }

    .cp-left[b-1yf4291pis] {
        flex: none;
    }
}

/* ============================================================
   MudTabs inside cp-doc-panel.
   .cp-doc-panel carries PaymentEntryPage scope, so
   ".cp-doc-panel ::deep" compiles to ".cp-doc-panel[b-xxx]" —
   the scope anchor is on the plain div, and ::deep allows matching
   MudBlazor child component internals from there.
   ============================================================ */

/* Absorbs all space above the footer. CoreEntityTabs wraps MudTabs in the element carrying
   Class, so the wrapper and the MudTabs root both have to form the flex column. */
.cp-doc-panel[b-1yf4291pis]  .cp-tabs,
.cp-doc-panel[b-1yf4291pis]  .cp-tabs .mud-tabs {
    flex: 1;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}

.cp-doc-panel[b-1yf4291pis]  .cp-tabs .mud-tab{
    padding-right: 20px;   
}

/* Tab panels area: the scroll container for document rows. */
.cp-doc-panel[b-1yf4291pis]  .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

/* Remove MudTable's own scroll container so .mud-tabs-panels scrolls.
   FixedHeader="true" is kept so MudBlazor marks <thead> as sticky;
   sticky is then relative to .mud-tabs-panels as the scroll ancestor. */
.cp-doc-panel[b-1yf4291pis]  .mud-table-container {
    overflow: visible !important;
    max-height: none !important;
    width: 100%;
}

/* table-layout: fixed makes percentage <th> widths exact and lets the
   unlabelled Number column fill whatever remains. */
.cp-doc-panel[b-1yf4291pis]  .payment-doc-table .mud-table-root {
    width: 100%;
    table-layout: fixed;
}

/* Empty state before a customer is selected: fills the whole panel. */
.cp-doc-empty[b-1yf4291pis] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    text-align: center;
}

.cp-doc-empty-icon-frame[b-1yf4291pis] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

.cp-doc-empty-icon-frame[b-1yf4291pis]  .cp-doc-empty-icon {
    width: 24px;
    height: 24px;
    color: var(--mud-palette-primary);
}

/* Empty-tab message: fills the panel and centers the text. */
.cp-empty-tab[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
}

.cp-empty-tab[b-1yf4291pis]  .cp-empty-tab-icon {
    width: 26px;
    height: 26px;
    color: var(--mud-palette-action-default);
}

/* Footer: always pinned at the bottom of cp-doc-panel. */
.cp-footer[b-1yf4291pis] {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 2%, var(--mud-palette-surface));
}

/* ============================================================
   Header
   ============================================================ */

.cp-header-text[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-page[b-1yf4291pis]  .cp-action-button {
    min-width: 120px;
    height: 38px;
    border-radius: 8px;
}

.cp-page[b-1yf4291pis]  .cp-action-spinner {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px;
    color: inherit;
}

/* ============================================================
   Error banner
   ============================================================ */

.cp-error-banner[b-1yf4291pis] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-error-darken);
    font-size: 0.875rem;
}

.cp-error-banner[b-1yf4291pis]  .cp-error-banner-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--mud-palette-error);
}

.cp-error-banner-text ul[b-1yf4291pis] {
    margin: 0;
    padding-left: 18px;
}

/* ============================================================
   Cards (MudPaper roots — anchored via the scoped .cp-page div)
   ============================================================ */

.cp-page[b-1yf4291pis]  .cp-card {
    flex-shrink: 0;
    border-radius: 10px;
    border-color: var(--mud-palette-lines-default);
}

/* Placeholder hint shown inside a card before a customer is selected. */
.cp-card-hint[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    margin-top: 4px;
    text-align: center;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
}

.cp-card-hint[b-1yf4291pis]  .cp-card-hint-icon {
    width: 22px;
    height: 22px;
    color: var(--mud-palette-action-default);
}

/* Method list: cap the height so many methods scroll inside the card. */
/* Ghost method tiles shown before a customer is selected: same footprint as the real
   tiles so the card doesn't change shape when the list loads. */
.cp-method-ghosts[b-1yf4291pis] {
    display: grid;
    gap: 10px;
    padding: 2px;
}

.cp-method-ghost[b-1yf4291pis] {
    height: 46px;
    border: 1.5px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mud-palette-lines-default) 8%, transparent);
}

/* Breathing room inside the payment fields card: the floating field labels need headroom
   at the top, and Enter-to-pay wraps everything in this div. */
.cp-payment-fields[b-1yf4291pis] {
    padding: 4px 2px 2px;
}

/* Shows 3 tiles; longer method lists scroll inside the card. The 4px padding plus
   scroll-padding keeps the focus ring of the active tile fully visible when arrow-key
   navigation auto-scrolls it into view. */
.cp-method-list[b-1yf4291pis] {
    max-height: 176px;
    overflow-y: auto;
    margin: 2px 0;
    padding: 4px 8px 4px 4px;
    scroll-padding-block: 6px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent) transparent;
}

.cp-method-list[b-1yf4291pis]::-webkit-scrollbar {
    width: 6px;
}

.cp-method-list[b-1yf4291pis]::-webkit-scrollbar-track {
    background: transparent;
}

.cp-method-list[b-1yf4291pis]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 35%, transparent);
}

/* Skeleton placeholders while the workflow loads. */
.cp-skeleton-list[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-skeleton-list[b-1yf4291pis]  .mud-skeleton {
    border-radius: 8px;
}

/* ============================================================
   Customer card
   ============================================================ */

.cp-customer-summary[b-1yf4291pis] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
}

.cp-customer-avatar[b-1yf4291pis] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 700;
    font-size: 0.8125rem;
}

.cp-customer-summary-text[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 38px;
}

.cp-customer-address[b-1yf4291pis] {
    display: flex;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.cp-customer-address > div[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
}

.cp-customer-address[b-1yf4291pis]  .cp-customer-address-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ============================================================
   Label/value rows (Change, Available amount, On account)
   ============================================================ */

.cp-kv-row[b-1yf4291pis] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.875rem;
}

.cp-kv-label[b-1yf4291pis] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.cp-kv-value[b-1yf4291pis] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* ============================================================
   Framed inline checkbox (Is credit payment)
   ============================================================ */

.cp-inline-option[b-1yf4291pis] {
    padding: 2px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cp-inline-option:has(input:checked)[b-1yf4291pis] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

/* ============================================================
   Numeric alignment in the document grids
   ============================================================ */

[b-1yf4291pis] .payment-doc-table th.payment-doc-col-amount,
[b-1yf4291pis] .payment-doc-table th.payment-doc-col-balance,
[b-1yf4291pis] .payment-doc-table td.cp-num {
    text-align: right;
}

[b-1yf4291pis] .payment-doc-table td.cp-num {
    font-variant-numeric: tabular-nums;
}

[b-1yf4291pis] .payment-doc-table .payment-doc-amount-field input {
    text-align: right;
}

/* ============================================================
   Footer chips and stat tiles
   ============================================================ */

.cp-selected-chip[b-1yf4291pis] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-primary-darken);
    font-size: 0.75rem;
    font-weight: 600;
}

.cp-remainder-pill[b-1yf4291pis] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 35%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning-darken);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cp-remainder-pill[b-1yf4291pis]  .cp-remainder-pill-icon {
    width: 15px;
    height: 15px;
}

.cp-stat-tile[b-1yf4291pis] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.cp-stat-label[b-1yf4291pis] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.cp-stat-value[b-1yf4291pis] {
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.cp-stat-tile--primary[b-1yf4291pis] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.cp-stat-tile--primary .cp-stat-value[b-1yf4291pis] {
    color: var(--mud-palette-primary-darken);
}
/* /Pages/Payments/PaymentPage.razor.rz.scp.css */
.payment-view[b-ibv10jq3zt] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 16px 24px;
    max-width: 760px;
}

.payment-rows[b-ibv10jq3zt] {
    display: flex;
    flex-direction: column;
}

.payment-rows--facts[b-ibv10jq3zt] {
    max-width: 520px;
}

.payment-row[b-ibv10jq3zt] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
}

.payment-row + .payment-row[b-ibv10jq3zt] {
    border-top: 0;
}

.payment-row-label[b-ibv10jq3zt] {
    flex: 0 0 132px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.payment-row-value[b-ibv10jq3zt] {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.payment-amount-value[b-ibv10jq3zt] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.payment-reference-value[b-ibv10jq3zt] {
    min-width: 0;
}

.payment-reference-field[b-ibv10jq3zt] {
    display: block;
    width: min(280px, 100%);
}

.payment-row-note[b-ibv10jq3zt] {
    display: block;
    max-width: 420px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.payment-section-title[b-ibv10jq3zt] {
    font-weight: 600;
    margin-bottom: 6px;
}

.payment-deposits[b-ibv10jq3zt] {
    min-width: 0;
}

.payment-deposits-table[b-ibv10jq3zt] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
}

.payment-deposits-table[b-ibv10jq3zt]  .mud-table-container {
    overflow-x: auto;
}

.payment-deposits-table[b-ibv10jq3zt]  .mud-table-root {
    min-width: 560px;
}

.payment-table-link[b-ibv10jq3zt] {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.payment-money-column[b-ibv10jq3zt],
.payment-money-cell[b-ibv10jq3zt] {
    text-align: right;
}

.payment-money-cell[b-ibv10jq3zt] {
    font-variant-numeric: tabular-nums;
}
/* /Pages/Settings/Account/ConnectedApps.razor.rz.scp.css */
/* Layout and spacing come from MudBlazor utilities and app.css; only page-specific state lives here. */

/* Border, radius, and shadow come from the shared .settings-surface island recipe. */
.connect-panel[b-6i3sxjlik3] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.connect-url[b-6i3sxjlik3] {
    flex: 1 1 auto;
    font-family: var(--benevia-font-mono);
    font-size: 0.8125rem;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
}

/* Flex children need min-width:0 or long content refuses to shrink. */
.connect-url[b-6i3sxjlik3],
.app-row__body[b-6i3sxjlik3] {
    min-width: 0;
}

.app-row[b-6i3sxjlik3]  .app-row__name {
    min-width: 0;
    font-weight: 600;
}

.connect-panel[b-6i3sxjlik3]  .connect-panel__title {
    font-weight: 600;
}

.app-row[b-6i3sxjlik3] {
    transition: background-color 160ms var(--benevia-ease),
                border-color 160ms var(--benevia-ease);
}

.app-row:hover[b-6i3sxjlik3] {
    background-color: var(--benevia-hover-tint);
    border-color: var(--benevia-line-strong);
}

/* Nudge the Disconnect button below MudBlazor's small size (::deep to reach the rendered button). */
.app-row__actions[b-6i3sxjlik3]  .disconnect-btn {
    min-height: 26px;
    padding: 2px 10px;
    font-size: 0.75rem;
}

.app-row__actions[b-6i3sxjlik3]  .disconnect-btn .mud-icon-root {
    font-size: 1rem;
}

@media (max-width: 600px) {
    .app-row[b-6i3sxjlik3] {
        flex-wrap: wrap;
    }

    .app-row__actions[b-6i3sxjlik3] {
        flex-direction: row;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
}
/* /Pages/Settings/Account/PatManagement.razor.rz.scp.css */
.pat-secret-row[b-pktrqql6st] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.pat-secret-token[b-pktrqql6st] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default, #e9ecef);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    font-family: var(--benevia-font-mono, ui-monospace, Consolas, monospace);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.pat-no-roles[b-pktrqql6st] {
    opacity: 0.6;
    font-style: italic;
}

.pat-role-tree[b-pktrqql6st] {
    max-height: 32vh;
    overflow-y: auto;
    padding-right: 4px;
}

    .pat-role-tree[b-pktrqql6st]  .pat-role-node {
        padding: 6px 2px;
    }

    .pat-role-tree[b-pktrqql6st]  .pat-role-name {
        font-weight: 600;
    }

    .pat-role-tree[b-pktrqql6st]  .pat-responsibility-name {
        font-size: 0.82rem;
        line-height: 1.15rem;
    }

    .pat-role-tree[b-pktrqql6st]  .pat-responsibility-desc {
        font-size: 0.74rem;
        line-height: 1.05rem;
    }
/* /Pages/Settings/Company/HatchDays.razor.rz.scp.css */
.hatch-days-column[b-b30s8a99q9] {
    max-width: 560px;
}

.hatch-days[b-b30s8a99q9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Same selection language as .settings-list-item.selected: a 5% tint plus a primary border. */
.hatch-day[b-b30s8a99q9] {
    border: 1px solid var(--mud-palette-lines-default, #e9ecef);
    border-radius: 8px;
    transition: background-color 180ms var(--benevia-ease), border-color 180ms var(--benevia-ease);
}

.hatch-day:hover[b-b30s8a99q9] {
    background-color: var(--benevia-hover-tint);
}

.hatch-day.checked[b-b30s8a99q9] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-color: var(--mud-palette-primary);
}

/* :focus-within would leave the ring on the row the mouse last clicked, making it read as
   different from the other checked days. The focusable element is MudBlazor's nested input, so
   the row asks about it rather than matching :focus-visible itself. */
.hatch-day:has(:focus-visible)[b-b30s8a99q9] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.hatch-day[b-b30s8a99q9]  .mud-checkbox {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 2px 12px 2px 4px;
}

.hatch-day[b-b30s8a99q9]  .mud-checkbox > .mud-typography {
    font-size: 0.875rem;
}

.hatch-day.checked[b-b30s8a99q9]  .mud-checkbox > .mud-typography {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

@media (prefers-reduced-motion: reduce) {
    .hatch-day[b-b30s8a99q9] {
        transition: none;
    }
}
/* /Pages/Settings/Company/MyRoles.razor.rz.scp.css */
.my-role-tree[b-ltxssff2ae] {
    padding-right: 4px;
}

.my-role-tree[b-ltxssff2ae]  .my-role-node {
    padding: 0 2px 6px;
}

.my-role-tree[b-ltxssff2ae]  .my-role-header-row {
    min-height: 28px;
}

.my-role-tree[b-ltxssff2ae]  .my-role-resp-toggle {
    margin: 0;
}

.my-role-tree[b-ltxssff2ae]  .my-role-name {
    font-weight: 600;
}

.my-role-tree[b-ltxssff2ae]  .my-role-title-block {
    min-width: 0;
}

.my-role-tree[b-ltxssff2ae]  .my-role-subtitle {
    font-size: 0.74rem;
    line-height: 1.05rem;
}

.my-role-tree[b-ltxssff2ae]  .my-role-resp-name {
    font-size: 0.82rem;
    line-height: 1.15rem;
    font-weight: 500;
}

.my-role-tree[b-ltxssff2ae]  .my-role-resp-desc {
    font-size: 0.74rem;
    line-height: 1.05rem;
}
/* /Pages/Settings/Company/Settings.razor.rz.scp.css */
.logo-row[b-jma7d0pok7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

/* Landscape, because company logos are wordmarks (uploads are capped at 500x250). */
.logo-preview[b-jma7d0pok7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 240px;
    height: 110px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default, #e9ecef);
    border-radius: 8px;
    background: var(--benevia-surface-alt);
    overflow: hidden;
}

    .logo-preview[b-jma7d0pok7]  .logo-image {
        max-width: 100%;
        max-height: 100%;
    }

    .logo-preview[b-jma7d0pok7]  .logo-placeholder {
        width: 22px;
        height: 22px;
        font-size: 22px;
        color: var(--benevia-ink-muted);
    }

.logo-actions[b-jma7d0pok7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Wraps so Remove never gets clipped by the card edge on a narrow column. */
.logo-buttons[b-jma7d0pok7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* /Pages/Settings/Company/TagManager.razor.rz.scp.css */
.tag-toolbar[b-fx3zaki54k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tag-toolbar[b-fx3zaki54k]  .tag-search {
    flex: 0 1 320px;
}

/* An outlined dense field is taller than the 40px settings table row, so the row that is
   being renamed needs its padding trimmed or the whole table jumps. */
.tag-table[b-fx3zaki54k]  .mud-table-row .mud-table-cell:has(.mud-input-control) {
    padding-top: 4px;
    padding-bottom: 4px;
}
/* /Pages/Settings/Company/UserForm.razor.rz.scp.css */
/* Blazor stamps the isolation attribute only on plain elements, so anything targeting a
   MudBlazor-rendered node has to hang off a real element with ::deep. */
.user-roles[b-j4cdx3p3z0]  .user-role-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 4px 4px 4px 12px;
    margin-bottom: 4px;
    border: 1px solid var(--mud-palette-lines-default, #e9ecef);
    border-radius: 8px;
}

.user-roles[b-j4cdx3p3z0]  .user-role-text {
    flex: 1;
    min-width: 0;
}

.user-roles[b-j4cdx3p3z0]  .user-role-name {
    font-weight: 500;
}

/* Sits under the switch label rather than under the track. */
.user-switch-caption[b-j4cdx3p3z0] {
    margin-top: -6px;
    margin-left: 48px;
}
/* /Pages/Settings/Financials/PaymentMethod.razor.rz.scp.css */
/* Only drag-and-drop specifics live here; the item itself is styled by SettingsListItem. */
[b-7nv010wdhe] .payment-methods-list {
    display: flex;
    flex-direction: column;
}

[b-7nv010wdhe] .payment-methods-list .mud-drop-zone,
[b-7nv010wdhe] .payment-methods-list .mud-drop-container {
    min-height: 0 !important;
}

[b-7nv010wdhe] .mud-drop-item .settings-list-item {
    cursor: grab;
}

[b-7nv010wdhe] .mud-drop-item .settings-list-item:active {
    cursor: grabbing;
}

[b-7nv010wdhe] .mud-drop-item-placeholder {
    background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.1) 0%, rgba(var(--mud-palette-primary-rgb), 0.05) 100%);
    border: 2px dashed var(--mud-palette-primary);
    border-radius: 8px;
    margin-bottom: 14px;
    min-height: 58px;
}

[b-7nv010wdhe] .mud-drop-item.mud-drop-item-dragging {
    opacity: 0.6;
    transform: scale(0.98) rotate(1deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    cursor: grabbing !important;
}

[b-7nv010wdhe] .mud-drop-zone.mud-drop-zone-drag-in-progress {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.03);
    border-radius: 8px;
    padding: 4px;
}
/* /Pages/Settings/Sales/ContractDetail.razor.rz.scp.css */
/* The editor pane is a stack of cards; the last one must not add trailing space. */
.contract-detail > :last-child[b-1o6roj4z95] {
    margin-bottom: 0;
}

.contract-table-toolbar[b-1o6roj4z95] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* Long values truncate rather than widening the table, so the declared column widths hold. */
.contract-table[b-1o6roj4z95]  .mud-table-root {
    table-layout: fixed;
}

/* Rows carrying editors sit one notch denser than the shared settings table. */
.contract-table[b-1o6roj4z95]  .mud-table-root .mud-table-row .mud-table-cell {
    height: auto;
    padding: 5px 6px;
}

/* MudBlazor strips the outline from every input inside a data-grid edit cell. The mockup keeps
   a bordered control in these tables, because a cell that can be typed into has to look like it. */
.contract-table[b-1o6roj4z95]  .mud-table-cell .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 1px;
    border-style: solid;
    border-color: var(--benevia-line-strong);
}

.contract-table[b-1o6roj4z95]  .mud-table-cell .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--mud-palette-action-default);
}

.contract-table[b-1o6roj4z95]  .mud-table-cell .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--mud-palette-primary);
}

/* One notch denser than a form field, as the mockup edit tables are. MudBlazor resets the slot
   to content-box, so its vertical padding has to go rather than be absorbed by the height. */
.contract-table[b-1o6roj4z95]  .mud-input.mud-input-outlined > input,
.contract-table[b-1o6roj4z95]  .mud-input.mud-input-outlined > div.mud-input-slot {
    box-sizing: border-box;
    height: 34px;
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
}

.contract-table[b-1o6roj4z95]  .contract-actions-cell {
    text-align: right;
    white-space: nowrap;
}