/* Four equipment subpages share the platform palette and layout rhythm.
 * The opt-in panel scope leaves system drawings, meters and tank views unchanged.
 * Dynamic renderers keep their original nodes, attributes and status classes. */
.app-shell[data-active-page="monitor"] .monitor-equipment-page {
  --equipment-gap: 16px;
  --equipment-padding: 16px;
  --equipment-visual-width: clamp(200px, 23%, 288px);
  min-width: 0;
}

.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-grid, .monitor-equipment-layout-list, .monitor-pump-realtime-grid, #monitorValve) {
  gap: 24px;
  min-width: 0;
}

/* Device families are sections, not another box around the device cards. */
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-group, .monitor-valve-group) {
  min-width: 0;
  overflow: visible;
  border: 0;
  background: none;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-group-heading, .monitor-valve-group-heading) {
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--home-line);
  background: none;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-group-heading, .monitor-valve-group-heading) h3 {
  color: var(--home-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-group-heading, .monitor-valve-group-heading) > span {
  color: var(--home-accent-strong);
  font-size: 13px;
  line-height: 1.5;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-controller-grid, .monitor-valve-controller-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--equipment-gap);
  align-items: stretch;
  padding: 0;
}

/* One consistent card surface and heading, with semantic state borders. */
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-card, .monitor-equipment-layout-card, .monitor-pump-realtime-card, .monitor-valve-card) {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-line-strong);
  border-radius: 12px;
  background: var(--home-card-bg);
  box-shadow: none;
  animation: none;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-card, .monitor-equipment-layout-card, .monitor-pump-realtime-card, .monitor-valve-card).is-live {
  border-color: var(--home-line-strong);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-card, .monitor-equipment-layout-card, .monitor-pump-realtime-card, .monitor-valve-card).is-delayed {
  border-color: var(--home-warning);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-card, .monitor-equipment-layout-card, .monitor-pump-realtime-card, .monitor-valve-card):is(.is-stale, .is-fault) {
  border-color: var(--home-danger);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-heading, .monitor-equipment-layout-heading, .monitor-pump-realtime-heading, .monitor-valve-heading) {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 68px;
  padding: 12px var(--equipment-padding);
  border-bottom: 1px solid var(--home-line);
  background: var(--home-panel-bg);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-heading, .monitor-equipment-layout-heading, .monitor-pump-realtime-heading, .monitor-valve-heading) > div {
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-heading, .monitor-equipment-layout-heading, .monitor-pump-realtime-heading, .monitor-valve-heading) :is(h3, h4) {
  margin: 0;
  overflow: visible;
  color: var(--home-text-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-heading, .monitor-equipment-layout-heading, .monitor-pump-realtime-heading, .monitor-valve-heading) p {
  margin: 4px 0 0;
  color: var(--home-text-muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-icon {
  border: 0;
  background: none;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-status {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Left product image, right measurements. Compact devices share the same pattern. */
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-body, .monitor-equipment-layout-body, .monitor-pump-realtime-body, .monitor-valve-body) {
  display: grid;
  grid-template-columns: var(--equipment-visual-width) minmax(0, 1fr);
  flex: 1;
  min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-realtime-body, .monitor-valve-body) {
  --equipment-visual-width: clamp(120px, 24%, 176px);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-visual, .monitor-equipment-layout-visual, .monitor-pump-realtime-visual, .monitor-valve-visual) {
  display: grid;
  min-width: 0;
  min-height: 208px;
  margin: 0;
  padding: var(--equipment-padding);
  place-content: center;
  justify-items: center;
  gap: 8px;
  border-right: 1px solid var(--home-line);
  border-bottom: 0;
  background: var(--home-panel-bg);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-visual, .monitor-equipment-layout-visual, .monitor-pump-realtime-visual, .monitor-valve-visual) img {
  display: block;
  width: 100%;
  max-width: 272px;
  height: 176px;
  max-height: 176px;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: none;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-realtime-visual, .monitor-valve-visual) {
  min-height: 160px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-realtime-visual, .monitor-valve-visual) img {
  height: 104px;
  max-height: 104px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-visual, .monitor-equipment-layout-visual, .monitor-pump-realtime-visual, .monitor-valve-visual) figcaption {
  margin: 0;
  color: var(--home-text-soft);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-position {
  margin-top: 0;
  gap: 4px;
  text-align: center;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-position strong { font-size: 16px; line-height: 1.4; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-position span { font-size: 12px; line-height: 1.5; }

/* Uniform measurement rhythm; values and long labels can wrap instead of clipping. */
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-parameter-stack {
  gap: var(--equipment-gap);
  padding: var(--equipment-padding);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-unit-section, .monitor-mcc-compressor-group) {
  border: 0;
  background: none;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-section-heading {
  gap: 12px;
  padding: 0 0 12px;
  border: 0;
  background: none;
  color: var(--home-text-soft);
  font-size: 13px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-params, .monitor-equipment-layout-kpis, .monitor-pump-parameters, .monitor-valve-parameters) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  min-width: 0;
  margin: 0;
  gap: 12px;
  padding: var(--equipment-padding);
  align-content: center;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-unit-params, .monitor-equipment-layout-kpis) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-params { padding: 0; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-param, .monitor-equipment-kpi, .monitor-pump-parameter, .monitor-valve-parameter) {
  min-width: 0;
  min-height: 104px;
  padding: 12px;
  align-content: center;
  border: 1px solid var(--home-line);
  border-radius: 8px;
  background: var(--home-accent-dim);
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-param, .monitor-equipment-kpi, .monitor-pump-parameter, .monitor-valve-parameter) dt {
  overflow: visible;
  color: var(--home-text-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-param, .monitor-equipment-kpi, .monitor-pump-parameter, .monitor-valve-parameter) dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  min-width: 0;
  margin: 8px 0 0;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-param, .monitor-equipment-kpi, .monitor-pump-parameter, .monitor-valve-parameter) dd strong {
  min-width: 0;
  color: var(--home-accent-strong);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-param, .monitor-equipment-kpi, .monitor-pump-parameter, .monitor-valve-parameter) :is(dd span, small) {
  color: var(--home-text-muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-param, .monitor-equipment-kpi, .monitor-pump-parameter, .monitor-valve-parameter).is-fault {
  border-color: var(--home-danger);
  background: rgba(103, 27, 29, .42);
  outline: 0;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-param, .monitor-equipment-kpi, .monitor-pump-parameter, .monitor-valve-parameter).is-fault dd strong { color: var(--home-danger); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-parameter.is-missing dd strong { color: var(--home-neutral); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-compressor-toggle {
  gap: 12px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--home-line);
  border-radius: 8px;
  background: var(--home-panel-bg);
  color: var(--home-text-soft);
  font-size: 13px;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-compressor-list { gap: 16px; padding-top: 16px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-card, .monitor-equipment-layout-card, .monitor-pump-realtime-card, .monitor-valve-card) > footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: auto;
  padding: 10px var(--equipment-padding);
  border-top: 1px solid var(--home-line);
  color: var(--home-text-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-state time, .monitor-pump-source, .monitor-valve-page-source) {
  color: var(--home-text-muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .app-shell[data-active-page="monitor"] .monitor-equipment-page { --equipment-visual-width: 200px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-unit-params, .monitor-equipment-layout-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .app-shell[data-active-page="monitor"] .monitor-equipment-page { --equipment-padding: 12px; --equipment-gap: 12px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-body, .monitor-equipment-layout-body, .monitor-pump-realtime-body, .monitor-valve-body) { grid-template-columns: minmax(0, 1fr); }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-visual, .monitor-equipment-layout-visual, .monitor-pump-realtime-visual, .monitor-valve-visual) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--home-line); }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-visual, .monitor-equipment-layout-visual) img { height: 144px; max-height: 144px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-realtime-visual, .monitor-valve-visual) img { height: 88px; max-height: 88px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-params, .monitor-equipment-layout-kpis, .monitor-pump-parameters, .monitor-valve-parameters) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-heading, .monitor-equipment-layout-heading, .monitor-pump-realtime-heading, .monitor-valve-heading) :is(h3, h4) { font-size: 16px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-mcc-state { justify-items: start; }
}
@media (max-width: 360px) {
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-params, .monitor-equipment-layout-kpis, .monitor-pump-parameters, .monitor-valve-parameters) { grid-template-columns: minmax(0, 1fr); }
}

/* Operate mode: status first, restrained normal values, compact repeated devices. */
.app-shell[data-active-page="monitor"] .monitor-equipment-page [hidden] { display: none !important; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; min-width: 0;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.equipment-toolbar, .equipment-history, .equipment-filter-empty) :is(button, select, input) {
  min-height: 40px; border: 1px solid var(--home-line); border-radius: 8px; background: var(--home-panel-bg);
  color: var(--home-text-soft); font: inherit; font-size: 13px; padding: 8px 12px; max-width: 100%;
}
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(button, summary, select, input):focus-visible { outline: 2px solid var(--home-accent-strong); outline-offset: 2px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-filters button[aria-pressed="true"] { background: var(--home-accent-dim); border-color: var(--home-accent-strong); color: var(--home-text-strong); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.equipment-toolbar, .equipment-history, .equipment-filter-empty) button:hover { border-color: var(--home-accent-strong); color: var(--home-text-strong); cursor: pointer; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-search { display: flex; align-items: center; gap: 8px; color: var(--home-text-soft); font-size: 13px; min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-search input { width: 220px; min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-search input::placeholder { color: var(--home-text-muted); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-result-count { color: var(--home-text-muted); font-size: 13px; margin-left: auto; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-filter-empty { padding: 32px 16px; text-align: center; color: var(--home-text-soft); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-operation { display: block; margin-top: 6px; color: var(--home-neutral); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-state="running"] .equipment-operation,
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-state="open"] .equipment-operation { color: var(--home-accent-strong); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-fault="true"] { border-color: var(--home-danger); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-fault="true"] .equipment-operation { color: var(--home-danger); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-delayed="true"] { border-color: var(--home-warning); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-delayed="true"] .monitor-mcc-status { color: var(--home-warning); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-value-state="normal"] dd strong,
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-value-state="stopped"] dd strong,
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-value-state="unknown"] dd strong { color: var(--home-neutral); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page [data-equipment-value-state="fault"] dd strong { color: var(--home-danger); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-equipment-layout-visual { min-height: 164px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-equipment-layout-visual img { height: 132px; max-height: 132px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-realtime-body, .monitor-valve-body) { grid-template-columns: 88px minmax(0, 1fr); align-items: stretch; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-realtime-visual, .monitor-valve-visual) { min-height: 104px; padding: 12px 8px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-pump-realtime-visual, .monitor-valve-visual) img { height: 64px; max-height: 64px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-pump-parameters { gap: 8px; padding: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-pump-parameter { min-height: 88px; padding: 8px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-pump-parameter dd strong { font-size: 20px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-visual { grid-template-columns: 64px minmax(0, 1fr); gap: 8px 16px; border-right: 0; padding: 12px 16px; justify-items: start; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-visual img { grid-row: 1 / 3; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-visual figcaption { grid-column: 2; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-position { grid-column: 2; text-align: left; align-items: start; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-position span { font-size: 20px; font-weight: 700; color: var(--home-text-strong); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-body { grid-template-columns: minmax(0, 1fr); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-parameter-details { min-width: 0; border-top: 1px solid var(--home-line); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-parameter-details summary { cursor: pointer; padding: 12px 16px; min-height: 44px; color: var(--home-text-soft); font-size: 13px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-parameter-details .monitor-valve-parameters { padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-trend-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-trend-trigger svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--home-accent-strong); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-trend-trigger:hover { color: var(--home-text-strong); text-decoration: underline; text-underline-offset: 4px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history { padding: 16px; border-top: 1px solid var(--home-line); min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history header > strong { color: var(--home-text-strong); font-size: 16px; overflow-wrap: anywhere; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history label { display: flex; align-items: center; gap: 8px; color: var(--home-text-soft); font-size: 13px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.equipment-history-note, .equipment-history-empty) { color: var(--home-text-soft); font-size: 13px; line-height: 1.6; margin: 12px 0; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-content { min-width: 0; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-plot { overflow-x: auto; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-plot svg { display: block; width: 100%; min-width: 280px; max-height: 320px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-plot text { fill: var(--home-text-soft); font: 13px sans-serif; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-chart-grid { stroke: var(--home-line); stroke-width: 1; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-chart-line { stroke: var(--home-accent-strong); fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-chart-point { fill: var(--home-accent-strong); }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-table { margin-top: 12px; color: var(--home-text-soft); font-size: 13px; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-table summary { padding: 12px 0; cursor: pointer; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-table > div { max-height: 240px; overflow: auto; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-table table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-table :is(th, td) { white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history-table :is(th, td) { padding: 8px; text-align: left; border-bottom: 1px solid var(--home-line); }
@media (max-width: 640px) {
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-search { flex: 1 1 100%; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.equipment-toolbar, .equipment-history) :is(input, select) { font-size: 16px; min-height: 44px; min-width: 0; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-history label { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-search input { flex: 1; width: 0; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-result-count { margin-left: 0; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-filters button { min-height: 44px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-trend-trigger { min-height: 44px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page :is(.monitor-mcc-visual, .monitor-equipment-layout-visual) img { height: 96px; max-height: 96px; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-equipment-layout-visual { min-height: 0; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-pump-realtime-visual { border-right: 1px solid var(--home-line); border-bottom: 0; }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-pump-parameters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-valve-visual { border-bottom: 0; }
}
@media (max-width: 360px) {
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-pump-realtime-body { grid-template-columns: 72px minmax(0, 1fr); }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .monitor-pump-parameters { grid-template-columns: minmax(0, 1fr); }
  .app-shell[data-active-page="monitor"] .monitor-equipment-page .equipment-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}