/* ------------------------------------------------------------------ */
/* Obrify Design System — Cronograma (Gantt)                           */
/*                                                                      */
/* Segunda tela migrada para o Design System (a primeira foi           */
/* Atividades — ver obrify_atividades_theme.css). Escopado por          */
/* `.obrify-theme-lab` (ver ApplicationHelper#obrify_theme_lab?, que     */
/* agora cobre tasks#index e tasks#gantt) e consome só tokens --ob-*.    */
/* Nenhuma cor hardcoded: tudo vem de obrify_tokens.css, o que dá tema   */
/* claro/escuro de graça.                                               */
/*                                                                      */
/* Arquitetura de performance: em vez de uma <div> por dia por linha    */
/* (o que gerava milhares de nós de DOM), a grade de fundo é pintada     */
/* via CSS (repeating-linear-gradient) e os dias não úteis/feriados +    */
/* a linha de "hoje" são desenhados como poucas faixas absolutas ÚNICAS  */
/* (uma por dia não útil, uma para hoje) que atravessam a grade inteira, */
/* não uma célula por linha. Ver app/controllers/tasks_controller.rb    */
/* (#gantt) para o cálculo de @gantt_non_working_offsets.                */
/*                                                                      */
/* Precisa carregar depois de obrify_atividades_theme.css (mesma regra  */
/* de cascata: depois do core/demo do Vuexy) — ver _head.html.erb.      */
/* ------------------------------------------------------------------ */

.obrify-theme-lab .ob-gantt {
  /* Escala padrão (Semana). Trocada via classe pelo Stimulus controller
     (gantt_controller.js#setScale) — "Geral" sobrescreve com um valor
     inline calculado em runtime (auto-fit à largura visível). */
  --gantt-day-width: 30px;
  --gantt-sidebar-width: 280px;
  --gantt-header-height: 60px;
  --gantt-row-height: 40px;
  --gantt-row-height-stage: 44px;
}

.obrify-theme-lab .ob-gantt.scale-month {
  --gantt-day-width: 10px;
}

/* "Geral" recebe --gantt-day-width inline (calculado em runtime pelo
   controller a partir da largura visível ÷ total de dias); a classe fica
   só como marcador para as regras de "esconder rótulo em zoom baixo". */
.obrify-theme-lab .ob-gantt.is-sidebar-collapsed {
  --gantt-sidebar-width: 56px;
}

/* ---------- Cabeçalho ---------------------------------------------------- */

/* "Voltar para Lista": mesma receita visual do botão "Cronograma" na tela
   de Atividades (.ob-btn-cronograma, ver obrify_atividades_theme.css) —
   outline verde com fundo suave, borda mais espessa. Antes usava
   btn-outline-secondary (cinza neutro) e ficava apagado demais para uma
   navegação de saída da tela; duplicada aqui (não movida para o arquivo de
   Atividades) para cada tela manter seu CSS de botões próprios
   autocontido. */
.obrify-theme-lab .btn-outline-primary.ob-btn-back {
  color: var(--ob-primary);
  border-color: var(--ob-primary);
  border-width: 1.5px;
  font-weight: 600;
  background-color: var(--ob-primary-soft);
}

.obrify-theme-lab .btn-outline-primary.ob-btn-back:hover,
.obrify-theme-lab .btn-outline-primary.ob-btn-back:focus {
  background-color: var(--ob-primary);
  border-color: var(--ob-primary);
  color: #ffffff;
}

/* ---------- Toolbar ---------------------------------------------------- */
/* Fixa acima da timeline, mesmo padrão visual do .ob-toolbar da tela de
   Atividades (reaproveitado, não um componente novo). Concentra: ir para
   hoje, escala, busca, filtros rápidos e a legenda (que deixou de ficar
   solta abaixo do gráfico, fora da área visível). */

.obrify-theme-lab .ob-gantt-toolbar {
  padding: var(--ob-space-12) var(--ob-space-16);
  border: 1px solid var(--ob-border);
  border-bottom: none;
  border-radius: var(--ob-radius) var(--ob-radius) 0 0;
  background-color: var(--ob-card-inner);
}

.obrify-theme-lab .ob-gantt-btn-today {
  flex: 0 0 auto;
  white-space: nowrap;
}

.obrify-theme-lab .ob-gantt-scale-group {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-sm);
  overflow: hidden;
  background-color: var(--ob-surface);
}

