/* Import Inter Variable font from fontsource CDN (same as web UI) */
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.2.8/index.min.css');

/* Global customization - match Fuzzball Web UI theme */

:root {
  /* Keep code blocks reasonably sized */
  --code-max-height: 60rem;
}

/*
 * Fuzzball Web UI Color System
 * Based on @ciq/themes fuzzballTheme + base theme
 *
 * Brand: Green palette (#e9fdf1 to #04140C)
 * Grays: Custom scale (#F7F7F7 to #0C0E12)
 * Dark mode default: background #13161B, text white
 * Light mode: background white, text #13161B
 */

/* Light mode theming */
:root,
:root[color-theme='light'] {
  /* Header - match web UI nav */
  --header-background: #ffffff;
  --header-font-color: #13161B;

  /* Body - match web UI light mode */
  --body-background: #ffffff;
  --body-font-color: #13161B;

  /* Highlight/mark color */
  --mark-color: #cbfce1; /* brand.50 */

  /* Buttons - use brand green */
  --button-background: #12a66f; /* brand.400 */
  --button-border-color: #0b8759; /* brand.500 */

  /* Links - use brand green */
  --link-color: #12a66f; /* brand.400 */
  --link-color-visited: #097049; /* brand.600 */

  /* Code blocks - match web UI light mode */
  --code-background: #F7F7F7; /* gray.50 */
  --code-accent-color: #ECECED; /* gray.200 */
  --code-accent-color-lite: #F0F0F1; /* gray.100 */
  --code-font-color: #373A41; /* gray.600 */

  /* Code copy button */
  --code-copy-background: #F7F7F7; /* gray.50 */
  --code-copy-font-color: #85888E; /* gray.500 */
  --code-copy-border-color: #94979C; /* gray.400 */
  --code-copy-success-color: #0b8759; /* brand.500 */

  /* Accent colors for panels/cards */
  --accent-color: #F0F0F1; /* gray.100 */
  --accent-color-lite: #F7F7F7; /* gray.50 */

  /* Control icons */
  --control-icons: #94979C; /* gray.400 */

  /* Footer */
  --footer-background: #22262F; /* gray.700 */
  --footer-font-color: #ffffff;
  --footer-link-color: #52fbb2; /* brand.100 */
  --footer-link-color-visited: #2be099; /* brand.200 */
}

@media (prefers-color-scheme: light) {
  :root {
    --header-background: #ffffff;
    --header-font-color: #13161B;
    --body-background: #ffffff;
    --body-font-color: #13161B;
    --mark-color: #cbfce1;
    --button-background: #12a66f;
    --button-border-color: #0b8759;
    --link-color: #12a66f;
    --link-color-visited: #097049;
    --code-background: #F7F7F7;
    --code-accent-color: #ECECED;
    --code-accent-color-lite: #F0F0F1;
    --code-font-color: #373A41;
    --code-copy-background: #F7F7F7;
    --code-copy-font-color: #85888E;
    --code-copy-border-color: #94979C;
    --code-copy-success-color: #0b8759;
    --accent-color: #F0F0F1;
    --accent-color-lite: #F7F7F7;
    --control-icons: #94979C;
    --footer-background: #22262F;
    --footer-font-color: #ffffff;
    --footer-link-color: #52fbb2;
    --footer-link-color-visited: #2be099;
  }
}

