/* --- Cabeçalho --- */
.page-header {
  width: 100%;
  background-color: #ffffff; /* Fundo branco */
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.page-header .container { max-width: 100%; padding: 0 1.5rem; }
.page-header header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
}
/* ===== Logos ===== */
/* FNP: volta ao comportamento original (auto) e limite de altura maior */
.page-header .logo-fnp{
  height: auto;
  width: auto;
  max-height: 60px;   /* era assim antes — mantém o “tamanho certo” */
  margin-right: 12px;
}

/* IFEM: acompanha a FNP, mas SEM forçar largura */
.page-header .logo-ifem {
  height: 84px;      
  width: auto;
  margin-right: 12px;
  object-fit: contain;
  display: inline-block; /* garante que não colapse */
}

/* ===== Menu (restaura tipografia e cores) ===== */
.page-header .nav { display:flex; justify-content:center; gap:2rem; flex:1; }

/* texto normal: cinza escuro; peso 600 (como antes) */
.page-header .nav-link{
  color:#333;               /* volta do cinza escuro */
  font-weight:600;          /* reforça a tipografia que “sumiu” */
  padding:6px 12px;
  border-radius:6px;
  transition:all .2s ease;
}

/* hover: fundo levemente azulado e texto no azul do tema */
.page-header .nav-link:hover{
  background-color:rgba(25,70,133,.12);
  color:#194685 !important; /* azul correto do tema */
}

/* ativo: pílula azul do tema com texto branco */
.page-header .nav-link.active{
  background-color:#194685; /* azul correto */
  color:#fff !important;
}

/* ===== Mobile ===== */
@media (max-width:768px){
  .page-header header{ flex-direction:column; gap:.5rem; }
  .page-header .nav{ gap:1rem; }
  .page-header .logo-fnp,
  .page-header .logo-ifem{
    max-height:50px;        /* menor para telas estreitas */
  }
}



/* Estilo de botão da marca: só quando for explicitamente .btn-fnp ou .btn-primary */
.btn-fnp,
.btn-primary {
  background-color: #194685 !important;
  border-color: #194685 !important;
  color: #fff !important;
}

/* Não pintar todos os outline como azul — manter padrão Bootstrap */
.btn-outline-secondary {
  background-color: #fff !important;
  color: #6c757d !important;
  border-color: #6c757d !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
  border-color: #6c757d !important;
  box-shadow: none !important;
}

/* ============== FNP THEME (global) ============== */
:root{
  --bs-body-bg:#dde4ed !important;
  --bs-border-color:#dee2e6 !important;
  --fnp-blue:#194685 !important;
  --fnp-yellow:#efae17 !important;
  --card-radius:8px;
}

/* Layout base (neutro) */
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:var(--bs-body-bg);
  color:#111827;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* rolagem só nos filhos */
}

/* Content wrapper padrão (Home, Detail, Mapa) – neutro */
.content-wrapper,.detail-wrapper{ display:flex; flex:1; overflow:hidden; }
/* Coluna da direita (conteúdo rolável) – neutro */
.dashboard-content,.detail-content,.main-content{ flex:1; padding:1.5rem; overflow-y:auto; }

/* Sidebar padronizada (container) */
.sidebar,
.filters-sidebar{
  width: 280px;
  flex-shrink: 0;
  padding: 1.5rem;
  background: #fff;
  border-right: 1px solid var(--bs-border-color);
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(25,70,133,.12);
}

/* Quando houver um wrapper interno com id="filters", ele NÃO é container */
#filters{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
}

.sidebar h4,#filters h4{font-size:1.25rem;color:var(--fnp-blue)}
.sidebar hr,#filters hr{margin:1rem 0 1.5rem;border-top:1px solid rgba(0,0,0,.1)}
.sidebar .filter-group,#filters .filter-group{margin-bottom:1.25rem}
.sidebar label,#filters label{font-weight:500;margin-bottom:.5rem;color:var(--fnp-blue)}

/* Campos da sidebar – mantém setinha (usa .form-select se disponível) */
.sidebar select,#filters select{
  height:calc(1.8125rem + 2px);
  padding:.25rem .5rem;
  font-size:.875rem;
  background-color:#fff;
  border:1px solid var(--bs-border-color);
  border-radius:.25rem;
}
/* Força a setinha se estiver usando .form-select (Bootstrap) */
.form-select {
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23194685' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem; /* espaço pra seta */
}

