/* DS-scope exclusion (design-system debt, registered in docs/ui-audit.md §1.2c, added 2026-09-13):
   Rules carrying `:where(:not(.tm-ds *))` stand down inside pages that opted into the
   design system (<main class="tm-ds">); `:where()` keeps their specificity unchanged, so
   every other page resolves exactly as before. Counted in the DS metrics table
   (scripts/ui_audit_metrics.py). Removed for good in Faz 5 with this file's overlay role. */
/* ============================================================================
   Dashboard Spacing Contract — 2026-06-10
   PR: fix/dashboard-global-spacing-contract-2026-06-10
   UI consistency 2026-08-31: tighter rhythm + surface chrome from v2 Phase D.

   Tek üst boşluk / bölüm / toolbar / kart ritmi. 4 dashboard sayfası için
   ortak kontrat:
     - Genel Bakış     (dashboard_tabbed.html · ds=overview)
     - Canlı Performans (dashboard_live.html)
     - Siparişler      (dashboard_tabbed.html · ds=orders)
     - Analiz          (dashboard_tabbed.html · ds=analytics)

   Yükleme noktaları (kontrat sadece bu iki include üzerinden geliyor —
   ek scope marker'a gerek yok):
     - templates/includes/dashboard/tabbed_head_dashboard_css.html
       (Overview / Orders / Analytics) — head sonunda, overlay'lerden sonra
     - templates/pages/dashboard_live.html {% block head %}
       (Live)

   Tek değiştirilmesi gereken yer aşağıdaki :root tokenları. Sayfa bazlı
   inline style / sayfa içi !important yaması yok. Yeni paralel token
   dosyası yok — gölge/radius v2 Phase D (--tm-card-*).

   Hard rules:
   - 0 backend
   - 0 yeni JS
   - 0 inline style
   - Mevcut header / sidebar / chart engine dokunulmaz
   - Sayfa bazlı override istisnası: yok (kontrat tek kaynak)
   ============================================================================ */

:root {
  /* Sticky header (h≈59px) altından main içerik bloğunun ilk çocuğuna
     kadar inen boşluk. tm-shell-v2.css:174 #tmv2App main#mainContent.tmv2-page
     padding-top'unu bu token override eder. */
  --tm-dashboard-top-gap: 12px;

  /* Bölüm/section grid'leri arası dikey ara (KPI band ↔ chart grid ↔ tablo). */
  --tm-dashboard-section-gap: 16px;

  /* Toolbar/filter bar altına gelen ilk içerik bloğunun üst marjini. */
  --tm-dashboard-toolbar-gap: 8px;

  /* Kart grid'lerinde sütun/satır arası boşluk. */
  --tm-dashboard-card-gap: 12px;
}

/* ----------------------------------------------------------------------------
   1) ÜST BOŞLUK — TEK SOURCE
   tm-shell-v2.css:174 padding shorthand'i (var(--tmv2-page-pad-y) ≈ 16px)
   ile başlangıç değeri veriyor. Bu kural padding-top'u longhand olarak
   override edip token'a bağlar. Eşit özgüllükte selector + sonra yüklendiği
   için cascade'de kazanır.
   ---------------------------------------------------------------------------- */
#tmv2App main#mainContent.tmv2-page,
#tmv2App main#mainContent.tmv2-content {
  padding-top: var(--tm-dashboard-top-gap);
}

/* ----------------------------------------------------------------------------
   2) BÖLÜMLER ARASI DİKEY RİTİM
   .tmv2-page-body flex-column zaten gap kullanıyor (tm-shell-v2.css:239 →
   --tmv2-section-gap). Burada dashboard scope'unda kendi token'ımıza bağlıyoruz.
   ---------------------------------------------------------------------------- */
#tmv2App .tmv2-page-body,
#tmv2App .tmv2-page-shell {
  gap: var(--tm-dashboard-section-gap);
}

/* ----------------------------------------------------------------------------
   3) TOOLBAR → CONTENT BOŞLUĞU
   Filter bar / segment kontrolünün hemen altındaki ilk content bloğu.
   .dashboard-filter-bar (Overview/Orders/Analytics) + .tm-live-header (Live).
   ---------------------------------------------------------------------------- */
