/* ================================================
   WEM Light Theme. ThingsBoard PE 4.3.0
   ================================================
   Served by nginx as <link> stylesheet, NOT via TB customCss.
   All rules prefixed with body.wem-light for specificity.
   Sidebar (.tb-side-menu) stays DARK: intentionally excluded.
   Login page excluded (toggle hidden on login).
   ================================================ */


/* ================================================
   1. GLOBAL: Light page background
   ================================================ */

body.wem-light,
body.wem-light.tb-default,
html.wem-light {
  background: #F5F3F0 !important;
  background-color: #F5F3F0 !important;
  color: #3D4F63 !important;
  color-scheme: light !important;
}

html.wem-light body,
html.wem-light body.tb-default,
html.wem-light[class],
body.wem-light[class] {
  background-color: #F5F3F0 !important;
  background: #F5F3F0 !important;
}

/* Font family: keep system stack, no override needed */


/* ================================================
   2. KEYFRAME ANIMATIONS: Light-adjusted shadows
   ================================================ */

@keyframes wemCardGlowLight {
  0%   { box-shadow: 0 1px 3px rgba(26,35,50,0.06), 0 1px 2px rgba(26,35,50,0.04); }
  50%  { box-shadow: 0 4px 12px rgba(26,35,50,0.08), 0 0 12px rgba(45,133,52,0.04); }
  100% { box-shadow: 0 4px 12px rgba(26,35,50,0.08), 0 0 0 1px rgba(26,35,50,0.03); }
}

