/* ============================================================================
   rich-editor.css — оформление единого редактора «Описание» (js/rich-editor.js)
   и стилей для отрендеренного markdown (.rich-content) в режимах чтения.

   Вендор (TOAST UI Editor) свёрстан под светлую тему хардкодом, без CSS-
   переменных. Тема приложения по умолчанию ТЁМНАЯ ([data-theme="light"] —
   светлое исключение), поэтому мост ниже переопределяет вендорные цвета
   токенами приложения: --surface-*, --text-*, --border-subtle. Так редактор
   автоматически следует за темой и любым будущим ре-скином.
   ========================================================================= */

/* ── контейнер ───────────────────────────────────────────────────────────── */
.rich-editor-host { position: relative; width: 100%; }
.rich-editor-host .re-skeleton {
    min-height: 120px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--text-tertiary);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    background: var(--surface-2);
}
.rich-editor-host.re-drag .toastui-editor-defaultUI {
    outline: 2px dashed var(--brand-primary); outline-offset: 2px;
}
textarea.re-source-hidden { display: none !important; }

/* полноэкранный режим */
.rich-editor-host.re-full {
    position: fixed; inset: 0; z-index: 4000;
    background: var(--surface-0); padding: 16px; box-sizing: border-box;
    display: flex; flex-direction: column;
}
.rich-editor-host.re-full > div:last-child { flex: 1; min-height: 0; }
.rich-editor-host.re-full .toastui-editor-defaultUI { height: 100%; }
body.re-full-open { overflow: hidden; }

/* тост загрузки/ошибки (если в приложении нет своего showToast) */
.re-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 5000; padding: 9px 16px; border-radius: var(--radius-md);
    background: var(--surface-3); color: var(--text-main);
    border: 1px solid var(--border-subtle); font-size: 13px;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.35));
    transition: opacity .3s, transform .3s;
}
.re-toast-err { border-color: var(--status-error); color: var(--status-error); }
.re-toast-out { opacity: 0; transform: translateX(-50%) translateY(8px); }

