@import '_content/Blazor.SignaturePad/Blazor.SignaturePad.g22u5lm4z9.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-rps9mhn0yj] {
    height: 100%;
    font-family: var(--bs-font-sans-serif);
}

.page.non-prod[b-rps9mhn0yj] {
    border: 3px solid #F59E0B;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

    .page.non-prod[b-rps9mhn0yj]  .page-layout {
        flex: 1 1 auto;
        min-height: 0;
    }

[b-rps9mhn0yj] .env-ribbon {
    height: 26px;
    background-color: #F59E0B;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.08) 0,
        rgba(0, 0, 0, 0.08) 10px,
        transparent 10px,
        transparent 20px
    );
    color: #1f1300;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: 0 0 auto;
    user-select: none;
}

    [b-rps9mhn0yj] .env-ribbon .env-ribbon-text {
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    }

[b-rps9mhn0yj] .icon {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-mask-position: center center;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}

[b-rps9mhn0yj] #menu-top {
    display: block;
}

    [b-rps9mhn0yj] #menu-top.hidden {
        display: none;
    }

[b-rps9mhn0yj] .icon-back {
    -webkit-mask-image: url("images/back.svg");
    mask-image: url("images/back.svg");
}

[b-rps9mhn0yj] .icon-menu {
    -webkit-mask-image: url("images/menu.svg");
    mask-image: url("images/menu.svg");
}
[b-rps9mhn0yj] .icon-log-in {
    -webkit-mask-image: url("images/account/log-in.svg");
    mask-image: url("images/account/log-in.svg");
}


[b-rps9mhn0yj] .icon-log-out {
    -webkit-mask-image: url("images/account/log-out.svg");
    mask-image: url("images/account/log-out.svg");
}

[b-rps9mhn0yj] .icon-user {
    -webkit-mask-image: url("images/account/user.svg");
    mask-image: url("images/account/user.svg");
}

[b-rps9mhn0yj] .content {
    overflow: auto;
    display: flex;
    flex-direction: column;
}

[b-rps9mhn0yj] .menu-button:hover .icon {
    background-color: var(--dxbl-btn-hover-color);
}

.nav-buttons-container[b-rps9mhn0yj] {
    display: flex;
    gap: 10px;
    padding: 0.5rem 0rem;
}

    .nav-buttons-container[b-rps9mhn0yj]  .menubutton-float-end {
        margin-left: auto;
    }

    .nav-buttons-container[b-rps9mhn0yj]  .dxbl-btn-icon-only {
        --dxbl-btn-padding-x: 0.75rem;
        --dxbl-btn-padding-y: 0.25rem;
    }

@media (max-width: 768px) {
    [b-rps9mhn0yj] .layout-sidebar {
        grid-area: header / header / header / header !important;
    }
}

@media (max-width: 768px) {
    [b-rps9mhn0yj] #menu-top {
        display: none;
    }
}

@media (max-width: 768px) {
    .page.non-prod[b-rps9mhn0yj] {
        border-width: 2px;
    }

    [b-rps9mhn0yj] .env-ribbon {
        height: 22px;
        font-size: 0.6875rem;
    }
}
/* /Components/Layout/NavigationSearch.razor.rz.scp.css */
.navigation-search-container[b-19o65y4l0p] {
    position: relative;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0.5rem;
}

.search-input-wrapper[b-19o65y4l0p] {
    position: relative;
    display: flex;
    align-items: center;
}

.navigation-search-input[b-19o65y4l0p] {
    width: 100%;
    padding: 0.375rem 2rem 0.375rem 2rem;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    font-size: 0.813rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.navigation-search-input:focus[b-19o65y4l0p] {
    border-color: #4a90e2;
    box-shadow: 0 0 0 0.15rem rgba(74, 144, 226, 0.25);
    outline: none;
}

.search-icon[b-19o65y4l0p] {
    position: absolute;
    left: 0.5rem;
    color: #6c757d;
    pointer-events: none;
    font-size: 0.875rem;
}

.search-results-dropdown[b-19o65y4l0p] {
    position: absolute;
    top: 100%;
    left: 0.75rem;
    right: auto;
    width: 450px;
    max-width: calc(100vw - 2rem);
    max-height: 350px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 0.125rem;
}

.search-result-item[b-19o65y4l0p] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "icon title"
        "icon description";
    gap: 0.25rem 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.search-result-item:last-child[b-19o65y4l0p] {
    border-bottom: none;
}

.search-result-item:hover[b-19o65y4l0p],
.search-result-item.selected[b-19o65y4l0p] {
    background-color: #f8f9fa;
}

.result-icon[b-19o65y4l0p] {
    grid-area: icon;
    align-self: start;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a90e2;
}

.result-icon i[b-19o65y4l0p] {
    font-size: 0.938rem;
}

.result-content[b-19o65y4l0p] {
    display: contents;
}

.result-title[b-19o65y4l0p] {
    grid-area: title;
    font-weight: 500;
    font-size: 0.813rem;
    color: #212529;
    line-height: 1.2;
    padding-right: 5.5rem;
}

.result-description[b-19o65y4l0p] {
    grid-area: description;
    font-size: 0.688rem;
    color: #6c757d;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.result-category[b-19o65y4l0p] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.result-category .badge[b-19o65y4l0p] {
    font-size: 0.625rem;
    font-weight: 400;
    padding: 0.125rem 0.375rem;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    .navigation-search-input[b-19o65y4l0p] {
        background-color: #2b2b2b;
        border-color: #444;
        color: #e0e0e0;
    }

    .search-results-dropdown[b-19o65y4l0p] {
        background: #2b2b2b;
        border-color: #444;
    }

    .search-result-item[b-19o65y4l0p] {
        border-bottom-color: #444;
    }

    .search-result-item:hover[b-19o65y4l0p],
    .search-result-item.selected[b-19o65y4l0p] {
        background-color: #3a3a3a;
    }

    .result-title[b-19o65y4l0p] {
        color: #e0e0e0;
    }

    .result-description[b-19o65y4l0p] {
        color: #a0a0a0;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
#sidebar[b-2x6qcur28t] {
    min-width: 15rem;
    max-width: 15rem;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);
    transition: transform 0.1s ease-out;
    height: 100%;
    max-height: 100%;
    background-color: black;
/*    background-image: linear-gradient(180deg, var(--bs-primary) 0%, var(--bs-black) 150%);*/
    display: block;
}

    #sidebar.auto-expanded[b-2x6qcur28t] {
        display: none;
    }

    #sidebar .menu-closeonclick-placeholder[b-2x6qcur28t] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

[b-2x6qcur28t] .sidebar-header {
    padding: 2rem 1rem;
}

.logo[b-2x6qcur28t] {
    text-align: center;
}

[b-2x6qcur28t] .menu-button-container {
    align-self: center;
}

.menu-button[b-2x6qcur28t] {
    padding: 0.375rem;
    width: 1rem;
    height: 1rem;
    background-image: url("images/menu.svg");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

[b-2x6qcur28t] .menu.display-mobile {
    margin-bottom: 2rem;
}

[b-2x6qcur28t] .menu {
    background-color: inherit;
}

    [b-2x6qcur28t] .menu .dxbl-menu-item-list {
        gap: 0.5rem;
    }

[b-2x6qcur28t] .menu-item {
    color: var(--bs-white);
}

[b-2x6qcur28t] .icon {
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
}

[b-2x6qcur28t] .home-icon {
    background-image: url("images/home.svg");
}

[b-2x6qcur28t] .weather-icon {
    background-image: url("images/weather.svg");
}

[b-2x6qcur28t] .counter-icon {
    background-image: url("images/counter.svg");
}

[b-2x6qcur28t] .settings-icon {
    background-image: url("images/account/settings.svg");
}

[b-2x6qcur28t] .log-in-icon {
    background-image: url("images/account/log-in.svg");
}

[b-2x6qcur28t] .log-out-icon {
    background-image: url("images/account/log-out.svg");
}

[b-2x6qcur28t] .user-icon {
    background-image: url("images/account/user.svg");
}

[b-2x6qcur28t] .docs-icon {
    mask-image: url("images/doc.svg");
    -webkit-mask-image: url("images/doc.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}

[b-2x6qcur28t] .demos-icon {
    mask-image: url("images/demos.svg");
    -webkit-mask-image: url("images/demos.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}

[b-2x6qcur28t] .footer-button:hover .demos-icon {
    background-color: var(--dxbl-btn-hover-color);
}

[b-2x6qcur28t] .footer-button:hover .docs-icon {
    background-color: var(--dxbl-btn-hover-color);
}

[b-2x6qcur28t] .footer {
    text-align: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

    [b-2x6qcur28t] .footer .icon {
        margin-left: 0;
    }

#sidebar.auto-expanded[b-2x6qcur28t]  .layout-item {
    display: block;
}

#sidebar.auto-expanded[b-2x6qcur28t]  .footer {
    display: block;
}

@media (max-width: 768px) {
    #sidebar[b-2x6qcur28t] {
        min-width: inherit;
        max-width: inherit;
        display: block;
    }

        #sidebar .menu-closeonclick-placeholder[b-2x6qcur28t] {
            display: block;
        }

        #sidebar.auto-expanded[b-2x6qcur28t] {
            position: fixed;
            width: 100%;
            z-index: 3;
            display: block;
        }

            #sidebar.auto-expanded[b-2x6qcur28t]  .sidebar-header {
                border-bottom: 1px solid var(--bs-white);
            }

            #sidebar.auto-expanded .menu-button[b-2x6qcur28t] {
                background-image: url("images/close.svg");
                width: 1.875rem;
                height: 1.875rem;
            }

        #sidebar:not(.auto-expanded)[b-2x6qcur28t]  .dxbl-gridlayout-root {
            gap: unset !important;
        }

    .logo[b-2x6qcur28t] {
        text-align: inherit;
    }

    [b-2x6qcur28t] .menu-button-container {
        display: block;
    }

    [b-2x6qcur28t] .layout-item {
        display: none;
    }

    [b-2x6qcur28t] .footer {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0cbue69bpz],
.components-reconnect-repeated-attempt-visible[b-0cbue69bpz],
.components-reconnect-failed-visible[b-0cbue69bpz],
.components-pause-visible[b-0cbue69bpz],
.components-resume-failed-visible[b-0cbue69bpz],
.components-rejoining-animation[b-0cbue69bpz] {
    display: none;
}

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


#components-reconnect-modal[b-0cbue69bpz] {
    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-0cbue69bpz 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-0cbue69bpz {
    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/Pages/AccessDeniedLanding.razor.rz.scp.css */
[b-fy4o019pps] .welcome-gridlayout {
    margin: auto;
    width: auto;
    height: auto;
}

[b-fy4o019pps] .welcome-gridlayout .dxbl-gridlayout-root {
    align-content: center;
    justify-content: center;
}

[b-fy4o019pps] .title {
    text-align: center;
}

[b-fy4o019pps] .welcome-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

[b-fy4o019pps] .welcome-card {
    width: 25rem;
    height: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    border-radius: 1rem;
    color: var(--bs-link-color-rgb);
    gap: 1rem;
    text-decoration: none;
    position: relative;
}

    [b-fy4o019pps] .welcome-card:hover {
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    }

    [b-fy4o019pps] .welcome-card .welcome-card-img {
        width: 6.5rem;
        height: 6.5rem;
    }

    [b-fy4o019pps] .welcome-card .welcome-card-text {
        font-size: 1.2rem;
        font-weight: 600;
        letter-spacing: 0em;
        text-align: center;
        text-decoration: unset;
    }

    [b-fy4o019pps] .icon-fill {
        fill: var(--bs-primary);
    }


    [b-fy4o019pps] .welcome-card .welcome-card-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bs-body-color);
        opacity: 0.05;
        border-radius: 1rem;
        z-index: -2;
    }
/* /Components/Pages/Admin/DocList.razor.rz.scp.css */
.doc-workspace[b-t1u0vxmico] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 175px);
    min-height: 560px;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    background: #fff;
    overflow: hidden;
}

.doc-header[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.doc-header-title[b-t1u0vxmico] {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 300;
}

.doc-header-tools[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doc-header-tools[b-t1u0vxmico]  .doc-search {
    width: 300px;
}

.doc-body[b-t1u0vxmico] {
    display: flex;
    flex-grow: 1;
    min-height: 0;
}

/* ---- list ---- */
.doc-list[b-t1u0vxmico] {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid #dee2e6;
}

.doc-chips[b-t1u0vxmico] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
}

.doc-chip[b-t1u0vxmico] {
    height: 30px;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid #ced4da;
    background: #fff;
    color: #212529;
    font-size: 0.8125rem;
    cursor: pointer;
}

.doc-chip.active[b-t1u0vxmico] {
    background: #212529;
    border-color: #212529;
    color: #fff;
}

.doc-rows[b-t1u0vxmico] {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
}

.doc-row[b-t1u0vxmico] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem 0.75rem calc(1rem + 3px);
    border-bottom: 1px solid #dee2e6;
    cursor: pointer;
}

.doc-row:hover[b-t1u0vxmico] {
    background: #f8f9fa;
}

.doc-row.selected[b-t1u0vxmico] {
    background: #f0f6ff;
    border-left: 3px solid #0d6efd;
    padding-left: 1rem;
}

