/*
 * GAMERSX Sidebar CSS
 * BuddyBoss Child Theme
 * Version: 1.0.0
 */

/* ================================================================
   Core Sidebar Container
   ================================================================ */
.buddypanel {
  background-color: var(--gx-sidebar-bg) !important;
  border-right: 1px solid var(--gx-sidebar-border) !important;
  box-shadow: none !important;

  /* Flex column so footer pins to bottom */
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* ================================================================
   Panel Head (toggle inside sidebar)
   Hidden for Header-3: toggle lives in the top header instead.
   ================================================================ */
.buddypanel .panel-head {
  display: none !important;
}

/* ================================================================
   Logo / Site Branding in Sidebar
   ================================================================ */
.buddypanel #site-logo,
.buddypanel .site-branding {
  padding: 0 20px !important;
  border-bottom: 1px solid var(--gx-sidebar-border) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Text logo / site name */
.buddypanel #site-logo .site-title,
.buddypanel .site-branding .site-title {
  margin: 0 !important;
}

.buddypanel #site-logo .site-title a,
.buddypanel .site-branding .site-title a {
  color: var(--gx-sidebar-text-active) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  text-decoration: none !important;
  display: block !important;
}

/* Image logo — invert to white on dark background */
.buddypanel #site-logo img.custom-logo,
.buddypanel .site-branding img.bb-logo,
.buddypanel .site-branding img.custom-logo {
  height: 74px;
  /* max-height: 34px !important; */
  /* width: auto !important; */
  /* filter: brightness(0) invert(1) !important; */
}

/* LMS brand logo */
.buddypanel .site-branding .ld-brand-logo img {
  max-height: 34px !important;
  width: auto !important;
}

/* Site icon (favicon) */
.buddypanel .buddypanel-site-icon {
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid var(--gx-sidebar-border) !important;
  flex-shrink: 0 !important;
}

.buddypanel .buddypanel-site-icon img {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--gx-radius-sm) !important;
}

/* ================================================================
   Side Panel Inner (scrollable nav area)
   ================================================================ */
.buddypanel .side-panel-inner {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 12px !important;
  margin: 0 !important;
}

/* Custom scrollbar inside sidebar */
.buddypanel .side-panel-inner::-webkit-scrollbar {
  width: 3px;
}
.buddypanel .side-panel-inner::-webkit-scrollbar-track {
  background: transparent;
}
.buddypanel .side-panel-inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}

/* Menu container */
.buddypanel .side-panel-menu-container {
  padding: 0 !important;
}

/* ================================================================
   Navigation Menu
   ================================================================ */
.buddypanel .buddypanel-menu,
.buddypanel .side-panel-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.buddypanel .buddypanel-menu .menu-item {
  list-style: none !important;
  margin: 2px 0 !important;
}

/* Menu links — also target .side-panel-menu (BuddyBoss class) to beat parent specificity */
.buddypanel .buddypanel-menu .menu-item > a,
.buddypanel .buddypanel-menu .menu-item > a:visited,
.buddypanel .side-panel-menu .menu-item > a,
.buddypanel .side-panel-menu .menu-item > a:visited {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 12px !important;
  color: var(--gx-sidebar-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border-radius: var(--gx-sidebar-active-radius) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: var(--gx-transition) !important;
  position: relative !important;
  /* Force transparent background — overrides BuddyBoss --bb-sidenav-menu-background-color-regular */
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
}

.buddypanel .buddypanel-menu .menu-item > a:hover,
.buddypanel .side-panel-menu .menu-item > a:hover {
  background-color: var(--gx-sidebar-hover-bg) !important;
  color: var(--gx-sidebar-text-hover) !important;
}

/* Nuclear override: match BuddyBoss bb-template-v2 specificity exactly */
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) > a,
.bb-template-v2 .buddypanel .buddypanel-menu li:not(.current-menu-item) > a {
  background-color: transparent !important;
  color: var(--gx-sidebar-text) !important;
  border: none !important;
  box-shadow: none !important;
}
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) > a:hover,
.bb-template-v2 .buddypanel .buddypanel-menu li:not(.current-menu-item) > a:hover {
  background-color: var(--gx-sidebar-hover-bg) !important;
  color: var(--gx-sidebar-text-hover) !important;
}

