/* =============================================================================
   SUPERSET — APOSTA TUDO
   Tema dark profissional, aplicação global
   ============================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Variáveis globais ---------- */
:root {
  --bg-deep: #0a0e12;
  --bg-base: #0d1217;
  --bg-card: #14181d;
  --bg-card-hover: #1a1f26;
  --bg-elevated: #1a1f26;

  --border-subtle: #1f252d;
  --border-1: #2a3038;
  --border-2: #4a5159;

  --text-1: #ffffff;
  --text-2: #b8bcc4;
  --text-3: #6b7280;
  --text-4: #4a5159;

  --cyan-bright: #00d4ff;
  --cyan-deep: #0891b2;
  --cyan-soft: #6dd2f0;
  --cyan-glow: rgba(0, 212, 255, 0.12);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 0 1px rgba(0, 212, 255, 0.2);
}

/* ---------- Base ---------- */
body,
.app,
.dashboard,
.dashboard-content,
.grid-content {
  background: var(--bg-deep) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               sans-serif !important;
  color: var(--text-1);
}

/* ===== HEADER GLOBAL (top bar do Superset) ===== */
.navbar,
.header-with-actions,
[class*="HeaderContainer"] {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border-1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ===== HEADER DO DASHBOARD ===== */
.dashboard-header,
.dashboard-header-container,
.header-with-actions.dashboard-header,
[data-test="dashboard-header"] {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border-1) !important;
  position: relative;
  z-index: 100;
}

.with-popover-menu,
.dashboard-header-container > div,
[data-test="dashboard-header-container"] {
  background: var(--bg-base) !important;
}

.dashboard-header .editable-title input,
.dashboard-header h1,
.dashboard-header h2 {
  color: var(--text-1) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* =============================================================================
   HEADER DO DASHBOARD — clean, sem chips/pills individuais
   Classes ofuscadas (superset-XXX) variam entre builds — atacamos por
   atributos estáveis (aria-*, .metadata-*) em vez de hashes.
   ============================================================================= */

/* Título: input "disabled" em modo View vira texto puro */
.ant-input-disabled.dynamic-title-input,
input.dynamic-title-input,
.dashboard-header input.ant-input,
.dashboard-header input.ant-input-disabled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-1) !important;
  cursor: default !important;
  padding-left: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Modo Edit: hint sutil ao focar/hoverar */
.dashboard-header input.ant-input:not([disabled]):hover,
.dashboard-header input.ant-input:not([disabled]):focus {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-1) !important;
}

/* Ícones do header (owner, edit) discretos */
.dashboard-header [aria-label="user"],
.dashboard-header [aria-label="edit"] {
  color: var(--text-3) !important;
}

/* Chips de owner / modified time — qualquer ancestral que envolva metadata-* */
.dashboard-header *:has(> .metadata-text),
.dashboard-header *:has(> .metadata-icon),
.dashboard-header *:has(.metadata-text),
.dashboard-header *:has(.metadata-icon),
.header-with-actions *:has(> .metadata-text),
.header-with-actions *:has(> .metadata-icon),
.header-with-actions *:has(.metadata-text),
.header-with-actions *:has(.metadata-icon),
/* Fallback aria-describedby (versões mais antigas) */
.dashboard-header div[aria-describedby^="rc_unique"],
.header-with-actions div[aria-describedby^="rc_unique"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 6px !important;
  margin: 0 2px !important;
}

/* Texto dos chips */
.dashboard-header .metadata-text,
.header-with-actions .metadata-text {
  color: var(--text-3) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  background: transparent !important;
}

/* Ícone dos chips */
.dashboard-header .metadata-icon,
.header-with-actions .metadata-icon {
  color: var(--text-3) !important;
  background: transparent !important;
  opacity: 0.7;
}

/* Estrela de favorito — sem background */
.dashboard-header .anticon-star,
.dashboard-header [aria-label="star"],
.dashboard-header [aria-label="favorite"] {
  background: transparent !important;
}

/* Tag "Published" — só borda fina */
.dashboard-header .ant-tag {
  background: transparent !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 12px !important;
  padding: 2px 10px !important;
}