.obrify-theme-lab .ob-gantt-scale-btn {
  border: none;
  background: transparent;
  color: var(--ob-text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 0.47rem 0.9rem;
  cursor: pointer;
  transition: background-color var(--ob-transition-fast), color var(--ob-transition-fast);
}

.obrify-theme-lab .ob-gantt-scale-btn + .ob-gantt-scale-btn {
  border-left: 1px solid var(--ob-border);
}

.obrify-theme-lab .ob-gantt-scale-btn:hover {
  background-color: var(--ob-card-hover);
  color: var(--ob-text-primary);
}

.obrify-theme-lab .ob-gantt-scale-btn.is-active {
  background-color: var(--ob-primary);
  color: var(--ob-text-on-primary);
}

/* O anel de foco padrão (outline-offset: 2px, ver regra global de
   acessibilidade) fica por fora do botão — aqui isso seria cortado pelo
   overflow:hidden do grupo (necessário para os cantos arredondados só nas
   pontas). Sobrescreve para um anel interno só neste componente. */
.obrify-theme-lab .ob-gantt-scale-btn:focus-visible {
  outline-offset: -2px;
}

.obrify-theme-lab .ob-gantt-search {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}

.obrify-theme-lab .ob-gantt-search .btn {
  color: var(--ob-text-secondary);
  background-color: transparent;
  border-color: var(--ob-border);
}

.obrify-theme-lab .ob-gantt-filter {
  flex: 0 0 auto;
}

.obrify-theme-lab .ob-gantt-filter .btn {
  white-space: nowrap;
}

.obrify-theme-lab .ob-gantt-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: var(--ob-space-4);
  border-radius: var(--ob-radius-pill);
  background-color: var(--ob-surface-secondary);
  color: var(--ob-text-secondary);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Faixa única de legendas dentro da toolbar: situação por status (à
   esquerda, acionável) + legenda de cores do gráfico (à direita, leitura),
   lado a lado, separadas por um divisor sutil (.ob-exec-divider,
   reaproveitado do card Execução de Atividades). Ocupa uma única linha —
   não disputa espaço com busca/filtro/chips (que moraram para a linha de
   cima), então fica bem mais baixa do que quando as três coisas
   dividiam a mesma linha. */
.obrify-theme-lab .ob-gantt-legends-row {
  display: flex;
  align-items: stretch;
  gap: var(--ob-space-16);
}

@media (max-width: 767.98px) {
  .obrify-theme-lab .ob-gantt-legends-row {
    flex-direction: column;
    gap: var(--ob-space-12);
  }

  .obrify-theme-lab .ob-gantt-legends-divider {
    display: none;
  }

  .obrify-theme-lab .ob-gantt-status-inline,
  .obrify-theme-lab .ob-gantt-swatch-inline {
    flex: 1 1 100%;
    width: 100%;
  }
}

.obrify-theme-lab .ob-gantt-legends-divider {
  margin: 0 var(--ob-space-4);
}

.obrify-theme-lab .ob-gantt-status-inline {
  flex: 1 1 58%;
  min-width: 0;
}

.obrify-theme-lab .ob-gantt-swatch-inline {
  flex: 1 1 34%;
  min-width: 0;
}

.obrify-theme-lab .ob-gantt-panel-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ob-text-label);
  margin-bottom: var(--ob-space-4);
}

/* Indicadores de status clicáveis: MESMO componente da tela de Atividades
   (.ob-comp-bar/.ob-comp-legend/.ob-comp-legend-item/.ob-comp-dot, vindos
   de obrify_atividades_theme.css) — só o wrapper e o layout do legend (em
   linha, não grade 2 colunas, por ser uma toolbar larga) são específicos
   do Gantt. Os itens em si (cor, estado ativo/vazio) não são redefinidos
   aqui de propósito, para não divergirem visualmente da origem. */

/* Mais espessa que o padrão (6px): ela é o resumo visual principal da
   situação das atividades, não um detalhe discreto dentro da legenda. */
.obrify-theme-lab .ob-gantt-status-bar {
  height: 10px !important;
  margin-bottom: var(--ob-space-4);
}

.obrify-theme-lab .ob-gantt-status-legend.ob-comp-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ob-space-4) var(--ob-space-8);
}

.obrify-theme-lab .ob-gantt-status-legend .ob-comp-legend-item {
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  width: 100%;
}

