@use '../color-defaults' as *;
@use '../color-vars' as *;

c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-dark,
body .dashboard-preview-slot.panel-content-dark,
.dashboard-preview-slot.dashboard-theme-dark,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark,
.c8y-grid-dashboard c8y-dashboard-child .panel-content-dark {
  // Dark theme tokens come from .c8y-dark-theme foundation class on the element.
  // This allows branding overrides (appended later in the cascade) to take precedence.

  // Override legacy --text-color to use dark theme value
  // This ensures root-component tokens (which reference --text-color) get the correct dark value
  --text-color: var(--c8y-text-color);
  --text-muted: var(--c8y-text-muted);

  color: $text-color;
}

c8y-dashboard-gridstack:not([name]):not([use-context]) > .dashboard-theme-dark,
c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-dark {
  --c8y-dashboard-background: var(--c8y-palette-low);
  background-color: var(--c8y-dashboard-background);
}

body:has(.dashboard-theme-dark:not(.dashboard-preview-slot)){
  .c8y-ui-action-bar .btn-help{
    outline: 1px solid $status-info;
    background-color: $status-info;
    --help-info-color: #{$palette-high};
    color: $palette-high;
  }
}
