/* ==========================================================================
   API explorer — /admin/api-docs, /tenant/api-docs, /org/api-docs
   --------------------------------------------------------------------------
   Ported from KognitCapture's /api-docs console (css/api-docs.css). The rules
   below the shell are Kognit's, unchanged; they are written against the
   Capture Studio tokens (--cs-*), which this file maps onto MerlinXSL's theme
   tokens (theme.css), so the page follows light and dark mode like every other.
   ========================================================================== */

/* ── Token bridge: Capture Studio names → MerlinXSL theme ───────────────── */
.ad-root {
    --cs-accent:        var(--accent);
    --cs-accent-dark:   color-mix(in srgb, var(--accent) 80%, var(--text));
    --cs-accent-tint:   var(--accent-soft);
    --cs-accent-border: color-mix(in srgb, var(--accent) 45%, var(--border));
    --cs-accent-rgb:    234, 88, 12;
    --cs-on-accent:     var(--accent-ink);
    --cs-amber:         var(--warn);
    --cs-amber-tint:    var(--warn-soft);
    --cs-green:         var(--ok);
    --cs-green-tint:    var(--ok-soft);
    --cs-red:           var(--danger);
    --cs-red-tint:      var(--danger-soft);
    --cs-ink:           var(--text);
    --cs-ink-2:         color-mix(in srgb, var(--text) 85%, var(--muted));
    --cs-text:          color-mix(in srgb, var(--text) 82%, var(--muted));
    --cs-text-2:        color-mix(in srgb, var(--text) 60%, var(--muted));
    --cs-muted:         var(--muted);
    --cs-faint:         color-mix(in srgb, var(--muted) 75%, var(--surface));
    --cs-surface:       var(--surface);
    --cs-surface-2:     var(--surface2);
    --cs-surface-3:     color-mix(in srgb, var(--surface2) 70%, var(--border));
    --cs-canvas:        var(--bg);
    --cs-border:        var(--border);
    --cs-border-soft:   color-mix(in srgb, var(--border) 55%, var(--surface));
    --cs-border-row:    color-mix(in srgb, var(--border) 35%, var(--surface));
    --cs-segment-bg:    var(--surface2);
    --cs-hover:         var(--surface2);
    --cs-radius-card:   var(--r);
    --cs-radius-btn:    7px;
    --cs-radius-input:  6px;
    --cs-radius-pill:   20px;
    --cs-font-mono:     var(--mono);
}
[data-theme=dark] .ad-root { --cs-accent-rgb: 249, 115, 22; }

/* ── Shell: Kognit's editor archetype (capture-studio.css .cs-editor*) ──── */
/* Three panes inside the page card: endpoint tree · operation · connection.
   Each pane scrolls on its own; the card fills the viewport below the title. */
.cs-editor.ad-editor {
    display: flex;
    height: calc(100vh - var(--topbar-h) - 190px);
    min-height: 560px;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    overflow: hidden;
}
.cs-editor-rail {
    display: flex;
    flex: 0 0 300px;
    width: 300px;
    flex-direction: column;
    min-height: 0;
    background: var(--cs-surface);
    border-left: 1px solid var(--cs-border);
}
.cs-editor-rail--left {
    border-left: 0;
    border-right: 1px solid var(--cs-border);
}
.cs-rail-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border-bottom: 1px solid var(--cs-border-soft);
}
.cs-rail-toolbar-title {
    flex: 1;
    min-width: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-faint);
}

/* Header band above the panes (Kognit: the drill-in header): what is open + the takeaways */
.ad-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 14px; }
.ad-head-text { flex: 1; min-width: 240px; }
.ad-head-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ad-head-sub { margin-top: 2px; color: var(--muted); font-size: 13px; }
.ad-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Which level's document the page shows, beside the title */
.ad-levels { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: var(--cs-radius-pill, 20px); }
.ad-levels a { padding: 4px 12px; border-radius: 20px; color: var(--muted); font-size: 13px; text-decoration: none; }
.ad-levels a:hover, .ad-levels a:focus-visible { color: var(--text); background: var(--surface2); }
.ad-levels a[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }

/* Role chips on an operation: who may call it (x-merlin-roles) */
.ad-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Left rail: search + endpoint tree ───────────────────────────────────── */

/* Kognit: 320 px. The page sits in the 1200 px content column here, so both rails start narrower. */
.ad-nav { flex-basis: 280px; width: 280px; }

