/* ==========================================================
   Проект: MOYAMOVA
   Файл: view.stats.css
   Назначение: Стили экрана статистики
   Версия: 1.0
   Обновлено: 2025-11-17
   ========================================================== */

/* Общий контейнер карточки статистики (поверх стандартной card/dicts-card) */
.stats-card {
  margin-top: 0px;
}

/* Список языков (карточки) */
.stats-lang-list {
  margin-top: 4px;
}

/* Одна карточка языка */
.stats-lang-card {
  display: none;
}

.stats-lang-card.is-active {
  display: block;
}

/* Шапка карточки (Выучено N из M / Словарей: ...) */
.stats-lang-card__header {
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.04));
  margin-bottom: 6px;
}

.stats-lang-card__title {
  font-size: 12px;
  margin-bottom: 2px;
}

.stats-lang-card__meta {
  opacity: 0.9;
}

.stats-lang-card__decks {
  font-size: 11px;
  opacity: 0.7;
}

/* Тело карточки с кругами */
.stats-lang-card__body {
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

/* Контейнер для двух наборов колец */
.stats-ring-sets {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Один набор колец (основные / другие части речи) */
.stats-ring-set {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Визуальный круг-набор */
.stats-ring-set__circle {
  position: relative;
  margin: 0 auto;
  max-width: 260px;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Внутренний контейнер для слоёв-колец */
.stats-ring-set__circle-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Подпись внутри круга (Основные / Другие части речи) */
.stats-ring-set__caption {
  position: absolute;
  max-width: 70%;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.85;
  pointer-events: none;
}

/* Один слой-кольцо (концентрический круг) */
.stats-ring-layer {
  position: absolute;
  inset: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--ring-scale, 1));
}

.stats-ring-layer__ring {
  width: 100%;
  height: 100%;
  border-radius: 999px;

  background:
    /* мягкий "блик" брендового цвета сверху */
    radial-gradient(
      circle at 30% 20%,
      rgba(53, 182, 255, 0.25),   /* бренд с прозрачностью */
      transparent 60%
    ),
    /* лёгкая тень темнее бренда снизу */
    radial-gradient(
      circle at 70% 80%,
      rgba(15, 76, 120, 0.18),
      transparent 55%
    ),
    /* сам прогресс — как был, но фон не серый, а приглушённый бренд */
    conic-gradient(
      var(--ring-color, #0ea5e9) var(--ring-angle, 0deg),
      rgba(53, 182, 255, 0.20) var(--ring-angle, 0deg)
    );

  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.55) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: light) {
  .stats-ring-layer__ring {
    background:
      /* мягкий блик сверху */
      radial-gradient(circle at 30% 20%, rgba(53, 182, 255, 0.18), transparent 60%),
      /* вместо тёмной тени снизу — лёгкий подсвет брендом */
      radial-gradient(circle at 70% 80%, rgba(53, 182, 255, 0.04), transparent 55%),
      /* прогресс: бренд → очень светлый бренд */
      conic-gradient(
        var(--ring-color, #0ea5e9) var(--ring-angle, 0deg),
        rgba(53, 182, 255, 0.06) var(--ring-angle, 0deg)
      );

    /* контур тоже не чёрный, а мягко-голубой */
    box-shadow:
      0 0 0 1px rgba(53, 182, 255, 0.22) inset,
      0 0 0 1px rgba(255, 255, 255, 0.8);
  }
}

/* Легенда под кругом (по умолчанию — 2 колонки) */
.stats-ring-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  font-size: 12px;
}

.stats-ring-legend__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.stats-ring-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ring-color, #0ea5e9);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}

.stats-ring-legend__label {
  flex: 1;
}

.stats-ring-legend__value {
  white-space: nowrap;
  opacity: 0.75;
  font-size: 11px;
}

/* Плейсхолдер "Активность и качество" снизу */
.stats-section--placeholder {
  margin-top: 16px;
  padding: 0 10px 16px;
}

.stats-subtitle {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stats-placeholder {
  font-size: 13px;
  opacity: 0.75;
}

/* Адаптация на совсем узких экранах */
@media (max-width: 360px) {
  .stats-ring-legend {
    grid-template-columns: 1fr;
  }
}

/* Верхний набор колец (Основные части речи) — легенда в одну колонку и центр */
.stats-ring-set--core .stats-ring-legend {
  grid-template-columns: 1fr;
  max-width: 260px;
  margin: 0 auto;
}

.stats-ring-set--core .stats-ring-legend__item {
  justify-content: center;
  text-align: center;
}

.stats-ring-set--core .stats-ring-legend__label {
  flex: 0 1 auto;
}

/* Блок "Активность" с круглыми точками */
.stats-section--activity {
  margin-top: 12px;
  padding: 0 10px 12px;
}

.stats-placeholder--activity {
  font-size: 12px;
  opacity: 0.7;
}

.stats-activity-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px; /* чуть ближе к дням недели, сверху будет заголовок */
}

/* Заголовок с днями недели (Пн–Вс) */
.stats-activity-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
  font-size: 10px;
  opacity: 0.65;
  text-align: center;
}

/* Одна колонка названия дня недели */
.stats-activity-weekday {
  line-height: 1;
}

/* Одна "ячейка" календаря: точка + (в будущем можно добавить подписи) */
.stats-activity-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* перенос строки между неделями */
.stats-activity-week-break {
  flex-basis: 100%;
  height: 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.45); /* тонкая линия между неделями */
  margin: 6px 0 4px;
}

