/* Works in Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d1d5db; /* gray-300 */
    border-radius: 9999px;
}

@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar-thumb:hover {
        background-color: #9ca3af; /* gray-400 */
    }
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}


.scrollbar-hidden {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none;               /* Chrome/Safari */
}

/* Clinic sidebar nav: auto-hide minimal scrollbar, mirrors admin console.
   Thumb stays transparent until hover, keyboard focus, or active scroll. */
#clinic-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    scrollbar-gutter: stable;
}
#clinic-sidebar-nav:hover,
#clinic-sidebar-nav:focus-within,
#clinic-sidebar-nav.is-scrolling {
    scrollbar-color: #cbd5e1 transparent;
}
#clinic-sidebar-nav::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
#clinic-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
#clinic-sidebar-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 9999px;
    transition: background 200ms ease;
}
#clinic-sidebar-nav:hover::-webkit-scrollbar-thumb,
#clinic-sidebar-nav:focus-within::-webkit-scrollbar-thumb,
#clinic-sidebar-nav.is-scrolling::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
@media (prefers-reduced-motion: reduce) {
    #clinic-sidebar-nav::-webkit-scrollbar-thumb {
        transition: none;
    }
}