/* Dark Mode CSS for Python Dash EDA App */

:root {
  /* Dark mode color variables - matching Vue.js app */
  --dark-mode-bg: #111827;
  --dark-mode-bg-2: #1F2937;
  --dark-mode-card-bg: #071E2B;
  --dark-mode-card-bg-2: #1E2835;
  --dark-mode-card-bg-3: #404853;
  --dark-mode-card-bg-4: #374151;
  --dark-mode-card-bg-5: #555D6B;
  --dark-mode-card-bg-6: #343A47;
  --dark-mode-text: #ffffff;
  --dark-mode-text-2: #6A7880;
  --dark-mode-text-3: #000000;
  --dark-mode-border: #374151;
  --dark-mode-border-2: #2C404B;
  --dark-mode-border-3: #414955;
  --dark-mode-border-4: #5D646E;
  --dark-mode-hover: #062D42;
  --dark-mode-active: #2298D5;
  --dark-mode-active-2: #145B80;
  --dark-mode-table-header: #0E3D55;
  --dark-mode-table-border-header: #377493;
  --dark-mode-table-border-header-2: #325A6E;
  --dark-mode-table-border: #353B47;
  --dark-mode-tab-bg: #292F3D;
  --dark-mode-tab-border: #535863;
  --dark-mode-tab-active: #18587A;
  --dark-mode-btn-active: #1B7AAA;
  --dark-mode-label: #70747D;
  --dark-mode-btn: #A7D6EE;
  --dark-mode-logout: #EF4444;
  --dark-mode-delete: #342C38;
}

