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

/* Custom scrollbar styles */
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
  }

  /* Dark mode scrollbar */
  .dark .scrollbar-thin {
    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5);
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.7);
  }
}

/* Completely eradicate all ring styling */
*,
*:before,
*:after {
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
  box-shadow: none !important;
}

*:focus,
*:focus-visible,
*:focus-within {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
}

/* Override any ring utilities */
.ring,
.ring-1,
.ring-2,
.ring-4,
.ring-8,
.ring-inset,
.focus\:ring,
.focus\:ring-1,
.focus\:ring-2,
.focus\:ring-4,
.focus\:ring-8,
.focus-visible\:ring,
.focus-visible\:ring-1,
.focus-visible\:ring-2,
.focus-visible\:ring-4,
.focus-visible\:ring-8,
.focus\:ring-blue-500,
.focus\:ring-blue-600,
.focus\:ring-primary {
  --tw-ring-shadow: none !important;
  --tw-ring-offset-shadow: none !important;
  box-shadow: none !important;
}

.prose {
  @apply text-foreground max-w-none;
}

.prose table {
  @apply my-4;
}

.prose thead {
  @apply bg-muted/50;
}

.prose th,
.prose td {
  @apply border border-border p-2;
}

.prose pre {
  @apply bg-muted p-4 rounded-lg my-4;
}

.prose code {
  @apply bg-muted px-1.5 py-0.5 rounded text-sm;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  @apply font-semibold my-4;
}

.prose p {
  @apply my-3;
}

.prose ul,
.prose ol {
  @apply my-3 pl-6;
}

.prose li {
  @apply my-1;
}

/* Animated border gradient for sync status */
@keyframes borderSlide {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: -200% 0, -200% 0;
  }
}
