/* ==================================================================
   TM PRO REDESIGN — 2026-07-29
   Kapsamlı profesyonel global tasarım-sistemi. Referans: sektör-standardı
   pazaryeri-yönetim araçları (temiz, veri-yoğun ama sade, rafine).
   TÜM sayfalara global uygulanır (base.html, interaction-polish'ten SONRA).
   Amaç: kozmetik tweak DEĞİL — tipografi/kart/tablo/buton/input/başlık
   bileşenlerini tek rafine sisteme indirir → tüm sayfalar profesyonel görünür.
   Light-öncelikli; dark mevcut override'lardan gelir.
   ================================================================== */

:root {
  --pro-line:      #e7ecf3;   /* rafine ince kenar */
  --pro-line-soft: #eef2f7;   /* satır ayırıcı */
  --pro-surface:   #ffffff;
  --pro-bg:        #f6f8fb;   /* sakin sayfa zemini */
  --pro-ink:       #101828;   /* birincil metin */
  --pro-ink-2:     #475467;   /* ikincil */
  --pro-ink-3:     #98a2b3;   /* muted */
  --pro-brand:     var(--color-primary, #0175e4);
  --pro-brand-2:   var(--color-primary-hover, #0163c2);
  --pro-radius:    12px;
  --pro-radius-sm: 9px;
  --pro-shadow:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
  --pro-shadow-md: 0 4px 12px rgba(16,24,40,.06);
  --pro-pad:       18px;
}

/* ---------- Sakin, hafif sayfa zemini ---------- */
body.tmv2-body, .tmv2-page-host {
  background: var(--pro-bg) !important;
}

/* ---------- Tipografi: rafine hiyerarşi, tabular rakam ---------- */
.tmv2-page, .tmv2-page-body {
  color: var(--pro-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}
.tmv2-page :where(h1,h2,h3,h4,h5,h6) { letter-spacing: -0.018em; color: var(--pro-ink); }
.tmv2-page :where(.num, [data-bind="value"], .tm-mono, .kpi-value, .en-stat__v) {
  font-variant-numeric: tabular-nums;
}

/* ---------- Kanonik KART / PANEL — temiz, rafine, tutarlı ---------- */
.tmv2-page :where(.card, .tmv2-panel, .tmv2-dash-panel, .overview-widget-panel,
  .ch-panel, .tm-card, .cpk-card, .qa-card, .en-ops, .en-filters,
  .tm-alerts-filters, .xpanel, .bb-panel, .tm-panel) {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow) !important;
}

/* Sayfa-başlık kartı: rafine, kompakt, net kicker */
.tm-page-head {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow) !important;
  padding: 14px 18px !important;
}
.tm-kicker, .tm-page-head__titles .tm-kicker {
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--pro-ink-3) !important;
}
.tm-page-sub { color: var(--pro-ink-2) !important; font-size: 13.5px !important; }

/* ---------- VERİ TABLOLARI — profesyonel görünümün kalbi ---------- */
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
/* Başlık satırı: küçük, muted, uppercase, ince alt-çizgi */
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table) thead th {
  background: #fafbfd !important;
  color: var(--pro-ink-3) !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .045em !important;
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--pro-line) !important;
  white-space: nowrap;
}
/* Gövde hücreleri: ferah, okunur, ince ayırıcı */
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table) tbody td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--pro-line-soft) !important;
  color: var(--pro-ink) !important;
  font-size: 13.5px !important;
  vertical-align: middle;
}
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table) tbody tr:last-child td {
  border-bottom: none !important;
}
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table) tbody tr {
  transition: background-color .14s ease;
}
.tmv2-page :where(.en-table, .xtable, .tm-table, .tm-alerts-tbl, table.table, .orders-table) tbody tr:hover {
  background: #f7faff !important;
}

/* ---------- BUTONLAR — rafine, tutarlı (ağır gradient değil) ---------- */
.tmv2-page :where(.btn) {
  border-radius: var(--pro-radius-sm) !important;
  font-weight: 600 !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.tmv2-page :where(.btn--primary, .btn-primary, .btn-baklava-primary, .tm-cta-btn, .tm-headbtn--cta) {
  background: var(--pro-brand) !important;
  background-image: none !important;   /* rafine solid; ağır gradient kaldırıldı */
  border: 1px solid var(--pro-brand) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.06) !important;
}
.tmv2-page :where(.btn--primary:hover, .btn-primary:hover, .btn-baklava-primary:hover, .tm-cta-btn:hover, .tm-headbtn--cta:hover) {
  background: var(--pro-brand-2) !important;
  border-color: var(--pro-brand-2) !important;
  transform: translateY(-1px);
}
.tmv2-page :where(.btn--outline-secondary, .btn--outline-primary, .btn-baklava-outline, .btn--secondary) {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-line) !important;
  color: var(--pro-ink-2) !important;
}
.tmv2-page :where(.btn--outline-secondary:hover, .btn--outline-primary:hover, .btn-baklava-outline:hover) {
  border-color: #cdd5e0 !important; color: var(--pro-ink) !important; background: #fbfcfe !important;
}

/* ---------- INPUT / SELECT — temiz, tutarlı ---------- */
.tmv2-page :where(.form-control, .tm-input, .en-input, input:not([type=checkbox]):not([type=radio]), select, textarea) {
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius-sm) !important;
  color: var(--pro-ink) !important;
  background: var(--pro-surface) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tmv2-page :where(.form-control:focus, .tm-input:focus, .en-input:focus, input:focus, select:focus, textarea:focus) {
  border-color: var(--pro-brand) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb,1,117,228),.12) !important;
  outline: none !important;
}

/* ---------- STAT / KPI kartları — rafine, ölçülü renk ---------- */
.tmv2-page :where(.en-stat, .tm-alerts-stat, .xstat, .bb-stat, .kpi-card:not(.accent)) {
  border: 1px solid var(--pro-line) !important;
  border-radius: var(--pro-radius) !important;
  box-shadow: var(--pro-shadow) !important;
  background: var(--pro-surface) !important;
}

/* Yumuşak giriş animasyonu — sayfa yüklenince kartlar sırayla belirir */
@media (prefers-reduced-motion: no-preference) {
  .tmv2-page .tm-page-head,
  .tmv2-page .en-stat, .tmv2-page .kpi-card,
  .tmv2-page .ch-panel, .tmv2-page .overview-widget-panel {
    animation: proRise .42s cubic-bezier(.22,.61,.36,1) both;
  }
}
@keyframes proRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .tmv2-page * { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   GENEL BAKIŞ İYİLEŞTİRME 2026-07-29 (Canlı Performans ile tutarlı)
   ══════════════════════════════════════════════════════════════ */
/* 1) KPI kartları DENGELİ → 5 eşit sütun (featured Ciro aşırı-geniş değil) */
@media (min-width: 1100px) {
  .tmv2-dashboard .kpi-grid,
  #overviewTab .kpi-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
/* 2) Boş-durum ikonları GLOBAL marka-yumuşak daire (bilgilendirici/canlı) —
   overview donut/chart empty + tüm .tm-live-empty kullanan sayfalar */
.tm-live-empty svg,
.tm-live-empty [data-lucide] {
  color: var(--pro-brand, #0175e4) !important;
  background: var(--tm-primary-soft, #e8f3ff);
  border-radius: 50%;
  padding: 12px !important;
  box-sizing: content-box;
  width: 28px !important; height: 28px !important;
}