/* ============================================================
   KANBAN — BOARD, COLUMNS, TASKS, DRAG STATES
   ============================================================ */

/* WRAPPER */
.kanban-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* HEADER */
/* Project Layout Header */
.project-layout .project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

/* Subheader (Calendar / Timeline controls) */
.project-layout .project-subheader {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* Project Title */
.project-layout .project-title {
  font-size: 1.1rem;
  font-weight: 600;
}

/* Project Navigation Buttons */
.project-layout .project-nav {
  display: flex;
  gap: 8px;
}

.project-layout .project-nav button {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}



.project-layout .project-nav button.active,
.project-layout .project-nav button.active:hover,
.project-layout .project-nav button.active:focus,
.project-layout .project-nav button.active:active {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}



/* ============================================================
   BOARD
   ============================================================ */

.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: var(--space-5);
}

/* ============================================================
   COLUMN
   ============================================================ */

.kanban-column {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 260px;
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-5);
  position: relative;
}

/* Column header */
.kanban-column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kanban-column-header h2 {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
}

/* Top color strip */
.kanban-column::before {
  content: "";
  display: block;
  height: 6px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3) calc(-1 * var(--space-4));
}

.kanban-column[data-col="todo"]::before {
  background: var(--kanban-todo);
}

.kanban-column[data-col="inprogress"]::before {
  background: var(--kanban-inprogress);
}

.kanban-column[data-col="review"]::before {
  background: var(--kanban-review);
}

.kanban-column[data-col="done"]::before {
  background: var(--kanban-done);
}

.task-count {
  background: var(--color-border-dark);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-xs);
}

/* ============================================================
   ADD TASK BUTTON
   ============================================================ */

.kanban-add-task {
  padding: var(--space-2);
  background: #fff;
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  font-size: var(--font-md);
  color: var(--color-text-muted);
  transition: 0.2s ease;
}

.kanban-add-task:hover {
  background: #eee;
}

/* ============================================================
   TASK CARD
   ============================================================ */

.task-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-top: var(--space-3);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: 0.2s ease;
}

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* Dragging state */
.task-card.dragging {
  opacity: 0.5;
  transform: scale(0.96);
}

/* Column highlight when dragging over */
.kanban-tasks.drag-over {
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

/* ============================================================
   TYPE PILL
   ============================================================ */

.task-type-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: 20px;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: #fff;
}

.task-type-pill.design { background: var(--task-design); }
.task-type-pill.bug { background: var(--task-bug); }
.task-type-pill.content { background: var(--task-content); }
.task-type-pill.research { background: var(--task-research); }

/* ============================================================
   TITLE + META
   ============================================================ */

.task-title {
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
}

.task-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-xs);
  color: var(--color-text-muted);
}