custom.css

/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Hotfix: Changed primary color to black to resolve conflict with Docusaurus' default primary orange after disabling Tailwind preflight CSS. Added font size and line height adjustments to compensate for the removal of Tailwind preflight. */
 
  /* --ifm-color-primary-lighter: #ffb575; */
  font-size:18px;
  line-height: 1.6;
  --ifm-color-primary: #000;

  --ifm-color-primary-lighter: #FFF;
  --ifm-color-primary: #ff914d;
  --ifm-color-primary-dark: #e67643;
  --ifm-color-primary-darker: #c95919;
  --ifm-color-primary-darkest: #be2c1b;
  --ifm-color-primary-light: #ffd0a0;
  
  --ifm-color-primary-lightest: #ffceb1;
  --ifm-code-font-size: 95%;
  --doc-sidebar-width: 275px !important;
  --ifm-link-hover-decoration: none;
  --ifm-link-hover-color: inherit;
  --site-primary-hue-saturation: 30 100%;
  --site-primary-hue-saturation-light: 0 0%; /* do we really need this extra one? */
  --slack-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1610 1610'%3E%3Cpath fill='%23E01E5A' d='M338 1017c0 93-76 169-169 169S0 1110 0 1017s76-169 169-169h169v169zM423 1017c0-93 76-169 169-169s169 76 169 169v424c0 93-76 169-169 169s-169-76-169-169v-424z'/%3E%3Cpath fill='%2336C5F0' d='M593 338c-93 0-169-76-169-169S500 0 593 0s169 76 169 169v169H593zM593 423c93 0 169 76 169 169s-76 169-169 169H169C76 761 0 685 0 592s76-169 169-169h424z'/%3E%3Cpath fill='%232EB67D' d='M1272 593c0-93 76-169 169-169s169 76 169 169-76 169-169 169h-169V593zM1187 593c0 93-76 169-169 169s-169-76-169-169V169C849 76 925 0 1018 0s169 76 169 169v424z'/%3E%3Cpath fill='%23ECB22E' d='M1017 1272c93 0 169 76 169 169s-76 169-169 169-169-76-169-169v-169h169zM1017 1187c-93 0-169-76-169-169s76-169 169-169h424c93 0 169 76 169 169s-76 169-169 169h-424z'/%3E%3C/svg%3E");
}

/* Global overflow control */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Navbar - always full viewport width */
.navbar {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0;
  right: 0;
}

.navbar__inner {
  max-width: 100% !important;
  width: 100% !important;
}

.navbar > .container,
.navbar > .container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 1rem;
}

/* Main wrapper - always full width */
.main-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

/* Docs page white background */
.docs-wrapper,
.main-wrapper,
[class*="docPage"],
[class*="docMainContainer"],
[class*="docItemContainer"],
main {
  background: #fff !important;
  width: 100% !important;
}

html[data-theme="dark"] .docs-wrapper,
html[data-theme="dark"] .main-wrapper,
html[data-theme="dark"] [class*="docPage"],
html[data-theme="dark"] [class*="docMainContainer"],
html[data-theme="dark"] [class*="docItemContainer"],
html[data-theme="dark"] main {
  background: #18181b !important;
}

html[data-theme="dark"] {
  /* Hotfix: Changed 'ifm-color-primary-lighter' to white to resolve conflict with Docusaurus' default color after disabling Tailwind preflight CSS. */
  

  /* --ifm-color-primary-lighter: #ffb575; */
  --ifm-color-primary-lighter: #FFF; 
   
  --ifm-color-primary: #ff914d;
  --ifm-color-primary-dark: #e67643;
  --ifm-color-primary-darker: #c95919;
  --ifm-color-primary-darkest: #be2c1b;
  --ifm-color-primary-light: #ffd0a0;
  --ifm-color-primary-lightest: #ffceb1;
  --ifm-link-color: var(--ifm-color-primary-lighter);
  --ifm-menu-color-active: var(--ifm-color-primary-lighter);
  --ifm-navbar-link-hover-color: var(--ifm-color-primary-lighter);
  --ifm-toc-link-color: var(--ifm-color-primary-lighter);
  --ifm-blockquote-color: #eeeeee;
  /* --ifm-code-background: var(--ifm-color-primary-dark); */
  /*--ifm-color: #ffffff;*/
  --ifm-background-color: #141414;
  --ifm-footer-background-color: #000;
  --ifm-card-background-color: #1a1a1a;
  --collapse-button-bg-color-dark: transparent;
  --ifm-badge-background-color: #f88e34;
  --card-color: rgba(17, 24, 39);
  --ifm-card-shadow-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] {
  --ifm-blockquote-color: #000000;
  --ifm-color-emphasis-300: #505050;
  /* --ifm-code-background: var(--ifm-color-primary-lightest); */
  --ifm-color-input-background: #ffffff;
  --ifm-color: #00163d;
  --ifm-background-color: rgb(249, 250, 251);
  --ifm-footer-background-color: #ffffff;
  --ifm-card-background-color: #ffffff;
  --ifm-badge-background-color: rgba(239, 246, 255);

  --card-color: rgba(239, 246, 255);
  --ifm-card-shadow-color: rgba(0, 0, 0, 0.2); /* Dark shadow for light theme */
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.docs-page {
  @apply my-12;
}

.edit a svg {
  @apply inline;
}

/* Hotfix: Remove extra margin-bottom on community links subtext in the home page due to Tailwind preflight removal */
h3{
  margin-bottom: 0.1rem;
}
h1,
h2,
h3,
h4,
.menu__list,
.navbar {
  font-family: "Aeonik", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.menu__list {
  @apply text-sm;
}

/* otherwise external references in menu bar (see Go) have the icon screwed up */
.menu__list-item > .menu__link > span {
  display: flex;
}
.menu__link--sublist:after {
  /* Keep sidebar chevron size consistent with leaf items */
  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
}

/* Ensure category caret variants use the same icon size in the sidebar */
div[class^="sidebar_"] .menu__link--sublist-caret:after {
  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
}
div[class^="sidebar_"] .menu__caret:before {
  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
  height: 1.5rem;
  width: 1.5rem;
}

div[class^="sidebar_"]
  .menu__link.menu__link--active:not(.menu__link--sublist) {
  padding-right: calc(var(--ifm-menu-link-padding-horizontal) - 2px);
}

/* Do not highlight category labels (that also have pages) as active; only leaf pages should be highlighted */
div[class^="sidebar_"] .menu__link--sublist.menu__link--active {
  color: inherit !important;
  font-weight: inherit;
}

/* Do NOT bold category when on its own page */
div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist {
  color: inherit !important;
  font-weight: inherit;
}
/* And keep color unchanged even on hover when on its own page */
div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist:hover {
  color: inherit !important;
}

/* Explicitly neutralize color when category link is both sublist and active (own page) */
div[class^="sidebar_"] .menu__list-item-collapsible--active .menu__link--sublist.menu__link--active {
  color: inherit !important;
}

/* When the category's own page is current, do not change its color/background/weight */
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"] {
  color: inherit !important;
  background: transparent !important;
  font-weight: inherit !important;
}
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"]:hover,
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"]:focus,
div[class^="sidebar_"] .menu__list-item-collapsible .menu__link[aria-current="page"].menu__link--active {
  color: inherit !important;
  /* prevent extra link-layer background; container provides unified hover */
  background-color: transparent !important;
  font-weight: inherit !important;
}

/* Strong override: category with its own current page should use normal menu color (not active black) */
div[class^="sidebar_"] .menu__link--sublist.menu__link--active[aria-current="page"] {
  color: var(--ifm-menu-color) !important;
}

/* Extra-specific guard: ensure normal color for category labels on their own page */
div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"],
div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"].menu__link--active,
div[class^="sidebar_"] li.menu__list-item > div.menu__list-item-collapsible > a.menu__link.menu__link--sublist[aria-current="page"] {
  color: var(--ifm-menu-color) !important;
  background: transparent !important;
  font-weight: inherit !important;
}

/* Restore hover background for categories with their own page when hovering that link */
div[class^="sidebar_"] li.menu__list-item > a.menu__link.menu__link--sublist[aria-current="page"]:hover,
div[class^="sidebar_"] li.menu__list-item > div.menu__list-item-collapsible > a.menu__link.menu__link--sublist[aria-current="page"]:hover {
  /* prevent extra link-layer hover; container provides unified hover */
  background-color: transparent !important;
}

/* Unify hover background for text + caret (arrow) when category has its own page */
/* Use unified hover on container; clear child backgrounds to prevent double overlays */
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover {
  background-color: var(--ifm-menu-color-background-hover) !important;
}
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > a.menu__link,
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > .menu__caret {
  background-color: transparent !important;
}

/* For categories with pages (collapsible) when NOT on their page: hover on arrow OR text gives one unified background */
div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover {
  background-color: var(--ifm-menu-color-background-hover) !important;
}
div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover > a.menu__link,
div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active):hover > .menu__caret {
  background-color: transparent !important;
}
/* Ensure link text color does not change on hover in this specific case */
div[class^="sidebar_"] .menu__list-item-collapsible--active:hover > a.menu__link {
  color: inherit !important;
}

