/* =========================================
   1. RED AND BLACK SIDE PANEL THEME
   ========================================= */

/* Search header area (Red) */
.wy-side-nav-search, .wy-nav-top {
    background-color: #aa0000 !important; 
}

/* Side navigation base background (Black) */
.wy-nav-side {
    background-color: #121212 !important; 
}

/* Base side panel text and link colors */
.wy-menu-vertical a {
    color: #cccccc !important;
}

/* Hover state for all side panel links */
.wy-menu-vertical a:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* --- FIX FOR UNREADABLE NESTED MENUS --- */

/* Background for expanded sections and nested lists */
.wy-menu-vertical li.current,
.wy-menu-vertical li.current > ul {
    background-color: #1a1a1a !important; /* Dark gray for sub-menus */
}

/* Links inside expanded nested lists */
.wy-menu-vertical li.current ul li a {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
    border-right: none !important;
}

/* Hover for links inside nested lists */
.wy-menu-vertical li.current ul li a:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Active/Current top-level section highlight */
.wy-menu-vertical li.current > a, 
.wy-menu-vertical li.onfocus > a {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* The currently active SUB-item (the page you are actually on) */
.wy-menu-vertical li.current ul li.current > a {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-right: solid 3px #aa0000 !important; /* Red accent line */
}

/* =========================================
   2. SYSTEM-BASED DARK MODE
   ========================================= */

/* Detects if the computer is set to Dark Mode */
@media (prefers-color-scheme: dark) {
    /* Main body background */
    .wy-nav-content-wrap, .wy-body-for-nav {
        background-color: #121212 !important;
    }
    
    /* Content reading area */
    .wy-nav-content {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
    }
    
    /* Headings */
    h1, h2, h3, h4, h5, h6 {
        color: #ffffff !important;
    }
    
    /* Standard links in the main text */
    .wy-nav-content a {
        color: #ff6666 !important; 
    }

    /* Darken code blocks and API reference boxes slightly */
    .highlight {
        background: #2b2b2b !important;
    }
    
    /* --- FIX FOR TABLE READABILITY --- */
    
    /* Header row background */
    .wy-table-responsive table thead th {
        background-color: #121212 !important;
        color: #ffffff !important;
    }

    /* Base background for all table cells */
    .wy-table-responsive table td, 
    .wy-table-responsive table th {
        color: #e0e0e0 !important;
        border-color: #444444 !important;
        background-color: transparent !important;
    }

    /* Override the alternating light stripes with dark grays */
    .wy-table-responsive table tr:nth-child(odd) td,
    .wy-table-responsive table tr:nth-child(odd) th {
        background-color: #1e1e1e !important; 
    }

    .wy-table-responsive table tr:nth-child(even) td,
    .wy-table-responsive table tr:nth-child(even) th {
        background-color: #2a2a2a !important; 
    }
    /* --- FIX FOR ADMONITION BLOCKS (NOTES, WARNINGS) --- */
    
    /* Make the background of the note body dark */
    .wy-nav-content .admonition,
    .wy-nav-content .admonition.note,
    .wy-nav-content .admonition.warning,
    .wy-nav-content .admonition.tip {
        background-color: #222222 !important;
        color: #e0e0e0 !important;
    }

    /* Optional: Darken the blue title bar slightly so it matches the dark theme better */
    .wy-nav-content .admonition.note .admonition-title {
        background-color: #1f6b9c !important; 
        color: #ffffff !important;
    }
}
/* --- FIX FOR BLUE CATEGORY HEADERS --- */

/* Change the blue section captions to red */
.wy-menu-vertical p.caption,
.wy-menu-vertical p.caption span.caption-text {
    color: #aa0000 !important; 
    font-weight: bold !important;
}