/* Preview-only copy and layout polish for the Energy Dashboard. */

/* Preserve a geometry target for the network pulse while showing the public total at 0.1 kWh. */
.energy-dashboard-v3-energy-main {
  position: relative;
}
.energy-kwh-geometry-proxy {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  visibility: hidden;
  pointer-events: none;
}
.energy-dashboard-v3-energy-main > strong[data-month-generation-one-decimal] {
  font-size: 29px;
  letter-spacing: -.025em;
  white-space: nowrap;
}

/* Power copy. */
.energy-dashboard-v3-installed {
  margin-top: 8px;
  color: #4f5e78;
  font-size: 11.3px;
  font-weight: 850;
  line-height: 1.18;
}
.energy-dashboard-v3-now > strong {
  font-size: 11.1px;
  letter-spacing: .065em;
}
.energy-dashboard-v3-flow .flow-sites span,
.energy-dashboard-v3-flow .flow-grid span,
.energy-dashboard-v3-flow .flow-charge span {
  font-size: 8.15px;
}

/* Keep both site metrics on the same visual axis: labels right-aligned to one shared colon line, values vertically centered. */
.sidebar .site-energy-card .site-energy-metric {
  grid-template-columns: minmax(0, 57%) minmax(0, 43%);
  align-items: center;
  column-gap: 8px;
}
.sidebar .site-energy-card .site-energy-metric strong {
  justify-self: end;
  align-self: center;
  text-align: right;
}

/* Legacy data-energy-label substitution is desktop-only. Mobile card labels are
   renderer-owned text nodes and must never be replaced by pseudo-element copy. */
@media (min-width: 981px) {
  .sidebar .site-energy-card .site-energy-metric > span[data-energy-label] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: stretch;
    align-self: stretch;
    font-size: 0;
    text-align: right;
  }
  .sidebar .site-energy-card .site-energy-metric > span[data-energy-label]::after {
    content: attr(data-energy-label);
    display: inline-block;
    color: #59677f;
    font-size: 9.35px;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
    text-align: right;
  }
}

/* Flow labels use semantic cell classes and never mutate the site-card DOM. */
.sidebar .site-energy-card .site-energy-flow-cell > span {
  font-size: 0;
}
.sidebar .site-energy-card .site-energy-flow-cell.to-site > span::after {
  content: "site load";
  font-size: 7.25px;
}
.sidebar .site-energy-card .site-energy-flow-cell.to-grid > span::after {
  content: "grid";
  font-size: 7.25px;
}
.sidebar .site-energy-card .site-energy-flow-cell.to-battery > span::after {
  content: "charging battery";
  font-size: 7.25px;
}

/* Compact VPP designation, visually sharing the name line where the name leaves room. */
.sidebar .site-row.site-energy-card:has(.site-vpp-participant) .site-name {
  padding-right: 31px;
}
.sidebar .site-energy-card .site-vpp-participant {
  position: absolute !important;
  z-index: 4;
  top: 9px;
  right: 8px;
  left: auto;
  width: auto !important;
  min-width: 25px;
  min-height: 17px;
  margin: 0 !important;
  padding: 0 6px;
  justify-content: center;
  border-radius: 999px;
  font-size: 0;
  white-space: nowrap;
}
.sidebar .site-energy-card .site-vpp-participant::after {
  content: "VPP";
  color: #3548aa;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .045em;
}

/* Orleans network VPP summary sits immediately below the parish heading. */
.site-parish-heading.has-vpp-summary {
  flex-wrap: wrap;
  align-items: center;
}
.site-parish-heading.has-vpp-summary::after {
  content: none;
  display: none;
  flex: 0 0 100%;
  margin-top: 1px;
  padding-right: 4px;
  color: #667188;
  font-family: "Noto Sans", system-ui, sans-serif;
  font-size: 8.35px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 430px) {
  .energy-dashboard-v3-installed {
    font-size: 10.7px;
  }
  .sidebar .site-energy-card .site-energy-metric {
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
    column-gap: 6px;
  }
  .sidebar .site-energy-card .site-energy-flow-cell.to-site > span::after,
  .sidebar .site-energy-card .site-energy-flow-cell.to-grid > span::after,
  .sidebar .site-energy-card .site-energy-flow-cell.to-battery > span::after {
    font-size: 6.8px;
  }
  .site-parish-heading.has-vpp-summary::after {
    font-size: 8px;
  }
}