/* Analytics Card (Tailwind-Style, ohne Tailwind) */
.analytics-card {
  position: relative;
  width: 320px; /* w-80 */
  border-radius: 12px; /* rounded-xl */
  background: #0b1220; /* slate-950-ish */
  padding: 16px; /* p-4 */
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  transform: translateZ(0);
  transition: transform 300ms ease, box-shadow 300ms ease;
  isolation: isolate;
}
.analytics-card--double { width: 740px; }
.analytics-card:hover {
  transform: scale(1.02);
  box-shadow: 0 22px 48px rgba(0,0,0,0.4), 0 8px 24px rgba(99,102,241,0.2); /* indigo glow */
}
.analytics-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.analytics-break { flex-basis: 100%; width: 0; height: 0; }
.analytics-container .analytics-card { margin: 0; }
.stats-main .analytics-card { margin: 24px; }

.glow-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  opacity: 0.2;
  filter: blur(6px);
  transition: opacity 300ms ease;
  z-index: -1;
}
.analytics-card:hover .glow-overlay { opacity: 0.3; }

.inner-bg {
  position: absolute;
  inset: 1px; /* inset-px */
  border-radius: 11px; /* rounded-[11px] */
  background: #0b1220;
  z-index: -1;
}

.card-content { position: relative; display: flex; flex-direction: column; }

.top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.title-wrap { display: flex; align-items: center; gap: 8px; }
.title-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.title-icon-svg { width: 16px; height: 16px; color: #fff; }
.title-text { font-size: 14px; color: #fff; font-weight: 600; margin: 0; }

.live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #34d399; background: rgba(52, 211, 153, 0.1); }
.live-dot { width: 6px; height: 6px; border-radius: 999px; background: #34d399; display: inline-block; }

.metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.metric { border-radius: 8px; background: rgba(15, 23, 42, 0.5); padding: 12px; text-align: left; }
.metric-label { margin: 0 0 6px; font-size: 12px; color: #94a3b8; font-weight: 600; }
.metric-value { margin: 0; font-size: 18px; color: #fff; font-weight: 700; }
.metric-delta { font-size: 12px; font-weight: 600; }
.metric-delta.positive { color: #34d399; }
.metric-delta.negative { color: #f87171; }
/* Immer: Zahl+% grün, Label in weiß */
.metric-delta .delta-number { color: #34d399 !important; }
.metric-delta .delta-label { color: #ffffff !important; }


/* Line/Area Chart */
.line-chart { height: 170px; width: 100%; overflow: hidden; border-radius: 8px; background: rgba(15, 23, 42, 0.5); padding: 12px; margin-bottom: 16px; }
.line-chart .chart-svg { width: 100%; height: 100%; display: block; }
.line-chart .grid line { stroke: #2a3242; stroke-width: 1; }
.line-chart .area { fill: rgba(99, 102, 241, 0.3); }
.line-chart .line { fill: none; stroke: #8b5cf6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.line-chart .dots circle { fill: #8b5cf6; }

/* Radar Chart (Netzdiagramm) */
.radar-chart { height: 360px; width: 100%; overflow: hidden; border-radius: 8px; background: rgba(15, 23, 42, 0.5); padding: 12px; margin-bottom: 16px; }
.radar-chart .radar-svg { width: 100%; height: 100%; display: block; }
.radar-chart .radar-grid circle { stroke: #2a3242; stroke-width: 1; fill: none; }
.radar-chart .radar-axes line { stroke: #2a3242; stroke-width: 1; }
.radar-chart .radar-labels text { fill: #94a3b8; font-size: 12px; font-weight: 600; dominant-baseline: middle; }
.radar-chart .radar-area { fill: rgba(99, 102, 241, 0.30); }
.radar-chart .radar-line { fill: none; stroke: #8b5cf6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.radar-chart .radar-dots circle { fill: #8b5cf6; }

/* ehem. Balken-Hilfsklassen nicht mehr benötigt; entfernt */

.bottom-row { display: flex; align-items: center; justify-content: space-between; }
.period { display: inline-flex; align-items: center; gap: 6px; }
.period-label { font-size: 12px; color: #94a3b8; font-weight: 600; }
.chevron { width: 16px; height: 16px; color: #94a3b8; }

.btn-gradient { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #fff; background-image: linear-gradient(90deg, #6366f1, #8b5cf6); transition: filter 200ms ease, transform 200ms ease, background 200ms ease; }
.btn-gradient:hover { background-image: linear-gradient(90deg, #4f46e5, #7c3aed); transform: translateY(-1px); }
.btn-icon { width: 12px; height: 12px; }

/* Coming soon badge and disabled state */
.soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1; /* slate-300 */
  background: rgba(148, 163, 184, 0.18); /* slate-400 @ ~18% */
  text-transform: lowercase;
}

.analytics-card.is-coming {
  filter: grayscale(100%);
  opacity: 0.6;
  pointer-events: none; /* not interactive */
}
.analytics-card.is-coming .glow-overlay { opacity: 0.1; }

/* Guest mode: show everything in grey with banner */
.stats-guest .analytics-container { filter: grayscale(100%); opacity: 0.7; }
.stats-guest .analytics-card:hover { transform: none; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.stats-guest .live-badge { display: none; }
.stats-main { position: relative; }
/* Yellow guest banner overlay styled like .limit-banner */
.stats-guest-banner.limit-banner {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  z-index: 6;
  width: calc(100% - 48px);
  max-width: 960px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* Summary metrics list */
.metrics-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.metrics-list .metric { display: flex; flex-direction: column; gap: 2px; background: rgba(15, 23, 42, 0.65); padding: 8px 10px; }
.metrics-list .metric-line { display: flex; align-items: baseline; gap: 8px; }
.metrics-list .metric-value { font-size: 18px; }
.metrics-list .metric-delta { font-size: 12px; margin-left: auto; }
.metrics-list .metric-label { margin-bottom: 1px; }
.analytics-card--summary .metric-label { font-size: 11px; }
.analytics-card--summary .title-icon { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.analytics-card--summary { padding: 14px; }
.analytics-card--summary .metric[data-metric="learning-days"] .metric-value,
.analytics-card--summary .metric[data-metric="learning-days"] .metric-delta { opacity: 0.5; }