/* Deep-blue command-center presentation, on the existing 1600 × 900 canvas.
   Shared visual parameters only; layout, scene geometry and data stay owned
   by their existing modules. No viewport breakpoint or mobile reflow. */
#water-console.deep-blue-command-center {
  --dcc-bg-page: #04112b;
  --dcc-bg-panel: #061831;
  --dcc-bg-secondary: #102f4e;
  --dcc-text-primary: #e7f3fa;
  --dcc-text-secondary: #9ab4c8;
  --dcc-text-panel-title: #e4ddbb;
  --dcc-border-default: #255677;
  --dcc-cyan: #47d4e8;
  --dcc-blue: #529cdd;
  --dcc-chart-primary: #47d4e8;
  --dcc-chart-secondary: #529cdd;
  --dcc-chart-comparison: #e3bd72;
  --dcc-state-normal: #6bd5bc;
  --dcc-state-warning: #f3bc68;
  --dcc-state-critical: #f47f71;
  --dcc-state-unknown: #8b9fb2;
  --console-bg: var(--dcc-bg-page);
  --console-panel: var(--dcc-bg-panel);
  --console-raised: var(--dcc-bg-secondary);
  --console-line: rgba(70, 130, 164, .24);
  --console-text: var(--dcc-text-primary);
  --console-muted: var(--dcc-text-secondary);
  --console-accent: var(--dcc-cyan);
  --console-blue: var(--dcc-blue);
  --console-amber: var(--dcc-state-warning);
  color: var(--dcc-text-primary);
  background: radial-gradient(ellipse at 50% 31%, #102d48 0, rgba(9, 31, 54, .3) 46%, transparent 75%),
    linear-gradient(180deg, #030e23 0, #061830 62%, #06152b 100%) !important;
  font-variant-numeric: tabular-nums;
}

/* Perimeter and title share the same continuous upper edge. */
#water-console.deep-blue-command-center > .console-perimeter {
  background-image: url('./assets/console-perimeter-refined-v2.svg');
}
#water-console.deep-blue-command-center .topbar {
  background: linear-gradient(180deg, rgba(3, 12, 30, .96), rgba(4, 17, 37, .46)) !important;
}
#water-console.deep-blue-command-center .topbar::before {
  background-image: url('./assets/console-title-refined-v2.svg') !important;
}
#water-console.deep-blue-command-center .header-title { top: 21px; }
#water-console.deep-blue-command-center .header-title h1 {
  font-size: 28px !important;
  line-height: 34px;
  letter-spacing: .045em !important;
  color: #e8f7ff !important;
  text-shadow: 0 1px 10px rgba(96, 175, 214, .16) !important;
}
#water-console.deep-blue-command-center .main-nav .nav-item {
  font-size: 15px !important;
  letter-spacing: .12em;
  color: #91afc5;
}
#water-console.deep-blue-command-center .main-nav .nav-item.active {
  color: #ddf7ff !important;
  text-shadow: 0 0 12px rgba(75, 184, 216, .22);
}
#water-console.deep-blue-command-center :is(.icon-button, .dha-trigger, .pilot-entry) {
  border-color: #244b68;
  background: rgba(12, 37, 60, .85);
  box-shadow: none;
}

/* Compact metrics: stable name/value slots, complete units and quiet framing. */
#water-console.deep-blue-command-center .kpi-rail { gap: 12px !important; }
#water-console.deep-blue-command-center .kpi-rail > .kpi-item {
  padding: 6px 16px !important;
  background: transparent !important;
  border: 0 !important;
}
#water-console.deep-blue-command-center .kpi-rail > .kpi-item::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(17, 51, 79, .94), rgba(5, 24, 47, .94)) !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  pointer-events: none;
}
#water-console.deep-blue-command-center .kpi-rail > .kpi-item::after {
  inset: 0;
  z-index: 4;
  border: 12px solid transparent;
  border-image: url('./assets/console-panel-refined-v2.svg') 12 / 12px / 0 stretch;
  opacity: .9;
}
#water-console.deep-blue-command-center .kpi-label {
  min-height: 20px;
  font-size: 14px !important;
  line-height: 16px !important;
  color: #b8cedd !important;
}
#water-console.deep-blue-command-center .kpi-label > span:first-child {
  line-height: 16px !important;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
