/* Usage Overview Page Styles */

/* Duotone system: the stats grid is one tiled surface — 1px grout gaps, a single
   duotone edge across the top, and the grounded base under the whole block */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--theme-border);
  border: 1px solid var(--theme-border);
  border-bottom: 2px solid var(--theme-ground);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--spacing-2xl);
}

.stats-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--duotone-edge);
  z-index: 1;
}

.stat-card {
  background: var(--theme-bg);
  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);
}

.usage-subsection-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--theme-text);
  margin: var(--spacing-2xl) 0 var(--spacing-lg);
}

.usage-subsection-note {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--theme-text-muted);
  margin-left: var(--spacing-sm);
}

/* Where a figure needs a caveat to be read honestly, it carries it */
.usage-note {
  font-size: var(--font-size-sm);
  color: var(--theme-text-muted);
  margin-top: var(--spacing-md);
  max-width: 80ch;
}

.metric-value-warning { color: var(--color-warning); }
.metric-value-danger { color: var(--color-danger); }

.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)); }

/* Meters — one bar system for every proportion on the page: funnels, client
   shares and setup progress all read the same way rather than each inventing
   their own bar */
.meter-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.meter-row { display: flex; align-items: center; gap: var(--spacing-lg); }
.meter-label { width: 200px; font-size: var(--font-size-sm); color: var(--theme-text-muted); }
.meter-track { flex: 1; height: 28px; background: var(--theme-border-subtle); border-radius: var(--border-radius-sm); overflow: hidden; }
.meter-fill { height: 100%; min-width: 3px; background: var(--color-primary); display: flex; align-items: center; justify-content: flex-end; padding-right: var(--spacing-md); transition: width 0.3s ease; }
.meter-fill-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-on-primary); }
.meter-count { width: 80px; text-align: right; font-weight: var(--font-weight-semibold); }
.meter-row-off .meter-fill-value { display: none; }

/* 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; }
.cohort-table td.cohort-cell[style] { background: rgb(from var(--color-primary) r g b / var(--cohort-intensity)); }

/* 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;
  }

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