/* Sidebar specific styles */

/* Sidebar scrolling */
#sidebar .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #c5c5c5 #f1f1f1;
  max-height: calc(100vh - 4rem);
  overflow-y: auto !important;
  height: 100%;
}

/* Alpine.js cloak directive - hide elements until Alpine initializes */
[x-cloak] {
  display: none !important;
}

/* Back button hover effect */
button.back-button:hover svg {
  transform: translateX(-3px);
  transition: transform 0.2s ease-in-out;
}

/* Submenu transition */
.submenu-enter-active, .submenu-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.submenu-enter-from, .submenu-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/* Sidebar states */
#sidebar.sidebar-open {
  transform: translateX(0);
}

#sidebar.sidebar-pinned {
  transform: translateX(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Content margin when sidebar is pinned */
#content.with-sidebar {
  margin-left: 16rem; /* 256px (same as w-64) */
  width: calc(100% - 16rem);
}

/* Pin button styles */
#pin-sidebar {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

#sidebar:hover #pin-sidebar,
#sidebar.sidebar-pinned #pin-sidebar {
  opacity: 1;
}

#pin-icon.pinned {
  fill: currentColor;
}

/* Overlay styles */
#sidebar-overlay.active {
  opacity: 0.5;
  pointer-events: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #content.with-sidebar {
    margin-left: 0;
    width: 100%;
  }

  #sidebar.sidebar-pinned {
    transform: translateX(0);
  }
}