/* style.css - Versão Refinada (Contraste e Espaçamento) */

/* 1. VARIÁVEIS DE COR E ESPAÇAMENTO */
:root {
    /* Paleta Slate Blue (Profissional e Moderna) */
    --bg-body: #0f172a;       
    --bg-card: #1e293b;       
    --bg-input: #334155;      
    
    --primary: #3a86ff;       /* Azul Tech */
    --primary-hover: #2563eb; 
    
    /* Texto: Aumentei o brilho do muted para melhor leitura */
    --text-main: #ffffff;     
    --text-muted: #cbd5e1;    /* Era #94a3b8, clareamos para ler melhor */
    
    --border-color: #475569;  /* Bordas um pouco mais visíveis */
    
    --success: #10b981;       
    --danger: #ef4444;        
    --warning: #f59e0b;       
    
    /* Espaçamento Padrão */
    --spacing-block: 2rem;    /* 32px de separação entre seções */
}

/* 2. ESTRUTURA GLOBAL E TIPOGRAFIA */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif;
    font-size: 16px; /* Tamanho base garantido para mobile */
    line-height: 1.5;
    overflow-x: hidden;
    padding-bottom: 100px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Pequenos textos (legendas) */
small, .small {
    font-size: 0.85rem; /* ~13.6px - Menor que isso fica ilegível no sol */
    color: var(--text-muted) !important;
}

/* 3. CARTÕES (CARDS) - Estilo Tech Glow FORÇADO */
.card, 
.card.border-secondary, 
.card.shadow-sm {
    background-color: var(--bg-card) !important;
    
    /* FORÇANDO A COR AZUL (#3a86ff) */
    border: 1px solid #3a86ff !important; 
    
    color: var(--text-main) !important;
    border-radius: 16px;
    
    /* Efeito de Luz Azulada */
    box-shadow: 0 0 15px rgba(58, 134, 255, 0.15) !important;
    
    margin-bottom: 1rem;
}

.card-header {
    background-color: rgba(255, 255, 255, 0.03) !important;
    
    /* Borda interna também azul para combinar, ou cinza se preferir */
    border-bottom: 1px solid rgba(58, 134, 255, 0.3) !important;
    
    color: var(--text-main) !important;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* 4. ÁREA DE FILTROS (Correção do "Colado") */
.filtro-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    
    /* AQUI ESTÁ A CORREÇÃO DO ESPAÇAMENTO */
    margin-bottom: 3rem; /* Aumentado para separar bem do gráfico */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Rótulos dos inputs */
label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

/* 5. FORMULÁRIOS (Touch Friendly) */
.form-control, .form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: white !important;
    padding: 0.75rem 1rem; /* Altura maior para o dedo */
    border-radius: 10px;
    font-size: 1rem; /* Evita zoom automático no iPhone */
}

.form-control:focus, .form-select:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.25) !important;
}

/* Ícones de data brancos */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    padding: 5px; /* Área de toque maior */
}

/* 6. BOTÕES */
.btn {
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}
.btn-primary:active {
    transform: scale(0.98); /* Efeito de clique */
}

.btn-outline-light {
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}
.btn-outline-light:hover {
    background-color: var(--bg-input) !important;
    color: white !important;
}

