#kapa-widget-container {
  z-index: 10000 !important;
  position: absolute !important;
}

.mantine-Modal-root {
  z-index: 10000;
  position: absolute;
}

#kapa-widget-container figure {
  padding: 0 !important;
}

.mantine-Modal-root figure {
  padding: 0 !important;
}

/* RTD Flyout */
.rst-versions {
    z-index: 10001 !important; /* Set to 10001 to avoid overlap with kapa */
}

/* Override the default PyData sphinx theme announcement styling */
.bd-header-announcement {
    background-color: var(--pst-color-surface) !important;
    border: none !important;
    padding: 4px !important;
    min-height: 0 !important;
    height: auto !important;
}

.bd-header-announcement__content {
    background-color: var(--pst-color-surface) !important;
    color: var(--pst-color-text-base) !important;
    padding: 0 !important;
}

.bd-header-announcement__content > div {
    padding: 4px 8px !important;
    line-height: 1 !important;
}

.bd-header-announcement a {
    color: var(--pst-color-link) !important;
}

html[data-theme="light"] {
  --pst-color-link: #176de8;
  --pst-color-primary: #176de8;
  --pst-color-secondary: var(--pst-color-primary);
  --pst-color-text-base: #4c4c4d;
  --logo-text-color: #0E2E65;
}

html[data-theme="dark"] {
  --pst-color-link: #176de8;
  --pst-color-primary: #176de8;
  --pst-color-secondary: var(--pst-color-primary);
  --pst-color-text-base: #d8d8d8;
  --logo-text-color: #D8D8D8;
  
  .bd-sidebar::-webkit-scrollbar {
    width: 6px;
    background-color: #2e2e2e;
  }

  .bd-sidebar::-webkit-scrollbar-thumb {
    background-color: #565656;
    border-radius: 6px;
  }

  .bd-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #6f6f6f;
  }

  /* Common hidden scrollbar when not hovered */
  .bd-sidebar:not(:hover) {
    -ms-overflow-style: none;
  }

  .bd-sidebar:not(:hover)::-webkit-scrollbar {
    background: var(--pst-color-background);
  }

  .bd-sidebar:not(:hover)::-webkit-scrollbar-thumb {
    background: var(--pst-color-background);
  }
}

/* Light mode scrollbar styles */
.bd-sidebar::-webkit-scrollbar {
  width: 6px;
  background-color: #f0f0f0;
}

.bd-sidebar::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  /* rounded corners */
  border-radius: 6px;
}

.bd-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* Common hidden scrollbar when not hovered */
.bd-sidebar:not(:hover) {
  -ms-overflow-style: none;
}

.bd-sidebar:not(:hover)::-webkit-scrollbar {
  background: var(--pst-color-background);
}

.bd-sidebar:not(:hover)::-webkit-scrollbar-thumb {
  background: var(--pst-color-background);
}

/* Avoid the border of the search box when click on it */
.form-control:focus,:focus-visible {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: var(--pst-color-background);
  color: var(--pst-color-text-muted);
}

/* Display a "New" icon for new items (custom.js) */
.new-item::after {
    content: "New";
    display: inline-block;
    color: white; /* Keeps the text color white for contrast */
    font-size: 12px; /* Adjusted for a smaller font size */

    background-color: #0d6efd; /* Bootstrap's 'primary' blue color for Bootstrap 5 */

    border-radius: 2px;
    margin: 0px 0px 0px 4px;
    padding: 2px 5px; /* Reduced padding for a more compact label */
    margin-left: 6px; /* Space between the text and the label */

    vertical-align: text-bottom;
    line-height: 1; /* Adjust line height to ensure vertical alignment */
}

/* External sidebar links flagged as new: the theme renders its external-link
   icon via the same ::after pseudo-element (nav.bd-links li>a.reference.external:after,
   which out-specifies .new-item::after), so re-assert the badge at higher
   specificity to replace the icon. */
nav.bd-links li > a.reference.external.new-item::after {
    content: "New";
    font: 12px/1 var(--pst-font-family-base);
    margin-left: 6px;
}

.navbar {
  --bs-navbar-nav-link-padding-x: 1rem;
}

.navbar-brand.logo>svg {
  width: 120px;
}

.navbar-brand.logo>svg .cls-6 {
  fill: var(--pst-color-text-base);
}
/*********************************************
* Footer - content *
*********************************************/
.footer {
  font-size: var(--sbt-font-size-small-1);

  &.bd-footer-content {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    border-top: 1px solid #ccc;
    font-size: 85%;

    .bd-footer-content__inner {
      padding-left: 0px;

      p {
        margin-bottom: 0px;
      }
    }
  }
}


.bd-header .navbar-nav li a.nav-link:hover {
  text-decoration: none;
}

/* Add transparent underline for the other tabs that are not active to avoid
active tab to be moved up. */
.nav-link {
  border-bottom: none;
}

.bd-header .navbar-nav>.current>.nav-link {
  border-bottom: none;
}

