/* Carnet Financier — styles custom (complément Tailwind) */
[x-cloak] { display: none !important; }

/* Scrollbar fine */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* Transitions de page */
.page-enter  { opacity: 0; transform: translateY(6px); }
.page-active { transition: opacity .2s ease, transform .2s ease; }
.page-leave  { opacity: 0; }

/* Barre de progression budget */
.progress-bar {
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
}

/* Badge sync */
.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Modal backdrop */
.modal-backdrop {
    backdrop-filter: blur(2px);
}

/* Cartes stats */
.stat-card {
    border-left: 4px solid transparent;
}
.stat-card.income  { border-left-color: #10b981; }
.stat-card.expense { border-left-color: #ef4444; }
.stat-card.balance { border-left-color: #2563eb; }

/* Input focus */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Navigation active */
.nav-item.active {
    background: #eff6ff;
    color: #2563eb;
}
.nav-item.active svg { color: #2563eb; }

/* Animtion spin pour sync */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* Safe area pour mobiles avec encoche */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Empêche le défilement du fond quand modal ouverte */
body.modal-open { overflow: hidden; }