/* Overwrite the scalar font variable */
:root {
    --scalar-font: "Roboto", sans-serif;
    --scalar-custom-header-height: 56px;
    --scalar-micro: 14px;
}


tt {
    font-family: var(--scalar-font-code);
    background-color: var(--scalar-background-2);
    border-radius: 2px;
    box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
    font-size: 13px;
    padding: 0 3px;
}
/* Custom Airlock header */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #1C465E;
    height: var(--scalar-custom-header-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Hide right column in documentation */
.section-column:has(.scalar-reference-intro-clients) {
    display: none;
}

.light-mode {
    --scalar-color-1: #111827;
    --scalar-color-2: rgba(0, 0, 0, 0.6);
    --scalar-color-3: rgba(0, 0, 0, 0.4);
    --scalar-color-accent: #1F7099;
    --scalar-background-1: #f9fafb;
    --scalar-background-2: #f6f5f4;
    --scalar-background-3: #f1ede9;
    --scalar-background-accent: #5369d20f;
    --scalar-border-color: rgba(0, 0, 0, 0.08);
}

/* Sidebar dropdown / search hover surface */
.light-mode .scalar-api-reference .hover\:bg-b-2 {
    background: #ffffff;
}

.scalar-api-reference .hover\:bg-b-2 {
    background: var( --scalar-sidebar-search-background );
}

.scalar-api-reference .hover\:bg-b-2:hover {
    font-weight: bold;
}

.dark-mode {
    --scalar-color-1: rgba(255, 255, 255, 0.81);
    --scalar-color-2: rgba(255, 255, 255, 0.81);
    --scalar-color-3: rgba(255, 255, 255, 0.282);
    --scalar-color-accent: #8ab4f8;
    --scalar-background-1: #1F2937;
    --scalar-background-2: #111827;
    --scalar-background-3: #111827;
    --scalar-background-accent: lime;
    --scalar-border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .header {
    background-color: #000000;
}

.dark-mode .scalar-app code.hljs {
    color: #ffffff;
}

/* wrapping for text in last table cells */
.scalar-app .markdown td:last-of-type,
.scalar-app .markdown tr:last-of-type td {
    text-wrap: auto;
}

.scalar-app .markdown strong > code {
    color: var(--scalar-color-orange);
    font-weight: var(--scalar-semibold);
    font-family: var(--scalar-font);
}

.scalar-app .markdown a {
    color: var(--scalar-color-accent) !important;
}

.scalar-app .markdown blockquote {
    font-size:var(--scalar-paragraph) !important;
    font-weight: var(--scalar-regular) !important;
    margin-bottom: 16px !important;
}

/* Size columns to their content, and give the table its own horizontal scroll so a wide table (e.g. the
 * multi-column error-code tables in the introduction, whose long codes do not wrap because of the
 * word-break rule further down) scrolls internally instead of widening the whole page. display: block
 * makes the table a scrollable block; its rows still lay out as a table. */
.scalar-app .markdown table {
    table-layout: auto !important;
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* Collapsed response preview (div.markdown-summary): Scalar clamps it to a single line via
 * -webkit-line-clamp / white-space:nowrap, which only works on inline flow. The display:block rule
 * above also matches an error-code table inside the summary, defeating the clamp and dumping the whole
 * table as a multi-line wall. Flatten the table to inline within the summary so it truncates to one
 * clean line again (the expanded state uses a different container and is unaffected). */
.scalar-app .markdown-summary table,
.scalar-app .markdown-summary :is(thead, tbody, tr, th, td) {
    display: inline !important;
    border: 0 !important;
    padding: 0 !important;
}
.scalar-app .markdown-summary td:not(:last-child)::after {
    content: " ";
}


/* Font size for headings. Scalar 1.62.5 sizes markdown headings with a fixed font-size (h2 and h3 both
 * at 1.25rem) and no longer reads the --font-size custom property, so it must be set directly to keep a
 * visible hierarchy between heading levels (h2 > h3 > h4 ...). */
.scalar-app h1.section-header-label {
    font-size: 2rem;
}
.scalar-app .markdown h2 {
    font-size: 1.75rem !important;
}
.scalar-app .markdown h3 {
    font-size: 1.5rem !important;
}
.scalar-app .markdown h4 {
    font-size: 1.25rem !important;
}
.scalar-app .markdown h5 {
    font-size: 1.125rem !important;
}
.scalar-app .markdown h6 {
    font-size: 1rem !important;
    font-weight: 500 !important;
}

/* Introduction title header: Scalar lays out every section header in a two-column grid (left title,
 * right example). The introduction section has no example, so its right column stays empty and the
 * title is needlessly confined to the left half, wrapping (e.g. "... REST" / "API") on narrower windows.
 * Let the introduction header span the full width. Scoped to the introduction section, so operation
 * headers keep their two-column grid. */
.scalar-app .introduction-section .section-header-wrapper {
    grid-template-columns: 1fr !important;
}

/*
* Changed up margins so that negative space is set with margin-bottom for a more consistent vertical rhythm
*/
.scalar-app .markdown h2,
.scalar-app .markdown h3,
.scalar-app .markdown h4,
.scalar-app .markdown h5,
.scalar-app .markdown h6 {
    --markdown-spacing-sm: 16px;
    --scalar-refs-heading-spacing: 0;
}
.scalar-app div.markdown > *:last-child:not(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 32px !important;
}
/* Exception for compact descriptions (request body, and parameter / schema-property descriptions):
 * these must not inherit the main-content 32px vertical rhythm. .schema-card-description is the
 * container for array/object property descriptions (e.g. the "errors" attribute), which otherwise keeps
 * the 32px trailing margin above its child-attributes box. */
.scalar-app .request-body div.markdown > :not(h1, h2, h3, h4, h5, h6),
.scalar-app .property-description div.markdown > :not(h1, h2, h3, h4, h5, h6),
.scalar-app .schema-card-description div.markdown > :not(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0 !important;
}

/* Response descriptions are themselves div.markdown (.parameter-item-description in the left Responses
 * list, .response-description-markdown in the right example box), so they inherit the 32px last-child
 * rhythm and show an empty gap below plain-text descriptions. Zero only the trailing margin (the div +
 * :last-child selector is needed to out-specify the base rule; inter-paragraph spacing is margin-top
 * based and stays intact). */
.scalar-app div.parameter-item-description > *:last-child:not(h1, h2, h3, h4, h5, h6),
.scalar-app div.response-description-markdown > *:last-child:not(h1, h2, h3, h4, h5, h6) {
    margin-bottom: 0 !important;
}


/* Fixes misaligned of paragraph within a list */
.scalar-app .markdown li > p {
    display: inline;
}

/* ============================================================================
 * Airlock customization of the Scalar API-reference defaults.
 * The sidebar root is <aside class="t-doc__sidebar">. Scalar's Tailwind / Vue-scoped
 * styles are injected after this file, so several rules below need !important to win.
 * ==========================================================================*/

/* The Developer-Tools toolbar and the "Ask AI" / "Ask AI Agent" affordances are disabled via config
 * (showToolbar/showDeveloperTools: 'never' and per-source agent.disabled in index.html). Only the
 * "Generate MCP" sidebar entry has no config switch, so it is still hidden via CSS. */
.scalar-mcp-layer { display: none !important; }                    /* "Generate MCP" sidebar entry */

/* Prefix resource-return descriptions with a bold "Returns:" label
 * (the <div class="iam-resource-return"> we emit in operation descriptions). */
.scalar-app .markdown .iam-resource-return { line-height: 1.5; }
.scalar-app .markdown .iam-resource-return:before {
    content: "Returns:";
    font-weight: bold;
    display: inline-block;
    line-height: inherit;
    margin-right: 0.25em;
}

/* The first column of our <div class="iam-error-code"> tables always holds a technical error code
 * (emitted as plain text). Render it in the code font so it reads as code; the description column stays prose. */
.scalar-app .iam-error-code td:first-child {
    font-family: var(--scalar-font-code);
}

/* Grey Airlock sidebar theme, applied through Scalar's sidebar CSS variables (read on .t-doc__sidebar) */
.light-mode .t-doc__sidebar {
    --scalar-sidebar-background-1: #6b7280;
    --scalar-sidebar-item-hover-color: currentColor;
    --scalar-sidebar-item-hover-background: #4b5563;
    --scalar-sidebar-item-active-background: #4b5563;
    --scalar-sidebar-border-color: #9CA3AF;
    --scalar-sidebar-indent-border: #9CA3AF;
    --scalar-sidebar-indent-border-active: #9CA3AF;
    --scalar-sidebar-color-1: #ffffff;
    --scalar-sidebar-color-2: #ffffff;
    --scalar-sidebar-color-active: #ffffff;
    --scalar-sidebar-search-background: var(--scalar-background-2);
    --scalar-sidebar-search-border-color: var(--scalar-border-color);
}

.dark-mode .t-doc__sidebar {
    --scalar-sidebar-background-1: var(--scalar-background-1);
    --scalar-sidebar-item-hover-color: currentColor;
    --scalar-sidebar-item-hover-background: var(--scalar-background-2);
    --scalar-sidebar-item-active-background: var(--scalar-background-2);
    --scalar-sidebar-border-color: #9CA3AF;
    --scalar-sidebar-indent-border: #9CA3AF;
    --scalar-sidebar-indent-border-active: #9CA3AF;
    --scalar-sidebar-color-1: var(--scalar-color-1);
    --scalar-sidebar-color-2: var(--scalar-color-2);
    --scalar-sidebar-color-active: #ffffff;
    /* In dark mode background-2 is darker than the sidebar, so the search box would read as a dark-on-dark
     * block. Use a lighter raised surface and a visible border so it stands out as an input field. */
    --scalar-sidebar-search-background: #374151;
    --scalar-sidebar-search-border-color: #6b7280;
}

/* Dark-mode search box: the magnifier and placeholder inherit Scalar's faint color-3, which is barely
 * legible on the box. Lift them to the readable sidebar text color. :has(kbd) targets only the search
 * button (it carries the shortcut badge), not the navigation buttons. */
.dark-mode .t-doc__sidebar button:has(kbd),
.dark-mode .t-doc__sidebar button:has(kbd) svg {
    color: var(--scalar-color-2);
}

/* Document selector (Loginapp / Adminapp / Transaction Approval switcher).
 * Its button uses content colors (text-c-2, dark) which have poor contrast on the grey sidebar,
 * so bind it to the sidebar text color and give it a bordered-box look. */
.t-doc__sidebar .document-selector button {
    color: var(--scalar-sidebar-color-1);
    border: 1px solid var(--scalar-sidebar-border-color);
    border-radius: 6px;
    padding: 5px 8px;
}
.t-doc__sidebar .document-selector button:hover {
    color: var(--scalar-sidebar-color-1);
    background: var(--scalar-sidebar-item-hover-background);
}

/* HTTP method badges in the sidebar. Scalar renders them as plain colored text;
 * style them as Airlock pills (rounded, colored background per method). */
.t-doc__sidebar .sidebar-heading-type {
    border-radius: 8px;
    min-width: auto;
    height: auto;
    padding: 0 5px;
}
.t-doc__sidebar .sidebar-heading-type--get    { background: #E6F7FB !important; color: #004085 !important; }
.t-doc__sidebar .sidebar-heading-type--post   { background: #D1FAE5 !important; color: #065F46 !important; }
.t-doc__sidebar .sidebar-heading-type--put    { background: #E6F7FB !important; color: #004085 !important; }
.t-doc__sidebar .sidebar-heading-type--patch  { background: #E6F7FB !important; color: #004085 !important; }
.t-doc__sidebar .sidebar-heading-type--delete { background: #FFEBEB !important; color: #850000 !important; }

/* Sidebar section headers (Public / Public Authentication / ...). Scalar renders them as plain bold
 * items; make them stand out as uppercase, letter-spaced, muted labels with a divider above.
 * (The <li> is display:contents, so the divider/spacing must go on the inner button, not the list item.) */
.t-doc__sidebar .group\/sidebar-section > .group\/button > .group\/button-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.85;
}
.t-doc__sidebar .group\/sidebar-section > .group\/button {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--scalar-sidebar-border-color);
}

/* Hover: keep sidebar text white on a darker hover background (Scalar's hover utilities don't read the
 * --scalar-sidebar-item-hover-* vars, so the text otherwise falls back to the dark content color).
 * Exclude the method pills so they keep their own colors. */
.t-doc__sidebar a:hover,
.t-doc__sidebar .group\/button:hover {
    background-color: var(--scalar-sidebar-item-hover-background) !important;
    color: var(--scalar-sidebar-color-1) !important;
}
.t-doc__sidebar a:hover *:not(.sidebar-heading-type),
.t-doc__sidebar .group\/button:hover *:not(.sidebar-heading-type) {
    color: var(--scalar-sidebar-color-1) !important;
}

/* Property / parameter names (headers, body attributes) and response status codes: Scalar renders them
 * at font-weight 600 (semibold); show them at normal weight.
 * Scalar sets the weight via Vue-scoped selectors injected after this file, so !important is required. */
.scalar-app .property-name,
.scalar-app .parameter-item-name {
    font-weight: var(--scalar-regular) !important;
}

/* Scalar sets word-break: break-word on markdown table cells, which breaks long technical codes
 * (e.g. error codes like OAUTH2_AUTHORIZATION_SERVER_INVALID_AUTHORIZATION_REQUEST) mid-token. Use
 * normal breaking so codes stay intact - the table scrolls horizontally if needed. */
.scalar-app .markdown td,
.scalar-app .markdown th {
    word-break: normal !important;
}

/* Response description card: Scalar caps it at max-height: 3lh and scrolls it, truncating longer
 * descriptions (e.g. a list of possible next steps). Let it grow to show the full text. */
.scalar-app .response-description-markdown {
    max-height: none !important;
}

/* Search box keyboard-shortcut hint (the kbd badge): it inherits the white sidebar text color but sits
 * on the light search-field background (--scalar-background-2), so it was nearly invisible. Bind it to
 * the content color instead, which contrasts with that background in both light and dark mode. */
.t-doc__sidebar kbd {
    color: var(--scalar-color-2) !important;
}

/* Sidebar footer ("Powered by Scalar" + color-mode toggle): Scalar gives it no top padding or border,
 * so the toggle crowds the last nav item and looks like an overlap on our opaque grey sidebar. Add
 * breathing room and a divider (same border variable as the section-header dividers). */
aside.t-doc__sidebar .darklight-reference {
    padding-top: 12px;
    border-top: 1px solid var(--scalar-sidebar-border-color);
}

/* Deprecated operations in the search results: Scalar tags their title with the class
 * `text-decoration-line` (only for deprecated operation entries) but ships no rule for it, so the
 * intended strike-through is lost. Restore it. */
.scalar-app .text-decoration-line {
    text-decoration: line-through;
}

/* HTTP method in the search results: Scalar renders it in the default (sans-serif) font; show it in the
 * code font so it reads as code, like the path next to it. Scoped to search results (the only place the
 * method is not already monospace); each result row has exactly one .uppercase element (the method). */
.scalar-app [id^="search-result-"] .uppercase {
    font-family: var(--scalar-font-code);
}

/* Response example box (right column): it is narrow, and its horizontal scrollbar is hover-only, so long
 * content is cut off with no obvious way to reach it. Let it wrap instead. Applies only to the response
 * example card (the one carrying a response description), not the request/curl card.
 *   - the response body code (JSON) wraps instead of scrolling;
 *   - long inline codes (e.g. next-step codes) break to the next line;
 *   - error-code tables fit the box and wrap their cells (overriding the page-level table scroll rule). */
.scalar-app .scalar-card:has(.response-description-markdown) .scalar-code-block pre {
    white-space: pre-wrap !important;
    word-break: break-word !important;
}
.scalar-app .response-description-markdown :is(tt, code) {
    overflow-wrap: anywhere !important;
}
.scalar-app .response-description-markdown table {
    display: table !important;
    width: 100% !important;
}

/* Inline technical codes: show a touch smaller than the 16px body text so long codes stay compact and
 * wrap/fit better. Covers inline code in prose and tables (not code blocks, which keep their size via the
 * .hljs exclusion); <tt> is set to the same 13px above. Method pills and property names are already smaller. */
.scalar-app .markdown code:not(.hljs) {
    font-size: 13px;
}