/* style.css */
:root {
    /* Tema Escuro (Padrão) */
    --cor-fundo: #1A1A1A;
    --cor-card: #2A2A2A;
    --cor-borda: #404040;
    --cor-texto-principal: #F5F5F5;
    --cor-texto-secundario: #A3A3A3;
    --cor-input-fundo: #424242;
    --cor-botao-secundario: #424242;
    --cor-botao-secundario-hover: #616161;
    --cor-calendario-fundo: rgba(42, 42, 42, 0.5);

    /* Cores de Status e Contas */
    --cor-primaria: #F97316; --cor-primaria-hover: #EA580C;
    --cor-sucesso-forte: #16A34A; --cor-sucesso: #22C55E; --cor-aviso: #F59E0B;
    --cor-falha: #991B1B; --cor-info: #0284C7; --cor-despesa: #DC2626;
    --cor-nubank: #8A05BE;
    --cor-mercado-pago: #009EE3;
    --cor-infinity-pay: #10B981;

    /* Cores para a lista - Tema Escuro */
    --cor-lista-receita: rgba(34, 197, 94, 0.3);
    --cor-lista-despesa: rgba(239, 68, 68, 0.3);
    --cor-lista-potencial: rgba(59, 130, 246, 0.3);
}

body[data-theme="light"] {
    /* Tema Claro */
    --cor-fundo: #F3F4F6;
    --cor-card: #FFFFFF;
    --cor-borda: #E5E7EB;
    --cor-texto-principal: #1F2937;
    --cor-texto-secundario: #6B7281;
    --cor-input-fundo: #E5E7EB;
    --cor-botao-secundario: #D1D5DB;
    --cor-botao-secundario-hover: #9CA3AF;
    --cor-calendario-fundo: rgba(229, 231, 235, 0.5);

    /* Cores para a lista - Tema Claro */
    --cor-lista-receita: rgba(34, 197, 94, 0.15);
    --cor-lista-despesa: rgba(239, 68, 68, 0.15);
    --cor-lista-potencial: rgba(59, 130, 246, 0.15);
}

body {    
    font-family: 'Inter', sans-serif;    
    background-color: var(--cor-fundo);    
    color: var(--cor-texto-principal);    
    height: 100vh; width: 100vw;    
    overflow: hidden;    
    transition: background-color 0.3s, color 0.3s;
}

.background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; filter: blur(2px); opacity: 0.05; z-index: 1; }
.floating-logo { position: absolute; animation: float 20s infinite ease-in-out; user-select: none; }
@keyframes float { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 25% { transform: translateY(-20px) translateX(20px) rotate(10deg); } 50% { transform: translateY(-40px) translateX(0) rotate(0deg); } 75% { transform: translateY(-20px) translateX(-20px) rotate(-10deg); } 100% { transform: translateY(0) translateX(0) rotate(0deg); } }
#app-container { position: relative; z-index: 10; height: 100vh; overflow-y: auto; }

.card {    
    background-color: var(--cor-card);    
    border-radius: 0.75rem;    
    padding: 1.5rem;    
    border: 1px solid var(--cor-borda);
    transition: background-color 0.3s, border-color 0.3s;
}

.progress-bar-container { background-color: var(--cor-input-fundo); border-radius: 9999px; overflow: hidden; height: 1.25rem; }
.progress-bar { background-color: var(--cor-primaria); transition: width 0.5s ease-in-out; text-align: center; color: white; font-weight: 600; font-size: 0.75rem; line-height: 1.25rem; }
.form-input { background-color: var(--cor-input-fundo); border: 1px solid var(--cor-borda); color: var(--cor-texto-principal); border-radius: 0.5rem; padding: 0.75rem; width: 100%; }
.form-input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 2px var(--cor-primaria-hover); }
.currency-input { text-align: right; }
.btn { border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600; transition: background-color 0.2s; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
.btn-primary { background-color: var(--cor-primaria); color: white; } .btn-primary:hover { background-color: var(--cor-primaria-hover); }
.btn-secondary { background-color: var(--cor-botao-secundario); color: var(--cor-texto-principal); } .btn-secondary:hover { background-color: var(--cor-botao-secundario-hover); }
.btn-success { background-color: var(--cor-sucesso); color: white; } .btn-success:hover { background-color: var(--cor-sucesso-forte); }
.btn-danger { background-color: var(--cor-despesa); color: white; } .btn-danger:hover { background-color: #B91C1C; }
.btn-link { background-color: transparent; padding: 0; font-size: 0.875rem; color: var(--cor-primaria); } .btn-link:hover { text-decoration: underline; }

.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); display: flex; justify-content: center; align-items: center; z-index: 50; }
#confirm-modal, #cofrinho-transfer-modal, #account-transfer-modal { z-index: 60; }

.calendar-grid-cell { min-height: 96px; background-color: var(--cor-calendario-fundo); border: 1px solid var(--cor-borda); transition: background-color 0.2s; cursor: pointer; }
.calendar-grid-cell:hover { border-color: var(--cor-primaria); } .calendar-grid-cell-today { border: 2px solid var(--cor-primaria); }
.calendar-grid-cell-missed { background-color: var(--cor-falha); } .calendar-grid-cell-close { background-color: var(--cor-aviso); }
.calendar-grid-cell-met { background-color: var(--cor-sucesso); } .calendar-grid-cell-exceeded { background-color: var(--cor-sucesso-forte); } .calendar-grid-cell-expense { border: 2px dotted var(--cor-despesa); }
.calendar-grid-cell-potential { background-color: var(--cor-info); }

.icon-btn { background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--cor-texto-secundario); transition: color 0.2s; }
.icon-btn:hover { color: var(--cor-texto-principal); } .icon-btn.delete:hover { color: var(--cor-despesa); }
.paid-transaction { text-decoration: line-through; opacity: 0.6; }

@keyframes pulse { 0% { filter: drop-shadow(0 0 2px var(--cor-primaria)); } 50% { filter: drop-shadow(0 0 8px var(--cor-primaria)); } 100% { filter: drop-shadow(0 0 2px var(--cor-primaria)); } }
.logo-container { animation: pulse 4s infinite ease-in-out; max-width: 100px; margin: 0 auto 1rem auto; }

.list-item-receita { background-color: var(--cor-lista-receita); }
.list-item-despesa { background-color: var(--cor-lista-despesa); }
.list-item-potencial { background-color: var(--cor-lista-potencial); }

.tooltip { position: relative; display: inline-block; }
.tooltip .tooltiptext { visibility: hidden; width: 220px; background-color: #555; color: #fff; text-align: left; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -110px; opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; line-height: 1.5; }
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }