/* ═══ PERON SOFT — Depo › STOK HAREKETLERİ (1.429.0) ═════════════════════════════
   Sayfanın kendi stil dosyası (panel.css'e kural eklenmez). Hareket tablosu panel.css'teki .stk-act-*
   kurallarını AYNEN kullanır (eski modalla aynı kolon düzeni ve aktkap kap sorgusu); bu dosya yalnız
   sayfa iskeletini, süzgeç çubuğunu ve sağdaki ANALİZ PANELİNİ tanımlar.

   🔴 KAP-BAĞIMLI: iki sütun kararı ekranın değil KABIN genişliğiyle verilir (sakok ≥ 1100px) — kenar
      çubuğu açık / kapalı ve 1280 / 1440 ekranlar kendiliğinden doğru düzene düşer. Analiz panelinin iç
      düzeni de kendi kabına bakar (sapanel): tek sütunda geniş kalan panel iki kolona açılır.
   🔴 MOBİL-ÖNCE: temel kurallar dar kap; @container yalnız GENİŞLETİR. Telefonda sıra süzgeç → analiz →
      liste; tablo kendi kabında kayar, sayfa gövdesi ASLA yatay kaymaz.
   🔴 RENK YALNIZ TOKEN. Veri işaretleri --pg-k1 (Giriş) / --pg-k2 (Çıkış); metin --text-*; durum renkleri
      yalnız uyarı metninde. Punto merdiveni: 13 başlık · 12 gövde/tablo · 11 etiket · 10,5 / 10 yardımcı.
   ══════════════════════════════════════════════════════════════════════════════ */

.sa-kok { container-type: inline-size; container-name: sakok; min-width: 0; }

/* ── Dışa aktarım eylemleri ───────────────────────────────────────────────────────
   1.433.0 — sayfa başlığı satırı kaldırıldı (kullanıcı: *"boşuna yer kaplıyor"*; sayfa adı üst çubukta yazıyor).
   PDF / Excel bir alt satıra indi: hazır tarih çiplerinin satırında, sağ uçta; çiplerle aynı 28px yükseklik. */
