/*!
 * ============================================================
 *  Voxnup Not Laravel (VNL) 3.0.0 — VNL Table Stilleri
 *  vnltable.js tarafından üretilen DOM'u biçimlendirir.
 *  Renkler tema değişkenlerinden gelir; açık/koyu kendiliğinden uyar.
 *  Authors: Voxnup Authors
 * ============================================================
 */

/* ================================================================
   Temel — tüm skin'ler bu değişkenleri ezerek çalışır

   Filtre paneli <body>'ye takılır (tablo overflow:hidden taşıdığı için
   içeride kalsa kırpılırdı), yani tablonun değişkenleri ona akmaz.
   Bu yüzden token blokları ikisini birden hedefler; panel açılırken
   skin sınıfını da kendi üzerine alır.
   ================================================================ */

.vnl-table,
.vnl-filter-panel {
    --vnl-table-border:      var(--vnl-border, var(--bs-border-color));
    --vnl-table-head-bg:     var(--vnl-surface-raised, var(--bs-tertiary-bg));
    --vnl-table-head-color:  var(--bs-body-color);
    --vnl-table-head-size:   .875rem;
    --vnl-table-head-weight: 600;
    --vnl-table-head-transform: none;
    --vnl-table-head-spacing:  normal;
    --vnl-table-hover-bg:    var(--bs-secondary-bg);
    --vnl-table-stripe-bg:   rgba(128, 128, 128, .06);
    --vnl-table-row-border:  var(--vnl-table-border);
    --vnl-table-cell-y:      .5rem;
    --vnl-table-cell-x:      .75rem;
    --vnl-table-font-size:   .875rem;
    --vnl-table-radius:      var(--bs-border-radius, .5rem);
    --vnl-table-accent:      var(--bs-primary, #04ab61);
}

.vnl-table {
    display: block;
    background: var(--vnl-surface, var(--bs-body-bg));
    border: 1px solid var(--vnl-table-border);
    border-radius: var(--vnl-table-radius);
    overflow: hidden;
}

/* ── Araç çubuğu ── */

.vnl-table-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .75rem;
    border-bottom: 1px solid var(--vnl-table-border);
}

.vnl-table-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 260px;
}

.vnl-table-search-wrap .vnl-icon {
    position: absolute;
    left: .6rem;
    color: var(--bs-secondary-color);
    pointer-events: none;   /* tıklama input'a geçsin */
}

.vnl-table-search {
    width: 100%;
    padding-left: 2rem;
}

.vnl-table-actions {
    display: flex;
    gap: .5rem;
    margin-left: auto;
}

/* ── Aktif filtre çipleri ──
   Filtre yokken satır hiç çizilmez; [hidden] .form-control gibi bir
   display kuralıyla yarışmadığı için burada özgüllük gerekmiyor. */

.vnl-table-chips {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--vnl-table-border);
}

.vnl-chip {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    max-width: 100%;
    padding: .15rem .15rem .15rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnl-table-accent) 12%, transparent);
    color: var(--bs-body-color);
    font-size: .75rem;
    line-height: 1.5;
}

.vnl-chip-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vnl-chip-x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: .9rem;
    line-height: 1;
    opacity: .55;
    cursor: pointer;
}

.vnl-chip-x:hover {
    background: color-mix(in srgb, currentColor 18%, transparent);
    opacity: 1;
}

/* ── Seçim çubuğu ──
   Seçim varken belirir. Vurgulu bir şerit: kullanıcı bir kip içinde
   olduğunu, tıkladığı düğmenin görünen satırlara değil SEÇİME
   uygulanacağını bilsin. */

.vnl-table-selection {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--vnl-table-border);
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 10%, transparent);
    font-size: .8125rem;
}

.vnl-selection-count {
    font-weight: 600;
}

.vnl-selection-more {
    padding: 0;
    font-size: .8125rem;
}

.vnl-selection-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* ── Seçim ve detay sütunları ── */

.vnl-sys {
    padding-left: .35rem;
    padding-right: .35rem;
}

.vnl-sys .form-check-input {
    margin: 0;
    vertical-align: middle;
}

.vnl-row-selected > td {
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 12%, transparent);
}

/* Seçili satırın sabit hücreleri saydam olamaz; renk opak zeminin
   üstüne katman olarak biner. */
.vnl-row-selected :is(.vnl-pin-left, .vnl-pin-right) {
    background:
        linear-gradient(
            color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 12%, transparent),
            color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 12%, transparent)),
        var(--vnl-surface, var(--bs-body-bg));
}

.vnl-detail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.vnl-detail-toggle:hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: var(--vnl-bench, var(--vnl-table-accent));
}

.vnl-detail-toggle:disabled {
    opacity: .3;
    cursor: default;
}

