@layer components {
  /* Cards */
  .zinc-card {
    @apply border border-zinc-200 rounded-xl bg-white shadow-sm p-6;
  }

  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 disabled:opacity-50 disabled:pointer-events-none transition-all;
  }
  
  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-lg bg-white border border-zinc-200 px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-200 transition-all;
  }

  .btn-rose {
    @apply inline-flex items-center justify-center rounded-lg bg-rose-50 border border-rose-200 text-rose-700 px-4 py-2 text-sm font-semibold hover:bg-rose-100 transition-all;
  }

  /* Forms */
  .form-label-zinc {
    @apply text-xs font-bold text-zinc-500 uppercase tracking-wider block mb-2;
  }

  .form-input-zinc {
    @apply w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-zinc-700 placeholder-zinc-400 focus:border-zinc-950 focus:ring-1 focus:ring-zinc-950 focus:outline-none transition-all;
  }

  /* Badges */
  .badge-emerald {
    @apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20;
  }

  .badge-rose {
    @apply inline-flex items-center rounded-full bg-rose-50 px-2.5 py-0.5 text-xs font-medium text-rose-700 ring-1 ring-inset ring-rose-600/20;
  }

  .badge-indigo {
    @apply inline-flex items-center rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-600/10;
  }

  /* Tree Line Connections */
  .rules-connected {
    @apply relative pl-6;
  }

  .rules-connected::before {
    content: "";
    @apply absolute left-0 top-0 bottom-0 w-0.5 bg-zinc-200;
  }

  /* Compact row action buttons */
  .btn-primary-sm {
    @apply inline-flex items-center justify-center rounded-lg bg-zinc-900 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 disabled:opacity-50 disabled:pointer-events-none transition-all;
  }
  
  .btn-secondary-sm {
    @apply inline-flex items-center justify-center rounded-lg bg-white border border-zinc-200 px-2.5 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-200 transition-all;
  }

  .btn-rose-sm {
    @apply inline-flex items-center justify-center rounded-lg bg-rose-50 border border-rose-200 text-rose-700 px-2.5 py-1.5 text-xs font-semibold hover:bg-rose-100 transition-all;
  }
}