/* =========================================================
   🌐 Base Theme Variables
   ========================================================= */
:root {
  --bg: #f5f7fa;
  --fg: #222;
  --header-bg: #2c3e50;
  --header-fg: #fff;
  --accent: #0d6efd;
}

[data-theme="dark"] {
  --bg: #1e1e1e;
  --fg: #eee;
  --header-bg: #111;
  --header-fg: #ddd;
  --accent: #3399ff;
}

[data-theme="light"] {
  --lg: #eee;
}

/* =========================================================
   🧱 Layout & Structure
   ========================================================= */
body {
  font-family: system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--fg);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

/* Header section */
header {
  flex-shrink: 0;
  background-color: var(--header-bg);
  color: var(--header-fg);
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* File drop zone */
#dropzone {
  flex: 0 0 auto;
  margin: 1rem auto;
  padding: 2rem;
  width: 80%;
  border: 2px dashed var(--accent);
  text-align: center;
  border-radius: 8px;
  transition: background 0.3s;
  cursor: pointer;
  position: relative;
}
#dropzone.dragover {
  background-color: rgba(13, 110, 253, 0.1);
}

/* Viewer containers */
.viewer {
  flex: 1 1 auto;
  overflow: visible;
  padding: 1rem;
  display: none;
}

.uss-landing {
  text-align: center;
  padding: 1.5rem 1rem 0.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.uss-landing {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  opacity: 0.75;
}

.uss-tagline {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  opacity: 0.75;
}


/* =========================================================
   🎛️ UI Elements
   ========================================================= */

/* Theme toggle button */
#theme-toggle,
#launchEditorBtn,
#themeToggle,
#xsdStudioBtn,
#yamlTutorBtn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.15s ease;
}

/* Mode selector dropdown */
select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--accent);
  padding: 0.4rem;
  border-radius: 6px;
  font-size: 1rem;
}

/* Mode badge indicators */
.mode-badge {
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  background-color: var(--accent);
  color: #fff;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.mode-badge.yaml {
  background-color: #28a745; /* green */
}
.mode-badge.xsd {
  background-color: #0d6efd; /* blue */
}
.mode-badge:hover {
  transform: scale(1.05);
}
[data-theme="dark"] .mode-badge {
  background-color: #444;
  color: #fff;
}

/* =========================================================
   🌒 Redoc Dark Mode Overrides
   ========================================================= */
[data-theme="dark"] .redoc-wrap,
[data-theme="dark"] .redoc-container {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
}

/* Sidebar */
[data-theme="dark"] .menu-content {
  background-color: #111 !important;
  color: #eee !important;
}

/* Links */
[data-theme="dark"] .redoc-wrap a,
[data-theme="dark"] .redoc-container a {
  color: var(--accent) !important;
}

