/* ==========================================================================
   ATENAVAULT LOCAL - ESTILOS NATIVOS DE DESKTOP
   ========================================================================== */

/* 1. RESET GLOBAL E LAYOUT PRINCIPAL */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; 
    width: 100%;
    overflow: hidden; 
    background-color: #f8f9fa; 
    box-sizing: border-box;
}

.vault-app-container {
    display: flex;
    height: 100%; 
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #ced4da; 
    box-sizing: border-box;
}

/* ==========================================================================
   2. BARRA LATERAL E NAVEGAÇÃO
   ========================================================================== */
.vault-sidebar { 
    width: 280px; 
    min-width: 280px;
    height: 100%; 
    display: flex;
    flex-direction: column;
    overflow: hidden !important; 
    border-right: 1px solid #dee2e6; 
    background-color: #f4f5f7; 
    padding: 15px; 
    transition: margin-left 0.3s ease, padding 0.3s ease; 
    position: relative; 
}

.vault-sidebar.collapsed {
    margin-left: -280px;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right: none;
}

.sidebar-header { flex-shrink: 0; }
.sidebar-body { flex-grow: 1; overflow-y: auto; padding-right: 5px; margin-top: 5px; }
.sidebar-body::-webkit-scrollbar { width: 5px; }
.sidebar-body::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }

#sidebar-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
    z-index: 100;
    transition: background-color 0.2s ease;
}
#sidebar-resizer:hover, #sidebar-resizer.resizing { background-color: #0d6efd; }

