/* _content/Wabbit.IoT.Web/Pages/Dashboard/Custom/SolarSaverBessReport - Copy.cshtml.rz.scp.css */
header[b-8u67hra77n] {
  /* background-color: #0c223f; */
  padding: var(--sl-spacing-medium);
  /* display: flex; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: var(--sl-spacing-large);
  color: #5d8bb6;
  position: relative;
  /* background: linear-gradient(to top right, var(--sl-color-neutral-200), var(--sl-color-neutral-100)); */

  border-bottom: 1px solid var(--sl-input-border-color);

  h3 {
    text-align: center;
    margin: 0;
    /* font-size: x-large; */
  }
}

sl-radio-button[b-8u67hra77n]::part(button) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#dashboard[b-8u67hra77n] {
  display: grid;
  grid-template-columns: .5fr repeat(4, 1fr) .5fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "grid grid . . generator generator"
    ". . inverter inverter home home"
    "battery battery . . solar solar";
}

#dashboard[b-8u67hra77n],
#tables[b-8u67hra77n],
#charts[b-8u67hra77n] {
  padding: 20px;
}

[b-8u67hra77n] .highcharts-container {
  z-index: 10 !important;
}

[b-8u67hra77n] .peak,
[b-8u67hra77n] .peak .highcharts-point {
  fill: rgb(243, 95, 95) !important;
}

[b-8u67hra77n] .off-peak,
[b-8u67hra77n] .off-peak .highcharts-point {
  fill: rgb(71, 185, 71) !important;
}

[b-8u67hra77n] .standard,
[b-8u67hra77n] .standard .highcharts-point {
  fill: rgb(216, 216, 74) !important;
}

[b-8u67hra77n] .charge {
  fill: #81e7af;
}

[b-8u67hra77n] .discharge {
  fill: #ff7f50;
}

[b-8u67hra77n] .highcharts-background {
  fill: transparent !important;
}

.chart-container[b-8u67hra77n] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.measures-container[b-8u67hra77n] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;

  >div {
    display: flex;
    flex-direction: column;
  }
}

.label[b-8u67hra77n] {
  font-size: .8rem;
  font-weight: bold;
  opacity: 0.8;
}

.measure[b-8u67hra77n] {
  font-size: 1rem;
  font-weight: bold;
}

@media (max-width: 900px) {
  .chart-container[b-8u67hra77n] {
    grid-template-columns: 1fr;
  }

  #dashboard[b-8u67hra77n] {
    grid-template-areas:
      "grid grid grid battery battery battery"
      ". . inverter inverter . ."
      "generator generator home home solar solar";
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 2rem;
  }

  .measures-container[b-8u67hra77n] {
    flex-direction: row;
    gap: 1rem;

    .label {
      text-align: center;
    }
  }
}

table[b-8u67hra77n] {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  border-radius: 10px;
  overflow: hidden;
}

caption[b-8u67hra77n] {
  background-color: #7b9ac0;
  color: #000;
  font-weight: bold;
  padding: 10px;
  font-size: 18px;
}

th[b-8u67hra77n],
td[b-8u67hra77n] {
  border: 1px solid var(--sl-color-neutral-400);
  padding: 8px;
  text-align: left;
}

td:first-child[b-8u67hra77n] {
  background-color: #1a2b4f;
  color: white;
}

th[b-8u67hra77n] {
  background-color: #1a2b4f;
  color: white;
}

tr:nth-child(even)[b-8u67hra77n] {
  background-color: var(--sl-color-neutral-200);
}

.amount[b-8u67hra77n] {
  text-align: right;
}

.total-row[b-8u67hra77n] {
  font-weight: bold;
}
