/*
 * JPRX Navigation V2
 * One authoritative presentation layer for the three-level desktop navigation.
 */

#appView.app-shell:not(.sidebar-collapsed) > .sidebar,
#appView .sidebar {
  width: 208px !important;
  min-width: 208px !important;
  max-width: 208px !important;
  flex-basis: 208px !important;
}

#appView.app-shell:not(.sidebar-collapsed) > .content {
  max-width: calc(100vw - 208px) !important;
}

#appView #nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 8px 10px 12px !important;
}

#appView #nav .nav-section,
#appView #nav .nav-subsection {
  margin: 0 !important;
  padding: 0 !important;
}

#appView #nav .system-entry {
  display: grid !important;
  gap: 2px !important;
}

#appView #nav button,
#appView #nav .nav-section-toggle,
#appView #nav .nav-subsection-toggle {
  box-sizing: border-box !important;
  font-family: inherit !important;
  text-align: left !important;
}

#appView #nav button::before,
#appView #nav button::after,
#appView #nav .nav-section-toggle > b,
#appView #nav .nav-subsection-toggle > b {
  content: none !important;
  display: none !important;
}

/* Level one */
#appView #nav .nav-section-toggle,
#appView #nav .nav-home-button,
#appView #nav .system-entry > button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 30px 0 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #42536a !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#appView #nav .nav-section-toggle > span,
#appView #nav .nav-home-button > span,
#appView #nav .system-entry > button > span {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#appView #nav .nav-section-toggle:hover,
#appView #nav .nav-home-button:hover,
#appView #nav .system-entry > button:hover {
  color: #183f75 !important;
  background: rgba(219, 234, 254, .58) !important;
}

#appView #nav .nav-section-toggle.active,
#appView #nav .nav-home-button.active,
#appView #nav .system-entry > button.active,
#appView #nav .nav-section:has(button.active) > .nav-section-toggle {
  color: #174a91 !important;
  background: rgba(219, 234, 254, .82) !important;
}

/* One fixed icon box eliminates the old glyph and baseline drift. */
#appView #nav .oa-icon,
#appView #nav .nav-section-toggle .oa-icon,
#appView #nav .system-entry > button .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16M12 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  position: static !important;
  display: block !important;
  justify-self: center !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: currentColor !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: .92 !important;
  -webkit-mask: var(--nav-icon) center / 20px 20px no-repeat !important;
  mask: var(--nav-icon) center / 20px 20px no-repeat !important;
}

#appView #nav .oa-icon::before,
#appView #nav .oa-icon::after {
  content: none !important;
  display: none !important;
}

#appView #nav [data-nav-section="home"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 12 4l9 7.5M5.5 10v10h13V10M9.5 20v-6h5v6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="todoCenter"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='m8 12 2.5 2.5L16.5 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="workbench"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='7' width='18' height='13' rx='3' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7M3 12h18M10 12v2h4v-2' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="productLibrarySection"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4.5h11a3 3 0 0 1 3 3V20H7a2 2 0 0 1-2-2V4.5Z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M7 16h12M9 8h6M9 11.5h6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="teamManagement"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='none' stroke='black' stroke-width='1.9'/%3E%3Ccircle cx='17' cy='9' r='2.3' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0M14 14.5a4.5 4.5 0 0 1 6.5 4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="hrFinance"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7.5h14a2 2 0 0 1 2 2v9H6a2 2 0 0 1-2-2v-9Z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='m4.5 7.5 10-3M15 12h5v3.5h-5a1.75 1.75 0 0 1 0-3.5Z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="related"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='8' r='3' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M4 19a6 6 0 0 1 12 0M18 5v6M15 8h6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="reconcile"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 7 1.5 1.5L8 5.5M11 7h9M4 13l1.5 1.5L8 11.5M11 13h9M4 19l1.5 1.5L8 17.5M11 19h9' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="dataSystem"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='3' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M4.5 5.5v6c0 1.65 3.35 3 7.5 3s7.5-1.35 7.5-3v-6M4.5 11.5v6c0 1.65 3.35 3 7.5 3s7.5-1.35 7.5-3v-6' fill='none' stroke='black' stroke-width='1.9'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="productCenter"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='m4.5 7.5 7.5 4.3 7.5-4.3M12 11.8V21' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="tools"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 6.5a4.5 4.5 0 0 0-6 5.8L3.8 17a2.2 2.2 0 0 0 3.2 3l4.7-4.7a4.5 4.5 0 0 0 5.8-6l-2.8 2.8-2.8-2.8 2.6-2.8Z' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav [data-nav-section="featureConfig"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h7M15 18h5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='6' r='2' fill='none' stroke='black' stroke-width='1.9'/%3E%3Ccircle cx='9' cy='12' r='2' fill='none' stroke='black' stroke-width='1.9'/%3E%3Ccircle cx='13' cy='18' r='2' fill='none' stroke='black' stroke-width='1.9'/%3E%3C/svg%3E");
}