/* ── общая геометрия под дизайн приложения (обе темы) ────────────────────── */
.toastui-editor-defaultUI {
    border-radius: var(--radius-md) !important;
    border-color: var(--border-subtle) !important;
    font-family: var(--font-sans) !important;
}
.toastui-editor-defaultUI-toolbar { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
.toastui-editor-defaultUI .toastui-editor-mode-switch { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }
.toastui-editor-contents { font-family: var(--font-sans) !important; font-size: 14px !important; }
.toastui-editor-contents p, .toastui-editor-contents li { line-height: 1.65 !important; }
.rich-editor-host .re-tb-custom { display: inline-flex !important; align-items: center; justify-content: center; }
.rich-editor-host .re-tb-custom i { width: 15px; height: 15px; }
.rich-editor-host.re-compact .toastui-editor-defaultUI-toolbar { padding: 0 4px; }

/* картинки внутри редактора не должны рвать вёрстку */
.toastui-editor-contents img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* ── ТЁМНАЯ ТЕМА (по умолчанию) ──────────────────────────────────────────── */
:root:not([data-theme="light"]) .toastui-editor-defaultUI {
    border-color: var(--border-subtle) !important;
    background: var(--surface-0);
    color: var(--text-main);
}
:root:not([data-theme="light"]) .toastui-editor-defaultUI-toolbar {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}
:root:not([data-theme="light"]) .toastui-editor-toolbar-group { border-color: var(--border-subtle) !important; }
:root:not([data-theme="light"]) .toastui-editor-toolbar-divider { background-color: var(--border-subtle) !important; }
/* вендорные иконки — тёмные PNG/SVG data-uri: инвертируем под тёмный фон */
:root:not([data-theme="light"]) .toastui-editor-toolbar-icons {
    filter: invert(1) brightness(1.55) grayscale(.35);
    border-color: transparent !important;
    background-color: transparent !important;
}
:root:not([data-theme="light"]) .toastui-editor-toolbar-icons:not(:disabled):hover {
    background-color: var(--surface-3) !important;
    border-color: var(--border-subtle) !important;
}
/* свои кнопки рисуются lucide-иконкой — их инвертировать не надо */
:root:not([data-theme="light"]) .toastui-editor-toolbar-icons.re-tb-custom {
    filter: none; color: var(--text-secondary);
}
:root:not([data-theme="light"]) .toastui-editor-toolbar-icons.re-tb-custom:hover { color: var(--text-main); }

:root:not([data-theme="light"]) .toastui-editor-main,
:root:not([data-theme="light"]) .toastui-editor-md-container,
:root:not([data-theme="light"]) .toastui-editor-ww-container,
:root:not([data-theme="light"]) .toastui-editor-md-preview,
:root:not([data-theme="light"]) .toastui-editor-defaultUI .ProseMirror {
    background-color: var(--surface-0) !important;
    color: var(--text-main) !important;
}
:root:not([data-theme="light"]) .toastui-editor-contents { color: var(--text-main) !important; }
:root:not([data-theme="light"]) .toastui-editor-contents h1,
:root:not([data-theme="light"]) .toastui-editor-contents h2,
:root:not([data-theme="light"]) .toastui-editor-contents h3,
:root:not([data-theme="light"]) .toastui-editor-contents h4,
:root:not([data-theme="light"]) .toastui-editor-contents h5,
:root:not([data-theme="light"]) .toastui-editor-contents h6 {
    color: var(--text-main) !important; border-color: var(--border-subtle) !important;
}
:root:not([data-theme="light"]) .toastui-editor-contents a { color: var(--brand-primary) !important; }
:root:not([data-theme="light"]) .toastui-editor-contents blockquote {
    border-left-color: var(--surface-3) !important; color: var(--text-secondary) !important;
}
:root:not([data-theme="light"]) .toastui-editor-contents hr { border-color: var(--border-subtle) !important; }
:root:not([data-theme="light"]) .toastui-editor-contents code {
    background-color: var(--surface-2) !important; color: var(--color-signal-teal, #02b8cc) !important;
}
:root:not([data-theme="light"]) .toastui-editor-contents pre,
:root:not([data-theme="light"]) .toastui-editor-contents pre code {
    background-color: var(--surface-2) !important; color: var(--text-main) !important;
}
:root:not([data-theme="light"]) .toastui-editor-contents table th {
    background-color: var(--surface-2) !important; color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
}
:root:not([data-theme="light"]) .toastui-editor-contents table td {
    border-color: var(--border-subtle) !important; color: var(--text-main) !important;
}
:root:not([data-theme="light"]) .toastui-editor-md-splitter { background-color: var(--border-subtle) !important; }
:root:not([data-theme="light"]) .toastui-editor-md-tab-container,
:root:not([data-theme="light"]) .toastui-editor-mode-switch {
    background-color: var(--surface-2) !important; border-color: var(--border-subtle) !important;
}
:root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item {
    background-color: var(--surface-1) !important; color: var(--text-tertiary) !important;
    border-color: var(--border-subtle) !important;
}
:root:not([data-theme="light"]) .toastui-editor-mode-switch .tab-item.active,
:root:not([data-theme="light"]) .toastui-editor-md-tab-container .tab-item.active {
    background-color: var(--surface-0) !important; color: var(--text-main) !important;
}
/* markdown-режим: подсветка синтаксиса на тёмном */
:root:not([data-theme="light"]) .toastui-editor-md-container .toastui-editor .ProseMirror span[class^="toastui-editor-md-"] { color: var(--text-secondary); }
:root:not([data-theme="light"]) .toastui-editor-md-heading { color: var(--brand-primary) !important; }
:root:not([data-theme="light"]) .toastui-editor-md-code,
:root:not([data-theme="light"]) .toastui-editor-md-code-block { background-color: var(--surface-2) !important; }
:root:not([data-theme="light"]) .toastui-editor-md-link,
:root:not([data-theme="light"]) .toastui-editor-md-link-url { color: var(--brand-primary) !important; }
:root:not([data-theme="light"]) .toastui-editor-md-marked-text { color: var(--text-secondary) !important; }
:root:not([data-theme="light"]) .toastui-editor-md-delimiter,
:root:not([data-theme="light"]) .toastui-editor-md-meta { color: var(--text-tertiary) !important; }
/* всплывающие панели (заголовок, таблица, ссылка, изображение) */
:root:not([data-theme="light"]) .toastui-editor-popup,
:root:not([data-theme="light"]) .toastui-editor-dropdown-toolbar,
:root:not([data-theme="light"]) .toastui-editor-context-menu {
    background-color: var(--surface-1) !important; border-color: var(--border-subtle) !important;
    color: var(--text-main) !important; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.4)) !important;
}
:root:not([data-theme="light"]) .toastui-editor-popup-body,
:root:not([data-theme="light"]) .toastui-editor-popup-body label,
:root:not([data-theme="light"]) .toastui-editor-context-menu li { color: var(--text-main) !important; }
:root:not([data-theme="light"]) .toastui-editor-context-menu li:hover { background-color: var(--surface-3) !important; }
:root:not([data-theme="light"]) .toastui-editor-popup-body input[type="text"],
:root:not([data-theme="light"]) .toastui-editor-popup-body input[type="file"],
:root:not([data-theme="light"]) .toastui-editor-popup-body textarea {
    background-color: var(--surface-2) !important; border-color: var(--border-subtle) !important;
    color: var(--text-main) !important;
}
:root:not([data-theme="light"]) .toastui-editor-popup-body .toastui-editor-button-container .toastui-editor-ok-button { background-color: var(--brand-primary) !important; color: #fff !important; }
:root:not([data-theme="light"]) .toastui-editor-popup-body .toastui-editor-button-container .toastui-editor-close-button { background-color: var(--surface-3) !important; color: var(--text-main) !important; }
:root:not([data-theme="light"]) .toastui-editor-dropdown-toolbar .toastui-editor-toolbar-item-wrapper { color: var(--text-main) !important; }
:root:not([data-theme="light"]) .toastui-editor-popup-add-table .toastui-editor-table-selection { border-color: var(--brand-primary) !important; }
:root:not([data-theme="light"]) .toastui-editor-popup-add-heading ul li:hover { background-color: var(--surface-3) !important; }
:root:not([data-theme="light"]) .toastui-editor-tooltip { background-color: var(--surface-3) !important; color: var(--text-main) !important; }
:root:not([data-theme="light"]) .toastui-editor-tooltip .arrow { background-color: var(--surface-3) !important; }
:root:not([data-theme="light"]) .toastui-editor-defaultUI .placeholder,
:root:not([data-theme="light"]) .toastui-editor-defaultUI .ProseMirror-widget { color: var(--text-tertiary) !important; }
/* выделение таблицы/ячеек */
:root:not([data-theme="light"]) .toastui-editor-contents .toastui-editor-cell-selected { background-color: var(--brand-light) !important; }

/* Пока JS не отрендерил markdown, сырой текст показываем как есть — без «схлопывания» переносов */
[data-md-render]:not(.rich-rendered) { white-space: pre-wrap; }

/* ── .rich-content — отрендеренный markdown в режимах чтения ─────────────── */
.rich-content { font-size: 14px; line-height: 1.7; color: var(--text-main); word-break: break-word; }
.rich-content > *:first-child { margin-top: 0; }
.rich-content > *:last-child { margin-bottom: 0; }
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6 {
    margin: 1.4em 0 .5em; font-weight: 600; line-height: 1.3; color: var(--text-main);
}
.rich-content h1 { font-size: 1.6em; } .rich-content h2 { font-size: 1.35em; }
.rich-content h3 { font-size: 1.18em; } .rich-content h4 { font-size: 1.05em; }
.rich-content p { margin: 0 0 .8em; }
.rich-content a { color: var(--brand-primary); text-decoration: none; }
.rich-content a:hover { text-decoration: underline; }
.rich-content ul, .rich-content ol { margin: 0 0 .8em; padding-left: 1.5em; }
.rich-content li { margin: .2em 0; }
.rich-content li > input[type="checkbox"] { margin-right: 6px; vertical-align: -1px; }
.rich-content blockquote {
    margin: 0 0 .8em; padding: .2em 0 .2em 14px;
    border-left: 3px solid var(--surface-3); color: var(--text-secondary);
}
.rich-content hr { border: none; border-top: 1px solid var(--border-subtle); margin: 1.2em 0; }
.rich-content code {
    font-family: var(--font-mono, ui-monospace, monospace); font-size: .9em;
    background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-sm);
}
.rich-content pre {
    background: var(--surface-2); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 12px 14px; overflow-x: auto; margin: 0 0 .8em;
}
.rich-content pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.55; }
.rich-content img {
    max-width: 100%; height: auto; border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle); margin: .4em 0; cursor: zoom-in;
}
/* таблицы — с горизонтальным скроллом, чтобы широкие не ломали страницу */
.rich-content .rc-table-wrap { overflow-x: auto; margin: 0 0 .9em; }
.rich-content table {
    border-collapse: collapse; width: auto; min-width: 50%;
    font-size: 13px; margin: 0 0 .9em;
}
.rich-content th, .rich-content td {
    border: 1px solid var(--border-subtle); padding: 6px 10px; text-align: left; vertical-align: top;
}
.rich-content th { background: var(--surface-2); font-weight: 600; }
.rich-content tr:nth-child(even) td { background: rgba(127, 127, 127, .04); }

@media (max-width: 640px) {
    .rich-editor-host .toastui-editor-defaultUI-toolbar { flex-wrap: wrap; height: auto; }
    .rich-content { font-size: 13.5px; }
}