/* Channel Pilot Next — Seller API Swagger UI Theme
   Matches the CPN app (Buefy/Bulma) look & feel */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ── Brand tokens (from next-frontend/assets/styles/base/colors.scss) ── */
:root {
  --cp-primary: #bad700;
  --cp-primary-dark: #93ab2c;
  --cp-primary-light: #d1ed74;
  --cp-primary-lighter: #f3f7e9;
  --cp-primary-invert: #242424;
  --cp-text: #242424;
  --cp-text-secondary: #484848;
  --cp-grey: #bebebe;
  --cp-grey-light: #dedede;
  --cp-light: #f2f2f2;
  --cp-bg: #f2f2f2;
  --cp-white: #ffffff;
  --cp-white-bis: #f2f2f2;
  --cp-link: #3771d1;
  --cp-link-light: #75abff;
  --cp-success: #61c568;
  --cp-success-dark: #31983d;
  --cp-warning: #fad543;
  --cp-danger: #f9776e;
  --cp-danger-dark: #c0453f;
  --cp-orange: #f8ad24;
  /* Elevation (from next-frontend elevation.scss) */
  --cp-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 2px 0px rgba(0,0,0,0.12);
  --cp-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
}

/* ── Base — force grey background like the app ────────────── */
html,
body {
  background: var(--cp-bg) !important;
  margin: 0;
  font-size: 14px;
}

