/* ========================================
   COMPONENT: TASKS
   Extracted from styles.css
   ======================================== */

/* ========================================
   Task List (sidebar widget)
   ======================================== */

.task-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.task-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 3px solid transparent;
    transition: background var(--transition-fast) var(--ease-out),
                border-left-color var(--transition-fast) var(--ease-out);
}

.task-item:last-child {
    border-bottom: none;
}

.task-item:hover {
    background: var(--color-gray-100);
    border-left-color: var(--color-primary);
}

/* Task toggle button — 44×44px min touch target */
.task-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    margin: calc(-1 * var(--space-2));  /* negative margin to keep visual size without affecting layout */
    transition: color var(--transition-fast) var(--ease-out);
}

.task-toggle-btn:hover {
    color: var(--color-primary) !important;
}

.task-toggle-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.task-body {
    flex: 1;
    min-width: 0;
}

.task-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);  /* upgraded from medium */
    color: var(--color-gray-800);
    line-height: var(--line-height-normal);    /* 1.5 — meets minimum body line-height */
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.task-title:hover {
    color: var(--color-primary);
}

.task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.task-due {
    color: var(--color-gray-600);
}

.task-due--overdue {
    color: var(--color-danger);
    font-weight: var(--font-weight-medium);
}

.task-due--today {
    color: var(--color-warning-text);  /* #8a6500 — WCAG AA on white (~5.0:1) */
    font-weight: var(--font-weight-medium);
}

.task-related {
    display: inline-flex;
    align-items: center;
    color: var(--color-gray-600);
}

/* Show-more footer inside content cards */
.content-card__show-more {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Alert items are clickable — show pointer cursor */
.alert-item[data-href] {
    cursor: pointer;
}