@php
    /**
     * PERSONEL KARTI — sabit quick-view "defter" (ledger) tasarımı.
     *
     * Müşteri kartıyla (agency/customers/quick-view) aynı bileşenler, aynı
     * sekme yapısı ve aynı yerinde-düzenleme mantığı kullanılır: künye
     * satırları PATCH update-field ile tek tek kaydedilir, liste sekmeleri
     * ortak qv-table dilini konuşur.
     *
     * Beklenen: $staff, $roles, $managers, $tasks, $sales, $customers, $stats
     * Kaydetme: PATCH agency.staff-management.staff.update-field {field, value}
     */
    $uf = route('agency.staff-management.staff.update-field', $staff);

    // Durum pili: değer 1/0, görünüm sınıfı active/inactive → seçenekler 'class' taşır
    $activeOptions = [
        ['value' => '1', 'label' => 'Aktif', 'class' => 'active'],
        ['value' => '0', 'label' => 'Pasif', 'class' => 'inactive'],
    ];
@endphp

<x-quick-view.layout class="qv-theme-staff">
    <!-- ─── HEADER ─── -->
    {{-- slim: avatar yok, başlık + rozetler tek şeritte (sabit QV tasarımı) --}}
    <x-quick-view.header :slim="true">
        <x-slot:title>
            {{-- Başlık ad+soyaddan TÜRETİLİR; tek alana yazmak veriyi bozardı.
                 İkisi ayrı ayrı düzenlenir, künyedeki satırlarla eşitlenir. --}}
            <span class="inline-editable" data-id="{{ $staff->id }}" data-url="{{ $uf }}" data-field="first_name">{{ $staff->first_name }}</span>
            <span class="inline-editable" data-id="{{ $staff->id }}" data-url="{{ $uf }}" data-field="last_name">{{ $staff->last_name }}</span>
            @if($staff->is_agency_owner)
                <i class="fas fa-crown text-warning" style="font-size: 0.95rem;" title="Acente sahibi"></i>
            @endif
        </x-slot:title>

        <x-slot:subtitle>
            {{-- Header'da avatar yok (slim); yığın tutamağı baş harfleri buradan okur --}}
            <span data-qv-avatar="{{ $staff->initials }}" hidden></span>
            {{-- Durum rozeti: ortak pil menüsü (drawer: data-qv-pillsel) --}}
            <span class="sb {{ $staff->status_class }}" role="button" tabindex="0"
                  data-qv-pillsel data-field="is_active" data-url="{{ $uf }}"
                  data-value="{{ $staff->is_active ? '1' : '0' }}"
                  data-value-class="{{ $staff->status_class }}"
                  data-options="{{ json_encode($activeOptions) }}"
                  title="Durumu değiştir">{{ $staff->status_label }}</span>

            @if($staff->employee_no)
                <span class="text-muted small fw-500">#{{ $staff->employee_no }}</span>
            @endif
            @if($staff->position)
                <span class="badge bg-primary-soft text-primary border-0 px-2" style="font-size:.68rem;font-weight:700;">{{ $staff->position }}</span>
            @endif
            @if($staff->department)
                <span class="badge bg-light text-muted border px-2" style="font-size:.68rem;font-weight:700;">
                    <i class="fas fa-sitemap me-1"></i>{{ $staff->department }}
                </span>
            @endif
            @if($staff->blood_type)
                <span class="badge bg-danger-soft text-danger border-0 px-2" style="font-size:.68rem;font-weight:800;" title="Kan grubu">
                    <i class="fas fa-droplet me-1"></i>{{ \App\Models\Agency\AgencyStaff::bloodTypes()[$staff->blood_type] ?? $staff->blood_type }}
                </span>
            @endif
            @unless($staff->user_id)
                <span class="badge bg-warning text-dark border-0 px-2" style="font-size:.68rem;font-weight:700;">Sistem Hesabı Yok</span>
            @endunless
        </x-slot:subtitle>

        <x-slot:metrics>
            <div class="qv-metric">
                <span class="qv-metric-label">KIDEM</span>
                <span class="qv-metric-val">{{ $stats['tenure'] ?: '—' }}</span>
            </div>
            <div class="qv-metric">
                <span class="qv-metric-label">AÇIK GÖREV</span>
                <span class="qv-metric-val {{ $stats['open_tasks'] > 0 ? 'text-warning' : 'text-muted' }}">{{ $stats['open_tasks'] }}</span>
            </div>
            <div class="qv-metric">
                <span class="qv-metric-label">TOPLAM SATIŞ</span>
                <span class="qv-metric-val text-success">{{ number_format($stats['sales_total'], 0, ',', '.') }} ₺</span>
            </div>
        </x-slot:metrics>

        <x-slot:tabs>
            <x-quick-view.tab id="overview" label="Özet" icon="fas fa-bolt-lightning" active="true" />
            <x-quick-view.tab id="tasks" label="Görevler" icon="fas fa-list-check" :count="$tasks->count()" />
            <x-quick-view.tab id="sales" label="Satışlar" icon="fas fa-shopping-cart" :count="$sales->count()" />
            <x-quick-view.tab id="customers" label="Müşterileri" icon="fas fa-users" :count="$customers->count()" />
        </x-slot:tabs>
    </x-quick-view.header>

    <!-- ─── CONTENT ─── -->
    <x-quick-view.content>
        <div id="qv-tab-overview" class="qv-tab-panel active">
            <x-quick-view.main class="border-0">
                <div class="row g-4">
                    {{-- Künye solda, hesap/ekip/yorum sağda — müşteri kartındaki
                         gibi eşit genişlikte iki sütun. --}}
                    <div class="col-xl-6 order-1">
                        <div class="qv-left-stack">
                            @include('agency.staff-management.staff.partials.qv-profile')
                        </div>
                    </div>

                    <div class="col-xl-6 order-2">
                        <div class="qv-left-stack">
                            {{-- Sistem hesabı ve roller.
                                 Personelin ayrı bir düzenleme ekranı yoktur: rol değişimi,
                                 parola sıfırlama ve hesap açma bu bölümün içinde,
                                 PATCH staff.access ile yapılır. --}}
                            <div class="pfx" id="stf-access" data-url="{{ route('agency.staff-management.staff.access', $staff) }}">
                                <div class="pfx-top">
                                    <span class="pfx-top-t"><i class="fas fa-shield-halved"></i> Hesap & Yetki</span>
                                    @if($staff->user)
                                        <button type="button" class="pfx-chip" data-stf-panel="role" title="Rolü değiştir">
                                            <i class="fas fa-key"></i> Rol
                                        </button>
                                        <button type="button" class="pfx-chip" data-stf-panel="password" title="Parolayı sıfırla">
                                            <i class="fas fa-lock"></i> Parola
                                        </button>
                                    @else
                                        <button type="button" class="pfx-chip" data-stf-panel="create" title="Bu personele giriş hesabı aç">
                                            <i class="fas fa-user-plus"></i> Giriş hesabı aç
                                        </button>
                                    @endif
                                </div>
                                <div class="pfx-agent">
                                    @if($staff->user)
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($staff->full_name) }}&background=4f46e5&color=fff" alt="">
                                        <div class="pfx-agent-t">
                                            <b>{{ $staff->user->email }}</b>
                                            <small>
                                                {{ $staff->user->last_login_at ? 'Son giriş: ' . $staff->user->last_login_at->diffForHumans() : 'Henüz giriş yapmadı' }}
                                            </small>
                                        </div>
                                    @else
                                        <span class="pfx-agent-none"><i class="fas fa-user-slash"></i> Sistem hesabı yok — bu personel giriş yapamaz</span>
                                    @endif
                                </div>

                                @if($roles->isNotEmpty())
                                    <div class="stf-roles">
                                        @foreach($roles as $role)
                                            <span class="stf-role"><i class="fas fa-key"></i>{{ $role->ui_name ?: $role->name }}</span>
                                        @endforeach
                                    </div>
                                @endif

                                {{-- ── Rol değiştir ── --}}
                                @if($staff->user)
                                    <div class="stf-panel" data-stf-pane="role" hidden>
                                        <label class="stfc-f">
                                            <span>Rol</span>
                                            <select data-stf-field="role_id">
                                                @foreach($assignableRoles as $r)
                                                    <option value="{{ $r->id }}" @selected($roles->contains('id', $r->id))>{{ $r->ui_name ?: $r->name }}</option>
                                                @endforeach
                                            </select>
                                        </label>
                                        <div class="stf-panel-acts">
                                            <button type="button" class="pfx-chip" data-stf-cancel>Vazgeç</button>
                                            <button type="button" class="stf-save" data-stf-submit="role">Rolü Kaydet</button>
                                        </div>
                                        <p class="pfx-notes-hint">Personel tek rol taşır; yeni rol öncekinin yerine geçer.</p>
                                    </div>

                                    {{-- ── Parola sıfırla ── --}}
                                    <div class="stf-panel" data-stf-pane="password" hidden>
                                        <label class="stfc-f">
                                            <span>Yeni Parola</span>
                                            <input type="password" data-stf-field="password" minlength="6" autocomplete="new-password" placeholder="En az 6 karakter">
                                        </label>
                                        <label class="stfc-f">
                                            <span>Parola (tekrar)</span>
                                            <input type="password" data-stf-field="password_confirmation" minlength="6" autocomplete="new-password" placeholder="Parolayı yineleyin">
                                        </label>
                                        <div class="stf-panel-acts">
                                            <button type="button" class="pfx-chip" data-stf-cancel>Vazgeç</button>
                                            <button type="button" class="stf-save" data-stf-submit="password">Parolayı Değiştir</button>
                                        </div>
                                    </div>
                                @else
                                    {{-- ── Giriş hesabı aç ── --}}
                                    <div class="stf-panel" data-stf-pane="create" hidden>
                                        <label class="stfc-f">
                                            <span>Giriş E-postası</span>
                                            <input type="email" data-stf-field="email" maxlength="255" value="{{ $staff->email }}" placeholder="ornek@acente.com">
                                        </label>
                                        <label class="stfc-f">
                                            <span>Rol</span>
                                            <select data-stf-field="role_id">
                                                <option value="">— Rol seçin —</option>
                                                @foreach($assignableRoles as $r)
                                                    <option value="{{ $r->id }}">{{ $r->ui_name ?: $r->name }}</option>
                                                @endforeach
                                            </select>
                                        </label>
                                        <label class="stfc-f">
                                            <span>Parola</span>
                                            <input type="password" data-stf-field="password" minlength="6" autocomplete="new-password" placeholder="En az 6 karakter">
                                        </label>
                                        <label class="stfc-f">
                                            <span>Parola (tekrar)</span>
                                            <input type="password" data-stf-field="password_confirmation" minlength="6" autocomplete="new-password" placeholder="Parolayı yineleyin">
                                        </label>
                                        <div class="stf-panel-acts">
                                            <button type="button" class="pfx-chip" data-stf-cancel>Vazgeç</button>
                                            <button type="button" class="stf-save" data-stf-submit="create_login">Hesabı Oluştur</button>
                                        </div>
                                        <p class="pfx-notes-hint">Hesap açıldığında personel bu e-posta ve parolayla panele girebilir.</p>
                                    </div>
                                @endif
                            </div>

                            {{-- Ekip: bağlı olduğu yönetici + kendisine bağlı çalışanlar --}}
                            <div class="pfx">
                                <div class="pfx-top">
                                    <span class="pfx-top-t"><i class="fas fa-sitemap"></i> Ekip</span>
                                    <span class="pfx-chip" style="pointer-events:none">{{ $staff->subordinates->count() }} kişi bağlı</span>
                                </div>
                                <div class="pfx-agent">
                                    @if($staff->manager)
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($staff->manager->full_name) }}&background=0ea5e9&color=fff" alt="">
                                        <div class="pfx-agent-t">
                                            <b>{{ $staff->manager->full_name }}</b>
                                            <small>{{ $staff->manager->position ?: 'Yönetici' }}</small>
                                        </div>
                                        <a href="javascript:void(0)" class="pfx-chip"
                                           onclick="openQuickView('{{ route('agency.staff-management.staff.quick-view', $staff->manager) }}')">
                                            <i class="fas fa-arrow-up-right-from-square"></i> Kartı aç
                                        </a>
                                    @else
                                        <span class="pfx-agent-none"><i class="fas fa-user-slash"></i> Yönetici atanmamış</span>
                                    @endif
                                </div>

                                @if($staff->subordinates->isNotEmpty())
                                    <div class="stf-roles">
                                        @foreach($staff->subordinates as $sub)
                                            <span class="stf-role link" role="button"
                                                  onclick="openQuickView('{{ route('agency.staff-management.staff.quick-view', $sub) }}')">
                                                <i class="fas fa-user"></i>{{ $sub->full_name }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            {{-- Yorum & dahili notlar --}}
                            <div class="pfx">
                                <div class="pfx-top">
                                    <span class="pfx-top-t"><i class="fas fa-comment-dots"></i> Yorum Alanı</span>
                                    <button type="button" id="sqv-notes-save" class="pfx-chip">
                                        <i class="fas fa-save"></i> Kaydet
                                    </button>
                                </div>
                                <div class="pfx-notes">
                                    <div class="rte-wrap">
                                        <div id="sqv-notes-editor" style="min-height:150px;">{!! $staff->notes !!}</div>
                                    </div>
                                    <p class="pfx-notes-hint">
                                        Personel hakkında dahili notlar — yalnızca acentenize görünür.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </x-quick-view.main>
        </div>

        <div id="qv-tab-tasks" class="qv-tab-panel">
            <div class="p-4">
                @include('agency.staff-management.staff.partials.qv-tasks')
            </div>
        </div>

        <div id="qv-tab-sales" class="qv-tab-panel">
            <div class="p-4">
                @include('agency.staff-management.staff.partials.qv-sales')
            </div>
        </div>

        <div id="qv-tab-customers" class="qv-tab-panel">
            <div class="p-4">
                @include('agency.staff-management.staff.partials.qv-customers')
            </div>
        </div>
    </x-quick-view.content>

    <!-- ─── FOOTER ─── -->
    <x-quick-view.footer>
        <div class="mini-agent smaller text-muted">
            <i class="fas fa-clock me-1"></i> Güncelleme: {{ $staff->updated_at?->format('d.m.Y H:i') }}
        </div>
        {{-- "Personel Formu" düğmesi kaldırıldı: ayrı bir düzenleme ekranı yok,
             tüm alanlar bu kartta yerinde düzenleniyor. --}}
        <div class="d-flex gap-3">
            <button class="btn btn-secondary-glass" onclick="closeQuickView()">Kapat</button>
        </div>
    </x-quick-view.footer>
</x-quick-view.layout>

<script>
// ── Yorum alanı (zengin metin) ──
// Müşteri kartındaki yorum bileşeniyle aynı davranış: Quill editör +
// "Kaydet" ile notes alanına PATCH.
(function initStaffCommentEditor() {
    const host = document.getElementById('sqv-notes-editor');
    if (!host || host.dataset.ready || typeof Quill === 'undefined') return;
    host.dataset.ready = '1';

    const quill = new Quill(host, {
        theme: 'snow',
        placeholder: 'Personel hakkında yorum...',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ header: [3, 4, false] }],
                ['link', 'clean'],
            ],
        },
    });

    document.getElementById('sqv-notes-save')?.addEventListener('click', function () {
        const btn = this;
        const original = btn.innerHTML;
        const html = quill.getText().trim().length ? quill.root.innerHTML : '';

        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

        fetch('{{ $uf }}', {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ field: 'notes', value: html }),
        })
        .then(r => r.json())
        .then(d => {
            btn.disabled = false;
            btn.innerHTML = original;
            if (typeof Swal !== 'undefined') {
                Swal.fire({ toast: true, position: 'top-end', timer: 1900, showConfirmButton: false,
                    icon: d.success !== false ? 'success' : 'error',
                    title: d.message || 'Yorum kaydedildi.' });
            }
        })
        .catch(() => {
            btn.disabled = false;
            btn.innerHTML = original;
            if (typeof Swal !== 'undefined') Swal.fire({ toast: true, position: 'top-end', timer: 2000, showConfirmButton: false, icon: 'error', title: 'Kaydedilemedi' });
        });
    });
})();