.swagger-ui {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--cp-text);
  font-size: 14px;
  background: var(--cp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.swagger-ui * {
  font-family: inherit;
}

/* ── Topbar — matches CPHeader.vue layout ─────────────────── */
/* Green 44px strip with white card floating on top */
.swagger-ui .topbar {
  background: linear-gradient(var(--cp-primary) 44px, var(--cp-bg) 44px);
  padding: 8px 80px 12px;
  height: auto;
}

/* White card — matches .navbar.cp-header */
.swagger-ui .topbar .wrapper {
  background: var(--cp-white);
  border: 1px solid var(--cp-grey);
  border-radius: 4px;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swagger-ui .topbar .topbar-wrapper {
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 100%;
}

/* Hide swagger logo and spec URL */
.swagger-ui .topbar-wrapper img,
.swagger-ui .topbar-wrapper svg {
  display: none;
}

.swagger-ui .topbar-wrapper .link .url {
  display: none;
}

/* Hide the spec URL link (../swagger) wherever it appears */
.swagger-ui a.link[href="./swagger"],
.swagger-ui a.link[href="../swagger"] {
  display: none;
}

/* Brand text — matches .cp-brand.is-size-4 exactly */
.swagger-ui .topbar-wrapper .link {
  color: var(--cp-primary-invert);
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.5px;
  text-decoration: none;
  pointer-events: none;
  user-select: none;
  width: 100%;
  text-align: center;
}

.swagger-ui .topbar-wrapper .link::before {
  content: "Channel Pilot Next";
}

/* Hide the explore bar */
.swagger-ui .topbar .download-url-wrapper {
  display: none;
}

/* ── Content wrapper — dashboard-style layout ─────────────── */
.swagger-ui .wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;
  box-sizing: border-box;
}

/* Topbar wrapper uses its own padding */
.swagger-ui .topbar .wrapper {
  padding-left: 0;
  padding-right: 0;
}

/* ── Info wrapper — transparent, no double container ───────── */
/* .information-container also has .wrapper class — keep margin: auto for centering */
.swagger-ui .information-container {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ── Info card — same width as endpoints, .card.has-elevation-0 ── */
.swagger-ui .info {
  background: var(--cp-white);
  border: 1px solid var(--cp-grey);
  border-radius: 4px;
  margin: 24px 0;
  padding: 40px 40px 32px;
  box-shadow: none;
}

.swagger-ui .info hgroup.main {
  margin: 0 0 16px;
}

.swagger-ui .info .title {
  color: var(--cp-text);
  font-weight: 700;
  font-size: 24px;
  margin: 0;
}

.swagger-ui .info .title small.version-stamp {
  background: var(--cp-primary);
  color: var(--cp-primary-invert);
  font-weight: 600;
  font-style: normal;
  border-radius: 4px;
  vertical-align: middle;
  padding: 3px 8px;
  font-size: 11px;
}

.swagger-ui .info .description p,
.swagger-ui .info .description li {
  color: var(--cp-text-secondary);
  line-height: 1.6;
  font-size: 14px;
}

.swagger-ui .info .description ul {
  padding-left: 20px;
  margin: 8px 0;
}

.swagger-ui .info .description code {
  background: var(--cp-light);
  color: var(--cp-text);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
}

.swagger-ui .info .description a,
.swagger-ui .renderedMarkdown a {
  color: var(--cp-link);
}

/* ── Links ────────────────────────────────────────────────── */
.swagger-ui a {
  color: var(--cp-link);
}

.swagger-ui a:hover {
  color: var(--cp-link-light);
}

/* ── Scheme/server container — clean read-only display ─────── */
.swagger-ui .scheme-container {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Hide the "Servers" label and the dropdown arrow */
.swagger-ui .servers-title {
  display: none;
}

.swagger-ui .schemes-server-container .servers select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  color: var(--cp-text-secondary);
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  cursor: default;
  pointer-events: none;
}

/* Hide auth scheme selector if present */
.swagger-ui .scheme-container .schemes {
  display: none;
}

/* ── Tag groups (sections) — card-like containers ─────────── */
.swagger-ui .opblock-tag-section {
  margin-bottom: 8px;
}

.swagger-ui .opblock-tag {
  border-bottom: 1px solid var(--cp-grey-light);
  font-weight: 700;
  font-size: 16px;
  color: var(--cp-text);
  padding: 12px 16px;
}

.swagger-ui .opblock-tag:hover {
  background: var(--cp-primary-lighter);
}

.swagger-ui .opblock-tag small {
  color: var(--cp-text-secondary);
  font-weight: 400;
  font-size: 13px;
}

/* ── Operations — Bulma card style with elevation-0 ───────── */
.swagger-ui .opblock {
  border-radius: 4px;
  box-shadow: none;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 4px;
}

/* GET */
.swagger-ui .opblock.opblock-get {
  background: var(--cp-white);
  border-color: var(--cp-link-light);
}
.swagger-ui .opblock.opblock-get .opblock-summary-method {
  background: var(--cp-link-light);
  color: var(--cp-white);
}
.swagger-ui .opblock.opblock-get .opblock-summary {
  border-color: var(--cp-link-light);
}
.swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span::after {
  background: var(--cp-link-light);
}

/* POST */
.swagger-ui .opblock.opblock-post {
  background: var(--cp-white);
  border-color: var(--cp-success);
}
.swagger-ui .opblock.opblock-post .opblock-summary-method {
  background: var(--cp-success);
  color: var(--cp-white);
}
.swagger-ui .opblock.opblock-post .opblock-summary {
  border-color: var(--cp-success);
}
.swagger-ui .opblock.opblock-post .tab-header .tab-item.active h4 span::after {
  background: var(--cp-success);
}

/* PUT */
.swagger-ui .opblock.opblock-put {
  background: var(--cp-white);
  border-color: var(--cp-warning);
}
.swagger-ui .opblock.opblock-put .opblock-summary-method {
  background: var(--cp-warning);
  color: var(--cp-primary-invert);
}
.swagger-ui .opblock.opblock-put .opblock-summary {
  border-color: var(--cp-warning);
}
.swagger-ui .opblock.opblock-put .tab-header .tab-item.active h4 span::after {
  background: var(--cp-warning);
}

/* DELETE */
.swagger-ui .opblock.opblock-delete {
  background: var(--cp-white);
  border-color: var(--cp-danger);
}
.swagger-ui .opblock.opblock-delete .opblock-summary-method {
  background: var(--cp-danger);
  color: var(--cp-white);
}
.swagger-ui .opblock.opblock-delete .opblock-summary {
  border-color: var(--cp-danger);
}
.swagger-ui .opblock.opblock-delete .tab-header .tab-item.active h4 span::after {
  background: var(--cp-danger);
}

/* PATCH */
.swagger-ui .opblock.opblock-patch {
  background: var(--cp-white);
  border-color: var(--cp-orange);
}
.swagger-ui .opblock.opblock-patch .opblock-summary-method {
  background: var(--cp-orange);
  color: var(--cp-primary-invert);
}
.swagger-ui .opblock.opblock-patch .opblock-summary {
  border-color: var(--cp-orange);
}
.swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span::after {
  background: var(--cp-orange);
}

/* Method badge */
.swagger-ui .opblock .opblock-summary-method {
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  min-width: 64px;
  text-align: center;
  padding: 6px 10px;
}

/* Path */
.swagger-ui .opblock .opblock-summary-path {
  font-weight: 600;
  font-size: 14px;
  color: var(--cp-text);
}

.swagger-ui .opblock .opblock-summary-description {
  color: var(--cp-text-secondary);
  font-size: 13px;
}

/* ── Parameters & responses ───────────────────────────────── */
.swagger-ui table thead tr th {
  color: var(--cp-text);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 2px solid var(--cp-grey-light);
}

.swagger-ui table tbody tr td {
  border-bottom: 1px solid var(--cp-light);
  font-size: 13px;
}

.swagger-ui .parameter__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--cp-text);
}

