/* ══════════════════════════════════════════════════════════════════════════════
   app-navbar.css  —  v4
   • Navbar: restored to original app sand/cream color
   • Page body: very light violet-white tint
   • Full light + dark mode support throughout
   • Headerlink ¶ icons hidden
   • Navbar fixed on scroll
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Navbar design tokens ────────────────────────────────────────────────── */
:root {
  /* Navbar: deep navy-black theme */
  --sf-nav-bg:       #020817;          /* deep navy base #020817 */
  --sf-nav-border:   #1e293b;
  --sf-nav-shadow:   0 8px 30px rgba(0,0,0,0.5);

  /* Text inside navbar */
  --sf-nav-text:        rgba(255,255,255,0.8);
  --sf-nav-text-active: #ffffff;
  --sf-nav-accent:      #3ca2fa;
  --sf-nav-hover-bg:    rgba(255,255,255,0.1);

  /* Shared */
  --sf-nav-height: 64px;
  --sf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
             sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --sf-radius: 0.375rem;
}

/* Navbar dark mode tokens */
body[data-theme="dark"] {
  --sf-nav-bg:          #1e2022;
  --sf-nav-border:      rgba(255,255,255,0.08);
  --sf-nav-shadow:      0 8px 30px rgba(0,0,0,0.25);
  --sf-nav-text:        rgba(207,208,208,0.65);
  --sf-nav-text-active: #cfd0d0;
  --sf-nav-hover-bg:    rgba(255,255,255,0.06);
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --sf-nav-bg:          #1e2022;
    --sf-nav-border:      rgba(255,255,255,0.08);
    --sf-nav-shadow:      0 8px 30px rgba(0,0,0,0.25);
    --sf-nav-text:        rgba(207,208,208,0.65);
    --sf-nav-text-active: #cfd0d0;
    --sf-nav-hover-bg:    rgba(255,255,255,0.06);
  }
}

/* ── 1. Hide Sphinx ¶ headerlink icons ──────────────────────────────────────── */
.headerlink { display: none !important; }

/* ── 2. Fixed navbar — deep navy glass bar ──────────────────────────────────── */
#sf-app-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: rgba(2, 8, 23, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #1e293b;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  font-family: var(--sf-font);
  color: #ffffff;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

#sf-app-navbar .sf-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem; /* Reduced padding from 2.5rem */
  min-height: 64px;
  box-sizing: border-box;
  width: 100%; /* Replaced max-width: 1280px and margin: 0 auto */
}

/* ── Logo: image matching landing page (brightness-0 invert) ─────────────────── */
#sf-app-navbar .sf-nav-logo {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  min-height: 44px;
}
#sf-app-navbar .sf-nav-logo img {
  height: 64px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

/* ── Glass capsule pill container (center nav links) ────────────────────────── */
#sf-app-navbar .sf-glass-capsule {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 9999px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* ── Pill nav links inside capsule ──────────────────────────────────────────── */
#sf-app-navbar .sf-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: pointer;
}
#sf-app-navbar .sf-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

/* Active pill badge — translucent glass with white radium light highlight */
#sf-app-navbar .sf-pill-active {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
#sf-app-navbar .sf-pill-active:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* ── CTA buttons (right side) ───────────────────────────────────────────────── */
#sf-app-navbar .sf-nav-cta {
  display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}
#sf-app-navbar .sf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 1rem;
  border-radius: 999px; font-size: 0.875rem; font-weight: 500;
  font-family: var(--sf-font); text-decoration: none;
  transition: all 0.2s; white-space: nowrap;
  cursor: pointer; border: none; line-height: 1;
}
#sf-app-navbar .sf-btn-ghost {
  background: transparent; color: rgba(255,255,255,0.85);
}
#sf-app-navbar .sf-btn-ghost:hover {
  background: rgba(255,255,255,0.1); color: #ffffff; text-decoration: none;
}
#sf-app-navbar .sf-btn-primary {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
#sf-app-navbar .sf-btn-primary:hover {
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}
#sf-app-navbar .sf-btn-signup .sf-arrow {
  margin-left: 4px;
  display: inline-block;
  transition: transform 0.2s;
}
#sf-app-navbar .sf-btn-signup:hover .sf-arrow {
  transform: translateX(3px);
}

