@use '../globals' as *;

/**
 * Analytics Page Styles
 *
 * @package MultilingualPressZone
 * @since 1.0.0
 */

.ipz-page-header--analytics {
  align-items: flex-start;
}

.ipz-analytics-notices {
  margin-bottom: 16px;
}

.ipz-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.ipz-analytics-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.ipz-analytics-chart {
  position: relative;
  height: 260px;
}

.ipz-analytics-chart canvas {
  width: 100%;
  height: 100%;
}

.ipz-analytics-table {
  width: 100%;
}

.ipz-analytics-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .ipz-analytics-insights {
    grid-template-columns: 1fr;
  }
}

.ipz-analytics-insight {
  background: $presszone-international-surface-2;
  border: 1px solid $presszone-international-border;
  border-radius: $presszone-international-radius;
  padding: 12px;

}

.ipz-analytics-insight--full {
  grid-column: 1 / -1;
}

.ipz-analytics-insight__label {
  font-size: 12px;
  font-weight: 600;
  color: $presszone-international-text-muted;
  margin-bottom: 6px;

}

.ipz-analytics-insight__value {
  font-size: 18px;
  font-weight: 700;
  color: $presszone-international-text;

}

.ipz-analytics-insight-list {
  margin: 0;
  padding-left: 18px;
}

.ipz-analytics-insight-list__name {
  font-weight: 600;
}

.ipz-analytics-insight-list__meta {
  color: $presszone-international-text-muted;

}

.ipz-analytics-muted {
  margin: 0;
  color: $presszone-international-text-muted;

}

// Notices are shared in admin/src/styles/_components.scss

.ipz-analytics-region {
  min-height: 260px;
}

.ipz-analytics-region--predictions,
.ipz-analytics-region--performance {
  min-height: 0;
}

.ipz-analytics-unavailable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
}

.ipz-analytics-insights-skeleton {
  display: grid;
  gap: 12px;
}