@import "tailwindcss";

:root {
  --background: #09090b;
  --foreground: #fafafa;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: "SF Pro Display", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Monaco", monospace;
}

html {
  color-scheme: dark;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thumb-zinc-700::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
  border-radius: 9999px;
}

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

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

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

::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* CSV Table horizontal scrollbar - always visible and prominent */
.csv-table-scroll {
  scrollbar-width: auto !important;
  scrollbar-color: #71717a #3f3f46 !important;
  overflow-x: scroll !important;
  padding-bottom: 4px;
}

.csv-table-scroll::-webkit-scrollbar {
  height: 16px !important;
  display: block !important;
  background: #3f3f46;
}

.csv-table-scroll::-webkit-scrollbar-track {
  background: #3f3f46 !important;
  border-radius: 8px;
}

.csv-table-scroll::-webkit-scrollbar-thumb {
  background: #a1a1aa !important;
  border-radius: 8px;
  border: 3px solid #3f3f46;
  min-width: 60px;
}

.csv-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #d4d4d8 !important;
}

/* Force scrollbar to always be visible */
.csv-table-scroll::-webkit-scrollbar-corner {
  background: #3f3f46;
}

/* Selection */
::selection {
  background: rgba(6, 182, 212, 0.3);
}

/* Focus outline */
:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.5);
  outline-offset: 2px;
}

/* Gradient backgrounds */
.bg-gradient-radial {
  background: radial-gradient(ellipse at center, var(--tw-gradient-stops));
}

/* Animated gradient */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Glow effects */
.glow-cyan {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3),
              0 0 40px rgba(6, 182, 212, 0.2),
              0 0 60px rgba(6, 182, 212, 0.1);
}

.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3),
              0 0 40px rgba(59, 130, 246, 0.2),
              0 0 60px rgba(59, 130, 246, 0.1);
}

/* Prose styles */
.prose pre {
  background: #18181b;
  border: 1px solid #27272a;
}

.prose code {
  color: #22d3ee;
  background: transparent;
}

.prose code::before,
.prose code::after {
  content: none;
}

/* Grid pattern background */
.bg-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Noise texture */
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
}
