/*
 * Syntheke — folha de estilo própria.
 *
 * Único arquivo CSS além do Bootstrap vendorizado (ver CLAUDE.md). As cores
 * de marca (azul/vermelho ENOMA) já entram recompiladas no próprio Bootstrap
 * via static/src/bootstrap-custom.scss — este arquivo só cobre o que os
 * componentes do Bootstrap não têm pronto. Nunca duplicar classes do
 * Bootstrap aqui nem usar !important — se um override for necessário,
 * prefira composição de classes utilitárias do próprio Bootstrap no template.
 */

.syntheke-banner-producao {
  background-color: var(--bs-danger);
  color: var(--bs-white);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Navbar institucional (branca, com sublinhado de destaque no hover) */
.navbar-syntheke {
  background-color: var(--bs-white);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.navbar-syntheke .nav-link {
  position: relative;
  padding-bottom: 0.5rem;
}

.navbar-syntheke .nav-link::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 2px;
  background-color: var(--bs-danger);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.navbar-syntheke .nav-link:hover::after,
.navbar-syntheke .nav-link.active::after {
  transform: scaleX(1);
}

.navbar-syntheke .dropdown-menu {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Cards com leve elevação no hover, para telas de listagem/dashboard */
.card-syntheke {
  transition: box-shadow 0.2s ease;
}

.card-syntheke:hover {
  box-shadow: 0 8px 28px rgba(30, 39, 114, 0.13);
}

/* Larguras fixas das colunas do mini-gráfico de 12 meses do dashboard e da
 * coluna de chave da sincronização — evitam style="width:.." inline nos
 * templates (a largura dinâmica da .progress-bar continua no template, que é
 * o padrão idiomático do Bootstrap para barras de progresso). */
.col-rotulo-mes {
  width: 4rem;
}

.col-valor-mes {
  width: 8rem;
}

.col-chave-sync {
  max-width: 12rem;
}