/* ------------------------------------------------------------------ */
/* Obrify Design System — Dashboard (main#index)                       */
/*                                                                      */
/* Sétima tela migrada (as seis primeiras foram Atividades, Cronograma, */
/* listagem de Obras, RDO, Medição e Planejamento — ver                */
/* obrify_atividades_theme.css/obrify_gantt_theme.css/                  */
/* obrify_projects_theme.css/obrify_facts_theme.css/                    */
/* obrify_measurements_theme.css/obrify_planning_theme.css). Escopado   */
/* por `.obrify-theme-lab` (ver ApplicationHelper#obrify_theme_lab?, que */
/* agora cobre main#index) e consome só tokens --ob-*.                  */
/*                                                                      */
/* O dashboard já tinha seu próprio bridge de CSS vars (--primary,      */
/* --gray-50..800, --bg-card, --shadow-sm/md/lg, --radius...) definido  */
/* direto em :root dentro de app/views/main/index.html.erb — global,    */
/* não escopado, e apontando para os tokens legados de obrify_tokens.css */
/* (--brand-green etc). Esse bridge foi movido pra cá, escopado por      */
/* `.obrify-theme-lab` e remapeado para os tokens --ob-* (a mesma fonte  */
/* das demais telas). Os NOMES locais das variáveis foram mantidos de    */
/* propósito — os 5 partials de app/views/main/tabs e o próprio          */
/* index.html.erb referenciam `var(--primary)`, `var(--gray-500)` etc.   */
/* dezenas de vezes (no <style> da view e em `style=""` inline);         */
/* renomear exigiria reescrever tudo isso.                               */
/*                                                                      */
/* Como quase todo o CSS/inline style da view já era var()-based, o      */
/* bridge sozinho já re-tematiza a maior parte da tela. As regras abaixo */
/* dele cobrem só o que ficava com HEX fixo (badges de status, sombra do */
/* funil, texto de alerta) ou faltava por completo (borda dos cards,      */
/* linha de total/etapa da tabela) — nada aqui repete o que o bridge já   */
/* resolve sozinho.                                                      */
/*                                                                      */
/* Precisa carregar depois de obrify_planning_theme.css (mesma regra de */
/* cascata: depois do core/demo do Vuexy) — ver _head.html.erb.         */
/* ------------------------------------------------------------------ */

.obrify-theme-lab {
  --primary:       var(--ob-primary);
  --primary-dark:  var(--ob-primary-hover);
  --primary-light: var(--ob-primary-soft);
  --success: var(--ob-success);
  --warning: var(--ob-warning);
  --danger:  var(--ob-danger);

  /* Escala de cinza: sem 8 tons próprios — mapeada para a mesma escala de
     superfície/texto que o resto do Design System usa (--ob-card-inner …
     --ob-text-primary). Preserva os NOMES (--gray-50..800) só pra não
     tocar nos 5 partials que os referenciam. */
  --gray-50:  var(--ob-card-inner);
  --gray-100: var(--ob-surface-secondary);
  --gray-200: var(--ob-border);
  --gray-300: var(--ob-border);
  --gray-400: var(--ob-text-muted);
  --gray-500: var(--ob-text-secondary);
  --gray-600: var(--ob-text-secondary);
  --gray-700: var(--ob-text-primary);
  --gray-800: var(--ob-text-primary);

  --bg-card: var(--ob-card);
  --bg-body: var(--ob-background);
  --text-main:  var(--ob-text-primary);
  --text-muted: var(--ob-text-secondary);
  --border-color: var(--ob-border);

  /* Um único nível de sombra (o mesmo --ob-shadow que .card/.ob-kpi-card
     usam em todo o app) — os 3 níveis sm/md/lg do bloco original resolviam
     todos pro mesmo valor, então não havia hierarquia real para preservar. */
  --shadow-sm: var(--ob-shadow);
  --shadow-md: var(--ob-shadow);
  --shadow-lg: var(--ob-shadow);

  --radius:    var(--ob-radius);
  --radius-sm: var(--ob-radius-sm);
}

