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

/*

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

*/
@layer components {
  a {
    @apply text-blue-700 font-medium hover:text-blue-500 transition transition-colors active:text-blue-900;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

/* PAGY TAILWIND STYLES (copied from gem/stylesheets/pagy.tailwind.css) */
@layer components { /* Or place outside if you prefer */

  /* Main Pagy navigation container */
  .pagy.nav { /* Targets <nav class="pagy nav"> */
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }

  /* Generic style for all <a> tags within .pagy.nav that are NOT the gap indicator */
  .pagy.nav a:not(.gap) {
    @apply relative inline-flex items-center text-sm font-semibold ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0;
  }

  /* Clickable Page Number Links (not prev/next, not current, not gap) */
  .pagy.nav a[href]:not([aria-label="Previous"]):not([aria-label="Next"]):not(.current) {
    @apply px-4 py-2 text-gray-900 hover:bg-gray-50;
  }

  /* Current Page Link */
  /* Pagy uses <a class="current" aria-current="page" aria-disabled="true"> for the current page, which has no href */
  .pagy.nav a.current {
    @apply z-10 bg-blue-600 px-4 py-2 text-sm font-semibold text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600;
    /* Ensure it doesn't get hover styles from more generic rules if they exist */
    @apply hover:bg-blue-600;
    cursor: default; /* It's the current page, typically not a link to itself */
  }

  /* Previous Link */
  .pagy.nav a[aria-label="Previous"] {
    @apply rounded-l-md px-2 py-2 text-gray-400;
  }
  .pagy.nav a[href][aria-label="Previous"] { /* Clickable Previous */
    @apply hover:bg-gray-50;
  }
  .pagy.nav a:not([href])[aria-label="Previous"] { /* Disabled Previous */
    @apply cursor-not-allowed;
    /* text-gray-400 is already applied by the more general rule above */
  }

  /* Next Link */
  .pagy.nav a[aria-label="Next"] {
    @apply rounded-r-md px-2 py-2 text-gray-400;
  }
  .pagy.nav a[href][aria-label="Next"] { /* Clickable Next */
    @apply hover:bg-gray-50;
  }
  .pagy.nav a:not([href])[aria-label="Next"] { /* Disabled Next */
    @apply cursor-not-allowed bg-gray-50;
    /* text-gray-400 is already applied by the more general rule above */
  }

  /* Gap Indicator (Pagy uses <a class="gap" role="link" aria-disabled="true">) */
  .pagy.nav a.gap {
    /* Mimic Tailwind UI's span for ellipsis */
    @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0;
    cursor: default;
    text-decoration: none !important; /* Ensure it doesn't look like a link */
    @apply hover:bg-transparent; /* No hover effect for gap */
  }

  /* --- Styles for other Pagy helpers, if you use them --- */
  .pagy label { /* For combo_nav_js and limit_selector_js */
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
  }
  .pagy label input { /* For combo_nav_js and limit_selector_js */
    @apply bg-gray-100 border-none rounded-md;
  }

}

/* Turbo loading state */
/*
  The following rule was too broad and caused spinners to always be visible.
  [data-turbo-loading] {
    @apply block;
  }
*/

/* Hide content while loading */
.turbo-loading [data-turbo-frame] > *:not([data-turbo-loading]),
[data-turbo-frame].turbo-loading > *:not([data-turbo-loading]) {
  @apply hidden;
}

/* Show loading spinner while loading */
.turbo-loading [data-turbo-frame] [data-turbo-loading],
[data-turbo-frame].turbo-loading [data-turbo-loading] {
  @apply block;
}

/* Ensure the frame itself shows loading state */
.turbo-loading,
[data-turbo-frame].turbo-loading {
  @apply relative;
}

/* Add a slight delay to prevent flickering on fast loads */
.turbo-loading [data-turbo-loading],
[data-turbo-frame].turbo-loading [data-turbo-loading] {
  @apply transition-opacity duration-150;
  animation: fadeIn 150ms ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Styles for Turbo Frame loading state, specifically when we manually add .turbo-loading to the frame */

/* Hide actual content when frame has .turbo-loading class */
turbo-frame.turbo-loading > *:not([data-turbo-loading]) {
  @apply hidden;
}

/* Show loading spinner when frame has .turbo-loading class */
turbo-frame.turbo-loading [data-turbo-loading] {
  @apply block; /* Overrides .hidden class on the spinner div */
  @apply transition-opacity duration-150; /* Apply fade-in animation */
  animation: fadeIn 150ms ease-in;
}

/* Keyframes for the fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Ensure the frame itself (if it's the one with .turbo-loading) is relatively positioned for absolute children if any */
/* This rule might be redundant if the spinner positioning doesn't require it, but good for completeness */
turbo-frame.turbo-loading {
  @apply relative;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 [x-cloak] { display: none !important; }