/* Remove background highlight when category's own page is active; keep hover behavior */
div[class^="sidebar_"] .menu__list-item-collapsible--active {
  background: transparent !important;
}


/* Parent style when a child page is active is handled below for light mode (orange) */

/* Light mode: use orange color (no bold) for parent when a child page is active */
html[data-theme="light"] div[class^="sidebar_"] .menu__list-item-collapsible:not(.menu__list-item-collapsible--active) .menu__link--sublist.menu__link--active {
  color: var(--ifm-color-primary) !important;
  font-weight: inherit;
}

div[class^="sidebar_"] .button {
  @apply mx-auto mb-2 w-full border-0;
}
div[class^="sidebar_"] .button svg {
  @apply mx-auto;
}

/* Prevent descenders (g, y, p) from clipping in sidebar, including when bold/active */
div[class^="sidebar_"] .menu__link {
  line-height: 1.5;
  padding-bottom: calc(var(--ifm-menu-link-padding-vertical) + 1px);
}
div[class^="sidebar_"] .menu__link.menu__link--active {
  line-height: 1.5; /* ensure active/bold state also has enough leading */
}

/* TOC styles moved to modern sidebar section below */

.docs-wrapper aside {
  @apply border-0;
}

/* Blog List Page */

.case-study-header {
  background-color: #000000;
  @apply w-full rounded-lg;
}

.center {
  text-align: center; /* needed so that blog post heading is centered in the single blog post view */
}

/*

.blog-list-page {
  @apply max-w-screen-lg mx-auto px-10 my-16;
}
.blog-list-page main {
  @apply flex flex-col space-y-12 max-w-screen-lg mx-auto;
}
.blog-list-page aside {
  @apply text-sm mr-10 px-2;
}
.blog-list-page .post-header {
  @apply items-start;
}
.blog-list-page article img {
  @apply -mb-3 shadow-lg;
}



.blog-tags-post-page aside {
  @apply text-sm mr-10 px-2;
}

.blog-tags-post-page main {
  @apply flex flex-col space-y-12 max-w-screen-lg mx-auto;
}

*/

.blog-tags-post-page {
  @apply mx-auto my-16 max-w-screen-lg px-10;
}

/* Pagination */
.pagination-nav {
  @apply flex mt-12 flex-col items-start justify-center space-x-0 space-y-5 md:flex-row md:space-x-10 md:space-y-0;
}
.pagination-nav__item {
  @apply w-full max-w-md;
}
.pagination-nav__link {
  @apply flex-grow transform rounded-lg border-0 bg-[color:var(--ifm-card-background-color)] p-5  text-lg shadow-lg transition-transform hover:scale-105;
}

/* Navbar */
.navbar {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
  padding: 0.5rem 0;
}

html[data-theme="dark"] .navbar {
  background: #141414;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar__inner {
  @apply mx-auto w-full max-w-none px-4 lg:px-10;
}

.navbar__items--right {
  @apply justify-end ml-auto flex-row-reverse;
  gap: 12px;
}

.navbar__items--right > :last-child {
  @apply pr-0;
}

.navbar__brand {
  @apply mb-0;
}

.navbar__brand img {
  height: 32px;
}

/* Search box styling */

/* Search */

.DocSearch-Button {
  @apply rounded-lg px-3 py-2 !important;
}

.button.button--secondary.button--outline:not(.button--active):not(:hover) {
  color: #ffffff;
}

/* Footer */

footer svg {
  display: inline;
}

.footer .footer__svg {
  @apply m-8 inline fill-current;
}

.footer .footer__link-item span svg {
  @apply hidden;
}

@media (max-width: 996px) {
  .footer .footer__separators {
    display: none;
  }

  .DocSearch-Button {
    @apply mr-2 !important;
  }

  /* .footer .footer__block {
    display: block;
  } */
}


/* Docs */

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.docs-image-centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}

.docs-image-max-width-20 {
  width: 20%;
}

.docs-image-max-width-50 {
  width: 50%;
}

.hero--primary {
  background-color: var(--ifm-color-hero-background-dark);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

#mc-embedded-waitlist {
  margin-top: 15px;
}

.related-read-div {
  border-width: 0;
  padding: 7px var(--ifm-alert-padding-horizontal);
  margin-bottom: 0.5em;
}

.related-read-label {
  font-weight: 600;
}

/* Reset margin bottom on h3 (refer docs community section li item heading) after disabling tailwind preflight. */
h3{
  margin-bottom: 1px;
}

/* Reset any border-radius applied to images inside <td> elements. (see os icons and cross and tick icons in table) */
td img {
  border-radius: 0 !important;
}

.related-read-link {
  margin-left: 7px;
}

.related-read-archetype-tag {
  padding: 3px 6px;
  color: #ffffff;
  font-size: 0.8em;
  border-radius: 6px;
  margin-left: 7px;
}

.archetype-tag-operation-guide {
  background-color: #ca1a7b;
}

.archetype-tag-developer-guide {
  background-color: #ca811a;
}

.archetype-tag-tutorial {
  background-color: #1ac9c7;
}

.archetype-tag-explanation {
  background-color: #78c91a;
}

.archetype-tag-reference {
  background-color: #cf8f19;
}

.docs-image-wrapper {
  position: static;
  width: 100%;
  background-color: #efefef;
  margin: 0 0 15px 0;
  padding: 0;
}

.docs-centered-image-wrapper {
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 15px;
}

