/* css/themes.css - VERSÃO ATUALIZADA PARA WHITE LABEL */

/* 1. TEMA PADRÃO (LIGHT / ORIGINAL) */
/* Dark Mode OpenLayers Base Map Filter (High-contrast dark mode with unlimited zoom) */
.ol-tile-dark-theme,
.ol-tile-dark-auto,
body.dark-theme .ol-tile-dark-auto,
.dark-theme .ol-tile-dark-auto,
#dashMap .ol-layer,
#solarMap .ol-layer,
#infraMap .ol-layer {
  filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(90%) !important;
}

:root {
  --primary-color: #0056b3;
  --primary-hover: #004494;
  --secondary-color: #2c3e50;
  --accent-color: #e67e22;

  --bg-body: #f4f6f9;
  --bg-panel: #ffffff;
  --bg-light: #f8f9fa;
  --bg-hover: #e9ecef;

  --text-main: #333333;
  --text-light: #6c757d;
  --text-inverse: #ffffff;

  --border-color: #dee2e6;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --bg-highlight: #fffde7;
  --text-highlight: #333;
  --title-section: #555555;
  /* Cinza escuro forte para os textos de entrada do menu pesquisa */
  --heading-context-color: var(--primary-color);

  /* --- VARIÁVEIS ESPECÍFICAS PARA O HEADER (WHITE LABEL) --- */
  /* Separamos o header do painel para permitir cores diferentes */
  --header-bg: #ffffff;
  /* Padrão Light */
  --header-text-color: #2c3e50;
  /* Padrão Light */

  /* Variáveis da caixinha de coordenadas e escala */
  --bg-map-overlay: rgba(255, 255, 255, 0.95);
  --text-map-overlay: #333333;
  --border-map-overlay: #bbbbbb;

  /* Botões Secundários */
  --btn-sec-bg: #ffffff;
  --btn-sec-text: #495057;
  --btn-sec-border: #ced4da;
  --btn-sec-hover: #f8f9fa;

  /* Containers Internos */
  --bg-input: #ffffff;
  --border-input: #ced4da;
  --bg-inner-container: #ffffff;
  --bg-stat-box: #f8f9fa;
}

/* 2. TEMA ESCURO (DARK GRAY) */
[data-theme="dark"] {
  --primary-color: #4da3ff;
  --primary-hover: #7dc0ff;
  --secondary-color: #ecf0f1;
  --accent-color: #f39c12;

  --bg-body: #121212;
  --bg-panel: #1e1e1e;
  --bg-light: #2c2c2c;
  --bg-hover: #333333;

  --text-main: #e0e0e0;
  --text-light: #b0b0b0;
  --text-inverse: #121212;

  --border-color: #444444;
  --bg-highlight: #3d3d29;
  --text-highlight: #ffffcc;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --title-section: #adb5bd;
  /*para as cores dos textos do menu de pesquisa*/

  /* --- HEADER ESCURO --- */
  --header-bg: #1e1e1e;
  --header-text-color: #e0e0e0;

  --bg-map-overlay: rgba(44, 44, 44, 0.95);
  --text-map-overlay: #e0e0e0;
  --border-map-overlay: #555555;

  --btn-sec-bg: #2b2b2b;
  --btn-sec-text: #e0e0e0;
  --btn-sec-border: #444444;
  --btn-sec-hover: #3d3d3d;

  --bg-input: #2b2b2b;
  --border-input: #555555;
  --bg-inner-container: #1e1e1e;
  --bg-stat-box: #2c2c2c;
  --btn-action-color: #f1c40f;
  /* (Define o Amarelo para o botão no escuro): */
}

/* --- Dark Theme: Tabela de Simulação de Enchentes --- */
[data-theme="dark"] #sim-data-table,
[data-theme="dark"] #sim-data-table tbody,
[data-theme="dark"] #sim-data-table tr,
[data-theme="dark"] #sim-data-table td,
[data-theme="dark"] #sim-data-table th {
  background-color: var(--bg-panel) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] #sim-data-table thead {
  background-color: var(--bg-body) !important;
}
[data-theme="dark"] #sim-data-table thead th {
  background-color: var(--bg-body) !important;
}
[data-theme="dark"] #sim-data-table tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

/* Row selecionada na tabela de simulação (todos os temas) */
#sim-data-table tr.sim-row-selected {
  background-color: rgba(13, 110, 253, 0.15) !important;
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}
[data-theme="dark"] #sim-data-table tr.sim-row-selected {
  background-color: rgba(77, 163, 255, 0.2) !important;
}

/* --- Dark Theme: Legenda Inline e Camadas do Usuário --- */
[data-theme="dark"] .inline-legend {
  background: var(--bg-panel);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .inline-legend span,
[data-theme="dark"] .inline-legend label {
  color: var(--text-main) !important;
}

/* Imagens de legenda WMS (GeoServer): fundo branco com bordas arredondadas */
[data-theme="dark"] .inline-legend img {
  background: #fff;
  border-color: var(--border-color);
  padding: 4px;
  border-radius: 6px;
}

/* --- Dark Theme: Modal Simulação Planialtimétrica --- */
[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#fffbf2"],
[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#ffeeba"] {
  background: #2b2519 !important;
  border-color: #5c4a28 !important;
}

[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#fffbf2"]
  div[style*="#856404"],
[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#ffeeba"]
  div[style*="#856404"] {
  color: #e8b93c !important;
}

[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#fffbf2"]
  div[style*="color: #856404"],
[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#ffeeba"]
  div[style*="color: #856404"] {
  color: #cfae6a !important;
}

[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#f0f7ff"],
[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#b8daff"] {
  background: #1a2636 !important;
  border-color: #2b4a72 !important;
}

[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#f0f7ff"]
  div[style*="#004085"],
[data-theme="dark"]
  #buffer-elevation-modal
  .csv-modal-body
  > div[style*="#b8daff"]
  div[style*="#004085"] {
  color: #6db3f2 !important;
}

/* Caixas de cor (MANCHA PRINCIPAL + ENTORNO BUFFER) */
[data-theme="dark"] #buffer-elevation-modal #elevBufferColorSection,
[data-theme="dark"]
  #buffer-elevation-modal
  #elevBufferColorSection
  ~ div[style*="#fafafa"],
[data-theme="dark"]
  #buffer-elevation-modal
  div[style*="gap: 10px; margin-top: 5px"]
  > div[style*="#fafafa"] {
  background: #2b2d31 !important;
  border-color: #555 !important;
}

[data-theme="dark"] #buffer-elevation-modal #elevBufferColorSection span,
[data-theme="dark"] #buffer-elevation-modal #elevBufferColorSection div,
[data-theme="dark"]
  #buffer-elevation-modal
  div[style*="gap: 10px; margin-top: 5px"]
  > div[style*="#fafafa"]
  span,
[data-theme="dark"]
  #buffer-elevation-modal
  div[style*="gap: 10px; margin-top: 5px"]
  > div[style*="#fafafa"]
  div {
  color: #e0e0e0 !important;
}

[data-theme="dark"]
  #buffer-elevation-modal
  #elevBufferColorSection
  div[style*="#d84315"] {
  color: #ff8a65 !important;
}

[data-theme="dark"]
  #buffer-elevation-modal
  div[style*="background: #f0f7ff"][style*="border: 1px solid #b8daff"] {
  background: #1a2636 !important;
  border-color: #2b4a72 !important;
}

[data-theme="dark"] #buffer-elevation-modal div[style*="color:#004085"],
[data-theme="dark"] #buffer-elevation-modal label[style*="color:#004085"] {
  color: #6db3f2 !important;
}

[data-theme="dark"] #buffer-elevation-modal input.filter-input,
[data-theme="dark"] #buffer-elevation-modal select.filter-select {
  background: var(--bg-input) !important;
  color: var(--text-main) !important;
  border-color: var(--border-input) !important;
}

[data-theme="dark"] #buffer-elevation-modal input[style*="color:#d84315"] {
  color: #ff8a65 !important;
  border-color: #5c4a28 !important;
}

/* 3. TEMA OFICIAL (CLIENTE / WHITE LABEL) - UNIFICADO */
[data-theme="official"] {
  /* --- 1. VARIÁVEIS ESTRUTURAIS (Base Limpa/Light) --- */
  --bg-body: #f4f6f9;
  --bg-panel: #ffffff;
  --bg-light: #f8f9fa;
  --bg-hover: #e9ecef;
  --bg-input: #ffffff;
  --bg-inner-container: #ffffff;
  --bg-stat-box: #f8f9fa;

  --text-main: #333333;
  --text-light: #6c757d;
  --border-color: #dee2e6;
  --border-input: #ced4da;
  --title-section: var(--secondary-color);
  /* Pega a cor da marca secundária definida no config.js */
  --heading-context-color: var(--secondary-color);

  /* --- 2. VARIÁVEIS DE IDENTIDADE (Gerenciadas pelo JS) --- */
  /* O JS vai injetar as cores reais aqui. Estes são fallbacks. */
  --header-bg: var(--primary-color);
  --header-text-color: #ffffff;

  /* --- 3. VARIÁVEIS DE MAPA (Coordenadas e Escala) --- */
  /* Usam a cor do cliente para bordas e texto */
  --bg-map-overlay: rgba(255, 255, 255, 0.95);
  --text-map-overlay: #333333;
  --border-map-overlay: #999999;

  /* --- 4. AJUSTES ESPECÍFICOS DE INTERFACE --- */

  /* Botão "Limpar Destaques" (Estilo Fantasma) */
  .btn-limpar-destaque {
    background-color: transparent !important;
    border: 1px solid var(--btn-action-color) !important;
    color: var(--btn-action-color) !important;
  }

  /* Modal de Impressão (Títulos na cor da marca) */
  #print-settings-modal h3 {
    color: var(--primary-color) !important;
    border-bottom-color: var(--border-color) !important;
  }

  /* Botão de Confirmação de Impressão */
  #btnConfirmPrint {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
  }

  #btnConfirmPrint:hover {
    background-color: var(--primary-hover) !important;
  }

  /* Select2 (Itens selecionados na cor da marca) */
  .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
  }

  /* Containers de Estilo e Temático */
  .style-controls,
  .thematic-card:last-child {
    background-color: var(--bg-stat-box) !important;
    border-color: var(--border-color) !important;
  }

  .thematic-card h5 {
    color: var(--secondary-color) !important;
  }

  /* --- 5. BOTÕES DE AÇÃO (BUSCAR/IR) COM CONTRASTE INTELIGENTE --- */
  /* Usa a variável --text-on-primary calculada pelo JS (Preto ou Branco) */

  .btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
    /* Mágica do contraste aqui */
  }

  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:focus-visible,
  .btn-primary:active,
  .btn-primary:not(:disabled):active {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--text-on-primary) !important;
    /* Mantém legível no hover */
    background-image: none !important;
    filter: brightness(0.95);
    /* Escurece levemente para dar efeito de clique */
    outline: none !important;
    box-shadow: none !important;
  }

  /* Garante que os ícones (lupa/alfinete) obedeçam o contraste */
  .btn-primary i {
    color: var(--text-on-primary) !important;
  }

  /* --- 6. CORREÇÃO DAS ABAS LATERAIS (Texto Legível) --- */
  /* A aba ativa usa uma versão escurecida da cor se ela for muito clara */
  .tab.active {
    color: var(--tab-active-color) !important;
    border-bottom-color: var(--tab-active-color) !important;
  }

  /* Ao passar o mouse na aba inativa */
  .tab:hover {
    color: var(--tab-active-color) !important;
  }
}

