@import "tailwindcss";
@plugin "@tailwindcss/typography";
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../../../node_modules/flowbite";

@import "./components/turnstile.css";
@import "./components/flash_messages.css";
@import "./components/trix_custom.css";

/* Pagy Pagination Styles - Flowbite Theme (Light Mode) */
@layer components {
  .pagy {
    @apply flex -space-x-px text-sm mt-6 justify-end;

    /* All page links (numbers, prev, next) */
    a:not([role="separator"]) {
      @apply flex items-center justify-center
             text-gray-500 bg-white
             border border-gray-300
             hover:bg-gray-100 hover:text-gray-700
             font-medium text-sm
             w-9 h-9
             no-underline
             focus:outline-none;
    }

    /* First link (Previous) - rounded left */
    a:first-child {
      @apply rounded-s-lg px-3 w-auto;
    }

    /* Last link (Next) - rounded right */
    a:last-child {
      @apply rounded-e-lg px-3 w-auto;
    }

    /* Disabled links (prev/next when at start/end) */
    a:not([href]) {
      @apply cursor-not-allowed opacity-50;
    }

    /* Current page */
    a[aria-current] {
      @apply z-10 text-blue-600 border-blue-300 bg-blue-50
             hover:bg-blue-100 hover:text-blue-700;
    }

    /* Gap separator (...) */
    a[role="separator"] {
      @apply flex items-center justify-center
             text-gray-500 bg-white
             border border-gray-300
             font-medium text-sm
             w-9 h-9
             cursor-default;
    }

    /* Label for input pagination */
    label {
      @apply inline-flex items-center whitespace-nowrap
             bg-white border border-gray-300
             px-3 py-2;

      input {
        @apply text-gray-900 text-sm
               bg-gray-50 border border-gray-300
               rounded-lg
               focus:ring-blue-500 focus:border-blue-500
               w-12 text-center mx-2;
      }
    }
  }
}