/*
 * Dark-mode overrides for Redoc's static HTML output. Redoc's `redocly.yaml`
 * theme has no media-query support, so we inject this stylesheet via the
 * custom Handlebars template and override its styled-components rules with
 * `!important` (single-class specificity on both sides).
 *
 * The Descript brand primary (#651A39) leaks into many hashed sc-class rules
 * whose names change between builds; those are handled at build time by
 * `inject-dark-mode.ts`. This file only targets Redoc's stable class names.
 *
 * Contrast is audited against WCAG 2.1 AA in `contrast-check.ts`.
 */

@media (prefers-color-scheme: dark) {
    html,
    body {
        background-color: #0f1115 !important;
        color: #e6e6e6 !important;
    }

    /* No background on .api-content: its sc-class doesn't set one in light
     * mode either, and painting it opaque hides the absolutely-positioned
     * right panel that lives inside. */
    .redoc-wrap {
        background-color: #0f1115 !important;
        color: #e6e6e6 !important;
    }

    .api-content {
        color: #e6e6e6 !important;
    }

    /* Each sc-class nested inside .menu-content hard-codes its own
     * background:#fafafa, so the bg override has to be broad. The color
     * override is narrower to preserve method-label accents. */
    .menu-content,
    .menu-content div,
    .menu-content ul,
    .menu-content li,
    .menu-content label {
        background-color: #15181f !important;
    }

    .menu-content,
    .menu-content label,
    .menu-content a,
    .menu-content span {
        color: #d4d4d8 !important;
    }

    .menu-content {
        border-right: 1px solid #6e7683 !important;
    }

    .menu-content label:hover {
        background-color: #1f2330 !important;
        color: #ffffff !important;
    }

    .menu-content label.active,
    .menu-content li.active > label {
        background-color: #232838 !important;
        color: #ffffff !important;
    }

    /* Logo wordmark is baked in as #651A39 — swap to a recolored asset. */
    .menu-content img[src$='descript-logo.svg'] {
        content: url('assets/descript-logo-dark.svg');
    }

    /* `-webkit-text-fill-color` overrides `color` in WebKit/Blink inputs;
     * `opacity:1` defeats the UA's ~54% placeholder dim. */
    .menu-content input,
    .menu-content input[type='text'] {
        background-color: transparent !important;
        color: #e6e6e6 !important;
        -webkit-text-fill-color: #e6e6e6 !important;
        border: 0 !important;
        border-bottom: 1px solid #6e7683 !important;
    }

    .menu-content input::placeholder {
        color: #8b8f99 !important;
        -webkit-text-fill-color: #8b8f99 !important;
        opacity: 1 !important;
    }

    .menu-content .search-icon path {
        fill: #8b8f99 !important;
    }

    .menu-content a[href*='redocly.com/redoc'] {
        color: #8b8f99 !important;
    }

    /* Narrow color list — setting it on every <div> descendant would
     * repaint method labels, status codes, and syntax tokens. */
    .api-content h1,
    .api-content h2,
    .api-content h3,
    .api-content h4,
    .api-content h5,
    .api-content h6,
    .api-content p,
    .api-content li,
    .api-content td,
    .api-content th,
    .api-content label {
        color: #e6e6e6 !important;
    }

    /* #FF4444 is a brighter sibling of the logo D-mark red (#F73B3B); the
     * original maroon #651A39 only reaches ~1.9:1 on #0f1115. */
    .api-content a {
        color: #ff4444 !important;
    }

    .api-content a:hover {
        color: #ff7878 !important;
    }

    .api-content blockquote {
        border-left-color: #ff4444 !important;
        color: #d4d4d8 !important;
    }

    .api-content blockquote strong,
    .api-content blockquote b {
        color: #ffffff !important;
    }

    .api-content table tr {
        background-color: transparent !important;
        border-top-color: #6e7683 !important;
    }

    .api-content table tr:nth-child(2n) {
        background-color: #15181f !important;
    }

    .api-content td,
    .api-content th {
        border-color: #6e7683 !important;
    }

    /* Code blocks, JSON samples, request tabs, and dropdowns are NOT
     * overridden — Redoc's default dark-maroon (#3c1022) reads fine on both
     * page backgrounds, and overriding caused per-line underline artifacts. */

    .api-content hr {
        border-color: #6e7683 !important;
    }

    ::-webkit-scrollbar-track {
        background-color: #15181f;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #6e7683;
    }
}