/*
Retema o template "Mifty" (modelo_projeto/design) para a marca Bramsys.
Cor extraida do logo (modelo_projeto/img/logo_bramsys.svg): #6F2277.
Os tons derivados (hover/active/subtle) foram calculados por mistura
linear com preto/branco a partir dessa base, nao escolhidos no olho.
Carregar DEPOIS de bootstrap.min.css e app.min.css.
*/

:root {
  --bs-primary: #6f2277;
  --bs-primary-rgb: 111, 34, 119;
  --bs-primary-text-emphasis: #3d1341;
  --bs-primary-bg-subtle: rgba(111, 34, 119, 0.1);
  --bs-primary-border-subtle: #cdb2cf;
}

html[data-bs-theme=dark] {
  --bs-primary: #9a4aa3;
  --bs-primary-rgb: 154, 74, 163;
  --bs-primary-text-emphasis: #d7ade0;
  --bs-primary-bg-subtle: rgba(154, 74, 163, 0.2);
  --bs-primary-border-subtle: #5c2c62;
}

.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #6f2277;
  --bs-btn-border-color: #6f2277;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #621e69;
  --bs-btn-hover-border-color: #571b5d;
  --bs-btn-focus-shadow-rgb: 111, 34, 119;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #571b5d;
  --bs-btn-active-border-color: #571b5d;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #6f2277;
  --bs-btn-disabled-border-color: #6f2277;
}

.btn-outline-primary {
  --bs-btn-color: #6f2277;
  --bs-btn-border-color: #6f2277;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #6f2277;
  --bs-btn-hover-border-color: #6f2277;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #6f2277;
  --bs-btn-active-border-color: #6f2277;
  --bs-btn-disabled-color: #6f2277;
}

/* A caixa da marca tem a altura da topbar (--bs-topbar-height: 75px) e 230px
   uteis de largura (270px da barra menos 20px de padding de cada lado). O
   template entrega o logo em 36px, que deixava mais da metade da altura vazia
   e fazia a marca parecer solta no topo. 52px enche a caixa mantendo ~11px de
   respiro em cima e embaixo.

   Tem de ser `height`, e nao `max-height`: o app.min.css define
   `.logo-lg { height: 36px }`, uma altura FIXA - um max-height maior que ela
   nao aumenta nada, so serviria para cortar. `width: auto` preserva a
   proporcao do SVG. */
.startbar .brand .logo img.logo-lg {
  height: 52px;
  width: auto;
}

/* Barra recolhida: a caixa cai para --bs-startbar-collapsed-width (70px), e o
   logo reduzido (.logo-sm, 32px no template) acompanha na mesma proporcao. */
.startbar .brand .logo img.logo-sm {
  height: 40px;
  width: auto;
}

.startbar .navbar-nav .nav-link.active,
.startbar .navbar-nav .nav-link:hover {
  color: var(--bs-primary);
}

.startbar .navbar-nav .nav-item .nav-link.active .menu-icon,
.startbar .navbar-nav .nav-item .nav-link:hover .menu-icon {
  color: var(--bs-primary);
}

/* KPI de variacao: cor de status (nao tematica) - segue a paleta de
   acessibilidade validada (dataviz), nao a cor da marca, porque aqui a
   cor carrega um sinal de bom/mau resultado, nao identidade visual. */
.text-kpi-good { color: #0ca30c; }
.text-kpi-critical { color: #d03b3b; }

#loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--bs-body-bg);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}