/* ============================================================================
   Analiz Stage B Hardening — 2026-06-10
   PR: fix/analytics-stage-b-ui-layout-hardening

   Stage A (PR #1994) sayfayı karar destek akışına çevirdi (KPI + insight +
   action + tablo + grafik + empty-state). Multi-platform RCA 24/24 PASS.
   Ancak laptop-1366 viewport'ta sayfa 3479px (4.5× viewport), trend chart
   tek başına 392px, "Hedef Gerçekleşme" gauge synthetic target ile karar
   değeri yok, donut/ranking alanları kompakt değil.

   Stage B HARDENING (redesign DEĞİL):
   - Chart container height constraints (sayfayı kısalt, dominate eden trend'i
     compact'a indir)
   - Action grid 1366px viewport'ta 5 sütun garantisi (auto-fit min-220 → 200)
   - Insight icon dark-mode kontrast iyileştirme
   - Card system tutarlılığı (zaten Stage A'da token'lı; doğrulama)

   Scope: #analyticsTab descendant only (cross-page leak yok).
   Backend / API / JS chart engine / TMCharts mount id'leri dokunulmadı.
   Hedef Gerçekleşme gauge bölümü template'ten KALDIRILDI (synthetic target).

   Hard rules:
   - 0 backend / 0 API / 0 DB / 0 migration / 0 marketplace / 0 prod
   - 0 chart engine değişikliği (mount id korundu)
   - 0 !important (scope=#analyticsTab descendant specificity yeterli)
   - Global dashboard CSS'i dokunulmadı
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1) Chart height constraints — sayfayı kısalt
   tm-charts.css default chart height'ları (~392px line, 220 bar) yüksek.
   Analiz scope altında compact tut: trend 392→260, ranking 320 cap.
   ---------------------------------------------------------------------------- */
#analyticsTab .ana-charts .ch-panel .ch-mount {
  /* TMCharts SVG'leri height'i container'dan alır — burada cap'liyoruz. */
  max-height: 260px;
}

#analyticsTab .ana-charts .ch-panel.span-6 .ch-mount,
#analyticsTab .ana-charts .ch-panel.span-12 .ch-mount {
  /* Trend chart geniş; min-height 200 ile düz çizgi kazasına izin verme. */
  min-height: 200px;
  max-height: 260px;
}

/* PR-FIX 2026-06-10 followup (analytics trend chart desktop):
   PR #2034 set the areaLine SVG to preserveAspectRatio="none" + style.height
   ="100%" so it would fill the mount instead of overflowing on wide
   viewports. But `svg height: 100%` inherits from the IMMEDIATE parent
   (.ch-body), and .ch-body has no explicit height — so the SVG fell back
   to its intrinsic 720:280 aspect height (607px on desktop 1920, 392px on
   laptop 1366), still overflowing the 260px max-height cap.

   Fix: cascade explicit `height: 100%` down through .ch-body → svg.ch-svg
   inside trend chart mounts only. The !important is needed because
   `tm-charts.js areaLine()` sets `svg.style.height` inline.

   Scope: ONLY span-6 / span-12 trend chart panels inside #analyticsTab
   .ana-charts. Other charts (donut, bar, ranking) keep their existing
   sizing behaviour. */
/* PR-FIX 2026-06-10 followup-2: max-height alone leaves the mount's
   declared height as `auto`, so descendant percentage heights collapse
   back to content intrinsic (SVG natural 607px desktop / 392px laptop).
   For the cascade introduced by PR #2037 to actually resolve, .ch-mount
   needs an explicit `height`. Restrict to >=768px so mobile (where the
   chart already fit) keeps its min-height: 200 + content-driven layout. */
@media (min-width: 768px) {
  #analyticsTab .ana-charts .ch-panel.span-6 .ch-mount,
  #analyticsTab .ana-charts .ch-panel.span-12 .ch-mount {
    height: 260px;
  }
}

#analyticsTab .ana-charts .ch-panel.span-6 .ch-mount .ch-body,
#analyticsTab .ana-charts .ch-panel.span-12 .ch-mount .ch-body {
  height: 100%;
}

#analyticsTab .ana-charts .ch-panel.span-6 .ch-mount svg.ch-svg,
#analyticsTab .ana-charts .ch-panel.span-12 .ch-mount svg.ch-svg {
  height: 100% !important;
}

#analyticsTab .ana-charts .ch-panel.span-4 .ch-mount,
#analyticsTab .ana-charts .ch-panel.span-3 .ch-mount {
  /* Donut + ranking — 6 platform legend ve 8 ürün ranking için. */
  min-height: 200px;
  max-height: 400px;
}

