/* =============================================================================
   EngiAnalytics: camada do produto, por cima do design system

   O `engi-ds.css` ao lado deste ficheiro é o núcleo do EngiDesignSystem, adotado
   BYTE A BYTE e travado pelo invariante `DesignSystemSincronizadoTests`. Não se
   edita: uma correção ao núcleo faz-se na origem e sincroniza-se.

   Aqui vive o que é genuinamente deste produto, e só isso:
     - componentes que o núcleo não tem (explorador de esquema, painel de SQL,
       grelha de gráficos, progresso da geração, guia de exploração)
     - regras que MODIFICAM classes do núcleo (variantes e correções locais)

   REGRA, e nasceu de um erro real registado no ficheiro antigo: ao atualizar o
   design system, comparar REGRAS e não nomes de classes. Um seletor composto
   sobre uma classe partilhada (`.ds-composer.bloco`, `a.ds-btn`) não aparece em
   nenhuma lista de "classes só nossas", e foi assim que a barra do compositor
   se quebrou uma vez.

   Se algo aqui deixar de ser específico deste produto, sobe ao núcleo no
   EngiDesignSystem em vez de ficar duplicado nos dois lados.
   ============================================================================= */
/* ------------------------------------------------------------------------------------------
   REGRAS QUE MODIFICAM CLASSES DO ENGI360
   ------------------------------------------------------------------------------------------
   Estas não têm classe própria: MODIFICAM classes que existem no Engi360 (.ds-composer.bloco,
   a.ds-btn, .ds-chart .apexcharts-tooltip). Ao adoptar o design system de lá foram perdidas,
   porque a extração do que era "só nosso" foi feita por NOME DE CLASSE e não por regra — e o
   compositor do gerador ficou com a barra a quebrar e o botão fora do sítio.

   Quem voltar a actualizar o design system: comparar REGRAS entre a versão antiga e a nova, não
   nomes de classes. Um seletor composto sobre uma classe partilhada não aparece em nenhuma lista
   de "classes só nossas".
   ------------------------------------------------------------------------------------------ */

/* O <FocusOnNavigate Selector="h1"> do Blazor põe foco no título a cada navegação, para os leitores de
   ecrã anunciarem a página nova. Para isso marca-o com tabindex="-1" e chama focus() — e o Chromium
   desenha o anel de foco à volta do título, que fica com ar de campo de formulário. Via-se em todas as
   páginas; na de entrada notava-se mais, por o cartão ser pequeno.
   Tirar o anel aqui NÃO custa acessibilidade: um tabindex="-1" nunca é alcançável pelo teclado, logo
   este anel nunca serviu para orientar quem navega assim. O leitor de ecrã continua a anunciar.
   Desde a 3.2.1 o núcleo tem .ds-h1[tabindex="-1"]:focus, só para o título com essa classe. Esta regra
   fica, porque é mais larga: os <h1> das páginas de entrada (Entrar, Recuperar, Repor) não levam .ds-h1,
   e a gaveta e a confirmação também recebem foco com tabindex="-1". */
[tabindex="-1"]:focus{outline:none}

/* As âncoras estilizadas como botão (a.ds-btn) ficavam sublinhadas; a regra subiu ao núcleo na 3.0. */

.ds-chart .apexcharts-tooltip{font-family:var(--ds-font)}

/* A ferramenta escolhida na barra do gráfico (a lupa, a mão) vinha no azul do ApexCharts, o único azul
   num gráfico que desde a 3.0 está na cor de agir. A regra da biblioteca é injetada depois desta folha
   e tem três classes: esta tem quatro para ganhar. */
.ds-chart .apexcharts-canvas .apexcharts-toolbar .apexcharts-selected svg{fill:var(--ds-accent)}
.ds-chart .apexcharts-toolbar .apexcharts-pan-icon.apexcharts-selected svg{stroke:var(--ds-accent)}

/* Composer do gerador: o textarea cresce com a pergunta e a toolbar vive por baixo. O .ds-composer do
   core é uma linha só (chat); esta variante é um bloco. */
.ds-composer.bloco{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;
  background:var(--ds-surface)}

.ds-composer.bloco .ds-textarea{border:0;padding:0;min-height:52px;box-shadow:none;resize:none}

.ds-composer.bloco .ds-textarea:focus{border:0;box-shadow:none}

.ds-composer.bloco .barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.ds-composer.bloco .barra .direita{margin-left:auto;display:flex;align-items:center;gap:10px}

.ds-composer.bloco .ds-kbd{margin-left:0}

/* ---- Utilização (U2) ----
   O .ds-kpi-val do core é monoespaçado porque só conta com números. No ecrã de utilização o mesmo
   sítio pode ter uma PALAVRA ("Ilimitado", "Sem limite"), que em mono a 24px lê como código e
   desalinha as três colunas: esta variante devolve-lhe a fonte de texto e um corpo compatível. */
.ds-kpi-val.texto{font-family:var(--ds-font);font-size:17px;letter-spacing:0;padding:5px 0 2px}

