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

/* Custom dark theme components */
@layer components {
  .dark-theme {
    @apply bg-dark-bg text-dark-text;
  }
  
  .dark-card {
    @apply bg-dark-card border border-gray-700 rounded-xl shadow-dark;
  }
  
  .dark-card-hover {
    @apply hover:bg-dark-card-hover transition-colors duration-200;
  }
  
  .dark-button-primary {
    @apply bg-accent-blue text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors duration-200;
  }
  
  .dark-button-secondary {
    @apply bg-dark-card text-dark-text border border-gray-600 px-6 py-3 rounded-lg font-semibold hover:bg-dark-card-hover transition-colors duration-200;
  }
  
  .dark-input {
    @apply bg-dark-card border border-gray-600 text-dark-text placeholder-gray-400 rounded-lg px-4 py-3 focus:ring-2 focus:ring-accent-blue focus:border-transparent;
  }
  
  .category-card {
    @apply dark-card dark-card-hover p-6 cursor-pointer;
  }
  
  .category-card-green {
    @apply border-l-4 border-accent-green;
  }
  
  .category-card-orange {
    @apply border-l-4 border-accent-orange;
  }
  
  .category-card-blue {
    @apply border-l-4 border-accent-light-blue;
  }
  
  .job-card {
    @apply dark-card dark-card-hover p-4;
  }
  
  .nav-link-dark {
    @apply text-dark-text-secondary hover:text-dark-text transition-colors duration-200;
  }
  
  .nav-link-active {
    @apply text-dark-text font-semibold;
  }
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
  width: 8px;
}

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

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

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

/* Mobile-first responsive design */
@media (max-width: 640px) {
  .mobile-nav {
    @apply fixed bottom-0 left-0 right-0 bg-dark-card border-t border-gray-700;
  }
  
  .mobile-nav-item {
    @apply flex flex-col items-center py-3 px-2 text-xs;
  }
  
  .mobile-nav-item.active {
    @apply text-accent-blue;
  }
  
  .mobile-nav-item:not(.active) {
    @apply text-dark-text-secondary;
  }
}

/*# sourceMappingURL=tailwind.css-af17569c14ac4fea7ee3f4585824f4562c3820ec260d14cd3490548fa7cbecc5.map */