frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --border: rgba(255,255,255,0.08);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body, #root {
    height: 100%;
    background-color: #0f172a;
    color: #f8fafc;
    font-family: 'Inter', system-ui, sans-serif;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
  }
}

@layer components {
    .glass-card {
    @apply bg-slate-800/60 backdrop-blur-sm border border-white/10 rounded-2xl;
    border-color: rgba(255,255,255,0.08);
  }

  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-semibold px-5 py-2.5 rounded-xl
           transition-all duration-200 shadow-lg shadow-primary-500/25 hover:shadow-primary-500/40
           hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-slate-700 hover:bg-slate-600 text-slate-200 font-medium px-5 py-2.5 rounded-xl
           transition-all duration-200 border border-white/10 hover:border-white/20;
  }

  .btn-ghost {
    @apply text-slate-400 hover:text-white hover:bg-slate-700/50 px-4 py-2 rounded-lg
           transition-all duration-200;
  }

  .input-field {
    @apply w-full bg-slate-800 border border-white/10 rounded-xl px-4 py-3 text-slate-100
           placeholder-slate-500 focus:outline-none focus:border-primary-500 focus:ring-2
           focus:ring-primary-500/20 transition-all duration-200;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold;
  }

  .badge-success { @apply badge bg-emerald-500/20 text-emerald-400; }
  .badge-warning { @apply badge bg-amber-500/20 text-amber-400; }
  .badge-danger  { @apply badge bg-red-500/20 text-red-400; }
  .badge-info    { @apply badge bg-blue-500/20 text-blue-400; }
  .badge-purple  { @apply badge bg-purple-500/20 text-purple-400; }

  .stat-card {
    @apply glass-card p-6 hover:border-primary-500/30 transition-all duration-300 hover:shadow-lg
           hover:shadow-primary-500/10 cursor-default;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-4 py-3 rounded-xl text-slate-400 hover:text-white
           hover:bg-slate-700/50 transition-all duration-200 font-medium text-sm;
  }

  .sidebar-link.active {
    @apply bg-primary-500/15 text-primary-400 border border-primary-500/20;
  }

  .nav-glow {
    box-shadow: 0 0 20px rgba(99,102,241,0.15);
  }

  .gradient-text {
    @apply bg-gradient-to-r from-primary-400 to-purple-400 bg-clip-text text-transparent;
  }

  .section-title {
    @apply text-xl font-bold text-slate-100 mb-6;
  }

  .table-header {
    @apply text-xs font-semibold text-slate-500 uppercase tracking-wider;
  }
}