/**
 * Swagger UI overrides — TrueDialog Help Center
 * -----------------------------------------------------------------------------
 * Loaded AFTER Swagger UI 5's default stylesheet (swagger-ui.css), so these
 * rules win. No third-party skin is used. Two jobs:
 *   1. Align the UI to the brand using the site's :root CSS variables.
 *   2. Neutralize the parent KnowAll theme's global article styles
 *      (`.hkb-article__content table`, `pre`, `code`) that bleed into Swagger UI
 *      because the shortcode renders inside `.hkb-article__content`.
 *
 * No !important: every selector is scoped under `.td-swagger-ui .swagger-ui`,
 * which already carries more class-specificity than KnowAll's single-class
 * `.hkb-article__content …` rules, so it wins on the cascade alone.
 */

/* ---- 1. Structural ---- */

.td-swagger-ui,
.td-swagger-ui .swagger-ui .wrapper {
	max-width: none;
	width: 100%;
	padding: 0;
}

.td-swagger-ui .swagger-ui .topbar,
.td-swagger-ui .swagger-ui .scheme-container {
	display: none;
}

.td-swagger-ui .swagger-ui .info {
	margin: 12px 0 24px;
}

/* The version badges next to the title ("2.1", "OAS 3.0") are Swagger
   <pre class="version"> elements. Clear KnowAll's .hkb-article__content pre
   background/padding bleed so the badges render normally. Scoped to .info so it
   never touches the code-block <pre>. */
