/*
 * v642 — Left navigation visual hierarchy polish.
 * Presentation only: navigation structure, handlers and behaviour are unchanged.
 */

#layout-sidenav{
  color: #475569 !important;
}

#layout-sidenav .sidenav-inner,
#layout-sidenav .sidenav-inner.ps{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(170,178,192,.72) transparent !important;
}

#layout-sidenav .sidenav-inner::-webkit-scrollbar,
#layout-sidenav .sidenav-inner.ps::-webkit-scrollbar{
  width: 6px !important;
}

#layout-sidenav .sidenav-inner::-webkit-scrollbar-track,
#layout-sidenav .sidenav-inner.ps::-webkit-scrollbar-track{
  background: transparent !important;
}

#layout-sidenav .sidenav-inner::-webkit-scrollbar-thumb,
#layout-sidenav .sidenav-inner.ps::-webkit-scrollbar-thumb{
  background: rgba(170,178,192,.62) !important;
  border-radius: 999px !important;
}

#layout-sidenav .sidenav-inner::-webkit-scrollbar-thumb:hover,
#layout-sidenav .sidenav-inner.ps::-webkit-scrollbar-thumb:hover{
  background: rgba(141,154,175,.78) !important;
}

/* Shared row rhythm. */
#layout-sidenav .sidenav-link{
  box-sizing: border-box !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  transition:
    background-color 160ms ease-out,
    color 160ms ease-out !important;
}

#layout-sidenav .sidenav-link:hover{
  background: #f1f5f9 !important;
}

#layout-sidenav .sidenav-link:focus{
  outline: none !important;
}

#layout-sidenav .sidenav-link:focus-visible{
  box-shadow: 0 0 0 3px rgba(91,80,246,.14) !important;
}

/* Level 0: Employment / Personal / Work / UDF Field. */
#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-link{
  min-height: 36px !important;
  margin: 2px 12px !important;
  padding: 7px 10px !important;
  gap: 9px !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-link > div{
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-link > .sidenav-icon{
  width: 17px !important;
  min-width: 17px !important;
  margin: 0 !important;
  color: #667085 !important;
  font-size: 15px !important;
  opacity: .88 !important;
}

/* A quiet surface for an expanded top-level branch. */
#layout-sidenav .sidenav-inner > .sidenav-item.open > .sidenav-link{
  background: rgba(241,243,247,.86) !important;
}

/* Level 1: Employee Property / Employment Setting / HR Incident / etc. */
#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-link{
  min-height: 34px !important;
  margin: 1px 14px 1px 22px !important;
  padding: 7px 10px 7px 26px !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-link > div{
  color: #536176 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Level 2: Key Information / Grid / No Grid / etc. */
#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-menu{
  position: relative !important;
  margin: 2px 0 4px 34px !important;
  padding: 0 0 0 8px !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-menu::before{
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  left: 0 !important;
  width: 1px !important;
  background: #e2e6ec !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-link{
  min-height: 32px !important;
  margin: 1px 8px 1px 0 !important;
  padding: 6px 10px 6px 26px !important;
}

#layout-sidenav .sidenav-inner > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-menu > .sidenav-item > .sidenav-link > div{
  color: #64748b !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

/* Deeper leaves: individual fields. */
#layout-sidenav .sidenav-menu .sidenav-menu .sidenav-menu{
  margin: 1px 0 4px 18px !important;
  padding: 0 !important;
}

#layout-sidenav .sidenav-menu .sidenav-menu .sidenav-menu .sidenav-link{
  min-height: 30px !important;
  margin: 1px 8px 1px 0 !important;
  padding: 5px 10px 5px 14px !important;
  border-radius: 7px !important;
}

#layout-sidenav .sidenav-menu .sidenav-menu .sidenav-menu .sidenav-link > div{
  color: #64748b !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

/* Nested chevrons stay visible but quiet. */
#layout-sidenav .sidenav-menu .sidenav-toggle::after{
  width: .38em !important;
  height: .38em !important;
  left: 10px !important;
  color: #8b95a4 !important;
  opacity: .78 !important;
  border-width: 1px !important;
}

/* Selected navigation item: the same soft purple language used elsewhere. */
#layout-sidenav .sidenav-item.active > .sidenav-link{
  position: relative !important;
  background: #f0eeff !important;
  color: #4f46e5 !important;
  font-weight: 500 !important;
}

#layout-sidenav .sidenav-item.active > .sidenav-link::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 5px !important;
  bottom: 5px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: #5b50f6 !important;
}

#layout-sidenav .sidenav-item.active > .sidenav-link > div{
  color: #4f46e5 !important;
  font-weight: 500 !important;
}

#layout-sidenav .sidenav-item.active > .sidenav-link > .sidenav-icon,
#layout-sidenav .sidenav-item.active > .sidenav-link.sidenav-toggle::after{
  color: #5b50f6 !important;
}

/* Keep open parent groups distinct from the actual selected leaf. */
#layout-sidenav .sidenav-item.open:not(.active) > .sidenav-link.sidenav-toggle{
  background: rgba(248,250,252,.84) !important;
}

/* Avoid making long open branches visually loose. */
#layout-sidenav .sidenav-menu{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

@media (prefers-reduced-motion: reduce){
  #layout-sidenav .sidenav-link{
    transition: none !important;
  }
}
