/* ============================================================================
   HPE left (primary) nav — match the page-map's line rhythm and give the tree
   a compact "Morpheus Docs" title at the top.
   ==========================================================================*/

/* Even vertical rhythm — mirror hpe-pagemap.css's .32rem symmetric padding so
   the left nav and the "On this page" map share one spacing scale. */
.md-nav--primary .md-nav__link {
  margin-top: 0;
}
.md-nav--primary .md-nav__item > .md-nav__link {
  padding: 0.32rem 0;
}

/* Desktop: show the site-name title ("Morpheus Docs") above the tree, styled
   as a compact section label rather than immaterial's heavy header block. */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  display: block;
  position: static;
  height: auto;
  margin: 0 0 0.4rem;
  padding: 0 0.6rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--md-default-fg-color--light);
  background: none;
  box-shadow: none;
}
/* Drop immaterial's in-title logo/button + ellipsis wrapper spacing. */
.md-sidebar--primary .md-nav--primary > .md-nav__title .md-nav__button {
  display: none;
}

/* Version selector (POC) — a themed dropdown that replaces the side-nav title.
   <details> gives native, accessible open/close; the options are real links so
   navigation works (and degrades) without JS. Colours track the palette toggle
   via --md tokens, so it fits both light and dark automatically. The menu
   expands in-flow (not absolutely positioned) so the sidebar's scroll container
   can't clip it. */
.md-nav__title .hpe-version-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-weight: 400;
}
.hpe-version-row__label {
  padding: 0.2rem 0;
  border: 1px solid transparent; /* match the toggle's box so the text aligns */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}
.hpe-version {
  position: relative;
  display: inline-block;
  font-weight: 400;
}
.hpe-version__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 6rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hpe-version__toggle::-webkit-details-marker {
  display: none;
}
.hpe-version__toggle:hover {
  border-color: var(--md-default-fg-color--light);
}
.hpe-version[open] .hpe-version__toggle {
  border-color: var(--md-typeset-a-color);
}
.hpe-version__caret {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  transition: transform 0.15s ease;
}
.hpe-version[open] .hpe-version__caret {
  transform: rotate(180deg);
}
.hpe-version__menu {
  position: fixed;
  z-index: 10;
  margin: 0;
  padding: 0.2rem;
  min-width: 6rem;
  list-style: none;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  box-shadow: var(--md-shadow-z2, 0 2px 8px rgba(0, 0, 0, 0.2));
}
.hpe-version__option {
  display: block;
  padding: 0.3rem 0.6rem;
  border-radius: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--md-default-fg-color);
  text-decoration: none;
  white-space: nowrap;
}
.hpe-version__option:hover,
.hpe-version__option:focus {
  background: var(--md-default-fg-color--lightest);
  outline: none;
}
.hpe-version__option[aria-current="true"] {
  color: var(--md-typeset-a-color);
  font-weight: 700;
}

/* Neutral scrollbar — immaterial flips the sidebar scrollbar to its indigo
   accent (#526cfe) on hover/focus-within; keep it the resting grey instead. */
.md-sidebar__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within {
  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
}
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover,
.md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-default-fg-color--lighter);
}

/* ----------------------------------------------------------------------------
   Section hierarchy — recreate the RTD "5 captioned groups" chunking that
   immaterial's even-weight tree loses. The 5 top-level buckets (direct children
   of the primary nav list) render as uppercase, muted, weighty captions so they
   read as section headers rather than peers of their child links. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}

/* Active page link — brand green + bold so the current location stands out
   against the neutral tree (child links inherit the default weight). */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--md-typeset-a-color);
  font-weight: 600;
}

/* External nav links ("Morpheus API & CLI", "Resource Center" groups) — flag
   with a small diagonal-arrow glyph. immaterial's toctree template drops
   docutils' `reference external` class, so distinguish by absolute href
   (every internal doc link in the tree is relative). */
/* Keep the label at its natural width (not flex-grow: 1) so the arrow sits
   right after the text instead of being pushed to the far edge of the nav. */
.md-nav__link[href^="http"] > .md-ellipsis {
  flex-grow: 0;
}
.md-nav__link[href^="http"]::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.15rem;
  background-color: currentColor;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9,5V7H15.59L4,18.59L5.41,20L17,8.41V15H19V5H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9,5V7H15.59L4,18.59L5.41,20L17,8.41V15H19V5H9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Edition badges (ADV/ENT/ESS) restored next to nav labels by hpe-nav-fix.js.
   Keep the label free to shrink/ellipsize and pin the badges after it instead
   of at the far edge — same flex technique as the external-link arrow above. */
.md-nav__link:has(.md-nav__tier-badges) > .md-ellipsis {
  flex-grow: 0;
  flex-shrink: 1;
  min-width: 0;
}
.md-nav__tier-badges {
  display: inline-flex;
  gap: 0.2rem;
  flex-shrink: 0;
  /* The nav link is `display:flex; align-items:flex-start`, which top-pins the
     badges above the label's optical center ("super positioned"). Center the
     badge cluster against the label's line box instead. */
  align-self: center;
}
.tier-badge--nav {
  font-size: 0.55rem;
  margin: 0;
  top: 0;
}

/* Wider primary nav on desktop so the uppercased captions (e.g.
   "HPE MORPHEUS ENTERPRISE") don't wrap.

   immaterial pins the *visible* nav to 11.5rem via
   `[dir=ltr] .md-sidebar__inner{padding-right:calc(100% - 11.5rem)}` — at the
   stock 12.1rem sidebar that calc is just a ~0.2rem scrollbar gutter, but once
   we widen the sidebar it balloons into dead space and the nav stays 11.5rem.
   Replace it with a small fixed gutter so the nav fills the widened column.
   The mobile drawer keeps --drawer-w from hpe-responsive.css (media-scoped +
   loaded later, so it wins on small screens). */
.md-sidebar--primary {
  width: 15rem;
}
[dir="ltr"] .md-sidebar--primary .md-sidebar__inner {
  padding-right: 0.2rem;
}
[dir="rtl"] .md-sidebar--primary .md-sidebar__inner {
  padding-left: 0.2rem;
}