/* Utilweb: Estilos Avançados para a Calculadora de Juros Compostos v2.1 */

.tool-container-large { max-width: 900px; }
.calculadora-header { text-align: center; margin-bottom: 25px; }
.calculadora-header h1 { font-size: 2.5rem; line-height: 1.2; }
.calculadora-header p { font-size: 1.1rem; max-width: 650px; margin: 10px auto 0; color: var(--text-secondary-light); }

/* Abas */
.tabs { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 25px; }
.tab-link { padding: 10px 20px; cursor: pointer; border: none; background: none; font-size: 1rem; font-weight: 500; color: var(--text-secondary-light); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s ease-in-out; }
.tab-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.tab-content { display: none; padding-top: 10px;}
.tab-content.active { display: block; }

/* Formulário */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; border: none; padding: 0; }
.form-grid label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; }
.slider-container { display: flex; align-items: center; gap: 15px; }
.slider { flex-grow: 1; -webkit-appearance: none; width: 100%; height: 8px; background: var(--background-light); border-radius: 5px; outline: none; transition: opacity .2s; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--primary-color); cursor: pointer; border-radius: 50%; }
.slider::-moz-range-thumb { width: 20px; height: 20px; background: var(--primary-color); cursor: pointer; border-radius: 50%; border: none;}
.slider-input { max-width: 100px; text-align: center; }

/* Resultados */
#results-section { padding-top: 30px; margin-top: 25px;}
.results-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; }
.stat-label { font-size: 0.9rem; color: var(--text-secondary-light); margin-bottom: 5px; }
.stat-value { font-size: 1.8rem; font-weight: 600; color: var(--primary-color); }
.stat-value.positive { color: var(--accent-color); }
.chart-container { margin-top: 35px; height: 350px; }


/* ======================================================= */
/* --- SEÇÃO DA TABELA CORRIGIDA E MELHORADA (ALTO CONTRASTE) --- */
/* ======================================================= */

#results-table-container { 
    margin-top: 35px; 
    max-height: 400px; 
    overflow-y: auto; 
    border-radius: 6px; /* Borda arredondada para o container */
    border: 1px solid var(--border-color); /* Borda sutil no container */
}

.results-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.9rem; 
}

/* Cabeçalho da tabela com alto contraste */
.results-table th { 
    background-color: var(--primary-color); /* Cor primária de fundo */
    color: #FFFFFF; /* Texto branco */
    padding: 12px; 
    text-align: center; 
    font-weight: 600;
    position: sticky; 
    top: 0;
    z-index: 1; /* Garante que o cabeçalho fique sobre o conteúdo ao rolar */
}

/* Células da tabela */
.results-table td { 
    border: none; /* Removemos as bordas de cada célula */
    border-bottom: 1px solid var(--border-color); /* Apenas uma linha divisória abaixo */
    padding: 12px; 
    text-align: center; 
}

/* Efeito "Zebra-striping" para melhor legibilidade */
.results-table tbody tr:nth-child(even) {
    background-color: var(--background-light);
}

.results-table td:first-child { 
    font-weight: 600; 
}

/* Remove a linha divisória da última linha */
.results-table tbody tr:last-child td {
    border-bottom: none;
}
/* ======================================================= */
/* --- FIM DA SEÇÃO CORRIGIDA --- */
/* ======================================================= */


/* Resultado da Meta */
#meta-result { text-align: center; padding: 20px; }
#meta-result p { font-size: 1.1rem; }
#meta-result .aporte-necessario { font-size: 2.2rem; font-weight: 700; color: var(--primary-color); margin-top: 10px; }

/* Dark Mode */
body.dark-mode .slider { background: #374151; }

/* Ajuste para o header da tabela no Dark Mode */
body.dark-mode .results-table th { 
    background-color: var(--primary-color);
    color: var(--text-primary-dark);
}

/* Ajuste para o "zebra-striping" no Dark Mode */
body.dark-mode .results-table tbody tr:nth-child(even) {
    background-color: var(--card-background-dark);
}