@import 'tailwindcss/theme.css';
@import 'tailwindcss/preflight.css';
@import 'tailwindcss/utilities.css';
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 240, 240, 240;
  --nav-z-index: 9999;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
  position: relative;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Remove default focus outline when focus-visible is available */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Prevent images from becoming too large */
img {
  max-width: 100%;
  height: auto;
}

/* Image container constraints */
.image-container img {
  object-fit: contain !important;
  max-height: 85% !important;
}

.card {
  @apply bg-white dark:bg-slate-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-4;
}

.btn {
  @apply px-4 py-2 rounded-md font-medium transition-colors;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-300;
}

/* Responsive image constraints */
.responsive-image {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Skill icon containers */
.skill-icon {
  width: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
}

.skill-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 4px !important;
}

/* Custom hover effects */
.character-card-container {
  position: relative;
  overflow: hidden;
}

.character-card-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(59, 130, 246, 0.05); /* Very light blue */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.character-card-container:hover::after {
  opacity: 1;
}

/* Navigation bar styles */
.navigation-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: var(--nav-z-index) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Add smooth scrolling to the whole page */
html {
  scroll-behavior: smooth;
}

/* ===== DISPLAY OPTIMIZATIONS ===== */

.auto-fit-grid {
  /* CSS containment for better performance */
  contain: layout style paint;
  /* Optimize for transform animations */
  will-change: transform;
  /* Smooth scrolling */
  scroll-behavior: smooth;
  /* Prevent layout thrashing during scroll */
  overscroll-behavior: contain;
}

/* Character Card Performance Optimizations */
.character-card {
  /* CSS containment for individual cards */
  contain: layout style;
  /* Prevent layout thrashing */
  backface-visibility: hidden;
}

/* Only optimize when actually hovering/interacting */
.character-card:hover {
  will-change: transform, box-shadow;
}

.character-card:not(:hover) {
  will-change: auto;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  .auto-fit-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    /* Enhanced mobile scrolling */
    overscroll-behavior: contain;
    /* Reduce repaints during scroll without strict containment */
    contain: layout style paint;
  }

  .character-card {
    /* Optimize mobile touch interactions */
    touch-action: manipulation;
    /* Reduce mobile hover effects */
    will-change: auto;
  }

  /* Disable hover effects on mobile to improve performance */
  .character-card:hover {
    transform: none;
  }

  /* Re-enable transform only for active/focus states on mobile */
  .character-card:active,
  .character-card:focus {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Grid container optimizations */
.grid-container {
  /* Optimize grid rendering */
  contain: layout style;
  /* Smooth grid animations */
  will-change: contents;
}

/* Filter section performance */
.filter-section {
  /* Contain filter interactions */
  contain: layout style;
  /* Sticky positioning optimization */
  will-change: transform;
}

/* Button performance optimizations */
.filter-button,
.character-card button {
  /* Optimize button interactions */
  contain: layout style paint;
}

/* Only optimize buttons when hovering */
.filter-button:hover,
.character-card button:hover {
  will-change: background-color, color;
}

.filter-button:not(:hover),
.character-card button:not(:hover) {
  will-change: auto;
}

/* Styles for content to account for fixed navbar */
.content-container {
  padding-top: 70px !important; /* Account for navbar height */
  margin-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* When offline banner is visible, add extra padding */
body.offline-banner-visible .content-container {
  padding-top: 110px !important; /* navbar (70px) + offline banner (40px) */
}

/* Faction button styles */
/* Base styles for faction buttons */
button.faction-button {
  position: relative;
  overflow: visible;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* Hover styles for faction buttons */
button.faction-button:hover {
  background-color: #2563eb !important; /* Blue background on hover */
  color: white !important; /* White text on hover */
}

/* Ensure all child elements also change color on hover */
button.faction-button:hover span,
button.faction-button:hover div {
  color: white !important;
}

/* Add a subtle shadow effect on hover */
button.faction-button:hover {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Tooltip styles */
.faction-button .tooltip {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s,
    transform 0.3s;
  transition-delay: 0s;
}

.faction-button:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transition-delay: 1000ms; /* 1 second delay before showing tooltip */
}

.tooltip {
  position: absolute;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition:
    opacity 0.3s,
    visibility 0.3s,
    transform 0.3s;
  transition-delay: 0ms;
  transform: translate(-50%, calc(100% + 10px));
}

.tooltip::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 4px 4px 4px;
  border-style: solid;
  border-color: transparent transparent rgba(75, 85, 99, 0.7) transparent;
}

/* Offline indicator styles */
.offline-banner {
  top: 60px; /* Position below navigation bar */
}

body.offline-banner-visible main {
  padding-top: 5.5rem; /* Account for nav bar (60px) + offline banner (2.5rem) */
}

/* Fix for Next.js error overlay CSS property ordering */
[data-nextjs-call-stack-frame] {
  display: block !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  border-radius: var(--rounded-lg) !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Fix for development tools CSS property ordering and Safari support */
.dev-tools-indicator-item {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Global override for any user-select properties missing vendor prefixes */
*[style*='user-select'] {
  -webkit-user-select: inherit !important;
  -moz-user-select: inherit !important;
  -ms-user-select: inherit !important;
  user-select: inherit !important;
}

/* Custom loading animations */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes typing {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Enhanced skeleton loading animation */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
}

.dark .skeleton-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Staggered animation delays for grid items */
.animate-fadeInUp {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-slideInLeft {
  animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slideInRight {
  animation: slideInRight 0.6s ease-out forwards;
}

/* Staggered delays for grid items */
.grid-item-1 {
  animation-delay: 0.1s;
}
.grid-item-2 {
  animation-delay: 0.2s;
}
.grid-item-3 {
  animation-delay: 0.3s;
}
.grid-item-4 {
  animation-delay: 0.4s;
}
.grid-item-5 {
  animation-delay: 0.5s;
}
.grid-item-6 {
  animation-delay: 0.6s;
}
.grid-item-7 {
  animation-delay: 0.7s;
}
.grid-item-8 {
  animation-delay: 0.8s;
}
