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

.login-card[b-b24f2ocj1c] {
    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-b24f2ocj1c] {
    max-height: 44px;
    margin-bottom: 1.5rem;
}

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

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

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

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

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

    .login-card[b-b24f2ocj1c]  .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-b24f2ocj1c]  .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-b24f2ocj1c]  .form-group.form-check .form-check-input {
        width: 1em;
        height: 1em;
        flex-shrink: 0;
        margin: 0;
    }

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

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

.login-card[b-b24f2ocj1c]  .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-b24f2ocj1c]  .helper-link {
    display: block;
    margin-top: 1rem;
    font-size: 0.85rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-10s9uia07w] {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--vml-gray-light);
    min-height: 100vh;
}

main[b-10s9uia07w] {
    flex: 1;
}

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

.top-row[b-10s9uia07w] {
    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-10s9uia07w]  form {
        margin: 0;
    }

    .top-row[b-10s9uia07w]  a, .top-row[b-10s9uia07w]  .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-10s9uia07w]  a:hover, .top-row[b-10s9uia07w]  .btn-link:hover {
        text-decoration: underline;
    }

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

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

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

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

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

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

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

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

#blazor-error-ui[b-10s9uia07w] {
    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-10s9uia07w] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-wgknku7o2t] {
    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-wgknku7o2t] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

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

.bi[b-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    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-wgknku7o2t] {
    margin: 0;
}

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

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

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

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

    .nav-item[b-wgknku7o2t]  .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-wgknku7o2t]  a.active {
    background-color: var(--vml-blue);
    color: white;
}

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

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

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

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-81i3kruqr5],
.components-reconnect-repeated-attempt-visible[b-81i3kruqr5],
.components-reconnect-failed-visible[b-81i3kruqr5],
.components-pause-visible[b-81i3kruqr5],
.components-resume-failed-visible[b-81i3kruqr5],
.components-rejoining-animation[b-81i3kruqr5] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-81i3kruqr5 {
    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-08wp09dhe4] {
    color: var(--vml-black);
}

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

.status-message[b-08wp09dhe4] {
    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-08wp09dhe4] {
    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-08wp09dhe4] {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--vml-white);
    margin-bottom: 1.5rem;
}

    .users-table th[b-08wp09dhe4], .users-table td[b-08wp09dhe4] {
        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-08wp09dhe4] {
        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-08wp09dhe4] {
        color: var(--vml-gray-dark);
        font-weight: 600;
        border-bottom: 2px solid var(--vml-gray-light);
    }

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

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

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

