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

@layer base {
  html, body {
    @apply bg-base-gradient min-h-screen text-white;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  * { box-sizing: border-box; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
}

@layer components {
  /* ── Glass card ─────────────────────────────────────── */
  .glass {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .glass-hover {
    @apply glass transition-all duration-200;
  }
  .glass-hover:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10);
  }

  /* ── Status badges ──────────────────────────────────── */
  .badge-active  { @apply bg-emerald-500/20 text-emerald-300 border border-emerald-500/30; }
  .badge-idle    { @apply bg-white/5 text-white/50 border border-white/10; }
  .badge-working { @apply bg-blue-500/20 text-blue-300 border border-blue-500/30; }
  .badge-error   { @apply bg-red-500/20 text-red-300 border border-red-500/30; }
  .badge-warning { @apply bg-amber-500/20 text-amber-300 border border-amber-500/30; }
  .badge-done    { @apply bg-violet-500/20 text-violet-300 border border-violet-500/30; }

  /* ── Glow accents ───────────────────────────────────── */
  .glow-blue   { box-shadow: 0 0 20px rgba(59,130,246,0.25); }
  .glow-cyan   { box-shadow: 0 0 20px rgba(6,182,212,0.25); }
  .glow-green  { box-shadow: 0 0 20px rgba(16,185,129,0.25); }

  /* ── Buttons ────────────────────────────────────────── */
  .btn-primary {
    @apply px-4 py-2 rounded-xl font-medium text-sm transition-all duration-200;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 12px rgba(59,130,246,0.3);
  }
  .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(59,130,246,0.5);
    transform: translateY(-1px);
  }
  .btn-ghost {
    @apply px-4 py-2 rounded-xl font-medium text-sm text-white/70 transition-all duration-200;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .btn-ghost:hover {
    background: rgba(255,255,255,0.10);
    @apply text-white;
  }

  /* ── Progress bars ──────────────────────────────────── */
  .progress-bar {
    @apply h-1.5 rounded-full overflow-hidden;
    background: rgba(255,255,255,0.08);
  }
  .progress-fill {
    @apply h-full rounded-full transition-all duration-700;
  }

  /* ── Sidebar nav ────────────────────────────────────── */
  .nav-item {
    @apply flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-white/60
           transition-all duration-150 cursor-pointer w-full;
  }
  .nav-item:hover  { @apply text-white; background: rgba(255,255,255,0.07); }
  .nav-item.active { @apply text-white; background: rgba(255,255,255,0.10); box-shadow: inset 3px 0 0 rgba(255,255,255,0.35); }

  /* ── Kanban cards ───────────────────────────────────── */
  .kanban-card {
    @apply glass p-4 cursor-pointer animate-slide-up;
  }
  .kanban-card:hover {
    background: rgba(255,255,255,0.09);
    transform: translateY(-2px);
  }

  /* ── Momentum score ─────────────────────────────────── */
  .momentum-high   { @apply text-emerald-300 bg-emerald-500/15 border border-emerald-500/25; }
  .momentum-medium { @apply text-amber-300   bg-amber-500/15   border border-amber-500/25; }
  .momentum-low    { @apply text-white/40    bg-white/5        border border-white/10; }
}