/* ==== Predictive maintenance (/predictive): the pumps, their health and alerts (pdm-) ====
   Same look as the rest of OneStop (app.css: panels, panel-head, table, hint, notice, error, empty, btn, toolbar, grid-2).
   Loaded by Components\App.razor for every page, after epics.css. Pages: TTech.Platform.Client\Apps\Predictive. Classes
   built in code (grep the prefix): pdm-good / watch / warning / critical / unknown (Pdm.StatusClass), pdm-zone-a..d and
   pdm-zone-none (Pdm.ZoneClass, PdmZoneBar), pdm-limit-warn / bad (PdmTrend). Colours only through the tokens of app.css,
   so the dark theme follows. Phones: one column under 1000px (the grid of app.css), the cards and forms wrap. */

/* The scope bar (PredictiveBar) and the toolbars */
.pdm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); font-size: 0.88rem; }
.pdm-bar-text { flex: 1 1 260px; min-width: 0; }
.pdm-bar-warn { padding: 3px 8px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-weight: 700; }
.pdm-toolbar { margin-bottom: 10px; }
.pdm-primary { background: var(--os-accent-fill); color: var(--os-on-accent-fill); border-color: var(--os-accent-fill); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.pdm-primary:hover:not(:disabled) { background: var(--os-accent-fill-hover); }
.pdm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--muted); }

/* Statuses (Pdm.StatusClass) */
.pdm-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.pdm-good { background: var(--good-soft); color: var(--good-text); }
.pdm-watch { background: var(--gold-soft); color: var(--gold-text); }
.pdm-warning { background: var(--warn-soft); color: var(--warn); }
.pdm-critical { background: var(--bad-soft); color: var(--bad); }
.pdm-unknown { background: var(--chip); color: var(--chip-text); }

