/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-page[b-s0g87za91x] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    padding: 1rem;
}

.auth-card[b-s0g87za91x] {
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.auth-brand[b-s0g87za91x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
    margin-bottom: 1.25rem;
    letter-spacing: -0.5px;
}

.auth-logo[b-s0g87za91x] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-zv0afgso55] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-zv0afgso55] {
    flex: 1;
    /* Without this a wide grid (e.g. the projection overview) stretches the flex item and the
       whole page scrolls sideways; min-width:0 lets it shrink so the grid scrolls inside its own
       overflow container instead. */
    min-width: 0;
}

.sidebar[b-zv0afgso55] {
    background-image: linear-gradient(180deg, #16294a 0%, #2f4d80 100%);
}

.top-row[b-zv0afgso55] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-zv0afgso55]  a, .top-row[b-zv0afgso55]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-zv0afgso55]  a:hover, .top-row[b-zv0afgso55]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-zv0afgso55]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-zv0afgso55] {
        justify-content: space-between;
    }

    .top-row[b-zv0afgso55]  a, .top-row[b-zv0afgso55]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-zv0afgso55] {
        flex-direction: row;
    }

    .sidebar[b-zv0afgso55] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-zv0afgso55] {
        position: sticky;
        top: 0;
        /* Sticky makes this a stacking context, so the user menu's own z-index counts only
           inside it — this value is what the whole header, dropdown included, is worth
           against page content. It has to clear anything a page positions. */
        z-index: 1030;
    }

    .top-row.auth[b-zv0afgso55]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-zv0afgso55], article[b-zv0afgso55] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

    #blazor-error-ui .dismiss[b-zv0afgso55] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-hq257zinvk] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-hq257zinvk] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-hq257zinvk] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.3);
}

.navbar-brand[b-hq257zinvk] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* Little rounded "P" logo mark before the wordmark. */
.brand-mark[b-hq257zinvk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
}

.nav-item[b-hq257zinvk] {
    font-size: 0.9rem;
    padding-bottom: 0.3rem;
}

    .nav-item:first-of-type[b-hq257zinvk] {
        padding-top: 1rem;
    }

/* Inline SVG icons (declared in NavMenu markup, so scoped without ::deep). */
.nav-icon[b-hq257zinvk] {
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.65rem;
    flex-shrink: 0;
}

/* NavLink renders its own <a> (needs ::deep); our group-toggle <button> is in-scope. */
.nav-item[b-hq257zinvk]  .nav-link,
.nav-item .nav-link[b-hq257zinvk] {
    color: #cdd6e4;
    background: none;
    border: none;
    border-radius: 6px;
    height: 2.7rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.85rem;
    text-align: left;
    cursor: pointer;
}

.nav-item[b-hq257zinvk]  a.active {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.nav-item[b-hq257zinvk]  .nav-link:hover,
.nav-item .nav-link:hover[b-hq257zinvk] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-group-toggle[b-hq257zinvk] {
    user-select: none;
}

.nav-caret[b-hq257zinvk] {
    width: 0.85rem;
    height: 0.85rem;
    margin-left: auto;
    transition: transform 0.15s ease;
}

/* CSS-only collapse: hidden checkbox toggled by the label, drives the submenu + caret */
.nav-group-checkbox[b-hq257zinvk] {
    display: none;
}

.nav-submenu[b-hq257zinvk] {
    display: none;
}

.nav-group-checkbox:checked ~ .nav-submenu[b-hq257zinvk] {
    display: block;
}

.nav-group-checkbox:checked ~ .nav-item .nav-caret[b-hq257zinvk] {
    transform: rotate(180deg);
}

/* Catalogue submenu */
.nav-submenu .nav-item[b-hq257zinvk] {
    padding-bottom: 0.1rem;
}

    .nav-submenu .nav-item:first-of-type[b-hq257zinvk] {
        padding-top: 0.1rem;
    }

.nav-submenu[b-hq257zinvk]  .nav-link {
    height: 2.3rem;
    padding-left: 1.7rem;
    font-size: 0.84rem;
}

.nav-submenu .nav-icon[b-hq257zinvk] {
    width: 1rem;
    height: 1rem;
}

/* ── Third level: sub-groups (Master Data → Customers / Products / Misc) ── */
.nav-subgroup-toggle[b-hq257zinvk] {
    padding-left: 1.7rem !important;
    height: 2.3rem !important;
    font-size: 0.84rem;
}

.nav-subsubmenu[b-hq257zinvk]  .nav-link {
    padding-left: 2.7rem !important;
    height: 2.1rem;
    font-size: 0.82rem;
}

.nav-scrollable[b-hq257zinvk] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-hq257zinvk] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-hq257zinvk] {
        display: none;
    }

    .nav-scrollable[b-hq257zinvk] {
        /* Flex column so the version footer pins to the bottom (Trophyst style):
           the nav scrolls, the footer stays. */
        display: flex;
        flex-direction: column;
        height: calc(100vh - 3.5rem);
    }

    .nav-scrollable > nav[b-hq257zinvk] {
        flex: 1;
        overflow-y: auto;
        /* Bootstrap's .nav is flex-wrap: wrap — with the constrained height that wraps
           overflowing items into a second column beside the menu. Scroll instead. */
        flex-wrap: nowrap;
    }
}

.version-footer[b-hq257zinvk] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.version-link[b-hq257zinvk] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.version-link:hover[b-hq257zinvk] {
    color: #fff;
}

.version-link .nav-icon[b-hq257zinvk] {
    width: 14px;
    height: 14px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kcsie6nky2],
.components-reconnect-repeated-attempt-visible[b-kcsie6nky2],
.components-reconnect-failed-visible[b-kcsie6nky2],
.components-pause-visible[b-kcsie6nky2],
.components-resume-failed-visible[b-kcsie6nky2],
.components-rejoining-animation[b-kcsie6nky2] {
    display: none;
}

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


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

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

}

