/* ============================================
   FTTH Simulator — Canvas / Workspace
   ============================================ */

/* Canvas Container */
.canvas-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* Grid pattern background */
  background-size: 20px 20px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  transform-origin: 0 0;
  cursor: grab;
}

.canvas-container:active {
  cursor: grabbing;
}

.canvas-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}

/* SVG Layer for Connections */
#connections-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through to canvas/nodes */
  z-index: var(--z-canvas);
  overflow: visible; /* Prevent SVG from clipping paths drawn outside screen bounds */
}

.connection-path {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2px;
  transition: stroke var(--duration-normal);
  pointer-events: none; /* Pointer events are handled by the thicker invisible hitbox */
}

.connection-path.selected, .connection-path.hovered {
  stroke-width: 3px;
  stroke: var(--accent-blue) !important; /* Force selection color override */
}

.connection-path.animated {
  stroke-dasharray: 6 4;
  animation: dashFlow 1s linear infinite;
}

/* Invisible thick hitbox path for easy interaction */
.connection-hitbox {
  fill: none;
  stroke: transparent;
  stroke-width: 12px;
  cursor: pointer;
  pointer-events: stroke;
}

/* Signal Strength Path Colors */
.connection-path[data-signal="good"] { stroke: var(--color-success); }
.connection-path[data-signal="warning"] { stroke: var(--color-warning); }
.connection-path[data-signal="critical"] { stroke: var(--color-danger); }


/* ---------- Equipment Node ---------- */
.eq-node {
  position: absolute;
  width: 140px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: var(--z-node);
  user-select: none;
  cursor: grab;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}

.eq-node:active {
  cursor: grabbing;
  z-index: var(--z-node-drag);
}

.eq-node:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.eq-node.selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue), var(--shadow-lg), var(--shadow-glow-sm);
}

/* ---------- Realistic Equipment Casing Overrides ---------- */

/* 1. OLT (Dark Brushed Metal Rack Chassis) */
.eq-node[data-type="olt"] {
  width: 180px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow-md);
}

