/* Hide the search close icon by default; JS will show it when needed */
.md-search__close {
  display: none !important;
}
/* === FINAL SECONDARY SIDEBAR POSITIONING OVERRIDE === */
.md-sidebar--secondary,
.md-sidebar--secondary[data-md-component="sidebar"],
.md-sidebar--secondary[data-md-state],
.md-sidebar--secondary[data-md-state="lock"] {
  position: sticky !important;
  top: 8rem !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  z-index: 200 !important;
}

/* STRONG FINAL MOBILE SCROLL FIX (highest priority):
   Lock the sidebar inner to the viewport and force the scrollwrap to handle
   vertical scrolling. This is intentionally placed at the end and uses
   !important to win over earlier rules that made nested lists overflow.
*/
@media (max-width: 76.24em) {
  /* Ensure the sidebar occupies the viewport height while drawer is open */
  .md-sidebar--primary,
  input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary,
  .md-toggle[data-md-toggle="drawer"]:checked
    ~ .md-container
    .md-sidebar--primary {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important; /* prevent sidebar itself from scrolling */
    will-change: auto !important;
  }

  /* Keep the inner wrapper full height but clipped; scrollwrap will scroll */
  .md-sidebar--primary .md-sidebar__inner {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Force scrollwrap to fill available space and handle vertical scrolling */
  .md-sidebar--primary .md-sidebar__scrollwrap,
  input[id="__drawer"]:checked
    ~ .md-container
    .md-sidebar--primary
    .md-sidebar__scrollwrap,
  .md-toggle[data-md-toggle="drawer"]:checked
    ~ .md-container
    .md-sidebar--primary
    .md-sidebar__scrollwrap {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }

  /* Prevent nested navs from using absolute/transform tricks that remove them
     from the scroll context (keep them in normal flow) */
  .md-sidebar--primary .md-nav__list,
  .md-sidebar--primary .md-nav__item,
  .md-sidebar--primary .md-nav__item > .md-nav__list,
  .md-sidebar--primary nav[data-md-level] {
    position: static !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Make sure scrolling works with touch and pointer events */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    touch-action: pan-y !important;
  }
}

[data-md-color-scheme="openobserve"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ecb7b7;
  --md-primary-fg-color--dark: #90030c;
}

@media only screen and (min-width: 76.25em) {
  .md-main__inner {
    max-width: none;
  }

  .md-sidebar--primary {
    left: 0;
  }

  .md-sidebar--secondary {
    right: 0;
    margin-left: 0;
    -webkit-transform: none;
    transform: none;
  }
}

.md-typeset code {
  color: #ef5552;
}

html {
  font-size: 125%;
}
/* --- Sidebar overlap fix --------------------------------------------------
   Issue: Bottom of left navigation sidebar links were being hidden by a white
   overlay/section when scrolling the page body. In Material for MkDocs this
   is commonly caused by the main content (or footer) layering above the
   sidebar, or by the sidebar losing its own scroll context causing the fade
   pseudo-element to cover final items.

   Fix:
   1. Reassert a dedicated scroll container + full height for primary sidebar.
   2. Remove bottom/top gradient (pseudo elements) that can mask final items.
   3. Raise z-index so main content/footer can't visually overlap it.
   4. Provide stable scrollbar to avoid layout shift.
*/
@media (min-width: 60em) {
  /* Add bottom padding to main content so sidebar never gets overlapped by footer */
  .md-main,
  .md-content {
    padding-bottom: 0.5rem;
  }
  .md-footer {
    z-index: 0;
  }
  /* Primary sidebar scroll container - content-based height like secondary sidebar */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    overflow-y: auto !important;
    padding: 0.25rem 0 1rem !important;
    overscroll-behavior: contain !important;
    width: 100% !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    border-right: none !important;
    box-sizing: border-box !important;
    /* Allow content-based height with increased footer clearance */
    height: auto !important;
    max-height: calc(100vh - 12rem) !important;
  }
  /* Remove bottom fade/overlay that appeared as white block */
  .md-sidebar--primary .md-sidebar__scrollwrap:after {
    display: none !important;
  }
  /* Also disable any other potential masking pseudo-elements */
  .md-sidebar--primary:before,
  .md-sidebar--primary:after,
  .md-sidebar--primary .md-sidebar__inner:before,
  .md-sidebar--primary .md-sidebar__inner:after {
    display: none !important;
  }
  /* Tighter default nav spacing */
  .md-sidebar--primary .md-nav {
    margin-top: 0;
  }
  .md-sidebar--primary .md-nav__list {
    padding-bottom: 0;
  }
  /* Ensure main/content layers don't cover sidebar */
  .md-main,
  .md-main__inner,
  .md-content,
  .md-content__inner {
    position: relative;
    z-index: 0;
  }
}

