/* ============================================================================
   Monitor Diários Oficiais — identidade visual
   ----------------------------------------------------------------------------
   Este arquivo sobrescreve o tema Argon. Ele existe porque argon.css é um
   vendor JÁ COMPILADO (500 KB, 120 ocorrências de #5e72e4) e o projeto não tem
   gulpfile nem package.json — editar scss/custom/_variables.scss não teria
   efeito nenhum sem um build que não existe aqui.

   Por isso, e só por isso, há !important abaixo: é uma folha de override
   carregada DEPOIS do vendor, e esse é o trabalho dela. Não use !important em
   CSS novo fora deste arquivo.

   A paleta substitui os três azuis que conviviam no sistema:
     #5e72e4 (painel)  #0d6efd (e-mail)  #1a73e8 (links)  ->  #2B6CB0
   ========================================================================== */

:root {
  --mdo-navy:       #172B4D;  /* institucional: topo, fundos escuros */
  --mdo-navy-deep:  #0F1E36;
  --mdo-blue:       #2B6CB0;  /* apoio: links, botões, ícones */
  --mdo-blue-dark:  #235A93;
  --mdo-blue-light: #8FB3E0;  /* só sobre navy */
  --mdo-amber:      #F5A524;  /* o blip: exige ação. Uma vez por tela. */
  --mdo-amber-ink:  #7A4E04;
  --mdo-paper:      #F7F9FC;
  --mdo-border:     #DCE4EF;
}

/* ---- superfícies institucionais (navy) ---- */
.bg-primary,
.navbar-top.bg-primary {
  background-color: var(--mdo-navy) !important;
}

/* Login: o corpo da página é .bg-default, que o Argon já define como #172b4d —
   exatamente o nosso navy. O gradiente precisa ficar MAIS CLARO que ele, senão
   o polígono de separação (fill-default, navy) não tem contraste e some. */
.bg-gradient-primary {
  background: linear-gradient(87deg, #24497E 0, #1B3762 100%) !important;
}

/* ---- azul de apoio ---- */
.text-primary { color: var(--mdo-blue) !important; }

/* Só links de conteúdo. Botões e navegação têm cor própria — um `a:hover`
   genérico venceria .btn-primary por especificidade e apagaria o texto branco. */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link) {
  color: var(--mdo-blue);
}
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):hover {
  color: var(--mdo-blue-dark);
}

.btn-primary {
  background-color: var(--mdo-blue) !important;
  border-color: var(--mdo-blue) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--mdo-blue-dark) !important;
  border-color: var(--mdo-blue-dark) !important;
}
.btn-primary:focus,
.btn-primary.focus { box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.4) !important; }

.btn-outline-primary {
  color: var(--mdo-blue) !important;
  border-color: var(--mdo-blue) !important;
}
.btn-outline-primary:hover {
  background-color: var(--mdo-blue) !important;
  color: #fff !important;
}

.badge-primary { background-color: var(--mdo-blue) !important; color: #fff !important; }

/* ---- sidenav ----
   O Argon so define max-width/max-height para a marca, que sao TETOS e nunca um
   tamanho. Com um SVG em <img>, isso nao basta: o .sidenav-header e flex, e um
   <img> sem tamanho definido colapsa para zero dentro dele. Por isso `height`
   explicito aqui, e width/height tambem nos proprios .svg (tamanho intrinseco).
   object-fit preserva a proporcao caso o max-width chegue a atuar. */
/* Só o símbolo na sidenav, sem o wordmark: sendo quadrado, ele cabe igualmente
   bem na sidenav expandida (250px) e na recolhida (62px), que era onde o lockup
   horizontal e o empilhado encolhiam. Por isso o .sidenav-header volta aos 78px
   originais do Argon — sem nome para acomodar, nao precisa de altura extra. */
.navbar-vertical .navbar-brand-img,
.navbar-vertical .navbar-brand > img {
  height: 3rem;
  width: auto;
  max-height: 3rem;
  max-width: 100%;
  object-fit: contain;
}

.navbar-vertical.navbar-light .navbar-nav .nav-link.active { color: var(--mdo-blue) !important; }
.navbar-vertical.navbar-light .navbar-nav .nav-link.active:before { border-left-color: var(--mdo-blue) !important; }
.navbar-vertical .navbar-nav .nav-link[data-toggle="collapse"][aria-expanded="true"] { color: var(--mdo-blue) !important; }

/* ---- formulários ---- */
.form-control:focus {
  border-color: var(--mdo-blue) !important;
  box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.18) !important;
}
.focused .input-group-text { border-color: var(--mdo-blue) !important; }
.focused .form-control { border-color: var(--mdo-blue) !important; }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--mdo-blue) !important;
  border-color: var(--mdo-blue) !important;
}

/* ---- âmbar: o sinal de "exige atenção" ----
   Reservado para o que pede ação do usuário — hoje, uma busca cujo próximo
   ciclo já venceu. Se aparecer duas vezes na mesma tela, uma delas está errada. */
.badge-atencao {
  background-color: var(--mdo-amber) !important;
  color: var(--mdo-amber-ink) !important;
  font-weight: 600;
}

/* ---- foco visível de teclado ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--mdo-amber);
  outline-offset: 2px;
}