/* ==========================================================================
   BELGE ÇALIŞMA ALANI — fatura (ve sonra irsaliye/sipariş/teklif) ekranlarının
   ortak iskeleti. Bileşenler: Components/Shared/Document/*.

   Yerleşim yukarıdan aşağı dört bölgedir ve sırası Türkiye'deki fatura ekranlarının
   ortak alışkanlığıdır (Logo/Mikro/Paraşüt): belge şeridi → belge bilgileri →
   kalemler → toplam. Şerit ile toplam YAPIŞIKTIR: 100 satırlı faturada da kaydet ve
   genel toplam görünür kalır. Kaydırma kabı EditPageLayout'un RadzenCard'ıdır.

   Renk yalnızca anlam taşır (durum, birincil eylem, uyarı); bölümler kartla değil
   ince çizgiyle ayrılır. Değişkenler app.css'teki --sd-* aileyle aynıdır, açık/koyu
   temada çalışır. Tema app.css'ten SONRA yüklendiği için seçiciler iki sınıflıdır.
   ========================================================================== */

.sd-doc {
    --sd-doc-gap: 10px;
    --sd-doc-label: var(--sd-text-muted, var(--rz-text-secondary-color));
    display: flex;
    flex-direction: column;
    gap: var(--sd-doc-gap);
    /* Belge alanı en az pencere yüksekliğindedir ve toplam şeridi en alta itilir: içerik kısa
       olduğunda (ör. Ödeme ve Avans sekmesi) şerit içeriğin hemen altında, sayfanın ortasında
       kalıyordu. Uzun içerikte yapışık konum (sticky) onu yine altta tutar. Eksi pay, belge
       şeridinin ve kartın iç boşluğunun yaklaşık yüksekliğidir; fazla tahmin zararsızdır
       (şerit yapışık kalır), eksik tahmin şeridin altında boşluk bırakırdı. */
    min-height: calc(100vh - 30px - 2 * var(--rz-card-padding, 1rem) - 44px);
}

.sd-doc > form {
    display: flex;
    flex-direction: column;
    gap: var(--sd-doc-gap);
    flex: 1 1 auto;
}

.sd-doc > form > .sd-doc-totals {
    margin-top: auto;
}

/* Kalemleri FORMUN DIŞINDA çizen ekranlar (masraf fişi tarama partisi: yükleme, çözümleme ve fiş
   paneli formdan bağımsızdır) formu esnetmez; esnetilseydi başlıkla alttaki bölümler arasında
   ekran yüksekliği kadar boşluk kalırdı. */
.sd-doc.sd-doc--form-auto > form {
    flex: 0 0 auto;
}

/* ---------- Belge şeridi (yapışık üst) ---------- */

.sd-doc-bar.sd-doc-bar {
    position: sticky;
    top: calc(-1 * var(--rz-card-padding, 1rem));
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: calc(-1 * var(--rz-card-padding, 1rem)) calc(-1 * var(--rz-card-padding, 1rem)) 10px;
    padding: 8px var(--rz-card-padding, 1rem);
    background: var(--rz-base-background-color, var(--rz-body-background-color));
    border-bottom: 1px solid var(--sd-border, var(--rz-base-300));
}

.sd-doc-bar .sd-doc-identity {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.sd-doc-bar .sd-doc-kind {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-primary);
    white-space: nowrap;
}

.sd-doc-bar .sd-doc-kind.sd-doc-kind--return {
    color: var(--rz-warning-dark, var(--rz-warning));
}

.sd-doc-bar .sd-doc-no {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rz-text-color);
    white-space: nowrap;
}

.sd-doc-bar .sd-doc-no.sd-doc-no--empty {
    font-weight: 400;
    color: var(--sd-doc-label);
}

.sd-doc-bar .sd-doc-date {
    color: var(--sd-doc-label);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sd-doc-bar .sd-doc-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
}

.sd-doc-bar .sd-doc-mode {
    font-size: 0.85rem;
    color: var(--sd-doc-label);
    border: 1px solid var(--sd-border, var(--rz-base-300));
    border-radius: 10px;
    padding: 0 8px;
    line-height: 18px;
    white-space: nowrap;
}