.docs-image-title-wrapper {
  width: 100%;
  margin: 0;
  padding: 15px;
  text-align: left;
  font-size: 0.9em;
  font-weight: 300;
  color: #121212;
}

.docs-image-title {
  margin: 0px !important;
}

.docs-centered-image-size-100 {
  max-width: 1024px;
}

.docs-centered-image-size-75 {
  max-width: 768px;
}

.docs-centered-image-size-50 {
  max-width: 640px;
}

.docs-centered-image-size-25 {
  max-width: 400px;
}

@media screen and (max-width: 1024px) {
  .docs-centered-image-size-100 {
    max-width: 100%;
  }

  .docs-centered-image-size-75 {
    max-width: 75%;
  }

  .docs-centered-image-size-50 {
    max-width: 50%;
  }

  .docs-centered-image-size-25 {
    max-width: 25%;
  }
}

.docs-image-legend-wrapper {
  width: 100%;
  margin: 0;
  padding: 15px;
  text-align: left;
  font-size: 0.9em;
  font-weight: 300;
  color: #121212;
}

.docs-image-legend-list {
  margin: 0px !important;
  padding: 0;
  list-style-type: none;
}

.docs-image-legend-symbol {
  font-size: 1.2em;
  font-weight: 600;
}

.scale {
  @apply transition hover:scale-105 motion-reduce:transform-none motion-reduce:transition-none;
}

/* .tableOfContents {
  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
  overflow-y: auto;
  position: sticky;
  top: calc(var(--ifm-navbar-height) + 1rem);
} */

/* hacks to counteract tailwind typography clashing with docusaurus tabs */
.prose .tabs-container > .tabs > .tabs__item::before {
  content: none;
}
.prose .tabs-container > .tabs > .tabs__item {
  padding-left: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-bottom: 0em;
  opacity: 0.5;
}
.prose .tabs-container > .tabs > .tabs__item.tabs__item--active {
  opacity: 1;
}

.prose .tabs {
  padding: 0 !important;
}
.prose .tabs-container ul {
  margin: 0;
  margin-bottom: -1.25rem;
}
.prose .tabs-container > .margin-vert--md pre {
  margin: 0;
}
/* otherwise tailwind typography gives very ugly margins on inline images */
.prose li img {
  margin: 0;
}
/* otherwise tailwind typography gives very ugly margins on li children */
.prose > ol > li > :first-child,
.prose > ul > li > :first-child,
.prose > ol > li > :last-child,
.prose > ul > li > :last-child {
  margin: 0 !important; /* sorry cant figure out how else to do this, prose @media overriding - swyx */
}
.prose li > ul {
  margin-top: 1rem !important; /* sorry cant figure out how else to do this, prose @media overriding - swyx */
}

.prose :where(a code) {
  color: unset;
}

.prose pre.prism-code {
  margin: 0;
}

.codeBlockContainer_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock-styles-module {
  box-shadow: none !important;
  margin: 0;
  padding: 0;
  font-size: 0.95em;
}
[data-theme="light"] .prose :where(pre code):not(.not-prose) {
  background-color: #ffffff;
}
[data-theme="light"]
  .prose
  :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  background-color: #ffffff;
}

.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link::before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

[data-theme="dark"] .header-github-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

/* Slack navbar icon styling */
.header-slack-link:hover {
  opacity: 0.6;
}

.header-slack-link::before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: var(--slack-logo) no-repeat;
  background-size: 24px 24px;
}

[data-theme="dark"] .header-slack-link::before {
  background: var(--slack-logo) no-repeat;
  background-size: 24px 24px;
}

/* Announcement bar - modern styling */
div[class^="announcementBar_"] {
  background: linear-gradient(135deg, #ff914d 0%, #ff6b35 100%);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 0;
  border: none;
}

div[class^="announcementBar_"] a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

div[class^="announcementBar_"] a:hover {
  opacity: 0.9;
}

html[data-theme="dark"] div[class^="announcementBar_"] {
  background: linear-gradient(135deg, #c95919 0%, #be2c1b 100%);
}

.list-disc > a {
  display: inherit;
}

/* Breadcrumbs home icon - handled in main breadcrumbs section */

[data-theme="dark"] th {
  color: white;
}

/* Hotfix: Manually add Tailwind preflight styles to fix clipboard issues in Safari.
   Using `preflight: true` caused style conflicts, so these styles are directly included here. */*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

* {
  margin: 0;
}

html {
  height: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif);
}

body {
  height: 100%;
  line-height: inherit;
}

img,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

table {
  border-collapse: collapse;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

:disabled {
  cursor: default;
}

:focus-visible {
  outline: 2px solid theme('colors.blue.600', #2563eb);
  outline-offset: 2px;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

textarea {
  resize: vertical;
}

.theme-back-to-top-button {
  background-color: #FF914D !important;
  color: white !important;
}

.theme-back-to-top-button svg {
  fill: white !important;
}

.theme-back-to-top-button:hover {
  background-color: #e67643 !important;
}

/* ============================================
   MODERN SIDEBAR NAVIGATION PANEL
   ============================================ */

/* Sidebar container - Navigation panel styling */
div[class^="sidebar_"],
.theme-doc-sidebar-container {
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-text: #374151;
  --sidebar-text-muted: #6b7280;
  --sidebar-hover: rgba(139, 92, 246, 0.06);
  --sidebar-active-bg: rgba(139, 92, 246, 0.1);
  --sidebar-active-border: #8b5cf6;
  --sidebar-category-color: #7c3aed;
  --sidebar-category-bg: transparent;
  --sidebar-nested-line: rgba(139, 92, 246, 0.15);
}

html[data-theme="dark"] div[class^="sidebar_"],
html[data-theme="dark"] .theme-doc-sidebar-container {
  --sidebar-bg: #18181b;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-text: #e5e7eb;
  --sidebar-text-muted: #9ca3af;
  --sidebar-hover: rgba(139, 92, 246, 0.1);
  --sidebar-active-bg: rgba(139, 92, 246, 0.15);
  --sidebar-active-border: #a78bfa;
  --sidebar-category-color: #a78bfa;
  --sidebar-category-bg: transparent;
  --sidebar-nested-line: rgba(139, 92, 246, 0.2);
}

/* Sidebar background and border - FIXED positioning */
.theme-doc-sidebar-container {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  width: 260px !important;
  min-width: 260px !important;
  flex-shrink: 0;
}

/* Inner sidebar - sticky behavior */
.theme-doc-sidebar-container > div {
  position: sticky !important;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar-bg) !important;
}

aside.theme-doc-sidebar-container > div {
  background: var(--sidebar-bg) !important;
}


/* Sidebar menu container padding */
.theme-doc-sidebar-menu {
  padding: 1rem 0.75rem !important;
}

div[class^="sidebar_"] .menu {
  padding: 0.5rem;
}

/* ============================================
   TOP-LEVEL CATEGORY ROWS - PURPLE HEADINGS
   ============================================ */

/* Top-level category styling - full-width rows */
div[class^="sidebar_"] > nav > ul > li > .menu__list-item-collapsible,
div[class^="sidebar_"] > nav > ul > li > a.menu__link--sublist {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1rem;
  margin: 0.25rem 0;
  border-radius: 12px;
  background: var(--sidebar-category-bg);
  transition: all 0.15s ease;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--sidebar-category-color);
}

div[class^="sidebar_"] > nav > ul > li > .menu__list-item-collapsible:hover,
div[class^="sidebar_"] > nav > ul > li > a.menu__link--sublist:hover {
  background: var(--sidebar-hover);
}

/* Top-level category label - PURPLE */
div[class^="sidebar_"] > nav > ul > li > .menu__list-item-collapsible > a.menu__link,
div[class^="sidebar_"] > nav > ul > li > a.menu__link--sublist {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--sidebar-category-color) !important;
  background: transparent !important;
  padding: 0;
  flex: 1;
}

/* Divider between top-level categories */
div[class^="sidebar_"] > nav > ul > li:not(:last-child) {
  border-bottom: 1px solid var(--sidebar-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ============================================
   CHEVRON STYLING & ANIMATION - INVERTED
   ============================================ */

/* Chevron base styling */
div[class^="sidebar_"] .menu__caret,
div[class^="sidebar_"] .menu__link--sublist::after {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* INVERTED: Collapsed state - arrow points RIGHT (closed) */
div[class^="sidebar_"] .menu__list-item--collapsed .menu__caret::before,
div[class^="sidebar_"] .menu__list-item--collapsed .menu__link--sublist::after {
  transform: rotate(0deg);
}

/* INVERTED: Expanded state - arrow points DOWN (open) */
div[class^="sidebar_"] .menu__caret::before,
div[class^="sidebar_"] .menu__link--sublist::after {
  transform: rotate(90deg);
}

/* Purple chevron for top-level categories */
div[class^="sidebar_"] > nav > ul > li .menu__caret::before {
  filter: hue-rotate(260deg) saturate(1.5);
}

/* ============================================
   NESTED PAGES - QUIET & INDENTED
   ============================================ */

/* Nested items container */
div[class^="sidebar_"] .menu__list .menu__list {
  margin-left: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--sidebar-nested-line);
  margin-top: 0.25rem;
}

/* Nested page links */
div[class^="sidebar_"] .menu__list .menu__list .menu__link {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--sidebar-text-muted);
  padding: 0.5rem 0.75rem;
  margin: 0.125rem 0;
  border-radius: 8px;
  transition: all 0.15s ease;
}

div[class^="sidebar_"] .menu__list .menu__list .menu__link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

/* Deeper nested levels */
div[class^="sidebar_"] .menu__list .menu__list .menu__list {
  margin-left: 0;
  padding-left: 0.75rem;
}

div[class^="sidebar_"] .menu__list .menu__list .menu__list .menu__link {
  font-size: 0.75rem;
}

/* ============================================
   MODERN ACTIVE STATE
   ============================================ */

/* Active page - pill highlight with left accent */
div[class^="sidebar_"] .menu__link.menu__link--active:not(.menu__link--sublist) {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-border) !important;
  font-weight: 600 !important;
  border-radius: 8px;
  position: relative;
}

/* Left accent indicator */
div[class^="sidebar_"] .menu__link.menu__link--active:not(.menu__link--sublist)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--sidebar-active-border);
  border-radius: 0 2px 2px 0;
}

