/*
 * VestAlchemy navigation layout.
 *
 * Desktop (>= 992px): the sidebar is always visible and #content is permanently
 * offset, so there is no show/hide control to get in the way. The navbar toggle
 * collapses it to an icon rail instead, for pages with wide tables.
 *
 * Mobile (< 992px): the sidebar becomes an off-canvas drawer over the content,
 * with a backdrop. Content is never pushed sideways, which is what used to leave
 * a phone showing a 260px-wide sliver of the page.
 *
 * Served from /css/ (permitted in SecurityConfig) rather than inlined in the head
 * fragment: it is identical on all 49 pages, so inlining repeated it in every
 * response, defeated caching, and pushed pages past Tomcat's 8KB response buffer —
 * which commits the response early and breaks any later th:action needing a CSRF
 * session.
 */

:root {
    --vx-sidebar-w: 260px;
    --vx-rail-w: 68px;
    --vx-nav-h: 56px; /* replaced at runtime with the navbar's measured height */
    --vx-accent: #0d6efd;
}

.btn-warning:hover {
    background-color: #e3f2fd;
    text-decoration: underline;
    transition: background-color .3s ease, text-decoration .3s ease;
}

/* The persisted state is applied before first paint; suppressing transitions
   until then stops every page load from visibly animating into that state. */
.vx-preload #sidebar,
.vx-preload #content,
.vx-preload #sidebarBackdrop {
    transition: none !important;
}

#sidebar {
    position: fixed;
    top: var(--vx-nav-h);
    bottom: 0;
    left: 0;
    width: var(--vx-sidebar-w);
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    /* The menu is ~20 items tall. Without this the last few are simply
       unreachable on a laptop-height viewport. */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: .5rem 0 1rem;
    z-index: 1035; /* above content, below Bootstrap modals (1055) */
    transition: width .2s ease, transform .25s ease;
}

#content {
    padding: 20px;
    transition: margin-left .2s ease;
}

#sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #333;
    font-weight: 500;
    padding: .55rem 1rem;
    margin: .1rem .5rem;
    border-radius: .375rem;
    white-space: nowrap;
}

#sidebar .nav-link:hover,
#sidebar .nav-link:focus-visible {
    background-color: #e9ecef;
    text-decoration: none;
}

#sidebar .vx-ico {
    flex: 0 0 1.5rem;
    text-align: center;
    font-size: 1.05rem;
}

#sidebar .vx-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar .vx-caret {
    flex: 0 0 auto;
    font-size: .7rem;
    transition: transform .2s ease;
}

#sidebar .nav-link[aria-expanded="true"] .vx-caret {
    transform: rotate(180deg);
}

#sidebar .vx-sub .vx-label {
    padding-left: 2.1rem;
}

/* Current page. Twenty links with nothing marked is a map with no "you are here". */
#sidebar .nav-link.vx-active {
    background-color: #e7f1ff;
    color: var(--vx-accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--vx-accent);
}

#sidebarBackdrop {
    display: none;
}

/* ── Desktop: persistent, collapsible to a rail ───────────────────────────── */
@media (min-width: 992px) {
    #content {
        margin-left: var(--vx-sidebar-w);
    }

    html.vx-rail #sidebar {
        width: var(--vx-rail-w);
    }

    html.vx-rail #content {
        margin-left: var(--vx-rail-w);
    }

    html.vx-rail #sidebar .vx-label,
    html.vx-rail #sidebar .vx-caret {
        display: none;
    }

    html.vx-rail #sidebar .nav-link {
        justify-content: center;
        padding-inline: .5rem;
    }

    /* Submenus have nowhere to go at 68px wide; clicking a group re-expands the
       sidebar instead (see the sidebarScripts fragment). */
    html.vx-rail #sidebar .collapse,
    html.vx-rail #sidebar .collapsing {
        display: none;
    }
}

/* ── Mobile: off-canvas drawer ────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #sidebar {
        transform: translateX(-100%);
        box-shadow: .5rem 0 1.5rem rgba(0, 0, 0, .15);
    }

    html.vx-drawer-open #sidebar {
        transform: translateX(0);
    }

    #sidebarBackdrop {
        display: block;
        position: fixed;
        inset: var(--vx-nav-h) 0 0 0;
        background: rgba(0, 0, 0, .4);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 1030;
    }

    html.vx-drawer-open #sidebarBackdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* Stop the page behind the drawer scrolling under the user's finger. */
    html.vx-drawer-open,
    html.vx-drawer-open body {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar,
    #content,
    #sidebarBackdrop,
    #sidebar .vx-caret {
        transition: none !important;
    }
}