@keyframes wemWidgetEnterLight {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================
   3. TOOLBAR: White with bottom shadow
   ================================================ */

body.wem-light mat-toolbar,
body.wem-light mat-toolbar.mat-toolbar,
body.wem-light mat-toolbar.mat-primary,
body.wem-light .mat-toolbar,
body.wem-light .mat-toolbar.mat-primary,
body.wem-light .tb-primary-toolbar {
  background: #FEFEFE !important;
  color: #1A2332 !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.06) !important;
  box-shadow: 0 1px 3px rgba(26, 35, 50, 0.06), 0 1px 2px rgba(26, 35, 50, 0.04) !important;
}

/* Toolbar icons & text: dark on light */
body.wem-light mat-toolbar .mat-icon,
body.wem-light mat-toolbar mat-icon,
body.wem-light mat-toolbar .mat-mdc-icon-button {
  color: #5C6E82 !important;
}

body.wem-light mat-toolbar .mat-mdc-icon-button:hover {
  color: #1A2332 !important;
  background: rgba(26, 35, 50, 0.04) !important;
}

/* Logo: dark on light bg (undo dark theme invert) */
body.wem-light .tb-logo-title img,
body.wem-light [fxlayout] img[src*="logo"],
body.wem-light mat-toolbar img {
  filter: none !important;
}

/* Logo container text */
body.wem-light .tb-logo-title {
  color: #1A2332 !important;
}

/* User info in toolbar */
body.wem-light mat-toolbar .tb-user-name,
body.wem-light mat-toolbar [class*="user-name"],
body.wem-light mat-toolbar [class*="user-display"] {
  color: #1A2332 !important;
}

body.wem-light mat-toolbar .tb-user-role,
body.wem-light mat-toolbar [class*="user-role"],
body.wem-light mat-toolbar [class*="tenant"] {
  color: #5C6E82 !important;
}


/* ================================================
   4. SIDEBAR: SKIP (stays dark)
   ================================================ */
/* Intentionally empty; sidebar retains dark theme styles */


/* ================================================
   5. MAIN CONTENT AREA: Light background
   ================================================ */

body.wem-light .mat-drawer-content,
body.wem-light mat-sidenav-content,
body.wem-light .mat-sidenav-content,
body.wem-light .tb-main-content {
  background: #F5F3F0 !important;
  color: #3D4F63 !important;
}

body.wem-light .mat-drawer-container,
body.wem-light mat-drawer-container {
  background: #F5F3F0 !important;
  color: #3D4F63 !important;
}

body.wem-light .mat-drawer-container .mat-content,
body.wem-light .tb-dashboard-layouts .mat-content,
body.wem-light .tb-dashboard-drawer-container .mat-content {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* City watermark: hide on light (looks wrong) */
body.wem-light mat-sidenav-content::before,
body.wem-light .mat-sidenav-content::before {
  opacity: 0.015 !important;
}


/* ================================================
   6. CARDS & WIDGETS: White surface, subtle shadow
   ================================================ */

body.wem-light .mat-mdc-card,
body.wem-light .mat-card,
body.wem-light mat-card {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(26,35,50,0.06), 0 1px 2px rgba(26,35,50,0.04) !important;
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-card:hover,
body.wem-light mat-card:hover {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: rgba(45, 133, 52, 0.12) !important;
  box-shadow: 0 4px 12px rgba(26,35,50,0.08), 0 0 0 1px rgba(45, 133, 52, 0.06) !important;
  transform: translateY(-1px) !important;
}

body.wem-light .mat-mdc-card-title,
body.wem-light .mat-card-title {
  color: #1A2332 !important;
}

body.wem-light .mat-mdc-card-subtitle,
body.wem-light .mat-card-subtitle {
  color: #5C6E82 !important;
}

body.wem-light .mat-mdc-card-content p,
body.wem-light .mat-card-content p {
  color: #3D4F63 !important;
}

/* CRITICAL: Dashboard widget containers: transparent to let original styles through */
body.wem-light .tb-widget,
body.wem-light .tb-widget-container {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #3D4F63 !important;
}

body.wem-light .tb-widget:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}


/* ================================================
   7. HEADINGS & TEXT: Dark text on light
   ================================================ */

body.wem-light h1,
body.wem-light h2,
body.wem-light h3,
body.wem-light h4,
body.wem-light h5,
body.wem-light h6 {
  color: #1A2332 !important;
}

/* Body text: explicit dark color, NOT just inherit (prevents white-on-white) */
body.wem-light mat-sidenav-content p,
body.wem-light mat-sidenav-content label,
body.wem-light .mat-drawer-content p,
body.wem-light .mat-drawer-content label {
  color: #3D4F63 !important;
}

body.wem-light mat-sidenav-content span,
body.wem-light mat-sidenav-content div,
body.wem-light .mat-drawer-content span,
body.wem-light .mat-drawer-content div {
  color: inherit;
}

/* CRITICAL: Ensure text in overlays/panels is never white */
body.wem-light .cdk-overlay-container span,
body.wem-light .cdk-overlay-container div,
body.wem-light .cdk-overlay-container p,
body.wem-light .cdk-overlay-container label {
  color: #3D4F63;
}

body.wem-light .cdk-overlay-container h1,
body.wem-light .cdk-overlay-container h2,
body.wem-light .cdk-overlay-container h3,
body.wem-light .cdk-overlay-container h4 {
  color: #1A2332;
}


/* ================================================
   8. BUTTONS: Green primary unchanged, dark text for others
   ================================================ */

/* Raised / Flat primary: keep green */
body.wem-light .mat-mdc-raised-button.mat-primary,
body.wem-light .mat-mdc-unelevated-button.mat-primary,
body.wem-light button.mat-primary[mat-raised-button],
body.wem-light button.mat-primary[mat-flat-button] {
  background: #1E5A23 !important;
  color: #FFFFFF !important;
}

body.wem-light .mat-mdc-raised-button.mat-primary:hover,
body.wem-light .mat-mdc-unelevated-button.mat-primary:hover {
  background: #2D8534 !important;
  box-shadow: 0 0 0 4px rgba(45, 133, 52, 0.12) !important;
}

/* Raised / Flat accent: keep green */
body.wem-light .mat-mdc-raised-button.mat-accent,
body.wem-light .mat-mdc-unelevated-button.mat-accent,
body.wem-light button.mat-accent[mat-raised-button],
body.wem-light button.mat-accent[mat-flat-button] {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}

body.wem-light .mat-mdc-raised-button.mat-accent:hover,
body.wem-light .mat-mdc-unelevated-button.mat-accent:hover {
  background: #37B440 !important;
  box-shadow: 0 0 0 4px rgba(45, 133, 52, 0.12) !important;
}

/* FAB: keep green gradient */
body.wem-light .mat-mdc-fab,
body.wem-light .mat-mdc-mini-fab,
body.wem-light .mat-fab,
body.wem-light .mat-mini-fab {
  background: linear-gradient(135deg, #2D8534 0%, #37B440 50%, #56D15F 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(45, 133, 52, 0.2) !important;
}

body.wem-light .mat-mdc-fab:hover,
body.wem-light .mat-mdc-mini-fab:hover {
  box-shadow: 0 0 0 4px rgba(45, 133, 52, 0.1), 0 4px 16px rgba(45, 133, 52, 0.25) !important;
}

/* Unthemed raised buttons: light surface */
body.wem-light .mat-mdc-raised-button:not(.mat-primary):not(.mat-accent):not(.mat-warn),
body.wem-light .mat-mdc-raised-button.mat-unthemed,
body.wem-light .mat-mdc-unelevated-button:not(.mat-primary):not(.mat-accent):not(.mat-warn),
body.wem-light .mat-mdc-unelevated-button.mat-unthemed {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #3D4F63 !important;
  border: 1px solid rgba(26, 35, 50, 0.12) !important;
}

body.wem-light .mat-mdc-raised-button:not(.mat-primary):not(.mat-accent):not(.mat-warn):hover,
body.wem-light .mat-mdc-unelevated-button:not(.mat-primary):not(.mat-accent):not(.mat-warn):hover {
  background: #F0EDE8 !important;
  color: #1A2332 !important;
}

/* Outlined buttons: dark text/borders */
body.wem-light .mat-mdc-outlined-button,
body.wem-light button[mat-stroked-button] {
  border-color: rgba(26, 35, 50, 0.22) !important;
  color: #3D4F63 !important;
  --mdc-outlined-button-label-text-color: #3D4F63;
}

body.wem-light .mat-mdc-outlined-button:hover,
body.wem-light button[mat-stroked-button]:hover {
  border-color: #2D8534 !important;
  color: #2D8534 !important;
  background: rgba(45, 133, 52, 0.04) !important;
  --mdc-outlined-button-label-text-color: #2D8534;
}

/* Text / flat buttons: in main content area */
body.wem-light mat-sidenav-content .mat-mdc-button,
body.wem-light mat-sidenav-content button[mat-button] {
  color: #3D4F63 !important;
  --mdc-text-button-label-text-color: #3D4F63;
}

body.wem-light mat-sidenav-content .mat-mdc-button:hover,
body.wem-light mat-sidenav-content button[mat-button]:hover {
  color: #2D8534 !important;
  background: rgba(45, 133, 52, 0.04) !important;
  --mdc-text-button-label-text-color: #2D8534;
}

/* Icon buttons */
body.wem-light .mat-mdc-icon-button {
  color: #5C6E82 !important;
}

body.wem-light .mat-mdc-icon-button:hover {
  color: #1A2332 !important;
  background: rgba(26, 35, 50, 0.04) !important;
}

body.wem-light .mdc-button__label {
  color: inherit !important;
}


/* ================================================
   9. BUTTON TOGGLE GROUPS: Light track
   ================================================ */

body.wem-light .mat-button-toggle-group,
body.wem-light .mat-button-toggle-standalone {
  background: #F5F3F0 !important;
  border: 1px solid rgba(26, 35, 50, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 2px rgba(26, 35, 50, 0.04) !important;
}

body.wem-light .mat-button-toggle {
  background: transparent !important;
  color: #3D4F63 !important;
  border: none !important;
}

body.wem-light .mat-button-toggle + .mat-button-toggle {
  border-left: 1px solid rgba(26, 35, 50, 0.06) !important;
}

body.wem-light .mat-button-toggle:hover {
  background: rgba(26, 35, 50, 0.04) !important;
  color: #1A2332 !important;
}

body.wem-light .mat-button-toggle .mat-button-toggle-label-content {
  color: #3D4F63 !important;
}

body.wem-light .mat-button-toggle .mat-button-toggle-button {
  color: #3D4F63 !important;
  border-color: transparent !important;
}

body.wem-light button.mat-button-toggle-button.mat-focus-indicator {
  border-color: transparent !important;
}

/* Checked toggle */
body.wem-light .mat-button-toggle-checked,
body.wem-light .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
  background: rgba(45, 133, 52, 0.1) !important;
  color: #2D8534 !important;
}

body.wem-light .mat-button-toggle-checked .mat-button-toggle-button {
  background: transparent !important;
  color: #2D8534 !important;
  border-color: transparent !important;
}

body.wem-light .mat-button-toggle-checked .mat-button-toggle-label-content {
  color: #2D8534 !important;
}

body.wem-light .mat-button-toggle-checked .mat-pseudo-checkbox,
body.wem-light .mat-pseudo-checkbox.mat-pseudo-checkbox-checked {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}

body.wem-light .mat-pseudo-checkbox {
  border-color: rgba(26, 35, 50, 0.22) !important;
}


/* ================================================
   10. FORMS: Light inputs, dark borders
   ================================================ */

body.wem-light .mdc-text-field--outlined,
body.wem-light .mat-mdc-text-field-wrapper,
body.wem-light .mdc-text-field {
  background: #FAFAF8 !important;
  border-radius: 8px !important;
}

body.wem-light .mdc-text-field--outlined:hover,
body.wem-light .mat-mdc-form-field:hover .mdc-text-field {
  background: #FFFFFF !important;
}

body.wem-light .mat-mdc-form-field.mat-focused .mdc-text-field--outlined,
body.wem-light .mat-mdc-form-field.mat-focused .mdc-text-field,
body.wem-light .mdc-text-field--focused {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(45, 133, 52, 0.15) !important;
}

body.wem-light .mdc-notched-outline__leading,
body.wem-light .mdc-notched-outline__notch,
body.wem-light .mdc-notched-outline__trailing {
  border-color: rgba(26, 35, 50, 0.12) !important;
}

body.wem-light .mdc-text-field--focused .mdc-notched-outline__leading,
body.wem-light .mdc-text-field--focused .mdc-notched-outline__notch,
body.wem-light .mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #2D8534 !important;
}

body.wem-light .mdc-text-field .mdc-floating-label,
body.wem-light .mat-mdc-form-field .mat-mdc-floating-label {
  color: #5C6E82 !important;
}

body.wem-light .mdc-text-field--focused .mdc-floating-label {
  color: #2D8534 !important;
}

body.wem-light input,
body.wem-light .mat-mdc-input-element,
body.wem-light textarea {
  color: #1A2332 !important;
  caret-color: #2D8534 !important;
}

body.wem-light input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #FAFAF8 inset !important;
  -webkit-text-fill-color: #1A2332 !important;
}

body.wem-light mat-icon[matprefix],
body.wem-light mat-icon[matsuffix] {
  color: #5C6E82 !important;
}

body.wem-light mat-error,
body.wem-light .mat-mdc-form-field-error {
  color: #DC2626 !important;
}

body.wem-light .mat-mdc-form-field-hint,
body.wem-light .mat-mdc-form-field-hint-wrapper,
body.wem-light mat-hint {
  color: #6B7480 !important;
}

body.wem-light .mat-mdc-select {
  color: #1A2332 !important;
}

body.wem-light .mat-mdc-select-arrow {
  color: #5C6E82 !important;
}


/* ================================================
   11. CHECKBOX, RADIO, TOGGLE: Dark borders, green checked
   ================================================ */

body.wem-light .mat-mdc-checkbox .mdc-checkbox__background,
body.wem-light .mat-mdc-radio-button .mdc-radio__background {
  border-color: rgba(26, 35, 50, 0.22) !important;
}

body.wem-light .mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background {
  background-color: #2D8534 !important;
  border-color: #2D8534 !important;
}

body.wem-light .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__outer-circle {
  border-color: #2D8534 !important;
}

body.wem-light .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__inner-circle {
  border-color: #2D8534 !important;
  background-color: #2D8534 !important;
}

body.wem-light .mat-mdc-checkbox-label,
body.wem-light .mat-mdc-radio-label {
  color: #3D4F63 !important;
}

/* Slide toggle: light track */
body.wem-light .mat-mdc-slide-toggle,
body.wem-light .mat-mdc-slide-toggle .mdc-switch,
body.wem-light .mdc-switch {
  color: #3D4F63 !important;
  --mdc-switch-selected-handle-color: #2D8534;
  --mdc-switch-selected-track-color: rgba(45, 133, 52, 0.25);
  --mdc-switch-unselected-handle-color: rgba(26, 35, 50, 0.35);
  --mdc-switch-unselected-track-color: rgba(26, 35, 50, 0.1);
  --mdc-switch-disabled-selected-handle-color: #2D8534;
  --mdc-switch-disabled-unselected-handle-color: rgba(26, 35, 50, 0.2);
}

body.wem-light .mat-mdc-slide-toggle .mdc-label,
body.wem-light .mat-mdc-slide-toggle label,
body.wem-light .mdc-switch + label {
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle::after {
  background: #2D8534 !important;
}

body.wem-light .mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__track::after {
  background: rgba(45, 133, 52, 0.25) !important;
}

body.wem-light .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle::after {
  background: rgba(26, 35, 50, 0.35) !important;
}

body.wem-light .mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__track::after {
  background: rgba(26, 35, 50, 0.1) !important;
}


/* ================================================
   12. TABLES: White rows, warm stripe
   ================================================ */

body.wem-light .mat-mdc-table,
body.wem-light table.mat-mdc-table {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 8px !important;
}

body.wem-light .mat-mdc-header-row {
  background: #FAFAF8 !important;
}

body.wem-light .mat-mdc-header-cell {
  color: #5C6E82 !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.12) !important;
}

body.wem-light .mat-mdc-row {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.06) !important;
  color: #3D4F63 !important;
}

/* Warm stripe */
body.wem-light .mat-mdc-row:nth-child(even),
body.wem-light mat-row:nth-child(even),
body.wem-light table tbody tr:nth-child(even) {
  background: #FAFAF8 !important;
}

/* Hover */
body.wem-light .mat-mdc-row:hover {
  background: #F0EDE8 !important;
}

body.wem-light .mat-mdc-cell {
  color: #3D4F63 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.04) !important;
}

/* Selected row */
body.wem-light .mat-mdc-row.mat-mdc-row-selected,
body.wem-light .mat-mdc-row.cdk-row-selected,
body.wem-light tr.mat-mdc-row.highlight,
body.wem-light .mat-mdc-row.mdc-data-table__row--selected {
  background: rgba(45, 133, 52, 0.08) !important;
  background-color: rgba(45, 133, 52, 0.08) !important;
}

body.wem-light .mat-mdc-paginator {
  background: transparent !important;
  color: #5C6E82 !important;
}

body.wem-light .mat-mdc-paginator .mat-mdc-select-value {
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-paginator .mat-mdc-icon-button {
  color: #5C6E82 !important;
}

body.wem-light .mat-sort-header-arrow {
  color: #5C6E82 !important;
}

body.wem-light .mat-sort-header-content {
  color: #5C6E82 !important;
}


/* ================================================
   13. TABS: Dark labels, green active
   ================================================ */

body.wem-light .mat-mdc-tab-group,
body.wem-light .mat-mdc-tab-header {
  background: transparent !important;
}

body.wem-light .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
  color: #5C6E82 !important;
}

body.wem-light .mat-mdc-tab:not(.mdc-tab--active):hover .mdc-tab__text-label {
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,
body.wem-light .mdc-tab--active .mdc-tab__text-label {
  color: #2D8534 !important;
  font-weight: 700 !important;
}

body.wem-light .mdc-tab-indicator__content--underline {
  border-color: #2D8534 !important;
}

body.wem-light .mat-mdc-tab .mdc-tab-indicator__content--underline {
  border-color: #2D8534 !important;
}

body.wem-light .mat-mdc-tab-body-content {
  background: transparent !important;
}


/* ================================================
   14. DIALOGS: White surface, darker shadow
   ================================================ */

body.wem-light .cdk-overlay-dark-backdrop {
  background: rgba(26, 35, 50, 0.4) !important;
}

body.wem-light .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  background: rgba(26, 35, 50, 0.4) !important;
}

body.wem-light .mat-mdc-dialog-container .mdc-dialog__surface,
body.wem-light .mat-mdc-dialog-container,
body.wem-light .mdc-dialog__surface {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(26,35,50,0.12), 0 2px 8px rgba(26,35,50,0.06) !important;
  color: #3D4F63 !important;
}

/* Steppers inside dialogs */
body.wem-light .mat-mdc-dialog-container .mat-stepper-horizontal,
body.wem-light .mat-mdc-dialog-container .mat-stepper-vertical,
body.wem-light .mat-mdc-dialog-container mat-horizontal-stepper,
body.wem-light .mat-mdc-dialog-container mat-vertical-stepper,
body.wem-light .mdc-dialog__surface .mat-stepper-horizontal,
body.wem-light .mdc-dialog__surface mat-horizontal-stepper {
  background: transparent !important;
  background-color: transparent !important;
}

body.wem-light .mat-mdc-dialog-container .mat-horizontal-stepper-wrapper,
body.wem-light .mat-mdc-dialog-container .mat-horizontal-stepper-header-container,
body.wem-light .mat-mdc-dialog-container .mat-horizontal-content-container {
  background: transparent !important;
}

body.wem-light .mat-mdc-dialog-title,
body.wem-light .mdc-dialog__title {
  color: #1A2332 !important;
}

body.wem-light .mat-mdc-dialog-content {
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-dialog-actions {
  border-top: 1px solid rgba(26, 35, 50, 0.06) !important;
}

/* Dialog buttons */
body.wem-light .cdk-overlay-pane .mat-mdc-button,
body.wem-light .cdk-overlay-pane button[mat-button],
body.wem-light .mat-mdc-dialog-actions .mat-mdc-button,
body.wem-light .mat-mdc-dialog-actions button[mat-button] {
  color: #3D4F63 !important;
  --mdc-text-button-label-text-color: #3D4F63;
}

body.wem-light .cdk-overlay-pane .mat-mdc-button:hover,
body.wem-light .mat-mdc-dialog-actions .mat-mdc-button:hover {
  color: #1A2332 !important;
  --mdc-text-button-label-text-color: #1A2332;
  background: rgba(26, 35, 50, 0.04) !important;
}

body.wem-light .cdk-overlay-pane .mat-mdc-button .mdc-button__label,
body.wem-light .mat-mdc-dialog-actions .mdc-button__label {
  color: inherit !important;
}

/* Outlined buttons in dialogs */
body.wem-light .cdk-overlay-pane .mat-mdc-outlined-button,
body.wem-light .mat-mdc-dialog-actions .mat-mdc-outlined-button {
  color: #3D4F63 !important;
  --mdc-outlined-button-label-text-color: #3D4F63;
  border-color: rgba(26, 35, 50, 0.22) !important;
}


/* ================================================
   15. MENUS, AUTOCOMPLETE, SELECT PANELS
   ================================================ */

body.wem-light .mat-mdc-menu-panel,
body.wem-light .mat-mdc-autocomplete-panel,
body.wem-light .mat-mdc-select-panel,
body.wem-light .cdk-overlay-pane .mat-mdc-menu-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(26,35,50,0.12), 0 2px 8px rgba(26,35,50,0.06) !important;
}

body.wem-light .mat-mdc-menu-item {
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-menu-item:hover {
  background: #F0EDE8 !important;
}

body.wem-light .mat-mdc-menu-item .mat-icon {
  color: #5C6E82 !important;
}

body.wem-light .mat-mdc-option {
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-option:hover,
body.wem-light .mat-mdc-option.mat-mdc-option-active {
  background: #F0EDE8 !important;
}

body.wem-light .mat-mdc-option.mdc-list-item--selected {
  background: rgba(45, 133, 52, 0.08) !important;
  color: #2D8534 !important;
}


/* ================================================
   16. CHIPS: Green tinted on white
   ================================================ */

body.wem-light .mat-mdc-chip,
body.wem-light .mat-mdc-standard-chip {
  background: rgba(45, 133, 52, 0.08) !important;
  color: #2D8534 !important;
  border: 1px solid rgba(45, 133, 52, 0.15) !important;
}

body.wem-light .mat-mdc-chip .mat-mdc-chip-remove {
  color: rgba(45, 133, 52, 0.5) !important;
}

/* Entity chips */
body.wem-light .tb-entity-chip,
body.wem-light .tb-chip,
body.wem-light [class*="entity-chip"] {
  background: rgba(61, 139, 134, 0.08) !important;
  background-color: rgba(61, 139, 134, 0.08) !important;
  color: #3D8B86 !important;
  border: 1px solid rgba(61, 139, 134, 0.15) !important;
}

body.wem-light .tb-entity-chip span,
body.wem-light .tb-entity-chip .tb-entity-chip-content {
  color: #3D8B86 !important;
}


/* ================================================
   17. BADGES: Keep green
   ================================================ */

body.wem-light .mat-badge-content {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}


/* ================================================
   18. PROGRESS: Keep green indicators
   ================================================ */

body.wem-light .mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: #2D8534 !important;
  --mdc-linear-progress-track-color: rgba(26, 35, 50, 0.06) !important;
}

body.wem-light .mat-mdc-progress-bar .mdc-linear-progress__bar-inner {
  border-color: #2D8534 !important;
}

body.wem-light .mat-mdc-progress-spinner circle,
body.wem-light .mat-spinner circle {
  stroke: #2D8534 !important;
}


/* ================================================
   19. SNACKBAR / TOAST: Keep dark for contrast
   ================================================ */

body.wem-light .mat-mdc-snack-bar-container {
  background: #1A2332 !important;
  color: #F5F3F0 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(26,35,50,0.2) !important;
}

body.wem-light .mat-mdc-snack-bar-container .mdc-snackbar__surface {
  background: transparent !important;
}


/* ================================================
   20. TOOLTIPS: Keep dark
   ================================================ */

body.wem-light .mat-mdc-tooltip .mdc-tooltip__surface {
  background: #1A2332 !important;
  color: #F5F3F0 !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(26,35,50,0.15) !important;
}


/* ================================================
   21. EXPANSION PANELS: White bg, borders
   ================================================ */

body.wem-light .mat-expansion-panel,
body.wem-light .mat-mdc-expansion-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(26,35,50,0.04) !important;
  color: #3D4F63 !important;
}

body.wem-light .mat-expansion-panel-header,
body.wem-light .mat-mdc-expansion-panel-header {
  color: #1A2332 !important;
}

body.wem-light .mat-expansion-panel-header:hover {
  background: #FAFAF8 !important;
}

body.wem-light .mat-expansion-indicator::after {
  color: #5C6E82 !important;
}


/* ================================================
   22. LISTS: Light bg, dark text
   ================================================ */

body.wem-light .mat-mdc-list-item,
body.wem-light .mat-mdc-nav-list .mat-mdc-list-item {
  color: #3D4F63 !important;
}

body.wem-light .mat-mdc-list-item:hover {
  background: #F0EDE8 !important;
}

body.wem-light .mat-mdc-list-item .mat-mdc-list-item-title {
  color: #1A2332 !important;
}

body.wem-light .mat-mdc-list-item .mat-mdc-list-item-line:nth-child(2) {
  color: #5C6E82 !important;
}

body.wem-light mat-divider,
body.wem-light .mat-divider {
  border-color: rgba(26, 35, 50, 0.06) !important;
}


/* ================================================
   23. NOTIFICATION PANEL: Light overlay
   ================================================ */

body.wem-light .tb-notification-panel,
body.wem-light [class*="notification-panel"],
body.wem-light tb-notification-dialog,
body.wem-light .tb-notification-dialog,
body.wem-light .notification-content,
body.wem-light .tb-popover-inner,
body.wem-light .tb-popover .tb-popover-inner {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
  border: 1px solid rgba(26, 35, 50, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(26,35,50,0.15), 0 2px 8px rgba(26,35,50,0.08) !important;
}

/* Popover arrow: white to match light bg */
body.wem-light .tb-popover-arrow {
  border-color: #FFFFFF transparent transparent #FFFFFF !important;
}

/* All text inside popovers */
body.wem-light .tb-popover-inner,
body.wem-light .tb-popover-inner *,
body.wem-light .tb-popover-inner-content,
body.wem-light .tb-popover-inner-content * {
  color: #3D4F63 !important;
}

body.wem-light .tb-notification-panel h3,
body.wem-light .tb-notification-panel h4,
body.wem-light .tb-notification-panel [class*="title"],
body.wem-light [class*="notification-panel"] [class*="title"],
body.wem-light [class*="notification-header"],
body.wem-light .tb-notification-header,
body.wem-light .tb-popover-inner section,
body.wem-light tb-show-notification-popover section {
  color: #1A2332 !important;
}

body.wem-light .tb-notification-panel .tb-notification-item,
body.wem-light [class*="notification-panel"] .mat-mdc-list-item,
body.wem-light .tb-notification-item,
body.wem-light tb-show-notification-popover .mat-mdc-list-item {
  color: #3D4F63 !important;
  border-bottom: 1px solid rgba(26, 35, 50, 0.06) !important;
}

body.wem-light .tb-notification-panel .tb-notification-item:hover,
body.wem-light .tb-notification-item:hover,
body.wem-light tb-show-notification-popover .mat-mdc-list-item:hover {
  background: #F0EDE8 !important;
}

body.wem-light .tb-notification-panel a,
body.wem-light [class*="notification-panel"] a,
body.wem-light .tb-notification-item a,
body.wem-light .tb-popover-inner a,
body.wem-light tb-show-notification-popover a {
  color: #2D8534 !important;
}

body.wem-light .tb-notification-panel .tb-notification-time,
body.wem-light [class*="notification-time"],
body.wem-light .tb-notification-item [class*="time"],
body.wem-light tb-show-notification-popover [class*="time"] {
  color: #6B7480 !important;
}

body.wem-light .tb-notification-panel button.mat-mdc-icon-button,
body.wem-light [class*="notification-panel"] .mat-mdc-icon-button,
body.wem-light .tb-popover-inner button.mat-mdc-icon-button,
body.wem-light tb-show-notification-popover button.mat-mdc-icon-button {
  color: #5C6E82 !important;
}

body.wem-light .tb-notification-panel button.mat-mdc-icon-button:hover,
body.wem-light [class*="notification-panel"] .mat-mdc-icon-button:hover,
body.wem-light .tb-popover-inner button.mat-mdc-icon-button:hover,
body.wem-light tb-show-notification-popover button.mat-mdc-icon-button:hover {
  color: #2D8534 !important;
  background: rgba(45, 133, 52, 0.06) !important;
}

body.wem-light .tb-notification-panel [class*="mark-all"],
body.wem-light [class*="notification-panel"] [class*="mark-all"],
body.wem-light .tb-notification-panel [class*="mark-read"],
body.wem-light tb-show-notification-popover [class*="mark"] {
  color: #2D8534 !important;
}

body.wem-light .tb-notification-panel [class*="view-all"],
body.wem-light [class*="notification-panel"] [class*="view-all"],
body.wem-light tb-show-notification-popover [class*="view-all"] {
  color: #2D8534 !important;
  border-top: 1px solid rgba(26, 35, 50, 0.06) !important;
}

/* Warning icons in notifications */
body.wem-light .tb-notification-panel mat-icon[class*="warn"],
body.wem-light .tb-notification-item mat-icon,
body.wem-light .tb-popover-inner mat-icon:not(.mat-mdc-icon-button mat-icon),
body.wem-light tb-show-notification-popover mat-icon:not(.mat-mdc-icon-button mat-icon) {
  color: #D97706 !important;
}

/* Notification success/check icons */
body.wem-light .tb-notification-panel mat-icon[class*="done"],
body.wem-light .tb-notification-panel mat-icon[class*="check"],
body.wem-light .tb-notification-item .mat-mdc-icon-button mat-icon,
body.wem-light tb-show-notification-popover .mat-mdc-icon-button mat-icon {
  color: #5C6E82 !important;
}

body.wem-light .tb-notification-item .mat-mdc-icon-button:hover mat-icon,
body.wem-light tb-show-notification-popover .mat-mdc-icon-button:hover mat-icon {
  color: #2D8534 !important;
}


/* ================================================
   24. LINKS: Green on light bg
   ================================================ */

body.wem-light a {
  color: #2D8534 !important;
}

body.wem-light a:hover {
  color: #1E5A23 !important;
}

body.wem-light a:visited {
  color: #5C6E82 !important;
}


/* ================================================
   25. SELECTION & FOCUS: Green selection, green focus ring
   ================================================ */

body.wem-light ::selection {
  background: rgba(45, 133, 52, 0.15) !important;
  color: #1A2332 !important;
}

body.wem-light *:focus-visible {
  outline: 2px solid #2D8534 !important; outline-offset: 2px !important;
  outline-offset: 2px !important;
}


/* ================================================
   26. SCROLLBAR: Dark thumb on light track
   ================================================ */

body.wem-light ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

body.wem-light ::-webkit-scrollbar-track {
  background: transparent !important;
}

body.wem-light ::-webkit-scrollbar-thumb {
  background: rgba(26, 35, 50, 0.12) !important;
  border-radius: 4px !important;
}

body.wem-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(45, 133, 52, 0.25) !important;
}

body.wem-light ::-webkit-scrollbar-corner {
  background: transparent !important;
}


/* ================================================
   27. DASHBOARD-SPECIFIC: Light bg, light widgets
   ================================================ */

body.wem-light .tb-dashboard-page {
  background: #F5F3F0 !important;
}

body.wem-light .tb-dashboard-container {
  background: transparent !important;
}

body.wem-light .tb-widget-title {
  color: #1A2332 !important;
}

body.wem-light .tb-nodata-title,
body.wem-light .tb-nodata-subtitle {
  color: #5C6E82 !important;
}

body.wem-light .tb-widget-actions button {
  color: #5C6E82 !important;
}

body.wem-light .tb-widget-actions button:hover {
  color: #2D8534 !important;
  background: rgba(45, 133, 52, 0.04) !important;
}

body.wem-light .tb-timewindow-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(26,35,50,0.12), 0 2px 8px rgba(26,35,50,0.06) !important;
}

