/* REDLINE INDEX Dashboard Mobile Optimization */

/* Dashboard container */
.dashboard-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto;
  padding: 1.5rem;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Desktop styles */
.career-index-chart-container {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

.career-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  .career-charts-grid {
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  }
}

@media (max-width: 768px) {
  /* Dashboard container */
  .dashboard-container {
    padding: 1rem !important;
  }

  /* Career Index Card - stack vertically */
  .career-index-card {
    padding: 1.5rem !important;
  }

  .career-index-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .career-index-grid > div:nth-child(2) {
    display: none !important; /* Hide vertical divider on mobile */
  }

  /* Reduce font sizes for mobile */
  .career-index-grid h3 {
    font-size: 1.8rem !important;
  }

  .career-index-grid .latest-session-score {
    font-size: 2rem !important;
  }

  /* Performance Curve - responsive */
  .performance-curve-container {
    padding: 1rem !important;
  }

  .performance-curve-container h3 {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .performance-curve-container svg {
    height: 300px !important;
  }

  /* Career Index Chart - responsive */
  .career-index-chart-container {
    padding: 1rem !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .career-index-chart-container h3 {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .career-index-chart-container svg {
    height: 300px !important;
    max-width: 100% !important;
  }

  /* Career charts grid - stack vertically on mobile */
  .career-charts-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Session History Table - horizontal scroll */
  .session-history-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .session-history-table {
    min-width: 800px;
  }

  /* Leaderboard - horizontal scroll */
  .leaderboard-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .leaderboard-table {
    min-width: 600px;
  }
}

@media (max-width: 576px) {
  /* Extra small screens */
  .dashboard-container {
    padding: 0.75rem !important;
  }

  .career-index-card {
    padding: 1rem !important;
  }

  .performance-curve-container svg,
  .career-index-chart-container svg {
    height: 250px !important;
  }
}

/* Mobile: Comprehensive Dashboard optimization */
@media (max-width: 768px) {
  /* Reduce chart titles */
  .career-chart-title {
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Stats labels - balanced size */
  .career-stats-label {
    font-size: 0.7rem !important;
    margin-bottom: 0.35rem !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
  }
  
  /* Stats numbers - larger and more readable */
  .career-stats-number {
    font-size: 1.5rem !important;
    text-align: center !important;
  }
  
  /* Center and optimize gap between stats items */
  .career-index-chart-container > div:last-child {
    gap: 1rem !important;
    justify-content: center !important;
  }
  
  /* Reduce container padding */
  .career-index-chart-container {
    padding: 1rem !important;
  }
  
  /* Reduce dashboard container padding */
  .dashboard-container {
    padding: 1rem !important;
  }
}


/* Performance Curve Mobile Typography */
@media (max-width: 768px) {
  .performance-curve-title {
    font-size: 0.95rem !important;
  }
  
  .performance-curve-label {
    font-size: 0.7rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .performance-curve-number {
    font-size: 2rem !important;
  }
  
  /* Reduce SVG text sizes for mobile */
  .performance-curve-container svg text {
    font-size: 14px !important;
  }
  
  /* Specifically target score labels (the large numbers above points) - updated for new base size 28px */
  .performance-curve-container svg text[font-size="28"] {
    font-size: 20px !important;
  }
  
  /* Category labels below chart - updated for new base size 20px */
  .performance-curve-container svg text[font-size="20"] {
    font-size: 14px !important;
  }
  
  /* Y-axis labels - updated for new base size 18px */
  .performance-curve-container svg text[font-size="18"] {
    font-size: 13px !important;
  }
}


/* Live Event Banner Mobile Typography */
@media (max-width: 768px) {
  .live-event-banner {
    padding: 1rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  
  .live-event-badge {
    font-size: 0.65rem !important;
  }
  
  .live-event-title {
    font-size: 1.1rem !important;
  }
  
  .live-event-details {
    font-size: 0.75rem !important;
  }
  
  .live-event-button {
    font-size: 0.75rem !important;
    padding: 0.6rem 1.2rem !important;
    width: 100%;
    text-align: center;
  }
}

/* Event Card Mobile Typography */
@media (max-width: 768px) {
  .upcoming-events-title {
    font-size: 0.95rem !important;
  }
  
  .event-card-title {
    font-size: 0.9rem !important;
  }
  
  .event-card-details {
    font-size: 0.75rem !important;
  }
  
  .event-card-button {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
  }
}