/* ══════════════════════════════════════════════════════════════
   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.
   ══════════════════════════════════════════════════════════════ */

:root {
    --bp-scale: 1;

    --bp-row-height: 32px;
    --bp-input-height: 30px;
    --bp-icon-button-size: 30px;
    --bp-chip-height: 22px;

    --bp-font-size-input: 12px;
    --bp-font-size-label: 11px;
    --bp-font-size-icon: 18px;

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

    --bp-border-radius: 6px;
}

.bp-density-standard {
    /* :root varsayılanlarıyla aynı — açıkça belirtildi, bkz. yukarıdaki not. */
}

.bp-density-compact {
    --bp-row-height: 28px;
    --bp-input-height: 26px;
    --bp-icon-button-size: 26px;
    --bp-chip-height: 20px;
    --bp-font-size-input: 11px;
    --bp-font-size-label: 10px;
    --bp-font-size-icon: 16px;
    --bp-spacing-xs: 2px;
    --bp-spacing-sm: 6px;
    --bp-spacing-md: 12px;
}

.bp-density-comfortable {
    --bp-row-height: 40px;
    --bp-input-height: 36px;
    --bp-icon-button-size: 36px;
    --bp-chip-height: 26px;
    --bp-font-size-input: 13px;
    --bp-font-size-label: 12px;
    --bp-font-size-icon: 20px;
    --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: var(--bp-border-radius);
}

/* !important gerekli: MudBlazor'un kendi ".mud-input > input.mud-input-root"
   gibi kuralları (type+class bileşimi) bizim 2-class selector'ımızdan daha
   yüksek özgüllüğe (specificity) sahip — bkz. UI/UX v1 canlı test bulgusu.
   Bu blok zaten "MudBlazor'un -dense/-small class'larını override etmek"
   için var (bkz. dosya başlığı) ve aşağıdaki .mud-typography-* kuralları
   da AYNI nedenle zaten !important kullanıyordu — yeni bir desen değil. */
.mud-input-margin-dense .mud-input-slot {
    height: calc(var(--bp-input-height) * var(--bp-scale)) !important;
}

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

.mud-input-label {
    font-size: calc(var(--bp-font-size-label) * 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));
}

/* Bkz. UI/UX 2B §4 — kök neden bulundu: MudBlazor'un kendi
   ".mud-table-dense * .mud-table-row .mud-table-cell" kuralı (3 class'lı,
   specificity (0,3,0)) sabit "padding:6px 24px 6px 16px" veriyor — bizim
   önceki 2 class'lı (.mud-table-dense .mud-table-cell, specificity (0,2,0))
   padding-top/bottom override'ımız bu yüzden HİÇ uygulanmıyordu (kaybediyordu),
   yalnızca height zorlanıyordu ki bu da içerik (satır yüksekliği, MudBlazor'un
   6px+6px dolgusundan) zaten daha büyük olduğu için etkisizdi — Compact'ta
   token 28px hedeflese bile gerçek hücre içeriği ~33px'e dayatıyordu.
   Çözüm: aynı/daha yüksek specificity (.mud-table-row eklendi) + !important —
   bu dosyanın geri kalanında zaten kanıtlanmış desen (bkz. NavMenu, density
   input kuralları). Header hücreleri (MudDataGrid filter-header-cell) için de
   aynı specificity sorunu var, ayrıca ele alındı. */
.mud-table-dense .mud-table-row .mud-table-cell,
.mud-table-dense .mud-table-cell,
.mud-table-dense td {
    height: calc(var(--bp-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;
}

    .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;
    }

/* MudDataGrid header hücresi ("filter-header-cell") — aynı kök neden,
   aynı çözüm: MudBlazor'un ".mud-data-grid .mud-table-cell.filter-header-cell"
   (specificity (0,3,0)) sabit dolgusunu eşit/üstün specificity + !important
   ile aşıyoruz. */
.mud-data-grid .mud-table-cell.filter-header-cell {
    padding-top: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
    padding-bottom: calc(var(--bp-spacing-xs) * var(--bp-scale)) !important;
    font-size: calc(var(--bp-font-size-label) * var(--bp-scale)) !important;
}

.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;
    }

.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: 30px;
        height: 30px;
        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;
}