/* ======================================================================== */
/* MADDE 45 · INBOX                                                         */
/*                                                                          */
/* Wrike'in sol panelinin karsiligi: ikincil bir kenar cubugu + icerik.     */
/*                                                                          */
/* ⚠ URUN KABUGUNUN KENAR CUBUGUYLA KARISTIRILMAMALI. Soldaki ana menu      */
/* (`.asv-kenar`) portalin BOLUMLERI arasinda geziniyor; buradaki ikinci    */
/* kenar, Inbox'IN ICINDE geziniyor. Ayni sinifi paylassalardi ana menuye   */
/* yapilan her degisiklik Inbox'i da bozardi.                              */
/* ======================================================================== */

.asv-inbox-ekrani {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: var(--asv-space-md);
  align-items: start;
}

/* Dar ekranda kenar USTE geciyor, gizlenmiyor: gizlenseydi telefondan
   giren kullanici bolumler arasinda hic gezinemezdi. */
@media (max-width: 900px) {
  .asv-inbox-ekrani {
    grid-template-columns: 1fr;
  }
}

.asv-inbox-kenar {
  display: flex;
  flex-direction: column;
  gap: var(--asv-space-md);
  padding: var(--asv-space-sm);
  border: 1px solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  background: var(--asv-yuzey);

  /* ⚠ KENDI ICINDE KAYIYOR, SAYFAYLA BIRLIKTE DEGIL. Uzun bir klasor
     agacinda sayfayla birlikte kaysaydi, kullanici listenin altina
     inerken bolum dugmelerini kaybederdi. */
  position: sticky;
  top: var(--asv-space-md);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}

.asv-inbox-bolum {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asv-inbox-bolum-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asv-space-xs);
  padding: var(--asv-space-xs) var(--asv-space-sm);
  font-size: var(--asv-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--asv-metin-cok-soluk);
}

.asv-inbox-oge {
  display: flex;
  align-items: center;
  gap: var(--asv-space-xs);
  width: 100%;
  padding: 6px var(--asv-space-sm);
  padding-left: calc(var(--asv-space-sm) + (var(--asv-girinti, 0) * 0.85rem));
  border: none;
  border-radius: var(--asv-kose);
  background: none;
  color: var(--asv-metin-renk);
  font-size: var(--asv-text-sm);
  text-align: left;
  cursor: pointer;
}

/* Tema dugmelere buyuk harf veriyor; bunlar menu ogesi, dugme degil. */
[data-tema] .asv-inbox-ekrani .asv-inbox-oge,
[data-tema] .asv-inbox-ekrani .asv-surucu-ad {
  text-transform: none;
  letter-spacing: normal;
  font-weight: inherit;
  min-height: 0;
}

.asv-inbox-oge:hover,
.asv-inbox-oge:focus-visible {
  background: var(--asv-zemin);
}

.asv-inbox-oge.asv-secili {
  background: var(--asv-zemin);
  color: var(--asv-vurgu-renk);
  font-weight: 600;
}

/* Simge SABIT GENISLIKTE: degisken genislikte olsaydi her satirin metni
   farkli yerden baslar ve liste "titrek" gorunurdu (madde 43'un ayni
   sinif arizasi). */
.asv-inbox-ikon {
  flex: 0 0 auto;
  width: 1.2rem;
  text-align: center;
  color: var(--asv-metin-soluk);
}

.asv-inbox-agac-satir {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: calc(var(--asv-girinti, 0) * 0.75rem);
}

.asv-inbox-agac-satir .asv-inbox-oge {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--asv-space-xs);
}

.asv-inbox-agac-satir .asv-inbox-oge > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ⚠ ISLEM DUGMELERI MUTLAK DEGIL AMA GORUNURLUGU SABIT YER KAPLIYOR
   (madde 43 kurali). `display: none` kullanilsaydi, uzerine gelince
   satirdaki ad kisalir ve agac saga sola oynardi. */
.asv-inbox-islem {
  flex: 0 0 auto;
  visibility: hidden;
}

.asv-inbox-agac-satir:hover .asv-inbox-islem,
.asv-inbox-agac-satir:focus-within .asv-inbox-islem {
  visibility: visible;
}

/* ---- Govde ------------------------------------------------------------- */

.asv-inbox-govde {
  min-width: 0;
}

.asv-inbox-baslik {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--asv-space-sm);
  margin-bottom: var(--asv-space-sm);
}

.asv-inbox-baslik .asv-kart-baslik {
  flex: 1 1 auto;
  margin: 0;
}

.asv-inbox-etiketler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asv-space-xs);
  margin-bottom: var(--asv-space-sm);
}

/* ---- Liste ------------------------------------------------------------- */

.asv-inbox-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  overflow: hidden;
}

