/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-page[b-35ooxx0zuf] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--vml-gray-light);
    padding: 1rem;
}

.login-card[b-35ooxx0zuf] {
    background-color: var(--vml-white);
    border-top: 4px solid var(--vml-blue);
    border-radius: 6px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.login-logo[b-35ooxx0zuf] {
    max-height: 44px;
    margin-bottom: 1.5rem;
}

.login-card[b-35ooxx0zuf]  h1 {
    font-size: 1.35rem;
    color: var(--vml-black);
    margin-bottom: 0.25rem;
}

.login-card[b-35ooxx0zuf]  p.subtitle {
    color: var(--vml-gray-dark);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.login-card[b-35ooxx0zuf]  .form-group {
    text-align: left;
    margin-bottom: 1rem;
}

.login-card[b-35ooxx0zuf]  label {
    display: block;
    font-size: 0.85rem;
    color: var(--vml-gray-dark);
    margin-bottom: 0.25rem;
}

.login-card[b-35ooxx0zuf]  .form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

    .login-card[b-35ooxx0zuf]  .form-control:focus {
        outline: none;
        border-color: var(--vml-blue);
        box-shadow: 0 0 0 0.15rem rgba(0, 142, 194, 0.25);
    }

.login-card[b-35ooxx0zuf]  .form-group.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Bootstrap's .form-check indents by 1.5em to make room for an absolutely positioned input.
       We lay the row out with flex instead, so that indent just pushed the checkbox 24px right
       of the left edge the inputs and the submit button share. */
    padding-left: 0;
}

    .login-card[b-35ooxx0zuf]  .form-group.form-check .form-check-input {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        margin: 0;
    }

    .login-card[b-35ooxx0zuf]  .form-group.form-check .form-check-label {
        display: inline;
        margin: 0;
        font-size: 0.85rem;
    }

.login-card[b-35ooxx0zuf]  .btn-submit {
    width: 100%;
    margin-top: 0.5rem;
}

.login-card[b-35ooxx0zuf]  .validation-errors {
    color: #c0392b;
    background-color: #fdecea;
    border: 1px solid #f5c6c1;
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    text-align: left;
}

.login-card[b-35ooxx0zuf]  .helper-link {
    display: block;
    margin-top: 1rem;
    font-size: 0.85rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-m44pathjoj] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--vml-gray-light);
    min-height: 100vh;
}

main[b-m44pathjoj] {
    flex: 1;
    /* A flex item defaults to min-width:auto, so it refuses to shrink below its widest content —
       which means one wide page stretches the whole layout sideways and squeezes the sidebar
       instead of scrolling inside itself. The cosmetics placement grid is wide enough to do that.
       Letting main shrink hands the overflow back to whichever container owns the scroll. */
    min-width: 0;
}

.sidebar[b-m44pathjoj] {
    background-color: var(--vml-black);
}

.top-row[b-m44pathjoj] {
    background-color: var(--vml-white);
    border-bottom: 1px solid var(--vml-gray-light);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-m44pathjoj]  form {
        margin: 0;
    }

    .top-row[b-m44pathjoj]  a, .top-row[b-m44pathjoj]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        background: none;
        border: none;
        padding: 0;
        font-size: inherit;
        cursor: pointer;
    }

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

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

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

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

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

    .sidebar[b-m44pathjoj] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width .15s ease;
    }

}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-m44pathjoj] {
        transition: none;
    }

    .top-row[b-m44pathjoj] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

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

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

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

    #blazor-error-ui .dismiss[b-m44pathjoj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Set by wwwroot/js/nav-state.js. The rail keeps navigation usable while handing ~190px back to
   the page — the difference between seeing a second bay on the placement grid and not. */
@media (min-width: 641px) {
    html.nav-collapsed .sidebar[b-m44pathjoj] {
        width: 60px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-mlvyuvf2sn] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

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

.top-row[b-mlvyuvf2sn] {
    min-height: 3.5rem;
    background-color: var(--vml-black);
}

.navbar-brand[b-mlvyuvf2sn] {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.brand-logo[b-mlvyuvf2sn] {
    height: 1.75rem;
}

.bi[b-mlvyuvf2sn] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-calculator-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calculator-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm2 .5v2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5m0 4v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M4.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 12.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5M7.5 6a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM7 9.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m.5 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM10 6.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5m.5 2.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
}

.bi-folder-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-folder-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3m-8.322.12q.322-.119.684-.12h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981z'/%3E%3C/svg%3E");
}

