/* Global CSS for optimized sidebar performance */

/* Sidebar collapse animations - uses CSS transforms for better performance */
[data-sidebar] {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 16rem; /* w-64 */
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
}

[data-sidebar].sidebar-collapsed {
  width: 4rem; /* w-16 */
}

/* Adjust main content margin when sidebar collapses */
[data-sidebar].sidebar-collapsed ~ .main-content {
  margin-left: 4rem; /* w-16 */
}

[data-sidebar].sidebar-collapsed .sidebar-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 150ms ease-out;
}

[data-sidebar].sidebar-collapsed .sidebar-logo {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

[data-sidebar].sidebar-collapsed .sidebar-user-info {
  opacity: 0;
  transition: opacity 150ms ease-out;
}

/* Tooltip styles for collapsed sidebar */
[data-sidebar].sidebar-collapsed .sidebar-tooltip {
  position: absolute;
  left: 4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  background-color: rgb(31, 41, 55);
  color: white;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

[data-sidebar].sidebar-collapsed .sidebar-item:hover .sidebar-tooltip {
  opacity: 1;
}

/* Performance optimizations */
[data-sidebar] * {
  will-change: auto; /* Reset will-change when not needed */
}

[data-sidebar].sidebar-collapsed * {
  will-change: opacity, width;
}

/* Fresh navigation active states using [data-current] */
.nav-item[data-current] {
  background-color: rgb(238, 239, 241) !important; /* #EEEFF1 */
}

.nav-item[data-ancestor] {
  background-color: rgba(238, 239, 241, 0.5) !important; /* Lighter active state for ancestor */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  [data-sidebar] {
    transition: none;
  }
  
  [data-sidebar].sidebar-collapsed .sidebar-text,
  [data-sidebar].sidebar-collapsed .sidebar-logo,
  [data-sidebar].sidebar-collapsed .sidebar-user-info {
    transition: none;
  }
}