/* Tema de marca do Portal Legislativo aplicado sobre o SAPL (spike).
   Só pele: cores, navbar, botões, cabeçalhos. Nenhuma regra de negócio. */
:root {
  --navy: #081f3d; --azul: #2a6fdb; --amarelo: #ffce3a;
  --gelo: #f4f7fb; --linha: #e2e8f1; --cinza: #5a6675;
}
body, .page { background: var(--gelo) !important; color: #0e1726; }

/* Navbar principal -> navy da marca */
.navbar.bg-dark, .navbar.navbar-dark.bg-dark { background: var(--navy) !important; border-bottom: 3px solid var(--amarelo); }
.navbar-dark .navbar-nav .nav-link { color: #dce6f5 !important; font-weight: 600; }
.navbar-dark .navbar-nav .nav-link:hover { color: #fff !important; }
.navbar-brand, .navbar-dark .navbar-brand { color: #fff !important; font-weight: 800; letter-spacing: 0.02em; }

/* Masthead / cabeçalho de conteúdo */
.masthead { background: var(--navy) !important; color: #fff !important; border-radius: 0 0 14px 14px; }
.masthead a, .masthead h1, .masthead h2 { color: #fff !important; }

/* Dropdowns dentro do masthead (ex: abas "Ordem do Dia" da sessão) usam o
   popup branco padrão do Bootstrap, mas herdavam ".masthead a { color: #fff }"
   acima — texto branco em fundo branco, invisível. Sobrescreve só os itens
   desses popups de volta pra cor legível. */
.masthead .dropdown-menu a { color: var(--navy) !important; }
.masthead .dropdown-menu a:hover,
.masthead .dropdown-menu a:focus { background: var(--gelo) !important; color: var(--azul) !important; }

/* Hover das abas do masthead (Abertura/Expedientes/Ordem do Dia…): o SAPL
   usa fundo cinza-azulado claro + texto branco por padrão — baixo contraste,
   quase ilegível. Troca pro azul da marca com texto branco de verdade. */
.masthead .nav-link:hover,
.masthead .nav-link:focus { background-color: var(--azul) !important; color: #fff !important; }
.page-header, h1.page-header { color: var(--navy) !important; border-bottom: 2px solid var(--amarelo); padding-bottom: .4rem; font-weight: 800; }

/* Botões */
.btn-primary { background: var(--navy) !important; border-color: var(--navy) !important; font-weight: 700; }
.btn-primary:hover { background: #0d2c54 !important; }
.btn-success { background: var(--amarelo) !important; border-color: var(--amarelo) !important; color: var(--navy) !important; font-weight: 800; }
a { color: var(--azul); }

/* Cards / caixas / formulários */
.card, .panel, .form-control { border-radius: 10px; }
.card-header, .panel-heading { background: var(--gelo) !important; color: var(--navy) !important; font-weight: 700; border-bottom: 1px solid var(--linha); }
.form-control:focus { border-color: var(--azul) !important; box-shadow: 0 0 0 .15rem rgba(42,111,219,.2) !important; }
.container .well, .login { border-radius: 14px !important; border: 1px solid var(--linha) !important; box-shadow: 0 8px 30px rgba(8,31,61,.08) !important; }

/* Tabelas */
.table thead th { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(42,111,219,.04) !important; }

/* ===== Avanço do tema (home, formulários, tabelas, paginação) ===== */

/* Home / dashboard — blocos viram cartões de marca */
.container-home { gap: 1rem; }
.homeBlock { background: #fff !important; border: 1px solid var(--linha) !important; border-top: 4px solid var(--azul) !important; border-radius: 12px !important; box-shadow: 0 4px 16px rgba(8,31,61,.06); transition: transform .12s, box-shadow .12s; }
.homeBlock:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(8,31,61,.12); }
.homeTitle, .homeTitle a { color: var(--navy) !important; font-weight: 800 !important; }
.homeIcon, .homeIcon i, .homeFront i { color: var(--azul) !important; }
.homeContent { color: var(--cinza) !important; }

/* Formulários — campos e selects */
.form-control, .select, .dateinput, .textinput, .numberinput, .nullbooleanselect { border: 1.5px solid var(--linha) !important; border-radius: 10px !important; box-shadow: none !important; }
.form-control:focus, .select:focus, .dateinput:focus { border-color: var(--azul) !important; box-shadow: 0 0 0 3px rgba(42,111,219,.15) !important; }
label, .control-label { color: var(--navy) !important; font-weight: 600; }
.btn-sm { border-radius: 8px !important; }
.actions .btn, .btn-group .btn { border-radius: 8px; }
fieldset legend, .form-section-title { color: var(--navy) !important; border-bottom: 2px solid var(--amarelo); }

/* Botões dark do SAPL -> azul da marca */
.btn-dark { background: var(--azul) !important; border-color: var(--azul) !important; }
.btn-dark:hover { background: #1f5bbf !important; }

/* Tabelas de resultado */
.table.table-bordered { border-radius: 10px; overflow: hidden; border-color: var(--linha) !important; }
.table-bordered th, .table-bordered td { border-color: var(--linha) !important; }
.table thead th { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(42,111,219,.045) !important; }
.table tbody tr:hover { background: rgba(255,206,58,.12) !important; }

/* Paginação */
.pagination .page-link { color: var(--azul); border-color: var(--linha); }
.pagination .page-item.active .page-link { background: var(--navy); border-color: var(--navy); }

/* Breadcrumb / subnav */
.breadcrumb { background: var(--gelo) !important; border-radius: 8px; }
.breadcrumb a { color: var(--azul); }
.nav-tabs .nav-link.active { color: var(--navy) !important; border-bottom: 2px solid var(--amarelo) !important; font-weight: 700; }

/* Alerts */
.alert-info { background: #e7eefb !important; border-color: #c3d6f5 !important; color: #1c3d6e !important; border-radius: 10px; }
.alert-success { background: #e6f4ea !important; border-color: #b6e0c4 !important; color: #176a36 !important; border-radius: 10px; }

/* ===== Avanço 2: detalhe/CRUD (subnav, botões outline, dropdowns) ===== */

/* Botões outline -> marca */
.btn-outline-primary { color: var(--azul) !important; border-color: var(--azul) !important; border-radius: 8px !important; font-weight: 600; }
.btn-outline-primary:hover { background: var(--azul) !important; color: #fff !important; }

/* Subnav do registro (abas Ementa/Tramitação/Documentos…) */
#content .nav-link { color: var(--cinza); font-weight: 600; border-radius: 8px 8px 0 0; }
#content .nav-link:hover { color: var(--azul); }
#content .nav-link.active { color: var(--navy) !important; border-bottom: 3px solid var(--amarelo) !important; background: transparent !important; }

/* Dropdowns do menu */
.dropdown-menu { border: 1px solid var(--linha) !important; border-radius: 10px !important; box-shadow: 0 10px 28px rgba(8,31,61,.14) !important; padding: 0.3rem; }
.dropdown-item { border-radius: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gelo) !important; color: var(--navy) !important; }
/* No menu principal o SAPL usa <li class="dropdown-item"><a>texto</a></li> — o link fica
   DENTRO do item, não é o item. O CSS do próprio SAPL pinta esse <a> de branco no hover
   (.navbar-nav .dropdown-item:hover a), que não é sobrescrito pela regra acima (que só
   pinta o <li> pai). Resultado: texto branco em fundo quase-branco, some. */
.dropdown-item:hover a, .dropdown-item:focus a { color: var(--navy) !important; }

/* Cabeçalho de conteúdo (page-header) já coberto; reforço de espaçamento */
.page-header { margin-bottom: 1.2rem; }

/* ===== Avanço 3: cadastro/edição (crispy forms), validação e modais ===== */

/* Form groups / espaçamento e ajuda */
.form-group, .form-row { margin-bottom: 1rem; }
.help-block, small.form-text, .form-text { color: var(--cinza) !important; font-size: 0.84rem; }
.asteriskField, .required label::after { color: #d33; font-weight: 700; }

/* Validação */
.is-invalid, .form-control.is-invalid { border-color: #d33 !important; box-shadow: 0 0 0 3px rgba(211,51,51,.12) !important; }
.invalid-feedback, .has-error .help-block, .errorlist { color: #b91c1c !important; }
.errorlist { list-style: none; padding-left: 0; font-size: 0.85rem; }
.has-error .form-control { border-color: #d33 !important; }

/* Checkbox / radio na cor da marca */
input[type="checkbox"], input[type="radio"] { accent-color: var(--azul); }

/* Card como seção de formulário */
.card { box-shadow: 0 2px 10px rgba(8,31,61,.05); }
.card-header { font-weight: 700; }

/* Modais */
.modal-content { border: 0 !important; border-radius: 14px !important; box-shadow: 0 20px 50px rgba(8,31,61,.25); overflow: hidden; }
.modal-header { background: var(--navy) !important; color: #fff !important; border-bottom: 3px solid var(--amarelo) !important; }
.modal-header .modal-title { color: #fff !important; font-weight: 800; }
.modal-header .close, .modal-header .btn-close { color: #fff !important; opacity: 0.9; text-shadow: none; }
.modal-footer { background: var(--gelo) !important; border-top: 1px solid var(--linha) !important; }

/* Relatórios (estatísticas) */
.relatorio h2, .estatisticas h2 { color: var(--navy) !important; }

/* ===== Avanço 4: tela de login (esconder menu) e footer na marca ===== */

/* Login: o menu de navegação não faz sentido antes de logar — esconde, mantém a marca */
body:has(#login-form) #navbarNav { display: none !important; }
body:has(#login-form) .navbar-toggler { display: none !important; }

/* Footer na cor da marca (navy + faixa amarela), como o portal público */
.footer { background: var(--navy) !important; color: #9fb1c8 !important; border-top: 3px solid var(--amarelo); }
.footer a { color: #cdddf2 !important; }
.footer a:hover { color: #fff !important; }
/* Logos do rodapé (Interlegis/CC): sem chip branco; invertidos p/ aparecer no navy. */
.footer__logo { background: transparent !important; border: 0 !important; padding: 0 !important; }
.footer__logo img { filter: brightness(0) invert(1); opacity: 0.82; }

/* ===== Avanço 5: remover brasão do masthead e créditos Interlegis/CC do footer ===== */

/* Sem logo da câmara cadastrada — remove o brasão padrão; fica só o nome da Casa. */
.masthead img { display: none !important; }

/* Footer: remove as colunas de crédito (Interlegis e Creative Commons),
   mantém apenas os dados da câmara. (Colunas de crédito contêm .footer__logo.) */
#footer .col-md-4:has(.footer__logo) { display: none !important; }

/* ===== Avanço 6: Painel Eletrônico (TV do plenário) — tema próprio =====
   Página standalone (não usa base.html, template painel/index.html), cores
   de voto (verde/vermelho) continuam vindas via JS inline — são convenção
   universal de "aprovado/rejeitado", não mexemos nelas. Aqui só damos
   identidade visual: fundo da marca, cada bloco vira um card, tipografia
   grande e legível a distância (é pra TV, não pra tela de mesa). */
.painel-principal {
  background: linear-gradient(160deg, var(--navy) 0%, #0d2c54 100%) !important;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  padding: 1.6rem 2rem 3rem;
}

.painel-principal .title.text-title {
  color: #fff !important;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 900 !important;
  font-size: 1.7rem !important;
  text-wrap: balance;
  border-bottom: 3px solid var(--amarelo);
  padding-bottom: 0.8rem;
  margin-bottom: 0.6rem !important;
}

.painel-principal .text-subtitle {
  color: var(--amarelo) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem !important;
}

.painel-principal .data-hora {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #fff !important;
}

#relogio { color: var(--amarelo) !important; }

/* Cada bloco (Parlamentares / Cronômetros / Resultado / Matéria) vira um card */
.painel-principal .painel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 4px solid var(--azul);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-top: 1rem !important;
}

.painel-principal .text-value {
  color: #e8eef7 !important;
  font-size: 1.05rem;
}

/* Lista de parlamentares: cada linha vira uma pílula com trilho colorido —
   mais legível de longe do que só a cor do texto (JS já pinta font color
   verde/vermelho/branco conforme o voto; aqui só reforçamos com fundo). */
.painel-principal #parlamentares_list tr {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border-left: 4px solid rgba(255, 255, 255, 0.25);
  margin-bottom: 0.25rem;
  background: rgba(255, 255, 255, 0.03);
}

.painel-principal #parlamentares_list td { padding-right: 0 !important; font-weight: 700; }
.painel-principal #parlamentares_list td:first-child { flex: 1 1 auto; }

/* Cronômetros e placar em destaque — números grandes, tabulares */
#box_cronometros, #box_votacao {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.15rem !important;
  line-height: 1.9;
}

#box_votacao li { list-style: none; }

.painel-principal .btn-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

#resultado_votacao { font-weight: 900 !important; font-size: 1.3rem !important; }