/* Título/valores de KPI em Barlow Condensed — mesma regra tipográfica das
   demais telas (ver obrify_atividades_theme.css: h1-h6/.card-title/
   .ob-kpi-value). Único ponto que o bridge de variáveis não cobre. */
.obrify-theme-lab .summary-value,
.obrify-theme-lab .cost-value,
.obrify-theme-lab .chart-title,
.obrify-theme-lab .section-title {
  font-family: var(--ob-font-display);
}

/* ---------- Tooltips de cálculo/origem dos dados ------------------------ */
/* Mesmo padrão já usado em facts/_summary.html.erb (ícone tabler-info-circle
   + data-bs-toggle="tooltip", inicializado globalmente em vuexy_turbo.js em
   todo turbo:load) — aqui só retematizado pros tokens do Design System em
   vez do text-body-secondary fixo do Bootstrap, pra não destoar do resto da
   tela. Usado em todo indicador cujo número não é um valor de banco direto:
   percentuais, projeções, médias ponderadas, contagens classificadas etc. */
.obrify-theme-lab .ob-info-icon {
  color: var(--ob-text-muted);
  font-size: 13px;
  cursor: help;
  vertical-align: middle;
}

.obrify-theme-lab .ob-info-icon:hover {
  color: var(--ob-text-secondary);
}

/* ---------- Cards: borda sutil ----------------------------------------- */
/* Nem todo card do Dashboard tinha borda no CSS original — só sombra. As
   demais telas do Design System usam borda + sombra suave juntas (ver
   .card em obrify_atividades_theme.css); aplicar aqui alinha a "casca" do
   Dashboard com Atividades/Planejamento/Cronograma/Obras. */
.obrify-theme-lab .chart-card,
.obrify-theme-lab .summary-card,
.obrify-theme-lab .activity-list,
.obrify-theme-lab .data-table {
  border: 1px solid var(--ob-border);
}

/* .activity-list/.data-table não tinham nenhuma sombra no original (só
   os cards de KPI/gráfico tinham, via --shadow-md). */
.obrify-theme-lab .activity-list,
.obrify-theme-lab .data-table {
  box-shadow: var(--ob-shadow);
}

/* ---------- Badges de gráfico (fundo era HEX fixo) --------------------- */
/* .chart-badge(.success) tinha fundo em HEX fixo (#fff4e5/#e8f5e9) no
   <style> original — não respondia ao dark mode. Mesma receita de
   tingimento suave (~14%) dos badges do resto do Design System
   (.ob-badge-*). */
.obrify-theme-lab .chart-badge {
  background: color-mix(in srgb, var(--ob-warning) 14%, transparent);
  color: var(--ob-warning);
}

.obrify-theme-lab .chart-badge.success {
  background: color-mix(in srgb, var(--ob-success) 14%, transparent);
  color: var(--ob-success);
}

.obrify-theme-lab .chart-badge.danger {
  background: color-mix(in srgb, var(--ob-danger) 14%, transparent);
  color: var(--ob-danger);
}

/* Ícone circular do card "Resumo" (Programação): raio hardcoded (12px),
   agora alinhado ao token de raio de card. */
.obrify-theme-lab .summary-icon {
  border-radius: var(--ob-radius);
}

/* Chip de recurso: raio hardcoded (6px), agora no mesmo raio de badge do
   resto do sistema. */
.obrify-theme-lab .resource-tag {
  border-radius: var(--ob-radius-sm);
}

/* Halo de foco do seletor de data: rgba fixo, trocado pelo tingimento de
   marca (mesmo racional do funil acima). */
.obrify-theme-lab .date-selector:hover {
  box-shadow: 0 0 0 3px var(--ob-primary-soft);
}

/* ---------- Alertas (Visão Geral) --------------------------------------- */
/* O <style> original definia .alert-item/.alert-icon/.alert-text/
   .alert-detail DUAS vezes (um bloco por tipo — danger/warning — e depois
   um segundo bloco genérico repetindo os mesmos seletores). Same-specificity:
   o segundo bloco vencia parte das propriedades por ordem de cascata,
   deixando .alert-detail sempre em HEX fixo (#6c757d), inclusive no dark.
   Consolidado aqui numa única definição, com fundo/borda tingidos por tipo
   (mesma receita de .ob-badge-*) e nenhum HEX solto. */
