/**
 * Sidebar Collapse Styles
 */

/* Collapse button styling */
.sidebar-collapse-btn {
  position: fixed;
  top: 100px;
  left: 250px;
  z-index: 10000;
  background: #fff;
  border: 2px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.sidebar-collapse-btn:hover {
  background: #007bff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.sidebar-collapse-btn:hover .collapse-icon {
  color: #fff;
}

.sidebar-collapse-btn:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.sidebar-collapse-btn .collapse-icon {
  font-size: 12px;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar wrapper transitions */
.apex-sidebar-wrapper {
  transition: width 0.3s ease, flex 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
  position: relative;
  overflow: visible; /* Allow button to show outside */
}

/* Ensure sidebar aside has smooth transitions */
.apex-sidebar-aside {
  transition: width 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

/* Main content area transitions */
main,
.main-content,
.col {
  transition: width 0.3s ease, flex 0.3s ease, margin-left 0.3s ease;
}

/* Ensure row maintains layout */
.row {
  transition: all 0.3s ease;
}

/* Collapsed state - Target the main sidebar container */
.apex-sidebar-wrapper.sidebar-collapsed {
  width: 75px !important;
  min-width: 75px !important;
  flex: 0 0 75px !important;
  max-width: 75px !important;
}

/* Also target by specific sidebar classes */
.sidebar_first.sidebar-collapsed,
.sidebar-first.sidebar-collapsed,
div.sidebar-collapsed[class*="col-md-2"],
div.sidebar-collapsed[class*="col-md-3"] {
  width: 75px !important;
  min-width: 75px !important;
  flex: 0 0 75px !important;
  max-width: 75px !important;
}

/* Ensure the aside element inside is properly constrained */
.apex-sidebar-aside.sidebar-collapsed,
.sidebar-collapsed .apex-sidebar-aside {
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  padding: 10px 10px !important; /* Better centering */
}

/* When sidebar is collapsed, the main content should expand to fill space */
/* Use CSS Grid or Flexbox behavior to auto-expand */
.row:has(.sidebar-collapsed) .main-content,
.row:has(.apex-sidebar-wrapper.sidebar-collapsed) .main-content {
  flex: 1 1 auto !important;
  max-width: calc(100% - 85px) !important;
}

/* Fallback for browsers without :has() support */
.sidebar-collapsed ~ .main-content,
.sidebar-collapsed ~ main,
.apex-sidebar-wrapper.sidebar-collapsed ~ .main-content,
.apex-sidebar-wrapper.sidebar-collapsed ~ main {
  flex: 1 1 auto !important;
  max-width: calc(100% - 85px) !important;
  margin-left: 0 !important;
}

/* Hide text in collapsed state, only show icons */
.sidebar-collapsed nav ul li a,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a,
.apex-sidebar-aside.sidebar-collapsed nav ul li a {
  padding: 12px 10px !important; /* Better centering */
  text-align: center !important;
  position: relative !important;
  overflow: visible !important; /* Allow tooltips */
  white-space: nowrap !important;
  width: 100% !important;
  display: block !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

/* Hover effect for menu items - matching Solution 1 */
.sidebar-collapsed nav ul li a:hover,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a:hover,
.apex-sidebar-aside.sidebar-collapsed nav ul li a:hover {
  background: #58038a;
  transform: translateX(2px) !important;
}

/* Hide all text content in collapsed state */
.sidebar-collapsed nav ul li a span,
.sidebar-collapsed nav ul li a .nav-link-text,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a span,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a .nav-link-text,
.apex-sidebar-aside.sidebar-collapsed nav ul li a span,
.apex-sidebar-aside.sidebar-collapsed nav ul li a .nav-link-text {
  display: none !important;
}

/* Hide the actual text content but keep the link functional */
.sidebar-collapsed nav ul li a,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a,
.apex-sidebar-aside.sidebar-collapsed nav ul li a {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Show only icons in collapsed state - enhanced */
.sidebar-collapsed nav ul li a::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a::before {
  content: '';
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto !important;
  font-size: 18px !important;
  line-height: 24px !important;
  text-align: center !important;
  transition: transform 0.3s ease !important;
}

/* Scale icons on hover */
.sidebar-collapsed nav ul li a:hover::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a:hover::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a:hover::before {
  transform: scale(1.15) !important;
}

/* Add icons for menu items using Font Awesome - target by href for reliability */
.sidebar-collapsed nav ul li a[href*="my-pages"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="my-pages"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="my-pages"]::before {
  content: '\f015' !important; /* Home icon for Lander Pages */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

.sidebar-collapsed nav ul li a[href*="my-landerforms"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="my-landerforms"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="my-landerforms"]::before {
  content: '\f298' !important; /* Form icon for Lander Forms */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

.sidebar-collapsed nav ul li a[href*="my-leads"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="my-leads"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="my-leads"]::before {
  content: '\f0c0' !important; /* Users icon for Leads */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

.sidebar-collapsed nav ul li a[href*="webform"]::before,
.sidebar-collapsed nav ul li a[href*="form"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="webform"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="form"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="webform"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="form"]::before {
  content: '\f044' !important; /* Edit icon for Forms */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

.sidebar-collapsed nav ul li a[href*="domain"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="domain"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="domain"]::before {
  content: '\f0ac' !important; /* Globe icon for Domains */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

.sidebar-collapsed nav ul li a[href*="feedback"]::before,
.sidebar-collapsed nav ul li a[href*="ticket"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="feedback"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="ticket"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="feedback"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="ticket"]::before {
  content: '\f086' !important; /* Comments icon for Feedback */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

.sidebar-collapsed nav ul li a[href*="product"]::before,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a[href*="product"]::before,
.apex-sidebar-aside.sidebar-collapsed nav ul li a[href*="product"]::before {
  content: '\f07a' !important; /* Shopping cart icon for Products */
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

/* Enhanced tooltip for collapsed menu items - Solution 1 style */
.sidebar-collapsed nav ul li a:hover::after,
.apex-sidebar-wrapper.sidebar-collapsed nav ul li a:hover::after,
.apex-sidebar-aside.sidebar-collapsed nav ul li a:hover::after {
  content: attr(data-original-title) !important;
  position: absolute !important;
  left: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(33, 33, 33, 0.95) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  z-index: 10000 !important;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  animation: fadeInTooltip 0.3s ease-in-out !important;
}

@keyframes fadeInTooltip {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Hide block titles in collapsed state */
.sidebar-collapsed .block h2,
.sidebar-collapsed .block-title,
.apex-sidebar-wrapper.sidebar-collapsed .block h2,
.apex-sidebar-wrapper.sidebar-collapsed .block-title,
.apex-sidebar-aside.sidebar-collapsed .block h2,
.apex-sidebar-aside.sidebar-collapsed .block-title {
  display: none !important;
}

/* === SOLUTION 2: PULSING BRAND DOT WITH AVATAR RING === */
/* Uncomment this section and comment Solution 1 to activate */
/*
.sidebar-collapsed .site-branding,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding,
.apex-sidebar-aside.sidebar-collapsed .site-branding {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 0 !important;
  margin-bottom: 12px !important;
}

.sidebar-collapsed .site-branding img,
.sidebar-collapsed .site-branding .site-branding__logo,
.sidebar-collapsed .site-branding .site-branding__text,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding img,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding .site-branding__logo,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding .site-branding__text,
.apex-sidebar-aside.collapsed .site-branding img,
.apex-sidebar-aside.sidebar-collapsed .site-branding .site-branding__logo,
.apex-sidebar-aside.sidebar-collapsed .site-branding .site-branding__text {
  display: none !important;
}

.sidebar-collapsed .site-branding::before,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding::before,
.apex-sidebar-aside.sidebar-collapsed .site-branding::before {
  content: '';
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background: #007bff !important;
  border-radius: 50% !important;
  animation: brandPulse 2s ease-in-out infinite !important;
  box-shadow: 0 0 0 0 rgba(0,123,255,0.4) !important;
}

@keyframes brandPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0,123,255,0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(0,123,255,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
  }
}

.sidebar-collapsed .block-user img,
.apex-sidebar-wrapper.sidebar-collapsed .block-user img,
.apex-sidebar-aside.sidebar-collapsed .block-user img {
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  border: 3px solid transparent !important;
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(45deg, #007bff, #28a745, #ffc107) border-box !important;
  transition: all 0.3s ease !important;
}

.sidebar-collapsed .block-user:hover img,
.apex-sidebar-wrapper.sidebar-collapsed .block-user:hover img,
.apex-sidebar-aside.sidebar-collapsed .block-user:hover img {
  transform: rotate(360deg) scale(1.1) !important;
}
*/

/* === SOLUTION 1: ANIMATED ICON LOGO WITH SMART USER PROFILE === */

/* Logo transformations for collapsed state */
.sidebar-collapsed .site-branding,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding,
.apex-sidebar-aside.sidebar-collapsed .site-branding {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 0 !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(0,123,255,0.2) !important;
}

/* Hide original logo/text in collapsed state */
.sidebar-collapsed .site-branding img,
.sidebar-collapsed .site-branding .site-branding__logo,
.sidebar-collapsed .site-branding .site-branding__text,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding img,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding .site-branding__logo,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding .site-branding__text,
.apex-sidebar-aside.sidebar-collapsed .site-branding img,
.apex-sidebar-aside.sidebar-collapsed .site-branding .site-branding__logo,
.apex-sidebar-aside.sidebar-collapsed .site-branding .site-branding__text {
  display: none !important;
}

/* Create animated brand icon */
.sidebar-collapsed .site-branding::before,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding::before,
.apex-sidebar-aside.sidebar-collapsed .site-branding::before {
  content: '';
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
  border-radius: 8px !important;
  position: relative !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 8px rgba(0,123,255,0.3) !important;
}

/* Add "L" letter overlay for LanderPage */
.sidebar-collapsed .site-branding::after,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding::after,
.apex-sidebar-aside.sidebar-collapsed .site-branding::after {
  content: 'L' !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: white !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-family: 'Arial', sans-serif !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* Hover effect for logo */
.sidebar-collapsed .site-branding:hover::before,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding:hover::before,
.apex-sidebar-aside.sidebar-collapsed .site-branding:hover::before {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 4px 16px rgba(0,123,255,0.5) !important;
}

/* Enhanced User Profile Handling */
.sidebar-collapsed .block-user,
.apex-sidebar-wrapper.sidebar-collapsed .block-user,
.apex-sidebar-aside.sidebar-collapsed .block-user {
  position: relative !important;
  padding: 8px 0 !important;
  text-align: center !important;
  border-top: 1px solid rgba(0,123,255,0.2) !important;
  margin-top: auto !important; /* Push to bottom */
}

/* User avatar with enhanced styling */
.sidebar-collapsed .block-user img,
.apex-sidebar-wrapper.sidebar-collapsed .block-user img,
.apex-sidebar-aside.sidebar-collapsed .block-user img {
  width: 34px !important;
  height: 34px !important;
  margin: 0 auto 4px auto !important;
  border-radius: 50% !important;
  border: 2px solid #007bff !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0,123,255,0.2) !important;
}

/* User avatar hover effect */
.sidebar-collapsed .block-user:hover img,
.apex-sidebar-wrapper.sidebar-collapsed .block-user:hover img,
.apex-sidebar-aside.sidebar-collapsed .block-user:hover img {
  transform: scale(1.05) !important;
  border-color: #0056b3 !important;
  box-shadow: 0 4px 12px rgba(0,123,255,0.4) !important;
}

/* Hide user text but keep for accessibility */
.sidebar-collapsed .block-user h5,
.sidebar-collapsed .block-user p,
.apex-sidebar-wrapper.sidebar-collapsed .block-user h5,
.apex-sidebar-wrapper.sidebar-collapsed .block-user p,
.apex-sidebar-aside.sidebar-collapsed .block-user h5,
.apex-sidebar-aside.sidebar-collapsed .block-user p {
  display: none !important;
}

/* User status indicator */
.sidebar-collapsed .block-user::after,
.apex-sidebar-wrapper.sidebar-collapsed .block-user::after,
.apex-sidebar-aside.sidebar-collapsed .block-user::after {
  content: '' !important;
  position: absolute !important;
  bottom: 12px !important;
  right: 10px !important;
  width: 8px !important;
  height: 8px !important;
  background: #28a745 !important;
  border-radius: 50% !important;
  border: 1px solid white !important;
}

/* Tooltip for user profile */
.sidebar-collapsed .block-user:hover::before,
.apex-sidebar-wrapper.sidebar-collapsed .block-user:hover::before,
.apex-sidebar-aside.sidebar-collapsed .block-user:hover::before {
  content: attr(data-user-name) !important;
  position: absolute !important;
  left: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0,0,0,0.9) !important;
  color: white !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  margin-left: 10px !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

/* Shopping cart block in collapsed state */
.sidebar-collapsed .block-commerce-cart,
.apex-sidebar-wrapper.sidebar-collapsed .block-commerce-cart,
.apex-sidebar-aside.sidebar-collapsed .block-commerce-cart {
  text-align: center !important;
}

.sidebar-collapsed .block-commerce-cart span,
.apex-sidebar-wrapper.sidebar-collapsed .block-commerce-cart span,
.apex-sidebar-aside.sidebar-collapsed .block-commerce-cart span {
  display: none !important;
}

/* Adjust button position when collapsed */
.sidebar-collapsed .sidebar-collapse-btn,
.apex-sidebar-wrapper.sidebar-collapsed .sidebar-collapse-btn {
  left: 75px !important;
}

/* === SOLUTION 3: FLOATING COMPACT STACK === */
/* Uncomment this section and comment other solutions to activate */
/*
.sidebar-collapsed .site-branding,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding,
.apex-sidebar-aside.sidebar-collapsed .site-branding {
  position: fixed !important;
  top: 80px !important;
  left: 5px !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(0,123,255,0.95) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(0,123,255,0.3) !important;
  z-index: 10001 !important;
  transition: all 0.3s ease !important;
}

.sidebar-collapsed .site-branding:hover,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding:hover,
.apex-sidebar-aside.sidebar-collapsed .site-branding:hover {
  background: rgba(0,123,255,1) !important;
  transform: scale(1.1) !important;
}

.sidebar-collapsed .site-branding::after,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding::after,
.apex-sidebar-aside.sidebar-collapsed .site-branding::after {
  content: 'LP' !important;
  color: white !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: -1px !important;
}

.sidebar-collapsed .block-user,
.apex-sidebar-wrapper.sidebar-collapsed .block-user,
.apex-sidebar-aside.sidebar-collapsed .block-user {
  position: fixed !important;
  bottom: 80px !important;
  left: 5px !important;
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: rgba(40,167,69,0.95) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 20px rgba(40,167,69,0.3) !important;
  z-index: 10001 !important;
}

.sidebar-collapsed .block-user img,
.apex-sidebar-wrapper.sidebar-collapsed .block-user img,
.apex-sidebar-aside.sidebar-collapsed .block-user img {
  width: 40px !important;
  height: 40px !important;
  margin: 5px !important;
  border: 2px solid white !important;
}
*/

/* === SOLUTION 4: MORPHING GEOMETRIC LOGO === */
/* Uncomment this section and comment other solutions to activate */
/*
.sidebar-collapsed .site-branding,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding,
.apex-sidebar-aside.sidebar-collapsed .site-branding {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 0 !important;
  margin-bottom: 10px !important;
}

.sidebar-collapsed .site-branding::before,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding::before,
.apex-sidebar-aside.sidebar-collapsed .site-branding::before {
  content: '';
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  background: linear-gradient(45deg, #007bff, #6f42c1) !important;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%) !important;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  animation: geometricSpin 3s linear infinite !important;
}

.sidebar-collapsed .site-branding:hover::before,
.apex-sidebar-wrapper.sidebar-collapsed .site-branding:hover::before,
.apex-sidebar-aside.sidebar-collapsed .site-branding:hover::before {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%) !important;
  background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
  animation-duration: 0.5s !important;
}

@keyframes geometricSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sidebar-collapsed .block-user img,
.apex-sidebar-wrapper.sidebar-collapsed .block-user img,
.apex-sidebar-aside.sidebar-collapsed .block-user img {
  width: 32px !important;
  height: 32px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  border: 2px solid #007bff !important;
  filter: brightness(1.1) contrast(1.1) !important;
  transition: all 0.3s ease !important;
}

.sidebar-collapsed .block-user:hover img,
.apex-sidebar-wrapper.sidebar-collapsed .block-user:hover img,
.apex-sidebar-aside.sidebar-collapsed .block-user:hover img {
  filter: brightness(1.2) contrast(1.2) saturate(1.3) !important;
  border-color: #6f42c1 !important;
  box-shadow: 0 0 20px rgba(111,66,193,0.5) !important;
}
*/

/* Mobile responsiveness */
@media (max-width: 768px) {
  .sidebar-collapse-btn {
    display: none; /* Hide on mobile as sidebar typically stacks */
  }
  
  .sidebar-collapsed {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ========================================
   SOLUTION 1: Animated Icon Logo with Smart User Profile
   Professional & Clean - Like Slack/Discord
   ======================================== */

/* Logo transformation for collapsed state */
.sidebar-collapsed .site-logo,
.sidebar-collapsed [class*="logo"],
.sidebar-collapsed a[href="/"] img {
  display: none !important;
}

/* Create icon-based logo for collapsed state */
.sidebar-collapsed .navbar-brand::after,
.sidebar-collapsed a[href="/"]::after {
  content: 'L';
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(135deg, #007bff, #0056b3) !important;
  color: white !important;
  font-size: 20px !important;
  font-weight: bold !important;
  line-height: 40px !important;
  text-align: center !important;
  border-radius: 8px !important;
  margin: 10px auto !important;
  box-shadow: 0 4px 8px rgba(0,123,255,0.3) !important;
  transition: all 0.3s ease !important;
  animation: logoGlow 2s ease-in-out infinite alternate !important;
}

/* Logo hover effect when collapsed */
.sidebar-collapsed a[href="/"]:hover::after {
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 6px 12px rgba(0,123,255,0.5) !important;
}

/* Logo glow animation */
@keyframes logoGlow {
  0% { box-shadow: 0 4px 8px rgba(0,123,255,0.3); }
  100% { box-shadow: 0 4px 16px rgba(0,123,255,0.5); }
}

/* User profile in collapsed state - avatar only with enhancements */
.sidebar-collapsed .block-user {
  text-align: center !important;
  padding: 10px 5px !important;
}

.sidebar-collapsed .block-user img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 3px solid #007bff !important;
  margin: 0 auto 10px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

/* Add status indicator to avatar */
.sidebar-collapsed .block-user img::after {
  content: '';
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 12px !important;
  height: 12px !important;
  background: #28a745 !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  animation: pulse 2s infinite !important;
}

/* Pulse animation for status indicator */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* Hide username and email in collapsed state */
.sidebar-collapsed .block-user h5,
.sidebar-collapsed .block-user p {
  display: none !important;
}

/* Tooltip for user info on hover */
.sidebar-collapsed .block-user:hover::after {
  content: attr(data-username) !important;
  position: absolute !important;
  left: 65px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #333 !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  animation: fadeIn 0.3s forwards !important;
}

/* Fade in animation for tooltips */
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Avatar hover effect */
.sidebar-collapsed .block-user img:hover {
  transform: scale(1.15) !important;
  border-color: #0056b3 !important;
  box-shadow: 0 4px 12px rgba(0,123,255,0.4) !important;
}

/* ========================================
   RIGHT SIDEBAR IMPLEMENTATION
   For Form Component Library
   ======================================== */

/* Right sidebar base styles */
.apex-sidebar-right {
  position: fixed;
  top: 60px; /* Below admin toolbar */
  right: 0;
  width: 300px;
  height: calc(100vh - 60px);
  z-index: 999;
  background: #f8f9fa;
  border-left: 1px solid #dee2e6;
  transition: all 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Right sidebar collapse button */
.sidebar-collapse-btn-right {
  position: fixed;
  top: 100px;
  right: 300px;
  z-index: 10000;
  background: #fff;
  border: 2px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.sidebar-collapse-btn-right:hover {
  background: #007bff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.sidebar-collapse-btn-right:hover .collapse-icon {
  color: #fff;
}

/* Right sidebar collapsed state */
.apex-sidebar-right.sidebar-collapsed {
  width: 80px !important;
  min-width: 80px !important;
}

.apex-sidebar-right.sidebar-collapsed .sidebar-collapse-btn-right {
  right: 80px !important;
}

/* Adaptive width when left sidebar is collapsed */
body.left-sidebar-collapsed .apex-sidebar-right:not(.sidebar-collapsed) {
  width: 400px !important; /* Wider when left sidebar collapsed */
}

body.left-sidebar-collapsed .apex-sidebar-right:not(.sidebar-collapsed) .sidebar-collapse-btn-right {
  right: 400px !important;
}

/* Component tabs styling */
.component-tabs {
  padding: 10px 5px;
  border-bottom: 1px solid #dee2e6;
  background: white;
}

.component-tabs .nav-tabs {
  border: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
}

.component-tabs .nav-item {
  flex: 1;
  text-align: center;
}

.component-tabs .nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  margin: 0 2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6c757d;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.component-tabs .nav-tab:hover,
.component-tabs .nav-tab.active {
  background: #007bff;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

.component-tabs .nav-tab i {
  font-size: 20px;
  margin-bottom: 4px;
}

.component-tabs .nav-tab span {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Collapsed right sidebar - icon only tabs */
.apex-sidebar-right.sidebar-collapsed .nav-tab span {
  display: none !important;
}

.apex-sidebar-right.sidebar-collapsed .nav-tab {
  padding: 10px 4px;
}

.apex-sidebar-right.sidebar-collapsed .component-tabs {
  padding: 10px 2px;
}

/* Tooltip for collapsed tabs */
.apex-sidebar-right.sidebar-collapsed .nav-tab:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: -80px;
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
}

/* Main content adaptation for right sidebar */
.main-content,
main {
  transition: margin-right 0.3s ease, margin-left 0.3s ease;
}

/* Main content layout - stays beside sidebar in both states */
.row.row-offcanvas {
  display: flex !important;
  flex-wrap: nowrap !important;
}

/* Main content fills space after left sidebar */
body .main-content,
body main {
  margin-right: 0 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Ensure sidebar and main content stay side by side */
.sidebar_first,
.apex-sidebar-wrapper {
  flex-shrink: 0 !important;
}

/* Fix for expanded state - content stays beside sidebar */
.apex-sidebar-wrapper:not(.sidebar-collapsed) ~ main,
.sidebar_first:not(.sidebar-collapsed) ~ main {
  width: calc(100% - 200px) !important;
  margin-left: 0 !important;
}

/* Component library content area */
.component-library-content {
  padding: 15px;
  height: calc(100% - 70px); /* Account for tabs height */
  overflow-y: auto;
}

/* Make form builder components responsive */
.apex-sidebar-right .component-item {
  padding: 10px;
  margin: 5px;
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s ease;
}

.apex-sidebar-right .component-item:hover {
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0,123,255,0.2);
  transform: translateY(-2px);
}

/* Collapsed component items */
.apex-sidebar-right.sidebar-collapsed .component-item {
  padding: 8px;
  margin: 3px;
}

.apex-sidebar-right.sidebar-collapsed .component-item .component-label {
  display: none;
}

.apex-sidebar-right.sidebar-collapsed .component-item .component-icon {
  font-size: 18px;
  display: block;
  text-align: center;
}

/* ===== SOLUTION 1: Professional & Clean - Logo and Avatar ===== */

/* Logo box - Add the "L" icon at the top of sidebar */
.apex-sidebar-aside::before {
  content: 'L';
  display: flex;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  font-size: 20px;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,123,255,0.3);
  animation: logoGlow 2s ease-in-out infinite alternate;
  transition: transform 0.3s ease;
  cursor: pointer;
  margin: 10px auto 15px;
}

.apex-sidebar-aside:hover::before {
  transform: scale(1.1) rotate(5deg);
}

@keyframes logoGlow {
  0% { box-shadow: 0 4px 8px rgba(0,123,255,0.3); }
  100% { box-shadow: 0 4px 16px rgba(0,123,255,0.5); }
}

/* User avatar with green dot - "A" for adminuser */
.sidebar-collapsed .apex-sidebar-aside .block-views-blockuserprofilephoto-block-1 {
  position: relative;
  width: 42px;
  height: 42px;
  margin: 0 auto 15px;
}

/* Only apply to collapsed state to avoid duplicates */
.sidebar-collapsed .apex-sidebar-aside .block-views-blockuserprofilephoto-block-1::before {
  content: 'A';
  display: flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: 3px solid #007bff;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Green status dot - attached to avatar */
.sidebar-collapsed .apex-sidebar-aside .block-views-blockuserprofilephoto-block-1::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 8px;
  width: 12px;
  height: 12px;
  background: #28a745;
  border: 2px solid #2c3e50;
  border-radius: 50%;
  animation: pulse 2s infinite;
  z-index: 10;
}

/* Hover effect for avatar */
.sidebar-collapsed .apex-sidebar-aside .block-views-blockuserprofilephoto-block-1:hover::before {
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* Hide original user block content when collapsed */
.sidebar-collapsed .block-views-blockuserprofilephoto-block-1 h5,
.sidebar-collapsed .block-views-blockuserprofilephoto-block-1 p,
.sidebar-collapsed .block-views-blockuserprofilephoto-block-1 img {
  display: none !important;
}

/* Logo only shows in collapsed state */
.apex-sidebar-aside:not(.sidebar-collapsed)::before {
  display: none !important;
}