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

@layer base {
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: #111827;
    color: #f9fafb;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  :focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #374151;
  }

  ::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-gray-900;
  }

  .btn-secondary {
    @apply bg-gray-700 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-900;
  }

  .card {
    @apply bg-gray-800 rounded-lg shadow-lg border border-gray-700;
  }

  .input-field {
    @apply bg-gray-700 border border-gray-600 text-white rounded-lg px-3 py-2 focus:ring-2 focus:ring-primary-500 focus:border-transparent;
  }

  .channel-item {
    @apply flex items-center p-3 rounded-lg hover:bg-gray-700 cursor-pointer transition-colors duration-200 focus:bg-gray-700 focus:ring-2 focus:ring-primary-500;
  }

  .channel-item.active {
    @apply bg-primary-600 hover:bg-primary-700;
  }
}