#appView #nav .system-entry [data-view="history"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M12 7v5l3.5 2M4 5v4h4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#appView #nav .system-entry [data-view="employeeAccounts"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 19 6v5c0 4.4-2.8 8-7 10-4.2-2-7-5.6-7-10V6l7-3Z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M8.8 15a3.6 3.6 0 0 1 6.4 0' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

#appView #nav .system-entry [data-view="localDatabase"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='3' fill='none' stroke='black' stroke-width='1.9'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='16.5' cy='16' r='1' fill='black'/%3E%3C/svg%3E");
}

#appView #nav .system-entry [data-view="releaseCenter"] .oa-icon {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18H6a4 4 0 0 1-.5-8A6.5 6.5 0 0 1 18 8.5 4.5 4.5 0 0 1 18 18h-1' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M12 20V10m0 0-3 3m3-3 3 3' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Shared chevron: one element, one axis, no generated duplicates. */
#appView #nav .nav-arrow,
#appView.permission-compact-nav #nav .nav-arrow {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  background: currentColor !important;
  opacity: .52 !important;
  transform: translateY(-50%) rotate(0deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
}

#appView #nav .nav-section.collapsed > .nav-section-toggle > .nav-arrow,
#appView #nav .nav-subsection.collapsed > .nav-subsection-toggle > .nav-arrow {
  transform: translateY(-50%) rotate(-90deg) !important;
}

/* Level two: compact, consistently offset from the level-one label axis. */
#appView #nav .nav-children,
#appView.permission-compact-nav #nav .nav-children {
  display: grid !important;
  gap: 1px !important;
  margin: 1px 0 1px 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(100, 116, 139, .27) !important;
}

#appView #nav .nav-subsection-toggle,
#appView.permission-compact-nav #nav .nav-subsection-toggle,
#appView #nav .nav-children > button,
#appView.permission-compact-nav #nav .nav-children > button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 31px !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 24px 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #52637a !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#appView #nav .nav-subsection-toggle > span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* Level three: one small step inward, without horizontal tree branches. */
#appView #nav .nav-grandchildren,
#appView.permission-compact-nav #nav .nav-grandchildren {
  display: grid !important;
  gap: 0 !important;
  margin: 0 0 1px 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid rgba(100, 116, 139, .20) !important;
}

#appView #nav .nav-grandchildren button,
#appView.permission-compact-nav #nav .nav-grandchildren button {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 29px !important;
  min-height: 29px !important;
  margin: 0 !important;
  padding: 0 8px 0 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #66768b !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#appView #nav .nav-children > button:hover,
#appView #nav .nav-subsection-toggle:hover,
#appView #nav .nav-grandchildren button:hover {
  color: #1d4f91 !important;
  background: rgba(219, 234, 254, .48) !important;
}

#appView #nav .nav-children > button.active,
#appView #nav .nav-subsection-toggle.active,
#appView #nav .nav-subsection:has(button.active) > .nav-subsection-toggle,
#appView #nav .nav-grandchildren button.active {
  color: #174a91 !important;
  background: rgba(219, 234, 254, .72) !important;
}

