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

.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; }
.column {
  background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: var(--radius-md);
  width: 270px; min-width: 270px; display: flex; flex-direction: column; max-height: calc(100vh - 220px);
}
.column-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.column-title { font-weight: 600; font-size: 13px; flex: 1; cursor: text; }
.column-count { font-size: 11px; color: var(--text-muted); background: var(--bg-input); padding: 0 6px; border-radius: 999px; }
.column-body { padding: 8px; overflow-y: auto; flex: 1; min-height: 40px; display: flex; flex-direction: column; gap: 8px; }
.column-foot { padding: 8px; }
.add-card-btn { width: 100%; text-align: left; color: var(--text-muted); padding: 6px 8px; border-radius: var(--radius-sm); }
.add-card-btn:hover { background: var(--bg-card-hover); color: var(--text-secondary); }

.tcard {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px; cursor: pointer; transition: all 150ms ease;
}
.tcard:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
.tcard-title { font-weight: 500; font-size: 13px; margin-bottom: 6px; word-break: break-word; }
.tcard-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.tcard-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.progress-bar { height: 6px; background: var(--bg-input); border-radius: 999px; overflow: hidden; margin: 8px 0; box-shadow: inset 0 0 0 1px var(--border); }
.progress-bar > div { height: 100%; border-radius: 999px; transition: width 250ms ease; background: linear-gradient(90deg, var(--accent-study), #93c5fd); }
.progress-bar.res > div { background: linear-gradient(90deg, var(--accent-lang), #fdba74); }

.add-column-btn {
  width: 270px; min-width: 270px; border: 1px dashed var(--border); border-radius: var(--radius-md);
  color: var(--text-muted); padding: 12px; transition: all 150ms ease;
}
.add-column-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }

/* Drag & drop visuals */
.sortable-ghost { background: var(--border) !important; border: 2px dashed var(--border-hover) !important; }
.sortable-ghost * { opacity: 0; }
.sortable-drag { opacity: 0.4 !important; }
.sortable-chosen { cursor: grabbing; }