@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.mnccjmrpdk.bundle.scp.css';

/* /Blazor/Components/Profile/Profile.razor.rz.scp.css */
.user-profile[b-ui5zk5gqw2] {
    width: 100%;
}

/* The Log Off button uses RenderStyle.None so it renders without its own border, but the
   surrounding Bootstrap .list-group-item still draws its own default border - strip that too so
   the row is fully borderless. */
.user-profile .list-group-item[b-ui5zk5gqw2] {
    border: none;
}

    .user-profile[b-ui5zk5gqw2]::before {
        content: '';
        height: 6px;
        position: absolute;
        border-radius: 2px 2px 0 0;
        left: 0;
        right: 0;
        top: 0;
        /* Same brand gradient as .varibill-popup::after in varibill-styles.scss - keep in sync.
           Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e86a5b+0,bec055+50,7daeae+100 */
        background: #e86a5b; /* Old browsers */
        background: -moz-linear-gradient(left, #e86a5b 0%, #bec055 50%, #7daeae 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #e86a5b 0%, #bec055 50%, #7daeae 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #e86a5b 0%, #bec055 50%, #7daeae 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
/* /Blazor/Layout/MainLayout.razor.rz.scp.css */
.page[b-rt7p121ayr] {
    /* The page itself never scrolls - the DxDrawer content pane inside it does
       (.dxbl-drawer-content, varibill-styles.scss), so Navigation and the page/editor toolbar can be
       position: sticky *within that pane* rather than relying on the whole document scrolling. */
    height: 100vh;
    overflow: hidden;
}

[b-rt7p121ayr] .layout-header {
    /* sticky (not fixed) so it pins in view through scroll while sizing against its own flex box -
       Drawer wraps Navigation inside its own shrinking content column. */
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

[b-rt7p121ayr] .content {
    height: 100%;
    overflow: visible;
    /* Devtools showed an unexplained 17.6px padding-top on this element with no rule of ours setting
       it - most likely a generic ".content" class shipped in DevExpress's own bundled theme CSS
       coincidentally colliding with this class name, which our rule never overrode since it didn't
       touch padding at all. Zero it explicitly rather than relying on nothing conflicting with it. */
    padding: 0;
}
/* /Blazor/Pages/Login.razor.rz.scp.css */
.login-container[b-9kiaupzuou] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #f4f4f2;
}

.login-plane[b-9kiaupzuou] {
    position: absolute;
    background: linear-gradient(135deg, #ffffff, #dcdcda);
    transform: rotate(45deg);
    pointer-events: none;
}

.login-plane-1[b-9kiaupzuou] {
    width: 480px;
    height: 480px;
    top: -160px;
    left: -220px;
    background: linear-gradient(135deg, #ffffff, #e4e4e2);
    box-shadow: 40px 40px 60px rgba(0, 0, 0, 0.07);
}

.login-plane-2[b-9kiaupzuou] {
    width: 360px;
    height: 360px;
    bottom: -180px;
    right: -140px;
    box-shadow: -30px -30px 50px rgba(0, 0, 0, 0.06);
}

.login-plane-3[b-9kiaupzuou] {
    width: 220px;
    height: 220px;
    top: 15%;
    right: 8%;
    background: linear-gradient(135deg, #fbfbfa, #e9e9e7);
    box-shadow: 20px 20px 35px rgba(0, 0, 0, 0.05);
    opacity: 0.8;
}

.login-card[b-9kiaupzuou] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(420px, 90vw);
    padding: 3rem 2.5rem 2.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(37, 37, 37, 0.08);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(37, 37, 37, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: login-card-in-b-9kiaupzuou 0.5s ease-out;
}

@keyframes login-card-in-b-9kiaupzuou {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo[b-9kiaupzuou] {
    width: 230px;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 4px 10px rgba(37, 37, 37, 0.12));
}

.login-title[b-9kiaupzuou] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #252525;
    letter-spacing: -0.01em;
}

.login-subtitle[b-9kiaupzuou] {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    color: rgba(37, 37, 37, 0.6);
    line-height: 1.4;
}

.login-action[b-9kiaupzuou] {
    width: 100%;
    /* Tall enough to fit the InPlace loader (icon + message text) so swapping from the
       button to the loader never changes this element's height - a height change here
       would shift the title/subtitle above and the footnote below. */
    min-height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-footnote[b-9kiaupzuou] {
    margin: 1rem 0 0;
    font-size: 0.7rem;
    color: rgba(37, 37, 37, 0.4);
    letter-spacing: 0.02em;
}

[b-9kiaupzuou] .cus-btn {
    width: auto;
    min-width: 200px;
    padding-block: 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: box-shadow 0.15s ease;
}

    [b-9kiaupzuou] .cus-btn:hover {
        box-shadow: 0 8px 20px rgba(37, 37, 37, 0.2);
    }

[b-9kiaupzuou] .icon-microsoft {
    -webkit-mask-image: url("images/icons/microsoft.svg");
    mask-image: url("images/icons/microsoft.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-color: var(--dxbl-btn-color);
}

@media (max-width: 480px) {
    .login-card[b-9kiaupzuou] {
        padding: 2.5rem 1.5rem 2rem;
    }

    .login-logo[b-9kiaupzuou] {
        width: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-card[b-9kiaupzuou] {
        animation: none;
    }
}

/* Dark mode - explicit choice (data-bs-theme is only ever set on <html> by App.razor from the
   theme cookie, or by ThemeModeService while already logged in). This page never runs under
   MainLayout, so it can't rely on ThemeModeService itself - just the attribute App.razor set. */
[data-bs-theme="dark"] .login-container[b-9kiaupzuou] {
    background: #1c1c1c;
}

[data-bs-theme="dark"] .login-plane[b-9kiaupzuou] {
    background: linear-gradient(135deg, #282828, #1f1f1f);
}

[data-bs-theme="dark"] .login-plane-1[b-9kiaupzuou] {
    background: linear-gradient(135deg, #2c2c2c, #1f1f1f);
    box-shadow: 40px 40px 60px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .login-plane-2[b-9kiaupzuou] {
    box-shadow: -30px -30px 50px rgba(0, 0, 0, 0.12);
}

[data-bs-theme="dark"] .login-plane-3[b-9kiaupzuou] {
    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
    box-shadow: 20px 20px 35px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .login-card[b-9kiaupzuou] {
    background: rgba(28, 28, 28, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .login-logo[b-9kiaupzuou] {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

[data-bs-theme="dark"] .login-title[b-9kiaupzuou] {
    color: #f4f4f2;
}

[data-bs-theme="dark"] .login-subtitle[b-9kiaupzuou] {
    color: rgba(244, 244, 242, 0.6);
}

[data-bs-theme="dark"] .login-footnote[b-9kiaupzuou] {
    color: rgba(244, 244, 242, 0.4);
}

/* System theme mode, no explicit choice yet (data-bs-theme is only set when the user has picked
   Light or Dark - see App.razor) - same dark styling, driven by the OS instead. */
@media (prefers-color-scheme: dark) {
    html:not([data-bs-theme]) .login-container[b-9kiaupzuou] {
        background: #1c1c1c;
    }

    html:not([data-bs-theme]) .login-plane[b-9kiaupzuou] {
        background: linear-gradient(135deg, #282828, #1f1f1f);
    }

    html:not([data-bs-theme]) .login-plane-1[b-9kiaupzuou] {
        background: linear-gradient(135deg, #2c2c2c, #1f1f1f);
        box-shadow: 40px 40px 60px rgba(0, 0, 0, 0.15);
    }

    html:not([data-bs-theme]) .login-plane-2[b-9kiaupzuou] {
        box-shadow: -30px -30px 50px rgba(0, 0, 0, 0.12);
    }

    html:not([data-bs-theme]) .login-plane-3[b-9kiaupzuou] {
        background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
        box-shadow: 20px 20px 35px rgba(0, 0, 0, 0.1);
    }

    html:not([data-bs-theme]) .login-card[b-9kiaupzuou] {
        background: rgba(28, 28, 28, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    html:not([data-bs-theme]) .login-logo[b-9kiaupzuou] {
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
    }

    html:not([data-bs-theme]) .login-title[b-9kiaupzuou] {
        color: #f4f4f2;
    }

    html:not([data-bs-theme]) .login-subtitle[b-9kiaupzuou] {
        color: rgba(244, 244, 242, 0.6);
    }

    html:not([data-bs-theme]) .login-footnote[b-9kiaupzuou] {
        color: rgba(244, 244, 242, 0.4);
    }
}