@media (max-width: 767.98px) {
  .obrify-theme-lab .ob-gantt-status-legend.ob-comp-legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Legenda: chips compactos, sempre visíveis (nunca mais abaixo do
   gráfico). Mesma receita visual do .ob-comp-legend-item da tela de
   Atividades, só que sem link/estado ativo — é só leitura. */
.obrify-theme-lab .ob-gantt-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ob-space-4) var(--ob-space-12);
}

.obrify-theme-lab .ob-gantt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ob-space-4);
  font-size: 12px;
  color: var(--ob-text-secondary);
  white-space: nowrap;
}

.obrify-theme-lab .ob-gantt-legend-item i {
  font-size: 13px;
  color: var(--ob-text-muted);
}

.obrify-theme-lab .ob-gantt-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.obrify-theme-lab .ob-gantt-swatch-stage { background-color: var(--ob-text-secondary); }
.obrify-theme-lab .ob-gantt-swatch-task { background-color: var(--ob-progress-track); }
.obrify-theme-lab .ob-gantt-swatch-progress { background-color: var(--ob-primary); }
.obrify-theme-lab .ob-gantt-swatch-delayed { background-color: var(--ob-danger); }
.obrify-theme-lab .ob-gantt-swatch-today {
  background-color: color-mix(in srgb, var(--ob-primary) 20%, transparent);
  border-left: 2px solid var(--ob-primary);
  border-radius: 0;
}

/* ---------- Área de rolagem própria ------------------------------------ */
/* Mesmo racional do .ob-table-scroll da tela de Atividades: altura
   própria, com scroll vertical E horizontal sempre alcançáveis — nunca
   mais uma scrollbar perdida no fim de uma página mais alta que a tela. */

.obrify-theme-lab .ob-gantt-scroll {
  overflow: auto;
  max-height: min(66vh, 760px);
  border: 1px solid var(--ob-border);
  border-radius: 0 0 var(--ob-radius) var(--ob-radius);
  background-color: var(--ob-table-bg);
  transition: max-height var(--ob-transition);
}

/* Com #ganttHeader/#ganttDashboard recolhidos (.ob-dashboard-toggle — ver
   gantt.html.erb), a grade ocupa o espaço que eles deixaram livre. Mesmo
   racional/nomes de variável do .ob-table-scroll-expanded em Atividades. */
.obrify-theme-lab .ob-gantt-scroll.ob-gantt-scroll-expanded {
  max-height: min(88vh, 1000px);
}

.obrify-theme-lab .ob-gantt-grid {
  position: relative;
  width: fit-content;
  min-width: 100%;
  font-size: 12px;
}

/* ---------- Faixas de fundo (uma vez para a grade inteira) ------------- */
/* Dias não úteis (fins de semana conforme configuração da obra +
   feriados) e a linha de "hoje": desenhadas uma única vez, atravessando
   todas as linhas, em vez de uma célula por dia por atividade. */

.obrify-theme-lab .ob-gantt-nonworking-col,
.obrify-theme-lab .ob-gantt-today-col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gantt-sidebar-width) + (var(--col-start) * var(--gantt-day-width)));
  width: var(--gantt-day-width);
  z-index: 1;
  pointer-events: none;
}

.obrify-theme-lab .ob-gantt-nonworking-col {
  background-color: var(--ob-background-secondary);
}

.obrify-theme-lab .ob-gantt-today-col {
  background-color: var(--ob-primary-soft);
}

/* Linha vertical bem evidente (não um traço fino) + label sempre visível:
   o label acompanha o scroll vertical (sticky logo abaixo do cabeçalho),
   então nunca se perde durante a navegação — só some se a coluna de hoje
   sair da área visível horizontalmente. */
.obrify-theme-lab .ob-gantt-today-col::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background-color: var(--ob-primary);
}