.asv-inbox-satir {
  display: flex;
  align-items: center;
  gap: var(--asv-space-sm);
  padding: var(--asv-space-xs) var(--asv-space-sm);
  border-bottom: 1px solid var(--asv-kenar-renk);
  background: var(--asv-yuzey);
}

.asv-inbox-satir:last-child {
  border-bottom: none;
}

.asv-inbox-satir:hover {
  background: var(--asv-zemin);
}

.asv-inbox-satir-orta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asv-inbox-satir-orta > a,
.asv-inbox-satir-orta > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gorev adi mavi baglanti DEGIL - gorev tablosundaki ayni karar. */
[data-tema] .asv-inbox-satir-orta > a {
  color: var(--asv-metin-renk);
  text-decoration: none;
}

[data-tema] .asv-inbox-satir-orta > a:hover,
[data-tema] .asv-inbox-satir-orta > a:focus-visible {
  color: var(--asv-vurgu-renk);
  text-decoration: underline;
}

.asv-inbox-satir-alt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--asv-space-xs);
  font-size: var(--asv-text-xs);
}

.asv-inbox-sorumlu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.asv-inbox-sorumlu .asv-kisi-avatar {
  margin-left: -6px;
  border: 1px solid var(--asv-yuzey);
}

.asv-inbox-ilerleme {
  flex: 0 0 auto;
  width: 6rem;
}

/* ---- Surucu (dosya alani) ---------------------------------------------- */

.asv-surucu {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--asv-space-md);
  align-items: start;
}

@media (max-width: 900px) {
  .asv-surucu {
    grid-template-columns: 1fr;
  }
}

.asv-surucu-agac {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--asv-space-sm);
  border: 1px solid var(--asv-kenar-renk);
  border-radius: var(--asv-kose);
  background: var(--asv-yuzey);
}

.asv-surucu-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--asv-space-xs);
  padding: var(--asv-space-xs) 0;
  font-size: var(--asv-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--asv-metin-cok-soluk);
}

.asv-surucu-satir {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: calc(var(--asv-girinti, 0) * 0.75rem);
}

.asv-surucu-satir.asv-secili .asv-surucu-ad {
  color: var(--asv-vurgu-renk);
  font-weight: 600;
}

.asv-surucu-ad {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--asv-space-xs);
  padding: 4px var(--asv-space-xs);
  border: none;
  border-radius: var(--asv-kose);
  background: none;
  color: var(--asv-metin-renk);
  font-size: var(--asv-text-sm);
  text-align: left;
  cursor: pointer;
}

.asv-surucu-ad:hover,
.asv-surucu-ad:focus-visible {
  background: var(--asv-zemin);
}

.asv-surucu-ad > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Agac satirlarindaki islemler - Inbox agaciyla ayni kural. */
.asv-surucu-islem {
  flex: 0 0 auto;
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: 2px;
}

.asv-surucu-satir:hover .asv-surucu-islem,
.asv-surucu-satir:focus-within .asv-surucu-islem {
  visibility: visible;
}

.asv-surucu-icerik {
  min-width: 0;
}

.asv-surucu-yukleme {
  display: flex;
  align-items: center;
  gap: var(--asv-space-sm);
  margin-bottom: var(--asv-space-sm);
}

/* ---- Kenar cubugu kucuk dugmeleri (2026-10) ---------------------------- */
/* ⚠ OLCULEN ARIZA: neon katmani BUTUN dugmelere koyu zemin veriyor
   (`[data-tema] :where(button)`); kurumsal katman bu iki kucuk dugmeyi
   ezmiyordu. "Projeler ve klasorler" basligindaki `+` ve agactaki ac/kapa
   oku acik zemin uzerinde KOYU KARE olarak gorunuyordu. Ozgulluk (0,2,0)
   tema kuralini (0,1,0) bilincli olarak geciyor. */
[data-tema] .asv-inbox-ekrani .asv-ekleme-arti,
[data-tema] .asv-inbox-ekrani .asv-ac-kapa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;
  min-height: 1.6rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--asv-metin-soluk);
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

[data-tema] .asv-inbox-ekrani .asv-ekleme-arti:hover,
[data-tema] .asv-inbox-ekrani .asv-ekleme-arti:focus-visible,
[data-tema] .asv-inbox-ekrani .asv-ac-kapa:hover,
[data-tema] .asv-inbox-ekrani .asv-ac-kapa:focus-visible {
  background: var(--asv-zemin);
  border-color: var(--asv-kenar-renk);
  color: var(--asv-vurgu-renk);
}

.asv-inbox-ekrani .asv-ac-kapa-bosluk {
  display: inline-block;
  flex: none;
  width: 1.6rem;
}

/* Okunmamis bildirim sayaci (Inbox · Bildirimler bolumu). */
.asv-inbox-oge .asv-sayi {
  margin-left: auto;
}