/* Additions to Velzon for Blazor; the theme itself is vendor/velzon/css/app.min.css. */

/* Vertical layout only: Velzon uses SimpleBar for the sidebar; without its script the menu scrolls natively. */
[data-layout="vertical"] .navbar-menu #scrollbar {
    height: calc(100% - 70px);
    overflow-y: auto;
}

/* Horizontal layout: Velzon limits header, menu and content to 90 % of the window on screens wider
   than 1024 px (~120 px empty on each side at 1920 px). The full width leaves Velzon's own gutters
   (~24 px) and more room for the result table. The same limit is lifted for all three, so they stay aligned. */
@media (min-width: 1024.1px) {
    [data-layout="horizontal"] .container-fluid,
    [data-layout="horizontal"] .layout-width {
        max-width: 100%;
    }
}

/* Tooltips (ecomon.js): explanations are longer than Bootstrap's 200 px suit. */
.tooltip-inner {
    max-width: 280px;
}

/* Text logo instead of the Velzon image logo; dark on the light topbar, white on dark backgrounds. */
.ecomon-logo {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: .02em;
    color: #fff;
}

.logo-dark .ecomon-logo {
    color: var(--vz-primary);
}

/* Logo mark (images/logo-mark*.svg) in front of the name. */
.ecomon-mark {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.logo-lg .ecomon-mark {
    margin-right: .6rem;
}

.ecomon-mark-lg {
    width: 44px;
    height: 44px;
    margin-right: .75rem;
}

.logo-lg .ecomon-logo {
    vertical-align: middle;
}

/* FocusOnNavigate moves focus to the page title after navigation (for screen readers);
   that programmatic focus needs no visible outline. */
.page-title-box h4:focus {
    outline: none;
}

/* Menu entries of later phases. */
.navbar-menu .nav-link.disabled {
    opacity: .55;
    cursor: default;
}

/* Dropdown (Blazor): an invisible layer behind the open menu catches outside clicks. */
.ecomon-dropdown-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.dropdown-menu.show {
    z-index: 1001;
    display: block;
}

/* User menu: Velzon's "top: 6px !important" is an offset on top of Popper's placement below the button.
   Without Popper it would put the menu over the user box; here it opens right under the full-height
   (70 px) box, as in the template. */
.topbar-user.dropdown .dropdown-menu {
    top: 100% !important;
    width: 100%;
    min-width: 0;
}

/* Blazor validation messages styled like Bootstrap's invalid-feedback. */
.validation-message {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--vz-danger);
}

/* Sign-in page: our own steam plant drawing (images/auth-steam.svg) instead of Velzon's photo, on
   Velzon's indigo gradient. The drawing is already light on dark, so Velzon's 90 % overlay is not needed. */
.auth-one-bg.ecomon-auth-bg {
    background-image: url("images/auth-steam.svg"), linear-gradient(to right, #364574, #405189);
    background-position: center bottom, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

.auth-one-bg.ecomon-auth-bg .bg-overlay {
    display: none;
}

/* Low windows (e.g. a laptop with the browser's toolbars): less space above the logo, so the card and
   the footer still fit without scrolling. */
@media (max-height: 720px) {
    .auth-page-wrapper.pt-5 {
        padding-top: 1rem !important;
    }

    .auth-page-wrapper .auth-page-content {
        padding-bottom: 50px;
    }
}

/* Reconnect overlay (Velzon auth-offline card). Blazor sets the components-reconnect-* classes. */
.ecomon-reconnect {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .45);
}

.ecomon-reconnect.components-reconnect-show,
.ecomon-reconnect.components-reconnect-failed,
.ecomon-reconnect.components-reconnect-rejected {
    display: flex;
}

.ecomon-reconnect-card {
    width: 90%;
    max-width: 420px;
    margin: 0;
}

.ecomon-reconnect-retrying,
.ecomon-reconnect-failed,
.ecomon-reconnect-rejected {
    display: none;
}

.components-reconnect-show .ecomon-reconnect-retrying,
.components-reconnect-failed .ecomon-reconnect-failed,
.components-reconnect-rejected .ecomon-reconnect-rejected {
    display: block;
}

/* Default Blazor error bar, restyled. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    padding: .75rem 1.25rem;
    color: #fff;
    background: var(--vz-danger);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    cursor: pointer;
}

#blazor-error-ui a {
    color: #fff;
    text-decoration: underline;
}