.sd-doc-bar .sd-doc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.sd-doc-bar .sd-doc-actions-sep {
    width: 1px;
    height: 22px;
    background: var(--sd-border, var(--rz-base-300));
    margin: 0 4px;
}

/* ---------- Belge bilgileri ---------- */

.sd-doc-head.sd-doc-head {
    display: grid;
    grid-template-columns: minmax(320px, 5fr) minmax(420px, 7fr);
    gap: 4px 28px;
    align-items: start;
}

/* 1366px'te (kenar menüsü açıkken ~1100px içerik) iki bölge yan yana sığmazsa alt alta iner. */
@media (max-width: 1180px) {
    .sd-doc-head.sd-doc-head {
        grid-template-columns: 1fr;
    }
}

.sd-doc-head .sd-doc-party {
    display: flex;
    flex-direction: column;
    /* "Etiket üstte" bileşeninin etiket–kutu aralığıyla aynı (sd-label-on-top: 0.25rem). */
    gap: 0.25rem;
    min-width: 0;
}

/* Taraf satırındaki kutular etiketsiz ("solda") kipte çizilir; o kipte Radzen form içeriğine
   6px üst pay verir ve kutu yandaki kimlik alanlarından aşağıda başlıyordu. "Etiket üstte"
   kipinde bu pay zaten yoktur. */
.sd-doc-head .sd-doc-party-input .rz-form-field-content { margin-top: 0; }

/* Taraf etiketi kimlik alanlarının etiketiyle AYNI tipografiyi taşır. "Etiket üstte" bileşeninde
   metin <label class="rz-label"><p class="rz-text-body2"> içindedir ve boyu dış etiketten değil
   rz-text-body2 değişkenlerinden gelir (bu kapta 10,5px). Taraf etiketi eskiden gövde yazı boyuyla
   (1.1rem ≈ 15,4px) çiziliyordu: yan yana etiketler farklı boyda kalıyor, hiza kayıyordu. Aynı
   değişkenler kullanılır ki tema/kap değişince ikisi birlikte değişsin. */
