/*
  RDOOne — Visualização Gantt do Planejamento da obra (ETAPA 34.1)

  Painel de identificação (esquerda) + timeline (direita), lado a lado. Mesma fonte de dados que a
  tabela existente (TarefaDto já calculado pelo servidor) — este arquivo é puramente visual, nenhuma
  regra de negócio aqui.

  Reaproveita a MESMA variável --tarefa-font-scale já usada por tarefas-escala.css (ETAPA 28) para o
  texto do painel esquerdo/cabeçalho da timeline — os controles A-/A+ do cabeçalho de "Planejamento da
  obra" continuam sendo os únicos existentes; nenhum controle de escala novo foi criado.

  Escopo: tudo sob .tarefas-gantt (única ocorrência desta classe na página) — nunca aplicado
  globalmente, nunca afeta a tabela existente (.tarefas-grade) nem qualquer outra tela.

  Altura das linhas fixa em 30px (.tg-linha), correspondente à constante AlturaLinha em
  TarefasGanttView.razor — as duas precisam continuar batendo para o painel e a timeline
  permanecerem alinhados linha a linha.
*/

.tarefas-gantt {
    display: flex;
    flex-direction: column;
    height: min(600px, 70vh);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    background: var(--color-surface, #fff);
    color: var(--color-text, #374151);
    font-size: clamp(11px, calc(13px * var(--tarefa-font-scale, 1)), 13px);
}

/* ---------- Barra de ferramentas (zoom, Hoje, ajustar à tela, recolher painel, legenda) ---------- */

.tg-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 6px;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    background: var(--color-background, #F8FAFC);
}

/* ETAPA 34.8.1 — o campo de pesquisa (.tg-campo-pesquisa/.tg-pesquisa-contagem) mudou de dono para
   TarefasSecao (tarefas-colunas.css) — a pesquisa agora é compartilhada com a Tabela, não mais exclusiva
   do Gantt. Nada deste arquivo depende mais dessas classes. */

/* ---------- Corpo (painel + timeline lado a lado) ---------- */

.tg-corpo {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* ---------- Painel esquerdo ---------- */

.tarefas-gantt.tg-recolhido .tg-painel {
    width: 28px;
    min-width: 28px;
}

.tg-painel {
    width: 380px;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border, #E5E7EB);
    transition: width 0.15s ease, min-width 0.15s ease;
    overflow: hidden;
}

.tg-painel-alternar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    flex-shrink: 0;
    border: none;
    background: var(--color-background, #F8FAFC);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    cursor: pointer;
    color: var(--color-muted, #6B7280);
}

.tg-painel-alternar:hover {
    background: var(--color-border, #E5E7EB);
}

.tg-painel-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 380px;
    overflow: hidden;
}

.tarefas-gantt.tg-recolhido .tg-painel-conteudo {
    display: none;
}

.tg-painel-cabecalho {
    display: flex;
    flex-shrink: 0;
    height: 44px;
    align-items: flex-end;
    background: var(--color-background, #F8FAFC);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    font-weight: 600;
    font-size: clamp(10px, calc(11px * var(--tarefa-font-scale, 1)), 11px);
    color: var(--color-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tg-painel-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.tg-linha {
    display: flex;
    align-items: center;
    height: 30px;
    border-bottom: 1px solid var(--color-border, #E5E7EB);
    white-space: nowrap;
}

.tg-linha:hover {
    background: var(--color-background, #F8FAFC);
}

/* ETAPA 34.5 — reflexo da seleção do Gantt na linha correspondente do painel esquerdo (mesma fonte de
   estado, _tarefaSelecionadaId — nunca um segundo estado). Cor âmbar (--color-warning), a mesma usada
   na timeline (.tg-selecionada/.tg-linha-fundo-*), nunca reaproveitando o azul/cinza que já identificam
   o TIPO da tarefa (item 9 do pedido: não alterar a identidade visual existente). */
.tg-linha-selecionada {
    background: rgba(245, 158, 11, 0.14);
}

.tg-linha-relacionada {
    background: rgba(245, 158, 11, 0.07);
}

/* ETAPA 34.8 — destaque de pesquisa no painel esquerdo, via box-shadow (nunca background) exatamente
   para poder coexistir com tg-linha-selecionada/relacionada acima sem um sobrescrever o outro (duas
   propriedades CSS distintas, nunca uma disputa de especificidade). Cor violeta, nova nesta paleta —
   nunca reaproveita âmbar (seleção), vermelho (Hoje), azul/cinza (tipo da tarefa) ou o cinza do
   calendário (--color-border), para o usuário nunca confundir "encontrado pela busca" com outro estado. */
.tg-linha-encontrada {
    box-shadow: inset 3px 0 0 0 rgba(139, 92, 246, 0.55);
}

.tg-linha-encontrada-atual {
    box-shadow: inset 4px 0 0 0 #8B5CF6;
}

.tg-col {
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    box-sizing: border-box;
}

.tg-col-eap { width: 52px; }

.tg-col-nome {
    flex: 1 1 auto;
    min-width: 90px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.tg-col-inicio,
.tg-col-termino { width: 72px; }

.tg-col-duracao {
    width: 56px;
    text-align: right;
}

.tg-nome-texto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* garante encolhimento como item flexível mesmo se o elemento raiz mudar (ex.: MudTooltip) */
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

.tg-resumo .tg-nome-texto {
    font-weight: 600;
}

.tg-chevron {
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.tg-chevron-espaco {
    width: 20px;
    flex-shrink: 0;
}

/* ---------- Timeline (direita) ---------- */

.tg-timeline {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.tg-timeline-scroll {
    flex: 1;
    overflow: auto;
    position: relative;
}

.tg-timeline-inner {
    position: relative;
}

.tg-timeline-cabecalho {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 44px;
    background: var(--color-background, #F8FAFC);
    border-bottom: 1px solid var(--color-border, #E5E7EB);
}

.tg-mes {
    position: absolute;
    top: 0;
    height: 22px;
    line-height: 22px;
    font-size: clamp(10px, calc(11px * var(--tarefa-font-scale, 1)), 11px);
    font-weight: 600;
    color: var(--color-muted, #6B7280);
    border-left: 1px solid var(--color-border, #E5E7EB);
    padding-left: 4px;
    box-sizing: border-box;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

.tg-semana {
    position: absolute;
    top: 22px;
    height: 22px;
    line-height: 22px;
    font-size: clamp(9px, calc(10px * var(--tarefa-font-scale, 1)), 10px);
    color: var(--color-muted, #6B7280);
    border-left: 1px solid var(--color-border, #E5E7EB);
    padding-left: 3px;
    box-sizing: border-box;
}

.tg-timeline-corpo {
    display: block;
}

.tg-grade-mes {
    stroke: var(--color-border, #E5E7EB);
    stroke-width: 1;
}

/* ETAPA 34.6 — calendário visual: mesmo cinza neutro já usado pela grade de mês (--color-border), só que
   preenchido em vez de traçado, e mais discreto ainda (fill-opacity baixo) — "sombreamento MUITO
   discreto" (item 2 do pedido), nunca competindo com barra/seta/nome/seleção/Hoje, todos desenhados por
   cima dele na ordem do SVG. */
.tg-faixa-nao-util {
    fill: var(--color-border, #E5E7EB);
    fill-opacity: 0.6;
}

/* Cores (item 15 do pedido): tarefa em azul (mesmo --color-info já usado no estado ativo do toggle
   Tabela/Gantt — cor consistente entre os dois lugares), resumo em cinza-escuro, hoje em vermelho.
   Nunca a cor verde (--color-primary), reservada para outras partes já existentes da interface. */
.tg-barra-folha {
    fill: var(--color-info, #3B82F6);
    cursor: pointer;
}

.tg-barra-resumo {
    fill: var(--color-text, #374151);
    cursor: pointer;
}

/* ETAPA 34.5 — destaque "principal" (item 2) da tarefa selecionada: um contorno âmbar por cima da cor
   estrutural já existente (azul/cinza/losango), nunca substituindo-a — a tarefa continua identificável
   pelo tipo, só ganha uma borda extra. Mesma cor em toda a etapa (--color-warning) para o usuário
   associar rapidamente "âmbar = seleção/relação", em qualquer elemento (barra, marco, seta, fundo de
   linha). */
.tg-selecionada {
    stroke: var(--color-warning, #F59E0B);
    stroke-width: 2;
}

/* ETAPA 34.2 — marco (DuracaoPlanejadaDias == 0): losango num azul mais escuro que a barra de tarefa
   comum (--color-info), para ficar claramente diferente tanto da tarefa (azul) quanto do resumo (cinza
   escuro) — mesma família de cor da tarefa, propositalmente, já que um marco também é um tipo de
   tarefa (só que de duração zero), não uma categoria à parte como o resumo. */
.tg-marco {
    fill: #1E3A8A;
    cursor: pointer;
}

/* ETAPA 34.11 — caminho crítico (item 13 do pedido: "tarefa crítica: vermelho/laranja forte"). Laranja
   forte deliberado (não vermelho puro) para nunca ser confundido com a linha "Hoje" (--color-danger,
   vermelho) nem com o âmbar da seleção (--color-warning) — três destaques, três cores nunca reaproveitadas
   entre si. Declarado DEPOIS de .tg-barra-folha/.tg-barra-resumo/.tg-marco (mesma especificidade de
   classe única — a ordem no arquivo decide) para vencer a cor estrutural sem precisar de !important em
   folha/marco; resumo (abaixo) nunca troca de cor, só ganha um halo aditivo. */
.tg-critica {
    fill: #F97316;
}

/* Item 7/13 do pedido — resumo mantém a cor cinza estrutural de sempre (nunca .tg-critica nele); só
   ganha um halo (filter, não stroke) para não competir com o contorno âmbar de .tg-selecionada — os
   dois podem aparecer juntos (item 15 do pedido: seleção + crítico coexistem) sem um apagar o outro. */
.tg-resumo-com-critico {
    filter: drop-shadow(0 0 1.5px #F97316) drop-shadow(0 0 1.5px #F97316);
}

/* ETAPA 34.3/34.4 — nome da tarefa dentro da própria timeline, via <foreignObject> (HTML normal
   embutido no SVG). Mesma técnica de truncamento com reticências já usada em .tg-nome-texto (painel
   esquerdo) e mesma variável --tarefa-font-scale (item 8 do pedido — nenhum controle de fonte novo).

   Duas variantes de layout, mesma tipografia base (.tg-rotulo-texto):

   1) .tg-rotulo-interno — nome DENTRO da barra (ETAPA 34.4, quando CabeDentroDaBarra decide que há
      espaço): preenche 100% da caixa do foreignObject (que já é exatamente o retângulo da barra), texto
      claro sobre o preenchimento azul/opaco da barra — a própria barra já esconde qualquer seta atrás,
      não precisa de fundo próprio.

   2) .tg-rotulo-area (flex, 100% da caixa, só para centralizar verticalmente) envolvendo
      .tg-rotulo-chip (inline-block, encolhe para o tamanho do PRÓPRIO TEXTO via max-width) — usada
      tanto para o nome "logo após a barra" quanto para o nome do marco. O fundo opaco do chip (mesma
      cor de fundo da timeline) é o que resolve o item 2 desta etapa ("não sobrepor seta/marco/Hoje")
      sem nenhuma detecção de colisão: onde uma seta ou a linha Hoje passar atrás do texto, o fundo do
      chip cobre esse trecho, mantendo o nome sempre legível — o chip só ocupa a largura do texto
      truncado, nunca a área inteira reservada (LarguraRotulo), evitando uma faixa de fundo vazia atrás
      de nomes curtos. */
.tg-rotulo-texto {
    font-size: clamp(10px, calc(11px * var(--tarefa-font-scale, 1)), 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer; /* ETAPA 34.5, item 1 — nome também é clicável para selecionar a tarefa */
}

.tg-rotulo-interno {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-left: 4px;
    color: #fff;
}

.tg-rotulo-area {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.tg-rotulo-chip {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1px 3px;
    border-radius: 2px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #374151);
}

/* Resumo: mesmo rótulo, só em negrito — deixa claro que é um resumo, sem mudar a estrutura da barra
   (item 4/9 do pedido: "não alterar a aparência estrutural da barra de resumo além do necessário"). */
.tg-rotulo-resumo {
    font-weight: 600;
}

.tg-aresta {
    fill: none;
    stroke: var(--color-muted, #6B7280);
    stroke-width: 1.25;
}

.tg-seta-marca {
    fill: var(--color-muted, #6B7280);
}

/* ETAPA 34.5, item 3 — seta/linha de dependência ligada diretamente à tarefa selecionada; as demais
   permanecem em .tg-aresta (cinza discreto), sem nenhuma mudança nelas. */
.tg-aresta-destacada {
    stroke: var(--color-warning, #F59E0B);
    stroke-width: 2;
}

.tg-seta-marca-destacada {
    fill: var(--color-warning, #F59E0B);
}

/* ETAPA 34.5, itens 2/6 — fundo de linha inteira (da borda esquerda à direita da timeline) atrás de
   tudo: a tarefa selecionada ganha um tom mais forte (destaque "principal"), predecessoras/sucessoras
   diretas um tom mais fraco (destaque "secundário", item 3: "A = destaque secundário; C = destaque
   secundário"). Uma tarefa relacionada que estiver oculta (filtro de nível/resumo recolhido) nunca gera
   este retângulo — só existe para linhas que já fazem parte de Tarefas (a lista já filtrada recebida do
   componente pai), nunca uma linha "fantasma" criada só para a seleção. */
.tg-linha-fundo-selecionada {
    fill: var(--color-warning, #F59E0B);
    fill-opacity: 0.14;
}

.tg-linha-fundo-relacionada {
    fill: var(--color-warning, #F59E0B);
    fill-opacity: 0.07;
}

/* ETAPA 34.8 — mesmo violeta do destaque de pesquisa no painel esquerdo (.tg-linha-encontrada*), camada
   independente da de seleção acima (retângulo próprio, nunca a mesma classe/elemento) — as duas podem
   aparecer juntas (uma tarefa selecionada E encontrada pela busca) sem uma apagar a outra. */
.tg-linha-fundo-encontrada {
    fill: #8B5CF6;
    fill-opacity: 0.10;
}

.tg-linha-fundo-encontrada-atual {
    fill: #8B5CF6;
    fill-opacity: 0.22;
}

.tg-linha-hoje {
    stroke: var(--color-danger, #EF4444);
    stroke-width: 1.5;
}

.tg-hoje-etiqueta {
    fill: var(--color-danger, #EF4444);
    font-size: 10px;
    font-weight: 600;
}

.tg-sem-dados {
    padding: 16px;
    color: var(--color-muted, #6B7280);
    font-size: clamp(11px, calc(13px * var(--tarefa-font-scale, 1)), 13px);
}

.tg-legenda {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 10px;
    font-size: clamp(10px, calc(11px * var(--tarefa-font-scale, 1)), 11px);
    color: var(--color-muted, #6B7280);
    border-top: 1px solid var(--color-border, #E5E7EB);
    flex-shrink: 0;
}

.tg-legenda-marca {
    display: inline-block;
    width: 14px;
    height: 8px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

.tg-legenda-linha {
    display: inline-block;
    width: 14px;
    height: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

/* ETAPA 34.2 — losango pequeno (quadrado rotacionado 45°), mesma cor do marco no SVG (.tg-marco). */
.tg-legenda-marco {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #1E3A8A;
    transform: rotate(45deg);
    margin-right: 6px;
    vertical-align: middle;
}