/* ============================================================
   Solar Energy domain styles (RCL).
   Served by the host at _content/CLATech.Demo.SolarEnergy/app.css.
   Colors come from the Shared "Living Grid" design tokens loaded by the host,
   so the light/dark control-room toggle recolors this dashboard for free.
   Shell / topbar / theme tokens live in the host + Shared — NOT here.
   ============================================================ */

/* ── Dashboard header ────────────────────────────────────── */
.dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.25rem; }
.dash-header h1 { margin: 0 0 .15rem; font-size: 1.4rem; }
.muted { color: var(--text-muted); font-size: .85rem; margin: 0; }
.conn { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; }
.conn .dot { width: .55rem; height: .55rem; border-radius: 50%; }
.conn.ok { color: var(--color-accent-green-dark); background: color-mix(in srgb, var(--color-accent-green) 15%, transparent); }
.conn.ok .dot { background: var(--color-accent-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-green) 25%, transparent); }
.conn.down { color: var(--color-warning-dark); background: color-mix(in srgb, var(--color-warning) 15%, transparent); }
.conn.down .dot { background: var(--color-warning); }

/* ── KPI grid ────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-md); padding: .9rem 1rem; box-shadow: var(--shadow-sm); }
.kpi-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.kpi-value { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin-top: .25rem; }
.kpi-value small { font-size: .8rem; font-weight: 500; color: var(--text-muted); margin-left: .25rem; }
.kpi.accent-gen { border-left-color: var(--chart-generation); }
.kpi.accent-con { border-left-color: var(--chart-consumption); }
.kpi.accent-bat { border-left-color: var(--chart-storage); }

/* ── Cards / columns ─────────────────────────────────────── */
.dash-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.dash-cols .card { padding: 1rem 1.25rem; }
.card h2 { font-size: 1rem; margin: 0 0 .85rem; }
@media (max-width: 860px) { .dash-cols { grid-template-columns: 1fr; } }

/* ── Live chart ──────────────────────────────────────────── */
.live-chart { width: 100%; height: 220px; background: var(--surface-alt); border-radius: var(--radius-sm); }
.live-chart .grid { stroke: var(--border); stroke-width: 1; }
.live-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.series-generation { stroke: var(--chart-generation); }
.series-consumption { stroke: var(--chart-consumption); }
.series-battery { stroke: var(--chart-storage); stroke-dasharray: 4 3; }
.chart-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-muted); margin-top: .6rem; }
.chart-legend .swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.chart-legend .gen { background: var(--chart-generation); }
.chart-legend .con { background: var(--chart-consumption); }
.chart-legend .bat { background: var(--chart-storage); }
.chart-legend .scale { margin-left: auto; }

/* ── Battery gauge ───────────────────────────────────────── */
.gauge { position: relative; height: 16px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; margin: .5rem 0 1rem; }
.gauge-fill { position: absolute; inset: 0; width: calc(var(--soc) * 1%); background: var(--grad-energy); transition: width .4s ease; }
.gauge-label { position: absolute; right: .5rem; top: -1.6rem; font-weight: 700; font-size: 1.3rem; }
.gauge-label small { font-size: .8rem; color: var(--text-muted); }
.battery-stats { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.battery-stats li { display: flex; justify-content: space-between; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.battery-stats span { color: var(--text-muted); }

/* ── Device table ────────────────────────────────────────── */
.device-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.device-table th { text-align: left; color: var(--text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; padding: .4rem .5rem; border-bottom: 1px solid var(--border); }
.device-table td { padding: .5rem; border-bottom: 1px solid var(--border-light, var(--border)); }

/* ── Badges + alarms ─────────────────────────────────────── */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.badge.online, .badge.info { color: var(--color-accent-green-dark); background: color-mix(in srgb, var(--color-accent-green) 16%, transparent); }
.badge.warning { color: var(--color-warning-dark); background: color-mix(in srgb, var(--color-warning) 18%, transparent); }
.badge.fault { color: var(--color-danger-dark); background: color-mix(in srgb, var(--color-danger) 16%, transparent); }
.alarm-list { list-style: none; padding: 0; margin: 0; }
.alarm-list li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.alarm-list time { margin-left: auto; color: var(--text-muted); font-family: var(--font-mono); font-size: .78rem; }