/* =============================================================================
   DESIGN REFRESH: Sidebar (Figma)
   Source: https://www.figma.com/design/tg3U3gNcIYMn9aY9JYrIZc/AMFM-Portal?node-id=71-7011
   Date: 2026-01-19
   Scope: Desktop sidebar only (aside.buddypanel)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Design Tokens (CSS Variables)
   ----------------------------------------------------------------------------- */
aside.buddypanel {
  /* Background */
  --sidebar-bg-base: #0c0e12;
  --sidebar-bg-alt: #13161b;
  --sidebar-border: #22262f;

  /* Text Colors */
  --sidebar-text-primary: #f7f7f7;
  --sidebar-text-secondary: #cecfd2;
  --sidebar-text-muted: #94979c;
  --sidebar-text-dim: #61656c;

  /* Brand / Active State */
  --sidebar-brand-500: #c07858;
  --sidebar-brand-800: #683b27;
  --sidebar-active-gradient: linear-gradient(
    90deg,
    rgba(192, 120, 88, 0.35) 0%,
    rgba(104, 59, 39, 0.35) 100%
  );

  /* Spacing */
  --sidebar-spacing-xxs: 2px;
  --sidebar-spacing-xs: 4px;
  --sidebar-spacing-sm: 6px;
  --sidebar-spacing-md: 8px;
  --sidebar-spacing-lg: 12px;
  --sidebar-spacing-xl: 16px;
  --sidebar-spacing-2xl: 20px;
  --sidebar-spacing-3xl: 24px;
  --sidebar-spacing-4xl: 32px;

  /* Radius */
  --sidebar-radius-sm: 6px;
  --sidebar-radius-xl: 12px;

  /* Typography */
  --sidebar-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sidebar-font-size-xs: 12px;
  --sidebar-font-size-sm: 14px;
  --sidebar-line-height-xs: 18px;
  --sidebar-line-height-sm: 20px;

  /* Icon */
  --sidebar-icon-size: 24px;
}

/* -----------------------------------------------------------------------------
   Sidebar Container
   ----------------------------------------------------------------------------- */
aside.buddypanel {
  /* Gradient background aproximately matching Figma Design System
     TODO: Use the actual Figma Design System colors */

  background: 
    linear-gradient(
      160deg,
      #0b0b0d 0%,
      #0f0f11 20%,
      #3b3d42 45%,
      #0c0e12 100%
    ) !important;
  border-radius: 0; /* No rounded corners per Figma */
  font-family: var(--sidebar-font-family);
}

/* -----------------------------------------------------------------------------
   Logo Area (scoped to sidebar only)
   ----------------------------------------------------------------------------- */
aside.buddypanel #site-logo,
aside.buddypanel .site-branding,
aside.buddypanel .site-branding.buddypanel_logo_display_on {
  padding: var(--sidebar-spacing-3xl) var(--sidebar-spacing-2xl) var(--sidebar-spacing-4xl) !important;
  background: transparent !important;
  background-color: transparent !important;
}

aside.buddypanel #site-logo .site-title img,
aside.buddypanel #site-logo .site-title svg {
  /* Ensure logo is white/inverted for dark background */
  filter: brightness(0) invert(1);
}

/* -----------------------------------------------------------------------------
   Menu Container
   ----------------------------------------------------------------------------- */
aside.buddypanel .side-panel-inner {
  padding: 0 var(--sidebar-spacing-xl) !important;
}

aside.buddypanel .side-panel-menu-container {
  padding: 0 !important;
}

