/* Diagram nodes, edges, mapping circles and the node context menu. */

/* hover highlight: #viewport gets .hlOn, the hovered node's neighbourhood .nodeLit */
.hlOn .lnode:not(.nodeLit){ opacity:0.2; }
.hlOn .edge:not(.edgeActive){ opacity:0.08; }
.nodeActive rect{ stroke:var(--primary); stroke-width:2.6; }
.edgeActive{ stroke:var(--primary); stroke-width:2.6; opacity:1 !important; }

/* edge mapping circle */
.edgeCircle{
  fill:white; stroke:#94a3b8; stroke-width:1.5;
  cursor:pointer; transition:fill .15s, stroke .15s;
}
.edgeCircle:hover{ fill:var(--primary-soft); stroke:var(--primary); }
.edgeCircle.hasMappings{ fill:var(--primary); stroke:var(--primary); }

/* edge mapping popup */
#edgePopup{
  position:fixed; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); z-index:300; min-width:340px; max-width:500px;
  font-size:13px; font-family:inherit;
}
.edgePopupHeader{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border);
  font-weight:600; font-size:13px; color:var(--text); gap:8px;
}
.edgePopupHeader span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edgePopupBody{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
#edgePopupTable{ width:100%; border-collapse:collapse; }
#edgePopupTable th{
  font-size:11px; font-weight:600; color:var(--muted);
  text-align:left; padding:4px 8px; border-bottom:1px solid var(--border);
}
#edgePopupTable td{ padding:4px 8px; border-bottom:1px solid var(--border-soft); }
#edgeTransition{
  display:flex; flex-direction:column; gap:8px;
  padding-bottom:10px; margin-bottom:10px;
  border-bottom:1px solid var(--border);
}
#edgeTransition label{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); }
#edgeTransition select, #edgeTransition input{ font-size:12.5px; font-weight:400; }

/* A row that isn't in the database yet: both fields are needed before it can be. */
#edgePopupTable tr.edgeMapUnsaved td{ background:#FFF8E8; }
#edgePopupTable tr.edgeMapUnsaved td:first-child{ box-shadow:inset 3px 0 0 #E0B54A; }
#edgeMapHint{ font-size:11px; color:var(--muted); padding:6px 0 0; }

#edgePopupTable td[contenteditable]{ outline:none; min-width:110px; }
#edgePopupTable td[contenteditable]:focus{ background:var(--primary-soft); border-radius:4px; }
#edgePopupTable .delBtn{
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:2px 6px; font-size:15px; border-radius:4px;
}
#edgePopupTable .delBtn:hover{ color:#ef4444; background:#fef2f2; }
#edgePopupAddRow{ align-self:flex-start; }

/* node right-click context menu */
#nodeCtxMenu{
  position:fixed; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); z-index:400; min-width:170px; overflow:hidden;
}
#nodeCtxMenu button{
  display:block; width:100%; text-align:left;
  padding:9px 14px; border:none; background:none; border-radius:0;
  cursor:pointer; font-size:13px; font-family:inherit; color:var(--text);
}
#nodeCtxMenu button:hover{ background:var(--primary-soft); color:var(--link); }
#nodeCtxMenu hr{ border:none; border-top:1px solid var(--border); margin:2px 0; }

/* Department filter with sources included: the department's own records at
   full strength, the sources feeding them faded until hovered. */
.nodeUpstream{ opacity:.55; transition:opacity .15s ease; }
.nodeUpstream:hover{ opacity:1; }