/* frontend/styles/components/build-detail.css (Scoped) */

/* --- Main Viewer & Edge-to-Edge Layout --- */
.build-detail-modal #modal-content {
  padding: 0;
}

.build-detail-modal .bld-container {
  display: flex;
  flex-direction: column;
}

.build-detail-modal .bld-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-md);
}

/*.build-detail-modal .bld-asset-header.asset-type-ship .bld-asset-image {
  transform: translateY(-150px);
}*/

.build-detail-modal .bld-close-btn {
  font-size: 2rem;
  color: var(--text-color);
  line-height: 1;
}

/* --- Asset Slide & Overlaid Navigation Arrows --- */
.build-detail-modal .bld-asset-slide {
  position: relative;
}

.build-detail-modal .bld-asset-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.build-detail-modal .bld-nav-arrow {
  position: absolute;
  top: 356px;
  transform: translateY(-50%);
  z-index: 10;
  font-size: 4.5rem;
  color: #888;
  cursor: pointer;
  padding: 0 var(--spacing-sm);
  text-shadow: 0 0 5px #000;
}

.build-detail-modal .bld-nav-arrow.left {
  left: 0;
}

.build-detail-modal .bld-nav-arrow.right {
  right: 0;
}

.build-detail-modal .bld-nav-arrow:hover {
  color: var(--accent-color);
}

.build-detail-modal .bld-nav-arrow.disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* --- Vertical Indicator Overlay --- */
.build-detail-modal .bld-vertical-indicators {
  position: absolute;
  top: 20px;
  left: 0px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.build-detail-modal .indicator-item {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  padding: 4px;
  border: 1px solid #444;
  transition: all 0.3s ease;
  opacity: 0.7;
  backdrop-filter: blur(4px);
}

.build-detail-modal .indicator-item.active {
  background-color: var(--accent-color);
  opacity: 1;
  box-shadow: 0 0 8px var(--glow-color);
}

.build-detail-modal .indicator-image {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid #333;
}

.build-detail-modal .indicator-label {
  margin: 0 8px;
  font-size: 0.7rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000;
}

.build-detail-modal .indicator-item.active .indicator-label {
  color: #000;
  text-shadow: none;
}

/* --- Asset Header, Details, and Sections --- */
.build-detail-modal .bld-asset-header {
  display: flex;
  height: 300px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
}

.build-detail-modal .bld-asset-title {
    font-size: 1.5rem;
    color: var(--accent-color);
    text-align: center;
    font-family: var(--font-header);
    text-transform: uppercase;
    margin-top: -10px; /* Adjust to pull the title up over the image */
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 5px #000;
}

.build-detail-modal .bld-asset-image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  /* This combination replaces the buggy transform */
  object-fit: cover;
  object-position: center 80%; /* Adjust 80% to frame the image perfectly */
}

.build-detail-modal .bld-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  background-color: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.build-detail-modal .bld-details-grid h4 {
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  text-align: center;
  font-size: 0.8rem;
  color: var(--accent-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--spacing-xs);
}

.build-detail-modal .bld-left-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.build-detail-modal .bld-active-bonuses {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.build-detail-modal .bonus-item-row {
  font-size: 0.85rem;
  color: var(--text-color);
  background-color: rgba(17, 177, 36, 0.1);
  border-left: 3px solid #11b124;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.build-detail-modal .bld-active-bonuses .bonus-item-row:only-child {
    background-color: transparent;
    border-left: none;
    font-style: italic;
    color: #888;
    text-align: center;
    padding-top: var(--spacing-lg);
}

.build-detail-modal .bld-attributes .attribute-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0;
}

.build-detail-modal .attribute-item span {
  color: var(--text-color) !important;
  text-transform: uppercase;
}

/* --- MODIFIED ENHANCEMENT STYLES START --- */
.build-detail-modal .bld-enhancements {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.build-detail-modal .enhancement-slot {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

#desc-popup-overlay .enhancement-popup p.locked {
    color: #888 !important;
    opacity: 0.7 !important;
    font-style: italic !important;
}

#desc-popup-overlay .enhancement-popup p.locked a {
    color: inherit !important;
    text-decoration: none;
}

#desc-popup-overlay .enhancement-popup p.locked span {
    color: inherit !important;
}

