/*
 * Sidebar navigation — PKI-as-a-Service docs (same UI as CBOM Secure docs).
 * Loaded AFTER stylesheet.css. Markup is generated by renderSidebar() in
 * assets/js/theme.js from the SIDEBAR tree.
 *
 *   --docs-nav-accent     PKI-as-a-Service yellow: open group / active page fill
 *   --docs-nav-accent-on  text on the yellow fill
 *   --docs-nav-current    translucent yellow: current sub-page
 *   --docs-nav-surface    near-black rail
 */

:root {
  --docs-nav-accent: var(--theme-accent, #F4BF4A);
  --docs-nav-accent-on: var(--theme-accent-on, #111111);
  --docs-nav-current: rgb(244 191 74 / 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;
}

/* --------------------------------------------------------------- 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;
  }
}

/* =====================================================================
   v1.1.1 UI fixes
   ===================================================================== */

/* 1. Zoomed images (Magnific Popup) open above the fixed sidebar (z 9999). */
.mfp-bg { z-index: 10040 !important; }
.mfp-wrap { z-index: 10043 !important; }

/* 2. Sidebar refresh (CertSecure-style): dark rail edge to edge, thin dark
   scrollbar with no white gutter, quieter sub-items, clear active state. */
.idocs-navigation,
.idocs-navigation > .nav {
  background-color: var(--docs-nav-surface);
}
.idocs-navigation > .nav {
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
  overscroll-behavior: contain;
}
.idocs-navigation > .nav::-webkit-scrollbar { width: 6px; }
.idocs-navigation > .nav::-webkit-scrollbar-track { background: transparent; }
.idocs-navigation > .nav::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 6px; }
.idocs-navigation > .nav::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }
.idocs-navigation > .nav::-webkit-scrollbar-button { display: none; height: 0; }

.idocs-navigation .nav > .nav-item > .nav-group__header.nav-link,
.idocs-navigation > .nav > .nav-item > a.nav-link {
  font-size: 0.95rem;
  letter-spacing: 0.1px;
}
.idocs-navigation .nav .nav-group > .nav {
  margin: 4px 0 8px;
}
.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link {
  padding: 7px 10px 7px 42px;
  color: var(--docs-nav-text-dim);
  background: none;
}
.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link:hover {
  background: rgb(255 255 255 / 6%);
  color: #fff;
}
.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link.active {
  background: rgb(255 255 255 / 8%);
  color: var(--docs-nav-accent);
  font-weight: 600;
}

/* 3. Links use the PKIaaS gold on hover/focus, never the CBOM teal, with a
   real underline offset from the text instead of the tight pseudo-element. */
a:hover,
a:active,
.idocs-content a:hover,
.idocs-content a:focus {
  color: #8a6200;
}
.idocs-content .col-12 a::after,
.alert a::after {
  content: none !important;
  display: none !important;
}
.idocs-content .col-12 a:not(.popup-img):not(.btn),
.alert a {
  text-decoration: underline;
  text-decoration-color: var(--theme-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.idocs-content .col-12 a:not(.popup-img):not(.btn):hover {
  text-decoration-color: #8a6200;
}
.table-of-contents a,
.table-of-contents a:hover { text-decoration: none !important; }

/* 4. Fallback "On this Page" anchors land below the sticky header. */
.toc-anchor { scroll-margin-top: 90px; }

/* 5. Footer social icons centred inside their circles. */
.social-icon-footer {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}
.social-icons.social-icons-lg .social-icon-footer a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  padding: 0;
}
.social-icon-footer a svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* 6. Tables: full width, theme dark-yellow header with white text. */
.table { max-width: 100% !important; width: 100%; }
.table thead,
.table thead th {
  background-color: var(--theme-primary) !important;
  color: #fff !important;
}
.table thead th a { color: #fff !important; }

/* =====================================================================
   v1.1.2 Sidebar in the CertSecure documentation style: text-only rows (no
   icons), bold section labels, a filled pill for the open section with an
   edge marker, indented plain sub-pages, and a slim scrollbar. Horizontal
   scrolling of the rail is disabled so labels are never cut off.
   ===================================================================== */
:root { --docs-nav-surface: #121417; }
.idocs-navigation > .nav {
  overflow-x: hidden;
  padding: 14px 0 40px;
}
.idocs-navigation .nav-group__icon,
.idocs-navigation .nav-link--iconed .nav-group__icon { display: none !important; }

.idocs-navigation .nav > .nav-item > .nav-group__header.nav-link,
.idocs-navigation > .nav > .nav-item > a.nav-link,
.idocs-navigation > .nav > .nav-item > a.nav-link--iconed {
  position: relative;
  padding: 11px 14px 11px 18px !important;
  margin: 3px 12px !important;
  width: calc(100% - 24px) !important;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600 !important;
  color: #f2f2f2;
  gap: 8px;
}
/* edge marker beside the open section / current top-level page */
.idocs-navigation .nav > .nav-item.nav-group.open > .nav-group__header.nav-link::before,
.idocs-navigation > .nav > .nav-item > a.nav-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--docs-nav-accent);
}
.idocs-navigation .nav > .nav-item > .nav-group__header.nav-link:hover {
  background: rgb(255 255 255 / 7%);
  color: #fff;
}
.idocs-navigation .nav > .nav-item.nav-group.open > .nav-group__header.nav-link,
.idocs-navigation > .nav > .nav-item > a.nav-link.active {
  background: var(--docs-nav-accent);
  color: var(--docs-nav-accent-on);
}
.idocs-navigation .nav-group__chevron { width: 6px; height: 6px; }

/* sub-pages: indented plain text, current page in the theme yellow */
.idocs-navigation .nav .nav-group > .nav { margin: 6px 0 10px; }
.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link {
  padding: 8px 14px 8px 32px !important;
  margin: 1px 12px !important;
  font-size: 0.9rem;
  font-weight: 500 !important;
  line-height: 1.35;
  color: #d8d8d8;
  background: none !important;
}
.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link:hover { color: #fff; }
.idocs-navigation .nav .nav-group > .nav > .nav-item > .nav-link.active {
  color: var(--docs-nav-accent) !important;
  font-weight: 600 !important;
}

/* slim scrollbar like the CertSecure docs */
.idocs-navigation > .nav { scrollbar-width: thin; scrollbar-color: #5c5f66 transparent; }
.idocs-navigation > .nav::-webkit-scrollbar { width: 5px; }
.idocs-navigation > .nav::-webkit-scrollbar-thumb { background: #5c5f66; border-radius: 5px; }

/* Links in the content: theme gold, never bold, gold on hover/click */
.idocs-content .col-12 a:not(.btn):not(.popup-img),
.idocs-content .col-12 a:not(.btn) strong,
.idocs-content .col-12 a:not(.btn) b,
.alert a, .alert a strong {
  font-weight: inherit !important;
  color: var(--theme-primary);
}
.idocs-content .col-12 a:not(.btn):hover,
.idocs-content .col-12 a:not(.btn):focus,
.idocs-content .col-12 a:not(.btn):active,
.idocs-content .col-12 a:not(.btn):hover strong {
  color: #8a6200 !important;
}

/* Checklists: the ☐ box replaces the bullet */
.idocs-content ul.checklist { list-style: none; padding-left: 0.4rem; }
.idocs-content ul.checklist > li { padding-left: 1.6em; text-indent: -1.6em; }