/* Root Variables for Consistency */
:root {
    --transition-speed: 200ms;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbars (Material Style) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #424242;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* Global Transitions */
* {
    transition: background-color var(--transition-speed) var(--transition-ease), 
                border-color var(--transition-speed) var(--transition-ease),
                color var(--transition-speed) var(--transition-ease),
                opacity var(--transition-speed) var(--transition-ease);
}

/* Fix for Ace Editor - NO TRANSITIONS inside Ace */
#editor-container, .ace_editor, .ace_editor * {
    transition: none !important;
}

/* Ace Editor Layout Fix */
#editor-container {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    font-family: 'Roboto Mono', monospace;
}

.ace_editor {
    font-family: 'Roboto Mono', monospace !important;
}

/* Python Code Contrast */
html.dark .ace_comment {
    color: #9ca3af !important;
    font-style: italic;
}
html.dark .ace_marker-layer .ace_selection {
    background: #264f78 !important;
}

/* Ace Gutter & Fold Widgets */
.ace_gutter {
    background-color: #f8f9fa !important;
    border-right: 1px solid #e2e8f0;
    z-index: 4;
}
html.dark .ace_gutter {
    background-color: #161616 !important;
    border-right: 1px solid #2a2a2a;
}
.ace_gutter-cell {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.ace_fold-widget {
    opacity: 0.6;
    margin-left: 2px !important;
}
html.dark .ace_fold-widget {
    filter: invert(1) brightness(1.5);
}

/* UI Elements Styling */
html.dark .border-primary { border-color: #a8c7fa !important; }
html.dark .bg-primary { background-color: #0b57d0; }
html.dark .console-system { color: #a8c7fa; font-style: italic; }

/* Splitter Styling */
.workspace-splitter { position: relative; }
.workspace-splitter::after {
    content: ''; position: absolute; background: currentColor; opacity: 0; transition: opacity 0.2s;
}
.flex-row > .workspace-splitter { width: 4px; height: 100%; cursor: col-resize; }
.flex-row > .workspace-splitter::after { top: 0; bottom: 0; left: -2px; right: -2px; }
.flex-col > .workspace-splitter { height: 4px; width: 100%; cursor: row-resize; }
.flex-col > .workspace-splitter::after { left: 0; right: 0; top: -2px; bottom: -2px; }
.workspace-splitter:hover::after { opacity: 0.1; }
.splitter-handle { transition: transform 0.2s; }
.workspace-splitter:hover .splitter-handle { transform: scale(1.5); background-color: #0b57d0; }

/* Variables Table Styling */
.variables-table tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); }
html.dark .variables-table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); }
.variables-table tr:hover { background-color: rgba(11, 87, 208, 0.05); }
html.dark .variables-table tr:hover { background-color: rgba(168, 199, 250, 0.05); }

/* Console Styling */
.console-error { color: #d32f2f; }
html.dark .console-error { color: #f28b82; }
.console-input-line { color: #1f1f1f; }
html.dark .console-input-line { color: #e3e3e3; }

/* Utilities */
.hidden-force { display: none !important; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Integrated Console Input */
.console-input-inline {
    display: inline-block; background: transparent; border: none; outline: none;
    font-family: inherit; font-size: inherit; color: inherit; width: auto; min-width: 10px;
}
.console-input-line-container { display: flex; align-items: baseline; gap: 4px; }

/* Animations */
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.animate-slide-in { animation: slideIn 0.3s var(--transition-ease); }