/* ══════════════════════════════════════════════════════════════
   BilkerPortal — Genel Stiller
   Not: Proje MudBlazor kullanıyor, Bootstrap yüklü değil.
   Bu yüzden .btn-*, .form-floating gibi Bootstrap sınıfları
   kasıtlı olarak buradan çıkarıldı — hiçbir etkileri yoktu.
   ══════════════════════════════════════════════════════════════ */

html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* ── Blazor Framework Form Validasyon Sınıfları ──────────────────
   Bootstrap'ten bağımsız, Blazor EditForm/InputText tarafından
   otomatik uygulanır — silinmemeli. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ── Odak (Focus) Görünürlüğü — Marka Rengine Göre ──────────────
   Erişilebilirlik için zorunlu; renk artık BilkerPortalTheme'in
   Primary rengiyle (#594AE2) hizalı. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #594AE2;
}

/* ── Blazor Hata Sınırı (Error Boundary) — Framework Zorunlu ────
   App.razor'daki blazor-error-boundary div'i için, silinmemeli. */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Bir hata oluştu.";
    }

/* ══════════════════════════════════════════════════════════════
   BilkerPortal UI Token'ları — bilkerportal-ui-standards skill'indeki
   ölçeğin merkezi uygulaması (bkz. UI/UX Standardı v1). Sayfa bazlı
   inline stil YAZMAYIN — buraya ekleyin.

   --bp-scale, MainLayout tarafından kök konteynerde inline
   style="--bp-scale:X" olarak set edilir (PortalScale kullanıcı
   tercihi / 100). Tüm boyut token'ları bunun üzerinden calc() ile
   çarpılır — transform: scale() KULLANILMAZ (§5/§6).

   .bp-density-* class'ları da aynı kök konteynere MainLayout
   tarafından eklenir (PortalDensity kullanıcı tercihi). Standard
   yoğunluk değerleri, bu token sistemine geçmeden ÖNCEKİ sabit
   piksel değerleriyle BİREBİR AYNI tutulmuştur — tercihini hiç
   değiştirmemiş kullanıcılar için görsel fark oluşmaz.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ÜÇ SATIR YOĞUNLUĞU SEVİYESİ — operatör kararı (PART E §11)

   Bunlar tek bir yüksekliğe İNDİRGENMEZ; üç farklı işlevsel bağlamı
   temsil ederler. Tam sözleşme: docs/ui-ux/density-levels.md

   1) Gömülü / ikincil tablo   32px  ← --bp-table-row-height (TABAN)
   2) Birincil veri ızgarası   39px  ← AYNI taban; fark İÇERİKTEN
   3) İşlem satırı editörü     57px  ← LineGridStandard.cs

   1 ve 2 aynı token'ı paylaşır. Token bir TABANDIR (height), tavan
   değil: gömülü tablonun hücresi düz metin taşıdığı için tam 32px'te
   oturur; birincil ızgaranın hücresi çip/aksiyon taşıdığı için 39px'e
   çıkar. Yani "iki farklı ayar" değil, TEK ayarın iki farklı içerikle
   verdiği iki sonuçtur — ölçümle doğrulandı (bkz. belge).

   İkisi de yoğunluk tercihini izler: Standard 32→39, Compact 28→31.

   3. seviye bu token'a bağlı DEĞİLDİR: yüksekliği bir CSS değeri değil,
   alan VARYANTININ sonucudur (Variant.Text + Dense → kontrol 40px,
   satır 56.8px, başlık 32px, font 12px). Kaynağı tek yerdedir:
   BilkerPortal/Components/Shared/LineGridStandard.cs

   NOT: yoğunluk sınıfı içerik konteynerine uygulanır; sol menüdeki arama
   alanı (drawer) bu kapsamın DIŞINDADIR ve 51px'te sabit kalır.
   ══════════════════════════════════════════════════════════════ */

:root {
    --bp-scale: 1;

    /* ── Form alanı ── */
    --bp-input-height: 40px;          /* GÖRÜNEN yüzey (border-box) */
    --bp-input-padding-x: 12px;
    --bp-font-size-input: 14px;
    --bp-font-size-label: 12px;
    --bp-font-size-helper: 12px;      /* yardım + hata metni */
    --bp-multiline-min-height: 80px;
    --bp-field-gap: 12px;

    /* ── DataGrid ── */
    --bp-table-row-height: 40px;
    --bp-grid-header-height: 44px;
    --bp-grid-cell-padding-x: 12px;
    --bp-grid-editor-height: 36px;

    /* ── Ortak ── */
    --bp-icon-button-size: 36px;
    --bp-icon-button-size-grid: 30px;
    --bp-font-size-icon: 20px;
    --bp-chip-height: 24px;
    --bp-border-radius: 6px;

    --bp-spacing-xs: 4px;
    --bp-spacing-sm: 8px;
    --bp-spacing-md: 16px;
}

/* Standard = :root ile birebir aynı. Sınıf yine de yazılır: MainLayout her zaman ÜÇ sınıftan
   birini koyar ve "hangi yoğunluk seçili" sorusunun cevabı DOM'da görünür kalmalıdır. */
.bp-density-standard {
    --bp-input-height: 40px;
    --bp-input-padding-x: 12px;
    --bp-font-size-input: 14px;
    --bp-font-size-label: 12px;
    --bp-font-size-helper: 12px;
    --bp-multiline-min-height: 80px;
    --bp-field-gap: 12px;

    --bp-table-row-height: 40px;
    --bp-grid-header-height: 44px;
    --bp-grid-cell-padding-x: 12px;
    --bp-grid-editor-height: 36px;

    --bp-icon-button-size: 36px;
    --bp-icon-button-size-grid: 30px;
    --bp-font-size-icon: 20px;
    --bp-chip-height: 24px;
    --bp-border-radius: 6px;

    --bp-spacing-xs: 4px;
    --bp-spacing-sm: 8px;
    --bp-spacing-md: 16px;
}

.bp-density-compact {
    --bp-input-height: 32px;
    --bp-input-padding-x: 8px;
    --bp-font-size-input: 13px;
    --bp-font-size-label: 11px;
    --bp-font-size-helper: 11px;
    --bp-multiline-min-height: 64px;
    --bp-field-gap: 8px;

    --bp-table-row-height: 32px;
    --bp-grid-header-height: 36px;
    --bp-grid-cell-padding-x: 8px;
    --bp-grid-editor-height: 28px;

    --bp-icon-button-size: 28px;
    --bp-icon-button-size-grid: 26px;
    --bp-font-size-icon: 18px;
    --bp-chip-height: 20px;
    --bp-border-radius: 4px;

    --bp-spacing-xs: 2px;
    --bp-spacing-sm: 6px;
    --bp-spacing-md: 12px;
}

