/* FILE: css/electrical.css — One-line diagrams, breaker symbols, bus styles */

/* ── One-Line Diagram Container ──────────────────────────────────────────── */
.one-line-diagram {
  background: #090b0e;
  border: 1px solid var(--c-trim);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.one-line-diagram svg {
  width: 100%;
  display: block;
}

/* ── Bus Bars ────────────────────────────────────────────────────────────── */
.bus-bar {
  stroke-width: 4;
  stroke-linecap: square;
  transition: stroke 0.3s;
}
.bus-bar.energized-400kV { stroke: var(--c-orange); filter: drop-shadow(0 0 4px var(--c-orange)); }
.bus-bar.energized-10kV  { stroke: var(--c-amber);  filter: drop-shadow(0 0 3px var(--c-amber)); }
.bus-bar.energized-3kV   { stroke: var(--c-green);  filter: drop-shadow(0 0 3px var(--c-green)); }
.bus-bar.energized-400V  { stroke: var(--c-blue);   filter: drop-shadow(0 0 2px var(--c-blue)); }
.bus-bar.de-energized    { stroke: var(--c-gray);   filter: none; }
.bus-bar.fault           { stroke: var(--c-red);    filter: drop-shadow(0 0 6px var(--c-red)); }

/* Bus voltage label */
.bus-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--c-text-dim);
  dominant-baseline: middle;
}
.bus-label.energized { fill: var(--c-amber); }
.bus-label.kv-400 { fill: var(--c-orange); }

/* ── SVG Breaker Symbols (IEC style square) ──────────────────────────────── */
/* Drawn as SVG rects in the one-line SVG — these classes color them */
.svg-breaker {
  cursor: pointer;
  transition: fill 0.15s, stroke 0.15s;
}
.svg-breaker.closed {
  fill: rgba(0,230,118,0.15);
  stroke: var(--c-green);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 3px var(--c-green));
}
.svg-breaker.open {
  fill: rgba(85,93,107,0.1);
  stroke: var(--c-gray);
  stroke-width: 1.5;
}
.svg-breaker.fault {
  fill: rgba(255,23,68,0.2);
  stroke: var(--c-red);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px var(--c-red));
}
.svg-breaker:hover { filter: brightness(1.3); }

/* Disconnect switch (isolator) — diagonal slash */
.svg-disconnect {
  stroke-width: 1.5;
  stroke-linecap: round;
  cursor: pointer;
  transition: stroke 0.15s;
}
.svg-disconnect.open   { stroke: var(--c-green); }
.svg-disconnect.closed { stroke: var(--c-gray); }

/* Transformer symbol (circle pair) */
.svg-transformer-circle {
  fill: none;
  stroke-width: 2;
}
.svg-transformer-circle.primary   { stroke: var(--c-orange); }
.svg-transformer-circle.secondary { stroke: var(--c-amber); }
.svg-transformer-circle.de-en     { stroke: var(--c-gray); }

/* Generator symbol (circle with G) */
.svg-generator-circle {
  fill: rgba(0,176,255,0.05);
  stroke: var(--c-blue);
  stroke-width: 2;
  cursor: pointer;
  transition: stroke 0.15s;
}
.svg-generator-circle.online   { stroke: var(--c-green); fill: rgba(0,230,118,0.08); }
.svg-generator-circle.offline  { stroke: var(--c-gray);  fill: rgba(0,0,0,0.2); }
.svg-generator-circle.tripped  { stroke: var(--c-red);   fill: rgba(255,23,68,0.08); }

/* Conductor lines */
.conductor {
  stroke-width: 2;
  fill: none;
  transition: stroke 0.3s;
}
.conductor.energized-400kV { stroke: var(--c-orange); }
.conductor.energized-10kV  { stroke: var(--c-amber); }
.conductor.energized-3kV   { stroke: var(--c-green); }
.conductor.energized-400V  { stroke: var(--c-blue); }
.conductor.de-energized    { stroke: #333; }
.conductor.fault           { stroke: var(--c-red); }
.conductor.dc              { stroke: var(--c-purple); stroke-dasharray: 4,2; }

/* Node dot (bus connection point) */
.conductor-node {
  fill: var(--c-amber);
  r: 3;
  transition: fill 0.3s;
}
.conductor-node.de-energized { fill: var(--c-gray); }

/* ── Switchyard Layout Panel ─────────────────────────────────────────────── */
.switchyard-panel {
  background: #080a0d;
  border: 1px solid var(--c-trim);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}

/* Breaker control cell (in distribution panel grids) */
.breaker-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2);
  background: var(--c-panel-mid);
  border: 1px solid var(--c-trim);
  border-radius: var(--radius-sm);
  min-width: 80px;
}
.breaker-cell .bc-label {
  font-size: 9px;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-muted);
  text-align: center;
}
.breaker-cell .bc-id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-white);
}
.breaker-cell .bc-current {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-amber);
}
.breaker-cell .bc-controls {
  display: flex;
  gap: 3px;
}

