/* Aktivitäts-Heatmap und Streaks */

/* ---------- Activity Heatmap & Streaks ---------- */

.heatmap-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 34px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.heatmap-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.heatmap-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.streak-badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.streak-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.streak-badge-highlight {
  border-color: rgba(245, 197, 24, 0.4);
  background: rgba(245, 197, 24, 0.08);
}
.streak-badge-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.streak-badge-lbl {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
}

.heatmap-scroll-wrap {
  overflow-x: auto;
  padding-bottom: 6px;
  width: 100%;
}

.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(11px, 1fr);
  gap: 4px;
  width: 100%;
  min-width: 650px;
}

.heatmap-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 11px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.15s ease, outline 0.15s ease;
  cursor: pointer;
}
.heatmap-cell:hover {
  transform: scale(1.35);
  outline: 1.5px solid var(--accent);
  z-index: 5;
}

/* Stufen (Grün/Gold) */
.heatmap-cell[data-level="1"] { background: #1e4620; }
.heatmap-cell[data-level="2"] { background: #2e7d32; }
.heatmap-cell[data-level="3"] { background: #4caf50; }
.heatmap-cell[data-level="4"] { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }

.heatmap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-light);
  font-size: 12px;
  color: var(--text-dim);
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 5px;
}
.heatmap-legend-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ---------- Heatmap Week Detail Modal ---------- */

.week-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.week-detail-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 197, 24, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.week-day-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.week-day-card.has-activity {
  border-color: rgba(76, 175, 80, 0.4);
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.08) 0%, var(--bg-card) 100%);
}

.week-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.week-day-count-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
}
.week-day-card.has-activity .week-day-count-badge {
  background: var(--watched);
  color: #fff;
  font-weight: 800;
}

.week-day-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.week-watched-entry {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}
.week-watched-entry span.entry-type {
  font-size: 11px;
}
.week-watched-entry span.entry-name {
  font-weight: 600;
  color: var(--text);
}
.week-watched-entry span.entry-ep {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.week-empty-text {
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
}