/* morgen.css — extra styling voor /morgen.html ("Stroomprijs morgen").
Laagt boven styles.css + daily.css + vandaag.css. De page-class
.morgen-page op is het scoping-anker; de pagina hergebruikt
verder de .vandaag-* classes. */
/* Status-badge naast de grafiektitel: geeft aan of het echte EPEX
day-ahead prijzen zijn (groen) of nog een voorspelling (accent),
plus wanneer de data is gemaakt. */
.morgen-status {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: 0.82rem;
line-height: 1.3;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.03);
color: var(--muted);
}
.morgen-status[hidden] {
display: none;
}
.morgen-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: var(--muted);
}
.morgen-status--real {
border-color: rgba(46, 204, 113, 0.32);
background: rgba(46, 204, 113, 0.08);
color: var(--text);
}
.morgen-status--real .morgen-status-dot {
background: #2ecc71;
box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}
.morgen-status--forecast {
border-color: rgba(255, 59, 59, 0.3);
background: rgba(255, 59, 59, 0.06);
color: var(--text);
}
.morgen-status--forecast .morgen-status-dot {
background: var(--accent);
box-shadow: 0 0 8px rgba(255, 59, 59, 0.6);
}
/* Samenvattingszin onder de titel: goedkoopste/duurste uur van morgen. */
.morgen-summary {
margin: 0 0 0.9rem;
color: var(--text);
opacity: 0.9;
line-height: 1.55;
font-size: 0.98rem;
}
.morgen-summary[hidden] {
display: none;
}
.morgen-summary strong {
color: var(--accent);
font-weight: 700;
}
.morgen-summary a {
color: var(--accent);
}
/* Op smalle schermen de status-badge onder de titel laten vallen i.p.v.
ernaast (de .vandaag-chart-head is al flex met wrap). */
@media (max-width: 600px) {
.morgen-status {
font-size: 0.78rem;
}
}