/*
 * V9.2 task-oriented sidebar workbench.
 * Keeps five first-level destinations and reveals task-specific tools on demand.
 */
html:not(.react-student-embedded) body .sidebar .workspace-nav {
  gap: 4px !important;
  overflow: visible !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group {
  display: grid !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  gap: 2px !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-children {
  position: relative !important;
  display: none !important;
  gap: 2px !important;
  padding: 2px 0 5px !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group.is-open > .workspace-nav-children {
  display: grid !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle {
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle[data-workspace-nav-group-toggle="improve"] {
  --hw-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1.5'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle[data-workspace-nav-group-toggle="growth"] {
  --hw-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2019V5'/%3E%3Cpath%20d='M4%2019h16'/%3E%3Cpath%20d='m7%2015%204-4%203%203%205-7'/%3E%3Cpath%20d='M15%207h4v4'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle[data-workspace-nav-group-toggle="resources"] {
  --hw-nav-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%204.5A2.5%202.5%200%200%201%206.5%202H11v17H6.5A2.5%202.5%200%200%200%204%2021.5z'/%3E%3Cpath%20d='M20%204.5A2.5%202.5%200%200%200%2017.5%202H13v17h4.5a2.5%202.5%200%200%201%202.5z'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle > .menu-item-icon {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle::before,
html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle::after,
html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle > .menu-item-icon::after {
  content: none !important;
  display: none !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle > .menu-item-icon::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background: currentColor !important;
  -webkit-mask: var(--hw-nav-icon) center / 20px 20px no-repeat !important;
  mask: var(--hw-nav-icon) center / 20px 20px no-repeat !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-chevron {
  display: inline-grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: auto !important;
  color: #94a3b8 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transform: rotate(-90deg) !important;
  transition: transform 160ms ease !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group.is-open > .workspace-nav-group-toggle .workspace-nav-chevron {
  transform: rotate(0deg) !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle:hover,
html:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle:focus-visible,
html:not(.react-student-embedded) body .sidebar .workspace-nav-group.is-active > .workspace-nav-group-toggle {
  color: #315efb !important;
  border-color: rgba(49, 94, 251, 0.12) !important;
  background: rgba(49, 94, 251, 0.07) !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-subitem {
  position: relative !important;
  justify-content: flex-start !important;
  color: #667085 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-dot {
  display: block !important;
  flex: 0 0 5px !important;
  width: 5px !important;
  height: 5px !important;
  margin-right: 10px !important;
  border-radius: 999px !important;
  background: #c4cad5 !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .workspace-nav-subitem:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .workspace-nav-subitem:focus-visible {
  color: #315efb !important;
  background: rgba(49, 94, 251, 0.055) !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .workspace-nav-subitem.active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .workspace-nav-subitem.is-active {
  color: #315efb !important;
  background: linear-gradient(90deg, rgba(49, 94, 251, 0.12), rgba(124, 77, 255, 0.08)) !important;
  box-shadow: none !important;
}

html:not(.react-student-embedded) body .sidebar .workspace-nav-subitem.active .workspace-nav-dot,
html:not(.react-student-embedded) body .sidebar .workspace-nav-subitem.is-active .workspace-nav-dot {
  background: #315efb !important;
  box-shadow: 0 0 0 4px rgba(49, 94, 251, 0.1) !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .workspace-nav-group {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
}

html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .workspace-nav-children,
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .workspace-nav-group-toggle .workspace-nav-chevron {
  display: none !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle:hover,
html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .workspace-nav-group-toggle:focus-visible,
html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .workspace-nav-group.is-active > .workspace-nav-group-toggle {
  color: #93b4ff !important;
  border-color: rgba(147, 180, 255, 0.16) !important;
  background: rgba(64, 112, 244, 0.12) !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body .sidebar .workspace-nav-subitem {
  color: #9aabc0 !important;
}

html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .workspace-nav-subitem.active,
html[data-theme="dark"]:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .workspace-nav-subitem.is-active {
  color: #b7ccff !important;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.18), rgba(124, 77, 255, 0.12)) !important;
}