.bp-density-comfortable {
    --bp-input-height: 48px;
    --bp-input-padding-x: 14px;
    --bp-font-size-input: 15px;
    --bp-font-size-label: 13px;
    --bp-font-size-helper: 12px;
    --bp-multiline-min-height: 96px;
    --bp-field-gap: 16px;

    --bp-table-row-height: 48px;
    --bp-grid-header-height: 52px;
    --bp-grid-cell-padding-x: 16px;
    --bp-grid-editor-height: 44px;

    --bp-icon-button-size: 44px;
    --bp-icon-button-size-grid: 34px;
    --bp-font-size-icon: 22px;
    --bp-chip-height: 28px;
    --bp-border-radius: 8px;

    --bp-spacing-xs: 6px;
    --bp-spacing-sm: 10px;
    --bp-spacing-md: 20px;
}

.mud-input-outlined.mud-input-margin-dense .mud-input-outlined-border {
    border-radius: calc(var(--bp-border-radius) * var(--bp-scale));
}

/* ══════════════════════════════════════════════════════════════
   FORM ALANI — tek satırlık giriş yüzeyi

   ÖLÇÜM: MudBlazor'un dense slot'u content-box'tır; token 30px verirken KULLANICININ GÖRDÜĞÜ
   yüzey 51px'ti (30px içerik + 21px dolgu). Yani token değeri ile ekrandaki ölçü aynı şey
   değildi ve "40px" gibi bir hedefi token'a yazmak mümkün olmuyordu.

   ÇÖZÜM: slot border-box'a alınır. Artık --bp-input-height DOĞRUDAN görünen yüksekliktir;
   tablodaki değer ne ise ekranda o ölçülür. Dikey dolgu sıfırlanır — <input> metni kendi
   yüksekliği içinde zaten dikey ortalanır, bu da ikon/label hizasını serbest bırakır.

   !important gerekli: MudBlazor'un ".mud-input > input.mud-input-root" gibi kuralları
   (type+class) bizim 2-class seçicimizden yüksek özgüllüktedir — bkz. dosya başlığı. */
.mud-input-margin-dense .mud-input-slot {
    box-sizing: border-box !important;
    height: calc(var(--bp-input-height) * var(--bp-scale)) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: calc(var(--bp-input-padding-x) * var(--bp-scale)) !important;
    padding-right: calc(var(--bp-input-padding-x) * var(--bp-scale)) !important;
}

/* Çok satırlı alan sabit yüksekliğe EZİLMEZ (bkz. TestPortal geri bildirimi §11): Lines/rows
   değeri neyse onu gösterir, yalnızca bir ALT SINIR uygulanır. */
.mud-input-margin-dense textarea.mud-input-slot,
.mud-input-margin-dense .mud-input-slot:has(textarea) {
    height: auto !important;
    min-height: calc(var(--bp-multiline-min-height) * var(--bp-scale)) !important;
    padding-top: calc(var(--bp-spacing-sm) * var(--bp-scale)) !important;
    padding-bottom: calc(var(--bp-spacing-sm) * var(--bp-scale)) !important;
}

/* ══════════════════════════════════════════════════════════════
   SEÇİLİ DEĞERİN DİKEY HİZASI — MudSelect <input> DEĞİLDİR

   KÖK NEDEN (MudBlazor.min.css'ten doğrulandı):
       div.mud-input-slot.mud-input-root { display:block; height:1lh; padding:6px 0 7px }

   Yani MudSelect'in seçili değeri bir <div>'dir, <input> değil. Tarayıcı <input> metnini
   kendi content box'ında dikey OTOMATİK ortalar; <div> ortalamaz — metin kutunun ÜSTÜNE
   yapışır. Yukarıdaki kural yüksekliği token'a sabitleyip dikey dolguyu sıfırlayınca bu fark
   görünür oldu: "Bireysel (TCKN)" yukarı kayıp "Vergi Kimlik Tipi" label'ına değiyordu.
   <input> tabanlı alanlar (TextField, NumericField, Autocomplete) etkilenmedi — hizalamayı
   tarayıcı zaten yapıyordu.

   ÇÖZÜM yüksekliği değil HİZALAMAYI düzeltir: tek satırlık değerin satır kutusu, alanın
   kullanılabilir yüksekliğine eşitlenir. Sabit top, negatif margin veya label metnine bağlı
   hiçbir şey yok; değer AYNI yoğunluk token'ından türediği için üç profilde de kendiliğinden
   doğru çıkar. display:block korunur, böylece uzun değerde kırpma/ellipsis ve adornment
   yerleşimi bozulmaz; dropdown okuna dokunulmaz (o ayrı bir kardeş elemandır). */
.mud-input-margin-dense div.mud-input-slot:not(.mud-input-root-multiline) {
    line-height: calc(var(--bp-input-height) * var(--bp-scale)) !important;
}

/* Hücre içi düzenlemede alanın yüksekliği farklıdır; satır kutusu ONA eşitlenir. */
.mud-table-dense .mud-table-cell .mud-input-margin-dense div.mud-input-slot:not(.mud-input-root-multiline),
.mud-data-grid .filter-header-cell .mud-input-margin-dense div.mud-input-slot:not(.mud-input-root-multiline) {
    line-height: calc(var(--bp-grid-editor-height) * var(--bp-scale)) !important;
}

.mud-input-margin-dense input,
.mud-input-margin-dense textarea,
.mud-input-margin-dense .mud-select-input {
    font-size: calc(var(--bp-font-size-input) * var(--bp-scale)) !important;
}

/* ══════════════════════════════════════════════════════════════
   LABEL — iki durum, tek token

   ÖLÇÜM: MudBlazor label'ı 16px yazıp yüzerken transform ile 0.75 ölçekler; ekranda 12px görünür.
   Bizim eski kuralımız (!important'sız) MudBlazor'un 16px'ine KAYBEDİYORDU — yani
   --bp-font-size-label form alanı için ÖLÜ bir token'dı ve yoğunluk değişince label değişmiyordu.

   Bu yüzden değer token'ın KENDİSİ değil, 0.75'e bölünmüş hâli yazılır: yüzen label ekranda tam
   olarak token kadar çıkar (Kompakt 11 · Standart 12 · Rahat 13).

   Yatay kaydırma da token'a bağlanır: MudBlazor 14px'lik sabit bir öteleme kullanıyor, oysa alan
   dolgusu artık yoğunluğa göre 8/12/14px. Sabit bırakılsa Kompakt'ta label, altındaki değerden
   6px sağda dururdu. */
.mud-input-label.mud-input-label-inputcontrol {
    font-size: calc(var(--bp-font-size-label) / 0.75 * var(--bp-scale)) !important;
}

.mud-input-label.mud-input-label-outlined:not(.mud-input-label-margin-dense),
.mud-input-label.mud-input-label-outlined.mud-input-label-margin-dense {
    left: calc(var(--bp-input-padding-x) * var(--bp-scale) - 14px);
}

/* Yardım ve hata metni: alanla çakışmamalı ve yoğunlukla birlikte değişmeli. */
.mud-input-helper-text,
.mud-input-helper-text.mud-input-error {
    font-size: calc(var(--bp-font-size-helper) * var(--bp-scale));
    line-height: 1.4;
}

/* Adornment ikonları alanın DİKEY ORTASINDA durur ve yoğunlukla ölçülenir. */
.mud-input-adornment .mud-icon-root {
    font-size: calc(var(--bp-font-size-icon) * var(--bp-scale));
}

