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

body,
body.c8y-dark-theme {

  c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-branded,
  .dashboard-preview-slot.panel-content-branded,
  .dashboard-preview-slot.dashboard-theme-branded,
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded,
  .c8y-grid-dashboard c8y-dashboard-child .panel-content-branded,
  &:has(.dashboard-theme-branded) .c8y-ui-action-bar {
    --c8y-brand-realtime-added: var(--c8y-brand-80);

    --c8y-abbr-border-color: var(--c8y-palette-gray-40);
    --c8y-action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
    --c8y-action-bar-background-default: var(--c8y-brand-10);
    --c8y-action-bar-border-color: var(--c8y-brand-30);
    --c8y-action-bar-color-actions-hover: var(--c8y-brand-60);
    --c8y-action-bar-color-actions: var(--c8y-palette-high);
    --c8y-action-bar-color-default: var(--c8y-palette-high);
    --c8y-action-bar-color-focus: var(--c8y-brand-80);
    --c8y-action-bar-color-text-muted: var(--c8y-brand-80);
    --c8y-action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
    --c8y-action-bar-icon-color: var(--c8y-brand-80);
    // Override unprefixed action bar vars — branding injects these at :root,
    // and the SCSS fallback chain checks unprefixed first.
    --action-bar-actions-opacity: var(--c8y-root-component-actions-opacity);
    --action-bar-background-default: var(--c8y-brand-10);
    --action-bar-border-color: var(--c8y-brand-30);
    --action-bar-color-actions-hover: var(--c8y-brand-60);
    --action-bar-color-actions: var(--c8y-palette-high);
    --action-bar-color-default: var(--c8y-palette-high);
    --action-bar-color-focus: var(--c8y-brand-80);
    --action-bar-color-text-muted: var(--c8y-brand-80);
    --action-bar-opacity-disabled: var(--c8y-root-component-opacity-disabled);
    --action-bar-icon-color: var(--c8y-brand-80);


    --c8y-alert-background-default: var(--c8y-palette-gray-80);
    --c8y-alert-color-default: var(--c8y-root-component-color-default);
    --c8y-alert-status-danger: var(--c8y-palette-status-danger);
    --c8y-alert-status-info: var(--c8y-palette-status-info);
    --c8y-alert-status-success: var(--c8y-palette-status-success);
    --c8y-alert-status-system: var(--c8y-root-component-brand-primary);
    --c8y-alert-status-warning: var(--c8y-palette-status-warning);
    --c8y-blockquote-border-color: transparent;
    --c8y-body-background-color: var(--c8y-brand-10);
    --c8y-btn-accent-background-active: var(--c8y-brand-accent-dark);
    --c8y-btn-accent-background-default: var(--c8y-brand-accent);
    --c8y-btn-accent-background-focus: var(--c8y-palette-high);
    --c8y-btn-accent-background-hover: var(--c8y-palette-high);
    --c8y-btn-accent-border-color-active: var(--c8y-brand-accent-dark);
    --c8y-btn-accent-border-color-default: var(--c8y-brand-accent);
    --c8y-btn-accent-border-color-focus: var(--c8y-brand-accent);
    --c8y-btn-accent-border-color-hover: var(--c8y-brand-accent);
    --c8y-btn-accent-color-active: var(--c8y-palette-high);
    --c8y-btn-accent-color-default: var(--c8y-palette-high);
    --c8y-btn-accent-color-focus: var(--c8y-brand-accent);
    --c8y-btn-accent-color-hover: var(--c8y-brand-accent);
    --c8y-btn-danger-background-active: var(--c8y-palette-status-danger-dark);
    --c8y-btn-danger-background-default: var(--c8y-palette-status-danger);
    --c8y-btn-danger-background-focus: var(--c8y-palette-high);
    --c8y-btn-danger-background-hover: var(--c8y-palette-high);
    --c8y-btn-danger-border-color-active: var(--c8y-palette-status-danger-dark);
    --c8y-btn-danger-border-color-default: var(--c8y-palette-status-danger);
    --c8y-btn-danger-border-color-focus: var(--c8y-palette-status-danger);
    --c8y-btn-danger-border-color-hover: var(--c8y-palette-status-danger);
    --c8y-btn-danger-color-active: var(--c8y-palette-high);
    --c8y-btn-danger-color-default: var(--c8y-palette-high);
    --c8y-btn-danger-color-focus: var(--c8y-palette-status-danger);
    --c8y-btn-danger-color-hover: var(--c8y-palette-status-danger);
    --c8y-btn-default-background-active: var(--c8y-brand-50);
    --c8y-btn-default-background-default: transparent;
    --c8y-btn-default-background-focus: transparent;
    --c8y-btn-default-background-hover: transparent;
    --c8y-btn-default-border-color-active: var(--c8y-root-component-brand-primary);
    --c8y-btn-default-border-color-default: var(--c8y-root-component-brand-primary);
    --c8y-btn-default-border-color-focus: var(--c8y-root-component-brand-primary);
    --c8y-btn-default-border-color-hover: var(--c8y-root-component-brand-primary);
    --c8y-btn-default-color-active: var(--c8y-brand-80);
    --c8y-btn-default-color-default: var(--c8y-root-component-brand-primary);
    --c8y-btn-default-color-focus: var(--c8y-root-component-brand-primary);
    --c8y-btn-default-color-hover: var(--c8y-root-component-brand-primary);
    --c8y-btn-primary-background-active: var(--c8y-brand-10);
    --c8y-btn-primary-background-default: var(--c8y-brand-60);
    --c8y-btn-primary-background-focus: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
    --c8y-btn-primary-background-hover: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
    --c8y-btn-primary-border-color-active: var(--c8y-brand-70);
    --c8y-btn-primary-border-color-default: var(--c8y-brand-60);
    --c8y-btn-primary-border-color-focus: var(--c8y-brand-70);
    --c8y-btn-primary-border-color-hover: var(--c8y-brand-70);
    --c8y-btn-primary-color-active: var(--c8y-palette-high);
    --c8y-btn-primary-color-default: var(--c8y-palette-gray-100);
    --c8y-btn-primary-color-focus: var(--c8y-palette-high);
    --c8y-btn-primary-color-hover: var(--c8y-palette-high);
    /* Same code styling as the dark dashboard theme */
    --c8y-code-background: var(--c8y-palette-blue-80);
    --c8y-code-border-color: transparent;
    --c8y-code-color: var(--c8y-palette-blue-30);
    --c8y-dropdown-background-default: var(--c8y-brand-20);
    --c8y-elevation-border: none;
    /* For App switchers, Overflow menus, Tooltips */
    --c8y-elevation-hover: none;
    --c8y-elevation-lg: none;
    /* Elevation for Modals */
    --c8y-elevation-md: none;
    /* Elevation for Panels, App switchers, Overflow menus, Tooltips */
    --c8y-elevation-sm: none;
    /* Elevation for Cards, Select dropdowns, Date pickers, Time pickers, Dropdown buttons */
    --c8y-form-control-background-default: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
    --c8y-form-control-background-disabled: var(--c8y-component-background-disabled, var(--c8y-root-component-background-disabled));
    --c8y-form-control-background-focus: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
    --c8y-form-control-border-color-default: var(--c8y-palette-gray-70);
    --c8y-form-control-border-color-focus: var(--brand-primary, var(--c8y-root-component-brand-primary));
    --c8y-form-control-color-default: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
    --c8y-form-control-color-disabled: var(--c8y-component-color-disabled, var(--c8y-root-component-color-disabled));
    --c8y-form-control-color-focus: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
    --c8y-form-control-disabled-opacity: var(--c8y-global-disabled-opacity);
    --c8y-form-control-icon-color: var(--brand-primary, var(--c8y-root-component-brand-primary));
    --c8y-form-control-placeholder-color: var(--c8y-palette-gray-40);
    --c8y-form-label-color: var(--c8y-palette-gray-20);
    --c8y-form-legend-color: var(--c8y-palette-gray-50);
    --c8y-form-validation-color-error: var(--c8y-palette-status-danger);
    --c8y-form-validation-color-info: var(--c8y-palette-status-info);
    --c8y-form-validation-color-success: var(--c8y-palette-status-success);
    --c8y-form-validation-color-warning: var(--c8y-palette-status-warning);
    --c8y-global-disabled-opacity: 0.55;
    --c8y-global-odd: linear-gradient(to top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
    --c8y-global-separator: var(--c8y-palette-gray-90);
    --c8y-headings-color: inherit;
    --c8y-icon-stroke-color: var(--c8y-palette-high);
    --c8y-level-0: var(--c8y-palette-gray-100);
    --c8y-level-1: var(--c8y-palette-gray-90);
    --c8y-level-2: var(--c8y-palette-gray-80);
    --c8y-level-3: var(--c8y-palette-gray-70);
    --c8y-level-4: var(--c8y-palette-gray-60);
    --c8y-link-color: var(--c8y-brand-80);
    --c8y-link-hover-color: var(--c8y-brand-80);
    --c8y-main-header-background-default: var(--c8y-palette-gray-100);
    --c8y-main-header-background-hover: inherit;
    --c8y-main-header-border-color: transparent;
    --c8y-main-header-shadow: var(--c8y-elevation-md-bottom);
    --c8y-modal-backdrop-background: var(--c8y-palette-low);
    --c8y-nav-pills-background-active: var(--c8y-navlink-background-active);
    --c8y-nav-pills-background-default: var(--c8y-navlink-background-default);
    --c8y-nav-pills-background-focus: var(--c8y-navlink-background-focus);
    --c8y-nav-pills-background-hover: var(--c8y-navlink-background-hover);
    --c8y-nav-pills-color-active: var(--c8y-navlink-color-active);
    --c8y-nav-pills-color-default: var(--c8y-navlink-color-default);
    --c8y-nav-pills-color-focus: var(--c8y-navlink-color-focus);
    --c8y-nav-pills-color-hover: var(--c8y-navlink-color-hover);
    --c8y-nav-tabs-background-active: var(--c8y-root-component-background-default);
    --c8y-nav-tabs-background-default: transparent;
    --c8y-nav-tabs-background-focus: var(--c8y-navlink-background-focus);
    --c8y-nav-tabs-background-hover: transparent;
    --c8y-nav-tabs-border-color-active: var(--c8y-root-component-brand-primary);
    --c8y-nav-tabs-border-color-default: var(--c8y-global-separator);
    --c8y-nav-tabs-color-active: var(--c8y-navlink-color-active);
    --c8y-nav-tabs-color-default: var(--c8y-navlink-color-default);
    --c8y-nav-tabs-color-focus: var(--c8y-navlink-color-focus);
    --c8y-nav-tabs-color-hover: var(--c8y-navlink-color-hover);
    --c8y-nav-tabs-icon-color-active: var(--c8y-navlink-color-default);
    --c8y-nav-tabs-icon-color-default: var(--c8y-palette-gray-40);
    --c8y-nav-tabs-icon-color-focus: var(--c8y-navlink-color-default);
    --c8y-nav-tabs-icon-color-hover: var(--c8y-navlink-color-default);
    --c8y-navbar-background-default: var(--c8y-root-component-background-default);
    --c8y-navbar-border-color: transparent;
    --c8y-navbar-color-default: var(--c8y-text-color);
    --c8y-navbar-link: var(--c8y-root-component-brand-primary);
    --c8y-navigator-background-default: var(--c8y-palette-low);
    --c8y-navigator-background-selected: var(--c8y-palette-gray-90);
    --c8y-navigator-scrollbar-track: var(--c8y-root-component-scrollbar-track);
    --c8y-navigator-separator-color: var(--c8y-palette-gray-80);
    --c8y-navigator-text-color-default: var(--c8y-palette-gray-20);
    --c8y-navlink-background-active: transparent;
    --c8y-navlink-background-default: var(--c8y-root-component-background-default);
    --c8y-navlink-background-focus: transparent;
    --c8y-navlink-background-hover: transparent;
    --c8y-navlink-color-active: var(--c8y-root-component-brand-primary);
    --c8y-navlink-color-default: var(--c8y-text-color);
    --c8y-navlink-color-focus: var(--c8y-root-component-brand-primary);
    --c8y-navlink-color-hover: var(--c8y-root-component-brand-primary);
    --c8y-page-sticky-header-background-default: var(--c8y-palette-gray-90);
    --c8y-page-sticky-header-color-active: var(--c8y-link-color);
    --c8y-page-sticky-header-color-default: var(--c8y-palette-gray-10);
    --c8y-page-sticky-header-color-hover: var(--c8y-link-hover-color);
    --c8y-palette-gray-10: #f9fafb;
    --c8y-palette-gray-100: var(--c8y-brand-20);
    --c8y-palette-gray-20: #ccd2d8;
    --c8y-palette-gray-30: var(--c8y-brand-80);
    --c8y-palette-gray-40: var(--c8y-brand-80);
    --c8y-palette-gray-50: var(--c8y-brand-70);
    --c8y-palette-gray-60: var(--c8y-brand-50);
    --c8y-palette-gray-70: var(--c8y-brand-50);
    --c8y-palette-gray-80: var(--c8y-brand-40);
    --c8y-palette-gray-90: var(--c8y-brand-30);
    --c8y-palette-low: var(--c8y-brand-80);
    --c8y-palette-status-danger: #DC5B68;
    --c8y-palette-status-danger-dark: #fae6e8;
    --c8y-palette-status-danger-light: #8f0009;
    --c8y-palette-status-info: #0092db;
    --c8y-palette-status-info-dark: #ebf5ff;
    --c8y-palette-status-info-light: #105589;
    --c8y-palette-status-success: #71A112;
    --c8y-palette-status-success-dark: #f4fce3;
    --c8y-palette-status-success-light: #007700;
    --c8y-palette-status-system: var(--c8y-brand-primary);
    --c8y-palette-status-warning: #E07800;
    --c8y-palette-status-warning-dark: var(--c8y-palette-orange-80);
    --c8y-palette-status-warning-high: var(--c8y-palette-yellow-60);
    --c8y-palette-status-warning-light: var(--c8y-palette-orange-10);
    --c8y-popover-background-default: var(--c8y-palette-gray-30);
    --c8y-popover-border-color: var(--c8y-root-component-border-color);
    --c8y-popover-color-default: var(--c8y-palette-gray-100);
    --c8y-popover-color-link-hover: var(--c8y-root-component-color-link-hover);
    --c8y-popover-color-link: var(--c8y-root-component-color-link);
    --c8y-popover-icon-color: var(--c8y-palette-gray-80);
    --c8y-popover-label-color: var(--c8y-palette-gray-100);
    --c8y-pre-background: var(--c8y-palette-gray-90);
    --c8y-pre-border-color: var(--c8y-palette-gray-70);
    --c8y-pre-color: var(--c8y-palette-gray-30);
    --c8y-root-component-actions-opacity: var(--c8y-global-disabled-opacity);
    --c8y-root-component-background-active: var(--c8y-root-component-background-default);
    --c8y-root-component-background-default: var(--c8y-palette-gray-100);
    --c8y-root-component-background-disabled: rgba(255, 255, 255, 0.1);
    /* Don't use when changing opacity */
    --c8y-root-component-background-expanded-gradient: linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0px, var(--c8y-root-component-background-expanded) 12px, var(--c8y-root-component-background-expanded) calc(100% - 12px), rgba(0, 0, 0, 0.03) 100%);
    --c8y-root-component-background-expanded: var(--c8y-palette-gray-100);
    --c8y-root-component-background-focus: var(--c8y-root-component-background-default);
    --c8y-root-component-background-hover: var(--c8y-palette-teal-80);
    --c8y-root-component-background-odd: var(--c8y-global-odd);
    /* use for alternate stripes */
    --c8y-root-component-border-color: var(--c8y-global-separator);
    --c8y-root-component-brand-primary: var(--c8y-brand-80);
    --c8y-root-component-color-accent: var(--c8y-root-component-brand-primary);
    --c8y-root-component-color-actions-hover: var(--c8y-brand-60);
    --c8y-root-component-color-actions: var(--c8y-palette-high);
    --c8y-root-component-color-active: var(--c8y-root-component-brand-primary);
    --c8y-root-component-color-default: var(--c8y-text-color);
    --c8y-root-component-color-disabled: var(--c8y-palette-gray-70);
    /* Don't use when changing opacity */
    --c8y-root-component-color-expanded: inherit;
    --c8y-root-component-color-focus: var(--c8y-root-component-brand-primary);
    --c8y-root-component-color-link-hover: var(--c8y-link-hover-color);
    --c8y-root-component-color-link: var(--c8y-link-color);
    --c8y-root-component-color-odd: var(--c8y-text-color);
    --c8y-root-component-color-text-muted: var(--c8y-text-muted);
    --c8y-root-component-opacity-disabled: var(--c8y-global-disabled-opacity);
    --c8y-root-component-icon-color: var(--c8y-palette-gray-30);
    --c8y-root-component-icon-dark-color-dark: var(--c8y-palette-high);
    --c8y-root-component-pulse-color: var(--c8y-palette-status-realtime);
    --c8y-root-component-realtime-added: var(--c8y-brand-realtime-added);
    --c8y-root-component-scrollbar-thumb-default: var(--c8y-palette-gray-80);
    --c8y-root-component-scrollbar-thumb-hover: var(--c8y-palette-gray-70);
    --c8y-root-component-scrollbar-track: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
    --c8y-root-component-separator-color: var(--c8y-global-separator);
    --c8y-root-component-spinner-color: var(--c8y-brand-primary);
    --c8y-switch-background-active: var(--c8y-brand-30);
    --c8y-switch-background-default: var(--c8y-palette-gray-20);
    --c8y-switch-handle-background: var(--c8y-palette-high);
    --c8y-text-color: var(--c8y-palette-high);
    --c8y-text-muted: var(--c8y-palette-gray-40);
    --c8y-tooltip-background-default: var(--c8y-palette-gray-10);
    --c8y-tooltip-border-color: var(--c8y-root-component-border-color);
    --c8y-tooltip-color-default: var(--c8y-palette-gray-100);
    --c8y-tooltip-opacity: 0.95;
    // Override unprefixed vars — branding injects these at :root,
    // and the SCSS fallback chain checks unprefixed first.
    --text-color: var(--c8y-palette-high);
    --text-muted: var(--c8y-palette-gray-40);
    --body-background-color: var(--c8y-brand-10);
    --link-color: var(--c8y-brand-80);
    --link-hover-color: var(--c8y-brand-80);

  }

  .dashboard-preview-slot.dashboard-theme-branded {
    background: var(--c8y-brand-10) !important;
    color: var(--c8y-text-color);
  }

  c8y-dashboard-gridstack:not([name]):not([use-context])>.dashboard-theme-branded,
  c8y-context-dashboard.c8y-grid-dashboard.dashboard-theme-branded {
    --c8y-dashboard-background: var(--c8y-brand-10);
    background-color: var(--c8y-dashboard-background);
    color: var(--c8y-text-color);
  }
}