.bb-template-v2 .side-panel-menu > li:not(.current-menu-item) > a:hover {
  background-color: var(--gx-sidebar-hover-bg) !important;
  color: var(--gx-sidebar-text-hover) !important;
}

/* Icons inside menu links */
.buddypanel .buddypanel-menu .menu-item > a i,
.buddypanel .buddypanel-menu .menu-item > a .bb-icon-l,
.buddypanel .buddypanel-menu .menu-item > a .bb-icon-f,
.buddypanel .buddypanel-menu .menu-item > a .bb-icon-rl,
.buddypanel .side-panel-menu .menu-item > a i,
.buddypanel .side-panel-menu .menu-item > a .bb-icon-l,
.buddypanel .side-panel-menu .menu-item > a .bb-icon-f,
.buddypanel .side-panel-menu .menu-item > a .bb-icon-rl,
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) > a i,
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) > a .bb-icon-l,
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) > a .bb-icon-f {
  font-size: 18px !important;
  width: 22px !important;
  min-width: 22px !important;
  text-align: center !important;
  color: var(--gx-sidebar-icon) !important;
  transition: var(--gx-transition) !important;
  flex-shrink: 0 !important;
}

.buddypanel .buddypanel-menu .menu-item > a:hover i,
.buddypanel .buddypanel-menu .menu-item > a:hover .bb-icon-l,
.buddypanel .buddypanel-menu .menu-item > a:hover .bb-icon-f,
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) > a:hover i,
.bb-template-v2 .buddypanel .side-panel-menu li:not(.current-menu-item) > a:hover .bb-icon-l {
  color: var(--gx-sidebar-text-hover) !important;
}

/* ================================================================
   Active / Current Menu Item
   ================================================================ */
.buddypanel .buddypanel-menu .current-menu-item > a,
.buddypanel .buddypanel-menu .current_page_item > a,
.buddypanel .buddypanel-menu .current-menu-parent > a,
.buddypanel .buddypanel-menu .current-menu-ancestor > a,
.buddypanel .buddypanel-menu .current-page-ancestor > a,
.buddypanel .buddypanel-menu .sfwd-courses-page > a,
.buddypanel .side-panel-menu .current-menu-item > a,
.buddypanel .side-panel-menu .current_page_item > a,
.buddypanel .side-panel-menu .current-menu-parent > a,
.buddypanel .side-panel-menu .current-menu-ancestor > a,
.buddypanel .side-panel-menu .current-page-ancestor > a,
.bb-template-v2 .buddypanel .side-panel-menu li.current-menu-item > a {
  background-color: var(--gx-sidebar-active-bg) !important;
  color: var(--gx-sidebar-text-active) !important;
  font-weight: 600 !important;
}

.buddypanel .buddypanel-menu .current-menu-item > a i,
.buddypanel .buddypanel-menu .current-menu-item > a .bb-icon-l,
.buddypanel .buddypanel-menu .current-menu-item > a .bb-icon-f,
.buddypanel .buddypanel-menu .current-menu-item > a .bb-icon-rl,
.buddypanel .buddypanel-menu .current-page-ancestor > a i,
.buddypanel .buddypanel-menu .current-page-ancestor > a .bb-icon-l,
.buddypanel .buddypanel-menu .current-menu-parent > a i,
.buddypanel .buddypanel-menu .current-menu-parent > a .bb-icon-l,
.bb-template-v2 .buddypanel .side-panel-menu li.current-menu-item > a i,
.bb-template-v2 .buddypanel .side-panel-menu li.current-menu-item > a .bb-icon-l,
.bb-template-v2 .buddypanel .side-panel-menu li.current-menu-item > a .bb-icon-f {
  color: var(--gx-sidebar-icon-active) !important;
}

/* ================================================================
   Notification / Count Badges
   ================================================================ */