/* Reset all default list margins/padding from theme */
aside.buddypanel .buddypanel-menu,
aside.buddypanel ul.buddypanel-menu {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

aside.buddypanel .buddypanel-menu > li {
  list-style: none !important;
}

/* -----------------------------------------------------------------------------
   Section Headers (.bb-menu-section)
   ----------------------------------------------------------------------------- */
aside.buddypanel .buddypanel-menu li.bb-menu-section {
  margin-top: var(--sidebar-spacing-2xl) !important;
  margin-bottom: 0 !important;
  padding: 0 var(--sidebar-spacing-xs) var(--sidebar-spacing-xs) !important;
}

aside.buddypanel .buddypanel-menu li.bb-menu-section > .bb-menu-item,
aside.buddypanel .buddypanel-menu li.bb-menu-section > a {
  font-size: var(--sidebar-font-size-xs) !important;
  font-weight: 600 !important;
  line-height: var(--sidebar-line-height-xs) !important;
  color: var(--sidebar-text-secondary) !important; /* Same as menu items for better contrast */
  text-transform: none !important; /* Figma shows title case, not uppercase */
  letter-spacing: 0 !important;
  padding: var(--sidebar-spacing-xs) 0 !important;
  background: transparent !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* First section header doesn't need top margin */
aside.buddypanel .buddypanel-menu li.bb-menu-section:first-child {
  margin-top: 0 !important;
}

/* Remove any hover/active effects on section headers */
aside.buddypanel .buddypanel-menu li.bb-menu-section:hover,
aside.buddypanel .buddypanel-menu li.bb-menu-section:focus,
aside.buddypanel .buddypanel-menu li.bb-menu-section > .bb-menu-item:hover,
aside.buddypanel .buddypanel-menu li.bb-menu-section > a:hover {
  background: transparent !important;
  color: var(--sidebar-text-secondary) !important;
}

/* Hide icons in section headers */
aside.buddypanel .buddypanel-menu li.bb-menu-section i,
aside.buddypanel .buddypanel-menu li.bb-menu-section i[class*="bb-icon"],
aside.buddypanel .buddypanel-menu li.bb-menu-section .bb-menu-item i,
aside.buddypanel .buddypanel-menu li.bb-menu-section .bb-menu-item i::before {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide custom background-image icons on section headers (from theme-overrides.css) */
/* These use ::before pseudo-elements with background-image instead of icon fonts */
aside.buddypanel .buddypanel-menu li.bb-menu-section > .bb-menu-item::before,
aside.buddypanel .buddypanel-menu li.bb-menu-section > a::before,
aside.buddypanel #menu-item-8878 > .bb-menu-item::before,
aside.buddypanel #menu-item-8877 > .bb-menu-item::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Reset padding-left that was added for the custom icons */
aside.buddypanel #menu-item-8878 > .bb-menu-item,
aside.buddypanel #menu-item-8877 > .bb-menu-item {
  padding-left: 0 !important;
  position: static !important;
}

/* -----------------------------------------------------------------------------
   Menu Items (Default/Inactive State)
   ----------------------------------------------------------------------------- */
/* Reset default theme margins */
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) {
  margin: 0 !important;
  padding: var(--sidebar-spacing-xxs) 0 !important;
}

aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--sidebar-spacing-lg) !important; /* 12px - increased from 8px for better spacing */
  padding: var(--sidebar-spacing-md) var(--sidebar-spacing-lg) !important;
  margin: 0 !important;
  border-radius: var(--sidebar-radius-sm) !important;
  font-size: var(--sidebar-font-size-sm) !important;
  font-weight: 500 !important;
  line-height: var(--sidebar-line-height-sm) !important;
  color: var(--sidebar-text-secondary) !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

/* Icons (inactive) - BuddyBoss uses <i> with bb-icon-* classes */
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item > i,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--sidebar-icon-size) !important;
  height: var(--sidebar-icon-size) !important;
  min-width: var(--sidebar-icon-size) !important;
  font-size: 20px !important;
  color: var(--sidebar-text-secondary) !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important; /* Gap is handled by parent flex gap */
}

/* Icon pseudo-element (where the actual icon renders) */
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item > i::before,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a > i::before {
  color: inherit !important;
  font-size: inherit !important;
}

/* -----------------------------------------------------------------------------
   Menu Items (Hover State)
   ----------------------------------------------------------------------------- */
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a:hover,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--sidebar-text-primary) !important;
}

aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a:hover > i,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item:hover > i {
  color: var(--sidebar-text-primary) !important;
}

/* -----------------------------------------------------------------------------
   Menu Items (Active/Current State)
   ----------------------------------------------------------------------------- */
aside.buddypanel .buddypanel-menu > li.current-menu-item > a,
aside.buddypanel .buddypanel-menu > li.current-menu-item > .bb-menu-item,
aside.buddypanel .buddypanel-menu > li.current_page_item > a,
aside.buddypanel .buddypanel-menu > li.current_page_item > .bb-menu-item {
  background: var(--sidebar-active-gradient) !important;
  color: rgba(255, 255, 255, 0.7) !important; /* 70% opacity per Figma */
}

