Use compact operational KPIs in the Reports page hero.

Hero cards now show patient/appointment/lab counts instead of long currency strings, and page-hero values truncate safely for large figures.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/components/care/page-hero.blade.php

@@ -27,9 +27,9 @@
             @if (count($stats) > 0)
                 <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
                     @foreach ($stats as $stat)
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
-                            <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $stat['value'] }}</p>
-                            <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">{{ $stat['label'] }}</p>
+                        <div class="mobile-stats-card flex w-[8.5rem] shrink-0 snap-start flex-col justify-center rounded-xl border border-slate-200 bg-white/90 px-3 py-3 text-center backdrop-blur-sm sm:w-auto sm:min-w-0">
+                            <p class="truncate text-lg font-bold tabular-nums text-slate-900 sm:text-xl" title="{{ $stat['value'] }}">{{ $stat['value'] }}</p>
+                            <p class="mt-0.5 truncate text-[11px] font-medium text-slate-500" title="{{ $stat['label'] }}">{{ $stat['label'] }}</p>
                         </div>
                     @endforeach
                 </div>