/* --- CSS PARA OS GRÁFICOS DO PAINEL, DE ACORDO COM O TEMA--- */

/* 1. Melhora a leitura dos números no painel lateral */
.chart-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.stat-box {
  text-align: center;
}

/* Deixa o número GRANDE e com a cor do tema (Branco no escuro) */
.stat-val {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-main) !important;
}

/* Deixa o texto descritivo um pouco mais suave */
.stat-box p {
  font-size: 11px;
  color: var(--text-light) !important;
  margin: 0;
}

/* 2. Estilo do Botão "Limpar Destaques" */
/* No tema claro (padrão), ele é amarelinho */
.btn-limpar-destaque {
  width: 100%;
  margin-bottom: 15px;
  border: 1px solid #f1c40f !important;
  background-color: #fffde7 !important;
  color: #333 !important;
  transition: all 0.3s;
}

/* No tema escuro, forçamos ele a ficar transparente com texto branco */
[data-theme="dark"] .btn-limpar-destaque {
  background-color: transparent !important;
  border-color: #f1c40f !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-limpar-destaque:hover {
  background-color: rgba(241, 196, 15, 0.2) !important;
}

/* --- CORREÇÃO DO MENU "COR DO RAIO" para alternar as cores --- */
.color-picker-menu {
  /* Cores do tema (Mantém o fix do modo escuro) */
  background-color: var(--bg-panel) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 15px var(--shadow-color) !important;

  /* Posicionamento: Ancorado na direita para não invadir o botão de fechar */
  position: absolute;
  top: 100%;
  right: -5px !important;
  /* Alinha com o canto direito do botão */
  left: auto !important;
  /* Anula qualquer alinhamento à esquerda */
  transform: none !important;
  /* Remove a centralização que causou o erro */

  z-index: 2000;
  padding: 10px;
  border-radius: 6px;
  min-width: 120px;
  width: max-content;
  text-align: center;
  margin-top: 5px;
}

/* Setinha triangular ajustada para a direita (em cima do ícone) */
.color-picker-menu::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10px;
  /* Posiciona a seta em cima do botão */
  left: auto;
  margin-left: 0;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--bg-panel) transparent;
}

/* Texto interno */
.color-picker-menu div {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 5px;
  opacity: 0.8;
}

/* ============================================================
   CORREÇÕES GLOBAIS DE TEMA (MODALS, INPUTS, SELECT2, SCROLL) - 100% IA, tive muita dificuldade.
   ============================================================ */

/* 1. INPUTS, SELECTS E TEXTAREAS (Geral) */
/* Força todos os campos de texto a obedecerem a cor do tema */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .filter-input,
[data-theme="dark"] .search-name-input {
  background-color: var(--bg-input) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-input) !important;
}

/* Placeholder (texto de dica) mais claro no escuro */
[data-theme="dark"] ::placeholder {
  color: var(--text-light);
  opacity: 0.7;
}

/* 2. CORREÇÃO DO SELECT2 (DROPDOWNS) */
/* A caixa fechada */
[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-input) !important;
}

[data-theme="dark"]
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--text-main) !important;
}

/* A lista aberta (Dropdown) */
[data-theme="dark"] .select2-dropdown {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Opções da lista */
[data-theme="dark"] .select2-results__option {
  background-color: var(--bg-panel);
  color: var(--text-main);
}

/* Opção selecionada ou hover */
[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* 3. MODALS FLUTUANTES (Identificação, Clima, Importação) */
[data-theme="dark"] #identify-results-modal,
[data-theme="dark"] #weather-modal,
[data-theme="dark"] #import-modal .modal-content-import {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Cabeçalhos dos Modals */
[data-theme="dark"] .identify-modal-header,
[data-theme="dark"] .weather-modal-header,
[data-theme="dark"] #import-modal .modal-header {
  background-color: var(--bg-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Abas internas do Identify */
[data-theme="dark"] .identify-tab {
  background-color: var(--bg-body);
  color: var(--text-light);
  border-color: var(--border-color);
}

[data-theme="dark"] .identify-tab.active {
  background-color: var(--bg-panel);
  color: var(--primary-color);
  border-bottom-color: var(--bg-panel);
}

/* 4. BARRA DE ROLAGEM (SCROLLBAR) ESTILIZADA */
/* Funciona em Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #555;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

/* ============================================================
   CORREÇÕES FINAIS: CONTAINERS E CAIXAS COLORIDAS
   ============================================================ */

/* 1. CAIXA "5. ESTILO DO RESULTADO" (O box amarelo) */
[data-theme="dark"] .style-controls {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Garante que os labels dentro dela (Preenchimento, Borda) fiquem claros */
[data-theme="dark"] .style-controls .style-row,
[data-theme="dark"] .style-controls p,
[data-theme="dark"] .style-controls label {
  color: var(--text-main) !important;
}

/* 2. ÁREA DE IMPORTAÇÃO CSV (O box que abre ao clicar) */
[data-theme="dark"] #importBody,
[data-theme="dark"] .thematic-controls {
  background-color: transparent !important;
  color: var(--text-main) !important;
}

/* O box verde de mapeamento de colunas dentro da importação */
[data-theme="dark"] #csvColumnMapping {
  background-color: rgba(46, 204, 113, 0.1) !important;
  /* Verde bem escuro translúcido */
  border: 1px solid #2ecc71 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] #csvColumnMapping p {
  color: #2ecc71 !important;
  /* Mantém o título verde */
}

/* 3. PAINEL DE CONTROLE DO HEATMAP (O box vermelho de calor) */
[data-theme="dark"] #heatmapControls {
  background-color: rgba(214, 48, 49, 0.1) !important;
  /* Vermelho escuro translúcido */
  border: 1px solid #d63031 !important;
  color: var(--text-main) !important;
}

/* 4. EDITOR DE INTERVALOS NUMÉRICOS (Lista de faixas) */
[data-theme="dark"] #manualRangesContainer {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .range-edit-row {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .range-edit-row span {
  color: var(--text-light) !important;
}

/* ============================================================
   CORREÇÕES DE ALTA PRIORIDADE (SOBRESCREVEM O STYLE.CSS)
   ============================================================ */

/* 1. INPUTS DA ÁREA TEMÁTICA ) */
[data-theme="dark"] .thematic-control-group input,
[data-theme="dark"] .thematic-control-group select {
  background-color: var(--bg-input) !important;
  color: var(--text-main) !important;
  border-color: var(--border-input) !important;
}

/* 2. CAIXA "5. ESTILO DO RESULTADO" (O box amarelo) */
[data-theme="dark"] .style-controls {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .style-controls .style-row,
[data-theme="dark"] .style-controls label,
[data-theme="dark"] .style-controls p {
  color: var(--text-main) !important;
}

/* 3. CARD DE "DICAS" (O último da lista) */
[data-theme="dark"] .thematic-card:last-child {
  background: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .thematic-card:last-child h5 {
  color: var(--secondary-color) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .thematic-card:last-child ul,
[data-theme="dark"] .thematic-card:last-child li {
  color: var(--text-light) !important;
}

/* 4. CAIXA DE PRÉVIA DO TEMA (Onde aparece o gráfico) */
[data-theme="dark"] .thematic-preview {
  background-color: var(--bg-inner-container) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .thematic-preview i {
  color: var(--text-light) !important;
}

/* 5. TEXTOS DENTRO DOS CARDS TEMÁTICOS */
[data-theme="dark"] .thematic-card h5 {
  color: var(--text-main) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .thematic-control-group label {
  color: var(--text-light) !important;
}

/* --- CAIXA DE BORDA E ESPESSURA NO TEMÁTICO --- */
[data-theme="dark"] .style-control-row {
  background-color: var(--bg-inner-container) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Garante que o texto dos labels dentro dessa caixa fique correto */
[data-theme="dark"] .style-control-row label {
  color: var(--text-light) !important;
}

/* ============================================================
   AJUSTES FINAIS DE LAYOUT (COROPLÉTICO E HEATMAP)
   ============================================================ */

/* 1. CORREÇÃO DA CAIXA "COR BORDA / ESPESSURA" (Fundo Escuro) */
[data-theme="dark"] .style-control-row {
  background-color: var(--bg-inner-container) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Corrige a cor dos textos (labels) dentro dessa caixa */
[data-theme="dark"] .style-control-row label {
  color: var(--text-light) !important;
}

/* Ajuste do temático para o mapa coroplético, tanto no modo dark, como normal e oficial */

#hmRadiusVal,
#hmBlurVal {
  width: 40px !important;
  /* Era 25px, aumentei para dar folga */
  text-align: right;
  /* Alinha à direita para ficar bonito */
  padding-left: 5px;
  display: inline-block;
}

/* Opcional: Melhora a caixinha de "Unidade do Raio" no modo escuro */
[data-theme="dark"] #heatmapControls > div[style*="background"] {
  background-color: rgba(0, 0, 0, 0.2) !important;
  /* Fundo escuro transparente */
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

/* ============================================================
   CORREÇÃO FINAL: MODAL DE CONFIGURAÇÃO DE IMPRESSÃO
   (Sobrescreve os estilos inline do Javascript)
   ============================================================ */

/* 1. O Container Principal (A caixa que estava branca) */
[data-theme="dark"] #print-settings-modal > div {
  background-color: var(--bg-panel) !important;
  /* Força cinza escuro */
  color: var(--text-main) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* 2. O Título "Configurar Impressão" */
[data-theme="dark"] #print-settings-modal h3 {
  color: var(--primary-color) !important;
  /* Azul ou a cor do tema */
  border-bottom-color: var(--border-color) !important;
}

/* 3. Textos dos Labels (Título, Formato, etc) */
[data-theme="dark"] #print-settings-modal label {
  color: var(--text-light) !important;
}

/* 4. Botão "Cancelar" (Estava cinza claro) */
[data-theme="dark"] #btnCancelPrint {
  background-color: transparent !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] #btnCancelPrint:hover {
  background-color: var(--bg-hover) !important;
  color: var(--primary-color) !important;
}

/* 5. Botão "Gerar PDF" (Garante destaque) */
[data-theme="dark"] #btnConfirmPrint {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

[data-theme="dark"] #btnConfirmPrint:hover {
  background-color: var(--primary-hover) !important;
}

/* --- MODAL DE PRÉ-VISUALIZAÇÃO DE TABELA (NOVO) --- */
.csv-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  max-width: 95%;
  height: 600px;
  max-height: 90vh;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  /* Acima de tudo */
  display: none;
  flex-direction: column;
  border-radius: 8px;
  animation: fadeIn 0.2s;
}

.csv-modal.active {
  display: flex;
}

.csv-modal-header {
  padding: 15px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: var(--text-main);
}

.csv-modal-header span {
  color: var(--primary-color);
}

.csv-modal-header i {
  color: var(--primary-color);
}

.csv-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-light);
  line-height: 1;
}

