/*
 * 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.
 *


 */

/* Enhanced Navigation Styles */
.nav-darker {
  background: linear-gradient(135deg, #0F172A, #1E293B) !important; /* slate-900 to slate-800 */
  border-bottom: 1px solid rgba(30, 41, 59, 0.8) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.nav-link-active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #93C5FD !important; /* blue-300 */
}

.nav-link {
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.nav-link:hover::before {
  left: 100%;
}

/* API Status Indicator Animation */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px currentColor;
  }
  50% {
    box-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
  }
}

.api-status-indicator {
  animation: pulse-glow 2s infinite;
}

/* Mobile Menu Slide Animation */
.mobile-menu-enter {
  transform: translateY(-10px);
  opacity: 0;
}

.mobile-menu-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.mobile-menu-exit {
  transform: translateY(0);
  opacity: 1;
}

.mobile-menu-exit-active {
  transform: translateY(-10px);
  opacity: 0;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

/* Navigation backdrop blur effect */
.nav-backdrop {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Enhanced button focus states */
button:focus, a:focus {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
}

/* Logo hover effect enhancement with glow and animation */
.logo-hover-glow {
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.2));
  animation: logo-gentle-pulse 3s ease-in-out infinite;
}

.logo-hover-glow:hover {
  filter: drop-shadow(0 0 15px rgba(147, 51, 234, 0.6))
          drop-shadow(0 0 25px rgba(147, 51, 234, 0.4))
          drop-shadow(0 0 35px rgba(147, 51, 234, 0.2));
  animation: logo-intense-glow 1.5s ease-in-out infinite;
}

/* Logo Animation Keyframes */
@keyframes logo-gentle-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(147, 51, 234, 0.3));
  }
}

@keyframes logo-intense-glow {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(147, 51, 234, 0.6))
            drop-shadow(0 0 25px rgba(147, 51, 234, 0.4))
            drop-shadow(0 0 35px rgba(147, 51, 234, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.8))
            drop-shadow(0 0 30px rgba(147, 51, 234, 0.6))
            drop-shadow(0 0 40px rgba(147, 51, 234, 0.4));
  }
}

/* Dark mode default styling */
body, html {
  color: #F9FAFB; /* gray-50 - proper white text for dark backgrounds */
  background-color: #111827; /* gray-900 */
}

/* Ensure Tailwind text-white class takes precedence */
.text-white {
  color: #FFFFFF !important;
}

/* Dark form styling */
input, textarea, select {
  background-color: #374151 !important; /* gray-700 */
  color: #F9FAFB !important; /* gray-50 */
  border-color: #4B5563 !important; /* gray-600 */
}

input::placeholder, textarea::placeholder {
  color: #9CA3AF !important; /* gray-400 */
}

/* Dark theme labels */
label {
  color: #F9FAFB !important; /* gray-50 */
}

/* Kaminari Pagination Styles for Dark Theme */
.pagination {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  list-style: none;
  padding: 0;
}

.pagination a, .pagination span {
  background-color: #374151; /* gray-700 */
  border: 1px solid #4B5563; /* gray-600 */
  color: #D1D5DB; /* gray-300 */
  padding: 0.5rem 0.75rem;
  margin: 0 0.125rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  text-decoration: none;
  display: block;
}

.pagination a:hover {
  background-color: #4B5563; /* gray-600 */
  border-color: #6B7280; /* gray-500 */
  color: #F9FAFB; /* gray-50 */
}

.pagination .current {
  background-color: #3B82F6 !important; /* blue-500 */
  border-color: #3B82F6 !important; /* blue-500 */
  color: white !important;
}

.pagination .gap {
  background-color: #1F2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
  color: #6B7280; /* gray-500 */
  cursor: default;
}

.pagination .prev_page.disabled,
.pagination .next_page.disabled {
  background-color: #1F2937; /* gray-800 */
  border-color: #374151; /* gray-700 */
  color: #6B7280; /* gray-500 */
  cursor: not-allowed;
}