/**
 * =======================================================
 * VEDAÇÃO ELEITORAL — Estilos Temporários
 * =======================================================
 * Este arquivo é carregado APENAS quando VEDACAO_ELEITORAL = true.
 * Substitui pontualmente as cores azuis institucionais por tons de
 * cinza/preto, sem aplicar filtros globais que afetem fotos,
 * gráficos ou botões de ação do sistema.
 *
 * Para desativar: basta setar VEDACAO_ELEITORAL = false em Config.php.
 * =======================================================
 */

/* -------------------------------------------------------
   PALETA DE CORES — Vedação Eleitoral
   ------------------------------------------------------- */
:root {
  --ve-dark:       #1a1a2e;   /* Quase preto azulado — fundo navbar login */
  --ve-dark-2:     #16213e;   /* Variante mais escura */
  --ve-dark-3:     #0f3460;   /* Tom escuro para hover/bordas */
  --ve-mid:        #2d2d2d;   /* Cinza médio-escuro */
  --ve-medium:     #555555;   /* Cinza médio */
  --ve-light:      #888888;   /* Cinza claro para textos secundários */
  --ve-lighter:    #bbbbbb;   /* Cinza muito claro */
  --ve-border:     rgba(255, 255, 255, 0.15);
  --ve-bg-item:    rgba(255, 255, 255, 0.08);
  --ve-bg-hover:   rgba(255, 255, 255, 0.14);
}

/* =======================================================
   TELA DE LOGIN — Navbar Superior
   ======================================================= */

