/* ===== TASK BOARD: Kanban columns, cards, toolbar ===== */

.task-board { display: flex; gap: 16px; padding: 16px; height: 100%; overflow: hidden; }

.task-column {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    background: var(--bg-card); border-radius: var(--radius-sm); border: 1px solid var(--border); overflow: hidden;
}
.task-column-header {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.task-column-header h3 { font-size: var(--font-section); font-weight: 600; }
.task-count-badge {
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    background: var(--bg-input); color: var(--text-muted); min-width: 18px; text-align: center;
}
.task-column-body { flex: 1; overflow-y: auto; padding: 8px; }

/* Cards */
.task-card {
    padding: 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-input); border-left: 3px solid var(--text-muted); transition: border-color 0.15s;
}
.task-card:hover { border-color: var(--accent); border-left-color: inherit; }
.task-card-title { font-size: var(--font-body); font-weight: 600; margin-bottom: 4px; }
.task-card-desc {
    font-size: var(--font-label); color: var(--text-muted); line-height: 1.4;
    max-height: 2.8em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 6px;
}
.task-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.task-card-date { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.task-card-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.task-card-actions button { font-size: 11px; padding: 3px 8px; }

/* Tags */
.task-tag {
    font-size: 10px; padding: 1px 7px; border-radius: 10px;
    background: rgba(99, 102, 241, 0.15); color: var(--accent); white-space: nowrap;
}

/* Priority border colors */
.task-priority-0, .task-priority-1 { border-left-color: var(--red); }
.task-priority-2 { border-left-color: var(--yellow); }
.task-priority-3 { border-left-color: var(--text-muted); }
.task-priority-4, .task-priority-5 { border-left-color: var(--blue); }

/* Toolbar */
.task-toolbar {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.task-toolbar input[type="text"] { max-width: 200px; padding: 5px 10px; font-size: 12px; }
.task-toolbar select { max-width: 140px; padding: 5px 8px; font-size: 12px; }
.task-toolbar .checkbox-label { font-size: 12px; gap: 4px; white-space: nowrap; }

/* Add form */
.task-add-form {
    padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card);
    display: flex; flex-direction: column; gap: 8px;
}
.task-add-form input, .task-add-form textarea, .task-add-form select {
    font-size: 12px; padding: 6px 10px;
}
.task-add-form textarea { resize: vertical; min-height: 40px; font-family: inherit; }
.task-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-add-row > * { flex: 1; min-width: 100px; }
.task-add-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Responsive: stack columns vertically on narrow screens */
@media (max-width: 768px) {
    .task-board { flex-direction: column; overflow-y: auto; }
    .task-column { min-height: 200px; }
}