/* UI stability round 4 — Live reorder + KPI polish.
   2026-06-05: kullanıcı raporu sonrası:
   (a) Live'da grafikler üste, sipariş tablosu alta
   (b) KPI cards iyileştirilmeli (spacing, hover, sparkline ratio, hizalama)

   PR #1745 ile orders'i üste taşıyan order:30/40 kuralı bu sayfada flip
   ediliyor — kullanıcı tekrar grafikleri önde görmek istedi. */

/* ──────────────────────────────────────────────────────────────────────
   1) REORDER: Charts üste, Orders alta — PR #1745 flip
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-live-main-grid {
  order: 20 !important;
}
.tm-live-page .tm-live-orders-card {
  order: 50 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   2) Live KPI cards — okunabilirlik + spacing + hover micro
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-kpi-row {
  gap: 14px;
  margin-bottom: 4px;
}
.tm-live-page .tm-kpi {
  /* daha rahat iç boşluk, kart yüksekliği eşit */
  padding: 14px 16px !important;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tm-live-page .tm-kpi:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.tm-live-page .tm-kpi .tm-kpi__label {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #475569;
}
.tm-live-page .tm-kpi .tm-kpi__value {
  font-weight: 700;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.tm-live-page .tm-kpi .tm-kpi__row {
  margin-top: 8px;
  align-items: center;
  gap: 8px;
}
.tm-live-page .tm-kpi .tm-kpi__delta {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.3;
}
.tm-live-page .tm-kpi .tm-kpi__caption {
  font-size: 11.5px;
  color: #64748b;
}

/* Sparkline canvas — KPI içinde dengeli oran, taşma yok */
.tm-live-page .tm-kpi canvas {
  max-height: 36px;
  width: auto !important;
  opacity: 0.85;
}

/* Hero card (ilk KPI — Sipariş sayısı) — beyaz metin kontrastı korunur */
.tm-live-page .tm-kpi.tm-kpi--hero {
  padding: 14px 16px !important;
}
.tm-live-page .tm-kpi.tm-kpi--hero .tm-kpi__delta {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* ──────────────────────────────────────────────────────────────────────
   3) Chart sections — orders'tan sonra geldiklerinde üst margin
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-live-main-grid {
  margin-top: 10px;
}

/* Charts container — 1024+ daha kompakt, charts daha az boy alır */
@media (min-width: 1024px) {
  .tm-live-page .tm-live-charts {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 1023px) {
  .tm-live-page .tm-live-charts {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

/* Chart card içi padding biraz daha sıkı (önceki + 1rem rahatlatıyordu) */
.tm-live-page .tm-live-charts .tm-card__body {
  padding: 14px 16px;
}

/* Sticky sidebar charts'ı kısaysa grid içinde uzun beyaz boşluk yaratıyordu;
   align-content: start ile grid yüksekliği max(sidebar, content) yerine
   doğal akışa düşer. Content kolonu da kendi yüksekliğine sığar. */
.tm-live-page .tm-live-main-grid {
  align-content: start;
}
.tm-live-page .tm-live-main-grid__content {
  align-self: start;
}
.tm-live-page .tm-live-main-grid__sidebar {
  align-self: start;
}

/* shell.css'te layout-shift koruması olarak min-height 2050/980/2200px
   forciyordu (eski layout: orders ortada, charts altta). Yeni reorder ile
   charts kısa kalıyor → devasa boşluk. Override edip natural-height akışa
   geri dönüyoruz. Skeleton/loading reservation kart bazında zaten var. */
#tmv2App .tm-live-page,
#tmv2App .tm-live-page .tm-live-main-grid,
#tmv2App .tm-live-page .tm-live-charts,
#tmv2App .tm-live-page .tm-live-main-grid__content {
  min-height: 0 !important;
}
#tmv2App .tmv2-page-body:has(.tm-live-page) {
  min-height: auto !important;
}

/* ──────────────────────────────────────────────────────────────────────
   4) Orders tablosu üst boşluk — charts'tan ayrılsın
   ────────────────────────────────────────────────────────────────────── */
.tm-live-page .tm-live-orders-card {
  margin-top: 18px;
}