/* Usage Overview Page Styles */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.stat-card {
  background: var(--theme-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
}

.stat-label {
  color: var(--theme-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-text);
}

.stat-subtext {
  color: var(--theme-text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

.time-filter {
  display: flex;
  gap: var(--spacing-sm);
}

.usage-section {
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-2xl);
}

.usage-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xl);
}

.metrics-row {
  display: flex;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-xl);
}

.metric {
  display: flex;
  flex-direction: column;
}

.metric-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--theme-text);
}

.metric-label {
  color: var(--theme-text-muted);
  font-size: var(--font-size-sm);
}

.chart-container {
  height: 200px;
  margin-top: var(--spacing-lg);
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Heatmap */
.heatmap-grid {
  display: grid;
  grid-template-columns: 50px repeat(12, 1fr);
  gap: 2px;
}

.heatmap-corner { grid-column: 1; }
.heatmap-hour-label { font-size: var(--font-size-xs); color: var(--theme-text-muted); text-align: center; padding: var(--spacing-xs); }
.heatmap-day-label { font-size: var(--font-size-sm); color: var(--theme-text-muted); display: flex; align-items: center; }
.heatmap-cell { aspect-ratio: 1; border-radius: 4px; min-height: 24px; cursor: default; background: var(--theme-border-subtle); }
.heatmap-cell-active { background: rgb(from var(--color-primary) r g b / var(--heatmap-intensity)); }

/* Funnel */
.funnel { display: flex; flex-direction: column; gap: var(--spacing-md); }
.funnel-stage { display: flex; align-items: center; gap: var(--spacing-lg); }
.funnel-bar-container { flex: 1; height: 32px; background: rgba(255, 255, 255, 0.05); border-radius: var(--border-radius-sm); overflow: hidden; }
.funnel-bar { height: 100%; background: linear-gradient(90deg, #4f46e5, #7c3aed); display: flex; align-items: center; justify-content: flex-end; padding-right: var(--spacing-md); transition: width 0.3s ease; }
.funnel-bar-label { color: white; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.funnel-label { width: 180px; font-size: var(--font-size-sm); color: var(--theme-text-muted); }
.funnel-count { width: 80px; text-align: right; font-weight: var(--font-weight-semibold); }

/* Cohort Table */
.cohort-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.cohort-table th, .cohort-table td { padding: var(--spacing-sm) var(--spacing-md); text-align: center; }
.cohort-table th { color: var(--theme-text-muted); font-weight: var(--font-weight-medium); }
.cohort-table td:first-child { text-align: left; color: var(--theme-text-muted); }
.cohort-cell { border-radius: 4px; }

/* Org Growth */
.org-growth-list { display: flex; flex-direction: column; gap: var(--spacing-sm); max-height: 300px; overflow-y: auto; }
.org-growth-item { display: flex; justify-content: space-between; padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--theme-border-subtle); }
.org-growth-item:last-child { border-bottom: none; }
.org-growth-name { color: var(--theme-text); }
.org-growth-meta { color: var(--theme-text-muted); font-size: var(--font-size-sm); }

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .metrics-row {
    flex-wrap: wrap;
    gap: var(--spacing-xl);
  }

  .metric {
    min-width: 120px;
  }

  .time-filter {
    flex-wrap: wrap;
  }

  .funnel-label { width: 120px; }
  .heatmap-grid { grid-template-columns: 40px repeat(12, 1fr); }
}