/* Active item icon with 70% opacity */
aside.buddypanel .buddypanel-menu > li.current-menu-item > .bb-menu-item > i,
aside.buddypanel .buddypanel-menu > li.current-menu-item > a > i,
aside.buddypanel .buddypanel-menu > li.current_page_item > .bb-menu-item > i,
aside.buddypanel .buddypanel-menu > li.current_page_item > a > i {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* -----------------------------------------------------------------------------
   Submenu Items (if any)
   ----------------------------------------------------------------------------- */
aside.buddypanel .buddypanel-menu .sub-menu {
  background: transparent;
  padding-left: calc(var(--sidebar-icon-size) + var(--sidebar-spacing-md) + var(--sidebar-spacing-lg));
}

aside.buddypanel .buddypanel-menu .sub-menu li a {
  font-size: var(--sidebar-font-size-sm);
  color: var(--sidebar-text-secondary) !important;
  padding: var(--sidebar-spacing-sm) var(--sidebar-spacing-lg);
  border-radius: var(--sidebar-radius-sm);
}

aside.buddypanel .buddypanel-menu .sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--sidebar-text-primary) !important;
}

/* -----------------------------------------------------------------------------
   Bottom Section (Support, Settings)
   Positioned toward bottom of sidebar
   ----------------------------------------------------------------------------- */
aside.buddypanel .buddypanel-menu li[class*="support"],
aside.buddypanel .buddypanel-menu li[class*="settings"],
aside.buddypanel .buddypanel-menu li[id*="support"],
aside.buddypanel .buddypanel-menu li[id*="settings"] {
  /* These will naturally flow, but we can add margin-top: auto via flexbox if needed */
}

/* -----------------------------------------------------------------------------
   Desktop-Only Media Query
   Ensures these styles don't affect mobile sidebar
   ----------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  /* Reset sidebar styles for tablet/mobile if needed */
  aside.buddypanel {
    border-radius: 0;
  }
}

/* -----------------------------------------------------------------------------
   Utility: User Footer Placeholder
   This section is for future JS-injected user info at sidebar bottom.
   The markup would be added via JS; these styles are ready.
   ----------------------------------------------------------------------------- */
aside.buddypanel .sidebar-user-footer {
  display: flex;
  align-items: center;
  gap: var(--sidebar-spacing-lg);
  padding: var(--sidebar-spacing-xl) var(--sidebar-spacing-2xl);
  border-top: 1px solid var(--sidebar-border);
  margin-top: auto;
}

aside.buddypanel .sidebar-user-footer .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

aside.buddypanel .sidebar-user-footer .user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Online indicator (green dot) */
aside.buddypanel .sidebar-user-footer .user-avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #47cd89;
  border: 2px solid var(--sidebar-bg-base);
  border-radius: 50%;
}

aside.buddypanel .sidebar-user-footer .user-info {
  flex: 1;
  min-width: 0;
}

aside.buddypanel .sidebar-user-footer .user-name {
  font-size: var(--sidebar-font-size-sm);
  font-weight: 600;
  color: var(--sidebar-text-primary);
  line-height: var(--sidebar-line-height-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

aside.buddypanel .sidebar-user-footer .user-email {
  font-size: var(--sidebar-font-size-sm);
  font-weight: 400;
  color: var(--sidebar-text-muted);
  line-height: var(--sidebar-line-height-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   Custom Sidebar Icons
   Replaces default BuddyBoss icons with Figma-exported SVGs
   Icon path: /wp-content/themes/buddyboss-theme-child/assets/icons/
   ----------------------------------------------------------------------------- */

/* Hide default BuddyBoss icon font on all menu items */
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item > i.bb-icon-file,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a > i.bb-icon-file {
  font-size: 0 !important;
  width: var(--sidebar-icon-size) !important;
  height: var(--sidebar-icon-size) !important;
}

aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item > i.bb-icon-file::before,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a > i.bb-icon-file::before {
  content: none !important;
  display: none !important;
}

/* Base styles for custom icon pseudo-elements */
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section) > a > i.bb-icon-file::after {
  content: "" !important;
  display: block !important;
  width: var(--sidebar-icon-size) !important;
  height: var(--sidebar-icon-size) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: filter 0.15s ease !important;
}

/* Hover state - brighten icons */
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section):hover > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel .buddypanel-menu > li:not(.bb-menu-section):hover > a > i.bb-icon-file::after {
  filter: brightness(1.3) !important;
}

/* Active state - brighten icons more */
aside.buddypanel .buddypanel-menu > li.current-menu-item > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel .buddypanel-menu > li.current-menu-item > a > i.bb-icon-file::after,
aside.buddypanel .buddypanel-menu > li.current_page_item > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel .buddypanel-menu > li.current_page_item > a > i.bb-icon-file::after {
  filter: brightness(1.5) !important;
}

/* --- Individual Menu Item Icons --- */

/* Home (menu-item-12569) */
aside.buddypanel #menu-item-12569 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-12569 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/home.svg') !important;
}

/* HeartChart Dashboard (menu-item-12635) */
aside.buddypanel #menu-item-12635 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-12635 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/grid.svg') !important;
}