.mud-button-root.mud-button-size-small {
    height: calc(var(--bp-input-height) * var(--bp-scale));
    font-size: calc(var(--bp-font-size-input) * var(--bp-scale));
}

.mud-icon-button.mud-icon-button-size-small {
    width: calc(var(--bp-icon-button-size) * var(--bp-scale));
    height: calc(var(--bp-icon-button-size) * var(--bp-scale));
}

    .mud-icon-button.mud-icon-button-size-small .mud-icon-root {
        font-size: calc(var(--bp-font-size-icon) * var(--bp-scale));
    }

.mud-chip.mud-chip-size-small {
    height: calc(var(--bp-chip-height) * var(--bp-scale));
    font-size: calc(var(--bp-font-size-label) * var(--bp-scale));
    /* MudBlazor'un kendi ".mud-chip{margin:4px}" kuralı (bkz. UI/UX 2B §4) sabit/density-farkında
       değil — grid hücresi içindeki status chip'ler (bkz. AppDataTable StatusSelector) bu yüzden
       Compact yoğunlukta bile aynı 8px (4px+4px) dikey margin'i koruyup satır yüksekliği
       kazanımını sınırlıyordu. --bp-spacing-xs ile değiştirildi (Standard'da 4px ile birebir aynı
       kalır — mevcut görünüm bozulmaz). */
    margin-top: calc(var(--bp-spacing-xs) * var(--bp-scale));
    margin-bottom: calc(var(--bp-spacing-xs) * var(--bp-scale));
}

/* ══════════════════════════════════════════════════════════════
   DATAGRID — satır, başlık, hücre dolgusu ve hücre içi düzenleme

   ÖLÇÜLEN KÖK NEDEN (bkz. UI/UX 2B §4): MudBlazor'un
   ".mud-table-dense * .mud-table-row .mud-table-cell" kuralı (özgüllük 0,3,0) sabit
   "padding:6px 24px 6px 16px" verir; bizim 2-class override'ımız kaybediyordu. Çözüm eşit/üstün
   özgüllük + !important — bu dosyada zaten kanıtlanmış desen.

   Yatay dolgu da artık token'dan gelir: MudBlazor'un 24px/16px asimetrik sabiti üç yoğunlukta
   da aynı kalıyordu, yani Kompakt'ta kazanılan dikey yer yatayda geri veriliyordu. */
.mud-table-dense .mud-table-row .mud-table-cell:not(th),
.mud-table-dense .mud-table-cell:not(th),
.mud-table-dense td {
    /* border-box: hücre dolgusu yüksekliğin İÇİNDE sayılır, böylece token doğrudan hücre
       yüksekliğidir. Tablonun 0.8px satır ayıracı bunun DIŞINDA kalır — ölçümde satır 40.80px
       görünür, hücre tam 40px'tir. */
    box-sizing: border-box !important;
    height: calc(var(--bp-table-row-height) * var(--bp-scale)) !important;
    font-size: calc(var(--bp-font-size-input) * var(--bp-scale)) !important;
    padding-top: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
    padding-bottom: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
    padding-left: calc(var(--bp-grid-cell-padding-x) * var(--bp-scale)) !important;
    padding-right: calc(var(--bp-grid-cell-padding-x) * var(--bp-scale)) !important;
}

    .mud-table-dense .mud-table-cell.mud-table-cell-hide-small,
    .mud-table-dense th {
        font-size: calc(var(--bp-font-size-label) * var(--bp-scale)) !important;
    }

/* Başlık satırı veri satırından bir tık YÜKSEKTİR (40 → 44): başlık, altındaki satırlardan
   ayrışmalı ama ayrı bir blok gibi durmamalıdır. */
.mud-table-dense .mud-table-row th,
.mud-table-dense th,
.mud-data-grid .mud-table-row .mud-table-cell.filter-header-cell {
    height: calc(var(--bp-grid-header-height) * var(--bp-scale)) !important;
    padding-top: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
    padding-bottom: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
    padding-left: calc(var(--bp-grid-cell-padding-x) * var(--bp-scale)) !important;
    padding-right: calc(var(--bp-grid-cell-padding-x) * var(--bp-scale)) !important;
}

.mud-data-grid .mud-table-cell.filter-header-cell {
    font-size: calc(var(--bp-font-size-label) * var(--bp-scale)) !important;
}

/* HÜCRE İÇİ DÜZENLEME (fatura/banka fişi satır ızgaraları ve grid filtre alanları).
   Bir hücrenin içindeki giriş alanı, satırın kendisinden daha kısadır — aksi hâlde satır
   sınırını taşar. Form alanının değil, kendi token'ının ölçüsünü alır. */
.mud-table-dense .mud-table-cell .mud-input-margin-dense .mud-input-slot,
.mud-data-grid .filter-header-cell .mud-input-margin-dense .mud-input-slot {
    height: calc(var(--bp-grid-editor-height) * var(--bp-scale)) !important;
}

.mud-table-dense .mud-table-cell .mud-input-margin-dense input,
.mud-table-dense .mud-table-cell .mud-input-margin-dense .mud-select-input {
    font-size: calc(var(--bp-font-size-input) * var(--bp-scale)) !important;
}
/* Satır editörü hücresi: iki dolgu ÜST ÜSTE binmesin.
   ÖLÇÜM: hücre 52.8px çıkıyordu — 36px kontrol + MudBlazor'un kendi 4+4px kontrol marjı +
   bizim 4+4px hücre dolgumuz + 0.8px ayıraç. Yani aynı boşluk iki kez sayılıyordu ve satır
   40px hedefinin 13px üstüne çıkıyordu.

   Kontrol marjı sıfırlanır; kalan dolgu satır ile editör arasındaki farktan TÜRETİLİR, böylece
   token'lardan biri değişse bile satır yüksekliği tutmaya devam eder. */
.mud-table-dense .mud-table-cell:has(.mud-input-control) .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mud-table-dense .mud-table-row .mud-table-cell:has(.mud-input-control):not(th),
.mud-table-dense .mud-table-cell:has(.mud-input-control):not(th) {
    padding-top: calc((var(--bp-table-row-height) - var(--bp-grid-editor-height)) / 2 * var(--bp-scale)) !important;
    padding-bottom: calc((var(--bp-table-row-height) - var(--bp-grid-editor-height)) / 2 * var(--bp-scale)) !important;
}

/* Satır aksiyon ikonları satırı BÜYÜTMEZ.
   ÖLÇÜM: ikon butonu form alanıyla birlikte 36px'e çıkınca, 4+4 hücre dolgusu ve 1px kenarlıkla
   birlikte satır 40px hedefi yerine 45px oluyordu — yani satır yüksekliğini artık token değil,
   içindeki buton belirliyordu. Boyut satırdan TÜRETİLİR; ayrı bir token eklenmez ki iki değer
   birbirinden ayrışamasın. */
/* Çip de satırı büyütmez: hücrenin kendi dolgusu zaten boşluğu veriyor, çipin ayrıca dikey
   marjı olması aynı boşluğu ikinci kez ekliyordu. ÖLÇÜM: Rahat'ta 28px çip + 12px marj + 12px
   hücre dolgusu = 52px, yani 48px hedefi aşıyordu. */
