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

@layer base {
  /* Remove default field_with_errors styling */
  .field_with_errors {
    display: contents;
  }
}

@layer components {
  /* Error state for form selects */
  .field_with_errors select {
    outline-color: oklch(63.7% 0.237 25.331) !important;
  }

  .field_with_errors input {
    outline-color: oklch(63.7% 0.237 25.331) !important;
  }
}

@layer components {
  .pagy {
    @apply flex items-center gap-1;

    a {
      @apply flex items-center justify-center min-w-[2rem] h-8 px-3 text-sm font-medium
             text-gray-700 bg-white border border-gray-200 rounded-lg
             transition-colors duration-150;
    }

    a[href]:hover {
      @apply bg-gray-50 text-gray-900 border-gray-300;
    }

    a:not([href]) {
      @apply cursor-default text-gray-400;
    }

    a[aria-current] {
      @apply bg-blue-600 text-white border-blue-600;
    }

    a[aria-current]:hover {
      @apply bg-blue-700 border-blue-700;
    }
  }
}