/* ==========================================================================================
   SÓ DO ENGIANALYTICS
   ------------------------------------------------------------------------------------------
   Tudo acima é o design system do Engi360, copiado tal e qual — é ele a fonte, e este produto
   nasce alinhado com ele. As duas cópias vão divergir com o tempo; a sincronização fica para
   ser tratada quando existir (pacote partilhado ou verificação no CI).

   Aqui em baixo ficam só os componentes que NÃO existem no Engi360: o explorador de esquema, o
   painel de SQL, a grelha de gráficos e o progresso da geração. Ficam à parte de propósito —
   assim uma actualização do design system é copiar o de cima outra vez, sem ter de descobrir o
   que era nosso no meio.
   ========================================================================================== */

/* O rodapé da gaveta EMBRULHA em vez de cortar: com quatro ou cinco ações, os primeiros botões
   ficavam fora do ecrã à esquerda (justify-end + sem wrap) — apanhado pelo dono, que não via o
   Refrescar nem o Editar. */
.ds-drawer-foot{flex-wrap:wrap}

/* Grelha de visualizações sugeridas: cada cartão respira a 480px e empilha em ecrãs estreitos. */
.ds-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:14px}

/* SQL gerado — leitura e auditoria, nunca edição (sem realce de sintaxe: zero dependências externas). */
.ds-sql-head{display:flex;align-items:center;justify-content:space-between;gap:10px}

.ds-sql{margin:6px 0 0;padding:12px 14px;background:var(--ds-canvas);border:1px solid var(--ds-border);
  border-radius:var(--ds-r);font-family:var(--ds-mono);font-size:12px;line-height:1.6;color:var(--ds-text);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;max-height:340px;overflow-y:auto}

/* Progresso da geração: fase + segundos decorridos. Uma barra indeterminada mente sobre o tempo que
   falta; uma fase nomeada com um contador a subir diz a verdade e dá paciência a quem espera. */
.ds-gen-progress{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ds-soft);
  padding:2px 0 10px}

.ds-gen-progress .dot{width:7px;height:7px;border-radius:50%;background:var(--ds-accent);flex:none;
  animation:ds-gen-pulse 1.1s ease-in-out infinite}

.ds-gen-progress .fase{font-weight:500;color:var(--ds-text)}

.ds-gen-progress .tempo{font-family:var(--ds-mono);color:var(--ds-faint)}

/* Guia de exploração: painel colapsável com áreas, métricas e perguntas sugeridas. */
.ds-guia-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0}

/* O ícone não encolhe: no telemóvel a frase ocupa a linha e a bússola ficava reduzida a um ponto. */
.ds-guia-head svg{flex:none}

.ds-guia-grp{margin:0 0 12px}

.ds-guia-grp:last-child{margin-bottom:2px}

/* ---- Explorador de esquema (U3) ----
   O layout é o .ds-wiki do core (barra lateral + corpo), que já é um "índice + artigo" e já empilha
   em ecrãs estreitos — reaproveitá-lo poupa um layout novo. O que o core não tem é a LINHA da lista:
   o .ds-wiki-link é um bloco de texto, e aqui cada entrada tem ícone, nome em mono e contagem à
   direita. Estas classes acrescentam só isso. */

/* A lateral do wiki tem 240px, pensada para títulos de artigo; nomes de tabela em mono são mais
   longos e cortavam a meio. A media query repete-se aqui porque este bloco vive DEPOIS da do core. */
.ds-wiki-side.ds-esq-side{width:300px}

.ds-wiki-main.ds-esq-main{max-width:none}

/* A lista rola sozinha: com 60 tabelas, rolar a página inteira levava o detalhe (à direita) para fora
   do ecrã. Altura pela viewport para acompanhar janelas pequenas. */
.ds-esq-lista{max-height:calc(100vh - 320px);min-height:220px;overflow-y:auto;padding-right:2px}

.ds-wiki-link.ds-esq-item{display:flex;align-items:center;gap:7px;width:100%;border:0;background:transparent;
  font:inherit;font-size:13px;text-align:left;color:var(--ds-soft)}

.ds-wiki-link.ds-esq-item svg{flex:none;opacity:.55}

.ds-esq-item .nm{font-family:var(--ds-mono);font-size:12px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.ds-esq-item .n{margin-left:auto;flex:none;font-family:var(--ds-mono);font-size:11px;color:var(--ds-faint)}

.ds-wiki-link.ds-esq-item.active .n{color:inherit}

/* Vista distingue-se por ícone (eye) E por itálico: só a cor não chegava a quem não a distingue. */
.ds-esq-item.vista .nm{font-style:italic}

/* Alvo de chave estrangeira: parece um elo e comporta-se como um botão (navega no ecrã, sem recarregar). */
.ds-esq-fk{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;border:0;
  font:inherit;font-size:12px;cursor:pointer;background:var(--ds-accent-wash);
  color:var(--ds-accent-ink,var(--ds-accent))}

.ds-esq-fk:hover{text-decoration:underline}

.ds-esq-fk svg{flex:none}

/* Painel dos metadados: linhas que envolvem em vez de transbordarem (data, modelo, cache e estado do
   trabalho competem pela mesma largura em ecrãs médios). */
.ds-esq-meta{padding:12px 18px;margin-bottom:16px}

.ds-esq-meta .linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 0 6px}