/* Botão “Limpar filtros” padrão (opt-in por id) */
#btn-limpar-filtros{
  width:100%;
  background:var(--fnp-blue);
  border-color:var(--fnp-blue);
  color:#fff;
}
#btn-limpar-filtros:hover{filter:brightness(.95)}

/* Cartões / seções – utilitário de card compartilhado */
.app-shadow-card,
.kpi-card,.metric-card,.summary-card,.chart-card,.table-card,
.section-card,.panel,.box{
  background:#fff;
  border-radius:var(--card-radius);
  box-shadow:0 4px 8px rgba(0,0,0,.08);
  border:1px solid transparent;
}
.kpi-card:hover{transform:translateY(-3px);transition:.2s}
.kpi-card h6{color:#6c757d;font-size:.9rem;margin-bottom:.25rem}
.kpi-card .value{font-size:1.5rem;font-weight:600;color:var(--fnp-blue)}

.chart-card h5,.table-card h5,.section-card h5,.panel h5,.box h5{
  margin-bottom:1rem; font-size:1.15rem; color:var(--fnp-blue);
  display:flex; justify-content:space-between; align-items:center;
}

/* Toggle “segmentado” retangular (compartilhado) */
.segmented,
#valor-toggle.segmented{
  display:inline-flex; align-items:center; background:#fff;
  border:1px solid #d9dee7; border-radius:6px; padding:0; overflow:hidden;
}
.segmented .segmented-option,
#valor-toggle .segmented-option{
  appearance:none; background:transparent; border:0; margin:0;
  padding:8px 14px; border-radius:0; font-weight:700; font-size:.9rem; line-height:1;
  cursor:pointer; color:var(--fnp-blue);
}
.segmented .segmented-option + .segmented-option,
#valor-toggle .segmented-option + .segmented-option{ border-left:1px solid #e5e7eb; }
.segmented .segmented-option.active,
#valor-toggle .segmented-option.active{ background:var(--fnp-blue); color:#fff; box-shadow:none; }
.segmented .segmented-option:focus-visible,
#valor-toggle .segmented-option:focus-visible{ outline:2px solid var(--fnp-blue); outline-offset:2px; }

