/**
 * CFE BuddyPanel Fixed Layout
 *
 * Pin the BuddyBoss left BuddyPanel position:fixed under the header.
 * Default state is CLOSED (icon rail); the header toggle
 * (.bb-toggle-panel) collapses it to an icon-only rail and the body
 * content reclaims the freed gutter so nothing overlaps.
 *
 * Custom sprite icons (svg.cfe-ic) are given the same ~48px centering
 * column BuddyBoss applies to its icon-font items (BB only targets <i>),
 * so custom-icon rows line up with font-icon rows in both states. This
 * is what fixes the off-center icons that prompted hiding the toggle.
 *
 * Scope: viewport >= 900px; excludes LearnDash focus mode (.bb-sfwd-aside).
 */

@media (min-width: 900px) {

    /* Panel pinned under the header in every state */
    body.bb-buddypanel.bb-buddypanel-left:not(.bb-sfwd-aside) .buddypanel {
        position: fixed;
        top: var(--bb-header-height, 76px);
        bottom: 0;
        left: 0;
        /* BuddyBoss theme JS (main.js StickyBuddyPanel/sidePanelHeight) writes an
           inline `height` measured from $('html').height() too early, pinning the
           panel to a short pixel height so it stops short of the viewport bottom.
           Force auto so top+bottom drive the height and it always fills to bottom. */
        height: auto !important;
        overflow-y: auto;
        overflow-x: visible;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Collapsed rail: let the icon tooltips escape and layer on top.
       The base rule's overflow-y:auto forces overflow-x to compute to
       auto too (CSS spec), which clipped the balloon tooltips to a
       sliver; and the theme stacks the panel (611) under the fixed
       header (612). The closed rail fits the viewport, so scrolling
       isn't needed there; the open state keeps the scroll above. */
    body.bb-buddypanel.bb-buddypanel-left:not(.bb-sfwd-aside):not(.buddypanel-open) .buddypanel {
        overflow: visible;
        z-index: 613;
    }

    body.bb-buddypanel.bb-buddypanel-left:not(.bb-sfwd-aside) .buddypanel::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    /* Hide the duplicate panel-head wrapper inside the panel */
    body.bb-buddypanel.bb-buddypanel-left:not(.bb-sfwd-aside) .buddypanel > .panel-head {
        display: none;
    }

    /* Neutralize BuddyBoss's native open-panel reservation. BB pushes the
       whole page right with `#page.site { margin-left: 230px }` when the
       panel is open. This fixed layout already owns the gutter via the
       panel's position:fixed + #content padding-left, so BB's margin
       double-counts and leaves a ~230px empty band between panel and
       content. Zero it in every state — our padding is the sole gutter. */
    body.bb-buddypanel.bb-buddypanel-left:not(.bb-sfwd-aside) #page.site {
        margin-left: 0;
    }

    /* Show the header toggle. BuddyBoss's parent theme hides
       `.site-header .bb-toggle-panel` with display:none and only un-hides
       it on LD focus-mode pages (.bb-sfwd-aside). Force it visible here so
       members can collapse the panel on profile/shop/etc. — the same pages
       this fixed layout governs. */
    body.bb-buddypanel.bb-buddypanel-left:not(.bb-sfwd-aside) .site-header .bb-toggle-panel {
        display: inline-flex;
        align-items: center;
        visibility: visible;
    }

    /* ---- OPEN state: full width + labels + 240px gutter ---- */
    body.bb-buddypanel.bb-buddypanel-left.buddypanel-open:not(.bb-sfwd-aside) .buddypanel {
        width: 240px;
    }
    body.bb-buddypanel.bb-buddypanel-left.buddypanel-open:not(.bb-sfwd-aside) .side-panel-menu .menu-item > a > span {
        display: inline-block;
    }
    body.bb-buddypanel.bb-buddypanel-left.buddypanel-open:not(.bb-sfwd-aside) #content.site-content {
        padding-left: 240px;
        transition: none;
    }

    /* ---- COLLAPSED state: icon-only rail, content reclaims space ---- */
    body.bb-buddypanel.bb-buddypanel-left:not(.buddypanel-open):not(.bb-sfwd-aside) .buddypanel {
        width: 72px;
    }
    body.bb-buddypanel.bb-buddypanel-left:not(.buddypanel-open):not(.bb-sfwd-aside) #content.site-content {
        padding-left: 72px;
        transition: none;
    }

    /* ---- Icon-column parity ----
       BuddyBoss centers its menu icons with `min-width:48px` on `> i`
       (font icons only). Mirror that for the custom sprite SVGs so both
       icon types share one 48px column and line up in open + collapsed. */
    body.bb-buddypanel:not(.bb-sfwd-aside) .buddypanel-menu > li > .bb-menu-item > svg.cfe-ic._mi {
        width: 24px;
        height: 24px;
        min-width: 24px;
        margin: 0 12px;          /* 24 + 12 + 12 = 48px column, glyph centered */
        margin-top: 0;           /* override the -0.265em baseline shim from cfe-icons.css */
        vertical-align: middle;
    }
}

/* Admin-bar sessions: the fixed header sits 32px lower (WP toolbar) but
   --bb-header-height does not include it, so the panel top edge rode 32px
   into the header and — at z-index 613 — swallowed the bottom of the
   .bb-toggle-panel hit area. Own media block on purpose (AO minifier
   gotcha: two rules sharing a block can lose the first declaration). */
@media (min-width: 900px) {
    body.admin-bar.bb-buddypanel.bb-buddypanel-left:not(.bb-sfwd-aside) .buddypanel {
        top: calc(var(--bb-header-height, 76px) + 32px);
    }
}

/* Collapsed rail: center the sprite SVGs. BuddyBoss centers collapsed-rail
   icons for its font <i> elements only; the sprite svg.cfe-ic keeps the
   48px-column side margins from the parity rule above and sits 12px left
   of the 72px rail center. Auto margins center it like the font icons.
   Own media block on purpose (AO minifier gotcha). */
@media (min-width: 900px) {
    body.bb-buddypanel.bb-buddypanel-left:not(.buddypanel-open):not(.bb-sfwd-aside) .buddypanel-menu > li > .bb-menu-item > svg.cfe-ic._mi {
        margin-left: auto;
        margin-right: auto;
    }
}