.vnl-detail-caret::after {
    content: "▸";
}

.vnl-detail-caret {
    transition: transform .15s;
}

.vnl-has-detail .vnl-detail-caret {
    transform: rotate(90deg);
}

.vnl-has-detail .vnl-detail-toggle {
    color: var(--vnl-bench, var(--vnl-table-accent));
}

/* ── Detay satırı ──
   Ait olduğu satırın altına yapışır: araya çizgi girmez, girinti ve
   zemin hangi satıra ait olduğunu söyler. */

.vnl-has-detail > td {
    border-bottom-color: transparent;
}

.vnl-detail-row > td {
    padding: 0;
    background: color-mix(in srgb, currentColor 4%, transparent);
}

.vnl-detail-body {
    padding: .75rem var(--vnl-table-cell-x);
    padding-left: calc(var(--vnl-table-cell-x) + (var(--vnl-depth, 0) + 1) * 1.1rem);
    white-space: normal;
}

.vnl-detail-body.vnl-table-error {
    color: var(--bs-danger);
}

/* ── Gövde ──
   Kaydırma alanı ile katman ayrı: katman kaydırmayla kaymasın. */

.vnl-table-body {
    position: relative;
}

.vnl-table-scroll {
    overflow: auto;
}

.vnl-table-el {
    width: 100%;
    border-collapse: separate;   /* sticky başlıkta kenarlık kaybolmasın */
    border-spacing: 0;
    font-size: var(--vnl-table-font-size);

    /* Sabit genişlikli rakamlar: sayı sütununda basamaklar alt alta
       hizalanır, orantılı rakamlarda 11 ile 88 farklı yer kaplıyordu. */
    font-variant-numeric: tabular-nums;
}

.vnl-table-el th,
.vnl-table-el td {
    padding: var(--vnl-table-cell-y) var(--vnl-table-cell-x);
    border-bottom: 1px solid var(--vnl-table-row-border);
    white-space: nowrap;
}

.vnl-table-el thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--vnl-table-head-bg);
    color: var(--vnl-table-head-color);
    font-size: var(--vnl-table-head-size);
    font-weight: var(--vnl-table-head-weight);
    text-transform: var(--vnl-table-head-transform);
    letter-spacing: var(--vnl-table-head-spacing);
    text-align: left;
    user-select: none;
    border-bottom-color: var(--vnl-table-border);
}

.vnl-table-el tbody tr:last-child td {
    border-bottom: 0;
}

/* ── Alt toplam satırı ──
   Yapışkan: uzun listede gövde kaydırılırken toplam gözden kaybolmasın.
   Başlığın aynası olduğu için aynı zemini alır. */

.vnl-table-el tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--vnl-table-head-bg);
    border-top: 1px solid var(--vnl-table-border);
    border-bottom: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* "Toplam" yazısı sayının kendisi kadar önemli değil. */
.vnl-table-el tfoot th.vnl-tf-label {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

/* Şerit — skin'den bağımsız çalışır, rengi skin sağlar.
   Hover kuralından ÖNCE gelir ki üzerine gelince hover kazansın. */
.vnl-table.vnl-striped .vnl-table-el tbody tr:nth-child(even) td {
    background: var(--vnl-table-stripe-bg);
}

.vnl-table-el tbody tr:hover td {
    background: var(--vnl-table-hover-bg);
}

/* ── Sabit sütunlar ──
   Katman sırası önemli: sabit başlık hücresi hem yatay hem dikey
   kaydırmada üstte kalmalı, yoksa altından geçen gövde onu örtüyor.
     normal td  → yok      sabit td   → 2
     normal th  → 3        sabit th   → 4
   Yapışkan hücre saydam olamaz: altından veri geçer. */

.vnl-table-el .vnl-pin-left,
.vnl-table-el .vnl-pin-right {
    position: sticky;
    z-index: 2;
    background: var(--vnl-surface, var(--bs-body-bg));
}

.vnl-table-el thead .vnl-pin-left,
.vnl-table-el thead .vnl-pin-right,
.vnl-table-el tfoot .vnl-pin-left,
.vnl-table-el tfoot .vnl-pin-right {
    z-index: 4;
    background: var(--vnl-table-head-bg);
}

/* Şerit ve hover renkleri saydamdır; sabit sütunda oldukları gibi
   kullanılamaz, altlarından veri geçer. Bu yüzden opak zeminin ÜSTÜNE
   ayrı bir katman olarak bindirilirler — color-mix bunu yapamaz, o
   iki rengi karıştırır, birini diğerinin üstüne koymaz. */
.vnl-table.vnl-striped .vnl-table-el tbody tr:nth-child(even) :is(.vnl-pin-left, .vnl-pin-right) {
    background:
        linear-gradient(var(--vnl-table-stripe-bg), var(--vnl-table-stripe-bg)),
        var(--vnl-surface, var(--bs-body-bg));
}

.vnl-table-el tbody tr:hover :is(.vnl-pin-left, .vnl-pin-right) {
    background:
        linear-gradient(var(--vnl-table-hover-bg), var(--vnl-table-hover-bg)),
        var(--vnl-surface, var(--bs-body-bg));
}

/* Dikiş: kaydırılan alanla arasındaki sınır belli olsun. */
.vnl-table-el .vnl-pin-left.vnl-pin-edge {
    box-shadow: 6px 0 6px -6px rgba(0, 0, 0, .25);
}

.vnl-table-el .vnl-pin-right.vnl-pin-edge {
    box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .25);
}

