/* Moleqlar-Branding für die Swagger-UI.
   Wird über openapi/branding/index.html zusätzlich zur mitgelieferten
   swagger-ui.css / index.css geladen (siehe docker-compose.yml).

   --mq-brand  = Flächen (Topbar, Execute-Button), immer dunkel.
   --mq-accent = Text/Rahmen; kippt im Dark Mode (html.dark-mode) auf einen
                 hellen Ton, damit nichts dunkel auf dunkel steht. */

:root {
  --mq-brand: #212446;
  --mq-brand-deep: #0a153f;
  --mq-brand-soft: #3a3f6e;
  --mq-accent: #212446;
}

html.dark-mode {
  --mq-accent: #a9b0e2;
  --mq-brand-soft: #4a5090;
}

/* --- Topbar: Markenfarbe + Moleqlar-Logo statt Swagger-Logo ---
   Die zweite Regel ist nötig, weil die Swagger-UI im Dark Mode mit
   `html.dark-mode .swagger-ui .topbar` eine höhere Spezifität mitbringt. */
.swagger-ui .topbar,
html.dark-mode .swagger-ui .topbar {
  background-color: var(--mq-brand);
  border-bottom: 3px solid var(--mq-brand-deep);
  padding: 14px 0;
}

.swagger-ui .topbar .topbar-wrapper a.link {
  display: block;
  width: 210px;
  max-width: 55vw;
  height: 34px;
  background: url("./logo-white.svg") left center / contain no-repeat;
  text-indent: -9999px; /* evtl. vorhandener Textknoten */
  overflow: hidden;
}

/* Swagger-eigenes Logo (img oder inline-svg) ausblenden */
.swagger-ui .topbar .topbar-wrapper a.link img,
.swagger-ui .topbar .topbar-wrapper a.link svg,
.swagger-ui .topbar .topbar-wrapper a.link span {
  display: none;
}

/* Spec-URL ist per SWAGGER_JSON fest verdrahtet -> Explore-Leiste ausblenden */
.swagger-ui .topbar .download-url-wrapper {
  display: none;
}

/* Dark-Mode-Umschalter bleibt erhalten, nur sichtbar auf der Markenfarbe */
.swagger-ui .topbar .dark-mode-toggle button svg {
  fill: #ffffff;
}

/* --- Kopfbereich --- */
.swagger-ui .info .title {
  color: var(--mq-accent);
}

.swagger-ui .info .title small.version-stamp {
  background-color: var(--mq-brand);
}

.swagger-ui .info a,
.swagger-ui .info a:hover {
  color: var(--mq-brand-soft);
}

.swagger-ui .scheme-container {
  box-shadow: 0 1px 3px rgba(33, 36, 70, 0.18);
}

/* --- Buttons --- */
.swagger-ui .btn.authorize {
  color: var(--mq-accent);
  border-color: var(--mq-accent);
}

.swagger-ui .btn.authorize svg {
  fill: var(--mq-accent);
}

.swagger-ui .btn.execute {
  background-color: var(--mq-brand);
  border-color: var(--mq-brand);
  color: #ffffff;
}

.swagger-ui .btn.execute:hover {
  background-color: var(--mq-brand-soft);
  border-color: var(--mq-brand-soft);
}

/* --- Abschnitts- und Modellüberschriften --- */
.swagger-ui .opblock-tag,
.swagger-ui section.models h4,
.swagger-ui .model-title {
  color: var(--mq-accent);
}

/* --- Partner-SOP unterhalb der API-Referenz ---
   Eigener Namensraum (.mq-sop*), damit nichts aus der Swagger-UI ueberschrieben
   wird. Inhalt wird von index.html aus sop.html nachgeladen; die Farben folgen
   denselben Variablen wie das uebrige Branding und kippen im Dark Mode mit. */

.mq-sop {
  --mq-sop-fg: #3b4151;
  --mq-sop-muted: #61687d;
  --mq-sop-bg: #fafafa;
  --mq-sop-surface: #ffffff;
  --mq-sop-border: #d8dce6;

  border-top: 3px solid var(--mq-brand);
  background: var(--mq-sop-bg);
  color: var(--mq-sop-fg);
  padding: 40px 20px 72px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

html.dark-mode .mq-sop {
  --mq-sop-fg: #d6d9e3;
  --mq-sop-muted: #9aa1b5;
  --mq-sop-bg: #1b1b1b;
  --mq-sop-surface: #252525;
  --mq-sop-border: #3d4152;
}

.mq-sop-inner {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 20px;
}

.mq-sop h1,
.mq-sop h2,
.mq-sop h3,
.mq-sop h4 {
  color: var(--mq-accent);
  font-family: sans-serif;
  line-height: 1.3;
  margin: 1.8em 0 0.6em;
}

.mq-sop h1 { font-size: 30px; margin-top: 0; }
.mq-sop h2 { font-size: 22px; border-bottom: 1px solid var(--mq-sop-border); padding-bottom: 6px; }
.mq-sop h3 { font-size: 17px; }
.mq-sop h4 { font-size: 15px; }

.mq-sop p,
.mq-sop li { color: var(--mq-sop-fg); }
.mq-sop ol,
.mq-sop ul { padding-left: 22px; margin: 0.6em 0; }
.mq-sop li { margin: 0.3em 0; }

.mq-sop a { color: var(--mq-brand-soft); }

.mq-sop code {
  font-family: monospace;
  font-size: 12px;
  background: var(--mq-sop-surface);
  border: 1px solid var(--mq-sop-border);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.mq-sop pre {
  background: var(--mq-brand-deep);
  color: #e6e8f2;
  border-radius: 4px;
  padding: 14px 16px;
  overflow-x: auto;      /* lange Zeilen scrollen im Block, nicht die Seite */
  margin: 0.8em 0;
}

.mq-sop pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  white-space: pre;
  font-size: 12.5px;
}

/* Tabellen koennen breit werden -> Scroll im eigenen Container */
.mq-sop-table {
  overflow-x: auto;
  margin: 0.9em 0;
  border: 1px solid var(--mq-sop-border);
  border-radius: 4px;
  background: var(--mq-sop-surface);
}

.mq-sop table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.mq-sop th,
.mq-sop td {
  border-bottom: 1px solid var(--mq-sop-border);
  padding: 8px 12px;
  vertical-align: top;
}

.mq-sop thead th {
  background: var(--mq-brand);
  color: #ffffff;
  font-weight: 600;
  white-space: nowrap;
}

.mq-sop tbody tr:last-child td { border-bottom: 0; }

/* Inhaltsverzeichnis: mehrspaltig, damit die 15 Abschnitte nicht die halbe
   Seite fuellen, bevor der Text beginnt. */
.mq-sop-toc {
  background: var(--mq-sop-surface);
  border: 1px solid var(--mq-sop-border);
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 28px;
}

.mq-sop-toc ul {
  columns: 3 220px;
  column-gap: 28px;
  margin: 0;
  padding-left: 0;
  list-style: none;   /* die Abschnittsnummern stecken schon im Titeltext */
  font-size: 13px;
}

.mq-sop-toc li { break-inside: avoid; }
.mq-sop-toc a { color: var(--mq-brand-soft); text-decoration: none; }
.mq-sop-toc a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .mq-sop { padding: 28px 0 48px; }
  .mq-sop-inner { padding: 0 14px; }
  .mq-sop h1 { font-size: 24px; }
}