/* Одна "ячейка" активности: точка + подпись дня */
.stats-activity-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Подпись даты под точкой (день месяца) */
.stats-activity-cell__date {
  font-size: 9px;
  line-height: 1;
  opacity: 0.6;
}

.stats-activity-legend {
  margin-top: 16px;                 /* чуть дальше от календаря */
  padding-top: 8px;                 /* внутренний отступ сверху */
  border-top: 1px solid rgba(148, 163, 184, 0.35); /* тонкая линия-разделитель */
  font-size: 11px;
  opacity: 0.75;
  text-align: center;               /* текст по центру */
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;               /* центрируем весь блок */
}

.stats-activity-legend__caption {
  display: block;
  margin-bottom: 4px;
}

.stats-activity-legend__scale {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;          /* и сами элементы легенды по центру */
}

.stats-activity-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stats-activity-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--stats-activity-color, #22c55e);
  opacity: 0.25;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Уровни интенсивности */
.stats-activity-dot--lvl0 {
  background: transparent;                             /* без заливки */
  opacity: 0.25;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4);      /* лёгкий контур, чтобы ячейка не "пропадала" */
}

.stats-activity-dot--lvl1 { opacity: 0.55; }
.stats-activity-dot--lvl2 { opacity: 0.8;  transform: scale(1.05); }
.stats-activity-dot--lvl3 { opacity: 1;    transform: scale(1.15); }

/* Текущий день в календаре активности */
.stats-activity-dot--today {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.9); /* бирюзовый контур вокруг точки */
}

/* Небольшой hover-эффект (для десктопа) */
@media (hover: hover) {
  .stats-activity-dot:hover {
    transform: scale(1.25);
  }
}

/* История по месяцам под календарём активности */
.stats-activity-history {
  margin-top: 18px;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,0.35); /* как легенда */
}

.stats-activity-history__title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: 0.9;
}

.stats-activity-history__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-activity-history__item {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.stats-activity-history__item:last-child {
  border-bottom: none;
}

.stats-activity-history__item:first-child {
  border-top: none;
}

.stats-activity-history__month {
  font-weight: 500;
  margin-bottom: 2px;
}

.stats-activity-history__line {
  font-size: 11px;
  opacity: 0.8;
}

/* ==========================================================
 * Дополнение: экранная разбивка статистики + индикатор страниц
 * Без изменений размеров кругов
 * ========================================================== */

/* Контейнер страниц (по умолчанию обычный поток) */
.stats-pages {
  margin-top: 0;
  flex: 1 1 auto;
}

/* Одна страница статистики: показываем только активную */
.stats-page {
  display: none;
}

.stats-page.is-active {
  display: block;
}

/* Вариант: один набор колец на странице */
.stats-ring-sets--single {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Заголовок над кругом (Основные / Другие части речи) */
.stats-ring-set__title {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: .88;
}

/* маленькие точки с большой зоной тапа как в hints */
.stats-page-dot {
  position: relative;
  width: 24px;      /* зона тапа */
  height: 24px;     /* зона тапа */
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* сама точка внутри */
.stats-page-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;       /* реальный размер точки */
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--text-muted, rgba(255,255,255,.4));
  transform: translate(-50%, -50%);
  background: transparent;
  opacity: 0.7;
}

.stats-page-dot.is-active::before {
  background: var(--accent, var(--brand, #35b6ff));
  border-color: var(--accent, var(--brand, #35b6ff));
  opacity: 1;
}

/* центрируем индикаторы страниц в статистике 
.stats-page-dots,
.stats-range-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
} */
/* центрируем индикаторы страниц в статистике:
   берём ПОСЛЕДНИЙ блок в теле карточки (там лежат точки) */
.stats-lang-card__body > div:last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
/* ========================= Конец файла: view.stats.css ========================= */