/* ============================================================================
   W4L theming for EasyMDE (vendor base: easymde.min.css).

   The vendor stylesheet is hard-coded light (white box, #000 text, grey borders).
   These overrides re-express the editor in FluentUI design tokens so it follows the
   app's light/dark theme automatically — no per-theme selectors needed, because the
   tokens themselves flip. Toolbar icons are inline SVG tinted via `currentColor`
   (see easymdeInterop.js), so there is no FontAwesome dependency.

   Scope: everything is under .EasyMDEContainer / .editor-toolbar (vendor class names),
   so nothing here leaks onto other components.
   ============================================================================ */

.EasyMDEContainer .CodeMirror {
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-input-rest, var(--neutral-layer-1));
    border: 1px solid var(--neutral-stroke-rest);
    border-top: none;
    border-bottom-left-radius: var(--control-corner-radius, 5px);
    border-bottom-right-radius: var(--control-corner-radius, 5px);
    height: auto;
}

.EasyMDEContainer .CodeMirror-cursor {
    border-color: var(--neutral-foreground-rest);
}

.EasyMDEContainer .CodeMirror-selected {
    background: var(--neutral-fill-secondary, rgba(128, 128, 128, 0.25));
}

/* Toolbar bar. */
.EasyMDEContainer .editor-toolbar {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-top-left-radius: var(--control-corner-radius, 5px);
    border-top-right-radius: var(--control-corner-radius, 5px);
    opacity: 1;
}

.EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: var(--neutral-stroke-rest);
    border-right-color: transparent;
}

/* Toolbar buttons: the inline SVG inherits this colour via currentColor. */
.EasyMDEContainer .editor-toolbar button.w4l-mde-btn,
.EasyMDEContainer .editor-toolbar a.w4l-mde-btn {
    color: var(--neutral-foreground-hint);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
}

.EasyMDEContainer .editor-toolbar button.w4l-mde-btn:hover,
.EasyMDEContainer .editor-toolbar a.w4l-mde-btn:hover {
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}

.EasyMDEContainer .editor-toolbar button.w4l-mde-btn.active {
    color: var(--accent-fill-rest);
    background: var(--neutral-fill-stealth-selected, var(--neutral-fill-stealth-hover));
    border-color: var(--neutral-stroke-rest);
}

.EasyMDEContainer .editor-toolbar button.w4l-mde-btn svg,
.EasyMDEContainer .editor-toolbar a.w4l-mde-btn svg {
    display: block;
}

/* Live-preview panes (client-side; the authoritative render on the card is Markdig). */
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a {
    color: var(--accent-fill-rest);
}

.EasyMDEContainer .CodeMirror-placeholder {
    color: var(--neutral-foreground-hint) !important;
}