@import '_content/TX.Web.Client.UI/TX.Web.Client.UI.54rh3jdu2x.bundle.scp.css';

/* /Components/Copilot/TXCopilot.razor.rz.scp.css */
/* Mount point for the Glu AI Assistant micro-frontend.
   The bundle renders its own chat surface inside this element, so only the
   positioning of the container is defined here. */
.tx-copilot-mfe[b-t01cg7pnfa] {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;
}
/* /Components/Dashboard/FinancialOperations/DashboardCounterpartyLoans.razor.rz.scp.css */
.hatched-cell[b-lzpgpaktnn] {
    background: #f2f2f2;
}

.primary-table-cell[b-lzpgpaktnn] {
    background: #CCCCCC;
    color: var(--text-color);
}

.secondary-table-cell[b-lzpgpaktnn] {
    background: var(--secondary-color);
    color: var(--text-color);
}

.tertiary-table-cell[b-lzpgpaktnn] {
    background: #EDEDED;
    color: var(--text-color);
}
/* /Components/Dashboard/FinancialOperations/DashboardFacilityUsageGroupedByBankAndCountry.razor.rz.scp.css */
.hatched-cell[b-1pmycbycbh] {
    background: #f2f2f2;
}

.primary-table-cell[b-1pmycbycbh] {
    background: var(--primary-color);
    color: #fff;
}
/* /Components/Dashboard/FinancialOperations/DashboardIntercompanyLoans.razor.rz.scp.css */
.primary-table-cell[b-gf0m2yoch8] {
    background-color: #CCCCCC;
}
/* /Components/Dashboard/FinancialOperations/FacilityUsageDynamicColumns.razor.rz.scp.css */
.hatched-cell[b-x4manay3mp] {
    background: #f2f2f2;
}

.primary-table-cell[b-x4manay3mp] {
    background: var(--primary-color);
    color: #fff;
}
/* /Components/Dashboard/FinancialOperations/FacilityUsageGrouped.razor.rz.scp.css */
.hatched-cell[b-9q2zo3ltii] {
    background: #f2f2f2;
}

.primary-table-cell[b-9q2zo3ltii] {
    background: var(--primary-color);
    color: #fff;
}
/* /Components/Dashboard/FinancialOperations/GlobalCreditLimitUtilization.razor.rz.scp.css */
.hatched-cell[b-862cq9b1pn] {
    background: #f2f2f2;
}

.primary-table-cell[b-862cq9b1pn] {
    background: var(--primary-color);
    color: #fff;
}
/* /Components/Dunning/DunningBirchShell.razor.rz.scp.css */
:host[b-5bjvjcdisk] {
    --rcv-shell-bg: #f7f4ef;
    --rcv-surface: #ffffff;
    --rcv-surface-soft: #faf7f2;
    --rcv-border: #e6dfd4;
    --rcv-border-strong: #d8cbbb;
    --rcv-grid-line: #d1d1d1;
    --rcv-accent: #2d86d7;
    --rcv-accent-strong: #176bb4;
    --rcv-copy: #1f252d;
    --rcv-muted: #727a85;
    --rcv-shadow: 0 12px 30px rgba(31, 37, 45, 0.06);
}

.rcv-layout[b-5bjvjcdisk] {
    display: grid;
    grid-template-columns: 56px 289px 1fr;
    min-height: calc(100vh - 60px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--rcv-shell-bg);
}

.rcv-icon-rail[b-5bjvjcdisk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0 12px;
    background: #fbfaf8;
    border-right: 1px solid var(--rcv-border);
}

