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

@layer base {
  body {
    @apply fira-code bg-neo-dark-900 text-gray-100;
  }

  /* Neon accent glow effect */
  .neon-glow {
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
  }
}

@layer components {
  /* Neo-techy brutalist styles */
  .neo-card {
    @apply bg-neo-dark-800 border border-gray-800 transition-all duration-200;
  }

  .neo-card:hover {
    @apply border-neon-500 shadow-neon-sm;
  }

  .neo-border {
    @apply border border-gray-800;
  }

  .neo-border-accent {
    @apply border-2 border-neon-500;
  }

  .neo-text-accent {
    @apply text-neon-500;
  }

  .neo-badge {
    @apply bg-neon-500 text-neo-dark-900 font-bold px-3 py-1 text-xs uppercase tracking-wide;
  }
}

.x-axis-label {
    @apply text-xs uppercase font-mono font-semibold text-gray-400;
}

.y-axis-label {
    @apply text-xs uppercase font-mono font-semibold text-gray-400;
}

.fira-code {
  font-family: "Fira Code", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* Heatmap Mobile Optimizations */
@layer components {
  .heatmap-container {
    @apply relative;
  }

  /* Improve touch interactions on mobile */
  .heatmap-container [data-controller="heatmap"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x pan-y;
  }

  /* Optimize Cal-Heatmap for mobile */
  @media (max-width: 640px) {
    /* Better tooltip positioning and sizing on mobile */
    .ch-tooltip {
      @apply text-xs px-2 py-1 max-w-xs bg-neo-dark-700 text-gray-100 border border-gray-700;
      transform: translateY(-100%) translateX(-50%);
      left: 50% !important;
      white-space: normal;
      word-wrap: break-word;
    }

    /* Ensure month labels are readable */
    .ch-domain-text {
      @apply text-xs text-gray-400;
    }

    /* Optimize day labels for mobile */
    .ch-plugin-calendar-label text {
      @apply text-[10px];
      fill: #9ca3af;
    }

    /* Add subtle borders to cells for better visibility on small screens */
    .ch-subdomain-bg {
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 0.5;
    }
  }

  /* Smooth transitions for responsive changes */
  .heatmap-container svg {
    transition: all 0.3s ease-in-out;
  }

  /* Ensure heatmap cells are accessible with proper touch targets */
  .ch-subdomain-bg {
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .ch-subdomain-bg:hover {
    opacity: 0.85;
  }

  /* Improve scroll behavior on mobile */
  .touch-pan-x {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Custom scrollbar for better mobile UX */
  @media (max-width: 640px) {
    .overflow-x-auto::-webkit-scrollbar {
      height: 4px;
    }

    .overflow-x-auto::-webkit-scrollbar-track {
      @apply bg-neo-dark-800;
    }

    .overflow-x-auto::-webkit-scrollbar-thumb {
      @apply bg-gray-700 rounded;
    }

    .overflow-x-auto::-webkit-scrollbar-thumb:hover {
      @apply bg-neon-500;
    }
  }

  /* Global scrollbar styles for desktop */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-neo-dark-900;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-700 rounded;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-neon-500;
  }
}