/* Species Page Pet Card Fixes - Match Component Library Mobile Card */
/* This CSS ensures consistent pet card styling ONLY on the species page */

/* ==== SPECIES PAGE IDENTIFICATION ==== */
body[data-route="/species"],
body[data-path="/species"],
.species-page {
  /* CSS custom properties for consistent sizing */
  --species-card-width: 250px;
  --species-card-height: auto;
  --species-image-width: 80px;
  --species-image-height: 100px;
  --species-card-padding: 8px;
}

/* ==== SPECIES GRID LAYOUT ==== */
.species-page .SpeciesGrid,
body[data-path="/species"] .SpeciesGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 20px !important;
  padding: 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ==== MOBILE BATTLE PET CARD FIXES ==== */
/* Target MobileBattlePetCard components ONLY on species page */
.species-page .MobileBattlePetCard,
body[data-path="/species"] .MobileBattlePetCard,
.SpeciesGrid .MobileBattlePetCard {
  width: var(--species-card-width) !important;
  max-width: var(--species-card-width) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  background-color: #0e0e0e !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.species-page .MobileBattlePetCard:hover,
body[data-path="/species"] .MobileBattlePetCard:hover,
.SpeciesGrid .MobileBattlePetCard:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ==== TOP COLOR STRIP/BORDER ==== */
.species-page .MobileBattlePetCard > div:first-child,
body[data-path="/species"] .MobileBattlePetCard > div:first-child,
.SpeciesGrid .MobileBattlePetCard > div:first-child {
  height: 4px !important;
  width: 100% !important;
  border-radius: 8px 8px 0 0 !important;
}

/* ==== CARD CONTENT LAYOUT ==== */
.species-page .MobileBattlePetCard > div:last-child,
body[data-path="/species"] .MobileBattlePetCard > div:last-child,
.SpeciesGrid .MobileBattlePetCard > div:last-child {
  display: flex !important;
  padding: var(--species-card-padding) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  flex: 1 !important;
}

/* ==== IMAGE SECTION FIXES ==== */
.species-page .MobileBattlePetCard > div:last-child > div:first-child,
body[data-path="/species"] .MobileBattlePetCard > div:last-child > div:first-child,
.SpeciesGrid .MobileBattlePetCard > div:last-child > div:first-child {
  width: var(--species-image-width) !important;
  height: var(--species-image-height) !important;
  min-height: var(--species-image-height) !important;
  max-height: var(--species-image-height) !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background-color: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* ==== PET IMAGE FIXES WITH SMART ASPECT RATIO HANDLING ==== */
.species-page .MobileBattlePetCard img,
body[data-path="/species"] .MobileBattlePetCard img,
.SpeciesGrid .MobileBattlePetCard img {
  width: 100% !important;
  height: 100% !important;
  /* Use contain by default for better fit */
  /* object-fit: contain !important; */
  object-position: center !important;
  border-radius: 6px !important;
}

/* ==== INFO SECTION FIXES ==== */
.species-page .MobileBattlePetCard > div:last-child > div:last-child,
body[data-path="/species"] .MobileBattlePetCard > div:last-child > div:last-child,
.SpeciesGrid .MobileBattlePetCard > div:last-child > div:last-child {
  width: calc(100% - var(--species-image-width) - 16px) !important;
  margin-left: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  position: relative !important;
  flex: 1 !important;
}

/* ==== HEADER ROW ADJUSTMENTS ==== */
.species-page .MobileBattlePetCard .HeaderRow,
body[data-path="/species"] .MobileBattlePetCard .HeaderRow,
.SpeciesGrid .MobileBattlePetCard .HeaderRow,
.species-page .MobileBattlePetCard div[class*="HeaderRow"],
body[data-path="/species"] .MobileBattlePetCard div[class*="HeaderRow"],
.SpeciesGrid .MobileBattlePetCard div[class*="HeaderRow"] {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 4px !important;
}

/* ==== PET NAME ADJUSTMENTS ==== */
.species-page .MobileBattlePetCard .PetName,
body[data-path="/species"] .MobileBattlePetCard .PetName,
.SpeciesGrid .MobileBattlePetCard .PetName,
.species-page .MobileBattlePetCard h2,
body[data-path="/species"] .MobileBattlePetCard h2,
.SpeciesGrid .MobileBattlePetCard h2 {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: white !important;
  font-weight: 600 !important;
}

/* ==== FIX DTANY CLASS THAT'S CAUSING LABELS TO SHIFT UP ==== */
.species-page .DTAny,
.SpeciesGrid .DTAny,
body[data-path="/species"] .DTAny {
  margin-top: 15px !important; /* Override negative margin */
  margin-bottom: 0px !important;
  padding: 0px !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* ==== ELEMENT AND SPECIES TAGS ADJUSTMENTS - POSITIONED LOWER ==== */
.species-page .MobileBattlePetCard .TagsRow,
body[data-path="/species"] .MobileBattlePetCard .TagsRow,
.SpeciesGrid .MobileBattlePetCard .TagsRow,
.species-page .MobileBattlePetCard div[class*="TagsRow"],
body[data-path="/species"] .MobileBattlePetCard div[class*="TagsRow"],
.SpeciesGrid .MobileBattlePetCard div[class*="TagsRow"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 20px 0 8px 0 !important; /* Moved down more for better positioning */
  padding: 0 !important;
  width: 100% !important;
}

/* Element type styling */
.species-page .MobileBattlePetCard .ElementType,
body[data-path="/species"] .MobileBattlePetCard .ElementType,
.SpeciesGrid .MobileBattlePetCard .ElementType,
.species-page .MobileBattlePetCard div[class*="ElementType"],
body[data-path="/species"] .MobileBattlePetCard div[class*="ElementType"],
.SpeciesGrid .MobileBattlePetCard div[class*="ElementType"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* Species label styling */
.species-page .MobileBattlePetCard .SpeciesLabel,
body[data-path="/species"] .MobileBattlePetCard .SpeciesLabel,
.SpeciesGrid .MobileBattlePetCard .SpeciesLabel,
.species-page .MobileBattlePetCard div[class*="SpeciesLabel"],
body[data-path="/species"] .MobileBattlePetCard div[class*="SpeciesLabel"],
.SpeciesGrid .MobileBattlePetCard div[class*="SpeciesLabel"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  background-color: rgb(24, 24, 27) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* ==== LEVEL BAR POSITIONING FIX ==== */
.species-page .MobileBattlePetCard .LevelBarSection,
body[data-path="/species"] .MobileBattlePetCard .LevelBarSection,
.SpeciesGrid .MobileBattlePetCard .LevelBarSection,
.species-page .MobileBattlePetCard div[class*="LevelBarSection"],
body[data-path="/species"] .MobileBattlePetCard div[class*="LevelBarSection"],
.SpeciesGrid .MobileBattlePetCard div[class*="LevelBarSection"] {
  margin-top: auto !important;
  width: 100% !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* ==== RESPONSIVE ADJUSTMENTS FOR MOBILE ==== */
@media (max-width: 768px) {
  .species-page .SpeciesGrid,
  body[data-path="/species"] .SpeciesGrid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 15px !important;
    padding: 15px !important;
  }
  
  .species-page .MobileBattlePetCard,
  body[data-path="/species"] .MobileBattlePetCard,
  .SpeciesGrid .MobileBattlePetCard {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Mobile-specific image fixes */
  .species-page .MobileBattlePetCard > div:last-child > div:first-child,
  body[data-path="/species"] .MobileBattlePetCard > div:last-child > div:first-child,
  .SpeciesGrid .MobileBattlePetCard > div:last-child > div:first-child {
    width: var(--species-image-width) !important;
    height: var(--species-image-height) !important;
    min-height: var(--species-image-height) !important;
    max-height: var(--species-image-height) !important;
  }
  
  /* Mobile image object-fit handling */
  .species-page .MobileBattlePetCard img,
  body[data-path="/species"] .MobileBattlePetCard img,
  .SpeciesGrid .MobileBattlePetCard img {
    /* object-fit: contain !important; */
    object-position: center !important;
  }
  
  /* Mobile tags positioning - also moved lower */
  .species-page .MobileBattlePetCard .TagsRow,
  body[data-path="/species"] .MobileBattlePetCard .TagsRow,
  .SpeciesGrid .MobileBattlePetCard .TagsRow,
  .species-page .MobileBattlePetCard div[class*="TagsRow"],
  body[data-path="/species"] .MobileBattlePetCard div[class*="TagsRow"],
  .SpeciesGrid .MobileBattlePetCard div[class*="TagsRow"] {
    margin: 20px 0 8px 0 !important; /* Same lower positioning on mobile */
  }
  
  /* Mobile DTAny fix */
  .species-page .DTAny,
  .SpeciesGrid .DTAny,
  body[data-path="/species"] .DTAny {
    margin-top: 15px !important; /* Same fix for mobile */
  }
}

/* ==== LOADING AND ERROR STATES ==== */
.species-page .MobileBattlePetCard .PetImagePlaceholder,
body[data-path="/species"] .MobileBattlePetCard .PetImagePlaceholder,
.SpeciesGrid .MobileBattlePetCard .PetImagePlaceholder,
.species-page .MobileBattlePetCard div[class*="PetImagePlaceholder"],
body[data-path="/species"] .MobileBattlePetCard div[class*="PetImagePlaceholder"],
.SpeciesGrid .MobileBattlePetCard div[class*="PetImagePlaceholder"] {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 1rem !important;
  background-color: rgb(24, 24, 27) !important;
  border-radius: 6px !important;
}