/* Shared module: kpi — auto-split from the old single styles.css, 52 rule block(s). Do not duplicate class names across files. */

.kpi-grid{grid-template-columns:repeat(6,minmax(140px,1fr));margin-bottom:15px}

.kpi-card{background:var(--panel);border:1px solid #dce8ef;border-radius:16px;padding:15px;box-shadow:var(--shadow);position:relative;overflow:hidden}

.kpi-card::after{content:"";position:absolute;left:-15px;top:-15px;width:70px;height:70px;border-radius:50%;background:rgba(20,135,180,.06)}

.kpi-head{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}

.kpi-icon{width:35px;height:35px;border-radius:10px;background:#e8f5fb;display:grid;place-items:center;font-size:19px}

.kpi-value{font-size:26px;font-weight:600;margin-top:8px}

.kpi-foot{font-size:11px;color:var(--muted);margin-top:4px}

@media (max-width:1250px){
.kpi-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:900px){
.kpi-grid,.sensor-grid{grid-template-columns:repeat(2,1fr)}
}

body[data-theme="dark"] .page-header p,body[data-theme="dark"] .kpi-head,body[data-theme="dark"] .kpi-foot,body[data-theme="dark"] .sensor-card small,body[data-theme="dark"] .status-row small,body[data-theme="dark"] .profile-summary p{color:#8faabb!important}

.kpi-grid,
.dam-mgmt-kpis,
.settings-kpis,
.mr74-kpis,
.ww77-kpis,
.waterway-kpis,
.dam129-tab-kpis,
.dam129-cost-kpis,
.user-kpi-grid,
.weather-kpi-grid,
.compact-kpis,
.v151-overview-grid,
.v154-user-audit-kpis{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  gap:12px!important;
  overflow:visible!important;
  grid-template-columns:none!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  padding-bottom:0!important;
  scroll-snap-type:none!important;
}

.kpi-grid>.kpi-card,
.dam-mgmt-kpis>.kpi-card,
.settings-kpis>.kpi-card,
.mr74-kpis>.kpi-card,
.ww77-kpis>.kpi-card,
.waterway-kpis>.kpi-card,
.dam129-tab-kpis>.kpi-card{
  flex:1 1 calc((100% - 60px)/6)!important;
  min-width:150px!important;
  max-width:none!important;
  width:auto!important;
  min-height:116px;
  box-sizing:border-box;
}

.user-kpi-grid>.kpi-card,
.weather-kpi-grid>.kpi-card,
.compact-kpis>.kpi-card,
.v151-overview-grid>.kpi-card,
.v154-user-audit-kpis>.kpi-card{
  flex:1 1 calc((100% - 36px)/4)!important;
  min-width:170px!important;
  max-width:none!important;
  width:auto!important;
  box-sizing:border-box;
}

.dam129-cost-kpis>.kpi-card{
  flex:1 1 calc((100% - 24px)/3)!important;
  min-width:180px!important;
  max-width:none!important;
  width:auto!important;
  box-sizing:border-box;
}

.kpi-grid>.kpi-card,
.dam-mgmt-kpis>.kpi-card,
.settings-kpis>.kpi-card,
.mr74-kpis>.kpi-card,
.ww77-kpis>.kpi-card,
.waterway-kpis>.kpi-card,
.dam129-tab-kpis>.kpi-card,
.dam129-cost-kpis>.kpi-card,
.user-kpi-grid>.kpi-card,
.weather-kpi-grid>.kpi-card,
.compact-kpis>.kpi-card,
.v151-overview-grid>.kpi-card,
.v154-user-audit-kpis>.kpi-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

@media (max-width:1200px){
.kpi-grid>.kpi-card,
  .dam-mgmt-kpis>.kpi-card,
  .settings-kpis>.kpi-card,
  .mr74-kpis>.kpi-card,
  .ww77-kpis>.kpi-card,
  .waterway-kpis>.kpi-card,
  .dam129-tab-kpis>.kpi-card,
  .dam129-cost-kpis>.kpi-card,
  .user-kpi-grid>.kpi-card,
    .weather-kpi-grid>.kpi-card,
  .compact-kpis>.kpi-card,
  .v151-overview-grid>.kpi-card,
  .v154-user-audit-kpis>.kpi-card{
    flex-basis:calc((100% - 24px)/3)!important;
    min-width:180px!important;
  }
}

@media (max-width:800px){
.kpi-grid>.kpi-card,
  .dam-mgmt-kpis>.kpi-card,
  .settings-kpis>.kpi-card,
  .mr74-kpis>.kpi-card,
  .ww77-kpis>.kpi-card,
  .waterway-kpis>.kpi-card,
  .dam129-tab-kpis>.kpi-card,
  .dam129-cost-kpis>.kpi-card,
  .user-kpi-grid>.kpi-card,
    .weather-kpi-grid>.kpi-card,
  .compact-kpis>.kpi-card,
  .v151-overview-grid>.kpi-card,
  .v154-user-audit-kpis>.kpi-card{
    flex-basis:calc((100% - 12px)/2)!important;
    min-width:150px!important;
  }
}

@media (max-width:520px){
.kpi-grid>.kpi-card,
  .dam-mgmt-kpis>.kpi-card,
  .settings-kpis>.kpi-card,
  .mr74-kpis>.kpi-card,
  .ww77-kpis>.kpi-card,
  .waterway-kpis>.kpi-card,
  .dam129-tab-kpis>.kpi-card,
  .dam129-cost-kpis>.kpi-card,
  .user-kpi-grid>.kpi-card,
    .weather-kpi-grid>.kpi-card,
  .compact-kpis>.kpi-card,
  .v151-overview-grid>.kpi-card,
  .v154-user-audit-kpis>.kpi-card{
    flex-basis:100%!important;
    min-width:0!important;
  }
}

.kpi-icon{
  width:40px!important;
  height:40px!important;
  border-radius:12px!important;
  font-size:22px!important;
}

.kpi-card:hover .kpi-icon{
  transform:translateY(-2px) rotate(-2deg) scale(1.06);
  filter:saturate(1.75) brightness(1.14);
}

.kpi-icon{width:auto!important;height:auto!important;min-width:34px;min-height:34px;font-size:26px!important}

.kpi b,
.kpi strong,
.kpi-value,
.metric-value,
.card-value,
.stat-value{
  font-weight:600!important;
}

body[data-theme="light"] .panel-head h3,
body[data-theme="light"] .page-header h1,
body[data-theme="light"] .kpi-value,
body[data-theme="light"] strong,
body.secura-light .panel-head h3,
body.secura-light .page-header h1,
body.secura-light .kpi-value,
body.secura-light strong,
body.theme-light .panel-head h3,
body.theme-light .page-header h1,
body.theme-light .kpi-value,
body.theme-light strong{color:#12344a!important;}

body[data-theme="light"] .kpi-head,
body[data-theme="light"] .kpi-foot,
body[data-theme="light"] .panel-head small,
body[data-theme="light"] small,
body.secura-light .kpi-head,
body.secura-light .kpi-foot,
body.secura-light .panel-head small,
body.secura-light small,
body.theme-light .kpi-head,
body.theme-light .kpi-foot,
body.theme-light .panel-head small,
body.theme-light small{color:#5e788b!important;}

.dam-mgmt-kpis{grid-template-columns:repeat(6,minmax(150px,1fr));margin-bottom:14px}

@media (max-width:1300px){
.dam-mgmt-kpis{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:600px){
.dam-mgmt-kpis,.dam-builder-form,.dam-gate-form,.dam-mgmt-kv,.dam-mgmt-kv-4{grid-template-columns:1fr}
}

.kpi-icon{width:22px !important;height:22px !important;font-size:0 !important;color:#17779f}

.kpi-card::after{display:none}

body[data-theme="dark"] .kpi-icon,body.theme-dark .kpi-icon{color:#64d8ff !important}

.kpi-icon:has(.app-ui-icon-3d){
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.kpi-icon .app-ui-icon-3d{
  width:34px!important;
  height:34px!important;
}

.report-kpi-grid>.kpi-card{flex:1 1 170px;min-width:170px}

@media (max-width:1250px){
.report-kpi-grid>.kpi-card{flex-basis:210px}
}

@media (max-width:720px){
.report-kpi-grid>.kpi-card{flex-basis:100%;min-width:100%}
}

.dash152-kpis>.kpi-card{flex:1 1 calc((100% - 105px)/8);min-width:135px;min-height:118px;box-sizing:border-box}

.dash152-kpis .kpi-value{font-size:24px}

@media (max-width:1500px){
.dash152-kpis>.kpi-card{flex-basis:calc((100% - 45px)/4);min-width:150px}
}

@media (max-width:760px){
.dash152-kpis>.kpi-card{flex-basis:calc((100% - 15px)/2);min-width:0}
}

body:not([data-theme="dark"]) .page-header p,
body:not([data-theme="dark"]) .kpi-head,
body:not([data-theme="dark"]) .kpi-foot,
body:not([data-theme="dark"]) .status-row small,
body:not([data-theme="dark"]) .notification small,
body:not([data-theme="dark"]) .panel-head small,
body:not([data-theme="dark"]) .incident-sub,
body:not([data-theme="dark"]) .waterway-map-note,
body:not([data-theme="dark"]) .mr74-header small,
body:not([data-theme="dark"]) .mr74-summary span,
body:not([data-theme="dark"]) .mr74-timeline small,
body:not([data-theme="dark"]) .mr74-timeline span,
body:not([data-theme="dark"]) .settings-action-card p,
body:not([data-theme="dark"]) .region-list small,
body:not([data-theme="dark"]) .integration-list small,
body:not([data-theme="dark"]) .audit-list small,
body:not([data-theme="dark"]) .audit-time{
  color:#51697b!important;
}

.v177-weather-source .kpi-grid{margin:0;padding:14px}

@media (max-width:800px){
.v177-weather-source .kpi-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}
}

.gw-focus .compact-kpis>.kpi-card,.gw-focus .compact-kpis>.kpi{margin-top:0!important}

.kpi-value,.dash152-ops-grid b{font-variant-numeric:tabular-nums;transition:color .22s ease,filter .22s ease;transform-origin:50% 62%}

.kpi-card.v199-metric-changed,.dash152-ops-grid>div.v199-metric-changed{isolation:isolate;animation:v199MetricCard .95s cubic-bezier(.16,.84,.24,1) both;border-color:rgba(13,157,210,.46)!important;box-shadow:0 12px 30px rgba(0,112,158,.13),0 0 0 3px rgba(29,176,225,.06)}

.kpi-card.v199-metric-changed::before,.dash152-ops-grid>div.v199-metric-changed::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.08) 37%,rgba(84,204,241,.20) 50%,rgba(255,255,255,.08) 63%,transparent 85%);transform:translateX(-125%);animation:v199MetricSweep .78s ease-out both}

body[data-theme="dark"] .kpi-card.v199-metric-changed,body[data-theme="dark"] .dash152-ops-grid>div.v199-metric-changed{border-color:rgba(72,202,244,.48)!important;box-shadow:0 13px 32px rgba(0,0,0,.24),0 0 0 3px rgba(72,202,244,.08)}

.kpi-card.v199-metric-changed[data-metric-direction="up"] .kpi-value,.dash152-ops-grid>div.v199-metric-changed[data-metric-direction="up"] b{filter:saturate(1.08)}

.kpi-card.v199-metric-changed[data-metric-direction="down"] .kpi-value,.dash152-ops-grid>div.v199-metric-changed[data-metric-direction="down"] b{filter:saturate(1.08)}

@media (prefers-reduced-motion:reduce){
.v199-number-animating,.kpi-card.v199-metric-changed,.dash152-ops-grid>div.v199-metric-changed,.kpi-card.v199-metric-changed::before,.dash152-ops-grid>div.v199-metric-changed::before{animation:none!important;transition:none!important}
}

.kpi-icon.is-pump-scada{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:2px;border-radius:9px;background:linear-gradient(145deg,rgba(14,165,233,.11),rgba(2,132,199,.03));
  border:1px solid rgba(14,165,233,.16);overflow:hidden;
}

.dash152-kpis>.kpi-card{min-width:0!important;min-height:116px!important;width:auto!important;box-sizing:border-box!important}