.csv-modal-body {
  flex: 1;
  overflow: auto;
  /* Permite rolar a tabela */
  padding: 20px;
  background: var(--bg-panel);
}

/* Rodapé dos botões dentro do Modal CSV */
.csv-modal-footer {
  padding: 10px;
  background: var(--bg-light);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: sticky;
  bottom: 0;
}

/* Estilo da Tabela dentro do Modal */
.csv-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
  color: #333;
}

.csv-preview-table th {
  background: #f0f0f0;
  position: sticky;
  top: 0;
  /* Cabeçalho fixo ao rolar */
  z-index: 1;
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.csv-preview-table td {
  border: 1px solid #eee;
  padding: 6px;
  white-space: nowrap;
}

/* Ajuste do Tema Escuro */
[data-theme="dark"] .csv-preview-table {
  background: #1e1e1e;
  color: #e0e0e0;
}

[data-theme="dark"] .csv-preview-table th {
  background: #2c2c2c;
  border-color: #444;
}

[data-theme="dark"] .csv-preview-table td {
  border-color: #333;
}

/* --- CORREÇÃO DA COLUNA ÍNDICE (#) na tabela de visualização --- */
.csv-index-col {
  width: 40px;
  text-align: center;
  background-color: #e9ecef;
  /* Cor original (Modo Claro) */
  font-weight: bold;
  color: #555;
  position: sticky;
  left: 0;
  /* Opcional: Fixa a coluna na esquerda ao rolar */
  z-index: 2;
}

/* Ajuste para o Modo Escuro */
[data-theme="dark"] .csv-index-col {
  background-color: var(--bg-light) !important;
  /* Usa a cor do tema */
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

/* Botão de Excluir Camada Importada do CSV/arquivo (Lixeirinha) */
.btn-delete-import {
  color: #dc3545;
  /* Vermelho */
  cursor: pointer;
  font-size: 13px;
  margin-left: auto;
  /* Empurra para a direita */
  display: none;
  /* Escondido por padrão */
  padding: 2px 5px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-delete-import:hover {
  background-color: #ffe6e6;
  transform: scale(1.1);
}

/* ============================================================
   CORREÇÃO FINAL: CARD DE ESTATÍSTICA DE RUA (DARK MODE)
   Respeita o tema escuro vencendo os estilos inline do JS
   ============================================================ */

/* 1. O Card Principal */
[data-theme="dark"] .chart-card {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* 2. O Cabeçalho do Card  */
[data-theme="dark"] .chart-card .chart-header {
  /* Remove o gradiente branco/cinza e põe cor sólida escura */
  background: var(--bg-light) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* Título e Ícones do Header */
[data-theme="dark"] .chart-card .chart-header span {
  color: var(--text-main) !important;
  /* Texto branco */
}

[data-theme="dark"] .chart-card .chart-header i {
  color: var(--primary-color) !important;
  /* Ícone na cor do tema */
}

/* 3. Textos Descritivos (Lotes Físicos, Cadastros) */
/* Pega as divs que o JS pintou de cinza #555 */
[data-theme="dark"] .chart-card div[style*="color:#555"] {
  color: var(--text-light) !important;
}

/* 4. Barras de Progresso (Fundo da barra) */
[data-theme="dark"] .chart-card div[style*="background:#e9ecef"] {
  background-color: #333 !important;
  /* Fundo da barra mais escuro */
}

/* 5. CAIXA ESQUERDA: Média/Lote  */
[data-theme="dark"] .chart-card div[style*="background:#fcfcfc"] {
  background-color: var(--bg-input) !important;
  /* Fundo cinza escuro */
  border-color: var(--border-color) !important;
  /* Borda discreta */
}

/* Número - Resultado da pesquisa (exemplo, média de cadastros por lote  */
[data-theme="dark"] .chart-card div[style*="color:#333"] {
  color: var(--text-main) !important;
}

/* Ícone Redondo Azul Claro (Média) */
[data-theme="dark"] .chart-card div[style*="background:#e7f1ff"] {
  background-color: rgba(0, 86, 179, 0.3) !important;
  /* Azul escuro translúcido */
  color: #90caf9 !important;
  /* Ícone azul claro */
}

/* 6. CAIXA DIREITA: Selecionados (Estava verde clara #e8f5e9) */
[data-theme="dark"] .chart-card div[style*="background:#e8f5e9"] {
  background-color: rgba(27, 94, 32, 0.2) !important;
  /* Verde escuro translúcido */
  border-color: #1b5e20 !important;
  /* Borda verde escura */
}

/* Número e Texto Verde Escuro */
[data-theme="dark"] .chart-card div[style*="color:#2e7d32"],
[data-theme="dark"] .chart-card div[style*="color:#1b5e20"] {
  color: #81c784 !important;
  /* Verde claro para ler no fundo preto */
}

/* Ícone Redondo Verde */
[data-theme="dark"] .chart-card div[style*="background:#c8e6c9"] {
  background-color: #1b5e20 !important;
  color: #fff !important;
}

/* 7. Input de Filtro no Rodapé */
[data-theme="dark"] .results-search-input {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

[data-theme="dark"] .results-search-icon {
  color: var(--text-light) !important;
}

/* ============================================================
   CORREÇÃO DEFINITIVA: BOTÕES DE BUSCA (SOLUÇÃO VIA FILTRO)
   ============================================================ */

/* 1. Ataca os botões específicos e a classe geral */
#btnSearchAddress:hover,
#goToCoordBtn:hover,
#addConditionBtn:hover,
#applyFilterBtn:hover,
.btn-primary:hover,
button.btn-primary:hover {
  /* TRUQUE: Usa a cor PRINCIPAL (que sabemos que funciona) */
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;

  /* E escurece ela artificialmente via filtro - ajustado para não ficar muito escuro */
  filter: brightness(0.92) !important;

  /* Garante o texto com contraste adequado */
  color: var(--text-on-primary) !important;

  /* Remove interferências */
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Garante que o ícone dentro do botão também use a cor correta */
#btnSearchAddress:hover i,
#goToCoordBtn:hover i,
.btn-primary:hover i {
  color: var(--text-on-primary) !important;
}

/* ============================================================
   CONTROLES DO TEMÁTICO (CATEGÓRICO/LISTAS) do mapa temático
   Resolve o fundo branco na lista de valores e caixa de borda, deixando funcionando o modo dark
   ============================================================ */

/* 1. Caixa de Lista de Valores (O container com rolagem) */
[data-theme="dark"] #categoriesList {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* 2. Linha da Categoria (Item da lista) */
[data-theme="dark"] .cat-row {
  border-bottom-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* 3. Input de Texto da Categoria (Onde diz "Centro de quadra", etc) */
[data-theme="dark"] .cat-label-input {
  color: var(--text-main) !important;
  background-color: transparent !important;
  /* Fundo transparente para mesclar com a lista */
  border-color: transparent !important;
}

/* Efeito ao passar o mouse ou editar o nome da categoria */
[data-theme="dark"] .cat-label-input:hover,
[data-theme="dark"] .cat-label-input:focus {
  background-color: var(--bg-hover) !important;
  border-color: var(--border-input) !important;
  color: var(--primary-color) !important;
  /* Destaque na cor do tema */
}

/* 4. Contagem (número entre parênteses) */
[data-theme="dark"] .cat-count {
  color: var(--text-light) !important;
}

/* 5. Caixa Agrupada de "Cor Borda" e "Espessura" */
[data-theme="dark"] .style-control-row {
  background-color: var(--bg-inner-container) !important;
  /* Fundo cinza escuro */
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Labels dentro dessa caixa (Títulos "Cor Borda", "Espessura") */
[data-theme="dark"] .style-control-row label {
  color: var(--text-light) !important;
}

/* 6. Inputs específicos dentro da caixa de estilo */
[data-theme="dark"] #thematicStrokeWidth,
[data-theme="dark"] .style-control-row input[type="text"] {
  background-color: var(--bg-input) !important;
  color: var(--text-main) !important;
  border-color: var(--border-input) !important;
}

/* ============================================================
   SLIDER DE ROTAÇÃO - MODO ESCURO
   ============================================================ */

/* Texto do Label "Rotação" no escuro */
[data-theme="dark"] .rotation-wrapper label {
  color: var(--text-light) !important;
}

/* Número do grau (ex: 90°) no escuro */
[data-theme="dark"] #rotationValueDisplay {
  color: var(--primary-color) !important;
}

/* Cor do Trilho no escuro */
[data-theme="dark"] #annotationRotation::-webkit-slider-runnable-track {
  background: var(--bg-input);
  border-color: var(--border-input);
}

/* Borda da Bolinha no escuro (para contrastar com o fundo preto) */
[data-theme="dark"] #annotationRotation::-webkit-slider-thumb {
  border-color: var(--text-main);
}

/* ============================================================
   CORREÇÃO: TABELA DE PREVIEW DO BUFFER POR ARQUIVO (MODO ESCURO)
   Sobrescreve os estilos inline da função showBufferFilePreview()
   ============================================================ */

/* Tabela dentro do preview do buffer */
[data-theme="dark"] #bufferFilePreviewContent table {
  background-color: var(--bg-panel) !important;
  color: var(--text-main) !important;
}

/* Cabeçalho da tabela (th) - estava com background:#eee */
[data-theme="dark"] #bufferFilePreviewContent th {
  background-color: var(--bg-light) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

/* Células da tabela (td) - estavam com border:#ddd */
[data-theme="dark"] #bufferFilePreviewContent td {
  background-color: var(--bg-panel) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

/* Texto de rodapé "Total: X pontos" - estava com color:#666 */
[data-theme="dark"] #bufferFilePreviewContent p {
  color: var(--text-light) !important;
}

/* ============================================================
   CORREÇÃO: CARD DE CONTROLE DO HEATMAP (INTENSIDADE/BLUR)
   Sobrescreve os estilos inline do card bege com os sliders
   ============================================================ */

/* Card principal com fundo bege (#fff3e0) */
[data-theme="dark"]
  #selection_analysis_card
  > div[style*="background: #fff3e0"] {
  background-color: var(--bg-inner-container) !important;
  border-color: var(--border-color) !important;
}

/* Labels "INTENSIDADE (RAIO)" e "DISSIPAR (BLUR)" - estavam laranja (#e65100) */
[data-theme="dark"] #selection_analysis_card label[style*="color:#e65100"],
[data-theme="dark"] #selection_analysis_card span[style*="color:#e65100"] {
  color: #ff9800 !important;
  /* Laranja mais claro para contraste no escuro */
}

/* ============================================================
   CORREÇÃO: BOTÃO "IR PARA O PONTO" (TEMA OFFICIAL)
   Correção do bug onde o botão ficava branco/invisível em repouso
   ============================================================ */

[data-theme="official"] #goToCoordBtn {
  background-color: #003399 !important;
  /* Azul Padrão do Tema */
  color: #ffffff !important;
  /* Texto Branco */
  border: 1px solid #003399 !important;
  /* Borda Azul */
}

/* Garante que o efeito de passar o mouse continue funcionando */
[data-theme="official"] #goToCoordBtn:hover {
  background-color: #002266 !important;
  /* Azul mais escuro no hover */
  color: #ffffff !important;
}

/* Toolbar de Buffer */
.tool-section .btn-group .btn {
  padding: 6px 10px;
  font-size: 13px;
}

/* Ajuste Dark Mode para os botões outline */
[data-theme="dark"] .tool-section .btn-outline-secondary {
  color: #ccc;
  border-color: #555;
}

[data-theme="dark"] .tool-section .btn-outline-secondary:hover,
[data-theme="dark"] .tool-section .btn-outline-secondary.active {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* Feedback visual para os botões de Buffer */
.buffer-tool-btn.active {
  background-color: var(--primary-color) !important;
  /* Fica Azul/Cor do tema */
  color: white !important;
  border-color: var(--primary-color) !important;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* Garante que o input de raio fique alinhado */
.input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#bufferDistanceInput {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ============================================================
   CORREÇÃO: BOTÕES DE BUFFER E INPUTS (TEMA ESCURO)
   Torna os botões transparentes quando inativos e arruma o input de raio
   ============================================================ */

/* 1. Estado Normal (Inativo) */
[data-theme="dark"] .buffer-tool-btn {
  background-color: transparent !important;
  /* Remove fundo branco */
  border-color: var(--border-color) !important;
  /* Borda cinza escura */
  color: var(--text-light) !important;
  /* Texto cinza claro */
  transition: all 0.2s;
}

/* 2. Estado Hover (Passar o mouse) */
[data-theme="dark"] .buffer-tool-btn:hover {
  background-color: var(--bg-hover) !important;
  /* Leve destaque */
  color: var(--text-main) !important;
  /* Texto branco */
  border-color: var(--text-light) !important;
}

/* 3. Estado Ativo (Selecionado - Ponto/Linha/Área) */
[data-theme="dark"] .buffer-tool-btn.active {
  background-color: var(--primary-color) !important;
  /* Azul do tema */
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
  /* Texto branco para contraste */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   ÍCONES DE SELEÇÃO — Estilo QGIS/ArcGIS (amarelo/dourado)
   ============================================================ */

/* Animação de pulso dourado para botões ativos */
@keyframes goldenPulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 3px rgba(0, 0, 0, 0.08),
      0 0 6px rgba(218, 165, 32, 0.35),
      0 0 12px rgba(218, 165, 32, 0.15);
  }

  50% {
    box-shadow:
      inset 0 1px 3px rgba(0, 0, 0, 0.08),
      0 0 10px rgba(218, 165, 32, 0.5),
      0 0 20px rgba(218, 165, 32, 0.2);
  }
}

@keyframes goldenPulseDark {
  0%,
  100% {
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.2),
      0 0 8px rgba(240, 192, 64, 0.35),
      0 0 16px rgba(240, 192, 64, 0.15);
  }

  50% {
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.2),
      0 0 14px rgba(240, 192, 64, 0.5),
      0 0 24px rgba(240, 192, 64, 0.2);
  }
}

