/* ==========================================================================
   #view-utilities — Utilities station (owned by js/views/utilities.js)
   Layout in the 1888×988 content box: KPI row 92 (+14) · cards 604 · trend 264 (+14)
   ========================================================================== */
#view-utilities .ut-cards { display: grid; gap: 14px; height: 604px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.42fr) minmax(0, 1fr) minmax(0, 1fr); }
#view-utilities .ut-trend { height: 264px; margin-top: 14px; }
#view-utilities .ut-trend .panel-h .r { gap: 18px; }
#view-utilities .ut-tstat { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
#view-utilities .ut-tstat b { color: #ffc65a; font-size: 16px; }

/* KPI ring (compressor loading) sits in the spark slot */
#view-utilities .kpi-spark svg { display: block; }

/* ---------------------------------------------------------------- unit card */
#view-utilities .ut-card { display: flex; flex-direction: column; }
#view-utilities .ut-card .uc-h { padding: 11px 14px 4px; gap: 8px; }
#view-utilities .ut-card .uc-id { font-size: 20px; letter-spacing: 0.4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#view-utilities .ut-card .uc-id small { font-size: 14.5px; margin-left: 7px; letter-spacing: 0.3px; }
#view-utilities .ut-card .ut-bd, #view-utilities .ut-card .ut-md { flex: none; display: inline-flex; }
#view-utilities .ut-sub { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 14px 7px; font-size: 14px; color: var(--text-dim); white-space: nowrap; min-width: 0; }
#view-utilities .ut-sub .l { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#view-utilities .ut-sub .r { flex: none; }
#view-utilities .ut-sub b { color: #fff; font-size: 16px; font-weight: 700; }

#view-utilities .ut-render { flex: none; height: 206px; margin: 0 12px; }
#view-utilities .ut-card.off .ut-render { background: radial-gradient(70% 70% at 50% 45%, rgba(90, 105, 130, 0.22), rgba(4, 12, 28, 0) 70%), linear-gradient(180deg, #0b1626, #050b16); }
#view-utilities .ut-card.crit .ut-render { background: radial-gradient(70% 70% at 50% 45%, rgba(150, 40, 60, 0.22), rgba(4, 12, 28, 0) 70%), linear-gradient(180deg, #0d1424, #050a16); }
#view-utilities .ut-card.watch .ut-render { background: radial-gradient(70% 70% at 50% 45%, rgba(150, 105, 30, 0.18), rgba(4, 12, 28, 0) 70%), linear-gradient(180deg, #0d1626, #050b16); }
#view-utilities .ut-pome .ut-render { background: radial-gradient(80% 80% at 50% 50%, rgba(40, 110, 90, 0.22), rgba(4, 12, 28, 0) 75%), linear-gradient(180deg, #06182c, #030b18); }
#view-utilities .ut-render .ovl:empty { display: none; }
#view-utilities .ut-render .chip b { font-weight: 700; }
#view-utilities .ut-render .ovl.tl, #view-utilities .ut-render .ovl.bl { flex-direction: column; align-items: flex-start; }
#view-utilities .ut-render .uc-alarm { position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; z-index: 6; pointer-events: none; font-size: 14.5px; padding: 5px 8px; white-space: nowrap; overflow: hidden;
  box-shadow: 0 0 16px rgba(255, 178, 36, 0.45); animation: ut-blink 1.4s infinite; }
#view-utilities .ut-render .uc-alarm span { overflow: hidden; text-overflow: ellipsis; }
#view-utilities .ut-render .uc-alarm.crit { box-shadow: 0 0 16px rgba(255, 75, 92, 0.55); }
#view-utilities .ut-card.has-alarm .ut-render .ovl.bl { bottom: 50px; }
@keyframes ut-blink { 50% { filter: brightness(0.82); box-shadow: 0 0 4px rgba(255, 178, 36, 0.2); } }

