{{-- Slim status strip: four standardised counts + review progress.
     Terminology is fixed everywhere: Total · Confirmed · To review · Dismissed.
     Expects: $totalItems, $confirmed, $toReview, $dismissed, $reviewed, $pct. --}}
<div class="card border-0 shadow-sm mb-3">
    <div class="card-body py-2 px-3">
        <div class="d-flex align-items-center flex-wrap gap-3">

            {{-- Counts: dot + number + label, one consistent chip style --}}
            <div class="d-flex align-items-center gap-3 flex-wrap" role="group" aria-label="Review totals">
                <span class="d-inline-flex align-items-center gap-1" title="Total findings">
                    <span class="ev-dot" style="background:#94a3b8;"></span>
                    <strong>{{ $totalItems }}</strong>
                    <span class="text-muted small">Total</span>
                </span>
                <span class="d-inline-flex align-items-center gap-1" title="Confirmed findings">
                    <span class="ev-dot" style="background:#16a34a;"></span>
                    <strong class="text-success">{{ $confirmed }}</strong>
                    <span class="text-muted small">Confirmed</span>
                </span>
                <span class="d-inline-flex align-items-center gap-1" title="Findings still awaiting review">
                    <span class="ev-dot" style="background:#d97706;"></span>
                    <strong style="color:#b45309;">{{ $toReview }}</strong>
                    <span class="text-muted small">To review</span>
                </span>
                <span class="d-inline-flex align-items-center gap-1" title="Dismissed findings">
                    <span class="ev-dot" style="background:#64748b;"></span>
                    <strong class="text-secondary">{{ $dismissed }}</strong>
                    <span class="text-muted small">Dismissed</span>
                </span>
            </div>

            {{-- Progress: reviewed vs total --}}
            <div class="ms-auto d-flex align-items-center gap-2" style="min-width:180px;flex:1 1 200px;max-width:340px;">
                <div class="progress flex-grow-1" style="height:8px;" role="progressbar"
                     aria-valuenow="{{ $reviewed }}" aria-valuemin="0" aria-valuemax="{{ $totalItems }}"
                     aria-label="Review progress">
                    <div class="progress-bar bg-success" style="width:{{ $pct }}%;"></div>
                </div>
                <span class="small text-muted text-nowrap">{{ $reviewed }} of {{ $totalItems }} reviewed</span>
            </div>
        </div>
    </div>
</div>

<style>
    .ev-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; flex-shrink:0; }
</style>