.obrify-theme-lab .ob-gantt-today-label {
  position: sticky;
  top: calc(var(--gantt-header-height) + 4px);
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: var(--ob-radius-pill);
  background-color: var(--ob-primary);
  color: var(--ob-text-on-primary);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Cabeçalho temporal (sticky nos dois eixos) ------------------ */

.obrify-theme-lab .ob-gantt-row {
  position: relative;
  z-index: 2;
  display: flex;
  border-bottom: 1px solid var(--ob-divider);
  height: var(--gantt-row-height);
}

.obrify-theme-lab .ob-gantt-row-stage {
  height: var(--gantt-row-height-stage);
}

.obrify-theme-lab .ob-gantt-row.is-collapsed-hidden,
.obrify-theme-lab .ob-gantt-row.is-filtered-hidden,
.obrify-theme-lab .ob-gantt-row.is-search-hidden,
.ob-gantt-row.is-collapsed-hidden,
.ob-gantt-row.is-filtered-hidden,
.ob-gantt-row.is-search-hidden {
  display: none !important;
}

.obrify-theme-lab .ob-gantt-row:hover .ob-gantt-sidebar-cell {
  background-color: var(--ob-table-row-hover);
}

.obrify-theme-lab .ob-gantt-header-row {
  position: sticky;
  top: 0;
  z-index: 8;
  height: var(--gantt-header-height);
  background-color: var(--ob-card-inner);
  border-bottom: 1px solid var(--ob-border);
}

.obrify-theme-lab .ob-gantt-row-highlight {
  animation: ob-gantt-highlight 1.8s ease;
}

@keyframes ob-gantt-highlight {
  0%, 100% { background-color: transparent; }
  15%, 60% { background-color: var(--ob-primary-soft); }
}

/* ---------- Painel esquerdo (sidebar) ----------------------------------- */

.obrify-theme-lab .ob-gantt-sidebar-cell {
  flex: 0 0 var(--gantt-sidebar-width);
  width: var(--gantt-sidebar-width);
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--ob-space-8);
  padding: 0 var(--ob-space-12);
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--ob-card);
  border-right: 1px solid var(--ob-border);
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: flex-basis var(--ob-transition), width var(--ob-transition);
}

.obrify-theme-lab .ob-gantt-header-row .ob-gantt-sidebar-cell {
  top: 0;
  z-index: 12;
  font-weight: 600;
  color: var(--ob-text-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--ob-card-inner);
}

.obrify-theme-lab .ob-gantt-row-stage .ob-gantt-sidebar-cell {
  background-color: var(--ob-row-stage-bg);
  font-weight: 700;
}

.obrify-theme-lab .ob-gantt-row-stage:hover .ob-gantt-sidebar-cell {
  background-color: color-mix(in srgb, var(--ob-row-stage-bg) 80%, var(--ob-table-row-hover));
}

.obrify-theme-lab .ob-gantt-row-no-planning .ob-gantt-sidebar-cell {
  opacity: 0.65;
}

.obrify-theme-lab .ob-gantt-corner {
  display: flex;
  align-items: center;
  gap: var(--ob-space-8);
}

/* Único botão de recolher o painel esquerdo (o da toolbar era duplicado —
   removido; ver gantt.html.erb). Borda + fundo sutis em repouso (antes só
   apareciam no hover, então o botão praticamente não se via) para deixar
   claro que é um controle clicável, não um detalhe do cabeçalho. */
.obrify-theme-lab .ob-gantt-sidebar-collapse-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-sm);
  background: var(--ob-surface);
  color: var(--ob-text-secondary);
  cursor: pointer;
}

.obrify-theme-lab .ob-gantt-sidebar-collapse-btn:hover {
  background-color: var(--ob-card-hover);
  color: var(--ob-text-primary);
}

.obrify-theme-lab .ob-gantt.is-sidebar-collapsed .ob-gantt-corner span {
  display: none;
}

/* Alça de redimensionamento: fica só no cabeçalho (a régua completa não
   precisa se estender por todas as linhas para o arraste funcionar — o
   mousedown é capturado ali e o mousemove é seguido no document inteiro,
   ver gantt_controller.js#startResize). */
.obrify-theme-lab .ob-gantt-resize-handle {
  flex-shrink: 0;
  margin-left: auto;
  width: 10px;
  align-self: stretch;
  cursor: col-resize;
  position: relative;
}

.obrify-theme-lab .ob-gantt-resize-handle::before {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--ob-border);
  border-radius: 1px;
}

.obrify-theme-lab .ob-gantt-resize-handle:hover::before,
.obrify-theme-lab .ob-gantt-resize-handle:focus-visible::before {
  background-color: var(--ob-primary);
}

.obrify-theme-lab .ob-gantt.is-sidebar-collapsed .ob-gantt-resize-handle {
  display: none;
}

.obrify-theme-lab .ob-gantt-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: var(--ob-radius-sm);
  background: transparent;
  color: var(--ob-text-secondary);
  cursor: pointer;
}

.obrify-theme-lab .ob-gantt-toggle:hover {
  background-color: var(--ob-card-hover);
}

.obrify-theme-lab .ob-gantt-toggle i {
  font-size: 13px;
  transition: transform var(--ob-transition-fast);
}