/* ------------------------------------------------------- gauges / stat row */
#view-utilities .ut-mid { flex: none; height: 116px; padding: 8px 12px 0; display: grid; gap: 6px; align-items: center; }
#view-utilities .ut-mid.c3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
#view-utilities .ut-mid.pome { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.15fr); }
#view-utilities .ut-mid .gauge-wrap svg { max-width: 100px; }
#view-utilities .ut-mid .gauge-wrap .g-l { font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; }
#view-utilities .gauge-wrap .g-l .nt { text-transform: none; }
#view-utilities .cap { font-size: 14px; letter-spacing: 0.8px; }
#view-utilities .ut-stat.open b { color: #ffc65a; }
#view-utilities .ut-mid .gauge-wrap .g-v { font-size: 21px; margin-top: -4px; }
#view-utilities .ut-mid .gauge-wrap .g-v.c-amber { color: var(--amber); }
#view-utilities .ut-mid .gauge-wrap .g-v.c-red { color: var(--red); }
#view-utilities .ut-mid .gauge-wrap .g-v.c-grey { color: #9aa8bd; }
#view-utilities .ut-pome .ut-mid .gauge-wrap svg { max-width: 118px; }
#view-utilities .ut-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#view-utilities .ut-stat .cap { font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-utilities .ut-stat b { font-size: 27px; font-weight: 700; color: #3ff09a; line-height: 1.05; white-space: nowrap; }
#view-utilities .ut-stat b small { font-size: 14px; color: var(--text-dim); margin-left: 3px; font-weight: 600; }
#view-utilities .ut-stat .sm { font-size: 14px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-utilities .ut-power .ut-stat b, #view-utilities .ut-air .ut-stat b { color: #7fe3ff; }
#view-utilities .ut-pome .ut-stat b .bg { color: #ffc65a; }
#view-utilities .ut-card.off .ut-stat b { color: #c9d6ea; }

/* treated-water tank */
#view-utilities .ut-tank { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#view-utilities .ut-tank .cap { font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; }
#view-utilities .ut-tank .level-bar .lv-tube { width: 28px; min-height: 0; height: 76px; }
#view-utilities .ut-tank .level-bar .lv-txt b { font-size: 21px; }
#view-utilities .ut-tank .level-bar .lv-txt small { font-size: 14px; }

/* ------------------------------------------------------------- lower block */
#view-utilities .ut-low { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 12px; margin-top: 6px; border-top: 1px solid var(--line); overflow: hidden; }
#view-utilities .ut-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; white-space: nowrap; }
#view-utilities .ut-cap .cap { overflow: hidden; text-overflow: ellipsis; }
#view-utilities .ut-rows { display: flex; flex-direction: column; gap: 2px; }
#view-utilities .ut-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px 40px; align-items: center; gap: 9px; min-height: 26px; font-size: 14.5px; }
#view-utilities .ut-rows.dense .ut-row { min-height: 23px; }
#view-utilities .ut-row.w {grid-template-columns: 92px minmax(0, 1fr) 44px; }
#view-utilities .ut-row .rid { font-family: var(--num); font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-utilities .ut-row.w .rid { font-family: var(--ui); font-weight: 400; font-size: 14.5px; color: #d4e2f6; }
#view-utilities .ut-row .rv { font-size: 17px; font-weight: 700; text-align: right; white-space: nowrap; }
#view-utilities .ut-row .rv small { font-size: 14px; color: var(--text-mute); font-weight: 600; }
#view-utilities .ut-row .rs { font-family: var(--num); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-align: right; }
#view-utilities .ut-row.off .rid, #view-utilities .ut-row.off .rv { color: #8d9ab0; }
#view-utilities .ut-low .info-grid { margin-top: auto; gap: 7px; }
#view-utilities .ut-low .info-grid .ib { padding: 6px 10px; }
#view-utilities .ut-efb .ut-low .info-grid { margin-top: 2px; }
#view-utilities .ut-efb .ut-low .info-grid .ib { padding: 8px 10px; }

/* POME pond strip */
#view-utilities .ut-ponds { flex: 1; min-height: 0; display: grid; gap: 6px; padding-top: 2px; }
#view-utilities .ut-pond { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 5px 2px 4px; border-radius: 6px;
  background: rgba(14, 34, 66, 0.55); border: 1px solid rgba(80, 140, 230, 0.16); }
#view-utilities .ut-pond .pid { font-size: 15px; font-weight: 700; color: #d6ecff; }
#view-utilities .ut-pond .pt-tube { position: relative; width: 22px; flex: 1; min-height: 40px; max-height: 84px; border-radius: 5px; border: 1.5px solid rgba(140, 180, 230, 0.4); background: rgba(2, 8, 20, 0.85); overflow: hidden; }
#view-utilities .ut-pond .pt-tube > i { position: absolute; left: 2px; right: 2px; bottom: 2px; border-radius: 3px; background: var(--pc); box-shadow: 0 0 10px var(--pc); transition: height .8s ease; }
#view-utilities .ut-pond .pt-tube::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), rgba(200, 220, 255, 0.16) calc(25% - 1px) 25%); }
#view-utilities .ut-pond .pv { font-size: 15px; font-weight: 700; white-space: nowrap; }
#view-utilities .ut-pond .ptp { font-family: var(--num); font-size: 14px; font-weight: 600; letter-spacing: 0.3px; color: var(--pc); white-space: nowrap; }
#view-utilities .ut-pond.hi { border-color: rgba(255, 178, 36, 0.6); }
#view-utilities .ut-pond.hi .pv { color: var(--amber); }