/*
 * Sidebar navigation — matched to the product's own left panel.
 *
 * The docs rail mirrors the app navigation built in
 * cbom-frontend-vite/src/features/app-shell/menu/buildMenuModel.jsx and styled in
 * src/assets/styles/layouts/_sidebar.scss: near-black rail, seven icon-led
 * accordion groups, a solid teal fill on the open group header and a translucent
 * teal fill on the current page.
 *
 * This is a hand-written override loaded AFTER stylesheet.css, not a Sass
 * partial: stylesheet.css is compiled output with a source map, so appending to
 * it would desync the map and be lost on the next Sass build. The markup it
 * styles is generated by renderSidebar() in assets/js/theme.js.
 *
 * Colours are the app's dark-theme tokens, copied rather than imported because
 * the docs do not load the app's theme:
 *   --primary-color      #2bc58f   teal          (custom-dark.css)
 *   --primary-color-text #030712   on-teal text  (custom-dark.css)
 *   --primary-400        35% teal  current page  (custom-dark.css)
 *   --n-950              #111111   rail surface  (custom.css)
 */

:root {
  --docs-nav-accent: #2bc58f;
  --docs-nav-accent-on: #030712;
  --docs-nav-current: rgb(43 197 143 / 35%);
  --docs-nav-surface: #111111;
  --docs-nav-text: #e5e5e5;
  --docs-nav-text-dim: rgb(229 229 229 / 70%);
}

.idocs-navigation.bg-dark,
.idocs-navigation.docs-navigation-dark {
  background-color: var(--docs-nav-surface) !important;
}

.idocs-navigation > .nav {
  padding: 18px 0 40px;
}

/* stylesheet.css puts `padding-left: 12px` on every `.nav-item`, which COMPOUNDS
   with nesting: 12px at the second level, 24px at the third. That was the dead
   gutter down the left of the rail, and it was squeezing labels like
   "Networked Deployments" and "Login and Authentication" into two lines. All
   indentation here comes from the explicit padding-left on each link instead, so
   it stays predictable at every depth. */
.idocs-navigation .nav .nav-item {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------- top level */

/* The documentation-only entries above the groups. Indented to the same text
   column as a group label, so the rail reads as one list.

   Scoped to `a` and to the non-iconed variant on purpose. A group header is a
   <button class="nav-link nav-group__header">, so an unscoped `.nav-link` here
   also matched it and won on padding-left, pushing every group icon 26px right
   and shrinking the label column to 157px. */
.idocs-navigation > .nav > .nav-item > a.nav-link:not(.nav-link--iconed) {
  padding: 9px 10px 9px 34px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--docs-nav-text);
  border-radius: 6px;
  margin: 2px 8px;
  transition: background-color 0.12s linear, color 0.12s linear;
}

/* A standalone top-level entry that carries an icon (Login and Authentication).
   The plain variant above gets its 34px left padding to line its text up with
   the icon-led groups; this one has a real icon, so it is a flex row on the same
   geometry as .nav-group__header instead. */
.idocs-navigation > .nav > .nav-item > .nav-link--iconed {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  margin: 2px 8px;
}

.idocs-navigation .nav > .nav-item > a.nav-link--iconed.nav-link:hover,
.idocs-navigation .nav > .nav-item > a.nav-link--iconed.nav-link:focus-visible {
  background-color: var(--docs-nav-accent);
  color: var(--docs-nav-accent-on);
  outline: none;
}

.idocs-navigation .nav > .nav-item > a.nav-link--iconed.nav-link.active {
  background-color: var(--docs-nav-accent);
  color: var(--docs-nav-accent-on);
  font-weight: 600;
}

.idocs-navigation > .nav > .nav-item > .nav-link--iconed .nav-group__label {
  flex: 1 1 auto;
  overflow-wrap: break-word;
}

.idocs-navigation > .nav > .nav-item > a.nav-link:not(.nav-link--iconed):hover {
  background-color: var(--docs-nav-accent);
  color: var(--docs-nav-accent-on);
}

.idocs-navigation > .nav > .nav-item > a.nav-link:not(.nav-link--iconed).active {
  background-color: var(--docs-nav-accent);
  color: var(--docs-nav-accent-on);
  font-weight: 600;
}

