/* 🔴 **`W4-A11Y-01`: ETKİLEŞİMLİ ÖĞELER YALNIZ FAREYE CEVAP VERİYORDU.**
*
* ⛔ `erp-item-card` · `erp-icon-btn` · `erp-tree-row` gibi ERP'ye özgü öğelerin `:hover`
* durumu vardı, `:focus-visible` YOKTU. Klavyeyle gezen bir kullanıcı odağın NEREDE olduğunu
* göremiyordu — WCAG 2.4.7 (Focus Visible) ihlali.
*
* ⚠️ Sarmalayıcı öğelerde (`erp-item-card`, `erp-tree-row`) `:focus-within` kullanılır: odağı
* alan şey satırın KENDİSİ değil içindeki düğmedir; `:focus-visible` orada hiç tetiklenmezdi.
*
* ⭐ *Yalnız fareyle görülebilen bir sınır, klavyeyle çalışan için yok demektir.* */
/* ══════════════════════════════════════════════════════════════════════════
Borina ERP — erp-form.css (ERP form/UI re-skin)
Kombinasyon: Soft yön · Borina tema · Borina İndigo accent · 4px radius
· "Alt Işık" içerik arkaplanı · "Accent Deg." menü · Work Sans
KURAL: Borina.UI framework (variables.css / forms.css / layout.css …) bu
dosyada DEĞİŞTİRİLMEZ. Bu dosya framework CSS'inden SONRA yüklenir; yalnızca
ERP katmanında --bs-* token'larını yeniden tanımlar ve framework'ün ürettiği
class'ları (.bs-input, .bs-sidebar …) "tüketerek" yeniden biçimlendirir.
══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Tipografi ─────────────────────────────────────────────── */
--bs-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* ── Accent — Borina İndigo (#2d4696) ──────────────────────── */
--bs-color-primary: #2d4696;
--bs-color-primary-hover: #253a7d;
--bs-color-primary-active: #1e2f66;
--bs-color-primary-light: #eaedf7;
--bs-color-primary-mid: #c2cbe8;
--bs-color-border-focus: #2d4696;
--bs-input-border-focus: #2d4696;
--bs-input-focus-ring: 0 0 0 3px rgba(45, 70, 150, 0.16);
/* ── Geometri — 4px radius + Soft ölçü ─────────────────────── */
--bs-input-radius: 4px;
--bs-card-radius: 6px;
--bs-btn-radius: 4px;
/* 🔴 **`W4-A3-10`: BU DOSYADA DÖRT AYRI `:root` BLOĞU VAR ve ikisi ÇAKIŞIYORDU.**
*
* ⛔ `--bs-input-height` ve `--bs-input-padding` burada da (46px / 11px 16px), aşağıdaki
* yoğunluk bloğunda da (40px / 9px 12px) tanımlıydı. Aynı specificity'de SONRAKİ kazanır,
* yani buradaki iki satır ÖLÜYDÜ — ama okuyan onları yürürlükte sanıyordu.
*
* ⚡ Ölü olanlar kaldırıldı; yürürlükteki değerler tek yerde (yoğunluk bloğu) durur.
*
* ⭐ *İki kez tanımlanan bir değer, bir kez okunur ve yanlış okunur.* */
/* ── Yüzey — Borina açık tema (azure tonlu kurumsal beyaz) ─── */
--bs-color-bg: #eef5fb;
--bs-color-bg-subtle: #e2eef8;
--bs-color-surface: #ffffff;
--bs-color-border: #d8e8f4;
--bs-color-border-subtle: #eef5fb;
--bs-color-border-strong: #bcd6ec;
--bs-color-text: #0f2233;
--bs-color-text-secondary: #3a5670;
/* 🔴 `W4-VIS-02`: SOLUK METİN WCAG AA'NIN ALTINDAYDI.
Eski `#7893ab` beyaz zeminde **3.20:1** veriyordu; WCAG AA gövde metni için 4.5:1 ister.
`.text-muted` bu tokena bağlı olduğu için kusur 189 kullanımı birden etkiliyordu —
bulgu tabloları işaret ediyordu ama kök neden TOKENIN KENDİSİYDİ.
⚡ Aynı mavi-gri ailesinde EN KÜÇÜK kayma seçildi: `#566a7d` en zorlu zeminde
(`--bs-color-bg-subtle` #e2eef8) bile **4.75:1**. */
--bs-color-text-muted: #566a7d;
--bs-color-text-placeholder:#a6c1d8;
--bs-input-bg: #ffffff;
--bs-card-bg: #ffffff;
--bs-card-border:#d8e8f4;
--bs-card-shadow: 0 1px 2px rgba(21, 80, 130, 0.06);
/* 🔴 `W4-A3-07`: uygulama katmanı token kullanırken DÖRT yerde ham değer vardı.
Değerler AÇIK temada BİREBİR eskisiyle aynıdır — token'a taşınmalarının tek sebebi
koyu temada ayrı bir karşılıklarının olabilmesidir (`K-16`). */
--erp-card-shadow-soft: 0 6px 18px rgba(21, 80, 130, 0.11);
--erp-popover-shadow: 0 6px 20px rgba(21, 80, 130, 0.18);
--erp-shell-bar-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
--erp-danger-surface: rgba(192, 57, 43, 0.10);
/* ── Menü — "Accent Deg." (indigo degrade + açık nav metni) ── */
--bs-nav-text: rgba(255, 255, 255, 0.74);
--bs-nav-text-hover: #ffffff;
--bs-nav-text-active: #ffffff;
--bs-nav-section-text: rgba(255, 255, 255, 0.60);
--bs-nav-bg-hover: rgba(255, 255, 255, 0.12);
--bs-nav-bg-active: rgba(255, 255, 255, 0.22);
--bs-nav-border-active:#ffffff;
--bs-nav-logo-border: rgba(255, 255, 255, 0.20);
/* ── Grid — azure/indigo temaya uyumlu (framework varsayılanı nötr gri) ── */
--bs-grid-header-bg: #eef4fb; /* azure tonlu başlık */
--bs-grid-header-text: #2f4a66; /* marka-koyu başlık metni */
--bs-grid-header-border: #cddff0; /* azure başlık alt çizgisi */
--bs-grid-row-bg: #ffffff;
--bs-grid-row-alt-bg: #f6fafd; /* ince azure zebra */
--bs-grid-row-hover: #eaeef9; /* indigo-azure hover */
--bs-grid-row-selected: #dfe4f5; /* indigo seçili satır */
--bs-grid-border: #e7eff7; /* azure satır ayıracı */
}
/* ══════════════════════════════════════════════════════════════════
K-16 — KOYU TEMA (`html[data-bs-theme="dark"]`)
⚠️ Framework `variables.css`'te koyu tema ZATEN vardı; çalışmıyordu.
Sebep: yukarıdaki `:root` bloğu ile framework'ün `[data-bs-theme="dark"]`
bloğu AYNI specificity'ye (0,1,0) sahip ve `erp-form.css` _Host'ta SONRA
yükleniyor — uygulama katmanının AÇIK değerleri koyu temayı eziyordu.
(Dosyadaki eski yorum bunun TERSİNİ iddia ediyordu; ölçüm aksini gösterdi.)
Çözüm: eleman + öznitelik ile (0,1,1) specificity.
Yüzey/metin tokenları framework koyu paletiyle AYNI değerlere set edilir —
iki katman birbiriyle yarışmaz. Marka tokenları koyu zeminde okunur tona taşınır. */
html[data-bs-theme="dark"] {
/* `W4-A3-11`: komut paleti koyu temada da doğru yüzeyi taşır. */
--erp-cmdk-overlay: rgba(0, 0, 0, 0.60);
--erp-cmdk-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
/* 🔴 `W4-A3-07`: KOYU TEMA KARŞILIKLARI.
Dördü de AÇIK temanın indigo/siyah tonuyla sabitlenmişti ve koyu temada öylece kalıyordu:
kart gölgesi mavi bir hale bırakıyor, açılır sonuç kutusu aynı haleyi taşıyor,
kabuk şeridinin siyah gölgesi ise koyu zeminde GÖRÜNMEZ oluyordu. */
--erp-card-shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.42);
--erp-popover-shadow: 0 6px 20px rgba(0, 0, 0, 0.50);
--erp-shell-bar-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35);
--erp-danger-surface: rgba(255, 138, 128, 0.16);
/* ── Accent — koyu zeminde okunur indigo ──────────────────────── */
--bs-color-primary: #7b97ea;
--bs-color-primary-hover: #93abf0;
--bs-color-primary-active: #6480d8;
--bs-color-primary-light: rgba(123, 151, 234, 0.14);
--bs-color-primary-mid: rgba(123, 151, 234, 0.30);
--bs-color-border-focus: #7b97ea;
--bs-input-border-focus: #7b97ea;
--bs-input-focus-ring: 0 0 0 3px rgba(123, 151, 234, 0.24);
/* ── Yüzey — framework koyu paletiyle birebir ─────────────────── */
--bs-color-bg: #0f1117;
--bs-color-bg-subtle: #181c24;
--bs-color-surface: #1c2130;
--bs-color-border: rgba(255, 255, 255, 0.10);
--bs-color-border-subtle: rgba(255, 255, 255, 0.05);
--bs-color-border-strong: rgba(255, 255, 255, 0.18);
--bs-color-text: #e8eaf0;
--bs-color-text-secondary: #9ca3af;
/* 🔴 `W4-VIS-02`: koyu temada da AA altındaydı — `#6b7280` kart zemininde **3.32:1**.
`#8b94a5` en zorlu zeminde (`#232838` zebra satırı) **4.80:1**. */
--bs-color-text-muted: #8b94a5;
--bs-color-text-placeholder:#4b5563;
--bs-input-bg: #1c2130;
--bs-card-bg: #1c2130;
--bs-card-border:rgba(255, 255, 255, 0.09);
--bs-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
/* ── Grid — koyu zebra + okunur başlık ────────────────────────── */
--bs-grid-header-bg: #232a3a;
--bs-grid-header-text: #c9d3e6;
--bs-grid-header-border: rgba(255, 255, 255, 0.16);
--bs-grid-row-bg: #1c2130;
--bs-grid-row-alt-bg: #1f2534;
--bs-grid-row-hover: #2a3145;
--bs-grid-row-selected: #333c56;
--bs-grid-border: rgba(255, 255, 255, 0.08);
/* ── Diyalog — koyu scrim (açık temadaki indigo scrim yerine) ──── */
--bs-dialog-overlay: rgba(4, 6, 12, 0.62);
--bs-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.40);
}
/* Sol menü ve içerik zemini token DEĞİL, sabit degrade taşıyor; ikisi de
koyu temada ayrıca söylenmeli — yoksa açık indigo/azure adacıkları kalır. */
html[data-bs-theme="dark"] .bs-sidebar {
background: linear-gradient(180deg, #1a2340, #131a30);
}
html[data-bs-theme="dark"] .bs-content {
background: radial-gradient(100% 60% at 50% 100%, #171c2a, #0f1117 60%);
}
html[data-bs-theme="dark"] .erp-negative,
html[data-bs-theme="dark"] .erp-icon-btn-danger:hover,
.erp-icon-btn-danger:focus-visible {
color: #f87171;
}
html[data-bs-theme="dark"] .erp-badge-danger {
background: #b03a2e;
}
/* Grid başlığına belirgin azure alt çizgi (framework'te 0px kalıyor) */
.bs-grid-th,
.bs-grid-th-sortable,
.bs-grid thead th {
border-bottom: 2px solid var(--bs-grid-header-border);
}
/* ── Grid yapısal iyileştirmeler ─────────────────────────────────── */
/* 1) Zebra — ince azure şerit (hover/seçili üstte kalır) */
.bs-grid tbody tr:nth-child(even) {
background: var(--bs-grid-row-alt-bg);
}
.bs-grid tbody tr:hover {
background: var(--bs-grid-row-hover);
}
.bs-grid tbody tr.bs-grid-row-selected,
.bs-grid tbody tr.selected,
.bs-grid tbody tr[aria-selected="true"] {
background: var(--bs-grid-row-selected);
}
/* 2) Kompakt satır (dikey padding azalt: ~60px → ~48px) */
.bs-grid tbody td {
padding-top: 8px;
padding-bottom: 8px;
}
/* 3) Sticky başlık — grid-wrapper'ı sınırlı yükseklikte kendi içinde kaydır,
böylece başlık sabit kalır (aksi halde sayfa kayınca başlık da kaybolur) */
.bs-grid-wrapper {
max-height: calc(100vh - 330px);
}
.bs-grid thead th {
position: sticky;
top: 0;
z-index: 2;
}
/* Pager grid-wrapper içinde → sticky başlıkla simetrik olarak ALTA sabitle
(yoksa max-height ile kaydırma alanına düşüp satırlarla kayıyor) */
.bs-grid-wrapper .bs-pagination {
position: sticky;
bottom: 0;
z-index: 2;
background: var(--bs-color-surface);
border-top: 1px solid var(--bs-color-border);
padding: 12px 4px;
margin-top: 0;
}
/* 4) Araç çubuğu ince ayar — ikincil butonlar azure kenar, tema uyumu */
.bs-list-toolbar .bs-btn-secondary,
.bs-list-toolbar .bs-btn-ghost,
.bs-list-toolbar .bs-btn-outline {
border-color: var(--bs-color-border-strong);
}
/* ── Ham Bootstrap tablolar (rapor sayfaları: Nakit Pozisyonu, Cari Raporu vb.)
.bs-grid DEĞİL, .table kullanıyorlar → grid estetiğine yaklaştır ── */
.bs-card .table > thead > tr > th,
.bs-card table.table > thead th {
background: var(--bs-grid-header-bg);
color: var(--bs-grid-header-text);
border-bottom: 2px solid var(--bs-grid-header-border);
border-top: none;
font-weight: 600;
}
.bs-card .table > tbody > tr > td {
border-color: var(--bs-grid-border);
color: var(--bs-color-text);
}
.bs-card .table > tbody > tr:nth-child(even) > td {
background: var(--bs-grid-row-alt-bg);
}
.bs-card .table > tbody > tr:hover > td {
background: var(--bs-grid-row-hover);
}
/* ── Native dosya girişi ("Dosya Seç") — İçe Aktar sayfaları; tarayıcı
varsayılan butonunu temalı ikincil butona çevir ── */
input[type="file"]::file-selector-button {
background: var(--bs-color-surface);
color: var(--bs-color-text);
border: 1px solid var(--bs-color-border-strong);
border-radius: var(--bs-btn-radius);
padding: 8px 16px;
margin-right: 12px;
font-family: var(--bs-font-family);
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: background .15s, border-color .15s;
}
input[type="file"]::file-selector-button:hover {
background: var(--bs-color-bg-subtle);
border-color: var(--bs-color-primary);
}
/* ── Ham Bootstrap .alert kutuları (.bs-card dışı hata/başarı banner'ları,
~21 sayfada tekrar ediyor) → Borina padding/radius; semantik renk sol-şerit ── */
.alert {
border: 1px solid var(--bs-color-border);
border-radius: var(--bs-card-radius);
padding: 11px 16px;
margin-bottom: var(--bs-spacing-md, 16px);
font-family: var(--bs-font-family);
background: var(--bs-color-surface);
color: var(--bs-color-text);
}
.alert-danger {
border-left: 4px solid var(--bs-color-danger);
color: var(--bs-color-danger);
background: var(--bs-color-danger-light, var(--bs-color-surface));
}
.alert-success {
border-left: 4px solid var(--bs-color-success);
color: var(--bs-color-success);
background: var(--bs-color-success-light, var(--bs-color-surface));
}
/* ── Ham Bootstrap .badge (kart tablolarında; .bs-card .table tabloyu temalar
ama badge'i değil) → geometri temala, bg-* semantik renkleri korunur ── */
.badge {
border-radius: var(--bs-btn-radius);
font-weight: 600;
padding: .35em .6em;
font-family: var(--bs-font-family);
}
/* 🔴 **`W4-A3-13`: `fw-semibold` HİÇBİR YERDE TANIMLI DEĞİLDİ — on iki yerde SESSİZCE ölüydü.**
*
* ⛔ Paketlenen `bootstrap.min.css` bu yardımcı sınıfı İÇERMİYOR (ölçüldü: 0 eşleşme). Yani
* `class="fw-semibold"` yazan her yer — vurgulanması istenen cari risk rozeti, birleştirme
* uyarısı, üretim satır rolü — **normal kalınlıkta** çiziliyordu ve hiçbir şey bunu söylemiyordu.
*
* ⚠️ Ölçüm kaynağın TAMAMINI tarar (bootstrap + ERP css + framework css); tanımsız TEK sınıf buydu.
*
* ⭐ *Tanımsız bir sınıf hata vermez; yalnız işini yapmaz.* */
.fw-semibold {
font-weight: 600;
}
/* ── Bootstrap .text-muted utility'sini tema muted token'ına bağla ── */
.text-muted {
color: var(--bs-color-text-muted) !important;
}
/* ── Tablo hücresindeki Bs* alan bileşenleri (ham input→Bs* dönüşümü sonrası)
.bs-field'ın form-margin'ini kaldır, satırlar kompakt kalsın ── */
.bs-card .table td .bs-field,
.bs-grid td .bs-field,
td > .bs-field {
margin-bottom: 0;
}
/* ── Sol menü: indigo degrade + logo beyaz ──────────────────────── */
.bs-sidebar {
background: linear-gradient(180deg, #2d4696, #253a7d);
}
.sidebar-logo {
height: 26px;
width: auto;
display: block;
filter: brightness(0) invert(1); /* logo koyu degrade üstünde beyaz görünür */
}
/* ── İçerik alanı: "Alt Işık" radial degrade ────────────────────── */
.bs-content {
background: radial-gradient(100% 60% at 50% 100%, #eaedf7, #eef5fb 60%);
}
/* ── Grid oluğu (gutter) ────────────────────────────────────────
Framework'te .bs-row negatif margin taşır ama numaralı sütunlar
(.bs-col-3/-4/-6 …) yatay padding taşımaz — yalnızca .bs-col taşır.
Kenarlıksız (dolgulu Soft) alanların birbirine yapışmaması için
numaralı sütunlara oluk boşluğu ekle (box-sizing:border-box ⇒ genişlik
değişmez, yalnızca içerik içeri alınır). */
.bs-row > [class^="bs-col-"],
.bs-row > [class*=" bs-col-"] {
padding-left: var(--bs-spacing-sm, 8px);
padding-right: var(--bs-spacing-sm, 8px);
}
/* ── Soft yön: dolgulu (borderless) input davranışı ─────────────── */
.bs-input,
.bs-select,
.bs-textarea {
background: var(--bs-color-bg-subtle);
border-color: transparent;
}
.bs-input:hover:not(:focus):not(:disabled):not([readonly]),
.bs-select:hover:not(:disabled),
.bs-textarea:hover:not(:disabled):not([readonly]) {
background: var(--bs-color-bg);
border-color: transparent;
}
.bs-input:focus,
.bs-select:focus,
.bs-textarea:focus {
background: var(--bs-color-surface);
border-color: var(--bs-color-primary);
}
/* framework durumlarını koru (dolgu override'ından sonra yeniden doğrula) */
.bs-input:disabled,
.bs-select:disabled,
.bs-textarea:disabled {
background: var(--bs-input-bg-disabled);
border-color: var(--bs-color-border-subtle);
}
.bs-input[readonly],
.bs-textarea[readonly] {
background: var(--bs-color-bg-subtle);
border-color: transparent;
}
.bs-input.is-invalid,
.bs-select.is-invalid,
.bs-textarea.is-invalid {
border-color: var(--bs-input-border-invalid);
}
/* ── Picker: input + "gözat" (⋯) butonu tek parça bitişik kontrol ─────
framework'te gap:4px + .bs-btn-sm(30px) ayrık/düşük duruyor. Boşluğu
kaldır, yükseklikleri eşitle, köşeleri birleştir (input sol yuvarlak,
buton sağ yuvarlak) → yekpare bir gözat kontrolü. */
.bs-picter-wrap {
gap: 0;
margin-bottom: var(--bs-spacing-md, 16px);
}
/* iç .bs-field margin'i flex alt-hizasını bozuyor → sıfırla, boşluğu wrap'a taşı
(yoksa align-items:flex-end butonu input'tan 16px aşağı hizalar) */
.bs-picter-wrap .bs-field {
margin-bottom: 0;
}
.bs-picter-wrap:has(> .bs-btn) .bs-input,
.bs-picter-wrap:has(> .bs-btn) .bs-select,
.bs-picter-wrap:has(> .bs-btn) .bs-textarea {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.bs-picter-wrap .bs-btn {
height: var(--bs-input-height);
min-height: var(--bs-input-height);
padding: 0 14px;
border-radius: 0 var(--bs-btn-radius) var(--bs-btn-radius) 0;
flex: 0 0 auto;
}
/* ── Inline-flex framework picker'lar (Ana Cari=PickerFieldBase,
Ülke/Şehir=BsLookupField) — .bs-picter-wrap KULLANMAZ, framework inline
stil taşır (gap, align, .bs-btn-sm). Bunları da yekpare gözat kontrolüne
getir; inline stili !important ile geçersiz kıl. ── */
.bs-field > div[style*="display:flex"],
.bs-field .bs-form-group > div[style*="display:flex"] {
gap: 0 !important;
align-items: stretch !important;
}
.bs-field > div[style*="display:flex"] > .bs-input,
.bs-field .bs-lookup-wrapper > .bs-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.bs-field > div[style*="display:flex"] > .bs-btn,
.bs-field .bs-form-group > div[style*="display:flex"] > .bs-btn {
height: auto !important;
min-height: var(--bs-input-height);
align-self: stretch;
padding: 0 14px;
border-radius: 0 var(--bs-btn-radius) var(--bs-btn-radius) 0;
}
/* ── Lookup "temizle" (×) butonu — framework stillemiyor, tarayıcı
varsayılanı beveled buton olarak çıkıyor → temiz şeffaf × yap ── */
.bs-lookup-clear {
border: none;
background: transparent;
color: var(--bs-color-text-muted);
cursor: pointer;
font-size: 1.05rem;
line-height: 1;
padding: 0 12px;
align-self: stretch;
border-radius: 0;
transition: color .15s, background .15s;
}
.bs-lookup-clear:hover {
color: var(--bs-color-danger);
background: var(--bs-color-bg-subtle);
}
/* ── Soft yön: kart + başlık + buton ────────────────────────────── */
.bs-card {
box-shadow: var(--erp-card-shadow-soft);
}
.bs-card-title {
border-bottom: none;
}
.bs-btn {
font-weight: 600;
}
/* ── Dialog / Modal — skin uyumu ─────────────────────────────────────
Framework dialog.css tamamen token-driven (bg=--bs-card-bg, header-icon=
--bs-color-primary-*, footer=--bs-color-bg-subtle …) olduğundan renkler ve
dialog içindeki inputlar ZATEN skin'e uyuyor. Uyumsuzluk yalnızca
dialog.css'teki SABİT değerlerde: 12px köşe (skin 4-6px keskin), header-icon
9px, close 7px, mobil 16px + düz beyaz başlık (grid/footer azure iken).
Burada yalnızca o sabitler + iki elevation token'ı ezilir; dialog.css
(framework, dondurulmuş) DEĞİŞTİRİLMEZ. ───────────────────────────────── */
/* Elevation: indigo/azure tonlu scrim + gölge (skin ailesiyle aynı dil).
⚠️ Eskiden burada "koyu mod framework specificity ile kazanır" yazıyordu; YANLIŞTI
(aynı specificity + sonra yüklenen dosya). Koyu değerler K-16 bloğunda açıkça
söylenir — bkz. `html[data-bs-theme="dark"]`. */
:root {
--bs-dialog-overlay: rgba(30, 47, 102, 0.42);
--bs-shadow-dialog: 0 24px 64px rgba(21, 80, 130, 0.18), 0 8px 24px rgba(21, 80, 130, 0.10);
}
/* Keskin köşe: 12px → 8px (yükseltilmiş yüzey; 4-6px kart ailesiyle uyumlu) */
.bs-dialog {
border-radius: 8px;
border-color: var(--bs-color-border);
}
/* Başlık: footer ile simetrik azure bant (grid başlığıyla aynı dil) +
belirgin azure alt çizgi */
.bs-dialog-header {
background: var(--bs-color-bg-subtle);
border-bottom: 1px solid var(--bs-color-border);
}
/* Header ikonu: azure bant üstünde kaybolmasın → beyaz çip + indigo hairline */
.bs-dialog-header-icon {
background: var(--bs-color-surface);
border: 1px solid var(--bs-color-primary-mid);
border-radius: 6px;
}
/* Kapat (×): köşe skin'e çekilir, hover azure zemin + danger (lookup × ile tutarlı) */
.bs-dialog-close {
border-radius: var(--bs-btn-radius);
}
.bs-dialog-close:hover {
background: var(--bs-color-bg-subtle);
color: var(--bs-color-danger);
}
/* Dialog gövdesindeki iç kartlar: beyaz-üstü-beyaz gölge yerine hairline azure
kenar → temiz bölümler (route form'lardaki yüzen kart görünümü modalde ağır) */
.bs-dialog-body .bs-card {
box-shadow: none;
border: 1px solid var(--bs-color-border);
}
/* Çift başlık düzeltmesi: bir form dialog içinde açıldığında (ör. picker'dan
"Yeni Tanım"), form kendi route-header'ını (‹ geri + başlık) da çiziyor ve bu
dialog'un kendi başlık çubuğuyla (başlık + ×) ÇAKIŞIYOR — aynı başlık iki kez.
Dialog kendi header'ını taşıyorsa (:has) form'un route-header'ı gizlenir;
× zaten kapat/geri işlevini görür. Dialog-header'sız (başlığı form'dan gelen)
olası durumları bozmamak için :has ile koşullandırıldı. */
.bs-dialog:has(> .bs-dialog-header) .bs-dialog-body .bs-form-page-header {
display: none;
}
/* Modal gövde zemini: başlık/footer ile AYNI azure renk → dialog içi tamamen
azure, beyaz kartlar üstünde yüzer (ana içerik alanının azure+beyaz-kart dili
modal'a taşınır). Hem picker hem form dialog'unda geçerli. — kullanıcı isteği */
.bs-dialog-body {
background: var(--bs-color-bg-subtle);
}
/* Dialog içindeki form gövdesi kendi ekstra padding'ini (framework spacing-lg)
taşımasın; dialog-body padding'i yeterli → kartlar dialog kenarına hizalı.
Yalnızca dialog içinde (route form sayfaları normal padding'ini korur).
Selector .bs-dialog ile 3-class (0,3,0) → framework scoped kuralını (0,2,0) yener. */
.bs-dialog .bs-dialog-body .bs-form-page-body {
padding: 0;
}
/* Mobil bottom-sheet köşesi 16px → 12px (keskin skin) */
@media (max-width: 768px) {
.bs-dialog-mobile-full {
border-radius: 12px 12px 0 0 !important;
}
}
/* ── Kalite Kapısı M-01 görsel düzeltme (2026-07-20) ─────────────────────────────
BsListPage/BsFormPage navigasyon sonrası başlığa (h1.bs-page-title, tabindex=-1)
PROGRAMATİK focus veriyor (ekran-okuyucu duyurusu için, klavye focus'u DEĞİL) →
tarayıcı varsayılan siyah outline'ı başlığın etrafında çirkin bir kutu gösteriyordu.
Borina.UI frozen; ERP tarafında override edilir. Görünür outline kaldırılır. */
.bs-page-title:focus,
.bs-page-title:focus-visible {
outline: none !important;
}
:root {
--bs-input-height: 40px;
--bs-input-padding: 9px 12px;
--erp-space-1: 4px;
--erp-space-2: 8px;
--erp-space-3: 12px;
--erp-space-4: 16px;
--erp-space-5: 24px;
/* `W4-A3-11`: komut paleti yüzeyi — koyu temada ÜZERİNE yazılır (aşağıdaki blok). */
--erp-cmdk-overlay: rgba(15, 34, 51, 0.45);
--erp-cmdk-shadow: 0 18px 50px rgba(21, 80, 130, 0.30);
}
.bs-grid thead th,
.bs-grid-th,
.bs-grid-th-sortable {
text-transform: none;
font-size: 0.8125rem;
letter-spacing: 0.01em;
}
.erp-num,
.bs-grid td.erp-num,
.bs-grid th.erp-num,
.erp-table .erp-num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.erp-negative { color: #c0392b; }
/* Aşama 5E: geniş matris (pivot) raporları yatay kaydırılır; sayfa gövdesi taşmaz. */
.erp-table-scroll { overflow-x: auto; }
.erp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
}
.erp-table thead th {
padding: 8px 12px;
text-align: left;
font-weight: 600;
font-size: 0.8125rem;
color: var(--bs-color-text-secondary);
background: var(--bs-color-bg-subtle);
border-bottom: 1px solid var(--bs-color-border);
white-space: nowrap;
}
.erp-table tbody td {
padding: 8px 12px;
border-bottom: 1px solid var(--bs-color-border-subtle);
vertical-align: middle;
}
.erp-table tbody tr:hover > td { background: var(--bs-color-bg-subtle); }
.erp-table tfoot td {
padding: 10px 12px;
font-weight: 600;
border-top: 2px solid var(--bs-color-border-strong);
}
.erp-table .erp-table-actions {
text-align: right;
white-space: nowrap;
}
.erp-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--erp-space-3);
margin-bottom: var(--erp-space-4);
}
.erp-stat {
padding: var(--erp-space-3) var(--erp-space-4);
border: 1px solid var(--bs-color-border);
border-radius: var(--bs-card-radius);
background: var(--bs-color-bg-subtle);
}
.erp-stat-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--bs-color-text-muted);
margin-bottom: 2px;
}
.erp-stat-value {
display: block;
font-size: 1.25rem;
font-weight: 700;
color: var(--bs-color-text);
font-variant-numeric: tabular-nums;
}
.erp-check-group {
display: flex;
flex-wrap: wrap;
gap: var(--erp-space-1) var(--erp-space-5);
}
.erp-check-group .bs-field {
margin-bottom: 0;
min-width: 150px;
}
.erp-section-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--erp-space-2);
margin-bottom: var(--erp-space-2);
}
.erp-section-title {
font-weight: 600;
color: var(--bs-color-text);
}
.erp-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--erp-space-2);
margin-bottom: var(--erp-space-3);
}
.erp-toolbar-group {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--erp-space-2);
}
.erp-toolbar-group .bs-field { margin-bottom: 0; }
.erp-toolbar-field-sm { min-width: 180px; }
.erp-toolbar-field-md { min-width: 220px; }
.erp-empty {
padding: var(--erp-space-5);
text-align: center;
color: var(--bs-color-text-muted);
border: 1px dashed var(--bs-color-border);
border-radius: var(--bs-card-radius);
background: var(--bs-color-surface);
}
.erp-row-icon {
margin-right: 6px;
font-size: 0.75rem;
color: var(--bs-color-text-muted);
vertical-align: baseline;
}
.erp-badge {
display: inline-block;
padding: 2px 8px;
margin-right: 4px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.5;
color: var(--bs-color-text-secondary);
background: var(--bs-color-primary-light);
white-space: nowrap;
}
.erp-badge-danger {
color: #ffffff;
background: #c0392b;
}
.erp-currency-suffix {
margin-left: 4px;
font-size: 0.75rem;
color: var(--bs-color-text-muted);
}
.bs-grid td .bs-btn-sm:not(.erp-row-action):not(.bs-btn-danger):not(.bs-btn-primary) {
position: relative;
min-width: 32px;
padding-left: 0;
padding-right: 0;
color: transparent;
border-color: transparent;
background: transparent;
}
.bs-grid td .bs-btn-sm:not(.erp-row-action):not(.bs-btn-danger):not(.bs-btn-primary)::before {
content: "\270E";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--bs-color-text-secondary);
}
.bs-grid td .bs-btn-sm:not(.erp-row-action):not(.bs-btn-danger):not(.bs-btn-primary):hover {
background: var(--bs-color-primary-light);
}
.bs-grid td .bs-btn-sm:not(.erp-row-action):not(.bs-btn-danger):not(.bs-btn-primary):hover::before {
color: var(--bs-color-primary);
}
.bs-grid td .erp-row-action {
font-size: 0.75rem;
padding: 3px 10px;
}
.erp-card-list {
display: flex;
flex-direction: column;
gap: var(--erp-space-2);
}
.erp-item-card {
display: flex;
align-items: center;
gap: var(--erp-space-3);
padding: 10px var(--erp-space-4);
border: 1px solid var(--bs-color-border);
border-radius: var(--bs-card-radius);
background: var(--bs-color-surface);
transition: border-color .15s ease, box-shadow .15s ease;
}
.erp-item-card:hover,
.erp-item-card:focus-within {
border-color: var(--bs-color-border-strong);
box-shadow: var(--bs-card-shadow);
}
.erp-item-card-lead-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: var(--bs-card-radius);
color: var(--bs-color-primary);
background: var(--bs-color-primary-light);
text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.erp-item-card-lead-icon:hover,
.erp-item-card-lead-icon:focus-visible {
color: #ffffff;
background: var(--bs-color-primary);
}
.erp-item-card-lead-icon .oi {
font-size: 1.125rem;
}
.erp-item-card-main {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.erp-item-card-head {
display: flex;
align-items: center;
gap: var(--erp-space-2);
flex-wrap: wrap;
}
.erp-item-card-type {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--bs-color-text-muted);
}
.erp-item-card-name {
font-weight: 600;
color: var(--bs-color-text);
}
.erp-item-card-value-text {
color: var(--bs-color-text-secondary);
overflow-wrap: anywhere;
}
.erp-item-card-actions {
display: flex;
gap: var(--erp-space-1);
flex-shrink: 0;
}
.erp-icon-btn {
width: 32px;
min-width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bs-color-text-secondary);
}
.erp-icon-btn:hover,
.erp-icon-btn:focus-visible {
color: var(--bs-color-primary);
background: var(--bs-color-primary-light);
}
.erp-icon-btn-danger:hover,
.erp-icon-btn-danger:focus-visible {
color: var(--bs-color-danger, #c0392b);
background: var(--erp-danger-surface);
}
.erp-icon-btn .oi { font-size: 0.875rem; }
.erp-item-card-lead-icon-static {
cursor: default;
color: var(--bs-color-text-secondary);
background: var(--bs-color-bg-subtle);
}
.erp-item-card-lead-icon-static:hover {
color: var(--bs-color-text-secondary);
background: var(--bs-color-bg-subtle);
}
.erp-item-card-contact {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 10px;
}
.erp-item-card-inline-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
border-radius: 4px;
color: var(--bs-color-primary);
text-decoration: none;
}
.erp-item-card-inline-link:hover,
.erp-item-card-inline-link:focus-visible { background: var(--bs-color-primary-light); }
.erp-item-card-inline-link .oi { font-size: 0.75rem; }
.erp-item-card-multiline {
white-space: pre-wrap;
}
/* UX Aşama 4 / Blok 2: stok kartı görseli — önizleme + yükleme alanı */
.erp-image-box {
display: flex;
gap: 1rem;
align-items: flex-start;
flex-wrap: wrap;
}
.erp-image-preview {
width: 160px;
height: 160px;
object-fit: contain;
border: 1px solid var(--bs-color-border);
border-radius: 6px;
background: var(--bs-color-bg-subtle);
}
.erp-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
border: 1px dashed var(--bs-color-border);
border-radius: 6px;
color: var(--bs-color-text-muted);
background: var(--bs-color-bg-subtle);
}
.erp-image-placeholder .oi { font-size: 2rem; }
.erp-image-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Aşama 4.5/B2 — belge satırında barkod okutma kutusu (ürün ekleme picker'ının altında). */
.erp-barcode-scan {
max-width: 360px;
margin-bottom: var(--erp-space-2);
}
/* Aşama 4.5/B3 — fiyat matrisi hücresi: fiyat alanı + ayrıntı düğmesi yan yana. */
.erp-price-cell {
display: flex;
align-items: center;
gap: var(--erp-space-1);
}
.erp-price-cell > :first-child {
flex: 1 1 auto;
min-width: 0;
}
/* Aşama 5A — lokasyon ağacı. Girinti satır içi style ile Depth'ten gelir (sınırsız derinlik). */
.erp-tree {
border: 1px solid var(--bs-color-border);
border-radius: var(--bs-card-radius);
background: var(--bs-color-surface);
overflow: hidden;
}
.erp-tree-row {
display: flex;
align-items: center;
gap: var(--erp-space-2);
min-height: 40px;
padding-right: var(--erp-space-3);
border-bottom: 1px solid var(--bs-color-border);
}
.erp-tree-row:last-child { border-bottom: none; }
.erp-tree-row:hover,
.erp-tree-row:focus-within { background: var(--bs-color-bg-subtle); }
.erp-tree-row-passive .erp-tree-code,
.erp-tree-row-passive .erp-tree-name,
.erp-tree-row-passive .erp-tree-path {
color: var(--bs-color-text-muted);
text-decoration: line-through;
}
.erp-tree-toggle {
display: inline-flex;
justify-content: center;
width: 28px;
flex: 0 0 28px;
}
.erp-tree-icon {
font-size: 0.8rem;
color: var(--bs-color-text-muted);
}
.erp-tree-main {
display: flex;
align-items: center;
gap: var(--erp-space-2);
flex: 1 1 auto;
min-width: 0;
}
.erp-tree-code {
font-weight: 600;
color: var(--bs-color-text);
}
.erp-tree-name {
color: var(--bs-color-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.erp-tree-path {
flex: 0 0 auto;
font-size: 0.75rem;
font-family: var(--bs-font-mono, monospace);
color: var(--bs-color-text-muted);
}
.erp-tree-actions {
display: flex;
gap: 2px;
flex: 0 0 auto;
}
/* ── F2: katalog-tabanlı sidebar — 3. seviye (grup) yuvalama ──
Sidebar görsel sınıfları (bs-nav-item / sidebar-sub / sidebar-sub-item / sidebar-group-toggle)
frozen framework'te tanımlı. Burada yalnız YENİ 3. seviye (modül › grup › ekran) için ek
yuvalama/indent kuralları — framework token'larını kullanır, framework'e dokunmaz. */
.sidebar-sub-nested {
margin-left: 0.6rem;
border-left: 1px solid var(--bs-nav-logo-border);
}
.sidebar-subgroup-toggle {
width: 100%;
background: transparent;
border: none;
cursor: pointer;
color: var(--bs-nav-text);
text-align: left;
}
.sidebar-subgroup-toggle:hover,
.sidebar-subgroup-toggle:focus-visible {
color: var(--bs-nav-text-hover);
background: var(--bs-nav-bg-hover);
}
/* ── F5: favori yıldızı (sidebar yaprak) ── */
.sidebar-leaf-wrap {
position: relative;
display: block;
}
.nav-fav-star {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
color: var(--bs-nav-section-text);
opacity: 0;
font-size: 0.7rem;
padding: 2px 4px;
line-height: 1;
}
.sidebar-leaf-wrap:hover .nav-fav-star {
opacity: 0.75;
}
.nav-fav-star:hover {
color: var(--bs-nav-text-hover);
}
.nav-fav-star.nav-fav-on {
opacity: 1;
color: #f6c344;
}
/* ── F6: Tüm Raporlar merkezi ── */
.reports-page {
padding: 4px 2px;
}
.reports-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--bs-color-text);
margin: 0 0 14px;
}
.reports-toolbar {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.reports-search {
max-width: 360px;
padding: 7px 12px;
border: 1px solid var(--bs-color-border);
border-radius: 6px;
background: var(--bs-input-bg);
color: var(--bs-color-text);
font-size: 0.85rem;
outline: none;
}
.reports-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.reports-chip {
padding: 4px 12px;
border: 1px solid var(--bs-color-border);
border-radius: 999px;
background: var(--bs-card-bg);
color: var(--bs-color-text-secondary);
font-size: 0.78rem;
cursor: pointer;
}
.reports-chip-on {
background: var(--bs-grid-row-selected);
border-color: var(--bs-color-border-strong);
color: var(--bs-color-text);
}
.reports-group {
margin-bottom: 20px;
}
.reports-group-title {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--bs-color-text-muted);
margin-bottom: 8px;
}
.reports-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.reports-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--bs-card-border);
border-radius: 8px;
background: var(--bs-card-bg);
color: var(--bs-color-text);
text-decoration: none;
font-size: 0.85rem;
}
.reports-card:hover {
background: var(--bs-grid-row-hover);
border-color: var(--bs-color-border-strong);
}
.reports-empty {
padding: 24px;
text-align: center;
color: var(--bs-color-text-muted);
}
/* ── F7: route-guard reddi ── */
.route-denied {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 48px 24px;
color: var(--bs-color-text-muted);
font-size: 0.95rem;
}
/* ── F3: global arama (header) ── */
.shell-search {
position: relative;
display: flex;
align-items: center;
min-width: 220px;
max-width: 340px;
flex: 1 1 auto;
}
.shell-search-icon {
position: absolute;
left: 10px;
font-size: 0.8rem;
color: var(--bs-color-text-muted);
pointer-events: none;
}
.shell-search-input {
width: 100%;
padding: 6px 10px 6px 30px;
border: 1px solid var(--bs-color-border);
border-radius: 6px;
background: var(--bs-input-bg);
color: var(--bs-color-text);
font-size: 0.85rem;
outline: none;
}
.shell-search-input:focus {
border-color: var(--bs-color-border-strong);
}
.shell-search-results {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 1050;
max-height: 60vh;
overflow-y: auto;
background: var(--bs-card-bg);
border: 1px solid var(--bs-card-border);
border-radius: 8px;
box-shadow: var(--erp-popover-shadow);
padding: 4px;
}
.shell-search-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 8px 10px;
border: none;
background: transparent;
border-radius: 6px;
cursor: pointer;
text-align: left;
}
.shell-search-item:hover {
background: var(--bs-grid-row-hover);
}
.shell-search-item-title {
color: var(--bs-color-text);
font-size: 0.85rem;
}
.shell-search-item-module {
color: var(--bs-color-text-muted);
font-size: 0.72rem;
white-space: nowrap;
}
/* ── F4: Command Palette (Ctrl+K) ── */
.cmdk-overlay {
position: fixed;
inset: 0;
z-index: 1090;
/* 🔴 `W4-A3-11`: iki sabit renk koyu temayı GÖRMÜYORDU (`K-16`). Token açık/koyu ayrımını
taşır; `--erp-overlay-scrim` deseni. */
background: var(--erp-cmdk-overlay);
}
.cmdk-panel {
position: fixed;
top: 12vh;
left: 50%;
transform: translateX(-50%);
z-index: 1091;
width: min(640px, 92vw);
background: var(--bs-card-bg);
border: 1px solid var(--bs-card-border);
border-radius: 12px;
box-shadow: var(--erp-cmdk-shadow);
overflow: hidden;
}
.cmdk-input-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--bs-card-border);
}
.cmdk-input-icon {
color: var(--bs-color-text-muted);
font-size: 0.9rem;
}
.cmdk-input {
flex: 1 1 auto;
border: none;
outline: none;
background: transparent;
font-size: 1rem;
color: var(--bs-color-text);
}
.cmdk-esc {
font-size: 0.7rem;
color: var(--bs-color-text-muted);
border: 1px solid var(--bs-color-border);
border-radius: 4px;
padding: 1px 6px;
}
.cmdk-results {
max-height: 52vh;
overflow-y: auto;
padding: 6px;
}
.cmdk-empty {
padding: 16px;
text-align: center;
color: var(--bs-color-text-muted);
font-size: 0.85rem;
}
.cmdk-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
text-align: left;
}
.cmdk-item:hover,
.cmdk-item-active {
background: var(--bs-grid-row-hover);
}
.cmdk-item-title {
color: var(--bs-color-text);
font-size: 0.9rem;
}
.cmdk-item-module {
color: var(--bs-color-text-muted);
font-size: 0.72rem;
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
BELGE KABUĞU — beş belge ekranının ORTAK yerleşimi
═══════════════════════════════════════════════════════════════════════════
🔴 **Bu kurallar `VoucherFormShell.razor.css`'ten BURAYA taşındı (2026-08-28).**
Kurallar Blazor CSS izolasyonuyla TEK bileşene kilitliydi (`b-99brqij0dx` =
`VoucherFormShell`). `OrderFormShell` · `WaybillFormShell` · `QuotationFormShell` ·
`ProductionFormShell` aynı sınıf adlarını yazıyor ve yorumlarında *"kabuk CSS'i paylaşılır"*
diyordu — **paylaşılmıyordu**: kapsam kimlikleri tutmadığı için dördünde de HİÇBİR kural
uygulanmıyordu. Tarayıcıdan ölçüldü: faturada `border 1px · radius 8px · pad 16px` ve toplam
çubuğu `position: sticky`; siparişte üçü de **0** ve `static`.
⭐ *Bir yorumun "paylaşılır" demesi, paylaşıldığı anlamına gelmez — izolasyon sessizdir ve
derleme hiçbir şey söylemez.*
⚠️ `::deep` kaldırıldı: o birleştirici YALNIZ izole CSS'te anlamlıdır. Paylaşılan sayfada
torun seçici olarak yazılır. */
.voucher-shell {
display: flex;
flex-direction: column;
min-width: 0;
gap: var(--bs-spacing-sm);
}
/* ── Belge kimliği ─────────────────────────────────────────────────────────── */
.voucher-shell-identity {
background: var(--bs-color-surface);
border: 1px solid var(--bs-color-border);
border-radius: 8px;
padding: var(--bs-spacing-md);
}
/* ── Başlık sekmeleri + splitter ───────────────────────────────────────────── */
.voucher-shell-header {
background: var(--bs-color-surface);
border: 1px solid var(--bs-color-border);
border-radius: 8px;
padding: var(--bs-spacing-sm) var(--bs-spacing-md);
}
.voucher-shell-header.is-collapsed .bs-tab-panel {
display: none;
}
.voucher-shell-splitter {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 20px;
}
.voucher-shell-splitter::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px dashed var(--bs-color-border);
}
.voucher-shell-splitter .bs-btn {
position: relative;
background: var(--bs-color-bg);
}
/* ── Hareketler ────────────────────────────────────────────────────────────── */
.voucher-shell-lines {
background: var(--bs-color-surface);
border: 1px solid var(--bs-color-border);
border-radius: 8px;
padding: var(--bs-spacing-sm) var(--bs-spacing-md);
min-height: 220px;
}
.voucher-shell-lines .bs-tab-panel {
max-height: 52vh;
overflow-y: auto;
overflow-x: hidden;
}
/* ── Yapışkan alt toplam ───────────────────────────────────────────────────── */
.voucher-shell-totals {
position: sticky;
bottom: 0;
z-index: 2;
background: var(--bs-color-surface);
border: 1px solid var(--bs-color-border);
border-radius: 8px;
padding: var(--bs-spacing-sm) var(--bs-spacing-md);
box-shadow: var(--erp-shell-bar-shadow);
}
.voucher-shell-extra {
min-width: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
KİMLİK ŞERİDİ — kartın "kim ve ne durumda" cevabı (C-1)
═══════════════════════════════════════════════════════════════════════════
Belge kabuğunun kimlik bölgesinde yaşar ve KAYDIRMADAN BAĞIMSIZ görünür. Ölçüm cari kartında
şunu göstermişti: başlık yalnız *"Cariyi Düzenle"* diyordu — hangi cari, bakiyesi, limiti
hiçbir yerde yoktu; kullanıcının kartı açma sebebi en derindeydi. */
.erp-identity-strip {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--bs-spacing-md);
flex-wrap: wrap;
}
.erp-identity-name {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.25;
color: var(--bs-color-text);
}
.erp-identity-meta {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.25rem;
font-size: 0.82rem;
color: var(--bs-color-text-muted);
}
.erp-identity-code {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--bs-color-text);
}
.erp-identity-chip {
padding: 0.05rem 0.45rem;
border: 1px solid var(--bs-color-border);
border-radius: 999px;
font-size: 0.74rem;
}
/* Rakamlar sağda toplanır: göz onları TEK yerde arar, satır satır taramaz. */
.erp-identity-figures {
display: flex;
gap: var(--bs-spacing-md);
flex-wrap: wrap;
}
.erp-identity-figure {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 8rem;
}
.erp-identity-figure-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-color-text-muted);
}
.erp-identity-figure-value {
font-size: 1.05rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-color-text);
}
/* İki onay-kutusu grubu (rol · etiket) TEK kartta yan yana — ölçümde ikisi ayrı tam-genişlik
kart olarak ~330 piksel yiyordu ve taşıdıkları bilgi birer satırlıktı. */
.erp-check-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--bs-spacing-md);
}
.erp-check-columns-title {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-color-text-muted);
margin-bottom: 0.35rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
FATURA ÇALIŞMA ALANI — kompakt belge ekranı (v0 hedef tasarımı)
═══════════════════════════════════════════════════════════════════════════
ÖLÇÜM (1366x768, canlı tarayıcı, uyarlamadan ÖNCE):
kimlik 185px · başlık sekmeleri 384px · toplam çubuğu 194px (viewport'un %25'i)
→ satır ızgarası y=814'te, yani KATLANMA ÇİZGİSİNİN ALTINDA başlıyordu;
sayfa 1538px = viewport'un iki katı; Kaydet butonu y=1467'de.
⚠️ KAPSAM BİLEREK DARDIR: kurallar `.erp-voucher-form` altındadır, `.voucher-shell`
altında DEĞİL. Aynı kabuğu sipariş · teklif · irsaliye · üretim de kullanıyor; kapsam
kabuk olsaydı o dört aile de ölçülmeden değişirdi. Yayılım ayrı bir karardır ve
selector genişletilerek yapılır.
⚠️ `--bs-input-height` GLOBAL olarak düşürülMEZ — 100+ ekranı birden değiştirirdi.
Kompaktlık font küçülterek değil, DİKEY DOLGUDAN kazanılır. */
.erp-voucher-form {
--bs-input-height: 32px;
--bs-input-padding: 5px 10px;
--voucher-field-gap: 4px;
}
/* 🔴 **`W4-VIS-06`: YOĞUNLUK KURALI İKİ ALAN SARMALAYICISINDAN YALNIZ BİRİNİ TANIYORDU.**
⛔ Çerçevede İKİ sarmalayıcı var: `BsTextField`/`BsDateField` → `.bs-field`,
`BsTextBox` (ve onu saran `ErpDateField`) → `.bs-form-group`. Yoğunluk kuralı yalnız
`.bs-field`i tanıyordu; aynı belge ekranında iki alan yan yana konsa biri 4px, öteki
varsayılan boşluk alır ve **satırlar hizasız** görünürdü.
⚠️ **Kusur BUGÜN ULAŞILAMAZ ve bu ölçüldü:** `.bs-form-group` üreten bileşenler yalnız üç
ekranda (`ErpCustomFieldsPanel` · `AdvancedDiscountPage` · `StockLotFormContent`) ve
**hiçbiri `.erp-voucher-form` taşımıyor**. Belge ekranları `BsTextField`/`BsDateField`
kullanıyor, yani hep `.bs-field`.
⚡ Kural yine de genişletildi: bugün HİÇBİR ekranı etkilemiyor (sıfır risk), ama bir belge
ekranına `BsTextBox` ya da `ErpDateField` konduğu gün hizasızlık doğmayacak.
⭐ *Ulaşılamaz bir kusurun çaresi ucuzsa, ulaşılabilir olmasını beklemeye gerek yoktur.* */
.erp-voucher-form .bs-field,
.erp-voucher-form .bs-form-group,
.erp-voucher-form .bs-picter-wrap {
margin-bottom: var(--voucher-field-gap);
}
.erp-voucher-form .bs-label {
margin-bottom: 2px;
}
/* Sekme şeridi framework'te 24px alt boşluk taşıyor; belge ekranında bu boşluk, satır
ızgarasının görünür yüksekliğinden çalınan saf kayıptır. Hem başlık hem HAREKETLER
şeridinde geçerli — ikincisi doğrudan ızgaranın üstünde durur. */
.erp-voucher-form .bs-tabs > *:first-child {
margin-bottom: var(--erp-space-2);
}
.erp-voucher-form .voucher-shell {
gap: var(--erp-space-2);
}
.erp-voucher-form .voucher-shell-identity {
padding: var(--erp-space-2) var(--erp-space-3) 0;
}
.erp-voucher-form .voucher-shell-header {
padding: var(--erp-space-1) var(--erp-space-3);
}
.erp-voucher-form .voucher-shell-lines {
padding: var(--erp-space-2) var(--erp-space-3);
}
/* Başlık bölgesi fatura ekranında KAPALI açıldığı için bu düğme, Adres · İskontolar · Not ·
Bağlantılar · Diğer Alanlar'a ulaşmanın TEK yoludur. Silik bir kesik çizgi olarak kalamaz:
kenarlıklı bir hap hâline gelir ve yüzeyle kontrast kurar. */
.erp-voucher-form .voucher-shell-splitter {
height: 22px;
}
.erp-voucher-form .voucher-shell-splitter::before {
border-top-style: solid;
border-top-color: var(--bs-color-border);
}
.erp-voucher-form .voucher-shell-splitter .bs-btn {
background: var(--bs-color-surface);
border: 1px solid var(--bs-color-border-strong);
border-radius: 999px;
padding: 2px 14px;
color: var(--bs-color-primary);
font-weight: 600;
}
.erp-voucher-form .voucher-shell-splitter .bs-btn:hover {
background: var(--bs-color-primary-light);
border-color: var(--bs-color-primary-mid);
}
/* ── Picker "⋯" düğmesi: alanın kendisinden daha çok dikkat çekiyordu ───────
Framework `Variant="primary"` veriyor (dolu lacivert). Parametre 17 ekranda ortak olduğu
için DEĞİŞTİRİLMEZ; fatura kapsamında yalnızca görünümü ikincilleştirilir — göz önce alana,
sonra düğmeye gitsin. */
/* ⛔ `:not(.bs-lookup-clear)` ZORUNLU. Kontrol seçili değerde ÜÇ parçaya çıkar:
alan · `×` (temizle) · `⋯` (gözat). `×` zaten şeffaf olsun diye stillenmiş (`.bs-lookup-clear`,
yukarıda) ama bu kural DAHA ÖZGÜL olduğu için onu eziyor ve ortaya kenarlıklı, kopuk bir
segment çıkarıyordu — kontrol "bozuk" görünüyordu. Kenarlıklı segment YALNIZ sondaki `⋯`. */
/* ⭐ Emsal: tarih alanının takvim ikonu. O ikon ayrı bir kutu DEĞİL, alanın İÇİNDE durur ve
kontrol tek parça okunur. Gözat düğmesi de öyle olmalı — kenarlıksız, alanla aynı zemin,
yalnız sağ köşeleri alanın yuvarlaklığını devam ettirir. Kenarlıklı segment hâli kontrolü
ikiye bölüyordu. */
.erp-voucher-form .bs-picter-wrap > .bs-btn:not(.bs-lookup-clear),
.erp-voucher-form .bs-field > div[style*="display:flex"] > .bs-btn:not(.bs-lookup-clear) {
background: var(--bs-color-bg-subtle);
border: 0;
border-radius: 0 var(--bs-input-radius) var(--bs-input-radius) 0;
color: var(--bs-color-text-muted);
font-weight: 400;
padding: 0 11px;
/* 🔴 GÖLGEYİ DE EZ. Framework `.bs-btn-primary`'ye `box-shadow: 0 1px 3px rgba(26,111,219,.35)`
veriyor; zemin/kenarlık/köşe ezildiği hâlde gölge kalınca düğme KABARIK ve AYRI bir kutu
gibi okunuyordu. ⚠️ `backgroundColor` ölçen bir iddia bunu göremez — kutuyu boyayan şey
zemin değil GÖLGEYDİ. */
box-shadow: none;
}
.erp-voucher-form .bs-picter-wrap > .bs-btn:not(.bs-lookup-clear):hover,
.erp-voucher-form .bs-field > div[style*="display:flex"] > .bs-btn:not(.bs-lookup-clear):hover {
background: var(--bs-color-bg-subtle);
color: var(--bs-color-primary);
box-shadow: none;
}
/* `×` kontrolün İÇİNDE durur: alanla aynı zemin, kenarlıksız, köşesiz. */
.erp-voucher-form .bs-lookup-clear {
background: var(--bs-color-bg-subtle);
border: 0;
border-radius: 0;
color: var(--bs-color-text-muted);
}
.erp-voucher-form .bs-lookup-clear:hover {
color: var(--bs-color-danger, #c0392b);
}
/* ── "Diğer Alanlar" — nadir kullanılan sekiz alan ─────────────────────────── */
.erp-voucher-form .voucher-other-fields .bs-form-section-header {
padding: var(--erp-space-2) 0;
}
.erp-voucher-form .voucher-other-fields .bs-form-section-body {
padding-top: var(--erp-space-2);
}
/* ── Satır araç çubuğu — satır eklemenin üç yolu TEK şeritte ───────────────── */
.voucher-line-toolbar {
display: flex;
align-items: flex-end;
gap: var(--erp-space-2);
flex-wrap: wrap;
margin-bottom: var(--erp-space-2);
}
.voucher-line-toolbar-search {
flex: 1 1 260px;
min-width: 220px;
}
.voucher-line-toolbar-barcode {
flex: 1 1 300px;
min-width: 220px;
}
.voucher-line-toolbar-actions {
flex: 0 0 auto;
}
/* "Kolonlar" ızgaranın kendi şeridinden alınıp buraya taşındı (`R11`) → en sağa yapışır. */
.voucher-line-toolbar-columns {
flex: 0 0 auto;
margin-left: auto;
}
.voucher-line-toolbar .bs-field,
.voucher-line-toolbar .bs-picter-wrap {
margin-bottom: 0;
}
/* ── Satır ızgarası: ürün geniş, sayısal alanlar sağa hizalı ───────────────── */
/* Ölçüm: "Ürün" kolonu 101px'e sıkışmıştı (ızgaranın en ÖNEMLİ kolonu, en dar olanıydı);
"Satır Depo" seçicisi "Se" diye kırpılıyordu. Kolon anahtarları `data-col` ile adreslenir —
sıra kullanıcı tercihiyle değişebildiği için `nth-child` GÜVENİLMEZDİR. */
/* 🔴 Kolonlara `min-width` verilince kalan kolonlar EZİLDİ ve başlıkları okunamaz oldu
("…atı" · "Fiya" · "Döv").
⚠️ Bunlar KIRPILMIYOR, **TAŞIYOR**: tablo hücresinde `overflow` varsayılan olarak `visible`
olduğu için metin komşu hücrenin üstüne biner. Bu yüzden `scrollWidth > clientWidth` ölçen
bir iddia hiçbir şey göremez — taşmayı ölçmek için metnin GERÇEK genişliği gerekir.
Çözüm iki parçalı: başlık sarmaz (`nowrap`) VE tablo içeriği kadar genişleyebilir
(`min-width: max-content`) → sarmalayıcıdaki `overflow-x:auto` devreye girer ve kaydırır. */
.erp-voucher-form .voucher-line-grid thead th {
white-space: nowrap;
}
.erp-voucher-form .voucher-line-grid table {
min-width: max-content;
}
.erp-voucher-form .voucher-line-grid th[data-col="lineNo"],
.erp-voucher-form .voucher-line-grid td[data-col="lineNo"] {
width: 48px;
min-width: 48px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.erp-voucher-form .voucher-line-grid th[data-col="product"],
.erp-voucher-form .voucher-line-grid td[data-col="product"] {
min-width: 230px;
}
.erp-voucher-form .voucher-line-grid th[data-col="productName"],
.erp-voucher-form .voucher-line-grid td[data-col="productName"],
.erp-voucher-form .voucher-line-grid th[data-col="description"],
.erp-voucher-form .voucher-line-grid td[data-col="description"] {
min-width: 200px;
}
.erp-voucher-form .voucher-line-grid th[data-col="warehouse"],
.erp-voucher-form .voucher-line-grid td[data-col="warehouse"],
.erp-voucher-form .voucher-line-grid th[data-col="unit"],
.erp-voucher-form .voucher-line-grid td[data-col="unit"] {
min-width: 120px;
}
.erp-voucher-form .voucher-line-grid th[data-col="quantity"],
.erp-voucher-form .voucher-line-grid td[data-col="quantity"],
.erp-voucher-form .voucher-line-grid th[data-col="currencyPrice"],
.erp-voucher-form .voucher-line-grid td[data-col="currencyPrice"],
.erp-voucher-form .voucher-line-grid th[data-col="discount1"],
.erp-voucher-form .voucher-line-grid td[data-col="discount1"] {
min-width: 88px;
}
/* 🔴 Sabitlenmiş (pinned) hücrelerin zemini ŞEFFAFTI. Kolonlara `min-width` verilince tablo
kabından geniş oldu, yatay kaydırma başladı ve kayan sütunların metni sabit sütunların
ALTINDAN sızarak başlığı okunamaz hâle getirdi ("Dvz. Tutar | atı | Fiya | TL Tutar").
⭐ Kusur `min-width`'in kendisi değil, onun GÖRÜNÜR KILDIĞI eksik zemindir — kaydırma
olmayan tabloda hiç ortaya çıkmıyordu. */
.erp-voucher-form .voucher-line-grid tbody .bs-col-pinned {
background: inherit;
}
.erp-voucher-form .voucher-line-grid tbody tr {
background: var(--bs-grid-row-bg);
}
.erp-voucher-form .voucher-line-grid thead .bs-col-pinned {
background: var(--bs-grid-header-bg);
}
.erp-voucher-form .voucher-line-grid td .bs-input[type="number"] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.erp-voucher-form .voucher-line-grid td[data-col="lineTotal"],
.erp-voucher-form .voucher-line-grid td[data-col="currencyTotal"],
.erp-voucher-form .voucher-line-grid td[data-col="tryTotal"],
.erp-voucher-form .voucher-line-grid td[data-col="withholdingAmount"],
.erp-voucher-form .voucher-line-grid td[data-col="baseUnitPrice"] {
text-align: right;
font-variant-numeric: tabular-nums;
}
.voucher-lines-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: var(--erp-space-5) var(--erp-space-3);
color: var(--bs-color-text-secondary);
text-align: center;
}
.voucher-lines-empty span {
color: var(--bs-color-text-muted);
}
/* ── Toplam şeridi — dört değer HER ZAMAN görünür, kalan sekizi katlanır ───── */
.erp-voucher-form .voucher-shell-totals {
padding: var(--erp-space-2) var(--erp-space-3);
}
.voucher-totals-summary {
display: flex;
align-items: stretch;
gap: var(--erp-space-2);
flex-wrap: wrap;
}
.voucher-totals-item {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
flex: 1 1 120px;
min-width: 110px;
padding: 4px var(--erp-space-3) 4px 0;
border-right: 1px solid var(--bs-color-border-subtle);
}
.voucher-totals-item > span {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-color-text-muted);
}
.voucher-totals-item > strong {
font-size: 1rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--bs-color-text);
}
/* Genel Toplam, diğer değerlerden GÖRSEL OLARAK ayrılır: ekrandaki en güçlü sayı odur. */
.voucher-totals-item.voucher-totals-grand {
flex: 0 1 230px;
border-right: 0;
border-radius: var(--bs-card-radius, 6px);
background: var(--bs-color-primary-light);
padding: 4px var(--erp-space-3);
}
.voucher-totals-grand > span {
color: var(--bs-color-primary);
font-weight: 700;
}
.voucher-totals-grand > strong {
font-size: 1.45rem;
line-height: 1.15;
color: var(--bs-color-primary);
}
.voucher-totals-toggle {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.voucher-totals-details {
margin-top: var(--erp-space-2);
border-top: 1px solid var(--bs-color-border-subtle);
padding-top: var(--erp-space-2);
max-height: 34vh;
overflow-y: auto;
}
/* ── Sayfa kabı: 1920'de yayılmaz, Kaydet/Vazgeç viewport'ta kalır ─────────── */
/* Uygulama yerleşimi (`bs-app-layout` → `bs-main` → `bs-content`) varsayılan olarak İÇERİKLE
BÜYÜR: `min-height:100vh` var ama `height` yok. Bu yüzden belge ekranında `.bs-form-page`'in
`max-height:100%`'i viewport'a değil içeriğe çözülüyor, footer da sayfanın dibine düşüyordu
(ölçüm: Kaydet butonu y=1467). `:has()` ile YALNIZ fatura ekranında zincir viewport'a
kilitlenir; kaydırma form gövdesinin İÇİNE iner. */
.bs-app-layout:has(.erp-voucher-form) {
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
.bs-app-layout:has(.erp-voucher-form) .bs-main,
.bs-app-layout:has(.erp-voucher-form) .bs-content {
min-height: 0;
overflow: hidden;
}
.bs-app-layout:has(.erp-voucher-form) .bs-content {
display: flex;
flex-direction: column;
}
.bs-form-page:has(.erp-voucher-form) {
flex: 1;
min-height: 0;
max-height: 100%;
overflow: hidden;
}
.bs-form-page:has(.erp-voucher-form) .bs-form-page-body {
overflow: hidden;
padding: var(--erp-space-3) var(--erp-space-4);
display: flex;
flex-direction: column;
}
/* Sayfa başlığı belge ekranında 60px yiyordu; başlık + "Yazdır" 44px'e sığar. */
.bs-form-page:has(.erp-voucher-form) .bs-form-page-header {
height: 46px;
}
/* ── Dikey bütçe: KAYDIRMA IZGARANIN İÇİNE iner ─────────────────────────────
Ölçüm (1366x768): kimlik 186 + başlık 112 + toplam 66 + footer 71 + uygulama
kabuğu 116 → satır bölgesine 117px kalıyordu ve sticky toplam çubuğu onu da
örtüyordu; ekran görüntüsünde ızgaranın başlık satırı bile görünmüyordu.
⭐ Çözüm bölgeleri küçültmek DEĞİL, kaydırmayı doğru yere koymaktır: kimlik ·
başlık · toplam · footer SABİT kalır, ızgara kalan alanı alır ve KENDİ İÇİNDE
kayar. `min-height:0` zinciri şart — flex öğesi varsayılan olarak içeriğinden
küçülmez ve zincir tek halkada kopar. */
.bs-form-page:has(.erp-voucher-form) .erp-voucher-form {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.erp-voucher-form .voucher-shell {
flex: 1;
min-height: 0;
}
.erp-voucher-form .voucher-shell-lines {
display: flex;
flex-direction: column;
flex: 1;
min-height: 160px;
}
.erp-voucher-form .voucher-shell-lines > .bs-tabs {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.erp-voucher-form .voucher-shell-lines .bs-tab-panel {
flex: 1;
min-height: 0;
overflow-y: auto;
}
/* Izgaranın kendi yükseklik sınırı burada ARTIK YANLIŞ: kabı zaten sınırlı. */
.erp-voucher-form .bs-grid-wrapper {
max-height: none;
}
/* ⚠️ `.bs-form-page-body`'nin doğrudan çocuğu `.erp-voucher-form` DEĞİL: `FormPageBase` gövdeyi
`display:contents` bir sarmalayıcı + `EditForm`'un ürettiği `