/* Usado por Components/UI/Kanban.razor + KanbanColumn/KanbanCard */
/* .content (layout.css) trava em max-width:1240px mesmo com o navegador bem mais largo — o
   Kanban "vaza" desse limite de propósito (breakout), usando a largura real disponível ao lado
   da sidebar em vez da caixa de leitura estreita. --side-w/--pad são os mesmos tokens que
   .content usa pro seu próprio padding lateral, então essa conta bate exatamente com a borda
   real de .main nos dois casos (viewport estreito: dá na mesma largura de .content sem cap;
   viewport largo: ultrapassa o cap de .content e encosta na borda verdadeira da página). Colunas
   com largura travada (não mais 1fr) pra não ficarem esparsas em telas muito largas — mais
   colunas cabem sem rolar, em vez de esticar as mesmas 4-5 colunas de sempre. */
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 12px;
  overflow-x: auto; padding: 0 2px 8px;
  width: calc(100vw - var(--side-w) - 2 * var(--pad));
}
.kol { background: var(--surface-2); border: var(--border-w) solid var(--line); border-radius: var(--r); padding: 10px; }
.kol-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 10px; }
.kol-head b { font-size: var(--fs-sm); font-weight: 600; }
.kol-head span { font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); }
.kcard {
  background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--r);
  padding: 12px; margin-bottom: 8px; font-size: var(--fs-sm);
}
.kcard b { display: block; font-weight: 600; margin-bottom: 3px; }
.kcard .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--ink-3); font-size: var(--fs-xs); }
.kcard--draggable { cursor: grab; }
.kcard--draggable:active { cursor: grabbing; opacity: .6; }
.kol--drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }