/*
 * ============================================================================
 * Identidade visual CIOT Hub — Overrides específicos
 * ============================================================================
 *
 * IMPORTANTE: A partir da Fase 1 do redesign (v1.0), a fundação visual
 * (tokens, tipografia Inter, componentes-base) vive em design-system.css.
 *
 * Este arquivo agora contém apenas:
 *   1. Overrides específicos do CIOT Hub que precisam ter precedência
 *   2. Estilos de tela específicos (login, documento impresso)
 *   3. Aliases de classes legadas (.btn-dark continua funcionando)
 *
 * Ordem de carregamento esperada em base.html:
 *   1. Bootstrap 5.3.3
 *   2. Bootstrap Icons 1.11.3
 *   3. design-system.css       ← tokens + componentes (NOVO)
 *   4. custom.css              ← este arquivo (overrides finais)
 *
 * Cores oficiais:
 *   #012169 - Azul marinho institucional (navbar)
 *   #76BC43 - Verde corporativo (botões principais, ações de sucesso)
 *
 * NÃO REMOVER os tokens --ciot-* deste arquivo: templates antigos podem
 * referenciá-los diretamente. Eles também estão duplicados como aliases
 * em design-system.css por segurança.
 * ============================================================================
 */

:root {
  --ciot-navbar: #012169;
  --ciot-navbar-hover: #001a52;
  --ciot-primary: #76BC43;
  --ciot-primary-hover: #5fa036;
  --ciot-primary-dark: #4d8a27;
  --ciot-text-on-navbar: #ffffff;
  --ciot-text-on-primary: #ffffff;
}

/* ====================================================================
   NAVBAR superior — azul marinho institucional
==================================================================== */
.navbar.bg-primary,
.navbar.bg-dark,
.navbar.bg-light,
.navbar-ciot {
  background-color: var(--ciot-navbar) !important;
}

.navbar.navbar-light,
.navbar.bg-light {
  --bs-navbar-color: var(--ciot-text-on-navbar);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.55);
}

.navbar a,
.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--ciot-text-on-navbar) !important;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: rgba(255, 255, 255, 0.85) !important;
}
.navbar .dropdown-menu .dropdown-item {
  color: #212529 !important;  /* dropdown ainda fica claro/legível */
}

/* Logo dentro do navbar */
.navbar-brand img.logo-menu {
  height: 44px;
  width: auto;
  vertical-align: middle;
}

/* ====================================================================
   BOTÕES — verde corporativo é o "primary"
==================================================================== */
.btn-primary {
  --bs-btn-bg: var(--ciot-primary);
  --bs-btn-border-color: var(--ciot-primary);
  --bs-btn-color: var(--ciot-text-on-primary);
  --bs-btn-hover-bg: var(--ciot-primary-hover);
  --bs-btn-hover-border-color: var(--ciot-primary-hover);
  --bs-btn-hover-color: var(--ciot-text-on-primary);
  --bs-btn-active-bg: var(--ciot-primary-dark);
  --bs-btn-active-border-color: var(--ciot-primary-dark);
  --bs-btn-active-color: var(--ciot-text-on-primary);
  --bs-btn-disabled-bg: var(--ciot-primary);
  --bs-btn-disabled-border-color: var(--ciot-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--ciot-primary-dark);
  --bs-btn-border-color: var(--ciot-primary);
  --bs-btn-hover-bg: var(--ciot-primary);
  --bs-btn-hover-border-color: var(--ciot-primary);
  --bs-btn-hover-color: var(--ciot-text-on-primary);
  --bs-btn-active-bg: var(--ciot-primary-dark);
  --bs-btn-active-border-color: var(--ciot-primary-dark);
  --bs-btn-active-color: var(--ciot-text-on-primary);
}

/* Links com classe text-primary continuam usando o azul institucional
   (não o verde dos botões) — fica mais legível em texto */
.text-primary,
a.text-primary {
  color: var(--ciot-navbar) !important;
}
a.text-primary:hover {
  color: var(--ciot-navbar-hover) !important;
}

/* Badges azuis usam o azul institucional */
.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--ciot-navbar) !important;
  color: #fff !important;
}

/* Sub-tons usados em badges leves do app */
.bg-primary-subtle {
  background-color: rgba(1, 33, 105, 0.10) !important;
}
.text-primary-emphasis {
  color: var(--ciot-navbar) !important;
}

/* ====================================================================
   BOTOES DARK / SECUNDARIOS — usam o azul institucional ao inves de preto
   (ex: filtro "Todos os tempos" no dashboard)

   NOTA: A partir da Fase 1 do redesign, .btn-institutional é o nome
   semântico canônico (definido em design-system.css). .btn-dark continua
   funcionando como alias para compatibilidade com templates existentes.
==================================================================== */
.btn-dark {
  --bs-btn-bg: var(--ciot-navbar);
  --bs-btn-border-color: var(--ciot-navbar);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--ciot-navbar-hover);
  --bs-btn-hover-border-color: var(--ciot-navbar-hover);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--ciot-navbar-hover);
  --bs-btn-active-border-color: var(--ciot-navbar-hover);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--ciot-navbar);
  --bs-btn-disabled-border-color: var(--ciot-navbar);
}

/* Botoes-grupo: o item "ativo" / "selecionado" recebe o azul */
.btn-group .btn.active,
.btn-group .btn-check:checked + .btn,
.btn-group .btn[aria-pressed="true"] {
  background-color: var(--ciot-navbar) !important;
  border-color: var(--ciot-navbar) !important;
  color: #ffffff !important;
}

/* ====================================================================
   TELA DE LOGIN — logo grande centralizado
==================================================================== */
.login-logo {
  display: block;
  max-width: 220px;
  margin: 0 auto 1.5rem auto;
  height: auto;
}

/* ====================================================================
   DOCUMENTO IMPRESSO — rodapé com LogoCIOT 64x64

   ⚠️  REGULAMENTADO PELA ANTT — NÃO MODIFICAR ⚠️
   O layout deste rodapé faz parte do documento oficial do CIOT impresso.
   Qualquer alteração precisa de validação com a área de conformidade.
==================================================================== */
.documento-rodape-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
}
.documento-rodape-logo-box img {
  max-width: 64px;
  max-height: 64px;
  width: auto;
  height: auto;
  display: block;
}
@media print {
  .documento-rodape-logo-box {
    border-color: #aaa;
  }
}