/**
 * Tema VS Code para a seção de conhecimentos
 */

/* Cores do VS Code Dark Theme */
:root {
  --vscode-bg: #1e1e1e;
  --vscode-sidebar: #252526;
  --vscode-sidebar-hover: #2a2d2e;
  --vscode-border: #3c3c3c;
  --vscode-text: #cccccc;
  --vscode-text-muted: #969696;
  --vscode-accent: #007acc;
  --vscode-accent-hover: #1177bb;
  --vscode-activity-bar: #333333;
  --vscode-tab-active: #1e1e1e;
  --vscode-tab-inactive: #2d2d30;
  --vscode-selection: #264f78;
}

/* Container principal do VS Code */
.vscode-container {
  background-color: var(--vscode-bg);
  border: 1px solid var(--vscode-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  min-height: 500px;
}

/* Barra de título do VS Code */
.vscode-title-bar {
  background-color: var(--vscode-sidebar);
  height: 35px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid var(--vscode-border);
  font-size: 13px;
  color: var(--vscode-text);
}

.vscode-title-bar .window-controls {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.window-control {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.window-control.close { background-color: #ff5f57; }
.window-control.minimize { background-color: #ffbd2e; }
.window-control.maximize { background-color: #28ca42; }

/* Activity Bar (barra lateral esquerda) */
.activity-bar {
  background-color: var(--vscode-activity-bar);
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  border-right: 1px solid var(--vscode-border);
}

.activity-bar-item {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--vscode-text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.activity-bar-item:hover,
.activity-bar-item.active {
  background-color: var(--vscode-sidebar-hover);
  color: var(--vscode-text);
}

.activity-bar-item.active {
  border-left: 2px solid var(--vscode-accent);
}

/* Sidebar (Explorer) */
.vscode-sidebar {
  background-color: var(--vscode-sidebar);
  width: 250px;
  border-right: 1px solid var(--vscode-border);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vscode-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background-color: var(--vscode-sidebar);
  border-bottom: 1px solid var(--vscode-border);
}

.file-explorer {
  flex: 1;
  padding: 8px 0;
}

.folder-item {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  color: var(--vscode-text);
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s ease;
}

.folder-item:hover {
  background-color: var(--vscode-sidebar-hover);
}

.folder-item.expanded {
  background-color: var(--vscode-selection);
}

.folder-icon {
  margin-right: 6px;
  font-size: 14px;
  color: var(--vscode-accent);
  transition: transform 0.2s ease;
}

.folder-item.expanded .folder-icon {
  transform: rotate(90deg);
}

.file-item {
  display: flex;
  align-items: center;
  padding: 3px 16px 3px 32px;
  color: var(--vscode-text-muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s ease;
}

.file-item:hover {
  background-color: var(--vscode-sidebar-hover);
  color: var(--vscode-text);
}

.file-item.active {
  background-color: var(--vscode-selection);
  color: var(--vscode-text);
}

.file-icon {
  margin-right: 6px;
  font-size: 14px;
}

/* Ícones por tipo de arquivo */
.file-icon.html { color: #e34c26; }
.file-icon.css { color: #1572b6; }
.file-icon.js { color: #f7df1e; }
.file-icon.php { color: #777bb4; }
.file-icon.python { color: #3776ab; }
.file-icon.database { color: #336791; }
.file-icon.tool { color: #ff6b6b; }
.file-icon.framework { color: #61dafb; }
.file-icon.certificate { color: #ffd700; }

/* Editor principal */
.vscode-editor {
  flex: 1;
  background-color: var(--vscode-bg);
  display: flex;
  flex-direction: column;
}

.editor-tabs {
  display: flex;
  background-color: var(--vscode-tab-inactive);
  border-bottom: 1px solid var(--vscode-border);
  min-height: 35px;
}

.editor-tab {
  padding: 8px 16px;
  background-color: var(--vscode-tab-inactive);
  color: var(--vscode-text-muted);
  border-right: 1px solid var(--vscode-border);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  position: relative;
}

.editor-tab:hover {
  background-color: var(--vscode-sidebar-hover);
}

.editor-tab.active {
  background-color: var(--vscode-tab-active);
  color: var(--vscode-text);
}

.editor-tab .tab-icon {
  margin-right: 6px;
  font-size: 14px;
}

.editor-content {
  flex: 1;
  padding: 20px;
  color: var(--vscode-text);
  font-family: 'Fira Code', 'Consolas', monospace;
  line-height: 1.6;
}

.code-block {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--vscode-border);
  border-radius: 4px;
  padding: 16px;
  margin: 12px 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
}

.code-comment {
  color: #6a9955;
  font-style: italic;
}

.code-keyword {
  color: #569cd6;
  font-weight: 600;
}

.code-string {
  color: #ce9178;
}

.code-number {
  color: #b5cea8;
}

/* Status bar */
.vscode-status-bar {
  background-color: var(--vscode-accent);
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 12px;
  color: white;
  border-top: 1px solid var(--vscode-border);
}

.status-item {
  margin-right: 16px;
  display: flex;
  align-items: center;
}

.status-item i {
  margin-right: 4px;
}

/* Responsividade */
@media (max-width: 768px) {
  .vscode-container {
    flex-direction: column;
  }
  
  .activity-bar {
    width: 100%;
    height: 48px;
    flex-direction: row;
    justify-content: center;
    border-right: none;
    border-bottom: 1px solid var(--vscode-border);
  }
  
  .activity-bar-item {
    margin-bottom: 0;
    margin-right: 8px;
  }
  
  .vscode-sidebar {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
  }
  
  .editor-tabs {
    flex-wrap: wrap;
  }
  
  .editor-tab {
    min-width: 120px;
  }
}