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

@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;
  }
}


/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.pagy {
  @apply flex items-center justify-center space-x-1 text-zinc-900;
  
  a, span {
    @apply inline-flex items-center justify-center rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 h-9 w-9;
  }

  a[href]:not(.gap) {
    @apply border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 hover:text-zinc-900 shadow-sm;
  }

  /* active/current state */
  span.current, a.current {
    @apply bg-zinc-900 text-white shadow-sm font-semibold;
  }

  /* ellipsis gap */
  span.gap {
    @apply border-none bg-transparent text-zinc-400 cursor-default pointer-events-none;
  }

  /* disabled/inactive links */
  a:not([href]), span.disabled, span.page:not(.current):not(.gap) {
    @apply border border-zinc-200 bg-white text-zinc-300 cursor-not-allowed opacity-50 shadow-sm;
  }

  /* prev/next buttons width adjustment */
  .prev, .next {
    @apply w-auto px-3 flex items-center space-x-1;
  }

  label {
    @apply inline-block whitespace-nowrap bg-zinc-100 rounded-lg px-3 py-0.5 border border-zinc-200 text-zinc-600 text-xs font-semibold;
    input {
      @apply bg-white border border-zinc-200 rounded-md py-0.5 px-1 ml-1 text-zinc-800 focus:border-zinc-950 focus:ring-1 focus:ring-zinc-950 focus:outline-none;
    }
  }
}

.my-6 {
  margin-top: 1.5rem; /* 24px */
  margin-bottom: 1.5rem; /* 24px */
}

.py-5 {
  padding-top: 1.25rem; /* 20px */
  padding-bottom: 1.25rem; /* 20px */
}

.mt-16 {
  margin-top: 4rem; /* 64px */
}