/* --- VARIAVEIS GLOBAIS E TEMA --- */
:root {
    /* Cores Primitivas */
    --primary-color: #005fcc;
    --primary-hover: #004a9e;
    --text-on-primary: #ffffff;
    --selection-color: rgba(0, 95, 204, 0.25);

    /* Tema Light (Padrão) */
    --bg-color: #f0f2f5;
    --text-color: #1f1f1f;
    --editor-bg-color: #ffffff;
    --toolbar-bg-color: #f7f7f7;
    --border-color: #cccccc;
    --scrollbar-thumb-color: #a0a0a0;
    --scrollbar-thumb-hover-color: #808080;
    --menubar-hover-bg: rgba(0, 0, 0, 0.1);
    --tab-bg: #ececec;
    --tab-text-color: #555555;
    --tab-border-color: #cccccc;
    --tab-active-text-color: #1f1f1f;
    --tab-close-hover-bg: rgba(0, 0, 0, 0.1);
    --modal-bg: #ffffff;
    --sidebar-bg: #f0f2f5;
    --file-tree-hover-bg: rgba(0, 0, 0, 0.05);
    --welcome-hover-bg: rgba(0, 0, 0, 0.05);
    --search-input-bg: #ffffff;
    --search-mark-bg: #ffda0a;
    --search-mark-color: #000;
}

body[data-theme-base="dark"] {
    --bg-color: #2d2d2d;
    --text-color: #e8e8e8;
    --editor-bg-color: #1e1e1e;
    --toolbar-bg-color: #333333;
    --border-color: #4f4f4f;
    --scrollbar-thumb-color: #555555;
    --scrollbar-thumb-hover-color: #777777;
    --menubar-hover-bg: rgba(255, 255, 255, 0.1);
    --tab-bg: #2d2d2d;
    --tab-text-color: #b0b0b0;
    --tab-border-color: #404040;
    --tab-active-text-color: #e8e8e8;
    --tab-close-hover-bg: rgba(255, 255, 255, 0.2);
    --modal-bg: #1e1e1e;
    --sidebar-bg: #252526;
    --file-tree-hover-bg: rgba(255, 255, 255, 0.05);
    --welcome-hover-bg: rgba(255, 255, 255, 0.08);
    --search-input-bg: #3c3c3c;
    --search-mark-bg: #f6a624;
    --search-mark-color: #000;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme-base="light"]) {
        /* Aplica o tema dark se for a preferência do sistema E nenhum tema explícito for definido */
        --bg-color: #2d2d2d;
        --text-color: #e8e8e8;
        --editor-bg-color: #1e1e1e;
        --toolbar-bg-color: #333333;
        --border-color: #4f4f4f;
        --scrollbar-thumb-color: #555555;
        --scrollbar-thumb-hover-color: #777777;
        --menubar-hover-bg: rgba(255, 255, 255, 0.1);
        --tab-bg: #2d2d2d;
        --tab-text-color: #b0b0b0;
        --tab-border-color: #404040;
        --tab-active-text-color: #e8e8e8;
        --tab-close-hover-bg: rgba(255, 255, 255, 0.2);
        --modal-bg: #1e1e1e;
        --sidebar-bg: #252526;
        --file-tree-hover-bg: rgba(255, 255, 255, 0.05);
        --welcome-hover-bg: rgba(255, 255, 255, 0.08);
        --search-input-bg: #3c3c3c;
        --search-mark-bg: #f6a624;
        --search-mark-color: #000;
    }
}


/* --- ESTILOS BASE E LOADING --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #1e1e1e; z-index: 9999; display: flex;
    justify-content: center; align-items: center; transition: opacity 0.5s ease-out; opacity: 1;
}
#loading-screen--hidden { opacity: 0; pointer-events: none; }
.spinner {
    border: 6px solid rgba(255, 255, 255, 0.2); border-top: 6px solid var(--primary-color, #005fcc);
    border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- UTILITARIOS --- */
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) transparent; }
.custom-scrollbar::-webkit-scrollbar { height: 4px; width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-color); }
.btn:focus-visible, .menubar__button:focus-visible, .tab-bar__tab:focus-visible, .file-tree__item:focus-visible,
.icon-btn:focus-visible, .welcome-screen__button:focus-visible, .context-menu__item:focus-visible,
.dropdown-menu__item:focus-visible, .nav-select:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 2px; box-shadow: none;
}
.hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.text-right { text-align: right; }

