/*
  parat-tema.css - Røde Kors-tema for Parat API-dokumentation.

  Ligger som et LAG oven på det vendorede swagger-ui.css, som skal forblive
  bit-identisk med swagger-ui-dist@5.32.13 (se docs/manual i parat-ai,
  story S17605) - derfor overrides her, aldrig redigering i dist-filerne.

  Farver og typografi følger Røde Kors Digitalt Designsystem (2024):
  Kors Rød #e30a0b, hover #aa0a0b, Off black #373538, Røde Kors Toning
  #fef5f5, Light Grey #f7f7f7, Grey #e7e5e7, Sage #73665b, Green #68ac12.

  Selvbærenhed: ingen webfonts eller CDN-kald. Gotham er licensbelagt og
  vendores derfor ikke; Verdana er designsystemets officielle fallback og
  findes lokalt på alle platforme.
*/

:root {
  --rk-roed: #e30a0b;
  --rk-roed-hover: #aa0a0b;
  --rk-toning: #fef5f5;
  --rk-off-black: #373538;
  --rk-sage: #73665b;
  --rk-dark-grey: #989598;
  --rk-grey: #e7e5e7;
  --rk-light-grey: #f7f7f7;
  --rk-groen: #68ac12;
  --rk-font: "Gotham", Verdana, Geneva, sans-serif;
}

/* ---------- Typografi ----------
   swagger-ui.css sætter eksplicit font-family:sans-serif på hver af disse
   selektorer (udtrukket fra dist-filen) - de skal derfor alle overrides,
   arv fra .swagger-ui alene er ikke nok. Monospace-flader (stier, kode,
   curl) røres bevidst IKKE. */
.swagger-ui,
.swagger-ui .btn,
.swagger-ui .btn.cancel,
.swagger-ui button,
.swagger-ui input,
.swagger-ui optgroup,
.swagger-ui select,
.swagger-ui textarea,
.swagger-ui .dialog-ux .modal-ux-content h4,
.swagger-ui .dialog-ux .modal-ux-content p,
.swagger-ui .dialog-ux .modal-ux-header h3,
.swagger-ui .download-contents,
.swagger-ui .errors-wrapper hgroup h4,
.swagger-ui .info a,
.swagger-ui .info h1,
.swagger-ui .info h2,
.swagger-ui .info h3,
.swagger-ui .info h4,
.swagger-ui .info h5,
.swagger-ui .info li,
.swagger-ui .info p,
.swagger-ui .info table,
.swagger-ui .info .title,
.swagger-ui .json-schema-2020-12-expand-deep-button,
.swagger-ui .json-schema-2020-12__title,
.swagger-ui label,
.swagger-ui .model-deprecated-warning,
.swagger-ui .model-title,
.swagger-ui .opblock-description-wrapper,
.swagger-ui .opblock-description-wrapper h4,
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .opblock-external-docs-wrapper,
.swagger-ui .opblock-external-docs-wrapper h4,
.swagger-ui .opblock-external-docs-wrapper p,
.swagger-ui .opblock-title_normal,
.swagger-ui .opblock-title_normal h4,
.swagger-ui .opblock-title_normal p,
.swagger-ui .opblock .opblock-section-header h4,
.swagger-ui .opblock .opblock-section-header > label,
.swagger-ui .opblock .opblock-summary-description,
.swagger-ui .opblock .opblock-summary-method,
.swagger-ui .opblock-tag,
.swagger-ui .opblock-tag small,
.swagger-ui .parameter__name,
.swagger-ui .response-col_links,
.swagger-ui .response-col_status,
.swagger-ui .responses-inner h4,
.swagger-ui .responses-inner h5,
.swagger-ui .scheme-container .schemes > .schemes-server-container > label,
.swagger-ui .scopes h2,
.swagger-ui section h3,
.swagger-ui section.models h4,
.swagger-ui section.models h5,
.swagger-ui .servers > label,
.swagger-ui table thead tr td,
.swagger-ui table thead tr th,
.swagger-ui .tab li,
.swagger-ui .topbar a,
.swagger-ui .topbar .download-url-wrapper .download-url-button {
  font-family: var(--rk-font);
}

/* ---------- Grundflade ---------- */
body {
  margin: 0;
  background: var(--rk-light-grey);
}

.swagger-ui .info .title,
.swagger-ui .info h1,
.swagger-ui .info h2,
.swagger-ui .info h3,
.swagger-ui .info p,
.swagger-ui .info li,
.swagger-ui .opblock-tag,
.swagger-ui section h3,
.swagger-ui section.models h4 {
  color: var(--rk-off-black);
}

/* Version-badges ved titlen: Sage med hvid tekst (godkendt kombination),
   OAS-badget i designsystemets Green */
.swagger-ui .info .title small {
  background: var(--rk-sage);
}
.swagger-ui .info .title small.version-stamp {
  background: var(--rk-groen);
}

/* Links i beskrivelses-/markdownflader: Kors Rød med mørk hover */
.swagger-ui .info a,
.swagger-ui .markdown a,
.swagger-ui .opblock-description-wrapper a,
.swagger-ui .renderedMarkdown a {
  color: var(--rk-roed);
}
.swagger-ui .info a:hover,
.swagger-ui .markdown a:hover,
.swagger-ui .opblock-description-wrapper a:hover,
.swagger-ui .renderedMarkdown a:hover {
  color: var(--rk-roed-hover);
}

