/* ==========================================================================
   SAĞ ALAN — GÖZLEM TABLOSU

   Şartname §6.2'den alınan tablo mantığı: sayaç süzülmüş listenin tamamını
   gösterir, geniş tablo KENDİ KABINDA yatay kayar (sayfa gövdesi yana
   kaymaz), sıralama başlığın kendisinde.

   Görünüm portalın kendi dili: ERP'nin 34px sıkı satırı yerine parmakla
   okunabilen yükseklik, başlık satırı yapışkan (uzun listede sütun adı
   kaybolmasın — tablette kaydırma uzun sürer).
   ========================================================================== */

.portal-alan {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--p-kart);
  border: 1px solid var(--p-cizgi);
  border-radius: var(--p-radius);
  box-shadow: var(--p-golge);
  overflow: hidden;
}

.alan-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--p-a3);
  padding: var(--p-a3) var(--p-a4);
  border-bottom: 1px solid var(--p-cizgi);
  /* Süzgeçler eklendi: dar ekranda başlık ve araç çubuğu alt alta geçsin,
     sıkışıp kutuları okunmaz genişliğe indirmesin. */
  flex-wrap: wrap;
}

.alan-sag {
  display: flex;
  align-items: flex-end;
  gap: var(--p-a3);
  min-width: 0;
  flex-wrap: wrap;
}

.alan-bilgi {
  font-size: var(--p-yazi-xs);
  color: var(--p-soluk);
  white-space: nowrap;
}

/* ---- SÜZGEÇ DÜĞMESİ VE PENCERESİ (kullanıcı kararı 2026-09-29) ----

   Denetimler tablonun yanında duruyordu ve 1024px'te başlığı 154px
   yüksekliğe çıkarıp tablodan yer alıyordu. Artık tek düğme; denetimler
   pencerede. */
.suz-ac {
  display: inline-flex;
  align-items: center;
  gap: var(--p-a1);
  min-height: var(--p-hedef-sm);
  height: var(--p-hedef-sm);
  padding: 0 var(--p-a3);
  font-size: var(--p-yazi-sm);
  font-weight: 700;
  white-space: nowrap;
}

.suz-ac i { width: 18px; height: 18px; }

/* Süzgeç AÇIKKEN düğme marka renginde: kapalı bir pencerenin arkasında
   unutulmuş süzgeç, boş tabloyu açıklanamaz yapardı. */
.suz-ac.etkin {
  color: #ffffff;
  background: var(--p-aksan);
  border-color: var(--p-aksan);
}

.suz-ac.etkin:hover { background: var(--p-aksan-koyu); }

.suz-rozet {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
}

.suz-pencere { width: min(560px, 100%); }

.suz-govde {
  display: flex;
  flex-direction: column;
  gap: var(--p-a4);
  padding: var(--p-a4);
  overflow-y: auto;
  background: var(--p-zemin);
}

.suz-ikili {
  display: flex;
  gap: var(--p-a3);
  flex-wrap: wrap;
}

.suz-ikili .suz-alan { flex: 1 1 180px; }

/* Tarih kümesi kendi kutusunda: üç aralık alt alta dururken hangi tarihin
   hangi başlığa ait olduğu, çizgiyle ayrılmazsa okunmuyordu. */
.suz-kume {
  margin: 0;
  padding: var(--p-a3);
  border: 1px solid var(--p-cizgi);
  border-radius: var(--p-radius-sm);
  background: var(--p-kart);
}

.suz-kume legend { padding: 0 var(--p-a1); }

/* "Tarih belirtilmemiş" tiki — aralığın ALTINDA, kümenin içinde: hangi
   tarihe ait olduğu başka türlü okunmuyor. Tik açıkken aralık girişleri
   kilitleniyor ve soluklaşıyor; ikisi birbirini dışlıyor. */
.suz-onay {
  display: flex;
  align-items: center;
  gap: var(--p-a2);
  margin-top: var(--p-a2);
  font-size: var(--p-yazi-xs);
  color: var(--p-ikincil);
  cursor: pointer;
}

.suz-onay input { width: 16px; height: 16px; accent-color: var(--p-aksan); cursor: pointer; }

