/* ═══════════════════════════════════════════════════════════════════════════
   laf_grid_mobile.css — LAF_Grid mobil layout satırları

   index.html'de laf_grid_styles.css'ten SONRA:
     <link rel="stylesheet" href="css/laf_grid_mobile.css" />

   Satır kabuğu .lafg-card sınıfını paylaşır (seçim/focus/renk davranışı ortak);
   buradaki kurallar yalnız kartın İÇ düzenini değiştirir. MobileLayout verilmemiş
   grid'lerde .lafg-mrow hiç oluşmaz, mevcut kart görünümü etkilenmez.
   ═══════════════════════════════════════════════════════════════════════════ */

.lafg-mrow {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* GEOMETRİ: RowHeight verildiğinde yükseklik/margin/padding satıra inline
   basılır ve Virtualize'a RowHeight + RowGap bildirilir. Mevcut .lafg-card
   kuralları buna karışmamalı — iki kaynak ayrışırsa satırlar kayar, içerik
   kırpılır. Seçici .lafg-mobilelayout üzerinden özgüllük kazanıyor. */
.lafg-mobilelayout .lafg-mrow {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Kabuğun kendi iç boşluğu sıfırlanır — boşlukları layout'un PaddingX/PaddingY
   değerleri yönetir, aksi halde iki kaynak çakışır. */
.lafg-mrow .lafg-mrow-body {
    padding: 0;
    box-sizing: border-box;
}

/* Otomatik yükseklikte kırpma kalkar — satır içeriği kadar uzar.
   Sabit yükseklikte overflow:hidden kalmalı, yoksa taşan metin komşu satıra girer. */
.lafg-mrow-auto {
    overflow: visible;
}

.lafg-mrow-body {
    flex: 1 1 auto;
    min-width: 0;
}

.lafg-mpanel {
    box-sizing: border-box;
    min-width: 0;
}

/* Alan kutusu: derlenen stil (font, hiza, clamp) inline gelir; buradakiler
   yalnız taban davranış. min-width:0 flex içinde metnin kesilebilmesi için şart. */
.lafg-mfield {
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
    box-sizing: border-box;
}

/* Çerçeveli alan. Renk BURADAN gelir — tasarım her alan için renk taşımasın,
   tema değişince tek yerden değişsin. Yarıçap ve renk override'ı inline gelir. */
.lafg-mfield-bordered {
    border: 1px solid var(--LAF-palette-lines);
    border-radius: 6px;
}

/* Hücre içeriği RenderCell'den gelir; span'ler kutuyu taşırmasın */
.lafg-mfield > span {
    display: inline;
    min-width: 0;
    overflow: inherit;
    text-overflow: inherit;
    white-space: inherit;
}

/* Opsiyonel alan etiketi — değerin önünde küçük ve soluk */
.lafg-mfield-caption {
    font-size: .72em;
    opacity: .55;
    margin-right: 4px;
}

/* Çok seçimli modda checkbox sütunu sabit genişlikte kalsın */
.lafg-mrow > .lafg-card-check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-left: 6px;
}

/* ── Alt toplam paneli (kart / mobil mod) ─────────────────────────────────
   Panel sağa yanaşır; genişliği içindeki ızgara belirler, yani "en geniş
   etiket + en geniş değer" kadar olur. İki max-content sütunlu inline-grid
   sayesinde etiketler kendi aralarında, değerler kendi aralarında hizalanır —
   hiçbir ölçüm yapılmadan.
   ───────────────────────────────────────────────────────────────────────── */

.lafg-msummary {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    max-height: 120px;
    overflow-y: auto;
    /* Panel dibine gelince scroll zinciri kart listesine ATLAMASIN */
    overscroll-behavior: contain;
    border-top: 1px solid var(--LAF-palette-lines);
    padding: 5px 10px;
}

.lafg-msummary-list {
    display: inline-grid;
    /* minmax(0, max-content): yer daralınca ETİKET kısalır, değer değil.
       Kesilmiş bir rakam yanlış bilgidir; kesilmiş etiket sadece rahatsız eder. */
    grid-template-columns: minmax(0, max-content) max-content;
    column-gap: 10px;
    row-gap: 2px;
    align-content: start;
    font-size: 11px;
    line-height: 1.35;
}

.lafg-msummary-caption {
    text-align: right;
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lafg-msummary-value {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    /* Orantılı fontta 1 ile 8 farklı genişlikte — basamaklar hizalanmaz */
    font-variant-numeric: tabular-nums;
}

/* ── BOOL hücre hizası (TÜM görünüm modları) ──────────────────────────────
   Bu blok mobil moda özel değildir; laf_grid_styles.css'e taşınabilir.
   Burada duruyor çünkü hizayı inline stilden CSS'e taşıyan değişiklikle
   birlikte geldi.

   Eskiden ikon Style="display:block;margin:auto" ile çiziliyordu: tabloda
   doğru (ortalı) ama kart ve mobil modda sağa yaslamayı eziyordu — inline
   stil CSS'i yendiği için bastırılamıyordu da. Artık hiza bağlamdan gelir.
   ───────────────────────────────────────────────────────────────────────── */

/* Tablo varsayılanı: ortalı */
.lafg-bool-cell {
    display: block;
    text-align: center;
}

/* Kart ve mobil alanda: bulunduğu kutunun hizasını devral
   (kart değeri sağa yaslıysa ikon da sağa, mobil alanda AlignRight'a uyar).

   display:inline-block ŞART — blok eleman, etiketli bir alanda ikonu kaçınılmaz
   olarak alt satıra indiriyordu. Tabloda hücrede tek başına olduğu için fark
   edilmiyordu. */
.lafg-card-value .lafg-bool-cell,
.lafg-mfield .lafg-bool-cell {
    display: inline-block;
    vertical-align: middle;
    text-align: inherit;
}


/* ── Panel çerçevesi ──────────────────────────────────────────────────────
   Renk buradan gelir; yarıçap ve renk override'ı inline. Alan çerçevesiyle
   aynı kalıp. */
.lafg-mpanel-bordered {
    border: 1px solid var(--LAF-palette-lines);
    border-radius: 6px;
}

    /* Tüm alanları HideIfEmpty ile gizlenmiş bir panel boş bir çerçeve olarak
   kalmasın — :empty, hiç çocuk üretmemiş div'i yakalar. */
    .lafg-mpanel-bordered:empty {
        border: none;
        padding: 0;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   KART / MOBİL MOD ARAÇLARI — filtre ve sıralama

   Tablo modunda bu işler kolon başlığından yapılıyor; kart modunda başlık
   satırı olmadığı için toolbar'a iki buton eklendi. Açılan listeler ve filtre
   popup'ı, yaslanacak bir hücre olmadığından alttan sheet olarak çizilir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buton, arama kutusunun GÖRÜNÜR kutusuyla birebir hizalanır.
   Editörün geometrisi iki parçadan geliyor (laf_editor_text_styles.css):
     • .laf-editor-field  → margin-top: 8px
     • .laf-editor-border → inset: -4px 0 0  (çerçeve alanın 4px YUKARISINA taşar)
   Yani görünür kutu  = --LAF-editor-height + --LAF-editor-border-overhang-top
   ve üst kenarı      = 8px - --LAF-editor-border-overhang-top
   align-self:stretch bu ofseti bilemediği için tutmuyordu; aynı token'lardan
   türetmek tek güvenilir yol. Editörün yüksekliği temayla değişirse buton da
   onunla değişir. */
.lafg-tool-btn {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 38px;
    height: calc(var(--LAF-editor-height) + var(--LAF-editor-border-overhang-top));
    margin-top: calc(8px - var(--LAF-editor-border-overhang-top));
    margin-left: 6px;
    padding: 0;
    border: var(--LAF-editor-outline-width) solid var(--LAF-editor-outline-color);
    border-radius: var(--LAF-editor-radius);
    background: var(--LAF-editor-bg);
    color: var(--LAF-palette-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .lafg-tool-btn:hover {
        border-color: var(--LAF-editor-outline-color-hover);
        color: var(--LAF-palette-primary);
    }

/* Aktif filtre / sıralama varsa buton vurgulanır — kullanıcı listeyi açmadan
   bir süzgeç olduğunu görebilmeli. */
.lafg-tool-btn-active {
    border-color: var(--LAF-palette-primary);
    color: var(--LAF-palette-primary);
}

/* ── Araç kutusu (kolon listesi / sıralama) ──────────────────────────────
   Filtre popup'ı ile AYNI konumlandırma: position:fixed + viewport merkezi.
   Önce absolute kullanılmıştı ve grid container'ın ortasına oturuyordu; filtre
   popup'ı ekranın ortasına geldiği için ikisi tutarsız görünüyordu.

   Açılış animasyonu LAFDialog'un popover'ıyla ortak: laf-popover-center-in
   (laf_dialog_provider_styles.css). Keyframe'ler global olduğu için doğrudan
   kullanılabiliyor; "to" durumu translate(-50%,-50%), yani merkezlemeyle aynı. */

.lafg-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--LAF-palette-overlay);
}

.lafg-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2001;
    display: flex;
    flex-direction: column;
    width: min(360px, 92vw);
    max-height: 70vh;
    box-sizing: border-box;
    border-radius: 8px;
    color: var(--LAF-palette-text);
    overflow: hidden;
    animation: laf-popover-center-in .22s ease both;
}

/* Filtre popup'ı kart modunda: SADECE konum ezilir.
   Arka plan / kenarlık / z-index tablo modundakiyle aynı kalmalı — bunları
   ezmek popup'ı kendi overlay'inin altına düşürüyor ve tıklamalar popup yerine
   overlay'e gidip popup'ı kapatıyordu. */
.lafg-filter-popup-center {
    /* position:fixed ŞART. Popup normalde absolute, yani grid container'a göre
       konumlanıyor. Telefonda container ekran kadar olduğu için ortalanmış
       görünüyordu; masaüstü boyutunda bir grid kart moduna geçince popup
       container'ın ortasına düşüyor, ekranın değil. */
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 24px);
    /* İçerik uzun olduğunda (çok distinct değerli bir kolon) popup ekranı
       baştan sona kaplıyordu; %70'te durup kendi içinde kaydırılır. */
    max-height: 70vh;
    overflow: auto;
    animation: laf-popover-center-in .22s ease both;
}

/* Popup ekrana taşınınca kendi overlay'i de ekranı kaplamalı; yoksa yalnız
   grid alanı kararır ve dışarı tıklama popup'ı kapatmaz. */
.lafg-filter-overlay-fixed {
    position: fixed;
    inset: 0;
    background: var(--LAF-palette-overlay);
}

/* ── Ortak yüzey: kolon seçici, sıralama ve filtre kutuları aynı görünür ── */
.lafg-sheet,
.lafg-filter-popup-center {
    background: var(--LAF-palette-surface);
    box-shadow: var(--LAF-default-dialog-shadow);
    backdrop-filter: blur(3px);
}

.lafg-sheet-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0;
}

