/* ==========================================================================
   TEDARİKÇİ NOTU HÜCRESİ

   Sütunda iki şey var: notun metni ve — o ürün için bir mesaj konusu
   açıldıysa — mesaj ikonu. İkon YALNIZ konu varsa çıkıyor; her satıra
   koymak, hiçbir şey söylemeyen bir sütun sırası üretirdi.
   ========================================================================== */

/* İkon SÜTUNA ORTALI (kullanıcı kararı 2026-09-29). Sola yaslıyken sayı
   kalkınca hücrede tek başına asılı kalıyordu.

   RENKLİ KUTU HÜCREYİ DOLDURUYOR (kullanıcı kararı, ikinci tur): kare bir
   rozet yerine hücre genişliğinde bir şerit. Bunun için hücrenin kendi
   dolgusu kalkıyor ve kap hücre yüksekliğini alıyor. */
/* Kutu artık hücreyi DOLDURMUYOR: 100x40, ortalanmış (kullanıcı kararı
   2026-09-29). Hücrenin kendi dolgusu yine de kalkık — kutu kendi ölçüsünü
   taşıyor ve dolgu üstüne binerse dar satırlarda hücreyi büyütürdü. */
.gozlem-tablo tbody td.hucre-not { padding: var(--p-a1) var(--p-a2); }

.not-hucre {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  height: 100%;
}

/* ---- MESAJLAŞMA ARAYÜZÜ RENK KURALI (kullanıcı kararı 2026-09-29) ----

     d-gelen      YEŞİL   son söz karşı tarafta — gelen mesaj
     d-gonderilen SARI    son söz bende — cevap yazılmış
     d-yok        soluk   hiç mesaj yok, tıklayınca konuşma başlar

   KIRMIZI BİLEREK BOŞ: "önemli" işareti için ayrıldı. Gönderen, mesajı
   yollamadan önce "önemli" kutusunu işaretleyebilecek ve o konu kırmızı
   görünecek. Kırmızıyı bugün yöne harcamak, yarın önemliyi işaretsiz
   bırakırdı — acil olanın rengi, sıradan bir gelen mesajla paylaşılmaz.

   BU KURAL İKİ EKRANIN ORTAK KURALI: portal ve ERP'nin Müşteri Notu
   ekranı. Önemli işareti henüz YAZILMADI; mesajlaşma turunda iki tarafa
   birden girecek.

   Önce dört hâl vardı; "yanıt bekleyen" (okudum ama yanıtlamadım)
   kullanıcı kararıyla kalktı — okunmuş bir mesaj da gelen mesajdır.

   ÇERÇEVE VE ZEMİN KALKTI: renk artık ikonun kendisinde. Rozet görünümü
   sayıyla birlikte anlamlıydı; sayı kalkınca geriye tek ikonu kutulayan
   boş bir çerçeve kalıyordu. */
/* KUTU RENGE GÖRE DOLUYOR (kullanıcı kararı 2026-09-29): çerçeve yok,
   dolgu var. Mesaj olan satır sütunda uzaktan seçiliyor; olmayan satır
   boş kalıyor — 98 satırın 93'ünde mesaj yok, hepsi dolu olsaydı sütun
   renk gürültüsüne dönerdi. */
/* Mesajı olmayan satır RENKSİZ: 98 satırın 93'ünde konu yok; hepsi boyalı
   olsaydı sütun renk gürültüsüne döner ve renkli 5 satır kaybolurdu. */
.not-mesaj.d-yok { color: var(--p-soluk); background: none; }
.not-mesaj.d-yok:hover { color: var(--p-aksan-koyu); }

/* ===== MESAJ HÜCRESİ RENKLERİ — kullanıcının verdiği palet (2026-09-29) ===

   Her çiftte AÇIK ton hücre zemini, GÜÇLÜ ton ikonun kendisi:

     Tea Green      #CBFFD0  ←  Jade Green   #28B836   gelen
     Vanilla Custard #FFFAB1 ←  Old Gold     #C8BD21   gönderilen
     Powder Blush   #FFB3B2  ←  Brick Ember  #BD1815   önemli

   Değerler portal jetonu olarak burada duruyor, kullanım yerinde değil:
   renk değişirse tek satır değişsin. `tokens.css`e KONMADI — orası ERP ile
   ortak ve bu palet yalnız portalın mesaj sütununa ait. */
:root {
  --p-not-gelen-zemin:      #CBFFD0;
  --p-not-gelen-ikon:       #28B836;
  --p-not-gonderilen-zemin: #FFFAB1;
  --p-not-gonderilen-ikon:  #C8BD21;

  /* PENCERE ARAÇLARI — Ocean Sunset'ten, kullanıcı eşlemesi 2026-09-29.
     Güçlü ton `tokens.css`teki seriden birebir alınıyor; zemin o tonun açık
     karşılığı. Zemini ayrı jeton yapmak şart: duruşta zemin, üstüne gelince
     ikon o rengi taşıyor — iki durum tek değerden türetilemiyor. */
  --p-arac-ara:            var(--seri-3);   /* Dark Teal */
  --p-arac-ara-zemin:      #d8e7eb;
  --p-arac-indir:          var(--seri-1);   /* Dark Cyan */
  --p-arac-indir-zemin:    #d6ecec;
  --p-arac-temizle:        var(--seri-2);   /* Burnt Caramel */
  --p-arac-temizle-zemin:  #fbe7d0;
  --p-arac-kapat:          var(--seri-6);   /* Brown Red */
  --p-arac-kapat-zemin:    #f4d9da;
}