/* Hover states - subtle */
div[class^="sidebar_"] .menu__link:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

/* ============================================
   CATEGORY ROW HOVER LIFT EFFECT
   ============================================ */

div[class^="sidebar_"] > nav > ul > li > .menu__list-item-collapsible {
  transition: all 0.15s ease, box-shadow 0.15s ease;
}

div[class^="sidebar_"] > nav > ul > li > .menu__list-item-collapsible:hover {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.08);
}

html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-item-collapsible:hover {
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

/* ============================================
   BADGES FOR OSS / ENTERPRISE
   ============================================ */

.sidebar-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 4px;
  margin-left: 0.5rem;
}

.sidebar-badge--oss {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

html[data-theme="dark"] .sidebar-badge--oss {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.sidebar-badge--enterprise {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

html[data-theme="dark"] .sidebar-badge--enterprise {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

.sidebar-badge--cloud {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

html[data-theme="dark"] .sidebar-badge--cloud {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* ============================================
   ENTERPRISE VS OSS VISUAL DISTINCTION
   ============================================ */

/* Enterprise content indicator - purple left border */
.enterprise-content,
.admonition-enterprise {
  border-left: 4px solid #7c3aed !important;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 0%, transparent 100%) !important;
}

html[data-theme="dark"] .enterprise-content,
html[data-theme="dark"] .admonition-enterprise {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 0%, transparent 100%) !important;
}

/* OSS content indicator - green left border */
.oss-content,
.admonition-oss {
  border-left: 4px solid #10b981 !important;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%) !important;
}

html[data-theme="dark"] .oss-content,
html[data-theme="dark"] .admonition-oss {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%) !important;
}

/* Cloud content indicator - blue left border */
.cloud-content,
.admonition-cloud {
  border-left: 4px solid #3b82f6 !important;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%) !important;
}

html[data-theme="dark"] .cloud-content,
html[data-theme="dark"] .admonition-cloud {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%) !important;
}

/* Enterprise callout box */
.callout-enterprise {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: rgba(139, 92, 246, 0.05);
}

.callout-enterprise::before {
  content: '🔒 Enterprise';
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c3aed;
  margin-bottom: 0.5rem;
}

html[data-theme="dark"] .callout-enterprise {
  border-color: rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.1);
}

html[data-theme="dark"] .callout-enterprise::before {
  color: #a78bfa;
}

/* OSS callout box */
.callout-oss {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.05);
}

.callout-oss::before {
  content: '🔓 Open Source';
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #059669;
  margin-bottom: 0.5rem;
}

html[data-theme="dark"] .callout-oss {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.1);
}

html[data-theme="dark"] .callout-oss::before {
  color: #34d399;
}

/* Inline tier badges in text */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 4px;
  vertical-align: middle;
}

.tier-badge--enterprise {
  background: #7c3aed;
  color: #fff;
}

.tier-badge--oss {
  background: #10b981;
  color: #fff;
}

.tier-badge--cloud {
  background: #3b82f6;
  color: #fff;
}

/* ============================================
   DOC PAGE LAYOUT - FULL WIDTH CONTENT
   ============================================ */

