{{-- Boşluğa tıklama kartları KAPATMAZ: hepsini simge durumuna alır (veri/durum kaybı olmaz) --}}
<div id="quickViewOverlay" class="qv-drawer-overlay" onclick="minimizeAllQuickViews()"></div>
<div id="quickViewDrawer" class="qv-drawer">
    <div id="quickViewLoader" class="qv-drawer-loader">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Yükleniyor...</span>
        </div>
    </div>
    {{-- Bitrix tarzı aksiyon rayı: TEK slim kart açıkken standart aksiyonlar kartın
         SOL DIŞINDA dikey kolon olarak durur (updateActionRail yönetir). Yığın varken
         pasif kartlar tam bu hizaya taştığından ray gizlenir ve butonlar header'a döner. --}}
    <div id="qvActionRail" class="qv-action-rail" hidden>
        <button type="button" class="qv-rail-b qv-rail-close" onclick="closeQuickView()" title="Kapat"><i class="fas fa-times"></i></button>
        <button type="button" class="qv-rail-b" onclick="minimizeQuickView()" title="Küçült"><i class="fas fa-minus"></i></button>
        <button type="button" class="qv-rail-b" onclick="copyQvLink()" title="Bağlantıyı kopyala"><i class="fas fa-link"></i></button>
        <button type="button" class="qv-rail-b qv-rail-share" onclick="openQvShare()" title="Mesaj olarak gönder"><i class="fas fa-paper-plane"></i></button>
    </div>
    <div id="quickViewContainers" class="qv-containers-stack"></div>
</div>

<div id="qvMinimizedStack" class="qv-minimized-stack"></div>

{{-- Paylaşım modalı: çoklu kişi seçimi + modül linki gönder (buton her quick-view header'ında) --}}
<div id="qvShareModal" class="qv-share-modal">
    <div class="qv-share-card">
        <div class="qv-share-head">
            <span><i class="fas fa-share-nodes me-2"></i>Mesaj Olarak Gönder</span>
            <button type="button" class="qv-share-x" onclick="closeQvShare()"><i class="fas fa-xmark"></i></button>
        </div>
        <div class="qv-share-preview" id="qvSharePreview"></div>
        <div class="qv-share-search">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" id="qvShareSearch" placeholder="Kişi ara (isim / e-posta)…" autocomplete="off">
        </div>
        <div class="qv-share-list" id="qvShareList"></div>
        <textarea id="qvShareBody" class="qv-share-body" rows="2" placeholder="Not ekle (opsiyonel)…"></textarea>
        <div class="qv-share-foot">
            <span class="qv-share-count" id="qvShareCount">0 kişi seçili</span>
            <button type="button" class="qv-share-send" id="qvShareSend" onclick="sendQvShare()" disabled>
                <i class="fas fa-paper-plane me-1"></i> Gönder
            </button>
        </div>
    </div>
</div>

<style>
/* ── Anlık düzenleme (inline edit) — tüm quick-view alanları ── */
.inline-editable { cursor: pointer; border-radius: 8px; transition: background .15s, box-shadow .15s; }
.inline-editable:not(.editing):hover { background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; }
.inline-editable:not(.editing):hover::after {
    content: '\f304'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .6rem; color: #2563eb; margin-left: 7px; opacity: .5; vertical-align: middle;
}
.inline-editable.editing { background: transparent !important; box-shadow: none !important; }
.inline-editable.editing::after { content: none; }

/* ── Quick-view başlığı: tüm kartlarda tek tıkla-düzenle kalıbı ──
   Renkler currentColor'dan türetilir → açık header (müşteri/ürün) ve
   koyu/renkli header (satış/ödeme) aynı bileşenle doğru görünür. */
.qv-etitle {
    display: inline-block;
    max-width: 100%;
    margin-left: -8px;
    padding: 1px 8px;
    border-radius: 10px;
    cursor: text;
    transition: background .16s, box-shadow .16s;
}
/* Üretilmiş (kaydedilmemiş) ad: soluk — kullanıcı neyin otomatik olduğunu görür */
.qv-etitle.is-auto { opacity: .58; font-weight: 700; }
.qv-etitle:not(.editing):hover,
.qv-etitle:not(.editing):focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent);
    outline: none;
}
.qv-etitle:not(.editing):hover::after,
.qv-etitle:not(.editing):focus-visible::after {
    content: '\f304'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .58rem; opacity: .5; margin-left: 9px; vertical-align: middle;
}
.qv-etitle.editing {
    display: block;
    margin-left: 0; padding: 0; overflow: visible;
    background: none !important; box-shadow: none !important;
}
.qv-etitle-input {
    display: block; width: 100%; margin: 0;
    font: inherit; color: inherit; letter-spacing: inherit;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 10px; padding: 1px 9px; outline: none;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.qv-etitle-input::placeholder { color: inherit; opacity: .45; font-weight: 600; }
/* Kaydediliyor / kaydedildi / hata — hover kalemini ezmesi için hover kuralından SONRA */
.qv-etitle.is-saving { opacity: .6; }
.qv-etitle.is-saving::after,
.qv-etitle:not(.editing):hover.is-saving::after {
    content: '\f110'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .58rem; opacity: .8; margin-left: 9px; vertical-align: middle;
    display: inline-block; animation: qvEtitleSpin .9s linear infinite;
}
.qv-etitle.is-saved::after,
.qv-etitle:not(.editing):hover.is-saved::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: #10b981; font-size: .58rem; opacity: 1; margin-left: 9px; vertical-align: middle;
}
.qv-etitle.is-error {
    box-shadow: inset 0 0 0 1.5px #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
}
@keyframes qvEtitleSpin { to { transform: rotate(360deg); } }

/* ── Drawer içinde alan düzeni: tüm etiketli alanlar alt alta, tam genişlik ──
   Modül desenleri: .qv-detail-field (müşteri/kaynak), .sqv-field (satış),
   .pqv-item (ürünler), .mb-3 > .inline-editable (tedarikçi) */
#quickViewDrawer [class*="col-"]:has(> .qv-detail-field),
#quickViewDrawer [class*="col-"]:has(> .sqv-field) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
#quickViewDrawer .qv-detail-field-group { grid-template-columns: 1fr !important; }
#quickViewDrawer .pqv-grid { grid-template-columns: 1fr !important; }

/* Etiketli alanlardaki düzenlenebilir değerler: tam genişlik "property" kutusu —
   düzenlenebilirlik bakışta belli olur, tıklama alanı büyür */
#quickViewDrawer :is(.qv-detail-field, .sqv-field, .pqv-item, .mb-3, .mb-2) > .inline-editable {
    position: relative;
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 11px 40px 11px 14px;
    background: #fff;
    border: 1.5px solid #e8edf4;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .16s, background .16s, box-shadow .16s;
}
#quickViewDrawer :is(.qv-detail-field, .sqv-field, .pqv-item, .mb-3, .mb-2) > .inline-editable:not(.editing):hover {
    background: #f8fbff;
    border-color: #93c5fd;
    box-shadow: 0 3px 10px -4px rgba(37, 99, 235, .25);
}
#quickViewDrawer :is(.qv-detail-field, .sqv-field, .pqv-item, .mb-3, .mb-2) > .inline-editable:not(.editing):hover::after {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: .68rem;
    opacity: .65;
}
/* Düzenleme anında kutu şeffaflaşır; input kendi çerçevesiyle kutuyu doldurur */
#quickViewDrawer :is(.qv-detail-field, .sqv-field, .pqv-item, .mb-3, .mb-2) > .inline-editable.editing {
    padding: 0;
    border-color: transparent;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible;
}