/* Stacked sheets - reads as a pile of stock/substrate, which is what Materials are. */
.bi-layers-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-layers-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.765 1.559a.5.5 0 0 1 .47 0l7.5 4a.5.5 0 0 1 0 .882l-7.5 4a.5.5 0 0 1-.47 0l-7.5-4a.5.5 0 0 1 0-.882l7.5-4z'/%3E%3Cpath d='m2.125 8.567-1.86.992a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882l-1.86-.992-5.17 2.756a1.5 1.5 0 0 1-1.41 0L2.125 8.567z'/%3E%3C/svg%3E");
}

/* A filled grid - bays across, shelves down, which is exactly what a cosmetic fixture is. */
.bi-grid-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-grid-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5z'/%3E%3C/svg%3E");
}

.bi-building-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-building-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h3v-3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V16h3a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1zm1 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-6 3A.5.5 0 0 1 4.5 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0A.5.5 0 0 1 7.5 5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-6 3A.5.5 0 0 1 4.5 8h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0A.5.5 0 0 1 7.5 8h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-6 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm9 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-file-earmark-code-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-code-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.646 7.646a.5.5 0 1 1 .708.708L5.707 10l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zm2.708 0 2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 10 8.646 8.354a.5.5 0 1 1 .708-.708'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

.bi-box-arrow-right-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z'/%3E%3Cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z'/%3E%3C/svg%3E");
}

.nav-item form[b-mlvyuvf2sn] {
    margin: 0;
}

.logout-link[b-mlvyuvf2sn] {
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

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

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

    .nav-item:last-of-type[b-mlvyuvf2sn] {
        padding-bottom: 1rem;
    }

    .nav-item[b-mlvyuvf2sn]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-mlvyuvf2sn]  a.active {
    background-color: var(--vml-blue);
    color: white;
}

.nav-item[b-mlvyuvf2sn]  .nav-link:hover {
    background-color: var(--vml-gray-dark);
    color: white;
}

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

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

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

    .nav-scrollable[b-mlvyuvf2sn] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* ---- collapse toggle and the icon rail ---- */