/* Glow para botões do editor (não-seleção) no tema claro */
@keyframes primaryPulse {
  0%,
  100% {
    box-shadow:
      0 0 6px rgba(0, 86, 179, 0.3),
      0 0 12px rgba(0, 86, 179, 0.1);
  }

  50% {
    box-shadow:
      0 0 10px rgba(0, 86, 179, 0.45),
      0 0 20px rgba(0, 86, 179, 0.15);
  }
}

/* Estado Normal */
.sel-tool-btn {
  position: relative;
}

.sel-tool-btn i,
.sel-tool-btn svg {
  color: #b8860b !important;
  /* dourado escuro */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}

/* Hover */
.sel-tool-btn:hover {
  background: rgba(218, 165, 32, 0.12) !important;
  border-color: #daa520 !important;
}

.sel-tool-btn:hover i,
.sel-tool-btn:hover svg {
  color: #daa520 !important;
  /* goldenrod */
}

/* Ativo — Tema Claro (glow forte + pulso) */
.sel-tool-btn.active {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.22),
    rgba(218, 165, 32, 0.28)
  ) !important;
  border: 2px solid #daa520 !important;
  animation: goldenPulse 2.5s ease-in-out infinite;
}

.sel-tool-btn.active i,
.sel-tool-btn.active svg {
  color: #996515 !important;
  filter: drop-shadow(0 0 3px rgba(218, 165, 32, 0.6));
}

/* Botões de editor (não-seleção) — glow primário no tema claro */
#selectionToolbar .map-btn.tool-btn.active:not(.sel-tool-btn),
#editorToolbar .map-btn.tool-btn.active {
  animation: primaryPulse 2.5s ease-in-out infinite;
  border: 2px solid var(--primary-color) !important;
}