/* Override container max-width for doc pages only */
.docs-wrapper .container,
.docs-wrapper .container-fluid,
[class*="docPage"] .container,
main .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* Docusaurus specific wrappers */
.docusaurus-mt-lg,
.docs-doc-page,
[class*="docsWrapper"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* Main doc wrapper - fix layout for full width */
.docs-wrapper,
[class*="docMainContainer"] {
  display: flex;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1;
}

/* Main wrapper */
.main-wrapper {
  max-width: 100% !important;
  width: 100% !important;
}

/* Doc root container */
[class*="docRoot"] {
  max-width: 100% !important;
  width: 100% !important;
  display: flex;
}

/* Doc page container */
[class*="docPage"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* Content area - full width with minimal gap to TOC */
.theme-doc-markdown {
  max-width: 100%;
  width: 100%;
}

/* Doc item container - NO overflow hidden (breaks sticky) */
[class*="docItemContainer"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* Doc item wrapper - controls the content + TOC layout */
[class*="docItemCol"] {
  max-width: 100% !important;
  flex: 1 !important;
  min-width: 0;
}

/* Pages without TOC - single column should be full width */
.col:only-child {
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* Main content column - NO overflow hidden */
main[class*="docMainContainer"] {
  flex: 1;
  min-width: 0;
  max-width: 100% !important;
  width: 100% !important;
}

/* Doc page row layout - allow sticky */
.row {
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
}

/* Remove col padding that creates gaps */
[class*="col--"]:not(.col--3) {
  padding: 0 !important;
}

/* Content column - add controlled padding */
.col[class*="docItemCol"] {
  padding-left: 1.5rem !important;
  padding-right: 1rem !important;
  min-width: 0;
}

/* Markdown content - control overflow only on content */
article.markdown {
  line-height: 1.8;
  font-size: 1rem;
  color: #374151;
  max-width: 100%;
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Article wrapper */
article {
  width: 100% !important;
  max-width: 100% !important;
}

html[data-theme="dark"] article.markdown {
  color: #d1d5db;
}

/* Paragraph styling */
article.markdown p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* Heading hierarchy - clear visual distinction */
article.markdown h1 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #111827;
}

html[data-theme="dark"] article.markdown h1 {
  color: #f9fafb;
}

article.markdown h2 {
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: #1f2937;
}

html[data-theme="dark"] article.markdown h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
}

article.markdown h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #374151;
}

html[data-theme="dark"] article.markdown h3 {
  color: #e5e7eb;
}

article.markdown h4 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #4b5563;
}

html[data-theme="dark"] article.markdown h4 {
  color: #d1d5db;
}

article.markdown h5,
article.markdown h6 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
}

html[data-theme="dark"] article.markdown h5,
html[data-theme="dark"] article.markdown h6 {
  color: #9ca3af;
}

/* Lists */
article.markdown ul,
article.markdown ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

article.markdown li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* Code blocks */
article.markdown pre {
  margin: 1.5rem 0;
  border-radius: 12px;
}

article.markdown code {
  font-size: 0.875em;
  padding: 0.2em 0.4em;
  border-radius: 6px;
}

/* Blockquotes */
article.markdown blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid #8b5cf6;
  background: rgba(139, 92, 246, 0.05);
  border-radius: 0 8px 8px 0;
}

html[data-theme="dark"] article.markdown blockquote {
  background: rgba(139, 92, 246, 0.1);
}

article.markdown blockquote p:last-child {
  margin-bottom: 0;
}

/* ============================================
   CODE BLOCKS - WHITE BACKGROUND, NO PADDING
   ============================================ */

/* Code block container - White background, no padding */
pre[class*="language-"],
.prism-code {
  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  padding: 0.75rem !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  overflow-x: auto;
  max-width: 100%;
  box-shadow: none;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-word;
}

html[data-theme="dark"] pre[class*="language-"],
html[data-theme="dark"] .prism-code {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Code block wrapper - no margin */
div[class*="codeBlockContainer"] {
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: none;
  margin: 0.75rem 0;
  max-width: 100%;
}

/* Code block content wrapper */
div[class*="codeBlockContent"] {
  max-width: 100%;
  overflow-x: auto;
}

/* Code block header/title */
div[class*="codeBlockTitle"] {
  background: #fafafa !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0.375rem 0.75rem !important;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280 !important;
  letter-spacing: 0.02em;
}

html[data-theme="dark"] div[class*="codeBlockTitle"] {
  background: #252525 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #9ca3af !important;
}

/* Copy button - subtle */
button[class*="copyButton"] {
  opacity: 0.7 !important;
  background: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 6px !important;
  padding: 0.25rem 0.5rem !important;
  color: #5f6368 !important;
  font-size: 0.6875rem;
  transition: all 0.15s ease !important;
}

button[class*="copyButton"]:hover {
  opacity: 1 !important;
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: #8b5cf6 !important;
  color: #7c3aed !important;
}

html[data-theme="dark"] button[class*="copyButton"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #a6adc8 !important;
}

html[data-theme="dark"] button[class*="copyButton"]:hover {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #a78bfa !important;
}

/* Syntax highlighting - Light theme colors */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6a737d;
  font-style: italic;
}

.token.punctuation {
  color: #24292e;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: #005cc5;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: #22863a;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #d73a49;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #d73a49;
}

.token.function,
.token.class-name {
  color: #6f42c1;
}

.token.regex,
.token.important,
.token.variable {
  color: #e36209;
}

/* Dark mode syntax colors */
html[data-theme="dark"] .token.comment,
html[data-theme="dark"] .token.prolog,
html[data-theme="dark"] .token.doctype,
html[data-theme="dark"] .token.cdata {
  color: #6c7086;
}

html[data-theme="dark"] .token.punctuation {
  color: #a6adc8;
}

html[data-theme="dark"] .token.property,
html[data-theme="dark"] .token.tag,
html[data-theme="dark"] .token.boolean,
html[data-theme="dark"] .token.number,
html[data-theme="dark"] .token.constant,
html[data-theme="dark"] .token.symbol {
  color: #fab387;
}

html[data-theme="dark"] .token.selector,
html[data-theme="dark"] .token.attr-name,
html[data-theme="dark"] .token.string,
html[data-theme="dark"] .token.char,
html[data-theme="dark"] .token.builtin {
  color: #a6e3a1;
}

html[data-theme="dark"] .token.operator,
html[data-theme="dark"] .token.entity,
html[data-theme="dark"] .token.url {
  color: #94e2d5;
}

html[data-theme="dark"] .token.atrule,
html[data-theme="dark"] .token.attr-value,
html[data-theme="dark"] .token.keyword {
  color: #cba6f7;
}

html[data-theme="dark"] .token.function,
html[data-theme="dark"] .token.class-name {
  color: #89b4fa;
}

html[data-theme="dark"] .token.regex,
html[data-theme="dark"] .token.important,
html[data-theme="dark"] .token.variable {
  color: #f9e2af;
}

/* Command vs config highlighting */
.token.command,
.language-bash .token.function,
.language-shell .token.function {
  color: #032f62;
  font-weight: 500;
}

html[data-theme="dark"] .token.command,
html[data-theme="dark"] .language-bash .token.function,
html[data-theme="dark"] .language-shell .token.function {
  color: #89dceb;
}

.language-yaml .token.key,
.language-json .token.property {
  color: #22863a;
}

html[data-theme="dark"] .language-yaml .token.key,
html[data-theme="dark"] .language-json .token.property {
  color: #f38ba8;
}

.language-yaml .token.punctuation,
.language-json .token.punctuation {
  color: #6a737d;
}

html[data-theme="dark"] .language-yaml .token.punctuation,
html[data-theme="dark"] .language-json .token.punctuation {
  color: #6c7086;
}

/* Line numbers */
.line-number::before {
  color: #babbbd;
  padding-right: 1rem;
  border-right: 1px solid #e1e4e8;
  margin-right: 1rem;
}

html[data-theme="dark"] .line-number::before {
  color: #45475a;
  border-right-color: #313244;
}

/* Highlighted lines */
.docusaurus-highlight-code-line {
  background: rgba(139, 92, 246, 0.08) !important;
  display: block;
  margin: 0 -0.75rem;
  padding: 0 0.75rem;
  border-left: 2px solid #8b5cf6;
}

/* Inline code - subtle styling */
article.markdown code:not(pre code) {
  background: rgba(139, 92, 246, 0.08);
  color: #6f42c1;
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-size: 0.875em;
  font-weight: 500;
  border: none;
}