.mud-table-dense .mud-table-cell .mud-chip.mud-chip-size-small {
    margin-top: 0;
    margin-bottom: 0;
}

/* Başlıktaki sırala/filtre ikonları BAŞLIK yüksekliğinden türetilir; form alanı ikon boyutuyla
   büyürlerse başlığı taşırlar (Rahat'ta 44px ikon, 52px hedefi 54px'e çıkarıyordu). */
.mud-table-dense th .mud-icon-button.mud-icon-button-size-small,
.mud-data-grid .filter-header-cell .mud-icon-button.mud-icon-button-size-small {
    width: calc((var(--bp-grid-header-height) - 2 * var(--bp-spacing-xs) - 2px) * var(--bp-scale));
    height: calc((var(--bp-grid-header-height) - 2 * var(--bp-spacing-xs) - 2px) * var(--bp-scale));
}

.mud-table-dense .mud-table-cell .mud-icon-button.mud-icon-button-size-small,
.mud-data-grid .mud-table-cell .mud-icon-button.mud-icon-button-size-small {
    /* Boyut satırdan TÜRETİLİR — ayrı bir token eklenmez ki iki değer birbirinden ayrışamasın.
       Hücre dolgusu ve satır ayıracı düşülür, böylece buton hiçbir yoğunlukta satırı büyütemez.

       ÖLÇÜM NOTU: ilk denemede satır 41px görünüyordu ve suçlu buton sanıldı. Ondalıklı ölçüm
       bunu çürüttü — gerçek değer 40.80px: 40px hücre + tablonun 0.8px satır ayıracı. Yani
       hedef zaten tutuyordu, yuvarlama yanıltmıştı. Ayıraç kaldırılmadı; satırları ayıran
       çizgiyi silmek istenen bir şey değil. */
    width: calc((var(--bp-table-row-height) - 2 * var(--bp-spacing-xs) - 2px) * var(--bp-scale));
    height: calc((var(--bp-table-row-height) - 2 * var(--bp-spacing-xs) - 2px) * var(--bp-scale));
}


.mud-typography-h6 {
    font-size: calc(15px * var(--bp-scale)) !important;
    font-weight: 500 !important;
}

.mud-typography-subtitle1 {
    font-size: calc(13px * var(--bp-scale)) !important;
    font-weight: 500 !important;
}

/* ── Yardımcı/Açıklama Metni Semantik Standardı ──────────────────────
   MudBlazor'da Color="Color.Secondary" marka/aksiyon rengidir (bu temada
   parlak pembe #FF4081) — "soluk gri ikincil metin" ANLAMINA GELMEZ ve bu
   ikisi karıştırılmamalıdır (bkz. UI/UX Standardı v1 commit-öncesi
   düzeltme). Açıklama/yardımcı/metadata/düşük öncelikli metinler için
   Color parametresi yerine bu class kullanılır — tema TextSecondary
   token'ını okur, Light/Dark'ta otomatik doğru tona geçer. Gerçek
   marka-secondary kullanımı (buton, chip, icon, badge, avatar) bu
   class'tan ETKİLENMEZ, Color="Color.Secondary" olarak kalmaya devam eder. */
.bp-text-secondary {
    color: var(--mud-palette-text-secondary);
}

/* ── Parasal/Sayısal Alan Hizalaması — Genel Finansal UI Standardı ──
   Tüm parasal/sayısal input'lar (Tutar, Birim Fiyat, KDV, İskonto,
   Kur, Toplamlar vb.) bu class ile sağa hizalanır. DataGrid hücre
   düzeyinde CellStyle="text-align:right;" ile birlikte kullanılır ki
   hem görüntülenen değer hem editable input sağa yaslı olsun. Sayfa
   bazlı tekrar eden <style>.money-field bloklarını ÇOĞALTMAYIN. */
.money-field input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Menü Arama — Görünürlük Yardımcı Sınıfı ─────────────────────
   NavMenu'deki arama filtresi, zaten AuthorizeView tarafından
   render edilmiş (yetkilendirilmiş) MudNavLink/MudNavGroup öğelerini
   yalnızca bu class ile gizler — yeni bir yetki/renk sistemi değil,
   salt CSS düzeyinde bir show/hide anahtarı (bkz. Navigation/Menu
   Search Audit §10/§21/§27). */
.bp-nav-search-hidden {
    display: none !important;
}

/* ── Sabit Sidebar / İç Menü Scroll — Fixed Left Sidebar görevi ──────────────────
   Kök neden (bkz. NavMenu.razor'daki eşlik eden yorum): .mud-drawer zaten MudBlazor
   varsayılanıyla position:fixed + overflow:auto'dur — sorun drawer'ın kendisi değil,
   position:sticky ile "sabitlenmeye" çalışılan arama kutusuydu (birden çok kardeş
   eleman + iç içe overflow:auto ata nedeniyle sticky güvenilir çalışmıyordu, canlı
   ölçümde arama kutusu drawer scroll'unda top:-1303px'e kayboluyordu).

   .mud-drawer-content varsayılan olarak block/height:100%'tür; burada flex-column'a
   çevrilip iki parçaya ayrılıyor:
     1) MudDrawerHeader + MudDivider (MainLayout.razor) — doğal flex:0 0 auto
        yükseklikleriyle ÜSTTE sabit kalır (değişiklik gerekmez).
     2) NavMenu.razor'un kendi kök sarmalayıcısı (.bp-nav-menu-shell) — kalan TÜM
        alanı flex:1 1 auto ile doldurur.
   .bp-nav-menu-shell'in İÇİNDE arama (.bp-nav-search-header, flex:0 0 auto — asla
   scroll etmez) ve menü listesi (.bp-nav-menu-scroll, flex:1 1 auto + min-height:0 +
   overflow-y:auto — TEK gerçek scroll sahibi) ayrılır. .mud-drawer'ın kendi
   overflow:auto'su hâlâ CSS'te durur ama artık hiçbir zaman tetiklenmez çünkü
   .mud-drawer-content tam yüksekliği bu iki parçaya eksiksiz dağıtır.

   column-reverse / justify-content:flex-end / bottom-anchor / transform / JS scroll
   inversion KULLANILMADI — menü her zaman en üstten (Ana Sayfa) başlar (bkz. görev
   §4). Sağ kullanıcı panelinin (.mud-drawer-content, aynı class) içeriği tek bir
   MudStack olduğundan flex-column'a geçiş onun görünümünü etkilemez (tek flex item,
   normal block düzeniyle görsel olarak aynı). */
.mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bp-nav-menu-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.bp-nav-search-header {
    flex: 0 0 auto;
    background: var(--mud-palette-drawer-background);
}

