/* =========================
   Large Laptop (1200px - 1399px)
   ========================= */
@media (max-width: 1399px) {
  .kpi-card {
    flex: 1 1 calc(25% - 16px); /* 4 cards */
  }
}


/* =========================
   Laptop (992px - 1199px)
   ========================= */
@media (max-width: 1199px) {
  .kpi-card {
    flex: 1 1 calc(33.33% - 16px); /* 3 cards */
  }
}


/* =========================
   Tablet (768px - 991px)
   ========================= */
@media (max-width: 991px) {
  .kpi-row {
    gap: 14px;
  }

  .kpi-card {
    flex: 1 1 calc(50% - 14px); /* 2 cards */
    padding: 18px 16px;
  }
  .chart-container{
    display:block !important;
  }
  .line-chart, .bar-chart, .doughnut-chart{
    width: 100%!important;
    margin-bottom: 15px;
  }
}


/* =========================
   Mobile Large (576px - 767px)
   ========================= */
@media (max-width: 767px) {
  .kpi-row {
    gap: 12px;
  }

  .kpi-card {
    flex: 1 1 100%; /* 1 card */
    padding: 16px;
  }
  .top-header .body-header .logo-group img{
    height: 36px!important;
  }
  .top-header .body-header .headerTxt{
    font-size: 16px!important;
  }
}


/* =========================
   Mobile Small (≤575px)
   ========================= */
@media (max-width: 575px) {
  .kpi-row {
    gap: 10px;
    margin-bottom: 16px;
  }

  .kpi-card {
    flex-direction: column;   /* stack icon + text */
    align-items: flex-start!important;
    gap: 8px!important;
    padding: 14px!important;
  }

  .kpi-icon {
    font-size: 20px!important;
  }

  .kpi-value {
    font-size: 16px!important;
  }

  .kpi-label {
    font-size: 12px!important;
  }
   .dso-cv-grid {
    height: 250px;
  }

}