/* ==========================================================================
   DorukCRM — 04-inbox.css
   Gelen kutusunun düzeni ve süzgeç kutusu.

   SIRA ÖNEMLİ. Bu dosyalar tek bir app.css'ten bölündü ve kaskad hâlâ o
   sıraya bağlı: addaki sayı yüklenme sırasıdır. Sırayı belirleyen tek yer
   pages/_partials/styles.php.

   Parçalar 16 KB'ın ALTINDA tutuluyor ve bu ölçü keyfî değil: barındırmanın
   FTP yazması büyük dosyalarda 16384'ün katlarında kesiliyor, 91 KB'lık tek
   parça hâlindeki app.css bu yüzden günlerce sunucuya tam gidemedi. Buraya
   bölüm eklerken dosyayı büyütmek yerine yeni bir parça açın.
   ========================================================================== */

/* --- inbox layout --------------------------------------------------------- */
.inbox {
  display: grid;
  grid-template-columns: var(--list-w) 1fr;
  /* Üstünde bir uyarı şeridi olabildiği için sabit yükseklik değil, kalan
     alanı kaplayan esnek bir kutu. min-height:0 olmadan grid içeriği
     kutuyu şişirir ve taşma iç listeler yerine sayfaya biner. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  /* Gelen kutusu da diğer ekranlarla aynı çerçevede duruyor: dört yandan
     --gutter kadar boşluk (bunu saran .content--frame veriyor) ve kartlarla
     aynı kenarlık. Bir zamanlar tam kanamaydı — sohbete en geniş alanı
     bırakmak için — ama o tercih gelen kutusunu uygulamanın geri kalanından
     ayrı bir yer gibi gösteriyordu.

     overflow:hidden burada iki iş yapıyor: iç listelerin taşmasını kesiyor ve
     yuvarlanan köşelerin altındaki panelleri kırpıyor. İkincisi olmadan
     sohbet listesinin zemini köşelerin dışına taşardı. */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Künye açıkken üçüncü sütun belirir. Izgaranın kendisi değişiyor, panel
   üzerine binmiyor: sohbetin daralması görünür olmalı, yoksa panel mesajların
   üstünü örter ve altında kalan metin sessizce okunamaz hâle gelir. */
.inbox--info-open { grid-template-columns: var(--list-w) 1fr var(--info-w); }

/* min-height:0 sohbet sütunundakiyle aynı sebeple (bkz. 05-inbox-panels.css,
   .chat): onsuz liste ızgara hücresinden uzuyor, .thread-list__items'ın
   overflow-y:auto'su devreye girmiyor ve alt ucu ekranın dışında kalıyordu. */
.thread-list {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* position:relative süzgeç kutusunun ÇAPASI: kutu bu başlığın altına, listenin
   üstüne açılıyor. Çapa arama satırında olsaydı kutu şeridin üstünde başlar ve
   sekmeleri örterdi. */
.thread-list__head {
  padding: .75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.thread-list__search-row { display: flex; gap: .375rem; align-items: center; }
.thread-list__search { position: relative; flex: 1; min-width: 0; }
.thread-list__search .input { padding-left: 2.125rem; background: var(--surface-2); }
.thread-list__search svg {
  position: absolute; left: .6875rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-faint); pointer-events: none;
}

/* --- süzgeç ---------------------------------------------------------------
   Düğme arama kutusuyla aynı yükseklikte duruyor (2.25rem): iki denetim yan
   yana ve biri diğerinden kısa olsaydı satır eğri okunurdu. */
.thread-filter__btn {
  position: relative;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.thread-filter__btn:hover { background: var(--surface-3); color: var(--text); }
.thread-filter__btn svg { width: 16px; height: 16px; }

/* Süzgeç açıkken düğme de açık görünüyor. Yalnızca rozete bırakılsaydı, tek
   ölçütlü bir süzgeç ile hiç süzgeç yokluğu arasındaki fark küçük bir sayıya
   iniyordu. */
.thread-filter__btn[aria-expanded="true"],
.thread-filter__btn--on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* Kaç ölçüt açık. Sıfırken JS hidden yapıyor — sıfır yazan bir rozet süzgeç
   varmış gibi durur. */
.thread-filter__count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #04231a;
  font-size: .625rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.thread-filter__count[hidden] { display: none; }

.thread-filter__panel {
  position: absolute;
  top: calc(100% - .25rem);
  left: .75rem;
  right: .75rem;
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
  padding: .625rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.thread-filter__panel[hidden] { display: none; }

.thread-filter__group + .thread-filter__group {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}

/* Bölüm başlığı. Kapalıyken bölümün tamamı bu tek satır: solda ne sorduğu,
   sağda ne seçildiği. Sekiz bölüm birden açık dururken kutu kendi kaydırma
   çubuğuna düşüyordu ve alttaki başlıklar hiç görünmüyordu. */
.thread-filter__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* Tarayıcının kendi üçgeni kalkıyor; yerine aşağıdaki ::after geliyor.
     İki kural birden gerekiyor — WebKit kendi sözde öğesini ayrıca çiziyor. */
  list-style: none;
}
.thread-filter__head::-webkit-details-marker { display: none; }
.thread-filter__head:hover { background: var(--surface-3); }

/* Başlık artık bir satırın parçası; alt boşluğu kapalıyken çizgiyi
   kaydırıyordu. */
.thread-filter__head .thread-filter__title { margin-bottom: 0; }

/* SEÇİLİ OLAN. Kapalı bir bölümün içinde ne seçildiği başka türlü
   görünmüyor ve süzülmüş bir listeyi süzgeçsiz sanmak bu ekranda en pahalı
   yanlış anlama. Taşan metin kırpılıyor: uzun bir kampanya adı başlığı iki
   satıra bölmemeli. */
.thread-filter__summary {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  color: var(--text-muted);
}

/* Varsayılandan sapmış bölüm işaretleniyor: rozetteki sayı kaç ölçüt açık
   olduğunu söylüyor, bu ise HANGİSİ olduğunu — kutuyu açan operatör
   aradığı bölümü okumadan buluyor. */
.thread-filter__group--on .thread-filter__summary { color: var(--brand); font-weight: 600; }
.thread-filter__group--on .thread-filter__title { color: var(--text); }

/* Ok işareti iki kenarlıktan çiziliyor, gömülü bir SVG'den değil: açılınca
   dönmesi gerekiyor ve tek bir transform ile dönen bir şekil, açık/kapalı
   için iki ayrı işaretten kısa. Rengini de metinden alıyor. */
.thread-filter__head::after {
  content: '';
  flex-shrink: 0;
  width: .4rem;
  height: .4rem;
  margin-right: .125rem;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .12s ease;
}
.thread-filter__group[open] > .thread-filter__head::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.thread-filter__opts { padding-top: .125rem; }

/* Okunmamış anahtarı başlıksız ve kapanmıyor; başlık satırının dolgusuyla
   hizalanıyor. */
.thread-filter__group--flat { padding-left: 0; }

.thread-filter__title {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  margin-bottom: .25rem;
}
.thread-filter__opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .25rem;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  cursor: pointer;
}
.thread-filter__opt:hover { background: var(--surface-3); }
.thread-filter__opt input { flex-shrink: 0; margin: 0; }
.thread-filter__opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thread-filter__foot { margin-top: .5rem; }
.thread-filter__foot .btn[hidden] { display: none; }

.thread-tabs { display: flex; gap: .25rem; margin-top: .625rem; }
.thread-tab {
  flex: 1;
  padding: .375rem .5rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.thread-tab--active { background: var(--surface-3); color: var(--text); }

/* Süzgeç şeridi artık sabit üç düğme değil: sekmeleri işletme tanımlıyor
   (Ayarlar › Gelen kutusu sekmeleri) ve ne sayısı ne etiket uzunlukları
   önceden biliniyor. flex:1 ile paylaştırmak, sekiz sekmede her düğmeyi
   ~35 piksele düşürüp "Ulaşılamadı, mesaj bırakıldı" gibi etiketleri
   okunamaz hâle getiriyordu.

   Ayrılan yalnızca ÖLÇÜ davranışı: renk, dolgu ve yazı tipi yukarıdaki ortak
   kuralda kalıyor, çünkü aynı işi yapan iki şerit ekranda birbirinden farklı
   görünmemeli. (Künyenin bölümleri artık şerit değil, kart: 05b-info-panel.css.)

   Kaydırma açık ama çubuk gizli: 320 piksellik kenar sütununda yatay çubuk,
   listenin kendi dikey çubuğuyla yan yana düştüğünde iki piksellik bir şeride
   dönüşüyor ve tıklanamıyor. Kaydırma yine de çalışıyor (tekerlek, sürükleme,
   klavyeyle sekme gezinmesi). */
.thread-tabs { overflow-x: auto; scrollbar-width: none; }
.thread-tabs::-webkit-scrollbar { display: none; }
.thread-tab { flex: 0 0 auto; white-space: nowrap; }

/* Şerit ikon taşıyor: sekiz sekme yazıyla 320 piksellik kenar sütununa
   sığmıyordu ("Ulaşılamadı, mesaj bırakıldı" tek başına şeridin yarısı).
   Kare düğme sabit genişlikte, sekizi birden ekranda duruyor.

   Kaydırma yine de duruyor: sekme sayısını işletme belirliyor ve otuz
   sekmelik bir şerit hâlâ mümkün. Görünmeyen bir tavan koymaktansa kaydırmayı
   bırakmak yeğ.

   ÜST SINIR YOK ama alt sınır var: 30px dokunmatik hedef için küçük, o yüzden
   düğme yüksekliği 30, tıklama alanı dolgu ile 32'ye çıkıyor. */
.thread-tab--icon {
  width: 2rem;
  height: 1.875rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.thread-tab--icon svg { width: 17px; height: 17px; }

/* İkonun ne olduğunu söyleyen satır. Yüzen bir ipucu (.tip) DEĞİL: yukarıdaki
   .thread-tabs bir kaydırma kabı ve kaydırma kabı taşan çocuğu kırpar — ipucu
   düğmenin üstünde yarım kalırdı. Bu satır kabın dışında.

   min-height, boşken de yer kaplasın diye: adı olmayan bir an (fare şeritten
   çıkıp henüz açık sekmeye dönmemişken) listeyi bir piksel zıplatmamalı. */
.thread-tabs__label {
  min-height: 1rem;
  margin-top: .25rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Özel alanların metin ve sınır kutuları (041/043). Onay kutulu bölümlerle
   aynı iç boşlukta duruyorlar: aynı şeridin içinde iki farklı hizalama,
   süzgeci iki ayrı kutu gibi gösterirdi. */
.thread-filter__text { width: 100%; font-size: .8125rem; padding: .35rem .5rem; }

.thread-filter__range { display: flex; gap: .375rem; }
.thread-filter__range .input {
  width: 100%;
  min-width: 0;
  font-size: .8125rem;
  padding: .35rem .5rem;
}

/* --- kayıt kartı ----------------------------------------------------------
   Sheets'ten (ya da bir formdan) gelen ilk mesaj. Sohbetin dilbilgisi:
   SOLDA müşterinin yazdığı, SAĞDA bizim yazdığımız, ORTADA ne ikisi -- kaydın
   kendisi. Balon gibi solda durduğunda temsilci onu "müşteri şunu yazdı" diye
   okuyordu.

   Renk gelen/giden balonların ikisinden de ayrı (mor): aynı paleti kullansaydı
   göz onu yine bir balon sanardı. */
.record {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .375rem;
  margin: .875rem auto;
  max-width: 34rem;
}

.record__card {
  width: 100%;
  padding: .75rem .875rem;
  border-radius: 14px;
  background: color-mix(in srgb, #6d5bd0 16%, var(--surface));
  border: 1px solid color-mix(in srgb, #6d5bd0 32%, transparent);
  color: var(--text);
}

.record__head {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.record__head .record__title { flex: 1 1 auto; }

/* Satırın tamamını açan simge. Kartın içinde ve sağda: kaydın kendisine ait
   bir eylem, sohbetin değil. */
.record__open {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.record__open svg { width: 16px; height: 16px; }

/* Kartın tamamı satırı açıyor; simge yalnızca bunu haber veriyor. */
.record__card--open { cursor: pointer; }
.record__card--open:hover { border-color: color-mix(in srgb, #6d5bd0 55%, transparent); }
.record__card--open:hover .record__open { color: var(--text); }
.record__card--open:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Sheets bağlantısında seçilen simge. */
.record__icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .0625rem; color: #6d5bd0; }

.record__title {
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.35;
  margin-bottom: .375rem;
}

.record__line {
  font-size: .8125rem;
  line-height: 1.5;
  /* Uzun değerler kırpılmıyor: kaydın tamamı okunabilir olmalı. */
  overflow-wrap: anywhere;
}

.record__meta {
  font-size: .6875rem;
  color: var(--text-muted);
  text-align: center;
}