.row-actions .btn-action[b-08wp09dhe4] {
    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-08wp09dhe4] {
        text-decoration: underline;
    }

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

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

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

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

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

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

        .form-row.form-check label[b-08wp09dhe4] {
            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-08wp09dhe4] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .users-table td.user-name-cell input.form-control[b-08wp09dhe4] {
        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-08wp09dhe4] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .users-table td.user-edit-actions input.form-control[b-08wp09dhe4] {
        /* 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-08wp09dhe4] {
        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-7c0f7jqh3d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.85rem;
    margin: 0.5rem 0 1.5rem;
}

.cos-tile[b-7c0f7jqh3d] {
    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-7c0f7jqh3d] {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
    transform: translateY(-1px);
}

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

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

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

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

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

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

.cos-notices li + li[b-7c0f7jqh3d] {
    margin-top: 0.35rem;
}
/* /Components/Pages/Cosmetics/FixturePreview.razor.rz.scp.css */
.fx-grid[b-gpbljadhvm] {
    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-gpbljadhvm] {
    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-w3jvrxyp2e] {
    margin: 0 0 1.5rem;
    padding-left: 1.1rem;
    max-height: 20rem;
    overflow-y: auto;
    line-height: 1.6;
}

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

.cos-notes li + li[b-w3jvrxyp2e] {
    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-w3jvrxyp2e] {
    font-weight: 600;
    color: #2c7a5a;
}

.cos-nocustomer[b-w3jvrxyp2e] {
    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-w3jvrxyp2e] { font-variant-numeric: tabular-nums; }
/* /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-ip42yrff7d] {
    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-ip42yrff7d] {
    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-uw1iaupdjg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin: 0 0 1.2rem;
}

.cos-check[b-uw1iaupdjg] {
    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-uw1iaupdjg] {
    border-color: var(--vml-blue);
}

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

.cos-check-sub[b-uw1iaupdjg] {
    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-bsryvrj258] {
    text-decoration: none;
    cursor: pointer;
}

a.cos-fixable:hover[b-bsryvrj258] {
    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-5273z8nr3w] {
    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-5273z8nr3w] {
    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-icun7h0j9q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.cos-fixture[b-icun7h0j9q] {
    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-icun7h0j9q] { border-color: #008FCA; }

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

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

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

.cos-rail[b-icun7h0j9q] {
    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-icun7h0j9q] { color: #6c757d; }

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

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

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

.cos-here li[b-icun7h0j9q] {
    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-icun7h0j9q] { font-weight: 600; }
.cos-here-sku[b-icun7h0j9q] { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #495057; }
.cos-here-actions[b-icun7h0j9q] { margin-left: auto; display: flex; gap: 6px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

.cos-shelf[b-icun7h0j9q] { margin: 22px 0; }
.cos-shelf h3[b-icun7h0j9q] { margin: 0 0 8px; font-size: 15px; }

/* 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-icun7h0j9q] {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
}

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

.cos-bay-label[b-icun7h0j9q] {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cos-grid[b-icun7h0j9q] {
    border-collapse: collapse;
    table-layout: fixed;
}

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

.cos-vlabel[b-icun7h0j9q] {
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    text-align: right;
    padding: 0 8px 0 0;
    white-space: nowrap;
    vertical-align: middle;
    background: #f1f3f5;
    border-right: 2px solid #dee2e6;
}

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

/* Every vertical band gets a hairline under it so the eye can tell them apart. */
.cos-row-wide[b-icun7h0j9q] { border-bottom: 1px solid #e9ecef; }

.cos-cell[b-icun7h0j9q] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    width: 100%;
    min-width: 96px;
    min-height: 34px;
    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-icun7h0j9q] { min-width: 130px; }

.cos-cell-empty[b-icun7h0j9q] {
    color: #adb5bd;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

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

.cos-cell-free[b-icun7h0j9q]   { background: #fff; }
.cos-cell-free:hover[b-icun7h0j9q] { 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-icun7h0j9q]    { background: #008FCA; color: #fff; border-color: #007ab0; }
.cos-cell-keep[b-icun7h0j9q]   { background: #008FCA; color: #fff; border-color: #007ab0; }
.cos-cell-move[b-icun7h0j9q]   { background: #FFEA00; color: #212529; border-color: #d9c700; }
.cos-cell-delete[b-icun7h0j9q] { background: #DC143C; color: #fff; border-color: #b81032; }

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

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

.cos-cell:focus-visible[b-icun7h0j9q] { outline: 2px solid #212529; outline-offset: 1px; }
/* /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-xvyehmcx4y] {
    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-mj5qbxp00s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0.75rem 0 1.5rem;
    padding: 0;
}

.wiz li[b-mj5qbxp00s] {
    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-mj5qbxp00s] {
    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-mj5qbxp00s] {
    border-color: var(--vml-blue);
    color: var(--vml-black);
    font-weight: 600;
}

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

.wiz-done .wiz-num[b-mj5qbxp00s] {
    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-mj5qbxp00s] {
    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-pudvsyw6vk] {
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
}

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

.dashboard-grid[b-pudvsyw6vk] {
    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-pudvsyw6vk] {
        grid-template-columns: 1fr;
    }
}

.dash-panel[b-pudvsyw6vk] {
    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-pudvsyw6vk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

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

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

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

.dash-refresh[b-pudvsyw6vk] {
    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-pudvsyw6vk] {
        border-color: var(--vml-blue);
    }

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

.dash-subhead[b-pudvsyw6vk] {
    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-pudvsyw6vk] {
        margin-top: 0;
    }

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

    .dash-checks li[b-pudvsyw6vk] {
        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-pudvsyw6vk] {
            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-pudvsyw6vk] {
    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-pudvsyw6vk] {
    background-color: #1e8e3e;
}

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

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

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

.dash-check-detail[b-pudvsyw6vk] {
    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-pudvsyw6vk] {
    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-pudvsyw6vk] {
    grid-column: 2 / -1;
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

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

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

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

.dash-tile[b-pudvsyw6vk] {
    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-pudvsyw6vk] {
    border-color: var(--vml-blue);
    text-decoration: none;
}

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

.dash-tile-static .dash-tile-value[b-pudvsyw6vk] {
    /* 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-pudvsyw6vk] {
    font-size: 0.85rem;
    font-weight: 600;
}

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