/* ========== Tasks filter view ========== */

.tasks-filters {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

/* ── Filter group: label + control ── */
.tasks-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tasks-filter-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* ── Status toggle — matches week-start-toggle ── */
.tasks-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

.tasks-toggle-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    user-select: none;
}

.tasks-toggle-btn input[type="radio"] {
    display: none;
}

.tasks-toggle-btn:hover {
    color: var(--text-primary);
}

.tasks-toggle-btn.active,
.tasks-toggle-btn:has(input:checked) {
    background: var(--accent);
    color: #0b0f14;
    box-shadow: 0 1px 4px rgba(76, 141, 202, 0.4);
}

/* ── Project select — same height as toggle ── */
.tasks-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    padding: 0;
    cursor: pointer;
    width: 100%;
    min-width: 0;
}

.tasks-filter-select:hover,
.tasks-filter-select:focus {
    outline: none;
}
.tasks-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

/* ── Date fields — same shape as toggle/select ── */
.tasks-date-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.tasks-date-field:hover {
    border-color: var(--accent);
}

.tasks-date-icon {
    font-size: 14px;
    color: var(--text-muted);
}

.tasks-date-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ── Tag pills ── */
.tasks-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.tasks-tag-pill {
    cursor: pointer;
    user-select: none;
}

.tasks-tag-pill input[type="checkbox"] {
    display: none;
}

.tasks-tag-pill:has(input:checked),
.tasks-tag-pill:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.tasks-tag-pill.task-tag--green:has(input:checked),
.tasks-tag-pill.task-tag--green:hover  { background: var(--green);  border-color: var(--green);  color: #fff; }
.tasks-tag-pill.task-tag--amber:has(input:checked),
.tasks-tag-pill.task-tag--amber:hover  { background: var(--amber);  border-color: var(--amber);  color: #1a1a2e; }
.tasks-tag-pill.task-tag--red:has(input:checked),
.tasks-tag-pill.task-tag--red:hover    { background: #e05c6e;       border-color: #e05c6e;       color: #fff; }
.tasks-tag-pill.task-tag--purple:has(input:checked),
.tasks-tag-pill.task-tag--purple:hover { background: #9b8ecf;       border-color: #9b8ecf;       color: #fff; }
.tasks-tag-pill.task-tag--teal:has(input:checked),
.tasks-tag-pill.task-tag--teal:hover   { background: #4db6ac;       border-color: #4db6ac;       color: #fff; }

/* ── Search field ── */
.tasks-filter-group--search {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
}

.tasks-search-field {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.tasks-search-field:focus-within {
    border-color: var(--accent);
}

.tasks-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    width: 100%;
    min-width: 0;
}

.tasks-search-input::placeholder {
    color: var(--text-muted);
}

/* ── Clear button ── */
.tasks-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
    margin-left: auto;
}

.tasks-filter-clear:hover {
    color: var(--text-primary);
    background: var(--accent-glow);
}

.tasks-filter-clear .material-icons {
    font-size: 18px;
}

/* ── Result count ── */
.tasks-result-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

/* ── Archived badge on task row ── */
.task-archived-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--amber);
    background: var(--amber-glow);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.task-archived-badge-icon {
    font-size: 14px;
}

/* Archived checkbox icon in amber */
.checkbox-icon-archived {
    color: var(--amber) !important;
}
.task-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--accent-glow);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.task-date-badge-icon {
    font-size: 13px;
    flex-shrink: 0;
}

.task-date-badge--overdue {
    color: var(--clear-red);
    background: color-mix(in srgb, var(--clear-red) 15%, transparent);
}

/* Deadline badge — separate from .task-date-badge (which marks the
   scheduled day) so "scheduled" and "deadline" never look like the same
   fact. Only rendered from "approaching" upward; a comfortable deadline
   shows nothing to avoid noise. */
.task-deadline-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.task-deadline-badge-icon {
    font-size: 13px;
    flex-shrink: 0;
}

/* Icon-only at every breakpoint, not just mobile: task rows are dense
   (title, tags, date/deadline badges, priority) at any width, and the
   full label just delays the same crowding to a wider, less-tested
   breakpoint. Color+shape carries the urgency tier; the full phrase
   stays reachable via title/aria-label and the task detail panel. */
.task-deadline-badge-text {
    display: none;
}

.task-deadline-badge--approaching {
    color: var(--amber);
    background: var(--amber-glow);
}

.task-deadline-badge--at-risk,
.task-deadline-badge--overdue {
    color: var(--clear-red);
    background: color-mix(in srgb, var(--clear-red) 15%, transparent);
}

/* Time badge — a fact (like a timestamp), not a state, so it stays muted
   rather than using the accent glow treatment of .task-date-badge. Sized a
   step below .task-date-badge/.task-tag-badge so it reads as secondary
   metadata rather than competing with the title or tags for attention. */
.task-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.68rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.task-time-badge-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.calendar-trigger:hover .task-time-badge {
    color: var(--accent);
}

/* "+ time" ghost hint — only reveals on hover so a dated-but-untimed task
   signals that time is settable, without adding a new click target or
   permanent visual noise to every dated task row. */
.task-time-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.calendar-trigger:hover .task-time-hint {
    opacity: 1;
}

.calendar-trigger:hover .task-time-hint:hover {
    color: var(--accent);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tasks-filters {
        gap: 0.75rem;
    }

    .tasks-filter-group {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tasks-toggle {
        width: 100%;
    }

    .tasks-toggle-btn {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    .tasks-filter-select {
        width: 100%;
    }

    .tasks-date-field {
        flex: 1;
    }
}