/* ============================================
   EDITOR.CSS — EasyMDE Wisdomverse Adaptativo
   ============================================ */

/* 1. CONTAINER PRINCIPAL */
.EasyMDEContainer {
    border-radius: 0.5rem !important;
    border: 1px solid var(--wv-border, #dee2e6) !important;
}

/* 2. BARRA DE FERRAMENTAS (TOOLBAR) */
.EasyMDEContainer .editor-toolbar {
    background-color: var(--wv-surface-soft, var(--wv-surface-deep, #f8f9fa)) !important;
    border-color: var(--wv-border, #dee2e6) !important;
    border-bottom: 1px solid var(--wv-border, #dee2e6) !important;
    opacity: 1 !important;
    padding: 6px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Botões da barra */
.EasyMDEContainer .editor-toolbar button {
    color: var(--bs-body-color, #212529) !important;
    border: 1px solid transparent !important;
    border-radius: 0.35rem !important;
    background: transparent !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
    background: color-mix(in srgb, var(--wv-accent, #0d6efd) 15%, transparent) !important;
    border-color: var(--wv-accent, #0d6efd) !important;
    color: var(--wv-accent, #0d6efd) !important;
}

.EasyMDEContainer .editor-toolbar i.separator {
    border-left: 1px solid var(--wv-border, #dee2e6) !important;
    border-right: none !important;
    margin: 0 4px !important;
    height: 18px !important;
}

/* 3. ÁREA DE DIGITAÇÃO (CODEMIRROR) */
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .CodeMirror-scroll,
.EasyMDEContainer .cm-s-paper {
    background-color: var(--wv-surface-deep, #ffffff) !important;
    color: var(--bs-body-color, #212529) !important;
    border-color: var(--wv-border, #dee2e6) !important;
    min-height: 400px !important;
    font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* Sintaxe do Markdown */
.EasyMDEContainer .CodeMirror .cm-header,
.EasyMDEContainer .CodeMirror .cm-variable-2,
.EasyMDEContainer .CodeMirror .cm-variable-3,
.EasyMDEContainer .CodeMirror .cm-keyword,
.EasyMDEContainer .CodeMirror span {
    color: inherit !important;
}

/* Cursor e Seleção */
.EasyMDEContainer .CodeMirror-cursor {
    border-left: 2px solid var(--wv-accent, #0d6efd) !important;
}

.EasyMDEContainer .CodeMirror-selected {
    background: color-mix(in srgb, var(--wv-accent, #0d6efd) 20%, transparent) !important;
}

/* 4. PREVIEW DO EDITOR */
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
    background-color: var(--wv-surface-deep, #ffffff) !important;
    color: var(--bs-body-color, #212529) !important;
    border-color: var(--wv-border, #dee2e6) !important;
    padding: 1.5rem !important;
}

.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview h4,
.EasyMDEContainer .editor-preview p,
.EasyMDEContainer .editor-preview li,
.EasyMDEContainer .editor-preview-side h1,
.EasyMDEContainer .editor-preview-side h2,
.EasyMDEContainer .editor-preview-side h3,
.EasyMDEContainer .editor-preview-side h4,
.EasyMDEContainer .editor-preview-side p,
.EasyMDEContainer .editor-preview-side li {
    color: var(--bs-body-color, #212529) !important;
}

.EasyMDEContainer .editor-preview a {
    color: var(--wv-accent, #0d6efd) !important;
}

.EasyMDEContainer .editor-preview code {
    background: var(--wv-surface, #f8f9fa) !important;
    color: var(--wv-accent, #0d6efd) !important;
    padding: 0.2em 0.4em !important;
    border-radius: 0.25rem !important;
}

.EasyMDEContainer .editor-preview pre {
    background: var(--wv-surface, #f8f9fa) !important;
    border: 1px solid var(--wv-border, #dee2e6) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
}

/* 5. TEMA ESCURO (DARK MODE)
   O EasyMDE herda os tokens globais de variables.css.
   Não existe uma segunda paleta local para o editor. */

[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-header,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-variable-2,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-variable-3,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror .cm-keyword,
[data-bs-theme="dark"] .EasyMDEContainer .CodeMirror span {
    color: var(--wv-text-primary, #e7edf3) !important;
}

/* ============================================
   SOLUÇÃO DEFINITIVA (NORMAL, SIDE-BY-SIDE E FULLSCREEN)
   ============================================ */

/* 1. MODO NORMAL (Edição padrão dentro do card):
      Sticky funciona APENAS quando a toolbar NÃO for .fullscreen nem .editor-toolbar-side */
.EasyMDEContainer:not(.CodeMirror-fullscreen) .editor-toolbar:not(.fullscreen):not(.editor-toolbar-side) {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* 2. AMBOS OS MODOS EXPANDIDOS (Fullscreen sozinho OU Side-by-Side):
      Fixa a toolbar RIGOROSAMENTE no topo da tela do navegador (top: 0) */
.EasyMDEContainer .editor-toolbar.fullscreen,
.EasyMDEContainer .editor-toolbar.editor-toolbar-side,
.EasyMDEContainer.CodeMirror-fullscreen .editor-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    z-index: 999999 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 3. ESTRUTURA DOS CONTAINERS EXPANDIDOS (Preenche a tela inteira) */
.EasyMDEContainer.CodeMirror-fullscreen,
.EasyMDEContainer:has(.editor-preview-active-side) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999998 !important;
    background-color: var(--wv-surface-deep, #ffffff) !important;
}

/* 4. ÁREA DE ESCRITA NO FULLSCREEN SOZINHO:
      Empurra o CodeMirror para começar 50px abaixo da toolbar fixa */
.EasyMDEContainer.CodeMirror-fullscreen .CodeMirror,
.EasyMDEContainer.CodeMirror-fullscreen .CodeMirror-scroll {
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 50px) !important;
}

/* 5. ÁREA DE PREVIEW NO SIDE-BY-SIDE:
      Empurra o painel de preview do side-by-side 50px para baixo */
.EasyMDEContainer .editor-preview-side.editor-preview-active-side {
    top: 50px !important;
    height: calc(100vh - 50px) !important;
}

/* Libera o container pai do Bootstrap no modo normal */
.card-body {
    overflow: visible !important;
}

/* ============================================
   RESPONSIVIDADE DE IMAGENS E MÍDIA (MOBILE)
   ============================================ */

/* 1. Limita qualquer imagem no Preview para não estourar a largura da tela */
.EasyMDEContainer .editor-preview img,
.EasyMDEContainer .editor-preview-side img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1rem auto !important; /* Centraliza a imagem com respiro vertical */
    border-radius: 0.5rem !important; /* Mantém o visual arredondado do Wisdomverse */
}

/* 2. Trata imagens e blocos de código em telas pequenas */
@media (max-width: 768px) {
    /* Garante que o preview respeite os limites do card sem criar scroll horizontal na página */
    .EasyMDEContainer .editor-preview,
    .EasyMDEContainer .editor-preview-side {
        padding: 1rem !important;
        overflow-x: hidden !important;
        word-break: break-word !important;
    }

    /* Impede que tabelas ou imagens de código estourem o container no mobile */
    .EasyMDEContainer .editor-preview table,
    .EasyMDEContainer .editor-preview-side table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }
}