/* Shared shell for the portal layouts (PortalLayout + PortalLayout2).
   The .portal-* prefix avoids colliding with the generic .page/.sidebar/main
   class names used by SimpleLayout, WidgetLayout, SettingsLayout, and
   PortalSkeletonLayout. */

.portal-page {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* '>' is load-bearing: the descendant form would leak flex:1/min-width:0 onto
   SettingsLayout's nested main[role=main] once it moves onto this layout.
   Flex items default to min-width:auto, which refuses to shrink below the
   intrinsic width of their content — a wide child (e.g. a timeline grid)
   would blow the whole page past the viewport and push toolbar controls
   off-screen. min-width:0 lets such content scroll within its own
   overflow-x:auto container instead of stretching the layout. */
.portal-page > main {
    flex: 1;
    min-width: 0;
}

.portal-page .e-dropdown-btn {
    font-size: 1rem;
}

/* Stack-on-top below 1025px aligns with NavMenu's breakpoint (it switches to
   a horizontal hamburger bar at the same width). Above that, the sidebar
   becomes a sticky left column. */
@media (min-width: 1025px) {
    .portal-page {
        flex-direction: row;
    }

    .portal-sidebar {
        height: 100vh;
        position: sticky;
        top: 0;
        /* position:sticky creates a stacking context — value must exceed
           main-content z-indexes so the nested HelpPopover can overlay. */
        z-index: 1100;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 0;
    }
}

/* Standard page padding — the one way a page (or nested layout) opts into
   default spacing inside PortalLayout2. Deliberately global and single-class
   (specificity 0,1,0) so any page's scoped override (e.g. .qnext[b-hash],
   0,2,0) always wins regardless of stylesheet order. */
.page-content {
    padding: 1rem 1.5rem;
}

@media (max-width: 599.98px) {
    .page-content {
        padding: 0.75rem 1rem;
    }
}
