/* ============================================
   CSS SCROLLBAR PERSONALIZZATA
   Compatibile con: Chrome, Edge, Safari, Firefox
   ============================================ */

/* === FIREFOX === */
* {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1a1a1a;
}

/* === WEBKIT (Chrome, Safari, Edge, Opera) === */

/* Larghezza della scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

/* Track (binario/letto su cui scorre) - grigio molto scuro */
::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 0px;
}

/* Handle (thumb/fiume - barra movibile) - grigio più chiaro */
::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 6px;
    border: 2px solid #1a1a1a;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* Handle on active/click */
::-webkit-scrollbar-thumb:active {
    background: #555555;
}

/* Corner (angolo dove si incontrano scrollbar verticale e orizzontale) */
::-webkit-scrollbar-corner {
    background: #1a1a1a;
}

/* === OPZIONALE: Versione più sottile per mobile/tablet === */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        border: 1px solid #1a1a1a;
    }
}

/* === FALLBACK per browser meno recenti === */
body {
    scrollbar-face-color: #3a3a3a;
    scrollbar-track-color: #1a1a1a;
    scrollbar-arrow-color: #3a3a3a;
    scrollbar-shadow-color: #1a1a1a;
}