.nav-brand-row[b-mlvyuvf2sn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.nav-toggle[b-mlvyuvf2sn] {
    display: none;                 /* only meaningful on the wide layout, where a sidebar exists */
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 3px;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    line-height: 1;
    padding: .25rem .45rem;
    font-size: 1rem;
}

.nav-toggle:hover[b-mlvyuvf2sn] { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-toggle:focus-visible[b-mlvyuvf2sn] { outline: 2px solid #fff; outline-offset: 1px; }

@media (min-width: 641px) {
    .nav-toggle[b-mlvyuvf2sn] { display: inline-flex; align-items: center; }
}


/* ---- the collapsed rail ----
   Keyed off <html>, which nav-state.js stamps before the first paint. Scoped CSS appends this
   component's attribute to the last part of each selector, so these still only touch this menu. */

.nav-toggle-closed[b-mlvyuvf2sn] { display: none; }

html.nav-collapsed .nav-toggle-open[b-mlvyuvf2sn] { display: none; }
html.nav-collapsed .nav-toggle-closed[b-mlvyuvf2sn] { display: inline; }

@media (min-width: 641px) {
    /* Labels go, icons stay and centre up. */
    html.nav-collapsed .nav-text[b-mlvyuvf2sn] { display: none; }

    html.nav-collapsed .nav-item[b-mlvyuvf2sn] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.nav-collapsed .nav-item[b-mlvyuvf2sn]  .nav-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    html.nav-collapsed .bi[b-mlvyuvf2sn] { margin-right: 0; }

    /* The wordmark doesn't survive 60px. The toggle stays, centred — it's the way back out. */
    html.nav-collapsed .navbar-brand[b-mlvyuvf2sn] { display: none; }
    html.nav-collapsed .nav-brand-row[b-mlvyuvf2sn] { justify-content: center; }
}

/* Cosmetics: the makeup brush from Misc/Gemini_Brush.jpeg.

   A PNG rather than an SVG, and the only raster icon in this menu, because the source is a
   raster and tracing it would have meant redrawing it — which is what produced a microphone
   three times over. 64px covers a 20px icon at 3x device pixels; the artwork was cropped to its
   bounds and its brightness turned into alpha, so the JPEG background is gone and the edges keep
   their anti-aliasing. Regenerate with scratchpad/iconize if the source is ever replaced. */
.bi-cosmetics-nav-menu[b-mlvyuvf2sn] {
    background-image: url("data:image/png;base64,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");
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ojr8dxm9ws],
.components-reconnect-repeated-attempt-visible[b-ojr8dxm9ws],
.components-reconnect-failed-visible[b-ojr8dxm9ws],
.components-pause-visible[b-ojr8dxm9ws],
.components-resume-failed-visible[b-ojr8dxm9ws],
.components-rejoining-animation[b-ojr8dxm9ws] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-ojr8dxm9ws {
    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/Admin/Users.razor.rz.scp.css */
h1[b-vn0c88bjr8] {
    color: var(--vml-black);
}

h2[b-vn0c88bjr8] {
    color: var(--vml-black);
    font-size: 1.2rem;
    margin-top: 2rem;
}

.status-message[b-vn0c88bjr8] {
    background-color: #eaf6ec;
    border: 1px solid #b9e0bf;
    color: #2f6d3a;
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.error-message[b-vn0c88bjr8] {
    background-color: #fdecea;
    border: 1px solid #f5c6c1;
    color: #c0392b;
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.users-table[b-vn0c88bjr8] {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--vml-white);
    margin-bottom: 1.5rem;
}

    .users-table th[b-vn0c88bjr8], .users-table td[b-vn0c88bjr8] {
        text-align: left;
        padding: 0.6rem 0.9rem;
        border-bottom: 1px solid var(--vml-gray-light);
        font-size: 0.9rem;
        /* Without this, cells baseline-align and rows of differing height (the edit row's
           stacked password box) leave the shorter cells sitting at odd heights. */
        vertical-align: middle;
    }

    .users-table td input.form-control[b-vn0c88bjr8] {
        width: 100%;
        min-width: 8rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 0.9rem;
    }

    .users-table th[b-vn0c88bjr8] {
        color: var(--vml-gray-dark);
        font-weight: 600;
        border-bottom: 2px solid var(--vml-gray-light);
    }

.badge[b-vn0c88bjr8] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-on[b-vn0c88bjr8] {
    background-color: rgba(0, 142, 194, 0.12);
    color: var(--vml-blue);
}

.badge-off[b-vn0c88bjr8] {
    background-color: var(--vml-gray-light);
    color: var(--vml-gray-dark);
}

.row-actions .btn-action[b-vn0c88bjr8] {
    background: none;
    border: none;
    color: var(--vml-blue);
    cursor: pointer;
    padding: 0;
    margin-right: 0.9rem;
    font-size: 0.85rem;
}

    .row-actions .btn-action:hover[b-vn0c88bjr8] {
        text-decoration: underline;
    }

    .row-actions .btn-action:disabled[b-vn0c88bjr8] {
        color: var(--vml-gray-dark);
        cursor: not-allowed;
        text-decoration: none;
    }

.form-row[b-vn0c88bjr8] {
    max-width: 380px;
    margin-bottom: 0.9rem;
}

    .form-row label[b-vn0c88bjr8] {
        display: block;
        font-size: 0.85rem;
        color: var(--vml-gray-dark);
        margin-bottom: 0.25rem;
    }

    .form-row .form-control[b-vn0c88bjr8] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1rem;
    }

    .form-row.form-check[b-vn0c88bjr8] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .form-row.form-check .form-check-input[b-vn0c88bjr8] {
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            margin: 0;
        }

        .form-row.form-check label[b-vn0c88bjr8] {
            margin: 0;
        }

/* First/Last side by side in the edit row, sharing the Name column.

   Selectors have to include `.users-table td`: the generic
   `.users-table td input.form-control` rule above is (0,2,2) specificity and would otherwise win,
   holding both inputs at width:100% with an 8rem floor so they spilled over into Email.
   flex + min-width:0 lets them shrink to whatever the column actually is. */
/* The flex row lives on an inner div, NOT the td. `display: flex` on a td replaces
   `display: table-cell`, so the cell drops out of the table's own alignment and its contents
   ride up to the top while every sibling cell stays centred. */
    .users-table td.user-name-cell .user-name-fields[b-vn0c88bjr8] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .users-table td.user-name-cell input.form-control[b-vn0c88bjr8] {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

/* The "New password" column used to sit in the table permanently, empty except on the row being
   edited. The input moved in here beside Save/Cancel instead, stacked above the buttons.
   Selector includes `.users-table td` to outrank the generic `.users-table td input.form-control`
   rule above, which would otherwise force min-width:8rem and widen the actions column. */
/* Inline rather than stacked: stacking made this the tallest cell, which both inflated the edit
   row and left the password box sitting above the other inputs' centre line. Flex lives on an
   inner div for the same reason as the name cell - flex on a td stops it being a table-cell. */
    .users-table td.user-edit-actions .user-edit-actions-row[b-vn0c88bjr8] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .users-table td.user-edit-actions input.form-control[b-vn0c88bjr8] {
        /* 13.5rem: the "New password (blank = keep)" placeholder measures 13.21rem in this
           font, and anything narrower clips the hint that leaving it empty is safe. */
        width: 13.5rem;
        min-width: 0;
        margin: 0;
    }

    .users-table td.user-edit-actions .user-edit-buttons[b-vn0c88bjr8] {
        white-space: nowrap;
    }
/* /Components/Pages/Cosmetics/Cosmetics.razor.rz.scp.css */
/* Same shape as the dashboard tiles on Home, kept scoped rather than shared: three tiles is not
   yet a pattern, and lifting them into estimating.css would put cosmetics styles in a file named
   for estimating. Worth extracting if a third page wants them. */

.cos-tiles[b-zvsvce929u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.85rem;
    margin: 0.5rem 0 1.5rem;
}

.cos-tile[b-zvsvce929u] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background-color: var(--vml-white);
    border: 1px solid var(--vml-gray-light);
    border-top: 3px solid var(--vml-blue);
    border-radius: 6px;
    padding: 0.9rem 1rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}

a.cos-tile:hover[b-zvsvce929u] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    transform: translateY(-1px);
}

.cos-tile-static[b-zvsvce929u] {
    border-top-color: var(--vml-gray-light);
    opacity: 0.7;
}

.cos-tile-value[b-zvsvce929u] {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--vml-black);
}

.cos-tile-static .cos-tile-value[b-zvsvce929u] {
    color: var(--vml-gray-dark);
}

.cos-tile-label[b-zvsvce929u] {
    font-weight: 600;
    font-size: 0.95rem;
}

.cos-tile-sub[b-zvsvce929u] {
    font-size: 0.8rem;
    color: var(--vml-gray-dark);
}

.cos-notices ul[b-zvsvce929u] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

.cos-notices li + li[b-zvsvce929u] {
    margin-top: 0.35rem;
}
/* /Components/Pages/Cosmetics/FixturePreview.razor.rz.scp.css */
.fx-grid[b-ootu83u5aw] {
    display: inline-grid;
    gap: 1px;
    padding: 2px;
    background-color: var(--vml-gray-light);
    border: 1px solid var(--vml-gray-light);
    border-radius: 2px;
    vertical-align: middle;
}

.fx-cell[b-ootu83u5aw] {
    width: 9px;
    height: 6px;
    background-color: var(--vml-white);
}
/* /Components/Pages/Cosmetics/Import.razor.rz.scp.css */
/* Run detail — potentially a couple of hundred lines, so it scrolls in place rather than pushing
   the summary tiles off the top of the page. */
.cos-list[b-tqos8b0dex] {
    margin: 0 0 1.5rem;
    padding-left: 1.1rem;
    max-height: 20rem;
    overflow-y: auto;
    line-height: 1.6;
}

.cos-notes ul[b-tqos8b0dex] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

.cos-notes li + li[b-tqos8b0dex] {
    margin-top: 0.35rem;
}

/* The brand list on the Promotions panel.
   Deliberately not using .badge here: Bootstrap defines it as white text with no background of its
   own, so on this page — which doesn't restyle it — anything wearing it rendered invisible. */
.cos-done[b-tqos8b0dex] {
    font-weight: 600;
    color: #2c7a5a;
}

.cos-nocustomer[b-tqos8b0dex] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 2px;
    background: #f8d7da;
    color: #842029;
    white-space: nowrap;
}

.cos-sources td.num[b-tqos8b0dex] { font-variant-numeric: tabular-nums; }
/* /Components/Pages/Cosmetics/LockedNotice.razor.rz.scp.css */
/* Deliberately not the error style — nothing has gone wrong, this is just how the promotion is. */
.cos-locked[b-t9d31yb782] {
    margin: 0 0 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid #d9c48a;
    border-left: 4px solid #b8912f;
    border-radius: 4px;
    background: #fdf8e8;
    color: #5b4708;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cos-locked strong[b-t9d31yb782] {
    margin-right: 0.35rem;
}
/* /Components/Pages/Cosmetics/MaterialMap.razor.rz.scp.css */
/* An unmapped name is the thing this page exists to remove, so it gets a left edge rather than
   being just another row. Deliberately quiet — on a first visit every row has one. */
.cos-unmapped td:first-child[b-ghev28h253] {
    box-shadow: inset 3px 0 0 0 #d9a441;
}

/* The two pickers sit inside a table cell, where the shared .form-row max-width would leave them
   narrower than the names they are being matched against. */
.est-page .est-table .form-row[b-ghev28h253] {
    max-width: none;
    margin-bottom: 0.25rem;
    min-width: 14rem;
}
/* /Components/Pages/Cosmetics/PartDetail.razor.rz.scp.css */
/* Checkbox rows — fixture assignment and the print flags. A wrapping row of labelled boxes rather
   than one .form-row each: they are short, related, and a column of them pushes the rest of a long
   form off the screen. */

.cos-checks[b-olf3ft2lbb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin: 0 0 1.2rem;
}

.cos-check[b-olf3ft2lbb] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background-color: var(--vml-white);
    border: 1px solid var(--vml-gray-light);
    border-radius: 4px;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.cos-check:hover[b-olf3ft2lbb] {
    border-color: var(--vml-blue);
}

.cos-check input[b-olf3ft2lbb] {
    width: 1em;
    height: 1em;
    margin: 0;
    flex-shrink: 0;
    align-self: center;
}

.cos-check-sub[b-olf3ft2lbb] {
    font-size: 0.78rem;
    color: var(--vml-gray-dark);
}
/* /Components/Pages/Cosmetics/Parts.razor.rz.scp.css */
/* The "unmatched" badge is a link, so it should look clickable — the shared .badge styling is
   built for static labels and gives no affordance at all. */
a.cos-fixable[b-mcmg8zdmdv] {
    text-decoration: none;
    cursor: pointer;
}

a.cos-fixable:hover[b-mcmg8zdmdv] {
    border-color: var(--vml-blue);
    color: var(--vml-blue);
    text-decoration: underline;
}
/* /Components/Pages/Cosmetics/PromotionFixtures.razor.rz.scp.css */
/* The shared .est-table rule stretches inputs to 100% with an 8rem floor, which is right for a
   text field and wrong for a count that never exceeds three digits — it forced the column wider
   than its header. */
.est-table input[type="number"][b-olkndsuzrk] {
    width: 4.5rem;
    min-width: 0;
    text-align: right;
    /* Bootstrap's .form-control is display:block. Narrowing a block leaves it pinned to the left
       of the cell, ignoring the column's text-align:right — which reads as the *heading* being
       shifted right, when really the box is the thing out of place. inline-block puts it back
       under the alignment the rest of the numeric columns use. */
    display: inline-block;
}

/* With that column narrow, a full-width table just spreads the slack across the store counts and
   leaves the numbers marooned from their headers. Capping it keeps the columns near each other;
   the table still shrinks normally on a narrow window. */
.est-table[b-olkndsuzrk] {
    max-width: 60rem;
}
/* /Components/Pages/Cosmetics/PromotionPlacement.razor.rz.scp.css */
/* Step 4. The colours match the WordPress wizard on purpose — the people using this have years of
   muscle memory for what yellow and red mean on a fixture. */

.cos-fixture-bar[b-htaqdufsjb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.cos-fixture[b-htaqdufsjb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
}

.cos-fixture:hover[b-htaqdufsjb] { border-color: #008FCA; }

.cos-fixture-on[b-htaqdufsjb] {
    border-color: #008FCA;
    box-shadow: inset 0 -3px 0 #008FCA;
}

.cos-fixture-name[b-htaqdufsjb] { font-weight: 600; }
.cos-fixture-meta[b-htaqdufsjb] { font-size: 12px; color: #6c757d; }

/* ---- the action rail ---- */

.cos-rail[b-htaqdufsjb] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    padding: 12px 14px;
    margin: 16px 0;
}

.cos-rail-idle[b-htaqdufsjb] { color: #6c757d; }

.cos-rail-mode[b-htaqdufsjb] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #7a5c00;
}

.cos-rail-head[b-htaqdufsjb] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.cos-here[b-htaqdufsjb] {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cos-here li[b-htaqdufsjb] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 3px;
}

.cos-here-part[b-htaqdufsjb] { font-weight: 600; }
.cos-here-sku[b-htaqdufsjb] { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #495057; }
.cos-here-actions[b-htaqdufsjb] { margin-left: auto; display: flex; gap: 6px; }

.cos-chip[b-htaqdufsjb] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 2px;
    white-space: nowrap;
}

.cos-chip-new[b-htaqdufsjb]    { background: #d6ecf5; color: #10556b; }
.cos-chip-keep[b-htaqdufsjb]   { background: #d6ecf5; color: #10556b; }
.cos-chip-move[b-htaqdufsjb]   { background: #fff4b8; color: #6b5600; }
.cos-chip-delete[b-htaqdufsjb] { background: #f8d7da; color: #842029; }

.cos-place-form[b-htaqdufsjb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.cos-place-form .form-row[b-htaqdufsjb] { margin: 0; }
.cos-part[b-htaqdufsjb] { flex: 1 1 280px; }
.cos-image[b-htaqdufsjb] { flex: 0 0 96px; }
.cos-image .form-control[b-htaqdufsjb] { width: 96px; }

.cos-region-boxes[b-htaqdufsjb] { display: flex; gap: 12px; align-items: center; }
.cos-region-boxes label[b-htaqdufsjb] { display: flex; align-items: center; gap: 4px; font-weight: 400; }

.cos-place-actions[b-htaqdufsjb] { display: flex; gap: 8px; align-items: center; }

/* ---- toolbar ---- */

/* Shrink-to-fit around the toolbar and the shelves, so the image counts sit at the right edge of
   the widest bay rather than the right edge of the monitor — on a 2K screen a two-bay fixture ends
   around two thirds across, and counts pinned to the far edge read as unrelated to it.
   max-content takes the widest child: the scrolling .cos-bays contributes its full unscrolled
   width, and the toolbar contributes its own, so this can never squeeze the toolbar narrower than
   it needs. max-width caps it at the canvas, which is the narrow-monitor case — there the fixture
   is wider than the screen and the counts land at the right edge as they do now. */
.cos-fixture-body[b-htaqdufsjb] {
    width: max-content;
    max-width: 100%;
}

.cos-toolbar[b-htaqdufsjb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.cos-filter[b-htaqdufsjb] { display: flex; align-items: center; gap: 12px; }
.cos-filter label[b-htaqdufsjb] { display: flex; align-items: center; gap: 4px; }
.cos-filter-label[b-htaqdufsjb] { color: #6c757d; font-size: 13px; }

.cos-counts[b-htaqdufsjb] { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #495057; }

.cos-overlaps[b-htaqdufsjb] {
    background: #fff8e6;
    border: 1px solid #ffe08a;
    border-radius: 3px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.cos-overlaps summary[b-htaqdufsjb] { cursor: pointer; font-weight: 600; color: #6b5600; }
.cos-overlaps ul[b-htaqdufsjb] { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }

/* ---- the fixture ---- */

.cos-shelf[b-htaqdufsjb] { margin: 22px 0; }
/* Bootstrap lightens headings to 500; the shelf number is the thing that tells you which grid
   you're reading, so it gets the weight back. */
.cos-shelf h3[b-htaqdufsjb] { margin: 0 0 8px; font-size: 15px; font-weight: 700; }

/* Bays sit side by side as they do in the store. Three bays is wider than most screens, so the
   row scrolls rather than squeezing the cells to nothing. */
.cos-bays[b-htaqdufsjb] {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.cos-bay[b-htaqdufsjb] { flex: 0 0 auto; }

/* Pinned like .cos-vlabel, for the same reason: scrolled halfway into a three-bay fixture you
   still need to know which bay you're in. inline-block is what makes it work — a full-width block
   has no room to slide inside its bay, so sticky would have no effect. It rides along at the left
   edge until its own bay ends, then the next bay's label takes over. */
.cos-bay-label[b-htaqdufsjb] {
    position: sticky;
    left: 0;
    z-index: 4;
    display: inline-block;
    font-size: 12px;
    /* Bold and dark like .cos-vnum, so "Shelf 1 · Bay 2" reads as one coordinate. Weight alone
       wasn't enough at this size: grey text plus uppercase letter-spacing reads lighter than the
       same weight set solid, so it takes the label color too. Size is what keeps it subordinate
       to the shelf heading. */
    font-weight: 700;
    color: #212529;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cos-grid[b-htaqdufsjb] {
    /* Separate, not collapse: position:sticky does not work on table cells under
       border-collapse:collapse, and the row-label column needs to stick. */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.cos-grid td[b-htaqdufsjb] { padding: 1px; }

/* The row label spans all three rows of a vertical band, so the number and the name each get a
   line instead of being crammed into one. */
/* Pinned to the left of its strip, so scrolling to the far bay doesn't take the vertical
   reference with it — the cells you're scrolling to are the ones that need it. Opaque background
   and a z-index above the cells, or they'd slide out from underneath. */
.cos-vlabel[b-htaqdufsjb] {
    position: sticky;
    left: 0;
    z-index: 3;
    font-size: 11px;
    color: #495057;
    text-align: right;
    padding: 0 8px 0 0;
    vertical-align: middle;
    background: #f1f3f5;
    border-right: 2px solid #dee2e6;
}

.cos-vnum[b-htaqdufsjb] {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    color: #212529;
}

.cos-vname[b-htaqdufsjb] {
    display: block;
    font-weight: 600;
    line-height: 1.15;
    /* "Right of Center" and friends wrap rather than forcing the label column wide. */
    max-width: 9ch;
    margin-left: auto;
}

.cos-row-full td[b-htaqdufsjb] { padding-bottom: 2px; }
.cos-row-wide td[b-htaqdufsjb] { padding-top: 0; }
.cos-gap[b-htaqdufsjb] { width: 12px; }

/* Every vertical band gets a hairline under it so the eye can tell them apart. On the cells rather
   than the row: a <tr> border isn't painted under border-collapse:separate. */
.cos-row-wide > td[b-htaqdufsjb],
.cos-row-wide > th[b-htaqdufsjb] { border-bottom: 1px solid #e9ecef; }

.cos-cell[b-htaqdufsjb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    width: 100%;
    /* Sized so a two-line slot name ("Right of Center") fits without clipping. */
    min-width: 104px;
    min-height: 46px;
    padding: 3px 5px;
    border: 1px solid #ced4da;
    border-radius: 2px;
    font: inherit;
    font-size: 11px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.cos-panels .cos-cell[b-htaqdufsjb] { min-width: 130px; }

/* An empty spot shows its number and what that number means. The name wraps rather than being
   clipped — "Right of Left and Left of Center" is the point of showing it at all. */
.cos-cell-num[b-htaqdufsjb] {
    font-size: 12px;
    font-weight: 700;
    color: #868e96;
    line-height: 1.1;
}

.cos-cell-empty[b-htaqdufsjb] {
    color: #adb5bd;
    font-size: 10px;
    line-height: 1.15;
    overflow: hidden;
}

.cos-cell-part[b-htaqdufsjb] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cos-cell-sku[b-htaqdufsjb] {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 10px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cos-cell-free[b-htaqdufsjb]   { background: #fff; }
.cos-cell-free:hover[b-htaqdufsjb] { background: #eef7fb; border-color: #008FCA; }

/* WordPress's palette: blue for a graphic that's staying put, green for one new to an Update,
   yellow for a move, red for a removal. */
.cos-cell-new[b-htaqdufsjb]    { background: #008FCA; color: #fff; border-color: #007ab0; }
.cos-cell-keep[b-htaqdufsjb]   { background: #008FCA; color: #fff; border-color: #007ab0; }
.cos-cell-move[b-htaqdufsjb]   { background: #FFEA00; color: #212529; border-color: #d9c700; }
.cos-cell-delete[b-htaqdufsjb] { background: #DC143C; color: #fff; border-color: #b81032; }

.cos-cell-on[b-htaqdufsjb] { outline: 3px solid #212529; outline-offset: -1px; }

.cos-cell-target[b-htaqdufsjb] { cursor: copy; }
.cos-cell-target:hover[b-htaqdufsjb] { outline: 2px dashed #7a5c00; outline-offset: -1px; }

.cos-cell:focus-visible[b-htaqdufsjb] { outline: 2px solid #212529; outline-offset: 1px; }

/* Shown only when the images placed disagree with what was expected — so it should read as a
   discrepancy worth checking, not as part of the running commentary. */
.cos-count-off[b-htaqdufsjb] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 2px;
    background: #fff4b8;
    color: #6b5600;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* /Components/Pages/Cosmetics/PromotionStores.razor.rz.scp.css */
/* Every problem with the file at once, scrolling in place rather than pushing the upload control
   off the screen — a bad file can produce hundreds. */
.cos-problems ul[b-azmc5eurs2] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    max-height: 22rem;
    overflow-y: auto;
    line-height: 1.6;
}
/* /Components/Pages/Cosmetics/WizardSteps.razor.rz.scp.css */
.wiz[b-xc9k4mykv2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0.75rem 0 1.5rem;
    padding: 0;
}

.wiz li[b-xc9k4mykv2] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background-color: var(--vml-white);
    border: 1px solid var(--vml-gray-light);
    border-radius: 4px;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    font-size: 0.85rem;
    color: var(--vml-gray-dark);
}

.wiz-num[b-xc9k4mykv2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--vml-gray-light);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.wiz-now[b-xc9k4mykv2] {
    border-color: var(--vml-blue);
    color: var(--vml-black);
    font-weight: 600;
}

.wiz-now .wiz-num[b-xc9k4mykv2] {
    background-color: var(--vml-blue);
    color: var(--vml-white);
}

.wiz-done .wiz-num[b-xc9k4mykv2] {
    background-color: #6aa84f;
    color: var(--vml-white);
}

/* Not built yet — visibly not part of the working path, but still shown so the whole shape of the
   process is legible while it's half-finished. */
.wiz-todo[b-xc9k4mykv2] {
    border-style: dashed;
    opacity: 0.55;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* The hero is just the mark now. The page title used to live here, but roles beyond
   Administrator are coming and the space is worth more to the dashboard. */
.dashboard-hero[b-5wrr8zew6r] {
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
}

.dashboard-logo[b-5wrr8zew6r] {
    max-height: 52px;
}

.dashboard-grid[b-5wrr8zew6r] {
    display: grid;
    /* System Health needs room for an error message; the tiles are happy narrower. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .dashboard-grid[b-5wrr8zew6r] {
        grid-template-columns: 1fr;
    }
}

.dash-panel[b-5wrr8zew6r] {
    background-color: var(--vml-white);
    border: 1px solid var(--vml-gray-light);
    border-top: 3px solid var(--vml-blue);
    border-radius: 6px;
    padding: 1rem 1.25rem 1.25rem;
}

.dash-panel-head[b-5wrr8zew6r] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

    .dash-panel-head h2[b-5wrr8zew6r] {
        font-size: 1.1rem;
        margin: 0;
        color: var(--vml-black);
    }

.dash-panel-tools[b-5wrr8zew6r] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.dash-checked[b-5wrr8zew6r] {
    font-size: 0.75rem;
    color: var(--vml-gray-dark);
    white-space: nowrap;
}

.dash-refresh[b-5wrr8zew6r] {
    background: none;
    border: 1px solid var(--vml-gray-light);
    border-radius: 4px;
    color: var(--vml-blue);
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}

    .dash-refresh:hover:not(:disabled)[b-5wrr8zew6r] {
        border-color: var(--vml-blue);
    }

    .dash-refresh:disabled[b-5wrr8zew6r] {
        color: var(--vml-gray-dark);
        cursor: default;
    }

.dash-subhead[b-5wrr8zew6r] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vml-gray-dark);
    margin: 0.9rem 0 0.35rem;
}

    .dash-subhead:first-of-type[b-5wrr8zew6r] {
        margin-top: 0;
    }

.dash-checks[b-5wrr8zew6r] {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .dash-checks li[b-5wrr8zew6r] {
        display: grid;
        grid-template-columns: 1.35rem minmax(6.5rem, auto) minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0;
        border-bottom: 1px solid var(--vml-gray-light);
    }

        .dash-checks li:last-child[b-5wrr8zew6r] {
            border-bottom: none;
        }

/* Status marker: a filled circle carrying a check, an X, or a question mark. Drawn in CSS
   rather than with an icon font, because this app doesn't ship one. */
.dash-status[b-5wrr8zew6r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    color: var(--vml-white);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.dash-status-ok[b-5wrr8zew6r] {
    background-color: #1e8e3e;
}

.dash-status-bad[b-5wrr8zew6r] {
    background-color: #c0392b;
}

.dash-status-unknown[b-5wrr8zew6r] {
    background-color: #9a9a9a;
}

.dash-check-name[b-5wrr8zew6r] {
    font-weight: 600;
    font-size: 0.9rem;
}

.dash-check-detail[b-5wrr8zew6r] {
    font-size: 0.8rem;
    color: var(--vml-gray-dark);
    /* Failure messages can be long; keep the row from stretching the panel. */
    overflow-wrap: anywhere;
}

.dash-check-ms[b-5wrr8zew6r] {
    font-size: 0.72rem;
    color: var(--vml-gray-dark);
    white-space: nowrap;
}

/* Sits on its own line under the check it belongs to, aligned with the name column rather than
   the status marker, so it reads as part of that row and not as a new one. */
.dash-check-more[b-5wrr8zew6r] {
    grid-column: 2 / -1;
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

.dash-banner[b-5wrr8zew6r] {
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
}

.dash-banner-bad[b-5wrr8zew6r] {
    color: #c0392b;
    background-color: #fdecea;
    border: 1px solid #f5c6c1;
}

.dash-tiles[b-5wrr8zew6r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.6rem;
}

.dash-tile[b-5wrr8zew6r] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background-color: #fafafa;
    border: 1px solid var(--vml-gray-light);
    border-radius: 5px;
    padding: 0.6rem 0.7rem;
    text-decoration: none;
    color: inherit;
}

a.dash-tile:hover[b-5wrr8zew6r] {
    border-color: var(--vml-blue);
    text-decoration: none;
}

.dash-tile-value[b-5wrr8zew6r] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--vml-blue);
}

.dash-tile-static .dash-tile-value[b-5wrr8zew6r] {
    /* Not a link and not a count — a total, so it reads as text rather than an action. */
    color: var(--vml-black);
}

.dash-tile-label[b-5wrr8zew6r] {
    font-size: 0.85rem;
    font-weight: 600;
}

.dash-tile-sub[b-5wrr8zew6r] {
    font-size: 0.72rem;
    color: var(--vml-gray-dark);
}