style.css

@import "tailwindcss";

/* Enable dark mode via .dark class on parent element (required for Tailwind CSS v4) */
@custom-variant dark (&:where(.dark, .dark *));

/* Custom Styles */
@layer base {
  html {
    @apply bg-slate-50 dark:bg-slate-950;
  }

  body {
    @apply bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-950 dark:via-blue-950 dark:to-indigo-950 text-slate-900 dark:text-slate-100;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  /* Using explicit CSS selectors to ensure dark mode colors apply correctly with high specificity */
  /* Light mode: slate-500 (#64748b) */
  input::placeholder,
  textarea::placeholder {
    color: #64748b;
    opacity: 1; /* Firefox fix */
  }

  /* Dark mode: slate-400 (#94a3b8) - Contrast 7:1 against slate-900 */
  /* Using :where(.dark) to match Tailwind's dark mode selector strategy */
  :where(.dark) input::placeholder,
  :where(.dark) textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
  }

  /* Make all clickable elements show pointer cursor */
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    cursor: pointer;
  }

  /* Date input calendar picker icon */
  input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }

  /* Dark mode: invert calendar picker icon for visibility */
  .dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }

  /* Ensure input text is visible in dark mode */
  input,
  textarea,
  select {
    @apply text-slate-900 dark:text-slate-100;
  }
}

@layer components {
  /* Glass Card Effect */
  .glass-card {
    @apply bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm border border-white/20 dark:border-slate-800/20 shadow-xl;
  }

  /* Disable blur effects for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .glass-card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Gradient Text */
  .gradient-text {
    @apply bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400 bg-clip-text text-transparent;
  }
}

@layer utilities {
  /* Background Pattern */
  .bg-pattern {
    background-image:
      linear-gradient(to right, rgba(99, 102, 241, 0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  @apply bg-slate-100 dark:bg-slate-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-300 dark:bg-slate-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-400 dark:bg-slate-500;
}

/* Loading Animation */
.loader-ring {
  border-style: solid;
  border-width: 3px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Tooltip Styles */
.tooltip {
  @apply relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  @apply absolute z-50 invisible opacity-0 px-3 py-2 text-sm font-medium text-white bg-slate-800 dark:bg-slate-700 rounded-lg shadow-lg whitespace-nowrap transition-all duration-200;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip::before {
  content: '';
  @apply absolute z-50 invisible opacity-0 transition-all duration-200;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-slate-800) transparent transparent transparent;
}

.dark .tooltip::before {
  border-color: var(--color-slate-700) transparent transparent transparent;
}

.tooltip:hover::after,
.tooltip:hover::before,
.tooltip:focus-visible::after,
.tooltip:focus-visible::before,
.tooltip:focus-within::after,
.tooltip:focus-within::before {
  @apply visible opacity-100;
}

/* Accessible focus ring for tooltip triggers */
.tooltip:focus-visible {
  @apply outline-none ring-2 ring-indigo-500 ring-offset-2 rounded-2xl;
}

.dark .tooltip:focus-visible {
  @apply ring-offset-slate-900;
}

/* Indeterminate progress bar animation */
.progress-indeterminate {
  width: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-indigo-500) 30%,
    var(--color-purple-500) 50%,
    var(--color-indigo-500) 70%,
    transparent 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: indeterminate-slide 1.5s ease-in-out infinite;
}

@keyframes indeterminate-slide {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-indeterminate {
    animation: none;
    opacity: 0.5;
  }
}

/* Merge Rate Bar - initial width 0% (dynamically updated by JavaScript) */
#mergeRateBar {
  width: 0%;
}