/* ═══════════════════════════════════════════════════════
   Swagger UI theme overrides
   -----------------------------------------------------------------------------
   Extracted from api.html, where they lived inside a forked copy of the shared
   stylesheet. They were already entirely variable-driven, so retheming was a
   token remap rather than a rewrite -- the values below now resolve against
   assets/tokens.css like everything else.

   The !important throughout is not carelessness: Swagger UI ships its own
   stylesheet with high-specificity selectors, and this file has to win.
   ═══════════════════════════════════════════════════════ */

/* -- SWAGGER WRAPPER -- */
.swagger-wrap {
  flex: 1;
  padding: 0;
}

#swagger-ui {
  font-family: var(--sans) !important;
}

#swagger-ui .swagger-ui {
  background: var(--bg) !important;
  color: var(--text) !important;
}

#swagger-ui .swagger-ui .topbar {
  display: none !important;
}

#swagger-ui .swagger-ui .info {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 32px 24px !important;
  margin: 0 !important;
}

#swagger-ui .swagger-ui .info .title {
  color: var(--navy) !important;
  font-family: var(--heading) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

#swagger-ui .swagger-ui .info p,
#swagger-ui .swagger-ui .info li,
#swagger-ui .swagger-ui .info a {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
}

#swagger-ui .swagger-ui .scheme-container {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
}

#swagger-ui .swagger-ui .servers > label > select {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}

#swagger-ui .swagger-ui .servers > label {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

#swagger-ui .swagger-ui .opblock-tag {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--navy) !important;
  font-family: var(--heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

#swagger-ui .swagger-ui .opblock-tag:hover {
  background: var(--bg) !important;
}
#swagger-ui .swagger-ui .opblock-tag p {
  color: var(--muted) !important;
  font-size: 13px !important;
}

#swagger-ui .swagger-ui .opblock {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  margin: 6px 0 !important;
  box-shadow: var(--shadow) !important;
}

#swagger-ui .swagger-ui .opblock:hover {
  border-color: var(--border-strong) !important;
}

#swagger-ui .swagger-ui .opblock .opblock-summary {
  background: transparent !important;
  border-bottom: none !important;
}

#swagger-ui .swagger-ui .opblock .opblock-summary-description {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
}

#swagger-ui .swagger-ui .opblock .opblock-summary-path {
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
}

#swagger-ui .swagger-ui .opblock.opblock-get .opblock-summary-method {
  background: var(--blue-bg) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(53, 116, 184, 0.3) !important;
}
#swagger-ui .swagger-ui .opblock.opblock-post .opblock-summary-method {
  background: var(--green-bg) !important;
  color: var(--green) !important;
  border: 1px solid rgba(45, 157, 94, 0.3) !important;
}
#swagger-ui .swagger-ui .opblock.opblock-put .opblock-summary-method {
  background: var(--yellow-bg) !important;
  color: var(--yellow) !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
}
#swagger-ui .swagger-ui .opblock.opblock-delete .opblock-summary-method {
  background: var(--red-bg) !important;
  color: var(--red) !important;
  border: 1px solid rgba(192, 57, 43, 0.3) !important;
}

#swagger-ui .swagger-ui .opblock-summary-method {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  border-radius: 4px !important;
  min-width: 60px !important;
  text-align: center !important;
}

#swagger-ui .swagger-ui .opblock.opblock-get {
  border-color: rgba(53, 116, 184, 0.2) !important;
}
#swagger-ui .swagger-ui .opblock.opblock-post {
  border-color: rgba(45, 157, 94, 0.2) !important;
}
#swagger-ui .swagger-ui .opblock.opblock-put {
  border-color: rgba(184, 134, 11, 0.2) !important;
}
#swagger-ui .swagger-ui .opblock.opblock-delete {
  border-color: rgba(192, 57, 43, 0.2) !important;
}

#swagger-ui .swagger-ui .opblock-body {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
}

#swagger-ui .swagger-ui .opblock-description-wrapper p,
#swagger-ui .swagger-ui .opblock-external-docs-wrapper p,
#swagger-ui .swagger-ui .opblock-title_normal p {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
}

#swagger-ui .swagger-ui .tab li {
  color: var(--muted) !important;
}
#swagger-ui .swagger-ui .tab li.active {
  color: var(--text) !important;
}

#swagger-ui .swagger-ui table.headers td,
#swagger-ui .swagger-ui .parameters-col_description p {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
}

#swagger-ui .swagger-ui table thead tr th,
#swagger-ui .swagger-ui table thead tr td {
  background: var(--bg) !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-color: var(--border) !important;
}

#swagger-ui .swagger-ui table tbody tr td {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

#swagger-ui .swagger-ui .parameter__name,
#swagger-ui .swagger-ui .parameter__type {
  font-family: var(--mono) !important;
  color: var(--text) !important;
}

#swagger-ui .swagger-ui .parameter__in {
  color: var(--teal) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
}

#swagger-ui .swagger-ui input[type="text"],
#swagger-ui .swagger-ui textarea {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
}