/* Dark mode theming - match web UI default */
:root[color-theme='dark'] {
  /* Header - dark mode */
  --header-background: #13161B; /* match web UI dark background */
  --header-font-color: #ffffff;

  /* Body - match web UI dark mode */
  --body-background: #13161B; /* exact match to web UI */
  --body-font-color: #ffffff;

  /* Highlight/mark color */
  --mark-color: #2be099; /* brand.200 - more visible in dark */

  /* Buttons - brand green adjusted for dark */
  --button-background: #17c484; /* brand.300 - brighter for dark mode */
  --button-border-color: #12a66f; /* brand.400 */

  /* Links - brand green adjusted for dark */
  --link-color: #2be099; /* brand.200 - more visible */
  --link-color-visited: #17c484; /* brand.300 */

  /* Code blocks - match web UI dark mode */
  --code-background: #22262F; /* gray.700 */
  --code-accent-color: #13161B; /* gray.800 */
  --code-accent-color-lite: #373A41; /* gray.600 */
  --code-font-color: #ECECED; /* gray.200 */

  /* Code copy button */
  --code-copy-background: #22262F; /* gray.700 */
  --code-copy-font-color: #94979C; /* gray.400 */
  --code-copy-border-color: #85888E; /* gray.500 */
  --code-copy-success-color: #17c484; /* brand.300 */

  /* Accent colors for panels/cards */
  --accent-color: #22262F; /* gray.700 */
  --accent-color-lite: #373A41; /* gray.600 */

  /* Control icons */
  --control-icons: #CECFD2; /* gray.300 */

  /* Footer */
  --footer-background: #0C0E12; /* gray.900 - darkest */
  --footer-font-color: #ffffff;
  --footer-link-color: #52fbb2; /* brand.100 */
  --footer-link-color-visited: #2be099; /* brand.200 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-background: #13161B;
    --header-font-color: #ffffff;
    --body-background: #13161B;
    --body-font-color: #ffffff;
    --mark-color: #2be099;
    --button-background: #17c484;
    --button-border-color: #12a66f;
    --link-color: #2be099;
    --link-color-visited: #17c484;
    --code-background: #22262F;
    --code-accent-color: #13161B;
    --code-accent-color-lite: #373A41;
    --code-font-color: #ECECED;
    --code-copy-background: #22262F;
    --code-copy-font-color: #94979C;
    --code-copy-border-color: #85888E;
    --code-copy-success-color: #17c484;
    --accent-color: #22262F;
    --accent-color-lite: #373A41;
    --control-icons: #CECFD2;
    --footer-background: #0C0E12;
    --footer-font-color: #ffffff;
    --footer-link-color: #52fbb2;
    --footer-link-color-visited: #2be099;
  }
}

/* Header border/divider styling - better contrast for both themes */
.gdoc-header {
  border-bottom: 1px solid var(--accent-color);
}

/* Light mode: subtle border */
:root[color-theme='light'] .gdoc-header {
  border-bottom-color: #ECECED; /* gray.200 - subtle in light mode */
}

/* Dark mode: more visible border */
:root[color-theme='dark'] .gdoc-header {
  border-bottom-color: #373A41; /* gray.600 - visible but not too bright in dark mode */
}

@media (prefers-color-scheme: dark) {
  :root:not([color-theme='light']) .gdoc-header {
    border-bottom-color: #373A41;
  }
}

@media (prefers-color-scheme: light) {
  :root:not([color-theme='dark']) .gdoc-header {
    border-bottom-color: #ECECED;
  }
}

/* Apply Inter Variable font globally - match web UI */
body,
html {
  font-family: 'Inter Variable', sans-serif !important;
}

/* Content area links use brand colors - match web UI */
/* Only target links within the main content, not navigation */
.gdoc-page__content a,
.gdoc-markdown a {
  color: var(--link-color);
  text-decoration: none;
}

.gdoc-page__content a:visited,
.gdoc-markdown a:visited {
  color: var(--link-color-visited);
}

.gdoc-page__content a:hover,
.gdoc-markdown a:hover {
  text-decoration: underline;
}

.gdoc-page__content a:focus,
.gdoc-markdown a:focus {
  outline: 2px dashed var(--link-color);
  outline-offset: 2px;
}

/* Force links in callout boxes to use brand colors too */
.gdoc-hint a {
  color: var(--link-color) !important;
}

.gdoc-hint a:visited {
  color: var(--link-color-visited) !important;
}

/* Ensure headings also use Inter Variable */
h1, h2, h3, h4, h5, h6,
.gdoc-markdown h1,
.gdoc-markdown h2,
.gdoc-markdown h3,
.gdoc-markdown h4,
.gdoc-markdown h5,
.gdoc-markdown h6 {
  font-family: 'Inter Variable', sans-serif !important;
}

/* Logo styling - match web UI logo dimensions */
.gdoc-brand__img {
  width: auto;
  height: 48px;
}

/* Hide the text title, logo is sufficient */
.gdoc-brand__title {
  display: none;
}

