/* FinanceApp - Estilos Personalizados */

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

/* Nav Items */
.nav-item { color: #6b7280; }
.nav-item:hover { background-color: #f3f4f6; color: #111827; }
.nav-item.active { background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; box-shadow: 0 4px 15px rgba(16,185,129,0.3); }
.dark .nav-item { color: #9ca3af; }
.dark .nav-item:hover { background-color: #1f2937; color: #f9fafb; }
.dark .nav-item.active { background: linear-gradient(135deg, #10b981, #059669); color: #ffffff; }

/* Cards */
.card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.5rem; transition: all 0.2s; }
.dark .card { background: #111827; border-color: #1f2937; }
.card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-1px); }
.dark .card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.3); }

/* Stat Cards */
.stat-card { 
  border-radius: 1rem; 
  padding: 1.5rem; 
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.stat-card-income { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.stat-card-expense { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.stat-card-balance-pos { background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; }
.stat-card-balance-neg { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.stat-card-savings { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white; }

/* Transaction Type Buttons */
#btnIncome.selected { background-color: #d1fae5; border-color: #10b981; color: #065f46; }
.dark #btnIncome.selected { background-color: #064e3b; border-color: #10b981; color: #a7f3d0; }
#btnExpense.selected { background-color: #fee2e2; border-color: #ef4444; color: #991b1b; }
.dark #btnExpense.selected { background-color: #450a0a; border-color: #ef4444; color: #fca5a5; }
#btnIncome:not(.selected) { border-color: #e5e7eb; color: #6b7280; }
#btnExpense:not(.selected) { border-color: #e5e7eb; color: #6b7280; }
.dark #btnIncome:not(.selected), .dark #btnExpense:not(.selected) { border-color: #374151; color: #9ca3af; }

/* Progress bars */
.progress-bar { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.dark .progress-bar { background: #374151; }
.progress-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }

/* Badges */
.badge-income { background: #d1fae5; color: #065f46; }
.dark .badge-income { background: #064e3b; color: #6ee7b7; }
.badge-expense { background: #fee2e2; color: #991b1b; }
.dark .badge-expense { background: #450a0a; color: #fca5a5; }

/* Tip cards */
.tip-danger { border-left: 4px solid #ef4444; background: #fff5f5; }
.dark .tip-danger { background: #1a0505; }
.tip-warning { border-left: 4px solid #f59e0b; background: #fffbeb; }
.dark .tip-warning { background: #1a1200; }
.tip-info { border-left: 4px solid #3b82f6; background: #eff6ff; }
.dark .tip-info { background: #030d1a; }
.tip-success { border-left: 4px solid #10b981; background: #f0fdf4; }
.dark .tip-success { background: #021a0e; }

/* Animações */
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

.animate-slide-in { animation: slideIn 0.3s ease forwards; }
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }

/* Goal progress ring */
.goal-ring { 
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; border-bottom: 1px solid #e5e7eb; text-align: left; }
.dark .data-table th { border-color: #1f2937; color: #9ca3af; }
.data-table td { padding: 0.875rem 1rem; border-bottom: 1px solid #f3f4f6; }
.dark .data-table td { border-color: #1f2937; }
.data-table tr:hover td { background-color: #f9fafb; }
.dark .data-table tr:hover td { background-color: #111827; }

/* Empty State */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon { width: 80px; height: 80px; margin: 0 auto 1rem; background: #f3f4f6; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dark .empty-state-icon { background: #1f2937; }

/* Toast types */
.toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.toast-error { background: linear-gradient(135deg, #ef4444, #dc2626); }
.toast-warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.toast-info { background: linear-gradient(135deg, #3b82f6, #2563eb); }

/* Chart container */
.chart-container { position: relative; height: 300px; }

/* Responsive */
@media (max-width: 768px) {
  .chart-container { height: 220px; }
  .stat-card { padding: 1rem; }
}

/* Category dot */
.cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Number font */
.num { font-variant-numeric: tabular-nums; }

/* Floating action button */
.fab { 
  position: fixed; bottom: 1.5rem; right: 1.5rem; 
  width: 56px; height: 56px; 
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(16,185,129,0.4);
  color: white; font-size: 1.25rem;
  transition: all 0.2s;
  z-index: 20;
}
.fab:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(16,185,129,0.5); }