/* The health ring (PdmHealth) */
.pdm-ring { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; background: transparent !important; }
.pdm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(0deg); }
.pdm-ring-track { fill: none; stroke: var(--rule); stroke-width: 3.2; }
.pdm-ring-value { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.pdm-ring b { position: relative; font-weight: 900; color: var(--text); }

/* The list (AssetsPage) */
.pdm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pdm-card { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; transition: box-shadow 0.15s; }
.pdm-card:hover { box-shadow: var(--shadow); background: var(--accent-soft); }
.pdm-card-head { display: flex; align-items: center; gap: 12px; }
.pdm-card-title { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pdm-card-title b { font-size: 1rem; }
.pdm-card-text { margin: 0; font-size: 0.86rem; line-height: 1.4; }
.pdm-card-error { margin: 0; color: var(--bad); font-size: 0.84rem; }
.pdm-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.pdm-card-foot .spacer { flex: 1; }
.pdm-alert-count { display: inline-flex; align-items: center; gap: 3px; color: var(--warn); font-weight: 700; }

/* An asset (AssetPage) */
.pdm-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.pdm-head-main { flex: 1 1 360px; min-width: 0; }
.pdm-head-main h2 { margin: 4px 0 4px; font-size: 1.25rem; font-weight: 900; }
.pdm-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pdm-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.pdm-headline { margin: 6px 0 4px; font-weight: 700; }
.pdm-learn { display: inline-flex; align-items: center; gap: 4px; }
.pdm-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pdm-component p { margin: 6px 0 0; }
.pdm-component-head { display: flex; align-items: center; gap: 4px; }
.pdm-component-head .spacer { flex: 1; }
.pdm-findings { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pdm-finding { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.9rem; line-height: 1.4; }
.pdm-finding .pdm-status { justify-self: start; }
.pdm-action { display: flex; align-items: flex-start; gap: 4px; margin-top: 3px; color: var(--muted); font-size: 0.86rem; }
.pdm-grid { margin-top: 12px; align-items: start; }
.pdm-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font-size: 0.86rem; color: var(--muted); }
.pdm-facts b { color: var(--text); }
.pdm-sub { display: flex; align-items: center; gap: 4px; margin: 12px 0 6px; color: var(--muted); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.pdm-point { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.pdm-point:last-child { border-bottom: 0; }
.pdm-point-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.9rem; }
.pdm-point-head .spacer { flex: 1; }
.pdm-forecast { margin-top: 4px; color: var(--warn); font-size: 0.84rem; font-weight: 700; }
.pdm-danger { display: flex; justify-content: flex-end; margin-top: 12px; }
.pdm-delete { color: var(--bad); }

/* The pump curve (PumpCurveChart) */
.pdm-curve { width: 100%; height: auto; display: block; }
.pdm-curve-grid { stroke: var(--rule); stroke-width: 1; }
.pdm-curve-tick { fill: var(--muted); font-size: 11px; }
.pdm-curve-axis { fill: var(--muted); font-size: 11px; font-weight: 700; }
.pdm-curve-label { fill: var(--good-text); font-size: 11px; font-weight: 800; }
.pdm-curve-por { fill: var(--good-soft); }
.pdm-curve-bep { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pdm-curve-head { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.pdm-curve-eff { fill: none; stroke: var(--info); stroke-width: 2; stroke-dasharray: 6 4; }
.pdm-curve-eff-text { fill: var(--info); }
.pdm-curve-dot { fill: var(--muted); opacity: 0.45; }
.pdm-curve-now { fill: var(--brand-gold); stroke: var(--text); stroke-width: 1.5; }
.pdm-curve-gap { stroke: var(--bad); stroke-width: 2; stroke-dasharray: 3 2; }
.pdm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--muted); font-size: 0.8rem; }
.pdm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pdm-key { display: inline-block; width: 16px; height: 4px; border-radius: 2px; }
.pdm-key-head { background: var(--accent); }
.pdm-key-eff { background: var(--info); }
.pdm-key-por { height: 10px; background: var(--good-soft); border: 1px solid var(--good); }
.pdm-key-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pdm-key-now { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-gold); border: 1px solid var(--text); }

/* Trends (PdmTrend) */
.pdm-trend { position: relative; display: flex; align-items: stretch; gap: 6px; }
.pdm-trend svg { flex: 1; min-width: 0; width: 100%; height: auto; max-height: 60px; aspect-ratio: 300 / 60; background: var(--panel-2); border-radius: 6px; }
.pdm-trend-line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.pdm-limit-warn { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 3; }
.pdm-limit-bad { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 4 3; }
.pdm-trend-scale { display: flex; flex-direction: column; justify-content: space-between; min-width: 38px; color: var(--muted); font-size: 0.72rem; text-align: right; font-variant-numeric: tabular-nums; }
.pdm-spark { min-width: 160px; }
.pdm-spark .pdm-trend svg { max-height: 26px; aspect-ratio: 300 / 26; }
.pdm-spark .pdm-trend-scale { display: none; }

/* Zones and limits (PdmZoneBar) */
.pdm-zones { position: relative; height: 14px; border-radius: 7px; overflow: hidden; }
.pdm-zones > div { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; }
.pdm-zone-a { background: var(--good-soft); color: var(--good-text); }
.pdm-zone-b { background: var(--info-soft); color: var(--info); }
.pdm-zone-c { background: var(--warn-soft); color: var(--warn); }
.pdm-zone-d { background: var(--bad-soft); color: var(--bad); }
.pdm-zone-none { background: var(--chip); color: var(--chip-text); }
.pdm-zone { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; }
.pdm-zones > .pdm-marker { width: 3px; margin-left: -1px; background: var(--text); box-shadow: 0 0 0 1px var(--panel); }
.pdm-zones-scale { position: relative; height: 14px; margin: 2px 0 4px; color: var(--muted); font-size: 0.7rem; }
.pdm-zones-scale span { position: absolute; transform: translateX(-50%); }

/* The anomaly's contributions */
.pdm-contrib td { padding: 5px 8px; }
.pdm-bar-cell { width: 40%; }
.pdm-share { height: 8px; border-radius: 4px; background: var(--warn); }

/* Alerts (PdmAlertTable, AlertsPage) */
.pdm-alerts tr.pdm-cleared td { color: var(--muted); }

/* The editor (AssetEditor) */
.pdm-form { display: flex; flex-direction: column; gap: 12px; }
.pdm-fields { display: flex; flex-wrap: wrap; gap: 10px; }
.pdm-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 170px; color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.pdm-field > span { display: flex; align-items: center; gap: 4px; }
.pdm-wide { margin-top: 10px; }
.pdm-input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  min-width: 0;
}
.pdm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.pdm-line .pdm-input { flex: 1 1 120px; }
.pdm-signal .pdm-role { flex: 0 1 190px; }
.pdm-signal .pdm-name { flex: 2 1 200px; }
.pdm-signal .pdm-stream { flex: 2 1 200px; }
.pdm-signal .pdm-units { flex: 0 1 80px; }
.pdm-remove { border: 1px solid var(--border); border-radius: 8px; background: var(--btn); color: var(--muted); cursor: pointer; padding: 6px 9px; }
.pdm-remove:hover { background: var(--btn-hover); }
.pdm-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 0.84rem; margin-top: 4px; }
.pdm-search { margin: 10px 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--panel-2); }
.pdm-hits { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.86rem; }
.pdm-hits li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdm-hits code { padding: 1px 6px; border-radius: 4px; background: var(--code-bg); font-size: 0.78rem; }
.pdm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pdm-foot .spacer { flex: 1; }

