/*
 * Okta Connect — dark theme override for the Scribe "default" (Slate) layout.
 *
 * Kept OUTSIDE public/vendor/scribe/ on purpose: `scribe:generate` wipes and
 * re-copies that directory, which would delete this file. This location is
 * untouched by Scribe, so the file survives regeneration. The only thing a
 * regen removes is the <link> to it in resources/views/scribe/index.blade.php —
 * re-add that single line after regenerating (see the note there).
 *
 * Loaded AFTER theme-default.style.css so these rules win by cascade order.
 * Palette mirrors the marketing site: slate-950 canvas + emerald accent.
 * Layout-preserving — we only recolour, so the theme's responsive/mobile
 * behaviour (nav-button, collapsing sidebar) is untouched.
 */

:root {
    --okd-canvas: #0b1120;      /* page + sidebar base            */
    --okd-panel: #0f172a;       /* raised panels / code column    */
    --okd-panel-2: #111c30;     /* table rows, inputs             */
    --okd-border: #1e293b;      /* hairlines                      */
    --okd-border-2: #273449;    /* stronger dividers              */
    --okd-text: #e2e8f0;        /* body text                      */
    --okd-text-strong: #f8fafc; /* headings                       */
    --okd-muted: #94a3b8;       /* secondary text                 */
    --okd-accent: #34d399;      /* emerald-400                    */
    --okd-accent-2: #10b981;    /* emerald-500                    */
    --okd-accent-soft: rgba(16, 185, 129, .14);
}

/* ---- Canvas ------------------------------------------------------------- */
html,
body {
    background-color: var(--okd-canvas) !important;
    color: var(--okd-text);
}

.page-wrapper {
    background-color: var(--okd-canvas) !important;
}

/* The main flowing column. Slate leaves this transparent over page-wrapper;
   force it dark so no light band shows through between sections. */
.content {
    background-color: var(--okd-canvas);
}

/* The right-hand "code" column: deepen it a touch so samples pop. */
.page-wrapper .dark-box {
    background-color: var(--okd-panel) !important;
    border-left: 1px solid var(--okd-border);
}

/* ---- Sidebar / TOC ------------------------------------------------------ */
.tocify-wrapper {
    background-color: var(--okd-canvas) !important;
    border-right: 1px solid var(--okd-border);
}

.tocify-wrapper .tocify-item > a,
.tocify-wrapper .tocify-subheader .tocify-item > a {
    color: var(--okd-muted);
}

.tocify-wrapper .tocify-item > a:hover,
.tocify-wrapper .tocify-subheader .tocify-item > a:hover {
    background-color: rgba(148, 163, 184, .08);
    color: var(--okd-text);
}

.tocify-wrapper .tocify-focus {
    background-color: var(--okd-accent-soft) !important;
    color: var(--okd-accent) !important;
    box-shadow: inset 3px 0 0 var(--okd-accent-2);
}

.tocify-wrapper .tocify-focus > a,
.tocify-wrapper .tocify-focus a {
    color: var(--okd-accent) !important;
}

.tocify-wrapper .tocify-subheader {
    background-color: transparent;
    font-weight: 500;
}

.tocify-wrapper .toc-footer {
    border-top: 1px solid var(--okd-border);
}

.tocify-wrapper .toc-footer a,
.tocify-wrapper .toc-footer li {
    color: var(--okd-muted);
}

.tocify-wrapper .toc-footer a:hover {
    color: var(--okd-accent);
}

/* Search box */
.tocify-wrapper > .search {
    border-bottom: 1px solid var(--okd-border);
}

.tocify-wrapper > .search input {
    color: var(--okd-text);
}

.tocify-wrapper > .search:before {
    color: var(--okd-muted);
}

.tocify-wrapper .search-results {
    background: var(--okd-panel);
}

.tocify-wrapper .search-results a {
    color: var(--okd-muted);
}

.tocify-wrapper .search-results a:hover {
    color: var(--okd-accent);
}

/* Mobile menu button */
#nav-button span {
    background-color: var(--okd-panel);
    color: var(--okd-text);
    border: 1px solid var(--okd-border);
    border-radius: 8px;
}

#nav-button img {
    filter: invert(1) opacity(.7);
}

/* ---- Content typography ------------------------------------------------- */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
    color: var(--okd-text-strong);
}

/* Slate paints section headers with white/near-white gradients — replace them
   with a dark slate gradient so the header text (now light) stays legible. */
