*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --blue-dark:   #003087;
  --blue-mid:    #0050a0;
  --blue-light:  #e8f0fb;
  --green:       #4caf50;
  --yellow:      #ffc107;
  --orange:      #ff9800;
  --red:         #e53935;
  --gray-100:    #f5f6fa;
  --gray-200:    #e9ecef;
  --gray-400:    #adb5bd;
  --gray-700:    #495057;
  --gray-900:    #212529;
  --text:        #2d3748;
  --border:      #dee2e6;
  --shadow:      0 2px 8px rgba(0,0,0,.08);
  --radius:      6px;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  background: var(--gray-100);
  color: var(--text);
  min-height: 100vh;
}

/* ── HEADER ────────────────────────────────────────────── */
header {
  background: var(--blue-dark);
  color: #fff;
  margin: 20px 20px 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  gap: 16px;
}

.header-title h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.3;
}

.header-logo {
  flex-shrink: 0;
}

.logo-img {
  height: 68px;
  width: auto;
  display: block;
  border-radius: 4px;
}

.header-stripe {
  display: flex;
  height: 5px;
}
.stripe       { flex: 1; }
.stripe.blue  { background: #1565c0; }
.stripe.green { background: #43a047; }
.stripe.yellow{ background: #fdd835; }
.stripe.orange{ background: #fb8c00; }

/* ── MAIN ──────────────────────────────────────────────── */
main {
  max-width: 100%;
  padding: 16px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── FILTROS ───────────────────────────────────────────── */
.filters-section {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px 20px;
  border: 1px solid var(--border);
}

.filters-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
}

.filters-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filters-toggle {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color .12s;
}
.filters-toggle:hover { color: var(--blue-dark); }

.filters-body {
  padding-top: 4px;
}

.filters-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 14px 20px;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.filter-group select {
  padding: 7px 26px 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 8px center;
  appearance: none;
  cursor: pointer;
}

.filter-group select.is-placeholder { color: var(--gray-400); }
.filter-group select option         { color: var(--text); }

.filter-group select:focus {
  outline: none;
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 3px rgba(0,80,160,.12);
}

.filter-range .range-inputs {
  font-size: 12px;
  color: var(--blue-dark);
  font-weight: 600;
}

/* ── SearchableSelect ──────────────────────────────────── */
.ss-wrap {
  position: relative;
  width: 100%;
}

.ss-display {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 8px center;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.ss-display.is-placeholder { color: var(--gray-400); }
.ss-display.ss-open {
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 3px rgba(0,80,160,.12);
}

.ss-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  z-index: 300;
}

.ss-search {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  outline: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.ss-list {
  max-height: 220px;
  overflow-y: auto;
}

.ss-item {
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.ss-item:hover    { background: var(--blue-light); }
.ss-item.ss-selected {
  background: var(--blue-light);
  color: var(--blue-dark);
  font-weight: 600;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 1px;
}

.btn-limpar {
  padding: 7px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.btn-limpar:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}

.btn-aplicar {
  padding: 7px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--blue-mid);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.btn-aplicar:hover { background: var(--blue-dark); }

input[type="range"] {
  width: 100%;
  accent-color: var(--blue-mid);
  cursor: pointer;
  margin-top: 6px;
}

.filter-check {
  justify-content: flex-end;
  padding-bottom: 2px;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: .3px;
  text-transform: uppercase;
}

.check-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--blue-mid);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── TABELA ────────────────────────────────────────────── */
.table-section {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 540px;
}

.search-box input {
  width: 100%;
  padding: 8px 64px 8px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
}

.search-box input:focus {
  outline: none;
  border-color: var(--blue-mid);
  box-shadow: 0 0 0 3px rgba(0,80,160,.12);
}

.search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 3px;
}
.search-clear:hover { color: var(--red); background: #fff0f0; }

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.table-count {
  font-size: 13px;
  color: var(--gray-600, #555);
  font-weight: 600;
  white-space: nowrap;
}

/* ── SELETOR DE COLUNAS ────────────────────────────────── */
.col-toggle-wrap {
  position: relative;
}

.btn-colunas {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all .12s;
}
.btn-colunas:hover {
  background: var(--blue-light);
  border-color: var(--blue-mid);
}
.btn-colunas.active {
  background: var(--blue-dark);
  color: #fff;
  border-color: var(--blue-dark);
}

.col-toggle-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 100;
  width: 260px;
  padding: 10px 0 6px;
}

.col-toggle-actions {
  display: flex;
  gap: 6px;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
}

.col-toggle-actions button {
  flex: 1;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  color: var(--blue-dark);
  transition: background .1s;
}
.col-toggle-actions button:hover {
  background: var(--blue-light);
}

.col-toggle-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 6px 0;
}

.col-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  user-select: none;
  transition: background .1s;
}
.col-toggle-item:hover { background: var(--gray-100); }
.col-toggle-item.fixed { color: var(--gray-400); cursor: default; }
.col-toggle-item.fixed:hover { background: none; }

.col-toggle-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue-mid);
  flex-shrink: 0;
}

.col-toggle-item .col-label { flex: 1; }
.col-toggle-item .col-fixed-tag {
  font-size: 10px;
  color: var(--gray-400);
  font-style: italic;
}

.table-wrapper { overflow-x: auto; }

/* Coluna olho */
.col-eye-th {
  background: #e8e8e8;
  color: #666;
  text-align: center;
  padding: 0 8px;
  width: 36px;
  min-width: 36px;
  vertical-align: middle;
  font-size: 14px;
  border-right: 1px solid #d0d0d0;
  border-bottom: 2px solid #c0c0c0;
}
.col-eye { text-align: center; padding: 4px 6px; }
.btn-eye {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  opacity: .55;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: opacity .15s;
}
.btn-eye:hover { opacity: 1; background: var(--blue-light); }

/* Ver mais */
.btn-ver-mais {
  background: none;
  border: none;
  color: #1a6bb5;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 1px 0;
  text-decoration: underline;
  display: block;
  margin-top: 2px;
}
.btn-ver-mais:hover { color: #003087; }

/* Coluna CNPJ */
.col-cnpj { min-width: 150px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── Nível 1: Grupos institucionais ───────────────────── */
tr.group-header-row th {
  padding: 8px 14px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap !important;
  border-right: 2px solid rgba(255,255,255,.5);
}
tr.group-header-row th:last-child { border-right: none; }

.group-assembleia { background: #f8cecc; color: #7b2222; border-bottom: 2px solid #f0a0a0; }
.group-governo    { background: #fff2cc; color: #7b5c00; border-bottom: 2px solid #f0d060; }
.group-orgao      { background: #d9f0e4; color: #1a5c3a; border-bottom: 2px solid #90d4b0; }

/* ── Nível 2: Sub-títulos das seções ──────────────────── */
tr.subgroup-header-row th {
  padding: 5px 14px;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  font-style: italic;
  white-space: nowrap !important;
  border-right: 2px solid rgba(255,255,255,.5);
}
tr.subgroup-header-row th:last-child { border-right: none; }

.subgroup-assembleia { background: #f5b0b0; color: #7b2222; font-style: italic; }
.subgroup-governo    { background: #ffe699; color: #7b5c00; font-style: italic; }
.subgroup-orgao      { background: #b7dece; color: #1a5c3a; font-style: italic; }

/* ── Nível 3: Nomes das colunas ───────────────────────── */
tr.col-header-row {
  background: #f0f0f0;
  color: #2d3748;
}

tr.col-header-row th {
  text-align: center;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2px;
  white-space: nowrap !important;
  overflow: hidden;
  border-right: 1px solid #d0d0d0;
  border-bottom: 2px solid #c0c0c0;
}
tr.col-header-row th:last-child { border-right: none; }

/* Separador entre grupos (antes da 1ª col de GOVERNO e ÓRGÃO) */
tr.col-header-row th:nth-child(7),
tr.col-header-row th:nth-child(19) {
  border-left: 2px solid #aaa !important;
}

tbody tr {
  border-bottom: 1px solid var(--gray-200);
  transition: background .1s;
}

tbody tr:hover { background: var(--blue-light) !important; }

tbody td {
  padding: 8px 10px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Cores de linha por status */
tr.row-sem-disp  { background: #fde8e8; }
tr.row-execucao  { background: #fffce8; }
tr.row-concluido { background: #e8f5e9; }
tr.row-pendente  { background: #fff8e1; }

/* Larguras de coluna */
.col-emenda   { min-width: 170px; white-space: nowrap; }
.col-parlamentar { min-width: 150px; }
.col-objeto   { min-width: 260px; }
.col-valor    { min-width: 110px; text-align: right; }
.col-tipo     { min-width: 120px; }
.col-area     { min-width: 130px; }
.col-orgao    { min-width: 150px; }
.col-monitor  { min-width: 200px; }
.col-money    { min-width: 100px; text-align: right; white-space: nowrap; }
.col-restos   { min-width: 110px; }
.col-ninstr   { min-width: 120px; }
.col-tinstr   { min-width: 130px; }
.col-repasse  { min-width: 110px; }
.col-mun      { min-width: 120px; }
.col-loc      { min-width: 180px; }
.col-benef    { min-width: 260px; }
.col-detal    { min-width: 180px; }
.col-prest    { min-width: 240px; }
.col-meta     { min-width: 130px; }
.col-crono    { min-width: 130px; }
.col-pagt     { min-width: 140px; }
.col-sit      { min-width: 160px; }

.money-cell {
  font-weight: 600;
  color: var(--blue-dark);
  text-align: right;
}

.valor-cell {
  font-weight: 700;
  color: var(--blue-dark);
  text-align: right;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.badge-green  { background: #d4edda; color: #155724; }
.badge-red    { background: #f8d7da; color: #721c24; }
.badge-yellow { background: #fff3cd; color: #856404; }
.badge-blue   { background: #cce5ff; color: #004085; }
.badge-gray   { background: var(--gray-200); color: var(--gray-700); }

td.loading, td.empty {
  text-align: center;
  padding: 48px;
  color: var(--gray-400);
  font-size: 14px;
}

/* ── PAGINAÇÃO ─────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}

.page-showing {
  font-size: 12px;
  color: var(--gray-700);
  font-weight: 500;
}

.page-btns {
  display: flex;
  gap: 4px;
  align-items: center;
}

.page-btn {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
}

.page-btn:hover:not(:disabled) {
  background: var(--blue-light);
  border-color: var(--blue-mid);
  color: var(--blue-dark);
}

.page-btn.active {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
  min-width: 32px;
  pointer-events: none;
}

.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--blue-dark);
  color: #fff;
  flex-shrink: 0;
}

.modal-header h2 {
  font-size: 15px;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  transition: color .12s;
}
.modal-close:hover { color: #fff; }

.modal-body {
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--gray-100);
  border-radius: 4px;
  border-left: 3px solid var(--blue-mid);
}

.modal-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gray-700);
}

.modal-value {
  font-size: 12.5px;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 900px) {
  .filters-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .header-title h1 { font-size: 15px; }
  .filters-grid { grid-template-columns: 1fr; }
  main { padding: 12px 10px 32px; }
}

/* Colunas com valores centralizados */
#main-table tbody tr td:nth-child(2),   /* N° Emenda */
#main-table tbody tr td:nth-child(3),   /* Parlamentar */
#main-table tbody tr td:nth-child(6),   /* Tipo Emenda */
#main-table tbody tr td:nth-child(7),   /* Função */
#main-table tbody tr td:nth-child(8),   /* Órgão Concedente */
#main-table tbody tr td:nth-child(9),   /* Monitoramento */
#main-table tbody tr td:nth-child(17),  /* N° Instrumento */
#main-table tbody tr td:nth-child(18),  /* Tipo Instrumento */
#main-table tbody tr td:nth-child(20),  /* Município */
#main-table tbody tr td:nth-child(21),  /* Localidade */
#main-table tbody tr td:nth-child(23),  /* Detalhamento do Objeto */
#main-table tbody tr td:nth-child(24),  /* Prestador de Serviço / CNPJ */
#main-table tbody tr td:nth-child(25),  /* Metas Previstas */
#main-table tbody tr td:nth-child(26),  /* Metas Realizadas */
#main-table tbody tr td:nth-child(27),  /* Cronograma Inicial */
#main-table tbody tr td:nth-child(28),  /* Cronograma Final */
#main-table tbody tr td:nth-child(29),  /* Pagamentos */
#main-table tbody tr td:nth-child(30)   /* Situação Atual */
{
  text-align: center;
}

.filter-check-row {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

/* ── Botões de exportação ── */
.export-wrap {
  display: flex;
  gap: 6px;
}

.btn-export {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: #1a7a3a;
  color: #fff;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}

.btn-export:hover { background: #145e2c; }
.btn-export:disabled { opacity: .55; cursor: not-allowed; }