#appView #nav .nav-children > button::before,
#appView #nav .nav-subsection-toggle::before,
#appView #nav .nav-grandchildren button::before,
#appView #nav .nav-grandchildren button.active::before {
  content: none !important;
  display: none !important;
}

#appView #nav .nav-section.collapsed > .nav-children,
#appView #nav .nav-subsection.collapsed > .nav-grandchildren {
  display: none !important;
}

/* Preserve the compact sidebar contract. */
#appView.app-shell.sidebar-collapsed #nav .nav-children,
#appView.app-shell.sidebar-collapsed #nav .nav-subsection,
#appView.app-shell.sidebar-collapsed #nav .nav-grandchildren,
#appView.app-shell.sidebar-collapsed #nav .nav-arrow {
  display: none !important;
}

#appView.app-shell.sidebar-collapsed #nav .nav-section-toggle,
#appView.app-shell.sidebar-collapsed #nav .nav-home-button,
#appView.app-shell.sidebar-collapsed #nav .system-entry > button {
  justify-content: center !important;
  width: 40px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

#appView.app-shell.sidebar-collapsed #nav .nav-section-toggle > span,
#appView.app-shell.sidebar-collapsed #nav .nav-home-button > span,
#appView.app-shell.sidebar-collapsed #nav .system-entry > button > span {
  display: flex !important;
  justify-content: center !important;
  width: 20px !important;
  column-gap: 0 !important;
  font-size: 0 !important;
}

#appView.app-shell.sidebar-collapsed #nav .oa-icon {
  display: block !important;
  flex: 0 0 20px !important;
}

@media (max-width: 900px) {
  #appView.app-shell:not(.sidebar-collapsed) > .sidebar,
  #appView .sidebar {
    width: 198px !important;
    min-width: 198px !important;
    max-width: 198px !important;
    flex-basis: 198px !important;
  }

  #appView.app-shell:not(.sidebar-collapsed) > .content {
    max-width: calc(100vw - 198px) !important;
  }
}

/*
 * Final navigation contract.
 * Keep these declarations authoritative over legacy !important rules.
 */
body #appView.app-shell #nav > .nav-section > .nav-section-toggle,
body #appView.app-shell #nav > .nav-home-button,
body #appView.app-shell #nav > .nav-section.system-entry > button {
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 30px 0 10px !important;
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

body #appView.app-shell #nav > .nav-section > .nav-section-toggle > span,
body #appView.app-shell #nav > .nav-home-button > span,
body #appView.app-shell #nav > .nav-section.system-entry > button > span {
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

body #appView.app-shell #nav > .nav-section > .nav-children {
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  row-gap: 1px !important;
}

body #appView.app-shell #nav .nav-children > button,
body #appView.app-shell #nav .nav-subsection > .nav-subsection-toggle {
  height: 31px !important;
  min-height: 31px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

body #appView.app-shell #nav .nav-subsection > .nav-grandchildren {
  margin-top: 0 !important;
  margin-bottom: 1px !important;
  row-gap: 0 !important;
}

body #appView.app-shell #nav .nav-grandchildren > button {
  height: 29px !important;
  min-height: 29px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Highest-priority entry contract: isolates V2 from legacy important rules. */
html body #appView#appView.app-shell #nav#nav > .nav-section > .nav-section-toggle,
html body #appView#appView.app-shell #nav#nav > .nav-home-button,
html body #appView#appView.app-shell #nav#nav > .nav-section.system-entry > button {
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 30px 0 10px !important;
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

html body #appView#appView.app-shell #nav#nav > .nav-section > .nav-section-toggle > span,
html body #appView#appView.app-shell #nav#nav > .nav-home-button > span,
html body #appView#appView.app-shell #nav#nav > .nav-section.system-entry > button > span {
  font-size: 15.2px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Keep child rows readable while preserving one consistent section rhythm. */
html body #appView#appView.app-shell #nav#nav > .nav-section > .nav-children {
  display: grid !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  row-gap: 3px !important;
}

