{{-- Disposisi History Card - Full Journey Timeline --}}
<div class="card shadow-sm" id="perjalanan-surat">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-signpost-split"></i>
            Perjalanan Surat
            @if($suratMasuk->disposisi->count() > 0)
                <span class="badge bg-primary">{{ $suratMasuk->disposisi->count() }} disposisi</span>
            @endif
        </h5>
    </div>
    <div class="card-body p-0">
        <div class="journey-list" style="padding: 20px;">

            {{-- 1. AWAL: Surat Dibuat oleh SETUM --}}
            <div class="journey-item">
                <div class="journey-content journey-start">
                    <div class="journey-badge">
                        <span class="badge bg-kopassus"><i class="bi bi-envelope-plus"></i> SURAT DIBUAT</span>
                    </div>
                    <div class="journey-time">
                        <i class="bi bi-calendar"></i>
                        {{ $suratMasuk->created_at->format('d F Y') }}
                        <small class="text-muted">{{ $suratMasuk->created_at->format('H:i') }} WIB</small>
                    </div>
                    <div class="journey-title">
                        <div class="d-flex align-items-center gap-2">
                            <div class="avatar-sm bg-kopassus-light text-kopassus">
                                <i class="bi bi-person-badge"></i>
                            </div>
                            <div>
                                <strong>{{ $suratMasuk->createdBy->jabatan_with_satuan ?? 'SETUM' }}</strong>
                                <br>
                                <small class="text-muted">Membuat surat masuk</small>
                            </div>
                        </div>
                    </div>
                    <div class="journey-text mt-2">
                        <table class="table table-sm table-borderless mb-0" style="font-size: 12px;">
                            <tr>
                                <td width="100"><strong>Nomor Surat</strong></td>
                                <td>: {{ $suratMasuk->nomor_surat }}</td>
                            </tr>
                            <tr>
                                <td><strong>Asal Surat</strong></td>
                                <td>: {{ $suratMasuk->asal_surat_short ?? $suratMasuk->asal_surat }}</td>
                            </tr>
                            <tr>
                                <td><strong>Tujuan Akhir</strong></td>
                                <td>: {{ $suratMasuk->tujuanAkhir->jabatan_with_satuan ?? '-' }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>

            {{-- 2. Dilembar Disposisi (jika ada) --}}
            @if($suratMasuk->diagendakan_at && $suratMasuk->diagendakanBy)
            {{-- Arrow Down --}}
            <div class="journey-arrow">
                <i class="bi bi-arrow-down"></i>
            </div>
            @php
                // Kumpulkan semua target lembar disposisi dengan status disposisi
                $agendaTargets = collect();

                $hasChildTargets = $suratMasuk->childSurat && $suratMasuk->childSurat->count() > 0
                    && $suratMasuk->childSurat->contains(fn($c) => $c->diagendakan_at && $c->nomor_agenda_internal);

                if ($hasChildTargets) {
                    foreach ($suratMasuk->childSurat as $child) {
                        if ($child->diagendakan_at && $child->nomor_agenda_internal) {
                            $childDisposisiCount = $child->disposisi ? $child->disposisi->count() : 0;
                            $childStatus = $child->status;

                            // Determine disposisi status for this child
                            if ($childDisposisiCount > 0) {
                                $disposisiStatus = 'sudah_disposisi';
                                $disposisiLabel = 'Sudah Didisposisi';
                                $disposisiIcon = 'bi-check-circle-fill';
                                $disposisiBadgeClass = 'bg-success';
                            } elseif (in_array($childStatus, ['diagendakan', 'pending'])) {
                                $disposisiStatus = 'menunggu_disposisi';
                                $disposisiLabel = 'Menunggu Disposisi';
                                $disposisiIcon = 'bi-hourglass-split';
                                $disposisiBadgeClass = 'bg-warning text-dark';
                            } else {
                                $disposisiStatus = $childStatus;
                                $disposisiLabel = \App\Models\SuratMasuk::getStatusLabelFor($childStatus);
                                $disposisiIcon = 'bi-clock-history';
                                $disposisiBadgeClass = 'bg-secondary';
                            }

                            $agendaTargets->push((object)[
                                'id' => $child->id,
                                'nomor_agenda_internal' => $child->nomor_agenda_internal,
                                'tujuan_akhir' => $child->tujuanAkhir,
                                'status' => $childStatus,
                                'disposisi_count' => $childDisposisiCount,
                                'disposisi_status' => $disposisiStatus,
                                'disposisi_label' => $disposisiLabel,
                                'disposisi_icon' => $disposisiIcon,
                                'disposisi_badge_class' => $disposisiBadgeClass,
                            ]);
                        }
                    }
                } else {
                    // Fallback: parent sendiri sebagai target (data lama / single target tanpa child)
                    $parentDisposisiCount = $suratMasuk->disposisi ? $suratMasuk->disposisi->count() : 0;
                    $agendaTargets->push((object)[
                        'id' => $suratMasuk->id,
                        'nomor_agenda_internal' => $suratMasuk->nomor_agenda_internal,
                        'tujuan_akhir' => $suratMasuk->tujuanAkhir,
                        'status' => $suratMasuk->status,
                        'disposisi_count' => $parentDisposisiCount,
                        'disposisi_status' => $parentDisposisiCount > 0 ? 'sudah_disposisi' : 'menunggu_disposisi',
                        'disposisi_label' => $parentDisposisiCount > 0 ? 'Sudah Didisposisi' : 'Menunggu Disposisi',
                        'disposisi_icon' => $parentDisposisiCount > 0 ? 'bi-check-circle-fill' : 'bi-hourglass-split',
                        'disposisi_badge_class' => $parentDisposisiCount > 0 ? 'bg-success' : 'bg-warning text-dark',
                    ]);
                }

                $totalTargets = $agendaTargets->count();
                $disposisiDone = $agendaTargets->where('disposisi_status', 'sudah_disposisi')->count();
            @endphp
            <div class="journey-item">
                <div class="journey-content">
                    <div class="journey-badge">
                        <span class="badge bg-kopassus"><i class="bi bi-clipboard-check"></i> LEMBAR DISPOSISI</span>
                        @if($totalTargets > 1)
                            <span class="badge bg-secondary ms-1">{{ $totalTargets }} target</span>
                        @endif
                        <span class="badge {{ $disposisiDone === $totalTargets ? 'bg-success' : 'bg-warning text-dark' }} ms-1">
                            {{ $disposisiDone }}/{{ $totalTargets }} didisposisi
                        </span>
                    </div>
                    <div class="journey-time">
                        <i class="bi bi-calendar"></i>
                        {{ $suratMasuk->diagendakan_at->format('d F Y') }}
                        <small class="text-muted">{{ $suratMasuk->diagendakan_at->format('H:i') }} WIB</small>
                    </div>
                    <div class="journey-title">
                        <div class="d-flex align-items-center gap-2">
                            <div class="avatar-sm bg-kopassus-light text-kopassus">
                                {{ strtoupper(substr($suratMasuk->diagendakanBy->jabatan_short ?? 'TU', 0, 2)) }}
                            </div>
                            <div>
                                <strong>{{ $suratMasuk->diagendakanBy->jabatan_with_satuan ?? 'TU' }}</strong>
                                <br>
                                <small class="text-muted">Melengkapi lembar disposisi</small>
                            </div>
                        </div>
                    </div>

                    {{-- Target List with Disposisi Status --}}
                    <div class="mt-3">
                        <small class="text-muted fw-semibold d-block mb-2">
                            <i class="bi bi-diagram-3"></i> Penerima Lembar Disposisi:
                        </small>
                        <div class="child-target-list">
                            @foreach($agendaTargets as $target)
                            <a href="{{ route('surat-masuk.show', $target->id) }}" class="text-decoration-none d-block">
                            <div class="child-target-item {{ $target->disposisi_status === 'sudah_disposisi' ? 'target-done' : 'target-waiting' }}">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="target-number">{{ $loop->iteration }}</div>
                                        <div>
                                            <div class="fw-semibold text-dark">
                                                {{ $target->tujuan_akhir->jabatan_with_satuan ?? '-' }}
                                            </div>
                                            <div class="small text-muted">
                                                No. Agenda: <span class="fw-bold text-dark">{{ $target->nomor_agenda_internal ?? '-' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <span class="badge {{ $target->disposisi_badge_class }}">
                                            <i class="bi {{ $target->disposisi_icon }}"></i>
                                            {{ $target->disposisi_label }}
                                        </span>
                                        @if($target->disposisi_count > 0)
                                            <div class="small text-muted mt-1">
                                                {{ $target->disposisi_count }} disposisi
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            </a>
                            @endforeach
                        </div>
                    </div>

                    <div class="catatan-box catatan-disposisi mt-3 mb-0">
                        <div class="catatan-header">
                            <i class="bi bi-clipboard-check"></i> Catatan Pelengkapan Lembar Disposisi dari {{ $suratMasuk->diagendakanBy->jabatan_with_satuan ?? 'TU' }}
                        </div>
                        <div class="catatan-content"><x-catatan-display :content="$suratMasuk->catatan_agenda" /></div>
                        <div class="catatan-footer">
                            <i class="bi bi-calendar"></i> {{ $suratMasuk->diagendakan_at->format('d/m/Y H:i') }} WIB
                        </div>
                    </div>
                </div>
            </div>

            {{-- Arrow Down - hanya tampil jika sudah ada disposisi --}}
            @if($suratMasuk->disposisi->count() > 0)
            <div class="journey-arrow">
                <i class="bi bi-arrow-down"></i>
            </div>
            @endif
            @endif

            {{-- 3. DISPOSISI - Urut dari yang terlama ke terbaru --}}
            @foreach($suratMasuk->disposisi->sortBy('created_at') as $disposisi)
                <div class="journey-item">
                    <div class="journey-content {{ $disposisi->status === 'selesai' ? 'journey-end' : '' }}">
                        {{-- Badge Status --}}
                        <div class="journey-badge">
                            @if($loop->first)
                                <span class="badge bg-kopassus"><i class="bi bi-send"></i> DISPOSISI PERTAMA</span>
                            @else
                                <span class="badge bg-secondary"><i class="bi bi-arrow-right-circle"></i> DISPOSISI LANJUTAN</span>
                            @endif
                        </div>

                        <!-- Date & Time -->
                        <div class="journey-time">
                            <i class="bi bi-calendar"></i>
                            {{ $disposisi->tanggal_disposisi_format }} WIB
                        </div>

                        <!-- From -> To -->
                        <div class="journey-title">
                            <div class="d-flex align-items-center gap-2 mb-2">
                                <div class="avatar-sm bg-kopassus-light text-kopassus">
                                    {{ strtoupper(substr($disposisi->dariUser->jabatan_short ?? '-', 0, 2)) }}
                                </div>
                                <div class="flex-fill">
                                    <strong>{{ $disposisi->dariUser->jabatan_with_satuan ?? '-' }}</strong>
                                </div>
                                <div class="text-center px-2">
                                    <i class="bi bi-arrow-right text-kopassus" style="font-size: 1.5rem;"></i>
                                </div>
                                <div>
                                    @forelse($disposisi->kepadaUsers as $recipientUser)
                                        @php
                                            $matchedSurat = $disposisi->relationLoaded('generatedSuratMasuk')
                                                ? $disposisi->generatedSuratMasuk->first(fn($sm) => $sm->tujuan_akhir_id === $recipientUser->id)
                                                : null;
                                            if (!$matchedSurat && $disposisi->relationLoaded('generatedSuratMasuk') && $disposisi->generatedSuratMasuk->count() === 1) {
                                                $matchedSurat = $disposisi->generatedSuratMasuk->first();
                                            }
                                        @endphp
                                        @if($matchedSurat)
                                        <a href="{{ route('surat-masuk.show', $matchedSurat) }}" class="text-decoration-none disposisi-recipient-link">
                                        @endif
                                        <div class="d-flex align-items-center mb-1">
                                            <div class="avatar-sm bg-kopassus-light text-kopassus">
                                                {{ strtoupper(substr($recipientUser->jabatan_short ?? '-', 0, 2)) }}
                                            </div>
                                            <div class="flex-fill ms-2">
                                                <strong class="{{ $matchedSurat ? 'text-dark' : '' }}">{{ $recipientUser->jabatan_with_satuan ?? '-' }}</strong>
                                                @if($matchedSurat)
                                                    <i class="bi bi-box-arrow-up-right text-kopassus small"></i>
                                                @endif
                                            </div>
                                        </div>
                                        @if($matchedSurat)
                                        </a>
                                        @endif
                                    @empty
                                        <strong>-</strong>
                                    @endforelse
                                </div>
                            </div>
                        </div>

                        <!-- Instruction -->
                        @if($disposisi->instruksis && $disposisi->instruksis->count() > 0)
                            <div class="mb-2">
                                @foreach($disposisi->instruksis as $instruksi)
                                    <span class="badge bg-secondary me-1">{{ $instruksi->nama_instruksi }}</span>
                                @endforeach
                            </div>
                        @endif

                        <!-- Catatan Disposisi -->
                        <div class="journey-text">
                            <div class="catatan-box catatan-disposisi mb-0">
                                <div class="catatan-header">
                                    <i class="bi bi-chat-left-text"></i> Catatan dari {{ $disposisi->dariUser->jabatan_with_satuan ?? 'Pengirim' }}
                                </div>
                                <div class="catatan-content"><x-catatan-display :content="$disposisi->catatan" /></div>
                                @if($disposisi->catatan_gambar)
                                <div class="catatan-gambar mt-2">
                                    <div class="small text-muted mb-1"><i class="bi bi-brush"></i> Catatan Tulisan Tangan:</div>
                                    <div class="catatan-gambar-container" style="background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px;">
                                        <img src="{{ $disposisi->catatan_gambar }}" alt="Catatan Gambar" style="max-width: 100%; height: auto;">
                                    </div>
                                </div>
                                @endif
                                <div class="catatan-footer">
                                    <i class="bi bi-calendar"></i> {{ $disposisi->tanggal_disposisi_format }} WIB
                                </div>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="mt-2">
                            <span class="badge bg-{{ $disposisi->status }} me-2">
                                @if($disposisi->status === 'pending')
                                    <i class="bi bi-clock-history"></i> Menunggu
                                @elseif($disposisi->status === 'dibaca')
                                    <i class="bi bi-eye"></i> Dibaca
                                @elseif($disposisi->status === 'diproses')
                                    <i class="bi bi-arrow-repeat"></i> Diproses
                                @elseif($disposisi->status === 'selesai')
                                    <i class="bi bi-check-circle"></i> Selesai
                                @elseif($disposisi->status === 'menunggu_agenda')
                                    <i class="bi bi-hourglass"></i> {{ \App\Models\SuratMasuk::getStatusLabelFor('menunggu_agenda') }}
                                @elseif($disposisi->status === 'diagendakan')
                                    <i class="bi bi-clipboard-check"></i> {{ \App\Models\SuratMasuk::getStatusLabelFor('diagendakan') }}
                                @else
                                    {{ ucfirst($disposisi->status) }}
                                @endif
                            </span>

                            @if($disposisi->level)
                                <span class="badge badge-gold">
                                    {{ $disposisi->level->nama_level }}
                                </span>
                            @endif
                        </div>

                        {{-- Catatan Tambahan - Hanya tampilkan jika ada isi DAN disposisi belum selesai --}}
                        {{-- Jika selesai, catatan ditampilkan di card DISPOSISI SELESAI --}}
                        @if($disposisi->catatan_balasan && strtolower($disposisi->status) !== 'selesai')
                        @php
                            $historyBalasanUser = $disposisi->kepadaUsers->first();
                        @endphp
                        <div class="catatan-box catatan-balasan mt-2 mb-0">
                            <div class="catatan-header">
                                <i class="bi bi-chat-right-text"></i> Catatan Tambahan dari {{ $historyBalasanUser->jabatan_with_satuan ?? 'Penerima' }}
                            </div>
                            <div class="catatan-content"><x-catatan-display :content="$disposisi->catatan_balasan" /></div>
                            @if($disposisi->selesai_pada)
                            <div class="catatan-footer">
                                <i class="bi bi-check-circle"></i> {{ $disposisi->selesai_pada->format('d/m/Y H:i') }} WIB
                            </div>
                            @endif
                        </div>
                        @endif

                        <!-- Action Button (if current user is recipient) -->
                        {{-- @if($disposisi->kepadaUsers->contains('id', auth()->id()) && $disposisi->status !== 'selesai')
                            <div class="mt-2">
                                <a href="{{ route('disposisi.edit', $disposisi->id) }}"
                                   class="btn btn-sm btn-outline-kopassus">
                                    <i class="bi bi-pencil"></i> Update Status
                                </a>
                            </div>
                        @endif --}}
                    </div>
                </div>

                {{-- Arrow Down --}}
                @php
                    $hasSelesaiDisposisi = $suratMasuk->disposisi->contains(fn($d) => strtolower($d->status) === 'selesai');
                @endphp
                @if(!$loop->last || $hasSelesaiDisposisi || ($suratMasuk->status === 'selesai' && $suratMasuk->selesai_at))
                <div class="journey-arrow">
                    <i class="bi bi-arrow-down"></i>
                </div>
                @endif
            @endforeach

            {{-- 4. DISPOSISI SELESAI - Card untuk setiap disposisi yang sudah diselesaikan --}}
            @php
                $selesaiDisposisi = $suratMasuk->disposisi->filter(fn($d) => strtolower($d->status) === 'selesai');
            @endphp
            @foreach($selesaiDisposisi as $selesaiItem)
                @php
                    $penyelesai = $selesaiItem->kepadaUsers->first();
                @endphp
                <div class="journey-item">
                    <div class="journey-content journey-end">
                        <div class="journey-badge">
                            <span class="badge bg-success"><i class="bi bi-check-circle-fill"></i> DISPOSISI SELESAI</span>
                        </div>
                        @if($selesaiItem->selesai_pada)
                        <div class="journey-time">
                            <i class="bi bi-calendar"></i>
                            {{ $selesaiItem->selesai_pada->format('d F Y') }}
                            <small class="text-muted">{{ $selesaiItem->selesai_pada->format('H:i') }} WIB</small>
                        </div>
                        @endif
                        <div class="journey-title">
                            <div class="d-flex align-items-center gap-2">
                                <div class="avatar-sm bg-success bg-opacity-10 text-success">
                                    <i class="bi bi-check-circle-fill"></i>
                                </div>
                                <div>
                                    <strong>Diselesaikan oleh {{ $penyelesai->jabatan_with_satuan ?? 'Penerima' }}</strong>
                                    <br>
                                    <small class="text-muted">
                                        Disposisi dari {{ $selesaiItem->dariUser->jabatan_with_satuan ?? '-' }}
                                    </small>
                                </div>
                            </div>
                        </div>
                        @if($selesaiItem->catatan_balasan)
                        <div class="catatan-box catatan-disposisi mt-2 mb-0" style="background-color: #f0fdf4; border-left-color: #10b981;">
                            <div class="catatan-header" style="color: #059669;">
                                <i class="bi bi-chat-right-text"></i> Catatan Penyelesaian
                            </div>
                            <div class="catatan-content"><x-catatan-display :content="$selesaiItem->catatan_balasan" /></div>
                            @if($selesaiItem->selesai_pada)
                            <div class="catatan-footer">
                                <i class="bi bi-check-circle"></i> {{ $selesaiItem->selesai_pada->format('d/m/Y H:i') }} WIB
                            </div>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>

                @if(!$loop->last || ($suratMasuk->status === 'selesai' && $suratMasuk->selesai_at))
                <div class="journey-arrow">
                    <i class="bi bi-arrow-down"></i>
                </div>
                @endif
            @endforeach

            {{-- 5. AKHIR: Status Surat Selesai (jika semua selesai) --}}
            @if($suratMasuk->status === 'selesai' && $suratMasuk->selesai_at)
            <div class="journey-item">
                <div class="journey-content journey-end">
                    <div class="journey-badge">
                        <span class="badge bg-success"><i class="bi bi-check-circle-fill"></i> SURAT SELESAI</span>
                    </div>
                    <div class="journey-time">
                        <i class="bi bi-calendar"></i>
                        {{ $suratMasuk->selesai_at->format('d F Y') }}
                        <small class="text-muted">{{ $suratMasuk->selesai_at->format('H:i') }} WIB</small>
                    </div>
                    <div class="journey-title">
                        <div class="d-flex align-items-center gap-2">
                            <div class="avatar-sm bg-success bg-opacity-10 text-success">
                                <i class="bi bi-check-circle-fill"></i>
                            </div>
                            <div>
                                <strong>Surat Telah Selesai Diproses</strong>
                                <br>
                                <small class="text-muted">Semua disposisi telah ditindaklanjuti</small>
                            </div>
                        </div>
                    </div>
                    @if($suratMasuk->catatan_selesai)
                    <div class="journey-text mt-2">
                        <strong class="text-muted small">Catatan Penyelesaian:</strong>
                        <div class="mb-0 mt-1"><x-catatan-display :content="$suratMasuk->catatan_selesai" /></div>
                    </div>
                    @endif
                </div>
            </div>
            @endif

            {{-- Empty state dihilangkan - bagian disposisi hanya muncul jika sudah ada disposisi --}}

        </div>
    </div>
</div>

<style>
/* Journey List - No timeline line, just arrows */
.journey-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.journey-item {
    margin-bottom: 0;
}

/* Arrow between items */
.journey-arrow {
    text-align: center;
    padding: 10px 0;
    color: #3d6b21;
    font-size: 1.5rem;
}

.journey-content {
    background: #fafafa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #3d6b21;
}

/* Surat dibuat - kopassus green */
.journey-content.journey-start {
    background: #f5f9f3;
}

/* Surat selesai - green */
.journey-content.journey-end {
    background: #f0fdf4;
    border-left-color: #10b981;
}

.journey-badge {
    margin-bottom: 8px;
}

.journey-time {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 8px;
}

.journey-title {
    font-size: 1rem;
    color: #111827;
    margin-bottom: 8px;
}

.journey-text {
    color: #374151;
    line-height: 1.6;
    font-size: 0.9rem;
}

.avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.bg-kopassus {
    background-color: #3d6b21 !important;
    color: white !important;
}

.bg-kopassus-light {
    background-color: #ecf4e8 !important;
}

.text-kopassus {
    color: #3d6b21 !important;
}

.btn-outline-kopassus {
    color: #3d6b21;
    border-color: #3d6b21;
}

.btn-outline-kopassus:hover {
    background-color: #3d6b21;
    color: white;
}

.badge-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E5A1 100%);
    color: #000;
}

/* Catatan Box Styling */
.catatan-box {
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 8px;
    border-left: 4px solid;
}

.catatan-box .catatan-header {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.catatan-box .catatan-content {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 8px;
    white-space: pre-line;
}

.catatan-box .catatan-footer {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Catatan Disposisi - Hijau Kopassus */
.catatan-disposisi {
    background-color: #f5f9f3;
    border-left-color: #3d6b21;
}
.catatan-disposisi .catatan-header {
    color: #3d6b21;
}

/* Catatan Tambahan - Same green theme */
.catatan-balasan {
    background-color: #f8faf8;
    border-left-color: #6b9c4d;
}
.catatan-balasan .catatan-header {
    color: #3d6b21;
}

/* Status badge colors - simplified kopassus theme */
.badge.bg-pending { background-color: #f3f4f6 !important; color: #6b7280 !important; }
.badge.bg-dibaca { background-color: #ecf4e8 !important; color: #3d6b21 !important; }
.badge.bg-diproses { background-color: #ecf4e8 !important; color: #3d6b21 !important; }
.badge.bg-selesai { background-color: #3d6b21 !important; color: white !important; }
.badge.bg-menunggu_agenda { background-color: #f3f4f6 !important; color: #6b7280 !important; }
.badge.bg-diagendakan { background-color: #ecf4e8 !important; color: #3d6b21 !important; }

/* Child Target List Styles */
.child-target-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.child-target-item {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
    cursor: pointer;
}

.child-target-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.child-target-item.target-done {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    border-left: 3px solid #22c55e;
}

.child-target-item.target-waiting {
    background-color: #fffbeb;
    border-color: #fde68a;
    border-left: 3px solid #f59e0b;
}

/* Disposisi recipient link */
.disposisi-recipient-link:hover {
    opacity: 0.8;
}
.disposisi-recipient-link:hover strong {
    text-decoration: underline;
}

.target-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #3d6b21;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}
</style>