/* ═══════════════════════════════════════════════════════════════════════
   Izgara — Excel tarzı yoğun tablo.  (_izgara.php + izgara.js ile birlikte)

   ÖNEK NEDEN `.izg`, `.izgara` DEĞİL: erp.css'te `.izgara` ZATEN VAR ve bir
   FORM ızgarasıdır (display:grid; auto-fit minmax(200px,1fr)). Tabloya
   class="izgara" yazılsaydı tablo grid'e dönüp satır yapısı dağılırdı —
   sessizce, hata vermeden. `data-izgara` özniteliği (JS kancası) çakışmaz.

   Bu dosya erp.css'i EZMEZ: yalnız kendi sınıflarını tanımlar, değişkenleri
   (--marka, --cizgi, --kart-2, --yazi-sayi, --r …) erp.css'ten alır.
   Başlık ölçeğine (h1/h2/h3, .sayfa-bas) DOKUNMAZ.

   Yoğunluk kasıtlı: satır ~30 px, yazı .88rem. Sayfanın geri kalanı 15 px
   ve nefesli; ızgara ise "tabloya bakma" kipidir — 40 satırı tek ekranda
   görmek, güzel boşluktan daha değerlidir.
   ══════════════════════════════════════════════════════════════════════ */

.izg-blok {
  --izg-satir: 30px;
  --izg-don: 0px;          /* dondurulmuş ilk sütunun sol ofseti (şablon yazar) */
  margin: 0;
}

/* ── Araç şeridi ──────────────────────────────────────────────────────── */
.izg-arac {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .5rem;
}
.izg-arac__bosluk { flex: 1 1 auto; }
.izg-arac__say { font-size: .84rem; color: var(--soluk); font-variant-numeric: tabular-nums; }
.izg-arac__ipucu { font-size: .8rem; color: var(--soluk); }
@media (max-width: 860px) { .izg-arac__ipucu { display: none; } }

/* ── Toplu işlem şeridi — seçim varken beliriyor ──────────────────────── */
/* display:none TABANDA. `.izg-toplu { display:flex }` yazılsaydı tarayıcının
   [hidden] kuralını (UA katmanı, seçici özgüllüğü sıfır) EZERDİ ve şerit hiç
   seçim yokken de görünürdü — ölçüldü. */
.izg-toplu {
  display: none; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .5rem; padding: .45rem .7rem;
  background: var(--marka-yumusak); border: 1px solid #bcdcf5; border-radius: var(--r);
}
/* JS KAPALIYKEN [hidden] yeterli değil: şablon formu hidden basıyor ki
   hiçbir şey seçilmemişken boş bir şerit durmasın. JS yoksa ilk kutu
   işaretlendiğinde şerit açılamaz — bu yüzden :has() ile CSS de açıyor.
   :has() desteklemeyen tarayıcıda kullanıcı JS'siz toplu işlem yapamaz;
   tek tek satır işlemleri (kalem bağı) çalışmaya devam eder. */
.izg-toplu:not([hidden]) { display: flex; }                       /* JS açtı */
.izg-blok:has([data-izg-sec]:checked) .izg-toplu { display: flex; } /* JS yok  */
.izg-toplu__say { font-size: .86rem; color: var(--marka-koyu); }
.dugme--tehlike { border-color: var(--kotu); color: var(--kotu); background: var(--kart); }
.dugme--tehlike:hover { background: var(--kotu); border-color: var(--kotu); color: #fff; }

/* ── Kaydırma kabı ────────────────────────────────────────────────────── */
.izg-sar {
  overflow: auto; -webkit-overflow-scrolling: touch;
  max-height: min(72vh, 900px);
  border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kart);
}
.izg-sar:focus-visible { outline: 3px solid var(--marka); outline-offset: 2px; }