/* --- LAYOUT PRINCIPAL --- */
.editor-layout { flex-grow: 1; display: flex; flex-direction: column; background-color: var(--editor-bg-color); overflow: hidden; position: relative; }
.editor-layout__drag-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 95, 204, 0.2);
    border: 4px dashed var(--primary-color); z-index: 999; display: none; justify-content: center; align-items: center;
    font-size: 24px; font-weight: bold; color: var(--primary-color); pointer-events: none;
}
.editor-layout--drag-active .editor-layout__drag-overlay { display: flex; }
.editor-layout__workspace { display: flex; flex-grow: 1; overflow: hidden; position: relative; }
.editor-layout__main { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.editor-layout__area { flex-grow: 1; position: relative; overflow: hidden; }

/* --- MENUBAR --- */
.menubar { background-color: var(--toolbar-bg-color); border-bottom: 1px solid var(--border-color); padding: 5px 15px; display: flex; align-items: center; gap: 5px; height: 30px; }
.menubar__group { position: relative; }
.menubar__button { background: none; border: none; padding: 6px 10px; cursor: pointer; font-size: 13px; color: inherit; border-radius: 4px; }
.menubar__button:hover { background-color: var(--menubar-hover-bg); }
.menubar__dropdown {
    display: none; position: absolute; background-color: var(--editor-bg-color); min-width: 220px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); z-index: 20; border-radius: 4px; border: 1px solid var(--border-color); padding: 5px 0; top: 100%; left: 0;
}
.menubar__dropdown--show { display: block; }
.dropdown-menu__item {
    color: inherit; padding: 8px 15px; display: flex; align-items: center; gap: 10px; width: 100%;
    text-align: left; background: none; border: none; font-size: 13px; cursor: pointer;
}
.dropdown-menu__item:hover { background-color: var(--primary-color); color: var(--text-on-primary); }
.dropdown-menu__separator { height: 1px; background-color: var(--border-color); margin: 4px 0; }
.dropdown-menu__item .material-symbols-outlined, .menubar__button .material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.dropdown-menu__label { padding: 5px 15px; display: block; font-size: 12px; font-weight: bold; }