/* Botão "Edit dashboard" — borda sutil, transparente */
.dashboard-header .ant-btn-default,
.header-with-actions .ant-btn-default {
  background: transparent !important;
  border: 1px solid var(--border-1) !important;
  color: var(--text-1) !important;
}

.dashboard-header .ant-btn-default:hover,
.header-with-actions .ant-btn-default:hover {
  background: var(--bg-card-hover) !important;
  border-color: var(--cyan-deep) !important;
  color: var(--cyan-bright) !important;
}

/* Tabs */
.dashboard-component-tabs .ant-tabs-tab {
  color: var(--text-3) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.dashboard-component-tabs .ant-tabs-tab-active,
.dashboard-component-tabs .ant-tabs-tab:hover {
  color: var(--cyan-bright) !important;
}

.dashboard-component-tabs .ant-tabs-ink-bar {
  background: var(--cyan-bright) !important;
  height: 2px !important;
}

/* ===== CARDS DE CHART ===== */
.dashboard-component-chart-holder {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.015) !important;
  padding: 18px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease,
              background 0.2s ease !important;
  position: relative;  /* importante: serve de âncora pros ícones absolute */
}

.dashboard-component-chart-holder:hover {
  background: var(--bg-card-hover) !important;
  border-color: rgba(0, 212, 255, 0.25) !important;
  box-shadow: var(--shadow-md), var(--shadow-glow) !important;
}

