/* prokodo API Docs — refined API console theme */

:root {
  --docs-bg: #15233b;
  --docs-panel: #0f1726;
  --docs-panel-elevated: #111c2f;
  --docs-panel-soft: #192844;
  --docs-border: rgba(148, 163, 184, 0.14);
  --docs-border-strong: rgba(96, 165, 250, 0.24);
  --docs-text: #f8fafc;
  --docs-text-muted: #c9d4ea;
  --docs-text-soft: #94a3b8;
  --docs-link: #7dd3fc;
  --docs-link-hover: #bae6fd;
  --docs-accent: #60a5fa;
  --docs-shadow-lg: 0 18px 40px rgba(2, 8, 23, 0.38);
  --docs-shadow-md: 0 10px 24px rgba(2, 8, 23, 0.3);
  --method-get: #22c55e;
  --method-post: #ff8f1f;
  --method-put: #3b82f6;
  --method-patch: #a855f7;
  --method-delete: #ef4444;
  --method-neutral: #64748b;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 28%),
    linear-gradient(180deg, #182743 0%, var(--docs-bg) 34%, #132036 100%);
  color: var(--docs-text);
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: rgba(10, 15, 26, 0.88);
  border-bottom: 1px solid rgba(96, 165, 250, 0.16);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 200;
  height: 68px;
}

.header img {
  height: 36px;
  width: auto;
}

/* ── ReDoc overrides ─────────────────────────────────────────────────── */
redoc {
  display: block;
}

/* Sidebar — fix position to account for sticky header (68px) */
redoc > div > div:first-child {
  top: 68px !important;
  height: calc(100vh - 68px) !important;
  position: sticky !important;
  background:
    linear-gradient(180deg, rgba(17, 28, 47, 0.98) 0%, rgba(11, 18, 31, 0.98) 100%) !important;
  border-right: 1px solid var(--docs-border) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02) !important;
}

/* Sidebar surfaces */
redoc > div > div:first-child,
redoc > div > div:first-child > div,
redoc > div > div:first-child nav,
redoc > div > div:first-child ul,
redoc > div > div:first-child li {
  background-color: transparent !important;
  color: var(--docs-text-muted) !important;
}

redoc > div > div:first-child label,
redoc > div > div:first-child span,
redoc > div > div:first-child a {
  background-color: transparent !important;
}

/* Sidebar search */
redoc .sc-iapWAC.jwpqNI {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(180deg, rgba(18, 26, 41, 0.96) 0%, rgba(11, 17, 28, 0.98) 100%) !important;
  border: 1px solid rgba(71, 85, 105, 0.42) !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  margin: 12px 14px 20px !important;
  height: auto !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 20px rgba(2, 8, 23, 0.22) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 160ms ease !important;
}