.build-detail-modal .enhancement-slot:hover {
  background-color: rgba(40, 40, 40, 0.5);
}

.build-detail-modal .enhancement-name {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-color);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

.build-detail-modal .enhancement-body {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.build-detail-modal .enhancement-slot img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.build-detail-modal .enhancement-attributes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex-grow: 1;
}

.build-detail-modal .enhancement-attributes span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-color);
  background-color: rgba(0, 0, 0, 0.4);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  text-align: center;
}

.build-detail-modal .enhancement-slot.empty {
  justify-content: center;
  align-items: center;
  min-height: 85px; /* Match height of a filled slot */
  color: #888;
  font-style: italic;
}
/* --- MODIFIED ENHANCEMENT STYLES END --- */

/* --- Talent Tree (Pyramid Grid Layout) --- */
.build-detail-modal .bld-skill-tree {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}

.build-detail-modal .bld-skill-tree h4 {
  text-align: center;
  margin-bottom: var(--spacing-md);
  color: var(--accent-color);
  font-size: 1.1rem;
  text-transform: uppercase;
}

.build-detail-modal .skill-tree-layout.pyramid-tree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 20px;
  justify-items: center;
}

.build-detail-modal .skill-slot {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.build-detail-modal .skill-slot:first-child {
  grid-column: 1 / -1;
}

.build-detail-modal .skill-node {
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px; /* Adds padding around the content */
  gap: 4px;
}

.build-detail-modal .skill-node.locked .skill-icon {
  filter: grayscale(1);
  opacity: 0.6;
}

.build-detail-modal .skill-node:hover .skill-icon {
  border: none;
}

.skill-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.build-detail-modal .skill-node .skill-icon {
  width: 65px;
  height: 65px;
  margin: 0 auto 4px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  background-size: cover;
  background-position: center;
  margin-bottom: 0.5em;
}

.build-detail-modal .skill-node .skill-name {
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: capitalize; /* Capitalizes first letter of each word */
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2em; /* Ensures consistent height for names */
  margin-bottom: 0.5em;
  margin-top: 1em;
}

.build-detail-modal .skill-level-display {
    font-size: 0.7rem;
    background: none;
    padding: 1px 4px;
    border-radius: 3px;
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: auto; /* Pushes to the bottom of the flex container */
}

/* --- Ship Skills --- */
.build-detail-modal .ship-skill-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  align-items: center;
  justify-items: center;
}

.build-detail-modal .ship-skill-node {
  text-align: center;
  cursor: pointer;
}

.build-detail-modal .ship-skill-node .skill-icon {
  width: 60px;
  height: 60px;
  background-size: cover;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin: 0 auto 4px;
}

.build-detail-modal .ship-skill-node:hover .skill-icon {
  border-color: var(--accent-color);
}

.build-detail-modal .ship-skill-node .skill-name {
  font-size: 0.75rem;
  color: var(--text-color) !important;
}

.build-detail-modal .ship-skill-node[data-slot="1"] { grid-area: 1 / 1; }
.build-detail-modal .ship-skill-node[data-slot="2"] { grid-area: 1 / 3; }
.build-detail-modal .ship-skill-node.turret { grid-area: 2 / 2; }
.build-detail-modal .ship-skill-node[data-slot="3"] { grid-area: 3 / 1; }
.build-detail-modal .ship-skill-node[data-slot="4"] { grid-area: 3 / 3; }

/* --- Matchups & Notes Section --- */
.build-detail-modal .bld-matchups-section,
.build-detail-modal .bld-notes-section {
  background-color: rgba(0, 0, 0, 0.6);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.build-detail-modal .matchup-toggle-container {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.build-detail-modal .matchup-toggle-btn {
  flex: 1;
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-header);
  border: 2px solid transparent;
}

.build-detail-modal .matchup-toggle-btn[data-type="strong"] {
  background-color: rgba(17, 177, 36, 0.2);
  color: #11b124;
}

.build-detail-modal .matchup-toggle-btn[data-type="weak"] {
  background-color: rgba(197, 72, 72, 0.2);
  color: #c54848;
}

.build-detail-modal .matchup-toggle-btn.active[data-type="strong"] {
  border-color: #11b124;
}

.build-detail-modal .matchup-toggle-btn.active[data-type="weak"] {
  border-color: #c54848;
}

.build-detail-modal .bld-matchups-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.build-detail-modal .bld-matchup-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.build-detail-modal .bld-matchup-card .item-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xs);
  font-size: 0.7rem;
}

