/* ==========================================================================
   DorukCRM — 09-widgets.css
   Tek bir ekrana bağlı olmayan bileşenler: modal, anahtar, kapatma formu, rozetler.

   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.
   ========================================================================== */

/* --- lead kapatma ---------------------------------------------------------
   Kapanış üç yerde görünüyor ve üçü aynı bilgiyi taşıyor: liste satırındaki
   rozetler, sohbetin başındaki özet şeridi, ve kapatma formunun kendisi.
   Ortak olan renk kodu: geciken bir tekrar arama her yerde danger tonunda,
   çünkü listede sessizce kaybolan tek şey oydu. */

.thread__chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3125rem; }
.thread__chip {
  font-size: .6875rem; line-height: 1;
  padding: .25rem .4375rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  white-space: nowrap;
}
.thread__chip--due { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
/* Spam (067): kırmızı zemin + kalın; "×N kayıt"tan ayrılsın diye kenarlıklı. */
.thread__chip--spam { background: var(--danger-bg); color: var(--danger); font-weight: 700; box-shadow: inset 0 0 0 1px currentColor; }
/* Sorumlu (061): satırın altındaki baş harf + ad; havuzdaysa uyarı tonu. */
.thread__chips--who { margin-top: .25rem; }
.thread__chip--who { font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.thread__chip-avatar { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.thread__chip--pool { background: var(--warning-bg, var(--surface-3)); color: var(--warning, var(--text-muted)); font-weight: 600; }

.lead-summary {
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.lead-summary__row { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.lead-summary__label {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-right: .25rem;
}
.lead-summary__tag {
  font-size: .75rem; padding: .1875rem .5rem;
  border-radius: 999px;
  background: var(--surface-3); color: var(--text);
}
.lead-summary__tag--due { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.lead-summary__note {
  margin: .5rem 0 0;
  font-size: .8125rem; color: var(--text-muted);
  white-space: pre-wrap;
}

/* Form mesajların YERİNE geçiyor, bu yüzden kendi kaydırmasını taşıyor:
   sohbet paneli sabit yükseklikte ve altı alanlık bir form dar ekranda
   taşacaktı. */
.lead-close {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.125rem 1.5rem;
  background: var(--bg);
}
.lead-close__head { margin-bottom: 1rem; }
.lead-close__title { margin: 0 0 .25rem; font-size: 1rem; }
.lead-close__grid {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.lead-close__actions { display: flex; gap: .5rem; margin-top: 1.25rem; }

/* --- anahtar (switch) -----------------------------------------------------
   Görünüşü kaydırmalı, işi yapan yine bir checkbox: klavye, ekran okuyucu ve
   form davranışı bedava geliyor. Girdi gizleniyor ama kaldırılmıyor — ekran
   okuyucu için display:none bir alanı yok etmek demekti. */
.switch { display: flex; align-items: flex-start; gap: .625rem; cursor: pointer; }
.switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  flex-shrink: 0;
  width: 42px; height: 24px;
  margin-top: .125rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  transition: background .15s ease, border-color .15s ease;
}
.switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.switch__input:checked + .switch__track { background: var(--brand); border-color: var(--brand); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(18px); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__thumb { transition: none; }
}

/* --- modal (sayfa ortasındaki uyarı ve onay kutusu) -----------------------
   Toast köşede beliriyor ve kendiliğinden kayboluyor: arka planda olup biteni
   bildirmek için doğru, ama kullanıcının başlattığı bir işlemin sonucu ya da
   bir onay sorusu için değil — ikisi de gözden kaçıyordu. Bu kutu sayfayı
   perdeleyip ortada duruyor, yani kapatılmadan devam edilemiyor.

   Perde ile kutu iki ayrı animasyon kullanıyor ve bu bilerek: tek animasyonda
   perdenin ölçeklenmesi ya da kutunun yalnızca sönerek gelmesi gerekirdi. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;   /* toast'lar 60'ta duruyor; perde onların da üstünde olmalı */
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, #000 45%, transparent);
  animation: modal-in .16s ease-out;
}

.modal__dialog {
  width: min(420px, 100%);
  /* Uzun bir hata metni ekranı taşırmasın: kutu kendi içinde kaysın. */
  max-height: 100%;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  animation: modal-dialog-in .16s ease-out;
}

/* Ton yalnızca `color` ile veriliyor; dairenin zemini de svg de onu
   currentColor üzerinden türetiyor, böylece yeni bir ton tek satır. */
.modal__icon {
  width: 48px; height: 48px;
  margin: 0 auto .875rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.modal__icon svg { width: 24px; height: 24px; }
.modal__icon--success { color: var(--success); }
.modal__icon--error   { color: var(--danger); }
.modal__icon--warning { color: var(--warning); }
.modal__icon--info    { color: var(--brand); }

.modal__title { margin: 0 0 .375rem; font-size: 1rem; }

.modal__message {
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.55;
  /* Sunucudan gelen metinde boşluksuz uzun bir kimlik olabiliyor; kırılmazsa
     kutuyu yatay olarak taşırıyor. */
  overflow-wrap: anywhere;
}

.modal__message p { margin: 0 0 .5rem; }
.modal__message p:last-child { margin-bottom: 0; }

.modal__actions {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 1.25rem;
}

/* Seçenek listesi (App.choose). Sola dayalı: kutunun kendisi ortalanmış ama
   yan yana okunacak iki numara ortalandığında hangisinin hangisi olduğu
   kayboluyor. */
.modal__choices {
  display: flex; flex-direction: column; gap: .25rem;
  margin-top: 1rem; text-align: left;
}
.modal__choice {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .625rem; border: 1px solid var(--border); border-radius: .5rem;
  font-size: .875rem; cursor: pointer;
}
.modal__choice:hover { border-color: var(--brand); }
.modal__choice:has(input:checked) { border-color: var(--brand); background: var(--surface-2, transparent); }

/* Form taşıyan kutu. Bildirim kutusu ortalanmış tek bir cümle gösteriyor;
   form ise etiketli alanlar demek ve ortalanmış bir etiket, altındaki alanın
   solundan başlamayınca okunmuyor. Genişlik de biraz daha fazla: 420px'te
   "Otomatik (numaradan)" seçeneği kutuyu zorluyordu. */
.modal__dialog--form {
  width: min(480px, 100%);
  text-align: left;
}
.modal__dialog--form .modal__title { margin-bottom: .25rem; }
.modal__dialog--form .alert { margin: 0 0 1.25rem; }
.modal__dialog--form .field { margin-bottom: 1rem; }
/* Kutunun düğmeleri sağda: kutuda "Vazgeç / Kaydet" son okunan şey olmalı. */
.modal__dialog--form .modal__actions { justify-content: flex-end; }

.modal__subtitle {
  margin: 0 0 1rem;
  font-size: .8125rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Perdenin arkasındaki sayfa kaydığında kutu yerinde duruyor ve arayüz
   kırılmış gibi görünüyordu. */
/* Gövde zaten kaydırmıyor: kabuk .app { height:100vh; overflow:hidden } ile
   sabit ve gerçek kaydırma kabı .content. Yalnızca body'yi kilitlemek bu
   yüzden hiçbir şey yapmıyordu — modal açıkken arkadaki liste tekerlekle
   kaymaya devam ediyordu. İkisi birden kilitleniyor. */
body.modal-open { overflow: hidden; }
body.modal-open .content { overflow: hidden; }
body.modal-open .settings__main { overflow: hidden; }

@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  /* Düğmeler alt alta düşerken sıra ters çevriliyor: onay düğmesi geniş
     ekranda sağda, yani sırada sonuncu; üstte kalması onu baskın tutuyor. */
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal__dialog { animation: none; }
}

/* --- sayaç satırı ---------------------------------------------------------
   Ekranın tepesindeki birkaç sayı. Daha önce `grid grid--4` + `.card` + satır
   içi stille çiziliyordu; görünüm aynı kaldı. Fark, satır içi stilin medya
   sorgusu taşıyamaması: dar ekranda kutular tek sütuna dizilip sayaçları
   sayfanın altına itiyordu. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.stat-tile {
  min-width: 0;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.stat-tile__label { font-size: .75rem; color: var(--text-muted); }
.stat-tile__value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

@media (max-width: 640px) {
  /* İki sütun, dört sayacı da tek bakışta tutuyor. */
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
}

/* --- bağlı hesap kartı ----------------------------------------------------
   Numaralar artık tek bir büyük tablo değil, hesap başına bir kart: bir
   kiracının iki ayrı WhatsApp Business hesabı olduğunda hangi numaranın
   hangisine ait olduğu tabloda yalnızca bir sütundu ve gözden kaçıyordu.
   Kart başlığı hesabı söylüyor, numaralar onun içinde açılıyor.

   Değerler `.card` ile birebir aynı: aynı öğe iki sınıfı birden taşıyabilsin
   ve .acct tek başınayken de kart gibi görünsün. */
.acct {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Kartlar arasındaki boşluk kartın kendi işi: liste kaç hesap olduğunu
   bilmiyor ve her birine satır içi margin yazmak gerekiyordu. */
.acct + .acct { margin-top: .75rem; }

.acct__head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
}

.acct__head > svg {
  width: 18px; height: 18px;
  margin-top: .125rem;
  color: var(--text-muted);
}

/* min-width:0 olmadan uzun bir hesap adı esnek kutuyu şişiriyor ve rozetleri
   kartın dışına itiyor. */
.acct__ident { flex: 1; min-width: 0; font-weight: 600; font-size: .9375rem; }

.acct__meta {
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  word-break: break-word;
}

.acct__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .375rem;
}

.acct__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0 1.25rem 1rem;
}

/* Açma düğmesi solda, kalan işlemler sağda. Sağa yaslamayı `:last-child`
   üzerinden yapmak, tek düğmeli kartta o tek düğmeyi sağa atardı. */
.acct__foot .acct__toggle { margin-right: auto; }

/* Hesabın numaraları kutusu (WhatsApp hesapları). Her satır numaranın
   sayfasına giden tek bir bağlantı: avatar, ad + numara, durum rozeti. */
.acct-phones { list-style: none; margin: 0; padding: 0; }
.acct-phones li + li { border-top: 1px solid var(--border); }
.acct-phones__row {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .25rem;
  color: inherit; text-decoration: none;
}
.acct-phones__row:hover { background: var(--surface-2, transparent); }
.acct-phones__ident {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; column-gap: .375rem;
}
.acct-phones__ident .mono { flex-basis: 100%; }






@media (prefers-reduced-motion: reduce) {
  .acct__toggle svg { transition: none; }
}

/* --- dil rozeti -----------------------------------------------------------
   Dil kodu bir ad değil, iki üç harflik bir kod: mono yazı onu tablodaki
   metinden ayırıyor ve alt alta gelen TR/EN/AR aynı genişlikte diziliyor. */
.chip {
  display: inline-block;
  padding: .125rem .375rem;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

/* --- alan çifti -----------------------------------------------------------
   Tek etiketin altındaki iki girdi (dil kodu + dil adı). Dar ekranda yan yana
   duran iki girdinin ikisi de okunamayacak kadar daralıyor. */
.field__pair { display: flex; align-items: flex-start; gap: .5rem; }

/* .input width:100% taşıyor; min-width:0 olmadan esnek kutu onu daraltamıyor
   ve çift, alanın dışına taşıyor. */
.field__pair > .input { min-width: 0; }

@media (max-width: 480px) {
  .field__pair { flex-direction: column; }
}

/* --- ayar rayı rozetleri --------------------------------------------------
   Ray artık her bölümün yanında o bölümün sayısını taşıyor: kaç numara, kaç
   anahtar, kaç kullanıcı. Ton yalnızca dikkat gerektiren satırda değişiyor —
   her satırı renklendirmek hiçbirini öne çıkarmazdı. */
.settings__badge {
  margin-left: auto;   /* metin solda kalsın, sayı rayın sağ kenarına yaslansın */
  flex-shrink: 0;
  min-width: 1.375rem;
  padding: .0625rem .375rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.settings__badge--warning { background: var(--warning-bg); color: var(--warning); }
.settings__badge--danger  { background: var(--danger-bg);  color: var(--danger); }

@media (max-width: 900px) {
  /* Ray burada yatay bir şerit; içindeki bağlantılar sıkıştırılırsa rozet
     metnin üstüne biniyor. Sıkışmak yerine kaysınlar — şerit zaten
     overflow-x taşıyor. */
  .settings__rail .settings__link { flex-shrink: 0; }
}
/* Ön lead sinyalleri (071): "fiyat gördü" vb.; olumlu bir işaret, yeşil. */
.thread__chip--signal { background: var(--success-bg); color: var(--success); font-weight: 600; }