/* Trade Components - Portfolio, Analysis, Missions, Leaderboard */
/* BroJack Agent #7 - October 2025 */
/* Styled to match Calls/Games components */

/* ===== ANIMATIONS ===== */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(85, 93, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(85, 93, 255, 0);
  }
}

/* =====================================================
   TRADE COMPONENT CONTAINERS
   ===================================================== */

.portfolio-container,
.analysis-container,
.missions-container,
.leaderboard-container {
  position: relative; /* Needed for Coming Soon overlay */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 40px 0;
}

/* =====================================================
   TRADE COMPONENT GRIDS (match games-grid)
   ===================================================== */

.portfolio-grid,
.analysis-grid,
.missions-grid,
.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin: 0;
  background: rgba(28, 35, 56, 0.4); /* Same as games/calls */
  border-radius: 32px;
  padding: 40px;
}

/* =====================================================
   TRADE CARDS (match games-card/calls-card styling)
   ===================================================== */

.portfolio-card,
.analysis-card,
.missions-card,
.leaderboard-card {
  background: linear-gradient(311.13deg, #00091E 22.82%, #303365 88.03%); /* Same gradient as games/calls */
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #FFFFFF;
  /* Removed transition - no card hover effects needed */
  animation: fade-in-up 0.5s ease-out;
}

/* Removed card hover glow - no need to highlight hovered cards */

/* Card headers */
.portfolio-card .card-header,
.analysis-card .card-header,
.missions-card .card-header,
.leaderboard-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.portfolio-card .card-header h3,
.analysis-card .card-header h3,
.missions-card .card-header h3,
.leaderboard-card .card-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
}

/* Stat rows */
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row span {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.stat-row strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

/* Portfolio-specific */
.balance-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
}

.balance-amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: #FFFFFF;
}

.balance-change {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.balance-change.positive {
  color: #7BFFBF;
}

.balance-change.negative {
  color: #FF7B7B;
}

.holdings-list,
.trending-list,
.mission-list,
.rankings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.holding-item,
.token-item,
.mission-item,
.ranking-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.holding-item:hover,
.token-item:hover,
.mission-item:hover,
.ranking-item:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

/* Leaderboard ranks */
.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rank-number {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  min-width: 40px;
}

.ranking-item.rank-1 .rank-number {
  color: #FFD700;
  animation: trophy-glow 2s ease-in-out infinite;
}

.ranking-item.rank-2 .rank-number {
  color: #C0C0C0;
}

.ranking-item.rank-3 .rank-number {
  color: #CD7F32;
}

.trader-name {
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.trader-profit {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #7BFFBF;
}

/* Buttons in cards */
.btn-card-action {
  padding: 6px 12px;
  background: rgba(85, 93, 255, 0.2);
  border: 1px solid rgba(85, 93, 255, 0.3);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-card-action:hover {
  background: rgba(85, 93, 255, 0.3);
  border-color: rgba(85, 93, 255, 0.5);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .portfolio-container,
  .analysis-container,
  .missions-container,
  .leaderboard-container {
    padding: 24px 0;
  }
  
  .portfolio-grid,
  .analysis-grid,
  .missions-grid,
  .leaderboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px;
  }
  
  .balance-amount {
    font-size: 28px;
  }
}