/* Dashboard v0.12 — final visual repair on top of v0.11. */

/* Restore the subtle corner depth that worked before, without bringing back
 * the heavy coloured header boxes. */
.start-page .phase-panel,
.start-page .planning-panel,
.start-page .dashboard-grid>.panel{
  background:
    radial-gradient(ellipse 210px 92px at 0 0,
      color-mix(in srgb,var(--panel-accent) 13%,transparent) 0,
      color-mix(in srgb,var(--panel-accent) 6%,transparent) 36%,
      transparent 72%),
    var(--panel)!important;
}
:root[data-theme="dark"] .start-page .phase-panel,
:root[data-theme="dark"] .start-page .planning-panel,
:root[data-theme="dark"] .start-page .dashboard-grid>.panel{
  background:
    radial-gradient(ellipse 220px 96px at 0 0,
      color-mix(in srgb,var(--panel-accent) 11%,transparent) 0,
      color-mix(in srgb,var(--panel-accent) 5%,transparent) 38%,
      transparent 74%),
    var(--panel)!important;
}
.start-page .phase-panel{--panel-accent:var(--green)}
.start-page .planning-panel{--panel-accent:var(--blue)}
.start-page .dashboard-grid>.chart-panel:first-child{--panel-accent:var(--cyan)}
.start-page .dashboard-grid>.panel:nth-child(2){--panel-accent:var(--green)}
.start-page .dashboard-grid>.chart-panel.span-2{--panel-accent:var(--yellow)}
.start-page .dashboard-grid>.panel[data-economic-tone="negative"]{--panel-accent:var(--red)}

/* Desktop weather: keep today in a protected column and never let it slide
 * underneath the first future-day tile. */
@media(min-width:681px){
  .start-page .weather-card.weather-rich{
    grid-template-columns:minmax(240px,.92fr) minmax(0,1.38fr)!important;
    column-gap:12px!important;
  }
  .start-page .weather-card .weather-top{
    min-width:0!important;overflow:hidden!important;
    grid-template-columns:106px minmax(0,1fr)!important;
    gap:9px!important;padding-right:12px!important;
  }
  .start-page .weather-card .weather-top>div{min-width:0!important}
  .start-page .v10-weather-today{
    min-width:0!important;grid-template-columns:1fr 1fr!important;gap:2px 7px!important;
  }
  .start-page .v10-weather-today strong{grid-column:1/-1!important}
  .start-page .v10-weather-today span{white-space:normal!important;overflow:hidden;text-overflow:ellipsis}
  .start-page .v10-weather-today .pv{grid-column:1/-1!important;white-space:normal!important}
  .start-page .weather-hours.weather-days-v09{min-width:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .start-page .weather-days-v09 .weather-day{min-width:0!important;overflow:hidden}
}

/* Planning stays a single clean rail. */
.start-page .planning-panel .timeline-row-v07.future-row .timeline-track{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--panel-2) 96%,var(--blue) 4%),
    color-mix(in srgb,var(--panel-2) 99%,#000 1%))!important;
  border-color:color-mix(in srgb,var(--line) 76%,var(--blue) 24%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent),0 2px 7px rgba(0,0,0,.04)!important;
}
:root[data-theme="dark"] .start-page .planning-panel .timeline-row-v07.future-row .timeline-track{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 3px 9px rgba(0,0,0,.16)!important;
}
.start-page .planning-panel .timeline-row-v07.future-row .timeline-segment{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.10)!important;
}

/* EMS history is a separate readable strip above the canvas, not painted into
 * the physical energy chart. */
.start-page .energy-history-v12{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:6px;align-items:center;
  margin:3px 0 4px;
}
.start-page .energy-history-v12>.label{
  font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;
}
.start-page .energy-history-track-v12{
  position:relative;height:22px;border-radius:7px;overflow:hidden;
  background:color-mix(in srgb,var(--panel-2) 92%,var(--line) 8%);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 color-mix(in srgb,#fff 25%,transparent);
}
.start-page .energy-history-segment-v12{
  position:absolute;top:2px;bottom:2px;display:flex;align-items:center;justify-content:center;
  min-width:2px;border-radius:4px;font-size:8px;font-weight:800;line-height:1;color:#fff;
  overflow:hidden;white-space:nowrap;text-overflow:clip;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset -1px 0 rgba(255,255,255,.18);
}
.start-page .energy-history-segment-v12.self-use{background:linear-gradient(135deg,color-mix(in srgb,var(--green) 84%,#fff 16%),var(--green))}
.start-page .energy-history-segment-v12.charge{background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 84%,#fff 16%),var(--cyan));color:#072b31}
.start-page .energy-history-segment-v12.hold{background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 84%,#fff 16%),var(--blue))}
.start-page .energy-history-segment-v12.export{background:linear-gradient(135deg,color-mix(in srgb,var(--orange) 84%,#fff 16%),var(--orange))}
.start-page .energy-history-segment-v12.curtail{background:linear-gradient(135deg,color-mix(in srgb,var(--yellow) 84%,#fff 16%),var(--yellow));color:#493b00}
.start-page #energyChart{margin-top:0}

@media(max-width:680px){
  .start-page .energy-history-v12{grid-template-columns:30px minmax(0,1fr);gap:4px;margin:2px 0 3px}
  .start-page .energy-history-v12>.label{font-size:7px}
  .start-page .energy-history-track-v12{height:20px}
  .start-page .energy-history-segment-v12{font-size:7px}
}