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

/*

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

*/
.pagy {
  @apply inline-flex -space-x-px text-sm;
  
  a:not(.gap) {
    @apply flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white;
    
    &:first-child {
      @apply rounded-s-lg border-e-0;
    }
    
    &:last-child {
      @apply rounded-e-lg;
    }
    
    &.current {
      @apply text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white;
    }
    
    &:not([href]) {
      @apply opacity-50 cursor-default hover:bg-white hover:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-400;
    }
  }
  
  label {
    @apply hidden; /* Hide the page input as it's not part of the new design */
  }
}

@layer components {
  .pill {
    @apply rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-white/80;
  }

  .pill-strong {
    @apply border-white/20 bg-white/10 text-white;
  }

  .pill-emerald {
    @apply border-emerald-400/30 bg-emerald-400/20 text-emerald-50;
  }

  .pill-amber {
    @apply border-amber-300/30 bg-amber-300/20 text-amber-50;
  }

  .meta-card {
    @apply rounded-2xl border border-white/10 bg-slate-900/70 p-4 shadow-inner backdrop-blur transition hover:-translate-y-0.5 hover:border-white/20;
  }

  .meta-title {
    @apply text-[11px] font-semibold uppercase tracking-[0.25em] text-white/60;
  }

  .meta-text {
    @apply mt-2 text-sm leading-relaxed text-white/90;
  }

  .meta-list {
    @apply mt-2 space-y-2 text-sm text-white/90;
  }

  .meta-list-item {
    @apply flex gap-3;
  }

  .meta-dot {
    @apply mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-white/60;
  }
}