.obrify-theme-lab .alert-item {
  border-left: 4px solid transparent;
}

.obrify-theme-lab .alert-item.danger {
  border-left-color: var(--ob-danger);
  background: color-mix(in srgb, var(--ob-danger) 10%, var(--ob-card-inner));
}

.obrify-theme-lab .alert-item.warning {
  border-left-color: var(--ob-warning);
  background: color-mix(in srgb, var(--ob-warning) 10%, var(--ob-card-inner));
}

.obrify-theme-lab .alert-icon.danger {
  background: color-mix(in srgb, var(--ob-danger) 16%, transparent);
  color: var(--ob-danger);
}

.obrify-theme-lab .alert-icon.warning {
  background: color-mix(in srgb, var(--ob-warning) 16%, transparent);
  color: var(--ob-warning);
}

.obrify-theme-lab .alert-detail,
.obrify-theme-lab .no-alert {
  color: var(--ob-text-secondary);
}

.obrify-theme-lab .alerts-container::-webkit-scrollbar-thumb {
  background-color: var(--ob-border);
}

/* ---------- Tabela custom (.data-table) -------------------------------- */
/* Mesmos tokens de superfície/hover que .table usa nas demais telas (ver
   obrify_atividades_theme.css) — .data-table é uma classe própria desta
   tela (não a `.table` do Bootstrap/Vuexy), então precisa do próprio
   conjunto de regras. */
.obrify-theme-lab .data-table thead {
  background: var(--ob-table-bg);
}

.obrify-theme-lab .data-table th {
  color: var(--ob-text-label);
}

.obrify-theme-lab .data-table td {
  border-top: 1px solid var(--ob-divider);
  font-variant-numeric: tabular-nums;
}

.obrify-theme-lab .data-table tr:hover {
  background: var(--ob-table-row-hover);
}

/* Linha de etapa (Prazo/Produtividade) e linha de total (Custos): não
   existiam no <style> original — .stage-row/.table-total-row só recebiam
   a classe utilitária .bg-body-secondary do Bootstrap (que aqui já herda
   do bridge). Reforço equivalente ao .ob-table-total-row usado em
   Medição/Planejamento. */
.obrify-theme-lab .data-table .table-total-row td {
  background-color: var(--ob-card-inner);
  border-top: 1px solid var(--ob-border);
  font-weight: 600;
}

/* ---------- Execução: 3 indicadores em cards delimitados --------------- */
/* .ob-exec-split/.ob-exec-item (2 itens + fio divisor) são compartilhados
   com tasks/_summary — não mexe neles. O card Execução do dashboard usa seu
   próprio layout: 3 indicadores (Status do Prazo, Avanço Físico, Consumo do
   Contrato) cada um em seu próprio tile com fundo delimitado — mesma
   receita de .ob-metric-tile (usada em "Projeção de Resultado"/"Custos do
   Período") — em vez de colunas soltas separadas só por um fio de 1px, que
   lia como uma lista corrida, sem separação clara do bloco de linha do
   tempo logo abaixo. */
.obrify-theme-lab .ob-exec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ob-space-12);
}

.obrify-theme-lab .ob-exec-tile {
  background: var(--ob-card-inner);
  border-radius: var(--ob-radius-sm);
  padding: var(--ob-space-12);
}

/* .ob-progress-primary usa --ob-card-inner como fundo da trilha (pensado
   pra ficar sobre o fundo do card, um nível acima) — dentro do tile, que já
   É --ob-card-inner, a trilha some (some contraste, sobra só o preenchimento
   fino). Trilho dedicado (--ob-progress-track, mesmo token do .ob-row-progress
   em Atividades) restaura o contraste; altura reduzida (3px) porque dentro
   de um tile compacto o 4px padrão lia grosso demais. */
.obrify-theme-lab .ob-exec-tile .progress.ob-progress-primary {
  height: 3px !important;
  background-color: var(--ob-progress-track) !important;
}

.obrify-theme-lab .ob-exec-status-value {
  margin-top: 2px;
  margin-bottom: var(--ob-space-4);
}

