/* Power section — System → Power.
   Lightweight component CSS for the live tariff card, daily SVG bar
   chart, and stacked-bar legend. Colors mirror the SAGE theme:
   green = cheap-rate, red = normal-rate, matching the Android tab. */

.power-card {
    border-left: 3px solid var(--surface-3);
}
.power-card--cheap  { border-left-color: var(--ok, #4ade80); }
.power-card--normal { border-left-color: var(--warn, #f87171); }

.power-rate {
    font-size: 2.4rem;
    line-height: 1;
    margin: var(--sp-2) 0 var(--sp-2);
    color: var(--text-strong, #f4f4f5);
    letter-spacing: -0.02em;
}
.power-rate__unit {
    font-size: 1rem;
    color: var(--text-muted, #71717a);
    margin-left: var(--sp-2);
    font-weight: normal;
}
.power-edge {
    margin: 0 0 var(--sp-3);
    color: var(--text-muted, #71717a);
    font-size: 0.9rem;
}

.power-chart {
    width: 100%;
    height: auto;
    display: block;
}

.power-legend {
    margin: var(--sp-2) 0 0;
    color: var(--text-muted, #71717a);
    font-size: 0.85rem;
}
.power-legend__dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.25rem;
}
.power-legend__dot--cheap  { background: #4ade80; }
.power-legend__dot--normal { background: #f87171; }

/* Live-row callout in the Now card — pulses subtly so the operator
   can tell at a glance the sampler is feeding fresh data. */
.kvs__row--live .kvs__v {
    color: var(--text-strong, #f4f4f5);
}
.kvs__row--live .kvs__v strong {
    color: var(--accent, #60a5fa);
}

/* Forecast budget bar — single horizontal bar showing utilisation. */
.power-budget-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-3, #2a2a35);
    overflow: hidden;
    margin: var(--sp-2) 0 var(--sp-3);
}
.power-budget-bar__fill {
    height: 100%;
    transition: width 200ms ease-out;
}
.power-budget-bar__fill--ok   { background: var(--ok,   #4ade80); }
.power-budget-bar__fill--warn { background: var(--warn, #f87171); }