.bp-nav-menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ── NavMenu Arama — Sabit Pozisyon Regresyonu (Final UI/UX Acceptance C4) ────────
   Kök neden (canlı DOM ölçümüyle doğrulandı): MainLayout.razor'daki düz <MudDivider />
   (MudDrawerHeader ile NavMenu arasında), MudBlazor'un kendi ".mud-divider-fullwidth
   {flex-grow:1}" kuralını miras alıyor — bu kural YATAY flex konteynerlerde (ör. bir
   toolbar'da kalan genişliği doldurma) anlamlıdır, ama burada .mud-drawer-content DİKEY
   bir flex kolonu olduğundan (bkz. yukarısı) divider de .bp-nav-menu-shell (flex:1 1 auto)
   ile birlikte kalan YÜKSEKLİĞİ paylaşmaya başlıyor. Arama menüdeki görünür öğe sayısını
   (dolayısıyla .bp-nav-menu-shell'in doğal içerik yüksekliğini) değiştirdiğinde, flex
   kolonundaki "boş" pay yeniden dağılıyor ve divider'ın yüksekliği ~1px'ten 193px'e kadar
   değişebiliyor (canlı ölçüldü) — bu da ALTINDAKİ tüm shell'i (ve içindeki sabit arama
   kutusunu) sayfada yukarı/aşağı kaydırıyordu. Çözüm: bu belirli divider'ı (yalnızca
   .mud-drawer-content'in DOĞRUDAN çocuğu olan) sabit/büyümeyen bir flex öğesine çevirmek —
   diğer .mud-divider-fullwidth kullanımları (ör. NavMenu içindeki "my-2" ayraçlar,
   dialoglar) ETKİLENMEZ, seçici yalnızca bu spesifik konumu hedefliyor. */
.mud-drawer-content > .mud-divider-fullwidth {
    flex: 0 0 auto;
}

/* ── Dashboard Widget Carousel — Sabit Kart Yüksekliği ─────────────
   Carousel sayfaları arasında geçiş yapılırken (List/Chart içerik
   uzunluğu farklı olabildiği için) dashboard'un zıplamaması için
   widget kartlarına ve carousel gövdesine tutarlı bir min-height
   verilir. Renk/tema token'ı DEĞİL, yalnızca boyut — Light/Dark'tan
   etkilenmez (bkz. Dashboard Widget Carousel görevi §35). */
.bp-dashboard-widget {
    height: 100%;
    min-height: 360px;
    box-sizing: border-box;
}

.bp-dashboard-widget-body {
    min-height: 220px;
}

/* .bp-dashboard-carousel, MudCarousel'in kök <section class="mud-carousel ..."> elemanının
   ÜZERİNDE — bir ÜST elemanı değil. MudCarouselItem'lar position:absolute olduğu için
   (geçiş animasyonu bunu gerektirir) kök section'a EXPLICIT bir yükseklik verilmezse
   içerik katkısı sıfır kalır ve carousel görsel olarak ~48px'e (yalnızca ok butonları)
   çöker (bkz. canlı test bulgusu). Değer, .bp-dashboard-widget min-height'i (360px) +
   MudGrid dolgu payı + alt bullet-gösterge şeridi için yeterli boşluğu kapsar. */
.bp-dashboard-carousel {
    min-height: 460px;
}

/* MudGrid'in md="4" kırılım noktasının (960px) ALTINDA widget'lar xs="12" ile tek
   sütuna yığılır — aynı carousel sayfasındaki 3 kart artık yan yana değil ALT ALTA
   render edilir ve toplam içerik yüksekliği masaüstü değerinin çok üzerine çıkar.
   MudCarouselItem position:absolute + height:100% kullandığı için (geçiş animasyonu
   gereği) kök .mud-carousel'e sabit bir min-height verilmezse üst üste yığılan içerik
   overflow:hidden nedeniyle KIRPILIR (bkz. canlı test — 1199px içerik 460px'e kırpıldı
   tespit edildi). Bu yüzden dar ekranlarda min-height MudGrid'in AYNI kırılım
   noktasında yığılmış 3 kartı kapsayacak şekilde artırılır. */
@media (max-width: 959.98px) {
    .bp-dashboard-carousel {
        min-height: 1400px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Fiş Başlık Kartları — Fatura/Sipariş/İrsaliye/Teklif/Sözleşme
   ortak görsel sistemi. bilkerportal-ui-standards skill Bölüm 5.6.
   Renkler MudTheme palette CSS değişkenleri üzerinden — hex hard-code
   YOK (bkz. UI/UX Standardı v1 §9/§19), böylece Light/Dark modda
   otomatik doğru tona geçer.
   ══════════════════════════════════════════════════════════════ */

/* Invoice Header Responsive UI/UX Correction — canlı ölçümle doğrulanmış kök nedenler:
   1) .fiche-header-row hiç sarmıyordu (nowrap) — 768px'de 142px, 390px'de 249px yatay
      taşma ölçüldü (3 kart küçülmenin sonunda taşıyordu, hiç satır değiştirmiyordu).
   2) .fiche-field-grid her zaman sabit 2 sütundu — dar bir kartta (ör. 194px) bu, tek tek
      alanları 14px genişliğe kadar sıkıştırıyordu (kullanılamaz).
   3) .fiche-field label 10.5px'e SABİT kodlanmıştı — --bp-font-size-label/--bp-scale
      token sistemini hiç kullanmıyordu (density/scale tercihiyle ölçeklenmiyordu).
   Detaylı kök neden/ölçüm kaydı: docs/reports/2026-08-26/invoice-header-responsive-ui-ux.md */

.fiche-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 8px;
    align-items: stretch;
}

.fiche-card {
    flex: 1 1 280px;
    min-width: 280px;
    background: var(--mud-palette-surface);
    border: 0.5px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 18px;
}

    .fiche-card.fiche-card-wide {
        flex: 1.6 1 320px;
        min-width: 320px;
    }

.fiche-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Sabit "52px 52px 52px" YERİNE minmax(52px, auto): Standard/100%'teki mevcut görünüm
       aynen korunur (52px zemin), ama uzun DE etiketi/helper/validasyon metni gerektiğinde
       satır BÜYÜYEBİLİR — sabit yükseklik bir sonraki alanla görsel ÇAKIŞMAYA yol açardı
       (bkz. görev §12 "Errors must not overlap next field"). */
    grid-auto-rows: minmax(52px, auto);
    gap: 12px 12px;
}

    .fiche-field-grid.fiche-single-col {
        grid-template-columns: 1fr;
    }

    /* TestPortal geri bildirimi §8: Açıklama 1 ve Açıklama 2, 2 sütunlu ızgarada YAN YANA
       düşüyordu; ikisi de uzun serbest metin alanı olduğu için dar sütunlarda okunmaz haldeydi.
       Mevcut .fiche-single-col deseniyle aynı mantık, ama yalnız bu iki alan için: her biri iki
       sütunu birden kaplar, dolayısıyla ALT ALTA gelir. Izgaranın kendisi değişmediği için diğer
       alanların responsive davranışı aynen korunur (tek sütuna düşen dar ekranlarda bu kural
       zaten etkisizdir). */
    .fiche-field-grid .fiche-field-full {
        grid-column: 1 / -1;
    }