// ── Hesap & Yetki: rol değiştirme, parola sıfırlama, giriş hesabı açma ──
// Personelin ayrı bir düzenleme formu olmadığı için bu üç iş kartın içinde
// yapılır. Hepsi tek uca gider: PATCH staff.access {action, …}.
(function initStaffAccessPanels() {
    const card = document.getElementById('stf-access');
    if (!card || card.dataset.ready) return;
    card.dataset.ready = '1';

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

    const clearErrors = () => {
        card.querySelectorAll('.stfc-f.err').forEach(f => f.classList.remove('err'));
        card.querySelectorAll('.stfc-f-msg').forEach(m => m.remove());
    };

    /** Laravel'in {alan: [mesaj]} yapısını ilgili alanın altına yazar. */
    const showErrors = (errors, pane) => {
        Object.entries(errors || {}).forEach(([name, msgs]) => {
            const el = pane.querySelector('[data-stf-field="' + name + '"]');
            const wrap = el && el.closest('.stfc-f');
            if (!wrap) return;
            wrap.classList.add('err');
            const p = document.createElement('span');
            p.className = 'stfc-f-msg';
            p.textContent = Array.isArray(msgs) ? msgs[0] : String(msgs);
            wrap.appendChild(p);
        });
    };

    /** Aynı anda tek panel açık kalır; ikinci tıklama paneli kapatır. */
    const openPane = (key) => {
        clearErrors();
        card.querySelectorAll('[data-stf-pane]').forEach(p => {
            p.hidden = !(key && p.dataset.stfPane === key);
        });
        card.querySelectorAll('[data-stf-panel]').forEach(b => {
            b.classList.toggle('on', !!key && b.dataset.stfPanel === key);
        });
        const open = key && card.querySelector('[data-stf-pane="' + key + '"]:not([hidden])');
        if (open) {
            const first = open.querySelector('input, select');
            if (first) first.focus();
        }
    };

    card.addEventListener('click', (e) => {
        const toggle = e.target.closest('[data-stf-panel]');
        if (toggle) {
            const key = toggle.dataset.stfPanel;
            openPane(toggle.classList.contains('on') ? null : key);
            return;
        }
        if (e.target.closest('[data-stf-cancel]')) { openPane(null); return; }

        const submit = e.target.closest('[data-stf-submit]');
        if (!submit) return;

        const pane = submit.closest('[data-stf-pane]');
        const payload = { action: submit.dataset.stfSubmit };
        pane.querySelectorAll('[data-stf-field]').forEach(el => {
            payload[el.dataset.stfField] = el.value;
        });

        clearErrors();
        const label = submit.textContent;
        submit.disabled = true;
        submit.textContent = 'Kaydediliyor…';

        fetch(url, {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': CSRF(),
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify(payload),
        })
        .then(r => r.json().then(d => ({ ok: r.ok, status: r.status, d: d || {} })))
        .then(res => {
            submit.disabled = false;
            submit.textContent = label;

            if (res.status === 422 && res.d.errors) { showErrors(res.d.errors, pane); return; }
            if (!res.ok || res.d.success === false) throw new Error(res.d.message || 'Kaydedilemedi');

            if (typeof Swal !== 'undefined') {
                Swal.fire({ toast: true, position: 'top-end', timer: 2000, showConfirmButton: false,
                            icon: 'success', title: res.d.message });
            }
            // Rol çipleri, hesap satırı ve başlık rozetleri sunucu tarafında
            // üretiliyor; kartı kendi adresiyle yeniden açmak hepsini birden
            // günceller (drawer aynı adrese gelince içeriği tazeler).
            if (typeof openQuickView === 'function') {
                openQuickView('{{ route('agency.staff-management.staff.quick-view', $staff) }}');
            } else {
                openPane(null);
            }
        })
        .catch(err => {
            submit.disabled = false;
            submit.textContent = label;
            if (typeof Swal !== 'undefined') Swal.fire('Hata', err.message || 'Kaydedilemedi', 'error');
        });
    });
})();
</script>

