:root {
  color-scheme: dark;
  --bg: #0e1117;
  --tile-bg: #171c26;
  --text: #f2f4f8;
  --muted: #8b93a3;
  --accent-solar: #f5c542;
  --accent-offgrid: #c77dff;
  --accent-house: #4caf7d;
  --accent-battery: #4a90d9;
  --accent-packs: #4a90d9;
  --accent-south: #f5c542;
  --accent-east: #60c8f5;
  --stale: #d9534f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.5rem;
  gap: 1.5rem;
}

/* ── Tiles ── */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

.tile {
  background: var(--tile-bg);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: opacity 0.3s;
}

.tile.stale { opacity: 0.4; }

.tile-label {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tile-value {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  margin-top: 0.25rem;
}

.tile.stale .tile-value::after {
  content: ' (stale)';
  font-size: 0.35em;
  color: var(--stale);
  font-weight: 400;
}

.tile-remain {
  font-size: clamp(0.8rem, 1.8vw, 1rem);
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ── Flow SVG ── */
.flow {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.connector {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.5;
  opacity: 0.45;
}

/* carport wire uses same style but slightly thinner */
.carport-wire {
  stroke-width: 2;
  opacity: 0.35;
}

.flow-label {
  fill: var(--text);
  font-size: 20px;
  font-weight: 600;
}

.flow-label.stale { fill: var(--stale); }

/* ── DC Solar icon ── */
.icon-solar-panel {
  fill: #1c2433;
  stroke: var(--accent-solar);
  stroke-width: 2;
}

.icon-solar-grid {
  stroke: var(--accent-solar);
  stroke-width: 1;
  opacity: 0.6;
}

/* ── WR_OG / Offgrid Inverter icon ── */
.icon-offgrid {
  fill: #1c2433;
  stroke: var(--accent-offgrid);
  stroke-width: 2;
}

.icon-offgrid-caption {
  fill: var(--accent-offgrid);
  font-size: 15px;
  font-weight: 700;
}

.icon-offgrid-value {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.icon-offgrid-value.stale { fill: var(--stale); }

/* ── Controller icon ── */
.icon-controller-body {
  fill: none;
  stroke: var(--accent-battery);
  stroke-width: 2;
}

.icon-controller-dial {
  fill: none;
  stroke: var(--accent-battery);
  stroke-width: 2;
}

/* ── House icon ── */
.icon-house {
  fill: #1c2433;
  stroke: var(--accent-house);
  stroke-width: 2;
}

.icon-house-door {
  fill: var(--accent-house);
  opacity: 0.6;
}

/* ── Shared caption style (muted label below icons) ── */
.icon-caption {
  fill: var(--muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Flow dot animation ──
   Dots follow the connector paths via CSS offset-path.
   Direction encodes actual power flow direction. */
.dot {
  opacity: 0;
  animation: flow-move 3s linear infinite;
}

.dot-dcsolar {
  fill: var(--accent-solar);
  offset-path: path('M 485,70 C 485,160 480,255 480,346');
}

/* WR_OG → Controller (horizontal left-to-right) */
.dot-offgrid {
  fill: var(--accent-offgrid);
  offset-path: path('M 188,372 L 440,372');
}

.dot-house {
  fill: var(--accent-house);
  offset-path: path('M 520,372 C 650,372 755,235 835,210');
}

.dot-packs {
  fill: var(--accent-packs);
  offset-path: path('M 480,398 L 480,455');
}

.dot-packs.flow-reverse {
  offset-path: path('M 480,455 L 480,398');
}

/* Carport panel → WR_OG dots */
.carport-dot-south {
  fill: var(--accent-south);
  offset-path: path('M 89,183 C 89,262 108,300 108,346');
}

.carport-dot-east {
  fill: var(--accent-east);
  offset-path: path('M 233,183 C 233,262 108,300 108,346');
}

@keyframes flow-move {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ── Carport structure ── */
.carport-outline {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  opacity: 0.3;
}

.carport-ridge {
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.35;
}

.slope-label {
  fill: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.65;
}

/* ── Solar panels ── */
.panel-body {
  stroke-width: 1.8;
}

.panel-south {
  fill: rgba(245, 197, 66, 0.07);
  stroke: var(--accent-south);
}

.panel-east {
  fill: rgba(96, 200, 245, 0.07);
  stroke: var(--accent-east);
}

.panel-grid-south {
  stroke: var(--accent-south);
  stroke-width: 0.7;
  opacity: 0.3;
}

.panel-grid-east {
  stroke: var(--accent-east);
  stroke-width: 0.7;
  opacity: 0.3;
}

.panel-stale .panel-body,
.panel-stale text {
  opacity: 0.3;
}

.panel-string-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.panel-string-south { fill: var(--accent-south); opacity: 0.8; }
.panel-string-east  { fill: var(--accent-east);  opacity: 0.8; }

.panel-power {
  font-weight: 700;
}

/* south panels are narrower — smaller font to fit 60 px width */
.panel-power-south { fill: var(--accent-south); font-size: 14px; }
.panel-power-east  { fill: var(--accent-east);  font-size: 17px; }

.panel-irr {
  fill: var(--muted);
  font-size: 11px;
}

/* ── Master battery glyph ── */
.master-batt-terminal {
  fill: var(--accent-battery);
}

.master-batt-body {
  fill: #1c2433;
  stroke: var(--accent-battery);
  stroke-width: 2;
}

.master-batt-fill {
  fill: var(--accent-battery);
  transition: height 0.5s ease, y 0.5s ease;
}

.master-batt-fill.batt-fill-low  { fill: var(--stale); }
.master-batt-fill.batt-fill-full { fill: var(--accent-house); }

.master-thresh-min {
  stroke: var(--accent-solar);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.85;
}

.master-thresh-max {
  stroke: var(--accent-house);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.85;
}

.master-batt-soc {
  fill: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.master-batt-soc.stale { fill: var(--stale); }

.master-wh-value {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.master-wh-label {
  fill: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.master-thresh-label {
  font-size: 10px;
}

.master-thresh-label-min { fill: var(--accent-solar); opacity: 0.85; }
.master-thresh-label-max { fill: var(--accent-house); opacity: 0.85; }

.master-side-bracket {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.2;
  opacity: 0.6;
}

.master-side-kwh {
  fill: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.master-side-remain {
  fill: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.master-cap-label {
  fill: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Battery packs ── */
.pack-battery-body {
  fill: none;
  stroke: var(--accent-packs);
  stroke-width: 2;
  transition: opacity 0.3s;
}

.pack-battery-fill {
  fill: var(--accent-packs);
  transition: width 0.5s ease, opacity 0.3s;
}

.pack-battery-fill.battery-low { fill: var(--stale); }

.pack-battery-body.stale,
.pack-battery-fill.stale { opacity: 0.4; }

.pack-serial {
  fill: var(--muted);
  font-size: 13px;
  letter-spacing: 0.03em;
  transition: opacity 0.3s;
}

.pack-value {
  fill: var(--text);
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.3s;
}

.pack-stale-note {
  fill: var(--stale);
  font-size: 12px;
  text-transform: uppercase;
}

/* ── Footer ── */
.footer {
  text-align: center;
  color: var(--stale);
  font-size: 0.9rem;
}