/* Dashboard-specific — chart wrappers + Chart.js alignment with redesign */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.kpi {
  grid-column: span 3;
  padding: 14px;
}

@media (max-width: 1200px) {
  .kpi {
    grid-column: span 6;
  }
}

@media (max-width: 720px) {
  .kpi {
    grid-column: span 12;
  }
}

.dashboard-chart-wrap {
  position: relative;
  width: 100%;
  height: 228px;
  max-height: min(260px, 36vh);
  overflow: hidden;
}

.dashboard-chart-wrap canvas {
  display: block;
  max-width: 100%;
}

.chart-box {
  max-height: 260px;
}