html[data-theme="dark"] article.markdown code:not(pre code) {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

/* ============================================
   RIGHT-SIDE TOC - STICKY POSITIONING
   ============================================ */

/* TOC wrapper - must be sticky for child to work */
[class*="tableOfContents"] {
  min-width: 180px;
  max-width: 220px;
  flex-shrink: 0;
  padding-left: 0.5rem;
  padding-right: 1rem;
  margin-left: 0;
  margin-right: 0;
  position: sticky !important;
  top: 76px !important;
  align-self: flex-start !important;
  height: fit-content !important;
}

/* TOC column - must allow sticky */
.col.col--3 {
  --ifm-col-width: 240px !important;
  flex: 0 0 240px !important;
  max-width: 240px !important;
  padding-left: 0.5rem !important;
  padding-right: 1rem !important;
  margin-right: 0 !important;
  position: sticky !important;
  top: 76px !important;
  align-self: flex-start !important;
  height: fit-content !important;
}

/* TOC container - sticky with offset */
.table-of-contents {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  position: sticky !important;
  top: 76px !important;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  box-shadow: none !important;
  padding-top: 0.5rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.2) transparent;
}

/* Custom scrollbar for TOC */
.table-of-contents::-webkit-scrollbar {
  width: 4px;
}

.table-of-contents::-webkit-scrollbar-track {
  background: transparent;
}

.table-of-contents::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.2);
  border-radius: 2px;
}

.table-of-contents::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.4);
}

html[data-theme="dark"] .table-of-contents {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

html[data-theme="dark"] .table-of-contents::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
}

/* TOC header */
.table-of-contents::before {
  content: 'On this page';
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9ca3af;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .table-of-contents::before {
  color: #6b7280;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* TOC links - subtle purple accent */
.table-of-contents__link {
  display: block;
  font-size: 0.8125rem !important;
  color: #6b7280 !important;
  padding: 0.375rem 0.5rem;
  margin: 0.125rem 0;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  line-height: 1.4;
  background: transparent;
}

.table-of-contents__link:hover {
  background: rgba(139, 92, 246, 0.06);
  color: #374151 !important;
  border-left-color: rgba(139, 92, 246, 0.3);
}

html[data-theme="dark"] .table-of-contents__link {
  color: #9ca3af !important;
}

html[data-theme="dark"] .table-of-contents__link:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #e5e7eb !important;
}

/* Active TOC link - subtle purple accent */
.table-of-contents__link--active {
  background: transparent !important;
  color: #7c3aed !important;
  font-weight: 600 !important;
  border-left: 2px solid #8b5cf6;
}

html[data-theme="dark"] .table-of-contents__link--active {
  background: transparent !important;
  color: #a78bfa !important;
  border-left-color: #a78bfa;
}

/* Nested TOC items */
.table-of-contents__link--nested {
  padding-left: 1rem;
  font-size: 0.75rem !important;
}

/* ============================================
   BREADCRUMBS - THEMED WITH PROPER ALIGNMENT
   ============================================ */

.breadcrumbs {
  font-size: 0.8125rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  color: #6b7280;
}

.breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  color: #6b7280 !important;
  font-weight: 500;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  transition: all 0.15s ease;
  text-decoration: none;
}

.breadcrumbs__link:hover {
  background: rgba(139, 92, 246, 0.08);
  color: #7c3aed !important;
  text-decoration: none;
}

.breadcrumbs__item--active .breadcrumbs__link {
  color: #374151 !important;
  font-weight: 600;
  background: rgba(139, 92, 246, 0.06);
}

html[data-theme="dark"] .breadcrumbs__link {
  color: #9ca3af !important;
}

html[data-theme="dark"] .breadcrumbs__link:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa !important;
}

