/* ==========================================================================
   Custom CSS Overrides for Sphinx RTD Theme Using Tailwind-Inspired Colors
   ==========================================================================
   This file defines a full set of CSS variables (from your Tailwind config)
   and then overrides key selectors in the RTD theme to use your colors and
   font families. The only spacing changes are the 4px gap below each item
   and a 4px margin-top for sub-lists to separate them from the parent.
   ========================================================================= */

/* --------------------------------------------------------------------------
   1) CSS Variables: Tailwind-inspired colors, fonts
-------------------------------------------------------------------------- */
:root {
    /* Fonts */
    --font-sans: "Geist", sans-serif;
    --font-mono: "Geist Mono", monospace;

    /* Gradients (unused but kept for reference) */
    --gradient-primary-start: #191A1F;
    --gradient-primary-end: #444546;
    --gradient-body-light-start: #FFFFFF;
    --gradient-body-light-end: #F9FAFB;

    /* Gray scale */
    --color-gray-50: #fafafa;
    --color-gray-70: #F6F6F6;
    --color-gray-100: #ffffff;
    --color-gray-200: #e6e6e6;
    --color-gray-300: #cecece;
    --color-gray-400: #b5b5b5;
    --color-gray-500: #9d9d9d;
    --color-gray-600: #848484;
    --color-gray-700: #6c6c6c;
    --color-gray-800: #535353;
    --color-gray-900: #3b3b3b;

    /* Primary scale */
    --color-primary-100: #d7d7d7;
    --color-primary-200: #c3c3c3;
    --color-primary-300: #afafaf;
    --color-primary-400: #9b9b9b;
    --color-primary-500: #868686;
    --color-primary-600: #727272;
    --color-primary-700: #5e5e5e;
    --color-primary-800: #4a4a4a;
    --color-primary-900: #363636;
    --color-primary-1000: #222222;
    --color-primary-alpha-10: rgba(34, 34, 34, 0.1);

    /* Green scale */
    --color-green-100: #baf6e3;
    --color-green-200: #98f2d5;
    --color-green-300: #76edc6;
    --color-green-400: #54e9b8;
    --color-green-500: #31e4aa;
    --color-green-600: #1bd398;
    --color-green-700: #17b17f;
    --color-green-800: #139269;
    --color-green-900: #0f7353;

    /* Red scale */
    --color-red-100: #fcdada;
    --color-red-200: #f9b4b4;
    --color-red-300: #f58f8f;
    --color-red-400: #f26969;
    --color-red-500: #ef4444;
    --color-red-600: #ec2424;

    /* Orange scale */
    --color-orange-100: #fee8d6;
    --color-orange-200: #fdd1ac;
    --color-orange-300: #fdba83;
    --color-orange-400: #fca35a;
    --color-orange-500: #fb8c30;
    --color-orange-600: #fa7507;

    /* Blue scale */
    --color-blue-100: #d5e3ff;
    --color-blue-200: #abc7ff;
    --color-blue-300: #81abff;
    --color-blue-400: #578fff;
    --color-blue-500: #2d73ff;
    --color-blue-600: #0357ff;

    /* Yellow scale */
    --color-yellow-100: #fffdd9;
    --color-yellow-200: #fffab3;
    --color-yellow-300: #fff88e;
    --color-yellow-400: #fff568;
    --color-yellow-500: #fff342;
    --color-yellow-600: #fff11d;
}

/* Override logo in dark mode */
@media (prefers-color-scheme: dark) {
    .wy-side-nav-search .logo {
        content: url("_static/idapython-dark.svg");
    }
}

/* --------------------------------------------------------------------------
   2) Base Styles & Typography (Colors & Fonts Only)
-------------------------------------------------------------------------- */
html,
body {
    font-family: var(--font-sans);
    background-color: var(--color-gray-50);
    color: var(--color-gray-900);
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
    font-family: var(--font-sans);
    color: var(--color-primary-1000);
}

.rst-content,
.document,
.section {
    font-family: var(--font-sans);
    line-height: 1.6;
}

code,
pre,
.literal-block,
.highlight {
    font-family: var(--font-mono);
    background-color: var(--color-gray-70);
    color: var(--color-primary-1000);
}

a:visited,
a {
    color: #346ddb;
    text-decoration: none;
    transition: 0.2s ease;
}

a:hover {
    color: #346ddb;
    opacity: 0.6;
}

a.external::after {
    content: " 🔗";
    font-size: 0.8em;
    vertical-align: super;
}

/* --------------------------------------------------------------------------
   3) Sphinx RTD Sidebar & Nav
   (Colors/Fonts + 4px gap for every item + margin-top on sub-lists)
-------------------------------------------------------------------------- */

/* Main content area */
.wy-nav-content {
    max-width: 100%;
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
    min-height: 100vh;
}

/* Sidebar background and color */
.wy-nav-side {
    background-color: var(--color-gray-100);
    color: var(--color-primary-1000);
    border-right: 1px solid var(--color-primary-100) !important;
    padding-bottom: 12px;
}

/* 4px gap under EVERY li item */
.wy-nav-side ul li {
    margin-bottom: 4px !important;
}

