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

.kpi-card,
.rofo-kpi {
    background: var(--surface-color);
    border-color: var(--form-border) !important;
}

.kpi-card .card-body,
.rofo-kpi .card-body {
    display: grid;
    gap: .35rem;
    padding: .9rem;
}

.kpi-card span,
.kpi-card small,
.rofo-kpi span,
.rofo-kpi small {
    color: var(--text-muted-color);
    font-size: .78rem;
}

.kpi-card strong,
.rofo-kpi strong {
    color: var(--header-color);
    font-size: 1.35rem;
    line-height: 1.1;
}

.kpi-metric,
.rofo-metric {
    background: var(--surface-color);
}

.kpi-metric .kpi-value,
.rofo-metric .rofo-metric-value {
    justify-self: start;
}

.kpi-metric:not(.kpi-metric--neutral) .kpi-value,
.rofo-metric:not(.rofo-metric--neutral) .rofo-metric-value {
    border-radius: .375rem;
    color: #fff;
    display: inline-flex;
    line-height: 1.15;
    padding: .25rem .55rem;
}

.kpi-metric--success .kpi-value,
.rofo-metric--success .rofo-metric-value {
    background: var(--valid-color);
}

.kpi-metric--danger .kpi-value,
.rofo-metric--danger .rofo-metric-value {
    background: var(--invalid-color);
}

.kpi-metric--warning .kpi-value,
.rofo-metric--warning .rofo-metric-value {
    background: var(--pending-color);
}

.kpi-metric--info .kpi-value,
.rofo-metric--info .rofo-metric-value {
    background: var(--primary-color);
}

.kpi-input-aggregate-grid,
.rofo-input-aggregate-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-input-aggregate .card-body,
.rofo-input-aggregate .card-body {
    display: grid;
    gap: .3rem;
    padding: .85rem;
}

.kpi-input-aggregate span,
.rofo-input-aggregate span {
    color: var(--text-muted-color);
    font-size: .76rem;
    font-weight: 700;
}

.kpi-input-aggregate strong,
.rofo-input-aggregate strong {
    color: var(--header-color);
    font-size: 1.2rem;
    line-height: 1.1;
}

.kpi-input-aggregate small,
.rofo-input-aggregate small {
    color: var(--text-muted-color);
    font-size: .74rem;
}

.kpi-delta-percent,
.rofo-kpi-delta-percent {
    font-weight: 700;
}

.kpi-delta-percent--up,
.rofo-kpi-delta-percent--up {
    color: var(--invalid-color);
}

.kpi-delta-percent--down,
.rofo-kpi-delta-percent--down {
    color: var(--valid-color);
}

.kpi-delta-percent--neutral,
.rofo-kpi-delta-percent--neutral {
    color: var(--text-muted-color);
}

@media (max-width: 992px) {
    .kpi-grid,
    .rofo-kpi-grid,
    .kpi-input-aggregate-grid,
    .rofo-input-aggregate-grid {
        grid-template-columns: 1fr;
    }
}