@if($document->description)
    <div class="card p-6">
        <p class="section-label mb-3">Description</p>
        <p class="text-sm leading-relaxed text-surface-600">{{ $document->description }}</p>
    </div>
@endif

<div class="card p-6">
    <p class="section-label mb-4">Document Details</p>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
        @foreach($documentUi['meta'] as [$label, $value])
            <div class="rounded-xl bg-surface-50 p-3.5">
                <p class="mb-1 text-[10px] font-bold uppercase tracking-wide text-surface-400">{{ $label }}</p>
                <p class="text-sm font-semibold text-surface-900">{{ $value }}</p>
            </div>
        @endforeach
    </div>
</div>