/*! 
 * MDA Summary - Styles Sticky avec barre de défilement fine
 * Composant sommaire avec position sticky et scrollbar personnalisée
 */

/* ========================================
   COMPOSANT STICKY
   ======================================== */

.mda-summary-sticky {
    position: sticky !important;
    top: 20px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    z-index: 10;
    
    /* Barre de défilement fine pour Webkit (Chrome, Safari, Edge) */
    scrollbar-width: thin;
    scrollbar-color: #8d8d91 #f0f0f0;
}

/* Barre de défilement personnalisée pour Webkit */
.mda-summary-sticky::-webkit-scrollbar {
    width: 6px;
}

.mda-summary-sticky::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 3px;
}

.mda-summary-sticky::-webkit-scrollbar-thumb {
    /* background: #6c6cff; */
    border-radius: 5px;
    transition: background 0.2s ease;
}

.mda-summary-sticky::-webkit-scrollbar-thumb:hover {
    /* background: #4a4aff; */
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile : Réduire la hauteur maximale */
@media (max-width: 768px) {
    .mda-summary-sticky {
        max-height: 60vh !important;
        top: 10px !important;
    }
}

/* Tablette : Hauteur intermédiaire */
@media (min-width: 769px) and (max-width: 1024px) {
    .mda-summary-sticky {
        max-height: 70vh !important;
    }
}

/* ========================================
   AMÉLIORATIONS UX
   ======================================== */

/* Indicateur visuel quand le contenu est scrollable */
.mda-summary-sticky:not(:hover)::-webkit-scrollbar-thumb {
    background: #ccc;
}

.mda-summary-sticky:hover::-webkit-scrollbar-thumb {
    background: #6c6cff;
}

/* Animation douce pour le sticky */
.mda-summary-sticky {
    transition: all 0.3s ease;
}

/* ========================================
   THÈME SOMBRE
   ======================================== */

html[data-applied-mode="dark"] .mda-summary-sticky {
    scrollbar-color: #6c6cff #3a3a3a;
}

html[data-applied-mode="dark"] .mda-summary-sticky::-webkit-scrollbar-track {
    background: #3a3a3a;
}

html[data-applied-mode="dark"] .mda-summary-sticky::-webkit-scrollbar-thumb {
    background: #6c6cff;
}

html[data-applied-mode="dark"] .mda-summary-sticky::-webkit-scrollbar-thumb:hover {
    background: #8c8cff;
}

html[data-applied-mode="dark"] .mda-summary-sticky:not(:hover)::-webkit-scrollbar-thumb {
    background: #666;
}

/* ========================================
   GESTION DE LA BARRE D'ADMINISTRATION WORDPRESS
   ======================================== */

/* Quand la barre d'admin WordPress est présente (utilisateur connecté) */
body.admin-bar .mda-summary-sticky {
    top: 52px !important; /* 20px + 32px de la barre d'admin */
}

/* Sur mobile, la barre d'admin est plus haute */
@media screen and (max-width: 782px) {
    body.admin-bar .mda-summary-sticky {
        top: 66px !important; /* 20px + 46px de la barre d'admin */
    }
}