/* ==========================================================================
   LogWa — Site ölçeğinde grafikler
   --------------------------------------------------------------------------
   Telefon mockup'ının içindeki grafikler `device.css`te ve uygulamanın
   375px tabanında sabit ölçülü. Buradakiler SAYFA ölçeğinde: kapsayıcıya
   göre esner, masaüstünde büyür.

   Renkler, gradient yönleri ve kılavuz çizgisi opaklığı uygulamanın
   `ChartTheme`iyle birebir aynı. Değişen tek şey boyut.

   Sınıf öneki `viz-`: `chart-` öneki animations.css'teki animasyon
   kancalarına ait (.chart-bar / .chart-line / .chart-ring). İkisini
   ayırmak, bir öğenin hangi sınıfının görünümü hangisinin hareketi
   taşıdığını belirsiz bırakmıyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Yerleşim
   -------------------------------------------------------------------------- */

.viz-grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1fr;
}

/* Çizgi grafik donut'tan geniş: 7 nokta ve gün etiketleri nefes almalı */
@media (min-width: 900px) {
  .viz-grid {
    grid-template-columns: 1.45fr 1fr;
  }
}

.viz-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.viz-head__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --------------------------------------------------------------------------
   ÇUBUK GRAFİK (saatlik)
   -------------------------------------------------------------------------- */

.viz-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.4vw, 5px);
  height: clamp(120px, 16vw, 190px);
}

.viz-bar {
  flex: 1;
  min-height: 4px;
  height: var(--bar-height, 4px);
  /* Yalnız üst köşeler yuvarlak — uygulamadaki kural */
  border-radius: 4px 4px 0 0;
  background: var(--g-chart-bar);
}

.viz-bar[data-empty="true"] {
  background: rgba(31, 44, 52, 0.75);
}

.viz-bar--peak {
  background: linear-gradient(
    to top,
    var(--c-chart-teal) 0%,
    var(--c-chart-mint) 60%,
    var(--c-primary) 100%
  );
}

/*
 * Saat etiketleri. Çubuklarla aynı flex düzeni: her etiket kendi
 * çubuğunun altında hizalı kalır. 24 etiket dar ekranda okunmuyor,
 * bu yüzden tek saatler gizlenir (aşağıdaki media query).
 */
.viz-axis {
  display: flex;
  gap: clamp(2px, 0.4vw, 5px);
  margin-top: var(--sp-sm);
}

.viz-axis span {
  flex: 1;
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.viz-axis span[data-active="true"] {
  color: var(--c-primary);
  font-weight: var(--fw-extrabold);
}

/* Dar ekranda her üç saatten biri kalır */
@media (max-width: 860px) {
  .viz-axis span:not([data-keep="true"]) {
    visibility: hidden;
  }
}

/* --------------------------------------------------------------------------
   ÇİZGİ GRAFİK (haftalık)
   -------------------------------------------------------------------------- */

.viz-line-wrap {
  position: relative;
}

.viz-line {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
 * Zirve noktasının etiketi. Uygulamanın tooltip'iyle aynı dil
 * (ChartTheme.barTooltip): surfaceHigh zemin, white %10 kenarlık,
 * radius sm, padding 10x6, bodySmall metin.
 *
 * Uygulamada tooltip dokunmayla çıkar; burada dokunma yok, bu yüzden
 * en anlamlı noktada sabit durur.
 */
.viz-tip {
  position: absolute;
  z-index: 2;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  background: var(--c-surface-high);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text-primary);
  white-space: nowrap;
  transform: translate(-50%, -130%);
  pointer-events: none;
}

/* Etiketin altındaki küçük işaretçi */
.viz-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 10px;
  margin-left: -0.5px;
  background: rgba(37, 211, 102, 0.45);
}

/* Gün etiketleri: 7 nokta, eşit bölünmüş */
.viz-days {
  display: flex;
  margin-top: var(--sp-sm);
}

.viz-days span {
  flex: 1;
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-muted);
}

.viz-days span[data-active="true"] {
  color: var(--c-primary);
  font-weight: var(--fw-extrabold);
}

/* --------------------------------------------------------------------------
   DONUT (gündüz / gece)
   -------------------------------------------------------------------------- */

.viz-donut-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-lg);
}

.viz-donut {
  position: relative;
  flex: none;
  width: clamp(150px, 20vw, 190px);
  aspect-ratio: 1;
}

.viz-donut svg {
  display: block;
  width: 100%;
  height: 100%;
}

.viz-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.viz-donut__total {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-counter);
  color: var(--c-text-primary);
  font-variant-numeric: tabular-nums;
}

.viz-donut__unit {
  margin-top: 4px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caption);
  color: var(--c-text-muted);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   AÇIKLAMA (legend)
   -------------------------------------------------------------------------- */

.viz-legend {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  flex: 1;
  min-width: 140px;
}

.viz-legend__row {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.viz-legend__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}

.viz-legend__dot[data-series="day"] {
  background: var(--c-chart-mint);
}

.viz-legend__dot[data-series="night"] {
  background: var(--c-chart-violet);
}

.viz-legend__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.viz-legend__value {
  font-variant-numeric: tabular-nums;
}