/* styles.css (VERSÃO SMOKY MONOCHROME) */

/* 1. Variáveis de Cor e Configurações Globais */
:root {
    --cor-fundo: #121212;
    --cor-superficie: #1E1E1E; /* Cinza escuro para os cartões */
    --cor-primaria: #00bcd4; /* Teal / Ciano */
    --cor-primaria-hover: #0097a7;
    --cor-receita: #4CAF50;
    --cor-despesa: #ffc107; /* Âmbar */
    --cor-texto-principal: rgba(255, 255, 255, 0.87);
    --cor-texto-secundario: rgba(255, 255, 255, 0.6);
    --cor-borda: rgba(255, 255, 255, 0.12);
    
    /* O segredo do efeito 3D/enfumaçado */
    --sombra-camadas: 
        0px 1px 3px rgba(0,0,0,0.3), /* Sombra curta e escura para definição */
        0px 8px 24px rgba(0,0,0,0.4), /* Sombra longa e difusa para profundidade */
        0 0 20px rgba(0, 188, 212, 0.1); /* Brilho colorido "enfumaçado" */
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

h2 {
    color: var(--cor-texto-principal);
    border-bottom: 1px solid var(--cor-borda);
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-weight: 500;
}

hr {
    border: none;
    border-top: 1px solid var(--cor-borda);
    margin: 40px 0;
}

/* 2. Header e Navegação */
.main-header {
    background-color: transparent;
    padding: 0 20px;
    margin-bottom: 40px;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.nav-link {
    color: var(--cor-texto-secundario);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.nav-link:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-link.active {
    color: white;
    background-color: var(--cor-primaria);
}

/* 3. Abas (Tabs) */
.tab-content { display: none; animation: fadeIn 0.5s; }
.tab-content.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 4. Formulários e Botões (com efeito 3D) */
form, #filtros-container, table {
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 16px; /* Mais arredondado */
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--sombra-camadas);
    animation: subtleFadeInUp 0.6s ease-out;
}

label {
    font-weight: 500;
    color: var(--cor-texto-secundario);
    font-size: 14px;
}

input, select {
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.3);
}

.submit-btn {
    flex-grow: 1;
    /* Força a aplicação do fundo gradiente */
    background-image: linear-gradient(to right, var(--cor-primaria) 0%, var(--cor-secundaria) 100%) !important;
    border: none !important;
    /* Força a cor do texto a ser branca */
    color: white !important;
    font-weight: 700;
    transition: all 0.4s ease;
    background-size: 200% auto;
}

.submit-btn:hover {
    background-position: right center;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.4);
}

.cancel-btn { 
    /* Força o fundo a ser transparente */
    background-color: transparent !important;
    border: 1px solid var(--cor-borda) !important;
    /* Força a cor do texto */
    color: var(--cor-texto-secundario) !important;
    transition: all 0.3s ease;
}

.cancel-btn:hover {
    background-color: var(--cor-superficie) !important;
    border-color: var(--cor-texto-secundario) !important;
}

/* Estilo para os botões de ícone nas tabelas (Editar/Excluir) */
.edit-btn, .delete-btn,
.edit-btn-cat, .delete-btn-cat { /* Inclui os botões de categoria */
    background: none;
    border: none;
    color: var(--cor-texto-secundario);
    font-size: 18px; /* Aumenta um pouco o tamanho do ícone */
    transition: color 0.3s ease, transform 0.3s ease;
}

.edit-btn:hover,
.edit-btn-cat:hover { 
    color: var(--cor-primaria); 
    transform: scale(1.2); 
}

.delete-btn:hover,
.delete-btn-cat:hover { 
    color: #ef5350; /* Um vermelho suave para delete */
    transform: scale(1.2); 
}
/* 5. Tabelas */
table {
    padding: 0; /* O padding já está no container da tabela */
    width: 100%;
    border-collapse: separate; /* Necessário para border-radius em tabelas */
    border-spacing: 0;
    margin-top: 20px;
}

th, td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
}

thead {
    background-color: transparent;
}

