/* =========================================
   1. COLOR THEMES
   ========================================= */
:root {
    --bg-color: #ffffff;
    --text-color: #000;
    --editor-border: #ccc;
    --btn-bg: #f1f1f1;
    --btn-text: #000;
    --active-tab-bg: #0078d7;    /* Blue for Tabs */
    --active-tab-text: #fff;
    --run-btn-bg: #28a745;       /* Green for Run */
    --run-btn-hover: #218838;
    --terminal-text: #1e7e34;
}

body.dark-mode {
    --bg-color: #282a36;
    --text-color: #f8f8f2;
    --editor-border: #44475a;
    --btn-bg: #44475a;
    --btn-text: #f8f8f2;
    --active-tab-bg: #6272a4;
    --active-tab-text: #f8f8f2;
    --run-btn-bg: #50fa7b;
    --run-btn-hover: #40c963;
    --terminal-text: #50fa7b;
}

/* =========================================
   2. LAYOUT & COMPONENTS
   ========================================= */
.compiler-wrapper { margin-top: 20px; }

/* TABS */
.tab-container { display: flex; border-bottom: 2px solid var(--editor-border); }
.tab-btn {
    flex: 1; padding: 12px; cursor: pointer; font-weight: bold;
    background: var(--btn-bg); color: var(--btn-text);
    border: 1px solid var(--editor-border); border-bottom: none; opacity: 0.6;
    transition: all 0.2s;
}
.tab-btn:hover { opacity: 1; filter: brightness(0.95); }
.tab-btn.active { 
    opacity: 1; 
    background: var(--active-tab-bg) !important; 
    color: var(--active-tab-text) !important; 
    border-bottom: 2px solid var(--active-tab-bg); 
}

/* EDITORS (FIXED SCROLLING) */
#hidden-wrapper .CodeMirror { display: none !important; }

.my-editor .CodeMirror {
    height: auto !important;
    min-height: 150px;
    
    /* CRITICAL FIX: Limit height and allow scroll inside */
    max-height: 600px; 
    
    border: 1px solid var(--editor-border);
    border-top: none;
    font-size: 14px;
}
/* Ensure the scrollbar inside CodeMirror works */
.CodeMirror-scroll {
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 600px;
}

/* ACTION BUTTONS */
.actions { display: flex; gap: 10px; margin: 15px 0; }
.actions button {
    flex: 1; padding: 12px; cursor: pointer; font-weight: bold;
    border-radius: 4px; border: 1px solid var(--editor-border);
    background-color: var(--btn-bg); color: var(--btn-text) !important;
    transition: all 0.2s;
}
.actions button:hover { filter: brightness(0.95); background-color: #e2e6ea; }
body.dark-mode .actions button:hover { background-color: #6272a4; }

/* RUN BUTTON */
#runBtn {
    width: 100%; padding: 12px; margin-bottom: 10px;
    background-color: var(--run-btn-bg) !important; 
    color: #fff !important; text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    border: none; font-size: 18px; border-radius: 4px; cursor: pointer;
}
body.dark-mode #runBtn { color: #282a36 !important; }
#runBtn:hover { background-color: var(--run-btn-hover) !important; }

/* =========================================
   3. OUTPUT & LOGS
   ========================================= */
#output {
    padding: 10px; border: 1px solid var(--editor-border);
    background: #282a36; 
    color: var(--terminal-text) !important;
    min-height: 100px;
    white-space: pre-wrap; font-family: monospace;
}
body.light #output { background: #f8f9fa; }

/* SYSTEM FAILURE (Red Border) */
#output.failure-mode {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}
body.dark-mode #output.failure-mode { 
    color: #ff5555 !important; 
    border-color: #ff5555 !important;
}

/* LINE HIGHLIGHTS */
.log-pass { font-weight: 900; text-decoration: underline; }
.log-fail { color: #dc3545 !important; font-weight: bold; }
body.dark-mode .log-fail { color: #ff5555 !important; }

.log-error { 
    font-weight: 900; 
    text-decoration: underline;
    border-bottom: 1px dashed; 
}

/* WAVEFORM IMAGE */
#output img {
    max-width: 100%; margin-top: 15px; border: 1px solid #ccc; background-color: white;
}
body.dark-mode #output img { filter: invert(1) hue-rotate(180deg); }