/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "../tailwind/application.css";
@import "actiontext.css";
@import "actiontext_dark.css";

/* Ensure admin forms have max-width constraint */
form {
  max-width: 1000px;
}

/* Style select dropdowns for dark mode */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.dark select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Style select option elements */
select option {
  background-color: white;
  color: rgb(17, 24, 39);
  padding: 0.5rem;
}

.dark select option {
  background-color: rgb(17, 24, 39);
  color: rgb(243, 244, 246);
}

/* Hover state for select */
select:hover {
  border-color: rgb(156, 163, 175);
}

.dark select:hover {
  border-color: rgb(107, 114, 128);
}

/* Focus state for select */
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: rgb(34, 197, 94);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.dark select:focus {
  border-color: rgb(34, 197, 94);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* Pagy pagination styling for dark mode */
.pagy-nav .page a,
.pagy-nav .page.current,
.pagy-nav .page.gap {
  color: white;
}

.pagy-nav .page a {
  background-color: rgb(55, 65, 81);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  margin: 0 0.25rem;
  text-decoration: none;
}

.pagy-nav .page a:hover {
  background-color: rgb(75, 85, 99);
}

.pagy-nav .page.current {
  background-color: rgb(34, 197, 94);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  margin: 0 0.25rem;
}

.pagy-nav .page.disabled a {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Custom animations for auth background */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* Radial gradient utilities */
.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-stops));
}

.bg-gradient-conic {
  background: conic-gradient(var(--tw-gradient-stops));
}

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}