/*
 * AFOTECH — OpenRemote Theme v3
 * Dark/Light dual-theme, synchronized with onboarding.html
 * Map: no CSS filter (breaks Chrome WebGL) — use dark tiles or neutral style
 */

/* Fuentes autohosteadas — ver images/fonts/fonts.css (JetBrains Mono + Material Symbols subset) */
@import url('images/fonts/fonts.css');

/* ══════════════════════════════════════════════════════════════════════════════
   DARK THEME (default)
══════════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* ── AFOTECH palette (same as onboarding.html :root) ─────────────── */
  --ex-bg:        #131C26;
  --ex-surface:   #1C2A38;
  --ex-surface2:  #243343;
  --ex-surface3:  #2B3B4C;
  --ex-surface-lo:#0F1A24;
  --ex-border:    #314253;
  --ex-border2:   #3D5063;
  --ex-accent:    #2E9BE0;
  --ex-accent-bg: rgba(46,155,224,.10);
  /* Derivados del acento (REQ-042): el segundo color del degradado de los botones y
     el halo de su sombra. index.html los reescribe con la marca del realm. */
  --ex-accent-2:  #007ACC;
  --ex-accent-glow: rgba(46,155,224,.25);
  --ex-green:     #4FB23A;
  --ex-green-bg:  rgba(79,178,58,.10);
  --ex-red:       #C0392B;
  --ex-warn:      #E67E22;
  --ex-text:      #E8F0F8;
  --ex-dim:       #C0CED8;
  --ex-muted:     #95A5B7; /* WCAG AA sobre bg, bg-lo, surface, surface2 y surface3.
                              El anterior #6A8099 daba entre 2.82:1 y 4.32:1. */
  --ex-radius:    8px;
  --ex-shadow:    0 4px 24px rgba(0,0,0,.55);
  --ex-shadow-sm: 0 2px 10px rgba(0,0,0,.40);

  /* ── OR built-in color slots ─────────────────────────────────────── */
  --or-app-color1: #1C2A38;
  --or-app-color2: #131C26;
  --or-app-color3: #E8F0F8;
  --or-app-color4: #2E9BE0;
  --or-app-color5: #4FB23A;
  --or-app-color6: #C0392B;
  --or-icon-fill:  #2E9BE0;
  --or-panel-background-color:             #1C2A38;
  --or-collapisble-panel-background-color: #1C2A38;
  --internal-or-rules-panel-color:         #1C2A38;

  /* ── MDC Material tokens ─────────────────────────────────────────── */
  --mdc-theme-primary:                     #2E9BE0;
  --mdc-theme-on-primary:                  #131C26;
  --mdc-theme-secondary:                   #4FB23A;
  --mdc-theme-background:                  #131C26;
  --mdc-theme-surface:                     #1C2A38;
  --mdc-theme-on-surface:                  #E8F0F8;
  --mdc-theme-on-background:               #E8F0F8;
  --mdc-theme-text-primary-on-background:  #E8F0F8;
  --mdc-theme-text-secondary-on-background:#C0CED8;
  --mdc-theme-text-hint-on-background:     #6A8099;
  --mdc-theme-error:                       #C0392B;
  --mdc-theme-on-error:                    #E8F0F8;
  --mdc-text-field-fill-color:             #243343;
  --mdc-text-field-ink-color:              #E8F0F8;
  --mdc-text-field-label-ink-color:        #6A8099;
  --mdc-text-field-outlined-idle-border-color:   #314253;
  --mdc-text-field-outlined-hover-border-color:  #2E9BE0;
  --mdc-select-fill-color:                 #243343;
  --mdc-select-ink-color:                  #E8F0F8;
  --mdc-select-label-ink-color:            #6A8099;
  --mdc-select-idle-line-color:            #314253;
  --mdc-select-hover-line-color:           #2E9BE0;
  --mdc-select-outlined-idle-border-color: #314253;
  --mdc-select-outlined-hover-border-color:#2E9BE0;
  --mdc-list-item-graphic-color:           #2E9BE0;
  --mdc-dialog-box-shadow:                 0 8px 32px rgba(0,0,0,.65);
  --mdc-dialog-surface-fill-color:         #1C2A38;
  --mdc-dialog-heading-ink-color:          #2E9BE0;
  --mdc-dialog-content-ink-color:          #C0CED8;
  --mdc-dialog-scroll-divider-color:       #314253;
  --mdc-checkbox-unchecked-color:          #6A8099;
  --mdc-switch-selected-handle-color:      #2E9BE0;
  --mdc-switch-selected-track-color:       rgba(46,155,224,.35);
  --mdc-switch-unselected-handle-color:    #6A8099;
  --mdc-switch-unselected-track-color:     #314253;

  /* ── Legacy aliases ──────────────────────────────────────────────── */
  --exacrop-bg:                var(--ex-bg);
  --exacrop-surface:           var(--ex-surface);
  --exacrop-surface-low:       var(--ex-surface-lo);
  --exacrop-surface-high:      var(--ex-surface2);
  --exacrop-surface-highest:   var(--ex-surface3);
  --exacrop-primary:           var(--ex-text);
  --exacrop-primary-container: var(--ex-accent);
  --exacrop-secondary:         var(--ex-green);
  --exacrop-tertiary:          var(--ex-warn);
  --exacrop-on-surface:        var(--ex-text);
  --exacrop-on-surface-variant:var(--ex-dim);
  --exacrop-outline:           var(--ex-muted);
  --exacrop-outline-variant:   var(--ex-border);
  --exacrop-error:             var(--ex-red);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT THEME — activated via data-theme="light" on <html>