#components-reconnect-modal[b-kcsie6nky2]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-kcsie6nky2 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-kcsie6nky2] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-kcsie6nky2] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-kcsie6nky2] {
        background-color: #6b9ed2;
    }

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SignLayout.razor.rz.scp.css */
.sign-page[b-3a0ct16ol2] {
    min-height: 100vh;
    background: var(--bg-body, #f5f7fa);
    padding: 32px 16px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.sign-card[b-3a0ct16ol2] {
    width: 100%;
    max-width: 960px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.sign-brand[b-3a0ct16ol2] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent, #2563eb);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--accent, #2563eb);
}

.sign-logo[b-3a0ct16ol2] {
    width: 28px;
    height: 28px;
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-lzro0634gc] {
    position: relative;
    margin-left: 1rem;
}

.user-chip[b-lzro0634gc] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    color: #334155;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.user-chip:hover[b-lzro0634gc] {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

.chip-icon[b-lzro0634gc] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

.chip-caret[b-lzro0634gc] {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.chip-name[b-lzro0634gc] {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Invisible click-away layer under the dropdown */
.user-menu-backdrop[b-lzro0634gc] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.user-menu-dropdown[b-lzro0634gc] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 1041;
    min-width: 15rem;
    background: var(--bg-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    padding: 0.4rem;
}

.dropdown-user[b-lzro0634gc] {
    padding: 0.4rem 0.6rem;
}

.dropdown-entry[b-lzro0634gc] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.88rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.dropdown-entry:hover[b-lzro0634gc] {
    background-color: rgba(0, 0, 0, 0.06);
}

.entry-icon[b-lzro0634gc] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ── Security tab ── */
.qr-box[b-lzro0634gc] {
    width: 180px;
    height: 180px;
    padding: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

.recovery-codes[b-lzro0634gc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1rem;
}

.recovery-codes code[b-lzro0634gc] {
    font-size: 0.85rem;
}
/* /Components/Pages/Agreements/Details.razor.rz.scp.css */
/* Agreement line grid — same readable sizing and two-line header style as the projection grid. */
.agreement-grid[b-dxsoruelzw] {
    font-size: 0.9rem;
}

.agreement-grid th[b-dxsoruelzw] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
    white-space: normal;      /* multi-line headers */
    line-height: 1.15;
    vertical-align: bottom;
}

/* No spinner buttons — arrow keys navigate the grid, typing edits the value */
.agreement-grid input[type="number"][b-dxsoruelzw]::-webkit-outer-spin-button,
.agreement-grid input[type="number"][b-dxsoruelzw]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.agreement-grid input[type="number"][b-dxsoruelzw] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* /Components/Pages/Agreements/Reporting.razor.rz.scp.css */
/* ── KPI cards: Insight360/mock style — white card, tinted icon chip, big value ── */

.soa-kpis[b-785yz4miuj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.soa-kpi[b-785yz4miuj] {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.soa-kpi-top[b-785yz4miuj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soa-kpi-icon[b-785yz4miuj] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--kpi-color, #888) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.soa-kpi-icon svg[b-785yz4miuj] {
    width: 20px;
    height: 20px;
    stroke: var(--kpi-color, #888);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soa-kpi-label[b-785yz4miuj] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.soa-kpi-value[b-785yz4miuj] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.soa-kpi-caption[b-785yz4miuj] {
    font-size: 0.74rem;
    color: var(--text-muted, #6c757d);
}
/* /Components/Pages/Changelog.razor.rz.scp.css */
.changelog-container[b-0y5o0m1a6a] {
    max-width: 800px;
}

.changelog-item[b-0y5o0m1a6a] {
    background: var(--bg-card, #fff);
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.changelog-item.latest[b-0y5o0m1a6a] {
    border: 2px solid var(--accent, #2563eb);
}

.changelog-header[b-0y5o0m1a6a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.changelog-header:hover[b-0y5o0m1a6a] {
    background-color: var(--bg-subtle, #f5f7fa);
}

.version-badge[b-0y5o0m1a6a] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    padding: 0.25rem 0.75rem;
    background-color: var(--bg-subtle, #f5f7fa);
    border-radius: 6px;
}

.version-badge.badge-latest[b-0y5o0m1a6a] {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.1));
    color: var(--accent, #2563eb);
}

.release-date[b-0y5o0m1a6a] {
    font-size: 0.875rem;
}

.expand-icon[b-0y5o0m1a6a] {
    color: var(--text-muted, #8a94a6);
    transition: transform 0.2s ease;
}

.expand-icon.expanded[b-0y5o0m1a6a] {
    transform: rotate(180deg);
}

.changelog-body[b-0y5o0m1a6a] {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color, #e5e9f0);
}

.changes-list[b-0y5o0m1a6a] {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.changes-list li[b-0y5o0m1a6a] {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.5rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.5;
}

.changes-list li[b-0y5o0m1a6a]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 6px;
    height: 6px;
    background-color: var(--accent, #2563eb);
    border-radius: 50%;
}
/* /Components/Pages/Customers/Reporting.razor.rz.scp.css */
/* ── KPI cards: same Insight360/mock style as the SOA dashboard ── */

.soa-kpis[b-drwu4qdj7j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.soa-kpi[b-drwu4qdj7j] {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.soa-kpi-top[b-drwu4qdj7j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soa-kpi-icon[b-drwu4qdj7j] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--kpi-color, #888) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.soa-kpi-icon svg[b-drwu4qdj7j] {
    width: 20px;
    height: 20px;
    stroke: var(--kpi-color, #888);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soa-kpi-label[b-drwu4qdj7j] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.soa-kpi-value[b-drwu4qdj7j] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.soa-kpi-caption[b-drwu4qdj7j] {
    font-size: 0.74rem;
    color: var(--text-muted, #6c757d);
}

/* ── Customer table ── */

.row-link[b-drwu4qdj7j] {
    cursor: pointer;
}

.sortable[b-drwu4qdj7j] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable:hover[b-drwu4qdj7j] {
    color: var(--accent, #2563eb);
}

/* ── KPI stacks beside the compact pie: two boxes share the column height ── */
.kpi-stack[b-drwu4qdj7j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kpi-stack .soa-kpi[b-drwu4qdj7j] {
    flex: 1;
}
/* /Components/Pages/Customers/ReportingDetails.razor.rz.scp.css */
/* ── KPI cards: same Insight360/mock style as the SOA dashboard ── */

.soa-kpis[b-uvx92ucib3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.soa-kpi[b-uvx92ucib3] {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.soa-kpi-top[b-uvx92ucib3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soa-kpi-icon[b-uvx92ucib3] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--kpi-color, #888) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.soa-kpi-icon svg[b-uvx92ucib3] {
    width: 20px;
    height: 20px;
    stroke: var(--kpi-color, #888);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soa-kpi-label[b-uvx92ucib3] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.soa-kpi-value[b-uvx92ucib3] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.soa-kpi-caption[b-uvx92ucib3] {
    font-size: 0.74rem;
    color: var(--text-muted, #6c757d);
}

/* ── Status dot in the agreements table ── */

.status-dot[b-uvx92ucib3] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot, #6c757d);
    margin-right: 4px;
}

/* ── Detail pages: fixed 2 rows × 3 boxes (tidier than one long strip) ── */
.soa-kpis.two-rows[b-uvx92ucib3] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .soa-kpis.two-rows[b-uvx92ucib3] {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}
/* /Components/Pages/Forecasts/Entry.razor.rz.scp.css */
/* Worksheet grid — Trophyst campaign-table header style + vertical field separators. */
.projection-grid[b-k3c370q2lj] {
    font-size: 12.6px;
    width: 100%;
}

.projection-grid th[b-k3c370q2lj] {
    font-size: 10.1px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
    white-space: normal;      /* multi-line headers */
    line-height: 1.15;
    padding: 0.3rem 0.4rem;
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color, #dbe1ea);
    border-right: 1px solid var(--border-color, #e5e9f0);
}

.projection-grid td[b-k3c370q2lj] {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
    border-right: 1px solid var(--border-color, #e5e9f0);
}

.projection-grid th:last-child[b-k3c370q2lj],
.projection-grid td:last-child[b-k3c370q2lj] {
    border-right: 0;
}

.projection-grid thead[b-k3c370q2lj] {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Opaque header cells + a soft drop-shadow, so scrolling rows don't ghost through the
   frozen header (the group-banner tints are translucent by design). */
.forecast-grid thead th[b-k3c370q2lj] {
    background-color: var(--bg-elevated, #fff);
}

.forecast-grid thead tr:last-child th[b-k3c370q2lj] {
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.22);
}

/* The grid is its own bounded scroll panel so the header can truly freeze: sticky anchors
   to THIS scroll box, and the body scrolls under a frozen thead (Excel-style). The height is
   refined in JS (stickyStrip.fit) to reach the viewport bottom; this calc is the fallback. */
.forecast-scroll[b-k3c370q2lj] {
    max-height: calc(100vh - 240px);
    overflow: auto;
}

/* Keep keyboard/focus navigation from tucking a row under the (tall) sticky header.
   --fc-strip-h is the measured header height, published by stickyStrip.sync. */
.forecast-grid tbody tr[b-k3c370q2lj],
.forecast-grid tbody input[b-k3c370q2lj] {
    scroll-margin-top: calc(var(--fc-strip-h, 120px) + 0.5rem);
}

/* ── Mini-calendar rides inside the sticky <thead> as its own full-width row ── */
.forecast-grid .fc-cal-cell[b-k3c370q2lj] {
    padding: 0 !important;
    border: 0 !important;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color, #dbe1ea) !important;
}

.fc-oneliner[b-k3c370q2lj] {
    background: var(--bg-elevated, #fff);
    overflow: hidden;
}

/* The harvested pcal, sized for the header context. */
.fc-ol-pcal .pcal-track[b-k3c370q2lj] {
    min-width: 640px;
}

.fc-ol-pcal .pcal-label[b-k3c370q2lj] {
    background: var(--bg-elevated, #fff);
}

/* Normal-price field focused: campaign bars dim, the window shading reads as "outside". */
.fc-oneliner.fc-outside .pcal-bar[b-k3c370q2lj] {
    opacity: 0.4;
}

.fc-oneliner.fc-outside .pcal-inperiod[b-k3c370q2lj] {
    background: rgba(22, 163, 74, 0.1);
}

.projection-grid tbody tr:hover[b-k3c370q2lj] {
    background-color: rgba(37, 99, 235, 0.05);
}

/* Compact inputs so the grid rows stay tight */
.projection-grid input.form-control-sm[b-k3c370q2lj] {
    padding: 0.15rem 0.3rem;
    font-size: 11.9px;
}

/* No spinner buttons — arrow keys navigate the grid, typing edits the value */
.projection-grid input[type="number"][b-k3c370q2lj]::-webkit-outer-spin-button,
.projection-grid input[type="number"][b-k3c370q2lj]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.projection-grid input[type="number"][b-k3c370q2lj] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Perspective group banner + customer-group tinting */
.projection-grid .grp-row th[b-k3c370q2lj] {
    text-align: center;
    font-size: 9.8px;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--border-color, #dbe1ea);
    vertical-align: middle;
}

.projection-grid .grp-blank[b-k3c370q2lj] {
    border-right: 0;
}

/* Tints layered as an image over the opaque header background above (so they stay opaque). */
.projection-grid .grp-our[b-k3c370q2lj] {
    background-image: linear-gradient(rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.10));
    color: #1d4ed8;
}

.projection-grid .grp-customer[b-k3c370q2lj] {
    background-image: linear-gradient(rgba(217, 119, 6, 0.12), rgba(217, 119, 6, 0.12));
    color: #b45309;
}

.projection-grid th.grp-customer-col[b-k3c370q2lj] {
    background: rgba(217, 119, 6, 0.06);
}

.projection-grid td.grp-customer-col[b-k3c370q2lj] {
    background: rgba(217, 119, 6, 0.03);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Promora dashboard — ported from Trophyst Home (hd-*) ── */

/* Card shell */
.hd-card[b-40apetgema] {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    /* A shadow this soft is barely a shadow — it lifts the card off the page without the drop
       shadow that dates an interface. Two layers: a hairline to sharpen the edge, and a wide
       diffuse one for the lift. */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.10);
}

[data-theme="dark"] .hd-card[b-40apetgema] {
    /* Shadows do nothing on a dark ground; the border carries the separation instead. */
    box-shadow: none;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   The mountain sits to the right and is washed out towards the left by a gradient in the card's
   own colour, so the headline never sits on top of detail. The gradient is the same token as the
   card background, which is what lets one image work in both themes: light mode fades to white,
   dark mode fades to slate, and the photograph is dimmed to sit behind rather than shout. */
.hd-hero[b-40apetgema] {
    position: relative;
    /* Its own stacking context: ::after is generated last in tree order and would otherwise
       paint the gradient over the copy, but lifting the copy in the *root* context put it over
       the header's user menu. Isolating keeps that fight inside the banner. */
    isolation: isolate;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 30px 32px;
    min-height: 168px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--bg-card);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.10);
}

.hd-hero[b-40apetgema]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/summit-hero.webp");
    background-size: cover;
    background-position: 72% 38%;
    /* The photograph is a backdrop, not the subject. */
    opacity: 0.85;
}

.hd-hero[b-40apetgema]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        var(--bg-card) 0%,
        var(--bg-card) 30%,
        color-mix(in srgb, var(--bg-card) 72%, transparent) 52%,
        transparent 82%);
}

[data-theme="dark"] .hd-hero[b-40apetgema]::before {
    opacity: 0.30;
}

.hd-hero-copy[b-40apetgema],
.hd-hero-aside[b-40apetgema] {
    position: relative;
    z-index: 1;
}

.hd-hero-eyebrow[b-40apetgema] {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-secondary);
}

.hd-hero-title[b-40apetgema] {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-strong);
    max-width: 34ch;
}

/* Every h1 in the app carries a short accent rule beneath it as a page marker. The hero is not a
   page title — it is a banner — and the rule reads there as a stray mark under the sentence. */
.hd-hero-title[b-40apetgema]::after {
    content: none;
}

.hd-hero-sub[b-40apetgema] {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.hd-hero-aside[b-40apetgema] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    text-align: right;
}

.hd-hero-unit[b-40apetgema] {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(4px);
}

.hd-hero-tagline[b-40apetgema] {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-secondary);
}

/* Under about 900px the photograph and the text start fighting for the same room, so the
   tagline steps out and the image retreats further behind the copy. */
@media (max-width: 900px) {
    .hd-hero[b-40apetgema] { padding: 24px; min-height: 0; }
    .hd-hero-title[b-40apetgema] { font-size: 24px; }
    .hd-hero-aside[b-40apetgema] { display: none; }
    .hd-hero[b-40apetgema]::after {
        background: linear-gradient(
            100deg,
            var(--bg-card) 0%,
            var(--bg-card) 55%,
            color-mix(in srgb, var(--bg-card) 80%, transparent) 100%);
    }
}

/* ── Closing strip ───────────────────────────────────────────────────────── */
.hd-strip[b-40apetgema] {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 18px 32px;
    margin-top: 4px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--bg-card);
}

.hd-strip[b-40apetgema]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/summit-strip.webp");
    background-size: cover;
    background-position: center 42%;
    opacity: 0.55;
}

.hd-strip[b-40apetgema]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--bg-card) 70%, transparent) 22%,
        var(--bg-card) 46%);
}

[data-theme="dark"] .hd-strip[b-40apetgema]::before { opacity: 0.22; }

.hd-strip-quote[b-40apetgema] {
    position: relative;
    z-index: 1;
    margin: 0 0 0 auto;
    padding-left: 24px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 17px;
    color: var(--text-secondary);
}

@media (max-width: 700px) {
    .hd-strip-quote[b-40apetgema] { font-size: 15px; margin-left: 0; }
    .hd-strip[b-40apetgema]::after {
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--bg-card) 70%, transparent) 0%,
            var(--bg-card) 40%);
    }
}

/* Greeting (kept for the pending-activation card) */
.hd-hello[b-40apetgema] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-strong);
}

.hd-subtitle[b-40apetgema] {
    color: var(--text-secondary);
    font-size: 14px;
}

/* KPI action cards */
.hd-kpis[b-40apetgema] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hd-kpi-row[b-40apetgema] {
    display: flex;
    gap: 14px;
}

.hd-kpi[b-40apetgema] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 13px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.hd-kpi:hover:not(:disabled)[b-40apetgema] {
    border-color: var(--kpi-color, var(--text-muted));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.hd-kpi:disabled[b-40apetgema] { cursor: default; opacity: 0.85; }
.hd-kpi:focus-visible[b-40apetgema] { outline: 2px solid var(--kpi-color, var(--text-muted)); outline-offset: 2px; }

.hd-kpi-icon[b-40apetgema] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--kpi-color, #ced4da);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hd-kpi-icon svg[b-40apetgema] {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.hd-kpi-body[b-40apetgema] { min-width: 0; flex: 1; }

.hd-kpi-title[b-40apetgema] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.2;
}

.hd-kpi-desc[b-40apetgema] {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hd-kpi-link[b-40apetgema] {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--kpi-color, var(--text-secondary));
}

.hd-kpi-count[b-40apetgema] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-strong);
    flex-shrink: 0;
}

.hd-panel-footnote[b-40apetgema] {
    padding: 8px 18px 2px;
    font-size: 12px;
    color: var(--text-muted);
}
.hd-panel-footnote a[b-40apetgema] { color: var(--text-secondary); }

/* Narrower viewports: let the balanced rows wrap to fewer, wider cards. */
@media (max-width: 1100px) {
    .hd-kpi-row[b-40apetgema] { flex-wrap: wrap; }
    .hd-kpi[b-40apetgema] { flex: 1 1 44%; }
}

@media (max-width: 560px) {
    .hd-kpi[b-40apetgema] { flex: 1 1 100%; }
}

/* Panel header */
.hd-panel-header[b-40apetgema] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}

.hd-panel-title[b-40apetgema] {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
}

.hd-panel-caption[b-40apetgema] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.hd-panel-action[b-40apetgema] {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.hd-panel-action:hover[b-40apetgema] { text-decoration: underline; }
.hd-panel-body[b-40apetgema] { padding: 16px 18px; }
.hd-panel-body.p-0[b-40apetgema] { padding: 0; }

/* Pipeline */
.hd-pipeline-wrap[b-40apetgema] {
    display: flex;
    align-items: stretch;
    gap: 18px;
}

/* ── Flow ──────────────────────────────────────────────────────────────────
   The stages are chevrons that interlock, so the eye reads a direction instead of a row of boxes,
   and they are tinted along a ramp from the first stage to the last — the colour itself carries how
   far through the pipeline a stage sits. --tint is the position on that ramp, set per stage from
   the markup, which is what lets one rule serve pipelines of any length. */
.hd-flow[b-40apetgema] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    --flow-start: #e1ebfc;
    --flow-end: #ddf2e6;
    --seg-start: #8fb2f2;
    --seg-end: #79cfa4;
    /* One metallic grey for every stage icon. The per-status colours still drive the badges and
       the action cards; inside the flow the tinted chevrons already carry the progression, and
       seven different icon colours on top of them was a colour too many. */
    --flow-icon: #8d99a8;
    --notch: 13px;
}

.hd-flow-track[b-40apetgema] {
    display: flex;
    gap: 3px;
    border-radius: 12px;
    /* Squares off the outer ends, which the chevron clip-path cannot round itself. */
    overflow: hidden;
}

.hd-flow-step[b-40apetgema] {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    padding: 15px 20px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background: color-mix(in srgb, var(--flow-end) var(--tint, 0%), var(--flow-start));
    /* Notched on the left, pointed on the right: each stage slots into the next. */
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
    transition: transform .15s, filter .15s;
}

/* The two ends face outwards, so the flow reads as one bar with a direction. */
.hd-flow-first[b-40apetgema] {
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}

.hd-flow-last[b-40apetgema] {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--notch) 50%);
}

/* box-shadow would be clipped away with the corners; drop-shadow follows the chevron. */
.hd-flow-step:hover:not(:disabled)[b-40apetgema] {
    transform: translateY(-2px);
    filter: drop-shadow(0 5px 10px rgba(16, 24, 40, 0.16));
}

.hd-flow-step:focus-visible[b-40apetgema] { outline: 2px solid var(--accent); outline-offset: -3px; }
.hd-flow-step:disabled[b-40apetgema] { cursor: default; opacity: .62; }

.hd-flow-circle[b-40apetgema] {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--flow-icon);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.hd-flow-circle svg[b-40apetgema] {
    width: 17px; height: 17px;
    stroke: currentColor; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.hd-flow-label[b-40apetgema] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: var(--text-secondary);
    min-height: 24px;
    display: flex; align-items: center; justify-content: center;
}

.hd-flow-count[b-40apetgema] {
    font-size: 23px;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1;
    margin-top: 5px;
}

.hd-flow-share[b-40apetgema] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--text-secondary);
    margin-top: 5px;
    min-height: 13px;
}

/* The same distribution again, as widths — the shape of the pipeline in one glance. */
.hd-flow-rail[b-40apetgema] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 2px;
}

.hd-flow-rail-label[b-40apetgema] {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.hd-flow-bar[b-40apetgema] {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 8px;
}

.hd-flow-seg[b-40apetgema] {
    min-width: 4px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--seg-end) var(--tint, 0%), var(--seg-start));
}

