@php
$colorMap = [
    'cyan'    => 'from-cyan-500 to-sky-400',
    'sky'     => 'from-sky-500 to-cyan-400',
    'emerald' => 'from-emerald-500 to-teal-400',
    'teal'    => 'from-teal-500 to-emerald-400',
    'violet'  => 'from-violet-500 to-purple-400',
    'indigo'  => 'from-indigo-500 to-violet-400',
    'amber'   => 'from-amber-500 to-orange-400',
    'rose'    => 'from-rose-500 to-red-400',
    'slate'   => 'from-slate-400 to-slate-500',
];
@endphp

<section class="cs-v2-panel p-5">
    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($kpis as $kpi)
            @php
                $gradient = $colorMap[$kpi['color'] ?? 'slate'] ?? $colorMap['slate'];
            @endphp
            <div class="cs-v2-kpi relative overflow-hidden p-3.5">
                <div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r {{ $gradient }}"></div>
                <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{{ $kpi['label'] }}</p>
                <p class="mt-2 text-xl font-bold text-slate-900">{{ $kpi['value'] }}</p>
                @if (!empty($kpi['hint']))
                    <p class="mt-1 text-xs text-slate-400">{{ $kpi['hint'] }}</p>
                @endif
            </div>
        @endforeach
    </div>
</section>