#water-console.deep-blue-command-center .kpi-value {
  min-width: 0;
  margin-top: 0 !important;
  gap: 8px !important;
  align-items: baseline;
}
#water-console.deep-blue-command-center .kpi-value strong {
  font-size: 32px !important;
  line-height: 32px !important;
  color: #e7f6ff !important;
  text-shadow: none !important;
  letter-spacing: -.015em !important;
}
#water-console.deep-blue-command-center .kpi-value span {
  font-size: 13px !important;
  color: #9ebace !important;
  line-height: 18px !important;
}
#water-console.deep-blue-command-center .alarm-kpi .kpi-value strong { color: var(--dcc-state-warning) !important; }
#water-console.deep-blue-command-center .kpi-alarm-body { gap: 8px !important; }
#water-console.deep-blue-command-center .kpi-alarm-breakdown {
  display: grid !important;
  grid-template-columns: 1fr;
  margin-top: 0 !important;
  gap: 0 !important;
  line-height: 16px;
  align-content: center;
}
#water-console.deep-blue-command-center .kpi-alarm-breakdown span { white-space: nowrap; line-height: 16px !important; }
#water-console.deep-blue-command-center .kpi-alarm-breakdown b { line-height: 16px !important; }
#water-console.deep-blue-command-center .energy-grade-mark { gap: 10px; }
#water-console.deep-blue-command-center .energy-grade-mark strong {
  width: 32px;
  height: 32px;
  font-size: 25px;
  color: var(--dcc-state-normal);
  border-color: #327b7e;
  background: rgba(36, 116, 117, .12);
  box-shadow: none !important;
}
#water-console.deep-blue-command-center .energy-grade-mark span { color: #a5dcd1; background: rgba(62, 138, 124, .14); }

/* One eight-pixel corner language for every business panel; no scene frame. */
#water-console.deep-blue-command-center :is(.panel, .ops-panel)::before {
  background: linear-gradient(130deg, rgba(14, 43, 66, .22), transparent 65%), rgba(4, 19, 39, .94) !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
#water-console.deep-blue-command-center :is(.panel, .ops-panel)::after {
  border: 12px solid transparent;
  border-image: url('./assets/console-panel-refined-v2.svg') 12 / 12px / 0 stretch;
  opacity: .9;
}
#water-console.deep-blue-command-center :is(.panel-heading, .ops-panel-head) {
  height: 34px !important;
  min-height: 34px !important;
  flex-basis: 34px !important;
  padding: 0 12px !important;
  gap: 8px;
  box-sizing: border-box;
  background: linear-gradient(100deg, #123654, rgba(11, 35, 57, .65) 72%, rgba(7, 26, 45, .4)) !important;
  border-bottom: 1px solid rgba(61, 123, 156, .25) !important;
  flex-wrap: nowrap;
}
#water-console.deep-blue-command-center :is(.panel-heading, .ops-panel-head) h2 {
  color: var(--dcc-text-panel-title) !important;
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: 600 !important;
  letter-spacing: .035em !important;
  text-shadow: none !important;
  white-space: nowrap;
}
#water-console.deep-blue-command-center[data-page="energy"] .page-workspace .ops-panel-head h2 {
  font-size: 16px !important;
  line-height: 22px !important;
}
#water-console.deep-blue-command-center :is(.panel-heading, .ops-panel-head) h2::before {
  width: 3px;
  height: 13px;
  margin-right: 8px;
  background: #4ca8c3;
  box-shadow: 4px 0 0 rgba(75, 145, 172, .15);
}
#water-console.deep-blue-command-center :is(.panel-link, .ghost-select, .source-pill, .count-badge) { color: #aac5d7; }
#water-console.deep-blue-command-center :is(.normal-pill, .saving-pill) {
  color: #8fe0d1;
  border-color: rgba(78, 158, 157, .35);
  background: rgba(40, 105, 112, .14);
}
#water-console.deep-blue-command-center :is(.quality-row, .parameter, .order-row, .ops-table) { color: #c3d5e2; }
#water-console.deep-blue-command-center :is(.quality-head, .order-head, .ops-table th) {
  color: #8faec4;
  background: rgba(26, 64, 87, .13);
  font-weight: 400;
}
#water-console.deep-blue-command-center :is(.quality-row, .parameter, .order-row, .ops-table td) {
  border-bottom-color: rgba(64, 110, 139, .14);
  font-variant-numeric: tabular-nums;
}
#water-console.deep-blue-command-center :is(.quality-row, .order-row, .ops-table tbody tr):hover { background: rgba(36, 106, 143, .12); }
#water-console.deep-blue-command-center .health-grid { border-top-color: rgba(62, 119, 151, .24); }
#water-console.deep-blue-command-center .donut::before,
#water-console.deep-blue-command-center .ops-donut::before { background: #071d35 !important; box-shadow: none !important; }
#water-console.deep-blue-command-center .alarm-item { border-bottom-color: rgba(64, 110, 139, .16); }
#water-console.deep-blue-command-center .alarm-item b { color: #d7e5ee; font-weight: 500; }
#water-console.deep-blue-command-center .alarm-item small { color: #8faabd; }
#water-console.deep-blue-command-center .view-all { color: #abc6d8; border-color: #24465f; background: rgba(16, 47, 72, .3); }