[data-theme="dark"] .hd-flow[b-40apetgema] {
    --flow-start: #1e2a3d;
    --flow-end: #1c3029;
    --seg-start: #3f6bb8;
    --seg-end: #3f8f6a;
    --flow-icon: #7c8896;
}

.hd-pipeline-summary[b-40apetgema] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 8px 18px;
    border-left: 1px solid var(--border-subtle);
    min-width: 150px;
}

.hd-summary-stat[b-40apetgema] { text-align: center; }

.hd-summary-num[b-40apetgema] {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1;
}

.hd-summary-accent[b-40apetgema] { color: var(--accent); }

.hd-summary-label[b-40apetgema] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 5px;
}

.hd-summary-divider[b-40apetgema] { height: 1px; background: var(--border-subtle); }

@media (max-width: 992px) {
    .hd-pipeline-wrap[b-40apetgema] { flex-direction: column; }
    .hd-flow-track[b-40apetgema] { overflow-x: auto; }
    .hd-flow-step[b-40apetgema] { flex: 0 0 148px; }
    .hd-pipeline-summary[b-40apetgema] {
        flex-direction: row;
        justify-content: space-around;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        padding-top: 14px;
    }
    .hd-summary-divider[b-40apetgema] { width: 1px; height: auto; }
}

@media (max-width: 560px) {
    .hd-flow-step[b-40apetgema] { flex: 0 0 130px; }
    .hd-flow-rail-label[b-40apetgema] { display: none; }
}

