/*
    AbbTech B2B - UI Enhancement Layer
    ----------------------------------
    Velzon temasinin uzerine binen, tamamen additive bir gorsel katman.
    Tum renkler Velzon'un --vz-* degiskenlerinden turetilir; boylece
    acik/koyu tema ve renk semasi degisikliklerinde otomatik uyum saglar.

    NOT: Bu dosya backend'den bagimsizdir, yalnizca gorunum ve etkilesim icerir.
*/

:root {
    --b2b-ease: cubic-bezier(.22, .61, .36, 1);
    --b2b-ease-out: cubic-bezier(.16, 1, .3, 1);
    --b2b-fast: .18s;
    --b2b-normal: .28s;
    --b2b-slow: .45s;
    --b2b-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --b2b-shadow-md: 0 4px 14px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
    --b2b-shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, .22), 0 8px 16px -8px rgba(15, 23, 42, .12);
    --b2b-ring: 0 0 0 3px rgba(var(--vz-primary-rgb), .18);
}

[data-bs-theme="dark"] {
    --b2b-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --b2b-shadow-md: 0 4px 14px rgba(0, 0, 0, .40);
    --b2b-shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, .60);
}

/* ============================================================
   1. SAYFA GIRIS ANIMASYONU
   ============================================================ */

@keyframes b2bFadeUp {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes b2bFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes b2bPop {
    0%   { opacity: 0; transform: scale(.94); }
    60%  { transform: scale(1.015); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes b2bShimmer {
    from { background-position: -480px 0; }
    to   { background-position: 480px 0; }
}

@keyframes b2bPulseDot {
    0%, 100% { opacity: 1; }
    60%      { opacity: .3; }
}

.b2b-anim .b2b-page > .row > [class*="col-"] > .card,
.b2b-anim .b2b-reveal {
    /* backwards (both degil): animasyon bitince transform kalmaz, boylece
       kart kalici bir yigin baglami olusturmaz ve icindeki acilir menuler
       sonraki kartlarin altinda kalmaz. */
    animation: b2bFadeUp var(--b2b-slow) var(--b2b-ease-out) backwards;
}

/* ============================================================
   2. KART VE YUZEY RAFINESI
   ============================================================ */

.card {
    transition: box-shadow var(--b2b-normal) var(--b2b-ease),
                transform var(--b2b-normal) var(--b2b-ease),
                border-color var(--b2b-normal) var(--b2b-ease);
}

.b2b-hover-lift { will-change: transform; }

.b2b-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--b2b-shadow-lg);
}

/* ============================================================
   3. KPI / OZET KARTLARI
   ============================================================ */

.b2b-kpi-row {
    display: grid;
    /* auto-fit yerine sabit kirilim: dar sutunlarda buyuk tutarlar kirpiliyordu */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}

@media (max-width: 1699.98px) {
    .b2b-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .b2b-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.b2b-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .95rem 1.05rem;
    border-radius: var(--vz-border-radius);
    background: var(--vz-card-bg);
    border: 1px solid var(--vz-border-color);
    box-shadow: var(--b2b-shadow-sm);
    overflow: hidden;
    transition: transform var(--b2b-normal) var(--b2b-ease),
                box-shadow var(--b2b-normal) var(--b2b-ease);
}

.b2b-anim .b2b-kpi {
    animation: b2bFadeUp var(--b2b-slow) var(--b2b-ease-out) backwards;
}

.b2b-anim .b2b-kpi:nth-child(1) { animation-delay: .04s; }
.b2b-anim .b2b-kpi:nth-child(2) { animation-delay: .10s; }
.b2b-anim .b2b-kpi:nth-child(3) { animation-delay: .16s; }
.b2b-anim .b2b-kpi:nth-child(4) { animation-delay: .22s; }
.b2b-anim .b2b-kpi:nth-child(5) { animation-delay: .28s; }
.b2b-anim .b2b-kpi:nth-child(6) { animation-delay: .34s; }

.b2b-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--b2b-shadow-md);
}

/* Sol kenardaki renk seridi */
.b2b-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: currentColor;
    opacity: .85;
}

.b2b-kpi__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 20px;
    background: currentColor;
}

.b2b-kpi__icon > i { color: #fff; }

.b2b-kpi__body { min-width: 0; }

.b2b-kpi__label {
    font-size: .7rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--vz-secondary-color);
    margin: 0 0 .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b2b-kpi__value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vz-heading-color);
    margin: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* son care: ortadan kesilmek yerine ... */
}

