/* ─────────────────────────────────────────────────────────────────────────
   LAF_Grid_styles.css
   LAF_Grid.razor'dan ayrıştırılmış global stiller.

   NOT: Bu dosya LAF_Grid.razor'un içindeki <style> bloğunun birebir
   karşılığıdır. Tek farklar:
     • Razor escape'i olan @@media / @@keyframes → normal @media / @keyframes
     • .lafg-card içindeki `//` satır yorumu → geçerli CSS /* */

yorumu
(CSS'te `//` yorum DEĞİLDİR; tarayıcı eskiden parse hatası verip
        atlıyordu — davranış aynı, ama artık geçerli CSS)

Bu dosyanın yüklenmesi için index.html / app.css'e referans ekle:
<link rel="stylesheet" href="css/laf_grid_styles.css" / >
───────────────────────────────────────────────────────────────────────── */
/* ── Scroll anchoring TAMAMEN kapalı ──────────────────────────────────
   Tarayıcının CSS Scroll Anchoring özelliği: içerik değişince viewport'taki
   bir DOM alt-ağacını "çapa" seçip scroll'u ona göre ayarlar. Grid'de bir
   satıra tıklayınca (focused class değişimi) tarayıcı bunu içerik değişimi
   sanıp scroll'u ~10px kaydırıyordu — scroll EN ALTTAYKEN belirgin.

   overflow-anchor INHERITED DEĞİL — her anchor-adayı elementte ayrı ayrı
   kapatılmalı. Daha önce sadece scroll-container + table + row + card'a
   koyduk ama tarayıcı bunların İÇ elementlerini (td, span, card-content
   vb.) anchor seçmeye devam etti. Bu yüzden wildcard ile scroll
   container'ın İÇİNDEKİ HER elementte kapatıyoruz. Teşhis kanıtladı:
   10px kayması sırasında ne scrollTop'a JS yazımı var, ne scrollTo/
   scrollIntoView/focus çağrısı, ne de geometri (scrollHeight/clientHeight)
   değişimi — geriye kalan tek mekanizma tarayıcının kendi scroll
   anchoring'i. */
.lafg-scroll-container,
.lafg-scroll-container * {
    overflow-anchor: none;
}

.lafg-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: auto;
}

.lafg-thead {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mud-palette-surface);
    outline: 1px solid var(--mud-palette-divider);
    outline-offset: -1px;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;
}

    .lafg-thead tr th {
        border-left: none !important;
    }

.lafg-table > thead > tr > th:first-child,
.lafg-table > tbody > tr > td:first-child {
    border-left: none;
}

.lafg-container {
    cursor: pointer;
    outline: none;
}

.lafg-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0px 8px 4px 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.lafg-th {
    box-sizing: border-box;
    padding: 8px 8px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-divider);
    border-right: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    user-select: none;
    position: relative;
    overflow: visible;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
}

.lafg-th-check {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.lafg-th-resizable {
    padding-right: 8px;
}

.lafg-th-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
}

.lafg-th-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lafg-sort-icon {
    flex-shrink: 0;
    color: var(--mud-palette-primary);
    display: flex;
    align-items: center;
}

.lafg-sort-idle {
    opacity: 0.25;
}

.lafg-th:hover .lafg-sort-idle {
    opacity: 0.65;
}

.lafg-filter-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity .15s;
    border-radius: 3px;
    padding: 1px;
}

    .lafg-filter-icon:hover {
        opacity: 0.75;
    }

.lafg-filter-active {
    opacity: 1 !important;
    color: var(--mud-palette-primary);
}

.lafg-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 2;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    transform: translateX(3px);
}

    .lafg-resize-handle:hover {
        background: var(--mud-palette-primary);
        opacity: 0.5;
    }

    .lafg-resize-handle:active {
        background: var(--mud-palette-primary);
        opacity: 0.8;
    }

@media (max-width: 767px), (pointer: coarse) {
    .lafg-resize-handle {
        width: 5px;
        right: 0;
    }

        .lafg-resize-handle::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -12px;
            right: -12px;
        }
}

.lafg-table {
    --lafg-row-height: 46px;
}

    /* Virtualize spacer satırları height:0 olduğunda (tüm satırlar görünürken)
       tarayıcı phantom yükseklik verebilir. Bunu önle. */
    .lafg-table tbody > tr[style*="flex-shrink"][style*="height: 0px"] {
        display: none;
    }