/* Table links inside panels */
[b-40apetgema] .table a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

[b-40apetgema] .table a:hover { text-decoration: underline; }
/* /Components/Pages/Products/Reporting.razor.rz.scp.css */
/* ── KPI cards: same Insight360/mock style as the SOA dashboard ── */

.soa-kpis[b-ezaktehu39] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.soa-kpi[b-ezaktehu39] {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.soa-kpi-top[b-ezaktehu39] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soa-kpi-icon[b-ezaktehu39] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--kpi-color, #888) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.soa-kpi-icon svg[b-ezaktehu39] {
    width: 20px;
    height: 20px;
    stroke: var(--kpi-color, #888);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soa-kpi-label[b-ezaktehu39] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.soa-kpi-value[b-ezaktehu39] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.soa-kpi-caption[b-ezaktehu39] {
    font-size: 0.74rem;
    color: var(--text-muted, #6c757d);
}

/* ── Customer table ── */

.row-link[b-ezaktehu39] {
    cursor: pointer;
}

.sortable[b-ezaktehu39] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable:hover[b-ezaktehu39] {
    color: var(--accent, #2563eb);
}

/* ── KPI stacks beside the compact pie: two boxes share the column height ── */
.kpi-stack[b-ezaktehu39] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kpi-stack .soa-kpi[b-ezaktehu39] {
    flex: 1;
}
/* /Components/Pages/Products/ReportingDetails.razor.rz.scp.css */
/* ── KPI cards: same Insight360/mock style as the SOA dashboard ── */

.soa-kpis[b-fprc174o8l] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.soa-kpi[b-fprc174o8l] {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.soa-kpi-top[b-fprc174o8l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soa-kpi-icon[b-fprc174o8l] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--kpi-color, #888) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.soa-kpi-icon svg[b-fprc174o8l] {
    width: 20px;
    height: 20px;
    stroke: var(--kpi-color, #888);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.soa-kpi-label[b-fprc174o8l] {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.soa-kpi-value[b-fprc174o8l] {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
}

.soa-kpi-caption[b-fprc174o8l] {
    font-size: 0.74rem;
    color: var(--text-muted, #6c757d);
}

/* ── Status dot in the agreements table ── */

.status-dot[b-fprc174o8l] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dot, #6c757d);
    margin-right: 4px;
}

/* ── Detail pages: fixed 2 rows × 3 boxes (tidier than one long strip) ── */
.soa-kpis.two-rows[b-fprc174o8l] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .soa-kpis.two-rows[b-fprc174o8l] {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
}
/* /Components/Pages/Projections/CategoryDetails.razor.rz.scp.css */
/* Worksheet grid — Trophyst campaign-table header style + vertical field separators. */
.projection-grid[b-fg2rh2as0g] {
    font-size: 12.6px;
    width: 100%;
}

.projection-grid th[b-fg2rh2as0g] {
    font-size: 10.1px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
    white-space: normal;      /* multi-line headers */
    line-height: 1.15;
    padding: 0.3rem 0.4rem;
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color, #dbe1ea);
    border-right: 1px solid var(--border-color, #e5e9f0);
}

.projection-grid td[b-fg2rh2as0g] {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
    border-right: 1px solid var(--border-color, #e5e9f0);
}

.projection-grid th:last-child[b-fg2rh2as0g],
.projection-grid td:last-child[b-fg2rh2as0g] {
    border-right: 0;
}

.projection-grid thead[b-fg2rh2as0g] {
    position: sticky;
    top: 0;
    z-index: 5;
}

.projection-grid tbody tr:hover[b-fg2rh2as0g] {
    background-color: rgba(37, 99, 235, 0.05);
}

/* Compact inputs so the grid rows stay tight */
.projection-grid input.form-control-sm[b-fg2rh2as0g] {
    padding: 0.15rem 0.3rem;
    font-size: 11.9px;
}

/* No spinner buttons — arrow keys navigate the grid, typing edits the value */
.projection-grid input[type="number"][b-fg2rh2as0g]::-webkit-outer-spin-button,
.projection-grid input[type="number"][b-fg2rh2as0g]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.projection-grid input[type="number"][b-fg2rh2as0g] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Perspective group banner + customer-group tinting */
.projection-grid .grp-row th[b-fg2rh2as0g] {
    text-align: center;
    font-size: 9.8px;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--border-color, #dbe1ea);
    vertical-align: middle;
}

.projection-grid .grp-blank[b-fg2rh2as0g] {
    background: transparent;
    border-right: 0;
}

.projection-grid .grp-our[b-fg2rh2as0g] {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

.projection-grid .grp-customer[b-fg2rh2as0g] {
    background: rgba(217, 119, 6, 0.10);
    color: #b45309;
}

.projection-grid th.grp-customer-col[b-fg2rh2as0g] {
    background: rgba(217, 119, 6, 0.06);
}

.projection-grid td.grp-customer-col[b-fg2rh2as0g] {
    background: rgba(217, 119, 6, 0.03);
}

/* Compact "apply to all customers of this article" button on Support / RRP cells. */
.fill-all-btn[b-fg2rh2as0g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #ccd2da);
    border-radius: 4px;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6b7280);
    cursor: pointer;
    line-height: 1;
}

.fill-all-btn:hover[b-fg2rh2as0g] {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.55);
    color: #1d4ed8;
}

.fill-all-btn:disabled[b-fg2rh2as0g] {
    opacity: 0.45;
    cursor: default;
}

.fill-all-btn svg[b-fg2rh2as0g] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Timeline overview: product rows × week columns, campaign blocks tinted ── */
.ovw-scroll[b-fg2rh2as0g] {
    overflow-x: auto;
}

.ovw-grid[b-fg2rh2as0g] {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.8rem;
}

.ovw-grid th[b-fg2rh2as0g],
.ovw-grid td[b-fg2rh2as0g] {
    border-right: 1px solid var(--border-color, #e5e7eb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 3px 6px;
    text-align: center;
    white-space: nowrap;
}

.ovw-grid .ovw-wk[b-fg2rh2as0g] {
    min-width: 42px;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.ovw-grid .ovw-month[b-fg2rh2as0g] {
    font-weight: 600;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6b7280);
    letter-spacing: 0.03em;
}

/* Product label column pinned while the timeline scrolls sideways. */
.ovw-grid .ovw-prod[b-fg2rh2as0g] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bs-body-bg, #fff);
    text-align: left;
    min-width: 170px;
    max-width: 220px;
    border-right: 2px solid var(--border-color, #d1d5db);
}

.ovw-grid thead .ovw-prod[b-fg2rh2as0g] {
    z-index: 3;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.ovw-grid .ovw-prod-art[b-fg2rh2as0g] {
    font-weight: 600;
}

.ovw-grid .ovw-prod-name[b-fg2rh2as0g] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}

.ovw-grid .ovw-prod-cust[b-fg2rh2as0g] {
    font-size: 0.74rem;
    font-weight: 600;
    color: #b45309;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}

/* Multi-select customer dropdown (native <details>; click-away handled globally in app.js). */
.ms-dd[b-fg2rh2as0g] {
    position: relative;
}

.ms-dd > summary[b-fg2rh2as0g] {
    list-style: none;
    cursor: pointer;
    min-width: 11rem;
    white-space: nowrap;
}

.ms-dd > summary[b-fg2rh2as0g]::-webkit-details-marker {
    display: none;
}

.ms-panel[b-fg2rh2as0g] {
    position: absolute;
    right: 0;
    z-index: 30;
    margin-top: 2px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 8px;
    min-width: 14rem;
    max-height: 320px;
    overflow: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ms-actions[b-fg2rh2as0g] {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #eee);
}

.ms-item[b-fg2rh2as0g] {
    display: block;
    font-size: 0.85rem;
    padding: 2px 0;
    cursor: pointer;
}

.ms-item input[b-fg2rh2as0g] {
    margin-right: 6px;
}

/* Campaign block vs the ordinary stretch between campaigns. Each campaign block carries a
   leading divider and alternates its tint so two adjacent campaigns stay distinct. */
.ovw-grid td.ovw-camp[b-fg2rh2as0g] {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-weight: 600;
    border-left: 2px solid rgba(37, 99, 235, 0.55);
}

.ovw-grid td.ovw-camp.ovw-camp-alt[b-fg2rh2as0g] {
    background: rgba(37, 99, 235, 0.24);
}

.ovw-grid td.ovw-ord[b-fg2rh2as0g] {
    color: var(--bs-secondary-color, #6b7280);
}

.ovw-grid td.ovw-clickable[b-fg2rh2as0g] {
    cursor: pointer;
}

.ovw-grid td.ovw-clickable:hover[b-fg2rh2as0g] {
    outline: 2px solid rgba(37, 99, 235, 0.8);
    outline-offset: -2px;
}

/* Flash the worksheet line jumped to from the overview, fading back to normal. */
tr.ws-hl > td[b-fg2rh2as0g] {
    animation: ws-flash-b-fg2rh2as0g 2.4s ease-out 1;
}

@keyframes ws-flash-b-fg2rh2as0g {
    0% { background-color: rgba(244, 63, 94, 0.40); }
    100% { background-color: transparent; }
}
/* /Components/Pages/Projections/Details.razor.rz.scp.css */
/* Worksheet grid — Trophyst campaign-table header style + vertical field separators. */
.projection-grid[b-kilr4bi1hg] {
    font-size: 12.6px;
    width: 100%;
}

.projection-grid th[b-kilr4bi1hg] {
    font-size: 10.1px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--text-secondary, #4b5563);
    white-space: normal;      /* multi-line headers */
    line-height: 1.15;
    padding: 0.3rem 0.4rem;
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color, #dbe1ea);
    border-right: 1px solid var(--border-color, #e5e9f0);
}

.projection-grid td[b-kilr4bi1hg] {
    padding: 0.25rem 0.35rem;
    vertical-align: middle;
    border-right: 1px solid var(--border-color, #e5e9f0);
}

.projection-grid th:last-child[b-kilr4bi1hg],
.projection-grid td:last-child[b-kilr4bi1hg] {
    border-right: 0;
}

.projection-grid thead[b-kilr4bi1hg] {
    position: sticky;
    top: 0;
    z-index: 5;
}

.projection-grid tbody tr:hover[b-kilr4bi1hg] {
    background-color: rgba(37, 99, 235, 0.05);
}

/* Compact inputs so the grid rows stay tight */
.projection-grid input.form-control-sm[b-kilr4bi1hg] {
    padding: 0.15rem 0.3rem;
    font-size: 11.9px;
}

/* No spinner buttons — arrow keys navigate the grid, typing edits the value */
.projection-grid input[type="number"][b-kilr4bi1hg]::-webkit-outer-spin-button,
.projection-grid input[type="number"][b-kilr4bi1hg]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.projection-grid input[type="number"][b-kilr4bi1hg] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Perspective group banner + customer-group tinting */
.projection-grid .grp-row th[b-kilr4bi1hg] {
    text-align: center;
    font-size: 9.8px;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid var(--border-color, #dbe1ea);
    vertical-align: middle;
}

.projection-grid .grp-blank[b-kilr4bi1hg] {
    background: transparent;
    border-right: 0;
}

.projection-grid .grp-our[b-kilr4bi1hg] {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}

.projection-grid .grp-customer[b-kilr4bi1hg] {
    background: rgba(217, 119, 6, 0.10);
    color: #b45309;
}

.projection-grid th.grp-customer-col[b-kilr4bi1hg] {
    background: rgba(217, 119, 6, 0.06);
}

.projection-grid td.grp-customer-col[b-kilr4bi1hg] {
    background: rgba(217, 119, 6, 0.03);
}

/* ── Overview tab: product rows × week columns, campaign blocks tinted ── */
.ovw-scroll[b-kilr4bi1hg] { overflow-x: auto; }

.ovw-grid[b-kilr4bi1hg] {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.8rem;
}

.ovw-grid th[b-kilr4bi1hg],
.ovw-grid td[b-kilr4bi1hg] {
    border-right: 1px solid var(--border-color, #e5e7eb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 3px 6px;
    text-align: center;
    white-space: nowrap;
}

.ovw-grid .ovw-wk[b-kilr4bi1hg] {
    min-width: 42px;
    font-weight: 600;
    color: var(--bs-secondary-color, #6b7280);
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.ovw-grid .ovw-month[b-kilr4bi1hg] {
    font-weight: 600;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6b7280);
    letter-spacing: 0.03em;
}

.ovw-grid .ovw-prod[b-kilr4bi1hg] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bs-body-bg, #fff);
    text-align: left;
    min-width: 170px;
    max-width: 220px;
    border-right: 2px solid var(--border-color, #d1d5db);
}

.ovw-grid thead .ovw-prod[b-kilr4bi1hg] {
    z-index: 3;
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.ovw-grid .ovw-prod-art[b-kilr4bi1hg] { font-weight: 600; }

.ovw-grid .ovw-prod-name[b-kilr4bi1hg] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}

.ovw-grid .ovw-prod-cust[b-kilr4bi1hg] {
    font-size: 0.74rem;
    font-weight: 600;
    color: #b45309;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 210px;
}

.ovw-grid td.ovw-camp[b-kilr4bi1hg] {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-weight: 600;
    border-left: 2px solid rgba(37, 99, 235, 0.55);
}

.ovw-grid td.ovw-camp.ovw-camp-alt[b-kilr4bi1hg] { background: rgba(37, 99, 235, 0.24); }

.ovw-grid td.ovw-ord[b-kilr4bi1hg] { color: var(--bs-secondary-color, #6b7280); }

/* Multi-select filter dropdown (native <details>; click-away handled globally in app.js). */
.ms-dd[b-kilr4bi1hg] { position: relative; }

.ms-dd > summary[b-kilr4bi1hg] {
    list-style: none;
    cursor: pointer;
    min-width: 10rem;
    white-space: nowrap;
}

.ms-dd > summary[b-kilr4bi1hg]::-webkit-details-marker { display: none; }

.ms-panel[b-kilr4bi1hg] {
    position: absolute;
    right: 0;
    z-index: 30;
    margin-top: 2px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 8px;
    min-width: 14rem;
    max-height: 320px;
    overflow: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ms-actions[b-kilr4bi1hg] {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #eee);
}

.ms-item[b-kilr4bi1hg] {
    display: block;
    font-size: 0.85rem;
    padding: 2px 0;
    cursor: pointer;
}

.ms-item input[b-kilr4bi1hg] { margin-right: 6px; }
/* /Components/Pages/Projections/Outcome.razor.rz.scp.css */
/* ── Agreement map: projection on top, agreements hanging under it (pure CSS org chart) ── */

.po-map[b-rsyabbt38e] {
    text-align: center;
}

.po-root[b-rsyabbt38e] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.po-node[b-rsyabbt38e] {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.6rem 1rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.po-node-projection[b-rsyabbt38e] {
    border-top: 4px solid var(--accent, #2563eb);
    align-items: center;
    text-align: center;
}

.po-stem[b-rsyabbt38e] {
    width: 2px;
    height: 1.5rem;
    background: var(--border-color, #dee2e6);
}

.po-branches[b-rsyabbt38e] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.po-branch[b-rsyabbt38e] {
    position: relative;
    padding-top: 1.5rem;
    margin-bottom: 1rem;
}

/* vertical stub up from each card */
.po-branch[b-rsyabbt38e]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 1.5rem;
    background: var(--border-color, #dee2e6);
}

/* horizontal rail across the row of cards */
.po-branch[b-rsyabbt38e]::after {
    content: "";
    position: absolute;
    top: 0;
    left: -0.5rem;
    right: -0.5rem;
    height: 2px;
    background: var(--border-color, #dee2e6);
}

.po-branch:first-child[b-rsyabbt38e]::after { left: 50%; }
.po-branch:last-child[b-rsyabbt38e]::after { right: 50%; }
.po-branch:only-child[b-rsyabbt38e]::after { display: none; }

a.po-node-agreement:hover[b-rsyabbt38e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
}

.po-node-agreement[b-rsyabbt38e] {
    border-left: 4px solid var(--accent, #2563eb);
    min-width: 200px;
    transition: transform .1s ease, box-shadow .1s ease;
}

.po-node-pending[b-rsyabbt38e] {
    opacity: .55;
    border-style: dashed;
}

.po-node-number[b-rsyabbt38e] {
    font-weight: 700;
    font-size: 11.9px;
}

.po-node-title[b-rsyabbt38e] {
    font-weight: 600;
}

.po-node-cust[b-rsyabbt38e] {
    font-size: 11.2px;
}

.po-node-meta[b-rsyabbt38e],
.po-node-committed[b-rsyabbt38e] {
    font-size: 10.1px;
    color: var(--text-muted, #6c757d);
}

.po-node-agreement .badge[b-rsyabbt38e] {
    align-self: flex-start;
}

/* Dense mode — kicks in automatically above ~12 agreements so a full-year projection
   with 70–80 boxes still reads as a tree. */
.po-dense[b-rsyabbt38e] {
    gap: 0 0.5rem;
}

.po-dense .po-branch[b-rsyabbt38e] {
    padding-top: 1rem;
    margin-bottom: 0.5rem;
}

.po-dense .po-branch[b-rsyabbt38e]::before {
    height: 1rem;
}

.po-dense .po-node-agreement[b-rsyabbt38e] {
    min-width: 140px;
    padding: 0.35rem 0.6rem;
    gap: 1px;
}

.po-dense .po-node-number[b-rsyabbt38e] {
    font-size: 10.5px;
}

.po-dense .po-node-cust[b-rsyabbt38e] {
    font-size: 10.1px;
}

.po-dense .po-node-committed[b-rsyabbt38e] {
    font-size: 9.1px;
}

.po-dense .po-node-agreement .badge[b-rsyabbt38e] {
    font-size: 7.7px !important;
}

@media (max-width: 768px) {
    .po-branches[b-rsyabbt38e] {
        flex-direction: column;
        align-items: center;
    }

    .po-branch[b-rsyabbt38e]::after {
        display: none;
    }
}
/* /Components/Pages/Promoters/PromoterPerformance.razor.rz.scp.css */
/* Multi-select filter dropdown (native <details>; click-away handled globally in app.js).
   Same behaviour as the projection filters — scoped CSS means each page carries its own copy. */
.ms-dd[b-n46rn14a01] {
    position: relative;
}

.ms-dd > summary[b-n46rn14a01] {
    list-style: none;
    cursor: pointer;
    min-width: 9rem;
    white-space: nowrap;
}

.ms-dd > summary[b-n46rn14a01]::-webkit-details-marker {
    display: none;
}

.ms-panel[b-n46rn14a01] {
    position: absolute;
    z-index: 30;
    margin-top: 2px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 8px;
    min-width: 14rem;
    max-height: 320px;
    overflow: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ms-actions[b-n46rn14a01] {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #eee);
}

.ms-item[b-n46rn14a01] {
    display: block;
    font-size: 0.85rem;
    padding: 2px 0;
    cursor: pointer;
}

.ms-item input[b-n46rn14a01] {
    margin-right: 6px;
}

/* A folded-out organisation sits under its customer: same columns, quieter ground, so the
   indent reads as "part of the row above" rather than as another customer. */
.sub-row > td[b-n46rn14a01] {
    background-color: color-mix(in srgb, var(--bs-secondary-bg, #e9ecef) 45%, transparent);
    font-size: 0.9375rem;
}
/* /Components/Pages/Promoters/PromoterSheetDetails.razor.rz.scp.css */
/*
    The grid's number fields drop their spinners.

    Two reasons, and the second is the real one. They are visual clutter in a dense grid, where
    every row carries three of them. And they are now a lie: the arrow keys move between cells —
    see gridNavigation — so the little arrows promise an increment that pressing the arrow keys no
    longer performs. An affordance that does the opposite of what it depicts is worse than none.

    Typing, pasting and the arrows on the field itself all still work; only the rendered buttons go.
*/
.promoter-grid input[type="number"][b-ai9ozsj0yv]::-webkit-outer-spin-button,
.promoter-grid input[type="number"][b-ai9ozsj0yv]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.promoter-grid input[type="number"][b-ai9ozsj0yv] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* /Components/Pages/Sales/ActionSignals.razor.rz.scp.css */
/* Multi-select filter dropdown (native <details>; click-away handled globally in app.js).
   Same behaviour as the projection filters — scoped CSS means each page carries its own copy. */
.ms-dd[b-cuvxeq9y7r] {
    position: relative;
}

.ms-dd > summary[b-cuvxeq9y7r] {
    list-style: none;
    cursor: pointer;
    min-width: 9rem;
    white-space: nowrap;
}

.ms-dd > summary[b-cuvxeq9y7r]::-webkit-details-marker {
    display: none;
}

.ms-panel[b-cuvxeq9y7r] {
    position: absolute;
    z-index: 30;
    margin-top: 2px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 8px;
    min-width: 14rem;
    max-height: 320px;
    overflow: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ms-actions[b-cuvxeq9y7r] {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #eee);
}

.ms-item[b-cuvxeq9y7r] {
    display: block;
    font-size: 0.85rem;
    padding: 2px 0;
    cursor: pointer;
}

.ms-item input[b-cuvxeq9y7r] {
    margin-right: 6px;
}

/* A folded-out organisation sits under its customer: same columns, quieter ground, so the
   indent reads as "part of the row above" rather than as another customer. */
.sub-row > td[b-cuvxeq9y7r] {
    background-color: color-mix(in srgb, var(--bs-secondary-bg, #e9ecef) 45%, transparent);
    font-size: 0.9375rem;
}
/* /Components/Pages/Sales/MarketReporting.razor.rz.scp.css */
/* Multi-select filter dropdown (native <details>; click-away handled globally in app.js).
   Same behaviour as the projection filters — scoped CSS means each page carries its own copy. */
.ms-dd[b-9b2tvx0c8t] {
    position: relative;
}

.ms-dd > summary[b-9b2tvx0c8t] {
    list-style: none;
    cursor: pointer;
    min-width: 9rem;
    white-space: nowrap;
}

.ms-dd > summary[b-9b2tvx0c8t]::-webkit-details-marker {
    display: none;
}

.ms-panel[b-9b2tvx0c8t] {
    position: absolute;
    z-index: 30;
    margin-top: 2px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 8px;
    min-width: 14rem;
    max-height: 320px;
    overflow: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ms-actions[b-9b2tvx0c8t] {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color, #eee);
}

.ms-item[b-9b2tvx0c8t] {
    display: block;
    font-size: 0.85rem;
    padding: 2px 0;
    cursor: pointer;
}

.ms-item input[b-9b2tvx0c8t] {
    margin-right: 6px;
}

/* A folded-out organisation sits under its customer: same columns, quieter ground, so the
   indent reads as "part of the row above" rather than as another customer. */
.sub-row > td[b-9b2tvx0c8t] {
    background-color: color-mix(in srgb, var(--bs-secondary-bg, #e9ecef) 45%, transparent);
    font-size: 0.9375rem;
}