#wrapper {
    overflow-x: hidden;
}

#sidebar-wrapper {
    min-height: 100vh;
    /* Matches width:300px exactly (not -15rem, which only coincidentally cancelled the width at
       some root font sizes) so this box always has exactly zero visual footprint when hidden,
       regardless of root font-size. flex-shrink:0 keeps the width itself fixed too - without it,
       a wide sibling (e.g. CreateDoc's two-column manual fields) makes the flex algorithm shrink
       this box while the margin stays fixed, breaking the cancellation and dragging the whole
       content pane off-screen to the left, clipped by #wrapper's overflow-x:hidden instead of
       showing a scrollbar. */
    margin-left: -300px;
    flex-shrink: 0;
    transition: margin 0.25s ease-out;
    width: 300px;
    overflow-y: auto;
}

    #sidebar-wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }

    #sidebar-wrapper .list-group {
        width: 15rem;
    }

.sidebarList {
    overflow-y: auto;
    height: calc(100vh - 80px);
}

#page-content-wrapper {
    min-width: 100vw;
    /* body { overflow: hidden } (gdrDark.css) disables the browser viewport's own scrollbar
       entirely - per spec, a non-visible overflow on <body> propagates to the root scrolling
       box. That's invisible on pages short enough to fit one screen, but taller pages (e.g. the
       Will draft) had no way to reach content past the first viewport. Same overflow/height
       idiom the sidebar already uses (.sidebarList above) to scroll independently.
       Unlike .sidebarList (whose 80px reserves its OWN sibling heading above it plus the footer
       below), this wrapper's header (_Header partial) is its own first child, already inside the
       flow - only the fixed-bottom footer (navFooter, 35px) needs reserving, or the last ~35px of
       content ends up permanently hidden underneath it regardless of how far you scroll. */
    overflow-y: auto;
    height: calc(100vh - 35px);
}

/* The top nav bar (_Header partial, this wrapper's first child) stays in view while the page
   scrolls - #page-content-wrapper above is the scrolling box, so sticky here pins the bar to its
   top instead of letting it scroll away on every long page (owner remark 2026-09-28). */
#page-content-wrapper > nav.navbar:first-child {
    position: sticky;
    top: 0;
    z-index: 1020;
}

body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: 0;
}
/* /////// */
.nav-flush .nav-link {
    border-radius: 0;
}

.dropdown-item {
    max-width: 175px;
}

/*.btn-toggle {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    background-color: transparent;
    border: 0;
}

    .btn-toggle:hover,
    .btn-toggle:focus {
        color: rgba(0, 0, 0, .85);
        background-color: #d2f4ea;
    }

    .btn-toggle::before {
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform .35s ease;
        transform-origin: .5em 50%;
        filter: invert(1);
    }

    .btn-toggle[aria-expanded="true"] {
        color: rgba(0, 0, 0, .85);
    }

        .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(90deg);
        }

.btn-toggle-nav a {
    display: inline-flex;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
    text-decoration: none;
}

    .btn-toggle-nav a:hover,
    .btn-toggle-nav a:focus {
        background-color: #d2f4ea;
    }*/

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
        margin-left: -300px;
    }
}



/* Page-title headings (h4.page-title) are plain text, not the grey bar the global h4 rule gives modals and panels. */
h4.page-title {
    background: none;
    text-align: left;
}