/* ===== Dorax — KPI cards (v2) : box colorati, numeri grandi e leggibili ===== */

/* griglia: card separate con gap (non più pannello unico) */
.kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  background:none;border:0;border-radius:0;overflow:visible;
  margin:4px 0 6px;
}

.kpi{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px 15px;
  display:flex;flex-direction:column;gap:6px;
  min-width:0;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px -12px rgba(16,24,40,.25);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.kpi:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,24,40,.05), 0 14px 28px -16px rgba(16,24,40,.35)}
/* filo colorato in alto */
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent);opacity:.9}
/* alone tenue in basso a destra */
.kpi::after{
  content:"";position:absolute;right:-40px;bottom:-60px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle, var(--kpi-glow, rgba(36,67,181,.10)), transparent 70%);
  pointer-events:none;
}

/* etichetta con icona */
.kpi .l{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);line-height:1.2;
}
.kpi .ico{
  width:22px;height:22px;border-radius:7px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;
  background:var(--accent-soft);color:var(--accent);
}

/* numero principale: grande, bold, tabellare */
.kpi .v{
  font-family:var(--f-display);
  font-stretch:92%;
  font-weight:800;
  font-size:31px;
  line-height:1.05;
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  color:var(--fg);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kpi .v small{font-size:16px;font-weight:700;letter-spacing:0;opacity:.75;margin-left:1px}

/* sotto-nota: pill colorata */
.kpi .s{
  font-size:12px;font-weight:600;color:var(--muted);
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.kpi .s .chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;
  background:var(--sunk);color:var(--muted);
}
.kpi .s.good .chip,.kpi .s .chip.good{background:var(--good-soft);color:var(--good)}
.kpi .s.warn .chip,.kpi .s .chip.warn{background:var(--warn-soft);color:var(--warn)}
.kpi .s.bad .chip,.kpi .s .chip.bad{background:var(--bad-soft);color:var(--bad)}

/* card "hero": margine — pieno colore accent */
.kpi.hero{
  background:linear-gradient(140deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, #0B1020) 100%);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.kpi.hero::before{background:rgba(255,255,255,.45);opacity:1}
.kpi.hero::after{background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%)}
.kpi.hero .l{color:rgba(255,255,255,.85)}
.kpi.hero .ico{background:rgba(255,255,255,.18);color:#fff}
.kpi.hero .v{color:#fff;font-size:35px;text-shadow:0 1px 0 rgba(0,0,0,.08)}
.kpi.hero .s{color:rgba(255,255,255,.9)}
.kpi.hero .s .chip{background:rgba(255,255,255,.20);color:#fff}
.kpi.hero .s .chip.good{background:rgba(255,255,255,.22);color:#EAFBF1}
.kpi.hero .s .chip.bad{background:rgba(255,90,70,.35);color:#fff}
.kpi.hero .s .chip.warn{background:rgba(255,200,60,.28);color:#FFF6DA}

/* varianti colore per le altre card */
.kpi.good::before{background:var(--good)}
.kpi.good .ico{background:var(--good-soft);color:var(--good)}
.kpi.good .v{color:var(--good)}
.kpi.good::after{background:radial-gradient(circle, rgba(31,138,76,.12), transparent 70%)}

.kpi.in::before{background:var(--accent)}
.kpi.in .v{color:var(--accent)}

.kpi.out::before{background:var(--warn)}
.kpi.out .ico{background:var(--warn-soft);color:var(--warn)}
.kpi.out .v{color:var(--warn)}
.kpi.out::after{background:radial-gradient(circle, rgba(183,121,31,.13), transparent 70%)}

.kpi.risk::before{background:var(--bad)}
.kpi.risk .ico{background:var(--bad-soft);color:var(--bad)}
.kpi.risk .v{color:var(--bad)}
.kpi.risk::after{background:radial-gradient(circle, rgba(194,54,43,.12), transparent 70%)}

.kpi.net::before{background:linear-gradient(90deg,var(--good),var(--accent))}
.kpi.net .v{color:var(--fg)}

/* chip warning animato quando c'è qualcosa da guardare */
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.kpi .dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.kpi.risk .s.bad .dot{animation:pulseDot 1.6s ease-in-out infinite}

/* responsive */
@media (max-width:900px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi .v{font-size:26px}
  .kpi.hero .v{font-size:29px}
}
@media (max-width:520px){
  .kpis{grid-template-columns:1fr;gap:10px}
  .kpi{padding:14px 16px 13px}
  .kpi .v{font-size:28px}
}