/**
 * Fix for Top Performers Headers
 * This CSS ensures the performers headers are always visible
 * and properly styled according to the trading-headers.css design
 */

/* Override the display: none from public-index.css */
.performers-header {
  display: flex !important;
  align-items: center;
  gap: 8px; /* Reduced from 12px */
  padding: 6px 12px; /* Reduced from 12px 16px */
  background: linear-gradient(135deg, rgba(20, 25, 35, 0.8) 0%, rgba(30, 35, 45, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px; /* Reduced from 8px */
  margin-bottom: 6px; /* Reduced from 12px */
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

/* Ensure the container header is also visible */
.performers-container .performers-header {
  display: flex !important;
}

/* Main trading section header should also be visible */
.trading-section-header.top-performers-header {
  display: flex !important;
}

/* Ensure proper styling for gainers section */
.gainers .performers-header {
  display: flex !important;
  color: var(--success-color, #00c853);
}

/* Ensure proper styling for losers section */
.losers .performers-header {
  display: flex !important;
  color: var(--danger-color, #ff3547);
}

/* Icon styling for visibility */
.header-icon-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 26px; /* Reduced from 32px */
  height: 26px; /* Reduced from 32px */
  border-radius: 6px; /* Reduced from 8px */
  position: relative;
}

.gainers-icon {
  background: linear-gradient(135deg, rgba(0, 200, 83, 0.15) 0%, rgba(0, 255, 163, 0.1) 100%);
  border: 1px solid rgba(0, 200, 83, 0.3);
}

.losers-icon {
  background: linear-gradient(135deg, rgba(255, 53, 71, 0.15) 0%, rgba(255, 82, 82, 0.1) 100%);
  border: 1px solid rgba(255, 53, 71, 0.3);
}

/* Text styling */
.header-text {
  display: flex !important;
  flex-direction: column;
  flex: 1;
}

.header-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px; /* Increased for better header appearance */
  font-weight: 700; /* Increased weight for header look */
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: 0.4px; /* Slightly more spacing for prominence */
}

.header-badge {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px; /* Increased to complement larger title */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6); /* Slightly more visible */
  margin-top: 1px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Icon colors - ensure both icons are visible */
.gainers-icon i {
  color: #00c853 !important;
  font-size: 12px; /* Reduced from 14px */
  text-shadow: 0 0 8px rgba(0, 200, 83, 0.4);
  display: block !important;
}

.losers-icon i {
  color: #ff3547 !important;
  font-size: 12px; /* Reduced from 14px */
  text-shadow: 0 0 8px rgba(255, 53, 71, 0.4);
  display: block !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .performers-header {
    padding: 4px 8px; /* Even more compact for mobile */
    gap: 6px;
    margin-bottom: 4px;
  }
  
  .header-icon-wrapper {
    width: 22px; /* Even smaller for mobile */
    height: 22px;
  }
  
  .header-title {
    font-size: 14px; /* Larger font for better mobile readability */
    font-weight: 700; /* Keep header weight */
  }
  
  .header-badge {
    font-size: 9px; /* Proportionally increased */
  }
  
  .gainers-icon i,
  .losers-icon i {
    font-size: 10px;
  }
}

/* Extra small screens - maintain readability while compact */
@media (max-width: 735px) {
  .performers-header {
    padding: 3px 6px;
    gap: 4px;
    margin-bottom: 3px;
  }
  
  .header-icon-wrapper {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }
  
  .header-title {
    font-size: 12px; /* Increased from 10px for better readability */
    line-height: 1;
    font-weight: 700; /* Maintain header prominence */
  }
  
  .header-badge {
    font-size: 8px; /* Proportionally increased */
    margin-top: 0;
  }
  
  .gainers-icon i,
  .losers-icon i {
    font-size: 9px;
  }
}

/* Ensure headers stay visible when content updates */
.performers-section {
  position: relative;
}

.performers-list {
  /* Ensure list doesn't overlap header */
  position: relative;
  z-index: 1;
}

/* Fix any z-index issues */
.performers-header {
  position: relative;
  z-index: 2;
}