.tree-node { width: 100%; }
.file-item { cursor: pointer; padding: 6px 8px; border-radius: 4px; transition: background-color 0.1s; border: 1px solid transparent; margin-bottom: 2px; }
.file-item:hover { background-color: #e4e6e8; }
.file-item.selected { background-color: #e0e5eb; color: #0d6efd; font-weight: 600; }


/* ==========================================================================
   3. ÁREA PRINCIPAL E PAINÉIS DE EDIÇÃO
   ========================================================================== */
.vault-main-area {
    flex: 1; 
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0; 
}

#editors-container {
    display: flex;
    flex: 1;
    height: 100%;
    min-height: 0; 
}

/* Container elástico do painel - divide a tela sozinho ou lado a lado */
.editor-pane { 
    display: flex;
    flex-direction: column;
    flex: 1; 
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

/* Estilização da barra consolidada do editor */
.editor-pane > .d-flex {
    padding: 6px 12px !important; /* Mais compacta para ganhar espaço */
    background-color: #ffffff;
    min-height: 45px;
    z-index: 100;
}

/* Garante que o input do nome do arquivo não tenha bordas e pareça um título */
.editor-pane input.form-control-sm {
    box-shadow: none !important;
    outline: none !important;
}

/* Remove o espaçamento entre a toolbar e o cabeçalho */
.editor-toolbar {
    border-top: none !important;
}
/* ==========================================================================
   4. O EDITOR DE TEXTO (EASYMDE E CODEMIRROR)
   ========================================================================== */
/* O container principal do editor agora não rola */
.EasyMDEContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; 
    overflow: hidden; /* Fundamental para travar a barra no topo */
}

/* A barra de ferramentas fica estática no topo do container */
.editor-toolbar { 
    border: none !important; 
    border-bottom: 1px solid #f0f0f0 !important;
    background-color: #ffffff; 
    padding: 5px 15px; 
    border-radius: 0 !important; 
    opacity: 0.8; 
    transition: opacity 0.2s;
    /* Remover o position: sticky e z-index problemáticos */
    flex-shrink: 0; /* Impede a barra de encolher */
}
.editor-toolbar:hover { opacity: 1; }
.editor-toolbar button { width: 28px !important; height: 28px !important; margin: 2px !important; border-radius: 4px; }
.editor-toolbar button.active, .editor-toolbar button:hover { background: #f0f0f0 !important; border-color: transparent !important; }

/* O CodeMirror ocupa o resto do espaço disponível */
.CodeMirror { 
    flex: 1 !important; 
    height: auto !important; /* Importante: mudar de 100% para auto */
    min-height: 0 !important;
    border: none !important; 
    border-radius: 0 !important; 
    font-size: 15px !important; 
    line-height: 1.6;
    padding: 0; /* Padding movido para a área de rolagem */
    background-color: #ffffff !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    overflow: hidden !important; /* Esconde a rolagem do wrapper externo */
}

.CodeMirror .cm-header { font-family: 'Consolas', 'Courier New', monospace !important; }

/* A área de texto em si, onde a rolagem DE FATO acontece */
.CodeMirror-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important; /* Preenche o CodeMirror */
    padding: 0 20px 40px 20px !important; /* Padding lateral movido para cá */
    box-sizing: border-box;
}

/* Garante o espaço físico largo para a barra de rolagem */
.CodeMirror-vscrollbar {
    width: 16px !important; 
    display: block !important; 
    overflow-y: scroll !important;
    right: 0 !important; /* Posiciona a barra corretamente */
}

/* ==========================================================================
   5. MODO DE LEITURA E PREVIEW LADO A LADO DO EASYMDE
   ========================================================================== */

/* Preview em tela inteira */
.editor-preview-active { 
    background-color: #ffffff !important; 
    padding: 20px 40px !important; 
    overflow-y: auto !important; 
    height: 100% !important; 
}
.editor-preview-active::before { 
    content: 'LEITURA'; 
    position: absolute; top: 15px; right: 20px; 
    background-color: #f8f9fa; color: #adb5bd; 
    padding: 2px 10px; border-radius: 4px; 
    font-size: 0.8rem; font-weight: bold; border: 1px solid #e9ecef;
    z-index: 100; pointer-events: none; 
}

/* Modo Lado a Lado (Código na esquerda, Visualização na direita) */
.CodeMirror.CodeMirror-sided {
    flex: 1 1 50% !important; /* Ajuste para Flexbox */
    width: 50% !important;
    height: 100% !important; /* Preenche a altura */
    box-sizing: border-box;
}

.editor-preview-side { 
    flex: 1 1 50% !important; /* Ajuste para Flexbox */
    width: 50% !important;
    height: 100% !important; /* Preenche a altura */
    box-sizing: border-box;
    border-radius: 0 !important; 
    border: none !important; 
    border-left: 1px solid #dee2e6 !important; 
    background-color: #ffffff !important; 
    padding: 20px 30px !important;
    overflow-y: auto !important; /* Adiciona rolagem independente ao preview */
}

/* ==========================================================================
   6. ROLAGEM GLOBAL E SCROLLBAR DO WINDOWS
   ========================================================================== */

/* Garante o espaço físico largo para a barra do editor */
.CodeMirror-vscrollbar {
    width: 16px !important; 
    display: block !important; 
    overflow-y: scroll !important;
}

/* Personalização global da barra do navegador */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #f8f9fa; border-left: 1px solid #e9ecef; }
::-webkit-scrollbar-thumb { background-color: #adb5bd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #6c757d; }


/* ==========================================================================
   7. EXTRAS E RESPONSIVIDADE
   ========================================================================== */
.cloud-header { 
    background: transparent; padding: 5px 0; font-weight: bold; 
    font-size: 0.75rem; text-transform: uppercase; color: #6c757d; letter-spacing: 0.5px;
    margin-bottom: 5px; margin-top: 10px; border-bottom: 1px solid #e9ecef;
}
.dropdown-toggle-no-caret::after { display: none !important; }
.CodeMirror-dialog { 
    background: #f8f9fa !important; 
    color: #212529 !important; 
    border-bottom: 2px solid #0d6efd !important; 
    padding: 10px 15px !important; 
    font-size: 0.9rem !important; 
    /* Novas regras para alinhar a caixa e o contador lado a lado: */
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
}

.CodeMirror-dialog input { 
    border: 1px solid #ced4da !important; 
    border-radius: 4px !important; 
    padding: 4px 8px !important; 
    outline: none !important; 
}

/* Estilo da etiqueta do contador de busca */
#cm-search-count {
    font-size: 0.8rem;
    padding: 5px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    white-space: nowrap; /* Evita que o texto "encontrado(s)" quebre no meio */
}

/* Mantendo Gaveta Mobile */
.sidebar-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1040; backdrop-filter: blur(2px); }
@media (max-width: 768px) {
    .vault-sidebar { position: fixed; left: -320px; z-index: 1050; transition: left 0.3s; box-shadow: 5px 0 15px rgba(0,0,0,0.1); }
    .vault-sidebar.show { left: 0; }
}