/* Top Ürünler ranking kartı (2026-06-11, audit #2) — span-6 ama trend chart
   değil: yukarıdaki span-6 height:260 + svg %100 cascade kuralları ranking
   listesini (8 satır ~300px) klipler. Daha spesifik selector ile ranking'e
   span-3 davranışı (içerik yüksekliği, 400 cap) geri verilir. */
@media (min-width: 768px) {
  #analyticsTab .ana-charts .ch-panel.span-6.ana-top-card .ch-mount {
    height: auto;
  }
}
#analyticsTab .ana-charts .ch-panel.span-6.ana-top-card .ch-mount {
  min-height: 200px;
  max-height: 400px;
}

/* Platform card body grid — chart yarı, tablo yarı (Stage A'dan) */
#analyticsTab .ana-platform-card .ana-platform-card__chart {
  min-height: 200px;
  max-height: 240px;
}

/* ----------------------------------------------------------------------------
   2) Action grid 1366px viewport'ta 5 sütun garantisi
   Stage A: repeat(auto-fit, minmax(220px, 1fr)) → 1366 viewport'ta
   1086px usable / 5 = 217px per card (220 min altında) → 4+1 wrap.
   Hardening: min 200 ile 5 sütun garantisi (1100px+ usable widths).
   ---------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  #analyticsTab .ana-actions__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------------------
   3) Insight icon dark-mode kontrast iyileştirme
   Stage A: rgba(255,255,255,0.05) bg + var(--ana-text-muted) icon color =
   dark mode'da çok düşük kontrast (4.5:1 altında).
   Hardening: bg opacity 0.10 + text-muted yerine daha açık ton.
   ---------------------------------------------------------------------------- */
html.dark-mode #analyticsTab .ana-insight__icon,
body.dark-mode #analyticsTab .ana-insight__icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tmv2-ink, #e2e8f0);
}

html.dark-mode #analyticsTab .ana-insight--positive .ana-insight__icon,
body.dark-mode #analyticsTab .ana-insight--positive .ana-insight__icon {
  background: rgba(22, 163, 74, 0.18);
  color: #4ade80;
}

html.dark-mode #analyticsTab .ana-insight--negative .ana-insight__icon,
body.dark-mode #analyticsTab .ana-insight--negative .ana-insight__icon {
  background: rgba(220, 38, 38, 0.18);
  color: #f87171;
}

/* Action icon dark mode — aynı pattern */
html.dark-mode #analyticsTab .ana-action__icon,
body.dark-mode #analyticsTab .ana-action__icon {
  background: rgba(1, 117, 228, 0.18);
  color: #60a5fa;
}

html.dark-mode #analyticsTab .ana-action--accent .ana-action__icon,
body.dark-mode #analyticsTab .ana-action--accent .ana-action__icon {
  background: rgba(1, 117, 228, 0.25);
  color: #93c5fd;
}

/* ----------------------------------------------------------------------------
   4) Section başlık spacing tightening — 1366'da ilk ekran daha karar dostu
   ---------------------------------------------------------------------------- */
#analyticsTab .ana-section + .ana-section {
  /* spacing-contract section-gap zaten 24; explicit override yok */
}

/* Action card padding compact — 1280-1599 range global token'larla. */
@media (min-width: 1280px) and (max-width: 1599px) {
  #analyticsTab .ana-action {
    padding: var(--tmv2-sp-3) var(--tmv2-sp-4);
  }
  #analyticsTab .ana-action__title {
    font-size: var(--tmv2-fs-sm);
  }
  #analyticsTab .ana-action__text {
    font-size: var(--tmv2-fs-xs);
  }
}

/* ----------------------------------------------------------------------------
   5) Platform tablo compact — token'lar üzerinden
   ---------------------------------------------------------------------------- */
#analyticsTab .ana-table thead th {
  padding: calc(var(--tmv2-sp-2) * 0.75) calc(var(--tmv2-sp-2) + var(--tmv2-sp-1) / 2);
}
#analyticsTab .ana-table tbody td {
  padding: var(--tmv2-sp-2) calc(var(--tmv2-sp-2) + var(--tmv2-sp-1) / 2);
  font-size: var(--tmv2-fs-sm);
}

/* ----------------------------------------------------------------------------
   6) Empty state — global spacing token'ları
   ---------------------------------------------------------------------------- */
#analyticsTab .ana-empty {
  padding: var(--tmv2-sp-7) calc(var(--tmv2-sp-5) - var(--tmv2-sp-1) / 2);
}

/* ----------------------------------------------------------------------------
   7) Detaylı Görünüm section-head görsel hiyerarşi — sade
   Stage A'da küçük h2 (16px). Stage B'de section ayırıcı daha belirgin.
   ---------------------------------------------------------------------------- */