#tmv2App .dashboard-filter-bar + *,
#tmv2App .dashboard-tabbed-toolbar + * {
  margin-top: var(--tm-dashboard-toolbar-gap);
}
/* Live: toolbar→KPI ekstra 12px ATF'yi şişiriyordu (2026-08-24 audit).
   Compact chrome için Live'da 4px; Overview/Orders/Analytics kontratı aynı. */
.tm-live-page > .tm-live-header + * {
  margin-top: 4px;
}

/* ----------------------------------------------------------------------------
   4) KART GRID — gap
   KPI grid'i (.ch-grid / .tm-dashboard-ch-grid) ve section grid (.tmv2-section-grid)
   ortak token'dan beslenir.
   ---------------------------------------------------------------------------- */
#tmv2App .ch-grid:where(:not(.tm-ds *)),
#tmv2App .tm-dashboard-ch-grid:where(:not(.tm-ds *)),
#tmv2App .tmv2-section-grid:where(:not(.tm-ds *)),
#tmv2App .kpi-grid:where(:not(.tm-ds *)) {
  gap: var(--tm-dashboard-card-gap);
}

/* ----------------------------------------------------------------------------
   5) YÜZEY — kart chrome (Phase D token, hover lift yok)
   Kaynak dosyalar da aynı token'a bağlanır; bu blok last-load emniyet ağı.
   Drawer / modal / popover dokunulmaz.
   ---------------------------------------------------------------------------- */
/* 2026-09-24: the `:where(:not(.tm-ds *))` exclusion was applied to the LAYOUT
   rules above but missed here, on the surface chrome. An ID selector (1,1,0)
   outranks `.tm-ds .kpi-card` (0,2,0), so the design system did not actually
   own the KPI card / chart panel surface — it only looked like it did, because
   this rule happens to read the same --tm-radius-card token. Proof: setting
   ds-stat-card.css to `border-radius: 31px` left the computed value at 14px,
   while changing the token moved it. Any DS-only surface change would have
   been silently inert. Exclusion adds zero specificity. */
#tmv2App .ch-panel:where(:not(.tm-ds *)),
#tmLivePerformancePage .ch-panel:where(:not(.tm-ds *)) {
  border-radius: var(--tm-radius-card, 12px);
  box-shadow: var(--tm-card-shadow);
}
#tmv2App .ch-panel:hover:where(:not(.tm-ds *)),
#tmLivePerformancePage .ch-panel:hover:where(:not(.tm-ds *)) {
  box-shadow: var(--tm-card-shadow-hover);
}
#tmv2App .kpi-card:where(:not(.tm-ds *)),
#tmLivePerformancePage .kpi-card:where(:not(.tm-ds *)) {
  border-radius: var(--tm-radius-card, 12px);
  box-shadow: var(--tm-card-shadow);
}
#tmv2App .kpi-card:hover:where(:not(.tm-ds *)),
#tmLivePerformancePage .kpi-card:hover:where(:not(.tm-ds *)) {
  transform: none;
  box-shadow: var(--tm-card-shadow-hover);
}

/* Overview: extra shell/deck chrome yok — sarmalayıcılar layout-only */
#overviewTab .dashboard-shell,
#overviewTab .dashboard-kpi-grid,
#overviewTab .overview-metric-deck {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
#overviewTab .tm-dashboard-ch-grid--overview:where(:not(.tm-ds *)) {
  margin-top: var(--tm-dashboard-card-gap);
  margin-bottom: var(--tm-dashboard-section-gap);
}

/* ----------------------------------------------------------------------------
   6) MOBİL — daha sıkı ritim
   <768px viewport'ta dashboard içeriği yatay full-width gider; aynı rakamlar
   sıkışık görünür. Token override ile bütün kuralları otomatik daraltır.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --tm-dashboard-top-gap: 8px;
    --tm-dashboard-section-gap: 12px;
    --tm-dashboard-toolbar-gap: 8px;
    --tm-dashboard-card-gap: 8px;
  }
}