redoc .sc-iapWAC.jwpqNI:focus-within {
  background: linear-gradient(180deg, rgba(21, 31, 49, 0.98) 0%, rgba(13, 20, 33, 1) 100%) !important;
  border-color: rgba(96, 165, 250, 0.52) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12), 0 10px 24px rgba(2, 8, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

redoc .search-input,
redoc input.search-input {
  background-color: transparent !important;
  color: var(--docs-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  padding: 9px 10px 9px 18px !important;
  height: 34px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif !important;
  text-align: left !important;
}

redoc .search-input::placeholder,
redoc input.search-input::placeholder {
  color: #8da0bf !important;
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif !important;
  font-weight: 500 !important;
}

redoc .search-input:focus,
redoc input.search-input:focus {
  outline: none !important;
}

redoc .search-icon,
redoc svg.search-icon {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 10px !important;
  width: 16px !important;
  height: 16px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

redoc svg.search-icon path,
redoc svg.search-icon circle,
redoc svg.search-icon polygon,
redoc div[role="search"] svg.search-icon path,
redoc div[role="search"] svg.search-icon circle,
redoc div[role="search"] svg.search-icon polygon {
  fill: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}

redoc .sc-iapWAC.jwpqNI:focus-within .search-icon,
redoc .sc-iapWAC.jwpqNI:focus-within svg.search-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Search dropdown results */
redoc [role="search"] {
  overflow: visible !important;
}

redoc [role="search"] .scrollbar-container {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
  width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  overflow: auto !important;
  padding: 0 !important;
}

redoc [role="search"] .scrollbar-container,
redoc [role="search"] .scrollbar-container > div,
redoc [role="search"] .sc-gvZAcH,
redoc [role="search"] .caIxEF {
  background: linear-gradient(180deg, rgba(20, 30, 48, 0.98) 0%, rgba(12, 19, 31, 0.98) 100%) !important;
  border: 1px solid rgba(71, 85, 105, 0.45) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 30px rgba(2, 8, 23, 0.4) !important;
  color: var(--docs-text) !important;
}

redoc [role="search"] .scrollbar-container > div,
redoc [role="search"] .sc-gvZAcH,
redoc [role="search"] .caIxEF {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
}

redoc [role="search"] .scrollbar-container,
redoc [role="search"] .scrollbar-container > div {
  min-width: 100% !important;
}

redoc [role="search"] [role="menuitem"],
redoc [role="search"] [role="option"] {
  background: transparent !important;
  color: var(--docs-text-muted) !important;
  border: 0 !important;
  width: 100% !important;
}

redoc [role="search"] [role="menuitem"] > div,
redoc [role="search"] [role="option"] > div {
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

redoc [role="search"] [role="menuitem"]:hover > div,
redoc [role="search"] [role="option"]:hover > div {
  background-color: rgba(125, 211, 252, 0.14) !important;
  color: var(--docs-text) !important;
}

redoc [role="search"] [role="menuitem"] .operation-type,
redoc [role="search"] [role="option"] .operation-type {
  margin-right: 8px !important;
}

redoc [role="search"] mark {
  background: rgba(255, 196, 0, 0.22) !important;
  color: #fff4c2 !important;
  border-radius: 4px !important;
  padding: 0 2px !important;
}

/* Sidebar groups and items */
redoc > div > div:first-child label[class*="-depth1"],
redoc > div > div:first-child .-depth1 {
  color: var(--docs-text) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

redoc > div > div:first-child label[class*="-depth2"],
redoc > div > div:first-child .-depth2,
redoc > div > div:first-child li,
redoc > div > div:first-child span {
  color: var(--docs-text-muted) !important;
}

redoc > div > div:first-child ul[class],
redoc > div > div:first-child li[class] {
  gap: 8px !important;
}

redoc > div > div:first-child label[class*="-depth1"] {
  padding: 14px 20px 10px !important;
  margin-top: 6px !important;
}

redoc > div > div:first-child label[class*="-depth2"] {
  border-left: 2px solid transparent !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 11px 18px !important;
  margin: 2px 10px 2px 0 !important;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

redoc > div > div:first-child label.active,
redoc > div > div:first-child .active {
  color: var(--docs-text) !important;
  background-color: transparent !important;
  border-left: 2px solid var(--docs-link) !important;
  transform: translateX(2px) !important;
}

redoc > div > div:first-child label.active span:not(.operation-type),
redoc > div > div:first-child .active span:not(.operation-type) {
  color: var(--docs-text) !important;
}

/* Sidebar active/hover */
redoc > div > div:first-child a:hover,
redoc > div > div:first-child label:hover,
redoc > div > div:first-child [class*="active"] {
  color: var(--docs-link) !important;
}

redoc > div > div:first-child label[class*="-depth2"]:hover {
  transform: translateX(2px) !important;
}

/* Sidebar operation methods */
redoc > div > div:first-child .operation-type {
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  min-height: 19px !important;
  border-radius: 999px !important;
  margin-right: 8px !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

redoc > div > div:first-child .operation-type.get {
  background-color: var(--method-get) !important;
}

redoc > div > div:first-child .operation-type.post {
  background-color: var(--method-post) !important;
}

redoc > div > div:first-child .operation-type.put,
redoc > div > div:first-child .operation-type.patch {
  background-color: var(--method-put) !important;
  color: #ffffff !important;
}

redoc > div > div:first-child .operation-type.patch {
  background-color: var(--method-patch) !important;
}

redoc > div > div:first-child .operation-type.delete {
  background-color: var(--method-delete) !important;
}

redoc > div > div:first-child .operation-type.options,
redoc > div > div:first-child .operation-type.head {
  background-color: var(--method-neutral) !important;
}

/* ReDoc SVG icons often keep a black fill; force them to inherit text color */
redoc svg[class*="sc-cwHptR"],
redoc svg[class*="sc-cwHptR"] path,
redoc svg[class*="sc-cwHptR"] polygon,
redoc svg[class*="sc-cwHptR"] circle {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Sidebar chevrons */
redoc > div > div:first-child svg[class*="sc-cwHptR"] {
  color: var(--docs-text-soft) !important;
  opacity: 0.9 !important;
}

redoc > div > div:first-child label:hover svg[class*="sc-cwHptR"],
redoc > div > div:first-child .active svg[class*="sc-cwHptR"] {
  color: var(--docs-link) !important;
}

/* Main-content helper icons */
redoc .api-content svg[class*="sc-cwHptR"] {
  color: var(--docs-text-muted) !important;
}

redoc .api-content .sc-kzqdkY.fZRtWb svg[class*="sc-cwHptR"] {
  color: #7ee787 !important;
}

redoc .api-content .sc-kzqdkY.kokIwB svg[class*="sc-cwHptR"] {
  color: #ff9b93 !important;
}

/* Main content background — navy */
redoc > div > div:nth-child(2),
redoc > div > div:nth-child(2) > div,
redoc > div > div:nth-child(2) > div > div {
  background-color: var(--docs-bg) !important;
}

/* Right panel (code samples) — all children consistently dark navy */
redoc > div > div:last-child,
redoc > div > div:last-child > div,
redoc > div > div:last-child > div > div,
redoc > div > div:last-child section,
redoc > div > div:last-child [class] {
  background-color: var(--docs-panel) !important;
}

/* Code block inside right panel — slightly darker */
redoc > div > div:last-child pre,
redoc > div > div:last-child pre > code {
  background-color: #080c14 !important;
}

/* ReDoc sample tabs — remove white/blue striping and keep one navy surface */
redoc .react-tabs__tab-list,
redoc .react-tabs__tab,
redoc .react-tabs__tab--selected,
redoc .react-tabs__tab-panel,
redoc .react-tabs__tab-panel--selected,
redoc .react-tabs__tab-list::before,
redoc .react-tabs__tab-list::after {
  background-color: #0f1726 !important;
}

redoc .react-tabs__tab-list {
  border-bottom: 1px solid #0f1726 !important;
}

redoc .react-tabs__tab {
  border: 1px solid #0f1726 !important;
  color: #BCBCBC !important;
}

redoc .react-tabs__tab--selected {
  color: #F5F5F5 !important;
  box-shadow: none !important;
}

redoc .react-tabs__tab-panel,
redoc .react-tabs__tab-panel--selected {
  border: 1px solid #0f1726 !important;
  box-shadow: none !important;
}

/* Example block internals — keep one consistent navy surface */
redoc .react-tabs__tab-panel--selected,
redoc .react-tabs__tab-panel--selected > div,
redoc .react-tabs__tab-panel--selected div,
redoc .react-tabs__tab-panel--selected ul,
redoc .react-tabs__tab-panel--selected li,
redoc .react-tabs__tab-panel--selected pre,
redoc .react-tabs__tab-panel--selected button {
  background-color: #0f1726 !important;
  border-color: #0f1726 !important;
}

redoc .react-tabs__tab-panel--selected code,
redoc .react-tabs__tab-panel--selected .hoverable,
redoc .react-tabs__tab-panel--selected [class*="collapsible"],
redoc .react-tabs__tab-panel--selected [class*="collapsed"] {
  background-color: transparent !important;
}

/* ReDoc right example wrappers discovered in live DOM */
redoc .sc-iGgWBj.sc-gsFSXq.lbpUdJ.bOFhJE,
redoc .sc-dlWCHZ.jLxaiG,
redoc .sc-kWtpeL.koYpNM,
redoc .sc-hHOBiw.fAZrna {
  background-color: var(--docs-panel) !important;
  border-color: var(--docs-panel) !important;
}

redoc .sc-kbousE.ccKipA,
redoc a[href*="redocly.com"] {
  background: transparent !important;
  color: var(--docs-text-soft) !important;
}

/* Headlines in main content */
redoc h1,
redoc h2,
redoc h3,
redoc h4,
redoc h5 {
  color: #F5F5F5 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Main content readability — ReDoc leaves many text nodes on dark default colors */
redoc .redoc-wrap,
redoc .api-content,
redoc .api-content > div,
redoc .api-content table,
redoc .api-content tbody,
redoc .api-content tr,
redoc .api-content td,
redoc .api-content th,
redoc .api-content div,
redoc .api-content i {
  color: #F5F5F5 !important;
}

redoc .api-content p,
redoc .api-content td,
redoc .api-content th,
redoc .api-content li,
redoc .api-content label,
redoc .api-content small,
redoc .api-content span {
  color: #D9E2FF !important;
}

/* Schema/meta tokens */
redoc .api-content span[class*="property"],
redoc .api-content span[class*="name"] {
  color: #64EBFF !important;
}

redoc .api-content span[class*="gFAWRd"],
redoc .api-content span[class*="cfxfcM"],
redoc .api-content .sc-cWSHoV {
  color: #BCBCBC !important;
}

redoc .api-content span[class*="fxwrCY"] {
  color: #8CB3FF !important;
}

redoc .api-content span[class*="ddjGPC"] {
  color: #F5F5F5 !important;
}

/* Required and status labels need brighter contrast on navy */
redoc .api-content .required-label,
redoc .api-content div[class*="hRJfrW"],
redoc .api-content div[class*="ecPEgm"] {
  color: #FF9B93 !important;
}

redoc .api-content strong,
redoc .api-content strong[class*="dSIIpw"] {
  color: #F5F5F5 !important;
}

redoc .api-content button {
  color: #D9E2FF !important;
}

redoc .api-content button[class*="hIUJlX"] {
  color: #BCBCBC !important;
}

redoc .api-content button[class*="kzqdkY"] {
  color: #F5F5F5 !important;
}

redoc .api-content button[class*="fZRtWb"] {
  color: #7EE787 !important;
}

redoc .api-content button[class*="kokIwB"] {
  color: #FF9B93 !important;
}

/* Footer credit should also remain readable */
redoc a[href*="redocly.com"] {
  color: #BCBCBC !important;
}

/* Body text */
redoc p,
redoc span,
redoc td,
redoc th,
redoc li,
redoc label,
redoc div {
  font-family: 'Montserrat', sans-serif !important;
}

redoc p,
redoc td,
redoc th,
redoc li,
redoc label {
  color: #BCBCBC !important;
}

/* inline code / type labels */
redoc code {
  color: #64EBFF !important;
  background-color: rgba(0, 230, 255, 0.06) !important;
}

/* Links */
redoc a {
  color: #64A1FF !important;
}
redoc a:hover {
  color: #1E90FF !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #080c14;
}
::-webkit-scrollbar-thumb {
  background: #244677;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1E90FF;
}

/* Sidebar scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #080c14;
}
::-webkit-scrollbar-thumb {
  background: #244677;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1E90FF;
}

/* Operation badges — ensure text is always readable */
.http-verb {
  font-family: 'SF Mono', 'Fira Code', monospace !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  color: #FFFFFF !important;
}

redoc .http-verb,
redoc .http-verb.post,
redoc span.http-verb,
redoc span.http-verb.post {
  color: #FFFFFF !important;
}

/* Required badge */
.required-label {
  color: #f0453a !important;
}

/* Schema property names */
span[class*="property-name"] {
  color: #64EBFF !important;
}

/* Code samples tab bar */
[class*="tab-header"] {
  background-color: #0f1726 !important;
  border-bottom: 1px solid #0f1726 !important;
}

/* Response code pills */
[class*="response-code"] {
  font-family: 'SF Mono', 'Fira Code', monospace !important;
}