/* ==========================================================================
   Pruna Documentation Custom Styles
   ========================================================================== */

/* ==========================================================================
   Color Variables
   ========================================================================== */
:root {
    /* Primary Colors */
    --pruna-purple: #9334E9;
    --pruna-purple-dark: #581C87;
    --pruna-purple-light: #A855F7;

    /* Background Colors */
    --bg-light: #ffffff;
    --bg-dark: #120B1B;
    --bg-gray-light: #f3f4f6;

    /* Text Colors */
    --text-light: #581C87;
    --text-dark: #ffffff;
    --text-gray: #6b7280;
    --text-gray-light: #9ca3af;

    /* Border Colors */
    --border-light: #E5E5E5;
    --border-dark: #000000;

    /* Interactive Colors */
    --hover-light: rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.hidden_code,
.hidden-code {
    display: none !important;
}

/* ==========================================================================
   External Links
   ========================================================================== */
a.reference.external,
.body a.reference.external,
.sidebar a.reference.external,
a.reference.external:hover {
    color: var(--pruna-purple) !important;
}

/* ==========================================================================
   Mermaid Diagrams
   ========================================================================== */
.mermaid {
    background-color: var(--bg-light);
}

/* ==========================================================================
   FAQ Dropdowns
   ========================================================================== */
.admonition.dropdown p {
    padding-bottom: 20px;
}

details {
    margin-bottom: 15px;
}

summary.toggle-details__summary svg.tb-icon {
    display: none;
}

summary::-webkit-details-marker {
    display: none;
}

.toggle .header {
    display: block;
    clear: both;
}

/* ==========================================================================
   Container Spacing
   ========================================================================== */
/* Only remove padding from specific problematic containers */
.sd-container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Preserve normal container spacing */
.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   Sphinx Tabs
   ========================================================================== */
.sphinx-tabs {
    margin-top: 20px;
}

.sphinx-tabs-tab {
    color: var(--pruna-purple-dark) !important;
}

.sphinx-tabs-panel {
    background-color: var(--bg-light) !important;
}

/* Dark mode tabs */
.dark .sphinx-tabs-panel {
    background-color: var(--bg-dark) !important;
}

.dark .sphinx-tabs-tab {
    color: var(--pruna-purple-light) !important;
}

.dark .sphinx-tabs-tab[aria-selected="true"] {
    background-color: var(--bg-dark) !important;
    border-bottom-color: var(--bg-dark) !important;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
header.sticky {
    background-color: var(--pruna-purple-light) !important;
    color: var(--text-dark) !important;
}

.dark header.sticky {
    background-color: var(--pruna-purple-dark) !important;
    color: var(--text-dark) !important;
}

/* Navbar links - default styling (white, not bold, not underlined) */
header nav a[href] {
    color: var(--text-dark) !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

/* Selected navbar link - bold and underlined */
header nav a[href].recently-selected {
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Sidebar Navigation - Current Page Highlighting
   ========================================================================== */
/* Current sidebar link - highlighted with purple color and bold font */
#left-sidebar a.current,
#left-sidebar a.reference.current,
#left-sidebar .current a,
#left-sidebar li.current > a {
    font-weight: 600 !important;
}


#left-sidebar li.current {
    border-left: 3px solid var(--pruna-purple) !important;
    padding-left: 0.5rem !important;
    margin-left: -0.5rem !important;
}

.dark #left-sidebar li.current {
    border-left-color: var(--pruna-purple-light) !important;
}

/* ==========================================================================
   Body & Background
   ========================================================================== */
.dark body {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
}

/* ==========================================================================
   Search Box
   ========================================================================== */
#searchbox input {
    background-color: var(--bg-light) !important;
    color: var(--pruna-purple-dark) !important;
    border-color: var(--border-light) !important;
}

#searchbox input::placeholder {
    color: var(--pruna-purple-dark) !important;
}

.dark #searchbox input {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-dark) !important;
}

.dark #searchbox input::placeholder {
    color: var(--text-dark) !important;
}

