@import "tailwindcss";

@layer base {
  body {
    @apply bg-zinc-950 text-zinc-100 antialiased;
    font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
  }
}

@layer components {
  .report-container {
    @apply max-w-5xl mx-auto;
  }

  /* Navigation */
  .nav {
    @apply flex gap-2 mb-6;
  }
  .nav-link {
    @apply px-3 py-1.5 text-xs font-medium rounded-md transition-colors;
  }
  .nav-link-active {
    @apply bg-zinc-100 text-zinc-900;
  }
  .nav-link-inactive {
    @apply bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700;
  }

  /* Header */
  .report-header {
    @apply mb-6;
  }
  .report-period {
    @apply text-[10px] font-semibold text-zinc-500 uppercase tracking-[0.2em] mb-2;
  }
  .report-name {
    @apply text-2xl font-bold text-white mb-0.5;
  }
  .report-role {
    @apply text-sm text-zinc-400;
  }

  /* ---- Stat Cards — the ONE accented element ---- */
  .stats-grid {
    @apply grid grid-cols-3 gap-3 mb-5;
  }
  .stat-card {
    @apply bg-zinc-900 rounded-lg p-4 border border-zinc-800;
    border-left: 2px solid rgb(99, 102, 241);
  }
  .stat-label {
    @apply text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-1;
  }
  .stat-value {
    @apply text-3xl font-bold text-white tracking-tight;
    font-variant-numeric: tabular-nums;
  }
  .stat-desc {
    @apply text-[11px] text-zinc-500 mt-1;
  }

  /* ---- Highlight Card — the ONE callout ---- */
  .highlight-card {
    @apply bg-zinc-900 border border-zinc-800 rounded-lg p-4 mb-5;
    border-left: 3px solid rgb(16, 185, 129);
  }
  .highlight-title {
    @apply font-semibold text-emerald-400 text-sm mb-1;
  }
  .highlight-text {
    @apply text-sm text-zinc-300 leading-relaxed;
  }
  .highlight-text strong {
    @apply text-white;
  }

  /* ---- Section Headers — colored per section ---- */
  .section-title {
    @apply text-xs font-semibold uppercase tracking-wider mb-3 mt-1;
  }
  .section-title-blue { @apply text-blue-400; }
  .section-title-violet { @apply text-violet-400; }
  .section-title-amber { @apply text-amber-400; }
  .section-title-green { @apply text-emerald-400; }

  /* ---- Cards — neutral everywhere ---- */
  .charts-grid {
    @apply grid grid-cols-2 gap-3 mb-5;
  }
  .card {
    @apply bg-zinc-900 border border-zinc-800 rounded-lg p-4;
  }
  .card-label {
    @apply text-[11px] font-semibold text-zinc-400 uppercase tracking-wider mb-3;
  }

  /* Chart Bars */
  .chart-row {
    @apply flex items-center gap-2 mb-2.5;
  }
  .chart-label {
    @apply text-xs text-zinc-400 w-28 flex-shrink-0;
  }
  .chart-bar-bg {
    @apply flex-1 h-1.5 bg-zinc-800 rounded-full overflow-hidden;
  }
  .chart-bar {
    @apply h-full rounded-full;
  }
  .chart-value {
    @apply text-xs font-bold text-zinc-300 w-10 text-right;
    font-variant-numeric: tabular-nums;
  }

  .bar-blue { @apply bg-blue-400; }
  .bar-violet { @apply bg-violet-400; }
  .bar-green { @apply bg-emerald-400; }
  .bar-amber { @apply bg-amber-400; }
  .bar-gray { @apply bg-zinc-500; }
  .bar-purple { @apply bg-purple-400; }

  /* Analysis Grid */
  .analysis-grid {
    @apply grid grid-cols-2 gap-3 mb-5;
  }

  /* Annotation */
  .annotation {
    @apply text-[11px] text-zinc-500 mb-5;
  }

  /* ---- Workflow Tip Cards — neutral card, small badge ---- */
  .rec-list {
    @apply space-y-2 mb-5;
  }
  .rec-card {
    @apply bg-zinc-900 border border-zinc-800 rounded-lg p-4 flex gap-3;
  }
  .rec-number {
    @apply w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold text-zinc-400 bg-zinc-800 flex-shrink-0;
  }
  .rec-title {
    @apply font-semibold text-sm text-zinc-200 mb-1;
  }
  .rec-text {
    @apply text-sm text-zinc-400 leading-relaxed;
  }
  .rec-text strong {
    @apply text-zinc-200;
  }

  /* Code Blocks */
  .code-block {
    @apply block p-2.5 rounded text-xs mt-2 bg-black/40 border border-zinc-800;
    color: rgb(110, 231, 183);
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  }

  .rec-text ul {
    @apply mt-2 ml-4 list-disc space-y-1;
  }

  /* ---- Pattern Cards — neutral card, green check ---- */
  .pattern-card {
    @apply bg-zinc-900 border border-zinc-800 rounded-lg p-4 flex gap-3;
  }
  .pattern-check {
    @apply w-5 h-5 rounded flex items-center justify-center text-[10px] flex-shrink-0 text-emerald-400 bg-zinc-800;
  }

  /* Tags */
  .tag-list {
    @apply mb-6 flex flex-wrap gap-2;
  }
  .tag {
    @apply inline-flex items-center px-2 py-0.5 bg-zinc-900 border border-zinc-800 text-zinc-400 rounded text-[10px] font-medium;
  }

  /* Footer */
  .report-footer {
    @apply border-t border-zinc-800 pt-4 pb-2 flex items-center justify-between;
  }
  .footer-left {
    @apply text-[10px] text-zinc-600 italic;
  }
  .footer-right {
    @apply flex items-center gap-3;
  }
  .footer-brand {
    @apply text-xs font-bold text-zinc-300;
  }
  .footer-sep {
    @apply text-zinc-700;
  }
  .footer-sub {
    @apply text-[10px] text-zinc-600;
  }

  /* Export Button */
  .export-btn {
    @apply fixed bottom-6 right-6 bg-zinc-800 text-zinc-200 px-4 py-3 rounded-lg font-medium text-xs shadow-lg hover:bg-zinc-700 flex items-center gap-2 transition-all cursor-pointer border border-zinc-700;
  }
}

/* Hide UI from export capture */
.no-export .export-btn,
.no-export .nav {
  display: none !important;
}
