/* Custom CSS for code blocks with specific dimensions and scrolling */

/* Target all code blocks */
div.highlight,
div.literal-block-wrapper,
div.code-block-wrapper,
.highlight-bash,
.highlight-python,
.highlight-default {
    max-width: 789px;
    max-height: 369px;
    overflow: auto;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    margin: 1em 0;
}

/* Ensure pre elements inside also respect the sizing */
div.highlight pre,
div.literal-block-wrapper pre,
div.code-block-wrapper pre {
    max-width: 789px;
    max-height: 369px;
    overflow: auto;
    margin: 0;
    padding: 1em;
}

/* For code blocks with line numbers */
div.highlight-bash.notranslate div.highlight,
div.highlight-python.notranslate div.highlight,
div.highlight-default.notranslate div.highlight {
    max-width: 789px;
    max-height: 369px;
    overflow: auto;
}

/* Style the scrollbars for better visibility */
div.highlight::-webkit-scrollbar,
div.literal-block-wrapper::-webkit-scrollbar,
pre::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

div.highlight::-webkit-scrollbar-track,
div.literal-block-wrapper::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

div.highlight::-webkit-scrollbar-thumb,
div.literal-block-wrapper::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

div.highlight::-webkit-scrollbar-thumb:hover,
div.literal-block-wrapper::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For MyST-parser code blocks */
.code-block {
    max-width: 789px;
    max-height: 369px;
    overflow: auto;
    position: relative;
}

/* Ensure tables with line numbers work properly */
table.highlighttable {
    width: 100%;
    max-width: 789px;
}

table.highlighttable td.linenos {
    width: auto;
    padding-right: 10px;
    vertical-align: top;
}

table.highlighttable td.code {
    width: 100%;
    max-height: 369px;
    overflow: auto;
    display: block;
}

/* Fix for code blocks that might be inside other containers */
.sd-tab-content div.highlight,
.sphinx-tabs-panel div.highlight,
details div.highlight {
    max-width: 789px;
    max-height: 369px;
    overflow: auto;
}

/* Add a subtle shadow to make scrollable area more apparent */
div.highlight,
div.literal-block-wrapper,
div.code-block-wrapper {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Optional: Add a visual indicator when content is scrollable */
div.highlight:hover,
div.literal-block-wrapper:hover,
div.code-block-wrapper:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* For copy button compatibility */
.highlight {
    position: relative;
}

/* Ensure copy button doesn't interfere with scrolling */
.highlight button.copybtn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    z-index: 10;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 850px) {
    div.highlight,
    div.literal-block-wrapper,
    div.code-block-wrapper,
    div.highlight pre,
    div.literal-block-wrapper pre,
    div.code-block-wrapper pre {
        max-width: 100%;
        max-width: calc(100vw - 2em);
    }
}