/* Toast UI Editor styles */
#markdown-editor {
    display: block !important;
    height: 100% !important;
    min-height: 500px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10;
}

.editor-instance {
    height: 100% !important;
    min-height: 500px !important;
}

.toastui-editor-defaultUI {
    height: 100% !important;
}

.toastui-editor-defaultUI-toolbar,
.toastui-editor-main,
.toastui-editor-main .ProseMirror,
.toastui-editor-main .toastui-editor-md-preview {
    height: 100% !important;
}

/* ── Toast UI Editor — dark-theme overrides ───────────────────────────────
   Toast UI ships with light-mode chrome and edit surfaces by default. In
   mdedit's dark mode the editor's text (#222) falls onto the transparent
   md-container, which inherits var(--bg) dark = #1e1e1e → effectively
   black-on-black. Override the load-bearing surfaces with mdedit's tokens
   so the editor harmonises with the rest of the chrome.
   The selectors target both manual override (data-theme="dark") and the
   OS-pref auto fallback (prefers-color-scheme + no data-theme="light"). */

/* Manual dark override */
[data-theme="dark"] .toastui-editor-defaultUI,
[data-theme="dark"] .toastui-editor-md-container,
[data-theme="dark"] .toastui-editor-md-preview,
[data-theme="dark"] .toastui-editor-ww-container,
[data-theme="dark"] .toastui-editor-mode-switch,
[data-theme="dark"] .toastui-editor-main,
[data-theme="dark"] .ProseMirror {
    background-color: var(--bg);
    color: var(--text);
}
[data-theme="dark"] .toastui-editor-defaultUI-toolbar {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .toastui-editor-md-splitter {
    background-color: var(--border);
}
[data-theme="dark"] .toastui-editor-toolbar-icons {
    /* Toast UI's icons are sprite-baked dark; invert flips them to light. */
    filter: invert(0.85) hue-rotate(180deg);
}
[data-theme="dark"] .toastui-editor-toolbar-divider {
    background-color: var(--border);
}
[data-theme="dark"] .toastui-editor-mode-switch {
    border-top-color: var(--border);
}
[data-theme="dark"] .toastui-editor-mode-switch .tab-item {
    color: var(--text-muted);
}
[data-theme="dark"] .toastui-editor-mode-switch .tab-item.active {
    color: var(--text);
    background-color: var(--bg);
}
[data-theme="dark"] .toastui-editor-popup,
[data-theme="dark"] .toastui-editor-context-menu {
    background-color: var(--bg-secondary);
    color: var(--text);
    border-color: var(--border);
}

/* OS-pref auto fallback (matches every selector above) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .toastui-editor-defaultUI,
    :root:not([data-theme="light"]) .toastui-editor-md-container,
    :root:not([data-theme="light"]) .toastui-editor-md-preview,
    :root:not([data-theme="light"]) .toastui-editor-ww-container,
    :root:not([data-theme="light"]) .toastui-editor-mode-switch,
    :root:not([data-theme="light"]) .toastui-editor-main,
    :root:not([data-theme="light"]) .ProseMirror {
        background-color: var(--bg);
        color: var(--text);
    }
    :root:not([data-theme="light"]) .toastui-editor-defaultUI-toolbar {
        background-color: var(--bg-secondary);
        border-bottom-color: var(--border);
    }
    :root:not([data-theme="light"]) .toastui-editor-md-splitter {
        background-color: var(--border);
    }
    :root:not([data-theme="light"]) .toastui-editor-toolbar-icons {
        filter: invert(0.85) hue-rotate(180deg);
    }
    :root:not([data-theme="light"]) .toastui-editor-toolbar-divider {
        background-color: var(--border);
    }
    :root:not([data-theme="light"]) .toastui-editor-mode-switch {
        border-top-color: var(--border);
    }
    :root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item {
        color: var(--text-muted);
    }
    :root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item.active {
        color: var(--text);
        background-color: var(--bg);
    }
    :root:not([data-theme="light"]) .toastui-editor-popup,
    :root:not([data-theme="light"]) .toastui-editor-context-menu {
        background-color: var(--bg-secondary);
        color: var(--text);
        border-color: var(--border);
    }
}