/* Navbar do login: azul → escuro */
.login-navbar {
  background: linear-gradient(270deg, #1a1a2e 0%, #0f3460 54%, #16213e 100%) !important;
}

.login-navbar_m2-item {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

.login-navbar_m2-item:hover {
  background-color: rgba(255, 255, 255, 0.13) !important;
}

.login-navbar_m2-item_sub {
  background-color: var(--ve-dark) !important;
}

.login-navbar_m2-item_sub a {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

.login-navbar_m2-item_sub a:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

/* =======================================================
   TELA DE LOGIN — Container (layout centralizado)
   ======================================================= */

/**
 * Durante a vedação eleitoral, a section.login-leftside é removida do DOM.
 * O grid passa de "1fr 500px" para coluna única, exibindo o
 * login-rightside centralizado na tela cheia.
 */
.login-container.vedacao-eleitoral {
  grid-template-columns: 1fr;
  background: #f0f0f2;
}

.vedacao-eleitoral .login-rightside {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vedacao-eleitoral .login-rightside-container {
  width: 460px;
  max-width: 90vw;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
}

/* =======================================================
   TELA DE LOGIN — Lado direito (botão de acesso)
   ======================================================= */

/* Botão "Entrar com Gov.BR": gradiente azul → cinza-escuro */
.vedacao-eleitoral .login-rightside-btn_gov {
  background: rgba(40, 40, 40, 0.92) 54% !important;
  background: linear-gradient(270deg, #222222 0%, #333333 54%, #2a2a2a 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.vedacao-eleitoral .login-rightside-btn_gov:hover {
  background: rgba(50, 50, 50, 0.95) 54% !important;
  background: linear-gradient(270deg, #111111 0%, #2a2a2a 54%, #1c1c1c 100%) !important;
  transition: all 0.5s ease-in-out;
}

/* Setas e controles do slider: não renderizados em vedação via PHP */

/* Logo do SIGP em escala de cinza no lado direito */
.vedacao-eleitoral .login-rightside-logo_sigp {
  filter: none;  /* A imagem já é cinza (sigp_gray.png) */
  width: 180px;
}

/* =======================================================
   SISTEMA INTERNO — Menu Lateral (dashboard_menu)
   ======================================================= */

/**
 * Troca a cor do menu lateral de azul institucional para cinza-escuro.
 * Afeta apenas os elementos de cor azul pontualmente.
 */
.dashboard_menu .menu {
  background: linear-gradient(180deg, #1a1a2e 0%, #0f3460 54%, #16213e 100%) !important;
}

/* Logo cinza no menu vertical */
.vedacao-logo-menu {
  filter: brightness(0) invert(1) opacity(0.75);
  width: auto;
  max-height: 40px;
}

/* Itens do menu lateral: azul → cinza */
.dashboard_menu ul li a {
  color: rgba(200, 200, 200, 0.75) !important;
}

.dashboard_menu ul li a:hover,
.dashboard_menu ul li.active a {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* Ícone de item ativo */
.dashboard_menu ul li.active {
  border-left: 3px solid rgba(180, 180, 180, 0.6) !important;
}

/* =======================================================
   SISTEMA INTERNO — Configurações Gerais
   ======================================================= */

/* Redefine a cor azul padrão do sistema para o azul escuro institucional da vedação */
html.vedacao-eleitoral-body {
  --color-blue: #0f3460 !important;
}

/* =======================================================
   SISTEMA INTERNO — Navbar Superior (navbar_header_dashboard)
   ======================================================= */

/* Cor do círculo de progresso de sessão: azul claro → azul escuro da vedação */
#progress-circle[stroke="#00488c"] {
  stroke: #0f3460 !important;
}

html.vedacao-eleitoral-body #progress-circle {
  stroke: #0f3460 !important;
}

/* Badge azul → azul escuro */
html.vedacao-eleitoral-body .badge.badge-blue {
  background-color: #0f3460 !important;
}

html.vedacao-eleitoral-body .badge.badge-blue:hover {
  background-color: #16213e !important;
}

/* =======================================================
   SISTEMA INTERNO — Modais
   ======================================================= */

/* Cabeçalho da Modal: borda azul → cinza neutro */
html.vedacao-eleitoral-body .modal-content .modal-header {
  border-bottom: 1px solid #acc6df !important;
  border-color: #0f3460 !important;
}

/* Título da Modal: azul → azul escuro */
html.vedacao-eleitoral-body .modal-content .modal-header h5 {
  color: #0f3460 !important;
}

/* Botão Fechar (x) da Modal: fundo azul → azul escuro */
html.vedacao-eleitoral-body .modal-content .modal-header .close {
  background-color: #0f3460 !important;
}

html.vedacao-eleitoral-body .modal-content .modal-header .close:hover {
  background-color: #d9534f !important; /* Mantém hover vermelho padrão para fechar */
}

/* =======================================================
   SISTEMA INTERNO — Botões e Elementos Azuis (Institucionais)
   ======================================================= */

/* Botões Azuis e Primários (Institucionais): azul → azul escuro / degradê */
html.vedacao-eleitoral-body .btn-primary,
html.vedacao-eleitoral-body .btn-blue,
html.vedacao-eleitoral-body .btn.btn-blue,
html.vedacao-eleitoral-body .btn-primary:not(:disabled):not(.disabled) {
  background-color: #0f3460 !important;
  border-color: #0f3460 !important;
  color: #ffffff !important;
}

html.vedacao-eleitoral-body .btn-primary:hover,
html.vedacao-eleitoral-body .btn-blue:hover,
html.vedacao-eleitoral-body .btn.btn-blue:hover,
html.vedacao-eleitoral-body .btn-primary:not(:disabled):not(.disabled):hover {
  background-color: #16213e !important;
  border-color: #16213e !important;
  color: #ffffff !important;
}

html.vedacao-eleitoral-body .btn-primary:focus,
html.vedacao-eleitoral-body .btn-blue:focus,
html.vedacao-eleitoral-body .btn.btn-blue:focus,
html.vedacao-eleitoral-body .btn-primary:not(:disabled):not(.disabled):focus {
  box-shadow: 0 0 0 0.2rem rgba(15, 52, 96, 0.5) !important;
}

/* Botões com contorno primário */
html.vedacao-eleitoral-body .btn-outline-primary {
  color: #0f3460 !important;
  border-color: #0f3460 !important;
}

html.vedacao-eleitoral-body .btn-outline-primary:hover {
  color: #ffffff !important;
  background-color: #0f3460 !important;
  border-color: #0f3460 !important;
}

/* Utilitários de Cor Primária (Azul) */
html.vedacao-eleitoral-body .bg-primary {
  background-color: #0f3460 !important;
}

html.vedacao-eleitoral-body .text-primary {
  color: #0f3460 !important;
}

/* Toggle notificações */
html.vedacao-eleitoral-body #toggle_notificacoes {
  background-color: #0f3460 !important;
}

/* Sobrescreve as cores de fundo azuis inline (#00488C) em tabelas, botões e badges */
html.vedacao-eleitoral-body [style*="background-color:#00488C" i],
html.vedacao-eleitoral-body [style*="background-color: #00488C" i],
html.vedacao-eleitoral-body [style*="background-color:#00488c" i],
html.vedacao-eleitoral-body [style*="background-color: #00488c" i],
html.vedacao-eleitoral-body [style*="background:#00488C" i],
html.vedacao-eleitoral-body [style*="background: #00488C" i],
html.vedacao-eleitoral-body [style*="background:#00488c" i],
html.vedacao-eleitoral-body [style*="background: #00488c" i],
html.vedacao-eleitoral-body .list-group-item[style*="background-color"] {
  background-color: #0f3460 !important;
  background: #0f3460 !important;
}

/* Cor de hover dos elementos da lista do modal */
html.vedacao-eleitoral-body .modal-content .modal-body .modal_item_menu:hover {
  background-color: #f0f4f8 !important;
  border-color: #0f3460 !important;
}
html.vedacao-eleitoral-body .modal-content .modal-body .modal_item_menu:hover span {
  color: #0f3460 !important;
}

/* =======================================================
   SISTEMA INTERNO — Fundo da página (body)
   ======================================================= */

/* Mantemos o fundo próximo ao original para não afetar gráficos.
   Apenas suavizamos o tom azulado para neutro. */
html.vedacao-eleitoral-body,
html.vedacao-eleitoral-body body,
html.vedacao-eleitoral-body .content_dashboard .dashboard_main {
  background-color: #eef0f2 !important; /* era #eef4fc (azulado), agora neutro */
}

/* =======================================================
   RESPONSIVIDADE — Tela de login mobile
   ======================================================= */

@media (max-width: 768px) {
  .vedacao-eleitoral .login-rightside-container {
    padding: 30px 20px;
    border-radius: 16px;
  }
}