.job-status-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 10px 0 5px;
}

.job-status-progress::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 8%;
    right: 8%;
    height: 4px;
    background: #dee2e6;
    z-index: 1;
}

.job-status-step {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
}

.job-status-circle {
    width: 38px;
    height: 38px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 3px solid #fff;
}

.job-status-step.active .job-status-circle {
    background: #0d6efd;
    color: #fff;
}

.job-status-step.current .job-status-circle {
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .2);
}

.job-status-label {
    font-size: 13px;
    color: #6c757d;
    padding: 0 5px;
}

.job-status-step.active .job-status-label {
    color: #212529;
    font-weight: 600;
}

@media (max-width: 768px) {
    .job-status-progress {
        flex-direction: column;
        gap: 15px;
    }

    .job-status-progress::before {
        display: none;
    }

    .job-status-step {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 10px;
    }

    .job-status-circle {
        margin: 0;
        flex: 0 0 38px;
    }
}

.status-submitted {
    background-color: #6c757d;
}

.status-receiving {
    background-color: #0dcaf0;
    color: #000;
}

.status-staging {
    background-color: #ffc107;
    color: #000;
}

.status-complete {
    background-color: #198754;
}

.status-processing {
    background-color: #146c43;   /* darker green */
}

.status-mailing {
    background-color: #fd9843;   /* light orange */
    color: #000;
}

.status-delivered {
    background-color: #6c757d;
}

.status-hold {
    background-color: #dc3545;
}