/* Download code button styling - match web UI button style */
.download-code-button {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  display: inline-block;
  background: var(--button-background);
  border: 1px solid var(--button-border-color);
  border-radius: 0.25rem;
  cursor: pointer;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.download-code-button:hover {
  background: var(--button-border-color);
}

/* Center images with #center fragment */
img[src$='#center'] {
  display: block;
  margin: 0.7rem auto;
}

/* SVG diagrams in dark mode - add light gray background for visibility */
:root[color-theme='dark'] .gdoc-markdown img[src$='.svg'],
:root[color-theme='dark'] .gdoc-page__content img[src$='.svg'] {
  background-color: #F0F0F1; /* gray.100 - soft light background */
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #373A41; /* gray.600 - subtle border */
}

@media (prefers-color-scheme: dark) {
  :root:not([color-theme='light']) .gdoc-markdown img[src$='.svg'],
  :root:not([color-theme='light']) .gdoc-page__content img[src$='.svg'] {
    background-color: #F0F0F1; /* gray.100 */
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #373A41;
  }
}

/* Ensure terminal blocks look consistent with other code blocks */
.gdoc-terminal {
  position: relative;
}

/* Smooth scrolling for anchor links - match web UI behavior */
html {
  scroll-behavior: smooth;
}

/* Improve focus visibility for accessibility - match web UI focus styles */
a:focus-visible,
button:focus-visible,
.gdoc-search__entry:focus-visible {
  outline: 2px dashed var(--link-color);
  outline-offset: 2px;
}

/* Match web UI card styling for content boxes */
.gdoc-markdown__link--raw,
.gdoc-page__anchorwrap,
.gdoc-expand {
  border-color: var(--accent-color);
}

/* Ensure consistent spacing - match web UI */
.gdoc-markdown {
  line-height: 1.6;
}

.gdoc-markdown p,
.gdoc-markdown ul,
.gdoc-markdown ol {
  margin-bottom: 1rem;
}

/* Match web UI table styling */
.gdoc-markdown table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}

.gdoc-markdown table th,
.gdoc-markdown table td {
  padding: 0.75rem;
  border: 1px solid var(--accent-color);
}

.gdoc-markdown table th {
  background-color: var(--accent-color);
  font-weight: 600;
}

/* Striped table rows for better readability - match web UI default */
.gdoc-markdown table tbody tr:nth-child(even) {
  background-color: var(--accent-color-lite);
}

/* Callout/hint boxes - better contrast in dark mode */
.gdoc-hint,
.gdoc-hint__title {
  border-color: var(--accent-color);
}

/* Light mode: keep subtle callout backgrounds */
:root[color-theme='light'] .gdoc-hint {
  background-color: var(--accent-color-lite);
}

/* Dark mode: use darker, more subtle callout backgrounds */
:root[color-theme='dark'] .gdoc-hint {
  background-color: #2b3035; /* Custom dark gray for subtle contrast - visible but not jarring */
  color: #ffffff; /* Ensure text is bright white for readability */
}

:root[color-theme='dark'] .gdoc-hint__title {
  color: #ffffff !important; /* Title also bright white */
  opacity: 1 !important; /* Override any opacity settings */
}

/* Ensure icon in hint title is visible - icons use SVG background-image */
:root[color-theme='dark'] .gdoc-hint__title .fa,
:root[color-theme='dark'] .gdoc-hint__title i {
  opacity: 1 !important;
  /* Invert the SVG background to make icon white */
  filter: invert(1) !important;
}

/* Ensure the text label (::after) stays white despite parent filter */
:root[color-theme='dark'] .gdoc-hint__title .fa::after,
:root[color-theme='dark'] .gdoc-hint__title i::after {
  color: #ffffff !important;
  opacity: 1 !important;
  /* Counter the parent's invert filter */
  filter: invert(1) !important;
}

/* Also target any SVG elements in the title (in case theme changes) */
:root[color-theme='dark'] .gdoc-hint__title .gdoc-icon,
:root[color-theme='dark'] .gdoc-hint__title svg,
:root[color-theme='dark'] .gdoc-hint__title use {
  opacity: 1 !important;
  fill: #ffffff !important;
}

