/* ========================================
   CUSTOM SCROLLBAR STYLES
   Cross-browser compatible scrollbar design
   ======================================== */

/* ===== WEBKIT BROWSERS (Chrome, Safari, Edge) ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

::-webkit-scrollbar-thumb:active {
  background: #2d3748;
}

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

/* ===== FIREFOX ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 transparent;
}

/* ===== APPLY TO ALL SCROLLABLE ELEMENTS ===== */
html, body, div, section, article, aside, nav, main, header, footer, 
textarea, select, input[type="text"], input[type="search"], 
.overflow-auto, .overflow-y-auto, .overflow-x-auto,
[style*="overflow"], [style*="scroll"] {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 transparent;
}

/* ===== SPECIFIC ELEMENT OVERRIDES ===== */
/* Ensure modal scrollbars are styled */
.modal, .modal-content, .modal-body {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 transparent;
}

/* Style dropdown scrollbars */
select, .dropdown-menu, .select-dropdown {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 transparent;
}

/* Style textarea scrollbars */
textarea {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 transparent;
}

/* ===== DARK THEME VARIATIONS ===== */
/* For darker backgrounds, use slightly lighter scrollbar */
.dark-theme ::-webkit-scrollbar-thumb {
  background: #6b7280;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.dark-theme * {
  scrollbar-color: #6b7280 transparent;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  * {
    scrollbar-width: thin;
  }
}

/* ===== ACCESSIBILITY ===== */
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  ::-webkit-scrollbar-thumb {
    transition: none;
  }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  ::-webkit-scrollbar-thumb {
    background: #ffffff;
    border: 1px solid #000000;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #f0f0f0;
  }
  
  * {
    scrollbar-color: #ffffff #000000;
  }
}