<style>
    /* ─── Personel QV mor teması: kart arka planı ─── */
    .qv-wrapper.qv-theme-staff { background: linear-gradient(180deg, #ede9fe, #f5f3ff); }
    .qv-theme-staff .qv-content { background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%); }
    .qv-theme-staff .qv-header { background: linear-gradient(135deg, #f7f5ff, #ede9fe); border-bottom-color: #ddd6fe; }

    /* Koyu tema: mavi müşteri temasının karşılığı (dark-theme.css .qv-theme-blue bloğu)
       — yeni tema sınıfı orada tanımlı olmadığı için karşılığı burada verilir. */
    [data-theme="dark"] .qv-wrapper.qv-theme-staff { background: linear-gradient(180deg, rgba(124, 58, 237, .20), rgba(124, 58, 237, .12)); }
    [data-theme="dark"] .qv-theme-staff .qv-content { background: linear-gradient(180deg, rgba(124, 58, 237, .12) 0%, rgba(124, 58, 237, .20) 100%); }
    [data-theme="dark"] .qv-theme-staff .qv-header { background: linear-gradient(135deg, rgba(124, 58, 237, .10), rgba(124, 58, 237, .20)); border-bottom-color: rgba(124, 58, 237, .42); }

    /* Sekme vurgusu tema rengini izler (drawer'daki .theme-* kalıplarının
       bu karta özgü karşılığı — sınıf wrapper'da olduğu için kendi içinde kalır). */
    .qv-theme-staff .qv-tab.active .qv-tab-inner,
    .qv-theme-staff .qv-tab.active .qv-tab-icon { color: #6d28d9; }
    .qv-theme-staff .qv-tab.active .qv-tab-count { background: #ede9fe; color: #6d28d9; }
    .qv-theme-staff .qv-tab-indicator { background: #7c3aed; }

    /* Durum rozeti — müşteri/tedarikçi kartlarıyla aynı görünüm dili */
    .sb { padding: 6px 14px; border-radius: 10px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; border: 1px solid transparent; }
    .sb.active { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
    .sb.inactive { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
    .sb.blocked { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

    .inline-editable { cursor: pointer; border-bottom: 1px dashed #cbd5e1; transition: all 0.2s; display: inline-flex; align-items: center; min-width: 10px; }
    .inline-editable:hover { border-bottom-color: #4f46e5; color: #4f46e5; background: rgba(79, 70, 229, 0.05); }

    /* Rol / bağlı çalışan çipleri — kart içinde kart yığmadan liste */
    .stf-roles { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 .7rem .7rem; }
    .stf-role {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 9px; border-radius: 8px;
        background: var(--bg-inset, #f8fafc); border: 1px solid var(--border-1, #e6ecf5);
        font-size: .71rem; font-weight: 700; color: var(--text-2, #475569);
    }
    .stf-role i { font-size: .62rem; color: #94a3b8; }
    .stf-role.link { cursor: pointer; transition: border-color .13s, color .13s, background .13s; }
    .stf-role.link:hover { border-color: #c7d2fe; color: #4338ca; background: #eef2ff; }

    /* ── Hesap & yetki panelleri (rol / parola / hesap açma) ──
       Ayrı bir düzenleme ekranı olmadığı için bu üç iş kartın içinde,
       başlıktaki çiplerden açılan katlanır panellerde yapılır. */
    .stf-panel { padding: .55rem .7rem .7rem; border-top: 1px dashed #eef2f7; display: grid; gap: .5rem; }
    .stf-panel[hidden] { display: none; }
    .stf-panel-acts { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
    .stf-save {
        border: none; border-radius: 9px; padding: .38rem .95rem;
        font: inherit; font-size: .72rem; font-weight: 800; color: #fff; background: #2563eb;
        box-shadow: 0 6px 14px -8px rgba(37, 99, 235, .85); cursor: pointer;
        transition: transform .14s, filter .14s;
    }
    .stf-save:hover { transform: translateY(-1px); filter: brightness(1.06); }
    .stf-save:disabled { opacity: .6; transform: none; cursor: wait; }
    .pfx-top .pfx-chip.on { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; }

    /* Panel alanları künye satırlarıyla aynı dilde (quick-create ile ortak sınıf) */
    .stfc-f { display: flex; flex-direction: column; gap: 2px; margin: 0; }
    .stfc-f > span { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9aa7bb; }
    .stfc-f input, .stfc-f select {
        width: 100%; border: 1.5px solid transparent; background: transparent;
        border-radius: 7px; padding: .28rem .42rem;
        font: inherit; font-size: .815rem; font-weight: 650; color: #0f172a; line-height: 1.35;
        transition: border-color .13s, box-shadow .13s, background .13s;
    }
    .stfc-f input::placeholder { color: #c3cddc; font-weight: 500; font-style: italic; }
    .stfc-f input:hover, .stfc-f select:hover { background: #fff; border-color: #dbe6f7; }
    .stfc-f input:focus, .stfc-f select:focus { outline: none; background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
    .stfc-f.err input, .stfc-f.err select { border-color: #f87171; background: #fef2f2; }
    .stfc-f-msg { font-size: .68rem; font-weight: 650; color: #dc2626; }
</style>