/* ==========================================
   Fichier : cs.css
   Rôle : Animations, Tooltips et UI Polish
   ========================================== */

/* 1. ANIMATION DU PIN-PAD (L'effet "Erreur") */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.animate-shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #ef4444 !important; /* Bordure rouge au moment du shake */
    color: #ef4444 !important;
}

/* 2. CUSTOM TOOLTIPS (Pour les indicateurs financiers) */
.has-tooltip {
    position: relative;
    cursor: help;
}

.tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 50;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #1e293b; /* bg-slate-800 */
    color: #f8fafc; /* text-slate-50 */
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    width: max-content;
    max-width: 250px;
    opacity: 0;
    transition: all 0.2s ease-out;
    pointer-events: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.has-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 3. APP SCROLLBARS (Nettoyage visuel) */
/* Cacher la scrollbar mais garder le scroll possible */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Scrollbar personnalisée très discrète pour la zone principale */
aside::-webkit-scrollbar, 
main > div::-webkit-scrollbar {
    width: 6px;
}
aside::-webkit-scrollbar-track,
main > div::-webkit-scrollbar-track {
    background: transparent;
}
aside::-webkit-scrollbar-thumb,
main > div::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* slate-300 */
    border-radius: 20px;
}

/* 4. NAVIGATION TABS (Style actif) */
.nav-btn.active {
    background-color: #ffffff;
    color: #0f172a; /* slate-900 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* 5. SIDEBAR ITEMS (Style interactif pour les listes d'activités/PME) */
.sidebar-item {
    transition: all 0.2s ease;
    cursor: pointer;
    border-left-width: 3px;
    border-left-color: transparent;
}

.sidebar-item:hover {
    background-color: #f8fafc; /* slate-50 */
}

/* Ces classes seront ajoutées par le JS selon l'onglet actif */
.sidebar-item.active-p1 { background-color: #ffffff; border-left-color: #0ea5e9; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.sidebar-item.active-p2 { background-color: #ffffff; border-left-color: #22c55e; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.sidebar-item.active-liv { background-color: #ffffff; border-left-color: #a855f7; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.sidebar-item.active-pme { background-color: #ffffff; border-left-color: #eab308; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* ==========================================
   6. ZEBRA STRIPING SIDEBAR (Alternating BG)
   ========================================== */
/* On cible les div pour ignorer le titre H3 (qui est le first-child) */
aside > div.sidebar-item:nth-of-type(odd) {
    background-color: #ffffff; /* Blanc */
}
aside > div.sidebar-item:nth-of-type(even) {
    background-color: #f8fafc; /* Gris très léger (slate-50) */
}

/* Le survol (hover) doit être légèrement plus foncé pour se voir sur les deux fonds */
aside > div.sidebar-item:hover {
    background-color: #f1f5f9 !important; /* slate-100 */
}

/* Les classes "active" (déjà présentes plus haut dans ton CSS) écraseront ces fonds grâce au !important */