@media (max-width: 700px) {
  .pdm-finding { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pdm-head-actions { width: 100%; }
}

/* V1.18, the types of equipment: the type of an asset (list, page) and a valve's position against its command (ValveSignatureChart) */
.pdm-type { padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 0.74rem; font-weight: 700; }
.pdm-signature { max-width: 280px; margin: 4px auto 8px; }
.pdm-signature svg { display: block; width: 100%; height: auto; }
.pdm-sig-frame { fill: none; stroke: var(--border); stroke-width: 1; }
.pdm-sig-grid { stroke: var(--border); stroke-width: 0.5; }
.pdm-sig-diagonal { stroke: var(--muted); stroke-width: 1; }
.pdm-sig-band { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 3; }
.pdm-sig-dot { fill: var(--accent); fill-opacity: 0.55; }
.pdm-sig-axes { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.74rem; }

/* V1.18, Control Loops (AppsControlLoops): the dashboard's filters and table, the window's chart (PV, setpoint, output), the
   simulated step (current and suggested tuning), the speeds and the tuning, the AI's explanation, the report (printed) */
.ctl-filter { width: auto; min-width: 120px; }
.ctl-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ctl-table td { vertical-align: middle; }
.ctl-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ctl-chart svg { display: block; width: 100%; height: 260px; }
.ctl-legend, .ctl-axes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 0.8rem; }
.ctl-legend .spacer, .ctl-axes .spacer { flex: 1; }
.ctl-axes { justify-content: space-between; }
.ctl-readout { color: var(--text); }
.ctl-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; }
.ctl-pv { fill: none; stroke: var(--accent); stroke-width: 2; border-color: var(--accent); }
.ctl-sp { fill: none; stroke: var(--text); stroke-width: 1; stroke-dasharray: 5 4; border-color: var(--text); border-top-style: dashed; }
.ctl-op { fill: none; stroke: var(--info); stroke-width: 1.6; border-color: var(--info); }
.ctl-valve { fill: none; stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 2 3; border-color: var(--warn); border-top-style: dotted; }
.ctl-now { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 6 4; border-color: var(--muted); border-top-style: dashed; }
.ctl-next { fill: none; stroke: var(--accent); stroke-width: 2; border-color: var(--accent); }
.ctl-split { stroke: var(--rule); stroke-width: 1; }
.ctl-cross { stroke: var(--muted); stroke-width: 1; }
.ctl-hit { fill: transparent; }
.ctl-speeds { display: flex; gap: 6px; margin: 4px 0 10px; }
.ctl-speed { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-weight: 700; font-size: 0.82rem; }
.ctl-speed.on { border-color: var(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.ctl-tuning { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 6px; }
.ctl-tuning .label { display: block; color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.ctl-tuning b { font-size: 1.25rem; }
.ctl-reasons { margin: 6px 0; padding-left: 18px; }
.ctl-reasons li { margin: 4px 0; }
.ctl-why summary { cursor: pointer; font-weight: 700; color: var(--accent-strong); }
.ctl-ai { margin: 6px 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--info-soft); }
.ctl-ai p { margin: 6px 0; }
.ctl-log-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctl-log-form input { width: 90px; }
.ctl-log-form .ctl-reason { flex: 1 1 200px; width: auto; }
.ctl-report header { margin-bottom: 10px; }
@media (max-width: 700px) { .ctl-hide-narrow { display: none; } }
@media print { .ctl-no-print, .appbar, .topbar, .demo-bar, .pdm-bar, nav { display: none !important; } .ctl-report { box-shadow: none; border: 0; } }

/* V1.18, Data Watchdog (Apps/Watchdog): the counts, the states, the watch's head and its value, the active event and its
   button, the chart's limits and events, the limits, the escalation list, the timeline, the editor's people */
.wd-quiet { background: var(--chip); color: var(--chip-text); }
.wd-kpi-alarm { border-color: var(--bad); background: var(--bad-soft); }
.wd-kpi-alarm .value { color: var(--bad); }
.wd-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.wd-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wd-now { display: flex; align-items: baseline; gap: 10px; margin: 4px 0; }
.wd-value { font-size: 1.9rem; font-weight: 800; }
.wd-shelved { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: var(--note-soft); color: var(--gold-text); font-weight: 700; }
.wd-active-alarm { border-left: 6px solid var(--bad); }
.wd-active { border-left: 6px solid var(--gold-text); }
.wd-message { font-size: 1.1rem; font-weight: 600; margin: 4px 0; }
.wd-taken { color: var(--good-text); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.wd-take { background: var(--bad); color: var(--on-accent); font-weight: 800; padding: 8px 16px; }
.wd-take:hover { background: var(--bad); filter: brightness(1.1); }
.wd-alarm { stroke: var(--bad); stroke-width: 1.4; stroke-dasharray: 6 4; }
.wd-watch { stroke: var(--gold-text); stroke-width: 1.2; stroke-dasharray: 3 4; }
.wd-alarm-key { border-color: var(--bad); border-top-style: dashed; }
.wd-watch-key { border-color: var(--gold-text); border-top-style: dotted; }
.wd-event-alarm { stroke: var(--bad); stroke-width: 1; opacity: 0.5; }
.wd-event-watch { stroke: var(--gold-text); stroke-width: 1; opacity: 0.5; }
.wd-alarm-text { color: var(--bad); font-weight: 700; }
.wd-watch-text { color: var(--gold-text); font-weight: 700; }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.wd-limits td { padding: 4px 8px 4px 0; }
.wd-people { margin: 4px 0 8px; padding-left: 22px; }
.wd-people li { margin: 4px 0; }
.wd-timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--rule); }
.wd-step { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: 4px 0; position: relative; }
.wd-step::before { content: ""; position: absolute; left: -17px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.wd-step-raised::before, .wd-step-ttech::before, .wd-step-callfailed::before { background: var(--bad); }
.wd-step-acknowledged::before, .wd-step-cleared::before { background: var(--good); }
.wd-step-escalated::before, .wd-step-repeated::before { background: var(--warn); }
.wd-step-time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 42px; }
.wd-step-what { font-weight: 700; }
.wd-step-channel { padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--chip-text); font-size: 0.78rem; }
.wd-person input[type="email"], .wd-person input[type="tel"] { flex: 1 1 160px; }
.wd-rank { min-width: 20px; font-weight: 800; color: var(--muted); }