/* Avoid layout shifts in the right-hand navbar block during the first
   ~150ms of page load. Four post-paint events would otherwise reflow
   the search button + icons + kbd shortcut and visibly jiggle
   Slack/Twitter/GitHub:

   (a) The pydata theme's inline <head> script sets html[data-mode] to ""
       when localStorage has no "mode" entry. The theme CSS only shows a
       theme-switch icon when data-mode equals light/dark/auto, so the
       button collapses to ~2px until the theme JS resets data-mode to
       "auto" post-DCL — at which point the auto icon snaps in and pushes
       the icon links right by ~32px.

   (b) On Mac, the same theme JS swaps the search-button modifier kbd
       from "Ctrl" to "⌘", which is ~22px narrower and shrinks the
       search button.

   (c) FontAwesome's all.min.js replaces <i class="fa-…"> placeholders
       with inline <svg> elements whose intrinsic widths don't match the
       <i>'s ::before fallback-font codepoint glyph — so the magnifying
       glass icon resizes when the JS replacement runs.

   (d) The pydata theme renders the navbar external-link icon ("Case
       Studies", "Blog") via .nav-link.nav-external::after whose content
       is a PUA codepoint rendered in the FA font; while FA is still
       loading the codepoint renders in a fallback glyph with different
       metrics, causing a few-px shift on font-ready.

   Fix each by reserving the final width up-front. */

/* (a) */
html[data-mode=""] .theme-switch-button span[data-mode=auto] {
  display: flex;
}

/* (b) Strip the kbd shortcut from the navbar search button — pydata's
   post-DCL "Ctrl"→"⌘" swap on Mac would otherwise shrink the search
   button by ~22px. Pin the button to its original width with the icon
   and "Search" label centered together. The keyboard binding still
   works; pydata's Cmd+K / Ctrl+K listener doesn't depend on the
   indicator. Scoped to the navbar so the hidden search modal in
   .bd-search is left alone. */
.navbar-header-items__end .search-button__kbd-shortcut,
.navbar-persistent--mobile .search-button__kbd-shortcut {
  display: none;
}
.navbar-header-items__end .search-button-field,
.navbar-persistent--mobile .search-button-field {
  min-width: 183px;
  justify-content: center;
}
/* Match the visual weight of the navbar nav-links — the pill background
   makes the default 16px feel heavier than its peers. */
.navbar-header-items__end .search-button-field .search-button__default-text,
.navbar-persistent--mobile .search-button-field .search-button__default-text {
  font-size: 0.875rem;
}

/* (c) Lock every FontAwesome icon to a fixed-width box regardless of
   whether it's currently the <i> placeholder (rendered via the FA
   webfont's ::before codepoint) or the inline <svg> that FA's
   all.min.js inserts to replace it. The two have different intrinsic
   widths (e.g., fa-list <i>=19px vs <svg>=14px), so without this lock
   text next to the icon shifts when the JS replacement runs. Applies
   site-wide because the same flicker is visible in the secondary
   sidebar ("On this page", "Edit on GitHub") as well as the navbar. */
i[class*="fa-"]:not(.fa-stack-1x):not(.fa-stack-2x),
svg.svg-inline--fa:not(.fa-stack-1x):not(.fa-stack-2x) {
  display: inline-block;
  width: 1em;
  text-align: center;
}
i[class*="fa-"].fa-lg,
svg.svg-inline--fa.fa-lg {
  width: 1.25em;
}

/* (d) */
.nav-link.nav-external::after {
  display: inline-block;
  width: 0.75em;
  text-align: center;
}

/* Index page hero title — shrunk slightly so the long title fits beside the
   copy-page button on a full-width laptop viewport. */
.hero-title h1 {
  font-size: 2.1rem;
}

/* Copy page as Markdown — split button next to title */
.bd-title-row {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  /* Absorb the h1's natural margin-bottom onto the row so the button aligns
     with the title and the gap to the following content is preserved. */
  margin-bottom: 1.05rem;
}

.bd-title-row > h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.copy-page-wrapper {
  position: relative;  /* anchor for the dropdown below */
  flex-shrink: 0;
  z-index: 10;
}

.copy-page-split {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pst-color-border);
  border-radius: 6px;
  background: var(--pst-color-background);
  overflow: hidden;
}

.copy-page-main,
.copy-page-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pst-color-text-muted);
  font-size: 0.72rem;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}

.copy-page-main {
  padding: 0.3rem 0.5rem;
}

.copy-page-toggle {
  padding: 0.3rem 0.4rem;
  border-left: 1px solid var(--pst-color-border);
}

.copy-page-main:hover,
.copy-page-toggle:hover {
  background: var(--pst-color-surface);
  color: var(--pst-color-text-base);
}

.copy-page-success .copy-page-main {
  color: var(--pst-color-success, #28a745);
}

/* Dropdown */
.copy-page-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 210px;
  background: var(--pst-color-background);
  border: 1px solid var(--pst-color-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 4px 0;
  z-index: 100;
}

.copy-page-dropdown.open {
  display: block;
}

.copy-page-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pst-color-text-base);
  font-size: 0.82rem;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s;
}

.copy-page-item:hover {
  background: var(--pst-color-surface);
}

/* Hide on very small screens */
@media (max-width: 480px) {
  .copy-page-wrapper {
    display: none;
  }
}

/* Assuming your breakpoints are defined in pixels */
@media (min-width: 959.98px) {

  .bd-sidebar-primary {
    width: 20% !important;
  }
}