/* ── 10kV Switchgear Panel ────────────────────────────────────────────────── */
.switchgear-panel {
  background: #0a0b0e;
  border: 2px solid var(--c-trim);
  border-top: 3px solid var(--c-orange);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.switchgear-bus-bar {
  height: 12px;
  margin: var(--sp-2);
  border-radius: 2px;
  transition: background 0.3s, box-shadow 0.3s;
  background: var(--c-gray-dim);
}
.switchgear-bus-bar.energized {
  background: linear-gradient(90deg, var(--c-orange), var(--c-amber));
  box-shadow: 0 0 8px rgba(255,109,0,0.5);
}
.switchgear-feeders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 1px;
  background: var(--c-trim);
  border-top: 1px solid var(--c-trim);
}
.feeder-cell {
  background: var(--c-panel-mid);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.feeder-cell .fc-name {
  font-size: 9px;
  font-family: var(--font-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
}
.feeder-cell .fc-amps {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-amber);
}
.feeder-cell .fc-status {
  font-size: 9px;
  font-family: var(--font-label);
  text-transform: uppercase;
}
.feeder-cell .fc-status.running { color: var(--c-green); }
.feeder-cell .fc-status.stopped { color: var(--c-gray); }
.feeder-cell .fc-status.tripped { color: var(--c-red); }

/* ── MCC (Motor Control Centre) ─────────────────────────────────────────── */
.mcc-panel {
  background: #090b0e;
  border: 2px solid var(--c-trim);
  border-top: 3px solid var(--c-blue);
  border-radius: var(--radius-md);
}
.mcc-header {
  padding: var(--sp-2) var(--sp-3);
  background: rgba(0,176,255,0.06);
  border-bottom: 1px solid var(--c-trim);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--c-blue);
}
.mcc-bucket {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mcc-bucket:last-child { border-bottom: none; }
.mcc-bucket .mb-name {
  flex: 1;
  font-size: var(--fs-xs);
  font-family: var(--font-label);
  color: var(--c-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mcc-bucket .mb-amps {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-amber);
  min-width: 50px;
  text-align: right;
}
.mcc-bucket .mb-status {
  font-size: var(--fs-tiny);
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  min-width: 40px;
  text-align: center;
}
.mb-status.on     { color: var(--c-green); }
.mb-status.off    { color: var(--c-gray); }
.mb-status.trip   { color: var(--c-red); }

/* ── DC / Battery panel ──────────────────────────────────────────────────── */
.battery-panel {
  border: 1px solid var(--c-trim);
  border-top: 2px solid var(--c-purple);
  background: var(--c-panel-mid);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
}
.battery-soc-bar {
  height: 12px;
  background: #0a0c0a;
  border: 1px solid #1a2a1a;
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0;
}
.battery-soc-fill {
  height: 100%;
  transition: width 1s ease;
  background: linear-gradient(90deg, var(--c-green-dim), var(--c-green));
}
.battery-soc-fill.low    { background: linear-gradient(90deg, var(--c-red-dim), var(--c-red)); }
.battery-soc-fill.caution{ background: linear-gradient(90deg, var(--c-amber-dim), var(--c-amber)); }

/* ── Sync/Phasor related ─────────────────────────────────────────────────── */
.synchroscope-container {
  background: #06080b;
  border: 2px solid var(--c-trim);
  border-radius: 50%;
  position: relative;
  aspect-ratio: 1;
}
.sync-param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.sync-param {
  background: #0a0c0a;
  border: 1px solid var(--c-trim);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  text-align: center;
}
.sync-param .sp-label { font-size: var(--fs-tiny); color: var(--c-text-muted); text-transform: uppercase; }
.sync-param .sp-value { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--c-white); }
.sync-param .sp-unit  { font-size: var(--fs-tiny); color: var(--c-text-dim); }
.sync-param.in-window { border-color: var(--c-green); background: rgba(0,230,118,0.05); }
.sync-param.in-window .sp-value { color: var(--c-green); }