@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom, native-feel scrollbar for dark UI */
.custom-scrollbar {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 rgba(31, 41, 55, 0.7); /* thumb | track */
  /* Avoid layout shift when scrollbars appear */
  scrollbar-gutter: stable both-edges;
}

/* WebKit-based browsers */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.7); /* gray-900 */
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8, #0284c7); /* primary-400 → 600 */
  border-radius: 9999px;
  border: 2px solid rgba(17, 24, 39, 0.7); /* creates spacing ring */
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7dd3fc, #0ea5e9); /* brighten on hover */
}

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