.sa-alt { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sa-alt > .sa-cipler { flex: 1 1 auto; }
.sa-eylem { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sa-kok .sa-eylem .peron-btn { min-height: 28px; height: 28px; padding: 0 10px; font-size: 12px; }

/* ── Süzgeç çubuğu ────────────────────────────────────────────────────────────── */
.sa-suzgec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.sa-suzgec > * { min-width: 0; }
.sa-suzgec [hidden] { display: none; }
.sa-suzgec .sa-tarih { display: flex; flex: 1 1 100%; flex-wrap: wrap; }
.sa-suzgec .sa-tarih .peron-input { flex: 1 1 128px; width: auto; min-width: 0; }
.sa-suzgec .stk-act-typebar { display: flex; flex: 1 1 100%; }
.sa-suzgec .stk-act-typebar .peron-seg-opt { flex: 1 1 0; }
.sa-suzgec .sa-sec { flex: 1 1 140px; width: auto; }
.sa-suzgec .sa-ara { flex: 1 1 100%; min-width: 0; }
.sa-suzgec .sa-ara input { height: 36px; }
.sa-cipler { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.sa-kok .sa-cip { min-height: 28px; height: 28px; padding: 0 10px; font-size: 12px; }

/* ≥600px kapta denetimler kendi doğal genişliğinde akar: 1024px ekranda (kap ≈ 726px) iki satır,
   1440px'te (kap ≈ 1140px) beş süzgeç tek satır; hazır aralık çipleri her zaman alt satırdadır. */
@container sakok (min-width: 600px) {
    .sa-suzgec .sa-tarih { flex: 0 0 auto; flex-wrap: nowrap; }
    .sa-suzgec .sa-tarih .peron-input { flex: 0 0 auto; width: 132px; }
    .sa-suzgec .stk-act-typebar { display: inline-flex; flex: 0 0 auto; }
    .sa-suzgec .stk-act-typebar .peron-seg-opt { flex: 0 0 auto; }
    /* 1.433.0 — çok depolu firmada "Tüm depolar" da görünür (altı denetim). Taban 180/200 iken 1440px'te arama tek
       başına ikinci satıra düşüyordu (ölçüldü: 282 + 176 + 3 × 180 + 200 + 40 = 1238 > 1142). Taban 150/180 →
       1128 ≤ 1142, tek satır; artan yer seçicilere (en çok 200) ve aramaya dağılır. "Tüm kategoriler" 150px'e sığar
       (metin ≈ 100 + dolgu 10 + ok 36). */
    .sa-suzgec .sa-sec { flex: 1 1 150px; max-width: 200px; }
    .sa-suzgec .sa-ara { flex: 1 1 180px; }
}

/* ── İskelet: dar kapta tek sütun (analiz üstte), ≥1100px kapta liste + sağda analiz ───────────── */
.sa-izgara { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "analiz" "liste"; gap: 16px; align-items: start; }
.sa-liste { grid-area: liste; min-width: 0; }
.sa-analiz { grid-area: analiz; min-width: 0; }

@container sakok (min-width: 1100px) {
    .sa-izgara { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); grid-template-areas: "liste analiz"; }
    .sa-analiz {
        position: sticky; top: 0;
        max-height: calc(100vh - var(--hdr-h) - 32px);
        max-height: calc(100dvh - var(--hdr-h) - 32px);
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    }
}

/* Liste sütunu yanında panel varken daha dar bir kaba düşer (1440px'te 706px): sabit kolonlar bir kademe
   daha incelir, açılan yer ÜRÜN'e gider (en geniş kolon); not 100px'te iki satır. Eşikler başlık metninden
   ölçüldü — ≤768px'te başlık 11px: Miktar / Tutar 119 · Cari / Sipariş 106 · Neden / Not 97 · Tür / Depo 88 ·
   Yapan 61 (Miktar 116'da 3px kesiliyordu). Sabit toplam 582 + ürün ≥ 78 → iki sütunun en dar kabında (662px)
   tablo SIĞAR; daha dar kapta KENDİ kabında kayar.
   🔴 Liste 1.409.0 tablo sığdırmasından MUAFTIR (`.sa-liste[data-sigdir="yok"]`, peron-app.js sigdirUygula):
      sığdırma doğal genişliği bu kap sorgusu çekilmiş hâlde (913px) ölçüp tabloyu 0,73-0,82'ye küçültüyordu
      (1440px'te gövde 9,3 · başlık ve alt satır 8,1px; taban 9). Kolonları kap sorgusu daraltır, punto yerinde kalır. */
.sa-liste .stk-act-table { min-width: 660px; }
/* 1.445.0 — liste kabı ekranın altına kadar (`--liste-h`, peron-app.js listeYuksekligi). Ölçülemezse eski değer. */
@media (min-width: 769px) {
    .sa-liste .stk-act-body .peron-table-wrap { max-height: var(--liste-h, calc(100dvh - 330px)); }
}
@container aktkap (max-width: 760px) {
    .sa-liste col.stk-act-k-tarih { width: 90px; }
    .sa-liste col.stk-act-k-tur   { width: 92px; }
    .sa-liste col.stk-act-k-mik   { width: 120px; }
    .sa-liste col.stk-act-k-cari  { width: 112px; }
    .sa-liste col.stk-act-k-yapan { width: 68px; }
    .sa-liste col.stk-act-k-not   { width: 100px; }
}
/* Özet şeridinin yön işaretleri analizdeki veri renkleriyle AYNI (renk varlığı izler). */
.sa-kok .stk-act-ozet-k.is-in > i { background: var(--pg-k1); }
.sa-kok .stk-act-ozet-k.is-out > i { background: var(--pg-k2); }

/* ── Analiz paneli ────────────────────────────────────────────────────────────── */
.sa-analiz {
    container-type: inline-size; container-name: sapanel;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md);
}
.sa-yukleniyor { height: 180px; }
.sa-analiz[aria-busy="true"] .sa-a-izgara,
.sa-analiz[aria-busy="true"] .sa-a-dipnot { opacity: .55; }

.sa-a-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.sa-a-baslik { min-width: 0; }
.sa-a-bas h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.sa-a-kapsam { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.sa-a-taban {
    flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--pri-border); border-radius: var(--r-full);
    background: var(--pri-light); color: var(--pri-text); font-size: 10.5px; font-weight: 600; white-space: nowrap;
}

/* Bölümler ince çizgiyle ayrılır (yüzen kart yok): ızgaranın 1px aralığı zemin rengini çizgi olarak gösterir. */
.sa-a-izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--border); }
.sa-a-blok { min-width: 0; padding: 12px 14px; background: var(--card-bg); }
.sa-a-blok-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sa-a-blok-bas h4 { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.sa-a-blok-bas span { min-width: 0; font-size: 10.5px; color: var(--text-muted); text-align: right; overflow-wrap: anywhere; }
.sa-a-blok-bas--ara { margin-top: 14px; }

@container sapanel (min-width: 720px) {
    .sa-a-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sa-a-blok:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 1) Özet defteri — satırlar ölçü, sütunlar Giriş / Çıkış / Fark; vurgulu satır KDV dahil. */
.sa-defter-kap { overflow-x: auto; }
.sa-defter { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sa-defter th, .sa-defter td { padding: 5px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-light); }
.sa-defter thead th { font-size: 11px; font-weight: 600; color: var(--text-secondary); border-bottom-color: var(--border); }
.sa-defter thead td { border-bottom-color: var(--border); }
.sa-defter tbody th { text-align: left; font-weight: 500; color: var(--text-secondary); }
.sa-defter tbody td { color: var(--text-primary); }
.sa-defter tbody td.sa-defter-fark { color: var(--text-secondary); }
.sa-defter tbody tr:last-child > * { border-bottom: 0; }
.sa-defter .sa-defter-vurgu > th,
.sa-defter .sa-defter-vurgu > td { font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border); }
.sa-isaret { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--pg-c); }
.sa-isaret--in  { --pg-c: var(--pg-k1); }
.sa-isaret--out { --pg-c: var(--pg-k2); }
.sa-karisik { color: var(--text-muted); border-bottom: 1px dotted var(--border-ctl); cursor: help; }