.sd-doc-head .sd-doc-label {
    font-size: var(--rz-text-body2-font-size);
    font-weight: var(--rz-text-body2-font-weight, 400);
    letter-spacing: var(--rz-text-body2-letter-spacing, normal);
    color: var(--rz-text-color);
    line-height: var(--rz-text-body2-line-height, 1.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-doc-head .sd-doc-party-input {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Kart tipi seçicisi sabit, karşısındaki seçici (cari / hesap / kasa / banka — dördü de DOM'da,
   yalnızca biri görünür) kalan yeri alır. `:last-child` YETMEZ: son öğe gizli banka seçicisidir
   ve görünen cari seçicisi uzun ünvanın doğal genişliğinde kalıp Hareket Kodu'nun üstüne
   taşıyordu (kullanıcı ekran görüntüsüyle bildirdi). */
.sd-doc-head .sd-doc-party-input > * {
    min-width: 0;
}

/* Genişleme girdinin kendi satır içi stilinden gelir: Width="0" olan seçici "flex: 1 1 auto",
   sabit genişlikli kart tipi seçicisi "flex: 0 1 auto" yazar. Kural yalnızca daralmaya izin verir;
   böylece kart tipi seçicisi olmayan ekranda (irsaliye) da cari kutusu yeri doldurur. */

/* Başlıktaki seçicilerin genişliği kaptan gelir, metinden değil: uzun değer kutuda kesilir,
   komşu alanın üstüne taşmaz. */
.sd-doc-head .rz-dropdown,
.sd-doc-more .rz-dropdown {
    contain: inline-size;
    min-width: 0;
}

/* Cari, ekranın en önemli seçimidir: alanı biraz daha iri ve kalın yazılır. */
.sd-doc-head .sd-doc-party-input .rz-dropdown .rz-inputtext,
.sd-doc-head .sd-doc-party-input .rz-dropdown .rz-dropdown-label {
    font-size: 1.15rem;
    font-weight: 600;
}

.sd-doc-head .sd-doc-party-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    min-height: 18px;
    color: var(--sd-doc-label);
    font-size: var(--rz-text-caption-font-size);
}

.sd-doc-head .sd-doc-party-summary .sd-doc-flag--danger { color: var(--rz-danger); }
.sd-doc-head .sd-doc-party-summary .sd-doc-flag--warning { color: var(--rz-warning-dark, var(--rz-warning)); }

.sd-doc-head .sd-doc-meta {
    display: grid;
    grid-template-columns: minmax(170px, 2.2fr) minmax(120px, 1.2fr) minmax(140px, 1.6fr);
    gap: 4px 12px;
    align-items: end;
    min-width: 0;
}

.sd-doc-head .sd-doc-meta > * { min-width: 0; }

/* Sağ bölgenin TAB SIRASINDA önce gelmesi gereken ekranlar (çek-senet bordrosu: pozisyon hesap
   tiplerini belirler ve değişince seçili hesapları temizler). DOM'da sağ bölge önce yazılır,
   görünümde sol bölge yine soldadır. Dar ekranda tek sütuna inince DOM sırası geçerlidir. */
.sd-doc-head.sd-doc-head--meta-first > .sd-doc-party { grid-column: 1; grid-row: 1; }
.sd-doc-head.sd-doc-head--meta-first > .sd-doc-meta { grid-column: 2; grid-row: 1; }

/* Dar ekranda iki bölge alt alta inerdi ve tek satırlık taraf (ana hesap) bütün genişliği
   kaplıyordu; sağ bölgenin ikinci satırı ise yalnızca Şube'yi taşıdığı için yarısı boş kalıyordu.
   Bu ekranlarda iki bölge tek ızgarada birleşir: kimlik alanları kendi sırasıyla akar, taraf
   ikinci satırda Şube'nin yanındaki iki hücreyi alır. DOM (Tab) sırası değişmez. */
@media (max-width: 1180px) {
    .sd-doc-head.sd-doc-head--meta-first {
        grid-template-columns: minmax(170px, 2.2fr) minmax(120px, 1.2fr) minmax(140px, 1.6fr);
        column-gap: 12px;
    }
    .sd-doc-head.sd-doc-head--meta-first > .sd-doc-meta { display: contents; }
    /* Taraf iki satıra yayılır: iki alanlı tarafta (talep eden + depo, borçlu + alacaklı) ikinci
       alan sağ bölgenin üçüncü kimlik alanının yanına oturur, kendi satırını açmaz. */
    .sd-doc-head.sd-doc-head--meta-first > .sd-doc-party { grid-column: 2 / span 2; grid-row: 2 / span 2; }
    /* Kimlik alanlarındaki iki hücrelik alan (kar merkezi) birleşik ızgarada tek hücreye iner;
       aksi hâlde tarafın sütunlarıyla çakışır ve en alta itilir. */
    .sd-doc-head.sd-doc-head--meta-first > .sd-doc-meta .sd-doc-span-2 { grid-column: auto; }
}

/* Taraf bölgesinde birden fazla hesap satırı varsa (borçlu / alacaklı) ikinci grup, yandaki
   kimlik alanlarının ikinci satırıyla AYNI hizada başlar: aradaki boşluk başlık ızgarasının satır
   aralığıdır (4px); grup içi aralık (0.25rem) zaten verildiği için yalnızca farkı eklenir. */
.sd-doc-head .sd-doc-party-input + .sd-doc-label { margin-top: calc(4px - 0.25rem); }

.sd-doc-head .sd-doc-meta .sd-doc-span-2 { grid-column: span 2; }

.sd-doc-head .sd-doc-currency,
.sd-doc-more .sd-doc-currency {
    display: flex;
    gap: 6px;
    align-items: end;
    min-width: 0;
}

.sd-doc-head .sd-doc-currency > *,
.sd-doc-more .sd-doc-currency > * { flex: 1 1 0; min-width: 0; }
.sd-doc-head .sd-doc-currency > :first-child,
.sd-doc-more .sd-doc-currency > :first-child { flex: 0 0 96px; }

/* ---------- Katlanır bölüm ("Diğer bilgiler") ---------- */

.sd-doc-more.sd-doc-more {
    border-top: 1px solid var(--sd-border, var(--rz-base-300));
    border-bottom: 1px solid var(--sd-border, var(--rz-base-300));
}

.sd-doc-more .sd-doc-more-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--rz-text-color);
    font: inherit;
}