.buddypanel .buddypanel-menu .menu-item > a .count,
.buddypanel .buddypanel-menu .menu-item > a .bp-notifications-count,
.buddypanel .buddypanel-menu .menu-item > a .bpn-notifications-count,
.buddypanel .buddypanel-menu .menu-item > a .unread-count {
  background-color: var(--gx-primary) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: var(--gx-radius-full) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Active state badge — lighter version */
.buddypanel .buddypanel-menu .current-menu-item > a .count,
.buddypanel .buddypanel-menu .current-menu-item > a .bp-notifications-count {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* ================================================================
   Section Labels (bb-menu-section)
   ================================================================ */
.buddypanel .buddypanel-menu .bb-menu-section,
.buddypanel .buddypanel-menu li.bb-menu-section > a {
  color: var(--gx-sidebar-section-color) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  padding: 18px 12px 6px !important;
  display: block !important;
  pointer-events: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.buddypanel .buddypanel-menu li.bb-menu-section {
  margin-top: 4px !important;
}

/* ================================================================
   Sub-menus (dropdown / nested)
   ================================================================ */
.buddypanel .buddypanel-menu .menu-item-has-children > .sub-menu {
  background-color: rgba(0, 0, 0, 0.18) !important;
  border-radius: var(--gx-radius-md) !important;
  margin: 4px 0 4px 30px !important;
  padding: 4px 0 !important;
  border: none !important;
  list-style: none !important;
}

.buddypanel .buddypanel-menu .sub-menu .menu-item > a {
  padding: 7px 12px !important;
  font-size: 13px !important;
  border-radius: var(--gx-radius-sm) !important;
}

/* Chevron arrow for sub-menu toggle */
.buddypanel .buddypanel-menu .menu-item-has-children > a::after {
  content: '' !important;
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  opacity: 0.5 !important;
  transition: transform 0.2s ease !important;
}

.buddypanel .buddypanel-menu .menu-item-has-children.open > a::after,
.buddypanel .buddypanel-menu .menu-item-has-children.sfwd-open > a::after,
.buddypanel .buddypanel-menu .menu-item-has-children.bb-open > a::after {
  transform: rotate(-135deg) !important;
}

/* ================================================================
   Sidebar Footer — Profile Section (added via PHP)
   ================================================================ */
.gx-sidebar-footer {
  flex-shrink: 0 !important;
  border-top: 1px solid var(--gx-sidebar-border) !important;
  padding: 10px 12px !important;
  position: relative !important;
}

/* Profile popup — anchored above footer */
.gx-sidebar-profile-popup {
  position: absolute !important;
  bottom: calc(100% + 4px) !important;
  left: 8px !important;
  right: 8px !important;
  min-width: 200px !important;
  background-color: #1E293B !important;
  border: 1px solid var(--gx-sidebar-border) !important;
  border-radius: var(--gx-radius-lg) !important;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  max-height: none !important;
  z-index: 500 !important;
  /* Hidden by default */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease !important;
  pointer-events: none !important;
}

.gx-sidebar-footer.gx-popup-open .gx-sidebar-profile-popup {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Custom scrollbar inside popup */
.gx-sidebar-profile-popup::-webkit-scrollbar {
  width: 3px;
}
.gx-sidebar-profile-popup::-webkit-scrollbar-track {
  background: transparent;
}
.gx-sidebar-profile-popup::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
}

.gx-sidebar-profile-popup-inner {
  padding: 6px !important;
}

/* ---- Popup header ---- */
#gx-sidebar-profile-popup .gx-sidebar-profile-popup-header {
  padding: 12px 10px !important;
  border-bottom: 1px solid var(--gx-sidebar-border) !important;
}

#gx-sidebar-profile-popup .gx-sidebar-popup-user-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  width: 100% !important;
}

/* Hide the avatar alt-text artefact; size the image */
#gx-sidebar-profile-popup .gx-sidebar-popup-user-link img.avatar,
#gx-sidebar-profile-popup .gx-sidebar-popup-user-link img {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: var(--gx-radius-md) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;   /* suppresses alt-text rendering */
  color: transparent !important;
}

#gx-sidebar-profile-popup .gx-sidebar-popup-user-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#gx-sidebar-profile-popup .gx-sidebar-popup-user-name {
  display: block !important;
  color: #E2E8F0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
}

#gx-sidebar-profile-popup .gx-sidebar-popup-user-role {
  display: block !important;
  color: var(--gx-sidebar-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
}

