/* ============================================================
   API Request-Body Schema Explorer  (/docs/api/create/*)
   Collapsible field tree + synced example payload.
   Colours come from the :root tokens in style.css (HSL triplets),
   so this file stays in sync with the rest of the site palette.
   ============================================================ */

/* Full-bleed content layout for the create reference pages (set via
   ViewData["DocsContentClass"] in CreateEndpoint.cshtml). Normal page sections
   sit in a readable centre column (matching the max-w-3xl used on other docs
   pages); only children marked .docs-bleed span the full content width, so the
   Schema Explorer gets room for its side-by-side payload while the prose stays
   narrow. The surrounding gutters come from .docs-main's own padding. */
.docs-content-grid {
    display: grid;
    grid-template-columns: 1fr min(48rem, 100%) 1fr;
    row-gap: 2.5rem;
    align-content: start;
}
.docs-content-grid > * { grid-column: 2; min-width: 0; }
.docs-content-grid > .docs-bleed { grid-column: 1 / -1; }

/* Keep the explorer from stretching uncomfortably wide on very large screens. */
.docs-bleed .api-explorer { max-width: 90rem; margin-inline: auto; }

/* ---- card shell ---- */
.api-explorer {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 16px;
    overflow: clip; /* clips rounded corners without breaking the sticky payload */
    box-shadow: 0 1px 2px hsl(201 29% 15% / .04), 0 18px 40px -28px hsl(201 29% 15% / .25);
    font-family: var(--font-body, "DM Sans", system-ui, sans-serif);
}

/* ---- header ---- */
.api-explorer__head {
    border-bottom: 1px solid hsl(var(--border));
    padding: 18px 20px 14px;
    background: linear-gradient(180deg, hsl(var(--card)), hsl(48 18% 99%));
}
.api-explorer__title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.api-explorer__method {
    font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
    letter-spacing: .04em; color: #fff; background: hsl(var(--accent-strong));
    padding: 3px 8px; border-radius: 6px;
}
.api-explorer__route { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 600; color: hsl(var(--primary)); word-break: break-all; }
.api-explorer__sub { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-left: auto; }

/* ---- toolbar ---- */
.api-explorer__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.api-explorer__filter {
    display: flex; align-items: center; gap: 8px; background: hsl(var(--muted));
    border: 1px solid hsl(var(--border)); border-radius: 9px; padding: 0 10px;
    height: 36px; min-width: 230px; color: hsl(var(--muted-foreground));
}
.api-explorer__filter:focus-within { border-color: hsl(var(--accent-strong)); box-shadow: 0 0 0 3px hsl(var(--accent-strong) / .18); }
.api-explorer__filter input { border: 0; background: transparent; outline: none; font: inherit; font-size: 13.5px; color: hsl(var(--foreground)); width: 100%; }
.api-explorer__clear { border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: hsl(var(--muted-foreground)); padding: 0 2px; }
.api-explorer__pill {
    font: inherit; font-size: 12.5px; font-weight: 600; height: 36px; padding: 0 14px;
    border-radius: 9px; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
    color: hsl(var(--foreground)); cursor: pointer; white-space: nowrap;
}
.api-explorer__pill.is-on { background: hsl(var(--secondary)); border-color: hsl(var(--accent)); color: hsl(var(--accent-strong)); }
.api-explorer__pill-check { display: none; }
.api-explorer__pill.is-on .api-explorer__pill-check { display: inline; }
.api-explorer__spacer { flex: 1; }
.api-explorer__ghost {
    font: inherit; font-size: 12.5px; font-weight: 500; height: 36px; padding: 0 10px;
    border-radius: 8px; border: 0; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer;
}
.api-explorer__ghost:hover { color: hsl(var(--primary)); background: hsl(var(--muted)); }

/* ---- body layout ---- */
.api-explorer__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); min-height: 300px; }
@media (max-width: 900px) { .api-explorer__body { grid-template-columns: minmax(0, 1fr); } }
.api-explorer__tree { padding: 8px 8px 18px; min-width: 0; }
.api-explorer__empty { padding: 40px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 14px; }

/* ---- field rows ---- */
.apx-row { position: relative; }
.apx-row__head {
    position: relative; display: flex; gap: 9px; align-items: flex-start;
    padding: 9px 12px; border-radius: 8px; cursor: default; transition: background .08s;
}
.apx-row.has-kids > .apx-row__head { cursor: pointer; }
.apx-row__head:hover, .apx-row__head.is-hot { background: hsl(var(--accent) / .12); }
.apx-row__head:focus-visible { outline: 2px solid hsl(var(--accent-strong) / .5); outline-offset: -2px; }

