#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;
}

/* Solid "Ask AI" launcher: no transparency, plain text, no shadow.
   Light mode: white button, black text. Dark mode: dark button, white text. */
#kapa-widget-container button {
  opacity: 1 !important;
  backdrop-filter: none !important;
}
#kapa-widget-container button,
#kapa-widget-container button p,
#kapa-widget-container button span,
#kapa-widget-container button div {
  text-shadow: none !important;
}
html:not([data-theme="dark"]) #kapa-widget-container button {
  background-color: #FFFFFF !important;
}
html:not([data-theme="dark"]) #kapa-widget-container button,
html:not([data-theme="dark"]) #kapa-widget-container button p,
html:not([data-theme="dark"]) #kapa-widget-container button span,
html:not([data-theme="dark"]) #kapa-widget-container button div {
  color: #000000 !important;
}
html[data-theme="dark"] #kapa-widget-container button {
  background-color: #1F242C !important;
}
html[data-theme="dark"] #kapa-widget-container button,
html[data-theme="dark"] #kapa-widget-container button p,
html[data-theme="dark"] #kapa-widget-container button span,
html[data-theme="dark"] #kapa-widget-container button div {
  color: #FFFFFF !important;
}
/* The widget has no dark-mode logo option; swap in the white logo in dark
   mode (relative URL resolves next to this file in _static/). The filter is
   a fallback for browsers without `content` support on img — it renders the
   default blue mark white, and is a no-op on the already-white logo. */
html[data-theme="dark"] #kapa-widget-container img[src*="skypilot-icon"],
html[data-theme="dark"] .mantine-Modal-root img[src*="skypilot-icon"] {
  content: url("skypilot-icon-dark.svg");
  filter: brightness(0) invert(1);
}

.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;
}

/*
 * Launch announcement bar (the `announcement` theme option in conf.py).
 *
 * Scoped to .container-fluid, which the theme's own announcement markup carries,
 * so these rules cannot leak onto any other .bd-header-announcement banner added
 * later via a custom template.
 */
.bd-header-announcement.container-fluid {
    background-color: var(--pst-color-surface) !important;
    border-bottom: 1px solid var(--sky-announcement-border) !important;
    padding: 9px 14px !important;
}

.bd-header-announcement a.sky-announcement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 0.875rem;
    line-height: 1.35;
    text-decoration: none !important;
    color: var(--sky-announcement-text) !important;
}

.sky-announcement__pill {
    background-color: var(--pst-color-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
}

.sky-announcement__text {
    font-weight: 600;
}

.bd-header-announcement a.sky-announcement:hover .sky-announcement__text {
    text-decoration: underline;
}

.sky-announcement__arrow {
    /* Own accent rather than --pst-color-primary: that blue only reaches
       2.7:1 on the dark surface, below the 3:1 non-text contrast floor. */
    color: var(--sky-announcement-accent);
    font-weight: 700;
    transition: transform 0.15s ease;
}

.bd-header-announcement a.sky-announcement:hover .sky-announcement__arrow {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .sky-announcement__arrow {
        transition: none;
    }
}

/* On narrow screens the pill is what tips the headline onto a second line, so
   drop it. Also switch from flex to inline flow: as flex items the text and the
   arrow wrap independently, which orphans the arrow on a line of its own at
   ~375px. Inline, the arrow simply follows the last word. */
@media (max-width: 600px) {
    .sky-announcement__pill {
        display: none;
    }

    .bd-header-announcement a.sky-announcement {
        display: block;
        text-align: center;
        font-size: 0.8125rem;
    }

    .sky-announcement__arrow {
        margin-left: 6px;
    }
}

/*
 * "Try SkyPilot Platform" navbar call-to-action (_templates/try-platform-button.html).
 *
 * Below 960px the theme sets .navbar-header-items { display: none }, so this
 * button is not shown in the header on small screens -- it is reached through
 * the hamburger sidebar, which re-renders the navbar_end items.
 */
.sky-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    padding: 7px 13px;
    border-radius: 6px;
    background-color: var(--pst-color-primary);
    color: #fff !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

.sky-cta:hover {
    background-color: var(--sky-cta-hover);
}

.sky-cta__arrow {
    font-weight: 700;
    opacity: 0.85;
}

/* Full label on wide viewports, short label where the navbar gets tight. */
.sky-cta__label-short {
    display: none;
}

@media (max-width: 1100px) {
    .sky-cta__label-full {
        display: none;
    }
    .sky-cta__label-short {
        display: inline;
    }
}

/*
 * Hamburger menu (below 960px). The theme re-renders the navbar_end items into
 * the slide-out sidebar alongside the theme switcher and icon links, which sit
 * on one row. Give the button a row of its own, full width, with the full
 * product name -- there is space here that the navbar does not have.
 */
.sidebar-header-items__end:has(.sky-cta) {
    flex-wrap: wrap;
}

.sidebar-header-items__end .navbar-item:has(.sky-cta) {
    flex: 0 0 100%;
    margin-top: 0.75rem;
}

.sidebar-header-items__end .sky-cta {
    width: 100%;
    justify-content: center;
    padding-block: 10px;
}

.sidebar-header-items__end .sky-cta__label-full {
    display: inline;
}

.sidebar-header-items__end .sky-cta__label-short {
    display: none;
}

html[data-theme="light"] {
  --sky-cta-hover: #0f57bd;
  --sky-announcement-text: #1f2328;
  --sky-announcement-border: #e2e4e7;
  --sky-announcement-accent: #176de8;
  --pst-color-link: #176de8;
  --pst-color-primary: #176de8;
  --pst-color-secondary: var(--pst-color-primary);
  --pst-color-text-base: #4c4c4d;
  --logo-text-color: #04070B;
}

html[data-theme="dark"] {
  /* Hover darkens rather than lightens: white-on-blue drops below the 4.5:1
     text-contrast floor as the blue gets lighter (#3f8cff is only 3.3:1). */
  --sky-cta-hover: #2563d8;
  --sky-announcement-text: #eef1f5;
  --sky-announcement-border: #333b47;
  --sky-announcement-accent: #6ea8ff;
  --pst-color-link: #176de8;
  --pst-color-primary: #176de8;
  --pst-color-secondary: var(--pst-color-primary);
  --pst-color-text-base: #d8d8d8;
  --logo-text-color: #FAFAFA;
  
  .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: 103px;
}

.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;
}

/* Index page hero logo — breathing room between the page title above and the
   GitHub/Slack buttons below. */
img.hero-logo {
  margin-top: 1.75rem;
  margin-bottom: 2.25rem;
}

/* Index page architecture diagram — adds spacing after the diagram. */
img.hero-diagram {
  margin-bottom: 2.25rem;
}

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