/* Sidebar collapsed state */
aside.collapsed {
  width: 5rem; /* w-20 */
  overflow: visible !important;
}

aside.collapsed nav {
  overflow-x: visible !important;
}

aside.collapsed .sidebar-link-text,
aside.collapsed .sidebar-section-header {
  display: none;
}

aside.collapsed .sidebar-link-icon {
  margin-right: 0;
  margin-left: auto;
  margin-right: auto;
}

aside.collapsed .sidebar-icon-expanded {
  display: none;
}

aside.collapsed .sidebar-icon-collapsed {
  display: inline;
}

/* Tooltips for collapsed sidebar */
aside.collapsed .sidebar-link {
  position: relative;
}

aside.collapsed .sidebar-link::after {
  content: attr(data-tooltip);
  position: fixed;
  left: calc(5rem + 0.75rem);
  margin-top: -0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: rgb(31 41 55); /* dark-800 */
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 9999;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

aside.collapsed .sidebar-link:hover::after {
  opacity: 1;
}

/* Dark mode tooltip styles */
.dark aside.collapsed .sidebar-link::after {
  background-color: rgb(55 65 81); /* dark-700 */
  color: rgb(243 244 246); /* dark-100 */
}

/* Main content adjustment for collapsed sidebar */
aside.collapsed ~ main {
  margin-left: 5rem;
}

/* Mobile responsive styles */
@media (max-width: 1023px) {
  aside {
    width: 16rem; /* w-64 on mobile when shown */
  }

  main {
    margin-left: 0 !important;
  }
}

/* Ensure padding on mobile */
@media (max-width: 640px) {
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Admin section collapsible */
.sidebar-admin-links {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 1;
}

.sidebar-admin-links.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}