/* Unified Completion Checkmark - For both completed tasks and answered questions */

/* Remove any existing checkmarks from task completion animation */
.clean-tile.task.completed .tile-header::before {
    display: none !important;
}

/* Remove the existing strike-through from completed tasks */
.clean-tile.task.completed .tile-text::after {
    display: none !important;
}

/* Add green circle checkmark in header for completed tasks and answered questions */
.clean-tile.task.completed .tile-header-right::before,
.clean-tile.question.answered .tile-header-right::before {
    content: '\f058'; /* Font Awesome circle check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #22c55e;
    font-size: 1.25rem;
    margin-right: 0.5rem;
    display: inline-block;
    animation: checkmarkFadeIn 0.3s ease-out forwards;
}

/* Add yellow circle clock icon for asked questions waiting for response */
.clean-tile.question.asked:not(.answered) .tile-header-right::before {
    content: '\f017'; /* Font Awesome clock icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #eab308; /* Yellow color */
    font-size: 1.25rem;
    margin-right: 0.5rem;
    display: inline-block;
    animation: checkmarkFadeIn 0.3s ease-out forwards;
}

/* Animation for the checkmark appearance */
@keyframes checkmarkFadeIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Ensure consistent opacity for completed/answered items */
.clean-tile.task.completed,
.clean-tile.question.answered {
    opacity: 0.4 !important;
}

/* Asked questions waiting for response - higher transparency */
.clean-tile.question.asked:not(.answered) {
    opacity: 0.5 !important; /* 50% transparency - more faded than before */
}

/* Hover states */
.clean-tile.task.completed:hover,
.clean-tile.question.answered:hover {
    opacity: 0.5 !important;
}

.clean-tile.question.asked:not(.answered):hover {
    opacity: 0.6 !important;
}

/* Ensure the header-right flexbox displays properly */
.clean-tile.task.completed .tile-header-right,
.clean-tile.question.answered .tile-header-right,
.clean-tile.question.asked:not(.answered) .tile-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Keep the original status positioning for all tiles */
.clean-tile .tile-status {
    position: absolute !important;
    right: 0 !important;
}

/* Hide status on hover for all tiles (including completed/answered) */
.clean-tile:hover .tile-status {
    opacity: 0 !important;
}

/* Show icons on completed/answered/asked tiles */
.clean-tile.task.completed .tile-header-right::before,
.clean-tile.question.answered .tile-header-right::before,
.clean-tile.question.asked:not(.answered) .tile-header-right::before {
    position: relative;
    order: -1; /* Place before other content */
    margin-right: auto; /* Push everything else to the right */
    margin-left: 0.5rem;
}