/* ============================================================================
   TM-STATES — Ortak 4-state bileşen sistemi (loading / success / empty / error)
   ----------------------------------------------------------------------------
   ADDITIVE / OPT-IN: Bu dosya hiçbir mevcut sayfayı etkilemez. Sayfalar
   `.tm-empty`, `.tm-error`, `.tm-loading`, `.tm-table-empty`, `.tm-chart-empty`,
   `.tm-kpi-empty` sınıflarını (veya templates/includes/tm_states.html macro'larını)
   opt-in olarak kullanır.

   TASARIM İLKELERİ
   • Tüm tokenlar kanonik `--tm-*` sisteminden gelir (theme-variables.css).
     Light = :root, Dark = html.dark-mode. CDN yok, hardcoded renk yok.
   • Her state MİN-YÜKSEKLİK'li → container asla 0px'e çökmez (collapse=0).
   • loading → empty → data geçişleri AYNI min-height paylaşır → CLS/pop = 0.
   • Mobilde taşma yok (yatay-overflow = 0), içerik ortalanır, metin sarılır.
   ============================================================================ */

:root {
  /* Bu sistemin kendi ayarlanabilir ölçekleri (tüm state'ler paylaşır → CLS=0). */
  --tm-state-min-h: 240px;          /* panel min yükseklik (collapse önler) */
  --tm-state-min-h-sm: 160px;       /* kompakt (tablo satırı / küçük kart) */
  --tm-state-chart-min-h: 260px;    /* chart placeholder min yükseklik */
  --tm-state-kpi-min-h: 96px;       /* KPI kart min yükseklik */
  --tm-state-icon-size: 48px;
  --tm-state-max-w: 420px;          /* açıklama metni okunur genişlik */
  --tm-state-gap: var(--space-3, 0.75rem);
}

/* ────────────────────────────────────────────────────────────────────────────
   ORTAK PANEL KABUĞU — .tm-empty / .tm-error / .tm-loading hepsi paylaşır.
   Aynı min-height + aynı flex ortalama → state geçişinde zıplama olmaz.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-empty,
.tm-error,
.tm-loading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--tm-state-gap);
  min-height: var(--tm-state-min-h);
  width: 100%;
  max-width: 100%;
  padding: var(--space-8, 2rem) var(--space-4, 1rem);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Kart içi kullanımda (card-body vb.) kabuk saydam kalır; kendi zemini yok. */
.tm-empty,
.tm-error {
  color: var(--tm-text-secondary, #64748b);
}

/* Kompakt varyant (dar alan / küçük kart). */
.tm-empty--sm,
.tm-error--sm,
.tm-loading--sm {
  min-height: var(--tm-state-min-h-sm);
  padding: var(--space-5, 1.25rem) var(--space-4, 1rem);
}

/* İkon çemberi — anlamsal ton alt-sınıftan gelir. */
.tm-empty__icon,
.tm-error__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--tm-state-icon-size);
  height: var(--tm-state-icon-size);
  border-radius: var(--radius-full, 9999px);
  font-size: 24px;
  line-height: 1;
}

.tm-empty__icon svg,
.tm-error__icon svg {
  width: 24px;
  height: 24px;
}