/* ── Gruplama ── */

.vnl-group-row {
    cursor: pointer;
}

.vnl-group-row > td {
    padding: 0;
    background: var(--vnl-table-head-bg);
    border-bottom: 1px solid var(--vnl-table-border);
}

.vnl-group-row:hover > td {
    background: var(--vnl-table-hover-bg);
}

/* Yatay kaydırmada grup başlığı yerinde kalsın: geniş tabloda sağa
   kayınca hangi grupta olduğun kayboluyordu. */
.vnl-group-inner {
    position: sticky;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: var(--vnl-table-cell-y) var(--vnl-table-cell-x);
    white-space: nowrap;
}

.vnl-group-caret {
    flex: none;
    width: .7em;
    color: var(--vnl-table-accent);
    transition: transform .15s;
}

.vnl-group-caret::after {
    content: "▸";
}

.vnl-group-open .vnl-group-caret {
    transform: rotate(90deg);
}

.vnl-group-key {
    font-weight: 600;
}

.vnl-group-count {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

/* Grup alt toplamları: değer okunur, etiket geride durur. */
.vnl-group-total {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vnl-table-accent) 12%, transparent);
    font-size: .75rem;
}

.vnl-group-total-label {
    color: var(--bs-secondary-color);
}

.vnl-group-total-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Girinti seviyeye göre: her satır kendi derinliğini --vnl-depth ile
   taşır, hiyerarşi tek bakışta okunur. */
.vnl-group-inner,
.vnl-group-member > td:first-child,
.vnl-group-note > td {
    padding-left: calc(var(--vnl-table-cell-x) + var(--vnl-depth, 0) * 1.1rem);
}

.vnl-group-note > td {
    padding-top: .25rem;
    padding-bottom: .25rem;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

/* Alt seviyeler biraz daha sönük: üsttekiler baskın kalsın. */
.vnl-group-row[style*="--vnl-depth: 1"] > td,
.vnl-group-row[style*="--vnl-depth: 2"] > td,
.vnl-group-row[style*="--vnl-depth: 3"] > td {
    background: color-mix(in srgb, var(--vnl-table-head-bg) 55%, var(--vnl-surface, var(--bs-body-bg)));
}

/* Çok seviyede hangi sütunun grubu olduğu yazılır. */
.vnl-group-col {
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.vnl-group-col::after {
    content: ":";
}

/* Bırakma alanındaki seviye numarası */
.vnl-group-chip-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1em;
    height: 1.1em;
    margin-right: .1rem;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 20%, transparent);
    font-size: .6875rem;
    font-weight: 700;
}

.vnl-group-menu-level {
    margin-left: auto;
    color: var(--vnl-bench, var(--vnl-table-accent));
    font-size: .75rem;
    font-weight: 700;
}

.vnl-group-menu-clear {
    margin-top: .25rem;
    border-top: 1px solid var(--vnl-table-border);
    border-radius: 0;
    padding-top: .45rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.vnl-table-group-menu {
    min-width: 180px;
    padding: .4rem;
}

.vnl-table-group-menu .dropdown-item {
    border-radius: .3rem;
    cursor: pointer;
}

.vnl-table-actions .btn.vnl-group-on {
    color: var(--vnl-table-accent);
}

/* Hizalama — sütun tipinden türetilir */
.vnl-align-right  { text-align: right; }
.vnl-align-center { text-align: center; }
.vnl-align-left   { text-align: left; }

/* ── Hücre biçimlendiricileri ──
   Sütun 'format' bildirdiğinde hücre ham metin yerine bu düğümleri taşır.
   Renk sınıfları (badge-soft-*, text-*) temadan gelir; buradaki kurallar
   yalnız hizalama ve ölçü işini yapar. */

.vnl-cell-dot-wrap,
.vnl-cell-icon,
.vnl-cell-bool,
.vnl-table-el td.vnl-cell-formatted > .badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    vertical-align: middle;
}

