/* Viewport is locked; .main is the only vertical scrollport. */

html, body, .app-root {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

@supports (height: 100dvh) {
    html, body, .app-root {
        height: 100dvh;
        max-height: 100dvh;
    }
}

.top-row {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-height, 3.5rem);
    z-index: var(--z-topbar, 10);
}

.sidebar {
    position: fixed !important;
    top: var(--topbar-height, 3.5rem);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width, 250px);
    height: auto !important;
    z-index: var(--z-sidebar, 100);
    overflow: hidden;
    padding: 0 !important;
}

.sidebar.collapsed {
    width: var(--sidebar-width-collapsed, 72px);
}

.page {
    position: relative;
    display: flex;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    animation: page-enter 0.45s ease-out;
}

@keyframes page-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Bound to the viewport so parent height:auto wrappers cannot clip content. */
.main {
    position: fixed !important;
    top: var(--topbar-height, 3.5rem) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--sidebar-width, 250px) !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.content {
    height: auto !important;
    min-height: min-content;
    max-width: 100%;
    overflow: visible !important;
}

@media (max-width: 768px) {
    .main {
        left: 0 !important;
    }
}

.welcome-page {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
    z-index: 10;
}

.welcome-hero {
    position: relative;
    max-width: 100%;
    z-index: 10;
}

.welcome-page * {
    position: relative;
    z-index: inherit;
}