.sa-serit { margin-top: 12px; }
.sa-serit-bas { margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.sa-serit-bas span { font-weight: 400; color: var(--text-muted); }

/* 2) Seyir — motorun çok serili çizgisi + tablo ikizi. Ölçü seçici (Tutar / Hareket) yoğun yüzey eşiğinde (28px). */
.sa-seri-sec { flex: 0 0 auto; }
.sa-seri-sec .peron-seg-opt { min-height: 28px; padding: 0 10px; font-size: 11px; }
.sa-seri-tablo { margin-top: 8px; }
.sa-seri-tablo > summary {
    display: inline-flex; align-items: center; min-height: 24px; cursor: pointer;
    font-size: 11px; font-weight: 600; color: var(--pri-text);
}
.sa-mini-kap { max-height: 220px; margin-top: 6px; overflow: auto; border: 1px solid var(--border-light); border-radius: var(--r-sm); }
.sa-mini { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.sa-mini th, .sa-mini td { padding: 3px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border-light); }
.sa-mini thead th { position: sticky; top: 0; background: var(--card-bg); font-weight: 600; color: var(--text-secondary); }
.sa-mini th:first-child { text-align: left; font-weight: 500; color: var(--text-secondary); }

/* 3) Kırılım — ad · Giriş · Çıkış · ortak ölçekli çift çubuk (sıfır = sıfır genişlik, en az genişlik YOK). */
.sa-kirilim-kap { overflow-x: auto; }
.sa-kirilim { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; font-variant-numeric: tabular-nums; }
.sa-kirilim th, .sa-kirilim td { padding: 5px 6px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.sa-kirilim thead th { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-align: left; border-bottom-color: var(--border); }
.sa-kirilim thead th.sa-k-tl { width: 96px; }
.sa-kirilim thead th.sa-k-cubuk { width: 22%; }
.sa-kirilim .col-num { text-align: right; white-space: nowrap; }
.sa-kirilim tbody th { text-align: left; font-weight: 600; color: var(--text-primary); }
.sa-kirilim tbody th > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 400; color: var(--text-muted); }
.sa-kir-ad { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.sa-kir-ad {
    min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left;
    cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-ctl); text-underline-offset: 3px;
}
button.sa-kir-ad:hover { color: var(--pri-text); text-decoration-color: currentColor; }
button.sa-kir-ad:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 2px; }
.sa-kirilim tr.sa-diger th, .sa-kirilim tr.sa-diger td { color: var(--text-muted); font-weight: 500; }
.sa-kirilim tfoot th, .sa-kirilim tfoot td { font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border); border-bottom: 0; text-align: right; }
.sa-kirilim tfoot th { text-align: left; }
.sa-k-cubuk { padding-left: 8px; }
.sa-cubuk { display: block; width: var(--sa-w, 0%); height: 5px; border-radius: 0 3px 3px 0; background: var(--pg-c); }
.sa-cubuk + .sa-cubuk { margin-top: 2px; }
.sa-cubuk--in  { --pg-c: var(--pg-k1); }
.sa-cubuk--out { --pg-c: var(--pg-k2); }
.sa-gizli-metin { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 5) Kapsam dipnotu — hesap eksikse sessiz kalmaz. */
.sa-a-dipnot { margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--border); font-size: 10.5px; line-height: 1.5; color: var(--text-muted); }
.sa-a-dipnot b { font-weight: 600; color: var(--text-secondary); }
.sa-a-dipnot .sa-uyari { color: var(--amber-ink); }