/* ── Tablo ────────────────────────────────────────────────────────────── */
.izg {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .88rem; line-height: 1.3;
}
.izg th, .izg td {
  /* position:relative TABANDA duruyor: kalem bağı ve genişlik tutamağı
     position:absolute ve konumlanmış bir ata gerekiyor. Bunu daha özgül bir
     kurala (örn. `.izg td.izg--duz`) koymak ÖLÇÜLDÜ VE KIRDI: o kural
     `.izg .izg__don`ün position:sticky'sini eziyor, geriye kalan left:34px
     hücreyi 34 px SAĞA KAYDIRIYOR ve dondurulmuş sütun komşusunun üstüne
     binip metnini örtüyordu. Taban katmanda tutup dondurmayı daha özgül
     seçiciyle geri almak bu sınıfı sorunu yapısal olarak kapatır. */
  position: relative;
  padding: .22rem .5rem; height: var(--izg-satir);
  border-bottom: 1px solid var(--cizgi);
  border-right: 1px solid var(--cizgi);
  vertical-align: middle; white-space: nowrap;
  max-width: 34rem; overflow: hidden; text-overflow: ellipsis;
}
.izg th:last-child, .izg td:last-child { border-right: 0; }

/* Yapışkan başlık — 72vh'lik kapta 400 satır kaydırırken sütun adı kaybolmasın.
   Z-EKSENİ SIRASI (hepsi tek ölçekte, yoksa birbirini örtüyorlar):
     6 başlık satırı + dondurulmuş sütun
     5 başlık satırı
     4 süzgeç satırı / tfoot + dondurulmuş sütun
     3 süzgeç satırı / tfoot
     2 gövde + dondurulmuş sütun
   Başlığın süzgeç satırından YÜKSEK olması ŞART: sütun menüsü (details) başlık
   hücresinin İÇİNDE ve kendi z-index'i ana hücrenin katmanından dışarı çıkamaz.
   Eşit olduklarında menü, DOM'da sonra gelen süzgeç satırının ALTINDA kalıyordu
   — açılıyor ama görünmüyordu (ölçüldü). */
.izg thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--kart-2);
  text-align: left; font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--soluk);
  border-bottom: 1px solid var(--cizgi-koyu);
}
.izg thead .izg__suz th { top: var(--izg-satir); z-index: 3; padding: .18rem .3rem; }
.izg thead .izg__suz th.izg__don { z-index: 4; }
/* overflow BURADA OLAMAZ. Bir kez `overflow:hidden` yazıldı ve sütun menüsü
   (details) tam da bu kutunun içinde olduğu için görünmez oldu: menü açılıyor,
   ölçülebiliyor, ama BAŞLIĞIN KUTUSU tarafından kırpılıyordu. Kırpma yalnız
   ETİKETE uygulanır; kap taşmaya açık kalır. */
.izg__h-ic { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; }
/* min-width:0 OLMADAN esnek öğe içeriğinden küçülmez ve text-overflow HİÇ
   tetiklenmez — uzun bir başlık komşu sütunun üstüne taşar. */
