/* WEM Energy: CDK Overlay Fixes
   TB's customCss is prefixed with .tb-custom-css, which can't reach
   elements inside .cdk-overlay-container (sibling of app root).
   This file is served by nginx, so selectors work globally. */

/* ── DARK MODE (default) ─────────────────────────── */

/* Notification panel */
html.wem-dark .cdk-overlay-pane [class*="notification"],
html.wem-dark .cdk-overlay-pane .tb-notification-panel,
html:not(.wem-light) .cdk-overlay-pane [class*="notification"],
html:not(.wem-light) .cdk-overlay-pane .tb-notification-panel {
  background: #111D2E !important;
  color: #C1CDD8 !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] h3,
html.wem-dark .cdk-overlay-pane [class*="notification"] h4,
html.wem-dark .cdk-overlay-pane [class*="notification"] [class*="title"],
html.wem-dark .cdk-overlay-pane [class*="notification"] [class*="header"] {
  color: #F0F4F8 !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] .mat-mdc-list-item,
html.wem-dark .cdk-overlay-pane [class*="notification-item"],
html.wem-dark .cdk-overlay-pane .tb-notification-item {
  color: #C1CDD8 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] .mat-mdc-list-item:hover,
html.wem-dark .cdk-overlay-pane [class*="notification-item"]:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] a {
  color: #56D15F !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] [class*="time"] {
  color: #6B7A8D !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] button.mat-mdc-icon-button {
  color: #9BAEBF !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] button.mat-mdc-icon-button:hover {
  color: #56D15F !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] [class*="mark-all"],
html.wem-dark .cdk-overlay-pane [class*="notification"] [class*="mark-read"] {
  color: #56D15F !important;
}

html.wem-dark .cdk-overlay-pane [class*="notification"] [class*="view-all"] {
  color: #56D15F !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* CDK overlay containers (dialogs, dropdowns, tooltips) */
html.wem-dark .cdk-overlay-pane .mat-mdc-dialog-surface,
html.wem-dark .cdk-overlay-pane .mat-mdc-dialog-container,
html.wem-dark .cdk-overlay-pane .mdc-dialog__surface {
  background: #162236 !important;
  color: #C1CDD8 !important;
}

/* Add-API-key dialog: the note span hardcodes rgba(0,0,0,.87) → invisible on dark */
html.wem-dark .cdk-overlay-pane tb-add-api-key-dialog .api-key-text,
html.wem-dark .cdk-overlay-pane tb-add-api-key-dialog .api-key-text span {
  color: #C1CDD8 !important;
}

html.wem-dark .cdk-overlay-pane .mat-mdc-select-panel,
html.wem-dark .cdk-overlay-pane .mat-mdc-autocomplete-panel {
  background: #162236 !important;
}

html.wem-dark .cdk-overlay-pane .mat-mdc-option {
  color: #C1CDD8 !important;
}

html.wem-dark .cdk-overlay-pane .mat-mdc-option:hover,
html.wem-dark .cdk-overlay-pane .mat-mdc-option:focus {
  background: rgba(255, 255, 255, 0.04) !important;
}

html.wem-dark .cdk-overlay-pane .mat-mdc-option.mat-mdc-option-active,
html.wem-dark .cdk-overlay-pane .mdc-list-item--selected {
  background: rgba(86, 209, 95, 0.08) !important;
}

/* Tooltips */
html.wem-dark .cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface {
  background: #1C2A42 !important;
  color: #F0F4F8 !important;
}

/* Snackbar */
html.wem-dark .cdk-overlay-container .mat-mdc-snack-bar-container {
  background: #1C2A42 !important;
}

html.wem-dark .cdk-overlay-container .mat-mdc-snack-bar-container .mdc-snackbar__label {
  color: #F0F4F8 !important;
}

/* Material Icons in overlays */
.cdk-overlay-container mat-icon,
.cdk-overlay-container .mat-icon,
.cdk-overlay-container .material-icons {
  font-family: 'Material Icons' !important;
}


/* ── SIDE MENU (DARK) ──────────────────────────────────────────────
   The tenant-admin left nav (mat-toolbar.tb-side-menu-toolbar > tb-side-menu)
   renders its item buttons with Material's default `mat-unthemed` colour
   rgba(0,0,0,.87), BLACK, which is invisible on the navy sidebar (#111D2E)
   in dark mode. TB-native theming does NOT recolour these buttons, and the
   customCss (wem-custom-theme.css) can't theme-scope by mode (TB prepends
   `.tb-default`, so a dark-only rule there would leak to the white light-mode
   sidebar; see the note in that file). This nginx-served sheet CAN scope on
   html.wem-dark, so the dark-menu colour is owned HERE. Light mode is left
   untouched (its dark-on-white text is already readable). Active items keep
   their green (customCss .tb-active); excluded below. */
html.wem-dark .tb-side-menu a.mdc-button:not(.tb-active):not(.active),
html.wem-dark .tb-side-menu a.mdc-button:not(.tb-active):not(.active) .mdc-button__label,
html.wem-dark .tb-side-menu .mat-mdc-list-item:not(.tb-active):not(.active),
html.wem-dark .tb-side-menu .tb-menu-link:not(.tb-active):not(.active),
html.wem-dark mat-sidenav a.mdc-button:not(.tb-active):not(.active) .mdc-button__label {
  color: #C1CDD8 !important;
  -webkit-text-fill-color: #C1CDD8 !important;   /* MDC sets text-fill-color, which wins over `color` */
}

/* Section headers + expansion-panel titles: quieter muted grey (still >4.5:1 on #111D2E) */
html.wem-dark .tb-side-menu .tb-menu-header,
html.wem-dark .tb-side-menu .mat-expansion-panel-header-title,
html.wem-dark .tb-side-menu mat-expansion-panel-header .mdc-list-item__primary-text {
  color: #8FA1B3 !important;
  -webkit-text-fill-color: #8FA1B3 !important;
}

/* Menu icons follow the item colour (customCss sets icon `color:inherit`, but MDC's text-fill
   on the button can leave the glyph black; pin it to the readable grey too). */
html.wem-dark .tb-side-menu a.mdc-button:not(.tb-active):not(.active) .mat-icon,
html.wem-dark .tb-side-menu a.mdc-button:not(.tb-active):not(.active) mat-icon,
html.wem-dark .tb-side-menu .tb-menu-link:not(.tb-active):not(.active) .mat-icon {
  color: #9BAEBF !important;
  -webkit-text-fill-color: #9BAEBF !important;
}

/* Hover keeps text bright for feedback (hover bg tint comes from customCss). */
html.wem-dark .tb-side-menu a.mdc-button:not(.tb-active):not(.active):hover,
html.wem-dark .tb-side-menu a.mdc-button:not(.tb-active):not(.active):hover .mdc-button__label,
html.wem-dark .tb-side-menu a.mdc-button:not(.tb-active):not(.active):hover .mat-icon {
  color: #F0F4F8 !important;
  -webkit-text-fill-color: #F0F4F8 !important;
}


/* ── LIGHT MODE ──────────────────────────────────── */

html.wem-light .cdk-overlay-pane [class*="notification"],
html.wem-light .cdk-overlay-pane .tb-notification-panel {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
  border: 1px solid rgba(26, 35, 50, 0.12) !important;
  box-shadow: 0 8px 30px rgba(26, 35, 50, 0.12), 0 2px 8px rgba(26, 35, 50, 0.06) !important;
}

html.wem-light .cdk-overlay-pane [class*="notification"] h3,
html.wem-light .cdk-overlay-pane [class*="notification"] h4,
html.wem-light .cdk-overlay-pane [class*="notification"] [class*="title"],
html.wem-light .cdk-overlay-pane [class*="notification"] [class*="header"] {
  color: #1A2332 !important;
}

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

html.wem-light .cdk-overlay-pane [class*="notification"] .mat-mdc-list-item:hover,
html.wem-light .cdk-overlay-pane [class*="notification-item"]:hover {
  background: rgba(26, 35, 50, 0.04) !important;
}

html.wem-light .cdk-overlay-pane [class*="notification"] a {
  color: #2D8534 !important;
}

html.wem-light .cdk-overlay-pane [class*="notification"] [class*="time"] {
  color: #8A96A3 !important;
}

html.wem-light .cdk-overlay-pane [class*="notification"] button.mat-mdc-icon-button {
  color: #5C6E82 !important;
}

html.wem-light .cdk-overlay-pane [class*="notification"] button.mat-mdc-icon-button:hover {
  color: #2D8534 !important;
  background: rgba(26, 35, 50, 0.06) !important;
}

html.wem-light .cdk-overlay-pane [class*="notification"] [class*="mark-all"],
html.wem-light .cdk-overlay-pane [class*="notification"] [class*="mark-read"] {
  color: #2D8534 !important;
}

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

/* CDK overlay containers (dialogs, dropdowns) */
html.wem-light .cdk-overlay-pane .mat-mdc-dialog-surface,
html.wem-light .cdk-overlay-pane .mat-mdc-dialog-container,
html.wem-light .cdk-overlay-pane .mdc-dialog__surface {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}

html.wem-light .cdk-overlay-pane .mat-mdc-select-panel,
html.wem-light .cdk-overlay-pane .mat-mdc-autocomplete-panel {
  background: #FFFFFF !important;
}

html.wem-light .cdk-overlay-pane .mat-mdc-option {
  color: #3D4F63 !important;
}

html.wem-light .cdk-overlay-pane .mat-mdc-option:hover,
html.wem-light .cdk-overlay-pane .mat-mdc-option:focus {
  background: rgba(26, 35, 50, 0.04) !important;
}

html.wem-light .cdk-overlay-pane .mat-mdc-option.mat-mdc-option-active,
html.wem-light .cdk-overlay-pane .mdc-list-item--selected {
  background: rgba(45, 133, 52, 0.08) !important;
}

/* Tooltips */
html.wem-light .cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface {
  background: #1A2332 !important;
  color: #FFFFFF !important;
}

/* Snackbar */
html.wem-light .cdk-overlay-container .mat-mdc-snack-bar-container {
  background: #1A2332 !important;
}

/* ── TIMEWINDOW PANEL + similar TB popovers (DARK) ──────────────────
   TB renders the timewindow/aggregation panels for a LIGHT surface, so on the
   dark theme their labels + secondary text are dark-grey-on-dark (invisible:
   "Aggregation", "UTC+03:00", "Save as default", "Cancel"). Force a dark surface
   + readable text. Selectors are global (nginx-served, no .tb-custom-css prefix). */
html:not(.wem-light) tb-timewindow-panel,
html:not(.wem-light) tb-datapoints-limit-panel,
html:not(.wem-light) tb-aggregation-options-panel {
  background: #162236 !important;
  color: #C1CDD8 !important;
}
html:not(.wem-light) tb-timewindow-panel .tb-form-panel:not(.no-border) {
  background: #1C2A42 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* primary labels, section titles, selected dropdown values, toggle labels */
html:not(.wem-light) tb-timewindow-panel .tb-form-panel-title,
html:not(.wem-light) tb-timewindow-panel mat-label,
html:not(.wem-light) tb-timewindow-panel .mdc-floating-label,
html:not(.wem-light) tb-timewindow-panel .mat-mdc-select-value,
html:not(.wem-light) tb-timewindow-panel .mat-mdc-select-value-text,
html:not(.wem-light) tb-timewindow-panel .mat-mdc-select-min-line,
html:not(.wem-light) tb-timewindow-panel .fixed-title-width-180,
html:not(.wem-light) tb-timewindow-panel .tb-form-row > span,
html:not(.wem-light) tb-timewindow-panel tb-timeinterval,
html:not(.wem-light) tb-timewindow-panel .mat-button-toggle-label-content {
  color: #E3EAF0 !important;
}
/* secondary text: UTC offset, "save as default", Cancel/outlined buttons, arrows, hints */
html:not(.wem-light) tb-timewindow-panel .mat-mdc-button .mdc-button__label,
html:not(.wem-light) tb-timewindow-panel .mat-mdc-outlined-button .mdc-button__label,
html:not(.wem-light) tb-timewindow-panel .mat-mdc-select-arrow,
html:not(.wem-light) tb-timewindow-panel [class*="utc"],
html:not(.wem-light) tb-timewindow-panel a,
html:not(.wem-light) tb-timewindow-panel .tb-hint {
  color: #9BB0C4 !important;
}
/* dropdown field surfaces */
html:not(.wem-light) tb-timewindow-panel .mat-mdc-text-field-wrapper,
html:not(.wem-light) tb-timewindow-panel .mdc-text-field {
  background: #0E1828 !important;
}
/* active green toggle (Realtime / History / Last) keeps a white label */
html:not(.wem-light) tb-timewindow-panel .mat-button-toggle-checked .mat-button-toggle-label-content {
  color: #FFFFFF !important;
}

/* Date-picker calendar (DARK): Angular Material mat-datepicker (reports, filters, fixed range).
   TB ships it for a light surface, so on dark it's near-invisible. Theme the full calendar + states. */
html:not(.wem-light) .cdk-overlay-pane .mat-datepicker-content,
html:not(.wem-light) .cdk-overlay-pane .mat-datepicker-content .mat-calendar {
  background: #162236 !important;
  color: #C1CDD8 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datepicker-content {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5) !important;
}
/* header: month/year button + prev/next arrows */
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-period-button,
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-previous-button,
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-next-button,
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-controls .mat-mdc-button .mdc-button__label {
  color: #E3EAF0 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-arrow { fill: #E3EAF0 !important; }
/* weekday header row + day numbers + year/month labels */
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-table-header th { color: #6B7A8D !important; }
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-cell-content,
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-label { color: #C1CDD8 !important; }
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  color: #4A5868 !important;
}
/* hover + keyboard-focused day */
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-cell:hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
html:not(.wem-light) .cdk-overlay-pane .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  background: rgba(86, 209, 95, 0.16) !important;
}
/* today */
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: #56D15F !important;
}
/* selected day + in-range (for range pickers); WEM green */
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-in-range::before,
html:not(.wem-light) .cdk-overlay-pane .mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
  background: rgba(86, 209, 95, 0.16) !important;
}

/* Generic context / 3-dot menus (dark) */
html:not(.wem-light) .cdk-overlay-pane .mat-mdc-menu-panel {
  background: #162236 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-mdc-menu-item .mdc-list-item__primary-text,
html:not(.wem-light) .cdk-overlay-pane .mat-mdc-menu-item .mat-icon,
html:not(.wem-light) .cdk-overlay-pane .mat-mdc-menu-item span {
  color: #C1CDD8 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-mdc-menu-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Timezone selector popover (DARK): the timezone picker is a tb-popover whose
   tb-timezone-panel paints a WHITE surface by default, so on the dark app it shows as a
   bright box. (Light mode keeps white, which is correct.) Force a dark surface + branded states. */
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel {
  background: #162236 !important;
  color: #C1CDD8 !important;
}
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel .mat-mdc-list-item .mdc-list-item__primary-text,
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel .mat-mdc-list-item,
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel [role="option"] {
  color: #C1CDD8 !important;
}
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel .mat-mdc-list-item:hover,
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel [role="option"]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel .mdc-list-item--selected,
html:not(.wem-light) .cdk-overlay-pane tb-timezone-panel [aria-selected="true"] {
  background: rgba(86, 209, 95, 0.12) !important;
}


/* ── LIGHT MODE: date-picker calendar + timezone popover ───────────── */

/* Date-picker calendar (LIGHT): TB's default calendar accent is its own blue; brand it WEM green. */
html.wem-light .cdk-overlay-pane .mat-datepicker-content,
html.wem-light .cdk-overlay-pane .mat-datepicker-content .mat-calendar {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}
html.wem-light .cdk-overlay-pane .mat-datepicker-content {
  box-shadow: 0 10px 36px rgba(26, 35, 50, 0.16) !important;
}
html.wem-light .cdk-overlay-pane .mat-calendar-period-button,
html.wem-light .cdk-overlay-pane .mat-calendar-previous-button,
html.wem-light .cdk-overlay-pane .mat-calendar-next-button,
html.wem-light .cdk-overlay-pane .mat-calendar-controls .mat-mdc-button .mdc-button__label {
  color: #1A2332 !important;
}
html.wem-light .cdk-overlay-pane .mat-calendar-arrow { fill: #1A2332 !important; }
html.wem-light .cdk-overlay-pane .mat-calendar-table-header th { color: #8A96A3 !important; }
html.wem-light .cdk-overlay-pane .mat-calendar-body-cell-content,
html.wem-light .cdk-overlay-pane .mat-calendar-body-label { color: #3D4F63 !important; }
html.wem-light .cdk-overlay-pane .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  color: #C2CBD4 !important;
}
html.wem-light .cdk-overlay-pane .mat-calendar-body-cell:hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected),
html.wem-light .cdk-overlay-pane .cdk-keyboard-focused .mat-calendar-body-active > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
  background: rgba(45, 133, 52, 0.12) !important;
}
html.wem-light .cdk-overlay-pane .mat-calendar-body-today:not(.mat-calendar-body-selected) {
  border-color: #2D8534 !important;
}
html.wem-light .cdk-overlay-pane .mat-calendar-body-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}
html.wem-light .cdk-overlay-pane .mat-calendar-body-in-range::before,
html.wem-light .cdk-overlay-pane .mat-calendar-body-in-preview .mat-calendar-body-cell-preview {
  background: rgba(45, 133, 52, 0.12) !important;
}

/* Timezone selector popover (LIGHT): white surface is correct; brand selected/hover. */
html.wem-light .cdk-overlay-pane tb-timezone-panel {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}
html.wem-light .cdk-overlay-pane tb-timezone-panel .mat-mdc-list-item:hover,
html.wem-light .cdk-overlay-pane tb-timezone-panel [role="option"]:hover {
  background: rgba(26, 35, 50, 0.04) !important;
}
html.wem-light .cdk-overlay-pane tb-timezone-panel .mdc-list-item--selected,
html.wem-light .cdk-overlay-pane tb-timezone-panel [aria-selected="true"] {
  background: rgba(45, 133, 52, 0.10) !important;
}


/* ── Date/time picker (mat-datetimepicker): the REAL picker TB uses for History → Range.
   It is a separate library from Angular Material's datepicker (class prefix mat-datetimepicker-*),
   defaults to a WHITE surface + the framework primary (blue) accent. Theme calendar + clock, both modes. */

/* DARK */
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-content,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar {
  background: #162236 !important;
  color: #C1CDD8 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-content {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5) !important;
}
/* coloured header bar (year / date / time): WEM green instead of TB blue */
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header {
  background: #2D8534 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-year,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-date,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-time,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-date-time,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-hours,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-minutes {
  color: rgba(255, 255, 255, 0.7) !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-date.active,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-time .active,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-hours.active,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-header-minutes.active {
  color: #FFFFFF !important;
}
/* controls (prev / month-year / next) + weekday headers + day numbers */
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-period-button,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-previous-button,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-next-button {
  color: #E3EAF0 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-previous-button::after,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-next-button::after {
  border-color: #E3EAF0 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-table-header,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-table-header th {
  color: #6B7A8D !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-body-cell-content {
  color: #C1CDD8 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-body-disabled .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
  color: #4A5868 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected):hover {
  background: rgba(86, 209, 95, 0.16) !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-body-today:not(.mat-datetimepicker-calendar-body-selected) {
  border-color: #56D15F !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-calendar-body-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}
/* clock (time view) */
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-clock {
  background: #0E1828 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-clock-cell {
  color: #C1CDD8 !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-clock-hand,
html:not(.wem-light) .cdk-overlay-pane .mat-datetimepicker-clock-center {
  background: #2D8534 !important;
}

/* LIGHT */
html.wem-light .cdk-overlay-pane .mat-datetimepicker-content,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar {
  background: #FFFFFF !important;
  color: #3D4F63 !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-content {
  box-shadow: 0 10px 36px rgba(26, 35, 50, 0.16) !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header {
  background: #2D8534 !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-year,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-date,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-time,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-hours,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-minutes {
  color: rgba(255, 255, 255, 0.7) !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-date.active,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-hours.active,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-header-minutes.active {
  color: #FFFFFF !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-period-button,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-previous-button,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-next-button {
  color: #1A2332 !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-table-header,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-table-header th {
  color: #8A96A3 !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-body-cell-content {
  color: #3D4F63 !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected):hover {
  background: rgba(45, 133, 52, 0.12) !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-body-today:not(.mat-datetimepicker-calendar-body-selected) {
  border-color: #2D8534 !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-calendar-body-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-clock { background: #EEF2F6 !important; }
html.wem-light .cdk-overlay-pane .mat-datetimepicker-clock-cell { color: #3D4F63 !important; }
html.wem-light .cdk-overlay-pane .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected {
  background: #2D8534 !important;
  color: #FFFFFF !important;
}
html.wem-light .cdk-overlay-pane .mat-datetimepicker-clock-hand,
html.wem-light .cdk-overlay-pane .mat-datetimepicker-clock-center {
  background: #2D8534 !important;
}

/* ── WEM notification toasts ────────────────────────────────────────────────
   TB renders notifications as <tb-snack-bar-component><div class="... tb-toast error-toast">msg + Close</div>.
   wem-error-toast.js rewrites the raw HTTP text; this is the visual layer: a status icon + rounded card +
   soft shadow + semantic color, replacing TB's flat harsh bar. Dark is default; light via html.wem-light.
   (No custom entrance animation: TB already animates the snackbar in.) */
.mat-mdc-snack-bar-container .mdc-snackbar__surface,
.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.tb-toast {
  position: relative !important;
  box-sizing: border-box !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 13px 14px 13px 46px !important;   /* left room for the status icon */
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  font: 500 14px/1.45 Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.1px;
  /* neutral / info default (overridden per severity below) */
  background: #1B2733 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #E6EDF3 !important;
  --wem-toast-ic: #6AB0FF;
  --wem-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16.5' x2='12' y2='11'/%3E%3Cline x1='12' y1='7.5' x2='12.01' y2='7.5'/%3E%3C/svg%3E");
}
.tb-toast::before {
  content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  -webkit-mask: var(--wem-toast-icon) center / contain no-repeat;
  mask: var(--wem-toast-icon) center / contain no-repeat;
  background-color: var(--wem-toast-ic);
}
.tb-toast .toast-text { color: inherit !important; white-space: normal !important; max-width: 520px; }
.tb-toast button.mdc-button {
  min-width: 0 !important; margin-left: 4px !important; padding: 4px 10px !important;
  height: auto !important; border-radius: 8px !important; color: inherit !important; opacity: 0.82;
}
.tb-toast button.mdc-button:hover { opacity: 1; background: rgba(255, 255, 255, 0.10) !important; }
.tb-toast button.mdc-button .mdc-button__label { font-weight: 600; font-size: 13px; }

/* severity: dark (default) */
.tb-toast.error-toast {
  background: #241318 !important; border-color: rgba(255, 107, 110, 0.42) !important; color: #F4E4E5 !important;
  --wem-toast-ic: #FF6B6E;
  --wem-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='7.5' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.5' x2='12.01' y2='16.5'/%3E%3C/svg%3E");
}
.tb-toast.success-toast {
  background: #10201A !important; border-color: rgba(74, 198, 83, 0.40) !important; color: #E3F4E6 !important;
  --wem-toast-ic: #4AC653;
  --wem-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.tb-toast.warn-toast {
  background: #241E10 !important; border-color: rgba(240, 180, 60, 0.42) !important; color: #F5ECDA !important;
  --wem-toast-ic: #F0B43C;
  --wem-toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* severity: light theme */
html.wem-light .tb-toast { box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18) !important; background: #FFFFFF !important; border-color: rgba(15, 23, 42, 0.12) !important; color: #24313F !important; --wem-toast-ic: #2563B0; }
html.wem-light .tb-toast.error-toast { background: #FFF3F3 !important; border-color: rgba(200, 30, 35, 0.34) !important; color: #7A1418 !important; --wem-toast-ic: #D32A2E; }
html.wem-light .tb-toast.success-toast { background: #EFF9F0 !important; border-color: rgba(45, 133, 52, 0.34) !important; color: #17492A !important; --wem-toast-ic: #2D8534; }
html.wem-light .tb-toast.warn-toast { background: #FFF8EC !important; border-color: rgba(190, 130, 20, 0.36) !important; color: #6B4B12 !important; --wem-toast-ic: #B77C10; }
html.wem-light .tb-toast button.mdc-button:hover { background: rgba(0, 0, 0, 0.06) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Read-only code/JSON viewers: audit-log "Details" (.tb-audit-log) + event content
   (.tb-event-content). TB inits an ACE editor pinned to `ace/theme/github` on these,
   but our app theme leaves the github background unset → dark #333 tokens on a dark
   panel (invisible), and low-contrast in light. Force a readable code panel per theme.
   Anchored on the editor classes (NOT .cdk-overlay-pane, the audit editor renders
   inline, not in a dialog). Verified token classes: ace_variable=keys, ace_string,
   ace_paren, ace_punctuation, ace_constant.ace_numeric/.ace_language.
   ───────────────────────────────────────────────────────────────────────── */
/* THE ACTUAL FIX (verified live 2026-07-05): a broad theme rule paints an OPAQUE background
   (rgb(15,25,38)) on ACE's inner layers. The `.ace_marker-layer` that sits ABOVE the `.ace_text-layer`
   then covers the text, so the JSON rendered correctly but was hidden behind an opaque layer (only the
   gutter numbers, a separate child, stayed visible). Force all inner layers transparent so the text shows
   on the editor panel. Theme-agnostic (the `.ace_editor` background below supplies the panel colour). */
/* Must out-specify wem-custom-theme.css `.ace_editor *` which TB customCss prefixes to
   `.tb-default .ace_editor *` (specificity 0,2,0, !important). This selector is 0,3,1 so it wins. */
html :is(.tb-audit-log, .tb-event-content).ace_editor :is(.ace_scroller, .ace_content, .ace_layer) { background: transparent !important; }

/* dark (default: any html without .wem-light). NOTE: MDC/Material sets `-webkit-text-fill-color` on the
   dialog text and it WINS over `color` for the painted glyphs, so `color` alone leaves the text invisible
   (glyph fill = MDC's dark value on our dark panel). Every text rule MUST set text-fill-color too. */
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content).ace_editor { background: #0E1726 !important; color: #D7E0EA !important; -webkit-text-fill-color: #D7E0EA !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_gutter { background: #0B1420 !important; color: #6B7C90 !important; -webkit-text-fill-color: #6B7C90 !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_gutter-active-line { background: #132033 !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_string { color: #8FD694 !important; -webkit-text-fill-color: #8FD694 !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_variable { color: #7FB0FF !important; -webkit-text-fill-color: #7FB0FF !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_constant.ace_numeric { color: #F0B45C !important; -webkit-text-fill-color: #F0B45C !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_constant.ace_language { color: #D08CFF !important; -webkit-text-fill-color: #D08CFF !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_paren,
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_punctuation { color: #9FB2C6 !important; -webkit-text-fill-color: #9FB2C6 !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_cursor { color: #D7E0EA !important; }
/* marker layers: ace-github paints pale-yellow active-line + pale-blue selection BEHIND the text, which
   washes out our light tokens on the dark panel (this, not the token colours, is what made it unreadable).
   Re-tint them to subtle dark overlays so the text stays legible. */
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_marker-layer .ace_active-line { background: rgba(127, 176, 255, 0.07) !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_marker-layer .ace_selection { background: rgba(127, 176, 255, 0.20) !important; }
html:not(.wem-light) :is(.tb-audit-log, .tb-event-content) .ace_selected-word { background: rgba(127, 176, 255, 0.26) !important; border-color: transparent !important; }
/* light */
html.wem-light :is(.tb-audit-log, .tb-event-content).ace_editor { background: #FFFFFF !important; color: #24292F !important; -webkit-text-fill-color: #24292F !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_gutter { background: #F6F8FA !important; color: #8C959F !important; -webkit-text-fill-color: #8C959F !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_gutter-active-line { background: #EAEEF2 !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_string { color: #0A7D33 !important; -webkit-text-fill-color: #0A7D33 !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_variable { color: #0550AE !important; -webkit-text-fill-color: #0550AE !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_constant.ace_numeric { color: #953800 !important; -webkit-text-fill-color: #953800 !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_constant.ace_language { color: #6639BA !important; -webkit-text-fill-color: #6639BA !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_paren,
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_punctuation { color: #57606A !important; -webkit-text-fill-color: #57606A !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_cursor { color: #24292F !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_marker-layer .ace_active-line { background: rgba(5, 80, 174, 0.06) !important; }
html.wem-light :is(.tb-audit-log, .tb-event-content) .ace_marker-layer .ace_selection { background: rgba(5, 80, 174, 0.14) !important; }

/* ── OFFLINE: one calm indication ─────────────────── */

/* While the browser is offline, every poll fails and TB raises a short-lived toast per failure, so the screen
   flickers "Unable to connect" on and off. Hide those while offline; wem-error-toast.js puts up one quiet,
   persistent bar instead. Online behaviour is untouched: a real server error still toasts normally. */
html.wem-offline .cdk-overlay-container .mat-mdc-snack-bar-container,
html.wem-offline .cdk-overlay-container .mat-snack-bar-container,
html.wem-offline .cdk-overlay-container tb-snack-bar-component,
html.wem-offline .tb-toast {
  display: none;
}

#wem-conn-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1200;
  display: none;
  pointer-events: none;               /* never sits between the operator and a control */
  max-width: min(92vw, 460px);
  box-sizing: border-box;
  padding: 9px 17px;
  border-radius: 999px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  background: rgba(21, 28, 38, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

/* the text sits in a child of a .wem-w so TB's blanket `color: inherit` on plain divs cannot reach it */
#wem-conn-bar > span { color: #E8EDF2; }
html.wem-light #wem-conn-bar > span { color: #12222E; }
#wem-conn-bar[data-state="online"] > span { color: #0C2A12; }

html.wem-light #wem-conn-bar {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(15, 34, 46, 0.16);
  box-shadow: 0 6px 22px rgba(15, 34, 46, 0.18);
}

/* restored: brief, and green because it is genuinely good news */
#wem-conn-bar[data-state="online"] {
  background: rgba(74, 198, 83, 0.96);
  border-color: rgba(74, 198, 83, 0.65);
}

/* Widgets that hold last-known data while offline. Measured across all 13 dashboards on 2026-08-12: 8 of the
   9 admin pages never re-poll inside a 40s outage, so they keep showing values with nothing to say the data
   is old. The bar explains WHY; this says WHICH, at a glance, without touching text colour (an opacity fade
   would cut contrast on the very numbers someone is trying to read). Desaturation only: live greens, ambers
   and reds go quiet, so a page of muted colour reads as "not live" while every value stays legible. */
html.wem-offline .tb-widget {
  filter: saturate(0.55);
}

/* the connection bar itself must stay full strength: it is the one thing on screen that IS current */
html.wem-offline #wem-conn-bar {
  filter: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tb-widget {
    transition: filter 0.25s ease-out;
  }
}