.fiche-field label {
    display: block;
    /* Önceki sabit 10.5px, --bp-font-size-label/--bp-scale token sistemini (bkz. :root/
       .bp-density-* blokları yukarıda) hiç kullanmıyordu — bu yüzden Compact/Comfortable
       yoğunlukta veya %85-125 Portal Ölçeği'nde etiket boyutu SABİT kalıyor, input/etiket
       oranı tercihe göre bozuluyordu (bkz. görev §6/§8 canlı ölçüm — 125% ölçekte input
       15px'e büyürken etiket 10.5px'te donuk kalıyordu). */
    font-size: calc(var(--bp-font-size-label) * var(--bp-scale));
    color: var(--mud-palette-text-secondary);
    margin-bottom: calc(var(--bp-spacing-xs) * var(--bp-scale));
}

.fiche-value-row {
    display: flex;
    gap: 4px;
}

    .fiche-value-row .fiche-value-box {
        flex: 1;
    }

    .fiche-value-row .fiche-icon-btn {
        width: calc(var(--bp-icon-button-size-grid) * var(--bp-scale));
        height: calc(var(--bp-icon-button-size-grid) * var(--bp-scale));
        flex-shrink: 0;
    }

/* MudDatePicker'ın kök ".mud-picker" elemanı, boş bir ".mud-popover-cascading-value"
   kardeşi yüzünden MudTextField/MudSelect/MudAutocomplete'in gerçek render edilen
   yüksekliğinden (Standard/100%'te 51px — 30px içerik + MudBlazor'un kendi sabit
   dense+outlined dolgusu 10.5px+10.5px) 8px daha uzun render ediliyordu (canlı ölçüldü:
   59px), aynı satırdaki diğer alan tipleriyle dikey hizası bozuluyordu (bkz. görev §7
   "Control Height Consistency"). MudBlazor bunun için bir parametre sunmuyor — bu yüzden
   FicheDocInfoCard.razor'un date picker'lara ZATEN uyguladığı Class="fiche-value-box" kancası
   üzerinden dar kapsamlı (yalnızca fiş başlığı kartlarındaki date picker'lar) bir yükseklik
   zorlaması uygulanır; genel/global bir MudDatePicker override'ı DEĞİLDİR. */
.fiche-value-box.mud-picker {
    height: calc((var(--bp-input-height) * var(--bp-scale)) + 21px) !important;
}

.fiche-icon-btn.fiche-icon-accent {
    border-color: var(--mud-palette-primary) !important;
    background: var(--mud-palette-primary-hover) !important;
}

    .fiche-icon-btn.fiche-icon-accent .mud-icon-root {
        color: var(--mud-palette-primary);
    }

.fiche-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
    display: inline-block;
    margin-right: 5px;
}

/* FichePartyCard'ın ExtraFields slotu (Invoice'ta E-Fatura Profili/Durumu veya Leitweg-ID) —
   önceden style="display:flex;gap:12px;" olarak SABİT kodlanmıştı, hiç sarmıyordu. Çocuklar
   kendi inline style="flex:1;" değerini KORUR (bu kural onu override ETMEZ — flex-basis/grow
   inline stilden gelir), yalnızca min-width ekleyerek dar ekranda alt alta sarıldığında her
   birinin okunabilir kalmasını sağlar. */
.fiche-extra-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    .fiche-extra-row > * {
        min-width: 140px;
    }

/* Mobil/dar viewport — görev §5 "Header fields should normally become one logical field per
   row". Kart genişliği (min-width 280-320px) tek başına dar telefon ekranlarında 2 sütunu
   kullanılamaz hale getirebiliyordu (canlı ölçüldü: 1024px'de alanlar 14px genişliğe kadar
   sıkışıyordu) — bu yüzden 599.98px altında (MudBlazor'un kendi xs/sm sınırı, bkz.
   .bp-dashboard-carousel'deki AYNI 959.98px konvansiyonu) tüm fiş başlığı kartları tek sütuna
   zorlanır. Invoice'ın gerçek başlık alanlarının hiçbiri (Fiş No/Belge No/Müş. Sipariş No vb.
   serbest metin) güvenle ikili eşleştirilebilecek kadar öngörülebilir/kısa değildir (bkz. görev
   §5 "decide from actual rendered width, not assumption") — bu yüzden varsayılan tek-sütun
   tercih edildi, spekülatif bir "kısa alan çifti" istisnası İCAT EDİLMEDİ. */
@media (max-width: 599.98px) {
    .fiche-field-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════
   Sticky Card Action Bar + Scroll-to-Top — UI/UX 2C
   Uzun Card/sayfa ekranlarında (Customer/Product/Service/Invoice/
   BankFiche) üst aksiyon barının kullanıcı aşağı kaydığında erişilebilir
   kalması içindir. MudAppBar'ın gerçek yüksekliği canlı ölçüldü: 64px
   (.mud-appbar-fixed-top, position:fixed, z-index:1300) ve --bp-scale
   yalnızca MudContainer içine uygulanıyor (AppBar'a değil, bkz.
   MainLayout.razor) — bu yüzden bu değer density/scale tercihinden
   etkilenmez, sabit yazılması güvenlidir. Sayfanın gerçek scroll sahibi
   de canlı doğrulandı: document.scrollingElement === html (MudMainContent/
   MudLayout kendi içinde scroll etmiyor, overflow-y:visible) — bu yüzden
   position:sticky burada çalışır ve scroll-to-top window.scrollTo
   kullanabilir (yanlış container'a bağlanma riski yok).
   ══════════════════════════════════════════════════════════════ */

.bp-card-actionbar {
    position: sticky;
    top: 64px;
    z-index: 10;
    background: var(--mud-palette-background);
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.bp-scroll-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
}

/* Solution-Wide UI/UX Hardening (live pass) — orijinal .NET şablon renkleri (#f8d7da/#721c24)
   sabit/hardcoded ve Koyu temada uyum sağlamıyordu (bkz. görev §4/§17). Davranış (tam sayfa
   yeniden yükleme gerektiren circuit-sonlandırma) BİLİNÇLİ OLARAK değiştirilmedi — bu, global bir
   ErrorBoundary'ye geçiş anlamına gelir ve ayrı bir ürün kararı gerektirir (bkz.
   docs/UI_UX_BACKLOG.md UIUX-001). Burada yalnızca zaten var olan, kaçınılmaz banner'ın rengi
   mevcut tema token sistemine (--mud-palette-error*) taşındı. */
#blazor-error-ui {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0,0,0,.15);
    display: none;
    left: 0;
    padding: 0.9rem 3rem 0.9rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.95rem;
}

    #blazor-error-ui .reload {
        color: var(--mud-palette-error-text);
        text-decoration: underline;
        margin-left: 0.5rem;
        font-weight: 600;
        cursor: pointer;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.6rem;
        color: var(--mud-palette-error-text);
    }