.doc-row-title[b-t1u0vxmico] {
    font-size: 0.9375rem;
}

.doc-row.selected .doc-row-title[b-t1u0vxmico] {
    font-weight: 600;
}

.doc-row-meta[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #6c757d;
}

.doc-row-meta code[b-t1u0vxmico] {
    font-size: 0.75rem;
    color: #495057;
}

.doc-pill[b-t1u0vxmico] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: #cfe2ff;
    color: #052c65;
    white-space: nowrap;
}

.doc-list-footer[b-t1u0vxmico] {
    padding: 0.5rem 1rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    font-size: 0.75rem;
    color: #6c757d;
}

.doc-empty[b-t1u0vxmico] {
    padding: 2rem 1rem;
    color: #6c757d;
    text-align: center;
}

.doc-empty-editor[b-t1u0vxmico] {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- editor ---- */
.doc-editor[b-t1u0vxmico] {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.doc-editor-header[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

.doc-editor-heading[b-t1u0vxmico] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.doc-editor-title[b-t1u0vxmico] {
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-editor-meta[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: #6c757d;
}

.doc-editor-meta code[b-t1u0vxmico] {
    font-size: 0.8125rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 1px 6px;
    color: #212529;
}

.doc-editor-actions[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ---- details strip ---- */
.doc-details[b-t1u0vxmico] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.doc-details-grid[b-t1u0vxmico] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.doc-field-wide[b-t1u0vxmico] {
    grid-column: span 2;
    gap: 1rem;
}

.doc-pill-public[b-t1u0vxmico] {
    background: #d1e7dd;
    color: #0a3622;
}

.doc-pill-private[b-t1u0vxmico] {
    background: #e9ecef;
    color: #495057;
}

.doc-editor-link[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin-top: 2px;
}

.doc-link-btn[b-t1u0vxmico] {
    height: 24px;
    padding: 0 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.75rem;
    color: #212529;
    cursor: pointer;
}

.doc-vis[b-t1u0vxmico] {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
    height: 32px;
}

.doc-vis-btn[b-t1u0vxmico] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.875rem;
    border: 0;
    background: #fff;
    color: #212529;
    font-size: 0.875rem;
    cursor: pointer;
}

.doc-vis-btn + .doc-vis-btn[b-t1u0vxmico] {
    border-left: 1px solid #ced4da;
}

.doc-vis-btn.active[b-t1u0vxmico] {
    background: #212529;
    color: #fff;
}

.doc-type-card-add[b-t1u0vxmico] {
    border-style: dashed;
    color: #6c757d;
    font-weight: 400;
}

.doc-details-foot[b-t1u0vxmico] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.doc-details-meta[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: #6c757d;
    white-space: nowrap;
}

.doc-warn[b-t1u0vxmico] {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    background: #fff3cd;
    color: #664d03;
    font-size: 0.8125rem;
    line-height: 1.4;
    max-width: 560px;
}

/* ---- fields ---- */
.doc-field[b-t1u0vxmico] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.doc-field label[b-t1u0vxmico] {
    font-size: 0.875rem;
    font-weight: 600;
}

.doc-field-head[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.doc-field-head a[b-t1u0vxmico] {
    font-size: 0.8125rem;
}

.doc-field[b-t1u0vxmico]  .doc-key-input input {
    font-family: Menlo, Consolas, monospace;
}

.doc-hint[b-t1u0vxmico] {
    font-size: 0.8125rem;
    color: #6c757d;
}

.doc-hint-ok[b-t1u0vxmico] {
    color: #198754;
}

.doc-hint-bad[b-t1u0vxmico] {
    color: #dc3545;
}

/* ---- new document ---- */
.doc-new-wrap[b-t1u0vxmico] {
    display: flex;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: #f8f9fa;
    flex-grow: 1;
    overflow-y: auto;
}

.doc-new-card[b-t1u0vxmico] {
    width: 640px;
    max-width: 100%;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1.5rem;
}

.doc-type-cards[b-t1u0vxmico] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.doc-type-card[b-t1u0vxmico] {
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.doc-type-card.active[b-t1u0vxmico] {
    border: 2px solid #0d6efd;
    background: #f0f6ff;
    color: #052c65;
    padding: calc(0.75rem - 1px);
}

.doc-new-note[b-t1u0vxmico] {
    font-size: 0.8125rem;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

/* ---- mode bar + panes ---- */
.doc-modebar[b-t1u0vxmico] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.doc-modes[b-t1u0vxmico] {
    display: flex;
    gap: 0.25rem;
}

.doc-mode[b-t1u0vxmico] {
    height: 30px;
    padding: 0 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.875rem;
    color: #212529;
    cursor: pointer;
}

.doc-mode.active[b-t1u0vxmico] {
    background: #fff;
    border-color: #ced4da;
}

.doc-modebar-status[b-t1u0vxmico] {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #6c757d;
}

.doc-unsaved[b-t1u0vxmico] {
    color: #fd7e14;
}

.doc-panes[b-t1u0vxmico] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex-grow: 1;
    min-height: 0;
}

.doc-panes.split[b-t1u0vxmico] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.doc-pane[b-t1u0vxmico] {
    min-height: 0;
    overflow-y: auto;
}

.doc-pane-source[b-t1u0vxmico] {
    display: flex;
    border-right: 1px solid #dee2e6;
}

.doc-pane-source[b-t1u0vxmico]  .doc-memo {
    flex-grow: 1;
    height: 100%;
    border: 0;
    border-radius: 0;
}

.doc-pane-source[b-t1u0vxmico]  .doc-memo textarea {
    height: 100% !important;
    font-family: Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    padding: 1rem 1.25rem;
}

.doc-pane-preview[b-t1u0vxmico] {
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ---- tokens (templates only) ---- */
.doc-tokens[b-t1u0vxmico] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 1.5rem;
    border-top: 1px solid #dee2e6;
    background: #f8f9fa;
    max-height: 140px;
    overflow-y: auto;
}

.doc-token-row[b-t1u0vxmico] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
/* /Components/Pages/Index.razor.rz.scp.css */
[b-bfq5g7wc8z] .welcome-gridlayout {
    margin: auto;
    width: auto;
    height: auto;
}

[b-bfq5g7wc8z] .welcome-gridlayout .dxbl-gridlayout-root {
    align-content: center;
    justify-content: center;
}

[b-bfq5g7wc8z] .title {
    text-align: center;
}

[b-bfq5g7wc8z] .welcome-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

[b-bfq5g7wc8z] .welcome-card {
    width: 20rem;
    height: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    border-radius: 1rem;
    color: var(--bs-link-color-rgb);
    gap: 1rem;
    text-decoration: none;
    position: relative;
}

    [b-bfq5g7wc8z] .welcome-card:hover {
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    }

    [b-bfq5g7wc8z] .welcome-card .welcome-card-img {
        width: 6.5rem;
        height: 6.5rem;
    }

    [b-bfq5g7wc8z] .welcome-card .welcome-card-text {
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: 0em;
        text-align: center;
        text-decoration: unset;
    }

    [b-bfq5g7wc8z] .icon-fill {
        fill: var(--bs-primary);
    }


    [b-bfq5g7wc8z] .welcome-card .welcome-card-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bs-body-color);
        opacity: 0.05;
        border-radius: 1rem;
        z-index: -2;
    }
/* /Components/Pages/Lookup/LookupToolType.razor.rz.scp.css */
/* Tool Types lookup: the Auto-add grid chips and the edit form's Auto-add rows.
   Tokens are declared per block - the repo has no app-wide --cf-* system, and the popup edit
   form renders outside the page's DOM, so nothing may rely on an ancestor. The rows mirror
   ToolSetAddTools' tsat-type-row (tick, name, quantity). The DevExpress checkbox root carries no
   scope attribute of this component, hence ::deep under an authored element. */

/* ---------- grid cell ---------- */
.ltt-chips[b-18u4gvtt1z] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}

.ltt-chip[b-18u4gvtt1z] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid #CED4DA;
    border-radius: 999px;
    background: #FFFFFF;
    color: #212529;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ltt-chip-qty[b-18u4gvtt1z] {
    color: #6C757D;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ltt-none[b-18u4gvtt1z] {
    color: #6C757D;
}

/* Nest under: the rule as a chip. The set calc tool is grey, a named type is blue. */
.ltt-nest[b-18u4gvtt1z] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid #B6D4FE;
    border-radius: 999px;
    background: #E7F1FF;
    color: #084298;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ltt-nest-calc[b-18u4gvtt1z] {
    border-color: #D3D6D8;
    background: #E2E3E5;
    color: #41464B;
}

/* ---------- edit form: two columns ---------- */
.ltt-form[b-18u4gvtt1z]  .ltt-form-col {
    align-self: flex-start;
}

.ltt-actions[b-18u4gvtt1z] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

/* ---------- edit form: Auto-add panel ---------- */
.ltt-auto[b-18u4gvtt1z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 4px 0 0 8px;
}

.ltt-auto-title[b-18u4gvtt1z] {
    font-size: 15px;
    font-weight: 600;
    color: #212529;
}

.ltt-auto-lead[b-18u4gvtt1z],
.ltt-auto-empty[b-18u4gvtt1z] {
    color: #6C757D;
    font-size: 12px;
    line-height: 1.45;
}

.ltt-auto-note[b-18u4gvtt1z] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6C757D;
    font-size: 12px;
}

/* Two columns of rows in the popup's right half, one when it is narrower. */
.ltt-auto-rows[b-18u4gvtt1z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    max-height: 320px;
    overflow: auto;
    border: 1px solid #DEE2E6;
    border-radius: 6px;
}

/* Tick + name on the left, stepper on the right, never wrapping: the name truncates instead.
   A problem line takes a full row underneath. */
.ltt-auto-row[b-18u4gvtt1z] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    min-height: 44px;
    padding: 4px 10px;
    border-bottom: 1px solid #DEE2E6;
    box-sizing: border-box;
}

.ltt-auto-row-on[b-18u4gvtt1z] {
    background: #F8F9FA;
}

.ltt-auto-row[b-18u4gvtt1z]  .ltt-auto-check {
    min-width: 0;
    overflow: hidden;
}

.ltt-auto-name[b-18u4gvtt1z] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.ltt-auto-problem[b-18u4gvtt1z] {
    grid-column: 1 / -1;
    color: #B02A37;
    font-size: 12px;
}

/* ---------- quantity stepper ---------- */
.ltt-step[b-18u4gvtt1z] {
    display: inline-flex;
    align-items: center;
    grid-column: 2;
    justify-self: end;
    height: 30px;
    border: 1px solid #CED4DA;
    border-radius: 4px;
    background: #FFFFFF;
}

.ltt-step-btn[b-18u4gvtt1z] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #212529;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.ltt-step-btn:hover:not(:disabled)[b-18u4gvtt1z] {
    background: rgba(0, 0, 0, 0.05);
}

.ltt-step-btn:disabled[b-18u4gvtt1z] {
    color: #CED4DA;
    cursor: default;
}

.ltt-step-btn:focus-visible[b-18u4gvtt1z] {
    outline: 2px solid #0D6EFD;
    outline-offset: -2px;
}