.b2b-kpi__sub {
    font-size: .72rem;
    color: var(--vz-secondary-color);
    margin: .1rem 0 0;
}

/* Renk varyantlari - currentColor uzerinden calisir */
.b2b-kpi.b2b-c-primary { color: var(--vz-primary); }
.b2b-kpi.b2b-c-success { color: var(--vz-success); }
.b2b-kpi.b2b-c-warning { color: var(--vz-warning); }
.b2b-kpi.b2b-c-danger  { color: var(--vz-danger); }
.b2b-kpi.b2b-c-info    { color: var(--vz-info); }

/* ============================================================
   4. ARAC CUBUGU (TOOLBAR)
   ============================================================ */

.b2b-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.15rem;   /* tabloya yapisik durmasin */
}

.b2b-toolbar__spacer { flex: 1 1 auto; }

.b2b-btn-soft {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--vz-border-color);
    background: var(--vz-secondary-bg-subtle);
    color: var(--vz-body-color);
    border-radius: var(--vz-border-radius);
    padding: .38rem .7rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--b2b-fast) var(--b2b-ease),
                border-color var(--b2b-fast) var(--b2b-ease),
                color var(--b2b-fast) var(--b2b-ease),
                transform var(--b2b-fast) var(--b2b-ease);
}

.b2b-btn-soft:hover {
    background: var(--vz-primary-bg-subtle);
    border-color: var(--vz-primary-border-subtle);
    color: var(--vz-primary);
}

.b2b-btn-soft:active { transform: scale(.97); }

.b2b-btn-soft:focus-visible {
    outline: none;
    box-shadow: var(--b2b-ring);
}

.b2b-btn-soft.is-active {
    background: var(--vz-primary-bg-subtle);
    border-color: var(--vz-primary);
    color: var(--vz-primary);
}

.b2b-badge-count {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: .66rem;
    font-weight: 700;
    background: var(--vz-primary);
    color: #fff;
}

/* Arac cubugundaki kucuk select */
.b2b-select {
    border: 1px solid var(--vz-border-color);
    background: var(--vz-secondary-bg-subtle);
    color: var(--vz-body-color);
    border-radius: var(--vz-border-radius);
    padding: .38rem 1.7rem .38rem .7rem;
    font-size: .8125rem;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23878a99'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    background-size: 14px;
    transition: border-color var(--b2b-fast) var(--b2b-ease),
                box-shadow var(--b2b-fast) var(--b2b-ease);
}

.b2b-select:focus {
    outline: none;
    border-color: var(--vz-primary);
    box-shadow: var(--b2b-ring);
}

/* ============================================================
   5. KOLON SECICI (COLUMN CHOOSER)
   ============================================================ */

.b2b-colpick { position: relative; }

.b2b-colpick__panel {
    position: absolute;
    z-index: 1055;
    top: calc(100% + 6px);
    right: 0;
    width: 292px;
    max-height: 430px;
    display: flex;
    flex-direction: column;
    background: var(--vz-dropdown-bg, var(--vz-card-bg));
    border: 1px solid var(--vz-border-color);
    border-radius: calc(var(--vz-border-radius) + 2px);
    box-shadow: var(--b2b-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity var(--b2b-fast) var(--b2b-ease),
                transform var(--b2b-fast) var(--b2b-ease-out),
                visibility var(--b2b-fast);
}

.b2b-colpick__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.b2b-colpick__panel.drop-left {
    right: auto;
    left: 0;
    transform-origin: top left;
}

.b2b-colpick__head {
    padding: .7rem .85rem .6rem;
    border-bottom: 1px solid var(--vz-border-color);
}

.b2b-colpick__title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vz-secondary-color);
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.b2b-colpick__search {
    width: 100%;
    border: 1px solid var(--vz-border-color);
    background: var(--vz-secondary-bg-subtle);
    color: var(--vz-body-color);
    border-radius: var(--vz-border-radius);
    padding: .32rem .6rem;
    font-size: .8125rem;
    transition: border-color var(--b2b-fast) var(--b2b-ease),
                box-shadow var(--b2b-fast) var(--b2b-ease);
}

.b2b-colpick__search:focus {
    outline: none;
    border-color: var(--vz-primary);
    box-shadow: var(--b2b-ring);
}

