/**
 * EasyMDE toolbar overrides - prevents theme styles from breaking the editor.
 * Form buttons (gradient-profile) were incorrectly applied to toolbar buttons.
 * Font Awesome 6 compatibility for toolbar icons (fa fa-* -> fas).
 */
.editor-toolbar .fa,
.editor-toolbar button .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.editor-toolbar {
    display: block !important;
    background: #fff !important;
    border-color: #ced4da !important;
}

.editor-toolbar button,
.editor-toolbar .easymde-dropdown {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #333 !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.editor-toolbar button:hover,
.editor-toolbar button.active {
    background: #fcfcfc !important;
    border-color: #95a5a6 !important;
}

.dark-mode .editor-toolbar {
    background: #1a1d2b !important;
    border-color: #334155 !important;
}

.dark-mode .editor-toolbar button,
.dark-mode .editor-toolbar .easymde-dropdown {
    color: #e2e8f0 !important;
}

.dark-mode .editor-toolbar button:hover,
.dark-mode .editor-toolbar button.active {
    background: #2d3548 !important;
    border-color: #475569 !important;
}

/* Ensure CodeMirror editor area has correct contrast */
.EasyMDEContainer .CodeMirror {
    background: #fff !important;
    color: #000 !important;
    border-color: #ced4da !important;
}

.dark-mode .EasyMDEContainer .CodeMirror {
    background: #1a1d2b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

.dark-mode .EasyMDEContainer .CodeMirror-gutters {
    background-color: #252938 !important;
    border-color: #334155 !important;
}

/* Preview pane (eye icon) - dark mode fix: avoid white background */
.dark-mode .editor-preview,
.dark-mode .editor-preview-side,
.dark-mode .editor-preview-active,
.dark-mode .EasyMDEContainer .editor-preview,
.dark-mode .EasyMDEContainer .editor-preview-side,
.dark-mode .EasyMDEContainer .editor-preview-active {
    background: #1a1d2b !important;
    color: #e2e8f0 !important;
}

.dark-mode .editor-preview p,
.dark-mode .editor-preview-side p,
.dark-mode .editor-preview h1,
.dark-mode .editor-preview-side h1,
.dark-mode .editor-preview h2,
.dark-mode .editor-preview-side h2,
.dark-mode .editor-preview h3,
.dark-mode .editor-preview-side h3,
.dark-mode .editor-preview li,
.dark-mode .editor-preview-side li,
.dark-mode .editor-preview blockquote,
.dark-mode .editor-preview-side blockquote {
    color: #e2e8f0 !important;
}

.dark-mode .editor-preview code,
.dark-mode .editor-preview-side code,
.dark-mode .editor-preview pre,
.dark-mode .editor-preview-side pre {
    background: #252938 !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

/* Images in Markdown preview - ensure they display */
.editor-preview img,
.editor-preview-side img,
.editor-preview-active img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.5em 0;
}