/* --- BARRA DE ABAS (TAB-BAR) --- */
.tab-bar { display: flex; background-color: var(--toolbar-bg-color); border-bottom: 1px solid var(--border-color); padding: 0; gap: 1px; overflow-x: auto; }
.tab-bar__tab {
    display: flex; align-items: center; padding: 8px 15px; background-color: var(--tab-bg); border: none;
    border-right: 1px solid var(--tab-border-color); color: var(--tab-text-color); font-size: 13px;
    cursor: pointer; min-width: 120px; max-width: 200px; position: relative; user-select: none;
}
.tab-bar__tab--active { background-color: var(--editor-bg-color); color: var(--tab-active-text-color); border-top: 2px solid var(--primary-color); }
.tab-bar__tab--active .material-symbols-outlined { color: inherit !important; }
.tab-bar__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; pointer-events: none; }
.tab-bar__close { font-size: 16px; opacity: 0; border-radius: 50%; padding: 2px; margin-left: auto; }
.tab-bar__tab:hover .tab-bar__close, .tab-bar__tab--active .tab-bar__close { opacity: 1; }
.tab-bar__close:hover { background-color: var(--tab-close-hover-bg); color: #cf222e; }
.tab-bar__dirty-indicator { font-size: 20px; line-height: 10px; color: inherit; margin-left: 5px; display: none; pointer-events: none; }
.tab-bar__tab--dirty .tab-bar__dirty-indicator { display: block; }
.tab-bar__tab--dirty .tab-bar__close { display: none; }
.tab-bar__tab--dirty:hover .tab-bar__close { display: block; }
.tab-bar__tab--dirty:hover .tab-bar__dirty-indicator { display: none; }
.tab-bar__tab.dragging { opacity: 0.5; background: #e0e0e0; }
.tab-bar__tab.drag-over-before { border-left: 2px solid var(--primary-color); }
.tab-bar__tab.drag-over-after { border-right: 2px solid var(--primary-color); }
.tab-bar__add-button { background: none; border: none; color: inherit; cursor: pointer; padding: 0 10px; display: flex; align-items: center; }
.tab-bar__add-button .material-symbols-outlined { font-size: 20px; }
.tab-bar__add-button:hover { background-color: rgba(0, 0, 0, 0.05); }

/* --- ÁREA DO EDITOR E VIEWERS --- */
#monaco-editor-container { width: 100%; height: 100%; }
.viewer__info { width: 250px; flex-shrink: 0; border-left: 1px solid var(--border-color); padding: 15px; overflow-y: auto; font-size: 13px; box-sizing: border-box; }
.viewer__info h3 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); font-size: 16px; }
.viewer-metadata { list-style: none; padding: 0; margin: 0; word-break: break-all; }
.viewer-metadata__item { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid rgba(128,128,128,0.1); }
.viewer-metadata__item:last-child { border-bottom: none; }
.viewer-metadata__key { color: inherit; opacity: 0.7; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; }
.viewer-metadata__value { color: inherit; }
#image-viewer-container { width: 100%; height: 100%; display: flex; flex-direction: row; background-color: var(--bg-color); color: var(--text-color); }
.image-viewer__main { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; overflow: auto; }
#image-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
#media-viewer-container { width: 100%; height: 100%; display: flex; flex-direction: row; background-color: var(--bg-color); color: var(--text-color); }
.media-viewer__main { flex-grow: 1; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; overflow: auto; background-color: #000; }
#media-viewer-container video, #media-viewer-container audio { max-width: 100%; max-height: 100%; outline: none; }
#media-viewer-container audio { width: 80%; max-width: 600px; }

/* --- BARRA DE STATUS --- */
.status-bar { height: 22px; background-color: var(--primary-color); color: var(--text-on-primary); font-size: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }

/* --- MENU DE CONTEXTO --- */
#context-menu {
    display: none; position: absolute; z-index: 1000; background: var(--editor-bg-color); border: 1px solid var(--border-color);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 5px 0; min-width: 150px;
}
.context-menu__item { padding: 8px 15px; cursor: pointer; font-size: 13px; }
.context-menu__item:hover { background-color: var(--primary-color); color: var(--text-on-primary); }