.obrify-theme-lab .ob-gantt-toggle.is-expanded i {
  transform: rotate(90deg);
}

.obrify-theme-lab .ob-gantt-toggle-spacer {
  flex-shrink: 0;
  width: 18px;
}

.obrify-theme-lab .ob-gantt-code {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--ob-text-primary);
  font-variant-numeric: tabular-nums;
}

.obrify-theme-lab .ob-gantt-row-stage .ob-gantt-code {
  color: var(--ob-text-primary);
}

.obrify-theme-lab .ob-gantt-row-delayed .ob-gantt-code {
  color: var(--ob-danger);
}

.obrify-theme-lab .ob-gantt-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ob-text-secondary);
}

.obrify-theme-lab .ob-gantt-row-stage .ob-gantt-name {
  color: var(--ob-text-primary);
}

.obrify-theme-lab .ob-gantt-row-no-planning .ob-gantt-name {
  font-style: italic;
}

.obrify-theme-lab .ob-gantt.is-sidebar-collapsed .ob-gantt-name {
  display: none;
}

/* Recolhido: só o código deve aparecer, então o padding de indentação da
   hierarquia (que existe para dar profundidade visual à árvore WBS
   completa) precisa ceder lugar — senão o código de atividades-filha
   (indent 1) ficava cortado pelo overflow:hidden do próprio sidebar-cell
   dentro dos 56px do modo recolhido. */
.obrify-theme-lab .ob-gantt.is-sidebar-collapsed .ob-gantt-sidebar-cell {
  padding-left: var(--ob-space-8) !important;
}

.obrify-theme-lab .ob-gantt.is-sidebar-collapsed .ob-gantt-toggle-spacer {
  display: none;
}

.obrify-theme-lab .ob-gantt-delayed-icon {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ob-danger);
}

.obrify-theme-lab .ob-gantt.is-sidebar-collapsed .ob-gantt-delayed-icon {
  display: none;
}

/* ---------- Timeline: cabeçalho (meses/dias) ---------------------------- */

.obrify-theme-lab .ob-gantt-timeline-cell {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--gantt-total-days) * var(--gantt-day-width));
  /* Só afeta o conteúdo em fluxo normal (o aviso "Sem planejamento"); as
     barras são position:absolute e centralizam sozinhas via
     top:50%/translateY, ignorando este align-items. */
  display: flex;
  align-items: center;
  /* Linhas verticais de separação entre dias, pintadas via CSS — sem
     nenhum nó de DOM por dia por linha (ver nota no topo do arquivo). */
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--gantt-day-width) - 1px),
    var(--ob-divider) calc(var(--gantt-day-width) - 1px),
    var(--ob-divider) var(--gantt-day-width)
  );
}

.obrify-theme-lab .ob-gantt-timeline-header {
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.obrify-theme-lab .ob-gantt-months,
.obrify-theme-lab .ob-gantt-days {
  display: flex;
}

.obrify-theme-lab .ob-gantt-month {
  position: relative;
  width: calc(var(--col-days) * var(--gantt-day-width));
  height: calc(var(--gantt-header-height) / 2);
  border-right: 1px solid var(--ob-border);
  overflow: hidden;
}

/* Nome do mês permanece legível durante o scroll horizontal: gruda na
   borda esquerda visível (logo após a sidebar) enquanto a coluna do mês
   ainda estiver em vista, e sai de cena só quando o mês inteiro passa. */
.obrify-theme-lab .ob-gantt-month-label {
  position: sticky;
  left: calc(var(--gantt-sidebar-width) + var(--ob-space-8));
  display: inline-block;
  padding: var(--ob-space-4) var(--ob-space-8);
  font-weight: 600;
  font-size: 12px;
  color: var(--ob-text-secondary);
  text-transform: capitalize;
  white-space: nowrap;
}

.obrify-theme-lab .ob-gantt-day {
  width: var(--gantt-day-width);
  height: calc(var(--gantt-header-height) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ob-text-muted);
  border-right: 1px solid var(--ob-divider);
  font-variant-numeric: tabular-nums;
}

.obrify-theme-lab .ob-gantt-day-today {
  color: var(--ob-primary);
  font-weight: 700;
}

/* Em escalas mais afastadas (Mês/Geral), números soltos de dia não cabem
   e viram ruído visual — some o texto, mantém só a grade e as faixas de
   dia não útil/hoje. */
.obrify-theme-lab .ob-gantt.scale-month .ob-gantt-day,
.obrify-theme-lab .ob-gantt.scale-general .ob-gantt-day {
  font-size: 0;
}

/* ---------- Barras --------------------------------------------------- */

/* Sticky (não absolute): em obras longas, uma atividade sem planejamento
   perto do início da grade teria esse aviso rolado para fora da tela assim
   que o usuário navegasse até "hoje" — mesmo truque do rótulo do mês
   (.ob-gantt-month-label), ancorado logo após a sidebar, sempre visível
   na região atualmente em tela. */
.obrify-theme-lab .ob-gantt-no-planning {
  position: sticky;
  left: calc(var(--gantt-sidebar-width) + var(--ob-space-12));
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: italic;
  color: var(--ob-text-muted);
  white-space: nowrap;
  pointer-events: none;
}

.obrify-theme-lab .ob-gantt-bar {
  /* Reset de <button> nativo: usado em vez de <div> só para ganhar foco
     por teclado e semântica de "elemento acionável" de graça (ver seção
     de acessibilidade) — sem nenhuma ação de clique implementada ainda. */
  appearance: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--bar-start) * var(--gantt-day-width));
  width: calc(var(--bar-days) * var(--gantt-day-width) - 4px);
  height: 22px;
  border-radius: var(--ob-radius-sm);
  background-color: var(--ob-progress-track);
  overflow: visible;
  z-index: 3;
  transition: box-shadow var(--ob-transition-fast), transform var(--ob-transition-fast);
}

