/* Sidebar Layout Styles */
.sidebar-sticky {
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Ensure controls section can scroll if needed */
.sidebar-sticky .p-3 {
    overflow-y: auto;
    flex-grow: 1;
}

/* Version list styling */
.version-list {
    flex-shrink: 0;
}

.version-list::-webkit-scrollbar {
    width: 4px;
}

.version-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.version-list::-webkit-scrollbar-thumb {
    background: #ea39b8;
    border-radius: 2px;
}

.version-list::-webkit-scrollbar-thumb:hover {
    background: #f472b6;
}

/* CodeMirror Integration Styles */
.CodeMirror {
    height: calc(100vh - 400px); /* Dynamic height: full viewport minus space for output */
    min-height: 300px; /* Minimum height to ensure usability */
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    border: none;
    background-color: #1a1d29 !important; /* Complement Vapor theme */
}

.CodeMirror-focused {
    outline: none;
}

/* Ensure CodeMirror text is visible on dark background */
.CodeMirror {
    color: #f8f9fa !important;
}

.CodeMirror-cursor {
    border-left-color: #ea39b8 !important; /* Vapor theme accent color */
}

/* Remove text glow effects from code areas */
.CodeMirror,
.CodeMirror * {
    text-shadow: none !important;
}

.CodeMirror .cm-keyword { text-shadow: none !important; }
.CodeMirror .cm-atom { text-shadow: none !important; }
.CodeMirror .cm-number { text-shadow: none !important; }
.CodeMirror .cm-def { text-shadow: none !important; }
.CodeMirror .cm-variable { text-shadow: none !important; }
.CodeMirror .cm-punctuation { text-shadow: none !important; }
.CodeMirror .cm-property { text-shadow: none !important; }
.CodeMirror .cm-operator { text-shadow: none !important; }
.CodeMirror .cm-variable-2 { text-shadow: none !important; }
.CodeMirror .cm-variable-3 { text-shadow: none !important; }
.CodeMirror .cm-comment { text-shadow: none !important; }
.CodeMirror .cm-string { text-shadow: none !important; }
.CodeMirror .cm-string-2 { text-shadow: none !important; }
.CodeMirror .cm-meta { text-shadow: none !important; }
.CodeMirror .cm-qualifier { text-shadow: none !important; }
.CodeMirror .cm-builtin { text-shadow: none !important; }
.CodeMirror .cm-bracket { text-shadow: none !important; }
.CodeMirror .cm-tag { text-shadow: none !important; }
.CodeMirror .cm-attribute { text-shadow: none !important; }

/* Custom tweaks for Bootstrap integration */
.card-body.p-0 .CodeMirror {
    border-radius: 0;
}

/* Output section styling for Vapor theme */
#output {
    background-color: #1a1d29 !important;
    color: #f8f9fa !important;
    border: 1px solid #3d4465;
    text-shadow: none !important;
}

/* Remove glow from output text */
#output * {
    text-shadow: none !important;
}

/* Enhanced error styling for output */
#output.error-state {
    background-color: #8b0000 !important;
    color: #ffcccc !important;
    border-color: #ff4444 !important;
    border-width: 2px !important;
}

#output.error-state::-webkit-scrollbar-thumb {
    background: #ff6666 !important;
}

#output.error-state::-webkit-scrollbar-thumb:hover {
    background: #ff8888 !important;
}

/* Remove text glow from all monospace and code elements */
code, pre, kbd, samp,
.font-monospace,
[style*="font-family"][style*="Monaco"],
[style*="font-family"][style*="Menlo"],
[style*="font-family"][style*="Ubuntu Mono"],
[style*="font-family"][style*="monospace"] {
    text-shadow: none !important;
}

#output::-webkit-scrollbar {
    width: 6px;
}

#output::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

#output::-webkit-scrollbar-thumb {
    background: #ea39b8;
    border-radius: 3px;
}

#output::-webkit-scrollbar-thumb:hover {
    background: #f472b6;
}

/* Card styling for Vapor theme */
.card {
    background-color: var(--bs-dark) !important;
    border-color: #3d4465;
}

.card-header.bg-dark,
.card-footer.bg-dark {
    background-color: #1a1d29 !important;
    border-color: #3d4465;
}

/* Main content area constraints */
.main-content {
    min-height: 100vh;
    overflow-x: hidden;
}

/* Prevent layout shifts */
.row.min-vh-100 {
    margin: 0;
}

.container-fluid {
    padding: 0;
}

/* Responsive sidebar adjustments */
@media (max-width: 768px) {
    .sidebar-sticky {
        height: auto;
        position: static !important;
        display: block;
    }
    
    .version-list {
        max-height: 200px !important;
    }
}