.admin-analytics-root .page-content {
  max-width: 1100px;
}

.analytics-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--section-gap-sm);
  margin-bottom: var(--section-gap);
}

.analytics-card {
  border: 1px solid var(--color-card-outline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

@supports (color: color-mix(in srgb, black, transparent)) {
  .analytics-card {
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.analytics-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--color-accent-rgb), 0.22);
}

.analytics-card-title {
  color: var(--color-text-secondary);
  font-size: var(--badge-font-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.analytics-card-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.analytics-card-sub {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap-sm);
}

.analytics-panel {
  border: 1px solid var(--color-card-outline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

@supports (color: color-mix(in srgb, black, transparent)) {
  .analytics-panel {
    background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

.analytics-panel:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--color-accent-rgb), 0.18);
}

.analytics-panel .section-title {
  margin: 0 0 var(--space-3) 0;
}

.mini-chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mini-chart-row {
  display: grid;
  grid-template-columns: 95px 1fr 64px;
  gap: 0.75rem;
  align-items: center;
}

.mini-chart-label {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-chart-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-bar {
  height: 10px;
  border-radius: 999px;
}

.mini-bar.bar-accent {
  background: rgba(var(--color-accent-rgb), 0.75);
}

.mini-bar.bar-muted {
  background: rgba(156, 163, 175, 0.6);
}

.mini-chart-values {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.mini-chart-legend {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.legend-dot.accent {
  background: rgba(var(--color-accent-rgb), 0.75);
}

.legend-dot.muted {
  background: rgba(156, 163, 175, 0.6);
}

.analytics-footnote {
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

@media (max-width: 1000px) {
  .analytics-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .mini-chart-row {
    grid-template-columns: 80px 1fr 56px;
  }
}

/* ==========  DARK THEME + AUTO ACCENT OVERRIDES ========== */

/* Mini bar accent color */
[data-theme='dark'][data-accent='auto'] .mini-bar.bar-accent {
  background: rgba(229, 231, 235, 0.75);
}

/* Legend dot accent */
[data-theme='dark'][data-accent='auto'] .legend-dot.accent {
  background: rgba(229, 231, 235, 0.75);
}