/* Shared chart palette: series colors remain separate from alarm semantics. */
#water-console.deep-blue-command-center :is(.grid-lines, .i2-chart-grid, .energy-v10-grid) { stroke: rgba(115, 153, 176, .14) !important; }
#water-console.deep-blue-command-center :is(.chart-axis, .i2-chart-axis, .energy-v10-axis, .energy-v10-limit-label) { fill: #93b0c5 !important; }
#water-console.deep-blue-command-center :is(.teal-series, .energy-v10-series.is-energy) { stroke: var(--dcc-chart-primary) !important; filter: none; }
#water-console.deep-blue-command-center :is(.blue-series, .energy-v10-series.is-water) { stroke: var(--dcc-chart-secondary) !important; }
#water-console.deep-blue-command-center :is(.amber-series, .energy-v10-limit) { stroke: var(--dcc-chart-comparison) !important; }
#water-console.deep-blue-command-center .energy-v10-point.is-energy { fill: var(--dcc-chart-primary); }
#water-console.deep-blue-command-center .energy-v10-point.is-water { fill: var(--dcc-chart-secondary); }
#water-console.deep-blue-command-center .i2-series.primary { color: var(--dcc-chart-primary); }
#water-console.deep-blue-command-center .i2-series.primary polyline { stroke: var(--dcc-chart-primary); }
#water-console.deep-blue-command-center .i2-series.secondary polyline { stroke: var(--dcc-chart-secondary); }
#water-console.deep-blue-command-center .i2-series.primary circle { fill: var(--dcc-chart-primary); }
#water-console.deep-blue-command-center .i2-series.secondary circle { fill: var(--dcc-chart-secondary); }
#water-console.deep-blue-command-center .pilot-chart-tooltip { border-color: #3a7895; color: #e7f3fa; background: #0a233c; }
#water-console.deep-blue-command-center .pilot-chart-empty { color: #abc3d3; }

/* Existing energy nodes and selected controls retain their hit areas. */
#water-console.deep-blue-command-center :is(.energy-node, .energy-source, .energy-output) {
  background: linear-gradient(110deg, rgba(20, 62, 91, .96), rgba(7, 29, 53, .94)) !important;
  border-color: #285572 !important;
  box-shadow: inset 2px 0 rgba(72, 155, 182, .7) !important;
}
#water-console.deep-blue-command-center .energy-node.active {
  border-color: #4aabc5 !important;
  background: linear-gradient(90deg, #194e6c, #0e304c) !important;
  box-shadow: inset 3px 0 #63d5e5 !important;
}
#water-console.deep-blue-command-center .energy-node span { color: #c1deed; }
#water-console.deep-blue-command-center .energy-node b { color: #e3f1fa; }
#water-console.deep-blue-command-center .energy-source strong,
#water-console.deep-blue-command-center .energy-output strong { color: #dceefa; font-size: 17px !important; }
#water-console.deep-blue-command-center .energy-unit-row.active {
  border-color: rgba(63, 148, 179, .6) !important;
  background: rgba(29, 93, 123, .2) !important;
}
#water-console.deep-blue-command-center :is(.segmented, .ui-range-menu, .ui-popover) { border-color: #2b526e; background: #071c34; }
#water-console.deep-blue-command-center .segmented button { color: #91adc1; }
#water-console.deep-blue-command-center .segmented button.active {
  color: #e0f7ff !important;
  background: #1c506c !important;
  box-shadow: inset 0 0 0 1px #4084a0 !important;
}
#water-console.deep-blue-command-center .energy-decision-card {
  border-color: #2c4b65 !important;
  background: rgba(14, 36, 57, .78) !important;
}
#water-console.deep-blue-command-center[data-page="energy"] .page-workspace .energy-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  white-space: nowrap;
}
#water-console.deep-blue-command-center[data-page="energy"] .page-workspace .energy-callout span { margin-top: 0; }
#water-console.deep-blue-command-center :is(.stat-box, .mini-metric, .energy-v10-insight-rail) {
  background: rgba(15, 46, 68, .45) !important;
  border-color: rgba(64, 113, 146, .4) !important;
}

/* The model remains a full-screen interactive backdrop. */
#water-console.deep-blue-command-center .plant-label {
  background: rgba(6, 25, 44, .94) !important;
  border-color: rgba(60, 133, 165, .72) !important;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0, 7, 18, .2) !important;
}
#water-console.deep-blue-command-center .plant-label__name { color: #dfedf4; }
#water-console.deep-blue-command-center .plant-label__metric { color: #9fc1d3; }
#water-console.deep-blue-command-center .scene-toolbar { border-color: #2c5571 !important; background: rgba(5, 25, 45, .9) !important; }

/* Raised surfaces match the console while preserving native focus and scale. */
#water-console.deep-blue-command-center :is(.dha-panel, .ui-detail-drawer, .pilot-workflow-dialog, .pilot-experience-dialog) {
  background: #071b32 !important;
  border-color: #346984 !important;
  box-shadow: 0 14px 44px rgba(0, 5, 14, .48) !important;
}
#water-console.deep-blue-command-center :is(.dha-panel__header, .pilot-dialog-head, .pilot-workflow-head, .ui-drawer-head) {
  background: linear-gradient(100deg, #123654, #0b233c) !important;
  border-bottom-color: #2b526c;
}
#water-console.deep-blue-command-center :is(button, a, [role="button"], input, select):focus-visible {
  outline-color: #92e4ec !important;
  outline-width: 2px !important;
}