/* Make the toolbar sticky with solid background */
.editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: hsl(var(--background));
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom: 1px solid hsl(var(--border));
    padding: 6px;
}

/* Add background to toolbar in light mode */
.editor-toolbar {
    background: hsl(var(--background));
}

/* Ensure preview mode inherits theme colors */
.editor-preview {
    background: var(--background);
    color: var(--foreground);
}

/* Dark mode support */
.dark .editor-toolbar {
    background: hsl(var(--muted));
    border-color: hsl(var(--border));
}

.dark .editor-toolbar button {
    color: hsl(var(--foreground));
}

.dark .editor-toolbar button:hover {
    background: hsl(var(--muted));
}

.dark .editor-toolbar.disabled-for-preview button:not(.no-disable) {
    background: transparent;
}

/* Ensure toolbar stays within container bounds */
.editor-toolbar::before,
.editor-toolbar::after {
    margin: 0;
}

/* Adjust toolbar button spacing */
.editor-toolbar button {
    margin: 0 2px;
}

/* Style the editor container */
.EasyMDEContainer {
    background: var(--background);
}

/* Style the editor area */
.CodeMirror {
    background: var(--background) !important;
    color: var(--foreground) !important;
    border-radius: 0 0 6px 6px;
}

/* Style the preview area */
.editor-preview-side {
    background: var(--background);
    color: var(--foreground);
}