/* ---------- Topbar: co-branding-logo øverst til venstre på hvid ---------- */
.swagger-ui .topbar {
  background-color: #ffffff;
  border-top: 4px solid var(--rk-roed);
  border-bottom: 1px solid var(--rk-grey);
  padding: 10px 0;
}

/* Skjul Swagger-logoet (inline-SVG i bundlet) og vis Røde Kors-korset */
.swagger-ui .topbar .topbar-wrapper .link svg,
.swagger-ui .topbar .topbar-wrapper .link img {
  display: none;
}
.swagger-ui .topbar .topbar-wrapper .link {
  order: -2;
  flex: 0 0 auto;
  max-width: none;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-left: 46px;
  background: url("rk-logo.svg") no-repeat left center;
  background-size: 34px 34px;
  text-decoration: none;
}
.swagger-ui .topbar .topbar-wrapper .link::after {
  content: "Røde Kors";
  font-family: var(--rk-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: var(--rk-off-black);
  white-space: nowrap;
}

/* Sidenavn tæt på logoet (anbefaling fra logo-reglerne), som flex-element
   mellem logo (order -2) og miljøvælger (order 2) */
.swagger-ui .topbar .topbar-wrapper::after {
  content: "Parat API-dokumentation";
  order: -1;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--rk-grey);
  font-family: var(--rk-font);
  font-size: 16px;
  line-height: 24px;
  color: var(--rk-off-black);
  white-space: nowrap;
}

/* ---------- Miljøvælgeren i topbaren ---------- */
.swagger-ui .topbar .download-url-wrapper {
  order: 2;
}
/* Dansk etiket i stedet for bundlets engelske "Select a definition" */
.swagger-ui .topbar .download-url-wrapper .select-label span {
  display: none;
}
.swagger-ui .topbar .download-url-wrapper .select-label::before {
  content: "Miljø:";
  font-family: var(--rk-font);
  font-weight: 700;
  font-size: 16px;
  color: var(--rk-off-black);
  margin-right: 10px;
}
.swagger-ui .topbar .download-url-wrapper .select-label {
  width: auto;
  justify-content: flex-end;
}
.swagger-ui .topbar .download-url-wrapper .select-label select {
  border: 2px solid var(--rk-grey);
  background: #ffffff;
  color: var(--rk-off-black);
  box-shadow: none;
  flex: 0 0 auto;
  width: 200px;
}
.swagger-ui .topbar .download-url-wrapper .select-label select:focus {
  border-color: var(--rk-roed);
  outline: none;
}

/* Dark mode-toggleren skjules: Røde Kors-identiteten er en lys flade, og
   bundlets dark mode ville lægge sig halvt over temaet. Selve
   dark mode-klassen neutraliseres i swagger-initializer.js. */
.swagger-ui .topbar .dark-mode-toggle {
  display: none;
}

/* ---------- Autorisationsbjælken: Røde Kors Toning som varm flade ---------- */
.swagger-ui .scheme-container {
  background: var(--rk-toning);
  box-shadow: none;
  border-bottom: 1px solid var(--rk-grey);
}

/* ---------- Knapper ----------
   Hierarki fra designsystemet: Udfør (Execute) er sektionens primære
   handling (rød, fyldt); Authorize er sekundær (outline). Kun én primær
   knap pr. sektion. */
.swagger-ui .btn {
  border-radius: 4px;
}
.swagger-ui .btn.execute {
  background-color: var(--rk-roed);
  border-color: var(--rk-roed);
  color: #ffffff;
}
.swagger-ui .btn.execute:hover,
.swagger-ui .btn.execute:focus {
  background-color: var(--rk-roed-hover);
  border-color: var(--rk-roed-hover);
}
.swagger-ui .btn.authorize {
  background-color: transparent;
  color: var(--rk-roed);
  border: 2px solid var(--rk-roed);
}
.swagger-ui .btn.authorize span {
  color: var(--rk-roed);
}
/* Hængelås-ikonet tegnes med fill="currentColor" - farven styres derfor
   via color på svg-elementet (som i dist-CSS'ens egen regel), ikke fill */
.swagger-ui .btn.authorize svg {
  color: var(--rk-roed);
}
.swagger-ui .btn.authorize:hover {
  background-color: var(--rk-roed);
}
.swagger-ui .btn.authorize:hover span {
  color: #ffffff;
}
.swagger-ui .btn.authorize:hover svg {
  color: #ffffff;
}

/* ---------- Fokus og inputfelter (WCAG: synlig fokusmarkering) ---------- */
.swagger-ui .btn:focus-visible,
.swagger-ui a:focus-visible,
.swagger-ui select:focus-visible {
  outline: 2px solid var(--rk-roed-hover);
  outline-offset: 2px;
}
.swagger-ui input[type="text"]:focus,
.swagger-ui input[type="email"]:focus,
.swagger-ui input[type="password"]:focus,
.swagger-ui textarea:focus {
  border-color: var(--rk-roed);
  outline: none;
}

/* ---------- Smalle skærme: sidenavnet viger, logo og miljøvælger består ---------- */
@media (max-width: 700px) {
  .swagger-ui .topbar .topbar-wrapper::after {
    display: none;
  }
}