/* Fix colors for dark mode */
[data-theme="dark"] {
    /* Function and class names in documentation */
    --color-api-name: #9cdcfe;
    --color-api-pre-name: #9cdcfe;
}

/* Function signatures and API documentation */
[data-theme="dark"] .sig-name,
[data-theme="dark"] .sig-prename,
[data-theme="dark"] dt .sig-name,
[data-theme="dark"] dt .sig-prename {
    color: #9cdcfe !important;
}

/* Module and class names */
[data-theme="dark"] code.descclassname,
[data-theme="dark"] code.descname {
    color: #9cdcfe !important;
}

/* Links in function signatures */
[data-theme="dark"] .sig a,
[data-theme="dark"] dt a {
    color: #9cdcfe !important;
}

/* Parameter names */
[data-theme="dark"] .sig-param,
[data-theme="dark"] em.property {
    color: #c586c0 !important;
}

/* Default parameter values */
[data-theme="dark"] .sig-param .default_value {
    color: #ce9178 !important;
}

/* Return types and annotations */
[data-theme="dark"] .sig-return,
[data-theme="dark"] .sig-return-typehint {
    color: #4ec9b0 !important;
}

/* Code blocks and inline code */
[data-theme="dark"] code,
[data-theme="dark"] .literal {
    color: #ce9178 !important;
    background-color: #2d2d30 !important;
}

/* Source links */
[data-theme="dark"] .viewcode-link,
[data-theme="dark"] a.reference.internal {
    color: #569cd6 !important;
}

/* Improve readability of definition lists */
[data-theme="dark"] dt {
    background-color: #2d2d30 !important;
    border-left-color: #569cd6 !important;
}

/* Fix parameter descriptions */
[data-theme="dark"] dd {
    color: #cccccc !important;
}

/* Fix header colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: #e0e0e0 !important;
}

/* ========================================
   Dark Mode Toggle Button Improvements
   ======================================== */

/* Enhance the dark mode toggle button */
.theme-switcher {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hover effect - make button slightly bigger and add glow */
.theme-switcher:hover {
    transform: scale(1.15) !important;
    box-shadow: 0px 4px 20px 6px rgba(0, 0, 0, 0.75) !important;
}

/* Add tooltip using CSS */
.theme-switcher::after {
    content: "Toggle Light/Dark Mode";
    position: absolute;
    right: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    background-color: #2c2c2c;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Show tooltip on hover */
.theme-switcher:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(-5px);
}

/* Add a small arrow to the tooltip pointing to the button */
.theme-switcher::before {
    content: "";
    position: absolute;
    right: calc(100% + 7px);
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-left-color: #2c2c2c;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10000;
}

/* Show arrow on hover */
.theme-switcher:hover::before {
    opacity: 1;
}

/* Dark theme specific tooltip styling */
[data-theme="dark"] .theme-switcher::after {
    background-color: #f0f0f0;
    color: #2c2c2c;
}

[data-theme="dark"] .theme-switcher::before {
    border-left-color: #f0f0f0;
}

/* Make the button more visible in both themes */
[data-theme="dark"] .theme-switcher {
    background-color: #2c2c2c !important;
    color: #ffd700 !important;
}

/* Active state - slight press effect */
.theme-switcher:active {
    transform: scale(1.05) !important;
}