/* ══════════════════════════════════════════════════════════════
   NavMenu Seçili/Hover Durumu — UI/UX 2A Alt Adım 2
   NavMenu.razor'daki <MudNavMenu Color="Color.Primary"> zaten MudBlazor'un
   kendi "navmenu-primary" varyantını (ikon rengi dahil, bkz. MudBlazor.min.css
   .mud-navmenu-primary kuralları) devreye sokuyor — bu yüzden burada ikon
   rengi için ayrı bir override YOK. Bu blok yalnızca MudBlazor'un varsayılan
   ~%6 (--mud-palette-primary-hover) arkaplanını istenen ~%10'a çıkarır ve sol
   ~3px indicator ekler. Seçici, MudBlazor'un kendi kuralıyla AYNI specificity'de
   tutuldu (.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(...)) —
   app.css, MudBlazor.min.css'ten SONRA yüklendiği için eşit specificity'de
   kazanır; daha genel bir seçici MudBlazor'un kuralına asla yetişemezdi (kanıtlandı,
   bkz. canlı specificity denemesi). Tüm renkler --mud-palette-primary-rgb'den
   türetilir — yeni hardcoded hex YOK, Light/Dark'ta otomatik doğru tona geçer.
   NavMenu.razor'ın IA/gruplama yapısına dokunulmadı.
   ══════════════════════════════════════════════════════════════ */

.mud-nav-link {
    border-left: 3px solid transparent;
}

.mud-nav-link:hover:not(.active) {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
}

.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.10) !important;
    border-left-color: var(--mud-palette-primary) !important;
}

/* ── Koyu temada aktif menü öğesinin OKUNABİLİRLİĞİ ──────────────────────────────
   ÖLÇÜM (canlı, kompozit zemin üzerinden): aktif öğenin metni koyu temada 3.90:1
   çıkıyor — WCAG AA eşiği 4.5. Sebep marka morunun kendisi değil: düz koyu zeminde
   aynı renk 4.68 veriyor. Aktif öğenin KENDİ %10'luk tonu zemini açıyor ve oranı
   eşiğin altına düşürüyor. Açık temada aynı ölçüm 5.35 — sorun yalnız koyu modda.

   ÇÖZÜM yeni bir hex DEĞİL: MudBlazor'un kendi türetilmiş tonu kullanılıyor
   (--mud-palette-primary-lighten), yani renk hâlâ tek bir marka kaynağından geliyor.
   Ölçülen sonuç: 3.90 → 5.55.

   Kural YALNIZ koyu moda kapsanır; açık temada aynı tonu kullanmak oradaki 5.35'i
   DÜŞÜRÜRDÜ. Koyu mod işareti MudBlazor'dan gelmez (DOM'a hiçbir şey yazmaz), bu
   yüzden MainLayout kendi `bp-theme-dark` sınıfını kök MudLayout'a koyar.

   Zemin tonuna DOKUNULMADI: onu koyulaştırmak kontrastı daha da düşürürdü; ayrıca
   sol indicator ve 500 font-weight zaten anlamı renkten bağımsız taşıyor. */
.bp-theme-dark .mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary-lighten) !important;
}
/* ── Grid'de para hücresi — Borç / Alacak / Bakiye ────────────────────────────────
   KÖK NEDEN (canlı computed-style ölçümüyle): yeni finansal kolonlar içeriklerini
   MudText/MudStack içine sarıyordu. MudText Typo="body2" kendi tipografisini getiriyor
   (14px / 20.02px), oysa grid hücresinin kendi tipografisi 12px / 17.16px — yani aynı
   satırdaki Borç ve Alacak ile Bakiye farklı boyda çıkıyordu. Banka listesinde ise üç
   kolon da IsNumeric taşımadığı için ne hücre ne BAŞLIK sağa hizalanıyordu; hizalama
   yalnız iç MudText'teydi, başlık solda kalıyordu.

   ÇÖZÜM: bu sınıf tipografiyi KENDİ TANIMLAMAZ — hücreden miras alır. Böylece yoğunluk
   (standard/compact), tema ve ölçek için tek kaynak grid'in kendisi olarak kalır; para
   hücresi hiçbir zaman ondan ayrışamaz. Sağa hizalama artık kolonun IsNumeric'i üzerinden
   ortak GetColumnStyle'dan gelir (başlık + hücre birlikte); bu sınıf yalnız hücre içindeki
   satırları aynı kenara yaslar, sarmayı engeller ve rakamları sabit genişlikte dizer.

   Sabit piksel genişlik KULLANILMADI: kolon genişliği içeriğe göre belirlenir, dar ekranda
   tablo kendi yatay kaydırmasını korur. */
.bp-grid-money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Rakamlar sütun sütun hizalansın — tutarlar farklı basamak sayısında olduğunda bile. */
    font-variant-numeric: tabular-nums;
}

/* Uzun tutar satırı büyütmez: tek satırda kalır, kolon genişler.
   Bakiye'nin (B)/(A) yön eki de bu sayede kırpılmaz/alt satıra düşmez. */
.bp-grid-money > span {
    white-space: nowrap;
}

/* ── Sağa hizalı hücre standardı ──────────────────────────────────────────────────
   Ölçüm: 33 satırda 45 ayrı inline `text-align:right` (CellStyle+HeaderStyle çiftleri
   dâhil). Bunları TEK sınıfta toplamak YANLIŞ olurdu — üç FARKLI anlam taşıyorlar ve
   bir kısmı hiç sayısal değil:

     .bp-amount        para değeri (Tutar, Borç, Alacak, Bakiye, KDV, İndirim, Net, Fiyat)
     .bp-numeric       sayısal ama para olmayan değer (Miktar, oran/yüzde)
     .bp-cell-actions  satır aksiyon kolonu — SAYI DEĞİL, buton grubudur

   Aksiyon kolonuna tabular-nums uygulamak butonlara sayı tipografisi dayatırdı; bu
   yüzden ayrı tutuldu. Para ile miktar da ayrı: ileride yalnız paraya dokunan bir
   değişiklik (negatif gösterimi, para birimi eki) miktarı etkilemesin.

   INPUT içindeki sayı bu sınıflara BAĞLANMAZ — onun kendi mevcut kaynağı `.money-field`
   sürüyor (farklı DOM: değer bir <input>, burada ise hücre metni).

   Global `td`/`input`/MudBlazor iç selector'ı kullanılmadı; !important yok. */
.bp-amount,
.bp-numeric,
.bp-cell-actions {
    text-align: right;
}

.bp-amount,
.bp-numeric {
    font-variant-numeric: tabular-nums;
}

/* Uzun tutar satırı büyütmez. Miktar/oran kısa olduğu için zorlanmaz. */
.bp-amount {
    white-space: nowrap;
}

/* ── Alan içi (adornment) ikon butonu ölçüsü ──────────────────────────────────────
   ÖLÇÜM: alan toplam yüksekliği 51px iken, alanın İÇİNDEKİ adornment butonları
   MudBlazor'un varsayılan orta boyuyla 48px render ediliyordu — yani buton alanı
   neredeyse tümüyle dolduruyor, üstte/altta 1.5px kalıyordu.

   Bunlar `<MudIconButton Size="Size.Small">` DEĞİL; MudBlazor'un kendi ürettiği
   adornment butonları (autocomplete açılır oku, temizle düğmesi, AppCodeField'in
   üretme düğmesi). Kaynakta bir Size parametresi yok, bu yüzden mevcut
   --bp-icon-button-size tokenına da bağlanmıyorlardı.

   Burada aynı token bağlanıyor: ölçü artık bağlama göre ADLANDIRILMIŞ tek kaynaktan
   gelir. Alanın kendi geometrisi (30px içerik / 51px dış) DEĞİŞMEZ — yalnız içindeki
   butonun kutusu küçülür ve dikeyde ortalı kalır.

   Kapsam bilinçli olarak dar: yalnız .mud-input-adornment içi. Sayfa başlığı, toolbar
   ve dialog kapatma butonları (48px) bu kuralın DIŞINDADIR — onlar birincil dokunma
   hedefleridir ve küçültülmemelidir. */
