/* Webkul theme overrides for the Nelmio/Swagger API doc pages.
   Loaded after bundles/nelmioapidoc/style.css — only overrides, no duplication.
   Colors/values pulled from shopify-mp/app/public/admin.css (the real admin theme):
   --themeColor: #0C7484, page bg: #F1F4F9, borders: #CCD3DF, text: #000/#444, font: Inter. */

:root {
  --webkul-primary: #0C7484;
  --webkul-primary-dark: #0a5f6c;
  --webkul-primary-tint: #e0f5f7;
  --webkul-bg: #F1F4F9;
  --webkul-surface: #FFFFFF;
  --webkul-border: #CCD3DF;
  --webkul-text: #000000;
  --webkul-text-muted: #444444;
  --webkul-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--webkul-bg);
  color: var(--webkul-text);
  font-family: var(--webkul-font);
  margin-top: 0;
}

.swagger-ui,
.swagger-ui * {
  font-family: var(--webkul-font) !important;
}

/** HEADER **/
/* no top bar: the logo sits in the title row instead */
header:before {
  display: none;
}

/* absolute (not fixed) so the logo scrolls with the title row it sits beside */
header #logo {
  position: absolute;
  top: 30px;
  left: auto;
  right: 60px;
}

header #logo img {
  height: 40px;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* Swagger UI switches the title row dark; the logo is black-on-transparent, so flip it to white */
@media (prefers-color-scheme: dark) {
  header #logo img {
    filter: invert(1);
  }
}

/** INFO / TITLE **/
#swagger-ui.api-platform .info .title {
  color: var(--webkul-primary);
  font-weight: 700;
}

#swagger-ui.api-platform .info li,
#swagger-ui.api-platform .info p,
#swagger-ui.api-platform .info a {
  color: var(--webkul-text-muted);
}

#swagger-ui.api-platform .info a {
  color: var(--webkul-primary);
}

#swagger-ui.api-platform .information-container.wrapper {
  border-bottom-color: var(--webkul-border);
}

/** SCHEME / SERVERS SELECTOR **/
.swagger-ui .scheme-container {
  background-color: var(--webkul-surface);
  border: 1px solid var(--webkul-border);
  border-radius: 6px;
  box-shadow: none;
}

/** TAG GROUPS **/
#swagger-ui.api-platform .opblock-tag {
  border-bottom: 1px solid var(--webkul-border);
  color: var(--webkul-text);
}

#swagger-ui.api-platform .opblock-tag:hover {
  background-color: var(--webkul-primary-tint);
  transform: none;
}

#swagger-ui.api-platform .opblock-tag small {
  color: var(--webkul-text-muted);
}

/** CARDS / OPERATION BLOCKS **/
#swagger-ui.api-platform .opblock {
  background-color: var(--webkul-surface);
  border-radius: 8px !important;
  border: 1px solid var(--webkul-border) !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

#swagger-ui.api-platform .opblock .opblock-summary-description {
  color: var(--webkul-text-muted);
}

#swagger-ui.api-platform .opblock-summary-method {
  border-radius: 4px;
}

/** SECTION HEADERS (parameters / responses inside an opblock) **/
#swagger-ui.api-platform .opblock-section-header {
  background-color: var(--webkul-surface);
  border-bottom: 1px solid var(--webkul-border);
}

#swagger-ui.api-platform .opblock-section-header label,
#swagger-ui.api-platform .opblock-section-header h4 {
  color: var(--webkul-text);
}

/** PARAMETERS / RESPONSE TABLES **/
.swagger-ui table thead tr td,
.swagger-ui table thead tr th {
  color: var(--webkul-text-muted);
  border-bottom: 1px solid var(--webkul-border);
}

.swagger-ui .parameter__name {
  color: var(--webkul-text);
}

.swagger-ui .parameter__type {
  color: var(--webkul-primary);
}

.swagger-ui .response-col_status {
  color: var(--webkul-text);
}

/** MODELS / SCHEMA BOX **/
.swagger-ui section.models {
  border: 1px solid var(--webkul-border);
  background-color: var(--webkul-surface);
  border-radius: 8px;
}

.swagger-ui section.models.is-open h4 {
  border-bottom: 1px solid var(--webkul-border);
}

.swagger-ui .model-box {
  background-color: var(--webkul-primary-tint);
  border-radius: 6px;
}

.swagger-ui .model-title {
  color: var(--webkul-text);
}

/** CODE / SAMPLE BLOCKS **/
.swagger-ui .highlight-code,
.swagger-ui .microlight {
  border-radius: 6px;
}

/** BUTTONS **/
#swagger-ui.api-platform .btn.execute {
  background-color: var(--webkul-primary);
  border-color: var(--webkul-primary);
  border-radius: 6px;
  color: #fff;
}

#swagger-ui.api-platform .btn.execute:hover {
  background-color: var(--webkul-primary-dark);
  border-color: var(--webkul-primary-dark);
}

#swagger-ui.api-platform .btn {
  border-radius: 6px;
  border-color: var(--webkul-border);
  color: var(--webkul-text);
}

#swagger-ui.api-platform .btn.authorize {
  color: var(--webkul-primary);
  border-color: var(--webkul-primary);
}

#swagger-ui.api-platform .btn.authorize svg {
  fill: var(--webkul-primary);
}

/** TABS (request body content-type tabs, etc.) — mirrors .wk-zenith-tabs li.active in admin.css **/
.swagger-ui .tab li.active {
  border-bottom: 2px solid var(--webkul-primary);
}

.swagger-ui .tab li.active a,
.swagger-ui .tab li a:hover {
  color: var(--webkul-primary);
}

/** LINKS **/
#swagger-ui.api-platform a.nostyle,
.swagger-ui .opblock-tag small,
.swagger-ui a.opblock-tag {
  color: var(--webkul-text);
}

.swagger-ui a {
  color: var(--webkul-primary);
}

/** SCROLLBARS — mirrors .scrollbar-custom in admin.css **/
.swagger-ui ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.swagger-ui ::-webkit-scrollbar-track {
  background: var(--webkul-bg);
  border-radius: 8px;
}

.swagger-ui ::-webkit-scrollbar-thumb {
  background-color: var(--webkul-border);
  border-radius: 8px;
}