.swagger-ui .parameter__name.required::after {
  color: var(--cp-danger);
}

.swagger-ui .parameter__type {
  font-size: 12px;
  color: var(--cp-text-secondary);
}

/* ── Response codes ───────────────────────────────────────── */
.swagger-ui .responses-inner h4 {
  color: var(--cp-text);
  font-weight: 600;
  font-size: 14px;
}

.swagger-ui .response-col_status {
  font-weight: 700;
  font-size: 14px;
}

.swagger-ui .response-col_description {
  font-size: 13px;
}

/* ── Models — card style ──────────────────────────────────── */
.swagger-ui section.models {
  border: 1px solid var(--cp-grey);
  border-radius: 4px;
}

.swagger-ui section.models h4 {
  font-weight: 700;
  font-size: 16px;
  color: var(--cp-text);
}

.swagger-ui section.models .model-container {
  background: var(--cp-white);
  margin: 0 16px 8px;
  border-radius: 4px;
}

.swagger-ui .model-box {
  background: var(--cp-white);
}

/* ── Buttons — matches cp-button styles ───────────────────── */
.swagger-ui .btn {
  border-radius: 4px;
  font-weight: 600;
  font-family: inherit;
  font-size: 14px;
  transition: background-color 0.15s, border-color 0.15s;
}

/* Authorize — primary style */
.swagger-ui .btn.authorize {
  color: var(--cp-primary-invert);
  background: var(--cp-primary);
  border-color: var(--cp-primary-dark);
}

.swagger-ui .btn.authorize:hover {
  background: var(--cp-primary-dark);
}

.swagger-ui .btn.authorize svg {
  fill: var(--cp-primary-invert);
}

/* Execute — cp-button-optional style (dark blue) */
.swagger-ui .btn.execute {
  background: var(--cp-link);
  color: var(--cp-white);
  border-color: var(--cp-link);
}

.swagger-ui .btn.execute:hover {
  background: var(--cp-link-light);
  border-color: var(--cp-link-light);
}

/* Cancel */
.swagger-ui .btn.cancel {
  font-size: 14px;
  font-weight: 600;
}

/* Try-it-out — cp-button-alternative style (outline) */
.swagger-ui .try-out__btn {
  border: 1px solid var(--cp-text);
  color: var(--cp-text);
  font-weight: 600;
  background: transparent;
}

.swagger-ui .try-out__btn:hover {
  background: var(--cp-text);
  color: var(--cp-white);
}

/* ── Authorization dialog ─────────────────────────────────── */
.swagger-ui .dialog-ux .modal-ux-header h3 {
  color: var(--cp-text);
  font-weight: 700;
  font-size: 20px;
}

.swagger-ui .dialog-ux .modal-ux {
  border-radius: 4px;
  border: 1px solid var(--cp-grey);
  box-shadow: var(--cp-elevation-2);
}

.swagger-ui .dialog-ux .modal-ux-header {
  border-bottom: 1px solid var(--cp-grey-light);
}

/* ── Inputs — Bulma-style ─────────────────────────────────── */
.swagger-ui input[type=text],
.swagger-ui input[type=password],
.swagger-ui textarea,
.swagger-ui select {
  border: 1px solid var(--cp-grey);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 12px;
  color: var(--cp-text);
  background: var(--cp-white);
  transition: border-color 0.15s;
}

.swagger-ui input[type=text]:focus,
.swagger-ui input[type=password]:focus,
.swagger-ui textarea:focus,
.swagger-ui select:focus {
  border-color: var(--cp-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(186, 215, 0, 0.25);
}

/* ── Code blocks ──────────────────────────────────────────── */
.swagger-ui .highlight-code,
.swagger-ui .microlight {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 13px;
  border-radius: 4px;
}

/* ── Expand/collapse arrows ───────────────────────────────── */
.swagger-ui .expand-operation svg {
  width: 16px;
  height: 16px;
}

/* ── Loading bar ──────────────────────────────────────────── */
.swagger-ui .loading-container .loading::before {
  border-color: var(--cp-primary);
}

/* ── Hide validator badge (bottom right) ──────────────────── */
.swagger-ui .float-right {
  display: none;
}