/* hidden flags come from the existing authenticated sidebar policy. */
.sidebar .sidebar_item[hidden]{
  display:none !important;
}

.sidebar{
  width:220px;
  height:100vh;
  background:var(--sidebar-bg);
  color:var(--sidebar-text-active);
  padding:16px 12px;
  display:grid;
  grid-template-rows:auto auto auto minmax(0, 1fr) auto;
  gap:12px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  transition:width 0.2s ease, padding 0.2s ease;
}

.sidebar_service_health_mount{
  width:100%;
  min-height:0;
}

.sidebar.collapsed .sidebar_service_health_mount{
  width:100%;
}

.sidebar.collapsed{
  width:72px;
  padding:16px 8px;
}

.divider{
  height:1px;
  background:var(--sidebar-divider);
  border-radius:999px;
}

.sidebar_items{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--sidebar-divider) transparent;
  padding-right:4px;
}

.sidebar_items::-webkit-scrollbar{
  width:6px;
}

.sidebar_items::-webkit-scrollbar-track{
  background:transparent;
}

.sidebar_items::-webkit-scrollbar-thumb{
  background:var(--sidebar-divider);
  border-radius:999px;
}

.sidebar_items::-webkit-scrollbar-thumb:hover{
  background:var(--sidebar-text);
}

.sidebar_item{
  width:100%;
  min-height:44px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  color:var(--sidebar-text);
  cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}

.sidebar_item:hover{
  background:var(--sidebar-hover-bg);
  color:var(--sidebar-text-active);
}

.sidebar_item_active{
  background:var(--sidebar-active-bg);
  color:var(--sidebar-text-active);
}

.sidebar_brand{
  color:var(--sidebar-text-active);
}

.sidebar_brand .menu_label{
  font-weight:600;
}

.menu_icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  flex:0 0 22px;
}

.menu_label{
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}

.sidebar.collapsed .sidebar_item{
  justify-content:center;
  padding:0;
}

.sidebar.collapsed .sidebar_item .menu_label{
  display:none;
}

.profile{
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.15s ease;
}

.profile:hover{
  background:var(--sidebar-hover-bg);
}

.profile.profile_active{
  background:var(--sidebar-active-bg);
}

.sidebar_footer{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex-shrink:0;
}

.sidebar_footer_divider{
  margin-bottom:2px;
}

.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#F0F0F0;
  color:#2A2933;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 32px;
  font-size:12px;
}

.name{
  font-size:12px;
  color:var(--sidebar-text-active);
  white-space:nowrap;
}

.sidebar.collapsed .sidebar_item{
  justify-content:center;
  padding:0;
}

.sidebar.collapsed .menu_label{
  display:none;
}

.sidebar.collapsed .profile{
  justify-content:center;
  padding:8px 0;
}

.sidebar.collapsed .sidebar_footer{
  gap:8px;
}

.sidebar.collapsed .name{
  display:none;
}