th {
    font-weight: 600;
    color: var(--cor-texto-secundario);
}

/* Arredonda os cantos da tabela */
table tr:first-child th:first-child { border-top-left-radius: 16px; }
table tr:first-child th:last-child { border-top-right-radius: 16px; }
table tr:last-child td:first-child { border-bottom-left-radius: 16px; }
table tr:last-child td:last-child { border-bottom-right-radius: 16px; }

tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Cores para valores na tabela */
td[style*="color: green;"] { color: var(--cor-receita) !important; font-weight: 600; }
td[style*="color: red;"] { color: var(--cor-despesa) !important; font-weight: 600; }

#analise-container #tabela-analise tfoot tr {
    background-color: var(--cor-fundo) !important; /* Fundo preto principal, com !important */
    border-top: 2px solid var(--cor-primaria) !important;
}

/* Regra para as CÉLULAS do rodapé (tfoot) */
#analise-container #tabela-analise tfoot td {
    font-weight: 700 !important;
    color: white !important; /* Garante texto branco */
}

/* Regras para as cores específicas de receita e despesa no rodapé */
#analise-container #tabela-analise tfoot td.valor-receita { 
    color: var(--cor-receita) !important; 
}
#analise-container #tabela-analise tfoot td.valor-despesa { 
    color: var(--cor-despesa) !important; 
}



/* ... (Resto do CSS - spinner, etc.) ... */
button, .login-btn { padding: 12px 20px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease; transition: all 0.2s; font-size: 16px; }
button:active { transform: translateY(1px); }
input[type="text"], input[type="number"], input[type="date"], select { width: 100%; padding: 12px; box-sizing: border-box; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
.form-group { margin-bottom: 15px; }
#status { margin-top: 15px; font-weight: 500; height: 20px; }
.spinner { border: 4px solid rgba(255, 255, 255, 0.1); width: 36px; height: 36px; border-radius: 50%; border-left-color: var(--cor-primaria); animation: spin 1s ease infinite; }
#tabela-loading, #visualizacao-loading { display: flex; justify-content: center; padding: 40px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes subtleFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Começa 20px abaixo */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina na posição original */
    }
}

/* --- INÍCIO DOS ESTILOS DE DASHBOARD --- */

/* --- INÍCIO DOS ESTILOS DE KPI CARDS --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.kpi-card {
    background-color: var(--cor-superficie);
    border-radius: 16px;
    padding: 25px;
    position: relative;
    overflow: hidden; /* Para o ícone não vazar */
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-camadas);
    animation: subtleFadeInUp 0.5s ease-out;
}

.kpi-card h4 {
    margin: 0 0 10px 0;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    font-size: 16px;
}

.kpi-card p {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.kpi-icon {
    position: absolute;
    right: -20px;
    bottom: -30px;
    font-size: 100px;
    opacity: 0.05;
    transform: rotate(-20deg);
}

/* Cores específicas dos cards */
.kpi-card.receita { border-left: 5px solid var(--cor-receita); }
.kpi-card.receita p { color: var(--cor-receita); }

.kpi-card.despesa { border-left: 5px solid var(--cor-despesa); }
.kpi-card.despesa p { color: var(--cor-despesa); }

.kpi-card.saldo { border-left: 5px solid var(--cor-primaria); }
.kpi-card.saldo p { color: var(--cor-primaria); }
/* --- FIM DOS ESTILOS DE KPI CARDS --- */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.dashboard-card.full-width {
    grid-column: 1 / -1; /* Faz o card ocupar todas as colunas do grid */
}
.dashboard-card {
    background-color: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 16px;
    padding: 25px;
    box-shadow: var(--sombra-camadas);
    animation: subtleFadeInUp 0.6s ease-out;
    position: relative; /* Necessário para o Chart.js calcular o tamanho corretamente */
    
}

.dashboard-card h3 {
    margin-top: 0;
    text-align: center;
    color: var(--cor-texto-secundario);
    font-weight: 500;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 40vh;
    max-height: 400px;
}


/* --- INÍCIO DOS ESTILOS DE FILTRO DE DASHBOARD --- */
.filtros-container {
    grid-column: 1 / -1; /* Ocupa a largura toda */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--cor-superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-camadas);
}

