/* Typography is specified in the shared desktop canvas coordinates.
 * The canvas scales as a unit on smaller screens; no mobile reflow lives here.
 */

/* Overview panels: separate primary values, labels and supporting metadata. */
#water-console .dashboard-shell .panel-heading h2,
#water-console[data-page] .page-workspace .ops-panel-head h2,
#water-console[data-page="quality"] .qv10-panel .qv10-panel-head h2 {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

#water-console .dashboard-shell .panel :is(.normal-pill, .saving-pill, .count-badge, .warning-count, .panel-link, .ghost-select, .view-all),
#water-console .dashboard-shell .panel .chart-legend,
#water-console .dashboard-shell .panel .bar-axis {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#water-console .dashboard-shell :is(.quality-row, .parameter, .order-row) {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#water-console .dashboard-shell .parameter b {
  font-size: 13px !important;
}

#water-console .dashboard-shell :is(.quality-head, .order-head) {
  font-size: 12px !important;
}

#water-console .dashboard-shell .panel :is(small, .parameter em, .energy-totals em, .sludge-main em),
#water-console .dashboard-shell .panel :is(.health-grid span, .energy-totals > div > span, .sludge-main > div > span, .sludge-stats span, .moisture > span),
#water-console .dashboard-shell .donut span {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

#water-console .dashboard-shell .donut-legend :is(span, b) {
  font-size: 13px !important;
  line-height: 16px !important;
}

#water-console .dashboard-shell .health-grid {
  flex-basis: 38px;
}

#water-console .dashboard-shell .health-grid strong,
#water-console .dashboard-shell .sludge-stats b {
  font-size: 14px !important;
  line-height: 18px !important;
}

#water-console .dashboard-shell .alarm-item b {
  font-size: 13px !important;
  line-height: 18px !important;
}

#water-console .dashboard-shell .alarm-item :is(small, em) {
  font-size: 12px !important;
  line-height: 16px !important;
}

#water-console .dashboard-shell .energy-totals strong {
  font-size: 18px !important;
  line-height: 1.3;
}

/* Reusable subpage controls, records, legends, values and units. */
#water-console[data-page] .page-workspace :is(.source-pill, .status-pill, .severity-pill, .filter-chip, .mini-action, .primary-action, .text-button),
#water-console[data-page] .page-workspace .ops-panel :is(.filter-chip, .mini-action, .primary-action, .text-button),
#water-console[data-page] .page-workspace .segmented button,
#water-console[data-page] .page-workspace :is(.legend-row, .heatmap-label, .chart-note, .inline-meta),
#water-console[data-page] .page-workspace .stat-box > span,
#water-console[data-page] .page-workspace small {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#water-console[data-page] .page-workspace :is(.control-row, .bar-row, .metric-row),
#water-console[data-page] .page-workspace :is(.control-row b, .bar-row strong, .metric-row strong),
#water-console[data-page] .page-workspace .control-row > span:not(.status-pill),
#water-console[data-page] .page-workspace .notice-copy b {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#water-console[data-page] .page-workspace .notice-copy :is(p, small) {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#water-console[data-page] .page-workspace .ops-table :is(th, td, td strong) {
  font-size: 13px !important;
  line-height: 18px !important;
}

#water-console[data-page] .page-workspace .ops-table th {
  font-size: 12px !important;
}

#water-console[data-page] .page-workspace .donut :is(span, small),
#water-console[data-page] .page-workspace .ops-donut :is(span, small),
#water-console[data-page] .page-workspace .donut-legend :is(div, span, b),
#water-console[data-page] .page-workspace .step-progress span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Process diagram and linked trend summary. */
#water-console[data-page="process"] .page-workspace .process-node :is(b, span, small),
#water-console[data-page="process"] .page-workspace .return-line span,
#water-console[data-page="process"] .page-workspace .process-range-readout,
#water-console[data-page="process"] .page-workspace .process-range-readout b,
#water-console[data-page="process"] .page-workspace .pq-process-trend-summary :is(span, p, em, b, small) {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Quality uses its own component set rather than the shared ops panels. */
#water-console[data-page="quality"] .qv10-filter > span,
#water-console[data-page="quality"] .qv10-control,
#water-console[data-page="quality"] .qv10-panel :is(.qv10-head-status, .qv10-head-badge, .qv10-mini-legend, .qv10-heat-label, .qv10-chart-note),
#water-console[data-page="quality"] .qv10-panel .qv10-heat-dates,
#water-console[data-page="quality"] .qv10-panel .qv10-heat-dates span,
#water-console[data-page="quality"] .qv10-panel .qv10-chart-callout :is(span, small),
#water-console[data-page="quality"] .qv10-panel .qv10-primary-metric > small,
#water-console[data-page="quality"] .qv10-panel .qv10-primary-value small,
#water-console[data-page="quality"] .qv10-panel .qv10-risk-copy p,
#water-console[data-page="quality"] .qv10-panel .qv10-recommendation p,
#water-console[data-page="quality"] .qv10-panel .qv10-primary-button,
#water-console[data-page="quality"] .qv10-panel :is(.qv10-tabs, .qv10-range-tabs) button {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#water-console[data-page="quality"] .qv10-panel .qv10-evidence-item,
#water-console[data-page="quality"] .qv10-panel .qv10-evidence-item strong,
#water-console[data-page="quality"] .qv10-panel .qv10-table :is(th, td, strong) {
  font-size: 13px !important;
  line-height: 18px !important;
}