#analyticsTab .ana-charts > .ana-section-head {
  padding-top: 4px;
}

/* ----------------------------------------------------------------------------
   10) KPI kartları renkli vurgu (2026-06-11) — Stage A'da düz beyaz kartlar
   monoton görünüyordu. Sol kenara semantik renk şeridi + delta'ya soft
   background ile hareket. Token-driven: --tm-brand-500 (mavi), --tm-good
   (yeşil), --tm-warn (sarı/turuncu), --tm-bad (kırmızı).
   ---------------------------------------------------------------------------- */
#analyticsTab .ana-summary .ana-kpi {
  position: relative;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tm-brand-500, #0175e4) 3%, var(--tmv2-surface, #fff)) 0%,
    var(--tmv2-surface, #fff) 60%);
  border-left: 3px solid var(--tm-brand-500, #0175e4);
  padding-left: var(--tmv2-sp-4, 16px);
}
#analyticsTab .ana-summary .ana-kpi:nth-child(1) {
  /* CIRO — mavi (brand) */
  border-left-color: var(--tm-brand-500, #0175e4);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tm-brand-500, #0175e4) 6%, var(--tmv2-surface, #fff)) 0%,
    var(--tmv2-surface, #fff) 70%);
}
#analyticsTab .ana-summary .ana-kpi:nth-child(2) {
  /* KÂR — yeşil */
  border-left-color: var(--tm-good, #16a34a);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tm-good, #16a34a) 6%, var(--tmv2-surface, #fff)) 0%,
    var(--tmv2-surface, #fff) 70%);
}
#analyticsTab .ana-summary .ana-kpi:nth-child(3) {
  /* KÂR MARJI — mor */
  border-left-color: #8b5cf6;
  background: linear-gradient(180deg,
    color-mix(in srgb, #8b5cf6 6%, var(--tmv2-surface, #fff)) 0%,
    var(--tmv2-surface, #fff) 70%);
}
#analyticsTab .ana-summary .ana-kpi:nth-child(4) {
  /* SİPARİŞ — turkuaz */
  border-left-color: #0d9488;
  background: linear-gradient(180deg,
    color-mix(in srgb, #0d9488 6%, var(--tmv2-surface, #fff)) 0%,
    var(--tmv2-surface, #fff) 70%);
}
#analyticsTab .ana-summary .ana-kpi:nth-child(5) {
  /* İADE ORANI — turuncu/sarı */
  border-left-color: var(--tm-warn, #f59e0b);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tm-warn, #f59e0b) 6%, var(--tmv2-surface, #fff)) 0%,
    var(--tmv2-surface, #fff) 70%);
}

/* Delta chips: warn/up/down rengi belirgin */
#analyticsTab .ana-summary .ana-kpi__delta {
  font-weight: 600;
  font-size: var(--tmv2-fs-sm);
}
#analyticsTab .ana-summary .ana-delta--up { color: var(--tm-good, #16a34a); }
#analyticsTab .ana-summary .ana-delta--down { color: var(--tm-bad, #dc2626); }
#analyticsTab .ana-summary .ana-delta--warn { color: var(--tm-warn, #f59e0b); }

/* Entrance animation — sırayla */
#analyticsTab .ana-summary .ana-kpi {
  animation: tmKpiIn .35s cubic-bezier(.22,.8,.32,1) backwards;
}
#analyticsTab .ana-summary .ana-kpi:nth-child(1) { animation-delay: .04s; }
#analyticsTab .ana-summary .ana-kpi:nth-child(2) { animation-delay: .08s; }
#analyticsTab .ana-summary .ana-kpi:nth-child(3) { animation-delay: .12s; }
#analyticsTab .ana-summary .ana-kpi:nth-child(4) { animation-delay: .16s; }
#analyticsTab .ana-summary .ana-kpi:nth-child(5) { animation-delay: .20s; }
@keyframes tmKpiIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------------
   8) FAB clearance (2026-06-10 PR-B + follow-up) — sağ alttaki global
   `.support-floating-buttons` stack (templates/layouts/base.html:4404-4509,
   position: fixed; right: 16px; bottom: 16px; width: 44px; height ~252px)
   Analiz tab içeriğinin sağ kenarını kapatıyor: action card grid'in son
   sütunu (Buybox), trend chart'ın sağ kenarı ve top ranking listesinin sağ
   kenar rakamları FAB stack altında kalıyor.
   Token'lı: --tm-analytics-fab-clearance override edilebilir.
   Default 72px = 44 (FAB width) + 16 (FAB right offset) + 12 (visual gap).
   Scope: yalnız `#analyticsTab .tm-dashboard-tab-inner` — diğer tab'lar
   (overview/canli/orders) dokunulmadı.
   Media query (min-width: 769px): mobil `.support-floating-buttons` zaten
   `display: none !important` (mobile-account-fixes.css:24 ≤768px),
   padding eklemeye gerek yok.
   `!important`: wrapper'da Bootstrap `.px-0` utility (`padding-right: 0
   !important`) PR-B'nin ilk versiyonunu override etti — runtime'da computed
   padding-right: 0px ölçüldü, overlap_hits 4/3/3/2 devam etti. !important
   ile match edip Bootstrap utility'sini kıralıyoruz; scope `#analyticsTab`
   altında, diğer tab'lara sızmaz.
   ---------------------------------------------------------------------------- */
:root {
  /* FAB clearance = FAB width (--tmv2-sp-11=44px) + FAB right offset
     (--tmv2-sp-4=16px) + visual gap (--tmv2-sp-3=12px). Tokenize so
     theme-variables.css değişirse otomatik takip eder. */
  --tm-analytics-fab-clearance: calc(var(--tmv2-sp-11) + var(--tmv2-sp-4) + var(--tmv2-sp-3));
}
@media (min-width: 769px) {
  /* PR-B4 2026-06-11: kapsam tüm dashboard yüzeylerine genişletildi.
     `#analyticsTab` scope kullanıcı şikayetiyle yetersiz bulundu → Canli/
     Overview/Orders ve `.tm-page` (Live perf gibi) sayfalarda FAB hâlâ
     content kapatıyordu. */
  .tm-dashboard-tab-inner,
  .tm-page,
  .tm-live-page {
    padding-right: max(
      var(--tm-analytics-fab-clearance),
      calc(env(safe-area-inset-right, 0px) + var(--tm-analytics-fab-clearance))
    ) !important;
  }
}

/* PR-B4 2026-06-11: body always-show scrollbar (`overflow-y: scroll`) +
   html natural scroll bazı browser'larda 2 sağ-scrollbar gösteriyor.
   Body'yi visible'a çek; html zaten scroll'u yönetiyor. */
body {
  overflow-y: visible !important;
}

/* ----------------------------------------------------------------------------
   9) Nested scrollbar elimination (2026-06-10 PR-B3) — `.tmv2-app` is
   declared with `overflow-x: hidden` (tm-shell-v2.css:10-20). Per CSS spec
   (Overflow Module Level 3 §3.1) when `overflow-x` is non-visible and
   `overflow-y` is left as `visible`, the browser FORCES `overflow-y` to
   compute as `auto` to avoid a layout-incompatible combination. Result:
   `#tmv2App` silently becomes a scrollable container.

   PR-B's padding-right inflated `#tmv2App.scrollHeight` past its
   `clientHeight` (measured 2202 vs 2048 @1920, 2373 vs 2219 @1366), which
   surfaced that latent scroll container as a SECOND right-edge scrollbar
   stacked on top of the existing html/body viewport scrollbar.

   Fix: `overflow-y: clip`. CSS Overflow §3.1 explicitly allows
   `overflow-x: hidden + overflow-y: clip` (both non-visible) WITHOUT the
   forcing rule. `clip` is the same as `hidden` for painting EXCEPT it
   does NOT create a scroll container — no nested scrollbar appears, no
   programmatic scrolling on the element. Page-level scrolling on html/
   body is preserved (document overflow continues to scroll normally).

   Scope is global to `#tmv2App` because the architectural rule lives at
   the shell level; the same redundant nested scroll affects overview /
   canli / orders tabs whenever their content overflows. Limiting this
   to `:has(#analyticsTab)` is meaningless — `#analyticsTab` is always
   present in the tabbed DOM (just hidden when another tab is active).
   ---------------------------------------------------------------------------- */
#tmv2App {
  overflow-y: clip !important;
}

/* ==== 2026-06-11 UI audit r1 fixes ==== */
/* #2: Ciro Dağılımı (tmAnMix) donut legend — 2 kolon kompakt grid; kart taşması (scrollH 535 > 490) giderildi */
.tm-dashboard-ch-grid--analytics #tmAnMix .ch-legend.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
}
.tm-dashboard-ch-grid--analytics #tmAnMix .ch-legend.row li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  width: auto;
}
.tm-dashboard-ch-grid--analytics #tmAnMix .ch-legend.row .nm {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tm-dashboard-ch-grid--analytics #tmAnMix .ch-legend.row .vl { flex-shrink: 0; }

/* #10: Platform Performansı tablosu 1440px'te 19px yatay taşma — dar ekranda sıkılaştır */
@media (max-width: 1500px) {
  .tm-dashboard-ch-grid--analytics .ana-table th,
  .tm-dashboard-ch-grid--analytics .ana-table td {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }
}