.ad-search {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 10px 9px;
    border-bottom: 1px solid var(--cs-border-soft);
}
.ad-search > .ti {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--cs-faint);
    pointer-events: none;
}
.ad-search input {
    width: 100%;
    padding: 7px 9px 7px 30px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--cs-ink);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-btn);
}
.ad-search input::placeholder { color: var(--cs-faint); }
.ad-search input:focus {
    outline: none;
    border-color: var(--cs-accent-border);
    box-shadow: 0 0 0 2px rgba(var(--cs-accent-rgb), 0.15);
}

.ad-nav-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 8px 16px;
}

/* Group headings read like help's section labels; they still fold */
.ad-nav-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 10px 5px;
    border: 0;
    background: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-faint);
    text-align: left;
    cursor: pointer;
}
.ad-nav-group-head:hover { color: var(--cs-ink); }
.ad-nav-group-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ad-nav-group-count {
    font-weight: 600;
    letter-spacing: 0;
    color: var(--cs-faint);
}
.ad-nav-group-head .ad-chevron {
    transition: transform 0.15s ease;
}
.ad-nav-group.collapsed .ad-chevron { transform: rotate(-90deg); }
.ad-nav-group.collapsed .ad-nav-items { display: none; }

.ad-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--cs-radius-btn);
    background: transparent;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--cs-text);
    text-align: left;
    cursor: pointer;
}
.ad-nav-item:hover {
    background: var(--cs-hover);
    color: var(--cs-ink);
}
.ad-nav-item.active {
    background: var(--cs-accent-tint);
    color: var(--cs-accent);
}
.ad-nav-item.active .ad-nav-item-path {
    color: var(--cs-accent);
    font-weight: 600;
}
.ad-nav-overview { margin-bottom: 2px; }
.ad-nav-overview .ti { font-size: 14px; color: var(--cs-faint); }
.ad-nav-overview .ad-nav-item-path { font-family: inherit; font-size: 12.5px; }

.ad-nav-item-path {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--cs-font-mono);
    font-size: 0.74rem;
    color: var(--cs-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ad-nav-item.deprecated .ad-nav-item-path {
    text-decoration: line-through;
    color: var(--cs-faint);
}

.ad-nav-empty {
    padding: 10px;
    font-size: 12px;
    color: var(--cs-muted);
}

/* ── Right rail: connection + outline ────────────────────────────────────── */

.ad-side { flex-basis: 260px; width: 260px; }

.ad-conn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    padding: 12px 12px 14px;
    border-bottom: 1px solid var(--cs-border);
}
.ad-conn .ad-field-label { margin: 4px 0 0; }
.ad-conn .ad-field-label:first-child { margin-top: 0; }
.ad-conn-input {
    font-family: var(--cs-font-mono);
    font-size: 11.5px;
}
.ad-conn-token { display: flex; gap: 6px; }
.ad-conn-token .form-control { flex: 1; min-width: 0; }
.ad-conn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.ad-conn-actions .btn { flex: 1 1 auto; }
.ad-conn-state { margin-top: 4px; }
.ad-conn-state .ad-pill { white-space: normal; }

.ad-toc-head { border-top: 0; }
.ad-toc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 8px 16px;
}
.ad-toc-link {
    display: block;
    padding: 4px 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--cs-muted);
    border-left: 2px solid transparent;
}
.ad-toc-link:hover { color: var(--cs-ink); text-decoration: none; }
.ad-toc-link.active {
    color: var(--cs-accent);
    font-weight: 600;
    border-left-color: var(--cs-accent);
}
.ad-toc-empty {
    padding: 8px 10px;
    font-size: 11.5px;
    color: var(--cs-faint);
}

/* ── HTTP method badges ──────────────────────────────────────────────────── */

.ad-method {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 52px;
    text-align: center;
    font-family: var(--cs-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 6px;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
}

.ad-method.get     { background: var(--cs-accent); color: var(--cs-on-accent); }
.ad-method.post    { background: var(--cs-green); }
.ad-method.put     { background: var(--cs-amber); }
.ad-method.patch   { background: var(--cs-amber); }
.ad-method.delete  { background: var(--cs-red); }
.ad-method.head,
.ad-method.options { background: var(--cs-muted); }

.ad-method.lg {
    min-width: 66px;
    font-size: 0.72rem;
    padding: 5px 9px;
}

/* ── Main pane ───────────────────────────────────────────────────────────── */

.ad-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background: var(--cs-surface);
}

/* Same readable measure as a help article, centred in the full-width pane */
.ad-sheet {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 26px 56px;
}

.ad-op-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ad-op-url {
    font-family: var(--cs-font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cs-ink);
    word-break: break-all;
}

.ad-op-summary {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cs-ink);
    margin: 12px 0 4px;
}

.ad-op-head + .ad-op-desc { margin-top: 12px; }