/* ---------- Status das Atividades: atrasadas em destaque -------------- */
/* .ob-comp-bar/.ob-comp-legend (compartilhado com tasks/_summary) dá peso
   visual IGUAL aos 4 status — correto pra uma tela de gestão de tarefas,
   mas não pra um dashboard executivo, onde "atrasadas" é o único número
   que pede ação imediata. Selo compacto de uma linha só (não um bloco com
   valor de 30px) — mesma receita de .alert-item (border-left colorido +
   fundo tingido) já usada nesta tela, só sem o peso de um KPI próprio. Só
   aparece quando há atraso — combina com "Nenhum alerta crítico" do card
   ao lado. */
.obrify-theme-lab .ob-callout {
  display: flex;
  align-items: center;
  gap: var(--ob-space-8);
  border-left: 3px solid var(--ob-danger);
  background: color-mix(in srgb, var(--ob-danger) 8%, var(--ob-card-inner));
  border-radius: var(--ob-radius-sm);
  padding: var(--ob-space-8) var(--ob-space-12);
  font-size: 13px;
  color: var(--ob-text-secondary);
}

.obrify-theme-lab .ob-callout-text strong {
  color: var(--ob-danger);
  font-weight: 700;
}

/* Rosca (Chart.js) como protagonista do card — grande e centralizada, com
   o selo de atrasadas logo abaixo dela (não mais competindo pelo topo do
   card) e a legenda com bolinhas/contagem (.ob-comp-legend, já existente)
   numa linha só ao pé do card, resumida — o desenho já carrega a leitura
   principal, a legenda só confirma os números. */
.obrify-theme-lab .ob-donut-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.obrify-theme-lab .ob-donut-chart-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}

.obrify-theme-lab .ob-donut-chart-wrap--lg {
  width: 172px;
  height: 172px;
}

.obrify-theme-lab .ob-donut-total-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1.1;
}

.obrify-theme-lab .ob-donut-total-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ob-text-primary);
}

.obrify-theme-lab .ob-donut-total-label {
  font-size: 11px;
  color: var(--ob-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.obrify-theme-lab .ob-callout-pill {
  display: inline-flex;
  width: auto;
}

.obrify-theme-lab .ob-comp-legend-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.obrify-theme-lab .ob-comp-legend-row .ob-comp-legend-item {
  flex: 0 0 auto;
}

/* ---------- Execução: avanço físico sobre a linha do tempo ------------- */
/* O instrumento .ob-timeline (definido em obrify_atividades_theme.css) só
   mostrava o marcador de "hoje" — a comparação com o Avanço Físico ficava
   por conta do leitor, lendo o número do topo do card e voltando pra cá de
   memória. Segundo marcador + preenchimento no MESMO trilho: o hiato entre
   "quanto do prazo passou" e "quanto foi executado" fica visível sem
   nenhuma conta mental. Cinza continua reservado pro marcador de tempo
   (igual ao resto do trilho); a cor nova aqui é a mesma do Avanço Físico
   no topo do card (--ob-primary), não um estado de performance. */
.obrify-theme-lab .ob-timeline-track {
  margin-bottom: 24px;
}

.obrify-theme-lab .ob-timeline-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--ob-radius-pill);
  background-color: var(--ob-primary);
}

.obrify-theme-lab .ob-timeline-marker--progress {
  background-color: var(--ob-primary);
}

.obrify-theme-lab .ob-timeline-marker--progress::after {
  top: auto;
  bottom: -5px;
  background-color: var(--ob-primary);
}

.obrify-theme-lab .ob-timeline-marker-badge--progress {
  top: auto;
  bottom: -22px;
  background-color: color-mix(in srgb, var(--ob-primary) 16%, var(--ob-card-inner));
  color: var(--ob-primary);
}

/* ---------- Aderência ao Planejamento (ob-metric-tile) ----------------- */
/* Substitui os 3 boxes com borda colorida de 4px na lateral esquerda
   (padrão clássico de "template de dashboard") por um chip neutro com
   selo circular pequeno — mesma receita visual dos badges/dots do resto
   do Design System (ver .ob-comp-dot em obrify_atividades_theme.css). */