body.wem-light .tb-entity-details {
  background: transparent !important;
}

body.wem-light .tb-entity-details .mat-mdc-tab-body-wrapper {
  background: transparent !important;
}

body.wem-light .tb-dashboard-toolbar {
  background: #FEFEFE !important;
  color: #1A2332 !important;
}

/* Timewindow labels */
body.wem-light .tb-timewindow-label,
body.wem-light div.tb-timewindow-label,
body.wem-light .tb-timewindow-panel .tb-timewindow-label,
body.wem-light .tb-widget .tb-timewindow-label,
body.wem-light .tb-widget-container .tb-timewindow-label,
body.wem-light [class*="timewindow-label"],
body.wem-light div[class*="timewindow-label"] {
  color: #5C6E82 !important;
}

body.wem-light .tb-timewindow-value,
body.wem-light .tb-timewindow button,
body.wem-light [class*="timewindow"] span,
body.wem-light [class*="timewindow"] .mat-button-wrapper {
  color: #3D4F63 !important;
}

/* Chart legend text */
body.wem-light .tb-time-series-chart-legend-type-label {
  color: #5C6E82 !important;
}

body.wem-light .tb-time-series-chart-legend-value {
  color: #1A2332 !important;
}

body.wem-light .tb-time-series-chart-legend-label,
body.wem-light [class*="chart-legend"] {
  color: #3D4F63 !important;
}

