/*
 * Nzyme theme for the Scalar API reference. Colors follow the dark palette shared by the Nzyme web interface,
 * Control and Connect (see tokens.css in Connect). Scalar is configured with theme "none" and forced dark mode,
 * so only the .dark-mode block matters.
 */

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/geist-latin.woff2) format('woff2');
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/geist-mono-latin.woff2) format('woff2');
}

:root {
    /* Nzyme tokens. */
    --nz-bg: #0c0c0f;
    --nz-bg-raised: #141418;
    --nz-surface: #1c1c22;
    --nz-surface-2: #25252d;
    --nz-surface-3: #2e2e38;
    --nz-border: #33333d;
    --nz-border-soft: #2a2a33;
    --nz-text: #e8e8ed;
    --nz-text-2: #c4c4d4;
    --nz-text-3: #9a9ab0;
    --nz-muted: #6b7280;
    --nz-link: #7b93db;
    --nz-link-hover: #9baee5;
    --nz-brand: #ff143f;
    --nz-brand-hover: #ff4063;
    --nz-brand-soft: rgba(255, 20, 63, 0.14);
    --nz-success: #15cc78;
    --nz-warning: #ffb020;
    --nz-info: #3ea6ff;
    --nz-danger: #ff5470;

    /* Height of our own header bar; Scalar offsets its sticky sidebar by this. */
    --scalar-custom-header-height: 56px;

    --scalar-font: 'Geist', system-ui, -apple-system, sans-serif;
    --scalar-font-code: 'Geist Mono', ui-monospace, monospace;

    --scalar-radius: 6px;
    --scalar-radius-lg: 10px;
    --scalar-radius-xl: 14px;
}

.dark-mode {
    --scalar-background-1: var(--nz-bg);
    --scalar-background-2: var(--nz-bg-raised);
    --scalar-background-3: var(--nz-surface);
    --scalar-background-accent: var(--nz-brand-soft);

    --scalar-color-1: var(--nz-text);
    --scalar-color-2: var(--nz-text-3);
    --scalar-color-3: var(--nz-muted);
    --scalar-color-accent: var(--nz-brand);

    --scalar-border-color: var(--nz-border-soft);

    --scalar-link-color: var(--nz-link);
    --scalar-link-color-hover: var(--nz-link-hover);

    --scalar-button-1: var(--nz-brand);
    --scalar-button-1-hover: var(--nz-brand-hover);
    --scalar-button-1-color: #fff;

    --scalar-color-green: var(--nz-success);
    --scalar-color-red: var(--nz-danger);
    --scalar-color-yellow: var(--nz-warning);
    --scalar-color-blue: var(--nz-info);
    --scalar-color-orange: #ff8d4d;
    --scalar-color-purple: #b191f9;

    --scalar-tooltip-background: var(--nz-surface-2);
    --scalar-tooltip-color: var(--nz-text);

    /* Sidebar, raised like the navigation of the other Nzyme apps. */
    --scalar-sidebar-background-1: var(--nz-bg-raised);
    --scalar-sidebar-color-1: var(--nz-text);
    --scalar-sidebar-color-2: var(--nz-text-3);
    --scalar-sidebar-border-color: var(--nz-border);

    --scalar-sidebar-item-hover-background: var(--nz-surface);
    --scalar-sidebar-item-hover-color: var(--nz-text);

    --scalar-sidebar-item-active-background: var(--nz-brand-soft);
    --scalar-sidebar-color-active: var(--nz-text);

    --scalar-sidebar-indent-border: var(--nz-border-soft);
    --scalar-sidebar-indent-border-hover: var(--nz-border);
    --scalar-sidebar-indent-border-active: var(--nz-brand);

    --scalar-sidebar-search-background: var(--nz-bg);
    --scalar-sidebar-search-color: var(--nz-text-3);
    --scalar-sidebar-search-border-color: var(--nz-border);
}

html, body {
    margin: 0;
    background-color: var(--nz-bg);
    color: var(--nz-text);
    font-family: var(--scalar-font);
}

/* Header bar. */

header.nz-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--scalar-custom-header-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: var(--nz-bg-raised);
    border-bottom: 1px solid var(--nz-border);
}

header.nz-header a {
    color: var(--nz-text-3);
    text-decoration: none;
    font-size: 14px;
}

header.nz-header a:hover {
    color: var(--nz-text);
}

header.nz-header .nz-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--nz-text);
    font-weight: 600;
    font-size: 16px;
}

header.nz-header .nz-brand img {
    height: 24px;
    width: auto;
}

header.nz-header .nz-brand span.nz-product {
    color: var(--nz-text-3);
    font-weight: 400;
}

header.nz-header nav {
    display: flex;
    gap: 20px;
}

#loading {
    padding: 2rem;
    color: var(--nz-muted);
}

/* Scrollbars, matching Control. */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nz-surface-3); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3a414a; background-clip: content-box; }

/*
 * Sidebar tag group headers (from x-tagGroups). Scalar renders them as a bold div inside a wrapper carrying the
 * "group/sidebar-section" utility class; the attribute selector avoids escaping the slash. Tied to the pinned
 * Scalar version in index.html.
 */
[class~="group/sidebar-section"] > [class~="font-bold"] {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid var(--nz-border-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nz-brand);
}

[class~="group/sidebar-section"]:first-of-type > [class~="font-bold"] {
    margin-top: 4px;
    border-top: none;
}