/* ==========================================================================
   DorukCRM — 04c-lead-table.css
   Gelen kutusunun tablo görünümü: kampanya, ad, telefon, e-posta.

   NEDEN AYRI BİR PARÇA. 04-inbox.css 11 KB ve 16 KB eşiğine yaklaşıyor;
   barındırmanın FTP yazması o eşiğin katlarında kesiyor (bkz.
   pages/_partials/styles.php). Sıra kaskadın kendisi: bu parça 04b'den sonra
   yükleniyor ve yalnızca kendi bloğunu tanımlıyor, hiçbir kuralı yenmiyor.
   ========================================================================== */

/* Tablo sohbetin ızgara hücresini paylaşıyor: ikisinden yalnızca biri
   görünür. min-width:0 olmadan geniş bir tablo hücreyi genişletiyor ve
   soldaki liste eziliyor — grid öğesinin varsayılan min-width'i auto. */
.lead-table {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
}

/* Kaydırma KABI tablonun kendisi değil, sarmalayıcı: <table> üzerinde
   overflow çalışmıyor ve başlık satırının yapışkan kalması da bu kaba
   bağlı. */
.lead-table__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.lead-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

/* Başlık kaydırmada yerinde duruyor. Yüz satırlık bir tabloda hangi sütunun
   ne olduğunu hatırlamak için başa dönmek, tablonun tek işini (yan yana
   okumak) elinden alırdı. */
.lead-table__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2, var(--surface));
  border-bottom: 1px solid var(--border);
  padding: .625rem .75rem;
  text-align: left;
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.lead-table__table td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  /* Sütunlar EZİLMİYOR, tablo kaydırılıyor: dar ekranda e-posta adresini üç
     noktaya indirmek, sütunu hiç göstermemekle aynı şey. */
  white-space: nowrap;
}

.lead-table__row { cursor: pointer; }
.lead-table__row:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.lead-table__row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Açık olan konuşma tabloda da işaretli: operatör satıra tıklayıp sohbete
   geçtikten sonra tabloya döndüğünde nerede kaldığını görmeli. */
.lead-table__row--active { background: var(--surface-3);
  /* Açık satır hover'dan BELİRGİN olmalı (denetim 2026-09-23, UI-549):
     --primary-soft hiçbir yerde tanımlı değildi ve yedek rgba(0,0,0,.05)
     koyu temada 1.03:1 veriyordu -- yani görünmezdi. Sol kenar çubuğu tema
     bağımsız çalışıyor. */
  box-shadow: inset 3px 0 0 var(--brand); }

/* Okunmamışı olan lead kalın: sohbet listesindeki rozetin tablodaki
   karşılığı. Rozeti sütun yapmak beşinci bir sütun demekti ve tablo zaten
   yatay olarak kaydırılıyor. */
.lead-table__row--unread td { font-weight: 600; }

.lead-table__phone,
.lead-table__email { font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

/* Kampanyanın hattan geldiği görünür durmak zorunda: aksi hâlde operatör
   hattın kampanyasını lead'in kampanyası sanıp raporu yanlış okur. */
.lead-table__inherited { color: var(--text-muted); font-style: italic; }

.lead-table__empty { padding: 2.5rem 1rem; text-align: center; }

/* Dar ekranda tablo tam genişlik: liste sütunu zaten 12-mobile.css ile
   gizleniyor ve tablo sohbetin yerine geçiyor. */
@media (max-width: 900px) {
  .lead-table__table { font-size: .8125rem; }
  .lead-table__table thead th,
  .lead-table__table td { padding: .5rem .5rem; }
}

/* Kullanıcıya göre sütunlar (095, madde 39). */
.lead-table__toolbar { display: flex; justify-content: flex-end; padding: .5rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.lead-table__columns { position: relative; }
.lead-table__columns svg { width: .875rem; height: .875rem; vertical-align: -2px; }
.lead-table__columns-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 16rem; max-height: 60vh; overflow-y: auto; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow); }
.lead-table__columns-list { display: grid; gap: .25rem; }
.lead-table__columns-item { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: .375rem; align-items: center; padding: .25rem .25rem; border-radius: var(--radius-sm); font-size: .8125rem; }
.lead-table__columns-item label { display: flex; gap: .5rem; align-items: center; cursor: pointer; min-width: 0; }
.lead-table__columns-item--on { background: var(--surface-2, var(--surface-3)); }
.lead-table__columns-item--on[draggable="true"] { cursor: grab; }
.lead-table__columns-item--drag { opacity: .5; outline: 1px dashed var(--brand); }
.lead-table__columns-grip { color: var(--text-muted); font-size: .75rem; letter-spacing: -2px; }
.lead-table__columns-move { display: flex; gap: 2px; }
.lead-table__columns-move button { width: 1.5rem; height: 1.5rem; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; font-size: .75rem; line-height: 1; }
.lead-table__columns-sep { margin: .5rem 0 .125rem; }
/* Cevap bekliyor (madde 47): satırın başında yeşil şerit. */
.lead-table__row--awaiting td:first-child { box-shadow: inset 3px 0 0 var(--success); }