/* ============================================================================
   07 · ANALYTICS

   Analytics section header, the live Daily Activity block, activity heatmap,
   traffic spike rows, moderator leaderboard and the action log.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* ===== ANALYTICS SECTION HEADER ===== */
.analytics-section-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 1.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.analytics-section-header ion-icon {
  font-size: 1rem;
  color: var(--blurple);
}

.analytics-card {
  padding: 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.analytics-card:hover {
  border-color: rgba(220, 38, 38,0.25);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* ===== DAILY ACTIVITY (live) ===== */
.daily-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem;
}
.daily-card-head { display: flex; align-items: center; gap: 0.4rem; }
.daily-card-icon { font-size: 1rem; display: inline-flex; line-height: 1; }
.daily-card-label {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.daily-card-value { font-size: 1.55rem; font-weight: 800; line-height: 1; }
.daily-card-value.dm-bumped { animation: dmBump 0.5s ease; }
.dm-spark { display: block; width: 100%; height: 26px; opacity: 0.85; }
.daily-card-sub { font-size: 0.66rem; color: var(--text-muted); }
.daily-card-sub strong { color: var(--text); font-weight: 700; }

.daily-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}
.daily-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  animation: dmPulse 1.8s infinite;
}
@keyframes dmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(147,197,114,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(147,197,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(147,197,114,0); }
}
@keyframes dmBump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .daily-live-dot { animation: none; }
  .daily-card-value.dm-bumped { animation: none; }
}

.chart-header {
  margin-bottom: 1rem;
}

.chart-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.chart-sublabel {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
  line-height: 1.4;
}

/* ===== ACTIVITY HEATMAP ===== */
.heatmap-grid {
  display: grid;
  gap: 2px;
  overflow-x: auto;
}

/* ===== TRAFFIC SPIKE ROWS ===== */
.spike-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.spike-row:last-child { border-bottom: none; }

.spike-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(220, 38, 38,0.12);
  border-radius: 9999px;
  overflow: hidden;
}
.spike-bar {
  height: 100%;
  background: linear-gradient(90deg, #DC2626, #93C572);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

/* ===== MODERATOR LEADERBOARD ===== */
.mod-leaderboard-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.mod-leaderboard-row:last-child { border-bottom: none; }

.mod-rank {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-muted);
  width: 1.25rem;
  flex-shrink: 0;
  text-align: center;
  margin-top: 1px;
}

.mod-progress-bg {
  height: 4px;
  background: rgba(240,177,50,0.12);
  border-radius: 9999px;
  overflow: hidden;
}
.mod-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #F0B132, #EF4444);
  border-radius: 9999px;
  transition: width 0.4s ease;
}

.mod-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.375rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* ===== ACTION LOG (recent actions + security events) ===== */
.action-log {
  display: flex;
  flex-direction: column;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.action-log::-webkit-scrollbar { width: 4px; }
.action-log::-webkit-scrollbar-track { background: transparent; }
.action-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.action-log-row {
  display: grid;
  grid-template-columns: 100px 1fr 2fr 72px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.action-log-row:last-child { border-bottom: none; }
.action-log-row:hover { background: rgba(255,255,255,0.02); border-radius: 6px; }

.action-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  white-space: nowrap;
}

.action-log-users {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.action-log-user {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--text);
}

.action-log-reason {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-log-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .action-log-row {
    grid-template-columns: 80px 1fr 72px;
    grid-template-rows: auto auto;
  }
  .action-log-reason { grid-column: 2; grid-row: 2; }
  .action-log-time   { grid-row: 1; }
}
@media (max-width: 480px) {
  .action-log-row { grid-template-columns: 80px 1fr; }
  .action-log-reason { display: none; }
  .action-log-time   { grid-column: 2; }
}