.completion-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af; /* Gray color for empty state */
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.completion-status.completed {
    color: #10b981; /* Green color for completed state */
}

.lecture-card.completed {
    border-left: 4px solid #10b981;
    background-color: rgba(16, 185, 129, 0.05);
}

/* Add a subtle animation for the checkmark when it appears */
.completion-status i {
    animation: checkmark-appear 0.5s ease-out;
}

@keyframes checkmark-appear {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}