/* Nokta rengini metin renginden alır: text-success, text-danger… */
.vnl-cell-dot {
    width: .5rem;
    height: .5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.vnl-cell-link {
    color: var(--vnl-table-accent, inherit);
    text-decoration: none;
}

.vnl-cell-link:hover {
    text-decoration: underline;
}


/* ── İkonlar ──
   Yalnızca ikon taşıyan düğmeler kare kalsın; metin karşılığı title ve
   aria-label'da durur. Emoji'ye düşüldüğünde de aynı ölçü korunur. */

.vnl-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    line-height: 1;
}

/* Anahat ikon fontları küçük boyda metnin yanında zayıf kalıyor:
   biraz büyütülür ve konturla ağırlık kazandırılır. */
i.vnl-icon {
    font-size: .95rem;
    line-height: 1;
    -webkit-text-stroke: .35px currentColor;
}

.vnl-icon-text {
    font-family: inherit;   /* emoji yedeği: metin olarak basılır */
    font-size: 1.05em;
    line-height: 1;
}

/* Klavyeyle gezinme görünür olsun */
.vnl-table :is(button, input, select):focus-visible {
    outline: 2px solid var(--vnl-table-accent);
    outline-offset: 2px;
}

/* ── Sıralama ── */

.vnl-th.vnl-sortable {
    cursor: pointer;
}

.vnl-th.vnl-sortable:hover {
    color: var(--vnl-table-accent);
}

/* Ok başlıkları kalabalıklaştırmasın: yalnız üzerine gelince belirir;
   aktif sıralı sütunda kalıcıdır — yön bilgisi kaybolmaz. */
.vnl-sort-mark {
    display: inline-block;
    width: .75em;
    margin-left: .35em;
    opacity: 0;
    transition: opacity .15s;
}

.vnl-th.vnl-sortable:hover .vnl-sort-mark {
    opacity: .45;
}

.vnl-sort-mark::after {
    content: "↕";
}

.vnl-th.vnl-sort-asc .vnl-sort-mark,
.vnl-th.vnl-sort-desc .vnl-sort-mark {
    opacity: 1;
    color: var(--vnl-table-accent);
}

.vnl-th.vnl-sort-asc .vnl-sort-mark::after  { content: "↑"; }
.vnl-th.vnl-sort-desc .vnl-sort-mark::after { content: "↓"; }

/* Çoklu sıralamada öncelik numarası. Boşken hiç yer kaplamaz:
   tek anahtarlı sıralamada başlıkta bir şey değişmez. */
.vnl-sort-order:not(:empty) {
    display: inline-block;
    min-width: 1.05em;
    margin-left: .1em;
    padding: 0 .2em;
    border-radius: .25rem;
    background: color-mix(in srgb, var(--vnl-table-accent) 18%, transparent);
    color: var(--vnl-table-accent);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

/* ── Başlık iç düzeni ──
   Huni, hizalama ne olursa olsun etiketin peşinde kalsın diye başlık
   içeriği bir flex satırıdır. th'nin kendisi flex yapılamaz: tarayıcı
   sütun genişliğini hesaplarken flex kutusunu başka ölçüyor ve
   sütunlar veri geldikçe zıplıyordu. */

.vnl-th-inner {
    display: flex;
    align-items: center;
    gap: .1rem;
    min-width: 0;
}

.vnl-align-center .vnl-th-inner { justify-content: center; }
.vnl-align-right  .vnl-th-inner { justify-content: flex-end; }

.vnl-th-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sütun filtresi: başlıktaki huni ── */

.vnl-th-filter {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: .15rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: inherit;
    cursor: pointer;

    /* Sıralama okuyla aynı davranış: başlığı kalabalıklaştırmasın, üzerine
       gelince belirsin. Filtre uygulanmışsa kalıcı — bilgi kaybolmaz. */
    opacity: 0;
    transition: opacity .15s, background-color .15s;
}

.vnl-th:hover .vnl-th-filter,
.vnl-th-filter:focus-visible,
.vnl-th.vnl-filter-on .vnl-th-filter {
    opacity: 1;
}

.vnl-th-filter:hover {
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.vnl-th.vnl-filter-on .vnl-th-filter {
    color: var(--vnl-table-accent);
}

.vnl-th-filter .vnl-icon {
    font-size: .8rem;
}

/* Dokunmatikte hover yok: huni sürekli ama soluk durur. */
@media (hover: none) {
    .vnl-th-filter { opacity: .5; }
}

/* ── Filtre paneli ──
   <body>'de ve position:fixed: tablonun kaydırma kabı onu kırpmasın.
   z-index Bootstrap modalinin (1055) üstünde — modal içindeki bir
   tablonun paneli arkada kalmasın. */

.vnl-filter-panel {
    position: fixed;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    width: 15rem;
    max-width: calc(100vw - 1rem);
    background: var(--vnl-surface, var(--bs-body-bg));
    border: 1px solid var(--vnl-table-border);
    border-radius: var(--vnl-table-radius);
    box-shadow: var(--vnl-raised-shadow, 0 10px 30px rgba(0, 0, 0, .18));
    color: var(--bs-body-color);
    font-size: .8125rem;
}

/* .form-control display:block, [hidden]'ı özgüllükle yener; koşul
   kutuları gizlenemiyordu. */
.vnl-filter-panel [hidden] {
    display: none;
}

.vnl-filter-panel > * + * {
    border-top: 1px solid var(--vnl-table-border);
}

.vnl-filter-values,
.vnl-filter-cond,
.vnl-filter-actions {
    padding: .5rem;
}

.vnl-filter-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: .35rem;
}

.vnl-filter-search .vnl-icon {
    position: absolute;
    left: .55rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    pointer-events: none;
}

.vnl-filter-search input {
    width: 100%;
    padding-left: 1.9rem;
    font-size: .8125rem;
}

.vnl-filter-list {
    max-height: 13rem;
    overflow-y: auto;
    overscroll-behavior: contain;   /* liste bitince sayfa kaymasın */
}

.vnl-filter-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .25rem .35rem;
    border-radius: .25rem;
    cursor: pointer;
}