/* Dark mode */
[data-theme="dark"] .sel-tool-btn i,
[data-theme="dark"] .sel-tool-btn svg {
  color: #f0c040 !important;
  /* amarelo vivo */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .sel-tool-btn:hover {
  background: rgba(240, 192, 64, 0.15) !important;
  border-color: rgba(240, 192, 64, 0.5) !important;
}

[data-theme="dark"] .sel-tool-btn:hover i,
[data-theme="dark"] .sel-tool-btn:hover svg {
  color: #ffd54f !important;
}

[data-theme="dark"] .sel-tool-btn.active {
  background: rgba(240, 192, 64, 0.2) !important;
  border-color: #f0c040 !important;
  animation: goldenPulseDark 2.5s ease-in-out infinite;
}

[data-theme="dark"] .sel-tool-btn.active i,
[data-theme="dark"] .sel-tool-btn.active svg {
  color: #ffd54f !important;
  filter: drop-shadow(0 0 3px rgba(240, 192, 64, 0.5));
}

/* 4. Correção extra: O label "Raio (m):" que fica ao lado do input */
[data-theme="dark"] .input-group-text {
  background-color: var(--bg-hover) !important;
  /* Fundo escuro */
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}

/* ============================================================
   CORREÇÃO: LABEL DO BUFFER (SUPERIOR)
   Garante que o texto do buffer (label) fique ACIMA da linha amarela grossa
   ============================================================ */

/* Aumenta o nível de empilhamento dos balões */
.ol-tooltip,
.ol-tooltip-static,
.ol-tooltip-measure,
.address-popup {
  z-index: 10000 !important;
  /* Força ficar acima do Canvas do mapa (que costuma ser < 3000) */
}

/* Opcional: Adiciona uma sombra branca no texto para garantir leitura 
   caso a linha passe exatamente por trás das letras */
.ol-tooltip-static {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* ============================================================
   MODAL DE BUFFER POR ARQUIVO DE PONTOS - ADAPTAÇÃO DE TEMAS
   ============================================================ */

/* Caixa de informação no topo do modal */
.buffer-info-box {
  margin-bottom: 15px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  border-radius: 4px;
  background: var(--bg-light);
}

.buffer-info-box p {
  color: var(--text-main) !important;
}

.buffer-info-box i {
  color: var(--primary-color);
}

/* Tema escuro - ajustes específicos */
[data-theme="dark"] .buffer-info-box {
  background: rgba(23, 162, 184, 0.1);
  border-left-color: #17a2b8;
}

[data-theme="dark"] .buffer-info-box i {
  color: #17a2b8;
}

/* Seções do formulário */
.buffer-section {
  margin-bottom: 15px;
}

.buffer-section-label {
  font-size: 12px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: var(--text-main);
}

.buffer-section-sublabel {
  font-size: 11px;
  color: var(--text-light);
  display: block;
  margin-bottom: 5px;
}

.buffer-section-hint {
  font-size: 10px;
  color: var(--text-light);
  margin-top: 3px;
}

/* Preview de dados */
.buffer-preview-content {
  max-height: 150px;
  overflow: auto;
  border: 1px solid var(--border-color);
  padding: 10px;
  background: var(--bg-input);
  font-size: 11px;
  color: var(--text-main);
}

/* Grid de colunas */
.buffer-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* Inputs e selects dentro do modal */
#buffer-file-modal .filter-input,
#buffer-file-modal .filter-select {
  background-color: var(--bg-input) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-input) !important;
}

/* Labels de radio/checkbox */
#buffer-file-modal label {
  color: var(--text-main);
}

/* Container das barras de progresso */
#bufferProgressContainer {
  background: var(--bg-light) !important;
  border: 1px solid var(--border-color) !important;
}

/* Títulos das barras ("1. Criando buffers", "2. Filtrando features") */
#bufferProgressContainer span {
  color: var(--text-main) !important;
}

/* Textos de porcentagem e detalhes */
#bufferProgressText,
#bufferProgressText2,
#bufferProgressDetail,
#bufferProgressDetail2 {
  color: var(--text-light) !important;
}

/* Fundo das barras (trilho) */
#bufferProgressContainer > div > div[style*="background: #e9ecef"] {
  background: var(--bg-input) !important;
}

/* Tema Escuro - Ajustes específicos */
[data-theme="dark"] #bufferProgressContainer {
  background: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
}

/* Tema Oficial - Mantém visual limpo */
[data-theme="official"] #bufferProgressContainer {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

/* Garante que as barras de progresso (azul e vermelha) mantenham suas cores em todos os temas */
#bufferProgressBar {
  background: linear-gradient(90deg, #0056b3, #007bff) !important;
}

#bufferProgressBar2 {
  background: linear-gradient(90deg, #c82333, #dc3545) !important;
}

/* ============================================================
   CORREÇÃO: CAMADAS AD-HOC (TEMÁTICAS) NO TEMA ESCURO
   Resolve o fundo branco/rosa das camadas importadas e temáticas
   ============================================================ */

/* 1. Card da Camada Ad-Hoc (Container Principal) */
[data-theme="dark"] .adhoc-layer-card {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 2. Título da Camada */
[data-theme="dark"] .adhoc-layer-card .layer-title {
  color: var(--text-main) !important;
}

/* 3. Área de Transparência (Slider) */
[data-theme="dark"] .adhoc-layer-card .transparency-label {
  color: var(--text-light) !important;
}

/* 4. Botões de Ação (Legenda, Gráfico, Excluir) */
[data-theme="dark"] .adhoc-layer-card .layer-actions button {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .adhoc-layer-card .layer-actions button:hover {
  background-color: var(--bg-hover) !important;
  color: var(--primary-color) !important;
}

/* 5. Ícones dentro dos botões */
[data-theme="dark"] .adhoc-layer-card .layer-actions i {
  color: var(--text-light) !important;
}

[data-theme="dark"] .adhoc-layer-card .layer-actions button:hover i {
  color: var(--primary-color) !important;
}

/* 6. Slider de Transparência */
[data-theme="dark"] .adhoc-layer-card input[type="range"] {
  background: var(--bg-input) !important;
}

/* 7. Checkbox de Visibilidade */
[data-theme="dark"] .adhoc-layer-card input[type="checkbox"] {
  border-color: var(--border-input) !important;
}

/* 8. CORREÇÃO ESPECÍFICA: Se o card usar classes genéricas */
/* Força todos os elementos dentro de camadas ad-hoc a respeitarem o tema */
[data-theme="dark"] #layersList > div[data-layer-type="adhoc"],
[data-theme="dark"] #layersList > div[id^="adhoc_"],
[data-theme="dark"] .layer-item.adhoc {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

/* 9. Texto e labels dentro das camadas ad-hoc */
[data-theme="dark"] #layersList > div[data-layer-type="adhoc"] span,
[data-theme="dark"] #layersList > div[id^="adhoc_"] span,
[data-theme="dark"] .layer-item.adhoc span,
[data-theme="dark"] #layersList > div[data-layer-type="adhoc"] label,
[data-theme="dark"] #layersList > div[id^="adhoc_"] label,
[data-theme="dark"] .layer-item.adhoc label {
  color: var(--text-main) !important;
}

/* 10. CORREÇÃO UNIVERSAL: Qualquer div dentro de #layersList que não seja camada base */
/* Pega todas as camadas que não são do cadastro (que têm IDs específicos) */
[data-theme="dark"] #layersList > div:not([id*="layer_"]):not([id*="base_"]) {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"]
  #layersList
  > div:not([id*="layer_"]):not([id*="base_"])
  span,
[data-theme="dark"]
  #layersList
  > div:not([id*="layer_"]):not([id*="base_"])
  label {
  color: var(--text-main) !important;
}

/* Painel de cor em dark mode */
[data-theme="dark"] .layer-color-row label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .layer-color-row input[type="color"] {
  border-color: var(--border-color);
}

/* 11. CORREÇÃO ESPECÍFICA: Cards de arquivos importados (CSV, Shapefile, etc) */
/* Esses cards têm IDs que começam com "import_" */
[data-theme="dark"] #layersList > div[id^="import_"] {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}

/* Todos os elementos dentro do card importado */
[data-theme="dark"] #layersList > div[id^="import_"] * {
  color: var(--text-main) !important;
}

/* Ícones dentro do card importado */
[data-theme="dark"] #layersList > div[id^="import_"] i {
  color: var(--text-light) !important;
}

/* Botões dentro do card importado */
[data-theme="dark"] #layersList > div[id^="import_"] button {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] #layersList > div[id^="import_"] button:hover {
  background-color: var(--bg-hover) !important;
  color: var(--primary-color) !important;
}

/* Slider de transparência dentro do card importado */
[data-theme="dark"] #layersList > div[id^="import_"] input[type="range"] {
  background: var(--bg-input) !important;
}

/* Label "Transparência: X%" */
[data-theme="dark"] #layersList > div[id^="import_"] .transparency-label,
[data-theme="dark"]
  #layersList
  > div[id^="import_"]
  div[style*="font-size: 10px"] {
  color: var(--text-light) !important;
}

/* ============================================================
   CORREÇÃO ADICIONAL: Todos os cards de camadas no tema escuro
   (Inclui camadas importadas via CSV, Shapefile, etc)
   ============================================================ */

/* Pega TODOS os cards dentro do painel de camadas que tenham fundo branco */
[data-theme="dark"] #layersList > div,
[data-theme="dark"] #layersList .layer-card,
[data-theme="dark"] #layersList .adhoc-layer-card {
  background-color: var(--bg-panel) !important;
  border-color: var(--border-color) !important;
}

/* Áreas internas dos cards (como a área de transparência) */
[data-theme="dark"] #layersList > div > div[style*="background"],
[data-theme="dark"] #layersList .layer-card > div[style*="background"] {
  background-color: var(--bg-light) !important;
}

/* Textos dentro dos cards */
[data-theme="dark"] #layersList > div span,
[data-theme="dark"] #layersList > div label,
[data-theme="dark"] #layersList > div div {
  color: var(--text-main) !important;
}

/* Textos menores (como "Transparência: 80%") */
[data-theme="dark"] #layersList > div div[style*="font-size: 10px"],
[data-theme="dark"] #layersList > div div[style*="font-size: 11px"] {
  color: var(--text-light) !important;
}

/* Ícones dentro dos cards */
[data-theme="dark"] #layersList > div i {
  color: var(--text-light) !important;
}