// Dark/white widgets inside branded dashboards must inherit brand tokens
// from the branded parent. Without this, .c8y-dark-theme on the widget
// overrides brand tokens with dark-theme defaults.
// Note: only targets nested elements (descendant selector), not the flat
// preview element which uses .c8y-light-theme directly on the element.
.dashboard-theme-branded .panel-content-dark,
.dashboard-theme-branded .panel-content-white {
  --c8y-brand-10: inherit;
  --c8y-brand-20: inherit;
  --c8y-brand-30: inherit;
  --c8y-brand-40: inherit;
  --c8y-brand-50: inherit;
  --c8y-brand-60: inherit;
  --c8y-brand-70: inherit;
  --c8y-brand-80: inherit;
  --c8y-brand-primary: inherit;
  --c8y-brand-dark: inherit;
  --c8y-brand-light: inherit;
  --c8y-brand-accent: inherit;
  --c8y-brand-accent-dark: inherit;
  --c8y-brand-accent-light: inherit;
  --c8y-brand-realtime-added: inherit;
}

body:has(.dashboard-theme-branded) {

  .c8y-ui-action-bar,
  .dashboard-theme-branded {
    .btn-help {
      outline: 1px solid $status-info;
      background-color: $status-info;
      --help-info-color: #{$palette-high};
      color: $palette-high;
    }
  }

  .c8y-top-drawer {
    --c8y-nav-tabs-background-default: var(--c8y-root-component-background-default);
    --c8y-nav-tabs-background-active: var(--c8y-body-background-color);
    background: var(--c8y-body-background-color);
    --c8y-level-1: var(--c8y-root-component-background-default);
  }

  .dashboard-theme-branded {
    .label-primary {
      color: var(--c8y-root-component-color-default);
    }
  }
}