/* Widget standalone — pensado para iframe en Home Assistant */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
}

.flow-widget {
  width: 100%;
  padding: 0.25rem 0.5rem 0.5rem;
}

#flowSvg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Links ── */
.flow-link {
  fill: none;
  stroke: #e0e0e0;
  stroke-linecap: round;
}

.flow-link.active {
  opacity: 0.9;
  stroke-dasharray: 5 8;
  animation: flow-dash 1.6s linear infinite;
}

@keyframes flow-dash {
  to { stroke-dashoffset: -26; }
}

.flow-particle { opacity: 0; }
.flow-particles.active .flow-particle { opacity: 0.85; }

/* ── Nodes ── */
.flow-node circle.node-bg {
  fill: #ffffff;
  stroke: #e0e0e0;
  stroke-width: 1.5;
}

.flow-node circle.node-ring {
  fill: none;
  stroke-width: 2.5;
  opacity: 0;
}

.flow-node:not(.inactive) circle.node-ring { opacity: 1; }
.flow-node.inactive { opacity: 0.5; }
.flow-node.inactive circle.node-ring { opacity: 0; }

.flow-node.solar circle.node-ring { stroke: #ff9800; }
.flow-node.battery circle.node-ring { stroke: #43a047; }
.flow-node.grid circle.node-ring { stroke: #1e88e5; }
.flow-node.home circle.node-ring { stroke: #8e24aa; }
.flow-node.ac circle.node-ring { stroke: #00acc1; }
.flow-node.suspicious circle.node-ring { stroke: #ff9800; }

/* Icon inside circle */
.flow-node .node-icon {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flow-node.solar .node-icon { stroke: #ff9800; }
.flow-node.battery .node-icon { stroke: #43a047; }
.flow-node.grid .node-icon { stroke: #1e88e5; }
.flow-node.home .node-icon { stroke: #8e24aa; }
.flow-node.ac .node-icon { stroke: #00acc1; }

/* SOC ring — outside the circle, not overlapping text */
.flow-node.battery .soc-track {
  fill: none;
  stroke: #e8f5e9;
  stroke-width: 4;
}

.flow-node.battery .soc-fill {
  fill: none;
  stroke: #43a047;
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.7s ease;
}

/* Text INSIDE circle (battery SOC only) */
.flow-node .node-inner-value {
  fill: #212121;
  font-size: 20px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Text OUTSIDE circle — never overlaps icon */
.flow-node .node-power {
  fill: #212121;
  font-size: 14px;
  font-weight: 500;
  text-anchor: middle;
}

.flow-node .node-label {
  fill: #757575;
  font-size: 11px;
  text-anchor: middle;
}

.flow-node .node-status {
  fill: #9e9e9e;
  font-size: 10px;
  text-anchor: middle;
}

.flow-stamp {
  margin: 0;
  text-align: center;
  font-size: 10px;
  color: #bdbdbd;
}

.flow-stamp.stale { color: #ff9800; }