.suz-gun:disabled {
  color: var(--p-soluk);
  background: var(--p-kart-2);
  cursor: not-allowed;
}

.suz-alt {
  display: flex;
  align-items: center;
  /* İki düğme, ikisi de sağda: Temizle (kabuk) ve Uygula (birincil). Sonuç
     sayacı kullanıcı kararıyla kalkmıştı — tablonun üstündeki sayaç zaten
     süzülmüş satırı söylüyordu. */
  justify-content: flex-end;
  gap: var(--p-a3);
  padding: var(--p-a3) var(--p-a4);
  border-top: 1px solid var(--p-cizgi);
}

.suz-alan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.suz-etiket {
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  letter-spacing: var(--p-harf-etiket);
  text-transform: uppercase;
  color: var(--p-soluk);
  padding-left: 2px;
}

.suz-secim {
  min-height: var(--p-hedef-sm);
  height: var(--p-hedef-sm);
  padding: 0 var(--p-a2);
  font-size: var(--p-yazi-xs);
  max-width: 140px;
}

.suz-tarih-ikili { display: flex; align-items: center; gap: 4px; }

.suz-gun {
  min-height: var(--p-hedef-sm);
  height: var(--p-hedef-sm);
  padding: 0 var(--p-a2);
  font-size: var(--p-yazi-xs);
  width: 128px;
}

/* BOŞ TARİH KUTUSUNDA ÖRNEK TARİH (kullanıcı kararı 2026-09-29).

   Tablette Safari'de boş bir `type=date` kutusu HİÇBİR ŞEY yazmıyor —
   kullanıcı oraya tarih gireceğini bilmiyor. Masaüstü Chrome "gg.aa.yyyy"
   yazıyor, iOS yazmıyor; fark tarayıcının, bizim değil.

   Konan şey bir DEĞER DEĞİL, temsilî bir ipucu: `value` verilseydi Uygula'ya
   basıldığında gerçekten süzerdi. Metin `data-ipucu`dan geliyor ve JS onu
   bugün / bir ay sonrası olarak yazıyor; kutu dolunca `bos` sınıfı kalkıyor.

   Chrome'un kendi yer tutucusu ipucuyla üst üste binmesin diye boşken
   saydamlaştırılıyor. */
.suz-gun-sar { position: relative; display: inline-flex; }

.suz-gun-sar .suz-gun.bos::-webkit-datetime-edit { opacity: 0; }

.suz-gun-sar.bos::after {
  content: attr(data-ipucu);
  position: absolute;
  left: var(--p-a2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--p-yazi-xs);
  color: var(--p-soluk);
  pointer-events: none;   /* tıklama kutuya gitsin, ipucuna değil */
}

.suz-tire { color: var(--p-soluk); }

/* DAR EKRANDA ETİKETLER GİZLENİYOR. Ölçüldü (2026-09-29): etiketli şerit
   1024px'te 200px yüksekliğe çıkıyor ve 900px'lik ekranda tablodan o kadar
   yer alıyor. Erişilebilir ad kaybolmuyor — denetimlerin `aria-label`i
   zaten var, gizlenen yalnız görsel tekrar. */
/* Penceredeki seçimler sütunlarını dolduruyor — şeritteki dar hâlleri
   pencereye taşınınca kutunun ortasında asılı kalıyordu. */
.suz-ikili .suz-secim { max-width: none; width: 100%; }

/* Dar ekranda tarih ikilisi alt alta: 2×128px + tire, 320px'lik pencerede
   yan yana sığmıyor ve kutular okunmaz genişliğe iniyordu. */
@media (max-width: 420px) {
  .suz-tarih-ikili { flex-wrap: wrap; }
  .suz-gun { width: 100%; }
  .suz-tire { display: none; }
}

/* Tablo araması — sağ üstte (kullanıcı kararı). Rafın aramasıyla aynı
   kalıp, yalnız daha dar: burada başlık ve sayaç da yer paylaşıyor. */
.tablo-ara {
  position: relative;
  flex: none;
  width: min(260px, 40vw);
}

