/* ===== Canvas (SVG) ===== */
#canvas {
  background-image:
    linear-gradient(to right, rgba(100,116,139,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(100,116,139,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: grab;
  user-select: none;
}
#canvas.panning { cursor: grabbing; }

/* Component nodes */
.node-group { cursor: move; }
.node-group:hover .node-bg { stroke: #10b981; stroke-width: 2; }
.node-group.selected .node-bg { stroke: #10b981; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(16,185,129,0.5)); }

.node-bg {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 1.5;
  rx: 8;
  ry: 8;
  transition: stroke 0.15s, stroke-width 0.15s;
}

.node-header {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  fill: #1e293b;
  pointer-events: none;
}

.node-icon {
  font-size: 22px;
  pointer-events: none;
}

.node-detail {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  fill: #475569;
  pointer-events: none;
}

.node-status-dot {
  pointer-events: none;
}

/* Ports */
.port {
  cursor: crosshair;
  transition: r 0.15s, fill 0.15s;
}
.port:hover { r: 7; }
.port.port-positive { fill: #ef4444; stroke: #b91c1c; }
.port.port-negative { fill: #1e293b; stroke: #0f172a; }
.port.port-ac { fill: #f59e0b; stroke: #b45309; }
.port.port-pv { fill: #3b82f6; stroke: #1d4ed8; }
.port.connecting { fill: #10b981; stroke: #047857; r: 8; }

/* Connections (wires) */
.wire {
  fill: none;
  stroke-width: 2.5;
  cursor: pointer;
  transition: stroke 0.15s, stroke-width 0.15s;
}
.wire:hover { stroke-width: 4; }
.wire.selected { stroke-width: 4; filter: drop-shadow(0 0 4px currentColor); }
.wire-positive { stroke: #ef4444; }
.wire-negative { stroke: #1e293b; }
.wire-ac { stroke: #f59e0b; stroke-dasharray: 6 3; }
.wire-pv { stroke: #3b82f6; }
.wire.warning { stroke: #f97316; stroke-dasharray: 8 4; }
.wire.danger { stroke: #dc2626; stroke-dasharray: 4 2; }

.wire-preview {
  fill: none;
  stroke: #10b981;
  stroke-width: 2.5;
  stroke-dasharray: 5 3;
  pointer-events: none;
}

.wire-label {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  fill: #475569;
  pointer-events: none;
}
.wire-label-bg { fill: #ffffff; }

/* ===== Palette ===== */
.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: grab;
  transition: all 0.15s;
  user-select: none;
}
.palette-item:hover {
  background: #f1f5f9;
  border-color: #10b981;
  transform: translateX(2px);
}
.palette-item:active { cursor: grabbing; }
.palette-icon { font-size: 22px; flex-shrink: 0; }
.palette-name { font-size: 13px; font-weight: 500; color: #334155; }
.palette-desc { font-size: 10px; color: #94a3b8; }

/* ===== Loads ===== */
.load-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  font-size: 12px;
}
.load-item .load-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ===== Properties form ===== */
.prop-group {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  background: #f8fafc;
}
.prop-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 8px;
}
.prop-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.prop-row:last-child { margin-bottom: 0; }
.prop-label { font-size: 12px; color: #475569; }
.prop-input {
  width: 110px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
  text-align: right;
}
.prop-input:focus { outline: 2px solid #10b981; outline-offset: -1px; }

/* Remove number input spinners — allow free text entry */
.prop-input[type="number"]::-webkit-inner-spin-button,
.prop-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prop-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.prop-select {
  width: 110px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
  background: white;
}
.prop-unit {
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, monospace;
  margin-left: 4px;
}

/* ===== Stats ===== */
.stat-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}
.stat-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  font-family: ui-monospace, monospace;
}
.stat-unit { font-size: 12px; color: #64748b; font-weight: 400; }
.stat-detail { font-size: 11px; color: #64748b; margin-top: 2px; }
.stat-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s, background-color 0.3s;
}

/* ===== Warnings ===== */
.warning-item {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid;
  font-size: 12px;
  align-items: flex-start;
}
.warning-item .warning-icon { flex-shrink: 0; font-size: 16px; line-height: 1; }
.warning-item .warning-body { flex: 1; }
.warning-item .warning-title { font-weight: 600; margin-bottom: 2px; }
.warning-item .warning-desc { color: #475569; }

.warning-ok { background: #ecfdf5; border-color: #10b981; color: #065f46; }
.warning-info { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.warning-warn { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.warning-danger { background: #fef2f2; border-color: #dc2626; color: #991b1b; }

/* Status dot colors */
.status-ok { fill: #10b981; }
.status-warn { fill: #f59e0b; }
.status-danger { fill: #dc2626; }

/* ===== Toast ===== */
.toast {
  background: white;
  border-left: 4px solid;
  border-radius: 6px;
  padding: 10px 14px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-size: 13px;
  min-width: 240px;
  animation: slide-in 0.25s ease-out;
}
.toast-ok { border-color: #10b981; color: #065f46; }
.toast-warn { border-color: #f59e0b; color: #92400e; }
.toast-error { border-color: #dc2626; color: #991b1b; }
@keyframes slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Modal display helper */
.modal-open { display: flex !important; }

/* Project list item */
.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}
.project-item:hover { background: #f1f5f9; }
.project-item-info { flex: 1; min-width: 0; }
.project-item-name { font-size: 13px; font-weight: 500; color: #1e293b; }
.project-item-date { font-size: 11px; color: #94a3b8; }
.project-item-actions { display: flex; gap: 4px; }

.btn-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.btn-icon:hover { background: #e2e8f0; }
.btn-icon.danger:hover { background: #fee2e2; color: #b91c1c; }