.lafg-row {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* Scroll anchoring kapali (bkz. .lafg-table aciklamasi). Satir
       seviyesinde de gerekli - tarayici satir elementlerini anchor
       adayi secebiliyor. */
    overflow-anchor: none;
}

    .lafg-row > td {
        height: var(--lafg-row-height);
        padding-top: 7px;
        padding-bottom: 7px;
    }

        .lafg-row > td.lafg-td-check {
            padding-top: 0;
            padding-bottom: 0;
        }

.lafg-autorowheight .lafg-row > td {
    height: auto;
    min-height: var(--lafg-row-height);
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
}

.lafg-row:hover > td {
    background: var(--mud-palette-action-hover);
}

.lafg-row-focused > td {
    background: rgba(var(--mud-palette-primary-rgb), 0.2) !important;
}

    .lafg-row-focused > td.lafg-td-first {
        box-shadow: inset 3px 0 0 var(--mud-palette-primary);
    }

.lafg-row-selected > td {
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.lafg-td {
    box-sizing: border-box;
    padding: 3px 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    border-right: 1px solid var(--mud-palette-divider);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    max-width: 0;
}

.lafg-td-first {
    border-left: none;
}

.lafg-row-focused > td.lafg-td-first {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

.lafg-td-check {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--mud-palette-divider);
    border-right: 1px solid var(--mud-palette-divider);
}

.lafg-td-right {
    text-align: right;
}

.lafg-filler-row td {
    padding: 0;
    border: none;
    height: 0;
}

.lafg-footer-spacer {
    display: block;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    pointer-events: none;
}

.lafg-footer-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
}

.lafg-footer-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid var(--mud-palette-divider);
}

.lafg-footer-td {
    height: var(--lafg-row-height, 38px);
    padding: 3px 8px;
    border-right: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .lafg-footer-td:first-child {
        border-left: none;
    }

.lafg-statusbar {
    flex-shrink: 0;
    padding: 2px 10px;
    border-top: 1px solid var(--mud-palette-divider);
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lafg-statusbar-text {
    font-size: 0.71rem;
    font-style: normal;
    color: var(--mud-palette-text-secondary);
}

.lafg-clear-filters {
    font-size: 0.71rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

    .lafg-clear-filters:hover {
        text-decoration: underline;
    }

.lafg-show-selected-active {
    font-weight: 700;
}

/* ── Görünüm toggle linki ──────────────────────────────────────────────── */
.lafg-view-toggle {
    margin-left: auto;
    flex-shrink: 0;
}

.lafg-view-toggle-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.71rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

    .lafg-view-toggle-link:hover {
        background-color: var(--mud-palette-action-hover);
        text-decoration: none;
    }

.lafg-view-toggle-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* ── Loading placeholder ───────────────────────────────────────────────── */
.lafg-loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100px;
}

.lafg-filter-overlay {
    position: fixed;
    inset: 0;
    z-index: 299;
}

@media (max-width: 767px) {
    .lafg-filter-overlay {
        background: rgba(0,0,0,0.4);
        z-index: 8999;
    }
}

.lafg-filter-popup {
    position: absolute;
    z-index: 300;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    min-width: 200px;
    max-width: 280px;
}

@media (max-width: 767px) {
    .lafg-filter-popup {
        position: fixed;
        z-index: 9000;
        min-width: 260px;
        max-width: calc(100vw - 16px);
        border-radius: 10px;
        transform: none;
    }
}

.lafg-td-check .mud-checkbox .mud-icon-root,
.lafg-th-check .mud-checkbox .mud-icon-root {
    color: var(--mud-palette-text-secondary) !important;
}

.lafg-td-check .mud-checkbox.mud-checkbox-true .mud-icon-root,
.lafg-th-check .mud-checkbox.mud-checkbox-true .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
}

.lafg-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 4px 14px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.lafg-popup-title {
    font-weight: 600;
}

.lafg-filter-list {
    max-height: 240px;
    overflow-y: auto;
}

.lafg-filter-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 4px;
    cursor: pointer;
}

    .lafg-filter-item:hover {
        background: var(--mud-palette-action-hover);
    }

.lafg-filter-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

.lafg-resize-line-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mud-palette-primary, #1976d2);
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
}

/* ── View transition animasyonları ────────────────────────────────────── */