.b2b-colpick__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .35rem;
    overscroll-behavior: contain;
}

.b2b-colpick__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .5rem;
    border-radius: var(--vz-border-radius);
    cursor: pointer;
    user-select: none;
    font-size: .8125rem;
    color: var(--vz-body-color);
    border: 1px solid transparent;
    transition: background var(--b2b-fast) var(--b2b-ease),
                border-color var(--b2b-fast) var(--b2b-ease),
                opacity var(--b2b-fast) var(--b2b-ease);
}

.b2b-colpick__item:hover { background: var(--vz-primary-bg-subtle); }

.b2b-colpick__item.is-locked {
    opacity: .5;
    cursor: not-allowed;
}

.b2b-colpick__item.is-dragging {
    opacity: .4;
    border-style: dashed;
    border-color: var(--vz-primary);
}

.b2b-colpick__item.is-drop-before { box-shadow: inset 0 2px 0 0 var(--vz-primary); }
.b2b-colpick__item.is-drop-after  { box-shadow: inset 0 -2px 0 0 var(--vz-primary); }

.b2b-colpick__grip {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--vz-secondary-color);
    font-size: 15px;
    line-height: 1;
    opacity: .55;
    transition: opacity var(--b2b-fast) var(--b2b-ease);
}

.b2b-colpick__item:hover .b2b-colpick__grip { opacity: 1; }
.b2b-colpick__grip:active { cursor: grabbing; }

.b2b-colpick__item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    accent-color: var(--vz-primary);
    cursor: inherit;
    margin: 0;
}

.b2b-colpick__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b2b-colpick__foot {
    display: flex;
    gap: .4rem;
    padding: .55rem .6rem;
    border-top: 1px solid var(--vz-border-color);
}

.b2b-colpick__foot .b2b-btn-soft {
    flex: 1 1 auto;
    justify-content: center;
    padding: .3rem .5rem;
    font-size: .75rem;
}

.b2b-colpick__empty {
    padding: 1.2rem .8rem;
    text-align: center;
    font-size: .8rem;
    color: var(--vz-secondary-color);
}

/* Kolon paneli acikken iceren kart one alinir.
   (Kart giris animasyonu her karti ayri bir yigin baglami yaptigi icin
   panelin kendi z-index'i sonraki kartlarin uzerine cikamaz.) */
.card.b2b-raise {
    position: relative;
    z-index: 1060;
}

/* Gizlenen kolonlar */
.b2b-col-hidden { display: none !important; }

/* ============================================================
   6. TABLO RAFINESI
   ============================================================ */

.b2b-table-wrap {
    position: relative;
    /* Kaydirma cubugu son kolonun uzerine binmesin */
    scrollbar-gutter: stable;
    /* Tablo kendi cercevesinde dursun: arac cubugundan net ayrilir */
    border: 1px solid var(--vz-border-color);
    border-radius: var(--vz-border-radius);
    background: var(--vz-card-bg);
}

/* Cerceve icindeki tablo kenarlara yapissin */
.b2b-table-wrap > .table { margin-bottom: 0; }

.b2b-table-wrap > .table > :not(caption) > *:last-child > * {
    border-bottom-width: 0;
}

/* Yapiskan baslik */
.b2b-sticky-head thead th,
.b2b-sticky-head thead th.sort {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--vz-light);
    box-shadow: inset 0 -1px 0 var(--vz-border-color),
                0 1px 0 var(--vz-border-color);
}

.b2b-table th {
    font-size: .72rem;
    letter-spacing: .045em;
    font-weight: 700;
}

.b2b-table > thead > tr > th {
    padding-top: .85rem;
    padding-bottom: .85rem;
}

.b2b-table > tbody > tr {
    transition: box-shadow var(--b2b-fast) var(--b2b-ease);
}

.b2b-table > tbody > tr > * {
    transition: background-color var(--b2b-fast) var(--b2b-ease);
}

/* Zebra: genis tablolarda satiri gozle takip etmeyi kolaylastirir.
   Hucre arka plani satir arka planinin uzerine ciziler; bu yuzden
   zebra/hover/secim uclusu de hucre uzerinden verilmelidir. */
.b2b-table > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(var(--vz-body-color-rgb), .022);
}

.b2b-table > tbody > tr:hover > *,
.b2b-table > tbody > tr.is-selected > * {
    background-color: var(--vz-primary-bg-subtle);
}