/* ── 3. Push Furo chrome below fixed navbar ─────────────────────────────────── */
.page                { padding-top: var(--sf-nav-height) !important; }
.mobile-header       { top: var(--sf-nav-height) !important; position: sticky !important; }
.sidebar-drawer      { top: 0 !important; }
.sidebar-sticky      { position: sticky !important; top: var(--sf-nav-height) !important; height: calc(100vh - var(--sf-nav-height)) !important; }
.toc-drawer          { top: var(--sf-nav-height) !important; height: calc(100vh - var(--sf-nav-height)) !important; }
:target              { scroll-margin-top: calc(var(--sf-nav-height) + 1.5rem) !important; }
section > span:target{ scroll-margin-top: calc(var(--sf-nav-height) + 1.8rem) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE  —  page: very subtle violet-white tint
   These rules apply when data-theme="light" OR when system is light AND
   no explicit theme is set (auto mode).
   We scope everything so Furo's dark rules can fully override in dark mode.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Light: pure white page */
body[data-theme="light"],
body[data-theme="auto"],
body:not([data-theme]) {
  --color-background-primary:   #ffffff;
  --color-background-secondary: #f5f5f5;
  --color-background-hover:     #eeeeee;
  --color-background-hover--transparent: rgba(238,238,238,0);
  --color-background-border:    rgba(10,10,15,0.12);

  --color-foreground-primary:   #0A0A0F;
  --color-foreground-secondary: rgba(10,10,15,0.65);
  --color-foreground-muted:     rgba(10,10,15,0.50);
  --color-foreground-border:    rgba(10,10,15,0.20);

  --color-brand-primary:        #0a4bff;
  --color-brand-content:        #0a4bff;
  --color-brand-visited:        #6B21A8;

  --color-header-background:    #F8F8F8;
  --color-header-border:        rgba(10,10,15,0.08);
  --color-header-text:          #0A0A0F;

  --color-sidebar-background:           #f5f5f5;
  --color-sidebar-background-border:    rgba(10,10,15,0.08);
  --color-sidebar-brand-text:           #0A0A0F;
  --color-sidebar-caption-text:         rgba(10,10,15,0.50);
  --color-sidebar-link-text:            rgba(10,10,15,0.70);
  --color-sidebar-link-text--top-level: #0a4bff;
  --color-sidebar-item-background:      #f5f5f5;
  --color-sidebar-item-background--current: #ebebeb;
  --color-sidebar-search-background:    rgba(255,255,255,0.80);
  --color-sidebar-search-background--focus: #ffffff;
  --color-sidebar-search-border:        rgba(10,10,15,0.12);
  --color-sidebar-search-icon:          rgba(10,10,15,0.40);
  --color-sidebar-search-text:          #0A0A0F;

  --color-toc-background:        #ffffff;
  --color-toc-title-text:        rgba(10,10,15,0.50);
  --color-toc-item-text:         rgba(10,10,15,0.65);
  --color-toc-item-text--hover:  #0A0A0F;
  --color-toc-item-text--active: #0a4bff;

  --color-code-background: #f0f0f0;
  --color-code-foreground: #0A0A0F;
  --color-inline-code-background: rgba(10,10,15,0.06);
}

/* System auto light */
@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]):not([data-theme="light"]) {
    background: #ffffff !important;
  }
}

/* Concrete element overrides for LIGHT */
body[data-theme="light"],
body[data-theme="auto"]:not([data-theme="dark"]),
body:not([data-theme]) {
  background: #ffffff;
  color: #0A0A0F;
}

