/*
 * Sidebar icon terminal lock.
 *
 * The legacy shell previously mixed text glyphs (⌂/◉/⌁/▦/○) with several
 * pseudo-element icon systems. Later V5 rules disabled the pseudo-elements,
 * leaving tiny platform-dependent glyph fragments in the collapsed rail.
 * Keep one semantic SVG-mask implementation for both sidebar states.
 */

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="landing"] {
  --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='m3%2010%209-7%209%207'/%3E%3Cpath%20d='M5%209v11h14V9'/%3E%3Cpath%20d='M9%2020v-6h6v6'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="ai-coach"] {
  --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%3Crect%20x='3'%20y='6'%20width='18'%20height='14'%20rx='3'/%3E%3Cpath%20d='M12%202v4M8%2012h.01M16%2012h.01M9%2016h6'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="question-bank"] {
  --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='M14%204c2-2%205-2%207-2%200%202%200%205-2%207l-7%207-4-4zM9%207H5l-3%203%206%202M17%2015v4l-3%203-2-6M5%2016c-2%201-3%203-3%205%202%200%204-1%205-3'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="engineering-lab"] {
  --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='M14.7%206.3a4%204%200%200%200-5-5L7.5%203.5l3%203L6%2011l-3-3-2.2%202.2a4%204%200%200%200%205%205l7.8%207.8a2.1%202.1%200%200%200%203-3z'/%3E%3Cpath%20d='m15%2015%205-5'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="knowledge-map"] {
  --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.5%202.5z'/%3E%3C/svg%3E");
}

html:not(.react-student-embedded) body .sidebar .menu-item[data-view="growth-profile"] {
  --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 .menu-item[data-view="my"] {
  --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='3'/%3E%3Cpath%20d='M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1-2.1%202.1-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5v.1h-3v-.1a1.7%201.7%200%200%200-1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1-2.1-2.1.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3v-3h.1a1.7%201.7%200%200%200%201.5-1%201.7%201.7%200%200%200-.3-1.8l-.1-.1L6.3%206l.1.1a1.7%201.7%200%200%200%201.8.3%201.7%201.7%200%200%200%201-1.5v-.1h3v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1%202.1%202.1-.1.1a1.7%201.7%200%200%200-.3%201.8%201.7%201.7%200%200%200%201.5%201h.1v3h-.1a1.7%201.7%200%200%200-1.5%201z'/%3E%3C/svg%3E");
}

/*
 * The parent button pseudo-elements are intentionally disabled by the shell's
 * critical layout lock. Render the SVG on the real child span instead so the
 * icon cannot be removed by those legacy rules.
 */
html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-icon {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-icon::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: currentColor !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0.88 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
  -webkit-mask-image: var(--hw-nav-icon) !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: 20px 20px !important;
  mask-image: var(--hw-nav-icon) !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: 20px 20px !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar .menu.menu > .menu-item.menu-item:is(.active, .is-active, :hover, :focus-visible) > .menu-item-icon::before {
  opacity: 1 !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell > .sidebar .menu.menu > .menu-item.menu-item-ai:not(.active, .is-active) > .menu-item-icon {
  color: #8b5cf6 !important;
}

/* Collapsed rail: a fixed 44px hit target with a centered, always-visible icon. */
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) > .sidebar .menu.menu > .menu-item.menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar .menu.menu > .menu-item.menu-item {
  display: grid !important;
  grid-template-columns: 44px !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  column-gap: 0 !important;
  overflow: visible !important;
  font-size: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-icon,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-icon,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-icon {
  margin: 0 !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-label,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-label,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) > .sidebar .menu.menu > .menu-item.menu-item > .menu-item-label {
  display: none !important;
}

html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed > .sidebar .menu.menu > .menu-item.menu-item:is(.active, .is-active) > .menu-item-icon {
  color: #ffffff !important;
}