.sa-a-hata { padding: 16px 14px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.sa-a-hata b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-primary); }
.sa-a-hata p { margin: 0 0 8px; }

/* Dar panelde (telefon) tablolar oranıyla bir kademe küçülür; yatay kaydırma üretmektense punto düşer.
   Çift çubuk sütunu düşer — değerler sayı olarak satırda kalır (alan düşer, veri düşmez). */
@container sapanel (max-width: 400px) {
    .sa-defter, .sa-kirilim { font-size: 11px; }
    .sa-defter thead th, .sa-kirilim thead th { font-size: 10px; }
    .sa-defter th, .sa-defter td, .sa-kirilim th, .sa-kirilim td { padding: 4px 4px; }
    .sa-kirilim thead th.sa-k-tl { width: 84px; }
    .sa-kirilim .sa-k-cubuk { display: none; }
}
/* 1.445.0 — panel iki sütuna bölündüğünde (720px+) blok ~340px'e düşer: dar panelle AYNI kademe uygulanır. Ölçüldü (768):
   kategori adı 71px'e sıkışıyordu ("Kategori…"), Özet tablosu 9 haneli tutarda kabından 9-26px taşıyordu. */
@container sapanel (min-width: 720px) and (max-width: 1000px) {
    .sa-defter, .sa-kirilim { font-size: 11px; }
    .sa-defter thead th, .sa-kirilim thead th { font-size: 10px; }
    .sa-defter th, .sa-defter td, .sa-kirilim th, .sa-kirilim td { padding: 4px 4px; }
    .sa-kirilim thead th.sa-k-tl { width: 84px; }
    .sa-kirilim .sa-k-cubuk { display: none; }
}