/* Custom scrollbar styling for desktop browsers */
/* This ensures users can click and drag to scroll even without touch/swipe capability */
/* Uses pointer: fine to target desktop devices with mouse/trackpad */

@media (pointer: fine) {
  /* Global scrollbar styling - uses !important to override inline styles from React Native Web */
  * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
  }
  
  /* WebKit browsers (Chrome, Safari, Edge) - horizontal and vertical scrollbar */
  *::-webkit-scrollbar {
    height: 8px !important;
    width: 8px !important;
    display: block !important;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  
  *::-webkit-scrollbar-track {
    background: transparent !important;
  }
  
  *::-webkit-scrollbar-corner {
    background: transparent !important;
  }
}