{{-- Skeleton loader for invoice card --}}
<div class="bg-gradient-to-br from-background-secondary/50 to-background-secondary/30 border border-neutral/50 p-6 rounded-xl shadow-lg
            flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
    
    <div class="flex items-start md:items-center gap-4 flex-grow">
        {{-- Icon skeleton --}}
        <div class="p-3 rounded-full flex-shrink-0 bg-blue-500/20 w-12 h-12 skeleton-shimmer"></div>
        
        <div class="flex flex-col flex-grow">
            {{-- Title skeleton --}}
            <div class="h-6 bg-neutral/20 rounded-lg w-40 mb-2 skeleton-shimmer"></div>
            {{-- Amount and date skeleton --}}
            <div class="h-4 bg-neutral/20 rounded w-56 mb-1 skeleton-shimmer"></div>
            {{-- Due date skeleton --}}
            <div class="h-3 bg-neutral/20 rounded w-36 skeleton-shimmer"></div>
        </div>
    </div>

    <div class="flex items-center gap-3 flex-shrink-0 mt-3 md:mt-0">
        {{-- Status badge skeleton --}}
        <div class="h-7 bg-neutral/20 rounded-full w-20 skeleton-shimmer"></div>
        {{-- Arrow skeleton --}}
        <div class="h-6 w-6 bg-neutral/20 rounded skeleton-shimmer"></div>
    </div>
</div>