[data-md-color-scheme="slate"] .md-search__input {
  background-color: #7c3aed !important;
  border: 2px solid #7c3aed !important;
  border-radius: 999px !important;
  color: #fff !important;
}

[data-md_color_scheme="slate"] .md-search__icon {
  color: #fff !important;
}

/* Search dropdown styling for dark theme */
[data-md_color_scheme="slate"] .md-search__suggest {
  background: #222 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Cursor pointer only on search elements */
.md-header__button[for="__search"],
.md-search__input,
.md-search__icon {
  cursor: pointer !important;
}

.md-header,
.md-header__inner,
.md-header__title,
.md-header__ellipsis {
  cursor: default !important;
}

/* Theme-specific full screen backgrounds */
[data-md-color-scheme="default"] body {
  background-color: rgb(255, 255, 255) !important;
}

[data-md-color-scheme="slate"] body {
  background-color: rgb(18, 18, 18) !important;
}

[data-md-color-scheme="openobserve"] body {
  background-color: #1a1a2e !important;
}

.md-search__input:focus {
  border-color: #7c3aed !important;
  outline: none;
}

.md-search__icon {
  color: #000 !important; /* black icon for light theme */
  /* transition: color 0.2s; */
  padding-top: 10px;
}

/* Dark theme overrides */

[data-md-color-scheme="slate"] .md-search__input {
  background-color: rgb(29, 22, 40) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 8px 3.2em 8px 3.2em !important;
  font-size: 1.5em !important;
  min-width: 16em !important;
}
.md-search__output {
  border: 2px solid #7c3aed !important;
  border-radius: 8px !important;
  margin-top: 1em !important;
}

[data-md_color-scheme="slate"] .md-search__icon {
  color: #fff !important; /* white icon for dark theme */
}

/* --- Improved Search Bar Styles: Always Override --- */
.md-search__form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
}

/* Direct approach: Add close button to search input */
.md-search__input {
  background-color: #ede9fe;
  border: 1px solid #7c3aed !important;
  border-radius: 8px !important;
  color: #222 !important;
  transition: border-color 0.2s;
  box-shadow: none !important;
  padding: 9px 3.2em 9px 3.2em !important; /* Match docs title padding: 5px vertical */
  font-size: 1.5em !important;
  min-width: 20em !important;
  height: auto !important; /* Let height be determined by padding + content */
  background-image: url("/docs/assets/close-icon.svg") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 1em) center !important;
  background-size: 1.2em !important;
}
.md-search__input::placeholder {
  color: #7c3aed !important;
  opacity: 1 !important;
  font-size: 1.2em !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.md-search__icon {
  color: #000 !important;
  /* transition: color 0.2s; */
  position: absolute !important;
  right: 1.5em !important;
  top: 46% !important;
  transform: translateY(-50%) !important;
  font-size: 1.25em !important;
  pointer-events: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
}

[data-md-color-scheme="slate"] .md-search__form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding: 0 !important;
}

[data-md_color-scheme="slate"] .md-search__input {
  background-color: #7c3aed !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 8px 3.2em 8px 3.2em !important; /* Match docs title padding: 5px vertical */
  font-size: 1.5em !important;
  min-width: 20em !important;
  height: auto !important; /* Let height be determined by padding + content */
  /* Remove close button for desktop - will be added for mobile only */
}
[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: #fff !important;
}

[data-md-color-scheme="slate"] .md-search__icon {
  color: #fff !important;
  position: absolute !important;
  right: 1.2em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.5em !important;
  pointer-events: none;
}

/* --- NAVBAR HEIGHT CONSISTENCY --- */
.md-header {
  min-height: 4rem !important;
  height: auto !important;
  position: sticky !important;
  top: 0 !important;
}

.md-header__inner {
  min-height: 4rem !important;
  height: auto !important;
  /* padding: 0.5rem 1rem !important; */
}

/* --- FINAL: Sidebar Custom Design --- */
.md-sidebar--primary {
  background: rgb(245, 243, 254) !important;
  border: 2px solid #7c3aed !important;
  border-radius: 8px !important;
  padding: 1em 0.5em !important;
  /* margin-right: 2em !important; */
  box-shadow: none !important;
  z-index: 200 !important;
  position: sticky !important;
  top: 8rem !important;
  /* Content-based height with increased footer clearance */
  height: auto !important;
  min-height: auto !important;
  max-height: calc(100vh - 9rem) !important;
  overflow: hidden !important;
  /* Keep it visible when scrolling */
  transform: none !important;
  display: block !important;
}

