/* FinançasNunes — Custom Styles */

/* ─── Fonts ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* { font-family: 'Inter', sans-serif; }

/* ─── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 6px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* ─── Sidebar ─────────────────────────────────── */
#sidebar {
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1),
                transform 0.3s cubic-bezier(0.4,0,0.2,1);
    width: 260px;
    z-index: 40;
}
#sidebar.collapsed { width: 72px; }
#sidebar.collapsed .nav-label,
#sidebar.collapsed .sidebar-brand-text,
#sidebar.collapsed .sidebar-section-label { display: none; }
#sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
#sidebar.collapsed .nav-item i { margin-right: 0; }

/* ─── Main content shift ──────────────────────── */
#main-content {
    transition: margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
    margin-left: 260px;
}
#main-content.sidebar-collapsed { margin-left: 72px; }

@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); width: 260px !important; }
    #sidebar.mobile-open { transform: translateX(0); }
    #main-content { margin-left: 0 !important; }
    #sidebar .nav-label,
    #sidebar .sidebar-brand-text,
    #sidebar .sidebar-section-label { display: flex !important; }
    #sidebar .nav-item { justify-content: flex-start !important; padding-left: 1rem !important; }
    #sidebar .nav-item i { margin-right: 0.75rem !important; }
}

/* ─── Cards ───────────────────────────────────── */
.stat-card {
    background: linear-gradient(135deg, var(--card-from), var(--card-to));
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.stat-card::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    pointer-events: none;
}

.card-receita  { --card-from: #059669; --card-to: #10b981; }
.card-despesa  { --card-from: #dc2626; --card-to: #ef4444; }
.card-saldo    { --card-from: #1d4ed8; --card-to: #3b82f6; }
.card-previsto { --card-from: #7c3aed; --card-to: #8b5cf6; }

/* ─── Progress bar ────────────────────────────── */
.progress-bar {
    transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Table ───────────────────────────────────── */
.table-row { transition: background 0.15s; }
.table-row:hover { background: rgba(99,102,241,0.05); }
.dark .table-row:hover { background: rgba(99,102,241,0.1); }

/* ─── Modal ───────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
    animation: modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 1.25rem; /* Mais arredondado */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(15px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Standard Buttons ────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white; font-weight: 600; font-size: 0.875rem;
    padding: 0.6rem 1.2rem; border-radius: 0.75rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: #f1f5f9; color: #475569; font-weight: 600; font-size: 0.875rem;
    padding: 0.6rem 1.2rem; border-radius: 0.75rem;
    transition: all 0.2s ease;
}
.btn-secondary:hover { background: #e2e8f0; color: #1e293b; }
.dark .btn-secondary { background: #334155; color: #cbd5e1; }
.dark .btn-secondary:hover { background: #475569; color: #f8fafc; }

.btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: #fee2e2; color: #dc2626; font-weight: 600; font-size: 0.875rem;
    padding: 0.6rem 1.2rem; border-radius: 0.75rem;
    transition: all 0.2s ease;
}
.btn-danger:hover { background: #fecaca; }
.dark .btn-danger { background: rgba(220, 38, 38, 0.2); color: #fca5a5; }
.dark .btn-danger:hover { background: rgba(220, 38, 38, 0.3); }

/* ─── Flash notification ──────────────────────── */
#flash-notification {
    animation: slideIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(120%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Chart wrapper ───────────────────────────── */
.chart-wrapper { position: relative; }

/* ─── Badge ───────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
}
.badge-success { background: #d1fae5; color: #065f46; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.dark .badge-success { background: #064e3b; color: #6ee7b7; }
.dark .badge-danger  { background: #7f1d1d; color: #fca5a5; }
.dark .badge-warning { background: #78350f; color: #fcd34d; }

/* ─── Spinner ─────────────────────────────────── */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Tooltip ─────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);
    background: #1e293b; color: #f1f5f9;
    padding: 4px 10px; border-radius: 6px;
    font-size: 0.75rem; white-space: nowrap; z-index: 99;
    pointer-events: none;
}

/* ─── Transitions ─────────────────────────────── */
.page-enter { animation: fadeUp 0.3s ease; }
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}