/* admin-metrics.css — solo per admin-metrics.html (link diretto nella pagina,
   NON @import in main.css: pagina admin rara, niente peso extra sulle pagine
   pubbliche). Riusa .analytics-* (admin-analytics.css, gia' in main.css) per
   shell/kpi/tabella; qui solo funnel + grafico SVG hand-rolled. */

.admin-metrics-page {
  background:
    radial-gradient(circle at 10% -10%, rgba(0, 217, 255, 0.14), transparent 34rem),
    radial-gradient(circle at 100% 0%, rgba(0, 230, 118, 0.10), transparent 30rem),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.metrics-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.035);
  margin-bottom: 18px;
}

.metrics-card-title {
  margin: 0 0 14px;
  font-size: 1rem;
}

/* ===== Funnel ===== */

.metrics-funnel {
  display: grid;
  gap: 4px;
}

.metrics-funnel-stage {
  display: grid;
  gap: 6px;
}

.metrics-funnel-stage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.86rem;
}

.metrics-funnel-stage-head span {
  color: var(--text-secondary);
}

.metrics-funnel-stage-head strong {
  font-size: 1rem;
}

.metrics-funnel-track {
  height: 12px;
  border-radius: var(--radius-full, 999px);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.metrics-funnel-bar {
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), rgba(0, 217, 255, 0.55));
  transition: width 0.3s ease;
}

.metrics-funnel-dropoff {
  min-height: 1.1em;
  margin: 2px 0;
  padding-left: 2px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--danger);
}

/* ===== Trend chart (SVG hand-rolled) ===== */

.metrics-chart {
  display: grid;
  gap: 12px;
}

.metrics-trend-svg {
  width: 100%;
  height: auto;
  display: block;
}

.metrics-trend-axis {
  stroke: var(--border-medium);
  stroke-width: 1;
}

.metrics-trend-axis-label {
  fill: var(--text-muted);
  font-size: 10px;
}

.metrics-trend-signups {
  stroke: var(--accent);
}

.metrics-trend-wau {
  stroke: var(--success);
}

.metrics-trend-watch {
  stroke: var(--warning);
}

.metrics-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.metrics-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.metrics-trend-legend-item strong {
  color: var(--text);
}

.metrics-trend-legend-item i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full, 999px);
  background: currentColor;
}

.metrics-trend-legend-item i.metrics-trend-signups { background: var(--accent); }
.metrics-trend-legend-item i.metrics-trend-wau { background: var(--success); }
.metrics-trend-legend-item i.metrics-trend-watch { background: var(--warning); }

@media (max-width: 680px) {
  .metrics-card {
    padding: 14px;
  }
}