/*
=========================================================
Projet : Gestion Budget
Auteur : Raphaël ELIARD
Date de dernière mise à jour : 20-05-2026
Description : Feuille de style utilitaire complétant Tailwind CSS.
Contient les surcharges pour les barres de défilement et le thème sombre.
=========================================================
*/
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.checkbox-pointe:checked { background-color: #10b981; border-color: #10b981; }

/* Animation de fond (Blobs) pour sublimer le Glassmorphism */
body {
    position: relative;
    z-index: 0;
    /* Empêche le débordement horizontal des orbes sans casser le scroll vertical natif des mobiles */
    overflow-x: hidden;
    max-width: 100%;
}
body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}
body::before {
    top: -5%; left: -5%;
    width: 50vw; height: 50vh;
    background: rgba(59, 130, 246, 0.25);
    animation: float-tl 20s infinite alternate ease-in-out;
}
body::after {
    bottom: 0; right: 0;
    width: 50vw; height: 50vh;
    background: rgba(168, 85, 247, 0.25);
    animation: float-br 20s infinite alternate ease-in-out;
    animation-delay: -10s;
}
@keyframes float-tl {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(5%, 5%) scale(1.1); }
}
@keyframes float-br {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-5%, -5%) scale(1.1); }
}

/* Surcharge pour le mode sombre profond adaptées au Glassmorphism */
html.dark { background-color: #000000; }
.dark body { background-color: transparent !important; }
.dark body::before { background: rgba(59, 130, 246, 0.15); }
.dark body::after { background: rgba(168, 85, 247, 0.15); }
.dark .dark\:bg-slate-900 { background-color: rgba(5, 5, 5, 0.6) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dark .dark\:bg-slate-800 { background-color: rgba(18, 18, 18, 0.6) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dark .dark\:bg-slate-900\/50 { background-color: rgba(5, 5, 5, 0.4) !important; backdrop-filter: blur(12px); }
.dark .dark\:bg-slate-800\/50 { background-color: rgba(18, 18, 18, 0.4) !important; backdrop-filter: blur(12px); }
.dark .dark\:bg-slate-700 { background-color: rgba(30, 30, 30, 0.6) !important; }

.dark .dark\:border-slate-800 { border-color: #1e1e1e !important; }
.dark .dark\:border-slate-700 { border-color: #2a2a2a !important; }
.dark .dark\:border-slate-600 { border-color: #3a3a3a !important; }

/* Classes utilitaires pour les transitions et les états de chargement (Skeletons) */
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }

.skeleton { background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%); background-size: 200% 100%; animation: skeletonLoading 1.5s infinite; }
.dark .skeleton { background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%); background-size: 200% 100%; }
@keyframes skeletonLoading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Transition fluide et "Glass" pour les onglets */
@keyframes tabEnter { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.animate-tab-enter { animation: tabEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }