/* Redoc sidebar overrides — validated against Redoc v2.5.2.
   These selectors target Redoc's internal DOM structure (.menu-content,
   data-item-id attributes, .active class). Re-verify all selectors if
   upgrading the Redoc version pinned in index.html.
   Color tokens reference the Tailwind Zinc/Blue palette from entitlements-portal. */

/* ── Body reset ── */

body {
  margin: 0;
  padding: 0;
}

/* ── Sidebar: right border to separate from content ── */

[role="navigation"] {
  border-right: 1px solid rgba(9, 9, 11, 0.08);
}

/* ── Sidebar: logo area border-bottom ── */

[role="navigation"] > div:first-child {
  border-bottom: 1px solid rgba(9, 9, 11, 0.08);
  padding-bottom: 16px;
  margin-bottom: 8px;
}

/* ── Sidebar: section group headers ── */

.menu-content li[data-item-id^="group/"] > label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #71717a !important; /* zinc-500 */
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 8px 4px !important;
}

/* ── Sidebar: tag items (nested under groups) ──
   The Authentication info-description section is a top-level sibling of
   tags in the sidebar, so it gets the same visual treatment. */

.menu-content li[data-item-id^="tag/"] > label,
.menu-content li[data-item-id^="tag/"] > a,
.menu-content li[data-item-id="section/Authentication"] > label,
.menu-content li[data-item-id="section/Authentication"] > a {
  padding-left: 24px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-right: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px;
  margin: 1px 8px !important;
  transition: background-color 150ms ease;
}

.menu-content li[data-item-id^="tag/"] > label:hover,
.menu-content li[data-item-id^="tag/"] > a:hover,
.menu-content li[data-item-id="section/Authentication"] > label:hover,
.menu-content li[data-item-id="section/Authentication"] > a:hover {
  background-color: rgba(9, 9, 11, 0.04);
}

/* ── Sidebar: operation items (nested under tags) ──
   The Authentication sub-sections (Getting Started, Token Lifetimes,
   Scopes) get the same visual treatment as operations to read as
   children of the Authentication heading. */

.menu-content li[data-item-id^="operation/"] > label,
.menu-content li[data-item-id^="operation/"] > a,
.menu-content li[data-item-id="section/Client-Credentials"] > label,
.menu-content li[data-item-id="section/Client-Credentials"] > a,
.menu-content li[data-item-id="section/Getting-Started"] > label,
.menu-content li[data-item-id="section/Getting-Started"] > a,
.menu-content li[data-item-id="section/Token-Lifetimes"] > label,
.menu-content li[data-item-id="section/Token-Lifetimes"] > a,
.menu-content li[data-item-id="section/Scopes"] > label,
.menu-content li[data-item-id="section/Scopes"] > a {
  padding-left: 36px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  padding-right: 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #52525b !important; /* zinc-600 */
  border-radius: 8px;
  margin: 1px 8px !important;
  transition: background-color 150ms ease;
}

.menu-content li[data-item-id^="operation/"] > label:hover,
.menu-content li[data-item-id^="operation/"] > a:hover,
.menu-content li[data-item-id="section/Client-Credentials"] > label:hover,
.menu-content li[data-item-id="section/Client-Credentials"] > a:hover,
.menu-content li[data-item-id="section/Getting-Started"] > label:hover,
.menu-content li[data-item-id="section/Getting-Started"] > a:hover,
.menu-content li[data-item-id="section/Token-Lifetimes"] > label:hover,
.menu-content li[data-item-id="section/Token-Lifetimes"] > a:hover,
.menu-content li[data-item-id="section/Scopes"] > label:hover,
.menu-content li[data-item-id="section/Scopes"] > a:hover {
  background-color: rgba(9, 9, 11, 0.04);
  color: #09090b !important; /* zinc-950 */
}

/* ── Sidebar: active/selected state — left accent bar ── */

.menu-content li[data-item-id^="tag/"].active > label,
.menu-content li[data-item-id^="tag/"].active > a,
.menu-content li[data-item-id^="operation/"].active > label,
.menu-content li[data-item-id^="operation/"].active > a,
.menu-content li[data-item-id="section/Authentication"].active > label,
.menu-content li[data-item-id="section/Authentication"].active > a,
.menu-content li[data-item-id="section/Client-Credentials"].active > label,
.menu-content li[data-item-id="section/Client-Credentials"].active > a,
.menu-content li[data-item-id="section/Getting-Started"].active > label,
.menu-content li[data-item-id="section/Getting-Started"].active > a,
.menu-content li[data-item-id="section/Token-Lifetimes"].active > label,
.menu-content li[data-item-id="section/Token-Lifetimes"].active > a,
.menu-content li[data-item-id="section/Scopes"].active > label,
.menu-content li[data-item-id="section/Scopes"].active > a {
  background-color: rgba(9, 9, 11, 0.04);
  position: relative;
}

.menu-content li[data-item-id^="tag/"].active > label::before,
.menu-content li[data-item-id^="tag/"].active > a::before,
.menu-content li[data-item-id^="operation/"].active > label::before,
.menu-content li[data-item-id^="operation/"].active > a::before,
.menu-content li[data-item-id="section/Authentication"].active > label::before,
.menu-content li[data-item-id="section/Authentication"].active > a::before,
.menu-content li[data-item-id="section/Client-Credentials"].active > label::before,
.menu-content li[data-item-id="section/Client-Credentials"].active > a::before,
.menu-content li[data-item-id="section/Getting-Started"].active > label::before,
.menu-content li[data-item-id="section/Getting-Started"].active > a::before,
.menu-content li[data-item-id="section/Token-Lifetimes"].active > label::before,
.menu-content li[data-item-id="section/Token-Lifetimes"].active > a::before,
.menu-content li[data-item-id="section/Scopes"].active > label::before,
.menu-content li[data-item-id="section/Scopes"].active > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 9999px;
  background-color: #09090b; /* zinc-950 */
}

/* ── Sidebar: general list item spacing ── */

.menu-content ul {
  padding: 0 !important;
  margin: 0 !important;
}

.menu-content li {
  list-style: none;
}

/* ── Sidebar: scrollbar styling ── */

[role="navigation"] ::-webkit-scrollbar {
  width: 4px;
}

[role="navigation"] ::-webkit-scrollbar-track {
  background: transparent;
}

[role="navigation"] ::-webkit-scrollbar-thumb {
  background-color: #d4d4d8; /* zinc-300 */
  border-radius: 9999px;
}

/* ── Content area: Authentication sections ──
   Spacing uses a single 16px unit:
     - 0px above Authentication (parent) to sit flush under the intro divider
     - 24px between sub-sections (1.5 units — enough to separate, not enough to isolate)
     - 8px heading-to-body (0.5 units — heading clearly "owns" the text below)
     - Sub-section headings sized down so they read as children of Authentication */

[data-section-id="section/Authentication"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

[data-section-id="section/Client-Credentials"],
[data-section-id="section/Getting-Started"],
[data-section-id="section/Token-Lifetimes"],
[data-section-id="section/Scopes"] {
  padding-top: 24px !important;
  padding-bottom: 0 !important;
}

[data-section-id="section/Client-Credentials"] h1,
[data-section-id="section/Client-Credentials"] h2,
[data-section-id="section/Getting-Started"] h1,
[data-section-id="section/Getting-Started"] h2,
[data-section-id="section/Token-Lifetimes"] h1,
[data-section-id="section/Token-Lifetimes"] h2,
[data-section-id="section/Scopes"] h1,
[data-section-id="section/Scopes"] h2 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 1.25em !important;
}