.qv-inline-input {
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
    width: 100%;
    display: block;
    min-width: 0;
    max-width: 100%;
    padding: 11px 14px;
    margin: 0;
    border: 1.5px solid #2563eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 8px 22px -6px rgba(15, 23, 42, .12);
    outline: none;
    vertical-align: middle;
    transition: box-shadow .15s, border-color .15s;
    -webkit-appearance: none;
    appearance: none;
    animation: qvInputIn .16s cubic-bezier(.16, 1, .3, 1);
}
@keyframes qvInputIn {
    from { opacity: 0; transform: translateY(3px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.qv-inline-input:focus { border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 10px 26px -8px rgba(15, 23, 42, .16); }
.qv-inline-input::placeholder { color: #94a3b8; font-weight: 500; }

/* Select: appearance:none tarayıcı okunu siliyordu — kendi okumuzu çiziyoruz,
   aksi halde alan düz metin kutusu gibi görünüp açılır liste fark edilmiyordu. */
select.qv-inline-input {
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232563eb' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 11px;
}
select.qv-inline-input option { font-weight: 600; color: #0f172a; padding: 6px; }
/* Boş seçenek listesi (tanımsız options) fark edilsin */
select.qv-inline-input:empty { border-color: #f59e0b; }

textarea.qv-inline-input { min-height: 96px; resize: vertical; line-height: 1.55; }
input[data-dtp].qv-inline-input { cursor: pointer; }

/* ── Quick-view "Mesaj olarak gönder" ── */
.qv-share-bar { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1053; }
.qv-share-open { display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-weight:700; font-size:.85rem;
    color:#fff; background:linear-gradient(135deg,#4f46e5,#7c3aed); padding:11px 18px; border-radius:14px;
    box-shadow:0 12px 28px -8px rgba(79,70,229,.55); transition:transform .15s, box-shadow .15s; }
.qv-share-open:hover { transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(79,70,229,.6); }

.qv-share-modal { position:fixed; inset:0; z-index:1075; background:rgba(15,23,42,.5); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; padding:20px; }
.qv-share-modal.open { display:flex; animation:qvShareFade .16s ease; }
@keyframes qvShareFade { from { opacity:0 } to { opacity:1 } }
.qv-share-card { width:460px; max-width:100%; max-height:86vh; background:#fff; border-radius:22px; overflow:hidden;
    display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(15,23,42,.4); }
.qv-share-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; font-weight:800; color:#0f172a; border-bottom:1px solid #f1f5f9; }
.qv-share-x { width:34px; height:34px; border-radius:10px; border:none; background:#f1f5f9; color:#475569; cursor:pointer; }
.qv-share-x:hover { background:#e2e8f0; }
.qv-share-preview { margin:14px 20px 4px; padding:12px 14px; border-radius:14px; background:#eef2ff; color:#4338ca; font-weight:700; font-size:.88rem;
    display:flex; align-items:center; gap:9px; }
.qv-share-preview i { font-size:1rem; }
.qv-share-search { display:flex; align-items:center; gap:10px; margin:10px 20px; padding:11px 15px; background:#f5f7fb; border:1px solid #eef1f6; border-radius:14px; color:#94a3b8; }
.qv-share-search input { border:none; background:none; outline:none; flex:1; font-size:.9rem; color:#0f172a; }
.qv-share-list { flex:1; overflow-y:auto; padding:2px 12px; min-height:120px; }
.qv-share-row { display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:13px; cursor:pointer; transition:background .14s; }
.qv-share-row:hover { background:#f5f7fb; }
.qv-share-row.sel { background:#eef2ff; }
.qv-share-av { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.82rem; flex-shrink:0; background-size:cover; background-position:center; }
.qv-share-name { flex:1; min-width:0; font-weight:700; color:#0f172a; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qv-share-check { width:22px; height:22px; border-radius:7px; border:2px solid #cbd5e1; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; transition:.14s; }
.qv-share-row.sel .qv-share-check { background:#4f46e5; border-color:#4f46e5; }
.qv-share-body { margin:6px 20px; padding:10px 14px; border:1px solid #e2e8f0; border-radius:14px; font-size:.88rem; resize:none; outline:none; font-family:inherit; }
.qv-share-body:focus { border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.qv-share-foot { display:flex; align-items:center; justify-content:space-between; padding:12px 20px 18px; gap:12px; }
.qv-share-count { font-size:.8rem; color:#64748b; font-weight:600; }
.qv-share-send { border:none; cursor:pointer; font-weight:800; font-size:.88rem; color:#fff; background:linear-gradient(135deg,#4f46e5,#7c3aed); padding:11px 22px; border-radius:12px; box-shadow:0 8px 18px -6px rgba(79,70,229,.5); }
.qv-share-send:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
textarea.qv-inline-input { width: 100%; min-height: 96px; resize: vertical; line-height: 1.55; display: block; }
select.qv-inline-input {
    width: 100%;
    padding-right: 34px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232563eb' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}

.qv-minimized-stack {
    position: fixed;
    bottom: 1rem;
    /* Sağ-alt köşeyi chat launcher'ına (sağdan ~26–88px) bırak; çubuğu onun soluna al */
    right: 104px;
    display: flex;
    align-items: center;
    /* Simgeler sıkışık dizilir; yalnızca üzerine gelinen kart açılır */
    gap: 0.35rem;
    z-index: 1052;
    pointer-events: none;
    max-width: calc(100vw - 120px);
    flex-wrap: wrap;
    justify-content: flex-end;
}
/*
   Simge durumu: kartlar varsayılan olarak yalnızca baş harf kutusu kadar
   (ikon gibi) durur, hepsi yan yana sıkışır. Fare üzerine gelince o kart
   başlığı ve kapatma düğmesiyle birlikte tam boyuta açılır.
*/
.qv-min-item {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 0.4rem;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    transition: max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                gap 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    animation: slideUpTaskbar 0.4s ease forwards;
    width: auto;
    min-width: 0;
    max-width: 44px;
    overflow: hidden;
    white-space: nowrap;
}
/* Kapalıyken başlık ve kapatma düğmesi yer kaplamaz */
.qv-min-item > .qv-min-info,
.qv-min-item > .qv-min-close {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}
.qv-min-item:hover {
    max-width: 260px;
    padding: 0.5rem 0.8rem;
    gap: 0.6rem;
    transform: translateY(-5px);
    border-color: #2563eb;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.1);
}
.qv-min-item:hover > .qv-min-info { max-width: 170px; opacity: 1; }
.qv-min-item:hover > .qv-min-close { max-width: 22px; opacity: 1; }
.qv-min-all-btn {
    width: 36px; height: 36px; border-radius: 12px; background: rgba(254, 226, 226, 0.8);
    backdrop-filter: blur(10px); border: 1px solid rgba(254, 202, 202, 0.8); color: #ef4444; 
    display: flex; align-items: center; justify-content: center; transition: all 0.2s; cursor: pointer;
}
.qv-min-all-btn:hover { background: #ef4444; color: #fff; transform: scale(1.1); }
.qv-min-avatar { width: 28px; height: 28px; border-radius: 6px; background: #eff6ff; color: #2563eb; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.7rem; flex-shrink: 0; line-height: 1; overflow: hidden; text-align: center; }
/* 28px kutuda iki satırlı tarih biraz daha küçük */
.qv-min-avatar .ha-stack b { font-size: 0.66rem; }
.qv-min-avatar .ha-stack i { font-size: 0.42rem; }
.qv-min-avatar .ha-long { font-size: 0.5rem; }
.qv-min-info { flex: 1; min-width: 0; }
.qv-min-title { font-size: 0.8rem; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qv-min-label { font-size: 0.6rem; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.02em; display: none; }
.qv-min-close { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #94a3b8; transition: all 0.2s; flex-shrink: 0; }
.qv-min-close:hover { background: #fee2e2; color: #ef4444; }

@keyframes slideUpTaskbar { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.qv-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Blur yok — arkadaki sayfa (liste/detay bilgileri) okunur kalsın, sadece hafif karart */
    background: rgba(15, 23, 42, 0.16);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.qv-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.qv-drawer {
    position: fixed;
    top: 0;
    right: -76%;
    width: 74%;
    height: 100%;
    background: transparent;
    z-index: 1051;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
@media (max-width: 1200px) {
    .qv-drawer { width: 88%; right: -90%; }
}
@media (max-width: 768px) {
    .qv-drawer { width: 100%; right: -102%; }
}
.qv-drawer.active {
    right: 0;
}

.qv-containers-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Bitrix tarzı sol aksiyon rayı ──
   Drawer'ın sol DIŞINA taşan dikey buton kolonu. Yalnız tek slim kart açıkken
   görünür (JS: updateActionRail). Yığın/mobilde gizlenir; header butonları döner. */
.qv-action-rail {
    position: absolute;
    top: 16px;
    left: -54px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1102;
}
.qv-action-rail[hidden] { display: none; }
.qv-rail-b {
    width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(15, 23, 42, 0.55); color: #fff;
    backdrop-filter: blur(4px);
    display: grid; place-items: center; font-size: .95rem;
    box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.5);
    transition: background .15s, transform .15s, filter .15s;
}
.qv-rail-b:hover { background: rgba(15, 23, 42, 0.82); transform: scale(1.07); }
.qv-rail-b.qv-rail-close:hover { background: #ef4444; }
.qv-rail-b.qv-rail-share { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.qv-rail-b.qv-rail-share:hover { background: linear-gradient(135deg, #4f46e5, #7c3aed); filter: brightness(1.1); }
/* Dar ekranda drawer tam genişlik: solda yer yok → ray kapalı, header butonları görünür */
@media (max-width: 900px) { .qv-action-rail { display: none !important; } }
/* Ray görünürken kart içindeki standart dörtlü gizlenir; modüle özel aksiyonlar header'da kalır */
@media (min-width: 901px) {
    .qv-card-wrapper.qv-rail-on .qv-header-actions .qv-copy,
    .qv-card-wrapper.qv-rail-on .qv-header-actions .qv-share,
    .qv-card-wrapper.qv-rail-on .qv-header-actions .qv-minimize,
    .qv-card-wrapper.qv-rail-on .qv-header-actions .qv-close { display: none; }
}

.qv-card-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px 0 0 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: right center;
}

/* Pasif kartlarda filter:blur() KULLANILMAZ: her kart için tam ekran boyutunda
   bir raster katmanı + konvolüsyon demekti ve arka arkaya kart açıldığında
   arayüz gözle görülür şekilde takılıyordu. Koyulaştırma, karta eklenen
   yarı saydam örtü (.qv-card-inactive-overlay) ile yapılır. */
/* Yığın ofseti iki kademelidir:
   • --qv-peek  : TÜM pasif kartlara uygulanan SABİT dışa taşma (diff ile çarpılmaz).
                  Aktif kartın solunda kalan görünür şerit tam olarak
                  `--qv-peek + --diff * 50px` çıkar. Yani 2. kart içeriğinden
                  okunabilir bir dilim gösterirken, 3. ve sonraki kartlar arasındaki
                  mesafe bugünkü gibi 50px'lik sıkı dizilimde kalır (derin yığın taşmaz).
   • --qv-shrink: ölçek kaybı. transform-origin sağ kenar olduğu için ölçek
                  küçüldükçe kartın sol kenarı içeri kaçar; bu kayıp translateX'e
                  geri eklendiğinden görünen şeridin genişliği ölçekten BAĞIMSIZDIR.
                  Böylece 2. kart daha az küçülürken şerit oranı sabit kalır.
   Ayrım CSS'te yapıldı: JS zaten --diff yazıyor, tek eklenen şey diff===1 kartına
   verilen .qv-near sınıfı. Formül tek yerde durur, JS'te hesap yoktur. */
.qv-card-wrapper.inactive {
    --qv-peek: 16%;
    --qv-shrink: calc(0.02 * var(--diff));
    transform: translateX(calc(-1 * (var(--qv-peek) + var(--diff) * 50px + var(--qv-shrink) * 100%)))
               translateY(calc(15px * var(--diff)))
               scale(calc(1 - var(--qv-shrink))) !important;
    box-shadow: -15px 15px 40px rgba(15, 23, 42, 0.18) !important;
}

/* Yığındaki 2. kart: ölçek kaybı %2 yerine %1.2 → görünen dilimdeki yazılar okunur. */
.qv-card-wrapper.inactive.qv-near {
    --qv-shrink: 0.012;
}

.qv-card-wrapper.inactive:hover {
    transform: translateX(calc(-1 * (var(--qv-peek) + var(--diff) * 50px + var(--qv-shrink) * 100% + 15px)))
               translateY(calc(15px * var(--diff)))
               scale(calc(1 - var(--qv-shrink))) !important;
}
.qv-card-wrapper.inactive:hover .qv-card-inactive-overlay { background: rgba(15, 23, 42, 0.03); }

/* Dar ekranda drawer genişler, solunda kalan boşluk azalır: şeridi kıs ki yığın
   ekran dışına taşmasın. 768px'de drawer tam genişlikte olduğundan ek taşmanın
   karşılığı yok → bugünkü davranışa (yalnız 50px'lik tutamak) döner. */
@media (max-width: 1200px) {
    .qv-card-wrapper.inactive { --qv-peek: 8%; }
}
@media (max-width: 768px) {
    /* Peek 0 → tutamağın sağındaki içerik zaten görünmüyor; boşuna kaydırma */
    .qv-card-wrapper.inactive { --qv-peek: 0px; --qv-content-offset: 0px; }
}

/* Yan tutamak (.qv-card-side-handle) absolute konumludur; içeriği itmez, üstüne biner.
   Şerit 50px iken tutamak görünen alanı tamamen kaplıyordu; şerit genişleyince kart
   içeriği tutamağın kenarına sıfır boşlukla dayandı (büyük avatar, sekme satırı, panel
   başlığı tutamağa yapışık görünüyordu). Peek durumunda içeriği azıcık sağa kaydırıyoruz —
   amaç görünen bilgiden çalmadan metnin tutamak çizgisine değmemesi.

   Neden transform, neden padding/margin değil: içerik kökü (.qv-wrapper) tam yükseklikte
   bir flex sütun ve kart oldukça büyük. padding vermek kartın TAMAMINI yeniden düzenler —
   metin sarması değişir, kart öne alınınca içerik zıplar ve her yığın değişiminde
   reflow ödenir. transform composited çalışır, düzeni hiç bozmaz ve kartın kendi geçiş
   eğrisiyle birebir uyumludur. Sağda taşan kısım overflow:hidden ile kırpılır — orası
   zaten aktif kartın arkasında kalıyor.

   position:fixed notu: kart pasifken .qv-card-wrapper'ın KENDİSİNDE zaten transform var,
   yani fixed öğeler için containing block hâlihazırda oluşuyor; bu kural yeni bir kısıt
   getirmiyor. */
.qv-card-wrapper > *:not(.qv-card-side-handle):not(.qv-card-inactive-overlay) {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Kaydırma miktarı KART GENİŞLİĞİNDEN DEĞİL, içeriğin kendi sol dolgusundan hesaplanır:
   tutamak 51px (50px + 1px kenarlık), standart kart başlığının kendi sol dolgusu 2.5rem
   (40px). 24px kaydırınca metin tutamağın çizgisinden 24 + 40 - 51 = ~13px içeride başlar
   — "yapışık değil" demeye yeten, dekoratif olmayan bir nefes payı. Tutamak genişliği
   kadar (64px) kaydırmak, içeriğin kendi dolgusuyla toplanıp boşluğu iki kez ödetiyordu.
   Sol dolgusu daha dar olan bir modül gerekirse kendi kökünde --qv-content-offset'i
   büyütebilir; değişken karttan miras alınır. */
.qv-card-wrapper.inactive > *:not(.qv-card-side-handle):not(.qv-card-inactive-overlay) {
    transform: translateX(var(--qv-content-offset, 24px));
}

/* İkinci sıradan sonrası ekranda yalnızca birkaç piksellik kenar olarak görünür;
   içeriğini boyamak tamamen israf. content-visibility bu ağacı çizim, düzen ve
   stil hesabından çıkarır — kart DOM'da kalmaya devam eder. */
.qv-card-wrapper.qv-deep > *:not(.qv-card-side-handle):not(.qv-card-inactive-overlay) {
    content-visibility: hidden;
}

.qv-card-inactive-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.10);
    z-index: 1055;
    cursor: pointer;
    transition: background 0.3s;
}
/* 2. kartın örtüsü daha hafif: görünen dilimdeki bilgiler okunsun. Örtü
   KALDIRILMAZ — tıklamayı yakalayıp kartı öne getirme davranışı sürer. */
.qv-card-wrapper.qv-near .qv-card-inactive-overlay {
    background: rgba(15, 23, 42, 0.035);
}

.qv-card-wrapper:not(.inactive) .qv-card-side-handle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.qv-card-side-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 0;
    z-index: 1060;
    cursor: pointer;
    transition: all 0.3s;
}
.qv-card-side-handle:hover {
    background: #f1f5f9;
}
.qv-card-side-handle .handle-avatar {
    width: 36px;
    height: 36px;
    flex: none;                 /* dikey tutamakta ezilmesin */
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1;
    margin-bottom: 2rem;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
    overflow: hidden;           /* içerik ne olursa olsun daireden taşmasın */
    text-align: center;
    padding: 2px;
}

/* İki satırlı avatar (operasyon kartı: gün + ay) */
.handle-avatar .ha-stack,
.qv-min-avatar .ha-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 1px;
}
.handle-avatar .ha-stack b,
.qv-min-avatar .ha-stack b {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.handle-avatar .ha-stack i,
.qv-min-avatar .ha-stack i {
    font-style: normal;
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

/* 2 karakterden uzun düz metin */
.handle-avatar .ha-long,
.qv-min-avatar .ha-long {
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1.05;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.qv-card-side-handle .handle-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.82rem;
    font-weight: 800;
    color: #64748b;
    white-space: nowrap;
    letter-spacing: 0.05em;
    flex-grow: 1;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: calc(100% - 120px);
}
.qv-card-side-handle:hover .handle-title {
    color: #1e293b;
}
.qv-card-side-handle .handle-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: all 0.2s;
    margin-top: auto;
}
.qv-card-side-handle .handle-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.qv-drawer-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.8);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.qv-drawer-loader.active {
    opacity: 1;
    visibility: visible;
}

/* ─── MODULE THEME OVERRIDES (Ultra-Modern) ─── */

/* 1. Sales Theme (Emerald Green Tones) */
.theme-sales .qv-card-side-handle {
    background: linear-gradient(180deg, #f0fdf4 0%, #d1fae5 100%) !important;
    border-right: 1px solid #a7f3d0 !important;
}
.theme-sales .qv-card-side-handle .handle-title {
    color: #047857 !important;
}
.theme-sales .qv-card-side-handle .handle-avatar {
    background: #a7f3d0 !important;
    color: #065f46 !important;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.15) !important;
}
.theme-sales .qv-header,
.theme-sales .sqv-header {
    background: linear-gradient(135deg, #fbfefc 0%, #ecfdf5 100%) !important;
    border-bottom: 1px solid #d1fae5 !important;
}
.theme-sales .qv-tab.active .qv-tab-inner {
    color: #059669 !important;
}
.theme-sales .qv-tab.active .qv-tab-icon {
    color: #059669 !important;
}
.theme-sales .qv-tab.active .qv-tab-count {
    background: #d1fae5 !important;
    color: #059669 !important;
}
.theme-sales .qv-tab-indicator {
    background: #059669 !important;
}
.theme-sales .qv-action-btn:hover {
    background: #fff !important;
    color: #059669 !important;
    border-color: #6ee7b7 !important;
}
.theme-sales .sqv-title {
    color: #065f46 !important;
}
.theme-sales .sqv-title:hover {
    color: #064e3b !important;
}
.theme-sales .sqv-subtitle {
    color: rgba(6, 95, 70, 0.7) !important;
}
.theme-sales .sqv-subtitle span,
.theme-sales .sqv-subtitle i {
    color: rgba(6, 95, 70, 0.7) !important;
}
.theme-sales .sqv-code {
    color: #047857 !important;
    background: #d1fae5 !important;
    border: 1px solid #a7f3d0 !important;
}
.theme-sales .sqv-dot {
    color: #6ee7b7 !important;
}
.theme-sales .sqv-customer-link {
    color: #2563eb !important;
}
.theme-sales .sqv-customer-link:hover {
    color: #1d4ed8 !important;
}
.theme-sales .sqv-icon {
    background: #d1fae5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}
.theme-sales .sqv-quick-btn {
    background: #d1fae5 !important;
    color: #064e3b !important;
    border: 1px solid #a7f3d0 !important;
}
.theme-sales .sqv-quick-btn:hover {
    background: #6ee7b7 !important;
    color: #064e3b !important;
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.15) !important;
}
.theme-sales .qv-sales-wrapper .qv-action-btn {
    background: #d1fae5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #064e3b !important;
}

/* 2. Customers Theme (Corporate Blue Tones) */
.theme-customers .qv-card-side-handle {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border-right: 1px solid #bae6fd !important;
}
.theme-customers .qv-card-side-handle .handle-title {
    color: #0369a1 !important;
}
.theme-customers .qv-card-side-handle .handle-avatar {
    background: #bae6fd !important;
    color: #0369a1 !important;
    box-shadow: 0 2px 6px rgba(3, 105, 161, 0.15) !important;
}
.theme-customers .qv-header,
.theme-customers .sqv-header {
    background: linear-gradient(135deg, #fafcff 0%, #f0f9ff 100%) !important;
    border-bottom: 1px solid #e0f2fe !important;
}
.theme-customers .qv-tab.active .qv-tab-inner {
    color: #0284c7 !important;
}
.theme-customers .qv-tab.active .qv-tab-icon {
    color: #0284c7 !important;
}
.theme-customers .qv-tab.active .qv-tab-count {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}
.theme-customers .qv-tab-indicator {
    background: #0284c7 !important;
}
.theme-customers .qv-action-btn:hover {
    background: #fff !important;
    color: #0284c7 !important;
    border-color: #7dd3fc !important;
}
.theme-customers .qv-avatar-big {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.2) !important;
}

/* 3. Suppliers Theme (Green Tones) */
.theme-suppliers .qv-card-side-handle {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%) !important;
    border-right: 1px solid #bbf7d0 !important;
}
.theme-suppliers .qv-card-side-handle .handle-title {
    color: #15803d !important;
}
.theme-suppliers .qv-card-side-handle .handle-avatar {
    background: #bbf7d0 !important;
    color: #15803d !important;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.15) !important;
}
.theme-suppliers .qv-header,
.theme-suppliers .sqv-header {
    background: linear-gradient(135deg, #fafdfb 0%, #f0fdf4 100%) !important;
    border-bottom: 1px solid #dcfce7 !important;
}
.theme-suppliers .qv-tab.active .qv-tab-inner {
    color: #16a34a !important;
}
.theme-suppliers .qv-tab.active .qv-tab-icon {
    color: #16a34a !important;
}
.theme-suppliers .qv-tab.active .qv-tab-count {
    background: #dcfce7 !important;
    color: #16a34a !important;
}
.theme-suppliers .qv-tab-indicator {
    background: #16a34a !important;
}
.theme-suppliers .qv-action-btn:hover {
    background: #fff !important;
    color: #16a34a !important;
    border-color: #86efac !important;
}
.theme-suppliers .qv-avatar-big {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.2) !important;
}

/* ─── MINIMIZED BUTTONS THEME OVERRIDES ─── */

/* Sales (Emerald) Minimized */
.qv-min-item.theme-sales {
    background: rgba(236, 253, 245, 0.95) !important;
    border-color: rgba(167, 243, 208, 0.8) !important;
}
.qv-min-item.theme-sales .qv-min-title {
    color: #065f46 !important;
}
.qv-min-item.theme-sales .qv-min-avatar {
    background: #d1fae5 !important;
    color: #059669 !important;
}
.qv-min-item.theme-sales .qv-min-close {
    color: #6ee7b7 !important;
}
.qv-min-item.theme-sales .qv-min-close:hover {
    background: #6ee7b7 !important;
    color: #065f46 !important;
}
.qv-min-item.theme-sales:hover {
    border-color: #10b981 !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15) !important;
}

/* Customers (Blue) Minimized */
.qv-min-item.theme-customers {
    background: rgba(240, 249, 255, 0.95) !important;
    border-color: rgba(186, 230, 253, 0.8) !important;
}
.qv-min-item.theme-customers .qv-min-title {
    color: #0369a1 !important;
}
.qv-min-item.theme-customers .qv-min-avatar {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}
.qv-min-item.theme-customers .qv-min-close {
    color: #7dd3fc !important;
}
.qv-min-item.theme-customers .qv-min-close:hover {
    background: #7dd3fc !important;
    color: #0369a1 !important;
}
.qv-min-item.theme-customers:hover {
    border-color: #2563eb !important;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15) !important;
}

/* Suppliers (Green) Minimized */
.qv-min-item.theme-suppliers {
    background: rgba(240, 253, 244, 0.95) !important;
    border-color: rgba(187, 247, 208, 0.8) !important;
}
.qv-min-item.theme-suppliers .qv-min-title {
    color: #15803d !important;
}
.qv-min-item.theme-suppliers .qv-min-avatar {
    background: #dcfce7 !important;
    color: #16a34a !important;
}
.qv-min-item.theme-suppliers .qv-min-close {
    color: #86efac !important;
}
.qv-min-item.theme-suppliers .qv-min-close:hover {
    background: #86efac !important;
    color: #15803d !important;
}
.qv-min-item.theme-suppliers:hover {
    border-color: #10b981 !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15) !important;
}

/* 4. Resources Theme (Indigo/Purple Tones) */
.theme-resources .qv-card-side-handle {
    background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%) !important;
    border-right: 1px solid #ddd6fe !important;
}
.theme-resources .qv-card-side-handle .handle-title {
    color: #6d28d9 !important;
}
.theme-resources .qv-card-side-handle .handle-avatar {
    background: #ddd6fe !important;
    color: #6d28d9 !important;
    box-shadow: 0 2px 6px rgba(109, 40, 217, 0.15) !important;
}
.theme-resources .qv-header,
.theme-resources .sqv-header {
    background: linear-gradient(135deg, #faf9ff 0%, #f5f3ff 100%) !important;
    border-bottom: 1px solid #ede9fe !important;
}
.theme-resources .qv-tab.active .qv-tab-inner {
    color: #7c3aed !important;
}
.theme-resources .qv-tab.active .qv-tab-icon {
    color: #7c3aed !important;
}
.theme-resources .qv-tab.active .qv-tab-count {
    background: #ede9fe !important;
    color: #7c3aed !important;
}
.theme-resources .qv-tab-indicator {
    background: #7c3aed !important;
}
.theme-resources .qv-action-btn:hover {
    background: #fff !important;
    color: #7c3aed !important;
    border-color: #c4b5fd !important;
}
.theme-resources .qv-avatar-big {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.2) !important;
}
.theme-resources .qv-avatar-big.guide { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2) !important; }
.theme-resources .qv-avatar-big.vehicle { background: linear-gradient(135deg, #10b981, #047857) !important; box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2) !important; }
.theme-resources .qv-avatar-big.captain { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2) !important; }

/* Resources (Indigo/Purple) Minimized */
.qv-min-item.theme-resources {
    background: rgba(245, 243, 255, 0.95) !important;
    border-color: rgba(221, 214, 254, 0.8) !important;
}
.qv-min-item.theme-resources .qv-min-title {
    color: #6d28d9 !important;
}
.qv-min-item.theme-resources .qv-min-avatar {
    background: #ede9fe !important;
    color: #7c3aed !important;
}
.qv-min-item.theme-resources .qv-min-close {
    color: #c4b5fd !important;
}
.qv-min-item.theme-resources .qv-min-close:hover {
    background: #c4b5fd !important;
    color: #6d28d9 !important;
}
.qv-min-item.theme-resources:hover {
    border-color: #7c3aed !important;
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.15) !important;
}

/* 5. Operations Theme (Slate / Graphite Tones) */
.theme-operations .qv-card-side-handle {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    border-right: 1px solid #cbd5e1 !important;
}
.theme-operations .qv-card-side-handle .handle-title {
    color: #334155 !important;
}
.theme-operations .qv-card-side-handle .handle-avatar {
    background: #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 6px rgba(51, 65, 85, 0.25) !important;
}
.theme-operations .qv-header,
.theme-operations .sqv-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
.theme-operations .qv-tab.active .qv-tab-inner,
.theme-operations .qv-tab.active .qv-tab-icon {
    color: #334155 !important;
}
.theme-operations .qv-tab.active .qv-tab-count {
    background: #e2e8f0 !important;
    color: #334155 !important;
}
.theme-operations .qv-tab-indicator {
    background: #334155 !important;
}
.theme-operations .qv-action-btn:hover {
    background: #fff !important;
    color: #334155 !important;
    border-color: #94a3b8 !important;
}
.theme-operations .qv-avatar-big {
    background: linear-gradient(135deg, #334155, #1e293b) !important;
    box-shadow: 0 10px 25px rgba(30, 41, 59, 0.25) !important;
}

/* Operations (Slate) Minimized */
.qv-min-item.theme-operations {
    background: rgba(241, 245, 249, 0.95) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
}
.qv-min-item.theme-operations .qv-min-title { color: #334155 !important; }
.qv-min-item.theme-operations .qv-min-avatar { background: #e2e8f0 !important; color: #334155 !important; }
.qv-min-item.theme-operations .qv-min-close { color: #94a3b8 !important; }
.qv-min-item.theme-operations .qv-min-close:hover { background: #94a3b8 !important; color: #1e293b !important; }
.qv-min-item.theme-operations:hover {
    border-color: #475569 !important;
    box-shadow: 0 10px 25px rgba(51, 65, 85, 0.15) !important;
}

/* 6. Tasks Theme (Amber Tones) */
.theme-tasks .qv-card-side-handle {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-right: 1px solid #fde68a !important;
}
.theme-tasks .qv-card-side-handle .handle-title {
    color: #92400e !important;
}
.theme-tasks .qv-card-side-handle .handle-avatar {
    background: #fde68a !important;
    color: #92400e !important;
    box-shadow: 0 2px 6px rgba(146, 64, 14, 0.15) !important;
}
.theme-tasks .qv-header,
.theme-tasks .sqv-header {
    background: linear-gradient(135deg, #fffdf7 0%, #fffbeb 100%) !important;
    border-bottom: 1px solid #fef3c7 !important;
}
.theme-tasks .qv-tab.active .qv-tab-inner,
.theme-tasks .qv-tab.active .qv-tab-icon {
    color: #d97706 !important;
}
.theme-tasks .qv-tab.active .qv-tab-count {
    background: #fef3c7 !important;
    color: #d97706 !important;
}
.theme-tasks .qv-tab-indicator {
    background: #d97706 !important;
}
.theme-tasks .qv-action-btn:hover {
    background: #fff !important;
    color: #d97706 !important;
    border-color: #fcd34d !important;
}
.theme-tasks .qv-avatar-big {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.2) !important;
}
.qv-min-item.theme-tasks {
    background: rgba(255, 251, 235, 0.95) !important;
    border-color: rgba(253, 230, 138, 0.8) !important;
}
.qv-min-item.theme-tasks .qv-min-title { color: #92400e !important; }
.qv-min-item.theme-tasks .qv-min-avatar { background: #fde68a !important; color: #92400e !important; }
.qv-min-item.theme-tasks .qv-min-close { color: #d6a354 !important; }
.qv-min-item.theme-tasks .qv-min-close:hover { background: #d97706 !important; color: #fff !important; }
.qv-min-item.theme-tasks:hover {
    border-color: #d97706 !important;
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.15) !important;
}

/* 7. Payments Theme (Emerald Tones) — ödeme kartı finans dilinde */
.theme-payments .qv-card-side-handle {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-right: 1px solid #a7f3d0 !important;
}
.theme-payments .qv-card-side-handle .handle-title {
    color: #065f46 !important;
}
.theme-payments .qv-card-side-handle .handle-avatar {
    background: #a7f3d0 !important;
    color: #065f46 !important;
    box-shadow: 0 2px 6px rgba(6, 95, 70, 0.15) !important;
}
.theme-payments .qv-tab.active .qv-tab-inner,
.theme-payments .qv-tab.active .qv-tab-icon {
    color: #059669 !important;
}
.theme-payments .qv-tab.active .qv-tab-count {
    background: #d1fae5 !important;
    color: #047857 !important;
}
.theme-payments .qv-tab-indicator {
    background: #059669 !important;
}
.theme-payments .qv-action-btn:hover {
    background: #fff !important;
    color: #059669 !important;
    border-color: #6ee7b7 !important;
}
.qv-min-item.theme-payments {
    background: rgba(236, 253, 245, 0.95) !important;
    border-color: rgba(167, 243, 208, 0.8) !important;
}
.qv-min-item.theme-payments .qv-min-title { color: #065f46 !important; }
.qv-min-item.theme-payments .qv-min-avatar { background: #a7f3d0 !important; color: #065f46 !important; }
.qv-min-item.theme-payments .qv-min-close { color: #34d399 !important; }
.qv-min-item.theme-payments .qv-min-close:hover { background: #059669 !important; color: #fff !important; }
.qv-min-item.theme-payments:hover {
    border-color: #059669 !important;
    box-shadow: 0 10px 25px rgba(5, 150, 105, 0.15) !important;
}
</style>

<script>
let activeQuickViewUrl = null;
let qvStack = [];
let qvLoading = new Set();

function addQuickViewToHistory(url, title, initials) {
    let history = JSON.parse(localStorage.getItem('qv_history') || '[]');
    history = history.filter(item => item.url !== url);
    history.unshift({
        url: url,
        title: title,
        initials: initials,
        time: Date.now()
    });
    if (history.length > 30) history = history.slice(0, 30);
    localStorage.setItem('qv_history', JSON.stringify(history));
    if (window.refreshRecentSidebar) window.refreshRecentSidebar();
}

// Persistent state management for minimized items
function saveMinimizedState() {
    sessionStorage.setItem('qvMinimizedItems', JSON.stringify(window.minimizedItems || []));
}

function loadMinimizedState() {
    try {
        const saved = sessionStorage.getItem('qvMinimizedItems');
        window.minimizedItems = saved ? JSON.parse(saved) : [];
    } catch (e) {
        window.minimizedItems = [];
    }
}

// Persistent state management for active stack
function saveActiveStack() {
    if (window.isRestoringStack) return;
    const urls = qvStack.map(item => item.url);
    sessionStorage.setItem('qvActiveStack', JSON.stringify(urls));
}

async function restoreActiveStack() {
    try {
        const saved = sessionStorage.getItem('qvActiveStack');
        const urls = saved ? JSON.parse(saved) : [];
        if (!urls || urls.length === 0) return;
        
        window.isRestoringStack = true;
        
        // Open loader and drawer UI first
        const drawer = document.getElementById('quickViewDrawer');
        const overlay = document.getElementById('quickViewOverlay');
        const loader = document.getElementById('quickViewLoader');
        if (drawer && overlay && loader) {
            drawer.classList.add('active');
            overlay.classList.add('active');
            document.body.classList.add('qv-drawer-open'); // chat widget sola geçsin
            loader.classList.add('active');
        }
        
        for (const url of urls) {
            try {
                await openQuickView(url);
            } catch (err) {
                console.error('Failed to restore quick-view URL: ' + url, err);
            }
        }
    } catch (e) {
        console.error('Error restoring active quick view stack:', e);
    } finally {
        window.isRestoringStack = false;
        saveActiveStack();
        const loader = document.getElementById('quickViewLoader');
        if (loader) loader.classList.remove('active');
    }
}

// Global initialization
loadMinimizedState();

// Compatibility shim
function openCustomerDrawer(customerId, activeTab = null) {
    return openQuickView(`/agency/customers/${customerId}/quick-view`, activeTab);
}

function openSaleDrawer(saleId, activeTab = null) {
    openQuickView(`/agency/sales/${saleId}/quick-view`, activeTab);
}

function openSupplierDrawer(supplierId, activeTab = null) {
    openQuickView(`/agency/suppliers/${supplierId}/quick-view`, activeTab);
}

function openResourceDrawer(resourceId, activeTab = null) {
    openQuickView(`/agency/resources/${resourceId}/quick-view`, activeTab);
}

/**
 * Kart avatarını yan tutamak / küçültülmüş liste için kısa gösterime çevirir.
 *
 * Operasyon kartında avatar iki satırlı bir tarihtir (08 / Ağu). Düz metne
 * çevrilince "08 Ağu" oluyor ve 36px'lik daireye sığmıyordu; iki satırlı yapı
 * korunup ayrı stille basılır. Diğer kartlarda baş harfler / ikon aynen kalır.
 */
function qvExtractAvatar(root) {
    const esc = s => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    const clean = s => s ? s.replace(/\s+/g, ' ').trim() : '';

    // Kendi başlık tasarımı olan kartlar tutamak avatarını açıkça bildirebilir:
    // <span data-qv-avatar><i class="fas fa-..."></i></span> ya da metin.
    const declared = root.querySelector('[data-qv-avatar]');
    if (declared) {
        const icon = declared.querySelector('i');
        if (icon) return icon.outerHTML;
        const txt = clean(declared.innerText || declared.getAttribute('data-qv-avatar'));
        if (txt) return txt.length > 2 ? `<span class="ha-long">${esc(txt)}</span>` : esc(txt);
    }

    const avatar = root.querySelector('.qv-avatar-big');
    if (avatar) {
        const lines = [...avatar.querySelectorAll('span')]
            .map(s => clean(s.innerText))
            .filter(Boolean);
        if (lines.length >= 2) {
            return `<span class="ha-stack"><b>${esc(lines[0])}</b><i>${esc(lines[1])}</i></span>`;
        }
        const txt = clean(avatar.innerText);
        if (!txt) {
            // Tur/kaynak kartlarında avatar sadece ikondur; metin yok diye
            // tutamak boş bir daire olarak kalıyordu.
            const icon = avatar.querySelector('i');
            if (icon) return icon.outerHTML;
        }
        // 3+ karakterlik metin daireye sığmaz → küçült
        return txt.length > 2 ? `<span class="ha-long">${esc(txt)}</span>` : esc(txt);
    }

    const sqvIcon = root.querySelector('.sqv-icon i');
    return sqvIcon ? sqvIcon.outerHTML : 'QV';
}

/** Metin için ucuz, çakışma olasılığı düşük özet (stil tekilleştirme anahtarı). */
function qvHash(str) {
    let h = 5381;
    for (let i = 0; i < str.length; i++) h = ((h << 5) + h + str.charCodeAt(i)) | 0;
    return (h >>> 0).toString(36) + '-' + str.length.toString(36);
}

function setHtmlAndRunScripts(element, html) {
    element.innerHTML = html;

    // Her quick-view kendi <style> bloklarını taşır (Blade'in "once" yönergesi
    // yalnızca istek başına tekilleştirir). Arka arkaya kart açılınca aynı CSS
    // onlarca kez DOM'a giriyor ve her açılışta tüm sayfanın stili yeniden
    // hesaplanıyordu. Aynı içeriği bir kez head'e taşıyıp gerisini atıyoruz.
    element.querySelectorAll('style').forEach(styleEl => {
        const key = qvHash(styleEl.textContent || '');
        if (document.head.querySelector('style[data-qv-style="' + key + '"]')) {
            styleEl.remove();
            return;
        }
        styleEl.setAttribute('data-qv-style', key);
        document.head.appendChild(styleEl);
    });

    const scripts = Array.from(element.querySelectorAll('script'));
    scripts.forEach(oldScript => {
        const newScript = document.createElement('script');
        Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
        newScript.appendChild(document.createTextNode(oldScript.textContent));
        oldScript.parentNode.replaceChild(newScript, oldScript);
    });
}

/** Aynı anda DOM'da tutulacak azami kart sayısı. */
const QV_MAX_CARDS = 5;

/** Sınır aşıldığında en eski (en arkadaki) kartı DOM'dan düşürür. */
function qvTrimStack() {
    while (qvStack.length > QV_MAX_CARDS) {
        const oldest = qvStack.shift();
        try { qvFlushPendingSaves(oldest.element); } catch (e) {}
        oldest.element.remove();
    }
}

function deactivateCard(cardEl) {
    if (cardEl.classList.contains('inactive')) return;
    cardEl.classList.add('inactive');
    cardEl.querySelectorAll('[id]').forEach(el => {
        const originalId = el.getAttribute('id');
        el.setAttribute('data-original-id', originalId);
        el.removeAttribute('id');
    });
}

function activateCard(cardEl) {
    if (!cardEl.classList.contains('inactive')) return;
    cardEl.classList.remove('inactive');
    cardEl.querySelectorAll('[data-original-id]').forEach(el => {
        const originalId = el.getAttribute('data-original-id');
        el.setAttribute('id', originalId);
        el.removeAttribute('data-original-id');
    });
}

function updateStackUI() {
    const activeIdx = qvStack.length - 1;
    const container = document.getElementById('quickViewContainers');
    if (!container) return;

    qvStack.forEach((item, index) => {
        const cardEl = item.element;
        const diff = activeIdx - index;
        
        cardEl.style.zIndex = 100 + index;
        
        // Remove existing overlay
        const oldOverlay = cardEl.querySelector('.qv-card-inactive-overlay');
        if (oldOverlay) oldOverlay.remove();

        if (index === activeIdx) {
            activateCard(cardEl);
            cardEl.classList.remove('qv-deep', 'qv-near');
            cardEl.style.transform = '';
            cardEl.style.opacity = '';
            cardEl.style.filter = '';
            cardEl.style.pointerEvents = 'auto';
            cardEl.onclick = null; // Clear click handler when active
            activeQuickViewUrl = item.url;
        } else {
            deactivateCard(cardEl);
            // 2. sıradan sonrası yalnızca kenar olarak görünür → içeriği çizilmesin
            cardEl.classList.toggle('qv-deep', diff >= 2);
            // Yığındaki 2. kart: daha geniş görünür, daha az küçülür, örtüsü hafifler
            cardEl.classList.toggle('qv-near', diff === 1);
            cardEl.style.setProperty('--diff', diff);
            cardEl.style.transform = '';
            cardEl.style.opacity = '';
            cardEl.style.filter = '';
            cardEl.style.pointerEvents = 'auto';

            cardEl.onclick = (e) => {
                e.stopPropagation();
                bringCardToFront(item.url);
            };

            // Add inactive overlay to block inner content interactions
            const overlay = document.createElement('div');
            overlay.className = 'qv-card-inactive-overlay';
            cardEl.appendChild(overlay);
        }
    });
    saveActiveStack();
    updateActionRail();
}

/* Bitrix tarzı sol aksiyon rayı: yalnız TEK ve slim header'lı kart açıkken görünür.
   Yığın varken pasif kartlar rayın hizasına taştığı için ray gizlenir ve standart
   butonlar header içindeki yerlerine döner (CSS .qv-rail-on kuralı). */
function updateActionRail() {
    const rail = document.getElementById('qvActionRail');
    if (!rail) return;
    const drawer = document.getElementById('quickViewDrawer');
    const active = qvStack.length ? qvStack[qvStack.length - 1].element : null;
    const show = !!(active && drawer && drawer.classList.contains('active')
        && qvStack.length === 1 && active.querySelector('.qv-header.slim'));
    rail.hidden = !show;
    document.querySelectorAll('.qv-card-wrapper.qv-rail-on').forEach(w => {
        if (w !== active || !show) w.classList.remove('qv-rail-on');
    });
    if (show) active.classList.add('qv-rail-on');
}

function bringCardToFront(url) {
    const idx = qvStack.findIndex(item => item.url === url);
    if (idx === -1 || idx === qvStack.length - 1) return;
    
    const item = qvStack.splice(idx, 1)[0];
    qvStack.push(item);
    updateStackUI();
}

// Kart DOM'dan kaldırılmadan önce bekleyen otomatik kayıtları gönder.
// (Satış kartı 650 ms debounce ile kaydediyor; hemen kapatılırsa son değişiklik
// kayboluyordu.)
//
// Genel sözleşme: otomatik kaydeden her quick-view kökü `data-qv-autosave`
// taşır ve kendi öğesine `__qvFlush()` işlevini asar. Böylece yeni modüller
// bu dosyaya dokunmadan kapanış anına bağlanabilir.
function qvFlushPendingSaves(el) {
    try {
        const wrap = el && el.querySelector ? el.querySelector('.qv-sales-wrapper') : null;
        if (wrap && typeof window.qcFlushSaves === 'function') window.qcFlushSaves(wrap);

        if (el && el.querySelectorAll) {
            el.querySelectorAll('[data-qv-autosave]').forEach(node => {
                try { if (typeof node.__qvFlush === 'function') node.__qvFlush(); } catch (e) {}
            });
        }
    } catch (e) {}
}

function closeCard(url) {
    const idx = qvStack.findIndex(item => item.url === url);
    if (idx === -1) return;

    const item = qvStack[idx];
    qvFlushPendingSaves(item.element);
    item.element.remove();
    qvStack.splice(idx, 1);

    if (qvStack.length > 0) {
        updateStackUI();
    } else {
        shutdownDrawer();
    }
}

// Taslak oluştur (POST) → dönen quick-view URL'sini drawer'da aç
function openDraftQuickView(createUrl) {
    const token = document.querySelector('meta[name="csrf-token"]')?.content || '';
    return fetch(createUrl, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: '{}'
    })
        .then(r => r.json())
        .then(d => {
            if (d.success && d.quick_view_url) {
                openQuickView(d.quick_view_url);
            } else {
                alert(d.message || 'Taslak oluşturulamadı.');
            }
        })
        .catch(e => alert('Hata: ' + e.message));
}
window.openDraftQuickView = openDraftQuickView;

function openQuickView(url, activeTab = null) {
    // Aynı sayfa mutlak/relatif farklı biçimlerde çağrılınca kart çoğalmasın: URL'i normalize et
    // (ör. yükleme sonrası route() mutlak URL'i ile reload → mevcut kart bulunamayıp üstüne yeni kart açılıyordu)
    try { const _u = new URL(url, location.origin); if (_u.origin === location.origin) url = _u.pathname + _u.search; } catch (e) {}
    if (qvLoading.has(url)) return Promise.resolve();

    const drawer = document.getElementById('quickViewDrawer');
    const overlay = document.getElementById('quickViewOverlay');
    const loader = document.getElementById('quickViewLoader');
    const container = document.getElementById('quickViewContainers');

    removeMinimizedItem(url, true);

    drawer.classList.add('active');
    overlay.classList.add('active');
    document.body.classList.add('qv-drawer-open'); // chat widget sola geçsin
    qvShareBarToggle(true);
    loader.classList.add('active');
    
    if (document.body.style.overflow !== 'hidden') {
        document.body.style.setProperty('--old-overflow', document.body.style.overflow);
    }
    document.body.style.overflow = 'hidden';

    const existingItem = qvStack.find(item => item.url === url);

    qvLoading.add(url);

    return fetch(url)
        .then(response => {
            qvLoading.delete(url);
            if (!response.ok) throw new Error('Yükleme hatası');
            return response.text();
        })
        .then(html => {
            const cleanText = (str) => str ? str.replace(/\s+/g, ' ').trim() : '';
            
            if (existingItem) {
                // Card already exists, bring it to front and refresh content
                bringCardToFront(url);
                
                const cardEl = existingItem.element;
                const sideHandle = cardEl.querySelector('.qv-card-side-handle');
                
                // Temporarily activate it to write to it cleanly
                activateCard(cardEl);
                let themeClass = '';
                if (url.includes('/customers/')) themeClass = 'theme-customers';
                else if (url.includes('/sales/') || url.includes('/invoices/')) themeClass = 'theme-sales';
                else if (url.includes('/suppliers/')) themeClass = 'theme-suppliers';
                else if (url.includes('/resources/')) themeClass = 'theme-resources';
                else if (url.includes('/operations/')) themeClass = 'theme-operations';
                else if (url.includes('/tasks/')) themeClass = 'theme-tasks';
                else if (url.includes('/payments/')) themeClass = 'theme-payments';
                else if (url.includes('/kultur-turlari/') || url.includes('/gunubirlik-turlar/') || url.includes('/yurtdisi-turlari/') || url.includes('/extra-services/')) themeClass = 'theme-products';
                cardEl.className = 'qv-card-wrapper ' + themeClass;
                qvFlushPendingSaves(cardEl); // içerik değişmeden önce bekleyen kaydı gönder
                setHtmlAndRunScripts(cardEl, html);
                if (sideHandle) cardEl.appendChild(sideHandle);

                // Extract potentially updated title & initials
                let title = '';
                const salesTitle = cardEl.querySelector('.sqv-title');
                if (salesTitle) {
                    title = cleanText(salesTitle.innerText);
                }
                if (!title) {
                    const headerTitle = cardEl.querySelector('.qv-header h3');
                    if (headerTitle) {
                        title = cleanText(headerTitle.innerText);
                    }
                }
                if (!title) title = 'Hızlı Görünüm';

                let initials = qvExtractAvatar(cardEl);

                existingItem.title = title;
                existingItem.initials = initials;
                addQuickViewToHistory(url, title, initials);

                if (sideHandle) {
                    sideHandle.innerHTML = `
                        <div class="handle-avatar">${initials}</div>
                        <div class="handle-title">${title}</div>
                        <button class="handle-close" onclick="event.stopPropagation(); closeCard('${url}')">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                }

                if (activeTab) {
                    const tabEl = cardEl.querySelector(`.qv-tab[onclick*="'${activeTab}'"]`);
                    if (tabEl) {
                        switchQvTab(activeTab, tabEl);
                    }
                }

                updateStackUI();
                loader.classList.remove('active');
            } else {
                // Create new card
                const cardEl = document.createElement('div');
                let themeClass = '';
                if (url.includes('/customers/')) themeClass = 'theme-customers';
                else if (url.includes('/sales/') || url.includes('/invoices/')) themeClass = 'theme-sales';
                else if (url.includes('/suppliers/')) themeClass = 'theme-suppliers';
                else if (url.includes('/resources/')) themeClass = 'theme-resources';
                else if (url.includes('/operations/')) themeClass = 'theme-operations';
                else if (url.includes('/tasks/')) themeClass = 'theme-tasks';
                else if (url.includes('/payments/')) themeClass = 'theme-payments';
                else if (url.includes('/kultur-turlari/') || url.includes('/gunubirlik-turlar/') || url.includes('/yurtdisi-turlari/') || url.includes('/extra-services/')) themeClass = 'theme-products';
                cardEl.className = 'qv-card-wrapper inactive ' + themeClass;
                setHtmlAndRunScripts(cardEl, html);

                let title = '';
                const salesTitle = cardEl.querySelector('.sqv-title');
                if (salesTitle) {
                    title = cleanText(salesTitle.innerText);
                }
                if (!title) {
                    const headerTitle = cardEl.querySelector('.qv-header h3');
                    if (headerTitle) {
                        title = cleanText(headerTitle.innerText);
                    }
                }
                if (!title) title = 'Hızlı Görünüm';

                let initials = qvExtractAvatar(cardEl);

                const sideHandle = document.createElement('div');
                sideHandle.className = 'qv-card-side-handle';
                sideHandle.innerHTML = `
                    <div class="handle-avatar">${initials}</div>
                    <div class="handle-title">${title}</div>
                    <button class="handle-close" onclick="event.stopPropagation(); closeCard('${url}')">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                cardEl.appendChild(sideHandle);
                container.appendChild(cardEl);

                qvStack.push({
                    url: url,
                    title: title,
                    initials: initials,
                    element: cardEl
                });
                qvTrimStack();
                addQuickViewToHistory(url, title, initials);

                if (activeTab) {
                    const tabEl = cardEl.querySelector(`.qv-tab[onclick*="'${activeTab}'"]`);
                    if (tabEl) {
                        switchQvTab(activeTab, tabEl);
                    }
                }

                updateStackUI();
                loader.classList.remove('active');
            }
        })
        .catch(err => {
            qvLoading.delete(url);
            console.error(err);
            loader.classList.remove('active');
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'Hata',
                    text: 'Bilgiler yüklenirken bir hata oluştu.'
                });
            }
        });
}

/**
 * Kart başlığını çıkarır: satış kartı başlığı → genel başlık → varsayılan.
 * (Tek kart ve toplu simge durumuna alma aynı sırayı kullansın diye ayrıldı.)
 */
function qvExtractCardTitle(content) {
    const cleanText = (str) => str ? str.replace(/\s+/g, ' ').trim() : '';

    let title = '';
    const salesTitle = content.querySelector('.sqv-title');
    if (salesTitle) {
        title = cleanText(salesTitle.innerText);
    }
    if (!title) {
        const headerTitle = content.querySelector('.qv-header h3');
        if (headerTitle) {
            title = cleanText(headerTitle.innerText);
        }
    }
    if (!title) {
        title = 'Hızlı Görünüm';
    }
    return title;
}

function minimizeQuickView() {
    if (!activeQuickViewUrl) return;

    const activeItem = qvStack[qvStack.length - 1];
    if (!activeItem) return;

    qvShareBarToggle(false);

    const content = activeItem.element;
    const title = qvExtractCardTitle(content);
    let initials = qvExtractAvatar(content);

    if (!window.minimizedItems.find(i => i.url === activeQuickViewUrl)) {
        window.minimizedItems.push({
            url: activeQuickViewUrl,
            title: title,
            initials: initials
        });
        saveMinimizedState();
        renderMinimizedStack();
    }

    qvFlushPendingSaves(activeItem.element);
    activeItem.element.remove();
    qvStack.pop();

    if (qvStack.length > 0) {
        updateStackUI();
    } else {
        closeQuickView(true);
    }
}

/**
 * Yığındaki TÜM kartları simge durumuna alır — boşluğa (overlay) tıklama davranışı.
 *
 * minimizeQuickView() ile aynı adımları her kart için uygular: başlık + avatar
 * çıkarma, window.minimizedItems'a URL bazlı tekrarsız ekleme ve DOM'dan silmeden
 * ÖNCE qvFlushPendingSaves() ile bekleyen otomatik kayıtların gönderilmesi.
 * Farkı: simge listesi kart başına değil, tümü bittikten sonra BİR KEZ çizilir
 * (gereksiz reflow olmasın) ve drawer state korunarak kapanır — hiçbir kart
 * kaybolmaz, hepsi simge çubuğundan geri açılabilir.
 */
function minimizeAllQuickViews() {
    if (!qvStack.length) {
        shutdownDrawer(true);
        return;
    }

    qvShareBarToggle(false);
    window.minimizedItems = window.minimizedItems || [];

    // En üstteki karttan başla: tek tek küçültülmüş gibi aynı sıra oluşsun
    qvStack.slice().reverse().forEach(item => {
        const content = item.element;

        if (!window.minimizedItems.find(i => i.url === item.url)) {
            // Derin kartların içeriği `qv-deep` ile çizim dışıdır; okuma yine de
            // çalışır ama bir şey bulunamazsa kartın açılışta saklanan değerine düş.
            let title = qvExtractCardTitle(content);
            if (title === 'Hızlı Görünüm' && item.title) title = item.title;

            let initials = qvExtractAvatar(content);
            if (initials === 'QV' && item.initials) initials = item.initials;

            window.minimizedItems.push({ url: item.url, title: title, initials: initials });
        }

        // Bekleyen otomatik kayıtlar eleman DOM'dan silinmeden gönderilmeli
        qvFlushPendingSaves(content);
        content.remove();
    });

    qvStack = [];
    activeQuickViewUrl = null;

    saveMinimizedState();
    renderMinimizedStack();

    // State korunarak kapan: saveActiveStack() boşalan yığını tutarlı yazar
    shutdownDrawer(true);
}

function closeQuickView(isMinimizing = false) {
    if (isMinimizing) {
        shutdownDrawer(true);
        return;
    }
    if (activeQuickViewUrl) {
        closeCard(activeQuickViewUrl);
    }
}

function shutdownDrawer(keepState = false) {
    if (!keepState) {
        qvStack.forEach(item => qvFlushPendingSaves(item.element));
        qvStack.forEach(item => item.element.remove());
        qvStack = [];
        activeQuickViewUrl = null;
        if (typeof qvLoading !== 'undefined') qvLoading.clear();
    }
    
    document.getElementById('quickViewDrawer').classList.remove('active');
    document.getElementById('quickViewOverlay').classList.remove('active');
    document.body.classList.remove('qv-drawer-open'); // chat widget sağdaki yerine dönsün
    document.body.style.overflow = document.body.style.getPropertyValue('--old-overflow') || 'auto';
    qvShareBarToggle(false);
    saveActiveStack();
    updateActionRail();
}

function renderMinimizedStack() {
    const stack = document.getElementById('qvMinimizedStack');
    if (!stack) return;
    stack.innerHTML = '';
    
    if (window.minimizedItems && window.minimizedItems.length > 0) {
        window.minimizedItems.forEach((item, index) => {
            const div = document.createElement('div');
            let themeClass = '';
            if (item.url.includes('/customers/')) themeClass = 'theme-customers';
            else if (item.url.includes('/sales/')) themeClass = 'theme-sales';
            else if (item.url.includes('/suppliers/')) themeClass = 'theme-suppliers';
            else if (item.url.includes('/resources/')) themeClass = 'theme-resources';
            else if (item.url.includes('/operations/')) themeClass = 'theme-operations';
            else if (item.url.includes('/tasks/')) themeClass = 'theme-tasks';
            else if (item.url.includes('/payments/')) themeClass = 'theme-payments';

            div.className = `qv-min-item ${themeClass}`;
            div.setAttribute('onclick', `openQuickView('${item.url}')`);
            // Simge durumunda başlık gizli; adı en azından tooltip'ten okunsun
            div.setAttribute('title', item.title);
            div.innerHTML = `
                <div class="qv-min-avatar">${item.initials}</div>
                <div class="qv-min-info">
                    <div class="qv-min-title">${item.title}</div>
                </div>
                <button class="qv-min-close" onclick="event.stopPropagation(); removeMinimizedItem('${item.url}', true)"><i class="fas fa-times"></i></button>
            `;
            stack.appendChild(div);
        });

        if (window.minimizedItems.length > 1) {
            const closeAllWrap = document.createElement('div');
            closeAllWrap.className = 'qv-min-all-wrap';
            closeAllWrap.style.cssText = 'pointer-events: auto;';
            closeAllWrap.innerHTML = `
                <button class="qv-min-all-btn" onclick="clearAllMinimized()" title="Tümünü Kapat">
                    <i class="fas fa-trash-can"></i>
                </button>
            `;
            stack.appendChild(closeAllWrap);
        }
    }
}

function removeMinimizedItem(url, reRender = false) {
    window.minimizedItems = (window.minimizedItems || []).filter(i => i.url !== url);
    saveMinimizedState();
    if (reRender) renderMinimizedStack();
}

function clearAllMinimized() {
    window.minimizedItems = [];
    saveMinimizedState();
    renderMinimizedStack();
}

// Initial render
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        renderMinimizedStack();
        restoreActiveStack();
    });
} else {
    renderMinimizedStack();
    restoreActiveStack();
}


function switchQvTab(tab, el) {
    // Find nearest tab container
    const container = el.closest('.qv-wrapper') || document;
    container.querySelectorAll('.qv-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');

    container.querySelectorAll('.qv-tab-panel').forEach(p => {
        p.classList.remove('active');
        p.style.display = 'none';
    });
    
    const target = container.querySelector('#qv-tab-' + tab);
    if (target) {
        target.classList.add('active');
        target.style.display = 'block';
    }
}

// Global handle for escape key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') shutdownDrawer();
});

// Global handle for customer row/link clicks
document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (e) => {
        // 1. Direct customer row (TR)
        let customerTarget = e.target.closest('tr.customer-row[data-id]');
        let customerId = customerTarget ? customerTarget.dataset.id : null;

        // 2. Specific customer link/element inside any view
        if (!customerId) {
            customerTarget = e.target.closest('[data-customer-id]');
            customerId = customerTarget ? customerTarget.dataset.customerId : null;
        }

        // 3. Sale row
        let saleTarget = e.target.closest('tr.sale-row[data-id]');
        let saleId = saleTarget ? saleTarget.dataset.id : null;

        // 4. Supplier row
        let supplierTarget = e.target.closest('tr.supplier-row[data-id]');
        let supplierId = supplierTarget ? supplierTarget.dataset.id : null;

        if (!supplierId) {
            supplierTarget = e.target.closest('[data-supplier-id]');
            supplierId = supplierTarget ? supplierTarget.dataset.supplierId : null;
        }

        // 5. Resource row
        let resourceTarget = e.target.closest('tr.resource-row[data-id]');
        let resourceId = resourceTarget ? resourceTarget.dataset.id : null;

        if (!resourceId) {
            resourceTarget = e.target.closest('[data-resource-id]');
            resourceId = resourceTarget ? resourceTarget.dataset.resourceId : null;
        }

        // 6. Generic quick-view trigger (ürünler vb. — satıra data-quickview-url eklenir)
        let genericTarget = e.target.closest('[data-quickview-url]');
        let genericUrl = genericTarget ? genericTarget.dataset.quickviewUrl : null;

        // Satır içindeki denetimler (buton, bağlantı, form alanı) kart açmaz
        const isAction = e.target.closest('.row-actions') || e.target.closest('.row-acts') || e.target.closest('.dt-rowact') || e.target.closest('input') || e.target.closest('select') || e.target.closest('textarea') || e.target.closest('a:not([data-customer-id]):not([data-supplier-id]):not([data-resource-id])') || e.target.closest('button') || e.target.classList.contains('inline-editable');

        if (customerId && !isAction) {
            e.preventDefault();
            e.stopPropagation();
            openCustomerDrawer(customerId);
        } else if (saleId && !isAction) {
            e.preventDefault();
            e.stopPropagation();
            openSaleDrawer(saleId);
        } else if (supplierId && !isAction) {
            e.preventDefault();
            e.stopPropagation();
            openSupplierDrawer(supplierId);
        } else if (resourceId && !isAction) {
            e.preventDefault();
            e.stopPropagation();
            openResourceDrawer(resourceId);
        } else if (genericUrl && !isAction) {
            e.preventDefault();
            e.stopPropagation();
            openQuickView(genericUrl);
        }
    });
});

// ─── INLINE EDIT LOGIC ───
document.addEventListener('click', function(e) {
    const target = e.target.closest('.inline-editable');
    if (!target || target.classList.contains('editing')) return;

    const field = target.dataset.field;
    const cid = target.dataset.id;
    const type = target.dataset.type || 'text';
    const originalValue = target.dataset.value || target.innerText.trim();
    
    target.classList.add('editing');
    const originalContent = target.innerHTML;
    
    let input;
    if (type === 'select') {
        input = document.createElement('select');
        input.className = 'qv-inline-input';
        const options = JSON.parse(target.dataset.options || '[]');
        options.forEach(opt => {
            const option = document.createElement('option');
            option.value = opt.value;
            option.text = opt.label;
            option.selected = (opt.value == originalValue);
            input.appendChild(option);
        });
    } else if (type === 'textarea') {
        input = document.createElement('textarea');
        input.className = 'qv-inline-input';
        input.rows = 3;
        input.value = originalValue === '—' ? '' : originalValue;
    } else {
        input = document.createElement('input');
        input.type = type;
        input.className = 'qv-inline-input';
        let openVal = originalValue === '—' ? '' : originalValue;
        if (type === 'number' && openVal) {
            // Biçimli gösterimden (ör. "1.234,50 ₺/km") ham sayıyı çıkar
            let cleaned = openVal.replace(/[^0-9.,-]/g, '');
            if (cleaned.indexOf(',') > -1) { cleaned = cleaned.replace(/\./g, '').replace(',', '.'); }
            openVal = cleaned;
        }
        input.value = openVal;
    }

    target.innerHTML = '';
    // Genişlik, alan global tarih seçicisiyle sarılmadan ÖNCE verilir: görünen
    // eş özgün input'un style'ını devralır.
    input.style.width = '100%';
    target.appendChild(input);

    // Tarih/saat alanı datetime-picker.js tarafından sarılır: özgün input
    // gizlenip ISO değerin kaynağı olarak kalır, kullanıcı yanına konan görünen
    // alana yazar. Odak ve klavye görünen alana kurulmazsa alan açılır açılmaz
    // kapanıyordu (gizli input'a odak → odak görünen alana aktarılır → gizli
    // input'ta anında blur → "değişiklik yok" sayılıp düzenleme geri alınır).
    if (window.DTP && ['date', 'time', 'datetime-local'].includes(type)) window.DTP.enhance(target);
    const box = (window.DTP && window.DTP.visible) ? window.DTP.visible(input) : input;

    box.focus();
    if (box.setSelectionRange && (type === 'text' || type === 'number')) {
        try { const l = box.value.length; box.setSelectionRange(l, l); } catch (e) {}
    }

    // Kullanıcı gerçekten değişiklik yaptı mı? (dokunmadan blur olursa kaydetme, değer kaybolmasın)
    let edited = false;
    const touch = () => { edited = true; };
    input.addEventListener('input', touch);
    input.addEventListener('change', touch);
    if (box !== input) box.addEventListener('input', touch);

    // Enter ve ardından gelen blur aynı kaydı iki kez göndermesin
    let done = false;

    const save = () => {
        if (done) return;
        done = true;
        // Alan DOM'dan kalkacak; ona ait açık takvim paneli ekranda kalmasın
        if (window.DTP && window.DTP.close) window.DTP.close(input);
        if (!edited) {
            target.innerHTML = originalContent;
            target.classList.remove('editing');
            return;
        }
        // Tarih alanında yazılan metin ("18.01.2001") ancak kesinleştirilince
        // ISO değere döner; okumadan önce eşzamanlı olarak akıtılır.
        const newValue = (window.DTP && window.DTP.commit) ? window.DTP.commit(input) : input.value;
        if (newValue == originalValue) {
            target.innerHTML = originalContent;
            target.classList.remove('editing');
            return;
        }

        // Show loading
        target.innerHTML = '<span class="spinner-border spinner-border-sm text-primary"></span>';

        const url = target.dataset.url || `/agency/customers/${cid}/update-field`;

        fetch(url, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ field: field, value: newValue })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                target.innerText = data.display_value || (newValue || '—');
                target.dataset.value = newValue;
                target.classList.remove('editing');
                
                // Show success toast
                if (typeof Swal !== 'undefined') {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: 'top-end',
                        showConfirmButton: false,
                        timer: 2000,
                        timerProgressBar: true
                    });
                    Toast.fire({
                        icon: 'success',
                        title: data.message || 'Güncellendi'
                    });
                }

                // Highlight effect
                target.style.backgroundColor = '#d1fae5';
                setTimeout(() => target.style.backgroundColor = '', 1000);
            } else {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Hata',
                        text: data.message || 'Güncelleme başarısız.'
                    });
                }
                target.innerHTML = originalContent;
                target.classList.remove('editing');
            }
        })
        .catch(err => {
            console.error(err);
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'error',
                    title: 'Hata',
                    text: 'Bağlantı hatası oluştu.'
                });
            }
            target.innerHTML = originalContent;
            target.classList.remove('editing');
        });
    };

    // Dinleyiciler GÖRÜNEN düğüme bağlanır (tarihte sarmalayıcının ürettiği
    // alan, diğerlerinde input'un kendisi); ikisi de her düzenlemede yeniden
    // üretildiği için dinleyici birikmesi olmaz.
    box.addEventListener('blur', () => {
        // Takvim paneli body'ye taşınır: panele tıklamak "alandan çıkış"
        // sayılmamalı, yoksa kullanıcı gün seçerken düzenleme kapanır.
        setTimeout(() => {
            if (done) return;
            const a = document.activeElement;
            if (target.contains(a) || (window.DTP && window.DTP.inPanel && window.DTP.inPanel(a))) return;
            save();
        }, 140);
    });
    box.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && type !== 'textarea') save();
        if (e.key === 'Escape') {
            done = true;
            if (window.DTP && window.DTP.close) window.DTP.close(input);
            target.innerHTML = originalContent;
            target.classList.remove('editing');
        }
    });
});

// ─── QUICK-VIEW BAŞLIK DÜZENLEME (tek ortak kalıp) ───────────────────────────
// Kart tarafı yalnızca quick-view.editable-title bileşeniyle prop verir; davranış
// (tıkla-düzenle, Enter/Esc/blur, geri bildirim, otomatik ada dönüş, klavye
// erişilebilirliği) SADECE burada tanımlıdır. Yeni modül eklerken JS yazılmaz.
//
// NOT: bileşen adı burada köşeli ayraçsız yazılır — bu dosya bir blade şablonu
// olduğu için yorum içindeki bir bileşen etiketi de derlenir ve TÜM paneli kırar.
(function () {
    if (window.__qvTitleEditBound) return;
    window.__qvTitleEditBound = true;

    const CSRF = () => (document.querySelector('meta[name="csrf-token"]') || {}).content || '';

    function toast(icon, title) {
        if (typeof Swal === 'undefined') return;
        Swal.mixin({
            toast: true, position: 'top-end', showConfirmButton: false,
            timer: icon === 'error' ? 3200 : 1800, timerProgressBar: true
        }).fire({ icon: icon, title: title });
    }

    /** Kayıtlı değer boşsa üretilen adı soluk gösterir; ipucu metnini duruma göre yazar. */
    function paint(el) {
        const v = (el.dataset.value || '').trim();
        el.textContent = v || (el.dataset.auto || '');
        el.classList.toggle('is-auto', !v);
        el.title = v ? 'Başlığı düzenlemek için tıklayın' : 'Başlık eklemek için tıklayın';
    }

    /** Başlık değişince kartın yan tutamağı, yığın kaydı ve paylaşım önizlemesi de tazelenir. */
    function syncCardTitle(el) {
        const card = el.closest('.qv-card-wrapper');
        if (!card) return;
        const label = ((el.dataset.value || '').trim() || el.dataset.auto || '').trim();
        if (!label) return;
        const handle = card.querySelector('.qv-card-side-handle .handle-title');
        if (handle) handle.textContent = label;
        if (typeof qvStack !== 'undefined' && Array.isArray(qvStack)) {
            const item = qvStack.find(x => x.element === card);
            if (item) item.title = label;
        }
    }

    function beginEdit(el) {
        if (el.classList.contains('editing')) return;
        el.classList.remove('is-saved', 'is-error');
        el.classList.add('editing');

        const max = parseInt(el.dataset.maxlength || '190', 10) || 190;
        const previous = (el.dataset.value || '').trim();

        const input = document.createElement('input');
        input.type = 'text';
        input.className = 'qv-etitle-input';
        input.maxLength = max;
        input.value = previous;
        input.placeholder = el.dataset.placeholder || '';
        input.setAttribute('aria-label', 'Başlık');

        el.textContent = '';
        el.appendChild(input);
        input.focus();
        input.select();

        let closed = false;
        const commit = (keep) => {
            if (closed) return;
            closed = true;
            let val = input.value.trim().slice(0, max);

            // Boş bırakıldı: zorunlu alanda eski değere dön, değilse otomatik ada dön
            if (val === '' && el.dataset.required === '1') val = previous;

            el.classList.remove('editing');
            if (!keep || val === previous) { paint(el); return; }

            el.dataset.value = val;
            paint(el);

            // Kendi otomatik kaydı olan kartlar: değeri karttaki forma yaz, kayıt
            // isteğini kartın kendi mekanizması göndersin (çift kayıt olmasın).
            if (el.dataset.target) {
                const card = el.closest('.qv-card-wrapper') || document;
                const input = card.querySelector(el.dataset.target);
                if (input) {
                    input.value = val;
                    input.dispatchEvent(new Event('input', { bubbles: true }));
                    input.dispatchEvent(new Event('change', { bubbles: true }));
                }
                syncCardTitle(el);
                el.classList.add('is-saved');
                setTimeout(() => el.classList.remove('is-saved'), 1600);
                return;
            }

            el.classList.add('is-saving');

            fetch(el.dataset.url, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF() },
                body: JSON.stringify({ field: el.dataset.field, value: val })
            })
                .then(res => res.json().then(d => ({ ok: res.ok, d: d || {} })).catch(() => ({ ok: res.ok, d: {} })))
                .then(({ ok, d }) => {
                    el.classList.remove('is-saving');
                    // Sunucu `success` alanı döndürmeyebilir (ör. görevler) → HTTP durumu esas alınır
                    if (!ok || d.success === false) {
                        el.dataset.value = previous;
                        paint(el);
                        el.classList.add('is-error');
                        setTimeout(() => el.classList.remove('is-error'), 2400);
                        toast('error', d.message || 'Başlık güncellenemedi.');
                        return;
                    }
                    // Bazı denetleyiciler boş değeri '—' olarak döndürür → başlığa yazma
                    if (typeof d.display_value === 'string' && d.display_value !== '' && d.display_value !== '—') {
                        el.dataset.value = d.display_value.trim();
                        paint(el);
                    }
                    syncCardTitle(el);
                    el.classList.add('is-saved');
                    setTimeout(() => el.classList.remove('is-saved'), 1600);
                    toast('success', 'Başlık güncellendi');
                })
                .catch(() => {
                    el.classList.remove('is-saving');
                    el.dataset.value = previous;
                    paint(el);
                    el.classList.add('is-error');
                    setTimeout(() => el.classList.remove('is-error'), 2400);
                    toast('error', 'Bağlantı hatası — başlık kaydedilemedi.');
                });
        };

        input.addEventListener('blur', () => commit(true));
        input.addEventListener('keydown', e => {
            if (e.key === 'Enter') { e.preventDefault(); commit(true); }
            if (e.key === 'Escape') { e.preventDefault(); commit(false); }
        });
    }

    document.addEventListener('click', e => {
        const el = e.target.closest('[data-qv-title]');
        if (!el || el.classList.contains('editing')) return;
        e.preventDefault();
        beginEdit(el);
    });

    // Ters yön: bağlı form alanı (data-target) elle değiştirilirse başlık da tazelenir
    document.addEventListener('input', e => {
        const card = e.target.closest && e.target.closest('.qv-card-wrapper');
        if (!card) return;
        card.querySelectorAll('[data-qv-title][data-target]').forEach(el => {
            if (el.classList.contains('editing')) return;
            if (card.querySelector(el.dataset.target) !== e.target) return;
            el.dataset.value = (e.target.value || '').trim();
            paint(el);
            syncCardTitle(el);
        });
    });

    // Klavye: başlık odaklanabilir; Enter/Space düzenlemeyi açar (sadece fare değil)
    document.addEventListener('keydown', e => {
        if (e.key !== 'Enter' && e.key !== ' ') return;
        const el = e.target && e.target.matches && e.target.matches('[data-qv-title]') ? e.target : null;
        if (!el || el.classList.contains('editing')) return;
        e.preventDefault();
        beginEdit(el);
    });
})();

// ── Quick-view: "Mesaj olarak gönder" ──
function qvShareBarToggle(show) {
    const bar = document.getElementById('qvShareBar');
    if (bar) bar.style.display = show ? 'block' : 'none';
}
(function () {
    const CSRF = () => (document.querySelector('meta[name="csrf-token"]') || {}).content;
    let qvShareContacts = [];
    let qvShareSelected = new Set();
    let qvSearchT = null;
    const $qv = id => document.getElementById(id);
    const esc = s => { const d = document.createElement('div'); d.textContent = s == null ? '' : s; return d.innerHTML; };
    const hue = str => { let h = 0; for (let i = 0; i < (str || '').length; i++) h = str.charCodeAt(i) + ((h << 5) - h); return Math.abs(h) % 360; };

    window.openQvShare = function () {
        if (typeof activeQuickViewUrl === 'undefined' || !activeQuickViewUrl) return;
        qvShareSelected = new Set();
        $qv('qvShareBody').value = '';
        $qv('qvShareSearch').value = '';
        const item = (typeof qvStack !== 'undefined') ? qvStack.find(x => x.url === activeQuickViewUrl) : null;
        $qv('qvSharePreview').innerHTML = `<i class="fas fa-share-nodes"></i><span>${esc((item && item.title) || 'Kart')}</span>`;
        updateCount();
        loadContacts('');
        $qv('qvShareModal').classList.add('open');
        setTimeout(() => $qv('qvShareSearch').focus(), 100);
    };
    window.closeQvShare = function () { $qv('qvShareModal').classList.remove('open'); };

    // ── Quick-view bağlantısını kopyala / paylaş (tüm modüller) ──
    function qvFallbackCopy(text) {
        var ta = document.createElement('textarea');
        ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';
        document.body.appendChild(ta); ta.focus(); ta.select();
        try { document.execCommand('copy'); } catch (e) {}
        document.body.removeChild(ta);
    }
    function qvToast(msg, icon) {
        if (typeof Swal === 'undefined') { return; }
        Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 1800, timerProgressBar: true })
            .fire({ icon: icon || 'success', title: msg });
    }
    // Paylaşılabilir bağlantı: quick-view AJAX parçası TEK BAŞINA (stilsiz) açılır;
    // bunun yerine mevcut uygulama sayfasına `?qv=<parça-url>` eklenir. Bağlantı
    // açıldığında sayfa tam yüklenir ve drawer otomatik açılır (aşağıdaki init).
    function qvShareableUrl() {
        if (typeof activeQuickViewUrl === 'undefined' || !activeQuickViewUrl) return null;
        var frag = /^https?:\/\//.test(activeQuickViewUrl)
            ? activeQuickViewUrl.replace(window.location.origin, '')
            : activeQuickViewUrl;
        var u = new URL(window.location.href);
        u.searchParams.set('qv', frag);
        return u.toString();
    }
    window.copyQvLink = function () {
        var url = qvShareableUrl();
        if (!url) { qvToast('Kopyalanacak bağlantı bulunamadı.', 'error'); return; }
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(url).then(function () { qvToast('Bağlantı kopyalandı'); })
                .catch(function () { qvFallbackCopy(url); qvToast('Bağlantı kopyalandı'); });
        } else {
            qvFallbackCopy(url); qvToast('Bağlantı kopyalandı');
        }
    };
    // Cihaz destekliyorsa yerel paylaşım (mobil), değilse bağlantıyı kopyalar.
    window.shareQvLink = function () {
        var url = qvShareableUrl();
        if (!url) { qvToast('Paylaşılacak bağlantı bulunamadı.', 'error'); return; }
        var item = (typeof qvStack !== 'undefined') ? qvStack.find(function (x) { return x.url === activeQuickViewUrl; }) : null;
        var title = (item && item.title) || 'Kayıt';
        if (navigator.share) {
            navigator.share({ title: title, url: url }).catch(function () {});
        } else {
            window.copyQvLink();
        }
    };

    // Genel "tek tıkla kopyala": [data-copy="değer"] olan öğeye tıklanınca panoya kopyalar.
    document.addEventListener('click', function (e) {
        var el = e.target.closest('[data-copy]');
        if (!el) return;
        var text = el.getAttribute('data-copy');
        if (text === null || text === '') return;
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function () { qvToast('Kopyalandı'); }).catch(function () { qvFallbackCopy(text); qvToast('Kopyalandı'); });
        } else { qvFallbackCopy(text); qvToast('Kopyalandı'); }
        // Kısa görsel geri bildirim
        el.classList.add('qv-copied');
        setTimeout(function () { el.classList.remove('qv-copied'); }, 700);
    });

    // Paylaşılan `?qv=` bağlantısıyla gelindiyse ilgili quick-view'ı otomatik aç.
    document.addEventListener('DOMContentLoaded', function () {
        try {
            var params = new URLSearchParams(window.location.search);
            var qv = params.get('qv');
            // Yalnızca uygulama içi göreli yollara izin ver (//host veya http:// engellenir).
            if (qv && /^\/(?!\/)/.test(qv) && typeof openQuickView === 'function') {
                openQuickView(qv);
                params.delete('qv');
                var clean = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
                window.history.replaceState({}, '', clean);
            }
        } catch (e) {}
    });

    function loadContacts(q) {
        const list = $qv('qvShareList');
        list.innerHTML = '<div style="text-align:center;color:#94a3b8;padding:18px;font-size:.85rem">Yükleniyor…</div>';
        fetch(`{{ route('agency.chat.contacts') }}?q=${encodeURIComponent(q)}`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.json()).then(d => { qvShareContacts = d.contacts || []; renderContacts(); })
            .catch(() => { list.innerHTML = '<div style="color:#94a3b8;padding:18px;font-size:.85rem;text-align:center">Hata</div>'; });
    }
    function renderContacts() {
        const list = $qv('qvShareList');
        if (!qvShareContacts.length) { list.innerHTML = '<div style="text-align:center;color:#94a3b8;padding:18px;font-size:.85rem">Kişi bulunamadı.</div>'; return; }
        list.innerHTML = qvShareContacts.map(u => {
            const sel = qvShareSelected.has(u.id);
            const av = u.avatar ? `style="background-image:url('${u.avatar}')"` : `style="background:hsl(${hue(u.name)},58%,52%)"`;
            return `<div class="qv-share-row ${sel ? 'sel' : ''}" data-id="${u.id}">
                <span class="qv-share-av" ${av}>${u.avatar ? '' : esc(u.initials || '?')}</span>
                <span class="qv-share-name">${esc(u.name)}</span>
                <span class="qv-share-check">${sel ? '<i class="fas fa-check"></i>' : ''}</span>
            </div>`;
        }).join('');
        list.querySelectorAll('.qv-share-row').forEach(row => row.addEventListener('click', () => {
            const id = +row.dataset.id;
            qvShareSelected.has(id) ? qvShareSelected.delete(id) : qvShareSelected.add(id);
            renderContacts(); updateCount();
        }));
    }
    function updateCount() {
        $qv('qvShareCount').textContent = qvShareSelected.size + ' kişi seçili';
        $qv('qvShareSend').disabled = qvShareSelected.size === 0;
    }

    window.sendQvShare = function () {
        if (!activeQuickViewUrl || qvShareSelected.size === 0) return;
        const btn = $qv('qvShareSend'), orig = btn.innerHTML;
        btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Gönderiliyor…';
        fetch(`{{ route('agency.chat.share') }}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF(), 'Accept': 'application/json' },
            body: JSON.stringify({ url: activeQuickViewUrl, user_ids: [...qvShareSelected], body: $qv('qvShareBody').value })
        }).then(async r => ({ ok: r.ok, d: await r.json().catch(() => ({})) })).then(({ ok, d }) => {
            btn.disabled = false; btn.innerHTML = orig;
            if (ok && d.success) { closeQvShare(); notify(d.message || 'Gönderildi.', true); }
            else notify(d.message || 'Gönderilemedi.', false);
        }).catch(() => { btn.disabled = false; btn.innerHTML = orig; notify('Bağlantı hatası.', false); });
    };
    function notify(msg, ok) {
        if (window.Swal) Swal.fire({ toast: true, position: 'top-end', timer: 2600, showConfirmButton: false, icon: ok ? 'success' : 'error', title: msg });
        else if (typeof toastr !== 'undefined') (ok ? toastr.success : toastr.error)(msg);
        else alert(msg);
    }

    document.addEventListener('DOMContentLoaded', function () {
        const s = $qv('qvShareSearch');
        if (s) s.addEventListener('input', function () { clearTimeout(qvSearchT); const q = this.value; qvSearchT = setTimeout(() => loadContacts(q), 250); });
        const modal = $qv('qvShareModal');
        if (modal) modal.addEventListener('click', e => { if (e.target.id === 'qvShareModal') closeQvShare(); });
    });
})();
</script>

{{-- ── DURUM PİLİ SEÇİCİ (ortak kalıp) ─────────────────────────────────────
     Header'daki durum rozetleri eski inline-editable native select yerine bu
     küçük özel menüyle düzenlenir. Kart tarafı yalnızca işaretleme verir:

       <span class="sb aktif-sinifi" data-qv-pillsel data-field="status"
             data-url=".../update-field" data-value="active"
             data-options='[{"value":"active","label":"Aktif"}, …]'>Aktif</span>

     Seçim PATCH {field, value} atar; başarıda pilin metni ve değer sınıfı
     (eski value sınıfı çıkar, yenisi girer) güncellenir. --}}
<style>
    [data-qv-pillsel] { position: relative; cursor: pointer; user-select: none; }
    [data-qv-pillsel]:hover::after {
        content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
        font-size: .5rem; opacity: .55; margin-left: 5px; vertical-align: middle;
    }
    .qv-psel-menu {
        position: absolute; top: calc(100% + 6px); left: 0; z-index: 1300;
        min-width: 150px; padding: 4px;
        background: #fff; border: 1px solid #e6ecf5; border-radius: 12px;
        box-shadow: 0 14px 40px rgba(15, 23, 42, .16);
        display: flex; flex-direction: column; gap: 2px;
        animation: qvPselIn .14s ease;
        /* Pil rozetinin kendi renk/kalınlık stilini menü miras almasın */
        font-size: .78rem; font-weight: 600; color: #334155; text-transform: none; letter-spacing: 0;
    }
    @keyframes qvPselIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .qv-psel-opt {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        border: 0; background: none; text-align: left; cursor: pointer;
        font: inherit; color: #334155; padding: 6px 10px; border-radius: 8px;
        transition: background .12s, color .12s;
    }
    .qv-psel-opt:hover { background: #f1f5f9; color: #0f172a; }
    .qv-psel-opt.on { background: #eff6ff; color: #1d4ed8; font-weight: 750; }
    .qv-psel-opt.on::after {
        content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .6rem;
    }
</style>
<script>
(function () {
    if (window.__qvPillselBound) return;
    window.__qvPillselBound = true;

    var CSRF = function () { return (document.querySelector('meta[name="csrf-token"]') || {}).content || ''; };
    function note(icon, title) {
        if (typeof appToast === 'function') appToast({ icon: icon, title: title, timer: 1500 });
    }
    function closeMenus() {
        document.querySelectorAll('.qv-psel-menu').forEach(function (m) { m.remove(); });
    }

    /**
     * Pilin görünüm sınıfını takas eder.
     * Değer her zaman sınıf adı DEĞİLDİR (ör. is_active 1/0 iken sınıf
     * active/inactive), bu yüzden seçenek 'class' taşıyabilir; taşımıyorsa
     * eskisi gibi değerin kendisi sınıf kabul edilir.
     */
    window.qvPillPaint = function (pill, value, label, cls) {
        var prev = pill.dataset.valueClass || pill.dataset.value;
        if (prev) pill.classList.remove(prev);
        var next = cls || value;
        if (next) pill.classList.add(next);
        pill.dataset.value = value;
        pill.dataset.valueClass = next;
        if (label != null) pill.textContent = label;
    };

    document.addEventListener('click', function (e) {
        // Menüdeki bir seçenek
        var opt = e.target.closest('.qv-psel-opt');
        if (opt) {
            e.preventDefault(); e.stopPropagation();
            var pill = opt.closest('[data-qv-pillsel]');
            var value = opt.dataset.value;
            var label = (opt.textContent || '').trim();
            var cls = opt.dataset.cls || '';
            closeMenus();
            if (!pill || value === pill.dataset.value) return;

            fetch(pill.dataset.url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': CSRF(),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ field: pill.dataset.field, value: value })
            })
            .then(function (r) { return r.json().then(function (d) { return { ok: r.ok, d: d || {} }; }); })
            .then(function (res) {
                if (!res.ok || res.d.success === false) throw new Error(res.d.message || 'Kaydedilemedi');
                // Değer sınıfı takası: .sb active → .sb inactive gibi
                window.qvPillPaint(pill, value, label, cls);
                // Aynı alanı gösteren ledger satırı varsa o da eşitlenir
                if (typeof window.qvSyncLedgerRow === 'function') {
                    window.qvSyncLedgerRow(pill.closest('.qv-card-wrapper') || document, pill.dataset.field, value, label);
                }
                note('success', 'Güncellendi');
            })
            .catch(function (err) { note('error', err.message || 'Kaydedilemedi'); });
            return;
        }

        // Pilin kendisi: menüyü aç/kapat
        var pill2 = e.target.closest('[data-qv-pillsel]');
        if (!pill2) { closeMenus(); return; }
        e.preventDefault(); e.stopPropagation();
        var wasOpen = pill2.querySelector('.qv-psel-menu');
        closeMenus();
        if (wasOpen) return;

        var opts;
        try { opts = JSON.parse(pill2.dataset.options || '[]'); } catch (err) { opts = []; }
        if (!opts.length) return;
        var menu = document.createElement('div');
        menu.className = 'qv-psel-menu';
        opts.forEach(function (o) {
            var b = document.createElement('button');
            b.type = 'button';
            b.className = 'qv-psel-opt' + (String(o.value) === String(pill2.dataset.value) ? ' on' : '');
            b.dataset.value = o.value;
            if (o.class) b.dataset.cls = o.class;
            b.textContent = o.label;
            menu.appendChild(b);
        });
        pill2.appendChild(menu);
    });

    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenus(); });
})();
</script>