/* Final platform-wide light/dark readability pass — loaded last intentionally. */

/* Shared focus/readability */
body[data-theme="light"],body.theme-light,body.secura-light{
  --bg:#eef5f9;--panel:#ffffff;--surface:#ffffff;--surface-2:#f5f9fc;
  --ink:#102b3d;--text:#102b3d;--muted:#526f80;--line:#cbdde7;--border:#cbdde7;
  --primary:#078fca;--primary2:#066e9e;
}
body[data-theme="dark"],body.theme-dark{
  --bg:#051620;--panel:#0a2636;--surface:#0a2636;--surface-2:#0d3042;
  --ink:#f2f9fc;--text:#f2f9fc;--muted:#b5ccd8;--line:#31576b;--border:#31576b;
  --primary:#24bce8;--primary2:#1398c5;
}

/* Common platform surfaces */
body[data-theme="light"] :is(.panel,.kpi-card,.dash152-chart-card,.dash157-events-panel,.dash157-hydro-panel,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card,.settings-action-card,.settings-asset-panel,.report-builder-card,.role-card,.security-account-card,.sensor-card,.scada-pump-card,.route-capacity-card,.route-style-panel,.route-pipe-panel,.nested-device-panel),
body.theme-light :is(.panel,.kpi-card,.dash152-chart-card,.dash157-events-panel,.dash157-hydro-panel,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card,.settings-action-card,.settings-asset-panel,.report-builder-card,.role-card,.security-account-card,.sensor-card,.scada-pump-card,.route-capacity-card,.route-style-panel,.route-pipe-panel,.nested-device-panel),
body.secura-light :is(.panel,.kpi-card,.dash152-chart-card,.dash157-events-panel,.dash157-hydro-panel,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card,.settings-action-card,.settings-asset-panel,.report-builder-card,.role-card,.security-account-card,.sensor-card,.scada-pump-card,.route-capacity-card,.route-style-panel,.route-pipe-panel,.nested-device-panel){
  background:#fff;border-color:#cbdde7;box-shadow:0 8px 24px rgba(17,62,85,.075);color:#102b3d;
}
body[data-theme="dark"] :is(.panel,.kpi-card,.dash152-chart-card,.dash157-events-panel,.dash157-hydro-panel,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card,.settings-action-card,.settings-asset-panel,.report-builder-card,.role-card,.security-account-card,.sensor-card,.scada-pump-card,.route-capacity-card,.route-style-panel,.route-pipe-panel,.nested-device-panel),
body.theme-dark :is(.panel,.kpi-card,.dash152-chart-card,.dash157-events-panel,.dash157-hydro-panel,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card,.settings-action-card,.settings-asset-panel,.report-builder-card,.role-card,.security-account-card,.sensor-card,.scada-pump-card,.route-capacity-card,.route-style-panel,.route-pipe-panel,.nested-device-panel){
  background:linear-gradient(155deg,#0b2b3d 0%,#082331 100%);border-color:#315d73;box-shadow:0 12px 30px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045);color:#f2f9fc;
}

/* Headings and secondary copy */
body[data-theme="dark"] :is(.panel-head h2,.panel-head h3,.panel-head h4,.kpi-value,.card-value,.gw-chart-card h3,.ww93-chart-card h3,.dash152-chart-card h3,.scada-pump-card h3),
body.theme-dark :is(.panel-head h2,.panel-head h3,.panel-head h4,.kpi-value,.card-value,.gw-chart-card h3,.ww93-chart-card h3,.dash152-chart-card h3,.scada-pump-card h3){color:#f7fcff!important;opacity:1!important}
body[data-theme="dark"] :is(.panel-head small,.kpi-foot,.card-sub,.muted,.gw-chart-card small,.ww93-chart-card small,.dash152-chart-card small),
body.theme-dark :is(.panel-head small,.kpi-foot,.card-sub,.muted,.gw-chart-card small,.ww93-chart-card small,.dash152-chart-card small){color:#b8ced9!important;opacity:1!important}
body[data-theme="light"] :is(.panel-head small,.kpi-foot,.card-sub,.muted),body.theme-light :is(.panel-head small,.kpi-foot,.card-sub,.muted),body.secura-light :is(.panel-head small,.kpi-foot,.card-sub,.muted){color:#5a7484!important;opacity:1!important}

/* Inputs, selects and tables */
body[data-theme="dark"] :is(input,select,textarea),body.theme-dark :is(input,select,textarea){background:#092535!important;color:#eef8fc!important;border-color:#376176!important}
body[data-theme="dark"] :is(input,textarea)::placeholder,body.theme-dark :is(input,textarea)::placeholder{color:#88a9b9!important;opacity:1}
body[data-theme="dark"] option,body.theme-dark option{background:#0a2636;color:#eef8fc}
body[data-theme="dark"] table,body.theme-dark table{color:#eaf5fa}
body[data-theme="dark"] thead th,body.theme-dark thead th{background:#10364a!important;color:#f4fbff!important;border-color:#31586b!important}
body[data-theme="dark"] tbody td,body.theme-dark tbody td{border-color:#274c60!important;color:#dcecf3!important}
body[data-theme="dark"] tbody tr:hover,body.theme-dark tbody tr:hover{background:rgba(36,188,232,.07)!important}

/* Chart readability without altering chart geometry/data */
body[data-theme="dark"] :is(.dash152-chart-card,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card) svg text,
body.theme-dark :is(.dash152-chart-card,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card) svg text{fill:#cfe4ee!important;opacity:1!important}
body[data-theme="dark"] :is(.dash152-chart-card,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card) :is(.chart-legend,.ww93-chart-legend,.gw-chart-legend),
body.theme-dark :is(.dash152-chart-card,.gw-chart-card,.gw182-chart-card,.ww93-chart-card,.weather-live-card) :is(.chart-legend,.ww93-chart-legend,.gw-chart-legend){color:#cfe4ee!important;opacity:1!important}

/* Final operational-performance treatment: high contrast in both themes */
.dash200-performance-grid{gap:14px!important}
.dash200-performance-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.dash200-performance-card:hover{transform:translateY(-2px)}
body[data-theme="light"] .dash200-performance-card,body.theme-light .dash200-performance-card,body.secura-light .dash200-performance-card{
  background:linear-gradient(145deg,#ffffff 0%,color-mix(in srgb,var(--dash200-accent) 4%,#f6fbfd) 100%)!important;
  border-color:color-mix(in srgb,var(--dash200-accent) 34%,#c6dce7)!important;
  box-shadow:0 10px 28px rgba(18,67,91,.09),inset 0 1px 0 #fff!important;
}
body[data-theme="light"] .dash200-ring::before,body.theme-light .dash200-ring::before,body.secura-light .dash200-ring::before{background:#fff!important}
body[data-theme="light"] .dash200-performance-head small,body.theme-light .dash200-performance-head small,body.secura-light .dash200-performance-head small{color:#17394c!important;font-size:14px!important}
body[data-theme="light"] .dash200-performance-sub,body.theme-light .dash200-performance-sub,body.secura-light .dash200-performance-sub{color:#526f80!important;font-size:12px!important}
body[data-theme="light"] .dash200-segments i,body.theme-light .dash200-segments i,body.secura-light .dash200-segments i{background:#d9e7ee!important}
body[data-theme="light"] .dash200-segments i.is-on,body.theme-light .dash200-segments i.is-on,body.secura-light .dash200-segments i.is-on{background:linear-gradient(90deg,color-mix(in srgb,var(--dash200-accent) 78%,white),var(--dash200-accent))!important}

body[data-theme="dark"] .dash200-performance-card,body.theme-dark .dash200-performance-card{
  background:linear-gradient(155deg,#0c3042 0%,#071f2d 100%)!important;
  border-color:color-mix(in srgb,var(--dash200-accent) 48%,#3b6679)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.025),inset 0 1px 0 rgba(255,255,255,.065)!important;
}
body[data-theme="dark"] .dash200-ring,body.theme-dark .dash200-ring{
  background:conic-gradient(color-mix(in srgb,var(--dash200-accent) 90%,#66f2ff) calc(var(--dash200-pct)*1%),#2a5266 0)!important;
  filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--dash200-accent) 42%,transparent))!important;
}
body[data-theme="dark"] .dash200-ring::before,body.theme-dark .dash200-ring::before{background:#082332!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.075)!important}
body[data-theme="dark"] .dash200-ring-inner b,body.theme-dark .dash200-ring-inner b{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.28);font-size:23px!important}
body[data-theme="dark"] .dash200-ring-inner small,body.theme-dark .dash200-ring-inner small{color:#c2d9e3!important}
body[data-theme="dark"] .dash200-performance-head small,body.theme-dark .dash200-performance-head small{color:#f3fbff!important;font-size:14px!important;text-shadow:0 1px 0 rgba(0,0,0,.22)}
body[data-theme="dark"] .dash200-performance-sub,body.theme-dark .dash200-performance-sub{color:#cce1ea!important;font-size:12px!important}
body[data-theme="dark"] .dash200-performance-icon,body.theme-dark .dash200-performance-icon{background:linear-gradient(180deg,color-mix(in srgb,var(--dash200-accent) 25%,#12384b),#0b2b3d)!important;border-color:color-mix(in srgb,var(--dash200-accent) 45%,#315e72)!important}
body[data-theme="dark"] .dash200-segments i,body.theme-dark .dash200-segments i{background:linear-gradient(180deg,#315c70,#21475b)!important;border:1px solid rgba(255,255,255,.025)}
body[data-theme="dark"] .dash200-segments i.is-on,body.theme-dark .dash200-segments i.is-on{background:linear-gradient(90deg,color-mix(in srgb,var(--dash200-accent) 72%,#aef8ff),var(--dash200-accent))!important;box-shadow:0 0 14px color-mix(in srgb,var(--dash200-accent) 44%,transparent)!important}

/* Avoid low-opacity text in the two supported themes */
body[data-theme="dark"] :is(.panel,.kpi-card,.dash200-performance-card) :is(small,p,span),body.theme-dark :is(.panel,.kpi-card,.dash200-performance-card) :is(small,p,span){text-rendering:geometricPrecision}

/* Dashboard executive KPI cards — final modern treatment matching approved visual */
.dash-kpi-modern-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  margin-bottom:16px!important;
  align-items:stretch!important;
}
.dash-kpi-modern{
  --dash-kpi-accent:#22c7f2;
  --dash-kpi-accent-rgb:34,199,242;
  position:relative;
  min-height:168px;
  padding:22px 22px 18px;
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  column-gap:18px;
  direction:ltr;
  border:1px solid rgba(var(--dash-kpi-accent-rgb),.55);
  background:linear-gradient(145deg,#0a2840 0%,#071d30 100%);
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05),0 0 24px rgba(var(--dash-kpi-accent-rgb),.035);
}
.dash-kpi-modern.tone-success{--dash-kpi-accent:#18d9ae;--dash-kpi-accent-rgb:24,217,174}
.dash-kpi-modern.tone-info{--dash-kpi-accent:#19c9f3;--dash-kpi-accent-rgb:25,201,243}
.dash-kpi-modern.tone-warning{--dash-kpi-accent:#ffb43b;--dash-kpi-accent-rgb:255,180,59}
.dash-kpi-modern.tone-danger{--dash-kpi-accent:#ff5b72;--dash-kpi-accent-rgb:255,91,114}
.dash-kpi-modern::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 10% 25%,rgba(var(--dash-kpi-accent-rgb),.12),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 42%);
}
.dash-kpi-modern::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  box-shadow:inset 0 0 40px rgba(var(--dash-kpi-accent-rgb),.035);
}
.dash-kpi-icon{
  grid-column:1;grid-row:1/3;align-self:start;justify-self:start;z-index:2;
  width:72px;height:72px;border-radius:20px;display:grid;place-items:center;
  color:var(--dash-kpi-accent);
  background:linear-gradient(145deg,rgba(var(--dash-kpi-accent-rgb),.18),rgba(4,24,39,.62));
  border:1px solid rgba(var(--dash-kpi-accent-rgb),.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(var(--dash-kpi-accent-rgb),.12);
}
.dash-kpi-icon svg{width:34px!important;height:34px!important;filter:drop-shadow(0 0 7px rgba(var(--dash-kpi-accent-rgb),.42))}
.dash-kpi-copy{
  grid-column:2;grid-row:1/3;z-index:2;min-width:0;direction:rtl;text-align:right;
  display:flex;flex-direction:column;align-items:flex-start;
}
.dash-kpi-title{width:100%;font-size:20px;font-weight:900;line-height:1.3;color:#f2f9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-kpi-value{width:100%;margin-top:14px;font-size:36px;font-weight:900;line-height:1;color:var(--dash-kpi-accent);letter-spacing:-.6px;text-shadow:0 0 18px rgba(var(--dash-kpi-accent-rgb),.16)}
.dash-kpi-sub{width:100%;margin-top:10px;font-size:14px;font-weight:750;color:#bcd0df;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-kpi-footer{
  grid-column:1/3;grid-row:3;z-index:2;display:grid;grid-template-columns:auto minmax(180px,1fr);align-items:center;gap:18px;margin-top:16px;direction:ltr;
}
.dash-kpi-footer.meter-only{grid-template-columns:minmax(0,1fr)}
.dash-kpi-status{
  min-height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  border:1px solid rgba(var(--dash-kpi-accent-rgb),.55);background:rgba(var(--dash-kpi-accent-rgb),.105);
  color:var(--dash-kpi-accent);font-size:12px;font-weight:900;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  direction:rtl;
}
.dash-kpi-status b{font-size:15px;line-height:1;color:var(--dash-kpi-accent)}
.dash-kpi-meter{
  display:grid;grid-template-columns:minmax(90px,1fr) auto;align-items:center;gap:10px;direction:ltr;
}
.dash-kpi-meter-tag{display:none!important}
.dash-kpi-meter-track{
  position:relative;height:14px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,#0f334d,#173c56);border:1px solid rgba(255,255,255,.04);
  box-shadow:inset 0 2px 8px rgba(2,10,18,.34),inset 0 1px 0 rgba(255,255,255,.04);
}
.dash-kpi-meter-fill{
  position:absolute;inset:1px auto 1px 1px;width:max(10px, calc(var(--dash-kpi-pct) * 1% - 2px));max-width:calc(100% - 2px);border-radius:999px;
  background:linear-gradient(90deg,var(--dash-kpi-accent),color-mix(in srgb,var(--dash-kpi-accent) 58%,#d8ffff));
  box-shadow:0 0 14px rgba(var(--dash-kpi-accent-rgb),.30), inset 0 1px 0 rgba(255,255,255,.16);
}
.dash-kpi-meter-fill::after{
  content:"";position:absolute;right:2px;top:50%;width:12px;height:12px;border-radius:50%;transform:translateY(-50%);
  background:#fff;box-shadow:0 0 0 3px rgba(var(--dash-kpi-accent-rgb),.28),0 0 12px rgba(var(--dash-kpi-accent-rgb),.55);
}
.dash-kpi-meter-value{
  min-width:48px;text-align:left;color:#eff8ff;font-size:13px;font-weight:900;letter-spacing:-.2px;
}
.dash-kpi-visual{position:absolute;left:118px;bottom:56px;width:108px;height:64px;z-index:1;opacity:.28;pointer-events:none;display:flex;align-items:end;gap:7px}
.dash-kpi-visual-bars i{width:9px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,rgba(var(--dash-kpi-accent-rgb),.75),rgba(var(--dash-kpi-accent-rgb),.08))}
.dash-kpi-visual-bars i:nth-child(1){height:24%}.dash-kpi-visual-bars i:nth-child(2){height:55%}.dash-kpi-visual-bars i:nth-child(3){height:82%}.dash-kpi-visual-bars i:nth-child(4){height:63%}.dash-kpi-visual-bars i:nth-child(5){height:42%}.dash-kpi-visual-bars i:nth-child(6){height:28%}
.dash-kpi-visual-wave{width:126px;height:58px;left:100px;bottom:52px;display:block;border-radius:50%;opacity:.32;background:radial-gradient(ellipse at 50% 100%,transparent 49%,rgba(var(--dash-kpi-accent-rgb),.85) 51%,rgba(var(--dash-kpi-accent-rgb),.85) 53%,transparent 55%);transform:scaleY(.75)}
.dash-kpi-visual-wave i{display:none}
.dash-kpi-visual-rings{width:104px;height:62px;left:102px;bottom:52px;border:2px solid rgba(var(--dash-kpi-accent-rgb),.25);border-radius:50%;opacity:.22;transform:skewX(-8deg)}
.dash-kpi-visual-rings::before,.dash-kpi-visual-rings::after{content:"";position:absolute;border:1px solid rgba(var(--dash-kpi-accent-rgb),.42);border-radius:50%;inset:10px 14px}.dash-kpi-visual-rings::after{inset:20px 30px}
.dash-kpi-visual-rings i{display:none}

body[data-theme="dark"] .dash-kpi-meter-tag,body.theme-dark .dash-kpi-meter-tag{background:rgba(var(--dash-kpi-accent-rgb),.14);border-color:rgba(var(--dash-kpi-accent-rgb),.30);color:#d9eef7}
body[data-theme="dark"] .dash-kpi-meter-track,body.theme-dark .dash-kpi-meter-track{background:linear-gradient(180deg,#10324a,#0d2940);border-color:rgba(255,255,255,.045)}
body[data-theme="dark"] .dash-kpi-meter-value,body.theme-dark .dash-kpi-meter-value{color:#f1fbff}

/* Light mode keeps same information hierarchy without the dark control-room surface */
body[data-theme="light"] .dash-kpi-modern,body.theme-light .dash-kpi-modern,body.secura-light .dash-kpi-modern{
  background:linear-gradient(145deg,#ffffff 0%,#f5fbfe 100%);
  border-color:rgba(var(--dash-kpi-accent-rgb),.38);
  box-shadow:0 12px 28px rgba(25,77,103,.105),inset 0 1px 0 #fff;
}
body[data-theme="light"] .dash-kpi-modern::before,body.theme-light .dash-kpi-modern::before,body.secura-light .dash-kpi-modern::before{background:radial-gradient(circle at 10% 25%,rgba(var(--dash-kpi-accent-rgb),.08),transparent 30%)}
body[data-theme="light"] .dash-kpi-icon,body.theme-light .dash-kpi-icon,body.secura-light .dash-kpi-icon{background:linear-gradient(145deg,rgba(var(--dash-kpi-accent-rgb),.12),#fff);box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(var(--dash-kpi-accent-rgb),.08)}
body[data-theme="light"] .dash-kpi-title,body.theme-light .dash-kpi-title,body.secura-light .dash-kpi-title{color:#15384b}
body[data-theme="light"] .dash-kpi-sub,body.theme-light .dash-kpi-sub,body.secura-light .dash-kpi-sub{color:#587385}
body[data-theme="light"] .dash-kpi-status,body.theme-light .dash-kpi-status,body.secura-light .dash-kpi-status{background:rgba(var(--dash-kpi-accent-rgb),.085); color:color-mix(in srgb,var(--dash-kpi-accent) 88%,#133549)}
body[data-theme="light"] .dash-kpi-meter-tag,body.theme-light .dash-kpi-meter-tag,body.secura-light .dash-kpi-meter-tag{background:rgba(var(--dash-kpi-accent-rgb),.09);border-color:rgba(var(--dash-kpi-accent-rgb),.22);color:#4b687a}
body[data-theme="light"] .dash-kpi-meter-track,body.theme-light .dash-kpi-meter-track,body.secura-light .dash-kpi-meter-track{background:linear-gradient(180deg,#eaf3f7,#d7e6ee);border-color:#d2e3eb;box-shadow:inset 0 1px 3px rgba(34,71,92,.08)}
body[data-theme="light"] .dash-kpi-meter-value,body.theme-light .dash-kpi-meter-value,body.secura-light .dash-kpi-meter-value{color:#17384b}
body[data-theme="light"] .dash-kpi-visual,body.theme-light .dash-kpi-visual,body.secura-light .dash-kpi-visual{opacity:.20}

@media (max-width:1500px){.dash-kpi-modern-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.dash-kpi-modern{min-height:158px;padding:18px}.dash-kpi-title{font-size:17px}.dash-kpi-value{font-size:31px}.dash-kpi-icon{width:62px;height:62px;border-radius:17px}.dash-kpi-modern{grid-template-columns:66px minmax(0,1fr)}}
@media (max-width:1100px){.dash-kpi-modern-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dash-kpi-title{font-size:19px}.dash-kpi-value{font-size:34px}}
@media (max-width:620px){.dash-kpi-modern-grid{grid-template-columns:1fr!important}.dash-kpi-modern{min-height:158px}.dash-kpi-title{font-size:18px}.dash-kpi-value{font-size:32px}.dash-kpi-footer{gap:10px;grid-template-columns:1fr}.dash-kpi-footer.has-status{grid-template-columns:1fr}.dash-kpi-meter{grid-template-columns:minmax(80px,1fr) auto}.dash-kpi-status{padding-inline:10px;justify-self:start}.dash-kpi-meter-tag{display:none!important}}


/* =========================
   Page-specific KPI systems
   ========================= */

/* Manholes & routes KPIs */
.mhx-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.mhx-kpi{
  --mhx-accent:#17c9f3;--mhx-accent-rgb:23,201,243;
  position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;
  min-height:132px;padding:18px;border-radius:22px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(var(--mhx-accent-rgb),.34);
  background:linear-gradient(145deg,#0a263a,#0b2031 78%);
  box-shadow:0 16px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
}
.mhx-kpi::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--mhx-accent-rgb),.12),transparent 34%),radial-gradient(circle at 100% 0,rgba(var(--mhx-accent-rgb),.08),transparent 26%);pointer-events:none}
.mhx-kpi.tone-success{--mhx-accent:#1fd79b;--mhx-accent-rgb:31,215,155}
.mhx-kpi.tone-info{--mhx-accent:#1abef2;--mhx-accent-rgb:26,190,242}
.mhx-kpi.tone-warning{--mhx-accent:#ffb347;--mhx-accent-rgb:255,179,71}
.mhx-kpi.tone-danger{--mhx-accent:#ff5b72;--mhx-accent-rgb:255,91,114}
.mhx-kpi.tone-neutral{--mhx-accent:#8da5b4;--mhx-accent-rgb:141,165,180}
.mhx-kpi-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:var(--mhx-accent);background:linear-gradient(145deg,rgba(var(--mhx-accent-rgb),.18),rgba(5,23,35,.52));border:1px solid rgba(var(--mhx-accent-rgb),.44);box-shadow:0 10px 18px rgba(var(--mhx-accent-rgb),.11),inset 0 1px 0 rgba(255,255,255,.08);z-index:1}
.mhx-kpi-icon svg{width:28px!important;height:28px!important;filter:drop-shadow(0 0 10px rgba(var(--mhx-accent-rgb),.34))}
.mhx-kpi-copy{min-width:0;display:flex;flex-direction:column;gap:8px;z-index:1}
.mhx-kpi-title{font-size:18px;font-weight:900;color:#f3fbff;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhx-kpi-value{font-size:32px;font-weight:900;line-height:1;color:var(--mhx-accent);text-shadow:0 0 18px rgba(var(--mhx-accent-rgb),.16)}
.mhx-kpi-sub{font-size:13px;font-weight:750;color:#b8cede;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mhx-kpi-side{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px;z-index:1}
.mhx-kpi-pct{min-width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(var(--mhx-accent-rgb),.14);border:1px solid rgba(var(--mhx-accent-rgb),.38);color:#fff;font-size:16px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.mhx-kpi-hint{font-size:11px;font-weight:800;color:#a4c0d1}
.mhx-kpi-meter{grid-column:1/-1;position:relative;height:14px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,#14364b,#17344a);border:1px solid rgba(255,255,255,.045);box-shadow:inset 0 2px 10px rgba(2,10,18,.32);z-index:1}
.mhx-kpi-fill{position:absolute;inset:1px auto 1px 1px;width:max(12px,calc(var(--mhx-pct)*1% - 2px));max-width:calc(100% - 2px);border-radius:999px;background:linear-gradient(90deg,var(--mhx-accent),color-mix(in srgb,var(--mhx-accent) 66%,#ffffff));box-shadow:0 0 16px rgba(var(--mhx-accent-rgb),.34)}
.mhx-kpi-fill::after{content:"";position:absolute;right:3px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);background:#fff;box-shadow:0 0 0 2px rgba(var(--mhx-accent-rgb),.24)}

/* Critical areas KPIs */
.stx-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
.stx-kpi{
  --stx-accent:#16c7ef;--stx-accent-rgb:22,199,239;
  position:relative;padding:18px 18px 16px;border-radius:24px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(var(--stx-accent-rgb),.30);background:linear-gradient(145deg,#0c2538,#071d2f);
  box-shadow:0 15px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
  min-height:150px;
}
.stx-kpi::before{content:"";position:absolute;inset:auto -10% -25% 45%;height:140px;background:radial-gradient(circle,rgba(var(--stx-accent-rgb),.18),transparent 68%);pointer-events:none}
.stx-kpi.tone-success{--stx-accent:#21d99b;--stx-accent-rgb:33,217,155}
.stx-kpi.tone-info{--stx-accent:#16c7ef;--stx-accent-rgb:22,199,239}
.stx-kpi.tone-warning{--stx-accent:#ffb43b;--stx-accent-rgb:255,180,59}
.stx-kpi.tone-danger{--stx-accent:#ff6077;--stx-accent-rgb:255,96,119}
.stx-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.stx-kpi-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:var(--stx-accent);background:rgba(var(--stx-accent-rgb),.12);border:1px solid rgba(var(--stx-accent-rgb),.34)}
.stx-kpi-status{padding:7px 11px;border-radius:999px;background:rgba(var(--stx-accent-rgb),.11);border:1px solid rgba(var(--stx-accent-rgb),.24);color:var(--stx-accent);font-size:11px;font-weight:900}
.stx-kpi-title{position:relative;z-index:1;margin-top:12px;font-size:16px;font-weight:900;color:#f5fbff;line-height:1.35}
.stx-kpi-value{position:relative;z-index:1;margin-top:8px;font-size:28px;font-weight:900;color:var(--stx-accent);line-height:1;text-shadow:0 0 18px rgba(var(--stx-accent-rgb),.18)}
.stx-kpi-sub{position:relative;z-index:1;margin-top:7px;color:#b9cede;font-size:12px;font-weight:750;line-height:1.45}
.stx-kpi-gauge{position:absolute;left:14px;bottom:14px;z-index:1}
.stx-kpi-ring{--ring:calc(var(--stx-pct)*1%);position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--stx-accent) var(--ring),rgba(102,126,144,.18) 0)}
.stx-kpi-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#0c2233;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.stx-kpi-ring b,.stx-kpi-ring small{position:relative;z-index:1;display:block;text-align:center}
.stx-kpi-ring b{font-size:16px;color:#fff;line-height:1}
.stx-kpi-ring small{margin-top:4px;font-size:8px;font-weight:800;color:#a9c0d0}

/* Global weather KPIs */
.gwx-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:16px}
.gwx-kpi{
  --gwx-accent:#22c8f2;--gwx-accent-rgb:34,200,242;
  position:relative;min-height:218px;padding:18px;border-radius:22px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:linear-gradient(145deg,#08263a,#071c2e);border:1px solid rgba(var(--gwx-accent-rgb),.30);
  box-shadow:0 15px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}
.gwx-kpi::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%),radial-gradient(circle at 0 0,rgba(var(--gwx-accent-rgb),.12),transparent 30%);pointer-events:none}
.gwx-kpi.tone-success{--gwx-accent:#1dd8a1;--gwx-accent-rgb:29,216,161}
.gwx-kpi.tone-info{--gwx-accent:#22c8f2;--gwx-accent-rgb:34,200,242}
.gwx-kpi.tone-warning{--gwx-accent:#ffb33d;--gwx-accent-rgb:255,179,61}
.gwx-kpi.tone-danger{--gwx-accent:#ff6077;--gwx-accent-rgb:255,96,119}
.gwx-kpi-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:1}
.gwx-kpi-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--gwx-accent);background:rgba(var(--gwx-accent-rgb),.12);border:1px solid rgba(var(--gwx-accent-rgb),.28)}
.gwx-kpi-micro{padding:6px 10px;border-radius:999px;background:rgba(var(--gwx-accent-rgb),.10);border:1px solid rgba(var(--gwx-accent-rgb),.24);color:var(--gwx-accent);font-size:11px;font-weight:900}
.gwx-kpi-title{position:relative;z-index:1;margin-top:14px;font-size:16px;font-weight:900;color:#f4fbff;line-height:1.4;min-height:42px;white-space:normal;overflow:visible}
.gwx-kpi-value{position:relative;z-index:1;margin-top:4px;font-size:28px;font-weight:900;color:var(--gwx-accent);line-height:1.15;white-space:nowrap}
.gwx-kpi-sub{position:relative;z-index:1;margin-top:7px;font-size:13px;font-weight:750;color:#bad1e0;line-height:1.45;min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gwx-kpi-scale-wrap{position:relative;left:auto;right:auto;bottom:auto;z-index:1;display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:14px;min-height:72px}
.gwx-kpi-scale-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
.gwx-kpi-level{padding:5px 10px;border-radius:999px;background:rgba(var(--gwx-accent-rgb),.11);border:1px solid rgba(var(--gwx-accent-rgb),.20);color:var(--gwx-accent);font-size:11px;font-weight:900;line-height:1.2;white-space:nowrap}
.gwx-kpi-percent{color:#edf9ff;font-size:13px;font-weight:900;letter-spacing:-.2px;line-height:1;white-space:nowrap}
.gwx-kpi-scale{position:relative}
.gwx-kpi-scale-track{position:relative;height:18px;border-radius:999px;padding:3px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;background:linear-gradient(180deg,#0e314a,#0a273d);border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 2px 10px rgba(2,10,18,.34),inset 0 1px 0 rgba(255,255,255,.03)}
.gwx-kpi-scale-track i{display:block;border-radius:999px;background:linear-gradient(180deg,rgba(var(--gwx-accent-rgb),.12),rgba(var(--gwx-accent-rgb),.06));border:1px solid rgba(var(--gwx-accent-rgb),.10)}
.gwx-kpi-scale-track i.is-on{background:linear-gradient(180deg,color-mix(in srgb,var(--gwx-accent) 90%,#ffffff),rgba(var(--gwx-accent-rgb),.30));box-shadow:0 0 10px rgba(var(--gwx-accent-rgb),.20)}
.gwx-kpi-scale-pointer{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:#ffffff;box-shadow:0 0 0 4px rgba(var(--gwx-accent-rgb),.26),0 0 15px rgba(var(--gwx-accent-rgb),.38);border:2px solid var(--gwx-accent)}
.gwx-kpi-scale-pointer::after{content:"";position:absolute;left:50%;bottom:-8px;width:2px;height:8px;background:var(--gwx-accent);transform:translateX(-50%);border-radius:999px;opacity:.85}
.gwx-kpi-scale-labels{display:flex;align-items:center;justify-content:space-between;color:#99b8ca;font-size:11px;font-weight:800}

/* Light theme clarity for all new KPI systems */
body[data-theme="light"] .mhx-kpi,body.theme-light .mhx-kpi,body.secura-light .mhx-kpi,
body[data-theme="light"] .stx-kpi,body.theme-light .stx-kpi,body.secura-light .stx-kpi,
body[data-theme="light"] .gwx-kpi,body.theme-light .gwx-kpi,body.secura-light .gwx-kpi{
  background:linear-gradient(145deg,#ffffff,#f4fafc);box-shadow:0 12px 28px rgba(24,74,100,.10),inset 0 1px 0 #fff;
}
body[data-theme="light"] .mhx-kpi-title,body.theme-light .mhx-kpi-title,body.secura-light .mhx-kpi-title,
body[data-theme="light"] .stx-kpi-title,body.theme-light .stx-kpi-title,body.secura-light .stx-kpi-title,
body[data-theme="light"] .gwx-kpi-title,body.theme-light .gwx-kpi-title,body.secura-light .gwx-kpi-title{color:#18394b}
body[data-theme="light"] .mhx-kpi-sub,body.theme-light .mhx-kpi-sub,body.secura-light .mhx-kpi-sub,
body[data-theme="light"] .stx-kpi-sub,body.theme-light .stx-kpi-sub,body.secura-light .stx-kpi-sub,
body[data-theme="light"] .gwx-kpi-sub,body.theme-light .gwx-kpi-sub,body.secura-light .gwx-kpi-sub,
body[data-theme="light"] .mhx-kpi-hint,body.theme-light .mhx-kpi-hint,body.secura-light .mhx-kpi-hint,
body[data-theme="light"] .stx-kpi-ring small,body.theme-light .stx-kpi-ring small,body.secura-light .stx-kpi-ring small{color:#5b7687}
body[data-theme="light"] .mhx-kpi-pct,body.theme-light .mhx-kpi-pct,body.secura-light .mhx-kpi-pct{color:#15384b;background:rgba(var(--mhx-accent-rgb),.10)}
body[data-theme="light"] .mhx-kpi-meter,body.theme-light .mhx-kpi-meter,body.secura-light .mhx-kpi-meter{background:linear-gradient(180deg,#e9f3f8,#d9e8ef);border-color:#d4e3ea;box-shadow:inset 0 1px 3px rgba(18,55,76,.08)}
body[data-theme="light"] .stx-kpi-ring::before,body.theme-light .stx-kpi-ring::before,body.secura-light .stx-kpi-ring::before{background:#ffffff;box-shadow:inset 0 1px 0 rgba(17,56,77,.05)}
body[data-theme="light"] .stx-kpi-ring b,body.theme-light .stx-kpi-ring b,body.secura-light .stx-kpi-ring b{color:#15384b}
body[data-theme="light"] .gwx-kpi-level,body.theme-light .gwx-kpi-level,body.secura-light .gwx-kpi-level{background:rgba(var(--gwx-accent-rgb),.09);border-color:rgba(var(--gwx-accent-rgb),.22)}
body[data-theme="light"] .gwx-kpi-percent,body.theme-light .gwx-kpi-percent,body.secura-light .gwx-kpi-percent{color:#16394d}
body[data-theme="light"] .gwx-kpi-scale-track,body.theme-light .gwx-kpi-scale-track,body.secura-light .gwx-kpi-scale-track{background:linear-gradient(180deg,#eaf4f8,#d8e8ef);border-color:#d7e5ec;box-shadow:inset 0 1px 3px rgba(20,58,79,.08)}
body[data-theme="light"] .gwx-kpi-scale-track i,body.theme-light .gwx-kpi-scale-track i,body.secura-light .gwx-kpi-scale-track i{background:linear-gradient(180deg,#edf6fb,#e0edf3);border-color:#d7e6ed}
body[data-theme="light"] .gwx-kpi-scale-labels,body.theme-light .gwx-kpi-scale-labels,body.secura-light .gwx-kpi-scale-labels{color:#597486}
body[data-theme="light"] .gwx-kpi-micro,body.theme-light .gwx-kpi-micro,body.secura-light .gwx-kpi-micro,
body[data-theme="light"] .stx-kpi-status,body.theme-light .stx-kpi-status,body.secura-light .stx-kpi-status{background:rgba(var(--gwx-accent-rgb),.08)}

@media (max-width:1500px){.mhx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gwx-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.mhx-kpi-grid,.stx-kpi-grid{grid-template-columns:1fr}.gwx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mhx-kpi{grid-template-columns:58px minmax(0,1fr) auto}.mhx-kpi-title,.stx-kpi-title{font-size:17px}.gwx-kpi-title{font-size:15px}}
@media (max-width:620px){.gwx-kpi-grid{grid-template-columns:1fr}.mhx-kpi{grid-template-columns:54px minmax(0,1fr)}.mhx-kpi-side{grid-column:1/-1;justify-self:start;flex-direction:row}.mhx-kpi-pct{width:auto;min-width:62px;height:38px;border-radius:12px;padding-inline:10px}.stx-kpi-gauge{position:static;margin-top:10px}.gwx-kpi{min-height:205px}.gwx-kpi-scale-wrap{gap:7px}.gwx-kpi-scale-labels{font-size:10px}}

/* V203 — maps always at the bottom of every platform page and full content width */
#content > .page-map-bottom,
#content > .page-map-fullwidth{
  width:100%!important;
  max-width:none!important;
  grid-column:1 / -1!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
  margin-left:0!important;
  margin-right:0!important;
  margin-top:16px!important;
  margin-bottom:0!important;
}
#content > .page-map-bottom .panel-body,
#content > .page-map-fullwidth .panel-body{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
#content > .page-map-bottom .map,
#content > .page-map-fullwidth .map,
#content > .page-map-bottom .map-engine-v24,
#content > .page-map-fullwidth .map-engine-v24,
#content > .page-map-bottom .natural-map,
#content > .page-map-fullwidth .natural-map{
  width:100%!important;
  max-width:none!important;
  min-height:480px!important;
  height:clamp(480px,58vh,720px)!important;
  box-sizing:border-box!important;
}
#content .page-grid-single{
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
}
#content .page-grid-single > .panel{
  grid-column:1/-1!important;
  width:100%!important;
  max-width:none!important;
}
@media (max-width:900px){
  #content > .page-map-bottom .map,
  #content > .page-map-fullwidth .map,
  #content > .page-map-bottom .map-engine-v24,
  #content > .page-map-fullwidth .map-engine-v24,
  #content > .page-map-bottom .natural-map,
  #content > .page-map-fullwidth .natural-map{min-height:400px!important;height:52vh!important}
}


/* Global KPI/card icon cleanup: remove colored icon frames across the platform */
.dash-kpi-icon,
.dash200-performance-icon,
.mhx-kpi-icon,
.stx-kpi-icon,
.gwx-kpi-icon,
.kpi-icon,
.dam-mgmt-titleicon{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.dash-kpi-icon::before,
.dash200-performance-icon::before,
.mhx-kpi-icon::before,
.stx-kpi-icon::before,
.gwx-kpi-icon::before,
.kpi-icon::before,
.dam-mgmt-titleicon::before,
.dash-kpi-icon::after,
.dash200-performance-icon::after,
.mhx-kpi-icon::after,
.stx-kpi-icon::after,
.gwx-kpi-icon::after,
.kpi-icon::after,
.dam-mgmt-titleicon::after{
  display:none!important;
  content:none!important;
}
.kpi-card:hover .kpi-icon,
body[data-theme="dark"] .dash200-performance-icon,
body.theme-dark .dash200-performance-icon,
body[data-theme="light"] .dash-kpi-icon,
body.theme-light .dash-kpi-icon,
body.secura-light .dash-kpi-icon,
body[data-theme="light"] .mhx-kpi-icon,
body.theme-light .mhx-kpi-icon,
body.secura-light .mhx-kpi-icon,
body[data-theme="light"] .stx-kpi-icon,
body.theme-light .stx-kpi-icon,
body.secura-light .stx-kpi-icon,
body[data-theme="light"] .gwx-kpi-icon,
body.theme-light .gwx-kpi-icon,
body.secura-light .gwx-kpi-icon,
body[data-theme="light"] .kpi-icon,
body.theme-light .kpi-icon,
body.secura-light .kpi-icon{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}


/* Minimal KPI visuals across the platform: remove decorative shapes and reduce color clutter */
.dash-kpi-visual{
  display:none!important;
}
.dash-kpi-modern::before,
.dash-kpi-modern::after,
.mhx-kpi::before,
.stx-kpi::before,
.gwx-kpi::before{
  display:none!important;
  content:none!important;
}
.dash-kpi-modern,
.mhx-kpi,
.stx-kpi,
.gwx-kpi{
  background-image:linear-gradient(145deg,#08263a,#071f31)!important;
}
body[data-theme="light"] .dash-kpi-modern,
body.theme-light .dash-kpi-modern,
body.secura-light .dash-kpi-modern,
body[data-theme="light"] .mhx-kpi,
body.theme-light .mhx-kpi,
body.secura-light .mhx-kpi,
body[data-theme="light"] .stx-kpi,
body.theme-light .stx-kpi,
body.secura-light .stx-kpi,
body[data-theme="light"] .gwx-kpi,
body.theme-light .gwx-kpi,
body.secura-light .gwx-kpi{
  background-image:linear-gradient(145deg,#ffffff,#f7fbfd)!important;
}
.dash-kpi-value,
.mhx-kpi-value,
.stx-kpi-value,
.gwx-kpi-value{
  text-shadow:none!important;
}
.dash-kpi-meter-fill,
.mhx-kpi-fill,
.gwx-kpi-scale-track i.is-on,
.gwx-kpi-scale-pointer,
.stx-kpi-ring{
  box-shadow:none!important;
}
.dash-kpi-meter-fill::after,
.mhx-kpi-fill::after,
.gwx-kpi-scale-pointer::after{
  box-shadow:none!important;
}


/* Global icon scale + clarity */
.kpi-icon{min-width:40px!important;min-height:40px!important}
.kpi-icon .app-ui-icon,.kpi-icon .app-ui-icon-3d{transform:scale(1.18);transform-origin:center}
.dash-kpi-icon,.dash200-performance-icon,.mhx-kpi-icon,.stx-kpi-icon,.gwx-kpi-icon{width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important}
.dash-kpi-icon .app-ui-icon,.dash-kpi-icon .app-ui-icon-3d,
.dash200-performance-icon .app-ui-icon,.dash200-performance-icon .app-ui-icon-3d,
.mhx-kpi-icon .app-ui-icon,.mhx-kpi-icon .app-ui-icon-3d,
.stx-kpi-icon .app-ui-icon,.stx-kpi-icon .app-ui-icon-3d,
.gwx-kpi-icon .app-ui-icon,.gwx-kpi-icon .app-ui-icon-3d{transform:scale(1.22);transform-origin:center}
.secura-sidebar .secura-nav-icon{width:40px!important;height:40px!important;min-width:40px!important}
.secura-sidebar .secura-nav-icon .app-ui-icon,.secura-sidebar .secura-nav-icon .app-ui-icon-3d{transform:scale(1.14);transform-origin:center}
.dam-mgmt-titleicon{width:50px!important;height:50px!important;flex:0 0 50px!important}
.dam-mgmt-titleicon .app-ui-icon,.dam-mgmt-titleicon .app-ui-icon-3d{transform:scale(1.18);transform-origin:center}
.weather-big-icon:has(.app-ui-icon-3d),.weather-big-icon .app-ui-icon-3d{width:44px!important;height:44px!important}
@media (max-width:1100px){
  .dash-kpi-icon,.dash200-performance-icon,.mhx-kpi-icon,.stx-kpi-icon,.gwx-kpi-icon{width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important}
}


/* Remove redundant indicator labels from KPI meters across the platform */
.dash-kpi-meter-tag{display:none!important}
.dash-kpi-meter{grid-template-columns:minmax(90px,1fr) auto!important}
@media (max-width:620px){.dash-kpi-meter{grid-template-columns:minmax(80px,1fr) auto!important}}


/* Semantic dashboard/street KPI icons */
.dash-kpi-icon.is-pump-scada,.dash200-performance-icon.is-pump-scada,.stx-kpi-icon.is-pump-scada{display:grid;place-items:center}
.dash-kpi-icon.is-pump-scada .kpi-pump-scada-icon{width:44px!important;height:44px!important}
.dash200-performance-icon.is-pump-scada .kpi-pump-scada-icon{width:34px!important;height:34px!important}
.stx-kpi-icon.is-pump-scada .kpi-pump-scada-icon{width:38px!important;height:38px!important}


/* Real semantic KPI icons */
.semantic-metric-icon{width:44px;height:44px;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(7,62,91,.18))}
.dash-kpi-icon .semantic-metric-icon,.mhx-kpi-icon .semantic-metric-icon,.stx-kpi-icon .semantic-metric-icon,.gwx-kpi-icon .semantic-metric-icon{width:46px;height:46px}
.semantic-x-logo{width:44px;height:44px;display:block;color:currentColor;fill:currentColor;filter:drop-shadow(0 4px 10px rgba(7,62,91,.22))}
.dash-kpi-icon .semantic-x-logo,.mhx-kpi-icon .semantic-x-logo,.stx-kpi-icon .semantic-x-logo,.gwx-kpi-icon .semantic-x-logo{width:46px;height:46px}
.dash200-performance-icon .semantic-x-logo{width:34px;height:34px}
.dash200-performance-icon .semantic-metric-icon{width:34px;height:34px}
@media (max-width:1100px){.semantic-metric-icon{width:40px;height:40px}}


/* KPI footer alignment fix — consistent meter position and width across all cards */
.dash-kpi-footer.has-status{
  grid-template-columns:160px minmax(0,1fr)!important;
  column-gap:14px!important;
  align-items:center!important;
}
.dash-kpi-status{
  width:160px!important;
  min-width:160px!important;
  max-width:160px!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.dash-kpi-meter{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:8px!important;
  align-items:center!important;
}
.dash-kpi-meter-track{
  width:100%!important;
  min-width:0!important;
}
.dash-kpi-meter-value{
  min-width:42px!important;
  width:42px!important;
  text-align:center!important;
  white-space:nowrap!important;
}
@media (max-width:900px){
  .dash-kpi-footer.has-status{grid-template-columns:140px minmax(0,1fr)!important}
  .dash-kpi-status{width:140px!important;min-width:140px!important;max-width:140px!important}
}
@media (max-width:620px){
  .dash-kpi-footer.has-status{grid-template-columns:1fr!important;row-gap:10px!important}
  .dash-kpi-status{width:auto!important;min-width:0!important;max-width:none!important;justify-self:start!important}
  .dash-kpi-meter{grid-template-columns:minmax(0,1fr) 42px!important}
}


/* V238 — critical areas KPI row unified into one horizontal row */


/* V239 — replace bulky circular readiness gauges in Critical Areas KPIs with compact bottom meters */
.stx-kpi{display:flex;flex-direction:column;min-height:150px!important}
.stx-kpi-gauge,.stx-kpi-ring{display:none!important}
.stx-kpi-meter{position:relative;z-index:1;margin-top:auto;padding-top:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;direction:ltr}
.stx-kpi-meter-track{height:9px;border-radius:999px;overflow:hidden;background:#12384f;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 1px 4px rgba(0,0,0,.25)}
.stx-kpi-meter-track span{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,var(--stx-accent),color-mix(in srgb,var(--stx-accent) 58%,#dfffff));box-shadow:0 0 10px rgba(var(--stx-accent-rgb),.28);transition:width .35s ease}
.stx-kpi-meter>b{font-size:11px;color:#effaff;min-width:34px;text-align:left}
body[data-theme="light"] .stx-kpi-meter-track,body.theme-light .stx-kpi-meter-track,body.secura-light .stx-kpi-meter-track{background:#e3edf2;border-color:#d3e2e9}
body[data-theme="light"] .stx-kpi-meter>b,body.theme-light .stx-kpi-meter>b,body.secura-light .stx-kpi-meter>b{color:#183b4e}


/* V240 — critical areas cards aligned like dashboard cards: no micro badges, title at top */
.stx-kpi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:1}
.stx-kpi .stx-kpi-title{margin-top:0;flex:1;min-height:44px;display:flex;align-items:flex-start;justify-content:flex-end;text-align:right}
.stx-kpi .stx-kpi-icon{flex:0 0 auto;width:46px;height:46px;border-radius:14px}
.stx-kpi .stx-kpi-value{margin-top:10px}
.stx-kpi .stx-kpi-sub{margin-top:8px;min-height:20px}
.stx-kpi .stx-kpi-top,.stx-kpi .stx-kpi-status{display:none!important}
@media (max-width:1400px){.stx-kpi .stx-kpi-title{font-size:15px;min-height:40px}.stx-kpi .stx-kpi-value{font-size:26px}}

/* V243 — restore Global Weather KPI cards only; do not affect other pages */
.gwx-kpi-grid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.gwx-kpi{
  min-height:222px!important;
  padding:16px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
.gwx-kpi-head{
  min-height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.gwx-kpi-icon{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  flex:0 0 44px!important;
  border-radius:14px!important;
}
.gwx-kpi-icon .app-ui-icon,
.gwx-kpi-icon .app-ui-icon-3d{
  transform:scale(1)!important;
}
.gwx-kpi-micro{
  flex:0 0 auto!important;
  padding:6px 10px!important;
  font-size:10px!important;
  white-space:nowrap!important;
}
.gwx-kpi-title{
  margin-top:12px!important;
  min-height:24px!important;
  font-size:16px!important;
  line-height:1.35!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:right!important;
}
.gwx-kpi-value{
  margin-top:8px!important;
  font-size:29px!important;
  line-height:1.15!important;
  white-space:normal!important;
  overflow:visible!important;
  text-align:right!important;
}
.gwx-kpi-sub{
  margin-top:6px!important;
  min-height:20px!important;
  font-size:12px!important;
  line-height:1.4!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-align:right!important;
}
.gwx-kpi-scale-wrap{
  margin-top:auto!important;
  padding-top:12px!important;
  min-height:66px!important;
  gap:7px!important;
}
.gwx-kpi-scale-head{min-height:24px!important}
.gwx-kpi-scale-track{height:16px!important}
.gwx-kpi-scale-labels{font-size:10px!important}
@media (max-width:1500px){
  .gwx-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:980px){
  .gwx-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:620px){
  .gwx-kpi-grid{grid-template-columns:1fr!important}
}


/* V244 — Global Weather KPI visual alignment: icon + title same RTL direction */
.gwx-kpi{direction:rtl!important;text-align:right!important}
.gwx-kpi-head{
  direction:rtl!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:54px!important;
}
.gwx-kpi-heading{
  min-width:0!important;
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  direction:rtl!important;
}
.gwx-kpi-heading .gwx-kpi-icon{
  order:0!important;
  flex:0 0 44px!important;
  margin:0!important;
}
.gwx-kpi-heading .gwx-kpi-title{
  order:1!important;
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  text-align:right!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-size:16px!important;
  line-height:1.35!important;
}
.gwx-kpi-micro{
  flex:0 0 auto!important;
  align-self:flex-start!important;
  margin:0!important;
}
.gwx-kpi-value,.gwx-kpi-sub{
  width:100%!important;
  text-align:right!important;
  direction:rtl!important;
}
.gwx-kpi-value{margin-top:10px!important}
.gwx-kpi-sub{margin-top:6px!important}
.gwx-kpi-scale-head,.gwx-kpi-scale-labels{direction:rtl!important}
@media(max-width:1500px){
  .gwx-kpi-heading{gap:8px!important}
  .gwx-kpi-heading .gwx-kpi-title{font-size:15px!important}
}

/* V253 — Global KPI card alignment: icon top-left, title/copy top-right */
.kpi-card,.cmp-kpi,.mon-kpi,.mon-perf,.mhx-kpi,.stx-kpi,.gwx-kpi,.dash200-performance-card{
  position:relative!important;
  direction:rtl!important;
  text-align:right!important;
}

/* Common icon anchor */
.kpi-card .kpi-icon,
.cmp-kpi .cmp-kpi-icon,
.mon-kpi .mon-kpi-icon,
.mon-perf .mon-perf-icon,
.mhx-kpi .mhx-kpi-icon,
.stx-kpi .stx-kpi-icon,
.gwx-kpi .gwx-kpi-icon,
.dash200-performance-card .dash200-performance-icon{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  right:auto!important;
  margin:0!important;
  z-index:3!important;
  flex:0 0 auto!important;
}

/* Generic KPI cards */
.kpi-card{padding-top:16px!important}
.kpi-card .kpi-head{display:block!important;padding-left:58px!important;min-height:38px!important;text-align:right!important}
.kpi-card .kpi-head>span:first-child{display:block!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important}
.kpi-card .kpi-value,.kpi-card .kpi-foot{text-align:right!important}

/* Complaints + X monitoring cards */
.cmp-kpi,.mon-kpi,.mon-perf{display:block!important;padding:16px!important}
.cmp-kpi>div,.mon-kpi>div,.mon-perf>div{padding-left:58px!important;min-width:0!important;align-items:flex-start!important;text-align:right!important}
.cmp-kpi small,.mon-kpi small,.mon-perf small{display:block!important;min-height:32px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35!important}
.cmp-kpi b,.cmp-kpi em,.mon-kpi b,.mon-kpi em,.mon-perf b,.mon-perf em{display:block!important;text-align:right!important}

/* Manholes */
.mhx-kpi{display:block!important;padding:16px!important;min-height:160px!important}
.mhx-kpi .mhx-kpi-copy{padding-left:70px!important;min-width:0!important;text-align:right!important}
.mhx-kpi .mhx-kpi-title{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;min-height:42px!important}
.mhx-kpi .mhx-kpi-value,.mhx-kpi .mhx-kpi-sub{text-align:right!important}
.mhx-kpi .mhx-kpi-side{position:absolute!important;left:14px!important;bottom:34px!important;right:auto!important;z-index:2!important}

/* Critical areas */
.stx-kpi{padding:16px!important}
.stx-kpi .stx-kpi-head{display:block!important;min-height:44px!important;padding-left:58px!important}
.stx-kpi .stx-kpi-title{display:block!important;min-height:40px!important;margin:0!important;text-align:right!important;justify-content:initial!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.stx-kpi .stx-kpi-value,.stx-kpi .stx-kpi-sub{text-align:right!important}

/* Global weather */
.gwx-kpi{padding:16px!important}
.gwx-kpi .gwx-kpi-head{display:block!important;min-height:46px!important;padding-left:58px!important}
.gwx-kpi .gwx-kpi-heading{display:block!important;text-align:right!important}
.gwx-kpi .gwx-kpi-title{margin:0!important;min-height:40px!important;text-align:right!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.gwx-kpi .gwx-kpi-micro{position:absolute!important;top:62px!important;right:16px!important;left:auto!important}
.gwx-kpi .gwx-kpi-value{margin-top:28px!important;text-align:right!important}
.gwx-kpi .gwx-kpi-sub{text-align:right!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

/* Performance-style cards */
.dash200-performance-card{padding-top:16px!important}
.dash200-performance-card .dash200-performance-head{padding-left:72px!important;min-height:46px!important;text-align:right!important}

@media(max-width:620px){
  .kpi-card .kpi-icon,.cmp-kpi .cmp-kpi-icon,.mon-kpi .mon-kpi-icon,.mon-perf .mon-perf-icon,.mhx-kpi .mhx-kpi-icon,.stx-kpi .stx-kpi-icon,.gwx-kpi .gwx-kpi-icon,.dash200-performance-card .dash200-performance-icon{top:12px!important;left:12px!important}
}

/* V254 — restore clean Global Weather KPI card composition after V253 global alignment */
.gwx-kpi-grid{
  align-items:stretch!important;
}
.gwx-kpi{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:218px!important;
  padding:16px!important;
  direction:rtl!important;
  text-align:right!important;
}
.gwx-kpi .gwx-kpi-head{
  position:relative!important;
  display:block!important;
  min-height:66px!important;
  padding:0!important;
  direction:rtl!important;
  text-align:right!important;
}
.gwx-kpi .gwx-kpi-heading{
  display:block!important;
  min-width:0!important;
  padding:0!important;
  direction:rtl!important;
  text-align:right!important;
}
.gwx-kpi .gwx-kpi-icon{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  width:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  z-index:3!important;
}
.gwx-kpi .gwx-kpi-title{
  display:block!important;
  margin:0!important;
  padding:0 0 0 58px!important;
  min-height:42px!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1.35!important;
  text-align:right!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.gwx-kpi .gwx-kpi-micro{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:100%!important;
  margin:8px 0 0 auto!important;
  padding:5px 10px!important;
  font-size:10px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.gwx-kpi .gwx-kpi-value{
  width:100%!important;
  margin:8px 0 0!important;
  font-size:28px!important;
  line-height:1.15!important;
  text-align:right!important;
  white-space:normal!important;
}
.gwx-kpi .gwx-kpi-sub{
  width:100%!important;
  min-height:20px!important;
  margin:6px 0 0!important;
  font-size:12px!important;
  line-height:1.4!important;
  text-align:right!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.gwx-kpi .gwx-kpi-scale-wrap{
  width:100%!important;
  margin-top:auto!important;
  padding-top:12px!important;
}
.gwx-kpi .gwx-kpi-scale-head,
.gwx-kpi .gwx-kpi-scale-labels{
  direction:rtl!important;
}
@media(max-width:1500px){
  .gwx-kpi .gwx-kpi-title{font-size:15px!important;padding-left:54px!important}
  .gwx-kpi .gwx-kpi-icon{width:40px!important;height:40px!important}
  .gwx-kpi .gwx-kpi-value{font-size:26px!important}
}


/* V257 — clean specialized KPI icon/percentage composition (manholes + critical areas) */
/* Manholes: title at top-right, plain icon top-left, no floating percentage badge */
.mhx-kpi{
  display:flex!important;
  flex-direction:column!important;
  min-height:170px!important;
  padding:16px!important;
  position:relative!important;
}
.mhx-kpi .mhx-kpi-icon{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  right:auto!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--mhx-accent)!important;
  display:grid!important;
  place-items:center!important;
}
.mhx-kpi .mhx-kpi-icon svg,
.mhx-kpi .mhx-kpi-icon .app-ui-icon,
.mhx-kpi .mhx-kpi-icon .app-ui-icon-3d{
  width:34px!important;
  height:34px!important;
  transform:none!important;
  filter:drop-shadow(0 0 7px rgba(var(--mhx-accent-rgb),.28))!important;
}
.mhx-kpi .mhx-kpi-copy{
  padding:0 0 0 56px!important;
  min-width:0!important;
  text-align:right!important;
  direction:rtl!important;
}
.mhx-kpi .mhx-kpi-title{
  min-height:42px!important;
  margin:0!important;
  font-size:18px!important;
  line-height:1.3!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.mhx-kpi .mhx-kpi-value{margin-top:8px!important;text-align:right!important}
.mhx-kpi .mhx-kpi-sub{margin-top:7px!important;text-align:right!important;white-space:normal!important}
.mhx-kpi .mhx-kpi-side{display:none!important}
.mhx-kpi .mhx-kpi-meter{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  margin-top:auto!important;
}

/* Critical areas: same visual rule — no framed icon box, icon sits cleanly top-left */
.stx-kpi{
  display:flex!important;
  flex-direction:column!important;
  min-height:164px!important;
  padding:16px!important;
  position:relative!important;
}
.stx-kpi .stx-kpi-head{
  display:block!important;
  min-height:46px!important;
  padding:0 0 0 56px!important;
  position:relative!important;
}
.stx-kpi .stx-kpi-title{
  min-height:42px!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1.3!important;
  text-align:right!important;
}
.stx-kpi .stx-kpi-icon{
  position:absolute!important;
  top:14px!important;
  left:14px!important;
  right:auto!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--stx-accent)!important;
  display:grid!important;
  place-items:center!important;
}
.stx-kpi .stx-kpi-icon svg,
.stx-kpi .stx-kpi-icon .app-ui-icon,
.stx-kpi .stx-kpi-icon .app-ui-icon-3d,
.stx-kpi .stx-kpi-icon .semantic-metric-icon,
.stx-kpi .stx-kpi-icon .kpi-pump-scada-icon{
  width:34px!important;
  height:34px!important;
  transform:none!important;
  filter:drop-shadow(0 0 7px rgba(var(--stx-accent-rgb),.28))!important;
}
.stx-kpi .stx-kpi-value{margin-top:8px!important;text-align:right!important}
.stx-kpi .stx-kpi-sub{margin-top:7px!important;text-align:right!important}
.stx-kpi .stx-kpi-meter{margin-top:auto!important;padding-top:10px!important}

@media(max-width:1100px){
  .mhx-kpi .mhx-kpi-icon,.stx-kpi .stx-kpi-icon{top:12px!important;left:12px!important}
}

/* V259 — distinct filled water-level sensor icon for manhole sensor KPI */
.sensor-level-real{object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.22))!important}
.dash-kpi-icon .sensor-level-real{width:48px!important;height:48px!important}


/* V262 — Manholes & Routes KPI cards in one horizontal row */
@media (min-width:1501px){
  .mhx-kpi-grid{
    display:grid!important;
    grid-template-columns:repeat(9,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
    margin-bottom:16px!important;
  }
  .mhx-kpi{
    min-width:0!important;
    min-height:150px!important;
    padding:14px 12px 12px!important;
    border-radius:18px!important;
  }
  .mhx-kpi .mhx-kpi-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    top:12px!important;
    left:12px!important;
  }
  .mhx-kpi .mhx-kpi-icon svg,
  .mhx-kpi .mhx-kpi-icon .app-ui-icon,
  .mhx-kpi .mhx-kpi-icon .app-ui-icon-3d,
  .mhx-kpi .mhx-kpi-icon .semantic-metric-icon{
    width:28px!important;
    height:28px!important;
  }
  .mhx-kpi .mhx-kpi-copy{
    padding-left:50px!important;
    min-width:0!important;
  }
  .mhx-kpi .mhx-kpi-title{
    min-height:38px!important;
    font-size:14px!important;
    line-height:1.3!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .mhx-kpi .mhx-kpi-value{
    margin-top:5px!important;
    font-size:27px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  .mhx-kpi .mhx-kpi-sub{
    margin-top:6px!important;
    font-size:10px!important;
    line-height:1.35!important;
    min-height:28px!important;
  }
  .mhx-kpi .mhx-kpi-meter{
    left:12px!important;
    right:12px!important;
    bottom:10px!important;
    height:9px!important;
  }
}