/* The theme's generic caret belongs to the old always-expanded markup. */
.idocs-navigation > .nav > .nav-item > .nav-link.active:after,
.idocs-navigation .nav .expand-all:after {
  content: none;
  display: none;
}

/* ------------------------------------------------- icon-led row geometry */

/* One rule for every icon-led top-level row: the six guide groups, the seven
   product groups, and the standalone entries that carry an icon. They must share
   a single geometry or their icons and labels do not line up in a column.

   The specificity is deliberate. A group header is a
   `<button class="nav-link nav-group__header">`, so bootstrap.min.css's
   `.nav-link { padding: .5rem 1rem }` also matches it, and at 15px was setting a
   wider left padding on group headers than on the standalone iconed links - that
   is what made Login and Authentication sit left of the groups above it. Four
   classes here beats bootstrap's one, for both kinds of row at once, and returns
   7px to the label column. */
.idocs-navigation .nav > .nav-item > .nav-group__header,
.idocs-navigation .nav > .nav-item > a.nav-link--iconed {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 10px 8px;
}

/* ------------------------------------------------------------ group headers */

.idocs-navigation .nav-group {
  margin: 2px 0;
}

/* Anchored on four classes plus `.nav-link` so stylesheet.css's
   `.nav .nav-item .nav-link` (which sets its own colour at 30) and
   `.nav:not(.nav-pills) .nav-item .nav-link:hover` (50) cannot outrank the
   states below. The geometry block above already covers display/padding. */
.idocs-navigation .nav > .nav-item > .nav-group__header.nav-link {
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--docs-nav-text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear;
}

.idocs-navigation .nav > .nav-item > .nav-group__header.nav-link:hover,
.idocs-navigation .nav > .nav-item > .nav-group__header.nav-link:focus-visible {
  background-color: var(--docs-nav-accent);
  color: var(--docs-nav-accent-on);
  outline: none;
}

.idocs-navigation .nav > .nav-item.nav-group.open > .nav-group__header.nav-link {
  background-color: var(--docs-nav-accent);
  color: var(--docs-nav-accent-on);
  font-weight: 600;
}

.idocs-navigation .nav-group__label {
  flex: 1 1 auto;
  /* Should a long label still need two lines, break between words rather
     than mid-word. */
  overflow-wrap: break-word;
}

/* Icons are the app's own glyphs. Four of the seven are stroke-drawn outlines
   (Dashboard, Reports, Crypto Inventory, Administration) and two are filled
   (Insights, Governance); Discovery uses both. The fill/stroke attributes come
   through from the source components and already resolve to currentColor, so an
   icon follows its header's text colour and flips to dark on the teal fill
   exactly as it does in the product. Do not blanket-apply `fill` here — it turns
   the outline icons into solid blobs. */
.idocs-navigation .nav-group__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
}

.idocs-navigation .nav-group__icon svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  color: inherit;
}

/* Chevron: points down when closed, up when open, like the app's. */
.idocs-navigation .nav-group__chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform 0.15s linear;
}

.idocs-navigation .nav-group.open > .nav-group__header .nav-group__chevron {
  transform: translateY(1px) rotate(225deg);
}

/* ----------------------------------------------------------- group children */

/* stylesheet.css hides every nested .nav and reveals it only next to an .active
   link. Group headers do not carry .active — they are buttons, not links — so
   visibility is driven off the group's own open state instead. */
.idocs-navigation .nav .nav-group > .nav {
  display: none;
  margin: 2px 0 6px;
  border-left: 0;
}

.idocs-navigation .nav .nav-group.open > .nav {
  display: block;
}

.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link {
  padding: 7px 10px 7px 34px;
  margin: 1px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--docs-nav-text-dim);
  transition: background-color 0.12s linear, color 0.12s linear;
}

.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link:hover {
  background-color: var(--docs-nav-current);
  color: var(--docs-nav-text);
}

.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link.active {
  background-color: var(--docs-nav-current);
  color: #fff;
  font-weight: 600;
}

/* The theme draws a vertical rule down the left of every nested item; the app's
   panel has none, and it collides with the pill backgrounds. */
.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link:after,
.idocs-navigation
  .nav
  .nav-group
  > .nav
  > .nav-item
  > .nav-link.active:after {
  content: none;
  display: none;
  border: 0;
}

