/* ==========================================================================
   SGP — Fatia 33 · Tarefas (kanban) e @menção

   Camada própria, acrescentada ao manifesto com UMA linha (regra anti-conflito
   do plano): nada aqui reescreve 03_componentes.css nem 04_layout.css.

   O quadro é grid de 3 colunas que vira 1 coluna no celular — onde arrastar
   não existe e o caminho é o botão "Mover para" de cada cartão.
   ========================================================================== */

/* --- Botão de ação em estado aceso ---------------------------------------- */
/* Os recortes do quadro viraram chips na barra do esqueleto (F09); esta classe
   sobrou para botões acesos dentro do cartão. */

.botao--ativo {
  background: var(--cor-acao-suave);
  border-color: var(--cor-acao);
  color: var(--cor-acao-forte);
}

/* --- Colunas laterais do esqueleto ---------------------------------------- */

.tarefa-prazos__titulo,
.tarefa-movimentos__titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: 600;
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tarefa-prazos__lista,
.tarefa-movimentos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.tarefa-prazos__item,
.tarefa-movimentos__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-fundo);
}

.tarefa-prazos__item--atrasada { border-left: 3px solid var(--cor-perigo); }

.tarefa-prazos__meta,
.tarefa-prazos__caso {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--texto-xs);
}

.tarefa-movimentos__frase { margin: 0; font-size: var(--texto-sm); }
.tarefa-movimentos__alvo,
.tarefa-movimentos__quando { font-size: var(--texto-xs); }

/* Botão de ação dentro de cartão: menor que `.botao--pequeno`, para caber três
   deles no rodapé de um cartão de 260px sem estourar a linha. */
.botao--mini {
  height: 26px;
  padding: 0 var(--esp-2);
  font-size: var(--texto-xs);
}

/* --- O quadro -------------------------------------------------------------- */

.tarefa-quadro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-4);
  align-items: start;
}

@media (max-width: 900px) {
  .tarefa-quadro { grid-template-columns: minmax(0, 1fr); }
}

.tarefa-coluna {
  /* `min-width: 0` é o conserto da causa raiz do "cortado" do grid: item de
     grid nasce com `min-width: auto` e um título longo empurra a coluna para
     fora da tela. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-3);
  background: var(--cor-fundo-afundado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida);
}

.tarefa-coluna--alvo {
  background: var(--cor-acao-suave);
  border-color: var(--cor-acao);
}

.tarefa-coluna__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}

.tarefa-coluna__titulo {
  margin: 0;
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tarefa-coluna__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-height: 3rem;
}

.tarefa-coluna__vazia,
.tarefa-coluna__excedente {
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

.tarefa-coluna--concluida .tarefa__titulo { color: var(--cor-texto-suave); }

/* --- O cartão -------------------------------------------------------------- */

.tarefa {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-3);
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-xs);
  cursor: grab;
}

.tarefa--arrastando { opacity: .45; cursor: grabbing; }

.tarefa--atrasada { border-left: 3px solid var(--sgp-perigo); }

.tarefa__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-2);
}

.tarefa__titulo {
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
  overflow-wrap: anywhere;
}

.tarefa__punho { color: var(--cor-texto-fraco); cursor: grab; user-select: none; }

.tarefa__linha,
.tarefa__rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
  font-size: var(--texto-xs);
}

.tarefa__caso { color: var(--cor-texto-suave); font-size: var(--texto-xs); }

.tarefa__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex-wrap: wrap;
  padding-top: var(--esp-2);
  border-top: 1px dashed var(--cor-borda);
}

.tarefa__mover-rotulo {
  font-size: var(--texto-2xs);
  color: var(--cor-texto-fraco);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Formulário de anotar -------------------------------------------------- */

.tarefa-formulario__linha {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.tarefa-formulario__linha > .campo { min-width: 12rem; }
.tarefa-formulario__acao { flex: none; }

/* --- Painel "O que falta" na ficha do caso --------------------------------- */

.tarefa-painel { list-style: none; margin: 0; padding: 0; }

.tarefa-painel__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.tarefa-painel__item:last-child { border-bottom: 0; }

.tarefa-painel__item--concluida .tarefa__titulo {
  color: var(--cor-texto-fraco);
  text-decoration: line-through;
}

/* --- @menção --------------------------------------------------------------- */

/* O nome mencionado dentro do corpo do comentário. É um `span`, e não um link:
   não existe ficha pública de usuário no SGP (usuários moram em Configurações,
   atrás de um módulo que o assessor comum não tem), então um `<a>` levaria a
   maioria do gabinete a uma tela negada. */
.mencao {
  display: inline;
  padding: 0 .2em;
  border-radius: var(--raio-xs);
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
  font-weight: var(--peso-medio);
}


.mencionavel { position: relative; }

/* A lista de sugestões usa a mesma mecânica do seletor com busca (F13): camada
   de topo por popover nativo, posicionada por coordenadas pelo Stimulus, para
   não ser cortada pelo `overflow: hidden` do cartão. */
.mencao__resultados {
  position: fixed;
  z-index: var(--z-dropdown);
  inset: auto;
  margin: 0;
  padding: 0;
  display: block;
  width: 20rem;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
}

.mencao__resultados[hidden] { display: none; }
.mencao__resultados:empty { display: none; }

.mencao__lista { list-style: none; margin: 0; padding: var(--esp-1); }

.mencao__opcao {
  display: flex;
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: 0;
  border-radius: var(--raio-xs);
  background: transparent;
  color: var(--cor-texto);
  font: inherit;
  font-size: var(--texto-md);
  text-align: left;
  cursor: pointer;
}

.mencao__opcao:hover,
.mencao__opcao--ativa {
  background: var(--cor-acao-suave);
  color: var(--cor-acao-forte);
}

.mencao__opcao:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.mencao__aviso {
  margin: 0;
  padding: var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}