.build-detail-modal .bld-matchup-card .item-name img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.build-detail-modal .bld-notes-section h4 {
  margin-bottom: var(--spacing-xs);
  color: var(--accent-color);
}

.build-detail-modal .bld-notes-section p {
  font-size: 0.9rem;
  color: var(--text-color);
  margin-bottom: 0;
}

/* --- Popups --- */
.build-detail-modal .enhancement-popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
}

.build-detail-modal .enhancement-popup img {
  width: 64px;
  height: 64px;
}

.build-detail-modal .enhancement-popup h4 {
  color: var(--accent-color);
}

.build-detail-modal .enhancement-popup p {
  font-size: 0.9rem;
}

/* --- Popups & Simple Popup Modal --- */
.enhancement-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
}
.enhancement-popup img {
    width: 100%;
    height: 100%;
}
.enhancement-popup h4 {
    color: var(--accent-color);
}
.enhancement-popup p {
    font-size: 0.9rem;
}

.simple-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000; /* Ensure it's above the main modal's z-index */
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.simple-popup-content {
  position: fixed;
  padding: var(--spacing-lg);
  max-width: 360px;
}

.simple-popup-close {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 2rem;
  color: var(--text-color);
  background: none;
  border: none;
  cursor: pointer;
}

/* --- Carousel Fade Transition --- */
.build-detail-modal .bld-asset-content {
  animation: fadeIn 0.2s ease-in;
}

.build-detail-modal .bld-asset-content.is-fading-out {
  animation: fadeOut 0.2s ease-out forwards;
}

/* --- Matchup Carousel Styles (from Build Creator) --- */
.build-detail-modal .matchup-carousel-container.hidden {
  display: none;
}

.build-detail-modal .no-matchups {
  text-align: center;
  font-style: italic;
  color: #888;
  padding: var(--spacing-lg) 0;
}

.build-detail-modal .matchup-scroller {
  position: relative;
  width: 100%;
  padding: 0;
}

.build-detail-modal .carousel-viewport {
  width: 100%;
  overflow: hidden;
}

.build-detail-modal .build-carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  cursor: grab;
}

.build-detail-modal .build-carousel-track:active {
  cursor: grabbing;
}

.build-detail-modal .build-carousel-item {
  flex: 0 0 100%;
  min-width: 100%;
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  height: auto;
}

.build-detail-modal .matchup-top-row {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

.build-detail-modal .matchup-top-row .matchup-item-wrapper {
  min-height: 140px; /* Ensures the top row items have enough vertical space */
}

.build-detail-modal .matchup-bottom-row {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  align-items: flex-start; /* Prevents items from stretching vertically */
}

.build-detail-modal .build-carousel-item .custom-selector {
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid #444;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs);
  gap: var(--spacing-xs);
  position: relative;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

.build-detail-modal .matchup-bottom-row .custom-selector {
  flex: 1;
}

.build-detail-modal .custom-selector img {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  object-fit: cover;
}

.build-detail-modal .custom-selector span:not(.placeholder) {
  font-size: 0.7rem;
  color: var(--text-color);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-detail-modal .scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #888;
  font-size: 4rem;
  cursor: pointer;
  background: none;
  border: none;
}

.build-detail-modal .scroll-arrow.left {
  left: -20px;
}

.build-detail-modal .scroll-arrow.right {
  right: -20px;
}

.build-detail-modal .scroll-arrow:not(.disabled):hover {
  color: var(--accent-color);
}

.build-detail-modal .scroll-arrow.disabled {
  opacity: 0.2;
  pointer-events: none;
}

.build-detail-modal .carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: var(--spacing-sm);
  height: 20px;
}

.build-detail-modal .indicator-dot {
  width: 8px;
  height: 8px;
  background-color: #555;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.build-detail-modal .indicator-dot.active {
  background-color: var(--accent-color);
  transform: scale(1.4);
}

/* Keyframes must remain global, they cannot be scoped */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* --- ADDED: Specific Matchup Carousel Item Styling --- */
/* --- Matchup Carousel Item Styling (Refactored) --- */
.build-detail-modal .matchup-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xs);
  flex: 1;
}