/* ================================================================
   Popup Menu — BuddyBoss Admin Bar HTML
   BuddyBoss renders the header-my-account menu using Admin Bar markup:
     parent  → <li class="menupop [parent]">
     trigger → <a class="ab-item" aria-haspopup="true">
     submenu → <div class="ab-sub-wrapper"> > <ul class="ab-submenu">
     child   → <li> > <a class="ab-item">
     logout  → <li class="logout-link"> > <a>
   ================================================================ */

/* Reset bullets / spacing on everything inside popup */
#gx-sidebar-profile-popup,
#gx-sidebar-profile-popup ul,
#gx-sidebar-profile-popup li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Position anchor for flyout sub-menus */
#gx-sidebar-profile-popup li.menupop {
  position: relative !important;
}

/* Hide BuddyBoss's built-in chevron arrow */
#gx-sidebar-profile-popup .wp-admin-bar-arrow {
  display: none !important;
}

/* ---- Sub-menu flyout: hidden, positioned to the right of the popup ---- */
#gx-sidebar-profile-popup li.menupop > .ab-sub-wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /* Flyout card positioning */
  position: absolute !important;
  left: 100% !important;
  top: -6px !important;
  padding-left: 6px !important;   /* transparent bridge keeps mouse in hit-area */
  z-index: 9999 !important;
  /* Reset any inherited styles */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-width: 175px !important;
}

/* ---- Reveal flyout on parent hover ---- */
#gx-sidebar-profile-popup li.menupop:hover > .ab-sub-wrapper {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* White card on the submenu list itself */
#gx-sidebar-profile-popup ul.ab-submenu {
  list-style: none !important;
  padding: 6px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  min-width: 160px !important;
}

/* ---- Parent item — section-label style ---- */
#gx-sidebar-profile-popup li.menupop > a.ab-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.7px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  white-space: nowrap !important;
}

#gx-sidebar-profile-popup li.menupop > a.ab-item i {
  font-size: 16px !important;
  color: #fff !important;
  width: auto !important;
  min-width: auto !important;
  flex-shrink: 0 !important;
}

#gx-sidebar-profile-popup li.menupop:hover > a.ab-item {
  color: #94A3B8 !important;
  background: transparent !important;
}

#gx-sidebar-profile-popup li.menupop:hover > a.ab-item i {
  color: #94A3B8 !important;
}

/* Thin divider between sibling parent sections */
#gx-sidebar-profile-popup li.menupop + li.menupop > a.ab-item {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  /* padding-top: 12px !important; */
}

/* ---- Child items (inside white flyout card) ---- */
#gx-sidebar-profile-popup ul.ab-submenu > li > a.ab-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--gx-radius-md) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap !important;
  transition: var(--gx-transition) !important;
  line-height: 1.15;
}

#gx-sidebar-profile-popup ul.ab-submenu > li > a.ab-item:hover {
    background-color: var(--gx-primary-light) !important;
    color: var(--gx-primary) !important;
}

/* ---- Log Out item ---- */
#gx-sidebar-profile-popup li.logout-link {
  margin-top: 4px !important;
}

#gx-sidebar-profile-popup li.logout-link > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  color: #94A3B8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: var(--gx-radius-md) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: var(--gx-transition) !important;
  white-space: nowrap !important;
}

#gx-sidebar-profile-popup li.logout-link > a:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #EF4444 !important;
}

#gx-sidebar-profile-popup li.logout-link > a i {
  font-size: 14px !important;
  color: #64748B !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

#gx-sidebar-profile-popup li.logout-link > a:hover i {
  color: #EF4444 !important;
}

/* Profile trigger button */
.gx-sidebar-profile-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: var(--gx-radius-md) !important;
  text-decoration: none !important;
  transition: var(--gx-transition) !important;
  cursor: pointer !important;
  width: 100% !important;
  background: none !important;
  border: none !important;
  outline: none !important;
}

.gx-sidebar-profile-link:hover {
  background-color: var(--gx-sidebar-hover-bg) !important;
}

/* Profile popup chevron */
.gx-sidebar-profile-dots {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--gx-radius-md) !important;
  color: var(--gx-sidebar-section-color) !important;
  transition: var(--gx-transition) !important;
}

.gx-sidebar-profile-link:hover .gx-sidebar-profile-dots {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--gx-sidebar-text-hover) !important;
}