.b2b-table > tbody > tr:hover,
.b2b-table > tbody > tr.is-selected {
    box-shadow: inset 3px 0 0 0 var(--vz-primary);
}

/* Satirlarin sirayla belirmesi - JS ile --b2b-i degiskeni atanir */
.b2b-anim .b2b-stagger tbody tr {
    animation: b2bFadeUp .38s var(--b2b-ease-out) backwards;
    animation-delay: calc(var(--b2b-i, 0) * 26ms);
}

/* Sayisal hucreler hizali okunsun */
.b2b-table td.text-end,
.b2b-table .b2b-num { font-variant-numeric: tabular-nums; }

/* --- Kolon genislikleri ---------------------------------------------
   b2b-fit  : kisa degerler (kod, tarih, tutar, durum, plasiyer)
              Satira BOLUNMEZ. width:1% ile once icerigi kadar daralir,
              artan alan varsa esit pay alir.
   b2b-grow : ana metin kolonu (musteri/urun adi). Arta kalan alani alir
              ama max-width ile sinirlanir - aksi halde tum boslugu yutup
              diger kolonlari satira boluyordu.
   b2b-clip : ikincil uzun metin (aciklama vb.) - dar tutulur, tasarsa ...

   ONEMLI: nowrap hem TH hem TD'ye verilmeli. Yalnizca basliga verilince
   govde hucreleri sarmaya devam eder ve satirlar iki satira cikar.        */
.b2b-table th.b2b-fit,
.b2b-table td.b2b-fit {
    /* width:1% VERILMEZ: verilince artan alan oransal dagildigi icin
       aslan payi yine ad kolonuna gidiyor, digerleri sikisik kaliyordu.
       Genislik serbest birakilinca kolonlar dengeli paylasir.          */
    white-space: nowrap;
}

/* Otomatik tablo duzeninde tarayici, artan alani "en genis icerikli"
   kolona verir ve max-width sinirini yok sayar. Kesin sinir icin:
     th -> oransal genislik (kolon bu kadar alir)
     td -> max-width:0 (kolonun icerik katkisini sifirlar, boylece
           artan alan digerlerine dagilir ve metin ... ile kisalir)   */
.b2b-table th.b2b-grow {
    width: 30%;
}

.b2b-table td.b2b-grow {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b2b-table th.b2b-clip { width: 14%; }

.b2b-table td.b2b-clip {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dar ekranlarda ad kolonu oransal olarak biraz daha genis olsun */
@media (max-width: 1399.98px) {
    .b2b-table th.b2b-grow { width: 34%; }
}

/* min-width olmazsa dar ekranlarda ad kolonu birkac karaktere kadar ezilir */
.b2b-table th.b2b-grow,
.b2b-table td.b2b-grow {
    min-width: 220px;
}

/* Siralanabilir basliklar */
.b2b-table th.sort {
    cursor: pointer;
    user-select: none;
    transition: color var(--b2b-fast) var(--b2b-ease);
}

.b2b-table th.sort:hover { color: var(--vz-primary); }

/* Velzon'un kendi cift yonlu siralama isareti (::before + ::after) mutlak
   konumlu olup kolonun SAG kenarina yapisir; genis kolonlarda etiketten
   yarim ekran uzakta kalir. Onu kapatip tek, satir ici bir ok kullaniyoruz. */
.b2b-table th.sort::before {
    content: none;
    display: none;
}

/* Ok satir ici: her zaman etiketin hemen yaninda durur.
   position/right/top acikca sifirlanmali - aksi halde Velzon'un
   .table .sort::after kuralindaki mutlak degerler devrede kalir. */
.b2b-table th.sort::after {
    content: "\F0143";
    font-family: "Material Design Icons";
    position: static;
    right: auto;
    top: auto;
    display: inline-block;
    margin-left: .28rem;
    vertical-align: -1px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    opacity: .25;
    transition: opacity var(--b2b-fast) var(--b2b-ease),
                color var(--b2b-fast) var(--b2b-ease);
}

.b2b-table th.sort.asc::after {
    content: "\F0143";
    opacity: 1;
    color: var(--vz-primary);
}

.b2b-table th.sort.desc::after {
    content: "\F0140";
    opacity: 1;
    color: var(--vz-primary);
}

/* ============================================================
   7. DURUM ROZETLERI
   ============================================================ */

.b2b-status {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .24rem .58rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

.b2b-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.b2b-status--live::before { animation: b2bPulseDot 1.9s var(--b2b-ease) infinite; }

.b2b-status--success {
    background: var(--vz-success-bg-subtle);
    color: var(--vz-success-text-emphasis);
    border-color: rgba(var(--vz-success-rgb), .25);
}

.b2b-status--warning {
    background: var(--vz-warning-bg-subtle);
    color: var(--vz-warning-text-emphasis);
    border-color: rgba(var(--vz-warning-rgb), .25);
}

.b2b-status--danger {
    background: var(--vz-danger-bg-subtle);
    color: var(--vz-danger-text-emphasis);
    border-color: rgba(var(--vz-danger-rgb), .25);
}

.b2b-status--info {
    background: var(--vz-info-bg-subtle);
    color: var(--vz-info-text-emphasis);
    border-color: rgba(var(--vz-info-rgb), .25);
}

.b2b-status--primary {
    background: var(--vz-primary-bg-subtle);
    color: var(--vz-primary-text-emphasis);
    border-color: var(--vz-primary-border-subtle);
}

.b2b-status--secondary {
    background: var(--vz-secondary-bg-subtle);
    color: var(--vz-secondary-color);
    border-color: var(--vz-border-color);
}

/* ============================================================
   8. FILTRE CIPLERI
   ============================================================ */

.b2b-chipbar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.b2b-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .34rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--vz-border-color);
    background: var(--vz-card-bg);
    color: var(--vz-body-color);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--b2b-fast) var(--b2b-ease),
                border-color var(--b2b-fast) var(--b2b-ease),
                color var(--b2b-fast) var(--b2b-ease),
                transform var(--b2b-fast) var(--b2b-ease),
                box-shadow var(--b2b-fast) var(--b2b-ease);
}

