/* ============================================================
   EXPERT UI FIXES - Phase 3D-A Hard Consolidation
   Critical behavioral fixes only (z-index, visibility, structural)
   ============================================================ */

/* ============================================================
   1. SIDEBAR BREAKPOINT: 960px (not 768px)
   ============================================================ */

@media (max-width: 960px) {
  #bb-nav,
  .bb-nav {
    display: none !important;
  }
  
  .bb-main {
    padding-left: 0 !important;
    /* CHUNK 160: padding-top handled by ui-layouts.css for consistent spacing */
    padding-right: var(--space-xl, 24px) !important;
    padding-bottom: var(--space-xl, 24px) !important;
  }
}

/* ============================================================
   2. HEADER BUTTON VISIBILITY (z-index fix)
   ============================================================ */

.bb-header {
  z-index: 100 !important;
  position: relative !important;
}

.bb-header-right,
.bb-profile,
.bb-search {
  z-index: 101 !important;
  position: relative !important;
}

/* ============================================================
   3. FLOATING HEADER FIX - Normalize header height
   ============================================================ */

.bb-header {
  height: 72px !important;
  min-height: 72px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* Remove conditional header height rules */
body:has(.app-header) .bb-header,
body:has(.bb-header) .bb-header {
  height: 72px !important;
}

/* ============================================================
   4. LOGO SIZE - 40px (Expert Approved)
   ============================================================ */

.bb-header-logo {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   5. SIDEBAR POSITIONING FIX (no more floating)
   ============================================================ */

#bb-nav {
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* Remove conditional top positioning */
body:has(.app-header) #bb-nav,
body:has(.bb-header) #bb-nav {
  top: 0 !important;
}

/* ============================================================
   6. ICON VISIBILITY FIX - Force icons to be visible
   Icons load (200 OK) but CSS filters/opacity are hiding them
   ============================================================ */

/* FORCE ALL SIDEBAR NAVIGATION ICONS TO BE VISIBLE */
/* Override ui-10x-polish.css filters that make icons invisible */
#bb-nav img,
#bb-nav img.bb-nav-icon,
.bb-nav img,
.bb-nav img.bb-nav-icon,
.bb-nav-item img,
.bb-nav-item img.bb-nav-icon,
.bb-nav-icon,
.bb-nav-item .bb-nav-icon,
#bb-nav .bb-nav-icon,
.bb-nav .bb-nav-icon,
#bb-nav .bb-nav-item img,
.bb-nav .bb-nav-item img {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Override ALL possible filter combinations from ui-10x-polish.css */
#bb-nav img[src*=".svg"],
.bb-nav img[src*=".svg"],
.bb-nav-item img[src*=".svg"],
.bb-nav-icon[src*=".svg"],
img.bb-nav-icon[src*=".svg"] {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* Fix wrapper clipping - ensure icon containers don't hide content */
.bb-nav-item,
#bb-nav .bb-nav-item,
.bb-nav .bb-nav-item {
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Ensure icon wrapper has proper dimensions and doesn't clip */
.bb-nav-item .bb-nav-icon,
#bb-nav .bb-nav-item .bb-nav-icon {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  display: block !important;
  overflow: visible !important;
}

/* Override any DS2 filters, transforms, or clipping that might hide icons */
.bb-nav-item img,
.bb-nav-icon,
#bb-nav img.bb-nav-icon,
#bb-nav .bb-nav-icon {
  transform: none !important;
  clip-path: none !important;
  clip: auto !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Force active state icons to be fully visible */
.bb-nav-item.active img,
.bb-nav-item.active .bb-nav-icon,
.bb-nav-item.active img.bb-nav-icon,
.bb-nav-item[aria-current="page"] img,
.bb-nav-item[aria-current="page"] .bb-nav-icon {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Override sidebar-nav and bb-nav__icon classes that might interfere */
.sidebar-nav img,
.bb-sidenav img,
.bb-nav__icon img,
img.bb-nav__icon {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

/* Ensure icons are never hidden by parent containers */
#bb-nav,
.bb-nav {
  overflow: visible !important;
}

#bb-nav .bb-nav-list,
.bb-nav .bb-nav-list {
  overflow: visible !important;
}