.vnl-filter-item:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.vnl-filter-item .form-check-input {
    flex: none;
    margin: 0;
}

.vnl-filter-item-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vnl-filter-all .vnl-filter-item-label {
    font-weight: 600;
}

/* Kayıt sayısı ikincil: göz değeri okurken ona takılmasın. */
.vnl-filter-item-count {
    flex: none;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.vnl-filter-empty {
    padding: .75rem .35rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    text-align: center;
}

.vnl-filter-empty.vnl-table-error {
    color: var(--bs-danger);
}

.vnl-filter-note {
    padding: .4rem .35rem 0;
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.vnl-filter-title {
    margin-bottom: .35rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
}

.vnl-filter-cond select,
.vnl-filter-cond input {
    width: 100%;
    font-size: .8125rem;
}

.vnl-filter-cond select + input,
.vnl-filter-cond input + input {
    margin-top: .35rem;
}

.vnl-filter-actions {
    display: flex;
    gap: .5rem;
}

.vnl-filter-actions .btn {
    flex: 1 1 0;
    font-size: .8125rem;
}

/* ── Sütun göster/gizle menüsü ── */

.vnl-table-columns-menu {
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: .4rem;
}

.vnl-table-columns-menu .dropdown-item {
    border-radius: .3rem;
    cursor: pointer;
}

/* ── Yükleme katmanı ──
   Satırlar silinmez: yerinde durur, bulanıklaşır, üstüne katman gelir.
   Eski davranışta tbody tek geniş hücreyle değiştiriliyor ve sütun
   genişlikleri çöküyordu. */

.vnl-table-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--vnl-surface, var(--bs-body-bg)) 55%, transparent);
    pointer-events: none;   /* katman açıkken tıklama engellenir */
}

.vnl-table.vnl-is-loading .vnl-table-overlay {
    display: flex;
    pointer-events: auto;
}

.vnl-table-overlay-text {
    padding: .4rem .9rem;
    border-radius: 999px;
    background: var(--vnl-surface-raised, var(--bs-tertiary-bg));
    border: 1px solid var(--vnl-table-border);
    box-shadow: var(--vnl-raised-shadow, 0 2px 10px rgba(0, 0, 0, .15));
    font-size: .8125rem;
    color: var(--bs-body-color);
}

.vnl-table.vnl-is-loading .vnl-table-el tbody {
    filter: blur(2px);
    opacity: .55;
    transition: filter .15s, opacity .15s;
}

/* Başlık net kalır: sütunlar okunur durumda kalsın diye bulanıklaşmaz. */

/* ── Boş / hata ── */

.vnl-table-message {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    white-space: normal;
}

.vnl-table-message.vnl-table-error {
    color: var(--bs-danger);
}

/* ── Alt bilgi ── */

.vnl-table-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .75rem;
    border-top: 1px solid var(--vnl-table-border);
}

.vnl-table-size select {
    width: auto;
}

