/* app/static/css/sidebar-scroll.css
   The admin sidebar's OWN scrollbar, ending at the bottom of the window.

   WHY THIS FILE EXISTS.  The only rule that ever gave the sidebar an
   overflow lived in components/admin-sticky-sidebar.css, which is reachable
   only through an @import in admin-account.css -- a stylesheet the /account
   pages link and nobody else.  Everywhere else the sidebar got its height
   from nav-sidebar.js as an inline style, with no overflow rule at all: a
   fixed-height box whose content simply ran past the bottom of the screen,
   with nothing to scroll.  This file is linked from base.html beside
   nav.css, so every page with a sidebar gets it.

   THE TOP BAR IS MEASURED, NOT GUESSED.  --app-topbar-h is written by
   nav-sidebar.js from the live navbar's height; the 70px fallback is the
   number this app already used in both the old CSS and that script, so a
   browser that never runs the JS lands exactly where it used to.

   100dvh, not 100vh: on mobile browsers the dynamic unit follows the
   collapsing address bar, so the list does not hide behind it. */

:root {
    /* Overwritten at runtime with the real navbar height. */
    --app-topbar-h: 70px;
}

.admin-sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: var(--app-topbar-h, 70px);
    align-self: flex-start;
    height: calc(100dvh - var(--app-topbar-h, 70px));
    max-height: calc(100dvh - var(--app-topbar-h, 70px));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #6c757d #f8f9fa;
}

/* A thin scrollbar that does not steal width from the labels. */
.admin-sticky-sidebar::-webkit-scrollbar {
    width: 6px;
}

.admin-sticky-sidebar::-webkit-scrollbar-thumb {
    background-color: #6c757d;
    border-radius: 20px;
}

/* The accordion must never impose a height of its own -- the column above
   owns the scrolling. */
.admin-sticky-sidebar .accordion {
    max-height: none;
}

/* ── Nested folder toggles ─────────────────────────────────────────────
   Nested groups are <button>s now, not plain labels.  They keep the muted
   sub-group look and gain a chevron that turns, matching the top-level
   .sidebar-section-btn behaviour Bootstrap gives for free. */
/* A NESTED FOLDER IS NOT A SMALLER FOLDER.  This was 13px against the
   leaves' 14px, so the tree shrank as it deepened.  It is now the same body
   size as everything else in the column; depth is said by indent and by the
   chevron, which keep their own rem sizes above and below. */
.sidebar-subgroup-btn {
    font-size: 1rem;
    line-height: 1.2;
}

.sidebar-subgroup-btn:hover,
.sidebar-subgroup-btn:focus-visible {
    color: var(--bs-primary, #0d6efd);
}

.sidebar-subgroup-btn::after {
    content: '';
    flex: 0 0 auto;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
    background-repeat: no-repeat;
    background-size: 0.75rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.2s ease-in-out;
}

.sidebar-subgroup-btn.collapsed::after {
    transform: rotate(-90deg);
}

/* On a phone the column is a normal block again: the page scrolls, not the
   sidebar, so it must not be trapped at viewport height. */
@media (max-width: 992px) {
    .admin-sticky-sidebar {
        position: relative;
        top: 0;
        height: auto;
        max-height: none;
        overflow-y: visible;
    }
}