/* Desktop-only styles */
@media (min-width: 76.25em) {
  .md-sidebar--primary {
    margin-left: 12px;
    margin-right: 1em !important;
  }
}
[data-md-color-scheme="slate"] .md-sidebar--primary {
  background: rgb(23, 20, 29) !important;
  border: 2px solid #7c3aed !important;
  border-radius: 8px !important;
  padding: 1em 0.5em !important;
  box-shadow: none !important;
  z-index: 200 !important;
  position: sticky !important;
  top: 8rem !important;
  /* Content-based height with increased footer clearance */
  height: auto !important;
  min-height: auto !important;
  max-height: calc(100vh - 9rem) !important;
  overflow: hidden !important;
  transform: none !important;
  display: block !important;
}

/* Desktop-only dark theme margin */
@media (min-width: 76.25em) {
  [data-md-color-scheme="slate"] .md-sidebar--primary {
    margin-right: 1em !important;
  }
}

.md-sidebar__title,
.md-sidebar__title:before,
.md-sidebar__title:after {
  box-shadow: none !important;
  background: transparent !important;
}

/* Highlight selected nav item with purple bar on left */
.md-sidebar--primary .md-nav__item--active > .md-nav__link {
  position: relative !important;
  background: transparent !important;
  border-radius: 3px !important;
  /* make the active link text bold (applies to the text, not the empty pseudo-element) */
  font-weight: 700 !important;
  /* leave space on the RIGHT for the indicator that sits against the sidebar border */
  padding-right: 1.6em !important;
  /* keep a little left padding for text alignment */
  padding-left: 1.1em !important;
  overflow: hidden !important;
}
.md-sidebar--primary .md-nav__item--active > .md-nav__link::before {
  content: "";
  position: absolute;
  right: 8px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 30px;
  background: #4b237a;
  border-radius: 3px !important;
  z-index: 3 !important;
}

/* --- Sidebar: Add right margin for full rounded border visibility --- */
/* Margins are now handled in the main sidebar rules above */

/* --- Remove white shadow from sidebar title --- */
.md-sidebar__title {
  box-shadow: none !important;
  background: transparent !important;
}

.md-sidebar__title,
.md-sidebar__title:before,
.md-sidebar__title:after {
  box-shadow: none !important;
  background: transparent !important;
}

/* --- Ensure sidebar scrollbar thumb is flush with right border --- */
.md-sidebar--primary {
  padding-right: 0 !important;
  border-right: 2px solid #7c3aed !important;
  box-sizing: border-box !important;
}
.md-sidebar--primary .md-sidebar__scrollwrap {
  padding-right: 0 !important;
  margin-right: 0 !important;
  border-right: none !important;
  box-sizing: border-box !important;
}

/* --- Final fix: Remove all space between sidebar scrollbar and border --- */
.md-sidebar--primary {
  padding-right: 0 !important;
  border-right: 2px solid #7c3aed !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  background-clip: padding-box !important;
}
.md-sidebar--primary .md-sidebar__scrollwrap {
  width: 100% !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  border-right: none !important;
  box-sizing: border-box !important;
  overflow-y: scroll !important;
}
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 6px !important;
  background: transparent !important;
}
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: #7c3aed !important;
  border-radius: 6px !important;
  border-right: none !important;
  margin-right: 0 !important;
}

/* Outer-sidebar active indicator: render a single highlight bar inside the
   sidebar scroll container so the marker visually sits against the sidebar
   inner border (outer div). */
.md-sidebar--primary > .o-active-indicator {
  /* indicator rendered as a direct child of the outer sidebar so it can
     visually sit flush against the sidebar inner border */
  position: absolute;
  right: 2px; /* aligns with the 2px sidebar inner border; tweak if needed */
  width: 6px;
  background: #4b237a;
  border-radius: 3px;
  z-index: 220; /* above sidebar content but below header overlays */
  transition: top 180ms ease, height 180ms ease, opacity 160ms ease;
  opacity: 0;
  pointer-events: none;
}