/* Inline code within callouts - light mode */
:root[color-theme='light'] .gdoc-hint code {
  background-color: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Auto mode with light OS preference */
@media (prefers-color-scheme: light) {
  :root:not([color-theme='dark']) .gdoc-hint code {
    background-color: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
}

/* Dark mode: inline code within callouts uses same background as regular code */
:root[color-theme='dark'] .gdoc-hint code {
  background-color: #22262F; /* gray.700 - same as regular code blocks */
  border: 1px solid #373A41; /* gray.600 - subtle border */
  color: #ECECED; /* gray.200 - maintain readability */
}

/* Auto mode with dark OS preference - apply dark mode callout styles */
@media (prefers-color-scheme: dark) {
  :root:not([color-theme='light']) .gdoc-hint {
    background-color: #2b3035;
    color: #ffffff;
  }

  :root:not([color-theme='light']) .gdoc-hint__title {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  :root:not([color-theme='light']) .gdoc-hint__title .fa,
  :root:not([color-theme='light']) .gdoc-hint__title i {
    opacity: 1 !important;
    filter: invert(1) !important;
  }

  :root:not([color-theme='light']) .gdoc-hint__title .fa::after,
  :root:not([color-theme='light']) .gdoc-hint__title i::after {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: invert(1) !important;
  }

  :root:not([color-theme='light']) .gdoc-hint__title .gdoc-icon,
  :root:not([color-theme='light']) .gdoc-hint__title svg,
  :root:not([color-theme='light']) .gdoc-hint__title use {
    opacity: 1 !important;
    fill: #ffffff !important;
  }

  :root:not([color-theme='light']) .gdoc-hint code {
    background-color: #22262F;
    border: 1px solid #373A41;
    color: #ECECED;
  }
}

/* Independent scrolling for navigation sidebar and main content */

/* Fix the header at the top of the viewport */
.gdoc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* Ensure it stays above other content */
  background: var(--header-background);
}

/* Keep header content container from centering - align to left */
.gdoc-header .container {
  max-width: none;
  margin: 0;
  padding-left: 2rem; /* Match navigation padding */
}

/* Make the navigation sidebar independently scrollable and fixed in viewport */
.gdoc-nav {
  position: fixed;
  top: 5rem; /* Account for header height */
  left: 0;
  width: 20rem; /* Increased from 18rem to prevent text cutoff */
  height: calc(100vh - 5rem); /* Fill remaining viewport height below header */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding-left: 2rem; /* Match theme's container padding */
  padding-right: 1rem; /* Increased from 0.5rem to give more space before scrollbar */
  margin-right: 1rem; /* This adds space to the right in the layout flow */
  z-index: 50; /* Below header but above main content */
}

/* Remove any max-height constraints from inner nav */
.gdoc-nav nav {
  max-height: none;
  overflow: visible;
  padding-right: 1rem; /* Increased from 0.5rem to prevent text cutoff */
}

/* Adjust main content to account for fixed header and navigation */
main.container {
  margin-top: 5rem; /* Account for fixed header height */
}

/* Offset anchor jumps so headings land below the fixed 5rem header instead of
   scrolling underneath it (applies to in-page clicks and #hash page loads). */
.gdoc-page__anchorwrap > h1,
.gdoc-page__anchorwrap > h2,
.gdoc-page__anchorwrap > h3,
.gdoc-page__anchorwrap > h4,
.gdoc-page__anchorwrap > h5,
.gdoc-page__anchorwrap > h6 {
  scroll-margin-top: 5.5rem;
}

.container.flex.flex-even {
  padding-left: 21.5rem; /* Navigation width (20rem) + gap (1.5rem) */
  max-width: none; /* Remove max-width constraint to allow wider content */
}

/* Adjust footer to account for fixed navigation */
.gdoc-footer {
  margin-left: 21.5rem; /* Match main content left offset */
}

/* Custom scrollbar styling for navigation - light mode */
:root[color-theme='light'] .gdoc-nav::-webkit-scrollbar,
:root[color-theme='light'] .gdoc-nav nav::-webkit-scrollbar {
  width: 8px;
}

:root[color-theme='light'] .gdoc-nav::-webkit-scrollbar-track,
:root[color-theme='light'] .gdoc-nav nav::-webkit-scrollbar-track {
  background: #F7F7F7; /* gray.50 */
  border-radius: 4px;
}

:root[color-theme='light'] .gdoc-nav::-webkit-scrollbar-thumb,
:root[color-theme='light'] .gdoc-nav nav::-webkit-scrollbar-thumb {
  background: #94979C; /* gray.400 */
  border-radius: 4px;
}

:root[color-theme='light'] .gdoc-nav::-webkit-scrollbar-thumb:hover,
:root[color-theme='light'] .gdoc-nav nav::-webkit-scrollbar-thumb:hover {
  background: #85888E; /* gray.500 */
}

/* Custom scrollbar styling for navigation - dark mode */
:root[color-theme='dark'] .gdoc-nav::-webkit-scrollbar,
:root[color-theme='dark'] .gdoc-nav nav::-webkit-scrollbar {
  width: 8px;
}

:root[color-theme='dark'] .gdoc-nav::-webkit-scrollbar-track,
:root[color-theme='dark'] .gdoc-nav nav::-webkit-scrollbar-track {
  background: #22262F; /* gray.700 */
  border-radius: 4px;
}

:root[color-theme='dark'] .gdoc-nav::-webkit-scrollbar-thumb,
:root[color-theme='dark'] .gdoc-nav nav::-webkit-scrollbar-thumb {
  background: #373A41; /* gray.600 */
  border-radius: 4px;
}

:root[color-theme='dark'] .gdoc-nav::-webkit-scrollbar-thumb:hover,
:root[color-theme='dark'] .gdoc-nav nav::-webkit-scrollbar-thumb:hover {
  background: #85888E; /* gray.500 */
}

/* Auto mode scrollbar styling based on OS preference */
@media (prefers-color-scheme: light) {
  :root:not([color-theme='dark']) .gdoc-nav::-webkit-scrollbar,
  :root:not([color-theme='dark']) .gdoc-nav nav::-webkit-scrollbar {
    width: 8px;
  }

  :root:not([color-theme='dark']) .gdoc-nav::-webkit-scrollbar-track,
  :root:not([color-theme='dark']) .gdoc-nav nav::-webkit-scrollbar-track {
    background: #F7F7F7;
    border-radius: 4px;
  }

  :root:not([color-theme='dark']) .gdoc-nav::-webkit-scrollbar-thumb,
  :root:not([color-theme='dark']) .gdoc-nav nav::-webkit-scrollbar-thumb {
    background: #94979C;
    border-radius: 4px;
  }

  :root:not([color-theme='dark']) .gdoc-nav::-webkit-scrollbar-thumb:hover,
  :root:not([color-theme='dark']) .gdoc-nav nav::-webkit-scrollbar-thumb:hover {
    background: #85888E;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([color-theme='light']) .gdoc-nav::-webkit-scrollbar,
  :root:not([color-theme='light']) .gdoc-nav nav::-webkit-scrollbar {
    width: 8px;
  }

  :root:not([color-theme='dark']) .gdoc-nav::-webkit-scrollbar-track,
  :root:not([color-theme='dark']) .gdoc-nav nav::-webkit-scrollbar-track {
    background: #22262F;
    border-radius: 4px;
  }

  :root:not([color-theme='light']) .gdoc-nav::-webkit-scrollbar-thumb,
  :root:not([color-theme='light']) .gdoc-nav nav::-webkit-scrollbar-thumb {
    background: #373A41;
    border-radius: 4px;
  }

  :root:not([color-theme='light']) .gdoc-nav::-webkit-scrollbar-thumb:hover,
  :root:not([color-theme='light']) .gdoc-nav nav::-webkit-scrollbar-thumb:hover {
    background: #85888E;
  }
}

/* Firefox scrollbar styling */
.gdoc-nav,
.gdoc-nav nav {
  scrollbar-width: thin;
}

:root[color-theme='light'] .gdoc-nav,
:root[color-theme='light'] .gdoc-nav nav {
  scrollbar-color: #94979C #F7F7F7;
}

:root[color-theme='dark'] .gdoc-nav,
:root[color-theme='dark'] .gdoc-nav nav {
  scrollbar-color: #373A41 #22262F;
}

@media (prefers-color-scheme: light) {
  :root:not([color-theme='dark']) .gdoc-nav,
  :root:not([color-theme='dark']) .gdoc-nav nav {
    scrollbar-color: #94979C #F7F7F7;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([color-theme='light']) .gdoc-nav,
  :root:not([color-theme='light']) .gdoc-nav nav {
    scrollbar-color: #373A41 #22262F;
  }
}

/* Auto mode with light OS preference - apply light mode callout styles */
@media (prefers-color-scheme: light) {
  :root:not([color-theme='dark']) .gdoc-hint {
    background-color: var(--accent-color-lite);
  }
}