/* ===== TÍTULO DO CHART ===== */
.dashboard-component-chart-holder .header-title,
.dashboard-component-chart-holder .editable-title,
.chart-header .header-title {
  color: var(--text-2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 10px !important;
  opacity: 0.85;
  /* removido o max-width que reservava espaço pra ícones — agora estão no canto inferior */
}

/* ===== BIG NUMBERS — RESPEITAR CONFIG NATIVA =====
   Removidas TODAS as regras que forçavam font-size, weight, color e layout
   do valor. O Superset controla 100% baseado no que o user escolhe no
   painel "Customize" → "Font size" (Tiny/Small/Normal/Large/Huge/Custom).
   Não mexer aqui — qualquer override quebra o controle nativo. */

/* ===========================================================================
   KEBAB MENU (3 pontinhos) — CANTO SUPERIOR DIREITO (top: 2px / right: 6px)
   Invisível no normal, aparece com hover do card.
   =========================================================================== */

.dashboard-component-chart-holder .header-controls,
.dashboard-component-chart-holder .right-button-panel,
.chart-header .right-button-panel,
.chart-header [data-test="dashboard-chart-header-icons"] {
  position: absolute !important;
  top: 2px !important;
  right: 6px !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 5;
}

.dashboard-component-chart-holder:hover .header-controls,
.dashboard-component-chart-holder:hover .right-button-panel,
.dashboard-component-chart-holder:hover [data-test="dashboard-chart-header-icons"] {
  opacity: 0.85 !important;
  pointer-events: auto !important;
}

.dashboard-component-chart-holder .header-controls:hover,
.dashboard-component-chart-holder .right-button-panel:hover {
  opacity: 1 !important;
}

/* Ícones pequenos e discretos */
.dashboard-component-chart-holder .header-controls svg,
.dashboard-component-chart-holder .header-controls i,
.dashboard-component-chart-holder .right-button-panel svg,
.dashboard-component-chart-holder .right-button-panel i {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
}

.dashboard-component-chart-holder .header-controls button,
.dashboard-component-chart-holder .right-button-panel button,
.dashboard-component-chart-holder .header-controls > span {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  border-radius: 4px !important;
  height: auto !important;
  min-width: auto !important;
  width: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dashboard-component-chart-holder .header-controls button:hover,
.dashboard-component-chart-holder .right-button-panel button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* =============================================================================
   FILTRO APLICADO — bolinha cyan com NÚMERO de filtros, hover-only
   Seletor real: .filter-counts (não .applied-filters-indicator).
   ============================================================================= */

.dashboard-component-chart-holder .filter-counts {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  /* Logo abaixo do kebab, mesma linha vertical (kebab: top:2 / right:6 → bolinha: top:16 / right:6) */
  position: absolute !important;
  top: 16px !important;
  right: 6px !important;
  bottom: auto !important;
  left: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* Invisível no estado normal — aparece com hover do card */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
  z-index: 6;
}

/* Esconde o ícone funil — só queremos a bolinha com número */
.dashboard-component-chart-holder .filter-counts .anticon-filter,
.dashboard-component-chart-holder .filter-counts .anticon-filter svg {
  display: none !important;
}

/* Container do badge fica transparente */
.dashboard-component-chart-holder .filter-counts .applied-count,
.dashboard-component-chart-holder .filter-counts .ant-badge {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* O número (badge cyan circular) — bem pequeno, 50% opaco */
.dashboard-component-chart-holder .filter-counts .ant-badge-count,
.dashboard-component-chart-holder .filter-counts .ant-scroll-number {
  background: rgba(0, 212, 255, 0.5) !important;
  color: #0a0e12 !important;
  font-weight: 700 !important;
  font-size: 8px !important;
  min-width: 11px !important;
  height: 11px !important;
  line-height: 11px !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.08) !important;
  padding: 0 !important;
}

.dashboard-component-chart-holder .filter-counts .ant-scroll-number-only,
.dashboard-component-chart-holder .filter-counts .ant-scroll-number-only-unit {
  color: #0a0e12 !important;
  font-weight: 700 !important;
}

/* Aparece ao hover do card */
.dashboard-component-chart-holder:hover .filter-counts {
  opacity: 0.95 !important;
  pointer-events: auto !important;
}

/* Hover direto na bolinha — 100% + glow expande */
.dashboard-component-chart-holder .filter-counts:hover {
  opacity: 1 !important;
}

.dashboard-component-chart-holder .filter-counts:hover .ant-badge-count {
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.25) !important;
  transform: scale(1.05);
  transition: all 0.15s ease;
}

/* ===== FILTER BAR (sidebar) ===== */
.dashboard-filters,
.filter-bar,
[data-test="dashboard-filter-control-container"] {
  background: var(--bg-base) !important;
  border-right: 1px solid var(--border-1) !important;
}

.filter-control,
.filter-control-container {
  background: transparent !important;
  margin-bottom: 12px;
}

.filter-control label {
  color: var(--text-3) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.filter-control input,
.filter-control .ant-select-selector,
.filter-bar input,
.filter-bar .ant-select-selector,
.ant-select-selector {
  background: var(--bg-card) !important;
  border-color: var(--border-1) !important;
  border-radius: 8px !important;
  color: var(--text-1) !important;
  font-size: 13px !important;
  min-height: 36px !important;
}

.ant-select-focused .ant-select-selector,
.ant-select-selector:hover {
  border-color: var(--cyan-deep) !important;
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15) !important;
}

/* ===== BOTÕES ===== */
.ant-btn-primary,
.btn-primary,
.superset-button-primary {
  background: var(--cyan-deep) !important;
  border-color: var(--cyan-deep) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  height: 36px !important;
}

.ant-btn-primary:hover,
.btn-primary:hover {
  background: #06b6d4 !important;
  border-color: #06b6d4 !important;
}

.ant-btn-default,
.btn-default {
  background: var(--bg-card) !important;
  border-color: var(--border-1) !important;
  color: var(--text-1) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}

.ant-btn-default:hover {
  border-color: var(--cyan-deep) !important;
  color: var(--cyan-bright) !important;
}

/* ===== TABELAS ===== */
.dashboard-component-chart-holder table,
table.table {
  font-size: 13px !important;
  color: var(--text-2) !important;
}

.dashboard-component-chart-holder table thead th,
table.table thead th {
  background: var(--bg-elevated) !important;
  border-color: var(--border-1) !important;
  color: var(--text-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.dashboard-component-chart-holder table tbody tr:hover,
table.table tbody tr:hover {
  background: rgba(0, 212, 255, 0.03) !important;
}

/* ===== HOME (Welcome page) ===== */
.welcome,
.dashboard-list,
main {
  background: var(--bg-deep) !important;
}

.list-view-card-container,
[data-test="list-view-card"],
.ant-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease;
}

.list-view-card-container:hover,
[data-test="list-view-card"]:hover,
.ant-card:hover {
  background: var(--bg-card-hover) !important;
  border-color: rgba(0, 212, 255, 0.25) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-deep);
}

/* ===== ECHARTS ===== */
.echarts-for-react {
  background: transparent !important;
}

/* ===== FOCUS STATES ===== */
*:focus {
  outline: none !important;
}

input:focus,
button:focus,
.ant-select-focused {
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2) !important;
}