/* V1.24: the language of a person of the escalation list */
.wd-person .wd-person-lang { flex: 0 0 auto; width: auto; min-width: 150px; }

/* V1.24: the messages of a watch made clear (WatchMessagesPanel): the zones of its limits and the value through them, the
   sketches of the checks in time, the messages by who gets them, each as it will read */
.wd-msg-graph { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 6px 0 10px; }
.wd-zones { flex: 1 1 520px; max-width: 760px; height: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
.wd-zone { cursor: pointer; stroke: var(--panel); stroke-width: 2; }
.wd-zone.alarm { fill: var(--bad-soft); }
.wd-zone.watch { fill: var(--warn-soft); }
.wd-zone.normal { fill: var(--good-soft, rgba(46, 125, 50, 0.08)); cursor: default; }
.wd-zone.on { stroke: var(--text); stroke-width: 2; }
.wd-zone-name { font-size: 12px; font-weight: 700; fill: var(--muted); pointer-events: none; }
.wd-limit { stroke-width: 1.5; stroke-dasharray: 5 4; }
.wd-limit.alarm { stroke: var(--bad); }
.wd-limit.watch { stroke: var(--warn); }
.wd-limit-name { font-size: 12px; fill: var(--text); }
.wd-curve { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wd-checks { display: flex; flex-direction: column; gap: 8px; flex: 0 1 220px; }
.wd-check { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: 8px; background: var(--panel); text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.wd-check.alarm { border-left-color: var(--bad); }
.wd-check.off { opacity: 0.55; }
.wd-check.on { outline: 2px solid var(--text); }
.wd-check svg { width: 120px; height: 34px; }
.wd-check span:first-of-type { font-weight: 700; font-size: 0.88rem; }
.wd-msg-empty { padding: 18px; border: 1px dashed var(--border); border-radius: 10px; flex: 1 1 520px; }
.wd-msg-group { margin: 10px 0 14px; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--warn); background: var(--panel-2); }
.wd-msg-group.alarm { border-left-color: var(--bad); }
.wd-msg-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.wd-msg-group.alarm .wd-msg-group-head .mud-icon-root { color: var(--bad); }
.wd-msg-group.watch .wd-msg-group-head .mud-icon-root { color: var(--warn); }
.wd-msg-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.wd-msg-row:first-of-type { border-top: 0; }
.wd-msg-row.off { opacity: 0.55; }
.wd-msg-row.on .wd-msg-name { color: var(--accent); }
.wd-msg-when { display: flex; flex-direction: column; min-width: 0; }
.wd-msg-name { font-weight: 700; }
.wd-msg-preview { grid-column: 2; font-size: 0.86rem; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .wd-msg-row { grid-template-columns: minmax(0, 1fr); }
  .wd-msg-preview { grid-column: 1; }
  .wd-checks { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
}

/* V1.29: the health index over time at the top of an asset's page, and the AI diagnosis */
.pdm-hc { display: flex; flex-direction: column; gap: 4px; }
.pdm-hc-empty { margin: 0; padding: 10px 0; }
.pdm-hc-plot { position: relative; display: flex; align-items: stretch; gap: 8px; }
.pdm-hc-scale { display: flex; flex-direction: column; justify-content: space-between; min-width: 26px; color: var(--faint); font-size: 0.72rem; text-align: right; font-variant-numeric: tabular-nums; }
.pdm-hc-canvas { position: relative; flex: 1; min-width: 0; }
.pdm-hc-plot svg { display: block; flex: 1; min-width: 0; width: 100%; height: 140px; border-radius: 6px; background: var(--panel-2); }
.pdm-hc-good { fill: var(--good); opacity: 0.12; }
.pdm-hc-watch { fill: var(--accent); opacity: 0.12; }
.pdm-hc-warning { fill: var(--warn); opacity: 0.14; }
.pdm-hc-critical { fill: var(--bad); opacity: 0.14; }
.pdm-hc-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.pdm-hc-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid var(--panel); border-radius: 50%; background: var(--text); pointer-events: none; }
.pdm-hc-dates { display: flex; justify-content: space-between; padding-left: 34px; color: var(--faint); font-size: 0.74rem; }
.pdm-ai { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel-2); }
.pdm-ai p { margin: 0; line-height: 1.5; }
.pdm-ai-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* V1.52: Draft a work order (Client\Shared\WorkOrderPanel.razor, Predictive's asset and Control Loops' loop pages): the text to copy
   in the maintenance system, kept as written (its lines), wrapped on a phone */
.pdm-wo .panel-head h3 { display: flex; align-items: center; gap: 6px; }
.pdm-wo-text { margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel-2); font-family: inherit; font-size: 0.92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-pi-link { white-space: nowrap; }

/* V1.52: a watch's suggested limits (Client\Apps\Watchdog\WatchPage.razor, Shared\Watchdog\WatchLimitSuggestions.cs): under its
   limits, the band of the last 6 hours and a limit inside it flagged */
.wd-suggest { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel-2); }
.wd-suggest-head { display: flex; align-items: center; gap: 6px; }
.wd-suggest .btn { align-self: flex-start; }
.wd-tight { color: var(--warn); font-weight: 600; }