/* Final Energy Dashboard presentation polish. Preview-only. */

/* Replace the earlier circular sidebar current with the final streak-based feed. */
.site-energy-network-canvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

.site-energy-network-canvas-v4 {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Make the accumulated Wh number the visual destination for the network feed. */
.energy-dashboard-v3-energy-main > strong {
  position: relative;
  z-index: 10;
  font-size: 29px;
  letter-spacing: -.025em;
}

/* Rebalance site cards: smaller mark, larger data, VPP designation in the left rail. */
.sidebar .site-row.site-energy-card {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 9px 11px 8px;
}

.sidebar .site-energy-card .site-logo {
  width: 26px;
  height: 26px;
  margin: 1px auto 0;
}

.site-energy-details {
  gap: 6px;
  margin-top: 7px;
}

.site-energy-metric {
  gap: 7px;
  font-size: 8.7px;
}

.site-energy-metric strong {
  color: #17366f;
  font-family: "Oswald", sans-serif;
  font-size: 13.6px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.site-energy-powering-label {
  font-size: 8.5px;
}

.sidebar .site-energy-card .site-vpp-participant {
  position: absolute;
  left: 5px;
  top: 41px;
  width: 48px;
  min-height: 28px;
  justify-content: center;
  margin: 0;
  padding: 4px 4px;
  border-radius: 12px;
  font-size: 6.1px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}

.site-energy-flow-cell strong {
  font-size: 13.8px;
}

.site-energy-flow-cell > span {
  font-size: 7.1px;
}

/* Individual VPP event history reads as a two-across set of compact event buttons. */
.profile .vpp-event.vpp-event-history {
  gap: 9px;
  padding: 13px 16px 14px;
}

.profile .vpp-event.vpp-event-history > strong {
  font-size: 12px;
}

.profile .vpp-event.vpp-event-history .vpp-event-history-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile .vpp-event.vpp-event-history .vpp-event-history-list > span {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  border: 1px solid rgba(53,72,170,.2);
  border-radius: 999px;
  background: rgba(53,72,170,.055);
  color: #3548aa;
  font-size: 9.4px;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
}

/* Desktop: let the dashboard own the full left edge from the top of the screen,
   while the brand moves to the right side of the main header. */
@media (min-width: 981px) {
  .sidebar.has-energy-dashboard-v3 {
    position: fixed;
    z-index: 50;
    top: 0;
    bottom: 0;
    left: 0;
    width: 306px;
    height: 100vh;
    padding-top: 0;
    overflow-y: auto;
  }

  .sidebar [data-energy-dashboard-v3] {
    margin-top: 0;
    border-top: 0;
    border-radius: 0 0 18px 18px;
  }

  .sidebar [data-energy-dashboard-v3]::before,
  .sidebar [data-energy-dashboard-v3] > .energy-heartbeat-head {
    border-radius: 0;
  }

  .workspace .map-stage {
    grid-column: 2;
    grid-row: 1;
  }

  .header {
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-areas: "search brand";
    gap: 14px;
    padding-left: 322px;
  }

  .header .map-instruction {
    display: none;
  }

  .header .search {
    grid-area: search;
    justify-self: stretch;
    max-width: none;
  }

  .header .brand {
    grid-area: brand;
    justify-self: end;
    width: 170px;
    height: 58px;
  }
}

@media (max-width: 430px) {
  .sidebar .site-row.site-energy-card {
    grid-template-columns: 47px minmax(0, 1fr);
  }

  .site-energy-metric strong {
    font-size: 12.7px;
  }

  .sidebar .site-energy-card .site-vpp-participant {
    width: 44px;
  }

  .profile .vpp-event.vpp-event-history .vpp-event-history-list {
    gap: 6px;
  }
}