.content h1 {
    border-top: 1px solid var(--okd-border);
    border-bottom: 1px solid var(--okd-border-2);
    background-image: linear-gradient(180deg, #0f172a, #0b1120) !important;
    padding-bottom: .3em;
}

.content h2 {
    border-top: 1px solid var(--okd-border);
    background-image: linear-gradient(180deg, rgba(148, 163, 184, .06), rgba(148, 163, 184, 0)) !important;
}

.content p,
.content li,
.content dt,
.content dd,
.content label {
    color: var(--okd-text);
}

.content a {
    color: var(--okd-accent);
}

.content a:hover {
    color: var(--okd-accent-2);
}

.content hr {
    border-color: var(--okd-border);
}

.content blockquote > p {
    background: var(--okd-panel-2);
    color: var(--okd-muted);
    border-left: 3px solid var(--okd-accent-2);
}

/* ---- Tables ------------------------------------------------------------- */
.content table {
    border: 1px solid var(--okd-border);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.content table th {
    background: var(--okd-panel-2);
    color: var(--okd-text-strong);
    border-bottom: 1px solid var(--okd-border-2);
}

.content table td {
    border-top: 1px solid var(--okd-border);
    color: var(--okd-text);
}

.content table tr:nth-child(odd) > td {
    background-color: transparent;
}

.content table tr:nth-child(even) > td {
    background-color: rgba(148, 163, 184, .04);
}

/* ---- Inline + block code ------------------------------------------------ */
.content code {
    background-color: var(--okd-accent-soft);
    color: var(--okd-accent);
    border-radius: 5px;
    padding: .12em .4em;
}

.content pre {
    background-color: #0a0f1a;
    border: 1px solid var(--okd-border);
    border-radius: 10px;
}

.content pre > code {
    background-color: transparent;
    color: #e2e8f0;
    border: 0;
    padding: 0;
}

.content pre a {
    color: var(--okd-accent);
}

/* ---- Method / status badges -------------------------------------------- */
.badge {
    border: 1px solid transparent;
    letter-spacing: .02em;
}

.badge.badge-green,
.badge.badge-darkgreen {
    background-color: var(--okd-accent-soft);
    color: var(--okd-accent);
    border-color: rgba(16, 185, 129, .35);
}

.badge.badge-blue,
.badge.badge-darkblue {
    background-color: rgba(56, 189, 248, .14);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, .35);
}

.badge.badge-purple {
    background-color: rgba(167, 139, 250, .14);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, .35);
}

.badge.badge-red,
.badge.badge-darkred {
    background-color: rgba(248, 113, 113, .14);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, .35);
}

.badge.badge-darkgoldenrod {
    background-color: rgba(251, 191, 36, .14);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, .35);
}

.badge.badge-black,
.badge.badge-grey {
    background-color: rgba(148, 163, 184, .14);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, .35);
}

/* ---- Asides (notice / warning / success) -------------------------------- */
.content aside {
    background: var(--okd-panel-2);
    color: var(--okd-text);
    border-radius: 8px;
}

.content aside strong,
.content aside b {
    color: var(--okd-text-strong);
}

.content aside.notice,
.content aside.info {
    border-left: 3px solid #38bdf8;
}

.content aside.warning {
    border-left: 3px solid #fbbf24;
}

.content aside.success {
    border-left: 3px solid var(--okd-accent-2);
}

/* ---- Forms: the "Try it out" panel + language selector ------------------ */
.lang-selector,
.page-wrapper .lang-selector {
    background-color: var(--okd-panel) !important;
    border-bottom: 1px solid var(--okd-border);
}

.lang-selector button {
    color: var(--okd-muted);
}

.lang-selector button:hover,
.lang-selector button:focus {
    color: var(--okd-text);
}

.lang-selector button.active {
    color: var(--okd-accent);
}

.content input[type=text],
.content input[type=number],
.content input[type=email],
.content input[type=password],
.content select,
.content textarea {
    background-color: var(--okd-panel-2);
    color: var(--okd-text);
    border: 1px solid var(--okd-border-2);
    border-radius: 6px;
    padding: 6px 8px;
}

.content input::placeholder,
.content textarea::placeholder {
    color: var(--okd-muted);
}

.content input[type=text]:focus,
.content input[type=number]:focus,
.content select:focus,
.content textarea:focus {
    border-color: var(--okd-accent-2);
    outline: none;
}

/* Try-it-out action buttons */
button.btn-tryitout,
.content button[type=submit],
button.execute,
.expandable button {
    background-color: var(--okd-accent-2);
    color: #04140d;
    border: 0;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

button.btn-tryitout:hover,
.content button[type=submit]:hover,
button.execute:hover {
    background-color: var(--okd-accent);
}

/* Endpoint response block */
.content .expandable pre,
.content details pre {
    background-color: #0a0f1a;
}

/* Fancy heading panel (base URL box) */
.fancy-heading-panel {
    background: var(--okd-panel);
    border: 1px solid var(--okd-border);
    border-radius: 8px;
    color: var(--okd-text);
}

.fancy-heading-panel b,
.fancy-heading-panel strong {
    color: var(--okd-accent);
}

/* ---- Mobile polish ------------------------------------------------------ */
@media (max-width: 930px) {
    .page-wrapper .dark-box {
        display: none;
    }

    .content {
        background-color: var(--okd-canvas);
    }

    .content pre {
        background-color: #0a0f1a;
    }

    .tocify-wrapper {
        background-color: var(--okd-canvas) !important;
    }
}