/* Time series chart panel */
body.wem-light .tb-time-series-chart-panel {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #3D4F63 !important;
}

body.wem-light .tb-time-series-chart-overlay {
  background: rgba(245, 243, 240, 0.72) !important;
}


/* ================================================
   28. BREADCRUMBS: Dark text
   ================================================ */

body.wem-light .tb-breadcrumbs a {
  color: #5C6E82 !important;
}

body.wem-light .tb-breadcrumbs a:hover {
  color: #2D8534 !important;
}

body.wem-light .tb-breadcrumbs .tb-breadcrumb-active {
  color: #1A2332 !important;
}


/* ================================================
   29. TB-SPECIFIC OVERRIDES: Entity tables, code editors, etc.
   ================================================ */

/* Entity table content */
body.wem-light .tb-entity-table-content,
body.wem-light .tb-entity-table,
body.wem-light tb-entity-table,
body.wem-light [class*="tb-entity-table"] {
  background: #F5F3F0 !important;
  background-color: #F5F3F0 !important;
  color: #3D4F63 !important;
}

/* Entity table header */
body.wem-light .tb-entity-table-header,
body.wem-light .tb-entities-table-header,
body.wem-light .tb-entity-table .mat-toolbar,
body.wem-light tb-entity-table .mat-toolbar {
  background: #FEFEFE !important;
  color: #1A2332 !important;
}

body.wem-light .tb-entity-table-filter {
  background: #FAFAF8 !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 8px !important;
}

/* Footer */
body.wem-light .tb-footer,
body.wem-light .tb-powered-by-footer {
  background: #F5F3F0 !important;
  color: #6B7480 !important;
  border-top: 1px solid rgba(26, 35, 50, 0.04) !important;
}

body.wem-light .tb-absolute-fill .tb-prompt {
  color: #5C6E82 !important;
}

/* Code editors: keep dark (better readability for code) */
body.wem-light .CodeMirror {
  background: #1A2332 !important;
  color: #F5F3F0 !important;
  border: 1px solid rgba(26, 35, 50, 0.12) !important;
  border-radius: 8px !important;
}

body.wem-light .CodeMirror-gutters {
  background: #111D2E !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.wem-light .CodeMirror-linenumber {
  color: #5C6E82 !important;
}

body.wem-light .ace_editor,
body.wem-light .ace_editor * {
  background: #1A2332 !important;
}

body.wem-light .ace_gutter {
  background: #111D2E !important;
  color: #5C6E82 !important;
}

body.wem-light .code-wrapper {
  background: #1A2332 !important;
  color: #F5F3F0 !important;
  border: 1px solid rgba(26, 35, 50, 0.12) !important;
  border-radius: 8px !important;
}

/* Clipboard buttons */
body.wem-light .clipboard-btn {
  color: #3D4F63 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.12) !important;
  border-radius: 6px !important;
}

body.wem-light .clipboard-btn p,
body.wem-light .clipboard-btn span {
  color: #3D4F63 !important;
}

body.wem-light .clipboard-btn:hover {
  color: #2D8534 !important;
  background: #F0EDE8 !important;
  border-color: rgba(45, 133, 52, 0.15) !important;
}

/* Date/time pickers */
body.wem-light .mat-datepicker-content {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  box-shadow: 0 8px 30px rgba(26,35,50,0.12) !important;
  color: #3D4F63 !important;
}

body.wem-light .mat-calendar-body-cell-content {
  color: #3D4F63 !important;
}

body.wem-light .mat-calendar-body-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}

body.wem-light .mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: #2D8534 !important;
}

/* Steppers */
body.wem-light .mat-stepper-horizontal,
body.wem-light .mat-stepper-vertical,
body.wem-light mat-horizontal-stepper,
body.wem-light mat-vertical-stepper,
body.wem-light .mat-horizontal-stepper-wrapper,
body.wem-light .mat-vertical-stepper-wrapper,
body.wem-light .mat-horizontal-stepper-content,
body.wem-light .mat-vertical-stepper-content {
  background: transparent !important;
  background-color: transparent !important;
}

body.wem-light .mat-step-header .mat-step-icon {
  background: #F5F3F0 !important;
  color: #5C6E82 !important;
}

body.wem-light .mat-step-header .mat-step-icon.mat-step-icon-state-number {
  color: #5C6E82 !important;
}

body.wem-light .mat-step-header .mat-step-icon-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}

body.wem-light .mat-step-header .mat-step-icon-state-done,
body.wem-light .mat-step-header .mat-step-icon-state-edit {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}

body.wem-light .mat-step-header .mat-step-label {
  color: #5C6E82 !important;
}

body.wem-light .mat-step-header .mat-step-label.mat-step-label-active {
  color: #1A2332 !important;
}

body.wem-light .mat-step-header .mat-step-label.mat-step-label-selected {
  color: #2D8534 !important;
}

body.wem-light .mat-stepper-horizontal-line,
body.wem-light .mat-stepper-vertical-line::before {
  border-color: rgba(26, 35, 50, 0.12) !important;
}

/* Bottom sheet */
body.wem-light .mat-bottom-sheet-container {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  color: #3D4F63 !important;
}

