:root {
  --bs-primary: #005B9F;
}

body {
  background-color: #F5F5F5;
}

.kpi-card {
  min-height: 85px;
  padding: 0.65rem 0.75rem;
  border-radius: 0.6rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.kpi-card .card-title {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.kpi-card .kpi-value {
  font-size: 1.35rem;
}

.kpi-card .kpi-subtext {
  font-size: 0.75rem;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 360px;
  margin-bottom: 1.5rem;
  overflow-y: auto;
}

@media (max-width: 576px) {
  .chart-container {
    height: 280px;
  }
}

canvas {
  height: 100% !important;
}

.chart-title {
  font-weight: 600;
}

@media (max-width: 576px) {
  .chart-title {
    font-size: 1.25rem;
  }
}

#det-prop-c.badge {
  font-size: 1rem;
  padding: 0.25rem 0.6rem;
}

/* KPI summary chip styles – leggeri e coerenti con palette (Rev. 3.6.362b) */
.kpi-strip { align-items: stretch; }
.kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: #f8fafc; /* neutro */
  font-size: .9rem;
  line-height: 1.1;
}
.kpi-chip .kpi-chip-label { color: #475569; }      /* slate-600 */
.kpi-chip .kpi-chip-value { font-weight: 600; }

.kpi-chip-neutral { background: #f8fafc; }         /* neutro */
.kpi-chip-warn    { background: #fff7ed; }         /* amber-50 */
.kpi-chip-ok      { background: #ecfdf5; }         /* emerald-50 */
.kpi-chip-info    { background: #f0f9ff; }         /* sky-50 */
.kpi-chip-accent  { background: #e0f2fe; }         /* cyan-100 */

@media (max-width: 1366px) {
  .kpi-chip { font-size: .85rem; padding: .3rem .55rem; }
}

/* Spaziatura minima uniforme nelle tre colonne KPI della card */
#kpi-riordino-card .row.g-3 > div { padding-top: .25rem; padding-bottom: .25rem; }

/* Cornici compatte per KPI nella griglia */
.kpi-frame {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .35rem .5rem;
  border-radius: .6rem;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.04);
}
.kpi-frame .text-muted.small {
  color: #64748b; /* slate-500 */
  font-size: .75rem;
  margin-bottom: 0;
}
.kpi-frame .fs-5.fw-semibold {
  font-size: .95rem;
  line-height: 1.2;
}

/* Varianti colore leggere, in linea con le chip */
.kpi-frame-neutral { background: #f8fafc; border-color: #e2e8f0; }
.kpi-frame-info    { background: #f0f9ff; border-color: #bae6fd; }
.kpi-frame-ok      { background: #ecfdf5; border-color: #a7f3d0; }
.kpi-frame-warn    { background: #fff7ed; border-color: #fed7aa; }
.kpi-frame-accent  { background: #e0f2fe; border-color: #b6e3fa; }

@media (max-width: 1366px) {
  .kpi-frame { padding: .3rem .45rem; }
  .kpi-frame .fs-5.fw-semibold { font-size: .92rem; }
}

/* Griglia KPI: 2 righe da 5 su viewport ampie */
#kpi-riordino-card .kpi-grid {
  display: grid;
  gap: .5rem;
}
@media (min-width: 992px) { /* lg+ */
  #kpi-riordino-card .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* md */
  #kpi-riordino-card .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) { /* sm */
  #kpi-riordino-card .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}