@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn[wght].woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

@layer base {
  * { font-family: 'Vazirmatn', sans-serif; }
  :root { direction: rtl; }
}

@layer components {
  /* Sidebar */
  .sidebar { @apply fixed top-0 right-0 h-screen w-72 bg-slate-900 text-white z-40 overflow-y-auto flex flex-col transition-transform duration-300; }
  .sidebar-hidden { @apply translate-x-full; }
  .nav-section-label { @apply text-xs font-bold uppercase tracking-widest text-slate-500 px-4 pt-5 pb-1.5; }
  .nav-link { @apply flex items-center gap-3 px-4 py-2.5 text-sm text-slate-300 rounded-lg mx-2 hover:bg-slate-800 hover:text-white transition-all; }
  .nav-link.active { @apply bg-blue-600 text-white font-medium; }
  .nav-link-icon { @apply w-7 h-7 rounded-lg flex items-center justify-center text-base flex-shrink-0; }

  /* Page layout */
  .page-wrapper { @apply lg:mr-72 min-h-screen transition-all duration-300; }
  .page-content { @apply max-w-7xl mx-auto px-4 sm:px-6 py-8; }

  /* Module cards */
  .module-card { @apply bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden mb-4 transition-shadow hover:shadow-md; }
  .module-card-header { @apply flex items-start justify-between p-5 gap-4; }
  .module-card-body { @apply border-t border-slate-100; }

  /* Badges */
  .badge { @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold; }
  .badge-core { @apply bg-red-100 text-red-700; }
  .badge-dep { @apply bg-blue-100 text-blue-700; }
  .badge-standalone { @apply bg-emerald-100 text-emerald-700; }
  .badge-p0 { @apply bg-red-600 text-white; }
  .badge-p1 { @apply bg-orange-500 text-white; }
  .badge-p2 { @apply bg-amber-400 text-white; }
  .badge-p3 { @apply bg-sky-500 text-white; }
  .badge-p4 { @apply bg-violet-500 text-white; }
  .badge-p5 { @apply bg-slate-400 text-white; }
  .badge-done { @apply bg-green-100 text-green-700; }
  .badge-wip { @apply bg-yellow-100 text-yellow-700; }
  .badge-todo { @apply bg-slate-100 text-slate-500; }
  .badge-base { @apply bg-slate-100 text-slate-700; }
  .badge-pro { @apply bg-amber-100 text-amber-700; }

  /* Feature lists */
  .feature-list { @apply grid grid-cols-1 sm:grid-cols-2 gap-1.5 p-5 text-sm; }
  .feature-item { @apply flex items-start gap-2 text-slate-700; }
  .feature-item-base::before { content: '✓'; @apply text-green-500 font-bold flex-shrink-0; }
  .feature-item-pro::before { content: '⭐'; @apply flex-shrink-0; }

  /* Tabs */
  .tabs { @apply flex border-b border-slate-200; }
  .tab-btn { @apply px-5 py-3 text-sm font-medium border-b-2 transition-colors cursor-pointer; }
  .tab-btn.active { @apply border-blue-600 text-blue-600; }
  .tab-btn:not(.active) { @apply border-transparent text-slate-500 hover:text-slate-700; }
  .tab-pane { @apply hidden; }
  .tab-pane.active { @apply block animate-fade-in; }

  /* Plan matrix */
  .plan-matrix-row { @apply flex gap-1.5 p-4 bg-slate-50 border-t border-slate-100 flex-wrap; }
  .plan-chip { @apply px-2.5 py-1 rounded-full text-xs font-medium; }
  .plan-chip-yes { @apply bg-green-100 text-green-700; }
  .plan-chip-no { @apply bg-slate-200 text-slate-400 line-through; }
  .plan-chip-addon { @apply bg-amber-100 text-amber-700; }

  /* Section header */
  .section-page-header { @apply rounded-2xl p-6 mb-6 text-white; }
  .stat-card { @apply bg-white rounded-xl border border-slate-200 p-5 flex flex-col gap-2; }
  .stat-number { @apply text-3xl font-bold; }
  .stat-label { @apply text-sm text-slate-500; }

  /* Meta row */
  .meta-row { @apply flex flex-wrap gap-4 px-5 py-3 bg-slate-50 border-t border-slate-100 text-xs; }
  .meta-item { @apply flex items-center gap-1.5; }
  .meta-key { @apply text-slate-400 font-medium; }
  .meta-val { @apply text-slate-700; }

  /* Big plan matrix table */
  .matrix-table { @apply w-full text-sm border-collapse; }
  .matrix-table th { @apply bg-slate-100 px-3 py-2 text-xs font-bold text-slate-600 text-center border border-slate-200; }
  .matrix-table td { @apply px-3 py-2 text-center border border-slate-200; }
  .matrix-table tr:nth-child(even) td { @apply bg-slate-50; }
  .matrix-check { @apply text-green-500 text-base; }
  .matrix-no { @apply text-slate-300 text-base; }
  .matrix-addon { @apply text-amber-500 text-base; }

  /* Mermaid */
  .mermaid-wrapper { @apply bg-white rounded-2xl border border-slate-200 p-6 overflow-x-auto; }

  /* Search */
  .search-box { @apply w-full bg-slate-800 text-white placeholder-slate-400 rounded-xl px-4 py-2.5 text-sm border border-slate-700 focus:outline-none focus:border-blue-500; }
}