/* Caracteres invisíveis */
.cm-invisibles-space { position: relative; display: inline-block; }
.cm-invisibles-space::after { content: "·"; position: absolute; left: 50%; transform: translateX(-50%); color: #adb5bd; pointer-events: none; }
.cm-invisibles-tab { position: relative; display: inline-block; }
.cm-invisibles-tab::after { content: "→"; position: absolute; left: 0; color: #adb5bd; pointer-events: none; }
.cm-show-invisibles .CodeMirror-line::after { content: "↵"; color: #adb5bd; opacity: 0.6; pointer-events: none; margin-left: 4px; }


/* ==========================================================================
   8. VISUALIZAÇÃO DE PROPRIEDADES (YAML FRONTMATTER)
   ========================================================================== */
.atena-properties-container { border: 1px solid #e3e6ea; border-radius: 6px; background-color: #fdfdfd; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.atena-properties-header { padding: 10px 15px; color: #495057; font-size: 0.85rem; cursor: pointer; user-select: none; display: flex; align-items: center; background-color: #f8f9fa; border-bottom: 1px solid transparent; transition: background-color 0.2s ease; }
.atena-properties-header:hover { background-color: #e9ecef; }
.atena-properties-body { display: flex; flex-direction: column; padding: 6px 0; }
.property-row { display: flex; padding: 6px 15px; font-size: 0.85rem; align-items: center; border-bottom: 1px solid transparent; }
.property-row:hover { background-color: #f1f3f5; }
.property-key { width: 35%; color: #6c757d; font-weight: 500; }
.property-value { width: 65%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.property-chip { background-color: #e2e8f0; color: #334155; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; border: 1px solid #cbd5e1; }
.property-link { color: #0d6efd; text-decoration: none; background-color: #e7f1ff; padding: 2px 8px; border-radius: 4px; word-break: break-all; }
.property-link:hover { text-decoration: underline; background-color: #cfe2ff; }
.property-text { color: #212529; }
.atena-properties-container.collapsed .atena-properties-body { display: none; }
.atena-properties-container.collapsed .atena-properties-header { border-bottom: none; }
.atena-properties-container.collapsed .toggle-icon { transform: rotate(-90deg); }
.toggle-icon { transition: transform 0.2s ease; font-size: 0.75rem; }

/* Editor YAML nativo */
.yaml-editor-bg { background-color: #f6f8fa; border-left: 3px solid #0d6efd; }
.yaml-fold-btn { display: inline-block; margin-left: 15px; font-size: 11px; font-weight: bold; color: #6c757d; cursor: pointer; user-select: none; padding: 2px 8px; border-radius: 4px; background: #e9ecef; transition: all 0.2s; vertical-align: middle; }
.yaml-fold-btn:hover { background: #ced4da; color: #212529; }
.yaml-fold-btn.is-folded { background: #0d6efd; color: #ffffff; box-shadow: 0 2px 5px rgba(13, 110, 253, 0.3); }

/* AtenaView inline fields */
.av-field{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; margin:2px 6px 2px 0; border:1px solid #dee2e6; border-radius:999px; background:#f8f9fa; font-size:0.78rem; line-height:1.2; white-space:nowrap; }
.av-field .av-k{ font-weight:700; color:#495057; }
.av-field .av-v{ color:#0d6efd; }
.av-field .av-v.neg{ color:#dc3545; }


/* ==========================================================================
   9. NAVEGAÇÃO LATERAL DO TEXTO (Outline/TOC)
   ========================================================================== */
.outline-container { 
    position: absolute; top: 50px; right: 0; bottom: 0; width: 250px; 
    background: rgba(255,255,255,0.95); backdrop-filter: blur(5px);
    border-left: 1px solid #ddd; overflow-y: auto; z-index: 1040; display: none; padding: 15px; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.03); 
}
.outline-container.show-outline { display: block; }
/* O puxador invisível para redimensionar o índice */
.outline-resizer {
    position: absolute;
    top: 0;
    left: -3px; /* Fica na borda esquerda do índice */
    width: 6px;
    height: 100%;
    cursor: ew-resize; /* Cursor de arrastar horizontal */
    background-color: transparent;
    z-index: 1050;
    transition: background-color 0.2s ease;
}

.outline-resizer:hover, .outline-resizer.resizing {
    background-color: #0d6efd;
    opacity: 0.8;
}
.outline-item { position: relative; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: #495057; padding: 4px 0; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.outline-item:hover { color: #0d6efd; text-decoration: underline; }
.outline-h1 { font-weight: bold; margin-top: 10px; } 
.outline-h2 { margin-left: 15px; } 
.outline-h3 { margin-left: 30px; font-size: 0.85rem; }
.outline-alpha { padding-left: 10px !important; }

.outline-item-actions { opacity: 0; transition: opacity 0.2s ease; display: flex; gap: 2px; }
.outline-item:hover .outline-item-actions { opacity: 1; }
.outline-action-btn { background: transparent; border: none; color: #6c757d; cursor: pointer; padding: 0 4px; font-size: 0.9em; border-radius: 3px; }
.outline-action-btn:hover { background: #e9ecef; color: #0d6efd; }

/* ==========================================================================
   PALETA DE COMANDOS (VS CODE STYLE)
   ========================================================================== */
#modalCommandPalette .modal-content {
    background-color: #f8f9fa;
    border: 1px solid #ced4da !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

#cmd-list {
    padding: 6px;
    overflow-x: hidden; /* Mata a rolagem horizontal feia */
}

/* Redefine a barra de rolagem EXCLUSIVAMENTE para a Paleta (Fininha e sutil) */
#cmd-list::-webkit-scrollbar { width: 6px; height: 6px; }
#cmd-list::-webkit-scrollbar-track { background: transparent; border: none; }
#cmd-list::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 8px; border: none; }
#cmd-list::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* Itens da lista com bordas arredondadas e sem transbordar */
#modalCommandPalette .list-group-item {
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    background-color: transparent;
    border-radius: 6px;
    margin-bottom: 2px; /* Apenas margem para baixo, sem empurrar as laterais */
}

#modalCommandPalette .list-group-item.active {
    background-color: #0d6efd;
    color: white;
}

#modalCommandPalette .list-group-item:hover:not(.active) {
    background-color: #e9ecef;
}

/* ==========================================================================
   ZEN MODE (FOCO DE ESCRITA)
   ========================================================================== */
body.zen-mode .vault-sidebar,
body.zen-mode #sidebar-backdrop,
body.zen-mode #pane-resizer,
body.zen-mode .outline-container {
    display: none !important;
}

body.zen-mode .vault-main-area {
    width: 100% !important;
}

body.zen-mode .EasyMDEContainer .editor-toolbar {
    display: none !important;
}

/* Mantém apenas o badge de status (e o botão de Zen) visíveis no topo */
body.zen-mode .editor-pane > .d-flex {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.zen-mode .editor-pane > .d-flex > :not(#status-1):not(#status-2):not(.d-flex) {
    display: none !important;
}

body.zen-mode .editor-pane > .d-flex > .d-flex > *:not(.btn-zen-mode) {
    display: none !important;
}

body.zen-mode #status-1,
body.zen-mode #status-2 {
    display: inline-block !important;
}

body.zen-mode .editor-pane {
    border-right: none !important;
}

body.zen-mode .CodeMirror-scroll {
    padding-top: 20px !important;
    padding-bottom: 60px !important;
    padding-left: clamp(20px, 12vw, 220px) !important;
    padding-right: clamp(20px, 12vw, 220px) !important;
}

body.zen-mode .editor-preview-active,
body.zen-mode .editor-preview-side {
    padding-left: clamp(20px, 12vw, 220px) !important;
    padding-right: clamp(20px, 12vw, 220px) !important;
}

.btn-zen-mode.active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}


/* ==========================================================================
   FIX: MANTER TOOLBAR DO EDITOR FIXA NO TOPO (MODO NORMAL E LADO A LADO)
   ========================================================================== */
.EasyMDEContainer .editor-toolbar {
   /* ... */
}

/* Opcional: Se você usa o Dark Mode no EasyMDE, adicione isto também */
body[data-theme="dark"] .EasyMDEContainer .editor-toolbar {
   /* ... */
}

/* ==========================================================================
   MODO ESCURO (DARK MODE) GLOBAL E DEFINITIVO
   ========================================================================== */
/* Fundos e Textos Principais */
body[data-theme="dark"],
body[data-theme="dark"] .vault-app-container,
body[data-theme="dark"] .vault-main-area,
body[data-theme="dark"] #editors-container,
body[data-theme="dark"] .bg-white,
body[data-theme="dark"] .bg-light,
body[data-theme="dark"] .bg-transparent {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Menu Lateral e Árvore de Arquivos */
body[data-theme="dark"] .vault-sidebar {
    background-color: #1a1a1a !important;
    border-right: 1px solid #333 !important;
}
body[data-theme="dark"] .file-item { color: #e0e0e0 !important; }
body[data-theme="dark"] .file-item:hover { background-color: #2d2d2d !important; color: #fff !important; }
body[data-theme="dark"] .file-item.selected { background-color: #0d6efd !important; color: #fff !important; }
body[data-theme="dark"] .text-muted, 
body[data-theme="dark"] .text-dark { color: #a0a0a0 !important; }

/* Paineis do Editor e Toolbar */
body[data-theme="dark"] .editor-pane > .d-flex {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}
body[data-theme="dark"] .EasyMDEContainer .editor-toolbar,
body[data-theme="dark"] .editor-toolbar.fullscreen {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333 !important;
}

/* Colorir o texto/ícone do próprio <button> do EasyMDE */
body[data-theme="dark"] .editor-toolbar button,
body[data-theme="dark"] .editor-toolbar i { 
    color: #e0e0e0 !important; 
}

/* Efeito de hover e botão ativo */
body[data-theme="dark"] .editor-toolbar button.active, 
body[data-theme="dark"] .editor-toolbar button:hover { 
    background-color: #333 !important; 
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Separadores verticais da barra de ferramentas (aquelas linhazinhas finas) */
body[data-theme="dark"] .editor-toolbar i.separator {
    border-left: 1px solid #333 !important;
    border-right: 1px solid #111 !important;
}

/* Área de Texto (CodeMirror) */
body[data-theme="dark"] .CodeMirror {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
body[data-theme="dark"] .CodeMirror-cursor { border-left: 1px solid #fff !important; }

/* Modo de Leitura (Markdown Preview) */
body[data-theme="dark"] .editor-preview-active,
body[data-theme="dark"] .editor-preview-side,
body[data-theme="dark"] .markdown-body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}
body[data-theme="dark"] .markdown-body table tr,
body[data-theme="dark"] .markdown-body table th,
body[data-theme="dark"] .markdown-body table td {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
}
body[data-theme="dark"] .markdown-body pre, 
body[data-theme="dark"] .markdown-body code {
    background-color: #2d2d2d !important;
    color: #f8f8f2 !important;
}

/* Inputs, Modais e Botões */
body[data-theme="dark"] input.form-control,
body[data-theme="dark"] select.form-select {
    background-color: #2d2d2d !important;
    color: #fff !important;
    border-color: #444 !important;
}
body[data-theme="dark"] input.form-control::placeholder { color: #888 !important; }
body[data-theme="dark"] .modal-content {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}
body[data-theme="dark"] .modal-header,
body[data-theme="dark"] .modal-footer { border-color: #333 !important; }
body[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ==========================================================================
   MODO COMPARAÇÃO (DIFF MATCH PATCH)
   ========================================================================== */
.text-diff-removido {
    background-color: rgba(220, 53, 69, 0.25) !important;
    text-decoration: line-through; /* Risca o que foi removido no Painel 1 */
}

.text-diff-adicionado {
    background-color: rgba(25, 135, 84, 0.3) !important;
    font-weight: bold; /* Destaca o que foi adicionado no Painel 2 */
}

.timeline-list-panel {
    min-height: 55vh;
    max-height: 60vh;
    background: #ffffff;
}

.timeline-list-items {
    max-height: calc(60vh - 48px);
    overflow-y: auto;
    padding-right: 2px;
}

.timeline-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: pointer;
    background: #f8f9fa;
    transition: all 0.15s ease;
}

.timeline-item:hover {
    border-color: #cfe2ff;
    background: #eef4ff;
}

.timeline-item.active {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.timeline-item-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

.timeline-item-meta {
    font-size: 0.75rem;
    color: #6c757d;
}

.timeline-diff-panel {
    min-height: 55vh;
    max-height: 60vh;
    background: #ffffff;
}

.timeline-diff-content {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    background: #fcfcfd;
    min-height: calc(60vh - 56px);
    max-height: calc(60vh - 56px);
    overflow: auto;
    padding: 10px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.timeline-diff-add {
    background: rgba(25, 135, 84, 0.22);
}

.timeline-diff-del {
    background: rgba(220, 53, 69, 0.22);
    text-decoration: line-through;
}

.timeline-diff-eq {
    color: #334155;
}

/* Modo Escuro */
body[data-theme="dark"] .text-diff-removido { background-color: rgba(220, 53, 69, 0.45) !important; color: #ffb3b3 !important; }
body[data-theme="dark"] .text-diff-adicionado { background-color: rgba(25, 135, 84, 0.5) !important; color: #a3ffcc !important; }

body[data-theme="dark"] .timeline-list-panel,
body[data-theme="dark"] .timeline-diff-panel,
body[data-theme="dark"] .timeline-diff-content {
    background: #151515 !important;
    border-color: #2e2e2e !important;
}

body[data-theme="dark"] .timeline-item {
    background: #1f1f1f;
    border-color: #333;
}

body[data-theme="dark"] .timeline-item:hover {
    background: #273447;
    border-color: #365072;
}

body[data-theme="dark"] .timeline-item.active {
    background: #213246;
    border-color: #0d6efd;
}

body[data-theme="dark"] .timeline-item-title,
body[data-theme="dark"] .timeline-diff-eq {
    color: #dbe4ef;
}

body[data-theme="dark"] .timeline-item-meta,
body[data-theme="dark"] #timelineResumoDiff,
body[data-theme="dark"] #timelineContador {
    color: #9aa7b8 !important;
}

/* ==========================================================================
   CORREÇÃO DEFINITIVA: MENU EXPORTAR VS PREVIEW LADO A LADO
   ========================================================================== */

/* 1. Força a barra superior (título e botões) a ficar numa camada muito alta */
.editor-pane > .d-flex {
    position: relative !important;
    z-index: 1050 !important;
}

/* 2. Garante que o menu suspenso do Bootstrap acompanha essa elevação */
.dropdown-menu {
    z-index: 1060 !important;
}

/* 3. Rebaixa APENAS o painel branco da direita para não engolir o menu */
.editor-preview-side {
    z-index: 10 !important; /* Suficiente para funcionar, mas perde para o menu (1060) */
}

/* ==========================================================================
   10. MODO TELA CHEIA (FULLSCREEN DE PLUGINS DA PLATAFORMA)
   ========================================================================== */
.atena-presentation-mode-global {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

.atena-presentation-mode-global .atena-plugin-scroll-container {
    max-height: calc(100vh - 55px) !important; /* Desconta a barra de título do plugin */
    height: calc(100vh - 55px) !important;
    border: none !important;
}

/* Fundo unificado para garantir que áreas vazias não fiquem transparentes em tela cheia */
.atena-presentation-mode-global .atena-plugin-canvas {
    background: #f8f9fa;
    min-height: 100%;
}
/* FIX: Force transparent background on plugin wrappers when grid is active */
.atena-plugin-canvas.bg-grid-active > div { background-color: transparent !important; background: transparent !important; }

/* ==========================================================================
   NOVOS TEMAS (DIMMED, PAPER, MID-TONE, SOFT-DARK)
   ========================================================================== */

/* 1. DIMMED LIGHT */
body[data-theme='dimmed'], body[data-theme='dimmed'] .vault-app-container, body[data-theme='dimmed'] .vault-main-area, body[data-theme='dimmed'] #editors-container, body[data-theme='dimmed'] .bg-white, body[data-theme='dimmed'] .bg-light { background-color: #f0f2f5 !important; color: #333 !important; }
body[data-theme='dimmed'] .vault-sidebar { background-color: #e9ecef !important; border-right: 1px solid #dee2e6 !important; }
body[data-theme='dimmed'] .editor-pane > .d-flex, body[data-theme='dimmed'] .EasyMDEContainer .editor-toolbar { background-color: #ffffff !important; border-bottom: 1px solid #dee2e6 !important; }
body[data-theme='dimmed'] .CodeMirror, body[data-theme='dimmed'] .editor-preview-active, body[data-theme='dimmed'] .markdown-body { background-color: #ffffff !important; color: #333 !important; border-color: #dee2e6 !important; }

/* 2. WARM PAPER */
body[data-theme='paper'], body[data-theme='paper'] .vault-app-container, body[data-theme='paper'] .vault-main-area, body[data-theme='paper'] #editors-container, body[data-theme='paper'] .bg-white, body[data-theme='paper'] .bg-light { background-color: #fdf6e3 !important; color: #494435 !important; }
body[data-theme='paper'] .vault-sidebar { background-color: #eee8d5 !important; border-right: 1px solid #d1c8b3 !important; }
body[data-theme='paper'] .file-item:hover { background-color: #e6dfcc !important; }
body[data-theme='paper'] .editor-pane > .d-flex, body[data-theme='paper'] .EasyMDEContainer .editor-toolbar { background-color: #fdf6e3 !important; border-bottom: 1px solid #d1c8b3 !important; }
body[data-theme='paper'] .CodeMirror, body[data-theme='paper'] .editor-preview-active, body[data-theme='paper'] .markdown-body { background-color: #fdf6e3 !important; color: #494435 !important; border-color: #d1c8b3 !important; }

/* 3. MID-TONE */
body[data-theme='mid-tone'], body[data-theme='mid-tone'] .vault-app-container, body[data-theme='mid-tone'] .vault-main-area, body[data-theme='mid-tone'] #editors-container, body[data-theme='mid-tone'] .bg-white, body[data-theme='mid-tone'] .bg-light { background-color: #737373 !important; color: #f8f9fa !important; }
body[data-theme='mid-tone'] .vault-sidebar { background-color: #666666 !important; border-right: 1px solid #555 !important; }
body[data-theme='mid-tone'] .file-item:hover { background-color: #555555 !important; }
body[data-theme='mid-tone'] .editor-pane > .d-flex, body[data-theme='mid-tone'] .EasyMDEContainer .editor-toolbar { background-color: #666666 !important; border-bottom: 1px solid #555 !important; }
body[data-theme='mid-tone'] .CodeMirror, body[data-theme='mid-tone'] .editor-preview-active, body[data-theme='mid-tone'] .markdown-body { background-color: #737373 !important; color: #f8f9fa !important; border-color: #555 !important; }
body[data-theme='mid-tone'] .modal-content, body[data-theme='mid-tone'] input.form-control, body[data-theme='mid-tone'] select.form-select, body[data-theme='mid-tone'] .dropdown-menu { background-color: #666666 !important; color: #fff !important; border-color: #555 !important; }
body[data-theme='mid-tone'] .dropdown-item { color: #f8f9fa !important; }
body[data-theme='mid-tone'] .dropdown-item:hover { background-color: #555 !important; color: #fff !important; }

/* 4. SOFT DARK */
body[data-theme='soft-dark'], body[data-theme='soft-dark'] .vault-app-container, body[data-theme='soft-dark'] .vault-main-area, body[data-theme='soft-dark'] #editors-container, body[data-theme='soft-dark'] .bg-white, body[data-theme='soft-dark'] .bg-light { background-color: #2d333b !important; color: #adbac7 !important; }
body[data-theme='soft-dark'] .vault-sidebar { background-color: #22272e !important; border-right: 1px solid #444c56 !important; }
body[data-theme='soft-dark'] .file-item:hover { background-color: #373e47 !important; color: #cdd9e5 !important; }
body[data-theme='soft-dark'] .file-item.selected { background-color: #316dca !important; color: #fff !important; }
body[data-theme='soft-dark'] .editor-pane > .d-flex, body[data-theme='soft-dark'] .EasyMDEContainer .editor-toolbar { background-color: #22272e !important; border-bottom: 1px solid #444c56 !important; }
body[data-theme='soft-dark'] .editor-toolbar button, body[data-theme='soft-dark'] .editor-toolbar i { color: #adbac7 !important; }
body[data-theme='soft-dark'] .CodeMirror, body[data-theme='soft-dark'] .editor-preview-active, body[data-theme='soft-dark'] .markdown-body { background-color: #2d333b !important; color: #adbac7 !important; border-color: #444c56 !important; }
body[data-theme='soft-dark'] .modal-content, body[data-theme='soft-dark'] input.form-control, body[data-theme='soft-dark'] select.form-select, body[data-theme='soft-dark'] .dropdown-menu { background-color: #22272e !important; color: #adbac7 !important; border-color: #444c56 !important; }
body[data-theme='soft-dark'] .dropdown-item { color: #adbac7 !important; }
body[data-theme='soft-dark'] .dropdown-item:hover { background-color: #373e47 !important; color: #cdd9e5 !important; }