/* =============================
   PALETA DE CORES
   ============================= */
:root {
  --azul-principal: #0164ab;
  --azul-hover: #0280e0;
  --azul-claro: #e8f3fb;
  --cinza-claro: #f8f9fa;
  --cinza-escuro: #343a40;
  --branco: #ffffff;
}

/* =============================
   BOTÕES - Mantendo consistência
   ============================= */
.btn-primary {
  background-color: var(--azul-principal) !important;
  border-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--azul-hover) !important;
  border-color: var(--azul-hover) !important;
  color: var(--branco) !important;
}

.btn-outline-primary {
  color: var(--azul-principal) !important;
  border-color: var(--azul-principal) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

/* =============================
   CABEÇALHOS - Garantindo fundo azul e texto claro
   ============================= */

/* Cabeçalhos de Modais - FUNDO AZUL COM TEXTO CLARO */
.modal-header {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
  border-bottom: 1px solid var(--azul-hover) !important;
}

.modal-header .modal-title {
  color: var(--branco) !important;
  font-weight: 600;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1) !important;
}

/* Cabeçalhos de Cards - FUNDO AZUL COM TEXTO CLARO */
.card-header {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
  border-bottom: 1px solid var(--azul-hover) !important;
  font-weight: 600;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  color: var(--branco) !important;
  margin-bottom: 0;
}

/* Cabeçalhos de Tabelas - FUNDO AZUL COM TEXTO CLARO */
.table thead {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

.table thead th {
  color: var(--branco) !important;
  border-bottom: none !important;
  font-weight: 600;
}

/* =============================
   NAVBAR - Mantendo identidade azul
   =============================
.navbar {
  background-color: var(--azul-principal) !important;
}

.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--branco) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--azul-claro) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
} */

/* =============================
   LINKS E TEXTOS
   ============================= */
a {
  color: var(--azul-principal);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--azul-hover);
  text-decoration: underline;
}

/* Títulos com cor azul */
h1, h2, h3, h4, h5 {
  color: var(--azul-principal);
  font-weight: 600;
}

/* =============================
   TABELAS - Striping suave
   ============================= */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--azul-claro) !important;
}

.table-light thead {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

.table-light thead th {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
  border-color: var(--azul-hover) !important;
}

/* Garante que todas as tabelas tenham cabeçalho azul */
.table thead {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

.table thead th {
  color: var(--branco) !important;
  border-bottom: none !important;
  font-weight: 600;
  background-color: var(--azul-principal) !important;
}

/* Remove qualquer fundo claro do table-light */
.table-light thead tr {
  background-color: var(--azul-principal) !important;
}

/* Se precisar de mais especificidade, podemos usar */
table.table thead.table-light {
  background-color: var(--azul-principal) !important;
}

table.table thead.table-light th {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

/* =============================
   FORMULÁRIOS - Foco azul
   ============================= */
.form-control:focus,
.form-select:focus {
  border-color: var(--azul-principal) !important;
  box-shadow: 0 0 0 0.2rem rgba(1, 100, 171, 0.25) !important;
}

/* =============================
   COMPONENTES DE ALERTA - Cores de feedback
   ============================= */

/* Alertas mantendo o estilo Bootstrap mas com cores da paleta */
.alert-success {
  background-color: rgba(232, 243, 251, 0.9) !important;
  border-color: var(--azul-principal) !important;
  color: var(--cinza-escuro) !important;
}

.alert-danger {
  background-color: rgba(253, 237, 237, 0.9) !important;
  border-color: #dc3545 !important;
  color: #721c24 !important;
}

.alert-warning {
  background-color: rgba(255, 243, 205, 0.9) !important;
  border-color: #ffc107 !important;
  color: #856404 !important;
}

.alert-info {
  background-color: rgba(232, 243, 251, 0.9) !important;
  border-color: var(--azul-principal) !important;
  color: var(--cinza-escuro) !important;
}

/* =============================
   BADGES - Integração com a paleta
   ============================= */
.badge.bg-primary {
  background-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

/* =============================
   PAGINAÇÃO - Cores consistentes
   ============================= */
.page-link {
  color: var(--azul-principal) !important;
}

.page-link:hover {
  color: var(--azul-hover) !important;
  background-color: var(--azul-claro) !important;
}

.page-item.active .page-link {
  background-color: var(--azul-principal) !important;
  border-color: var(--azul-principal) !important;
  color: var(--branco) !important;
}

/* =============================
   UTILITÁRIOS DE CORES
   ============================= */
.text-azul { color: var(--azul-principal) !important; }
.bg-azul { background-color: var(--azul-principal) !important; }
.bg-azul-claro { background-color: var(--azul-claro) !important; }

/* Garantir que textos sobre fundo azul fiquem brancos */
.bg-azul,
.bg-primary {
  color: var(--branco) !important;
}

.bg-azul h1,
.bg-azul h2,
.bg-azul h3,
.bg-azul h4,
.bg-azul h5,
.bg-azul h6,
.bg-azul p,
.bg-azul span {
  color: var(--branco) !important;
}

/* =============================
   AJUSTE PARA CHECKBOXES E LABELS GRANDES
   ============================= */
.toggle-group {
  display: flex;
  flex-direction: column;  /* empilha os itens verticalmente */
  gap: 4px; /* espaçamento entre checkboxes */
}

.toggle-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: normal; /* permite quebra natural do texto */
  /*word-break: break-word;  quebra palavras longas */
  max-width: 160px; /* evita empurrar a tabela */
  vertical-align: middle;
}