/* =====================================================
   GPPC SCROLLBAR FIX
   Critical for elderly users at high zoom
   ALWAYS shows visible, wide scrollbar
   ===================================================== */

/* Force scrollbar to always be visible */
html {
    overflow-y: scroll !important; /* Always show vertical scrollbar */
    overflow-x: hidden !important; /* Never horizontal scroll */
}

body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Wide, visible scrollbar for elderly users */
::-webkit-scrollbar {
    width: 18px !important; /* Extra wide for visibility */
    height: 18px !important;
}

::-webkit-scrollbar-track {
    background: #e5e7eb !important; /* Light gray - clearly visible */
    border-left: 2px solid #d1d5db !important; /* Border for definition */
}

::-webkit-scrollbar-thumb {
    background: #79C9CE !important; /* Brand turquoise - bright and visible */
    border-radius: 9px !important;
    border: 4px solid #e5e7eb !important; /* Thick border for padding effect */
    min-height: 50px !important; /* Minimum thumb size for easy grabbing */
}

::-webkit-scrollbar-thumb:hover {
    background: #4A9B9F !important; /* Darker turquoise on hover */
    border: 3px solid #e5e7eb !important; /* Slightly larger on hover */
}

::-webkit-scrollbar-thumb:active {
    background: #1A2942 !important; /* Brand navy when actively dragging */
}

/* Firefox scrollbar - make it wider and more visible */
* {
    scrollbar-width: auto !important; /* 'auto' = wider scrollbar (not 'thin') */
    scrollbar-color: #79C9CE #e5e7eb !important; /* thumb: turquoise, track: light gray */
}

/* Remove any overflow hidden that might hide scrollbar */
.container,
.nav,
.navbar,
section,
main {
    overflow-x: visible !important;
}

/* Ensure scrollbar visible on all major containers */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: block !important;
    visibility: visible !important;
}

/* Mobile devices - ensure touch scrolling works */
@media (max-width: 768px) {
    html,
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* High zoom - make scrollbar even more prominent */
@media (max-width: 900px) {
    ::-webkit-scrollbar {
        width: 20px !important; /* Even wider at high zoom/small viewport */
    }

    ::-webkit-scrollbar-thumb {
        border: 5px solid #e5e7eb !important; /* More padding */
    }
}

/* Windows High Contrast Mode - ensure scrollbar visible */
@media (prefers-contrast: high) {
    ::-webkit-scrollbar-thumb {
        background: currentColor !important;
        border: 3px solid Canvas !important;
    }

    ::-webkit-scrollbar-track {
        background: Canvas !important;
        border: 1px solid currentColor !important;
    }
}