body[data-theme="light"] .page,
body[data-theme="auto"] .page,
body:not([data-theme]) .page            { background: #ffffff; }
body[data-theme="light"] .sidebar-drawer,
body[data-theme="auto"] .sidebar-drawer,
body:not([data-theme]) .sidebar-drawer  { background: #f5f5f5 !important; border-right-color: rgba(10,10,15,0.08) !important; }
body[data-theme="light"] .toc-drawer,
body[data-theme="auto"] .toc-drawer,
body:not([data-theme]) .toc-drawer      { background: #ffffff !important; }
body[data-theme="light"] article[role="main"],
body[data-theme="auto"] article[role="main"],
body:not([data-theme]) article[role="main"] { background: transparent; color: #0A0A0F; }

/* Light code blocks */
body[data-theme="light"] pre,
body[data-theme="light"] .highlight pre,
body[data-theme="auto"] pre,
body[data-theme="auto"] .highlight pre,
body:not([data-theme]) pre,
body:not([data-theme]) .highlight pre   { background: #f0f0f0 !important; color: #0A0A0F !important; }

/* Light links */
body[data-theme="light"] article a,
body[data-theme="auto"] article a,
body:not([data-theme]) article a        { color: #0a4bff; }
body[data-theme="light"] article a:hover,
body[data-theme="auto"] article a:hover,
body:not([data-theme]) article a:hover  { color: #2757dd; }

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE  —  explicit overrides that supplement Furo's own dark rules
   ══════════════════════════════════════════════════════════════════════════════ */
body[data-theme="dark"] {
  --color-background-primary:   #131416;
  --color-background-secondary: #1a1c1e;
  --color-background-hover:     #1e2124;
  --color-background-hover--transparent: rgba(30,33,36,0);
  --color-background-border:    #303335;

  --color-foreground-primary:   #cfd0d0;
  --color-foreground-secondary: #9ca0a5;
  --color-foreground-muted:     #81868d;
  --color-foreground-border:    #666;

  --color-brand-primary:        #a78bfa;
  --color-brand-content:        #a78bfa;
  --color-brand-visited:        #c084fc;

  --color-header-background:    rgba(19, 20, 22, 0.95);
  --color-header-border:        rgba(255,255,255,0.06);
  --color-header-text:          #cfd0d0;

  --color-sidebar-background:           #1a1c1e;
  --color-sidebar-background-border:    rgba(255,255,255,0.06);
  --color-sidebar-brand-text:           #cfd0d0;
  --color-sidebar-caption-text:         #81868d;
  --color-sidebar-link-text:            #9ca0a5;
  --color-sidebar-link-text--top-level: #a78bfa;
  --color-sidebar-item-background:      #1a1c1e;
  --color-sidebar-item-background--current: #1e2124;
  --color-sidebar-search-background:    rgba(255,255,255,0.06);
  --color-sidebar-search-background--focus: rgba(255,255,255,0.10);
  --color-sidebar-search-border:        rgba(255,255,255,0.12);
  --color-sidebar-search-icon:          #81868d;
  --color-sidebar-search-text:          #cfd0d0;

  --color-toc-background:        #131416;
  --color-toc-title-text:        #81868d;
  --color-toc-item-text:         #9ca0a5;
  --color-toc-item-text--hover:  #cfd0d0;
  --color-toc-item-text--active: #a78bfa;

  --color-code-background: #202020;
  --color-code-foreground: #d0d0d0;
  --color-inline-code-background: rgba(255,255,255,0.08);

  background: #131416;
  color: #cfd0d0;
}

body[data-theme="dark"] .page           { background: #131416; }
body[data-theme="dark"] .sidebar-drawer { background: #1a1c1e !important; border-right-color: rgba(255,255,255,0.06) !important; }
body[data-theme="dark"] .toc-drawer     { background: #131416 !important; }
body[data-theme="dark"] article[role="main"] { background: transparent; color: #cfd0d0; }

body[data-theme="dark"] pre,
body[data-theme="dark"] .highlight pre  { background: #202020 !important; color: #d0d0d0 !important; }

body[data-theme="dark"] article a       { color: #a78bfa; }
body[data-theme="dark"] article a:hover { color: #c084fc; }

body[data-theme="dark"] .sidebar-search { background: rgba(255,255,255,0.07); color: #cfd0d0; }
body[data-theme="dark"] code.literal,
body[data-theme="dark"] .sig-inline     { background: rgba(255,255,255,0.08); color: #cfd0d0; }

/* System-prefers-dark AND no explicit theme set */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --color-background-primary:   #131416;
    --color-background-secondary: #1a1c1e;
    background: #131416;
    color: #cfd0d0;
  }
  body:not([data-theme="light"]) .page           { background: #131416; }
  body:not([data-theme="light"]) .sidebar-drawer { background: #1a1c1e !important; }
  body:not([data-theme="light"]) .toc-drawer     { background: #131416 !important; }
  body:not([data-theme="light"]) pre,
  body:not([data-theme="light"]) .highlight pre  { background: #202020 !important; color: #d0d0d0 !important; }
  body:not([data-theme="light"]) article a       { color: #a78bfa; }
}

/* ── Typography (shared) ────────────────────────────────────────────────────── */
body, article, .sidebar-tree, .toc-tree, h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
article h1 { font-size: 2rem;    font-weight: 700; letter-spacing: -0.02em;  }
article h2 { font-size: 1.5rem;  font-weight: 700; letter-spacing: -0.015em; }
article h3 { font-size: 1.25rem; font-weight: 600; }
article[role="main"] p,
article[role="main"] li,
article[role="main"] td { line-height: 1.65; }

/* Sidebar brand */
.sidebar-brand-text { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.sidebar-search     { border-radius: var(--sf-radius); }
.sidebar-search:focus { outline: 2px solid #0a4bff; outline-offset: -2px; }

/* Admonitions */
.admonition { background: rgba(10,10,15,0.04); border-left-color: #0a4bff; }

/* Footer */
footer, .bottom-of-page { border-top-color: var(--color-background-border); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sf-app-navbar .sf-nav-links { display: none; }
  #sf-app-navbar .sf-nav-inner { padding: 0.75rem 1rem; }
  #sf-app-navbar .sf-btn-ghost { display: none; }
}
@media (max-width: 480px) {
  :root { --sf-nav-height: 72px; }
  #sf-app-navbar .sf-nav-logo img { height: 48px; }
}

/* ── Hide "Made with Sphinx and @pradyunsg's Furo" attribution ────────────── */
.bottom-of-page .left-details {
  font-size: 0;        /* collapses all inline text nodes including the loose text */
}
.bottom-of-page .left-details .copyright,
.bottom-of-page .left-details .last-updated {
  font-size: 0.75rem;  /* restore copyright and last-updated to normal size */
}

/* ── Prevent fixed navbar from covering page content ────────────────────────── */
html {
  scroll-padding-top: 108px !important;
}
.page {
  padding-top: 92px !important; /* Pushes the entire documentation down 92px */
}
.sidebar-drawer,
.toc-drawer {
  top: 92px !important;
  height: calc(100vh - 92px) !important;
}

/* Forces the sidebar items (Brand, Search, Navigation) to stack vertically without overlapping */
.sidebar-sticky {
  top: 92px !important;
  height: calc(100vh - 92px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Styles the Search Container */
.sidebar-search-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important; /* Reduces the gap below the search box */
  position: relative !important;
  z-index: 10 !important;
  padding: 0 1.5rem !important; /* Indents the search box from the edges */
}

/* Pulls the Product Guide list up closer to the search box */
.sidebar-tree {
  margin-top: 0.5rem !important; 
}

/* Styles the actual Search Input to match your screenshot */
.sidebar-search-container input, input.sidebar-search {
  border-radius: 6px !important;
  padding: 8px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Hides the default Furo magnifying glass icon */
.sidebar-search-container::before {
  display: none !important; 
}

/* Ensures the navigation tree scrolls properly in its constrained space */
.sidebar-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  max-height: none !important;
}

/* ── Position "Back to top" button below fixed navbar ───────────────────────── */
.back-to-top {
  top: 104px !important;
  z-index: 99 !important;
  background: rgba(11, 19, 41, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  color: #3ca2fa !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
}

.back-to-top:hover {
  background: #132247 !important;
  color: #ffffff !important;
  border-color: #3ca2fa !important;
  box-shadow: 0 6px 24px rgba(60, 162, 250, 0.28) !important;
  text-decoration: none !important;
  transform: translateX(-50%) translateY(-2px) !important;
}

.back-to-top svg {
  fill: currentColor !important;
}