.vnl-table-info {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.vnl-table-pager {
    display: flex;
    gap: .25rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* ================================================================
   Mod: workbench

   Başlık şeridi mavileşir. Skin'den BAĞIMSIZDIR: hangi skin seçilirse
   seçilsin workbench başka bir alet olduğunu ilk bakışta söylesin.
   Renk zemine karıştırılarak üretiliyor, o yüzden koyu temada da
   kendiliğinden oturur — sabit bir mavi orada parlıyordu.

   Vurgu rengi (yeşil) yerinde kalır: çip, sayfalama ve huni onu
   kullanmayı sürdürür, mavi yalnız başlık şeridinin işaretidir.
   ================================================================ */

.vnl-table.vnl-mode-workbench {
    --vnl-bench: var(--vnl-bench-accent, #2f6fed);

    --vnl-table-head-bg:     color-mix(in srgb, var(--vnl-bench) 12%, var(--vnl-surface, var(--bs-body-bg)));
    --vnl-table-head-color:  color-mix(in srgb, var(--vnl-bench) 55%, var(--bs-body-color));
    --vnl-table-head-weight: 600;
}

.vnl-table.vnl-mode-workbench .vnl-table-el thead th {
    border-bottom-color: color-mix(in srgb, var(--vnl-bench) 35%, transparent);
}

/* Başlık içindeki işaretler de şeride uyar; huni ve sıralama oku
   yeşil kalsaydı mavi zeminde yamalı duruyordu. */
.vnl-table.vnl-mode-workbench .vnl-th.vnl-sort-asc .vnl-sort-mark,
.vnl-table.vnl-mode-workbench .vnl-th.vnl-sort-desc .vnl-sort-mark,
.vnl-table.vnl-mode-workbench .vnl-th.vnl-filter-on .vnl-th-filter {
    color: var(--vnl-bench);
}

.vnl-table.vnl-mode-workbench .vnl-sort-order:not(:empty) {
    background: color-mix(in srgb, var(--vnl-bench) 22%, transparent);
    color: color-mix(in srgb, var(--vnl-bench) 70%, var(--bs-body-color));
}

/* Grup satırı ve toplam satırı da başlık zeminini kullanıyor. */
.vnl-table.vnl-mode-workbench .vnl-group-total {
    background: color-mix(in srgb, var(--vnl-bench) 14%, transparent);
}

.vnl-table.vnl-mode-workbench .vnl-group-caret {
    color: var(--vnl-bench);
}

/* ── Gruplama bırakma alanı ── */

.vnl-group-zone {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    margin: .5rem .75rem;
    padding: .35rem .6rem;
    border: 1px dashed color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 40%, transparent);
    border-radius: var(--vnl-table-radius);
    transition: background-color .15s, border-color .15s;
}

.vnl-group-zone-hint {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

/* Sürükleme başlayınca alan belirginleşir: nereye bırakılacağı belli olsun. */
.vnl-table.vnl-dragging .vnl-group-zone {
    border-color: var(--vnl-bench, var(--vnl-table-accent));
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 6%, transparent);
}

.vnl-group-zone-over {
    border-style: solid;
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 14%, transparent) !important;
}

/* Gruplama açıkken kesik çizgiye gerek yok, rozet zaten anlatıyor. */
.vnl-group-zone-on {
    border-style: solid;
    border-color: var(--vnl-table-border);
}

.vnl-group-zone .vnl-chip {
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 14%, transparent);
}

/* Sürüklenebilir başlık yazısı */
.vnl-th-drag {
    cursor: grab;
}

.vnl-th-drag:active {
    cursor: grabbing;
}

/* Gruplanamayan bir sütun sürüklenirken bırakma alanı sessiz kalır:
   oraya bırakmanın bir işe yaramayacağı önceden görünsün. */
.vnl-table.vnl-dragging:not(.vnl-dragging-groupable) .vnl-group-zone {
    opacity: .45;
    border-color: var(--vnl-table-border);
    background: transparent;
}

/* ── Sütun sırası ──
   İmleç başlığın hangi yarısındaysa çizgi o kenara düşer: sütunun
   öncesine mi sonrasına mı gireceği bırakmadan önce belli olsun. */

.vnl-drop-before,
.vnl-drop-after {
    position: relative;
}

.vnl-drop-before::after,
.vnl-drop-after::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--vnl-bench, var(--vnl-table-accent));
}

.vnl-drop-before::after { left: 0; }
.vnl-drop-after::after  { right: 0; }

/* ── Çapraz tablo ── */

.vnl-pivot-bar {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--vnl-table-border);
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 6%, transparent);
}

.vnl-pivot-field {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
}

.vnl-pivot-label {
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.vnl-pivot-field select {
    min-width: 8rem;
    font-size: .8125rem;
}

.vnl-table-actions .btn.vnl-pivot-on {
    color: var(--vnl-bench, var(--vnl-table-accent));
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 14%, transparent);
}

/* Satır ekseninin anahtarı sol sütunda ve yapışkan: geniş bir matriste
   sağa kayınca hangi satırda olduğun kaybolmasın. */
.vnl-pivot-key,
.vnl-pivot-corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--vnl-surface, var(--bs-body-bg));
    font-weight: 600;
}