.izg__h-ad, .izg__h-sirala { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.izg__h-sirala { color: inherit; text-decoration: none; }
.izg__h-sirala:hover { color: var(--marka-koyu); text-decoration: underline; }

/* Zebra + üstüne gelme. Zebra tek başına satır takibini ikiye katlıyor;
   40 satırlık bir ızgarada göz kaymasının ana çaresi bu. */
.izg tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--kart-2) 55%, var(--kart)); }
.izg tbody tr:hover td { background: var(--marka-yumusak); }
.izg tbody tr.is-secili td { background: #dceefc; }
.izg tbody tr[hidden] { display: none; }

/* Sayı sütunları: tek genişlikli hane + sağa hizalı. Rakamlar alt alta
   dizilmezse "1.234,50" ile "987,00" arasında hangisi büyük, gözle seçilmez. */
.izg--num, .izg td.izg--num { font-family: var(--yazi-sayi); font-size: .84rem; font-variant-numeric: tabular-nums; }
.izg--sag  { text-align: right; }
.izg--orta { text-align: center; }
.izg--sol  { text-align: left; }

/* ── Dondurulmuş ilk sütun (Excel'deki "bölmeleri dondur") ───────────── */
/* Özgüllük ŞART: taban `.izg td` position:relative diyor; sticky onu
   yenmeli (td.izg__don = iki sınıf + bir öğe). */
.izg th.izg__don, .izg td.izg__don { position: sticky; left: 0; z-index: 2; background: var(--kart); }
.izg th.izg__don--ilk, .izg td.izg__don--ilk { left: var(--izg-don); }
.izg thead .izg__don { z-index: 6; background: var(--kart-2); }
/* Kaydırma başlayınca dondurulmuş sütunun sağına gölge — altta kalan
   içeriğin oraya "girdiği" görünsün; yoksa metin sütuna yapışık okunur. */
.izg .izg__don--ilk::after {
  content: ""; position: absolute; top: 0; right: -6px; bottom: 0; width: 6px;
  pointer-events: none; background: linear-gradient(90deg, rgba(29,29,31,.08), transparent);
}
.izg tbody tr:nth-child(even) .izg__don { background: color-mix(in srgb, var(--kart-2) 55%, var(--kart)); }
.izg tbody tr:hover .izg__don { background: var(--marka-yumusak); }
.izg tbody tr.is-secili .izg__don { background: #dceefc; }
.izg .izg__sec { width: 34px; min-width: 34px; text-align: center; padding: 0; }
.izg__sec input { width: 15px; height: 15px; margin: 0; accent-color: var(--marka); cursor: pointer; }

/* ── Düzenlenebilir hücre ─────────────────────────────────────────────── */
.izg td.izg--duz { cursor: cell; padding-right: 1.35rem; }
.izg__deger { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* Kalem: JS'siz düzenleme bağı. Her zaman DOM'da (klavye ve ekran okuyucu
   için) ama görsel olarak yalnız hücreye gelince beliriyor. */
.izg__kalem {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  opacity: 0; font-size: .8rem; text-decoration: none; color: var(--soluk);
  padding: 0 .15rem; border-radius: 4px;
}
.izg td.izg--duz:hover .izg__kalem,
.izg__kalem:focus-visible { opacity: 1; color: var(--marka-koyu); background: var(--kart); }

/* Hücre odağı (klavye gezinme) — Excel'deki etkin hücre çerçevesi. */
.izg td.is-odak { outline: 2px solid var(--marka); outline-offset: -2px; z-index: 1; }

/* Kaydetme geri bildirimi: kısa yeşil/kırmızı vurgu. Üç saniyelik bir
   "kaydedildi" kutusu yerine hücrenin kendisi yanıp sönüyor; kullanıcı
   gözünü tablodan ayırmıyor. */
@keyframes izg-iyi  { from { background: var(--iyi-yumusak);  } to { background: transparent; } }
@keyframes izg-kotu { from { background: var(--kotu-yumusak); } to { background: transparent; } }
.izg td.is-kaydedildi { animation: izg-iyi 1.2s ease-out; }
.izg td.is-hata { animation: izg-kotu 1.8s ease-out; box-shadow: inset 0 0 0 2px var(--kotu); }

/* JS'siz düzenlenen hücre: dar bir sütunda girdi + ✓ + ✕ sığmıyor ve metin
   kırpılıyordu. Hücre düzenleme süresince genişler ve taşmaya açılır. */
.izg td.izg--duzenleniyor {
  overflow: visible; min-width: 15rem; z-index: 7; padding-right: .3rem;
}

/* Satır içi düzenleme girdisi — JS'li de JS'siz de aynı görünür. */
.izg__duz-form { display: flex; gap: .2rem; align-items: center; }
.izg__duz-g, .izg input.izg__duz-g, .izg select.izg__duz-g {
  width: 100%; min-width: 4rem; min-height: 24px; padding: .1rem .3rem;
  font: inherit; font-size: .88rem;
  border: 1px solid var(--marka); border-radius: 4px; background: var(--kart); color: var(--metin);
}
.izg__duz-form .dugme { min-height: 24px; padding: .05rem .4rem; font-size: .8rem; }

/* ── Hızlı süzgeç satırı ──────────────────────────────────────────────── */
.izg__suz-g {
  width: 100%; min-width: 3rem; min-height: 22px; padding: .05rem .35rem;
  font: inherit; font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  border: 1px solid var(--cizgi-koyu); border-radius: 4px; background: var(--kart); color: var(--metin);
}
.izg__suz-g:focus { border-color: var(--marka); }

/* ── Sütun menüsü (JS'siz: <details>) ─────────────────────────────────── */
.izg-mnu { position: relative; display: inline-block; }
.izg-mnu > summary {
  list-style: none; cursor: pointer; padding: 0 .25rem; border-radius: 4px;
  color: var(--soluk); font-size: .8rem;
}
.izg-mnu > summary::-webkit-details-marker { display: none; }
.izg-mnu > summary:hover { background: var(--kart); color: var(--metin); }
.izg-mnu__kutu {
  position: absolute; right: 0; top: calc(100% + 3px); z-index: 30;
  min-width: 11rem; padding: .3rem;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r); box-shadow: var(--golge-kalk);
}
.izg-mnu__kutu a {
  display: block; padding: .3rem .5rem; border-radius: 8px;
  font-size: .85rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--metin); text-decoration: none; white-space: nowrap;
}
.izg-mnu__kutu a:hover { background: var(--kart-2); text-decoration: none; }
.izg-arac__gizli > summary { font-size: .84rem; }

/* ── Sütun genişliği tutamağı (JS) ────────────────────────────────────── */
/* Başlık hücresi position:sticky (yani konumlandırılmış) olduğu için tutamak
   ve açılır menü ona göre yerleşir. overflow:visible ŞART: gövde hücrelerinden
   miras alınan overflow:hidden menüyü ve tutamağı kırpıyordu. Başlık metnini
   ise .izg__h-ic kendi içinde kırpıyor. */
.izg thead th { overflow: visible; }
.izg__tut {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 7px;
  cursor: col-resize; user-select: none;
}
.izg.is-tutuluyor { user-select: none; cursor: col-resize; }

/* ── Alt toplam ───────────────────────────────────────────────────────── */
.izg tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--kart-2); border-top: 1px solid var(--cizgi-koyu); border-bottom: 0;
  font-weight: 700;
}
.izg tfoot .izg__don { z-index: 4; background: var(--kart-2); }
.izg__ozet-et {
  margin-right: .3rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--soluk);
}