══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;

  --ex-bg:        #EEF4FA;
  --ex-surface:   #FFFFFF;
  --ex-surface2:  #F0F4F8;
  --ex-surface3:  #E4EBF2;
  --ex-surface-lo:#DDE5EE;
  --ex-border:    #CBD5E0;
  --ex-border2:   #A0AEBA;
  --ex-accent:    #1577C2;
  --ex-accent-bg: rgba(21,119,194,.10);
  --ex-accent-2:  #0F5A94;
  --ex-accent-glow: rgba(21,119,194,.25);
  --ex-green:     #43A82E;
  --ex-green-bg:  rgba(67,168,46,.10);
  --ex-red:       #C0392B;
  --ex-warn:      #D35400;
  --ex-text:      #314253;
  --ex-dim:       #3A4A5A;
  --ex-muted:     #55687A; /* WCAG AA sobre TODAS las superficies claras.
                              El anterior #5E7488 pasaba solo sobre blanco puro (4.85:1)
                              y fallaba sobre bg #EEF4FA (4.38:1), bg-lo, surface2 y surface3. */
  --ex-shadow:    0 4px 24px rgba(0,0,0,.12);
  --ex-shadow-sm: 0 2px 10px rgba(0,0,0,.08);

  --or-app-color1: #FFFFFF;
  --or-app-color2: #EEF4FA;
  --or-app-color3: #314253;
  --or-app-color4: #1577C2;
  --or-app-color5: #43A82E;
  --or-app-color6: #C0392B;
  --or-icon-fill:  #1577C2;
  --or-panel-background-color:             #FFFFFF;
  --or-collapisble-panel-background-color: #FFFFFF;
  --internal-or-rules-panel-color:         #FFFFFF;

  --mdc-theme-primary:   #1577C2;
  --mdc-theme-on-primary:#FFFFFF;
  --mdc-theme-background:#EEF4FA;
  --mdc-theme-surface:   #FFFFFF;
  --mdc-theme-on-surface:#314253;
  --mdc-theme-on-background:#314253;
  --mdc-text-field-fill-color:#FFFFFF;
  --mdc-text-field-ink-color: #314253;
  --mdc-text-field-label-ink-color:#5E7488;
  --mdc-text-field-outlined-idle-border-color:  #CBD5E0;
  --mdc-text-field-outlined-hover-border-color: #1577C2;
  --mdc-select-fill-color:  #FFFFFF;
  --mdc-select-ink-color:   #314253;
  --mdc-dialog-surface-fill-color: #FFFFFF;
  --mdc-dialog-heading-ink-color:  #1577C2;
  --mdc-dialog-content-ink-color:  #3A4A5A;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════════════════════════ */