.obrify-theme-lab .ob-gantt-bar:hover,
.obrify-theme-lab .ob-gantt-bar:focus-visible {
  box-shadow: var(--ob-shadow-strong);
  transform: translateY(-50%) translateY(-1px);
}

.obrify-theme-lab .ob-gantt-bar:focus-visible {
  outline: 2px solid var(--ob-primary);
  outline-offset: 2px;
}

.obrify-theme-lab .ob-gantt-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--ob-radius-sm) 0 0 var(--ob-radius-sm);
  background-color: var(--ob-primary);
  overflow: hidden;
}

/* Etapa: diferenciada por FORMA e peso, não só por cor (acessibilidade —
   daltonismo não pode ser a única forma de distinguir etapa/atividade).
   Mais alta, borda sólida, tom neutro escuro em vez do verde de
   progresso. */
.obrify-theme-lab .ob-gantt-bar-stage {
  height: 26px;
  border: 1.5px solid var(--ob-text-primary);
  background-color: var(--ob-card);
}

.obrify-theme-lab .ob-gantt-bar-stage .ob-gantt-bar-fill {
  background-color: var(--ob-text-secondary);
}

.obrify-theme-lab .ob-gantt-bar-delayed .ob-gantt-bar-fill {
  background-color: var(--ob-danger);
}

.obrify-theme-lab .ob-gantt-bar-delayed {
  background-color: color-mix(in srgb, var(--ob-danger) 14%, var(--ob-progress-track));
}

.obrify-theme-lab .ob-gantt-bar-delayed.ob-gantt-bar-stage {
  border-color: var(--ob-danger);
}

.obrify-theme-lab .ob-gantt-bar-label {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 var(--ob-space-8);
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ob-text-on-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Em Mês/Geral a barra vira uma lasca fina demais para texto legível —
   mesmo racional dos números de dia no cabeçalho. */
.obrify-theme-lab .ob-gantt.scale-month .ob-gantt-bar-label,
.obrify-theme-lab .ob-gantt.scale-general .ob-gantt-bar-label {
  display: none;
}

/* Progresso acima de 100%: nunca escondido. A barra de preenchimento é
   sempre desenhada no máximo até a largura total (clamp no ERB), e um
   selo de alerta aparece na ponta — mesmo racional do
   .ob-row-progress-value-over já usado na tabela de Atividades. */
.obrify-theme-lab .ob-gantt-bar-overflow {
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--ob-warning);
  color: var(--ob-text-on-primary);
  font-size: 9px;
  z-index: 2;
}

/* ---------- Estado vazio (reaproveita .ob-empty-state) ------------------ */
/* Sem regras próprias: .ob-empty-state já vem de obrify_atividades_theme.css
   e é reaproveitado tal como está. */

/* ---------- Responsivo --------------------------------------------------- */

@media (max-width: 767.98px) {
  .obrify-theme-lab .ob-gantt-search {
    flex-basis: 100%;
    max-width: none;
    order: 10;
  }
}