.ad-op-desc {
    font-size: 0.86rem;
    color: var(--cs-text);
    max-width: 82ch;
    white-space: pre-wrap;
}

.ad-section {
    margin-top: 22px;
}

.ad-section-title {
    scroll-margin-top: 16px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cs-muted);
    padding-bottom: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cs-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ad-section-title .ad-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--cs-faint);
    font-size: 0.72rem;
}

/* ── Parameter table ─────────────────────────────────────────────────────── */

.ad-params {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.ad-params th {
    text-align: left;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cs-muted);
    font-weight: 600;
    padding: 0 10px 6px 0;
    border-bottom: 1px solid var(--cs-border);
}

.ad-params td {
    padding: 8px 10px 8px 0;
    border-bottom: 1px solid var(--cs-border-row);
    vertical-align: top;
}

.ad-params td:last-child,
.ad-params th:last-child {
    padding-right: 0;
}

.ad-pname {
    font-family: var(--cs-font-mono);
    font-size: 0.78rem;
    color: var(--cs-ink);
    white-space: nowrap;
}

.ad-ptype {
    font-family: var(--cs-font-mono);
    font-size: 0.72rem;
    color: var(--cs-accent);
    white-space: nowrap;
}

.ad-req {
    color: var(--cs-red);
    font-weight: 700;
    margin-left: 3px;
}

.ad-pdesc {
    color: var(--cs-text-2);
    font-size: 0.78rem;
}

.ad-input,
.ad-textarea {
    width: 100%;
    font-family: var(--cs-font-mono);
    font-size: 0.78rem;
    padding: 5px 8px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-input);
    background: var(--cs-surface);
    color: var(--cs-ink);
}

.ad-input:focus,
.ad-textarea:focus {
    outline: none;
    border-color: var(--cs-accent);
    box-shadow: 0 0 0 3px var(--cs-accent-tint);
}

.ad-textarea {
    min-height: 190px;
    line-height: 1.5;
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

.ad-textarea.invalid {
    border-color: var(--cs-red);
    box-shadow: 0 0 0 3px var(--cs-red-tint);
}

/* Inline code in descriptions (`backticked` spans, see prose() in console.js) */
.ad-op-desc code, .ad-pdesc code {
    font-size: 0.85em;
    padding: 0 3px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── Tabs (languages, body/schema switches) ──────────────────────────────── */

.ad-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.ad-tab {
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-text);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 11px;
    border-radius: var(--cs-radius-pill);
    cursor: pointer;
}

.ad-tab:hover {
    background: var(--cs-hover);
    color: var(--cs-ink);
}

.ad-tab.active {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: var(--cs-on-accent);
}

/* Group heading inside a long language list (runtime API: command line, applications, databases …) */
.ad-tab-group {
    flex-basis: 100%;
    margin-block-start: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cs-muted);
}
.ad-tab-group:first-child { margin-block-start: 0; }

.ad-sample-notes { margin-block-end: 8px; font-family: inherit; }

/* ── Code blocks ─────────────────────────────────────────────────────────── */

.ad-code-wrap {
    position: relative;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    background: var(--cs-canvas);
    overflow: hidden;
}

.ad-code-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--cs-surface-3);
    border-bottom: 1px solid var(--cs-border);
    font-size: 0.72rem;
    color: var(--cs-muted);
}

.ad-code-bar .ad-code-name {
    font-weight: 600;
    color: var(--cs-ink-2);
}

.ad-copy {
    margin-left: auto;
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-text);
    font-size: 0.72rem;
    padding: 3px 9px;
    border-radius: var(--cs-radius-btn);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ad-copy:hover {
    background: var(--cs-hover);
    color: var(--cs-ink);
}

.ad-copy.copied {
    border-color: var(--cs-green);
    color: var(--cs-green);
}

.ad-code {
    margin: 0;
    padding: 12px 14px;
    font-family: var(--cs-font-mono);
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--cs-ink-2);
    background: transparent;
    max-height: 460px;
    overflow: auto;
    white-space: pre;
    tab-size: 4;
}

.ad-code .tok-str { color: var(--cs-green); }
.ad-code .tok-num { color: var(--cs-amber); }
.ad-code .tok-key { color: var(--cs-accent); }
.ad-code .tok-lit { color: var(--cs-red); }
.ad-code .tok-com { color: var(--cs-faint); font-style: italic; }

/* ── Try-it console ──────────────────────────────────────────────────────── */

.ad-try-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ad-btn {
    border: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-text);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 13px;
    border-radius: var(--cs-radius-btn);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ad-btn:hover:not(:disabled) {
    background: var(--cs-hover);
    color: var(--cs-ink);
}

.ad-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ad-btn.primary {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: var(--cs-on-accent);
}