/* Tables */
[data-theme="dark"] .redoc-wrap table,
[data-theme="dark"] .redoc-container table {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .redoc-wrap tr,
[data-theme="dark"] .redoc-container tr {
  background-color: #1e1e1e !important;
  border-bottom: 1px solid #333 !important;
}

[data-theme="dark"] .redoc-wrap tr:nth-child(even),
[data-theme="dark"] .redoc-container tr:nth-child(even) {
  background-color: #222 !important;
}

[data-theme="dark"] .redoc-wrap tr:hover,
[data-theme="dark"] .redoc-container tr:hover {
  background-color: #2a2a2a !important;
}

[data-theme="dark"] .redoc-wrap td,
[data-theme="dark"] .redoc-container td,
[data-theme="dark"] .redoc-wrap th,
[data-theme="dark"] .redoc-container th {
  color: var(--fg) !important;
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}

/* Inline code */
[data-theme="dark"] code {
  background-color: #2a2a2a !important;
  color: #d6d6d6 !important;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
}

/* Headings */
[data-theme="dark"] .redoc-wrap h1,
[data-theme="dark"] .redoc-container h1,
[data-theme="dark"] .redoc-wrap h2,
[data-theme="dark"] .redoc-container h2,
[data-theme="dark"] .redoc-wrap h3,
[data-theme="dark"] .redoc-container h3,
[data-theme="dark"] .redoc-wrap h4,
[data-theme="dark"] .redoc-container h4,
[data-theme="dark"] .redoc-wrap h5,
[data-theme="dark"] .redoc-container h5,
[data-theme="dark"] .redoc-wrap h6,
[data-theme="dark"] .redoc-container h6 {
  color: var(--fg) !important;
}

/* Softer contrast for deep headings */
[data-theme="dark"] .redoc-wrap h5,
[data-theme="dark"] .redoc-container h5 {
  color: #ccc !important;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}

/* Nested spans inside headings */
[data-theme="dark"] .redoc-wrap h5 span,
[data-theme="dark"] .redoc-container h5 span,
[data-theme="dark"] .redoc-wrap h4 span,
[data-theme="dark"] .redoc-container h4 span {
  color: var(--fg) !important;
}

/* Metadata spans (type, required, etc.) */
[data-theme="dark"] .redoc-wrap h5 span[class*="type"],
[data-theme="dark"] .redoc-container h5 span[class*="type"],
[data-theme="dark"] .redoc-wrap h5 span[class*="required"],
[data-theme="dark"] .redoc-container h5 span[class*="required"] {
  color: #bbb !important;
  font-weight: 500;
}

/* Inline code or emphasis within spans */
[data-theme="dark"] .redoc-wrap h5 span code,
[data-theme="dark"] .redoc-container h5 span code,
[data-theme="dark"] .redoc-wrap h5 span em,
[data-theme="dark"] .redoc-container h5 span em {
  color: #d6d6d6 !important;
}

/* =========================================================
   ☀️ Redoc Light Mode Enhancements
   ========================================================= */
[data-theme="light"] .redoc-wrap,
[data-theme="light"] .redoc-container {
  background-color: var(--bg);
  color: var(--fg);
}

/* Sidebar */
[data-theme="light"] .menu-content {
  background-color: #fafafa;
  color: var(--fg);
  border-right: 1px solid #e0e0e0;
}

/* Links */
[data-theme="light"] .redoc-wrap a,
[data-theme="light"] .redoc-container a {
  color: var(--accent);
  text-decoration: none;
}
[data-theme="light"] .redoc-wrap a:hover,
[data-theme="light"] .redoc-container a:hover {
  text-decoration: underline;
}

/* Tables */
[data-theme="light"] .redoc-wrap table,
[data-theme="light"] .redoc-container table {
  background-color: #fff;
  border-collapse: collapse;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .redoc-wrap tr:nth-child(even),
[data-theme="light"] .redoc-container tr:nth-child(even) {
  background-color: #f9f9f9;
}

[data-theme="light"] .redoc-wrap tr:hover,
[data-theme="light"] .redoc-container tr:hover {
  background-color: #f0f7ff;
}

[data-theme="light"] .redoc-wrap td,
[data-theme="light"] .redoc-container td,
[data-theme="light"] .redoc-wrap th,
[data-theme="light"] .redoc-container th {
  color: var(--fg);
  border: 1px solid #e5e5e5;
  padding: 0.5rem 0.75rem;
}

/* Inline code */
[data-theme="light"] code {
  background-color: #f6f8fa;
  color: #d63384;
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
  font-size: 0.9em;
}

/* Headings */
[data-theme="light"] .redoc-wrap h1,
[data-theme="light"] .redoc-container h1,
[data-theme="light"] .redoc-wrap h2,
[data-theme="light"] .redoc-container h2,
[data-theme="light"] .redoc-wrap h3,
[data-theme="light"] .redoc-container h3,
[data-theme="light"] .redoc-wrap h4,
[data-theme="light"] .redoc-container h4,
[data-theme="light"] .redoc-wrap h5,
[data-theme="light"] .redoc-container h5,
[data-theme="light"] .redoc-wrap h6,
[data-theme="light"] .redoc-container h6 {
  color: var(--fg);
}

/* Softer visual hierarchy for smaller headings */
[data-theme="light"] .redoc-wrap h5,
[data-theme="light"] .redoc-container h5 {
  color: #444;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}

/* Nested spans inside headings */
[data-theme="light"] .redoc-wrap h5 span,
[data-theme="light"] .redoc-container h5 span,
[data-theme="light"] .redoc-wrap h4 span,
[data-theme="light"] .redoc-container h4 span {
  color: var(--fg);
}

/* Metadata spans (type, required, etc.) */
[data-theme="light"] .redoc-wrap h5 span[class*="type"],
[data-theme="light"] .redoc-container h5 span[class*="type"],
[data-theme="light"] .redoc-wrap h5 span[class*="required"],
[data-theme="light"] .redoc-container h5 span[class*="required"] {
  color: #666;
  font-weight: 500;
}

/* Inline code or emphasis within spans */
[data-theme="light"] .redoc-wrap h5 span code,
[data-theme="light"] .redoc-container h5 span code,
[data-theme="light"] .redoc-wrap h5 span em,
[data-theme="light"] .redoc-container h5 span em {
  color: #d63384;
}

/* =========================================================
   🧩 Fix for Redoc inline <span> elements (e.g., Enum values)
   ========================================================= */

/* Dark mode: make Enum spans readable */
[data-theme="dark"] .redoc-wrap div > span,
[data-theme="dark"] .redoc-container div > span {
  color: var(--fg) !important;
}

/* Optional: differentiate Enum keyword and values */
[data-theme="dark"] .redoc-wrap div > span:first-child,
[data-theme="dark"] .redoc-container div > span:first-child {
  color: var(--accent) !important; /* “Enum:” label */
  font-weight: 600;
}

/* Light mode: slight refinement for contrast and readability */
[data-theme="light"] .redoc-wrap div > span,
[data-theme="light"] .redoc-container div > span {
  color: var(--lg);
}

[data-theme="light"] .redoc-wrap div > span:first-child,
[data-theme="light"] .redoc-container div > span:first-child {
  color: var(--accent);
  font-weight: 600;
}

[data-theme="dark"] .redoc-wrap div > span:not(:first-child),
[data-theme="dark"] .redoc-container div > span:not(:first-child),
[data-theme="light"] .redoc-wrap div > span:not(:first-child),
[data-theme="light"] .redoc-container div > span:not(:first-child) {
  font-family: monospace;
  padding: 0 0.25rem;
}

/* =========================================================
   🧩 Fix for Redoc property-name <span> inside buttons
   ========================================================= */

/* Dark mode: make property-name spans readable */
[data-theme="dark"] .redoc-wrap button span,
[data-theme="dark"] .redoc-container button span {
  color: var(--fg) !important;
}

/* Optional: subtle accent on hover/focus for accessibility */
[data-theme="dark"] .redoc-wrap button:hover span,
[data-theme="dark"] .redoc-container button:hover span,
[data-theme="dark"] .redoc-wrap button:focus span,
[data-theme="dark"] .redoc-container button:focus span {
  color: var(--accent) !important;
}

/* Light mode: maintain clarity and accent on hover */
[data-theme="light"] .redoc-wrap button span,
[data-theme="light"] .redoc-container button span {
  color: var(--fg);
}
[data-theme="light"] .redoc-wrap button:hover span,
[data-theme="light"] .redoc-container button:hover span,
[data-theme="light"] .redoc-wrap button:focus span,
[data-theme="light"] .redoc-container button:focus span {
  color: var(--accent);
}

/* =========================================================
   🩶 Fix: Dark mode ReDoc headings (e.g., "Request samples")
   ========================================================= */

/* Force all ReDoc-generated headings in dark mode to inherit the light text color */
[data-theme="dark"] .redoc-wrap h1,
[data-theme="dark"] .redoc-wrap h2,
[data-theme="dark"] .redoc-wrap h3,
[data-theme="dark"] .redoc-wrap h4,
[data-theme="dark"] .redoc-wrap h5,
[data-theme="dark"] .redoc-wrap h6,
[data-theme="dark"] .redoc-container h1,
[data-theme="dark"] .redoc-container h2,
[data-theme="dark"] .redoc-container h3,
[data-theme="dark"] .redoc-container h4,
[data-theme="dark"] .redoc-container h5,
[data-theme="dark"] .redoc-container h6,
[data-theme="dark"] .redoc-wrap [class*="sc-"] h1,
[data-theme="dark"] .redoc-wrap [class*="sc-"] h2,
[data-theme="dark"] .redoc-wrap [class*="sc-"] h3,
[data-theme="dark"] .redoc-wrap [class*="sc-"] h4,
[data-theme="dark"] .redoc-wrap [class*="sc-"] h5,
[data-theme="dark"] .redoc-wrap [class*="sc-"] h6,
[data-theme="dark"] .redoc-container [class*="sc-"] h1,
[data-theme="dark"] .redoc-container [class*="sc-"] h2,
[data-theme="dark"] .redoc-container [class*="sc-"] h3,
[data-theme="dark"] .redoc-container [class*="sc-"] h4,
[data-theme="dark"] .redoc-container [class*="sc-"] h5,
[data-theme="dark"] .redoc-container [class*="sc-"] h6 {
  color: #fff !important;
}

/* Also fix ReDoc heading containers (e.g. <div class="sc-kpDqfm jhTHfM"><h3>…) */
[data-theme="dark"] .redoc-wrap [class*="sc-"],
[data-theme="dark"] .redoc-container [class*="sc-"] {
  color: #fff !important;
}

/* =========================================================
   ⚫ Override white schema card backgrounds (YAML/XSD viewer)
   ========================================================= */

/* Force dark background for schema wrapper and inner container */
[data-theme="dark"] .redoc-container div.sc-ikkxIA,
[data-theme="dark"] .redoc-container div[class*="sc-ikkxIA"],
[data-theme="dark"] .redoc-container div.sc-feUZmu,
[data-theme="dark"] .redoc-container div[class*="sc-feUZmu"] {
  background-color: #000 !important; /* true black surface */
  border: 1px solid #222 !important;
  color: #fff !important;
}

/* Nested content inside schema cards (tables, text, spans, etc.) */
[data-theme="dark"] .redoc-container div.sc-ikkxIA *,
[data-theme="dark"] .redoc-container div[class*="sc-ikkxIA"] *,
[data-theme="dark"] .redoc-container div.sc-feUZmu *,
[data-theme="dark"] .redoc-container div[class*="sc-feUZmu"] * {
  color: #fff !important;
}

/* Optional: soften inner buttons and keep hover visible */
[data-theme="dark"] .redoc-container div.sc-feUZmu button,
[data-theme="dark"] .redoc-container div[class*="sc-feUZmu"] button {
  background-color: #2d2d2d !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}
[data-theme="dark"] .redoc-container div.sc-feUZmu button:hover,
[data-theme="dark"] .redoc-container div[class*="sc-feUZmu"] button:hover {
  background-color: #3a3a3a !important;
}

/* =========================================================
   🎯 Fix: "Status Confirmations." label should remain dark text
   ========================================================= */

/* 1️⃣ Limit the global white override to headings only */
[data-theme="dark"] .redoc-wrap h1,
[data-theme="dark"] .redoc-wrap h2,
[data-theme="dark"] .redoc-wrap h3,
[data-theme="dark"] .redoc-wrap h4,
[data-theme="dark"] .redoc-wrap h5,
[data-theme="dark"] .redoc-wrap h6,
[data-theme="dark"] .redoc-container h1,
[data-theme="dark"] .redoc-container h2,
[data-theme="dark"] .redoc-container h3,
[data-theme="dark"] .redoc-container h4,
[data-theme="dark"] .redoc-container h5,
[data-theme="dark"] .redoc-container h6 {
  color: #fff !important;
}

/* 2️⃣ Restore neutral / black text for scoped ReDoc spans (e.g. “Status Confirmations.”) */
[data-theme="dark"] .redoc-wrap span[class*="sc-"],
[data-theme="dark"] .redoc-container span[class*="sc-"] {
  color: #000 !important;
}

/* Optional fine-tuning: if some spans are inside dark boxes, force white again */
[data-theme="dark"] .redoc-wrap [class*="dark-bg"] span[class*="sc-"],
[data-theme="dark"] .redoc-container [class*="dark-bg"] span[class*="sc-"] {
  color: #fff !important;
}

/* =========================================================
   🎯 ReDoc api-content: fix dark mode text contrast
   ========================================================= */

/* Scope: main content panel only (api-content). Keep menu-content untouched. */
[data-theme="dark"] .redoc-wrap .api-content .sc-ihgnxF,
[data-theme="dark"] .redoc-container .api-content .sc-ihgnxF {
  /* e.g., <span class="sc-ihgnxF"><i>oauthBearerToken</i></span> */
  color: #e0e0e0 !important;
}
[data-theme="dark"] .redoc-wrap .api-content .sc-ihgnxF i,
[data-theme="dark"] .redoc-container .api-content .sc-ihgnxF i {
  color: #e0e0e0 !important;
}

/* Token/value chips next to property names (all Nxspf variants) */
[data-theme="dark"] .redoc-wrap .api-content .sc-Nxspf,
[data-theme="dark"] .redoc-container .api-content .sc-Nxspf {
  color: #e0e0e0 !important;
}

/* Common sub-variants you showed (robust even if classes change suffixes) */
[data-theme="dark"] .redoc-wrap .api-content .sc-gFAWRd,
[data-theme="dark"] .redoc-container .api-content .sc-gFAWRd,
[data-theme="dark"] .redoc-wrap .api-content .sc-gmPhUn,
[data-theme="dark"] .redoc-container .api-content .sc-gmPhUn,
[data-theme="dark"] .redoc-wrap .api-content .sc-bypJrT,
[data-theme="dark"] .redoc-container .api-content .sc-bypJrT {
  color: #e0e0e0 !important;
}

/* “Show pattern” and similar little buttons in api-content */
[data-theme="dark"] .redoc-wrap .api-content .sc-hIUJlX,
[data-theme="dark"] .redoc-container .api-content .sc-hIUJlX {
  color: #e0e0e0 !important;
  background: #2a2a2a !important;
  border: 1px solid #3a3a3a !important;
}
[data-theme="dark"] .redoc-wrap .api-content .sc-hIUJlX:hover,
[data-theme="dark"] .redoc-container .api-content .sc-hIUJlX:hover {
  background: #3a3a3a !important;
}

/* =========================================================
   🎯 ReDoc api-content: extend dark mode fixes
   ========================================================= */

/* “application/json” text */
[data-theme="dark"] .redoc-wrap .api-content .sc-cWSHoV,
[data-theme="dark"] .redoc-container .api-content .sc-cWSHoV {
  color: #e0e0e0 !important;
}

/* SVG arrow icons (like dropdown chevrons) */
[data-theme="dark"] .redoc-wrap .api-content .sc-cwHptR,
[data-theme="dark"] .redoc-container .api-content .sc-cwHptR {
  stroke: #e0e0e0 !important;
  fill: none !important;
}

/* “required” badge – stay red even in dark mode */
[data-theme="dark"] .redoc-wrap .api-content .sc-Nxspf.sc-hRJfrW,
[data-theme="dark"] .redoc-container .api-content .sc-Nxspf.sc-hRJfrW {
  color: #ff5252 !important; /* bright red for contrast */
  font-weight: 600;
}

/* ensure small text chips near required remain visible */
[data-theme="dark"] .redoc-wrap .api-content .sc-Nxspf:not(.sc-hRJfrW),
[data-theme="dark"] .redoc-container .api-content .sc-Nxspf:not(.sc-hRJfrW) {
  color: #e0e0e0 !important;
}

/* =========================================================
   1️⃣ 🎯 Dynamic fix for oauthBearerToken label
   ========================================================= */
/* Collapsed (dark background) — parent has .ezhZdr */
[data-theme="dark"] .redoc-wrap .api-content .sc-jMakVo.ezhZdr .sc-ihgnxF,
[data-theme="dark"] .redoc-container .api-content .sc-jMakVo.ezhZdr .sc-ihgnxF,
[data-theme="dark"] .redoc-wrap .api-content .sc-jMakVo.ezhZdr .sc-ihgnxF i,
[data-theme="dark"]
  .redoc-container
  .api-content
  .sc-jMakVo.ezhZdr
  .sc-ihgnxF
  i {
  color: #ffffff !important; /* white for readability */
}

/* Expanded (light background) — parent has .iqJlbl */
[data-theme="dark"] .redoc-wrap .api-content .sc-jMakVo.iqJlbl .sc-ihgnxF,
[data-theme="dark"] .redoc-container .api-content .sc-jMakVo.iqJlbl .sc-ihgnxF,
[data-theme="dark"] .redoc-wrap .api-content .sc-jMakVo.iqJlbl .sc-ihgnxF i,
[data-theme="dark"]
  .redoc-container
  .api-content
  .sc-jMakVo.iqJlbl
  .sc-ihgnxF
  i {
  color: #000000 !important; /* black for light background */
}

/* Optional fallback — if neither class is present, stay neutral light gray */
[data-theme="dark"]
  .redoc-wrap
  .api-content
  .sc-ihgnxF:not(:has(.ezhZdr)):not(:has(.iqJlbl)),
[data-theme="dark"]
  .redoc-container
  .api-content
  .sc-ihgnxF:not(:has(.ezhZdr)):not(:has(.iqJlbl)) {
  color: #e0e0e0 !important;
}

/* 2️⃣ Buttons: ensure consistent contrast for variants */
/* Good one (“object” with jXRCRV) already has correct dark bg + light text — keep it */
[data-theme="dark"] .redoc-wrap .api-content .sc-hzhJZQ.jXRCRV,
[data-theme="dark"] .redoc-container .api-content .sc-hzhJZQ.jXRCRV {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #3a3a3a !important;
}

/* Broken one (“object” with bItXex) — likely inherits dark text on dark bg */
[data-theme="dark"] .redoc-wrap .api-content .sc-hzhJZQ.bItXex,
[data-theme="dark"] .redoc-container .api-content .sc-hzhJZQ.bItXex ,
[data-theme="dark"] .redoc-container .api-content .sc-hzhJZQ.hYAsdN,
[data-theme="dark"] .redoc-wrap .api-content .sc-hzhJZQ.hYAsdN,
[data-theme="dark"] .redoc-container .api-content .sc-hzhJZQ.gDqYFC,
[data-theme="dark"] .redoc-wrap .api-content .sc-hzhJZQ.gDqYFC {
  background-color: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #3a3a3a !important;
}

/* Hover states for both variants */
[data-theme="dark"] .redoc-wrap .api-content .sc-hzhJZQ:hover,
[data-theme="dark"] .redoc-container .api-content .sc-hzhJZQ:hover {
  background-color: #3a3a3a !important;
}

/* 3️⃣ Keep “required” badges red (previous fix reinforced) */
[data-theme="dark"] .redoc-wrap .api-content .sc-Nxspf.sc-hRJfrW,
[data-theme="dark"] .redoc-container .api-content .sc-Nxspf.sc-hRJfrW {
  color: #ff5252 !important;
  font-weight: 600;
}

/* =========================================================
   ☀️ Fix: Make sc-Nxspf spans readable in Light mode
   ========================================================= */
[data-theme="light"] .redoc-wrap .api-content .sc-Nxspf,
[data-theme="light"] .redoc-container .api-content .sc-Nxspf {
  color: #706969 !important; 
}

[data-theme="light"] .redoc-wrap .api-content .sc-Nxspf.sc-hRJfrW,
[data-theme="light"] .redoc-container .api-content .sc-Nxspf.sc-hRJfrW {
  color: #ff0000 !important; /* keep "required" badge bright red */
  font-weight: 600;
}

/* =========================================================
   ☀️ Fix: Light-mode dark-background elements
   ========================================================= */

/* "Response samples" header that appears on dark background */
[data-theme="light"] .redoc-wrap .api-content h3.sc-kpDqfm,
[data-theme="light"] .redoc-container .api-content h3.sc-kpDqfm {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Endpoint/path span (e.g., /National_Treasury_...) */
[data-theme="light"] .redoc-wrap .api-content span.sc-iEXKAA,
[data-theme="light"] .redoc-container .api-content span.sc-iEXKAA,
[data-theme="light"] .redoc-container .api-content span.sc-ejfMa-d,
[data-theme="dark"] .redoc-container .api-content span.sc-iEXKAA.lmuCWo,
[data-theme="dark"] .redoc-wrap .api-content span.sc-iEXKAA {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* =========================================================
   🌙 Fix: Dark-mode dropdown-select readability
   ========================================================= */
[data-theme="dark"] .dropdown-select {
  background-color: #2a2a2a !important; /* dark gray background */
  color: #fff !important;               /* white text */
  border: 1px solid #444 !important;
}

[data-theme="dark"] .dropdown-select option {
  background-color: #2a2a2a !important;
  color: #fff !important;
}


/* 4️⃣ Optional: if other inline type tokens (like “string”, “integer”) appear, keep them neutral light */
[data-theme="dark"] .redoc-wrap .api-content .sc-Nxspf:not(.sc-hRJfrW),
[data-theme="dark"] .redoc-container .api-content .sc-Nxspf:not(.sc-hRJfrW) {
  color: #e0e0e0 !important;
}

/* =========================================================
   🎯 ReDoc Info Panel: lighten License/URL labels in dark mode
   ========================================================= */

/* Target: spans like “License:” or “URL:” that precede <a> links */
[data-theme="dark"] .redoc-wrap .api-content .sc-kMkxaj,
[data-theme="dark"] .redoc-container .api-content .sc-kMkxaj {
  color: #e0e0e0 !important; /* light gray for readability */
}

/* Preserve link color (blue) and underline hover */
[data-theme="dark"] .redoc-wrap .api-content .sc-kMkxaj a,
[data-theme="dark"] .redoc-container .api-content .sc-kMkxaj a {
  color: #3399ff !important; /* same accent blue */
  text-decoration: none;
}
[data-theme="dark"] .redoc-wrap .api-content .sc-kMkxaj a:hover,
[data-theme="dark"] .redoc-container .api-content .sc-kMkxaj a:hover {
  text-decoration: underline;
}

/* =========================================================
   🟩 Fix: Keep YAML badge green in dark mode
   ========================================================= */
[data-theme="dark"] .mode-badge.yaml {
  background-color: #28a745 !important; /* same vibrant green */
  color: #fff !important; /* ensure text stays readable */
}

/* XMLVIEWER Style code */

/* Dropzone shell (align with your schema viewer styles) */
.dropzone {
  border: 2px dashed var(--accent);
  border-radius: 1rem;
  padding: 1.25rem;
  background: var(--card-bg);
  cursor: pointer;
  user-select: none;
  outline: none;
}
.dropzone.dragover {
  border-color: var(--accent, #4f46e5);
  box-shadow: 0 0 0 3px
    color-mix(in oklab, var(--accent, #4f46e5), transparent 70%);
}
.dropzone-input {
  display: none;
}
.dropzone-inner {
  text-align: center;
}
.dz-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.dz-text {
  font-weight: 600;
}
.dz-link {
  text-decoration: underline;
}
.dz-subtext {
  opacity: 0.8;
  font-size: 0.9rem;
}

/* Code-like textarea */
.code-input {
  width: 100%;
  min-height: 140px;
  margin-top: 1rem;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  resize: vertical;
}

/* Buttons row (uses your .btn styles) */
.button-row {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
  padding: 8px 12px;
  background: #2d2d2d;
  border-bottom: 1px solid #444;
  align-items: center;
}

/* Status line */
.status-line {
  margin-top: 0.75rem;
  font-weight: 600;
}

[data-theme="dark"] #build-info {
  color: #cac8c8 !important;
}
[data-theme="light"] #build-info {
  color: #bebdbd !important;
}

/* =========================================================
   🟩 Footer styling
   ========================================================= */

.uss-footer {
  text-align: center;
  padding: 0.75rem 0.5rem 1rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

.uss-footer-hint a {
  text-decoration: none;
  font-weight: 500;
}

.uss-footer-hint a:hover {
  text-decoration: underline;
}