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

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

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

.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;
    }
}

/* ==========================================================================
   Syntax Highlighting
   ========================================================================== */

/* Dark mode syntax highlighting - more vibrant colors for better contrast */
.dark .highlight .k { color: #569CD6; }        /* Keyword - blue */
.dark .highlight .kd { color: #569CD6; }       /* Keyword.Declaration */
.dark .highlight .kn { color: #569CD6; }       /* Keyword.Namespace */
.dark .highlight .kp { color: #569CD6; }       /* Keyword.Pseudo */
.dark .highlight .kr { color: #569CD6; }       /* Keyword.Reserved */
.dark .highlight .kt { color: #4EC9B0; }       /* Keyword.Type - teal */

.dark .highlight .na { color: #9CDCFE; }       /* Name.Attribute - light blue */
.dark .highlight .nb { color: #DCDCAA; }       /* Name.Builtin - light yellow */
.dark .highlight .nc { color: #4EC9B0; }       /* Name.Class - teal */
.dark .highlight .no { color: #B5CEA8; }       /* Name.Constant - light green */
.dark .highlight .nd { color: #DCDCAA; }       /* Name.Decorator - light yellow */
.dark .highlight .ni { color: #9CDCFE; }       /* Name.Entity - light blue */
.dark .highlight .ne { color: #B5CEA8; }       /* Name.Exception - light green */
.dark .highlight .nf { color: #DCDCAA; }       /* Name.Function - light yellow */
.dark .highlight .nl { color: #9CDCFE; }       /* Name.Label - light blue */
.dark .highlight .nn { color: #4EC9B0; }       /* Name.Namespace - teal */
.dark .highlight .nt { color: #569CD6; }       /* Name.Tag - blue */
.dark .highlight .nv { color: #9CDCFE; }       /* Name.Variable - light blue */
.dark .highlight .bp { color: #DCDCAA; }       /* Name.Builtin.Pseudo - light yellow */

.dark .highlight .s { color: #CE9178; }        /* Literal.String - light orange */
.dark .highlight .s1 { color: #CE9178; }       /* Literal.String.Single */
.dark .highlight .s2 { color: #CE9178; }       /* Literal.String.Double */
.dark .highlight .sh { color: #CE9178; }       /* Literal.String.Heredoc */
.dark .highlight .si { color: #CE9178; }       /* Literal.String.Interpol */
.dark .highlight .sx { color: #CE9178; }       /* Literal.String.Other */

.dark .highlight .m { color: #B5CEA8; }        /* Literal.Number - light green */
.dark .highlight .mf { color: #B5CEA8; }       /* Literal.Number.Float */
.dark .highlight .mh { color: #B5CEA8; }       /* Literal.Number.Hex */
.dark .highlight .mi { color: #B5CEA8; }       /* Literal.Number.Integer */
.dark .highlight .il { color: #B5CEA8; }       /* Literal.Number.Integer.Long */
.dark .highlight .mo { color: #B5CEA8; }       /* Literal.Number.Oct */

.dark .highlight .c { color: #6A9955; }        /* Comment - green */
.dark .highlight .c1 { color: #6A9955; }       /* Comment.Single */
.dark .highlight .cm { color: #6A9955; }       /* Comment.Multiline */
.dark .highlight .cp { color: #6A9955; }       /* Comment.Preproc */
.dark .highlight .cpf { color: #6A9955; }      /* Comment.PreprocFile */

.dark .highlight .o { color: #D4D4D4; }        /* Operator - light gray */
.dark .highlight .ow { color: #D4D4D4; }       /* Operator.Word */

.dark .highlight .p { color: #D4D4D4; }        /* Punctuation - light gray */

.dark .highlight .g { color: #D4D4D4; }        /* Generic - light gray */
.dark .highlight .gd { color: #F44747; }       /* Generic.Deleted - red */
.dark .highlight .ge { color: #D4D4D4; }       /* Generic.Emph */
.dark .highlight .gr { color: #F44747; }       /* Generic.Error - red */
.dark .highlight .gh { color: #9CDCFE; }       /* Generic.Heading - light blue */
.dark .highlight .gi { color: #B5CEA8; }       /* Generic.Inserted - light green */
.dark .highlight .go { color: #6A9955; }       /* Generic.Output - green */
.dark .highlight .gp { color: #9CDCFE; }       /* Generic.Prompt - light blue */
.dark .highlight .gs { color: #D4D4D4; }       /* Generic.Strong */
.dark .highlight .gu { color: #9CDCFE; }       /* Generic.Subheading - light blue */
.dark .highlight .gt { color: #569CD6; }       /* Generic.Traceback - blue */

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

/* Adjust scrolltop button positioning to avoid overlap - high specificity */
button#scrolltop,
#scrolltop {
    z-index: 10 !important;
    position: fixed !important;
    bottom: 1.2rem !important; /* matches bottom-8 */
    right: 4.5rem !important; /* matches right-8 */
}

/* Alternative: if scrolltop uses different classes, target them */
.scrolltop,
[data-scrolltop],
.scroll-to-top,
.back-to-top {
    z-index: 10 !important;
    position: fixed !important;
    bottom: 1.2rem !important; /* matches bottom-8 */
    right: 4.5rem !important; /* matches right-8 */
}

/* Force override Tailwind classes */
button.fixed.bottom-8.right-8#scrolltop {
    bottom: 1.2rem !important;
    right: 4.5rem !important;
}