/* Entity detail panels */
body.wem-light .tb-entity-details-panel,
body.wem-light .tb-details-panel,
body.wem-light .tb-entity-details-content,
body.wem-light [class*="entity-details"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

body.wem-light .tb-entity-details-header,
body.wem-light .tb-details-header,
body.wem-light [class*="details-header"] {
  background: #FEFEFE !important;
  color: #1A2332 !important;
}

/* White labeling page */
body.wem-light .tb-white-label-container,
body.wem-light [class*="white-label"] .mat-mdc-card {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

/* Profile pages */
body.wem-light .tb-device-profile-container,
body.wem-light .tb-asset-profile-container,
body.wem-light [class*="profile-container"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Notification center */
body.wem-light .tb-notification-content,
body.wem-light [class*="notification-content"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Integration/converter pages */
body.wem-light .tb-converter-container,
body.wem-light .tb-integration-container,
body.wem-light [class*="converter-container"],
body.wem-light [class*="integration-container"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Calculated fields page */
body.wem-light .tb-calculated-fields-container,
body.wem-light [class*="calculated-field"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Rule chain list */
body.wem-light .tb-rulechain-container,
body.wem-light [class*="rulechain-container"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Rule chain editor: keep dark (better for visual flow editing) */
body.wem-light .tb-rulechain-editor,
body.wem-light [class*="rulechain-editor"],
body.wem-light tb-rulechain-page {
  background: #0F1926 !important;
  color: #C1CDD8 !important;
}

body.wem-light .tb-rulechain-library-panel-group,
body.wem-light .tb-rulechain-library,
body.wem-light [class*="rulechain-library"] {
  background: #111D2E !important;
  color: #C1CDD8 !important;
}

/* Widgets library */
body.wem-light .tb-widgets-bundle-list,
body.wem-light [class*="widgets-bundle"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Audit log */
body.wem-light .tb-audit-log-container,
body.wem-light [class*="audit-log"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Scheduler */
body.wem-light .tb-scheduler-container,
body.wem-light [class*="scheduler-container"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Customer page */
body.wem-light .tb-customer-container,
body.wem-light [class*="customer-container"] {
  background: transparent !important;
}

/* Entity views */
body.wem-light .tb-entity-views-container,
body.wem-light [class*="entity-view"] {
  background: transparent !important;
}

/* Generic table wrapper */
body.wem-light .tb-table-container,
body.wem-light [class*="table-container"] {
  background: transparent !important;
}

/* Search bar in entity tables */
body.wem-light .tb-entity-table-filter input,
body.wem-light .tb-entity-table .mat-mdc-form-field {
  color: #1A2332 !important;
}

/* Anchor text in tables */
body.wem-light .mat-mdc-cell a,
body.wem-light .mat-mdc-row a {
  color: #2D8534 !important;
}

/* Entity status tags */
body.wem-light .tb-entity-status,
body.wem-light [class*="entity-status"] {
  border: 1px solid rgba(26, 35, 50, 0.12) !important;
}

/* Entity chips in table cells */
body.wem-light .mat-mdc-cell .tb-entity-chip,
body.wem-light .mat-mdc-cell .tb-chip {
  background: rgba(61, 139, 134, 0.08) !important;
  color: #3D8B86 !important;
}

/* SVG chart axis labels */
body.wem-light svg text {
  fill: #5C6E82 !important;
}

/* Chart label classes */
body.wem-light .tb-chart-label,
body.wem-light [class*="chart-axis"],
body.wem-light [class*="axis-label"] {
  color: #5C6E82 !important;
}

/* Empty state messages */
body.wem-light .tb-no-data-found,
body.wem-light .tb-no-entities,
body.wem-light [class*="no-data"],
body.wem-light [class*="no-entities"],
body.wem-light .tb-prompt {
  color: #6B7480 !important;
}

/* Alarm detail panel */
body.wem-light .tb-alarm-details,
body.wem-light .tb-alarm-details-panel,
body.wem-light [class*="alarm-detail"] {
  background: transparent !important;
  color: #3D4F63 !important;
}

/* Alarm assignee panel */
body.wem-light tb-alarm-assignee-panel,
body.wem-light .tb-alarm-assignee-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(26,35,50,0.12) !important;
  color: #3D4F63 !important;
}

body.wem-light tb-alarm-assignee-panel .mat-mdc-option:hover,
body.wem-light tb-alarm-assignee-panel .mdc-list-item:hover {
  background: #F0EDE8 !important;
}

/* Hotkeys overlay */
body.wem-light .tb-hotkeys-container {
  background: rgba(245, 243, 240, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  color: #3D4F63 !important;
}


/* ================================================
   30. ALARM SEVERITY: Adjusted for light bg
   ================================================ */

body.wem-light .tb-critical-alarm,
body.wem-light .tb-alarm-severity-critical {
  color: #DC2626 !important;
}

body.wem-light .tb-major-alarm,
body.wem-light .tb-alarm-severity-major {
  color: #EA580C !important;
}

body.wem-light .tb-minor-alarm,
body.wem-light .tb-alarm-severity-minor {
  color: #CA8A04 !important;
}

body.wem-light .tb-warning-alarm,
body.wem-light .tb-alarm-severity-warning {
  color: #D97706 !important;
}

body.wem-light .tb-indeterminate-alarm,
body.wem-light .tb-alarm-severity-indeterminate {
  color: #5C6E82 !important;
}

/* Active alarms: red */
body.wem-light .tb-alarm-status-active,
body.wem-light [class*="ACTIVE_UNACK"],
body.wem-light [class*="ACTIVE_ACK"],
body.wem-light .tb-cell-value.tb-alarm-active {
  color: #DC2626 !important;
}

/* Cleared alarms: green */
body.wem-light .tb-alarm-status-cleared,
body.wem-light [class*="CLEARED_UNACK"],
body.wem-light [class*="CLEARED_ACK"],
body.wem-light .tb-cell-value.tb-alarm-cleared {
  color: #2D8534 !important;
}

/* Acknowledged indicator */
body.wem-light .tb-alarm-ack,
body.wem-light [class*="alarm-ack"] {
  color: #E68A00 !important;
}


/* ================================================
   31. HOME PAGE: Light cards, quick links
   ================================================ */

/* Solution templates */
body.wem-light .tb-solution-template-card,
body.wem-light .tb-home-solution-templates .mat-mdc-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
}

body.wem-light .tb-solution-template-card .tb-solution-template-title,
body.wem-light .tb-home-solution-templates .tb-solution-template-title {
  color: #1A2332 !important;
}

/* Home KPI cards */
body.wem-light .tb-home-card,
body.wem-light .tb-home-devices,
body.wem-light .tb-home-alarms {
  background: #FFFFFF !important;
  border-left: 3px solid #2D8534 !important;
}

body.wem-light .tb-home-card .tb-home-card-label,
body.wem-light .tb-home-card .tb-label,
body.wem-light .tb-home-card label,
body.wem-light .tb-home-devices label,
body.wem-light .tb-home-alarms label {
  color: #5C6E82 !important;
}

body.wem-light .tb-home-card .tb-home-card-value,
body.wem-light .tb-home-card .tb-value,
body.wem-light .tb-home-card h2,
body.wem-light .tb-home-card h3 {
  color: #1A2332 !important;
}

/* Get Started panel */
body.wem-light .tb-get-started,
body.wem-light .tb-getting-started,
body.wem-light mat-stepper.tb-get-started,
body.wem-light [class*="get-started"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  color: #3D4F63 !important;
}

body.wem-light .tb-get-started .mat-step-header {
  background: transparent !important;
}

body.wem-light .tb-get-started .mat-vertical-content-container {
  background: transparent !important;
  border-left-color: rgba(26, 35, 50, 0.12) !important;
}

body.wem-light .tb-get-started h2,
body.wem-light .tb-get-started h3 {
  color: #1A2332 !important;
}

body.wem-light .tb-get-started .mat-step-text-label {
  color: #3D4F63 !important;
}

body.wem-light .tb-get-started p,
body.wem-light .tb-get-started span,
body.wem-light .tb-get-started li,
body.wem-light .tb-get-started em {
  color: #3D4F63 !important;
}

/* Quick links */
body.wem-light .tb-link-button,
body.wem-light a.tb-link-button {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  color: #2D8534 !important;
}

body.wem-light .tb-link-button:hover,
body.wem-light a.tb-link-button:hover {
  background: #FAFAF8 !important;
  background-color: #FAFAF8 !important;
  border-color: rgba(45, 133, 52, 0.15) !important;
}

body.wem-light .tb-link-button .mat-icon,
body.wem-light .tb-link-button mat-icon {
  color: #2D8534 !important;
}

body.wem-light .tb-add-link-button {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px dashed rgba(26, 35, 50, 0.12) !important;
  color: #5C6E82 !important;
}

body.wem-light .tb-add-link-button:hover {
  background: #FAFAF8 !important;
  background-color: #FAFAF8 !important;
  border-color: #2D8534 !important;
  color: #2D8534 !important;
}

/* Quick link cards */
body.wem-light .tb-quick-links .mat-mdc-card,
body.wem-light .tb-home-quick-links .mat-mdc-card,
body.wem-light .tb-quick-link-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
}

body.wem-light .tb-quick-link-card:hover {
  background: #FAFAF8 !important;
  border-color: rgba(45, 133, 52, 0.12) !important;
}

body.wem-light .tb-quick-link-card .tb-quick-link-name,
body.wem-light .tb-quick-link-card span {
  color: #3D4F63 !important;
}

body.wem-light .tb-quick-link-card .mat-icon {
  color: #2D8534 !important;
}

/* Solution template plan badges */
body.wem-light .tb-solution-template-plan {
  background: rgba(45, 133, 52, 0.06) !important;
  background-color: rgba(45, 133, 52, 0.06) !important;
  color: #2D8534 !important;
  border: 1px solid rgba(45, 133, 52, 0.12) !important;
}

/* Solution template installed badge */
body.wem-light .tb-solution-template-installed {
  background: #2D8534 !important;
  background-color: #2D8534 !important;
  color: #FFFFFF !important;
}

/* Solution template images: no filter needed on light */
body.wem-light .tb-solution-template-card img,
body.wem-light .tb-home-solution-templates img {
  filter: none !important;
}

/* Usage panel */
body.wem-light .tb-usage-card,
body.wem-light .tb-home-usage {
  background: #FFFFFF !important;
}

body.wem-light .tb-api-usage-panel,
body.wem-light [class*="api-usage"],
body.wem-light .tb-usage-info,
body.wem-light .tb-usage-bar-container {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #3D4F63 !important;
}

body.wem-light .tb-api-usage-panel span,
body.wem-light .tb-api-usage-panel label,
body.wem-light .tb-api-usage-panel div,
body.wem-light [class*="api-usage"] span {
  color: #3D4F63 !important;
}

body.wem-light .tb-usage-card .tb-usage-label,
body.wem-light .tb-home-usage label {
  color: #5C6E82 !important;
}

body.wem-light .tb-usage-card .tb-usage-value,
body.wem-light .tb-home-usage span {
  color: #1A2332 !important;
}

/* Activity / documentation / dashboards */
body.wem-light .tb-home-activity .mat-mdc-card {
  background: #FFFFFF !important;
}

body.wem-light .tb-home-documentation .mat-mdc-card {
  background: #FFFFFF !important;
}

body.wem-light .tb-home-dashboards .mat-mdc-card {
  background: #FFFFFF !important;
}

body.wem-light .tb-home-dashboards a {
  color: #2D8534 !important;
}

/* Mobile app card */
body.wem-light .tb-mobile-app-card,
body.wem-light [class*="mobile-app"] {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

body.wem-light .tb-mobile-app-qrcode-panel {
  background: #FAFAF8 !important;
  background-color: #FAFAF8 !important;
}

body.wem-light .tb-mobile-app-qrcode-overlay {
  background: rgba(245, 243, 240, 0.72) !important;
}


/* ================================================
   32. GLOBAL TEXT CATCHALL: Light-mode text
   ================================================ */

body.wem-light .mat-mdc-card span,
body.wem-light .mat-mdc-card div,
body.wem-light .mat-mdc-card p,
body.wem-light .mat-mdc-card label {
  color: inherit !important;
}

body.wem-light .tb-widget:not(:has(.wem-w)) span,
body.wem-light .tb-widget:not(:has(.wem-w)) div,
body.wem-light .tb-widget:not(:has(.wem-w)) p,
body.wem-light .tb-widget:not(:has(.wem-w)) label {
  color: inherit !important;
}

body.wem-light .tb-widget h1,
body.wem-light .tb-widget h2,
body.wem-light .tb-widget h3,
body.wem-light .tb-widget h4 {
  color: #1A2332 !important;
}

/* Section titles within cards */
body.wem-light .mat-mdc-card .mat-mdc-card-title,
body.wem-light .mat-mdc-card .tb-card-title,
body.wem-light .mat-mdc-card [class*="title"] {
  color: #1A2332 !important;
}

/* Icons: ensure Material Icons font preserved */
body.wem-light .mat-icon,
body.wem-light mat-icon {
  color: #5C6E82 !important;
}

body.wem-light mat-icon,
body.wem-light mat-icon *,
body.wem-light .mat-icon,
body.wem-light .mat-icon *,
body.wem-light .material-icons,
body.wem-light .material-icons *,
body.wem-light [class*="mat-icon-"],
body.wem-light .mat-ligature-font,
body.wem-light .mat-ligature-font * {
  font-family: 'Material Icons' !important;
}

body.wem-light .mat-mdc-card .mat-icon,
body.wem-light .tb-widget .mat-icon {
  color: #5C6E82 !important;
}

/* Remaining dark text on containers */
body.wem-light .tb-page-container,
body.wem-light [class*="tb-page"],
body.wem-light mat-sidenav-content > *:not(mat-toolbar):not(.tb-side-menu) {
  color: #3D4F63;
}

/* Mat content */
body.wem-light .mat-content {
  background: transparent !important;
}


/* ================================================
   33. NUCLEAR OVERRIDES: Undo dark theme inline style overrides
   ================================================ */

/* CRITICAL: Undo dark theme's override of inline white backgrounds.
   The dark theme forces rgb(255...) backgrounds to #0B1622.
   In light mode, let white backgrounds be the page bg color. */
body.wem-light mat-sidenav-content [style*="background-color: rgb(255"],
body.wem-light mat-sidenav-content [style*="background-color: white"],
body.wem-light mat-sidenav-content [style*="background-color:#fff"],
body.wem-light mat-sidenav-content [style*="background-color: #fff"],
body.wem-light mat-sidenav-content [style*="background: rgb(255"],
body.wem-light mat-sidenav-content [style*="background: white"],
body.wem-light .mat-drawer-content [style*="background-color: rgb(255"],
body.wem-light .mat-drawer-content [style*="background: rgb(255"] {
  background: #F5F3F0 !important;
  background-color: #F5F3F0 !important;
}

/* CRITICAL: Widget inline styles: let white backgrounds be white */
body.wem-light .tb-widget[style*="background"],
body.wem-light .tb-widget-container[style*="background"],
body.wem-light div[class*="tb-"][style*="background-color: rgb(255"],
body.wem-light div[class*="tb-"][style*="background-color: white"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

/* Undo dark theme's override of inline black text.
   In light mode, dark text is correct: let it be. */
body.wem-light mat-sidenav-content [style*="color: rgb(0, 0, 0"],
body.wem-light mat-sidenav-content [style*="color: rgba(0, 0, 0, 0.87"],
body.wem-light mat-sidenav-content [style*="color: rgba(0, 0, 0, 0.54"],
body.wem-light .mat-drawer-content [style*="color: rgb(0, 0, 0"],
body.wem-light .mat-drawer-content [style*="color: rgba(0, 0, 0, 0.87"],
body.wem-light .mat-drawer-content [style*="color: rgba(0, 0, 0, 0.54"] {
  color: #3D4F63 !important;
}

/* Mat-slider: green on light */
body.wem-light .mat-mdc-slider .mdc-slider__track--active_fill {
  background: #2D8534 !important;
  border-color: #2D8534 !important;
}

body.wem-light .mat-mdc-slider .mdc-slider__track--inactive {
  background: rgba(26, 35, 50, 0.08) !important;
}

body.wem-light .mat-mdc-slider .mdc-slider__thumb-knob {
  background: #2D8534 !important;
  border-color: #2D8534 !important;
}

body.wem-light .tb-time-series-chart-panel input[type="range"],
body.wem-light input[type="range"] {
  accent-color: #2D8534 !important;
}

/* Flot chart selection overlay */
body.wem-light .flot-overlay {
  background: rgba(26, 35, 50, 0.02) !important;
}

/* Login page logo: undo dark theme's brightness boost (not needed on light) */
body.wem-light .tb-login-form img,
body.wem-light mat-card img,
body.wem-light .mat-mdc-card img {
  filter: none !important;
}


/* ================================================
   SPECIFICITY BOOST OVERRIDES
   ================================================
   TB's customCss is prefixed with .tb-custom-css, giving dark
   theme rules specificity 0,2,0+. The light theme uses
   body.wem-light prefix (0,1,1) which LOSES.
   This section uses html.wem-light body.wem-light (0,2,2+)
   to override the dark theme in light mode.
   ================================================ */


/* ── C5: Toolbar breadcrumb text (invisible on white toolbar) ── */

html.wem-light body.wem-light tb-breadcrumb,
html.wem-light body.wem-light tb-breadcrumb *,
html.wem-light body.wem-light .tb-breadcrumbs a,
html.wem-light body.wem-light [class*="breadcrumb"] a,
html.wem-light body.wem-light [class*="breadcrumb"] span {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light tb-breadcrumb a:hover,
html.wem-light body.wem-light .tb-breadcrumbs a:hover,
html.wem-light body.wem-light [class*="breadcrumb"] a:hover {
  color: #2D8534 !important;
}

/* Active/current breadcrumb */
html.wem-light body.wem-light .tb-breadcrumbs .tb-breadcrumb-active,
html.wem-light body.wem-light [class*="breadcrumb-active"],
html.wem-light body.wem-light tb-breadcrumb span:last-child {
  color: #1A2332 !important;
}

/* Breadcrumb separator arrow/icon */
html.wem-light body.wem-light [class*="breadcrumb"] mat-icon,
html.wem-light body.wem-light tb-breadcrumb mat-icon {
  color: #6B7480 !important;
}


/* ── C1: Form fields (dark backgrounds in device detail, dialogs) ── */

html.wem-light body.wem-light .mdc-text-field--outlined,
html.wem-light body.wem-light .mat-mdc-text-field-wrapper,
html.wem-light body.wem-light .mdc-text-field {
  background: #FAFAF8 !important;
}

html.wem-light body.wem-light .mdc-text-field--outlined:hover,
html.wem-light body.wem-light .mat-mdc-form-field:hover .mdc-text-field {
  background: #FFFFFF !important;
}

html.wem-light body.wem-light .mdc-text-field--focused,
html.wem-light body.wem-light .mat-mdc-form-field.mat-focused .mdc-text-field--outlined,
html.wem-light body.wem-light .mat-mdc-form-field.mat-focused .mdc-text-field {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(45, 133, 52, 0.15) !important;
}

html.wem-light body.wem-light .mdc-notched-outline__leading,
html.wem-light body.wem-light .mdc-notched-outline__notch,
html.wem-light body.wem-light .mdc-notched-outline__trailing {
  border-color: rgba(26, 35, 50, 0.12) !important;
}

html.wem-light body.wem-light .mdc-text-field--focused .mdc-notched-outline__leading,
html.wem-light body.wem-light .mdc-text-field--focused .mdc-notched-outline__notch,
html.wem-light body.wem-light .mdc-text-field--focused .mdc-notched-outline__trailing {
  border-color: #2D8534 !important;
}

html.wem-light body.wem-light .mdc-text-field .mdc-floating-label,
html.wem-light body.wem-light .mat-mdc-form-field .mat-mdc-floating-label {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light .mdc-text-field--focused .mdc-floating-label {
  color: #2D8534 !important;
}

html.wem-light body.wem-light input,
html.wem-light body.wem-light .mat-mdc-input-element,
html.wem-light body.wem-light textarea {
  color: #1A2332 !important;
  caret-color: #2D8534 !important;
}

/* Select/dropdown fields */
html.wem-light body.wem-light .mat-mdc-select-value,
html.wem-light body.wem-light .mat-mdc-select-value-text,
html.wem-light body.wem-light .mat-mdc-select-arrow {
  color: #1A2332 !important;
}

html.wem-light body.wem-light .mat-mdc-select-placeholder {
  color: #6B7480 !important;
}

/* Chip fields (used in device detail tags, etc.) */
html.wem-light body.wem-light .mat-mdc-chip,
html.wem-light body.wem-light .mdc-evolution-chip {
  background: #E8EBE9 !important;
  color: #3D4F63 !important;
}


/* ── C4: Dashboard widget titles (invisible white on white) ── */

html.wem-light body.wem-light .tb-widget-title {
  color: #1A2332 !important;
}

html.wem-light body.wem-light .tb-nodata-title {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light .tb-nodata-subtitle {
  color: #6B7480 !important;
}

html.wem-light body.wem-light .tb-widget-actions button {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light .tb-widget-actions button:hover {
  color: #2D8534 !important;
}

/* Widget container backgrounds: transparent to show page bg */
html.wem-light body.wem-light .tb-widget,
html.wem-light body.wem-light .tb-widget-container {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(26, 35, 50, 0.06), 0 1px 2px rgba(26, 35, 50, 0.04) !important;
}
/* Grey base text only for TB-NATIVE widgets. Our custom widgets (.wem-w) are fully theme-aware and manage
   their own semantic colours (red alarms, green status, amber warnings); flattening them to grey here was
   wiping those out in light mode. :has() cleanly excludes any wrapper that contains our widget. */
html.wem-light body.wem-light .tb-widget:not(:has(.wem-w)),
html.wem-light body.wem-light .tb-widget-container:not(:has(.wem-w)) {
  color: #3D4F63 !important;
}

/* Dashboard filter bar */
html.wem-light body.wem-light .tb-dashboard-toolbar,
html.wem-light body.wem-light [class*="dashboard-toolbar"] {
  color: #3D4F63 !important;
}


/* ── C3: API usage chart panels ── */

html.wem-light body.wem-light .tb-usage-card,
html.wem-light body.wem-light [class*="usage-card"],
html.wem-light body.wem-light .tb-usage-panel,
html.wem-light body.wem-light [class*="api-usage"] .mat-mdc-card,
html.wem-light body.wem-light [class*="api-usage"] mat-card {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

/* Chart widget backgrounds in API usage.
   NOTE: exclude the legend item markers (…-legend-item-label-circle / -line), their class also contains
   "time-series-chart", so a blanket white background whites-out the series colour swatches in the legend
   (visible in dark, invisible in light). Keep the panel/content white, leave the colour markers alone. */
html.wem-light body.wem-light .tb-time-series-chart-panel,
html.wem-light body.wem-light [class*="time-series-chart"]:not([class*="legend-item-label"]) {
  background: #FFFFFF !important;
}

/* Chart axis labels */
html.wem-light body.wem-light .tb-time-series-chart-panel text,
html.wem-light body.wem-light [class*="time-series-chart"] text,
html.wem-light body.wem-light .flot-x-axis .flot-tick-label,
html.wem-light body.wem-light .flot-y-axis .flot-tick-label {
  color: #5C6E82 !important;
  fill: #5C6E82 !important;
}


/* ── M1: Page title headings (faded) ── */

html.wem-light body.wem-light h1,
html.wem-light body.wem-light h2,
html.wem-light body.wem-light h3,
html.wem-light body.wem-light h4 {
  color: #1A2332 !important;
}

html.wem-light body.wem-light .tb-entity-table-title,
html.wem-light body.wem-light [class*="entity-table-title"],
html.wem-light body.wem-light .mat-mdc-card-title,
html.wem-light body.wem-light .tb-page-title {
  color: #1A2332 !important;
}


/* ── M2: Table column headers (faint) ── */

html.wem-light body.wem-light .mat-mdc-header-row,
html.wem-light body.wem-light tr.mat-mdc-header-row,
html.wem-light body.wem-light .mdc-data-table__header-row {
  background: rgba(245, 243, 240, 0.8) !important;
  border-bottom: 2px solid rgba(26, 35, 50, 0.08) !important;
}

html.wem-light body.wem-light .mat-mdc-header-cell,
html.wem-light body.wem-light th.mat-mdc-header-cell,
html.wem-light body.wem-light .mdc-data-table__header-cell,
html.wem-light body.wem-light .mat-sort-header-content,
html.wem-light body.wem-light .mat-mdc-header-cell .mat-sort-header-content,
html.wem-light body.wem-light th.mat-mdc-header-cell .mat-sort-header-content {
  color: #3D4F63 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
}

/* Table CSS variable overrides */
html.wem-light body.wem-light .mat-mdc-table,
html.wem-light body.wem-light .mdc-data-table,
html.wem-light body.wem-light .mdc-data-table__table {
  --mat-table-header-headline-color: #3D4F63;
  --mat-table-row-item-label-text-color: #3D4F63;
  --mdc-data-table-header-row-text-color: #3D4F63;
  --mdc-data-table-row-text-color: #3D4F63;
  background: transparent !important;
}

/* Table row text */
html.wem-light body.wem-light .mat-mdc-row,
html.wem-light body.wem-light .mat-mdc-cell,
html.wem-light body.wem-light td.mat-mdc-cell,
html.wem-light body.wem-light .mdc-data-table__cell {
  color: #3D4F63 !important;
}

/* Table row hover */
html.wem-light body.wem-light .mat-mdc-row:hover,
html.wem-light body.wem-light tr.mat-mdc-row:hover {
  background: rgba(45, 133, 52, 0.03) !important;
}

/* Table action icons */
html.wem-light body.wem-light .mat-mdc-row .mat-mdc-icon-button,
html.wem-light body.wem-light .mat-mdc-row button[mat-icon-button] {
  color: #6B7480 !important;
}

html.wem-light body.wem-light .mat-mdc-row .mat-mdc-icon-button:hover {
  color: #2D8534 !important;
}

/* Table row border */
html.wem-light body.wem-light .mat-mdc-row,
html.wem-light body.wem-light tr.mat-mdc-row {
  border-bottom: 1px solid rgba(26, 35, 50, 0.06) !important;
}


/* ── M3: Pagination text (faint) ── */

html.wem-light body.wem-light .mat-mdc-paginator,
html.wem-light body.wem-light .mat-mdc-paginator-container {
  color: #5C6E82 !important;
  background: transparent !important;
}

html.wem-light body.wem-light .mat-mdc-paginator-range-label {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light .mat-mdc-paginator-navigation-previous,
html.wem-light body.wem-light .mat-mdc-paginator-navigation-next,
html.wem-light body.wem-light .mat-mdc-paginator-navigation-first,
html.wem-light body.wem-light .mat-mdc-paginator-navigation-last {
  color: #5C6E82 !important;
}

/* dark arrows on the light paginator (the dark theme sets a light fill; override it here) */
html.wem-light body.wem-light .mat-mdc-paginator .mat-mdc-paginator-icon {
  fill: #5C6E82 !important;
}
html.wem-light body.wem-light .mat-mdc-paginator .mat-mdc-icon-button[disabled] .mat-mdc-paginator-icon {
  fill: #AEB9C4 !important;
}

html.wem-light body.wem-light .mat-mdc-paginator .mat-mdc-select-value {
  color: #3D4F63 !important;
}


/* ── Tabs (dark-theme sets light text color) ── */

html.wem-light body.wem-light .mat-mdc-tab-labels .mat-mdc-tab,
html.wem-light body.wem-light .mdc-tab__text-label,
html.wem-light body.wem-light .mat-mdc-tab .mdc-tab__text-label {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label,
html.wem-light body.wem-light .mdc-tab--active .mdc-tab__text-label {
  color: #2D8534 !important;
}

html.wem-light body.wem-light .mdc-tab-indicator__content--underline,
html.wem-light body.wem-light .mat-mdc-tab-header .mdc-tab-indicator__content--underline {
  border-color: #2D8534 !important;
}


/* ── Cards / panels general ── */

html.wem-light body.wem-light mat-card,
html.wem-light body.wem-light .mat-mdc-card,
html.wem-light body.wem-light .mdc-card {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
}

html.wem-light body.wem-light .mat-mdc-card-subtitle {
  color: #5C6E82 !important;
}


/* ── Dialogs (dark theme makes overlay dialogs dark) ── */

html.wem-light body.wem-light .mat-mdc-dialog-surface,
html.wem-light body.wem-light .mdc-dialog__surface,
html.wem-light body.wem-light .mat-mdc-dialog-container {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .mat-mdc-dialog-title {
  color: #1A2332 !important;
}

html.wem-light body.wem-light .mat-mdc-dialog-actions button {
  color: #3D4F63 !important;
}


/* ── Toggle switches / slide toggles ── */

html.wem-light body.wem-light .mat-mdc-slide-toggle .mdc-switch__track {
  background: rgba(26, 35, 50, 0.15) !important;
}

html.wem-light body.wem-light .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__track {
  background: rgba(45, 133, 52, 0.3) !important;
}


/* ── Toolbar buttons (search, refresh, add) ── */

html.wem-light body.wem-light mat-toolbar .mat-mdc-icon-button,
html.wem-light body.wem-light .tb-primary-toolbar .mat-mdc-icon-button,
html.wem-light body.wem-light .tb-primary-toolbar button {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light mat-toolbar .mat-mdc-icon-button:hover,
html.wem-light body.wem-light .tb-primary-toolbar button:hover {
  color: #1A2332 !important;
  background: rgba(26, 35, 50, 0.04) !important;
}

/* User name/role in toolbar */
html.wem-light body.wem-light .tb-user-display-name,
html.wem-light body.wem-light [class*="user-display-name"] {
  color: #1A2332 !important;
}

html.wem-light body.wem-light .tb-user-authority,
html.wem-light body.wem-light [class*="user-authority"] {
  color: #5C6E82 !important;
}


/* ── Notification badge on bell ── */

html.wem-light body.wem-light .mat-badge-content {
  background: #2D8534 !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  line-height: 16px !important;
  font-weight: 600 !important;
}


/* ── Scrollbar (light mode) ── */

html.wem-light body.wem-light ::-webkit-scrollbar-thumb {
  background: rgba(26, 35, 50, 0.15) !important;
  border-radius: 4px !important;
}

html.wem-light body.wem-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 35, 50, 0.25) !important;
}

html.wem-light body.wem-light ::-webkit-scrollbar-track {
  background: transparent !important;
}


/* ── Menu popups (mat-menu) ── */

html.wem-light body.wem-light .mat-mdc-menu-panel,
html.wem-light body.wem-light .mat-mdc-menu-content {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .mat-mdc-menu-item {
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .mat-mdc-menu-item:hover {
  background: rgba(26, 35, 50, 0.04) !important;
}

html.wem-light body.wem-light .mat-mdc-menu-item .mat-icon,
html.wem-light body.wem-light .mat-mdc-menu-item mat-icon {
  color: #5C6E82 !important;
}


/* ── Entity detail side panel ── */

html.wem-light body.wem-light .tb-details-panel,
html.wem-light body.wem-light [class*="details-panel"],
html.wem-light body.wem-light .tb-entity-details,
html.wem-light body.wem-light [class*="entity-details"] {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .tb-details-panel h3,
html.wem-light body.wem-light .tb-details-panel h4,
html.wem-light body.wem-light [class*="details-panel"] h3,
html.wem-light body.wem-light [class*="details-panel"] h4 {
  color: #1A2332 !important;
}

/* Detail panel buttons (tabs like Details, Attributes, etc.) */
html.wem-light body.wem-light .tb-details-buttons button,
html.wem-light body.wem-light [class*="details-buttons"] button {
  color: #3D4F63 !important;
}


/* ── Scheduler list/calendar view toggle ── */

html.wem-light body.wem-light .mat-button-toggle-group,
html.wem-light body.wem-light .mat-button-toggle {
  background: #FAFAF8 !important;
  color: #3D4F63 !important;
  border-color: rgba(26, 35, 50, 0.12) !important;
}

html.wem-light body.wem-light .mat-button-toggle-checked {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}


/* ── Home page quick links ── */

html.wem-light body.wem-light .tb-quick-link,
html.wem-light body.wem-light [class*="quick-link"] {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
  border: 1px solid rgba(26, 35, 50, 0.06) !important;
}

html.wem-light body.wem-light .tb-quick-link:hover,
html.wem-light body.wem-light [class*="quick-link"]:hover {
  background: #FAFAF8 !important;
  border-color: rgba(45, 133, 52, 0.15) !important;
}


/* ── Home page "Get started" panel ── */

html.wem-light body.wem-light .tb-getting-started,
html.wem-light body.wem-light [class*="getting-started"] {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .tb-getting-started h3,
html.wem-light body.wem-light [class*="getting-started"] h3 {
  color: #1A2332 !important;
}


/* ── Code blocks (device credentials, etc.) ── */

html.wem-light body.wem-light pre,
html.wem-light body.wem-light code,
html.wem-light body.wem-light .tb-code-block {
  background: #F0EDE8 !important;
  color: #1A2332 !important;
}


/* ── Alarm severity badges ── */

html.wem-light body.wem-light .tb-alarm-severity-critical,
html.wem-light body.wem-light [class*="severity-critical"] {
  color: #DC2626 !important;
}

html.wem-light body.wem-light .tb-alarm-severity-major,
html.wem-light body.wem-light [class*="severity-major"] {
  color: #E68A00 !important;
}


/* ── Tooltip override ── */

html.wem-light body.wem-light .mat-mdc-tooltip .mdc-tooltip__surface {
  background: #1A2332 !important;
  color: #FFFFFF !important;
}


/* ── Empty state text ── */

html.wem-light body.wem-light .tb-no-data-text,
html.wem-light body.wem-light [class*="no-data"],
html.wem-light body.wem-light .mat-mdc-cell:empty + td {
  color: #6B7480 !important;
}


/* ══════════════════════════════════════════════════════════════
   CHART & DASHBOARD TEXT COLOR FIXES
   The dark customCss sets color: #C1CDD8 on chart containers.
   With .tb-custom-css prefix = (0,2,0). We need (0,3,2)+ to win.
   ══════════════════════════════════════════════════════════════ */

/* Dashboard page background (also has .mat-content class; need to beat
   .tb-custom-css .mat-content transparent rule) */
html.wem-light body.wem-light .tb-dashboard-page,
html.wem-light body.wem-light .tb-dashboard-page.mat-content,
html.wem-light body.wem-light section.tb-dashboard-page {
  background: #F5F3F0 !important;
  color: #3D4F63 !important;
}

/* Time series chart panel: force dark text color */
html.wem-light body.wem-light .tb-time-series-chart-panel,
html.wem-light body.wem-light .tb-time-series-chart-content,
html.wem-light body.wem-light .tb-time-series-chart-shape,
html.wem-light body.wem-light div.tb-time-series-chart-panel {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

/* Chart title text */
html.wem-light body.wem-light .tb-time-series-chart-panel .tb-widget-title,
html.wem-light body.wem-light .tb-widget .tb-widget-title {
  color: #1A2332 !important;
}

/* Chart subtitle / timewindow label */
html.wem-light body.wem-light .tb-time-series-chart-panel .tb-timewindow-label,
html.wem-light body.wem-light .tb-widget .tb-timewindow-label,
html.wem-light body.wem-light div.tb-timewindow-label {
  color: #6B7480 !important;
}

/* Chart legend: text colors */
html.wem-light body.wem-light .tb-time-series-chart-legend,
html.wem-light body.wem-light .tb-time-series-chart-legend-table,
html.wem-light body.wem-light .tb-time-series-chart-legend-item,
html.wem-light body.wem-light .tb-time-series-chart-legend-item-label,
html.wem-light body.wem-light div.tb-time-series-chart-legend-item-label {
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .tb-time-series-chart-legend-type-label,
html.wem-light body.wem-light th.tb-time-series-chart-legend-type-label {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light .tb-time-series-chart-legend-value,
html.wem-light body.wem-light td.tb-time-series-chart-legend-value {
  color: #1A2332 !important;
}

/* Chart overlay (loading state) */
html.wem-light body.wem-light .tb-time-series-chart-overlay {
  background: rgba(245, 243, 240, 0.72) !important;
}

/* SVG axis labels in ALL charts (ECharts, Flot, etc.) */
html.wem-light body.wem-light svg text {
  fill: #5C6E82 !important;
}

html.wem-light body.wem-light svg .axis text,
html.wem-light body.wem-light svg .tick text {
  fill: #5C6E82 !important;
}

/* SVG grid lines: lighter in light mode */
html.wem-light body.wem-light svg line.grid-line,
html.wem-light body.wem-light svg .grid line {
  stroke: rgba(26, 35, 50, 0.08) !important;
}

/* API usage panel: text colors */
html.wem-light body.wem-light .tb-api-usage-panel,
html.wem-light body.wem-light .tb-api-usage-content,
html.wem-light body.wem-light div.tb-api-usage-panel,
html.wem-light body.wem-light div.tb-api-usage-content {
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .tb-api-usage-panel span,
html.wem-light body.wem-light .tb-api-usage-panel label,
html.wem-light body.wem-light .tb-api-usage-panel div,
html.wem-light body.wem-light .tb-api-usage-content span,
html.wem-light body.wem-light .tb-api-usage-content label {
  color: #3D4F63 !important;
}

/* API usage metric labels */
html.wem-light body.wem-light .tb-api-usage-panel .tb-usage-label {
  color: #5C6E82 !important;
}

html.wem-light body.wem-light .tb-api-usage-panel .tb-usage-value {
  color: #1A2332 !important;
}

/* Widget text inheritance fix: TB-native widget children inherit dark text. Excludes .wem-w (our widgets
   keep their own semantic colours; see note above). */
html.wem-light body.wem-light .tb-widget:not(:has(.wem-w)) span,
html.wem-light body.wem-light .tb-widget:not(:has(.wem-w)) div,
html.wem-light body.wem-light .tb-widget:not(:has(.wem-w)) p,
html.wem-light body.wem-light .tb-widget:not(:has(.wem-w)) label,
html.wem-light body.wem-light .tb-widget:not(:has(.wem-w)) td,
html.wem-light body.wem-light .tb-widget:not(:has(.wem-w)) th {
  color: inherit !important;
}

/* Dashboard toolbar (above widgets: state name, timewindow, edit mode) */
html.wem-light body.wem-light .tb-dashboard-toolbar,
html.wem-light body.wem-light .tb-dashboard-toolbar span,
html.wem-light body.wem-light .tb-dashboard-toolbar button {
  color: #3D4F63 !important;
}

html.wem-light body.wem-light .tb-dashboard-toolbar {
  background: transparent !important;
}

/* Gridster / dashboard layout gaps */
html.wem-light body.wem-light .gridster-background,
html.wem-light body.wem-light gridster-background,
html.wem-light body.wem-light .gridster {
  background: transparent !important;
}

/* ===== Rule-chain editor: LIGHT mode (override the dark base theme so the whole page follows light) ===== */
body.wem-light .tb-rulechain-editor,
body.wem-light tb-rulechain-page,
body.wem-light .tb-rulechain-container,
body.wem-light .fc-canvas-container,
body.wem-light .fc-canvas,
body.wem-light fc-canvas {
  background: #f4f6f8 !important;
  color: #1b2430 !important;
}
body.wem-light .tb-rulechain-library,
body.wem-light .tb-rulechain-library-panel-group,
body.wem-light .tb-rulechain-editor .mat-drawer,
body.wem-light tb-rulechain-page .mat-drawer,
body.wem-light .tb-rule-node-details,
body.wem-light [class*="rule-node-details"] {
  background: #ffffff !important;
  color: #1b2430 !important;
}
body.wem-light .tb-rulechain-library-panel-group mat-expansion-panel,
body.wem-light .tb-rulechain-library-panel-group .mat-expansion-panel,
body.wem-light .tb-rulechain-library-panel-group .mat-expansion-panel-body {
  background: #ffffff !important;
}
body.wem-light .tb-rulechain-library-panel-group mat-expansion-panel-header,
body.wem-light .tb-rulechain-library-panel-group .mat-expansion-panel-header {
  background: #eef1f4 !important;
}
body.wem-light .tb-rulechain-library .mat-expansion-panel-header-title,
body.wem-light .tb-rulechain-library .tb-panel-title,
body.wem-light .tb-rulechain-library-panel-group .mat-expansion-panel-header-title {
  color: #1b2430 !important;
}
body.wem-light .tb-rulechain-library input,
body.wem-light .tb-rulechain-library-panel-group input {
  background: #ffffff !important;
  color: #1b2430 !important;
}
body.wem-light .tb-rulechain .fc-canvas .fc-edge-label .fc-edge-label-text span,
body.wem-light .fc-edge-label-text,
body.wem-light .fc-edge-label-text span {
  background: #eef1f4 !important;
  color: #1b2430 !important;
}
/* JS/TBEL editor: LIGHT mode: make it a white code box with dark text. The base theme darkens many ACE
   sub-elements (.ace_line/.ace_line_group/.ace_active-line/.ace_print-margin/...) via .tb-default-prepended
   class rules, so we override with the editor's ID (#tb-javascript-input) which outranks any class selector. */
body.wem-light .tb-js-func,
body.wem-light #tb-javascript-panel,
body.wem-light .tb-js-func-panel,
body.wem-light #tb-javascript-input,
body.wem-light #tb-javascript-input .ace_scroller,
body.wem-light #tb-javascript-input .ace_content,
body.wem-light #tb-javascript-input .ace_gutter {
  background: #ffffff !important;
}
body.wem-light #tb-javascript-input .ace_layer,
body.wem-light #tb-javascript-input .ace_text-layer,
body.wem-light #tb-javascript-input .ace_marker-layer,
body.wem-light #tb-javascript-input .ace_line,
body.wem-light #tb-javascript-input .ace_line_group,
body.wem-light #tb-javascript-input .ace_print-margin {
  background: transparent !important;
}
body.wem-light #tb-javascript-input .ace_active-line,
body.wem-light #tb-javascript-input .ace_gutter-active-line {
  background: #eef2f7 !important;
}
body.wem-light #tb-javascript-input .ace_text-layer,
body.wem-light #tb-javascript-input .ace_line,
body.wem-light #tb-javascript-input .ace_identifier,
body.wem-light .tb-js-func .tb-js-func-toolbar .tb-title,
body.wem-light .tb-js-func .tb-title {
  color: #1b2430 !important;
}
body.wem-light #tb-javascript-input .ace_gutter,
body.wem-light #tb-javascript-input .ace_gutter-cell { color: #8a96a3 !important; }
body.wem-light #tb-javascript-input .ace_keyword { color: #0033b3 !important; }
body.wem-light #tb-javascript-input .ace_string { color: #067d17 !important; }
body.wem-light #tb-javascript-input .ace_constant { color: #871094 !important; }
body.wem-light #tb-javascript-input .ace_punctuation,
body.wem-light #tb-javascript-input .ace_paren { color: #5c6e82 !important; }
body.wem-light #tb-javascript-input .ace_cursor { color: #1b2430 !important; }
body.wem-light #tb-javascript-input .ace_selection,
body.wem-light #tb-javascript-input .ace_selected-word {
  background: rgba(120, 165, 215, 0.30) !important;
}
/* The syntax token spans (.ace_keyword/.ace_identifier/.ace_constant/...) each carry a dark navy
   background (rgb(26,35,50)) that is invisible on the dark editor but shows as black boxes on the
   white light-mode editor. Force every token span transparent so only the colored glyphs show. */
body.wem-light #tb-javascript-input .ace_line span,
body.wem-light #tb-javascript-input .ace_text-input { background: transparent !important; }
/* #1: category header HOVER in light mode: the dark base theme's :hover (#1C2A42) turned the header dark
   navy on hover; force a light hover so it stays readable. */
body.wem-light .tb-rulechain-library-panel-group mat-expansion-panel-header:hover,
body.wem-light .tb-rulechain-library-panel-group .mat-expansion-panel-header:hover {
  background: #e3e8ee !important;
}
body.wem-light .tb-rulechain-library-panel-group mat-expansion-panel-header:hover .mat-expansion-panel-header-title,
body.wem-light .tb-rulechain-library-panel-group .mat-expansion-panel-header:hover .tb-panel-title {
  color: #1b2430 !important;
}
/* #2: the bottom-right footer FAB bar (.tb-footer-buttons) had the dark base bg (rgb(17,29,46)) in light mode.
   Make it transparent; enabled FAB = WEM green w/ white icon; disabled = muted. */
body.wem-light .tb-footer-buttons {
  background: transparent !important;
}
body.wem-light .tb-footer-buttons .mat-mdc-fab:not(.mat-mdc-button-disabled) {
  background-color: #2A7B30 !important;
}
body.wem-light .tb-footer-buttons .mat-mdc-fab:not(.mat-mdc-button-disabled) .mat-icon {
  color: #ffffff !important;
}
body.wem-light .tb-footer-buttons .mat-mdc-fab.mat-mdc-button-disabled .mat-icon {
  color: #AAB4BF !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Login page; LIGHT mode. The login customCss forces a dark aurora background
   (designed for dark mode); in light mode that left a white card clashing on a
   dark ground. Give light mode its own clean, on-brand light login: a soft cool
   gradient ground (no warm cream), the dark vignette/texture removed, and a
   lighter card shadow so the white card sits naturally. Dark mode is untouched.
   ───────────────────────────────────────────────────────────────────────────── */
html.wem-light body.wem-light .tb-login-content,
html.wem-light body.wem-light .tb-login-content.mat-app-background,
html.wem-light body.wem-light .mat-app-background {
  background: linear-gradient(150deg, #EAF2EE 0%, #F1F4F3 48%, #E6EDF3 100%) !important;
  background-attachment: fixed !important;
}
html.wem-light body.wem-light .tb-login-content::before,
html.wem-light body.wem-light .mat-app-background::before {
  background: radial-gradient(1100px 580px at 50% 42%, rgba(45,133,52,0.06) 0%, transparent 70%) !important;
  content: "" !important;
}
html.wem-light body.wem-light .tb-login-content::after,
html.wem-light body.wem-light .mat-app-background::after {
  background: none !important;
  content: none !important;
}
html.wem-light body.wem-light .tb-login-content .mat-mdc-card,
html.wem-light body.wem-light .mat-app-background .mat-mdc-card {
  box-shadow: 0 18px 48px rgba(20,40,70,0.12), 0 4px 14px rgba(20,40,70,0.07) !important;
  border: 1px solid rgba(20,40,70,0.06) !important;
}
/* light-mode login: re-color the wordmark + reset-password link that the login customCss
   paints white for the dark aurora (they were invisible on the light card). */
html.wem-light body.wem-light .tb-login-content .tb-login-form .title::before {
  color: #2D8534 !important;   /* "Monitor · Optimize · Report" tagline: brand green on light */
}
html.wem-light body.wem-light .tb-login-content .tb-reset-password,
html.wem-light body.wem-light .tb-login-content button.tb-reset-password,
html.wem-light body.wem-light .tb-login-content .tb-reset-password .mdc-button__label {
  color: rgba(30,40,56,0.60) !important;            /* "Forgot your password?" */
  --mdc-text-button-label-text-color: rgba(30,40,56,0.60) !important;
}


/* ===== WEM UX bar (2026-07): NEUTRAL field focus (light theme). ===== */
body.wem-light .mdc-text-field--focused .mdc-notched-outline__leading,
body.wem-light .mdc-text-field--focused .mdc-notched-outline__notch,
body.wem-light .mdc-text-field--focused .mdc-notched-outline__trailing,
body.wem-light .mat-mdc-form-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline__leading,
body.wem-light .mat-mdc-form-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline__notch,
body.wem-light .mat-mdc-form-field.mat-focused .mdc-text-field--outlined .mdc-notched-outline__trailing,
body.wem-light mat-sidenav-content .mdc-text-field--focused .mdc-notched-outline__leading,
body.wem-light mat-sidenav-content .mdc-text-field--focused .mdc-notched-outline__notch,
body.wem-light mat-sidenav-content .mdc-text-field--focused .mdc-notched-outline__trailing { border-color: #5A6B82 !important; }
body.wem-light .mdc-text-field--focused .mdc-floating-label,
body.wem-light .mat-mdc-form-field.mat-focused .mdc-floating-label,
body.wem-light mat-sidenav-content .mdc-text-field--focused .mdc-floating-label { color: #5A6B82 !important; }
body.wem-light input, body.wem-light .mat-mdc-input-element, body.wem-light textarea { caret-color: #5A6B82 !important; }
body.wem-light *:focus-visible { outline-color: #5A6B82 !important; }

/* Active menu item colour on the light chrome. The dark theme's own rule reads this variable (see
   wem-custom-theme.css), so no competing override is needed here: #4AC653 measured 1.88:1 against the light
   tint, this darker brand green measures ~7:1, and the left border plus tint still mark the item selected so
   the state never rests on colour alone. */
body.wem-light {
  --wem-menu-active: #1E5A23;
}