/* Dashboard v0.14 — visual polish on top of v0.13. */

/* Compact metric cards join the shared Ravoa surface family. */
.start-page .hero .card.ravoa-metric{
  border-color:color-mix(in srgb,var(--line) 78%,var(--ravoa-accent) 22%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent),var(--shadow-soft)!important;
}
:root[data-theme="dark"] .start-page .hero .card.ravoa-metric{
  border-color:color-mix(in srgb,var(--line) 72%,var(--ravoa-accent) 28%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),var(--shadow-soft)!important;
}

/* Planning blocks: same colours, but with depth and softer visual joins. */
.start-page #timelineTrack .timeline-segment.ravoa-mode-gradient{
  border-radius:10px!important;
  border:1px solid color-mix(in srgb,currentColor 0%,rgba(255,255,255,.10));
  box-shadow:
    inset 9px 0 14px rgba(255,255,255,.075),
    inset -9px 0 14px rgba(0,0,0,.075),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(0,0,0,.09)!important;
}
.start-page #timelineTrack .timeline-segment.ravoa-mode-gradient + .timeline-segment.ravoa-mode-gradient{
  border-left-color:rgba(255,255,255,.18)!important;
}

/* EMS history uses the exact same rail language as planning, only compact. */
.start-page .energy-history-track-v12.ravoa-mode-strip{
  height:22px!important;
  border-radius:11px!important;
}
.start-page .energy-history-segment-v12.ravoa-mode-segment{
  top:2px!important;bottom:2px!important;border-radius:7px!important;
  box-shadow:
    inset 6px 0 9px rgba(255,255,255,.07),
    inset -6px 0 9px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.09)!important;
}
.start-page .energy-history-v12>.label{font-weight:900;letter-spacing:.09em}

/* The hero becomes the dashboard's premium focal surface rather than a flat green slab. */
.start-page .status-hero{
  background:
    radial-gradient(circle at 8% 48%,color-mix(in srgb,var(--hero-mode-color,var(--green)) 35%,transparent),transparent 22%),
    radial-gradient(ellipse 52% 100% at 96% 10%,rgba(89,210,255,.13),transparent 66%),
    radial-gradient(ellipse 66% 90% at 56% 118%,color-mix(in srgb,var(--hero-mode-color,var(--green)) 18%,transparent),transparent 70%),
    linear-gradient(122deg,#052d23 0%,color-mix(in srgb,#075442 78%,var(--hero-mode-color,var(--green)) 22%) 46%,#092f2d 100%)!important;
  box-shadow:
    0 24px 62px rgba(5,63,47,.20),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.13)!important;
}
.start-page .status-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(112deg,transparent 0 34%,rgba(255,255,255,.055) 45%,rgba(255,255,255,.018) 56%,transparent 67%),
    radial-gradient(ellipse 38% 90% at 17% 10%,rgba(255,255,255,.065),transparent 72%);
}
.start-page .status-hero::after{
  inset:-78% -16% auto 55%!important;height:390px!important;
  border-color:rgba(131,255,194,.18)!important;
  box-shadow:0 0 88px color-mix(in srgb,var(--hero-mode-color,var(--green)) 13%,transparent)!important;
}
.start-page .status-hero>div:not(.hero-orb),.start-page .status-hero>small{position:relative;z-index:1}
.start-page .status-hero .hero-orb{z-index:1}
.start-page .hero-orb{
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.10),rgba(4,27,21,.56) 50%,rgba(3,22,18,.72))!important;
  box-shadow:
    0 0 0 8px color-mix(in srgb,var(--hero-mode-color,var(--green)) 10%,transparent),
    0 0 38px color-mix(in srgb,var(--hero-mode-color,var(--green)) 35%,transparent),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 22px color-mix(in srgb,var(--hero-mode-color,var(--green)) 18%,transparent)!important;
}

/* Price hover uses the existing floating tooltip, but cursor changes communicate interactivity. */
.start-page #priceChart{cursor:crosshair}

@media(max-width:680px){
  .start-page .energy-history-track-v12.ravoa-mode-strip{height:20px!important}
  .start-page .status-hero::after{height:300px!important}
}