html body #appView#appView.app-shell #nav#nav .nav-subsection > .nav-grandchildren {
  display: grid !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 3px !important;
}

html body #appView#appView.app-shell #nav#nav > .nav-section.collapsed > .nav-children,
html body #appView#appView.app-shell #nav#nav .nav-subsection.collapsed > .nav-grandchildren {
  display: none !important;
}

/* Minimal sidebar masthead: no divider and a weightless fold control. */
html body #appView#appView.app-shell > .sidebar > .brand {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: 76px !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  gap: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #appView#appView.app-shell > .sidebar > .brand > .brand-logo-full {
  display: block !important;
  flex: 0 0 auto !important;
  width: 82px !important;
  max-width: 82px !important;
  height: auto !important;
  object-fit: contain !important;
}

html body #appView#appView.app-shell > .sidebar > .brand > .brand-version-badge {
  display: inline-block !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 5px !important;
  transform: translateY(7px) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
}

html body #appView#appView.app-shell > .sidebar > .brand > .sidebar-toggle {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  transition: transform .16s ease !important;
}

html body #appView#appView.app-shell > .sidebar > .brand > .sidebar-toggle::before {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  background-color: #718198 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
  transition: background-color .16s ease, transform .16s ease !important;
}

html body #appView#appView.app-shell > .sidebar > .brand > .sidebar-toggle:hover,
html body #appView#appView.app-shell > .sidebar > .brand > .sidebar-toggle:focus,
html body #appView#appView.app-shell > .sidebar > .brand > .sidebar-toggle:focus-visible,
html body #appView#appView.app-shell > .sidebar > .brand > .sidebar-toggle:active {
  border: 0 !important;
  outline: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #appView#appView.app-shell > .sidebar > .brand > .sidebar-toggle:hover::before {
  background-color: #245ea8 !important;
  transform: translateX(-1px) !important;
}

html body #appView#appView.app-shell.sidebar-collapsed > .sidebar > .brand {
  justify-content: center !important;
  padding: 0 !important;
}

html body #appView#appView.app-shell.sidebar-collapsed > .sidebar > .brand > .brand-logo-full,
html body #appView#appView.app-shell.sidebar-collapsed > .sidebar > .brand > .brand-version-badge {
  display: none !important;
}

html body #appView#appView.app-shell.sidebar-collapsed > .sidebar > .brand > .sidebar-toggle {
  margin: 0 !important;
}

html body #appView#appView.app-shell.sidebar-collapsed > .sidebar > .brand > .sidebar-toggle::before {
  transform: rotate(180deg) !important;
}

html body #appView#appView.app-shell > .sidebar > .brand {
  align-self: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Authoritative collapsed mode: icons only, with no clipped labels. */
html body #appView#appView.app-shell.sidebar-collapsed > .sidebar {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  flex-basis: 64px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 8px 12px 14px !important;
  gap: 2px !important;
  overflow-x: hidden !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section.system-entry {
  display: grid !important;
  justify-items: center !important;
  width: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section > .nav-section-toggle,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-home-button,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section.system-entry > button {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section > .nav-section-toggle > span,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-home-button > span,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section.system-entry > button > span {
  display: grid !important;
  place-items: center !important;
  grid-template-columns: 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav .oa-icon {
  position: static !important;
  display: block !important;
  justify-self: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav .nav-arrow,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav .nav-children,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav .nav-subsection,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav .nav-grandchildren,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav .nav-tool-title,
html body #appView#appView.app-shell.sidebar-collapsed > .sidebar > #logoutBtn {
  display: none !important;
}

/* Collapsed optical alignment: compact masthead and truly centered icons. */
html body #appView#appView.app-shell.sidebar-collapsed > .sidebar > .brand {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav {
  padding-top: 2px !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section > .nav-section-toggle,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-home-button,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section.system-entry > button {
  position: relative !important;
  display: block !important;
}

html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section > .nav-section-toggle > span,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-home-button > span,
html body #appView#appView.app-shell.sidebar-collapsed #nav#nav > .nav-section.system-entry > button > span {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}