/* AMFM Training (menu-item-2292) */
aside.buddypanel #menu-item-2292 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2292 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/book-open.svg') !important;
}

/* Our Marriage Champions (menu-item-12139) */
aside.buddypanel #menu-item-12139 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-12139 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/trophy.svg') !important;
}

/* Loveology (menu-item-2325) */
aside.buddypanel #menu-item-2325 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2325 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/loveology.svg') !important;
}

/* Assessments (menu-item-2324) */
aside.buddypanel #menu-item-2324 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2324 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/list.svg') !important;
}

/* Small Groups (menu-item-2323) */
aside.buddypanel #menu-item-2323 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2323 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/intersect-three.svg') !important;
}

/* Date Night Kits (menu-item-2322) */
aside.buddypanel #menu-item-2322 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2322 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/heart.svg') !important;
}

/* Speakers Collective (menu-item-2333) */
aside.buddypanel #menu-item-2333 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2333 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/share.svg') !important;
}

/* Counseling Network (menu-item-2332) */
aside.buddypanel #menu-item-2332 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2332 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/users-three.svg') !important;
}

/* WeDo (menu-item-2334) */
aside.buddypanel #menu-item-2334 > .bb-menu-item > i.bb-icon-file::after,
aside.buddypanel #menu-item-2334 > a > i.bb-icon-file::after {
  background-image: url('/wp-content/themes/buddyboss-theme-child/assets/icons/wedo.svg') !important;
}

/* Contact Us (menu-item-3398) - legacy item with different markup structure */
/* Uses <img> instead of <i> icon, and span without .link-text class */
/* TODO: Hide this when user profile footer is ready */

/* Make the link match other menu items (flex layout with gap) */
aside.buddypanel #menu-item-3398 > a {
  display: flex !important;
  align-items: center !important;
  gap: var(--sidebar-spacing-lg) !important;
  padding: var(--sidebar-spacing-md) var(--sidebar-spacing-lg) !important;
}

/* Style the chevron image to match icon sizing */
/* Reset all the theme margins that are causing misalignment */
aside.buddypanel #menu-item-3398 > a > img._mi,
aside.buddypanel #menu-item-3398 > a > img:first-child,
aside.buddypanel #menu-item-3398 > a > img._before {
  width: var(--sidebar-icon-size) !important;
  height: var(--sidebar-icon-size) !important;
  min-width: var(--sidebar-icon-size) !important;
  max-width: var(--sidebar-icon-size) !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  filter: brightness(0) invert(0.8) !important; /* Match icon color */
  /* Reset all theme margins */
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* Style the span text to match other items */
aside.buddypanel #menu-item-3398 > a > span {
  font-size: var(--sidebar-font-size-sm) !important;
  font-weight: 500 !important;
  line-height: var(--sidebar-line-height-sm) !important;
  color: var(--sidebar-text-secondary) !important;
}

/* Hover state */
aside.buddypanel #menu-item-3398 > a:hover > img._mi {
  filter: brightness(0) invert(1) !important;
}

aside.buddypanel #menu-item-3398 > a:hover > span {
  color: var(--sidebar-text-primary) !important;
}

/* Active state */
aside.buddypanel #menu-item-3398.current-menu-item > a,
aside.buddypanel #menu-item-3398.current_page_item > a {
  background: var(--sidebar-active-gradient) !important;
}

aside.buddypanel #menu-item-3398.current-menu-item > a > img._mi,
aside.buddypanel #menu-item-3398.current_page_item > a > img._mi {
  filter: brightness(0) invert(0.7) !important;
}

aside.buddypanel #menu-item-3398.current-menu-item > a > span,
aside.buddypanel #menu-item-3398.current_page_item > a > span {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* =============================================================================
   END: Sidebar Design Refresh
   ============================================================================= */