/* EMI Energy theme. Typography follows the supplied SCADA HTML: Segoe UI
   for labels, Bahnschrift/Arial Narrow for values, with its original fallbacks.
   Author-supplied graphics keep their own colours inside the isolated runtime. */
:root,
:root[data-theme="dark"] {
  --brand-cobalt: #2c4693;
  --brand-cyan: #00adef;
  --brand-font: "Segoe UI", Arial, sans-serif;
  --brand-number-font: Bahnschrift, "Arial Narrow", Arial, sans-serif;
  --shell-bg: #101a2d;
  --bg: #101a2d;
  --surface: #18243a;
  --surface2: #122138;
  --surface-soft: #203149;
  --text: #e6edf7;
  --muted: #97a6bc;
  --line: #2a374e;
  --control-line: #5f748f;
  --accent: #18bfea;
  --accent-hover: #67ddf7;
  --accent-soft: #132d43;
  --good: #57bd91;
  --bad: #f47780;
  --yellow: #e6b65e;
  --warning-text: #e6b65e;
  --limited: #c5a4f6;
  --success-soft: #17372e;
  --warning-soft: #38342b;
  --danger-soft: #3b2332;
  --notice-soft: #142a40;
  --shadow: 0 3px 14px #030a171c;
  --control-height: 36px;
  color-scheme: dark;
}
:root[data-theme="basic"] {
  --shell-bg: #09182B;
  --shell-gradient: linear-gradient(120deg, #09182B 0%, #10253E 100%);
  --bg: #071426;
  --surface: #0b1a2d;
  --surface2: #0d2035;
  --surface-soft: #122940;
  --text: #e7edf6;
  --muted: #a2b1c4;
  --line: #263a50;
  --control-line: #536e88;
  --accent: #18BFEA;
  --accent-hover: #67DDF7;
  --accent-soft: #102e44;
  --success-soft: #142e2a;
  --warning-soft: #342e24;
  --danger-soft: #352331;
  --notice-soft: #112940;
  --shadow: 0 4px 12px #02091655;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --shell-bg: #2c4693;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface2: #f5f7fb;
  --surface-soft: #edf2fb;
  --text: #23344b;
  --muted: #617087;
  --line: #dce3ed;
  --control-line: #7b8ba3;
  --accent: #285399;
  --accent-hover: #213a80;
  --accent-soft: #edf4fc;
  --good: #14765b;
  --bad: #b93f4b;
  --yellow: #966b12;
  /* The brand yellow needs a slightly darker text variant on the grey canvas. */
  --warning-text: #8d6411;
  --limited: #7143a3;
  --success-soft: #eaf5ef;
  --warning-soft: #fff4df;
  --danger-soft: #fbecef;
  --notice-soft: #edf4fc;
  --shadow: 0 3px 14px #213a6506;
  color-scheme: light;
}
/* Aliases preserve the contracts of the original SCADA, market and chart views. */
:root {
  --ink: var(--text);
  --canvas: var(--bg);
  --white: var(--surface);
  --forest: var(--shell-bg);
  --mint: var(--success-soft);
  --green: var(--good);
  --red: var(--bad);
  --amber: var(--warning-text);
  --surface-2: var(--surface2);
  --background: var(--bg);
  --panel: var(--surface);
  --border: var(--line);
  font-family: var(--brand-font);
  color: var(--text);
  background: var(--bg);
}
body { background: var(--bg); color: var(--text); }
button, input, select, textarea { font-family: inherit; }
:root[data-theme="basic"] :is(.sidebar,.topbar) {
  background: var(--shell-gradient);
  border-color: var(--line);
}
:root[data-theme="basic"] .nav a:hover,
:root[data-theme="basic"] .nav a.active { background: var(--accent-soft); color: var(--accent-hover); }
:root[data-theme="basic"] :is(.btn,.sidebar-toggle,.theme-toggle):hover:not(:disabled) {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}
:root[data-theme="basic"] .btn.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: #071426;
}
:is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.card, dialog, .dashboard-widget, .dashboard-widget > .card-head,
.view-actions-menu > div, .plant-search-results {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
dialog::backdrop { background: #06101dc4; }
.graphic-frame { background: var(--surface); }
.card, .dashboard-widget { box-shadow: var(--shadow); }
.section-label, .object-name, .installation-link, .form-context-name,
.plant-facts dd, .alarm-summary strong, .status-strip strong, .empty-state strong,
.kpi-value, .dialog-facts dd, .emi-signal-name { color: var(--text); }
.field label, .object-meta, .layout-status, .layout-caption > span, .widget-add label,
.page-footer, .toolbar-note, .metric-note, .legend, .alarm-copy p, .alarm-copy time,
.plant-facts dt, .empty-state, .attention-control, .alarm-lifecycle,
.kpi-top, .kpi-footer, .kpi-value span, .emi-cell-unknown, .emi-sub-unit,
.emi-limit-line > span:first-child, .emi-fleet-details dt,
.emi-fleet-row td::before, .emi-fleet-group td, .emi-fleet-state.neutral,
.emi-operation-tile.unavailable .emi-operation-value, .emi-operation-title svg {
  color: var(--muted);
}
.data-table th { background: var(--surface2); color: var(--muted); border-color: var(--line); }
.data-table td { color: var(--text); border-color: var(--line); }
.data-table tbody tr.clickable:hover, .shelved-row, .dialog-facts div,
.status-strip, .alarm-summary, .plant-context, .tile-editor-grid .binding-row {
  background: var(--surface2);
  border-color: var(--line);
}
.dialog-head button { color: var(--muted); }
.nav-label, .brand small, .sidebar-footer, .topbar-brand small { color: var(--muted); }
.inline-editor-footer, .tile-preview-panel #widget-live-preview,
.installation-layout-tabs, .emi-fleet-group span { border-color: var(--line); }

/* A shared 36 px control height leaves textareas and compact drawing handles alone. */
.btn, .sidebar-toggle, .theme-toggle, .logout, .mobile-logout,
.installation-layout-tabs > button, .tab, .dialog-head > button,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.field select, .widget-add select, input.emi-search,
.emi-map-toolbar select, .emi-map-toolbar input.emi-search,
.emi-chart-engine button, .emi-chart-engine select,
.emi-chart-engine input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  height: var(--control-height);
  min-height: var(--control-height);
  box-sizing: border-box;
}
.btn, .theme-toggle, .installation-layout-tabs > button, .tab, .logout, .mobile-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.25;
  padding: 0 11px;
}
.sidebar-toggle { width: var(--control-height); }
.btn {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--control-line);
}
.btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #071d2d; }
:root[data-theme="light"] .btn.primary { background: var(--brand-cobalt); border-color: var(--brand-cobalt); color: #ffffff; }
:root[data-theme="light"] .btn.primary:hover:not(:disabled) { background: #213a80; }
.btn.danger { background: var(--danger-soft); color: var(--bad); border-color: var(--bad); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.field select, .field textarea, .widget-add select, input.emi-search,
.emi-market .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.emi-market .field select, .emi-market .field textarea,
.emi-chart-engine input:not([type="checkbox"]), .emi-chart-engine select,
.emi-map-toolbar select, .emi-map-toolbar input.emi-search {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--control-line);
  border-radius: 5px;
  padding: 0 10px;
  color-scheme: inherit;
}
.field textarea, .emi-market .field textarea { height: auto; padding: 10px; }
.field input::placeholder, .field textarea::placeholder, input.emi-search::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus, input.emi-search:focus { border-color: var(--accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.emi-market input[type="date"] { color-scheme: inherit; }
.emi-chart-engine button { background: var(--surface2); color: var(--text); border-color: var(--control-line); }
.emi-chart-engine button:is(.selected,.active) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.emi-signal-picker .emi-search { height: var(--control-height); min-height: var(--control-height); }
.emi-signal-picker .emi-search input { height: 34px; padding: 0; border: 0; background: transparent; color: var(--text); }
.emi-signal-select { padding: 0 8px !important; }
.binding-row > button { width: 24px; min-width: 24px; padding: 0; }

/* Plant context stays beside the installation heading and actions. */
.operations-header { min-height: var(--control-height); align-items: center; }
.operations-header h1 { margin: 0; line-height: 1.3; }
.operations-header .heading-actions { align-items: center; gap: 8px; min-width: 0; }
#plant-context-search { flex: 0 1 300px; width: 300px; min-width: 180px; max-width: 100%; }
#plant-context-search .topbar-plant { width: 100%; min-width: 0; }
#plant-context-search input { height: var(--control-height); width: 100%; min-width: 0; font-size: 11px; }
.plant-search-results button { color: var(--text); }
.plant-search-results button small { color: var(--muted); }
.plant-search-results button:hover, .plant-search-results button:focus,
.plant-search-results button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.installation-layout-tabs { background: transparent; }
.installation-layout-tabs button { color: var(--muted); }
.installation-layout-tabs button:hover { color: var(--text); background: var(--surface2); }
.installation-layout-tabs button.active, .tabs .tab.active { background: var(--accent-soft); color: var(--accent); }
.tabs { background: var(--surface2); }
.tab { color: var(--muted); }
.widget-tools button { color: var(--accent); background: var(--surface2); border-color: var(--line); }
.widget-item { color: var(--text); }
.widget-item small, .widget-item b, .binding-path { color: var(--muted); }
.widget-item.active { background: var(--accent-soft); border-color: var(--accent); }
.notice, .catalogue-workflow, .inline-result { background: var(--notice-soft); color: var(--text); border-color: var(--line); }
.inline-result.error, .widget-control-warning, .network-banner, .toast.error {
  background: var(--danger-soft); color: var(--bad); border-color: var(--bad);
}
.toast { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }

/* In the light theme the corporate cobalt rail retains the authentic white logo. */
:root[data-theme="light"] :is(.sidebar,.topbar) {
  --text: #ffffff;
  --muted: #dae5ff;
  --line: #6a80b6;
  --accent: #84dfff;
  --surface2: #3a56a0;
  --accent-soft: #3a56a0;
  --control-line: #8ea2d1;
  --green: #79d6b6;
  background: var(--shell-bg);
  color: var(--text);
  box-shadow: none;
}
:root[data-theme="light"] .topbar { border-bottom-color: #6a80b6; }
:root[data-theme="light"] .sidebar { border-right-color: #6a80b6; }
:root[data-theme="light"] :is(.nav-label,.brand small,.sidebar-footer,.topbar-brand small,.breadcrumb,.breadcrumb span,.date-tag,.logout,.mobile-logout) { color: #dae5ff; }
:root[data-theme="light"] :is(.sidebar-footer strong,.breadcrumb b,.user-menu strong,.user-menu small) { color: #ffffff; }
:root[data-theme="light"] .nav a { color: #e6eeff; }
:root[data-theme="light"] .nav a:hover { background: #3a56a0; color: #ffffff; }
:root[data-theme="light"] .nav a.active { background: #3a56a0; color: #ffffff; border-left-color: #84dfff; }
:root[data-theme="light"] .nav .count { color: #ffffff; background: #3a56a0; border-color: #8ea2d1; }
:root[data-theme="light"] :is(.simulation-pill,.avatar) { color: #ffffff; background: #3a56a0; border-color: #8ea2d1; }
:root[data-theme="light"] .topbar :is(.btn,.sidebar-toggle) { color: #ffffff; background: transparent; border-color: #8ea2d1; }
:root[data-theme="light"] .topbar :is(.btn,.sidebar-toggle):hover { background: #3a56a0; }
:root[data-theme="light"] .topbar-brand small { border-left-color: #8ea2d1; }
:root[data-theme="light"] .connection-chip { color: #dae5ff; }
:root[data-theme="light"] .connection-chip.offline { color: #ffffff; }

/* Semantic colours are intentionally quieter than navigation accents. */
.quality { color: var(--accent); background: var(--accent-soft); border-color: var(--control-line); }
.quality.bad { color: var(--bad); background: var(--danger-soft); border-color: var(--bad); }
.quality.warning { color: var(--warning-text); background: var(--warning-soft); border-color: var(--yellow); }
.quality.unknown, .is-offline .quality:not(.bad) { color: var(--muted); background: var(--surface2); border-color: var(--control-line); }
.badge, .kpi-state { color: var(--accent); background: var(--accent-soft); border-color: var(--control-line); }
.kpi-state.bad { background: var(--surface2); }
.kpi-state.bad, .kpi.offline .kpi-value, .neutral, .is-offline .live-value { color: var(--muted); }
.alarm-marker { color: var(--warning-text); background: var(--warning-soft); }
.alarm-marker.critical, .alarm-counter.has-alarms, .alarm-count.has-alarms,
.emi-fleet-alarm.has-alarms { color: var(--bad); background: var(--danger-soft); border-color: var(--bad); }
.alarm-lifecycle.active, .severity.warning { color: var(--warning-text); }
.severity.critical { color: var(--bad); }
.severity.info { color: var(--accent); }
.switch-state.normal { color: var(--good); background: var(--success-soft); border-color: var(--good); }
.switch-state.neutral, .alarm-counter, .alarm-count, .emi-fleet-alarm {
  color: var(--muted); background: var(--surface2); border-color: var(--control-line);
}
.plant-state { background: var(--surface2); }
.emi-operation-tile:is(button):hover { background: var(--surface2); border-color: var(--control-line); }
.emi-operation-tile.good .emi-operation-value, .emi-fleet-state.good, .emi-signal-quality.good { color: var(--good); }
.emi-operation-tile.live .emi-operation-value { color: var(--text); }
.emi-operation-tile.warning .emi-operation-value, .emi-operation-tile.warning .emi-operation-title svg,
.emi-fleet-state.warning, .emi-cell-warning, .emi-signal-quality.warning { color: var(--warning-text); }
.emi-operation-tile.danger .emi-operation-value, .emi-operation-tile.danger .emi-operation-title svg,
.emi-fleet-state.danger, .emi-signal-quality.bad { color: var(--bad); }
.emi-operation-tile.limitation-active .emi-operation-value, .emi-operation-tile.limitation-active .emi-operation-title svg,
.emi-fleet-state.limited, .emi-cell-limited { color: var(--limited); }
.emi-cell-normal { color: var(--text); }
.emi-operation-tile.partial > small { color: var(--muted); }
.emi-quality-dot.good { background: var(--good); }
.emi-quality-dot.warning { background: var(--yellow); }
.emi-fleet-expand, .emi-fleet-name:hover { color: var(--accent); }
.emi-operation-tile.warning { border-top-color: var(--yellow); }
.emi-operation-tile.danger { border-top-color: var(--bad); }
.emi-operation-tile.limitation-active { border-top-color: var(--limited); }
.emi-operation-tile.warning .emi-utilization-track > i { background: var(--yellow); }
.emi-operation-tile.danger .emi-utilization-track > i { background: var(--bad); }
.emi-operation-tile.limitation-active .emi-utilization-track > i { background: var(--limited); }
:root[data-theme="light"] .emi-fleet-row.warning,
:root[data-theme="light"] .emi-fleet-row.warning td:first-child { border-left-color: var(--yellow); }
:root[data-theme="light"] .emi-fleet-row.danger,
:root[data-theme="light"] .emi-fleet-row.danger td:first-child { border-left-color: var(--bad); }
:root[data-theme="light"] .emi-fleet-row.limited,
:root[data-theme="light"] .emi-fleet-row.limited td:first-child { border-left-color: var(--limited); }

/* Signal catalogue and picker retain their hierarchy without dark-only plates. */
.emi-signal-picker { color: var(--text); background: var(--surface); border-color: var(--control-line); }
.emi-signal-picker-heading h3 { color: var(--text); }
.emi-signal-picker-heading p, .emi-signal-picker-footer > span,
.emi-signal-table small, .emi-signal-name > span, .emi-signal-device small,
.emi-signal-empty, .emi-signal-measurement.is-unavailable { color: var(--muted); }
.emi-signal-path { color: var(--muted) !important; }
.emi-signal-picker code, .emi-signal-results-heading strong,
.emi-signal-site.is-selected > span, .emi-signal-device.is-selected .emi-signal-device-icon { color: var(--accent); }
.emi-signal-picker .emi-search { background: var(--surface2); border-color: var(--control-line); color: var(--muted); }
.emi-signal-picker .emi-search input::placeholder { color: var(--muted); }
.emi-signal-picker-body, .emi-signal-device-list, .emi-signal-table td,
.emi-signal-tree, .emi-signal-picker-footer { border-color: var(--line); }
.emi-signal-tree, .emi-signal-results-heading, .emi-signal-picker-footer, .emi-signal-table th {
  color: var(--muted); background: var(--surface2); border-color: var(--line);
}
.emi-signal-site, .emi-signal-device { color: var(--text); }
.emi-signal-site > span, .emi-signal-device-icon { color: var(--muted); }
.emi-signal-site > em, .emi-signal-device > em { background: var(--surface-soft); color: var(--muted); }
.emi-signal-site:hover, .emi-signal-device:hover { background: var(--surface-soft); }
.emi-signal-site.is-selected, .emi-signal-device.is-selected, .emi-signal-table tr.is-selected { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.emi-signal-measurement { color: var(--text); }
.emi-signal-quality { color: var(--muted); }
.emi-signal-name:hover { color: var(--accent); }

/* Map tiles keep their selected cartographic style. Only surrounding UI changes. */
.emi-map-legend { background: var(--surface2); color: var(--muted); border-color: var(--line); }
.emi-map-legend .good, .emi-map-status.good { color: var(--good); }
.emi-map-legend .warning, .emi-map-status.warning { color: var(--warning-text); }
.emi-map-legend .danger, .emi-map-status.danger { color: var(--bad); }
.emi-map-legend .limited, .emi-map-status.limited { color: var(--limited); }
.emi-map-legend .neutral, .emi-map-status.neutral, .emi-map-site-row > small,
.emi-map-popup-site small { color: var(--muted); }
.emi-map-canvas .leaflet-control-zoom a { background: var(--surface); color: var(--text); border-color: var(--control-line); }
.emi-map-canvas .leaflet-control-zoom a:hover { background: var(--accent-soft); color: var(--accent); }
.emi-map-canvas .leaflet-control-attribution { background: var(--surface); color: var(--muted); }
.emi-map-canvas .leaflet-control-attribution a, .emi-map-open { color: var(--accent); }
.emi-map-canvas .leaflet-tooltip, .emi-map-canvas .leaflet-popup-content-wrapper,
.emi-map-canvas .leaflet-popup-tip { background: var(--surface); color: var(--text); border-color: var(--control-line); }
.emi-map-canvas .leaflet-tooltip-top::before { border-top-color: var(--control-line); }
.emi-map-canvas .leaflet-popup-close-button { color: var(--muted); }
.emi-map-network { color: var(--warning-text); background: var(--warning-soft); border-color: var(--yellow); }
.emi-map-network.is-disconnected { color: var(--muted); background: var(--surface2); border-color: var(--control-line); }
.emi-market-stats strong, .emi-market summary { color: var(--accent); }
.emi-market-error { background: var(--danger-soft); color: var(--bad); border-color: var(--bad); }
.emi-market-warning { color: var(--warning-text) !important; }

/* The sign-in panel is deliberately light in both operating themes. */
.auth-box > p, .auth-box .field label, .auth-box .field small, .auth-box .auth-foot { color: #617087; }
.auth-box .field input { color: #23344b; background: #ffffff; border-color: #7b8ba3; color-scheme: light; }
.auth-box .field input::placeholder { color: #617087; }
.auth-box .btn.primary { background: #2c4693; border-color: #2c4693; color: #ffffff; }
.auth-box .btn.primary:hover:not(:disabled) { background: #213a80; }
.auth-box .simulation-pill { color: #285399; background: #edf4fc; border-color: #dce3ed; }
@media (max-width: 900px) {
  #plant-context-search { flex-basis: 240px; width: 240px; }
}
@media (max-width: 600px) {
  .operations-header { gap: 8px; }
  .operations-header .heading-actions { width: 100%; margin-left: 0; gap: 6px; }
  #plant-context-search { flex: 1 1 100%; width: 100%; min-width: 0; }
  .operations-header .btn { height: var(--control-height); min-height: var(--control-height); padding: 0 9px; }
  .topbar .theme-toggle { font-size: 10px; padding: 0 8px; }
}