.ltt-step-val[b-18u4gvtt1z] {
    min-width: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Product/PreferredToolSearch.razor.rz.scp.css */
/* Preferred Quote Tool picker.

   Two kinds of rule live here. Elements this component writes - the search row, the footer, and
   everything inside the cell templates - carry the scope attribute, so they need plain selectors.
   The table, header and rows belong to DevExpress, so those rules need ::deep, hung off the .pts
   wrapper. Same split as ProductDependenciesV2.razor.css.

   The ::deep selectors anchor on the public dxbl-grid class and then use plain element names.
   Internal class names below that are not safe across upgrades. */

/* The popup sets the width - see the DxDropDown in Product.razor. */
.pts[b-993qqt4t8u] {
    width: 100%;
    background: #FFFFFF;
    color: #212529;
}

/* ---------- search row ---------- */
.pts-search-row[b-993qqt4t8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #DEE2E6;
}

.pts-search[b-993qqt4t8u] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.pts-search-icon[b-993qqt4t8u] {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: #6C757D;
    font-size: 13px;
    pointer-events: none;
}

.pts-search-input[b-993qqt4t8u] {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 28px;
    font-size: 13px;
    color: #212529;
    background: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-radius: 4px;
    outline: none;
}

.pts-search-input:focus[b-993qqt4t8u] {
    border-color: #86B7FE;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .18);
}

.pts-search-input[b-993qqt4t8u]::placeholder {
    color: #6C757D;
}

.pts-count[b-993qqt4t8u] {
    flex: 0 0 auto;
    font-size: 12px;
    color: #6C757D;
    white-space: nowrap;
}

/* ---------- grid shell ---------- */
/* The height is set inline from the row count, so the list scrolls instead of growing the popup. */
.pts-grid-wrap[b-993qqt4t8u] {
    overflow: hidden;
}

/* ---------- footer ---------- */
.pts-footer[b-993qqt4t8u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    background: #F8F9FA;
    border-top: 1px solid #DEE2E6;
    font-size: 12px;
    color: #6C757D;
}

.pts-clear[b-993qqt4t8u] {
    color: #0D6EFD;
    text-decoration: none;
}

.pts-clear:hover[b-993qqt4t8u] {
    text-decoration: underline;
}

/* ---------- cell content ---------- */
.pts-radio[b-993qqt4t8u] {
    font-size: 16px;
    line-height: 1;
    color: #ADB5BD;
}

.pts-radio-on[b-993qqt4t8u] {
    color: #0D6EFD;
}

.pts-radio-off[b-993qqt4t8u] {
    color: #DEE2E6;
}

.pts-set[b-993qqt4t8u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.pts-set-name[b-993qqt4t8u] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pts-direct[b-993qqt4t8u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6C757D;
}

/* The pinned "product default" row's chip. Blue rather than a status colour: it says where the
   choice comes from, not what state a tool set is in. */
.pts-default-chip[b-993qqt4t8u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #CFE2FF;
    color: #084298;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

/* Same shape as ProductDependenciesV2's version pill and status badge, one size down. */
.pts-version-pill[b-993qqt4t8u] {
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    border: 1px solid #DEE2E6;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

/* Colours come from ProductDependencyRowKinds.StatusBadgeColours as an inline style. */
.pts-badge[b-993qqt4t8u] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

/* ---------- the DOM the grid owns ---------- */
.pts[b-993qqt4t8u]  .dxbl-grid {
    width: 100%;
    height: 100%;
    border-width: 0;
}

.pts[b-993qqt4t8u]  .dxbl-grid table > thead > tr > th {
    height: 28px;
    padding: 0 8px;
    background: #F8F9FA;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #DEE2E6;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #495057;
}

.pts[b-993qqt4t8u]  .dxbl-grid table > tbody > tr > td {
    height: 40px;
    padding: 0 8px;
    font-size: 13px;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #DEE2E6;
}

.pts[b-993qqt4t8u]  .dxbl-grid table > tbody > tr {
    cursor: pointer;
}

.pts[b-993qqt4t8u]  .dxbl-grid table > tbody > tr:hover > td {
    background-color: #F8F9FA;
}

/* CustomizeElement writes these onto the theme's own tr and td. Two classes deep so the rule
   outranks the theme's own row rules without !important. */
.pts[b-993qqt4t8u]  .dxbl-grid tr.pts-row-sel > td,
.pts[b-993qqt4t8u]  .dxbl-grid tr.pts-row-sel:hover > td {
    background-color: #E7F1FF;
}

.pts[b-993qqt4t8u]  .dxbl-grid td.pts-code-sel {
    font-weight: 600;
}

/* The pinned row sits apart from the list: a band, and a heavier rule under it. Listed before
   pts-row-sel would win, so the selected tint still shows through when the default is in force. */
.pts[b-993qqt4t8u]  .dxbl-grid tr.pts-row-default > td {
    background-color: #F8F9FA;
    border-bottom: 2px solid #DEE2E6;
}

.pts[b-993qqt4t8u]  .dxbl-grid tr.pts-row-default.pts-row-sel > td,
.pts[b-993qqt4t8u]  .dxbl-grid tr.pts-row-default.pts-row-sel:hover > td {
    background-color: #E7F1FF;
}

.pts[b-993qqt4t8u]  .dxbl-grid tr.pts-row-blocked {
    opacity: .55;
    cursor: not-allowed;
}

.pts[b-993qqt4t8u]  .dxbl-grid tr.pts-row-blocked:hover > td {
    background-color: transparent;
}
/* /Components/Pages/Product/ProductDependenciesV2.razor.rz.scp.css */
/* Product Dependencies v2 (Tool Set-centric tree).

   v1's rules live in unscoped <style> blocks inside ProductDependencies.razor, so they only
   reach the DOM when v1 renders. Under the Classic / Tool Sets toggle v1 may never render, so
   v2 carries its own scoped sheet and repeats what it needs. Every class is prefixed pdv2- so
   the two sheets can diverge.

   Rows the CustomizeElement handler styles belong to DevExpress, hence ::deep.
   Tokens are declared locally - the repo has no app-wide --cf-* system. */
.pdv2[b-euflv4obba] {
    --pdv2-text: #212529;
    --pdv2-muted: #6C757D;
    --pdv2-border: #DEE2E6;
    --pdv2-surface: #FFFFFF;
    --pdv2-surface-alt: #F8F9FA;
    --pdv2-link: #0D6EFD;
    --pdv2-link-hover: #0B5ED7;
    --pdv2-success: #198754;
    --pdv2-preferred: #E3F3E9;
    color: var(--pdv2-text);
}

/* ---------- links ---------- */
.pdv2-link[b-euflv4obba] {
    color: var(--pdv2-link);
    text-decoration: none;
}

.pdv2-link:hover[b-euflv4obba] {
    color: var(--pdv2-link-hover);
    text-decoration: underline;
}

/* ---------- description cell ---------- */
/* The name never truncates; the caption underneath gives up width first. min-width:0 is
   required or a flex item will not shrink below its content and never ellipses. */
.pdv2-cell[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pdv2-cell-top[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.pdv2-set-name[b-euflv4obba] {
    font-weight: 600;
}

.pdv2-caption[b-euflv4obba] {
    font-size: 12px;
    color: var(--pdv2-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pdv2-muted[b-euflv4obba] {
    color: var(--pdv2-muted);
}

.pdv2-italic[b-euflv4obba] {
    font-style: italic;
}

/* ---------- version pill / status badge ---------- */
.pdv2-version-pill[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid var(--pdv2-border);
    border-radius: 999px;
    background: var(--pdv2-surface);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Colours come from ProductDependencyRowKinds.StatusBadgeColours as an inline style: they are
   data (per status), not layout. */
.pdv2-badge[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* ---------- issue pills (Valid column) ---------- */
.pdv2-pills[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pdv2-pill[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease;
}

.pdv2-pill-err[b-euflv4obba] {
    background: #FBECEC;
    border: 1px solid #F1C2C7;
    color: #B02A37;
}

.pdv2-pill-warn[b-euflv4obba] {
    background: #FEF3DD;
    border: 1px solid #F5DFA8;
    color: #8A6100;
}

.pdv2-pill-info[b-euflv4obba] {
    background: #E7F1FF;
    border: 1px solid #C5DBFB;
    color: #0A58CA;
}

/* Preferred quote tool of a nested product, not of the product on this page. A different glyph
   to the asterisk so the two never read as the same claim. */
.pdv2-pref-alt[b-euflv4obba] {
    color: var(--pdv2-success);
    font-size: .9em;
}

.pdv2-icon-lg[b-euflv4obba] {
    font-size: 1.25rem;
}

/* ---------- New Version / Move to Tool Set dialogs ---------- */
.pdv2-dialog-grid[b-euflv4obba] {
    display: grid;
    grid-template-columns: 1fr 110px 150px;
    gap: 12px;
    align-items: end;
}

.pdv2-field-label[b-euflv4obba] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pdv2-muted);
    margin-bottom: 2px;
}

.pdv2-section[b-euflv4obba] {
    margin-top: 14px;
}

.pdv2-section-head[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.pdv2-preview[b-euflv4obba] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 16px;
    background: var(--pdv2-surface-alt);
    border: 1px solid var(--pdv2-border);
    border-radius: 4px;
    padding: 10px 12px;
}

.pdv2-preview-label[b-euflv4obba] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pdv2-muted);
}

.pdv2-preview-value[b-euflv4obba] {
    font-size: 14px;
}

.pdv2-info-strip[b-euflv4obba] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 12px;
    background: var(--pdv2-surface-alt);
    border: 1px solid var(--pdv2-border);
    border-radius: 4px;
    color: var(--pdv2-muted);
    font-size: 12.5px;
}

.pdv2-tool-list[b-euflv4obba] {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--pdv2-border);
    border-radius: 4px;
}

.pdv2-tool-row[b-euflv4obba] {
    display: grid;
    grid-template-columns: 26px 1fr 1fr 100px 140px;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--pdv2-border);
    font-size: 13px;
}

.pdv2-tool-row:last-child[b-euflv4obba] {
    border-bottom: 0;
}

.pdv2-footer[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 4px 2px;
    background: var(--pdv2-surface-alt);
}

/* ---------- Add Tools to Set popup ---------- */
/* ToolSetAddTools grows into the height it is given, and its picker grid needs a definite one
   for virtual scrolling. The window itself is Height="auto", so this wrapper sets the height. */
.pdv2-addtools[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    height: min(70vh, 620px);
    width: 100%;
}

/* ---------- Tool Set documents window ---------- */
/* Same contract: ToolSetDocuments fills the height this wrapper sets, and its PDF preview
   iframe needs a definite one. */
.pdv2-docwin[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    height: min(80vh, 720px);
    width: 100%;
}

/* ---------- rows owned by DevExpress ---------- */
/* CustomizeElement writes these onto the theme's own <tr>, which carries no scope attribute. */
.pdv2[b-euflv4obba]  .pdv2-preferred-row {
    background-color: var(--pdv2-preferred);
}

.pdv2[b-euflv4obba]  .pdv2-inactive-set-row {
    background-color: #F8F9FA;
    color: #6C757D;
}

/* Reached through a disabled link. Same muting as the Tools tab's struck-through rows. */
.pdv2[b-euflv4obba]  .pdv2-disabled-row {
    color: #6C757D;
}

.pdv2[b-euflv4obba]  .pdv2-disabled-row a.pdv2-link {
    color: #6C757D;
    text-decoration: line-through;
}

.pdv2-disabled-pill[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border: 1px solid #ADB5BD;
    border-radius: 999px;
    color: #6C757D;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    cursor: help;
}

.pdv2[b-euflv4obba]  .pdv2-group-row {
    background-color: #F8F9FA;
    color: #6C757D;
}

/* "Insert PP × 4": a heading over its tools, not a muted read-only row. */
.pdv2[b-euflv4obba]  .pdv2-typegroup-row {
    background-color: #F8F9FA;
}

.pdv2-typegroup-name[b-euflv4obba] {
    font-weight: 600;
}

/* Same colour as the calc marker on the Tool Set page (.tsm-node-calc). */
.pdv2-calc[b-euflv4obba] {
    color: #FFC107;
}

/* Child chip on a parent tool row: "3 × Insert CPP". Shows open or collapsed. */
.pdv2-kids[b-euflv4obba] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 7px;
    border: 1px solid #DEE2E6;
    border-radius: 10px;
    background: #F1F3F5;
    color: #495057;
    font-size: 10.5px;
    line-height: 1.6;
    white-space: nowrap;
}


/* ---------- Add Tools dialog: mode switch ---------- */
/* The DxWindow body is not inside .pdv2, so these blocks carry their own tokens. */
.pdv2-at-modes[b-euflv4obba] {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
}

.pdv2-at-modes[b-euflv4obba]  .btn,
.pdv2-at-modes[b-euflv4obba]  .dxbl-btn {
    white-space: nowrap;
}

.pdv2-at-hint[b-euflv4obba] {
    font-size: 12px;
    color: #6C757D;
}

/* ---------- Add Tools dialog: New Tool Set ---------- */
/* Two columns: the form (calc tool, tools, details) and a live "Will create" preview, then a
   footer. Matches the approved canvas design (CastFlo design system tokens). */
.pdv2-nts[b-euflv4obba] {
    --nts-text: #212529;
    --nts-muted: #6C757D;
    --nts-border: #DEE2E6;
    --nts-border-input: #CED4DA;
    --nts-surface: #FFFFFF;
    --nts-surface-alt: #F8F9FA;
    --nts-primary: #0D6EFD;
    --nts-success: #198754;
    --nts-danger: #B02A37;
    --nts-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    /* Fills the window (see the DxWindow's Height); the body takes the spare height. */
    flex: 1 1 auto;
    min-height: 0;
    color: var(--nts-text);
    border-top: 1px solid var(--nts-border);
}

/* Grows with the window. The form column and the preview scroll on their own; the footer
   below never moves. */
.pdv2-nts-body[b-euflv4obba] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.pdv2-nts-main[b-euflv4obba] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.pdv2-nts-empty[b-euflv4obba] {
    padding: 24px 0;
    color: var(--nts-muted);
    line-height: 1.5;
}

/* ---------- sections ---------- */
.pdv2-nts-section[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdv2-nts-head[b-euflv4obba] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.pdv2-nts-num[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--nts-text);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
}

.pdv2-nts-title[b-euflv4obba] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.pdv2-nts-sub[b-euflv4obba],
.pdv2-nts-hint[b-euflv4obba] {
    font-size: 12px;
    line-height: 1.4;
    color: var(--nts-muted);
}

.pdv2-nts-hint-bad[b-euflv4obba] {
    color: var(--nts-danger);
}

/* ---------- 1. calc tool cards ---------- */
.pdv2-nts-cards[b-euflv4obba] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.pdv2-nts-card[b-euflv4obba] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 72px;
    padding: 14px 16px;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--nts-surface);
    border: 1px solid var(--nts-border-input);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.pdv2-nts-card:hover[b-euflv4obba] {
    border-color: var(--nts-primary);
}

.pdv2-nts-card:focus-visible[b-euflv4obba] {
    outline: 2px solid var(--nts-primary);
    outline-offset: 2px;
}

/* A 2px edge without moving the content: 1px border + 1px inset ring. */
.pdv2-nts-card-on[b-euflv4obba] {
    border-color: var(--nts-primary);
    box-shadow: inset 0 0 0 1px var(--nts-primary), var(--nts-shadow-card);
}

.pdv2-nts-radio[b-euflv4obba] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1px solid var(--nts-muted);
    border-radius: 999px;
    box-sizing: border-box;
}

.pdv2-nts-card-on .pdv2-nts-radio[b-euflv4obba] {
    border: 5px solid var(--nts-primary);
}

.pdv2-nts-card-text[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pdv2-nts-card-name[b-euflv4obba] {
    font-size: 15px;
    font-weight: 600;
}

.pdv2-nts-card-sub[b-euflv4obba] {
    font-size: 12px;
    line-height: 1.4;
    color: var(--nts-muted);
}

/* ---------- 2. tools in the set ---------- */
.pdv2-nts-tools[b-euflv4obba] {
    border: 1px solid var(--nts-border);
    border-radius: 6px;
    overflow: hidden;
}

.pdv2-nts-band[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--nts-surface-alt);
    border-bottom: 1px solid var(--nts-border);
    font-size: 12px;
    color: var(--nts-muted);
}

.pdv2-nts-band-title[b-euflv4obba] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.pdv2-nts-none[b-euflv4obba] {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--nts-muted);
    border-bottom: 1px solid var(--nts-border);
}