.b2b-chip:hover {
    border-color: var(--vz-primary);
    color: var(--vz-primary);
    transform: translateY(-1px);
}

.b2b-chip.is-active {
    background: var(--vz-primary);
    border-color: var(--vz-primary);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(var(--vz-primary-rgb), .7);
}

.b2b-chip__count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: .66rem;
    font-weight: 700;
    background: var(--vz-secondary-bg-subtle);
    color: var(--vz-secondary-color);
    transition: background var(--b2b-fast) var(--b2b-ease),
                color var(--b2b-fast) var(--b2b-ease);
}

.b2b-chip.is-active .b2b-chip__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ============================================================
   8b. CANLI OZET ROZETI
   ============================================================ */

.b2b-summary {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .34rem .8rem;
    border-radius: 999px;
    font-size: .8125rem;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--vz-secondary-color);
    background: var(--vz-secondary-bg-subtle);
    border: 1px solid var(--vz-border-color);
    font-variant-numeric: tabular-nums;
}

.b2b-summary strong {
    color: var(--vz-success-text-emphasis);
    font-weight: 700;
}

.b2b-summary__sep {
    width: 1px;
    height: 14px;
    background: var(--vz-border-color);
}

/* ============================================================
   9. ARAMA KUTUSU
   ============================================================ */

.search-box .form-control:focus,
.b2b-input:focus {
    box-shadow: var(--b2b-ring);
    border-color: var(--vz-primary);
}

.search-box .search-icon { transition: color var(--b2b-fast) var(--b2b-ease); }
.search-box:focus-within .search-icon { color: var(--vz-primary); }

/* ============================================================
   10. YUKLENIYOR / ISKELET
   ============================================================ */

.b2b-skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--vz-secondary-bg-subtle) 25%,
        var(--vz-border-color) 37%,
        var(--vz-secondary-bg-subtle) 63%);
    background-size: 480px 100%;
    animation: b2bShimmer 1.25s linear infinite;
    height: 12px;
}

/* Ust ilerleme cizgisi */
.b2b-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 20000;
    background: linear-gradient(90deg, var(--vz-primary), var(--vz-info));
    box-shadow: 0 0 10px rgba(var(--vz-primary-rgb), .7);
    transition: width .25s var(--b2b-ease), opacity .3s var(--b2b-ease);
    pointer-events: none;
}

/* ============================================================
   11. BUTON VE AKSIYON MIKRO ETKILESIMLERI
   ============================================================ */

