/* The theme's stylesheet initializes tailwindcss and imports the theme's default styles.

   The $ThemeStylesheet path is evaluated via a postcss resolver, which finds the theme's
   main stylesheet within the theme's gem.

   To control the order of the tailwindcss imports further, you can eject the theme's
   stylesheet locally using the following command, which will take precedence.
   > rake bullet_train:themes:light:eject_css

   Read more: https://bullettrain.co/docs/stylesheets
*/
@import "$ThemeStylesheet";


/* ✅ YOUR APPLICATION'S CSS */
/* If you need to customize your application's CSS, this is the place to do it. This helps
   avoid merge conflicts in the future when Rails or Bullet Train update their own CSS.
*/

body.turbo-native .turbo-native:hidden {
   display: none;
}

.translation_missing {
   background: rgb(239 68 68 / 1);
   border-radius: 0.25rem;
   padding: 0.25rem;
}



/* Fix select2 theme compatibility - Light Mode (Default) */
html:not(.dark) .select2-container .select2-selection--multiple,
html:not(.dark) .select2-container .select2-selection--single {
  color: rgb(15 23 42) !important; /* slate-900 for light mode */
  background-color: rgb(255 255 255) !important; /* white for light mode */
  border-color: rgb(203 213 225) !important; /* slate-300 for light mode */
}

html:not(.dark) .select2-container .select2-dropdown {
  color: rgb(15 23 42) !important;
  background-color: rgb(255 255 255) !important; /* white for light mode */
  border-color: rgb(203 213 225) !important; /* slate-300 for light mode */
}

html:not(.dark) .select2-container .select2-results__option {
  color: rgb(15 23 42) !important; /* slate-900 for light mode */
  background-color: rgb(255 255 255) !important;
}

html:not(.dark) .select2-container .select2-results__option--highlighted {
  background-color: rgb(226 232 240) !important; /* slate-200 for hover */
}

html:not(.dark) .select2-container .select2-search__field {
  color: rgb(15 23 42) !important; /* slate-900 for light mode */
  background-color: rgb(255 255 255) !important; /* white for light mode */
}

/* Fix select2 theme compatibility - Dark Mode */
html.dark .select2-container .select2-selection--multiple,
html.dark .select2-container .select2-selection--single {
  color: rgb(203 213 225) !important; /* slate-300 for dark mode */
  background-color: rgb(30 41 59) !important; /* slate-800 for dark mode */
  border-color: rgb(71 85 105) !important; /* slate-600 for dark mode */
}

html.dark .select2-container .select2-dropdown {
  color: rgb(203 213 225) !important;
  background-color: rgb(30 41 59) !important; /* slate-800 for dark mode */
  border-color: rgb(71 85 105) !important; /* slate-600 for dark mode */
}

html.dark .select2-container .select2-results__option {
  color: rgb(203 213 225) !important; /* slate-300 for dark mode */
  background-color: rgb(30 41 59) !important;
}

html.dark .select2-container .select2-results__option--highlighted {
  background-color: rgb(51 65 85) !important; /* slate-700 for hover */
}

html.dark .select2-container .select2-search__field {
  color: rgb(203 213 225) !important; /* slate-300 for dark mode */
  background-color: rgb(30 41 59) !important; /* slate-800 for dark mode */
}

/* Fix for super_select multiple selection to prevent overlapping */
.select2-container .select2-selection--multiple {
  min-height: 2.5rem; /* Ensure minimum height */
  height: auto !important; /* Allow height to expand */
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.375rem; /* Add padding for better spacing */
}

.select2-container .select2-selection--multiple .select2-selection__choice {
  margin: 0; /* Remove default margins since we're using gap */
}

.sort-icons {
   display: inline-block;
   margin-left: 5px;
}

.sort-icons i {
   display: block;
   line-height: 0.5;
   cursor: pointer;
}

.sort-icons i.fa-sort-up {
   margin-bottom: 2px;
}

/* Marketing site - remove default link underlines */
.marketing-site a {
  text-decoration: none;
}

/* Ensure gradient CTA buttons keep white text on all states */
.marketing-site a[class*="bg-gradient"] {
  color: white !important;
}

/* Keep underlines in prose content (FAQ answers, blog posts) */
.marketing-site .prose a {
  text-decoration: underline;
  text-decoration-color: rgb(168 85 247 / 0.4);
  text-underline-offset: 2px;
}

/* Respect reduced motion preferences for marketing animations */
@media (prefers-reduced-motion: reduce) {
  .hover\:-translate-y-1:hover,
  .group-hover\:scale-110:hover,
  .group:hover .group-hover\:scale-110 {
    transform: none !important;
  }

  .transition-all,
  .transition-transform,
  .transition-colors {
    transition-duration: 0.01ms !important;
  }
}