/* Shared shell sidebar behavior for multi-page layout */
#left-sidebar,
#right-sidebar {
  transition: width 0.25s ease, min-width 0.25s ease, transform 0.25s ease;
}
#left-sidebar.collapsed {
  width: 4.5rem;
  min-width: 4.5rem;
}
#left-sidebar.collapsed .sidebar-label,
#left-sidebar.collapsed .sidebar-section-title,
#left-sidebar.collapsed .history-preview,
#left-sidebar.collapsed .user-stat-detail,
#left-sidebar.collapsed .nav-label,
#left-sidebar.collapsed .offline-badge-text {
  display: none;
}
#right-sidebar.collapsed {
  width: 4.5rem;
  min-width: 4.5rem;
}
#right-sidebar.collapsed .right-label,
#right-sidebar.collapsed .material-text {
  display: none;
}
#right-sidebar.collapsed .material-link {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
@media (max-width: 1023px) {
  #left-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    height: 100%;
    transform: translateX(-100%);
    width: 18rem !important;
    min-width: 18rem !important;
  }
  #left-sidebar.mobile-open {
    transform: translateX(0);
  }
  #left-sidebar.collapsed .sidebar-label,
  #left-sidebar.collapsed .sidebar-section-title,
  #left-sidebar.collapsed .history-preview,
  #left-sidebar.collapsed .user-stat-detail,
  #left-sidebar.collapsed .nav-label,
  #left-sidebar.collapsed .offline-badge-text {
    display: block;
  }
  #right-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 40;
    height: 100%;
    transform: translateX(100%);
    width: 18rem !important;
    min-width: 18rem !important;
  }
  #right-sidebar.mobile-open {
    transform: translateX(0);
  }
  #right-sidebar.collapsed .right-label,
  #right-sidebar.collapsed .material-text {
    display: block;
  }
  #right-sidebar.collapsed .material-link {
    justify-content: flex-start;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}