/* ------------------------------------------------------ third level (submenu) */

/* Discovery > Tasks > Networked Deployments. The app nests these one level
   deeper inside a group and gives each its own chevron, so the docs do too.
   The heading is a button, styled to sit in line with its sibling links. */
.idocs-navigation .nav .nav-subgroup > .nav-subgroup__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  padding: 7px 10px 7px 34px;
  margin: 1px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--docs-nav-text-dim);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear;
}

.idocs-navigation .nav .nav-subgroup > .nav-subgroup__toggle:hover,
.idocs-navigation .nav .nav-subgroup > .nav-subgroup__toggle:focus-visible {
  background-color: var(--docs-nav-current);
  color: var(--docs-nav-text);
  outline: none;
}

.idocs-navigation .nav .nav-subgroup__label {
  flex: 1 1 auto;
}

/* Same chevron as a group header, one size down. */
.idocs-navigation .nav .nav-subgroup__chevron {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform 0.15s linear;
}

.idocs-navigation
  .nav
  .nav-subgroup.open
  > .nav-subgroup__toggle
  .nav-subgroup__chevron {
  transform: translateY(1px) rotate(225deg);
}

/* Each submenu is collapsed until its own toggle opens it, so several can be
   open at once. The one holding the current page starts open. */
.idocs-navigation .nav .nav-group > .nav .nav-subgroup > .nav {
  display: none;
  margin: 0 0 4px;
  border-left: 0;
}

.idocs-navigation .nav .nav-group > .nav .nav-subgroup.open > .nav {
  display: block;
}

.idocs-navigation
  .nav
  .nav-group
  > .nav
  .nav-subgroup
  > .nav
  > .nav-item
  > .nav-link {
  padding: 7px 10px 7px 46px;
  margin: 1px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--docs-nav-text-dim);
  transition: background-color 0.12s linear, color 0.12s linear;
}

.idocs-navigation
  .nav
  .nav-group
  > .nav
  .nav-subgroup
  > .nav
  > .nav-item
  > .nav-link:hover {
  background-color: var(--docs-nav-current);
  color: var(--docs-nav-text);
}

.idocs-navigation
  .nav
  .nav-group
  > .nav
  .nav-subgroup
  > .nav
  > .nav-item
  > .nav-link.active {
  background-color: var(--docs-nav-current);
  color: #fff;
  font-weight: 600;
}

.idocs-navigation
  .nav
  .nav-group
  > .nav
  .nav-subgroup
  > .nav
  > .nav-item
  > .nav-link:after {
  content: none;
  display: none;
  border: 0;
}

/* ---------------------------------------------------- fourth level (nested) */

/* Sensors and Connectors > Cloud Platforms > AWS. Every rule above reaches a
   submenu through a descendant combinator, so a submenu nested inside another
   already picks up the toggle, chevron, open/closed and hover styling. Only
   the two indents need restating: without them the nested branch lands in the
   same column as its parent and the two read as siblings. */
.idocs-navigation .nav .nav-subgroup .nav-subgroup > .nav-subgroup__toggle {
  padding-left: 46px;
}

.idocs-navigation
  .nav
  .nav-group
  > .nav
  .nav-subgroup
  .nav-subgroup
  > .nav
  > .nav-item
  > .nav-link {
  padding-left: 58px;
}

/* --------------------------------------------------------------- preloader */

/* Every sidebar click is a full page load, and the theme's preloader covered
   the whole viewport, so the rail vanished on each one. Start it at the rail's
   edge instead. Scoped to `body >` to leave Magnific Popup's lightbox loader
   (`.mfp-container .preloader`) alone. Below 768px the rail is an off-canvas
   drawer, so the full-screen sheet stays. */
@media (min-width: 768px) {
  body > .preloader {
    left: 280px;
    width: auto;
  }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 575.98px) {
  .idocs-navigation .nav-group__header {
    width: calc(100% - 12px);
    margin: 2px 6px;
  }

  .idocs-navigation > .nav > .nav-item > .nav-link,
  .idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link {
    margin-left: 6px;
    margin-right: 6px;
  }
}

/* ------------------------------------------------------------------ search */