/* =============================================================================
   FILTER BAR — engrenagem e botões Apply/Clear (refinamento)
   ============================================================================= */

/* ---------- ENGRENAGEM (settings do filter bar) ----------
   Tem classes superset-button + superset-button-link que herdam estilo de botão.
   Forçamos visual de "ícone solto" sem caixa via :has(.anticon-setting). */
.ant-btn.superset-button-link:has(.anticon-setting),
.ant-btn.ant-btn-variant-link:has(.anticon-setting),
button.ant-dropdown-trigger:has(.anticon-setting) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  border-radius: 6px !important;
  height: auto !important;
  min-width: auto !important;
  width: auto !important;
  color: var(--text-3) !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

.ant-btn.superset-button-link:has(.anticon-setting):hover,
.ant-btn.ant-btn-variant-link:has(.anticon-setting):hover,
button.ant-dropdown-trigger:has(.anticon-setting):hover {
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--cyan-bright) !important;
  border: none !important;
  box-shadow: none !important;
}

.ant-btn.superset-button-link:has(.anticon-setting):focus,
.ant-btn.ant-btn-variant-link:has(.anticon-setting):focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ícone herda cor do botão pai */
.ant-btn .anticon-setting,
.ant-btn .anticon-setting svg {
  color: inherit !important;
}

/* ---------- SETINHA (collapse/expand do filter bar) ----------
   Cobre todos os estados (normal, hover, focus, active, focus-visible) e zera
   background, border, outline, box-shadow. Usa [class*="ant-btn"] em vez de
   .ant-btn pra pegar variantes mais sólido. */
button[class*="ant-btn"]:has([data-icon="vertical-align-top"]),
button[class*="ant-btn"]:has([data-icon="vertical-align-bottom"]),
button[class*="ant-btn"]:has([data-icon="vertical-align-middle"]),
button[class*="ant-btn"]:has([data-icon="vertical-align-top"]):hover,
button[class*="ant-btn"]:has([data-icon="vertical-align-bottom"]):hover,
button[class*="ant-btn"]:has([data-icon="vertical-align-top"]):focus,
button[class*="ant-btn"]:has([data-icon="vertical-align-bottom"]):focus,
button[class*="ant-btn"]:has([data-icon="vertical-align-top"]):focus-visible,
button[class*="ant-btn"]:has([data-icon="vertical-align-bottom"]):focus-visible,
button[class*="ant-btn"]:has([data-icon="vertical-align-top"]):active,
button[class*="ant-btn"]:has([data-icon="vertical-align-bottom"]):active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-style: none !important;
  outline: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  padding: 4px !important;
  border-radius: 6px !important;
  height: auto !important;
  min-width: auto !important;
  width: auto !important;
}

/* Hover separado — só fundo, sem borda */
button[class*="ant-btn"]:has([data-icon="vertical-align-top"]):hover,
button[class*="ant-btn"]:has([data-icon="vertical-align-bottom"]):hover {
  background: rgba(0, 212, 255, 0.08) !important;
  color: var(--cyan-bright) !important;
}

button[class*="ant-btn"]:has([data-icon="vertical-align-top"]) svg,
button[class*="ant-btn"]:has([data-icon="vertical-align-bottom"]) svg {
  color: inherit !important;
}

button[class*="ant-btn"]:has([data-icon="vertical-align-top"]) {
  color: var(--text-3) !important;
}

/* ---------- APPLY + CLEAR ALL — mesmas dimensões, gap 2px ---------- */

.filter-apply-button,
.filter-clear-all-button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 6px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Apply — outline cyan */
.filter-apply-button {
  background: rgba(0, 212, 255, 0.12) !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  color: var(--cyan-bright) !important;
}

.filter-apply-button:hover:not([disabled]) {
  background: rgba(0, 212, 255, 0.2) !important;
  border-color: var(--cyan-bright) !important;
}