.sd-doc-more .sd-doc-more-toggle:hover { background: var(--sd-surface-hover, var(--rz-base-100)); }
.sd-doc-more .sd-doc-more-toggle:focus-visible { outline: 2px solid var(--rz-primary); outline-offset: -2px; }

.sd-doc-more .sd-doc-more-title { font-weight: 600; white-space: nowrap; }

.sd-doc-more .sd-doc-more-summary {
    color: var(--sd-doc-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sd-doc-more .sd-doc-more-body {
    padding: 4px 2px 10px;
}

/* Kapalıyken içerik DOM'da kalır: alanların @ref'leri ve açılır listelerin durumu
   (ör. kur tipi seçicisinin Refresh çağrısı) render ağacından düşmemelidir. */
.sd-doc-more.sd-doc-more--closed .sd-doc-more-body { display: none; }

.sd-doc-more .sd-doc-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 4px 16px;
    align-items: end;
}

.sd-doc-more .sd-doc-more-grid > * { min-width: 0; }
.sd-doc-more .sd-doc-more-grid .sd-doc-span-2 { grid-column: span 2; }

.sd-doc-pair {
    display: flex;
    gap: 6px;
    align-items: end;
    min-width: 0;
}

.sd-doc-pair > * { flex: 1 1 0; min-width: 0; }
.sd-doc-pair > .sd-doc-pair-narrow { flex: 0 0 80px; }

/* ---------- Sekmeler ve kalemler ---------- */

.sd-doc-tabs.sd-doc-tabs > .rz-tabview-nav {
    border-bottom: 1px solid var(--sd-border, var(--rz-base-300));
}

.sd-doc-tabs .sd-doc-tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    background: var(--rz-info);
}

.sd-doc-tabs .sd-doc-tab-dot.sd-doc-tab-dot--danger { background: var(--rz-danger); }

.sd-doc-tabs .sd-doc-tab-count {
    color: var(--sd-doc-label);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

/* Kalem ızgarası: kalan yüksekliği doldurur, kendi içinde kayar ve başlığı yerinde kalır.
   Alt sınır, şerit + toplam + başlık blokları ekrana sığmasa bile en az ~8 satır gösterir. */
.sd-doc-lines .rz-data-grid.rz-data-grid {
    height: max(300px, calc(100vh - 380px));
}

/* GENİŞLİK "unset" OLAMAZ: `table-layout: fixed` yalnızca belirli genişlikte çalışır;
   `max-content` kullanıcının ve kayıtlı düzenin verdiği kolon genişliklerini korur ve
   tablonun yatay kaymasına izin verir (2026-09-23 ölçümü, eskiden InvoiceDetailForm'daydı). */
.sd-doc-lines .rz-grid-table {
    width: max-content;
}

/* Hücre içeriği tablonun doğal genişliğine KATILMAZ. `max-content` tablosu içeriğin doğal
   genişliğinden hesaplanır; kırılmayan uzun bir stok adı ya da seçicinin etiketi tabloyu
   kolonların toplamından geniş yapıyor ve fark bütün kolonlara dağılıyordu — satır düzenlemeye
   açılıp değer seçilince Depo 140px'ten 233px'e, Stok 240px'ten 392px'e çıkıyordu (ölçüldü).
   Böylece kolon genişliği yalnızca <col>'dan gelir; taşan metin hücrede kesilir. */
.sd-doc-lines .rz-grid-table td > *,
.sd-doc-lines .rz-grid-table th > * {
    contain: inline-size;
}

.sd-doc-lines .rz-message-popup {
    margin-top: -10px !important;
}

.sd-doc-lines .sd-doc-row-actions {
    display: inline-flex;
    gap: 2px;
}

/* ---------- Kaydet düğme grubu ve kaydetme seçenekleri menüsü ---------- */

/* Kaydet + ok tek bir düğme gibi görünür; ok ayrı bir hedeftir (kaydetmez, menüyü açar). */
.sd-doc-bar .sd-doc-save {
    display: inline-flex;
    align-items: stretch;
}

.sd-doc-bar .sd-doc-save > .rz-button:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.sd-doc-bar .sd-doc-save > .rz-button.sd-doc-save-toggle {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
    padding-inline: 2px;
    min-width: 0;
}

/* Menü: her satırda ikon, etiket ve SAĞA hizalı kısayol; satır kırılmaz. */
/* RadzenPopup konum stilini kendisi getirmez: gizli başlar, açılınca JS konumlar. */
.sd-doc-menu {
    display: none;
    position: absolute;
    min-width: 240px;
    padding: 4px;
    background-color: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-color);
    border-radius: 8px;
    box-shadow: var(--rz-shadow-3, 0 6px 18px rgba(0, 0, 0, 0.16));
}

