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

/* ============================================================================
   Beads Map - Custom Styles
   Design: Clean, minimal graph visualization
   ============================================================================ */

@layer base {
  html,
  body {
    @apply h-full overflow-hidden;
  }

  body {
    @apply bg-white text-zinc-800 antialiased dark:bg-black dark:text-zinc-200;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  /* Card with subtle hover lift */
  .card-lift {
    @apply transition-all duration-200 ease-out;
  }
  .card-lift:hover {
    @apply shadow-md -translate-y-0.5;
  }

  /* Status badge base */
  .status-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }

  /* Scrollbar styling */
  .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-zinc-200 rounded-full dark:bg-zinc-700;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-zinc-300 dark:bg-zinc-600;
  }
}

@layer utilities {
  /* Fade in animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }

  /* Pulse subtle */
  @keyframes pulseSoft {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }
  .animate-pulse-soft {
    animation: pulseSoft 2s ease-in-out infinite;
  }

  /* Bead tooltip fade-in */
  @keyframes beadTooltipFade {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Mobile slide-in drawer from right */
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  .animate-slide-in-right {
    animation: slideInRight 0.25s ease-out;
  }

  /* Mobile bottom action sheet slide-up */
  @keyframes slideUpSheet {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  .animate-slide-up-sheet {
    animation: slideUpSheet 0.2s ease-out;
  }
}

/* Markdown prose inside description box */
.description-markdown h1,
.description-markdown h2,
.description-markdown h3,
.description-markdown h4 {
  @apply font-semibold text-zinc-700 mt-2 mb-1 dark:text-zinc-300;
}
.description-markdown h1 { font-size: 0.85rem; }
.description-markdown h2 { font-size: 0.8rem; }
.description-markdown h3 { font-size: 0.75rem; }
.description-markdown h4 { font-size: 0.7rem; }

.description-markdown p {
  @apply mb-1.5;
}
.description-markdown p:last-child {
  @apply mb-0;
}

.description-markdown ul,
.description-markdown ol {
  @apply pl-4 mb-1.5 space-y-0.5;
}
.description-markdown ul { @apply list-disc; }
.description-markdown ol { @apply list-decimal; }

.description-markdown code {
  @apply bg-zinc-200/60 text-zinc-700 px-1 py-0.5 rounded text-[10px] font-mono dark:bg-zinc-700/60 dark:text-zinc-300;
}
.description-markdown pre {
  @apply bg-zinc-200/60 rounded-md p-2 mb-1.5 overflow-x-auto dark:bg-zinc-800/60;
}
.description-markdown pre code {
  @apply bg-transparent p-0 text-[10px];
}

.description-markdown a {
  @apply text-emerald-600 underline underline-offset-2 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300;
}

.description-markdown blockquote {
  @apply border-l-2 border-zinc-300 pl-2 text-zinc-500 italic my-1.5 dark:border-zinc-600 dark:text-zinc-400;
}

.description-markdown table {
  @apply w-full text-[10px] border-collapse mb-1.5;
}
.description-markdown th {
  @apply text-left font-semibold text-zinc-600 border-b border-zinc-200 pb-0.5 pr-2 dark:text-zinc-400 dark:border-zinc-700;
}
.description-markdown td {
  @apply border-b border-zinc-100 py-0.5 pr-2 dark:border-zinc-800;
}

.description-markdown hr {
  @apply border-zinc-200 my-2 dark:border-zinc-700;
}

.description-markdown strong {
  @apply font-semibold text-zinc-700 dark:text-zinc-300;
}

.description-markdown img {
  @apply max-w-full rounded;
}

/* Timeline slider custom styling */
.timeline-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.timeline-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #e4e4e7; /* zinc-200 */
  border-radius: 2px;
}
.dark .timeline-slider::-webkit-slider-runnable-track {
  background: #3f3f46; /* zinc-700 */
}
.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #10b981; /* emerald-500 */
  border-radius: 50%;
  margin-top: -4px;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.timeline-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
.timeline-slider::-moz-range-track {
  height: 4px;
  background: #e4e4e7;
  border-radius: 2px;
  border: none;
}
.dark .timeline-slider::-moz-range-track {
  background: #3f3f46;
}
.timeline-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #10b981;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Force-graph container overrides */
.force-graph-container canvas {
  @apply rounded-lg;
  touch-action: none; /* Prevent browser gestures from conflicting with graph pan/zoom */
}