.lafg-sheet-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Sıralama satırı bir buton değil; içinde iki buton barındırır */
.lafg-sheet-item-static {
    cursor: default;
}

.lafg-sheet-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kolon listesindeki filtre ikonu başlıktakiyle aynı sınıfı kullanır
   (.lafg-filter-active → primary); burada yalnız hizası ayarlanır. */
.lafg-sheet-item .lafg-filter-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.lafg-sort-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--LAF-palette-lines);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.lafg-sort-btn-active {
    border-color: var(--LAF-palette-primary);
    color: var(--LAF-palette-primary);
    background: var(--LAF-palette-primary-hover);
}

@media (hover: hover) and (pointer: fine) {
    .lafg-sheet-item:not(.lafg-sheet-item-static):hover {
        background: var(--LAF-palette-background-hoveredrow);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRUP ÖZETLERİ (GroupSummary)

   Bu blok mobil moda özel DEĞİL — tablo modunu da kapsıyor; laf_grid_styles.css'e
   taşınabilir. Burada duruyor çünkü grup özeti çalışmasıyla birlikte geldi.

   Tablo modunda grup başlığı satırı tek colspan'li bir hücre. Katmanlama şöyle:

     • ÖZET ŞERİDİ AKIŞTA → satırın yüksekliğini o belirler. Çok para birimli
       özet (EUR/GBP/TRY/USD alt alta) satırı büyütür; eskiden şerit mutlak
       konumluydu, yüksekliği satıra katılmıyordu ve komşu satırların üzerine
       taşıyordu.
     • CAPTION ŞERİDİN ÜZERİNDE (mutlak) → kolon genişlikleri footer tablosuyla
       aynı kaynaktan geldiği için hiza kendiliğinden tutuyor; colspan, girinti,
       genişleme oku ve tıklama alanı olduğu gibi kalıyor. Çakışırsa caption
       okunur, özet arkada kalır.

   Girinti ve iç boşluklar: .lafg-group-cell'de padding YOKTUR (bkz.
   laf_grid_grouping_styles.css) — girinti caption'a inline padding-left ile,
   yatay boşluk özet hücrelerine verilir.
   ═══════════════════════════════════════════════════════════════════════════ */

.lafg-group-cell {
    position: relative;
}

.lafg-group-summary {
    position: static; /* AKIŞTA — satır yüksekliği buradan doğar */
    display: flex;
    align-items: stretch;
    /* Özet kısa olsa da grup satırı normal yüksekliğinin altına inmesin */
    min-height: var(--lafg-group-row-height, 46px);
    pointer-events: none; /* tıklama grup başlığına geçsin (aç/kapa) */
    z-index: 0;
}

.lafg-group-summary-cell {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center; /* tek satırlık özet dikeyde ortalansın */
    padding: 3px 6px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
}

/* Caption özetin ÜSTÜNDE, satırın ilk "bandında" durur: satır özet yüzünden
   uzasa bile başlık yukarıda kalır, ortaya kaymaz. Girinti inline gelir. */
.lafg-group-cell-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: var(--lafg-group-row-height, 46px);
    z-index: 1;
}