.mud-input-adornment .mud-icon-button {
    width: calc(var(--bp-icon-button-size) * var(--bp-scale));
    height: calc(var(--bp-icon-button-size) * var(--bp-scale));
}

/* Grid hücresinde tek satır + "…" kırpma.
   Satır yüksekliğini YOĞUNLUK belirler, veri değil: uzun bir ünvan Kompakt'ta satırı 32px'ten
   134.9px'e çıkarıyordu (ölçüldü) ve Kompakt profil Standart'tan daha seyrek görünüyordu.
   Tam değer kaybolmaz — hücre metni title taşır (bkz. AppDataTable.CellTemplate). */
.bp-cell-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   İKİNCİL PANEL — dar görünümde formun ALTINA iner

   ERP veri girişinde öncelik sırası: önce formun temel alanları, sonra işlem düğmeleri, en son
   ikincil görsel panel (fotoğraf/logo).

   ÖLÇÜLEN SORUN: fotoğraf paneli DOM'da formdan ÖNCE geliyor. Geniş masaüstünde bu doğru —
   solda panel, sağda form. Ama 1024px'te ızgara tek kolona düştüğünde panel formun ÜSTÜNE
   biniyordu ve kullanıcı ilk alana ulaşmak için kaydırmak zorunda kalıyordu.

   ÇÖZÜM DOM sırasını değiştirmez (masaüstü düzeni ve sekme/odak sırası korunur); yalnız
   flex 'order' ile dar görünümde panel sona alınır. Panel KALDIRILMAZ, gizlenmez. */
/* DOM sırası artık FORM ÖNCE, panel sonra — yani dar görünümde hiçbir kural gerekmez:
   görsel sıra, okuma sırası ve Tab sırası kendiliğinden aynıdır.

   ÖNCEKİ ÇÖZÜMÜN KUSURU (gerçek klavye testiyle ölçüldü): panel DOM'da formdan önceydi ve
   yalnız CSS `order` ile görsel olarak sona alınıyordu. 1024px'te Tab sırası şuydu —
   4) sekme oku · 5) NOTLAR (y=1480, sayfa 850px otomatik kaydı) · 6) Müşteri Kodu (y=350,
   geri zıpladı). Kullanıcı görünür formu atlayıp ekranın altına fırlatılıyordu.

   Geniş ekranda panel görsel olarak SOLDA kalır. Orada da DOM'da ikincidir, ama panel ve form
   AYNI ANDA ekrandadır: odak hiçbir zaman görünmeyen bir yere gitmez ve otomatik kaydırma
   oluşmaz. Dar görünümdeki zarar bu değildi. */
@media (min-width: 1280px) {
    .bp-secondary-panel {
        order: -1;
    }
}

/* ── Dosya seçme aracı input'u (bkz. Components/Shared/AppFilePickerButton.razor) ──────────────────────
   `display:none` DEĞİL: görsel olarak gizlenir ama DOM'da ve düzen dışında kalır. Görünür
   kontrol gerçek bir <button>'dır; bu input yalnızca dosya seçiciyi açan aracıdır ve
   tabindex="-1" ile ayrı bir sekme durağı oluşturmaz. */
.bp-file-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Izgara satır aksiyonu ikon butonu ────────────────────────────────────────────
   ÖLÇÜM (Design System v2 §3/B2): aynı ekranda dört ayrı ikon butonu ölçüsü vardı ve
   ayrım hiçbir yerde TOKEN olarak tanımlı değildi:

     30px  liste/ızgara satır aksiyonları (MudBlazor'un kendi dense-tablo davranışı)
     30px  cari alanının yanındaki açıcılar (.fiche-icon-btn — SABİT 30px yazılıydı)
     36px  form/adornment/menü  → --bp-icon-button-size'a zaten bağlıydı
     48px  app bar ve sayfalama → birincil dokunma hedefi, KASITLI olarak hariç

   Ayrım işlevsel olarak doğruydu (ızgara aksiyonu, form aksiyonundan küçük olmalı) ama
   iki 30px değeri de yoğunluğa göre ölçeklenmiyordu: Kompakt'ta da Rahat'ta da 30px
   kalıyordu. Artık ikisi de ADLANDIRILMIŞ tek kaynaktan gelir ve yoğunlukla ölçeklenir
   (26 · 30 · 34). Standart yoğunlukta değer bugünkü ölçümün AYNISIDIR — görünüm değişmez.

   Kapsam dar tutuldu: yalnız tablo HÜCRESİ içindeki gerçek <button>. MudSwitch'in kendi
   thumb'ı da `mud-icon-button` sınıfını taşır (ölçüldü: 38px, /products) ama o bir ikon
   butonu DEĞİLDİR — `button` seçicisi onu dışarıda bırakır. */
.mud-table-cell button.mud-icon-button {
    width: calc(var(--bp-icon-button-size-grid) * var(--bp-scale));
    height: calc(var(--bp-icon-button-size-grid) * var(--bp-scale));
}

/* ── Boş durum satırı ─────────────────────────────────────────────────────────────
   ÖLÇÜM (Design System v2 §3/B5): fatura satır ızgarasının BOŞ durum satırı 76px, dolu
   veri satırı 40–41px. Boş durum, dolu satırın neredeyse iki katı yer kaplıyordu; ölçü
   hiçbir token'dan gelmiyordu (MudBlazor'un kendi NoRecords hücresi).

   Artık dolu satırla AYNI token'dan (--bp-table-row-height) beslenir; metin dikeyde
   ortalanır. Satırın kendisi büyüyebilir (uzun boş-durum metni sarabilir) — bu bir ALT
   SINIR'dır, sabit yükseklik değil. */
/* MudBlazor bos durum hucresini <td> DEGIL <th> olarak cizer (olculdu: TH.mud-table-empty-row);
   bu yuzden eleman adi ile nitelenmez. */
.mud-table-root .mud-table-empty-row {
    height: calc(var(--bp-table-row-height) * var(--bp-scale));
    vertical-align: middle;
}

    /* Yuksekligi asil belirleyen, MudBlazor'un ic sarmalayicisindaki "my-3" (ust+alt 12px =
       24px) marjidir --- td yuksekligi tek basina yetmez. Marj token'a baglanir; metin uzun
       olup sararsa satir yine buyuyebilir (ALT SINIR, sabit yukseklik degil). */
    .mud-table-root .mud-table-empty-row > div {
        /* MudBlazor'un "my-3" yardimci sinifi !important tasir; token bunu ancak ayni silahla
           yenebilir. Kapsam tek bir hucreyle sinirli. */
        margin-top: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
        margin-bottom: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
    }