.btn {
    transition: transform var(--b2b-fast) var(--b2b-ease),
                box-shadow var(--b2b-fast) var(--b2b-ease),
                background-color var(--b2b-fast) var(--b2b-ease),
                border-color var(--b2b-fast) var(--b2b-ease),
                color var(--b2b-fast) var(--b2b-ease);
}

.btn:not(.btn-link):not(:disabled):hover { transform: translateY(-1px); }
.btn:not(.btn-link):not(:disabled):active { transform: translateY(0) scale(.985); }

/* Tablo icindeki aksiyon ikonlari */
.b2b-action {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background var(--b2b-fast) var(--b2b-ease),
                border-color var(--b2b-fast) var(--b2b-ease),
                transform var(--b2b-fast) var(--b2b-ease);
}

.b2b-action:hover {
    background: var(--vz-primary-bg-subtle);
    border-color: var(--vz-primary-border-subtle);
    transform: translateY(-1px);
}

/* ============================================================
   12. KAYDIRMA CUBUGU
   ============================================================ */

.b2b-scroll,
.b2b-colpick__list,
.b2b-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--vz-border-color) transparent;
}

.b2b-scroll::-webkit-scrollbar,
.b2b-colpick__list::-webkit-scrollbar,
.b2b-table-wrap::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.b2b-scroll::-webkit-scrollbar-thumb,
.b2b-colpick__list::-webkit-scrollbar-thumb,
.b2b-table-wrap::-webkit-scrollbar-thumb {
    background: var(--vz-border-color);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.b2b-scroll::-webkit-scrollbar-thumb:hover,
.b2b-colpick__list::-webkit-scrollbar-thumb:hover,
.b2b-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--vz-secondary-color);
    background-clip: content-box;
}

.b2b-scroll::-webkit-scrollbar-track,
.b2b-colpick__list::-webkit-scrollbar-track,
.b2b-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   13. BILDIRIM (TOAST)
   ============================================================ */

.b2b-toast-host {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 20050;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}

.b2b-toast {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 220px;
    max-width: 340px;
    padding: .6rem .85rem;
    border-radius: 10px;
    font-size: .8125rem;
    background: var(--vz-card-bg);
    color: var(--vz-body-color);
    border: 1px solid var(--vz-border-color);
    border-left: 3px solid var(--vz-primary);
    box-shadow: var(--b2b-shadow-lg);
    animation: b2bPop .32s var(--b2b-ease-out) both;
    pointer-events: auto;
}

.b2b-toast.is-leaving {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .22s var(--b2b-ease), transform .22s var(--b2b-ease);
}

.b2b-toast--success { border-left-color: var(--vz-success); }
.b2b-toast--danger  { border-left-color: var(--vz-danger); }
.b2b-toast--warning { border-left-color: var(--vz-warning); }

/* ============================================================
   14. BOS DURUM
   ============================================================ */

.b2b-empty {
    padding: 2.4rem 1rem;
    text-align: center;
}

.b2b-anim .b2b-empty {
    animation: b2bFadeUp .4s var(--b2b-ease-out) backwards;
}

.b2b-empty__icon {
    font-size: 40px;
    color: var(--vz-secondary-color);
    opacity: .45;
    margin-bottom: .5rem;
}

/* ============================================================
   15. YAZDIRMA
   ============================================================ */

@media print {
    .app-menu, #page-topbar, .footer, .b2b-toolbar,
    .page-title-box, .pagination-wrap, .b2b-colpick,
    .noresult, .customizer-setting, .b2b-toast-host { display: none !important; }

    .main-content { margin-left: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
    .b2b-table { font-size: 11px; }
    .b2b-page .card, .b2b-kpi, .b2b-stagger tbody tr { animation: none !important; }
}

/* ============================================================
   16. HAREKET AZALTMA TERCIHI
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   17. MOBIL DUZELTMELERI
   ============================================================ */

@media (max-width: 575.98px) {
    .b2b-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .b2b-kpi { padding: .7rem .75rem; gap: .6rem; }
    .b2b-kpi__icon { width: 34px; height: 34px; font-size: 17px; }
    .b2b-kpi__value { font-size: 1rem; }
    .b2b-colpick__panel { width: min(292px, calc(100vw - 32px)); }
    .b2b-toolbar { gap: .4rem; }
    .b2b-toast-host { right: 10px; left: 10px; bottom: 10px; }
    .b2b-toast { max-width: none; }
}