/* Zemin, çerçeve ve ikon AYNI ÇİFTTEN: açık ton dolgu, güçlü ton hem
   çerçeve hem ikon. Hücre artık boyanmıyor — renk kutunun kendisinde. */
.not-mesaj.d-gelen {
  color: var(--p-not-gelen-ikon);
  background: var(--p-not-gelen-zemin);
  border-color: var(--p-not-gelen-ikon);
}

.not-mesaj.d-gonderilen {
  color: var(--p-not-gonderilen-ikon);
  background: var(--p-not-gonderilen-zemin);
  border-color: var(--p-not-gonderilen-ikon);
}
/* TAKAS — hover, odak ve basılı hâlde. Üçü birden yazılı: dokunmatikte
   `hover` yok, `active` var; klavyeyle gezenin de aynı geri bildirimi
   görmesi gerekiyor. */
.not-mesaj.d-gelen:hover,
.not-mesaj.d-gelen:focus-visible,
.not-mesaj.d-gelen:active {
  color: var(--p-not-gelen-zemin);
  background: var(--p-not-gelen-ikon);
}

.not-mesaj.d-gonderilen:hover,
.not-mesaj.d-gonderilen:focus-visible,
.not-mesaj.d-gonderilen:active {
  color: var(--p-not-gonderilen-zemin);
  background: var(--p-not-gonderilen-ikon);
}


/* İKON BÜYÜTÜLDÜ (kullanıcı isteği 2026-09-29): 16 → 24px, kutu 24 → 38px.
   Satır yüksekliğinin izin verdiği kadar — hücrenin kendi dolgusu 12px ve
   satır 46px; daha büyüğü satırları uzatır, 98 satırlık tabloda ekrana
   sığan satır sayısını düşürürdü. */
/* ÇERÇEVESİZ, ZEMİNSİZ (kullanıcı kararı 2026-09-29): yalnız ikon.

   KUTU = İKON (kullanıcı kararı 2026-09-29, ikinci tur). Önce üç iç içe kutu
   vardı ve üçü de başka boydaydı: düğme 36, `<i>` 24, çizilen glif 13,33px.
   Ölçüm düğmelerin kayık OLMADIĞINI gösterdi (98 düğmenin hepsi 36x36, sapma
   en çok 0,25px) — göze kayık görünen şey, büyük bir kutunun ortasında duran
   küçük bir glifti. Artık üçü de 36px.

   Glif neden 13,33'tü: `ikonlar.css` çizimi `::before` üzerinde ve boyutunu
   `1em`den alıyor — yani YAZI boyutundan, `<i>`ye verilen genişlikten değil.
   Aşağıdaki kural o bağı kesiyor. */
/* 100x40, yuvarlak köşe, güçlü tonda İNCE ÇERÇEVE (kullanıcı kararı
   2026-09-29). Kutu sütun genişliğinden dar: sütun 121px, kutu 100px —
   aradaki boşluk kutuyu bir şerit değil bir düğme gibi okutuyor. */
.not-mesaj {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 100px;
  height: 40px;
  padding: 0;
  font-family: var(--p-font);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--p-radius-sm);
  cursor: pointer;
  /* Geçiş normalden YAVAŞ (240ms): renkler takas olurken sıçrama değil
     dönüşme izlenimi versin (kullanıcı kararı 2026-09-29). */
  transition: color 240ms cubic-bezier(.2, .7, .3, 1),
              background 240ms cubic-bezier(.2, .7, .3, 1),
              border-color 240ms cubic-bezier(.2, .7, .3, 1);
}

/* ÜZERİNE GELİNCE RENKLER TAKAS OLUYOR (kullanıcı kararı 2026-09-29):
   zemin güçlü tona, ikon açık tona geçiyor. Önceki hâl saydam bir gri
   perdeydi ve rengi beyazlatıyordu — durumun rengini gizliyordu.
   Kurallar aşağıda, her çiftin kendi satırında. */

.not-mesaj:focus-visible { outline: none; box-shadow: var(--p-odak); }

/* İkon kutusu ve ÇİZİMİ aynı boyda. `::before` varsayılanda `1em` ve
   `vertical-align: -0.15em` taşıyor; ikisi de eziliyor — yoksa glif kutunun
   içinde satır çizgisine oturup aşağı kayıyor. */
/* 30px (kullanıcı kararı 2026-09-29; önce 36). */
.not-mesaj i {
  display: block;
  width: 30px;
  height: 30px;
}

.not-mesaj i::before {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: 0;
}