/* Hide native scrollbar inside the sidebar scrollwrap and provide a custom
/* --- Remove background and shadow from sidebar nav title --- */
.md-sidebar--primary .md-nav__title,
.md-sidebar--primary .md-nav__title:before,
.md-sidebar--primary .md-nav__title:after {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure primary sidebar inner container is content-based like secondary */
.md-sidebar--primary .md-sidebar__inner {
  height: auto !important;
  min-height: auto !important;
  display: block !important;
  overflow: hidden !important;
}

/* Ensure all navigation elements stay within sidebar boundaries */
.md-sidebar--primary .md-nav,
.md-sidebar--primary .md-nav__list,
.md-sidebar--primary .md-nav__item,
.md-sidebar--primary .md-nav__link {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-wrap: break-word !important;
}

.md-nav__title {
  font-weight: 700 !important;
  /* Ensure the nav title is not sticky — override any theme "sticky" rules */
  position: static !important;
}

/* Default (light) theme: make nav title dark for contrast */
.md-nav__title {
  color: #111111 !important;
}

/* Dark theme overrides: ensure title stays readable on dark backgrounds */
[data-md-color-scheme="slate"] .md-nav__title,
[data-md-color-scheme="openobserve"] .md-nav__title {
  color: #ffffff !important;
}

/* Hide md-search__options element */
.md-search__options {
  display: none !important;
}

/* Prevent theme from adding background or shadow to secondary nav titles */
@media screen and (min-width: 60em) {
  .md-nav--secondary .md-nav__title,
  .md-nav--secondary .md-nav__title:before,
  .md-nav--secondary .md-nav__title:after,
  .md-sidebar--secondary .md-nav__title,
  .md-sidebar--secondary .md-nav__title:before,
  .md-sidebar--secondary .md-nav__title:after {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: static !important; /* prevent sticky if applied elsewhere */
    z-index: auto !important;
  }
}
/* Reset any conflicting styles */

/* Reset any conflicting styles */

/* --- Responsive Search Bar Visibility --- */
@media (max-width: 1440px) {
  .md-header .md-search__input {
    min-width: 14em !important;
    font-size: 1.5em !important;
    height: auto !important; /* Ensure consistent height calculation */
  }
}

@media (max-width: 1024px) {
  /* Hide search input only in the header navbar, not in search overlay */
  .md-header .md-search__input {
    display: none !important;
  }
  .md-header .md-search__icon {
    display: inline-flex !important;
    margin-left: 10px;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  /* Ensure search input is visible and functional in search overlay */
  .md-search .md-search__input {
    display: block !important;
    width: 100% !important;
    min-width: auto !important;
    margin: 0 !important;
    padding: 5px 4.5em 5px 1em !important; /* Match docs title padding: 5px vertical, extra right for close button */
    font-size: 1.2em !important;
    border-radius: 8px !important;
    pointer-events: auto !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    /* Add close button background image for mobile only */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 1em) center !important;
    background-size: 1.2em !important;
  }

  /* Dark theme close button for mobile */
  [data-md-color-scheme="slate"] .md-search .md-search__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
  }

  /* Ensure search overlay icon doesn't interfere */
  .md-search .md-search__icon {
    pointer-events: none !important;
    display: none !important;
  }

  /* Mobile search overlay styling */
  .md-search__output {
    max-height: 75vh !important;
    overflow-y: auto !important;
  }

  /* Ensure search form is properly styled on mobile */
  .md-search .md-search__form {
    position: relative !important;
    display: block !important;
    width: 100% !important;
  }

  /* Mobile close button positioning */
  .md-search .md-search__close {
    display: flex !important;
    right: 1em !important;
    color: #7c3aed !important;
  }

  /* Mobile close button hover */
  .md-search .md-search__close:hover {
    background-color: rgba(124, 58, 237, 0.1) !important;
  }

  /* Dark theme mobile close button */
  [data-md-color-scheme="slate"] .md-search .md-search__close {
    color: #fff !important;
  }
}

@media (min-width: 1025px) {
  .md-search__input {
    display: inline-block !important;
  }
}

@media (min-width: 1441px) {
  .md-search__input {
    min-width: 20em !important;
    font-size: 1.5em !important;
    display: inline-block !important;
    height: auto !important; /* Ensure consistent height calculation */
  }
}

/* Slim scrollbar styling for both sidebars - High specificity override */
.md-sidebar--primary .md-sidebar__scrollwrap {
  scrollbar-width: thin !important;
  scrollbar-color: #7c3aed transparent !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
  background: transparent !important;
  background-color: transparent !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background: #7c3aed !important;
  background-color: #7c3aed !important;
  border-radius: 3px !important;
  border: none !important;
  min-height: 20px !important;
}

.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background: #6d28d9 !important;
  background-color: #6d28d9 !important;
}

/* Fix sidebar overflow and ensure proper scrolling */
.md-sidebar--primary .md-sidebar__scrollwrap {
  overflow-y: auto !important;
  max-height: inherit !important;
}

/* Ensure sidebars maintain their position and don't move */
.md-sidebar--primary {
  will-change: auto !important;
  transition: none !important;
  /* Force sticky positioning and prevent any transforms */
  position: sticky !important;
  transform: none !important;
}

/* Override any MkDocs Material default transforms */
.md-sidebar--primary[data-md-state] {
  transform: none !important;
}