#swagger-ui .swagger-ui input[type="text"]:focus,
#swagger-ui .swagger-ui textarea:focus {
  border-color: var(--teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--teal-dim) !important;
}

#swagger-ui .swagger-ui .btn {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  border-radius: 5px !important;
  transition: all 0.15s !important;
}

#swagger-ui .swagger-ui .btn:hover {
  background: var(--card) !important;
  border-color: var(--border-strong) !important;
}

#swagger-ui .swagger-ui .btn.execute {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
  font-weight: 600 !important;
}

#swagger-ui .swagger-ui .btn.execute:hover {
  background: var(--navy-dark) !important;
  border-color: var(--navy-dark) !important;
}

#swagger-ui .swagger-ui .model-title {
  color: var(--text) !important;
  font-family: var(--sans) !important;
}

#swagger-ui .swagger-ui .model {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
}

#swagger-ui .swagger-ui .model .property.primitive {
  color: var(--blue) !important;
}
#swagger-ui .swagger-ui .model span {
  color: var(--muted) !important;
}

#swagger-ui .swagger-ui .responses-table td {
  color: var(--text) !important;
}
#swagger-ui .swagger-ui .response-col_status {
  color: var(--text) !important;
  font-family: var(--mono) !important;
}

#swagger-ui .swagger-ui .highlight-code .microlight {
  background: var(--navy-darker) !important;
  color: #e8edf2 !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  border: 1px solid var(--navy-dark) !important;
  border-radius: 4px !important;
  padding: 16px !important;
}

#swagger-ui .swagger-ui section.models {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

#swagger-ui .swagger-ui section.models h4 {
  color: var(--navy) !important;
  font-family: var(--heading) !important;
}

#swagger-ui .swagger-ui section.models .model-container {
  background: var(--bg) !important;
  border-color: var(--border) !important;
}

#swagger-ui .swagger-ui .authorization__btn svg {
  fill: var(--muted) !important;
}
#swagger-ui .swagger-ui .authorization__btn:hover svg {
  fill: var(--teal) !important;
}

#swagger-ui .swagger-ui .wrapper {
  padding: 24px !important;
}

#swagger-ui .swagger-ui .info .base-url {
  font-family: var(--mono) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}

#swagger-ui .swagger-ui label {
  color: var(--muted) !important;
  font-family: var(--sans) !important;
}

#swagger-ui .swagger-ui .dialog-ux .modal-ux-header {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
}

#swagger-ui .swagger-ui .dialog-ux .modal-ux-header h3 {
  color: var(--navy) !important;
  font-family: var(--heading) !important;
}

#swagger-ui .swagger-ui .dialog-ux .modal-ux-content {
  background: var(--card) !important;
  color: var(--text) !important;
}

#swagger-ui .swagger-ui .dialog-ux .modal-ux {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

#swagger-ui .swagger-ui .auth-wrapper .authorize {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}

#swagger-ui .swagger-ui .scopes h2 {
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════
   Dark mode
   -----------------------------------------------------------------------------
   Swagger UI 5 hardcodes fills inside its inline SVG icons (expand carets, lock
   glyphs) and sets some colours through  attributes on the elements
   themselves. Neither is reachable from this stylesheet, so a full dark port
   would leave black-on-black arrows and invisible padlocks — worse than not
   theming it at all.

   So v1 pins the Swagger panel to the LIGHT surface in both themes and frames it
   as an embedded document. That reads as intentional — the API explorer is a
   distinct tool inside the page — rather than as a half-finished theme. The
   chrome around it still follows the toggle.

   Revisit if Swagger ships real theming, or if we replace it.
   ═══════════════════════════════════════════════════════ */
:root[data-theme="dark"] .swagger-wrap {
  background: var(--hd-ink-050);
  border-top: var(--hairline) solid var(--hd-ink-200);
}
:root[data-theme="dark"] #swagger-ui {
  --surface-canvas: #f4f4f4;
  --surface-raised: #ffffff;
  --surface-sunken: #eceef2;
  --text-primary: #212121;
  --text-secondary: #5a6076;
  --text-muted: #666d80;
  --border-subtle: #dde0e7;
  --border-default: #b9bdc9;
  --text-link: #3b53a4;
  --bg: #f4f4f4;
  --card: #ffffff;
  --text: #212121;
  --muted: #666d80;
  --border: #dde0e7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .swagger-wrap {
    background: var(--hd-ink-050);
    border-top: var(--hairline) solid var(--hd-ink-200);
  }
  :root:not([data-theme="light"]) #swagger-ui {
    --surface-canvas: #f4f4f4;
    --surface-raised: #ffffff;
    --surface-sunken: #eceef2;
    --text-primary: #212121;
    --text-secondary: #5a6076;
    --text-muted: #666d80;
    --border-subtle: #dde0e7;
    --border-default: #b9bdc9;
    --text-link: #3b53a4;
    --bg: #f4f4f4;
    --card: #ffffff;
    --text: #212121;
    --muted: #666d80;
    --border: #dde0e7;
    color-scheme: light;
  }
}