.vnl-pivot-corner {
    z-index: 4;
    background: var(--vnl-table-head-bg);
}

/* Toplam satırı ve sütunu ölçülerden ayrılır. */
.vnl-pivot-sum {
    font-weight: 700;
    background: color-mix(in srgb, currentColor 4%, transparent);
}

/* Pivot görünümünde satır makinesi yok: seçim, gruplama ve detay
   denetimleri gizlenir, yanlış bir şey vaat etmesinler. */
.vnl-pivot-view .vnl-group-zone,
.vnl-pivot-view .vnl-table-selection,
.vnl-pivot-view .vnl-table-chips {
    display: none;
}

.vnl-columns-reset {
    margin-top: .25rem;
    border-top: 1px solid var(--vnl-table-border);
    border-radius: 0;
    padding-top: .45rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

/* ── Hücre düzenleme ──
   Düzenlenebilir hücre kendini belli eder ama bağırmaz: alt kenarda
   kesik bir çizgi, üzerine gelince zemin. */

.vnl-editable {
    cursor: text;
    box-shadow: inset 0 -1px 0 0 color-mix(in srgb, currentColor 20%, transparent);
}

.vnl-editable:hover {
    background: color-mix(in srgb, var(--vnl-bench, var(--vnl-table-accent)) 8%, transparent);
}

.vnl-editable.vnl-editing {
    padding: 0;
    box-shadow: none;
}

.vnl-editing :is(input, select) {
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: inherit;
}

/* Kaydederken hücre bekleme durumuna geçer; başarıda kısa bir onay,
   hatada eski değere dönüş. */
.vnl-saving {
    opacity: .5;
}

.vnl-saved {
    background: color-mix(in srgb, var(--bs-success, #04ab61) 22%, transparent);
    transition: background-color .6s;
}

.vnl-save-failed {
    background: color-mix(in srgb, var(--bs-danger) 22%, transparent);
    transition: background-color .8s;
}

/* ================================================================
   Skin: modern

   Ayrım çizgiden değil boşluktan gelir. Başlık kendi zeminini bırakır,
   tek saç teli çizgiyle ayrılır; satır çizgisi yoktur. Vurgu rengi
   yalnızca iki yerde görünür: sıralanan sütun ve aktif sayfa.
   Şerit ve hover bilinçli olarak nötrdür — vurgu tonuyla boyanınca
   satırlar "seçilmiş" gibi okunuyordu.
   ================================================================ */

.vnl-table.vnl-skin-modern,
.vnl-filter-panel.vnl-skin-modern {
    --vnl-table-head-bg:        var(--vnl-surface, var(--bs-body-bg));
    --vnl-table-head-color:     var(--bs-secondary-color);
    --vnl-table-head-size:      .8125rem;
    --vnl-table-head-weight:    500;
    --vnl-table-head-transform: none;
    --vnl-table-head-spacing:   normal;
    --vnl-table-row-border:     transparent;
    --vnl-table-cell-y:         .95rem;
    --vnl-table-cell-x:         1rem;
    --vnl-table-stripe-bg:      color-mix(in srgb, currentColor 3%, transparent);
    --vnl-table-hover-bg:       color-mix(in srgb, currentColor 7%, transparent);
    --vnl-table-radius:         .75rem;
}

/* Tek saç teli; 2px çizgi tabloyu ikiye bölüyordu. */
.vnl-table.vnl-skin-modern .vnl-table-el thead th {
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding-bottom: .7rem;
}

/* Satırın çıpası: ilk sütun biraz daha ağır, gözün tutunacağı yer. */
.vnl-table.vnl-skin-modern .vnl-table-el tbody td:first-child {
    font-weight: 500;
    color: var(--bs-body-color);
}

/* Sıralanan sütunun başlığı vurguya döner — rengin göründüğü tek yer. */
.vnl-table.vnl-skin-modern .vnl-th.vnl-sort-asc,
.vnl-table.vnl-skin-modern .vnl-th.vnl-sort-desc {
    color: var(--vnl-table-accent);
}

/* Araç çubuğu, çipler ve alt bilgi çizgisiz: tablo tek bir yüzey gibi okunsun. */
.vnl-table.vnl-skin-modern .vnl-table-toolbar,
.vnl-table.vnl-skin-modern .vnl-table-chips,
.vnl-table.vnl-skin-modern .vnl-table-footer {
    border-color: transparent;
    padding: .9rem 1rem;
}

/* Araç çubuğu çipleri hemen altında: aradaki dolgu ikiye katlanmasın. */
.vnl-table.vnl-skin-modern .vnl-table-chips {
    padding-top: 0;
}

/* Toplam satırı da çizgisiz; ayrım boşluktan gelir. */
.vnl-table.vnl-skin-modern .vnl-table-el tfoot th {
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding-top: .7rem;
}

/* Araç çubuğu düğmeleri de kutusuz: modern'de hiçbir denetim çerçeveli
   değil, tek başına kalan bir kutu dilin dışına düşüyordu. */
.vnl-table.vnl-skin-modern .vnl-table-actions .btn {
    border-color: transparent;
    background: transparent;
    color: var(--bs-secondary-color);
}

.vnl-table.vnl-skin-modern .vnl-table-actions .btn:hover:not(:disabled),
.vnl-table.vnl-skin-modern .vnl-table-actions .btn.show {
    background: var(--vnl-table-hover-bg);
    color: var(--bs-body-color);
}

/* Excel dolu yeşil yerine vurgu renginde ikon: tek vurgulu eylem. */
.vnl-table.vnl-skin-modern .vnl-table-actions .btn-success {
    color: var(--vnl-table-accent);
}

/* Hover zemini NÖTR olmalı: vurgu tonlu zemin, vurgu renkli glifle
   birleşince yeşil üstüne yeşil oluyor ve ikon kayboluyordu.
   --vnl-table-hover-bg burada kullanılamaz — currentColor'dan türüyor ve
   bu düğmede currentColor zaten vurgu rengi. */
.vnl-table.vnl-skin-modern .vnl-table-actions .btn-success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bs-body-color) 8%, transparent);
    color: var(--vnl-table-accent);
}