.tablo-ara i {
  position: absolute;
  left: var(--p-a3);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--p-soluk);
  pointer-events: none;
}

.tablo-ara .p-girdi {
  width: 100%;
  min-height: var(--p-hedef-sm);
  height: var(--p-hedef-sm);
  padding-left: calc(var(--p-a5) + var(--p-a4));
  font-size: var(--p-yazi-sm);
}

.tablo-ara input::-webkit-search-decoration,
.tablo-ara input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tablo-kap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* LASTİK BANT KAPALI — `contain` DEĞİL `none`.

     İkisi aynı şey değil ve ilk denemede yanlış olan seçildi:
       contain → kaydırmanın ÜST ÖĞEYE devrolmasını engeller, ama öğenin
                 KENDİ sıçramasını (rubber-band) bırakır
       none    → devretmeyi de, kendi sıçramasını da kapatır

     Tablette ölçülen belirti buydu: tablonun sonuna gelip parmağı sürmeye
     devam edince tablo uçtan öteye esniyor ve altından BEYAZ ALAN çıkıyordu
     — kullanıcının "fazla kayıyor" dediği şey. Kaydırma artık son sütunda
     sert duruyor.

     `-webkit-overflow-scrolling: touch` de kaldırıldı: eski iOS momentum
     bayrağı, bugünkü tarayıcılarda gereksiz ve esnemeyi büyütüyor. */
  overscroll-behavior: none;

  /* ÇAPRAZ KAYDIRMA YOK — kaydırmayı portal.js sürüyor (caprazKilidiKur).
     `none`, tarayıcının kendi kaydırmasını baştan kapatıyor: açık kalsaydı
     jestin ilk pikselleri tarayıcıda başlar, bizim eksen kilidimiz ancak
     ondan sonra devreye girerdi — ilk hareket yine çapraz olurdu. */
  touch-action: none;
}

.gozlem-tablo {
  width: 100%;
  /* Taban genişlik = colgroup toplamı. SEVK TARİHİ sütunu kalkınca
     (kullanıcı kararı 2026-09-29) toplam 950 → 842 düştü ve min-width de
     975 → 870 indi: eski sayıyla kalsaydı beş sütun 1024'lük tablette boşuna
     gerilir, hücreler ihtiyacından geniş dururdu. Alt sınır hâlâ toplamın
     biraz üstünde — sıkıştırılırsa "eski → yeni" hücresi yandaki sütunun
     üstüne biniyor (ölçüldü). */
  /* 2026-10-01: kod/isim ayrıldı + Değişim Takibi → yedi sütun, 940. */
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
}

.gozlem-tablo thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--p-a3) var(--p-a3);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  letter-spacing: var(--p-harf-etiket);
  text-transform: uppercase;
  text-align: left;
  color: var(--p-ikincil);
  background: var(--p-kart-2);
  border-bottom: 1px solid var(--p-cizgi-kuv);
  /* BAŞLIK SARILIR, kırpılmaz. Sütun adları kullanıcının verdiği adlar —
     "TERMİN TA…" diye yarım görünmeleri, tablonun ne söylediğini
     belirsizleştirir. Gövde hücreleri kırpılmaya devam ediyor: orada
     kırpılan şey veri, ipucunda tam hâli var. */
  white-space: normal;
  line-height: 1.25;
  /* DİKEYDE ORTALI (kullanıcı kararı 2026-09-29). Alta yaslıyken iki satırlı
     başlıklar (Tarih, Adet Değişimi) yukarı taşıyor ve tek satırlılarla aynı
     yatayda durmuyordu — şerit kayık görünüyordu. */
  vertical-align: middle;
}

/* ORTALI SÜTUNLAR (kullanıcı kararı 2026-09-29): tarih, adet, sevk, termin
   ve not. Adet eskiden SAĞA yaslıydı — sayı sütunlarının alışılmış yeri
   orası, ama bu sütunda okunan şey bir sayı değil bir DEĞİŞİM ("1 → 31");
   sağa yaslamak okun başlangıcını satırdan satıra kaydırıyordu. */
