/* ========================================
   SITE MAP BUILDER - TEMAS
   ======================================== */

/* Tema Claro */
.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-primary: #e5e5e5;
    --border-secondary: #d0d0d0;
    --accent-primary: #007acc;
    --accent-hover: #005a9e;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

/* Tema Escuro */
.theme-dark {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --bg-tertiary: #2d2d30;
    --text-primary: #cccccc;
    --text-secondary: #969696;
    --text-muted: #6a6a6a;
    --border-primary: #3c3c3c;
    --border-secondary: #464647;
    --accent-primary: #007acc;
    --accent-hover: #005a9e;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

/* Variáveis CSS para cores dinâmicas */
:root {
    /* Cores de fundo */
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    
    /* Cores de texto */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    
    /* Cores de borda */
    --border-primary: #e5e5e5;
    --border-secondary: #d0d0d0;
    
    /* Cores de destaque */
    --accent-primary: #007acc;
    --accent-hover: #005a9e;
    
    /* Sombras */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

/* Aplicação de cores dinâmicas */
.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-primary: #e5e5e5;
    --border-secondary: #d0d0d0;
    --accent-primary: #007acc;
    --accent-hover: #005a9e;
}

.theme-dark {
    --bg-primary: #1e1e1e;
    --bg-secondary: #252526;
    --bg-tertiary: #2d2d30;
    --text-primary: #cccccc;
    --text-secondary: #969696;
    --text-muted: #6a6a6a;
    --border-primary: #3c3c3c;
    --border-secondary: #464647;
    --accent-primary: #007acc;
    --accent-hover: #005a9e;
}

/* Aplicação de cores nos elementos */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Header */
.header {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

.header-title h1 {
    color: var(--text-primary);
}

.version-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
}

/* Toolbar */
.toolbar {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

.toolbar-input {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.toolbar-input:focus {
    --tw-ring-color: var(--accent-primary);
}

.toolbar-button-primary {
    background-color: var(--accent-primary);
    color: white;
}

.toolbar-button-secondary {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

/* Sidebar */
.sidebar {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

.sidebar-title {
    color: var(--text-primary);
}

.sidebar-content {
    background-color: var(--bg-secondary);
}

/* Chart */
.chart-container {
    background-color: var(--bg-secondary);
}

.chart-card {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
}

.chart-header {
    border-color: var(--border-primary);
}

.chart-title {
    color: var(--text-primary);
}

.chart-control-button {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.zoom-level {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

/* Node List */
.node-item {
    color: var(--text-primary);
}

.node-item-selected {
    background-color: var(--accent-primary);
    color: white;
}

.node-name {
    color: var(--text-primary);
}

.node-name-input {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

/* Node Editor */
.node-editor {
    border-color: var(--border-primary);
}

.node-editor-icon {
    color: var(--accent-primary);
}

.node-editor-label {
    color: var(--text-primary);
}

.node-editor-name {
    color: var(--accent-primary);
}

/* Empty State */
.empty-state {
    color: var(--text-muted);
}

/* Color Picker */
.color-picker-label {
    color: var(--text-primary);
}

.color-picker-button {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
}

.color-picker-icon {
    color: var(--accent-primary);
}

/* Icon Picker */
.icon-picker-label {
    color: var(--text-primary);
}

.icon-indicator {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
}

.icon-quick-button {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
}

/* Modais */
.modal-content {
    background-color: var(--bg-primary);
    border-color: var(--border-primary);
}

.modal-header {
    border-color: var(--border-primary);
}

.modal-title {
    color: var(--text-primary);
}

.modal-close {
    color: var(--text-muted);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-footer {
    border-color: var(--border-primary);
}

/* Help Modal */
.help-modal-title {
    color: var(--text-primary);
}

.help-section-title {
    color: var(--text-primary);
}

.help-step-text {
    color: var(--text-secondary);
}

.help-grid-title {
    color: var(--text-primary);
}

.help-grid-list {
    color: var(--text-secondary);
}

.help-tips {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

.help-tips-list {
    color: var(--text-secondary);
}

/* Icon Grid */
.icon-category-title {
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.icon-button {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

/* Icon Search */
.icon-search {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.icon-search:focus {
    --tw-ring-color: var(--accent-primary);
}

/* Theme Toggle */
.theme-toggle {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Help Toggle */
.help-toggle {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Transições suaves para mudanças de tema */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Estados de hover que respeitam o tema */
.btn:hover {
    opacity: 0.8;
}

.color-palette-button:hover {
    opacity: 0.8;
}

.icon-quick-button:hover {
    opacity: 0.8;
}

.icon-button:hover {
    opacity: 0.8;
}

.theme-toggle:hover {
    opacity: 0.8;
}

.help-toggle:hover {
    opacity: 0.8;
}

/* Estados de foco que respeitam o tema */
.btn:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.toolbar-input:focus {
    outline: none;
    ring: 1px;
    --tw-ring-color: var(--accent-primary);
}

.icon-search:focus {
    outline: none;
    ring: 1px;
    --tw-ring-color: var(--accent-primary);
}

/* Cores específicas para elementos do ECharts */
.echarts-tooltip {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
    color: var(--text-primary) !important;
}

/* Ajustes para contraste em temas escuros */
.theme-dark .node-item-selected {
    background-color: var(--accent-primary);
    color: white;
}

.theme-dark .help-step-number {
    background-color: #1e3a8a;
    color: #dbeafe;
}

.theme-dark .help-tips {
    background-color: var(--bg-tertiary);
    border-color: var(--border-secondary);
}