.status-dot-red {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--bs-danger);
    display: inline-block;
}

.status-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.status-card-bar {
    width: 3px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Scheduled Keys — green */
.status-card-scheduled {
    background-color: #e8f5ec;
}
.status-bar-scheduled {
    background-color: #2e7d32;
}
.status-count-scheduled {
    color: #2e7d32;
}

/* Assisting — blue */
.status-card-assisting {
    background-color: #e3f2fd;
}
.status-bar-assisting {
    background-color: #1976d2;
}
.status-count-assisting {
    color: #1976d2;
}

/* In Review / Pending Approval — orange */
.status-card-review {
    background-color: #fff3e0;
}
.status-bar-review {
    background-color: #ef6c00;
}
.status-count-review {
    color: #ef6c00;
}

/* Needs Revision / Rejected — red */
.status-card-danger {
    background-color: #fdecea;
}
.status-bar-danger {
    background-color: #d32f2f;
}
.status-count-danger {
    color: #d32f2f;
}

/* Fallback */
.status-card-default {
    background-color: #f5f5f5;
}
.status-bar-default {
    background-color: #9e9e9e;
}
.status-count-default {
    color: #757575;
}

/* Accent bar — no Bootstrap equivalent for fixed 3×18px bar */
.status-accent-bar {
    width: 3px;
    height: 18px;
    flex-shrink: 0;
}

/* Status indicator dot — no Bootstrap equivalent for 7px circle */
.status-dot-red {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--bs-danger);
    display: inline-block;
}