/* Tutti i testi ApexCharts = colore testo Bootstrap */

.apexcharts-text, .apexcharts-legend-text, .apexcharts-tooltip, .apexcharts-tooltip span, .apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-title-text, .apexcharts-subtitle-text {
  fill: var(--bs-body-color) !important;
  color: var(--bs-body-color) !important;
}

/* 1. LEGEND CUSTOM (Mobile / Desktop) */

/* Sovrascrive i colori hardcoded (inline styles) definiti nei tuoi formatter JS */

.apexcharts-legend-text span {
  color: var(--bs-body-color) !important;
}

/* 2. NUMERI SUI GRAFICI (Data Labels) */

/* Forza il colore di riempimento (fill) per i numeri stampati dentro/sopra le barre */

.apexcharts-datalabel, .apexcharts-datalabel-value, .apexcharts-datalabels text {
  fill: var(--bs-body-color) !important;
  color: var(--bs-body-color) !important;
}

/* 3. FINESTRA TOOLTIP (Al passaggio del mouse) */

/* Rende lo sfondo e il testo coerenti con il tema Bootstrap */

.apexcharts-tooltip {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Stile per l'intestazione del tooltip (se presente, es. la data) */

.apexcharts-tooltip-title {
  background-color: var(--bs-tertiary-bg) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
  font-family: inherit !important;
}

/* Stile per i valori specifici dentro il tooltip */

.apexcharts-tooltip-text-value, .apexcharts-tooltip-text-z-value, .apexcharts-tooltip-text-label {
  color: var(--bs-body-color) !important;
}

/* Nasconde il pallino colorato nel tooltip se ridondante (opzionale) */

/* .apexcharts-tooltip-marker { margin-right: 10px; } */

/* --- ECCEZIONE: SOLO TOOLTIP DARK PER IL FUNNEL --- */

/* 1. NUMERI DENTRO IL GRAFICO (Le % sulle fette) */

/* Li lasciamo bianchi perché solitamente sono sopra le fette colorate */

#userEngagmentFunnel .apexcharts-datalabel, #userEngagmentFunnel .apexcharts-datalabel-value, #userEngagmentFunnel .apexcharts-datalabels text {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Nota: Ho RIMOSSO .apexcharts-legend-text da qui sopra.
   Così la legenda seguirà il colore standard di Bootstrap (scuro su chiaro). */

/* 2. SFONDO TOOLTIP DARK */

#userEngagmentFunnel .apexcharts-tooltip {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
}

/* 3. TESTI E VALORI NEL TOOLTIP (Il fix per i numeri neri) */

/* Forza qualsiasi testo dentro il tooltip del funnel a essere bianco */

#userEngagmentFunnel .apexcharts-tooltip-title, #userEngagmentFunnel .apexcharts-tooltip-text, #userEngagmentFunnel .apexcharts-tooltip-text-label, #userEngagmentFunnel .apexcharts-tooltip-text-value, #userEngagmentFunnel .apexcharts-tooltip-text-z-value, #userEngagmentFunnel .apexcharts-tooltip span {
  color: #ffffff !important;
  background: transparent !important;
}