.filtro-btn {
    background-color: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-secundario);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.filtro-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
}

.filtro-btn.active {
    background-color: var(--cor-primaria);
    color: var(--cor-fundo);
    border-color: var(--cor-primaria);
}
/* --- FIM DOS ESTILOS DE FILTRO DE DASHBOARD --- */

/* --- INÍCIO DOS ESTILOS DE TOTALIZADOR --- */
.totalizer-container {
    text-align: center;
    margin-top: 20px; /* Espaçamento acima do totalizador */
    padding-top: 20px; /* Espaçamento interno */
    border-top: 1px solid var(--cor-borda); /* Linha sutil de separação */
}

.totalizer-container span {
    font-size: 14px;
    color: var(--cor-texto-secundario);
    display: block;
    margin-bottom: 5px;
}

.totalizer-container p {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

/* Cores específicas para cada totalizador */
#total-despesas-container p {
    color: var(--cor-despesa);
}

#total-receitas-container p {
    color: var(--cor-receita);
}
/* --- FIM DOS ESTILOS DE TOTALIZADOR --- */
/* --- INÍCIO DOS ESTILOS DE AUTENTICAÇÃO --- */
.auth-container {
    max-width: 450px;
    margin: 80px auto; /* Centraliza vertical e horizontalmente */
    padding: 40px;
    background-color: var(--cor-superficie);
    border-radius: 16px;
    box-shadow: var(--sombra-camadas);
    animation: subtleFadeInUp 0.6s ease-out;
}

.auth-container h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    border-bottom: none;
}

.auth-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

.auth-link a {
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 600;
}
/* --- FIM DOS ESTILOS DE AUTENTICAÇÃO --- */
/* --- INÍCIO DOS ESTILOS DE LOGOUT --- */
.logout-btn {
    background-color: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-secundario);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background-color: var(--cor-despesa);
    color: white;
    border-color: var(--cor-despesa);
}
/* --- FIM DOS ESTILOS DE LOGOUT --- */
/* --- INÍCIO DOS ESTILOS DE GER. DE CATEGORIAS --- */
.form-grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Nome da categoria ocupa mais espaço */
    gap: 20px;
    align-items: flex-end; /* Alinha os itens na base */
}

#form-categoria-buttons {
    display: flex;
    gap: 10px;
}

#status-categoria {
    margin-top: 15px;
    font-weight: 500;
    height: 20px;
}

#tabela-categorias {
    margin-top: 0; /* Remove margem extra pois já tem o h3 */
}

#tabela-categorias .tipo-despesa {
    color: var(--cor-despesa);
    font-weight: 600;
}

#tabela-categorias .tipo-receita {
    color: var(--cor-receita);
    font-weight: 600;
}
/* --- FIM DOS ESTILOS DE GER. DE CATEGORIAS --- */
/* --- INÍCIO DOS ESTILOS DE TOAST --- */

/* O container que segura os toasts */
#toast-container {
    position: fixed; /* Fica fixo na tela, mesmo com scroll */
    top: 20px;
    right: 20px;
    z-index: 1000; /* Garante que fique acima de tudo */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo individual de cada toast */
.toast {
    padding: 15px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-left: 5px solid; /* Borda colorida para indicar o tipo */
    min-width: 250px;
    animation: slideInRight 0.4s ease-out, fadeOut 0.5s ease-in 3.5s forwards;
}

/* Cores específicas por tipo de toast */
.toast.success {
    background-color: #334b3e; /* Verde escuro */
    border-color: var(--cor-receita);
}

.toast.error {
    background-color: #5c3c35; /* Vermelho escuro */
    border-color: var(--cor-despesa);
}

.toast.info {
    background-color: #2a3f4d; /* Azul escuro */
    border-color: var(--cor-primaria);
}

/* Animações */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: scale(0.9); /* Efeito sutil de encolhimento ao sumir */
    }
}
/* --- FIM DOS ESTILOS DE TOAST --- */