.rcv-rail-icon[b-5bjvjcdisk] {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--rcv-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.rcv-rail-icon:hover[b-5bjvjcdisk] {
    border-color: var(--rcv-border);
    background: var(--rcv-surface);
    color: var(--rcv-copy);
}

.rcv-rail-icon-active[b-5bjvjcdisk] {
    border-color: rgba(45, 134, 215, 0.2);
    background: linear-gradient(180deg, #3394e8 0%, #2278ca 100%);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(45, 134, 215, 0.2);
}

.rcv-rail-spacer[b-5bjvjcdisk] {
    flex: 1;
}

.rcv-rail-avatar[b-5bjvjcdisk] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #d6a77a 0%, #8a5f3d 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.rcv-sidebar[b-5bjvjcdisk] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 18px;
    background: #fbfaf8;
    border-right: 1px solid var(--rcv-border);
}

.rcv-sidebar-header[b-5bjvjcdisk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rcv-sidebar-heading[b-5bjvjcdisk] {
    min-width: 0;
}

.rcv-sidebar-actions[b-5bjvjcdisk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rcv-sidebar-title[b-5bjvjcdisk] {
    margin: 0;
    color: var(--rcv-copy);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rcv-sidebar-subtitle[b-5bjvjcdisk] {
    margin: 8px 0 0;
    color: var(--rcv-muted);
    font-size: 0.76rem;
    line-height: 1.55;
}

.rcv-sidebar-icon-btn[b-5bjvjcdisk] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--rcv-border);
    border-radius: 999px;
    background: var(--rcv-surface);
    color: var(--rcv-copy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.rcv-sidebar-create-btn[b-5bjvjcdisk] {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #c9ddf2;
    border-radius: 999px;
    background: #eef5fc;
    color: var(--rcv-accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.rcv-workspace-list[b-5bjvjcdisk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rcv-workspace-card[b-5bjvjcdisk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 12px;
    border: 1px solid var(--rcv-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 0 rgba(31, 37, 45, 0.04);
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.rcv-workspace-card:hover[b-5bjvjcdisk] {
    border-color: #d8d0c4;
    box-shadow: 0 10px 20px rgba(31, 37, 45, 0.05);
    transform: translateY(-1px);
}

.rcv-workspace-card-active[b-5bjvjcdisk] {
    border-color: #bfd9ef;
    background: linear-gradient(180deg, #fdfefe 0%, #f4f8fd 100%);
    box-shadow: 0 12px 24px rgba(45, 134, 215, 0.08);
}

.rcv-sidebar-item-indicator[b-5bjvjcdisk] {
    width: 4px;
    min-height: 52px;
    border-radius: 999px;
    flex-shrink: 0;
}

.rcv-indicator-purple[b-5bjvjcdisk] {
    background: #8b5cf6;
}

.rcv-indicator-green[b-5bjvjcdisk] {
    background: #10b981;
}

.rcv-indicator-blue[b-5bjvjcdisk] {
    background: #3b82f6;
}

.rcv-indicator-teal[b-5bjvjcdisk] {
    background: #14b8a6;
}

.rcv-sidebar-item-content[b-5bjvjcdisk] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.rcv-sidebar-item-name[b-5bjvjcdisk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--rcv-copy);
    font-size: 0.9rem;
    font-weight: 700;
}

.rcv-sidebar-item-name-text[b-5bjvjcdisk] {
    display: inline-flex;
    align-items: baseline;
}

.rcv-sidebar-item-name-initial[b-5bjvjcdisk] {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.12em;
}

.rcv-sidebar-item-name-icon[b-5bjvjcdisk] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.rcv-sidebar-item-meta[b-5bjvjcdisk] {
    color: var(--rcv-muted);
    font-size: 0.73rem;
    line-height: 1.5;
}

.rcv-workspace-menu[b-5bjvjcdisk] {
    color: #8c929b;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.08em;
}

.rcv-main[b-5bjvjcdisk] {
    min-width: 0;
    overflow-x: clip;
    overflow-y: auto;
    background: transparent;
}

.rcv-page-surface[b-5bjvjcdisk] {
    min-width: 0;
    padding: 18px 24px 36px;
}

[b-5bjvjcdisk] .tx-glu-page {
    background: transparent;
}

[b-5bjvjcdisk] .tx-glu-page .page {
    background: transparent;
}

[b-5bjvjcdisk] .tx-glu-page .page-header {
    margin-bottom: 18px;
    padding: 2px 0 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rcv-border);
}

[b-5bjvjcdisk] .tx-glu-page .previous-page {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--rcv-accent);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-5bjvjcdisk] .tx-glu-page .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

[b-5bjvjcdisk] .tx-glu-page .title-group h1 {
    margin: 0;
    color: var(--rcv-copy);
    font-size: clamp(1.45rem, 1.7vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

[b-5bjvjcdisk] .tx-glu-page .subtitle {
    margin-top: 6px;
    color: var(--rcv-muted);
    font-size: 0.84rem;
}

[b-5bjvjcdisk] .tx-glu-page .page-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid {
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    min-width: 0;
    overflow: hidden;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .toolbar {
    min-height: 50px;
    padding: 8px 16px;
    border-bottom: 1px solid #d1d1d1;
    background: #ffffff;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .toolbar .left-section,
[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .toolbar .right-section {
    gap: 12px;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .filters-container {
    min-height: 0;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-wrapper {
    background: #ffffff;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .loading-overlay {
    background: rgba(255, 255, 255, 0.76);
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid table.grid {
    width: 100%;
    border-collapse: collapse;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid table.grid thead th {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding: 0;
    color: #000;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    background: #ffffff;
    border-bottom: 1px solid #d1d1d1;
    vertical-align: middle;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid table.grid thead th::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: #d1d1d1;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid table.grid tbody td {
    box-sizing: border-box;
    height: 40px;
    padding: 0 16px;
    color: #000;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    border-bottom: 1px solid #d1d1d1;
    background: #ffffff;
    vertical-align: middle;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid table.grid tbody tr:last-child td {
    border-bottom: none;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid table.grid tbody tr:hover,
[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid table.grid tbody tr:hover td {
    background: #f7fbff;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .separator {
    background: #d1d1d1;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer {
    border-top: 1px solid #d1d1d1;
    background: #ffffff;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    min-height: 40px;
    padding: 0 16px;
    background: #ffffff;
    color: #6e6e6e;
    font-size: 0.75rem;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer .bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer .pagination-container {
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer .page-count {
    color: #000;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer .display-label,
[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer .page-controls {
    color: #6e6e6e;
    font-size: 0.75rem;
    align-items: center;
    gap: 6px;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .table-footer .display-label {
    color: #000;
    font-weight: 400;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .rcv-pagination-select {
    width: 52px;
    min-width: 52px;
    height: 30px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    background: #ffffff;
    padding: 0 8px;
    color: #000;
    font-size: 0.75rem;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .rcv-pagination-page-info {
    color: #000;
    font-weight: 600;
    white-space: nowrap;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .rcv-pagination-nav-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .rcv-pagination-nav {
    min-width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6e6e6e;
    font-size: 0.875rem;
    line-height: 1;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .rcv-pagination-nav:hover:not(:disabled) {
    color: #000;
}

[b-5bjvjcdisk] .dunning-birch-page .tx-glu-grid .rcv-pagination-nav:disabled {
    color: #c9c9c9;
}

[b-5bjvjcdisk] .dunning-birch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

[b-5bjvjcdisk] .dunning-invoice-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

[b-5bjvjcdisk] .dunning-cases-empty {
    max-width: 520px;
    padding: 28px;
    border: 1px solid var(--rcv-border);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #faf7f2 100%);
    box-shadow: var(--rcv-shadow);
}

@media (max-width: 1100px) {
    .rcv-layout[b-5bjvjcdisk] {
        grid-template-columns: 56px 250px 1fr;
    }

    .rcv-page-surface[b-5bjvjcdisk] {
        padding: 18px 20px 30px;
    }
}

@media (max-width: 860px) {
    .rcv-layout[b-5bjvjcdisk] {
        grid-template-columns: 1fr;
    }

    .rcv-icon-rail[b-5bjvjcdisk],
    .rcv-sidebar[b-5bjvjcdisk] {
        display: none;
    }

    .rcv-page-surface[b-5bjvjcdisk] {
        padding: 18px 14px 28px;
    }
}
/* /Components/Dunning/DunningGrid.razor.rz.scp.css */
.rcv-grid-container[b-wh67bmshe5] {
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    box-shadow: none;
    overflow: visible;
}

.table-wrapper[b-wh67bmshe5] {
    position: relative;
    background: #fff;
    overflow-x: auto;
    scrollbar-gutter: stable;
}

/* Force a visible scrollbar — overrides OS overlay-scrollbar setting */
.table-wrapper[b-wh67bmshe5]::-webkit-scrollbar {
    height: 8px;
    display: block;
}

.table-wrapper[b-wh67bmshe5]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-wrapper[b-wh67bmshe5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.table-wrapper[b-wh67bmshe5]::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

.rcv-grid-toolbar[b-wh67bmshe5] {
    min-height: 50px;
    padding: 8px 16px;
    border-bottom: 1px solid #d1d1d1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
}

.rcv-grid-toolbar-left[b-wh67bmshe5],
.rcv-grid-toolbar-right[b-wh67bmshe5] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.rcv-grid-toolbar-right[b-wh67bmshe5] {
    flex: 1;
    justify-content: flex-end;
}

.rcv-table[b-wh67bmshe5] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.rcv-table thead th[b-wh67bmshe5] {
    position: relative;
    height: 40px;
    padding: 0;
    border-bottom: 1px solid #d1d1d1;
    background: #fff;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.rcv-table thead th:not(:last-child)[b-wh67bmshe5]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: #d1d1d1;
}

.rcv-table tbody td[b-wh67bmshe5] {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.875rem;
    color: #000;
    border-bottom: 1px solid #d1d1d1;
    vertical-align: middle;
    background: #fff;
    white-space: normal;
    word-break: break-word;
}

.rcv-table tbody tr:last-child td[b-wh67bmshe5] {
    border-bottom: none;
}

.rcv-table tbody tr:hover[b-wh67bmshe5],
.rcv-table tbody tr:hover td[b-wh67bmshe5] {
    background: #f7fbff;
}

.dunning-grid-row-selected td[b-wh67bmshe5] {
    background: #eef6fb;
}

.dunning-grid-selection-column[b-wh67bmshe5],
.dunning-grid-selection-cell[b-wh67bmshe5] {
    width: 44px;
    min-width: 44px;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}

.dunning-grid-checkbox[b-wh67bmshe5] {
    width: 16px;
    height: 16px;
    accent-color: #0070b9;
    cursor: pointer;
}

.rcv-sort-button[b-wh67bmshe5] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.rcv-sort-button-content[b-wh67bmshe5] {
    display: flex;
    width: 100%;
    min-width: 0;
}

.rcv-header-content[b-wh67bmshe5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 16px;
}

.rcv-header-content-template[b-wh67bmshe5] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #000;
}

.rcv-header-title-group[b-wh67bmshe5] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.rcv-header-title[b-wh67bmshe5] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
}

.rcv-header-actions[b-wh67bmshe5] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex-shrink: 0;
}

.rcv-sort-indicator[b-wh67bmshe5] {
    color: #6e6e6e;
    font-size: 0.6875rem;
    line-height: 1;
}

.rcv-filter-icon[b-wh67bmshe5] {
    font-size: 0.75rem;
    color: #6e6e6e;
}

.rcv-empty-state[b-wh67bmshe5] {
    padding: 32px 16px;
    text-align: center;
    color: #6e6e6e;
}

.dunning-grid-loading[b-wh67bmshe5] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.76);
    z-index: 1;
}

.table-footer[b-wh67bmshe5] {
    border-top: 1px solid #d1d1d1;
    background: #fff;
}

.footer[b-wh67bmshe5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.75rem;
    color: #6e6e6e;
    gap: 12px;
    flex-wrap: wrap;
}

.bulk-actions[b-wh67bmshe5],
.pagination-container[b-wh67bmshe5],
.page-controls[b-wh67bmshe5],
.rcv-pagination-nav-group[b-wh67bmshe5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-actions[b-wh67bmshe5],
.pagination-container[b-wh67bmshe5] {
    flex-wrap: wrap;
}

.pagination-container[b-wh67bmshe5] {
    margin-left: auto;
    justify-content: flex-end;
    gap: 12px;
}

.display-label[b-wh67bmshe5] {
    color: #000;
    font-weight: 400;
}

.page-count[b-wh67bmshe5] {
    color: #000;
    font-weight: 500;
    white-space: nowrap;
}

.rcv-pagination-select[b-wh67bmshe5] {
    width: 52px;
    min-width: 52px;
    height: 30px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 0.75rem;
    color: #000;
    background: #fff;
    cursor: pointer;
}

.rcv-pagination-page-info[b-wh67bmshe5] {
    color: #000;
    font-weight: 600;
    white-space: nowrap;
}

.rcv-pagination-nav-group[b-wh67bmshe5] {
    gap: 4px;
}

.rcv-pagination-nav[b-wh67bmshe5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: #6e6e6e;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.rcv-pagination-nav:hover:not(:disabled)[b-wh67bmshe5] {
    color: #000;
}

.rcv-pagination-nav:disabled[b-wh67bmshe5] {
    color: #c9c9c9;
    cursor: default;
}

@media (max-width: 860px) {
    .rcv-grid-toolbar[b-wh67bmshe5] {
        flex-wrap: wrap;
    }

    .rcv-grid-toolbar-right[b-wh67bmshe5] {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .footer[b-wh67bmshe5],
    .pagination-container[b-wh67bmshe5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .pagination-container[b-wh67bmshe5] {
        margin-left: 0;
    }
}
/* /Components/Dunning/DunningInvoiceContactsEditor.razor.rz.scp.css */
.dunning-contacts-actions[b-bl3dp0x3m8] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dunning-contacts-summary-card[b-bl3dp0x3m8] {
    margin-bottom: 20px;
}

.dunning-contacts-summary[b-bl3dp0x3m8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 0;
}

.dunning-contacts-summary__eyebrow[b-bl3dp0x3m8] {
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.dunning-contacts-summary__company[b-bl3dp0x3m8] {
    color: #111827;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.dunning-contacts-summary__invoice[b-bl3dp0x3m8] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #1f2937;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    white-space: nowrap;
}

.dunning-contacts-summary__details[b-bl3dp0x3m8] {
    display: grid;
    gap: 12px;
    padding: 18px 24px 24px;
}

.dunning-contacts-grid-shell[b-bl3dp0x3m8] {
    margin-top: 8px;
}

.dunning-contacts-footer-actions[b-bl3dp0x3m8] {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.dunning-contact-modal__form[b-bl3dp0x3m8] {
    display: grid;
    gap: 16px;
}

.dunning-contact-modal__type-grid[b-bl3dp0x3m8] {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.dunning-contact-modal__hint[b-bl3dp0x3m8] {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.4;
}

.dunning-contact-modal__footer[b-bl3dp0x3m8] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .dunning-contacts-summary[b-bl3dp0x3m8] {
        align-items: stretch;
        flex-direction: column;
    }

    .dunning-contacts-summary__invoice[b-bl3dp0x3m8] {
        align-self: flex-start;
    }
}
/* /Components/FinancialOperations/InstrumentPaymentAudit/InstrumentPaymentAudit.razor.rz.scp.css */
.audit-timeline-separator[b-hzur814yqm] {
    background-color: #00000099;
    width: 1px;
    height: 2.5rem;
}
/* /Components/FinancialOperations/InstrumentPaymentAudit/InstrumentPaymentAuditItem.razor.rz.scp.css */
.instrument-payment-audit-header-text[b-ivi2f5199t] {
    font-size: 20px;
}

.instrument-payment-audit-body-text[b-ivi2f5199t] {
    font-size: 15px;
}

.instrument-payment-audit-detail-text[b-ivi2f5199t] {
    font-size: 14px;
    color: #000000;
}

.no-word-break[b-ivi2f5199t] {
    word-break: keep-all;
}
/* /Components/FinancialOperations/LetterAuditComponent.razor.rz.scp.css */
.audit-timeline-separator[b-3i6ah4ntrt] {
    background-color: #00000099;
    width: 3px;
    height: 2.5rem;
}
/* /Pages/CashPosition/CashPositionActionPanel.razor.rz.scp.css */
.action-panel-unfocus[b-pxnd40dprj] {
    width: 100%;
    height: 100%;
    z-index: 9;
    position: absolute;
}

.action-panel-item-image[b-pxnd40dprj] {
    width: 24px;
}

.action-panel-list-text[b-pxnd40dprj] {
    font-size: 16px;
    margin-bottom: -4px
}

.action-panel-list-subtext[b-pxnd40dprj] {
    font-size: 10px;
    color: var(--gray)
}

.action-panel-list[b-pxnd40dprj] {
    margin-bottom: 3px;
    box-shadow: 0px 2px 5px 1px var(--form-control-border-color);
    border-radius: 2px;
    background-color: var(--white);
    font-size: 16px;
    color: var(--button-primary-hover-background-color);
    font-weight: bold;
    margin-right: 86px;
}

.action-panel[b-pxnd40dprj] {
    position: sticky;
    bottom: 35px;
    min-width: 50px;
    min-height: 30px;
    z-index: 10;
    width: fit-content;
    padding: 0;
    align-items: center;
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    border-radius: 2px;
    background-color: transparent;
    font-size: 16px;
}

.action-panel-box[b-pxnd40dprj] {
    box-shadow: 0px 2px 5px 1px var(--form-control-border-color);
    background-color: var(--light-background);
}

.action-panel-item:hover[b-pxnd40dprj] {
    background-color: var(--disabled-color);
}

.action-panel-item[b-pxnd40dprj] {
    cursor: pointer;
    padding: 10px 65px 10px 20px;
}

.action-panel-button:hover[b-pxnd40dprj] {
    background-color: var(--disabled-color);
}

.action-panel-menu-button[b-pxnd40dprj] {
    width: 32px;
    cursor: pointer;
}

    .action-panel-menu-button:hover[b-pxnd40dprj] {
        background-color: var(--disabled-color);
    }

.action-panel-button[b-pxnd40dprj] {
    flex: 1;
    padding: 7px 10px;
    color: var(--button-primary-hover-background-color);
    font-weight: bold;
    cursor: pointer;
}

.count-box[b-pxnd40dprj] {
    width: 24px;
    border-radius: 12px;
    background-color: var(--button-primary-border-color);
    color: white;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: initial;
    font-size: 14px;
}
/* /Pages/Dunning/DunningCustomers.razor.rz.scp.css */
[b-04nxf08zd1] .dunning-customers-page .tx-glu-grid table.grid thead {
    transform: translateY(0) !important;
}
/* /Pages/Dunning/DunningDashboard.razor.rz.scp.css */
/* Receivables Dashboard — workspace-shell layout (see specs/features/receivables-dashboard-revamp.md) */

.workspace-shell[b-7qvb74di2s] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--background);
}

/* ---------- Section 1: Icon navigation rail ---------- */
.icon-rail[b-7qvb74di2s] {
    flex: 0 0 65px;
    width: 65px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    border-right: 1px solid var(--border-color);
    background: var(--white-color);
}

.icon-rail[b-7qvb74di2s]  .rail-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--secondary-text-color);
}

.icon-rail[b-7qvb74di2s]  .rail-button.selected {
    background: rgba(144, 217, 249, 0.25);
    color: var(--primary-color);
}

.icon-rail[b-7qvb74di2s]  .rail-button:hover {
    background: var(--light-background);
}

/* Icon-rail workspace-button + workspace-tabs nav styling is shared: see wwwroot/css/workspace-nav.css */

/* ---------- Section 2: Workspace navigation panel ---------- */
.workspace-panel[b-7qvb74di2s] {
    flex: 0 0 280px;
    width: 280px;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    background: #90D9F90A;
    border-right: 1px solid #D1D1D180;
    transition: flex-basis 220ms ease, width 220ms ease, padding 220ms ease, border-color 220ms ease;
}

.workspace-panel.collapsed[b-7qvb74di2s] {
    flex-basis: 0;
    width: 0;
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
    border-right-color: transparent;
}

.workspace-panel-header[b-7qvb74di2s] {
    margin-bottom: 16px;
}

.workspace-panel-title-row[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workspace-panel-title[b-7qvb74di2s] {
    margin: 0;
    font-size: 16px !important;
}

/* Accordion card look */
.workspace-panel[b-7qvb74di2s]  .workspace-accordion {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
    padding: 10px;
}

.workspace-accordion-header[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding-right: 4px;
}

.workspace-accordion-header .label[b-7qvb74di2s] {
    font-weight: 600;
}

/* ---------- Section 3: Content area ---------- */
.workspace-content[b-7qvb74di2s] {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.content-header[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-header-left[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.content-header-title[b-7qvb74di2s] {
    margin: 0;
    font-size: 24px !important;
    font-weight: 600;
}

.content-header-left[b-7qvb74di2s]  .collapse-panel-button {
    flex: 0 0 auto;
}

/* ---------- Portfolio KPI band ---------- */
.kpi-band[b-7qvb74di2s] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kpi-band-header[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kpi-band-title[b-7qvb74di2s] {
    font-size: 14px;
    font-weight: 600;
    color: var(--black-color);
}

.kpi-band[b-7qvb74di2s]  .kpi-period-button {
    color: var(--secondary-text-color);
    font-size: 13px;
}

.kpi-band-cards[b-7qvb74di2s] {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.kpi-band-cards[b-7qvb74di2s]  .tx-glu-tile {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 8px !important;
    gap: 5px;
    min-height: auto;
    padding: 15px !important;
}

.kpi-band-cards[b-7qvb74di2s]  .tx-glu-tile:hover, .kpi-band-cards[b-7qvb74di2s]  .tx-glu-tile:focus {
    box-shadow: none;
    outline: none;
}

.kpi-band-cards[b-7qvb74di2s]  .tx-glu-tile .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--black-color);
}

.kpi-band-cards[b-7qvb74di2s]  .tx-glu-tile .value {
    font-size: 24px;
    font-weight: 400;
    color: var(--black-color);
}

/* ---------- Work area: Action required / Latest actioned tabs ---------- */
.work-area-tabs[b-7qvb74di2s] {
    flex: 0 0 auto;
    margin-top: 4px;
}

/* The shared ocfo theme capitalises every word of a tab label; these labels are sentence case. */
.work-area-tabs[b-7qvb74di2s]  .tx-glu-tab-control .tab-strip .tab-button,
.work-area-tabs[b-7qvb74di2s]  .tx-glu-tab-control .tab-strip .tab-button span {
    text-transform: none;
}

.work-area-content[b-7qvb74di2s] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.priority-cell[b-7qvb74di2s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* GluGrid sizing inside the flex-column workspace content — same fix used by
   CustomerOverview.razor.css. `flex:0 1 auto`: grow 0 so the grid is only as tall as its rows and
   leaves no empty band above the pagination footer when the result set is short; shrink 1 +
   min-height:0 so it can still be capped by the leftover space, at which point .table-wrapper
   becomes the scroll container. height:auto overrides the theme's height:100%. Applies to both
   work-area tabs. */
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid thead {
    transform: none !important;
}

/* Suppress the wrapper's OWN native horizontal scrollbar — same fix as CustomerOverview.razor.css.
   The theme sets overflow-x:scroll, which together with scrollbar-width:thin surfaces a native
   horizontal bar in addition to the theme's separate fake .table-horizontal-scroll bar, i.e. two
   horizontal scrollbars. Hidden overflow-x still allows programmatic scrollLeft, so the JS-synced
   fake bar keeps driving horizontal scroll for both this grid and its RowDetailContent sub-grid
   (both share this selector via the "workspace-grid" class), while vertical scroll is unaffected. */
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid .table-wrapper {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    overflow-x: hidden !important;
    overflow-y: auto;
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid .table-wrapper::-webkit-scrollbar {
    width: 10px;
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid .table-wrapper::-webkit-scrollbar:horizontal {
    height: 0;
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--grey-1);
    border-radius: 4px;
}

/* Fixed table layout — same approach as Invoices.razor.css — so every GluGridColumn's pixel
   Width is honoured exactly (no browser auto-sizing) and the right-pinned Actions column stays
   flush against the true right edge instead of trailing behind extra auto-sized space. */
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid .table-wrapper table.grid {
    table-layout: fixed !important;
    width: max-content !important;
    min-width: 100% !important;
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.workspace-grid .table-wrapper table.grid th.placeholder {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Flexible column absorbs any leftover width so the visible columns fill the grid with no gap
   trailing before the pinned Actions column. */
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-grid .table-wrapper table.grid th[data-property-name="Workflow"] {
    width: auto !important;
    min-width: 200px;
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-detail-grid .table-wrapper table.grid th[data-property-name="ActionRequired"] {
    width: auto !important;
    min-width: 130px;
}

/* Right-align the amount headers (sub-row "Amount", Latest actioned "Value") over their
   right-aligned values, and move the filter button to the left of the title. The header cell is a
   flex row of .title-sort-container then the filter button; .resize-handle is absolutely positioned,
   so reordering these two doesn't disturb it. The theme gives th `padding-right: 0` while td keeps
   16px, so the title needs that inset back to line up with the value. */
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-detail-grid .table-wrapper table.grid th[data-property-name="Amount"] .title-sort-container,
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.recent-actions-grid .table-wrapper table.grid th[data-property-name="Amount"] .title-sort-container {
    justify-content: flex-end;
    padding-right: 16px;
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-detail-grid .table-wrapper table.grid th[data-property-name="Amount"] .grid-column > .tx-glu-button,
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.recent-actions-grid .table-wrapper table.grid th[data-property-name="Amount"] .grid-column > .tx-glu-button {
    order: -1;
    margin-right: 6px;
}

/* Keep each grid's own pinned Actions column flush to the right edge and at its intended
   (smaller) width — matches the pattern used for the Actions column on the Invoices page's Open
   tab grid (OpenInvoicesGrid.razor / Invoices.razor.css). This also makes the sub-grid's own
   pinned Actions column line up under the parent's, so the pinned strip reads as continuous
   while a row is expanded. */
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-grid .table-wrapper table.grid th[data-property-name="Actions"],
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-grid .table-wrapper table.grid td[data-name="Actions"] {
    width: 160px !important;
    right: 0 !important;
}

/* Thin vertical rule between the review button and the overflow kebab, in both the parent row
   ("Review all") and the sub-row ("Review") Actions cells. */
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-grid .actions-cell-divider,
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-detail-grid .actions-cell-divider {
    width: 1px;
    height: 20px;
    margin: 0 8px;
    background: var(--border-color);
}

.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-detail-grid .table-wrapper table.grid th[data-property-name="Actions"],
.work-area-content[b-7qvb74di2s]  .tx-glu-grid.action-required-detail-grid .table-wrapper table.grid td[data-name="Actions"] {
    width: 160px !important;
    right: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    .workspace-panel[b-7qvb74di2s] {
        transition: none;
    }
}

/* ==========================================================================
   "Review all" communication review modal (GluModal EnableBirchTheme="true").
   Only elements authored by this page are styled here; the Glu modal shell
   keeps its own theming. Scoped attributes travel with these elements even
   though GluModal renders through a layout portal.
   ========================================================================== */

.email-review[b-7qvb74di2s] {
    padding: 8px 0;
    min-width: min(560px, 82vw);
}

/* ---------- Previous email (conversation context for a reply) ---------- */
.email-review-previous[b-7qvb74di2s] {
    background: #F8F8F8;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.email-review-previous-label[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary-text-color);
    margin-bottom: 8px;
}

.email-review-previous-icon[b-7qvb74di2s] {
    width: 14px;
    height: 14px;
    color: var(--secondary-text-color);
}

.email-review-previous-body[b-7qvb74di2s] {
    font-size: 0.85rem;
    color: var(--secondary-text-color);
    white-space: pre-wrap;
    max-height: 160px;
    overflow-y: auto;
}

/* ---------- Communication card ---------- */
.email-review-card[b-7qvb74di2s] {
    background: #F8F8F8;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.email-review-card-resolved[b-7qvb74di2s] {
    opacity: 0.75;
}

.email-review-sender[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.email-review-avatar[b-7qvb74di2s] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.email-review-sender-info[b-7qvb74di2s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.email-review-sender-name[b-7qvb74di2s] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--black-color);
}

.email-review-sender-email[b-7qvb74di2s] {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

.email-review-sender-actions[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.email-review-decision[b-7qvb74di2s] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.email-review-decision-approved[b-7qvb74di2s] {
    background: rgba(50, 200, 70, 0.15);
    color: var(--success, #32c846);
}

.email-review-decision-rejected[b-7qvb74di2s] {
    background: rgba(223, 0, 0, 0.1);
    color: var(--error, #DF0000);
}

.email-review-decision-edited[b-7qvb74di2s] {
    background: rgba(0, 122, 255, 0.1);
    color: var(--primary-color);
}

.email-review-resolved-note[b-7qvb74di2s] {
    font-size: 0.8rem;
    color: var(--secondary-text-color);
}

/* ---------- Subject / body fields ---------- */
.email-review-field[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
}

.email-review-field-text[b-7qvb74di2s] {
    font-size: 0.85rem;
    color: var(--black-color);
    font-weight: 500;
}

.email-review-edit-btn[b-7qvb74di2s] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.email-review-edit-btn:hover:not(:disabled)[b-7qvb74di2s] {
    background: rgba(0, 122, 255, 0.08);
}

.email-review-edit-btn:disabled[b-7qvb74di2s] {
    color: var(--secondary-text-color);
    cursor: default;
}

.email-review-body-wrap[b-7qvb74di2s] {
    position: relative;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.email-review-body[b-7qvb74di2s] {
    font-size: 0.85rem;
    color: var(--black-color);
    line-height: 1.7;
    white-space: pre-wrap;
}

.email-review-body p[b-7qvb74di2s] {
    margin: 0;
}

.email-review-body-edit-btn[b-7qvb74di2s] {
    position: absolute;
    top: 12px;
    right: 12px;
}

.email-review-field[b-7qvb74di2s]  .email-review-field-input {
    flex: 1;
    margin-right: 8px;
    margin-bottom: 0;
}

.email-review-body-wrap[b-7qvb74di2s]  .email-review-body-input {
    margin: 0 32px 0 0;
}

/* ---------- Footer: pagination + decision actions ---------- */
.email-review-footer[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 12px;
}

.email-review-pagination[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.email-review-nav-btn[b-7qvb74di2s] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-color);
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.email-review-nav-btn:hover:not(.email-review-nav-btn-disabled)[b-7qvb74di2s] {
    background: rgba(0, 122, 255, 0.08);
}

.email-review-nav-btn:disabled[b-7qvb74di2s],
.email-review-nav-btn-disabled[b-7qvb74di2s] {
    color: var(--secondary-text-color);
    cursor: not-allowed !important;
}

.email-review-nav-btn-disabled:hover[b-7qvb74di2s] {
    background: none;
}

.email-review-page-info[b-7qvb74di2s] {
    font-size: 0.85rem;
    color: var(--black-color);
}

.email-review-page-current[b-7qvb74di2s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.email-review-comm-badge[b-7qvb74di2s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--black-color);
    margin-left: 12px;
}

.email-review-comm-dot[b-7qvb74di2s] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.email-review-comm-info[b-7qvb74di2s] { background: var(--primary-color); }
.email-review-comm-success[b-7qvb74di2s] { background: var(--success, #32c846); }
.email-review-comm-warning[b-7qvb74di2s] { background: var(--warning, #ff9c46); }
.email-review-comm-danger[b-7qvb74di2s] { background: var(--error, #DF0000); }

.email-review-actions[b-7qvb74di2s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* "Reject" renders as a solid red Glu button, matching the Approve/Reject/Decide-later trio. */
.email-review-actions[b-7qvb74di2s]  .email-review-reject-btn {
    background: var(--error, #DF0000);
    border-color: var(--error, #DF0000);
    color: #fff;
}

.email-review-actions[b-7qvb74di2s]  .email-review-reject-btn:hover:not(:disabled) {
    filter: brightness(0.92);
}

/* /Pages/Dunning/DunningInvoiceCompanyDetails.razor.rz.scp.css */
.dunning-company-actions[b-fuinn6yavb] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dunning-company-card[b-fuinn6yavb] {
    overflow: hidden;
}

.dunning-company-card__hero[b-fuinn6yavb] {
    align-items: flex-start;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 22px 24px;
}

.dunning-company-card__eyebrow[b-fuinn6yavb] {
    color: #4b5563;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.dunning-company-card__name[b-fuinn6yavb] {
    color: #0f172a;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.15;
}

.dunning-company-card__meta[b-fuinn6yavb] {
    color: #475569;
    font-size: 0.95rem;
    margin-top: 8px;
}

.dunning-company-card__invoice[b-fuinn6yavb] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 14px;
    white-space: nowrap;
}

.dunning-company-card__details[b-fuinn6yavb] {
    display: grid;
    gap: 12px;
    padding: 22px 24px 24px;
}

@media (max-width: 767px) {
    .dunning-company-card__hero[b-fuinn6yavb] {
        flex-direction: column;
    }

    .dunning-company-card__invoice[b-fuinn6yavb] {
        align-self: flex-start;
    }
}
/* /Pages/Dunning/DunningInvoices.razor.rz.scp.css */
.dunning-invoices__due-date-badge[b-0k6u4j0dlz] {
    display: inline-flex;
    align-items: center;
    min-width: 7.5rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.2;
    background: #e7f0fb;
    color: #1c4f80;
}

.dunning-invoices__due-date-badge.is-due-today[b-0k6u4j0dlz] {
    background: #fff1cc;
    color: #8a5a00;
}

.dunning-invoices__due-date-badge.is-overdue[b-0k6u4j0dlz] {
    background: #f7d7d9;
    color: #8f2430;
}

.dunning-invoices__due-date-cell[b-0k6u4j0dlz] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dunning-invoices__reminder-icon[b-0k6u4j0dlz] {
    min-width: auto;
    padding: 0.2rem;
}

.dunning-invoices__customer-actions[b-0k6u4j0dlz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dunning-birch-page :deep(.rcv-grid-toolbar)[b-0k6u4j0dlz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.dunning-birch-page :deep(.rcv-grid-toolbar-left)[b-0k6u4j0dlz] {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1 1 auto;
}

.dunning-birch-page :deep(.rcv-grid-toolbar-right)[b-0k6u4j0dlz] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.dunning-invoices__filter-bar[b-0k6u4j0dlz] {
    min-width: 18rem;
    max-width: 22rem;
}

.dunning-invoices__filter-bar :deep(.tx-glu-select)[b-0k6u4j0dlz] {
    width: 100%;
}
/* /Pages/FinancialOperations/CashTransfer/CashTransferModal.razor.rz.scp.css */
.cash-transfer-badge[b-3i7ih573zq] {
    background-color: var(--grey-1);
    color: var(--grey-3);
    font-size: 15px;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.cash-transfer-suggested-column[b-3i7ih573zq] {
    background-color: #E8F1FB;
    padding: 15px 25px;
    position: relative;
    min-height: 545px;
    overflow-x: hidden;
    overflow-y: auto;
    align-self: stretch;
}
/* /Pages/FinancialOperations/Facilities/Facility.razor.rz.scp.css */
[b-tc3921d11j] .facility-grid-udf {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0 30px;
}
/* /Pages/GluUpgrade.razor.rz.scp.css */
.glu-upgrade-stack[b-9iw5bq4j7z] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.glu-upgrade-subsection + .glu-upgrade-subsection[b-9iw5bq4j7z] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.glu-upgrade-section[b-9iw5bq4j7z] {
    position: relative;
    isolation: isolate;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--background);
}

.glu-upgrade-section > h2[b-9iw5bq4j7z] {
    margin-bottom: 1.25rem;
}

/* List Box showcase: highlight the NoteSelector + ShowDragHandle variant with a bordered
   "card" look per item, the same pattern used by the real List Builder consumer. */
[b-9iw5bq4j7z] .listbox-demo-boxed .tx-glu-listbox-row {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

[b-9iw5bq4j7z] .listbox-demo-boxed .tx-glu-listbox-row:not(:last-child) {
    margin-bottom: 8px;
}
/* /Pages/Hedging/ExposureAnalysis.razor.rz.scp.css */
.exposure-filters[b-mgwcpckm9t] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.exposure-filter-item[b-mgwcpckm9t] {
    min-width: 220px;
}

.exposure-filter-version[b-mgwcpckm9t] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.exposure-grid-wrapper[b-mgwcpckm9t] {
    overflow-x: auto;
    width: fit-content;
}

.exposure-grid[b-mgwcpckm9t] {
    border-collapse: collapse;
    width: 100%;
    color: #2b2b2b;
}

.exposure-grid td[b-mgwcpckm9t],
.exposure-grid th[b-mgwcpckm9t] {
    padding: 7px 10px;
    white-space: nowrap;
    background: #fff;
}

/* Numeric cells */
.exposure-grid td[b-mgwcpckm9t] {
    text-align: right;
    font-size: 0.9rem;
}

/* Month column headers */
.exposure-grid thead th[b-mgwcpckm9t] {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 500;
    color: #2b2b2b;
    padding-bottom: 0.85rem;
    border-bottom: 4px solid var(--grey-1);
}

.exposure-bucket-label[b-mgwcpckm9t] {
    display: block;
}

.exposure-bucket-dates[b-mgwcpckm9t] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: #9b9b9b;
}

.exposure-grid thead tr[b-mgwcpckm9t] {
    border-bottom: 1px solid var(--grey-1);
}

/* Thin separator under every data row */
.exposure-grid tbody tr[b-mgwcpckm9t] {
    border-bottom: 1px solid var(--grey-1);
}

/* Left row-title column */
.exposure-row-title[b-mgwcpckm9t] {
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    position: sticky;
    left: 0;
    border-right: 2px solid var(--grey-1);
}

.exposure-row-title-content[b-mgwcpckm9t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.exposure-row-icon[b-mgwcpckm9t] {
    width: 1rem;
    height: 1rem;
    opacity: 0.55;
}

.exposure-hedged-cell[b-mgwcpckm9t] {
    white-space: nowrap;
}

.exposure-hedged-content[b-mgwcpckm9t] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.exposure-hedged-value[b-mgwcpckm9t] {
    margin-right: 0;
}

/* Per-cell actions menu */
.exposure-actions-select[b-mgwcpckm9t] {
    display: inline-block;
    min-width: 140px;
    vertical-align: middle;
}

/* Policy-band status shown via text colour (design uses coloured values, not cell fills). */
.hedge-under[b-mgwcpckm9t],
.hedge-over[b-mgwcpckm9t] {
    color: #d0322d;
    font-weight: 600;
}

.hedge-aligned[b-mgwcpckm9t] {
    color: #2e8b57;
    font-weight: 600;
}
/* /Pages/Hedging/HedgingPolicyPreview.razor.rz.scp.css */
.hedging-preview[b-2dptdct1vo] {
    display: flex;
    align-items: flex-start;
    padding: 16px 8px 8px 8px;
}

.hedging-preview-value-title[b-2dptdct1vo] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    height: 440px;
    margin-right: 6px;
    font-size: 12px;
    color: var(--glu-text-secondary, #6b7280);
}

.hedging-preview-y-axis[b-2dptdct1vo] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 8px;
    height: 440px;
    font-size: 12px;
    color: var(--glu-text-secondary, #6b7280);
}

.hedging-preview-main[b-2dptdct1vo] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hedging-preview-plot[b-2dptdct1vo] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 40px;
    height: 440px;
    border-top: 1px solid var(--glu-border, #e5e7eb);
    background-image: repeating-linear-gradient(to top, var(--glu-border, #e5e7eb) 0 1px, transparent 1px 44px);
}

.hedging-preview-column[b-2dptdct1vo] {
    position: relative;
    flex: 1;
    height: 100%;
    border-right: 1px solid var(--glu-border, #e5e7eb);
}

.hedging-preview-column:first-child[b-2dptdct1vo] {
    border-left: 1px solid var(--glu-border, #e5e7eb);
    margin-left: 5px;
}

.hedging-preview-bar[b-2dptdct1vo] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    background: var(--glu-primary, #2563eb);
    border-radius: 4px;
    min-height: 2px;
}

.hedging-preview-x-axis[b-2dptdct1vo] {
    display: flex;
    gap: 40px;
    margin-top: 8px;
}

.hedging-preview-x-label[b-2dptdct1vo] {
    flex: 1;
    text-align: center;
    font-size: 12px;
}

.hedging-preview-axis-title[b-2dptdct1vo] {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: var(--glu-text-secondary, #6b7280);
}
/* /Pages/Integration/D365ImportResults.razor.rz.scp.css */
/* Collections (ocfo) look: same heading, summary cards, chip and bordered Birch grid as the
   Receivables dashboard and Customer Overview pages. */

.d365-results[b-8l0vie7ysi]  .page-header h1 {
    font-size: 24px !important;
    font-weight: 600;
}

/* Run details as one subtitle line under the title; labels stay available to screen readers. */
.d365-results[b-8l0vie7ysi]  .page-header .subtitle {
    text-transform: none;
    font-size: 14px;
    font-weight: 400;
    color: var(--secondary-text-color);
    margin: 4px 0 0;
}

.run-line[b-8l0vie7ysi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin: 0;
}

.run-item[b-8l0vie7ysi] {
    display: flex;
    align-items: center;
}

.run-item:not(:last-child)[b-8l0vie7ysi]::after {
    content: "·";
    margin: 0 10px;
    color: var(--grey-4);
}

.run-item dd[b-8l0vie7ysi] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--text-color);
}

.visually-hidden-label[b-8l0vie7ysi] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.numeric[b-8l0vie7ysi] {
    font-variant-numeric: tabular-nums;
}

.status-dot[b-8l0vie7ysi] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ---------- Summary cards (GluTile), as on Customer Overview ---------- */
.summary-cards[b-8l0vie7ysi] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 24px;
    padding: 3px;
}

.summary-card-item[b-8l0vie7ysi] {
    flex: 1 1 0;
    min-width: 170px;
    max-width: 240px;
    display: flex;
    border-radius: 8px;
}

.summary-card-item:focus-visible[b-8l0vie7ysi] {
    outline: 2px solid var(--form-control-focus-border-color);
    outline-offset: 2px;
}

.summary-card-item[b-8l0vie7ysi]  .tx-glu-tile {
    width: 100%;
    min-width: 0;
    border-radius: 8px !important;
}

.summary-card-item.selected[b-8l0vie7ysi]  .tx-glu-tile {
    border-color: #D1D1D1 !important;
}

.summary-card-separator[b-8l0vie7ysi] {
    align-self: stretch;
    width: 2px;
    background: #D1D1D1;
    flex: 0 0 auto;
}

.summary-card-description[b-8l0vie7ysi] {
    font-size: 12px;
    color: var(--secondary-text-color);
}

/* ---------- Grid toolbar: reason filter and active outcome chip ---------- */
.results-toolbar[b-8l0vie7ysi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.reasons[b-8l0vie7ysi] {
    width: 360px;
    max-width: 100%;
}

.reasons[b-8l0vie7ysi]  .tx-glu-select {
    margin-bottom: 0;
}

.outcome-cell[b-8l0vie7ysi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.outcome-cell[b-8l0vie7ysi]  svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* ---------- Fixed column widths and one-line cells, as on Customer Overview ---------- */
.d365-results[b-8l0vie7ysi]  .table-wrapper table.grid {
    table-layout: fixed !important;
    width: max-content !important;
    min-width: 100% !important;
}

.d365-results[b-8l0vie7ysi]  .table-wrapper table.grid th.selection {
    width: 48px !important;
}

.d365-results[b-8l0vie7ysi]  .table-wrapper table.grid th.placeholder {
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.d365-results[b-8l0vie7ysi]  .table-wrapper table.grid tr:not(.details) > td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---------- Detail panel ---------- */
.d365-result-detail[b-8l0vie7ysi] {
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: var(--text-color);
}

.invoice-number[b-8l0vie7ysi] {
    margin: 0 0 -12px;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.section-title[b-8l0vie7ysi] {
    font-family: var(--font-family);
    font-size: 14px !important;
    font-weight: 600;
    text-transform: none;
    margin: 0 0 8px;
}

.decision[b-8l0vie7ysi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 70ch;
}

.decision .outcome-cell[b-8l0vie7ysi] {
    font-weight: 600;
}

.source[b-8l0vie7ysi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 24px;
    margin: 0;
}

.row-item dt[b-8l0vie7ysi] {
    font-size: 12px;
    font-weight: 400;
    color: var(--secondary-text-color);
}

.row-item dd[b-8l0vie7ysi] {
    margin: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.raw-header[b-8l0vie7ysi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hint[b-8l0vie7ysi] {
    margin: 0 0 12px;
    color: var(--secondary-text-color);
    font-size: 13px;
    max-width: 70ch;
}

.raw[b-8l0vie7ysi] {
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--surface-subtle);
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
}

.raw:focus-visible[b-8l0vie7ysi] {
    outline: 2px solid var(--form-control-focus-border-color);
    outline-offset: 2px;
}

.d365-results-skeleton[b-8l0vie7ysi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.d365-results-skeleton .bar[b-8l0vie7ysi] {
    height: 16px;
    width: 40%;
    border-radius: 4px;
    background: var(--grey-0);
}

.d365-results-skeleton .bar.wide[b-8l0vie7ysi] {
    height: 24px;
    width: 70%;
}

@media (max-width: 767.98px) {
    .summary-card-separator[b-8l0vie7ysi] {
        display: none;
    }

    .summary-card-item[b-8l0vie7ysi] {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        max-width: none;
    }

    .reasons[b-8l0vie7ysi] {
        width: 100%;
    }
}

.customer-link[b-8l0vie7ysi] {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.customer-link:hover[b-8l0vie7ysi],
.customer-link:focus-visible[b-8l0vie7ysi] {
    text-decoration: underline;
}
/* /Pages/Prototypes/CustomerOverview.razor.rz.scp.css */
/* Customer Overview prototype — scoped styles (CSS isolation) */

.workspace-shell[b-s0vu2580t6] {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--background);
}

/* ---------- Section 1: Icon navigation rail ---------- */
.icon-rail[b-s0vu2580t6] {
    flex: 0 0 65px;
    width: 65px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    border-right: 1px solid var(--border-color);
    background: var(--white-color);
}

.icon-rail[b-s0vu2580t6]  .rail-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--secondary-text-color);
}

.icon-rail[b-s0vu2580t6]  .rail-button.selected {
    background: rgba(144, 217, 249, 0.25);
    color: var(--primary-color);
}

.icon-rail[b-s0vu2580t6]  .rail-button:hover {
    background: var(--light-background);
}

/* Icon-rail workspace-button + workspace-tabs nav styling is shared: see wwwroot/css/workspace-nav.css */

/* ---------- Section 2: Workspace navigation panel ---------- */
.workspace-panel[b-s0vu2580t6] {
    flex: 0 0 280px;
    width: 280px;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
    background: #90D9F90A;
    border-right: 1px solid #D1D1D180;
    transition: flex-basis 220ms ease, width 220ms ease, padding 220ms ease, border-color 220ms ease;
}

.workspace-panel.collapsed[b-s0vu2580t6] {
    flex-basis: 0;
    width: 0;
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
    border-right-color: transparent;
}

.workspace-panel-header[b-s0vu2580t6] {
    margin-bottom: 16px;
}

.workspace-panel-title-row[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workspace-panel-title[b-s0vu2580t6] {
    margin: 0;
    font-size: 16px !important;
}

/* Accordion card look */
.workspace-panel[b-s0vu2580t6]  .workspace-accordion {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
    padding: 10px;
}

.workspace-accordion-header[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding-right: 4px;
}

.workspace-accordion-header .label[b-s0vu2580t6] {
    font-weight: 600;
}

/* ---------- Section 3: Content area ---------- */
.workspace-content[b-s0vu2580t6] {
    flex: 1 1 auto;
    height: 100%;
    /* min-height:0 lets this flex item shrink below its content so its own child (the grid) can
       own the scroll. overflow:hidden (NOT auto) means this content area itself never scrolls —
       there must be exactly ONE vertical scroll container on this page and it is the grid's
       .table-wrapper (see the grid rule further down). A second scroll here is what made the
       sticky header stall mid-grid. */
    min-height: 0;
    overflow: hidden;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.content-header[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---------- Breadcrumb ---------- */
.overview-breadcrumb[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--secondary-text-color);
}

.overview-breadcrumb .crumb[b-s0vu2580t6] {
    color: var(--primary-color);
    text-decoration: none;
}

.overview-breadcrumb .crumb:hover[b-s0vu2580t6] {
    text-decoration: underline;
}

.overview-breadcrumb .crumb-sep[b-s0vu2580t6] {
    color: var(--border-color);
}

.content-header-left[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.content-header-title[b-s0vu2580t6] {
    margin: 0;
    font-size: 24px !important;
    font-weight: 600;
}

.content-header-left[b-s0vu2580t6]  .collapse-panel-button {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .workspace-panel[b-s0vu2580t6] {
        transition: none;
    }
}

/* Work in progress badge (pink/magenta pill with icon) */
.content-header-left[b-s0vu2580t6]  .wip-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pink-purple);
    color: var(--white-color);
    font-family: var(--graph-tick-font-family);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.content-header-left[b-s0vu2580t6]  .wip-badge .wip-badge-icon svg,
.content-header-left[b-s0vu2580t6]  .wip-badge svg {
    width: 14px;
    height: 14px;
    color: var(--white-color);
    fill: var(--white-color);
}

/* ---------- Summary / KPI tiles (GluTile) ---------- */
.summary-cards[b-s0vu2580t6] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 30px;
}

/* Scrollable track for the cards themselves. Grows to fill whatever space is left in the row
   after the fixed-size arrow/pencil buttons (flex: 1 1 auto), so there's no dead/blank area on
   wide screens — but individual cards are capped at a max-width below, so this only ever grows
   as wide as the visible cards actually need. Once there are enough cards that their combined
   min-width no longer fits, the row overflows and the hidden native scrollbar + arrow buttons
   are the way to reveal the rest. */
.summary-cards-scroll[b-s0vu2580t6] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 3px;
}

.summary-cards-scroll[b-s0vu2580t6]::-webkit-scrollbar {
    display: none;
}

/* Wrapper only exists so we have a place to hang the "selected" class - it takes no part
   in the flex layout (display:contents-like sizing is handled by the rule below), so
   .tx-glu-tile itself remains the actual flex item. Cards grow/shrink to help fill the row
   (no leftover blank space), but are capped between a floor and ceiling so they never become
   too cramped or absurdly oversized on very wide screens. */
.summary-cards .summary-card-item[b-s0vu2580t6] {
    flex: 1 1 0;
    max-width: 240px;
}


.summary-cards[b-s0vu2580t6]  .tx-glu-tile {
    width: 100%;
    border-radius: 8px !important;
}

/* Selected card: replace the component's default click indicator (an inline
   "outline: 3px solid ..." style) with a plain 1px border in the requested colour, so
   selected/unselected cards differ only by border colour, not by an extra outline ring.
   Unselected cards already render a 1px solid #D1D1D1 border via the component's own
   --grid-header-separator-color token, matching the design as-is. */
.summary-cards .summary-card-item.selected[b-s0vu2580t6]  .tx-glu-tile {
    border-color: #D1D1D1 !important;
}

/* Vertical separator after the first ("All customers") card, per design. */
.summary-cards .summary-card-separator[b-s0vu2580t6] {
    align-self: stretch;
    width: 2px;
    background: #D1D1D1;
    flex: 0 0 auto;
}

.summary-card-description[b-s0vu2580t6] {
    font-size: 12px;
    color: var(--secondary-text-color);
}

/* Chip for the active summary-card quick filter (segment). Rendered through GluGrid's LeftContent
   slot (isn't part of GluGrid's own column-filter chips), so it lands in .left-section as a flex
   sibling of the saved-view selector and .filters-container. `order` (below, plus the ::deep rules
   pinning its siblings) places it visually BETWEEN those two rows: saved view -> this chip ->
   column-filter chips (same technique already used in DunningBirchShell.razor.css). */
.overview-filter-chips[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 2;
}

[b-s0vu2580t6] .workspace-content .tx-glu-layout-manager {
    order: 1;
}

[b-s0vu2580t6] .workspace-content .filters-container {
    order: 3;
}

/* Scroll left/right arrows, only rendered while the row can actually be scrolled that direction
   (see _canScrollLeft/_canScrollRight). Both sit outside the scrollable track (siblings, not
   children) so they stay fixed in place while the cards scroll underneath them. */
.summary-cards[b-s0vu2580t6]  .summary-cards-scroll-button {
    align-self: center;
    color: var(--secondary-text-color);
}

.summary-cards[b-s0vu2580t6]  .edit-cards-button {
    align-self: center;
    color: var(--secondary-text-color);
}

.summary-cards[b-s0vu2580t6]  .edit-cards-button.active {
    color: var(--primary-color);
}

/* ---------- Expandable area: List Builder (Glu side panel), built from the codebase's real
   dual-list precedent — GluListBox in GluSelectionMode.MULTIPLE (the same component used by
   GluComplexQueriesBuilderPopup) — rather than bespoke checkbox rows. Three columns per the
   design: Available Widgets / arrows / Added Widgets, with the two widget columns kept the same
   width via an explicit basis (not just flex: 1 1 0, since that only guarantees equal *growth*,
   not equal width once combined with the fixed-width arrows column in between). The panel and
   the GluListBox's own root element are both rendered by child components, not written directly
   in this page's markup, so ::deep is required to reach them from page-scoped CSS. ---------- */
.list-builder[b-s0vu2580t6] {
    display: flex;
    align-items: stretch;
    gap: 16px;
    height: 100%;
}

.list-builder-column[b-s0vu2580t6] {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.list-builder-column-header[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.list-builder-column-title[b-s0vu2580t6] {
    font-weight: 600;
}

.list-builder[b-s0vu2580t6]  .list-builder-select-all {
    color: var(--primary-color);
    padding: 0;
    min-width: 0;
    height: auto;
}

[b-s0vu2580t6] .list-builder-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* GluListBox's own default look (bordered/padded box, fixed 400px width, 50vh max-height) is
   meant for a compact dropdown-style list — reset it here so each column instead fills its half
   of the panel, and let .tx-glu-listbox-row below draw the per-item card border shown in the
   design. */
[b-s0vu2580t6] .list-builder-list.tx-glu-listbox {
    border: none;
    padding: 0;
    max-height: none;
    width: auto;
}

[b-s0vu2580t6] .list-builder-list .tx-glu-listbox-row {
    padding: 5px;
    border: 1px solid #D1D1D1;
    border-radius: 8px;
    align-items: flex-start !important;
}

[b-s0vu2580t6] .list-builder-list .tx-glu-checkbox {
    margin: 0;
}

[b-s0vu2580t6] .list-builder-list .tx-glu-listbox-handle {
    margin-top: 3px;
}

.list-builder-locked[b-s0vu2580t6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid #D1D1D1;
    border-radius: 8px;
    margin-bottom: 12px;
}

.list-builder-locked[b-s0vu2580t6]  svg {
    width: 16px;
    height: 16px;
    color: var(--secondary-text-color);
}

.list-builder-empty[b-s0vu2580t6] {
    color: var(--secondary-text-color);
    font-size: 13px;
    padding: 12px 0;
}

.list-builder-arrows[b-s0vu2580t6] {
    flex: 0 0 48px;
    width: 48px;
    align-self: flex-start;
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Grid cell presentation (page-level only) */
.workspace-content[b-s0vu2580t6]  .customer-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.workspace-content[b-s0vu2580t6]  .customer-link:hover {
    text-decoration: underline;
}

.workspace-content[b-s0vu2580t6]  .priority-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.workspace-content[b-s0vu2580t6]  .priority-cell svg {
    width: 16px;
    height: 16px;
}

.workspace-content[b-s0vu2580t6]  .invoices-overdue {
    color: var(--secondary-text-color);
    margin-left: 4px;
}

.workspace-content[b-s0vu2580t6]  .promise-overdue {
    color: var(--secondary-text-color);
    margin-left: 4px;
}

.workspace-content[b-s0vu2580t6]  .promise-empty {
    color: var(--secondary-text-color);
}

.workspace-content[b-s0vu2580t6]  .collection-status-cell {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.workspace-content[b-s0vu2580t6]  .collection-status-open {
    color: var(--primary-color);
}

.workspace-content[b-s0vu2580t6]  .collection-status-onhold {
    color: var(--alert-warning-color, #FFA500);
}

.workspace-content[b-s0vu2580t6]  .collection-status-paused {
    color: var(--secondary-text-color);
}

.workspace-content[b-s0vu2580t6]  .collection-status-closed,
.workspace-content[b-s0vu2580t6]  .collection-status-cancelled {
    color: var(--success-ocfo-color, #32c846);
}

.workspace-content[b-s0vu2580t6]  .collection-status-empty {
    background: none;
    color: var(--secondary-text-color);
    text-transform: none;
    font-weight: 400;
    padding: 0;
}

/* Only the Outstanding / Overdue figures carry .money, in both the parent row and the expanded
   sub-rows, so right-aligning here keeps the whole column under its right-aligned header. */
.workspace-content[b-s0vu2580t6]  .money {
    font-variant-numeric: tabular-nums;
    display: block;
    text-align: right;
}

/* ---------- Single vertical scroll container: the grid body owns the scroll ----------
   The page must have exactly ONE vertical scroll container. `.workspace-content` is `overflow:hidden`
   (see above), so the header + summary cards stay fixed and the grid fills the remaining height and
   scrolls internally. GluGrid's theme already makes `.table-wrapper` a scroll container
   (`overflow-x:scroll` coerces `overflow-y` to `auto`) and pins `thead { position:sticky; top:0 }`
   inside it — so once the grid is the only scroller, the sticky header works correctly and the
   second/duplicate scrollbar is gone.

   The theme sizes the grid root `height:100%`, which (as a sibling of the header + cards) would make
   it taller than the space left over and re-introduce a page-level scroll. Override it so the grid is
   only as tall as its rows when they fit, yet still caps and scrolls internally when they don't:
   `flex:0 1 auto` — grow:0 means it never stretches past its content (so a short result set leaves NO
   empty band between the last row and the pagination footer, matching how GluGrid sizes on other
   pages), shrink:1 + `min-height:0` let the outer flex shrink the GRID ROOT below its content height
   when the rows overflow the leftover space; the inner flex then reruns with that reduced definite
   height, `.table-wrapper` (flex-grow:1) fills it, and the table overflowing that allocated height is
   what engages the wrapper's own vertical scroll. Basis `auto` (with `height:auto` overriding the
   theme's `height:100%`) makes the base size the content height. Horizontal scroll, the right-pinned
   Actions column, and the sticky pagination footer are all unchanged (they live inside
   `.table-wrapper`, which remains the single scroll container whenever scrolling is actually
   needed). */
.workspace-content[b-s0vu2580t6]  .tx-glu-grid.workspace-grid {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
}

/* GluGrid's non-confined "fixed header" script (wwwroot/js/glu-grid.mjs) translates the <thead>
   vertically in response to WINDOW/page scroll — it assumes the whole page scrolls beneath a fixed
   app nav and offsets the header to sit just below that nav. On this page the page itself no longer
   scrolls (the grid body `.table-wrapper` is the single scroll container), so that script's
   `translateY(...)` pushed the sticky header DOWN into the middle of the grid.

   Neutralise the script's inline transform so the header relies purely on the theme's own
   `thead { position:sticky; top:0 }`, which pins it to the top of the internally-scrolling
   `.table-wrapper`. `!important` overrides the script's inline `style="transform:…"`. */
.workspace-content[b-s0vu2580t6]  .tx-glu-grid.workspace-grid thead {
    transform: none !important;
    background: var(--white-color);
}
    .workspace-content[b-s0vu2580t6]  .tx-glu-grid.workspace-grid .table-wrapper th {
        background: var(--white-color);
    }

/* ---------- Vertical scrollbar visibility ----------
   Non-confined GluGrid hides BOTH of `.table-wrapper`'s native scrollbars (theme sets
   `scrollbar-width:none` for Firefox and `::-webkit-scrollbar { width:0; height:0 }` for WebKit),
   because the grid normally scrolls the PAGE and exposes horizontal scroll through the separate fake
   `.table-horizontal-scroll` bar. On this page the grid body IS the vertical scroll container, so a
   hidden vertical scrollbar leaves users on classic (non-overlay) scrollbars — e.g. Windows — with no
   visible affordance. Re-show the VERTICAL scrollbar only; keep the native HORIZONTAL one hidden so it
   doesn't duplicate the fake horizontal bar.

   Firefox note: `scrollbar-width` is element-level (both axes), but `overflow-x:hidden` below removes
   the horizontal axis as a scroll axis, so Firefox shows only the vertical scrollbar (no native
   horizontal bar next to the fake one). `scrollbar-gutter:stable` reserves the vertical scrollbar's
   width up-front so the flexible Customer column doesn't reflow by ~10px each time the scrollbar
   appears/disappears (load/filter). */
.workspace-content[b-s0vu2580t6]  .tx-glu-grid.workspace-grid .table-wrapper {
    scrollbar-width: thin; /* Firefox: reveal scrollbars (macOS shows overlay, Windows shows a thin bar) */
    scrollbar-gutter: stable; /* pre-reserve the vertical gutter so columns don't shift when it toggles */
    /* Suppress the wrapper's OWN native horizontal scrollbar. The theme sets `overflow-x:scroll`, which
       (together with `scrollbar-width:thin` above) surfaces a native horizontal bar in addition to the
       separate fake `.table-horizontal-scroll` bar — two horizontal scrollbars. Hidden overflow-x still
       allows programmatic `scrollLeft`, so the JS-synced fake bar keeps driving horizontal scroll while
       vertical scroll (overflow-y coerces to auto) is unaffected. */
    overflow-x: hidden !important;
    overflow-y: auto; /* explicit vertical scroll — don't rely solely on CSS coercion from overflow-x */
}

.workspace-content[b-s0vu2580t6]  .tx-glu-grid.workspace-grid .table-wrapper::-webkit-scrollbar {
    width: 10px; /* WebKit/Chromium/Edge: width controls the VERTICAL scrollbar */
}

.workspace-content[b-s0vu2580t6]  .tx-glu-grid.workspace-grid .table-wrapper::-webkit-scrollbar:horizontal {
    height: 0; /* keep the native horizontal scrollbar hidden — the fake .table-horizontal-scroll bar owns horizontal */
}

.workspace-content[b-s0vu2580t6]  .tx-glu-grid.workspace-grid .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--grey-1);
    border-radius: 4px;
}

/* ---------- Column sizing (page-level table-layout override) ----------
   GluGrid's shared stylesheet uses table-layout:auto plus an auto-width trailing "placeholder"
   <th> that absorbs any leftover width. We keep the grid's NATIVE full-width + horizontal-scroll
   behaviour (the same mechanism every other non-confined GluGrid uses) so the card fills its
   container and the right-pinned Actions column can stay fixed while the rest scroll.

   The only thing we override is table-layout: switching it to :fixed pins every real column to the
   fixed pixel width declared below (matching the ColWidth* constants), which keeps columns from
   collapsing to content size AND lets the invoice sub-rows line up deterministically via matching
   grid tracks. The one exception is the Customer column, left `width: auto` so it absorbs any
   leftover width and lets the real columns fill the container (the trailing placeholder is
   collapsed to 0). min-width:100% stretches the table to fill a wider container, and on a narrower
   container the shared ".table-wrapper { overflow-x: scroll }" reveals the rest.

   The Actions column is pinned right via GridColumnPinMode=Right on CustomerOverviewForView, so the
   theme's ".pin-right { position: sticky; right: 0 }" keeps it in place during horizontal scroll —
   no page CSS needed for the pin itself.

   Column widths: each data column keeps its GluGridColumn inline `width: {Width}px` as the initial
   size (the non-`!important` fallbacks below mirror the same values), so the grid's built-in resize
   drag handles work — dragging writes a new inline width on the <th>, which wins over these
   fallbacks. The invoice sub-rows stay aligned automatically: customer-overview-invoice-details.mjs
   observes the header widths (ResizeObserver + a MutationObserver on <th> style changes) and copies
   them onto each .invoice-detail-row's grid tracks. Only selection, the trailing placeholder, the
   flexible Customer column, and the right-pinned Actions column keep `!important` — they are
   intentionally not user-resizable. */
.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid {
    table-layout: fixed !important;
    width: max-content !important;
    min-width: 100% !important;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th.selection {
    width: 48px !important;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th.placeholder {
    /* Collapse the trailing placeholder to 0 so NO leftover space lands to the right of the pinned
       Actions column. The slack is absorbed by the flexible Customer column instead (below), which
       lets the real columns fill the width and puts Actions flush against the right edge — the same
       result other pages get by having enough columns to fill/overflow the grid. border:0 guards
       against a hairline being drawn on this zero-width cell if the theme ever adds th borders. */
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="Customer"] {
    /* Flexible name column: it soaks up all leftover width (placeholder is 0), so the columns fill
       the container and the right-pinned Actions column sits flush at the right edge. min-width keeps
       it readable; on a narrow container it stops shrinking, the table overflows, and the shared
       ".table-wrapper { overflow-x: scroll }" scrolls while Actions stays pinned over the columns. */
    width: auto !important;
    min-width: 220px !important;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="Priority"] {
    /* Non-!important initial width so the resize drag handle's inline width can override it. */
    width: 120px;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="Invoices"] {
    width: 160px;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="Outstanding"] {
    width: 140px;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="Overdue"] {
    width: 140px;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="PastDue"] {
    width: 120px;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="Dispute"] {
    width: 100px;
}

.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid th[data-property-name="PromiseToPay"] {
    width: 140px;
}

/* Long content in a fixed-layout column would otherwise sit un-clipped (shared css leaves
   nowrap on tbody but only adds ellipsis to a plain wrapping <div>, which our custom
   Templates - <a>, <span> - don't use), which can still nudge the browser toward a wider
   intrinsic size on some columns. Force clipping directly on every real data cell instead
   (excluding tr.details - see note below, that row relies on overflow:visible). */
.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid tr:not(.details) > td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Table cells default to vertical-align:baseline, so an icon-only control (the Actions
       three-dots button) aligns to the row's text baseline and drifts toward the top when the
       row is taller than a single text line (e.g. on narrower screens). Center every data cell
       vertically so the three-dots button — and all cell content — stays mid-cell at any width. */
    vertical-align: middle;
}

/* IMPORTANT: keep tr.details > td's overflow:visible and max-width:0 (do NOT override them).
   GluGridRow renders the expanded row as a single <td> with no colspan, so with table-layout:fixed
   that cell would normally be clipped to the width of the table's first column. The shared
   glu-grid.scss solves this with an "overflow:visible; max-width:0" escape on tr.details > td,
   letting our full-width RowDetailContent div render un-clipped - overriding those (as an earlier
   version of this file did) is what caused the expanded row to show blank, clipped boxes.

   The one property we DO relax is position: the shared rule uses "position:sticky; left:0", which
   pins the detail cell to the scroll container's left edge, so during horizontal scroll the parent
   columns move but the sub-rows stay put - misaligning every invoice field. Switching to
   "position:relative" (same layout position as sticky-when-unstuck, so the escape still works)
   lets the detail row scroll in lockstep with the parent columns, keeping each invoice field under
   its matching column. overflow:visible and max-width:0 are inherited from the shared rule. */
.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid tr.details > td {
    position: relative !important;
}

/* ---------- Row detail: expanded invoice lines ---------- */
.workspace-content[b-s0vu2580t6]  .invoice-detail {
    display: flex;
    flex-direction: column;
    background: var(--light-background);
}

/* GluGrid normally adds 16px padding to its row-detail wrapper. Remove it only here so the
   detail grid begins at the same left edge and uses the same width as the parent table.
   GluGridRow also gives this wrapper an inline "overflow-x:auto" and a fixed width (the container
   width), which makes it a SEPARATE horizontal scroll container. When the table overflows, that
   nested scroll clips the sub-row's Status/Actions off the right and traps the sticky actions cell
   so it can't pin like the parent rows. Force overflow-x:visible so the sub-row instead scrolls
   inside the shared ".table-wrapper", exactly like the parent rows — then the sub-row's
   position:sticky Actions cell pins to the same right edge as the parent's pinned Actions column. */
.workspace-content[b-s0vu2580t6]  .table-wrapper table.grid tr.details > td > div {
    padding: 0 !important;
    /* Keep BOTH axes visible: if only overflow-x is visible while overflow-y is non-visible, CSS
       coerces overflow-x back to auto (re-creating the nested scroll container and the bug). Pinning
       overflow-y:visible too guards against a future GluGridRow adding an inline overflow-y. */
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-row {
    display: grid;
    /* Fill the detail width (GluGridRow sizes the detail container to the grid's width) and mirror
       the parent columns: the Customer track is minmax(220px, 1fr) to match the parent's flexible
       Customer column, and every other track is the same fixed pixel width. Because the Customer
       track flexes identically in both, each invoice field stays under its matching parent column
       and the sub-row Actions cell (track 9) lines up with the parent's right-pinned Actions. */
    width: 100%;
    grid-template-columns: 48px minmax(220px, 1fr) 120px 160px 140px 140px 100px 120px 100px 140px;
    align-items: center;
    padding: 2px 0;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-row:first-child {
    border-top: none;
}

/* Match the parent row cells' horizontal padding without changing the grid tracks. Clip overflow so
   long cell content (notably the invoice number link) is ellipsized inside its own track instead of
   spilling over the neighbouring column. The flex cells below (status, actions) re-declare display,
   so text-overflow doesn't apply to them — harmless. */
.workspace-content[b-s0vu2580t6]  .invoice-detail-cell {
    box-sizing: border-box;
    min-width: 0;
    padding: 0 16px;
    color: var(--text-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-invoices {
    grid-column: 4;
}

/* The invoice number is an inline <a>; make it a block so the cell's ellipsis clips it. */
.workspace-content[b-s0vu2580t6]  .invoice-detail-invoices .customer-link {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-outstanding {
    grid-column: 5;
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-overdue {
    grid-column: 6;
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-currency {
    grid-column: 7;
    color: var(--secondary-text-color);
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-pastdue {
    grid-column: 8;
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-status {
    grid-column: 9;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-text-color);
}

.workspace-content[b-s0vu2580t6]  .invoice-detail-promise {
    grid-column: 10;
    color: var(--secondary-text-color);
}

/* ---------- Floating assistant button ---------- */
.workspace-shell[b-s0vu2580t6]  .assistant-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .workspace-panel[b-s0vu2580t6] {
        flex-basis: 220px;
        width: 220px;
    }

    .summary-cards[b-s0vu2580t6]  .tx-glu-tile {
        min-width: 140px;
    }
}
/* /Pages/Prototypes/CustomerProfile.razor.rz.scp.css */
/* Customer Profile prototype — scoped styles (CSS isolation) */

.workspace-shell[b-uuybgsjklk] {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    width: 100%;
    background: var(--background);
}

/* ---------- Icon navigation rail ---------- */
.icon-rail[b-uuybgsjklk] {
    flex: 0 0 65px;
    width: 65px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--border-color);
    background: var(--white-color);
}

.icon-rail[b-uuybgsjklk]  .rail-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--secondary-text-color);
}

.icon-rail[b-uuybgsjklk]  .rail-button.selected {
    background: rgba(144, 217, 249, 0.25);
    color: var(--primary-color);
}

.icon-rail[b-uuybgsjklk]  .rail-button:hover {
    background: var(--light-background);
}

.icon-rail[b-uuybgsjklk]  .rail-button.workspace-rail-button {
    background: transparent;
}

.icon-rail[b-uuybgsjklk]  .rail-button.workspace-rail-button:hover,
.icon-rail[b-uuybgsjklk]  .rail-button.workspace-rail-button.selected {
    background: #E9F7FE;
}

.icon-rail[b-uuybgsjklk]  .rail-button.workspace-rail-button svg {
    width: 36px;
    height: 36px;
}

/* The workspace icon's first path is its own light-blue background box —
   keep it fixed regardless of selected/hover state. */
.icon-rail[b-uuybgsjklk]  .rail-button.workspace-rail-button svg path:nth-child(1) {
    fill: none !important;
}

/* ---------- Workspace navigation panel ---------- */
.workspace-panel[b-uuybgsjklk] {
    flex: 0 0 280px;
    width: 280px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 16px;
    background: #90D9F90A;
    border-right: 1px solid #D1D1D180;
    transition: flex-basis 220ms ease, width 220ms ease, padding 220ms ease, border-color 220ms ease;
}

.workspace-panel.collapsed[b-uuybgsjklk] {
    flex-basis: 0;
    width: 0;
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
    border-right-color: transparent;
}

.workspace-panel-header[b-uuybgsjklk] {
    margin-bottom: 16px;
}

.workspace-panel-title-row[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workspace-panel-title[b-uuybgsjklk] {
    margin: 0;
    font-size: 20px !important;
}

.workspace-panel-description[b-uuybgsjklk] {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--secondary-text-color);
}

.workspace-panel[b-uuybgsjklk]  .workspace-accordion {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
    padding: 10px;
}

.workspace-accordion-header[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding-right: 4px;
}

.workspace-accordion-header .label[b-uuybgsjklk] {
    font-weight: 600;
}

.workspace-tabs[b-uuybgsjklk]  .tab-content {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .workspace-panel[b-uuybgsjklk] {
        transition: none;
    }
}

/* ---------- Content area ---------- */
.workspace-content[b-uuybgsjklk] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Breadcrumb ---------- */
.profile-breadcrumb[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--secondary-text-color);
    /* Align with the second grid column (col1 28px + 8px gap) so it sits above the name. */
    margin-left: 36px;
}

.profile-breadcrumb .crumb[b-uuybgsjklk] {
    color: var(--primary-color);
    text-decoration: none;
}

.profile-breadcrumb .crumb:hover[b-uuybgsjklk] {
    text-decoration: underline;
}

.profile-breadcrumb .crumb.current[b-uuybgsjklk] {
    color: var(--black-color, #1f1f1f);
    font-weight: 600;
}

.profile-breadcrumb .crumb-sep[b-uuybgsjklk] {
    color: var(--border-color);
}

/* ---------- Two-row layout with an outer toggle rail ---------- */
.profile-layout[b-uuybgsjklk] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 16px;
    align-items: start;
    flex: 1 1 auto;
    min-height: 0;
}

.profile-row[b-uuybgsjklk] {
    display: flex;
    gap: 20px;
    align-items: stretch;
    grid-column: 2;
}

.profile-row-top[b-uuybgsjklk] {
    grid-row: 1;
}

.profile-row-bottom[b-uuybgsjklk] {
    grid-row: 2;
    min-height: 0;
}

/* Expand toggle sits inside the bottom row, aligned with the Contacts card's
   left edge; it pushes the grid slightly to the right. Only shown when collapsed. */
.activity-toggle-inline[b-uuybgsjklk] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
}

.activity-toggle-inline[b-uuybgsjklk]  .activity-toggle-button {
    color: var(--secondary-text-color);
}

.profile-col[b-uuybgsjklk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Row 1 columns */
.profile-col-identity[b-uuybgsjklk] {
    flex: 0 0 332px;
    width: 332px;
}

.profile-col-summary[b-uuybgsjklk] {
    flex: 1 1 auto;
}

/* Row 2 columns */
.profile-col-activity[b-uuybgsjklk] {
    flex: 0 0 332px;
    width: 332px;
    /* Stretch to the grid column's height; the card below is taken out of flow so a long
       activity list scrolls internally instead of making this column taller than the grid. */
    align-self: stretch;
    position: relative;
    transition: flex-basis 220ms ease, width 220ms ease, opacity 160ms ease;
    overflow: hidden;
}

.profile-col-activity.collapsed[b-uuybgsjklk] {
    flex-basis: 0;
    width: 0;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    /* Cancel one flex gap so the collapsed rail doesn't over-indent the grid. */
    margin-right: -20px;
}

.profile-col-grid[b-uuybgsjklk] {
    flex: 1 1 auto;
}
.invoice-grid-loading[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}
@media (prefers-reduced-motion: reduce) {
    .profile-col-activity[b-uuybgsjklk] {
        transition: none;
    }
}

/* ---------- Identity header ---------- */
.profile-identity[b-uuybgsjklk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 320px;
}

.identity-title-row[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start;
    padding-bottom: 10px;
}

/* Workspace collapse toggle rail — grid col1/row1, aligned with the customer title. */
.workspace-toggle-rail[b-uuybgsjklk] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.workspace-toggle-rail[b-uuybgsjklk]  .collapse-panel-button {
    flex: 0 0 auto;
    color: var(--secondary-text-color);
    margin-top: 2px;
}

.identity-name[b-uuybgsjklk] {
    margin: 0;
    font-size: 24px !important;
    font-weight: 500;
    line-height: normal;
}

.priority-badge[b-uuybgsjklk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.priority-badge.priority-high[b-uuybgsjklk] {
    border: solid 1px var(--pink-ocfo);
    color: var(--black-color);
}

.priority-badge.priority-medium[b-uuybgsjklk] {
    border: solid 1px var(--tangerine-yellow);
    color: var(--black-color);
}

.priority-badge.priority-normal[b-uuybgsjklk] {
    border: solid 1px var(--info-ocfo);
    color: var(--black-color);
}

.priority-badge[b-uuybgsjklk]  svg {
    width: 14px;
    height: 14px;
}

.identity-attrs[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--secondary-text-color);
}

.identity-since[b-uuybgsjklk] {
    font-weight: 400;
    color: var(--black-color);
}

/* Recommended action banner */
.recommended-banner[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #90D9F91A;
    border: 1px solid #90D9F91A;
}

.recommended-banner .banner-icon[b-uuybgsjklk]  svg {
    width: 20px;
    height: 20px;
}

.recommended-banner .banner-text[b-uuybgsjklk] {
    margin: 0;
    flex: 1 1 auto;
    font-size: 13px;
    color: #1B2A3A;
}

/* ---------- Shared panel card look ---------- */
.panel[b-uuybgsjklk] {
    background: #D9D9D924;
    border-radius: 10px;
    padding: 16px;
}

.panel-title[b-uuybgsjklk] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    /* The theme's heading styles uppercase h5; these panel headings stay as written. */
    text-transform: none;
}

/* ---------- Contacts card ---------- */
.contacts-header[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.count-pill[b-uuybgsjklk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    border: solid 1px var(--badge-birch-color);
    color: #0A3D52;
    font-size: 12px;
    font-weight: 600;
}

.contacts-departments[b-uuybgsjklk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 0px 20px;
}

.departments-label[b-uuybgsjklk] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--secondary-text-color);
}

.departments-values[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
}

.department-sep[b-uuybgsjklk] {
    color: var(--border-color);
}

.contacts-card[b-uuybgsjklk]  .view-all-contacts,
.activity-card[b-uuybgsjklk]  .view-all-activity {
    padding-left: 0;
    color: #0070B9;
    font-size: 12px;
}

/* ---------- Customer activity timeline ---------- */
.activity-header[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.activity-title-group[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.activity-title-group[b-uuybgsjklk]  .activity-toggle-button {
    flex: 0 0 auto;
    color: var(--secondary-text-color);
}

.activity-header-actions[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.activity-card[b-uuybgsjklk] {
    position: absolute;
    inset: 12px 0 0 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.activity-search-popover[b-uuybgsjklk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.activity-search-input[b-uuybgsjklk],
.contacts-search[b-uuybgsjklk] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}

.activity-chips[b-uuybgsjklk] {
    display: flex;
    gap: 8px;
}

.activity-chip[b-uuybgsjklk] {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.activity-chip.selected[b-uuybgsjklk] {
    background: #EAF3FB;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.activity-timeline[b-uuybgsjklk] {
    list-style: none;
    padding: 0;
    position: relative;
    margin: 30px 20px 20px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.activity-timeline[b-uuybgsjklk]::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border-color);
}

.activity-item[b-uuybgsjklk] {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 0 0 25px 0;
}

.activity-item:last-child[b-uuybgsjklk] {
    padding-bottom: 0;
}

.activity-dot[b-uuybgsjklk] {
    position: relative;
    z-index: 1;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin-top: 3px;
    /* nudge right so the 10px dot stays centered on the 2px timeline line (center at 7px) */
    margin-left: 2px;
    border-radius: 50%;
    background: var(--secondary-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-dot.dot-comms[b-uuybgsjklk] {
    background: #C0392B;
}

.activity-dot.dot-note[b-uuybgsjklk] {
    background: #0070B9;
}

.activity-dot.dot-alert[b-uuybgsjklk] {
    background: transparent;
    width: 16px;
    height: 16px;
    margin-left: 0;
}

.activity-dot.dot-alert[b-uuybgsjklk]  svg {
    width: 16px;
    height: 16px;
}

.activity-content[b-uuybgsjklk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-title-row[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.activity-title[b-uuybgsjklk] {
    font-size: 14px;
    font-weight: 600;
}

.activity-ref[b-uuybgsjklk],
.activity-source[b-uuybgsjklk] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--secondary-text-color);
}

.activity-meta[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--secondary-text-color);
}

.activity-sep[b-uuybgsjklk] {
    color: var(--border-color);
}

/* Expandable note body — collapsed by default, toggled per entry (see the image in the story). */
.activity-detail-toggle[b-uuybgsjklk] {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
}

.activity-detail-toggle:hover[b-uuybgsjklk] {
    color: var(--primary-color);
}

.activity-detail-toggle:focus-visible[b-uuybgsjklk] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

.activity-detail-body[b-uuybgsjklk] {
    margin-top: 4px;
    padding: 10px 12px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--black-color);
    white-space: pre-wrap;
}

[b-uuybgsjklk] .icon-14 svg,
.icon-14[b-uuybgsjklk]  svg {
    width: 14px;
    height: 14px;
}

/* ---------- KPI band ---------- */
.kpi-band[b-uuybgsjklk] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.kpi-band-scroll[b-uuybgsjklk] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}

.kpi-band[b-uuybgsjklk]  .kpi-scroll-button {
    align-self: center;
    flex: 0 0 auto;
    color: var(--secondary-text-color);
}

/* Below this breakpoint four cards no longer fit the summary column and their values start to
   collide, so the band turns into a horizontal strip with a per-card floor width. The arrows
   appear on their own because the strip then actually overflows. */
@media (max-width: 1300px) {
    .kpi-band-scroll[b-uuybgsjklk] {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(260px, 1fr);
        overflow-x: auto;
        scrollbar-width: none;
        padding: 3px;
    }

    .kpi-band-scroll[b-uuybgsjklk]::-webkit-scrollbar {
        display: none;
    }
}

.kpi-card[b-uuybgsjklk] {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 150px;
}

.kpi-card-header[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.kpi-title[b-uuybgsjklk] {
    font-size: 15px;
    font-weight: 400;
    color: var(--secondary-text-color);
}

.kpi-value[b-uuybgsjklk] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
}

.kpi-sep[b-uuybgsjklk] {
    font-size: 22px;
    line-height: 1;
    color: var(--secondary-text-color);
}

.kpi-qualifier[b-uuybgsjklk] {
    font-size: 24px;
    font-weight: 600;
    color: inherit;
}

.kpi-context[b-uuybgsjklk] {
    font-size: 14px;
    color: var(--secondary-text-color);
    margin-top: auto;
}

.kpi-context-strong[b-uuybgsjklk] {
    font-weight: 600;
    color: var(--primary-text-color, #1a1a1a);
}

.kpi-overdue[b-uuybgsjklk] {
    margin-top: auto;
}

.overdue-labels[b-uuybgsjklk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    color: var(--secondary-text-color);
    margin-bottom: 4px;
}

.kpi-overdue-amounts[b-uuybgsjklk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 4px;
}

.overdue-value[b-uuybgsjklk] {
    font-weight: 400;
    color: var(--secondary-text-color);
}

.overdue-total[b-uuybgsjklk] {
    color: var(--secondary-text-color);
}

.kpi-progress[b-uuybgsjklk] {
    height: 6px;
    border-radius: 999px;
    background: var(--light-background);
    overflow: hidden;
}

.kpi-progress.overdue-track[b-uuybgsjklk] {
    background: #E5E5E5;
}

.kpi-progress-fill[b-uuybgsjklk] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--primary-color);
}

.kpi-progress-fill.low[b-uuybgsjklk] {
    background: #DF0000;
}

.kpi-progress-fill.overdue[b-uuybgsjklk] {
    background: #DF0000;
}

/* ---------- Invoice tabs + grid ---------- */
.invoice-tabs-row[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-tabs-row .invoice-tabs[b-uuybgsjklk] {
    flex: 1 1 auto;
    min-width: 0;
}

.invoice-tabs[b-uuybgsjklk]  .tab-content {
    display: none;
}

/* Last contact cell: direction arrow + time + count + note icon */
.last-contact-cell[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    width: 100%;
}

/* Diagonal arrows: incoming points down-left, outgoing points up-right */
.last-contact-cell[b-uuybgsjklk]  .last-contact-arrow-in {
    transform: rotate(135deg);
}

.last-contact-cell[b-uuybgsjklk]  .last-contact-arrow-out {
    transform: rotate(-45deg);
}

/* Push the badge count and trailing document icon to the right edge of the cell. */
.last-contact-count[b-uuybgsjklk] {
    margin-left: auto;
    color: var(--secondary-text-color);
    background: var(--light-background);
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

[b-uuybgsjklk] .workspace-grid {
    overflow: hidden;
}

/* Size the grid to its content height instead of the theme's height:100%, which otherwise
   stretches it to fill the flex parent and leaves a blank gap below the rows when few records
   are present. The table-wrapper's max-height below still engages scrolling for longer lists. */
.workspace-content[b-uuybgsjklk]  .tx-glu-grid.workspace-grid {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
}

/* Cap the scroll body to ~6 rows (header 41px + 6 x 40px) so extra records scroll
   vertically inside the grid; header stays pinned while scrolling. */
.workspace-content[b-uuybgsjklk]  .workspace-grid .table-wrapper {
    max-height: 321px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox — theme hides it on non-confined grids */
}

/* The theme collapses the scrollbar to 0px on non-confined grids; force it visible. */
.workspace-content[b-uuybgsjklk]  .workspace-grid .table-wrapper::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

.workspace-content[b-uuybgsjklk]  .workspace-grid .table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 5px;
}

.workspace-content[b-uuybgsjklk]  .workspace-grid .table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

/* Non-confined grids render a proxy horizontal bar (.table-horizontal-scroll) because the
   real one is hidden; we re-enabled the real bars, so hide the proxy to avoid two bars. */
.workspace-content[b-uuybgsjklk]  .workspace-grid .table-horizontal-scroll {
    display: none !important;
}

.workspace-content[b-uuybgsjklk]  .workspace-grid .table-wrapper table.grid thead th {
    position: sticky;
    top: 0;
    z-index: 101;
}

/* Pin the Last contact + Actions columns to the right during horizontal scroll.
   The theme pins via "position: sticky; right: 0", which only works when the table is
   wider than its scroll wrapper. Force the table to its natural width so the
   ".table-wrapper { overflow-x: scroll }" kicks in and the sticky cells have something to
   stick against. */
.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid {
    table-layout: fixed !important;
    width: max-content !important;
    min-width: 100% !important;
}

.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="InvoiceNumber"] {
    width: 140px;
}

.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="Status"] {
    width: 200px;
}

.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="PastDue"] {
    width: 110px;
}

.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="Amount"] {
    width: 135px;
}

/* Flex column: absorbs any slack when the grid is wider than the sum of the other
   columns, so the columns fill the grid instead of leaving a gap on the pinned side. */
.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="WorkflowActivity"] {
    width: auto;
    min-width: 200px;
}

/* Collapse the theme's trailing placeholder column so it no longer eats the slack
   (that slack now goes to the flex column above, keeping the pinned columns flush right). */
.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th.placeholder {
    width: 0;
    min-width: 0;
    padding: 0;
}

.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="InvoiceStatus"] {
    width: 200px;
}

.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="DueDate"] {
    width: 130px;
}

/* Two right-pinned columns: Actions sits flush right (theme's right:0); Last contact must
   stack to its left by the Actions column width so they don't overlap at right:0. */
.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="Actions"],
.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid td[data-name="Actions"] {
    width: 90px !important;
    right: 0 !important;
}

.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid th[data-property-name="LastContact"],
.workspace-content[b-uuybgsjklk]  .table-wrapper table.grid td[data-name="Last contact"] {
    width: 150px !important;
    right: 60px !important;
}

/* ---------- Contacts modal ---------- */
.contacts-modal-header[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    flex: 0 0 auto;
}

.contacts-modal-title[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.cm-title[b-uuybgsjklk] {
    font-size: 18px;
    font-weight: 600;
    color: var(--black-color);
}

.cm-divider[b-uuybgsjklk] {
    width: 1px;
    height: 20px;
    background: var(--border-color);
}

.cm-name[b-uuybgsjklk] {
    font-size: 18px;
    font-weight: 400;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ask-b-btn[b-uuybgsjklk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-text-color);
    cursor: pointer;
}

.ask-b-btn:hover[b-uuybgsjklk] {
    background: var(--light-background);
}

.contacts-modal-header[b-uuybgsjklk]  .ask-b-button.tx-glu-button.size-normal {
    border: solid 1px var(--border-subtle);
    margin: 3px;
}

.ask-b-text[b-uuybgsjklk] {
    padding-right: 6px;
    color: var(--black-color);
}

.ask-b-text u[b-uuybgsjklk] {
    text-underline-offset: 2px;
}

.ask-b-icon[b-uuybgsjklk] {
    width: 16px;
    height: 16px;
    color: var(--black-color);
}

.contacts-modal-body[b-uuybgsjklk] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 50px;
    padding-top: 30px;
    border-bottom: 1px solid var(--border-subtle);
}

.contacts-modal-toolbar[b-uuybgsjklk] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 0 0 auto;
}

.contacts-modal-header[b-uuybgsjklk]  svg.ask-b-icon path {
    fill: var(--button-icon-color) !important;
}

.contacts-search-wrap[b-uuybgsjklk] {
    position: relative;
    display: block;
    padding: 1px
}

.contacts-search[b-uuybgsjklk] {
    width: 100%;
}

.contacts-search-wrap[b-uuybgsjklk]  .input-container {
    height: 44px;
    border-radius: 8px;
}

.contacts-search-wrap[b-uuybgsjklk]  .contacts-search-icon {
    width: 18px;
    height: 18px;
    fill: #949494;
    color: #949494;
    pointer-events: none;
}

.contacts-type-filter[b-uuybgsjklk] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 8px;
    width: fit-content;
    border: solid 1px var(--border-subtle);
}

.type-segment[b-uuybgsjklk] {
    padding: 3px 16px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    cursor: pointer;
    color: var(--black-color);
}

.type-segment.selected[b-uuybgsjklk] {
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 600;
}

.contacts-list[b-uuybgsjklk] {
    list-style: none;
    margin: 0;
    padding: 0 2px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Show ~4 rows, then scroll the rest. */
    max-height: 370px;
    overflow-y: auto;
}

.contact-row[b-uuybgsjklk] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #D9D9D92E;
}

.contact-avatar[b-uuybgsjklk] {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--border-subtle);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.contact-identity[b-uuybgsjklk] {
    flex: 0 0 30%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-name[b-uuybgsjklk] {
    font-size: 15px;
    font-weight: 600;
    color: var(--black-color);
}

.contact-qualifier[b-uuybgsjklk] {
    font-size: 13px;
    color: var(--secondary-text-color);
}

.contact-links[b-uuybgsjklk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-email[b-uuybgsjklk],
.contact-phone[b-uuybgsjklk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--secondary-text-color);
    text-decoration: none;
}

.contact-email:hover[b-uuybgsjklk] {
    text-decoration: underline;
}

.contact-links[b-uuybgsjklk]  svg {
    width: 14px;
    height: 14px;
    fill: #949494;
    color: #949494;
}

.contacts-empty[b-uuybgsjklk] {
    padding: 16px;
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 13px;
}

/* /Pages/Prototypes/Invoices.razor.rz.scp.css */
/* Invoices prototype — scoped styles (CSS isolation) */

.workspace-shell[b-r5elt7cykf] {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
    width: 100%;
    background: var(--background);
}

/* ---------- Icon navigation rail ---------- */
.icon-rail[b-r5elt7cykf] {
    flex: 0 0 65px;
    width: 65px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--border-color);
    background: var(--white-color);
}

.icon-rail[b-r5elt7cykf]  .rail-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--secondary-text-color);
}

.icon-rail[b-r5elt7cykf]  .rail-button.selected {
    background: rgba(144, 217, 249, 0.25);
    color: var(--primary-color);
}

.icon-rail[b-r5elt7cykf]  .rail-button:hover {
    background: var(--light-background);
}

/* Icon-rail workspace-button + workspace-tabs nav styling is shared: see wwwroot/css/workspace-nav.css */

/* ---------- Workspace navigation panel ---------- */
.workspace-panel[b-r5elt7cykf] {
    flex: 0 0 280px;
    width: 280px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 16px;
    background: #90D9F90A;
    border-right: 1px solid #D1D1D180;
    transition: flex-basis 220ms ease, width 220ms ease, padding 220ms ease, border-color 220ms ease;
}

.workspace-panel.collapsed[b-r5elt7cykf] {
    flex-basis: 0;
    width: 0;
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
    border-right-color: transparent;
}

.workspace-panel-header[b-r5elt7cykf] {
    margin-bottom: 16px;
}

.workspace-panel-title-row[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workspace-panel-title[b-r5elt7cykf] {
    margin: 0;
    font-size: 16px !important;
}

.workspace-panel[b-r5elt7cykf]  .workspace-accordion {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
    padding: 10px;
}

.workspace-accordion-header[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding-right: 4px;
}

.workspace-accordion-header .label[b-r5elt7cykf] {
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .workspace-panel[b-r5elt7cykf] {
        transition: none;
    }
}

/* ---------- Content area ---------- */
.workspace-content[b-r5elt7cykf] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Breadcrumb + page title ---------- */
.invoices-breadcrumb[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--secondary-text-color);
}

.invoices-breadcrumb .crumb[b-r5elt7cykf] {
    color: var(--primary-color);
    text-decoration: none;
}

.invoices-breadcrumb .crumb:hover[b-r5elt7cykf] {
    text-decoration: underline;
}

.invoices-breadcrumb .crumb-sep[b-r5elt7cykf] {
    color: var(--border-color);
}

.invoices-title-row[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoices-title-row[b-r5elt7cykf]  .workspace-expand-button {
    flex: 0 0 auto;
    color: var(--secondary-text-color);
}

.invoices-title[b-r5elt7cykf] {
    margin: 0;
    font-size: 24px !important;
    font-weight: 600;
}

/* ---------- Open / Closed tabs ---------- */
.invoices-tabs[b-r5elt7cykf] {
    margin-top: 4px;
}

/* ---------- Card rows (shared scroll behaviour) ---------- */
.open-cards[b-r5elt7cykf],
.closed-cards[b-r5elt7cykf] {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 8px 0 16px;
}

.cards-scroll[b-r5elt7cykf] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 3px;
}

.cards-scroll[b-r5elt7cykf]::-webkit-scrollbar {
    display: none;
}

.open-cards[b-r5elt7cykf]  .cards-scroll-button {
    align-self: center;
    color: var(--secondary-text-color);
}

/* ---------- Open filter cards ---------- */
/* Grow to fill the row on wide screens; the min-width floor keeps them from shrinking on
   narrow screens so the strip still overflows into the scroll + arrow controls. */
.card-item[b-r5elt7cykf] {
    flex: 1 1 auto;
}

/* Coloured left edge per collection tone (design). Plain cards keep the neutral 1px border. */
.card-item.tone-danger[b-r5elt7cykf]  .tx-glu-tile {
    border-left: 8px solid var(--error);
}

.card-item.tone-overdue[b-r5elt7cykf]  .tx-glu-tile {
    border-left: 8px solid var(--warning-alt);
}

.card-item.tone-disputed[b-r5elt7cykf]  .tx-glu-tile {
    border-left: 8px solid var(--dispute-card);
}

.card-item.tone-warning[b-r5elt7cykf]  .tx-glu-tile {
    border-left: 8px solid var(--tangerine-yellow);
}

.card-item.awaiting-human-input-card[b-r5elt7cykf]  .tx-glu-tile {
    background: #90D9F914;
}

.card-item.not-due-card[b-r5elt7cykf]  .tx-glu-tile {
    border-left: 8px solid var(--grid-cards-border-color);
}

/* Selected card: ring the whole card in primary from the parent, keeping the tone left border intact. */
.card-item.selected[b-r5elt7cykf] {
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--primary-color);
}

.card-item.selected[b-r5elt7cykf]  .tx-glu-tile {
    outline: none !important;
}

.open-cards[b-r5elt7cykf]  .tx-glu-tile .title {
    font-size: 14px;
    color: var(--black-color);
}

.open-cards[b-r5elt7cykf]  .tx-glu-tile .value {
    font-size: 24px;
    font-weight: 400;
    color: var(--black-color);
    margin: 0;
}

.card-amount[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--black-color);
}

.card-separator[b-r5elt7cykf] {
    align-self: stretch;
    width: 2px;
    background: #D1D1D1;
    flex: 0 0 auto;
}

/* GluCurrencyLabel renders the base-currency flag; shrink it to the card's 12px text scale and drop
   the theme's right margin, since the amount row already spaces its children with a flex gap. */
.base-currency-flag[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.card-amount[b-r5elt7cykf]  .base-currency-flag .flag,
.cc-amount[b-r5elt7cykf]  .base-currency-flag .flag {
    max-width: 18px;
    margin-right: 0;
    border-radius: 2px;
}

/* ---------- Closed trend cards ---------- */
.closed-card[b-r5elt7cykf] {
    flex: 1 1 0;
    min-width: 220px;
    border: 1px solid #D1D1D1;
    border-radius: 8px;
    background: var(--white-color);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.closed-card.selected[b-r5elt7cykf] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.cc-header[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cc-title[b-r5elt7cykf] {
    font-size: 14px;
    color: var(--black-color);
    font-weight: 600;
}

.closed-cards[b-r5elt7cykf]  .cc-window-button {
    color: var(--secondary-text-color);
    font-size: 12px;
}

.cc-value[b-r5elt7cykf] {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
}

.cc-amount[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--black-color);
    font-weight: 400;
}

.cc-body[b-r5elt7cykf] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.cc-figures[b-r5elt7cykf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* ---------- Sparklines ---------- */
.sparkline[b-r5elt7cykf] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 150px;
    height: 40px;
}

.sparkline .spark-line[b-r5elt7cykf] {
    fill: none;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.sparkline .spark-fill[b-r5elt7cykf] {
    stroke: none;
    opacity: 0.14;
}

.spark-paid .spark-line[b-r5elt7cykf] {
    stroke: #2E9E5B;
}

.spark-paid .spark-fill[b-r5elt7cykf] {
    fill: url(#spark-paid-gradient);
    opacity: 1;
}

.spark-writtenoff .spark-line[b-r5elt7cykf] {
    stroke: #E1548B;
}

.spark-writtenoff .spark-fill[b-r5elt7cykf] {
    fill: url(#spark-writtenoff-gradient);
    opacity: 1;
}

.spark-void .spark-line[b-r5elt7cykf] {
    stroke: #8A8A8A;
}

.spark-void .spark-fill[b-r5elt7cykf] {
    fill: url(#spark-void-gradient);
    opacity: 1;
}

/* ---------- Grid loading placeholder ---------- */
.invoice-grid-loading[b-r5elt7cykf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

/* ---------- Column sizing: fill the container when columns are hidden ----------
   Mirrors the CustomerProfile/CustomerOverview approach so the grids behave like every other
   non-confined GluGrid: table-layout:fixed honours each GluGridColumn's pixel width, the theme's
   trailing placeholder <th> is collapsed to 0, and the CustomerName column flexes to absorb any
   leftover width. With the default hidden columns this makes the visible columns fill the grid
   (no gap on the right), and when every column is toggled on the table exceeds the container so the
   wrapper's horizontal scroll reveals the rest and the right-pinned Actions column stays flush. */
.workspace-content[b-r5elt7cykf]  .table-wrapper table.grid {
    table-layout: fixed !important;
    width: max-content !important;
    min-width: 100% !important;
}

/* Collapse the theme's trailing placeholder so leftover width goes to the flex column, not to a
   dead gap beside the pinned Actions column. */
.workspace-content[b-r5elt7cykf]  .table-wrapper table.grid th.placeholder {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Flexible name column soaks up the slack so the visible columns fill the width. */
.workspace-content[b-r5elt7cykf]  .table-wrapper table.grid th[data-property-name="CustomerName"] {
    width: auto !important;
    min-width: 170px;
}

/* Keep the right-pinned Actions column flush to the right edge during horizontal scroll. */
.workspace-content[b-r5elt7cykf]  .table-wrapper table.grid th[data-property-name="Actions"],
.workspace-content[b-r5elt7cykf]  .table-wrapper table.grid td[data-name="Actions"] {
    width: 90px !important;
    right: 0 !important;
}
/* /Shared/503Error.razor.rz.scp.css */

#notfound[b-kv20j4ifvy] {
    position: relative;
    height: 100vh;
}

    #notfound .notfound[b-kv20j4ifvy] {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

        #notfound .notfound .notfound-404[b-kv20j4ifvy] {
            position: absolute;
            height: 100px;
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            z-index: -1;
        }

            #notfound .notfound .notfound-404 .text-h1[b-kv20j4ifvy] {
                color: #ececec;
                font-weight: 900;
                font-size: 276px;
                margin: 0px;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

        #notfound .notfound h1[b-kv20j4ifvy] {
            margin: 0px;
        }

        #notfound .notfound p[b-kv20j4ifvy] {
            color: var(--text-color, "#333333");
            margin-top: 16px;
            font-size: 16px;
        }