/* ── GridX Connect palette (matches the transactional emails) ───────────── */
:root {
  --gxc-ink:      #1a1a2e;   /* headings */
  --gxc-body:     #333333;
  --gxc-muted:    #6c757d;
  --gxc-accent:   #0d6efd;
  --gxc-surface:  #f8f9fa;
  --gxc-line:     #e9ecef;
}

/* ── Topbar ─────────────────────────────────────────────────────────────────
   Swagger ships a near-black bar. Our wordmark is black, so the bar is
   repainted white with the same hairline border the emails use. */
.swagger-ui .topbar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--gxc-line);
  padding: 14px 0;
}

/* 🔴 Hide Swagger's own SVG logo. Without this the stock green mark PAINTS FIRST
   and is then swapped by a MutationObserver — a visible logo flash on every load. */
.swagger-ui .topbar a.link svg,
.swagger-ui .topbar .topbar-wrapper a svg { display: none; }

/* The plugin injects our logo with a hard-coded height=40 and no class of its own.
   At 1454x300 that lands ~194px wide, which suits the bar; cap it for small screens. */
.swagger-ui .topbar a.link img,
.swagger-ui .topbar .topbar-wrapper img {
  height: 34px !important;
  width: auto;
  max-width: 210px;
}

/* The "explore" box lets anyone point the page at an arbitrary spec URL. On a
   published, single-spec page it is noise at best and confusing at worst. */
.swagger-ui .topbar .download-url-wrapper { display: none; }

/* ── Header block ───────────────────────────────────────────────────────── */
.swagger-ui .info { margin: 32px 0; }
.swagger-ui .info .title { color: var(--gxc-ink); font-weight: 700; }
.swagger-ui .info .title small.version-stamp { background-color: var(--gxc-accent); }
.swagger-ui .info li, .swagger-ui .info p, .swagger-ui .info table { color: var(--gxc-body); }
.swagger-ui .info a { color: var(--gxc-accent); }
.swagger-ui .info a:hover { color: var(--gxc-ink); }

/* Make the contract preamble readable rather than a wall of grey. */
.swagger-ui .info .description h2 {
  color: var(--gxc-ink);
  font-size: 17px;
  margin-top: 28px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gxc-line);
}
.swagger-ui .info .description code {
  background: var(--gxc-surface);
  border: 1px solid var(--gxc-line);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--gxc-ink);
}

/* ── Authorize ──────────────────────────────────────────────────────────────
   This is the button every new integrator needs to find first, so it carries
   the accent colour rather than Swagger's green. */
.swagger-ui .btn.authorize {
  background-color: var(--gxc-accent);
  border-color: var(--gxc-accent);
  color: #ffffff;
}
.swagger-ui .btn.authorize:hover { background-color: #0b5ed7; border-color: #0b5ed7; }
.swagger-ui .btn.authorize svg { fill: #ffffff; }

/* ── Operations ─────────────────────────────────────────────────────────── */
.swagger-ui .opblock-tag {
  color: var(--gxc-ink);
  border-bottom: 1px solid var(--gxc-line);
}
.swagger-ui .opblock.opblock-get {
  border-color: var(--gxc-accent);
  background: rgba(13, 110, 253, 0.04);
}
.swagger-ui .opblock.opblock-get .opblock-summary-method { background: var(--gxc-accent); }
.swagger-ui .opblock .opblock-summary-path { color: var(--gxc-ink); }
.swagger-ui .opblock-description-wrapper p { color: var(--gxc-body); }

/* ── Chrome we do not want on a published page ──────────────────────────── */
.swagger-ui .scheme-container { box-shadow: none; border-bottom: 1px solid var(--gxc-line); }
.swagger-ui section.models { border-color: var(--gxc-line); }
.swagger-ui section.models h4 { color: var(--gxc-ink); }