/* My Solar PV and My Solar PV Divert.
   Shared components are in Modules/app/Views/css/app-kit.css. */

/* No page padding below the last card, chart takes the space */
#wrap main.content-container:has(> .app-page) { padding-bottom: 0 !important; }

/* Chart fills the screen below the live values. Divert sets the height in JS. */
#placeholder_bound { width: 100%; position: relative; }
#placeholder {
    height: calc(100vh - 30.25rem);
    min-height: 250px;
}
/* Narrow layout: taller live values and time bar, no second nav row */
@container app (max-width: 767.98px) {
    #placeholder { height: calc(100vh - 28.125rem); }
}

/* Chart notes drawn over the bar graph */
.chart-note {
    position: absolute;
    left: 50px;
    font-size: 12px;
    color: var(--bs-secondary-color);
}

/* Narrow layout: live values centred. My Solar PV is centred at all widths. */
@container app (max-width: 767.98px) {
    .app-live > * { text-align: center; }
}


/* Flow colours */
#solar-to-grid-box   { --statsbox-color: var(--ec-energy-solar); }
#solar-to-divert-box { --statsbox-color: var(--ec-energy-battery); }
#solar-to-house-box  { --statsbox-color: var(--ec-energy-use-light); }
#grid-to-house-box   { --statsbox-color: var(--ec-energy-import); }
#grid-to-divert-box  { --statsbox-color: var(--ec-energy-import); }

/* Exported solar total: darker solar yellow */
.text-solar-export { color: #b7aa1f; }