.of-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }

.of-progress-cell { min-width: 165px; }

.of-status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }

.of-status-created { color: var(--bt-primary-dark); background: var(--bt-primary-soft); }

.of-status-progress { color: var(--bt-secondary-dark); background: var(--bt-secondary-soft); }

.of-status-warning { color: #936000; background: var(--bt-warning-soft); }

.of-status-success { color: var(--bt-success); background: var(--bt-success-soft); }

.of-status-danger { color: var(--bt-danger); background: var(--bt-danger-soft); }

@media (max-width: 1399.98px) {
    .of-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .of-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .of-kpi-grid { grid-template-columns: 1fr; }
}