/*
 * TASK-163 / TASK-165 — Override dark mode para el toolbar de ApexCharts
 *
 * La hoja del plugin (apexcharts.css) fija el color de los iconos del toolbar (menu, zoom
 * in/out, pan, reset, seleccion) con valores claros hardcoded y no esta scopeada bajo
 * body.dark, por lo que el toolbar queda apagado sobre el panel oscuro del tema.
 *
 * Tecnica de dibujo: TODOS los iconos del plugin (Blazor-ApexCharts 7.x) son SVG Feather
 * con `fill="none"` y `stroke="currentColor"` — igual que el icono propio de descarga PNG
 * (Utils/GraficoPngExport.cs). Ninguno se pinta con `fill`. Por tanto el override solo debe
 * fijar `color`, y debe hacerlo en el BOTON (`.apexcharts-*-icon`), que es donde el plugin
 * declara `color`; fijarlo solo en `.apexcharts-toolbar` no cascadea.
 *
 * TASK-165 corrige el error introducido por TASK-163: aplicar `fill:#e0e6ed` sobre paths
 * abiertos convertia los iconos en manchas solidas. Aqui no se usa `fill` ni `stroke`.
 *
 * Estas reglas se aplican SOLO bajo body.dark (no afectan el modo claro). `body.dark` + 2
 * clases (3 clases) supera la especificidad del plugin (`.apexcharts-theme-light .x:hover`),
 * de modo que no se requiere !important. El hover se declara explicitamente porque el canvas
 * queda como `apexcharts-theme-light` (el proyecto no fija Theme.Mode).
 *
 * Paleta tomada del tema oscuro del template Cork (wwwroot/assets/css/dark/main.css):
 *   fondo panel     #1b2e4b
 *   fondo hover     #191e3a
 *   borde / sombra  #0e1726
 *   texto claro     #e0e6ed
 *   activo          #4361ee
 */

body.dark .apexcharts-toolbar {
    background: transparent;
    color: #e0e6ed;
}

body.dark .apexcharts-toolbar .apexcharts-menu-icon,
body.dark .apexcharts-toolbar .apexcharts-zoom-icon,
body.dark .apexcharts-toolbar .apexcharts-zoomin-icon,
body.dark .apexcharts-toolbar .apexcharts-zoomout-icon,
body.dark .apexcharts-toolbar .apexcharts-pan-icon,
body.dark .apexcharts-toolbar .apexcharts-reset-icon,
body.dark .apexcharts-toolbar .apexcharts-selection-icon,
body.dark .apexcharts-toolbar .apexcharts-toolbar-custom-icon {
    color: #e0e6ed;
}

body.dark .apexcharts-toolbar .apexcharts-menu-icon:hover,
body.dark .apexcharts-toolbar .apexcharts-zoom-icon:hover,
body.dark .apexcharts-toolbar .apexcharts-zoomin-icon:hover,
body.dark .apexcharts-toolbar .apexcharts-zoomout-icon:hover,
body.dark .apexcharts-toolbar .apexcharts-pan-icon:hover,
body.dark .apexcharts-toolbar .apexcharts-reset-icon:hover,
body.dark .apexcharts-toolbar .apexcharts-selection-icon:hover,
body.dark .apexcharts-toolbar .apexcharts-toolbar-custom-icon:hover {
    background: #191e3a;
    color: #fff;
}

body.dark .apexcharts-toolbar .apexcharts-selected {
    color: #4361ee;
    background: rgba(67, 97, 238, .15);
}

body.dark .apexcharts-menu {
    background: #1b2e4b;
    border-color: #0e1726;
    color: #e0e6ed;
}

body.dark .apexcharts-menu-item:hover {
    background: #191e3a;
}

/*
 * TASK-166 — Override dark mode para el tooltip de ApexCharts
 *
 * El canvas se renderiza como `apexcharts-theme-light` (el proyecto no fija Theme.Mode), de
 * modo que el plugin sirve el tooltip con `.apexcharts-tooltip.apexcharts-theme-light`
 * (fondo #fff, borde #e3e3e3) y el titulo con fondo #ECEFF1: sobre el panel oscuro queda
 * como un recuadro blanco. Igual que TASK-163/165, se compensa por especificidad
 * (`body.dark` + 2 clases) sin recurrir a !important.
 *
 * Los tooltips de eje (`.apexcharts-xaxistooltip` / `.apexcharts-yaxistooltip`) llevan sus
 * flechas dibujadas con `border-*-color` en :before/:after, por lo que hay que repintar
 * tanto el borde exterior (#0e1726) como el relleno (#191e3a) para que la punta no quede
 * blanca.
 *
 * Paleta: la misma del tema oscuro del template Cork documentada arriba.
 */

body.dark .apexcharts-tooltip.apexcharts-theme-light {
    background: #1b2e4b;
    border-color: #0e1726;
    color: #e0e6ed;
    box-shadow: 2px 2px 6px -4px #0e1726;
}

body.dark .apexcharts-tooltip-title,
body.dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: #191e3a;
    border-bottom-color: #0e1726;
    color: #e0e6ed;
}

body.dark .apexcharts-tooltip-text,
body.dark .apexcharts-tooltip-text-y-value,
body.dark .apexcharts-tooltip-y-group {
    color: #e0e6ed;
}

body.dark .apexcharts-xaxistooltip,
body.dark .apexcharts-yaxistooltip {
    background: #191e3a;
    border-color: #0e1726;
    color: #e0e6ed;
}

body.dark .apexcharts-xaxistooltip:before {
    border-bottom-color: #0e1726;
}

body.dark .apexcharts-xaxistooltip:after {
    border-bottom-color: #191e3a;
}

body.dark .apexcharts-xaxistooltip-bottom:before {
    border-top-color: #0e1726;
}

body.dark .apexcharts-xaxistooltip-bottom:after {
    border-top-color: #191e3a;
}

body.dark .apexcharts-yaxistooltip:before {
    border-right-color: #0e1726;
}

body.dark .apexcharts-yaxistooltip:after {
    border-right-color: #191e3a;
}