/* ============================================================
   Riquadri KPI "single-stat" (24-set)
   ------------------------------------------------------------
   resources/views/filament/widgets/single-stat.blade.php, usata da
   14 widget: Campagne email, Automazioni email, Dashboard, Ospiti.
   I widget passano colori Tailwind (bg-blue-100, border-blue-200,
   text-blue-800, dark:bg-blue-900/30...) che il CSS precompilato
   di Filament non contiene. Dalla rimozione della build Vite
   (da724abd, 30 mag 2026) i riquadri uscivano senza fondo, col
   bordo chiaro di default e le icone piene.

   Qui ci sono le sole classi che servono, con i valori della
   palette Tailwind, e SOLO dentro .jo-single-stat: definite per
   tutto il pannello cambierebbero altri blade che usano
   text-gray-900 o text-blue-800 senza variante dark (testo scuro
   su fondo scuro).

   In dark la tinta scura si ricava da quella chiara: 5 widget su
   14 passano solo i colori chiari, e sulla stessa pagina sarebbero
   rimasti riquadri chiari accanto a riquadri scuri. Le classi
   dark:* dei widget restano nel markup, senza effetto.
   ============================================================ */

/* Struttura (icona a destra, attenuata) */
.jo-single-stat .flex-shrink-0 { flex-shrink: 0; }
.jo-single-stat .ml-4 { margin-left: 1rem; }
.jo-single-stat .opacity-30 { opacity: 0.3; }
.jo-single-stat .text-gray-900 { color: #111827; }

/* ---- Chiaro --------------------------------------------------- */

.jo-single-stat.bg-blue-100 { background-color: #dbeafe; }
.jo-single-stat.border-blue-200 { border-color: #bfdbfe; }
.jo-single-stat .text-blue-800 { color: #1e40af; }
.jo-single-stat .text-blue-600 { color: #2563eb; }

.jo-single-stat.bg-green-100 { background-color: #dcfce7; }
.jo-single-stat.border-green-200 { border-color: #bbf7d0; }
.jo-single-stat .text-green-800 { color: #166534; }
.jo-single-stat .text-green-600 { color: #16a34a; }

.jo-single-stat.bg-purple-100 { background-color: #f3e8ff; }
.jo-single-stat.border-purple-200 { border-color: #e9d5ff; }
.jo-single-stat .text-purple-800 { color: #6b21a8; }
.jo-single-stat .text-purple-600 { color: #9333ea; }

.jo-single-stat.bg-yellow-50 { background-color: #fefce8; }
.jo-single-stat.bg-yellow-100 { background-color: #fef9c3; }
.jo-single-stat.border-yellow-200 { border-color: #fef08a; }
.jo-single-stat .text-yellow-800 { color: #854d0e; }
.jo-single-stat .text-yellow-600 { color: #ca8a04; }

/* ---- Scuro (stessi valori delle dark:* passate dai widget) ---- */

.dark .jo-single-stat.bg-blue-100 { background-color: rgba(30, 58, 138, 0.3); }   /* blue-900/30 */
.dark .jo-single-stat.border-blue-200 { border-color: #1d4ed8; }                 /* blue-700 */
.dark .jo-single-stat .text-blue-800 { color: #93c5fd; }                         /* blue-300 */
.dark .jo-single-stat .text-blue-600 { color: #60a5fa; }                         /* blue-400 */

.dark .jo-single-stat.bg-green-100 { background-color: rgba(20, 83, 45, 0.3); }  /* green-900/30 */
.dark .jo-single-stat.border-green-200 { border-color: #15803d; }                /* green-700 */
.dark .jo-single-stat .text-green-800 { color: #86efac; }                        /* green-300 */
.dark .jo-single-stat .text-green-600 { color: #4ade80; }                        /* green-400 */

.dark .jo-single-stat.bg-purple-100 { background-color: rgba(88, 28, 135, 0.3); } /* purple-900/30 */
.dark .jo-single-stat.border-purple-200 { border-color: #7e22ce; }                /* purple-700 */
.dark .jo-single-stat .text-purple-800 { color: #d8b4fe; }                        /* purple-300 */
.dark .jo-single-stat .text-purple-600 { color: #c084fc; }                        /* purple-400 */

.dark .jo-single-stat.bg-yellow-50,
.dark .jo-single-stat.bg-yellow-100 { background-color: rgba(113, 63, 18, 0.2); } /* yellow-900/20 */
.dark .jo-single-stat.border-yellow-200 { border-color: #a16207; }                /* yellow-700 */
.dark .jo-single-stat .text-yellow-800 { color: #fde047; }                        /* yellow-300 */
.dark .jo-single-stat .text-yellow-600 { color: #facc15; }                        /* yellow-400 */