/* ============================================================================
   Dashboard Spacing Contract — 2026-06-10
   PR: fix/dashboard-global-spacing-contract-2026-06-10

   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)
     - 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.

   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: 16px;

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

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

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

/* ----------------------------------------------------------------------------
   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 + *,
.tm-live-page > .tm-live-header + * {
  margin-top: var(--tm-dashboard-toolbar-gap);
}

/* ----------------------------------------------------------------------------
   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,
#tmv2App .tm-dashboard-ch-grid,
#tmv2App .tmv2-section-grid {
  gap: var(--tm-dashboard-card-gap);
}

/* ----------------------------------------------------------------------------
   5) 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: 12px;
    --tm-dashboard-section-gap: 16px;
    --tm-dashboard-toolbar-gap: 8px;
    --tm-dashboard-card-gap: 12px;
  }
}