/* OLT Rack Ears */
.eq-node[data-type="olt"]::before,
.eq-node[data-type="olt"]::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 8px;
  height: 28px;
  background: linear-gradient(90deg, #64748b, #475569);
  border: 1px solid #334155;
  border-radius: 2px;
}
.eq-node[data-type="olt"]::before {
  left: -8px;
  box-shadow: -1px 1px 3px rgba(0,0,0,0.3);
}
.eq-node[data-type="olt"]::after {
  right: -8px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* 2. SFP Module (Silver Metallic Transceiver) */
.eq-node[data-type="sfp"] {
  width: 130px;
  background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
  border: 1px solid #64748b;
  color: var(--text-primary);
}

/* SFP Latch Clip & Gold Contacts visual */
.sfp-contacts {
  position: absolute;
  left: 0;
  top: 15px;
  width: 4px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.sfp-contact-bar {
  width: 100%;
  height: 2px;
  background: #fbbf24;
}

.sfp-latch {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 16px;
  border: 2.5px solid var(--accent-blue);
  border-radius: 3px;
  opacity: 0.8;
}

/* 3. ONT (Residential ONU Router) */
.eq-node[data-type="ont"] {
  width: 150px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
}

/* Antennas at the back */
.ont-antenna-left,
.ont-antenna-right {
  position: absolute;
  top: -16px;
  width: 4px;
  height: 18px;
  background: #475569;
  border-radius: 2px;
  transition: transform var(--duration-normal);
}
.ont-antenna-left { left: 24px; transform: rotate(-8deg); }
.ont-antenna-right { right: 24px; transform: rotate(8deg); }
.eq-node[data-type="ont"]:hover .ont-antenna-left { transform: rotate(-15deg); }
.eq-node[data-type="ont"]:hover .ont-antenna-right { transform: rotate(15deg); }

/* ONT Vent Slits */
.ont-vents {
  width: 100%;
  height: 3px;
  display: flex;
  gap: 2px;
  padding: 0 var(--sp-2);
  margin-top: 2px;
  opacity: 0.4;
}
.ont-vent-slit {
  flex: 1;
  height: 100%;
  background: #000;
  border-radius: 1px;
}

/* 4. Splitter Box & ODP Enclosure */
.eq-node[data-type="splitter"] {
  width: 140px;
  background: linear-gradient(180deg, #1e1b4b 0%, #0c0a0f 100%);
  border: 1px solid #312e81;
}
.eq-node[data-type="odp"] {
  width: 150px;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border: 1px solid #475569;
}
/* ODP Lock details */
.odp-lock {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 12px;
  background: #64748b;
  border: 1px solid #475569;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

/* 5. Cable Spools */
.eq-node[data-type="fiber_cable"],
.eq-node[data-type="drop_cable"] {
  width: 140px;
  background: linear-gradient(135deg, #111627 0%, #1e2440 100%);
  border: 1px solid var(--border-default);
}
.spool-flange-l,
.spool-flange-r {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 6px;
  background: linear-gradient(180deg, #d97706, #92400e);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.spool-flange-l { left: 4px; }
.spool-flange-r { right: 4px; }

/* 6. Connector Adapter (SC Jacket sleeve visual) */
.eq-node[data-type="connector"] {
  width: 125px;
}
.connector-body-visual {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.connector-body-visual[data-conn="SC/APC"] {
  background: #16a34a; /* green SC/APC adapter */
  border: 1px solid #15803d;
}
.connector-body-visual[data-conn="SC/UPC"] {
  background: #2563eb; /* blue SC/UPC adapter */
  border: 1px solid #1d4ed8;
}

/* ---------- Leds indicators ---------- */
.led-panel {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: 3px var(--sp-2);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.led-group {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--text-muted);
}

.led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1e293b;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
  transition: all var(--duration-fast);
}

/* LED light states */
.led.green-on {
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success), inset 0 1px 1px rgba(255,255,255,0.8);
}
.led.green-blink {
  animation: blinkGreen 0.8s infinite alternate;
}
.led.red-on {
  background: var(--color-danger);
  box-shadow: 0 0 6px var(--color-danger), inset 0 1px 1px rgba(255,255,255,0.8);
}
.led.red-blink {
  animation: blinkRed 0.6s infinite alternate;
}
.led.yellow-on {
  background: var(--color-warning);
  box-shadow: 0 0 6px var(--color-warning), inset 0 1px 1px rgba(255,255,255,0.8);
}

@keyframes blinkGreen {
  0% { background: #1e293b; box-shadow: none; }
  100% { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
}
@keyframes blinkRed {
  0% { background: #1e293b; box-shadow: none; }
  100% { background: var(--color-danger); box-shadow: 0 0 8px var(--color-danger); }
}

/* Node Header styling */
.eq-node-header {
  padding: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.eq-node[data-category="active"] .eq-node-header {
  background: linear-gradient(to right, rgba(0, 212, 170, 0.12), transparent);
}

.eq-node[data-category="passive"] .eq-node-header {
  background: linear-gradient(to right, rgba(99, 102, 241, 0.12), transparent);
}

.eq-node-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eq-node[data-category="active"] .eq-node-icon { color: var(--cat-active); }
.eq-node[data-category="passive"] .eq-node-icon { color: var(--cat-passive); }

.eq-node-name {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Floating Action Bar on Selection */
.eq-node-actions {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%) translateY(12px) scale(0.85);
  display: flex;
  gap: 4px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 3px 6px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-spring), transform var(--duration-normal) var(--ease-spring);
  z-index: 100;
}

.eq-node.selected .eq-node-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.eq-node-settings, .eq-node-info, .eq-node-delete {
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
}

.eq-node-settings svg, .eq-node-info svg, .eq-node-delete svg {
  width: 14px;
  height: 14px;
}

.eq-node-settings:hover, .eq-node-info:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.eq-node-delete:hover {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* Node Body */
.eq-node-body {
  padding: var(--sp-2);
  min-height: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.eq-node-value {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

/* ---------- Ports (Hardware Sockets) ---------- */
.port {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #0a0d16;
  border: 2px solid #475569;
  border-radius: 2px; /* SC optical connector flange (square!) */
  top: 50%;
  transform: translateY(-50%);
  cursor: crosshair;
  z-index: calc(var(--z-node) + 2);
  transition: all var(--duration-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.port::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #334155;
  transition: background-color var(--duration-fast);
}

.port:hover {
  border-color: var(--accent-blue);
  transform: translateY(-50%) scale(1.25);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.port.connected::after {
  background: var(--accent-teal);
  box-shadow: 0 0 6px var(--accent-teal), 0 0 12px var(--accent-teal);
}

.port-input {
  left: -6px;
  border-left-width: 3px;
  border-left-color: #2563eb; /* UPC Blue entry flange default */
}

.port-output {
  right: -6px;
  border-right-width: 3px;
  border-right-color: #16a34a; /* APC Green exit flange default */
}

/* Adapt port colors based on connector type */
.eq-node[data-type="connector"] .port-input,
.eq-node[data-type="sfp"] .port-input {
  border-left-color: #2563eb;
}
.eq-node[data-type="connector"] .port-output {
  border-right-color: #16a34a;
}


/* Port Labels (Optional, visible on hover of node) */
.port-label {
  position: absolute;
  font-size: 8px;
  color: var(--text-muted);
  top: -12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.eq-node:hover .port-label {
  opacity: 1;
}

.port-input + .port-label { left: -5px; }
.port-output + .port-label { right: -5px; }

/* Active drawing connection line */
.drawing-line {
  pointer-events: none;
  stroke: var(--accent-blue);
  stroke-dasharray: 4;
}

/* Drop Indicator for Canvas */
.canvas-drop-indicator {
  position: absolute;
  width: 120px;
  height: 60px;
  border: 2px dashed var(--accent-teal);
  border-radius: var(--radius-md);
  background: var(--accent-teal-bg);
  pointer-events: none;
  z-index: var(--z-canvas);
  opacity: 0.5;
}

/* ---------- Light Theme Equipment Visual Overrides ---------- */

[data-theme="light"] .eq-node {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* OLT - Bright Metallic Chassis */
[data-theme="light"] .eq-node[data-type="olt"] {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--shadow-sm);
}
[data-theme="light"] .eq-node[data-type="olt"]::before,
[data-theme="light"] .eq-node[data-type="olt"]::after {
  background: linear-gradient(90deg, #e2e8f0, #cbd5e1);
  border-color: #94a3b8;
}

/* SFP - Silver Plated Casing */
[data-theme="light"] .eq-node[data-type="sfp"] {
  background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
  border-color: #94a3b8;
  color: #0f172a;
}
[data-theme="light"] .eq-node[data-type="sfp"] .eq-node-name {
  color: #0f172a;
}

/* ONT - Premium Glossy White Housing */
[data-theme="light"] .eq-node[data-type="ont"] {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
}

/* Splitter - Pastel Indigo Tray */
[data-theme="light"] .eq-node[data-type="splitter"] {
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #c7d2fe;
}

/* ODP - Clean Distribution Pedestal Gray */
[data-theme="light"] .eq-node[data-type="odp"] {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #cbd5e1;
}
[data-theme="light"] .eq-node[data-type="odp"] .odp-lock {
  background: #cbd5e1;
  border-color: #94a3b8;
}

/* Cable Reels - Bright Spools */
[data-theme="light"] .eq-node[data-type="fiber_cable"],
[data-theme="light"] .eq-node[data-type="drop_cable"] {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
}

/* LED Indicator Panel Sub-elements in Light Mode */
[data-theme="light"] .led-panel {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.02);
}
[data-theme="light"] .led-group {
  color: #475569;
}
[data-theme="light"] .led {
  background: #cbd5e1;
}

/* Ports - Light Sockets */
[data-theme="light"] .port {
  background: #f8fafc;
  border-color: #94a3b8;
}
[data-theme="light"] .port::after {
  background: #cbd5e1;
}
[data-theme="light"] .port.connected::after {
  background: var(--accent-teal);
}

/* Floating Actions in Light Mode */
[data-theme="light"] .eq-node-actions {
  background: #ffffff;
  border-color: #cbd5e1;
}