.ds-esq-crumb{flex-wrap:wrap;margin:0}

@keyframes ds-gen-pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* Faixa de aviso global, entre a barra de topo e a área que rola.

   Reutiliza o .ds-callout do núcleo — a cor, o ícone e as quatro variantes já lá estão, e uma classe
   nova de aviso duplicava vocabulário usado em mais de quarenta sítios. O que muda é só a geometria:
   encostada de lado a lado, sem cantos redondos e sem margens, para ler como uma faixa do produto e
   não como um cartão esquecido por cima da página.

   Vive AQUI e não no engi-ds.css: o núcleo é adoptado byte a byte e está travado por sha256; uma
   regra escrita lá reprova o CI e desaparecia na sincronização seguinte (ADR-012). */
.ds-faixa-licenca{flex:none;border-radius:0;border-left:0;border-right:0;border-top:0;
  padding:9px 18px;font-size:12.5px}

/* Fundo por omissão do .ds-tag.

   A regra do núcleo define `color:#fff` e NÃO define fundo: a convenção é cada quem a usa dar o seu
   em `style`. Quatro sítios davam; dois não — a coluna «Tipo» das Fontes de dados e a contagem de
   colunas sensíveis da Curadoria — e ficavam BRANCOS SOBRE BRANCO. Não vazios: invisíveis. Ninguém
   reparou porque uma célula em branco parece uma célula sem dados.

   Um fundo aqui torna a classe segura por omissão, e quem der o seu em `style` continua a ganhar —
   estilos em linha vencem folhas de estilo. Vive no apêndice porque o núcleo é adoptado byte a byte
   e está travado por sha256 (ADR-012). */
.ds-tag{background:var(--ds-soft)}

/* O título de cada bloco numa resposta a VÁRIAS fontes.

   Vai por cima do resultado e não por baixo: quem compara dois gráficos lado a lado precisa de
   saber de onde veio cada um ANTES de os ler, não depois de tirar conclusões. */
.ea-fonte-titulo{
  display:flex; align-items:center; gap:8px;
  padding:0 0 10px; margin-bottom:10px;
  border-bottom:1px solid var(--ds-border);
  color:var(--ds-text);
}
.ea-fonte-titulo .ds-status{margin-left:auto}

/* -----------------------------------------------------------------------------
   Ajuda: o título do artigo aparece UMA vez

   O artigo em página inteira desenha o título no cabeçalho da página (.ds-h1) e
   o markdown começa com o seu próprio `# Título` — que é o que a gaveta lateral
   precisa, porque lá não há cabeçalho de página nenhum.

   Resultado sem esta regra: o título duas vezes seguidas, na página inteira. A
   correção vive AQUI e não no núcleo por duas razões: o `engi-ds.css` é adotado
   byte a byte e não se edita, e o problema nasce da combinação
   (cabeçalho da página + markdown com H1) — que é uma escolha nossa.
   -------------------------------------------------------------------------- */
.ds-doc-artigo .ds-wiki-main > h1:first-child { display: none; }

/* -----------------------------------------------------------------------------
   Tabelas largas: uma sombra no lado onde há colunas escondidas

   Uma tabela mais larga do que a área rola dentro do seu .ds-tablewrap, e num
   iPad a barra de rolar só aparece ao arrastar: ninguém sabia que havia mais
   colunas (as da Curadoria a 1180, 2 Out 2026). Os outros produtos marcam isso
   com o data-transborda do engiDsTabelas, que vive no engi-ds.js, que este
   produto não adotou. Aqui a mesma sombra faz-se só em CSS: duas sombras presas
   às margens (scroll) e duas tampas da cor do fundo que andam com o conteúdo
   (local). Com conteúdo escondido de um lado, a tampa desse lado já saiu e a
   sombra vê-se; no fim, a tampa volta a cobri-la. Numa tabela que cabe, as
   tampas ficam sempre por cima e não se vê nada.

   As células não têm fundo, por isso a sombra vê-se nas linhas; o cabeçalho tem
   o seu, e fica por cima dela. A cor é a da sombra do núcleo (.ds-tablewrap
   [data-transborda]), para as duas versões se lerem iguais.
   -------------------------------------------------------------------------- */
.ds-tablewrap {
  background:
    linear-gradient(to right, var(--ds-surface) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--ds-surface) 40%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(to right, rgba(16, 24, 40, .2), transparent) left center / 16px 100% no-repeat scroll,
    linear-gradient(to left, rgba(16, 24, 40, .2), transparent) right center / 16px 100% no-repeat scroll,
    var(--ds-surface);
}