@keyframes lafg-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Card View ─────────────────────────────────────────────────────────── */
.lafg-cardview {
    display: block;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

    /* Card view Virtualize spacer div'leri */
    .lafg-cardview > div[style*="flex-shrink"][style*="height: 0px"] {
        display: none;
    }

.lafg-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    /* Sol border BAŞTAN 3px ayrılır (rengi transparent). Focused olunca
       SADECE renk değişir, genişlik DEĞİŞMEZ. Eski hâlde focused class'ı
       sol border'ı 1px->3px büyütüyordu; bu 2px'lik genişlik değişimi
       kartın iç içerik alanını oynatıp reflow tetikliyordu. Scroll en
       alttayken bu reflow, scrollHeight'i bir an düşürüp scrollTop'u
       clamp ettiriyordu = ~10px scroll-up bug'ı. Border'ı sabit genişlikte
       tutmak reflow'u tamamen ortadan kaldırır (saf CSS, JS yok). */
    /* border-left: 3px solid transparent; */
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
    overflow-anchor: none;
    box-shadow: var(--LAF-base-grid-cardview-shadow);
}

    .lafg-card:active {
        background: var(--mud-palette-action-hover);
    }

.lafg-card-focused {
    border-color: var(--mud-palette-primary);
    /* Sadece renk — genişlik .lafg-card'da zaten 3px ayrılmış durumda */
    border-left-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.2) !important;
}

.lafg-card-selected {
    background: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.lafg-card-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-right: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.lafg-card-content {
    flex: 1;
    min-width: 0;
}

.lafg-card-row {
    display: flex;
    align-items: baseline;
    padding: 2px 10px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    gap: 8px;
    min-height: 20px;
}

    .lafg-card-row:last-child {
        border-bottom: none;
    }

.lafg-card-label {
    flex: 0 0 35%;
    max-width: 35%;
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lafg-card-value {
    flex: 1;
    font-size: 0.80rem;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
    text-align: right;
}

.lafg-card-value-right {
    text-align: right;
}

/* ── Empty State (Veri Yok) ──────────────────────────────────────────────
   Outer "Tablo alanı" div'i (overflow:hidden + position:relative) içine
   absolute olarak yerleştirilen overlay. Scroll container'ın DIŞINDA →
   yatay scroll'dan etkilenmez.

   Strateji: overlay HER ZAMAN DOM'da; görünürlüğü "lafg-empty-overlay-show"
   class'ının varlığı/yokluğu ile kontrol edilir. CSS transition (opacity
   + transform) hem giriş hem çıkış animasyonunu sağlar:
     • GİRİŞ: opacity 0→1, Y ekseninde aşağıdan yukarı kayma
     • ÇIKIŞ: opacity 1→0, yukarıdan aşağı kayma (giriş'in tersi)
   Animasyon süresi 0.28s ease-out. @if mount/unmount yerine class-toggle
   seçildi çünkü Blazor unmount anlık — keyframe ile sadece giriş animate
   edilebiliyordu, çıkış olmuyordu.

   Content-sized centering: top:50%; left:50%; transform içinde
   translate(-50%,-50%). Görünür durumda Y düzeltmesi 0, gizli durumda
   +30px (girişte aşağıdan gelir, çıkışta aşağı kaybolur).

   z-index 1 → thead'in z-index 5'inin altında. IsBusy progress bar
   z-index 10 ile en üstte. pointer-events:none → her durumda altındaki
   thead ve scrollbar tıklanabilir kalır (overlay gizli olsun olmasın,
   interaksiyona engel olmaz). */
.lafg-empty-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 30px));
    opacity: 0;
    max-width: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}

.lafg-empty-overlay-show {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.lafg-empty-icon {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    color: var(--mud-palette-text-secondary);
    opacity: 0.45;
    margin-bottom: 4px;
}

.lafg-empty-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
}

.lafg-empty-subtitle {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.65;
}

.lafg-rows-first-paint-hidden {
    opacity: 0;
}

.lafg-rows-first-paint-visible {
    opacity: 1;
    transition: opacity 90ms ease-out;
    will-change: opacity;
}

/* İlk-paint gizleme penceresinde scroll'u tamamen kapat: ölçüm/spacer
   yeniden hesapları scrollHeight'i oynatıyor; overflow:auto iken bu iç ve
   dış scrollbar'ı zıplatıyordu. Gizliyken (opacity:0) içerik görünmediği
   için scroll da gereksiz. Reveal olunca class kalkar, inline overflow:auto
   geri devreye girer. !important — inline style'ı geçmek için gerekli. */
.lafg-scroll-container.lafg-scroll-measuring {
    overflow: hidden !important;
}