{{--
  <x-ui.stat-card> — carte KPI réutilisable (étape 7, EVOLUTION-design-flux.md
  section F : "remplacer le HTML dupliqué actuel par un composant Blade unique").

  Props :
    label      string  Libellé (ex. "Clients totaux")
    value      string  Valeur affichée en grand
    color      string  blue|green|yellow|red|purple|navy (défaut: navy)
    sub        string  Texte secondaire optionnel sous la valeur
    valueSize  string  Taille CSS optionnelle si la valeur est longue (ex. "18px")

  Slots nommés :
    icon       SVG brut affiché dans le badge d'icône
    sub        Texte/markup secondaire sous la valeur — remplace la prop
               `sub` quand le contenu n'est pas du texte brut (ex. un lien)

  Usage :
    <x-ui.stat-card label="Clients totaux" :value="$stats['total_clients']" color="blue" :sub="...">
      <x-slot:icon><svg ...>...</svg></x-slot:icon>
    </x-ui.stat-card>
--}}
@props(['label', 'value', 'color' => 'navy', 'sub' => null, 'valueSize' => null])

<div class="stat-card {{ $color }}">
  <div class="stat-header">
    <div>
      <div class="stat-label">{{ $label }}</div>
      <div class="stat-value" @if($valueSize) style="font-size:{{ $valueSize }}" @endif>{{ $value }}</div>
    </div>
    @isset($icon)
      <div class="stat-icon {{ $color }}">{{ $icon }}</div>
    @endisset
  </div>
  @isset($sub)
    @if(is_object($sub) || $sub !== '')<div class="stat-sub">{{ $sub }}</div>@endif
  @endisset
</div>