/* Collapsible sidenav section headers (see wwwroot/js/Layout/sidenav-sections.js).
   Turns the plain .sidenav-header labels into clickable expand/collapse toggles. */

#layout-sidenav .pt-sec-header {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* The theme header is not a flex container by default (only flex-direction is set), so the
       caret's margin-left:auto had nothing to push against. Force a flex row so the label stays
       left and the caret + active-dot align to the far right. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    transition: color .15s ease, opacity .15s ease;
}

    #layout-sidenav .pt-sec-header:hover {
        opacity: .8;
    }

/* Chevron pushed to the right edge; rotates when the section is collapsed. */
#layout-sidenav .pt-sec-caret {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: .62rem;
    opacity: .55;
    transition: transform .2s ease;
}

#layout-sidenav .pt-sec-header.pt-collapsed .pt-sec-caret {
    transform: rotate(-90deg);
}

/* Small dot indicating the current page lives inside this (collapsed) section. */
#layout-sidenav .pt-sec-dot {
    display: none;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: .45rem;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}

#layout-sidenav .pt-sec-header.pt-collapsed[data-has-active="1"] .pt-sec-dot {
    display: inline-block;
}

/* Hidden section members in the normal (expanded / pinned) sidenav. */
#layout-sidenav .pt-section-collapsed {
    display: none !important;
}

/* When the sidenav is in icon-only mode (collapsed layout, not hovered), keep every item
   reachable as an icon regardless of section-collapse state; otherwise navigation icons
   would vanish. On hover the overlay expands and the collapse preference applies again. */
.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) .layout-sidenav:not(:hover) .pt-section-collapsed {
    display: revert !important;
}