.gozlem-tablo th.orta,
.gozlem-tablo td.orta,
.gozlem-tablo th.num,
.gozlem-tablo td.num,
.gozlem-tablo td.hucre-tarih { text-align: center; }

/* ---- SIRALAMA (şartname §6.2) ----
   Sıralanabilen başlık `data-sort` taşır; taşımayanda ne imleç ne ok çıkar
   — tıklanamayan bir şey tıklanabilir görünmemeli. Aktif sütun marka
   renginde ve yanında yön oku durur:
     ▲ küçükten büyüğe · ▼ büyükten küçüğe */
.sirala-satir th[data-sort] {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.sirala-satir th[data-sort]:hover { color: var(--p-aksan-koyu); }

.sirala-satir th[data-sort]::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--p-a1);
  vertical-align: middle;
}

.sirala-satir th.sirali {
  color: var(--p-aksan-koyu);
  background: var(--p-aksan-yumusak);
}

.sirala-satir th.sirali[data-yon="asc"]::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid currentColor;
}

.sirala-satir th.sirali[data-yon="desc"]::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

/* BÜTÜN SATIRLAR AYNI YÜKSEKLİKTE (kullanıcı kararı 2026-09-29). Grup başı
   satırları iki satırlık kimlik (kod + tanım) taşıdığı için ötekilerden
   uzundu; tablo tarandığında ritim bozuluyordu. 52px, iki kısıtın ikisini de
   karşılıyor: iki satırlık kimlik (~34px + dolgu) ve 40px'lik mesaj kutusu. */
.gozlem-tablo tbody tr { height: 52px; }

.gozlem-tablo tbody td {
  /* Dikey dolgu 12 → 8px. Mesaj ikonu büyüyünce (16 → 24px) sade satır
     49 → 61px'e çıkmış ve ekranda görünen satır 13'ten 10'a inmişti;
     dolgunun kısılması o kaybın çoğunu geri veriyor. Yatay dolgu aynı
     kaldı — sütun aralığı okunurluğun kendisi. */
  padding: var(--p-a2) var(--p-a3);
  font-size: var(--p-yazi-sm);
  color: var(--p-ink);
  border-bottom: 1px solid var(--p-cizgi);
  vertical-align: middle;
  /* Hücre kendi sütununda kalır: taşan metin kırpılır, yandaki sütunun
     üstüne binmez. Tarih ve adet hücreleri hiç sarılmıyor. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: text;
  user-select: text;
}

/* ÇİFT SATIR (zebra). 96 satırlık bir listede parmakla kaydırırken göz
   satırı kaybediyor; iki tonlu bant satırı yatayda tutuyor. Ton farkı
   kasten çok küçük — çizgi zaten var, bant onu bağırmadan destekliyor. */
.gozlem-tablo tbody tr:nth-child(even) td { background: var(--p-kart-2); }

.gozlem-tablo tbody tr:hover td { background: var(--p-aksan-yumusak); }

/* ---- UYUMSUZ SATIR ----
   "Uyumsuz" = tedarikçinin KENDİ kotasına göre yetişmeyecek satır:
     imkansiz → yeni tarih yükleme gününde ya da öncesinde
     sikisik  → tarih öne çekilmiş, kotadan az gün kalmış
   Kotanın kaç gün olduğu ekranda YAZMIYOR (kullanıcı kararı) — yalnız
   sonucu görünüyor.

   Renk DURUM kümesinden (--red), seri kümesinden değil: burada kırmızı
   gerçekten "sorunlu" demek. Zebra bandını ezmesi için nth-child'dan
   SONRA tanımlı. */
.gozlem-tablo tbody tr.uyumsuz td,
.gozlem-tablo tbody tr.uyumsuz:nth-child(even) td {
  background: var(--red-row);
}

.gozlem-tablo tbody tr.uyumsuz:hover td { background: var(--red-bg); }

/* Sol kenarda kırmızı şerit: renk körlüğünde zemin tonu tek başına
   ayırt edici değil, kenar çubuğu ikinci bir işaret. */
.gozlem-tablo tbody tr.uyumsuz td:first-child {
  box-shadow: inset 3px 0 0 var(--red);
}