/* --- MODAIS --- */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100; display: none; justify-content: center; align-items: center; }
.modal__content { background: var(--modal-bg); padding: 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); width: 90%; max-width: 800px; display: flex; flex-direction: column; }
.modal__content--diff-view { height: 95vh; width: 98vw; max-width: none; }
.modal__content--small { max-width: 400px; }
#diff-editor-container { flex-grow: 1; border: 1px solid var(--border-color); margin: 10px 0; }
.btn { padding: 8px 16px; border-radius: 4px; border: none; cursor: pointer; font-size: 13px; }
.btn--primary { background-color: var(--primary-color); color: var(--text-on-primary); }
.btn--secondary { background-color: #5a6268; color: white; margin-left: 10px; }
.modal-header-flex { display: flex; justify-content: space-between; align-items: center; }
.modal-header-flex h3 { margin: 0; }
.comparison-list { max-height: 200px; overflow-y: auto; margin-bottom: 15px; }

/* --- TOAST (NOTIFICAÇÃO) --- */
.toast {
    position: fixed; bottom: 30px; right: 30px; background: #333; color: white; padding: 10px 20px;
    border-radius: 4px; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 2000;
}
.toast--show { opacity: 1; }

/* --- SIDEBAR E ÁRVORE DE ARQUIVOS --- */
.nav-select { margin: 5px 15px; width: calc(100% - 30px); padding: 4px; background: var(--bg-color); border: 1px solid var(--border-color); color: inherit; }
.sidebar { width: 250px; background-color: var(--sidebar-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar--hidden { display: none; }
#sidebar-resizer { width: 5px; cursor: col-resize; background-color: transparent; flex-shrink: 0; z-index: 10; transition: background-color 0.2s; }
#sidebar-resizer:hover { background-color: rgba(0, 95, 204, 0.5); }
body.resizing-sidebar { cursor: col-resize; user-select: none; }
body.resizing-sidebar .editor-layout__main { pointer-events: none; }
.sidebar__header {
    padding: 8px 10px; font-size: 11px; font-weight: bold; text-transform: uppercase; display: flex;
    justify-content: space-between; align-items: center; background-color: var(--toolbar-bg-color);
    border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.file-tree { flex-grow: 1; overflow-y: auto; padding: 5px 0; }
.file-tree__item {
    padding: 3px 10px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
}
.file-tree__item:hover { background-color: var(--file-tree-hover-bg); }
.file-tree__item--active { background-color: var(--primary-color); color: var(--text-on-primary); }
.file-tree__children { padding-left: 15px; display: none; }
.file-tree__children--expanded { display: block; }
.icon-btn { background: none; border: none; cursor: pointer; color: inherit; padding: 0; display: flex; align-items: center; }
.icon-btn:hover { color: var(--primary-color); }
.icon-btn--small .material-symbols-outlined { font-size: 16px; }

/* --- PAINEL DE BUSCA --- */
.search-panel { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; }
.search-panel__form { display: flex; padding: 8px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
#global-search-input { flex-grow: 1; background-color: var(--search-input-bg); color: inherit; border: 1px solid var(--border-color); padding: 5px 8px; border-radius: 3px; outline: none; }
#global-search-input:focus { border-color: var(--primary-color); }
#global-search-submit-btn { margin-left: 5px; padding: 4px; }
.search-panel__results { flex-grow: 1; overflow-y: auto; padding: 5px 0; font-size: 13px; }
.search-result__file { padding: 4px 10px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.search-result__file:hover { background-color: var(--file-tree-hover-bg); }
.search-result__matches { padding-left: 15px; display: none; }
.search-result__matches--expanded { display: block; }
.search-result__match-item { padding: 2px 10px 2px 20px; white-space: pre; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: flex; gap: 10px; }
.search-result__match-item:hover { background-color: var(--primary-color); color: var(--text-on-primary); }
.search-result__line-number { opacity: 0.7; text-align: right; min-width: 30px; user-select: none; }
.search-result__line-content { flex-grow: 1; }
.search-result__line-content mark { background-color: var(--search-mark-bg); color: var(--search-mark-color); font-weight: bold; border-radius: 2px; }

/* --- TELA DE BOAS-VINDAS --- */
#welcome-screen {
    width: 100%; height: 100%; display: none; justify-content: center; align-items: center;
    flex-direction: column; background-color: var(--editor-bg-color); color: var(--text-color);
    overflow-y: auto; user-select: none;
}
.welcome-screen__container { max-width: 800px; width: 90%; padding: 20px; }
.welcome-screen__title { font-size: 3em; font-weight: 300; text-align: center; margin-bottom: 40px; color: var(--primary-color); }
.welcome-screen__columns { display: flex; gap: 40px; }
.welcome-screen__column { flex: 1; }
.welcome-screen__subtitle { font-size: 1.2em; font-weight: 600; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
.welcome-screen__list { list-style: none; padding: 0; margin: 0; }
.welcome-screen__button, .welcome-screen__list-item {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 5px; cursor: pointer;
    transition: background-color 0.2s; width: 100%; text-align: left; font-size: 14px;
    background: none; border: none; color: inherit;
}
.welcome-screen__button .material-symbols-outlined, .welcome-screen__list-item .material-symbols-outlined { font-size: 20px; }
.welcome-screen__button:hover, .welcome-screen__list-item:hover { background-color: var(--welcome-hover-bg); }
.welcome-screen__list-item-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-screen__list-item-path { font-size: 12px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.welcome-screen__no-recents { padding: 10px; font-style: italic; opacity: 0.7; text-align: center; }

/* --- MUDANÇA: Estilos para múltiplas pastas na barra lateral --- */
.file-tree {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0; 
    display: flex;
    flex-direction: column;
}

.file-tree__root-folder {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border-color);
}
.file-tree__root-folder:last-child {
    border-bottom: none;
    flex-grow: 1;
}

.file-tree__folder-content {
    padding: 5px 0;
    overflow-y: auto;
}

.sidebar__header {
    height: auto;
    min-height: 28px;
    padding: 6px 10px;
}

.close-folder-btn .material-symbols-outlined {
    font-size: 18px;
}
.close-folder-btn:hover {
    color: #cf222e;
}