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

@layer base {
  body {
    @apply bg-dark-900 text-slate-200 font-mono;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { @apply bg-dark-800; }
  ::-webkit-scrollbar-thumb { @apply bg-dark-500 rounded; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-slate-600; }
}

@layer utilities {
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
}

@layer components {
  .card {
    @apply bg-dark-800 border border-slate-700/40 rounded-lg p-4;
  }
  .card-sm {
    @apply bg-dark-700 border border-slate-700/30 rounded p-3;
  }
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
  }
  .badge-green { @apply badge bg-emerald-900/50 text-emerald-400 border border-emerald-700/30; }
  .badge-red { @apply badge bg-red-900/50 text-red-400 border border-red-700/30; }
  .badge-yellow { @apply badge bg-yellow-900/50 text-yellow-400 border border-yellow-700/30; }
  .badge-blue { @apply badge bg-blue-900/50 text-blue-400 border border-blue-700/30; }
  .badge-orange { @apply badge bg-orange-900/50 text-orange-400 border border-orange-700/30; }
  .badge-purple { @apply badge bg-purple-900/50 text-purple-400 border border-purple-700/30; }
  .stat-value { @apply text-2xl font-bold text-white; }
  .stat-label { @apply text-xs text-slate-500 uppercase tracking-wider; }
  .nav-link {
    @apply flex items-center gap-2 px-3 py-2 rounded text-sm text-slate-400
           hover:bg-dark-600 hover:text-slate-200 transition-colors;
  }
  .nav-link.active {
    @apply bg-dark-600 text-blue-400 border-l-2 border-blue-400;
  }
  .positive { @apply text-emerald-400; }
  .negative { @apply text-red-400; }
  .neutral { @apply text-slate-400; }
  .input {
    @apply bg-dark-700 border border-slate-700/50 rounded text-slate-200 text-sm
           px-3 py-1.5 outline-none focus:border-blue-500/60 transition-colors;
    color-scheme: dark;
  }
  .section-title {
    @apply text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3;
  }
  .risk-low { @apply text-emerald-400; }
  .risk-medium { @apply text-yellow-400; }
  .risk-high { @apply text-orange-400; }
  .risk-extreme { @apply text-red-400; }
}