/* Botões dentro dos cards */
[data-theme="dark"] #layersList > div button {
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] #layersList > div button:hover {
  background-color: var(--bg-hover) !important;
  color: var(--primary-color) !important;
}

[data-theme="dark"] #layersList > div button:hover i {
  color: var(--primary-color) !important;
}

/* Sliders de transparência */
[data-theme="dark"] #layersList > div input[type="range"] {
  background: var(--bg-input) !important;
}

/* Checkboxes */
[data-theme="dark"] #layersList > div input[type="checkbox"] {
  border-color: var(--border-input) !important;
}

/* ============================================================
   CORREÇÃO ESPECÍFICA: Cards de camadas Ad-Hoc (Temáticos/Heatmap)
   Esses cards têm estilos inline que precisam ser sobrescritos
   ============================================================ */

/* Card principal (layer-item) */
[data-theme="dark"] .layer-item {
  background: var(--bg-panel) !important;
  border-left-color: var(--primary-color) !important;
}

/* Texto do título */
[data-theme="dark"] .layer-item label {
  color: var(--text-main) !important;
}

/* Ícones dentro do card */
[data-theme="dark"] .layer-item i {
  color: var(--text-light) !important;
}

/* Ícone principal (palette/layers) */
[data-theme="dark"] .layer-item label i {
  color: var(--primary-color) !important;
}

/* Painel de informações (legenda/gráfico/opacidade) */
[data-theme="dark"] div[id^="info_box_"] {
  background: var(--bg-light) !important;
  border-bottom-color: var(--border-color) !important;
}

/* Labels dentro do painel de opacidade */
[data-theme="dark"] div[id^="opacity_content_"] label {
  color: var(--text-light) !important;
}

/* Slider de opacidade */
[data-theme="dark"] .opacity-slider {
  background: var(--bg-input) !important;
}

/* ============================================================
   CORREÇÃO: Coluna de índice (#) na tabela de preview do buffer
   ============================================================ */

/* Pega tanto th quanto td com a classe csv-index-col */
[data-theme="dark"] th.csv-index-col,
[data-theme="dark"] td.csv-index-col {
  background-color: var(--bg-light) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   TABELA DE ATRIBUTOS — PAINEL DOCKÁVEL (BOTTOM PANEL)
   ============================================================ */

.attr-table-panel {
  position: fixed;
  bottom: -55vh;
  left: 0;
  width: 100%;
  height: 40vh;
  background: var(--bg-panel);
  border-top: 3px solid var(--primary-color);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  z-index: 5000;
  display: flex;
  flex-direction: column;
  transition:
    bottom 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
    height 0.3s ease;
}

.attr-table-panel.active {
  bottom: 0;
}

.attr-table-panel.expanded {
  height: 75vh;
}

/* --- Barra de Abas --- */
.attr-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  max-width: 50vw;
  scrollbar-width: none;
  padding: 2px 0;
}

.attr-tabs-bar::-webkit-scrollbar {
  display: none;
}

.attr-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-light);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.attr-tab:hover {
  background: rgba(0, 86, 179, 0.08);
  color: var(--text-main);
}

.attr-tab-active {
  background: rgba(0, 86, 179, 0.12);
  color: var(--primary-color);
  font-weight: 600;
  border-color: rgba(0, 86, 179, 0.25);
}

.attr-tab-count {
  font-size: 8px;
  font-weight: 700;
  background: var(--primary-color);
  color: #fff;
  padding: 0 5px;
  border-radius: 6px;
  min-width: 14px;
  text-align: center;
}

.attr-tab-close {
  font-size: 12px;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    color 0.15s;
  margin-left: 2px;
}

.attr-tab:hover .attr-tab-close {
  opacity: 0.6;
}

.attr-tab-close:hover {
  color: #e53935;
  opacity: 1 !important;
}

/* --- Janela Flutuante Independente --- */
.attr-float-window {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  z-index: 6000;
  resize: both;
  overflow: hidden;
  min-width: 480px;
  min-height: 240px;
  max-width: 98vw;
  max-height: 95vh;
}

.attr-float-header {
  height: 36px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
  cursor: grab;
}

.attr-float-header:active {
  cursor: grabbing;
}

.attr-panel-search-sm {
  max-width: 120px;
}

.attr-panel-search-sm input {
  width: 80px !important;
  font-size: 9px !important;
}

/* --- Header Compacto --- */
.attr-panel-header {
  height: 36px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
  gap: 8px;
}

.attr-panel-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.attr-panel-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.attr-panel-badge {
  font-size: 9px;
  font-weight: 500;
  background: var(--primary-color);
  color: #fff;
  padding: 1px 7px;
  border-radius: 8px;
  white-space: nowrap;
}

.attr-panel-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Busca inline */
.attr-panel-search {
  position: relative;
  display: flex;
  align-items: center;
}

.attr-panel-search i {
  position: absolute;
  left: 6px;
  font-size: 11px;
  color: var(--text-light);
  pointer-events: none;
}

.attr-panel-search input {
  padding: 3px 8px 3px 22px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 11px;
  background: var(--bg-input);
  color: var(--text-main);
  width: 220px;
  height: 24px;
}

.attr-panel-search input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.1);
}

/* Botões do header */
.attr-panel-icon-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--btn-sec-bg);
  color: var(--text-light);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  padding: 0;
}

.attr-panel-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.attr-close-btn {
  color: #dc3545;
  border-color: rgba(220, 53, 69, 0.3);
}

.attr-close-btn:hover {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

/* --- Corpo (Tabela Scroll) --- */
.attr-panel-body {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.attr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  user-select: none;
  -webkit-user-select: none;
}

.attr-table thead th {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-main);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.attr-th-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.attr-th-del {
  font-size: 9px;
  color: var(--text-light);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.12s,
    color 0.12s;
}

.attr-table thead th:hover .attr-th-del {
  opacity: 0.7;
}

.attr-th-del:hover {
  color: #dc3545 !important;
  opacity: 1 !important;
}

.attr-col-idx {
  width: 36px;
  text-align: center;
  font-weight: 600;
  color: var(--text-light);
  background: var(--bg-light) !important;
  border: 1px solid var(--border-color);
  font-size: 10px;
  position: sticky;
  left: 0;
  z-index: 1;
}

.attr-table thead th.attr-col-idx {
  z-index: 3;
}

/* Botão de exclusão de selecionados na toolbar */
.attr-delete-sel-btn {
  color: #dc3545 !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
  transition: all 0.15s ease;
}

.attr-delete-sel-btn:hover:not(:disabled):not(.disabled) {
  background: #dc3545 !important;
  color: #ffffff !important;
  border-color: #dc3545 !important;
}

.attr-delete-sel-btn:disabled,
.attr-delete-sel-btn.disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  color: var(--text-light) !important;
  border-color: var(--border-color) !important;
  background: transparent !important;
}

/* Linhas */
.attr-row {
  cursor: pointer;
  transition: background 0.08s;
}

.attr-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.015);
}

.attr-row:hover {
  background: rgba(0, 86, 179, 0.07) !important;
}

.attr-row-active {
  background: rgba(0, 86, 179, 0.13) !important;
  box-shadow: inset 3px 0 0 var(--primary-color);
}

/* Seleção via Shift+Click — mesma cor do highlight de seleção do EditorManager */
.attr-row-selected {
  background: var(--sel-row-bg, rgba(0, 120, 255, 0.18)) !important;
  box-shadow: inset 4px 0 0 var(--sel-row-border, rgba(0, 120, 255, 0.85));
}

.attr-row-selected:hover {
  background: var(--sel-row-bg-hover, rgba(0, 120, 255, 0.26)) !important;
}

.attr-row-selected td {
  color: var(--text-main);
  font-weight: 500;
}

/* Badge de seleção */
.attr-panel-sel-badge {
  font-size: 9px;
  font-weight: 600;
  background: rgba(0, 120, 255, 0.85);
  color: #fff;
  padding: 1px 7px;
  border-radius: 8px;
  white-space: nowrap;
  animation: fadeIn 0.2s;
}

/* Hint no footer */
.attr-panel-hint {
  font-size: 9px;
  color: var(--text-light);
  opacity: 0.7;
  white-space: nowrap;
}

.attr-panel-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.attr-row td {
  border: 1px solid var(--border-color);
  padding: 3px 6px;
  color: var(--text-main);
  white-space: nowrap;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attr-cell {
  cursor: cell;
}

.attr-cell:hover {
  background: rgba(255, 193, 7, 0.06);
}

/* Inline edit */
.attr-edit-input {
  width: 100%;
  padding: 1px 3px;
  border: 2px solid var(--primary-color);
  border-radius: 2px;
  font-size: 11px;
  background: var(--bg-input);
  color: var(--text-main);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.12);
}

/* --- Footer --- */
.attr-panel-footer {
  height: 28px;
  min-height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-light);
}

.attr-panel-status {
  font-size: 10px;
  color: var(--text-light);
}

.attr-panel-footer-btns {
  display: flex;
  gap: 4px;
  align-items: center;
}

.attr-page-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-light);
  padding: 0 4px;
  white-space: nowrap;
}

.attr-panel-sm-btn {
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--btn-sec-bg);
  color: var(--btn-sec-text);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.12s;
}