/* Stronger override for primary sidebar positioning */
.md-sidebar--primary {
  top: 8rem !important;
  position: sticky !important;
}

/* Ensure both sidebars have proper footer clearance */
@media (min-width: 60em) {
  .md-main,
  .md-content {
    padding-bottom: 3rem;
  }
  .md-footer {
    z-index: 0;
    margin-top: 2rem;
  }
}

/* === FINAL SIDEBAR POSITIONING OVERRIDE === */
/* These rules must be at the end to override all other positioning */
.md-sidebar--primary,
.md-sidebar--primary[data-md-component="sidebar"],
.md-sidebar--primary[data-md-state],
.md-sidebar--primary[data-md-state="lock"] {
  position: sticky !important;
  top: 8rem !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  z-index: 200 !important;
}

/* Override any CSS transforms that might be applied by JavaScript */
.md-sidebar--primary * {
  transform: none !important;
}
/* Force override any inline styles that might be applied by MkDocs Material */
.md-sidebar--primary[style*="transform"] {
  transform: none !important;
}

/* Additional safety measures to prevent sidebar shifting */
html .md-sidebar--primary {
  position: sticky !important;
  top: 8rem !important;
}

/* Remove any masking pseudo-elements from primary sidebar - like secondary sidebar */
.md-sidebar--primary .md-sidebar__scrollwrap:after {
  display: none !important;
}

.md-sidebar--primary:before,
.md-sidebar--primary:after,
.md-sidebar--primary .md-sidebar__inner:before,
.md-sidebar--primary .md-sidebar__inner:after {
  display: none !important;
}

.md-header {
  position: fixed !important;
  top: 70px !important;
}

.md-main__inner {
  margin-top: 70px !important;
}

nav.md-grid {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* default (base) = px-4 */
  padding-right: 1rem;
}

