/* Overall wrapper */
.dc-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 40px;
}

/* Top bar with tabs + run button */
.dc-top-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

/* Tabs (menu style) */
.dc-tab {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    padding-bottom: 6px;
    color: #000000;
    border-bottom: 2px solid transparent;
}

.dc-tab.active {
    border: none !important;
    color: #f67d17 !important;
}

/* Hover colour */
.dc-tab:hover {
    color: #f67d17 !important;
}

/* Run Code button */
.dc-run-btn {
    margin-left: 20px;
    background: #EEB64E;
    color: #ffffff;   /* FIXED */
    border: none;
    padding: 8px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
}

/* Two-column layout: editor + preview */
.dc-editor-preview {
    display: flex;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

/* Left side: editors */
.dc-editors {
    flex: 1;
    border-right: 1px solid #e5e7eb;
    overflow: hidden;
    flex-basis: 50%; /* allows resizing */
}

.dc-editor-pane {
    display: none;
    height: 100%;
}

.dc-editor-pane.active {
    display: block;
    height: 100%;
}

/* Make the textarea fill the pane for CodeMirror */
.dc-editor-pane textarea {
    width: 100%;
    height: 100%;
}

/* CodeMirror styling */
.dc-wrapper .CodeMirror {
    height: 100% !important;
    background: #1e1e1e !important;
    color: #f9fafb !important;  /* FIXED */
    border: none;
    font-size: 14px;
}

/* ⭐ NEW: Draggable resizer bar ⭐ */
.dc-resizer {
    width: 8px;
    background: #d1d5db;
    cursor: col-resize;
    z-index: 9999; /* ALWAYS visible on top */
    position: relative; /* REQUIRED */
    color: transparent;
}

.dc-resizer:hover {
    background: #a1a1a1;
}

/* Right side: preview */
.dc-preview-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    flex-basis: 50%; /* allows resizing */
}

.dc-preview-title {
    padding: 10px 14px;
    border-bottom: 1px solid #808080;
    font-size: 18px;
    font-weight: 600;
}

#dc-output {
    flex: 1;
    width: 100%;
    border: none;
}
.dc-resizer {
    color: transparent; /* hides the | symbol */
}
.dc-editors, .dc-preview-area {
    min-width: 20%;
}
.dc-editor-preview * {
    pointer-events: auto !important;
}
.dc-resizer {
    pointer-events: all !important;
}
/* Add thin white border around preview area */
.dc-preview-area {
    border: 1px solid #808080;
}