/* 7. NAVBAR (Menu) */
.navbar {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.navbar-brand { 
    color: var(--primary) !important; 
    font-size: 1.4rem;
}
.nav-link { 
    color: var(--text-muted) !important; 
    font-size: 0.95rem;
}
.nav-link.active { 
    color: var(--primary) !important; 
    font-weight: 600;
}

/* 8. TABELAS E BADGES */
.table {
    --bs-table-bg: transparent !important;
    color: var(--text-main) !important;
}
.table td, .table th {
    border-color: var(--border-color) !important;
    padding: 1rem 0.5rem; /* Mais respiro nas linhas */
}

/* Cores Semânticas Ajustadas para Contraste */
.text-success { color: #34d399 !important; } /* Verde mais claro */
.text-danger  { color: #f87171 !important; } /* Vermelho mais claro */
.badge {
    padding: 0.5em 0.8em;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 9. AJUSTES ESPECÍFICOS MOBILE */
@media (max-width: 768px) {
    /* Inputs ocupam largura total e têm margem maior */
    .filtro-card .col-6 {
        margin-bottom: 1rem;
    }
    
    /* Aumenta o tamanho dos textos do gráfico */
    .chart-container {
        margin-bottom: 1rem;
    }
    
    /* Botões full width no celular */
    .d-grid-mobile {
        display: grid;
        width: 100%;
    }
}

/* Loading Overlay do Gráfico */
.chart-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(15, 23, 42, 0.7); /* Fundo escuro translúcido */
    display: none; /* ISSO É O IMPORTANTE: Começa escondido */
    justify-content: center; 
    align-items: center; 
    z-index: 10; 
    border-radius: 12px;
}

/* --- ESTILIZAÇÃO DA TABELA DE MOVIMENTAÇÕES --- */

/* Cabeçalho da Tabela */
.table-custom thead th {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.75rem; /* Pequeno e discreto */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding-bottom: 1rem;
}

/* Linhas do Corpo */
.table-custom tbody td {
    padding: 1rem 0.5rem; /* Espaçamento confortável para o dedo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Linha muito sutil */
    vertical-align: middle; /* Tudo centralizado verticalmente */
    font-size: 0.95rem; /* Tamanho padrão de leitura */
}

/* Coluna: Data (Discreta) */
.td-data {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: monospace; /* Ajuda a alinhar números */
}

/* Coluna: Descrição (Destaque) */
.td-desc {
    color: var(--text-main);
    font-weight: 500; /* Peso médio, mais elegante que o Negrito total */
    display: block;
    line-height: 1.2;
}

/* Subtexto dentro da descrição (para Categoria no Mobile) */
.td-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Coluna: Valor (Foco Financeiro) */
.td-valor {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.5px;
    white-space: nowrap; /* Não quebra linha */
}

/* Badges (Etiquetas) Modernas */
.badge-soft {
    padding: 0.35em 0.65em;
    /*font-size: 0.75em;
    font-weight: 600;*/
	font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
.badge-soft-success {
    background-color: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
.badge-soft-danger {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* Ações (Botões) */
.btn-action {
    opacity: 0.6;
    transition: opacity 0.2s;
}
.btn-action:hover { opacity: 1; }

/* style.css - Versão Final (Correção de Contraste nas Datas) */

/* 1. VARIÁVEIS DE COR E ESPAÇAMENTO */
:root {
    --bg-body: #0f172a;       
    --bg-card: #1e293b;       
    --bg-input: #334155;      
    
    --primary: #3a86ff;       
    --primary-hover: #2563eb; 
    
    --text-main: #f8fafc;     /* Branco gelo */
    --text-muted: #cbd5e1;    /* Cinza claro */
    
    --border-color: #475569;  
    
    --success: #10b981;       
    --danger: #ef4444;        
    --warning: #f59e0b;       
}

/* 2. ESTRUTURA GLOBAL */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    padding-bottom: 100px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    font-weight: 600;
}

/* 3. CARTÕES (CARDS) */
.card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

.card-header {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

.card-body { padding: 1.25rem; }

/* 4. FORMULÁRIOS */
.form-control, .form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: #ffffff !important; /* Força branco nos inputs */
    padding: 0.75rem 1rem;
    border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-input) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Ícones de data brancos */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    padding: 5px;
}

/* 5. NAVBAR */
.navbar {
    background-color: rgba(15, 23, 42, 0.98) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.navbar-brand { color: var(--primary) !important; font-size: 1.4rem; }
.nav-link { color: var(--text-muted) !important; font-size: 0.95rem; }
.nav-link.active { color: var(--primary) !important; font-weight: 600; }
.dropdown-menu { background-color: var(--bg-card); border-color: var(--border-color); }
.dropdown-item { color: var(--text-main); }
.dropdown-item:hover { background-color: var(--bg-input); color: #fff; }

/* 6. TABELAS E BADGES GERAIS */
.table { --bs-table-bg: transparent !important; color: var(--text-main) !important; }
.table td, .table th { border-color: var(--border-color) !important; padding: 1rem 0.5rem; }

.badge { padding: 0.5em 0.8em; font-weight: 600; letter-spacing: 0.5px; }

/* 7. LOADING OVERLAY */
.chart-overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(15, 23, 42, 0.7); display: none; 
    justify-content: center; align-items: center; z-index: 10; border-radius: 12px;
}

/* --- ESTILIZAÇÃO DA TABELA DE MOVIMENTAÇÕES --- */

/* Cabeçalho */
.table-custom thead th {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding-bottom: 1rem;
}

/* Linhas */
.table-custom tbody td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
    font-size: 0.95rem;
}

/* Colunas Específicas */
.td-desc { color: #ffffff !important; font-weight: 500; display: block; line-height: 1.2; }
.td-sub { font-size: 0.8rem; color: var(--text-muted) !important; font-weight: 400; }
.td-valor { font-weight: 600; font-size: 1rem; letter-spacing: -0.5px; white-space: nowrap; }

/* Cores de Valor */
.text-success { color: #34d399 !important; }
.text-danger  { color: #f87171 !important; }

/* Botões de Ação */
.btn-action { opacity: 0.6; transition: opacity 0.2s; }
.btn-action:hover { opacity: 1; }

/* --------------------------------------------------------- */
/* --- AGRUPAMENTO POR DATA (VERSÃO DISCRETA / DARK) --- */
/* --------------------------------------------------------- */

.tr-date-header td {
    /* Fundo Azul Bem Escuro (Quase preto, mistura com o card) */
    background-color: #172554 !important; 
    
    /* Texto Branco */
    color: #e2e8f0 !important; /* Branco levemente suavizado */
    
    /* Borda superior fina e translúcida (Para não brigar com a borda do card) */
    border-top: 1px solid rgba(58, 134, 255, 0.3) !important;
    border-bottom: none !important;
    
    /* Tipografia */
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0.6rem 1.5rem !important; /* Levemente mais compacto */
}

/* Remove borda da primeira data para ficar limpo */
.tr-date-header:first-child td {
    border-top: none !important;
    border-radius: 14px 14px 0 0; /* Segue o arredondamento do card */
}