#water-console[data-page="quality"] .qv10-panel .qv10-table th {
  font-size: 12px !important;
}

/* Device status, pins and diagnosis. */
#water-console[data-page="devices"] .page-workspace .device-pin :is(b, span),
#water-console[data-page="devices"] .page-workspace .device-status-ring span,
#water-console[data-page="devices"] .page-workspace .device-status-list :is(div, span, b),
#water-console[data-page="devices"] .page-workspace .device-map-legend span,
#water-console[data-page="devices"] .page-workspace .device-fault-path span,
#water-console[data-page="devices"] .page-workspace .workorder-stage-strip span,
#water-console[data-page="devices"] .page-workspace .v10-device-decision .stat-box :is(span, small) {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#water-console[data-page="devices"] .page-workspace .v10-device-decision .stat-box strong {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Energy flow keeps the measured quantities and their units together. */
#water-console[data-page="energy"] .page-workspace .energy-unit-row,
#water-console[data-page="energy"] .page-workspace .energy-unit-row strong,
#water-console[data-page="energy"] .page-workspace .energy-node :is(span, b),
#water-console[data-page="energy"] .page-workspace .energy-decision-card h3 {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#water-console[data-page="energy"] .page-workspace :is(.energy-source, .energy-output) span,
#water-console[data-page="energy"] .page-workspace .energy-mini-chart-head,
#water-console[data-page="energy"] .page-workspace .energy-mini-chart-head :is(span, b, strong),
#water-console[data-page="energy"] .page-workspace .energy-callout :is(b, span),
#water-console[data-page="energy"] .page-workspace .energy-decision-card :is(span, em, small),
#water-console[data-page="energy"] .page-workspace .energy-trial-summary :is(span, b, strong),
#water-console[data-page="energy"] .page-workspace :is(.energy-v10-insight-label, .energy-v10-insight-summary),
#water-console[data-page="energy"] .page-workspace .energy-v10-insight-metrics span {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Sludge production, transport and document trail. */
#water-console[data-page="sludge"] .page-workspace .sludge-node :is(b, strong, span, small),
#water-console[data-page="sludge"] .page-workspace .sludge-overview-item > span,
#water-console[data-page="sludge"] .page-workspace .sludge-overview-item > em,
#water-console[data-page="sludge"] .page-workspace .sludge-capacity-line em,
#water-console[data-page="sludge"] .page-workspace .sludge-mini-ring b,
#water-console[data-page="sludge"] .page-workspace .sludge-track-chip :is(span, b),
#water-console[data-page="sludge"] .page-workspace :is(.transport-current, .transport-document) > :is(span, small),
#water-console[data-page="sludge"] .page-workspace .silo-gauge span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Alarm topology, decision evidence and queue metadata. */
#water-console[data-page="alarms"] .page-workspace .topology-node :is(b, span),
#water-console[data-page="alarms"] .page-workspace .v10-alarm-decision-panel .alarm-reading > p,
#water-console[data-page="alarms"] .page-workspace .v10-alarm-judgement :is(span, b),
#water-console[data-page="alarms"] .page-workspace .alarm-diagnosis-facts :is(small, b),
#water-console[data-page="alarms"] .page-workspace .cause-row,
#water-console[data-page="alarms"] .page-workspace .cause-row b,
#water-console[data-page="alarms"] .page-workspace :is(.alarm-sla-label, .alarm-sla-steps) :is(span, b, small, i),
#water-console[data-page="alarms"] .page-workspace .alarm-queue-copy span,
#water-console[data-page="alarms"] .page-workspace .alarm-queue-item em,
#water-console[data-page="alarms"] .page-workspace .sla-step span {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

#water-console[data-page="alarms"] .page-workspace .alarm-reading h3,
#water-console[data-page="alarms"] .page-workspace .alarm-queue-copy b {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Dialog and assistant text remain readable in the same canvas coordinate system. */
#water-console .ui-popover .ui-popover-head small,
#water-console .ui-drawer .ui-detail-block span,
#water-console .dha-panel .dha-panel__title span,
#water-console .dha-panel .dha-context-bar span,
#water-console .dha-panel .dha-message__source,
#water-console .dha-panel .dha-message__avatar,
#water-console .dha-panel :is(small, button, input, textarea) {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#water-console .dha-panel .dha-message,
#water-console .ui-drawer :is(.ui-drawer-summary, .ui-detail-list li),
#water-console .qv10-dialog :is(p, li, td, .qv10-dialog-summary) {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* SVG font sizes account for their viewBox scaling within compact chart slots. */
#water-console .dashboard-shell .line-chart .axis-text { font-size: 18px !important; }
#water-console .dashboard-shell .weekly-chart .axis-text { font-size: 16px !important; }
#water-console[data-page="process"] .page-workspace .pq-process-chart .pq-axis { font-size: 22px !important; }
#water-console[data-page="devices"] .page-workspace .device-trend .i2-chart-axis { font-size: 17px !important; }
#water-console[data-page="energy"] .page-workspace :is(.energy-v10-axis, .energy-v10-limit-label) { font-size: 14px !important; }
#water-console[data-page="energy"] .page-workspace .i2-chart-axis { font-size: 12px !important; }
#water-console[data-page="sludge"] .page-workspace .sludge-left > .ops-panel:nth-child(2) .chart-axis { font-size: 24px !important; }
#water-console[data-page="alarms"] .page-workspace .alarm-trend-evidence .chart-axis { font-size: 38px !important; }

