/* Task Completion Styles */
.task-completed {
    opacity: 0.6;
    text-decoration: line-through;
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.task-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    padding: var(--space-2);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.task-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
}

.task-checkbox input[type="checkbox"] {
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.task-checkbox.task-completed .task-label {
    text-decoration: line-through;
    opacity: 0.7;
    color: var(--color-success);
}

.checkmark {
    display: none; /* We'll use the native checkbox for now */
}

/* Progress indicators */
.progress-indicator {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 500;
    margin-left: var(--space-2);
}

.progress-indicator.completed {
    background: rgba(34, 197, 94, 0.2);
    color: rgb(34, 197, 94);
}

.progress-indicator.in-progress {
    background: rgba(251, 191, 36, 0.2);
    color: rgb(251, 191, 36);
}

.progress-indicator.not-started {
    background: rgba(156, 163, 175, 0.2);
    color: rgb(156, 163, 175);
}