html[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link {
  color: #e5e7eb !important;
  background: rgba(139, 92, 246, 0.1);
}

/* Breadcrumb separator - arrow aligned vertically */
.breadcrumbs__item:not(:last-child)::after {
  content: '›';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.25rem;
  color: #9ca3af;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  height: 100%;
}

html[data-theme="dark"] .breadcrumbs__item:not(:last-child)::after {
  color: #6b7280;
}

/* Home icon alignment */
.breadcrumbs__link svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

/* ============================================
   VERSION PILL - SUBTLE CHIP
   ============================================ */

/* Version dropdown in navbar */
.navbar__items--right .dropdown > .navbar__link {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 20px;
  color: #7c3aed;
  font-weight: 600;
}

html[data-theme="dark"] .navbar__items--right .dropdown > .navbar__link {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

/* ============================================
   EDIT THIS PAGE / REQUEST CHANGES LINKS
   ============================================ */

/* Edit this page link */
.theme-edit-this-page {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: #6b7280;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}

.theme-edit-this-page:hover {
  background: rgba(255, 145, 77, 0.08);
  border-color: rgba(255, 145, 77, 0.3);
  color: #ff914d;
  text-decoration: none;
}

html[data-theme="dark"] .theme-edit-this-page {
  color: #9ca3af;
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .theme-edit-this-page:hover {
  background: rgba(255, 145, 77, 0.12);
  color: #ff914d;
}

/* ============================================
   KEPLOY VIBE - WARMTH & POLISH
   ============================================ */

/* Consistent rounded corners */
.alert,
.admonition,
.tabs-container,
.card,
[class*="codeBlock"] {
  border-radius: 14px !important;
}

/* Keploy orange accent on active states */
a:hover,
.menu__link:hover,
.navbar__link:hover {
  color: #ff914d;
}

/* Links with Keploy orange */
article.markdown a {
  color: #ea580c;
  text-decoration: none;
  border-bottom: 1px solid rgba(234, 88, 12, 0.3);
  transition: all 0.15s ease;
}

article.markdown a:hover {
  color: #ff914d;
  border-bottom-color: #ff914d;
}

html[data-theme="dark"] article.markdown a {
  color: #fb923c;
  border-bottom-color: rgba(251, 146, 60, 0.3);
}

html[data-theme="dark"] article.markdown a:hover {
  color: #ff914d;
  border-bottom-color: #ff914d;
}

/* Soft gradients in doc headers */
.theme-doc-markdown h1 {
  background: linear-gradient(135deg, #111827 0%, #374151 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html[data-theme="dark"] .theme-doc-markdown h1 {
  background: linear-gradient(135deg, #f9fafb 0%, #d1d5db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hover outlines with Keploy orange */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid rgba(255, 145, 77, 0.5);
  outline-offset: 2px;
}

/* ============================================
   ADMONITIONS - UPGRADED STYLING
   ============================================ */

.admonition {
  border-radius: 14px !important;
  border: 1px solid;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.admonition::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.admonition-heading {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admonition-icon svg {
  width: 18px;
  height: 18px;
}

.admonition-content {
  font-size: 0.9375rem;
  line-height: 1.65;
}

.admonition-content p:last-child {
  margin-bottom: 0;
}

/* Note */
.admonition.admonition-note {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.02) 100%);
  border-color: rgba(99, 102, 241, 0.2);
}

.admonition.admonition-note::before {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
}

/* Tip */
.admonition.admonition-tip {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
  border-color: rgba(16, 185, 129, 0.2);
}

.admonition.admonition-tip::before {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

/* Warning */
.admonition.admonition-warning,
.admonition.admonition-caution {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
  border-color: rgba(245, 158, 11, 0.2);
}

.admonition.admonition-warning::before,
.admonition.admonition-caution::before {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

/* Danger */
.admonition.admonition-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
  border-color: rgba(239, 68, 68, 0.2);
}

.admonition.admonition-danger::before {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

/* Info */
.admonition.admonition-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
  border-color: rgba(59, 130, 246, 0.2);
}

.admonition.admonition-info::before {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

/* Dark mode admonitions */
html[data-theme="dark"] .admonition.admonition-note {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
  border-color: rgba(99, 102, 241, 0.25);
}

html[data-theme="dark"] .admonition.admonition-tip {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-color: rgba(16, 185, 129, 0.25);
}

html[data-theme="dark"] .admonition.admonition-warning,
html[data-theme="dark"] .admonition.admonition-caution {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  border-color: rgba(245, 158, 11, 0.25);
}

html[data-theme="dark"] .admonition.admonition-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(239, 68, 68, 0.25);
}

html[data-theme="dark"] .admonition.admonition-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
  border-color: rgba(59, 130, 246, 0.25);
}

/* ============================================
   DOC META - MINIMAL TIER/VERSION INDICATOR
   ============================================ */

/* Doc meta row - sits between breadcrumbs and H1 */
.doc-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  min-height: 0;
}

/* Hide empty meta row */
.doc-meta-row:empty {
  display: none;
  margin: 0;
}

/* Doc meta is now handled inline in the component */
/* These are fallback/override styles if needed */

.doc-meta {
  font-size: 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

/* ProductTier chips in meta row */
.product-tier-chips {
  margin-bottom: 0 !important;
}

/* ============================================
   MICRO-POLISH & INTERACTIONS
   ============================================ */

/* Smooth transitions globally */
.menu__link,
.menu__caret,
.table-of-contents__link,
.menu__list-item-collapsible {
  transition: all 0.15s ease !important;
}

/* Remove harsh decorations */
.menu__link:hover {
  text-decoration: none !important;
}

/* Scrollbar styling for sidebar */
div[class^="sidebar_"]::-webkit-scrollbar,
.table-of-contents::-webkit-scrollbar {
  width: 6px;
}

div[class^="sidebar_"]::-webkit-scrollbar-track,
.table-of-contents::-webkit-scrollbar-track {
  background: transparent;
}

div[class^="sidebar_"]::-webkit-scrollbar-thumb,
.table-of-contents::-webkit-scrollbar-thumb {
  background: var(--sidebar-border);
  border-radius: 3px;
}

div[class^="sidebar_"]::-webkit-scrollbar-thumb:hover,
.table-of-contents::-webkit-scrollbar-thumb:hover {
  background: var(--sidebar-text-muted);
}

/* Dark mode contrast fixes */
html[data-theme="dark"] .menu__link {
  color: var(--sidebar-text-muted);
}

html[data-theme="dark"] .menu__link:hover {
  color: var(--sidebar-text);
}

html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-item-collapsible > a.menu__link {
  color: var(--sidebar-category-color) !important;
}

/* ============================================
   MOBILE SIDEBAR ADJUSTMENTS
   ============================================ */

@media (max-width: 996px) {
  .theme-doc-sidebar-container {
    background: var(--sidebar-bg) !important;
    width: 100% !important;
    min-width: unset !important;
  }

  .theme-doc-sidebar-container > div {
    position: relative !important;
    height: auto;
  }

  main[class*="docMainContainer"] {
    max-width: 100%;
  }

  .col[class*="docItemCol"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  [class*="docItemContainer"] {
    padding-right: 0;
  }

  div[class^="sidebar_"] > nav > ul > li:not(:last-child) {
    border-bottom: none;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
  }

  /* Hide TOC on mobile - it appears in mobile menu */
  [class*="tableOfContents"],
  .col.col--3 {
    display: none !important;
  }

  .table-of-contents {
    position: relative;
    top: 0;
    max-height: none;
    margin: 1rem 0;
  }

  /* Code blocks on mobile - white background, minimal padding */
  pre[class*="language-"],
  .prism-code {
    padding: 0.5rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-width: 100%;
    background: #fff !important;
  }

  div[class*="codeBlockContainer"] {
    margin: 0.5rem 0;
    max-width: 100%;
    overflow: hidden;
  }

  /* Content area on mobile */
  .col[class*="docItemCol"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  article.markdown {
    font-size: 0.9375rem;
  }

  /* Admonitions on mobile */
  .admonition {
    padding: 1rem !important;
    border-radius: 10px !important;
  }

  /* Breadcrumbs on mobile */
  .breadcrumbs {
    font-size: 0.75rem;
  }

  /* Tables on mobile */
  article.markdown table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* Tablet breakpoint */
@media (max-width: 1200px) {
  [class*="tableOfContents"] {
    min-width: 140px;
    max-width: 180px;
    padding-left: 0.25rem;
    padding-right: 0.5rem;
    margin-right: 0;
  }

  .col.col--3 {
    --ifm-col-width: 180px !important;
    flex: 0 0 180px !important;
    max-width: 180px !important;
    padding-right: 0.75rem !important;
    padding-left: 0.25rem !important;
  }

  .theme-doc-sidebar-container {
    width: 200px !important;
    min-width: 200px !important;
  }

  .col[class*="docItemCol"] {
    padding-left: 1rem !important;
    padding-right: 0.5rem !important;
  }

  .table-of-contents__link {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.375rem;
  }

  .table-of-contents::before {
    font-size: 0.625rem;
  }
}

/* Medium screens */
@media (max-width: 1100px) {
  [class*="tableOfContents"] {
    min-width: 120px;
    max-width: 160px;
  }

  .col.col--3 {
    --ifm-col-width: 160px !important;
    flex: 0 0 160px !important;
    max-width: 160px !important;
    padding-right: 0.5rem !important;
  }

  .theme-doc-sidebar-container {
    width: 180px !important;
    min-width: 180px !important;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  [class*="tableOfContents"] {
    min-width: 200px;
    max-width: 240px;
  }

  .col.col--3 {
    --ifm-col-width: 260px !important;
    flex: 0 0 260px !important;
    max-width: 260px !important;
    padding-right: 1.5rem !important;
  }

  .theme-doc-sidebar-container {
    width: 280px !important;
    min-width: 280px !important;
  }

  .col[class*="docItemCol"] {
    padding-left: 2rem !important;
    padding-right: 1rem !important;
  }
}


/* Support strip (Need help? Slack | Demo) */
.support-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  background: var(--ifm-color-emphasis-100); /* Slim strip look */
  border-radius: 4px;
  margin-bottom: 20px;
}

#support span {
  color: #252525;
  font-weight: 400;
}

/* Dark mode */
[data-theme='dark'] #support span {
  color: #ffffff; /* or a softer light gray like #e0e0e0 */
}

#support a {
  font-weight: 600;
  color: #ff7849;
  text-decoration: none;
}

#support a:hover {
  color: #ffa07a;
  text-decoration: underline;
}

/* ===== FINAL Compact Pagination ===== */

.pagination-nav {
  border-top: 2.5px solid var(--ifm-color-emphasis-200);
  padding-top: 2rem;
  margin-top: 2rem;
}

.pagination-nav__link {
  padding: 0.5rem 1rem !important; 
  border-radius: 6px !important;
  box-shadow: none !important;    
  border: 1.5px solid var(--ifm-color-emphasis-200) !important;
  background: transparent !important; 
  min-height: auto !important;
  display: flex;
  flex-direction: column;
}

.pagination-nav__label {
  font-weight: 700 !important;
  color: var(--ifm-color-emphasis-900) !important;
  font-size: 0.9rem;
}

.pagination-nav__sublabel {
  font-weight: 500;
  color: var(--ifm-color-emphasis-600);
}

/* Hover */
.pagination-nav__link:hover {
  border-color: var(--ifm-color-primary);
  background-color: var(--ifm-color-emphasis-100);
  text-decoration: none;
}



/* Title */
.pagination-nav__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ifm-font-color-base);
  line-height: 1.9;
}

/* Arrows subtle */
.pagination-nav__link svg {
  transform: scale(0.7);
  opacity: 1.65;
}

[data-theme='dark'] .pagination-nav__link {
  border-color: var(--ifm-color-emphasis-100); /* softer than before */
}

[data-theme='dark'] .pagination-nav__label {
  color: var(--ifm-color-emphasis-500);
}

/* ===== Divider Between Pagination and Footer ===== */

/* Add space below pagination */
.pagination-nav {
  margin-bottom: 3rem;
}

/* ===== Remove footer border on landing page only ===== */

/* Default: footer border ON everywhere */
.theme-layout-footer.footer {
  border-top: 1px solid var(--ifm-toc-border-color);
  margin-top: 0;
  padding-top: 2rem;
}

/* Remove border ONLY on landing page */
.plugin-pages.plugin-id-default .theme-layout-footer.footer {
  border-top: none !important;
}



/* ===== MOBILE FIX FOR PREV / NEXT CARDS ===== */
@media (max-width: 768px) {

  .pagination-nav {
    display: flex !important;
    flex-direction: column !important; /* stack vertically */
    gap: 12px;
  }

  .pagination-nav__link {
    width: 100% !important;
    padding: 14px !important;
  }

  .pagination-nav__label {
    font-size: 0.85rem !important;
  }

  .pagination-nav__title {
    font-size: 0.9rem !important;
    line-height: 1.4;
  }
}

/* ===== CONSISTENT SPACING FOR DOCUMENTATION PAGES ===== */
/* Fix inconsistent vertical spacing in documentation content */
article header + * {
  margin-top: 2rem !important; /* Consistent space after page title */
}

article h1 {
  margin-bottom: 1.5rem !important; /* Consistent space after H1 */
}

article h2 {
  margin-top: 2.5rem !important; /* Consistent space before H2 */
  margin-bottom: 1rem !important; /* Consistent space after H2 */
}

article h3 {
  margin-top: 2rem !important; /* Consistent space before H3 */
  margin-bottom: 0.75rem !important; /* Consistent space after H3 */
}

article p {
  margin-bottom: 1rem !important; /* Consistent space after paragraphs */
}

article img {
  margin-top: 1.5rem !important; /* Consistent space before images */
  margin-bottom: 1.5rem !important; /* Consistent space after images */
}

article \u003e div[style*='backgroundColor'] {
  margin-top: 1.5rem !important; /* Consistent space before styled divs */
  margin-bottom: 1.5rem !important; /* Consistent space after styled divs */
}


/* Override Tailwind prose spacing for better consistency */
.prose.md\\:prose-md {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* More specific overrides for prose elements */
.prose p {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.prose h1 {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

.prose h2 {
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

.prose h3 {
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

.prose img {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Fix the large top margin on first element after header */
.markdown \u003e *:first-child,
article \u003e .markdown \u003e *:first-child {
  margin-top: 1.5rem !important;
}


/* Fix clipped descenders in headings (y, g, p, q, j) */
article h1,
.prose h1 {
  line-height: 1.3 !important; /* Increase line-height to prevent clipping */
  padding-bottom: 0.2rem !important; /* Add padding to ensure descenders are visible */
  overflow: visible !important; /* Ensure text isn't clipped */
}

article h2,
.prose h2 {
  line-height: 1.4 !important;
  padding-bottom: 0.15rem !important;
  overflow: visible !important;
}

article h3,
.prose h3 {
  line-height: 1.4 !important;
  padding-bottom: 0.1rem !important;
  overflow: visible !important;
}


/* Reduce excessive spacing - fine-tuned values */
article h1,
.prose h1 {
  margin-bottom: 1rem !important; /* Reduced from 1.5rem */
}

/* Reduce top margin on first paragraph after title */
article h1 + p,
.prose h1 + p {
  margin-top: 1rem !important; /* Consistent spacing after H1 */
}

/* Adjust H2 spacing to be less aggressive */
article h2,
.prose h2 {
  margin-top: 1.75rem !important; /* Reduced from 2rem */
  margin-bottom: 0.75rem !important; /* Reduced from 1rem */
}

/* Adjust paragraph spacing */
article p,
.prose p {
  margin-top: 0.75rem !important; /* Reduced */
  margin-bottom: 0.75rem !important; /* Reduced */
}

/* Adjust image spacing */
article img,
.prose img {
  margin-top: 1.25rem !important; /* Reduced from 1.5rem */
  margin-bottom: 1.25rem !important; /* Reduced from 1.5rem */
}


/* Reduce top padding/margin above page title across all docs pages */
article,
.markdown,
[class*='docItemContainer'] article {
  padding-top: 1rem !important; /* Reduced top padding */
}

/* Reduce margin-top on the H1 title itself */
article h1:first-of-type,
.prose h1:first-of-type,
.markdown h1:first-of-type {
  margin-top: 0.5rem !important; /* Minimal top margin for first H1 */
}

/* Remove excessive top margin from article header */
article header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce top margin on first element after breadcrumbs */
.theme-doc-breadcrumbs + * {
  margin-top: 1rem !important;
}


/* OVERRIDE: Reduce top margin/padding on markdown container - more specific selectors */
div.theme-doc-markdown.markdown,
.theme-doc-markdown,
[class*='theme-doc-markdown'] {
  margin-top: 0 !important;
  padding-top: 0.5rem !important; /* Minimal top padding */
}

/* Target the prose container specifically */
.prose.md\\:prose-md.prose-auto.my-12 {
  margin-top: 1rem !important; /* Override my-12 class */
  margin-bottom: 1rem !important;
}

/* Remove large top margin from article/main content */
main article,
[class*='docItemContainer'] {
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
}


/* EQUAL SPACING: Make top and bottom spacing around H1 consistent */
/* This creates better visual balance for documentation pages */

/* Set consistent spacing after breadcrumbs */
nav.theme-doc-breadcrumbs {
  margin-bottom: 1.5rem !important; /* Equal to H1 bottom margin */
}

/* Ensure H1 has equal spacing on both sides */
article h1:first-of-type,
.prose h1:first-of-type {
  margin-top: 0 !important; /* No extra top margin */
  margin-bottom: 1.5rem !important; /* Match breadcrumb spacing */
}

/* Remove any extra padding from containers */
.theme-doc-markdown.markdown {
  padding-top: 0 !important;
}

/* Table header vertical alignment - align headers to top of cells */
table th {
  vertical-align: top !important;
}