/* Riêng cho modules/kanban.js — bảng cột kéo-thả */

.kanban-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.kanban-col {
  width: 280px; flex-shrink: 0; background: var(--surface-muted);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px;
  transition: transform .16s ease;
}
.kanban-col.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.kanban-col-new { width: 190px; background: transparent; border-style: dashed; }
.kanban-col-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; cursor: grab; }
.kanban-col-head:active { cursor: grabbing; }
/* Kéo cột: cột hai bên khe chèn dạt ra, đủ để hiểu cột sẽ rơi vào giữa. */
.kanban-col.shift-left { transform: translateX(-14px); }
.kanban-col.shift-right { transform: translateX(14px); }
.kanban-col.col-dragging { opacity: .35; border-style: dashed; border-color: var(--accent); transform: none; }
.kanban-col-title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanban-col-rename { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; padding: 4px 7px; }
.kanban-col-del { padding: 2px 6px; line-height: 1; opacity: 0; }
.kanban-col:hover .kanban-col-del, .kanban-col-del:focus-visible { opacity: .55; }
.kanban-col-del:hover { opacity: 1; }
.kanban-count { font-size: 11px; color: var(--ink-muted); background: var(--surface); border-radius: 100px; padding: 1px 8px; }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 20px; margin-bottom: 10px; }
.kanban-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 30px 10px 11px; cursor: grab; box-shadow: var(--shadow-card);
}
.kanban-card.dragging { opacity: .4; }
.kanban-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 3px; }
.kanban-card-desc { font-size: 12px; color: var(--ink-muted); margin: 0; white-space: pre-wrap; }
.kanban-card-del { position: absolute; top: 4px; right: 4px; padding: 2px 6px; line-height: 1; opacity: .45; }
.kanban-card:hover .kanban-card-del, .kanban-card-del:focus-visible { opacity: 1; }

.kanban-card.editing { cursor: default; padding: 8px 9px; border-color: var(--accent); }
.kanban-edit-title { font-size: 13.5px; font-weight: 600; padding: 6px 8px; }
.kanban-edit-desc { font-size: 12px; padding: 6px 8px; margin-top: 6px; color: var(--ink-muted); }
.kanban-add-input {
  border-style: dashed; background: transparent; color: var(--ink);
  font-size: 13px; padding: 8px 11px;
}
.kanban-add-input::placeholder { color: var(--ink-muted); }
.kanban-add-input:focus { background: var(--surface); border-style: solid; border-color: var(--accent); }