/* API Spec Page Layout — Redoc fills area next to Antora nav sidebar */

.api-spec-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.api-spec-page .header {
  flex-shrink: 0;
  z-index: 100;
}

/* The .body div contains nav + api-spec-main side by side */
.api-spec-page .body {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* Keep the Antora nav sidebar */
.api-spec-page .nav-container {
  flex-shrink: 0;
  overflow-y: auto;
}

/* Redoc fills the remaining space */
.api-spec-page .api-spec-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.api-spec-page #redoc-container {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Hide toolbar/footer — not needed on spec pages */
.api-spec-page .toolbar,
.api-spec-page footer.footer {
  display: none;
}

/* Dark theme background for Redoc container before it loads */
[data-theme="dark"] .api-spec-page #redoc-container {
  background: #0d1117;
}

.api-spec-page #redoc-container {
  background: #ffffff;
}

/* Redoc inner overrides for dark theme */
[data-theme="dark"] .api-spec-page .redoc-wrap {
  background: #0d1117;
}

[data-theme="dark"] .api-spec-page .menu-content {
  background: #0d1117;
}

/* Scrollbar styling within Redoc */
.api-spec-page #redoc-container::-webkit-scrollbar {
  width: 8px;
}

.api-spec-page #redoc-container::-webkit-scrollbar-track {
  background: var(--background-elevation-0, #0d1117);
}

.api-spec-page #redoc-container::-webkit-scrollbar-thumb {
  background: var(--secondary-main, #6e7681);
  border-radius: 4px;
}

.api-spec-page #redoc-container::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-dark, #484f58);
}

/* ===== Dark mode: fix Redoc hardcoded colors ===== */
[data-theme="dark"] .api-spec-page .redoc-wrap h5 {
  color: #8b949e !important;
}

/* Ensure middle panel text is light in dark mode */
[data-theme="dark"] .api-spec-page .redoc-wrap {
  color: #e6edf3;
}

/* ===== Light mode: fix Redoc hardcoded colors ===== */
.api-spec-page .redoc-wrap {
  color: #1f2328;
}

/* Right panel always has dark bg — text must be light in both modes */
.api-spec-page .redoc-wrap > div:last-child {
  color: #e6edf3;
}

/* Dark mode: Redoc sets selected tab bg AND text to the same light color.
   Fix by giving the selected tab dark text so it's readable on the light bg. */
[data-theme="dark"] .api-spec-page .react-tabs__tab--selected {
  color: #263238 !important;
}

/* Dark mode: Redoc server URL selector boxes have white backgrounds but
   a styled-component rule sets inner span text to rightPanel.textColor
   (near-white), causing white-on-white. Force inherit from parent which
   has correct dark color for the light background. */
[data-theme="dark"] .api-spec-page [role="button"] span {
  color: inherit !important;
}

/* Hide Redoc branding footer */
.api-spec-page a[href*="redocly"],
.api-spec-page a[href*="redoc.ly"] {
  display: none !important;
}

/* Loading state */
.api-spec-page #redoc-container:empty::after {
  content: 'Loading API specification...';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary, #8b949e);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
}