frontend/src/pages/AnalyticsPage/AnalyticsPage.module.css

.tabSelector {
  display: flex;
  justify-content: center;
  margin: var(--go-ui-spacing-xl) 0;
}

.summaryStats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--go-ui-spacing-lg);
  margin-bottom: var(--go-ui-spacing-lg);
}

.progressSection {
  margin-top: var(--go-ui-spacing-lg);
  padding-top: var(--go-ui-spacing-lg);
  border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
}

.progressLabel {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--go-ui-spacing-sm);
  color: var(--go-ui-color-text);
  font-weight: var(--go-ui-font-weight-medium);
}

.chartGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--go-ui-spacing-xl);
}

.chartSection {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--go-ui-spacing-lg);
}

.chartContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background-color: var(--go-ui-color-gray-10);
  border-radius: var(--go-ui-border-radius-lg);
  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
  padding: var(--go-ui-spacing-lg);
}

.tableContainer {
  background-color: var(--go-ui-color-white);
  border-radius: var(--go-ui-border-radius-lg);
  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
  overflow: hidden;
  box-shadow: var(--go-ui-box-shadow-sm);
}

.modelPerformance {
  background-color: var(--go-ui-color-white);
  border-radius: var(--go-ui-border-radius-lg);
  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
  overflow: hidden;
  box-shadow: var(--go-ui-box-shadow-sm);
}

.loadingContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--go-ui-color-gray-60);
  font-size: var(--go-ui-font-size-lg);
  font-weight: var(--go-ui-font-weight-medium);
}

.errorContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--go-ui-color-negative);
  font-size: var(--go-ui-font-size-lg);
  font-weight: var(--go-ui-font-weight-medium);
}



/* Responsive adjustments */
@media (min-width: 1024px) {
  .chartSection {
    grid-template-columns: 1fr 1fr;
  }
}

.userInteractionCards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--go-ui-spacing-lg);
}

.userInteractionCard {
  background-color: var(--go-ui-color-white);
  border-radius: var(--go-ui-border-radius-lg);
  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
  padding: var(--go-ui-spacing-xl);
  text-align: center;
  box-shadow: var(--go-ui-box-shadow-sm);
  transition: box-shadow 0.2s ease-in-out;
}

.userInteractionCard:hover {
  box-shadow: var(--go-ui-box-shadow-md);
}

.userInteractionCardValue {
  font-size: var(--go-ui-font-size-2xl);
  font-weight: var(--go-ui-font-weight-bold);
  color: var(--go-ui-color-text);
  margin-bottom: var(--go-ui-spacing-sm);
}

.userInteractionCardLabel {
  font-size: var(--go-ui-font-size-sm);
  color: var(--go-ui-color-text-secondary);
  margin-bottom: var(--go-ui-spacing-md);
  font-weight: var(--go-ui-font-weight-medium);
}

.userInteractionCardButton {
  width: 100%;
}

.userInteractionCard .chartContainer {
  min-height: 200px;
  background-color: transparent;
  border: none;
  padding: var(--go-ui-spacing-md);
  margin-bottom: var(--go-ui-spacing-lg);
}

/* Make Types Distribution chart 10% wider on crisis maps */
.userInteractionCard:nth-child(3) .chartContainer {
  width: 110%;
  margin-left: -5%;
}

.summaryStatsCards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--go-ui-spacing-lg);
  margin-bottom: var(--go-ui-spacing-lg);
}

.summaryStatsCard {
  background-color: var(--go-ui-color-white);
  border-radius: var(--go-ui-border-radius-lg);
  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
  padding: var(--go-ui-spacing-xl);
  text-align: center;
  box-shadow: var(--go-ui-box-shadow-sm);
  transition: box-shadow 0.2s ease-in-out;
}

.summaryStatsCard:hover {
  box-shadow: var(--go-ui-box-shadow-md);
}

.summaryStatsCardValue {
  font-size: var(--go-ui-font-size-2xl);
  font-weight: var(--go-ui-font-weight-bold);
  color: var(--go-ui-color-text);
  margin-bottom: var(--go-ui-spacing-sm);
}

.summaryStatsCardLabel {
  font-size: var(--go-ui-font-size-sm);
  color: var(--go-ui-color-text-secondary);
}

@media (min-width: 768px) {
  .userInteractionCards {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .summaryStatsCards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .summaryStats {
    grid-template-columns: 1fr;
    gap: var(--go-ui-spacing-md);
  }
  
  .chartContainer {
    min-height: 250px;
    padding: var(--go-ui-spacing-md);
  }
  
  .tabSelector {
    margin: var(--go-ui-spacing-lg) 0;
  }
}