/* Arama ve sayfa boyu: çerçeve yerine hafif zemin.
   background KISAYOLU KULLANILMAZ — form-select okunu background-image
   olarak taşıyor, kısayol onu siler ve açılır ok kaybolurdu. */
.vnl-table.vnl-skin-modern .vnl-table-search,
.vnl-table.vnl-skin-modern .vnl-table-size select {
    border-color: transparent;
    background-color: var(--vnl-table-stripe-bg);
}

.vnl-table.vnl-skin-modern .vnl-table-search:focus,
.vnl-table.vnl-skin-modern .vnl-table-size select:focus {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--vnl-table-accent) 45%, transparent);
    box-shadow: none;
}

/* Sayfalama kutulardan çıkar; ağırlık aktif sayfada toplanır. */
.vnl-table.vnl-skin-modern .vnl-table-pager .btn {
    border-color: transparent;
    background: transparent;
    color: var(--bs-secondary-color);
    min-width: 2rem;
    padding: .25rem .5rem;
}

.vnl-table.vnl-skin-modern .vnl-table-pager .btn:hover:not(:disabled) {
    background: var(--vnl-table-hover-bg);
    color: var(--bs-body-color);
}

.vnl-table.vnl-skin-modern .vnl-table-pager .btn-primary {
    background: color-mix(in srgb, var(--vnl-table-accent) 16%, transparent);
    color: var(--vnl-table-accent);
    font-weight: 600;
}

.vnl-table.vnl-skin-modern .vnl-table-pager .btn:disabled {
    opacity: .35;
}

/* ================================================================
   Skin: compact
   Yoğun ERP listeleri için; ekrana daha çok satır sığar.
   ================================================================ */

.vnl-table.vnl-skin-compact,
.vnl-filter-panel.vnl-skin-compact {
    --vnl-table-cell-y:    .25rem;
    --vnl-table-cell-x:    .5rem;
    --vnl-table-font-size: .8125rem;
    --vnl-table-head-size: .75rem;
}

.vnl-table.vnl-skin-compact .vnl-table-toolbar,
.vnl-table.vnl-skin-compact .vnl-table-chips,
.vnl-table.vnl-skin-compact .vnl-table-footer {
    padding: .5rem;
}

/* ── Dar ekran ── */

@media (max-width: 576px) {
    .vnl-table-search-wrap {
        flex: 1 1 100%;
    }

    .vnl-table-actions,
    .vnl-table-pager {
        margin-left: 0;
    }

    .vnl-table-info {
        width: 100%;
        order: 3;
    }
}

/* Hareket azaltma tercihi — tablonun bütün geçişleri birlikte susar,
   yarısı animasyonlu yarısı ani kalmaz. */
@media (prefers-reduced-motion: reduce) {
    .vnl-table.vnl-is-loading .vnl-table-el tbody,
    .vnl-th-filter,
    .vnl-sort-mark,
    .vnl-group-caret,
    .vnl-group-zone,
    .vnl-saved,
    .vnl-save-failed {
        transition: none;
    }

    /* Ok yine de yönünü gösterir, sadece dönerek gitmez. */
    .vnl-group-open .vnl-group-caret {
        transform: none;
    }

    .vnl-group-open .vnl-group-caret::after {
        content: "▾";
    }
}