﻿.cpb-menu {
    background-color: var(--cpb-header);
    position: fixed;
    top:0;
    width: 372px;
    color: var(--cpb-background);
    font-weight: 500;
    height: 100%;
    transition: 125ms;
    transition-delay:250ms;
    overflow:clip;
    z-index:1045;
}
    .cpb-menu * {
        transition: 0ms;
    }
    .cpb-menu.closed {
        width:34px;
    }
    .cpb-menu.pinned, .cpb-menu:hover {
        width: 260px;
    }
    .cpb-menu .navbar-brand {
        background-color:#fff;
        display:inline-block;
        height:28px;
        width:28px;
        border-radius:14px;
        padding:0 1px 1px 1px;
        margin-top: 4px;
    }
    .cpb-menu img {
        height: 26px;
        width: 26px;
    }

.menu-pin {
    display:inline-block;
    transform:rotate(45deg);
    right:0.125em;
    cursor:pointer;
}
    .menu-pin:hover {
        color: rgba(0,0,0,0.6);
    }
    .cpb-menu.pinned .menu-pin {
        color: rgba(0,0,0,0.6);
        transform: rotate(0);
    }
.cpb-menu.pinned .menu-pin:hover {
    color: unset;
}
#cpb-main {
    padding-left: 48px;
}
.cpb-menu.pinned + #cpb-main {
    padding-left: 272px;
}
.cpb-menu a {
    padding: 0.25em;
    color: var(--cpb-background);
    text-decoration: none;
    display:block;
    font-weight:400;
}

.cpb-menu li {
    text-wrap: nowrap;
}

    .cpb-menu li:hover, a.dropdown-item:hover {
        background-color: rgba(0,0,0,.35);
        color: var(--cpb-background);
    }

.cpb-menu .accordion-item,
.cpb-menu .accordion-button,
.cpb-menu .accordion-button.collapsed,
.cpb-menu .accordion-button:not(.collapsed),
.cpb-menu .accordion-button:focus {
    background: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--cpb-background-2);
}
.cpb-menu ul {
    list-style-type: none;
    margin-left: 2em;
    background: none;
    padding: 0;
    border: none;
    height: 100%;
}
.cpb-menu > ul {
    margin: 0;
}
    .cpb-menu ul.show {
        float: none;
        display: block;
    }
    .cpb-menu button {
        padding: 0.25em;
    }
.menu-active{
    width:100%;
    display:inline-block;
}
.menu-active::after {
    content:'\F231';
    font-family:bootstrap-icons;
    position:relative;
    float:right;
    left:-0.75em;
    display:inline-block;
}

/* Collapsible menu sections render their items as Bootstrap "list-group" rows,
   echoing the Members list "Links" offcanvas the owner liked. Built from the
   root --cbs-* theme tokens (not the .list-group-scoped ones) so light/dark mode
   track Bootstrap automatically. Overrides the generic .cpb-menu a / li:hover. */
.cpb-menu .accordion-collapse ul {
    padding-right: 0.5em;
}
.cpb-menu .accordion-collapse li:hover {
    background-color: transparent; /* per-row hover lives on the anchor, not the whole li */
}
.cpb-menu .accordion-collapse li > a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    color: var(--cbs-body-color);
    background-color: var(--cbs-body-bg);
    border-bottom: var(--cbs-border-width, 1px) solid var(--cbs-border-color);
}
.cpb-menu .accordion-collapse li:last-child > a {
    border-bottom: 0;
}
.cpb-menu .accordion-collapse li > a:hover,
.cpb-menu .accordion-collapse li > a:focus {
    background-color: var(--cbs-tertiary-bg);
    color: var(--cbs-emphasis-color);
}
/* Keep the active-page checkmark right-aligned within the new flex row. */
.cpb-menu .accordion-collapse li > a.menu-active::after {
    margin-left: auto;
    left: 0;
    float: none;
}
/* Footer clears the icon rail, matching #cpb-main's offset. */
.footer {
    left: 48px;
    right: 0;
    width: auto;
}
.cpb-menu.pinned ~ .footer {
    left: 272px;
}

/* Company-scoped menu entries open a flyout beside the sidebar instead of repeating per company. */
.cpb-menu .accordion-collapse li.has-flyout {
    position: relative;
}
.cpb-menu .accordion-collapse li.has-flyout > ul.flyout {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 14em;
    margin: 0;
    padding: 0.25em 0;
    list-style: none;
    background-color: var(--cpb-header);
    border-radius: 0 0.25em 0.25em 0;
    box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.35);
    z-index: 1050;
}
.cpb-menu .accordion-collapse li.has-flyout:hover > ul.flyout,
.cpb-menu .accordion-collapse li.has-flyout:focus-within > ul.flyout {
    display: block;
}
.cpb-menu .accordion-collapse li.has-flyout > a {
    cursor: default;
}
.cpb-menu .accordion-collapse li.has-flyout > a .flyout-caret {
    margin-left: auto;
}
/* the sidebar clips its content, so the flyout can only escape while the menu is open */
.cpb-menu.pinned, .cpb-menu:hover {
    overflow: visible;
}