/* Destaque sincronizado de tabelas (Home) */
.highlight  {background:#194685 !important;color:#fff !important;font-weight:bold;transition:.15s}
.highlight2 {background:#efae17 !important;color:#000 !important;font-weight:bold;transition:.15s}

/* Componentes do Detail (não-invasivos) */
.toggle-heading,.toggle-subheading{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.toggle-subheading{padding:.5rem 0}
.toggle-heading .arrow,.toggle-subheading .arrow{transition:transform .2s}
.toggle-heading.open .arrow,.toggle-subheading.open .arrow{transform:rotate(90deg)}
.ranking-indicator-container{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.ranking-indicator{width:14px;height:14px;border-radius:3px}
.quintil-1{background:#d73027}.quintil-2{background:#fc8d59}.quintil-3{background:#fee08b}.quintil-4{background:#91cf60}.quintil-5{background:#1a9850}
.ranking-tooltip{visibility:hidden;background:#333;color:#fff;text-align:center;border-radius:6px;padding:5px 8px;position:absolute;z-index:10;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .3s;white-space:nowrap;font-size:.75rem}
.ranking-indicator-container:hover .ranking-tooltip{visibility:visible;opacity:1}

/* Responsivo — sidebar em cima no mobile */
@media (max-width: 767.98px){
  .sidebar,#filters,.filters-sidebar{
    width:100%;max-height:50vh;border-right:none;border-bottom:1px solid var(--bs-border-color);padding-bottom:1rem;
  }
  .content-wrapper,.detail-wrapper{flex-direction:column}
}

/* =================== Filtros (unificados como no Mapa) =================== */
/* Mesma aparência para sidebars de todas as páginas (Gráfica, Municipal, Mapa) */

/* Container dos filtros já é branco; garantimos consistência */
.sidebar,
.filters-sidebar{
  background:#fff;
  border-right:1px solid var(--bs-border-color);
  box-shadow:2px 0 5px rgba(25,70,133,.12);
}

/* Títulos e espaçamento entre grupos */
.sidebar .filter-group,
#filters .filter-group,
.filters-sidebar .filter-group{
  margin:0 0 1.25rem 0;
}
.sidebar .form-label,
#filters .form-label,
.filters-sidebar .form-label{
  display:block;
  margin:0 0 .5rem .125rem;
  color:#194685;
  font-weight:500;
}

/* Campos padrão: SEM fundo azul, fundo branco + borda neutra */
.sidebar .form-select,
#filters .form-select,
.filters-sidebar .form-select,
.sidebar select,
#filters select,
.filters-sidebar select,
.sidebar .form-control,
#filters .form-control,
.filters-sidebar .form-control{
  width:100%;
  box-sizing:border-box;
  height:calc(1.8125rem + 2px);
  padding:.25rem .5rem;
  font-size:.875rem;
  background:#fff;                         /* <-- Branco */
  border:1px solid var(--bs-border-color); /* <-- Borda clara */
  color:inherit;
}

/* --- Lupa ao lado do <select> (layout igual ao do Mapa) --- */
.sidebar .input-group,
#filters .input-group,
.filters-sidebar .input-group{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;           /* não quebra a lupa pra baixo */
}

/* Select dentro do input-group não força 100% */
.sidebar .input-group .form-select,
#filters .input-group .form-select,
.filters-sidebar .input-group .form-select,
.sidebar .input-group select,
#filters .input-group select,
.filters-sidebar .input-group select{
  flex:1 1 0;
  width:auto !important;      /* vence width:100% herdado */
  min-width:0;                /* evita overflow */
}

/* Botão da lupa colado ao select */
.sidebar .input-group > .btn,
#filters .input-group > .btn,
.filters-sidebar .input-group > .btn{
  flex:0 0 auto;
  padding:.25rem .5rem;       /* casa com input-group-sm */
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  white-space:nowrap;
  line-height:1;
}

/* Responsivo: quando a sidebar sobe pro topo, mantém o look */
@media (max-width: 767.98px){
  .sidebar,#filters,.filters-sidebar{
    width:100%;
    max-height:50vh;
    border-right:none;
    border-bottom:1px solid var(--bs-border-color);
  }
}

/* ====== Padronização do Modal de Busca (command palette) ====== */
#search-modal .modal-dialog { max-width: 720px; }
#search-modal .modal-content {
  background: #fff;                 /* força fundo branco */
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  overflow: hidden;
}
#search-modal .modal-header {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  padding: .6rem .75rem;
}
#search-modal .modal-header .form-control {
  background: #fff;
  border: 1px solid #dee2e6;
  color: #111827;
}
#search-modal .modal-body { padding: 0; background: #fff; }

/* Lista padronizada: branco + separadores como no mapa */
#search-modal .list-group { border-radius: 0; }
#search-modal .list-group-item {
  background: #fff;                 /* NÃO herda --bs-body-bg */
  color: #111827;
  border-color: #eef0f2;            /* separador mais sutil */
  padding: .8rem 1rem;
}
#search-modal .list-group-item:first-child {
  position: sticky; top: 0; z-index: 1;
  background: #fff;                 /* “Todos” gruda no topo */
  border-top: 0;
}
#search-modal .list-group-item:hover,
#search-modal .list-group-item:focus {
  background: #f7f9fc;              /* hover discreto */
}

/* Botão de fechar mantém estilo clean */
#search-modal .btn-close {
  filter: none;
  opacity: .6;
}
#search-modal .btn-close:hover { opacity: 1; }

/* Corrige backdrop muito escuro em alguns temas */
.modal-backdrop.show { background: #000; opacity: .35; }

/* ===== Tooltips — tema escuro padrão (igual aos cards pretos) ===== */
.tooltip {
  z-index: 2000; /* acima de headers/cards */
}

.tooltip .tooltip-inner {
  background: rgba(51,51,51,.95);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .875rem;         /* ~14px */
  line-height: 1.25;
  max-width: 320px;           /* textos longos */
  white-space: normal;        /* permite quebra de linha */
  text-align: left;           /* leitura melhor para textos grandes */
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* setinha nas quatro direções */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: rgba(51,51,51,.95);
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: rgba(51,51,51,.95);
}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: rgba(51,51,51,.95);
}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: rgba(51,51,51,.95);
}