/* Hide built-in theme toggle from sphinxawesome_theme */
button[aria-label*="theme" i]:not(.theme-toggle-btn),
button[aria-label*="dark" i]:not(.theme-toggle-btn):not(.github-button):not(.discord-button):not(.blog-button):not(.huggingface-button),
button[aria-label*="light" i]:not(.theme-toggle-btn),
button[title*="theme" i]:not(.theme-toggle-btn),
button[title*="dark" i]:not(.theme-toggle-btn):not(.github-button):not(.discord-button):not(.blog-button):not(.huggingface-button),
button[title*="light" i]:not(.theme-toggle-btn),
button[data-theme-toggle]:not(.theme-toggle-btn),
button:has(svg path[d*="M21 12.79"]):not(.theme-toggle-btn),
button:has(svg path[d*="M12.79"]):not(.theme-toggle-btn),
button:has(svg circle[cx="12"][cy="12"]):not(.theme-toggle-btn),
header button:not(.theme-toggle-btn):not(.github-button):not(.discord-button):not(.blog-button):not(.huggingface-button):not(.header-button):has(svg):not(:has(span:not([aria-hidden]))) {
    display: none !important;
}

/* ==========================================================================
   Header Buttons
   ========================================================================== */
.header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    font-size: 14px;
    height: auto;
    min-height: 24px;
    transition: background-color 0.2s ease;
}

.header-button:hover {
    background-color: var(--hover-light);
}

.header-button svg {
    height: 16px;
    width: 16px;
}

.theme-toggle-btn {
    padding: 0.4rem;
}
.theme-toggle-btn .theme-icon-light {
    display: none;
}
.dark .theme-toggle-btn .theme-icon-dark {
    display: none;
}
.dark .theme-toggle-btn .theme-icon-light {
    display: inline;
}

.github-button,
.huggingface-button,
.discord-button,
.blog-button {
    font-weight: 500;
}

/* ==========================================================================
   Logo Styling
   ========================================================================== */
.sphinxawesome_theme .logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.sphinxawesome_theme .logo img {
    margin: 0 auto !important;
    display: block !important;
}

/* ==========================================================================
   Notebook Output Styling
   ========================================================================== */
div.nboutput.container div.output_area .highlight,
div.nboutput.container div.output_area pre {
    background: var(--pruna-purple-very-light) !important;
}

.dark div.nboutput.container div.output_area .highlight,
.dark div.nboutput.container div.output_area pre {
    background: var(--pruna-purple-dark) !important;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 768px) {
    .header-buttons {
        margin: 0.5rem 0;
        justify-content: center;
        width: 100%;
        order: unset;
        margin-left: 0;
        margin-right: 0;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .header-button {
        padding: 0.4rem 0.8rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .header-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .header-button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Figure Captions
   ========================================================================== */
figcaption {
    margin: 0 !important;
}

#content figcaption {
    margin: 0 !important;
}

/* ==========================================================================
   Image Margins
   ========================================================================== */
img {
    margin: 0 !important;
}

#content img {
    margin: 0 !important;
}

/* ==========================================================================
   Plain Chat and Scrolltop Button Positioning
   ========================================================================== */

button#scrolltop,
#scrolltop,
.scrolltop,
[data-scrolltop],
.scroll-to-top,
.back-to-top,
button.fixed.bottom-8.right-8#scrolltop {
    z-index: 10 !important;
    position: fixed !important;
    bottom: 1.2rem !important;
    right: 4.5rem !important;
}

/* ==========================================================================
   Code Block Wrapping
   ========================================================================== */

.highlight,
.highlight pre,
.highlight code,
.highlight pre code,
pre.literal-block,
.literal-block,
code.code-block {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
}

/* ==========================================================================
   Full Width Content When TOC is Hidden
   ========================================================================== */
/* Ensure content uses full width when TOC sidebar is hidden (notoc metadata) */
main.xl\:grid-cols-\[1fr\] #content {
    max-width: 100% !important;
    width: 100% !important;
}