.obrify-theme-lab .ob-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ob-space-12);
}

/* Variante empilhada (vertical) do mesmo tile — usada onde o card é estreito
   demais para 3 colunas lado a lado (ex.: "Projeção de Resultado", dentro de
   uma linha de 3 cards). */
.obrify-theme-lab .ob-metric-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ob-space-8);
}

/* Empilhados (3 tiles numa coluna só), o padding do grid vertical vira
   altura demais — mais compacto que a variante em grade (.ob-metric-grid),
   pra "Projeção de Resultado" não crescer mais que os cards vizinhos
   (Funil de Medições/Alertas) na mesma linha. */
.obrify-theme-lab .ob-metric-stack .ob-metric-tile {
  padding: var(--ob-space-8) var(--ob-space-12);
}

.obrify-theme-lab .ob-metric-stack .ob-metric-label {
  margin-bottom: 2px;
}

/* Valor de cada estágio do Funil de Medições: mais discreto que .ob-kpi-value
   (30px, reservado ao número-âncora do card), mas ainda com peso — Barlow
   Condensed, tabular (são 4 valores que precisam comparar em coluna). */
.obrify-theme-lab .ob-funnel-value {
  font-family: var(--ob-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ob-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Selo "% do produzido" ao lado de cada valor do funil — Produzido é a base
   (100%) do funil; sem esse número, os 3 estágios seguintes só se comparam
   por largura de barra, o que exige leitura atenta. Com o selo dá pra
   responder "o que foi produzido já foi medido?" num olhar, sem introduzir
   cor nas barras (decisão já tomada acima: barras de avanço são neutras). */
.obrify-theme-lab .ob-funnel-pct {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ob-text-secondary);
  background: var(--ob-card-inner);
  border-radius: var(--ob-radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
}

.obrify-theme-lab .ob-funnel-pct-base {
  color: var(--ob-text-muted);
  background: transparent;
  padding: 1px 0;
}

.obrify-theme-lab .ob-metric-tile {
  background: var(--ob-card-inner);
  border-radius: var(--ob-radius-sm);
  padding: var(--ob-space-12);
}

/* Diferenciação de linha em "Projeção de Resultado": o dot de 8px na label
   já carrega a cor, mas é pequeno demais pra "bater o olho" — uma tarja
   lateral por linha deixa produção/custo/resultado legíveis sem precisar
   ler o texto. Mesma receita de .alert-item (border-left colorido) já usada
   acima nesta tela. */
.obrify-theme-lab .ob-metric-stack .ob-metric-tile {
  border-left: 3px solid transparent;
}

.obrify-theme-lab .ob-metric-tile--produced {
  border-left-color: var(--ob-primary);
}

.obrify-theme-lab .ob-metric-tile--cost {
  border-left-color: var(--ob-danger);
}

.obrify-theme-lab .ob-metric-tile--margin {
  border-left-color: var(--ob-success);
  background: color-mix(in srgb, var(--ob-success) 6%, var(--ob-card-inner));
}

.obrify-theme-lab .ob-metric-label {
  display: flex;
  align-items: center;
  gap: var(--ob-space-8);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ob-text-label);
  margin-bottom: var(--ob-space-8);
}

.obrify-theme-lab .ob-metric-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.obrify-theme-lab .ob-metric-value {
  font-family: var(--ob-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ob-text-primary);
  margin-bottom: 4px;
}

.obrify-theme-lab .ob-metric-value-accent {
  color: var(--ob-success);
}

.obrify-theme-lab .ob-metric-formula {
  font-size: 12px;
  color: var(--ob-text-secondary);
}

/* ---------- Programação (activity-grid/activity-row/collapse) --------- */
.obrify-theme-lab .activity-grid.header {
  background: var(--ob-table-bg);
  color: var(--ob-text-label);
}

.obrify-theme-lab .activity-row:hover {
  background: var(--ob-table-row-hover);
}

.obrify-theme-lab .activity-item:hover {
  background: var(--ob-table-row-hover);
}

.obrify-theme-lab .activity-collapse {
  background: var(--ob-card-inner);
}