.attr-panel-sm-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* --- Dark Mode --- */
[data-theme="dark"] .attr-table-panel {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .attr-panel-header {
  background: var(--bg-light);
}

[data-theme="dark"] .attr-panel-body {
  background: var(--bg-panel);
}

[data-theme="dark"] .attr-table thead th {
  background: var(--bg-light);
  border-color: var(--border-color);
}

[data-theme="dark"] .attr-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .attr-row:hover {
  background: rgba(77, 163, 255, 0.1) !important;
}

[data-theme="dark"] .attr-row-active {
  background: rgba(77, 163, 255, 0.18) !important;
}

[data-theme="dark"] .attr-panel-footer {
  background: var(--bg-light);
}

[data-theme="dark"] .attr-row-selected {
  background: var(--sel-row-bg, rgba(0, 120, 255, 0.22)) !important;
}

[data-theme="dark"] .attr-row-selected:hover {
  background: var(--sel-row-bg-hover, rgba(0, 120, 255, 0.32)) !important;
}

/* Tooltip flash (mensagem temporária) */
.attr-tooltip-flash {
  position: fixed;
  background: rgba(30, 30, 30, 0.92);
  color: #ffd54f;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
  z-index: 99999;
  pointer-events: none;
  animation: attrTooltipFade 2s ease-out forwards;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes attrTooltipFade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --- Dark Mode: Tabs e Float --- */
[data-theme="dark"] .attr-tab:hover {
  background: rgba(77, 163, 255, 0.1);
}

[data-theme="dark"] .attr-tab-active {
  background: rgba(77, 163, 255, 0.18);
  border-color: rgba(77, 163, 255, 0.3);
}

[data-theme="dark"] .attr-float-window {
  background: var(--bg-panel);
  border-color: var(--border-color);
  box-shadow: 0 8px 50px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .attr-float-header {
  background: var(--bg-light);
  border-color: var(--border-color);
}

/* --- Filter Bar (Filtro Avançado) --- */
.attr-filter-bar {
  padding: 6px 10px;
  background: var(--bg-light, #f2f4f7);
  border-bottom: 1px solid var(--border-color, #dce0e5);
  font-size: 11px;
  max-height: 180px;
  overflow-y: auto;
}

.attr-filter-bar .filter-rows-wrapper {
  margin-top: 2px;
}

.attr-filter-active {
  position: relative;
}

.attr-filter-active::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  background: #ff5722;
  border-radius: 50%;
  border: 1px solid var(--bg-panel, #fff);
}

[data-theme="dark"] .attr-filter-bar {
  background: var(--bg-dark, #1e1e1e);
  border-color: var(--border-color);
}

/* Undo/Redo edit buttons */
.attr-edit-btns {
  display: inline-flex;
  gap: 2px;
  margin-left: 2px;
  padding-left: 4px;
  border-left: 1px solid var(--border-color, #dce0e5);
}

/* --- Export Menu Dropdown --- */
.attr-export-menu {
  position: fixed;
  z-index: 99999;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-color, #dce0e5);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  padding: 8px;
  min-width: 270px;
  max-width: calc(100vw - 16px);
  animation: attrExportFadeIn 0.15s ease-out;
}

@keyframes attrExportFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.attr-export-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--border-color, #eee);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.attr-export-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px;
  border-radius: 4px;
}

.attr-export-group:hover {
  background: rgba(0, 86, 179, 0.04);
}

.attr-export-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-main, #333);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 80px;
}

.attr-export-group-label i {
  font-size: 14px;
  color: var(--primary-color);
}

.attr-export-group-btns {
  display: flex;
  gap: 4px;
}

.attr-export-btn {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
  background: var(--bg-input, #f8f9fa);
  color: var(--text-main, #333);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.12s;
  white-space: nowrap;
}

.attr-export-btn:hover:not(:disabled) {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.attr-export-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.attr-export-btn-sel {
  border-color: rgba(0, 120, 255, 0.3);
  color: var(--primary-color);
}

/* Dark mode export menu */
[data-theme="dark"] .attr-export-menu {
  background: var(--bg-panel, #1e1e1e);
  border-color: var(--border-color, #444);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .attr-export-group:hover {
  background: rgba(77, 163, 255, 0.08);
}

[data-theme="dark"] .attr-export-btn {
  background: var(--bg-input, #2a2a2a);
  border-color: var(--border-color, #555);
  color: var(--text-main, #eee);
}

/* Selection style popover */
.attr-sel-style-popover {
  position: fixed;
  z-index: 99999;
  background: var(--bg-main, #fff);
  border: 1px solid var(--border-color, #dce0e5);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: 14px 16px;
  width: 260px;
  font-family: inherit;
}

.sel-style-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-main, #333);
  white-space: nowrap;
}

.sel-style-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sel-style-row label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 86px;
  color: var(--text-main, #555);
}

.sel-style-row input[type="color"] {
  width: 32px;
  height: 24px;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
  padding: 2px;
  cursor: pointer;
  background: transparent;
  flex: 0 0 auto;
}

.sel-style-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 60px;
  height: 6px;
  cursor: pointer;
  accent-color: var(--primary, #0078ff);
}

.sel-style-preview {
  margin-top: 6px;
}

[data-theme="dark"] .attr-sel-style-popover {
  background: var(--bg-dark, #1e1e1e);
  border-color: var(--border-color, #444);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* --- Calc Bar (Calculadora de Campo) --- */
.attr-calc-bar {
  padding: 6px 10px;
  background: linear-gradient(
    135deg,
    var(--bg-light, #f2f4f7) 0%,
    #e8f0fe 100%
  );
  border-bottom: 1px solid var(--border-color, #dce0e5);
  font-size: 11px;
}

[data-theme="dark"] .attr-calc-bar {
  background: linear-gradient(135deg, var(--bg-dark, #1e1e1e) 0%, #1a2332 100%);
  border-color: var(--border-color);
}

/* --- Formula Modal --- */
.attr-formula-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attr-formula-modal {
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-color, #dce0e5);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  width: 520px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  animation: formulaSlideIn 0.2s ease-out;
}

@keyframes formulaSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.attr-formula-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #dce0e5);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-color, #3b82f6);
}

.attr-formula-body {
  padding: 12px 14px;
}

.attr-formula-footer {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-color, #dce0e5);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.attr-formula-footer .btn-mini {
  flex: 0 0 auto;
  white-space: nowrap;
  max-width: none;
  width: auto;
}

.formula-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.formula-textarea {
  width: 100%;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border-color, #dce0e5);
  border-radius: 6px;
  background: var(--bg-input, #f8f9fa);
  color: var(--text-color, #333);
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  box-sizing: border-box;
}

.formula-textarea:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.formula-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.formula-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.formula-chip:hover {
  background: var(--primary-dark, #2563eb);
  transform: scale(1.05);
}

.formula-chip:active {
  transform: scale(0.95);
}

.formula-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.formula-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-light, #e9ecef);
  color: var(--text-color, #333);
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.formula-op:hover {
  background: var(--primary-color, #3b82f6);
  color: #fff;
  border-color: var(--primary-color, #3b82f6);
}

.formula-op-fn {
  font-size: 10px;
  font-weight: 600;
  padding: 0 8px;
  font-family: "Consolas", "Monaco", monospace;
  background: #fef3c7;
  color: #92400e;
  border-color: #fbbf24;
}

.formula-op-fn:hover {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.formula-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.formula-preview-result {
  font-size: 11px;
  font-family: "Consolas", "Monaco", monospace;
  font-weight: 600;
}

/* Geometry chips (green) */
.formula-chip-geom {
  background: #059669 !important;
}

.formula-chip-geom:hover {
  background: #047857 !important;
}

/* Numeric field chips (orange) */
.formula-chip-num {
  background: #e67e22 !important;
}

.formula-chip-num:hover {
  background: #d35400 !important;
}

/* Help section */
.formula-help-details {
  margin-top: 4px;
  border: 1px solid var(--border-color, #dce0e5);
  border-radius: 6px;
  overflow: hidden;
}

.formula-help-details summary {
  cursor: pointer;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-light, #f0f2f5);
  color: var(--primary-color, #3b82f6);
  user-select: none;
  list-style: none;
}

.formula-help-details summary::-webkit-details-marker {
  display: none;
}

.formula-help-details summary::before {
  content: "▶ ";
  font-size: 9px;
  transition: transform 0.15s;
  display: inline-block;
}

.formula-help-details[open] summary::before {
  transform: rotate(90deg);
}

.formula-help-content {
  padding: 8px 10px;
  font-size: 10px;
  line-height: 1.6;
}

.formula-help-table {
  width: 100%;
  border-collapse: collapse;
}

.formula-help-table td {
  padding: 2px 6px;
  vertical-align: top;
}

.formula-help-table td:first-child {
  white-space: nowrap;
  width: 1%;
}

.formula-help-table code {
  font-family: "Consolas", "Monaco", monospace;
  font-size: 10px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-color, #2563eb);
  padding: 1px 4px;
  border-radius: 3px;
}

.formula-help-table th {
  font-size: 11px;
}

/* Dark mode */
[data-theme="dark"] .attr-formula-modal {
  background: var(--bg-panel, #1e1e1e);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .formula-textarea {
  background: var(--bg-dark, #111);
  border-color: var(--border-color);
  color: #e0e0e0;
}

[data-theme="dark"] .formula-op {
  background: var(--bg-dark, #2a2a2a);
  color: #e0e0e0;
  border-color: var(--border-color);
}

[data-theme="dark"] .formula-op-fn {
  background: #422006;
  color: #fbbf24;
  border-color: #78350f;
}

[data-theme="dark"] .formula-help-details summary {
  background: var(--bg-dark, #1a1a1a);
}

[data-theme="dark"] .formula-help-table code {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* ============================================================
   FIX: MODAL DE IMPORTAÇÃO - Botões sempre visíveis
   ============================================================ */
#geo-import-modal .csv-modal-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

#geo-import-modal .geo-import-tab-content {
  overflow-y: auto;
  max-height: calc(80vh - 120px);
}

/* ============================================================
   PICKER DE SIMBOLOGIA SVG
   ============================================================ */
.symbol-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-body);
}

.symbol-picker-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  padding: 4px;
  background: var(--bg-panel);
}

.symbol-picker-item:hover {
  border-color: var(--primary-color);
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.symbol-picker-item.selected {
  border-color: var(--primary-color);
  background: rgba(var(--primary-rgb, 0, 86, 179), 0.15);
  box-shadow: 0 0 0 2px var(--primary-color);
}

.symbol-picker-item img {
  width: 24px;
  height: 24px;
  pointer-events: none;
  filter: invert(1);
}

/* Inverte SVGs brancos para ficarem visíveis nos botões da sidebar */
.btn-symbol-picker img,
#symbolPreviewImg {
  filter: invert(1);
}

.symbol-picker-category {
  font-size: 10px;
  font-weight: bold;
  color: var(--text-secondary);
  text-transform: uppercase;
  padding: 4px 0 2px;
  letter-spacing: 0.5px;
}

/* ═══ LINE STYLE PICKER ═══ */
.line-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 4px;
}

.line-style-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  background: var(--bg-panel, #fff);
  transition: all 0.2s;
}

.line-style-item:hover {
  background: rgba(var(--primary-rgb, 0, 86, 179), 0.08);
  border-color: rgba(var(--primary-rgb, 0, 86, 179), 0.3);
}

.line-style-item.selected {
  background: rgba(var(--primary-rgb, 0, 86, 179), 0.15);
  border-color: var(--primary-color);
}

.line-style-item canvas {
  width: 80px;
  height: 14px;
}

.line-style-item span {
  font-size: 8px;
  color: var(--text-main, #333);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.symbol-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-light);
  border-radius: 6px;
  margin-top: 6px;
}

.symbol-preview img {
  width: 32px;
  height: 32px;
}

.symbol-preview span {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Tema escuro */
[data-theme="dark"] .symbol-picker-grid {
  background: var(--bg-input);
  border-color: var(--border-color);
}

[data-theme="dark"] .symbol-picker-item {
  background: var(--bg-panel);
}

[data-theme="dark"] .symbol-picker-item:hover {
  border-color: var(--primary-color);
}

/* Botão para abrir o picker na sidebar */
.btn-symbol-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  background: var(--bg-panel);
  transition: all 0.2s;
  padding: 3px;
}

.btn-symbol-picker:hover {
  border-color: var(--primary-color);
  background: var(--bg-light);
}

.btn-symbol-picker img {
  width: 20px;
  height: 20px;
}



/* ============================================================
   ESTATÍSTICAS POR COLUNA — MODAL COM SELETOR (.astm-*)
   ============================================================ */

.astm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  animation: astmFade 0.15s ease;
}
@keyframes astmFade { from{opacity:0} to{opacity:1} }

.astm-dialog {
  width: 480px; max-width: 94vw; max-height: 82vh;
  background: #fff; border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: astmSlide 0.2s cubic-bezier(0.25,0.8,0.25,1);
}
@keyframes astmSlide { from{opacity:0;transform:translateY(16px) scale(0.97)} to{opacity:1;transform:none} }

.astm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0056b3, #003d82);
  color: #fff;
}
.astm-header-left { display: flex; align-items: center; gap: 10px; }
.astm-header-left i { font-size: 18px; }
.astm-title { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; }
.astm-subtitle { font-size: 11px; opacity: 0.7; }
.astm-close {
  width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px; background: rgba(255,255,255,0.1); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.astm-close:hover { background: rgba(255,255,255,0.25); }

/* Seletor de coluna */
.astm-selector {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: #e8ecf1;
  border-bottom: 1px solid #d0d7de;
}
.astm-selector label { font-size: 12px; font-weight: 700; color: #333; white-space: nowrap; }
.astm-selector select {
  flex: 1; padding: 6px 10px; border: 1px solid #b0b8c4;
  border-radius: 6px; font-size: 12px; font-weight: 600;
  background: #fff; color: #1a1a2e; cursor: pointer;
  outline: none; transition: border-color 0.15s;
}
.astm-selector select:focus { border-color: #0056b3; box-shadow: 0 0 0 2px rgba(0,86,179,0.15); }

/* Conteúdo com scroll */
.astm-content {
  flex: 1; overflow-y: auto; padding: 16px;
  background: #f8f9fb;
}
.astm-content::-webkit-scrollbar { width: 6px; }
.astm-content::-webkit-scrollbar-thumb { background: #b0b8c4; border-radius: 3px; }

/* Badge de tipo */
.astm-type-info { margin-bottom: 12px; }
.astm-badge-num, .astm-badge-txt {
  display: inline-block; font-size: 10px; font-weight: 800;
  padding: 3px 10px; border-radius: 4px; letter-spacing: 0.6px;
}
.astm-badge-num { background: #d4edda; color: #155724; border: 1px solid #28a745; }
.astm-badge-txt { background: #cce5ff; color: #004085; border: 1px solid #007bff; }

/* Tabela de métricas */
.astm-stats-table { display: flex; flex-direction: column; gap: 0; }
.astm-stat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid #eaedf0;
  transition: background 0.1s;
}
.astm-stat-row:last-child { border-bottom: none; }
.astm-stat-row:hover { background: #eef1f5; }
.astm-stat-highlight { background: rgba(0,86,179,0.04); }
.astm-stat-icon {
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #0056b3;
  background: rgba(0,86,179,0.08); border-radius: 4px; flex-shrink: 0;
}
.astm-stat-label { flex: 1; font-size: 12px; font-weight: 600; color: #444; }
.astm-stat-value {
  font-size: 13px; font-weight: 800; color: #1a1a2e;
  font-family: 'SFMono-Regular','Cascadia Code','Consolas',monospace;
  text-align: right;
}
.astm-big { font-size: 15px; color: #0056b3; }

/* Frequência */
.astm-freq-section { margin-top: 16px; }
.astm-freq-header {
  font-size: 11px; font-weight: 700; color: #0056b3;
  text-transform: uppercase; letter-spacing: 0.6px;
  padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 2px solid #d0d7de;
}
.astm-freq { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.astm-freq-lbl {
  min-width: 110px; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #333; font-weight: 600; font-size: 11px;
}
.astm-freq-bg { flex: 1; height: 16px; background: #e8ecf1; border-radius: 4px; overflow: hidden; }
.astm-freq-fill {
  height: 100%; border-radius: 4px; min-width: 3px;
  background: linear-gradient(90deg, #0056b3, #3d8bfd);
  transition: width 0.4s ease;
}
.astm-freq-n {
  min-width: 70px; text-align: right; font-size: 11px;
  color: #555; font-weight: 600;
  font-family: 'SFMono-Regular','Cascadia Code','Consolas',monospace;
}
.astm-freq-n small { color: #888; }

/* Context menu */
.attr-stats-ctx {
  position: fixed; z-index: 10000;
  background: #fff; border: 1px solid #d0d7de;
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  padding: 6px 0; min-width: 200px; animation: astmFade 0.12s ease;
}
.attr-stats-ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 12px; font-weight: 500;
  color: #333; cursor: pointer;
}
.attr-stats-ctx-item:hover { background: #e8ecf1; }
.attr-stats-ctx-item i { font-size: 14px; color: #0056b3; width: 18px; text-align: center; }
.attr-stats-active {
  background: rgba(0,86,179,0.15) !important;
  color: #0056b3 !important; border-color: #0056b3 !important;
}

/* ===== DARK ===== */
[data-theme="dark"] .astm-overlay { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .astm-dialog { background: #1e2530; }
[data-theme="dark"] .astm-header { background: linear-gradient(135deg, #1a73e8, #0d47a1); }
[data-theme="dark"] .astm-selector { background: #2a3441; border-bottom-color: #3a4556; }
[data-theme="dark"] .astm-selector label { color: #ccc; }
[data-theme="dark"] .astm-selector select { background: #323e4f; color: #e8eaed; border-color: #4a5568; }
[data-theme="dark"] .astm-selector select:focus { border-color: #4285f4; }
[data-theme="dark"] .astm-content { background: #1e2530; }
[data-theme="dark"] .astm-content::-webkit-scrollbar-thumb { background: #3a4556; }
[data-theme="dark"] .astm-badge-num { background: rgba(76,175,80,0.15); color: #81c784; border-color: #4caf50; }
[data-theme="dark"] .astm-badge-txt { background: rgba(100,181,246,0.15); color: #90caf9; border-color: #64b5f6; }
[data-theme="dark"] .astm-stat-row { border-bottom-color: #2d3748; }
[data-theme="dark"] .astm-stat-row:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .astm-stat-highlight { background: rgba(66,133,244,0.06); }
[data-theme="dark"] .astm-stat-icon { color: #64b5f6; background: rgba(100,181,246,0.1); }
[data-theme="dark"] .astm-stat-label { color: #9aa5b4; }
[data-theme="dark"] .astm-stat-value { color: #e8eaed; }
[data-theme="dark"] .astm-big { color: #64b5f6; }
[data-theme="dark"] .astm-freq-header { color: #64b5f6; border-bottom-color: #3a4556; }
[data-theme="dark"] .astm-freq-lbl { color: #e0e0e0; }
[data-theme="dark"] .astm-freq-bg { background: #3a4556; }
[data-theme="dark"] .astm-freq-fill { background: linear-gradient(90deg, #1a73e8, #4285f4); }
[data-theme="dark"] .astm-freq-n { color: #9aa5b4; }
[data-theme="dark"] .attr-stats-ctx { background: #2a3441; border-color: #3a4556; }
[data-theme="dark"] .attr-stats-ctx-item { color: #e0e0e0; }
[data-theme="dark"] .attr-stats-ctx-item:hover { background: #323e4f; }
[data-theme="dark"] .attr-stats-ctx-item i { color: #64b5f6; }