@media (prefers-color-scheme: dark) {
  /* ================================================================
     THINGSBOARD CE — COMPLETE SYSTEM-WIDE DARK MODE
     Covers all Angular Material MDC tokens + TB-specific components
     ================================================================ */

  /* ── PALETTE REFERENCE ──────────────────────────────────────────
     bg-0  #0d0d0d   deepest backdrop (scrollbars, overlays)
     bg-1  #121212   main canvas
     bg-2  #181818   sidenav / toolbar
     bg-3  #1e1e1e   cards, dialogs, panels
     bg-4  #252525   form fields, elevated surfaces
     bg-5  #2e2e2e   hover states
     br    #333333   borders / dividers
     t-1   #e0e0e0   primary text
     t-2   #b0b0b0   secondary / hint text
     t-3   rgba(255,255,255,.38)  disabled text
     acc   #03a9f4   cyan accent / primary highlight
     ─────────────────────────────────────────────────────────────── */


  /* ================================================================
     1. ANGULAR MATERIAL DESIGN TOKENS  (.tb-default scope)
        Overrides every MDC/MAT CSS custom property that controls
        colour, background, border and surface colours.
     ================================================================ */

  .tb-default {
    /* ── App shell ───────────────────────────────────────────────── */
    --mat-app-background-color: #121212;
    --mat-app-text-color: #e0e0e0;

    /* ── Ripple ──────────────────────────────────────────────────── */
    --mat-ripple-color: rgba(3, 169, 244, .12);
    --mat-option-hover-state-layer-color:  rgba(255, 255, 255, .06);
    --mat-option-focus-state-layer-color:  rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(3, 169, 244, .12);
    --mat-option-label-text-color: #e0e0e0;
    --mat-option-selected-state-label-text-color: #03a9f4;
    --mat-optgroup-label-text-color: #b0b0b0;

    /* ── Pseudo-checkbox ─────────────────────────────────────────── */
    --mat-full-pseudo-checkbox-unselected-icon-color: #b0b0b0;
    --mat-full-pseudo-checkbox-selected-icon-color: #03a9f4;
    --mat-full-pseudo-checkbox-selected-checkmark-color: #121212;
    --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #555;
    --mat-full-pseudo-checkbox-disabled-selected-icon-color: #555;
    --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #888;
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #03a9f4;
    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #555;

    /* ── Cards (MDC elevated + outlined) ────────────────────────── */
    --mdc-elevated-card-container-color: #1e1e1e;
    --mdc-outlined-card-container-color: #1e1e1e;
    --mdc-outlined-card-outline-color: #333333;
    --mat-card-subtitle-text-color: #b0b0b0;

    /* ── Toolbar ─────────────────────────────────────────────────── */
    --mat-toolbar-container-background-color: #181818;
    --mat-toolbar-container-text-color: #e0e0e0;

    /* ── Sidenav / drawer ────────────────────────────────────────── */
    --mat-sidenav-container-background-color: #181818;
    --mat-sidenav-container-text-color: #e0e0e0;
    --mat-sidenav-container-divider-color: #333333;
    --mat-sidenav-content-background-color: #121212;
    --mat-sidenav-content-text-color: #e0e0e0;
    --mat-sidenav-scrim-color: rgba(0, 0, 0, .72);

    /* ── List (nav lists, menus) ─────────────────────────────────── */
    --mdc-list-list-item-container-color: transparent;
    --mdc-list-list-item-label-text-color: #e0e0e0;
    --mdc-list-list-item-supporting-text-color: #b0b0b0;
    --mdc-list-list-item-leading-icon-color: #b0b0b0;
    --mdc-list-list-item-trailing-icon-color: #b0b0b0;
    --mdc-list-list-item-hover-label-text-color: #e0e0e0;
    --mdc-list-list-item-hover-leading-icon-color: #03a9f4;
    --mdc-list-list-item-hover-state-layer-color: rgba(255, 255, 255, .06);
    --mdc-list-list-item-hover-trailing-icon-color: #b0b0b0;
    --mdc-list-list-item-focus-label-text-color: #e0e0e0;
    --mdc-list-list-item-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mdc-list-list-item-disabled-label-text-color: rgba(255, 255, 255, .38);
    --mdc-list-list-item-disabled-leading-icon-color: rgba(255, 255, 255, .38);
    --mdc-list-list-item-disabled-trailing-icon-color: rgba(255, 255, 255, .38);
    --mdc-list-list-item-disabled-state-layer-color: transparent;
    --mdc-list-list-item-selected-container-color: rgba(3, 169, 244, .12);
    --mdc-list-list-item-selected-trailing-icon-color: #03a9f4;
    --mdc-list-list-item-trailing-supporting-text-color: #b0b0b0;
    --mdc-list-list-item-leading-avatar-color: #252525;
    --mat-list-active-indicator-color: rgba(3, 169, 244, .18);

    /* ── Divider ─────────────────────────────────────────────────── */
    --mat-divider-color: #333333;

    /* ── Menu ────────────────────────────────────────────────────── */
    --mat-menu-container-color: #252525;
    --mat-menu-item-label-text-color: #e0e0e0;
    --mat-menu-item-icon-color: #b0b0b0;
    --mat-menu-item-hover-state-layer-color: rgba(255, 255, 255, .07);
    --mat-menu-item-focus-state-layer-color: rgba(255, 255, 255, .09);
    --mat-menu-divider-color: #333333;

    /* ── Autocomplete ────────────────────────────────────────────── */
    --mat-autocomplete-background-color: #252525;

    /* ── Select / dropdown ───────────────────────────────────────── */
    --mat-select-panel-background-color: #252525;
    --mat-select-enabled-trigger-text-color: #e0e0e0;
    --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, .38);
    --mat-select-placeholder-text-color: #b0b0b0;
    --mat-select-enabled-arrow-color: #b0b0b0;
    --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
    --mat-select-focused-arrow-color: rgba(3, 169, 244, .87);
    --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87);

    /* ── Form fields (filled) ────────────────────────────────────── */
    --mdc-filled-text-field-container-color: #252525;
    --mdc-filled-text-field-disabled-container-color: #1e1e1e;
    --mdc-filled-text-field-caret-color: #03a9f4;
    --mdc-filled-text-field-focus-active-indicator-color: #03a9f4;
    --mdc-filled-text-field-focus-label-text-color: rgba(3, 169, 244, .87);
    --mdc-filled-text-field-label-text-color: #b0b0b0;
    --mdc-filled-text-field-hover-label-text-color: #e0e0e0;
    --mdc-filled-text-field-disabled-label-text-color: rgba(255, 255, 255, .38);
    --mdc-filled-text-field-input-text-color: #e0e0e0;
    --mdc-filled-text-field-disabled-input-text-color: rgba(255, 255, 255, .38);
    --mdc-filled-text-field-input-text-placeholder-color: #787878;
    --mdc-filled-text-field-active-indicator-color: #555555;
    --mdc-filled-text-field-disabled-active-indicator-color: rgba(255, 255, 255, .12);
    --mdc-filled-text-field-hover-active-indicator-color: #e0e0e0;

    /* ── Form fields (outlined) ──────────────────────────────────── */
    --mdc-outlined-text-field-caret-color: #03a9f4;
    --mdc-outlined-text-field-focus-outline-color: #03a9f4;
    --mdc-outlined-text-field-focus-label-text-color: rgba(3, 169, 244, .87);
    --mdc-outlined-text-field-label-text-color: #b0b0b0;
    --mdc-outlined-text-field-hover-label-text-color: #e0e0e0;
    --mdc-outlined-text-field-disabled-label-text-color: rgba(255, 255, 255, .38);
    --mdc-outlined-text-field-input-text-color: #e0e0e0;
    --mdc-outlined-text-field-disabled-input-text-color: rgba(255, 255, 255, .38);
    --mdc-outlined-text-field-input-text-placeholder-color: #787878;
    --mdc-outlined-text-field-outline-color: #555555;
    --mdc-outlined-text-field-disabled-outline-color: rgba(255, 255, 255, .12);
    --mdc-outlined-text-field-hover-outline-color: #e0e0e0;

    /* ── Form field wrapper ──────────────────────────────────────── */
    --mat-form-field-state-layer-color: rgba(255, 255, 255, .87);
    --mat-form-field-error-text-color: #f44336;
    --mat-form-field-select-option-text-color: #e0e0e0;
    --mat-form-field-select-disabled-option-text-color: rgba(255, 255, 255, .38);
    --mat-form-field-enabled-select-arrow-color: #b0b0b0;
    --mat-form-field-disabled-select-arrow-color: rgba(255, 255, 255, .38);
    --mat-form-field-focus-select-arrow-color: rgba(3, 169, 244, .87);
    --mat-form-field-leading-icon-color: #b0b0b0;
    --mat-form-field-trailing-icon-color: #b0b0b0;
    --mat-form-field-disabled-leading-icon-color: rgba(255, 255, 255, .38);
    --mat-form-field-disabled-trailing-icon-color: rgba(255, 255, 255, .38);
    --mat-form-field-disabled-input-text-placeholder-color: rgba(255, 255, 255, .38);

    /* ── Dialog ──────────────────────────────────────────────────── */
    --mdc-dialog-container-color: #1e1e1e;
    --mdc-dialog-subhead-color: #e0e0e0;
    --mdc-dialog-supporting-text-color: #b0b0b0;

    /* ── Table ───────────────────────────────────────────────────── */
    --mat-table-background-color: #1e1e1e;
    --mat-table-header-headline-color: #03a9f4;
    --mat-table-row-item-label-text-color: #e0e0e0;
    --mat-table-row-item-outline-color: #333333;
    --mat-table-footer-supporting-text-color: #b0b0b0;

    /* ── Paginator ───────────────────────────────────────────────── */
    --mat-paginator-container-background-color: #181818;
    --mat-paginator-container-text-color: #b0b0b0;
    --mat-paginator-enabled-icon-color: #b0b0b0;
    --mat-paginator-disabled-icon-color: rgba(255, 255, 255, .2);

    /* ── Tabs ────────────────────────────────────────────────────── */
    --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-inactive-hover-label-text-color: #e0e0e0;
    --mat-tab-header-inactive-focus-label-text-color: #e0e0e0;
    --mat-tab-header-active-label-text-color: #03a9f4;
    --mat-tab-header-active-hover-label-text-color: #03a9f4;
    --mat-tab-header-active-focus-label-text-color: #03a9f4;
    --mat-tab-header-active-ripple-color: #03a9f4;
    --mat-tab-header-inactive-ripple-color: #e0e0e0;
    --mat-tab-header-active-focus-indicator-color: #03a9f4;
    --mat-tab-header-active-hover-indicator-color: #03a9f4;
    --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, .38);
    --mat-tab-header-pagination-icon-color: #e0e0e0;
    --mat-tab-header-divider-color: #333333;
    --mat-tab-header-with-background-background-color: #181818;
    --mat-tab-header-with-background-foreground-color: #e0e0e0;
    --mdc-tab-indicator-active-indicator-color: #03a9f4;

    /* ── Expansion panel ─────────────────────────────────────────── */
    --mat-expansion-container-background-color: #1e1e1e;
    --mat-expansion-container-text-color: #e0e0e0;
    --mat-expansion-header-text-color: #e0e0e0;
    --mat-expansion-header-description-color: #b0b0b0;
    --mat-expansion-header-indicator-color: #b0b0b0;
    --mat-expansion-header-disabled-state-text-color: rgba(255, 255, 255, .3);
    --mat-expansion-header-hover-state-layer-color: rgba(255, 255, 255, .05);
    --mat-expansion-header-focus-state-layer-color: rgba(255, 255, 255, .07);
    --mat-expansion-actions-divider-color: #333333;

    /* ── Stepper ─────────────────────────────────────────────────── */
    --mat-stepper-container-color: #1e1e1e;
    --mat-stepper-line-color: #333333;
    --mat-stepper-header-icon-background-color: #333333;
    --mat-stepper-header-icon-foreground-color: #e0e0e0;
    --mat-stepper-header-selected-state-icon-background-color: #03a9f4;
    --mat-stepper-header-selected-state-icon-foreground-color: #121212;
    --mat-stepper-header-done-state-icon-background-color: #03a9f4;
    --mat-stepper-header-done-state-icon-foreground-color: #121212;
    --mat-stepper-header-edit-state-icon-background-color: #03a9f4;
    --mat-stepper-header-edit-state-icon-foreground-color: #121212;
    --mat-stepper-header-error-state-icon-background-color: transparent;
    --mat-stepper-header-error-state-icon-foreground-color: #f44336;
    --mat-stepper-header-error-state-label-text-color: #f44336;
    --mat-stepper-header-label-text-color: #b0b0b0;
    --mat-stepper-header-optional-label-text-color: #b0b0b0;
    --mat-stepper-header-selected-state-label-text-color: #e0e0e0;
    --mat-stepper-header-hover-state-layer-color: rgba(255, 255, 255, .06);
    --mat-stepper-header-focus-state-layer-color: rgba(255, 255, 255, .08);

    /* ── Checkbox ────────────────────────────────────────────────── */
    --mdc-checkbox-selected-checkmark-color: #121212;
    --mdc-checkbox-selected-focus-icon-color: #03a9f4;
    --mdc-checkbox-selected-hover-icon-color: #03a9f4;
    --mdc-checkbox-selected-icon-color: #03a9f4;
    --mdc-checkbox-selected-pressed-icon-color: #03a9f4;
    --mdc-checkbox-unselected-focus-icon-color: #b0b0b0;
    --mdc-checkbox-unselected-hover-icon-color: #e0e0e0;
    --mdc-checkbox-unselected-icon-color: #b0b0b0;
    --mdc-checkbox-unselected-pressed-icon-color: #b0b0b0;
    --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-selected-focus-state-layer-color: #03a9f4;
    --mdc-checkbox-selected-hover-state-layer-color: #03a9f4;
    --mdc-checkbox-selected-pressed-state-layer-color: #03a9f4;
    --mdc-checkbox-unselected-focus-state-layer-color: #e0e0e0;
    --mdc-checkbox-unselected-hover-state-layer-color: #e0e0e0;
    --mdc-checkbox-unselected-pressed-state-layer-color: #e0e0e0;
    --mat-checkbox-disabled-label-color: rgba(255, 255, 255, .38);
    --mat-checkbox-label-text-color: #e0e0e0;

    /* ── Radio ───────────────────────────────────────────────────── */
    --mdc-radio-selected-focus-icon-color: #03a9f4;
    --mdc-radio-selected-hover-icon-color: #03a9f4;
    --mdc-radio-selected-icon-color: #03a9f4;
    --mdc-radio-selected-pressed-icon-color: #03a9f4;
    --mdc-radio-unselected-focus-icon-color: #b0b0b0;
    --mdc-radio-unselected-hover-icon-color: #e0e0e0;
    --mdc-radio-unselected-icon-color: #b0b0b0;
    --mdc-radio-unselected-pressed-icon-color: #b0b0b0;
    --mdc-radio-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-radio-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mat-radio-checked-ripple-color: #03a9f4;
    --mat-radio-ripple-color: #e0e0e0;
    --mat-radio-disabled-label-color: rgba(255, 255, 255, .38);
    --mat-radio-label-text-color: #e0e0e0;

    /* ── Slide toggle / switch ───────────────────────────────────── */
    --mdc-switch-selected-focus-state-layer-color: #03a9f4;
    --mdc-switch-selected-handle-color: #03a9f4;
    --mdc-switch-selected-hover-state-layer-color: #03a9f4;
    --mdc-switch-selected-pressed-state-layer-color: #03a9f4;
    --mdc-switch-selected-focus-handle-color: #4fc3f7;
    --mdc-switch-selected-hover-handle-color: #4fc3f7;
    --mdc-switch-selected-pressed-handle-color: #4fc3f7;
    --mdc-switch-selected-focus-track-color: rgba(3, 169, 244, .5);
    --mdc-switch-selected-hover-track-color: rgba(3, 169, 244, .5);
    --mdc-switch-selected-pressed-track-color: rgba(3, 169, 244, .5);
    --mdc-switch-selected-track-color: rgba(3, 169, 244, .5);
    --mdc-switch-selected-icon-color: #121212;
    --mdc-switch-unselected-focus-handle-color: #b0b0b0;
    --mdc-switch-unselected-hover-handle-color: #e0e0e0;
    --mdc-switch-handle-color: #e0e0e0;
    --mdc-switch-unselected-handle-color: #888888;
    --mdc-switch-unselected-pressed-handle-color: #b0b0b0;
    --mdc-switch-unselected-focus-track-color: #444444;
    --mdc-switch-unselected-hover-track-color: #444444;
    --mdc-switch-unselected-pressed-track-color: #444444;
    --mdc-switch-unselected-track-color: #444444;
    --mdc-switch-unselected-icon-color: #121212;
    --mdc-switch-unselected-focus-state-layer-color: #e0e0e0;
    --mdc-switch-handle-surface-color: #1e1e1e;
    --mdc-switch-disabled-selected-handle-color: #555;
    --mdc-switch-disabled-selected-track-color: #444;
    --mdc-switch-disabled-unselected-handle-color: #555;
    --mdc-switch-disabled-unselected-track-color: #333;
    --mdc-switch-disabled-selected-icon-color: rgba(255, 255, 255, .3);
    --mdc-switch-disabled-unselected-icon-color: rgba(255, 255, 255, .3);
    --mat-slide-toggle-disabled-selected-handle-color: #555;
    --mat-slide-toggle-disabled-unselected-handle-color: #555;

    /* ── Slider ──────────────────────────────────────────────────── */
    --mdc-slider-handle-color: #03a9f4;
    --mdc-slider-focus-handle-color: #4fc3f7;
    --mdc-slider-hover-handle-color: #4fc3f7;
    --mdc-slider-active-track-color: #03a9f4;
    --mdc-slider-inactive-track-color: rgba(3, 169, 244, .3);
    --mdc-slider-with-tick-marks-inactive-container-color: rgba(3, 169, 244, .3);
    --mdc-slider-with-tick-marks-active-container-color: #121212;
    --mdc-slider-label-container-color: #03a9f4;
    --mdc-slider-label-label-text-color: #121212;
    --mdc-slider-with-overlap-handle-outline-color: #121212;
    --mat-slider-ripple-color: #03a9f4;
    --mat-slider-hover-state-layer-color: rgba(3, 169, 244, .07);
    --mat-slider-focus-state-layer-color: rgba(3, 169, 244, .2);

    /* ── Chips ───────────────────────────────────────────────────── */
    --mdc-chip-elevated-container-color: #2e2e2e;
    --mdc-chip-elevated-disabled-container-color: #252525;
    --mdc-chip-elevated-selected-container-color: rgba(3, 169, 244, .18);
    --mdc-chip-label-text-color: #e0e0e0;
    --mdc-chip-disabled-label-text-color: rgba(255, 255, 255, .38);
    --mdc-chip-with-icon-icon-color: #b0b0b0;
    --mdc-chip-with-icon-disabled-icon-color: rgba(255, 255, 255, .38);
    --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(255, 255, 255, .38);
    --mdc-chip-with-trailing-icon-trailing-icon-color: #b0b0b0;
    --mdc-chip-with-icon-selected-icon-color: #03a9f4;
    --mdc-chip-focus-state-layer-color: rgba(255, 255, 255, .1);
    --mdc-chip-hover-state-layer-color: rgba(255, 255, 255, .07);
    --mdc-chip-outline-color: #444444;
    --mdc-chip-selected-outline-color: #03a9f4;
    --mdc-chip-focus-outline-color: #03a9f4;
    --mat-chip-selected-disabled-trailing-icon-color: rgba(255, 255, 255, .38);
    --mat-chip-selected-trailing-icon-color: #03a9f4;
    --mat-chip-trailing-action-state-layer-color: rgba(255, 255, 255, .1);
    --mat-chip-selected-trailing-action-state-layer-color: rgba(3, 169, 244, .15);

    /* ── Progress (linear + circular) ───────────────────────────── */
    --mdc-linear-progress-active-indicator-color: #03a9f4;
    --mdc-linear-progress-track-color: rgba(3, 169, 244, .2);
    --mdc-circular-progress-active-indicator-color: #03a9f4;

    /* ── Snackbar ────────────────────────────────────────────────── */
    --mdc-snackbar-container-color: #2e2e2e;
    --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, .87);
    --mat-snack-bar-button-color: #03a9f4;

    /* ── Tooltip ─────────────────────────────────────────────────── */
    --mdc-plain-tooltip-container-color: #404040;
    --mdc-plain-tooltip-supporting-text-color: #e0e0e0;

    /* ── Tree ────────────────────────────────────────────────────── */
    --mat-tree-container-background-color: #1e1e1e;
    --mat-tree-node-text-color: #e0e0e0;

    /* ── Badge ───────────────────────────────────────────────────── */
    --mat-badge-background-color: #03a9f4;
    --mat-badge-text-color: #121212;
    --mat-badge-disabled-state-background-color: #444;
    --mat-badge-disabled-state-text-color: rgba(255, 255, 255, .38);

    /* ── Bottom sheet ────────────────────────────────────────────── */
    --mat-bottom-sheet-container-background-color: #1e1e1e;
    --mat-bottom-sheet-container-text-color: #e0e0e0;

    /* ── Button toggle ───────────────────────────────────────────── */
    --mat-standard-button-toggle-background-color: #1e1e1e;
    --mat-standard-button-toggle-text-color: #e0e0e0;
    --mat-standard-button-toggle-state-layer-color: rgba(255, 255, 255, .08);
    --mat-standard-button-toggle-divider-color: #444444;
    --mat-standard-button-toggle-selected-state-background-color: rgba(3, 169, 244, .2);
    --mat-standard-button-toggle-selected-state-text-color: #03a9f4;
    --mat-standard-button-toggle-disabled-state-background-color: #1a1a1a;
    --mat-standard-button-toggle-disabled-state-text-color: rgba(255, 255, 255, .38);
    --mat-standard-button-toggle-disabled-selected-state-background-color: #252525;
    --mat-standard-button-toggle-disabled-selected-state-text-color: rgba(255, 255, 255, .38);
    --mat-legacy-button-toggle-text-color: #b0b0b0;
    --mat-legacy-button-toggle-state-layer-color: rgba(255, 255, 255, .08);
    --mat-legacy-button-toggle-selected-state-text-color: #03a9f4;
    --mat-legacy-button-toggle-selected-state-background-color: rgba(3, 169, 244, .2);
    --mat-legacy-button-toggle-disabled-state-background-color: #181818;
    --mat-legacy-button-toggle-disabled-state-text-color: rgba(255, 255, 255, .38);

    /* ── Datepicker / datetimepicker ─────────────────────────────── */
    --mat-datepicker-calendar-container-background-color: #252525;
    --mat-datepicker-calendar-container-text-color: #e0e0e0;
    --mat-datepicker-calendar-header-divider-color: #333333;
    --mat-datepicker-calendar-header-text-color: #b0b0b0;
    --mat-datepicker-calendar-body-label-text-color: #b0b0b0;
    --mat-datepicker-calendar-date-today-outline-color: #03a9f4;
    --mat-datepicker-calendar-date-selected-state-background-color: #03a9f4;
    --mat-datepicker-calendar-date-selected-state-text-color: #121212;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(3, 169, 244, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(255, 255, 255, .07);
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(255, 255, 255, .1);
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(3, 169, 244, .15);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .15);
    --mat-datepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, .38);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, .24);
    --mat-datepicker-toggle-active-state-icon-color: #03a9f4;
    --mat-datepicker-toggle-icon-color: #b0b0b0;

    /* ── FAB buttons ─────────────────────────────────────────────── */
    --mat-fab-ripple-color: rgba(255, 255, 255, .1);
    --mat-fab-small-ripple-color: rgba(255, 255, 255, .1);

    /* ── Text / icon buttons ─────────────────────────────────────── */
    --mat-text-button-ripple-color: rgba(255, 255, 255, .1);
    --mat-outlined-button-ripple-color: rgba(255, 255, 255, .1);
    --mat-filled-button-ripple-color: rgba(255, 255, 255, .1);
    --mat-protected-button-ripple-color: rgba(255, 255, 255, .1);
    --mat-icon-button-ripple-color: rgba(255, 255, 255, .1);
    --mdc-text-button-label-text-color: #03a9f4;
    --mdc-protected-button-container-color: #252525;
    --mdc-protected-button-label-text-color: #e0e0e0;
    --mdc-outlined-button-outline-color: #555555;
    --mdc-outlined-button-label-text-color: #e0e0e0;

    /* ── Icon buttons ────────────────────────────────────────────── */
    --mat-icon-button-state-layer-color: rgba(255, 255, 255, .08);
    --mat-icon-button-disabled-state-layer-color: rgba(255, 255, 255, .04);
    --mat-icon-button-focused-state-layer-opacity: .12;
    --mat-icon-button-hover-state-layer-opacity: .08;
    --mat-icon-button-pressed-state-layer-opacity: .12;
    --mdc-icon-button-icon-color: #b0b0b0;
    --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, .38);
  }


  /* ================================================================
     2. ROOT & HTML LEVEL — Global canvas + MDC tokens
     ================================================================ */

  :root,
  html {
    color-scheme: dark;
    --mat-app-background-color: #121212 !important;
    --mat-app-text-color: #e0e0e0 !important;
  }

  html,
  body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }

  /* Angular Material app wrapper */
  .mat-app-background {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }


  /* ================================================================
     3. MAIN SHELL LAYOUT
     ================================================================ */

  mat-sidenav-container,
  .mat-drawer-container,
  mat-sidenav-content,
  .mat-drawer-content,
  .mat-sidenav-content,
  .tb-main-content,
  .tb-home-page,
  .tb-home-dashboard,
  .tb-layout-fill {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }


  /* ================================================================
     4. TOOLBAR / TOP BAR
     ================================================================ */

  mat-toolbar,
  mat-toolbar.mat-primary,
  mat-toolbar.mat-toolbar,
  .mat-toolbar,
  .tb-top-menu,
  header,
  .tb-logo-title,
  .tb-btn-header {
    background-color: #181818 !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid #333333 !important;
  }

  mat-toolbar .mat-icon,
  mat-toolbar mat-icon,
  .mat-toolbar .mat-icon {
    color: #b0b0b0 !important;
  }


  /* ================================================================
     5. LEFT SIDEBAR / SIDENAV
     ================================================================ */

  mat-sidenav,
  mat-sidenav.mat-drawer,
  .mat-sidenav,
  .tb-site-sidenav,
  .mat-drawer {
    background-color: #181818 !important;
    border-right: 1px solid #333333 !important;
    color: #e0e0e0 !important;
  }

  .mat-drawer-inner-container {
    background-color: #181818 !important;
  }

  /* Nav list items */
  mat-nav-list mat-list-item,
  .mat-nav-list .mat-list-item,
  .mat-mdc-list-item,
  .mat-mdc-nav-list .mat-mdc-list-item,
  .tb-menu-item-text,
  .mat-list-item-content {
    color: #b0b0b0 !important;
  }

  /* Sidebar active & hover */
  .mat-mdc-list-item.tb-active,
  .mat-mdc-list-item.active,
  mat-list-item.tb-active,
  mat-list-item:hover,
  .mat-mdc-list-item:hover,
  .mat-list-item:hover {
    background-color: rgba(3, 169, 244, .12) !important;
    color: #03a9f4 !important;
  }

  .mat-mdc-list-item.tb-active .mat-icon,
  .mat-mdc-list-item.active .mat-icon,
  .mat-mdc-list-item:hover .mat-icon {
    color: #03a9f4 !important;
  }

  /* Sidenav section headers */
  .mat-subheader,
  .mat-mdc-subheader {
    color: #787878 !important;
    background-color: #181818 !important;
  }


  /* ================================================================
     6. CARDS & DETAIL PANELS
     ================================================================ */

  mat-card,
  .mat-card,
  .mat-mdc-card,
  .mdc-card,
  .tb-home-card,
  .tb-details-panel,
  .tb-form-panel,
  .tb-json-object-panel,
  .tb-filter-panel,
  .tb-timewindow-panel,
  .tb-legend-config-panel,
  .tb-api-table,
  .mat-grid-tile {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .5) !important;
  }

  .mat-mdc-card-header,
  .mat-card-header,
  .mat-mdc-card-title,
  .mat-card-title,
  .tb-form-panel-title {
    color: #e0e0e0 !important;
  }

  .mat-mdc-card-subtitle,
  .mat-card-subtitle,
  .tb-form-panel-hint {
    color: #b0b0b0 !important;
  }

  /* Accordion / expansion content */
  mat-expansion-panel,
  .mat-expansion-panel {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #2e2e2e !important;
  }

  mat-expansion-panel-header,
  .mat-expansion-panel-header {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
  }

  mat-expansion-panel-header:hover,
  .mat-expansion-panel-header:hover {
    background-color: #2e2e2e !important;
  }

  .mat-expansion-panel-header-title {
    color: #e0e0e0 !important;
  }

  .mat-expansion-panel-header-description,
  .mat-expansion-indicator::after {
    color: #b0b0b0 !important;
  }

  .mat-expansion-panel-body {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }


  /* ================================================================
     7. TABLES
     ================================================================ */

  mat-table,
  .mat-table,
  .mat-mdc-table,
  table.mat-mdc-table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  /* Header row */
  mat-header-row,
  .mat-header-row,
  .mat-mdc-header-row,
  tr.mat-mdc-header-row {
    background-color: #252525 !important;
    border-bottom: 2px solid #333333 !important;
  }

  mat-header-cell,
  .mat-header-cell,
  .mat-mdc-header-cell,
  th.mat-mdc-header-cell {
    background-color: #252525 !important;
    color: #03a9f4 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #333333 !important;
  }

  /* Data rows */
  mat-row,
  .mat-row,
  .mat-mdc-row,
  tr.mat-mdc-row {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #2a2a2a !important;
  }

  mat-row:hover,
  .mat-row:hover,
  .mat-mdc-row:hover,
  tr.mat-mdc-row:hover {
    background-color: #252525 !important;
  }

  mat-cell,
  .mat-cell,
  .mat-mdc-cell,
  td.mat-mdc-cell {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #2a2a2a !important;
    background: transparent !important;
  }

  /* Footer row */
  mat-footer-row,
  .mat-footer-row,
  .mat-mdc-footer-row,
  tr.mat-mdc-footer-row {
    background-color: #1a1a1a !important;
    border-top: 1px solid #333333 !important;
  }

  mat-footer-cell,
  .mat-footer-cell,
  .mat-mdc-footer-cell,
  td.mat-mdc-footer-cell {
    color: #b0b0b0 !important;
  }

  /* Sort headers */
  .mat-sort-header-button {
    color: #03a9f4 !important;
  }

  .mat-sort-header-arrow {
    color: #03a9f4 !important;
  }

  /* Row selection checkbox column */
  .mat-column-select .mat-mdc-checkbox,
  .mat-row-select {
    color: #b0b0b0 !important;
  }

  /* Paginator */
  mat-paginator,
  .mat-paginator,
  .mat-mdc-paginator {
    background-color: #181818 !important;
    color: #b0b0b0 !important;
    border-top: 1px solid #333333 !important;
  }

  .mat-mdc-paginator-container,
  .mat-paginator-container {
    background-color: #181818 !important;
    color: #b0b0b0 !important;
  }

  .mat-mdc-paginator-range-label,
  .mat-paginator-range-label {
    color: #b0b0b0 !important;
  }

  .mat-mdc-icon-button[disabled],
  .mat-icon-button[disabled] {
    color: rgba(255, 255, 255, .25) !important;
  }

  /* Sticky table cells */
  .mat-mdc-table-sticky,
  .mat-table-sticky {
    background-color: #1e1e1e !important;
  }

  /* Table toolbar */
  .mat-mdc-table-toolbar,
  .tb-table-widget .mat-toolbar {
    background-color: #181818 !important;
    color: #e0e0e0 !important;
  }

  /* No-data placeholder */
  .tb-no-data-available,
  .tb-no-data-text,
  .tb-no-data-bg {
    background-color: #1e1e1e !important;
    color: #787878 !important;
  }


  /* ================================================================
     8. FORMS, INPUTS & SELECTS
     ================================================================ */

  /* MDC text field wrappers */
  .mdc-text-field,
  .mdc-text-field--filled,
  .mat-mdc-text-field-wrapper,
  .mat-mdc-form-field-flex,
  .mat-form-field-flex {
    background-color: #252525 !important;
  }

  /* The actual input/textarea */
  input.mat-mdc-input-element,
  input.mat-input-element,
  textarea.mat-mdc-input-element,
  textarea.mat-input-element,
  .mat-mdc-select-value,
  .mat-select-value {
    color: #e0e0e0 !important;
    caret-color: #03a9f4 !important;
  }

  /* Labels & hints */
  .mat-mdc-floating-label,
  .mat-form-field-label,
  .mdc-floating-label,
  .mat-mdc-form-field-hint-wrapper,
  .mat-hint {
    color: #b0b0b0 !important;
  }

  /* Prefix / suffix icons */
  .mat-mdc-form-field-icon-prefix,
  .mat-mdc-form-field-icon-suffix,
  .mat-mdc-form-field-has-icon-prefix .mat-mdc-form-field-icon-prefix,
  .mat-mdc-form-field-has-icon-suffix .mat-mdc-form-field-icon-suffix {
    color: #b0b0b0 !important;
  }

  /* Select panel (dropdown) */
  .mat-mdc-select-panel,
  .mat-select-panel,
  .mat-autocomplete-panel,
  .mat-mdc-autocomplete-panel {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
  }

  /* Option items */
  mat-option,
  .mat-mdc-option,
  .mat-option {
    color: #e0e0e0 !important;
    background-color: #252525 !important;
  }

  mat-option:hover,
  .mat-mdc-option:hover,
  .mat-option:hover {
    background-color: #2e2e2e !important;
  }

  .mat-mdc-option.mat-mdc-selected:not(.mat-mdc-option-disabled),
  .mat-option.mat-selected:not(.mat-option-disabled) {
    color: #03a9f4 !important;
    background-color: rgba(3, 169, 244, .1) !important;
  }

  .mat-mdc-optgroup-label,
  .mat-optgroup-label {
    color: #787878 !important;
    background-color: #252525 !important;
  }

  /* Focused form fields underline */
  .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
    border-bottom-color: #03a9f4 !important;
  }


  /* ================================================================
     9. DIALOGS & OVERLAYS
     ================================================================ */

  .cdk-overlay-container {
    z-index: 1000;
  }

  .cdk-overlay-dark-backdrop {
    background: rgba(0, 0, 0, .7) !important;
  }

  mat-dialog-container,
  .mat-mdc-dialog-container,
  .mat-dialog-container,
  .mdc-dialog__container,
  .mdc-dialog__surface {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333 !important;
  }

  .mat-mdc-dialog-title,
  .mat-dialog-title,
  h2[mat-dialog-title] {
    color: #e0e0e0 !important;
  }

  .mat-mdc-dialog-content,
  .mat-dialog-content,
  mat-dialog-content {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  .mat-mdc-dialog-actions,
  .mat-dialog-actions,
  mat-dialog-actions {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333333 !important;
  }

  /* Fullscreen / draggable dialogs */
  .tb-fullscreen-dialog,
  .tb-dialog {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  /* Panel overlay (select, datepicker, etc.) */
  .cdk-overlay-pane .mat-mdc-select-panel,
  .cdk-overlay-pane .mat-autocomplete-panel,
  .cdk-overlay-pane .mat-mdc-autocomplete-panel {
    background-color: #252525 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6) !important;
  }


  /* ================================================================
     10. TABS
     ================================================================ */

  .mat-mdc-tab-group,
  .mat-tab-group {
    background-color: transparent !important;
  }

  .mat-mdc-tab-header,
  .mat-tab-header {
    background-color: #181818 !important;
    border-bottom: 1px solid #333333 !important;
  }

  .mat-mdc-tab,
  .mat-tab-label {
    color: rgba(255, 255, 255, .6) !important;
    opacity: 1 !important;
  }

  .mat-mdc-tab.mdc-tab--active,
  .mat-mdc-tab.mat-mdc-tab-label-active,
  .mat-tab-label-active {
    color: #03a9f4 !important;
  }

  .mdc-tab-indicator__content--underline {
    border-color: #03a9f4 !important;
  }

  .mat-mdc-tab-nav-bar,
  .mat-tab-nav-bar {
    background-color: #181818 !important;
    border-bottom: 1px solid #333333 !important;
  }

  .mat-mdc-tab-link,
  .mat-tab-link {
    color: rgba(255, 255, 255, .6) !important;
  }

  .mat-mdc-tab-link.mdc-tab--active,
  .mat-tab-link-active {
    color: #03a9f4 !important;
  }

  .mat-mdc-tab-body-wrapper,
  .mat-tab-body-wrapper {
    background-color: transparent !important;
  }


  /* ================================================================
     11. MENUS & CONTEXT MENUS
     ================================================================ */

  .mat-mdc-menu-panel,
  .mat-menu-panel {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6) !important;
  }

  .mat-mdc-menu-item,
  .mat-menu-item {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

  .mat-mdc-menu-item:hover:not([disabled]),
  .mat-menu-item:hover:not([disabled]) {
    background-color: rgba(255, 255, 255, .07) !important;
  }

  .mat-mdc-menu-item .mat-icon,
  .mat-menu-item .mat-icon {
    color: #b0b0b0 !important;
  }

  .mat-mdc-menu-item-text,
  .mat-menu-item-text {
    color: #e0e0e0 !important;
  }

  mat-divider,
  .mat-divider,
  .mdc-list-divider {
    border-color: #333333 !important;
  }


  /* ================================================================
     12. STEPPER
     ================================================================ */

  mat-stepper,
  .mat-stepper-horizontal,
  .mat-stepper-vertical,
  .mat-step-header {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  .mat-step-header .mat-step-icon {
    background-color: #333333 !important;
    color: #b0b0b0 !important;
  }

  .mat-step-header .mat-step-icon-selected,
  .mat-step-header .mat-step-icon-state-done,
  .mat-step-header .mat-step-icon-state-edit {
    background-color: #03a9f4 !important;
    color: #121212 !important;
  }

  .mat-step-header .mat-step-label {
    color: #b0b0b0 !important;
  }

  .mat-step-header .mat-step-label.mat-step-label-selected,
  .mat-step-header .mat-step-label.mat-step-label-active {
    color: #e0e0e0 !important;
  }

  .mat-stepper-horizontal-line,
  .mat-stepper-vertical-line::before {
    border-color: #333333 !important;
  }


  /* ================================================================
     13. CHIPS
     ================================================================ */

  .mat-mdc-chip,
  .mat-chip,
  .mdc-evolution-chip {
    background-color: #2e2e2e !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
  }

  .mat-mdc-chip.mat-mdc-chip-selected,
  .mat-chip.mat-chip-selected,
  .mdc-evolution-chip--selected {
    background-color: rgba(3, 169, 244, .18) !important;
    color: #03a9f4 !important;
    border-color: #03a9f4 !important;
  }

  .mat-mdc-chip .mat-icon,
  .mat-chip .mat-chip-remove {
    color: #b0b0b0 !important;
  }

  .tb-chip-list,
  .tb-chips {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }


  /* ================================================================
     14. TREE
     ================================================================ */

  mat-tree,
  .mat-tree {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  .mat-tree-node,
  .mat-mdc-tree-node,
  mat-tree-node {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

  .mat-tree-node:hover,
  .mat-mdc-tree-node:hover {
    background-color: #252525 !important;
  }

  .mat-nested-tree-node,
  .mat-mdc-nested-tree-node {
    color: #e0e0e0 !important;
  }


  /* ================================================================
     15. DATEPICKER & DATETIMEPICKER
     ================================================================ */

  .mat-datepicker-content,
  .mat-datetimepicker-content,
  .mat-mdc-datepicker-content {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6) !important;
    border: 1px solid #333333 !important;
  }

  .mat-calendar-header,
  .mat-datetimepicker-calendar-header {
    background-color: #03a9f4 !important;
    color: #121212 !important;
  }

  .mat-calendar-body-cell-content,
  .mat-calendar-body-label {
    color: #e0e0e0 !important;
  }

  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
  .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: rgba(255, 255, 255, .1) !important;
  }

  .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    border-color: #03a9f4 !important;
  }

  .mat-calendar-body-selected,
  .mat-datetimepicker-calendar-body-selected {
    background-color: #03a9f4 !important;
    color: #121212 !important;
  }

  .mat-calendar-body-disabled > .mat-calendar-body-cell-content {
    color: rgba(255, 255, 255, .3) !important;
  }

  .mat-calendar-arrow {
    fill: #e0e0e0 !important;
  }

  .mat-calendar-next-button,
  .mat-calendar-previous-button,
  .mat-calendar-period-button {
    color: #e0e0e0 !important;
  }

  .mat-datetimepicker-clock {
    background-color: #2e2e2e !important;
  }

  .mat-datetimepicker-clock-center {
    background-color: #03a9f4 !important;
  }

  .mat-datetimepicker-clock-hand {
    background-color: #03a9f4 !important;
  }

  .mat-datetimepicker-clock-cell:not(.mat-datetimepicker-clock-cell-disabled) {
    color: #e0e0e0 !important;
  }

  .mat-datetimepicker-clock-cell-selected {
    background-color: #03a9f4 !important;
    color: #121212 !important;
  }

  .mat-datetimepicker-toggle .mat-icon-button {
    color: #b0b0b0 !important;
  }


  /* ================================================================
     16. SNACKBAR / TOAST
     ================================================================ */

  .mat-mdc-snack-bar-container,
  .mat-snack-bar-container {
    background-color: #2e2e2e !important;
    color: rgba(255, 255, 255, .87) !important;
    border: 1px solid #444444 !important;
  }

  .mat-mdc-snack-bar-action,
  .mat-simple-snackbar-action {
    color: #03a9f4 !important;
  }

  .tb-toast-panel {
    background-color: #2e2e2e !important;
    color: #e0e0e0 !important;
  }


  /* ================================================================
     17. PROGRESS BARS & SPINNERS
     ================================================================ */

  .mat-mdc-progress-bar,
  .mat-progress-bar {
    --mdc-linear-progress-track-color: rgba(3, 169, 244, .2) !important;
  }

  .mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {
    background-color: rgba(3, 169, 244, .2) !important;
  }

  .mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
    border-color: #03a9f4 !important;
  }

  .mat-mdc-progress-spinner circle,
  .mat-progress-spinner circle {
    stroke: #03a9f4 !important;
  }

  .tb-progress-cover {
    background-color: rgba(18, 18, 18, .85) !important;
  }


  /* ================================================================
     18. BADGES
     ================================================================ */

  .mat-badge-content {
    background-color: #03a9f4 !important;
    color: #121212 !important;
  }

  .mat-badge-disabled .mat-badge-content {
    background-color: #444444 !important;
    color: rgba(255, 255, 255, .38) !important;
  }


  /* ================================================================
     19. BUTTON TOGGLES
     ================================================================ */

  .mat-button-toggle-group,
  .mat-button-toggle {
    background-color: #1e1e1e !important;
    color: #b0b0b0 !important;
    border-color: #444444 !important;
  }

  .mat-button-toggle-checked {
    background-color: rgba(3, 169, 244, .2) !important;
    color: #03a9f4 !important;
  }

  .mat-button-toggle-button {
    color: inherit !important;
  }


  /* ================================================================
     20. CODE EDITORS (ACE & CodeMirror)
     ================================================================ */

  /* Ace editor */
  .ace_editor,
  .tb-ace-doc-tooltip {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .ace_gutter {
    background-color: #252525 !important;
    color: #787878 !important;
    border-right: 1px solid #333333 !important;
  }

  .ace_gutter-active-line {
    background-color: #2e2e2e !important;
  }

  .ace_marker-layer .ace_active-line,
  .ace_active-line {
    background-color: rgba(255, 255, 255, .04) !important;
  }

  .ace_string      { color: #89d185 !important; }
  .ace_keyword     { color: #569cd6 !important; }
  .ace_comment     { color: #787878 !important; }
  .ace_numeric     { color: #b5cea8 !important; }
  .ace_variable    { color: #9cdcfe !important; }
  .ace_constant    { color: #4fc1ff !important; }
  .ace_entity      { color: #4ec9b0 !important; }
  .ace_punctuation { color: #d4d4d4 !important; }

  .ace_tooltip {
    background-color: #252525 !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
  }

  /* CodeMirror */
  .CodeMirror {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333 !important;
  }

  .CodeMirror-gutters {
    background-color: #252525 !important;
    border-right: 1px solid #333333 !important;
  }

  .CodeMirror-linenumber {
    color: #787878 !important;
  }

  .CodeMirror-activeline-background {
    background-color: rgba(255, 255, 255, .04) !important;
  }

  .CodeMirror-scroll {
    background-color: #1a1a1a !important;
  }

  .CodeMirror-selected {
    background-color: rgba(3, 169, 244, .2) !important;
  }

  /* CSS/JSON editor panels */
  .tb-css-content-panel {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333 !important;
  }


  /* ================================================================
     21. DASHBOARD & WIDGETS
     ================================================================ */

  .tb-dashboard-page,
  tb-dashboard,
  .tb-widget,
  .tb-widget-content,
  .tb-table-widget {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }

  /* Widget containers */
  .tb-widget .tb-widget-content {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important;
  }

  /* Dashboard layout title */
  .tb-widget .tb-title,
  .tb-api-title {
    color: #b0b0b0 !important;
  }

  /* Map widgets */
  .tb-map,
  .tb-map-container,
  .tb-map-layout,
  .tb-layer-map {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  .tb-map-top-toolbar,
  .tb-map-bottom-toolbar,
  .tb-map-sidebar {
    background-color: rgba(30, 30, 30, .92) !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
  }

  .tb-layer-card {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
  }

  .tb-layer-label,
  .tb-layer-title,
  .tb-layers-title {
    color: #b0b0b0 !important;
  }


  /* ================================================================
     22. DETAILS DRAWER / SIDE PANEL
     ================================================================ */

  .tb-details-drawer,
  .tb-sidebar-left,
  .tb-sidebar-right {
    background-color: #1e1e1e !important;
    border-left: 1px solid #333333 !important;
    color: #e0e0e0 !important;
  }

  .tb-details-buttons,
  .tb-panel-actions,
  .tb-btn-footer,
  .tb-footer-buttons {
    background-color: #181818 !important;
    border-top: 1px solid #333333 !important;
  }

  .tb-panel-container {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }


  /* ================================================================
     23. FORM TABLE (entity attribute / relation tables)
     ================================================================ */

  .tb-form-table,
  .tb-api-table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333333 !important;
  }

  .tb-form-table-header,
  .tb-form-table-header-cell {
    background-color: #252525 !important;
    color: #03a9f4 !important;
    border-bottom: 2px solid #333333 !important;
  }

  .tb-form-table-row {
    border-bottom: 1px solid #2a2a2a !important;
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  .tb-form-table-row:hover {
    background-color: #252525 !important;
  }

  .tb-form-table-row-cell,
  .tb-form-table-row-cell-buttons {
    color: #e0e0e0 !important;
    border-color: #333333 !important;
  }

  .tb-form-row {
    background-color: transparent !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid #2a2a2a !important;
  }


  /* ================================================================
     24. QUICK LINKS & HOME DASHBOARD CARDS
     ================================================================ */

  .tb-quick-links {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
  }

  .tb-not-found,
  .tb-not-found-content {
    background-color: #121212 !important;
    color: #b0b0b0 !important;
  }

  .tb-notice {
    background-color: rgba(3, 169, 244, .08) !important;
    border-left: 4px solid #03a9f4 !important;
    color: #b0b0b0 !important;
  }

  .tb-hint,
  .tb-form-hint {
    color: #787878 !important;
  }

  .tb-error-message,
  .tb-error-messages {
    color: #f44336 !important;
  }

  .tb-disabled-label,
  .tb-readonly-label {
    color: rgba(255, 255, 255, .38) !important;
  }

  .tb-small-label,
  .tb-group-label,
  .tb-circle-label,
  .tb-control-text {
    color: #b0b0b0 !important;
  }

  .tb-required::after {
    color: #f44336 !important;
  }

  /* Highlight / selected state */
  .tb-highlight,
  .tb-selected,
  .tb-current-entity {
    background-color: rgba(3, 169, 244, .12) !important;
    color: #03a9f4 !important;
  }


  /* ================================================================
     25. LOGIN PAGE
     ================================================================ */

  .tb-login-content,
  .tb-login-card,
  tb-login,
  .tb-login-page {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }

  .tb-login-card .mat-mdc-card,
  .tb-login-content .mat-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .6) !important;
  }

  .tb-login-content input,
  .tb-login-card input {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #555555 !important;
  }

  /* Logo area */
  .tb-logo-title img,
  .tb-logo-title span {
    filter: brightness(0.9) !important;
  }


  /* ================================================================
     26. TEXT & TYPOGRAPHY — universal catch-all
     ================================================================ */

  h1, h2, h3, h4, h5, h6,
  .mat-h1, .mat-h2, .mat-h3, .mat-h4,
  .mat-headline-1, .mat-headline-2,
  .mat-headline-3, .mat-headline-4, .mat-headline-5, .mat-headline-6,
  .mat-typography h1, .mat-typography h2,
  .mat-typography h3, .mat-typography h4 {
    color: #e0e0e0 !important;
  }

  p, li, dt, dd {
    color: #c8c8c8 !important;
  }

  /* Avoid overriding icon ligature text */
  .mat-icon,
  mat-icon {
    color: inherit;
  }

  /* Links */
  a:not(.mat-mdc-button):not(.mat-button):not([mat-button]):not([mat-raised-button]):not([mat-icon-button]) {
    color: #03a9f4 !important;
  }

  a:hover {
    color: #4fc3f7 !important;
  }

  /* Inline labels */
  label,
  .mat-label {
    color: #b0b0b0 !important;
  }

  /* Stat counters / metric numbers */
  .tb-metric-number,
  .tb-stat-counter {
    color: #ffffff !important;
    font-weight: 600 !important;
  }


  /* ================================================================
     27. SCROLLBARS (Webkit)
     ================================================================ */

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #0d0d0d;
  }

  ::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555555;
  }

  ::-webkit-scrollbar-corner {
    background: #0d0d0d;
  }


  /* ================================================================
     28. MISCELLANEOUS & UTILITY OVERRIDES
     ================================================================ */

  /* Drag handles */
  .tb-drag-handle {
    color: #555555 !important;
  }

  /* Filter chips (time-window, dashboard filters) */
  .tb-filter-panel {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
  }

  /* Inline fields and standard fields containers */
  .tb-standard-fields,
  .tb-inline-field,
  .tb-not-inline-field {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }

  /* Color preview swatch */
  .tb-color-preview,
  .tb-color-result {
    border: 1px solid #444444 !important;
  }

  /* Prompt banner */
  .tb-prompt {
    background-color: rgba(3, 169, 244, .08) !important;
    border: 1px solid rgba(3, 169, 244, .3) !important;
    color: #b0b0b0 !important;
  }

  /* Function info / return type hints */
  .tb-function-info,
  .tb-function-return {
    background-color: #252525 !important;
    color: #b0b0b0 !important;
    border: 1px solid #333333 !important;
  }

  /* Select overlay */
  .tb-select-overlay {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6) !important;
  }

  /* Rounded buttons */
  .tb-rounded-btn {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border: 1px solid #444444 !important;
  }

  .tb-rounded-btn:hover {
    background-color: #2e2e2e !important;
  }

  /* Control buttons */
  .tb-control-button,
  .tb-group-button {
    color: #b0b0b0 !important;
  }

  .tb-control-button:hover,
  .tb-group-button:hover {
    color: #03a9f4 !important;
    background-color: rgba(3, 169, 244, .1) !important;
  }

  /* Overlay / loading covers */
  .tb-progress-cover,
  .tb-no-interaction {
    background-color: rgba(18, 18, 18, .75) !important;
  }

  /* JSON editor */
  .tb-json-object-panel {
    background-color: #1e1e1e !important;
    border: 1px solid #333333 !important;
  }

  /* Error tooltips */
  .tb-error-tooltip {
    background-color: #c62828 !important;
    color: #ffffff !important;
  }

  /* Box buttons (widget type selection, etc.) */
  .tb-box-button {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
  }

  .tb-box-button:hover,
  .tb-box-button.tb-selected {
    border-color: #03a9f4 !important;
    background-color: rgba(3, 169, 244, .1) !important;
    color: #03a9f4 !important;
  }

  /* Title bar inside widgets */
  .tb-title {
    color: #b0b0b0 !important;
  }

  /* Inline slide-toggle labels */
  .tb-slide-toggle label,
  .mat-mdc-slide-toggle .mdc-label {
    color: #e0e0e0 !important;
  }

  /* Group checkboxes */
  .tb-group-checkbox .mat-mdc-checkbox-label {
    color: #e0e0e0 !important;
  }

  /* Container backgrounds used by settings panels */
  .tb-settings,
  .tb-container {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  /* Bottom navigation / fab toolbars inside dashboard */
  .tb-dashboard-page .mat-fab-toolbar-background {
    background-color: #1e1e1e !important;
  }

  /* Timewindow selector */
  .tb-timewindow-panel {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
  }

  /* Legend config */
  .tb-legend-config-panel {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    color: #e0e0e0 !important;
  }

  /* Entity details pane */
  .tb-details-panel {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  /* Drop zone visual */
  .tb-drop-list.cdk-drop-list-dragging .tb-form-table-row:not(.cdk-drag-placeholder) {
    background-color: #252525 !important;
  }

  .cdk-drag-preview {
    background-color: #2e2e2e !important;
    border: 1px solid #444444 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .7) !important;
  }

  .cdk-drag-placeholder {
    opacity: 0.35 !important;
    background-color: rgba(3, 169, 244, .06) !important;
  }


  /* ================================================================
     29. HOME DASHBOARD WIDGETS — Inline style overrides
         ThingsBoard sets background-color + color as inline styles
         on .tb-widget; only !important can win.
     ================================================================ */

  /* Widget container inline background override */
  .tb-widget[style*="background-color: rgb(255, 255, 255)"],
  .tb-widget[style*="background-color:rgb(255,255,255)"],
  .tb-widget[style*="background-color: rgb(238, 238, 238)"],
  .tb-widget[style*="background-color:rgb(238,238,238)"] {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  /* Catch-all: any widget with a light inline background */
  .tb-widget {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  /* Dashboard layout .mat-content inline bg override */
  .mat-content[style*="background-color: rgb(255, 255, 255)"],
  .mat-content[style*="background-color:rgb(255,255,255)"],
  .mat-content[style*="background-color: rgb(238, 238, 238)"],
  .mat-content[style*="background-color:rgb(238,238,238)"] {
    background-color: #121212 !important;
  }

  .mat-content {
    background-color: #121212 !important;
  }

  /* tb-progress-cover inline bg */
  .tb-progress-cover[style*="background-color: rgb(255"],
  .tb-progress-cover[style*="background-color: rgb(238"] {
    background-color: rgba(18, 18, 18, .85) !important;
  }

  /* Dashboard title section inline color */
  .tb-dashboard-title section,
  .tb-dashboard-title {
    color: #e0e0e0 !important;
  }

  /* Title input inside dashboard header */
  input.tb-dashboard-title,
  input.tb-dashboard-title[style*="color: rgba(0, 0, 0"] {
    color: #e0e0e0 !important;
    background-color: transparent !important;
  }

  /* mat-label inside dashboard title form field */
  .tb-dashboard-title mat-label[style*="color: rgba(0, 0, 0"] {
    color: #b0b0b0 !important;
  }


  /* ================================================================
     30. TIME SERIES CHART WIDGET
     ================================================================ */

  /* Outer panel — inline background override */
  .tb-time-series-chart-panel,
  .tb-time-series-chart-panel[style*="background: rgb(255"],
  .tb-time-series-chart-panel[style*="background:rgb(255"] {
    background: #1e1e1e !important;
  }

  /* Blur overlay (shown on loading/error) */
  .tb-time-series-chart-overlay,
  .tb-time-series-chart-overlay[style*="background: rgba(255"] {
    background: rgba(30, 30, 30, .72) !important;
  }

  .tb-time-series-chart-content {
    background: transparent !important;
  }

  /* eCharts SVG — axis & tick label text */
  .tb-time-series-chart-shape svg text,
  .tb-time-series-chart-shape text {
    fill: #b0b0b0 !important;
  }

  /* eCharts grid lines */
  .tb-time-series-chart-shape svg line,
  .tb-time-series-chart-shape line {
    stroke: #333333 !important;
  }

  /* eCharts axis lines */
  .tb-time-series-chart-shape svg path[stroke],
  .tb-time-series-chart-shape path[stroke] {
    stroke: #444444 !important;
  }

  /* eCharts area fill — lighten the near-transparent #305680 fill */
  .tb-time-series-chart-shape path[fill="#305680"],
  .tb-time-series-chart-shape path[fill="rgba(48, 86, 128, 0.04)"] {
    fill: rgba(3, 169, 244, .06) !important;
  }

  /* eCharts line stroke */
  .tb-time-series-chart-shape path[stroke="#305680"] {
    stroke: #03a9f4 !important;
  }

  /* Timewindow label inside chart title row */
  .tb-widget-title-row .tb-timewindow,
  .tb-widget-title-row .tb-timewindow-label {
    color: #787878 !important;
  }


  /* ================================================================
     31. HOME PAGE MARKDOWN CARDS
         (Alarms, Devices, Activity widgets)
     ================================================================ */

  .tb-card-content,
  .tb-content-container {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }

  .tb-card-header {
    background-color: transparent !important;
    border-bottom: 1px solid #2e2e2e !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
  }

  .tb-home-widget-title {
    color: #e0e0e0 !important;
    font-weight: 600 !important;
  }

  .tb-home-widget-link,
  a.tb-home-widget-link,
  a.tb-home-widget-title {
    color: #03a9f4 !important;
    text-decoration: none !important;
  }

  .tb-home-widget-link:hover,
  a.tb-home-widget-link:hover {
    color: #4fc3f7 !important;
    text-decoration: underline !important;
  }

  /* Item card grid (the alarm/device count cards) */
  .tb-item-cards {
    display: flex !important;
    gap: 8px !important;
  }

  .tb-item-card {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
    color: #e0e0e0 !important;
    text-decoration: none !important;
    transition: background-color .15s ease !important;
  }

  .tb-item-card:hover {
    background-color: #2e2e2e !important;
    border-color: #444444 !important;
  }

  /* Severity / state colour accents */
  .tb-item-card.tb-critical {
    border-left: 3px solid #f44336 !important;
  }

  .tb-item-card.tb-critical .tb-count,
  .tb-item-card.tb-critical .tb-item-title {
    color: #ef9a9a !important;
  }

  .tb-item-card.tb-active {
    border-left: 3px solid #4caf50 !important;
  }

  .tb-item-card.tb-active .tb-count,
  .tb-item-card.tb-active .tb-item-title {
    color: #a5d6a7 !important;
  }

  .tb-item-card.tb-inactive {
    border-left: 3px solid #ff9800 !important;
  }

  .tb-item-card.tb-inactive .tb-count,
  .tb-item-card.tb-inactive .tb-item-title {
    color: #ffcc80 !important;
  }

  .tb-item-card.tb-assigned {
    border-left: 3px solid #03a9f4 !important;
  }

  .tb-item-card.tb-assigned .tb-count,
  .tb-item-card.tb-assigned .tb-item-title {
    color: #81d4fa !important;
  }

  .tb-item-card.tb-total {
    border-left: 3px solid #9c27b0 !important;
  }

  .tb-item-card.tb-total .tb-count,
  .tb-item-card.tb-total .tb-item-title {
    color: #ce93d8 !important;
  }

  .tb-item-title,
  .tb-item-title-container {
    color: #b0b0b0 !important;
  }

  .tb-count-container {
    background-color: transparent !important;
  }

  .tb-count {
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
  }


  /* ================================================================
     32. RECENT DASHBOARDS WIDGET
     ================================================================ */

  .tb-card-content .tb-title-link,
  a.tb-title-link {
    color: #03a9f4 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  a.tb-title-link:hover {
    color: #4fc3f7 !important;
    text-decoration: underline !important;
  }

  /* Star icon in dashboard table */
  .mat-mdc-cell .star {
    color: #555555 !important;
  }

  .mat-mdc-cell .star.starred {
    color: #ffc107 !important;
  }

  /* Recent dashboards table links */
  tb-recent-dashboards-widget a[href] {
    color: #03a9f4 !important;
  }

  tb-recent-dashboards-widget a[href]:hover {
    color: #4fc3f7 !important;
  }

  /* "Last viewed" / timestamp cells */
  tb-recent-dashboards-widget .mat-mdc-cell:last-child {
    color: #787878 !important;
  }


  /* ================================================================
     33. USAGE INFO WIDGET
     ================================================================ */

  .tb-usage-list {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }

  .tb-usage-items {
    color: #b0b0b0 !important;
  }

  .tb-usage-item {
    color: #b0b0b0 !important;
    font-size: 0.875rem !important;
  }

  .tb-usage-items-values {
    background-color: transparent !important;
  }

  .tb-usage-items-counts {
    color: #e0e0e0 !important;
  }

  .tb-usage-item-counts {
    color: #e0e0e0 !important;
    font-weight: 500 !important;
  }

  /* Progress bars inside usage widget are already handled by
     Section 17, but ensure track colour is visible */
  .tb-usage-items-progress .mdc-linear-progress__buffer-bar {
    background-color: rgba(3, 169, 244, .15) !important;
  }


  /* ================================================================
     34. TOGGLE HEADERS  (Last viewed / Starred, Entities / API calls)
     ================================================================ */

  .tb-toggle-header.mat-button-toggle-group {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    border-radius: 4px !important;
  }

  .mat-button-toggle.tb-toggle-header .mat-button-toggle-button,
  .tb-toggle-header .mat-button-toggle-button {
    color: #b0b0b0 !important;
    background-color: transparent !important;
  }

  .mat-button-toggle.mat-button-toggle-checked.tb-toggle-header,
  .tb-toggle-header .mat-button-toggle.mat-button-toggle-checked {
    background-color: rgba(3, 169, 244, .2) !important;
  }

  .tb-toggle-header .mat-button-toggle.mat-button-toggle-checked .mat-button-toggle-button {
    color: #03a9f4 !important;
  }

  /* Pagination arrows on toggle header */
  .tb-toggle-header-pagination-button mat-icon {
    color: #b0b0b0 !important;
  }

  /* Pseudo-checkbox inside button toggles */
  .tb-toggle-header .mat-pseudo-checkbox-checked::after {
    color: #03a9f4 !important;
    border-color: #03a9f4 !important;
  }


  /* ================================================================
     35. TIMEWINDOW SECTION  (inline color override)
     ================================================================ */

  section.tb-timewindow,
  .tb-timewindow[style*="color: rgba(0, 0, 0"],
  .tb-timewindow {
    color: #787878 !important;
  }

  .tb-timewindow .mat-icon,
  .tb-timewindow tb-icon {
    color: #787878 !important;
  }

  .tb-timewindow-label {
    color: #787878 !important;
  }

  /* Timewindow label active (not !hidden) */
  .tb-timewindow .tb-timewindow-label:not(.\\!hidden) {
    color: #b0b0b0 !important;
  }


  /* ================================================================
     36. ENTITY STATE CONTROLLER / BREADCRUMB
     ================================================================ */

  .entity-state-controller {
    color: #e0e0e0 !important;
  }

  .state-entry {
    color: #e0e0e0 !important;
  }

  .state-divider {
    color: #555555 !important;
  }


  /* ================================================================
     37. DASHBOARD TOOLBAR
     ================================================================ */

  .tb-dashboard-toolbar mat-toolbar,
  .tb-dashboard-toolbar .mat-toolbar {
    background-color: #181818 !important;
    color: #e0e0e0 !important;
  }

  .tb-dashboard-action-panels {
    background-color: transparent !important;
  }

  .tb-dashboard-action-panel {
    background-color: transparent !important;
  }

  /* FAB toolbar background override */
  .mat-fab-toolbar-background {
    background-color: #252525 !important;
  }

  .mat-fab-toolbar .mat-toolbar {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
  }

  /* Dashboard container section */
  .tb-dashboard-container {
    background-color: #121212 !important;
  }


  /* ================================================================
     38. MOBILE APP QR CODE WIDGET
     ================================================================ */

  .tb-mobile-app-qrcode-panel,
  .tb-mobile-app-qrcode-panel[style*="background: rgb(255"] {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  .tb-mobile-app-qrcode-overlay,
  .tb-mobile-app-qrcode-overlay[style*="background: rgba(255"] {
    background: rgba(30, 30, 30, .72) !important;
  }

  /* QR code SVG: invert colours for dark bg */
  .tb-qrcode svg {
    filter: invert(1) !important;
    border-radius: 4px !important;
  }

  .tb-qrcode-label {
    color: #b0b0b0 !important;
    font-size: 0.8rem !important;
  }

  .tb-badges {
    display: flex !important;
    gap: 8px !important;
  }

  /* App store badge images — keep them readable on dark */
  .tb-badges img {
    filter: brightness(0.85) !important;
    border-radius: 6px !important;
  }


  /* ================================================================
     39. GRIDSTER COLUMNS & ROWS  (layout guide lines)
     ================================================================ */

  .gridster-column {
    border-left: 1px solid rgba(255, 255, 255, .04) !important;
    border-right: 1px solid rgba(255, 255, 255, .04) !important;
  }

  .gridster-row {
    border-top: 1px solid rgba(255, 255, 255, .03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .03) !important;
  }

  gridster,
  .gridster {
    background-color: transparent !important;
  }

  gridster-item,
  .gridster-item {
    background-color: transparent !important;
  }

  .gridster-preview {
    background-color: rgba(3, 169, 244, .07) !important;
    border: 2px dashed rgba(3, 169, 244, .4) !important;
  }


  /* ================================================================
     40. GENERIC ECHARTS / SVG CHART OVERRIDES
         ThingsBoard widgets use Apache ECharts with SVG renderer.
         Axis labels and grid lines are hardcoded in SVG attributes;
         CSS fill/stroke on svg elements overrides them.
     ================================================================ */

  /* Any ECharts SVG text labels */
  .tb-widget svg text[fill="rgb(0,0,0)"],
  .tb-widget svg text[fill="rgba(0,0,0,0.54)"] {
    fill: #b0b0b0 !important;
  }

  /* Catch all text inside widget SVGs */
  .tb-widget svg text {
    fill: #b0b0b0 !important;
  }

  /* Grid / axis lines */
  .tb-widget svg line[stroke="#E0E6F1"],
  .tb-widget svg line[stroke="#ccc"],
  .tb-widget svg line[stroke="rgb(224,230,241)"] {
    stroke: #2e2e2e !important;
  }

  /* Axis base lines */
  .tb-widget svg path[stroke="#E0E6F1"],
  .tb-widget svg path[stroke="rgb(224,230,241)"] {
    stroke: #333333 !important;
  }

  /* ThingsBoard default primary chart fill (#305680 area) → cyan */
  .tb-widget svg path[fill="#305680"],
  .tb-widget svg path[stroke="#305680"] {
    fill: rgba(3, 169, 244, .08) !important;
    stroke: #03a9f4 !important;
  }

  /* Default chart background rects */
  .tb-widget svg rect[fill="#fff"],
  .tb-widget svg rect[fill="#ffffff"],
  .tb-widget svg rect[fill="white"] {
    fill: #1e1e1e !important;
  }

  /* Tooltip background */
  .tb-widget .zr-tooltip,
  .tb-widget .ec-tooltip {
    background-color: #252525 !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
  }


  /* ================================================================
     41. WIDGET TITLE ROW  (shared across all widget types)
     ================================================================ */

  .tb-widget-title-row {
    color: #e0e0e0 !important;
  }

  .tb-widget-title {
    color: #e0e0e0 !important;
  }

  .mat-subtitle-1.title,
  .mat-subtitle-1 {
    color: #e0e0e0 !important;
  }

  /* Widget action buttons */
  .tb-widget-actions .mat-mdc-icon-button {
    color: #787878 !important;
  }

  .tb-widget-actions .mat-mdc-icon-button:hover {
    color: #b0b0b0 !important;
    background-color: rgba(255, 255, 255, .06) !important;
  }

  /* ================================================================
     42. MAT TABLE – STICKY CELL BACKGROUNDS
         position:sticky ignores the --mat-table-background-color token.
         Every sticky cell needs an explicit background-color.
     ================================================================ */

  .table-container {
    background-color: #1e1e1e !important;
  }

  .mat-mdc-table,
  .mdc-data-table__table {
    background-color: #1e1e1e !important;
  }

  .mat-mdc-table-sticky {
    background-color: #1e1e1e !important;
  }

  .mat-mdc-header-row,
  .mdc-data-table__header-row {
    background-color: #1e1e1e !important;
  }

  .mat-mdc-row,
  .mdc-data-table__row {
    background-color: #1e1e1e !important;
  }

  .mat-mdc-row:hover,
  .mdc-data-table__row:hover {
    background-color: #252525 !important;
  }

  .mat-mdc-table-sticky-border-elem-left {
    background-color: #1e1e1e !important;
  }

  .mat-mdc-table-sticky-border-elem-right {
    background-color: #1e1e1e !important;
  }

  .mat-mdc-table-sticky-border-elem-top {
    background-color: #1e1e1e !important;
  }

  .no-data-found {
    background-color: #1e1e1e !important;
    color: #b0b0b0 !important;
  }

  /* ================================================================
     43. WIDGET CARD PANELS – inline style overrides
         TB widget renderer sets background/color as inline styles;
         only !important on the class selector overrides them.
     ================================================================ */

  .tb-label-value-card-panel,
  .tb-value-chart-card-panel {
    background: #1e1e1e !important;
  }

  .tb-label-value-card-overlay,
  .tb-value-chart-card-overlay {
    background: rgba(30, 30, 30, 0.72) !important;
  }

  .tb-label-value-card-label,
  .tb-label-value-card-value,
  .tb-value-chart-card-value {
    color: #e0e0e0 !important;
  }

  .tb-timewindow section {
    color: #787878 !important;
  }

  /* ================================================================
     44. ACTION BUTTON WIDGET
         .tb-widget has inline color: rgba(0,0,0,0.87) which darkens
         text and SVG icons. The mat button surface also needs fixing.
     ================================================================ */

  .tb-action-button-widget {
    background-color: transparent !important;
    color: #e0e0e0 !important;
  }

  .tb-widget-button.mdc-button,
  .tb-widget-button.mat-mdc-button {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
  }

  .tb-widget-button.mdc-button:hover,
  .tb-widget-button.mat-mdc-button:hover {
    background-color: #2e2e2e !important;
  }

  .tb-widget-button-label {
    color: #e0e0e0 !important;
  }

  .tb-widget-button-content {
    color: #e0e0e0 !important;
  }

  /* SVG icons inside action buttons inherit currentColor */
  .tb-widget-button svg path {
    fill: currentColor !important;
  }

  /* ================================================================
     45. JSON INPUT WIDGET + ACE EDITOR
         tb-json-object has inline background:#fff.
         Ace editor ace-tm theme hardcodes its own light palette.
     ================================================================ */

  .tb-json-object {
    background: #1e1e1e !important;
  }

  .tb-json-object-toolbar {
    background: #1e1e1e !important;
    border-bottom: 1px solid #333333 !important;
  }

  .tb-json-object-toolbar .tb-title {
    color: #b0b0b0 !important;
  }

  /* Ace editor - tm theme overrides */
  .ace-tm,
  .ace_editor.ace-tm {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  .ace-tm .ace_gutter {
    background: #181818 !important;
    color: #555555 !important;
  }

  .ace-tm .ace_gutter-active-line {
    background-color: #252525 !important;
  }

  .ace-tm .ace_active-line {
    background: #252525 !important;
  }

  .ace-tm .ace_cursor {
    color: #03a9f4 !important;
  }

  .ace-tm .ace_string  { color: #98c379 !important; }
  .ace-tm .ace_numeric { color: #d19a66 !important; }
  .ace-tm .ace_boolean { color: #56b6c2 !important; }
  .ace-tm .ace_keyword { color: #c678dd !important; }
  .ace-tm .ace_variable { color: #e06c75 !important; }

  .ace-tm .ace_print-margin {
    background: #333333 !important;
  }

  /* JSON input action bar */
  .tb-json-input__actions {
    background: #1e1e1e !important;
    border-top: 1px solid #333333 !important;
  }

  /* ================================================================
     46. WIDGET EDITOR / CONFIG PANEL
         mat-content expansion wrapper has inline background:#fff.
         tb-html and tb-css editors also have inline background:#fff.
     ================================================================ */

  /* Outer expansion panel content wrapper */
  .mat-content,
  .tb-widget-config {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  .tb-widget-config-header {
    background-color: #181818 !important;
    border-bottom: 1px solid #333333 !important;
  }

  /* Toggle tabs (Data / Appearance / Widget card / Actions / Layout) */
  .mat-button-toggle-group.tb-toggle-header,
  .mat-button-toggle {
    background-color: #252525 !important;
    border-color: #333333 !important;
    color: #b0b0b0 !important;
  }

  .mat-button-toggle-checked {
    background-color: #1e1e1e !important;
    color: #03a9f4 !important;
  }

  /* Form panels */
  .tb-form-panel {
    background-color: #1e1e1e !important;
  }

  .tb-form-panel-title {
    color: #03a9f4 !important;
  }

  .tb-form-row {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #2a2a2a !important;
  }

  .fixed-title-width,
  .tb-hint-tooltip {
    color: #b0b0b0 !important;
  }

  /* Datasource section */
  .tb-datasource-section {
    background-color: #252525 !important;
    border-color: #333333 !important;
  }

  /* HTML / CSS editor panels — inline background:#fff */
  .tb-html,
  .tb-css {
    background: #1e1e1e !important;
  }

  .tb-html-toolbar,
  .tb-css-toolbar {
    background: #1e1e1e !important;
    border-bottom: 1px solid #333333 !important;
  }

  .tb-html-toolbar .tb-title,
  .tb-css-toolbar .tb-title {
    color: #b0b0b0 !important;
  }

  /* Data key chips */
  .mat-mdc-chip.tb-datakey-chip,
  .tb-attribute-chip {
    background-color: #2e2e2e !important;
    color: #e0e0e0 !important;
  }

  .tb-chip-label {
    color: #e0e0e0 !important;
  }

  /* Drop list background */
  .tb-datasources,
  .tb-drop-list {
    background-color: transparent !important;
  }

  /* ================================================================
     47. EDITOR TOOLBAR BUTTONS (Tidy / Mini / Fullscreen)
         mat-unthemed buttons get no color from the theme, making
         them near-invisible on the dark #1e1e1e toolbar background.
     ================================================================ */

  .tb-json-object-toolbar button,
  .tb-html-toolbar button,
  .tb-css-toolbar button {
    color: #b0b0b0 !important;
  }

  .tb-json-object-toolbar button:hover,
  .tb-html-toolbar button:hover,
  .tb-css-toolbar button:hover {
    color: #e0e0e0 !important;
    background-color: rgba(255, 255, 255, .06) !important;
  }

  /* "Tidy" / "Mini" text buttons specifically */
  .tb-json-object-toolbar button.tidy,
  .tb-html-toolbar button.tidy,
  .tb-css-toolbar button.tidy {
    color: #03a9f4 !important;
    border: 1px solid rgba(3, 169, 244, .3) !important;
  }

  .tb-json-object-toolbar button.tidy:hover,
  .tb-html-toolbar button.tidy:hover,
  .tb-css-toolbar button.tidy:hover {
    background-color: rgba(3, 169, 244, .08) !important;
  }

  /* Mat icons inside these toolbars */
  .tb-json-object-toolbar .mat-icon,
  .tb-html-toolbar .mat-icon,
  .tb-css-toolbar .mat-icon {
    color: #b0b0b0 !important;
  }

  /* ================================================================
     48. TOOLTIPSTER WIDGET EDIT ACTIONS POPUP
         Tooltipster has its own stylesheet; needs explicit overrides
         for the box background, border, and icon button colors.
     ================================================================ */

  .tooltipster-base.tb-widget-edit-actions-tooltip .tooltipster-box {
    background-color: #252525 !important;
    border: 1px solid #333333 !important;
    border-radius: 4px !important;
  }

  .tooltipster-base.tb-widget-edit-actions-tooltip .tooltipster-content {
    background-color: #252525 !important;
    padding: 2px !important;
  }

  .tb-widget-action-container,
  .tb-widget-actions-panel {
    background-color: transparent !important;
  }

  .tb-widget-actions-panel .mat-mdc-icon-button {
    color: #b0b0b0 !important;
  }

  .tb-widget-actions-panel .mat-mdc-icon-button:hover {
    color: #e0e0e0 !important;
    background-color: rgba(255, 255, 255, .08) !important;
  }

  /* Arrow hidden per the HTML but style it anyway for other tooltipsters */
  .tooltipster-base.tb-widget-edit-actions-tooltip .tooltipster-arrow-background {
    border-top-color: #252525 !important;
  }

  .tooltipster-base.tb-widget-edit-actions-tooltip .tooltipster-arrow-border {
    border-top-color: #333333 !important;
  }

  /* ================================================================
     49. WIDGET EDITOR PAGE
         mat-hue-3 toolbar, editor area title panels, split gutters,
         settings form container (inline white bg), form table header.
     ================================================================ */

  /* Top toolbar — mat-hue-3 overrides to a light teal by default */
  .mat-toolbar.tb-edit-toolbar,
  .mat-toolbar.tb-edit-toolbar.mat-hue-3 {
    background-color: #181818 !important;
    color: #e0e0e0 !important;
  }

  .mat-toolbar.tb-edit-toolbar button,
  .mat-toolbar.tb-edit-toolbar .mat-icon {
    color: #b0b0b0 !important;
  }

  .mat-toolbar.tb-edit-toolbar .mat-mdc-raised-button {
    background-color: #2e2e2e !important;
    color: #e0e0e0 !important;
  }

  /* Editor area title panels (above each ace pane) */
  .tb-editor-area-title-panel {
    background-color: #181818 !important;
    border-bottom: 1px solid #333333 !important;
    color: #b0b0b0 !important;
  }

  .tb-editor-area-title-panel label {
    color: #b0b0b0 !important;
  }

  .tb-editor-area-title-panel button {
    color: #b0b0b0 !important;
  }

  .tb-editor-area-title-panel button:hover {
    color: #e0e0e0 !important;
    background-color: rgba(255, 255, 255, .06) !important;
  }

  /* Split pane gutters */
  .gutter.gutter-horizontal,
  .gutter.gutter-vertical {
    background-color: #0d0d0d !important;
  }

  /* Settings form tab content — inline background: rgb(255,255,255) */
  .tb-resize-container {
    background-color: #1e1e1e !important;
  }

  /* Dynamic form properties table */
  .tb-form-table-header {
    background-color: #181818 !important;
    color: #b0b0b0 !important;
    border-bottom: 1px solid #333333 !important;
  }

  .tb-form-table-header-cell {
    color: #b0b0b0 !important;
  }

  /* "No properties configured" prompt */
  .tb-prompt {
    color: #555555 !important;
  }

  /* Widget title input in toolbar */
  .tb-widget-title.tb-appearance-transparent .mdc-text-field__input {
    color: #e0e0e0 !important;
  }

  /* Tab group inside the editor panes */
  .tb-editor .mat-mdc-tab-header {
    background-color: #181818 !important;
    border-bottom: 1px solid #333333 !important;
  }

  /* ================================================================
     50. MAT-UNTHEMED BUTTON SURFACES  (global fix)
         mat-mdc-raised-button.mat-unthemed → white MDC surface
         mat-mdc-button.mat-unthemed        → inherits dark text
         mat-mdc-icon-button.mat-unthemed   → invisible icons
     ================================================================ */

  /* Raised buttons (Save, Save as, Undo) */
  .mat-mdc-raised-button.mat-unthemed {
    background-color: #2e2e2e !important;
    color: #e0e0e0 !important;
  }

  .mat-mdc-raised-button.mat-unthemed:hover:not(:disabled) {
    background-color: #3a3a3a !important;
  }

  .mat-mdc-raised-button.mat-unthemed:disabled {
    background-color: #252525 !important;
    color: rgba(255, 255, 255, .3) !important;
  }

  /* Flat text buttons (Run, Toggle fullscreen, Tidy) */
  .mat-mdc-button.mat-unthemed {
    color: #b0b0b0 !important;
  }

  .mat-mdc-button.mat-unthemed:hover:not(:disabled) {
    color: #e0e0e0 !important;
    background-color: rgba(255, 255, 255, .06) !important;
  }

  .mat-mdc-button.mat-unthemed:disabled {
    color: rgba(255, 255, 255, .3) !important;
  }

  /* Icon buttons */
  .mat-mdc-icon-button.mat-unthemed {
    color: #b0b0b0 !important;
  }

  .mat-mdc-icon-button.mat-unthemed:hover:not(:disabled) {
    color: #e0e0e0 !important;
    background-color: rgba(255, 255, 255, .06) !important;
  }

  .mat-mdc-icon-button.mat-unthemed:disabled {
    color: rgba(255, 255, 255, .2) !important;
  }

  /* Outlined/stroked buttons */
  .mat-mdc-outlined-button.mat-unthemed {
    color: #b0b0b0 !important;
    border-color: #555555 !important;
  }

  .mat-mdc-outlined-button.mat-unthemed:hover:not(:disabled) {
    color: #e0e0e0 !important;
    border-color: #888888 !important;
    background-color: rgba(255, 255, 255, .04) !important;
  }

  .mat-mdc-outlined-button.mat-unthemed:disabled {
    color: rgba(255, 255, 255, .3) !important;
    border-color: rgba(255, 255, 255, .12) !important;
  }

  /* Unelevated/flat raised buttons */
  .mat-mdc-unelevated-button.mat-unthemed {
    background-color: #2e2e2e !important;
    color: #e0e0e0 !important;
  }

  .mat-mdc-unelevated-button.mat-unthemed:disabled {
    background-color: #252525 !important;
    color: rgba(255, 255, 255, .3) !important;
  }

  /* ================================================================
     51. MDC TAB LABEL TEXT + NO-COLOR ICONS + FULLSCREEN BUTTON
         mdc-tab__text-label is set black by MDC directly.
         mat-icon-no-color strips color — SVG paths need explicit fill.
         tb-fullscreen-button-style has no color inheritance.
     ================================================================ */

  /* Tab label text — MDC hardcodes this black */
  .mdc-tab__text-label {
    color: rgba(255, 255, 255, .6) !important;
  }

  .mdc-tab--active .mdc-tab__text-label {
    color: #03a9f4 !important;
  }

  /* mat-icon-no-color strips the color property — restore it */
  .mat-icon-no-color {
    color: inherit !important;
  }

  /* SVG icons with mat-icon-no-color lose fill too */
  .mat-icon-no-color svg path {
    fill: currentColor !important;
  }

  /* Fullscreen button overlaid on the iframe preview */
  .tb-fullscreen-button-style {
    color: #b0b0b0 !important;
    background-color: rgba(30, 30, 30, .7) !important;
  }

  .tb-fullscreen-button-style:hover {
    color: #e0e0e0 !important;
    background-color: rgba(46, 46, 46, .9) !important;
  }

  /* mat-primary icon buttons (help, braces icon) already have color
     but ensure they stay visible on dark bg */
  .mat-mdc-icon-button.mat-primary {
    color: #03a9f4 !important;
  }
  /* ================================================================
     52. WIDGET EDITOR — JS PANEL BUTTON ROW
         tb-help-popup-button-container is a <fieldset> and receives
         a native browser border/margin.
         tb-toggle-help-popup-button is a plain div wrapper.
         mat-primary SVG icons (application-braces-outline) are NOT
         mat-icon-no-color, so §51's fill fix doesn't reach them.
     ================================================================ */

  /* Strip native <fieldset> chrome from the help-popup wrapper */
  fieldset.tb-help-popup-button-container {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Inline-flex wrapper div — ensure no stray background */
  .tb-toggle-help-popup-button {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
  }

  /* SVG icons carrying mat-primary (not mat-icon-no-color) need fill too */
  .mat-icon.mat-primary svg path {
    fill: currentColor !important;
  }
  /* ================================================================
     53. UNTHEMED BUTTON RESTING BACKGROUND FIX
         §50 sets color but omits background-color on the resting
         state, leaving MDC's --mdc-icon-button-container-color and
         --mdc-text-button-container-color at their light-theme
         surface default (white).  Hover already works because it
         explicitly sets background-color.
         Disabled gets its own muted palette entry here too.
     ================================================================ */

  /* Icon buttons — resting bg */
  .mat-mdc-icon-button.mat-unthemed {
    background-color: transparent !important;
    --mdc-icon-button-container-color: transparent;
  }

  /* Text/flat buttons (Tidy, Run …) — resting bg */
  .mat-mdc-button.mat-unthemed {
    background-color: transparent !important;
    --mdc-text-button-container-color: transparent;
  }

  /* Disabled — explicit muted surface so it reads as inactive,
     not invisible, against the #181818 panel background */
  .mat-mdc-icon-button.mat-unthemed:disabled {
    background-color: transparent !important;
    color: rgba(255, 255, 255, .2) !important;
    --mdc-icon-button-container-color: transparent;
  }

  .mat-mdc-button.mat-unthemed:disabled {
    background-color: transparent !important;
    color: rgba(255, 255, 255, .2) !important;
    --mdc-text-button-container-color: transparent;
  }
  /* ================================================================
     54. MAT-PRIMARY ICON BUTTON RESTING BACKGROUND FIX
         .tb-help-popup-button (and any other mat-primary icon button)
         shares the same MDC token bleed as mat-unthemed (§53).
         §51 set the color but not the container background.
     ================================================================ */

  .mat-mdc-icon-button.mat-primary {
    background-color: transparent !important;
    --mdc-icon-button-container-color: transparent;
  }

  .mat-mdc-icon-button.mat-primary:disabled {
    background-color: transparent !important;
    color: rgba(3, 169, 244, .3) !important;
    --mdc-icon-button-container-color: transparent;
  }
  /* ================================================================
     55. FULLSCREEN BUTTON RESTYLE + MINI-FAB DARK MODE
         tb-fullscreen-button-style (§51) was too subtle — dark
         transparent against a dark widget surface.  Update to a
         solid accent surface matching the tb-btn-header FAB family.
         mat-icon-no-color on the inner icon inherits via §51.
         Mini FABs (edit/done/close) need explicit MDC container
         tokens; MDC defaults to the light-theme primary surface.
     ================================================================ */

  /* Fullscreen overlay button — solid accent, visible on any widget */
  .tb-fullscreen-button-style {
    color: #ffffff !important;
    background-color: #03a9f4 !important;
    --mdc-icon-button-container-color: #03a9f4;
  }

  .tb-fullscreen-button-style:hover {
    color: #ffffff !important;
    background-color: #0288d1 !important;
    --mdc-icon-button-container-color: #0288d1;
  }

  /* Mini FABs — edit / done / close */
  .mat-mdc-mini-fab.mat-primary {
    background-color: #03a9f4 !important;
    color: #ffffff !important;
    --mdc-fab-container-color: #03a9f4;
    --mat-fab-foreground-color: #ffffff;
    --mdc-fab-small-container-color: #03a9f4;
  }

  .mat-mdc-mini-fab.mat-primary:hover:not(:disabled) {
    background-color: #0288d1 !important;
    --mdc-fab-container-color: #0288d1;
    --mdc-fab-small-container-color: #0288d1;
  }

  .mat-mdc-mini-fab.mat-primary:disabled {
    background-color: rgba(3, 169, 244, .28) !important;
    color: rgba(255, 255, 255, .4) !important;
    --mdc-fab-container-color: rgba(3, 169, 244, .28);
    --mdc-fab-small-container-color: rgba(3, 169, 244, .28);
  }
  /* ================================================================
     56. HOME DASHBOARD PAGE — WIDGET CONTENT DARK MODE
         Multiple inline white backgrounds not reachable by token
         overrides alone — requires !important per-selector.
         mat-button-toggle-group needs MDC custom properties.
         SVG axis text fill is an attribute, overridable via CSS fill.
     ================================================================ */

  /* Gridster canvas — inline rgb(238,238,238) on .mat-content */
  .tb-dashboard-layout .mat-content,
  .tb-dashboard-content .mat-content {
    background-color: #121212 !important;
  }

  /* Widget card — inline rgb(255,255,255) on every .tb-widget */
  .tb-widget {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  /* Time-series chart panel — inline rgb(255,255,255) */
  .tb-time-series-chart-panel {
    background: #1e1e1e !important;
  }

  /* Mobile app QR panel — inline rgb(255,255,255) */
  .tb-mobile-app-qrcode-panel {
    background: #1e1e1e !important;
  }

  /* mat-button-toggle-group (Last viewed / Starred / Entities toggles) */
  .mat-button-toggle-group.tb-toggle-header {
    background-color: #252525 !important;
    border-color: #333333 !important;
    --mat-standard-button-toggle-background-color: #252525;
    --mat-standard-button-toggle-text-color: #b0b0b0;
    --mat-standard-button-toggle-divider-color: #333333;
    --mat-standard-button-toggle-state-layer-color: rgba(255, 255, 255, .06);
    --mat-standard-button-toggle-selected-state-background-color: rgba(3, 169, 244, .12);
    --mat-standard-button-toggle-selected-state-text-color: #03a9f4;
  }

  .mat-button-toggle-button {
    color: #b0b0b0 !important;
  }

  .mat-button-toggle-checked .mat-button-toggle-button {
    color: #03a9f4 !important;
  }

  /* Stat tiles — Inactive/Active/Total, Critical/Assigned etc. */
  .tb-item-card {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
  }

  .tb-item-title {
    color: #b0b0b0 !important;
  }

  .tb-count {
    color: #e0e0e0 !important;
  }

  /* Home widget titles and links */
  .tb-home-widget-title {
    color: #e0e0e0 !important;
  }

  .tb-home-widget-link {
    color: #b0b0b0 !important;
  }

  .tb-home-widget-link:hover {
    color: #03a9f4 !important;
  }

  .tb-title-link {
    color: #03a9f4 !important;
  }

  /* SVG axis / tick text — inline fill="rgb(0,0,0)" attribute */
  .tb-time-series-chart-shape text {
    fill: #b0b0b0 !important;
  }

  /* Progress bar buffer track */
  .mdc-linear-progress__buffer-bar {
    background-color: #333333 !important;
  }

  /* Usage widget text */
  .tb-usage-item,
  .tb-usage-item-counts {
    color: #b0b0b0 !important;
  }

  /* Timewindow label on dashboard toolbar */
  .tb-timewindow {
    color: #b0b0b0 !important;
  }

  /* QR code caption */
  .tb-qrcode-label {
    color: #b0b0b0 !important;
  }

  /* Toggle header chevron pagination buttons */
  .tb-toggle-header-pagination-button {
    color: #b0b0b0 !important;
  }
  /* ================================================================
     57. HOME WIDGET INTERNAL PADDING
         Toggle groups and content rows sit flush against card edges.
     ================================================================ */

  .tb-card-header {
    padding: 8px 0 !important;
  }

  .tb-card-content {
    padding: 8px !important;
  }

  .tb-toggle-header {
    padding: 2px !important;
  }
}