/* Dark mode class */
.dark-mode {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

/* Body and main container dark mode */
.dark-mode body {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .container-fluid {
  background-color: var(--dark-mode-bg-2) !important;
}

/* Loading container dark mode */
.dark-mode .loading-container {
  background-color: var(--dark-mode-bg-2) !important;
  color: var(--dark-mode-text) !important;
}

/* Card dark mode styling */
.dark-mode .card {
  background-color: var(--dark-mode-card-bg-4) !important;
  border-color: var(--dark-mode-card-bg-5) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .card-header {
  background-color: var(--dark-mode-table-header) !important;
  border-color: var(--dark-mode-table-header) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .card-body {
  background-color: var(--dark-mode-card-bg-4) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .card-title {
  color: var(--dark-mode-text) !important;
}

.dark-mode .card-text {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

/* Sidebar dark mode styling */
.dark-mode .sidebar {
  background-color: var(--dark-mode-bg) !important;
  border-left-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .sidebar-heading {
  color: var(--dark-mode-text) !important;
}

.dark-mode .sidebar-label {
  color: var(--dark-mode-label) !important;
}

/* Form elements dark mode */
.dark-mode .form-control,
.dark-mode .form-select {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 152, 213, 0.25) !important;
}

.dark-mode .form-control::placeholder {
  color: var(--dark-mode-label) !important;
}


/* Dropdown dark mode styling */
.dark-mode .Select-control {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-control:hover {
  border-color: var(--dark-mode-border-2) !important;
}



.dark-mode .Select-menu-outer {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .Select-menu {
  background-color: var(--dark-mode-table-border) !important;
}

.dark-mode .Select-option {
  background-color: var(--dark-mode-table-border)  !important;
  color: var(--dark-mode-text) !important;
  border-bottom: 1px solid var(--dark-mode-border-3) !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding: 8px 12px !important;
  min-height: auto !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: initial !important;
  max-width: 100% !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border: none !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.dark-mode .Select-option:hover {
  background-color: var(--dark-mode-hover) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-option.is-selected {
  background-color: var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-placeholder {
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select-clear {
  color: var(--dark-mode-text-3) !important;
  background-color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-text) !important;
}

.dark-mode .Select-value-label {
  color: var(--dark-mode-text) !important;
}

/* Radio buttons and checkboxes dark mode */
.dark-mode .form-check-input {
  background-color: var(--dark-mode-bg-2) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .form-check-input:checked {
  background-color: var(--dark-mode-active) !important;
  border-color: var(--dark-mode-active) !important;
}

.dark-mode .form-check-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .Select--multi .Select-value
{
  background-color: var(--dark-mode-active-2) !important;
  border-color: var(--dark-mode-active-2) !important;
  color: var(--dark-mode-text) !important;
}


/* Common selector styling dark mode */
.dark-mode .common-selector {
  border:1px solid var(--dark-mode-table-border) !important;
}

.dark-mode .common-selector .form-check-label {
  background-color: var(--dark-mode-bg) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .common-selector .form-check-label:hover {
  background-color: var(--dark-mode-table-border) !important;
}

.dark-mode .common-selector .form-check-input:checked + .form-check-label {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
}

/* Fluid phase selector dark mode */
.dark-mode .fluid-phase-selector .form-check-label {
  background-color: var(--dark-mode-bg) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .fluid-phase-selector .form-check-label:hover {
  background-color: var(--dark-mode-table-border) !important;
}

.dark-mode .fluid-phase-selector .form-check-input:checked + .form-check-label {
  background-color: var(--dark-mode-table-border) !important;
}

/* Slider dark mode styling */

.dark-mode .rc-slider-disabled
{
  background-color: var(--dark-mode-bg-2) !important;
}

.dark-mode .rc-slider-track {
  background-color: var(--dark-mode-active) !important;
}

.dark-mode .rc-slider-handle {
  background-color: var(--dark-mode-active-2) !important;
  border-color: var(--dark-mode-active) !important;
}

.dark-mode .rc-slider-handle:hover {
  border-color: var(--dark-mode-active) !important;
}

.dark-mode .rc-slider-handle-dragging {
  border-color: var(--dark-mode-active-2) !important;
  box-shadow: 0 0 0 1px var(--dark-mode-active-2) !important;
}

.dark-mode .rc-slider-mark-text {
  color: var(--dark-mode-text) !important;
}

.dark-mode .rc-slider-tooltip-inner {
  background-color: var(--dark-mode-active-2) !important;
  border-color: var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
}

/* Plotly charts dark mode styling */
.dark-mode .js-plotly-plot .plotly .xaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .yaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .zaxis .axis-title {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .xaxis .tick text,
.dark-mode .js-plotly-plot .plotly .yaxis .tick text,
.dark-mode .js-plotly-plot .plotly .zaxis .tick text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .xaxis line,
.dark-mode .js-plotly-plot .plotly .yaxis line,
.dark-mode .js-plotly-plot .plotly .zaxis line {
  stroke: var(--dark-mode-border) !important;
}

.dark-mode .js-plotly-plot .plotly .xgrid line,
.dark-mode .js-plotly-plot .plotly .ygrid line,
.dark-mode .js-plotly-plot .plotly .zgrid line {
  stroke: var(--dark-mode-border-3) !important;
  opacity: 0.3 !important;
}

.dark-mode .js-plotly-plot .plotly .legend .traces .legendtext {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .legend .bg {
  fill: var(--dark-mode-card-bg-4) !important;
  opacity: 0.9 !important;
}


.dark-mode .js-plotly-plot .plotly .hoverlabel {
  background-color: var(--dark-mode-card-bg-3) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .hoverlabel .hovertext {
  color: var(--dark-mode-text) !important;
}

/* Accordion dark mode styling */
.dark-mode .accordion {
  background-color: var(--dark-mode-bg) !important;
}

.dark-mode .accordion-body {
  background-color: var(--dark-mode-bg) !important;
  color: var(--dark-mode-text) !important;
}

/* Custom dark mode classes for specific components */
.dark-mode .histogram-kde-row {
  background-color: var(--dark-mode-bg-2) !important;
}

.dark-mode .correlation-row {
  background-color: var(--dark-mode-bg-2) !important;
}

.dark-mode .card-histogram-kde,
.dark-mode .card-correlation {
  background-color: var(--dark-mode-card-bg) !important;
  border-color: var(--dark-mode-card-bg) !important;
}
  
.dark-mode .card-header-histogram-kde,
.dark-mode .card-header-correlation {
  background-color: var(--dark-mode-card-bg) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .filter-section-card, .dark-mode .filter-section-card .card-header
{
  background-color: var(--dark-mode-bg) !important;
  color: var(--dark-mode-text) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .filter-section-card img
{
  filter: brightness(0) invert(1);
}


.dark-mode .sidebar-break-line {
  border-bottom: 2px solid var(--dark-mode-border) !important;
}

/* Default plot styling dark mode */
.dark-mode .default-plot {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .default-plot-btn {
  color: var(--dark-mode-text) !important;
  background-color: var(--dark-mode-table-border) !important;
}

.dark-mode .default-plot-btn .btn
{
  background-color: var(--dark-mode-table-border) !important;
}

.dark-mode .add-plot-button
{
  background-color: var(--dark-mode-active-2) !important;
}

.dark-mode .add-plot-button:hover
{
  background-color: var(--dark-mode-active) !important;
}

.dark-mode .fluid-phase-selector .form-check-input:checked + .form-check-label::after
{
  filter: brightness(0) invert(1);
}

.dark-mode .common-selector .form-check
{
  border-right: 1px solid var(--dark-mode-border) !important;
}


/* Depth analysis specific dark mode */
.dark-mode .depth-card .card {
  background-color: var(--dark-mode-card-bg) !important;
}

.dark-mode .depth-x-dropdown-cont
{
  background-color: var(--dark-mode-border) !important;
}

.dark-mode .depth-card .card-body .Select-control {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .depth-card .card-body .Select-placeholder {
  color: var(--dark-mode-text) !important;
}

.dark-mode .depth-card .card-body .Select-value-label {
  color: var(--dark-mode-text) !important;
}

.dark-mode .depth-card .card-body .Select-menu-outer {
  background-color: var(--dark-mode-table-border) !important;
  border-color: var(--dark-mode-border) !important;
}

.dark-mode .depth-card .card-body .Select-option {
  background-color: var(--dark-mode-table-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .depth-card .card-body .Select-option:hover {
  background-color: var(--dark-mode-hover) !important;
}

.dark-mode .depth-card .card-body .Select-option.is-selected {
  background-color: var(--dark-mode-active) !important;
  color: var(--dark-mode-text) !important;
}

/* Clean dark mode dropdown text wrapping solution for sidebar-dropdown */
.dark-mode .sidebar-dropdown .Select-menu-outer .Select-menu .Select-option {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding: 8px 12px !important;
  min-height: 40px !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: initial !important;
  max-width: 100% !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--dark-mode-text) !important;
  background-color: var(--dark-mode-table-border) !important;
  border: none !important;
  margin: 2px 0 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

/* Text content within dark mode options */
.dark-mode .sidebar-dropdown .Select-option .Select-option-label,
.dark-mode .sidebar-dropdown .Select-option span,
.dark-mode .sidebar-dropdown .Select-option div {
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: initial !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hover and selection states for dark mode */
.dark-mode .sidebar-dropdown .Select-menu-outer .Select-menu .Select-option:hover {
  background-color: var(--dark-mode-hover) !important;
  border-radius: 4px !important;
}

.dark-mode .sidebar-dropdown .Select-menu-outer .Select-menu .Select-option.is-focused {
  background-color: var(--dark-mode-hover) !important;
  border-radius: 4px !important;
}

.dark-mode .sidebar-dropdown .Select-menu-outer .Select-menu .Select-option.is-selected {
  background-color: var(--dark-mode-active) !important;
  border-radius: 4px !important;
}

/* Menu container for dark mode */
.dark-mode .sidebar-dropdown .Select-menu-outer {
  min-width: 300px !important;
  max-width: 500px !important;
  width: auto !important;
  z-index: 9999 !important;
}

.dark-mode .sidebar-dropdown .Select-menu-outer .Select-menu {
  padding: 8px 4px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* Shimmer effect dark mode */
.dark-mode .shimmer {
  background: linear-gradient(to right, var(--dark-mode-border-3) 8%, var(--dark-mode-text-2) 18%, var(--dark-mode-border-3) 33%) !important;
}

.dark-mode .shimmer-card {
  background-color: var(--dark-mode-text-2) !important;
}

.dark-mode .shimmer-header,
.dark-mode .shimmer-body {
  background-color: var(--dark-mode-text-2) !important;
}

/* Responsive dark mode adjustments */
@media (max-width: 768px) {
  .dark-mode .sidebar {
    background-color: var(--dark-mode-bg) !important;
  }
}

/* Force dark mode on specific elements when needed */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--dark-mode-border-4) !important;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dark-mode-border-3) !important;
  border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-mode-border-3) !important;
}

/* Axis styling - Enhanced for better visibility */
.dark-mode .js-plotly-plot .plotly .xaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .yaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .zaxis .axis-title {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .xaxis .tick text,
.dark-mode .js-plotly-plot .plotly .yaxis .tick text,
.dark-mode .js-plotly-plot .plotly .zaxis .tick text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  font-weight: 500 !important;
}

/* Additional axis text selectors for better coverage */
.dark-mode .js-plotly-plot .plotly .xaxis text,
.dark-mode .js-plotly-plot .plotly .yaxis text,
.dark-mode .js-plotly-plot .plotly .zaxis text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Specific tick text styling */
.dark-mode .js-plotly-plot .plotly .xaxis .tick text,
.dark-mode .js-plotly-plot .plotly .yaxis .tick text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  font-size: 12px !important;
}

/* Axis lines and ticks */
.dark-mode .js-plotly-plot .plotly .xaxis line,
.dark-mode .js-plotly-plot .plotly .yaxis line,
.dark-mode .js-plotly-plot .plotly .zaxis line {
  stroke: var(--dark-mode-border) !important;
  stroke-width: 1px !important;
}

.dark-mode .js-plotly-plot .plotly .xaxis .tick line,
.dark-mode .js-plotly-plot .plotly .yaxis .tick line,
.dark-mode .js-plotly-plot .plotly .zaxis .tick line {
  stroke: var(--dark-mode-border) !important;
  stroke-width: 1px !important;
}

/* Grid lines */
.dark-mode .js-plotly-plot .plotly .xgrid line,
.dark-mode .js-plotly-plot .plotly .ygrid line,
.dark-mode .js-plotly-plot .plotly .zgrid line {
  stroke: var(--dark-mode-border-3) !important;
  opacity: 0.3 !important;
}

/* Y-axis grid color for dark mode */
.dark-mode .js-plotly-plot .plotly .ygrid line {
  stroke: var(--dark-mode-border-3) !important;
  opacity: 0.3 !important;
}

/* Legend styling */
.dark-mode .js-plotly-plot .plotly .legend .traces .legendtext {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .legend .bg {
  fill: var(--dark-mode-card-bg-4) !important;
  opacity: 0.9 !important;
}

/* Hover labels */
.dark-mode .js-plotly-plot .plotly .hoverlabel {
  background-color: var(--dark-mode-card-bg-3) !important;
  border-color: var(--dark-mode-border) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .js-plotly-plot .plotly .hoverlabel .hovertext {
  color: var(--dark-mode-text) !important;
}

/* Additional Plotly specific selectors for better coverage */
.dark-mode .plotly .xaxis .tick text,
.dark-mode .plotly .yaxis .tick text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

.dark-mode .plotly .xaxis .axis-title,
.dark-mode .plotly .yaxis .axis-title {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Force visibility with higher specificity */
.dark-mode .js-plotly-plot .plotly .xaxis .tick text,
.dark-mode .js-plotly-plot .plotly .yaxis .tick text,
.dark-mode .js-plotly-plot .plotly .xaxis .axis-title,
.dark-mode .js-plotly-plot .plotly .yaxis .axis-title {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Additional comprehensive Plotly selectors for axis text */
.dark-mode .plotly .xaxis .tick text,
.dark-mode .plotly .yaxis .tick text,
.dark-mode .plotly .xaxis .axis-title,
.dark-mode .plotly .yaxis .axis-title {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* SVG text elements specifically */
.dark-mode .plotly svg .xaxis text,
.dark-mode .plotly svg .yaxis text,
.dark-mode .plotly svg .xaxis .tick text,
.dark-mode .plotly svg .yaxis .tick text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Direct SVG text elements */
.dark-mode .plotly svg text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Specific axis text elements */
.dark-mode .plotly .xaxis text,
.dark-mode .plotly .yaxis text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Force all text elements in Plotly charts to be visible */
.dark-mode .plotly * text,
.dark-mode .js-plotly-plot * text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Additional specificity for axis labels */
.dark-mode .plotly .xaxis .axis-title text,
.dark-mode .plotly .yaxis .axis-title text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  font-weight: 600 !important;
}

/* Tick labels with higher specificity */
.dark-mode .plotly .xaxis .tick text,
.dark-mode .plotly .yaxis .tick text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* Additional Plotly chart container styling */
.dark-mode .plotly-chart,
.dark-mode .chart-container,
.dark-mode .js-plotly-plot {
  background-color: transparent !important;
}

/* Force SVG text elements to be visible */
.dark-mode svg text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Specific Plotly chart text elements */
.dark-mode .plotly-chart svg text,
.dark-mode .chart-container svg text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}

/* Override any inline styles that might be hiding text */
.dark-mode .plotly .xaxis .tick text[style*="fill"],
.dark-mode .plotly .yaxis .tick text[style*="fill"],
.dark-mode .plotly .xaxis .axis-title[style*="fill"],
.dark-mode .plotly .yaxis .axis-title[style*="fill"] {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.dark-mode .js-plotly-plot .plotly .modebar-btn,
.dark-mode .js-plotly-plot .plotly .modebar-group,
.dark-mode .js-plotly-plot .plotly .modebar-group:hover,
.dark-mode .js-plotly-plot .plotly .modebar-group.active,
.dark-mode .js-plotly-plot .plotly .modebar-group:hover.active,
.dark-mode .js-plotly-plot .plotly .modebar-group:hover.active,
.dark-mode .js-plotly-plot .plotly .modebar-btn.active,
.dark-mode .js-plotly-plot .plotly .modebar-btn:hover {
    background-color: var(--dark-mode-table-header) !important;
}

/* Plotly annotations dark mode styling */
.dark-mode .plotly .annotation text,
.dark-mode .js-plotly-plot .plotly .annotation text {
  fill: var(--dark-mode-text) !important;
  color: var(--dark-mode-text) !important;
}



.dark-mode .plotly .treemaplayer text {
  fill: var(--dark-mode-text-3) !important;
  color: var(--dark-mode-text-3) !important;
}