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

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

    /* 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;
}

/* Index and model-page hero media (shared with index_heroes/*.rst.inc) */
.pe-model-hero {
    width: 100%;
    max-width: 100%;
    margin: 16px 0 20px;
}

.pe-index-media-wide,
.pe-index-media-vertical {
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
}

.pe-index-media-wide img,
.pe-index-media-wide video,
.pe-index-media-vertical video,
.pe-index-media-vertical img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.pe-index-media-vertical video,
.pe-index-media-vertical img {
    background: #0a0a0a;
}

.pe-index-media-wide .img-comp-slider,
.pe-index-media-wide .img-comp-wrap {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
}

/* ==========================================================================
   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;
}

/* Light mode: force dark text when user chose light theme (overrides prefers-color-scheme) */
html:not(.dark) .highlight { background: #f0f0f0 !important; color: #333 !important; }
html:not(.dark) .highlight .c, html:not(.dark) .highlight .ch, html:not(.dark) .highlight .cm,
html:not(.dark) .highlight .cpf, html:not(.dark) .highlight .c1, html:not(.dark) .highlight .cs { color: #60A0B0 !important; font-style: italic; }
html:not(.dark) .highlight .cp { color: #007020 !important; }
html:not(.dark) .highlight .k, html:not(.dark) .highlight .kc, html:not(.dark) .highlight .kn,
html:not(.dark) .highlight .kp, html:not(.dark) .highlight .kr, html:not(.dark) .highlight .ow { color: #007020 !important; font-weight: bold; }
html:not(.dark) .highlight .kt { color: #902000 !important; }
html:not(.dark) .highlight .kd, html:not(.dark) .highlight .nb, html:not(.dark) .highlight .nl,
html:not(.dark) .highlight .nv, html:not(.dark) .highlight .vc, html:not(.dark) .highlight .vg,
html:not(.dark) .highlight .vi, html:not(.dark) .highlight .vm, html:not(.dark) .highlight .bp { color: #BB60D5 !important; }
html:not(.dark) .highlight .m, html:not(.dark) .highlight .mb, html:not(.dark) .highlight .mf,
html:not(.dark) .highlight .mh, html:not(.dark) .highlight .mi, html:not(.dark) .highlight .mo,
html:not(.dark) .highlight .il { color: #40A070 !important; }
html:not(.dark) .highlight .s, html:not(.dark) .highlight .sa, html:not(.dark) .highlight .sb,
html:not(.dark) .highlight .sc, html:not(.dark) .highlight .dl, html:not(.dark) .highlight .sd,
html:not(.dark) .highlight .s2, html:not(.dark) .highlight .se, html:not(.dark) .highlight .sh,
html:not(.dark) .highlight .si, html:not(.dark) .highlight .sx, html:not(.dark) .highlight .sr,
html:not(.dark) .highlight .s1, html:not(.dark) .highlight .ss { color: #4070A0 !important; }
html:not(.dark) .highlight .na, html:not(.dark) .highlight .nc, html:not(.dark) .highlight .nf,
html:not(.dark) .highlight .fm { color: #06287E !important; }
html:not(.dark) .highlight .nt { color: #062873 !important; }
html:not(.dark) .highlight .o, html:not(.dark) .highlight .err, html:not(.dark) .highlight .g,
html:not(.dark) .highlight .l, html:not(.dark) .highlight .n, html:not(.dark) .highlight .x,
html:not(.dark) .highlight .p, html:not(.dark) .highlight .ge, html:not(.dark) .highlight .ges,
html:not(.dark) .highlight .gr, html:not(.dark) .highlight .gh, html:not(.dark) .highlight .gi,
html:not(.dark) .highlight .go, html:not(.dark) .highlight .gp, html:not(.dark) .highlight .gs,
html:not(.dark) .highlight .gu, html:not(.dark) .highlight .gt, html:not(.dark) .highlight .no,
html:not(.dark) .highlight .nd, html:not(.dark) .highlight .ni, html:not(.dark) .highlight .ne,
html:not(.dark) .highlight .nn, html:not(.dark) .highlight .nx, html:not(.dark) .highlight .py,
html:not(.dark) .highlight .pm, html:not(.dark) .highlight .w { color: #333 !important; }
html:not(.dark) .highlight .gd { color: #A00000 !important; }

/* ==========================================================================
   Dark Mode Code Block (Dracula) - for manual theme toggle
   ========================================================================== */
.dark .highlight .hll { background-color: #44475a; }
.dark .highlight { background: #282a36; color: #F8F8F2; }
.dark .highlight .c, .dark .highlight .ch, .dark .highlight .cm, .dark .highlight .cpf, .dark .highlight .c1, .dark .highlight .cs { color: #6272A4; font-style: italic; }
.dark .highlight .cp { color: #FF79C6; }
.dark .highlight .k, .dark .highlight .kc, .dark .highlight .kn, .dark .highlight .kp, .dark .highlight .kr, .dark .highlight .ow { color: #FF79C6; }
.dark .highlight .kt { color: #8BE9FD; }
.dark .highlight .kd, .dark .highlight .nb, .dark .highlight .nl, .dark .highlight .nv, .dark .highlight .vc, .dark .highlight .vg, .dark .highlight .vi, .dark .highlight .vm, .dark .highlight .bp { color: #8BE9FD; font-style: italic; }
.dark .highlight .m, .dark .highlight .mb, .dark .highlight .mf, .dark .highlight .mh, .dark .highlight .mi, .dark .highlight .mo, .dark .highlight .il { color: #FFB86C; }
.dark .highlight .s, .dark .highlight .sa, .dark .highlight .sb, .dark .highlight .sc, .dark .highlight .dl, .dark .highlight .sd, .dark .highlight .s2, .dark .highlight .se, .dark .highlight .sh, .dark .highlight .si, .dark .highlight .sx, .dark .highlight .sr, .dark .highlight .s1, .dark .highlight .ss { color: #BD93F9; }
.dark .highlight .na, .dark .highlight .nc, .dark .highlight .nf, .dark .highlight .fm { color: #50FA7B; }
.dark .highlight .nt { color: #FF79C6; }
.dark .highlight .gd { color: #8B080B; }
.dark .highlight .o, .dark .highlight .err, .dark .highlight .g, .dark .highlight .l, .dark .highlight .n, .dark .highlight .x, .dark .highlight .p, .dark .highlight .ge, .dark .highlight .ges, .dark .highlight .gr, .dark .highlight .gh, .dark .highlight .gi, .dark .highlight .go, .dark .highlight .gp, .dark .highlight .gs, .dark .highlight .gu, .dark .highlight .gt, .dark .highlight .no, .dark .highlight .nd, .dark .highlight .ni, .dark .highlight .ne, .dark .highlight .nn, .dark .highlight .nx, .dark .highlight .py, .dark .highlight .pm, .dark .highlight .w { color: #F8F8F2; }
.dark td.linenos .normal, .dark span.linenos { color: #f1fa8c; background-color: #44475a; }
.dark td.linenos .special, .dark span.linenos.special { color: #50fa7b; background-color: #6272a4; }

/* ==========================================================================
   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;
}