.pdv2-nts-none:last-child[b-euflv4obba] {
    border-bottom: 0;
}

.pdv2-nts-rows[b-euflv4obba] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The last block's bottom rule would double the box edge. */
.pdv2-nts-rows:last-child[b-euflv4obba] {
    margin-bottom: -1px;
}

.pdv2-nts-row[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    border-bottom: 1px solid var(--nts-border);
    transition: background-color 120ms ease;
}

.pdv2-nts-row:hover[b-euflv4obba] {
    background: var(--nts-surface-alt);
}

.pdv2-nts-row[b-euflv4obba]  .pdv2-nts-check {
    flex: 1 1 auto;
    min-width: 0;
}

.pdv2-nts-row-name[b-euflv4obba] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdv2-nts-auto[b-euflv4obba] {
    margin-left: 8px;
    padding: 0 7px;
    border: 1px solid var(--nts-primary);
    border-radius: 999px;
    color: var(--nts-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.pdv2-nts-skipped[b-euflv4obba] {
    font-size: 12px;
    color: var(--nts-muted);
}

/* ---------- quantity stepper ---------- */
.pdv2-nts-step[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 32px;
    border: 1px solid var(--nts-border-input);
    border-radius: 4px;
    background: var(--nts-surface);
}

.pdv2-nts-step-btn[b-euflv4obba] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--nts-text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.pdv2-nts-step-btn:hover:not(:disabled)[b-euflv4obba] {
    background: rgba(0, 0, 0, 0.05);
}

.pdv2-nts-step-btn:disabled[b-euflv4obba] {
    color: var(--nts-border-input);
    cursor: default;
}

.pdv2-nts-step-btn:focus-visible[b-euflv4obba] {
    outline: 2px solid var(--nts-primary);
    outline-offset: -2px;
}

.pdv2-nts-step-val[b-euflv4obba] {
    min-width: 24px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- 3. set details ---------- */
.pdv2-nts-fields[b-euflv4obba] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 24px;
}

.pdv2-nts-field[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pdv2-nts-span2[b-euflv4obba] {
    grid-column: span 2;
}

.pdv2-nts-field-end[b-euflv4obba] {
    justify-content: flex-end;
}

.pdv2-nts-label[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--nts-muted);
}

.pdv2-nts-req[b-euflv4obba] {
    color: #DC3545;
}

.pdv2-nts-calc-tag[b-euflv4obba] {
    padding: 0 6px;
    border: 1px solid var(--nts-success);
    border-radius: 999px;
    color: var(--nts-success);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.pdv2-nts-disclose[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--nts-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.pdv2-nts-disclose:hover[b-euflv4obba] {
    background: rgba(0, 0, 0, 0.05);
}

.pdv2-nts-disclose:focus-visible[b-euflv4obba] {
    outline: 2px solid var(--nts-primary);
    outline-offset: -2px;
}

/* Optional production rates + fettling: one bordered panel, two grid rows. */
.pdv2-nts-rates[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--nts-border);
    border-radius: 6px;
}

.pdv2-nts-rates-row[b-euflv4obba] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pdv2-nts-fettling[b-euflv4obba] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* ---------- preview ---------- */
.pdv2-nts-aside[b-euflv4obba] {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    overflow-y: auto;
    border-left: 1px solid var(--nts-border);
}

.pdv2-nts-kicker[b-euflv4obba] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--nts-muted);
}

.pdv2-nts-kicker-gap[b-euflv4obba] {
    margin-top: 16px;
}

.pdv2-nts-count[b-euflv4obba] {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

.pdv2-nts-tree[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px solid var(--nts-border);
    border-radius: 6px;
    box-shadow: var(--nts-shadow-card);
}

.pdv2-nts-tree-set[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--nts-border);
    font-weight: 600;
}

.pdv2-nts-tree-row[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    min-width: 0;
    font-size: 14px;
}

.pdv2-nts-tree-calc[b-euflv4obba] {
    font-weight: 600;
}

.pdv2-nts-tree-calc i[b-euflv4obba] {
    color: var(--nts-primary);
}

.pdv2-nts-tree-icon-muted[b-euflv4obba] {
    color: var(--nts-muted);
}

.pdv2-nts-tree-child[b-euflv4obba] {
    padding-left: 6px;
}

.pdv2-nts-tree-elbow[b-euflv4obba] {
    flex: none;
    width: 12px;
    height: 14px;
    margin-top: -10px;
    border-left: 1.5px solid var(--nts-border-input);
    border-bottom: 1.5px solid var(--nts-border-input);
}

.pdv2-nts-tree-name[b-euflv4obba] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdv2-nts-tree-qty[b-euflv4obba] {
    font-size: 12px;
    color: var(--nts-muted);
    font-variant-numeric: tabular-nums;
}

.pdv2-nts-calc-badge[b-euflv4obba] {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--nts-primary);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.pdv2-nts-checks[b-euflv4obba] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.pdv2-nts-checks li[b-euflv4obba] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdv2-nts-check-ok i[b-euflv4obba] {
    color: var(--nts-success);
}

.pdv2-nts-check-bad[b-euflv4obba] {
    color: var(--nts-danger);
    font-weight: 500;
}

/* ---------- footer ---------- */
.pdv2-nts-footer[b-euflv4obba] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 12px 24px;
    border-top: 1px solid var(--nts-border);
}

.pdv2-nts-footer-line[b-euflv4obba] {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--nts-muted);
}

/* ---------- toolbar ---------- */
/* Tools only checkbox: DxCheckBox is a child component, so it needs ::deep. */
.pdv2[b-euflv4obba]  .pd-tools-only {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 500;
}

/* ---------- header buttons (Description expand / collapse, Menu column options) ---------- */
/* Authored in this component's markup, so no ::deep. */
.pdv2-head[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pdv2-head-btn[b-euflv4obba] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: var(--pdv2-surface);
    color: #495057;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.pdv2-head-btn--wide[b-euflv4obba] {
    width: 26px;
}

.pdv2-head-btn:hover[b-euflv4obba] {
    background: #f1f3f5;
}

.pdv2-head-btn:focus-visible[b-euflv4obba] {
    outline: 2px solid var(--pdv2-link);
    outline-offset: 1px;
}
/* /Components/Pages/Product/ToolRelationships.razor.rz.scp.css */
/* Component-scoped tokens. This repo has no app-wide --cf-* system, so the handoff palette is
   declared locally on the root class, matching the CastingCostBreakdown.razor.css pattern. */
.tr[b-ee72vmssxi] {
    --tr-primary: #0D6EFD;
    --tr-primary-dark: #0B5ED7;
    --tr-success: #198754;
    --tr-danger: #DC3545;
    --tr-text: #212529;
    --tr-muted: #6C757D;
    --tr-border: #DEE2E6;
    --tr-surface: #FFFFFF;
    --tr-surface-alt: #F8F9FA;
    --tr-sidebar: #000000;
    --tr-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    --tr-radius: 6px;
    font-family: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
    color: var(--tr-text);
    padding: 24px;
    background: var(--tr-surface);
}

.tr-card[b-ee72vmssxi] {
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow);
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- header ---------- */
.tr-head[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tr-border);
}

.tr-head-icon[b-ee72vmssxi] {
    font-size: 18px;
    color: var(--tr-muted);
}

.tr-head-right[b-ee72vmssxi] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--tr-muted);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tr-title[b-ee72vmssxi] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.tr-caption[b-ee72vmssxi] {
    font-size: 12px;
    color: var(--tr-muted);
}

.tr-toggle[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.tr-toggle input[b-ee72vmssxi] {
    cursor: pointer;
    margin: 0;
}

.tr-legend[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tr-swatch[b-ee72vmssxi] {
    display: inline-block;
    width: 24px;
    border-top: 2px solid var(--tr-border);
}

.tr-swatch.is-sel[b-ee72vmssxi] {
    border-top-color: var(--tr-primary);
}

.tr-swatch.is-off[b-ee72vmssxi] {
    border-top-style: dashed;
}

/* ---------- body ---------- */
.tr-body[b-ee72vmssxi] {
    padding: 20px 24px 24px;
}

/* Horizontal scroll stays on the card body. On the page it would drag the whole Tool form sideways. */
.tr-scroll[b-ee72vmssxi] {
    overflow-x: auto;
}

.tr-inner[b-ee72vmssxi] {
    min-width: 1140px;
}

.tr-colheads[b-ee72vmssxi] {
    display: flex;
    margin-bottom: 12px;
}

.tr-row[b-ee72vmssxi] {
    display: flex;
    align-items: flex-start;
}

.tr-col-left[b-ee72vmssxi] {
    width: 360px;
    flex: none;
}

.tr-col-gutter[b-ee72vmssxi] {
    width: 72px;
    flex: none;
}

.tr-col-mid[b-ee72vmssxi] {
    width: 280px;
    flex: none;
}

.tr-col-right[b-ee72vmssxi] {
    flex: 1;
    min-width: 340px;
}

.tr-colhead[b-ee72vmssxi] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tr-muted);
}

.tr-centre[b-ee72vmssxi] {
    text-align: center;
}

.tr-colhead-sub[b-ee72vmssxi] {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tr-muted);
}

/* Cards are absolutely positioned so their vertical centres line up with the SVG edge endpoints. */
.tr-stack[b-ee72vmssxi] {
    position: relative;
}

.tr-sublabel[b-ee72vmssxi] {
    position: absolute;
    left: 0;
    right: 0;
    height: 36px;
    display: flex;
    align-items: flex-end;
}

.tr-gutter[b-ee72vmssxi] {
    display: block;
    flex: none;
}

/* ---------- node cards ---------- */
.tr-node[b-ee72vmssxi] {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow);
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background 120ms ease, border-color 120ms ease;
}

/* Hover is pure CSS: an @onmouseover handler would cost a SignalR round trip per mouse move. */
.tr-node:hover[b-ee72vmssxi] {
    background: var(--tr-surface-alt);
    border-color: var(--tr-primary);
}

.tr-node.is-sel[b-ee72vmssxi] {
    background: var(--tr-surface-alt);
    border-color: var(--tr-primary);
}

/* The same product on the opposite side of the diagram. */
.tr-node.is-linked[b-ee72vmssxi] {
    border-color: var(--tr-primary);
    border-style: dashed;
}

.tr-node.is-off[b-ee72vmssxi] {
    opacity: .55;
}

.tr-node.is-off .tr-node-code[b-ee72vmssxi] {
    text-decoration: line-through;
}