/* Give the larger text room without reducing the typography again. */
#water-console[data-page] .page-workspace .notice-item .mini-action {
  min-width: 54px;
  padding-right: 7px;
  padding-left: 7px;
  white-space: nowrap;
}

#water-console[data-page="devices"] .page-workspace .devices-left .bar-row {
  grid-template-columns: 92px minmax(24px, 1fr) 36px;
  gap: 5px;
}

#water-console[data-page="devices"] .page-workspace .device-status-distribution {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

#water-console[data-page="devices"] .page-workspace .device-status-ring {
  width: 76px;
  height: 76px;
}

#water-console[data-page="devices"] .page-workspace .device-status-list {
  gap: 4px;
}

#water-console[data-page="energy"] .page-workspace .energy-center {
  grid-template-rows: minmax(0, 1fr) 186px !important;
}

#water-console[data-page="energy"] .page-workspace .energy-center .i2-line-chart {
  height: 104px !important;
  min-height: 104px !important;
}

#water-console[data-page="energy"] .page-workspace .energy-unit-row {
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 4px;
}

#water-console[data-page="energy"] .page-workspace .energy-unit-row > i {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 3px;
}

#water-console[data-page="energy"] .page-workspace .energy-unit-row > strong {
  grid-column: 2;
  grid-row: 1;
}

#water-console[data-page="energy"] .page-workspace .energy-unit-row strong {
  white-space: nowrap;
}

#water-console[data-page="energy"] .page-workspace .energy-left .donut-block {
  flex-direction: column;
  align-items: stretch;
  gap: 8px !important;
}

#water-console[data-page="energy"] .page-workspace .energy-left .ops-donut {
  align-self: center;
  flex-basis: 68px;
  width: 68px;
  height: 68px;
}

#water-console[data-page="energy"] .page-workspace .energy-left .donut-legend {
  flex-basis: auto;
}

#water-console[data-page="sludge"] .page-workspace .sludge-left .control-row {
  grid-template-columns: minmax(76px, 1fr) minmax(0, 1.15fr) auto;
  gap: 4px;
}

#water-console[data-page="sludge"] .page-workspace .sludge-left .control-row b {
  white-space: normal;
  overflow-wrap: normal;
}

#water-console[data-page="sludge"] .page-workspace .sludge-right .ops-donut {
  flex-basis: 78px;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px;
  max-width: 78px;
}

#water-console[data-page="alarms"] .page-workspace .alarms-left {
  grid-template-rows: 132px 150px minmax(0, 1fr) !important;
}

#water-console[data-page="alarms"] .page-workspace .alarms-left .ops-donut {
  flex-basis: 78px;
  width: 78px;
  height: 78px;
}

#water-console[data-page="alarms"] .page-workspace .alarms-left .donut-block {
  gap: 8px !important;
}

#water-console[data-page="alarms"] .page-workspace .alarms-left .bar-row {
  min-height: 18px !important;
}

#water-console[data-page="alarms"] .page-workspace .alarms-left > .ops-panel:nth-child(2) .ops-panel-body {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#water-console[data-page="alarms"] .page-workspace .alarms-left .donut-legend {
  gap: 2px !important;
}

#water-console[data-page="alarms"] .page-workspace .heatmap {
  height: auto;
  min-height: 150px;
  grid-auto-rows: 18px;
  align-content: start;
}

#water-console[data-page="alarms"] .page-workspace .heat-cell {
  height: 18px;
  min-height: 18px !important;
  aspect-ratio: auto;
}

#water-console[data-page="alarms"] .page-workspace .alarms-bottom .ops-table :is(th, td):first-child {
  width: 136px;
}

#water-console[data-page="alarms"] .page-workspace .v10-alarm-sla-panel .sla-funnel {
  height: 64px !important;
}

#water-console[data-page="alarms"] .page-workspace .v10-alarm-sla-panel .ops-panel-body {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#water-console[data-page="alarms"] .page-workspace .v10-alarm-sla-panel .sla-step {
  min-height: 45px;
  padding: 3px;
}

#water-console[data-page="alarms"] .page-workspace .v10-alarm-sla-panel .ops-panel-body > .inline-meta {
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px !important;
}