/* Chevron dims when popup is open */
.gx-sidebar-footer.gx-popup-open .gx-sidebar-profile-dots {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--gx-sidebar-text-active) !important;
}

.gx-sidebar-profile-avatar {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--gx-radius-full) !important;
  overflow: hidden !important;
  background-color: var(--gx-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gx-sidebar-profile-avatar img {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  object-fit: cover !important;
  border-radius: var(--gx-radius-full) !important;
  display: block !important;
}

.gx-sidebar-profile-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
}

.gx-sidebar-profile-name {
  display: block !important;
  color: #E2E8F0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.gx-sidebar-profile-role {
  display: block !important;
  color: var(--gx-sidebar-text) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 1px !important;
  line-height: 1.3 !important;
}

.gx-sidebar-profile-chevron {
  display: block !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: var(--gx-sidebar-text) !important
}

/* ================================================================
   Sidebar Transition State
   BuddyBoss adds .buddypanel-transtioned to body during the CSS
   width animation, then removes it after transitionend + 200ms.

   Approach:
   - SHARED (both directions): clip overflow, freeze item transitions,
     hide popup, lock logo to collapsed height so no vertical shift.
   - OPENING (narrow → wide): pin icon at its exact collapsed position
     via flex-start + fixed padding-left, so the icon stays still
     while the sidebar background grows around it. Labels hidden.
   - CLOSING (wide → narrow): force collapsed layout immediately so
     the sidebar shrinks cleanly in icon-only mode.
   ================================================================ */

/* ── Shared: both OPEN and CLOSE transitions ─────────────────── */

/* Clip any overflow while sidebar width is animating */
body.buddypanel-transtioned .buddypanel {
  overflow: hidden !important;
}

/* Freeze per-item transitions — prevents the "dual animation" glitch
   where padding/layout on <a> elements animates at the same time as
   the sidebar width, causing icons to judder or drift. */
body.buddypanel-transtioned .buddypanel .buddypanel-menu .menu-item > a,
body.buddypanel-transtioned .buddypanel .side-panel-menu .menu-item > a {
  transition: none !important;
}

