/* ── Header redesign ─────────────────────────────────────── */

/* Logo area: icon (32×32) + "Gemini Developer Platform" text injected after */
header a > div.flex.items-center {
  gap: 8px;
}

header a > div.flex.items-center img {
  border-radius: 6px;
}

header a > div.flex.items-center::after {
  content: "Gemini Developer Platform";
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--content-primary, #010304);
  white-space: nowrap;
}

.dark header a > div.flex.items-center::after {
  color: var(--content-primary, #ffffff);
}

/* Remove the border between the top bar and the nav bar.
   Both rows use Tailwind's inset-shadow (compiled to box-shadow).
   Clear all, then restore the bottom border only on the nav row. */
header > div {
  box-shadow: none !important;
}
header > div:last-of-type {
  border-bottom: 1px solid var(--list-border-enabled, #e6e6e6);
}
.dark header > div:last-of-type {
  border-bottom: 1px solid var(--list-border-enabled, #e6cece14);
}

/* Search bar — pill shape, grey fill */
header button.rounded-lg {
  border-radius: 9999px !important;
  background: rgba(102, 121, 149, 0.08) !important;
  box-shadow: none !important;
  height: 36px !important;
  width: clamp(200px, 40vw, 600px) !important;
  border: 1px solid rgba(102, 121, 149, 0.08) !important;
}

.dark header button.rounded-lg {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Top nav tab links */
header nav a {
  font-family: "Geist", sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  letter-spacing: 0px !important;
  font-weight: 400 !important;
}

/* Active tab — SemiBold */
header nav a.text-foreground {
  font-weight: 600 !important;
}

/* Inactive tab — content/disabled */
header nav a.text-foreground\/75 {
  color: var(--content-disabled, rgba(1, 3, 4, 0.3)) !important;
}

/* ─────────────────────────────────────────────────────────── */

/* Fix: the nav wrapper is sticky inside the layout grid, but the footer sits
   outside that grid. When scrolling into the footer the grid's bottom edge
   passes the viewport and sticky stops working, pushing the nav up.
   Switch to fixed positioning so the nav is always viewport-relative and
   never constrained by the grid container's height.
   On screens narrower than max-w-screen-2xl (1536px) the grid is full-width
   so left:0 is correct. On wider screens we use the same auto-centering offset
   via calc. */
@media (min-width: 1024px) {
  .grid.max-w-screen-2xl > [data-pagefind-ignore="all"] {
    position: fixed !important;
    top: var(--header-height) !important;
    width: var(--side-nav-width);
    left: max(0px, calc((100vw - 1536px) / 2));
  }
}

/* Override Zudoku's hardcoded lg:px-8 (32px) left padding on the main content
   area to match the design's 40px content offset. */
@media (min-width: 1024px) {
  main[data-pagefind-body] {
    padding-left: var(--spacing-4x-large, 40px);
  }
}

/* Override Zudoku's Typography wrapper xl:max-w-3xl (768px) cap so the content
   column can use its full available width. */
@media (min-width: 1280px) {
  main[data-pagefind-body] .typography {
    max-width: 912px;
  }
}

/* New component-based pages manage their own top padding — zero the wrapper's. */
main[data-pagefind-body] .typography:has([data-gdp-page]) {
  padding-top: 0;
}

/* Prevent layout shift caused by Zudoku's useSuspenseQuery in Main.tsx.
   During the Suspense fallback, <main> has col-span-full (full width).
   After nav data loads, the nav renders and <main> shifts to the right column.
   We prevent this by stopping <main data-pagefind-body> from ever spanning
   all columns on lg screens, so the layout is stable from first paint. */
@media (min-width: 1024px) {
  main[data-pagefind-body] {
    grid-column: 2;
  }
}

/* Hubble spacing tokens — sourced from @hubble/tokens web.spacing.
   Named to match Figma's var(--spacing-*) convention.
   Anchors confirmed: x-large=20px, 3x-large=32px, 6x-large=64px */
:root {
  --spacing-none: 0px;
  --spacing-x-small: 4px;
  --spacing-small: 8px;
  --spacing-medium: 12px;
  --spacing-large: 16px;
  --spacing-x-large: 20px;
  --spacing-2x-large: 24px;
  --spacing-3x-large: 32px;
  --spacing-4x-large: 40px;
  --spacing-5x-large: 48px;
  --spacing-6x-large: 64px;
  --spacing-7x-large: 80px;
  --spacing-8x-large: 96px;
}

/* Brand button colors — not yet in @hubble/tokens, pending designer update to Figma.
   TODO: replace with token references once added to hubble. */
:root {
  --brand-button-bg: #26ddf9;
  --brand-button-fg: #010304;
  --brand-accent: #26ddf9;
  --brand-text: #2ea8bb;
  --content-primary: #010304;
  --content-disabled: #0610184d;
  --status-default-content-positive: #0e8535;
  --status-default-background-positive: #0e853514;
  --status-default-content-neutral: #676868;
  --status-default-background-neutral: rgba(103, 104, 104, 0.08);
  --background-secondary: rgba(1, 3, 4, 0.04);
  --list-border-enabled: #e6e6e6;
  --card-background-outlined-enabled: #ffffff;
  --card-border-outlined-enabled: #66799533;
}

.dark .hero-gradient {
  background: radial-gradient(
    ellipse 140% 175% at 95% 95%,
    rgba(247, 77, 0, 0.58) 0%,
    rgba(247, 77, 0, 0.3) 37%,
    transparent 67%
  ) !important;
}

.dark {
  --card-background-filled: #edd5d51a;
  --background-secondary: #ffffff1a;
  --list-border-enabled: #e6cece14;
  --status-default-content-positive: #00ff9a;
  --status-default-background-positive: #00ff9a14;
  --status-default-content-neutral: #ebe1dd;
  --status-default-background-neutral: #ebe1dd1a;
  --brand-button-bg: #f74d00;
  --brand-button-fg: #ffffff;
  --brand-accent: #f74d00;
  --brand-text: #f74d00;
  --content-primary: #ffffff;
  --content-secondary: #faf1eb99;
  --content-disabled: #91a1ba80;
  --action-content-secondary-neutral-enabled: #ffffff;
  --card-background-outlined-enabled: #edd5d50f;
  --card-border-outlined-enabled: #adc7ee29;
}

.text-alert-danger,
.text-alert-danger a {
  color: #fff;
}

.section-icon svg {
  border-radius: 0;
  min-width: 24px;
  min-height: 24px;
  width: 24px;
  height: 24px;
  fill: currentColor;
  margin: 0 10px 0 0;
}

.section-info,
.section-info a {
  color: #fff;
  background-color: #0084d1;
}

.doc-table {
  p {
    margin: 0;
  }
}

table {
  table-layout: auto;
  width: 100%;
}

td:first-child,
th:first-child {
  width: auto;
  white-space: nowrap;
}

/* Custom scrollbar for code blocks */
.code-block-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.code-block-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.code-block-scroll::-webkit-scrollbar-thumb {
  background: #cccdcd;
  border-radius: 12px;
}

.code-block-scroll::-webkit-scrollbar-thumb:hover {
  background: #b0b1b1;
}

.dark .code-block-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.dark .code-block-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Code block background */
pre:not(.bg-foreground\/10),
.dark\:\!bg-foreground\/10:where(.dark, .dark *) {
  background-color: hsl(var(--muted)) !important;
}

.dark pre:not(.bg-foreground\/10),
.dark .dark\:\!bg-foreground\/10 {
  background-color: #edd5d51a !important;
}

.dark pre + div.flex.items-center.justify-between.px-4,
.dark div.flex.items-center.justify-between.px-4:has(+ pre) {
  background-color: #edd5d51a !important;
}

/* OpenAPI description field paragraph */
.text-card-foreground p {
  color: hsl(var(--muted-foreground));
}

/* Playground / Example Response monospace text */
.font-mono {
  color: hsl(var(--foreground));
}

/* Playground response panel background */
.min-w-0.p-4.py-8.bg-muted\/50 {
  background: hsl(var(--muted) / 0.5);
}

/* Playground test button */
button.text-primary-foreground {
  color: hsl(var(--primary-foreground));
  font-weight: 500;
}

/* Playground test button hover */
button.text-primary-foreground:hover {
  background-color: hsl(var(--primary) / 0.85);
}

footer p.text-muted-foreground {
  white-space: pre-line;
  font-size: 12px;
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  text-align: center;
}

.footer-legal__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-legal__logo {
  order: 0;
}

.footer-legal__text {
  order: -1;
}

@media (min-width: 768px) {
  .footer-legal {
    flex-direction: row;
    text-align: left;
    width: 100%;
  }

  .footer-legal__text {
    flex: 1;
    order: 1;
  }

  .footer-legal__logo {
    order: 0;
  }
}

/* WebSocket Interactive Page Styles */

.ws-interactive-page {
  background: hsl(var(--background));
  min-height: 100vh;
}

.method-card {
  transition: box-shadow 0.2s ease;
}

.method-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.json-editor {
  font-family:
    "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.5;
}

.json-editor:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.stream-viewer {
  background: hsl(var(--background));
}

.stream-message {
  transition: background-color 0.2s ease;
}

.stream-message:hover {
  background: hsl(var(--muted) / 0.5);
}

.auth-header-manager input:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Scrollbar styles for content areas */
.overflow-y-auto::-webkit-scrollbar {
  width: 10px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: hsl(var(--muted));
  border-radius: 5px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Animation for connection status indicator */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .ws-method-sidebar {
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid hsl(var(--border));
  }

  .method-card {
    grid-template-columns: 1fr;
  }

  .method-card .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Stream message highlight fade animation */
@keyframes highlight-fade {
  0% {
    background-color: rgb(34 197 94 / 0.2);
    border-color: rgb(34 197 94);
  }
  100% {
    background-color: hsl(var(--background));
    border-color: hsl(var(--border));
  }
}

/* Shiki dual-theme: show light tokens in light mode, dark tokens in dark mode */
.shiki-wrapper .shiki,
.shiki-wrapper .shiki span {
  color: var(--shiki-light) !important;
  background-color: transparent !important;
}

.dark .shiki-wrapper .shiki,
.dark .shiki-wrapper .shiki span {
  color: var(--shiki-dark) !important;
}

/* Override Zudoku's global --shiki-light-bg / --shiki-dark-bg root variables
   inside our code blocks so the <pre> doesn't pick up the theme's white/dark bg */
.shiki-wrapper {
  --shiki-light-bg: transparent;
  --shiki-dark-bg: transparent;
}

.shiki-wrapper pre,
.shiki-wrapper .shiki {
  background-color: transparent !important;
  margin: 0;
  padding: 0 !important;
  font-family: monospace;
  font-size: 0.75rem;
  line-height: 1.75;
}