.lafg-gsum-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Gruplu özet (GroupSummary_GroupingColumn): kolon hücresinde alt alta.
   Grup başlığı satırı bu yüzden uzar — artık taşmadan, gerçekten uzayarak. */
.lafg-gsum-groups {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0;
}

.lafg-gsum-group {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    line-height: 1.2;
}

.lafg-gsum-key {
    font-size: .68em;
    opacity: .6;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* ── Kart / mobil mod: kolon hizası yok, etiketli dikey liste ──────────── */
.lafg-group-summary-card {
    display: inline-grid;
    grid-template-columns: minmax(0, max-content) max-content;
    column-gap: 10px;
    row-gap: 2px;
    align-content: start;
    justify-self: end;
    margin-left: auto;
    font-size: 11px;
    line-height: 1.35;
}

.lafg-gsum-caption {
    text-align: right;
    opacity: .65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lafg-group-summary-card .lafg-gsum-value {
    text-align: right;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KART / MOBİL MODDA GRUP KAPSAYICISI

   Grup başlığı ile satırları tek bir blok gibi görünür. DOM'da sarmalayıcı
   YOKTUR: satırlar hâlâ Virtualize'ın düz listesinin kardeş öğeleri; birleşme
   yalnız kenarlık, yarıçap ve boşlukla kuruluyor. Gerçek bir <div> sarmalayıcı
   grubu tek Virtualize öğesi yapar ve uzun gruplarda sanallaştırmayı bitirirdi.

   Girinti ve satır arası boşluk INLINE gelir (GroupChildStyle): mobil layout
   satırlarında geometri zaten inline basıldığı için CSS'ten verilen bir margin
   oraya işlemezdi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Açık başlık: altındaki satırlarla birleşir */
.lafg-group-card.lafg-group-card-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Gruba ait satır: üst kenarlık kalkar (başlıkla ve önceki satırla tek çizgi),
   köşeler düzleşir, solda grubu boydan boya izleyen omurga çizgisi kalır. */
.lafg-card.lafg-gchild {
    border-radius: 0;
    border-top: none;
    border-left: 3px solid rgba(var(--LAF-palette-primary-rgb), .35);
}

/* Grubun son satırı bloğu kapatır */
.lafg-card.lafg-gchild-last {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Odaklı satırda omurga primary'ye döner — inset gölge zaten solda duruyor */
.lafg-card.lafg-gchild.lafg-card-focused {
    border-left-color: var(--LAF-palette-primary);
}