.filter-apply-button[disabled],
.filter-apply-button:disabled {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--border-1) !important;
  color: var(--text-3) !important;
  opacity: 1 !important;
}

.filter-apply-button[disabled] span,
.filter-apply-button:disabled span {
  color: var(--text-3) !important;
}

/* Clear all — link discreto, mesmas dimensões (border transparent ocupa largura) */
.filter-clear-all-button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-3) !important;
  font-weight: 400 !important;
}

.filter-clear-all-button:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-1) !important;
  border-color: transparent !important;
}

/* Gap 2px entre Apply e Clear (qualquer ordem no DOM) */
.filter-apply-button + .filter-clear-all-button,
.filter-clear-all-button + .filter-apply-button {
  margin-left: 2px !important;
}

/* =============================================================================
   LAYOUT WRAPPERS — transparentes, deixa o fundo do dashboard aparecer
   ============================================================================= */

/* Rows do grid (linhas que agrupam charts horizontalmente) */
.grid-row,
.grid-row.background--transparent,
.grid-row.background--white,
[data-test="grid-row"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Wrappers de drag-and-drop (cada chart vive dentro deles) */
.dragdroppable,
.dragdroppable-row,
.dragdroppable-column,
.dragdroppable-tab {
  background: transparent !important;
}

/* Container redimensionável (o "frame" ao redor do chart) */
.resizable-container {
  background: transparent !important;
}

/* Componentes wrapper genéricos — exceto chart-holder que tem visual de card */
.dashboard-component:not(.dashboard-component-chart-holder) {
  background: transparent !important;
}

/* Tabs: wrapper transparente, mas a barra de nav das tabs precisa
   destacar a área onde os títulos clicáveis ficam */
.dashboard-component-tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Barra de nav das tabs do dashboard — dá visibilidade ao trecho de seleção */
.dashboard-component-tabs > .ant-tabs > .ant-tabs-nav,
.dashboard-component-tabs .ant-tabs-nav {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border-1) !important;
  margin: 0 !important;
  padding: 0 12px !important;
}

.dashboard-component-tabs .ant-tabs-nav::before {
  border: none !important;
}

/* Markdown — neutralizar card (markdown não deve parecer chart) */
.dashboard-component-chart-holder:has(.dashboard-markdown) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.dashboard-component-chart-holder:has(.dashboard-markdown):hover {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.dashboard-markdown {
  background: transparent !important;
  border: none !important;
}

.dashboard-markdown h1,
.dashboard-markdown h2,
.dashboard-markdown h3 {
  color: var(--text-1) !important;
  margin: 0 !important;
}

/* =============================================================================
   GARANTIR que o fundo do dashboard inteiro é --bg-deep (#0a0e12)
   ============================================================================= */

/* Containers que envolvem o grid de charts */
.dashboard-content,
.dashboard-content-wrapper,
.dashboard .grid-content,
.dashboard-grid,
[data-test="grid-content"],
[data-test="dashboard-content-wrapper"],
.dashboard > div,
.dashboard-builder,
.dashboard-builder-sidepane,
.dashboard-builder-content,
.tab-content {
  background: var(--bg-deep) !important;
}

/* Tab content (área dentro de cada aba) */
.ant-tabs-tabpane,
.ant-tabs-content,
.ant-tabs-content-holder,
[role="tabpanel"] {
  background: var(--bg-deep) !important;
}

/* Refina header-with-actions: só pega o header DO DASHBOARD,
   não wrappers internos que estavam vazando #0D1217 */
[class*="HeaderContainer"]:not(.dashboard-header):not(.header-with-actions) {
  background: transparent !important;
}

/* =============================================================================
   FIX: .with-popover-menu (wrapper de chart) estava vazando #0d1217
   =============================================================================
   O .with-popover-menu envolve cada chart do dashboard. Herdava --bg-base da
   regra antiga do dashboard-header. Encadeamos com ancestral do conteúdo do
   dashboard pra não pegar o .with-popover-menu do header (se houver). */
.dashboard-content .with-popover-menu,
.grid-content .with-popover-menu,
.grid-row .with-popover-menu,
.dragdroppable .with-popover-menu,
.dashboard .with-popover-menu {
  background: transparent !important;
}