.tr-node-top[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tr-node-icon[b-ee72vmssxi] {
    color: var(--tr-muted);
    font-size: 14px;
    flex: none;
}

.tr-node-code[b-ee72vmssxi] {
    color: var(--tr-primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.tr-node-name[b-ee72vmssxi] {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;   /* without this a flex item will not shrink below its content and never ellipses */
}

.tr-node-id[b-ee72vmssxi] {
    margin-left: auto;
    font-size: 12px;
    color: var(--tr-muted);
    white-space: nowrap;
}

.tr-node-meta[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    margin-top: auto;
    white-space: nowrap;
}

.tr-node-flag[b-ee72vmssxi] {
    margin-left: auto;
}

.tr-ok[b-ee72vmssxi] {
    color: var(--tr-success);
}

.tr-bad[b-ee72vmssxi] {
    color: var(--tr-danger);
}

/* Route marker. The right column has no enabled flag to show here - procTools_ProductsSel does not
   return IsEnabled - and the route is the thing that distinguishes these cards from the left column. */
.tr-route[b-ee72vmssxi] {
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 1px 8px;
    border: 1px solid var(--tr-border);
}

.tr-route.is-direct[b-ee72vmssxi] {
    color: var(--tr-muted);
    background: var(--tr-surface-alt);
}

.tr-route.is-viaset[b-ee72vmssxi] {
    color: #055160;
    background: #cff4fc;
    border-color: #b6effb;
}

/* ---------- centre tool card ---------- */
.tr-tool[b-ee72vmssxi] {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: var(--tr-surface);
    border: 1px solid var(--tr-border);
    border-radius: var(--tr-radius);
    box-shadow: var(--tr-shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: default;
}

.tr-tool-top[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Black square, a nod to the app's sidebar. */
.tr-tool-badge[b-ee72vmssxi] {
    width: 36px;
    height: 36px;
    flex: none;
    background: var(--tr-sidebar);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
}

.tr-tool-code[b-ee72vmssxi] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.tr-tool-foot[b-ee72vmssxi] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tr-tool-foot .tr-caption[b-ee72vmssxi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- edges ---------- */
.tr-edge[b-ee72vmssxi] {
    fill: none;
    stroke: var(--tr-border);
    stroke-width: 2;
    transition: stroke 120ms ease;
}

.tr-edge.is-sel[b-ee72vmssxi] {
    stroke: var(--tr-primary);
    stroke-width: 2.5;
}

.tr-edge.is-off[b-ee72vmssxi] {
    stroke-dasharray: 6 4;
}

/* ---------- empty / error ---------- */
.tr-alert[b-ee72vmssxi] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: var(--tr-radius);
    padding: 10px 14px;
    font-size: 12.5px;
}

.tr-empty[b-ee72vmssxi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--tr-muted);
    font-size: 13px;
}

.tr-empty i[b-ee72vmssxi] {
    font-size: 24px;
}

.tr-placeholder[b-ee72vmssxi] {
    position: absolute;
    left: 0;
    right: 0;
    height: 62px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--tr-border);
    border-radius: var(--tr-radius);
    color: var(--tr-muted);
    font-size: 12px;
    text-align: center;
    padding: 0 12px;
}

/* ---------- footer ---------- */
/* The strip is deliberately one line. Everything below either shrinks with an ellipsis or refuses
   to wrap, so a long customer part number never pushes the actions onto a second row. */
.tr-foot[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 14px 24px;
    border-top: 1px solid var(--tr-border);
    background: var(--tr-surface-alt);
    border-radius: 0 0 var(--tr-radius) var(--tr-radius);
}

.tr-foot-title[b-ee72vmssxi] {
    flex: none;
    min-width: 180px;
    max-width: 260px;
}

.tr-foot-name[b-ee72vmssxi] {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-foot-title .tr-caption[b-ee72vmssxi] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-foot-fields[b-ee72vmssxi] {
    display: flex;
    gap: 24px;
    flex: 1;
    flex-wrap: nowrap;
    min-width: 0;
}

.tr-foot-fields > div[b-ee72vmssxi] {
    min-width: 0;
}

.tr-foot-label[b-ee72vmssxi],
.tr-foot-value[b-ee72vmssxi] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-foot-label[b-ee72vmssxi] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tr-muted);
}

.tr-foot-value[b-ee72vmssxi] {
    font-size: 14px;
}

.tr-foot-actions[b-ee72vmssxi] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.tr-foot-link[b-ee72vmssxi] {
    font-size: 14px;
    font-weight: 600;
    color: var(--tr-primary);
    text-decoration: none;
    white-space: nowrap;
}

.tr-foot-link:hover[b-ee72vmssxi] {
    color: var(--tr-primary-dark);
    text-decoration: underline;
}

.tr-foot-clear[b-ee72vmssxi] {
    background: none;
    border: none;
    padding: 4px;
    line-height: 1;
    font: inherit;
    font-size: 14px;
    color: var(--tr-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background 120ms ease, color 120ms ease;
}

.tr-foot-clear:hover[b-ee72vmssxi] {
    background: var(--tr-border);
    color: var(--tr-text);
}
/* /Components/Pages/Product/ToolSet.razor.rz.scp.css */
/* Copied from ToolRelationships.razor.css (scoped CSS cannot be shared across components) and
   prefixed tsm- so the two sheets can diverge: this page has only two side columns, hosts the edit
   form as the card's top band, and adds edit affordances (+ buttons, footer actions). Tokens are
   declared locally - the repo has no app-wide --cf-* system. They sit on .tsm-page (not .tsm) so
   the add drawer, a sibling of .tsm inside the page, inherits them too. */
.tsm-page[b-6ut80zsq00] {
    --tsm-primary: #0D6EFD;
    --tsm-primary-dark: #0B5ED7;
    --tsm-success: #198754;
    --tsm-danger: #DC3545;
    --tsm-warning: #FFC107;
    --tsm-text: #212529;
    --tsm-muted: #6C757D;
    --tsm-border: #DEE2E6;
    --tsm-surface: #FFFFFF;
    --tsm-surface-alt: #F8F9FA;
    --tsm-sidebar: #000000;
    --tsm-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    --tsm-radius: 6px;
    font-family: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
    color: var(--tsm-text);
}

.tsm[b-6ut80zsq00] {
    padding: 12px 24px 24px;
    background: var(--tsm-surface);
}

.tsm-card[b-6ut80zsq00] {
    background: var(--tsm-surface);
    border: 1px solid var(--tsm-border);
    border-radius: var(--tsm-radius);
    box-shadow: var(--tsm-shadow);
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- header ---------- */
.tsm-head[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--tsm-border);
}

.tsm-head-icon[b-6ut80zsq00] {
    font-size: 18px;
    color: var(--tsm-muted);
}

.tsm-head-right[b-6ut80zsq00] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tsm-title[b-6ut80zsq00] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.tsm-caption[b-6ut80zsq00] {
    font-size: 12px;
    color: var(--tsm-muted);
}

/* ---------- form band (the restyled Tool Set edit form) ---------- */
.tsm-form[b-6ut80zsq00] {
    padding: 12px 20px 4px;
    border-bottom: 1px solid var(--tsm-border);
}

/* The set's primary product. A read-only marker on the card; the action is in the footer
   inspector, because the card is itself a button and cannot nest one. */
.tsm-node-primary[b-6ut80zsq00] {
    color: var(--tsm-warning);
    flex: none;
}

/* Pattern Set No holding a number another Tool Set or Tool already owns. The clash blocks Save,
   so the editor is outlined to match the message beside it. The editor's inner DOM belongs to
   DevExpress, hence ::deep; both forms are listed because the class lands on the component root,
   which is the input wrapper on some themes and its parent on others. */
.tsm-form[b-6ut80zsq00]  .tsm-invalid.dxbl-text-edit,
.tsm-form[b-6ut80zsq00]  .tsm-invalid .dxbl-text-edit {
    border-color: var(--tsm-danger);
}

/* ---------- body ---------- */
.tsm-body[b-6ut80zsq00] {
    padding: 16px 24px 24px;
}

/* "Show disabled" + legend, right-aligned between the column heads and the diagram. On
   ToolRelationships these live in the card head; here the head holds the form widgets instead. */
.tsm-utility[b-6ut80zsq00] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--tsm-muted);
    padding-bottom: 10px;
}

.tsm-toggle[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.tsm-toggle input[b-6ut80zsq00] {
    cursor: pointer;
    margin: 0;
}

.tsm-legend[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tsm-swatch[b-6ut80zsq00] {
    display: inline-block;
    width: 24px;
    border-top: 2px solid var(--tsm-border);
}

.tsm-swatch.is-sel[b-6ut80zsq00] {
    border-top-color: var(--tsm-primary);
}

.tsm-swatch.is-off[b-6ut80zsq00] {
    border-top-style: dashed;
}

/* Horizontal scroll stays on the card body, not the page. */
.tsm-scroll[b-6ut80zsq00] {
    overflow-x: auto;
}

.tsm-inner[b-6ut80zsq00] {
    min-width: 1140px;
}

.tsm-colheads[b-6ut80zsq00] {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
}

.tsm-row[b-6ut80zsq00] {
    display: flex;
    align-items: flex-start;
}

.tsm-col-left[b-6ut80zsq00] {
    width: 370px;
    flex: none;
}

.tsm-col-gutter[b-6ut80zsq00] {
    width: 72px;
    flex: none;
}

.tsm-col-mid[b-6ut80zsq00] {
    width: 340px;
    flex: none;
}

.tsm-col-right[b-6ut80zsq00] {
    flex: 1;
    min-width: 350px;
}

.tsm-colhead[b-6ut80zsq00] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tsm-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.tsm-centre[b-6ut80zsq00] {
    justify-content: center;
}

/* Totals line under the products column head - kept prominent, it is the old grid's summary row. */
.tsm-colhead-sub[b-6ut80zsq00] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tsm-text);
}

/* Role-gated add button in the column heads. */
.tsm-colhead-add[b-6ut80zsq00] {
    width: 28px;
    height: 28px;
    flex: none;
    border: 1px solid var(--tsm-border);
    border-radius: 50%;
    background: var(--tsm-surface);
    color: var(--tsm-primary);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease;
}

.tsm-colhead-add:hover[b-6ut80zsq00] {
    background: var(--tsm-surface-alt);
}

/* Cards are absolutely positioned so their vertical centres line up with the SVG edge endpoints. */
.tsm-stack[b-6ut80zsq00] {
    position: relative;
}

.tsm-gutter[b-6ut80zsq00] {
    display: block;
    flex: none;
}

/* ---------- node cards ---------- */
/* --tsm-indent is set per row (C# Indent): a group member's rail plus 24px per nesting depth, so
   a nested card starts further right and is that much narrower. */
.tsm-node[b-6ut80zsq00] {
    position: absolute;
    left: var(--tsm-indent, 0px);
    right: 0;
    box-sizing: border-box;
    background: var(--tsm-surface);
    border: 1px solid var(--tsm-border);
    border-radius: var(--tsm-radius);
    box-shadow: var(--tsm-shadow);
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background 120ms ease, border-color 120ms ease;
}

/* Hover is pure CSS: an @onmouseover handler would cost a SignalR round trip per mouse move. */
.tsm-node:hover[b-6ut80zsq00] {
    background: var(--tsm-surface-alt);
    border-color: var(--tsm-primary);
}

.tsm-node.is-sel[b-6ut80zsq00] {
    background: var(--tsm-surface-alt);
    border-color: var(--tsm-primary);
}

.tsm-node.is-off[b-6ut80zsq00] {
    opacity: .55;
}

.tsm-node.is-off .tsm-node-code[b-6ut80zsq00] {
    text-decoration: line-through;
}

.tsm-node-top[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tsm-node-icon[b-6ut80zsq00] {
    color: var(--tsm-muted);
    font-size: 14px;
    flex: none;
}

.tsm-node-code[b-6ut80zsq00] {
    color: var(--tsm-primary);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.tsm-node-name[b-6ut80zsq00] {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;   /* without this a flex item will not shrink below its content and never ellipses */
}

/* Marks the set's calc tool, which the list always puts first. Icon-only and amber so it reads as
   the same kind of marker as .tsm-node-primary in the products column. */
.tsm-node-calc[b-6ut80zsq00] {
    color: var(--tsm-warning);
    flex: none;
}

.tsm-node-id[b-6ut80zsq00] {
    margin-left: auto;
    font-size: 12px;
    color: var(--tsm-muted);
    white-space: nowrap;
}

.tsm-node-meta[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    margin-top: auto;
    white-space: nowrap;
}

.tsm-node-flag[b-6ut80zsq00] {
    margin-left: auto;
}

/* ---------- tool type groups ----------
   A tool type with two or more tools collapses into one card. Expanded, it becomes a short header
   with its members indented below it.

   Every row height is decided in C# and written inline by the razor. Nothing here may set height,
   min-height, or padding that grows the box: a row that outgrows its stated height shifts every
   row below it and pulls each card off its SVG edge endpoint. */
.tsm-group[b-6ut80zsq00] {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--tsm-surface-alt);
    border: 1px dashed var(--tsm-border);
    border-radius: var(--tsm-radius);
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background 120ms ease, border-color 120ms ease;
}

.tsm-group:hover[b-6ut80zsq00] {
    border-color: var(--tsm-primary);
}

.tsm-group.is-off[b-6ut80zsq00] {
    opacity: .55;
}

/* The expanded header is 34px, so it loses the card padding and keeps one line. */
.tsm-group-head[b-6ut80zsq00] {
    padding: 0 14px;
    justify-content: center;
    background: transparent;
    box-shadow: none;
}

.tsm-group-top[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    line-height: 1.2;
}

.tsm-group-chevron[b-6ut80zsq00] {
    color: var(--tsm-muted);
    font-size: 12px;
    flex: none;
}

.tsm-group-code[b-6ut80zsq00] {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tsm-group-count[b-6ut80zsq00] {
    flex: none;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--tsm-surface);
    border: 1px solid var(--tsm-border);
    color: var(--tsm-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.tsm-group-off[b-6ut80zsq00] {
    margin-left: auto;
    flex: none;
    font-size: 12px;
    color: var(--tsm-muted);
    white-space: nowrap;
}

/* A member of an expanded group. Its 22px offset comes in through --tsm-indent. The rail stands
   in for a container element: members are absolutely positioned siblings of the header, not its
   children. */
.tsm-node.is-grouped[b-6ut80zsq00]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: -4px;
    bottom: -4px;
    border-left: 2px solid var(--tsm-border);
}

/* ---------- nested tools ----------
   A tool with a ParentToolId in the set sits indented under its parent. Heights come from C# as
   for every row: a collapsed parent is 84px (CollapsedParentH), the card plus the summary band. */

/* Room for the chevron, which is a separate button over the card's top-left corner. */
.tsm-node.has-chev .tsm-node-top[b-6ut80zsq00] {
    padding-left: 18px;
}

/* A collapsed parent: a stack of cards behind it says it holds more. */
.tsm-node.is-collapsed[b-6ut80zsq00] {
    box-shadow: 3px 3px 0 -1px var(--tsm-surface), 3px 3px 0 0 var(--tsm-border),
                6px 6px 0 -1px var(--tsm-surface), 6px 6px 0 0 var(--tsm-border),
                var(--tsm-shadow);
}

/* The summary band, flush with the card's bottom edge. */
.tsm-kids[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px -14px -10px;
    padding: 3px 14px;
    min-width: 0;
    overflow: hidden;
    background: var(--tsm-surface-alt);
    border-top: 1px solid var(--tsm-border);
    border-radius: 0 0 var(--tsm-radius) var(--tsm-radius);
    font-size: 11.5px;
    white-space: nowrap;
    color: var(--tsm-muted);
}

.tsm-kids b[b-6ut80zsq00] {
    color: var(--tsm-text);
    font-weight: 600;
}

.tsm-kids-range[b-6ut80zsq00] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tsm-kids-ok[b-6ut80zsq00] {
    margin-left: auto;
    color: var(--tsm-success);
}

.tsm-kids-off[b-6ut80zsq00] {
    margin-left: auto;
    color: var(--tsm-danger);
}

/* Open / close a parent. Its own button, placed over the card's corner by inline top/left. */
.tsm-chev[b-6ut80zsq00] {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--tsm-border);
    border-radius: 3px;
    background: var(--tsm-surface-alt);
    color: var(--tsm-muted);
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tsm-chev:hover[b-6ut80zsq00] {
    border-color: var(--tsm-primary);
    color: var(--tsm-primary);
}

/* The elbows from parent to child, under the cards. */
.tsm-tree[b-6ut80zsq00] {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    overflow: visible;
}

.tsm-tree-line[b-6ut80zsq00] {
    fill: none;
    stroke: #ADB5BD;
    stroke-width: 1.5;
}

.tsm-tree-line.is-off[b-6ut80zsq00] {
    stroke-dasharray: 4 3;
}

.tsm-swatch.is-tree[b-6ut80zsq00] {
    border-top-color: #ADB5BD;
    border-top-width: 1.5px;
}

/* Expand all / Collapse to level 1 in the utility bar. */
.tsm-util-btn[b-6ut80zsq00] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--tsm-primary);
    font: inherit;
    cursor: pointer;
}

.tsm-util-btn:hover[b-6ut80zsq00] {
    text-decoration: underline;
}

.tsm-ok[b-6ut80zsq00] {
    color: var(--tsm-success);
}

.tsm-bad[b-6ut80zsq00] {
    color: var(--tsm-danger);
}

.tsm-dim[b-6ut80zsq00] {
    color: var(--tsm-muted);
}

/* ---------- centre tool set card ---------- */
.tsm-set[b-6ut80zsq00] {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: var(--tsm-surface);
    border: 1px solid var(--tsm-border);
    border-radius: var(--tsm-radius);
    box-shadow: var(--tsm-shadow);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: default;
}

.tsm-set-top[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Black square, a nod to the app's sidebar. */
.tsm-set-badge[b-6ut80zsq00] {
    width: 36px;
    height: 36px;
    flex: none;
    background: var(--tsm-sidebar);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
}

.tsm-set-code[b-6ut80zsq00] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsm-set-meta[b-6ut80zsq00] {
    font-size: 12px;
}

/* Version pill + status badge on their own line, indented to the name (badge 36px + gap 10px). */
.tsm-set-version[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 46px;
}

.tsm-set-version .badge[b-6ut80zsq00] {
    font-size: 12px;
    font-weight: 600;
}

.tsm-set-foot[b-6ut80zsq00] {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tsm-set-foot .tsm-caption[b-6ut80zsq00] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- edges ---------- */
.tsm-edge[b-6ut80zsq00] {
    fill: none;
    stroke: var(--tsm-border);
    stroke-width: 2;
    transition: stroke 120ms ease;
}

.tsm-edge.is-sel[b-6ut80zsq00] {
    stroke: var(--tsm-primary);
    stroke-width: 2.5;
}

.tsm-edge.is-off[b-6ut80zsq00] {
    stroke-dasharray: 6 4;
}

/* ---------- error / empty column ---------- */
.tsm-alert[b-6ut80zsq00] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: var(--tsm-radius);
    padding: 10px 14px;
    font-size: 12.5px;
}

/* Unlike ToolRelationships there is no whole-diagram empty state: an empty tool set still renders
   the centre card, these placeholders and the + buttons, or a new set could never get its first link. */
.tsm-placeholder[b-6ut80zsq00] {
    position: absolute;
    left: 0;
    right: 0;
    height: 62px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--tsm-border);
    border-radius: var(--tsm-radius);
    color: var(--tsm-muted);
    font-size: 12px;
    text-align: center;
    padding: 0 12px;
}

/* ---------- footer inspector ---------- */
.tsm-foot[b-6ut80zsq00] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 14px 24px;
    border-top: 1px solid var(--tsm-border);
    background: var(--tsm-surface-alt);
    border-radius: 0 0 var(--tsm-radius) var(--tsm-radius);
}

