/* ===== SVG Diagram Styles ===== */

/* ===== Nodes ===== */
.node-bg {
  fill: var(--bg-card);
  stroke: var(--border-light);
  stroke-width: 1.5;
  rx: 2;
  transition: all 0.5s ease;
}

.node-label {
  fill: var(--text-primary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.node-sublabel {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.node-icon {
  font-size: 20px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* Health indicator */
.health-dot {
  transition: fill 0.5s ease;
}

.health-green { fill: var(--green); }
.health-yellow { fill: var(--yellow); }
.health-red { fill: var(--red); }
.health-gray { fill: var(--text-muted); }

/* Node states */
.node-healthy .node-bg {
  stroke: var(--green);
  stroke-width: 1.5;
}

.node-degraded .node-bg {
  stroke: var(--yellow);
  stroke-width: 2;
  filter: url(#glow-yellow);
}

.node-down .node-bg {
  stroke: var(--red);
  stroke-width: 2.5;
  filter: url(#glow-red);
}

.node-protected .node-bg {
  stroke: var(--green);
  stroke-width: 2.5;
  filter: url(#glow-green);
}

.node-new .node-bg {
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-dasharray: 6 3;
}

/* ===== Edges ===== */
.edge-line {
  fill: none;
  stroke-width: 2;
  transition: all 0.5s ease;
}

.edge-healthy {
  stroke: var(--green);
  marker-end: url(#arrow-green);
}

.edge-broken {
  stroke: var(--red);
  stroke-dasharray: 8 4;
  marker-end: url(#arrow-red);
}

.edge-inactive {
  stroke: var(--text-muted);
  stroke-dasharray: 4 4;
  marker-end: url(#arrow-gray);
  opacity: 0.4;
}

.edge-dependency {
  stroke: var(--cyan);
  stroke-width: 2;
  marker-end: url(#arrow-blue);
  opacity: 0.7;
}

/* Traffic flow animation */
.edge-traffic {
  stroke-dasharray: 6 10;
  animation: traffic-flow 1s linear infinite;
}

@keyframes traffic-flow {
  to { stroke-dashoffset: -16; }
}

/* ===== Groups ===== */
.group-bg {
  fill: rgba(0, 240, 255, 0.02);
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 8 4;
  rx: 2;
  transition: all 0.5s ease;
}

.group-label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.group-healthy .group-bg {
  stroke: var(--green);
  stroke-dasharray: none;
  fill: rgba(0, 230, 118, 0.03);
}

.group-breached .group-bg {
  stroke: var(--red);
  stroke-dasharray: none;
  fill: rgba(255, 59, 59, 0.05);
}

/* ===== Overlays ===== */
.overlay-shield {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay-shield.visible {
  opacity: 1;
  animation: shield-pop 0.5s ease;
}

@keyframes shield-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.overlay-alert {
  opacity: 0;
}

.overlay-alert.visible {
  opacity: 1;
  animation: alert-flash 0.8s ease;
}

@keyframes alert-flash {
  0%, 100% { opacity: 1; }
  25% { opacity: 0.2; }
  50% { opacity: 1; }
  75% { opacity: 0.2; }
}

/* ===== Entrance animations ===== */
@keyframes node-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes edge-enter {
  from { opacity: 0; stroke-dashoffset: 60; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes group-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.node-enter {
  animation: node-enter 0.5s ease both;
}

.edge-enter {
  animation: edge-enter 0.6s ease both;
}

.group-enter {
  animation: group-enter 0.4s ease both;
}

/* ===== Animations ===== */

.health-green {
  animation: pulse-green 2.5s ease-in-out infinite;
}

@keyframes pulse-green {
  0%, 100% { r: 6; }
  50% { r: 7; }
}

.health-yellow {
  animation: pulse-yellow 1.2s ease-in-out infinite;
}

@keyframes pulse-yellow {
  0%, 100% { r: 6; }
  50% { r: 9; }
}

.health-red {
  animation: pulse-red 0.5s ease-in-out infinite;
}

@keyframes pulse-red {
  0%, 100% { r: 6; opacity: 1; }
  50% { r: 10; opacity: 0.6; }
}

.node-down .node-bg {
  animation: shake-stroke 0.5s ease;
}

@keyframes shake-stroke {
  0%, 100% { stroke-opacity: 1; }
  25%, 75% { stroke-opacity: 0.3; }
  50% { stroke-opacity: 1; }
}