.build-detail-modal .matchup-top-row .custom-selector[data-type="ship"] .selector-bg-image {
  transform: scale(1) translateY(0px);
}

.build-detail-modal .custom-selector[data-type="lead"] .selector-bg-image,
.build-detail-modal .custom-selector[data-type="deputy"] .selector-bg-image {
 transform: translateY(0px);
}

.build-detail-modal .matchup-item-wrapper .item-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #ccc;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* This hides the old <img> tag structure */
.build-detail-modal .build-carousel-item .custom-selector img {
  display: none;
}

/* Base style for the new background image container */
.build-detail-modal .build-carousel-item .custom-selector .selector-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

/* Remove the old text positioning rule */
.build-detail-modal .build-carousel-item .custom-selector .item-name {
  display: none;
}

/* Zoom and pan styles for Ship, Lead, & Deputy images */
.build-detail-modal .custom-selector[data-type="ship"] .selector-bg-image {
  background-size: 100%;
}

.build-detail-modal .custom-selector[data-type="lead"] .selector-bg-image,
.build-detail-modal .custom-selector[data-type="deputy"] .selector-bg-image {
  background-size: 100%;
  background-position: 50% 18%; /* Pan up to focus on the portrait */
}

/* Round containers and icon styles for Agent & Formation */
.build-detail-modal .matchup-bottom-row .custom-selector[data-type="agent"],
.build-detail-modal .matchup-bottom-row .custom-selector[data-type="formation"] {
  border-radius: 50%;
  height: 80px;
  width: 80px; /* Ensure it's a circle */
  flex-basis: 80px;
  flex-grow: 0;
}

.build-detail-modal .custom-selector[data-type="agent"] .selector-bg-image,
.build-detail-modal .custom-selector[data-type="formation"] .selector-bg-image {
  background-size: 100%;
  background-repeat: no-repeat;
}
/* --- Share Button Styling --- */

/* Default state for the share button */
.build-detail-modal .indicator-item[data-action="share-build"] {
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    opacity: 0.8;
}

/* Hover and active (click) states */
.build-detail-modal .indicator-item[data-action="share-build"]:hover,
.build-detail-modal .indicator-item[data-action="share-build"]:active {
    background-color: var(--accent-color); /* Changes to accent orange */
    opacity: 1;
    color: #111; /* Dark text for contrast on the orange background */
}

/* Make the SVG icon dark on hover as well */
.build-detail-modal .indicator-item[data-action="share-build"]:hover svg,
.build-detail-modal .indicator-item[data-action="share-build"]:active svg {
    fill: #111 !important;
}


/* ---
  SHARE BUTTON OVERRIDE
--- */

/* 1. Default state for the share button */
.build-detail-modal .indicator-item[data-action="share-build"] {
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    opacity: 0.8;
}

/* 2. Hover and active (click) states for the button background */
.build-detail-modal .indicator-item[data-action="share-build"]:hover,
.build-detail-modal .indicator-item[data-action="share-build"]:active {
    background-color: var(--accent-color);
    opacity: 1;
    box-shadow: 0 0 8px var(--glow-color);
}

/* 3. This rule makes ONLY the share button's label and icon turn black on hover/active */
.build-detail-modal .indicator-item[data-action="share-build"]:hover .indicator-label,
.build-detail-modal .indicator-item[data-action="share-build"]:active .indicator-label,
.build-detail-modal .indicator-item[data-action="share-build"]:hover svg,
.build-detail-modal .indicator-item[data-action="share-build"]:active svg {
    color: #111;
    fill: #111;
    text-shadow: none;
}

/* --- Enhancement Attribute Display in Detail View --- */
.build-detail-modal .enhancement-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    gap: var(--spacing-xs);
}

.build-detail-modal .enhancement-attributes {
    display: flex;
    gap: 4px;
}

.build-detail-modal .enhancement-attributes span {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--primary-bg);
    background-color: var(--text-color);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.build-detail-modal .bld-asset-slide .promotion-stars-container {
  margin: 0;
}