@php
    $statusSteps = [
        'potential' => ['label' => 'Potansiyel'],
        'offer_sent' => ['label' => 'Teklif Verildi'],
        'revised' => ['label' => 'Revize Edildi'],
        'confirmed' => ['label' => 'Satış Tamamlandı'],
        'in_progress' => ['label' => 'Devam Ediyor'],
        'completed' => ['label' => 'Kapanan'],
    ];
    $currentStatus = $reservation->status;
    $statusKeys = array_keys($statusSteps);
    $statusIndex = array_search($currentStatus, $statusKeys);
    if ($statusIndex === false)
        $statusIndex = -1;
    $isCancelled = in_array($currentStatus, ['cancelled', 'refunded']);
@endphp

<x-quick-view.layout class="qv-sales-wrapper qv-wrapper">

    {{-- ═══ HEADER ═══ --}}
    <div class="sqv-header">
        <div class="sqv-header-left">
            <div class="sqv-icon"
                style="background:{{ $reservation->status_color }}15; color:{{ $reservation->status_color }}">
                <i class="fas {{ $reservation->productType->icon ?? 'fa-shopping-cart' }}"></i>
            </div>
            <div class="sqv-title-group">
                <h3 class="sqv-title inline-editable" data-field="title" data-id="{{ $reservation->id }}"
                    data-url="{{ route('agency.sales.update-field', $reservation) }}">
                    {{ $reservation->title ?? $reservation->reservation_code }}
                </h3>
                <div class="sqv-subtitle">
                    <span class="sqv-code">{{ $reservation->reservation_code }}</span>
                    <span class="sqv-dot">•</span>
                    <a href="javascript:void(0)" onclick="openCustomerDrawer({{ $reservation->customer_id }})"
                        class="sqv-customer-link"><i class="fas fa-user"></i>
                        {{ $reservation->customer->full_name }}</a>
                    <span class="sqv-dot">•</span>
                    <span><i
                            class="fas fa-calendar-alt me-1"></i>{{ $reservation->start_date->translatedFormat('d M Y') }}</span>
                    @if($reservation->end_date && $reservation->end_date->ne($reservation->start_date))
                        <span>→ {{ $reservation->end_date->translatedFormat('d M Y') }}</span>
                    @endif
                </div>
            </div>
        </div>
        <div class="sqv-header-right">
            @if($reservation->customer->phone)
                <a href="tel:{{ $reservation->customer->phone }}" class="sqv-quick-btn" title="Ara"><i
                        class="fas fa-phone"></i></a>
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $reservation->customer->phone) }}" target="_blank"
                    class="sqv-quick-btn whatsapp" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
            @endif
            @if($reservation->customer->emails)
                <a href="mailto:{{ is_array($reservation->customer->emails) ? ($reservation->customer->emails[0] ?? '') : $reservation->customer->emails }}"
                    class="sqv-quick-btn" title="E-posta"><i class="fas fa-envelope"></i></a>
            @endif
            <a href="{{ route('agency.sales.edit', $reservation) }}" class="sqv-quick-btn edit" title="Tam Düzenleme"><i
                    class="fas fa-pen"></i></a>
            <button class="qv-action-btn qv-minimize" onclick="minimizeQuickView()" title="Küçült"><i
                    class="fas fa-minus"></i></button>
            <button class="qv-action-btn qv-close" onclick="closeQuickView()" title="Kapat"><i
                    class="fas fa-times"></i></button>
        </div>
    </div>

    {{-- ═══ PIPELINE (Bitrix Style) ═══ --}}
    <div class="sqv-pipeline-wrap">
        @if($isCancelled)
            <div class="sqv-cancelled-bar"><i class="fas fa-ban me-2"></i> Bu satış
                <strong>{{ $reservation->status_label }}</strong> durumundadır.@if($reservation->cancellation_reason)<span
                class="ms-2 opacity-75">— {{ $reservation->cancellation_reason }}</span>@endif
            </div>
        @else
            <div class="sqv-pipeline">
                @foreach($statusSteps as $key => $step)
                    @php
                        $stepIdx = array_search($key, $statusKeys);
                        $isCompleted = $stepIdx < $statusIndex;
                        $isCurrent = $key === $currentStatus;
                        $cls = $isCurrent ? 'current' : ($isCompleted ? 'done' : 'future');
                    @endphp
                    <div class="sqv-seg {{ $cls }}" onclick="updateSaleStatus('{{ $key }}')" title="{{ $step['label'] }}">
                        <span class="sqv-seg-label">{{ $step['label'] }}</span>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- ═══ METRICS ═══ --}}
    <div class="sqv-metrics-bar">
        <div class="sqv-metric-item"><span class="sqv-metric-label">TOPLAM</span><span
                class="sqv-metric-val">₺{{ number_format($reservation->total_amount, 2, ',', '.') }}</span></div>
        <div class="sqv-metric-divider"></div>
        <div class="sqv-metric-item"><span class="sqv-metric-label">ÖDENEN</span><span
                class="sqv-metric-val text-success">₺{{ number_format($reservation->paid_amount, 2, ',', '.') }}</span>
        </div>
        <div class="sqv-metric-divider"></div>
        <div class="sqv-metric-item"><span class="sqv-metric-label">KALAN</span><span
                class="sqv-metric-val {{ $reservation->remaining_amount > 0 ? 'text-danger' : 'text-muted' }}">₺{{ number_format($reservation->remaining_amount, 2, ',', '.') }}</span>
        </div>
        <div class="sqv-metric-divider"></div>
        <div class="sqv-metric-item"><span class="sqv-metric-label">KİŞİ</span><span
                class="sqv-metric-val">{{ $reservation->adult_count + $reservation->child_count + $reservation->infant_count }}</span>
        </div>
        <div class="sqv-metric-divider"></div>
        <div class="sqv-metric-item"><span class="sqv-metric-label">ÖDEME</span><span class="sqv-metric-val"
                style="font-size:0.8rem">{{ $reservation->payment_status_label }}</span></div>
    </div>

    {{-- ═══ TABS ═══ --}}
    <x-quick-view.header>
        <x-slot:tabs>
            <x-quick-view.tab id="general" label="Genel" icon="fas fa-th-large" active="true" />
            <x-quick-view.tab id="products" label="Ürünler" icon="fas fa-box" :count="$reservation->items->count()" />
            <x-quick-view.tab id="activities" label="Geçmiş" icon="fas fa-history"
                :count="$reservation->activities->count()" />
            <x-quick-view.tab id="documents" label="Belgeler" icon="fas fa-folder-open" />
        </x-slot:tabs>
    </x-quick-view.header>

    {{-- ═══ CONTENT ═══ --}}
    <x-quick-view.content>
        {{-- TAB: GENEL --}}
        <div id="qv-tab-general" class="qv-tab-panel active">
            <div class="p-4">
                <div class="row g-4">
                    <div class="col-md-7">
                        <div class="sqv-card mb-4">
                            <h6 class="sqv-card-title"><i class="fas fa-info-circle me-2 text-primary"></i>Satış
                                Bilgileri</h6>
                            <div class="row g-3">
                                <div class="col-6">
                                    <div class="sqv-field"><label>Rezervasyon Kodu</label>
                                        <div>{{ $reservation->reservation_code }}</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="sqv-field"><label>Durum</label>
                                        <div class="inline-editable" data-field="status" data-type="select"
                                            data-id="{{ $reservation->id }}"
                                            data-options='@json(collect($statusSteps)->map(fn($v, $k) => ["value" => $k, "label" => $v["label"]])->values())'
                                            data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                            {{ $reservation->status_label }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="sqv-field"><label>Başlangıç</label>
                                        <div class="inline-editable" data-field="start_date" data-type="date"
                                            data-id="{{ $reservation->id }}"
                                            data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                            {{ $reservation->start_date->format('Y-m-d') }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="sqv-field"><label>Bitiş</label>
                                        <div class="inline-editable" data-field="end_date" data-type="date"
                                            data-id="{{ $reservation->id }}"
                                            data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                            {{ $reservation->end_date ? $reservation->end_date->format('Y-m-d') : '—' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="sqv-field"><label>Sorumlu</label>
                                        <div class="inline-editable" data-field="assigned_to" data-type="select"
                                            data-id="{{ $reservation->id }}"
                                            data-options='@json($agents->map(fn($u) => ["value" => $u->id, "label" => $u->full_name])->values())'
                                            data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                            {{ $reservation->assignedAgent->full_name ?? 'Atanmamış' }}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="sqv-field"><label>Ürün Tipi</label>
                                        <div>{{ $reservation->productType->name ?? '—' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="sqv-card sqv-notes-card">
                            <h6 class="sqv-card-title"><i class="fas fa-sticky-note me-2"
                                    style="color:#f59e0b"></i>Notlar</h6>
                            <div class="sqv-note-section">
                                <label>Müşteri Notu</label>
                                <div class="inline-editable" data-field="customer_note" data-type="textarea"
                                    data-id="{{ $reservation->id }}"
                                    data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                    {{ $reservation->customer_note ?? 'Not bulunmuyor...' }}
                                </div>
                            </div>
                            <hr style="border-color:#fef3c7">
                            <div class="sqv-note-section">
                                <label>Dahili Not</label>
                                <div class="inline-editable" data-field="internal_note" data-type="textarea"
                                    data-id="{{ $reservation->id }}"
                                    data-url="{{ route('agency.sales.update-field', $reservation) }}">
                                    {{ $reservation->internal_note ?? 'Sadece çalışanlar görebilir...' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- TAB: ÜRÜNLER --}}
        <div id="qv-tab-products" class="qv-tab-panel">
            <div class="p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h6 class="sqv-card-title mb-0"><i class="fas fa-box me-2 text-primary"></i>Satış Kalemleri</h6>
                    <button class="btn btn-primary btn-sm" style="border-radius:10px;font-weight:700"
                        onclick="showAddItemModal()"><i class="fas fa-plus me-1"></i>Yeni Ekle</button>
                </div>
                <div class="table-responsive">
                    <table class="table" style="font-size:0.88rem">
                        <thead>
                            <tr style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em;color:#64748b">
                                <th>Ürün / Hizmet</th>
                                <th class="text-center">Adet</th>
                                <th class="text-end">Birim</th>
                                <th class="text-end">Toplam</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($reservation->items as $item)
                                <tr>
                                    <td>
                                        <div class="fw-bold">{{ $item->name }}</div>
                                    </td>
                                    <td class="text-center">{{ (float) $item->quantity }}</td>
                                    <td class="text-end">{{ number_format($item->unit_price, 2) }} {{ $item->currency }}
                                    </td>
                                    <td class="text-end fw-bold">{{ number_format($item->total_price, 2) }}
                                        {{ $item->currency }}
                                    </td>
                                    <td class="text-end"><button class="btn btn-link btn-sm text-danger p-0"
                                            onclick="removeItem({{ $item->id }})"><i class="fas fa-trash"></i></button></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center p-4 text-muted">Henüz ürün eklenmemiş.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- TAB: GEÇMİŞ --}}
        <div id="qv-tab-activities" class="qv-tab-panel">
            <div class="p-4">
                @forelse($reservation->activities->sortByDesc('created_at') as $activity)
                    <div class="sqv-activity-row">
                        <div class="sqv-activity-dot"></div>
                        <div class="sqv-activity-body">
                            <div class="d-flex justify-content-between"><span
                                    class="fw-bold small">{{ $activity->subject }}</span><span class="text-muted"
                                    style="font-size:0.72rem">{{ $activity->created_at->diffForHumans() }}</span></div>
                            <div class="text-muted small">{{ $activity->description }}</div>
                            <span class="badge bg-light text-muted mt-1"
                                style="font-size:0.65rem">{{ $activity->performer->full_name ?? 'Sistem' }}</span>
                        </div>
                    </div>
                @empty
                    <p class="text-center p-5 text-muted">Henüz aktivite kaydı bulunmuyor.</p>
                @endforelse
            </div>
        </div>

        {{-- TAB: BELGELER --}}
        <div id="qv-tab-documents" class="qv-tab-panel">
            <div class="p-4 text-center text-muted py-5"><i class="fas fa-folder-open mb-3"
                    style="font-size:2.5rem;opacity:0.3"></i>
                <p class="fw-700">Belgeler modülü yakında...</p>
            </div>
        </div>
    </x-quick-view.content>

    {{-- MODAL --}}
    <div class="modal fade" id="qvAddItemModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Yeni Ürün Ekle</h5><button type="button" class="btn-close"
                        data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="qvAddItemForm">
                        <div class="mb-3"><label class="form-label">Ürün/Hizmet Adı</label><input type="text"
                                name="name" class="form-control" required></div>
                        <div class="row">
                            <div class="col-6"><label class="form-label">Adet</label><input type="number"
                                    name="quantity" class="form-control" value="1" step="0.01" required></div>
                            <div class="col-6"><label class="form-label">Birim Fiyat</label>
                                <div class="input-group"><input type="number" name="unit_price" class="form-control"
                                        step="0.01" required><select name="currency" class="form-select"
                                        style="max-width:80px">
                                        <option>TRY</option>
                                        <option>USD</option>
                                        <option>EUR</option>
                                    </select></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer"><button type="button" class="btn btn-light"
                        data-bs-dismiss="modal">İptal</button><button type="button" class="btn btn-primary"
                        onclick="submitAddItem()">Ekle</button></div>
            </div>
        </div>
    </div>

    {{-- FOOTER --}}
    <x-quick-view.footer>
        <div class="text-muted small"><i class="fas fa-clock me-1"></i>
            {{ $reservation->created_at->format('d.m.Y H:i') }} — {{ $reservation->creator->full_name ?? 'Sistem' }}
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary btn-sm" onclick="closeQuickView()"
                style="border-radius:10px">Kapat</button>
            <a href="{{ route('agency.sales.edit', $reservation) }}" class="btn btn-primary btn-sm"
                style="border-radius:10px;font-weight:700">Tam Düzenleme</a>
        </div>
    </x-quick-view.footer>
</x-quick-view.layout>

<script>
    function updateSaleStatus(s) { if (s === '{{ $currentStatus }}') return; Swal.fire({ title: 'Durum Güncellensin mi?', text: 'Satış aşaması güncellenecektir.', icon: 'question', showCancelButton: true, confirmButtonText: 'Güncelle', cancelButtonText: 'Vazgeç' }).then(r => { if (r.isConfirmed) { fetch('{{ route("agency.sales.update-field", $reservation) }}', { method: 'PATCH', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, body: JSON.stringify({ field: 'status', value: s }) }).then(r => r.json()).then(d => { if (d.success) openSaleDrawer({{ $reservation->id }}) }); } }); }
    function showAddItemModal() { new bootstrap.Modal(document.getElementById('qvAddItemModal')).show(); }
    function submitAddItem() { var d = Object.fromEntries(new FormData(document.getElementById('qvAddItemForm')).entries()); fetch('{{ route("agency.sales.items.store", $reservation) }}', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, body: JSON.stringify(d) }).then(r => r.json()).then(d => { if (d.success) { Swal.fire('Başarılı', d.message, 'success'); bootstrap.Modal.getInstance(document.getElementById('qvAddItemModal')).hide(); openSaleDrawer({{ $reservation->id }}, 'products'); } else Swal.fire('Hata', d.message, 'error'); }); }
    function removeItem(id) { Swal.fire({ title: 'Emin misiniz?', text: 'Bu ürün kaldırılacak!', icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', confirmButtonText: 'Sil', cancelButtonText: 'İptal' }).then(r => { if (r.isConfirmed) fetch('/agency/sales/items/' + id, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } }).then(r => r.json()).then(d => { if (d.success) { Swal.fire('Silindi', d.message, 'success'); openSaleDrawer({{ $reservation->id }}, 'products'); } }); }); }
</script>

<style>
    /* ═══ HEADER ═══ */
    .sqv-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 2rem;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        flex-shrink: 0;
        gap: 1rem;
        position: relative;
        overflow: hidden;
    }

    .sqv-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
        pointer-events: none;
    }

    .sqv-header-left {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1;
        min-width: 0
    }

    .sqv-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .sqv-title-group {
        min-width: 0
    }

    .sqv-title {
        font-size: 1.35rem;
        font-weight: 800;
        color: #fff;
        letter-spacing: -0.03em;
        margin: 0;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: text;
    }

    .sqv-title:hover {
        color: #a5b4fc
    }

    .sqv-subtitle {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.5);
        flex-wrap: wrap;
        margin-top: 4px
    }

    .sqv-code {
        font-weight: 700;
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.7rem;
        background: rgba(255, 255, 255, 0.08);
        padding: 2px 8px;
        border-radius: 6px;
        font-family: monospace
    }

    .sqv-dot {
        color: rgba(255, 255, 255, 0.2)
    }

    .sqv-customer-link {
        color: #818cf8;
        font-weight: 700;
        text-decoration: none;
        transition: all .2s
    }

    .sqv-customer-link:hover {
        color: #a5b4fc;
        text-decoration: underline
    }

    .sqv-header-right {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0
    }

    .sqv-quick-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.6);
        font-size: .9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all .25s;
        cursor: pointer;
        backdrop-filter: blur(6px);
    }

    .sqv-quick-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3)
    }

    .sqv-quick-btn.whatsapp:hover {
        background: rgba(34, 197, 94, 0.2);
        color: #4ade80;
        border-color: rgba(34, 197, 94, 0.3)
    }

    .sqv-quick-btn.edit:hover {
        background: rgba(251, 191, 36, 0.15);
        color: #fbbf24;
        border-color: rgba(251, 191, 36, 0.3)
    }

    .qv-sales-wrapper .qv-action-btn {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.5)
    }

    .qv-sales-wrapper .qv-action-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff
    }

    .qv-sales-wrapper .qv-action-btn.qv-close:hover {
        background: rgba(239, 68, 68, 0.2);
        color: #f87171;
        border-color: rgba(239, 68, 68, 0.3)
    }

    /* ═══ PIPELINE (Bitrix Segment Bar) ═══ */
    .sqv-pipeline-wrap {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        padding: 0.6rem 1.5rem;
        flex-shrink: 0
    }

    .sqv-pipeline {
        display: flex;
        gap: 5px;
        width: 100%
    }

    .sqv-seg {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 0.5rem;
        border-radius: 10px;
        cursor: pointer;
        transition: all .3s cubic-bezier(.4, 0, .2, 1);
        position: relative;
        min-height: 38px;
        border: 1.5px solid transparent;
        overflow: hidden
    }

    .sqv-seg::before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity .3s;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
        pointer-events: none
    }

    .sqv-seg:hover::before {
        opacity: 1
    }

    .sqv-seg-label {
        font-size: 0.68rem;
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: 0.02em;
        position: relative;
        z-index: 1
    }

    .sqv-seg.done {
        background: linear-gradient(135deg, #818cf8, #6366f1);
        border-color: #6366f1
    }

    .sqv-seg.done .sqv-seg-label {
        color: #fff
    }

    .sqv-seg.done:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35)
    }

    .sqv-seg.current {
        background: linear-gradient(135deg, #34d399, #10b981);
        border-color: #059669;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15)
    }

    .sqv-seg.current .sqv-seg-label {
        color: #fff;
        font-weight: 800;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
    }

    .sqv-seg.current:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35)
    }

    .sqv-seg.future {
        background: rgba(241, 245, 249, 0.8);
        border-color: #e2e8f0
    }

    .sqv-seg.future .sqv-seg-label {
        color: #94a3b8
    }

    .sqv-seg.future:hover {
        background: #e2e8f0;
        border-color: #cbd5e1;
        transform: translateY(-2px)
    }

    .sqv-cancelled-bar {
        background: linear-gradient(135deg, #fef2f2, #fee2e2);
        color: #991b1b;
        padding: 0.65rem 1.25rem;
        border-radius: 10px;
        font-size: .82rem;
        font-weight: 600;
        border: 1px solid #fecaca;
        text-align: center
    }

    /* ═══ METRICS ═══ */
    .sqv-metrics-bar {
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        padding: 0;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        flex-shrink: 0;
    }

    .sqv-metric-item {
        flex: 1;
        text-align: center;
        padding: 1rem 1.25rem;
        border-right: 1px solid #f1f5f9;
        transition: all .2s;
    }

    .sqv-metric-item:last-child {
        border-right: none
    }

    .sqv-metric-item:hover {
        background: #f8fafc
    }

    .sqv-metric-label {
        font-size: .58rem;
        font-weight: 800;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .08em;
        display: block;
        margin-bottom: 3px
    }

    .sqv-metric-val {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: -0.02em
    }

    .sqv-metric-divider {
        display: none
    }

    /* ═══ CARDS ═══ */
    .sqv-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        transition: all .25s;
    }

    .sqv-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        border-color: #cbd5e1
    }

    .sqv-card-title {
        font-size: .82rem;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center
    }

    .sqv-field {
        padding: .65rem 0;
        border-bottom: 1px solid #f8fafc;
        transition: background .2s;
    }

    .sqv-field:hover {
        background: #fafbff;
        border-radius: 8px;
        padding-left: 6px;
        padding-right: 6px
    }

    .sqv-field label {
        font-size: .65rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .04em;
        display: block;
        margin-bottom: 3px
    }

    .sqv-field div {
        font-size: .88rem;
        color: #1e293b;
        font-weight: 600
    }

    .sqv-notes-card {
        background: linear-gradient(135deg, #fffbeb, #fefce8);
        border-color: #fde68a
    }

    .sqv-notes-card:hover {
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08);
        border-color: #fbbf24
    }

    .sqv-note-section label {
        font-size: .65rem;
        font-weight: 700;
        color: #b45309;
        text-transform: uppercase;
        display: block;
        margin-bottom: .5rem
    }

    /* ═══ ACTIVITY ═══ */
    .sqv-activity-row {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.25rem;
        position: relative;
        padding-left: .5rem
    }

    .sqv-activity-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6366f1, #4f46e5);
        flex-shrink: 0;
        margin-top: 8px;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, .1)
    }

    .sqv-activity-body {
        flex: 1;
        background: #fafbff;
        border: 1px solid #e8eaf6;
        border-radius: 14px;
        padding: 1rem 1.25rem;
        transition: all .2s
    }

    .sqv-activity-body:hover {
        background: #f0f1ff;
        border-color: #c7d2fe;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.06)
    }

    /* HIDE DEFAULT HEADER TOP (we use custom) */
    .qv-sales-wrapper>.qv-header .qv-header-top {
        display: none
    }

    .qv-sales-wrapper>.qv-header {
        padding-top: 0;
        padding-bottom: 0
    }

    @media(max-width:768px) {
        .sqv-header {
            flex-direction: column;
            align-items: flex-start;
            padding: 1rem
        }

        .sqv-header-right {
            width: 100%;
            justify-content: flex-end
        }

        .sqv-pipeline {
            overflow-x: auto;
            justify-content: flex-start
        }

        .sqv-metrics-bar {
            overflow-x: auto;
            justify-content: flex-start;
            gap: 1rem
        }
    }
</style>