.ad-btn.primary:hover:not(:disabled) {
    background: var(--cs-accent-dark);
    border-color: var(--cs-accent-dark);
    color: var(--cs-on-accent);
}

.ad-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cs-font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: var(--cs-radius-btn);
}

.ad-status.ok    { background: var(--cs-green-tint); color: var(--cs-green); }
.ad-status.warn  { background: var(--cs-amber-tint); color: var(--cs-amber); }
.ad-status.error { background: var(--cs-red-tint);   color: var(--cs-red); }

.ad-meta {
    font-size: 0.74rem;
    color: var(--cs-muted);
    font-family: var(--cs-font-mono);
}

/* ── Responses ───────────────────────────────────────────────────────────── */

.ad-resp-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cs-border-row);
    font-size: 0.8rem;
}

.ad-code-badge {
    font-family: var(--cs-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--cs-segment-bg);
    color: var(--cs-ink-2);
    flex: 0 0 auto;
}

.ad-code-badge.ok    { background: var(--cs-green-tint); color: var(--cs-green); }
.ad-code-badge.warn  { background: var(--cs-amber-tint); color: var(--cs-amber); }
.ad-code-badge.error { background: var(--cs-red-tint);   color: var(--cs-red); }

/* ── Schema tree ─────────────────────────────────────────────────────────── */

.ad-schema {
    font-family: var(--cs-font-mono);
    font-size: 0.76rem;
    color: var(--cs-text);
}

.ad-schema details {
    margin-left: 12px;
    border-left: 1px dashed var(--cs-border);
    padding-left: 10px;
}

.ad-schema summary {
    cursor: pointer;
    color: var(--cs-accent);
    margin-left: -10px;
}

.ad-schema-row {
    padding: 2px 0;
}

/* ── Auth panel ──────────────────────────────────────────────────────────── */

.ad-auth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    align-items: end;
}

.ad-field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cs-muted);
    margin-bottom: 4px;
}

.ad-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: var(--cs-radius-pill);
    background: var(--cs-segment-bg);
    color: var(--cs-text-2);
}

.ad-pill.auth  { background: var(--cs-amber-tint); color: var(--cs-amber); }
.ad-pill.open  { background: var(--cs-green-tint); color: var(--cs-green); }
.ad-pill.depr  { background: var(--cs-red-tint);   color: var(--cs-red); }

/* ── Welcome / overview pane ─────────────────────────────────────────────── */

.ad-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.ad-tile {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    background: var(--cs-surface-2);
    padding: 12px 14px;
}

.ad-tile-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cs-ink);
    line-height: 1.2;
}

.ad-tile-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cs-muted);
}

/* Narrower screens: both rails give up width before the operation does. The
   right rail stays, unlike help's outline, because it holds the token. */
@media (max-width: 1280px) {
    .ad-side { flex-basis: 240px; width: 240px; }
    .ad-nav { flex-basis: 280px; width: 280px; }
}

/* A narrow host (the project's Integration tab sits beside the project menu): the connection
   rail moves above the operation as one row of fields and the outline steps aside, so the
   operation keeps a readable width instead of a 300 px strip between two rails. */
.ad-root { container-type: inline-size; }
@media (min-width: 992px) {
    @container (max-width: 1100px) {
        .cs-editor.ad-editor {
            display: grid;
            grid-template-columns: 240px minmax(0, 1fr);
            grid-template-rows: auto minmax(0, 1fr);
        }
        .ad-nav { grid-row: 1 / 3; width: auto; }
        .ad-side { grid-column: 2; grid-row: 1; width: auto; border-inline-start: 0; border-bottom: 1px solid var(--cs-border); }
        .ad-side > .cs-rail-toolbar, .ad-toc-body { display: none; }
        .ad-main { grid-column: 2; grid-row: 2; }
        .ad-conn {
            display: grid;
            grid-template-rows: auto auto;
            grid-auto-flow: column;
            grid-auto-columns: minmax(0, 1fr);
            align-items: end;
            gap: 4px 12px;
            border-bottom: 0;
        }
        .ad-conn .ad-field-label { margin: 0; }
        .ad-conn-actions, .ad-conn-state { margin: 0; }
    }
}

/* Phones and tablets: the panes stack, the operation keeps the full width. */
@media (max-width: 991.98px) {
    .cs-editor.ad-editor { flex-direction: column; height: auto; min-height: 0; }
    .cs-editor-rail, .ad-nav, .ad-side { flex: 0 0 auto; width: 100%; border: 0; border-bottom: 1px solid var(--cs-border); }
    .ad-nav-list { max-height: 320px; }
    .ad-main { overflow: visible; }
}