@media (min-width: 640px) {
  nav.md-grid {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  nav.md-grid {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  nav.md-grid {
    padding-left: 2.5rem; /* xl:px-10 */
    padding-right: 2.5rem;
  }
}
.md-search__inner {
  width: 20rem;
}
@media (max-width: 768px) {
  .md-search__inner {
    top: 80px !important;
  }

  .md-search__input {
    pointer-events: auto !important;
    color: black !important;
  }
}

.md-header__title {
  margin-left: 0.1rem;
  width: 100px;
}

@media (min-width: 1025px) {
  .md-header__title {
    flex-grow: 0;
    flex-basis: auto;
    max-width: 400px;
  }
  .md-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* === MOBILE SIDEBAR RESPONSIVE FIXES === */

/* Mobile breakpoints for sidebar */
@media (max-width: 76.24em) {
  /* Reset sidebar positioning for mobile */
  .md-sidebar--primary,
  .md-sidebar--primary[data-md-component="sidebar"],
  .md-sidebar--primary[data-md-state],
  .md-sidebar--primary[data-md-state="lock"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 280px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 300 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    margin: 0 !important;
    padding: 1rem !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: 2px solid #7c3aed !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
    will-change: transform !important;
  }

  /* Show sidebar when drawer is checked (mobile menu open) */
  .md-toggle[data-md-toggle="drawer"]:checked
    ~ .md-container
    .md-sidebar--primary,
  input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(0) !important;
  }

  /* Mobile sidebar scroll container */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: 100% !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  /* Mobile sidebar inner container */
  .md-sidebar--primary .md-sidebar__inner {
    height: 100% !important;
    min-height: 100% !important;
    padding: 1rem 0 !important;
  }

  /* Hide secondary sidebar on mobile */
  .md-sidebar--secondary {
    display: none !important;
  }

  /* Ensure main content doesn't overlap */
  .md-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .md-main__inner {
    margin-top: 4rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 1rem !important;
  }

  /* Mobile navigation improvements */
  .md-sidebar--primary .md-nav__title {
    padding: 1rem 0 0.5rem !important;
    font-size: 1.1rem !important;
    border-bottom: 1px solid rgba(124, 58, 237, 0.2) !important;
    margin-bottom: 0.5rem !important;
  }

  .md-sidebar--primary .md-nav__link {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }

  /* Mobile nested navigation */
  .md-sidebar--primary .md-nav__item--nested .md-nav__link {
    padding-left: 1rem !important;
  }

  .md-sidebar--primary .md-nav[data-md-level="1"] .md-nav__link {
    padding-left: 1.5rem !important;
  }

  .md-sidebar--primary .md-nav[data-md-level="2"] .md-nav__link {
    padding-left: 2rem !important;
  }

  .md-sidebar--primary .md-nav[data-md-level="3"] .md-nav__link {
    padding-left: 2.5rem !important;
  }

  /* Mobile active link styling */
  .md-sidebar--primary .md-nav__item--active > .md-nav__link::before {
    right: 0 !important;
    width: 3px !important;
    height: 100% !important;
    top: 0 !important;
    transform: none !important;
  }

  /* Mobile drawer overlay */
  .md-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 250 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
  }

  input[id="__drawer"]:checked ~ .md-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Tablet-specific adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
  .md-sidebar--primary {
    max-width: 260px !important;
    padding: 0.75rem !important;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap {
    max-height: calc(100vh - 6rem) !important;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .md-sidebar--primary {
    max-width: 90vw !important;
    padding: 0.75rem !important;
  }

  .md-sidebar--primary .md-nav__link {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.85rem !important;
  }

  .md-main__inner {
    padding: 0 0.5rem !important;
  }
}

/* Dark theme mobile adjustments */
@media (max-width: 76.24em) {
  [data-md-color-scheme="slate"] .md-sidebar--primary {
    background: rgb(23, 20, 29) !important;
    border-right: 2px solid #7c3aed !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3) !important;
  }

  [data-md-color-scheme="openobserve"] .md-sidebar--primary {
    background: #1a1a2e !important;
    border-right: 2px solid #7c3aed !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4) !important;
  }
}

/* Improve mobile header and navigation button */
@media (max-width: 76.24em) {
  .md-header__button[for="__drawer"] {
    margin-right: 0.5rem !important;
    color: #7c3aed !important;
  }

  .md-header__title {
    margin-left: 0.5rem !important;
    flex-grow: 1 !important;
  }
}

/* MOBILE FIX: Ensure primary sidebar links are tappable on mobile
   - force the sidebar and its inner containers above the overlay
   - ensure pointer-events are enabled for sidebar and links
   - enable smooth touch scrolling inside the scrollwrap
*/
@media (max-width: 76.24em) {
  /* Make sure the sidebar sits above the overlay and other content */
  .md-sidebar--primary {
    z-index: 1000 !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch !important; /* smooth scrolling on iOS */
  }

  /* Ensure the scroll container accepts touch and clicks */
  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--primary .md-sidebar__inner {
    z-index: 1001 !important;
    pointer-events: auto !important;
    overflow: auto !important; /* allow scrolling and tapping inside */
  }

  /* Make links fully interactive and on top of any small pseudo-elements */
  .md-sidebar--primary .md-nav__link {
    position: relative !important;
    z-index: 1002 !important;
    pointer-events: auto !important;
    display: block !important;
  }

  /* Prevent any active-indicator pseudo-elements from intercepting taps */
  .md-sidebar--primary .md-nav__item--active > .md-nav__link::before,
  .md-sidebar--primary > .o-active-indicator {
    pointer-events: none !important;
  }

  /* Keep overlay visually behind sidebar and don't intercept taps when drawer is open */
  .md-overlay {
    z-index: 900 !important;
  }
}

/* STRONG MOBILE OVERRIDES: fix overlap and non-clickable links */
@media (max-width: 76.24em) {
  /* Make sidebar a narrow drawer (avoid full-width that can cover content) */
  .md-sidebar--primary {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    width: 280px !important;
    max-width: 90vw !important;
    transform: translateX(-100%) !important; /* hidden by default */
    z-index: 1200 !important; /* baseline above header */
    top: 0 !important;
    height: 100vh !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important;
    background-clip: padding-box !important;
  }

  /* When drawer is checked (open), bring sidebar fully into view and above overlay */
  input[id="__drawer"]:checked ~ .md-container .md-sidebar--primary,
  .md-toggle[data-md-toggle="drawer"]:checked
    ~ .md-container
    .md-sidebar--primary {
    transform: translateX(0) !important;
    z-index: 1400 !important; /* ensure it's above overlay and header */
    pointer-events: auto !important;
  }

  /* Ensure overlay remains behind the sidebar when open */
  input[id="__drawer"]:checked ~ .md-overlay,
  .md-toggle[data-md-toggle="drawer"]:checked ~ .md-container .md-overlay {
    z-index: 1300 !important; /* below the sidebar but above page */
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Keep header beneath the sidebar so it doesn't capture taps */
  .md-header {
    z-index: 1250 !important;
  }

  /* Scroll container should allow touch scrolling and not intercept taps */
  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--primary .md-sidebar__inner {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    pointer-events: auto !important;
    z-index: 1401 !important;
  }

  /* Links: ensure they receive taps and use touch-action for faster response */
  .md-sidebar--primary .md-nav__link {
    pointer-events: auto !important;
    z-index: 1402 !important;
    touch-action: manipulation !important;
  }

  /* Deactivate any decorative element from intercepting touches */
  .md-sidebar--primary .md-nav__item--active > .md-nav__link::before,
  .md-sidebar--primary > .o-active-indicator,
  .md-sidebar--primary:before,
  .md-sidebar--primary:after {
    pointer-events: none !important;
  }

  /* Safety: ensure nothing else is layered above the sidebar when open */
  input[id="__drawer"]:checked ~ .md-container * {
    pointer-events: auto !important;
  }
}

/* MOBILE ACCORDION: hide nested navs by default and show only when toggled */
@media (max-width: 76.24em) {
  /* Hide all nested nav blocks by default to prevent them stacking above parents
    but keep top-level (data-md-level="0") visible */
  .md-sidebar--primary .md-nav[data-md-level]:not([data-md-level="0"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: static !important;
    transform: none !important;
  }

  /* When the toggle checkbox is checked, show the corresponding nav below the label */
  .md-nav__toggle:checked ~ nav[data-md-level],
  .md-nav__toggle:checked + label + nav[data-md-level] {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  /* Ensure child ul lists are visible when their parent nav is shown */
  .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list,
  .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Make sure labels remain interactive and in normal flow */
  .md-sidebar--primary .md-nav__link {
    display: block !important;
    position: relative !important;
  }
}

/* MOBILE NESTED-LIST FIX: ensure subitems expand below their parent and are readable */
@media (max-width: 76.24em) {
  /* Allow the sidebar scrolling container and inner container to show expanded content */
  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--primary .md-sidebar__inner {
    overflow: visible !important;
    max-height: none !important;
    position: static !important;
  }

  /* Ensure nav lists and items flow in document order (not absolutely positioned) */
  .md-sidebar--primary .md-nav__list,
  .md-sidebar--primary .md-nav__item,
  .md-sidebar--primary .md-nav__item > .md-nav__list {
    position: static !important;
    overflow: visible !important;
    max-height: none !important;
    display: block !important;
  }

  /* If nested lists were collapsed using transforms or translate, reset them */
  .md-sidebar--primary .md-nav__item .md-nav__list {
    transform: none !important;
  }

  /* Remove clipping on individual link elements so child lists aren't hidden */
  .md-sidebar--primary .md-nav__link,
  .md-sidebar--primary .md-nav__title {
    overflow: visible !important;
  }

  /* Reduce z-index stacking on nav elements so expanded lists appear in normal flow */
  .md-sidebar--primary .md-nav__list,
  .md-sidebar--primary .md-nav__item {
    z-index: auto !important;
  }
}

/* Ensure main content is always tall enough so sidebar never shifts above navbar */
.md-main,
.md-content {
  min-height: calc(100vh - 4rem); /* 4rem = navbar height, adjust if needed */
}

/* MOBILE: keep label text and arrow on one line; ensure nested navs expand in-flow */
@media (max-width: 76.24em) {
  .md-sidebar--primary .md-nav__link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .md-sidebar--primary .md-nav__icon {
    margin-left: 0.5rem !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }

  /* Show nested nav when its toggle checkbox is checked */
  input[type="checkbox"].md-nav__toggle:checked + label + nav[data-md-level],
  input[type="checkbox"].md-nav__toggle:checked ~ nav[data-md-level],
  .md-nav__toggle:checked + label + nav[data-md-level],
  .md-nav__toggle:checked ~ nav[data-md-level] {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
  }

  /* Ensure child lists inside shown nav are visible and flow below */
  input[type="checkbox"].md-nav__toggle:checked
    + label
    + nav[data-md-level]
    .md-nav__list,
  input[type="checkbox"].md-nav__toggle:checked
    ~ nav[data-md-level]
    .md-nav__list,
  .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list,
  .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Ensure nested labels stay full-width and don't wrap arrow */
  .md-sidebar--primary .md-nav__item--nested > .md-nav__link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
  }
}

/* SHOW ACTUAL SUBITEMS: hide duplicate nav titles and force UL visible when open */
@media (max-width: 76.24em) {
  /* Hide the internal nav title that repeats the parent label inside the nav block */
  .md-sidebar--primary nav[data-md-level] > .md-nav__title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Show the direct UL (.md-nav__list) when the toggle checkbox is checked or nav reports expanded */
  input.md-nav__toggle:checked + label + nav[data-md-level] > .md-nav__list,
  input.md-nav__toggle:checked ~ nav[data-md-level] > .md-nav__list,
  nav[data-md-level][aria-expanded="true"] > .md-nav__list {
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Also ensure the nav container itself is visible when toggled */
  input.md-nav__toggle:checked + label + nav[data-md-level],
  input.md-nav__toggle:checked ~ nav[data-md-level],
  nav[data-md-level][aria-expanded="true"] {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Make sure nested items are in normal flow */
  .md-sidebar--primary .md-nav__item--nested {
    display: block !important;
  }
}

/* EXTRA: explicitly show/hide the actual <ul class="md-nav__list"> child
   when a toggle is checked, with very high specificity to override
   any framework rules that might still hide the lists. */
@media (max-width: 76.24em) {
  /* Hide all nested ul lists by default (safety) */
  .md-sidebar--primary
    nav[data-md-level]:not([data-md-level="0"])
    > .md-nav__list {
    display: none !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  /* Show the direct child .md-nav__list when the preceding checkbox is checked */
  input[type="checkbox"].md-nav__toggle:checked
    + label
    + nav[data-md-level]
    > .md-nav__list,
  input[type="checkbox"].md-nav__toggle:checked
    ~ nav[data-md-level]
    > .md-nav__list,
  .md-nav__toggle:checked + label + nav[data-md-level] > .md-nav__list,
  .md-nav__toggle:checked ~ nav[data-md-level] > .md-nav__list {
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Also make sure any nested lists deeper inside are visible when parent is open */
  input[type="checkbox"].md-nav__toggle:checked
    + label
    + nav[data-md-level]
    .md-nav__list,
  input[type="checkbox"].md-nav__toggle:checked
    ~ nav[data-md-level]
    .md-nav__list,
  .md-nav__toggle:checked + label + nav[data-md-level] .md-nav__list,
  .md-nav__toggle:checked ~ nav[data-md-level] .md-nav__list {
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* FINAL MOBILE SCROLL FIX: force the mobile sidebar scrollwrap to scroll when
   the menu content is taller than the viewport. Placed last to override
   earlier overflow:visible rules. */
@media (max-width: 76.24em) {
  /* Apply to the scrollwrap generally and when the drawer is open */
  .md-sidebar--primary .md-sidebar__scrollwrap,
  input[id="__drawer"]:checked
    ~ .md-container
    .md-sidebar--primary
    .md-sidebar__scrollwrap,
  .md-toggle[data-md-toggle="drawer"]:checked
    ~ .md-container
    .md-sidebar--primary
    .md-sidebar__scrollwrap {
    max-height: calc(100vh - 3.5rem) !important; /* leave space for header */
    height: calc(100vh - 3.5rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }

  /* Ensure nested navs don't push content out of the scroll container */
  .md-sidebar--primary .md-nav__list,
  .md-sidebar--primary .md-nav__item {
    box-sizing: border-box !important;
  }
}
/* === FINAL OVERRIDE: Always hide close icon unless shown by JS === */
.md-search__close {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Minimal clear button for search input */
.md-search__clear {
  display: none;
  position: absolute;
  right: 4em;
  top: 57%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #7c3aed;
  font-size: 1.25em;
  cursor: pointer;
  z-index: 10;
}
.md-search__clear:active {
  color: #4b237a;
}
/* Mobile-specific position for .md-search__clear */
@media (max-width: 1024px) {
  .md-search__clear {
    right: 4em;
    top: 32%;
    font-size: 1.5em;
    transform: translateY(-50%);
  }
}
/* Show close icon only on search input focus for desktop screens */
@media (min-width: 1025px) {
  .md-search__input {
    background-image: none !important;
  }
  .md-search__input:focus {
    background-image: url("/docs/assets/close-icon.svg") !important;
  }
}

.md-main__inner.md-grid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;   /* px-4 */
  padding-right: 1rem;
  display: flex;
  align-items: center;
}

/* sm (≥640px) */
@media (min-width: 640px) {
  .md-main__inner.md-grid {
    max-width: 640px;
    padding-left: 1.5rem;  /* sm:px-6 */
    padding-right: 1.5rem;
  }
}

/* md (≥768px) */
@media (min-width: 768px) {
  .md-main__inner.md-grid {
    max-width: 768px;
  }
}

/* lg (≥1024px) */
@media (min-width: 1024px) {
  .md-main__inner.md-grid {
    max-width: 1024px;
    padding-left: 2rem;   /* lg:px-8 */
    padding-right: 2rem;
    justify-content: space-between; /* lg:justify-between */
  }
}

/* xl (≥1280px) */
@media (min-width: 1280px) {
  .md-main__inner.md-grid {
    max-width: 1480px;
    padding-left: 2.5rem;  /* xl:px-10 */
    padding-right: 2.5rem;
  }
}

/* 2xl (≥1536px) */
@media (min-width: 1536px) {
  .md-main__inner.md-grid {
    max-width: 1736px;
  }
}