/* Energy Dashboard v3. This is the single presentation owner for #energyHeartbeat. */

#energyHeartbeat:not([data-energy-dashboard-v3]) {
  visibility: hidden !important;
}

.sidebar.has-energy-dashboard-v3 {
  position: relative;
  padding-top: 9px;
}

.sidebar.has-energy-dashboard-v3 .site-count {
  display: none;
}

.sidebar [data-energy-dashboard-v3] {
  position: relative;
  z-index: 2;
  width: auto;
  margin: 0 0 7px;
  padding: 0;
  overflow: hidden;
  visibility: visible !important;
  border: 1px solid rgba(11, 39, 96, .14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 32, 92, .09);
  color: #10265f;
}

.sidebar [data-energy-dashboard-v3]::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #f2b823 0 31%, #3548aa 31% 100%);
}

/* Never reveal the previous report during live heartbeat refreshes. */
#energyHeartbeat > .energy-heartbeat-counts,
#energyHeartbeat > .energy-realtime-detail,
#energyHeartbeat > .energy-monthly-tally,
#energyHeartbeat > .energy-heartbeat-power,
#energyHeartbeat > .energy-vpp-summary,
#energyHeartbeat > .energy-heartbeat-legend,
#energyHeartbeat > .energy-sites-toggle {
  display: none !important;
}

.sidebar [data-energy-dashboard-v3] > .energy-heartbeat-head {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) 32px;
  grid-template-areas:
    "dot title button"
    ". age button";
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  padding: 14px 13px 10px;
  border-bottom: 1px solid rgba(0, 32, 92, .085);
  background: linear-gradient(180deg, rgba(248, 250, 255, .92), rgba(255,255,255,.98));
  border-radius: 18px 18px 0 0;
}

.sidebar [data-energy-dashboard-v3] .energy-heartbeat-dot {
  grid-area: dot;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f2b823;
  box-shadow: 0 0 0 5px rgba(242, 184, 35, .14);
}

.sidebar [data-energy-dashboard-v3] .energy-heartbeat-head strong {
  grid-area: title;
  min-width: 0;
  color: #00205c;
  font-family: "Oswald", sans-serif;
  font-size: 16.2px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
}

.sidebar [data-energy-dashboard-v3] .energy-heartbeat-head [data-energy-age] {
  grid-area: age;
  justify-self: start;
  color: #7a8497;
  font-size: 8.3px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}

.sidebar [data-energy-dashboard-v3] .energy-heartbeat-head button {
  grid-area: button;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(0, 32, 92, .12);
  border-radius: 50%;
  background: #fff;
  color: #10265f;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 32, 92, .05);
}

.energy-dashboard-v3-body {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 18px 18px;
  background: #fff;
}

.energy-dashboard-v3-network-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 13px 8px;
  border-bottom: 1px solid rgba(0, 32, 92, .085);
  background: linear-gradient(90deg, rgba(242,184,35,.045), rgba(53,72,170,.018));
}

.energy-dashboard-v3-network-count > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.energy-dashboard-v3-network-count strong {
  color: #00205c;
  font-family: "Oswald", sans-serif;
  font-size: 31px;
  font-weight: 700;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}

