/* ===========================================================================
   Merchant API documentation (/docs and its sub-pages).
   Scoped under .apidocs so nothing here can leak into the rest of the portal,
   which is still the Pages 4.1 admin theme.

   The palette is the brand palette from the login page, Pages/Index.razor.
   Navy carries structure, gold is the single accent. The green and red are
   semantic only, on status pills, where a merchant has to tell approved from
   declined at a glance and navy against gold cannot do that.
   =========================================================================== */

.apidocs {
    --navy: #0A3B66;
    --navy-tint: rgba(10, 59, 102, .08);
    --navy-line: rgba(10, 59, 102, .22);
    --gold: #E5A93B;
    --gold-deep: #D49B28;
    --ink: #0B121E;
    --muted: #5A6676;
    --line: #DFE4EA;
    --field: #F7F9FC;
    --panel: #F2F5F9;
    --ok: #1E7A52;
    --bad: #B4341F;

    --code-bg: #0B121E;
    --code-fg: #C6CEDA;
    --code-key: #8FB8DF;
    --code-str: #E5A93B;
    --code-num: #7FC8A9;
    --code-punct: #5F6E82;

    --ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink);
}

.apidocs code,
.apidocs pre { font-family: var(--mono); }

/* --------------------------------------------------------------- layout */
/* Two rules here stop the prose column and the code rail drifting apart on a
   wide monitor.

   max-width, because the shell sits in a container-fluid that runs the full
   width of the window. Without a cap the middle column keeps growing while
   paragraphs stay capped at 66ch, so everything past the measure is dead
   space, and it gets worse the bigger the screen.

   The prose column is capped at the measure rather than taking 1fr. That is
   what closes the gap: paragraphs stop at 66ch whatever the column does, so a
   column that grows past 66ch can only grow empty space. Capping it at the
   measure and giving the rail the 1fr means every spare pixel goes to the
   code, and the code starts immediately where the text ends. */
.apidocs__shell {
    display: grid;
    max-width: 1560px;
    margin: 0 auto;
    grid-template-columns: 220px minmax(0, 740px) minmax(440px, 1fr);
    align-items: start;
    gap: 0;
}

.apidocs__nav {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 4px 18px 30px 0;
    border-right: 1px solid var(--line);
}

.apidocs__body { padding: 0 44px; min-width: 0; }

.apidocs__rail {
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 4px 0 30px;
}

/* ------------------------------------------------------------------ nav */
.apidocs__nav-group { margin-bottom: 20px; }

.apidocs__nav-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 7px 10px;
}

.apidocs__nav a {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--muted);
    text-decoration: none;
}

.apidocs__nav a:hover { background: var(--field); color: var(--ink); }

/* A child page: indented under its parent, with a rule down the left so the
   relationship reads at a glance. Slightly smaller and quieter than a top level
   entry, but still a normal link when it is the current page. */
.apidocs__nav a.apidocs__nav-sub {
    margin-left: 10px;
    padding-left: 12px;
    font-size: 12.5px;
    color: var(--muted);
    border-left: 1px solid var(--line);
    border-radius: 0 5px 5px 0;
}

.apidocs__nav a.apidocs__nav-sub:hover { color: var(--ink); }

.apidocs__nav a.apidocs__nav-sub.is-on {
    color: var(--navy);
    border-left-color: var(--navy);
    /* The top level active bar is an inset box-shadow. On a child that would sit
       alongside its own left rule and read as two bars, so the rule does the job
       here instead. */
    box-shadow: none;
}

.apidocs__nav a.is-on {
    background: var(--navy-tint);
    color: var(--navy);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--navy);
}

/* -------------------------------------------------------------- content */
.apidocs__eyebrow {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 10px;
}

.apidocs h1 {
    font-family: var(--ui);
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -.028em;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--ink);
}

.apidocs__lede {
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 26px;
    max-width: 62ch;
}

.apidocs h2 {
    font-family: var(--ui);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 38px 0 6px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    color: var(--ink);
}

.apidocs h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.apidocs h3 {
    font-family: var(--ui);
    font-size: 14.5px;
    font-weight: 600;
    margin: 22px 0 6px;
    color: var(--ink);
}

