:root {
  --md-primary-fg-color: #316dfb;
  --md-primary-fg-color--light: #316dfb;
  --md-primary-fg-color--dark: #316dfb;
}

.md-grid {
  max-width: 67rem !important;
}

/* ===== Collapsible details (??? admonition) styling ===== */

/* Base details - remove MkDocs Material default styling */
.md-typeset details {
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0.5em 0 !important;
  overflow: visible !important;
}

/* Summary line styling - clean, no background */
.md-typeset details > summary {
  background-color: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  padding: 0.4em 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  min-height: unset !important;
  font-weight: normal !important;
  color: inherit !important;
  list-style: none !important;
  position: relative !important;
}

/* Hide default marker */
.md-typeset details > summary::-webkit-details-marker {
  display: none !important;
}

.md-typeset details > summary::marker {
  display: none !important;
  content: "" !important;
}

/* Remove default admonition icon/pseudo-elements and Material's expand arrow */
.md-typeset details::before,
.md-typeset details::after,
.md-typeset details > summary::after,
[dir=ltr] .md-typeset summary::after,
[dir=rtl] .md-typeset summary::after,
.md-typeset .info > summary::after,
.md-typeset .note > summary::after,
.md-typeset .tip > summary::after,
.md-typeset .warning > summary::after,
.md-typeset .abstract > summary::after,
.md-typeset .question > summary::after,
.md-typeset .success > summary::after,
.md-typeset .danger > summary::after,
.md-typeset .bug > summary::after,
.md-typeset .example > summary::after,
.md-typeset .quote > summary::after {
  display: none !important;
  content: none !important;
}

/* Arrow indicator for collapsible sections - override Material's admonition icon */
.md-typeset details > summary::before,
.md-typeset .info > summary::before,
.md-typeset .note > summary::before,
.md-typeset .tip > summary::before,
.md-typeset .warning > summary::before,
.md-typeset .abstract > summary::before,
.md-typeset .question > summary::before,
.md-typeset .success > summary::before,
.md-typeset .danger > summary::before,
.md-typeset .bug > summary::before,
.md-typeset .example > summary::before,
.md-typeset .quote > summary::before,
[dir=ltr] .md-typeset summary::before,
[dir=rtl] .md-typeset summary::before,
[dir=ltr] .md-typeset .admonition-title::before,
[dir=rtl] .md-typeset .admonition-title::before {
  content: "➤" !important;
  display: inline-block !important;
  position: static !important;
  font-size: 0.85em !important;
  font-weight: normal !important;
  margin-right: 0.4em !important;
  margin-left: 0 !important;
  transition: transform 0.2s ease !important;
  transform: rotate(0deg) !important;
  color: #555 !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  text-align: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Arrow points down when expanded - change content to down arrow */
.md-typeset details[open] > summary::before,
.md-typeset .info[open] > summary::before,
.md-typeset .note[open] > summary::before,
.md-typeset .tip[open] > summary::before,
.md-typeset .warning[open] > summary::before,
.md-typeset .abstract[open] > summary::before,
.md-typeset .question[open] > summary::before,
.md-typeset .success[open] > summary::before,
.md-typeset .danger[open] > summary::before,
.md-typeset .bug[open] > summary::before,
.md-typeset .example[open] > summary::before,
.md-typeset .quote[open] > summary::before,
[dir=ltr] .md-typeset details[open] > summary::before,
[dir=rtl] .md-typeset details[open] > summary::before {
  content: "▼" !important;
  transform: none !important;
  font-size: 0.7em !important;
}

/* ===== OPEN state: light gray border around content, aligned with ➤ ===== */

/* When open, add border to the details element and use padding-top to push content below summary */
.md-typeset details[open] {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 0.8em 1.2em 1em 1.2em !important;
  margin-left: 0 !important;
  background-color: #ffffff !important;
}

/* Summary inside open details - at the top of the border box */
.md-typeset details[open] > summary {
  padding: 0 0 0.6em 0 !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

/* ===== CLOSED state: no border, just the summary line ===== */
.md-typeset details:not([open]) {
  border: none !important;
  padding: 0 !important;
  margin: 0.5em 0 !important;
  background-color: transparent !important;
}

.md-typeset details:not([open]) > summary {
  padding: 0.3em 0 !important;
}

/* ===== Nested details ===== */
/* Nested details inside open parent - proper spacing */
.md-typeset details[open] details {
  margin: 0.5em 0 !important;
}

.md-typeset details[open] details:not([open]) {
  border: none !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.md-typeset details[open] details[open] {
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  padding: 0.8em 1.2em 1em 1.2em !important;
  background-color: #ffffff !important;
}

/* ===== Sidebar Sub-Tabs (Guides / API Reference) ===== */

.nav-sub-tabs-wrapper {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-sub-tabs {
  display: flex !important;
  gap: 1.5rem !important;
  margin: 0.4rem 0.8rem 0.8rem 0.8rem !important;
  padding-bottom: 0 !important;
}

.nav-sub-tab {
  padding: 0.4rem 0 0.3rem 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #666 !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  position: relative !important;
  border-bottom: 2px solid transparent !important;
}

.nav-sub-tab.active {
  color: var(--md-primary-fg-color, #316dfb) !important;
  border-bottom-color: var(--md-primary-fg-color, #316dfb) !important;
}

.nav-sub-tab:hover:not(.active) {
  color: #333 !important;
}

/* Override Material's section display rules for hidden sections */
.md-nav__item--section.nav-tabs-hidden,
.md-nav__item.nav-tabs-hidden {
  display: none !important;
}

.md-nav__item--section.nav-tabs-hidden > .md-nav,
.md-nav__item.nav-tabs-hidden > .md-nav {
  display: none !important;
}

/* Hide the parent tab title and section labels when sub-tabs are active */
.nav-tabs-parent-title {
  display: none !important;
}

.nav-tabs-section-label {
  display: none !important;
}