.tm-empty__icon {
  background: var(--tm-primary-soft, var(--primary-50, #e8f4ff));
  color: var(--tm-primary, var(--primary-600, #0163c2));
}

.tm-empty__title,
.tm-error__title {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-semibold, 600);
  color: var(--tm-text-primary, #1e293b);
  line-height: 1.35;
}

.tm-empty__desc,
.tm-error__desc {
  margin: 0;
  max-width: var(--tm-state-max-w);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-normal, 400);
  color: var(--tm-text-secondary, #64748b);
  line-height: 1.55;
}

/* CTA slotu — sayfa istediği butonu (btn btn-primary vb.) yerleştirir. */
.tm-empty__cta,
.tm-error__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-1, 0.25rem);
}

/* ────────────────────────────────────────────────────────────────────────────
   HATA PANELİ — empty benzeri ama error tonu.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-error__icon {
  background: var(--tm-error-bg, var(--error-50, #fef2f2));
  color: var(--tm-error, var(--error-600, #dc2626));
}

.tm-error__title {
  color: var(--tm-error, var(--error-700, #b91c1c));
}

/* Dahili "Tekrar dene" butonu (macro CTA vermezse). */
.tm-error__retry {
  /* .btn/.btn-outline ile birlikte kullanılabilir; tek başına da çalışır. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
}

/* ────────────────────────────────────────────────────────────────────────────
   LOADING PANELİ / SKELETON WRAPPER
   Mevcut skeleton shimmer estetiğiyle uyumlu; min-height ile CLS önler.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-loading {
  gap: var(--space-3, 0.75rem);
}

.tm-loading__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  max-width: var(--tm-state-max-w);
}

.tm-skeleton-bar {
  height: 16px;
  border-radius: var(--radius-md, 6px);
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.12) 0%,
    rgba(148, 163, 184, 0.22) 50%,
    rgba(148, 163, 184, 0.12) 100%
  );
  background-size: 200% 100%;
  animation: tm-skeleton-shimmer 1.4s ease-in-out infinite;
}

.tm-skeleton-bar--title { height: 20px; width: 55%; }
.tm-skeleton-bar--w80 { width: 80%; }
.tm-skeleton-bar--w60 { width: 60%; }
.tm-skeleton-bar--w40 { width: 40%; }

@keyframes tm-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

html.dark-mode .tm-skeleton-bar {
  background: linear-gradient(
    90deg,
    rgba(71, 85, 105, 0.35) 0%,
    rgba(100, 116, 139, 0.45) 50%,
    rgba(71, 85, 105, 0.35) 100%
  );
  background-size: 200% 100%;
}

/* Basit dönen spinner (design-system loading-spinner ile aynı token'lar). */
.tm-loading__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--tm-border-color, var(--secondary-200, #e2e8f0));
  border-top-color: var(--tm-primary, var(--primary-500, #0175e4));
  border-radius: 50%;
  animation: tm-spin 0.8s linear infinite;
}

@keyframes tm-spin { to { transform: rotate(360deg); } }

.tm-loading__label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--tm-text-muted, #94a3b8);
}

/* ────────────────────────────────────────────────────────────────────────────
   TABLO BOŞ DURUMU — boş <tbody> yerine düzgün, colspan-full empty-row.
   Kullanım: <tr class="tm-table-empty-row"><td colspan="N">…tm-empty…</td></tr>
   ──────────────────────────────────────────────────────────────────────────── */
.tm-table-empty-row > td,
td.tm-table-empty {
  padding: 0;                       /* iç .tm-empty kendi padding'ini verir */
  border-bottom: none;
  background: transparent;
}

.tm-table-empty-row .tm-empty,
.tm-table-empty-row .tm-error,
.tm-table-empty-row .tm-loading,
td.tm-table-empty .tm-empty,
td.tm-table-empty .tm-error,
td.tm-table-empty .tm-loading {
  min-height: var(--tm-state-min-h-sm);
}

/* Tablo satırlarında skeleton (loading state) için hazır yardımcı. */
.tm-table-skeleton-row > td {
  background: transparent;
  border-top: 1px solid var(--tm-border-light, rgba(148, 163, 184, 0.12));
}

/* ────────────────────────────────────────────────────────────────────────────
   CHART BOŞ DURUMU — chart'ı 0×0 init etmek yerine min-height'lı placeholder.
   Kullanım: chart container'ı .tm-chart-empty ile sar; JS veri yoksa canvas
   yerine bunu gösterir (bkz. tm-states.js TmStates.chartEmpty).
   ──────────────────────────────────────────────────────────────────────────── */
.tm-chart-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--tm-state-gap);
  /* Chart konteynerinin gerçek yüksekliğini miras alır; yoksa min ile korur →
     canvas 0×0 init sorunu (chart.js NaN boyut) engellenir. */
  min-height: var(--tm-state-chart-min-h);
  width: 100%;
  max-width: 100%;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-lg, 8px);
  background: var(--tm-bg-secondary, var(--secondary-50, #f8fafc));
  color: var(--tm-text-secondary, #64748b);
  overflow: hidden;
}

.tm-chart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tm-state-icon-size);
  height: var(--tm-state-icon-size);
  border-radius: var(--radius-full, 9999px);
  background: var(--tm-bg-tertiary, #f1f5f9);
  color: var(--tm-text-muted, #94a3b8);
  font-size: 24px;
}

.tm-chart-empty__icon svg { width: 24px; height: 24px; }

.tm-chart-empty__title {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-semibold, 600);
  color: var(--tm-text-primary, #1e293b);
}

.tm-chart-empty__desc {
  margin: 0;
  max-width: var(--tm-state-max-w);
  font-size: var(--text-xs, 0.75rem);
  color: var(--tm-text-secondary, #64748b);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────────────────
   KPI BOŞ DURUMU — "0" / "Veri yok" durumunda kart çökmesin.
   Kullanım: KPI değer alanına .tm-kpi-empty; kart yüksekliği korunur.
   ──────────────────────────────────────────────────────────────────────────── */
.tm-kpi-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1, 0.25rem);
  min-height: var(--tm-state-kpi-min-h);
  width: 100%;
}

.tm-kpi-empty__value {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: var(--font-bold, 700);
  color: var(--tm-text-muted, #94a3b8);
  line-height: 1.1;
}

.tm-kpi-empty__label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--tm-text-muted, #94a3b8);
}

/* Ortalanmış (grid hücresi merkez) varyant. */
.tm-kpi-empty--center {
  align-items: center;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────────
   GEÇİŞ YARDIMCILARI — TmStates.show() bu data-attribute'u yönetir.
   Aynı konteyner içinde 4 state kardeş dururken min-height paylaşılır → CLS=0.
   ──────────────────────────────────────────────────────────────────────────── */
[data-tm-state-host] {
  position: relative;
}

/* Host içindeki state slotları; aktif olmayan gizlenir. */
[data-tm-state] { display: none; }
[data-tm-state-host][data-tm-active="loading"] [data-tm-state="loading"],
[data-tm-state-host][data-tm-active="empty"]   [data-tm-state="empty"],
[data-tm-state-host][data-tm-active="error"]   [data-tm-state="error"],
[data-tm-state-host][data-tm-active="data"]    [data-tm-state="data"] {
  display: block;
}

/* İlk boyanmada (JS gelmeden) host'un çökmesini engelle. */
[data-tm-state-host]:not([data-tm-active]) {
  min-height: var(--tm-state-min-h-sm);
}

/* Yumuşak giriş — reduced-motion'da kapanır. */
[data-tm-state].tm-fade-in { animation: tm-state-fade 0.2s ease-out; }
@keyframes tm-state-fade { from { opacity: 0; } to { opacity: 1; } }

/* ────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — mobilde daha kompakt, taşma yok.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --tm-state-min-h: 200px;
    --tm-state-chart-min-h: 220px;
  }
  .tm-empty,
  .tm-error,
  .tm-loading {
    padding: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
  }
  .tm-empty__desc,
  .tm-error__desc,
  .tm-chart-empty__desc {
    max-width: 100%;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   ERİŞİLEBİLİRLİK — hareketi azalt.
   ──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tm-skeleton-bar,
  .tm-loading__spinner,
  [data-tm-state].tm-fade-in {
    animation: none;
  }
}