{{--
    QUICK-VIEW ETKİNLİK KATMANI — ortak stil. TEK KAYNAK.

    Ledger (pfx) kartlarının yanında duran üç yinelenen blok burada tanımlıdır;
    müşteri kartında doğdu, tedarikçi ve sonraki modüller aynısını kullanır:

      .acx-*  Etkinlik yazma alanı (tür çip şeridi + tek odak kutusu + alt bar)
      .flw-*  Etkinlik akışı (ince ray, tür rengiyle işaretli nokta)
      .pfx-agent / .pfx-notes  Kart içi temsilci ve zengin metin not blokları

    İşaretleme kart tarafında kalır; bu dosya yalnızca stil taşır. Karanlık tema
    karşılıkları public/assets/agency/css/dark-theme.css içindedir.

    Kullanım: @include('components.quick-view.activity-ui')
--}}
@once
<style>
    .pfx-agent { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .7rem; }
    .pfx-agent img { width: 34px; height: 34px; border-radius: 11px; }
    .pfx-agent-t { flex: 1; min-width: 120px; }
    .pfx-agent-t b { display: block; font-size: .82rem; font-weight: 700; color: #0f172a; }
    .pfx-agent-t small { font-size: .68rem; color: #94a3b8; font-weight: 600; }
    .pfx-agent-none { flex: 1; font-size: .78rem; font-weight: 600; color: #94a3b8; }
    .pfx-agent-none i { margin-right: 5px; color: #cbd5e1; }
    .pfx-agent-sel {
        flex: 1 1 160px; border: 1.5px solid #e6ecf5; border-radius: 9px; background: #fff;
        padding: .3rem .5rem; font: inherit; font-size: .76rem; font-weight: 650; color: #1e293b; outline: none;
    }
    .pfx-agent-sel:focus { border-color: #bfdbfe; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }

    .pfx-notes { padding: .6rem .7rem .7rem; }
    .pfx-notes .rte-wrap { border-radius: 12px; }
    .pfx-notes-hint { margin: .45rem 0 0; font-size: .68rem; color: #94a3b8; font-weight: 600; }

    /* ═══ Etkinlik yazma alanı ═══ */
    .acx-types {
        display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none;
        padding: .5rem .6rem; border-bottom: 1px solid #eef2f7;
        background: linear-gradient(180deg, #fbfdff, #f5f9ff);
        border-radius: 15px 15px 0 0;
    }
    .acx-types::-webkit-scrollbar { height: 0; }

    .acx-type {
        flex: none; display: inline-flex; align-items: center; gap: 6px;
        border: 1px solid transparent; background: transparent; color: #64748b;
        border-radius: 9px; padding: 4px 10px; cursor: pointer;
        font: inherit; font-size: .73rem; font-weight: 700; white-space: nowrap;
        transition: background .13s, color .13s, border-color .13s;
    }
    .acx-type i { font-size: .74rem; color: var(--ac, #94a3b8); transition: color .13s; }
    .acx-type:hover { background: #fff; border-color: #e6ecf5; color: #0f172a; }
    .acx-type.on {
        background: color-mix(in srgb, var(--ac, #2563eb) 12%, #fff);
        border-color: color-mix(in srgb, var(--ac, #2563eb) 30%, #fff);
        color: color-mix(in srgb, var(--ac, #2563eb) 72%, #0f172a);
    }
    .acx-type.on i { color: var(--ac, #2563eb); }

    .acx-body { padding: .65rem .7rem .7rem; }

    /* Tek odak kutusu: başlık + koşullu alanlar + metin aynı çerçevede */
    .acx-box {
        border: 1.5px solid #e6ecf5; border-radius: 13px; background: #fff;
        transition: border-color .15s, box-shadow .15s;
    }
    .acx-box:focus-within { border-color: #bfdbfe; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }

    .acx-subject {
        display: block; width: 100%; border: 0; background: transparent; outline: none;
        padding: .55rem .75rem .4rem; font: inherit; font-size: .9rem; font-weight: 750;
        color: #0f172a; letter-spacing: -.01em;
    }
    .acx-subject::placeholder { color: #c3cddc; font-weight: 600; }

    .acx-text {
        display: block; width: 100%; border: 0; background: transparent; outline: none; resize: vertical;
        padding: .1rem .75rem .6rem; min-height: 92px;
        font: inherit; font-size: .82rem; font-weight: 550; color: #1e293b; line-height: 1.55;
    }
    .acx-text::placeholder { color: #c3cddc; font-weight: 500; }

    .acx-extra {
        display: flex; flex-wrap: wrap; gap: .35rem;
        padding: .35rem .6rem .1rem;
        border-top: 1px dashed #eef2f7;
    }
    .acx-extra.d-none { display: none !important; }
    .acx-f {
        flex: 1 1 150px; display: flex; align-items: center; gap: 6px; min-width: 0;
        background: #f8fafc; border: 1px solid #eef2f7; border-radius: 9px; padding: 2px 8px;
        margin: 0;
    }
    .acx-f.narrow { flex: 0 1 118px; }
    .acx-f i { color: #b6c2d2; font-size: .68rem; flex: none; }
    .acx-f input, .acx-f select {
        flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
        font: inherit; font-size: .76rem; font-weight: 650; color: #1e293b; padding: 3px 0;
    }
    .acx-f input::placeholder { color: #c3cddc; font-weight: 550; }

    .acx-foot { display: flex; align-items: center; gap: .7rem; margin-top: .55rem; }
    /* Alt barda kalanları sağa iter (anahtar/seçici solda, kaydet sağda) */
    .acx-spacer { flex: 1; }

    /* Açıklama zengin metin girilen kartlarda (Quill) kutu içinde çerçevesiz durur */
    .acx-rte { border-top: 1px dashed #eef2f7; }
    .acx-rte .ql-toolbar { border: 0; border-bottom: 1px dashed #eef2f7; padding: 3px 6px; }
    .acx-rte .ql-container { border: 0; font: inherit; font-size: .82rem; }
    .acx-rte .ql-editor { min-height: 92px; padding: .35rem .75rem .6rem; font-weight: 550; color: #1e293b; line-height: 1.55; }
    .acx-rte .ql-editor.ql-blank::before { color: #c3cddc; font-style: normal; font-weight: 500; left: .75rem; }

    /* Acil anahtarı */
    .acx-sw { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; margin: 0; }
    .acx-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
    .acx-sw-t {
        width: 30px; height: 17px; border-radius: 999px; background: #e2e8f0;
        position: relative; transition: background .16s;
    }
    .acx-sw-t::after {
        content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
        border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
        transition: transform .16s;
    }
    .acx-sw input:checked + .acx-sw-t { background: #ef4444; }
    .acx-sw input:checked + .acx-sw-t::after { transform: translateX(13px); }
    .acx-sw input:focus-visible + .acx-sw-t { box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
    .acx-sw-l { font-size: .74rem; font-weight: 700; color: #94a3b8; transition: color .16s; }
    .acx-sw input:checked ~ .acx-sw-l { color: #dc2626; }

    .acx-soon { font-size: .72rem; font-weight: 650; color: #c3cddc; cursor: default; }
    .acx-soon i { margin-right: 4px; }

    .acx-save {
        margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
        border: 0; border-radius: 11px; cursor: pointer;
        background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff;
        font: inherit; font-size: .78rem; font-weight: 800; padding: .45rem 1.05rem;
        box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .8);
        transition: transform .13s, box-shadow .13s, filter .13s;
    }
    .acx-save:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(37, 99, 235, .85); }
    .acx-save:active { transform: none; }
    .acx-save:disabled { opacity: .6; cursor: default; transform: none; }
    .acx-save i { font-size: .72rem; }

    /* ═══ Etkinlik akışı ═══ */
    .qv-flow .pfx-top { gap: .35rem; }
    .flw-stat {
        display: inline-flex; align-items: center;
        border: 1px solid #e2e8f0; background: #fff; color: #64748b;
        border-radius: 999px; padding: 2px 9px; font-size: .64rem; font-weight: 800;
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .flw-stat.danger { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

    .flw { padding: .35rem 0 .5rem; }

    .flw-i {
        position: relative;
        display: grid; grid-template-columns: 34px minmax(0, 1fr);
        padding: .5rem .7rem .5rem .4rem;
        transition: background .13s;
    }
    .flw-i:hover { background: #f7faff; }
    /* Noktaları birleştiren ince ray */
    .flw-i::before {
        content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px;
        background: #e8eef7;
    }
    .flw-i:first-child::before { top: 14px; }
    .flw-i:last-child::before { bottom: calc(100% - 30px); }

    .flw-dot {
        position: relative; z-index: 1;
        width: 22px; height: 22px; margin-top: 1px; border-radius: 8px;
        display: grid; place-items: center;
        background: color-mix(in srgb, var(--fc, #64748b) 13%, #fff);
        color: var(--fc, #64748b);
        border: 1px solid color-mix(in srgb, var(--fc, #64748b) 26%, #fff);
        font-size: .6rem;
    }
    .flw-i.urgent .flw-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc, #ef4444) 14%, transparent); }

    .flw-b { min-width: 0; padding-left: .1rem; }

    .flw-h { display: flex; align-items: baseline; gap: .45rem; }
    .flw-t {
        font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
        color: var(--fc, #64748b);
    }
    .flw-urgent {
        font-size: .55rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
        background: #fee2e2; color: #b91c1c; border-radius: 999px; padding: 1px 6px;
    }
    .flw-time {
        margin-left: auto; flex: none;
        font-size: .66rem; font-weight: 650; color: #b6c2d2; white-space: nowrap;
    }

    .flw-s { margin-top: 2px; font-size: .84rem; font-weight: 750; color: #0f172a; letter-spacing: -.01em; }
    .flw-d {
        margin: 2px 0 0; font-size: .78rem; line-height: 1.5; color: #64748b;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .flw-i:hover .flw-d { -webkit-line-clamp: 20; }

    .flw-m {
        display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
        margin-top: .4rem; font-size: .7rem; font-weight: 650; color: #64748b;
    }
    .flw-m i { color: #94a3b8; margin-right: 4px; }
    .flw-m a { color: #2563eb; text-decoration: none; }
    .flw-m a:hover { text-decoration: underline; }
    .flw-m a i { color: #2563eb; }
    .flw-m .ref {
        margin-left: auto; font-variant-numeric: tabular-nums; color: #94a3b8;
        border: 1px solid #e8eef7; border-radius: 6px; padding: 0 6px; font-size: .65rem;
    }

    .flw-f { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; }
    /* Akış satırı silme — yalnızca satırın üstüne gelince belirir */
    .flw-del {
        margin-left: auto; width: 20px; height: 20px; border: 0; border-radius: 6px; background: transparent;
        color: #c3cddc; cursor: pointer; display: grid; place-items: center; font-size: .62rem;
        opacity: 0; transition: opacity .13s, color .13s, background .13s;
    }
    .flw-i:hover .flw-del, .flw-i:focus-within .flw-del { opacity: 1; }
    .flw-del:hover { color: #dc2626; background: #fef2f2; }
    @media (hover: none) { .flw-del { opacity: 1; } }
    .flw-who { font-size: .66rem; font-weight: 700; color: #94a3b8; }
    /* Kullanıcı ikonu ikon sınıfı yerine ::before ile: satır başına fazladan
       <i> koymadan aynı görsel elde edilir. Kaçış dizisi (\f007) düz metne
       dönerse CSS ayrıştırıcısı bu noktadan sonrasını komple düşürür. */
    .flw-who::before { content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; color: #cbd5e1; font-size: .58rem; }
    .flw-st {
        font-size: .6rem; font-weight: 800; border-radius: 999px; padding: 1px 8px;
        background: #f1f5f9; color: #64748b;
    }
    .flw-st.completed { background: #dcfce7; color: #15803d; }
    .flw-st.pending { background: #fef3c7; color: #92400e; }
    .flw-st.cancelled { background: #fee2e2; color: #b91c1c; }

    /* ═══ Boş durum ═══
       Markup x-quick-view.flow-empty bileşenindedir; akışın dışındaki boş
       listeler (ör. yetkili listesi) de aynı dili kullansın diye burada
       genel tutuldu. Akışın imzası ince ray olduğu için boş durumda da ray
       sürer: madalyonun üstünden inen kısa kesikli iz "sıra bekliyor" der. */
    .flw-empty {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: .3rem;
        padding: 2.3rem 1.1rem 2.5rem; text-align: center;
    }
    .flw-empty::before {
        content: ""; position: absolute; top: .5rem; left: 50%; width: 1px; height: 1.3rem;
        background: repeating-linear-gradient(180deg, #e3eaf5 0 3px, transparent 3px 7px);
    }
    .flw-empty i {
        width: 46px; height: 46px; margin-bottom: .5rem; border-radius: 15px;
        display: grid; place-items: center; font-size: 1.1rem; color: #9db2d0;
        background: linear-gradient(160deg, #f7faff, #eaf1fc);
        border: 1px solid #e4ecf8;
        box-shadow: 0 8px 20px -14px rgba(37, 99, 235, .75), inset 0 1px 0 #fff;
    }
    .flw-empty b { font-size: .85rem; font-weight: 750; color: #475569; letter-spacing: -.01em; }
    /* Uzun çağrı metinleri kart genişliğine yayılıp okunmaz olmasın; iki-üç
       satırlık rahat bir ölçü kalsın (kart ~500px, dar kolonda daralır) */
    .flw-empty span { max-width: 46ch; font-size: .72rem; font-weight: 600; color: #9fb0c6; line-height: 1.6; }
    .flw-empty a { color: #2563eb; font-weight: 700; text-decoration: none; }
    .flw-empty a:hover { text-decoration: underline; }
</style>
@endonce