/* TeamBPP Portal Sidebar Toggle v1.0.7 */

:root {
  --teambpp-toggle-bg: #2a073f;
  --teambpp-toggle-gold: #d8b13f;
  --teambpp-toggle-text: #ffffff;
  --teambpp-toggle-shadow: 0 10px 24px rgba(42, 7, 63, 0.28);
  --teambpp-sidebar-current-width: 330px;
}

#teambpp-portal-sidebar-toggle {
  position: fixed;
  left: var(--teambpp-toggle-left, 14px);
  top: var(--teambpp-toggle-top, 92px);
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(216, 177, 63, 0.75);
  border-radius: 999px;
  background: var(--teambpp-toggle-bg);
  color: var(--teambpp-toggle-text);
  box-shadow: 0 8px 18px rgba(42, 7, 63, 0.22);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease, left 160ms ease, top 160ms ease;
}

#teambpp-portal-sidebar-toggle:hover,
#teambpp-portal-sidebar-toggle:focus {
  background: #3a0a57;
  outline: none;
  transform: translateY(-1px);
}

#teambpp-portal-sidebar-toggle .teambpp-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--teambpp-toggle-gold);
  color: #1b0328;
  font-size: 12px;
  font-weight: 900;
}

#teambpp-portal-sidebar-toggle .teambpp-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

body.teambpp-portal-sidebar-ready #teambpp-portal-sidebar-toggle {
  display: inline-flex;
}

/* Always use an icon-only control so it feels like the built-in Fluent Community hamburger. */


body:not(.teambpp-portal-sidebar-collapsed) #teambpp-portal-sidebar-toggle {
  transform: translateX(0);
}

body.teambpp-portal-sidebar-collapsed #teambpp-portal-sidebar-toggle {
  box-shadow: 0 8px 18px rgba(42, 7, 63, 0.18);
}

body.teambpp-portal-sidebar-collapsed #teambpp-portal-sidebar-toggle .teambpp-toggle-label::after {
  content: "Show Menu";
}

body:not(.teambpp-portal-sidebar-collapsed) #teambpp-portal-sidebar-toggle .teambpp-toggle-label::after {
  content: "Hide Menu";
}

/* Collapse the actual portal rail/wrapper, not just the menu content inside it. */
body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-shell-collapsed-by-toggle,
body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-hidden-by-toggle,
body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-left-rail-by-toggle {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  flex-basis: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  display: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-layout-collapsed-by-toggle {
  grid-template-columns: 0 minmax(0, 1fr) !important;
  column-gap: 0 !important;
  gap: 0 !important;
}

body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-expanded-target {
  margin-left: 0 !important;
  max-width: none !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* Desktop hamburger mimic:
   Some Fluent Community layouts keep an empty 300px shelf even after the menu content is hidden.
   This shifts the main app shell left into that space, which visually matches the native hamburger collapse. */
body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-main-shifted-by-toggle {
  position: relative !important;
  left: calc(-1 * var(--teambpp-sidebar-current-width, 330px)) !important;
  width: calc(100% + var(--teambpp-sidebar-current-width, 330px)) !important;
  max-width: none !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-main-shifted-by-toggle > * {
  max-width: none !important;
}

body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-left-offset-by-toggle {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* Stronger /portal app-shell reclaim: if Fluent Community keeps the content offset,
   nudge the main app by its detected left edge. */
body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-main-nudged-by-toggle {
  position: relative !important;
  left: calc(-1 * var(--teambpp-content-left-offset, 0px)) !important;
  width: calc(100% + var(--teambpp-content-left-offset, 0px)) !important;
  max-width: none !important;
}

body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-main-nudged-by-toggle > * {
  max-width: none !important;
}

@media (max-width: 1024px) {
  #teambpp-portal-sidebar-toggle {
    display: none !important;
  }
}

@media print {
  #teambpp-portal-sidebar-toggle {
    display: none !important;
  }
}


/* v1.0.5 Fluent Community /portal hard collapse fallback */
body.teambpp-portal-sidebar-collapsed .teambpp-sidebar-left-rail-by-toggle {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  flex-basis: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* v1.0.7 safety: keep the restore handle available while collapsed */
body.teambpp-portal-sidebar-collapsed #teambpp-portal-sidebar-toggle {
  display: inline-flex !important;
  left: 14px !important;
  top: var(--teambpp-toggle-top, 92px) !important;
}