.sd-doc-menu .sd-doc-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--rz-text-color);
    font: inherit;
    font-size: var(--rz-body-font-size);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
}

.sd-doc-menu .sd-doc-menu-item:hover,
.sd-doc-menu .sd-doc-menu-item:focus-visible {
    background: var(--rz-base-200);
    outline: none;
}

.sd-doc-menu .sd-doc-menu-item .rzi {
    font-size: 18px;
    color: var(--rz-text-secondary-color);
}

.sd-doc-menu .sd-doc-menu-label {
    flex: 1 1 auto;
}

.sd-doc-menu kbd {
    margin-inline-start: 16px;
    padding: 1px 6px;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
    font-family: inherit;
    font-size: 11px;
    line-height: 16px;
}

/* ---------- Toplam şeridi (yapışık alt) ---------- */

.sd-doc-totals.sd-doc-totals {
    position: sticky;
    bottom: calc(-1 * var(--rz-card-padding, 1rem));
    z-index: 5;
    margin: 0 calc(-1 * var(--rz-card-padding, 1rem)) calc(-1 * var(--rz-card-padding, 1rem));
    background: var(--rz-base-background-color, var(--rz-body-background-color));
    border-top: 1px solid var(--sd-border, var(--rz-base-300));
}

.sd-doc-totals .sd-doc-totals-details {
    max-height: 45vh;
    overflow-y: auto;
    padding: 8px var(--rz-card-padding, 1rem) 4px;
    border-bottom: 1px solid var(--sd-border, var(--rz-base-300));
}

.sd-doc-totals.sd-doc-totals--closed .sd-doc-totals-details { display: none; }

.sd-doc-totals .sd-doc-totals-row {
    display: flex;
    align-items: center;
    gap: 18px;
    /* Sağ boşluk, köşedeki yapay zekâ asistanı düğmesine (AiAssistantPanel) yer bırakır;
       yoksa düğme genel toplamın son hanelerini örtüyordu. */
    padding: 6px calc(var(--rz-card-padding, 1rem) + 56px) 6px var(--rz-card-padding, 1rem);
    flex-wrap: wrap;
}

.sd-doc-totals .sd-doc-totals-count {
    color: var(--sd-doc-label);
    white-space: nowrap;
}

.sd-doc-totals .sd-doc-totals-toggle {
    background: none;
    border: 0;
    padding: 2px 4px;
    cursor: pointer;
    color: var(--rz-primary);
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.sd-doc-totals .sd-doc-totals-toggle:focus-visible { outline: 2px solid var(--rz-primary); }

.sd-doc-totals .sd-doc-totals-items {
    display: flex;
    gap: 18px;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sd-doc-totals .sd-doc-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.sd-doc-totals .sd-doc-total-label {
    font-size: var(--rz-text-caption-font-size);
    color: var(--sd-doc-label);
    white-space: nowrap;
}

.sd-doc-totals .sd-doc-total-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sd-doc-totals .sd-doc-grand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    padding-left: 18px;
    border-left: 1px solid var(--sd-border, var(--rz-base-300));
}

.sd-doc-totals .sd-doc-grand-label {
    font-size: var(--rz-text-caption-font-size);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rz-text-color);
}

.sd-doc-totals .sd-doc-grand-value {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--rz-text-color);
}

.sd-doc-totals .sd-doc-grand-sub {
    font-size: var(--rz-text-caption-font-size);
    color: var(--sd-doc-label);
    font-variant-numeric: tabular-nums;
}

/* Kısayol ipucu: düğme metninin yanında sönük yazılır ("Kaydet  F2"). */
.sd-doc-kbd {
    font-size: 0.8em;
    opacity: 0.75;
    margin-left: 6px;
    font-weight: 400;
}