{{--
    Quick-view kartlarında ortak "klasik tablo" dili.

    Müşteri/tedarikçi kartlarındaki liste sekmeleri (yolcular, faturalar,
    dökümanlar, ödemeler) bu tabloyu kullanır: ince çizgiler, küçük başlık
    satırı, sayısal alanlarda mono yazı tipi. Renkler tema değişkenlerinden
    geldiği için koyu tema ayrıca override istemez.

    Kullanım:
      @include('agency.partials.qv-table')            (stil + JS, bir kez)

      <div class="qvt-box">
        <table class="qvt">
          <thead><tr><th>…</th><th class="ta-r">Tutar</th><th class="qvt-w1"></th></tr></thead>
          <tbody>
            <tr class="qvt-click" data-quickview-url="…">
              <td><span class="qvt-c" data-copy="0532…">0532…</span></td>
              …
            </tr>
          </tbody>
        </table>
      </div>

    Kopyalama: değeri <span class="qvt-c" data-copy="…"> ile sarmalayın —
    üzerine gelince kopyala simgesi belirir. data-copy verilmezse hücrenin
    metni kopyalanır. Satırın tamamı için: <button class="qvt-copyall" data-copy="…">
--}}
@once
<style>
    .qvt-box {
        background: var(--bg-card, #fff);
        border: 1px solid var(--border-1, #e8edf4);
        border-radius: 13px;
        overflow: hidden;
    }
    .qvt-box + .qvt-box { margin-top: .7rem; }
    .qvt-scroll { overflow-x: auto; }

    .qvt {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-family: 'Manrope', system-ui, sans-serif;
    }

    .qvt thead th {
        text-align: left;
        font-size: .63rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-3, #94a3b8);
        background: var(--bg-inset, #f8fafc);
        padding: 8px 12px;
        border-bottom: 1px solid var(--border-1, #e8edf4);
        white-space: nowrap;
    }

    .qvt tbody td {
        padding: 9px 12px;
        font-size: .79rem;
        color: var(--text-2, #334155);
        border-bottom: 1px solid var(--border-2, #f1f5f9);
        vertical-align: middle;
    }
    .qvt tbody tr:last-child > td { border-bottom: none; }
    .qvt tbody tr:hover > td { background: var(--bg-hover, #f8fafc); }
    .qvt tbody tr.qvt-click { cursor: pointer; }
    .qvt tbody tr.is-muted > td { opacity: .55; }

    /* Hizalama / genişlik yardımcıları */
    .qvt .ta-r { text-align: right; }
    .qvt .ta-c { text-align: center; }
    .qvt .qvt-w1 { width: 1%; white-space: nowrap; }
    .qvt .qvt-nowrap { white-space: nowrap; }
    .qvt .qvt-trunc { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Metin tonları */
    .qvt .qvt-strong { font-weight: 700; color: var(--text-1, #0f172a); }
    .qvt .qvt-dim { color: var(--text-3, #94a3b8); }
    .qvt .qvt-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .qvt .qvt-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; color: var(--text-1, #0f172a); white-space: nowrap; }
    .qvt .qvt-num.pos { color: #059669; }
    .qvt .qvt-num.neg { color: #e11d48; }
    .qvt .qvt-num small { font-size: .66rem; font-weight: 600; opacity: .7; }
    .qvt .qvt-none { color: var(--text-3, #cbd5e1); }

    /* Durum rozeti — rengi --sc değişkeninden alır */
    .qvt .qvt-badge {
        display: inline-block; font-size: .62rem; font-weight: 800; line-height: 1.7;
        padding: 0 8px; border-radius: 999px; white-space: nowrap;
        color: var(--sc, #64748b);
        background: color-mix(in srgb, var(--sc, #64748b) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--sc, #64748b) 26%, transparent);
    }
    .qvt .qvt-chip {
        display: inline-block; font-size: .63rem; font-weight: 700; line-height: 1.7;
        padding: 0 7px; border-radius: 6px; white-space: nowrap;
        background: var(--bg-hover, #f1f5f9); color: var(--text-3, #64748b);
    }
    .qvt .qvt-chip.warn { background: #fffbeb; color: #b45309; }
    .qvt .qvt-chip.danger { background: #fef2f2; color: #dc2626; }
    .qvt .qvt-chip.ok { background: #ecfdf5; color: #047857; }

    /* Satır içi çapraz bağlantı */
    .qvt .qvt-link { cursor: pointer; color: #4f46e5; border-bottom: 1px dotted currentColor; }
    .qvt .qvt-link:hover { color: #4338ca; }

    /* ── Kopyalanabilir hücre ──────────────────────────────────── */
    .qvt .qvt-c { position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
    .qvt .qvt-c::after {
        content: '\f0c5';
        font-family: 'Font Awesome 6 Free'; font-weight: 900;
        font-size: .62rem; color: var(--text-3, #94a3b8);
        opacity: 0; cursor: pointer; transition: opacity .12s, color .12s;
    }
    .qvt tbody tr:hover .qvt-c::after { opacity: .55; }
    .qvt .qvt-c:hover::after { opacity: 1; color: #4f46e5; }
    .qvt .qvt-c.ok::after { content: '\f00c'; opacity: 1; color: #059669; }

    /* Satırın tamamını kopyala */
    .qvt .qvt-copyall {
        border: none; background: transparent; cursor: pointer; padding: 2px 5px; border-radius: 6px;
        color: var(--text-3, #cbd5e1); font-size: .72rem; opacity: 0; transition: opacity .12s, background .12s, color .12s;
    }
    .qvt tbody tr:hover .qvt-copyall { opacity: 1; }
    .qvt .qvt-copyall:hover { background: var(--bg-raise, #e2e8f0); color: #4f46e5; }
    .qvt .qvt-copyall.ok { opacity: 1; color: #059669; }

    /* Satır sonu eylem düğmeleri */
    .qvt .qvt-act {
        border: none; background: transparent; cursor: pointer; padding: 3px 6px; border-radius: 6px;
        color: var(--text-3, #cbd5e1); font-size: .72rem; transition: background .12s, color .12s;
    }
    .qvt .qvt-act:hover { background: var(--bg-raise, #e2e8f0); color: var(--text-1, #0f172a); }
    .qvt .qvt-act.danger:hover { background: #fef2f2; color: #dc2626; }

    /* Üst çubuk (sayaç + ekle düğmesi) — liste bileşenleriyle ortak */
    .qvt-bar { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
    .qvt-bar-info { font-size: .74rem; font-weight: 700; color: var(--text-3, #94a3b8); }
    .qvt-bar-info i { margin-right: 4px; }
    .qvt-bar .qvt-bar-r { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

    /* Boş durum — tablo gövdesi içinde */
    .qvt .qvt-empty td { padding: 2rem 1rem; text-align: center; color: var(--text-3, #94a3b8); }
    .qvt .qvt-empty i { display: block; font-size: 1.5rem; color: var(--border-1, #cbd5e1); margin-bottom: 6px; }
    .qvt .qvt-empty b { display: block; font-size: .84rem; color: var(--text-2, #475569); }
    .qvt .qvt-empty span { font-size: .73rem; }

    /* Alt toplam satırı */
    .qvt tfoot td {
        padding: 8px 12px; font-size: .74rem; font-weight: 800;
        color: var(--text-2, #475569);
        background: var(--bg-inset, #f8fafc);
        border-top: 1px solid var(--border-1, #e8edf4);
    }

    @media (max-width: 760px) {
        .qvt-scroll { overflow-x: auto; }
        .qvt { min-width: 620px; }
    }
</style>

<script>
(function () {
    if (window.qvtCopy) return;

    function note(icon, title) {
        if (typeof window.appToast === 'function') window.appToast({ icon: icon, title: title, timer: 1400 });
    }

    function flash(el) {
        if (!el) return;
        el.classList.add('ok');
        setTimeout(function () { el.classList.remove('ok'); }, 1000);
    }

    /** Metni panoya kopyalar; el verilirse üzerinde onay animasyonu oynatır. */
    window.qvtCopy = function (text, el) {
        text = (text == null ? '' : String(text)).trim();
        if (!text) { note('info', 'Kopyalanacak bilgi yok'); return; }

        var done = function () { flash(el); note('success', 'Kopyalandı'); };

        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(done).catch(function () { fallback(text, done); });
        } else {
            fallback(text, done);
        }
    };

    function fallback(text, done) {
        var ta = document.createElement('textarea');
        ta.value = text;
        ta.style.cssText = 'position:fixed;top:-1000px;opacity:0';
        document.body.appendChild(ta);
        ta.select();
        var ok = false;
        try { ok = document.execCommand('copy'); } catch (e) { ok = false; }
        ta.remove();
        ok ? done() : note('error', 'Kopyalanamadı');
    }

    // Hücre kopyalama: simgeye tıklanınca satır tıklaması (kart açma) tetiklenmesin
    document.addEventListener('click', function (e) {
        var all = e.target.closest('.qvt .qvt-copyall');
        if (all) {
            e.preventDefault(); e.stopPropagation();
            window.qvtCopy(all.dataset.copy || '', all);
            return;
        }

        var cell = e.target.closest('.qvt .qvt-c');
        if (!cell) return;

        // Yalnızca sağdaki kopyala simgesi tıklanabilir; metnin kendisi seçilebilir kalsın
        var r = cell.getBoundingClientRect();
        if (e.clientX < r.right - 16) return;

        e.preventDefault(); e.stopPropagation();
        window.qvtCopy(cell.dataset.copy != null ? cell.dataset.copy : cell.textContent, cell);
    }, true);
})();
</script>
@endonce