/* ── Durum satırı (JS mesajları) ─────────────────────────────────────── */
.izg-durum { margin: .45rem 0 0; font-size: .84rem; color: var(--ikincil); }
.izg-durum.is-hata { color: var(--kotu); font-weight: 650; }

/* ── Küçük ekran ──────────────────────────────────────────────────────── */
/* Izgara KARTA ÇEVRİLMEZ (tablo--mobil-kart kullanılmaz): 12 sütunlu bir
   ızgarayı karta açmak 12 satırlık bir liste üretir ve karşılaştırma —
   ızgaranın tek varlık nedeni — tümüyle kaybolur. Onun yerine Excel'in
   yaptığı: yatay kaydırma + dondurulmuş ilk sütun. */
.izg-mobil-ipucu { display: none; }
@media (max-width: 560px) {
  .izg-mobil-ipucu {
    display: block; margin: 0 0 .4rem;
    font-size: .8rem; color: var(--soluk);
  }
  .izg-mobil-ipucu::before { content: "↔ "; }
  .izg-blok { --izg-satir: 34px; }          /* parmakla dokunulabilir satır */
  .izg { font-size: .85rem; }
  .izg-sar { max-height: none; }
  .izg th, .izg td { max-width: 15rem; }
  .izg__kalem { opacity: 1; }               /* dokunmatikte :hover yok */
}

@media print {
  .izg-sar { overflow: visible; max-height: none; border: 0; }
  .izg thead th, .izg tfoot td, .izg .izg__don { position: static; }
  .izg-arac, .izg-toplu, .izg__suz, .izg__kalem, .izg__tut, .izg-mnu, .izg__sec { display: none; }
}