html, body {
  background-color: var(--ex-bg) !important;
  color: var(--ex-text) !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK/LIGHT TOGGLE BUTTON
══════════════════════════════════════════════════════════════════════════════ */
/* Botón flotante de tema: oculto — reemplazado por botón inyectado en or-header */
#ex-theme-toggle { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════════════════════ */
or-header {
  --or-header-color:                  var(--ex-surface-lo);
  --or-header-text-color:             var(--ex-accent);
  --or-header-selected-color:         var(--ex-accent);
  --or-header-drawer-color:           var(--ex-surface);
  --or-header-drawer-text-color:      var(--ex-text);
  --or-header-drawer-separator-color: var(--ex-border);
  background-color: var(--ex-surface-lo) !important;
  border-bottom: 1px solid var(--ex-border) !important;
}
or-header .title {
  color: var(--ex-accent) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SIDEBAR / DRAWER
══════════════════════════════════════════════════════════════════════════════ */
or-sidebar, .mdc-drawer, .mdc-drawer__content {
  background-color: var(--ex-surface) !important;
  border-right: 1px solid var(--ex-border) !important;
}
.mdc-drawer .mdc-list-item { color: var(--ex-dim) !important; }
.mdc-drawer .mdc-list-item--activated {
  background-color: var(--ex-accent-bg) !important;
  color: var(--ex-accent) !important;
}
.mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
  color: var(--ex-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════════════════════════ */
.main-content, main, .or-main, [slot="content"] {
  background-color: var(--ex-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PANELS / CARDS
══════════════════════════════════════════════════════════════════════════════ */
or-panel, .panel, .card, mwc-card, .mdc-card {
  background-color: var(--ex-surface) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius) !important;
  box-shadow: var(--ex-shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════════════════════ */
mwc-button[raised], .mdc-button--raised,
mwc-button[unelevated], .mdc-button--unelevated {
  --mdc-theme-primary:    var(--ex-accent);
  --mdc-theme-on-primary: var(--ex-bg);
  /* El segundo color y el halo salen de --ex-accent-2 / --ex-accent-glow, que se
     derivan de la marca del realm (REQ-042). Escritos a mano dejaban el degradado
     azul AFOTECH sobre el color de cualquier cliente. */
  background: linear-gradient(135deg, var(--ex-accent) 0%, var(--ex-accent-2, #007ACC) 100%) !important;
  color: var(--ex-bg) !important;
  border-radius: var(--ex-radius) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px var(--ex-accent-glow, rgba(46,155,224,.25)) !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  font-size: .8rem !important;
}
mwc-button[raised]:hover, .mdc-button--raised:hover,
mwc-button[unelevated]:hover {
  background: linear-gradient(135deg, #00BFFF 0%, #1577C2 100%) !important;
  box-shadow: 0 4px 18px rgba(46,155,224,.40) !important;
}

/* Outline/ghost buttons */
mwc-button:not([raised]):not([unelevated]),
.mdc-button:not(.mdc-button--raised):not(.mdc-button--unelevated) {
  color: var(--ex-accent) !important;
  border-radius: var(--ex-radius) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
mwc-icon-button {
  --mdc-icon-button-size: 36px;
  color: var(--ex-muted) !important;
}
mwc-icon-button:hover { color: var(--ex-accent) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   INPUTS / SELECTS
══════════════════════════════════════════════════════════════════════════════ */
mwc-textfield, mwc-select, mwc-textarea, .mdc-text-field, .mdc-select {
  --mdc-text-field-fill-color:      var(--ex-surface2);
  --mdc-text-field-ink-color:       var(--ex-text);
  --mdc-text-field-label-ink-color: var(--ex-muted);
  --mdc-theme-primary:              var(--ex-accent);
  background-color: var(--ex-surface2) !important;
  border-radius: var(--ex-radius) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
input, textarea, select {
  background-color: var(--ex-surface2) !important;
  color: var(--ex-text) !important;
  border-color: var(--ex-border) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════════════════════════ */
table, .or-data-table {
  background-color: var(--ex-surface) !important;
  color: var(--ex-text) !important;
  border-collapse: collapse !important;
}
th {
  background-color: var(--ex-surface-lo) !important;
  color: var(--ex-accent) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--ex-border) !important;
}
td {
  border-bottom: 1px solid var(--ex-border) !important;
  color: var(--ex-dim) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
tr:hover td { background-color: var(--ex-surface2) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   RULES PAGE
══════════════════════════════════════════════════════════════════════════════ */
or-rule-list, or-rule-viewer, or-rule-editor,
or-rule-then-otherwise, or-rule-condition,
or-rule-action, or-rule-trigger {
  background-color: var(--ex-bg) !important;
  color: var(--ex-text) !important;
  --or-rule-list-background-color:              var(--ex-bg);
  --or-rule-list-item-background-color:         var(--ex-surface);
  --or-rule-list-item-selected-background-color:var(--ex-accent-bg);
  --or-rule-list-text-color:                    var(--ex-text);
  --or-rule-list-header-background-color:       var(--ex-surface-lo);
  --or-panel-background:                        var(--ex-surface);
  --or-panel-heading-color:                     var(--ex-accent);
  --mdc-theme-surface:    var(--ex-surface);
  --mdc-theme-background: var(--ex-bg);
  --mdc-theme-on-surface: var(--ex-text);
}
or-rule-list .rule-item, or-rule-list [class*="rule"] {
  background-color: var(--ex-surface) !important;
  color: var(--ex-text) !important;
  border-color: var(--ex-border) !important;
}
or-rule-editor .layout, or-rule-editor .or-rule-section,
or-rule-editor .rule-section, or-rule-editor .conditions,
or-rule-editor .actions {
  background-color: var(--ex-surface) !important;
  border-color: var(--ex-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════════════════════════════════════════ */
or-app-config, or-provisioning-list,
or-provisioning-config, or-provisioning-user-query {
  background-color: var(--ex-bg) !important;
  color: var(--ex-text) !important;
  --mdc-theme-surface:    var(--ex-surface);
  --mdc-theme-background: var(--ex-bg);
  --mdc-theme-on-surface: var(--ex-text);
}
or-app-config .panel, or-app-config .config-panel,
or-provisioning-config .panel {
  background-color: var(--ex-surface) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MWC LIST
══════════════════════════════════════════════════════════════════════════════ */
mwc-list, mwc-list-item {
  background-color: var(--ex-surface) !important;
  color: var(--ex-text) !important;
  --mdc-theme-surface: var(--ex-surface);
}
mwc-list-item:hover, mwc-list-item[activated] {
  background-color: var(--ex-accent-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CODE / PRE
══════════════════════════════════════════════════════════════════════════════ */
code, pre {
  background-color: var(--ex-surface-lo) !important;
  color: var(--ex-accent) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .85em !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ATTRIBUTE / ASSET FIELDS
══════════════════════════════════════════════════════════════════════════════ */
.attribute-value, .or-attribute-value,
or-attribute-input, or-attribute-field {
  color: var(--ex-text) !important;
  font-family: 'JetBrains Mono', monospace !important;
  --mdc-theme-surface:    var(--ex-surface);
  --mdc-theme-background: var(--ex-bg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ASSET TREE / LIST
══════════════════════════════════════════════════════════════════════════════ */
or-asset-tree, or-asset-viewer, or-asset-list {
  background-color: var(--ex-bg) !important;
  color: var(--ex-text) !important;
  --mdc-theme-surface:    var(--ex-surface);
  --mdc-theme-background: var(--ex-bg);
}
or-asset-tree .node-container, or-asset-tree .tree-node {
  color: var(--ex-dim) !important;
}
or-asset-tree .node-container:hover, or-asset-tree .tree-node:hover {
  background: var(--ex-accent-bg) !important;
}
or-asset-tree .node-container.selected, or-asset-tree .tree-node.selected {
  background: rgba(46,155,224,.18) !important;
  color: var(--ex-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MAP — NO CSS filter here (breaks Chrome WebGL canvas rendering)
   Dark map handled via shadow DOM injector + or-map container color
══════════════════════════════════════════════════════════════════════════════ */
or-map {
  background-color: var(--ex-surface) !important;
}
/* Map controls (light DOM) */
.mapboxgl-ctrl-group, .maplibregl-ctrl-group {
  background-color: var(--ex-surface) !important;
  border: 1px solid var(--ex-border) !important;
  box-shadow: var(--ex-shadow-sm) !important;
}
.mapboxgl-ctrl-group button, .maplibregl-ctrl-group button {
  background-color: var(--ex-surface) !important;
  color: var(--ex-dim) !important;
  border-color: var(--ex-border) !important;
}
.mapboxgl-ctrl-group button:hover, .maplibregl-ctrl-group button:hover {
  background-color: var(--ex-surface2) !important;
}
.mapboxgl-ctrl-attrib, .maplibregl-ctrl-attrib { opacity: .4 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   STATUS BADGES
══════════════════════════════════════════════════════════════════════════════ */
.status-ok, [status="ok"]      { color: var(--ex-green) !important; }
.status-error, [status="error"] { color: var(--ex-red) !important; }
.status-warning, [status="warning"] { color: var(--ex-warn) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   DIALOGS / MODALS
══════════════════════════════════════════════════════════════════════════════ */
mwc-dialog, .mdc-dialog {
  --mdc-dialog-box-shadow:           0 8px 32px rgba(0,0,0,.6);
  --mdc-dialog-surface-fill-color:   var(--ex-surface);
  --mdc-dialog-heading-ink-color:    var(--ex-accent);
  --mdc-dialog-content-ink-color:    var(--ex-dim);
  --mdc-dialog-scroll-divider-color: var(--ex-border);
}
.mdc-dialog__scrim { background: rgba(0,0,0,.72) !important; }
.mdc-dialog .mdc-dialog__surface {
  background-color: var(--ex-surface) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: 12px !important;
}
.mdc-dialog__title  { color: var(--ex-accent) !important; }
.mdc-dialog__content { color: var(--ex-dim) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   SNACKBAR
══════════════════════════════════════════════════════════════════════════════ */
mwc-snackbar, .mdc-snackbar {
  --mdc-snackbar-fill-color:  var(--ex-surface3);
  --mdc-snackbar-label-color: var(--ex-text);
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHIPS
══════════════════════════════════════════════════════════════════════════════ */
mwc-chip, .mdc-chip {
  background-color: var(--ex-surface2) !important;
  color: var(--ex-dim) !important;
  border: 1px solid var(--ex-border) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROGRESS
══════════════════════════════════════════════════════════════════════════════ */
mwc-linear-progress, .mdc-linear-progress {
  --mdc-theme-primary: var(--ex-accent);
}
mwc-circular-progress, .mdc-circular-progress {
  --mdc-circular-progress-bar-color-1: var(--ex-accent);
  --mdc-circular-progress-bar-color-2: var(--ex-green);
  --mdc-circular-progress-bar-color-3: var(--ex-accent);
  --mdc-circular-progress-bar-color-4: var(--ex-green);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOOLTIPS
══════════════════════════════════════════════════════════════════════════════ */
or-tooltip, .tooltip {
  background: var(--ex-surface3) !important;
  color: var(--ex-text) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .78rem !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ex-surface-lo); }
::-webkit-scrollbar-thumb { background: var(--ex-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ex-muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   INSIGHTS / CHARTS
══════════════════════════════════════════════════════════════════════════════ */
or-insights, or-chart, or-data-viewer {
  background-color: var(--ex-bg) !important;
  color: var(--ex-text) !important;
  --mdc-theme-surface:    var(--ex-surface);
  --mdc-theme-background: var(--ex-bg);
  --mdc-theme-on-surface: var(--ex-text);
}
.chart-legend-label, .chart-axis-label, .chart-label {
  color: var(--ex-dim) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════════════════════════ */
or-dashboard-editor, or-dashboard-browser {
  background-color: var(--ex-bg) !important;
  --mdc-theme-surface:    var(--ex-surface);
  --mdc-theme-background: var(--ex-bg);
}
.grid-stack-item-content, .widget-container, .or-dashboard-widget {
  background-color: var(--ex-surface) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ASSET VIEWER ATTRIBUTES PANEL
══════════════════════════════════════════════════════════════════════════════ */
or-asset-viewer .panel-content-wrapper,
or-asset-viewer .attributes-panel,
or-asset-viewer .attribute-row {
  background-color: var(--ex-surface) !important;
  border-color: var(--ex-border) !important;
}

/* TOOLBAR */
.or-toolbar, .toolbar, .search-container {
  background-color: var(--ex-surface-lo) !important;
  border-bottom: 1px solid var(--ex-border) !important;
}

/* PAGINATION */
.mdc-data-table__pagination {
  background-color: var(--ex-surface-lo) !important;
  color: var(--ex-dim) !important;
  border-top: 1px solid var(--ex-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MENU SURFACE
══════════════════════════════════════════════════════════════════════════════ */
.mdc-menu-surface {
  background-color: var(--ex-surface) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: var(--ex-radius) !important;
  box-shadow: var(--ex-shadow) !important;
}
.mdc-menu-surface .mdc-list-item { color: var(--ex-dim) !important; }
.mdc-menu-surface .mdc-list-item:hover {
  background-color: var(--ex-accent-bg) !important;
  color: var(--ex-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EXPANSION / COLLAPSIBLE PANELS
══════════════════════════════════════════════════════════════════════════════ */
.expansion-panel, .expansion-panel-header {
  background-color: var(--ex-surface) !important;
  color: var(--ex-text) !important;
  border-color: var(--ex-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   JSON / CODE EDITORS
══════════════════════════════════════════════════════════════════════════════ */
.json-editor, .code-editor,
textarea[class*="json"], textarea[class*="code"] {
  background-color: var(--ex-bg) !important;
  color: var(--ex-accent) !important;
  border: 1px solid var(--ex-border) !important;
  border-radius: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT CATCH-ALLS (OR renders some pages in light DOM)
══════════════════════════════════════════════════════════════════════════════ */
.layout.vertical, .layout.horizontal {
  background-color: var(--ex-bg) !important;
}
or-translate, or-mwc-input, or-mwc-input .mdc-text-field {
  color: var(--ex-text) !important;
  --mdc-theme-surface:    var(--ex-surface);
  --mdc-theme-background: var(--ex-bg);
  --mdc-theme-on-surface: var(--ex-text);
}
fieldset { border-color: var(--ex-border) !important; background-color: var(--ex-surface) !important; }
legend   { color: var(--ex-muted) !important; background-color: var(--ex-surface) !important; }