/* =============================================================================
   EASYMDE EDITOR DARK MODE STYLES
   ============================================================================= */

/* Toolbar Container */
.EasyMDEContainer .editor-toolbar {
    background-color: hsl(var(--color-background-secondary)) !important;
    border-color: hsl(var(--color-neutral)) !important;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem;
}

/* Toolbar Buttons */
.EasyMDEContainer .editor-toolbar button {
    color: hsl(var(--color-base)) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
}

.EasyMDEContainer .editor-toolbar button:hover {
    background-color: hsl(var(--color-neutral) / 0.3) !important;
    border-color: hsl(var(--color-neutral)) !important;
}

.EasyMDEContainer .editor-toolbar button.active {
    background-color: hsl(var(--color-primary) / 0.2) !important;
    border-color: hsl(var(--color-primary)) !important;
    color: hsl(var(--color-primary)) !important;
}

/* Toolbar Separator */
.EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: hsl(var(--color-neutral)) !important;
    border-right-color: hsl(var(--color-neutral)) !important;
}

/* CodeMirror Editor Area */
.EasyMDEContainer .CodeMirror {
    background-color: hsl(var(--color-background)) !important;
    border-color: hsl(var(--color-neutral)) !important;
    border-radius: 0 0 0.5rem 0.5rem;
    color: hsl(var(--color-base)) !important;
}

.EasyMDEContainer .CodeMirror-cursor {
    border-left-color: hsl(var(--color-base)) !important;
}

/* Placeholder Text */
.EasyMDEContainer .CodeMirror .CodeMirror-placeholder {
    color: hsl(var(--color-muted)) !important;
    opacity: 0.7;
}

/* Selected Text */
.EasyMDEContainer .CodeMirror-selected {
    background-color: hsl(var(--color-primary) / 0.3) !important;
}

/* Scrollbar Styling */
.EasyMDEContainer .CodeMirror-scroll {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--color-neutral)) transparent;
}

.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar-thumb {
    background-color: hsl(var(--color-neutral));
    border-radius: 4px;
}

/* Status Bar */
.EasyMDEContainer .editor-statusbar {
    background-color: hsl(var(--color-background-secondary)) !important;
    border-color: hsl(var(--color-neutral)) !important;
    color: hsl(var(--color-muted)) !important;
    padding: 0.25rem 0.5rem;
}

/* Preview Mode */
.EasyMDEContainer .editor-preview {
    background-color: hsl(var(--color-background)) !important;
    color: hsl(var(--color-base)) !important;
}

.EasyMDEContainer .editor-preview-side {
    background-color: hsl(var(--color-background-secondary)) !important;
    border-color: hsl(var(--color-neutral)) !important;
    color: hsl(var(--color-base)) !important;
}

/* Fullscreen Mode */
.EasyMDEContainer.fullscreen .editor-toolbar,
.EasyMDEContainer.fullscreen .CodeMirror,
.EasyMDEContainer.fullscreen .editor-preview-side {
    background-color: hsl(var(--color-background)) !important;
}

/* Markdown Syntax Highlighting */
.EasyMDEContainer .cm-header {
    color: hsl(var(--color-primary)) !important;
}

.EasyMDEContainer .cm-quote {
    color: hsl(var(--color-muted)) !important;
    font-style: italic;
}

.EasyMDEContainer .cm-link {
    color: hsl(var(--color-info)) !important;
}

.EasyMDEContainer .cm-url {
    color: hsl(var(--color-info)) !important;
    opacity: 0.7;
}

.EasyMDEContainer .cm-strong {
    color: hsl(var(--color-base)) !important;
    font-weight: bold;
}

.EasyMDEContainer .cm-em {
    color: hsl(var(--color-base)) !important;
    font-style: italic;
}

.EasyMDEContainer .cm-strikethrough {
    color: hsl(var(--color-muted)) !important;
    text-decoration: line-through;
}

.EasyMDEContainer .cm-comment {
    color: hsl(var(--color-muted)) !important;
}

/* Code blocks */
.EasyMDEContainer .cm-s-easymde .cm-comment {
    background-color: hsl(var(--color-neutral) / 0.2) !important;
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}

/* Gutters */
.EasyMDEContainer .CodeMirror-gutters {
    background-color: hsl(var(--color-background-secondary)) !important;
    border-right-color: hsl(var(--color-neutral)) !important;
}

.EasyMDEContainer .CodeMirror-linenumber {
    color: hsl(var(--color-muted)) !important;
}

/* Focus States */
.EasyMDEContainer .CodeMirror-focused {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.3);
}