frontend/src/index.css

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

@layer base {
  body {
    @apply bg-slate-950 text-slate-100 font-sans antialiased;
  }

  * {
    @apply box-border;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

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

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

@layer components {
  /* Glassmorphism card */
  .glass-card {
    @apply bg-slate-900/60 backdrop-blur-sm border border-slate-700/50 rounded-xl;
  }

  /* Action pill colors */
  .pill-auto-approve      { @apply bg-emerald-500/20 text-emerald-300 border border-emerald-500/30; }
  .pill-route-dept        { @apply bg-blue-500/20 text-blue-300 border border-blue-500/30; }
  .pill-escalate-fc       { @apply bg-amber-500/20 text-amber-300 border border-amber-500/30; }
  .pill-escalate-cfo      { @apply bg-red-500/20 text-red-300 border border-red-500/30; }
  .pill-hold              { @apply bg-orange-500/20 text-orange-300 border border-orange-500/30; }
  .pill-reject            { @apply bg-red-600/20 text-red-300 border border-red-600/30; }
  .pill-flag              { @apply bg-yellow-500/20 text-yellow-300 border border-yellow-500/30; }
  .pill-route-procurement { @apply bg-purple-500/20 text-purple-300 border border-purple-500/30; }
  .pill-compliance-hold   { @apply bg-rose-500/20 text-rose-300 border border-rose-500/30; }

}