/* 06-datum-statistik.css — Datumswahl + Kopf der Statistik-Seite. Teil der geordneten Kaskade: in index.html in Nummern-Reihenfolge geladen; Regeln NICHT zwischen Dateien verschieben, ohne die Reihenfolge zu bedenken. */
/* ─── DATE PICKER ───────────────────────────────────────────────────────── */
/* Date-Picker (Monats-/Jahreswahl) im Liquid-Glass-Look der App:
   Glas-Card wie Header/Stats-Cards, Jahreszeile wie die Wochen-Navigation
   (‹ Titel ›), Monatszellen wie das Kalender-Raster, aktueller Monat als
   Akzent-Pill in Theme-Farbe (--cell-glow-rgb) statt hartem Blau. */
.dp-box {
  max-width: 360px;
  padding: 16px 16px 14px;
  background:
    radial-gradient(circle 200px at 0% 0%, rgba(var(--cell-glow-rgb), 0.28) 0%, transparent 100%),
    radial-gradient(circle 150px at 100% 100%, rgba(var(--cell-glow-rgb), 0.14) 0%, transparent 100%),
    linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%),
    var(--card);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 26px;
  backdrop-filter: blur(calc(15px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(180%);
  -webkit-backdrop-filter: blur(calc(15px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(180%);
  box-shadow:
    0 24px 48px -20px rgba(0,0,0,0.45),
    0 4px 12px -4px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.dp-handle { background: var(--border); margin: 0 auto 14px; }
/* Jahreszeile im Muster der Wochen-Navigation: Jahr links, ‹›-Pill-Paar rechts
   (die order:2/3-Regeln von .month-btn gruppieren die Pfeile automatisch). */
.dp-year-row {
  display: flex; align-items: center;
  gap: 0;
  margin-bottom: var(--sp-4);
  padding: 0 2px;
}
.dp-year-label {
  flex: 1;
  text-align: left;
  padding-left: 6px;
  font-size: 22px;
  font-weight: var(--fw-heavy);
  color: var(--text);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.dp-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dp-month-btn {
  padding: 13px 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.dp-month-btn:active { transform: scale(0.94); background: rgba(var(--cell-glow-rgb), 0.18); }
.dp-month-btn.current {
  background:
    linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.45), rgba(var(--cell-glow-rgb), 0.22));
  border-color: rgba(var(--cell-glow-rgb), 0.55);
  color: #fff;
  font-weight: var(--fw-heavy);
  box-shadow:
    0 0 14px -2px rgba(var(--cell-glow-rgb), 0.45),
    inset 0 1px 0 rgba(255,255,255,0.20);
}
.dp-close { margin-top: 14px; }

/* ─── STATS PAGE ────────────────────────────────────────────────────────── */
#statsPage {
  display: none;
  flex-direction: column;
  /* KEIN min-height: 100vh — die Page ist als Flex-Child von #app schon korrekt
     durch flex:1 + min-height:0 (Z.122-123) eingespannt. min-height:100vh würde
     den Page-Container groß machen → äußerer Scrollbar zusätzlich zum inneren
     .stats-body-Scroll. */
  /* Reserviert vertikales Scrollen für die Stats-Body; horizontale Gesten
     gehen an unseren Swipe-Handler (Wisch → zurück zum Profil). */
  touch-action: pan-y;
}
/* .stats-header übernimmt den shared Liquid-Glass-Stil (siehe oben).
   Inhalt: hero-caption + hero-row + header-action-btn (Zurück-Pill). */