.td-swagger-ui .swagger-ui .info .title pre {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* ---- 1b. Typography ----
   Use the site font (Lato) for all non-monospaced text so the docs match the
   rest of the Help Center, and re-assert monospace where Swagger needs it. The
   base rule covers most text via inheritance; the listed selectors override the
   places Swagger hard-codes Titillium Web / Open Sans. Change 'Lato' here if the
   site font ever changes. */
.td-swagger-ui .swagger-ui,
.td-swagger-ui .swagger-ui .info .title,
.td-swagger-ui .swagger-ui .opblock-tag,
.td-swagger-ui .swagger-ui .opblock-tag small,
.td-swagger-ui .swagger-ui .opblock .opblock-summary-description,
.td-swagger-ui .swagger-ui .opblock-description-wrapper,
.td-swagger-ui .swagger-ui .renderedMarkdown p,
.td-swagger-ui .swagger-ui .markdown p,
.td-swagger-ui .swagger-ui .response-col_description,
.td-swagger-ui .swagger-ui .opblock-section-header h4,
.td-swagger-ui .swagger-ui .opblock-section-header > label,
.td-swagger-ui .swagger-ui .tab li,
.td-swagger-ui .swagger-ui table thead tr td,
.td-swagger-ui .swagger-ui table thead tr th,
.td-swagger-ui .swagger-ui .parameter__name,
.td-swagger-ui .swagger-ui .btn,
.td-swagger-ui .swagger-ui select,
.td-swagger-ui .swagger-ui label {
	font-family: 'Lato', sans-serif;
}

/* Monospaced elements keep a mono stack (paths, methods, types, code). */
.td-swagger-ui .swagger-ui .opblock-summary-method,
.td-swagger-ui .swagger-ui .opblock-summary-path,
.td-swagger-ui .swagger-ui .opblock-summary-path__deprecated,
.td-swagger-ui .swagger-ui .parameter__type,
.td-swagger-ui .swagger-ui .response-col_status,
.td-swagger-ui .swagger-ui .prop-type,
.td-swagger-ui .swagger-ui code,
.td-swagger-ui .swagger-ui pre,
.td-swagger-ui .swagger-ui .microlight {
	font-family: 'Source Code Pro', monospace;
}

/* Normalise description paragraphs (KnowAll bleeds its larger body size in). */
.td-swagger-ui .swagger-ui .renderedMarkdown p,
.td-swagger-ui .swagger-ui .markdown p {
	font-size: 15px;
	line-height: 1.5;
}

/* Operation summary description (Swagger default is 13px). */
.td-swagger-ui .swagger-ui .opblock .opblock-summary-description {
	font-size: 14px;
}

/* ---- 2. Code blocks ----
   KnowAll forces `.hkb-article__content pre { background:#f5f5f5; padding:25px;
   font-size:90%; color:#4d4d4d }` onto Swagger's highlighted <pre class="microlight">.
   Restore Swagger UI's dark example block and clear the per-token bleed. */

.td-swagger-ui .swagger-ui pre,
.td-swagger-ui .swagger-ui code {
	margin: 0;
	border: 0;
}

/* The code block's colours come from SwaggerUIBundle's `syntaxHighlight.theme`
   (set in the shortcode), which Swagger applies as inline styles on .microlight.
   We only round the corners here — overriding the inline colours would require
   !important. */
.td-swagger-ui .swagger-ui .highlight-code {
	border-radius: 5px;
	overflow: hidden;
}
.td-swagger-ui .swagger-ui .highlight-code > .microlight {
	margin: 0;
	font-size: 12px;
}
/* Clear the theme's global inline-code background so only the syntaxHighlight
   colours show (no light boxes behind the text). `color: inherit` makes the
   block's <code> use the <pre>'s themed light base colour instead of the site's
   dark `code` colour — so plain (uncoloured) text stays readable. The token
   <span>s carry their own inline colours, which we leave untouched. */
.td-swagger-ui .swagger-ui .highlight-code code {
	color: inherit;
	background: transparent;
	padding: 0;
	border: 0;
}
.td-swagger-ui .swagger-ui .highlight-code .microlight span {
	background: transparent;
	padding: 0;
	border: 0;
}

/* Inline code inside descriptions */
.td-swagger-ui .swagger-ui .renderedMarkdown code {
	padding: 1px 6px;
	color: var( --color-header );
	background: var( --color-code-background );
	border-radius: 5px;
}

/* ---- 3. Tables ----
   Neutralize KnowAll's `.hkb-article__content table` bleed: cell background
   (#fafafa), thead background (#f2f2f2), odd-row striping (#fff), column
   dividers (border-right), the outer border and the 22px bottom margin. Then
   apply a clean, on-brand header + subtle row separators. */

/* Every element is specified explicitly so no parent (KnowAll) or child theme
   rule can bleed in. Borders use a dark, translucent neutral (like Swagger's
   default) so they stay visible on the coloured opblock backgrounds. */
.td-swagger-ui .swagger-ui table {
	width: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}
.td-swagger-ui .swagger-ui table thead,
.td-swagger-ui .swagger-ui table tbody {
	border: 0;
	background: transparent;
}
.td-swagger-ui .swagger-ui table thead tr,
.td-swagger-ui .swagger-ui table tbody tr {
	border: 0;
	background: transparent;
}

/* Header cells (Swagger renders them as <td class="col_header">, not <th>) */
.td-swagger-ui .swagger-ui table thead tr td,
.td-swagger-ui .swagger-ui table thead tr th {
	color: var( --color-header );
	font-weight: 600;
	background: transparent;
	border: 0;
	border-bottom: 2px solid rgba( 59, 65, 81, 0.4 );
	padding: 10px 12px;
}

/* Body cells (odd/even listed explicitly to beat KnowAll's striping) */
.td-swagger-ui .swagger-ui table tbody tr td,
.td-swagger-ui .swagger-ui table tbody tr th,
.td-swagger-ui .swagger-ui table tbody tr:nth-child(odd) td,
.td-swagger-ui .swagger-ui table tbody tr:nth-child(even) td {
	color: inherit;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba( 59, 65, 81, 0.2 );
	padding: 8px 12px;
}
.td-swagger-ui .swagger-ui table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---- 4. Brand chrome ---- */

/* Section (tag) headers */
.td-swagger-ui .swagger-ui .opblock-tag {
	color: var( --color-header );
	border-bottom: 1px solid var( --color-td-dark-beige );
}
.td-swagger-ui .swagger-ui .opblock-tag:hover {
	background: var( --color-td-light-beige );
}

/* Links in the description/info content only — NOT the endpoint path anchors
   (.opblock-summary-path is an <a>, so a broad rule would colour the paths). */
.td-swagger-ui .swagger-ui .info a,
.td-swagger-ui .swagger-ui .info a:visited,
.td-swagger-ui .swagger-ui .renderedMarkdown a {
	color: var( --color-td-dark-orange );
}
.td-swagger-ui .swagger-ui .info .title {
	color: var( --color-header );
}

/* Operation rows: site rounding + beige borders (method bar colors untouched) */
.td-swagger-ui .swagger-ui .opblock {
	border-radius: 5px;
	border-color: var( --color-td-dark-beige );
}
.td-swagger-ui .swagger-ui .opblock .opblock-summary {
	border-radius: 5px;
}

/* Parameters / Responses section headers */
.td-swagger-ui .swagger-ui .opblock-section-header {
	background: var( --color-td-light-beige );
	box-shadow: none;
	border-radius: 5px;
}
.td-swagger-ui .swagger-ui .opblock-section-header h4,
.td-swagger-ui .swagger-ui .opblock-section-header > label {
	color: var( --color-header );
}

/* Active tab accent (Example Value | Schema, etc.) -> brand orange */
.td-swagger-ui .swagger-ui .tab li.active a {
	color: var( --color-header );
}
.td-swagger-ui .swagger-ui .tab li.active::after,
.td-swagger-ui .swagger-ui .tab li.active a::after {
	background: var( --color-td-dark-orange );
}

/* Buttons / interactive accents -> brand orange */
.td-swagger-ui .swagger-ui .btn {
	border-radius: 5px;
}
.td-swagger-ui .swagger-ui .btn.authorize,
.td-swagger-ui .swagger-ui .btn.execute {
	background: var( --color-td-dark-orange );
	border-color: var( --color-td-dark-orange );
	color: #fff;
}
.td-swagger-ui .swagger-ui .btn.authorize svg {
	fill: #fff;
}

/* Inputs focus -> brand */
.td-swagger-ui .swagger-ui input:focus,
.td-swagger-ui .swagger-ui select:focus,
.td-swagger-ui .swagger-ui textarea:focus {
	border-color: var( --color-td-light-orange );
	outline-color: var( --color-td-light-orange );
}

/* Models / Schemas section */
.td-swagger-ui .swagger-ui section.models {
	border-radius: 5px;
	border-color: var( --color-td-dark-beige );
	background: var( --color-td-light-beige );
}
.td-swagger-ui .swagger-ui section.models .model-container {
	border-radius: 5px;
	background: transparent;
}

/* ---- 5. Misc KnowAll guards ---- */
.td-swagger-ui .swagger-ui img {
	max-width: none;
}