.energy-dashboard-v3-network-count span {
  color: #233d77;
  font-size: 10.3px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.energy-dashboard-v3-network-count small {
  margin-left: auto;
  color: #7a8395;
  font-size: 8.2px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.energy-dashboard-v3-section {
  position: relative;
  margin: 0 13px;
  padding: 10px 0 11px;
}

.energy-dashboard-v3-section + .energy-dashboard-v3-section {
  border-top: 1px solid rgba(0, 32, 92, .105);
}

.energy-dashboard-v3-section-head {
  display: flex;
  align-items: center;
  min-height: 18px;
  margin-bottom: 8px;
}

.energy-dashboard-v3-section-head strong {
  color: #3548aa;
  font-family: "Oswald", sans-serif;
  font-size: 14.2px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .13em;
}

.energy-dashboard-v3-capacity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.energy-dashboard-v3-capacity > div {
  min-width: 0;
  padding: 9px 9px 8px;
  border: 1px solid rgba(0, 32, 92, .085);
  border-radius: 11px;
  background: linear-gradient(145deg, #f9faff, #fff);
}

.energy-dashboard-v3-capacity > div:first-child {
  border-color: rgba(226, 168, 18, .2);
  background: linear-gradient(145deg, rgba(255, 192, 38, .085), rgba(255,255,255,.96));
}

.energy-dashboard-v3-capacity strong {
  display: block;
  color: #00205c;
  font-family: "Oswald", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.018em;
  white-space: nowrap;
}

.energy-dashboard-v3-capacity span {
  display: block;
  margin-top: 5px;
  color: #5d6980;
  font-size: 10.1px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.energy-dashboard-v3-installed {
  margin: 7px 1px 0;
  color: #59667d;
  font-size: 8.6px;
  font-weight: 750;
  line-height: 1.24;
}

.energy-dashboard-v3-now {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 32, 92, .075);
}

.energy-dashboard-v3-now > strong {
  display: block;
  margin-bottom: 7px;
  color: #4f5d77;
  font-size: 9.8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
}

.energy-dashboard-v3-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.energy-dashboard-v3-flow > div {
  min-width: 0;
  padding: 8px 4px 7px;
  border: 1px solid rgba(0, 32, 92, .07);
  border-radius: 10px;
  background: #fbfcfe;
  text-align: center;
}

.energy-dashboard-v3-flow strong {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 23.5px;
  font-weight: 700;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

.energy-dashboard-v3-flow span {
  display: block;
  min-height: 18px;
  margin-top: 5px;
  font-size: 7.75px;
  font-weight: 850;
  line-height: 1.1;
}

.energy-dashboard-v3-flow .flow-sites strong,
.energy-dashboard-v3-flow .flow-sites span { color: #21835b; }
.energy-dashboard-v3-flow .flow-grid strong,
.energy-dashboard-v3-flow .flow-grid span { color: #a86f00; }
.energy-dashboard-v3-flow .flow-charge strong,
.energy-dashboard-v3-flow .flow-charge span { color: #3567bd; }

.energy-dashboard-v3-now > p {
  margin: 7px 1px 0;
  color: #747f92;
  font-size: 7.8px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
}

.energy-dashboard-v3-now > p b {
  color: #53627b;
  font-weight: 900;
}

.energy-dashboard-v3-energy {
  padding-bottom: 13px;
}

.energy-dashboard-v3-energy-main {
  padding: 0 0 9px;
}

.energy-dashboard-v3-energy-main > strong {
  display: block;
  color: #00205c;
  font-family: "Oswald", sans-serif;
  font-size: 31px;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.energy-dashboard-v3-energy-main > span {
  display: block;
  margin-top: 5px;
  color: #5f6b81;
  font-size: 8.8px;
  font-weight: 750;
}

.energy-dashboard-v3-energy-main > span b {
  color: #45536e;
  font-weight: 850;
}

.energy-dashboard-v3-energy-secondary {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  border-top: 1px solid rgba(0, 32, 92, .075);
}

.energy-dashboard-v3-energy-secondary > div {
  min-width: 0;
  padding: 9px 8px 1px 0;
}

.energy-dashboard-v3-energy-secondary > div + div {
  padding-left: 10px;
  border-left: 1px solid rgba(0, 32, 92, .075);
}

.energy-dashboard-v3-energy-secondary strong {
  display: block;
  color: #10265f;
  font-family: "Oswald", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.energy-dashboard-v3-energy-secondary span {
  display: block;
  margin-top: 4px;
  color: #626d82;
  font-size: 7.7px;
  font-weight: 750;
  line-height: 1.2;
}

.energy-dashboard-v3-savings > span {
  margin: 0 0 4px;
}

.energy-dashboard-v3-savings > strong {
  color: #256847;
  font-size: 24px;
}

/* The SITES heading is deliberately outside the dashboard card. */
.sidebar.has-energy-dashboard-v3 .sidebar-head {
  position: relative;
  z-index: 2;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 9px 16px 6px 5px;
  border: 0;
  background: transparent;
}

.sidebar.has-energy-dashboard-v3 .sidebar-head p {
  display: none;
}

.sidebar.has-energy-dashboard-v3 .sidebar-head h1 {
  margin: 0;
  color: #3548aa;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
}

.sidebar.has-energy-dashboard-v3 .sidebar-head::after {
  display: none;
}

@media (max-width: 980px) {
  .sidebar.has-energy-dashboard-v3 {
    padding-top: 8px;
  }

  .sidebar.has-energy-dashboard-v3 .sidebar-head {
    padding-right: 52px;
  }

  .sidebar.has-energy-dashboard-v3 .sidebar-close {
    position: absolute;
    right: 4px;
    top: 3px;
    z-index: 8;
  }
}

@media (max-width: 430px) {
  .sidebar [data-energy-dashboard-v3] > .energy-heartbeat-head {
    grid-template-columns: 9px minmax(0, 1fr) 30px;
    padding-inline: 12px;
  }

  .sidebar [data-energy-dashboard-v3] .energy-heartbeat-head strong {
    font-size: 14.8px;
  }

  .energy-dashboard-v3-network-count {
    padding-inline: 11px;
  }

  .energy-dashboard-v3-network-count strong {
    font-size: 29px;
  }

  .energy-dashboard-v3-network-count span {
    font-size: 9.7px;
  }

  .energy-dashboard-v3-network-count small {
    font-size: 7.7px;
  }

  .energy-dashboard-v3-section {
    margin-inline: 11px;
  }

  .energy-dashboard-v3-capacity strong {
    font-size: 23px;
  }

  .energy-dashboard-v3-capacity span {
    font-size: 9.4px;
  }

  .energy-dashboard-v3-flow strong {
    font-size: 22px;
  }

  .energy-dashboard-v3-flow span {
    font-size: 7.2px;
  }

  .energy-dashboard-v3-energy-main > strong {
    font-size: 29px;
  }
}