/* Injected by theme.js into .navbar-container. Same look as the CertSecure
   docs' navbar search; the accent is a darker teal than --docs-nav-accent
   because that one is too pale for text on white. Below 992px the box folds
   into a magnifier button, which opens it as an overlay across the header. */
.navbar-search {
  --search-accent: #0b8f64;
  --search-accent-tint: #e6f6ef;
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  margin: 0 16px 0 auto; /* auto: sit against the help button, not mid-bar */
}

.search-wrapper {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  background: #f4f5f7;
  border: 1.5px solid #e0e3ea;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-wrapper:focus-within {
  background: #fff;
  border-color: var(--search-accent);
  box-shadow: 0 0 0 3px rgba(11, 143, 100, 0.12);
}

.search-wrapper > .search-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #888;
  pointer-events: none;
}

.nav-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: #2b2b2b;
  font-size: 0.875rem;
  font-family: "Poppins", sans-serif;
}

.nav-search-input::placeholder {
  color: #aaa;
  font-size: 0.82rem;
}

.search-clear {
  display: none;
  flex-shrink: 0;
  padding: 0 2px;
  border: none;
  background: none;
  color: #aaa;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}

.search-clear:hover {
  color: #555;
}

.search-clear.visible {
  display: block;
}

/* The magnifier button only exists in the narrow layout. */
.search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #f4f5f7;
  border: 1.5px solid #e0e3ea;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.search-toggle .search-icon {
  width: 16px;
  height: 16px;
  margin: 0;
  color: #555;
}

.search-toggle:hover,
.search-toggle:focus-visible {
  background: var(--search-accent-tint);
  border-color: var(--search-accent);
  outline: none;
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: none;
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid #e0e3ea;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 99999; /* above the sidebar rail (9999) */
}

.search-dropdown.open {
  display: block;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item.highlighted {
  background: #f0faf6;
}

.search-result-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--search-accent-tint);
  border-radius: 6px;
}

.search-result-icon svg {
  width: 15px;
  height: 15px;
  color: var(--search-accent);
}

.search-result-text {
  flex: 1;
  min-width: 0;
}

.search-result-label {
  overflow: hidden;
  color: #1a1a2e;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-result-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  color: #666;
  font-size: 0.76rem;
  line-height: 1.4;
}

.search-result-label mark,
.search-result-snippet mark {
  padding: 0;
  background: transparent;
  color: var(--search-accent);
  font-weight: 600;
}

.search-no-results {
  padding: 16px 14px;
  color: #888;
  font-size: 0.875rem;
  text-align: center;
}

.search-dropdown-header {
  padding: 8px 14px 4px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  color: #aaa;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Narrow: magnifier only; .expanded opens the box over the whole header row.
   .navbar-search drops its own positioning so the overlay anchors to the sticky
   #header instead of the 36px button. */
@media (max-width: 991.98px) {
  .navbar-search {
    width: auto;
    margin-right: 0;
  }

  .search-wrapper {
    display: none;
  }

  .search-toggle {
    display: flex;
  }

  .navbar-search.expanded {
    position: static;
  }

  .navbar-search.expanded .search-toggle {
    display: none;
  }

  .navbar-search.expanded .search-wrapper {
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    z-index: 100000;
    display: flex;
    height: 40px;
    background: #fff;
    border-color: var(--search-accent);
    transform: translateY(-50%);
  }

  /* 16px keeps iOS from zooming the page on focus. */
  .navbar-search.expanded .nav-search-input {
    font-size: 16px;
  }

  .navbar-search.expanded .search-dropdown {
    top: calc(100% + 4px);
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    max-height: 70vh;
  }
}

/* From 768px the 280px rail is on screen, so the overlay starts beside it. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-search.expanded .search-wrapper,
  .navbar-search.expanded .search-dropdown {
    left: 296px;
  }
}

/* The theme hides the whole .navbar-container on a phone (breadcrumb and help
   link included); keep it for the magnifier and hide just those two. */
@media (max-width: 767.98px) {
  /* Burger on the left, magnifier on the right, one row. */
  #header .container-fluid {
    flex-wrap: nowrap;
  }

  #header .navbar-container {
    display: flex !important;
    order: 2;
    width: auto;
    margin-left: auto;
    padding-inline: 8px;
  }

  #header .navbar-container .breadcrumb,
  #header .navbar-container .support {
    display: none;
  }
}