/* One footer serves tool links and product links, so the band says which is in play: a 2px top rule
   in the kind's colour (primary blue for a tool, the primary-product star amber for a product) and a
   pill straddling that rule. A product footer is mirrored so its name sits at the right, under the
   products column, and the pill moves to the right with it. */
.tsm-foot.is-tool[b-6ut80zsq00] {
    border-top: 2px solid var(--tsm-primary);
}

.tsm-foot.is-product[b-6ut80zsq00] {
    border-top: 2px solid #FFC107;
    flex-direction: row-reverse;
}

.tsm-foot-kind[b-6ut80zsq00] {
    position: absolute;
    top: -12px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tsm-primary);
    background: #E7F1FF;
    border: 1px solid var(--tsm-primary);
}

.tsm-foot-kind .bi[b-6ut80zsq00] {
    font-size: 12px;
}

.tsm-foot.is-product .tsm-foot-kind[b-6ut80zsq00] {
    left: auto;
    right: 20px;
    color: #B8860B;
    background: #FFF8E1;
    border-color: #FFC107;
}

.tsm-foot.is-product .tsm-foot-title[b-6ut80zsq00] {
    text-align: right;
}

.tsm-foot.is-product .tsm-foot-fields[b-6ut80zsq00] {
    justify-content: flex-end;
    text-align: right;
}

.tsm-foot.is-product .tsm-foot-actions[b-6ut80zsq00],
.tsm-foot.is-product .tsm-foot-qty[b-6ut80zsq00] {
    flex-direction: row-reverse;
}

.tsm-foot-title[b-6ut80zsq00] {
    min-width: 200px;
}

.tsm-foot-name[b-6ut80zsq00] {
    font-size: 14px;
    font-weight: 600;
}

.tsm-foot-link[b-6ut80zsq00] {
    color: var(--tsm-primary);
    text-decoration: none;
}

.tsm-foot-link:hover[b-6ut80zsq00] {
    text-decoration: underline;
}

.tsm-foot-link-icon[b-6ut80zsq00] {
    font-size: 11px;
    margin-left: 2px;
}

/* Root Tool Set strip. The Identity group is a third of the card, so this field gets about 280px -
   the name, the link icon and the old inline hint could not share it without wrapping out of the
   26px box. The hint is now the tooltip; the name truncates and the icon never breaks away from
   it. Modifier classes, because .tsm-foot-link* is shared with the footer and the copy dialog. */
.tsm-root-strip[b-6ut80zsq00] {
    min-width: 0;
    overflow: hidden;
}

.tsm-root-link[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.tsm-root-name[b-6ut80zsq00] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tsm-root-link .tsm-foot-link-icon[b-6ut80zsq00] {
    flex: none;
}

.tsm-foot-fields[b-6ut80zsq00] {
    display: flex;
    gap: 8px 28px;   /* tight row gap so a wrapped second line reads as one block */
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
}

.tsm-foot-fields .tsm-foot-value[b-6ut80zsq00] {
    white-space: nowrap;
}

.tsm-foot-label[b-6ut80zsq00] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tsm-muted);
}

.tsm-foot-value[b-6ut80zsq00] {
    font-size: 14px;
}

.tsm-foot-actions[b-6ut80zsq00] {
    display: flex;
    gap: 8px;
    flex: none;
    align-items: center;
}

/* In-place Qty Per Impression editor for a selected product link. */
.tsm-foot-qty[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The DevExpress editor fills its container; sized here because scoped CSS cannot reach inside it. */
.tsm-foot-qty-box[b-6ut80zsq00] {
    width: 90px;
}

/* ---------- Create New Copy dialog ---------- */
/* DevExpress renders a DxWindow into a popup portal, so this content sits OUTSIDE .tsm-page and
   would lose the --tsm-* tokens declared there. .tsm-copy re-declares the ones the dialog and the
   shared classes it borrows (.tsm-caption, .tsm-foot-label, .tsm-foot-link, .tsm-dim) rely on. */
.tsm-copy[b-6ut80zsq00] {
    --tsm-primary: #0D6EFD;
    --tsm-text: #212529;
    --tsm-muted: #6C757D;
    --tsm-border: #DEE2E6;
    --tsm-surface: #FFFFFF;
    --tsm-surface-alt: #F8F9FA;
    font-family: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
    color: var(--tsm-text);
}

.tsm-copy-grid[b-6ut80zsq00] {
    display: grid;
    grid-template-columns: 1fr 110px 150px;
    gap: 12px;
    align-items: end;
}

.tsm-copy-section[b-6ut80zsq00] {
    margin-top: 14px;
}

.tsm-copy-head[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.tsm-copy-list[b-6ut80zsq00] {
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--tsm-border);
    border-radius: 4px;
}

.tsm-copy-row[b-6ut80zsq00] {
    display: grid;
    grid-template-columns: 26px 1fr 1fr 140px;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--tsm-border);
    font-size: 13px;
}

.tsm-copy-row:last-child[b-6ut80zsq00] {
    border-bottom: 0;
}

.tsm-copy-preview[b-6ut80zsq00] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 16px;
    background: var(--tsm-surface-alt);
    border: 1px solid var(--tsm-border);
    border-radius: 4px;
    padding: 10px 12px;
}

/* ---------- add drawer ---------- */
/* The panel is pinned to the viewport, not to the page card.
   DevExpress positions .dxbl-drawer-panel absolutely inside .dxbl-drawer, so the panel is only as
   tall as the page content - on a short tool set that left the grid a few hundred pixels high.
   position:fixed gives it the whole viewport height with no magic offset. An ancestor's
   overflow:hidden does not clip a fixed descendant (no transform/filter is in the chain).
   z-index stays below DevExpress's flyout layer (1070: filter editors, context menus, column
   chooser) so grid pop-ups still render above the drawer.
   The drawer's inner DOM belongs to DevExpress, hence ::deep; class names checked against
   DevExpress.Blazor.Themes 26.1.4 (blazing-berry.bs5). */
.tsm-page[b-6ut80zsq00]  .tsm-drawer .dxbl-drawer-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

/* Add Product opens from the left so the Products column it feeds stays visible. The rule above
   pins the panel with right:0 and outranks the theme's .dxbl-drawer-left rule, so clear it here
   rather than lean on the over-constrained-box fallback. Must stay after that rule: same
   specificity, so source order decides. left:0 puts the panel over the nav sidebar - the shading
   already covers the page, so that reads fine and needs no width media query. */
.tsm-page[b-6ut80zsq00]  .tsm-drawer-left .dxbl-drawer-panel {
    left: 0;
    right: auto;
}

.tsm-page[b-6ut80zsq00]  .tsm-drawer .dxbl-drawer-shading {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 999;
}

/* Panel body = note / scrolling grid, or the create form. The theme makes the body a flex column
   with align-items:flex-start and padding; stretch it so the grid fills the panel width, and let
   the grid (not the body) own the vertical scroll. */