.apx-twisty { flex: none; width: 16px; height: 18px; display: grid; place-items: center; color: hsl(var(--muted-foreground)); transition: transform .15s; }
.apx-row.is-open > .apx-row__head .apx-twisty { transform: rotate(90deg); }
.apx-leaf { width: 4px; height: 4px; border-radius: 50%; background: hsl(var(--border)); }
.apx-row__head.is-hot .apx-leaf { background: hsl(var(--accent-strong)); }

.apx-main { min-width: 0; flex: 1; }
.apx-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.apx-name { font-family: var(--font-mono, monospace); font-size: 13.5px; font-weight: 600; color: hsl(var(--foreground)); letter-spacing: -.01em; }
.apx-type { font-family: var(--font-mono, monospace); font-size: 11px; color: hsl(var(--muted-foreground)); }
.apx-type.is-container { color: hsl(var(--accent-strong)); font-weight: 600; }
.apx-req, .apx-opt { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; padding: 1px 6px; border-radius: 999px; }
.apx-req { color: hsl(var(--destructive)); background: hsl(var(--destructive) / .10); }
.apx-opt { color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); }
.apx-count { font-size: 11px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding: 1px 8px; border-radius: 999px; }
.apx-row.is-open > .apx-row__head .apx-count { display: none; }
.apx-code { margin-left: auto; font-family: var(--font-mono, monospace); font-size: 10.5px; color: hsl(var(--muted-foreground)); opacity: .7; flex: none; }
.apx-desc { display: block; font-size: 12.5px; color: hsl(var(--muted-foreground)); margin-top: 2px; max-width: 72ch; text-wrap: pretty; }

.apx-copy { flex: none; border: 0; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 2px; border-radius: 5px; opacity: 0; transition: opacity .1s, background .1s; display: grid; place-items: center; }
.apx-row__head:hover .apx-copy, .apx-copy:focus-visible { opacity: .65; }
.apx-copy:hover { opacity: 1; background: hsl(var(--muted)); color: hsl(var(--accent-strong)); }

/* ---- children + indent guide ---- */
.apx-children { position: relative; padding-left: 22px; }
.apx-row:not(.is-open) > .apx-children { display: none; }
.apx-children::before { content: ""; position: absolute; left: 7px; top: 2px; bottom: 8px; width: 1px; background: hsl(var(--border)); }

/* ---- enum "Allowed values" table ---- */
.apx-enum { margin: 4px 0 8px 4px; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 9px; padding: 10px 12px; }
.apx-enum__h { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 7px; }
.apx-enum__row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12.5px; color: hsl(var(--foreground)); }
.apx-enum__code { font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 600; color: hsl(var(--accent-strong)); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 1px 7px; min-width: 30px; text-align: center; }

/* ---- filter / required-only hiding ---- */
.apx-row.is-filtered-out { display: none; }

/* ---- example payload (right rail) ---- */
.api-explorer__json {
    border-left: 1px solid hsl(var(--border)); background: var(--bg-0);
    display: flex; flex-direction: column;
    position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 5.5rem); min-height: 300px;
}
@media (max-width: 900px) {
    .api-explorer__json { position: static; max-height: none; border-left: 0; border-top: 1px solid hsl(var(--border)); }
}
.api-explorer__jhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.api-explorer__jhint { color: var(--mint); font-size: 10px; letter-spacing: .04em; text-transform: none; font-weight: 500; background: hsl(var(--accent) / .14); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.api-explorer__jcode { flex: 1; overflow: auto; margin: 0; padding: 12px 0 18px; font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.7; color: #c5d6cd; }
.apx-jline { white-space: pre; padding: 0 14px; transition: background .08s; }
.apx-jline.is-hot { background: hsl(var(--accent) / .14); }
.apx-jline .apx-k { color: #9fe0a8; }
.apx-jline .apx-s { color: #d6c9a0; }
.apx-jline .apx-n { color: #9fc7e0; }
.apx-jline .apx-p { color: #6f8a86; }

/* ---- copy toast ---- */
.apx-toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: var(--bg-0); color: #fff; font-size: 13px; padding: 9px 16px;
    border-radius: 10px; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .4); z-index: 60;
    font-family: var(--font-body, system-ui, sans-serif);
}
.apx-toast code { font-family: var(--font-mono, monospace); color: #9fe0a8; font-size: 12.5px; }