/* ============================================================================
   Dashboard dark mode — vanilla components fix
   PR: fix/dashboard-darkmode-mojibake-2026-06-09

   Hedef: Stage 1 (PR #1925) vanilla KPI grid + diğer agent (591957b83 / 7bc8a6ee4)
   eklediği `.ch-panel` (TMCharts vanilla panel) ve `.ch-*` alt elementleri için
   dark mode override'ları. Mevcut `dashboard-dark-mode.css` bu yeni dosyaları
   tanımıyordu → grafik panelleri ve KPI kartları dark mode'da beyaz/açık zemin
   bırakıyordu.

   Token kaynağı: html.dark-mode altında inherited `--tm-bg-card`, `--tm-bg-page`,
   `--tm-border-color`, `--tm-text-primary`, `--tm-text-muted`.

   Scope: SADECE `html.dark-mode` veya `body.dark-mode` altında aktif. Light mode
   davranışı dokunulmaz.
   ============================================================================ */

/* ---- TMCharts vanilla panel (`.ch-panel`) ---- */
html.dark-mode .ch-panel,
body.dark-mode .ch-panel {
  background: var(--tm-bg-card, #131b2e) !important;
  border-color: var(--tm-border-color, rgba(255, 255, 255, 0.08)) !important;
  color: var(--tm-text-primary, #f4f4f5) !important;
}

html.dark-mode .ch-panel:hover,
body.dark-mode .ch-panel:hover {
  border-color: var(--tm-border-color-hover, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .ch-panel.enter,
body.dark-mode .ch-panel.enter {
  background: var(--tm-bg-card, #131b2e) !important;
}

/* ---- Chart panel başlık + alt metin ---- */
html.dark-mode .ch-h3,
html.dark-mode .ch-sub,
html.dark-mode .ch-head,
html.dark-mode .ch-head-l,
body.dark-mode .ch-h3,
body.dark-mode .ch-sub,
body.dark-mode .ch-head,
body.dark-mode .ch-head-l {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

html.dark-mode .ch-sub,
body.dark-mode .ch-sub {
  color: var(--tm-text-muted, #94a3b8) !important;
}

/* ---- Chart segments / tabs ---- */
html.dark-mode .ch-tabs,
body.dark-mode .ch-tabs {
  background: var(--color-bg, #050607) !important;
  border-color: var(--tm-border-color, rgba(255, 255, 255, 0.08)) !important;
}

html.dark-mode .ch-tab,
body.dark-mode .ch-tab {
  color: var(--tm-text-muted, #94a3b8) !important;
}

html.dark-mode .ch-tab.active,
body.dark-mode .ch-tab.active {
  background: var(--tm-bg-card, #0b0f14) !important;
  color: var(--tm-text-primary, #f4f4f5) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* ---- Chart legend / footer text ---- */
html.dark-mode .ch-legend,
html.dark-mode .ch-legend li,
html.dark-mode .ch-legend .nm,
html.dark-mode .ch-legend .sh,
body.dark-mode .ch-legend,
body.dark-mode .ch-legend li,
body.dark-mode .ch-legend .nm,
body.dark-mode .ch-legend .sh {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

html.dark-mode .ch-legend .sh,
body.dark-mode .ch-legend .sh {
  color: var(--tm-text-muted, #94a3b8) !important;
}

/* ---- Donut center label ---- */
html.dark-mode .ch-donut,
body.dark-mode .ch-donut {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

/* ---- SVG axis lines / grid lines fade ---- */
html.dark-mode .ch-panel svg .grid line,
body.dark-mode .ch-panel svg .grid line,
html.dark-mode .ch-panel svg .axis line,
body.dark-mode .ch-panel svg .axis line {
  stroke: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .ch-panel svg .axis text,
body.dark-mode .ch-panel svg .axis text {
  fill: var(--tm-text-muted, #94a3b8) !important;
}

/* ---- Vanilla KPI cards (tm-kpi.css `.kpi-card`) ---- */
/* Mevcut `dashboard-dark-mode.css` `.kpi-card` için temel rule içeriyor ama
   yeni vanilla `.kpi-card.accent` (Sipariş hero, mavi gradyan) + value/delta
   text rengi için ek override. */
html.dark-mode .kpi-card,
body.dark-mode .kpi-card {
  background: var(--tm-bg-card, #131b2e) !important;
  border-color: var(--tm-border-color, rgba(255, 255, 255, 0.08)) !important;
  color: var(--tm-text-primary, #f4f4f5) !important;
}

/* Hero/accent kart — mavi gradyan zaten kendisi karanlık, sadece text whitewash */
html.dark-mode .kpi-card.accent,
body.dark-mode .kpi-card.accent {
  /* gradient aynen kalsın — tm-kpi.css'teki linear-gradient hero için */
  color: #ffffff !important;
}

html.dark-mode .kpi-card .kpi-label,
html.dark-mode .kpi-card .kpi-value,
html.dark-mode .kpi-card .kpi-prev,
html.dark-mode .kpi-card .kpi-delta-txt,
body.dark-mode .kpi-card .kpi-label,
body.dark-mode .kpi-card .kpi-value,
body.dark-mode .kpi-card .kpi-prev,
body.dark-mode .kpi-card .kpi-delta-txt {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

html.dark-mode .kpi-card .kpi-prev,
body.dark-mode .kpi-card .kpi-prev {
  color: var(--tm-text-muted, #94a3b8) !important;
}

/* Accent kart text-color reset (hero üzerinde beyaz kalsın) */
html.dark-mode .kpi-card.accent .kpi-label,
html.dark-mode .kpi-card.accent .kpi-value,
html.dark-mode .kpi-card.accent .kpi-prev,
html.dark-mode .kpi-card.accent .kpi-delta-txt,
body.dark-mode .kpi-card.accent .kpi-label,
body.dark-mode .kpi-card.accent .kpi-value,
body.dark-mode .kpi-card.accent .kpi-prev,
body.dark-mode .kpi-card.accent .kpi-delta-txt {
  color: #ffffff !important;
}

/* ---- Canli Performans legacy tm-kpi-row (hidden wrapper içinde değilse) ---- */
html.dark-mode .tm-kpi,
body.dark-mode .tm-kpi {
  background: var(--tm-bg-card, #131b2e) !important;
  border-color: var(--tm-border-color, rgba(255, 255, 255, 0.08)) !important;
  color: var(--tm-text-primary, #f4f4f5) !important;
}

html.dark-mode .tm-kpi__label,
html.dark-mode .tm-kpi__value,
html.dark-mode .tm-kpi__caption,
body.dark-mode .tm-kpi__label,
body.dark-mode .tm-kpi__value,
body.dark-mode .tm-kpi__caption {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

/* Hero (Sipariş) — mavi gradyan zaten karanlık, text whitewash */
html.dark-mode .tm-kpi.tm-kpi--hero,
body.dark-mode .tm-kpi.tm-kpi--hero {
  color: #ffffff !important;
}

html.dark-mode .tm-kpi.tm-kpi--hero .tm-kpi__label,
html.dark-mode .tm-kpi.tm-kpi--hero .tm-kpi__value,
html.dark-mode .tm-kpi.tm-kpi--hero .tm-kpi__caption,
body.dark-mode .tm-kpi.tm-kpi--hero .tm-kpi__label,
body.dark-mode .tm-kpi.tm-kpi--hero .tm-kpi__value,
body.dark-mode .tm-kpi.tm-kpi--hero .tm-kpi__caption {
  color: #ffffff !important;
}

/* ---- Canli Performans sayfa ekstra: pulseline + controls ---- */
html.dark-mode .tm-live-pulseline,
body.dark-mode .tm-live-pulseline {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

html.dark-mode .tm-live-stat__label,
body.dark-mode .tm-live-stat__label {
  color: var(--tm-text-muted, #94a3b8) !important;
}

html.dark-mode .tm-live-stat__value,
body.dark-mode .tm-live-stat__value {
  color: var(--tm-text-primary, #f4f4f5) !important;
}

/* ==== 2026-06-11 UI audit r1: dark mode fixes ==== */
/* #3: .ch-seg toggle dark'ta okunmuyor (bg #f1f5f9 + near-white text, kontrast 1.00) */
html.dark-mode .ch-seg,
body.dark-mode .ch-seg {
  background: var(--tm-surface-2, #1d2633) !important;
}
html.dark-mode .ch-seg button,
body.dark-mode .ch-seg button {
  color: var(--tm-text-muted, #94a3b8) !important;
}
html.dark-mode .ch-seg button.on,
body.dark-mode .ch-seg button.on {
  
  background: var(--tm-surface-3, #2b3647) !important;
  color: var(--tm-text-primary, #f4f4f5) !important;
  box-shadow: none !important;
}

/* #4: Donut/gauge merkez SVG text fill dark'ta koyu kalıyor (fill #0f172a) */
html.dark-mode .ch-donut-center-v,
body.dark-mode .ch-donut-center-v,
html.dark-mode .ch-gauge-v,
body.dark-mode .ch-gauge-v {
  fill: var(--tm-text-primary, #f4f4f5) !important;
}
html.dark-mode .ch-donut-center-l,
body.dark-mode .ch-donut-center-l,
html.dark-mode .ch-gauge-l,
body.dark-mode .ch-gauge-l {
  fill: var(--tm-text-muted, #94a3b8) !important;
}