/* Hide profile popup during animation */
body.buddypanel-transtioned .gx-sidebar-profile-popup {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Lock logo area to collapsed dimensions for BOTH directions.
   Without this, when buddypanel-open is added the logo area
   instantly jumps from collapsed padding/size to expanded, shifting
   all menu items down mid-animation. Applying to both directions
   gives a consistent logo height throughout the width transition. */
body.buddypanel-transtioned .buddypanel #site-logo,
body.buddypanel-transtioned .buddypanel .site-branding {
  padding: 12px 6px !important;
  justify-content: center !important;
}

body.buddypanel-transtioned .buddypanel #site-logo .site-title a,
body.buddypanel-transtioned .buddypanel .site-branding .site-title a {
  font-size: 0 !important;
}

/* Constrain the image logo to collapsed icon-size during animation.
   Without this the image logo expands to full width (e.g. 130px)
   the moment buddypanel-open is added, showing the big logo inside
   a still-narrow sidebar — the main visible glitch in the video. */
body.buddypanel-transtioned .buddypanel #site-logo img.custom-logo,
body.buddypanel-transtioned .buddypanel .site-branding img.bb-logo,
body.buddypanel-transtioned .buddypanel .site-branding img.custom-logo {
  max-height: 28px !important;
  max-width: 38px !important;
  width: auto !important;
}

body.buddypanel-transtioned .buddypanel .buddypanel-site-icon {
  padding: 12px 6px !important;
  justify-content: center !important;
}

/* ── OPENING (narrow → wide) ─────────────────────────────────── */

/* In the 68px collapsed sidebar with justify-content:center and
   padding: 10px 8px, the icon's left edge sits at exactly 23px
   from the link's left edge:
     left_edge = padding_left + (content_width - icon_width) / 2
               = 8 + (52 - 22) / 2 = 8 + 15 = 23px
   Using flex-start + padding-left:23px reproduces that position
   so the icon does NOT drift right as the sidebar grows. */
body.buddypanel-transtioned.buddypanel-open .buddypanel .side-panel-inner {
  padding: 10px 8px !important;
}

body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a,
body.buddypanel-transtioned.buddypanel-open .bb-template-v2 .buddypanel .side-panel-menu li > a {
  justify-content: flex-start !important;
  padding: 10px 8px 10px 23px !important;
  width: 100% !important;
}

/* Lock icon size to match collapsed state during opening */
body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a i,
body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a .bb-icon-l,
body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a .bb-icon-f,
body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a .bb-icon-rl {
  font-size: 20px !important;
  width: auto !important;
  min-width: auto !important;
}

/* Hide labels — only the pinned icon is visible during opening */
body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a
  span:not(.count):not(.bp-notifications-count):not(.bpn-notifications-count),
body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a .menu-label,
body.buddypanel-transtioned.buddypanel-open .buddypanel .buddypanel-menu .menu-item > a .link-text {
  display: none !important;
}

body.buddypanel-transtioned.buddypanel-open .gx-sidebar-footer {
  padding: 10px 8px !important;
}

body.buddypanel-transtioned.buddypanel-open .gx-sidebar-profile-link {
  justify-content: center !important;
  padding: 8px !important;
}

body.buddypanel-transtioned.buddypanel-open .gx-sidebar-profile-info,
body.buddypanel-transtioned.buddypanel-open .gx-sidebar-profile-dots {
  display: none !important;
}

/* ── CLOSING (wide → narrow) ─────────────────────────────────── */

/* Force collapsed layout immediately when buddypanel-open is removed.
   Higher specificity than body:not(.buddypanel-open) beats any
   BuddyBoss open-state styles still in flight. */
body.buddypanel-transtioned:not(.buddypanel-open) .buddypanel .side-panel-inner {
  padding: 10px 8px !important;
}

body.buddypanel-transtioned:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a {
  justify-content: center !important;
  padding: 10px 8px !important;
  width: 100% !important;
}

body.buddypanel-transtioned:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a
  span:not(.count):not(.bp-notifications-count):not(.bpn-notifications-count),
body.buddypanel-transtioned:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .menu-label,
body.buddypanel-transtioned:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .link-text {
  display: none !important;
}

body.buddypanel-transtioned:not(.buddypanel-open) .gx-sidebar-profile-info,
body.buddypanel-transtioned:not(.buddypanel-open) .gx-sidebar-profile-dots {
  display: none !important;
}

body.buddypanel-transtioned:not(.buddypanel-open) .gx-sidebar-profile-link {
  justify-content: center !important;
  padding: 8px !important;
}

body.buddypanel-transtioned:not(.buddypanel-open) .gx-sidebar-footer {
  padding: 10px 8px !important;
}

/* Logo already covered by the shared body.buddypanel-transtioned rules above */
body.buddypanel-transtioned:not(.buddypanel-open) .buddypanel .buddypanel-site-icon {
  padding: 12px 6px !important;
  justify-content: center !important;
}

/* ================================================================
   Collapsed Sidebar State
   BuddyBoss adds .buddypanel-open to body when OPEN;
   collapsed = body:not(.buddypanel-open)
   ================================================================ */
body:not(.buddypanel-open) .buddypanel .side-panel-inner {
  padding: 10px 8px !important;
}

body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a {
  justify-content: center !important;
  padding: 10px 8px !important;
}

/* Full-width links — BuddyBoss template-v2 sets width: calc(100%-20px) which
   shrinks the clickable area too much in collapsed icon-only mode */
body:not(.buddypanel-open) .buddypanel .side-panel-menu .menu-item > a,
body:not(.buddypanel-open) .bb-template-v2 .buddypanel .side-panel-menu li > a {
  width: 100% !important;
}

/* Icons — slightly larger for legibility in narrow icon-only sidebar */
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a i,
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .bb-icon-l,
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .bb-icon-f,
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .bb-icon-rl,
body:not(.buddypanel-open) .buddypanel .side-panel-menu .menu-item > a i,
body:not(.buddypanel-open) .buddypanel .side-panel-menu .menu-item > a .bb-icon-l,
body:not(.buddypanel-open) .buddypanel .side-panel-menu .menu-item > a .bb-icon-f {
  font-size: 20px !important;
  width: auto !important;
  min-width: auto !important;
}

/* Hide text labels in collapsed state — keep only the icon */
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a span:not(.count):not(.bp-notifications-count):not(.bpn-notifications-count),
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .menu-label,
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .link-text {
  display: none !important;
}

/* Notification count: corner badge when icon-only */
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .count,
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .bp-notifications-count,
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .menu-item > a .bpn-notifications-count {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  margin-left: 0 !important;
  min-width: 14px !important;
  height: 14px !important;
  font-size: 9px !important;
  padding: 0 3px !important;
}

/* Sub-menus hidden in collapsed mode */
body:not(.buddypanel-open) .buddypanel .buddypanel-menu .sub-menu {
  display: none !important;
}

/* Logo / site branding — reduce padding so it isn't clipped in narrow sidebar */
body:not(.buddypanel-open) .buddypanel #site-logo,
body:not(.buddypanel-open) .buddypanel .site-branding {
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

body:not(.buddypanel-open) .buddypanel #site-logo .site-title a,
body:not(.buddypanel-open) .buddypanel .site-branding .site-title a {
  font-size: 0 !important;    /* hide text logo in collapsed state */
  overflow: hidden !important;
}

/* Image logo — constrain to fit inside narrow sidebar */
body:not(.buddypanel-open) .buddypanel #site-logo img.custom-logo,
body:not(.buddypanel-open) .buddypanel .site-branding img.bb-logo,
body:not(.buddypanel-open) .buddypanel .site-branding img.custom-logo {
  max-height: 28px !important;
  max-width: 38px !important;
  width: auto !important;
}

/* Site icon (favicon) — reduce padding so icon doesn't overflow sidebar */
body:not(.buddypanel-open) .buddypanel .buddypanel-site-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 74px;
}

body:not(.buddypanel-open) .buddypanel .buddypanel-site-icon img {
  width: 30px !important;
  height: 30px !important;
}

body:not(.buddypanel-open) .gx-sidebar-footer {
  padding: 10px 8px !important;
}

body:not(.buddypanel-open) .gx-sidebar-profile-link {
  justify-content: center !important;
  padding: 8px !important;
}

body:not(.buddypanel-open) .gx-sidebar-profile-info,
body:not(.buddypanel-open) .gx-sidebar-profile-dots {
  display: none !important;
}

/* ================================================================
   Collapsed sidebar: profile popup appears to the RIGHT
   ================================================================ */
body:not(.buddypanel-open) .gx-sidebar-profile-popup {
  bottom: 0 !important;
  top: auto !important;
  left: calc(100% + 4px) !important;
  right: auto !important;
  min-width: 220px !important;
  transform: translateX(-8px) !important;
}

body:not(.buddypanel-open) .gx-sidebar-footer.gx-popup-open .gx-sidebar-profile-popup {
  transform: none !important;
}

/* ================================================================
   BuddyBoss Panel Logo area adjustments
   ================================================================ */
.buddypanel .bp-member-avatar,
.buddypanel .bp-user-photo {
  border-radius: var(--gx-radius-md) !important;
}

/* Remove any BuddyBoss default panel shadows */
.buddypanel::after,
.buddypanel::before {
  display: none !important;
}

/* ================================================================
   Parent Theme Override — data-balloon ::after artifact fix
   The parent theme's margin offsets cause ::after (the arrow/image
   artefact) to render in the wrong place. Hide it entirely; the
   ::before text bubble still shows correctly.
   ================================================================ */
.buddypanel [data-balloon][data-balloon-pos=right]::after {
  display: none !important;
}

/* ================================================================
   Collapsed Sidebar: Nav Item Tooltip (balloon on icon hover)
   ================================================================ */
#gx-sidebar-nav-tooltip {
  position: fixed;
  background: #1E293B;
  color: #E2E8F0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: 7px;
  white-space: nowrap;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

#gx-sidebar-nav-tooltip.gx-tooltip-visible {
  opacity: 1;
  visibility: visible;
}

/* ================================================================
   Mobile Overlay Backdrop (injected by JS)
   ================================================================ */
.gx-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  cursor: pointer;
}

body.gx-mobile-nav-open .gx-mobile-overlay {
  display: block;
}

.bb-template-v2.buddypanel-open .buddypanel .side-panel-inner li:not(.current-menu-item) a i:not(.bb-icon-angle-down) {
    opacity: 1;
}