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

@layer base {
  /* Default scrollbar styles */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #1f2937; /* gray-800 */
    border-radius: 4px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #374151; /* gray-700 */
    border-radius: 4px;
    border: 2px solid #1f2937; /* gray-800 */
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #4b5563; /* gray-600 */
  }

  /* Handle on active */
  ::-webkit-scrollbar-thumb:active {
    background: #6b7280; /* gray-500 */
  }

  /* Firefox scrollbar styles */
  * {
    scrollbar-width: thin;
    scrollbar-color: #374151 #1f2937; /* thumb track */
  }

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

  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #3b82f6 #1f2937;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
    border: 2px solid #1f2937;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
  }

  /* For dark theme */
  .dark ::-webkit-scrollbar-track {
    background: #111827;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: #1f2937;
    border: 2px solid #111827;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: #374151;
  }
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
  }

  .scrollbar-none {
    scrollbar-width: none;
  }
}