/* 4px margin-top for sub-lists so there's a gap between parent & children */
.wy-nav-side ul ul {
    margin-top: 4px !important;
}

/* Level-based backgrounds:
   L1 => gray-100, L2 => gray-70, L3 => gray-200, L4 => gray-300, etc. */
.wy-menu-vertical li.toctree-l1 > a {
    background-color: var(--color-gray-100) !important;
}

.wy-menu-vertical li.toctree-l2 > a {
    background-color: var(--color-gray-70) !important;
}

.wy-menu-vertical li.toctree-l3 > a {
    background-color: var(--color-gray-200) !important;
}

.wy-menu-vertical li.toctree-l4 > a {
    background-color: var(--color-gray-300) !important;
}

/* Nav links: color, border, etc. */
.wy-nav-side ul li a {
    font-family: var(--font-sans) !important;
    color: var(--color-primary-1000) !important;
    border: 1px solid transparent !important;
    padding: 8px 24px !important;
    border-radius: 4px !important;
}

/* On hover: keep background, show 1px border */
.wy-nav-side ul li a:hover {
    color: var(--color-primary-1000) !important;
    opacity: 1 !important;
    border: 1px solid var(--color-primary-100) !important;
}

/* Current (active) L1 item => gray-70 background, normal weight, border */
.wy-menu-vertical li.toctree-l1.current > a {
    background-color: var(--color-gray-70) !important;
    border: 1px solid var(--color-primary-100) !important;
}

/* Ensure .current always has border */
.wy-menu-vertical li.current > a {
    border: 1px solid var(--color-primary-100) !important;
}

/* Additional vertical menu settings */
.wy-menu.wy-menu-vertical {
    padding: 0 12px;
}

.wy-menu-vertical li.current {
    background: transparent;
}

.wy-menu-vertical li.toctree-l2.current > a,
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a {
    background: transparent;
}

.wy-menu-vertical li.toctree-l2.current > a {
    margin-bottom: 4px;
    font-weight: 400;
    background-color: var(--color-gray-70);
}

/* Search box in the sidebar */
.wy-side-nav-search {
    background-color: var(--color-primary-1000);
    margin-bottom: 12px;
}

.wy-side-nav-search input[type="text"] {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 16px;
    border: 1px solid var(--color-primary-100);
    height: 38px;
    transition: 0.2s ease;
}

.wy-side-nav-search input[type="text"]:focus,
.wy-side-nav-search input[type="text"]:hover {
    background: var(--color-gray-50);
}

.wy-side-nav-search input[type="text"]:focus {
    border: 1px solid var(--color-primary-700);
    outline: 1px solid var(--color-gray-50);
}

.wy-side-nav-search > a.icon {
    color: var(--color-gray-100);
    display: block;
}

.wy-menu-vertical p.caption {
    display: none;
}

/* --------------------------------------------------------------------------
   4) Additional Overrides (HR, dt elements, buttons, etc.)
-------------------------------------------------------------------------- */

hr {
    border-top: 1px solid var(--color-primary-100);
}

/* RST doc expansions, dt styling */
html.writer-html4 .rst-content dl:not(.docutils) > dt,
html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt {
    background: var(--color-blue-100);
    border-top: 1px solid var(--color-blue-400);
    color: var(--color-blue-500);
    border-radius: 2px;
}

.rst-content .viewcode-back,
.rst-content .viewcode-link {
    color: var(--color-green-800);
}

/* Nested dl styling */
html.writer-html4 .rst-content dl:not(.docutils) dl:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple) > dt,
html.writer-html5 .rst-content dl[class]:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple)
dl:not(.option-list):not(.field-list):not(.footnote):not(.citation):not(.glossary):not(.simple)
> dt {
    border-left: 3px solid var(--color-primary-100);
    background: var(--color-gray-70);
    color: var(--color-gray-700);
    border-radius: 2px;
}

/* Buttons: .btn-neutral */
body .btn-neutral:visited,
body .btn-neutral {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary-1000) !important;
    border-radius: 6px;
    border: 1px solid var(--color-primary-1000);
    background: var(--color-gray-100) !important;
    box-shadow: none;
    padding: 4px 12px;
    height: 32px;
    font-family: var(--font-sans);
    transition: 0.2s ease;
    font-size: 16px;
    outline: none !important;
}

body .btn-neutral:hover {
    background: var(--color-gray-200) !important;
    opacity: 1;
}

body .btn-neutral span {
    color: inherit;
    font-size: 12px;
}

/* Code styling within content */
.rst-content code.literal,
.rst-content tt.literal {
    color: var(--color-red-500);
}

.rst-content code,
.rst-content tt,
code {
    border-radius: 2px;
    border: 1px solid var(--color-primary-100);
}

/* Footer styling */
footer p,
footer {
    font-size: 12px;
    line-height: 16px;
}

/* Top nav bar */
.wy-nav-top {
    background: var(--color-primary-1000);
}

input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week]{
    box-shadow: none;
}

span.summarylabel {
    background-color: var(--color-foreground-secondary);
    color: var(--color-background-secondary);
    font-size: 70%;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 3px;
    vertical-align: 15%;
    padding-bottom: 2px;
    filter: opacity(40%);
}