.apidocs p { margin: 0 0 12px; max-width: 66ch; color: #222B3A; }
.apidocs ul { max-width: 66ch; color: #222B3A; }
.apidocs__muted { color: var(--muted); }

.apidocs a.apidocs__link { color: var(--navy); text-decoration: underline; }

.apidocs code:not(pre code) {
    font-size: .88em;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 5px;
    color: inherit;
}

/* ------------------------------------------------------------- endpoint */
.apidocs__endpoint {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
    margin: 0 0 22px;
}

.apidocs__verb {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28px;
    color: var(--navy);
    background: var(--navy-tint);
    border-radius: 6px;
    padding: 4px 10px;
}

.apidocs__verb--get { color: var(--ok); background: rgba(30, 122, 82, .10); }
.apidocs__verb--put { color: var(--gold-deep); background: rgba(229, 169, 59, .16); }

.apidocs__path {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink);
    word-break: break-all;
}

/* ------------------------------------------------------------ parameters */
.apidocs__params { border-top: 1px solid var(--line); margin: 14px 0 0; }

.apidocs__param { border-bottom: 1px solid var(--line); padding: 14px 0; }

.apidocs__param-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.apidocs__param-name {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.apidocs__param-type {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
}

.apidocs__param-desc {
    margin: 5px 0 0;
    font-size: 13.5px;
    color: #39445A;
    max-width: 62ch;
}

.apidocs__pill {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 2.5px 8px;
    white-space: nowrap;
}

.apidocs__pill--required {
    color: var(--navy);
    background: var(--navy-tint);
    border: 1px solid var(--navy-line);
}

.apidocs__pill--optional { color: var(--muted); border: 1px solid var(--line); }

.apidocs__pill--conditional {
    color: var(--gold-deep);
    background: rgba(229, 169, 59, .14);
    border: 1px solid rgba(229, 169, 59, .45);
}

/* -------------------------------------------------------------- callout */
.apidocs__note {
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    background: #FFFDF8;
    border-radius: 10px;
    padding: 13px 15px;
    margin: 18px 0;
    font-size: 13.5px;
}

.apidocs__note--navy { border-left-color: var(--navy); background: #F7FAFD; }
.apidocs__note p { margin: 0; max-width: none; }
.apidocs__note p + p { margin-top: 7px; }

/* ---------------------------------------------------------------- table */
.apidocs__table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 6px;
    font-size: 13px;
}

.apidocs__table th {
    text-align: left;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.apidocs__table td {
    padding: 11px 10px 11px 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: #39445A;
}

.apidocs__mono { font-family: var(--mono); font-size: 12px; }

.apidocs__status {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 7px;
    white-space: nowrap;
}

.apidocs__status--approved { color: var(--ok); background: rgba(30, 122, 82, .10); }
.apidocs__status--declined { color: var(--bad); background: rgba(180, 52, 31, .10); }
.apidocs__status--pending { color: var(--gold-deep); background: rgba(229, 169, 59, .16); }
.apidocs__status--error { color: var(--muted); background: var(--panel); }

/* ----------------------------------------------------------- code block */
.apidocs__rail-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 9px 2px;
}

.apidocs__code {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(11, 18, 30, .06), 0 12px 30px rgba(11, 18, 30, .10);
}

.apidocs__code-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #121B2A;
    padding: 7px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.apidocs__code-tab {
    font-family: var(--mono);
    font-size: 11px;
    color: #8795A8;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 0;
    background: none;
}

.apidocs__code-tab.is-on { background: rgba(255, 255, 255, .08); color: #E8EDF4; }

.apidocs__code-copy {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .4px;
    color: #8795A8;
    background: none;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    padding: 3px 9px;
    cursor: pointer;
}

.apidocs__code-copy:hover { color: #E8EDF4; border-color: rgba(255, 255, 255, .3); }

.apidocs__code pre {
    margin: 0;
    background: var(--code-bg);
    color: var(--code-fg);
    font-size: 12.5px;
    line-height: 1.7;
    padding: 14px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
}

.apidocs__code pre[hidden] { display: none; }

.apidocs .k { color: var(--code-key); }
.apidocs .v { color: var(--code-str); }
.apidocs .n { color: var(--code-num); }
.apidocs .c { color: var(--code-punct); }

/* ----------------------------------------------------------------- pager */
.apidocs__pager { display: flex; gap: 14px; margin-top: 44px; }

.apidocs__pager a {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 13px 15px;
    text-decoration: none;
    color: var(--ink);
}

.apidocs__pager a:hover { border-color: var(--navy-line); background: var(--field); }
.apidocs__pager span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.apidocs__pager b { font-weight: 600; font-size: 13.5px; }
.apidocs__pager a.is-next { text-align: right; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1500px) {
    .apidocs__shell { grid-template-columns: 200px minmax(0, 700px) minmax(400px, 1fr); }
    .apidocs__body { padding: 0 30px; }
}

@media (max-width: 1280px) {
    .apidocs__shell { grid-template-columns: 200px minmax(0, 1fr); }
    .apidocs__rail {
        position: static;
        max-height: none;
        grid-column: 2;
        padding: 10px 0 30px;
    }
}

@media (max-width: 860px) {
    .apidocs__shell { grid-template-columns: minmax(0, 1fr); }
    .apidocs__nav {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 0 0 14px;
        margin-bottom: 18px;
    }
    .apidocs__body { padding: 0; }
    .apidocs__rail { grid-column: 1; }
    .apidocs__pager { flex-direction: column; }
    .apidocs__pager a.is-next { text-align: left; }
}