.tsm-page[b-6ut80zsq00]  .tsm-drawer .dxbl-drawer-body {
    align-items: stretch;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.tsm-drawer-body[b-6ut80zsq00] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tsm-page[b-6ut80zsq00]  .tsm-drawer .tsp {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The grid needs a definite height for virtual scrolling: it is the flex-grown item. */
.tsm-page[b-6ut80zsq00]  .tsm-drawer .tsp-grid {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    border-width: 0;
}

.tsm-page[b-6ut80zsq00]  .tsm-drawer .tsp-loading {
    padding: 24px;
    color: var(--tsm-muted);
    font-size: 12.5px;
}

.tsm-drawer-head[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.tsm-drawer-icon[b-6ut80zsq00] {
    font-size: 18px;
    color: var(--tsm-muted);
}

.tsm-drawer-title[b-6ut80zsq00] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* Documents drawer: the set name and kind after the title. */
.tsm-drawer-title-sub[b-6ut80zsq00] {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tsm-muted);
    margin-left: 6px;
}

/* The document library hands its own height chain down (ToolSetDocuments.razor.css owns the
   rest); the drawer body only has to let it grow. */
.tsm-page[b-6ut80zsq00]  .tsm-drawer .tsd {
    flex: 1 1 auto;
    min-height: 0;
}

/* Count pill inside the head strip's Documents button. ::deep: the span sits inside the
   DxButton's own root element. Zero reads grey so an empty library is not a call to action. */
.tsm-head-right[b-6ut80zsq00]  .tsm-doc-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--tsm-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.tsm-head-right[b-6ut80zsq00]  .tsm-doc-count.is-zero {
    background: #e9ecef;
    color: var(--tsm-muted);
}

.tsm-drawer-qty[b-6ut80zsq00] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

/* Always the right-most item in the header strip, whatever else the strip holds. */
.tsm-drawer-close[b-6ut80zsq00] {
    margin-left: auto;
    flex: none;
}

/* The tool side's own rules (note, create form, picker height) live in ToolSetAddTools.razor.css,
   which travels with the panel to the Product Dependencies popup. */
/* /Components/Pages/Product/ToolSetAddTools.razor.rz.scp.css */
/* Add Tools to a Tool Set. Ported from the ToolSet page's drawer rules so the panel carries its
   own height chain to both hosts: the drawer body and the Product Dependencies popup.

   The host only has to be a flex column with a definite height. Tokens are declared locally -
   the repo has no app-wide --cf-* system, and the ToolSet page's --tsm-* set does not reach the
   popup. The picker's inner DOM belongs to another component, hence ::deep. */
.tsat[b-73ruuygwpk] {
    --tsat-muted: #6C757D;
    --tsat-border: #DEE2E6;
    --tsat-surface-alt: #F8F9FA;
    --tsat-radius: 6px;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.tsat-msg[b-73ruuygwpk] {
    padding: 24px;
    color: var(--tsat-muted);
    font-size: 12.5px;
}

/* ---------- mode strip ---------- */
.tsat-modes[b-73ruuygwpk] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tsat-border);
}

.tsat-segments[b-73ruuygwpk] {
    display: flex;
    gap: 6px;
    flex: none;
}

/* The mode hint gives up width before the buttons do. */
.tsat-caption[b-73ruuygwpk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tsat-muted);
    font-size: 12.5px;
}

/* ---------- body ---------- */
.tsat-body[b-73ruuygwpk] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* One-line rule reminder above the tool grid. */
.tsat-note[b-73ruuygwpk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin: 10px 12px 0;
    padding: 6px 10px;
    background: var(--tsat-surface-alt);
    border: 1px solid var(--tsat-border);
    border-radius: var(--tsat-radius);
    color: var(--tsat-muted);
    font-size: 12.5px;
}

/* flex + min-height: 0 let the form shrink to the host and scroll as a whole when the type
   list is taller than the drawer or popup. Without them overflow never triggers. */
.tsat-form[b-73ruuygwpk] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    overflow: auto;
}

/* ---------- tool type rows (Create New) ---------- */
/* A plain row list, not a DxListBox: every row carries its own quantity editor, and a list box
   item template would hand the editor's clicks to the item's selection.
   No fixed height: the list shows every type, so ticking one needs no inner scroll. */
.tsat-types[b-73ruuygwpk] {
    border: 1px solid var(--tsat-border);
    border-radius: var(--tsat-radius);
}

.tsat-type-row[b-73ruuygwpk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--tsat-border);
}

.tsat-type-row:last-child[b-73ruuygwpk] {
    border-bottom: 0;
}

/* Row order: tick, quantity, name. The quantity is fixed and the name takes the rest, so the
   name never shrinks to "Ca...". */
.tsat-type-name[b-73ruuygwpk] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ::deep: the class lands on the DxSpinEdit's OWN root element, which carries no scope
   attribute of this component, so an unprefixed rule never matches it. */
.tsat-type-row[b-73ruuygwpk]  .tsat-type-qty {
    flex: none;
    width: 84px;
    min-width: 84px;
}

.tsat-actions[b-73ruuygwpk] {
    display: flex;
    justify-content: flex-end;
    padding-top: 12px;
}

/* ---------- picker ---------- */
.tsat-body[b-73ruuygwpk]  .tsp {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The grid needs a definite height for virtual scrolling: it is the flex-grown item. */
.tsat-body[b-73ruuygwpk]  .tsp-grid {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    border-width: 0;
}

.tsat-body[b-73ruuygwpk]  .tsp-loading {
    padding: 24px;
    color: var(--tsat-muted);
    font-size: 12.5px;
}

/* ---------- busy shade ---------- */
/* Neither host's loading panel covers an add, so the panel blocks itself. */
.tsat-busy[b-73ruuygwpk] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, .6);
    color: var(--tsat-muted);
    font-size: 12.5px;
    z-index: 5;
}
/* /Components/Pages/Product/ToolSetDocuments.razor.rz.scp.css */
/* Tool Set document library. Same height-chain contract as ToolSetAddTools (.tsat): the host
   only has to be a flex column with a definite height, and the panel fills it. Tokens are
   declared locally - the ToolSet page's --tsm-* set does not reach the Dependencies window.
   EntityDocumentList's inner DOM belongs to another component, hence ::deep. */
.tsd[b-a55drcgi9d] {
    --tsd-primary: #0D6EFD;
    --tsd-text: #212529;
    --tsd-muted: #6C757D;
    --tsd-border: #DEE2E6;
    --tsd-surface: #FFFFFF;
    --tsd-surface-alt: #F8F9FA;
    --tsd-radius: 6px;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--tsd-text);
}

.tsd-msg[b-a55drcgi9d] {
    padding: 24px;
    color: var(--tsd-muted);
    font-size: 12.5px;
}

.tsd-caption[b-a55drcgi9d] {
    color: var(--tsd-muted);
    font-size: 12.5px;
}

/* ---------- mode strip ---------- */
.tsd-modes[b-a55drcgi9d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tsd-border);
}

.tsd-segments[b-a55drcgi9d] {
    display: flex;
    gap: 6px;
    flex: none;
}

/* The mode hint gives up width before the buttons do. */
.tsd-modes .tsd-caption[b-a55drcgi9d] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- upload strip ---------- */
.tsd-upload[b-a55drcgi9d] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 10px 16px;
    border-bottom: 1px solid var(--tsd-border);
}

.tsd-dropzone[b-a55drcgi9d] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    border: 2px dashed #b9c3cf;
    border-radius: var(--tsd-radius);
    background: var(--tsd-surface-alt);
    color: #495057;
    font-size: 12.5px;
}

.tsd-dropzone small[b-a55drcgi9d] {
    color: var(--tsd-muted);
}

.tsd-dropzone-icon[b-a55drcgi9d] {
    font-size: 20px;
    line-height: 1;
}

/* DxFileInput adds this while a drag hovers the zone (ExternalDropZoneDragOverCssClass). */
.tsd-dropzone-over[b-a55drcgi9d] {
    border-color: var(--tsd-primary);
    background: #e7f1ff;
}

/* The DxFileInput supplies the Select File button; its own drop area is hidden because the
   strip has one. ::deep: the class lands on the component's root, outside this scope. */
.tsd-upload-input[b-a55drcgi9d] {
    flex: none;
}

.tsd-upload-input[b-a55drcgi9d]  .dxbl-file-input-drop-zone,
.tsd-upload-input[b-a55drcgi9d]  .dxbl-file-input .dxbl-file-input-description {
    display: none;
}

.tsd-upload-cat[b-a55drcgi9d] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.tsd-upload-cat[b-a55drcgi9d]  .tsd-cat-combo {
    width: 170px;
}

/* ---------- gallery body ---------- */
.tsd-body[b-a55drcgi9d] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
}

.tsd-tiles-col[b-a55drcgi9d] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-right: 1px solid var(--tsd-border);
}

.tsd-chips[b-a55drcgi9d] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    flex-wrap: wrap;
    padding: 10px 16px 4px;
}

.tsd-chip[b-a55drcgi9d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid #cfd4d9;
    background: var(--tsd-surface);
    color: #495057;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.tsd-chip:disabled[b-a55drcgi9d] {
    opacity: .5;
    cursor: default;
}

.tsd-chip.is-on[b-a55drcgi9d] {
    background: var(--tsd-text);
    color: #fff;
    border-color: var(--tsd-text);
}

.tsd-chip-n[b-a55drcgi9d] {
    background: rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 11px;
}

.tsd-chip.is-on .tsd-chip-n[b-a55drcgi9d] {
    background: rgba(255, 255, 255, .22);
}

.tsd-chips-order[b-a55drcgi9d] {
    margin-left: auto;
    color: var(--tsd-muted);
    font-size: 12px;
}

.tsd-empty[b-a55drcgi9d] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--tsd-muted);
    font-size: 13px;
    text-align: center;
}

.tsd-empty .bi[b-a55drcgi9d] {
    font-size: 32px;
}

/* The tile grid, not the column, owns the vertical scroll. */
.tsd-tiles[b-a55drcgi9d] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 12px;
    padding: 10px 16px 16px;
}

.tsd-tile[b-a55drcgi9d] {
    border: 1px solid var(--tsd-border);
    border-radius: var(--tsd-radius);
    background: var(--tsd-surface);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    min-width: 0;
}

.tsd-tile:hover[b-a55drcgi9d] {
    border-color: var(--tsd-primary);
}

.tsd-tile.is-sel[b-a55drcgi9d] {
    border-color: var(--tsd-primary);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, .2);
}

.tsd-thumb[b-a55drcgi9d] {
    position: relative;
    height: 104px;
    background: var(--tsd-surface-alt);
    border-bottom: 1px solid var(--tsd-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tsd-thumb img[b-a55drcgi9d] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tsd-thumb-icon[b-a55drcgi9d] {
    font-size: 40px;
    line-height: 1;
    color: var(--tsd-muted);
}

.tsd-thumb-pdf[b-a55drcgi9d] {
    color: #c0392b;
}

.tsd-ext[b-a55drcgi9d] {
    position: absolute;
    left: 8px;
    top: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--tsd-surface);
    border: 1px solid var(--tsd-border);
    color: #495057;
}

.tsd-tile-body[b-a55drcgi9d] {
    padding: 7px 9px 8px;
    min-width: 0;
}

.tsd-tile-name[b-a55drcgi9d] {
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsd-tile-meta[b-a55drcgi9d] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--tsd-muted);
    white-space: nowrap;
    overflow: hidden;
}

/* Category chip. JIS amber, photo blue, drawing grey, anything else plain. */
.tsd-cat[b-a55drcgi9d] {
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--tsd-surface-alt);
    color: var(--tsd-muted);
    border: 1px solid var(--tsd-border);
    white-space: nowrap;
}

.tsd-cat-jis[b-a55drcgi9d] {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffe69c;
}

.tsd-cat-photo[b-a55drcgi9d] {
    background: #cfe2ff;
    color: #052c65;
    border-color: #9ec5fe;
}

.tsd-cat-drw[b-a55drcgi9d] {
    background: #e2e3e5;
    color: #41464b;
    border-color: #c4c8cb;
}

/* ---------- preview pane ---------- */
.tsd-preview[b-a55drcgi9d] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--tsd-surface-alt);
}

.tsd-pv-head[b-a55drcgi9d] {
    flex: none;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--tsd-border);
    background: var(--tsd-surface);
    min-width: 0;
}

.tsd-pv-name[b-a55drcgi9d] {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsd-pv-sub[b-a55drcgi9d] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--tsd-muted);
}

/* The document itself: the iframe (PDF) or image fills what is left. */
.tsd-pv-doc[b-a55drcgi9d] {
    flex: 1 1 auto;
    min-height: 0;
    margin: 12px 14px;
    background: var(--tsd-surface);
    border: 1px solid var(--tsd-border);
    border-radius: var(--tsd-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tsd-pv-frame[b-a55drcgi9d] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 0;
}

.tsd-pv-img[b-a55drcgi9d] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 8px;
}

.tsd-pv-img img[b-a55drcgi9d] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tsd-pv-other[b-a55drcgi9d] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--tsd-muted);
    font-size: 12.5px;
}

.tsd-pv-other .bi[b-a55drcgi9d] {
    font-size: 48px;
}

.tsd-pv-actions[b-a55drcgi9d] {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 12px;
}

.tsd-spacer[b-a55drcgi9d] {
    flex: 1 1 auto;
}

/* ---------- manage (EntityDocumentList) ---------- */
/* The grid sets its own min-height of 400px; the wrapper scrolls if the host is shorter. */
.tsd-manage[b-a55drcgi9d] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 12px 16px;
}

/* ---------- busy shade ---------- */
.tsd-busy[b-a55drcgi9d] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, .6);
    color: var(--tsd-muted);
    font-size: 12.5px;
    z-index: 5;
}
/* /Components/Pages/StaticComponent/CalcInfo.razor.rz.scp.css */
.calc-info-icon[b-wle688mswh] {
    margin-left: 0.35rem;
    color: #6c8bab;
    cursor: help;
    font-size: 0.9em;
}

    .calc-info-icon:hover[b-wle688mswh] {
        color: #0d6efd;
    }
/* /Components/Pages/StaticComponent/CastingCostBreakdown.razor.rz.scp.css */
.ccb[b-cm74fd536u] {
    --ccb-accent: #1a8a86;
    --ccb-sec: 18px;
    --ccb-rowpad: 11px 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #1f2937;
    background: #f4f6f7;
    border-top: 3px solid var(--ccb-accent);
    padding: var(--ccb-sec);
}

.ccb-empty[b-cm74fd536u] {
    padding: 24px;
    text-align: center;
    color: #94a1ad;
}

.ccb-subtitle[b-cm74fd536u] {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 12px;
}

/* Headline metric cards */
.ccb-metrics[b-cm74fd536u] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.ccb-metric[b-cm74fd536u] {
    background: #f0f8ff;
    border: 1px solid #d6e6f5;
    border-radius: 6px;
    padding: 12px 18px;
}

.ccb-metric-label[b-cm74fd536u] {
    font-size: 11.5px;
    font-weight: 700;
    color: #334455;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ccb-metric-value[b-cm74fd536u] {
    font-size: 26px;
    font-weight: 700;
    color: #003366;
    font-variant-numeric: tabular-nums;
}

/* Input chips */
.ccb-chips[b-cm74fd536u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.ccb-chip[b-cm74fd536u] {
    background: #fff;
    border: 1px solid #e3e5e8;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.ccb-chip-label[b-cm74fd536u] {
    color: #7a828b;
}

.ccb-chip-value[b-cm74fd536u] {
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}

/* Rejects insight callout */
.ccb-callout[b-cm74fd536u] {
    background: #fff8f1;
    border: 1px solid #f4dcc2;
    border-left: 3px solid #dd6b20;
    border-radius: 5px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: #7c4a1e;
    margin-bottom: 6px;
}

.ccb-seclabel[b-cm74fd536u] {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 14px 0 6px;
}

/* Cost composition bar + legend */
.ccb-bar[b-cm74fd536u] {
    display: flex;
    height: 32px;
    border: 1px solid #e3e5e8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.ccb-bar-seg[b-cm74fd536u] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.ccb-legend[b-cm74fd536u] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 8px;
}

.ccb-legend-item[b-cm74fd536u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    min-width: 190px;
}

.ccb-legend-value[b-cm74fd536u] {
    font-weight: 700;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ccb-legend-pct[b-cm74fd536u] {
    color: #94a1ad;
    width: 46px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ccb-swatch[b-cm74fd536u] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex: 0 0 auto;
}

/* Worked breakdown accordion */
.ccb-stack[b-cm74fd536u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ccb-grid[b-cm74fd536u] {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(5, 84px) 18px;
    column-gap: 6px;
    align-items: center;
}

.ccb-colhead[b-cm74fd536u] {
    padding: 0 13px;
    font-size: 10.5px;
    font-weight: 700;
    color: #94a1ad;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ccb-colhead > div[b-cm74fd536u] {
    text-align: right;
}

.ccb-colhead > div:first-child[b-cm74fd536u] {
    text-align: left;
}

.ccb-card[b-cm74fd536u] {
    background: #fff;
    border: 1px solid #e6e8ea;
    border-radius: 6px;
    overflow: hidden;
}

.ccb-rowbtn[b-cm74fd536u] {
    width: 100%;
    background: none;
    border: none;
    padding: var(--ccb-rowpad);
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.ccb-rowbtn:hover[b-cm74fd536u] {
    background: #fafbfb;
}

.ccb-name[b-cm74fd536u] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ccb-name-text[b-cm74fd536u] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccb-pct[b-cm74fd536u] {
    font-size: 11px;
    color: #94a1ad;
}

.ccb-cell[b-cm74fd536u] {
    font-size: 12.5px;
    color: #475569;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ccb-perpart[b-cm74fd536u] {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ccb-chev[b-cm74fd536u] {
    color: var(--ccb-accent);
    font-size: 12px;
    justify-self: center;
}

/* Expanded component detail */
.ccb-rowdetail[b-cm74fd536u] {
    padding: 12px 14px 14px;
    border-top: 1px solid #eef0f1;
    background: #fbfcfc;
}

.ccb-formula[b-cm74fd536u] {
    font-size: 12.5px;
    color: #5b6572;
    line-height: 1.5;
    margin-bottom: 8px;
}

.ccb-table[b-cm74fd536u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.ccb-table th[b-cm74fd536u] {
    font-size: 11px;
    font-weight: 400;
    color: #94a1ad;
    border-bottom: 1px solid #e9ebed;
    text-align: right;
    padding: 3px 6px;
}

.ccb-table th:first-child[b-cm74fd536u] {
    text-align: left;
}

.ccb-table td[b-cm74fd536u] {
    padding: 4px 6px;
    border-bottom: 1px solid #f2f3f4;
}

.ccb-table td.num[b-cm74fd536u] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #334155;
}

.ccb-table td.num.muted[b-cm74fd536u] {
    color: #6b7280;
}

.ccb-table tfoot td[b-cm74fd536u] {
    background: #f0f8ff;
    font-weight: 700;
    color: #003366;
    border-bottom: none;
}

/* Totals row */
.ccb-totals[b-cm74fd536u] {
    padding: 12px;
    background: #f0f8ff;
    border: 1px solid #d6e6f5;
    border-radius: 6px;
    color: #003366;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ccb-totals > div[b-cm74fd536u] {
    text-align: right;
}

.ccb-totals > div:first-child[b-cm74fd536u] {
    text-align: left;
}

.ccb-footnote[b-cm74fd536u] {
    font-size: 11.5px;
    color: #9aa1a9;
    line-height: 1.5;
    margin-top: 12px;
}

@keyframes ccb-fade-b-cm74fd536u {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ccb-fade[b-cm74fd536u] {
    animation: ccb-fade-b-cm74fd536u .16s ease;
}

/* Cores — wide per-core working table */
.ccb-tablewrap[b-cm74fd536u] {
    overflow-x: auto;
}

.ccb-coretable[b-cm74fd536u] {
    min-width: 860px;
    font-size: 11.5px;
}

.ccb-coretable th[b-cm74fd536u],
.ccb-coretable td[b-cm74fd536u] {
    padding: 3px 5px;
    white-space: nowrap;
}

.ccb-coretable th[b-cm74fd536u] {
    line-height: 1.25;
    white-space: normal;
    vertical-align: bottom;
    max-width: 72px;
}

.ccb-coretable .ccb-sep[b-cm74fd536u] {
    border-left: 1px solid #e3e5e8;
}

.ccb-inlinepct[b-cm74fd536u] {
    color: #94a1ad;
}
/* /Components/Pages/StaticComponent/CheckBoxSelector.razor.rz.scp.css */
/* ============================================
   CheckBoxSelector - segmented sliding toggle
   ============================================ */

.cbs-root[b-fuua6qbuw9] {
    display: inline-block;
    -webkit-tap-highlight-color: transparent;
}

.cbs-track[b-fuua6qbuw9] {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    padding: 2px;
    border-radius: 999px;
    /* Light recessed track that reads on a white form; the raised white thumb is the highlight. */
    background: #e9edf2;
    border: 1px solid #ced4da;
    user-select: none;
}

/* Sliding highlight - a raised white pill that snaps to the active half. */
.cbs-thumb[b-fuua6qbuw9] {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.cbs-thumb-left[b-fuua6qbuw9] {
    transform: translateX(0);
}

.cbs-thumb-right[b-fuua6qbuw9] {
    transform: translateX(100%);
}

.cbs-option[b-fuua6qbuw9] {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    line-height: 1.25;
    color: #6c757d;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Active option pops: darker/bolder by default, or coloured via CssClassFor0/1. */
.cbs-option.cbs-active[b-fuua6qbuw9] {
    color: #212529;
    font-weight: 600;
}

/* ============================================
   SIZES — tuned to sit at DevExpress editor height
   ============================================ */

.cbs-sm .cbs-option[b-fuua6qbuw9] {
    padding: 2px 10px;
    font-size: 0.75rem;
}

.cbs-md .cbs-option[b-fuua6qbuw9] {
    padding: 4px 14px;
    font-size: 0.8125rem;
}

.cbs-lg .cbs-option[b-fuua6qbuw9] {
    padding: 6px 18px;
    font-size: 0.9375rem;
}

/* ============================================
   DISABLED
   ============================================ */

.cbs-disabled[b-fuua6qbuw9] {
    opacity: 0.55;
}

    .cbs-disabled .cbs-option[b-fuua6qbuw9] {
        cursor: not-allowed;
    }
/* /Components/Pages/StaticComponent/StatusButtonWidget.razor.rz.scp.css */
/* ============================================
   StatusButtonWidget - issue count chip
   Pill geometry and the muted tint/solid-text pairing follow the pills in TitleWidget
   and the track in CheckBoxSelector, so the chip reads as part of the same set.
   ============================================ */

.sbw[b-okrnd1a52e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

.sbw-icon[b-okrnd1a52e] {
    font-size: 0.8125rem;
    line-height: 1;
}

.sbw-counts[b-okrnd1a52e] {
    letter-spacing: 0.02em;
}

/* ============================================
   TONES - tint background, alert-strength text
   ============================================ */

.sbw-danger[b-okrnd1a52e] {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.12);
    border-color: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.35);
    color: #842029;
}

.sbw-warning[b-okrnd1a52e] {
    background: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.18);
    border-color: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.45);
    color: #664d03;
}

.sbw-info[b-okrnd1a52e] {
    background: rgba(var(--bs-info-rgb, 13, 202, 240), 0.12);
    border-color: rgba(var(--bs-info-rgb, 13, 202, 240), 0.35);
    color: #055160;
}

/* Clean state. Deliberately the quietest chip on the strip - it confirms a check ran,
   it is not an action. */
.sbw-ok[b-okrnd1a52e] {
    padding: 0.2rem 0.45rem;
    background: rgba(var(--bs-success-rgb, 25, 135, 84), 0.10);
    border-color: rgba(var(--bs-success-rgb, 25, 135, 84), 0.28);
    color: #0f5132;
}

/* ============================================
   INTERACTION - only the counted chip is clickable
   ============================================ */

.sbw-btn[b-okrnd1a52e] {
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.02s ease;
}

    .sbw-btn:hover[b-okrnd1a52e] {
        filter: brightness(0.95);
    }

    .sbw-btn:active[b-okrnd1a52e] {
        transform: translateY(1px);
    }

    .sbw-btn:focus-visible[b-okrnd1a52e] {
        outline: 2px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.5);
        outline-offset: 2px;
    }
/* /Components/Pages/StaticComponent/WelcomeCard.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────
   WelcomeCard — scoped styles
   Targets DevExpress Office White theme
   ─────────────────────────────────────────────────────────────── */

.welcome-card[b-bpey0hkx7n] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 260px;
    height: 170px;
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    transition:
        box-shadow 160ms ease,
        transform 160ms ease,
        border-color 160ms ease;
}

.welcome-card:hover[b-bpey0hkx7n],
.welcome-card:focus-visible[b-bpey0hkx7n] {
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(17, 24, 39, 0.08),
        0 2px 4px rgba(17, 24, 39, 0.06);
    border-color: #D1D5DB;
    text-decoration: none;
}

.welcome-card:focus-visible[b-bpey0hkx7n] {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

.welcome-card-icon[b-bpey0hkx7n] {
    line-height: 1;
}

.welcome-card-text[b-bpey0hkx7n] {
    font-size: 20px;
    font-weight: 600;
    color: #1E3A5F;
    letter-spacing: -0.2px;
    text-align: center;
}

/* ── Action pill ───────────────────────────────────────────── */

.welcome-card-pill[b-bpey0hkx7n] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.welcome-card-pill__dot[b-bpey0hkx7n] {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.welcome-card-pill__count[b-bpey0hkx7n] {
    font-weight: 700;
}

.welcome-card-pill__descriptor[b-bpey0hkx7n] {
    font-weight: 500;
}

/* Severity · Info */
.welcome-card-pill--info[b-bpey0hkx7n] {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}
.welcome-card-pill--info .welcome-card-pill__dot[b-bpey0hkx7n] { background: #2563EB; }

/* Severity · Warning */
.welcome-card-pill--warning[b-bpey0hkx7n] {
    background: #FFFBEB;
    color: #B45309;
    border-color: #FDE68A;
}
.welcome-card-pill--warning .welcome-card-pill__dot[b-bpey0hkx7n] { background: #D97706; }

/* Severity · Critical */
.welcome-card-pill--critical[b-bpey0hkx7n] {
    background: #FEF2F2;
    color: #991B1B;
    border-color: #FECACA;
}
.welcome-card-pill--critical .welcome-card-pill__dot[b-bpey0hkx7n] { background: #DC2626; }

/* Severity · None (fallback — typically not rendered) */
.welcome-card-pill--none[b-bpey0hkx7n] {
    background: #ECFDF5;
    color: #047857;
    border-color: #A7F3D0;
}
.welcome-card-pill--none .welcome-card-pill__dot[b-bpey0hkx7n] { background: #059669; }

/* ── Reduced-motion / RTL ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .welcome-card[b-bpey0hkx7n] {
        transition: none;
    }
    .welcome-card:hover[b-bpey0hkx7n],
    .welcome-card:focus-visible[b-bpey0hkx7n] {
        transform: none;
    }
}

[dir="rtl"] .welcome-card-pill[b-bpey0hkx7n] {
    right: auto;
    left: 10px;
}